diff --git a/.gitignore b/.gitignore index 0a1faf325..837c7d7e7 100644 --- a/.gitignore +++ b/.gitignore @@ -29,6 +29,9 @@ packages/core/config/Config.schema.json !packages/cli/templates/angular/**/files/**/* !packages/cli/templates/react/**/files/**/* +# bundled MCP server (build artifact) +/packages/cli/mcp/ + # Misc npm-debug.log* yarn-error.log* diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 000000000..a40105046 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,37 @@ +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx"] + path = packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx + url = https://github.com/IgniteUI/igniteui-docfx + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples"] + path = packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples + url = https://github.com/IgniteUI/igniteui-angular-samples + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples"] + path = packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples + url = https://github.com/IgniteUI/igniteui-angular-examples + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs"] + path = packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs + url = https://github.com/IgniteUI/igniteui-xplat-docs + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/react/igniteui-react-examples"] + path = packages/igniteui-mcp/igniteui-doc-mcp/react/igniteui-react-examples + url = https://github.com/IgniteUI/igniteui-react-examples.git + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/webcomponents/igniteui-wc-examples"] + path = packages/igniteui-mcp/igniteui-doc-mcp/webcomponents/igniteui-wc-examples + url = https://github.com/IgniteUI/igniteui-wc-examples.git + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples"] + path = packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples + url = https://github.com/IgniteUI/igniteui-blazor-examples.git + ignore = dirty +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular"] + path = packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular + url = https://github.com/IgniteUI/igniteui-angular.git +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/webcomponents/igniteui-webcomponents"] + path = packages/igniteui-mcp/igniteui-doc-mcp/webcomponents/igniteui-webcomponents + url = https://github.com/IgniteUI/igniteui-webcomponents.git +[submodule "packages/igniteui-mcp/igniteui-doc-mcp/react/igniteui-react"] + path = packages/igniteui-mcp/igniteui-doc-mcp/react/igniteui-react + url = https://github.com/IgniteUI/igniteui-react.git diff --git a/.npmignore b/.npmignore new file mode 100644 index 000000000..ade519d61 --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +# MCP server source, submodules, and build artifacts +# (bundled into packages/cli/mcp/ via build:mcp-bundle script) +packages/igniteui-mcp/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 13b7d9f28..c71f349b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,22809 @@ +# 14.10.0-alpha.4 + +## igniteui/cli-core@14.10.0-alpha.4 (2026-03-27) + + + +# 14.10.0-alpha.3 (2026-03-25) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **lint:** re-enable no-console rule ([3ffa07f](https://github.com/IgniteUI/igniteui-cli/commit/3ffa07ff8812e93dd358b38332f3abc2ea955af2)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **packages:** disable non-functional registry login attempt on upgrade ([#1528](https://github.com/IgniteUI/igniteui-cli/issues/1528)) ([1008a1e](https://github.com/IgniteUI/igniteui-cli/commit/1008a1e3fadb20553f464162d69a5bb2393d615b)) +* **packages:** login command for node@24+ spawn change ([cbb6502](https://github.com/IgniteUI/igniteui-cli/commit/cbb6502e90cfeaa7a87885748aa4b337c37c0b2f)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + +#### Bug Fixes + +* **react:** enhance upgrade-packages to support workspace glob patterns for projects without explicit workspaces ([#1424](https://github.com/IgniteUI/igniteui-cli/issues/1424)) ([6eeee2f](https://github.com/IgniteUI/igniteui-cli/commit/6eeee2ff879902197f012e83eb6064a72a4c438e)) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* **wc:** enhance upgrade-packages to support workspace glob patterns and vite.config.ts files ([#1408](https://github.com/IgniteUI/igniteui-cli/issues/1408)) ([bcd62be](https://github.com/IgniteUI/igniteui-cli/commit/bcd62be52107bcbdab6d207866fe7ffb99883b6d)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + +#### Features + +* **React:** Update react html files with licensed packages when upgrading packages ([#1395](https://github.com/IgniteUI/igniteui-cli/issues/1395)) ([7a7c4f0](https://github.com/IgniteUI/igniteui-cli/commit/7a7c4f0b5b74acc67e7524e643ee2a102ededb46)) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + +#### Bug Fixes + +* **WC:** update themes import paths to licensed version ([#1387](https://github.com/IgniteUI/igniteui-cli/issues/1387)) ([260068b](https://github.com/IgniteUI/igniteui-cli/commit/260068b9c9e3f4e895717ca6003f6ba0aded5cf2)) + + + +## 14.3.16 (2025-03-31) + + +#### Bug Fixes + +* **workflows:** Do not throw error if github workflows directory does not exist when updating ([#1383](https://github.com/IgniteUI/igniteui-cli/issues/1383)) ([acc771a](https://github.com/IgniteUI/igniteui-cli/commit/acc771afac962166f630c36beff428aa83af97de)) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + +#### Features + +* **core:** add FormattingService ([f7ea2a4](https://github.com/IgniteUI/igniteui-cli/commit/f7ea2a4d8f57b5f1edb531df76d05c541df754e1)) +* **core:** add new types ([aa636a3](https://github.com/IgniteUI/igniteui-cli/commit/aa636a3b1642da1a57758d49e0f7f6f79c7e2d01)) +* **core:** add TypeScriptASTTransformer ([9854847](https://github.com/IgniteUI/igniteui-cli/commit/9854847e32c718d82013e1fc8b58d9b06700b819)) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **kebacase:** do not add dash before numbers ([25d8f54](https://github.com/IgniteUI/igniteui-cli/commit/25d8f544243f6e1f5583c772f4b8e0e3cbb7ca12)) +* **kebap-case:** add dash between number and uppercase letter ([0be7637](https://github.com/IgniteUI/igniteui-cli/commit/0be7637bc19423821e066a9e62dbdec3e5bd5cb4)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + +#### Bug Fixes + +* update Utils.LowerDashed function ([#1171](https://github.com/IgniteUI/igniteui-cli/issues/1171)) ([2254ecc](https://github.com/IgniteUI/igniteui-cli/commit/2254ecc0267be8c19e7f1d5295886b2ba6c345c7)) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + +#### Bug Fixes + +* **package-manager:** skip setting up child install tasks for new projects ([de2a134](https://github.com/IgniteUI/igniteui-cli/commit/de2a1341e13ba20635a5ed94c5cc7e4c79c7ca46)) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **import:** Update func signature ([a3ac17a](https://github.com/IgniteUI/igniteui-cli/commit/a3ac17ab30436ed0420c92902c53ff7c3dfd0534)) +* **lint:** Fix lint errors ([6b5dd98](https://github.com/IgniteUI/igniteui-cli/commit/6b5dd985e90fb9cf8675c6cf0c06c6193e27fb32)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **ts-transform:** respect quote type from editorconfig ([99b3aad](https://github.com/IgniteUI/igniteui-cli/commit/99b3aadce0e6e7de8e2fef502db2ff1811d7a11e)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + +#### Features + +* **tsutil:** add optional parent route to TsFileUpdateUtil.addRoute method ([#777](https://github.com/IgniteUI/igniteui-cli/issues/777)) ([2df694a](https://github.com/IgniteUI/igniteui-cli/commit/2df694ac03a4601059f730b6cc9ae7d3ab6371ea)) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* remove angular as default choice for step by step [#579](https://github.com/IgniteUI/igniteui-cli/issues/579) ([5d2697e](https://github.com/IgniteUI/igniteui-cli/commit/5d2697e019d344cc5ebedf9ac00de94b012ded73)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + +#### Bug Fixes + +* **package-manager:** manually update pckgJSON instead of letting npm do it, [#751](https://github.com/IgniteUI/igniteui-cli/issues/751) ([6fa4c0c](https://github.com/IgniteUI/igniteui-cli/commit/6fa4c0c8d5afecfef8a8c1de18b1f6620edc006c)) + + + +# 5.1.0-beta.3 (2020-05-29) + + +#### Bug Fixes + +* **upgrade:** clear stdin stream before login prompt ([c77f49a](https://github.com/IgniteUI/igniteui-cli/commit/c77f49ab940933e9df6da2518d5192d5d49fbd0c)) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + +## igniteui/angular-templates@21.1.14100-alpha.4 (2026-03-27) + + + +# 14.10.0-alpha.3 (2026-03-25) + + +#### Features + +* Updated VS Code MCP configuration to align with new naming conventions. ([4fdb8e0](https://github.com/IgniteUI/igniteui-cli/commit/4fdb8e091b87c960c9cbbb35c126b6b7a32475fc)) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* **igx-ts:** update angular project to use vitest with playwright ([#1542](https://github.com/IgniteUI/igniteui-cli/issues/1542)) ([85dd3e6](https://github.com/IgniteUI/igniteui-cli/commit/85dd3e609295d7d801c127715c5fe8947f90f23d)) +* **igx-ts:** update project setup and templates naming ([#1514](https://github.com/IgniteUI/igniteui-cli/issues/1514)) ([ed4d1dd](https://github.com/IgniteUI/igniteui-cli/commit/ed4d1ddced09cee062caae7f8445df5ba11d8cac)) +* **mcp:** add angular-cli server configuration to mcp.json ([43a01a0](https://github.com/IgniteUI/igniteui-cli/commit/43a01a08ca6ac9b9a7958a172e5f27b02fe1fbb1)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts-legacy:** fi grid type import and add missing override ([ff24df0](https://github.com/IgniteUI/igniteui-cli/commit/ff24df0e665d8c834f510bfc62fc99af6532a38e)) +* **igx-ts:** fix eslint configurations ([#1509](https://github.com/IgniteUI/igniteui-cli/issues/1509)) ([ec63959](https://github.com/IgniteUI/igniteui-cli/commit/ec63959ee65e5c369d483d5dc34965f121a36cae)) +* **igx-ts:** fix side nav route data text ([487ba12](https://github.com/IgniteUI/igniteui-cli/commit/487ba122c2d51822642d15f501ea776193bf6a44)) +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **angular:** add igniteui angular core override ([0a5d46f](https://github.com/IgniteUI/igniteui-cli/commit/0a5d46f73bd3d621a833d07ad09318ccbdcfb9b9)) +* **angular:** add missing providers ([804703e](https://github.com/IgniteUI/igniteui-cli/commit/804703e984919aa2fac6272f8058f94256460b73)) +* **angular:** empty template config ([75eef02](https://github.com/IgniteUI/igniteui-cli/commit/75eef022a33f0dc6bc5b90816ccee9c415d76289)) +* update imports ([a2bf7bf](https://github.com/IgniteUI/igniteui-cli/commit/a2bf7bf6fc973ba0af8d12dc1c33605419475891)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + +#### Bug Fixes + +* **angular:** fix the type of the providers ([142dbda](https://github.com/IgniteUI/igniteui-cli/commit/142dbda9665430bb3fb5a97744e8913195975708)) + + + +## 14.8.5-beta.0 (2026-02-10) + + +#### Bug Fixes + +* **angular:** add provide zone change detection in app config for angular standalone ([27b516b](https://github.com/IgniteUI/igniteui-cli/commit/27b516b640b1ecf9fdb7320e6a5c84a398aab505)) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* add same fix to legacy angular projects ([2456829](https://github.com/IgniteUI/igniteui-cli/commit/245682908c81c931b65707b5098a98e3991f6f71)) +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) +* move tearDown to chart related test files ([40b1739](https://github.com/IgniteUI/igniteui-cli/commit/40b1739734199b035c32b02937456c9ae444654a)) +* remove calls to test.ts ([c08ca9f](https://github.com/IgniteUI/igniteui-cli/commit/c08ca9fcd472488a125c2f073bd06e051a5f3314)) +* remove test.ts as not needed ([451d49a](https://github.com/IgniteUI/igniteui-cli/commit/451d49ab3c6b7652b29b062e1e3a9301f2497a0f)) + + + +## 14.8.3 (2026-01-19) + + +#### Bug Fixes + +* **angular:** remove glob and rimraf from standalone package json ([#1478](https://github.com/IgniteUI/igniteui-cli/issues/1478)) ([0a3afce](https://github.com/IgniteUI/igniteui-cli/commit/0a3afce21e6e14196c8942f9f15a56793e1679fa)) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + +#### Bug Fixes + +* **ng:** move eqeqeq rule ([#1433](https://github.com/IgniteUI/igniteui-cli/issues/1433)) ([29a574d](https://github.com/IgniteUI/igniteui-cli/commit/29a574db2af16adff262440d789c58216ba08a8e)) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + +#### Bug Fixes + +* **angular:** fix eslint config for angular modules ([#1423](https://github.com/IgniteUI/igniteui-cli/issues/1423)) ([2420d26](https://github.com/IgniteUI/igniteui-cli/commit/2420d26511cffef06cad58fa7e67a61a6b885187)) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* **ng, standalone:** add test setup file for angular standalone ([#1421](https://github.com/IgniteUI/igniteui-cli/issues/1421)) ([feebb55](https://github.com/IgniteUI/igniteui-cli/commit/feebb5574cfffe86f6f2b342c2643b3ef9651a3c)) + + + +## 14.5.4 (2025-07-01) + + +#### Bug Fixes + +* **ng:** Add same proj rxjs version in overrides, so there are no peer dep errors for it. It is needed when having reveal or other overrides. ([4728d19](https://github.com/IgniteUI/igniteui-cli/commit/4728d19e7658cf5c4d863a6c277be696f77e5ac5)) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **angular:** fix theme errors ([#1404](https://github.com/IgniteUI/igniteui-cli/issues/1404)) ([3e7e4a3](https://github.com/IgniteUI/igniteui-cli/commit/3e7e4a3777bde5cc025df182bb57e5b9f002c5d9)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* **angular:** add ovverides for reveal sdk wrappers ([d2bc8cb](https://github.com/IgniteUI/igniteui-cli/commit/d2bc8cb26584f5836d633d24421d6dc774bd53a5)) +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Bug Fixes + +* adapt ngModules templates to 19 changes ([2ce6e9d](https://github.com/IgniteUI/igniteui-cli/commit/2ce6e9d38acef0f0e8981ef054f61ab35d137fd8)) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + + +## 13.4.1 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +# 13.4.0 (2024-07-22) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + +#### Features + +* **ng-sa-base:** add vscode template folder ([a4787e7](https://github.com/IgniteUI/igniteui-cli/commit/a4787e74fcc715aceaa4c265fd97e4452e70463e)) +* **ngm-base:** add vscode template folder ([0ed6fb8](https://github.com/IgniteUI/igniteui-cli/commit/0ed6fb8cf8ef75103c84e8ee2ddeaa2886be3922)) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* fix yml script placeholder delimiters ([#1239](https://github.com/IgniteUI/igniteui-cli/issues/1239)) ([45a2264](https://github.com/IgniteUI/igniteui-cli/commit/45a2264a93edc5b0ca307d5ec43fcd6a9de42cea)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **_base-legacy:** update project type to legacy ([f8984c9](https://github.com/IgniteUI/igniteui-cli/commit/f8984c93f02e8391ca721bc49eeabd45e5f7bb34)) +* **_base:** provide http client ([1e1d1c2](https://github.com/IgniteUI/igniteui-cli/commit/1e1d1c2d6c70a110ace81e74c91bcab2a7021086)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igx-ts:** update karma-jasmine-html-reporter ([0cf034d](https://github.com/IgniteUI/igniteui-cli/commit/0cf034db6474b8ed88e9b3d93e9b3011afd47b3b)) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **igx:** remove prod config for ng build ([d90c056](https://github.com/IgniteUI/igniteui-cli/commit/d90c056aed7ac87f972ea719eeac9367e6b97226)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** more fixes ([1373d18](https://github.com/IgniteUI/igniteui-cli/commit/1373d18e45d8fa9bb69bf5692b360bb4ecec531b)) +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +## 11.1.2 (2023-05-25) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + +#### Bug Fixes + +* **igx-ts:** updating dependencies [#1099](https://github.com/IgniteUI/igniteui-cli/issues/1099) ([#1102](https://github.com/IgniteUI/igniteui-cli/issues/1102)) ([cd3b35a](https://github.com/IgniteUI/igniteui-cli/commit/cd3b35ac7961474ecd4ecbb8c4dffa33067c20f1)) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + +#### Bug Fixes + +* **fintech grid:** fix slow grid [#1020](https://github.com/IgniteUI/igniteui-cli/issues/1020) ([4f888dc](https://github.com/IgniteUI/igniteui-cli/commit/4f888dc3c2b1fd6ad896b197634d3aa0c3ef57cd)) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **ng:** gridAPI rename ([5b8b0a5](https://github.com/IgniteUI/igniteui-cli/commit/5b8b0a5e5e21ce5ae2228e0d025eea0195206292)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + +#### Bug Fixes + +* **templates:** Adding override modifier. ([6334d17](https://github.com/IgniteUI/igniteui-cli/commit/6334d174642212d942c5f5669c1082ae56bb3cc8)) + + + +# 9.1.0-rc.0 (2022-02-24) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) +* **angular:** remove old code ([3b063db](https://github.com/IgniteUI/igniteui-cli/commit/3b063db9cf51509b289148f4928cdfda9837a6dd)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **schematics:** fix home import without placeholder ([#966](https://github.com/IgniteUI/igniteui-cli/issues/966)) ([9263bb2](https://github.com/IgniteUI/igniteui-cli/commit/9263bb22b6dd699845d3e6fad7ab78536f7a484c)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + +#### Bug Fixes + +* changes from latest rc, packages updates ([f59905f](https://github.com/IgniteUI/igniteui-cli/commit/f59905fbd0d37d536b2a13dd002cc99ce8c48165)) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) +* **angular:** new theme imports upgrade packages ([3ae74d9](https://github.com/IgniteUI/igniteui-cli/commit/3ae74d9bb9a338f939e9e5fb73c978003401c2a7)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + +#### Bug Fixes + +* remove icon color, becasue it is deprecated ([7b33804](https://github.com/IgniteUI/igniteui-cli/commit/7b338049a3182d7a8ea9e7106d10ef485dcc0623)) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +# 8.1.0-rc.0 (2021-07-30) + + +#### Bug Fixes + +* **igx-ts:** remove deprecated properties from scenario templates ([f84dc3c](https://github.com/IgniteUI/igniteui-cli/commit/f84dc3cd9626d5f287caed74cd32fda6849906e2)) + + + +# 8.1.0-beta.1 (2021-07-30) + + +#### Bug Fixes + +* **awesome-grid:** fix deprecated properties warnings ([f7a5b0c](https://github.com/IgniteUI/igniteui-cli/commit/f7a5b0c589c4b0aa8ded7c036859956d84c1ed23)) +* **fintech-grid:** fix console warnings and errors ([eaaf733](https://github.com/IgniteUI/igniteui-cli/commit/eaaf73311b45b9fc326353c8c6e6a1efe3f6f225)) +* **igx-ts:** Update angular.json ([c038c70](https://github.com/IgniteUI/igniteui-cli/commit/c038c708c5d2476e819071fd6c9defe29915b904)) +* **igx-ts:** use explicit index in drop-down components for logic view ([cb96f7d](https://github.com/IgniteUI/igniteui-cli/commit/cb96f7dcc2a5a4af2c585b22b50daa372f3684e9)) + + +#### Features + +* **igx-ts:** update custom grid templates w/ 12.1 paginator ([2b5058b](https://github.com/IgniteUI/igniteui-cli/commit/2b5058bd8c2f1946fd1f52b848a5b6ca9aebfcee)) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* **igx-templates:** add igx-accordion template ([#851](https://github.com/IgniteUI/igniteui-cli/issues/851)) ([03e74cd](https://github.com/IgniteUI/igniteui-cli/commit/03e74cd194184b629ea09ec3cfa5218943d0feef)) +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + +#### Bug Fixes + +* **igx-ts:** fix strict errors in base and side-nav projects ([963d23d](https://github.com/IgniteUI/igniteui-cli/commit/963d23dc9771d8d184bff89fe2e2782e3bd97219)) +* **igx-ts:** fix strict errors in side-nav-auth project ([695f430](https://github.com/IgniteUI/igniteui-cli/commit/695f430c693b4a4cb817784d4b20dc0c268ec80c)) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + +#### Bug Fixes + +* **angular-templates:** fix issue with strict templates in igx-ts ([38aaa75](https://github.com/IgniteUI/igniteui-cli/commit/38aaa756908493244414a51cc31688c27246b2f6)), closes [#850](https://github.com/IgniteUI/igniteui-cli/issues/850) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + +#### Bug Fixes + +* **fonts:** Fix icon font names and families ([35a702e](https://github.com/IgniteUI/igniteui-cli/commit/35a702ee21d4a780b9318de071246969af54fca7)) +* **template:** Fix and upadte awesome template ([f2b51aa](https://github.com/IgniteUI/igniteui-cli/commit/f2b51aa2685220b282ca8a25bb2580f44b960bcb)) +* **warnings:** Update icons for grids samples ([0efbbae](https://github.com/IgniteUI/igniteui-cli/commit/0efbbaecdcb3b6095c6ebc483729214f5e4753aa)) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + +#### Bug Fixes + +* **igx-templates:** provide service in tree sample, add some style ([b76452a](https://github.com/IgniteUI/igniteui-cli/commit/b76452a22d047a07d95c19fd3c720466065f178e)) +* remove strict checks and update open() method ([f2877e3](https://github.com/IgniteUI/igniteui-cli/commit/f2877e342746f85962d3f10125c6b784e53eb5d2)) + + +#### Features + +* **igx-templates:** add igx-tree template ([41bc6c3](https://github.com/IgniteUI/igniteui-cli/commit/41bc6c37b19c9136335347a468cdd5c8685a1f61)) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + +#### Bug Fixes + +* **toolbar:** Update hgrid & treegrid custom template toolbar ([c27af22](https://github.com/IgniteUI/igniteui-cli/commit/c27af22c413da93305a5c90c8a60a6dbac1a01e1)) + + + +## 7.0.1 (2020-11-16) + + +#### Bug Fixes + +* **igx-ts:** add local storage to spec ([3056a97](https://github.com/IgniteUI/igniteui-cli/commit/3056a97d99c492c04f2bbf19a7bd09c418294dbf)) +* **igx,custom-grid:** assign allowFiltering when selected as option ([7534c5f](https://github.com/IgniteUI/igniteui-cli/commit/7534c5f51736587b87217042b98c1be753cd76a8)) +* ssr breaks because of localStorage ref ([dc9410f](https://github.com/IgniteUI/igniteui-cli/commit/dc9410ff7c333bdece6ba25212f6c763afe64601)) + + + +# 7.0.0 (2020-11-13) + + +#### Bug Fixes + +* **igx-ts:** update build-angular ([082869c](https://github.com/IgniteUI/igniteui-cli/commit/082869cf27b52cb26695b6f90f4980ea85e67574)) + + + +# 7.0.0-rc.2 (2020-11-12) + + +#### Bug Fixes + +* **igx-ts:** crm grid with new toolbar ([a387742](https://github.com/IgniteUI/igniteui-cli/commit/a387742493b73f2c2f5e2cbacaf1bbe5a4d9345f)) +* **igx-ts:** fix toolbar according to latest changes ([93323c8](https://github.com/IgniteUI/igniteui-cli/commit/93323c81a3e388ae46e1dabcca13261312f92ade)) +* **igx-ts:** fix toolbar for grid fintech ([edc2057](https://github.com/IgniteUI/igniteui-cli/commit/edc20571657d5177c7a82ccae32d86f430970185)) +* **igx-ts:** tree-grid toolbar update ([2c985d7](https://github.com/IgniteUI/igniteui-cli/commit/2c985d78902d90439cbef733e6252f8c1eae37e3)) +* **igx-ts:** update HGrid Batch demo ([890a02d](https://github.com/IgniteUI/igniteui-cli/commit/890a02d54be89358aff76f9b07b3d8630df4f79c)) + + + +## 6.2.1 (2020-11-11) + + +#### Bug Fixes + +* **igx, side-auth:** add SSR-friendly local storage service ([8db27be](https://github.com/IgniteUI/igniteui-cli/commit/8db27be4739d396bbd34c389d9227aabdd01b970)) +* **igx,side-auth:** add proper wrapper class so layout is 100% ([508df9d](https://github.com/IgniteUI/igniteui-cli/commit/508df9d2255ec1a908ecd4054a841360c1827933)) + + + +# 7.0.0-rc.1 (2020-11-10) + + +#### Bug Fixes + +* **igx-ts:** fix package.json for auth project ([00b9cd9](https://github.com/IgniteUI/igniteui-cli/commit/00b9cd942ec154c76da1ac0e810e366cf373b64f)) +* **igx-ts:** remove base.json for auth project ([019535b](https://github.com/IgniteUI/igniteui-cli/commit/019535be27bac30b065b27a6facde53578a08456)) +* **igx-ts:** revert deleted packages ([acede53](https://github.com/IgniteUI/igniteui-cli/commit/acede5371f24b10be2314de0118ff1976cfb8c35)) + + + +# 7.0.0-rc.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** remove unnecessary quotes ([cd9c16c](https://github.com/IgniteUI/igniteui-cli/commit/cd9c16cea9f4d120e7b6e0dd9112e907c5f2228b)) + + + +# 7.0.0-alpha.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** Use correct module name in app.module import [#792](https://github.com/IgniteUI/igniteui-cli/issues/792) ([53691b5](https://github.com/IgniteUI/igniteui-cli/commit/53691b54af896c410a0b2b0c3e91751f76341dbd)) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + +#### Bug Fixes + +* **templates, crm grid, grid batch editing:** Fixing issues in the two templates. ([2dc2859](https://github.com/IgniteUI/igniteui-cli/commit/2dc2859dd10f41f9b0b8a05072fa6d12de5c9c00)) +* **templates, crm-grid, grid batchediting:** Addressing the comments. ([09955ea](https://github.com/IgniteUI/igniteui-cli/commit/09955ea47cbe58546a6d117611a705c86c058b6e)) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **deployment:** Fix environment check 793 ([3f3946a](https://github.com/IgniteUI/igniteui-cli/commit/3f3946a474840d38a763149230d743b3e845bf47)) +* update map to 10.1.3 ([3926b77](https://github.com/IgniteUI/igniteui-cli/commit/3926b77d575e2051b210232be2b8b1f76b681fab)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* Adding a Map template for Angular ([7cbddeb](https://github.com/IgniteUI/igniteui-cli/commit/7cbddeb907db8277f6db43db47f19f06591a7c7f)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) +* **packages:** remove deprecated option [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([602111e](https://github.com/IgniteUI/igniteui-cli/commit/602111eefdcf390e832275c428e86f9ef5aa547f)) +* **packages:** Update igx-ts projects [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([71df154](https://github.com/IgniteUI/igniteui-cli/commit/71df1546f4765699bf0600ef07062cad85b69d99)) + + + +# 5.2.0 (2020-06-11) + + +#### Features + +* **igx-ts:** add Dock Manager template for Angular ([#763](https://github.com/IgniteUI/igniteui-cli/issues/763)) ([63acfdf](https://github.com/IgniteUI/igniteui-cli/commit/63acfdf6b9c511c0c8be18374f470ee8a0ca375c)) +* **igx,side-nav:** move content padding so views can override ([36f9964](https://github.com/IgniteUI/igniteui-cli/commit/36f9964bbe2d21920f99f5815f346ec117a61724)) + + + +## 5.1.1 (2020-06-03) + + +#### Bug Fixes + +* **igx,upgrade:** ignore projects without sourceRoot ([6d64d30](https://github.com/IgniteUI/igniteui-cli/commit/6d64d30efa3aedcfd7d32eb9e7e1c29c90c7ea6e)) +* **upgrade:** Logging a message that licensed package is already installed ([63df30d](https://github.com/IgniteUI/igniteui-cli/commit/63df30d67c7d46fed0b6e4411e5b097dcd7f11f2)) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **igx,templates:** correct empty project template id ([2d0b385](https://github.com/IgniteUI/igniteui-cli/commit/2d0b385a4ce3f8483e4f5f048bc94111ecb7db31)) +* **templates:** fix upgrade to get correct config ([a3021ef](https://github.com/IgniteUI/igniteui-cli/commit/a3021efc9baac77348a6e91a53f7b8b214fdb719)) +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) +* **upgrade:** sort packages.json dependencies when adding licensed package ([62bb652](https://github.com/IgniteUI/igniteui-cli/commit/62bb652857e8e8cd6e368ef71ac2bf4ef8ea6749)) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **upgrade:** handle multiple licensed packages, [#741](https://github.com/IgniteUI/igniteui-cli/issues/741) ([ef02f5b](https://github.com/IgniteUI/igniteui-cli/commit/ef02f5b089d3616bbb24ba4ba8e2f0a4c7045374)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + +#### Features + +* **igx,multi-pacakge:** templates resolve lib package from project ([7bb4670](https://github.com/IgniteUI/igniteui-cli/commit/7bb4670e1f7832321c3373e07c967d3d13d83777)) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **carousel:** Add noop animations module ([c696124](https://github.com/IgniteUI/igniteui-cli/commit/c6961249ccbfe186e1f369b23420584b908b5787)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Bug Fixes + +* **igx-ts:** change tsconfig module for spec files to avoid errors, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([3d6b987](https://github.com/IgniteUI/igniteui-cli/commit/3d6b987e4e2c72a9b73453af112465b7234aa9c3)) +* **igx-ts:** update auth providers tests, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([4c15c8b](https://github.com/IgniteUI/igniteui-cli/commit/4c15c8bc00ffd5543e676ce07ea4718ea234b62b)) +* **templates, igx:** add chart packages [#679](https://github.com/IgniteUI/igniteui-cli/issues/679) ([75f4dcd](https://github.com/IgniteUI/igniteui-cli/commit/75f4dcd3bf585d38b3f86ef85cfecc6b8ddcfabc)) +* **templates, igx:** add chart packages [#684](https://github.com/IgniteUI/igniteui-cli/issues/684) ([dd7bfb7](https://github.com/IgniteUI/igniteui-cli/commit/dd7bfb75923ebe4d644239774899c26cf6bf7564)) + + +#### Features + +* **igx-ts:** Update projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([e0a738a](https://github.com/IgniteUI/igniteui-cli/commit/e0a738aea9b0345386fb2611bc28168ca99390f0)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* **ig-add:** only take into account 'extraConfig' in generateConfig [#618](https://github.com/IgniteUI/igniteui-cli/issues/618) ([#621](https://github.com/IgniteUI/igniteui-cli/issues/621)) ([d8d7db8](https://github.com/IgniteUI/igniteui-cli/commit/d8d7db823f1c6c717063ce678695be4d8db084d6)) +* **igx-ts:** update scenario templates [#628](https://github.com/IgniteUI/igniteui-cli/issues/628) ([#643](https://github.com/IgniteUI/igniteui-cli/issues/643)) ([ecda4d7](https://github.com/IgniteUI/igniteui-cli/commit/ecda4d779d3a196c16c13f87e2787ff7fdcbc167)) +* **templates:** update angular charts packages to v8.2.12 ([3ed3013](https://github.com/IgniteUI/igniteui-cli/commit/3ed301379a765d4ad0614e1d51cd5dec2227494d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **igx-templates:** fix side-auth template tsconfig.app.json, [#597](https://github.com/IgniteUI/igniteui-cli/issues/597) ([1ffe4ba](https://github.com/IgniteUI/igniteui-cli/commit/1ffe4ba77b30c4eaab2a176ec30470cf32cf7980)) +* **igx-ts:** update autocomplete templates to import FormsModule [#581](https://github.com/IgniteUI/igniteui-cli/issues/581) ([#584](https://github.com/IgniteUI/igniteui-cli/issues/584)) ([b91a1e8](https://github.com/IgniteUI/igniteui-cli/commit/b91a1e8efe1c3e78482abff524b69c48e64f9094)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) + +## igniteui/angular-schematics@21.1.14100-alpha.4 (2026-03-27) + + + +# 14.10.0-alpha.3 (2026-03-25) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **schematics:** fs writeFile create check ([#1526](https://github.com/IgniteUI/igniteui-cli/issues/1526)) ([f8e4b59](https://github.com/IgniteUI/igniteui-cli/commit/f8e4b59bd951ff1b702f3d24cf61ebc33115dc89)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + +#### Bug Fixes + +* include js files in ng-schematics/scripts w/ newer npm version ([727f2f6](https://github.com/IgniteUI/igniteui-cli/commit/727f2f670d303ddb585b78d68a2c42f907a4786f)) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.1 (2022-07-15) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +## 8.0.4 (2021-08-02) + + +#### Bug Fixes + +* **schematics:** resolve schema id deprecation warning ([#870](https://github.com/IgniteUI/igniteui-cli/issues/870)) ([17d7016](https://github.com/IgniteUI/igniteui-cli/commit/17d70164de93a5162ba4a02b44b571de318a37c7)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **schematics:** include upgrade-packages schema ([77aa13d](https://github.com/IgniteUI/igniteui-cli/commit/77aa13db7442b24d787029af4d6a860a0bd85d3b)) +* **schematics:** remove log for unsupported custom templates ([97e3bb3](https://github.com/IgniteUI/igniteui-cli/commit/97e3bb3813cf25603a97177a5ec5d87b2db94206)) +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **schematics:** ensure component prompt installs packages [#695](https://github.com/IgniteUI/igniteui-cli/issues/695) ([16e55d4](https://github.com/IgniteUI/igniteui-cli/commit/16e55d446c3d18fddb7ec7040a266ef498d83060)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) +* prompt for template and theme if no name provided [#622](https://github.com/IgniteUI/igniteui-cli/issues/622) ([#626](https://github.com/IgniteUI/igniteui-cli/issues/626)) ([44621e9](https://github.com/IgniteUI/igniteui-cli/commit/44621e9040f29da4819e6758e8316e6c7048e38d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) +* **new, schematics:** no prompts when "name" is provided [#595](https://github.com/IgniteUI/igniteui-cli/issues/595) ([#609](https://github.com/IgniteUI/igniteui-cli/issues/609)) ([0ed45ba](https://github.com/IgniteUI/igniteui-cli/commit/0ed45ba0ed2147a0255d5df2a44e82b665c90c99)) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) +* **schematics:** skip start task if skipInstall === true ([#603](https://github.com/IgniteUI/igniteui-cli/issues/603)) ([fc38d65](https://github.com/IgniteUI/igniteui-cli/commit/fc38d651ecfa47f95921fa72f7be5ff68d8b586e)) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **schematics:** use project config instead of hard-coded paths ([#592](https://github.com/IgniteUI/igniteui-cli/issues/592)) ([43240b6](https://github.com/IgniteUI/igniteui-cli/commit/43240b610d878186aa4b50959c37822e1f54eaf6)) + + +#### Features + +* **schematics:** add prompt session to component schematic, [#566](https://github.com/IgniteUI/igniteui-cli/issues/566) ([#571](https://github.com/IgniteUI/igniteui-cli/issues/571)) ([e25c1ce](https://github.com/IgniteUI/igniteui-cli/commit/e25c1ceab6fbff58a89e8712d3eda31da7c1af65)) +* **schematics:** adding ng-new schematic missing options [#596](https://github.com/IgniteUI/igniteui-cli/issues/596) ([#598](https://github.com/IgniteUI/igniteui-cli/issues/598)) ([8b51541](https://github.com/IgniteUI/igniteui-cli/commit/8b5154133bfe3fc6ef1c9958879cd835e36b001e)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Bug Fixes + +* rename gitignore manually ([beb06a9](https://github.com/IgniteUI/igniteui-cli/commit/beb06a9de2511654797d75737a2e0bd5da968d8c)) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) +* **schematics:** add start schematic, enable npm and git init tasks ([2a329b1](https://github.com/IgniteUI/igniteui-cli/commit/2a329b18c5e2d6d0f852a72c842c3bab4022a9f2)) + +## igniteui-cli@14.10.0-alpha.4 (2026-03-27) + + + +# 14.10.0-alpha.3 (2026-03-25) + + +#### Features + +* Updated VS Code MCP configuration to align with new naming conventions. ([4fdb8e0](https://github.com/IgniteUI/igniteui-cli/commit/4fdb8e091b87c960c9cbbb35c126b6b7a32475fc)) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **commands,list:** do not use `this` in handler ([#1494](https://github.com/IgniteUI/igniteui-cli/issues/1494)) ([b8f5b53](https://github.com/IgniteUI/igniteui-cli/commit/b8f5b53599cb20374acee53195395213060b51d3)) +* **react:** remove setupTests and update test with it's logic ([#1489](https://github.com/IgniteUI/igniteui-cli/issues/1489)) ([bd1f0ba](https://github.com/IgniteUI/igniteui-cli/commit/bd1f0ba0bccfd6768ccae44ab10568be5ecb1828)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + +#### Bug Fixes + +* add vitest/browser package ([e283ed2](https://github.com/IgniteUI/igniteui-cli/commit/e283ed29b99d794bd67f3bcab7a9dbfd391045ec)) +* add vitest/browser package ([5c29f50](https://github.com/IgniteUI/igniteui-cli/commit/5c29f5054febc0d656732886d08237528d6f6e40)) + + + +## 14.8.2-beta.2 (2026-01-12) + + +#### Bug Fixes + +* add playwright to the yaml files for wc ([6432111](https://github.com/IgniteUI/igniteui-cli/commit/643211110ad858f84b9ed23b3602f80218f23cbd)) +* resolve missed merge conflict ([ba42d4f](https://github.com/IgniteUI/igniteui-cli/commit/ba42d4f378a3e8334f51381ac1ff85799134ce3e)) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + +#### Features + +* update tests to use Playwright ([517ea99](https://github.com/IgniteUI/igniteui-cli/commit/517ea9901372d7a42b516f5e9114a82880038e7e)) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + +#### Features + +* **react:** add playwright and adjust tests; update packages; ([#1430](https://github.com/IgniteUI/igniteui-cli/issues/1430)) ([32b41dc](https://github.com/IgniteUI/igniteui-cli/commit/32b41dcf3f53de76fbafce39a36a1e8d51876b93)) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Add missing igniteui-react-core dependency to React grid templates ([fb429bb](https://github.com/IgniteUI/igniteui-cli/commit/fb429bbd3634e0cf86a617672f857be4bb8b2f0d)) +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* set default route ([#1422](https://github.com/IgniteUI/igniteui-cli/issues/1422)) ([768d0d0](https://github.com/IgniteUI/igniteui-cli/commit/768d0d0a2873d2efc81c426ce35b5e42e92508a9)) +* update react templates ([93d132f](https://github.com/IgniteUI/igniteui-cli/commit/93d132fa229f0dba963cd5f21b89d5274e346910)) +* use only grid with defined columns ([faeb25a](https://github.com/IgniteUI/igniteui-cli/commit/faeb25a64effeba39e24dafe6e93e5a26a07c5bc)) + + +#### Features + +* Update Ignite UI product versions in template files ([964dda1](https://github.com/IgniteUI/igniteui-cli/commit/964dda13da00ca0c9d4bf1a42d6d98d2aa1d7b88)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **react:** add missing argument and fix incorrect types ([#1403](https://github.com/IgniteUI/igniteui-cli/issues/1403)) ([fb006b3](https://github.com/IgniteUI/igniteui-cli/commit/fb006b38e6b4f3a2e61326b018787f67bd32b640)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + +#### Bug Fixes + +* **wc:** add seperate update for single or double quotes ([79ed105](https://github.com/IgniteUI/igniteui-cli/commit/79ed105cd67baf99f15e327d5f9840c3103d8018)) +* **wc:** fix iteration ([83583db](https://github.com/IgniteUI/igniteui-cli/commit/83583dbae937824e1b1f4d3f8d1ce8cc8e5589ec)) +* **wc:** fix paths in web components workflow ([6ff5999](https://github.com/IgniteUI/igniteui-cli/commit/6ff5999b782af24f09c29d4c60befb32a84fc5e0)) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + +#### Features + +* increase maximum file size to cache in webComponents's vite configuration to 10 MB ([#1370](https://github.com/IgniteUI/igniteui-cli/issues/1370)) ([0a1385e](https://github.com/IgniteUI/igniteui-cli/commit/0a1385e5d1f98c8fcdf020d144f048b112b251d5)) + + + +## 14.3.9 (2025-01-23) + + +#### Features + +* enable silent mode in Vite configuration for improved build output ([#1369](https://github.com/IgniteUI/igniteui-cli/issues/1369)) ([7728300](https://github.com/IgniteUI/igniteui-cli/commit/7728300cbba7c5b15261ff2a82820432bd4b12b7)) + + + +## 14.3.8 (2025-01-23) + + +#### Features + +* replace rollup with vite configuration for wc ([#1364](https://github.com/IgniteUI/igniteui-cli/issues/1364)) ([024ee5f](https://github.com/IgniteUI/igniteui-cli/commit/024ee5f048427c5406013f1e4d051403ae255fca)) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + +#### Bug Fixes + +* **web-components:** add step in github pages workflow to fix navigation ([#1355](https://github.com/IgniteUI/igniteui-cli/issues/1355)) ([0ca7277](https://github.com/IgniteUI/igniteui-cli/commit/0ca7277be8eaf1218af8a47f1ed7f51273499737)) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + +#### Bug Fixes + +* **cli:** replace coveralls with coveralls-next ([#1336](https://github.com/IgniteUI/igniteui-cli/issues/1336)) ([4028e28](https://github.com/IgniteUI/igniteui-cli/commit/4028e28bc62da3f2232f79b60e26b9d13c93c8f9)) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + +#### Bug Fixes + +* **cli:** add fixes in react and wc templates ([#1326](https://github.com/IgniteUI/igniteui-cli/issues/1326)) ([0430547](https://github.com/IgniteUI/igniteui-cli/commit/0430547a733c98b76aa94499516934547049b117)) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + +#### Bug Fixes + +* **eslint:** turn off no-explicit-any rule for wc ([#1288](https://github.com/IgniteUI/igniteui-cli/issues/1288)) ([1ee5b0f](https://github.com/IgniteUI/igniteui-cli/commit/1ee5b0f4ecc97a93f60b95e1615bb2a75fce9238)) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Bug Fixes + +* **igr-ts:** add new lines in base app routes file ([#1284](https://github.com/IgniteUI/igniteui-cli/issues/1284)) ([92a14ef](https://github.com/IgniteUI/igniteui-cli/commit/92a14ef05f174bb5e5bc09978c986eb8f27e57e1)) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + +#### Bug Fixes + +* **react:** fix null type build error in main.tsx ([#1242](https://github.com/IgniteUI/igniteui-cli/issues/1242)) ([2d0b579](https://github.com/IgniteUI/igniteui-cli/commit/2d0b57999b6a22445c2e7ff494310f9e94c421ea)) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* **igr-ts:** lint ignore unused vars prefix; ts strict ([#1232](https://github.com/IgniteUI/igniteui-cli/issues/1232)) ([91e35b3](https://github.com/IgniteUI/igniteui-cli/commit/91e35b3eb060f079ff6e30bdead75af7d6b98add)) + + + +## 13.1.13-beta.4 (2024-04-04) + + + +## 13.1.13-beta.3 (2024-04-04) + + +#### Features + +* **react:** remove igniteui deps from package.json and bump versions ([841a19d](https://github.com/IgniteUI/igniteui-cli/commit/841a19d2779f4f156c48368b4fa7a20b1a181eb4)) +* **react:** turn off no-explicit-any in eslint ([ef50011](https://github.com/IgniteUI/igniteui-cli/commit/ef500113afe214e8e64dea926d6937c5e5f827df)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +# 13.2.0-beta.0 (2024-03-15) + + +#### Bug Fixes + +* add elements internal polyfill to base template ([c7d2396](https://github.com/IgniteUI/igniteui-cli/commit/c7d2396572a9cd77205b8727ed81089f460403e2)) +* **Imports:** Fixed class import path in .test.ts ([#1224](https://github.com/IgniteUI/igniteui-cli/issues/1224)) ([6b3a2ef](https://github.com/IgniteUI/igniteui-cli/commit/6b3a2effef4951f0fc59e5393186eb2e69f2972b)) +* **Lint:** Fixed styles typing in style-utils ([#1222](https://github.com/IgniteUI/igniteui-cli/issues/1222)) ([6ad842a](https://github.com/IgniteUI/igniteui-cli/commit/6ad842a2bc16d50c8b29ddbca5907b80e40fd798)) + + + +## 13.1.11 (2024-03-12) + + +#### Bug Fixes + +* **react:** add editorconfig and vite-env.d.ts ([555300c](https://github.com/IgniteUI/igniteui-cli/commit/555300c38df56246cb7cc08f6b25e8ae5fd316f0)) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + +#### Bug Fixes + +* **WebComponents:** Removing an unnecessary ` from package.json ([3420292](https://github.com/IgniteUI/igniteui-cli/commit/3420292eb5752eaf76cfee1e12927d8d2749b8be)) + + + +## 13.1.6 (2024-02-26) + + +#### Bug Fixes + +* **React:** Add styles to support dark themes [#29410](https://github.com/IgniteUI/igniteui-cli/issues/29410) ([#1205](https://github.com/IgniteUI/igniteui-cli/issues/1205)) ([a191348](https://github.com/IgniteUI/igniteui-cli/commit/a191348d07317cdaac43db7bd52ee3958784ae55)) + + + +## 13.1.5 (2024-01-31) + + +#### Features + +* add style-utils file to base project ([#1195](https://github.com/IgniteUI/igniteui-cli/issues/1195)) ([112f27d](https://github.com/IgniteUI/igniteui-cli/commit/112f27ddc49d9106a182c8c7768543aa1b913164)) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igr-ts:** add github workflows folder ([#1192](https://github.com/IgniteUI/igniteui-cli/issues/1192)) ([2369c55](https://github.com/IgniteUI/igniteui-cli/commit/2369c556b8f84ce6a575c73b617c7581cedf5c0f)) +* open browser on app start ([#1187](https://github.com/IgniteUI/igniteui-cli/issues/1187)) ([c4e1f5c](https://github.com/IgniteUI/igniteui-cli/commit/c4e1f5c8d65dd8729083377973a40450b4899d63)) + + +#### Features + +* **igc-ts:** bump the version to 4.7.0 and add new components ([#1189](https://github.com/IgniteUI/igniteui-cli/issues/1189)) ([e9dbfd7](https://github.com/IgniteUI/igniteui-cli/commit/e9dbfd7d6212f1b8535de6a142f6140e3848f6ef)) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + +#### Bug Fixes + +* memory allocation issue during build of webComponent app that uses igc-category-chart ([ee188bf](https://github.com/IgniteUI/igniteui-cli/commit/ee188bf4672b8ee96ac1b891cf8e334f44bb4929)) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Bug Fixes + +* **grid:** Adding missing packages to the grid template [#1109](https://github.com/IgniteUI/igniteui-cli/issues/1109) ([9c65afe](https://github.com/IgniteUI/igniteui-cli/commit/9c65afe228f182918c6e3f50e7cfec0466d7f7d2)) +* **web-components:** Adding packages in each template. ([674f55c](https://github.com/IgniteUI/igniteui-cli/commit/674f55c66bfa3308696cee3da1dd1d0e3ae64c0c)) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + +#### Bug Fixes + +* **wc:** changing the function call [#1110](https://github.com/IgniteUI/igniteui-cli/issues/1110) ([#1113](https://github.com/IgniteUI/igniteui-cli/issues/1113)) ([5e4d1db](https://github.com/IgniteUI/igniteui-cli/commit/5e4d1dbdeeaa498278a7669b08031c51bfa2f367)) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + +#### Features + +* add lint file for web components ([#1085](https://github.com/IgniteUI/igniteui-cli/issues/1085)) ([25498c0](https://github.com/IgniteUI/igniteui-cli/commit/25498c09b2bc4e5bc30c67c36008d97b342e3526)) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + +#### Features + +* **wc:** add npmrc to proj template ([#1079](https://github.com/IgniteUI/igniteui-cli/issues/1079)) ([af233e5](https://github.com/IgniteUI/igniteui-cli/commit/af233e53d72b615ce11e16a65ddf358645329ffb)) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta9 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.6 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + +#### Features + +* provide default options when adding a template ([#1070](https://github.com/IgniteUI/igniteui-cli/issues/1070)) ([73e5c2c](https://github.com/IgniteUI/igniteui-cli/commit/73e5c2c0cc62b81384d6b4928103adf5ccf16153)) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + +#### Bug Fixes + +* **webcomponents:** set background and color to body ([b41a8b6](https://github.com/IgniteUI/igniteui-cli/commit/b41a8b66834ed46206cb14aa8bff0d6e3b99ef18)) +* **webcomponents:** set correct fallback for background color ([#1065](https://github.com/IgniteUI/igniteui-cli/issues/1065)) ([a976831](https://github.com/IgniteUI/igniteui-cli/commit/a976831228c204b015bd49773af4b5fc9767873a)) +* **webcomponents:** update app-root markup ([c717c37](https://github.com/IgniteUI/igniteui-cli/commit/c717c370cae66218eb4a7d5daaf0137da8c12d23)) + + +#### Features + +* **wc:** add base template for Web Components [#988](https://github.com/IgniteUI/igniteui-cli/issues/988) ([#1058](https://github.com/IgniteUI/igniteui-cli/issues/1058)) ([7574ab2](https://github.com/IgniteUI/igniteui-cli/commit/7574ab2b0221687a6ace6f627ec55caa3945236f)) + + + +## 10.0.5 (2022-09-19) + + +#### Features + +* **wc:** add accordion, tab & date-time-editor templates ([#1055](https://github.com/IgniteUI/igniteui-cli/issues/1055)) ([f2a631f](https://github.com/IgniteUI/igniteui-cli/commit/f2a631fcd18f529172af8e038929bf7f542e71ff)) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **wc:** address comments ([e1f804d](https://github.com/IgniteUI/igniteui-cli/commit/e1f804deada9f5fdf628ba25e122278cb9118507)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) +* **wc:** add new 2.1.0 components ([526da0c](https://github.com/IgniteUI/igniteui-cli/commit/526da0ce167659c9cfd3b21caf21efdcbc47e18d)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + +#### Features + +* **wc:** adding empty view and refactor proj structure [#967](https://github.com/IgniteUI/igniteui-cli/issues/967) ([#979](https://github.com/IgniteUI/igniteui-cli/issues/979)) ([622a014](https://github.com/IgniteUI/igniteui-cli/commit/622a0143be1583cfb97d7b80cabbfe21e03c20eb)) +* **web-components:** use LitElement in the templates [#989](https://github.com/IgniteUI/igniteui-cli/issues/989) ([#1001](https://github.com/IgniteUI/igniteui-cli/issues/1001)) ([5d828bc](https://github.com/IgniteUI/igniteui-cli/commit/5d828bc6062e6971d82f588ebf59a6e489d87257)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.7 (2021-11-09) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **igr-es6:** Underscore dot ([a0ce582](https://github.com/IgniteUI/igniteui-cli/commit/a0ce582e112a31c2c59d5532791ef07ab988335b)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **custom-templates:** Refactor samples, ([1f50907](https://github.com/IgniteUI/igniteui-cli/commit/1f509070a9409c4100d3d9c6a5de2f443d04c556)) +* **ig-ts:** Free version path contains no /en ([e96c7f6](https://github.com/IgniteUI/igniteui-cli/commit/e96c7f673729a034eeb3d89f5adfe3061d6e9f0b)) +* **ig-ts:** Make use of all visible height ([ebfe5ed](https://github.com/IgniteUI/igniteui-cli/commit/ebfe5edada1fcd9d4f8e25f868f916ad2d862121)) +* **ig-ts:** Temp fix - add static FormsModule ([9341753](https://github.com/IgniteUI/igniteui-cli/commit/9341753ab6fed9597c6f30f9fb1383ad132282ab)) +* **ig-ts:** Update prod budgets ([4edd971](https://github.com/IgniteUI/igniteui-cli/commit/4edd97100f0ab2cdd7a00176992ca1da57de47ff)) +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) +* **lint:** Fix dum line lenght ([570accb](https://github.com/IgniteUI/igniteui-cli/commit/570accbaef8f74d01cecbeda0046edb1a8423ef1)) +* **lint:** Fix lint errors ([84394b9](https://github.com/IgniteUI/igniteui-cli/commit/84394b9c4c24ed9727c8719bd9e463cea09d482b)) +* **lint:** Fix lint errors. ([0477e7d](https://github.com/IgniteUI/igniteui-cli/commit/0477e7dd3d9b4731e1b3176316581d3e0339ca5e)) +* **templates:** Add file-saver package ([8c7a59d](https://github.com/IgniteUI/igniteui-cli/commit/8c7a59db381a32719cdadbf1534a387c90bb05d5)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **react-grid:** Add missing module [#791](https://github.com/IgniteUI/igniteui-cli/issues/791) ([#798](https://github.com/IgniteUI/igniteui-cli/issues/798)) ([68e2b81](https://github.com/IgniteUI/igniteui-cli/commit/68e2b81e297a5b4279f53e5bb9dff80126cc08b6)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Features + +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([73a5670](https://github.com/IgniteUI/igniteui-cli/commit/73a56703ff4f4f0cc23d1da3c65cb4fbe114c9b4)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **ig-ts:** correct grid features template variable [#702](https://github.com/IgniteUI/igniteui-cli/issues/702) ([3f09bd9](https://github.com/IgniteUI/igniteui-cli/commit/3f09bd9af64177162e4e450df2148e1b13b2f87f)) +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Features + +* **ix-ts:** Update ig-ts projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([a6204d8](https://github.com/IgniteUI/igniteui-cli/commit/a6204d80f50e885459306276f3584fac0488460b)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) + + + +# 5.0.0-beta.2 (2019-12-06) + + + +# 5.0.0-beta.1 (2019-11-28) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +# 14.10.0-alpha.3 + +## igniteui/cli-core@14.10.0-alpha.3 (2026-03-25) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **lint:** re-enable no-console rule ([3ffa07f](https://github.com/IgniteUI/igniteui-cli/commit/3ffa07ff8812e93dd358b38332f3abc2ea955af2)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **packages:** disable non-functional registry login attempt on upgrade ([#1528](https://github.com/IgniteUI/igniteui-cli/issues/1528)) ([1008a1e](https://github.com/IgniteUI/igniteui-cli/commit/1008a1e3fadb20553f464162d69a5bb2393d615b)) +* **packages:** login command for node@24+ spawn change ([cbb6502](https://github.com/IgniteUI/igniteui-cli/commit/cbb6502e90cfeaa7a87885748aa4b337c37c0b2f)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + +#### Bug Fixes + +* **react:** enhance upgrade-packages to support workspace glob patterns for projects without explicit workspaces ([#1424](https://github.com/IgniteUI/igniteui-cli/issues/1424)) ([6eeee2f](https://github.com/IgniteUI/igniteui-cli/commit/6eeee2ff879902197f012e83eb6064a72a4c438e)) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* **wc:** enhance upgrade-packages to support workspace glob patterns and vite.config.ts files ([#1408](https://github.com/IgniteUI/igniteui-cli/issues/1408)) ([bcd62be](https://github.com/IgniteUI/igniteui-cli/commit/bcd62be52107bcbdab6d207866fe7ffb99883b6d)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + +#### Features + +* **React:** Update react html files with licensed packages when upgrading packages ([#1395](https://github.com/IgniteUI/igniteui-cli/issues/1395)) ([7a7c4f0](https://github.com/IgniteUI/igniteui-cli/commit/7a7c4f0b5b74acc67e7524e643ee2a102ededb46)) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + +#### Bug Fixes + +* **WC:** update themes import paths to licensed version ([#1387](https://github.com/IgniteUI/igniteui-cli/issues/1387)) ([260068b](https://github.com/IgniteUI/igniteui-cli/commit/260068b9c9e3f4e895717ca6003f6ba0aded5cf2)) + + + +## 14.3.16 (2025-03-31) + + +#### Bug Fixes + +* **workflows:** Do not throw error if github workflows directory does not exist when updating ([#1383](https://github.com/IgniteUI/igniteui-cli/issues/1383)) ([acc771a](https://github.com/IgniteUI/igniteui-cli/commit/acc771afac962166f630c36beff428aa83af97de)) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + +#### Features + +* **core:** add FormattingService ([f7ea2a4](https://github.com/IgniteUI/igniteui-cli/commit/f7ea2a4d8f57b5f1edb531df76d05c541df754e1)) +* **core:** add new types ([aa636a3](https://github.com/IgniteUI/igniteui-cli/commit/aa636a3b1642da1a57758d49e0f7f6f79c7e2d01)) +* **core:** add TypeScriptASTTransformer ([9854847](https://github.com/IgniteUI/igniteui-cli/commit/9854847e32c718d82013e1fc8b58d9b06700b819)) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **kebacase:** do not add dash before numbers ([25d8f54](https://github.com/IgniteUI/igniteui-cli/commit/25d8f544243f6e1f5583c772f4b8e0e3cbb7ca12)) +* **kebap-case:** add dash between number and uppercase letter ([0be7637](https://github.com/IgniteUI/igniteui-cli/commit/0be7637bc19423821e066a9e62dbdec3e5bd5cb4)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + +#### Bug Fixes + +* update Utils.LowerDashed function ([#1171](https://github.com/IgniteUI/igniteui-cli/issues/1171)) ([2254ecc](https://github.com/IgniteUI/igniteui-cli/commit/2254ecc0267be8c19e7f1d5295886b2ba6c345c7)) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + +#### Bug Fixes + +* **package-manager:** skip setting up child install tasks for new projects ([de2a134](https://github.com/IgniteUI/igniteui-cli/commit/de2a1341e13ba20635a5ed94c5cc7e4c79c7ca46)) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **import:** Update func signature ([a3ac17a](https://github.com/IgniteUI/igniteui-cli/commit/a3ac17ab30436ed0420c92902c53ff7c3dfd0534)) +* **lint:** Fix lint errors ([6b5dd98](https://github.com/IgniteUI/igniteui-cli/commit/6b5dd985e90fb9cf8675c6cf0c06c6193e27fb32)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **ts-transform:** respect quote type from editorconfig ([99b3aad](https://github.com/IgniteUI/igniteui-cli/commit/99b3aadce0e6e7de8e2fef502db2ff1811d7a11e)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + +#### Features + +* **tsutil:** add optional parent route to TsFileUpdateUtil.addRoute method ([#777](https://github.com/IgniteUI/igniteui-cli/issues/777)) ([2df694a](https://github.com/IgniteUI/igniteui-cli/commit/2df694ac03a4601059f730b6cc9ae7d3ab6371ea)) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* remove angular as default choice for step by step [#579](https://github.com/IgniteUI/igniteui-cli/issues/579) ([5d2697e](https://github.com/IgniteUI/igniteui-cli/commit/5d2697e019d344cc5ebedf9ac00de94b012ded73)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + +#### Bug Fixes + +* **package-manager:** manually update pckgJSON instead of letting npm do it, [#751](https://github.com/IgniteUI/igniteui-cli/issues/751) ([6fa4c0c](https://github.com/IgniteUI/igniteui-cli/commit/6fa4c0c8d5afecfef8a8c1de18b1f6620edc006c)) + + + +# 5.1.0-beta.3 (2020-05-29) + + +#### Bug Fixes + +* **upgrade:** clear stdin stream before login prompt ([c77f49a](https://github.com/IgniteUI/igniteui-cli/commit/c77f49ab940933e9df6da2518d5192d5d49fbd0c)) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + +## igniteui/angular-templates@21.1.14100-alpha.3 (2026-03-25) + + +#### Features + +* Updated VS Code MCP configuration to align with new naming conventions. ([4fdb8e0](https://github.com/IgniteUI/igniteui-cli/commit/4fdb8e091b87c960c9cbbb35c126b6b7a32475fc)) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* **igx-ts:** update angular project to use vitest with playwright ([#1542](https://github.com/IgniteUI/igniteui-cli/issues/1542)) ([85dd3e6](https://github.com/IgniteUI/igniteui-cli/commit/85dd3e609295d7d801c127715c5fe8947f90f23d)) +* **igx-ts:** update project setup and templates naming ([#1514](https://github.com/IgniteUI/igniteui-cli/issues/1514)) ([ed4d1dd](https://github.com/IgniteUI/igniteui-cli/commit/ed4d1ddced09cee062caae7f8445df5ba11d8cac)) +* **mcp:** add angular-cli server configuration to mcp.json ([43a01a0](https://github.com/IgniteUI/igniteui-cli/commit/43a01a08ca6ac9b9a7958a172e5f27b02fe1fbb1)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts-legacy:** fi grid type import and add missing override ([ff24df0](https://github.com/IgniteUI/igniteui-cli/commit/ff24df0e665d8c834f510bfc62fc99af6532a38e)) +* **igx-ts:** fix eslint configurations ([#1509](https://github.com/IgniteUI/igniteui-cli/issues/1509)) ([ec63959](https://github.com/IgniteUI/igniteui-cli/commit/ec63959ee65e5c369d483d5dc34965f121a36cae)) +* **igx-ts:** fix side nav route data text ([487ba12](https://github.com/IgniteUI/igniteui-cli/commit/487ba122c2d51822642d15f501ea776193bf6a44)) +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **angular:** add igniteui angular core override ([0a5d46f](https://github.com/IgniteUI/igniteui-cli/commit/0a5d46f73bd3d621a833d07ad09318ccbdcfb9b9)) +* **angular:** add missing providers ([804703e](https://github.com/IgniteUI/igniteui-cli/commit/804703e984919aa2fac6272f8058f94256460b73)) +* **angular:** empty template config ([75eef02](https://github.com/IgniteUI/igniteui-cli/commit/75eef022a33f0dc6bc5b90816ccee9c415d76289)) +* update imports ([a2bf7bf](https://github.com/IgniteUI/igniteui-cli/commit/a2bf7bf6fc973ba0af8d12dc1c33605419475891)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + +#### Bug Fixes + +* **angular:** fix the type of the providers ([142dbda](https://github.com/IgniteUI/igniteui-cli/commit/142dbda9665430bb3fb5a97744e8913195975708)) + + + +## 14.8.5-beta.0 (2026-02-10) + + +#### Bug Fixes + +* **angular:** add provide zone change detection in app config for angular standalone ([27b516b](https://github.com/IgniteUI/igniteui-cli/commit/27b516b640b1ecf9fdb7320e6a5c84a398aab505)) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* add same fix to legacy angular projects ([2456829](https://github.com/IgniteUI/igniteui-cli/commit/245682908c81c931b65707b5098a98e3991f6f71)) +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) +* move tearDown to chart related test files ([40b1739](https://github.com/IgniteUI/igniteui-cli/commit/40b1739734199b035c32b02937456c9ae444654a)) +* remove calls to test.ts ([c08ca9f](https://github.com/IgniteUI/igniteui-cli/commit/c08ca9fcd472488a125c2f073bd06e051a5f3314)) +* remove test.ts as not needed ([451d49a](https://github.com/IgniteUI/igniteui-cli/commit/451d49ab3c6b7652b29b062e1e3a9301f2497a0f)) + + + +## 14.8.3 (2026-01-19) + + +#### Bug Fixes + +* **angular:** remove glob and rimraf from standalone package json ([#1478](https://github.com/IgniteUI/igniteui-cli/issues/1478)) ([0a3afce](https://github.com/IgniteUI/igniteui-cli/commit/0a3afce21e6e14196c8942f9f15a56793e1679fa)) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + +#### Bug Fixes + +* **ng:** move eqeqeq rule ([#1433](https://github.com/IgniteUI/igniteui-cli/issues/1433)) ([29a574d](https://github.com/IgniteUI/igniteui-cli/commit/29a574db2af16adff262440d789c58216ba08a8e)) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + +#### Bug Fixes + +* **angular:** fix eslint config for angular modules ([#1423](https://github.com/IgniteUI/igniteui-cli/issues/1423)) ([2420d26](https://github.com/IgniteUI/igniteui-cli/commit/2420d26511cffef06cad58fa7e67a61a6b885187)) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* **ng, standalone:** add test setup file for angular standalone ([#1421](https://github.com/IgniteUI/igniteui-cli/issues/1421)) ([feebb55](https://github.com/IgniteUI/igniteui-cli/commit/feebb5574cfffe86f6f2b342c2643b3ef9651a3c)) + + + +## 14.5.4 (2025-07-01) + + +#### Bug Fixes + +* **ng:** Add same proj rxjs version in overrides, so there are no peer dep errors for it. It is needed when having reveal or other overrides. ([4728d19](https://github.com/IgniteUI/igniteui-cli/commit/4728d19e7658cf5c4d863a6c277be696f77e5ac5)) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **angular:** fix theme errors ([#1404](https://github.com/IgniteUI/igniteui-cli/issues/1404)) ([3e7e4a3](https://github.com/IgniteUI/igniteui-cli/commit/3e7e4a3777bde5cc025df182bb57e5b9f002c5d9)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* **angular:** add ovverides for reveal sdk wrappers ([d2bc8cb](https://github.com/IgniteUI/igniteui-cli/commit/d2bc8cb26584f5836d633d24421d6dc774bd53a5)) +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Bug Fixes + +* adapt ngModules templates to 19 changes ([2ce6e9d](https://github.com/IgniteUI/igniteui-cli/commit/2ce6e9d38acef0f0e8981ef054f61ab35d137fd8)) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + + +## 13.4.1 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +# 13.4.0 (2024-07-22) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + +#### Features + +* **ng-sa-base:** add vscode template folder ([a4787e7](https://github.com/IgniteUI/igniteui-cli/commit/a4787e74fcc715aceaa4c265fd97e4452e70463e)) +* **ngm-base:** add vscode template folder ([0ed6fb8](https://github.com/IgniteUI/igniteui-cli/commit/0ed6fb8cf8ef75103c84e8ee2ddeaa2886be3922)) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* fix yml script placeholder delimiters ([#1239](https://github.com/IgniteUI/igniteui-cli/issues/1239)) ([45a2264](https://github.com/IgniteUI/igniteui-cli/commit/45a2264a93edc5b0ca307d5ec43fcd6a9de42cea)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **_base-legacy:** update project type to legacy ([f8984c9](https://github.com/IgniteUI/igniteui-cli/commit/f8984c93f02e8391ca721bc49eeabd45e5f7bb34)) +* **_base:** provide http client ([1e1d1c2](https://github.com/IgniteUI/igniteui-cli/commit/1e1d1c2d6c70a110ace81e74c91bcab2a7021086)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igx-ts:** update karma-jasmine-html-reporter ([0cf034d](https://github.com/IgniteUI/igniteui-cli/commit/0cf034db6474b8ed88e9b3d93e9b3011afd47b3b)) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **igx:** remove prod config for ng build ([d90c056](https://github.com/IgniteUI/igniteui-cli/commit/d90c056aed7ac87f972ea719eeac9367e6b97226)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** more fixes ([1373d18](https://github.com/IgniteUI/igniteui-cli/commit/1373d18e45d8fa9bb69bf5692b360bb4ecec531b)) +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +## 11.1.2 (2023-05-25) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + +#### Bug Fixes + +* **igx-ts:** updating dependencies [#1099](https://github.com/IgniteUI/igniteui-cli/issues/1099) ([#1102](https://github.com/IgniteUI/igniteui-cli/issues/1102)) ([cd3b35a](https://github.com/IgniteUI/igniteui-cli/commit/cd3b35ac7961474ecd4ecbb8c4dffa33067c20f1)) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + +#### Bug Fixes + +* **fintech grid:** fix slow grid [#1020](https://github.com/IgniteUI/igniteui-cli/issues/1020) ([4f888dc](https://github.com/IgniteUI/igniteui-cli/commit/4f888dc3c2b1fd6ad896b197634d3aa0c3ef57cd)) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **ng:** gridAPI rename ([5b8b0a5](https://github.com/IgniteUI/igniteui-cli/commit/5b8b0a5e5e21ce5ae2228e0d025eea0195206292)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + +#### Bug Fixes + +* **templates:** Adding override modifier. ([6334d17](https://github.com/IgniteUI/igniteui-cli/commit/6334d174642212d942c5f5669c1082ae56bb3cc8)) + + + +# 9.1.0-rc.0 (2022-02-24) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) +* **angular:** remove old code ([3b063db](https://github.com/IgniteUI/igniteui-cli/commit/3b063db9cf51509b289148f4928cdfda9837a6dd)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **schematics:** fix home import without placeholder ([#966](https://github.com/IgniteUI/igniteui-cli/issues/966)) ([9263bb2](https://github.com/IgniteUI/igniteui-cli/commit/9263bb22b6dd699845d3e6fad7ab78536f7a484c)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + +#### Bug Fixes + +* changes from latest rc, packages updates ([f59905f](https://github.com/IgniteUI/igniteui-cli/commit/f59905fbd0d37d536b2a13dd002cc99ce8c48165)) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) +* **angular:** new theme imports upgrade packages ([3ae74d9](https://github.com/IgniteUI/igniteui-cli/commit/3ae74d9bb9a338f939e9e5fb73c978003401c2a7)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + +#### Bug Fixes + +* remove icon color, becasue it is deprecated ([7b33804](https://github.com/IgniteUI/igniteui-cli/commit/7b338049a3182d7a8ea9e7106d10ef485dcc0623)) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +# 8.1.0-rc.0 (2021-07-30) + + +#### Bug Fixes + +* **igx-ts:** remove deprecated properties from scenario templates ([f84dc3c](https://github.com/IgniteUI/igniteui-cli/commit/f84dc3cd9626d5f287caed74cd32fda6849906e2)) + + + +# 8.1.0-beta.1 (2021-07-30) + + +#### Bug Fixes + +* **awesome-grid:** fix deprecated properties warnings ([f7a5b0c](https://github.com/IgniteUI/igniteui-cli/commit/f7a5b0c589c4b0aa8ded7c036859956d84c1ed23)) +* **fintech-grid:** fix console warnings and errors ([eaaf733](https://github.com/IgniteUI/igniteui-cli/commit/eaaf73311b45b9fc326353c8c6e6a1efe3f6f225)) +* **igx-ts:** Update angular.json ([c038c70](https://github.com/IgniteUI/igniteui-cli/commit/c038c708c5d2476e819071fd6c9defe29915b904)) +* **igx-ts:** use explicit index in drop-down components for logic view ([cb96f7d](https://github.com/IgniteUI/igniteui-cli/commit/cb96f7dcc2a5a4af2c585b22b50daa372f3684e9)) + + +#### Features + +* **igx-ts:** update custom grid templates w/ 12.1 paginator ([2b5058b](https://github.com/IgniteUI/igniteui-cli/commit/2b5058bd8c2f1946fd1f52b848a5b6ca9aebfcee)) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* **igx-templates:** add igx-accordion template ([#851](https://github.com/IgniteUI/igniteui-cli/issues/851)) ([03e74cd](https://github.com/IgniteUI/igniteui-cli/commit/03e74cd194184b629ea09ec3cfa5218943d0feef)) +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + +#### Bug Fixes + +* **igx-ts:** fix strict errors in base and side-nav projects ([963d23d](https://github.com/IgniteUI/igniteui-cli/commit/963d23dc9771d8d184bff89fe2e2782e3bd97219)) +* **igx-ts:** fix strict errors in side-nav-auth project ([695f430](https://github.com/IgniteUI/igniteui-cli/commit/695f430c693b4a4cb817784d4b20dc0c268ec80c)) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + +#### Bug Fixes + +* **angular-templates:** fix issue with strict templates in igx-ts ([38aaa75](https://github.com/IgniteUI/igniteui-cli/commit/38aaa756908493244414a51cc31688c27246b2f6)), closes [#850](https://github.com/IgniteUI/igniteui-cli/issues/850) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + +#### Bug Fixes + +* **fonts:** Fix icon font names and families ([35a702e](https://github.com/IgniteUI/igniteui-cli/commit/35a702ee21d4a780b9318de071246969af54fca7)) +* **template:** Fix and upadte awesome template ([f2b51aa](https://github.com/IgniteUI/igniteui-cli/commit/f2b51aa2685220b282ca8a25bb2580f44b960bcb)) +* **warnings:** Update icons for grids samples ([0efbbae](https://github.com/IgniteUI/igniteui-cli/commit/0efbbaecdcb3b6095c6ebc483729214f5e4753aa)) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + +#### Bug Fixes + +* **igx-templates:** provide service in tree sample, add some style ([b76452a](https://github.com/IgniteUI/igniteui-cli/commit/b76452a22d047a07d95c19fd3c720466065f178e)) +* remove strict checks and update open() method ([f2877e3](https://github.com/IgniteUI/igniteui-cli/commit/f2877e342746f85962d3f10125c6b784e53eb5d2)) + + +#### Features + +* **igx-templates:** add igx-tree template ([41bc6c3](https://github.com/IgniteUI/igniteui-cli/commit/41bc6c37b19c9136335347a468cdd5c8685a1f61)) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + +#### Bug Fixes + +* **toolbar:** Update hgrid & treegrid custom template toolbar ([c27af22](https://github.com/IgniteUI/igniteui-cli/commit/c27af22c413da93305a5c90c8a60a6dbac1a01e1)) + + + +## 7.0.1 (2020-11-16) + + +#### Bug Fixes + +* **igx-ts:** add local storage to spec ([3056a97](https://github.com/IgniteUI/igniteui-cli/commit/3056a97d99c492c04f2bbf19a7bd09c418294dbf)) +* **igx,custom-grid:** assign allowFiltering when selected as option ([7534c5f](https://github.com/IgniteUI/igniteui-cli/commit/7534c5f51736587b87217042b98c1be753cd76a8)) +* ssr breaks because of localStorage ref ([dc9410f](https://github.com/IgniteUI/igniteui-cli/commit/dc9410ff7c333bdece6ba25212f6c763afe64601)) + + + +# 7.0.0 (2020-11-13) + + +#### Bug Fixes + +* **igx-ts:** update build-angular ([082869c](https://github.com/IgniteUI/igniteui-cli/commit/082869cf27b52cb26695b6f90f4980ea85e67574)) + + + +# 7.0.0-rc.2 (2020-11-12) + + +#### Bug Fixes + +* **igx-ts:** crm grid with new toolbar ([a387742](https://github.com/IgniteUI/igniteui-cli/commit/a387742493b73f2c2f5e2cbacaf1bbe5a4d9345f)) +* **igx-ts:** fix toolbar according to latest changes ([93323c8](https://github.com/IgniteUI/igniteui-cli/commit/93323c81a3e388ae46e1dabcca13261312f92ade)) +* **igx-ts:** fix toolbar for grid fintech ([edc2057](https://github.com/IgniteUI/igniteui-cli/commit/edc20571657d5177c7a82ccae32d86f430970185)) +* **igx-ts:** tree-grid toolbar update ([2c985d7](https://github.com/IgniteUI/igniteui-cli/commit/2c985d78902d90439cbef733e6252f8c1eae37e3)) +* **igx-ts:** update HGrid Batch demo ([890a02d](https://github.com/IgniteUI/igniteui-cli/commit/890a02d54be89358aff76f9b07b3d8630df4f79c)) + + + +## 6.2.1 (2020-11-11) + + +#### Bug Fixes + +* **igx, side-auth:** add SSR-friendly local storage service ([8db27be](https://github.com/IgniteUI/igniteui-cli/commit/8db27be4739d396bbd34c389d9227aabdd01b970)) +* **igx,side-auth:** add proper wrapper class so layout is 100% ([508df9d](https://github.com/IgniteUI/igniteui-cli/commit/508df9d2255ec1a908ecd4054a841360c1827933)) + + + +# 7.0.0-rc.1 (2020-11-10) + + +#### Bug Fixes + +* **igx-ts:** fix package.json for auth project ([00b9cd9](https://github.com/IgniteUI/igniteui-cli/commit/00b9cd942ec154c76da1ac0e810e366cf373b64f)) +* **igx-ts:** remove base.json for auth project ([019535b](https://github.com/IgniteUI/igniteui-cli/commit/019535be27bac30b065b27a6facde53578a08456)) +* **igx-ts:** revert deleted packages ([acede53](https://github.com/IgniteUI/igniteui-cli/commit/acede5371f24b10be2314de0118ff1976cfb8c35)) + + + +# 7.0.0-rc.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** remove unnecessary quotes ([cd9c16c](https://github.com/IgniteUI/igniteui-cli/commit/cd9c16cea9f4d120e7b6e0dd9112e907c5f2228b)) + + + +# 7.0.0-alpha.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** Use correct module name in app.module import [#792](https://github.com/IgniteUI/igniteui-cli/issues/792) ([53691b5](https://github.com/IgniteUI/igniteui-cli/commit/53691b54af896c410a0b2b0c3e91751f76341dbd)) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + +#### Bug Fixes + +* **templates, crm grid, grid batch editing:** Fixing issues in the two templates. ([2dc2859](https://github.com/IgniteUI/igniteui-cli/commit/2dc2859dd10f41f9b0b8a05072fa6d12de5c9c00)) +* **templates, crm-grid, grid batchediting:** Addressing the comments. ([09955ea](https://github.com/IgniteUI/igniteui-cli/commit/09955ea47cbe58546a6d117611a705c86c058b6e)) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **deployment:** Fix environment check 793 ([3f3946a](https://github.com/IgniteUI/igniteui-cli/commit/3f3946a474840d38a763149230d743b3e845bf47)) +* update map to 10.1.3 ([3926b77](https://github.com/IgniteUI/igniteui-cli/commit/3926b77d575e2051b210232be2b8b1f76b681fab)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* Adding a Map template for Angular ([7cbddeb](https://github.com/IgniteUI/igniteui-cli/commit/7cbddeb907db8277f6db43db47f19f06591a7c7f)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) +* **packages:** remove deprecated option [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([602111e](https://github.com/IgniteUI/igniteui-cli/commit/602111eefdcf390e832275c428e86f9ef5aa547f)) +* **packages:** Update igx-ts projects [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([71df154](https://github.com/IgniteUI/igniteui-cli/commit/71df1546f4765699bf0600ef07062cad85b69d99)) + + + +# 5.2.0 (2020-06-11) + + +#### Features + +* **igx-ts:** add Dock Manager template for Angular ([#763](https://github.com/IgniteUI/igniteui-cli/issues/763)) ([63acfdf](https://github.com/IgniteUI/igniteui-cli/commit/63acfdf6b9c511c0c8be18374f470ee8a0ca375c)) +* **igx,side-nav:** move content padding so views can override ([36f9964](https://github.com/IgniteUI/igniteui-cli/commit/36f9964bbe2d21920f99f5815f346ec117a61724)) + + + +## 5.1.1 (2020-06-03) + + +#### Bug Fixes + +* **igx,upgrade:** ignore projects without sourceRoot ([6d64d30](https://github.com/IgniteUI/igniteui-cli/commit/6d64d30efa3aedcfd7d32eb9e7e1c29c90c7ea6e)) +* **upgrade:** Logging a message that licensed package is already installed ([63df30d](https://github.com/IgniteUI/igniteui-cli/commit/63df30d67c7d46fed0b6e4411e5b097dcd7f11f2)) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **igx,templates:** correct empty project template id ([2d0b385](https://github.com/IgniteUI/igniteui-cli/commit/2d0b385a4ce3f8483e4f5f048bc94111ecb7db31)) +* **templates:** fix upgrade to get correct config ([a3021ef](https://github.com/IgniteUI/igniteui-cli/commit/a3021efc9baac77348a6e91a53f7b8b214fdb719)) +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) +* **upgrade:** sort packages.json dependencies when adding licensed package ([62bb652](https://github.com/IgniteUI/igniteui-cli/commit/62bb652857e8e8cd6e368ef71ac2bf4ef8ea6749)) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **upgrade:** handle multiple licensed packages, [#741](https://github.com/IgniteUI/igniteui-cli/issues/741) ([ef02f5b](https://github.com/IgniteUI/igniteui-cli/commit/ef02f5b089d3616bbb24ba4ba8e2f0a4c7045374)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + +#### Features + +* **igx,multi-pacakge:** templates resolve lib package from project ([7bb4670](https://github.com/IgniteUI/igniteui-cli/commit/7bb4670e1f7832321c3373e07c967d3d13d83777)) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **carousel:** Add noop animations module ([c696124](https://github.com/IgniteUI/igniteui-cli/commit/c6961249ccbfe186e1f369b23420584b908b5787)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Bug Fixes + +* **igx-ts:** change tsconfig module for spec files to avoid errors, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([3d6b987](https://github.com/IgniteUI/igniteui-cli/commit/3d6b987e4e2c72a9b73453af112465b7234aa9c3)) +* **igx-ts:** update auth providers tests, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([4c15c8b](https://github.com/IgniteUI/igniteui-cli/commit/4c15c8bc00ffd5543e676ce07ea4718ea234b62b)) +* **templates, igx:** add chart packages [#679](https://github.com/IgniteUI/igniteui-cli/issues/679) ([75f4dcd](https://github.com/IgniteUI/igniteui-cli/commit/75f4dcd3bf585d38b3f86ef85cfecc6b8ddcfabc)) +* **templates, igx:** add chart packages [#684](https://github.com/IgniteUI/igniteui-cli/issues/684) ([dd7bfb7](https://github.com/IgniteUI/igniteui-cli/commit/dd7bfb75923ebe4d644239774899c26cf6bf7564)) + + +#### Features + +* **igx-ts:** Update projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([e0a738a](https://github.com/IgniteUI/igniteui-cli/commit/e0a738aea9b0345386fb2611bc28168ca99390f0)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* **ig-add:** only take into account 'extraConfig' in generateConfig [#618](https://github.com/IgniteUI/igniteui-cli/issues/618) ([#621](https://github.com/IgniteUI/igniteui-cli/issues/621)) ([d8d7db8](https://github.com/IgniteUI/igniteui-cli/commit/d8d7db823f1c6c717063ce678695be4d8db084d6)) +* **igx-ts:** update scenario templates [#628](https://github.com/IgniteUI/igniteui-cli/issues/628) ([#643](https://github.com/IgniteUI/igniteui-cli/issues/643)) ([ecda4d7](https://github.com/IgniteUI/igniteui-cli/commit/ecda4d779d3a196c16c13f87e2787ff7fdcbc167)) +* **templates:** update angular charts packages to v8.2.12 ([3ed3013](https://github.com/IgniteUI/igniteui-cli/commit/3ed301379a765d4ad0614e1d51cd5dec2227494d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **igx-templates:** fix side-auth template tsconfig.app.json, [#597](https://github.com/IgniteUI/igniteui-cli/issues/597) ([1ffe4ba](https://github.com/IgniteUI/igniteui-cli/commit/1ffe4ba77b30c4eaab2a176ec30470cf32cf7980)) +* **igx-ts:** update autocomplete templates to import FormsModule [#581](https://github.com/IgniteUI/igniteui-cli/issues/581) ([#584](https://github.com/IgniteUI/igniteui-cli/issues/584)) ([b91a1e8](https://github.com/IgniteUI/igniteui-cli/commit/b91a1e8efe1c3e78482abff524b69c48e64f9094)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) + +## igniteui/angular-schematics@21.1.14100-alpha.3 (2026-03-25) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **schematics:** fs writeFile create check ([#1526](https://github.com/IgniteUI/igniteui-cli/issues/1526)) ([f8e4b59](https://github.com/IgniteUI/igniteui-cli/commit/f8e4b59bd951ff1b702f3d24cf61ebc33115dc89)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + +#### Bug Fixes + +* include js files in ng-schematics/scripts w/ newer npm version ([727f2f6](https://github.com/IgniteUI/igniteui-cli/commit/727f2f670d303ddb585b78d68a2c42f907a4786f)) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.1 (2022-07-15) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +## 8.0.4 (2021-08-02) + + +#### Bug Fixes + +* **schematics:** resolve schema id deprecation warning ([#870](https://github.com/IgniteUI/igniteui-cli/issues/870)) ([17d7016](https://github.com/IgniteUI/igniteui-cli/commit/17d70164de93a5162ba4a02b44b571de318a37c7)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **schematics:** include upgrade-packages schema ([77aa13d](https://github.com/IgniteUI/igniteui-cli/commit/77aa13db7442b24d787029af4d6a860a0bd85d3b)) +* **schematics:** remove log for unsupported custom templates ([97e3bb3](https://github.com/IgniteUI/igniteui-cli/commit/97e3bb3813cf25603a97177a5ec5d87b2db94206)) +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **schematics:** ensure component prompt installs packages [#695](https://github.com/IgniteUI/igniteui-cli/issues/695) ([16e55d4](https://github.com/IgniteUI/igniteui-cli/commit/16e55d446c3d18fddb7ec7040a266ef498d83060)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) +* prompt for template and theme if no name provided [#622](https://github.com/IgniteUI/igniteui-cli/issues/622) ([#626](https://github.com/IgniteUI/igniteui-cli/issues/626)) ([44621e9](https://github.com/IgniteUI/igniteui-cli/commit/44621e9040f29da4819e6758e8316e6c7048e38d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) +* **new, schematics:** no prompts when "name" is provided [#595](https://github.com/IgniteUI/igniteui-cli/issues/595) ([#609](https://github.com/IgniteUI/igniteui-cli/issues/609)) ([0ed45ba](https://github.com/IgniteUI/igniteui-cli/commit/0ed45ba0ed2147a0255d5df2a44e82b665c90c99)) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) +* **schematics:** skip start task if skipInstall === true ([#603](https://github.com/IgniteUI/igniteui-cli/issues/603)) ([fc38d65](https://github.com/IgniteUI/igniteui-cli/commit/fc38d651ecfa47f95921fa72f7be5ff68d8b586e)) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **schematics:** use project config instead of hard-coded paths ([#592](https://github.com/IgniteUI/igniteui-cli/issues/592)) ([43240b6](https://github.com/IgniteUI/igniteui-cli/commit/43240b610d878186aa4b50959c37822e1f54eaf6)) + + +#### Features + +* **schematics:** add prompt session to component schematic, [#566](https://github.com/IgniteUI/igniteui-cli/issues/566) ([#571](https://github.com/IgniteUI/igniteui-cli/issues/571)) ([e25c1ce](https://github.com/IgniteUI/igniteui-cli/commit/e25c1ceab6fbff58a89e8712d3eda31da7c1af65)) +* **schematics:** adding ng-new schematic missing options [#596](https://github.com/IgniteUI/igniteui-cli/issues/596) ([#598](https://github.com/IgniteUI/igniteui-cli/issues/598)) ([8b51541](https://github.com/IgniteUI/igniteui-cli/commit/8b5154133bfe3fc6ef1c9958879cd835e36b001e)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Bug Fixes + +* rename gitignore manually ([beb06a9](https://github.com/IgniteUI/igniteui-cli/commit/beb06a9de2511654797d75737a2e0bd5da968d8c)) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) +* **schematics:** add start schematic, enable npm and git init tasks ([2a329b1](https://github.com/IgniteUI/igniteui-cli/commit/2a329b18c5e2d6d0f852a72c842c3bab4022a9f2)) + +## igniteui-cli@14.10.0-alpha.3 (2026-03-25) + + +#### Features + +* Updated VS Code MCP configuration to align with new naming conventions. ([4fdb8e0](https://github.com/IgniteUI/igniteui-cli/commit/4fdb8e091b87c960c9cbbb35c126b6b7a32475fc)) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **commands,list:** do not use `this` in handler ([#1494](https://github.com/IgniteUI/igniteui-cli/issues/1494)) ([b8f5b53](https://github.com/IgniteUI/igniteui-cli/commit/b8f5b53599cb20374acee53195395213060b51d3)) +* **react:** remove setupTests and update test with it's logic ([#1489](https://github.com/IgniteUI/igniteui-cli/issues/1489)) ([bd1f0ba](https://github.com/IgniteUI/igniteui-cli/commit/bd1f0ba0bccfd6768ccae44ab10568be5ecb1828)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + +#### Bug Fixes + +* add vitest/browser package ([e283ed2](https://github.com/IgniteUI/igniteui-cli/commit/e283ed29b99d794bd67f3bcab7a9dbfd391045ec)) +* add vitest/browser package ([5c29f50](https://github.com/IgniteUI/igniteui-cli/commit/5c29f5054febc0d656732886d08237528d6f6e40)) + + + +## 14.8.2-beta.2 (2026-01-12) + + +#### Bug Fixes + +* add playwright to the yaml files for wc ([6432111](https://github.com/IgniteUI/igniteui-cli/commit/643211110ad858f84b9ed23b3602f80218f23cbd)) +* resolve missed merge conflict ([ba42d4f](https://github.com/IgniteUI/igniteui-cli/commit/ba42d4f378a3e8334f51381ac1ff85799134ce3e)) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + +#### Features + +* update tests to use Playwright ([517ea99](https://github.com/IgniteUI/igniteui-cli/commit/517ea9901372d7a42b516f5e9114a82880038e7e)) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + +#### Features + +* **react:** add playwright and adjust tests; update packages; ([#1430](https://github.com/IgniteUI/igniteui-cli/issues/1430)) ([32b41dc](https://github.com/IgniteUI/igniteui-cli/commit/32b41dcf3f53de76fbafce39a36a1e8d51876b93)) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Add missing igniteui-react-core dependency to React grid templates ([fb429bb](https://github.com/IgniteUI/igniteui-cli/commit/fb429bbd3634e0cf86a617672f857be4bb8b2f0d)) +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* set default route ([#1422](https://github.com/IgniteUI/igniteui-cli/issues/1422)) ([768d0d0](https://github.com/IgniteUI/igniteui-cli/commit/768d0d0a2873d2efc81c426ce35b5e42e92508a9)) +* update react templates ([93d132f](https://github.com/IgniteUI/igniteui-cli/commit/93d132fa229f0dba963cd5f21b89d5274e346910)) +* use only grid with defined columns ([faeb25a](https://github.com/IgniteUI/igniteui-cli/commit/faeb25a64effeba39e24dafe6e93e5a26a07c5bc)) + + +#### Features + +* Update Ignite UI product versions in template files ([964dda1](https://github.com/IgniteUI/igniteui-cli/commit/964dda13da00ca0c9d4bf1a42d6d98d2aa1d7b88)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **react:** add missing argument and fix incorrect types ([#1403](https://github.com/IgniteUI/igniteui-cli/issues/1403)) ([fb006b3](https://github.com/IgniteUI/igniteui-cli/commit/fb006b38e6b4f3a2e61326b018787f67bd32b640)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + +#### Bug Fixes + +* **wc:** add seperate update for single or double quotes ([79ed105](https://github.com/IgniteUI/igniteui-cli/commit/79ed105cd67baf99f15e327d5f9840c3103d8018)) +* **wc:** fix iteration ([83583db](https://github.com/IgniteUI/igniteui-cli/commit/83583dbae937824e1b1f4d3f8d1ce8cc8e5589ec)) +* **wc:** fix paths in web components workflow ([6ff5999](https://github.com/IgniteUI/igniteui-cli/commit/6ff5999b782af24f09c29d4c60befb32a84fc5e0)) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + +#### Features + +* increase maximum file size to cache in webComponents's vite configuration to 10 MB ([#1370](https://github.com/IgniteUI/igniteui-cli/issues/1370)) ([0a1385e](https://github.com/IgniteUI/igniteui-cli/commit/0a1385e5d1f98c8fcdf020d144f048b112b251d5)) + + + +## 14.3.9 (2025-01-23) + + +#### Features + +* enable silent mode in Vite configuration for improved build output ([#1369](https://github.com/IgniteUI/igniteui-cli/issues/1369)) ([7728300](https://github.com/IgniteUI/igniteui-cli/commit/7728300cbba7c5b15261ff2a82820432bd4b12b7)) + + + +## 14.3.8 (2025-01-23) + + +#### Features + +* replace rollup with vite configuration for wc ([#1364](https://github.com/IgniteUI/igniteui-cli/issues/1364)) ([024ee5f](https://github.com/IgniteUI/igniteui-cli/commit/024ee5f048427c5406013f1e4d051403ae255fca)) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + +#### Bug Fixes + +* **web-components:** add step in github pages workflow to fix navigation ([#1355](https://github.com/IgniteUI/igniteui-cli/issues/1355)) ([0ca7277](https://github.com/IgniteUI/igniteui-cli/commit/0ca7277be8eaf1218af8a47f1ed7f51273499737)) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + +#### Bug Fixes + +* **cli:** replace coveralls with coveralls-next ([#1336](https://github.com/IgniteUI/igniteui-cli/issues/1336)) ([4028e28](https://github.com/IgniteUI/igniteui-cli/commit/4028e28bc62da3f2232f79b60e26b9d13c93c8f9)) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + +#### Bug Fixes + +* **cli:** add fixes in react and wc templates ([#1326](https://github.com/IgniteUI/igniteui-cli/issues/1326)) ([0430547](https://github.com/IgniteUI/igniteui-cli/commit/0430547a733c98b76aa94499516934547049b117)) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + +#### Bug Fixes + +* **eslint:** turn off no-explicit-any rule for wc ([#1288](https://github.com/IgniteUI/igniteui-cli/issues/1288)) ([1ee5b0f](https://github.com/IgniteUI/igniteui-cli/commit/1ee5b0f4ecc97a93f60b95e1615bb2a75fce9238)) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Bug Fixes + +* **igr-ts:** add new lines in base app routes file ([#1284](https://github.com/IgniteUI/igniteui-cli/issues/1284)) ([92a14ef](https://github.com/IgniteUI/igniteui-cli/commit/92a14ef05f174bb5e5bc09978c986eb8f27e57e1)) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + +#### Bug Fixes + +* **react:** fix null type build error in main.tsx ([#1242](https://github.com/IgniteUI/igniteui-cli/issues/1242)) ([2d0b579](https://github.com/IgniteUI/igniteui-cli/commit/2d0b57999b6a22445c2e7ff494310f9e94c421ea)) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* **igr-ts:** lint ignore unused vars prefix; ts strict ([#1232](https://github.com/IgniteUI/igniteui-cli/issues/1232)) ([91e35b3](https://github.com/IgniteUI/igniteui-cli/commit/91e35b3eb060f079ff6e30bdead75af7d6b98add)) + + + +## 13.1.13-beta.4 (2024-04-04) + + + +## 13.1.13-beta.3 (2024-04-04) + + +#### Features + +* **react:** remove igniteui deps from package.json and bump versions ([841a19d](https://github.com/IgniteUI/igniteui-cli/commit/841a19d2779f4f156c48368b4fa7a20b1a181eb4)) +* **react:** turn off no-explicit-any in eslint ([ef50011](https://github.com/IgniteUI/igniteui-cli/commit/ef500113afe214e8e64dea926d6937c5e5f827df)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +# 13.2.0-beta.0 (2024-03-15) + + +#### Bug Fixes + +* add elements internal polyfill to base template ([c7d2396](https://github.com/IgniteUI/igniteui-cli/commit/c7d2396572a9cd77205b8727ed81089f460403e2)) +* **Imports:** Fixed class import path in .test.ts ([#1224](https://github.com/IgniteUI/igniteui-cli/issues/1224)) ([6b3a2ef](https://github.com/IgniteUI/igniteui-cli/commit/6b3a2effef4951f0fc59e5393186eb2e69f2972b)) +* **Lint:** Fixed styles typing in style-utils ([#1222](https://github.com/IgniteUI/igniteui-cli/issues/1222)) ([6ad842a](https://github.com/IgniteUI/igniteui-cli/commit/6ad842a2bc16d50c8b29ddbca5907b80e40fd798)) + + + +## 13.1.11 (2024-03-12) + + +#### Bug Fixes + +* **react:** add editorconfig and vite-env.d.ts ([555300c](https://github.com/IgniteUI/igniteui-cli/commit/555300c38df56246cb7cc08f6b25e8ae5fd316f0)) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + +#### Bug Fixes + +* **WebComponents:** Removing an unnecessary ` from package.json ([3420292](https://github.com/IgniteUI/igniteui-cli/commit/3420292eb5752eaf76cfee1e12927d8d2749b8be)) + + + +## 13.1.6 (2024-02-26) + + +#### Bug Fixes + +* **React:** Add styles to support dark themes [#29410](https://github.com/IgniteUI/igniteui-cli/issues/29410) ([#1205](https://github.com/IgniteUI/igniteui-cli/issues/1205)) ([a191348](https://github.com/IgniteUI/igniteui-cli/commit/a191348d07317cdaac43db7bd52ee3958784ae55)) + + + +## 13.1.5 (2024-01-31) + + +#### Features + +* add style-utils file to base project ([#1195](https://github.com/IgniteUI/igniteui-cli/issues/1195)) ([112f27d](https://github.com/IgniteUI/igniteui-cli/commit/112f27ddc49d9106a182c8c7768543aa1b913164)) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igr-ts:** add github workflows folder ([#1192](https://github.com/IgniteUI/igniteui-cli/issues/1192)) ([2369c55](https://github.com/IgniteUI/igniteui-cli/commit/2369c556b8f84ce6a575c73b617c7581cedf5c0f)) +* open browser on app start ([#1187](https://github.com/IgniteUI/igniteui-cli/issues/1187)) ([c4e1f5c](https://github.com/IgniteUI/igniteui-cli/commit/c4e1f5c8d65dd8729083377973a40450b4899d63)) + + +#### Features + +* **igc-ts:** bump the version to 4.7.0 and add new components ([#1189](https://github.com/IgniteUI/igniteui-cli/issues/1189)) ([e9dbfd7](https://github.com/IgniteUI/igniteui-cli/commit/e9dbfd7d6212f1b8535de6a142f6140e3848f6ef)) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + +#### Bug Fixes + +* memory allocation issue during build of webComponent app that uses igc-category-chart ([ee188bf](https://github.com/IgniteUI/igniteui-cli/commit/ee188bf4672b8ee96ac1b891cf8e334f44bb4929)) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Bug Fixes + +* **grid:** Adding missing packages to the grid template [#1109](https://github.com/IgniteUI/igniteui-cli/issues/1109) ([9c65afe](https://github.com/IgniteUI/igniteui-cli/commit/9c65afe228f182918c6e3f50e7cfec0466d7f7d2)) +* **web-components:** Adding packages in each template. ([674f55c](https://github.com/IgniteUI/igniteui-cli/commit/674f55c66bfa3308696cee3da1dd1d0e3ae64c0c)) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + +#### Bug Fixes + +* **wc:** changing the function call [#1110](https://github.com/IgniteUI/igniteui-cli/issues/1110) ([#1113](https://github.com/IgniteUI/igniteui-cli/issues/1113)) ([5e4d1db](https://github.com/IgniteUI/igniteui-cli/commit/5e4d1dbdeeaa498278a7669b08031c51bfa2f367)) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + +#### Features + +* add lint file for web components ([#1085](https://github.com/IgniteUI/igniteui-cli/issues/1085)) ([25498c0](https://github.com/IgniteUI/igniteui-cli/commit/25498c09b2bc4e5bc30c67c36008d97b342e3526)) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + +#### Features + +* **wc:** add npmrc to proj template ([#1079](https://github.com/IgniteUI/igniteui-cli/issues/1079)) ([af233e5](https://github.com/IgniteUI/igniteui-cli/commit/af233e53d72b615ce11e16a65ddf358645329ffb)) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta9 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.6 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + +#### Features + +* provide default options when adding a template ([#1070](https://github.com/IgniteUI/igniteui-cli/issues/1070)) ([73e5c2c](https://github.com/IgniteUI/igniteui-cli/commit/73e5c2c0cc62b81384d6b4928103adf5ccf16153)) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + +#### Bug Fixes + +* **webcomponents:** set background and color to body ([b41a8b6](https://github.com/IgniteUI/igniteui-cli/commit/b41a8b66834ed46206cb14aa8bff0d6e3b99ef18)) +* **webcomponents:** set correct fallback for background color ([#1065](https://github.com/IgniteUI/igniteui-cli/issues/1065)) ([a976831](https://github.com/IgniteUI/igniteui-cli/commit/a976831228c204b015bd49773af4b5fc9767873a)) +* **webcomponents:** update app-root markup ([c717c37](https://github.com/IgniteUI/igniteui-cli/commit/c717c370cae66218eb4a7d5daaf0137da8c12d23)) + + +#### Features + +* **wc:** add base template for Web Components [#988](https://github.com/IgniteUI/igniteui-cli/issues/988) ([#1058](https://github.com/IgniteUI/igniteui-cli/issues/1058)) ([7574ab2](https://github.com/IgniteUI/igniteui-cli/commit/7574ab2b0221687a6ace6f627ec55caa3945236f)) + + + +## 10.0.5 (2022-09-19) + + +#### Features + +* **wc:** add accordion, tab & date-time-editor templates ([#1055](https://github.com/IgniteUI/igniteui-cli/issues/1055)) ([f2a631f](https://github.com/IgniteUI/igniteui-cli/commit/f2a631fcd18f529172af8e038929bf7f542e71ff)) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **wc:** address comments ([e1f804d](https://github.com/IgniteUI/igniteui-cli/commit/e1f804deada9f5fdf628ba25e122278cb9118507)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) +* **wc:** add new 2.1.0 components ([526da0c](https://github.com/IgniteUI/igniteui-cli/commit/526da0ce167659c9cfd3b21caf21efdcbc47e18d)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + +#### Features + +* **wc:** adding empty view and refactor proj structure [#967](https://github.com/IgniteUI/igniteui-cli/issues/967) ([#979](https://github.com/IgniteUI/igniteui-cli/issues/979)) ([622a014](https://github.com/IgniteUI/igniteui-cli/commit/622a0143be1583cfb97d7b80cabbfe21e03c20eb)) +* **web-components:** use LitElement in the templates [#989](https://github.com/IgniteUI/igniteui-cli/issues/989) ([#1001](https://github.com/IgniteUI/igniteui-cli/issues/1001)) ([5d828bc](https://github.com/IgniteUI/igniteui-cli/commit/5d828bc6062e6971d82f588ebf59a6e489d87257)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.7 (2021-11-09) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **igr-es6:** Underscore dot ([a0ce582](https://github.com/IgniteUI/igniteui-cli/commit/a0ce582e112a31c2c59d5532791ef07ab988335b)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **custom-templates:** Refactor samples, ([1f50907](https://github.com/IgniteUI/igniteui-cli/commit/1f509070a9409c4100d3d9c6a5de2f443d04c556)) +* **ig-ts:** Free version path contains no /en ([e96c7f6](https://github.com/IgniteUI/igniteui-cli/commit/e96c7f673729a034eeb3d89f5adfe3061d6e9f0b)) +* **ig-ts:** Make use of all visible height ([ebfe5ed](https://github.com/IgniteUI/igniteui-cli/commit/ebfe5edada1fcd9d4f8e25f868f916ad2d862121)) +* **ig-ts:** Temp fix - add static FormsModule ([9341753](https://github.com/IgniteUI/igniteui-cli/commit/9341753ab6fed9597c6f30f9fb1383ad132282ab)) +* **ig-ts:** Update prod budgets ([4edd971](https://github.com/IgniteUI/igniteui-cli/commit/4edd97100f0ab2cdd7a00176992ca1da57de47ff)) +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) +* **lint:** Fix dum line lenght ([570accb](https://github.com/IgniteUI/igniteui-cli/commit/570accbaef8f74d01cecbeda0046edb1a8423ef1)) +* **lint:** Fix lint errors ([84394b9](https://github.com/IgniteUI/igniteui-cli/commit/84394b9c4c24ed9727c8719bd9e463cea09d482b)) +* **lint:** Fix lint errors. ([0477e7d](https://github.com/IgniteUI/igniteui-cli/commit/0477e7dd3d9b4731e1b3176316581d3e0339ca5e)) +* **templates:** Add file-saver package ([8c7a59d](https://github.com/IgniteUI/igniteui-cli/commit/8c7a59db381a32719cdadbf1534a387c90bb05d5)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **react-grid:** Add missing module [#791](https://github.com/IgniteUI/igniteui-cli/issues/791) ([#798](https://github.com/IgniteUI/igniteui-cli/issues/798)) ([68e2b81](https://github.com/IgniteUI/igniteui-cli/commit/68e2b81e297a5b4279f53e5bb9dff80126cc08b6)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Features + +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([73a5670](https://github.com/IgniteUI/igniteui-cli/commit/73a56703ff4f4f0cc23d1da3c65cb4fbe114c9b4)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **ig-ts:** correct grid features template variable [#702](https://github.com/IgniteUI/igniteui-cli/issues/702) ([3f09bd9](https://github.com/IgniteUI/igniteui-cli/commit/3f09bd9af64177162e4e450df2148e1b13b2f87f)) +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Features + +* **ix-ts:** Update ig-ts projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([a6204d8](https://github.com/IgniteUI/igniteui-cli/commit/a6204d80f50e885459306276f3584fac0488460b)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) + + + +# 5.0.0-beta.2 (2019-12-06) + + + +# 5.0.0-beta.1 (2019-11-28) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +# 14.10.0-alpha.2 + +## igniteui/cli-core@14.10.0-alpha.2 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **lint:** re-enable no-console rule ([3ffa07f](https://github.com/IgniteUI/igniteui-cli/commit/3ffa07ff8812e93dd358b38332f3abc2ea955af2)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **packages:** disable non-functional registry login attempt on upgrade ([#1528](https://github.com/IgniteUI/igniteui-cli/issues/1528)) ([1008a1e](https://github.com/IgniteUI/igniteui-cli/commit/1008a1e3fadb20553f464162d69a5bb2393d615b)) +* **packages:** login command for node@24+ spawn change ([cbb6502](https://github.com/IgniteUI/igniteui-cli/commit/cbb6502e90cfeaa7a87885748aa4b337c37c0b2f)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + +#### Bug Fixes + +* **react:** enhance upgrade-packages to support workspace glob patterns for projects without explicit workspaces ([#1424](https://github.com/IgniteUI/igniteui-cli/issues/1424)) ([6eeee2f](https://github.com/IgniteUI/igniteui-cli/commit/6eeee2ff879902197f012e83eb6064a72a4c438e)) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* **wc:** enhance upgrade-packages to support workspace glob patterns and vite.config.ts files ([#1408](https://github.com/IgniteUI/igniteui-cli/issues/1408)) ([bcd62be](https://github.com/IgniteUI/igniteui-cli/commit/bcd62be52107bcbdab6d207866fe7ffb99883b6d)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + +#### Features + +* **React:** Update react html files with licensed packages when upgrading packages ([#1395](https://github.com/IgniteUI/igniteui-cli/issues/1395)) ([7a7c4f0](https://github.com/IgniteUI/igniteui-cli/commit/7a7c4f0b5b74acc67e7524e643ee2a102ededb46)) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + +#### Bug Fixes + +* **WC:** update themes import paths to licensed version ([#1387](https://github.com/IgniteUI/igniteui-cli/issues/1387)) ([260068b](https://github.com/IgniteUI/igniteui-cli/commit/260068b9c9e3f4e895717ca6003f6ba0aded5cf2)) + + + +## 14.3.16 (2025-03-31) + + +#### Bug Fixes + +* **workflows:** Do not throw error if github workflows directory does not exist when updating ([#1383](https://github.com/IgniteUI/igniteui-cli/issues/1383)) ([acc771a](https://github.com/IgniteUI/igniteui-cli/commit/acc771afac962166f630c36beff428aa83af97de)) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + +#### Features + +* **core:** add FormattingService ([f7ea2a4](https://github.com/IgniteUI/igniteui-cli/commit/f7ea2a4d8f57b5f1edb531df76d05c541df754e1)) +* **core:** add new types ([aa636a3](https://github.com/IgniteUI/igniteui-cli/commit/aa636a3b1642da1a57758d49e0f7f6f79c7e2d01)) +* **core:** add TypeScriptASTTransformer ([9854847](https://github.com/IgniteUI/igniteui-cli/commit/9854847e32c718d82013e1fc8b58d9b06700b819)) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **kebacase:** do not add dash before numbers ([25d8f54](https://github.com/IgniteUI/igniteui-cli/commit/25d8f544243f6e1f5583c772f4b8e0e3cbb7ca12)) +* **kebap-case:** add dash between number and uppercase letter ([0be7637](https://github.com/IgniteUI/igniteui-cli/commit/0be7637bc19423821e066a9e62dbdec3e5bd5cb4)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + +#### Bug Fixes + +* update Utils.LowerDashed function ([#1171](https://github.com/IgniteUI/igniteui-cli/issues/1171)) ([2254ecc](https://github.com/IgniteUI/igniteui-cli/commit/2254ecc0267be8c19e7f1d5295886b2ba6c345c7)) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + +#### Bug Fixes + +* **package-manager:** skip setting up child install tasks for new projects ([de2a134](https://github.com/IgniteUI/igniteui-cli/commit/de2a1341e13ba20635a5ed94c5cc7e4c79c7ca46)) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **import:** Update func signature ([a3ac17a](https://github.com/IgniteUI/igniteui-cli/commit/a3ac17ab30436ed0420c92902c53ff7c3dfd0534)) +* **lint:** Fix lint errors ([6b5dd98](https://github.com/IgniteUI/igniteui-cli/commit/6b5dd985e90fb9cf8675c6cf0c06c6193e27fb32)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **ts-transform:** respect quote type from editorconfig ([99b3aad](https://github.com/IgniteUI/igniteui-cli/commit/99b3aadce0e6e7de8e2fef502db2ff1811d7a11e)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + +#### Features + +* **tsutil:** add optional parent route to TsFileUpdateUtil.addRoute method ([#777](https://github.com/IgniteUI/igniteui-cli/issues/777)) ([2df694a](https://github.com/IgniteUI/igniteui-cli/commit/2df694ac03a4601059f730b6cc9ae7d3ab6371ea)) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* remove angular as default choice for step by step [#579](https://github.com/IgniteUI/igniteui-cli/issues/579) ([5d2697e](https://github.com/IgniteUI/igniteui-cli/commit/5d2697e019d344cc5ebedf9ac00de94b012ded73)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + +#### Bug Fixes + +* **package-manager:** manually update pckgJSON instead of letting npm do it, [#751](https://github.com/IgniteUI/igniteui-cli/issues/751) ([6fa4c0c](https://github.com/IgniteUI/igniteui-cli/commit/6fa4c0c8d5afecfef8a8c1de18b1f6620edc006c)) + + + +# 5.1.0-beta.3 (2020-05-29) + + +#### Bug Fixes + +* **upgrade:** clear stdin stream before login prompt ([c77f49a](https://github.com/IgniteUI/igniteui-cli/commit/c77f49ab940933e9df6da2518d5192d5d49fbd0c)) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + +## igniteui/angular-templates@21.1.14100-alpha.2 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* **igx-ts:** update angular project to use vitest with playwright ([#1542](https://github.com/IgniteUI/igniteui-cli/issues/1542)) ([85dd3e6](https://github.com/IgniteUI/igniteui-cli/commit/85dd3e609295d7d801c127715c5fe8947f90f23d)) +* **igx-ts:** update project setup and templates naming ([#1514](https://github.com/IgniteUI/igniteui-cli/issues/1514)) ([ed4d1dd](https://github.com/IgniteUI/igniteui-cli/commit/ed4d1ddced09cee062caae7f8445df5ba11d8cac)) +* **mcp:** add angular-cli server configuration to mcp.json ([43a01a0](https://github.com/IgniteUI/igniteui-cli/commit/43a01a08ca6ac9b9a7958a172e5f27b02fe1fbb1)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts-legacy:** fi grid type import and add missing override ([ff24df0](https://github.com/IgniteUI/igniteui-cli/commit/ff24df0e665d8c834f510bfc62fc99af6532a38e)) +* **igx-ts:** fix eslint configurations ([#1509](https://github.com/IgniteUI/igniteui-cli/issues/1509)) ([ec63959](https://github.com/IgniteUI/igniteui-cli/commit/ec63959ee65e5c369d483d5dc34965f121a36cae)) +* **igx-ts:** fix side nav route data text ([487ba12](https://github.com/IgniteUI/igniteui-cli/commit/487ba122c2d51822642d15f501ea776193bf6a44)) +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **angular:** add igniteui angular core override ([0a5d46f](https://github.com/IgniteUI/igniteui-cli/commit/0a5d46f73bd3d621a833d07ad09318ccbdcfb9b9)) +* **angular:** add missing providers ([804703e](https://github.com/IgniteUI/igniteui-cli/commit/804703e984919aa2fac6272f8058f94256460b73)) +* **angular:** empty template config ([75eef02](https://github.com/IgniteUI/igniteui-cli/commit/75eef022a33f0dc6bc5b90816ccee9c415d76289)) +* update imports ([a2bf7bf](https://github.com/IgniteUI/igniteui-cli/commit/a2bf7bf6fc973ba0af8d12dc1c33605419475891)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + +#### Bug Fixes + +* **angular:** fix the type of the providers ([142dbda](https://github.com/IgniteUI/igniteui-cli/commit/142dbda9665430bb3fb5a97744e8913195975708)) + + + +## 14.8.5-beta.0 (2026-02-10) + + +#### Bug Fixes + +* **angular:** add provide zone change detection in app config for angular standalone ([27b516b](https://github.com/IgniteUI/igniteui-cli/commit/27b516b640b1ecf9fdb7320e6a5c84a398aab505)) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* add same fix to legacy angular projects ([2456829](https://github.com/IgniteUI/igniteui-cli/commit/245682908c81c931b65707b5098a98e3991f6f71)) +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) +* move tearDown to chart related test files ([40b1739](https://github.com/IgniteUI/igniteui-cli/commit/40b1739734199b035c32b02937456c9ae444654a)) +* remove calls to test.ts ([c08ca9f](https://github.com/IgniteUI/igniteui-cli/commit/c08ca9fcd472488a125c2f073bd06e051a5f3314)) +* remove test.ts as not needed ([451d49a](https://github.com/IgniteUI/igniteui-cli/commit/451d49ab3c6b7652b29b062e1e3a9301f2497a0f)) + + + +## 14.8.3 (2026-01-19) + + +#### Bug Fixes + +* **angular:** remove glob and rimraf from standalone package json ([#1478](https://github.com/IgniteUI/igniteui-cli/issues/1478)) ([0a3afce](https://github.com/IgniteUI/igniteui-cli/commit/0a3afce21e6e14196c8942f9f15a56793e1679fa)) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + +#### Bug Fixes + +* **ng:** move eqeqeq rule ([#1433](https://github.com/IgniteUI/igniteui-cli/issues/1433)) ([29a574d](https://github.com/IgniteUI/igniteui-cli/commit/29a574db2af16adff262440d789c58216ba08a8e)) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + +#### Bug Fixes + +* **angular:** fix eslint config for angular modules ([#1423](https://github.com/IgniteUI/igniteui-cli/issues/1423)) ([2420d26](https://github.com/IgniteUI/igniteui-cli/commit/2420d26511cffef06cad58fa7e67a61a6b885187)) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* **ng, standalone:** add test setup file for angular standalone ([#1421](https://github.com/IgniteUI/igniteui-cli/issues/1421)) ([feebb55](https://github.com/IgniteUI/igniteui-cli/commit/feebb5574cfffe86f6f2b342c2643b3ef9651a3c)) + + + +## 14.5.4 (2025-07-01) + + +#### Bug Fixes + +* **ng:** Add same proj rxjs version in overrides, so there are no peer dep errors for it. It is needed when having reveal or other overrides. ([4728d19](https://github.com/IgniteUI/igniteui-cli/commit/4728d19e7658cf5c4d863a6c277be696f77e5ac5)) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **angular:** fix theme errors ([#1404](https://github.com/IgniteUI/igniteui-cli/issues/1404)) ([3e7e4a3](https://github.com/IgniteUI/igniteui-cli/commit/3e7e4a3777bde5cc025df182bb57e5b9f002c5d9)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* **angular:** add ovverides for reveal sdk wrappers ([d2bc8cb](https://github.com/IgniteUI/igniteui-cli/commit/d2bc8cb26584f5836d633d24421d6dc774bd53a5)) +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Bug Fixes + +* adapt ngModules templates to 19 changes ([2ce6e9d](https://github.com/IgniteUI/igniteui-cli/commit/2ce6e9d38acef0f0e8981ef054f61ab35d137fd8)) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + + +## 13.4.1 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +# 13.4.0 (2024-07-22) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + +#### Features + +* **ng-sa-base:** add vscode template folder ([a4787e7](https://github.com/IgniteUI/igniteui-cli/commit/a4787e74fcc715aceaa4c265fd97e4452e70463e)) +* **ngm-base:** add vscode template folder ([0ed6fb8](https://github.com/IgniteUI/igniteui-cli/commit/0ed6fb8cf8ef75103c84e8ee2ddeaa2886be3922)) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* fix yml script placeholder delimiters ([#1239](https://github.com/IgniteUI/igniteui-cli/issues/1239)) ([45a2264](https://github.com/IgniteUI/igniteui-cli/commit/45a2264a93edc5b0ca307d5ec43fcd6a9de42cea)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **_base-legacy:** update project type to legacy ([f8984c9](https://github.com/IgniteUI/igniteui-cli/commit/f8984c93f02e8391ca721bc49eeabd45e5f7bb34)) +* **_base:** provide http client ([1e1d1c2](https://github.com/IgniteUI/igniteui-cli/commit/1e1d1c2d6c70a110ace81e74c91bcab2a7021086)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igx-ts:** update karma-jasmine-html-reporter ([0cf034d](https://github.com/IgniteUI/igniteui-cli/commit/0cf034db6474b8ed88e9b3d93e9b3011afd47b3b)) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **igx:** remove prod config for ng build ([d90c056](https://github.com/IgniteUI/igniteui-cli/commit/d90c056aed7ac87f972ea719eeac9367e6b97226)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** more fixes ([1373d18](https://github.com/IgniteUI/igniteui-cli/commit/1373d18e45d8fa9bb69bf5692b360bb4ecec531b)) +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +## 11.1.2 (2023-05-25) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + +#### Bug Fixes + +* **igx-ts:** updating dependencies [#1099](https://github.com/IgniteUI/igniteui-cli/issues/1099) ([#1102](https://github.com/IgniteUI/igniteui-cli/issues/1102)) ([cd3b35a](https://github.com/IgniteUI/igniteui-cli/commit/cd3b35ac7961474ecd4ecbb8c4dffa33067c20f1)) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + +#### Bug Fixes + +* **fintech grid:** fix slow grid [#1020](https://github.com/IgniteUI/igniteui-cli/issues/1020) ([4f888dc](https://github.com/IgniteUI/igniteui-cli/commit/4f888dc3c2b1fd6ad896b197634d3aa0c3ef57cd)) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **ng:** gridAPI rename ([5b8b0a5](https://github.com/IgniteUI/igniteui-cli/commit/5b8b0a5e5e21ce5ae2228e0d025eea0195206292)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + +#### Bug Fixes + +* **templates:** Adding override modifier. ([6334d17](https://github.com/IgniteUI/igniteui-cli/commit/6334d174642212d942c5f5669c1082ae56bb3cc8)) + + + +# 9.1.0-rc.0 (2022-02-24) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) +* **angular:** remove old code ([3b063db](https://github.com/IgniteUI/igniteui-cli/commit/3b063db9cf51509b289148f4928cdfda9837a6dd)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **schematics:** fix home import without placeholder ([#966](https://github.com/IgniteUI/igniteui-cli/issues/966)) ([9263bb2](https://github.com/IgniteUI/igniteui-cli/commit/9263bb22b6dd699845d3e6fad7ab78536f7a484c)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + +#### Bug Fixes + +* changes from latest rc, packages updates ([f59905f](https://github.com/IgniteUI/igniteui-cli/commit/f59905fbd0d37d536b2a13dd002cc99ce8c48165)) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) +* **angular:** new theme imports upgrade packages ([3ae74d9](https://github.com/IgniteUI/igniteui-cli/commit/3ae74d9bb9a338f939e9e5fb73c978003401c2a7)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + +#### Bug Fixes + +* remove icon color, becasue it is deprecated ([7b33804](https://github.com/IgniteUI/igniteui-cli/commit/7b338049a3182d7a8ea9e7106d10ef485dcc0623)) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +# 8.1.0-rc.0 (2021-07-30) + + +#### Bug Fixes + +* **igx-ts:** remove deprecated properties from scenario templates ([f84dc3c](https://github.com/IgniteUI/igniteui-cli/commit/f84dc3cd9626d5f287caed74cd32fda6849906e2)) + + + +# 8.1.0-beta.1 (2021-07-30) + + +#### Bug Fixes + +* **awesome-grid:** fix deprecated properties warnings ([f7a5b0c](https://github.com/IgniteUI/igniteui-cli/commit/f7a5b0c589c4b0aa8ded7c036859956d84c1ed23)) +* **fintech-grid:** fix console warnings and errors ([eaaf733](https://github.com/IgniteUI/igniteui-cli/commit/eaaf73311b45b9fc326353c8c6e6a1efe3f6f225)) +* **igx-ts:** Update angular.json ([c038c70](https://github.com/IgniteUI/igniteui-cli/commit/c038c708c5d2476e819071fd6c9defe29915b904)) +* **igx-ts:** use explicit index in drop-down components for logic view ([cb96f7d](https://github.com/IgniteUI/igniteui-cli/commit/cb96f7dcc2a5a4af2c585b22b50daa372f3684e9)) + + +#### Features + +* **igx-ts:** update custom grid templates w/ 12.1 paginator ([2b5058b](https://github.com/IgniteUI/igniteui-cli/commit/2b5058bd8c2f1946fd1f52b848a5b6ca9aebfcee)) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* **igx-templates:** add igx-accordion template ([#851](https://github.com/IgniteUI/igniteui-cli/issues/851)) ([03e74cd](https://github.com/IgniteUI/igniteui-cli/commit/03e74cd194184b629ea09ec3cfa5218943d0feef)) +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + +#### Bug Fixes + +* **igx-ts:** fix strict errors in base and side-nav projects ([963d23d](https://github.com/IgniteUI/igniteui-cli/commit/963d23dc9771d8d184bff89fe2e2782e3bd97219)) +* **igx-ts:** fix strict errors in side-nav-auth project ([695f430](https://github.com/IgniteUI/igniteui-cli/commit/695f430c693b4a4cb817784d4b20dc0c268ec80c)) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + +#### Bug Fixes + +* **angular-templates:** fix issue with strict templates in igx-ts ([38aaa75](https://github.com/IgniteUI/igniteui-cli/commit/38aaa756908493244414a51cc31688c27246b2f6)), closes [#850](https://github.com/IgniteUI/igniteui-cli/issues/850) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + +#### Bug Fixes + +* **fonts:** Fix icon font names and families ([35a702e](https://github.com/IgniteUI/igniteui-cli/commit/35a702ee21d4a780b9318de071246969af54fca7)) +* **template:** Fix and upadte awesome template ([f2b51aa](https://github.com/IgniteUI/igniteui-cli/commit/f2b51aa2685220b282ca8a25bb2580f44b960bcb)) +* **warnings:** Update icons for grids samples ([0efbbae](https://github.com/IgniteUI/igniteui-cli/commit/0efbbaecdcb3b6095c6ebc483729214f5e4753aa)) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + +#### Bug Fixes + +* **igx-templates:** provide service in tree sample, add some style ([b76452a](https://github.com/IgniteUI/igniteui-cli/commit/b76452a22d047a07d95c19fd3c720466065f178e)) +* remove strict checks and update open() method ([f2877e3](https://github.com/IgniteUI/igniteui-cli/commit/f2877e342746f85962d3f10125c6b784e53eb5d2)) + + +#### Features + +* **igx-templates:** add igx-tree template ([41bc6c3](https://github.com/IgniteUI/igniteui-cli/commit/41bc6c37b19c9136335347a468cdd5c8685a1f61)) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + +#### Bug Fixes + +* **toolbar:** Update hgrid & treegrid custom template toolbar ([c27af22](https://github.com/IgniteUI/igniteui-cli/commit/c27af22c413da93305a5c90c8a60a6dbac1a01e1)) + + + +## 7.0.1 (2020-11-16) + + +#### Bug Fixes + +* **igx-ts:** add local storage to spec ([3056a97](https://github.com/IgniteUI/igniteui-cli/commit/3056a97d99c492c04f2bbf19a7bd09c418294dbf)) +* **igx,custom-grid:** assign allowFiltering when selected as option ([7534c5f](https://github.com/IgniteUI/igniteui-cli/commit/7534c5f51736587b87217042b98c1be753cd76a8)) +* ssr breaks because of localStorage ref ([dc9410f](https://github.com/IgniteUI/igniteui-cli/commit/dc9410ff7c333bdece6ba25212f6c763afe64601)) + + + +# 7.0.0 (2020-11-13) + + +#### Bug Fixes + +* **igx-ts:** update build-angular ([082869c](https://github.com/IgniteUI/igniteui-cli/commit/082869cf27b52cb26695b6f90f4980ea85e67574)) + + + +# 7.0.0-rc.2 (2020-11-12) + + +#### Bug Fixes + +* **igx-ts:** crm grid with new toolbar ([a387742](https://github.com/IgniteUI/igniteui-cli/commit/a387742493b73f2c2f5e2cbacaf1bbe5a4d9345f)) +* **igx-ts:** fix toolbar according to latest changes ([93323c8](https://github.com/IgniteUI/igniteui-cli/commit/93323c81a3e388ae46e1dabcca13261312f92ade)) +* **igx-ts:** fix toolbar for grid fintech ([edc2057](https://github.com/IgniteUI/igniteui-cli/commit/edc20571657d5177c7a82ccae32d86f430970185)) +* **igx-ts:** tree-grid toolbar update ([2c985d7](https://github.com/IgniteUI/igniteui-cli/commit/2c985d78902d90439cbef733e6252f8c1eae37e3)) +* **igx-ts:** update HGrid Batch demo ([890a02d](https://github.com/IgniteUI/igniteui-cli/commit/890a02d54be89358aff76f9b07b3d8630df4f79c)) + + + +## 6.2.1 (2020-11-11) + + +#### Bug Fixes + +* **igx, side-auth:** add SSR-friendly local storage service ([8db27be](https://github.com/IgniteUI/igniteui-cli/commit/8db27be4739d396bbd34c389d9227aabdd01b970)) +* **igx,side-auth:** add proper wrapper class so layout is 100% ([508df9d](https://github.com/IgniteUI/igniteui-cli/commit/508df9d2255ec1a908ecd4054a841360c1827933)) + + + +# 7.0.0-rc.1 (2020-11-10) + + +#### Bug Fixes + +* **igx-ts:** fix package.json for auth project ([00b9cd9](https://github.com/IgniteUI/igniteui-cli/commit/00b9cd942ec154c76da1ac0e810e366cf373b64f)) +* **igx-ts:** remove base.json for auth project ([019535b](https://github.com/IgniteUI/igniteui-cli/commit/019535be27bac30b065b27a6facde53578a08456)) +* **igx-ts:** revert deleted packages ([acede53](https://github.com/IgniteUI/igniteui-cli/commit/acede5371f24b10be2314de0118ff1976cfb8c35)) + + + +# 7.0.0-rc.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** remove unnecessary quotes ([cd9c16c](https://github.com/IgniteUI/igniteui-cli/commit/cd9c16cea9f4d120e7b6e0dd9112e907c5f2228b)) + + + +# 7.0.0-alpha.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** Use correct module name in app.module import [#792](https://github.com/IgniteUI/igniteui-cli/issues/792) ([53691b5](https://github.com/IgniteUI/igniteui-cli/commit/53691b54af896c410a0b2b0c3e91751f76341dbd)) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + +#### Bug Fixes + +* **templates, crm grid, grid batch editing:** Fixing issues in the two templates. ([2dc2859](https://github.com/IgniteUI/igniteui-cli/commit/2dc2859dd10f41f9b0b8a05072fa6d12de5c9c00)) +* **templates, crm-grid, grid batchediting:** Addressing the comments. ([09955ea](https://github.com/IgniteUI/igniteui-cli/commit/09955ea47cbe58546a6d117611a705c86c058b6e)) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **deployment:** Fix environment check 793 ([3f3946a](https://github.com/IgniteUI/igniteui-cli/commit/3f3946a474840d38a763149230d743b3e845bf47)) +* update map to 10.1.3 ([3926b77](https://github.com/IgniteUI/igniteui-cli/commit/3926b77d575e2051b210232be2b8b1f76b681fab)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* Adding a Map template for Angular ([7cbddeb](https://github.com/IgniteUI/igniteui-cli/commit/7cbddeb907db8277f6db43db47f19f06591a7c7f)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) +* **packages:** remove deprecated option [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([602111e](https://github.com/IgniteUI/igniteui-cli/commit/602111eefdcf390e832275c428e86f9ef5aa547f)) +* **packages:** Update igx-ts projects [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([71df154](https://github.com/IgniteUI/igniteui-cli/commit/71df1546f4765699bf0600ef07062cad85b69d99)) + + + +# 5.2.0 (2020-06-11) + + +#### Features + +* **igx-ts:** add Dock Manager template for Angular ([#763](https://github.com/IgniteUI/igniteui-cli/issues/763)) ([63acfdf](https://github.com/IgniteUI/igniteui-cli/commit/63acfdf6b9c511c0c8be18374f470ee8a0ca375c)) +* **igx,side-nav:** move content padding so views can override ([36f9964](https://github.com/IgniteUI/igniteui-cli/commit/36f9964bbe2d21920f99f5815f346ec117a61724)) + + + +## 5.1.1 (2020-06-03) + + +#### Bug Fixes + +* **igx,upgrade:** ignore projects without sourceRoot ([6d64d30](https://github.com/IgniteUI/igniteui-cli/commit/6d64d30efa3aedcfd7d32eb9e7e1c29c90c7ea6e)) +* **upgrade:** Logging a message that licensed package is already installed ([63df30d](https://github.com/IgniteUI/igniteui-cli/commit/63df30d67c7d46fed0b6e4411e5b097dcd7f11f2)) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **igx,templates:** correct empty project template id ([2d0b385](https://github.com/IgniteUI/igniteui-cli/commit/2d0b385a4ce3f8483e4f5f048bc94111ecb7db31)) +* **templates:** fix upgrade to get correct config ([a3021ef](https://github.com/IgniteUI/igniteui-cli/commit/a3021efc9baac77348a6e91a53f7b8b214fdb719)) +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) +* **upgrade:** sort packages.json dependencies when adding licensed package ([62bb652](https://github.com/IgniteUI/igniteui-cli/commit/62bb652857e8e8cd6e368ef71ac2bf4ef8ea6749)) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **upgrade:** handle multiple licensed packages, [#741](https://github.com/IgniteUI/igniteui-cli/issues/741) ([ef02f5b](https://github.com/IgniteUI/igniteui-cli/commit/ef02f5b089d3616bbb24ba4ba8e2f0a4c7045374)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + +#### Features + +* **igx,multi-pacakge:** templates resolve lib package from project ([7bb4670](https://github.com/IgniteUI/igniteui-cli/commit/7bb4670e1f7832321c3373e07c967d3d13d83777)) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **carousel:** Add noop animations module ([c696124](https://github.com/IgniteUI/igniteui-cli/commit/c6961249ccbfe186e1f369b23420584b908b5787)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Bug Fixes + +* **igx-ts:** change tsconfig module for spec files to avoid errors, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([3d6b987](https://github.com/IgniteUI/igniteui-cli/commit/3d6b987e4e2c72a9b73453af112465b7234aa9c3)) +* **igx-ts:** update auth providers tests, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([4c15c8b](https://github.com/IgniteUI/igniteui-cli/commit/4c15c8bc00ffd5543e676ce07ea4718ea234b62b)) +* **templates, igx:** add chart packages [#679](https://github.com/IgniteUI/igniteui-cli/issues/679) ([75f4dcd](https://github.com/IgniteUI/igniteui-cli/commit/75f4dcd3bf585d38b3f86ef85cfecc6b8ddcfabc)) +* **templates, igx:** add chart packages [#684](https://github.com/IgniteUI/igniteui-cli/issues/684) ([dd7bfb7](https://github.com/IgniteUI/igniteui-cli/commit/dd7bfb75923ebe4d644239774899c26cf6bf7564)) + + +#### Features + +* **igx-ts:** Update projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([e0a738a](https://github.com/IgniteUI/igniteui-cli/commit/e0a738aea9b0345386fb2611bc28168ca99390f0)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* **ig-add:** only take into account 'extraConfig' in generateConfig [#618](https://github.com/IgniteUI/igniteui-cli/issues/618) ([#621](https://github.com/IgniteUI/igniteui-cli/issues/621)) ([d8d7db8](https://github.com/IgniteUI/igniteui-cli/commit/d8d7db823f1c6c717063ce678695be4d8db084d6)) +* **igx-ts:** update scenario templates [#628](https://github.com/IgniteUI/igniteui-cli/issues/628) ([#643](https://github.com/IgniteUI/igniteui-cli/issues/643)) ([ecda4d7](https://github.com/IgniteUI/igniteui-cli/commit/ecda4d779d3a196c16c13f87e2787ff7fdcbc167)) +* **templates:** update angular charts packages to v8.2.12 ([3ed3013](https://github.com/IgniteUI/igniteui-cli/commit/3ed301379a765d4ad0614e1d51cd5dec2227494d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **igx-templates:** fix side-auth template tsconfig.app.json, [#597](https://github.com/IgniteUI/igniteui-cli/issues/597) ([1ffe4ba](https://github.com/IgniteUI/igniteui-cli/commit/1ffe4ba77b30c4eaab2a176ec30470cf32cf7980)) +* **igx-ts:** update autocomplete templates to import FormsModule [#581](https://github.com/IgniteUI/igniteui-cli/issues/581) ([#584](https://github.com/IgniteUI/igniteui-cli/issues/584)) ([b91a1e8](https://github.com/IgniteUI/igniteui-cli/commit/b91a1e8efe1c3e78482abff524b69c48e64f9094)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) + +## igniteui/angular-schematics@21.1.14100-alpha.2 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **schematics:** fs writeFile create check ([#1526](https://github.com/IgniteUI/igniteui-cli/issues/1526)) ([f8e4b59](https://github.com/IgniteUI/igniteui-cli/commit/f8e4b59bd951ff1b702f3d24cf61ebc33115dc89)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + +#### Bug Fixes + +* include js files in ng-schematics/scripts w/ newer npm version ([727f2f6](https://github.com/IgniteUI/igniteui-cli/commit/727f2f670d303ddb585b78d68a2c42f907a4786f)) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.1 (2022-07-15) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +## 8.0.4 (2021-08-02) + + +#### Bug Fixes + +* **schematics:** resolve schema id deprecation warning ([#870](https://github.com/IgniteUI/igniteui-cli/issues/870)) ([17d7016](https://github.com/IgniteUI/igniteui-cli/commit/17d70164de93a5162ba4a02b44b571de318a37c7)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **schematics:** include upgrade-packages schema ([77aa13d](https://github.com/IgniteUI/igniteui-cli/commit/77aa13db7442b24d787029af4d6a860a0bd85d3b)) +* **schematics:** remove log for unsupported custom templates ([97e3bb3](https://github.com/IgniteUI/igniteui-cli/commit/97e3bb3813cf25603a97177a5ec5d87b2db94206)) +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **schematics:** ensure component prompt installs packages [#695](https://github.com/IgniteUI/igniteui-cli/issues/695) ([16e55d4](https://github.com/IgniteUI/igniteui-cli/commit/16e55d446c3d18fddb7ec7040a266ef498d83060)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) +* prompt for template and theme if no name provided [#622](https://github.com/IgniteUI/igniteui-cli/issues/622) ([#626](https://github.com/IgniteUI/igniteui-cli/issues/626)) ([44621e9](https://github.com/IgniteUI/igniteui-cli/commit/44621e9040f29da4819e6758e8316e6c7048e38d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) +* **new, schematics:** no prompts when "name" is provided [#595](https://github.com/IgniteUI/igniteui-cli/issues/595) ([#609](https://github.com/IgniteUI/igniteui-cli/issues/609)) ([0ed45ba](https://github.com/IgniteUI/igniteui-cli/commit/0ed45ba0ed2147a0255d5df2a44e82b665c90c99)) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) +* **schematics:** skip start task if skipInstall === true ([#603](https://github.com/IgniteUI/igniteui-cli/issues/603)) ([fc38d65](https://github.com/IgniteUI/igniteui-cli/commit/fc38d651ecfa47f95921fa72f7be5ff68d8b586e)) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **schematics:** use project config instead of hard-coded paths ([#592](https://github.com/IgniteUI/igniteui-cli/issues/592)) ([43240b6](https://github.com/IgniteUI/igniteui-cli/commit/43240b610d878186aa4b50959c37822e1f54eaf6)) + + +#### Features + +* **schematics:** add prompt session to component schematic, [#566](https://github.com/IgniteUI/igniteui-cli/issues/566) ([#571](https://github.com/IgniteUI/igniteui-cli/issues/571)) ([e25c1ce](https://github.com/IgniteUI/igniteui-cli/commit/e25c1ceab6fbff58a89e8712d3eda31da7c1af65)) +* **schematics:** adding ng-new schematic missing options [#596](https://github.com/IgniteUI/igniteui-cli/issues/596) ([#598](https://github.com/IgniteUI/igniteui-cli/issues/598)) ([8b51541](https://github.com/IgniteUI/igniteui-cli/commit/8b5154133bfe3fc6ef1c9958879cd835e36b001e)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Bug Fixes + +* rename gitignore manually ([beb06a9](https://github.com/IgniteUI/igniteui-cli/commit/beb06a9de2511654797d75737a2e0bd5da968d8c)) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) +* **schematics:** add start schematic, enable npm and git init tasks ([2a329b1](https://github.com/IgniteUI/igniteui-cli/commit/2a329b18c5e2d6d0f852a72c842c3bab4022a9f2)) + +## igniteui-cli@14.10.0-alpha.2 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **commands,list:** do not use `this` in handler ([#1494](https://github.com/IgniteUI/igniteui-cli/issues/1494)) ([b8f5b53](https://github.com/IgniteUI/igniteui-cli/commit/b8f5b53599cb20374acee53195395213060b51d3)) +* **react:** remove setupTests and update test with it's logic ([#1489](https://github.com/IgniteUI/igniteui-cli/issues/1489)) ([bd1f0ba](https://github.com/IgniteUI/igniteui-cli/commit/bd1f0ba0bccfd6768ccae44ab10568be5ecb1828)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + +#### Bug Fixes + +* add vitest/browser package ([e283ed2](https://github.com/IgniteUI/igniteui-cli/commit/e283ed29b99d794bd67f3bcab7a9dbfd391045ec)) +* add vitest/browser package ([5c29f50](https://github.com/IgniteUI/igniteui-cli/commit/5c29f5054febc0d656732886d08237528d6f6e40)) + + + +## 14.8.2-beta.2 (2026-01-12) + + +#### Bug Fixes + +* add playwright to the yaml files for wc ([6432111](https://github.com/IgniteUI/igniteui-cli/commit/643211110ad858f84b9ed23b3602f80218f23cbd)) +* resolve missed merge conflict ([ba42d4f](https://github.com/IgniteUI/igniteui-cli/commit/ba42d4f378a3e8334f51381ac1ff85799134ce3e)) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + +#### Features + +* update tests to use Playwright ([517ea99](https://github.com/IgniteUI/igniteui-cli/commit/517ea9901372d7a42b516f5e9114a82880038e7e)) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + +#### Features + +* **react:** add playwright and adjust tests; update packages; ([#1430](https://github.com/IgniteUI/igniteui-cli/issues/1430)) ([32b41dc](https://github.com/IgniteUI/igniteui-cli/commit/32b41dcf3f53de76fbafce39a36a1e8d51876b93)) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Add missing igniteui-react-core dependency to React grid templates ([fb429bb](https://github.com/IgniteUI/igniteui-cli/commit/fb429bbd3634e0cf86a617672f857be4bb8b2f0d)) +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* set default route ([#1422](https://github.com/IgniteUI/igniteui-cli/issues/1422)) ([768d0d0](https://github.com/IgniteUI/igniteui-cli/commit/768d0d0a2873d2efc81c426ce35b5e42e92508a9)) +* update react templates ([93d132f](https://github.com/IgniteUI/igniteui-cli/commit/93d132fa229f0dba963cd5f21b89d5274e346910)) +* use only grid with defined columns ([faeb25a](https://github.com/IgniteUI/igniteui-cli/commit/faeb25a64effeba39e24dafe6e93e5a26a07c5bc)) + + +#### Features + +* Update Ignite UI product versions in template files ([964dda1](https://github.com/IgniteUI/igniteui-cli/commit/964dda13da00ca0c9d4bf1a42d6d98d2aa1d7b88)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **react:** add missing argument and fix incorrect types ([#1403](https://github.com/IgniteUI/igniteui-cli/issues/1403)) ([fb006b3](https://github.com/IgniteUI/igniteui-cli/commit/fb006b38e6b4f3a2e61326b018787f67bd32b640)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + +#### Bug Fixes + +* **wc:** add seperate update for single or double quotes ([79ed105](https://github.com/IgniteUI/igniteui-cli/commit/79ed105cd67baf99f15e327d5f9840c3103d8018)) +* **wc:** fix iteration ([83583db](https://github.com/IgniteUI/igniteui-cli/commit/83583dbae937824e1b1f4d3f8d1ce8cc8e5589ec)) +* **wc:** fix paths in web components workflow ([6ff5999](https://github.com/IgniteUI/igniteui-cli/commit/6ff5999b782af24f09c29d4c60befb32a84fc5e0)) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + +#### Features + +* increase maximum file size to cache in webComponents's vite configuration to 10 MB ([#1370](https://github.com/IgniteUI/igniteui-cli/issues/1370)) ([0a1385e](https://github.com/IgniteUI/igniteui-cli/commit/0a1385e5d1f98c8fcdf020d144f048b112b251d5)) + + + +## 14.3.9 (2025-01-23) + + +#### Features + +* enable silent mode in Vite configuration for improved build output ([#1369](https://github.com/IgniteUI/igniteui-cli/issues/1369)) ([7728300](https://github.com/IgniteUI/igniteui-cli/commit/7728300cbba7c5b15261ff2a82820432bd4b12b7)) + + + +## 14.3.8 (2025-01-23) + + +#### Features + +* replace rollup with vite configuration for wc ([#1364](https://github.com/IgniteUI/igniteui-cli/issues/1364)) ([024ee5f](https://github.com/IgniteUI/igniteui-cli/commit/024ee5f048427c5406013f1e4d051403ae255fca)) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + +#### Bug Fixes + +* **web-components:** add step in github pages workflow to fix navigation ([#1355](https://github.com/IgniteUI/igniteui-cli/issues/1355)) ([0ca7277](https://github.com/IgniteUI/igniteui-cli/commit/0ca7277be8eaf1218af8a47f1ed7f51273499737)) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + +#### Bug Fixes + +* **cli:** replace coveralls with coveralls-next ([#1336](https://github.com/IgniteUI/igniteui-cli/issues/1336)) ([4028e28](https://github.com/IgniteUI/igniteui-cli/commit/4028e28bc62da3f2232f79b60e26b9d13c93c8f9)) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + +#### Bug Fixes + +* **cli:** add fixes in react and wc templates ([#1326](https://github.com/IgniteUI/igniteui-cli/issues/1326)) ([0430547](https://github.com/IgniteUI/igniteui-cli/commit/0430547a733c98b76aa94499516934547049b117)) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + +#### Bug Fixes + +* **eslint:** turn off no-explicit-any rule for wc ([#1288](https://github.com/IgniteUI/igniteui-cli/issues/1288)) ([1ee5b0f](https://github.com/IgniteUI/igniteui-cli/commit/1ee5b0f4ecc97a93f60b95e1615bb2a75fce9238)) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Bug Fixes + +* **igr-ts:** add new lines in base app routes file ([#1284](https://github.com/IgniteUI/igniteui-cli/issues/1284)) ([92a14ef](https://github.com/IgniteUI/igniteui-cli/commit/92a14ef05f174bb5e5bc09978c986eb8f27e57e1)) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + +#### Bug Fixes + +* **react:** fix null type build error in main.tsx ([#1242](https://github.com/IgniteUI/igniteui-cli/issues/1242)) ([2d0b579](https://github.com/IgniteUI/igniteui-cli/commit/2d0b57999b6a22445c2e7ff494310f9e94c421ea)) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* **igr-ts:** lint ignore unused vars prefix; ts strict ([#1232](https://github.com/IgniteUI/igniteui-cli/issues/1232)) ([91e35b3](https://github.com/IgniteUI/igniteui-cli/commit/91e35b3eb060f079ff6e30bdead75af7d6b98add)) + + + +## 13.1.13-beta.4 (2024-04-04) + + + +## 13.1.13-beta.3 (2024-04-04) + + +#### Features + +* **react:** remove igniteui deps from package.json and bump versions ([841a19d](https://github.com/IgniteUI/igniteui-cli/commit/841a19d2779f4f156c48368b4fa7a20b1a181eb4)) +* **react:** turn off no-explicit-any in eslint ([ef50011](https://github.com/IgniteUI/igniteui-cli/commit/ef500113afe214e8e64dea926d6937c5e5f827df)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +# 13.2.0-beta.0 (2024-03-15) + + +#### Bug Fixes + +* add elements internal polyfill to base template ([c7d2396](https://github.com/IgniteUI/igniteui-cli/commit/c7d2396572a9cd77205b8727ed81089f460403e2)) +* **Imports:** Fixed class import path in .test.ts ([#1224](https://github.com/IgniteUI/igniteui-cli/issues/1224)) ([6b3a2ef](https://github.com/IgniteUI/igniteui-cli/commit/6b3a2effef4951f0fc59e5393186eb2e69f2972b)) +* **Lint:** Fixed styles typing in style-utils ([#1222](https://github.com/IgniteUI/igniteui-cli/issues/1222)) ([6ad842a](https://github.com/IgniteUI/igniteui-cli/commit/6ad842a2bc16d50c8b29ddbca5907b80e40fd798)) + + + +## 13.1.11 (2024-03-12) + + +#### Bug Fixes + +* **react:** add editorconfig and vite-env.d.ts ([555300c](https://github.com/IgniteUI/igniteui-cli/commit/555300c38df56246cb7cc08f6b25e8ae5fd316f0)) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + +#### Bug Fixes + +* **WebComponents:** Removing an unnecessary ` from package.json ([3420292](https://github.com/IgniteUI/igniteui-cli/commit/3420292eb5752eaf76cfee1e12927d8d2749b8be)) + + + +## 13.1.6 (2024-02-26) + + +#### Bug Fixes + +* **React:** Add styles to support dark themes [#29410](https://github.com/IgniteUI/igniteui-cli/issues/29410) ([#1205](https://github.com/IgniteUI/igniteui-cli/issues/1205)) ([a191348](https://github.com/IgniteUI/igniteui-cli/commit/a191348d07317cdaac43db7bd52ee3958784ae55)) + + + +## 13.1.5 (2024-01-31) + + +#### Features + +* add style-utils file to base project ([#1195](https://github.com/IgniteUI/igniteui-cli/issues/1195)) ([112f27d](https://github.com/IgniteUI/igniteui-cli/commit/112f27ddc49d9106a182c8c7768543aa1b913164)) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igr-ts:** add github workflows folder ([#1192](https://github.com/IgniteUI/igniteui-cli/issues/1192)) ([2369c55](https://github.com/IgniteUI/igniteui-cli/commit/2369c556b8f84ce6a575c73b617c7581cedf5c0f)) +* open browser on app start ([#1187](https://github.com/IgniteUI/igniteui-cli/issues/1187)) ([c4e1f5c](https://github.com/IgniteUI/igniteui-cli/commit/c4e1f5c8d65dd8729083377973a40450b4899d63)) + + +#### Features + +* **igc-ts:** bump the version to 4.7.0 and add new components ([#1189](https://github.com/IgniteUI/igniteui-cli/issues/1189)) ([e9dbfd7](https://github.com/IgniteUI/igniteui-cli/commit/e9dbfd7d6212f1b8535de6a142f6140e3848f6ef)) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + +#### Bug Fixes + +* memory allocation issue during build of webComponent app that uses igc-category-chart ([ee188bf](https://github.com/IgniteUI/igniteui-cli/commit/ee188bf4672b8ee96ac1b891cf8e334f44bb4929)) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Bug Fixes + +* **grid:** Adding missing packages to the grid template [#1109](https://github.com/IgniteUI/igniteui-cli/issues/1109) ([9c65afe](https://github.com/IgniteUI/igniteui-cli/commit/9c65afe228f182918c6e3f50e7cfec0466d7f7d2)) +* **web-components:** Adding packages in each template. ([674f55c](https://github.com/IgniteUI/igniteui-cli/commit/674f55c66bfa3308696cee3da1dd1d0e3ae64c0c)) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + +#### Bug Fixes + +* **wc:** changing the function call [#1110](https://github.com/IgniteUI/igniteui-cli/issues/1110) ([#1113](https://github.com/IgniteUI/igniteui-cli/issues/1113)) ([5e4d1db](https://github.com/IgniteUI/igniteui-cli/commit/5e4d1dbdeeaa498278a7669b08031c51bfa2f367)) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + +#### Features + +* add lint file for web components ([#1085](https://github.com/IgniteUI/igniteui-cli/issues/1085)) ([25498c0](https://github.com/IgniteUI/igniteui-cli/commit/25498c09b2bc4e5bc30c67c36008d97b342e3526)) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + +#### Features + +* **wc:** add npmrc to proj template ([#1079](https://github.com/IgniteUI/igniteui-cli/issues/1079)) ([af233e5](https://github.com/IgniteUI/igniteui-cli/commit/af233e53d72b615ce11e16a65ddf358645329ffb)) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta9 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.6 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + +#### Features + +* provide default options when adding a template ([#1070](https://github.com/IgniteUI/igniteui-cli/issues/1070)) ([73e5c2c](https://github.com/IgniteUI/igniteui-cli/commit/73e5c2c0cc62b81384d6b4928103adf5ccf16153)) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + +#### Bug Fixes + +* **webcomponents:** set background and color to body ([b41a8b6](https://github.com/IgniteUI/igniteui-cli/commit/b41a8b66834ed46206cb14aa8bff0d6e3b99ef18)) +* **webcomponents:** set correct fallback for background color ([#1065](https://github.com/IgniteUI/igniteui-cli/issues/1065)) ([a976831](https://github.com/IgniteUI/igniteui-cli/commit/a976831228c204b015bd49773af4b5fc9767873a)) +* **webcomponents:** update app-root markup ([c717c37](https://github.com/IgniteUI/igniteui-cli/commit/c717c370cae66218eb4a7d5daaf0137da8c12d23)) + + +#### Features + +* **wc:** add base template for Web Components [#988](https://github.com/IgniteUI/igniteui-cli/issues/988) ([#1058](https://github.com/IgniteUI/igniteui-cli/issues/1058)) ([7574ab2](https://github.com/IgniteUI/igniteui-cli/commit/7574ab2b0221687a6ace6f627ec55caa3945236f)) + + + +## 10.0.5 (2022-09-19) + + +#### Features + +* **wc:** add accordion, tab & date-time-editor templates ([#1055](https://github.com/IgniteUI/igniteui-cli/issues/1055)) ([f2a631f](https://github.com/IgniteUI/igniteui-cli/commit/f2a631fcd18f529172af8e038929bf7f542e71ff)) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **wc:** address comments ([e1f804d](https://github.com/IgniteUI/igniteui-cli/commit/e1f804deada9f5fdf628ba25e122278cb9118507)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) +* **wc:** add new 2.1.0 components ([526da0c](https://github.com/IgniteUI/igniteui-cli/commit/526da0ce167659c9cfd3b21caf21efdcbc47e18d)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + +#### Features + +* **wc:** adding empty view and refactor proj structure [#967](https://github.com/IgniteUI/igniteui-cli/issues/967) ([#979](https://github.com/IgniteUI/igniteui-cli/issues/979)) ([622a014](https://github.com/IgniteUI/igniteui-cli/commit/622a0143be1583cfb97d7b80cabbfe21e03c20eb)) +* **web-components:** use LitElement in the templates [#989](https://github.com/IgniteUI/igniteui-cli/issues/989) ([#1001](https://github.com/IgniteUI/igniteui-cli/issues/1001)) ([5d828bc](https://github.com/IgniteUI/igniteui-cli/commit/5d828bc6062e6971d82f588ebf59a6e489d87257)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.7 (2021-11-09) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **igr-es6:** Underscore dot ([a0ce582](https://github.com/IgniteUI/igniteui-cli/commit/a0ce582e112a31c2c59d5532791ef07ab988335b)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **custom-templates:** Refactor samples, ([1f50907](https://github.com/IgniteUI/igniteui-cli/commit/1f509070a9409c4100d3d9c6a5de2f443d04c556)) +* **ig-ts:** Free version path contains no /en ([e96c7f6](https://github.com/IgniteUI/igniteui-cli/commit/e96c7f673729a034eeb3d89f5adfe3061d6e9f0b)) +* **ig-ts:** Make use of all visible height ([ebfe5ed](https://github.com/IgniteUI/igniteui-cli/commit/ebfe5edada1fcd9d4f8e25f868f916ad2d862121)) +* **ig-ts:** Temp fix - add static FormsModule ([9341753](https://github.com/IgniteUI/igniteui-cli/commit/9341753ab6fed9597c6f30f9fb1383ad132282ab)) +* **ig-ts:** Update prod budgets ([4edd971](https://github.com/IgniteUI/igniteui-cli/commit/4edd97100f0ab2cdd7a00176992ca1da57de47ff)) +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) +* **lint:** Fix dum line lenght ([570accb](https://github.com/IgniteUI/igniteui-cli/commit/570accbaef8f74d01cecbeda0046edb1a8423ef1)) +* **lint:** Fix lint errors ([84394b9](https://github.com/IgniteUI/igniteui-cli/commit/84394b9c4c24ed9727c8719bd9e463cea09d482b)) +* **lint:** Fix lint errors. ([0477e7d](https://github.com/IgniteUI/igniteui-cli/commit/0477e7dd3d9b4731e1b3176316581d3e0339ca5e)) +* **templates:** Add file-saver package ([8c7a59d](https://github.com/IgniteUI/igniteui-cli/commit/8c7a59db381a32719cdadbf1534a387c90bb05d5)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **react-grid:** Add missing module [#791](https://github.com/IgniteUI/igniteui-cli/issues/791) ([#798](https://github.com/IgniteUI/igniteui-cli/issues/798)) ([68e2b81](https://github.com/IgniteUI/igniteui-cli/commit/68e2b81e297a5b4279f53e5bb9dff80126cc08b6)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Features + +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([73a5670](https://github.com/IgniteUI/igniteui-cli/commit/73a56703ff4f4f0cc23d1da3c65cb4fbe114c9b4)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **ig-ts:** correct grid features template variable [#702](https://github.com/IgniteUI/igniteui-cli/issues/702) ([3f09bd9](https://github.com/IgniteUI/igniteui-cli/commit/3f09bd9af64177162e4e450df2148e1b13b2f87f)) +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Features + +* **ix-ts:** Update ig-ts projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([a6204d8](https://github.com/IgniteUI/igniteui-cli/commit/a6204d80f50e885459306276f3584fac0488460b)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) + + + +# 5.0.0-beta.2 (2019-12-06) + + + +# 5.0.0-beta.1 (2019-11-28) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +# 14.10.0-alpha.1 + +## igniteui/cli-core@14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **lint:** re-enable no-console rule ([3ffa07f](https://github.com/IgniteUI/igniteui-cli/commit/3ffa07ff8812e93dd358b38332f3abc2ea955af2)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **packages:** disable non-functional registry login attempt on upgrade ([#1528](https://github.com/IgniteUI/igniteui-cli/issues/1528)) ([1008a1e](https://github.com/IgniteUI/igniteui-cli/commit/1008a1e3fadb20553f464162d69a5bb2393d615b)) +* **packages:** login command for node@24+ spawn change ([cbb6502](https://github.com/IgniteUI/igniteui-cli/commit/cbb6502e90cfeaa7a87885748aa4b337c37c0b2f)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + +#### Bug Fixes + +* **react:** enhance upgrade-packages to support workspace glob patterns for projects without explicit workspaces ([#1424](https://github.com/IgniteUI/igniteui-cli/issues/1424)) ([6eeee2f](https://github.com/IgniteUI/igniteui-cli/commit/6eeee2ff879902197f012e83eb6064a72a4c438e)) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* **wc:** enhance upgrade-packages to support workspace glob patterns and vite.config.ts files ([#1408](https://github.com/IgniteUI/igniteui-cli/issues/1408)) ([bcd62be](https://github.com/IgniteUI/igniteui-cli/commit/bcd62be52107bcbdab6d207866fe7ffb99883b6d)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + +#### Features + +* **React:** Update react html files with licensed packages when upgrading packages ([#1395](https://github.com/IgniteUI/igniteui-cli/issues/1395)) ([7a7c4f0](https://github.com/IgniteUI/igniteui-cli/commit/7a7c4f0b5b74acc67e7524e643ee2a102ededb46)) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + +#### Bug Fixes + +* **WC:** update themes import paths to licensed version ([#1387](https://github.com/IgniteUI/igniteui-cli/issues/1387)) ([260068b](https://github.com/IgniteUI/igniteui-cli/commit/260068b9c9e3f4e895717ca6003f6ba0aded5cf2)) + + + +## 14.3.16 (2025-03-31) + + +#### Bug Fixes + +* **workflows:** Do not throw error if github workflows directory does not exist when updating ([#1383](https://github.com/IgniteUI/igniteui-cli/issues/1383)) ([acc771a](https://github.com/IgniteUI/igniteui-cli/commit/acc771afac962166f630c36beff428aa83af97de)) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + +#### Features + +* **core:** add FormattingService ([f7ea2a4](https://github.com/IgniteUI/igniteui-cli/commit/f7ea2a4d8f57b5f1edb531df76d05c541df754e1)) +* **core:** add new types ([aa636a3](https://github.com/IgniteUI/igniteui-cli/commit/aa636a3b1642da1a57758d49e0f7f6f79c7e2d01)) +* **core:** add TypeScriptASTTransformer ([9854847](https://github.com/IgniteUI/igniteui-cli/commit/9854847e32c718d82013e1fc8b58d9b06700b819)) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **kebacase:** do not add dash before numbers ([25d8f54](https://github.com/IgniteUI/igniteui-cli/commit/25d8f544243f6e1f5583c772f4b8e0e3cbb7ca12)) +* **kebap-case:** add dash between number and uppercase letter ([0be7637](https://github.com/IgniteUI/igniteui-cli/commit/0be7637bc19423821e066a9e62dbdec3e5bd5cb4)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + +#### Bug Fixes + +* update Utils.LowerDashed function ([#1171](https://github.com/IgniteUI/igniteui-cli/issues/1171)) ([2254ecc](https://github.com/IgniteUI/igniteui-cli/commit/2254ecc0267be8c19e7f1d5295886b2ba6c345c7)) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + +#### Bug Fixes + +* **package-manager:** skip setting up child install tasks for new projects ([de2a134](https://github.com/IgniteUI/igniteui-cli/commit/de2a1341e13ba20635a5ed94c5cc7e4c79c7ca46)) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **import:** Update func signature ([a3ac17a](https://github.com/IgniteUI/igniteui-cli/commit/a3ac17ab30436ed0420c92902c53ff7c3dfd0534)) +* **lint:** Fix lint errors ([6b5dd98](https://github.com/IgniteUI/igniteui-cli/commit/6b5dd985e90fb9cf8675c6cf0c06c6193e27fb32)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **ts-transform:** respect quote type from editorconfig ([99b3aad](https://github.com/IgniteUI/igniteui-cli/commit/99b3aadce0e6e7de8e2fef502db2ff1811d7a11e)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + +#### Features + +* **tsutil:** add optional parent route to TsFileUpdateUtil.addRoute method ([#777](https://github.com/IgniteUI/igniteui-cli/issues/777)) ([2df694a](https://github.com/IgniteUI/igniteui-cli/commit/2df694ac03a4601059f730b6cc9ae7d3ab6371ea)) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* remove angular as default choice for step by step [#579](https://github.com/IgniteUI/igniteui-cli/issues/579) ([5d2697e](https://github.com/IgniteUI/igniteui-cli/commit/5d2697e019d344cc5ebedf9ac00de94b012ded73)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + +#### Bug Fixes + +* **package-manager:** manually update pckgJSON instead of letting npm do it, [#751](https://github.com/IgniteUI/igniteui-cli/issues/751) ([6fa4c0c](https://github.com/IgniteUI/igniteui-cli/commit/6fa4c0c8d5afecfef8a8c1de18b1f6620edc006c)) + + + +# 5.1.0-beta.3 (2020-05-29) + + +#### Bug Fixes + +* **upgrade:** clear stdin stream before login prompt ([c77f49a](https://github.com/IgniteUI/igniteui-cli/commit/c77f49ab940933e9df6da2518d5192d5d49fbd0c)) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + +## igniteui/angular-templates@21.1.14100-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* **igx-ts:** update angular project to use vitest with playwright ([#1542](https://github.com/IgniteUI/igniteui-cli/issues/1542)) ([85dd3e6](https://github.com/IgniteUI/igniteui-cli/commit/85dd3e609295d7d801c127715c5fe8947f90f23d)) +* **igx-ts:** update project setup and templates naming ([#1514](https://github.com/IgniteUI/igniteui-cli/issues/1514)) ([ed4d1dd](https://github.com/IgniteUI/igniteui-cli/commit/ed4d1ddced09cee062caae7f8445df5ba11d8cac)) +* **mcp:** add angular-cli server configuration to mcp.json ([43a01a0](https://github.com/IgniteUI/igniteui-cli/commit/43a01a08ca6ac9b9a7958a172e5f27b02fe1fbb1)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts-legacy:** fi grid type import and add missing override ([ff24df0](https://github.com/IgniteUI/igniteui-cli/commit/ff24df0e665d8c834f510bfc62fc99af6532a38e)) +* **igx-ts:** fix eslint configurations ([#1509](https://github.com/IgniteUI/igniteui-cli/issues/1509)) ([ec63959](https://github.com/IgniteUI/igniteui-cli/commit/ec63959ee65e5c369d483d5dc34965f121a36cae)) +* **igx-ts:** fix side nav route data text ([487ba12](https://github.com/IgniteUI/igniteui-cli/commit/487ba122c2d51822642d15f501ea776193bf6a44)) +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **angular:** add igniteui angular core override ([0a5d46f](https://github.com/IgniteUI/igniteui-cli/commit/0a5d46f73bd3d621a833d07ad09318ccbdcfb9b9)) +* **angular:** add missing providers ([804703e](https://github.com/IgniteUI/igniteui-cli/commit/804703e984919aa2fac6272f8058f94256460b73)) +* **angular:** empty template config ([75eef02](https://github.com/IgniteUI/igniteui-cli/commit/75eef022a33f0dc6bc5b90816ccee9c415d76289)) +* update imports ([a2bf7bf](https://github.com/IgniteUI/igniteui-cli/commit/a2bf7bf6fc973ba0af8d12dc1c33605419475891)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + +#### Bug Fixes + +* **angular:** fix the type of the providers ([142dbda](https://github.com/IgniteUI/igniteui-cli/commit/142dbda9665430bb3fb5a97744e8913195975708)) + + + +## 14.8.5-beta.0 (2026-02-10) + + +#### Bug Fixes + +* **angular:** add provide zone change detection in app config for angular standalone ([27b516b](https://github.com/IgniteUI/igniteui-cli/commit/27b516b640b1ecf9fdb7320e6a5c84a398aab505)) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* add same fix to legacy angular projects ([2456829](https://github.com/IgniteUI/igniteui-cli/commit/245682908c81c931b65707b5098a98e3991f6f71)) +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) +* move tearDown to chart related test files ([40b1739](https://github.com/IgniteUI/igniteui-cli/commit/40b1739734199b035c32b02937456c9ae444654a)) +* remove calls to test.ts ([c08ca9f](https://github.com/IgniteUI/igniteui-cli/commit/c08ca9fcd472488a125c2f073bd06e051a5f3314)) +* remove test.ts as not needed ([451d49a](https://github.com/IgniteUI/igniteui-cli/commit/451d49ab3c6b7652b29b062e1e3a9301f2497a0f)) + + + +## 14.8.3 (2026-01-19) + + +#### Bug Fixes + +* **angular:** remove glob and rimraf from standalone package json ([#1478](https://github.com/IgniteUI/igniteui-cli/issues/1478)) ([0a3afce](https://github.com/IgniteUI/igniteui-cli/commit/0a3afce21e6e14196c8942f9f15a56793e1679fa)) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + +#### Bug Fixes + +* **ng:** move eqeqeq rule ([#1433](https://github.com/IgniteUI/igniteui-cli/issues/1433)) ([29a574d](https://github.com/IgniteUI/igniteui-cli/commit/29a574db2af16adff262440d789c58216ba08a8e)) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + +#### Bug Fixes + +* **angular:** fix eslint config for angular modules ([#1423](https://github.com/IgniteUI/igniteui-cli/issues/1423)) ([2420d26](https://github.com/IgniteUI/igniteui-cli/commit/2420d26511cffef06cad58fa7e67a61a6b885187)) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* **ng, standalone:** add test setup file for angular standalone ([#1421](https://github.com/IgniteUI/igniteui-cli/issues/1421)) ([feebb55](https://github.com/IgniteUI/igniteui-cli/commit/feebb5574cfffe86f6f2b342c2643b3ef9651a3c)) + + + +## 14.5.4 (2025-07-01) + + +#### Bug Fixes + +* **ng:** Add same proj rxjs version in overrides, so there are no peer dep errors for it. It is needed when having reveal or other overrides. ([4728d19](https://github.com/IgniteUI/igniteui-cli/commit/4728d19e7658cf5c4d863a6c277be696f77e5ac5)) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **angular:** fix theme errors ([#1404](https://github.com/IgniteUI/igniteui-cli/issues/1404)) ([3e7e4a3](https://github.com/IgniteUI/igniteui-cli/commit/3e7e4a3777bde5cc025df182bb57e5b9f002c5d9)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* **angular:** add ovverides for reveal sdk wrappers ([d2bc8cb](https://github.com/IgniteUI/igniteui-cli/commit/d2bc8cb26584f5836d633d24421d6dc774bd53a5)) +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Bug Fixes + +* adapt ngModules templates to 19 changes ([2ce6e9d](https://github.com/IgniteUI/igniteui-cli/commit/2ce6e9d38acef0f0e8981ef054f61ab35d137fd8)) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + + +## 13.4.1 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +# 13.4.0 (2024-07-22) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + +#### Features + +* **ng-sa-base:** add vscode template folder ([a4787e7](https://github.com/IgniteUI/igniteui-cli/commit/a4787e74fcc715aceaa4c265fd97e4452e70463e)) +* **ngm-base:** add vscode template folder ([0ed6fb8](https://github.com/IgniteUI/igniteui-cli/commit/0ed6fb8cf8ef75103c84e8ee2ddeaa2886be3922)) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* fix yml script placeholder delimiters ([#1239](https://github.com/IgniteUI/igniteui-cli/issues/1239)) ([45a2264](https://github.com/IgniteUI/igniteui-cli/commit/45a2264a93edc5b0ca307d5ec43fcd6a9de42cea)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **_base-legacy:** update project type to legacy ([f8984c9](https://github.com/IgniteUI/igniteui-cli/commit/f8984c93f02e8391ca721bc49eeabd45e5f7bb34)) +* **_base:** provide http client ([1e1d1c2](https://github.com/IgniteUI/igniteui-cli/commit/1e1d1c2d6c70a110ace81e74c91bcab2a7021086)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igx-ts:** update karma-jasmine-html-reporter ([0cf034d](https://github.com/IgniteUI/igniteui-cli/commit/0cf034db6474b8ed88e9b3d93e9b3011afd47b3b)) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **igx:** remove prod config for ng build ([d90c056](https://github.com/IgniteUI/igniteui-cli/commit/d90c056aed7ac87f972ea719eeac9367e6b97226)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** more fixes ([1373d18](https://github.com/IgniteUI/igniteui-cli/commit/1373d18e45d8fa9bb69bf5692b360bb4ecec531b)) +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +## 11.1.2 (2023-05-25) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + +#### Bug Fixes + +* **igx-ts:** updating dependencies [#1099](https://github.com/IgniteUI/igniteui-cli/issues/1099) ([#1102](https://github.com/IgniteUI/igniteui-cli/issues/1102)) ([cd3b35a](https://github.com/IgniteUI/igniteui-cli/commit/cd3b35ac7961474ecd4ecbb8c4dffa33067c20f1)) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + +#### Bug Fixes + +* **fintech grid:** fix slow grid [#1020](https://github.com/IgniteUI/igniteui-cli/issues/1020) ([4f888dc](https://github.com/IgniteUI/igniteui-cli/commit/4f888dc3c2b1fd6ad896b197634d3aa0c3ef57cd)) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **ng:** gridAPI rename ([5b8b0a5](https://github.com/IgniteUI/igniteui-cli/commit/5b8b0a5e5e21ce5ae2228e0d025eea0195206292)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + +#### Bug Fixes + +* **templates:** Adding override modifier. ([6334d17](https://github.com/IgniteUI/igniteui-cli/commit/6334d174642212d942c5f5669c1082ae56bb3cc8)) + + + +# 9.1.0-rc.0 (2022-02-24) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) +* **angular:** remove old code ([3b063db](https://github.com/IgniteUI/igniteui-cli/commit/3b063db9cf51509b289148f4928cdfda9837a6dd)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **schematics:** fix home import without placeholder ([#966](https://github.com/IgniteUI/igniteui-cli/issues/966)) ([9263bb2](https://github.com/IgniteUI/igniteui-cli/commit/9263bb22b6dd699845d3e6fad7ab78536f7a484c)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + +#### Bug Fixes + +* changes from latest rc, packages updates ([f59905f](https://github.com/IgniteUI/igniteui-cli/commit/f59905fbd0d37d536b2a13dd002cc99ce8c48165)) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) +* **angular:** new theme imports upgrade packages ([3ae74d9](https://github.com/IgniteUI/igniteui-cli/commit/3ae74d9bb9a338f939e9e5fb73c978003401c2a7)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + +#### Bug Fixes + +* remove icon color, becasue it is deprecated ([7b33804](https://github.com/IgniteUI/igniteui-cli/commit/7b338049a3182d7a8ea9e7106d10ef485dcc0623)) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +# 8.1.0-rc.0 (2021-07-30) + + +#### Bug Fixes + +* **igx-ts:** remove deprecated properties from scenario templates ([f84dc3c](https://github.com/IgniteUI/igniteui-cli/commit/f84dc3cd9626d5f287caed74cd32fda6849906e2)) + + + +# 8.1.0-beta.1 (2021-07-30) + + +#### Bug Fixes + +* **awesome-grid:** fix deprecated properties warnings ([f7a5b0c](https://github.com/IgniteUI/igniteui-cli/commit/f7a5b0c589c4b0aa8ded7c036859956d84c1ed23)) +* **fintech-grid:** fix console warnings and errors ([eaaf733](https://github.com/IgniteUI/igniteui-cli/commit/eaaf73311b45b9fc326353c8c6e6a1efe3f6f225)) +* **igx-ts:** Update angular.json ([c038c70](https://github.com/IgniteUI/igniteui-cli/commit/c038c708c5d2476e819071fd6c9defe29915b904)) +* **igx-ts:** use explicit index in drop-down components for logic view ([cb96f7d](https://github.com/IgniteUI/igniteui-cli/commit/cb96f7dcc2a5a4af2c585b22b50daa372f3684e9)) + + +#### Features + +* **igx-ts:** update custom grid templates w/ 12.1 paginator ([2b5058b](https://github.com/IgniteUI/igniteui-cli/commit/2b5058bd8c2f1946fd1f52b848a5b6ca9aebfcee)) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* **igx-templates:** add igx-accordion template ([#851](https://github.com/IgniteUI/igniteui-cli/issues/851)) ([03e74cd](https://github.com/IgniteUI/igniteui-cli/commit/03e74cd194184b629ea09ec3cfa5218943d0feef)) +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + +#### Bug Fixes + +* **igx-ts:** fix strict errors in base and side-nav projects ([963d23d](https://github.com/IgniteUI/igniteui-cli/commit/963d23dc9771d8d184bff89fe2e2782e3bd97219)) +* **igx-ts:** fix strict errors in side-nav-auth project ([695f430](https://github.com/IgniteUI/igniteui-cli/commit/695f430c693b4a4cb817784d4b20dc0c268ec80c)) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + +#### Bug Fixes + +* **angular-templates:** fix issue with strict templates in igx-ts ([38aaa75](https://github.com/IgniteUI/igniteui-cli/commit/38aaa756908493244414a51cc31688c27246b2f6)), closes [#850](https://github.com/IgniteUI/igniteui-cli/issues/850) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + +#### Bug Fixes + +* **fonts:** Fix icon font names and families ([35a702e](https://github.com/IgniteUI/igniteui-cli/commit/35a702ee21d4a780b9318de071246969af54fca7)) +* **template:** Fix and upadte awesome template ([f2b51aa](https://github.com/IgniteUI/igniteui-cli/commit/f2b51aa2685220b282ca8a25bb2580f44b960bcb)) +* **warnings:** Update icons for grids samples ([0efbbae](https://github.com/IgniteUI/igniteui-cli/commit/0efbbaecdcb3b6095c6ebc483729214f5e4753aa)) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + +#### Bug Fixes + +* **igx-templates:** provide service in tree sample, add some style ([b76452a](https://github.com/IgniteUI/igniteui-cli/commit/b76452a22d047a07d95c19fd3c720466065f178e)) +* remove strict checks and update open() method ([f2877e3](https://github.com/IgniteUI/igniteui-cli/commit/f2877e342746f85962d3f10125c6b784e53eb5d2)) + + +#### Features + +* **igx-templates:** add igx-tree template ([41bc6c3](https://github.com/IgniteUI/igniteui-cli/commit/41bc6c37b19c9136335347a468cdd5c8685a1f61)) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + +#### Bug Fixes + +* **toolbar:** Update hgrid & treegrid custom template toolbar ([c27af22](https://github.com/IgniteUI/igniteui-cli/commit/c27af22c413da93305a5c90c8a60a6dbac1a01e1)) + + + +## 7.0.1 (2020-11-16) + + +#### Bug Fixes + +* **igx-ts:** add local storage to spec ([3056a97](https://github.com/IgniteUI/igniteui-cli/commit/3056a97d99c492c04f2bbf19a7bd09c418294dbf)) +* **igx,custom-grid:** assign allowFiltering when selected as option ([7534c5f](https://github.com/IgniteUI/igniteui-cli/commit/7534c5f51736587b87217042b98c1be753cd76a8)) +* ssr breaks because of localStorage ref ([dc9410f](https://github.com/IgniteUI/igniteui-cli/commit/dc9410ff7c333bdece6ba25212f6c763afe64601)) + + + +# 7.0.0 (2020-11-13) + + +#### Bug Fixes + +* **igx-ts:** update build-angular ([082869c](https://github.com/IgniteUI/igniteui-cli/commit/082869cf27b52cb26695b6f90f4980ea85e67574)) + + + +# 7.0.0-rc.2 (2020-11-12) + + +#### Bug Fixes + +* **igx-ts:** crm grid with new toolbar ([a387742](https://github.com/IgniteUI/igniteui-cli/commit/a387742493b73f2c2f5e2cbacaf1bbe5a4d9345f)) +* **igx-ts:** fix toolbar according to latest changes ([93323c8](https://github.com/IgniteUI/igniteui-cli/commit/93323c81a3e388ae46e1dabcca13261312f92ade)) +* **igx-ts:** fix toolbar for grid fintech ([edc2057](https://github.com/IgniteUI/igniteui-cli/commit/edc20571657d5177c7a82ccae32d86f430970185)) +* **igx-ts:** tree-grid toolbar update ([2c985d7](https://github.com/IgniteUI/igniteui-cli/commit/2c985d78902d90439cbef733e6252f8c1eae37e3)) +* **igx-ts:** update HGrid Batch demo ([890a02d](https://github.com/IgniteUI/igniteui-cli/commit/890a02d54be89358aff76f9b07b3d8630df4f79c)) + + + +## 6.2.1 (2020-11-11) + + +#### Bug Fixes + +* **igx, side-auth:** add SSR-friendly local storage service ([8db27be](https://github.com/IgniteUI/igniteui-cli/commit/8db27be4739d396bbd34c389d9227aabdd01b970)) +* **igx,side-auth:** add proper wrapper class so layout is 100% ([508df9d](https://github.com/IgniteUI/igniteui-cli/commit/508df9d2255ec1a908ecd4054a841360c1827933)) + + + +# 7.0.0-rc.1 (2020-11-10) + + +#### Bug Fixes + +* **igx-ts:** fix package.json for auth project ([00b9cd9](https://github.com/IgniteUI/igniteui-cli/commit/00b9cd942ec154c76da1ac0e810e366cf373b64f)) +* **igx-ts:** remove base.json for auth project ([019535b](https://github.com/IgniteUI/igniteui-cli/commit/019535be27bac30b065b27a6facde53578a08456)) +* **igx-ts:** revert deleted packages ([acede53](https://github.com/IgniteUI/igniteui-cli/commit/acede5371f24b10be2314de0118ff1976cfb8c35)) + + + +# 7.0.0-rc.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** remove unnecessary quotes ([cd9c16c](https://github.com/IgniteUI/igniteui-cli/commit/cd9c16cea9f4d120e7b6e0dd9112e907c5f2228b)) + + + +# 7.0.0-alpha.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** Use correct module name in app.module import [#792](https://github.com/IgniteUI/igniteui-cli/issues/792) ([53691b5](https://github.com/IgniteUI/igniteui-cli/commit/53691b54af896c410a0b2b0c3e91751f76341dbd)) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + +#### Bug Fixes + +* **templates, crm grid, grid batch editing:** Fixing issues in the two templates. ([2dc2859](https://github.com/IgniteUI/igniteui-cli/commit/2dc2859dd10f41f9b0b8a05072fa6d12de5c9c00)) +* **templates, crm-grid, grid batchediting:** Addressing the comments. ([09955ea](https://github.com/IgniteUI/igniteui-cli/commit/09955ea47cbe58546a6d117611a705c86c058b6e)) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **deployment:** Fix environment check 793 ([3f3946a](https://github.com/IgniteUI/igniteui-cli/commit/3f3946a474840d38a763149230d743b3e845bf47)) +* update map to 10.1.3 ([3926b77](https://github.com/IgniteUI/igniteui-cli/commit/3926b77d575e2051b210232be2b8b1f76b681fab)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* Adding a Map template for Angular ([7cbddeb](https://github.com/IgniteUI/igniteui-cli/commit/7cbddeb907db8277f6db43db47f19f06591a7c7f)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) +* **packages:** remove deprecated option [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([602111e](https://github.com/IgniteUI/igniteui-cli/commit/602111eefdcf390e832275c428e86f9ef5aa547f)) +* **packages:** Update igx-ts projects [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([71df154](https://github.com/IgniteUI/igniteui-cli/commit/71df1546f4765699bf0600ef07062cad85b69d99)) + + + +# 5.2.0 (2020-06-11) + + +#### Features + +* **igx-ts:** add Dock Manager template for Angular ([#763](https://github.com/IgniteUI/igniteui-cli/issues/763)) ([63acfdf](https://github.com/IgniteUI/igniteui-cli/commit/63acfdf6b9c511c0c8be18374f470ee8a0ca375c)) +* **igx,side-nav:** move content padding so views can override ([36f9964](https://github.com/IgniteUI/igniteui-cli/commit/36f9964bbe2d21920f99f5815f346ec117a61724)) + + + +## 5.1.1 (2020-06-03) + + +#### Bug Fixes + +* **igx,upgrade:** ignore projects without sourceRoot ([6d64d30](https://github.com/IgniteUI/igniteui-cli/commit/6d64d30efa3aedcfd7d32eb9e7e1c29c90c7ea6e)) +* **upgrade:** Logging a message that licensed package is already installed ([63df30d](https://github.com/IgniteUI/igniteui-cli/commit/63df30d67c7d46fed0b6e4411e5b097dcd7f11f2)) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **igx,templates:** correct empty project template id ([2d0b385](https://github.com/IgniteUI/igniteui-cli/commit/2d0b385a4ce3f8483e4f5f048bc94111ecb7db31)) +* **templates:** fix upgrade to get correct config ([a3021ef](https://github.com/IgniteUI/igniteui-cli/commit/a3021efc9baac77348a6e91a53f7b8b214fdb719)) +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) +* **upgrade:** sort packages.json dependencies when adding licensed package ([62bb652](https://github.com/IgniteUI/igniteui-cli/commit/62bb652857e8e8cd6e368ef71ac2bf4ef8ea6749)) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **upgrade:** handle multiple licensed packages, [#741](https://github.com/IgniteUI/igniteui-cli/issues/741) ([ef02f5b](https://github.com/IgniteUI/igniteui-cli/commit/ef02f5b089d3616bbb24ba4ba8e2f0a4c7045374)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + +#### Features + +* **igx,multi-pacakge:** templates resolve lib package from project ([7bb4670](https://github.com/IgniteUI/igniteui-cli/commit/7bb4670e1f7832321c3373e07c967d3d13d83777)) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **carousel:** Add noop animations module ([c696124](https://github.com/IgniteUI/igniteui-cli/commit/c6961249ccbfe186e1f369b23420584b908b5787)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Bug Fixes + +* **igx-ts:** change tsconfig module for spec files to avoid errors, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([3d6b987](https://github.com/IgniteUI/igniteui-cli/commit/3d6b987e4e2c72a9b73453af112465b7234aa9c3)) +* **igx-ts:** update auth providers tests, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([4c15c8b](https://github.com/IgniteUI/igniteui-cli/commit/4c15c8bc00ffd5543e676ce07ea4718ea234b62b)) +* **templates, igx:** add chart packages [#679](https://github.com/IgniteUI/igniteui-cli/issues/679) ([75f4dcd](https://github.com/IgniteUI/igniteui-cli/commit/75f4dcd3bf585d38b3f86ef85cfecc6b8ddcfabc)) +* **templates, igx:** add chart packages [#684](https://github.com/IgniteUI/igniteui-cli/issues/684) ([dd7bfb7](https://github.com/IgniteUI/igniteui-cli/commit/dd7bfb75923ebe4d644239774899c26cf6bf7564)) + + +#### Features + +* **igx-ts:** Update projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([e0a738a](https://github.com/IgniteUI/igniteui-cli/commit/e0a738aea9b0345386fb2611bc28168ca99390f0)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* **ig-add:** only take into account 'extraConfig' in generateConfig [#618](https://github.com/IgniteUI/igniteui-cli/issues/618) ([#621](https://github.com/IgniteUI/igniteui-cli/issues/621)) ([d8d7db8](https://github.com/IgniteUI/igniteui-cli/commit/d8d7db823f1c6c717063ce678695be4d8db084d6)) +* **igx-ts:** update scenario templates [#628](https://github.com/IgniteUI/igniteui-cli/issues/628) ([#643](https://github.com/IgniteUI/igniteui-cli/issues/643)) ([ecda4d7](https://github.com/IgniteUI/igniteui-cli/commit/ecda4d779d3a196c16c13f87e2787ff7fdcbc167)) +* **templates:** update angular charts packages to v8.2.12 ([3ed3013](https://github.com/IgniteUI/igniteui-cli/commit/3ed301379a765d4ad0614e1d51cd5dec2227494d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **igx-templates:** fix side-auth template tsconfig.app.json, [#597](https://github.com/IgniteUI/igniteui-cli/issues/597) ([1ffe4ba](https://github.com/IgniteUI/igniteui-cli/commit/1ffe4ba77b30c4eaab2a176ec30470cf32cf7980)) +* **igx-ts:** update autocomplete templates to import FormsModule [#581](https://github.com/IgniteUI/igniteui-cli/issues/581) ([#584](https://github.com/IgniteUI/igniteui-cli/issues/584)) ([b91a1e8](https://github.com/IgniteUI/igniteui-cli/commit/b91a1e8efe1c3e78482abff524b69c48e64f9094)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) + +## igniteui/angular-schematics@21.1.14100-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **schematics:** fs writeFile create check ([#1526](https://github.com/IgniteUI/igniteui-cli/issues/1526)) ([f8e4b59](https://github.com/IgniteUI/igniteui-cli/commit/f8e4b59bd951ff1b702f3d24cf61ebc33115dc89)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + +#### Bug Fixes + +* include js files in ng-schematics/scripts w/ newer npm version ([727f2f6](https://github.com/IgniteUI/igniteui-cli/commit/727f2f670d303ddb585b78d68a2c42f907a4786f)) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.1 (2022-07-15) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +## 8.0.4 (2021-08-02) + + +#### Bug Fixes + +* **schematics:** resolve schema id deprecation warning ([#870](https://github.com/IgniteUI/igniteui-cli/issues/870)) ([17d7016](https://github.com/IgniteUI/igniteui-cli/commit/17d70164de93a5162ba4a02b44b571de318a37c7)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **schematics:** include upgrade-packages schema ([77aa13d](https://github.com/IgniteUI/igniteui-cli/commit/77aa13db7442b24d787029af4d6a860a0bd85d3b)) +* **schematics:** remove log for unsupported custom templates ([97e3bb3](https://github.com/IgniteUI/igniteui-cli/commit/97e3bb3813cf25603a97177a5ec5d87b2db94206)) +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **schematics:** ensure component prompt installs packages [#695](https://github.com/IgniteUI/igniteui-cli/issues/695) ([16e55d4](https://github.com/IgniteUI/igniteui-cli/commit/16e55d446c3d18fddb7ec7040a266ef498d83060)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) +* prompt for template and theme if no name provided [#622](https://github.com/IgniteUI/igniteui-cli/issues/622) ([#626](https://github.com/IgniteUI/igniteui-cli/issues/626)) ([44621e9](https://github.com/IgniteUI/igniteui-cli/commit/44621e9040f29da4819e6758e8316e6c7048e38d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) +* **new, schematics:** no prompts when "name" is provided [#595](https://github.com/IgniteUI/igniteui-cli/issues/595) ([#609](https://github.com/IgniteUI/igniteui-cli/issues/609)) ([0ed45ba](https://github.com/IgniteUI/igniteui-cli/commit/0ed45ba0ed2147a0255d5df2a44e82b665c90c99)) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) +* **schematics:** skip start task if skipInstall === true ([#603](https://github.com/IgniteUI/igniteui-cli/issues/603)) ([fc38d65](https://github.com/IgniteUI/igniteui-cli/commit/fc38d651ecfa47f95921fa72f7be5ff68d8b586e)) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **schematics:** use project config instead of hard-coded paths ([#592](https://github.com/IgniteUI/igniteui-cli/issues/592)) ([43240b6](https://github.com/IgniteUI/igniteui-cli/commit/43240b610d878186aa4b50959c37822e1f54eaf6)) + + +#### Features + +* **schematics:** add prompt session to component schematic, [#566](https://github.com/IgniteUI/igniteui-cli/issues/566) ([#571](https://github.com/IgniteUI/igniteui-cli/issues/571)) ([e25c1ce](https://github.com/IgniteUI/igniteui-cli/commit/e25c1ceab6fbff58a89e8712d3eda31da7c1af65)) +* **schematics:** adding ng-new schematic missing options [#596](https://github.com/IgniteUI/igniteui-cli/issues/596) ([#598](https://github.com/IgniteUI/igniteui-cli/issues/598)) ([8b51541](https://github.com/IgniteUI/igniteui-cli/commit/8b5154133bfe3fc6ef1c9958879cd835e36b001e)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Bug Fixes + +* rename gitignore manually ([beb06a9](https://github.com/IgniteUI/igniteui-cli/commit/beb06a9de2511654797d75737a2e0bd5da968d8c)) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) +* **schematics:** add start schematic, enable npm and git init tasks ([2a329b1](https://github.com/IgniteUI/igniteui-cli/commit/2a329b18c5e2d6d0f852a72c842c3bab4022a9f2)) + +## igniteui-cli@14.10.0-alpha.1 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **commands,list:** do not use `this` in handler ([#1494](https://github.com/IgniteUI/igniteui-cli/issues/1494)) ([b8f5b53](https://github.com/IgniteUI/igniteui-cli/commit/b8f5b53599cb20374acee53195395213060b51d3)) +* **react:** remove setupTests and update test with it's logic ([#1489](https://github.com/IgniteUI/igniteui-cli/issues/1489)) ([bd1f0ba](https://github.com/IgniteUI/igniteui-cli/commit/bd1f0ba0bccfd6768ccae44ab10568be5ecb1828)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + +#### Bug Fixes + +* add vitest/browser package ([e283ed2](https://github.com/IgniteUI/igniteui-cli/commit/e283ed29b99d794bd67f3bcab7a9dbfd391045ec)) +* add vitest/browser package ([5c29f50](https://github.com/IgniteUI/igniteui-cli/commit/5c29f5054febc0d656732886d08237528d6f6e40)) + + + +## 14.8.2-beta.2 (2026-01-12) + + +#### Bug Fixes + +* add playwright to the yaml files for wc ([6432111](https://github.com/IgniteUI/igniteui-cli/commit/643211110ad858f84b9ed23b3602f80218f23cbd)) +* resolve missed merge conflict ([ba42d4f](https://github.com/IgniteUI/igniteui-cli/commit/ba42d4f378a3e8334f51381ac1ff85799134ce3e)) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + +#### Features + +* update tests to use Playwright ([517ea99](https://github.com/IgniteUI/igniteui-cli/commit/517ea9901372d7a42b516f5e9114a82880038e7e)) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + +#### Features + +* **react:** add playwright and adjust tests; update packages; ([#1430](https://github.com/IgniteUI/igniteui-cli/issues/1430)) ([32b41dc](https://github.com/IgniteUI/igniteui-cli/commit/32b41dcf3f53de76fbafce39a36a1e8d51876b93)) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Add missing igniteui-react-core dependency to React grid templates ([fb429bb](https://github.com/IgniteUI/igniteui-cli/commit/fb429bbd3634e0cf86a617672f857be4bb8b2f0d)) +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* set default route ([#1422](https://github.com/IgniteUI/igniteui-cli/issues/1422)) ([768d0d0](https://github.com/IgniteUI/igniteui-cli/commit/768d0d0a2873d2efc81c426ce35b5e42e92508a9)) +* update react templates ([93d132f](https://github.com/IgniteUI/igniteui-cli/commit/93d132fa229f0dba963cd5f21b89d5274e346910)) +* use only grid with defined columns ([faeb25a](https://github.com/IgniteUI/igniteui-cli/commit/faeb25a64effeba39e24dafe6e93e5a26a07c5bc)) + + +#### Features + +* Update Ignite UI product versions in template files ([964dda1](https://github.com/IgniteUI/igniteui-cli/commit/964dda13da00ca0c9d4bf1a42d6d98d2aa1d7b88)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **react:** add missing argument and fix incorrect types ([#1403](https://github.com/IgniteUI/igniteui-cli/issues/1403)) ([fb006b3](https://github.com/IgniteUI/igniteui-cli/commit/fb006b38e6b4f3a2e61326b018787f67bd32b640)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + +#### Bug Fixes + +* **wc:** add seperate update for single or double quotes ([79ed105](https://github.com/IgniteUI/igniteui-cli/commit/79ed105cd67baf99f15e327d5f9840c3103d8018)) +* **wc:** fix iteration ([83583db](https://github.com/IgniteUI/igniteui-cli/commit/83583dbae937824e1b1f4d3f8d1ce8cc8e5589ec)) +* **wc:** fix paths in web components workflow ([6ff5999](https://github.com/IgniteUI/igniteui-cli/commit/6ff5999b782af24f09c29d4c60befb32a84fc5e0)) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + +#### Features + +* increase maximum file size to cache in webComponents's vite configuration to 10 MB ([#1370](https://github.com/IgniteUI/igniteui-cli/issues/1370)) ([0a1385e](https://github.com/IgniteUI/igniteui-cli/commit/0a1385e5d1f98c8fcdf020d144f048b112b251d5)) + + + +## 14.3.9 (2025-01-23) + + +#### Features + +* enable silent mode in Vite configuration for improved build output ([#1369](https://github.com/IgniteUI/igniteui-cli/issues/1369)) ([7728300](https://github.com/IgniteUI/igniteui-cli/commit/7728300cbba7c5b15261ff2a82820432bd4b12b7)) + + + +## 14.3.8 (2025-01-23) + + +#### Features + +* replace rollup with vite configuration for wc ([#1364](https://github.com/IgniteUI/igniteui-cli/issues/1364)) ([024ee5f](https://github.com/IgniteUI/igniteui-cli/commit/024ee5f048427c5406013f1e4d051403ae255fca)) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + +#### Bug Fixes + +* **web-components:** add step in github pages workflow to fix navigation ([#1355](https://github.com/IgniteUI/igniteui-cli/issues/1355)) ([0ca7277](https://github.com/IgniteUI/igniteui-cli/commit/0ca7277be8eaf1218af8a47f1ed7f51273499737)) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + +#### Bug Fixes + +* **cli:** replace coveralls with coveralls-next ([#1336](https://github.com/IgniteUI/igniteui-cli/issues/1336)) ([4028e28](https://github.com/IgniteUI/igniteui-cli/commit/4028e28bc62da3f2232f79b60e26b9d13c93c8f9)) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + +#### Bug Fixes + +* **cli:** add fixes in react and wc templates ([#1326](https://github.com/IgniteUI/igniteui-cli/issues/1326)) ([0430547](https://github.com/IgniteUI/igniteui-cli/commit/0430547a733c98b76aa94499516934547049b117)) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + +#### Bug Fixes + +* **eslint:** turn off no-explicit-any rule for wc ([#1288](https://github.com/IgniteUI/igniteui-cli/issues/1288)) ([1ee5b0f](https://github.com/IgniteUI/igniteui-cli/commit/1ee5b0f4ecc97a93f60b95e1615bb2a75fce9238)) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Bug Fixes + +* **igr-ts:** add new lines in base app routes file ([#1284](https://github.com/IgniteUI/igniteui-cli/issues/1284)) ([92a14ef](https://github.com/IgniteUI/igniteui-cli/commit/92a14ef05f174bb5e5bc09978c986eb8f27e57e1)) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + +#### Bug Fixes + +* **react:** fix null type build error in main.tsx ([#1242](https://github.com/IgniteUI/igniteui-cli/issues/1242)) ([2d0b579](https://github.com/IgniteUI/igniteui-cli/commit/2d0b57999b6a22445c2e7ff494310f9e94c421ea)) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* **igr-ts:** lint ignore unused vars prefix; ts strict ([#1232](https://github.com/IgniteUI/igniteui-cli/issues/1232)) ([91e35b3](https://github.com/IgniteUI/igniteui-cli/commit/91e35b3eb060f079ff6e30bdead75af7d6b98add)) + + + +## 13.1.13-beta.4 (2024-04-04) + + + +## 13.1.13-beta.3 (2024-04-04) + + +#### Features + +* **react:** remove igniteui deps from package.json and bump versions ([841a19d](https://github.com/IgniteUI/igniteui-cli/commit/841a19d2779f4f156c48368b4fa7a20b1a181eb4)) +* **react:** turn off no-explicit-any in eslint ([ef50011](https://github.com/IgniteUI/igniteui-cli/commit/ef500113afe214e8e64dea926d6937c5e5f827df)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +# 13.2.0-beta.0 (2024-03-15) + + +#### Bug Fixes + +* add elements internal polyfill to base template ([c7d2396](https://github.com/IgniteUI/igniteui-cli/commit/c7d2396572a9cd77205b8727ed81089f460403e2)) +* **Imports:** Fixed class import path in .test.ts ([#1224](https://github.com/IgniteUI/igniteui-cli/issues/1224)) ([6b3a2ef](https://github.com/IgniteUI/igniteui-cli/commit/6b3a2effef4951f0fc59e5393186eb2e69f2972b)) +* **Lint:** Fixed styles typing in style-utils ([#1222](https://github.com/IgniteUI/igniteui-cli/issues/1222)) ([6ad842a](https://github.com/IgniteUI/igniteui-cli/commit/6ad842a2bc16d50c8b29ddbca5907b80e40fd798)) + + + +## 13.1.11 (2024-03-12) + + +#### Bug Fixes + +* **react:** add editorconfig and vite-env.d.ts ([555300c](https://github.com/IgniteUI/igniteui-cli/commit/555300c38df56246cb7cc08f6b25e8ae5fd316f0)) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + +#### Bug Fixes + +* **WebComponents:** Removing an unnecessary ` from package.json ([3420292](https://github.com/IgniteUI/igniteui-cli/commit/3420292eb5752eaf76cfee1e12927d8d2749b8be)) + + + +## 13.1.6 (2024-02-26) + + +#### Bug Fixes + +* **React:** Add styles to support dark themes [#29410](https://github.com/IgniteUI/igniteui-cli/issues/29410) ([#1205](https://github.com/IgniteUI/igniteui-cli/issues/1205)) ([a191348](https://github.com/IgniteUI/igniteui-cli/commit/a191348d07317cdaac43db7bd52ee3958784ae55)) + + + +## 13.1.5 (2024-01-31) + + +#### Features + +* add style-utils file to base project ([#1195](https://github.com/IgniteUI/igniteui-cli/issues/1195)) ([112f27d](https://github.com/IgniteUI/igniteui-cli/commit/112f27ddc49d9106a182c8c7768543aa1b913164)) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igr-ts:** add github workflows folder ([#1192](https://github.com/IgniteUI/igniteui-cli/issues/1192)) ([2369c55](https://github.com/IgniteUI/igniteui-cli/commit/2369c556b8f84ce6a575c73b617c7581cedf5c0f)) +* open browser on app start ([#1187](https://github.com/IgniteUI/igniteui-cli/issues/1187)) ([c4e1f5c](https://github.com/IgniteUI/igniteui-cli/commit/c4e1f5c8d65dd8729083377973a40450b4899d63)) + + +#### Features + +* **igc-ts:** bump the version to 4.7.0 and add new components ([#1189](https://github.com/IgniteUI/igniteui-cli/issues/1189)) ([e9dbfd7](https://github.com/IgniteUI/igniteui-cli/commit/e9dbfd7d6212f1b8535de6a142f6140e3848f6ef)) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + +#### Bug Fixes + +* memory allocation issue during build of webComponent app that uses igc-category-chart ([ee188bf](https://github.com/IgniteUI/igniteui-cli/commit/ee188bf4672b8ee96ac1b891cf8e334f44bb4929)) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Bug Fixes + +* **grid:** Adding missing packages to the grid template [#1109](https://github.com/IgniteUI/igniteui-cli/issues/1109) ([9c65afe](https://github.com/IgniteUI/igniteui-cli/commit/9c65afe228f182918c6e3f50e7cfec0466d7f7d2)) +* **web-components:** Adding packages in each template. ([674f55c](https://github.com/IgniteUI/igniteui-cli/commit/674f55c66bfa3308696cee3da1dd1d0e3ae64c0c)) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + +#### Bug Fixes + +* **wc:** changing the function call [#1110](https://github.com/IgniteUI/igniteui-cli/issues/1110) ([#1113](https://github.com/IgniteUI/igniteui-cli/issues/1113)) ([5e4d1db](https://github.com/IgniteUI/igniteui-cli/commit/5e4d1dbdeeaa498278a7669b08031c51bfa2f367)) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + +#### Features + +* add lint file for web components ([#1085](https://github.com/IgniteUI/igniteui-cli/issues/1085)) ([25498c0](https://github.com/IgniteUI/igniteui-cli/commit/25498c09b2bc4e5bc30c67c36008d97b342e3526)) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + +#### Features + +* **wc:** add npmrc to proj template ([#1079](https://github.com/IgniteUI/igniteui-cli/issues/1079)) ([af233e5](https://github.com/IgniteUI/igniteui-cli/commit/af233e53d72b615ce11e16a65ddf358645329ffb)) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta9 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.6 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + +#### Features + +* provide default options when adding a template ([#1070](https://github.com/IgniteUI/igniteui-cli/issues/1070)) ([73e5c2c](https://github.com/IgniteUI/igniteui-cli/commit/73e5c2c0cc62b81384d6b4928103adf5ccf16153)) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + +#### Bug Fixes + +* **webcomponents:** set background and color to body ([b41a8b6](https://github.com/IgniteUI/igniteui-cli/commit/b41a8b66834ed46206cb14aa8bff0d6e3b99ef18)) +* **webcomponents:** set correct fallback for background color ([#1065](https://github.com/IgniteUI/igniteui-cli/issues/1065)) ([a976831](https://github.com/IgniteUI/igniteui-cli/commit/a976831228c204b015bd49773af4b5fc9767873a)) +* **webcomponents:** update app-root markup ([c717c37](https://github.com/IgniteUI/igniteui-cli/commit/c717c370cae66218eb4a7d5daaf0137da8c12d23)) + + +#### Features + +* **wc:** add base template for Web Components [#988](https://github.com/IgniteUI/igniteui-cli/issues/988) ([#1058](https://github.com/IgniteUI/igniteui-cli/issues/1058)) ([7574ab2](https://github.com/IgniteUI/igniteui-cli/commit/7574ab2b0221687a6ace6f627ec55caa3945236f)) + + + +## 10.0.5 (2022-09-19) + + +#### Features + +* **wc:** add accordion, tab & date-time-editor templates ([#1055](https://github.com/IgniteUI/igniteui-cli/issues/1055)) ([f2a631f](https://github.com/IgniteUI/igniteui-cli/commit/f2a631fcd18f529172af8e038929bf7f542e71ff)) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **wc:** address comments ([e1f804d](https://github.com/IgniteUI/igniteui-cli/commit/e1f804deada9f5fdf628ba25e122278cb9118507)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) +* **wc:** add new 2.1.0 components ([526da0c](https://github.com/IgniteUI/igniteui-cli/commit/526da0ce167659c9cfd3b21caf21efdcbc47e18d)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + +#### Features + +* **wc:** adding empty view and refactor proj structure [#967](https://github.com/IgniteUI/igniteui-cli/issues/967) ([#979](https://github.com/IgniteUI/igniteui-cli/issues/979)) ([622a014](https://github.com/IgniteUI/igniteui-cli/commit/622a0143be1583cfb97d7b80cabbfe21e03c20eb)) +* **web-components:** use LitElement in the templates [#989](https://github.com/IgniteUI/igniteui-cli/issues/989) ([#1001](https://github.com/IgniteUI/igniteui-cli/issues/1001)) ([5d828bc](https://github.com/IgniteUI/igniteui-cli/commit/5d828bc6062e6971d82f588ebf59a6e489d87257)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.7 (2021-11-09) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **igr-es6:** Underscore dot ([a0ce582](https://github.com/IgniteUI/igniteui-cli/commit/a0ce582e112a31c2c59d5532791ef07ab988335b)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **custom-templates:** Refactor samples, ([1f50907](https://github.com/IgniteUI/igniteui-cli/commit/1f509070a9409c4100d3d9c6a5de2f443d04c556)) +* **ig-ts:** Free version path contains no /en ([e96c7f6](https://github.com/IgniteUI/igniteui-cli/commit/e96c7f673729a034eeb3d89f5adfe3061d6e9f0b)) +* **ig-ts:** Make use of all visible height ([ebfe5ed](https://github.com/IgniteUI/igniteui-cli/commit/ebfe5edada1fcd9d4f8e25f868f916ad2d862121)) +* **ig-ts:** Temp fix - add static FormsModule ([9341753](https://github.com/IgniteUI/igniteui-cli/commit/9341753ab6fed9597c6f30f9fb1383ad132282ab)) +* **ig-ts:** Update prod budgets ([4edd971](https://github.com/IgniteUI/igniteui-cli/commit/4edd97100f0ab2cdd7a00176992ca1da57de47ff)) +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) +* **lint:** Fix dum line lenght ([570accb](https://github.com/IgniteUI/igniteui-cli/commit/570accbaef8f74d01cecbeda0046edb1a8423ef1)) +* **lint:** Fix lint errors ([84394b9](https://github.com/IgniteUI/igniteui-cli/commit/84394b9c4c24ed9727c8719bd9e463cea09d482b)) +* **lint:** Fix lint errors. ([0477e7d](https://github.com/IgniteUI/igniteui-cli/commit/0477e7dd3d9b4731e1b3176316581d3e0339ca5e)) +* **templates:** Add file-saver package ([8c7a59d](https://github.com/IgniteUI/igniteui-cli/commit/8c7a59db381a32719cdadbf1534a387c90bb05d5)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **react-grid:** Add missing module [#791](https://github.com/IgniteUI/igniteui-cli/issues/791) ([#798](https://github.com/IgniteUI/igniteui-cli/issues/798)) ([68e2b81](https://github.com/IgniteUI/igniteui-cli/commit/68e2b81e297a5b4279f53e5bb9dff80126cc08b6)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Features + +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([73a5670](https://github.com/IgniteUI/igniteui-cli/commit/73a56703ff4f4f0cc23d1da3c65cb4fbe114c9b4)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **ig-ts:** correct grid features template variable [#702](https://github.com/IgniteUI/igniteui-cli/issues/702) ([3f09bd9](https://github.com/IgniteUI/igniteui-cli/commit/3f09bd9af64177162e4e450df2148e1b13b2f87f)) +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Features + +* **ix-ts:** Update ig-ts projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([a6204d8](https://github.com/IgniteUI/igniteui-cli/commit/a6204d80f50e885459306276f3584fac0488460b)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) + + + +# 5.0.0-beta.2 (2019-12-06) + + + +# 5.0.0-beta.1 (2019-11-28) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +# 14.10.0-alpha.0 + +## igniteui/cli-core@14.10.0-alpha.0 (2026-03-25) + +* **packages:** MCP server initial release as workspace package + +#### Features + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **lint:** re-enable no-console rule ([3ffa07f](https://github.com/IgniteUI/igniteui-cli/commit/3ffa07ff8812e93dd358b38332f3abc2ea955af2)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **packages:** disable non-functional registry login attempt on upgrade ([#1528](https://github.com/IgniteUI/igniteui-cli/issues/1528)) ([1008a1e](https://github.com/IgniteUI/igniteui-cli/commit/1008a1e3fadb20553f464162d69a5bb2393d615b)) +* **packages:** login command for node@24+ spawn change ([cbb6502](https://github.com/IgniteUI/igniteui-cli/commit/cbb6502e90cfeaa7a87885748aa4b337c37c0b2f)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + +#### Bug Fixes + +* **react:** enhance upgrade-packages to support workspace glob patterns for projects without explicit workspaces ([#1424](https://github.com/IgniteUI/igniteui-cli/issues/1424)) ([6eeee2f](https://github.com/IgniteUI/igniteui-cli/commit/6eeee2ff879902197f012e83eb6064a72a4c438e)) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* **wc:** enhance upgrade-packages to support workspace glob patterns and vite.config.ts files ([#1408](https://github.com/IgniteUI/igniteui-cli/issues/1408)) ([bcd62be](https://github.com/IgniteUI/igniteui-cli/commit/bcd62be52107bcbdab6d207866fe7ffb99883b6d)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + +#### Features + +* **React:** Update react html files with licensed packages when upgrading packages ([#1395](https://github.com/IgniteUI/igniteui-cli/issues/1395)) ([7a7c4f0](https://github.com/IgniteUI/igniteui-cli/commit/7a7c4f0b5b74acc67e7524e643ee2a102ededb46)) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + +#### Bug Fixes + +* **WC:** update themes import paths to licensed version ([#1387](https://github.com/IgniteUI/igniteui-cli/issues/1387)) ([260068b](https://github.com/IgniteUI/igniteui-cli/commit/260068b9c9e3f4e895717ca6003f6ba0aded5cf2)) + + + +## 14.3.16 (2025-03-31) + + +#### Bug Fixes + +* **workflows:** Do not throw error if github workflows directory does not exist when updating ([#1383](https://github.com/IgniteUI/igniteui-cli/issues/1383)) ([acc771a](https://github.com/IgniteUI/igniteui-cli/commit/acc771afac962166f630c36beff428aa83af97de)) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + +#### Features + +* **core:** add FormattingService ([f7ea2a4](https://github.com/IgniteUI/igniteui-cli/commit/f7ea2a4d8f57b5f1edb531df76d05c541df754e1)) +* **core:** add new types ([aa636a3](https://github.com/IgniteUI/igniteui-cli/commit/aa636a3b1642da1a57758d49e0f7f6f79c7e2d01)) +* **core:** add TypeScriptASTTransformer ([9854847](https://github.com/IgniteUI/igniteui-cli/commit/9854847e32c718d82013e1fc8b58d9b06700b819)) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **kebacase:** do not add dash before numbers ([25d8f54](https://github.com/IgniteUI/igniteui-cli/commit/25d8f544243f6e1f5583c772f4b8e0e3cbb7ca12)) +* **kebap-case:** add dash between number and uppercase letter ([0be7637](https://github.com/IgniteUI/igniteui-cli/commit/0be7637bc19423821e066a9e62dbdec3e5bd5cb4)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + +#### Bug Fixes + +* update Utils.LowerDashed function ([#1171](https://github.com/IgniteUI/igniteui-cli/issues/1171)) ([2254ecc](https://github.com/IgniteUI/igniteui-cli/commit/2254ecc0267be8c19e7f1d5295886b2ba6c345c7)) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + +#### Bug Fixes + +* **package-manager:** skip setting up child install tasks for new projects ([de2a134](https://github.com/IgniteUI/igniteui-cli/commit/de2a1341e13ba20635a5ed94c5cc7e4c79c7ca46)) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **import:** Update func signature ([a3ac17a](https://github.com/IgniteUI/igniteui-cli/commit/a3ac17ab30436ed0420c92902c53ff7c3dfd0534)) +* **lint:** Fix lint errors ([6b5dd98](https://github.com/IgniteUI/igniteui-cli/commit/6b5dd985e90fb9cf8675c6cf0c06c6193e27fb32)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **ts-transform:** respect quote type from editorconfig ([99b3aad](https://github.com/IgniteUI/igniteui-cli/commit/99b3aadce0e6e7de8e2fef502db2ff1811d7a11e)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + +#### Features + +* **tsutil:** add optional parent route to TsFileUpdateUtil.addRoute method ([#777](https://github.com/IgniteUI/igniteui-cli/issues/777)) ([2df694a](https://github.com/IgniteUI/igniteui-cli/commit/2df694ac03a4601059f730b6cc9ae7d3ab6371ea)) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* remove angular as default choice for step by step [#579](https://github.com/IgniteUI/igniteui-cli/issues/579) ([5d2697e](https://github.com/IgniteUI/igniteui-cli/commit/5d2697e019d344cc5ebedf9ac00de94b012ded73)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + +#### Bug Fixes + +* **package-manager:** manually update pckgJSON instead of letting npm do it, [#751](https://github.com/IgniteUI/igniteui-cli/issues/751) ([6fa4c0c](https://github.com/IgniteUI/igniteui-cli/commit/6fa4c0c8d5afecfef8a8c1de18b1f6620edc006c)) + + + +# 5.1.0-beta.3 (2020-05-29) + + +#### Bug Fixes + +* **upgrade:** clear stdin stream before login prompt ([c77f49a](https://github.com/IgniteUI/igniteui-cli/commit/c77f49ab940933e9df6da2518d5192d5d49fbd0c)) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + +## igniteui/angular-templates@21.1.14100-alpha.0 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* **igx-ts:** update angular project to use vitest with playwright ([#1542](https://github.com/IgniteUI/igniteui-cli/issues/1542)) ([85dd3e6](https://github.com/IgniteUI/igniteui-cli/commit/85dd3e609295d7d801c127715c5fe8947f90f23d)) +* **igx-ts:** update project setup and templates naming ([#1514](https://github.com/IgniteUI/igniteui-cli/issues/1514)) ([ed4d1dd](https://github.com/IgniteUI/igniteui-cli/commit/ed4d1ddced09cee062caae7f8445df5ba11d8cac)) +* **mcp:** add angular-cli server configuration to mcp.json ([43a01a0](https://github.com/IgniteUI/igniteui-cli/commit/43a01a08ca6ac9b9a7958a172e5f27b02fe1fbb1)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts-legacy:** fi grid type import and add missing override ([ff24df0](https://github.com/IgniteUI/igniteui-cli/commit/ff24df0e665d8c834f510bfc62fc99af6532a38e)) +* **igx-ts:** fix eslint configurations ([#1509](https://github.com/IgniteUI/igniteui-cli/issues/1509)) ([ec63959](https://github.com/IgniteUI/igniteui-cli/commit/ec63959ee65e5c369d483d5dc34965f121a36cae)) +* **igx-ts:** fix side nav route data text ([487ba12](https://github.com/IgniteUI/igniteui-cli/commit/487ba122c2d51822642d15f501ea776193bf6a44)) +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **angular:** add igniteui angular core override ([0a5d46f](https://github.com/IgniteUI/igniteui-cli/commit/0a5d46f73bd3d621a833d07ad09318ccbdcfb9b9)) +* **angular:** add missing providers ([804703e](https://github.com/IgniteUI/igniteui-cli/commit/804703e984919aa2fac6272f8058f94256460b73)) +* **angular:** empty template config ([75eef02](https://github.com/IgniteUI/igniteui-cli/commit/75eef022a33f0dc6bc5b90816ccee9c415d76289)) +* update imports ([a2bf7bf](https://github.com/IgniteUI/igniteui-cli/commit/a2bf7bf6fc973ba0af8d12dc1c33605419475891)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + +#### Bug Fixes + +* **angular:** fix the type of the providers ([142dbda](https://github.com/IgniteUI/igniteui-cli/commit/142dbda9665430bb3fb5a97744e8913195975708)) + + + +## 14.8.5-beta.0 (2026-02-10) + + +#### Bug Fixes + +* **angular:** add provide zone change detection in app config for angular standalone ([27b516b](https://github.com/IgniteUI/igniteui-cli/commit/27b516b640b1ecf9fdb7320e6a5c84a398aab505)) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* add same fix to legacy angular projects ([2456829](https://github.com/IgniteUI/igniteui-cli/commit/245682908c81c931b65707b5098a98e3991f6f71)) +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) +* move tearDown to chart related test files ([40b1739](https://github.com/IgniteUI/igniteui-cli/commit/40b1739734199b035c32b02937456c9ae444654a)) +* remove calls to test.ts ([c08ca9f](https://github.com/IgniteUI/igniteui-cli/commit/c08ca9fcd472488a125c2f073bd06e051a5f3314)) +* remove test.ts as not needed ([451d49a](https://github.com/IgniteUI/igniteui-cli/commit/451d49ab3c6b7652b29b062e1e3a9301f2497a0f)) + + + +## 14.8.3 (2026-01-19) + + +#### Bug Fixes + +* **angular:** remove glob and rimraf from standalone package json ([#1478](https://github.com/IgniteUI/igniteui-cli/issues/1478)) ([0a3afce](https://github.com/IgniteUI/igniteui-cli/commit/0a3afce21e6e14196c8942f9f15a56793e1679fa)) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + +#### Bug Fixes + +* **ng:** move eqeqeq rule ([#1433](https://github.com/IgniteUI/igniteui-cli/issues/1433)) ([29a574d](https://github.com/IgniteUI/igniteui-cli/commit/29a574db2af16adff262440d789c58216ba08a8e)) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + +#### Bug Fixes + +* **angular:** fix eslint config for angular modules ([#1423](https://github.com/IgniteUI/igniteui-cli/issues/1423)) ([2420d26](https://github.com/IgniteUI/igniteui-cli/commit/2420d26511cffef06cad58fa7e67a61a6b885187)) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* **ng, standalone:** add test setup file for angular standalone ([#1421](https://github.com/IgniteUI/igniteui-cli/issues/1421)) ([feebb55](https://github.com/IgniteUI/igniteui-cli/commit/feebb5574cfffe86f6f2b342c2643b3ef9651a3c)) + + + +## 14.5.4 (2025-07-01) + + +#### Bug Fixes + +* **ng:** Add same proj rxjs version in overrides, so there are no peer dep errors for it. It is needed when having reveal or other overrides. ([4728d19](https://github.com/IgniteUI/igniteui-cli/commit/4728d19e7658cf5c4d863a6c277be696f77e5ac5)) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **angular:** fix theme errors ([#1404](https://github.com/IgniteUI/igniteui-cli/issues/1404)) ([3e7e4a3](https://github.com/IgniteUI/igniteui-cli/commit/3e7e4a3777bde5cc025df182bb57e5b9f002c5d9)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* **angular:** add ovverides for reveal sdk wrappers ([d2bc8cb](https://github.com/IgniteUI/igniteui-cli/commit/d2bc8cb26584f5836d633d24421d6dc774bd53a5)) +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Bug Fixes + +* adapt ngModules templates to 19 changes ([2ce6e9d](https://github.com/IgniteUI/igniteui-cli/commit/2ce6e9d38acef0f0e8981ef054f61ab35d137fd8)) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + + +## 13.4.1 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +# 13.4.0 (2024-07-22) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + +#### Features + +* **ng-sa-base:** add vscode template folder ([a4787e7](https://github.com/IgniteUI/igniteui-cli/commit/a4787e74fcc715aceaa4c265fd97e4452e70463e)) +* **ngm-base:** add vscode template folder ([0ed6fb8](https://github.com/IgniteUI/igniteui-cli/commit/0ed6fb8cf8ef75103c84e8ee2ddeaa2886be3922)) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* fix yml script placeholder delimiters ([#1239](https://github.com/IgniteUI/igniteui-cli/issues/1239)) ([45a2264](https://github.com/IgniteUI/igniteui-cli/commit/45a2264a93edc5b0ca307d5ec43fcd6a9de42cea)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **_base-legacy:** update project type to legacy ([f8984c9](https://github.com/IgniteUI/igniteui-cli/commit/f8984c93f02e8391ca721bc49eeabd45e5f7bb34)) +* **_base:** provide http client ([1e1d1c2](https://github.com/IgniteUI/igniteui-cli/commit/1e1d1c2d6c70a110ace81e74c91bcab2a7021086)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igx-ts:** update karma-jasmine-html-reporter ([0cf034d](https://github.com/IgniteUI/igniteui-cli/commit/0cf034db6474b8ed88e9b3d93e9b3011afd47b3b)) + + + +## 13.1.1 (2023-12-14) + + +#### Bug Fixes + +* **igx:** remove prod config for ng build ([d90c056](https://github.com/IgniteUI/igniteui-cli/commit/d90c056aed7ac87f972ea719eeac9367e6b97226)) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** more fixes ([1373d18](https://github.com/IgniteUI/igniteui-cli/commit/1373d18e45d8fa9bb69bf5692b360bb4ecec531b)) +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +## 11.1.2 (2023-05-25) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + +#### Bug Fixes + +* **igx-ts:** updating dependencies [#1099](https://github.com/IgniteUI/igniteui-cli/issues/1099) ([#1102](https://github.com/IgniteUI/igniteui-cli/issues/1102)) ([cd3b35a](https://github.com/IgniteUI/igniteui-cli/commit/cd3b35ac7961474ecd4ecbb8c4dffa33067c20f1)) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + +#### Bug Fixes + +* **fintech grid:** fix slow grid [#1020](https://github.com/IgniteUI/igniteui-cli/issues/1020) ([4f888dc](https://github.com/IgniteUI/igniteui-cli/commit/4f888dc3c2b1fd6ad896b197634d3aa0c3ef57cd)) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **ng:** gridAPI rename ([5b8b0a5](https://github.com/IgniteUI/igniteui-cli/commit/5b8b0a5e5e21ce5ae2228e0d025eea0195206292)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + +#### Bug Fixes + +* **templates:** Adding override modifier. ([6334d17](https://github.com/IgniteUI/igniteui-cli/commit/6334d174642212d942c5f5669c1082ae56bb3cc8)) + + + +# 9.1.0-rc.0 (2022-02-24) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) +* **angular:** remove old code ([3b063db](https://github.com/IgniteUI/igniteui-cli/commit/3b063db9cf51509b289148f4928cdfda9837a6dd)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Bug Fixes + +* **schematics:** fix home import without placeholder ([#966](https://github.com/IgniteUI/igniteui-cli/issues/966)) ([9263bb2](https://github.com/IgniteUI/igniteui-cli/commit/9263bb22b6dd699845d3e6fad7ab78536f7a484c)) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + +#### Bug Fixes + +* changes from latest rc, packages updates ([f59905f](https://github.com/IgniteUI/igniteui-cli/commit/f59905fbd0d37d536b2a13dd002cc99ce8c48165)) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) +* **angular:** new theme imports upgrade packages ([3ae74d9](https://github.com/IgniteUI/igniteui-cli/commit/3ae74d9bb9a338f939e9e5fb73c978003401c2a7)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + +#### Bug Fixes + +* remove icon color, becasue it is deprecated ([7b33804](https://github.com/IgniteUI/igniteui-cli/commit/7b338049a3182d7a8ea9e7106d10ef485dcc0623)) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +# 8.1.0-rc.0 (2021-07-30) + + +#### Bug Fixes + +* **igx-ts:** remove deprecated properties from scenario templates ([f84dc3c](https://github.com/IgniteUI/igniteui-cli/commit/f84dc3cd9626d5f287caed74cd32fda6849906e2)) + + + +# 8.1.0-beta.1 (2021-07-30) + + +#### Bug Fixes + +* **awesome-grid:** fix deprecated properties warnings ([f7a5b0c](https://github.com/IgniteUI/igniteui-cli/commit/f7a5b0c589c4b0aa8ded7c036859956d84c1ed23)) +* **fintech-grid:** fix console warnings and errors ([eaaf733](https://github.com/IgniteUI/igniteui-cli/commit/eaaf73311b45b9fc326353c8c6e6a1efe3f6f225)) +* **igx-ts:** Update angular.json ([c038c70](https://github.com/IgniteUI/igniteui-cli/commit/c038c708c5d2476e819071fd6c9defe29915b904)) +* **igx-ts:** use explicit index in drop-down components for logic view ([cb96f7d](https://github.com/IgniteUI/igniteui-cli/commit/cb96f7dcc2a5a4af2c585b22b50daa372f3684e9)) + + +#### Features + +* **igx-ts:** update custom grid templates w/ 12.1 paginator ([2b5058b](https://github.com/IgniteUI/igniteui-cli/commit/2b5058bd8c2f1946fd1f52b848a5b6ca9aebfcee)) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* **igx-templates:** add igx-accordion template ([#851](https://github.com/IgniteUI/igniteui-cli/issues/851)) ([03e74cd](https://github.com/IgniteUI/igniteui-cli/commit/03e74cd194184b629ea09ec3cfa5218943d0feef)) +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + +#### Bug Fixes + +* **igx-ts:** fix strict errors in base and side-nav projects ([963d23d](https://github.com/IgniteUI/igniteui-cli/commit/963d23dc9771d8d184bff89fe2e2782e3bd97219)) +* **igx-ts:** fix strict errors in side-nav-auth project ([695f430](https://github.com/IgniteUI/igniteui-cli/commit/695f430c693b4a4cb817784d4b20dc0c268ec80c)) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + +#### Bug Fixes + +* **angular-templates:** fix issue with strict templates in igx-ts ([38aaa75](https://github.com/IgniteUI/igniteui-cli/commit/38aaa756908493244414a51cc31688c27246b2f6)), closes [#850](https://github.com/IgniteUI/igniteui-cli/issues/850) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + +#### Bug Fixes + +* **fonts:** Fix icon font names and families ([35a702e](https://github.com/IgniteUI/igniteui-cli/commit/35a702ee21d4a780b9318de071246969af54fca7)) +* **template:** Fix and upadte awesome template ([f2b51aa](https://github.com/IgniteUI/igniteui-cli/commit/f2b51aa2685220b282ca8a25bb2580f44b960bcb)) +* **warnings:** Update icons for grids samples ([0efbbae](https://github.com/IgniteUI/igniteui-cli/commit/0efbbaecdcb3b6095c6ebc483729214f5e4753aa)) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + +#### Bug Fixes + +* **igx-templates:** provide service in tree sample, add some style ([b76452a](https://github.com/IgniteUI/igniteui-cli/commit/b76452a22d047a07d95c19fd3c720466065f178e)) +* remove strict checks and update open() method ([f2877e3](https://github.com/IgniteUI/igniteui-cli/commit/f2877e342746f85962d3f10125c6b784e53eb5d2)) + + +#### Features + +* **igx-templates:** add igx-tree template ([41bc6c3](https://github.com/IgniteUI/igniteui-cli/commit/41bc6c37b19c9136335347a468cdd5c8685a1f61)) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + +#### Bug Fixes + +* **toolbar:** Update hgrid & treegrid custom template toolbar ([c27af22](https://github.com/IgniteUI/igniteui-cli/commit/c27af22c413da93305a5c90c8a60a6dbac1a01e1)) + + + +## 7.0.1 (2020-11-16) + + +#### Bug Fixes + +* **igx-ts:** add local storage to spec ([3056a97](https://github.com/IgniteUI/igniteui-cli/commit/3056a97d99c492c04f2bbf19a7bd09c418294dbf)) +* **igx,custom-grid:** assign allowFiltering when selected as option ([7534c5f](https://github.com/IgniteUI/igniteui-cli/commit/7534c5f51736587b87217042b98c1be753cd76a8)) +* ssr breaks because of localStorage ref ([dc9410f](https://github.com/IgniteUI/igniteui-cli/commit/dc9410ff7c333bdece6ba25212f6c763afe64601)) + + + +# 7.0.0 (2020-11-13) + + +#### Bug Fixes + +* **igx-ts:** update build-angular ([082869c](https://github.com/IgniteUI/igniteui-cli/commit/082869cf27b52cb26695b6f90f4980ea85e67574)) + + + +# 7.0.0-rc.2 (2020-11-12) + + +#### Bug Fixes + +* **igx-ts:** crm grid with new toolbar ([a387742](https://github.com/IgniteUI/igniteui-cli/commit/a387742493b73f2c2f5e2cbacaf1bbe5a4d9345f)) +* **igx-ts:** fix toolbar according to latest changes ([93323c8](https://github.com/IgniteUI/igniteui-cli/commit/93323c81a3e388ae46e1dabcca13261312f92ade)) +* **igx-ts:** fix toolbar for grid fintech ([edc2057](https://github.com/IgniteUI/igniteui-cli/commit/edc20571657d5177c7a82ccae32d86f430970185)) +* **igx-ts:** tree-grid toolbar update ([2c985d7](https://github.com/IgniteUI/igniteui-cli/commit/2c985d78902d90439cbef733e6252f8c1eae37e3)) +* **igx-ts:** update HGrid Batch demo ([890a02d](https://github.com/IgniteUI/igniteui-cli/commit/890a02d54be89358aff76f9b07b3d8630df4f79c)) + + + +## 6.2.1 (2020-11-11) + + +#### Bug Fixes + +* **igx, side-auth:** add SSR-friendly local storage service ([8db27be](https://github.com/IgniteUI/igniteui-cli/commit/8db27be4739d396bbd34c389d9227aabdd01b970)) +* **igx,side-auth:** add proper wrapper class so layout is 100% ([508df9d](https://github.com/IgniteUI/igniteui-cli/commit/508df9d2255ec1a908ecd4054a841360c1827933)) + + + +# 7.0.0-rc.1 (2020-11-10) + + +#### Bug Fixes + +* **igx-ts:** fix package.json for auth project ([00b9cd9](https://github.com/IgniteUI/igniteui-cli/commit/00b9cd942ec154c76da1ac0e810e366cf373b64f)) +* **igx-ts:** remove base.json for auth project ([019535b](https://github.com/IgniteUI/igniteui-cli/commit/019535be27bac30b065b27a6facde53578a08456)) +* **igx-ts:** revert deleted packages ([acede53](https://github.com/IgniteUI/igniteui-cli/commit/acede5371f24b10be2314de0118ff1976cfb8c35)) + + + +# 7.0.0-rc.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** remove unnecessary quotes ([cd9c16c](https://github.com/IgniteUI/igniteui-cli/commit/cd9c16cea9f4d120e7b6e0dd9112e907c5f2228b)) + + + +# 7.0.0-alpha.0 (2020-11-10) + + +#### Bug Fixes + +* **dock-manager:** Use correct module name in app.module import [#792](https://github.com/IgniteUI/igniteui-cli/issues/792) ([53691b5](https://github.com/IgniteUI/igniteui-cli/commit/53691b54af896c410a0b2b0c3e91751f76341dbd)) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + +#### Bug Fixes + +* **templates, crm grid, grid batch editing:** Fixing issues in the two templates. ([2dc2859](https://github.com/IgniteUI/igniteui-cli/commit/2dc2859dd10f41f9b0b8a05072fa6d12de5c9c00)) +* **templates, crm-grid, grid batchediting:** Addressing the comments. ([09955ea](https://github.com/IgniteUI/igniteui-cli/commit/09955ea47cbe58546a6d117611a705c86c058b6e)) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **deployment:** Fix environment check 793 ([3f3946a](https://github.com/IgniteUI/igniteui-cli/commit/3f3946a474840d38a763149230d743b3e845bf47)) +* update map to 10.1.3 ([3926b77](https://github.com/IgniteUI/igniteui-cli/commit/3926b77d575e2051b210232be2b8b1f76b681fab)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) +* use group.json for step by step groups [#707](https://github.com/IgniteUI/igniteui-cli/issues/707) ([adf562c](https://github.com/IgniteUI/igniteui-cli/commit/adf562c639725fb6a8008ef682f5fbdd66e65b55)) + + +#### Features + +* Adding a Map template for Angular ([7cbddeb](https://github.com/IgniteUI/igniteui-cli/commit/7cbddeb907db8277f6db43db47f19f06591a7c7f)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) +* **packages:** remove deprecated option [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([602111e](https://github.com/IgniteUI/igniteui-cli/commit/602111eefdcf390e832275c428e86f9ef5aa547f)) +* **packages:** Update igx-ts projects [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([71df154](https://github.com/IgniteUI/igniteui-cli/commit/71df1546f4765699bf0600ef07062cad85b69d99)) + + + +# 5.2.0 (2020-06-11) + + +#### Features + +* **igx-ts:** add Dock Manager template for Angular ([#763](https://github.com/IgniteUI/igniteui-cli/issues/763)) ([63acfdf](https://github.com/IgniteUI/igniteui-cli/commit/63acfdf6b9c511c0c8be18374f470ee8a0ca375c)) +* **igx,side-nav:** move content padding so views can override ([36f9964](https://github.com/IgniteUI/igniteui-cli/commit/36f9964bbe2d21920f99f5815f346ec117a61724)) + + + +## 5.1.1 (2020-06-03) + + +#### Bug Fixes + +* **igx,upgrade:** ignore projects without sourceRoot ([6d64d30](https://github.com/IgniteUI/igniteui-cli/commit/6d64d30efa3aedcfd7d32eb9e7e1c29c90c7ea6e)) +* **upgrade:** Logging a message that licensed package is already installed ([63df30d](https://github.com/IgniteUI/igniteui-cli/commit/63df30d67c7d46fed0b6e4411e5b097dcd7f11f2)) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Bug Fixes + +* **igx,templates:** correct empty project template id ([2d0b385](https://github.com/IgniteUI/igniteui-cli/commit/2d0b385a4ce3f8483e4f5f048bc94111ecb7db31)) +* **templates:** fix upgrade to get correct config ([a3021ef](https://github.com/IgniteUI/igniteui-cli/commit/a3021efc9baac77348a6e91a53f7b8b214fdb719)) +* **templates:** upgrade command properly replaces strings in ALL .ts files ([2d2c9b3](https://github.com/IgniteUI/igniteui-cli/commit/2d2c9b3dc02da3f7633642d9b3b4a02d7f0bb119)) +* **upgrade:** sort packages.json dependencies when adding licensed package ([62bb652](https://github.com/IgniteUI/igniteui-cli/commit/62bb652857e8e8cd6e368ef71ac2bf4ef8ea6749)) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **upgrade:** handle multiple licensed packages, [#741](https://github.com/IgniteUI/igniteui-cli/issues/741) ([ef02f5b](https://github.com/IgniteUI/igniteui-cli/commit/ef02f5b089d3616bbb24ba4ba8e2f0a4c7045374)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + +#### Features + +* **igx,multi-pacakge:** templates resolve lib package from project ([7bb4670](https://github.com/IgniteUI/igniteui-cli/commit/7bb4670e1f7832321c3373e07c967d3d13d83777)) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **carousel:** Add noop animations module ([c696124](https://github.com/IgniteUI/igniteui-cli/commit/c6961249ccbfe186e1f369b23420584b908b5787)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Bug Fixes + +* **igx-ts:** change tsconfig module for spec files to avoid errors, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([3d6b987](https://github.com/IgniteUI/igniteui-cli/commit/3d6b987e4e2c72a9b73453af112465b7234aa9c3)) +* **igx-ts:** update auth providers tests, [#660](https://github.com/IgniteUI/igniteui-cli/issues/660) ([4c15c8b](https://github.com/IgniteUI/igniteui-cli/commit/4c15c8bc00ffd5543e676ce07ea4718ea234b62b)) +* **templates, igx:** add chart packages [#679](https://github.com/IgniteUI/igniteui-cli/issues/679) ([75f4dcd](https://github.com/IgniteUI/igniteui-cli/commit/75f4dcd3bf585d38b3f86ef85cfecc6b8ddcfabc)) +* **templates, igx:** add chart packages [#684](https://github.com/IgniteUI/igniteui-cli/issues/684) ([dd7bfb7](https://github.com/IgniteUI/igniteui-cli/commit/dd7bfb75923ebe4d644239774899c26cf6bf7564)) + + +#### Features + +* **igx-ts:** Update projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([e0a738a](https://github.com/IgniteUI/igniteui-cli/commit/e0a738aea9b0345386fb2611bc28168ca99390f0)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* **ig-add:** only take into account 'extraConfig' in generateConfig [#618](https://github.com/IgniteUI/igniteui-cli/issues/618) ([#621](https://github.com/IgniteUI/igniteui-cli/issues/621)) ([d8d7db8](https://github.com/IgniteUI/igniteui-cli/commit/d8d7db823f1c6c717063ce678695be4d8db084d6)) +* **igx-ts:** update scenario templates [#628](https://github.com/IgniteUI/igniteui-cli/issues/628) ([#643](https://github.com/IgniteUI/igniteui-cli/issues/643)) ([ecda4d7](https://github.com/IgniteUI/igniteui-cli/commit/ecda4d779d3a196c16c13f87e2787ff7fdcbc167)) +* **templates:** update angular charts packages to v8.2.12 ([3ed3013](https://github.com/IgniteUI/igniteui-cli/commit/3ed301379a765d4ad0614e1d51cd5dec2227494d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **igx-templates:** fix side-auth template tsconfig.app.json, [#597](https://github.com/IgniteUI/igniteui-cli/issues/597) ([1ffe4ba](https://github.com/IgniteUI/igniteui-cli/commit/1ffe4ba77b30c4eaab2a176ec30470cf32cf7980)) +* **igx-ts:** update autocomplete templates to import FormsModule [#581](https://github.com/IgniteUI/igniteui-cli/issues/581) ([#584](https://github.com/IgniteUI/igniteui-cli/issues/584)) ([b91a1e8](https://github.com/IgniteUI/igniteui-cli/commit/b91a1e8efe1c3e78482abff524b69c48e64f9094)) +* **templating, igx-ts:** add dot path variable for prefixed files that glob ignores ([486a0da](https://github.com/IgniteUI/igniteui-cli/commit/486a0da0ee6190f16544ee46ae360b822c057b53)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) + +## igniteui/angular-schematics@21.1.14100-alpha.0 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **schematics:** fs writeFile create check ([#1526](https://github.com/IgniteUI/igniteui-cli/issues/1526)) ([f8e4b59](https://github.com/IgniteUI/igniteui-cli/commit/f8e4b59bd951ff1b702f3d24cf61ebc33115dc89)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + + +## 14.8.2-beta.2 (2026-01-12) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + + +# 14.7.0 (2025-11-17) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + + +## 14.3.9 (2025-01-23) + + + +## 14.3.8 (2025-01-23) + + + +## 14.3.7 (2025-01-22) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + + +## 13.1.15 (2024-04-12) + + +#### Bug Fixes + +* include js files in ng-schematics/scripts w/ newer npm version ([727f2f6](https://github.com/IgniteUI/igniteui-cli/commit/727f2f670d303ddb585b78d68a2c42f907a4786f)) + + + +## 13.1.13 (2024-04-11) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +## 13.1.11 (2024-03-12) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + + +## 13.1.6 (2024-02-26) + + +#### Features + +* **ng-add:** add setup config provideAnimations ([2f47676](https://github.com/IgniteUI/igniteui-cli/commit/2f476762ac772039228fe10565d49a6ced76b72d)) + + + +## 13.1.5 (2024-01-31) + + + +## 13.1.3 (2024-01-17) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + + +## 10.0.5 (2022-09-19) + + + +## 10.0.4-beta.1 (2022-07-15) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **angular:** change more igx- ([f9ade5e](https://github.com/IgniteUI/igniteui-cli/commit/f9ade5e176444ce3c2a80f60baf43d239b8788fe)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + + +## 8.1.1 (2021-09-02) + + + +## 8.0.4 (2021-08-02) + + +#### Bug Fixes + +* **schematics:** resolve schema id deprecation warning ([#870](https://github.com/IgniteUI/igniteui-cli/issues/870)) ([17d7016](https://github.com/IgniteUI/igniteui-cli/commit/17d70164de93a5162ba4a02b44b571de318a37c7)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Bug Fixes + +* **igx,dock-manager:** resolve package name from project ([ac66d8e](https://github.com/IgniteUI/igniteui-cli/commit/ac66d8e0fadf643530a5f3aa53ee3fe851cc1a33)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **schematics:** include upgrade-packages schema ([77aa13d](https://github.com/IgniteUI/igniteui-cli/commit/77aa13db7442b24d787029af4d6a860a0bd85d3b)) +* **schematics:** remove log for unsupported custom templates ([97e3bb3](https://github.com/IgniteUI/igniteui-cli/commit/97e3bb3813cf25603a97177a5ec5d87b2db94206)) +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + + +## 5.0.2 (2020-05-05) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + +#### Bug Fixes + +* **schematics:** ensure component prompt installs packages [#695](https://github.com/IgniteUI/igniteui-cli/issues/695) ([16e55d4](https://github.com/IgniteUI/igniteui-cli/commit/16e55d446c3d18fddb7ec7040a266ef498d83060)) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) +* prompt for template and theme if no name provided [#622](https://github.com/IgniteUI/igniteui-cli/issues/622) ([#626](https://github.com/IgniteUI/igniteui-cli/issues/626)) ([44621e9](https://github.com/IgniteUI/igniteui-cli/commit/44621e9040f29da4819e6758e8316e6c7048e38d)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) +* **new, schematics:** no prompts when "name" is provided [#595](https://github.com/IgniteUI/igniteui-cli/issues/595) ([#609](https://github.com/IgniteUI/igniteui-cli/issues/609)) ([0ed45ba](https://github.com/IgniteUI/igniteui-cli/commit/0ed45ba0ed2147a0255d5df2a44e82b665c90c99)) + + + +# 5.0.0-beta.2 (2019-12-06) + + +#### Bug Fixes + +* **schematics:** set virtual FS in proper stage ([2102464](https://github.com/IgniteUI/igniteui-cli/commit/2102464698a493f97f4739bd14068b218b985d95)) +* **schematics:** skip start task if skipInstall === true ([#603](https://github.com/IgniteUI/igniteui-cli/issues/603)) ([fc38d65](https://github.com/IgniteUI/igniteui-cli/commit/fc38d651ecfa47f95921fa72f7be5ff68d8b586e)) + + +#### Features + +* **schematics:** adding a name for schematics projects [#587](https://github.com/IgniteUI/igniteui-cli/issues/587) ([#602](https://github.com/IgniteUI/igniteui-cli/issues/602)) ([19409d0](https://github.com/IgniteUI/igniteui-cli/commit/19409d0b7018c518c64c7ff161a6ec4a3438f834)) + + + +# 5.0.0-beta.1 (2019-11-28) + + +#### Bug Fixes + +* **schematics:** component schematics checks for available names [#576](https://github.com/IgniteUI/igniteui-cli/issues/576) ([#586](https://github.com/IgniteUI/igniteui-cli/issues/586)) ([bccd6c1](https://github.com/IgniteUI/igniteui-cli/commit/bccd6c131c4ab9bc197cfa29e1b792494270720f)) +* **schematics:** this package is a dep in new project instead of ignteui-cli ([c04a13c](https://github.com/IgniteUI/igniteui-cli/commit/c04a13c1c82c1d4a9a627503086f86d9040c6778)) +* **schematics:** use project config instead of hard-coded paths ([#592](https://github.com/IgniteUI/igniteui-cli/issues/592)) ([43240b6](https://github.com/IgniteUI/igniteui-cli/commit/43240b610d878186aa4b50959c37822e1f54eaf6)) + + +#### Features + +* **schematics:** add prompt session to component schematic, [#566](https://github.com/IgniteUI/igniteui-cli/issues/566) ([#571](https://github.com/IgniteUI/igniteui-cli/issues/571)) ([e25c1ce](https://github.com/IgniteUI/igniteui-cli/commit/e25c1ceab6fbff58a89e8712d3eda31da7c1af65)) +* **schematics:** adding ng-new schematic missing options [#596](https://github.com/IgniteUI/igniteui-cli/issues/596) ([#598](https://github.com/IgniteUI/igniteui-cli/issues/598)) ([8b51541](https://github.com/IgniteUI/igniteui-cli/commit/8b5154133bfe3fc6ef1c9958879cd835e36b001e)) + + + +# 5.0.0-alpha.1 (2019-10-02) + + +#### Bug Fixes + +* rename gitignore manually ([beb06a9](https://github.com/IgniteUI/igniteui-cli/commit/beb06a9de2511654797d75737a2e0bd5da968d8c)) + + +#### Features + +* **ng-schematics:** add component generate schematic ([a0e86c2](https://github.com/IgniteUI/igniteui-cli/commit/a0e86c29d72c52727a13aee4ded2acd0ef6ddc44)) +* **schematics:** add start schematic, enable npm and git init tasks ([2a329b1](https://github.com/IgniteUI/igniteui-cli/commit/2a329b18c5e2d6d0f852a72c842c3bab4022a9f2)) + +## igniteui-cli@14.10.0-alpha.0 (2026-03-25) + + +#### Bug Fixes + +* **eslint:** correct config ignores and resolve lint errors ([68d01ac](https://github.com/IgniteUI/igniteui-cli/commit/68d01ac6102e4e3d660dff9d229e826ea64943db)) +* **igx-ts-legacy:** update igx ts legacy templates ([#1517](https://github.com/IgniteUI/igniteui-cli/issues/1517)) ([c26c8ff](https://github.com/IgniteUI/igniteui-cli/commit/c26c8ff298092c21b2aa6ca77a75cd2a5fdedc79)) + + +#### Features + +* add copilot instructions for AI agents in multiple templates ([73921a7](https://github.com/IgniteUI/igniteui-cli/commit/73921a738efcc0a3e2a7df24bdf509f9f694da8a)) +* **claude:** add CLAUDE.md files for AI agent instructions across multiple templates ([5a96a33](https://github.com/IgniteUI/igniteui-cli/commit/5a96a33eac3f2fcbaf1444ac7778f7c8c2c89952)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* **templates:** add AGENTS.md and mcp.json files for React and Web Components and Angular project templates ([d867f44](https://github.com/IgniteUI/igniteui-cli/commit/d867f44e17d01be82ec6853c6b0c22910a652b73)) + + + +## 14.9.2 (2026-03-11) + + +#### Bug Fixes + +* **igx-ts:** update igniteui-angular versions and remove overrides ([#1508](https://github.com/IgniteUI/igniteui-cli/issues/1508)) ([6b4e1c8](https://github.com/IgniteUI/igniteui-cli/commit/6b4e1c87e8e7a94a5212a7037072088b7eec8a1a)) +* **upgrade-packages:** correctly glob files on windows ([#1511](https://github.com/IgniteUI/igniteui-cli/issues/1511)) ([64f2735](https://github.com/IgniteUI/igniteui-cli/commit/64f2735963f269fb4b60dd7479566baae33119c8)) + + +#### Reverts + +* partially revert changes swapping exec with spawn ([3a64b67](https://github.com/IgniteUI/igniteui-cli/commit/3a64b67bc43df42f72363e63192b90fea38b111f)) + + + +## 14.9.1 (2026-02-25) + + + +# 14.9.0 (2026-02-25) + + +#### Bug Fixes + +* **commands,list:** do not use `this` in handler ([#1494](https://github.com/IgniteUI/igniteui-cli/issues/1494)) ([b8f5b53](https://github.com/IgniteUI/igniteui-cli/commit/b8f5b53599cb20374acee53195395213060b51d3)) +* **react:** remove setupTests and update test with it's logic ([#1489](https://github.com/IgniteUI/igniteui-cli/issues/1489)) ([bd1f0ba](https://github.com/IgniteUI/igniteui-cli/commit/bd1f0ba0bccfd6768ccae44ab10568be5ecb1828)) + + +#### Features + +* **ng:** update igniteui-angular to 21.1.0 ([#1495](https://github.com/IgniteUI/igniteui-cli/issues/1495)) ([399f83e](https://github.com/IgniteUI/igniteui-cli/commit/399f83e4278dafdf9a3832fa013840f05ba586e6)) + + + +## 14.8.5-beta.3 (2026-02-11) + + + +## 14.8.5-beta.0 (2026-02-10) + + + +## 14.8.4 (2026-02-05) + + +#### Bug Fixes + +* **angular:** increase maximum error budget ([#1485](https://github.com/IgniteUI/igniteui-cli/issues/1485)) ([63a03bd](https://github.com/IgniteUI/igniteui-cli/commit/63a03bddb3459797bc5a0121f2d601823fd3cd35)) + + + +## 14.8.3 (2026-01-19) + + + +## 14.8.2 (2026-01-13) + + + +## 14.8.2-beta.4 (2026-01-12) + + + +## 14.8.2-beta.3 (2026-01-12) + + +#### Bug Fixes + +* add vitest/browser package ([e283ed2](https://github.com/IgniteUI/igniteui-cli/commit/e283ed29b99d794bd67f3bcab7a9dbfd391045ec)) +* add vitest/browser package ([5c29f50](https://github.com/IgniteUI/igniteui-cli/commit/5c29f5054febc0d656732886d08237528d6f6e40)) + + + +## 14.8.2-beta.2 (2026-01-12) + + +#### Bug Fixes + +* add playwright to the yaml files for wc ([6432111](https://github.com/IgniteUI/igniteui-cli/commit/643211110ad858f84b9ed23b3602f80218f23cbd)) +* resolve missed merge conflict ([ba42d4f](https://github.com/IgniteUI/igniteui-cli/commit/ba42d4f378a3e8334f51381ac1ff85799134ce3e)) + + + +## 14.8.2-beta.0 (2026-01-12) + + + +# 14.8.0 (2025-12-03) + + + +# 14.8.0-beta.2 (2025-12-01) + + + +# 14.8.0-beta.1 (2025-12-01) + + + +## 14.7.1 (2025-11-20) + + +#### Features + +* update tests to use Playwright ([517ea99](https://github.com/IgniteUI/igniteui-cli/commit/517ea9901372d7a42b516f5e9114a82880038e7e)) + + + +# 14.7.0 (2025-11-17) + + +#### Bug Fixes + +* command injection vulnerabilities in PackageManager and start command ([#1438](https://github.com/IgniteUI/igniteui-cli/issues/1438)) ([1f86df3](https://github.com/IgniteUI/igniteui-cli/commit/1f86df3d6e660b93db047415e9c53af1ef4f0a30)) + + +#### Features + +* **ng:** use ng lint schematic ([#1439](https://github.com/IgniteUI/igniteui-cli/issues/1439)) ([fa917cd](https://github.com/IgniteUI/igniteui-cli/commit/fa917cd7c974db05061f9442d8c5cdcc74853928)) + + + +## 14.6.4 (2025-10-14) + + + +## 14.6.3 (2025-10-09) + + + +## 14.6.2 (2025-10-07) + + +#### Features + +* **react:** add playwright and adjust tests; update packages; ([#1430](https://github.com/IgniteUI/igniteui-cli/issues/1430)) ([32b41dc](https://github.com/IgniteUI/igniteui-cli/commit/32b41dcf3f53de76fbafce39a36a1e8d51876b93)) + + + +## 14.6.1 (2025-10-06) + + + +# 14.6.0 (2025-10-02) + + +#### Features + +* **ng:** update ig, ng and other libs ([#1427](https://github.com/IgniteUI/igniteui-cli/issues/1427)) ([93fbbcc](https://github.com/IgniteUI/igniteui-cli/commit/93fbbcce2668084dcc958736f7167e36e9cbed47)) + + + +## 14.5.8 (2025-09-25) + + + +## 14.5.7 (2025-09-23) + + + +## 14.5.6 (2025-09-18) + + +#### Bug Fixes + +* Add missing igniteui-react-core dependency to React grid templates ([fb429bb](https://github.com/IgniteUI/igniteui-cli/commit/fb429bbd3634e0cf86a617672f857be4bb8b2f0d)) +* Remove --legacy-peer-deps flag to allow automatic peer dependency installation ([fe0ea3d](https://github.com/IgniteUI/igniteui-cli/commit/fe0ea3df94614b10dc494e241b070309e283c0b6)) +* set default route ([#1422](https://github.com/IgniteUI/igniteui-cli/issues/1422)) ([768d0d0](https://github.com/IgniteUI/igniteui-cli/commit/768d0d0a2873d2efc81c426ce35b5e42e92508a9)) +* update react templates ([93d132f](https://github.com/IgniteUI/igniteui-cli/commit/93d132fa229f0dba963cd5f21b89d5274e346910)) +* use only grid with defined columns ([faeb25a](https://github.com/IgniteUI/igniteui-cli/commit/faeb25a64effeba39e24dafe6e93e5a26a07c5bc)) + + +#### Features + +* Update Ignite UI product versions in template files ([964dda1](https://github.com/IgniteUI/igniteui-cli/commit/964dda13da00ca0c9d4bf1a42d6d98d2aa1d7b88)) + + + +## 14.5.4 (2025-07-01) + + + +## 14.5.3 (2025-06-28) + + +#### Bug Fixes + +* **react:** add missing argument and fix incorrect types ([#1403](https://github.com/IgniteUI/igniteui-cli/issues/1403)) ([fb006b3](https://github.com/IgniteUI/igniteui-cli/commit/fb006b38e6b4f3a2e61326b018787f67bd32b640)) + + + +## 14.5.1 (2025-06-24) + + + +# 14.5.0 (2025-06-05) + + + +## 14.4.4 (2025-05-21) + + +#### Features + +* add azure pipelines yaml files for angular, react and wc templates ([#1396](https://github.com/IgniteUI/igniteui-cli/issues/1396)) ([6a3e39d](https://github.com/IgniteUI/igniteui-cli/commit/6a3e39d41f50abe51fa7fd819961412304a31343)) + + + +## 14.4.3 (2025-04-25) + + + +## 14.4.2 (2025-04-24) + + + +## 14.4.1 (2025-04-23) + + + +# 14.4.0 (2025-04-17) + + + +## 14.3.18 (2025-04-11) + + +#### Bug Fixes + +* add missing static css files for WC ([#1385](https://github.com/IgniteUI/igniteui-cli/issues/1385)) ([95018f9](https://github.com/IgniteUI/igniteui-cli/commit/95018f93704f62af70b9c4a2e07b46554e6331a4)) + + + +## 14.3.17 (2025-04-09) + + + +## 14.3.16 (2025-03-31) + + + +## 14.3.14 (2025-02-24) + + +#### Bug Fixes + +* update eslint and fix warnings ([#1378](https://github.com/IgniteUI/igniteui-cli/issues/1378)) ([aa84345](https://github.com/IgniteUI/igniteui-cli/commit/aa84345ff21fc0fccde94063099e4c713862cde8)) + + + +## 14.3.12-beta.0 (2025-01-27) + + +#### Bug Fixes + +* **wc:** add seperate update for single or double quotes ([79ed105](https://github.com/IgniteUI/igniteui-cli/commit/79ed105cd67baf99f15e327d5f9840c3103d8018)) +* **wc:** fix iteration ([83583db](https://github.com/IgniteUI/igniteui-cli/commit/83583dbae937824e1b1f4d3f8d1ce8cc8e5589ec)) +* **wc:** fix paths in web components workflow ([6ff5999](https://github.com/IgniteUI/igniteui-cli/commit/6ff5999b782af24f09c29d4c60befb32a84fc5e0)) + + + +## 14.3.11 (2025-01-24) + + +#### Bug Fixes + +* static data paths when deploy to github pages ([#1371](https://github.com/IgniteUI/igniteui-cli/issues/1371)) ([4b40231](https://github.com/IgniteUI/igniteui-cli/commit/4b402313f4d2a2cfd80115d274514d9e5507334c)) + + + +## 14.3.10 (2025-01-23) + + +#### Features + +* increase maximum file size to cache in webComponents's vite configuration to 10 MB ([#1370](https://github.com/IgniteUI/igniteui-cli/issues/1370)) ([0a1385e](https://github.com/IgniteUI/igniteui-cli/commit/0a1385e5d1f98c8fcdf020d144f048b112b251d5)) + + + +## 14.3.9 (2025-01-23) + + +#### Features + +* enable silent mode in Vite configuration for improved build output ([#1369](https://github.com/IgniteUI/igniteui-cli/issues/1369)) ([7728300](https://github.com/IgniteUI/igniteui-cli/commit/7728300cbba7c5b15261ff2a82820432bd4b12b7)) + + + +## 14.3.8 (2025-01-23) + + +#### Features + +* replace rollup with vite configuration for wc ([#1364](https://github.com/IgniteUI/igniteui-cli/issues/1364)) ([024ee5f](https://github.com/IgniteUI/igniteui-cli/commit/024ee5f048427c5406013f1e4d051403ae255fca)) + + + +## 14.3.7 (2025-01-22) + + +#### Bug Fixes + +* **github-pages:** upgrade github pages deploy and artefact versions ([#1366](https://github.com/IgniteUI/igniteui-cli/issues/1366)) ([db6d0ea](https://github.com/IgniteUI/igniteui-cli/commit/db6d0eaef44c189cb80f10925d25595d97b7da4b)) + + + +## 14.3.6 (2024-12-12) + + +#### Bug Fixes + +* **migrations:** enable encapsulation for migrations ([#1361](https://github.com/IgniteUI/igniteui-cli/issues/1361)) ([9561a16](https://github.com/IgniteUI/igniteui-cli/commit/9561a1604a746b8a4b771627de2af4d14927e7c2)) + + + +## 14.3.5 (2024-12-06) + + +#### Bug Fixes + +* **web-components:** fix the step for updating the router navigation in github pages workflow ([#1358](https://github.com/IgniteUI/igniteui-cli/issues/1358)) ([3e0f42c](https://github.com/IgniteUI/igniteui-cli/commit/3e0f42c4fc7a75f6819f8ba85f760ac6a6d854f1)) + + + +## 14.3.4 (2024-12-04) + + +#### Bug Fixes + +* **web-components:** add step in github pages workflow to fix navigation ([#1355](https://github.com/IgniteUI/igniteui-cli/issues/1355)) ([0ca7277](https://github.com/IgniteUI/igniteui-cli/commit/0ca7277be8eaf1218af8a47f1ed7f51273499737)) + + + +## 14.3.3 (2024-12-02) + + + +## 14.3.2 (2024-11-28) + + + +# 14.3.0 (2024-11-25) + + +#### Features + +* Add pages deployment variable logic and fixes in github pages yaml files ([#1337](https://github.com/IgniteUI/igniteui-cli/issues/1337)) ([c75d9c7](https://github.com/IgniteUI/igniteui-cli/commit/c75d9c7a9d7a9244e7a9a814770809f06280529a)) +* allow reordering of array literal expressions ([#1323](https://github.com/IgniteUI/igniteui-cli/issues/1323)) ([412a2a5](https://github.com/IgniteUI/igniteui-cli/commit/412a2a585fa16fda53eb643c74af7fb4037c1412)) + + + +## 14.2.3 (2024-11-15) + + + +## 14.2.2 (2024-11-08) + + +#### Bug Fixes + +* **cli:** replace coveralls with coveralls-next ([#1336](https://github.com/IgniteUI/igniteui-cli/issues/1336)) ([4028e28](https://github.com/IgniteUI/igniteui-cli/commit/4028e28bc62da3f2232f79b60e26b9d13c93c8f9)) + + + +## 14.2.1 (2024-10-28) + + + +# 14.2.0 (2024-10-25) + + + +# 14.2.0-beta.4 (2024-10-23) + + +#### Bug Fixes + +* **cli:** add fixes in react and wc templates ([#1326](https://github.com/IgniteUI/igniteui-cli/issues/1326)) ([0430547](https://github.com/IgniteUI/igniteui-cli/commit/0430547a733c98b76aa94499516934547049b117)) + + + +# 14.1.0 (2024-10-11) + + + +## 14.0.2 (2024-09-20) + + + +## 14.0.1 (2024-09-05) + + + +# 14.0.0 (2024-08-23) + + +#### Bug Fixes + +* **eslint:** turn off no-explicit-any rule for wc ([#1288](https://github.com/IgniteUI/igniteui-cli/issues/1288)) ([1ee5b0f](https://github.com/IgniteUI/igniteui-cli/commit/1ee5b0f4ecc97a93f60b95e1615bb2a75fce9238)) + + + +# 14.0.0-beta.2 (2024-07-24) + + +#### Bug Fixes + +* **igr-ts:** add new lines in base app routes file ([#1284](https://github.com/IgniteUI/igniteui-cli/issues/1284)) ([92a14ef](https://github.com/IgniteUI/igniteui-cli/commit/92a14ef05f174bb5e5bc09978c986eb8f27e57e1)) + + +#### Features + +* **igx-templates:** add AngularTypeScriptFileUpdate ([e7f6ed3](https://github.com/IgniteUI/igniteui-cli/commit/e7f6ed3d339bb444dcdbaec4cabe5dcbff27b5ac)) + + + +## 13.3.3 (2024-07-16) + + + +## 13.3.2 (2024-07-04) + + + +## 13.3.1 (2024-06-28) + + + +# 13.3.0-rc.0 (2024-05-31) + + + +## 13.2.1 (2024-05-09) + + + +# 13.2.0 (2024-04-29) + + + +# 13.2.0-rc.0 (2024-04-29) + + + +## 13.1.16 (2024-04-28) + + +#### Bug Fixes + +* **react:** fix null type build error in main.tsx ([#1242](https://github.com/IgniteUI/igniteui-cli/issues/1242)) ([2d0b579](https://github.com/IgniteUI/igniteui-cli/commit/2d0b57999b6a22445c2e7ff494310f9e94c421ea)) + + + +## 13.1.15 (2024-04-12) + + + +## 13.1.13 (2024-04-11) + + +#### Bug Fixes + +* **cli-templetes:** Replaced index.html <title> to ApplicationTitle as placeholder ([#1237](https://github.com/IgniteUI/igniteui-cli/issues/1237)) ([d622d54](https://github.com/IgniteUI/igniteui-cli/commit/d622d54fbd3becbc514bfc971eac4c97b3346255)) +* **igr-ts:** lint ignore unused vars prefix; ts strict ([#1232](https://github.com/IgniteUI/igniteui-cli/issues/1232)) ([91e35b3](https://github.com/IgniteUI/igniteui-cli/commit/91e35b3eb060f079ff6e30bdead75af7d6b98add)) + + + +## 13.1.13-beta.4 (2024-04-04) + + + +## 13.1.13-beta.3 (2024-04-04) + + +#### Features + +* **react:** remove igniteui deps from package.json and bump versions ([841a19d](https://github.com/IgniteUI/igniteui-cli/commit/841a19d2779f4f156c48368b4fa7a20b1a181eb4)) +* **react:** turn off no-explicit-any in eslint ([ef50011](https://github.com/IgniteUI/igniteui-cli/commit/ef500113afe214e8e64dea926d6937c5e5f827df)) + + + +## 13.1.12 (2024-03-21) + + +#### Features + +* **cli:** upgrade packages for React and WC ([#1198](https://github.com/IgniteUI/igniteui-cli/issues/1198)) ([16c9b8d](https://github.com/IgniteUI/igniteui-cli/commit/16c9b8dda219ebacd473a2fad5e0c0ea70d5f320)) + + + +# 13.2.0-beta.0 (2024-03-15) + + +#### Bug Fixes + +* add elements internal polyfill to base template ([c7d2396](https://github.com/IgniteUI/igniteui-cli/commit/c7d2396572a9cd77205b8727ed81089f460403e2)) +* **Imports:** Fixed class import path in .test.ts ([#1224](https://github.com/IgniteUI/igniteui-cli/issues/1224)) ([6b3a2ef](https://github.com/IgniteUI/igniteui-cli/commit/6b3a2effef4951f0fc59e5393186eb2e69f2972b)) +* **Lint:** Fixed styles typing in style-utils ([#1222](https://github.com/IgniteUI/igniteui-cli/issues/1222)) ([6ad842a](https://github.com/IgniteUI/igniteui-cli/commit/6ad842a2bc16d50c8b29ddbca5907b80e40fd798)) + + + +## 13.1.11 (2024-03-12) + + +#### Bug Fixes + +* **react:** add editorconfig and vite-env.d.ts ([555300c](https://github.com/IgniteUI/igniteui-cli/commit/555300c38df56246cb7cc08f6b25e8ae5fd316f0)) + + + +## 13.1.10 (2024-03-11) + + + +## 13.1.9 (2024-03-05) + + + +## 13.1.8 (2024-02-29) + + + +## 13.1.7 (2024-02-28) + + +#### Bug Fixes + +* **WebComponents:** Removing an unnecessary ` from package.json ([3420292](https://github.com/IgniteUI/igniteui-cli/commit/3420292eb5752eaf76cfee1e12927d8d2749b8be)) + + + +## 13.1.6 (2024-02-26) + + +#### Bug Fixes + +* **React:** Add styles to support dark themes [#29410](https://github.com/IgniteUI/igniteui-cli/issues/29410) ([#1205](https://github.com/IgniteUI/igniteui-cli/issues/1205)) ([a191348](https://github.com/IgniteUI/igniteui-cli/commit/a191348d07317cdaac43db7bd52ee3958784ae55)) + + + +## 13.1.5 (2024-01-31) + + +#### Features + +* add style-utils file to base project ([#1195](https://github.com/IgniteUI/igniteui-cli/issues/1195)) ([112f27d](https://github.com/IgniteUI/igniteui-cli/commit/112f27ddc49d9106a182c8c7768543aa1b913164)) + + + +## 13.1.3 (2024-01-17) + + +#### Bug Fixes + +* **igr-ts:** add github workflows folder ([#1192](https://github.com/IgniteUI/igniteui-cli/issues/1192)) ([2369c55](https://github.com/IgniteUI/igniteui-cli/commit/2369c556b8f84ce6a575c73b617c7581cedf5c0f)) +* open browser on app start ([#1187](https://github.com/IgniteUI/igniteui-cli/issues/1187)) ([c4e1f5c](https://github.com/IgniteUI/igniteui-cli/commit/c4e1f5c8d65dd8729083377973a40450b4899d63)) + + +#### Features + +* **igc-ts:** bump the version to 4.7.0 and add new components ([#1189](https://github.com/IgniteUI/igniteui-cli/issues/1189)) ([e9dbfd7](https://github.com/IgniteUI/igniteui-cli/commit/e9dbfd7d6212f1b8535de6a142f6140e3848f6ef)) + + + +## 13.1.1 (2023-12-14) + + +#### Features + +* **igr-ts:** add igr-ts proj type ([#1146](https://github.com/IgniteUI/igniteui-cli/issues/1146)) ([4609525](https://github.com/IgniteUI/igniteui-cli/commit/460952505758fcf1ab9b559ed6809015f3c5d3a5)), closes [#1147](https://github.com/IgniteUI/igniteui-cli/issues/1147) [#1153](https://github.com/IgniteUI/igniteui-cli/issues/1153) + + + +## 13.0.1 (2023-11-15) + + + +# 13.0.0 (2023-11-09) + + + +# 13.0.0-rc.0 (2023-11-09) + + + +## 12.0.6-beta.2 (2023-10-02) + + + +## 12.0.5 (2023-07-18) + + +#### Bug Fixes + +* memory allocation issue during build of webComponent app that uses igc-category-chart ([ee188bf](https://github.com/IgniteUI/igniteui-cli/commit/ee188bf4672b8ee96ac1b891cf8e334f44bb4929)) + + + +## 12.0.4 (2023-07-18) + + + +## 12.0.3 (2023-06-28) + + + +## 12.0.3-beta.0 (2023-06-02) + + +#### Bug Fixes + +* **igx:** replace DataGridSelectionMode with GridSelectionMode ([fc61052](https://github.com/IgniteUI/igniteui-cli/commit/fc61052d68f5fffbaf96c0f7c71220c39c7d5ef2)) + + + +## 12.0.1 (2023-05-26) + + + +# 12.0.0 (2023-05-15) + + + +# 12.0.0-rc.0 (2023-05-15) + + +#### Bug Fixes + +* **grid:** Adding missing packages to the grid template [#1109](https://github.com/IgniteUI/igniteui-cli/issues/1109) ([9c65afe](https://github.com/IgniteUI/igniteui-cli/commit/9c65afe228f182918c6e3f50e7cfec0466d7f7d2)) +* **web-components:** Adding packages in each template. ([674f55c](https://github.com/IgniteUI/igniteui-cli/commit/674f55c66bfa3308696cee3da1dd1d0e3ae64c0c)) + + +#### Features + +* **igx:** add base_with_home proj to igx-templates ([#1118](https://github.com/IgniteUI/igniteui-cli/issues/1118)) ([d84c431](https://github.com/IgniteUI/igniteui-cli/commit/d84c4310a03e35588626c57148091c6b224c7bc3)) +* **igx:** update to 16 ([#1120](https://github.com/IgniteUI/igniteui-cli/issues/1120)) ([e6efa40](https://github.com/IgniteUI/igniteui-cli/commit/e6efa40c2c748d2679b6be66252bc7732e51de29)) + + + +## 11.1.1 (2023-04-11) + + +#### Bug Fixes + +* **wc:** changing the function call [#1110](https://github.com/IgniteUI/igniteui-cli/issues/1110) ([#1113](https://github.com/IgniteUI/igniteui-cli/issues/1113)) ([5e4d1db](https://github.com/IgniteUI/igniteui-cli/commit/5e4d1dbdeeaa498278a7669b08031c51bfa2f367)) + + + +# 11.1.0 (2023-03-28) + + + +# 11.1.0-rc.0 (2023-03-24) + + + +## 11.0.2 (2023-02-17) + + + +# 11.0.0 (2022-11-23) + + +#### Features + +* add lint file for web components ([#1085](https://github.com/IgniteUI/igniteui-cli/issues/1085)) ([25498c0](https://github.com/IgniteUI/igniteui-cli/commit/25498c09b2bc4e5bc30c67c36008d97b342e3526)) + + + +# 10.1.0-beta.13 (2022-10-27) + + + +# 10.1.0-beta.12 (2022-10-27) + + +#### Features + +* **wc:** add npmrc to proj template ([#1079](https://github.com/IgniteUI/igniteui-cli/issues/1079)) ([af233e5](https://github.com/IgniteUI/igniteui-cli/commit/af233e53d72b615ce11e16a65ddf358645329ffb)) + + + +# 10.1.0-beta.11 (2022-10-25) + + + +# 10.1.0-beta.10 (2022-10-25) + + + +# 10.1.0-beta9 (2022-10-25) + + + +# 10.1.0-beta.8 (2022-10-23) + + + +# 10.1.0-beta.7 (2022-10-19) + + + +# 10.1.0-beta.6 (2022-10-19) + + + +# 10.1.0-beta.5 (2022-10-18) + + + +# 10.1.0-beta.4 (2022-10-18) + + +#### Features + +* provide default options when adding a template ([#1070](https://github.com/IgniteUI/igniteui-cli/issues/1070)) ([73e5c2c](https://github.com/IgniteUI/igniteui-cli/commit/73e5c2c0cc62b81384d6b4928103adf5ccf16153)) + + + +# 10.1.0-beta.3 (2022-10-17) + + + +# 10.1.0-beta.2 (2022-10-14) + + + +# 10.1.0-beta.1 (2022-10-14) + + + +# 10.1.0-beta.0 (2022-10-07) + + +#### Bug Fixes + +* **webcomponents:** set background and color to body ([b41a8b6](https://github.com/IgniteUI/igniteui-cli/commit/b41a8b66834ed46206cb14aa8bff0d6e3b99ef18)) +* **webcomponents:** set correct fallback for background color ([#1065](https://github.com/IgniteUI/igniteui-cli/issues/1065)) ([a976831](https://github.com/IgniteUI/igniteui-cli/commit/a976831228c204b015bd49773af4b5fc9767873a)) +* **webcomponents:** update app-root markup ([c717c37](https://github.com/IgniteUI/igniteui-cli/commit/c717c370cae66218eb4a7d5daaf0137da8c12d23)) + + +#### Features + +* **wc:** add base template for Web Components [#988](https://github.com/IgniteUI/igniteui-cli/issues/988) ([#1058](https://github.com/IgniteUI/igniteui-cli/issues/1058)) ([7574ab2](https://github.com/IgniteUI/igniteui-cli/commit/7574ab2b0221687a6ace6f627ec55caa3945236f)) + + + +## 10.0.5 (2022-09-19) + + +#### Features + +* **wc:** add accordion, tab & date-time-editor templates ([#1055](https://github.com/IgniteUI/igniteui-cli/issues/1055)) ([f2a631f](https://github.com/IgniteUI/igniteui-cli/commit/f2a631fcd18f529172af8e038929bf7f542e71ff)) + + + +## 10.0.4-beta.0 (2022-06-30) + + + +## 10.0.2 (2022-06-29) + + + +## 10.0.1 (2022-06-17) + + + +# 9.2.0 (2022-05-26) + + + +## 9.1.4 (2022-05-20) + + + +## 9.1.3 (2022-05-19) + + + +## 9.1.2 (2022-05-16) + + + +## 9.1.1 (2022-03-18) + + + +## 9.1.1-rc.0 (2022-03-17) + + +#### Bug Fixes + +* **wc:** address comments ([e1f804d](https://github.com/IgniteUI/igniteui-cli/commit/e1f804deada9f5fdf628ba25e122278cb9118507)) + + +#### Features + +* **ng:** update to 13.3.0 ([17553b0](https://github.com/IgniteUI/igniteui-cli/commit/17553b0da7586d14d91778417161f2a77864fd16)) +* **wc:** add new 2.1.0 components ([526da0c](https://github.com/IgniteUI/igniteui-cli/commit/526da0ce167659c9cfd3b21caf21efdcbc47e18d)) + + + +# 9.1.0 (2022-03-02) + + + +# 9.1.0-rc.1 (2022-02-25) + + + +# 9.1.0-beta.0 (2022-02-22) + + +#### Bug Fixes + +* **start:** pass in options for wc child process ([2df9e33](https://github.com/IgniteUI/igniteui-cli/commit/2df9e337e86e353d6d3dde6b53001af7af36fe12)) + + +#### Features + +* **wc:** adding empty view and refactor proj structure [#967](https://github.com/IgniteUI/igniteui-cli/issues/967) ([#979](https://github.com/IgniteUI/igniteui-cli/issues/979)) ([622a014](https://github.com/IgniteUI/igniteui-cli/commit/622a0143be1583cfb97d7b80cabbfe21e03c20eb)) +* **web-components:** use LitElement in the templates [#989](https://github.com/IgniteUI/igniteui-cli/issues/989) ([#1001](https://github.com/IgniteUI/igniteui-cli/issues/1001)) ([5d828bc](https://github.com/IgniteUI/igniteui-cli/commit/5d828bc6062e6971d82f588ebf59a6e489d87257)) + + + +## 9.0.6 (2022-02-04) + + + +## 9.0.5 (2022-02-04) + + + +## 9.0.5-beta.2 (2022-02-03) + + + +## 9.0.5-beta.1 (2022-01-28) + + + +## 9.0.5-beta.0 (2021-12-20) + + + +## 9.0.4 (2021-12-15) + + + +## 9.0.3 (2021-12-13) + + +#### Features + +* **typescript:** Add support for typescript 4.5.2 ([055ca5b](https://github.com/IgniteUI/igniteui-cli/commit/055ca5b7f8e54acdd8f3f1d6b6d7517916d852f3)) +* Update [@use](https://github.com/use) [@forward](https://github.com/forward) and hsla ([#961](https://github.com/IgniteUI/igniteui-cli/issues/961)) ([2ef8435](https://github.com/IgniteUI/igniteui-cli/commit/2ef8435816f8ff4f60c7e0cd4ed497a11fc815da)) + + + +## 9.0.1 (2021-11-25) + + + +# 9.0.0 (2021-11-22) + + + +# 9.0.0-rc.3 (2021-11-22) + + + +# 9.0.0-rc.2 (2021-11-19) + + +#### Bug Fixes + +* add igx-scrollbar class to body, [#14033](https://github.com/IgniteUI/igniteui-cli/issues/14033) ([b02ac58](https://github.com/IgniteUI/igniteui-cli/commit/b02ac5822015c6b1b1fdd4684a52a2eecb3eadd9)) + + + +# 9.0.0-rc.1 (2021-11-17) + + + +# 9.0.0-rc.0 (2021-11-17) + + +#### Features + +* **angular:** update to Angular 13 [#895](https://github.com/IgniteUI/igniteui-cli/issues/895) ([#896](https://github.com/IgniteUI/igniteui-cli/issues/896)) ([32f1721](https://github.com/IgniteUI/igniteui-cli/commit/32f17215290af3372b554f0e440e39b9b9b5040a)) + + + +# 8.3.0-rc.0 (2021-11-11) + + + +# 8.3.0-beta.7 (2021-11-09) + + + +# 8.3.0-beta.6 (2021-11-09) + + + +# 8.3.0-beta.5 (2021-11-09) + + + +# 8.3.0-beta.4 (2021-11-09) + + + +# 8.3.0-beta.3 (2021-11-08) + + + +# 8.3.0-beta.2 (2021-11-08) + + + +# 8.3.0-beta.1 (2021-11-04) + + + +# 8.3.0-beta.0 (2021-11-04) + + + +## 8.2.1 (2021-10-08) + + + +## 8.2.1-rc.0 (2021-10-07) + + + +# 8.2.0 (2021-10-04) + + + +# 8.2.0-alpha.0 (2021-09-30) + + + +## 8.1.2 (2021-09-28) + + +#### Bug Fixes + +* **igr-es6:** Underscore dot ([a0ce582](https://github.com/IgniteUI/igniteui-cli/commit/a0ce582e112a31c2c59d5532791ef07ab988335b)) + + + +## 8.1.1 (2021-09-02) + + +#### Bug Fixes + +* **custom-templates:** Refactor samples, ([1f50907](https://github.com/IgniteUI/igniteui-cli/commit/1f509070a9409c4100d3d9c6a5de2f443d04c556)) +* **ig-ts:** Free version path contains no /en ([e96c7f6](https://github.com/IgniteUI/igniteui-cli/commit/e96c7f673729a034eeb3d89f5adfe3061d6e9f0b)) +* **ig-ts:** Make use of all visible height ([ebfe5ed](https://github.com/IgniteUI/igniteui-cli/commit/ebfe5edada1fcd9d4f8e25f868f916ad2d862121)) +* **ig-ts:** Temp fix - add static FormsModule ([9341753](https://github.com/IgniteUI/igniteui-cli/commit/9341753ab6fed9597c6f30f9fb1383ad132282ab)) +* **ig-ts:** Update prod budgets ([4edd971](https://github.com/IgniteUI/igniteui-cli/commit/4edd97100f0ab2cdd7a00176992ca1da57de47ff)) +* **lint:** Fix all lint errors. ([659cc29](https://github.com/IgniteUI/igniteui-cli/commit/659cc2913f20092bd9ffc3f5a1a1f549db005912)) +* **lint:** Fix dum line lenght ([570accb](https://github.com/IgniteUI/igniteui-cli/commit/570accbaef8f74d01cecbeda0046edb1a8423ef1)) +* **lint:** Fix lint errors ([84394b9](https://github.com/IgniteUI/igniteui-cli/commit/84394b9c4c24ed9727c8719bd9e463cea09d482b)) +* **lint:** Fix lint errors. ([0477e7d](https://github.com/IgniteUI/igniteui-cli/commit/0477e7dd3d9b4731e1b3176316581d3e0339ca5e)) +* **templates:** Add file-saver package ([8c7a59d](https://github.com/IgniteUI/igniteui-cli/commit/8c7a59db381a32719cdadbf1534a387c90bb05d5)) + + +#### Features + +* **ig-ts:** Empty project is now angular project. ([83e5c6f](https://github.com/IgniteUI/igniteui-cli/commit/83e5c6f8370b0d10a349751d9b90f3f284d9ae69)) + + + +# 8.1.0-rc.0 (2021-07-30) + + + +# 8.1.0-beta.1 (2021-07-30) + + + +# 8.1.0-beta.0 (2021-07-28) + + +#### Features + +* update angular to v12.1 [#856](https://github.com/IgniteUI/igniteui-cli/issues/856) ([#857](https://github.com/IgniteUI/igniteui-cli/issues/857)) ([971822e](https://github.com/IgniteUI/igniteui-cli/commit/971822e343158bd107ef5b07bf60773509bd928c)) + + + +## 8.0.3 (2021-07-14) + + + +## 8.0.2 (2021-07-07) + + + +## 8.0.2-beta.1 (2021-07-06) + + + +## 8.0.2-beta.0 (2021-07-02) + + + +## 8.0.1 (2021-07-01) + + + +# 8.0.0 (2021-05-14) + + + +# 8.0.0-rc.0 (2021-05-13) + + + +# 8.0.0-alpha.1 (2021-05-13) + + + +## 7.1.1 (2021-03-15) + + + +## 7.1.1-beta.0 (2021-03-12) + + + +# 7.1.0 (2021-02-22) + + + +# 7.1.0-beta.0 (2021-02-18) + + + +## 7.0.1 (2020-11-16) + + + +# 7.0.0 (2020-11-13) + + + +# 7.0.0-rc.2 (2020-11-12) + + + +# 7.0.0-rc.1 (2020-11-10) + + + +# 7.0.0-rc.0 (2020-11-10) + + + +# 7.0.0-alpha.0 (2020-11-10) + + + +# 6.2.0 (2020-10-20) + + + +# 6.2.0-rc.0 (2020-10-16) + + + +# 6.2.0-beta.0 (2020-10-14) + + +#### Bug Fixes + +* **react-grid:** Add missing module [#791](https://github.com/IgniteUI/igniteui-cli/issues/791) ([#798](https://github.com/IgniteUI/igniteui-cli/issues/798)) ([68e2b81](https://github.com/IgniteUI/igniteui-cli/commit/68e2b81e297a5b4279f53e5bb9dff80126cc08b6)) + + + +# 6.1.0 (2020-08-12) + + + +# 6.1.0-beta.0 (2020-08-07) + + + +# 6.1.0-alpha.0 (2020-07-09) + + + +# 6.0.0 (2020-06-25) + + + +## 5.2.1 (2020-06-25) + + + +# 6.0.0-rc.0 (2020-06-25) + + +#### Features + +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([73a5670](https://github.com/IgniteUI/igniteui-cli/commit/73a56703ff4f4f0cc23d1da3c65cb4fbe114c9b4)) +* **packages:** Bump packages to Angular 10 [#767](https://github.com/IgniteUI/igniteui-cli/issues/767) ([f7e104e](https://github.com/IgniteUI/igniteui-cli/commit/f7e104e8ccee1692ff886259a7b7cf653de46573)) + + + +# 5.2.0 (2020-06-11) + + + +## 5.1.1 (2020-06-03) + + + +# 5.1.0 (2020-06-01) + + + +# 5.1.0-beta.4 (2020-06-01) + + + +# 5.1.0-beta.3 (2020-05-29) + + + +# 5.1.0-beta.2 (2020-05-28) + + + +# 5.1.0-beta.1 (2020-05-28) + + +#### Bug Fixes + +* **upgrade:** provide default fallback for incorrect package template ([9dd4d80](https://github.com/IgniteUI/igniteui-cli/commit/9dd4d80db6cf13d3fd7594790bcaaeec9a383b49)) + + + +# 5.1.0-beta.0 (2020-05-27) + + +#### Features + +* **commands:** Add 'upgrade-packages' command ([25db37d](https://github.com/IgniteUI/igniteui-cli/commit/25db37d0df1fa52d81501b74ab328330e7a60744)) +* **schematics:** update-package logic added ([197b94e](https://github.com/IgniteUI/igniteui-cli/commit/197b94e367d5e9a359c989beef01c6f35d7b54b5)) +* **step-by-step:** add prompt to upgrade to private feed packages, [#724](https://github.com/IgniteUI/igniteui-cli/issues/724) ([63c0c85](https://github.com/IgniteUI/igniteui-cli/commit/63c0c85639c1e5e5415c82f96a6b5cb5bbad4b99)) + + + +# 5.1.0-alpha.0 (2020-05-20) + + + +## 5.0.3 (2020-05-18) + + +#### Bug Fixes + +* **igx:** proj template error handler log instead throw, register only in prod ([270addd](https://github.com/IgniteUI/igniteui-cli/commit/270adddfdee8bb84892e768971e976e70550b2c2)) + + + +## 5.0.2 (2020-05-05) + + +#### Bug Fixes + +* **ig-ts:** correct grid features template variable [#702](https://github.com/IgniteUI/igniteui-cli/issues/702) ([3f09bd9](https://github.com/IgniteUI/igniteui-cli/commit/3f09bd9af64177162e4e450df2148e1b13b2f87f)) +* **start:** inherit all stdio, not just input [#699](https://github.com/IgniteUI/igniteui-cli/issues/699) ([1c03891](https://github.com/IgniteUI/igniteui-cli/commit/1c03891227bcdcff6dbff2005939e631737d8b7f)) + + + +# 5.0.0 (2020-02-11) + + + +# 5.0.0-rc.4 (2020-02-11) + + + +# 5.0.0-rc.3 (2020-02-07) + + + +# 5.0.0-rc.2 (2020-02-07) + + +#### Features + +* **ix-ts:** Update ig-ts projects [#647](https://github.com/IgniteUI/igniteui-cli/issues/647) ([a6204d8](https://github.com/IgniteUI/igniteui-cli/commit/a6204d80f50e885459306276f3584fac0488460b)) + + + +# 5.0.0-rc.0 (2020-01-31) + + +#### Bug Fixes + +* new project accepts lower case theme name [#600](https://github.com/IgniteUI/igniteui-cli/issues/600) ([#619](https://github.com/IgniteUI/igniteui-cli/issues/619)) ([d6eedea](https://github.com/IgniteUI/igniteui-cli/commit/d6eedea8998b07aa6312dea6fdbab66acd88303a)) + + + +# 5.0.0-beta.3 (2019-12-13) + + +#### Bug Fixes + +* **cli, schematics:** check for fileSystem on post install [#612](https://github.com/IgniteUI/igniteui-cli/issues/612) ([#613](https://github.com/IgniteUI/igniteui-cli/issues/613)) ([0a6a878](https://github.com/IgniteUI/igniteui-cli/commit/0a6a87877bfe42fb9d665ac7b7e4be3d5e72511f)) + + + +# 5.0.0-beta.2 (2019-12-06) + + + +# 5.0.0-beta.1 (2019-11-28) + + + +# 5.0.0-alpha.1 (2019-10-02) + + ## [14.9.2](https://github.com/IgniteUI/igniteui-cli/compare/14.9.1...14.9.2) (2026-03-11) ### What's Changed diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..43a3853f2 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,73 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Build, Test, Lint + +```bash +yarn install # REQUIRED — must use yarn (not npm) for workspace resolution +npm run build # TypeScript compilation (tsc) + config schema generation +npm run test # lint + build + tests with coverage (via pretest hook) +npm run jasmine # tests only — no lint/build/coverage +npm run lint # ESLint (flat config in eslint.config.mjs) +``` + +To run a single test: edit `spec/jasmine-runner.ts` to filter `spec_files`, then `npm run jasmine`. Tests are Jasmine specs under `spec/` (unit + acceptance) and within individual packages. + +### MCP Server (`packages/igniteui-mcp/igniteui-doc-mcp`) + +Workspace package — part of yarn workspaces and lerna. Built automatically by `npm run build` via the `build:mcp` script. Has its own `tsconfig.json` (ES2022/ESM, separate from root CJS config). + +```bash +npm run build:mcp # build MCP server (also runs as part of npm run build) +cd packages/igniteui-mcp/igniteui-doc-mcp +npm run build:db # build SQLite DB from compressed docs (manual step) +npm run pipeline:angular # incremental doc pipeline (also: react, blazor, webcomponents) +npm run pipeline:angular:full # full rebuild pipeline +npm run inspector # test with MCP Inspector +``` + +## Architecture + +**Monorepo** managed with lerna + yarn workspaces. Five packages: + +| Package | npm | Path | +|---------|-----|------| +| CLI (entry point) | `igniteui-cli` | `packages/cli` | +| Core (shared logic) | `@igniteui/cli-core` | `packages/core` | +| Angular Templates | `@igniteui/angular-templates` | `packages/igx-templates` | +| Angular Schematics | `@igniteui/angular-schematics` | `packages/ng-schematics` | +| MCP Server | `@igniteui/mcp-server` | `packages/igniteui-mcp/igniteui-doc-mcp` | + +**Core is the dependency root** — changes to `packages/core` affect all other packages. Always rebuild the full monorepo after core changes. + +### Build System + +- TypeScript compiled with `tsc` directly (no bundler). Two configs: `tsconfig.json` (dev) and `tsconfig-pack.json` (production). +- `packages/core/types/Config.ts` is source of truth for config schema. Modifying it requires `npm run config-schema` (included in `npm run build`). +- Monorepo targets ES6/CommonJS. MCP server targets ES2022 with Node16 module resolution (`"type": "module"`). +- Path aliases in tsconfig: `@igniteui/cli-core` → `packages/core`, `@igniteui/angular-templates` → `packages/igx-templates`, etc. + +### Template System + +- Handlebars for template processing +- Templates in `packages/cli/templates/**/files/` and `packages/igx-templates/` +- Component/template IDs (e.g., "grid", "combo") used by `ig add` command +- Default framework is **jQuery** when not specified + +### MCP Server + +- `McpServer` from `@modelcontextprotocol/sdk` with stdio transport +- Two modes: **Remote** (default, proxies to `DOCS_BACKEND_URL`) and **Local** (`--local` flag, uses sql.js WASM with FTS4) +- Framework detection via component prefix: `Igx` → Angular, `Igr` → React, `Igc` → Web Components, `Igb` → Blazor +- DB build uses `better-sqlite3` (native, dev only); runtime uses `sql.js` (WASM) +- Doc compression uses OpenAI API (`OPENAI_API_KEY` in `.env`) +- Git submodules under `packages/igniteui-mcp/igniteui-doc-mcp/` provide documentation source repos +- Consult `packages/igniteui-mcp/igniteui-doc-mcp/docs/knowledgebase.md` before debugging pipeline problems + +## Key Conventions + +- **yarn for install, npm for scripts** +- CI runs on Node 20 with `yarn --frozen-lockfile` +- ESLint: `no-var`, `no-eval`, `prefer-const`, `no-console` (off in test files), `no-duplicate-imports` +- Test files match pattern `*[sS]pec.ts` — found in `spec/`, `packages/cli/migrations/`, `packages/igx-templates/`, `packages/ng-schematics/` diff --git a/README.md b/README.md index bcd5e256d..fd8de6b0a 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ This monorepo contains several packages that combine into the `igniteui-cli`: | [@igniteui/angular-templates](https://www.npmjs.com/package/@igniteui/angular-templates) | Contains the template definitions for Angular components | [packages/igx-templates](./packages/igx-templates) | | [@igniteui/angular-schematics](https://www.npmjs.com/package/@igniteui/angular-schematics) | IgniteUI CLI implementation to be used with Angular CLI's schematics engine | [packages/ng-schematics](./packages/ng-schematics) | | [igniteui-cli](https://www.npmjs.com/package/igniteui-cli) | Standalone IgniteUI CLI tool for React, jQuery and Angular | [packages/cli](./packages/cli) | +| [@igniteui/mcp-server](https://www.npmjs.com/package/@igniteui/mcp-server) | MCP server providing AI assistants with Ignite UI documentation and API reference | [packages/igniteui-mcp/igniteui-doc-mcp](./packages/igniteui-mcp/igniteui-doc-mcp) | ## Table of Contents @@ -50,6 +51,9 @@ This monorepo contains several packages that combine into the `igniteui-cli`: * [Generate Ignite UI for React project](#generate-ignite-ui-for-react-project) * [Adding components](#adding-components) * [Build and run](#build-and-run) +* [MCP Server](#mcp-server) + * [Using with AI Assistants](#using-with-ai-assistants) + * [Testing with MCP Inspector](#testing-with-mcp-inspector) * [Schematics](#schematics) * [Schematic Definitions](#schematic-definitions) * [Contribution](#contribution) @@ -137,6 +141,54 @@ ig build ig start ``` +## MCP Server + +The CLI includes a bundled [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server that provides AI assistants with Ignite UI documentation search, API reference lookup, and scaffolding guidance for Angular, React, Blazor, and Web Components. + +Start the MCP server: +```bash +ig mcp +``` + +The server runs over stdio and supports the following options: +```bash +ig mcp --remote <url> # Use a remote backend instead of the local SQLite database +ig mcp --debug # Enable debug logging to mcp-server.log +``` + +### Using with AI Assistants + +Configure your MCP client (e.g., VS Code, Claude Desktop, Cursor) to use the CLI as the MCP server: + +```json +{ + "mcpServers": { + "igniteui": { + "command": "ig", + "args": ["mcp"] + } + } +} +``` + +The MCP server exposes the following tools to AI assistants: + +| Tool | Description | +|------|-------------| +| `list_components` | List available Ignite UI component docs for a framework | +| `get_doc` | Fetch full markdown content of a specific component doc | +| `search_docs` | Full-text search across Ignite UI documentation | +| `get_api_reference` | Retrieve the full API reference for a component or class | +| `search_api` | Search API entries by keyword or partial component name | +| `generate_ignite_app` | Return a setup guide for a new Ignite UI project | + +### Testing with MCP Inspector + +To interactively test and debug the MCP server tools: +```bash +npx @modelcontextprotocol/inspector ig mcp +``` + ## Schematics You can also add `Ignite UI for Angular` components to your projects by using the `igniteui/angular-schematics` package. It included schematic definitions for most of the logic present in the [`igniteui-cli`](/packages/cli). These can be called in any existing Angular project or even when creating one. You can learn more about the schematics package on from its [readme](/package/ng-schematics). @@ -147,12 +199,88 @@ See the [Contribution guide](https://github.com/IgniteUI/igniteui-cli/blob/maste ### Run locally 1. Clone the repository 2. Install dependencies with `yarn install` -3. To build the packages, run `yarn build` in the project `root`. -4. Open in Visual Studio Code +3. Build the MCP server and bundle it into the CLI: + ```bash + cd packages/igniteui-mcp/igniteui-doc-mcp + npm install + npm run build + cd ../../.. + npm run build:mcp-bundle + ``` +4. Build the monorepo packages: `npm run build` +5. Open in Visual Studio Code There is a predefined launch.config file for VS Code in the root folder, so you can use VS Code View/Debug window and choose one of the predefined actions. These include launching the step by step guide, create new project for a particular framework or add components. -5. Hit Start Debugging/F5 +6. Hit Start Debugging/F5 + +#### MCP Server development + +The MCP server at `packages/igniteui-mcp/igniteui-doc-mcp` has its own build pipeline, separate from the monorepo. It uses ESM (ES2022, Node16 modules) while the rest of the monorepo uses CommonJS. See [DEVELOPMENT.md](./packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md) for the full MCP server development guide. + +**Build the MCP server:** +```bash +cd packages/igniteui-mcp/igniteui-doc-mcp +npm install # Install MCP-specific dependencies (separate from yarn workspaces) +npm run build # Compile TypeScript + copy SQLite DB to dist/ +``` + +**Build API reference documentation:** + +The MCP server includes API reference docs for Angular, React, and Web Components. Angular and Web Components docs are generated from framework submodules via TypeDoc (submodules are auto-initialized by the build scripts). React uses a pre-built TypeDoc JSON model checked into git. + +```bash +cd packages/igniteui-mcp/igniteui-doc-mcp +npm run build:docs:angular # Angular: init submodule → TypeDoc → markdown + index.json +npm run build:docs:webcomponents # Web Components: init submodule → build lib → TypeDoc → markdown + index.json +npm run build:docs:all # Build both +``` + +> **Note:** Web Components requires a one-time library build (`npm run build:publish` in the submodule) before TypeDoc can run. The build script handles this automatically. + +**Bundle MCP into CLI** (from the repo root): +```bash +npm run build:mcp-bundle # Copies dist/ and docs/ into packages/cli/mcp/ +``` + +This copies the compiled MCP server, SQLite documentation database, and API reference docs into the CLI package. The `packages/cli/mcp/` directory is a build artifact (gitignored) and must be regenerated before publishing. + +**Test the MCP server locally:** +```bash +npm run build:mcp-bundle +npm run build +node packages/cli/lib/cli.js mcp # Start via CLI +# or directly: +node packages/cli/mcp/dist/index.js # Start the bundled server +``` + +#### Building CLI package with bundled MCP server + +The CLI package includes the MCP server as a bundled build artifact (not an npm dependency). To produce a complete CLI package with full MCP functionality, follow these steps: + +```bash +# 1. Install monorepo dependencies +yarn install + +# 2. Build the MCP server +cd packages/igniteui-mcp/igniteui-doc-mcp +npm install +npm run build # Compile TypeScript + copy SQLite DB + +# 3. Build API reference docs (optional but recommended for full functionality) +npm run build:docs:all # Init submodules + generate Angular + WC API docs via TypeDoc + +# 4. Bundle MCP into CLI (from repo root) +cd ../../.. +npm run build:mcp-bundle # Copy dist/ + docs/ → packages/cli/mcp/ + +# 5. Build all packages for publishing +npm run build-pack +``` + +After step 5, `npm pack` from the repo root or `packages/cli/` will produce a tarball with the MCP server, documentation database, and API reference docs all included. + +> **Skipping API docs:** If you skip step 3, the MCP server will still work for `list_components`, `get_doc`, `search_docs`, and `generate_ignite_app` tools using the bundled SQLite database. Only the `get_api_reference` and `search_api` tools require API docs. ## Data Collection diff --git a/lerna.json b/lerna.json index 65c6f5b00..7642ebe5b 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,7 @@ { "packages": [ - "packages/*" + "packages/*", + "packages/igniteui-mcp/igniteui-doc-mcp" ], "npmClient": "yarn", "version": "independent", diff --git a/package.json b/package.json index 0ca301434..2eff0ccdc 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,9 @@ "release": "lerna version --conventional-commits --force-publish=* --yes --no-git-tag-version --no-push", "deploy": "lerna exec 'npm publish --tag'", "version": "node ./scripts/versionScript.js", - "build": "node ./node_modules/typescript/lib/tsc.js && npm run config-schema", - "build-pack": "node ./node_modules/typescript/lib/tsc.js -p tsconfig-pack.json && npm run config-schema", + "build": "node ./node_modules/typescript/lib/tsc.js && npm run config-schema && npm run build:mcp", + "build:mcp": "cd packages/igniteui-mcp/igniteui-doc-mcp && npx tsc && npx tsx scripts/build.ts", + "build-pack": "node ./node_modules/typescript/lib/tsc.js -p tsconfig-pack.json && npm run config-schema && npm run build:mcp", "pretest": "npm run lint && npm run build", "test": "nyc npm run jasmine", "jasmine": "node spec/jasmine-runner.js", @@ -42,7 +43,8 @@ "**/*.d.ts", "output/", "packages/cli/templates/**/files/", - "packages/igx-templates/" + "packages/igx-templates/", + "packages/igniteui-mcp/" ], "reporter": [ "lcov", @@ -87,6 +89,7 @@ "typescript-json-schema": "^0.65.1" }, "workspaces": [ - "packages/*" + "packages/*", + "packages/igniteui-mcp/igniteui-doc-mcp" ] } diff --git a/packages/cli/lib/cli.ts b/packages/cli/lib/cli.ts index 1909f6248..9ab0b7661 100644 --- a/packages/cli/lib/cli.ts +++ b/packages/cli/lib/cli.ts @@ -9,6 +9,7 @@ import { doc, generate, list, + mcp, newCommand, start, test, @@ -54,6 +55,7 @@ export async function run(args = null) { .command(test) .command(list) .command(upgrade) + .command(mcp) .version(false) // disable built-in `yargs.version` to override it with our custom option .options({ version: { diff --git a/packages/cli/lib/commands/index.ts b/packages/cli/lib/commands/index.ts index bc048b730..af5a4f3b0 100644 --- a/packages/cli/lib/commands/index.ts +++ b/packages/cli/lib/commands/index.ts @@ -4,6 +4,7 @@ export { default as config } from "./config"; export { default as doc } from "./doc"; export { default as generate } from "./generate"; export { default as list } from "./list"; +export { default as mcp } from "./mcp"; export { default as newCommand } from "./new"; export { default as start } from "./start"; export { default as test } from "./test"; diff --git a/packages/cli/lib/commands/mcp.ts b/packages/cli/lib/commands/mcp.ts new file mode 100644 index 000000000..6b18fbdbb --- /dev/null +++ b/packages/cli/lib/commands/mcp.ts @@ -0,0 +1,74 @@ +import * as fs from "fs"; +import * as path from "path"; +import { spawn } from "child_process"; +import { CommandType, PositionalArgs } from "./types"; +import { ArgumentsCamelCase } from "yargs"; + +const command: CommandType = { + command: "mcp", + describe: "Starts the Ignite UI MCP server for AI assistant integration", + templateManager: null, + builder: (yargs) => { + return yargs + .option("remote", { + describe: "Backend URL for remote mode (uses HTTP instead of local SQLite)", + type: "string", + requiresArg: true + }) + .option("debug", { + describe: "Enable debug logging to mcp-server.log", + type: "boolean", + default: false + }) + .usage(""); + }, + async handler(argv: ArgumentsCamelCase<PositionalArgs>) { + let mcpEntry: string; + try { + const mcpPkgJson = require.resolve("@igniteui/mcp-server/package.json"); + mcpEntry = path.resolve(path.dirname(mcpPkgJson), "dist", "index.js"); + } catch { + process.stderr.write( + "MCP server package not found. Install it first:\n" + + " yarn install\n" + ); + process.exitCode = 1; + return; + } + + if (!fs.existsSync(mcpEntry)) { + process.stderr.write( + "MCP server not built. Build it first:\n" + + " npm run build:mcp\n" + ); + process.exitCode = 1; + return; + } + + const args: string[] = []; + if (argv.remote) { + args.push("--remote", argv.remote as string); + } + if (argv.debug) { + args.push("--debug"); + } + + return new Promise<void>((resolve, reject) => { + const child = spawn(process.execPath, [mcpEntry, ...args], { + stdio: "inherit" + }); + + child.on("error", (err) => { + process.stderr.write(`Failed to start MCP server: ${err.message}\n`); + reject(err); + }); + + child.on("exit", (code) => { + process.exitCode = code ?? 0; + resolve(); + }); + }); + } +}; + +export default command; diff --git a/packages/cli/lib/commands/types.ts b/packages/cli/lib/commands/types.ts index a3e9d3d52..21575f0a3 100644 --- a/packages/cli/lib/commands/types.ts +++ b/packages/cli/lib/commands/types.ts @@ -12,6 +12,7 @@ export const DOC_COMMAND_NAME = "doc"; export const TEST_COMMAND_NAME = "test"; export const LIST_COMMAND_NAME = "list"; export const UPGRADE_COMMAND_NAME = "upgrade-packages"; +export const MCP_COMMAND_NAME = "mcp"; export const ALL_COMMANDS = new Set([ ADD_COMMAND_NAME, @@ -23,7 +24,8 @@ export const ALL_COMMANDS = new Set([ DOC_COMMAND_NAME, TEST_COMMAND_NAME, LIST_COMMAND_NAME, - UPGRADE_COMMAND_NAME + UPGRADE_COMMAND_NAME, + MCP_COMMAND_NAME ]); export interface PositionalArgs { diff --git a/packages/cli/package.json b/packages/cli/package.json index 623ae2215..607d7c253 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "igniteui-cli", - "version": "14.9.2", + "version": "14.10.0-alpha.4", "description": "CLI tool for creating Ignite UI projects", "keywords": [ "CLI", @@ -66,8 +66,9 @@ "all": true }, "dependencies": { - "@igniteui/angular-templates": "~21.1.1492", - "@igniteui/cli-core": "~14.9.2", + "@igniteui/angular-templates": "^21.1.14100-alpha.4", + "@igniteui/cli-core": "^14.10.0-alpha.4", + "@igniteui/mcp-server": "^14.10.0-alpha.4", "@inquirer/prompts": "^7.9.0", "@types/yargs": "^17.0.33", "chalk": "^5.3.0", diff --git a/packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts b/packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts index 77ce5bea8..ce04939d9 100644 --- a/packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts +++ b/packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts @@ -10,7 +10,7 @@ class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-ts"; this.name = "Bullet Graph"; this.description = `allows for a linear and concise view of measures compared against a scale.`; - this.packages = ["igniteui-react-gauges@~19.5.2"]; + this.packages = ["igniteui-react-gauges@~19.2.3"]; } } module.exports = new IgrTsBulletGraphTemplate(); diff --git a/packages/cli/templates/react/igr-ts/category-chart/default/index.ts b/packages/cli/templates/react/igr-ts/category-chart/default/index.ts index 95bd524ab..24891fcb6 100644 --- a/packages/cli/templates/react/igr-ts/category-chart/default/index.ts +++ b/packages/cli/templates/react/igr-ts/category-chart/default/index.ts @@ -11,7 +11,7 @@ class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate { this.name = "Category Chart"; this.description = `makes visualizing category data easy. Simplifies the complexities of the data visualization domain into manageable API`; - this.packages = ["igniteui-react-charts@~19.5.2"]; + this.packages = ["igniteui-react-charts@~19.2.3"]; } } module.exports = new IgrTsCategoryChartTemplate(); diff --git a/packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts b/packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts index 36e521be0..374f1ef00 100644 --- a/packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts +++ b/packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts @@ -10,7 +10,7 @@ class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-ts"; this.name = "Doughnut Chart"; this.description = `proportionally illustrate the occurrences of variables.`; - this.packages = ["igniteui-react-charts@~19.5.2"]; + this.packages = ["igniteui-react-charts@~19.2.3"]; } } module.exports = new IgrTsDoughnutChartTemplate(); diff --git a/packages/cli/templates/react/igr-ts/financial-chart/default/index.ts b/packages/cli/templates/react/igr-ts/financial-chart/default/index.ts index d2bcec9ce..322c3781b 100644 --- a/packages/cli/templates/react/igr-ts/financial-chart/default/index.ts +++ b/packages/cli/templates/react/igr-ts/financial-chart/default/index.ts @@ -12,7 +12,7 @@ class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate { this.name = "Financial Chart"; this.description = `charting component that makes it easy to visualize financial data by using a simple and intuitive API.`; - this.packages = ["igniteui-react-charts@~19.5.2"]; + this.packages = ["igniteui-react-charts@~19.2.3"]; } } module.exports = new IgrTsFinancialChartTemplate(); diff --git a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx index 40afd1495..c99daeeb6 100644 --- a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx +++ b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx @@ -1,6 +1,7 @@ import style from './style.module.css'; +import 'igniteui-react-grids/grids'; import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; -import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css' import data from './data'; @@ -18,7 +19,7 @@ export default function $(ClassName)() { </div> <div className={style.container}> <div className={style.grid}> - <IgrGrid data={data}> + <IgrGrid autoGenerate={false} data={data}> <IgrColumn field="ProductID" header="Product ID" diff --git a/packages/cli/templates/react/igr-ts/grid/basic/index.ts b/packages/cli/templates/react/igr-ts/grid/basic/index.ts index 1e415b602..cc7df939c 100644 --- a/packages/cli/templates/react/igr-ts/grid/basic/index.ts +++ b/packages/cli/templates/react/igr-ts/grid/basic/index.ts @@ -14,7 +14,8 @@ class GridTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-ts"; this.components = ["Grid"]; this.controlGroup = "Data Grids"; - this.packages = ["igniteui-react-grids@~19.6.0"]; + this.packages = ["igniteui-react-grids@~19.2.1", "igniteui-react-inputs@~19.2.3", + "igniteui-react-layouts@~19.2.3", "igniteui-react@~19.2.1"]; this.hasExtraConfiguration = false; } diff --git a/packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts b/packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts index a01cef2b4..e6004aff9 100644 --- a/packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts +++ b/packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts @@ -10,7 +10,7 @@ class IgrTsLinearGaugeTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-ts"; this.name = "Linear Gauge"; this.description = `value compared against a scale and one or more ranges.`; - this.packages = ["igniteui-react-gauges@~19.5.2"]; + this.packages = ["igniteui-react-gauges@~19.2.3"]; } } module.exports = new IgrTsLinearGaugeTemplate(); diff --git a/packages/cli/templates/react/igr-ts/pie-chart/default/index.ts b/packages/cli/templates/react/igr-ts/pie-chart/default/index.ts index 09cd80b81..40709a4d1 100644 --- a/packages/cli/templates/react/igr-ts/pie-chart/default/index.ts +++ b/packages/cli/templates/react/igr-ts/pie-chart/default/index.ts @@ -10,7 +10,7 @@ class IgrTsPieChartTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-ts"; this.name = "Pie Chart"; this.description = `easily illustate the proportions of data entries`; - this.packages = ["igniteui-react-charts@~19.5.2"]; + this.packages = ["igniteui-react-charts@~19.2.3"]; } } module.exports = new IgrTsPieChartTemplate(); diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/AGENTS.md b/packages/cli/templates/react/igr-ts/projects/_base/files/AGENTS.md new file mode 100644 index 000000000..5e32f983a --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/AGENTS.md @@ -0,0 +1,111 @@ +You are an expert in building front-end web applications with React with deep knowledge of modern hooks, TypeScript, and cutting-edge frontend architecture. You are familiar with the igniteui-react library. You prioritize performance optimizations and accessibility best practices in your work. + +## Your Expertise + +- **React 19.2 Features**: Expert in `<Activity>` component, `useEffectEvent()`, and React Performance Tracks +- **React 19 Core Features**: Mastery of `use()` hook, `useFormStatus`, `useOptimistic`, `useActionState`, and Actions API +- **Concurrent Rendering**: Expert knowledge of concurrent rendering patterns, transitions, and Suspense boundaries +- **Modern Hooks**: Deep knowledge of all React hooks including new ones and advanced composition patterns +- **TypeScript Integration**: Advanced TypeScript patterns with improved React 19 type inference and type safety +- **Form Handling**: Expert in modern form patterns with Actions API, validation, and optimistic updates +- **State Management**: Mastery of React Context, Zustand, Redux Toolkit, and choosing the right solution +- **Performance Optimization**: Expert in React.memo, useMemo, useCallback, code splitting, lazy loading, and Core Web Vitals +- **Testing Strategies**: Comprehensive testing with Vitest, React Testing Library, and Playwright/Cypress +- **Accessibility**: WCAG compliance, semantic HTML, ARIA attributes, and keyboard navigation +- **Vite**: Configuration, plugins, environment variables, and build optimization +- **Design Systems**: Material UI, Shadcn/ui, and custom design system architecture + +## Your Approach + +- **React 19.2 First**: Leverage the latest features including `<Activity>`, `useEffectEvent()`, and Performance Tracks +- **Modern Hooks**: Use `use()`, `useFormStatus`, `useOptimistic`, and `useActionState` for cutting-edge patterns +- **Actions for Forms**: Use Actions API for client-side form handling +- **Concurrent by Default**: Leverage concurrent rendering with `startTransition` and `useDeferredValue` +- **TypeScript Throughout**: Use comprehensive type safety with React 19's improved type inference +- **Performance-First**: Optimize rendering, bundle size, and runtime performance +- **Accessibility by Default**: Build inclusive interfaces following WCAG 2.1 AA standards +- **Test-Driven**: Write tests alongside components using Vitest and React Testing Library best practices +- **Modern Development**: Use Vite, ESLint, Prettier, and modern tooling for optimal DX + +## Guidelines + +- Always use functional components with hooks - class components are legacy +- Leverage React 19.2 features: `<Activity>`, `useEffectEvent()`, Performance Tracks +- Use the `use()` hook for promise handling and async data fetching +- Implement forms with Actions API and `useFormStatus` for loading states +- Use `useOptimistic` for optimistic UI updates during async operations +- Use `useActionState` for managing action state and form submissions +- Leverage `useEffectEvent()` to extract non-reactive logic from effects (React 19.2) +- Use `<Activity>` component to manage UI visibility and state preservation (React 19.2) +- **Ref as Prop** (React 19): Pass `ref` directly as prop - no need for `forwardRef` anymore +- **Context without Provider** (React 19): Render context directly instead of `Context.Provider` +- Use `startTransition` for non-urgent updates to keep the UI responsive +- Leverage Suspense boundaries for async data fetching and code splitting +- No need to import React in every file - new JSX transform handles it +- Use strict TypeScript with proper interface design and discriminated unions +- Implement proper error boundaries for graceful error handling +- Use semantic HTML elements (`<button>`, `<nav>`, `<main>`, etc.) for accessibility +- Ensure all interactive elements are keyboard accessible +- Optimize images with lazy loading and modern formats (WebP, AVIF) +- Use React DevTools Performance panel with React 19.2 Performance Tracks +- Implement code splitting with `React.lazy()` and dynamic imports +- Use proper dependency arrays in `useEffect`, `useMemo`, and `useCallback` +- Ref callbacks can now return cleanup functions for easier cleanup management +- Use Vite's `import.meta.env` for environment variables + +## Common Scenarios You Excel At + +- **Building Modern React Apps**: Setting up projects with Vite, TypeScript, React 19.2, and modern tooling +- **Implementing New Hooks**: Using `use()`, `useFormStatus`, `useOptimistic`, `useActionState`, `useEffectEvent()` +- **React 19 Quality-of-Life Features**: Ref as prop, context without provider, ref callback cleanup, document metadata +- **Form Handling**: Creating forms with Actions API, validation, and optimistic updates +- **State Management**: Choosing and implementing the right state solution (Context, Zustand, Redux Toolkit) +- **Async Data Fetching**: Using `use()` hook, Suspense, and error boundaries for data loading +- **Performance Optimization**: Analyzing bundle size, implementing code splitting, optimizing re-renders +- **Component Visibility**: Implementing `<Activity>` component for state preservation across navigation +- **Accessibility Implementation**: Building WCAG-compliant interfaces with proper ARIA and keyboard support +- **Complex UI Patterns**: Implementing modals, dropdowns, tabs, accordions, and data tables +- **Animation**: Using React Spring, Framer Motion, or CSS transitions for smooth animations +- **Testing**: Writing comprehensive unit, integration, and e2e tests +- **TypeScript Patterns**: Advanced typing for hooks, HOCs, render props, and generic components +- **Vite Configuration**: Configuring plugins, aliases, proxies, and build output + +## Response Style + +- Provide complete, working React 19.2 code following modern best practices +- Include all necessary imports (no React import needed thanks to new JSX transform) +- Add inline comments explaining React 19 patterns and why specific approaches are used +- Show proper TypeScript types for all props, state, and return values +- Demonstrate when to use new hooks like `use()`, `useFormStatus`, `useOptimistic`, `useEffectEvent()` +- Show proper error handling with error boundaries +- Include accessibility attributes (ARIA labels, roles, etc.) +- Provide testing examples when creating components +- Highlight performance implications and optimization opportunities +- Show both basic and production-ready implementations +- Mention React 19.2 features when they provide value + +## Advanced Capabilities You Know + +- **`use()` Hook Patterns**: Advanced promise handling, resource reading, and context consumption +- **`<Activity>` Component**: UI visibility and state preservation patterns (React 19.2) +- **`useEffectEvent()` Hook**: Extracting non-reactive logic for cleaner effects (React 19.2) +- **Actions API**: Client-side form actions and progressive enhancement patterns +- **Optimistic Updates**: Complex optimistic UI patterns with `useOptimistic` +- **Concurrent Rendering**: Advanced `startTransition`, `useDeferredValue`, and priority patterns +- **Suspense Patterns**: Nested suspense boundaries, batched reveals, and error handling +- **Ref as Prop (React 19)**: Using refs without `forwardRef` for cleaner component APIs +- **Context Without Provider (React 19)**: Rendering context directly for simpler code +- **Ref Callbacks with Cleanup (React 19)**: Returning cleanup functions from ref callbacks +- **Document Metadata (React 19)**: Placing `<title>`, `<meta>`, `<link>` directly in components +- **useDeferredValue Initial Value (React 19)**: Providing initial values for better UX +- **Custom Hooks**: Advanced hook composition, generic hooks, and reusable logic extraction +- **Render Optimization**: Understanding React's rendering cycle and preventing unnecessary re-renders +- **Context Optimization**: Context splitting, selector patterns, and preventing context re-render issues +- **Portal Patterns**: Using portals for modals, tooltips, and z-index management +- **Error Boundaries**: Advanced error handling with fallback UIs and error recovery +- **Performance Profiling**: Using React DevTools Profiler and Performance Tracks (React 19.2) +- **Bundle Analysis**: Analyzing and optimizing bundle size with Vite's build output and rollup-plugin-visualizer + +## UI Components + +- Use `igniteui-react`. diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/CLAUDE.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/CLAUDE.md new file mode 100644 index 000000000..3397e20e2 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/CLAUDE.md @@ -0,0 +1,3 @@ +Strictly follow the rules in ../AGENTS.md + +The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory. \ No newline at end of file diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md new file mode 100644 index 000000000..46c99815f --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md @@ -0,0 +1,161 @@ +--- +name: igniteui-react-components +description: This skill identifies the right Ignite UI for React components for any UI pattern and covers installing, importing, and using them — including JSX patterns, event handling, refs, forms, and TypeScript. Use this when choosing components, setting up a React project, writing component JSX, handling events, or integrating with React state and form libraries. +user-invocable: true +--- + +# Ignite UI for React Components + +This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript. + +## Example Usage + +- "What component should I use to display a list of items with actions?" +- "I need a date picker for a booking form in React" +- "Build a dashboard layout with cards and a data grid" +- "What's the best component for a navigation sidebar?" +- "I need a searchable dropdown with multi-select" +- "How do I install Ignite UI for React?" +- "Set up igniteui-react in my project" +- "How do I handle events on IgrCombo?" +- "How do I use IgrInput with React Hook Form?" +- "Show me how to use refs with IgrDialog" +- "What TypeScript types should I use for IgrButton props?" +- "How do I pass children vs slots to Ignite UI components?" + +## Related Skills + +- [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Theme and style components +- [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — Reduce bundle size + +## When to Use + +- Deciding which component fits a UI requirement +- User describes a UI pattern and needs a matching component name +- User wants to explore what components are available +- Setting up Ignite UI for React in a new or existing project +- Writing JSX that uses Ignite UI components +- Handling events from Ignite UI components +- Integrating components with React state or form libraries +- Using refs to call imperative methods on components +- Working with TypeScript prop types + +--- + +## Content Guide + +This skill is organized into focused reference files. Load the appropriate file for the situation: + +| Topic | File | When to Use | +|---|---|---| +| Component Catalogue | [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) | Mapping UI patterns to components, available packages, common UI scenarios | +| Installation & Setup | [INSTALLATION.md](./reference/INSTALLATION.md) | Setting up packages, importing theme CSS, Next.js setup | +| JSX Patterns | [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md) | Props, children, slots, IgrTabs content vs navigation | +| Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events | +| Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form | +| Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing | +| Reveal SDK | [REVEAL-SDK.md](./reference/REVEAL-SDK.md) | Embedded BI dashboards, theme sync | +| Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions | + +--- + +## Quick Start + +### 1. Install + +```bash +npm install igniteui-react +``` + +### 2. Import Theme CSS (REQUIRED) + +```tsx +// main.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +> **CRITICAL:** Without the theme CSS, components will render without styles and icons will be broken. See [INSTALLATION.md](./reference/INSTALLATION.md) for all available themes and setup. + +### 3. Use Components + +```tsx +import { IgrButton, IgrInput } from 'igniteui-react'; + +function App() { + return ( + <div> + <IgrInput label="Name" /> + <IgrButton><span>Submit</span></IgrButton> + </div> + ); +} +``` + +> **No `defineComponents()` needed.** React wrappers auto-register. See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) for exceptions (charts, gauges, maps). + +--- + +## Key Concepts + +### Choosing the Right Component + +Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI need to the right `Igr*` component and package. For quick guidance: + +- **MIT package** (`igniteui-react`) — inputs, buttons, layout, navigation, notifications, scheduling, AI chat +- **Lightweight grid** (MIT) — `IgrGridLite` from `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite`) +- **Commercial** — `igniteui-react-grids` (advanced grids), `igniteui-react-charts`, `igniteui-react-gauges`, `igniteui-react-maps` + +### Theme CSS Import + +- **Always import theme CSS** before using components. **For grids**, also import `igniteui-react-grids/grids/themes/...` +- see [INSTALLATION.md](./reference/INSTALLATION.md) + +### JSX Patterns + +- Use props just like any React component +- Use `slot` attribute for named slots: `<span slot="icon">📊</span>` +- See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md) + +### IgrTabs: Content vs Navigation + +- **Content panels**: Use `IgrTab` with inline content (label via `label` prop or `slot="label"`) +- **Navigation (router)**: Use **only `IgrTab`** with label-only (no inline content) +- See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md) + +### Events + +- Events are `CustomEvent` objects, not React `SyntheticEvent` +- Access data via `e.target` or `e.detail` +- See [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) + +### Refs + +- Use `useRef<IgrDialog>(null)` with the component type: +- See [REFS-FORMS.md](./reference/REFS-FORMS.md) + +### Charts, Gauges, Maps & Grid Lite + +- **Charts/Gauges/Maps require explicit registration**: `IgrCategoryChartModule.register()` +- **All require sized container**: `min-width`, `min-height`, or `flex-grow` +- **Grid Lite** requires both `igniteui-react` and `igniteui-grid-lite` packages, import from `igniteui-react/grid-lite` +- See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) + +--- + +## Best Practices + +1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs +2. **Import theme CSS first** — components need it to render correctly +3. **Register chart/gauge/map modules** — call `.register()` at module level +4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions +5. **Use named imports** — enables tree-shaking +6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent` +7. **Use refs sparingly** — prefer declarative props +8. **Check slot names** in the docs + +## Additional Resources + +- [Ignite UI for React — Getting Started](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started) +- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples) +- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react) +- [@lit/react Documentation](https://lit.dev/docs/frameworks/react/) diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md new file mode 100644 index 000000000..d89896e5b --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -0,0 +1,127 @@ +# Charts, Gauges, Maps & Grid Lite + +## Module Registration + +> **⚠️ IMPORTANT:** Unlike core UI components (from `igniteui-react`), chart, gauge, and map components from `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` **require explicit module registration** before use. You must import the corresponding `*Module` class and call `.register()` at the module level (outside the component function). +> +> **Grid Lite** (`IgrGridLite` from `igniteui-react/grid-lite`) is a React wrapper component that works like any other React component — no `.register()` needed, but requires both `igniteui-react` and `igniteui-grid-lite` packages installed. + +### Registration Syntax + +```tsx +import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts'; + +// ⚠️ REQUIRED — register the module before using the component +IgrCategoryChartModule.register(); +``` + +### Common Module Registrations + +| Component | Module Import | Registration | +|---|---|---| +| `IgrCategoryChart` | `IgrCategoryChartModule` | `IgrCategoryChartModule.register()` | +| `IgrPieChart` | `IgrPieChartModule` | `IgrPieChartModule.register()` | +| `IgrFinancialChart` | `IgrFinancialChartModule` | `IgrFinancialChartModule.register()` | +| `IgrRadialGauge` | `IgrRadialGaugeModule` | `IgrRadialGaugeModule.register()` | +| `IgrLinearGauge` | `IgrLinearGaugeModule` | `IgrLinearGaugeModule.register()` | +| `IgrGeographicMap` | `IgrGeographicMapModule` | `IgrGeographicMapModule.register()` | +| `IgrGridLite` | (no registration needed) | N/A — works like standard React component | + +## Container Sizing (REQUIRED) + +> **⚠️ CRITICAL:** Charts, gauges, maps, and Grid Lite **require an explicit-sized container** to render. They inherit their dimensions from the parent element — if the parent has no height/width, the component will not be visible. Always wrap these components in a container with explicit `min-width`, `min-height`, or `flex-grow` styling. + +```css +/* Chart container CSS */ +.chart-container { + min-width: 400px; + min-height: 300px; + flex-grow: 1; + flex-basis: 0; +} + +/* Ensure the chart fills its container */ +.chart-container > * { + height: 100%; + width: 100%; +} +``` + +## Complete Chart Example + +```tsx +import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts'; +import styles from './dashboard-view.module.css'; + +// Register the chart module (required, called once at module level) +IgrCategoryChartModule.register(); + +export default function DashboardView() { + const salesData = [ + { month: 'Jan', revenue: 12500 }, + { month: 'Feb', revenue: 18200 }, + { month: 'Mar', revenue: 15800 }, + ]; + + return ( + <div className={styles['chart-container']}> + <IgrCategoryChart + dataSource={salesData} + chartType="column" + xAxisTitle="Month" + yAxisTitle="Revenue ($)" + /> + </div> + ); +} +``` + +```css +/* dashboard-view.module.css */ +.chart-container { + min-width: 400px; + min-height: 300px; + flex-grow: 1; + flex-basis: 0; +} +.chart-container > * { + height: 100%; + width: 100%; +} +``` + +## Complete Grid Lite Example + +> **⚠️ IMPORTANT:** Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) and works like any standard React component — no `.register()` needed. + +**Installation:** +```bash +npm install igniteui-react igniteui-grid-lite +``` + +**Usage:** +```tsx +import { IgrGridLite } from 'igniteui-react/grid-lite'; +import { useGetCustomers } from '../hooks/northwind-hooks'; +import styles from './master-view.module.css'; + +export default function MasterView() { + const { northwindCustomers } = useGetCustomers(); + + return ( + <div className={styles['grid-lite']}> + <IgrGridLite data={northwindCustomers} /> + </div> + ); +} +``` + +```css +/* master-view.module.css */ +.grid-lite { + min-width: 400px; + min-height: 220px; + flex-grow: 1; + flex-basis: 0; +} +``` diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md new file mode 100644 index 000000000..8590c40ee --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -0,0 +1,301 @@ +# Component Catalogue + +## Available Packages + +Ignite UI for React is distributed across several packages depending on your needs: + +| Package | License | Install | Best For | +|---|---|---|---| +| [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) | MIT | `npm install igniteui-react` | General UI components (inputs, layouts, notifications, scheduling) | +| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-react igniteui-grid-lite` | Lightweight grid (Grid Lite) — requires both packages, import from `igniteui-react/grid-lite` | +| [`igniteui-react-grids`](https://www.npmjs.com/package/igniteui-react-grids) | Commercial | `npm install igniteui-react-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) | +| [`igniteui-react-charts`](https://www.npmjs.com/package/igniteui-react-charts) | Commercial | `npm install igniteui-react-charts` (trial) | Charts (Category, Financial, Pie, Scatter, etc.) | +| [`igniteui-react-maps`](https://www.npmjs.com/package/igniteui-react-maps) | Commercial | `npm install igniteui-react-maps` (trial) | Geographic maps | +| [`igniteui-react-gauges`](https://www.npmjs.com/package/igniteui-react-gauges) | Commercial | `npm install igniteui-react-gauges` (trial) | Radial and linear gauges | +| [`reveal-sdk-wrappers-react`](https://www.npmjs.com/package/reveal-sdk-wrappers-react) | Commercial | `npm install reveal-sdk-wrappers-react` | Embedded BI dashboards (Reveal SDK) | + +> **Note:** The lightweight Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) that works like any other React component — no `.register()` needed. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for setup details. + +--- + +## Component Catalogue by UI Pattern + +Use the tables below to map a UI need to the right React component. All components use the **`Igr`** prefix. + +### Inputs & Forms + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Text field / text input | `IgrInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/input) | +| Multi-line text | `IgrTextarea` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/text-area) | +| Checkbox | `IgrCheckbox` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/checkbox) | +| On/off toggle | `IgrSwitch` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/switch) | +| Single choice from a list | `IgrRadio` / `IgrRadioGroup` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/radio) | +| Star / score rating | `IgrRating` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/rating) | +| Formatted / masked text input | `IgrMaskInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/mask-input) | +| Date and time input | `IgrDateTimeInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/date-time-input) | +| File upload | `IgrFileInput` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/file-input) | +| Simple dropdown / select | `IgrSelect` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/select) | +| Searchable dropdown, single or multi-select | `IgrCombo` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/combo/overview) | +| Grouped toggle buttons | `IgrButtonGroup` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/button-group) | +| Range / numeric slider | `IgrSlider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/slider) | +| Range slider (two handles) | `IgrRangeSlider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/slider) | + +### Buttons & Actions + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Standard clickable button | `IgrButton` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/button) | +| Icon-only button | `IgrIconButton` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/icon-button) | +| Click ripple effect | `IgrRipple` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/ripple) | +| Removable tag / filter chip | `IgrChip` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/chip) | + +### Scheduling & Date Pickers + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Full calendar view | `IgrCalendar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar) | +| Date picker (popup calendar) | `IgrDatepicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) | +| Date range selection | `IgrDateRangePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) | + +### Notifications & Feedback + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Brief auto-dismiss notification | `IgrToast` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/toast) | +| Actionable dismissible notification bar | `IgrSnackbar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/snackbar) | +| Persistent status banner | `IgrBanner` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/banner) | +| Modal confirmation or content dialog | `IgrDialog` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/dialog) | +| Tooltip on hover | `IgrTooltip` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip) | +| Small count / status indicator | `IgrBadge` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/badge) | + +### Progress Indicators + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Horizontal progress bar | `IgrLinearProgress` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/linear-progress) | +| Circular / spinner progress | `IgrCircularProgress` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/circular-progress) | + +### Layouts & Containers + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Generic content card | `IgrCard` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/card) | +| User avatar / profile image | `IgrAvatar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/avatar) | +| Icon display | `IgrIcon` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/icon) | +| Horizontal or vertical divider | `IgrDivider` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/divider) | +| Collapsible section | `IgrExpansionPanel` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/expansion-panel) | +| Multiple collapsible sections | `IgrAccordion` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion) | +| Tabbed content panels (with inline content) | `IgrTabs` (content in `IgrTab`) | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs) | +| Image / content slideshow | `IgrCarousel` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/carousel) | +| Multi-step wizard / onboarding flow | `IgrStepper` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/stepper) | +| Resizable, draggable dashboard tiles | `IgrTileManager` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tile-manager) | + +### Navigation + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Top application bar / toolbar | `IgrNavbar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navbar) | +| Side navigation drawer | `IgrNavDrawer` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navigation-drawer) | +| Tab-based navigation (with router) | `IgrTabs` (label-only, no content) | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/tabs) | +| Context menu / actions dropdown | `IgrDropdown` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/dropdown) | + +### Lists & Data Display + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Simple scrollable list | `IgrList` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list) | +| Hierarchical / tree data | `IgrTree` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) | +| Tabular data (MIT, lightweight) | `IgrGridLite` | `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite` packages) | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/overview) | +| Full-featured tabular data grid | `IgrDataGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) | +| Nested / master-detail grid | `IgrHierarchicalGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/overview) | +| Parent-child relational tree grid | `IgrTreeGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/overview) | +| Cross-tabulation / BI pivot table | `IgrPivotGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview) | + +### Charts & Data Visualization + +> **⚠️ IMPORTANT:** Chart, gauge, and map components require **explicit module registration** and a **sized container**. Import the `*Module` class and call `.register()` at module level, and wrap the component in a container with explicit `min-width`/`min-height` or `flex-grow`. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for details. + +| UI Need | Component | Module Registration | Import | Docs | +|---|---|---|---|---| +| Category / bar / line chart | `IgrCategoryChart` | `IgrCategoryChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) | +| Pie / doughnut chart | `IgrPieChart` | `IgrPieChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) | +| Financial / stock chart | `IgrFinancialChart` | `IgrFinancialChartModule.register()` | `igniteui-react-charts` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview) | +| Radial gauge | `IgrRadialGauge` | `IgrRadialGaugeModule.register()` | `igniteui-react-gauges` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/gauges/radial-gauge) | +| Linear gauge | `IgrLinearGauge` | `IgrLinearGaugeModule.register()` | `igniteui-react-gauges` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/gauges/linear-gauge) | +| Geographic map | `IgrGeographicMap` | `IgrGeographicMapModule.register()` | `igniteui-react-maps` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/maps/geographic-map) | + +### Conversational / AI + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Chat / AI assistant message thread | `IgrChat` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/interactivity/chat) | + +### Embedded Analytics / BI Dashboards (Reveal SDK) + +| UI Need | Component | Import | Docs | +|---|---|---|---| +| Embedded BI dashboard viewer | `RvRevealView` | `reveal-sdk-wrappers-react` | [Docs](https://help.revealbi.io/web/getting-started-react/) | + +> **Note:** Reveal SDK is a companion product for embedding interactive dashboards and data visualizations. It uses separate packages (`reveal-sdk-wrappers-react`, `reveal-sdk-wrappers`) and requires a backend Reveal server URL. See [REVEAL-SDK.md](./REVEAL-SDK.md) for setup instructions and [../igniteui-react-customize-theme/SKILL.md](../igniteui-react-customize-theme/SKILL.md) for syncing Reveal's theme with Ignite UI theming tokens. + +--- + +## Step-by-Step: Choosing Components for a UI + +Follow these steps when a user describes a UI requirement: + +### Step 1 — Identify UI patterns + +Break the described UI into atomic patterns. Examples: +- "A booking form" → date input, text inputs, button, maybe a calendar picker +- "An admin dashboard" → navbar, nav drawer, cards, data grid, charts +- "A notification center" → snackbar or toast, badge, list +- "A settings page" → tabs or accordion, switch, input, select, button + +### Step 2 — Map patterns to components + +Use the **Component Catalogue** tables above to find matching components. When in doubt: + +| If the user needs… | Prefer… | Over… | +|---|---|---| +| Simple static list | `IgrList` | Data Grid | +| Basic dropdown | `IgrSelect` | `IgrCombo` | +| Searchable or multi-select dropdown | `IgrCombo` | `IgrSelect` | +| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrDataGrid` (commercial) | +| Tabular data, advanced features needed | `IgrDataGrid` | `IgrGridLite` (grid-lite) | +| Single dismissible message | `IgrToast` | `IgrSnackbar` | +| Message requiring user action | `IgrSnackbar` | `IgrToast` | +| Collapsible single section | `IgrExpansionPanel` | `IgrAccordion` | +| Multiple collapsible sections | `IgrAccordion` | `IgrExpansionPanel` | +| Stepped wizard UI | `IgrStepper` | `IgrTabs` | +| Content tabs / view switching (inline content) | `IgrTabs` (content in `IgrTab`) | `IgrStepper` | +| Tab-based navigation (with React Router) | `IgrTabs` (label-only) | `IgrTabs` (with content) | + +### Step 3 — Check the package + +Confirm which package provides the component: + +- **MIT components** (inputs, layout, notifications, scheduling, chat) → `igniteui-react` +- **Lightweight grid** (Grid Lite) → `igniteui-react/grid-lite` *(MIT, requires both `igniteui-react` and `igniteui-grid-lite` packages)* +- **Advanced grids** (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) → `igniteui-react-grids` *(commercial)* +- **Charts** → `igniteui-react-charts` *(commercial)* +- **Maps** → `igniteui-react-maps` *(commercial)* +- **Gauges** → `igniteui-react-gauges` *(commercial)* + +### Step 4 — Link to official resources + +Always direct the user to the official documentation linked in the tables above. Key entry points: + +- **Getting started**: [Ignite UI for React Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started) +- **React examples**: [https://github.com/IgniteUI/igniteui-react-examples](https://github.com/IgniteUI/igniteui-react-examples) +- **npm package**: [https://www.npmjs.com/package/igniteui-react](https://www.npmjs.com/package/igniteui-react) +- **GitHub repository**: [https://github.com/IgniteUI/igniteui-react](https://github.com/IgniteUI/igniteui-react) + +### Step 5 — Provide a starter code snippet + +Once components are identified, give the user a minimal working React snippet. Example for an admin dashboard shell: + +```tsx +import { IgrNavbar, IgrNavDrawer, IgrNavDrawerItem, IgrCard, IgrCardHeader, IgrCardContent } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +function Dashboard() { + return ( + <> + <IgrNavbar> + <h1>My Dashboard</h1> + </IgrNavbar> + + <IgrNavDrawer open> + <IgrNavDrawerItem> + <span slot="icon">🏠</span> + <span slot="content">Home</span> + </IgrNavDrawerItem> + <IgrNavDrawerItem> + <span slot="icon">⚙️</span> + <span slot="content">Settings</span> + </IgrNavDrawerItem> + </IgrNavDrawer> + + <main> + <IgrCard> + <IgrCardHeader> + <h3 slot="title">Summary</h3> + </IgrCardHeader> + <IgrCardContent>Dashboard content here</IgrCardContent> + </IgrCard> + </main> + </> + ); +} +``` + +--- + +## Common UI Scenarios → Recommended Component Sets + +### Login / Authentication Form + +- `IgrInput` — email and password fields +- `IgrCheckbox` — "Remember me" +- `IgrButton` — submit +- `IgrSnackbar` — error/success feedback + +### User Profile / Settings Page + +- `IgrAvatar` — profile picture +- `IgrTabs` — section navigation (Profile, Security, Notifications) +- `IgrInput` / `IgrTextarea` — editable fields +- `IgrSwitch` — feature toggles +- `IgrSelect` — preference dropdowns +- `IgrButton` — save/cancel actions + +### Data Table / Admin List View + +- `IgrInput` — search bar +- `IgrCombo` — filter dropdowns +- `IgrGridLite` (grid-lite) or `IgrDataGrid` — tabular data +- `IgrButton` / `IgrIconButton` — actions +- `IgrDialog` — confirm delete modal +- `IgrBadge` — status indicators + +### Booking / Reservation Form + +- `IgrDateRangePicker` — check-in / check-out +- `IgrInput` — guest details +- `IgrSelect` — room type +- `IgrStepper` — multi-step booking flow +- `IgrButton` — next / confirm +- `IgrToast` — booking confirmation + +### Analytics / Reporting Dashboard + +- `IgrNavbar` — top bar +- `IgrNavDrawer` — side navigation +- `IgrCard` — KPI summary cards +- `IgrTabs` or `IgrTileManager` — section layout +- `IgrDataGrid` or `IgrPivotGrid` — detailed data tables +- `IgrCategoryChart` — charts (from `igniteui-react-charts`) +- `IgrLinearProgress` / `IgrCircularProgress` — loading indicators + +### Master-Detail with Tab Navigation (React Router) + +- `IgrNavbar` — top bar +- `IgrTabs` — **navigation only** (label-only, no inline content); each `IgrTab` triggers a route change +- React Router `<Outlet />` — renders the routed child view below the tabs +- Active tab synced to the current route via `selected` prop + +> **⚠️ Important — Tabs for navigation vs. tabs for content:** +> - **Tabs as content panels** (`IgrTabs` with content in `IgrTab`): Content is rendered inside each tab. Use when the tab content is inline and does not require routing. +> - **Tabs as navigation** (`IgrTabs` with label-only tabs): Tabs act as route links. The routing outlet (`<Outlet />`) renders the content. **Do NOT add inline content in `IgrTab` in this case** — use only the `label` prop or `slot="label"`. See [JSX-PATTERNS.md](./JSX-PATTERNS.md) for a full React Router example. + +--- + +## Searching the Documentation + +If you are unsure about a component or need more information: + +1. **Browse the docs** at `https://www.infragistics.com/products/ignite-ui-react/react/components/` — the left sidebar groups components by category +2. **Use the naming convention**: React components use the `Igr` prefix followed by PascalCase name (e.g., `IgrDateRangePicker`, `IgrNavDrawer`). The docs URL typically uses kebab-case: `components/scheduling/date-range-picker` +3. **Check the examples repo** at [igniteui-react-examples](https://github.com/IgniteUI/igniteui-react-examples) for working sample applications diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/EVENT-HANDLING.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/EVENT-HANDLING.md new file mode 100644 index 000000000..60d0e6595 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/EVENT-HANDLING.md @@ -0,0 +1,70 @@ +# Event Handling + +## How Events Work + +Ignite UI React wrappers map web component custom events to React-style `onXxx` callback props. The event name is converted from the web component event name to a camelCase `on`-prefixed prop. + +```tsx +import { IgrButton, IgrInput, IgrCheckbox } from 'igniteui-react'; + +function MyForm() { + const handleClick = (event: CustomEvent) => { + console.log('Button clicked'); + }; + + const handleInput = (event: CustomEvent) => { + // event.target is the underlying web component element (e.g., igc-input) + console.log('Input value:', (event.target as any).value); + }; + + const handleChange = (event: CustomEvent) => { + console.log('Checkbox changed:', event.detail); + }; + + return ( + <> + <IgrButton onClick={handleClick}> + <span>Submit</span> + </IgrButton> + <IgrInput label="Name" onInput={handleInput} /> + <IgrCheckbox onChange={handleChange}>Accept terms</IgrCheckbox> + </> + ); +} +``` + +## Common Event Props + +| Component | Event Prop | Fires When | +|---|---|---| +| `IgrButton` | `onClick` | Button is clicked | +| `IgrInput` | `onInput` | Value changes (each keystroke) | +| `IgrInput` | `onChange` | Value committed (blur / Enter) | +| `IgrCheckbox` | `onChange` | Checked state changes | +| `IgrSwitch` | `onChange` | Toggle state changes | +| `IgrSelect` | `onChange` | Selection changes | +| `IgrCombo` | `onChange` | Selection changes | +| `IgrSlider` | `onInput` | Slider value changes (live) | +| `IgrSlider` | `onChange` | Slider value committed | +| `IgrDialog` | `onClosing` | Dialog is about to close | +| `IgrDialog` | `onClosed` | Dialog has closed | +| `IgrTabs` | `onChange` | Active tab changes | +| `IgrCalendar` | `onChange` | Selected date changes | +| `IgrDatepicker` | `onChange` | Selected date changes | + +## TypeScript Event Types + +When using TypeScript, event handlers receive the underlying `CustomEvent`: + +```tsx +import { IgrInput } from 'igniteui-react'; + +function SearchBar() { + const handleInput = (e: CustomEvent) => { + const value = (e.target as HTMLInputElement).value; + console.log('Search:', value); + }; + + return <IgrInput label="Search" onInput={handleInput} />; +} +``` diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/INSTALLATION.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/INSTALLATION.md new file mode 100644 index 000000000..bfa70d97a --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/INSTALLATION.md @@ -0,0 +1,139 @@ +# Installation & Setup + +## Install the Package + +```bash +# Core UI components (MIT) +npm install igniteui-react + +# If you need the lightweight grid (MIT) +# Requires BOTH packages - igniteui-react and igniteui-grid-lite +npm install igniteui-react igniteui-grid-lite + +# If you need advanced grids (commercial) +npm install igniteui-react-grids + +# If you need charts (commercial) +npm install igniteui-react-charts + +# If you need gauges (commercial) +npm install igniteui-react-gauges + +# If you need maps (commercial) +npm install igniteui-react-maps +``` + +## Peer Dependencies + +`igniteui-react` requires `react` and `react-dom` (v18+ or v19+). These are typically already in your project: + +```bash +npm install react react-dom +``` + +## Import a Theme (REQUIRED) + +> **CRITICAL:** Components will render without styles, with broken icons and missing visuals if the theme CSS is not imported. **Always import the theme CSS before using any Ignite UI component.** + +Import one theme CSS file in your entry point (`main.tsx`, `index.tsx`, or `App.tsx`). The theme CSS must be imported **in every file that uses Ignite UI components** if your framework does not have a single global entry point (e.g., Next.js — see below). + +```tsx +// main.tsx or index.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +Available themes: + +| Import | Theme | +|---|---| +| `igniteui-webcomponents/themes/light/bootstrap.css` | Bootstrap Light | +| `igniteui-webcomponents/themes/dark/bootstrap.css` | Bootstrap Dark | +| `igniteui-webcomponents/themes/light/material.css` | Material Light | +| `igniteui-webcomponents/themes/dark/material.css` | Material Dark | +| `igniteui-webcomponents/themes/light/fluent.css` | Fluent Light | +| `igniteui-webcomponents/themes/dark/fluent.css` | Fluent Dark | +| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light | +| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark | + +Grid theme CSS files follow the same pattern under `igniteui-react-grids/grids/themes/`. + +**For grids**, you **must also** import the grid theme CSS. Without it, the grid will be missing styles and icons will show as placeholders: + +```tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; +``` + +## Next.js Setup + +In Next.js, there is no single `main.tsx` entry point. Import the theme CSS **in each client component file** that uses Ignite UI components, or in a shared layout component: + +```tsx +// app/components/DataTable.tsx +'use client'; + +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +import { IgrGrid, IgrColumn, IgrPaginator } from 'igniteui-react-grids'; + +export default function DataTable({ data }: { data: any[] }) { + return ( + <IgrGrid data={data} autoGenerate={false}> + <IgrColumn field="name" header="Name" /> + <IgrColumn field="email" header="Email" /> + <IgrPaginator perPage={10} /> + </IgrGrid> + ); +} +``` + +Alternatively, import themes once in a root layout: + +```tsx +// app/layout.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + <html lang="en"> + <body>{children}</body> + </html> + ); +} +``` + +## Minimal App Example (Vite / CRA) + +```tsx +// main.tsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + <React.StrictMode> + <App /> + </React.StrictMode> +); +``` + +```tsx +// App.tsx +import { IgrButton, IgrInput } from 'igniteui-react'; + +function App() { + return ( + <div> + <IgrInput label="Name" /> + <IgrButton><span>Submit</span></IgrButton> + </div> + ); +} + +export default App; +``` + +> **No `defineComponents()` needed.** React wrappers auto-register. See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) for exceptions (charts, gauges, maps). diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/JSX-PATTERNS.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/JSX-PATTERNS.md new file mode 100644 index 000000000..801632db0 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/JSX-PATTERNS.md @@ -0,0 +1,187 @@ +# JSX Usage Patterns + +## Props vs HTML Attributes + +Ignite UI React components accept props just like any React component. Use JSX expression syntax for dynamic values: + +```tsx +// ✅ Correct — JSX expression +<IgrInput label="Email" placeholder="you@example.com" type="email" /> +<IgrSlider value={50} min={0} max={100} /> +<IgrButton disabled={isLoading}>Submit</IgrButton> + +// ❌ Wrong — string for numeric/boolean values +<IgrSlider value="50" /> +``` + +## Children vs Slots + +Ignite UI components use the web component **slot** mechanism under the hood. In JSX, pass children to the default slot and use the `slot` attribute to target named slots: + +```tsx +<IgrButton> + {/* Default slot — button label */} + <span>Click Me</span> +</IgrButton> + +<IgrCard> + <IgrCardHeader> + <h3 slot="title">Card Title</h3> + <p slot="subtitle">Card subtitle</p> + </IgrCardHeader> + <IgrCardContent> + <p>Default slot content inside the card body.</p> + </IgrCardContent> + <IgrCardActions> + <IgrButton slot="start">Cancel</IgrButton> + <IgrButton slot="end">Confirm</IgrButton> + </IgrCardActions> +</IgrCard> + +<IgrNavDrawerItem> + <span slot="icon">📊</span> + <span slot="content">Dashboard</span> +</IgrNavDrawerItem> +``` + +> **Tip:** Check the component documentation for available slot names. Common slots include `start`, `end`, `prefix`, `suffix`, `header`, `content`, `icon`, `title`, `subtitle`. + +## Render Props (Grids & Complex Components) + +Some components like the Data Grid support **render props** for custom cell rendering: + +```tsx +import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; + +function UserGrid({ users }: { users: User[] }) { + return ( + <IgrGrid data={users} autoGenerate={false}> + <IgrColumn field="name" header="Name" /> + <IgrColumn field="email" header="Email" /> + <IgrColumn + field="status" + header="Status" + bodyTemplate={(ctx) => ( + <IgrBadge>{ctx.cell.value}</IgrBadge> + )} + /> + </IgrGrid> + ); +} +``` + +## IgrTabs — Content Panels vs Navigation + +`IgrTabs` supports two distinct usage patterns. Choosing the wrong one is a common mistake. + +### Pattern 1: Tabs with Content Panels (inline content) + +Use `IgrTab` with inline content when the tabbed content is rendered inline — no routing involved. The tab label can be set via a `label` prop or via a `slot="label"` element: + +```tsx +import { IgrTabs, IgrTab } from 'igniteui-react'; + +// Simple text labels using the label prop +function SettingsPage() { + return ( + <IgrTabs> + <IgrTab label="Profile" selected> + <p>Profile settings content here</p> + </IgrTab> + <IgrTab label="Security"> + <p>Security settings content here</p> + </IgrTab> + <IgrTab label="Notifications"> + <p>Notification preferences content here</p> + </IgrTab> + </IgrTabs> + ); +} +``` + +**Alternative: Using slot="label" for complex headers (e.g., with icons):** + +```tsx +import { IgrTabs, IgrTab, IgrIcon } from 'igniteui-react'; + +function SettingsPage() { + return ( + <IgrTabs> + <IgrTab selected> + <span slot="label"> + <IgrIcon name="home" collection="material" /> + Profile + </span> + <p>Profile settings content here</p> + </IgrTab> + <IgrTab> + <span slot="label"> + <IgrIcon name="security" collection="material" /> + Security + </span> + <p>Security settings content here</p> + </IgrTab> + <IgrTab> + <span slot="label"> + <IgrIcon name="notifications" collection="material" /> + Notifications + </span> + <p>Notification preferences content here</p> + </IgrTab> + </IgrTabs> + ); +} +``` + +### Pattern 2: Tabs as Navigation (with React Router — NO inline content) + +> **⚠️ CRITICAL:** When using `IgrTabs` for navigation with React Router (or any router), **do NOT include inline content in `IgrTab`**. Only render tab labels (via `label` prop or `slot="label"`), and let the router's `<Outlet />` handle the content below the tabs. + +```tsx +import { IgrTabs, IgrTab } from 'igniteui-react'; +import { useNavigate, useLocation, Outlet } from 'react-router-dom'; + +const tabs = [ + { path: '/dashboard', label: 'Dashboard' }, + { path: '/orders', label: 'Orders' }, + { path: '/customers', label: 'Customers' }, +]; + +function MainLayout() { + const navigate = useNavigate(); + const location = useLocation(); + + const handleTabChange = (e: CustomEvent) => { + const selectedIndex = (e.target as any).selectedIndex; + if (selectedIndex !== undefined && tabs[selectedIndex]) { + navigate(tabs[selectedIndex].path); + } + }; + + return ( + <div> + {/* Tabs for navigation — label prop only, no inline content */} + <IgrTabs onChange={handleTabChange}> + {tabs.map((tab) => ( + <IgrTab + key={tab.path} + label={tab.label} + selected={location.pathname === tab.path} + /> + ))} + </IgrTabs> + + {/* Router outlet renders the routed view */} + <main> + <Outlet /> + </main> + </div> + ); +} +``` + +**Key rules for tabs-as-navigation:** +- ✅ Use only `IgrTab` with label prop or `slot="label"` — no inline content +- ✅ Sync the active tab to the current route using the `selected` prop +- ✅ Handle `onChange` to call `navigate()` for route changes +- ✅ Use `<Outlet />` (or the equivalent in your router) for content rendering diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REFS-FORMS.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REFS-FORMS.md new file mode 100644 index 000000000..639b83113 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REFS-FORMS.md @@ -0,0 +1,229 @@ +# Refs & Forms + +## Refs & Imperative API + +Use `useRef` to access the underlying web component element and call imperative methods (e.g., showing/hiding a dialog, focusing an input). +Components from `igniteui-react`, `igniteui-react-grids` and `igniteui-react-dockmanager` are React Function Components forward the native element to `useRef` and expose alias with the same name for accessing the custom element API: + +```tsx +import { useRef } from 'react'; +import { IgrDialog, IgrButton, IgrInput } from 'igniteui-react'; + +function MyPage() { + const dialogRef = useRef<IgrDialog>(null); + const inputRef = useRef<IgrInput>(null); + + const openDialog = () => { + // Access the underlying web component and call its methods + dialogRef.current?.show(); + }; + + const focusInput = () => { + inputRef.current?.focus(); + }; + + return ( + <> + <IgrButton onClick={openDialog}> + <span>Open Dialog</span> + </IgrButton> + + <IgrDialog ref={dialogRef} title="Confirmation"> + <p>Are you sure?</p> + <IgrButton slot="footer" onClick={() => dialogRef.current?.hide()}> + <span>Close</span> + </IgrButton> + </IgrDialog> + + <IgrButton onClick={focusInput}> + <span>Focus Input</span> + </IgrButton> + <IgrInput ref={inputRef} label="Name" /> + </> + ); +} +``` + +> **Tip:** The ref gives you direct access to the web component's DOM element. You can call any method documented in the web component API. + + +## Uncontrolled Components + +`igniteui-react` Inputs integrate with the native form handling through Element internals, allowing to take advantage of the native state management adn validation to create intuitive, straight-forward forms: + +```tsx +import { useRef } from 'react'; +import { IgrInput, IgrButton } from 'igniteui-react'; + +function SimpleForm() { + const nameRef = useRef<IgrInput>(null); + + const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { + // e.preventDefault(); // optionally prevent default submit form custom handling + const formData = new FormData(e.target); + }; + + return ( + <form onSubmit={handleSubmit}> + <IgrInput name="name" label="Name" required={true} /> + <IgrInput name="description" label="description" minLength={0}> + <IgrButton type="submit"> + <span>Submit</span> + </IgrButton> + </form> + ); +} +``` + +## Controlled Components with `useState` + +Wire up Ignite UI form components with React state for controlled behavior: + +```tsx +import { useState } from 'react'; +import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem } from 'igniteui-react'; + +function ProfileForm() { + const [name, setName] = useState(''); + const [newsletter, setNewsletter] = useState(false); + const [role, setRole] = useState('user'); + + return ( + <form> + <IgrInput + label="Name" + value={name} + onInput={(e: CustomEvent<string>) => setName(e.detail) } + /> + + <IgrCheckbox + checked={newsletter} + onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) => + setNewsletter(e.detail.checked) + } + > + Subscribe to newsletter + </IgrCheckbox> + + <IgrSelect + label="Role" + value={role} + onChange={(e: CustomEvent<IgcSelectItemComponent>) => + setRole(e.detail.value) + } + > + <IgrSelectItem value="user">User</IgrSelectItem> + <IgrSelectItem value="admin">Admin</IgrSelectItem> + <IgrSelectItem value="editor">Editor</IgrSelectItem> + </IgrSelect> + </form> + ); +} +``` + +## React Hook Form Integration + +Ignite UI components are form-associated web components. You can integrate them with React Hook Form using `Controller`: + +```tsx +import { useForm, Controller } from 'react-hook-form'; +import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react'; + +interface FormData { + email: string; + acceptTerms: boolean; +} + +function SignUpForm() { + const { control, handleSubmit, formState: { errors } } = useForm<FormData>(); + + const onSubmit = (data: FormData) => { + console.log(data); + }; + + return ( + <form onSubmit={handleSubmit(onSubmit)}> + <Controller + name="email" + control={control} + rules={{ required: 'Email is required' }} + render={({ field }) => ( + <IgrInput + label="Email" + type="email" + value={field.value || ''} + onInput={(e: CustomEvent<string>) => + field.onChange(e.detail) + } + onBlur={() => field.onBlur()} + invalid={!!errors.email} + /> + )} + /> + {errors.email && <span>{errors.email.message}</span>} + + <Controller + name="acceptTerms" + control={control} + rules={{ required: 'You must accept the terms' }} + render={({ field }) => ( + <IgrCheckbox + checked={field.value || false} + onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) => + field.onChange(e.detail.checked) + } + > + I accept the terms and conditions + </IgrCheckbox> + )} + /> + + <IgrButton type="submit"> + <span>Sign Up</span> + </IgrButton> + </form> + ); +} +``` + +## TypeScript + +### Importing Component Types + +Each component exports its props interface. Import and use them for type-safe code: + +```tsx +import { IgrButton, IgrInput } from 'igniteui-react'; +import type { ComponentProps } from 'react'; + +// Get the props type for a component +type ButtonProps = ComponentProps<typeof IgrButton>; +type InputProps = ComponentProps<typeof IgrInput>; + +// Use in your own components +interface FormFieldProps { + label: string; + inputProps?: Partial<InputProps>; +} + +function FormField({ label, inputProps }: FormFieldProps) { + return ( + <div> + <IgrInput label={label} {...inputProps} /> + </div> + ); +} +``` + +### Auto-complete + +IDEs with TypeScript support will provide auto-complete for all `Igr*` component props. Make sure your `tsconfig.json` includes: + +```json +{ + "compilerOptions": { + "jsx": "react-jsx", + "moduleResolution": "bundler" + } +} +``` diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REVEAL-SDK.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REVEAL-SDK.md new file mode 100644 index 000000000..d9babd349 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/REVEAL-SDK.md @@ -0,0 +1,198 @@ +# Reveal SDK Integration + +Reveal SDK is a companion product for embedding interactive BI dashboards and data visualizations inside your React application. It requires client-side runtime dependencies, a backend Reveal server, and proper initialization. + +> **⚠️ IMPORTANT:** `RvRevealView` is NOT self-sufficient. You must load the Reveal client runtime, configure the backend URL, and initialize Reveal properly using `useEffect` after mount — never in the render phase. + +## Step 1: Install Dependencies + +```bash +npm install reveal-sdk-wrappers-react reveal-sdk-wrappers +``` + +## Step 2: Load Reveal Client Runtime + +Reveal SDK requires these client-side scripts to be loaded **before** using any Reveal components. Add them to your `index.html` or load them dynamically: + +```html +<!-- In public/index.html (or equivalent) --> +<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> +<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.5/dayjs.min.js"></script> +<script src="https://dl.revealbi.io/reveal/libs/1.6.4/infragistics.reveal.js"></script> +``` + +Replace `1.6.4` with your Reveal SDK version. + +> **Note:** The Reveal SDK exposes its API through the `$.ig` global namespace. If TypeScript reports that `$` is not defined, add this declaration: +> ```tsx +> declare const $: any; +> ``` + +## Step 3: Container Sizing (REQUIRED) + +Reveal views require a **properly sized container**. Without explicit dimensions, the dashboard will not render: + +```css +/* dashboard.module.css */ +.reveal-container { + width: 100%; + height: 100%; + min-width: 400px; + min-height: 400px; +} +``` + +## Step 4: Basic Integration Pattern + +> **⚠️ CRITICAL:** Always initialize Reveal in `useEffect` after the component mounts — never during render. Add guards for missing `$` and `$.ig` to prevent errors if scripts haven't loaded. + +```tsx +import { useEffect, useRef } from 'react'; +import styles from './dashboard.module.css'; + +declare const $: any; + +export default function DashboardView() { + const containerRef = useRef<HTMLDivElement>(null); + const revealViewRef = useRef<any>(null); + + useEffect(() => { + // Guard: Ensure Reveal runtime is loaded + if (typeof $ === 'undefined' || !$.ig) { + console.error('Reveal SDK runtime not loaded. Ensure jQuery, Day.js, and infragistics.reveal.js are included.'); + return; + } + + // Guard: Prevent double initialization + if (revealViewRef.current) { + return; + } + + // Guard: Ensure container exists + if (!containerRef.current) { + return; + } + + // Configure Reveal SDK backend URL (REQUIRED) + $.ig.RevealSdkSettings.setBaseUrl('https://your-reveal-server/reveal-api/'); + + // Initialize RevealView with the container element + revealViewRef.current = new $.ig.RevealView(containerRef.current); + + // Optional: Load a specific dashboard + // $.ig.RVDashboard.loadDashboard('your-dashboard-id').then((dashboard: any) => { + // revealViewRef.current.dashboard = dashboard; + // }); + + // Cleanup on unmount + return () => { + if (revealViewRef.current) { + revealViewRef.current = null; + } + }; + }, []); + + return <div ref={containerRef} className={styles['reveal-container']} />; +} +``` + +## Using RvRevealView Wrapper (Alternative) + +The `RvRevealView` wrapper simplifies some boilerplate but still requires proper runtime setup and `useEffect` initialization: + +```tsx +import { useEffect } from 'react'; +import { RvRevealView } from 'reveal-sdk-wrappers-react'; +import { RevealViewOptions } from 'reveal-sdk-wrappers'; +import styles from './dashboard.module.css'; + +declare const $: any; + +export default function DashboardView() { + useEffect(() => { + // Guard: Ensure Reveal runtime is loaded + if (typeof $ === 'undefined' || !$.ig) { + console.error('Reveal SDK runtime not loaded.'); + return; + } + + // Configure backend URL (REQUIRED) — must be done before render + $.ig.RevealSdkSettings.setBaseUrl('https://your-reveal-server/reveal-api/'); + + // Optional: Apply theme sync with Ignite UI + setRevealTheme(); + }, []); + + const options: RevealViewOptions = { + visualizations: { + menu: { + copy: false, + duplicate: false + } + } + }; + + return ( + <div className={styles['reveal-container']}> + <RvRevealView options={options} /> + </div> + ); +} + +function setRevealTheme() { + // Guard: Ensure $.ig exists + if (typeof $ === 'undefined' || !$.ig) return; + + const style = window.getComputedStyle(document.body); + const theme = new $.ig.RevealTheme(); + + // Sync fonts with Ignite UI + theme.regularFont = style.getPropertyValue('--ig-font-family').trim() || 'sans-serif'; + theme.mediumFont = theme.regularFont; + theme.boldFont = theme.regularFont; + + // Auto-detect light/dark mode + const color = style.getPropertyValue('--ig-surface-500').trim() || '#fff'; + const [r, g, b] = [1, 3, 5].map(i => parseInt(color.substring(i, i + 2), 16)); + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + + theme.isDark = brightness < 128; + theme.fontColor = theme.isDark ? 'white' : 'black'; + theme.dashboardBackgroundColor = style.getPropertyValue('--ig-gray-100').trim(); + theme.visualizationBackgroundColor = style.getPropertyValue('--ig-surface-500').trim(); + + $.ig.RevealSdkSettings.theme = theme; +} +``` + +## Token Mapping Reference (Theme Sync) + +| Reveal Theme Property | Ignite UI CSS Token | Purpose | +|---|---|---| +| `regularFont`, `mediumFont`, `boldFont` | `--ig-font-family` | Font family | +| `isDark` | Computed from `--ig-surface-500` brightness | Light/dark mode detection | +| `fontColor` | Derived from `isDark` | Text color (white for dark, black for light) | +| `dashboardBackgroundColor` | `--ig-gray-100` | Dashboard background | +| `visualizationBackgroundColor` | `--ig-surface-500` | Individual visualization card background | + +## Common Issues + +### Reveal view is blank or throws errors +- **Cause:** Reveal runtime scripts not loaded (jQuery, Day.js, infragistics.reveal.js) +- **Solution:** Add the required scripts to `index.html` before your React app loads + +### `$` or `$.ig` is undefined +- **Cause:** Scripts not loaded or loaded after React component renders +- **Solution:** Ensure scripts are in `<head>` or loaded before React mounts; add guards in `useEffect` + +### Dashboard not visible +- **Cause:** Container has no dimensions +- **Solution:** Add explicit `width`, `height`, `min-width`, `min-height` to the container + +### Double initialization errors +- **Cause:** `useEffect` running multiple times (Strict Mode) without cleanup +- **Solution:** Use a ref to track initialization state and prevent re-initialization + +> **Tip:** When switching between light and dark Ignite UI themes, call `setRevealTheme()` again after the theme change so Reveal dashboards stay in sync. + +See the [customize-theme skill](../../igniteui-react-customize-theme/SKILL.md) for more details on Ignite UI CSS custom properties and theme switching. diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/TROUBLESHOOTING.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/TROUBLESHOOTING.md new file mode 100644 index 000000000..9bc5c6a85 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/TROUBLESHOOTING.md @@ -0,0 +1,147 @@ +# Troubleshooting + +## Issue: Components render without styles + +**Cause:** Missing theme CSS import. Without the theme CSS, components will render with broken layouts, missing icons (showing placeholders), and no visual styling. + +**Solution:** Add the theme CSS import **before** any component usage. In Vite/CRA apps, add it to your entry point. In Next.js, add it to each client component file or the root layout: + +```tsx +// Always required for core components +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +// Also required when using grids (IgrGrid, IgrTreeGrid, etc.) +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; +``` + +**Next.js example:** + +```tsx +'use client'; + +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +import { IgrNavbar, IgrButton } from 'igniteui-react'; +import { IgrGrid, IgrColumn, IgrPaginator } from 'igniteui-react-grids'; +``` + +## Issue: Grid renders but icons show as placeholders and styles are missing + +**Cause:** The grid theme CSS (`igniteui-react-grids/grids/themes/...`) is not imported. The base theme CSS alone is not enough for grids. + +**Solution:** Import **both** theme CSS files: + +```tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Base theme +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; // Grid theme +``` + +## Issue: Grid Lite does not render or compilation error + +**Cause:** `IgrGridLite` is a React wrapper component from `igniteui-react/grid-lite`. It requires **both** `igniteui-react` and `igniteui-grid-lite` packages to be installed. It uses the `Igr` prefix (like all other Ignite UI React wrappers) and does **not** require any `.register()` call. + +**Solution:** + +1. Install both required packages: `npm install igniteui-react igniteui-grid-lite` +2. Import `IgrGridLite` from `igniteui-react/grid-lite` +3. Wrap in a sized container (see [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for a full example) + +## Issue: `IgrGridLite` is confused with `IgrGrid` from `igniteui-react-grids` + +**Solution:** These are different components: +- `igniteui-react/grid-lite` → lightweight MIT grid (`IgrGridLite`, React wrapper — no `.register()` needed, requires both `igniteui-react` and `igniteui-grid-lite` packages) +- `igniteui-react-grids` → full-featured commercial grids (`IgrGrid`, `IgrTreeGrid`, etc. — React wrappers) + +Import from the correct package for your needs: + +```tsx +// Lightweight grid (MIT, React wrapper, no registration needed) +import { IgrGridLite } from 'igniteui-react/grid-lite'; + +// Full-featured grid (commercial, React wrapper) +import { IgrGrid } from 'igniteui-react-grids'; +``` + +## Issue: Events fire but have unexpected shape + +**Cause:** Ignite UI events are `CustomEvent` objects from the underlying web component, not React `SyntheticEvent` objects. + +**Solution:** Type the handler parameter as `CustomEvent` and access `.detail` for event-specific data or `.target` for the element: + +```tsx +const handleChange = (e: CustomEvent) => { + const target = e.target as HTMLElement; + const detail = e.detail; + // Use target or detail as appropriate +}; +``` + +## Issue: Component methods not accessible + +**Solution:** Use `useRef` with the component type: + +```tsx +const dialogRef = useRef<IgrDialog>(null); + +// Call imperative method +dialogRef.current?.show(); +``` + +## Issue: Chart / gauge / map does not render or is invisible + +**Cause:** Two common causes: +1. The corresponding module was not registered (e.g., `IgrCategoryChartModule.register()` was not called) +2. The parent container has no explicit dimensions — these components inherit size from their container and will be invisible if the container has zero height/width + +**Solution:** + +1. **Register the module** at the top level of the file (outside the component): + +```tsx +import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts'; +IgrCategoryChartModule.register(); +``` + +2. **Wrap the chart in a sized container** with explicit dimensions: + +```css +.chart-container { + min-width: 400px; + min-height: 300px; + flex-grow: 1; + flex-basis: 0; +} +.chart-container > * { height: 100%; width: 100%; } +``` + +```tsx +<div className={styles['chart-container']}> + <IgrCategoryChart dataSource={data} /> +</div> +``` + +## Issue: IgrTabs used for navigation fills the entire view with content + +**Cause:** Inline content was included in `IgrTab` elements when using tabs for navigation with React Router. The tab content areas take up space and push the routed content out of view. + +**Solution:** When using `IgrTabs` for navigation, use **only the label** (via `label` prop or `slot="label"`) — do NOT include inline content. Let the router's `<Outlet />` render the content: + +```tsx +// ✅ Correct — navigation tabs with label-only (no inline content) +<IgrTabs onChange={handleTabChange}> + <IgrTab label="Dashboard" selected={location.pathname === '/dashboard'} /> + <IgrTab label="Orders" selected={location.pathname === '/orders'} /> +</IgrTabs> +<Outlet /> + +// ❌ Wrong — inline content creates unwanted space when used for navigation +<IgrTabs> + <IgrTab label="Dashboard"> + <p>This content will show and take up space!</p> {/* Don't do this for navigation */} + </IgrTab> + <IgrTab label="Orders"> + <p>This content will show and take up space!</p> {/* Don't do this for navigation */} + </IgrTab> +</IgrTabs> +``` diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/SKILL.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/SKILL.md new file mode 100644 index 000000000..cc1f16745 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/SKILL.md @@ -0,0 +1,182 @@ +--- +name: igniteui-react-customize-theme +description: This skill customizes Ignite UI for React component styling using CSS custom properties, Sass, and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application +user-invocable: true +--- + +# Ignite UI for React — Theming Skill + +## Description + +This skill teaches AI agents how to theme Ignite UI for React applications. Two approaches are supported: + +- **CSS custom properties** — works in any project without additional build tooling +- **Sass** — available when the project has Sass configured; provides the full palette/typography/elevation API + +The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation — all in a React application context. + +## Example Usage + +- "How do I change the primary color in my Ignite UI React app?" +- "Apply a dark theme to my React app" +- "Customize the grid header colors" +- "How do I scope a theme to a specific section of my React app?" +- "Set up Material Design theming for Ignite UI components" + +## Prerequisites + +- A React project with `igniteui-react` installed +- A theme CSS file imported in your entry point (see [igniteui-react-components](../igniteui-react-components/SKILL.md)) +- **Optional**: Sass configured in the project (enables the Sass-based theming API) +- **Optional**: The **Ignite UI Theming MCP server** (`igniteui-theming`) for AI-assisted code generation + +## Related Skills + +- [igniteui-react-components](../igniteui-react-components/SKILL.md) — Choose the right components and set up your React project +- [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — Optimize after theming + +## When to Use + +- Applying custom brand colors or a dark theme to an Ignite UI React app +- Overriding individual component styles (e.g., grid header color, button appearance) +- Switching between light and dark mode in a React app +- Scoping different themes to different sections of a React app +- Setting up the Ignite UI Theming MCP server for AI-assisted theming + +--- + +## Content Guide + +This skill is organized into focused sections. Refer to the appropriate file for detailed instructions: + +| Topic | File | When to Use | +|---|---|---| +| CSS Theming | [CSS-THEMING.md](./reference/CSS-THEMING.md) | Pre-built themes, CSS custom properties, scoped overrides, layout controls, light/dark switching | +| Sass Theming | [SASS-THEMING.md](./reference/SASS-THEMING.md) | Sass-based theming with palette(), component theme functions | +| MCP Server | [MCP-SERVER.md](./reference/MCP-SERVER.md) | AI-assisted theming code generation | +| Reveal Theme Sync | [REVEAL-THEME.md](./reference/REVEAL-THEME.md) | Syncing Reveal SDK dashboards with Ignite UI theme | +| Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions | + +--- + +## Quick Start + +### 1. Import a Pre-built Theme (REQUIRED) + +```tsx +// main.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +**For grids**, also import: + +```tsx +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; +``` + +### 2. Override with CSS Custom Properties + +```css +/* src/index.css */ +:root { + --ig-primary-h: 211deg; + --ig-primary-s: 100%; + --ig-primary-l: 50%; +} +``` + +```tsx +// main.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Theme first +import './index.css'; // Overrides second +``` + +--- + +## Theming Architecture + +The Ignite UI theming system is built on four pillars: + +| Concept | Purpose | +|---|---| +| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families | +| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) | +| **Elevations** | Box-shadow levels 0–24 for visual depth | +| **Schema** | Per-component recipes mapping palette colors to component tokens | + +### Design Systems + +- **Bootstrap** (default), **Material**, **Fluent**, **Indigo** +- Each has light and dark variants + +--- + +## Key Concepts + +### CSS Custom Properties + +Override tokens in your CSS: + +```css +:root { --ig-primary-h: 211deg; } +.admin-panel { --ig-primary-h: 260deg; } +``` + +### Component-Level Theming + +Target web component tag names in CSS: + +```css +igc-button { --ig-button-foreground: var(--ig-secondary-500); } +``` + +### CSS `::part()` Selectors + +```css +igc-input::part(input) { font-size: 1.1rem; } +``` + +### Layout Controls + +```css +:root { + --ig-size: 2; /* 1=small, 2=medium, 3=large */ + --ig-spacing: 1; /* 0.5=compact, 1=default, 2=spacious */ + --ig-radius-factor: 1; /* 0=square, 1=max radius */ +} +``` + +### Light/Dark Switching + +See [CSS-THEMING.md](./reference/CSS-THEMING.md) for approaches: class toggle, media query, or stylesheet swap. + +--- + +## Best Practices + +1. **Import theme CSS first**, then your custom overrides +2. **Use palette tokens** (`var(--ig-primary-500)`) for all colors — never hardcode hex values +3. **Use CSS custom properties on `:root`** for global theme adjustments +4. **Scope overrides with CSS classes** for different sections +5. **Use `::part()` selectors** to style shadow DOM internals +6. **In CSS selectors, use web component tag names** (`igc-button`), not React names (`IgrButton`) +7. **Test both light and dark themes** +8. **Use the MCP server** for AI-assisted theme generation when available + +## Key Rules + +1. **Never overwrite existing files directly** — propose theme code as an update for user review +2. **Always call `detect_platform` first** when using MCP tools +3. **Always call `get_component_design_tokens` before `create_component_theme`** +4. **Palette shades**: 50 = lightest, 900 = darkest +5. **Surface color must match variant** — light color for `light`, dark for `dark` +6. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` +7. **Sass**: Component themes use `@include tokens($theme)` inside a selector +8. **Never hardcode colors after palette generation** + +## Additional Resources + +- [Ignite UI for React — Themes Overview](https://www.infragistics.com/products/ignite-ui-react/react/components/themes/overview) +- [igniteui-theming npm package](https://www.npmjs.com/package/igniteui-theming) +- [CSS Custom Properties on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) +- [CSS ::part() on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md new file mode 100644 index 000000000..02fce342e --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md @@ -0,0 +1,265 @@ +# CSS Theming + +This guide covers theming Ignite UI for React using CSS custom properties — works in any project without additional build tooling. + +## Pre-built Themes + +Import a pre-built CSS file in your React entry point: + +```tsx +// main.tsx or index.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +> **CRITICAL:** Theme CSS imports are **required** for components to render correctly. + +**For grids**, you **must also** import the grid theme CSS: + +```tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; +``` + +### Available Pre-built CSS Files + +| Import path | Theme | +|---|---| +| `igniteui-webcomponents/themes/light/bootstrap.css` | Bootstrap Light | +| `igniteui-webcomponents/themes/dark/bootstrap.css` | Bootstrap Dark | +| `igniteui-webcomponents/themes/light/material.css` | Material Light | +| `igniteui-webcomponents/themes/dark/material.css` | Material Dark | +| `igniteui-webcomponents/themes/light/fluent.css` | Fluent Light | +| `igniteui-webcomponents/themes/dark/fluent.css` | Fluent Dark | +| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light | +| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark | + +Grid theme CSS files follow the same pattern under `igniteui-react-grids/grids/themes/`. + +### Next.js + +In Next.js, import the theme CSS in each client component file or in a shared root layout: + +```tsx +// app/layout.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + <html lang="en"> + <body>{children}</body> + </html> + ); +} +``` + +## Custom Theme via CSS Custom Properties + +After importing a pre-built theme, override individual design tokens with CSS custom properties. + +### Global Overrides (in your CSS file) + +```css +/* src/index.css */ +:root { + --ig-primary-h: 211deg; + --ig-primary-s: 100%; + --ig-primary-l: 50%; + + --ig-secondary-h: 33deg; + --ig-secondary-s: 100%; + --ig-secondary-l: 50%; +} +``` + +Import it in your entry point: + +```tsx +// main.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Theme first +import './index.css'; // Overrides — must come after the theme import +``` + +### Scoped Overrides + +Use a CSS class to scope theme overrides to a specific container: + +```css +/* src/AdminPanel.css */ +.admin-panel { + --ig-primary-h: 260deg; + --ig-primary-s: 60%; + --ig-primary-l: 45%; +} +``` + +```tsx +// AdminPanel.tsx +import './AdminPanel.css'; +import { IgrButton, IgrInput } from 'igniteui-react'; + +function AdminPanel() { + return ( + <div className="admin-panel"> + <IgrInput label="Admin Search" /> + <IgrButton>Save</IgrButton> + </div> + ); +} +``` + +### CSS Modules + +```css +/* AdminPanel.module.css */ +.panel { + --ig-primary-h: 260deg; + --ig-primary-s: 60%; + --ig-primary-l: 45%; +} +``` + +```tsx +import styles from './AdminPanel.module.css'; +import { IgrButton } from 'igniteui-react'; + +function AdminPanel() { + return ( + <div className={styles.panel}> + <IgrButton>Save</IgrButton> + </div> + ); +} +``` + +### Inline Styles on a Wrapper + +For truly dynamic one-off overrides: + +```tsx +<div style={{ '--ig-primary-h': '260deg', '--ig-primary-s': '60%', '--ig-primary-l': '45%' } as React.CSSProperties}> + <IgrButton>Custom Color Button</IgrButton> +</div> +``` + +> **Note:** TypeScript requires the `as React.CSSProperties` cast. Prefer CSS classes when possible. + +## Component-Level Theming + +Override individual component appearance using CSS custom properties. + +```css +/* Target the Ignite UI web component tag name */ +igc-avatar { + --ig-avatar-background: var(--ig-primary-500); + --ig-avatar-color: var(--ig-primary-500-contrast); +} + +igc-button { + --ig-button-foreground: var(--ig-secondary-500); +} +``` + +> **IMPORTANT — No Hardcoded Colors** +> +> ✅ **Right:** `--ig-avatar-background: var(--ig-primary-500);` +> ❌ **Wrong:** `--ig-avatar-background: #E91E63;` + +### CSS `::part()` Selectors + +Use `::part()` selectors to style shadow DOM internal elements: + +```css +igc-input::part(input) { + font-size: 1.1rem; +} + +igc-card::part(header) { + padding: 1rem; +} +``` + +> **Note:** In CSS, use web component tag names (`igc-input`), not React component names (`IgrInput`). + +## Layout Controls + +### Sizing + +```css +:root { --ig-size: 2; } /* 1 = small, 2 = medium, 3 = large */ +igc-button { --ig-size: 1; } +``` + +### Spacing + +```css +:root { --ig-spacing: 1; } /* 0.5 = compact, 1 = default, 2 = spacious */ +.compact-section { --ig-spacing: 0.75; } +``` + +### Roundness + +```css +:root { --ig-radius-factor: 1; } /* 0 = square, 1 = maximum radius */ +igc-avatar { --ig-radius-factor: 0.5; } +``` + +## Switching Between Light and Dark Themes + +### Approach 1: CSS class toggle + +```tsx +import { useState } from 'react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './theme-overrides.css'; + +function App() { + const [isDark, setIsDark] = useState(false); + + return ( + <div className={isDark ? 'dark-theme' : ''}> + <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button> + </div> + ); +} +``` + +```css +/* theme-overrides.css */ +.dark-theme { + --ig-surface-h: 0deg; + --ig-surface-s: 0%; + --ig-surface-l: 7%; + + --ig-gray-h: 0deg; + --ig-gray-s: 0%; + --ig-gray-l: 100%; +} +``` + +### Approach 2: CSS media query + +```css +@media (prefers-color-scheme: dark) { + :root { + --ig-surface-h: 0deg; + --ig-surface-s: 0%; + --ig-surface-l: 7%; + } +} +``` + +### Approach 3: Dynamically swap theme stylesheet + +```tsx +import { useEffect } from 'react'; + +function useTheme(variant: 'light' | 'dark', design = 'bootstrap') { + useEffect(() => { + const link = document.getElementById('igc-theme') as HTMLLinkElement; + if (link) { + link.href = `node_modules/igniteui-webcomponents/themes/${variant}/${design}.css`; + } + }, [variant, design]); +} +``` diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md new file mode 100644 index 000000000..ecc05fd03 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md @@ -0,0 +1,75 @@ +# Ignite UI Theming MCP Server + +The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available. + +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any theming tools, you MUST verify the MCP server is available +> by calling `detect_platform`. If the tool is not available or the call fails, +> configure it by following the setup steps below. + +## VS Code Setup + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +## Cursor Setup + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +## Claude Desktop Setup + +Edit the Claude Desktop config file: +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs Setup + +1. Go to **Settings → Tools → AI Assistant → MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp` +4. Click OK and restart the AI Assistant + +## MCP Server Workflow + +1. **Detect platform**: Call `detect_platform` — it will detect `webcomponents` from `package.json` +2. **Generate a theme**: Call `create_theme` with your desired colors and design system +3. **Customize components**: Call `get_component_design_tokens` first, then `create_component_theme` with palette token values +4. **Get color references**: Call `get_color` to get the correct CSS custom property for any palette shade +5. **Adjust layout**: Call `set_size`, `set_spacing`, or `set_roundness` + +## File Safety Rule + +> **IMPORTANT — File Safety Rule**: When generating theme code, **never overwrite existing style files directly**. Always propose changes as an update and let the user review before writing to disk. diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md new file mode 100644 index 000000000..77e2333b7 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md @@ -0,0 +1,86 @@ +# Reveal SDK Theme Sync + +When the project includes Reveal SDK (`reveal-sdk-wrappers-react`) alongside Ignite UI for React, the Reveal dashboard theme should be synced with the active Ignite UI theme. + +> **⚠️ IMPORTANT:** Reveal SDK requires client runtime scripts (jQuery, Day.js, infragistics.reveal.js) to be loaded and initialization must happen in `useEffect` after mount. See [REVEAL-SDK.md](../../igniteui-react-components/reference/REVEAL-SDK.md) for full setup instructions. + +## How It Works + +Ignite UI themes expose CSS custom properties (`--ig-font-family`, `--ig-surface-500`, `--ig-gray-100`, etc.) on the page. The Reveal SDK has its own `$.ig.RevealTheme` object that controls dashboard appearance. The sync function reads the Ignite UI tokens from computed styles and maps them to Reveal's theme properties. + +## Reveal Theme Sync Function + +Call this function in `useEffect` when initializing a component that uses Reveal. Always guard against missing `$` and `$.ig`: + +```tsx +import { useEffect } from 'react'; + +declare const $: any; + +function setRevealTheme() { + // Guard: Ensure Reveal runtime is loaded + if (typeof $ === 'undefined' || !$.ig) { + console.error('Reveal SDK runtime not loaded.'); + return; + } + + const style = window.getComputedStyle(document.body); + const theme = new $.ig.RevealTheme(); + + // 1. Sync fonts with the Ignite UI --ig-font-family token + theme.regularFont = style.getPropertyValue('--ig-font-family')?.trim() || 'sans-serif'; + theme.mediumFont = theme.regularFont; + theme.boldFont = theme.regularFont; + + // 2. Auto-detect light/dark from surface color brightness + const color = style.getPropertyValue('--ig-surface-500').trim() || '#fff'; + const [r, g, b] = [1, 3, 5].map(i => parseInt(color.substring(i, i + 2), 16)); + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + + theme.isDark = brightness < 128; + theme.fontColor = theme.isDark ? 'white' : 'black'; + + // 3. Sync background colors with Ignite UI palette tokens + theme.dashboardBackgroundColor = style.getPropertyValue('--ig-gray-100').trim(); + theme.visualizationBackgroundColor = style.getPropertyValue('--ig-surface-500').trim(); + + $.ig.RevealSdkSettings.theme = theme; +} + +// Example usage in a component +function DashboardView() { + useEffect(() => { + // Initialize theme sync after mount + setRevealTheme(); + }, []); + + // ... component implementation +} +``` + +## Token Mapping Reference + +| Reveal Theme Property | Ignite UI CSS Token | Purpose | +|---|---|---| +| `regularFont`, `mediumFont`, `boldFont` | `--ig-font-family` | Font family | +| `isDark` | Computed from `--ig-surface-500` brightness | Light/dark mode detection | +| `fontColor` | Derived from `isDark` | Text color (white for dark, black for light) | +| `dashboardBackgroundColor` | `--ig-gray-100` | Dashboard background | +| `visualizationBackgroundColor` | `--ig-surface-500` | Individual visualization card background | + +## Re-syncing After Theme Switch + +When the user switches between light and dark Ignite UI themes, call `setRevealTheme()` again to update the Reveal dashboard: + +```tsx +function handleThemeToggle() { + // ... toggle Ignite UI theme (e.g., swap CSS imports) + + // Re-sync Reveal theme after DOM updates + requestAnimationFrame(() => { + setRevealTheme(); + }); +} +``` + +See the [components skill](../../igniteui-react-components/reference/REVEAL-SDK.md) for full Reveal SDK setup instructions including installation, runtime scripts, and `$.ig.RevealView` initialization. diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md new file mode 100644 index 000000000..2ce76fdf4 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md @@ -0,0 +1,125 @@ +# Sass Theming + +> Requires Sass configured in the project (e.g., `sass` in `devDependencies` and Vite/webpack configured to handle `.scss` files). + +## Basic Setup + +```scss +// src/styles.scss +@use 'igniteui-theming' as *; + +// 1. Define a palette +$my-palette: palette( + $primary: #1976D2, + $secondary: #FF9800, + $surface: #FAFAFA +); + +// 2. Apply the palette +@include palette($my-palette); + +// 3. Optional: Typography +@include typography($font-family: "'Roboto', sans-serif"); + +// 4. Optional: Elevations +@include elevations(); + +// 5. Optional: Spacing +@include spacing(); +``` + +Import in your React entry point: + +```tsx +// main.tsx +import './styles.scss'; +``` + +## Dark Theme + +For dark themes, use a dark surface color and a dark schema: + +```scss +@use 'igniteui-theming' as *; + +$dark-palette: palette( + $primary: #90CAF9, + $secondary: #FFB74D, + $surface: #121212 +); + +@include palette($dark-palette, $schema: $dark-material-schema); +``` + +> **Important:** Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` or Angular-specific `core()` / `theme()` mixins. + +## Component-Level Theming with Sass + +When Sass is configured, use component theme functions and the `tokens` mixin: + +```scss +@use 'igniteui-theming' as *; + +$custom-avatar: avatar-theme( + $schema: $light-material-schema, + $background: var(--ig-primary-500), + $color: var(--ig-primary-500-contrast) +); + +igc-avatar { + @include tokens($custom-avatar); +} +``` + +## Light/Dark Toggle with Sass + +```scss +@use 'igniteui-theming' as *; + +$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA); +$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212); + +@include typography($font-family: "'Roboto', sans-serif"); +@include elevations(); + +// Light is default +@include palette($light-palette, $schema: $light-material-schema); + +// Dark via class on a container or <body> +.dark-theme { + @include palette($dark-palette, $schema: $dark-material-schema); +} +``` + +## Theming Architecture + +The Ignite UI theming system is built on four pillars: + +| Concept | Purpose | +|---|---| +| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 | +| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) | +| **Elevations** | Box-shadow levels 0–24 for visual depth | +| **Schema** | Per-component recipes mapping palette colors to component tokens | + +### Design Systems + +Four built-in design systems are available: + +- **Material** (default) — Material Design 3 +- **Bootstrap** — Bootstrap-inspired +- **Fluent** — Microsoft Fluent Design +- **Indigo** — Infragistics Indigo Design + +Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`). + +### Palette Shades + +- Shades 50 = lightest, 900 = darkest for all chromatic colors +- Surface color must match the variant — light color for `light`, dark color for `dark` + +## Key Rules + +1. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` +2. **Sass**: Component themes use `@include tokens($theme)` inside a selector +3. **Never hardcode colors after palette generation** — use `var(--ig-<family>-<shade>)` palette tokens everywhere diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/TROUBLESHOOTING.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/TROUBLESHOOTING.md new file mode 100644 index 000000000..5faef71ca --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/TROUBLESHOOTING.md @@ -0,0 +1,35 @@ +# Theming Troubleshooting + +## Issue: Theme overrides not taking effect + +**Cause:** Override CSS is loaded before the theme CSS. + +**Solution:** Make sure your custom CSS is imported *after* the theme: + +```tsx +// main.tsx +import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Theme first +import './custom-overrides.css'; // Overrides second +``` + +## Issue: CSS custom properties not recognized by TypeScript in inline styles + +**Solution:** Cast to `React.CSSProperties`: + +```tsx +<div style={{ '--ig-primary-h': '260deg' } as React.CSSProperties}> +``` + +## Issue: Component-level CSS selectors don't match + +**Cause:** Using React component name instead of web component tag name in CSS. + +**Solution:** Use the underlying web component tag name in CSS selectors: + +```css +/* ✅ Correct — web component tag */ +igc-button { --ig-size: 1; } + +/* ❌ Wrong — React wrapper name */ +IgrButton { --ig-size: 1; } +``` diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-optimize-bundle-size/SKILL.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-optimize-bundle-size/SKILL.md new file mode 100644 index 000000000..cad2d537d --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-optimize-bundle-size/SKILL.md @@ -0,0 +1,439 @@ +--- +name: igniteui-react-optimize-bundle-size +description: This skill optimizes application bundle size when using Ignite UI for React and should be used when the bundle is too large, when setting up tree-shaking, or when lazy loading heavy components like grids and charts +user-invocable: true +--- + +# Optimize Bundle Size + +This skill helps users minimize their React application's bundle size when using Ignite UI for React by importing only the components they need, leveraging tree-shaking, and applying lazy loading strategies. + +## Example Usage + +- "My bundle size is too large" +- "How do I reduce the size of igniteui-react?" +- "Import only the components I need" +- "Tree-shake unused components" +- "Optimize imports for production" +- "How do I lazy load the data grid?" + +## Related Skills + +- [igniteui-react-components](../igniteui-react-components/SKILL.md) — Choose only the components you need and set up your React project +- [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Theming after optimization + +## When to Use + +- Application bundle size is too large +- User wants to optimize for production +- User is importing more components than needed +- User asks about tree-shaking or optimization +- User wants to improve load times +- User wants to code-split heavy components like grids or charts + +--- + +## Key Principles + +1. **Install only the packages you need** — don't install `igniteui-react-grids` if you only use core UI components +2. **Use named imports** — enable tree-shaking by importing specific components +3. **Lazy load heavy components** — use `React.lazy` + `Suspense` for grids, charts, and other large components +4. **Analyze your bundle** — use tools to identify what's being included + +--- + +## Granular Package Imports + +Only install the packages you actually use: + +| Package | Contains | Install only if you need… | +|---|---|---| +| `igniteui-react` | Buttons, inputs, dialogs, calendars, lists, etc. | Core UI components | +| `igniteui-react` + `igniteui-grid-lite` | Lightweight grid (`IgrGridLite` from `igniteui-react/grid-lite`) | Simple tabular data (MIT, requires both packages) | +| `igniteui-react-grids` | DataGrid, TreeGrid, PivotGrid, HierarchicalGrid | Advanced data grids (commercial) | +| `igniteui-react-charts` | Category, Pie, Financial, Scatter charts | Charts and data visualization (commercial) | +| `igniteui-react-maps` | Geographic maps | Map visualizations (commercial) | +| `igniteui-react-gauges` | Radial and linear gauges | Gauge indicators (commercial) | + +```bash +# Only install what you need: +npm install igniteui-react # Core UI only +npm install igniteui-react-grids # Only if you need advanced grids +npm install igniteui-react-charts # Only if you need charts +``` + +--- + +## Import Strategies + +### ❌ Bad: Wildcard / Barrel Imports + +```tsx +// DON'T DO THIS — imports everything from the package +import * as IgniteUI from 'igniteui-react'; + +function App() { + return <IgniteUI.IgrButton>Click</IgniteUI.IgrButton>; +} +``` + +**Impact:** Tree-shaking cannot eliminate unused components. + +### ✅ Good: Named Imports + +```tsx +// DO THIS — import only what you use +import { IgrButton, IgrInput, IgrCard } from 'igniteui-react'; + +function App() { + return ( + <div> + <IgrInput label="Name" /> + <IgrButton><span>Submit</span></IgrButton> + <IgrCard>Content</IgrCard> + </div> + ); +} +``` + +**Impact:** Bundle includes only the three components and their dependencies. Tree-shaking removes everything else. + +--- + +## Lazy Loading with `React.lazy` + `Suspense` + +Code-split heavy components behind lazy imports to reduce initial bundle size. + +### Lazy Loading a Single Component + +```tsx +import { lazy, Suspense, useState } from 'react'; + +// Lazy load the dialog component +const IgrDialog = lazy(() => + import('igniteui-react').then(module => ({ default: module.IgrDialog })) +); + +function App() { + const [showDialog, setShowDialog] = useState(false); + + return ( + <> + <button onClick={() => setShowDialog(true)}>Open Dialog</button> + {showDialog && ( + <Suspense fallback={<div>Loading...</div>}> + <IgrDialog open title="Hello"> + <p>Lazy loaded dialog content</p> + </IgrDialog> + </Suspense> + )} + </> + ); +} +``` + +### Lazy Loading a Heavy Page Component + +This is the recommended approach for code-splitting: wrap entire page components that use heavy Ignite UI components. + +```tsx +// App.tsx +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { lazy, Suspense } from 'react'; + +const HomePage = lazy(() => import('./pages/Home')); +const DashboardPage = lazy(() => import('./pages/Dashboard')); +const AnalyticsPage = lazy(() => import('./pages/Analytics')); + +function App() { + return ( + <BrowserRouter> + <Suspense fallback={<div>Loading...</div>}> + <Routes> + <Route path="/" element={<HomePage />} /> + <Route path="/dashboard" element={<DashboardPage />} /> + <Route path="/analytics" element={<AnalyticsPage />} /> + </Routes> + </Suspense> + </BrowserRouter> + ); +} +``` + +```tsx +// pages/Dashboard.tsx — only loaded when navigating to /dashboard +import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +export default function Dashboard() { + return ( + <IgrGrid data={data} autoGenerate={false}> + <IgrColumn field="name" header="Name" /> + <IgrColumn field="value" header="Value" /> + </IgrGrid> + ); +} +``` + +```tsx +// pages/Analytics.tsx — only loaded when navigating to /analytics +import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts'; + +IgrCategoryChartModule.register(); + +export default function Analytics() { + return <IgrCategoryChart dataSource={data} width="100%" height="500px" />; +} +``` + +**Result:** The grid and chart bundles are only downloaded when the user navigates to those routes. + +--- + +## Analyzing Your Bundle + +### Using Vite's Rollup Visualizer + +```bash +npm install --save-dev rollup-plugin-visualizer +``` + +```typescript +// vite.config.ts +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { visualizer } from 'rollup-plugin-visualizer'; + +export default defineConfig({ + plugins: [ + react(), + visualizer({ + open: true, + gzipSize: true, + brotliSize: true, + }) + ] +}); +``` + +```bash +npm run build +# Opens stats.html automatically — inspect which igniteui-react modules are included +``` + +### Using Webpack Bundle Analyzer + +```bash +npm install --save-dev webpack-bundle-analyzer +``` + +```javascript +// webpack.config.js (or CRA with react-app-rewired) +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); + +module.exports = { + plugins: [ + new BundleAnalyzerPlugin({ + analyzerMode: 'static', + openAnalyzer: false, + reportFilename: 'bundle-report.html' + }) + ] +}; +``` + +### Using source-map-explorer + +```bash +npm install --save-dev source-map-explorer +``` + +```json +{ + "scripts": { + "analyze": "source-map-explorer 'dist/**/*.js'" + } +} +``` + +```bash +npm run build +npm run analyze +``` + +**What to look for:** Check if `igniteui-react-grids` or `igniteui-react-charts` appear in the initial bundle even though they're only used on specific routes. + +--- + +## Audit Your Component Usage + +### 1. Find What Components You're Actually Using + +```bash +# Search for Igr component usage in your source files +grep -roh "Igr[A-Z][a-zA-Z]*" src/ --include="*.tsx" --include="*.ts" | sort | uniq + +# Example output: +# IgrButton +# IgrCard +# IgrInput +``` + +### 2. Compare with Your Imports + +```bash +# Find all import statements from igniteui-react packages +grep -r "from 'igniteui-react" src/ --include="*.tsx" --include="*.ts" +``` + +### 3. Remove Unused Imports + +```tsx +// Before: 5 components imported +import { IgrButton, IgrInput, IgrCard, IgrSelect, IgrCombo } from 'igniteui-react'; + +// After audit: only 3 are actually used in JSX +import { IgrButton, IgrInput, IgrCard } from 'igniteui-react'; +``` + +--- + +## Build Configuration Optimizations + +### Vite Configuration + +```typescript +// vite.config.ts +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + minify: 'terser', + terserOptions: { + compress: { + drop_console: true, + drop_debugger: true + } + }, + rollupOptions: { + output: { + manualChunks: { + 'igniteui-core': ['igniteui-react'], + // Only include if you use these packages: + // 'igniteui-grids': ['igniteui-react-grids'], + // 'igniteui-charts': ['igniteui-react-charts'], + } + } + }, + chunkSizeWarningLimit: 600, + }, + optimizeDeps: { + include: ['igniteui-react'] + } +}); +``` + +### Webpack Configuration + +```javascript +// webpack.config.js +module.exports = { + optimization: { + splitChunks: { + chunks: 'all', + cacheGroups: { + igniteui: { + test: /[\\/]node_modules[\\/]igniteui-react[\\/]/, + name: 'igniteui', + priority: 20, + }, + igniteuiGrids: { + test: /[\\/]node_modules[\\/]igniteui-react-grids[\\/]/, + name: 'igniteui-grids', + priority: 20, + } + } + }, + minimize: true, + }, + mode: 'production', +}; +``` + +--- + +## Best Practices Checklist + +- [ ] **Install only the packages you need** — don't install `igniteui-react-grids` if you only use buttons and inputs +- [ ] **Use named imports** — `import { IgrButton } from 'igniteui-react'`, not `import * as` +- [ ] **Don't import from `igniteui-webcomponents` directly** — use the `igniteui-react` wrappers +- [ ] **Lazy load heavy components** — use `React.lazy` + `Suspense` for grids, charts, and dialogs +- [ ] **Split by routes** — load component-heavy pages only when navigated to +- [ ] **Audit your imports regularly** — remove unused components +- [ ] **Analyze your bundle** — use bundle analyzer tools to verify tree-shaking is working +- [ ] **Minify in production** — ensure build tool minification is enabled +- [ ] **Use compression** — enable gzip/brotli on your server + +--- + +## Common Issues & Solutions + +### Issue: Bundle still large after using named imports + +**Investigate:** +1. Check if you're importing from `igniteui-webcomponents` instead of `igniteui-react` +2. Verify tree-shaking is working (check build output with a bundle analyzer) +3. Look for barrel imports (`import * as`) +4. Check if large packages like `igniteui-react-grids` are in the initial bundle instead of being lazy loaded + +### Issue: Lazy loaded component flashes or shows fallback too long + +**Solution:** Preload the component on hover or route prefetch: + +```tsx +const DashboardPage = lazy(() => import('./pages/Dashboard')); + +// Preload on hover +function NavLink() { + const preload = () => { import('./pages/Dashboard'); }; + return <a href="/dashboard" onMouseEnter={preload}>Dashboard</a>; +} +``` + +### Issue: Tree-shaking not working + +**Cause:** Using `require()` instead of `import`, or a build tool that doesn't support ES module tree-shaking. + +**Solution:** Ensure your project uses ES modules: + +```json +// tsconfig.json +{ + "compilerOptions": { + "module": "esnext", + "moduleResolution": "bundler" + } +} +``` + +--- + +## Expected Results + +After optimization, you should see: + +- **Initial load time reduced** by 40–60% +- **Bundle size reduced** by 50–80% (compared to importing everything) +- **Better Core Web Vitals** scores +- **Faster time to interactive** +- **Lower bandwidth usage** for users + +## Additional Resources + +- [Vite Build Optimizations](https://vitejs.dev/guide/build.html) +- [React.lazy Documentation](https://react.dev/reference/react/lazy) +- [Webpack Tree Shaking](https://webpack.js.org/guides/tree-shaking/) +- [Web Performance Optimization](https://web.dev/fast/) +- [Bundle Size Analysis Tools](https://bundlephobia.com/) diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__github/copilot-instructions.md b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__github/copilot-instructions.md new file mode 100644 index 000000000..3397e20e2 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__github/copilot-instructions.md @@ -0,0 +1,3 @@ +Strictly follow the rules in ../AGENTS.md + +The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory. \ No newline at end of file diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json new file mode 100644 index 000000000..47b02fe0b --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json @@ -0,0 +1,12 @@ +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} \ No newline at end of file diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/package.json b/packages/cli/templates/react/igr-ts/projects/_base/files/package.json index 3d97a77a0..1cb19a190 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/package.json +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/package.json @@ -8,7 +8,6 @@ "@testing-library/react": "^16.3.0", "element-internals-polyfill": "^3.0.2", "functions-have-names": "^1.2.3", - "igniteui-react": "~19.6.0", "react": "^19.1.0", "react-app-polyfill": "^3.0.0", "react-dom": "^19.1.0", diff --git a/packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts b/packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts index 85a01de42..c889e9134 100644 --- a/packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts +++ b/packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts @@ -12,7 +12,7 @@ class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate { this.description = `provides a number of visual elements, like a needle, tick marks, ranges and labels, in order to create a predefined shape and scale.`; // TODO: read version from igniteui-react-core in package.json - this.packages = ["igniteui-react-gauges@~19.5.2"]; + this.packages = ["igniteui-react-gauges@~19.2.3"]; } } module.exports = new IgrTsRadialGaugeTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts index 4ffbee90b..fe1af8fcc 100644 --- a/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts @@ -1,19 +1,21 @@ import { html, css, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import { customElement } from 'lit/decorators.js'; import { - defineComponents, IgcDockManagerComponent, - IgcDockManagerLayout, + IgcDockManagerPaneType, + IgcSplitPaneOrientation, } from 'igniteui-dockmanager'; +import { defineCustomElements } from 'igniteui-dockmanager/loader'; -defineComponents(IgcDockManagerComponent); +defineCustomElements(); @customElement('app-$(path)') export default class $(ClassName) extends LitElement { static styles = css` - :host { + :host, igc-dockmanager { height: 100%; margin: 0px; + padding-left: 275px; width: calc(100% - 275px); } @@ -25,134 +27,42 @@ export default class $(ClassName) extends LitElement { flex-direction: column; /* background: orange; */ } - `; - @state() - private layout: IgcDockManagerLayout = { - rootPane: { - type: 'splitPane', - orientation: 'horizontal', - panes: [ - { - type: 'splitPane', - orientation: 'vertical', - panes: [ - { - type: 'contentPane', - contentId: 'content1', - header: 'Content Pane 1', - }, - { - type: 'contentPane', - contentId: 'content2', - header: 'Unpinned Pane 1', - isPinned: false, - }, - ], - }, - { - type: 'splitPane', - orientation: 'vertical', - size: 200, - panes: [ - { - type: 'documentHost', - size: 200, - rootPane: { - type: 'splitPane', - orientation: 'horizontal', - panes: [ - { - type: 'tabGroupPane', - panes: [ - { - type: 'contentPane', - header: 'Document 1', - contentId: 'content3', - }, - { - type: 'contentPane', - header: 'Document 2', - contentId: 'content4', - }, - ], - }, - ], - }, - }, - { - type: 'contentPane', - contentId: 'content5', - header: 'Unpinned Pane 2', - isPinned: false, - }, - ], - }, - { - type: 'splitPane', - orientation: 'vertical', - panes: [ - { - type: 'tabGroupPane', - size: 200, - panes: [ - { - type: 'contentPane', - contentId: 'content6', - header: 'Tab 1', - }, - { - type: 'contentPane', - contentId: 'content7', - header: 'Tab 2', - }, - { - type: 'contentPane', - contentId: 'content8', - header: 'Tab 3', - }, - { - type: 'contentPane', - contentId: 'content9', - header: 'Tab 4', - }, - { - type: 'contentPane', - contentId: 'content10', - header: 'Tab 5', - }, - ], - }, - { - type: 'contentPane', - contentId: 'content11', - header: 'Content Pane 2', - }, - ], - }, - ], - }, - floatingPanes: [ - { - type: 'splitPane', - orientation: 'horizontal', - floatingHeight: 150, - floatingWidth: 250, - floatingLocation: { x: 300, y: 200 }, - panes: [ - { - type: 'contentPane', - contentId: 'content12', - header: 'Floating Pane', - }, - ], - }, - ], - }; + .dockManagerFull { + padding: 0rem; + margin: 0rem; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + } + + .dockManagerFrame { + padding: 0rem; + margin: 0rem; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + } + + .employeesDetailsRow { + height: 4rem; + display: flex; + flex-direction: row; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + align-items: center; + } + `; render() { return html` - <igc-dockmanager .layout=${this.layout}> + <igc-dockmanager id="dockManager"> <div slot="content1" class="dockManagerContent">Content 1</div> <div slot="content2" class="dockManagerContent">Content 2</div> <div slot="content3" class="dockManagerContent">Content 3</div> @@ -168,4 +78,129 @@ export default class $(ClassName) extends LitElement { </igc-dockmanager> `; } + + firstUpdated() { + const dockManager = this.shadowRoot?.getElementById('dockManager') as IgcDockManagerComponent; + dockManager.layout = { + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content1', + header: 'Content Pane 1', + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content2', + header: 'Unpinned Pane 1', + isPinned: false, + }, + ], + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + size: 200, + panes: [ + { + type: IgcDockManagerPaneType.documentHost, + size: 200, + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + header: 'Document 1', + contentId: 'content3', + }, + { + type: IgcDockManagerPaneType.contentPane, + header: 'Document 2', + contentId: 'content4', + }, + ], + }, + ], + }, + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content5', + header: 'Unpinned Pane 2', + isPinned: false, + }, + ], + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + size: 200, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content6', + header: 'Tab 1', + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content7', + header: 'Tab 2', + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content8', + header: 'Tab 3', + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content9', + header: 'Tab 4', + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content10', + header: 'Tab 5', + }, + ], + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content11', + header: 'Content Pane 2', + }, + ], + }, + ], + }, + floatingPanes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + floatingHeight: 150, + floatingWidth: 250, + floatingLocation: { x: 300, y: 200 }, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content12', + header: 'Floating Pane', + }, + ], + }, + ], + }; + } } diff --git a/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts index cc1cba9b8..f942ed265 100644 --- a/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts @@ -10,7 +10,7 @@ class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate { this.projectType = "igc-ts"; this.name = "Dock Manager"; this.description = "Dock Manager with most functionalities and docking options"; - this.packages = ["igniteui-dockmanager@^2.1.0"]; + this.packages = ["igniteui-dockmanager@~1.14.4"]; } } module.exports = new IgcDockManagerTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts index 0e2e919e3..c0fa7b5cc 100644 --- a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts @@ -11,8 +11,8 @@ class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate { this.name = "Financial Chart"; this.description = "IgcFinancialChart"; this.packages = [ - "igniteui-webcomponents-core@~7.0.0", - "igniteui-webcomponents-charts@~7.0.0" + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-charts@~6.0.0" ]; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts index f33429ae2..c04e0494b 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts @@ -1,7 +1,7 @@ import { describe, it, expect } from 'vitest'; import $(ClassName) from './$(path).js'; -describe('IgcGridComponent', () => { +describe('IgcDataGridComponent', () => { it('<app-$(path)> is an instance of $(ClassName)', async () => { const element = document.createElement('app-$(path)'); expect(element).to.be.instanceOf($(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts index ef6e4c8c9..c871b2ffd 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts @@ -1,13 +1,45 @@ import { html, css, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids'; +import { customElement } from 'lit/decorators.js'; +import { + IgcDataGridModule, + IgcGridColumnOptionsModule, + IgcDataGridComponent, + IgcColumnGroupDescription, +} from 'igniteui-webcomponents-grids'; +import { ModuleManager } from 'igniteui-webcomponents-core'; -import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline' - -IgcGridComponent.register(); +ModuleManager.register( + IgcDataGridModule, + IgcGridColumnOptionsModule, +); @customElement('app-$(path)') export default class $(ClassName) extends LitElement { + data: any[] = [{ + Country: 'USA', + CountryFlag: 'https://static.infragistics.com/xplatform/images/flags/USA.png', + Margin: 3, + OrderDate: new Date(2021, 4, 3), + OrderItems: 7, + OrderValue: 500, + ProductID: 1001, + ProductName: 'Patriot Memory', + ProductPrice: 2000, + Status: 'Shipped', + }, + { + Country: 'Croatia', + CountryFlag: 'https://static.infragistics.com/xplatform/images/flags/Croatia.png', + Margin: 5, + OrderDate: new Date(2021, 1, 10), + OrderItems: 11, + OrderValue: 760, + ProductID: 1002, + ProductName: 'Asus GPU', + ProductPrice: 3000, + Status: 'Packing', + }]; + static styles = css` :host { height: 100%; @@ -15,62 +47,37 @@ export default class $(ClassName) extends LitElement { padding-right: 20px; width: calc(100% - 600px); } - igc-grid img { - object-fit: contain; - height: 100%; - width: 100%; - } `; - @state() - data: any[] = [{ - country: 'USA', - countryFlag: 'https://static.infragistics.com/xplatform/images/flags/USA.png', - margin: 0.03, - orderDate: new Date(2021, 4, 3), - orderItems: 7, - orderValue: 500, - productID: 1001, - productName: 'Patriot Memory', - productPrice: 2000, - status: 'Shipped', - }, - { - country: 'Croatia', - countryFlag: 'https://static.infragistics.com/xplatform/images/flags/Croatia.png', - margin: 0.05, - orderDate: new Date(2021, 1, 10), - orderItems: 11, - orderValue: 760, - productID: 1002, - productName: 'Asus GPU', - productPrice: 3000, - status: 'Packing', - }]; - - @state() - groupingExpressions: IgcGroupingExpression[] = [ - { fieldName: 'status', dir: SortingDirection.Desc }, - ]; - render() { return html` - <style>${gridThemeLightMaterial}</style> - <igc-grid - class="ig-typography" - .data=${this.data} - .groupingExpressions=${this.groupingExpressions} - filter-mode="excelStyleFilter" + <igc-data-grid + id="grid" + height="100%" + width="100%" + auto-generate-columns="false" + is-column-options-enabled="true" > - <igc-column field="productID" header="ID" width="90px"></igc-column> - <igc-column field="productName" header="Product" width="160px"></igc-column> - <igc-column field="countryFlag" header="Country" data-type="image" width="100px"></igc-column> - <igc-column field="orderItems" header="Orders" data-type="number" width="100px"></igc-column> - <igc-column field="orderValue" header="Order Value" data-type="currency" width="140px"></igc-column> - <igc-column field="orderDate" header="Order Date" data-type="date"></igc-column> - <igc-column field="margin" header="Margin" data-type="percent" width="100px"></igc-column> - <igc-column field="status" header="Status" width="100px" groupable></igc-column> - </igc-grid> + <igc-text-column field="ProductID" header-text="ID" width="*>95"></igc-text-column> + <igc-text-column field="ProductName" header-text="Product" width="*>160"></igc-text-column> + <igc-image-column field="CountryFlag" header-text="Country" width="*>120" contentOpacity="1" + padding-top="5" padding-bottom="5"></igc-image-column> + <igc-numeric-column field="OrderItems" header-text="Orders" width="*>105"></igc-numeric-column> + <igc-numeric-column field="OrderValue" header-text="Order Value" width="*>140" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column> + <igc-date-time-column field="OrderDate" header-text="Order Date" width="*>135" dateTimeFormat="DateShort" ></igc-date-time-column> + <igc-numeric-column field="Margin" header-text="Margin" width="*>115" positive-suffix="%"></igc-numeric-column> + <igc-text-column field="Status" header-text="Status" width="*>100"></igc-text-column> + </igc-data-grid> `; } + + firstUpdated() { + const grid = this.shadowRoot?.getElementById('grid') as IgcDataGridComponent; + grid.dataSource = this.data; + + const grouping = new IgcColumnGroupDescription(); + grouping.field = 'Status'; + grouping.displayName = 'Status'; + grid.groupDescriptions.add(grouping); + } } diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts index d9832ee3e..399cc8a97 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts @@ -10,7 +10,12 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate { this.projectType = "igc-ts"; this.name = "Grid"; this.description = "IgcGrid with local data"; - this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ]; + this.packages = [ + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-grids@~6.0.0", + "igniteui-webcomponents-inputs@~6.0.0", + "igniteui-webcomponents-layouts@~6.0.0" + ]; } } module.exports = new IgcGridTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts index 1ad71168d..83ec64969 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts @@ -1,117 +1,216 @@ import { css, html, LitElement } from 'lit'; -import { customElement, query, state } from 'lit/decorators.js'; -import { defineComponents, IgcButtonComponent, IgcCheckboxChangeEventArgs, IgcSwitchComponent } from 'igniteui-webcomponents'; +import { customElement } from 'lit/decorators.js'; import { - IgcGridComponent + EditModeType, + GridActivationMode, + DataGridSelectionMode, + IgcDataGridComponent, + IgcDataGridModule, + IgcGridCellValueChangingEventArgs, + IgcGridColumnOptionsModule, + IgcTemplateCellUpdatingEventArgs, + IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids'; +import { ModuleManager } from 'igniteui-webcomponents-core'; import { DataGridSharedData } from './DataGridSharedData'; -import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'; - -defineComponents(IgcButtonComponent, IgcGridComponent, IgcSwitchComponent); +ModuleManager.register( + IgcDataGridModule, + IgcGridColumnOptionsModule, +); @customElement('app-$(path)') export default class $(ClassName) extends LitElement { + data: any[] = DataGridSharedData.getEmployees(); + static styles = css` :host { height: 100%; margin: 0px; padding-right: 20px; width: calc(100% - 600px); - --ig-size: var(--ig-size-medium); + } + `; + + render() { + return html` + <div class="container sample"> + <div class="options horizontal"> + <button id="commitClick" disabled="true">Commit</button> + <button id="undoClick" disabled="true">Undo</button> + <button id="redoClick" disabled="true">Redo</button> + <span class="options-label">Edit Mode: </span> + <select id="editModeDropBox" class="options-label"> + <option>Cell</option> + <option>CellBatch</option> + <option>Row</option> + <option>None</option> + </select> + <label id="excel-style-editing" >Excel Style</label> + <span class="options-label">Edit Mode: </span> + <select id="editModeClickActionDropBox" class="options-label"> + <option>SingleClick</option> + <option>DoubleClick</option> + </select> + </div> + + <igc-data-grid + id="grid" + height="calc(100% - 3.5rem)" + width="100%" + activation-mode="Cell" + selection-mode="SingleCell" + default-column-min-width="125" + is-column-options-enabled="true" + auto-generate-columns="false" + edit-mode-click-action="SingleClick" + edit-mode="Cell"> + + <igc-text-column field="Name" width="*>150"></igc-text-column> + <igc-text-column field="Street" header-text="Street" width="*>155"></igc-text-column> + <igc-text-column field="City" header-text="City" width="*>125"></igc-text-column> + <igc-numeric-column field="Salary" header-text="Salary" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column> + + <igc-image-column field="Photo" header-text="Photo" content-opacity="1" + horizontal-alignment="center" width="*>90"></igc-image-column> + <igc-date-time-column field="Birthday" header-text="Date of Birth" width="*>140"></igc-date-time-column> + <igc-template-column id="deleteRowColumn" field="Delete Row" header-text="Delete Row" width="*>140" is-column-options-enabled="false" ></igc-date-time-column> + </igc-data-grid> + </div> + `; + } + + firstUpdated() { + const grid = this.shadowRoot?.getElementById('grid') as IgcDataGridComponent; + const commitButton = this.shadowRoot?.getElementById('commitClick') as HTMLButtonElement; + const undoButton = this.shadowRoot?.getElementById('undoClick') as HTMLButtonElement; + const redoButton = this.shadowRoot?.getElementById('redoClick') as HTMLButtonElement; + + const onCommitClick = () => { + grid.commitEdits(); + commitButton.disabled = true; + undoButton.disabled = !grid.canUndo; + }; + + const onUndoClick = () => { + grid.undo(); + undoButton.disabled = !grid.canUndo; + if (!grid.canUndo) { + commitButton.disabled = grid.canCommit; + } else { + commitButton.disabled = !grid.canCommit; + } + + redoButton.disabled = !grid.canRedo; + }; + + const onRedoClick = () => { + grid.redo(); + + if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) { + commitButton.disabled = !grid.canCommit; + } + if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + redoButton.disabled = !grid.canRedo; + undoButton.disabled = !grid.canUndo; + if (!grid.canUndo) { + commitButton.disabled = grid.canCommit; + } else { + commitButton.disabled = !grid.canCommit; + } + } + }; + + if (commitButton !== null) { + commitButton.onclick = onCommitClick; } - .actions { - display: flex; - gap: 8px; - padding: 8px; + if (undoButton !== null) { + undoButton.onclick = onUndoClick; } - igc-grid img { - object-fit: contain; - height: 30px; + + if (redoButton !== null) { + redoButton.onclick = onRedoClick; } - `; - @state() - data: any[] = DataGridSharedData.getEmployees(); + const onDeleteRowClick = (e: MouseEvent) => { + const button = e.srcElement as HTMLButtonElement; + const viewIndex = parseInt(button.id, 10); + const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex); - @query('igc-grid', true) - grid!: IgcGridComponent & { transactions: any }; + if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + grid.removeItem(rowItem); + commitButton.disabled = !grid.canCommit; + redoButton.disabled = !grid.canRedo; + undoButton.disabled = !grid.canUndo; + } else if (grid.editMode === EditModeType.Cell) { + // delete grid row immediately + grid.removeItem(rowItem); + } + }; - @state() - private batchEditingState = { - canUndo: false, - canRedo: false, - hasChanges: false, - }; + const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, + e: IgcTemplateCellUpdatingEventArgs) => { + const content = e.content as HTMLDivElement; + if (content.childElementCount === 0) { + const button = document.createElement('button') as HTMLButtonElement; + button.innerText = 'Delete'; + button.onclick = onDeleteRowClick; + content.appendChild(button); + } - @state() - private rowEditMode = false; + const button = content.children[0] as HTMLButtonElement; + button.disabled = e.cellInfo.isDeleted; + button.id = e.cellInfo.dataRow.toString(); + }; - @state() - private batchEditing = false; + const editModeChanged = (event: any) => { + grid.cancelEdits(); + grid.editMode = event.target.value; + if (grid.editMode === EditModeType.None || grid.editMode === EditModeType.Cell) { + commitButton.disabled = true; + undoButton.disabled = !grid.canUndo; + redoButton.disabled = !grid.canRedo; + } + }; - private undoClick = () => { - this.grid.endEdit(true); - this.grid.transactions.undo(); - } + const editModeClickActionChanged = (event: any) => { + grid.editModeClickAction = event.target.value; + }; - private redoClick = () => { - this.grid.endEdit(true); - this.grid.transactions.redo(); - } + const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => { + if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + commitButton.disabled = !grid.canCommit; + undoButton.disabled = false; + } else if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) { + commitButton.disabled = grid.canCommit; + } + if (e.newValue === '') { + commitButton.disabled = true; + s.setEditError(e.editID, 'Error, cell is empty'); + } + }; - private commitClick = () => { - this.grid.endEdit(true); - this.grid.transactions.commit(this.grid.data); - } + if (grid !== null) { + grid.dataSource = this.data; + grid.activationMode = GridActivationMode.Cell; + grid.selectionMode = DataGridSelectionMode.SingleCell; + grid.editMode = EditModeType.Cell; + grid.cellValueChanging = onCellValueChanging; + } - private async updateBatchEditing(active: boolean) { - this.batchEditing = active; - if (active) { - // await for batchEditing to apply so transactions are ready: - await this.updateComplete; - this.grid.transactions.onStateUpdate.subscribe(() => { - this.batchEditingState = { - canUndo: this.grid.transactions.canUndo, - canRedo: this.grid.transactions.canRedo, - hasChanges: this.grid.transactions.getAggregatedChanges(false).length > 0 - }; - }); + const dropDown = this.shadowRoot?.getElementById('editModeDropBox'); + if (dropDown !== null) { + dropDown!.onchange = editModeChanged; } - } - render() { - return html` - <style>${gridThemeLightMaterial}</style> - <div class="actions"> - <igc-switch @igcChange=${(e: CustomEvent<IgcCheckboxChangeEventArgs>) => this.rowEditMode = e.detail.checked}> - Row Edit Mode - </igc-switch> - <igc-switch @igcChange=${(e: CustomEvent<IgcCheckboxChangeEventArgs>) => this.updateBatchEditing(e.detail.checked)}> - Batch Editing - </igc-switch> - <igc-button @click=${this.commitClick} ?disabled=${!this.batchEditingState.hasChanges}>Commit</igc-button> - <igc-button @click=${this.undoClick} ?disabled=${!this.batchEditingState.canUndo}>Undo</igc-button> - <igc-button @click=${this.redoClick} ?disabled=${!this.batchEditingState.canRedo}>Redo</igc-button> - </div> + const dropDown2 = this.shadowRoot?.getElementById('editModeClickActionDropBox'); + if (dropDown2 !== null) { + dropDown2!.onchange = editModeClickActionChanged; + } - <igc-grid - class="ig-typography" - .data=${this.data} - primary-key="ID" - .batchEditing=${this.batchEditing} - .rowEditable=${this.rowEditMode} - > - <igc-column field="Name" editable width="150px"></igc-column> - <igc-column field="Street" header="Street" editable width="155px"></igc-column> - <igc-column field="City" header="City" editable width="125px"></igc-column> - <igc-column field="Salary" header="Salary" data-type="currency" editable></igc-column> - <igc-column field="Photo" header="Photo" data-type="image" editable width="90px"></igc-column> - <igc-column field="Birthday" header="Date of Birth" data-type="date" editable></igc-column> - <igc-action-strip> - <igc-grid-editing-actions></igc-grid-editing-actions> - </igc-action-strip> - </igc-grid> - `; + const deleteRowColumn = this.shadowRoot?.getElementById('deleteRowColumn') as IgcTemplateColumnComponent; + if (deleteRowColumn !== null) { + deleteRowColumn.cellUpdating = onDeleteCellUpdating; + } } } diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts index cc4a8ffaf..f9356c296 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts @@ -10,7 +10,6 @@ class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate { this.projectType = "igc-ts"; this.name = "Grid Editing"; this.description = "IgcGrid with editing enabled"; - this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ]; } } module.exports = new IgcGridEditingTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts index 697c13beb..350c22ceb 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts @@ -1,34 +1,33 @@ import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import { customElement } from 'lit/decorators.js'; +import 'igniteui-webcomponents-grids/grids/combined'; +import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids'; import { - IgcGridComponent -} from 'igniteui-webcomponents-grids'; + ComponentRenderer, + WebGridDescriptionModule, +} from 'igniteui-webcomponents-core'; import { NwindData, } from './NwindData'; -IgcGridComponent.register(); - @customElement('app-$(path)') export default class $(ClassName) extends LitElement { + static styles = css` :host { height: 80%; margin: 0px; padding-right: 20px; width: calc(100% - 600px); - } + } `; - @state() - data = new NwindData(); - render() { return html` - <link rel="stylesheet" href="./node_modules/igniteui-webcomponents-grids/grids/themes/light/material.css"> + <link rel="stylesheet" href="./node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css"> <div class="container sample"> <div class="container fill"> - <igc-grid .data=${this.data} primary-key="ProductID" class="ig-typography"> + <igc-grid auto-generate="false" name="grid" id="grid" primary-key="ProductID"> <igc-column name="ProductID" id="ProductID" field="ProductID"></igc-column> <igc-column name="ProductName" id="ProductName" field="ProductName" header="Product Name" has-summary="true"></igc-column> <igc-column name="UnitPrice" id="UnitPrice" field="UnitPrice" header="Unit Price" has-summary="true"></igc-column> @@ -40,4 +39,19 @@ export default class $(ClassName) extends LitElement { </div> `; } + + firstUpdated() { + const grid = this.shadowRoot?.getElementById('grid') as IgcGridComponent; + const nwindData = NwindData; + + grid.data = new nwindData(); + + const _componentRenderer = new ComponentRenderer(); + const renderer = (_componentRenderer: ComponentRenderer) => { + const context = _componentRenderer.context; + WebGridDescriptionModule.register(context); + return _componentRenderer; + } + renderer(_componentRenderer); + } } diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts index cc64348fa..38f652027 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts @@ -10,7 +10,6 @@ class IgcGridSummariesTemplate extends IgniteUIForWebComponentsTemplate { this.projectType = "igc-ts"; this.name = "Grid Summaries"; this.description = "IgcGrid with column summaries"; - this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ]; } } module.exports = new IgcGridSummariesTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts index 959104e8f..c22b76cd3 100644 --- a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts @@ -11,8 +11,8 @@ class IgcLinearGaugeTemplate extends IgniteUIForWebComponentsTemplate { this.name = "Linear Gauge"; this.description = "IgcLinearGauge"; this.packages = [ - "igniteui-webcomponents-core@~7.0.0", - "igniteui-webcomponents-gauges@~7.0.0" + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-gauges@~6.0.0" ]; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts index 7bb4902ab..ce615a1da 100644 --- a/packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts @@ -11,8 +11,8 @@ class IgcLinearProgressComponent extends IgniteUIForWebComponentsTemplate { this.name = "Linear Progress"; this.description = "Basic Linear Progress"; this.packages = [ - "igniteui-webcomponents-core@~7.0.0", - "igniteui-webcomponents-charts@~7.0.0" + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-charts@~6.0.0" ]; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/index.ts index 10a5378ba..045ad2abe 100644 --- a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/index.ts @@ -11,8 +11,8 @@ class IgcPieChartTemplate extends IgniteUIForWebComponentsTemplate { this.name = "Pie Chart"; this.description = "IgcPieChart with local data"; this.packages = [ - "igniteui-webcomponents-core@~7.0.0", - "igniteui-webcomponents-charts@~7.0.0" + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-charts@~6.0.0" ]; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/AGENTS.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/AGENTS.md new file mode 100644 index 000000000..a388324c5 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/AGENTS.md @@ -0,0 +1,33 @@ +You are an expert in building front-end web applications. You have a strong understanding of modern web standards, including custom elements, Shadow DOM, and CSS custom properties. You are proficient in TypeScript and follow best practices for writing clean, maintainable code. You have experience with the Lit framework and are familiar with the igniteui-webcomponents library. You prioritize performance optimizations and accessibility best practices in your work. + +## Coding Standards + +- Use standard ESM imports. +- TypeScript imports end with `.js` extension. +- Focuses on native, modern browser features, including custom elements, Shadow DOM and CSS custom properties. +- Follows latest ECMAScript standards and best practices. +- Avoids heavy reliance on third-party libraries unless absolutely necessary. +- Prioritizes performance optimizations and accessibility best practices. +- Writes clean, maintainable, and well-documented code. +- Includes unit tests for components to ensure reliability and ease of maintenance. + +## TypeScript Best Practices + +- Use strict type checking. +- Avoid using `any` type; use `unknown` when type is uncertain. +- Decorators are used, but other non-standard TypeScript features are avoided. + +## Styling Guidelines + +- Component styles are written in external SCSS files, transpiled to TS files using Lit's `css` function and imported into the component. +- Internal parts of components are styled using part selectors. +- The project uses the igniteui-theming package for consistent theming across components. + +## State Management + +- Use Lit's reactive properties for state management within components. +- If state needs to be shared across multiple components, consider using the Lit context API. + +## UI Components + +- Use `igniteui-webcomponents`. diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/CLAUDE.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/CLAUDE.md new file mode 100644 index 000000000..3397e20e2 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/CLAUDE.md @@ -0,0 +1,3 @@ +Strictly follow the rules in ../AGENTS.md + +The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory. \ No newline at end of file diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md new file mode 100644 index 000000000..133f46cd5 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md @@ -0,0 +1,358 @@ +--- +name: igniteui-wc-choose-components +description: Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references +user-invocable: true +--- + +# Choose the Right Ignite UI Components + +This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references. + +## Example Usage + +- "What component should I use to display a list of items with actions?" +- "I need a date picker for a booking form" +- "How do I show file upload progress?" +- "What's the best component for a navigation sidebar?" +- "I need a searchable dropdown with multi-select" +- "Build a dashboard layout with cards and a data grid" +- "I want to display hierarchical/tree data" +- "Show me components for notifications and alerts" + +## Related Skills + +- [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) — Set up chosen components in React, Angular, Vue, or vanilla JS +- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) — Style and theme the components you select +- [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) — Import only the components you actually use + +## When to Use + +- Agent or user needs to decide which component fits a UI requirement +- User describes a UI pattern and needs a matching component name +- User wants to explore what components are available +- User needs links to official docs or live examples for a specific component +- Starting a new feature and mapping requirements to components +- Reworking existing UI with new or different component requirements + +--- + +## Available Packages + +Ignite UI for Web Components is distributed across several packages depending on your needs: + +| Package | License | Install | Best For | +|---|---|---|---| +| [`igniteui-webcomponents`](https://www.npmjs.com/package/igniteui-webcomponents) | MIT | `npm install igniteui-webcomponents` | General UI components (inputs, layouts, notifications, scheduling) | +| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities | +| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data | +| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) | + +--- + +## Component Catalogue by UI Pattern + +Use the table below to map a UI need to the right component, then follow the documentation link. + +### Inputs & Forms + +All inputs are form-associated and integrate natively with `<form>`. + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Text field / text input | Input | `<igc-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) | +| Multi-line text | Textarea | `<igc-textarea>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/text-area) | +| Checkbox | Checkbox | `<igc-checkbox>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox) | +| On/off toggle | Switch | `<igc-switch>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch) | +| Single choice from a list | Radio / Radio Group | `<igc-radio>` / `<igc-radio-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio) | +| Star / score rating | Rating | `<igc-rating>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating) | +| Formatted / masked text input | Mask Input | `<igc-mask-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) | +| Date and time input | Date Time Input | `<igc-date-time-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input) | +| File upload | File Input | `<igc-file-input>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input) | +| Simple dropdown / select | Select | `<igc-select>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select) | +| Searchable dropdown, single or multi-select | Combo | `<igc-combo>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/combo/overview) | +| Grouped toggle buttons | Button Group | `<igc-button-group>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button-group) | +| Range / numeric slider | Slider | `<igc-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) | +| Range slider (two handles) | Range Slider | `<igc-range-slider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider) | + +### Buttons & Actions + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Standard clickable button | Button | `<igc-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) | +| Icon-only button | Icon Button | `<igc-icon-button>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button) | +| Click ripple effect | Ripple | `<igc-ripple>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple) | +| Removable tag / filter chip | Chip | `<igc-chip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip) | + +### Scheduling & Date Pickers + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Full calendar view | Calendar | `<igc-calendar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar) | +| Date picker (popup calendar) | Date Picker | `<igc-datepicker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker) | +| Date range selection | Date Range Picker | `<igc-date-range-picker>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) | + +### Notifications & Feedback + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Brief auto-dismiss notification | Toast | `<igc-toast>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast) | +| Actionable dismissible notification bar | Snackbar | `<igc-snackbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar) | +| Persistent status banner (e.g. warning, error) | Banner | `<igc-banner>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/banner) | +| Modal confirmation or content dialog | Dialog | `<igc-dialog>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog) | +| Tooltip on hover | Tooltip | `<igc-tooltip>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip) | +| Small count / status indicator | Badge | `<igc-badge>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) | + +### Progress Indicators + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Horizontal progress bar | Linear Progress | `<igc-linear-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress) | +| Circular / spinner progress | Circular Progress | `<igc-circular-progress>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress) | + +### Layouts & Containers + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Generic content card | Card | `<igc-card>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card) | +| User avatar / profile image | Avatar | `<igc-avatar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) | +| Icon display | Icon | `<igc-icon>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon) | +| Horizontal or vertical divider line | Divider | `<igc-divider>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/divider) | +| Collapsible section | Expansion Panel | `<igc-expansion-panel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel) | +| Multiple collapsible sections (accordion) | Accordion | `<igc-accordion>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion) | +| Tabbed content panels | Tabs | `<igc-tabs>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) | +| Image / content slideshow | Carousel | `<igc-carousel>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/carousel) | +| Multi-step wizard / onboarding flow | Stepper | `<igc-stepper>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper) | +| Resizable, draggable dashboard tiles | Tile Manager | `<igc-tile-manager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) | +| IDE-style docking / floating panels | Dock Manager | `<igc-dockmanager>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager) | + +### Navigation + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Top application bar / toolbar | Navbar | `<igc-navbar>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar) | +| Side navigation drawer | Navigation Drawer | `<igc-nav-drawer>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer) | +| Context menu / actions dropdown | Drop Down | `<igc-dropdown>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dropdown) | + +### Lists & Data Display + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Simple scrollable list | List | `<igc-list>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) | +| Hierarchical / tree data | Tree | `<igc-tree>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree) | +| Tabular data (MIT, lightweight) | Grid Lite | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) | +| Full-featured tabular data grid | Data Grid | `<igc-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) | +| Nested / master-detail grid | Hierarchical Grid | `<igc-hierarchical-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/hierarchical-grid/overview) | +| Parent-child relational tree grid | Tree Grid | `<igc-tree-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview) | +| Cross-tabulation / BI pivot table | Pivot Grid | `<igc-pivot-grid>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/web-components/components/grids/pivot-grid/overview) | + +### Conversational / AI + +| UI Need | Component | Tag | Docs | +|---|---|---|---| +| Chat / AI assistant message thread | Chat | `<igc-chat>` | [Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) | + +--- + +## Step-by-Step: Choosing Components for a UI + +Follow these steps when an agent or user describes a UI requirement: + +### Step 1 — Identify UI patterns + +Break the described UI into atomic patterns. Examples: +- "A booking form" → date input, text inputs, button, maybe a calendar picker +- "An admin dashboard" → navbar, nav drawer, cards, data grid, charts +- "A notification center" → snackbar or toast, badge, list +- "A settings page" → tabs or accordion, switch, input, select, button + +### Step 2 — Map patterns to components + +Use the **Component Catalogue** tables above to find matching components. When in doubt: + +| If the user needs… | Prefer… | Over… | +|---|---|---| +| Simple static list | `<igc-list>` | Data Grid | +| Basic dropdown | `<igc-select>` | `<igc-combo>` | +| Searchable or multi-select dropdown | `<igc-combo>` | `<igc-select>` | +| Tabular data with basic display and functionality | Grid Lite | Data Grid (commercial) | +| Tabular data, advanced features needed | Data Grid | Grid Lite | +| Single dismissible message | Toast | Snackbar | +| Message requiring user action | Snackbar | Toast | +| Collapsible single section | Expansion Panel | Accordion | +| Multiple collapsible sections | Accordion | Expansion Panel | +| Stepped wizard UI | Stepper | Tabs | +| Content tabs / view switching | Tabs | Stepper | + +### Step 3 — Check the package + +Confirm which package provides the component: + +- **MIT components** (inputs, layout, notifications, scheduling, chat) → `igniteui-webcomponents` +- **Advanced grids** (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) → `igniteui-webcomponents-grids` *(commercial)* +- **Lightweight grid** (Grid Lite) → `igniteui-grid-lite` *(MIT)* +- **Docking layout** → `igniteui-dockmanager` *(commercial)* + +### Step 4 — Link to official resources + +Always direct the user to the official documentation linked in the tables above. Key entry points: + +- **Component overview**: [Ignite UI Web Components Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) +- **Live Storybook demos**: [https://igniteui.github.io/igniteui-webcomponents](https://igniteui.github.io/igniteui-webcomponents) +- **npm package**: [https://www.npmjs.com/package/igniteui-webcomponents](https://www.npmjs.com/package/igniteui-webcomponents) +- **GitHub repository**: [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents) +- **Changelog / releases**: [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md) + +### Step 5 — Provide a starter code snippet + +Once components are identified, give the user a minimal working snippet. Example for an admin dashboard shell: + +```typescript +import { + defineComponents, + IgcNavbarComponent, + IgcNavDrawerComponent, + IgcCardComponent, + IgcIconComponent, + IgcButtonComponent, + registerIconFromText, +} from 'igniteui-webcomponents'; + +defineComponents( + IgcNavbarComponent, + IgcNavDrawerComponent, + IgcCardComponent, + IgcIconComponent, + IgcButtonComponent +); + +registerIconFromText('menu', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>', 'material'); +registerIconFromText('home', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>', 'material'); +registerIconFromText('build', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>', 'material'); +``` + +```html +<igc-navbar> + <igc-icon name="menu" collection="material" slot="start"></igc-icon> + <h1>My Dashboard</h1> +</igc-navbar> + +<igc-nav-drawer> + <igc-nav-drawer-item> + <igc-icon name="home" collection="material" slot="icon"></igc-icon> + <span slot="content">Home</span> + </igc-nav-drawer-item> + <igc-nav-drawer-item> + <igc-icon name="build" collection="material" slot="icon"></igc-icon> + <span slot="content">Settings</span> + </igc-nav-drawer-item> +</igc-nav-drawer> + +<igc-card> + <igc-card-header> + <h3 slot="title">Summary</h3> + </igc-card-header> + <igc-card-content>Dashboard content here</igc-card-content> +</igc-card> +``` + +--- + +## Common UI Scenarios → Recommended Component Sets + +### Login / Authentication Form +- `<igc-input>` — email and password fields +- `<igc-checkbox>` — "Remember me" +- `<igc-button>` — submit +- `<igc-snackbar>` — error/success feedback +- **Docs**: [Input](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input) · [Button](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button) · [Snackbar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar) + +### User Profile / Settings Page +- `<igc-avatar>` — profile picture +- `<igc-tabs>` — section navigation (Profile, Security, Notifications) +- `<igc-input>` / `<igc-textarea>` — editable fields +- `<igc-switch>` — feature toggles +- `<igc-select>` — preference dropdowns +- `<igc-button>` — save/cancel actions +- **Docs**: [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) · [Tabs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs) · [Switch](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch) + +### Data Table / Admin List View +- `<igc-input>` — search bar +- `<igc-combo>` — filter dropdowns +- `<igc-grid>` (Grid Lite) or Data Grid — tabular data +- `<igc-button>` / `<igc-icon-button>` — actions +- `<igc-dialog>` — confirm delete modal +- `<igc-badge>` — status indicators +- **Docs**: [Grid Lite](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview) · [Data Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview) · [Dialog](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog) + +### Booking / Reservation Form +- `<igc-date-range-picker>` — check-in / check-out +- `<igc-input>` — guest details +- `<igc-select>` — room type +- `<igc-stepper>` — multi-step booking flow +- `<igc-button>` — next / confirm +- `<igc-toast>` — booking confirmation +- **Docs**: [Date Range Picker](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-picker) · [Stepper](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper) + +### Analytics / Reporting Dashboard +- `<igc-navbar>` — top bar +- `<igc-nav-drawer>` — side navigation +- `<igc-card>` — KPI summary cards +- `<igc-tabs>` or `<igc-tile-manager>` — section layout +- Data Grid or Pivot Grid — detailed data tables +- `<igc-linear-progress>` / `<igc-circular-progress>` — loading states +- **Docs**: [Tile Manager](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager) · [Pivot Grid](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview) + +### Notification / Activity Feed +- `<igc-list>` — activity items +- `<igc-avatar>` — user avatars in each item +- `<igc-badge>` — unread count +- `<igc-snackbar>` — real-time alerts +- `<igc-chip>` — filter tags (All, Mentions, Replies) +- **Docs**: [List](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list) · [Badge](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge) · [Chip](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip) + +### AI / Chatbot Interface +- `<igc-chat>` — full chat UI with message threading +- `<igc-input>` or `<igc-textarea>` — message input +- `<igc-icon-button>` — send button +- `<igc-avatar>` — bot and user avatars +- `<igc-circular-progress>` — "thinking" indicator +- **Docs**: [Chat](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat) · [Avatar](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar) + +--- + +## Common Issues & Solutions + +### "I can't find a component for X" + +1. Check the [full component list](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) in the official docs +2. Consider composing two simpler components (e.g., `<igc-card>` + `<igc-list>` for a list card) + +### "Which grid should I use?" + +| Scenario | Component | Package | License | +|---|---|---|---| +| Simple table with basic features | Grid Lite | `igniteui-grid-lite` | MIT | +| Advanced/excel-style filtering, paging, editing | Data Grid | `igniteui-webcomponents-grids` | Commercial | +| Master-detail / nested rows | Hierarchical Grid | `igniteui-webcomponents-grids` | Commercial | +| Parent-child with shared columns | Tree Grid | `igniteui-webcomponents-grids` | Commercial | +| Cross-tabulation / OLAP analysis | Pivot Grid | `igniteui-webcomponents-grids` | Commercial | + +### "I need React support" + +Use the [`igniteui-react`](https://www.npmjs.com/package/igniteui-react) package. Components are wrapped with React-friendly event bindings and props. See the [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) skill for setup. + +### "How do I get commercial components?" + +Visit [https://www.infragistics.com/products/ignite-ui-web-components](https://www.infragistics.com/products/ignite-ui-web-components) or contact [Infragistics sales](https://www.infragistics.com/about-us/contact-us) for licensing information. + +--- + +## Additional Resources + +| Resource | Link | +|---|---| +| Getting started guide | [https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started) | +| GitHub repository | [https://github.com/IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents) | +| Changelog | [https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md) | +| Discord community | [https://discord.gg/39MjrTRqds](https://discord.gg/39MjrTRqds) | +| Infragistics contact | [https://www.infragistics.com/about-us/contact-us](https://www.infragistics.com/about-us/contact-us) | diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-customize-component-theme/SKILL.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-customize-component-theme/SKILL.md new file mode 100644 index 000000000..d04c6e0b0 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-customize-component-theme/SKILL.md @@ -0,0 +1,615 @@ +--- +name: igniteui-wc-customize-component-theme +description: Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming +user-invocable: true +--- + +# Ignite UI Web Components — Theming Skill + +## Description + +This skill teaches AI agents how to theme Ignite UI Web Components (and React via `igniteui-react`) applications. Two approaches are supported: + +- **CSS custom properties** — works in any project without additional build tooling +- **Sass** — available when the project has Sass configured; provides the full palette/typography/elevation API + +The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation. + +## Prerequisites + +- A project with `igniteui-webcomponents` (or `igniteui-react`) installed +- The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider +- **Optional**: Sass configured in the project (enables the Sass-based theming API) + +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any theming tools, you MUST verify the MCP server is available +> by calling `detect_platform`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the theming related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Theming MCP Server + +The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available. + +### VS Code + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases. + +### Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Claude Desktop + +Edit the Claude Desktop config file: +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### WebStorm / JetBrains IDEs + +1. Go to **Settings → Tools → AI Assistant → MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp` +4. Click OK and restart the AI Assistant + +### Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "Detect which Ignite UI platform my project uses" + +If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `webcomponents`). + +## Theming Architecture + +The Ignite UI theming system is built on four pillars: + +| Concept | Purpose | +|---|---| +| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 | +| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) | +| **Elevations** | Box-shadow levels 0–24 for visual depth | +| **Schema** | Per-component recipes mapping palette colors to component tokens | + +### Design Systems + +Four built-in design systems are available: + +- **Material** (default) — Material Design 3 +- **Bootstrap** — Bootstrap-inspired +- **Fluent** — Microsoft Fluent Design +- **Indigo** — Infragistics Indigo Design + +Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`). + +## Pre-built Themes + +The quickest way to theme an app is to import a pre-built CSS file in your entry point: + +```typescript +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +Available pre-built CSS files: + +| Import path | Theme | +|---|---| +| `igniteui-webcomponents/themes/light/bootstrap.css` | Bootstrap Light | +| `igniteui-webcomponents/themes/dark/bootstrap.css` | Bootstrap Dark | +| `igniteui-webcomponents/themes/light/material.css` | Material Light | +| `igniteui-webcomponents/themes/dark/material.css` | Material Dark | +| `igniteui-webcomponents/themes/light/fluent.css` | Fluent Light | +| `igniteui-webcomponents/themes/dark/fluent.css` | Fluent Dark | +| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light | +| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark | + +## Custom Theme via CSS Custom Properties + +> No Sass required. Works in any project after importing a pre-built theme. + +After importing a pre-built theme, override individual design tokens with CSS custom properties on `:root` or a scoped selector: + +```css +:root { + /* Override palette hue/saturation/lightness channels */ + --ig-primary-h: 211deg; + --ig-primary-s: 100%; + --ig-primary-l: 50%; + + --ig-secondary-h: 33deg; + --ig-secondary-s: 100%; + --ig-secondary-l: 50%; +} +``` + +To scope overrides to a specific container: + +```css +.admin-panel { + --ig-primary-h: 260deg; + --ig-primary-s: 60%; + --ig-primary-l: 45%; +} +``` + +For dark mode, either import a dark theme CSS file directly or toggle overrides with a class or media query: + +```css +@media (prefers-color-scheme: dark) { + :root { + --ig-surface-h: 0deg; + --ig-surface-s: 0%; + --ig-surface-l: 7%; + } +} + +/* Or manually with a class */ +.dark-theme { + --ig-surface-h: 0deg; + --ig-surface-s: 0%; + --ig-surface-l: 7%; +} +``` + +## Custom Theme via Sass + +> Requires Sass configured in the project. First check whether the project has a Sass setup (e.g., a `styles.scss` entry file, `sass` in `devDependencies`, or a Vite/webpack Sass plugin). + +The Sass API for `igniteui-webcomponents` uses `@use 'igniteui-theming'` with individual mixins — **not** the Angular-specific `core()` / `theme()` combined mixins. + +```scss +@use 'igniteui-theming' as *; + +// 1. Define a palette +$my-palette: palette( + $primary: #1976D2, + $secondary: #FF9800, + $surface: #FAFAFA +); + +// 2. Apply the palette +@include palette($my-palette); + +// 3. Optional: Typography +@include typography($font-family: "'Roboto', sans-serif"); + +// 4. Optional: Elevations +@include elevations(); + +// 5. Optional: Spacing +@include spacing(); +``` + +For dark themes, use a dark surface color and a dark schema: + +```scss +@use 'igniteui-theming' as *; + +$dark-palette: palette( + $primary: #90CAF9, + $secondary: #FFB74D, + $surface: #121212 +); + +@include palette($dark-palette, $schema: $dark-material-schema); +``` + +To scope a Sass theme to a container: + +```scss +.admin-panel { + @include palette($admin-palette, $schema: $light-indigo-schema); +} +``` + +## Component-Level Theming + +Override individual component appearance using component theme functions and the `tokens` mixin. + +> **AGENT INSTRUCTION — No Hardcoded Colors (CRITICAL)** +> +> Once a palette has been generated (via `palette()` in Sass or `create_palette` / `create_theme` via MCP), +> **every color reference MUST come from the generated palette tokens** — never hardcode hex/RGB/HSL values. +> +> Use `var(--ig-primary-500)`, `var(--ig-secondary-300)`, `var(--ig-surface-500)`, etc. in CSS, +> or the `get_color` MCP tool to obtain the correct token reference. +> +> **WRONG** (hardcoded hex — breaks theme switching, ignores the palette): +> ```css +> igc-avatar { +> --ig-avatar-background: #E91E63; /* ✗ hardcoded */ +> --ig-avatar-color: #FFFFFF; /* ✗ hardcoded */ +> } +> ``` +> +> **RIGHT — CSS** (palette token — stays in sync with the theme): +> ```css +> igc-avatar { +> --ig-avatar-background: var(--ig-primary-500); +> --ig-avatar-color: var(--ig-primary-500-contrast); +> } +> ``` +> +> **RIGHT — Sass** (when Sass is configured): +> ```scss +> $custom-avatar: avatar-theme( +> $schema: $light-material-schema, +> $background: var(--ig-primary-500), +> $color: var(--ig-primary-500-contrast) +> ); +> ``` +> +> This applies to **all** style code: component themes, custom CSS rules, and inline styles. +> The only place raw hex values belong is the **initial `palette()` call** that seeds the color system. +> Everything downstream must reference the palette. + +```css +igc-avatar { + --ig-avatar-background: var(--ig-primary-500); + --ig-avatar-color: var(--ig-primary-500-contrast); +} +``` + +When Sass is available, use the component theme function and `tokens` mixin: + +```scss +@use 'igniteui-theming' as *; + +$custom-avatar: avatar-theme( + $schema: $light-material-schema, + $background: var(--ig-primary-500), + $color: var(--ig-primary-500-contrast) +); + +igc-avatar { + @include tokens($custom-avatar); +} +``` + +### Discovering Available Tokens + +Each component has its own set of design tokens (themeable CSS custom properties). Before theming a component, you must know which tokens exist. Use the **MCP tool** `get_component_design_tokens` to discover them. + +### Compound Components + +Some components (e.g., `combo`, `grid`, `date-picker`, `select`) are **compound** — they contain internal child components, each requiring their own theme. For example, `date-picker` uses `calendar`, `flat-button`, and `input-group` internally. + +Workflow for compound components: +1. Call `get_component_design_tokens` for the parent (e.g., `date-picker`) +2. The response lists related themes and scope selectors +3. Call `create_component_theme` for each child, using the parent's selector as the wrapper + +## Layout Controls + +### Sizing + +Controls the size of components via `--ig-size` (values: 1 = small, 2 = medium, 3 = large): + +```css +/* Global */ +:root { --ig-size: 2; } + +/* Component-scoped */ +igc-grid { --ig-size: 1; } +``` + +### Spacing + +Controls internal padding via `--ig-spacing` (1 = default, 0.5 = compact, 2 = spacious): + +```css +:root { --ig-spacing: 1; } +.compact-section { --ig-spacing: 0.75; } +``` + +### Roundness + +Controls border-radius via `--ig-radius-factor` (0 = square, 1 = maximum radius): + +```css +:root { --ig-radius-factor: 1; } +igc-avatar { --ig-radius-factor: 0.5; } +``` + +## Using the Theming MCP Server + +The Ignite UI Theming MCP server provides tools for AI-assisted theme code generation. + +> **IMPORTANT — File Safety Rule**: When generating or updating theme code, **never overwrite existing style files directly**. Instead, always **propose the changes as an update** and let the user review and approve before writing to disk. If a `styles.scss` (or any target file) already exists, show the generated code as a diff or suggestion rather than replacing the file contents. This prevents accidental loss of custom styles the user has already written. + +Always follow this workflow: + +### Step 1 — Detect Platform + +``` +Tool: detect_platform +``` +This auto-detects `webcomponents` from `package.json` and sets the correct import paths. + +### Step 2 — Generate a Full Theme + +``` +Tool: create_theme +Params: { + platform: "webcomponents", + designSystem: "material", + primaryColor: "#1976D2", + secondaryColor: "#FF9800", + surfaceColor: "#FAFAFA", + variant: "light", + fontFamily: "'Roboto', sans-serif", + includeTypography: true, + includeElevations: true +} +``` + +Generates a complete Sass file with palette, typography, elevations, and the `theme()` mixin call. + +### Step 3 — Customize Individual Components + +``` +Tool: get_component_design_tokens +Params: { component: "grid" } +``` + +Then use **palette token references** (not hardcoded hex values) for every color: + +``` +Tool: create_component_theme +Params: { + platform: "webcomponents", + designSystem: "material", + variant: "light", + component: "grid", + tokens: { + "header-background": "var(--ig-primary-50)", + "header-text-color": "var(--ig-primary-800)" + } +} +``` + +> **Reminder**: After a palette is generated, all token values passed to +> `create_component_theme` must reference palette CSS custom properties +> (e.g., `var(--ig-primary-500)`, `var(--ig-secondary-A200)`, +> `var(--ig-gray-100)`). Never pass raw hex values like `"#E3F2FD"`. + +### Step 4 — Generate a Palette + +For simple mid-luminance base colors: + +``` +Tool: create_palette +Params: { + platform: "webcomponents", + primary: "#1976D2", + secondary: "#FF9800", + surface: "#FAFAFA", + variant: "light" +} +``` + +For brand-specific exact shade values, use `create_custom_palette` with `mode: "explicit"` for full control over each shade. + +### Step 5 — Adjust Layout + +By default, layout tools emit **CSS**. If the project has Sass configured, add `output: "sass"` to get Sass output: + +``` +Tool: set_size → { size: "medium" } # CSS (default) +Tool: set_size → { size: "medium", output: "sass" } # Sass +Tool: set_spacing → { spacing: 0.75, component: "grid" } # CSS (default) +Tool: set_spacing → { spacing: 0.75, component: "grid", output: "sass" } # Sass +Tool: set_roundness → { radiusFactor: 0.8 } # CSS (default) +Tool: set_roundness → { radiusFactor: 0.8, output: "sass" } # Sass +``` + +### Step 6 — Reference Palette Colors (MANDATORY for All Color Usage) + +After a palette is generated, **always** use the `get_color` tool to obtain the correct CSS custom property reference. Never hardcode hex/RGB/HSL values in component themes, custom CSS, or Sass variables. + +``` +Tool: get_color +Params: { color: "primary", variant: "600" } +→ var(--ig-primary-600) + +Params: { color: "primary", variant: "600", contrast: true } +→ var(--ig-primary-600-contrast) + +Params: { color: "primary", opacity: 0.5 } +→ hsl(from var(--ig-primary-500) h s l / 0.5) +``` + +Use these token references everywhere: +- Component theme `tokens` values +- Custom CSS rules (`color`, `background`, `border-color`, `fill`, `stroke`, etc.) + +The **only** place raw hex values are acceptable is in the initial `palette()` call or the `create_palette` / `create_theme` MCP tool inputs that seed the color system. + +### Loading Reference Data + +Use `read_resource` with these URIs for preset values and documentation: + +| URI | Content | +|---|---| +| `theming://presets/palettes` | Preset palette colors | +| `theming://presets/typography` | Typography presets | +| `theming://presets/elevations` | Elevation shadow presets | +| `theming://guidance/colors/usage` | Which shades for which purpose | +| `theming://guidance/colors/roles` | Semantic color roles | +| `theming://guidance/colors/rules` | Light/dark theme rules | +| `theming://platforms/webcomponents` | Web Components platform specifics | +| `theming://platforms` | All supported platforms | + +## Referencing Colors in Custom Styles + +After a theme is applied, the palette is available as CSS custom properties on `:root`. Use these tokens in all custom CSS — never introduce standalone hex/RGB variables for colors that the palette already provides. + +### Correct: Palette Tokens + +```css +/* All colors come from the theme — respects palette changes and dark/light switching */ +.sidebar { + background: var(--ig-surface-500); + color: var(--ig-gray-900); + border-right: 1px solid var(--ig-gray-200); +} + +.accent-badge { + background: var(--ig-secondary-500); + color: var(--ig-secondary-500-contrast); +} + +.hero-section { + /* Semi-transparent primary overlay */ + background: hsl(from var(--ig-primary-500) h s l / 0.12); +} +``` + +### Incorrect: Hardcoded Values + +```css +/* WRONG — these break when the palette changes and ignore dark/light mode */ +.sidebar { + background: #F0F5FA; /* ✗ not a palette token */ + color: #333; /* ✗ not a palette token */ +} +``` + +### When Raw Hex Values Are OK + +Raw hex values are acceptable **only** in these contexts: + +1. **`palette()` call** — the initial seed colors that generate the full palette +2. **`create_palette` / `create_theme` MCP tool inputs** — the base colors passed to the tool +3. **Non-palette decorative values** — e.g., a one-off SVG illustration color that intentionally stays fixed regardless of theme + +Everything else must use `var(--ig-<family>-<shade>)` tokens. + +## Common Patterns + +### Switching Between Light and Dark Themes — CSS approach + +Import the appropriate theme CSS and toggle with a class or media query: + +```typescript +// In your entry point — choose one variant as the default +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +```css +/* Override surface tokens for dark mode */ +.dark-theme { + --ig-surface-h: 0deg; + --ig-surface-s: 0%; + --ig-surface-l: 7%; +} + +@media (prefers-color-scheme: dark) { + :root { + --ig-surface-h: 0deg; + --ig-surface-s: 0%; + --ig-surface-l: 7%; + } +} +``` + +Or dynamically swap the stylesheet at runtime: + +```typescript +function setTheme(variant: 'light' | 'dark', design = 'bootstrap') { + const link = document.getElementById('igc-theme') as HTMLLinkElement; + link.href = `node_modules/igniteui-webcomponents/themes/${variant}/${design}.css`; +} +``` + +### Switching Between Light and Dark Themes — Sass approach + +When Sass is configured, define both palettes and apply them under separate selectors: + +```scss +@use 'igniteui-theming' as *; + +$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA); +$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212); + +@include typography($font-family: "'Roboto', sans-serif"); +@include elevations(); + +// Light is default +@include palette($light-palette, $schema: $light-material-schema); + +// Dark via class on <body> or <html> +.dark-theme { + @include palette($dark-palette, $schema: $dark-material-schema); +} +``` + +### Scoping a Theme to a Container — CSS approach + +```css +.admin-panel { + --ig-primary-h: 260deg; + --ig-primary-s: 60%; + --ig-primary-l: 45%; +} +``` + +### Scoping a Theme to a Container — Sass approach + +```scss +.admin-panel { + @include palette($admin-palette, $schema: $light-indigo-schema); +} +``` + +## Key Rules + +1. **Never overwrite existing files directly** — always propose theme code as an update for user review; do not replace existing style files without confirmation +2. **Always call `detect_platform` first** when using MCP tools +3. **Always call `get_component_design_tokens` before `create_component_theme`** to discover valid token names +4. **Palette shades 50 = lightest, 900 = darkest** for all chromatic colors — never invert for dark themes (only gray inverts) +5. **Surface color must match the variant** — light color for `light`, dark color for `dark` +6. **Sass only**: Use `@include palette()`, `@include typography()`, and `@include elevations()` individually — `@use 'igniteui-theming'` is the correct module for web components and React (not `igniteui-angular/theming`); the Angular-specific `core()` / `theme()` combined mixins do **not** apply here +7. **Sass only**: Component themes use `@include tokens($theme)` inside a selector to emit CSS custom properties +8. **For compound components**, follow the full checklist returned by `get_component_design_tokens` — theme each child component with its scoped selector +9. **Never hardcode colors after palette generation** — once a palette is created, every color in component themes, custom CSS, and Sass variables must use `var(--ig-<family>-<shade>)` palette tokens (e.g., `var(--ig-primary-500)`, `var(--ig-gray-200)`). Raw hex/RGB/HSL values are only acceptable in the initial `palette()` seed call. This ensures themes remain consistent, switchable (light/dark), and maintainable diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/SKILL.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/SKILL.md new file mode 100644 index 000000000..cbd9d23b8 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/SKILL.md @@ -0,0 +1,112 @@ +--- +name: igniteui-wc-integrate-with-framework +description: Integrate igniteui-webcomponents into React, Angular, Vue, or vanilla JS applications with framework-specific configurations +user-invocable: true +--- + +# Integrate with Framework + +This skill helps users integrate Ignite UI Web Components into their application. It detects the framework or platform in use and loads the appropriate step-by-step integration reference. + +## Example Usage + +- "How do I use igniteui-webcomponents in my React app?" +- "Integrate the button component in Angular" +- "Set up igniteui-webcomponents in Vue 3" +- "Help me add web components to my vanilla JS project" + +## Related Skills + +- [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) - Reduce bundle size after integration +- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Style components after setup + +## When to Use + +- User wants to add igniteui-webcomponents to a framework project +- User is experiencing framework-specific integration issues +- User needs help with component imports and registration +- User asks about React, Angular, Vue, or vanilla JS setup + +--- + +## Framework Detection + +Before loading a reference, identify the target framework from the project context. Check the following signals in order: + +### 1. Detect React + +**Evidence to look for:** +- `package.json` contains `"react"` or `"react-dom"` in `dependencies` or `devDependencies` +- Files with `.tsx` or `.jsx` extensions exist in `src/` +- Entry point imports `ReactDOM` or `createRoot` +- `vite.config.ts` uses `@vitejs/plugin-react` or `@vitejs/plugin-react-swc` + +→ **Load:** [react.md](./references/react.md) + +--- + +### 2. Detect Angular + +**Evidence to look for:** +- `package.json` contains `"@angular/core"` in `dependencies` +- `angular.json` file exists in the workspace root +- Files with `.component.ts`, `.module.ts`, or `.component.html` patterns exist +- Entry point calls `bootstrapApplication` or `platformBrowserDynamic` + +→ **Load:** [angular.md](./references/angular.md) + +--- + +### 3. Detect Vue 3 + +**Evidence to look for:** +- `package.json` contains `"vue"` in `dependencies` or `devDependencies` +- Files with `.vue` extensions exist in `src/` +- `vite.config.ts` uses `@vitejs/plugin-vue` +- Entry point calls `createApp` + +→ **Load:** [vue.md](./references/vue.md) + +--- + +### 4. Vanilla JavaScript / HTML (fallback) + +**Evidence to look for:** +- No major framework found in `package.json` +- Plain `.html` files reference a `<script type="module">` +- Entry point is a plain `.js` or `.ts` file with no framework imports +- User explicitly asks for vanilla JS or HTML integration + +→ **Load:** [vanilla-js.md](./references/vanilla-js.md) + +--- + +## If the Framework Cannot Be Determined + +Ask the user directly: + +> "What framework or platform are you using? (React, Angular, Vue 3, or Vanilla JS / HTML)" + +Then load the matching reference from the options above. + +--- + +## Framework Reference Files + +| Framework / Platform | Reference | +|----------------------|-----------| +| React | [react.md](./references/react.md) | +| Angular | [angular.md](./references/angular.md) | +| Vue 3 | [vue.md](./references/vue.md) | +| Vanilla JS / HTML | [vanilla-js.md](./references/vanilla-js.md) | + +Each reference covers: + +- Installation +- Theme import (required for styling) +- Component registration +- Usage examples +- TypeScript support +- Platform-specific considerations +- Common issues and solutions + diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/angular.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/angular.md new file mode 100644 index 000000000..13f6d7593 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/angular.md @@ -0,0 +1,185 @@ +# Integrating Ignite UI Web Components — Angular + +## Installation + +```bash +npm install igniteui-webcomponents +``` + +## Setup + +### Step 1 — Register the theme and components + +In `src/main.ts`, import a theme and register the components before bootstrapping: + +```typescript +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent, IgcInputComponent); + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); +``` + +### Step 2 — Add `CUSTOM_ELEMENTS_SCHEMA` + +Angular requires `CUSTOM_ELEMENTS_SCHEMA` to accept custom element tags in templates. + +**Standalone components** — add the schema to each component that uses Ignite UI elements: + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@Component({ + selector: 'app-my-component', + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + template: ` + <igc-button variant="contained">Click me</igc-button> + ` +}) +export class MyComponent {} +``` + +**NgModule-based apps** — add the schema once to `AppModule` (or the relevant module): + +```typescript +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + bootstrap: [AppComponent] +}) +export class AppModule {} +``` + +## Available Themes + +| Theme | Light | Dark | +|-----------|--------------------------------------------------------|-------------------------------------------------------| +| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css` | `igniteui-webcomponents/themes/dark/bootstrap.css` | +| Material | `igniteui-webcomponents/themes/light/material.css` | `igniteui-webcomponents/themes/dark/material.css` | +| Fluent | `igniteui-webcomponents/themes/light/fluent.css` | `igniteui-webcomponents/themes/dark/fluent.css` | +| Indigo | `igniteui-webcomponents/themes/light/indigo.css` | `igniteui-webcomponents/themes/dark/indigo.css` | + +## Usage in Templates + +```typescript +import { Component, ViewChild, ElementRef, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@Component({ + selector: 'app-my-component', + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + template: ` + <igc-button + #myButton + variant="contained" + (click)="handleClick($event)"> + Click me + </igc-button> + + <igc-input + [label]="inputLabel" + [placeholder]="'Enter your name'" + [required]="true" + (igcChange)="handleChange($event)"> + </igc-input> + ` +}) +export class MyComponent implements AfterViewInit { + @ViewChild('myButton') buttonRef!: ElementRef; + + inputLabel = 'Name'; + + ngAfterViewInit() { + // Access the native element directly if needed + const button = this.buttonRef.nativeElement; + } + + handleClick(event: PointerEvent) { + console.log('Button clicked'); + } + + handleChange(event: CustomEvent) { + console.log('Input changed', event.detail); + } +} +``` + +## Working with Complex Properties + +Use Angular property binding `[property]` to pass objects and arrays: + +```typescript +@Component({ + selector: 'app-my-component', + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + template: ` + <igc-combo [data]="items"></igc-combo> + ` +}) +export class MyComponent { + items = [ + { value: 1, label: 'Item 1' }, + { value: 2, label: 'Item 2' }, + ]; +} +``` + +## Key Considerations + +| Concern | Details | +|---------|---------| +| **CUSTOM_ELEMENTS_SCHEMA** | Required in every module or standalone component that uses `igc-*` tags | +| **Event binding** | Use Angular syntax: `(igcChange)="handler($event)"` | +| **Property binding** | Use `[property]="value"` for reactive data and complex types | +| **Form integration** | Web components work with Angular Forms via `ngModel` or reactive form controls | + +## TypeScript Support + +The `igniteui-webcomponents` package automatically registers all component types in `HTMLElementTagNameMap`. DOM queries are fully typed: + +```typescript +import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent); + +// Automatically typed as IgcButtonComponent | null +const button = document.querySelector('igc-button'); +``` + +## Common Issues + +### Angular template error: "Unknown element" + +Add `CUSTOM_ELEMENTS_SCHEMA` to the component's `schemas` array (standalone) or to the module (NgModule). + +### Events not firing + +Use Angular's event binding syntax `(igcChange)="handler($event)"` — not `(change)`. Ignite UI components emit prefixed custom events (e.g., `igcInput`, `igcChange`). + +### No styles applied + +Ensure you import a theme CSS file in `main.ts` before bootstrapping. + +### Properties not updating + +Use `[property]="value"` binding for complex or reactive data. Attribute strings (e.g. `label="Name"`) work for primitive values only. + +--- + +## Next Steps + +- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/) — import only the components you use +- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors +- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/react.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/react.md new file mode 100644 index 000000000..db42c91a8 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/react.md @@ -0,0 +1,116 @@ +# Integrating Ignite UI Web Components — React + +React integration uses the **`igniteui-react`** package, which provides React-native wrappers around Ignite UI Web Components: + +- ✅ Native React event handling +- ✅ Full TypeScript types and IntelliSense for all props +- ✅ Automatic global type declarations (`HTMLElementTagNameMap`) +- ✅ camelCase props instead of kebab-case attributes +- ✅ Seamless complex data binding (objects and arrays work as props) +- ✅ React DevTools integration + +Components use the `Igr` prefix (e.g. `IgrButton`, `IgrInput`, `IgrCombo`). + +### Installation + +```bash +npm install igniteui-react +``` + +### Setup + +Import a theme in your application entry point (`src/main.tsx` or `src/index.tsx`): + +```typescript +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +### Available Themes + +| Theme | Light | Dark | +|-----------|--------------------------------------------------------|-------------------------------------------------------| +| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css` | `igniteui-webcomponents/themes/dark/bootstrap.css` | +| Material | `igniteui-webcomponents/themes/light/material.css` | `igniteui-webcomponents/themes/dark/material.css` | +| Fluent | `igniteui-webcomponents/themes/light/fluent.css` | `igniteui-webcomponents/themes/dark/fluent.css` | +| Indigo | `igniteui-webcomponents/themes/light/indigo.css` | `igniteui-webcomponents/themes/dark/indigo.css` | + +### Usage + +```tsx +import { IgrButton, IgrInput } from 'igniteui-react'; + +function MyComponent() { + // onClick is a standard React mouse event + const handleClick = (e: React.MouseEvent) => console.log('Clicked'); + + // onChange receives the component's change event + const handleChange = (e: CustomEvent) => console.log(`Changed: ${e.detail}`); + + return ( + <div> + <IgrButton variant="contained" onClick={handleClick}> + Click me + </IgrButton> + + <IgrInput + label="Name" + placeholder="Enter your name" + required + onChange={handleChange} + /> + </div> + ); +} +``` + +### Complex Data + +Objects and arrays bind directly as props with `igniteui-react`: + +```tsx +import { IgrCombo } from 'igniteui-react'; + +function MyComponent() { + const items = [ + { value: 1, label: 'Item 1' }, + { value: 2, label: 'Item 2' }, + ]; + + return <IgrCombo data={items} />; +} +``` + +### TypeScript Support + +The `igniteui-react` package ships with full type definitions. No extra configuration needed: + +```tsx +import { IgrButton } from 'igniteui-react'; + +// TypeScript knows about all IgrButton props +<IgrButton variant="contained">Click</IgrButton> + +// DOM queries are also typed automatically (via igniteui-webcomponents peer) +const button = document.querySelector('igc-button'); // IgcButtonComponent | null +``` + +--- + +## Common Issues + +### Components not rendering + +The `igniteui-react` package registers components automatically on import. Ensure the package is installed and components are imported before the component tree renders. + +### No styles applied + +Ensure you import a theme CSS file in your entry point. Without it, components render unstyled. + +--- + +## Next Steps + +- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/) — import only the components you use +- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors +- [igniteui-react on npm](https://www.npmjs.com/package/igniteui-react) — React wrapper documentation +- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md new file mode 100644 index 000000000..24b53ca7a --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md @@ -0,0 +1,118 @@ +# Integrating Ignite UI Web Components — Vanilla JavaScript / HTML + +## Installation + +```bash +npm install igniteui-webcomponents +``` + +## Setup + +In your main JavaScript/TypeScript entry file, import a theme and register the components you need: + +```typescript +// 1. Import a theme (required for correct styling) +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +// 2. Import and register specific components (recommended) +import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent, IgcInputComponent); +``` + +To register all components at once (increases bundle size): + +```typescript +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); +``` + +## Available Themes + +| Theme | Light | Dark | +|-----------|--------------------------------------------------------|-------------------------------------------------------| +| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css` | `igniteui-webcomponents/themes/dark/bootstrap.css` | +| Material | `igniteui-webcomponents/themes/light/material.css` | `igniteui-webcomponents/themes/dark/material.css` | +| Fluent | `igniteui-webcomponents/themes/light/fluent.css` | `igniteui-webcomponents/themes/dark/fluent.css` | +| Indigo | `igniteui-webcomponents/themes/light/indigo.css` | `igniteui-webcomponents/themes/dark/indigo.css` | + +## Usage in HTML + +```html +<!DOCTYPE html> +<html> +<head> + <script type="module" src="./main.js"></script> +</head> +<body> + <igc-button variant="contained">Click me</igc-button> + <igc-input label="Name" placeholder="Enter your name"></igc-input> +</body> +</html> +``` + +## TypeScript Support + +The `igniteui-webcomponents` package automatically provides global type declarations for all components via `HTMLElementTagNameMap`. DOM queries are fully typed without any extra configuration: + +```typescript +import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent); + +// Automatically typed as IgcButtonComponent | null +const button = document.querySelector('igc-button'); +button?.setAttribute('variant', 'outlined'); +``` + +You can also import component types directly for annotations: + +```typescript +import type { IgcButtonComponent } from 'igniteui-webcomponents'; + +const button = document.querySelector('igc-button') as IgcButtonComponent; +``` + +## Working with Complex Properties + +Attributes only accept strings. For objects and arrays, set properties via JavaScript: + +```typescript +// ❌ Wrong — attributes only accept strings +// <igc-combo data="[{...}]"></igc-combo> + +// ✅ Correct — set via DOM property +const combo = document.querySelector('igc-combo'); +combo.data = [ + { value: 1, label: 'Item 1' }, + { value: 2, label: 'Item 2' } +]; +``` + +## Common Issues + +### Components not rendering + +Register components **before** they appear in the DOM: + +```typescript +// ❌ Wrong +document.body.innerHTML = '<igc-button>Click</igc-button>'; +defineComponents(IgcButtonComponent); + +// ✅ Correct +defineComponents(IgcButtonComponent); +document.body.innerHTML = '<igc-button>Click</igc-button>'; +``` + +### No styles applied + +Ensure you import a theme CSS file in your entry point. Without it, components render unstyled. + +## Next Steps + +- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/SKILL.md) — import only the components you use +- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors +- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vue.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vue.md new file mode 100644 index 000000000..0f830cb94 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vue.md @@ -0,0 +1,181 @@ +# Integrating Ignite UI Web Components — Vue 3 + +## Installation + +```bash +npm install igniteui-webcomponents +``` + +## Setup + +### Step 1 — Configure Vue to recognize custom elements + +Vue needs to know which tags are custom elements so it does not warn about unknown components. + +**With Vite** (`vite.config.ts`): + +```typescript +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; + +export default defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + // Treat all igc-* tags as custom elements + isCustomElement: (tag) => tag.startsWith('igc-') + } + } + }) + ] +}); +``` + +**With Vue CLI** (`vue.config.js`): + +```javascript +module.exports = { + chainWebpack: config => { + config.module + .rule('vue') + .use('vue-loader') + .tap(options => ({ + ...options, + compilerOptions: { + isCustomElement: tag => tag.startsWith('igc-') + } + })); + } +}; +``` + +### Step 2 — Register the theme and components + +In `src/main.ts`, import a theme and register the components before mounting: + +```typescript +import { createApp } from 'vue'; +import App from './App.vue'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent, IgcInputComponent); + +createApp(App).mount('#app'); +``` + +## Available Themes + +| Theme | Light | Dark | +|-----------|--------------------------------------------------------|-------------------------------------------------------| +| Bootstrap | `igniteui-webcomponents/themes/light/bootstrap.css` | `igniteui-webcomponents/themes/dark/bootstrap.css` | +| Material | `igniteui-webcomponents/themes/light/material.css` | `igniteui-webcomponents/themes/dark/material.css` | +| Fluent | `igniteui-webcomponents/themes/light/fluent.css` | `igniteui-webcomponents/themes/dark/fluent.css` | +| Indigo | `igniteui-webcomponents/themes/light/indigo.css` | `igniteui-webcomponents/themes/dark/indigo.css` | + +## Usage in Components + +```vue +<template> + <div> + <igc-button variant="contained" @click="handleClick"> + Click me + </igc-button> + + <igc-input + :label="inputLabel" + placeholder="Enter your name" + :required="true" + @igcChange="handleChange"> + </igc-input> + </div> +</template> + +<script setup lang="ts"> +import { ref } from 'vue'; + +const inputLabel = ref('Name'); + +const handleClick = () => { + console.log('Button clicked'); +}; + +const handleChange = (event: CustomEvent) => { + console.log('Input changed', event.detail); +}; +</script> +``` + +## Working with Complex Properties + +Attributes only accept strings. Pass objects and arrays using a template ref: + +```vue +<template> + <igc-combo ref="comboRef"></igc-combo> +</template> + +<script setup lang="ts"> +import { ref, onMounted } from 'vue'; + +const comboRef = ref<HTMLElement | null>(null); + +onMounted(() => { + if (comboRef.value) { + (comboRef.value as any).data = [ + { value: 1, label: 'Item 1' }, + { value: 2, label: 'Item 2' }, + ]; + } +}); +</script> +``` + +## Key Considerations + +| Concern | Details | +|---------|---------| +| **isCustomElement** | Required in Vite/CLI config so Vue doesn't treat `igc-*` tags as unresolved components | +| **Event binding** | Use `@igcInput`, `@igcChange`, etc. — not `@input` or `@change` | +| **Property binding** | Use `:property="value"` or `v-bind:property="value"` for reactive data | +| **Complex data** | Use a template ref and set the property in `onMounted` | + +## TypeScript Support + +The `igniteui-webcomponents` package automatically registers all component types in `HTMLElementTagNameMap`. DOM queries are fully typed: + +```typescript +import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent); + +// Automatically typed as IgcButtonComponent | null +const button = document.querySelector('igc-button'); +``` + +## Common Issues + +### Vue warns "Unknown custom element: igc-button" + +Configure `isCustomElement` in `vite.config.ts` (or `vue.config.js`) so Vue skips resolution for `igc-*` tags. + +### Events not firing + +Use Vue's `@igcInput` / `@igcChange` syntax. Ignite UI components emit prefixed custom events — standard DOM events like `input` or `change` behave differently. + +### No styles applied + +Ensure you import a theme CSS file in `main.ts` before `createApp`. Without it, components render unstyled. + +### Complex data not reflecting + +Set objects and arrays via a `ref` in `onMounted`. Do not bind them as HTML attributes — attributes only accept serialized strings. + +--- + +## Next Steps + +- [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/) — import only the components you use +- [Customize themes](../../igniteui-wc-customize-component-theme/) — apply your brand colors +- [Component documentation](https://igniteui.github.io/igniteui-webcomponents) — full API reference diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-optimize-bundle-size/SKILL.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-optimize-bundle-size/SKILL.md new file mode 100644 index 000000000..62d112a24 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-optimize-bundle-size/SKILL.md @@ -0,0 +1,709 @@ +--- +name: igniteui-wc-optimize-bundle-size +description: Optimize application bundle size by importing only necessary components and using tree-shaking effectively +user-invocable: true +--- + +# Optimize Bundle Size + +This skill helps users minimize their application's bundle size when using Ignite UI Web Components by importing only the components they need and following best practices for tree-shaking. + +## Example Usage + +- "My bundle size is too large" +- "How do I reduce the size of igniteui-webcomponents?" +- "Import only the components I need" +- "Tree-shake unused components" +- "Optimize imports for production" + +## Related Skills + +- [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) - Proper integration setup +- [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Theming after optimization + +## When to Use + +- User's bundle size is too large +- User wants to optimize for production +- User is importing more components than needed +- User asks about tree-shaking or optimization +- User wants to improve load times + +## Key Principles + +1. **Import only what you use** - Don't use `defineAllComponents()` +2. **Use named imports** - Enable tree-shaking +3. **Analyze your bundle** - Identify what's being included +4. **Lazy load when possible** - Load components on demand + +## Import Strategies + +### ❌ Bad: Import Everything + +```typescript +// DON'T DO THIS - imports ALL components (~500KB+) +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); +``` + +**Impact:** Includes all 60+ components whether you use them or not. + +### ✅ Good: Import Specific Components + +```typescript +// DO THIS - import only what you need +import { + defineComponents, + IgcButtonComponent, + IgcInputComponent, + IgcCardComponent +} from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent); +``` + +**Impact:** Bundle includes only 3 components and their dependencies. + +## React Applications + +If you're using React, consider using the **`igniteui-react`** package instead of `igniteui-webcomponents`. It provides the same components with React-friendly wrappers and typically results in better tree-shaking: + +```bash +npm install igniteui-react +``` + +```tsx +import { IgrButton, IgrInput, IgrCard } from 'igniteui-react'; + +// No need to call defineComponents - components register automatically +function MyComponent() { + return ( + <div> + <IgrButton variant="contained">Click me</IgrButton> + <IgrInput label="Name" /> + <IgrCard>Content</IgrCard> + </div> + ); +} +``` + +**Benefits for bundle size:** +- Automatic tree-shaking (only imported components are included) +- No need for component registration overhead +- Better integration with React build tools + +For more details, see the [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) skill. + +## Analyzing Your Bundle + +### Using Webpack Bundle Analyzer + +**Installation:** + +```bash +npm install --save-dev webpack-bundle-analyzer +``` + +**Configuration (`webpack.config.js`):** + +```javascript +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); + +module.exports = { + plugins: [ + new BundleAnalyzerPlugin({ + analyzerMode: 'static', + openAnalyzer: false, + reportFilename: 'bundle-report.html' + }) + ] +}; +``` + +**Run analysis:** + +```bash +npm run build +# Open bundle-report.html to see what's included +``` + +### Using Vite Bundle Analyzer + +**Installation:** + +```bash +npm install --save-dev rollup-plugin-visualizer +``` + +**Configuration (`vite.config.ts`):** + +```typescript +import { defineConfig } from 'vite'; +import { visualizer } from 'rollup-plugin-visualizer'; + +export default defineConfig({ + plugins: [ + visualizer({ + open: true, + gzipSize: true, + brotliSize: true, + }) + ] +}); +``` + +**Run analysis:** + +```bash +npm run build +# Opens stats.html automatically +``` + +### Using source-map-explorer + +**Installation:** + +```bash +npm install --save-dev source-map-explorer +``` + +**Package.json:** + +```json +{ + "scripts": { + "analyze": "source-map-explorer 'dist/**/*.js'" + } +} +``` + +**Run:** + +```bash +npm run build +npm run analyze +``` + +## Audit Your Component Usage + +### 1. Find What Components You're Actually Using + +Search your codebase for component usage: + +```bash +# Search for component tags in templates +grep -r "igc-" src/ --include="*.html" --include="*.tsx" --include="*.vue" + +# List unique components +grep -roh "igc-[a-z-]*" src/ | sort | uniq +``` + +### 2. Compare with Your Imports + +Check what you're importing vs what you're using: + +```typescript +// Find in your code +import { + defineComponents, + IgcButtonComponent, + IgcInputComponent, + IgcCardComponent, + IgcSelectComponent, // ← Are you using this? + IgcComboComponent, // ← Are you using this? +} from 'igniteui-webcomponents'; +``` + +### 3. Remove Unused Imports + +Remove components you're not using: + +```typescript +// Before: 5 components imported +import { + defineComponents, + IgcButtonComponent, + IgcInputComponent, + IgcCardComponent, + IgcSelectComponent, + IgcComboComponent, +} from 'igniteui-webcomponents'; + +defineComponents( + IgcButtonComponent, + IgcInputComponent, + IgcCardComponent, + IgcSelectComponent, + IgcComboComponent +); + +// After: Only 3 components needed +import { + defineComponents, + IgcButtonComponent, + IgcInputComponent, + IgcCardComponent, +} from 'igniteui-webcomponents'; + +defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent); +``` + +## Lazy Loading Components + +Load components only when needed to reduce initial bundle size. + +### Vanilla JavaScript / TypeScript + +```typescript +// Load immediately (increases initial bundle) +import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents'; +defineComponents(IgcDialogComponent); + +// Lazy load (smaller initial bundle) +async function showDialog() { + const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); + defineComponents(IgcDialogComponent); + + const dialog = document.createElement('igc-dialog'); + // ... use dialog +} +``` + +### React (using igniteui-react) + +```tsx +import React, { lazy, Suspense, useState } from 'react'; + +// Lazy load the dialog component +const IgrDialog = lazy(() => + import('igniteui-react').then(module => ({ default: module.IgrDialog })) +); + +function MyComponent() { + const [showDialog, setShowDialog] = useState(false); + + return ( + <> + <button onClick={() => setShowDialog(true)}>Open Dialog</button> + {showDialog && ( + <Suspense fallback={<div>Loading...</div>}> + <IgrDialog open> + <h2>Dialog Content</h2> + </IgrDialog> + </Suspense> + )} + </> + ); +} +``` + +### React (using web components directly) + +```tsx +import React, { useState } from 'react'; + +// Lazy load component registration +const lazyLoadDialog = async () => { + const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); + defineComponents(IgcDialogComponent); +}; + +function MyComponent() { + const [dialogReady, setDialogReady] = useState(false); + + const openDialog = async () => { + if (!dialogReady) { + await lazyLoadDialog(); + setDialogReady(true); + } + // Show dialog + }; + + return ( + <button onClick={openDialog}>Open Dialog</button> + ); +} +``` + +### Vue 3 + +```vue +<script setup lang="ts"> +import { ref } from 'vue'; + +const dialogReady = ref(false); + +async function openDialog() { + if (!dialogReady.value) { + const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); + defineComponents(IgcDialogComponent); + dialogReady.value = true; + } + // Show dialog +} +</script> + +<template> + <button @click="openDialog">Open Dialog</button> + <igc-dialog v-if="dialogReady" open> + <h2>Dialog Content</h2> + </igc-dialog> +</template> +``` + +### Angular + +```typescript +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-my-component', + template: ` + <button (click)="openDialog()">Open Dialog</button> + <igc-dialog *ngIf="dialogReady" [open]="true"> + <h2>Dialog Content</h2> + </igc-dialog> + ` +}) +export class MyComponent { + dialogReady = false; + + async openDialog() { + if (!this.dialogReady) { + const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); + defineComponents(IgcDialogComponent); + this.dialogReady = true; + } + } +} +``` + +## Route-Based Code Splitting + +Load components only for specific routes. + +### React Router + +```tsx +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { lazy, Suspense } from 'react'; + +// Lazy load route components +const HomePage = lazy(() => import('./pages/Home')); +const DashboardPage = lazy(() => import('./pages/Dashboard')); + +function App() { + return ( + <BrowserRouter> + <Suspense fallback={<div>Loading...</div>}> + <Routes> + <Route path="/" element={<HomePage />} /> + <Route path="/dashboard" element={<DashboardPage />} /> + </Routes> + </Suspense> + </BrowserRouter> + ); +} +``` + +**In route component (`pages/Dashboard.tsx`):** + +```tsx +import { IgrCard, IgrButton } from 'igniteui-react'; + +function Dashboard() { + return ( + <div> + <IgrCard> + <h2>Dashboard</h2> + <p>Dashboard content here</p> + </IgrCard> + </div> + ); +} +``` + +### Vue Router + +```typescript +// router/index.ts +import { createRouter, createWebHistory } from 'vue-router'; + +const routes = [ + { + path: '/', + component: () => import('../views/Home.vue') // Lazy load + }, + { + path: '/dashboard', + component: () => import('../views/Dashboard.vue') // Lazy load + } +]; + +export default createRouter({ + history: createWebHistory(), + routes +}); +``` + +**In route component (`views/Dashboard.vue`):** + +```vue +<script setup lang="ts"> +import { onMounted } from 'vue'; + +onMounted(async () => { + // Load components only for this route + const { defineComponents, IgcCardComponent } = await import('igniteui-webcomponents'); + defineComponents(IgcCardComponent); +}); +</script> +``` + +### Angular + +```typescript +// app-routing.module.ts +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: 'dashboard', + loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) + } +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule {} +``` + +## Build Configuration Optimizations + +### Vite Configuration + +```typescript +// vite.config.ts +import { defineConfig } from 'vite'; + +export default defineConfig({ + build: { + // Enable minification + minify: 'terser', + terserOptions: { + compress: { + drop_console: true, // Remove console.logs + drop_debugger: true + } + }, + + // Optimize chunk splitting + rollupOptions: { + output: { + manualChunks: { + // Separate vendor chunks + 'vendor': ['igniteui-webcomponents'], + } + } + }, + + // Set chunk size warning limit + chunkSizeWarningLimit: 600, + }, + + // Optimize deps + optimizeDeps: { + include: ['igniteui-webcomponents'] + } +}); +``` + +### Webpack Configuration + +```javascript +// webpack.config.js +module.exports = { + optimization: { + splitChunks: { + chunks: 'all', + cacheGroups: { + vendor: { + test: /[\\/]node_modules[\\/]/, + name: 'vendors', + priority: 10, + }, + igniteui: { + test: /[\\/]node_modules[\\/]igniteui-webcomponents[\\/]/, + name: 'igniteui', + priority: 20, + } + } + }, + minimize: true, + }, + + // Tree shaking + mode: 'production', +}; +``` + +## Size Comparison + +Here's what you can expect in terms of bundle size: + +| Import Strategy | Approximate Size (gzipped) | Components Included | +|----------------|---------------------------|---------------------| +| `defineAllComponents()` | ~500KB+ | All 60+ components | +| 10 components via `defineComponents()` | ~150-200KB | 10 components + deps | +| 5 components via `defineComponents()` | ~100-150KB | 5 components + deps | +| 3 components via `defineComponents()` | ~80-120KB | 3 components + deps | +| 1 component via `defineComponents()` | ~50-80KB | 1 component + deps | + +**Note:** Sizes vary based on which components you import (some have more dependencies than others). + +## Best Practices Checklist + +- [ ] **Never use `defineAllComponents()`** unless you truly need every component +- [ ] **Use `defineComponents()` with specific components** you need +- [ ] **Audit your imports regularly** - remove unused components +- [ ] **Lazy load rarely-used components** (dialogs, modals, etc.) +- [ ] **Split by routes** - load components only for active routes +- [ ] **Analyze your bundle** - use bundle analyzer tools +- [ ] **Enable tree-shaking** - use named imports, not side-effect imports +- [ ] **Minify in production** - ensure build tool minification is enabled +- [ ] **Use compression** - enable gzip/brotli on your server + +## Common Issues and Solutions + +### Issue: Bundle still large after following best practices + +**Investigate:** + +1. Check if you're importing many components at once +2. Verify tree-shaking is working (check build output) +3. Look for duplicate dependencies +4. Check if source maps are included in production +5. For React, ensure you're using `igniteui-react` instead of `igniteui-webcomponents` + +**Solutions:** + +```typescript +// Review your imports - are you using all of these? +import { + defineComponents, + IgcButtonComponent, + IgcInputComponent, + IgcSelectComponent, + IgcComboComponent, + IgcDatePickerComponent +} from 'igniteui-webcomponents'; + +// Consider lazy loading components you don't need immediately +async function loadDialog() { + const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); + defineComponents(IgcDialogComponent); +} +``` + +### Issue: Components not working after optimizing imports + +**Cause:** Forgot to import a component you're using + +**Solution:** + +```typescript +// Error: <igc-button> not working +// You're using igc-button but didn't import it + +import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents'; +defineComponents(IgcButtonComponent); // Add this +``` + +### Issue: TypeScript errors after changing imports + +**Solution:** Update type imports: + +```typescript +// Import types separately if needed +import type { IgcButtonComponent } from 'igniteui-webcomponents'; +``` + +## Monitoring Bundle Size + +### Set up bundle size monitoring in CI/CD + +**Using bundlesize (for any build tool):** + +```bash +npm install --save-dev bundlesize +``` + +**Package.json:** + +```json +{ + "scripts": { + "test:size": "bundlesize" + }, + "bundlesize": [ + { + "path": "./dist/**/*.js", + "maxSize": "300 kB" + } + ] +} +``` + +**Run in CI:** + +```bash +npm run build +npm run test:size +``` + +### GitHub Actions Example + +```yaml +name: Bundle Size Check + +on: [pull_request] + +jobs: + size: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + - run: npm ci + - run: npm run build + - run: npm run test:size +``` + +## Expected Results + +After optimization, you should see: + +- **Initial load time reduced** by 40-60% +- **Bundle size reduced** by 50-80% +- **Better Core Web Vitals** scores +- **Faster time to interactive** +- **Lower bandwidth usage** for users + +## Next Steps + +- Profile your application with Chrome DevTools Performance tab +- Implement lazy loading for heavy components +- Consider using CDN for static assets +- Enable HTTP/2 for better resource loading +- Check [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) for proper setup + +## Additional Resources + +- [Webpack Tree Shaking](https://webpack.js.org/guides/tree-shaking/) +- [Vite Build Optimizations](https://vitejs.dev/guide/build.html) +- [Web Performance Optimization](https://web.dev/fast/) +- [Bundle Size Analysis Tools](https://bundlephobia.com/) diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/copilot-instructions.md b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/copilot-instructions.md new file mode 100644 index 000000000..3397e20e2 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/copilot-instructions.md @@ -0,0 +1,3 @@ +Strictly follow the rules in ../AGENTS.md + +The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory. \ No newline at end of file diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__vscode/mcp.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__vscode/mcp.json new file mode 100644 index 000000000..47b02fe0b --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__vscode/mcp.json @@ -0,0 +1,12 @@ +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} \ No newline at end of file diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json index 95b5679a4..1c9972c74 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json @@ -22,14 +22,14 @@ "dependencies": { "@vaadin/router": "^1.7.4", "@igniteui/material-icons-extended": "^3.0.2", - "igniteui-dockmanager": "^2.1.0", - "igniteui-webcomponents": "~7.1.0", - "igniteui-webcomponents-charts": "~7.0.0", - "igniteui-webcomponents-core": "~7.0.0", - "igniteui-webcomponents-gauges": "~7.0.0", - "igniteui-webcomponents-grids": "~7.0.0", - "igniteui-webcomponents-inputs": "~7.0.0", - "igniteui-webcomponents-layouts": "~7.0.0", + "igniteui-dockmanager": "~1.14.4", + "igniteui-webcomponents": "~6.3.0", + "igniteui-webcomponents-charts": "~6.0.0", + "igniteui-webcomponents-core": "~6.0.0", + "igniteui-webcomponents-gauges": "~6.0.0", + "igniteui-webcomponents-grids": "~6.0.0", + "igniteui-webcomponents-inputs": "~6.0.0", + "igniteui-webcomponents-layouts": "~6.0.0", "lit": "^3.2.1", "typescript": "~5.7.2" }, diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts index 1037db5f2..7f2a81fb5 100644 --- a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts @@ -11,8 +11,8 @@ class IgcradialGaugeTemplate extends IgniteUIForWebComponentsTemplate { this.name = "Radial Gauge"; this.description = "IgcRadialGauge"; this.packages = [ - "igniteui-webcomponents-core@~7.0.0", - "igniteui-webcomponents-gauges@~7.0.0" + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-gauges@~6.0.0" ]; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/tree/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/tree/default/index.ts index 93edc59a0..236a50ea0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/tree/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/tree/default/index.ts @@ -11,10 +11,10 @@ class IgcTreeTemplate extends IgniteUIForWebComponentsTemplate { this.name = "Tree"; this.description = "basic IgcTree"; this.packages = [ - "igniteui-webcomponents-core@~7.0.0", - "igniteui-webcomponents-grids@~7.0.0", - "igniteui-webcomponents-inputs@~7.0.0", - "igniteui-webcomponents-layouts@~7.0.0" + "igniteui-webcomponents-core@~6.0.0", + "igniteui-webcomponents-grids@~6.0.0", + "igniteui-webcomponents-inputs@~6.0.0", + "igniteui-webcomponents-layouts@~6.0.0" ]; } } diff --git a/packages/core/package.json b/packages/core/package.json index 9da4811bb..3ca9b5971 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@igniteui/cli-core", - "version": "14.9.2", + "version": "14.10.0-alpha.4", "description": "Base types and functionality for Ignite UI CLI", "repository": { "type": "git", diff --git a/packages/igniteui-mcp/.gitignore b/packages/igniteui-mcp/.gitignore new file mode 100644 index 000000000..c6e8063c8 --- /dev/null +++ b/packages/igniteui-mcp/.gitignore @@ -0,0 +1,38 @@ +# Dependencies +node_modules/ + +# Build output +dist/ +*.tsbuildinfo +docs_processing/ +tmp/ +bin/ +obj/ + +# Environment +.env +.env.local + +# IDE +.vscode/* +!.vscode/mcp.json +.idea/ +*.swp +*.swo +*~ + +# OS +.DS_Store +Thumbs.db + +# Logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# API MCP - Generated documentation +# igniteui-doc-mcp/docs/angular +# igniteui-doc-mcp/docs/webcomponents + +tmp/ diff --git a/packages/igniteui-mcp/Specification.md b/packages/igniteui-mcp/Specification.md new file mode 100644 index 000000000..3aee74aa1 --- /dev/null +++ b/packages/igniteui-mcp/Specification.md @@ -0,0 +1,256 @@ +# IgniteUI-CLI MCP Server Specification + +## Version: 1.4.0 +## Date: March 19, 2026 + +## Overview +The IgniteUI-CLI MCP (Model Context Protocol) Server provides programmatic access to Ignite UI documentation and API references, enabling AI assistants, development tools, and automation systems to interact with Ignite UI projects through a standardized protocol. + +The IgniteUI-CLI MCP Server solves the "Context Gap" encountered by AI models when working with custom or rapidly evolving UI libraries. By leveraging either a bundled SQLite documentation database or a structured backend exposed via `/api/docs/...`, the server transforms curated docs and metadata into actionable knowledge, allowing an AI to understand not just what APIs and components exist, but how to implement them according to specific framework standards. + +## Target Users +- AI coding assistants (GitHub Copilot, Claude, etc.) + +## Use Cases +- ### Automatic Component Discovery +An engineer asks, "How do I add a multi-select filter to the Grid?" The AI uses the server to search IgniteUI docs repositories, identifies the specific "Filtering" component in the relevant framework, and retrieves its latest usage patterns. + +- ### Cross-Framework Migration +A developer needs to port a feature from an existing Angular project to a new React project. The AI uses the server to compare the Interface definitions and Input properties of the Angular component against the React equivalent, ensuring a feature-parity migration. + +- ### Modifying Existing App +A developer wants to update or extend a large-scale sample application (for example, one of the more complex sample apps generated locally from AppBuilder). The AI can analyze the app structure, suggest component upgrades, and automate refactoring tasks. + +- ### Starting New App from Scratch +A user needs to create a brand new application. The AI guides the user through project setup, component selection, and best practices, leveraging Ignite UI CLI and design system recommendations. + +- ### Migrating from Old Ignite UI Libraries +A team is migrating an application built with legacy Ignite UI component libraries to the latest versions. The AI identifies deprecated APIs, maps old components to new equivalents, and generates migration steps. + +- ### Migrating from Other Vendor Components +A company is converting an app built with a different vendor's UI components to Ignite UI. The AI analyzes the existing codebase, suggests Ignite UI replacements, and automates as much of the migration as possible. + +- ### Building App from Figma Design +A designer provides a Figma file. The AI interprets the design, recommends matching Ignite UI components, and scaffolds the initial app layout to accelerate development. + +- ### Converting App from One Framework to Another +A developer needs to port an application from one framework (e.g., Angular) to another (e.g., React or Blazor). The AI assists by mapping components, translating patterns, and ensuring feature parity across frameworks. + +# Technical Description of Tools +The server exposes six core tools built using the `@modelcontextprotocol/sdk` and validated via Zod schemas. + +## Tool Summary + +``` +1. list_components → Browse available component docs by framework +2. get_doc → Retrieve full markdown doc for a specific component +3. search_docs → Full-text search across docs for a framework +4. get_project_setup_guide → Return official setup guidance for a framework +5. search_api → Search API entries by keyword or partial name +6. get_api_reference → Retrieve full API reference for a known component +``` + +## Tool Definitions + +### **list_components** +**Purpose**: Lists available Ignite UI component docs, optionally filtered by keyword. + +**Logic**: +- In remote mode, calls `GET /api/docs?framework=<framework>[&filter=<keyword>]` on the docs backend +- In local mode, queries the bundled docs database +- Filter matches against filename, component name, `toc_name`, keywords, and summary fields + +**Schema**: +- `framework`: Enum (angular|react|blazor|webcomponents) — required +- `filter`: String (optional keyword to narrow results) + +**Return**: Formatted text. Each result includes the display name, the doc name to pass to `get_doc`, the summary when available, and a premium marker when applicable. + +### **get_doc** +**Purpose**: Returns the full Markdown content of a specific Ignite UI component doc. + +**Logic**: +- In remote mode, calls `GET /api/docs/<framework>/<name>` on the docs backend +- In local mode, retrieves the doc from the bundled docs database +- On HTTP 200: returns the raw Markdown body as a text content item +- On HTTP 404: does **not** throw or propagate an exception — returns a structured MCP tool-level error response (see Error Response Contract below) +- On any other HTTP error status: throws, which the MCP transport surfaces as an unhandled tool error +- In local mode, successful responses reconstruct YAML frontmatter including `component`, `toc_name`, `keywords`, `summary`, and `premium` when present + +**Schema**: +- `framework`: Enum (angular|react|blazor|webcomponents) — required +- `name`: String — doc name without `.md` extension, e.g. `"grid-editing"` or `"accordion"` — required + +**Return**: Full Markdown content of the requested doc. + +#### Error Response Contract + +A missing doc produces a **tool-level error** — The MCP response envelope has `isError: true` and a single `text` content item: + +``` +Transport layer: HTTP 200 OK (the MCP call itself succeeded) +MCP envelope: { isError: true, content: [{ type: "text", text: "..." }] } +``` + +The `text` field follows this exact template: + +``` +Doc "<name>" not found for framework "<framework>". Use list_components to see available docs. +``` + +**Example** — calling `get_doc("angular", "grid-virtual-scrolling")` when the doc does not exist: + +```json +{ + "isError": true, + "content": [ + { + "type": "text", + "text": "Doc \"grid-virtual-scrolling\" not found for framework \"angular\". Use list_components to see available docs." + } + ] +} +``` +### **search_docs** +**Purpose**: Full-text search across Ignite UI docs for a specific framework. Returns the top 20 results with excerpt snippets. + +**Logic**: +- Sanitizes the query by removing special FTS characters (`"`, `(`, `)`, `{`, `}`, `[`, `]`, `:`, `@`) +- Preserves hyphenated terms and trailing `*` for prefix search +- Wraps non-prefix terms in quotes joined with `OR` +- In remote mode, calls `GET /api/docs/search?framework=<framework>&query=<sanitized>` on the docs backend +- In local mode, executes an FTS query against the bundled docs database +- Returns an empty-query message immediately if the input is blank + +**Schema**: +- `query`: String — supports prefix matching (e.g. `"grid*"`) — required +- `framework`: Enum (angular|react|blazor|webcomponents) — required + +**Return**: Formatted text with up to 20 ranked results. Each result includes the display name, the doc name to pass to `get_doc`, the summary when available, and an excerpt with matches highlighted. + +### **get_project_setup_guide** +**Purpose**: Returns the official Ignite UI project setup guidance for a framework. + +**Logic**: +- For Angular, React, and Web Components, returns the bundled CLI setup and template guidance +- For Blazor, returns a composed response that starts with a `dotnet new` / run guide and appends the relevant documentation sections when available +- This tool is read-only: it does not create files, run commands, or modify the workspace + +**Schema**: +- `framework`: Enum (angular|react|blazor|webcomponents) + +**Return**: Markdown setup guidance only. The response contains installation, scaffolding, and next-step instructions for the selected framework. + +### **search_api** +**Purpose**: Search Ignite UI API entries by keyword, feature, or partial component name across Angular, React, and Web Components. Returns up to 10 results ranked by match count. + +**Logic**: +- Searches against component names, keywords, API type, and document content +- Omitting `platform` searches all three supported platforms simultaneously +- Results are ranked by match count; each result includes the exact component name, platform tag, API type (class/interface/directive/enum), match count, keyword list, and a content excerpt + +**Schema**: +- `query`: String — keyword, partial name, or feature description; max 256 characters — required +- `platform`: Enum (angular|react|webcomponents) — optional; omit to search all platforms + +**Constraints**: +- Blazor is not supported +- Output is text, not structured JSON +- Returns an empty-query message immediately if the input is blank + +**Return**: Up to 10 ranked text results. Use the exact `component` name and `platform` from a result to call `get_api_reference`. + +### **get_api_reference** +**Purpose**: Retrieve the full API reference for one Ignite UI component or class. Supports Angular, React, and Web Components. Component name matching is case-insensitive. + +**Logic**: +- Requires the exact component name (obtained from user code or an `search_api` result) +- Accepts an optional `section` parameter to retrieve a subset of the API and reduce response size +- Returns `isError: true` with a prompt to use `search_api` if the component is not found +- If an exact case-sensitive match is not found, performs a case-insensitive lookup within the selected platform before returning an error + +**Schema**: +- `component`: String — exact component or class name; max 128 characters — required +- `platform`: Enum (angular|react|webcomponents) — required +- `section`: Enum (all|properties|methods|events) — optional; defaults to `all` + +**Constraints**: +- Blazor is not supported + +**Return**: Formatted Markdown for the requested API entry. The full entry (`section="all"`) includes the class/interface summary, properties with types and descriptions, methods with signatures, and events. + +#### Error Response Contract + +A not-found component produces a **tool-level error** — not an exception propagated to the transport. The MCP response envelope has `isError: true` and a single `text` content item: + +``` +Transport layer: HTTP 200 OK (the MCP call itself succeeded) +MCP envelope: { isError: true, content: [{ type: "text", text: "..." }] } +``` + +The `text` field follows this exact template: + +``` +API reference for "<component>" not found in <Platform Display Name>. Use search_api to find available components. +``` + +#### Typical Workflow + +``` +search_api(query, platform?) → discover exact component name and platform +get_api_reference(component, platform) → retrieve full API reference +``` + +## Architecture + +### Communication Layer +The server communicates via Standard Input/Output (stdio), allowing it to run as a local process. + +### Operating Modes +- **Local mode (default)**: uses a bundled SQLite database with full-text search for docs and locally loaded API models +- **Remote mode**: proxies documentation requests to a backend API when started with `--remote <url>` + +## Deployment Guide +To deploy this server: + +Build: Compile the TypeScript source into the `dist/` directory. + +**VS Code** → `.vscode/mcp.json` + +```json +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + } +} +``` + +**Cursor** → `.cursor/mcp.json` + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + } +} +``` + +**Claude Desktop** → `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) +or `%APPDATA%\Claude\claude_desktop_config.json` (Windows) + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + } +} +``` diff --git a/packages/igniteui-mcp/docs-backend/docs-backend.sln b/packages/igniteui-mcp/docs-backend/docs-backend.sln new file mode 100644 index 000000000..538470643 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend.sln @@ -0,0 +1,22 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "docs-backend", "docs-backend\docs-backend.csproj", "{2C9F9092-9B29-4B5E-ABCA-B3579551EDA8}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "tests-docs-backend", "tests-docs-backend\tests-docs-backend.csproj", "{DF89E3FA-CBAC-412F-BBA2-DACC5156D6C6}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {2C9F9092-9B29-4B5E-ABCA-B3579551EDA8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {2C9F9092-9B29-4B5E-ABCA-B3579551EDA8}.Debug|Any CPU.Build.0 = Debug|Any CPU + {2C9F9092-9B29-4B5E-ABCA-B3579551EDA8}.Release|Any CPU.ActiveCfg = Release|Any CPU + {2C9F9092-9B29-4B5E-ABCA-B3579551EDA8}.Release|Any CPU.Build.0 = Release|Any CPU + {DF89E3FA-CBAC-412F-BBA2-DACC5156D6C6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {DF89E3FA-CBAC-412F-BBA2-DACC5156D6C6}.Debug|Any CPU.Build.0 = Debug|Any CPU + {DF89E3FA-CBAC-412F-BBA2-DACC5156D6C6}.Release|Any CPU.ActiveCfg = Release|Any CPU + {DF89E3FA-CBAC-412F-BBA2-DACC5156D6C6}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection +EndGlobal diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/Controllers/DocsController.cs b/packages/igniteui-mcp/docs-backend/docs-backend/Controllers/DocsController.cs new file mode 100644 index 000000000..0e0521892 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/Controllers/DocsController.cs @@ -0,0 +1,120 @@ +using System.Text; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Data.Sqlite; + +namespace docs_backend.Controllers; + +public enum Framework +{ + Angular, + React, + Blazor, + WebComponents +} + +[ApiController] +[Route("api/docs")] +public class DocsController(SqliteConnection db) : ControllerBase +{ + private static readonly Dictionary<string, string> ValidFrameworks = Enum.GetValues<Framework>() + .ToDictionary(f => f.ToString().ToLowerInvariant(), f => f.ToString().ToLowerInvariant()); + + private static bool IsValidFramework(string framework, out string normalized) + { + return ValidFrameworks.TryGetValue(framework.ToLowerInvariant(), out normalized!); + } + + [HttpGet] + public IActionResult List([FromQuery] string framework, [FromQuery] string? filter) + { + if (!IsValidFramework(framework, out var fw)) + return BadRequest($"Invalid framework \"{framework}\". Valid values: {string.Join(", ", ValidFrameworks.Keys)}"); + + framework = fw; + var sql = "SELECT framework, filename, component, toc_name, premium, summary FROM docs WHERE framework = @fw"; + var cmd = db.CreateCommand(); + cmd.Parameters.AddWithValue("@fw", framework); + + if (!string.IsNullOrWhiteSpace(filter)) + { + sql += " AND (filename LIKE @f OR toc_name LIKE @f OR component LIKE @f OR keywords LIKE @f OR summary LIKE @f)"; + cmd.Parameters.AddWithValue("@f", $"%{filter}%"); + } + + sql += " ORDER BY filename"; + cmd.CommandText = sql; + + var sb = new StringBuilder(); + using var reader = cmd.ExecuteReader(); + while (reader.Read()) + { + var filename = reader.GetString(reader.GetOrdinal("filename")); + var name = filename.EndsWith(".md") ? filename[..^3] : filename; + var component = reader.IsDBNull(reader.GetOrdinal("component")) ? null : reader.GetString(reader.GetOrdinal("component")); + var comp = !string.IsNullOrEmpty(component) ? $" [{component}]" : ""; + if (sb.Length > 0) sb.AppendLine(); + sb.Append($"{name}{comp}"); + } + + var text = sb.Length > 0 ? sb.ToString() : "No docs found."; + return Content(text, "text/plain"); + } + + [HttpGet("{framework}/{name}")] + public IActionResult Get(string framework, string name) + { + if (!IsValidFramework(framework, out var fw)) + return BadRequest($"Invalid framework \"{framework}\". Valid values: {string.Join(", ", ValidFrameworks.Keys)}"); + + framework = fw; + var filename = name.EndsWith(".md") ? name : name + ".md"; + var cmd = db.CreateCommand(); + cmd.CommandText = "SELECT content FROM docs WHERE framework = @fw AND filename = @name"; + cmd.Parameters.AddWithValue("@fw", framework); + cmd.Parameters.AddWithValue("@name", filename); + + var content = cmd.ExecuteScalar() as string; + if (content == null) + return NotFound($"Doc \"{name}\" not found for framework \"{framework}\"."); + + return Content(content, "text/plain"); + } + + [HttpGet("search")] + public IActionResult Search([FromQuery] string framework, [FromQuery] string query) + { + if (!IsValidFramework(framework, out var fw)) + return BadRequest($"Invalid framework \"{framework}\". Valid values: {string.Join(", ", ValidFrameworks.Keys)}"); + + framework = fw; + if (string.IsNullOrWhiteSpace(query)) + return Content("Empty query.", "text/plain"); + + var cmd = db.CreateCommand(); + cmd.CommandText = @" + SELECT d.framework, d.filename, d.component, d.toc_name, d.premium, + snippet(docs_fts, '>>>', '<<<', '...', -1, 32) AS excerpt + FROM docs_fts JOIN docs d ON d.rowid = docs_fts.rowid + WHERE docs_fts MATCH @q AND d.framework = @fw + LIMIT 20"; + cmd.Parameters.AddWithValue("@q", query); + cmd.Parameters.AddWithValue("@fw", framework); + + var sb = new StringBuilder(); + using var reader = cmd.ExecuteReader(); + while (reader.Read()) + { + var filename = reader.GetString(reader.GetOrdinal("filename")); + var docName = filename.EndsWith(".md") ? filename[..^3] : filename; + var component = reader.IsDBNull(reader.GetOrdinal("component")) ? null : reader.GetString(reader.GetOrdinal("component")); + var comp = !string.IsNullOrEmpty(component) ? $" [{component}]" : ""; + var excerpt = reader.GetString(reader.GetOrdinal("excerpt")); + + if (sb.Length > 0) sb.AppendLine().AppendLine(); + sb.Append($"**{docName}**{comp}\n{excerpt}"); + } + + var text = sb.Length > 0 ? sb.ToString() : $"No results found for \"{query}\"."; + return Content(text, "text/plain"); + } +} diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/Program.cs b/packages/igniteui-mcp/docs-backend/docs-backend/Program.cs new file mode 100644 index 000000000..a3994ac7b --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/Program.cs @@ -0,0 +1,34 @@ +using Microsoft.Data.Sqlite; + +namespace docs_backend; + +public class Program +{ + public static void Main(string[] args) + { + var builder = WebApplication.CreateSlimBuilder(args); + + var dbPath = builder.Configuration["DbPath"] ?? "igniteui-docs.db"; + var connectionString = new SqliteConnectionStringBuilder + { + DataSource = dbPath, + Mode = SqliteOpenMode.ReadOnly + }.ToString(); + + var connection = new SqliteConnection(connectionString); + connection.Open(); + builder.Services.AddSingleton(connection); + + builder.Services.AddControllers(); + builder.Services.AddCors(options => + { + options.AddDefaultPolicy(policy => + policy.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()); + }); + + var app = builder.Build(); + app.UseCors(); + app.MapControllers(); + app.Run(); + } +} diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/Properties/launchSettings.json b/packages/igniteui-mcp/docs-backend/docs-backend/Properties/launchSettings.json new file mode 100644 index 000000000..a6cb743fd --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/Properties/launchSettings.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://json.schemastore.org/launchsettings.json", + "profiles": { + "http": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "launchUrl": "todos", + "applicationUrl": "http://localhost:5277", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/appsettings.Development.json b/packages/igniteui-mcp/docs-backend/docs-backend/appsettings.Development.json new file mode 100644 index 000000000..0c208ae91 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/appsettings.Development.json @@ -0,0 +1,8 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + } +} diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/appsettings.json b/packages/igniteui-mcp/docs-backend/docs-backend/appsettings.json new file mode 100644 index 000000000..6b1d1a7a5 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/appsettings.json @@ -0,0 +1,10 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "DbPath": "igniteui-docs.db" +} diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/docs-backend.csproj b/packages/igniteui-mcp/docs-backend/docs-backend/docs-backend.csproj new file mode 100644 index 000000000..1a970bc83 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/docs-backend.csproj @@ -0,0 +1,19 @@ +<Project Sdk="Microsoft.NET.Sdk.Web"> + + <PropertyGroup> + <TargetFramework>net10.0</TargetFramework> + <Nullable>enable</Nullable> + <ImplicitUsings>enable</ImplicitUsings> + <RootNamespace>docs_backend</RootNamespace> + <InvariantGlobalization>true</InvariantGlobalization> + </PropertyGroup> + + <ItemGroup> + <PackageReference Include="Microsoft.Data.Sqlite" Version="10.0.3" /> + </ItemGroup> + + <ItemGroup> + <None Include="igniteui-docs.db" CopyToOutputDirectory="PreserveNewest" /> + </ItemGroup> + +</Project> diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/docs-backend.http b/packages/igniteui-mcp/docs-backend/docs-backend/docs-backend.http new file mode 100644 index 000000000..58bf69721 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs-backend/docs-backend.http @@ -0,0 +1,11 @@ +@docs_backend_HostAddress = http://localhost:5277 + +GET {{docs_backend_HostAddress}}/todos/ +Accept: application/json + +### + +GET {{docs_backend_HostAddress}}/todos/1 +Accept: application/json + +### diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db new file mode 100644 index 000000000..5f4ee83dd Binary files /dev/null and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/docs-backend/docs/api-plan.md b/packages/igniteui-mcp/docs-backend/docs/api-plan.md new file mode 100644 index 000000000..859bf052b --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs/api-plan.md @@ -0,0 +1,134 @@ +# Plan: C# REST API Backend for Ignite UI Docs + +## Context + +The MCP server (`igniteui-doc-mcp/src/index.ts`) exposes 3 documentation tools over stdio using an in-memory SQLite DB with FTS4. We need a C# Web API in `docs-backend/` that serves the same data over HTTP REST endpoints, so the MCP server can optionally call these endpoints instead of loading the ~20MB DB directly. + +## DB Schema (from `igniteui-doc-mcp/dist/igniteui-docs.db`) + +```sql +CREATE TABLE docs ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + framework TEXT NOT NULL, + filename TEXT NOT NULL, + component TEXT NOT NULL, + toc_name TEXT, + premium INTEGER DEFAULT 0, + keywords TEXT, + summary TEXT, + content TEXT NOT NULL, + UNIQUE(framework, filename) +); + +CREATE VIRTUAL TABLE docs_fts USING fts4( + component, toc_name, keywords, summary, content, + content='docs', tokenize=porter, prefix="2,3" +); +``` + +## Endpoints (mirror the 3 documentation MCP tools) + +### 1. `GET /api/docs?framework={fw}&filter={optional}` +Maps to `list_components`. Returns a plain text list matching the MCP format exactly: +``` +accordion [IgxAccordionComponent] +avatar [IgxAvatarComponent] +grid-editing [IgxGridComponent, IgxColumnComponent] +``` +Each line: `{filename without .md} [{component}]`. Content-Type: `text/plain`. + +### 2. `GET /api/docs/{framework}/{name}` +Maps to `get_doc`. Returns the full markdown content as `text/plain`. 404 if not found. + +### 3. `GET /api/docs/search?framework={fw}&query={text}` +Maps to `search_docs`. Returns plain text matching MCP format: +``` +**accordion** [IgxAccordionComponent] +...excerpt with >>>highlights<<<... + +**grid-editing** [IgxGridComponent] +...excerpt... +``` +Results separated by blank lines. Content-Type: `text/plain`. Top 20 results via FTS4 MATCH + `snippet()`. + +## Files to Modify/Create + +| File | Action | +|------|--------| +| `docs-backend/docs-backend/docs-backend.csproj` | Add `Microsoft.Data.Sqlite` NuGet, add DB copy-to-output | +| `docs-backend/docs-backend/Program.cs` | Replace todo scaffold with docs API endpoints + SQLite setup | +| `docs-backend/docs-backend/appsettings.json` | Add `DbPath` config | +| `docs-backend/docs-backend/igniteui-docs.db` | Copy from `igniteui-doc-mcp/dist/igniteui-docs.db` (bundled with build) | + +## Implementation Details + +### `docs-backend.csproj` +- Add `<PackageReference Include="Microsoft.Data.Sqlite" Version="10.0.3" />` +- Keep AOT + InvariantGlobalization (Microsoft.Data.Sqlite supports AOT) + +### `appsettings.json` +```json +{ + "DbPath": "igniteui-docs.db" +} +``` + +### DB Bundling + +The `igniteui-docs.db` file is copied into the build output directory so it ships alongside the server executable. Add to `.csproj`: +```xml +<ItemGroup> + <None Include="igniteui-docs.db" CopyToOutputDirectory="PreserveNewest" /> +</ItemGroup> +``` +The actual `.db` file is copied (or symlinked) from `igniteui-doc-mcp/dist/igniteui-docs.db` into the project root. This keeps the API self-contained — no external path dependencies at runtime. + +### `Program.cs` + +Replace the todo sample with: + +1. **Startup**: Read `DbPath` from config, open a read-only `SqliteConnection` as a singleton +2. **Response format**: All endpoints return `text/plain` matching the exact MCP tool output format. No JSON response models needed — this keeps things simple and AOT-friendly. +3. **Endpoints**: + +**`GET /api/docs`** — `?framework=angular&filter=grid` +```csharp +SELECT framework, filename, component, toc_name, premium, summary +FROM docs WHERE framework = @fw +AND (filename LIKE @f OR toc_name LIKE @f OR component LIKE @f OR keywords LIKE @f OR summary LIKE @f) +ORDER BY filename +``` + +**`GET /api/docs/{framework}/{name}`** — returns 200 with full doc or 404 +```csharp +SELECT * FROM docs WHERE framework = @fw AND filename = @name +``` +Appends `.md` if missing, returns `content` field. + +**`GET /api/docs/search`** — `?framework=angular&query=grid filtering` +```csharp +SELECT d.framework, d.filename, d.component, d.toc_name, d.premium, + snippet(docs_fts, '>>>', '<<<', '...', -1, 32) AS excerpt +FROM docs_fts JOIN docs d ON d.rowid = docs_fts.rowid +WHERE docs_fts MATCH @q AND d.framework = @fw +LIMIT 20 +``` + +4. **CORS**: Add a permissive CORS policy so the MCP server (or any frontend) can call the API. + +5. Remove the `AppJsonSerializerContext` and `Todo` record — no longer needed since all responses are `text/plain`. + +### Connection Management + +Use a singleton `SqliteConnection` opened read-only at startup (`Mode=ReadOnly` in connection string). SQLite read-only connections are safe for concurrent reads. The DB is a build artifact that doesn't change at runtime. + +## Verification + +1. Build: `cd docs-backend/docs-backend && dotnet build` +2. Run: `dotnet run` +3. Test endpoints: + - `curl http://localhost:5277/api/docs?framework=angular` — should return list of ~281 docs + - `curl http://localhost:5277/api/docs?framework=react&filter=grid` — filtered list + - `curl http://localhost:5277/api/docs/angular/accordion` — full markdown content + - `curl http://localhost:5277/api/docs/search?framework=angular&query=grid+filtering` — FTS results with excerpts + - `curl http://localhost:5277/api/docs/react/nonexistent` — 404 diff --git a/packages/igniteui-mcp/docs-backend/docs/mcp-migration-plan.md b/packages/igniteui-mcp/docs-backend/docs/mcp-migration-plan.md new file mode 100644 index 000000000..5bb3cc5b0 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/docs/mcp-migration-plan.md @@ -0,0 +1,88 @@ +# Plan: MCP Server → REST Backend Migration + +## Overview + +Two changes: +1. **MCP server (`src/index.ts`)**: Replace in-memory SQLite with HTTP calls to the `docs-backend` REST API +2. **Build pipeline (`scripts/build-db.ts`, `package.json`)**: Output the DB to `docs-backend/docs-backend/` after build + +--- + +## 1. Modify `src/index.ts` — Use REST backend + +### Remove +- `sql.js` import and `initSqlJs` setup +- `DB_PATH` constant +- `db` variable and `query()` helper function +- The `readFileSync(DB_PATH)` / `new SQL.Database(dbBuffer)` initialization in `main()` + +### Add +- `BACKEND_URL` constant — read from env var `DOCS_BACKEND_URL`, default `http://localhost:5277` +- A small `fetchText(url)` helper that calls `fetch()` and returns the response text (or throws on non-2xx) + +### Rewrite tool handlers + +Each tool handler becomes a single `fetch()` call to the corresponding REST endpoint. The backend already returns text in the exact same format, so the tool just passes the response through. + +**`list_components`**: +```ts +const url = new URL("/api/docs", BACKEND_URL); +url.searchParams.set("framework", framework); +if (filter) url.searchParams.set("filter", filter); +const text = await fetchText(url); +``` + +**`get_doc`**: +```ts +const url = new URL(`/api/docs/${framework}/${name}`, BACKEND_URL); +const resp = await fetch(url); +if (resp.status === 404) { /* return isError response */ } +const text = await resp.text(); +``` + +**`search_docs`**: +```ts +const url = new URL("/api/docs/search", BACKEND_URL); +url.searchParams.set("framework", framework); +url.searchParams.set("query", queryText); +const text = await fetchText(url); +``` + +### Remove dependencies +- Remove `sql.js` from `dependencies` in `package.json` +- Remove `src/sql.js.d.ts` type declarations (if it exists) +- The `main()` function simplifies to just creating the transport and connecting + +--- + +## 2. Modify build pipeline — DB output to backend project + +### `scripts/build-db.ts` +- After building the DB at `dist/igniteui-docs.db`, copy it to `../docs-backend/docs-backend/igniteui-docs.db` +- Use `fs.copyFileSync()` with a log message +- Keep the `dist/` copy so existing workflows aren't broken + +### `package.json` +- No script changes needed — the copy happens inside `build-db.ts` itself + +--- + +## Files to modify + +| File | Change | +|------|--------| +| `igniteui-doc-mcp/src/index.ts` | Replace SQLite queries with `fetch()` to REST endpoints | +| `igniteui-doc-mcp/package.json` | Remove `sql.js` dependency | +| `igniteui-doc-mcp/scripts/build-db.ts` | Add `copyFileSync` to `../docs-backend/docs-backend/` after DB build | +| `igniteui-doc-mcp/src/sql.js.d.ts` | Delete (if it exists) — no longer needed | + +## No changes needed +- `docs-backend/` — already done, endpoints match the MCP output format exactly +- `tsconfig.json` — no changes +- Tool descriptions, prompts, FRAMEWORK_ENUM — unchanged + +## Verification +1. Start backend: `cd docs-backend/docs-backend && dotnet run` +2. Start MCP: `cd igniteui-doc-mcp && npm start` +3. Verify tools return same results as before +4. Run `npm run build:db` and verify DB appears in both `dist/` and `../docs-backend/docs-backend/` diff --git a/packages/igniteui-mcp/docs-backend/tests-docs-backend/DocsControllerTests.cs b/packages/igniteui-mcp/docs-backend/tests-docs-backend/DocsControllerTests.cs new file mode 100644 index 000000000..96872ba7b --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/tests-docs-backend/DocsControllerTests.cs @@ -0,0 +1,234 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.Data.Sqlite; +using docs_backend.Controllers; + +namespace tests_docs_backend; + +public class DocsControllerTests +{ + private SqliteConnection _db = null!; + private DocsController _controller = null!; + + [OneTimeSetUp] + public void Setup() + { + _db = new SqliteConnection("Data Source=:memory:"); + _db.Open(); + + var cmd = _db.CreateCommand(); + cmd.CommandText = @" + CREATE TABLE docs ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + framework TEXT NOT NULL, + filename TEXT NOT NULL, + component TEXT NOT NULL, + toc_name TEXT, + premium INTEGER DEFAULT 0, + keywords TEXT, + summary TEXT, + content TEXT NOT NULL, + UNIQUE(framework, filename) + ); + + CREATE VIRTUAL TABLE docs_fts USING fts4( + component, toc_name, keywords, summary, content, + content='docs', tokenize=porter, prefix=""2,3"" + ); + + INSERT INTO docs (framework, filename, component, toc_name, premium, keywords, summary, content) + VALUES + ('angular', 'accordion.md', 'IgxAccordionComponent', 'Accordion', 0, 'accordion expand collapse', 'Accordion component overview', '# Accordion\nAccordion content here'), + ('angular', 'grid-editing.md', 'IgxGridComponent, IgxColumnComponent', 'Grid Editing', 0, 'grid editing cell', 'Grid editing overview', '# Grid Editing\nGrid editing content'), + ('angular', 'grid-filtering.md', 'IgxGridComponent', 'Grid Filtering', 1, 'grid filtering column', 'Grid filtering overview', '# Grid Filtering\nFiltering content for grid'), + ('react', 'grid.md', 'IgrGrid', 'Grid', 0, 'grid data table', 'React grid overview', '# React Grid\nReact grid content'), + ('angular', 'no-component.md', '', NULL, 0, NULL, NULL, '# No Component\nContent without component'); + + INSERT INTO docs_fts (rowid, component, toc_name, keywords, summary, content) + SELECT id, component, toc_name, keywords, summary, content FROM docs; + "; + cmd.ExecuteNonQuery(); + + _controller = new DocsController(_db); + } + + [OneTimeTearDown] + public void TearDown() + { + _db.Close(); + _db.Dispose(); + } + + // --- List endpoint tests --- + + [Test] + public void List_ReturnsAllAngularDocs() + { + var result = _controller.List("angular", null) as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.StatusCode, Is.Null.Or.EqualTo(200)); + var lines = result.Content!.Split('\n'); + Assert.That(lines, Has.Length.EqualTo(4)); + Assert.That(result.Content, Does.Contain("accordion [IgxAccordionComponent]")); + Assert.That(result.Content, Does.Contain("grid-editing [IgxGridComponent, IgxColumnComponent]")); + } + + [Test] + public void List_WithFilter_ReturnsMatchingDocs() + { + var result = _controller.List("angular", "grid") as ContentResult; + + Assert.That(result, Is.Not.Null); + var lines = result!.Content!.Split('\n'); + Assert.That(lines, Has.Length.EqualTo(2)); + Assert.That(result.Content, Does.Contain("grid-editing")); + Assert.That(result.Content, Does.Contain("grid-filtering")); + } + + [Test] + public void List_WithNoResults_ReturnsNoDocsFound() + { + var result = _controller.List("angular", "nonexistent-xyz") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Is.EqualTo("No docs found.")); + } + + [Test] + public void List_InvalidFramework_ReturnsBadRequest() + { + var result = _controller.List("invalid", null); + + Assert.That(result, Is.InstanceOf<BadRequestObjectResult>()); + } + + [Test] + public void List_FrameworkIsCaseInsensitive() + { + var result = _controller.List("Angular", null) as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.Contain("accordion")); + } + + [Test] + public void List_DocWithEmptyComponent_NoSquareBrackets() + { + var result = _controller.List("angular", "no-component") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Is.EqualTo("no-component")); + } + + // --- Get endpoint tests --- + + [Test] + public void Get_ExistingDoc_ReturnsContent() + { + var result = _controller.Get("angular", "accordion") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.StartWith("# Accordion")); + Assert.That(result.ContentType, Is.EqualTo("text/plain")); + } + + [Test] + public void Get_WithMdExtension_StillWorks() + { + var result = _controller.Get("angular", "accordion.md") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.StartWith("# Accordion")); + } + + [Test] + public void Get_NonexistentDoc_Returns404() + { + var result = _controller.Get("angular", "nonexistent"); + + Assert.That(result, Is.InstanceOf<NotFoundObjectResult>()); + } + + [Test] + public void Get_InvalidFramework_ReturnsBadRequest() + { + var result = _controller.Get("bogus", "accordion"); + + Assert.That(result, Is.InstanceOf<BadRequestObjectResult>()); + } + + [Test] + public void Get_WrongFramework_Returns404() + { + var result = _controller.Get("react", "accordion"); + + Assert.That(result, Is.InstanceOf<NotFoundObjectResult>()); + } + + // --- Search endpoint tests --- + + [Test] + public void Search_FindsMatchingDocs() + { + var result = _controller.Search("angular", "filtering") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.Contain("**grid-filtering**")); + Assert.That(result.Content, Does.Contain(">>>")); + } + + [Test] + public void Search_NoResults_ReturnsMessage() + { + var result = _controller.Search("angular", "xyznonexistent") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.Contain("No results found")); + } + + [Test] + public void Search_EmptyQuery_ReturnsMessage() + { + var result = _controller.Search("angular", "") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Is.EqualTo("Empty query.")); + } + + [Test] + public void Search_WhitespaceQuery_ReturnsMessage() + { + var result = _controller.Search("angular", " ") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Is.EqualTo("Empty query.")); + } + + [Test] + public void Search_InvalidFramework_ReturnsBadRequest() + { + var result = _controller.Search("bogus", "grid"); + + Assert.That(result, Is.InstanceOf<BadRequestObjectResult>()); + } + + [Test] + public void Search_ResultsIncludeComponent() + { + var result = _controller.Search("angular", "accordion") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.Contain("[IgxAccordionComponent]")); + } + + [Test] + public void Search_OnlyReturnsRequestedFramework() + { + var result = _controller.Search("react", "grid") as ContentResult; + + Assert.That(result, Is.Not.Null); + Assert.That(result!.Content, Does.Contain("**grid**")); + Assert.That(result.Content, Does.Not.Contain("grid-editing")); + Assert.That(result.Content, Does.Not.Contain("grid-filtering")); + } +} diff --git a/packages/igniteui-mcp/docs-backend/tests-docs-backend/tests-docs-backend.csproj b/packages/igniteui-mcp/docs-backend/tests-docs-backend/tests-docs-backend.csproj new file mode 100644 index 000000000..0c53ad252 --- /dev/null +++ b/packages/igniteui-mcp/docs-backend/tests-docs-backend/tests-docs-backend.csproj @@ -0,0 +1,28 @@ +<Project Sdk="Microsoft.NET.Sdk"> + + <PropertyGroup> + <TargetFramework>net10.0</TargetFramework> + <RootNamespace>tests_docs_backend</RootNamespace> + <LangVersion>latest</LangVersion> + <ImplicitUsings>enable</ImplicitUsings> + <Nullable>enable</Nullable> + <IsPackable>false</IsPackable> + </PropertyGroup> + + <ItemGroup> + <PackageReference Include="coverlet.collector" Version="6.0.4"/> + <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.14.0"/> + <PackageReference Include="NUnit" Version="4.3.2"/> + <PackageReference Include="NUnit.Analyzers" Version="4.7.0"/> + <PackageReference Include="NUnit3TestAdapter" Version="5.0.0"/> + </ItemGroup> + + <ItemGroup> + <Using Include="NUnit.Framework"/> + </ItemGroup> + + <ItemGroup> + <ProjectReference Include="..\docs-backend\docs-backend.csproj" /> + </ItemGroup> + +</Project> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/.gitattributes b/packages/igniteui-mcp/igniteui-doc-mcp/.gitattributes new file mode 100644 index 000000000..ecd3f6681 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/.gitattributes @@ -0,0 +1 @@ +docs_baseline/** text eol=lf diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/.npmignore b/packages/igniteui-mcp/igniteui-doc-mcp/.npmignore new file mode 100644 index 000000000..ddc77eae7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/.npmignore @@ -0,0 +1,28 @@ +# Source and config +src/ +tsconfig.json +.env +.env.* +.gitattributes +CLAUDE.md +test.json + +# Pipeline scripts +scripts/ + +# Documentation submodules and processing artifacts +angular/ +blazor/ +react/ +webcomponents/ +common/ +docs_baseline/ +dist/docs_processing/ +dist/docs_prepeared/ +dist/docs_final/ +dist/diff-manifest.json +tmp/ + +# Dev files +node_modules/ +*.tgz diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/CHANGELOG.md b/packages/igniteui-mcp/igniteui-doc-mcp/CHANGELOG.md new file mode 100644 index 000000000..bdfa6447c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/CHANGELOG.md @@ -0,0 +1,189 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# 14.10.0-alpha.4 (2026-03-27) + + +### Features + +* add upgrade instructions for licensed packages in Angular, React, and Web Components setup guides ([be609b2](https://github.com/IgniteUI/igniteui-cli/commit/be609b266d6d97f8cf2cdd6f83fdc05aac08ce08)) + + + +# 14.10.0-alpha.3 (2026-03-25) + + +### Features + +* Api ref documantation added to the repo ([ce819a7](https://github.com/IgniteUI/igniteui-cli/commit/ce819a7eaf033f68405ebd157af24dc9f8f46f47)) +* update MCP configuration to use 'igniteui-cli@next' for command execution ([1c612ef](https://github.com/IgniteUI/igniteui-cli/commit/1c612ef14fba0e1ec899c568bac1ee9bd513874b)) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +### Bug Fixes + +* add missing template option for React and Web Components setup commands ([d12545b](https://github.com/IgniteUI/igniteui-cli/commit/d12545b5293ea4a1528f31e90415f448b7dea798)) +* improve searchDocs error handling and sanitize query terms ([5b312cc](https://github.com/IgniteUI/igniteui-cli/commit/5b312cc21866dcbd14abfc6fc7451732c7677feb)) +* remove outdated requirements for Ignite UI CLI and build tool in React setup instructions ([331c47f](https://github.com/IgniteUI/igniteui-cli/commit/331c47f02f565f524787cc1ed69732bac8461922)) +* update command references in setup instructions for consistency ([f299af3](https://github.com/IgniteUI/igniteui-cli/commit/f299af3781fb783130139a12f2a0195fd22d5aa9)) + + +### Features + +* add api-mcp and related files ([2cc8239](https://github.com/IgniteUI/igniteui-cli/commit/2cc8239c9f8a3779ba794da24ab46fd0b90efe23)) +* add project setup guide and update tool descriptions ([8205645](https://github.com/IgniteUI/igniteui-cli/commit/82056451f1d326d92df7a60915fd2251e09f74da)) +* add publishConfig for public access in package.json ([7cf9f2e](https://github.com/IgniteUI/igniteui-cli/commit/7cf9f2e6ede2a5b438c41884c3acd5fb4397e4c7)) +* add setup guides for Angular, React, and Web Components; enhance build script for copying setup files ([307cf1d](https://github.com/IgniteUI/igniteui-cli/commit/307cf1d562d9b55cbe004c73f00c88b7634c7366)) +* add tool prefixes and titles, remove non-existent tool ([d54cc18](https://github.com/IgniteUI/igniteui-cli/commit/d54cc1894ebce50bf7885df176bd2d4973bc6b78)) +* Added igniteui-mcp project ([2f30b82](https://github.com/IgniteUI/igniteui-cli/commit/2f30b824702db94f9c17054d4ae180891e7cf7a5)) +* Enhance sorting documentation for WebComponents and add theming MCP guide ([1638527](https://github.com/IgniteUI/igniteui-cli/commit/163852717ba5d33c2982a22722ddfdd0fcb831e7)) +* include markdown files in package distribution ([a808c81](https://github.com/IgniteUI/igniteui-cli/commit/a808c8186d908f872edec6a64bc138a7f817ffa9)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* make framework input optional in project setup guide; add prompt for user input if not specified ([a2b268a](https://github.com/IgniteUI/igniteui-cli/commit/a2b268a6ec6dc48f58be8b2a00d64b89fcab41a2)) +* **mcp:** extracting build script ([ac22c9b](https://github.com/IgniteUI/igniteui-cli/commit/ac22c9bbddb3680ce7d38926960f18c70ae4de5b)) +* update MCP configuration instructions for global and local setups ([95fa3f5](https://github.com/IgniteUI/igniteui-cli/commit/95fa3f533c4d2e638e4f1ed268f35648975b8980)) +* update project setup guide description for clarity ([abb418e](https://github.com/IgniteUI/igniteui-cli/commit/abb418e5c6ffd4429870bca21896995773b5a595)) + + +### Reverts + +* Revert "chore: address copilot comments" ([9fe5a3a](https://github.com/IgniteUI/igniteui-cli/commit/9fe5a3ac65590d739796c4e9dcb474130bf52418)) + + + + + +# 14.10.0-alpha.3 (2026-03-25) + + +### Features + +* Api ref documantation added to the repo ([ce819a7](https://github.com/IgniteUI/igniteui-cli/commit/ce819a7eaf033f68405ebd157af24dc9f8f46f47)) +* update MCP configuration to use 'igniteui-cli@next' for command execution ([1c612ef](https://github.com/IgniteUI/igniteui-cli/commit/1c612ef14fba0e1ec899c568bac1ee9bd513874b)) + + + +# 14.10.0-alpha.1 (2026-03-25) + + +### Bug Fixes + +* add missing template option for React and Web Components setup commands ([d12545b](https://github.com/IgniteUI/igniteui-cli/commit/d12545b5293ea4a1528f31e90415f448b7dea798)) +* improve searchDocs error handling and sanitize query terms ([5b312cc](https://github.com/IgniteUI/igniteui-cli/commit/5b312cc21866dcbd14abfc6fc7451732c7677feb)) +* remove outdated requirements for Ignite UI CLI and build tool in React setup instructions ([331c47f](https://github.com/IgniteUI/igniteui-cli/commit/331c47f02f565f524787cc1ed69732bac8461922)) +* update command references in setup instructions for consistency ([f299af3](https://github.com/IgniteUI/igniteui-cli/commit/f299af3781fb783130139a12f2a0195fd22d5aa9)) + + +### Features + +* add api-mcp and related files ([2cc8239](https://github.com/IgniteUI/igniteui-cli/commit/2cc8239c9f8a3779ba794da24ab46fd0b90efe23)) +* add project setup guide and update tool descriptions ([8205645](https://github.com/IgniteUI/igniteui-cli/commit/82056451f1d326d92df7a60915fd2251e09f74da)) +* add publishConfig for public access in package.json ([7cf9f2e](https://github.com/IgniteUI/igniteui-cli/commit/7cf9f2e6ede2a5b438c41884c3acd5fb4397e4c7)) +* add setup guides for Angular, React, and Web Components; enhance build script for copying setup files ([307cf1d](https://github.com/IgniteUI/igniteui-cli/commit/307cf1d562d9b55cbe004c73f00c88b7634c7366)) +* add tool prefixes and titles, remove non-existent tool ([d54cc18](https://github.com/IgniteUI/igniteui-cli/commit/d54cc1894ebce50bf7885df176bd2d4973bc6b78)) +* Added igniteui-mcp project ([2f30b82](https://github.com/IgniteUI/igniteui-cli/commit/2f30b824702db94f9c17054d4ae180891e7cf7a5)) +* Enhance sorting documentation for WebComponents and add theming MCP guide ([1638527](https://github.com/IgniteUI/igniteui-cli/commit/163852717ba5d33c2982a22722ddfdd0fcb831e7)) +* include markdown files in package distribution ([a808c81](https://github.com/IgniteUI/igniteui-cli/commit/a808c8186d908f872edec6a64bc138a7f817ffa9)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* make framework input optional in project setup guide; add prompt for user input if not specified ([a2b268a](https://github.com/IgniteUI/igniteui-cli/commit/a2b268a6ec6dc48f58be8b2a00d64b89fcab41a2)) +* **mcp:** extracting build script ([ac22c9b](https://github.com/IgniteUI/igniteui-cli/commit/ac22c9bbddb3680ce7d38926960f18c70ae4de5b)) +* update MCP configuration instructions for global and local setups ([95fa3f5](https://github.com/IgniteUI/igniteui-cli/commit/95fa3f533c4d2e638e4f1ed268f35648975b8980)) +* update project setup guide description for clarity ([abb418e](https://github.com/IgniteUI/igniteui-cli/commit/abb418e5c6ffd4429870bca21896995773b5a595)) + + +### Reverts + +* Revert "chore: address copilot comments" ([9fe5a3a](https://github.com/IgniteUI/igniteui-cli/commit/9fe5a3ac65590d739796c4e9dcb474130bf52418)) + + + + + + +# 14.10.0-alpha.2 (2026-03-25) + + +### Bug Fixes + +* add missing template option for React and Web Components setup commands ([d12545b](https://github.com/IgniteUI/igniteui-cli/commit/d12545b5293ea4a1528f31e90415f448b7dea798)) +* improve searchDocs error handling and sanitize query terms ([5b312cc](https://github.com/IgniteUI/igniteui-cli/commit/5b312cc21866dcbd14abfc6fc7451732c7677feb)) +* remove outdated requirements for Ignite UI CLI and build tool in React setup instructions ([331c47f](https://github.com/IgniteUI/igniteui-cli/commit/331c47f02f565f524787cc1ed69732bac8461922)) +* update command references in setup instructions for consistency ([f299af3](https://github.com/IgniteUI/igniteui-cli/commit/f299af3781fb783130139a12f2a0195fd22d5aa9)) + + +### Features + +* add api-mcp and related files ([2cc8239](https://github.com/IgniteUI/igniteui-cli/commit/2cc8239c9f8a3779ba794da24ab46fd0b90efe23)) +* add project setup guide and update tool descriptions ([8205645](https://github.com/IgniteUI/igniteui-cli/commit/82056451f1d326d92df7a60915fd2251e09f74da)) +* add publishConfig for public access in package.json ([7cf9f2e](https://github.com/IgniteUI/igniteui-cli/commit/7cf9f2e6ede2a5b438c41884c3acd5fb4397e4c7)) +* add setup guides for Angular, React, and Web Components; enhance build script for copying setup files ([307cf1d](https://github.com/IgniteUI/igniteui-cli/commit/307cf1d562d9b55cbe004c73f00c88b7634c7366)) +* add tool prefixes and titles, remove non-existent tool ([d54cc18](https://github.com/IgniteUI/igniteui-cli/commit/d54cc1894ebce50bf7885df176bd2d4973bc6b78)) +* Added igniteui-mcp project ([2f30b82](https://github.com/IgniteUI/igniteui-cli/commit/2f30b824702db94f9c17054d4ae180891e7cf7a5)) +* Enhance sorting documentation for WebComponents and add theming MCP guide ([1638527](https://github.com/IgniteUI/igniteui-cli/commit/163852717ba5d33c2982a22722ddfdd0fcb831e7)) +* include markdown files in package distribution ([a808c81](https://github.com/IgniteUI/igniteui-cli/commit/a808c8186d908f872edec6a64bc138a7f817ffa9)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* make framework input optional in project setup guide; add prompt for user input if not specified ([a2b268a](https://github.com/IgniteUI/igniteui-cli/commit/a2b268a6ec6dc48f58be8b2a00d64b89fcab41a2)) +* **mcp:** extracting build script ([ac22c9b](https://github.com/IgniteUI/igniteui-cli/commit/ac22c9bbddb3680ce7d38926960f18c70ae4de5b)) +* update MCP configuration instructions for global and local setups ([95fa3f5](https://github.com/IgniteUI/igniteui-cli/commit/95fa3f533c4d2e638e4f1ed268f35648975b8980)) +* update project setup guide description for clarity ([abb418e](https://github.com/IgniteUI/igniteui-cli/commit/abb418e5c6ffd4429870bca21896995773b5a595)) + + +### Reverts + +* Revert "chore: address copilot comments" ([9fe5a3a](https://github.com/IgniteUI/igniteui-cli/commit/9fe5a3ac65590d739796c4e9dcb474130bf52418)) + + + + + +# 14.10.0-alpha.1 (2026-03-25) + + +### Bug Fixes + +* add missing template option for React and Web Components setup commands ([d12545b](https://github.com/IgniteUI/igniteui-cli/commit/d12545b5293ea4a1528f31e90415f448b7dea798)) +* improve searchDocs error handling and sanitize query terms ([5b312cc](https://github.com/IgniteUI/igniteui-cli/commit/5b312cc21866dcbd14abfc6fc7451732c7677feb)) +* remove outdated requirements for Ignite UI CLI and build tool in React setup instructions ([331c47f](https://github.com/IgniteUI/igniteui-cli/commit/331c47f02f565f524787cc1ed69732bac8461922)) +* update command references in setup instructions for consistency ([f299af3](https://github.com/IgniteUI/igniteui-cli/commit/f299af3781fb783130139a12f2a0195fd22d5aa9)) + + +### Features + +* add api-mcp and related files ([2cc8239](https://github.com/IgniteUI/igniteui-cli/commit/2cc8239c9f8a3779ba794da24ab46fd0b90efe23)) +* add project setup guide and update tool descriptions ([8205645](https://github.com/IgniteUI/igniteui-cli/commit/82056451f1d326d92df7a60915fd2251e09f74da)) +* add publishConfig for public access in package.json ([7cf9f2e](https://github.com/IgniteUI/igniteui-cli/commit/7cf9f2e6ede2a5b438c41884c3acd5fb4397e4c7)) +* add setup guides for Angular, React, and Web Components; enhance build script for copying setup files ([307cf1d](https://github.com/IgniteUI/igniteui-cli/commit/307cf1d562d9b55cbe004c73f00c88b7634c7366)) +* add tool prefixes and titles, remove non-existent tool ([d54cc18](https://github.com/IgniteUI/igniteui-cli/commit/d54cc1894ebce50bf7885df176bd2d4973bc6b78)) +* Added igniteui-mcp project ([2f30b82](https://github.com/IgniteUI/igniteui-cli/commit/2f30b824702db94f9c17054d4ae180891e7cf7a5)) +* Enhance sorting documentation for WebComponents and add theming MCP guide ([1638527](https://github.com/IgniteUI/igniteui-cli/commit/163852717ba5d33c2982a22722ddfdd0fcb831e7)) +* include markdown files in package distribution ([a808c81](https://github.com/IgniteUI/igniteui-cli/commit/a808c8186d908f872edec6a64bc138a7f817ffa9)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* make framework input optional in project setup guide; add prompt for user input if not specified ([a2b268a](https://github.com/IgniteUI/igniteui-cli/commit/a2b268a6ec6dc48f58be8b2a00d64b89fcab41a2)) +* **mcp:** extracting build script ([ac22c9b](https://github.com/IgniteUI/igniteui-cli/commit/ac22c9bbddb3680ce7d38926960f18c70ae4de5b)) +* update MCP configuration instructions for global and local setups ([95fa3f5](https://github.com/IgniteUI/igniteui-cli/commit/95fa3f533c4d2e638e4f1ed268f35648975b8980)) +* update project setup guide description for clarity ([abb418e](https://github.com/IgniteUI/igniteui-cli/commit/abb418e5c6ffd4429870bca21896995773b5a595)) + + +### Reverts + +* Revert "chore: address copilot comments" ([9fe5a3a](https://github.com/IgniteUI/igniteui-cli/commit/9fe5a3ac65590d739796c4e9dcb474130bf52418)) + + + + + +# 14.10.0-alpha.0 (2026-03-25) + + +### Features + +* add api-mcp and related files ([2cc8239](https://github.com/IgniteUI/igniteui-cli/commit/2cc8239c9f8a3779ba794da24ab46fd0b90efe23)) +* Added igniteui-mcp project ([2f30b82](https://github.com/IgniteUI/igniteui-cli/commit/2f30b824702db94f9c17054d4ae180891e7cf7a5)) +* Enhance sorting documentation for WebComponents and add theming MCP guide ([1638527](https://github.com/IgniteUI/igniteui-cli/commit/163852717ba5d33c2982a22722ddfdd0fcb831e7)) +* make @igniteui/mcp-server a workspace package ([cf48369](https://github.com/IgniteUI/igniteui-cli/commit/cf483695e01afeac2ee6d7da193c2ee2d2af375a)) +* **mcp:** extracting build script ([ac22c9b](https://github.com/IgniteUI/igniteui-cli/commit/ac22c9bbddb3680ce7d38926960f18c70ae4de5b)) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/CLAUDE.md b/packages/igniteui-mcp/igniteui-doc-mcp/CLAUDE.md new file mode 100644 index 000000000..979b7302e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/CLAUDE.md @@ -0,0 +1,258 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +This is the **Ignite UI Documentation MCP Server** — a Model Context Protocol server that provides AI assistants with tools to search and retrieve Ignite UI component documentation. The server loads compressed markdown docs at startup and exposes them via MCP tools such as `list_components`, `get_doc`, and `search_docs`. It includes documentation processing pipelines for Angular, React, WebComponents, and Blazor. + +## Project Structure + +``` +├── src/index.ts # MCP server entry point — dual-mode (remote or local SQLite) +├── src/providers/ +│ ├── DocsProvider.ts # DocsProvider interface (listComponents, getDoc, searchDocs) +│ ├── RemoteDocsProvider.ts # Remote mode — proxies to URL given via --remote +│ └── LocalDocsProvider.ts # Local mode — sql.js WASM SQLite with FTS4 +├── scripts/ +│ ├── build-db.ts # Build SQLite DB from compressed docs (better-sqlite3) +│ ├── export-angular-docs.ts # Export Angular docs from docfx (toc-driven, template expansion, include resolution, API URL resolution) +│ ├── inject-angular-docs.ts # Inject sample code into docs (replaces <code-view> with component source) +│ ├── compress-angular-docs.ts # LLM-based compression of docs (~50% size reduction, supports --batch mode) +│ ├── export-react-docs.ts # Export React docs from xplat gulp build (toc.json-driven, flatten hierarchy) +│ ├── inject-react-docs.ts # Inject React sample code (github-src based resolution, TSX files) +│ ├── compress-react-docs.ts # LLM-based compression with React-specific prompt (Igr prefix, supports --batch mode) +│ ├── export-wc-docs.ts # Export WebComponents docs from xplat gulp build (toc.json-driven, flatten hierarchy) +│ ├── inject-wc-docs.ts # Inject WC sample code (github-src based, HTML/TS/CSS files) +│ ├── compress-wc-docs.ts # LLM-based compression with WC-specific prompt (Igc prefix + Component suffix, supports --batch mode) +│ ├── export-blazor-docs.ts # Export Blazor docs from xplat gulp build (toc.json-driven, flatten hierarchy) +│ ├── inject-blazor-docs.ts # Inject Blazor sample code (github-src based, .razor/.razor.cs/.css files) +│ ├── compress-blazor-docs.ts # LLM-based compression with Blazor-specific prompt (Igb prefix, no suffix, supports --batch mode) +│ └── validate-docs.ts # LLM-as-Judge validation of compressed docs (platform-independent) +├── docs/ +│ ├── knowledgebase.md # Lessons learned and issues for cross-platform reference (32 entries) +│ ├── db.md # SQLite + FTS4 database integration (IMPLEMENTED) +│ ├── batch-compression.md # OpenAI Batch API for compression (IMPLEMENTED) +│ ├── incremental-processing.md # Plan: Incremental processing with diff-based pipeline (NOT YET IMPLEMENTED) +│ ├── progress.md # Implementation progress tracker +│ ├── impl_plan.md # Original implementation plan for code-view replacement +│ ├── prefix_fix.md # Plan for fixing component prefix issue +│ ├── toc_based_processing.md # Plan for toc.yml-driven file selection +│ ├── xplat-docs-architecture.md # Cross-platform docs architecture analysis (variable replacement, toc.json, apiMap) +│ ├── react-pipeline.md # React pipeline implementation plan +│ ├── wc-pipeline-plan.md # WebComponents pipeline implementation plan +│ └── blazor-pipeline-plan.md # Blazor pipeline implementation plan +├── angular/ # Git submodules +│ ├── igniteui-docfx/ # DocFX-based Angular documentation (en/jp/kr) +│ │ └── en/components/toc.yml # Table of contents — source of truth for which files to process +│ ├── igniteui-angular-samples/ # Angular sample apps for Ignite UI components +│ └── igniteui-angular-examples/ # Angular example projects +├── react/ +│ └── igniteui-react-examples/ # React example projects (git submodule) +├── webcomponents/ +│ └── igniteui-wc-examples/ # WebComponents example projects (git submodule) +├── blazor/ +│ └── igniteui-blazor-examples/ # Blazor example projects (git submodule) +├── common/ +│ └── igniteui-xplat-docs/ # Cross-platform docs source (React, Blazor, WC) +│ └── docfx/en/components/toc.json # Cross-platform toc with exclude arrays +├── dist/ +│ ├── docs_processing/angular/ # Intermediate output from export:angular +│ ├── docs_prepeared/angular/ # Output from inject:angular (docs with inline sample code) +│ ├── docs_final/angular/ # Final output from compress:angular (LLM-compressed docs) +│ └── validation_report_angular.json # Output from validate:angular +│ └── igniteui-docs.db # SQLite DB with FTS4 (built by build-db.ts) +└── dist/ # TypeScript compilation output (tsc) + pipeline data +``` + +## Build & Run + +```bash +npm install # install dependencies +npm run build:db # build SQLite database from compressed docs → dist/igniteui-docs.db +npm run build # compile TypeScript (tsc) → outputs to ./dist/ +npm start # run MCP server in local mode (default, uses bundled SQLite DB) +``` + +### Server Modes + +| Mode | Activation | Data Source | +|------|-----------|-------------| +| **Local** (default) | No flags needed | Bundled `dist/igniteui-docs.db` via sql.js | +| **Remote** | `--remote <url>` flag | Proxies to the given backend URL | + +```bash +# Local mode (default) +node dist/index.js + +# Remote mode via CLI flag +node dist/index.js --remote https://your-backend-url.com + +# Remote mode via env var (still needs --remote flag without URL) +IGNITEUI_MCP_DOCS_BACKEND_URL=https://your-backend-url.com node dist/index.js --remote + +# Custom DB path +DB_PATH=/path/to/igniteui-docs.db node dist/index.js + +# Enable debug logging +node dist/index.js --debug +``` + +Local mode requires `dist/igniteui-docs.db` to exist. Run the pipeline and `npm run build:db` first. + +### Database Build + +```bash +npm run build:db # full rebuild for all frameworks +npm run build:db -- --framework react # rebuild only react rows +``` + +The `build:db` step reads `dist/docs_final/<framework>/` and `dist/docs_prepeared/<framework>/`, and produces `dist/igniteui-docs.db`. It must run after compression and before starting the MCP server. + +## Angular Documentation Pipeline + +```bash +npm run export:angular # export docs from docfx submodule → dist/docs_processing/angular/ +npm run inject:angular # inject sample code into exported docs → dist/docs_prepeared/angular/ +npm run compress:angular # LLM-compress docs → dist/docs_final/angular/ +npm run validate:angular # LLM-as-Judge quality check → dist/validation_report_angular.json +npm run pipeline:angular # run all steps: clear → export → inject → compress +npm run clear # remove the entire dist/ directory +npm run clear:angular # remove only Angular output dirs (docs_processing, docs_prepeared, docs_final) +npm run clear:react # remove only React output dirs +npm run clear:blazor # remove only Blazor output dirs +npm run clear:webcomponents # remove only WebComponents output dirs +``` + +**`export:angular`** (`scripts/export-angular-docs.ts`): Parses `toc.yml` to get the definitive list of published documentation files (only files referenced in toc are processed). Expands grid templates (grid, treeGrid, hierarchicalGrid, pivotGrid) by resolving `@@include()` directives and `@@if` conditionals. Injects toc metadata (`_tocName`, `_premium`) into each file's frontmatter. Replaces API documentation URL placeholders (`{environment:angularApiUrl}`, `{environment:sassApiUrl}`, `{environment:dvApiBaseUrl}`) with production URLs loaded from `environment.json`. Does NOT replace demo base URLs — those are handled by the inject step. Writes processed files to `dist/docs_processing/angular/`. Accepts an optional language argument (defaults to `en`). + +**`inject:angular`** (`scripts/inject-angular-docs.ts`): Processes the exported docs, replacing `<code-view>` elements with actual Angular component source code. Uses two resolution strategies: +- **Route-based** (`demosBaseUrl`, `lobDemosBaseUrl`, `crmDemoBaseUrl`): Parses `app.routes.ts` from `igniteui-angular-samples` to map `iframe-src` paths to component files (`.ts`, `.html`, `.scss`/`.css`) +- **File-based** (`dvDemosBaseUrl`): Uses the `github-src` attribute to locate samples directly under `igniteui-angular-examples/samples/{github-src}/src/`, inlining `app.module.ts`, `app.component.ts`, `.html`, and `.scss` + +**`compress:angular`** (`scripts/compress-angular-docs.ts`): Sends each doc through an LLM to reduce size ~50% while preserving structure, code examples, and API references. Uses the OpenAI SDK (reads `OPENAI_API_KEY` from `.env`). The system prompt is Angular-specific (uses `Igx` prefix). CLI args: `--model`, `--api-base`, `--min-size`, `--dry-run`, `--delay`, `--resume-from`, `--only`, `--batch submit|poll|retry`. Validates output has frontmatter (component, keywords, summary, premium) and markdown headers, retrying once on failure. Writes `_compression_stats.json` alongside output. Batch mode uses OpenAI's Batch API for 50% cost reduction — submits all files as a single JSONL batch, polls for completion, and downloads results. + +Key compression prompt rules (shared across all platforms): +- Uses platform-specific prefix (`Igx` for Angular, `Igr` for React, `Igc` for WC, `Igb` for Blazor) +- Preserves `_premium` metadata from input as `premium: true` in output +- Does NOT merge separate code blocks (TS, HTML, SCSS) into inline templates +- Does NOT hallucinate content for stub/TODO-only documents +- Does NOT merge separate sections covering different component types/sub-types (e.g. Stacked Area Chart vs Stacked Spline Area Chart each keep their own section and code example) +- Preserves heading levels exactly (## stays ##, ### stays ###) — no demoting, promoting, or combining headers +- Data-heavy files: keep only 1-2 representative items to show the data shape +- Shows progress percentage and token count in console output: `[42%] grid.md (55.3KB)... -> 28.1KB (49% reduction) [7234 tokens]` +- Uses `js-tiktoken` (o200k_base encoding) to count tokens per compressed file +- Writes `_compression_log.csv` (file, original_kb, compressed_kb, reduction_pct, tokens) alongside output +- Writes `total_tokens` to `_compression_stats.json` + +**`validate:angular`** (`scripts/validate-docs.ts`): Platform-independent LLM-as-Judge validation (also used by `validate:react`). Samples compressed docs and scores them against originals on 4 dimensions (completeness, accuracy, hallucination, structure) using GPT-5.4. Uses OpenAI structured output (`zodTextFormat` + `client.responses.parse()`) for guaranteed valid JSON — no manual parsing. CLI args: `--input` (required, compressed docs dir), `--original` (auto-inferred from input path), `--output` (default: `dist/validation_report_<platform>.json`), `--model`, `--sample`, `--delay`, `--only`. Reports are named per-platform (e.g. `validation_report_angular.json`). + +## React Documentation Pipeline + +```bash +npm run build:xplat-react # run xplat gulp build for React → common/igniteui-xplat-docs/dist/React/ +npm run export:react # flatten & enrich built docs → dist/docs_processing/react/ +npm run inject:react # inject React sample code → dist/docs_prepeared/react/ +npm run compress:react # LLM-compress docs → dist/docs_final/react/ +npm run validate:react # LLM-as-Judge quality check +npm run pipeline:react # run all steps: clear → build → export → inject → compress +``` + +**`export:react`** (`scripts/export-react-docs.ts`): Runs the xplat gulp build (`buildReact`) which handles variable replacement, platform filtering, code fence filtering, and API link resolution. Then parses `toc.json` (filtering entries where `"React"` is NOT in the `exclude` array), flattens hierarchical build output to single-level filenames (e.g., `grids/grid/editing.md` → `grid-editing.md`), and injects toc metadata (`_tocName`, `_premium`). Use `--skip-build` to skip the gulp build step if already built. + +**`inject:react`** (`scripts/inject-react-docs.ts`): Replaces `<code-view>` tags with actual React sample code from `react/igniteui-react-examples/samples/{github-src}/src/`. Reads `.tsx`, `.ts`, `.css`, `.scss` files from sample directories. Uses a single resolution strategy based on the `github-src` attribute (simpler than Angular's route-based + file-based dual strategy). Includes a post-inject size report flagging files >300KB. + +**`compress:react`** (`scripts/compress-react-docs.ts`): Same architecture as Angular compression but with a React-specific system prompt: uses `Igr` prefix (e.g., IgrGrid, IgrButton), no Component/Directive suffixes, TSX code language references. Includes token counting via `js-tiktoken`. All CLI flags identical to Angular: `--model`, `--api-base`, `--min-size`, `--dry-run`, `--delay`, `--resume-from`, `--only`, `--batch submit|poll|retry`. + +## WebComponents Documentation Pipeline + +```bash +npm run build:xplat-wc # run xplat gulp build for WebComponents → common/igniteui-xplat-docs/dist/WebComponents/ +npm run export:webcomponents # flatten & enrich built docs → dist/docs_processing/webcomponents/ +npm run inject:webcomponents # inject WC sample code → dist/docs_prepeared/webcomponents/ +npm run compress:webcomponents # LLM-compress docs → dist/docs_final/webcomponents/ +npm run validate:webcomponents # LLM-as-Judge quality check +npm run pipeline:webcomponents # run all steps: clear → build → export → inject → compress +``` + +**`export:webcomponents`** (`scripts/export-wc-docs.ts`): Identical architecture to `export:react` — runs the xplat gulp build (`buildWC`), parses `toc.json` (filtering entries where `"WebComponents"` is NOT in the `exclude` array), flattens hierarchical build output, and injects toc metadata. Use `--skip-build` to skip the gulp build step if already built. + +**`inject:webcomponents`** (`scripts/inject-wc-docs.ts`): Replaces `<code-view>` tags with actual WebComponents sample code from `webcomponents/igniteui-wc-examples/samples/{github-src}/src/`. Reads `.html`, `.ts`, `.css` files from sample directories (not `.tsx` like React). Uses the same `github-src` attribute resolution strategy as React. + +**`compress:webcomponents`** (`scripts/compress-wc-docs.ts`): Same architecture as React/Angular compression but with a WC-specific system prompt: uses `Igc` prefix with `Component` suffix (e.g., IgcGridComponent, IgcButtonComponent), HTML + TypeScript as separate code blocks, `<!-- -->` comments in HTML and `//` comments in TypeScript. Includes token counting via `js-tiktoken`. All CLI flags identical: `--model`, `--api-base`, `--min-size`, `--dry-run`, `--delay`, `--resume-from`, `--only`, `--batch submit|poll|retry`. + +## Blazor Documentation Pipeline + +```bash +npm run build:xplat-blazor # run xplat gulp build for Blazor → common/igniteui-xplat-docs/dist/Blazor/ +npm run export:blazor # flatten & enrich built docs → dist/docs_processing/blazor/ +npm run inject:blazor # inject Blazor sample code → dist/docs_prepeared/blazor/ +npm run compress:blazor # LLM-compress docs → dist/docs_final/blazor/ +npm run validate:blazor # LLM-as-Judge quality check +npm run pipeline:blazor # run all steps: clear → build → export → inject → compress +``` + +**`export:blazor`** (`scripts/export-blazor-docs.ts`): Identical architecture to `export:react` — runs the xplat gulp build (`buildBlazor`), parses `toc.json` (filtering entries where `"Blazor"` is NOT in the `exclude` array), flattens hierarchical build output, and injects toc metadata. Use `--skip-build` to skip the gulp build step if already built. + +**`inject:blazor`** (`scripts/inject-blazor-docs.ts`): Replaces `<code-view>` tags with actual Blazor sample code from `blazor/igniteui-blazor-examples/samples/{github-src}/src/`. Reads `.razor`, `.razor.cs`, `.cs`, `.razor.css`, `.css` files from sample directories. Skips `_Imports.razor`, `.csproj`, `Program.cs`, and `wwwroot/` contents. Uses the same `github-src` attribute resolution strategy as React/WC. + +**`compress:blazor`** (`scripts/compress-blazor-docs.ts`): Same architecture as React/Angular/WC compression but with a Blazor-specific system prompt: uses `Igb` prefix with no suffix (e.g., IgbGrid, IgbButton, IgbDatePicker), Razor markup + C# as separate code blocks, `@* comment *@` in Razor blocks and `//` in C# blocks. Includes token counting via `js-tiktoken`. All CLI flags identical: `--model`, `--api-base`, `--min-size`, `--dry-run`, `--delay`, `--resume-from`, `--only`, `--batch submit|poll|retry`. + +## Architecture + +**MCP Server** (`src/index.ts`): Unified server using `@modelcontextprotocol/sdk` with stdio transport. +- **Dual-mode documentation**: Uses a `DocsProvider` interface (`src/providers/DocsProvider.ts`) with two implementations: + - `LocalDocsProvider` — loads `dist/igniteui-docs.db` into memory via `sql.js` WASM SQLite, queries with FTS4 (default) + - `RemoteDocsProvider` — proxies to URL provided via `--remote <url>` flag + - Mode selected at startup: local by default, `--remote <url>` for remote. `--debug` enables request logging. +- GitHub API tools use `octokit` (requires `GITHUB_TOKEN` env var) +- CLI scaffolding tools use `igniteui-cli` via `npx` +- Six registered tools: + - `list_components` — list/filter docs by `framework` (required) and optional `filter` keyword + - `get_doc` — retrieve full markdown content by `framework` (required) + `name` (required, without `.md`) + - `search_docs` — full-text search by `framework` (required) + `query` (required), top 20 results with snippets + - `search_api` — discover API entries by keyword or partial component name + - `get_api_reference` — retrieve full API details for an exact component or class name + - `get_project_setup_guide` — return setup guides for creating a new Ignite UI project (CLI docs for Angular/React/WC, dotnet + NuGet guides for Blazor) + +**Build DB** (`scripts/build-db.ts`): Reads compressed docs from `dist/docs_final/<framework>/`, looks up `_tocName` from `dist/docs_prepeared/<framework>/`, and produces `dist/igniteui-docs.db` using `better-sqlite3`. Supports full rebuild or per-framework rebuild via `--framework` flag. DB schema: `docs` table + `docs_fts` FTS4 virtual table with external content, porter tokenizer, and prefix indexes. + +## Key Dependencies + +- `@modelcontextprotocol/sdk` — MCP protocol implementation +- `octokit` — GitHub API client used by legacy integration work in this repo +- `dotenv` — env file loading (GITHUB_TOKEN, IGNITEUI_MCP_DOCS_BACKEND_URL) +- `sql.js` — Pure WASM SQLite for the MCP server (loads .db into memory, cross-platform) +- `better-sqlite3` — Native SQLite for build-db.ts (dev dependency, fast bulk inserts) +- `openai` — OpenAI API client (used by compress scripts) +- `js-tiktoken` — Token counting for compressed docs (o200k_base encoding) +- `js-yaml` — YAML parsing for toc.yml processing +- `zod` — input schema validation for tool parameters +- `tsx` — dev dependency for running TypeScript scripts directly +- TypeScript targeting ES2022 with Node16 module resolution + +## Important References + +- `docs/knowledgebase.md` — Lessons learned and issues encountered across all platform pipelines (32 entries: Angular 1-16, React 17-21, WebComponents 22-26, Blazor/cross-platform 27-32). +- `docs/progress.md` — Implementation progress tracker. Shows which features are done and which are planned. +- `docs/xplat-docs-architecture.md` — Architecture analysis of the shared xplat build system (variable replacement, platform filtering, toc.json, apiMap). +- `docs/react-pipeline.md` — React pipeline implementation plan. +- `docs/wc-pipeline-plan.md` — WebComponents pipeline implementation plan. +- `docs/blazor-pipeline-plan.md` — Blazor pipeline implementation plan. +- `docs/db.md` — SQLite + FTS4 database integration (implemented). Covers schema, `build-db.ts` script, and MCP server architecture. +- `docs/batch-compression.md` — OpenAI Batch API integration (implemented). Adds `--batch submit|poll|retry` to all 4 compress scripts for 50% cost reduction and faster processing. +- `docs/incremental-processing.md` — Plan for incremental processing (not yet implemented). Covers `docs_baseline/`, `diff-docs.ts`, and `--manifest` flag. +- `angular/igniteui-docfx/en/components/toc.yml` — Source of truth for which Angular docs to process. Contains `name`, `premium`, `new`, `updated` metadata per entry. +- `common/igniteui-xplat-docs/docfx/en/components/toc.json` — Source of truth for React, WebComponents, and Blazor docs. Uses `exclude` arrays for platform filtering. +- `angular/igniteui-docfx/en/environment.json` — Production URLs for API documentation links. The `.production` section provides values for `angularApiUrl`, `sassApiUrl`, `dvApiBaseUrl`. + +## Submodule Documentation Build (igniteui-docfx) + +```bash +cd angular/igniteui-docfx +npm install # also runs dotnet tool restore +npm start -- --lang en # dev server with live reload +npm run build -- --lang en # static build +npm run spellcheck # cspell +npm run lint:md # markdownlint +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md b/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md new file mode 100644 index 000000000..d18040a68 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md @@ -0,0 +1,610 @@ +# igniteui-doc-mcp + +MCP server that serves pre-compressed Ignite UI component documentation via full-text search. Supports two modes: **remote** (proxies to a backend API) and **local** (bundled SQLite database via sql.js). Includes multi-step pipelines for processing raw documentation into optimized, LLM-friendly markdown for Angular, React, WebComponents, and Blazor. + +## Setup + +```bash +cd packages/igniteui-mcp/igniteui-doc-mcp +git submodule update --init --recursive +npm install +``` + +Create a `.env` file with your OpenAI API key (required for compress and validate steps): + +``` +OPENAI_API_KEY=sk-... +``` + +### Building the Database +The MCP server uses a SQLite database with FTS4 full-text search to serve documentation. The database is built from the compressed markdown files in `dist/docs_final/` using the `build-db.ts` script. + +```bash +npm run build:db +``` + +### Building the API markdown +The repository already tracks the required documentation and source repositories as git submodules. A fresh clone still needs `git submodule update --init --recursive` to materialize them locally. + +Required submodules for local API markdown generation include: +- `angular/igniteui-angular` +- `webcomponents/igniteui-webcomponents` + +Before using the MCP server from a source checkout, generate the local API markdowns: + +```bash +npm run build:docs:all +``` + +This step builds the Angular and Web Components API markdown used by the local MCP API tools. If you skip it, API lookups may be incomplete or unavailable even if the server itself builds successfully. + +If you want to refresh submodules to newer upstream commits, run: + +```bash +git submodule update --remote --merge +``` + +### Building the MCP Server +Compile the TypeScript source code for the MCP server: + +```bash +npm run build +``` + +### Running the MCP Server + +```bash +# Local mode (default) — uses bundled SQLite database +node dist/index.js + +# Remote mode — proxies to a backend API +node dist/index.js --remote https://your-backend-url.com + +# Remote mode via env var +IGNITEUI_MCP_DOCS_BACKEND_URL=https://your-backend-url.com node dist/index.js --remote + +# Custom DB path for local mode +DB_PATH=/path/to/igniteui-docs.db node dist/index.js + +# Enable debug logging +node dist/index.js --debug +``` + +Local mode requires `dist/igniteui-docs.db`. Run the pipeline and `npm run build:db` to generate it. + +### Configuring MCP Clients + +To use the server with an MCP client (VS Code, Claude Desktop, Cursor, etc.), add it to your MCP configuration file. + +**VS Code** (`.vscode/mcp.json`): +```json +{ + "servers": { + "igniteui": { + "type": "stdio", + "command": "node", + "args": ["/absolute/path/to/igniteui-doc-mcp/dist/index.js"] + } + } +} +``` + +**Claude Desktop** (`claude_desktop_config.json`): +```json +{ + "mcpServers": { + "igniteui": { + "command": "node", + "args": ["/absolute/path/to/igniteui-doc-mcp/dist/index.js"] + } + } +} +``` + +**With custom DB path** (any client — add `env` block): +```json +{ + "command": "node", + "args": ["/absolute/path/to/igniteui-doc-mcp/dist/index.js"], + "env": { + "DB_PATH": "/absolute/path/to/igniteui-docs.db" + } +} +``` + +**With remote backend** (any client): +```json +{ + "command": "node", + "args": ["/absolute/path/to/igniteui-doc-mcp/dist/index.js", "--remote", "https://your-backend-url.com"] +} +``` + +> **Note:** The server uses local mode by default — fully self-contained with no backend API or network access needed. The SQLite database (`db/igniteui-docs.db`) is checked into git, so after `npm run build` it is copied to `dist/` and ready to use. + +## Pipeline Overview + +Each platform (Angular, React, WebComponents, Blazor) has an **incremental pipeline** that only recompresses docs that actually changed, saving LLM API costs and time: + +``` +export → inject → diff → compress (changed only) → update baseline → build:db +``` + +| Step | Input | Output | Requires API | +|------|-------|--------|:---:| +| Export | Source docs (docfx/xplat) | `dist/docs_processing/<platform>/` | No | +| Inject | `dist/docs_processing/<platform>/` | `dist/docs_prepeared/<platform>/` | No | +| Diff | `dist/docs_prepeared/<platform>/` vs `docs_baseline/<platform>/` | `dist/diff-manifest.json` | No | +| Compress | `dist/docs_prepeared/<platform>/` (changed only) | `dist/docs_final/<platform>/` | Yes | +| Update Baseline | `dist/docs_prepeared/<platform>/` | `docs_baseline/<platform>/` | No | +| Validate | `dist/docs_prepeared/` + `dist/docs_final/` | `dist/validation_report_<platform>.json` | Yes | +| Build DB | `dist/docs_final/` + `dist/docs_prepeared/` | `dist/igniteui-docs.db` | No | + +The **diff** step compares the fresh inject output against a tracked baseline (`docs_baseline/`) using SHA-256 content hashes (with line-ending normalization for cross-platform consistency). Only files classified as `changed` or `added` are sent to the compress step. Deleted files are removed from the output directory. Unchanged files are skipped entirely. + +**Export** — Parses the table of contents (Angular: `toc.yml`, others: `toc.json`) to get the definitive list of published docs. For React, WebComponents, and Blazor it first runs the xplat gulp build which handles variable replacement, platform filtering, and API link resolution. Flattens hierarchical directory output into single-level filenames (e.g. `grids/grid/editing.md` → `grid-editing.md`) and injects toc metadata (`_tocName`, `_premium`) into each file's frontmatter. + +**Inject** — Replaces `<code-view>` HTML tags with actual component source code from the platform's examples repository. Resolves samples via the `github-src` attribute. Includes a post-inject data trimming step that keeps only 3 representative items from large data arrays and replaces the rest with `// ... N more items`, preventing individual files from exceeding 300KB. + +**Compress** — Sends each doc through an LLM with a platform-specific system prompt to reduce size by ~50% while preserving structure, code examples, and API references. Each platform's prompt specifies the correct component prefix (`Igx`/`Igr`/`Igc`/`Igb`), naming conventions, code block languages, and comment syntax. Counts tokens per file via `js-tiktoken` and writes `_compression_log.csv` and `_compression_stats.json` alongside output. When run with `--manifest`, only processes files listed as changed or added. + +**Update Baseline** — Copies successfully compressed prepared docs to `docs_baseline/<platform>/` and removes deleted files. This tracked baseline enables the diff step on subsequent runs. On the first run (or with `--full`), all prepared files are copied. + +**Validate** — LLM-as-Judge evaluation that samples compressed docs and scores them against the originals on 4 dimensions: completeness, accuracy, hallucination, and structure. Uses OpenAI structured output for guaranteed valid JSON responses. + +### Run Full Pipeline + +The default pipeline is **incremental** — it only compresses docs that changed since the last run: + +```bash +npm run pipeline:angular +npm run pipeline:react +npm run pipeline:webcomponents +npm run pipeline:blazor +``` + +To force a **full rebuild** (e.g. after prompt changes or model upgrades), use the `:full` variant which skips the diff step and reprocesses everything: + +```bash +npm run pipeline:angular:full +npm run pipeline:react:full +npm run pipeline:webcomponents:full +npm run pipeline:blazor:full +``` + +### Run Individual Steps + +```bash +# Angular +npm run export:angular # parse toc.yml, expand grid templates, inject metadata +npm run inject:angular # replace <code-view> tags with TS/HTML/SCSS source code +npm run diff:angular # compare against baseline, output diff-manifest.json +npm run compress:angular # LLM-compress docs (~50% reduction, Igx prefix) +npm run update-baseline:angular # sync baseline with freshly processed docs +npm run validate:angular # LLM-as-Judge quality scoring + +# Blazor +npm run build:xplat-blazor # run xplat gulp build for Blazor +npm run export:blazor # flatten built docs, filter by toc.json, inject metadata +npm run inject:blazor # replace <code-view> tags with Razor/C#/CSS source code +npm run diff:blazor # compare against baseline, output diff-manifest.json +npm run compress:blazor # LLM-compress docs (~50% reduction, Igb prefix) +npm run update-baseline:blazor # sync baseline with freshly processed docs +npm run validate:blazor # LLM-as-Judge quality scoring + +# React +npm run build:xplat-react # run xplat gulp build for React +npm run export:react # flatten built docs, filter by toc.json, inject metadata +npm run inject:react # replace <code-view> tags with TSX/CSS source code +npm run diff:react # compare against baseline, output diff-manifest.json +npm run compress:react # LLM-compress docs (~50% reduction, Igr prefix) +npm run update-baseline:react # sync baseline with freshly processed docs +npm run validate:react # LLM-as-Judge quality scoring + +# WebComponents +npm run build:xplat-wc # run xplat gulp build for WebComponents +npm run export:webcomponents # flatten built docs, filter by toc.json, inject metadata +npm run inject:webcomponents # replace <code-view> tags with HTML/TS/CSS source code +npm run diff:webcomponents # compare against baseline, output diff-manifest.json +npm run compress:webcomponents # LLM-compress docs (~50% reduction, Igc prefix) +npm run update-baseline:webcomponents # sync baseline with freshly processed docs +npm run validate:webcomponents # LLM-as-Judge quality scoring +``` + +## Scripts Reference + +### export-angular-docs.ts + +Reads `toc.yml` to determine which files to process, expands grid templates, and copies docs with metadata to the processing directory. + +```bash +npm run export:angular +# or directly: +npx tsx scripts/export-angular-docs.ts [lang] +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `[lang]` | Language code (positional, first arg) | `en` | + +### inject-angular-docs.ts + +Replaces `<code-view>` tags in exported docs with actual Angular component source code (TypeScript, HTML, SCSS). + +```bash +npm run inject:angular +# or directly: +npx tsx scripts/inject-angular-docs.ts +``` + +No CLI parameters. + +### compress-angular-docs.ts / compress-react-docs.ts / compress-wc-docs.ts / compress-blazor-docs.ts + +Uses an LLM to compress prepared docs into concise, structured markdown. Each script has a platform-specific system prompt (Angular uses `Igx` prefix, React uses `Igr`, WebComponents uses `Igc` + `Component` suffix, Blazor uses `Igb`). All compress scripts count tokens per file using `js-tiktoken` (o200k_base encoding). Requires `OPENAI_API_KEY` in `.env`. + +```bash +npm run compress:angular +npm run compress:react +npm run compress:webcomponents +npm run compress:blazor +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `--model <name>` | OpenAI model to use | `gpt-5.4-mini` | +| `--api-base <url>` | Custom OpenAI API base URL | OpenAI default | +| `--min-size <kb>` | Skip files smaller than this (KB) | `0` | +| `--delay <seconds>` | Delay between API calls | `0.5` | +| `--dry-run` | Show what would be processed without calling the API | off | +| `--resume-from <file>` | Continue processing from a specific file (e.g. `grid.md`) | none | +| `--only <file>` | Process a single file only (e.g. `button.md`) | none | +| `--batch submit\|poll\|retry` | Use OpenAI Batch API (50% cheaper, async) | off (sequential) | +| `--manifest <path>` | Diff manifest JSON — only compress changed/added files | none (process all) | + +**Output files** (written to `dist/docs_final/<platform>/`): +- Compressed `.md` files +- `_compression_stats.json` — aggregate stats including `total_tokens` +- `_compression_log.csv` — per-file log with columns: `file,original_kb,compressed_kb,reduction_pct,tokens` +- `_batch_state.json` — batch mode state (batch ID, status, failed/invalid files) +- `_batch_input.jsonl` — batch mode JSONL input file + +**Examples:** + +```bash +# Process only button.md +npm run compress:angular -- --only button.md + +# Resume from grid.md after a failure +npm run compress:angular -- --resume-from grid.md + +# Dry run with a different model +npm run compress:angular -- --model gpt-5.1 --dry-run + +# Skip small files +npm run compress:angular -- --min-size 2 + +# Batch mode (50% cost reduction via OpenAI Batch API) +npm run compress:react -- --batch submit # Step 1: upload & create batch +npm run compress:react -- --batch poll # Step 2: poll, download & validate results +npm run compress:react -- --batch retry # Step 3: retry failed/invalid files (optional) + +# Batch with filters +npm run compress:react -- --batch submit --only grid.md --model gpt-5.4-mini + +# Incremental mode (only compress changed files from diff manifest) +npm run compress:angular -- --manifest dist/diff-manifest.json +``` + +### diff-docs.ts + +Compares freshly prepared docs (`dist/docs_prepeared/<platform>/`) against the tracked baseline (`docs_baseline/<platform>/`) using SHA-256 content hashes. Normalizes line endings to `\n` before hashing for cross-platform consistency (Windows CRLF vs Linux LF). Outputs a JSON manifest classifying each file as changed, added, deleted, or unchanged. + +```bash +npm run diff:angular +# or directly: +npx tsx scripts/diff-docs.ts --framework angular +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `--framework <name>` | **(Required)** Platform to diff (`angular`, `react`, `blazor`, `webcomponents`) | none | + +**Output:** `dist/diff-manifest.json` + +```json +{ + "framework": "angular", + "changed": ["grid.md", "button.md"], + "added": ["new-component.md"], + "deleted": ["deprecated-component.md"], + "unchanged": ["accordion.md", "action-strip.md", "..."] +} +``` + +When `docs_baseline/<platform>/` doesn't exist (first run), all files are classified as `added`. + +### update-baseline.ts + +After successful compression, updates the tracked baseline by copying changed/added files from `dist/docs_prepeared/<platform>/` to `docs_baseline/<platform>/` and removing deleted files. + +```bash +npm run update-baseline:angular +# or directly: +npx tsx scripts/update-baseline.ts --framework angular --manifest dist/diff-manifest.json +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `--framework <name>` | **(Required)** Platform to update | none | +| `--manifest <path>` | Path to diff manifest JSON | none | +| `--full` | Copy ALL prepared files (ignores manifest, for bootstrap/force rebuild) | off | + +Either `--manifest` or `--full` is required. + +### validate-docs.ts + +LLM-as-Judge validation that scores compressed docs against their originals on completeness, accuracy, hallucination, and structure quality. Platform-independent — pass the input directory as a parameter. Requires `OPENAI_API_KEY` in `.env`. + +```bash +npm run validate:angular +# or directly: +npx tsx --env-file=.env scripts/validate-docs.ts --input ./dist/docs_final/angular [options] +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `--input <dir>` | **(Required)** Path to compressed docs directory | none | +| `--original <dir>` | Path to original (pre-compress) docs directory | Inferred by replacing `docs_final` with `docs_prepeared` in `--input` | +| `--output <path>` | Path for the JSON report file | `dist/validation_report_<platform>.json` | +| `--model <name>` | OpenAI model for judging | `gpt-5.4` | +| `--api-base <url>` | Custom OpenAI API base URL | OpenAI default | +| `--sample <count>` | Number of files to validate (stratified by size) | `10` | +| `--delay <seconds>` | Delay between API calls | `1` | +| `--only <file>` | Validate a single file only (e.g. `button.md`) | none | + +**Examples:** + +```bash +# Validate 20 random files +npm run validate:angular -- --sample 20 + +# Validate a specific file +npm run validate:angular -- --only button.md + +# Validate all files +npm run validate:angular -- --sample 9999 +``` + +Output is saved to `dist/validation_report_angular.json` (platform derived from `--input` path). + +### build-db.ts + +Builds a SQLite database with FTS4 full-text search from compressed docs. Reads `dist/docs_final/<framework>/` for doc content and `dist/docs_prepeared/<framework>/` for `_tocName` metadata. Produces `dist/igniteui-docs.db` (~20MB for ~1,200 docs). + +```bash +npm run build:db +# or directly: +npx tsx scripts/build-db.ts [options] +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `--framework <name>` | Rebuild only one framework (`angular`, `react`, `blazor`, `webcomponents`) | all frameworks | + +Full rebuild drops and recreates all tables. Per-framework rebuild deletes only that framework's rows and reinserts them. + +**Examples:** + +```bash +# Full rebuild for all frameworks +npm run build:db + +# Rebuild only react rows (preserves other frameworks) +npm run build:db -- --framework react +``` + +## Cleanup Scripts + +```bash +npm run clear # Delete entire dist/ directory +npm run clear:build # Delete only working dirs (docs_processing/ + docs_prepeared/), preserves docs_final/ and DB +npm run clear:angular # Delete all Angular build artifacts (docs_processing, docs_prepeared, docs_final) +npm run clear:react # Delete only React build artifacts +npm run clear:blazor # Delete only Blazor build artifacts +npm run clear:webcomponents # Delete only WebComponents build artifacts +``` + +`clear:build` is used by the incremental pipeline — it clears the working directories while preserving `dist/docs_final/` (needed for unchanged files) and `dist/igniteui-docs.db`. + +Per-platform clear removes the platform subdirectory from `docs_processing/`, `docs_prepeared/`, and `docs_final/`. Use these for a full rebuild of a single platform. + +## API Reference Documentation + +The MCP server provides API reference lookup via the `get_api_reference` and `search_api` tools. API docs are generated from framework submodules using TypeDoc and stored in `docs/<framework>/`. + +Each framework uses one of two source strategies: + +| Framework | Strategy | Source | Output | +|-----------|----------|--------|--------| +| Angular | `markdown-index` | `angular/igniteui-angular` (TypeDoc → markdown) | `docs/angular/api/*.md` + `index.json` | +| React | `typedoc-json` | Pre-built TypeDoc JSON model | `docs/react/igniteui-react.json` | +| Web Components | `markdown-index` | `webcomponents/igniteui-webcomponents` (TypeDoc → markdown) | `docs/webcomponents/api/*.md` + `index.json` | +| Blazor | — | Not yet supported | — | + +### Building API Docs + +```bash +npm run build:docs:angular # Angular: TypeDoc → markdown + search index +npm run build:docs:webcomponents # Web Components: build lib → TypeDoc → markdown + search index +npm run build:docs:all # Build both Angular and Web Components +``` + +Each `build:docs:<platform>` script: +1. Initializes the required git submodule (`git submodule update --init`) +2. Compiles the MCP server TypeScript (`npm run build`) +3. Runs `scripts/build-docs.mjs <platform>` which: + - Checks the submodule is built (for Web Components, runs `npm install && npm run build:publish` if needed) + - Runs TypeDoc with the config from `typedoc/<platform>.typedoc.json` + - Generates markdown files in `docs/<platform>/api/` + - Builds a search index (`index.json`) with component names, types, keywords, and summaries + +**React** uses a pre-built TypeDoc JSON model (`docs/react/igniteui-react.json`) that is checked into git. It does not need a `build:docs` step — the JSON is parsed at runtime by `ReactJsonParser`. + +### Rebuilding After Upstream Changes + +When the upstream Angular or Web Components library releases a new version: + +1. Update the submodule to the new version: + ```bash + cd angular/igniteui-angular # or webcomponents/igniteui-webcomponents + git fetch && git checkout <new-tag> + cd ../.. + ``` + +2. Rebuild the API docs: + ```bash + npm run build:docs:angular # or build:docs:webcomponents + ``` + +3. Commit the updated `docs/` output and submodule reference. + +### Web Components First-Time Build + +The Web Components submodule requires a one-time library build before TypeDoc can generate docs. The `build-docs.mjs` script handles this automatically: + +1. If `dist/index.d.ts` is missing, it runs `npm install && npm run build:publish` +2. After TypeDoc completes, it cleans up `node_modules` if it installed them +3. Subsequent runs skip the build step if `dist/index.d.ts` exists + +If the automatic build fails, build manually: + +```bash +cd webcomponents/igniteui-webcomponents +npm install && npm run build:publish +cd ../.. +npm run build:docs:webcomponents +``` + +## MCP Server + +Build the database, compile TypeScript, and start: + +```bash +npm run build:db # build SQLite database from compressed docs +npm run build # compile TypeScript +npm run start # start MCP server +``` + +### MCP Client Configuration + +```json +{ + "mcpServers": { + "igniteui-docs": { + "command": "node", + "args": ["path/to/igniteui-doc-mcp/dist/index.js"] + } + } +} +``` + +The server uses local mode by default, loading `dist/igniteui-docs.db` (SQLite with FTS4) into memory via `sql.js` to serve ~1,200 docs across all 4 frameworks. Use `--remote <url>` to proxy to a backend API instead. Use `--debug` to enable request logging. + +### Testing with MCP Inspector + +```bash +npm run inspector # standalone MCP server +npx @modelcontextprotocol/inspector ig mcp # via CLI (after build:mcp-bundle + build) +``` + +### Tools + +| Tool | Parameters | Description | +|------|-----------|-------------| +| `list_components` | `framework` (required), `filter?` | List docs for a framework, optionally filtered by keyword (LIKE match against filename, component, toc_name, keywords, summary) | +| `get_doc` | `framework` (required), `name` (required) | Return full markdown content of a specific doc. `name` is without `.md` extension | +| `search_docs` | `query` (required), `framework` (required) | FTS4 full-text search with Porter stemming. Returns top 20 results with snippet excerpts | +| `get_project_setup_guide` | `framework` (required) | Return setup guides for creating a new Ignite UI project. For Angular/React/WC: CLI docs. For Blazor: dotnet + NuGet guides | +| `get_api_reference` | `framework` (required), `name` (required) | Retrieve the full API reference for a component or class. Returns formatted markdown with properties, methods, and events | +| `search_api` | `framework` (required), `query` (required) | Search API entries by keyword, feature, or partial component name. Returns up to 10 results ranked by match count | + +#### get_project_setup_guide + +Returns framework-specific setup guides for creating a new Ignite UI project. + +**For Angular, React, Web Components:** Returns Ignite UI CLI documentation with step-by-step instructions for project scaffolding. +**For Blazor:** Returns a guide for creating a Blazor app using `dotnet new` and adding Ignite UI Blazor dependencies via NuGet. + +**Supported frameworks:** `angular`, `react`, `webcomponents`, `blazor` + +**Parameters:** + +| Parameter | Required | Description | +|-----------|----------|-------------| +| `framework` | Yes | `angular`, `react`, `webcomponents`, or `blazor` | + +**Example:** +```json +{ + "framework": "angular" +} +``` + +## Directory Structure + +``` +igniteui-doc-mcp/ + angular/ # Angular git submodules + igniteui-docfx/ # Documentation source (markdown + toc.yml) + igniteui-angular-samples/ # Angular sample apps (component source code) + igniteui-angular-examples/ # Additional examples (charts, maps, etc.) + react/ # React git submodules + igniteui-react-examples/ # React example projects + webcomponents/ # WebComponents git submodules + igniteui-wc-examples/ # WebComponents example projects + blazor/ # Blazor git submodules + igniteui-blazor-examples/ # Blazor example projects + common/ # Cross-platform git submodules + igniteui-xplat-docs/ # Shared docs for React, Blazor, WebComponents + docs_baseline/ # Tracked in git: post-inject snapshots for incremental diff + angular/ # Last-processed prepared docs (per platform) + react/ + blazor/ + webcomponents/ + scripts/ # Pipeline scripts + build-db.ts # Build SQLite DB from compressed docs + diff-docs.ts # Compare prepared docs against baseline (SHA-256) + update-baseline.ts # Sync baseline after successful compression + src/ # MCP server source + index.ts # MCP server (sql.js + FTS4 queries) + sql.js.d.ts # Type declarations for sql.js + dist/ # Build artifacts (gitignored) + docs_processing/<platform>/ # Export output + docs_prepeared/<platform>/ # Inject output (code samples embedded) + docs_final/<platform>/ # Compress output (LLM-compressed) + _compression_stats.json # Aggregate compression stats (includes total_tokens) + _compression_log.csv # Per-file log (file, sizes, tokens) + diff-manifest.json # Diff output (changed/added/deleted/unchanged lists) + igniteui-docs.db # SQLite DB with FTS4 (built by build-db.ts) + validation_report_<platform>.json # Validation results (per platform) + docs/ # Plans and documentation + .gitattributes # Enforces LF line endings for docs_baseline/ +``` + +## Docs + +| File | Description | +|------|-------------| +| `docs/progress.md` | Implementation progress tracker | +| `docs/knowledgebase.md` | Cross-platform lessons learned (32 entries) | +| `docs/xplat-docs-architecture.md` | Cross-platform docs architecture (variable replacement, toc.json, apiMap) | +| `docs/react-pipeline.md` | React pipeline implementation plan | +| `docs/wc-pipeline-plan.md` | WebComponents pipeline implementation plan | +| `docs/blazor-pipeline-plan.md` | Blazor pipeline implementation plan | +| `docs/db.md` | SQLite + FTS4 database integration (implemented) | +| `docs/batch-compression.md` | OpenAI Batch API for compression — 50% cost reduction (implemented) | +| `docs/incremental-processing.md` | Incremental processing design — diff-based compression to skip unchanged docs (implemented) | +| `docs/impl_plan.md` | Code-view injection plan | +| `docs/toc_based_processing.md` | TOC-based file selection plan | +| `docs/prefix_fix.md` | Angular prefix fix plan | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/README.md b/packages/igniteui-mcp/igniteui-doc-mcp/README.md new file mode 100644 index 000000000..234fa0365 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/README.md @@ -0,0 +1,169 @@ +# @igniteui/mcp-server + +MCP server for [Ignite UI](https://www.infragistics.com/products/ignite-ui) — provides AI assistants with component documentation search and retrieval for **Angular**, **React**, **Blazor**, and **Web Components**. + +Ships with a bundled SQLite database containing pre-compressed, LLM-optimized documentation for all Ignite UI components. + +## Installation + +```bash +npm install -g @igniteui/mcp-server +``` + +Or use directly with `npx`: + +```bash +npx @igniteui/mcp-server +``` + +## Running From Source + +In order to run the MCP from this repository, git submodules must be initialized first. The repo already includes the submodule entries, but a fresh clone still needs to fetch them locally. + +Required submodules for local API markdown generation include: +- `angular/igniteui-angular` +- `webcomponents/igniteui-webcomponents` + +Recommended first-time setup: + +```bash +cd packages/igniteui-mcp/igniteui-doc-mcp +git submodule update --init --recursive +npm install +npm run build:docs:all +npm run build +``` + +`npm run build:docs:all` generates the local API markdown artifacts used by the MCP API tools for Angular and Web Components. Run it before starting the server. + +If you need to refresh submodules to newer upstream commits later, use: + +```bash +git submodule update --remote --merge +``` + +## MCP Client Configuration + +### VS Code + +Add to `.vscode/mcp.json`: + +```json +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +### Claude Desktop +If Ignite UI CLI is globally installed you can configure the MCP like this: + +Add to `claude_desktop_config.json`: + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` +### Cursor +If Ignite UI CLI is globally installed you can configure the MCP like this: + +Add to Cursor MCP settings: + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## Available Tools + +All tools require a `framework` parameter: `angular`, `react`, `blazor`, or `webcomponents`. + +| Tool | Description | +|------|-------------| +| `list_components` | List available Ignite UI component docs. Filter by framework and optional keyword match against filename, component name, keywords, or summary. | +| `get_doc` | Return the full markdown content of a specific component doc by name (e.g., `grid-editing`, `accordion`). | +| `search_docs` | Full-text search across Ignite UI docs for a specific framework. Returns top 20 results with excerpt snippets. Supports prefix matching (e.g., `grid*`). | +| `search_api` | Search Ignite UI API entries by keyword, feature name, or partial component name. | +| `get_api_reference` | Return the full API reference for a specific Ignite UI component or class by exact name. | +| `get_project_setup_guide` | Returns setup guides for creating a new Ignite UI project. For Angular/React/Web Components: CLI scaffolding instructions. For Blazor: `dotnet new` + NuGet setup guide. | + +## Available Prompts + +| Prompt | Description | +|--------|-------------| +| `igniteui-usage-guide` | Instructions for using Ignite UI tools — framework detection, documentation lookup, and project setup. | + +## Framework Detection + +The server detects the Ignite UI framework from component prefixes in your code: + +| Framework | Prefix | Example | Package | +|-----------|--------|---------|---------| +| Angular | `Igx` | `IgxGrid`, `IgxCombo` | `igniteui-angular` | +| React | `Igr` | `IgrGrid`, `IgrCombo` | `igniteui-react` | +| Blazor | `Igb` | `IgbGrid`, `IgbCombo` | `IgniteUI.Blazor` | +| Web Components | `Igc` + `Component` | `IgcGridComponent` | `igniteui-webcomponents` | + +File extensions also help: `.razor` → Blazor, `.tsx` → React, `.ts` + `.html` → Angular or Web Components. + +## CLI Options + +```bash +# Local mode (default) — uses bundled SQLite database +igniteui-mcp + +# Remote mode — proxies to a backend API +igniteui-mcp --remote https://your-backend-url.com + +# Enable debug logging +igniteui-mcp --debug +``` + +### Environment Variables + +| Variable | Description | +|----------|-------------| +| `DB_PATH` | Custom path to the SQLite database file | +| `IGNITEUI_MCP_DOCS_BACKEND_URL` | Backend URL (used with `--remote` flag when no URL argument is provided) | + +## Modes + +### Local (default) + +Fully self-contained — no network access required. Uses a bundled SQLite database with FTS4 full-text search powered by [sql.js](https://github.com/sql-js/sql.js/) (WebAssembly). + +When running from a source checkout, make sure you have already run `npm run build:docs:all` before starting the MCP so the local API markdowns are present. + +### Remote + +Proxies documentation requests to a backend API. Requires the `--remote` flag with a URL argument: + +```bash +igniteui-mcp --remote https://your-backend-url.com +``` + +Or provide the URL via environment variable: + +```bash +IGNITEUI_MCP_DOCS_BACKEND_URL=https://your-backend-url.com igniteui-mcp --remote +``` + +## License + +MIT © [Infragistics](https://www.infragistics.com/) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular new file mode 160000 index 000000000..28ea802da --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular @@ -0,0 +1 @@ +Subproject commit 28ea802da6e8bd841b82e336a16781159d69e779 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples new file mode 160000 index 000000000..76bad07ab --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples @@ -0,0 +1 @@ +Subproject commit 76bad07ab3e31a884b974eec7011f4af959c4b05 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples new file mode 160000 index 000000000..b964bb411 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples @@ -0,0 +1 @@ +Subproject commit b964bb411beb08ac2a9e1267fe6ed8daf13a515a diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx new file mode 160000 index 000000000..70d396063 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx @@ -0,0 +1 @@ +Subproject commit 70d3960633dbedc233ffc1ee4b5543bca5b27bb7 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples new file mode 160000 index 000000000..d16e43a34 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples @@ -0,0 +1 @@ +Subproject commit d16e43a34b900b79e8aeda92ea20e7cc02c70899 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs b/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs new file mode 160000 index 000000000..29664d3e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs @@ -0,0 +1 @@ +Subproject commit 29664d3e048fb8f5234587ac9da69d79558eb486 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db new file mode 100644 index 000000000..5f4ee83dd Binary files /dev/null and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/README.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/README.md new file mode 100644 index 000000000..72e8dbeae --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/README.md @@ -0,0 +1,918 @@ +# IgniteUI for Angular API + +## Enumerations + +- [AbsolutePosition](enumerations/AbsolutePosition.md) +- [CarouselAnimationDirection](enumerations/CarouselAnimationDirection.md) +- [ColumnPinningPosition](enumerations/ColumnPinningPosition.md) +- [CsvFileTypes](enumerations/CsvFileTypes.md) +- [DatePart](enumerations/DatePart.md) +- [DateRangeType](enumerations/DateRangeType.md) +- [DragDirection](enumerations/DragDirection.md) +- [DropPosition](enumerations/DropPosition.md) +- [ExportHeaderType](enumerations/ExportHeaderType.md) +- [ExportRecordType](enumerations/ExportRecordType.md) +- [FilteringExpressionsTreeType](enumerations/FilteringExpressionsTreeType.md) +- [FilteringLogic](enumerations/FilteringLogic.md) +- [HorizontalAlignment](enumerations/HorizontalAlignment.md) +- [IgxInputState](enumerations/IgxInputState.md) +- [IgxListPanState](enumerations/IgxListPanState.md) +- [OffsetMode](enumerations/OffsetMode.md) +- [PagingError](enumerations/PagingError.md) +- [PivotDimensionType](enumerations/PivotDimensionType.md) +- [PivotRowLayoutType](enumerations/PivotRowLayoutType.md) +- [PivotSummaryPosition](enumerations/PivotSummaryPosition.md) +- [RelativePosition](enumerations/RelativePosition.md) +- [RelativePositionStrategy](enumerations/RelativePositionStrategy.md) +- [RowPinningPosition](enumerations/RowPinningPosition.md) +- [ScrollDirection](enumerations/ScrollDirection.md) +- [SortingDirection](enumerations/SortingDirection.md) +- [SplitterType](enumerations/SplitterType.md) +- [TRANSACTION\_TYPE](enumerations/TRANSACTION_TYPE.md) +- [TransactionEventOrigin](enumerations/TransactionEventOrigin.md) +- [TransactionType](enumerations/TransactionType.md) +- [VerticalAlignment](enumerations/VerticalAlignment.md) +- [WEEKDAYS](enumerations/WEEKDAYS.md) + +## Classes + +- [AbsoluteScrollStrategy](classes/AbsoluteScrollStrategy.md) +- [AutoPositionStrategy](classes/AutoPositionStrategy.md) +- [BaseFilteringStrategy](classes/BaseFilteringStrategy.md) +- [BaseFitPositionStrategy](classes/BaseFitPositionStrategy.md) +- [BaseFormatter](classes/BaseFormatter.md) +- [BlockScrollStrategy](classes/BlockScrollStrategy.md) +- [ByLevelTreeGridMergeStrategy](classes/ByLevelTreeGridMergeStrategy.md) +- [CachedDataCloneStrategy](classes/CachedDataCloneStrategy.md) +- [Calendar](classes/Calendar.md) +- [CalendarDay](classes/CalendarDay.md) +- [CarouselHammerConfig](classes/CarouselHammerConfig.md) +- [CheckboxBaseDirective](classes/CheckboxBaseDirective.md) +- [CloseScrollStrategy](classes/CloseScrollStrategy.md) +- [ConnectedPositioningStrategy](classes/ConnectedPositioningStrategy.md) +- [ContainerPositionStrategy](classes/ContainerPositionStrategy.md) +- [DefaultDataCloneStrategy](classes/DefaultDataCloneStrategy.md) +- [DefaultMergeStrategy](classes/DefaultMergeStrategy.md) +- [DefaultPivotGridRecordSortingStrategy](classes/DefaultPivotGridRecordSortingStrategy.md) +- [DefaultPivotSortingStrategy](classes/DefaultPivotSortingStrategy.md) +- [DefaultSortingStrategy](classes/DefaultSortingStrategy.md) +- [DefaultTreeGridMergeStrategy](classes/DefaultTreeGridMergeStrategy.md) +- [DimensionValuesFilteringStrategy](classes/DimensionValuesFilteringStrategy.md) +- [ElasticPositionStrategy](classes/ElasticPositionStrategy.md) +- [ExpressionsTreeUtil](classes/ExpressionsTreeUtil.md) +- [FilteringExpressionsTree](classes/FilteringExpressionsTree.md) +- [FilteringStrategy](classes/FilteringStrategy.md) +- [FilterUtil](classes/FilterUtil.md) +- [FormattedValuesFilteringStrategy](classes/FormattedValuesFilteringStrategy.md) +- [FormattedValuesSortingStrategy](classes/FormattedValuesSortingStrategy.md) +- [GlobalPositionStrategy](classes/GlobalPositionStrategy.md) +- [GroupMemberCountSortingStrategy](classes/GroupMemberCountSortingStrategy.md) +- [IgcFormControlDirective](classes/IgcFormControlDirective.md) +- [IgSizeDirective](classes/IgSizeDirective.md) +- [IgxAccordionComponent](classes/IgxAccordionComponent.md) +- [IgxActionStripComponent](classes/IgxActionStripComponent.md) +- [IgxActionStripMenuItemDirective](classes/IgxActionStripMenuItemDirective.md) +- [IgxAddRow](classes/IgxAddRow.md) +- [IgxAdvancedFilteringDialogComponent](classes/IgxAdvancedFilteringDialogComponent.md) +- [IgxAngularAnimationPlayer](classes/IgxAngularAnimationPlayer.md) +- [IgxAngularAnimationService](classes/IgxAngularAnimationService.md) +- [IgxAppendDropStrategy](classes/IgxAppendDropStrategy.md) +- [IgxAutocompleteDirective](classes/IgxAutocompleteDirective.md) +- [IgxAvatarComponent](classes/IgxAvatarComponent.md) +- [IgxBadgeComponent](classes/IgxBadgeComponent.md) +- [IgxBannerActionsDirective](classes/IgxBannerActionsDirective.md) +- [IgxBannerComponent](classes/IgxBannerComponent.md) +- [IgxBaseExporter](classes/IgxBaseExporter.md) +- [IgxBaseTransactionService](classes/IgxBaseTransactionService.md) +- [IgxBooleanFilteringOperand](classes/IgxBooleanFilteringOperand.md) +- [IgxBottomNavComponent](classes/IgxBottomNavComponent.md) +- [IgxBottomNavContentComponent](classes/IgxBottomNavContentComponent.md) +- [IgxBottomNavHeaderComponent](classes/IgxBottomNavHeaderComponent.md) +- [IgxBottomNavHeaderIconDirective](classes/IgxBottomNavHeaderIconDirective.md) +- [IgxBottomNavHeaderLabelDirective](classes/IgxBottomNavHeaderLabelDirective.md) +- [IgxBottomNavItemComponent](classes/IgxBottomNavItemComponent.md) +- [IgxButtonDirective](classes/IgxButtonDirective.md) +- [IgxButtonGroupComponent](classes/IgxButtonGroupComponent.md) +- [IgxCalendarComponent](classes/IgxCalendarComponent.md) +- [IgxCalendarMonthDirective](classes/IgxCalendarMonthDirective.md) +- [IgxCalendarViewBaseDirective](classes/IgxCalendarViewBaseDirective.md) +- [IgxCardActionsComponent](classes/IgxCardActionsComponent.md) +- [IgxCardComponent](classes/IgxCardComponent.md) +- [IgxCardContentDirective](classes/IgxCardContentDirective.md) +- [IgxCardFooterDirective](classes/IgxCardFooterDirective.md) +- [IgxCardHeaderComponent](classes/IgxCardHeaderComponent.md) +- [IgxCardHeaderSubtitleDirective](classes/IgxCardHeaderSubtitleDirective.md) +- [IgxCardHeaderTitleDirective](classes/IgxCardHeaderTitleDirective.md) +- [IgxCardMediaDirective](classes/IgxCardMediaDirective.md) +- [IgxCardThumbnailDirective](classes/IgxCardThumbnailDirective.md) +- [IgxCarouselComponent](classes/IgxCarouselComponent.md) +- [IgxCarouselIndicatorDirective](classes/IgxCarouselIndicatorDirective.md) +- [IgxCarouselNextButtonDirective](classes/IgxCarouselNextButtonDirective.md) +- [IgxCarouselPrevButtonDirective](classes/IgxCarouselPrevButtonDirective.md) +- [IgxCell](classes/IgxCell.md) +- [IgxCellCrudState](classes/IgxCellCrudState.md) +- [IgxCellEditorTemplateDirective](classes/IgxCellEditorTemplateDirective.md) +- [IgxCellHeaderTemplateDirective](classes/IgxCellHeaderTemplateDirective.md) +- [IgxCellTemplateDirective](classes/IgxCellTemplateDirective.md) +- [IgxCellValidationErrorDirective](classes/IgxCellValidationErrorDirective.md) +- [IgxCheckboxComponent](classes/IgxCheckboxComponent.md) +- [IgxChipComponent](classes/IgxChipComponent.md) +- [IgxChipsAreaComponent](classes/IgxChipsAreaComponent.md) +- [IgxCircularProgressBarComponent](classes/IgxCircularProgressBarComponent.md) +- [IgxCollapsibleIndicatorTemplateDirective](classes/IgxCollapsibleIndicatorTemplateDirective.md) +- [IgxColumnActionsBaseDirective](classes/IgxColumnActionsBaseDirective.md) +- [IgxColumnActionsComponent](classes/IgxColumnActionsComponent.md) +- [IgxColumnComponent](classes/IgxColumnComponent.md) +- [IgxColumnEmailValidatorDirective](classes/IgxColumnEmailValidatorDirective.md) +- [IgxColumnFormatterPipe](classes/IgxColumnFormatterPipe.md) +- [IgxColumnGroupComponent](classes/IgxColumnGroupComponent.md) +- [IgxColumnHidingDirective](classes/IgxColumnHidingDirective.md) +- [IgxColumnLayoutComponent](classes/IgxColumnLayoutComponent.md) +- [IgxColumnMaxLengthValidatorDirective](classes/IgxColumnMaxLengthValidatorDirective.md) +- [IgxColumnMaxValidatorDirective](classes/IgxColumnMaxValidatorDirective.md) +- [IgxColumnMinLengthValidatorDirective](classes/IgxColumnMinLengthValidatorDirective.md) +- [IgxColumnMinValidatorDirective](classes/IgxColumnMinValidatorDirective.md) +- [IgxColumnMovingDropDirective](classes/IgxColumnMovingDropDirective.md) +- [IgxColumnPatternValidatorDirective](classes/IgxColumnPatternValidatorDirective.md) +- [IgxColumnPinningDirective](classes/IgxColumnPinningDirective.md) +- [IgxColumnRequiredValidatorDirective](classes/IgxColumnRequiredValidatorDirective.md) +- [IgxComboAddItemDirective](classes/IgxComboAddItemDirective.md) +- [IgxComboBaseDirective](classes/IgxComboBaseDirective.md) +- [IgxComboClearIconDirective](classes/IgxComboClearIconDirective.md) +- [IgxComboComponent](classes/IgxComboComponent.md) +- [IgxComboEmptyDirective](classes/IgxComboEmptyDirective.md) +- [IgxComboFooterDirective](classes/IgxComboFooterDirective.md) +- [IgxComboHeaderDirective](classes/IgxComboHeaderDirective.md) +- [IgxComboHeaderItemDirective](classes/IgxComboHeaderItemDirective.md) +- [IgxComboItemDirective](classes/IgxComboItemDirective.md) +- [IgxComboToggleIconDirective](classes/IgxComboToggleIconDirective.md) +- [IgxCsvExporterOptions](classes/IgxCsvExporterOptions.md) +- [IgxCsvExporterService](classes/IgxCsvExporterService.md) +- [IgxCSVTextDirective](classes/IgxCSVTextDirective.md) +- [IgxCurrencyFormatterPipe](classes/IgxCurrencyFormatterPipe.md) +- [IgxDataLoadingTemplateDirective](classes/IgxDataLoadingTemplateDirective.md) +- [IgxDataRecordSorting](classes/IgxDataRecordSorting.md) +- [IgxDateFilteringOperand](classes/IgxDateFilteringOperand.md) +- [IgxDateFormatterPipe](classes/IgxDateFormatterPipe.md) +- [IgxDatePickerComponent](classes/IgxDatePickerComponent.md) +- [IgxDateRangeEndComponent](classes/IgxDateRangeEndComponent.md) +- [IgxDateRangePickerComponent](classes/IgxDateRangePickerComponent.md) +- [IgxDateRangeSeparatorDirective](classes/IgxDateRangeSeparatorDirective.md) +- [IgxDateRangeStartComponent](classes/IgxDateRangeStartComponent.md) +- [IgxDateSummaryOperand](classes/IgxDateSummaryOperand.md) +- [IgxDateTimeEditorDirective](classes/IgxDateTimeEditorDirective.md) +- [IgxDateTimeFilteringOperand](classes/IgxDateTimeFilteringOperand.md) +- [IgxDaysViewComponent](classes/IgxDaysViewComponent.md) +- [IgxDefaultDropStrategy](classes/IgxDefaultDropStrategy.md) +- [IgxDialogComponent](classes/IgxDialogComponent.md) +- [IgxDividerDirective](classes/IgxDividerDirective.md) +- [IgxDragDirective](classes/IgxDragDirective.md) +- [IgxDragHandleDirective](classes/IgxDragHandleDirective.md) +- [IgxDragIgnoreDirective](classes/IgxDragIgnoreDirective.md) +- [IgxDragLocation](classes/IgxDragLocation.md) +- [IgxDropDirective](classes/IgxDropDirective.md) +- [IgxDropDownBaseDirective](classes/IgxDropDownBaseDirective.md) +- [IgxDropDownComponent](classes/IgxDropDownComponent.md) +- [IgxDropDownGroupComponent](classes/IgxDropDownGroupComponent.md) +- [IgxDropDownItemBaseDirective](classes/IgxDropDownItemBaseDirective.md) +- [IgxDropDownItemComponent](classes/IgxDropDownItemComponent.md) +- [IgxDropDownItemNavigationDirective](classes/IgxDropDownItemNavigationDirective.md) +- [IgxEditRow](classes/IgxEditRow.md) +- [IgxEmptyListTemplateDirective](classes/IgxEmptyListTemplateDirective.md) +- [IgxExcelExporterOptions](classes/IgxExcelExporterOptions.md) +- [IgxExcelExporterService](classes/IgxExcelExporterService.md) +- [IgxExcelStyleClearFiltersComponent](classes/IgxExcelStyleClearFiltersComponent.md) +- [IgxExcelStyleColumnOperationsTemplateDirective](classes/IgxExcelStyleColumnOperationsTemplateDirective.md) +- [IgxExcelStyleConditionalFilterComponent](classes/IgxExcelStyleConditionalFilterComponent.md) +- [IgxExcelStyleFilterOperationsTemplateDirective](classes/IgxExcelStyleFilterOperationsTemplateDirective.md) +- [IgxExcelStyleHeaderComponent](classes/IgxExcelStyleHeaderComponent.md) +- [IgxExcelStyleHidingComponent](classes/IgxExcelStyleHidingComponent.md) +- [IgxExcelStyleLoadingValuesTemplateDirective](classes/IgxExcelStyleLoadingValuesTemplateDirective.md) +- [IgxExcelStyleMovingComponent](classes/IgxExcelStyleMovingComponent.md) +- [IgxExcelStylePinningComponent](classes/IgxExcelStylePinningComponent.md) +- [IgxExcelStyleSearchComponent](classes/IgxExcelStyleSearchComponent.md) +- [IgxExcelStyleSelectingComponent](classes/IgxExcelStyleSelectingComponent.md) +- [IgxExcelStyleSortingComponent](classes/IgxExcelStyleSortingComponent.md) +- [IgxExcelTextDirective](classes/IgxExcelTextDirective.md) +- [IgxExpansionPanelBodyComponent](classes/IgxExpansionPanelBodyComponent.md) +- [IgxExpansionPanelComponent](classes/IgxExpansionPanelComponent.md) +- [IgxExpansionPanelHeaderComponent](classes/IgxExpansionPanelHeaderComponent.md) +- [IgxExporterOptionsBase](classes/IgxExporterOptionsBase.md) +- [IgxFilterCellTemplateDirective](classes/IgxFilterCellTemplateDirective.md) +- [IgxFilterDirective](classes/IgxFilterDirective.md) +- [IgxFilteringOperand](classes/IgxFilteringOperand.md) +- [IgxFilterOptions](classes/IgxFilterOptions.md) +- [IgxFilterPipe](classes/IgxFilterPipe.md) +- [IgxFlatTransactionFactory](classes/IgxFlatTransactionFactory.md) +- [IgxFlexDirective](classes/IgxFlexDirective.md) +- [IgxFocusDirective](classes/IgxFocusDirective.md) +- [IgxFocusTrapDirective](classes/IgxFocusTrapDirective.md) +- [IgxForOfContext](classes/IgxForOfContext.md) +- [IgxForOfDirective](classes/IgxForOfDirective.md) +- [IgxForOfScrollSyncService](classes/IgxForOfScrollSyncService.md) +- [IgxForOfSyncService](classes/IgxForOfSyncService.md) +- [IgxGridActionButtonComponent](classes/IgxGridActionButtonComponent.md) +- [IgxGridActionsBaseDirective](classes/IgxGridActionsBaseDirective.md) +- [IgxGridAddRowPipe](classes/IgxGridAddRowPipe.md) +- [IgxGridBaseDirective](classes/IgxGridBaseDirective.md) +- [IgxGridBodyDirective](classes/IgxGridBodyDirective.md) +- [IgxGridCell](classes/IgxGridCell.md) +- [IgxGridCellComponent](classes/IgxGridCellComponent.md) +- [IgxGridCellMergePipe](classes/IgxGridCellMergePipe.md) +- [IgxGridColumnResizerComponent](classes/IgxGridColumnResizerComponent.md) +- [IgxGridComponent](classes/IgxGridComponent.md) +- [IgxGridCRUDService](classes/IgxGridCRUDService.md) +- [IgxGridDataMapperPipe](classes/IgxGridDataMapperPipe.md) +- [IgxGridEditingActionsComponent](classes/IgxGridEditingActionsComponent.md) +- [IgxGridExcelStyleFilteringComponent](classes/IgxGridExcelStyleFilteringComponent.md) +- [IgxGridExpandableCellComponent](classes/IgxGridExpandableCellComponent.md) +- [IgxGridFooterComponent](classes/IgxGridFooterComponent.md) +- [IgxGridForOfContext](classes/IgxGridForOfContext.md) +- [IgxGridForOfDirective](classes/IgxGridForOfDirective.md) +- [IgxGridPinningActionsComponent](classes/IgxGridPinningActionsComponent.md) +- [IgxGridRow](classes/IgxGridRow.md) +- [IgxGridRowComponent](classes/IgxGridRowComponent.md) +- [IgxGridSelectionService](classes/IgxGridSelectionService.md) +- [IgxGridStateBaseDirective](classes/IgxGridStateBaseDirective.md) +- [IgxGridStateDirective](classes/IgxGridStateDirective.md) +- [IgxGridToolbarActionsComponent](classes/IgxGridToolbarActionsComponent.md) +- [IgxGridToolbarAdvancedFilteringComponent](classes/IgxGridToolbarAdvancedFilteringComponent.md) +- [IgxGridToolbarComponent](classes/IgxGridToolbarComponent.md) +- [IgxGridToolbarDirective](classes/IgxGridToolbarDirective.md) +- [IgxGridToolbarExporterComponent](classes/IgxGridToolbarExporterComponent.md) +- [IgxGridToolbarHidingComponent](classes/IgxGridToolbarHidingComponent.md) +- [IgxGridToolbarPinningComponent](classes/IgxGridToolbarPinningComponent.md) +- [IgxGridToolbarTitleComponent](classes/IgxGridToolbarTitleComponent.md) +- [IgxGridTransactionStatePipe](classes/IgxGridTransactionStatePipe.md) +- [IgxGridUnmergeActivePipe](classes/IgxGridUnmergeActivePipe.md) +- [IgxGridValidationService](classes/IgxGridValidationService.md) +- [IgxGroupByRow](classes/IgxGroupByRow.md) +- [IgxGroupedTreeGridSorting](classes/IgxGroupedTreeGridSorting.md) +- [IgxGrouping](classes/IgxGrouping.md) +- [IgxHeaderGroupStylePipe](classes/IgxHeaderGroupStylePipe.md) +- [IgxHierarchicalGridComponent](classes/IgxHierarchicalGridComponent.md) +- [IgxHierarchicalGridRow](classes/IgxHierarchicalGridRow.md) +- [IgxHierarchicalTransactionFactory](classes/IgxHierarchicalTransactionFactory.md) +- [IgxHintDirective](classes/IgxHintDirective.md) +- [IgxIconButtonDirective](classes/IgxIconButtonDirective.md) +- [IgxIconComponent](classes/IgxIconComponent.md) +- [IgxIconService](classes/IgxIconService.md) +- [IgxInputDirective](classes/IgxInputDirective.md) +- [IgxInputGroupComponent](classes/IgxInputGroupComponent.md) +- [IgxInsertDropStrategy](classes/IgxInsertDropStrategy.md) +- [IgxLabelDirective](classes/IgxLabelDirective.md) +- [IgxLayoutDirective](classes/IgxLayoutDirective.md) +- [IgxLinearProgressBarComponent](classes/IgxLinearProgressBarComponent.md) +- [IgxListActionDirective](classes/IgxListActionDirective.md) +- [IgxListComponent](classes/IgxListComponent.md) +- [IgxListItemComponent](classes/IgxListItemComponent.md) +- [IgxListItemLeftPanningTemplateDirective](classes/IgxListItemLeftPanningTemplateDirective.md) +- [IgxListItemRightPanningTemplateDirective](classes/IgxListItemRightPanningTemplateDirective.md) +- [IgxListLineDirective](classes/IgxListLineDirective.md) +- [IgxListLineSubTitleDirective](classes/IgxListLineSubTitleDirective.md) +- [IgxListLineTitleDirective](classes/IgxListLineTitleDirective.md) +- [IgxListThumbnailDirective](classes/IgxListThumbnailDirective.md) +- [IgxMaskDirective](classes/IgxMaskDirective.md) +- [IgxMonthPickerComponent](classes/IgxMonthPickerComponent.md) +- [IgxMonthsViewComponent](classes/IgxMonthsViewComponent.md) +- [IgxNavbarActionDirective](classes/IgxNavbarActionDirective.md) +- [IgxNavbarComponent](classes/IgxNavbarComponent.md) +- [IgxNavbarTitleDirective](classes/IgxNavbarTitleDirective.md) +- [IgxNavDrawerItemDirective](classes/IgxNavDrawerItemDirective.md) +- [IgxNavDrawerMiniTemplateDirective](classes/IgxNavDrawerMiniTemplateDirective.md) +- [IgxNavDrawerTemplateDirective](classes/IgxNavDrawerTemplateDirective.md) +- [IgxNavigationCloseDirective](classes/IgxNavigationCloseDirective.md) +- [IgxNavigationDrawerComponent](classes/IgxNavigationDrawerComponent.md) +- [IgxNavigationService](classes/IgxNavigationService.md) +- [IgxNavigationToggleDirective](classes/IgxNavigationToggleDirective.md) +- [IgxNotificationsDirective](classes/IgxNotificationsDirective.md) +- [IgxNumberFilteringOperand](classes/IgxNumberFilteringOperand.md) +- [IgxNumberFormatterPipe](classes/IgxNumberFormatterPipe.md) +- [IgxNumberSummaryOperand](classes/IgxNumberSummaryOperand.md) +- [IgxOverlayOutletDirective](classes/IgxOverlayOutletDirective.md) +- [IgxOverlayService](classes/IgxOverlayService.md) +- [IgxPageNavigationComponent](classes/IgxPageNavigationComponent.md) +- [IgxPageSizeSelectorComponent](classes/IgxPageSizeSelectorComponent.md) +- [IgxPaginatorComponent](classes/IgxPaginatorComponent.md) +- [IgxPaginatorContentDirective](classes/IgxPaginatorContentDirective.md) +- [IgxPaginatorDirective](classes/IgxPaginatorDirective.md) +- [IgxPdfExporterOptions](classes/IgxPdfExporterOptions.md) +- [IgxPdfExporterService](classes/IgxPdfExporterService.md) +- [IgxPdfTextDirective](classes/IgxPdfTextDirective.md) +- [IgxPercentFormatterPipe](classes/IgxPercentFormatterPipe.md) +- [IgxPickerActionsDirective](classes/IgxPickerActionsDirective.md) +- [IgxPickerClearComponent](classes/IgxPickerClearComponent.md) +- [IgxPickerToggleComponent](classes/IgxPickerToggleComponent.md) +- [IgxPivotAggregate](classes/IgxPivotAggregate.md) +- [IgxPivotDataSelectorComponent](classes/IgxPivotDataSelectorComponent.md) +- [IgxPivotDateAggregate](classes/IgxPivotDateAggregate.md) +- [IgxPivotDateDimension](classes/IgxPivotDateDimension.md) +- [IgxPivotGridColumnResizerComponent](classes/IgxPivotGridColumnResizerComponent.md) +- [IgxPivotGridComponent](classes/IgxPivotGridComponent.md) +- [IgxPivotNumericAggregate](classes/IgxPivotNumericAggregate.md) +- [IgxPivotTimeAggregate](classes/IgxPivotTimeAggregate.md) +- [IgxPrependDropStrategy](classes/IgxPrependDropStrategy.md) +- [IgxProgressBarGradientDirective](classes/IgxProgressBarGradientDirective.md) +- [IgxProgressBarTextTemplateDirective](classes/IgxProgressBarTextTemplateDirective.md) +- [IgxQueryBuilderComponent](classes/IgxQueryBuilderComponent.md) +- [IgxQueryBuilderHeaderComponent](classes/IgxQueryBuilderHeaderComponent.md) +- [IgxQueryBuilderSearchValueTemplateDirective](classes/IgxQueryBuilderSearchValueTemplateDirective.md) +- [IgxRadioComponent](classes/IgxRadioComponent.md) +- [IgxRadioGroupDirective](classes/IgxRadioGroupDirective.md) +- [IgxReadOnlyInputDirective](classes/IgxReadOnlyInputDirective.md) +- [IgxRippleDirective](classes/IgxRippleDirective.md) +- [IgxRowAddCrudState](classes/IgxRowAddCrudState.md) +- [IgxRowCrudState](classes/IgxRowCrudState.md) +- [IgxRowDirective](classes/IgxRowDirective.md) +- [IgxRowIslandComponent](classes/IgxRowIslandComponent.md) +- [IgxSelectComponent](classes/IgxSelectComponent.md) +- [IgxSelectGroupComponent](classes/IgxSelectGroupComponent.md) +- [IgxSelectItemComponent](classes/IgxSelectItemComponent.md) +- [IgxSimpleComboComponent](classes/IgxSimpleComboComponent.md) +- [IgxSlideComponent](classes/IgxSlideComponent.md) +- [IgxSliderComponent](classes/IgxSliderComponent.md) +- [IgxSnackbarComponent](classes/IgxSnackbarComponent.md) +- [IgxSorting](classes/IgxSorting.md) +- [IgxSplitterComponent](classes/IgxSplitterComponent.md) +- [IgxSplitterPaneComponent](classes/IgxSplitterPaneComponent.md) +- [IgxStepActiveIndicatorDirective](classes/IgxStepActiveIndicatorDirective.md) +- [IgxStepCompletedIndicatorDirective](classes/IgxStepCompletedIndicatorDirective.md) +- [IgxStepComponent](classes/IgxStepComponent.md) +- [IgxStepContentDirective](classes/IgxStepContentDirective.md) +- [IgxStepIndicatorDirective](classes/IgxStepIndicatorDirective.md) +- [IgxStepInvalidIndicatorDirective](classes/IgxStepInvalidIndicatorDirective.md) +- [IgxStepperComponent](classes/IgxStepperComponent.md) +- [IgxStepSubtitleDirective](classes/IgxStepSubtitleDirective.md) +- [IgxStepTitleDirective](classes/IgxStepTitleDirective.md) +- [IgxStringFilteringOperand](classes/IgxStringFilteringOperand.md) +- [IgxStringReplacePipe](classes/IgxStringReplacePipe.md) +- [IgxSummaryDataPipe](classes/IgxSummaryDataPipe.md) +- [IgxSummaryFormatterPipe](classes/IgxSummaryFormatterPipe.md) +- [IgxSummaryOperand](classes/IgxSummaryOperand.md) +- [IgxSummaryRow](classes/IgxSummaryRow.md) +- [IgxSummaryRowComponent](classes/IgxSummaryRowComponent.md) +- [IgxSummaryTemplateDirective](classes/IgxSummaryTemplateDirective.md) +- [IgxSwitchComponent](classes/IgxSwitchComponent.md) +- [IgxTabContentComponent](classes/IgxTabContentComponent.md) +- [IgxTabContentDirective](classes/IgxTabContentDirective.md) +- [IgxTabHeaderComponent](classes/IgxTabHeaderComponent.md) +- [IgxTabHeaderDirective](classes/IgxTabHeaderDirective.md) +- [IgxTabHeaderIconDirective](classes/IgxTabHeaderIconDirective.md) +- [IgxTabHeaderLabelDirective](classes/IgxTabHeaderLabelDirective.md) +- [IgxTabItemComponent](classes/IgxTabItemComponent.md) +- [IgxTabItemDirective](classes/IgxTabItemDirective.md) +- [IgxTabsComponent](classes/IgxTabsComponent.md) +- [IgxTabsDirective](classes/IgxTabsDirective.md) +- [IgxTextHighlightDirective](classes/IgxTextHighlightDirective.md) +- [IgxTextHighlightService](classes/IgxTextHighlightService.md) +- [IgxTextSelectionDirective](classes/IgxTextSelectionDirective.md) +- [IgxThumbFromTemplateDirective](classes/IgxThumbFromTemplateDirective.md) +- [IgxThumbToTemplateDirective](classes/IgxThumbToTemplateDirective.md) +- [IgxTickLabelTemplateDirective](classes/IgxTickLabelTemplateDirective.md) +- [IgxTimeFilteringOperand](classes/IgxTimeFilteringOperand.md) +- [IgxTimePickerComponent](classes/IgxTimePickerComponent.md) +- [IgxTimeSummaryOperand](classes/IgxTimeSummaryOperand.md) +- [IgxToastComponent](classes/IgxToastComponent.md) +- [IgxToggleActionDirective](classes/IgxToggleActionDirective.md) +- [IgxToggleDirective](classes/IgxToggleDirective.md) +- [IgxTooltipDirective](classes/IgxTooltipDirective.md) +- [IgxTooltipTargetDirective](classes/IgxTooltipTargetDirective.md) +- [IgxTransactionService](classes/IgxTransactionService.md) +- [IgxTreeComponent](classes/IgxTreeComponent.md) +- [IgxTreeGridComponent](classes/IgxTreeGridComponent.md) +- [IgxTreeGridRow](classes/IgxTreeGridRow.md) +- [IgxTreeNodeComponent](classes/IgxTreeNodeComponent.md) +- [IgxYearsViewComponent](classes/IgxYearsViewComponent.md) +- [IntlFormatter](classes/IntlFormatter.md) +- [ITreeGridAggregation](classes/ITreeGridAggregation.md) +- [NoopFilteringStrategy](classes/NoopFilteringStrategy.md) +- [NoopPivotDimensionsStrategy](classes/NoopPivotDimensionsStrategy.md) +- [NoOpScrollStrategy](classes/NoOpScrollStrategy.md) +- [NoopSortingStrategy](classes/NoopSortingStrategy.md) +- [PerformanceService](classes/PerformanceService.md) +- [PickerBaseDirective](classes/PickerBaseDirective.md) +- [PivotColumnDimensionsStrategy](classes/PivotColumnDimensionsStrategy.md) +- [PivotRowDimensionsStrategy](classes/PivotRowDimensionsStrategy.md) +- [PivotUtil](classes/PivotUtil.md) +- [Point](classes/Point.md) +- [ScrollStrategy](classes/ScrollStrategy.md) +- [SortingIndexPipe](classes/SortingIndexPipe.md) +- [ThemeToken](classes/ThemeToken.md) +- [TooltipPositionStrategy](classes/TooltipPositionStrategy.md) +- [TreeGridFilteringStrategy](classes/TreeGridFilteringStrategy.md) +- [TreeGridFormattedValuesFilteringStrategy](classes/TreeGridFormattedValuesFilteringStrategy.md) +- [TreeGridMatchingRecordsOnlyFilteringStrategy](classes/TreeGridMatchingRecordsOnlyFilteringStrategy.md) + +## Interfaces + +- [Action](interfaces/Action.md) +- [AnimationPlayer](interfaces/AnimationPlayer.md) +- [AnimationService](interfaces/AnimationService.md) +- [ArrowFit](interfaces/ArrowFit.md) +- [AutocompleteOverlaySettings](interfaces/AutocompleteOverlaySettings.md) +- [AutocompleteSelectionChangingEventArgs](interfaces/AutocompleteSelectionChangingEventArgs.md) +- [BannerCancelEventArgs](interfaces/BannerCancelEventArgs.md) +- [BannerEventArgs](interfaces/BannerEventArgs.md) +- [CancelableBrowserEventArgs](interfaces/CancelableBrowserEventArgs.md) +- [CancelableEventArgs](interfaces/CancelableEventArgs.md) +- [CarouselAnimationSettings](interfaces/CarouselAnimationSettings.md) +- [CellType](interfaces/CellType.md) +- [ColumnGroupsCache](interfaces/ColumnGroupsCache.md) +- [ColumnType](interfaces/ColumnType.md) +- [CustomDateRange](interfaces/CustomDateRange.md) +- [DatePartDeltas](interfaces/DatePartDeltas.md) +- [DateRange](interfaces/DateRange.md) +- [DateRangeDescriptor](interfaces/DateRangeDescriptor.md) +- [DimensionValueType](interfaces/DimensionValueType.md) +- [EntityType](interfaces/EntityType.md) +- [FamilyMeta](interfaces/FamilyMeta.md) +- [FieldType](interfaces/FieldType.md) +- [FlatGridType](interfaces/FlatGridType.md) +- [GridSelectionRange](interfaces/GridSelectionRange.md) +- [GridServiceType](interfaces/GridServiceType.md) +- [GridSVGIcon](interfaces/GridSVGIcon.md) +- [GridType](interfaces/GridType.md) +- [GridTypeBase](interfaces/GridTypeBase.md) +- [HeaderType](interfaces/HeaderType.md) +- [HierarchicalGridType](interfaces/HierarchicalGridType.md) +- [HierarchicalTransactionService](interfaces/HierarchicalTransactionService.md) +- [IAccordionCancelableEventArgs](interfaces/IAccordionCancelableEventArgs.md) +- [IAccordionEventArgs](interfaces/IAccordionEventArgs.md) +- [IActiveHighlightInfo](interfaces/IActiveHighlightInfo.md) +- [IActiveNode](interfaces/IActiveNode.md) +- [IActiveNodeChangeEventArgs](interfaces/IActiveNodeChangeEventArgs.md) +- [IBaseCancelableBrowserEventArgs](interfaces/IBaseCancelableBrowserEventArgs.md) +- [IBaseCancelableEventArgs](interfaces/IBaseCancelableEventArgs.md) +- [IBaseChipEventArgs](interfaces/IBaseChipEventArgs.md) +- [IBaseChipsAreaEventArgs](interfaces/IBaseChipsAreaEventArgs.md) +- [IBaseEventArgs](interfaces/IBaseEventArgs.md) +- [IBaseSearchInfo](interfaces/IBaseSearchInfo.md) +- [IButtonEventArgs](interfaces/IButtonEventArgs.md) +- [IButtonGroupEventArgs](interfaces/IButtonGroupEventArgs.md) +- [ICachedViewLoadedEventArgs](interfaces/ICachedViewLoadedEventArgs.md) +- [ICellPosition](interfaces/ICellPosition.md) +- [IChangeCheckboxEventArgs](interfaces/IChangeCheckboxEventArgs.md) +- [IChangeProgressEventArgs](interfaces/IChangeProgressEventArgs.md) +- [IChipClickEventArgs](interfaces/IChipClickEventArgs.md) +- [IChipEnterDragAreaEventArgs](interfaces/IChipEnterDragAreaEventArgs.md) +- [IChipKeyDownEventArgs](interfaces/IChipKeyDownEventArgs.md) +- [IChipsAreaReorderEventArgs](interfaces/IChipsAreaReorderEventArgs.md) +- [IChipsAreaSelectEventArgs](interfaces/IChipsAreaSelectEventArgs.md) +- [IChipSelectEventArgs](interfaces/IChipSelectEventArgs.md) +- [IClipboardOptions](interfaces/IClipboardOptions.md) +- [IColumnEditorOptions](interfaces/IColumnEditorOptions.md) +- [IColumnExportingEventArgs](interfaces/IColumnExportingEventArgs.md) +- [IColumnInfo](interfaces/IColumnInfo.md) +- [IColumnList](interfaces/IColumnList.md) +- [IColumnMovingEndEventArgs](interfaces/IColumnMovingEndEventArgs.md) +- [IColumnMovingEventArgs](interfaces/IColumnMovingEventArgs.md) +- [IColumnMovingStartEventArgs](interfaces/IColumnMovingStartEventArgs.md) +- [IColumnPipeArgs](interfaces/IColumnPipeArgs.md) +- [IColumnResizeEventArgs](interfaces/IColumnResizeEventArgs.md) +- [IColumnResizingEventArgs](interfaces/IColumnResizingEventArgs.md) +- [IColumnSelectionEventArgs](interfaces/IColumnSelectionEventArgs.md) +- [IColumnSelectionState](interfaces/IColumnSelectionState.md) +- [IColumnState](interfaces/IColumnState.md) +- [IColumnToggledEventArgs](interfaces/IColumnToggledEventArgs.md) +- [IColumnVisibilityChangedEventArgs](interfaces/IColumnVisibilityChangedEventArgs.md) +- [IColumnVisibilityChangingEventArgs](interfaces/IColumnVisibilityChangingEventArgs.md) +- [IComboFilteringOptions](interfaces/IComboFilteringOptions.md) +- [IComboItemAdditionEvent](interfaces/IComboItemAdditionEvent.md) +- [IComboSearchInputEventArgs](interfaces/IComboSearchInputEventArgs.md) +- [IComboSelectionChangedEventArgs](interfaces/IComboSelectionChangedEventArgs.md) +- [IComboSelectionChangingEventArgs](interfaces/IComboSelectionChangingEventArgs.md) +- [IconFamily](interfaces/IconFamily.md) +- [IconMeta](interfaces/IconMeta.md) +- [ICsvExportEndedEventArgs](interfaces/ICsvExportEndedEventArgs.md) +- [IDataCloneStrategy](interfaces/IDataCloneStrategy.md) +- [IDateParts](interfaces/IDateParts.md) +- [IDatePickerValidationFailedEventArgs](interfaces/IDatePickerValidationFailedEventArgs.md) +- [IDialogCancellableEventArgs](interfaces/IDialogCancellableEventArgs.md) +- [IDialogEventArgs](interfaces/IDialogEventArgs.md) +- [IDimensionsChange](interfaces/IDimensionsChange.md) +- [IDragBaseEventArgs](interfaces/IDragBaseEventArgs.md) +- [IDragCustomTransitionArgs](interfaces/IDragCustomTransitionArgs.md) +- [IDragGhostBaseEventArgs](interfaces/IDragGhostBaseEventArgs.md) +- [IDragMoveEventArgs](interfaces/IDragMoveEventArgs.md) +- [IDragStartEventArgs](interfaces/IDragStartEventArgs.md) +- [IDropBaseEventArgs](interfaces/IDropBaseEventArgs.md) +- [IDropDownNavigationDirective](interfaces/IDropDownNavigationDirective.md) +- [IDropDroppedEventArgs](interfaces/IDropDroppedEventArgs.md) +- [IDropStrategy](interfaces/IDropStrategy.md) +- [IExcelExportEndedEventArgs](interfaces/IExcelExportEndedEventArgs.md) +- [IExpansionPanelCancelableEventArgs](interfaces/IExpansionPanelCancelableEventArgs.md) +- [IExpansionPanelEventArgs](interfaces/IExpansionPanelEventArgs.md) +- [IExportRecord](interfaces/IExportRecord.md) +- [IExpressionTree](interfaces/IExpressionTree.md) +- [IFieldEditorOptions](interfaces/IFieldEditorOptions.md) +- [IFieldPipeArgs](interfaces/IFieldPipeArgs.md) +- [IFieldValidationState](interfaces/IFieldValidationState.md) +- [IFilteringEventArgs](interfaces/IFilteringEventArgs.md) +- [IFilteringExpression](interfaces/IFilteringExpression.md) +- [IFilteringExpressionsTree](interfaces/IFilteringExpressionsTree.md) +- [IFilteringOperation](interfaces/IFilteringOperation.md) +- [IFilteringState](interfaces/IFilteringState.md) +- [IFilteringStrategy](interfaces/IFilteringStrategy.md) +- [IFormattedParts](interfaces/IFormattedParts.md) +- [IFormattingOptions](interfaces/IFormattingOptions.md) +- [IFormattingViews](interfaces/IFormattingViews.md) +- [~~IForOfDataChangeEventArgs~~](interfaces/IForOfDataChangeEventArgs.md) +- [~~IForOfDataChangingEventArgs~~](interfaces/IForOfDataChangingEventArgs.md) +- [IForOfState](interfaces/IForOfState.md) +- [IgcCalendarBaseEventMap](interfaces/IgcCalendarBaseEventMap.md) +- [IGridCellEventArgs](interfaces/IGridCellEventArgs.md) +- [IGridClipboardEvent](interfaces/IGridClipboardEvent.md) +- [IGridContextMenuEventArgs](interfaces/IGridContextMenuEventArgs.md) +- [IGridCreatedEventArgs](interfaces/IGridCreatedEventArgs.md) +- [IGridDataBindable](interfaces/IGridDataBindable.md) +- [IGridEditDoneEventArgs](interfaces/IGridEditDoneEventArgs.md) +- [IGridEditEventArgs](interfaces/IGridEditEventArgs.md) +- [IGridFormGroupCreatedEventArgs](interfaces/IGridFormGroupCreatedEventArgs.md) +- [IGridGroupingStrategy](interfaces/IGridGroupingStrategy.md) +- [IGridKeydownEventArgs](interfaces/IGridKeydownEventArgs.md) +- [IGridMergeStrategy](interfaces/IGridMergeStrategy.md) +- [IGridRowEventArgs](interfaces/IGridRowEventArgs.md) +- [IGridScrollEventArgs](interfaces/IGridScrollEventArgs.md) +- [IGridSortingStrategy](interfaces/IGridSortingStrategy.md) +- [IGridState](interfaces/IGridState.md) +- [IGridStateCollection](interfaces/IGridStateCollection.md) +- [IGridStateOptions](interfaces/IGridStateOptions.md) +- [IGridToolbarExportEventArgs](interfaces/IGridToolbarExportEventArgs.md) +- [IGridValidationState](interfaces/IGridValidationState.md) +- [IGridValidationStatusEventArgs](interfaces/IGridValidationStatusEventArgs.md) +- [IGroupByExpandState](interfaces/IGroupByExpandState.md) +- [IGroupByKey](interfaces/IGroupByKey.md) +- [IGroupByRecord](interfaces/IGroupByRecord.md) +- [IGroupByResult](interfaces/IGroupByResult.md) +- [IGroupingDoneEventArgs](interfaces/IGroupingDoneEventArgs.md) +- [IGroupingExpression](interfaces/IGroupingExpression.md) +- [IGroupingState](interfaces/IGroupingState.md) +- [IgxAddRowParent](interfaces/IgxAddRowParent.md) +- [IgxCellTemplateContext](interfaces/IgxCellTemplateContext.md) +- [IgxColumnTemplateContext](interfaces/IgxColumnTemplateContext.md) +- [IgxDateTimeEditorEventArgs](interfaces/IgxDateTimeEditorEventArgs.md) +- [IgxDragCustomEventDetails](interfaces/IgxDragCustomEventDetails.md) +- [IgxExpansionPanelBase](interfaces/IgxExpansionPanelBase.md) +- [IgxExporterEvent](interfaces/IgxExporterEvent.md) +- [IgxFilterItem](interfaces/IgxFilterItem.md) +- [IgxGridEmptyTemplateContext](interfaces/IgxGridEmptyTemplateContext.md) +- [IgxGridHeaderTemplateContext](interfaces/IgxGridHeaderTemplateContext.md) +- [IgxGridMasterDetailContext](interfaces/IgxGridMasterDetailContext.md) +- [IgxGridPaginatorTemplateContext](interfaces/IgxGridPaginatorTemplateContext.md) +- [IgxGridRowDragGhostContext](interfaces/IgxGridRowDragGhostContext.md) +- [IgxGridRowEditActionsTemplateContext](interfaces/IgxGridRowEditActionsTemplateContext.md) +- [IgxGridRowEditTemplateContext](interfaces/IgxGridRowEditTemplateContext.md) +- [IgxGridRowEditTextTemplateContext](interfaces/IgxGridRowEditTextTemplateContext.md) +- [IgxGridRowTemplateContext](interfaces/IgxGridRowTemplateContext.md) +- [IgxGridTemplateContext](interfaces/IgxGridTemplateContext.md) +- [IgxGridToolbarTemplateContext](interfaces/IgxGridToolbarTemplateContext.md) +- [IgxGroupByRowSelectorTemplateContext](interfaces/IgxGroupByRowSelectorTemplateContext.md) +- [IgxGroupByRowSelectorTemplateDetails](interfaces/IgxGroupByRowSelectorTemplateDetails.md) +- [IgxGroupByRowTemplateContext](interfaces/IgxGroupByRowTemplateContext.md) +- [IgxHeadSelectorTemplateContext](interfaces/IgxHeadSelectorTemplateContext.md) +- [IgxHeadSelectorTemplateDetails](interfaces/IgxHeadSelectorTemplateDetails.md) +- [IgxIconLoadedEvent](interfaces/IgxIconLoadedEvent.md) +- [IgxPivotGridValueTemplateContext](interfaces/IgxPivotGridValueTemplateContext.md) +- [IgxRowSelectorTemplateContext](interfaces/IgxRowSelectorTemplateContext.md) +- [IgxRowSelectorTemplateDetails](interfaces/IgxRowSelectorTemplateDetails.md) +- [IgxSummaryResult](interfaces/IgxSummaryResult.md) +- [IgxSummaryTemplateContext](interfaces/IgxSummaryTemplateContext.md) +- [IgxTimePickerValidationFailedEventArgs](interfaces/IgxTimePickerValidationFailedEventArgs.md) +- [IgxTree](interfaces/IgxTree.md) +- [IgxTreeGridAPIService](interfaces/IgxTreeGridAPIService.md) +- [IgxTreeNode](interfaces/IgxTreeNode.md) +- [IInputResourceStrings](interfaces/IInputResourceStrings.md) +- [IListItemClickEventArgs](interfaces/IListItemClickEventArgs.md) +- [IListItemPanningEventArgs](interfaces/IListItemPanningEventArgs.md) +- [IMaskEventArgs](interfaces/IMaskEventArgs.md) +- [IMergeByResult](interfaces/IMergeByResult.md) +- [IMultiRowLayoutNode](interfaces/IMultiRowLayoutNode.md) +- [IPageCancellableEventArgs](interfaces/IPageCancellableEventArgs.md) +- [IPageEventArgs](interfaces/IPageEventArgs.md) +- [IPagingState](interfaces/IPagingState.md) +- [IPanStateChangeEventArgs](interfaces/IPanStateChangeEventArgs.md) +- [IPathSegment](interfaces/IPathSegment.md) +- [IPdfExportEndedEventArgs](interfaces/IPdfExportEndedEventArgs.md) +- [IPinColumnCancellableEventArgs](interfaces/IPinColumnCancellableEventArgs.md) +- [IPinColumnEventArgs](interfaces/IPinColumnEventArgs.md) +- [IPinningConfig](interfaces/IPinningConfig.md) +- [IPinRowEventArgs](interfaces/IPinRowEventArgs.md) +- [IPivotAggregator](interfaces/IPivotAggregator.md) +- [IPivotConfiguration](interfaces/IPivotConfiguration.md) +- [IPivotConfigurationChangedEventArgs](interfaces/IPivotConfigurationChangedEventArgs.md) +- [IPivotDateDimensionOptions](interfaces/IPivotDateDimensionOptions.md) +- [IPivotDimension](interfaces/IPivotDimension.md) +- [IPivotDimensionData](interfaces/IPivotDimensionData.md) +- [IPivotDimensionStrategy](interfaces/IPivotDimensionStrategy.md) +- [IPivotGridColumn](interfaces/IPivotGridColumn.md) +- [IPivotGridGroupRecord](interfaces/IPivotGridGroupRecord.md) +- [IPivotGridHorizontalGroup](interfaces/IPivotGridHorizontalGroup.md) +- [IPivotGridRecord](interfaces/IPivotGridRecord.md) +- [IPivotKeys](interfaces/IPivotKeys.md) +- [IPivotUISettings](interfaces/IPivotUISettings.md) +- [IPivotValue](interfaces/IPivotValue.md) +- [IPositionStrategy](interfaces/IPositionStrategy.md) +- [IRangeSliderValue](interfaces/IRangeSliderValue.md) +- [IRecordValidationState](interfaces/IRecordValidationState.md) +- [IResourceStrings](interfaces/IResourceStrings.md) +- [IRowDataCancelableEventArgs](interfaces/IRowDataCancelableEventArgs.md) +- [IRowDataEventArgs](interfaces/IRowDataEventArgs.md) +- [IRowDragEndEventArgs](interfaces/IRowDragEndEventArgs.md) +- [IRowDragStartEventArgs](interfaces/IRowDragStartEventArgs.md) +- [IRowExportingEventArgs](interfaces/IRowExportingEventArgs.md) +- [IRowSelectionEventArgs](interfaces/IRowSelectionEventArgs.md) +- [IRowToggleEventArgs](interfaces/IRowToggleEventArgs.md) +- [IScrollStrategy](interfaces/IScrollStrategy.md) +- [ISearchInfo](interfaces/ISearchInfo.md) +- [ISelectionEventArgs](interfaces/ISelectionEventArgs.md) +- [ISelectionKeyboardState](interfaces/ISelectionKeyboardState.md) +- [ISelectionNode](interfaces/ISelectionNode.md) +- [ISelectionPointerState](interfaces/ISelectionPointerState.md) +- [ISimpleComboSelectionChangedEventArgs](interfaces/ISimpleComboSelectionChangedEventArgs.md) +- [ISimpleComboSelectionChangingEventArgs](interfaces/ISimpleComboSelectionChangingEventArgs.md) +- [ISizeInfo](interfaces/ISizeInfo.md) +- [ISlideEventArgs](interfaces/ISlideEventArgs.md) +- [ISliderValueChangeEventArgs](interfaces/ISliderValueChangeEventArgs.md) +- [ISortingEventArgs](interfaces/ISortingEventArgs.md) +- [ISortingExpression](interfaces/ISortingExpression.md) +- [ISortingOptions](interfaces/ISortingOptions.md) +- [ISortingStrategy](interfaces/ISortingStrategy.md) +- [ISplitterBarResizeEventArgs](interfaces/ISplitterBarResizeEventArgs.md) +- [IStepChangedEventArgs](interfaces/IStepChangedEventArgs.md) +- [IStepChangingEventArgs](interfaces/IStepChangingEventArgs.md) +- [ISummaryExpression](interfaces/ISummaryExpression.md) +- [ISummaryRecord](interfaces/ISummaryRecord.md) +- [ITabsBaseEventArgs](interfaces/ITabsBaseEventArgs.md) +- [ITabsSelectedIndexChangingEventArgs](interfaces/ITabsSelectedIndexChangingEventArgs.md) +- [ITabsSelectedItemChangeEventArgs](interfaces/ITabsSelectedItemChangeEventArgs.md) +- [IToggleView](interfaces/IToggleView.md) +- [ITooltipHideEventArgs](interfaces/ITooltipHideEventArgs.md) +- [ITooltipShowEventArgs](interfaces/ITooltipShowEventArgs.md) +- [ITreeGridRecord](interfaces/ITreeGridRecord.md) +- [ITreeNodeEditedEvent](interfaces/ITreeNodeEditedEvent.md) +- [ITreeNodeEditingEvent](interfaces/ITreeNodeEditingEvent.md) +- [ITreeNodeSelectionEvent](interfaces/ITreeNodeSelectionEvent.md) +- [ITreeNodeToggledEventArgs](interfaces/ITreeNodeToggledEventArgs.md) +- [ITreeNodeTogglingEventArgs](interfaces/ITreeNodeTogglingEventArgs.md) +- [IValuesChange](interfaces/IValuesChange.md) +- [IViewChangeEventArgs](interfaces/IViewChangeEventArgs.md) +- [IViewDateChangeEventArgs](interfaces/IViewDateChangeEventArgs.md) +- [OverlayAnimationEventArgs](interfaces/OverlayAnimationEventArgs.md) +- [OverlayCancelableEventArgs](interfaces/OverlayCancelableEventArgs.md) +- [OverlayClosingEventArgs](interfaces/OverlayClosingEventArgs.md) +- [OverlayCreateSettings](interfaces/OverlayCreateSettings.md) +- [OverlayEventArgs](interfaces/OverlayEventArgs.md) +- [OverlaySettings](interfaces/OverlaySettings.md) +- [PdfUnicodeFont](interfaces/PdfUnicodeFont.md) +- [PivotGridType](interfaces/PivotGridType.md) +- [PivotRowHeaderGroupType](interfaces/PivotRowHeaderGroupType.md) +- [PositionSettings](interfaces/PositionSettings.md) +- [RowType](interfaces/RowType.md) +- [Size](interfaces/Size.md) +- [State](interfaces/State.md) +- [StateUpdateEvent](interfaces/StateUpdateEvent.md) +- [ToggleViewCancelableEventArgs](interfaces/ToggleViewCancelableEventArgs.md) +- [ToggleViewEventArgs](interfaces/ToggleViewEventArgs.md) +- [Transaction](interfaces/Transaction.md) +- [TransactionService](interfaces/TransactionService.md) +- [TreeGridType](interfaces/TreeGridType.md) + +## Type Aliases + +- [ButtonGroupAlignment](type-aliases/ButtonGroupAlignment.md) +- [CalendarRangeParams](type-aliases/CalendarRangeParams.md) +- [CalendarSelection](type-aliases/CalendarSelection.md) +- [CarouselAnimationType](type-aliases/CarouselAnimationType.md) +- [CarouselIndicatorsOrientation](type-aliases/CarouselIndicatorsOrientation.md) +- [ColumnDisplayOrder](type-aliases/ColumnDisplayOrder.md) +- [DayInterval](type-aliases/DayInterval.md) +- [DayParameter](type-aliases/DayParameter.md) +- [DropDownActionKey](type-aliases/DropDownActionKey.md) +- [FilterMode](type-aliases/FilterMode.md) +- [GridCellMergeMode](type-aliases/GridCellMergeMode.md) +- [GridFeatures](type-aliases/GridFeatures.md) +- [GridKeydownTargetType](type-aliases/GridKeydownTargetType.md) +- [GridPagingMode](type-aliases/GridPagingMode.md) +- [GridSelectionMode](type-aliases/GridSelectionMode.md) +- [GridSummaryCalculationMode](type-aliases/GridSummaryCalculationMode.md) +- [GridSummaryPosition](type-aliases/GridSummaryPosition.md) +- [GridValidationTrigger](type-aliases/GridValidationTrigger.md) +- [HorizontalAnimationType](type-aliases/HorizontalAnimationType.md) +- [IActionStripResourceStrings](type-aliases/IActionStripResourceStrings.md) +- [IBannerResourceStrings](type-aliases/IBannerResourceStrings.md) +- [ICalendarResourceStrings](type-aliases/ICalendarResourceStrings.md) +- [ICarouselResourceStrings](type-aliases/ICarouselResourceStrings.md) +- [IChipResourceStrings](type-aliases/IChipResourceStrings.md) +- [IComboResourceStrings](type-aliases/IComboResourceStrings.md) +- [IconReference](type-aliases/IconReference.md) +- [IDatePickerResourceStrings](type-aliases/IDatePickerResourceStrings.md) +- [IDateRangePickerResourceStrings](type-aliases/IDateRangePickerResourceStrings.md) +- [IGridResourceStrings](type-aliases/IGridResourceStrings.md) +- [IgxAvatarSize](type-aliases/IgxAvatarSize.md) +- [IgxAvatarType](type-aliases/IgxAvatarType.md) +- [IgxBadgeType](type-aliases/IgxBadgeType.md) +- [IgxButtonType](type-aliases/IgxButtonType.md) +- [IgxCalendarView](type-aliases/IgxCalendarView.md) +- [IgxCardActionsLayout](type-aliases/IgxCardActionsLayout.md) +- [IgxChipTypeVariant](type-aliases/IgxChipTypeVariant.md) +- [IgxDividerType](type-aliases/IgxDividerType.md) +- [IgxExporterOptions](type-aliases/IgxExporterOptions.md) +- [IgxIconButtonType](type-aliases/IgxIconButtonType.md) +- [IgxInputGroupType](type-aliases/IgxInputGroupType.md) +- [IgxProgressType](type-aliases/IgxProgressType.md) +- [IgxSliderType](type-aliases/IgxSliderType.md) +- [IgxStepperOrientation](type-aliases/IgxStepperOrientation.md) +- [IgxStepperTitlePosition](type-aliases/IgxStepperTitlePosition.md) +- [IgxStepType](type-aliases/IgxStepType.md) +- [IgxTabsAlignment](type-aliases/IgxTabsAlignment.md) +- [IgxTextAlign](type-aliases/IgxTextAlign.md) +- [IgxTheme](type-aliases/IgxTheme.md) +- [IgxTreeSearchResolver](type-aliases/IgxTreeSearchResolver.md) +- [IgxTreeSelectionType](type-aliases/IgxTreeSelectionType.md) +- [IListResourceStrings](type-aliases/IListResourceStrings.md) +- [IPaginatorResourceStrings](type-aliases/IPaginatorResourceStrings.md) +- [IQueryBuilderResourceStrings](type-aliases/IQueryBuilderResourceStrings.md) +- [ITimePickerResourceStrings](type-aliases/ITimePickerResourceStrings.md) +- [ITreeResourceStrings](type-aliases/ITreeResourceStrings.md) +- [KeyOfOrString](type-aliases/KeyOfOrString.md) +- [LabelPosition](type-aliases/LabelPosition.md) +- [PickerCalendarOrientation](type-aliases/PickerCalendarOrientation.md) +- [PickerHeaderOrientation](type-aliases/PickerHeaderOrientation.md) +- [PickerInteractionMode](type-aliases/PickerInteractionMode.md) +- [PivotAggregation](type-aliases/PivotAggregation.md) +- [PivotAggregationType](type-aliases/PivotAggregationType.md) +- [RadioGroupAlignment](type-aliases/RadioGroupAlignment.md) +- [SelectionState](type-aliases/SelectionState.md) +- [SliderHandle](type-aliases/SliderHandle.md) +- [TickLabelsOrientation](type-aliases/TickLabelsOrientation.md) +- [TicksOrientation](type-aliases/TicksOrientation.md) +- [ValidationStatus](type-aliases/ValidationStatus.md) +- [VerticalAnimationType](type-aliases/VerticalAnimationType.md) +- [WeekDays](type-aliases/WeekDays.md) + +## Variables + +- [ActionStripResourceStringsEN](variables/ActionStripResourceStringsEN.md) +- [BannerResourceStringsEN](variables/BannerResourceStringsEN.md) +- [ButtonGroupAlignment](variables/ButtonGroupAlignment.md) +- [CalendarResourceStringsEN](variables/CalendarResourceStringsEN.md) +- [CalendarSelection](variables/CalendarSelection.md) +- [CarouselAnimationType](variables/CarouselAnimationType.md) +- [CarouselIndicatorsOrientation](variables/CarouselIndicatorsOrientation.md) +- [CarouselResourceStringsEN](variables/CarouselResourceStringsEN.md) +- [ChipResourceStringsEN](variables/ChipResourceStringsEN.md) +- [ColumnDisplayOrder](variables/ColumnDisplayOrder.md) +- [ComboResourceStringsEN](variables/ComboResourceStringsEN.md) +- [DatePickerResourceStringsEN](variables/DatePickerResourceStringsEN.md) +- [DateRangePickerResourceStringsEN](variables/DateRangePickerResourceStringsEN.md) +- [daysInWeek](variables/daysInWeek.md) +- [DEFAULT\_LOCALE](variables/DEFAULT_LOCALE.md) +- [DEFAULT\_OWNER](variables/DEFAULT_OWNER.md) +- [DEFAULT\_PIVOT\_KEYS](variables/DEFAULT_PIVOT_KEYS.md) +- [DropDownActionKey](variables/DropDownActionKey.md) +- [FilterMode](variables/FilterMode.md) +- [GRID\_LEVEL\_COL](variables/GRID_LEVEL_COL.md) +- [GRID\_PARENT](variables/GRID_PARENT.md) +- [GRID\_ROOT\_SUMMARY](variables/GRID_ROOT_SUMMARY.md) +- [GridCellMergeMode](variables/GridCellMergeMode.md) +- [GridPagingMode](variables/GridPagingMode.md) +- [GridResourceStringsEN](variables/GridResourceStringsEN.md) +- [GridSelectionMode](variables/GridSelectionMode.md) +- [GridSummaryCalculationMode](variables/GridSummaryCalculationMode.md) +- [GridSummaryPosition](variables/GridSummaryPosition.md) +- [HorizontalAnimationType](variables/HorizontalAnimationType.md) +- [I18N\_FORMATTER](variables/I18N_FORMATTER.md) +- [IGX\_ACCORDION\_DIRECTIVES](variables/IGX_ACCORDION_DIRECTIVES.md) +- [IGX\_ACTION\_STRIP\_DIRECTIVES](variables/IGX_ACTION_STRIP_DIRECTIVES.md) +- [IGX\_BANNER\_DIRECTIVES](variables/IGX_BANNER_DIRECTIVES.md) +- [IGX\_BOTTOM\_NAV\_DIRECTIVES](variables/IGX_BOTTOM_NAV_DIRECTIVES.md) +- [IGX\_BUTTON\_GROUP\_DIRECTIVES](variables/IGX_BUTTON_GROUP_DIRECTIVES.md) +- [IGX\_CALENDAR\_DIRECTIVES](variables/IGX_CALENDAR_DIRECTIVES.md) +- [IGX\_CALENDAR\_VIEW\_ITEM](variables/IGX_CALENDAR_VIEW_ITEM.md) +- [IGX\_CARD\_DIRECTIVES](variables/IGX_CARD_DIRECTIVES.md) +- [IGX\_CAROUSEL\_DIRECTIVES](variables/IGX_CAROUSEL_DIRECTIVES.md) +- [IGX\_CHIPS\_DIRECTIVES](variables/IGX_CHIPS_DIRECTIVES.md) +- [IGX\_CIRCULAR\_PROGRESS\_BAR\_DIRECTIVES](variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES.md) +- [IGX\_COMBO\_COMPONENT](variables/IGX_COMBO_COMPONENT.md) +- [IGX\_COMBO\_DIRECTIVES](variables/IGX_COMBO_DIRECTIVES.md) +- [IGX\_DATE\_PICKER\_DIRECTIVES](variables/IGX_DATE_PICKER_DIRECTIVES.md) +- [IGX\_DATE\_RANGE\_PICKER\_DIRECTIVES](variables/IGX_DATE_RANGE_PICKER_DIRECTIVES.md) +- [IGX\_DIALOG\_DIRECTIVES](variables/IGX_DIALOG_DIRECTIVES.md) +- [IGX\_DRAG\_DROP\_DIRECTIVES](variables/IGX_DRAG_DROP_DIRECTIVES.md) +- [IGX\_DROP\_DOWN\_DIRECTIVES](variables/IGX_DROP_DOWN_DIRECTIVES.md) +- [IGX\_DROPDOWN\_BASE](variables/IGX_DROPDOWN_BASE.md) +- [IGX\_EXPANSION\_PANEL\_DIRECTIVES](variables/IGX_EXPANSION_PANEL_DIRECTIVES.md) +- [IGX\_GRID\_BASE](variables/IGX_GRID_BASE.md) +- [IGX\_GRID\_COMMON\_DIRECTIVES](variables/IGX_GRID_COMMON_DIRECTIVES.md) +- [IGX\_GRID\_DIRECTIVES](variables/IGX_GRID_DIRECTIVES.md) +- [IGX\_GRID\_SERVICE\_BASE](variables/IGX_GRID_SERVICE_BASE.md) +- [IGX\_GRID\_VALIDATION\_DIRECTIVES](variables/IGX_GRID_VALIDATION_DIRECTIVES.md) +- [IGX\_HIERARCHICAL\_GRID\_DIRECTIVES](variables/IGX_HIERARCHICAL_GRID_DIRECTIVES.md) +- [IGX\_INPUT\_GROUP\_DIRECTIVES](variables/IGX_INPUT_GROUP_DIRECTIVES.md) +- [IGX\_INPUT\_GROUP\_TYPE](variables/IGX_INPUT_GROUP_TYPE.md) +- [IGX\_LINEAR\_PROGRESS\_BAR\_DIRECTIVES](variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES.md) +- [IGX\_LIST\_DIRECTIVES](variables/IGX_LIST_DIRECTIVES.md) +- [IGX\_NAVBAR\_DIRECTIVES](variables/IGX_NAVBAR_DIRECTIVES.md) +- [IGX\_NAVIGATION\_DRAWER\_DIRECTIVES](variables/IGX_NAVIGATION_DRAWER_DIRECTIVES.md) +- [IGX\_PAGINATOR\_DIRECTIVES](variables/IGX_PAGINATOR_DIRECTIVES.md) +- [IGX\_PIVOT\_GRID\_DIRECTIVES](variables/IGX_PIVOT_GRID_DIRECTIVES.md) +- [IGX\_PROGRESS\_BAR\_DIRECTIVES](variables/IGX_PROGRESS_BAR_DIRECTIVES.md) +- [IGX\_QUERY\_BUILDER\_DIRECTIVES](variables/IGX_QUERY_BUILDER_DIRECTIVES.md) +- [IGX\_RADIO\_GROUP\_DIRECTIVES](variables/IGX_RADIO_GROUP_DIRECTIVES.md) +- [IGX\_SELECT\_DIRECTIVES](variables/IGX_SELECT_DIRECTIVES.md) +- [IGX\_SIMPLE\_COMBO\_DIRECTIVES](variables/IGX_SIMPLE_COMBO_DIRECTIVES.md) +- [IGX\_SLIDER\_DIRECTIVES](variables/IGX_SLIDER_DIRECTIVES.md) +- [IGX\_SPLITTER\_DIRECTIVES](variables/IGX_SPLITTER_DIRECTIVES.md) +- [IGX\_STEPPER\_DIRECTIVES](variables/IGX_STEPPER_DIRECTIVES.md) +- [IGX\_TABS\_DIRECTIVES](variables/IGX_TABS_DIRECTIVES.md) +- [IGX\_TIME\_PICKER\_DIRECTIVES](variables/IGX_TIME_PICKER_DIRECTIVES.md) +- [IGX\_TOOLTIP\_DIRECTIVES](variables/IGX_TOOLTIP_DIRECTIVES.md) +- [IGX\_TREE\_DIRECTIVES](variables/IGX_TREE_DIRECTIVES.md) +- [IGX\_TREE\_GRID\_DIRECTIVES](variables/IGX_TREE_GRID_DIRECTIVES.md) +- [IgxAvatarSize](variables/IgxAvatarSize.md) +- [IgxAvatarType](variables/IgxAvatarType.md) +- [IgxBadgeType](variables/IgxBadgeType.md) +- [IgxCalendarView](variables/IgxCalendarView.md) +- [IgxCardActionsLayout](variables/IgxCardActionsLayout.md) +- [IgxChipTypeVariant](variables/IgxChipTypeVariant.md) +- [IgxDividerType](variables/IgxDividerType.md) +- [IgxGridTransaction](variables/IgxGridTransaction.md) +- [IgxInputGroupEnum](variables/IgxInputGroupEnum.md) +- [IgxProgressType](variables/IgxProgressType.md) +- [IgxSliderType](variables/IgxSliderType.md) +- [IgxStepperOrientation](variables/IgxStepperOrientation.md) +- [IgxStepperTitlePosition](variables/IgxStepperTitlePosition.md) +- [IgxStepType](variables/IgxStepType.md) +- [IgxTabsAlignment](variables/IgxTabsAlignment.md) +- [IgxTextAlign](variables/IgxTextAlign.md) +- [IgxTreeSelectionType](variables/IgxTreeSelectionType.md) +- [IndigoIcons](variables/IndigoIcons.md) +- [InputResourceStringsEN](variables/InputResourceStringsEN.md) +- [LabelPosition](variables/LabelPosition.md) +- [ListResourceStringsEN](variables/ListResourceStringsEN.md) +- [NAVIGATION\_KEYS](variables/NAVIGATION_KEYS.md) +- [PaginatorResourceStringsEN](variables/PaginatorResourceStringsEN.md) +- [PickerCalendarOrientation](variables/PickerCalendarOrientation.md) +- [PickerHeaderOrientation](variables/PickerHeaderOrientation.md) +- [PickerInteractionMode](variables/PickerInteractionMode.md) +- [QueryBuilderResourceStringsEN](variables/QueryBuilderResourceStringsEN.md) +- [RadioGroupAlignment](variables/RadioGroupAlignment.md) +- [setCurrentI18n](variables/setCurrentI18n.md) +- [SliderHandle](variables/SliderHandle.md) +- [THEME\_TOKEN](variables/THEME_TOKEN.md) +- [TickLabelsOrientation](variables/TickLabelsOrientation.md) +- [TicksOrientation](variables/TicksOrientation.md) +- [TimePickerResourceStringsEN](variables/TimePickerResourceStringsEN.md) +- [TreeResourceStringsEN](variables/TreeResourceStringsEN.md) +- [VerticalAnimationType](variables/VerticalAnimationType.md) + +## Functions + +- [areSameMonth](functions/areSameMonth.md) +- [calendarRange](functions/calendarRange.md) +- [changei18n](functions/changei18n.md) +- [clearAll](functions/clearAll.md) +- [clearMeasures](functions/clearMeasures.md) +- [columnFieldPath](functions/columnFieldPath.md) +- [comboIgnoreDiacriticsFilter](functions/comboIgnoreDiacriticsFilter.md) +- [copyDescriptors](functions/copyDescriptors.md) +- [first](functions/first.md) +- [formatToParts](functions/formatToParts.md) +- [generateExpressionsList](functions/generateExpressionsList.md) +- [generateMonth](functions/generateMonth.md) +- [getClosestActiveDate](functions/getClosestActiveDate.md) +- [getComponentCssSizeVar](functions/getComponentCssSizeVar.md) +- [getComponentSize](functions/getComponentSize.md) +- [getComponentTheme](functions/getComponentTheme.md) +- [getCurrentResourceStrings](functions/getCurrentResourceStrings.md) +- [getHierarchy](functions/getHierarchy.md) +- [getMeasures](functions/getMeasures.md) +- [getNextActiveDate](functions/getNextActiveDate.md) +- [getPreviousActiveDate](functions/getPreviousActiveDate.md) +- [getUUID](functions/getUUID.md) +- [getYearRange](functions/getYearRange.md) +- [intoChunks](functions/intoChunks.md) +- [isConstructor](functions/isConstructor.md) +- [isDateInRanges](functions/isDateInRanges.md) +- [isHierarchyMatch](functions/isHierarchyMatch.md) +- [isLeap](functions/isLeap.md) +- [isNextMonth](functions/isNextMonth.md) +- [isPreviousMonth](functions/isPreviousMonth.md) +- [isTree](functions/isTree.md) +- [last](functions/last.md) +- [modulo](functions/modulo.md) +- [monthRange](functions/monthRange.md) +- [normalizeURI](functions/normalizeURI.md) +- [notifyChanges](functions/notifyChanges.md) +- [onResourceChangeHandle](functions/onResourceChangeHandle.md) +- [provideIgniteIntl](functions/provideIgniteIntl.md) +- [range](functions/range.md) +- [recreateExpression](functions/recreateExpression.md) +- [recreateTree](functions/recreateTree.md) +- [recreateTreeFromFields](functions/recreateTreeFromFields.md) +- [registerI18n](functions/registerI18n.md) +- [rem](functions/rem.md) +- [startMeasure](functions/startMeasure.md) +- [toCalendarDay](functions/toCalendarDay.md) +- [WatchColumnChanges](functions/WatchColumnChanges.md) +- [weekDay](functions/weekDay.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/AbsoluteScrollStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/AbsoluteScrollStrategy.md new file mode 100644 index 000000000..b47c2137e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/AbsoluteScrollStrategy.md @@ -0,0 +1,114 @@ +# Class: AbsoluteScrollStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts#L8) + +On scroll reposition the overlay content. + +## Extends + +- [`ScrollStrategy`](ScrollStrategy.md) + +## Constructors + +### Constructor + +> **new AbsoluteScrollStrategy**(`scrollContainer?`): `AbsoluteScrollStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts#L16) + +#### Parameters + +##### scrollContainer? + +`HTMLElement` + +#### Returns + +`AbsoluteScrollStrategy` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`constructor`](ScrollStrategy.md#constructor) + +## Methods + +### attach() + +> **attach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts#L48) + +Attaches the strategy +```typescript +settings.scrollStrategy.attach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`attach`](ScrollStrategy.md#attach) + +*** + +### detach() + +> **detach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts#L64) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`detach`](ScrollStrategy.md#detach) + +*** + +### initialize() + +> **initialize**(`document`, `overlayService`, `id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts#L31) + +Initializes the strategy. Should be called once + +#### Parameters + +##### document + +`Document` + +reference to Document object. + +##### overlayService + +[`IgxOverlayService`](IgxOverlayService.md) + +IgxOverlay service to use in this strategy. + +##### id + +`string` + +Unique id for this strategy. +```typescript +settings.scrollStrategy.initialize(document, overlay, id); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`initialize`](ScrollStrategy.md#initialize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/AutoPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/AutoPositionStrategy.md new file mode 100644 index 000000000..07b1892a0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/AutoPositionStrategy.md @@ -0,0 +1,446 @@ +# Class: AutoPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts#L10) + +Positions the element as in **Connected** positioning strategy and re-positions the element in +the view port (calculating a different start point) in case the element is partially getting out of view + +## Extends + +- [`BaseFitPositionStrategy`](BaseFitPositionStrategy.md) + +## Extended by + +- [`TooltipPositionStrategy`](TooltipPositionStrategy.md) + +## Constructors + +### Constructor + +> **new AutoPositionStrategy**(`settings?`): `AutoPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L33) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`AutoPositionStrategy` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`constructor`](BaseFitPositionStrategy.md#constructor) + +## Properties + +### \_initialSettings + +> `protected` **\_initialSettings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L6) + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`_initialSettings`](BaseFitPositionStrategy.md#_initialsettings) + +*** + +### \_initialSize + +> `protected` **\_initialSize**: [`Size`](../interfaces/Size.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L5) + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`_initialSize`](BaseFitPositionStrategy.md#_initialsize) + +*** + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L21) + +PositionSettings to use when position the component in the overlay + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`settings`](BaseFitPositionStrategy.md#settings) + +## Methods + +### calculateElementRectangles() + +> `protected` **calculateElementRectangles**(`contentElement`, `target`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L67) + +Obtains the DomRect objects for the required elements - target and element to position + +#### Parameters + +##### contentElement + +`any` + +##### target + +`HTMLElement` \| [`Point`](Point.md) + +#### Returns + +`object` + +target and element DomRect objects + +##### elementRect + +> **elementRect**: `Partial`\<`DOMRect`\> + +##### targetRect + +> **targetRect**: `Partial`\<`DOMRect`\> + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`calculateElementRectangles`](BaseFitPositionStrategy.md#calculateelementrectangles) + +*** + +### calculateLeft() + +> `protected` **calculateLeft**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L81) + +Calculates the position of the left border of the element if it gets positioned +with provided start point and direction + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Start point of the target + +##### direction + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`calculateLeft`](BaseFitPositionStrategy.md#calculateleft) + +*** + +### calculateTop() + +> `protected` **calculateTop**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L99) + +Calculates the position of the top border of the element if it gets positioned +with provided position settings related to the target + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Start point of the target + +##### direction + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`calculateTop`](BaseFitPositionStrategy.md#calculatetop) + +*** + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L58) + +Creates clone of this position strategy + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +clone of this position strategy + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`clone`](BaseFitPositionStrategy.md#clone) + +*** + +### fitInViewport() + +> `protected` **fitInViewport**(`element`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts#L18) + +Fits the element into viewport according to the position settings + +#### Parameters + +##### element + +`HTMLElement` + +element to fit in viewport + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`void` + +#### Overrides + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`fitInViewport`](BaseFitPositionStrategy.md#fitinviewport) + +*** + +### getElementOffsets() + +> `protected` **getElementOffsets**(`connectedFit`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L82) + +Get element horizontal and vertical offsets by connectedFit +or `this.settings` if connectedFit offset is not defined. + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`object` + +horizontalOffset and verticalOffset + +##### horizontalOffset + +> **horizontalOffset**: `number` + +##### verticalOffset + +> **verticalOffset**: `number` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`getElementOffsets`](BaseFitPositionStrategy.md#getelementoffsets) + +*** + +### position() + +> **position**(`contentElement`, `size`, `document?`, `initialCall?`, `target?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L20) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +##### size + +[`Size`](../interfaces/Size.md) + +Size of the element + +##### document? + +`Document` + +reference to the Document object + +##### initialCall? + +`boolean` + +should be true if this is the initial call to the method + +##### target? + +`HTMLElement` \| [`Point`](Point.md) + +attaching target for the component to show +```typescript +settings.positionStrategy.position(content, size, document, true); +``` + +#### Returns + +`void` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`position`](BaseFitPositionStrategy.md#position) + +*** + +### setStyle() + +> `protected` **setStyle**(`element`, `targetRect`, `elementRect`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L97) + +Sets element's style which effectively positions provided element according +to provided position settings + +#### Parameters + +##### element + +`HTMLElement` + +Element to position + +##### targetRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of strategy target + +##### elementRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of the element + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`void` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`setStyle`](BaseFitPositionStrategy.md#setstyle) + +*** + +### shouldFitInViewPort() + +> `protected` **shouldFitInViewPort**(`connectedFit`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L113) + +Returns whether the element should fit in viewport + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`shouldFitInViewPort`](BaseFitPositionStrategy.md#shouldfitinviewport) + +*** + +### updateViewPortFit() + +> `protected` **updateViewPortFit**(`connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L44) + +Checks if element can fit in viewport and updates provided connectedFit +with the result + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit to update + +#### Returns + +`void` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`updateViewPortFit`](BaseFitPositionStrategy.md#updateviewportfit) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFilteringStrategy.md new file mode 100644 index 000000000..bb9df73a8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFilteringStrategy.md @@ -0,0 +1,281 @@ +# Abstract Class: BaseFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L39) + +## Extended by + +- [`NoopFilteringStrategy`](NoopFilteringStrategy.md) +- [`FilteringStrategy`](FilteringStrategy.md) +- [`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md) + +## Implements + +- [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +## Constructors + +### Constructor + +> **new BaseFilteringStrategy**(): `BaseFilteringStrategy` + +#### Returns + +`BaseFilteringStrategy` + +## Methods + +### filter() + +> `abstract` **filter**(`data`, `expressionsTree`, `advancedExpressionsTree?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L225) + +#### Parameters + +##### data + +`any`[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree? + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Implementation of + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md).[`filter`](../interfaces/IFilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +*** + +### getFieldValue() + +> `abstract` `protected` **getFieldValue**(`rec`, `fieldName`, `isDate?`, `isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L228) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any` + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L159) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L131) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Implementation of + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md).[`getFilterItems`](../interfaces/IFilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`_column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L221) + +#### Parameters + +##### \_column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFitPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFitPositionStrategy.md new file mode 100644 index 000000000..41f06c63e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFitPositionStrategy.md @@ -0,0 +1,419 @@ +# Abstract Class: BaseFitPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L4) + +Positions the element based on the directions and start point passed in trough PositionSettings. +It is possible to either pass a start point or an HTMLElement as a positioning base. + +## Extends + +- [`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md) + +## Extended by + +- [`AutoPositionStrategy`](AutoPositionStrategy.md) +- [`ElasticPositionStrategy`](ElasticPositionStrategy.md) + +## Constructors + +### Constructor + +> **new BaseFitPositionStrategy**(`settings?`): `BaseFitPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L33) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`BaseFitPositionStrategy` + +#### Inherited from + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`constructor`](ConnectedPositioningStrategy.md#constructor) + +## Properties + +### \_initialSettings + +> `protected` **\_initialSettings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L6) + +*** + +### \_initialSize + +> `protected` **\_initialSize**: [`Size`](../interfaces/Size.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L5) + +*** + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L21) + +PositionSettings to use when position the component in the overlay + +#### Inherited from + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`settings`](ConnectedPositioningStrategy.md#settings) + +## Methods + +### calculateElementRectangles() + +> `protected` **calculateElementRectangles**(`contentElement`, `target`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L67) + +Obtains the DomRect objects for the required elements - target and element to position + +#### Parameters + +##### contentElement + +`any` + +##### target + +`HTMLElement` \| [`Point`](Point.md) + +#### Returns + +`object` + +target and element DomRect objects + +##### elementRect + +> **elementRect**: `Partial`\<`DOMRect`\> + +##### targetRect + +> **targetRect**: `Partial`\<`DOMRect`\> + +#### Inherited from + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`calculateElementRectangles`](ConnectedPositioningStrategy.md#calculateelementrectangles) + +*** + +### calculateLeft() + +> `protected` **calculateLeft**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L81) + +Calculates the position of the left border of the element if it gets positioned +with provided start point and direction + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Start point of the target + +##### direction + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +*** + +### calculateTop() + +> `protected` **calculateTop**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L99) + +Calculates the position of the top border of the element if it gets positioned +with provided position settings related to the target + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Start point of the target + +##### direction + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +*** + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L58) + +Creates clone of this position strategy + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +clone of this position strategy + +#### Inherited from + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`clone`](ConnectedPositioningStrategy.md#clone) + +*** + +### fitInViewport() + +> `abstract` `protected` **fitInViewport**(`element`, `connectedFit`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L124) + +Fits the element into viewport according to the position settings + +#### Parameters + +##### element + +`HTMLElement` + +element to fit in viewport + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`any` + +*** + +### getElementOffsets() + +> `protected` **getElementOffsets**(`connectedFit`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L82) + +Get element horizontal and vertical offsets by connectedFit +or `this.settings` if connectedFit offset is not defined. + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`object` + +horizontalOffset and verticalOffset + +##### horizontalOffset + +> **horizontalOffset**: `number` + +##### verticalOffset + +> **verticalOffset**: `number` + +#### Inherited from + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`getElementOffsets`](ConnectedPositioningStrategy.md#getelementoffsets) + +*** + +### position() + +> **position**(`contentElement`, `size`, `document?`, `initialCall?`, `target?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L20) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +##### size + +[`Size`](../interfaces/Size.md) + +Size of the element + +##### document? + +`Document` + +reference to the Document object + +##### initialCall? + +`boolean` + +should be true if this is the initial call to the method + +##### target? + +`HTMLElement` \| [`Point`](Point.md) + +attaching target for the component to show +```typescript +settings.positionStrategy.position(content, size, document, true); +``` + +#### Returns + +`void` + +#### Overrides + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`position`](ConnectedPositioningStrategy.md#position) + +*** + +### setStyle() + +> `protected` **setStyle**(`element`, `targetRect`, `elementRect`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L97) + +Sets element's style which effectively positions provided element according +to provided position settings + +#### Parameters + +##### element + +`HTMLElement` + +Element to position + +##### targetRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of strategy target + +##### elementRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of the element + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`void` + +#### Inherited from + +[`ConnectedPositioningStrategy`](ConnectedPositioningStrategy.md).[`setStyle`](ConnectedPositioningStrategy.md#setstyle) + +*** + +### shouldFitInViewPort() + +> `protected` **shouldFitInViewPort**(`connectedFit`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L113) + +Returns whether the element should fit in viewport + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`boolean` + +*** + +### updateViewPortFit() + +> `protected` **updateViewPortFit**(`connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L44) + +Checks if element can fit in viewport and updates provided connectedFit +with the result + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit to update + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFormatter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFormatter.md new file mode 100644 index 000000000..74e2955d4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BaseFormatter.md @@ -0,0 +1,315 @@ +# Class: BaseFormatter + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L21) + +## Extended by + +- [`IntlFormatter`](IntlFormatter.md) + +## Constructors + +### Constructor + +> **new BaseFormatter**(): `BaseFormatter` + +#### Returns + +`BaseFormatter` + +## Properties + +### IntlDateTimeStyleValues + +> `protected` **IntlDateTimeStyleValues**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L22) + +#### full + +> **full**: `string` = `'Full'` + +#### long + +> **long**: `string` = `'Long'` + +#### medium + +> **medium**: `string` = `'Medium'` + +#### short + +> **short**: `string` = `'Short'` + +## Methods + +### formatCurrency() + +> **formatCurrency**(`value`, `locale?`, `display?`, `currencyCode?`, `digitsInfo?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L101) + +Format number as a currency based on locale + +#### Parameters + +##### value + +`string` \| `number` + +##### locale? + +`string` + +##### display? + +`string` + +##### currencyCode? + +`string` + +##### digitsInfo? + +`string` + +#### Returns + +`string` + +*** + +### formatDate() + +> **formatDate**(`value`, `format`, `locale`, `timezone?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L80) + +Format provided date to reflect locales format. Similar to Angular's formatDate. + +#### Parameters + +##### value + +`string` \| `number` \| `Date` + +##### format + +`string` + +##### locale + +`string` + +##### timezone? + +`string` + +#### Returns + +`string` + +*** + +### formatNumber() + +> **formatNumber**(`value`, `locale`, `digitsInfo?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L85) + +Format number value based on locale + +#### Parameters + +##### value + +`string` \| `number` + +##### locale + +`string` + +##### digitsInfo? + +`string` + +#### Returns + +`string` + +*** + +### formatPercent() + +> **formatPercent**(`value`, `locale`, `digitsInfo?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L93) + +Format number value as percent based on locale + +#### Parameters + +##### value + +`string` \| `number` + +##### locale + +`string` + +##### digitsInfo? + +`string` + +#### Returns + +`string` + +*** + +### getCurrencyCode() + +> **getCurrencyCode**(`locale`, `overrideCode?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L114) + +Retrieve the currency code of the locale provided. +Angular provides locale data for them, if using that. +When using Intl, it should be user defined and defaults to USD. + +#### Parameters + +##### locale + +`string` + +##### overrideCode? + +`string` + +#### Returns + +`string` + +*** + +### getCurrencySymbol() + +> **getCurrencySymbol**(`currencyCode`, `locale`, `currencyDisplay?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L123) + +Get the currency symbol based on a currency code. + +#### Parameters + +##### currencyCode + +`string` + +##### locale + +`string` + +##### currencyDisplay? + +keyof `NumberFormatOptionsCurrencyDisplayRegistry` = `"symbol"` + +#### Returns + +`string` + +*** + +### getFormatOptions() + +> **getFormatOptions**(`format`): `DateTimeFormatOptions` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L51) + +Get Intl options based on format provided: + +date and time formats - short, medium, long, full + +date formats - shortDate, mediumDate, longDate, fullDate + +time formats - shortTime, mediumTime, longTime, fullTime + +#### Parameters + +##### format + +`string` + +#### Returns + +`DateTimeFormatOptions` + +Return the resolved options or null if not matching any of the above. + +*** + +### getLocaleDateTimeFormat() + +> **getLocaleDateTimeFormat**(`locale`, `forceLeadingZero?`, `options?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L73) + +Returns the date and time format based on a provided locale and options. + +#### Parameters + +##### locale + +`string` + +##### forceLeadingZero? + +`boolean` = `false` + +##### options? + +`DateTimeFormatOptions` + +#### Returns + +`string` + +*** + +### getLocaleFirstDayOfWeek() + +> **getLocaleFirstDayOfWeek**(`locale`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L136) + +Get first day of the week. +Angular's default: 0...6. +Intl default: 1...7. + +#### Parameters + +##### locale + +`string` + +#### Returns + +`number` + +*** + +### verifyLocale() + +> **verifyLocale**(`locale`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L30) + +#### Parameters + +##### locale + +`string` + +#### Returns + +`string` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BlockScrollStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BlockScrollStrategy.md new file mode 100644 index 000000000..2d9a60811 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/BlockScrollStrategy.md @@ -0,0 +1,91 @@ +# Class: BlockScrollStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts#L6) + +Prevents scrolling while the overlay content is shown. + +## Extends + +- [`ScrollStrategy`](ScrollStrategy.md) + +## Constructors + +### Constructor + +> **new BlockScrollStrategy**(): `BlockScrollStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts#L13) + +#### Returns + +`BlockScrollStrategy` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`constructor`](ScrollStrategy.md#constructor) + +## Methods + +### attach() + +> **attach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts#L36) + +Attaches the strategy +```typescript +settings.scrollStrategy.attach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`attach`](ScrollStrategy.md#attach) + +*** + +### detach() + +> **detach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts#L46) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`detach`](ScrollStrategy.md#detach) + +*** + +### initialize() + +> **initialize**(`document`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts#L21) + +Initializes the strategy. Should be called once + +#### Parameters + +##### document + +`Document` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`initialize`](ScrollStrategy.md#initialize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ByLevelTreeGridMergeStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ByLevelTreeGridMergeStrategy.md new file mode 100644 index 000000000..18436d033 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ByLevelTreeGridMergeStrategy.md @@ -0,0 +1,144 @@ +# Class: ByLevelTreeGridMergeStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L168) + +Merge strategy interface. + +## Extends + +- [`DefaultMergeStrategy`](DefaultMergeStrategy.md) + +## Constructors + +### Constructor + +> **new ByLevelTreeGridMergeStrategy**(): `ByLevelTreeGridMergeStrategy` + +#### Returns + +`ByLevelTreeGridMergeStrategy` + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`constructor`](DefaultMergeStrategy.md#constructor) + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: [`DefaultMergeStrategy`](DefaultMergeStrategy.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L46) + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`_instance`](DefaultMergeStrategy.md#_instance) + +## Methods + +### comparer() + +> **comparer**(`prevRecord`, `record`, `field`, `isDate?`, `isTime?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L170) + +Function that compares values for merging. Returns true if same, false if different. + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +#### Returns + +`boolean` + +#### Overrides + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`comparer`](DefaultMergeStrategy.md#comparer) + +*** + +### merge() + +> **merge**(`data`, `field`, `comparer?`, `result`, `activeRowIndexes`, `isDate?`, `isTime?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L53) + +Function that processes merging of the whole data per merged field. +Returns collection where object has reference to the original record and map of the cell merge metadata per field. + +#### Parameters + +##### data + +`any`[] + +##### field + +`string` + +##### comparer? + +(`prevRecord`, `record`, `field`, `isDate?`, `isTime?`) => `boolean` + +##### result + +`any`[] + +##### activeRowIndexes + +`number`[] + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`merge`](DefaultMergeStrategy.md#merge) + +*** + +### instance() + +> `static` **instance**(): [`DefaultMergeStrategy`](DefaultMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L48) + +#### Returns + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md) + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`instance`](DefaultMergeStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CachedDataCloneStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CachedDataCloneStrategy.md new file mode 100644 index 000000000..c07d512d7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CachedDataCloneStrategy.md @@ -0,0 +1,48 @@ +# Class: CachedDataCloneStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts#L26) + +Data clone strategy that is uses cache to deep clone primitive values, dates and objects. +It allows using circular references inside object. + +## Implements + +- [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +## Constructors + +### Constructor + +> **new CachedDataCloneStrategy**(): `CachedDataCloneStrategy` + +#### Returns + +`CachedDataCloneStrategy` + +## Methods + +### clone() + +> **clone**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts#L27) + +Clones provided data + +#### Parameters + +##### data + +`any` + +primitive value, date and object to be cloned + +#### Returns + +`any` + +deep copy of provided value + +#### Implementation of + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md).[`clone`](../interfaces/IDataCloneStrategy.md#clone) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/Calendar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/Calendar.md new file mode 100644 index 000000000..8ff84c693 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/Calendar.md @@ -0,0 +1,39 @@ +# Class: Calendar + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L97) + +## Constructors + +### Constructor + +> **new Calendar**(): `Calendar` + +#### Returns + +`Calendar` + +## Methods + +### timedelta() + +> **timedelta**(`date`, `interval`, `units`): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L98) + +#### Parameters + +##### date + +`Date` + +##### interval + +`string` + +##### units + +`number` + +#### Returns + +`Date` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CalendarDay.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CalendarDay.md new file mode 100644 index 000000000..486e0b055 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CalendarDay.md @@ -0,0 +1,369 @@ +# Class: CalendarDay + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L34) + +## Constructors + +### Constructor + +> **new CalendarDay**(`args`): `CalendarDay` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L51) + +#### Parameters + +##### args + +`CalendarDayParams` + +#### Returns + +`CalendarDay` + +## Accessors + +### date + +#### Get Signature + +> **get** **date**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L110) + +Returns the date + +##### Returns + +`number` + +*** + +### day + +#### Get Signature + +> **get** **day**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L95) + +Returns the day of the week (Sunday = 0). + +##### Returns + +`number` + +*** + +### month + +#### Get Signature + +> **get** **month**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L105) + +Returns the month. + +##### Returns + +`number` + +*** + +### native + +#### Get Signature + +> **get** **native**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:220](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L220) + +Returns the underlying native date instance. + +##### Returns + +`Date` + +*** + +### timestamp + +#### Get Signature + +> **get** **timestamp**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L115) + +Returns the timestamp since epoch in milliseconds. + +##### Returns + +`number` + +*** + +### week + +#### Get Signature + +> **get** **week**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L120) + +Returns the ISO 8601 week number. + +##### Returns + +`number` + +*** + +### weekend + +#### Get Signature + +> **get** **weekend**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L230) + +Whether the current date is a weekend day. + +##### Remarks + +This is naive, since it does not account for locale specifics. + +##### Returns + +`boolean` + +*** + +### year + +#### Get Signature + +> **get** **year**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L100) + +Returns the full year. + +##### Returns + +`number` + +*** + +### today + +#### Get Signature + +> **get** `static` **today**(): `CalendarDay` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L38) + +Constructs and returns the current day. + +##### Returns + +`CalendarDay` + +## Methods + +### add() + +> **add**(`unit`, `value`): `CalendarDay` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L71) + +#### Parameters + +##### unit + +[`DayInterval`](../type-aliases/DayInterval.md) + +##### value + +`number` + +#### Returns + +`CalendarDay` + +*** + +### clone() + +> **clone**(): `CalendarDay` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L56) + +Returns a copy of this instance. + +#### Returns + +`CalendarDay` + +*** + +### equalTo() + +> **equalTo**(`value`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L234) + +#### Parameters + +##### value + +[`DayParameter`](../type-aliases/DayParameter.md) + +#### Returns + +`boolean` + +*** + +### getWeekNumber() + +> **getWeekNumber**(`weekStart?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L129) + +Gets the week number based on week start day. +Uses ISO 8601 (first Thursday rule) only when weekStart is Monday (1). +For other week starts, uses simple counting from January 1st. + +#### Parameters + +##### weekStart? + +`number` = `1` + +#### Returns + +`number` + +*** + +### greaterThan() + +> **greaterThan**(`value`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L238) + +#### Parameters + +##### value + +[`DayParameter`](../type-aliases/DayParameter.md) + +#### Returns + +`boolean` + +*** + +### greaterThanOrEqual() + +> **greaterThanOrEqual**(`value`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L241) + +#### Parameters + +##### value + +[`DayParameter`](../type-aliases/DayParameter.md) + +#### Returns + +`boolean` + +*** + +### lessThan() + +> **lessThan**(`value`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L245) + +#### Parameters + +##### value + +[`DayParameter`](../type-aliases/DayParameter.md) + +#### Returns + +`boolean` + +*** + +### lessThanOrEqual() + +> **lessThanOrEqual**(`value`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L249) + +#### Parameters + +##### value + +[`DayParameter`](../type-aliases/DayParameter.md) + +#### Returns + +`boolean` + +*** + +### set() + +> **set**(`args`): `CalendarDay` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L63) + +Returns a new instance with values replaced. + +#### Parameters + +##### args + +`Partial`\<`CalendarDayParams`\> + +#### Returns + +`CalendarDay` + +*** + +### toString() + +> **toString**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L253) + +#### Returns + +`string` + +*** + +### from() + +> `static` **from**(`date`): `CalendarDay` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L43) + +Constructs a new CalendarDay instance from a Date object. + +#### Parameters + +##### date + +`Date` + +#### Returns + +`CalendarDay` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CarouselHammerConfig.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CarouselHammerConfig.md new file mode 100644 index 000000000..2b995d007 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CarouselHammerConfig.md @@ -0,0 +1,37 @@ +# Class: CarouselHammerConfig + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L21) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new CarouselHammerConfig**(): `CarouselHammerConfig` + +#### Returns + +`CarouselHammerConfig` + +#### Inherited from + +`HammerGestureConfig.constructor` + +## Properties + +### overrides + +> **overrides**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L22) + +#### pan + +> **pan**: `object` + +##### pan.direction + +> **direction**: `number` = `HammerGesturesManager.Hammer.DIRECTION_HORIZONTAL` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CheckboxBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CheckboxBaseDirective.md new file mode 100644 index 000000000..7aae70cfb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CheckboxBaseDirective.md @@ -0,0 +1,432 @@ +# Class: CheckboxBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L26) + +## Extended by + +- [`IgxCheckboxComponent`](IgxCheckboxComponent.md) +- [`IgxRadioComponent`](IgxRadioComponent.md) +- [`IgxSwitchComponent`](IgxSwitchComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new CheckboxBaseDirective**(): `CheckboxBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L237) + +#### Returns + +`CheckboxBaseDirective` + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L235) + +Sets/gets the value of the `aria-label` attribute. + +#### Example + +```html +<igx-checkbox aria-label="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabel = this.checkbox.ariaLabel; +``` + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L221) + +Sets/gets the `aria-labelledby` attribute. +If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute. + +#### Example + +```html +<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabelledBy = this.checkbox.ariaLabelledBy; +``` + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L27) + +*** + +### change + +> `readonly` **change**: `EventEmitter`\<[`IChangeCheckboxEventArgs`](../interfaces/IChangeCheckboxEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L36) + +An event that is emitted after the checkbox state is changed. +Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments. + +*** + +### cssClass + +> **cssClass**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L67) + +*** + +### destroyRef + +> `protected` **destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L335) + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L68) + +*** + +### disableRipple + +> **disableRipple**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L206) + +Enables/Disables the ripple effect. +If not set, `disableRipple` will have value `false`. + +#### Example + +```html +<igx-checkbox [disableRipple]="true"></igx-checkbox> +``` +```typescript +let isRippleDisabled = this.checkbox.desableRipple; +``` + +*** + +### focused + +> **focused**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L71) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L123) + +Sets/gets the `id` of the checkbox component. +If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`. + +#### Example + +```html +<igx-checkbox id="my-first-checkbox"></igx-checkbox> +``` +```typescript +let checkboxId = this.checkbox.id; +``` + +*** + +### indeterminate + +> **indeterminate**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L70) + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L72) + +*** + +### labelId + +> **labelId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L137) + +Sets/gets the id of the `label` element. +If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`. + +#### Example + +```html +<igx-checkbox labelId="Label1"></igx-checkbox> +``` +```typescript +let labelId = this.component.labelId; +``` + +*** + +### labelPosition + +> **labelPosition**: `string` = `LabelPosition.AFTER` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L191) + +Sets/gets the position of the `label`. + If not set, the `labelPosition` will have value `"after"`. + +#### Example + +```html +<igx-checkbox labelPosition="before"></igx-checkbox> +``` +```typescript +let labelPosition = this.checkbox.labelPosition; +``` + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L163) + +Sets/gets the `name` attribute. + +#### Example + +```html +<igx-checkbox name="Checkbox1"></igx-checkbox> +``` +```typescript +let name = this.checkbox.name; +``` + +*** + +### nativeInput + +> **nativeInput**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L54) + +Returns reference to the native checkbox element. + +#### Example + +```typescript +let checkboxElement = this.component.checkboxElement; +``` + +*** + +### nativeLabel + +> **nativeLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L65) + +Returns reference to the native label element. +```typescript + +@example +let labelElement = this.component.nativeLabel; +``` + +*** + +### ngControl + +> **ngControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L29) + +*** + +### placeholderLabel + +> **placeholderLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L107) + +Returns reference to the label placeholder element. +```typescript + +@example +let labelPlaceholder = this.component.placeholderLabel; +``` + +*** + +### readonly + +> **readonly**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L69) + +*** + +### tabindex + +> **tabindex**: `number` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L176) + +Sets/gets the value of the `tabindex` attribute. + +#### Example + +```html +<igx-checkbox [tabindex]="1"></igx-checkbox> +``` +```typescript +let tabIndex = this.checkbox.tabindex; +``` + +*** + +### themeToken + +> `protected` **themeToken**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L28) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L150) + +Sets/gets the `value` attribute. + +#### Example + +```html +<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox> +``` +```typescript +let value = this.checkbox.value; +``` + +## Accessors + +### checked + +#### Get Signature + +> **get** **checked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L75) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L79) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L94) + +Returns reference to the `nativeElement` of the igx-checkbox/igx-switch. + +##### Example + +```typescript +let nativeElement = this.component.nativeElement; +``` + +##### Returns + +`any` + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L267) + +Sets/gets whether the checkbox is required. +If not set, `required` will have value `false`. + +##### Example + +```html +<igx-checkbox required></igx-checkbox> +``` +```typescript +let isRequired = this.checkbox.required; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L270) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CloseScrollStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CloseScrollStrategy.md new file mode 100644 index 000000000..7b4cf41a5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/CloseScrollStrategy.md @@ -0,0 +1,114 @@ +# Class: CloseScrollStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts#L8) + +Uses a tolerance and closes the shown component upon scrolling if the tolerance is exceeded + +## Extends + +- [`ScrollStrategy`](ScrollStrategy.md) + +## Constructors + +### Constructor + +> **new CloseScrollStrategy**(`scrollContainer?`): `CloseScrollStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts#L20) + +#### Parameters + +##### scrollContainer? + +`HTMLElement` + +#### Returns + +`CloseScrollStrategy` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`constructor`](ScrollStrategy.md#constructor) + +## Methods + +### attach() + +> **attach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts#L53) + +Attaches the strategy +```typescript +settings.scrollStrategy.attach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`attach`](ScrollStrategy.md#attach) + +*** + +### detach() + +> **detach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts#L68) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`detach`](ScrollStrategy.md#detach) + +*** + +### initialize() + +> **initialize**(`document`, `overlayService`, `id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts#L36) + +Initializes the strategy. Should be called once + +#### Parameters + +##### document + +`Document` + +reference to Document object. + +##### overlayService + +[`IgxOverlayService`](IgxOverlayService.md) + +IgxOverlay service to use in this strategy. + +##### id + +`string` + +Unique id for this strategy. +```typescript +settings.scrollStrategy.initialize(document, overlay, id); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`initialize`](ScrollStrategy.md#initialize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ConnectedPositioningStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ConnectedPositioningStrategy.md new file mode 100644 index 000000000..5a0aeffad --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ConnectedPositioningStrategy.md @@ -0,0 +1,223 @@ +# Class: ConnectedPositioningStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L17) + +Positions the element based on the directions and start point passed in trough PositionSettings. +It is possible to either pass a start point or an HTMLElement as a positioning base. + +## Extended by + +- [`BaseFitPositionStrategy`](BaseFitPositionStrategy.md) + +## Implements + +- [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +## Constructors + +### Constructor + +> **new ConnectedPositioningStrategy**(`settings?`): `ConnectedPositioningStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L33) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`ConnectedPositioningStrategy` + +## Properties + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L21) + +PositionSettings to use when position the component in the overlay + +#### Implementation of + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md).[`settings`](../interfaces/IPositionStrategy.md#settings) + +## Methods + +### calculateElementRectangles() + +> `protected` **calculateElementRectangles**(`contentElement`, `target`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L67) + +Obtains the DomRect objects for the required elements - target and element to position + +#### Parameters + +##### contentElement + +`any` + +##### target + +`HTMLElement` \| [`Point`](Point.md) + +#### Returns + +`object` + +target and element DomRect objects + +##### elementRect + +> **elementRect**: `Partial`\<`DOMRect`\> + +##### targetRect + +> **targetRect**: `Partial`\<`DOMRect`\> + +*** + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L58) + +Creates clone of this position strategy + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +clone of this position strategy + +#### Implementation of + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md).[`clone`](../interfaces/IPositionStrategy.md#clone) + +*** + +### getElementOffsets() + +> `protected` **getElementOffsets**(`connectedFit`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L82) + +Get element horizontal and vertical offsets by connectedFit +or `this.settings` if connectedFit offset is not defined. + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`object` + +horizontalOffset and verticalOffset + +##### horizontalOffset + +> **horizontalOffset**: `number` + +##### verticalOffset + +> **verticalOffset**: `number` + +*** + +### position() + +> **position**(`contentElement`, `size`, `document?`, `initialCall?`, `target?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L49) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +##### size + +[`Size`](../interfaces/Size.md) + +Size of the element + +##### document? + +`Document` + +reference to the Document object + +##### initialCall? + +`boolean` + +should be true if this is the initial call to the method + +##### target? + +`HTMLElement` \| [`Point`](Point.md) + +attaching target for the component to show +```typescript +settings.positionStrategy.position(content, size, document, true); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md).[`position`](../interfaces/IPositionStrategy.md#position) + +*** + +### setStyle() + +> `protected` **setStyle**(`element`, `targetRect`, `elementRect`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L97) + +Sets element's style which effectively positions provided element according +to provided position settings + +#### Parameters + +##### element + +`HTMLElement` + +Element to position + +##### targetRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of strategy target + +##### elementRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of the element + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ContainerPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ContainerPositionStrategy.md new file mode 100644 index 000000000..d0b3fb091 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ContainerPositionStrategy.md @@ -0,0 +1,139 @@ +# Class: ContainerPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts#L8) + +Positions the element inside the containing outlet based on the directions passed in trough PositionSettings. +These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection + +## Extends + +- [`GlobalPositionStrategy`](GlobalPositionStrategy.md) + +## Constructors + +### Constructor + +> **new ContainerPositionStrategy**(`settings?`): `ContainerPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts#L10) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`ContainerPositionStrategy` + +#### Overrides + +[`GlobalPositionStrategy`](GlobalPositionStrategy.md).[`constructor`](GlobalPositionStrategy.md#constructor) + +## Properties + +### \_defaultSettings + +> `protected` **\_defaultSettings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L15) + +#### Inherited from + +[`GlobalPositionStrategy`](GlobalPositionStrategy.md).[`_defaultSettings`](GlobalPositionStrategy.md#_defaultsettings) + +*** + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L13) + +PositionSettings to use when position the component in the overlay + +#### Inherited from + +[`GlobalPositionStrategy`](GlobalPositionStrategy.md).[`settings`](GlobalPositionStrategy.md#settings) + +## Methods + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L53) + +Clone the strategy instance. +```typescript +settings.positionStrategy.clone(); +``` + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +#### Inherited from + +[`GlobalPositionStrategy`](GlobalPositionStrategy.md).[`clone`](GlobalPositionStrategy.md#clone) + +*** + +### dispose() + +> **dispose**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts#L32) + +Disposes the observer and cleans up references. + +#### Returns + +`void` + +*** + +### position() + +> **position**(`contentElement`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts#L17) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +#### Returns + +`void` + +#### Overrides + +[`GlobalPositionStrategy`](GlobalPositionStrategy.md).[`position`](GlobalPositionStrategy.md#position) + +*** + +### setPosition() + +> `protected` **setPosition**(`contentElement`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L57) + +#### Parameters + +##### contentElement + +`HTMLElement` + +#### Returns + +`void` + +#### Inherited from + +[`GlobalPositionStrategy`](GlobalPositionStrategy.md).[`setPosition`](GlobalPositionStrategy.md#setposition) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultDataCloneStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultDataCloneStrategy.md new file mode 100644 index 000000000..6384445f1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultDataCloneStrategy.md @@ -0,0 +1,48 @@ +# Class: DefaultDataCloneStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts#L16) + +Simplified data clone strategy that deep clones primitive values, dates and objects. +Does not support circular references in objects. + +## Implements + +- [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +## Constructors + +### Constructor + +> **new DefaultDataCloneStrategy**(): `DefaultDataCloneStrategy` + +#### Returns + +`DefaultDataCloneStrategy` + +## Methods + +### clone() + +> **clone**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts#L17) + +Clones provided data + +#### Parameters + +##### data + +`any` + +primitive value, date and object to be cloned + +#### Returns + +`any` + +deep copy of provided value + +#### Implementation of + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md).[`clone`](../interfaces/IDataCloneStrategy.md#clone) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultMergeStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultMergeStrategy.md new file mode 100644 index 000000000..8f4d79816 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultMergeStrategy.md @@ -0,0 +1,137 @@ +# Class: DefaultMergeStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L45) + +Merge strategy interface. + +## Extended by + +- [`DefaultTreeGridMergeStrategy`](DefaultTreeGridMergeStrategy.md) +- [`ByLevelTreeGridMergeStrategy`](ByLevelTreeGridMergeStrategy.md) + +## Implements + +- [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +## Constructors + +### Constructor + +> **new DefaultMergeStrategy**(): `DefaultMergeStrategy` + +#### Returns + +`DefaultMergeStrategy` + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: `DefaultMergeStrategy` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L46) + +## Methods + +### comparer() + +> **comparer**(`prevRecord`, `record`, `field`, `isDate?`, `isTime?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L95) + +Function that compares values for merging. Returns true if same, false if different. + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +#### Returns + +`boolean` + +#### Implementation of + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md).[`comparer`](../interfaces/IGridMergeStrategy.md#comparer) + +*** + +### merge() + +> **merge**(`data`, `field`, `comparer?`, `result`, `activeRowIndexes`, `isDate?`, `isTime?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L53) + +Function that processes merging of the whole data per merged field. +Returns collection where object has reference to the original record and map of the cell merge metadata per field. + +#### Parameters + +##### data + +`any`[] + +##### field + +`string` + +##### comparer? + +(`prevRecord`, `record`, `field`, `isDate?`, `isTime?`) => `boolean` + +##### result + +`any`[] + +##### activeRowIndexes + +`number`[] + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Implementation of + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md).[`merge`](../interfaces/IGridMergeStrategy.md#merge) + +*** + +### instance() + +> `static` **instance**(): `DefaultMergeStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L48) + +#### Returns + +`DefaultMergeStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultPivotGridRecordSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultPivotGridRecordSortingStrategy.md new file mode 100644 index 000000000..25e6eed6b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultPivotGridRecordSortingStrategy.md @@ -0,0 +1,259 @@ +# Class: DefaultPivotGridRecordSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L6) + +## Extends + +- [`DefaultSortingStrategy`](DefaultSortingStrategy.md) + +## Constructors + +### Constructor + +> `protected` **new DefaultPivotGridRecordSortingStrategy**(): `DefaultPivotGridRecordSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L39) + +#### Returns + +`DefaultPivotGridRecordSortingStrategy` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`constructor`](DefaultSortingStrategy.md#constructor) + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: `DefaultPivotGridRecordSortingStrategy` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L7) + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`_instance`](DefaultSortingStrategy.md#_instance) + +## Methods + +### arraySort() + +> `protected` **arraySort**(`data`, `compareFn?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L107) + +#### Parameters + +##### data + +`any`[] + +##### compareFn? + +(`arg0`, `arg1`) => `number` + +#### Returns + +`any`[] + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`arraySort`](DefaultSortingStrategy.md#arraysort) + +*** + +### compareObjects() + +> `protected` **compareObjects**(`obj1`, `obj2`, `key`, `reverse`, `ignoreCase`, `valueResolver`, `isDate`, `isTime`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L88) + +#### Parameters + +##### obj1 + +`any` + +##### obj2 + +`any` + +##### key + +`string` + +##### reverse + +`number` + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`, `isTime?`) => `any` + +##### isDate + +`boolean` + +##### isTime + +`boolean` + +#### Returns + +`number` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`compareObjects`](DefaultSortingStrategy.md#compareobjects) + +*** + +### compareValues() + +> **compareValues**(`a`, `b`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L77) + +#### Parameters + +##### a + +`any` + +##### b + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`compareValues`](DefaultSortingStrategy.md#comparevalues) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`obj`, `key`, `_isDate?`, `_isTime?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L22) + +#### Parameters + +##### obj + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md) + +##### key + +`string` + +##### \_isDate? + +`boolean` = `false` + +##### \_isTime? + +`boolean` = `false` + +#### Returns + +`any` + +*** + +### prepareSortValue() + +> `protected` **prepareSortValue**(`value`, `ignoreCase`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L111) + +#### Parameters + +##### value + +`any` + +##### ignoreCase + +`boolean` + +#### Returns + +`any` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`prepareSortValue`](DefaultSortingStrategy.md#preparesortvalue) + +*** + +### sort() + +> **sort**(`data`, `fieldName`, `dir`, `ignoreCase`, `valueResolver`, `isDate?`, `isTime?`, `_grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L11) + +#### Parameters + +##### data + +`any`[] + +##### fieldName + +`string` + +##### dir + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`) => `any` + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### \_grid? + +[`PivotGridType`](../interfaces/PivotGridType.md) + +#### Returns + +`any`[] + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`sort`](DefaultSortingStrategy.md#sort) + +*** + +### instance() + +> `static` **instance**(): `DefaultPivotGridRecordSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L8) + +#### Returns + +`DefaultPivotGridRecordSortingStrategy` + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`instance`](DefaultSortingStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultPivotSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultPivotSortingStrategy.md new file mode 100644 index 000000000..80da47482 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultPivotSortingStrategy.md @@ -0,0 +1,267 @@ +# Class: DefaultPivotSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L28) + +## Extends + +- [`DefaultSortingStrategy`](DefaultSortingStrategy.md) + +## Constructors + +### Constructor + +> `protected` **new DefaultPivotSortingStrategy**(): `DefaultPivotSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L39) + +#### Returns + +`DefaultPivotSortingStrategy` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`constructor`](DefaultSortingStrategy.md#constructor) + +## Properties + +### dimension + +> `protected` **dimension**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L30) + +*** + +### \_instance + +> `protected` `static` **\_instance**: `DefaultPivotSortingStrategy` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L29) + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`_instance`](DefaultSortingStrategy.md#_instance) + +## Methods + +### arraySort() + +> `protected` **arraySort**(`data`, `compareFn?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L107) + +#### Parameters + +##### data + +`any`[] + +##### compareFn? + +(`arg0`, `arg1`) => `number` + +#### Returns + +`any`[] + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`arraySort`](DefaultSortingStrategy.md#arraysort) + +*** + +### compareObjects() + +> `protected` **compareObjects**(`obj1`, `obj2`, `key`, `reverse`, `ignoreCase`, `valueResolver`, `isDate`, `isTime`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L88) + +#### Parameters + +##### obj1 + +`any` + +##### obj2 + +`any` + +##### key + +`string` + +##### reverse + +`number` + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`, `isTime?`) => `any` + +##### isDate + +`boolean` + +##### isTime + +`boolean` + +#### Returns + +`number` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`compareObjects`](DefaultSortingStrategy.md#compareobjects) + +*** + +### compareValues() + +> **compareValues**(`a`, `b`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L77) + +#### Parameters + +##### a + +`any` + +##### b + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`compareValues`](DefaultSortingStrategy.md#comparevalues) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`obj`, `key`, `_isDate?`, `isTime?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L49) + +#### Parameters + +##### obj + +`any` + +##### key + +`string` + +##### \_isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +#### Returns + +`any` + +*** + +### prepareSortValue() + +> `protected` **prepareSortValue**(`value`, `ignoreCase`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L111) + +#### Parameters + +##### value + +`any` + +##### ignoreCase + +`boolean` + +#### Returns + +`any` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`prepareSortValue`](DefaultSortingStrategy.md#preparesortvalue) + +*** + +### sort() + +> **sort**(`data`, `fieldName`, `dir`, `ignoreCase`, `valueResolver`, `isDate?`, `isTime?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L34) + +#### Parameters + +##### data + +`any`[] + +##### fieldName + +`string` + +##### dir + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`) => `any` + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`PivotGridType`](../interfaces/PivotGridType.md) + +#### Returns + +`any`[] + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`sort`](DefaultSortingStrategy.md#sort) + +*** + +### instance() + +> `static` **instance**(): `DefaultPivotSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts#L31) + +#### Returns + +`DefaultPivotSortingStrategy` + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`instance`](DefaultSortingStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultSortingStrategy.md new file mode 100644 index 000000000..166f71d07 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultSortingStrategy.md @@ -0,0 +1,203 @@ +# Class: DefaultSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L36) + +## Extended by + +- [`FormattedValuesSortingStrategy`](FormattedValuesSortingStrategy.md) +- [`DefaultPivotGridRecordSortingStrategy`](DefaultPivotGridRecordSortingStrategy.md) +- [`DefaultPivotSortingStrategy`](DefaultPivotSortingStrategy.md) + +## Implements + +- [`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +## Constructors + +### Constructor + +> `protected` **new DefaultSortingStrategy**(): `DefaultSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L39) + +#### Returns + +`DefaultSortingStrategy` + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: `DefaultSortingStrategy` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L37) + +## Methods + +### arraySort() + +> `protected` **arraySort**(`data`, `compareFn?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L107) + +#### Parameters + +##### data + +`any`[] + +##### compareFn? + +(`arg0`, `arg1`) => `number` + +#### Returns + +`any`[] + +*** + +### compareObjects() + +> `protected` **compareObjects**(`obj1`, `obj2`, `key`, `reverse`, `ignoreCase`, `valueResolver`, `isDate`, `isTime`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L88) + +#### Parameters + +##### obj1 + +`any` + +##### obj2 + +`any` + +##### key + +`string` + +##### reverse + +`number` + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`, `isTime?`) => `any` + +##### isDate + +`boolean` + +##### isTime + +`boolean` + +#### Returns + +`number` + +*** + +### compareValues() + +> **compareValues**(`a`, `b`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L77) + +#### Parameters + +##### a + +`any` + +##### b + +`any` + +#### Returns + +`number` + +*** + +### prepareSortValue() + +> `protected` **prepareSortValue**(`value`, `ignoreCase`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L111) + +#### Parameters + +##### value + +`any` + +##### ignoreCase + +`boolean` + +#### Returns + +`any` + +*** + +### sort() + +> **sort**(`data`, `fieldName`, `dir`, `ignoreCase`, `valueResolver`, `isDate?`, `isTime?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L46) + +#### Parameters + +##### data + +`any`[] + +##### fieldName + +`string` + +##### dir + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`) => `any` + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +#### Returns + +`any`[] + +#### Implementation of + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md).[`sort`](../interfaces/ISortingStrategy.md#sort) + +*** + +### instance() + +> `static` **instance**(): `DefaultSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L41) + +#### Returns + +`DefaultSortingStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultTreeGridMergeStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultTreeGridMergeStrategy.md new file mode 100644 index 000000000..12f099c85 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DefaultTreeGridMergeStrategy.md @@ -0,0 +1,144 @@ +# Class: DefaultTreeGridMergeStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L148) + +Merge strategy interface. + +## Extends + +- [`DefaultMergeStrategy`](DefaultMergeStrategy.md) + +## Constructors + +### Constructor + +> **new DefaultTreeGridMergeStrategy**(): `DefaultTreeGridMergeStrategy` + +#### Returns + +`DefaultTreeGridMergeStrategy` + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`constructor`](DefaultMergeStrategy.md#constructor) + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: [`DefaultMergeStrategy`](DefaultMergeStrategy.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L46) + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`_instance`](DefaultMergeStrategy.md#_instance) + +## Methods + +### comparer() + +> **comparer**(`prevRecord`, `record`, `field`, `isDate?`, `isTime?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L150) + +Function that compares values for merging. Returns true if same, false if different. + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +#### Returns + +`boolean` + +#### Overrides + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`comparer`](DefaultMergeStrategy.md#comparer) + +*** + +### merge() + +> **merge**(`data`, `field`, `comparer?`, `result`, `activeRowIndexes`, `isDate?`, `isTime?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L53) + +Function that processes merging of the whole data per merged field. +Returns collection where object has reference to the original record and map of the cell merge metadata per field. + +#### Parameters + +##### data + +`any`[] + +##### field + +`string` + +##### comparer? + +(`prevRecord`, `record`, `field`, `isDate?`, `isTime?`) => `boolean` + +##### result + +`any`[] + +##### activeRowIndexes + +`number`[] + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`merge`](DefaultMergeStrategy.md#merge) + +*** + +### instance() + +> `static` **instance**(): [`DefaultMergeStrategy`](DefaultMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L48) + +#### Returns + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md) + +#### Inherited from + +[`DefaultMergeStrategy`](DefaultMergeStrategy.md).[`instance`](DefaultMergeStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DimensionValuesFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DimensionValuesFilteringStrategy.md new file mode 100644 index 000000000..aaf1d1ea0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/DimensionValuesFilteringStrategy.md @@ -0,0 +1,342 @@ +# Class: DimensionValuesFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L127) + +## Extends + +- [`FilteringStrategy`](FilteringStrategy.md) + +## Constructors + +### Constructor + +> **new DimensionValuesFilteringStrategy**(`fields?`): `DimensionValuesFilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L135) + +Creates a new instance of FormattedValuesFilteringStrategy. + +#### Parameters + +##### fields? + +`string`[] + +An array of column field names that should be formatted. +If omitted the values of all columns which has formatter will be formatted. + +#### Returns + +`DimensionValuesFilteringStrategy` + +#### Overrides + +[`FilteringStrategy`](FilteringStrategy.md).[`constructor`](FilteringStrategy.md#constructor) + +## Methods + +### filter() + +> **filter**\<`T`\>(`data`, `expressionsTree`, `advancedExpressionsTree`, `grid`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L256) + +#### Type Parameters + +##### T + +`T` + +#### Parameters + +##### data + +`T`[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`T`[] + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`filter`](FilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`findMatchByExpression`](FilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `fieldName`, `_isDate?`, `_isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L139) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### \_isDate? + +`boolean` = `false` + +##### \_isTime? + +`boolean` = `false` + +##### grid? + +[`PivotGridType`](../interfaces/PivotGridType.md) + +#### Returns + +`any` + +#### Overrides + +[`FilteringStrategy`](FilteringStrategy.md).[`getFieldValue`](FilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L159) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilteredData`](FilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilterItemKeyValue`](FilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilterItemLabel`](FilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L148) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Overrides + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilterItems`](FilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`matchRecord`](FilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`_column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L221) + +#### Parameters + +##### \_column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`shouldFormatFilterValues`](FilteringStrategy.md#shouldformatfiltervalues) + +*** + +### instance() + +> `static` **instance**(): [`FilteringStrategy`](FilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L252) + +#### Returns + +[`FilteringStrategy`](FilteringStrategy.md) + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`instance`](FilteringStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ElasticPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ElasticPositionStrategy.md new file mode 100644 index 000000000..bcd056d01 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ElasticPositionStrategy.md @@ -0,0 +1,442 @@ +# Class: ElasticPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/elastic-position-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/elastic-position-strategy.ts#L8) + +Positions the element as in **Connected** positioning strategy and resize the element +to fit in the view port in case the element is partially getting out of view + +## Extends + +- [`BaseFitPositionStrategy`](BaseFitPositionStrategy.md) + +## Constructors + +### Constructor + +> **new ElasticPositionStrategy**(`settings?`): `ElasticPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L33) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`ElasticPositionStrategy` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`constructor`](BaseFitPositionStrategy.md#constructor) + +## Properties + +### \_initialSettings + +> `protected` **\_initialSettings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L6) + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`_initialSettings`](BaseFitPositionStrategy.md#_initialsettings) + +*** + +### \_initialSize + +> `protected` **\_initialSize**: [`Size`](../interfaces/Size.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L5) + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`_initialSize`](BaseFitPositionStrategy.md#_initialsize) + +*** + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L21) + +PositionSettings to use when position the component in the overlay + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`settings`](BaseFitPositionStrategy.md#settings) + +## Methods + +### calculateElementRectangles() + +> `protected` **calculateElementRectangles**(`contentElement`, `target`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L67) + +Obtains the DomRect objects for the required elements - target and element to position + +#### Parameters + +##### contentElement + +`any` + +##### target + +`HTMLElement` \| [`Point`](Point.md) + +#### Returns + +`object` + +target and element DomRect objects + +##### elementRect + +> **elementRect**: `Partial`\<`DOMRect`\> + +##### targetRect + +> **targetRect**: `Partial`\<`DOMRect`\> + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`calculateElementRectangles`](BaseFitPositionStrategy.md#calculateelementrectangles) + +*** + +### calculateLeft() + +> `protected` **calculateLeft**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L81) + +Calculates the position of the left border of the element if it gets positioned +with provided start point and direction + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Start point of the target + +##### direction + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`calculateLeft`](BaseFitPositionStrategy.md#calculateleft) + +*** + +### calculateTop() + +> `protected` **calculateTop**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L99) + +Calculates the position of the top border of the element if it gets positioned +with provided position settings related to the target + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Start point of the target + +##### direction + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`calculateTop`](BaseFitPositionStrategy.md#calculatetop) + +*** + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L58) + +Creates clone of this position strategy + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +clone of this position strategy + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`clone`](BaseFitPositionStrategy.md#clone) + +*** + +### fitInViewport() + +> `protected` **fitInViewport**(`element`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/elastic-position-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/elastic-position-strategy.ts#L15) + +Fits the element into viewport according to the position settings + +#### Parameters + +##### element + +`HTMLElement` + +element to fit in viewport + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`void` + +#### Overrides + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`fitInViewport`](BaseFitPositionStrategy.md#fitinviewport) + +*** + +### getElementOffsets() + +> `protected` **getElementOffsets**(`connectedFit`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L82) + +Get element horizontal and vertical offsets by connectedFit +or `this.settings` if connectedFit offset is not defined. + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`object` + +horizontalOffset and verticalOffset + +##### horizontalOffset + +> **horizontalOffset**: `number` + +##### verticalOffset + +> **verticalOffset**: `number` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`getElementOffsets`](BaseFitPositionStrategy.md#getelementoffsets) + +*** + +### position() + +> **position**(`contentElement`, `size`, `document?`, `initialCall?`, `target?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L20) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +##### size + +[`Size`](../interfaces/Size.md) + +Size of the element + +##### document? + +`Document` + +reference to the Document object + +##### initialCall? + +`boolean` + +should be true if this is the initial call to the method + +##### target? + +`HTMLElement` \| [`Point`](Point.md) + +attaching target for the component to show +```typescript +settings.positionStrategy.position(content, size, document, true); +``` + +#### Returns + +`void` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`position`](BaseFitPositionStrategy.md#position) + +*** + +### setStyle() + +> `protected` **setStyle**(`element`, `targetRect`, `elementRect`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L97) + +Sets element's style which effectively positions provided element according +to provided position settings + +#### Parameters + +##### element + +`HTMLElement` + +Element to position + +##### targetRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of strategy target + +##### elementRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of the element + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`void` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`setStyle`](BaseFitPositionStrategy.md#setstyle) + +*** + +### shouldFitInViewPort() + +> `protected` **shouldFitInViewPort**(`connectedFit`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L113) + +Returns whether the element should fit in viewport + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`shouldFitInViewPort`](BaseFitPositionStrategy.md#shouldfitinviewport) + +*** + +### updateViewPortFit() + +> `protected` **updateViewPortFit**(`connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L44) + +Checks if element can fit in viewport and updates provided connectedFit +with the result + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit to update + +#### Returns + +`void` + +#### Inherited from + +[`BaseFitPositionStrategy`](BaseFitPositionStrategy.md).[`updateViewPortFit`](BaseFitPositionStrategy.md#updateviewportfit) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ExpressionsTreeUtil.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ExpressionsTreeUtil.md new file mode 100644 index 000000000..7bf0f9ac6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ExpressionsTreeUtil.md @@ -0,0 +1,89 @@ +# Class: ExpressionsTreeUtil + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L8) + +## Constructors + +### Constructor + +> **new ExpressionsTreeUtil**(): `ExpressionsTreeUtil` + +#### Returns + +`ExpressionsTreeUtil` + +## Methods + +### find() + +> `static` **find**(`tree`, `fieldName`): [`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L15) + +Returns the filtering expression for a column with the provided tree and fieldName. +```typescript +let filteringExpression = ExpressionsTreeUtil.find(gridExpressionTree, 'Column Field'); +``` + +#### Parameters + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### fieldName + +`string` + +#### Returns + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +*** + +### findIndex() + +> `static` **findIndex**(`tree`, `fieldName`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L31) + +Returns the index of the filtering expression for a column with the provided tree and fieldName. +```typescript +let filteringExpressionIndex = ExpressionsTreeUtil.findIndex(gridExpressionTree, 'Column Field'); +``` + +#### Parameters + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### fieldName + +`string` + +#### Returns + +`number` + +*** + +### isFilteringExpressionsTreeForColumn() + +> `protected` `static` **isFilteringExpressionsTreeForColumn**(`expressionsTree`, `fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L46) + +#### Parameters + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### fieldName + +`string` + +#### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilterUtil.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilterUtil.md new file mode 100644 index 000000000..1fad451bb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilterUtil.md @@ -0,0 +1,45 @@ +# Class: FilterUtil + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L15) + +## Constructors + +### Constructor + +> **new FilterUtil**(): `FilterUtil` + +#### Returns + +`FilterUtil` + +## Methods + +### filter() + +> `static` **filter**\<`T`\>(`data`, `state`, `grid?`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L16) + +#### Type Parameters + +##### T + +`T` + +#### Parameters + +##### data + +`T`[] + +##### state + +[`IFilteringState`](../interfaces/IFilteringState.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`T`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilteringExpressionsTree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilteringExpressionsTree.md new file mode 100644 index 000000000..a00d5b47c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilteringExpressionsTree.md @@ -0,0 +1,282 @@ +# Class: FilteringExpressionsTree + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L42) + +## Implements + +- [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +## Constructors + +### Constructor + +> **new FilteringExpressionsTree**(`operator`, `fieldName?`, `entity?`, `returnFields?`): `FilteringExpressionsTree` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L132) + +#### Parameters + +##### operator + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### fieldName? + +`string` + +##### entity? + +`string` + +##### returnFields? + +`string`[] + +#### Returns + +`FilteringExpressionsTree` + +## Properties + +### entity? + +> `optional` **entity?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L117) + +Sets/gets the entity. +```typescript +gridExpressionsTree.entity = 'Entity A'; +``` +```typescript +let entity = gridExpressionsTree.entity; +``` + +#### Memberof + +FilteringExpressionsTree + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`entity`](../interfaces/IFilteringExpressionsTree.md#entity) + +*** + +### fieldName? + +> `optional` **fieldName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L90) + +Sets/gets the field name of the column where the filtering expression is placed. +```typescript +gridExpressionTree.fieldName = 'Column Field'; +``` +```typescript +let columnField = expressionTree.fieldName; +``` + +#### Memberof + +FilteringExpressionsTree + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`fieldName`](../interfaces/IFilteringExpressionsTree.md#fieldname) + +*** + +### filteringOperands + +> **filteringOperands**: ([`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md))[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L64) + +Sets/gets the filtering operands. +```typescript +const gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); +const expression = [ +{ + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'Column Field', + searchVal: 'Value', + ignoreCase: false +}]; +gridExpressionsTree.filteringOperands.push(expression); +this.grid.filteringExpressionsTree = gridExpressionsTree; +``` +```typescript +let filteringOperands = gridExpressionsTree.filteringOperands; +``` + +#### Memberof + +FilteringExpressionsTree + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`filteringOperands`](../interfaces/IFilteringExpressionsTree.md#filteringoperands) + +*** + +### operator + +> **operator**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L77) + +Sets/gets the operator. +```typescript +gridExpressionsTree.operator = FilteringLogic.And; +``` +```typescript +let operator = gridExpressionsTree.operator; +``` + +#### Memberof + +FilteringExpressionsTree + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`operator`](../interfaces/IFilteringExpressionsTree.md#operator) + +*** + +### returnFields? + +> `optional` **returnFields?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L130) + +Sets/gets the return fields. +```typescript +gridExpressionsTree.returnFields = ['Column Field 1', 'Column Field 2']; +``` +```typescript +let returnFields = gridExpressionsTree.returnFields; +``` + +#### Memberof + +FilteringExpressionsTree + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`returnFields`](../interfaces/IFilteringExpressionsTree.md#returnfields) + +*** + +### type? + +> `optional` **type?**: [`FilteringExpressionsTreeType`](../enumerations/FilteringExpressionsTreeType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L104) + +Sets/gets the type of the filtering expressions tree. +```typescript +gridExpressionTree.type = FilteringExpressionsTree.Advanced; +``` +```typescript +let type = expressionTree.type; +``` + +#### Memberof + +FilteringExpressionsTree + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`type`](../interfaces/IFilteringExpressionsTree.md#type) + +## Methods + +### ~~find()~~ + +> **find**(`fieldName`): [`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L158) + +Returns the filtering expression for a column with the provided fieldName. +```typescript +let filteringExpression = gridExpressionTree.find('Column Field'); +``` + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Memberof + +FilteringExpressionsTree + +#### Deprecated + +in version 18.2.0. Use `ExpressionsTreeUtil.find` instead. + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`find`](../interfaces/IFilteringExpressionsTree.md#find) + +*** + +### ~~findIndex()~~ + +> **findIndex**(`fieldName`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L172) + +Returns the index of the filtering expression for a column with the provided fieldName. +```typescript +let filteringExpressionIndex = gridExpressionTree.findIndex('Column Field'); +``` + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`number` + +#### Memberof + +FilteringExpressionsTree + +#### Deprecated + +in version 18.2.0. Use `ExpressionsTreeUtil.findIndex` instead. + +#### Implementation of + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md).[`findIndex`](../interfaces/IFilteringExpressionsTree.md#findindex) + +*** + +### empty() + +> `static` **empty**(`expressionTree`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L144) + +Checks if filtering expressions tree is empty. + +#### Parameters + +##### expressionTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +filtering expressions tree. + +#### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilteringStrategy.md new file mode 100644 index 000000000..608e03e33 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FilteringStrategy.md @@ -0,0 +1,330 @@ +# Class: FilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L248) + +## Extends + +- [`BaseFilteringStrategy`](BaseFilteringStrategy.md) + +## Extended by + +- [`FormattedValuesFilteringStrategy`](FormattedValuesFilteringStrategy.md) +- [`DimensionValuesFilteringStrategy`](DimensionValuesFilteringStrategy.md) + +## Constructors + +### Constructor + +> **new FilteringStrategy**(): `FilteringStrategy` + +#### Returns + +`FilteringStrategy` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`constructor`](BaseFilteringStrategy.md#constructor) + +## Methods + +### filter() + +> **filter**\<`T`\>(`data`, `expressionsTree`, `advancedExpressionsTree`, `grid`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L256) + +#### Type Parameters + +##### T + +`T` + +#### Parameters + +##### data + +`T`[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`T`[] + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`filter`](BaseFilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`findMatchByExpression`](BaseFilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `fieldName`, `isDate?`, `isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L267) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any` + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFieldValue`](BaseFilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L159) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilteredData`](BaseFilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItemKeyValue`](BaseFilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItemLabel`](BaseFilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L131) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItems`](BaseFilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`matchRecord`](BaseFilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`_column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L221) + +#### Parameters + +##### \_column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`shouldFormatFilterValues`](BaseFilteringStrategy.md#shouldformatfiltervalues) + +*** + +### instance() + +> `static` **instance**(): `FilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L252) + +#### Returns + +`FilteringStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FormattedValuesFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FormattedValuesFilteringStrategy.md new file mode 100644 index 000000000..d239ce65f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FormattedValuesFilteringStrategy.md @@ -0,0 +1,342 @@ +# Class: FormattedValuesFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L278) + +## Extends + +- [`FilteringStrategy`](FilteringStrategy.md) + +## Constructors + +### Constructor + +> **new FormattedValuesFilteringStrategy**(`fields?`): `FormattedValuesFilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L285) + +Creates a new instance of FormattedValuesFilteringStrategy. + +#### Parameters + +##### fields? + +`string`[] + +An array of column field names that should be formatted. +If omitted the values of all columns which has formatter will be formatted. + +#### Returns + +`FormattedValuesFilteringStrategy` + +#### Overrides + +[`FilteringStrategy`](FilteringStrategy.md).[`constructor`](FilteringStrategy.md#constructor) + +## Methods + +### filter() + +> **filter**\<`T`\>(`data`, `expressionsTree`, `advancedExpressionsTree`, `grid`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L256) + +#### Type Parameters + +##### T + +`T` + +#### Parameters + +##### data + +`T`[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`T`[] + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`filter`](FilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`findMatchByExpression`](FilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `fieldName`, `isDate?`, `isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L267) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFieldValue`](FilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L159) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilteredData`](FilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilterItemKeyValue`](FilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilterItemLabel`](FilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L131) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`getFilterItems`](FilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`matchRecord`](FilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L289) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Overrides + +[`FilteringStrategy`](FilteringStrategy.md).[`shouldFormatFilterValues`](FilteringStrategy.md#shouldformatfiltervalues) + +*** + +### instance() + +> `static` **instance**(): [`FilteringStrategy`](FilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L252) + +#### Returns + +[`FilteringStrategy`](FilteringStrategy.md) + +#### Inherited from + +[`FilteringStrategy`](FilteringStrategy.md).[`instance`](FilteringStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FormattedValuesSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FormattedValuesSortingStrategy.md new file mode 100644 index 000000000..9b6dea0ff --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/FormattedValuesSortingStrategy.md @@ -0,0 +1,233 @@ +# Class: FormattedValuesSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L153) + +## Extends + +- [`DefaultSortingStrategy`](DefaultSortingStrategy.md) + +## Constructors + +### Constructor + +> **new FormattedValuesSortingStrategy**(): `FormattedValuesSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L156) + +#### Returns + +`FormattedValuesSortingStrategy` + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`constructor`](DefaultSortingStrategy.md#constructor) + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: `FormattedValuesSortingStrategy` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L154) + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`_instance`](DefaultSortingStrategy.md#_instance) + +## Methods + +### arraySort() + +> `protected` **arraySort**(`data`, `compareFn?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L107) + +#### Parameters + +##### data + +`any`[] + +##### compareFn? + +(`arg0`, `arg1`) => `number` + +#### Returns + +`any`[] + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`arraySort`](DefaultSortingStrategy.md#arraysort) + +*** + +### compareObjects() + +> `protected` **compareObjects**(`obj1`, `obj2`, `key`, `reverse`, `ignoreCase`, `valueResolver`, `isDate`, `isTime`, `grid?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L180) + +#### Parameters + +##### obj1 + +`any` + +##### obj2 + +`any` + +##### key + +`string` + +##### reverse + +`number` + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`, `isTime?`) => `any` + +##### isDate + +`boolean` + +##### isTime + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`number` + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`compareObjects`](DefaultSortingStrategy.md#compareobjects) + +*** + +### compareValues() + +> **compareValues**(`a`, `b`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L77) + +#### Parameters + +##### a + +`any` + +##### b + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`compareValues`](DefaultSortingStrategy.md#comparevalues) + +*** + +### prepareSortValue() + +> `protected` **prepareSortValue**(`value`, `ignoreCase`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L111) + +#### Parameters + +##### value + +`any` + +##### ignoreCase + +`boolean` + +#### Returns + +`any` + +#### Inherited from + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`prepareSortValue`](DefaultSortingStrategy.md#preparesortvalue) + +*** + +### sort() + +> **sort**(`data`, `fieldName`, `dir`, `ignoreCase`, `valueResolver`, `isDate?`, `isTime?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L164) + +#### Parameters + +##### data + +`any`[] + +##### fieldName + +`string` + +##### dir + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`) => `any` + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`sort`](DefaultSortingStrategy.md#sort) + +*** + +### instance() + +> `static` **instance**(): `FormattedValuesSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L160) + +#### Returns + +`FormattedValuesSortingStrategy` + +#### Overrides + +[`DefaultSortingStrategy`](DefaultSortingStrategy.md).[`instance`](DefaultSortingStrategy.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/GlobalPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/GlobalPositionStrategy.md new file mode 100644 index 000000000..9ee9b7b5e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/GlobalPositionStrategy.md @@ -0,0 +1,119 @@ +# Class: GlobalPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L9) + +Positions the element based on the directions passed in trough PositionSettings. +These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection + +## Extended by + +- [`ContainerPositionStrategy`](ContainerPositionStrategy.md) + +## Implements + +- [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +## Constructors + +### Constructor + +> **new GlobalPositionStrategy**(`settings?`): `GlobalPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L25) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`GlobalPositionStrategy` + +## Properties + +### \_defaultSettings + +> `protected` **\_defaultSettings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L15) + +*** + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L13) + +PositionSettings to use when position the component in the overlay + +#### Implementation of + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md).[`settings`](../interfaces/IPositionStrategy.md#settings) + +## Methods + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L53) + +Clone the strategy instance. +```typescript +settings.positionStrategy.clone(); +``` + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +#### Implementation of + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md).[`clone`](../interfaces/IPositionStrategy.md#clone) + +*** + +### position() + +> **position**(`contentElement`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L41) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +#### Returns + +`void` + +#### Implementation of + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md).[`position`](../interfaces/IPositionStrategy.md#position) + +*** + +### setPosition() + +> `protected` **setPosition**(`contentElement`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts#L57) + +#### Parameters + +##### contentElement + +`HTMLElement` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/GroupMemberCountSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/GroupMemberCountSortingStrategy.md new file mode 100644 index 000000000..4ce0501f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/GroupMemberCountSortingStrategy.md @@ -0,0 +1,125 @@ +# Class: GroupMemberCountSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L116) + +## Implements + +- [`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +## Constructors + +### Constructor + +> `protected` **new GroupMemberCountSortingStrategy**(): `GroupMemberCountSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L119) + +#### Returns + +`GroupMemberCountSortingStrategy` + +## Properties + +### \_instance + +> `protected` `static` **\_instance**: `GroupMemberCountSortingStrategy` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L117) + +## Methods + +### compareObjects() + +> `protected` **compareObjects**(`obj1`, `obj2`, `data`, `fieldName`, `reverse`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L145) + +#### Parameters + +##### obj1 + +`any` + +##### obj2 + +`any` + +##### data + +`any`[] + +##### fieldName + +`string` + +##### reverse + +`number` + +#### Returns + +`number` + +*** + +### groupBy() + +> **groupBy**(`data`, `key`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L138) + +#### Parameters + +##### data + +`any` + +##### key + +`any` + +#### Returns + +`any` + +*** + +### sort() + +> **sort**(`data`, `fieldName`, `dir`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L125) + +#### Parameters + +##### data + +`any`[] + +##### fieldName + +`string` + +##### dir + +[`SortingDirection`](../enumerations/SortingDirection.md) + +#### Returns + +`any`[] + +#### Implementation of + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md).[`sort`](../interfaces/ISortingStrategy.md#sort) + +*** + +### instance() + +> `static` **instance**(): `GroupMemberCountSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L121) + +#### Returns + +`GroupMemberCountSortingStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ITreeGridAggregation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ITreeGridAggregation.md new file mode 100644 index 000000000..2f91b331a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ITreeGridAggregation.md @@ -0,0 +1,43 @@ +# Class: ITreeGridAggregation + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts#L18) + +## Constructors + +### Constructor + +> **new ITreeGridAggregation**(): `ITreeGridAggregation` + +#### Returns + +`ITreeGridAggregation` + +## Properties + +### aggregate + +> **aggregate**: (`parent`, `children`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts#L20) + +#### Parameters + +##### parent + +`any` + +##### children + +`any`[] + +#### Returns + +`any` + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgSizeDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgSizeDirective.md new file mode 100644 index 000000000..2ed26b7df --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgSizeDirective.md @@ -0,0 +1,43 @@ +# Class: IgSizeDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts#L6) + +## Constructors + +### Constructor + +> **new IgSizeDirective**(): `IgSizeDirective` + +#### Returns + +`IgSizeDirective` + +## Accessors + +### igSize + +#### Get Signature + +> **get** **igSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts#L11) + +##### Returns + +`string` + +#### Set Signature + +> **set** **igSize**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts#L15) + +##### Parameters + +###### value + +`"small"` \| `"medium"` \| `"large"` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgcFormControlDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgcFormControlDirective.md new file mode 100644 index 000000000..9486790ab --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgcFormControlDirective.md @@ -0,0 +1,17 @@ +# Class: IgcFormControlDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts#L16) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgcFormControlDirective**(): `IgcFormControlDirective` + +#### Returns + +`IgcFormControlDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAccordionComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAccordionComponent.md new file mode 100644 index 000000000..19cce1757 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAccordionComponent.md @@ -0,0 +1,294 @@ +# Class: IgxAccordionComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L58) + +IgxAccordion is a container-based component that contains that can house multiple expansion panels. + +## Igx Module + +IgxAccordionModule + +## Igx Keywords + +accordion + +## Igx Group + +Layouts + +## Remarks + +The Ignite UI for Angular Accordion component enables the user to navigate among multiple collapsing panels +displayed in a single container. +The accordion offers keyboard navigation and API to control the underlying panels' expansion state. + +## Example + +```html +<igx-accordion> + <igx-expansion-panel *ngFor="let panel of panels"> + ... + </igx-expansion-panel> +</igx-accordion> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxAccordionComponent**(): `IgxAccordionComponent` + +#### Returns + +`IgxAccordionComponent` + +## Properties + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L73) + +Get/Set the `id` of the accordion component. +Default value is `"igx-accordion-0"`; +```html +<igx-accordion id="my-first-accordion"></igx-accordion> +``` +```typescript +const accordionId = this.accordion.id; +``` + +*** + +### panelCollapsed + +> **panelCollapsed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L199) + +Emitted after a panel has been collapsed. + +```html +<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)"> +</igx-accordion> +``` + +*** + +### panelCollapsing + +> **panelCollapsing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L188) + +Emitted before a panel is collapsed. + +#### Remarks + +This event is cancelable. + +```html +<igx-accordion (panelCollapsing)="handlePanelCollapsing($event)"> +</igx-accordion> +``` + +*** + +### panelExpanded + +> **panelExpanded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L174) + +Emitted after a panel has been expanded. + +```html +<igx-accordion (panelExpanded)="handlePanelExpanded($event)"> +</igx-accordion> +``` + +```typescript +public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) { + const expandedPanel: IgxExpansionPanelComponent = event.panel; + console.log("Panel is expanded: ", expandedPanel.id); +} +``` + +*** + +### panelExpanding + +> **panelExpanding**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L156) + +Emitted before a panel is expanded. + +#### Remarks + +This event is cancelable. + +```html +<igx-accordion (panelExpanding)="handlePanelExpanding($event)"> +</igx-accordion> +``` + +```typescript +public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){ + const expandedPanel: IgxExpansionPanelComponent = event.panel; + if (expandedPanel.disabled) { + event.cancel = true; + } +} +``` + +## Accessors + +### animationSettings + +#### Get Signature + +> **get** **animationSettings**(): `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L100) + +Get/Set the animation settings that panels should use when expanding/collpasing. + +```html +<igx-accordion [animationSettings]="customAnimationSettings"></igx-accordion> +``` + +```typescript +const customAnimationSettings: ToggleAnimationSettings = { + openAnimation: growVerIn, + closeAnimation: growVerOut +}; + +this.accordion.animationSettings = customAnimationSettings; +``` + +##### Returns + +`ToggleAnimationSettings` + +#### Set Signature + +> **set** **animationSettings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L104) + +##### Parameters + +###### value + +`ToggleAnimationSettings` + +##### Returns + +`void` + +*** + +### panels + +#### Get Signature + +> **get** **panels**(): [`IgxExpansionPanelComponent`](IgxExpansionPanelComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L208) + +Get all panels. + +```typescript +const panels: IgxExpansionPanelComponent[] = this.accordion.panels; +``` + +##### Returns + +[`IgxExpansionPanelComponent`](IgxExpansionPanelComponent.md)[] + +*** + +### singleBranchExpand + +#### Get Signature + +> **get** **singleBranchExpand**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L124) + +Get/Set how the accordion handles the expansion of the projected expansion panels. +If set to `true`, only a single panel can be expanded at a time, collapsing all others + +```html +<igx-accordion [singleBranchExpand]="true"> +... +</igx-accordion> +``` + +```typescript +this.accordion.singleBranchExpand = false; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **singleBranchExpand**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L128) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +## Methods + +### collapseAll() + +> **collapseAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L274) + +Collapses all expanded expansion panels. + +```typescript +accordion.collapseAll(); +``` + +#### Returns + +`void` + +*** + +### expandAll() + +> **expandAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:255](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L255) + +Expands all collapsed expansion panels. + +```typescript +accordion.expandAll(); +``` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxActionStripComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxActionStripComponent.md new file mode 100644 index 000000000..30f8f4ddc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxActionStripComponent.md @@ -0,0 +1,223 @@ +# Class: IgxActionStripComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L95) + +Action Strip provides templatable area for one or more actions. + +## Igx Module + +IgxActionStripModule + +## Igx Theme + +igx-action-strip-theme + +## Igx Keywords + +action, strip, actionStrip, pinning, editing + +## Igx Group + +Data Entry & Display + +## Igx Parent + +IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, * + +## Remarks + +The Ignite UI Action Strip is a container, overlaying its parent container, +and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for. + +## Example + +```html +<igx-action-strip #actionStrip> + <igx-icon (click)="doSomeAction()"></igx-icon> +</igx-action-strip> + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxActionStripComponent**(): `IgxActionStripComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L208) + +#### Returns + +`IgxActionStripComponent` + +## Properties + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L100) + +#### Implementation of + +`IgxActionStripToken.cdr` + +*** + +### context + +> **context**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L115) + +Sets the context of an action strip. +The context should be an instance of a @Component, that has element property. +This element will be the placeholder of the action strip. + +#### Example + +```html +<igx-action-strip [context]="cell"></igx-action-strip> +``` + +#### Implementation of + +`IgxActionStripToken.context` + +*** + +### el + +> `protected` **el**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L98) + +*** + +### hidden + +> **hidden**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L150) + +Gets/Sets the visibility of the Action Strip. +Could be used to set if the Action Strip will be initially hidden. + +#### Example + +```html + <igx-action-strip [hidden]="false"> +``` + +*** + +### hostClass + +> `protected` **hostClass**: `string` = `'igx-action-strip'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L246) + +Host `attr.class` binding. + +*** + +### trackMenuItem + +> `protected` **trackMenuItem**: `object` = `trackByIdentity` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:329](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L329) + +pin swapping w/ unpin resets the menuItems collection + +## Accessors + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L164) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L160) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +## Methods + +### hide() + +> **hide**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L317) + +Hiding the Action Strip and removing it from its current context element. + +#### Returns + +`void` + +#### Example + +```typescript +this.actionStrip.hide(); +``` + +#### Implementation of + +`IgxActionStripToken.hide` + +*** + +### show() + +> **show**(`context?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L293) + +Showing the Action Strip and appending it the specified context element. + +#### Parameters + +##### context? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.actionStrip.show(row); +``` + +#### Implementation of + +`IgxActionStripToken.show` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxActionStripMenuItemDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxActionStripMenuItemDirective.md new file mode 100644 index 000000000..15e536445 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxActionStripMenuItemDirective.md @@ -0,0 +1,21 @@ +# Class: IgxActionStripMenuItemDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L44) + +## Constructors + +### Constructor + +> **new IgxActionStripMenuItemDirective**(): `IgxActionStripMenuItemDirective` + +#### Returns + +`IgxActionStripMenuItemDirective` + +## Properties + +### templateRef + +> **templateRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts#L45) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAddRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAddRow.md new file mode 100644 index 000000000..e75e9aafb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAddRow.md @@ -0,0 +1,241 @@ +# Class: IgxAddRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L80) + +## Extends + +- [`IgxEditRow`](IgxEditRow.md) + +## Constructors + +### Constructor + +> **new IgxAddRow**(`id`, `index`, `data`, `recordRef`, `grid`): `IgxAddRow` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L81) + +#### Parameters + +##### id + +`any` + +##### index + +`number` + +##### data + +`any` + +##### recordRef + +`any` + +##### grid + +[`GridType`](../interfaces/GridType.md) + +#### Returns + +`IgxAddRow` + +#### Overrides + +[`IgxEditRow`](IgxEditRow.md).[`constructor`](IgxEditRow.md#constructor) + +## Properties + +### data + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`data`](IgxEditRow.md#data) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`grid`](IgxEditRow.md#grid) + +*** + +### id + +> **id**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`id`](IgxEditRow.md#id) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`index`](IgxEditRow.md#index) + +*** + +### newData + +> **newData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L12) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`newData`](IgxEditRow.md#newdata) + +*** + +### recordRef + +> **recordRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L84) + +*** + +### rowFormGroup + +> **rowFormGroup**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L13) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`rowFormGroup`](IgxEditRow.md#rowformgroup) + +*** + +### state + +> **state**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L11) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`state`](IgxEditRow.md#state) + +*** + +### transactionState + +> **transactionState**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L10) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`transactionState`](IgxEditRow.md#transactionstate) + +## Accessors + +### isAddRow + +#### Get Signature + +> **get** **isAddRow**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L103) + +##### Returns + +`boolean` + +#### Overrides + +[`IgxEditRow`](IgxEditRow.md).[`isAddRow`](IgxEditRow.md#isaddrow) + +## Methods + +### createRowDataEventArgs() + +> **createRowDataEventArgs**(`event?`): [`IRowDataCancelableEventArgs`](../interfaces/IRowDataCancelableEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L38) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IRowDataCancelableEventArgs`](../interfaces/IRowDataCancelableEventArgs.md) + +#### Inherited from + +[`IgxEditRow`](IgxEditRow.md).[`createRowDataEventArgs`](IgxEditRow.md#createrowdataeventargs) + +*** + +### createRowEditDoneEventArgs() + +> **createRowEditDoneEventArgs**(`cachedRowData`, `event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L97) + +#### Parameters + +##### cachedRowData + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Overrides + +[`IgxEditRow`](IgxEditRow.md).[`createRowEditDoneEventArgs`](IgxEditRow.md#createroweditdoneeventargs) + +*** + +### createRowEditEventArgs() + +> **createRowEditEventArgs**(`includeNewValue?`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L89) + +#### Parameters + +##### includeNewValue? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Overrides + +[`IgxEditRow`](IgxEditRow.md).[`createRowEditEventArgs`](IgxEditRow.md#createrowediteventargs) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAdvancedFilteringDialogComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAdvancedFilteringDialogComponent.md new file mode 100644 index 000000000..73fef27ef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAdvancedFilteringDialogComponent.md @@ -0,0 +1,80 @@ +# Class: IgxAdvancedFilteringDialogComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts#L37) + +A component used for presenting advanced filtering UI for a Grid. +It is used internally in the Grid, but could also be hosted in a container outside of it. + +Example: +```html +<igx-advanced-filtering-dialog + [grid]="grid1"> +</igx-advanced-filtering-dialog> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxAdvancedFilteringDialogComponent**(): `IgxAdvancedFilteringDialogComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts#L73) + +#### Returns + +`IgxAdvancedFilteringDialogComponent` + +## Properties + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts#L38) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts#L39) + +## Accessors + +### grid + +#### Get Signature + +> **get** **grid**(): [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts#L110) + +Returns the grid. + +##### Returns + +[`GridType`](../interfaces/GridType.md) + +#### Set Signature + +> **set** **grid**(`grid`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts#L97) + +Assigns the grid instance corresponding to the advanced filtering dialog instance. + +##### Parameters + +###### grid + +[`GridType`](../interfaces/GridType.md) + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAngularAnimationPlayer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAngularAnimationPlayer.md new file mode 100644 index 000000000..22d3b3479 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAngularAnimationPlayer.md @@ -0,0 +1,201 @@ +# Class: IgxAngularAnimationPlayer + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L6) + +## Implements + +- [`AnimationPlayer`](../interfaces/AnimationPlayer.md) + +## Constructors + +### Constructor + +> **new IgxAngularAnimationPlayer**(`internalPlayer`): `IgxAngularAnimationPlayer` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L19) + +#### Parameters + +##### internalPlayer + +`AngularAnimationPlayer` + +#### Returns + +`IgxAngularAnimationPlayer` + +## Properties + +### animationEnd + +> **animationEnd**: `EventEmitter`\<[`IBaseEventArgs`](../interfaces/IBaseEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L9) + +Emits when the animation ends + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`animationEnd`](../interfaces/AnimationPlayer.md#animationend) + +*** + +### animationStart + +> **animationStart**: `EventEmitter`\<[`IBaseEventArgs`](../interfaces/IBaseEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L8) + +Emits when the animation starts + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`animationStart`](../interfaces/AnimationPlayer.md#animationstart) + +## Accessors + +### position + +#### Get Signature + +> **get** **position**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L11) + +Current position of the animation. + +##### Returns + +`number` + +#### Set Signature + +> **set** **position**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L15) + +Current position of the animation. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +Current position of the animation. + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`position`](../interfaces/AnimationPlayer.md#position) + +## Methods + +### destroy() + +> **destroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L51) + +Destroys the animation. + +#### Returns + +`void` + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`destroy`](../interfaces/AnimationPlayer.md#destroy) + +*** + +### finish() + +> **finish**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L40) + +Ends the animation + +#### Returns + +`void` + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`finish`](../interfaces/AnimationPlayer.md#finish) + +*** + +### hasStarted() + +> **hasStarted**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L55) + +Reports whether the animation has started. + +#### Returns + +`boolean` + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`hasStarted`](../interfaces/AnimationPlayer.md#hasstarted) + +*** + +### init() + +> **init**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L31) + +Initialize the animation + +#### Returns + +`void` + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`init`](../interfaces/AnimationPlayer.md#init) + +*** + +### play() + +> **play**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L35) + +Runs the animation + +#### Returns + +`void` + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`play`](../interfaces/AnimationPlayer.md#play) + +*** + +### reset() + +> **reset**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts#L45) + +Resets the animation to its initial state + +#### Returns + +`void` + +#### Implementation of + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md).[`reset`](../interfaces/AnimationPlayer.md#reset) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAngularAnimationService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAngularAnimationService.md new file mode 100644 index 000000000..9a7b44423 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAngularAnimationService.md @@ -0,0 +1,49 @@ +# Class: IgxAngularAnimationService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts#L7) + +## Implements + +- [`AnimationService`](../interfaces/AnimationService.md) + +## Constructors + +### Constructor + +> **new IgxAngularAnimationService**(): `IgxAngularAnimationService` + +#### Returns + +`IgxAngularAnimationService` + +## Methods + +### buildAnimation() + +> **buildAnimation**(`animationMetaData`, `element`): [`AnimationPlayer`](../interfaces/AnimationPlayer.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts#L10) + +Creates an `AnimationPlayer` instance + +#### Parameters + +##### animationMetaData + +`AnimationReferenceMetadata` + +##### element + +`HTMLElement` + +The DOM element on which animation will be applied + +#### Returns + +[`AnimationPlayer`](../interfaces/AnimationPlayer.md) + +AnimationPlayer + +#### Implementation of + +[`AnimationService`](../interfaces/AnimationService.md).[`buildAnimation`](../interfaces/AnimationService.md#buildanimation) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAppendDropStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAppendDropStrategy.md new file mode 100644 index 000000000..90f34f84a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAppendDropStrategy.md @@ -0,0 +1,55 @@ +# Class: IgxAppendDropStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L16) + +## Implements + +- [`IDropStrategy`](../interfaces/IDropStrategy.md) + +## Constructors + +### Constructor + +> **new IgxAppendDropStrategy**(`_renderer`): `IgxAppendDropStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L18) + +#### Parameters + +##### \_renderer + +`Renderer2` + +#### Returns + +`IgxAppendDropStrategy` + +## Methods + +### dropAction() + +> **dropAction**(`drag`, `drop`, `_atIndex`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L20) + +#### Parameters + +##### drag + +[`IgxDragDirective`](IgxDragDirective.md) + +##### drop + +[`IgxDropDirective`](IgxDropDirective.md) + +##### \_atIndex + +`number` + +#### Returns + +`void` + +#### Implementation of + +[`IDropStrategy`](../interfaces/IDropStrategy.md).[`dropAction`](../interfaces/IDropStrategy.md#dropaction) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAutocompleteDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAutocompleteDirective.md new file mode 100644 index 000000000..7116e59a6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAutocompleteDirective.md @@ -0,0 +1,318 @@ +# Class: IgxAutocompleteDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L61) + +**Ignite UI for Angular Autocomplete** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html) + +The igxAutocomplete directive provides a way to enhance a text input +by showing a drop down of suggested options, provided by the developer. + +Example: +```html +<input type="text" [igxAutocomplete]="townsPanel" #autocompleteRef="igxAutocomplete"/> +<igx-drop-down #townsPanel> + <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town"> + {{town}} + </igx-drop-down-item> +</igx-drop-down> +``` + +## Extends + +- [`IgxDropDownItemNavigationDirective`](IgxDropDownItemNavigationDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxAutocompleteDirective**(): `IgxAutocompleteDirective` + +#### Returns + +`IgxAutocompleteDirective` + +#### Inherited from + +[`IgxDropDownItemNavigationDirective`](IgxDropDownItemNavigationDirective.md).[`constructor`](IgxDropDownItemNavigationDirective.md#constructor) + +## Properties + +### \_composing + +> `protected` **\_composing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L199) + +*** + +### \_target + +> `protected` **\_target**: [`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L18) + +#### Inherited from + +[`IgxDropDownItemNavigationDirective`](IgxDropDownItemNavigationDirective.md).[`_target`](IgxDropDownItemNavigationDirective.md#_target) + +*** + +### autocompleteSettings + +> **autocompleteSettings**: [`AutocompleteOverlaySettings`](../interfaces/AutocompleteOverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L110) + +Provide overlay settings for the autocomplete drop down + +```typescript +// get +let settings = this.autocomplete.autocompleteSettings; +``` +```html +<!--set--> +<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteSettings]="settings"/> +``` +```typescript +// set +this.settings = { + positionStrategy: new ConnectedPositioningStrategy({ + closeAnimation: null, + openAnimation: null + }) +}; +``` + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L66) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L137) + +Enables/disables autocomplete component + +```typescript +// get +let disabled = this.autocomplete.disabled; +``` +```html +<!--set--> +<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteDisabled]="disabled"/> +``` +```typescript +// set +public disabled = true; +``` + +*** + +### dropdown + +> **dropdown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L15) + +#### Inherited from + +[`IgxDropDownItemNavigationDirective`](IgxDropDownItemNavigationDirective.md).[`dropdown`](IgxDropDownItemNavigationDirective.md#dropdown) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L65) + +*** + +### formControl + +> `protected` **formControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L63) + +*** + +### group + +> `protected` **group**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L64) + +*** + +### id + +> `protected` **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L200) + +*** + +### ngModel + +> `protected` **ngModel**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L62) + +*** + +### selectionChanging + +> **selectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L147) + +Emitted after item from the drop down is selected + +```html +<input igxInput [igxAutocomplete]="townsPanel" (selectionChanging)='selectionChanging($event)' /> +``` + +## Accessors + +### activeDescendant + +#### Get Signature + +> **get** **activeDescendant**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L57) + +##### Returns + +`string` + +#### Inherited from + +[`IgxDropDownItemNavigationDirective`](IgxDropDownItemNavigationDirective.md).[`activeDescendant`](IgxDropDownItemNavigationDirective.md#activedescendant) + +*** + +### model + +#### Get Signature + +> **get** `protected` **model**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L201) + +##### Returns + +`any` + +*** + +### target + +#### Get Signature + +> **get** **target**(): [`IgxDropDownComponent`](IgxDropDownComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L81) + +Sets the target of the autocomplete directive + +```html +<!-- Set --> +<input [igxAutocomplete]="dropdown" /> +... +<igx-drop-down #dropdown> +... +</igx-drop-down> +``` + +##### Returns + +[`IgxDropDownComponent`](IgxDropDownComponent.md) + +#### Set Signature + +> **set** **target**(`v`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L84) + +Gets the target of the navigation directive; + +```typescript +// Get +export class MyComponent { + ... + @ContentChild(IgxDropDownNavigationDirective) + navDirective: IgxDropDownNavigationDirective = null + ... + const navTarget: IgxDropDownBaseDirective = navDirective.navTarget +} +``` + +##### Parameters + +###### v + +[`IgxDropDownComponent`](IgxDropDownComponent.md) + +##### Returns + +`void` + +#### Overrides + +[`IgxDropDownItemNavigationDirective`](IgxDropDownItemNavigationDirective.md).[`target`](IgxDropDownItemNavigationDirective.md#target) + +## Methods + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L286) + +Closes autocomplete drop down + +#### Returns + +`void` + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L326) + +#### Returns + +`void` + +*** + +### open() + +> **open**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L297) + +Opens autocomplete drop down + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAvatarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAvatarComponent.md new file mode 100644 index 000000000..b10b74639 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxAvatarComponent.md @@ -0,0 +1,342 @@ +# Class: IgxAvatarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L50) + +Avatar provides a way to display an image, icon or initials to the user. + +## Igx Module + +IgxAvatarModule + +## Igx Theme + +igx-avatar-theme, igx-icon-theme + +## Igx Keywords + +avatar, profile, picture, initials + +## Igx Group + +Layouts + +## Remarks + +The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an +image, someone's initials or a material icon from the Google Material icon set. + +## Example + +```html +<igx-avatar initials="MS" shape="rounded" size="large"> +</igx-avatar> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxAvatarComponent**(): `IgxAvatarComponent` + +#### Returns + +`IgxAvatarComponent` + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` = `'avatar'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L63) + +Returns the `aria-label` attribute of the avatar. + +#### Example + +```typescript +let ariaLabel = this.avatar.ariaLabel; +``` + +*** + +### ~~bgColor~~ + +> **bgColor**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L164) + +Sets the background color of the avatar. + +#### Example + +```html +<igx-avatar bgColor="yellow"></igx-avatar> +``` + +#### Igx Friendly Name + +Background color + +#### Deprecated + +in version 17.2.0. + +*** + +### ~~color~~ + +> **color**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L149) + +Sets the color of the avatar's initials or icon. + +#### Example + +```html +<igx-avatar color="blue"></igx-avatar> +``` + +#### Deprecated + +in version 17.2.0. + +*** + +### elementRef + +> **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L51) + +*** + +### icon + +> **icon**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L186) + +Sets an icon to the avatar. All icons from the material icon set are supported. + +#### Example + +```html +<igx-avatar icon="phone"></igx-avatar> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L111) + +Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`. + +#### Example + +```html +<igx-avatar id="my-first-avatar"></igx-avatar> +``` + +*** + +### initials + +> **initials**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L175) + +Sets initials to the avatar. + +#### Example + +```html +<igx-avatar initials="MN"></igx-avatar> +``` + +*** + +### role + +> **role**: `string` = `'img'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L74) + +Returns the `role` attribute of the avatar. + +#### Example + +```typescript +let avatarRole = this.avatar.role; +``` + +*** + +### roleDescription + +> **roleDescription**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L99) + +Returns the type of the avatar. +The avatar can be: +- `"initials type avatar"` +- `"icon type avatar"` +- `"image type avatar"`. +- `"custom type avatar"`. + +#### Example + +```typescript +let avatarDescription = this.avatar.roleDescription; +``` + +*** + +### shape + +> **shape**: `"circle"` \| `"square"` \| `"rounded"` = `'square'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L123) + +Sets square, rounded or circular shape to the avatar. +By default the shape of the avatar is square. + +#### Example + +```html +<igx-avatar shape="rounded"></igx-avatar> +``` + +## Accessors + +### componentSize + +#### Get Signature + +> **get** `protected` **componentSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L304) + +##### Returns + +`string` + +*** + +### size + +#### Get Signature + +> **get** **size**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L238) + +Returns the size of the avatar. + +##### Example + +```typescript +let avatarSize = this.avatar.size; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **size**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L251) + +Sets the size of the avatar. +By default, the size is `"small"`. It can be set to `"medium"` or `"large"`. + +##### Example + +```html +<igx-avatar size="large"></igx-avatar> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### src + +#### Get Signature + +> **get** **src**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:202](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L202) + +##### Returns + +`string` + +#### Set Signature + +> **set** **src**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L198) + +Sets the image source of the avatar. + +##### Example + +```html +<igx-avatar src="images/picture.jpg"></igx-avatar> +``` + +##### Igx Friendly Name + +Image URL + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxAvatarType`](../type-aliases/IgxAvatarType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:271](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L271) + +Returns the type of the avatar. + +##### Example + +```typescript +let avatarType = this.avatar.type; +``` + +##### Returns + +[`IgxAvatarType`](../type-aliases/IgxAvatarType.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBadgeComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBadgeComponent.md new file mode 100644 index 000000000..81c3173d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBadgeComponent.md @@ -0,0 +1,303 @@ +# Class: IgxBadgeComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L44) + +Badge provides visual notifications used to decorate avatars, menus, etc. + +## Igx Module + +IgxBadgeModule + +## Igx Theme + +igx-badge-theme + +## Igx Keywords + +badge, icon, notification + +## Igx Group + +Data Entry & Display + +## Remarks + +The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the +application when visual notification is needed. They are usually designed as icons with a predefined +style to communicate information, success, warnings, or errors. + +## Example + +```html +<igx-avatar> + <igx-badge icon="check" type="success"></igx-badge> +</igx-avatar> + +## Constructors + +### Constructor + +> **new IgxBadgeComponent**(): `IgxBadgeComponent` + +#### Returns + +`IgxBadgeComponent` + +## Properties + +### cssClass + +> **cssClass**: `string` = `'igx-badge'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L139) + +Sets/gets the css class to use on the badge. + +#### Example + +```typescript +@ViewChild("MyBadge", { read: IgxBadgeComponent }) +public badge: IgxBadgeComponent; + +badge.cssClass = 'my-badge-class'; +``` + +*** + +### dot + +> **dot**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L200) + +Sets/gets whether the badge is displayed as a dot. +When true, the badge will be rendered as a minimal 8px indicator without any content. +Default value is `false`. + +#### Example + +```html +<igx-badge dot type="success"></igx-badge> +``` + +*** + +### icon + +> **icon**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L105) + +Sets/gets an icon for the badge from the material icons set. + +#### Remarks + +Has priority over the `value` property. +If neither a `value` nor an `icon` is set the content of the badge will be empty. +Providing an invalid value won't display anything. + +#### Example + +```html +<igx-badge icon="check"></igx-badge> +``` + +*** + +### iconSet + +> **iconSet**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L111) + +The name of the icon set. Used in case the icon is from a different icon set. + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L59) + +Sets/gets the `id` of the badge. + +#### Remarks + +If not set, the `id` will have value `"igx-badge-0"`. + +#### Example + +```html +<igx-badge id="igx-badge-2"></igx-badge> +``` + +*** + +### label + +> **label**: `string` = `'badge'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L173) + +Sets/gets the aria-label attribute value. + +#### Example + +```typescript +@ViewChild("MyBadge", { read: IgxBadgeComponent }) +public badge: IgxBadgeComponent; + +badge.label = 'badge'; +``` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L186) + +Sets/gets whether the badge is outlined. +Default value is `false`. + +#### Example + +```html +<igx-badge outlined></igx-badge> +``` + +*** + +### role + +> **role**: `string` = `'status'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L125) + +Sets/gets the role attribute value. + +#### Example + +```typescript +@ViewChild("MyBadge", { read: IgxBadgeComponent }) +public badge: IgxBadgeComponent; + +badge.role = 'status'; +``` + +*** + +### shape + +> **shape**: `"square"` \| `"rounded"` = `'rounded'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:151](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L151) + +Sets a square shape to the badge, if `shape` is set to `square`. +By default the shape of the badge is rounded. + +#### Example + +```html +<igx-badge shape="square"></igx-badge> +``` + +*** + +### type + +> **type**: `string` = `IgxBadgeType.PRIMARY` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L74) + +Sets/gets the type of the badge. + +#### Remarks + +Allowed values are `primary`, `info`, `success`, `warning`, `error`. +Providing an invalid value won't display a badge. + +#### Example + +```html +<igx-badge type="success"></igx-badge> +``` + +*** + +### value + +> **value**: `string` \| `number` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L89) + +Sets/gets the value to be displayed inside the badge. + +#### Remarks + +If an `icon` property is already set the `icon` will be displayed. +If neither a `value` nor an `icon` is set the content of the badge will be empty. + +#### Example + +```html +<igx-badge value="11"></igx-badge> +``` + +## Accessors + +### errorClass + +#### Get Signature + +> **get** **errorClass**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L235) + +##### Returns + +`boolean` + +*** + +### infoClass + +#### Get Signature + +> **get** **infoClass**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:220](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L220) + +##### Returns + +`boolean` + +*** + +### successClass + +#### Get Signature + +> **get** **successClass**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L225) + +##### Returns + +`boolean` + +*** + +### warningClass + +#### Get Signature + +> **get** **warningClass**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L230) + +##### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBannerActionsDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBannerActionsDirective.md new file mode 100644 index 000000000..7e596d4f8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBannerActionsDirective.md @@ -0,0 +1,13 @@ +# Class: IgxBannerActionsDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.directives.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.directives.ts#L8) + +## Constructors + +### Constructor + +> **new IgxBannerActionsDirective**(): `IgxBannerActionsDirective` + +#### Returns + +`IgxBannerActionsDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBannerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBannerComponent.md new file mode 100644 index 000000000..8e8e1b784 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBannerComponent.md @@ -0,0 +1,401 @@ +# Class: IgxBannerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L57) + +**Ignite UI for Angular Banner** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html) + +The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application. + +Usage: + +```html +<igx-banner #banner> + Our privacy settings have changed. + <igx-banner-actions> + <button type="button" igxButton="contained">Read More</button> + <button type="button" igxButton="contained">Accept and Continue</button> + </igx-banner-actions> +</igx-banner> +``` + +## Implements + +- [`IToggleView`](../interfaces/IToggleView.md) + +## Constructors + +### Constructor + +> **new IgxBannerComponent**(): `IgxBannerComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L248) + +#### Returns + +`IgxBannerComponent` + +## Properties + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L106) + +Fires after the banner hides +```typescript +public handleClosed(event) { + ... +} +``` +```html +<igx-banner (closed)="handleClosed($event)"></igx-banner> +``` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L120) + +Fires before the banner hides +```typescript +public handleClosing(event) { + ... +} +``` +```html +<igx-banner (closing)="handleClosing($event)"></igx-banner> +``` + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-banner-host'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L224) + +*** + +### elementRef + +> **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L58) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L78) + +Fires after the banner shows up +```typescript +public handleOpened(event) { + ... +} +``` +```html +<igx-banner (opened)="handleOpened($event)"></igx-banner> +``` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L92) + +Fires before the banner shows up +```typescript +public handleOpening(event) { + ... +} +``` +```html +<igx-banner (opening)="handleOpening($event)"></igx-banner> +``` + +## Accessors + +### animationSettings + +#### Get Signature + +> **get** **animationSettings**(): `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L146) + +Get the animation settings used by the banner open/close methods +```typescript +let currentAnimations: ToggleAnimationSettings = banner.animationSettings +``` + +##### Returns + +`ToggleAnimationSettings` + +#### Set Signature + +> **set** **animationSettings**(`settings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L135) + +Set the animation settings used by the banner open/close methods +```typescript +import { slideInLeft, slideOutRight } from 'igniteui-angular'; +... +banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight }; +``` + +##### Parameters + +###### settings + +`ToggleAnimationSettings` + +##### Returns + +`void` + +*** + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L209) + +Gets whether the banner is collapsed. + +```typescript +const isCollapsed: boolean = banner.collapsed; +``` + +##### Returns + +`boolean` + +*** + +### element + +#### Get Signature + +> **get** **element**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L219) + +Returns the native element of the banner component +```typescript + const myBannerElement: HTMLElement = banner.element; +``` + +##### Returns + +`any` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`element`](../interfaces/IToggleView.md#element) + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L183) + +Gets/Sets whether the banner is expanded (visible) or collapsed (hidden). +Defaults to `false`. +Setting to `true` opens the banner, while `false` closes it. + +##### Examples + +```ts +// Expand the banner +banner.expanded = true; +``` + +```ts +// Collapse the banner +banner.expanded = false; +``` + +```ts +// Check if the banner is expanded +const isExpanded = banner.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L187) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L161) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L157) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +## Methods + +### close() + +> **close**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L298) + +Closes the banner + +```typescript + myBanner.close(); +``` + +```html +<igx-banner #banner> +... +</igx-banner> +<button type="button" (click)="banner.close()">Close Banner</button> +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`close`](../interfaces/IToggleView.md#close) + +*** + +### open() + +> **open**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L268) + +Opens the banner + +```typescript + myBanner.open(); +``` + +```html +<igx-banner #banner> +... +</igx-banner> +<button type="button" (click)="banner.open()">Open Banner</button> +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`open`](../interfaces/IToggleView.md#open) + +*** + +### toggle() + +> **toggle**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:328](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L328) + +Toggles the banner + +```typescript + myBanner.toggle(); +``` + +```html +<igx-banner #banner> +... +</igx-banner> +<button type="button" (click)="banner.toggle()">Toggle Banner</button> +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`toggle`](../interfaces/IToggleView.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBaseExporter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBaseExporter.md new file mode 100644 index 000000000..c0fff481c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBaseExporter.md @@ -0,0 +1,177 @@ +# Abstract Class: IgxBaseExporter + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L175) + +## Extended by + +- [`IgxCsvExporterService`](IgxCsvExporterService.md) +- [`IgxExcelExporterService`](IgxExcelExporterService.md) +- [`IgxPdfExporterService`](IgxPdfExporterService.md) + +## Constructors + +### Constructor + +> **new IgxBaseExporter**(): `IgxBaseExporter` + +#### Returns + +`IgxBaseExporter` + +## Properties + +### \_ownersMap + +> `protected` **\_ownersMap**: `Map`\<`any`, [`IColumnList`](../interfaces/IColumnList.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L205) + +*** + +### \_sort + +> `protected` **\_sort**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L203) + +*** + +### columnExporting + +> **columnExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L201) + +This event is emitted when a column is exported. +```typescript +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +*** + +### exportEnded + +> **exportEnded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L177) + +*** + +### pivotGridFilterFieldsCount + +> `protected` **pivotGridFilterFieldsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L204) + +*** + +### rowExporting + +> **rowExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L189) + +This event is emitted when a row is exported. +```typescript +this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +## Methods + +### export() + +> **export**(`grid`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L228) + +Method for exporting IgxGrid component's data. +```typescript +this.exporterService.export(this.igxGridForExport, this.exportOptions); +``` + +#### Parameters + +##### grid + +`any` + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +*** + +### exportData() + +> **exportData**(`data`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L287) + +Method for exporting any kind of array data. +```typescript +this.exporterService.exportData(this.arrayForExport, this.exportOptions); +``` + +#### Parameters + +##### data + +`any`[] + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +*** + +### exportDataImplementation() + +> `abstract` `protected` **exportDataImplementation**(`data`, `options`, `done`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:1462](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L1462) + +#### Parameters + +##### data + +`any`[] + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +##### done + +() => `void` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBaseTransactionService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBaseTransactionService.md new file mode 100644 index 000000000..a07df7358 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBaseTransactionService.md @@ -0,0 +1,571 @@ +# Class: IgxBaseTransactionService\<T, S\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L6) + +## Extended by + +- [`IgxTransactionService`](IgxTransactionService.md) + +## Type Parameters + +### T + +`T` *extends* [`Transaction`](../interfaces/Transaction.md) + +### S + +`S` *extends* [`State`](../interfaces/State.md) + +## Implements + +- [`TransactionService`](../interfaces/TransactionService.md)\<`T`, `S`\> + +## Constructors + +### Constructor + +> **new IgxBaseTransactionService**\<`T`, `S`\>(): `IgxBaseTransactionService`\<`T`, `S`\> + +#### Returns + +`IgxBaseTransactionService`\<`T`, `S`\> + +## Properties + +### \_isPending + +> `protected` **\_isPending**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L46) + +*** + +### \_pendingStates + +> `protected` **\_pendingStates**: `Map`\<`any`, `S`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L48) + +*** + +### \_pendingTransactions + +> `protected` **\_pendingTransactions**: `T`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L47) + +*** + +### onStateUpdate + +> **onStateUpdate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L44) + +Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`onStateUpdate`](../interfaces/TransactionService.md#onstateupdate) + +## Accessors + +### canRedo + +#### Get Signature + +> **get** **canRedo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L23) + +##### Returns + +`boolean` + +if there are any transactions in the Redo stack + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`canRedo`](../interfaces/TransactionService.md#canredo) + +*** + +### canUndo + +#### Get Signature + +> **get** **canUndo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L30) + +##### Returns + +`boolean` + +if there are any transactions in the Undo stack + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`canUndo`](../interfaces/TransactionService.md#canundo) + +*** + +### cloneStrategy + +#### Get Signature + +> **get** **cloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L10) + +Gets/Sets the data clone strategy used to clone data + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **cloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L14) + +Gets/Sets the data clone strategy used to clone data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Gets/Sets the data clone strategy used to clone data + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`cloneStrategy`](../interfaces/TransactionService.md#clonestrategy) + +*** + +### enabled + +#### Get Signature + +> **get** **enabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L37) + +Returns whether transaction is enabled for this service + +##### Returns + +`boolean` + +Returns whether transaction is enabled for this service + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`enabled`](../interfaces/TransactionService.md#enabled) + +## Methods + +### add() + +> **add**(`transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L57) + +Adds provided transaction with recordRef if any + +#### Parameters + +##### transaction + +`T` + +Transaction to be added + +##### recordRef? + +`any` + +Reference to the value of the record in the data source related to the changed item + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`add`](../interfaces/TransactionService.md#add) + +*** + +### cleanState() + +> `protected` **cleanState**(`id`, `states`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L223) + +Compares the state with recordRef and clears all duplicated values. If any state ends as +empty object removes it from states. + +#### Parameters + +##### id + +`any` + +##### states + +`Map`\<`any`, `S`\> + +#### Returns + +`void` + +*** + +### clear() + +> **clear**(`_id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L143) + +Clears all transactions + +#### Parameters + +##### \_id? + +`any` + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`clear`](../interfaces/TransactionService.md#clear) + +*** + +### commit() + +> **commit**(`_data`, `_id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L136) + +Applies all transactions over the provided data + +#### Parameters + +##### \_data + +`any`[] + +##### \_id? + +`any` + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`commit`](../interfaces/TransactionService.md#commit) + +*** + +### endPending() + +> **endPending**(`_commit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L162) + +Clears all pending transactions and aggregated pending state. If commit is set to true +commits pending states as single transaction + +#### Parameters + +##### \_commit + +`boolean` + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`endPending`](../interfaces/TransactionService.md#endpending) + +*** + +### getAggregatedChanges() + +> **getAggregatedChanges**(`mergeChanges`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L91) + +Returns aggregated changes from all transactions + +#### Parameters + +##### mergeChanges + +`boolean` + +If set to true will merge each state's value over relate recordRef +and will record resulting value in the related transaction + +#### Returns + +`T`[] + +Collection of aggregated transactions for each changed record + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`getAggregatedChanges`](../interfaces/TransactionService.md#getaggregatedchanges) + +*** + +### getAggregatedValue() + +> **getAggregatedValue**(`id`, `mergeChanges`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L119) + +Returns value of the required id including all uncommitted changes + +#### Parameters + +##### id + +`any` + +The id of the record to return value for + +##### mergeChanges + +`boolean` + +If set to true will merge state's value over relate recordRef +and will return merged value + +#### Returns + +`any` + +Value with changes or **null** + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`getAggregatedValue`](../interfaces/TransactionService.md#getaggregatedvalue) + +*** + +### getState() + +> **getState**(`id`): `S` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L107) + +Returns the state of the record with provided id + +#### Parameters + +##### id + +`any` + +The id of the record + +#### Returns + +`S` + +State of the record if any + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`getState`](../interfaces/TransactionService.md#getstate) + +*** + +### getTransactionLog() + +> **getTransactionLog**(`_id?`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L70) + +Returns all recorded transactions in chronological order + +#### Parameters + +##### \_id? + +`any` + +#### Returns + +`T`[] + +All transaction in the service or for the specified record + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`getTransactionLog`](../interfaces/TransactionService.md#gettransactionlog) + +*** + +### mergeValues() + +> `protected` **mergeValues**\<`U`\>(`first`, `second`): `U` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L209) + +Merges second values in first value and the result in empty object. If values are primitive type +returns second value if exists, or first value. + +#### Type Parameters + +##### U + +`U` + +#### Parameters + +##### first + +`U` + +Value to merge into + +##### second + +`U` + +Value to merge + +#### Returns + +`U` + +*** + +### redo() + +> **redo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L82) + +Applies the last undone transaction if any + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`redo`](../interfaces/TransactionService.md#redo) + +*** + +### startPending() + +> **startPending**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L152) + +Starts pending transactions. All transactions passed after call to startPending +will not be added to transaction log + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`startPending`](../interfaces/TransactionService.md#startpending) + +*** + +### undo() + +> **undo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L77) + +Remove the last transaction if any + +#### Returns + +`void` + +#### Implementation of + +[`TransactionService`](../interfaces/TransactionService.md).[`undo`](../interfaces/TransactionService.md#undo) + +*** + +### updateState() + +> `protected` **updateState**(`states`, `transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L176) + +Updates the provided states collection according to passed transaction and recordRef + +#### Parameters + +##### states + +`Map`\<`any`, `S`\> + +States collection to apply the update to + +##### transaction + +`T` + +Transaction to apply to the current state + +##### recordRef? + +`any` + +Reference to the value of the record in data source, if any, where transaction should be applied + +#### Returns + +`void` + +*** + +### updateValue() + +> `protected` **updateValue**(`state`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L198) + +Updates the recordRef of the provided state with all the changes in the state. Accepts primitive and object value types + +#### Parameters + +##### state + +`S` + +State to update value for + +#### Returns + +`any` + +updated value including all the changes in provided state diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBooleanFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBooleanFilteringOperand.md new file mode 100644 index 000000000..6b69de463 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBooleanFilteringOperand.md @@ -0,0 +1,163 @@ +# Class: IgxBooleanFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L91) + +Provides filtering operations for booleans + +## Export + +## Extends + +- [`IgxFilteringOperand`](IgxFilteringOperand.md) + +## Constructors + +### Constructor + +> `protected` **new IgxBooleanFilteringOperand**(): `IgxBooleanFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L92) + +#### Returns + +`IgxBooleanFilteringOperand` + +#### Overrides + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`constructor`](IgxFilteringOperand.md#constructor) + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`operations`](IgxFilteringOperand.md#operations) + +*** + +### \_instance + +> `protected` `static` **\_instance**: [`IgxFilteringOperand`](IgxFilteringOperand.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`_instance`](IgxFilteringOperand.md#_instance) + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`append`](IgxFilteringOperand.md#append) + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`condition`](IgxFilteringOperand.md#condition) + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`conditionList`](IgxFilteringOperand.md#conditionlist) + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L80) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`findValueInSet`](IgxFilteringOperand.md#findvalueinset) + +*** + +### instance() + +> `static` **instance**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`instance`](IgxFilteringOperand.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavComponent.md new file mode 100644 index 000000000..bc41dcf2a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavComponent.md @@ -0,0 +1,186 @@ +# Class: IgxBottomNavComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts#L46) + +Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view. + +## Igx Module + +IgxBottomNavModule + +## Igx Theme + +igx-bottom-nav-theme + +## Igx Keywords + +bottom navigation + +## Igx Group + +Layouts + +## Remarks + +The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents +displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom. + +## Example + +```html +<igx-bottom-nav> + <igx-bottom-nav-item> + <igx-bottom-nav-header> + <igx-icon igxBottomNavHeaderIcon>folder</igx-icon> + <span igxBottomNavHeaderLabel>Tab 1</span> + </igx-bottom-nav-header> + <igx-bottom-nav-content> + Content 1 + </igx-bottom-nav-content> + </igx-bottom-nav-item> + ... +</igx-bottom-nav> +``` + +## Extends + +- [`IgxTabsDirective`](IgxTabsDirective.md) + +## Constructors + +### Constructor + +> **new IgxBottomNavComponent**(): `IgxBottomNavComponent` + +#### Returns + +`IgxBottomNavComponent` + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`constructor`](IgxTabsDirective.md#constructor) + +## Properties + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L25) + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`cdr`](IgxTabsDirective.md#cdr) + +*** + +### items + +> **items**: `QueryList`\<[`IgxTabItemDirective`](IgxTabItemDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L91) + +Returns the items. + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`items`](IgxTabsDirective.md#items) + +*** + +### selectedIndexChange + +> **selectedIndexChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L73) + +Output to enable support for two-way binding on [(selectedIndex)] + +#### Inherited from + +[`IgxTabsComponent`](IgxTabsComponent.md).[`selectedIndexChange`](IgxTabsComponent.md#selectedindexchange) + +*** + +### selectedIndexChanging + +> **selectedIndexChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L79) + +Emitted when the selected index is about to change. + +#### Inherited from + +[`IgxTabsComponent`](IgxTabsComponent.md).[`selectedIndexChanging`](IgxTabsComponent.md#selectedindexchanging) + +*** + +### selectedItemChange + +> **selectedItemChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L85) + +Emitted when the selected item is changed. + +#### Inherited from + +[`IgxTabsComponent`](IgxTabsComponent.md).[`selectedItemChange`](IgxTabsComponent.md#selecteditemchange) + +## Accessors + +### selectedIndex + +#### Get Signature + +> **get** **selectedIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L37) + +Gets/Sets the index of the selected item. +Default value is 0 if contents are defined otherwise defaults to -1. + +##### Returns + +`number` + +#### Set Signature + +> **set** **selectedIndex**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L41) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedIndex`](IgxTabsDirective.md#selectedindex) + +*** + +### selectedItem + +#### Get Signature + +> **get** **selectedItem**(): [`IgxTabItemDirective`](IgxTabItemDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L96) + +Gets the selected item. + +##### Returns + +[`IgxTabItemDirective`](IgxTabItemDirective.md) + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedItem`](IgxTabsDirective.md#selecteditem) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavContentComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavContentComponent.md new file mode 100644 index 000000000..ef99d20c3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavContentComponent.md @@ -0,0 +1,21 @@ +# Class: IgxBottomNavContentComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.ts#L10) + +## Extends + +- [`IgxTabContentDirective`](IgxTabContentDirective.md) + +## Constructors + +### Constructor + +> **new IgxBottomNavContentComponent**(): `IgxBottomNavContentComponent` + +#### Returns + +`IgxBottomNavContentComponent` + +#### Inherited from + +[`IgxTabContentDirective`](IgxTabContentDirective.md).[`constructor`](IgxTabContentDirective.md#constructor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderComponent.md new file mode 100644 index 000000000..eec61568e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderComponent.md @@ -0,0 +1,21 @@ +# Class: IgxBottomNavHeaderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.ts#L10) + +## Extends + +- [`IgxTabHeaderDirective`](IgxTabHeaderDirective.md) + +## Constructors + +### Constructor + +> **new IgxBottomNavHeaderComponent**(): `IgxBottomNavHeaderComponent` + +#### Returns + +`IgxBottomNavHeaderComponent` + +#### Inherited from + +[`IgxTabHeaderDirective`](IgxTabHeaderDirective.md).[`constructor`](IgxTabHeaderDirective.md#constructor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderIconDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderIconDirective.md new file mode 100644 index 000000000..a49b881bc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderIconDirective.md @@ -0,0 +1,13 @@ +# Class: IgxBottomNavHeaderIconDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts#L13) + +## Constructors + +### Constructor + +> **new IgxBottomNavHeaderIconDirective**(): `IgxBottomNavHeaderIconDirective` + +#### Returns + +`IgxBottomNavHeaderIconDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderLabelDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderLabelDirective.md new file mode 100644 index 000000000..1c20559c5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavHeaderLabelDirective.md @@ -0,0 +1,13 @@ +# Class: IgxBottomNavHeaderLabelDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts#L7) + +## Constructors + +### Constructor + +> **new IgxBottomNavHeaderLabelDirective**(): `IgxBottomNavHeaderLabelDirective` + +#### Returns + +`IgxBottomNavHeaderLabelDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavItemComponent.md new file mode 100644 index 000000000..4d52df4f6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxBottomNavItemComponent.md @@ -0,0 +1,85 @@ +# Class: IgxBottomNavItemComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.ts#L10) + +## Extends + +- [`IgxTabItemDirective`](IgxTabItemDirective.md) + +## Constructors + +### Constructor + +> **new IgxBottomNavItemComponent**(): `IgxBottomNavItemComponent` + +#### Returns + +`IgxBottomNavItemComponent` + +#### Inherited from + +[`IgxTabItemDirective`](IgxTabItemDirective.md).[`constructor`](IgxTabItemDirective.md#constructor) + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L36) + +Disables the item. + +#### Inherited from + +[`IgxTabItemComponent`](IgxTabItemComponent.md).[`disabled`](IgxTabItemComponent.md#disabled) + +*** + +### selectedChange + +> **selectedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L30) + +Output to enable support for two-way binding on [(selected)] + +#### Inherited from + +[`IgxTabItemComponent`](IgxTabItemComponent.md).[`selectedChange`](IgxTabItemComponent.md#selectedchange) + +## Accessors + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L49) + +Gets/Sets whether an item is selected. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L53) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxTabItemDirective`](IgxTabItemDirective.md).[`selected`](IgxTabItemDirective.md#selected) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxButtonDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxButtonDirective.md new file mode 100644 index 000000000..83057e1e8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxButtonDirective.md @@ -0,0 +1,308 @@ +# Class: IgxButtonDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L48) + +The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button. + +## Igx Module + +IgxButtonModule + +## Igx Parent + +Data Entry & Display + +## Igx Theme + +igx-button-theme + +## Igx Keywords + +button, span, div, click + +## Remarks + +The Ignite UI Button directive is intended to be used by any button, span or div and turn it into a fully functional button. + +## Example + +```html +<button type="button" igxButton="outlined">A Button</button> +``` + +## Extends + +- `IgxButtonBaseDirective` + +## Constructors + +### Constructor + +> **new IgxButtonDirective**(): `IgxButtonDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L124) + +#### Returns + +`IgxButtonDirective` + +#### Overrides + +`IgxButtonBaseDirective.constructor` + +## Properties + +### buttonClick + +> **buttonClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L35) + +Emitted when the button is clicked. + +#### Inherited from + +[`IgxIconButtonDirective`](IgxIconButtonDirective.md).[`buttonClick`](IgxIconButtonDirective.md#buttonclick) + +*** + +### buttonSelected + +> **buttonSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L57) + +Called when the button is selected. + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L91) + +Enables/disables the button. + +#### Example + +```html +<button igxButton="fab" disabled></button> +``` + +#### Inherited from + +[`IgxIconButtonDirective`](IgxIconButtonDirective.md).[`disabled`](IgxIconButtonDirective.md#disabled) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L27) + +#### Inherited from + +[`IgxIconButtonDirective`](IgxIconButtonDirective.md).[`element`](IgxIconButtonDirective.md#element) + +*** + +### focused + +> `protected` **focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L79) + +Sets/gets whether the button component is on focus. +Default value is `false`. +```typescript +this.button.focus = true; +``` +```typescript +let isFocused = this.button.focused; +``` + +#### Inherited from + +[`IgxIconButtonDirective`](IgxIconButtonDirective.md).[`focused`](IgxIconButtonDirective.md#focused) + +*** + +### role + +> **role**: `string` = `'button'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L47) + +Sets/gets the `role` attribute. + +#### Example + +```typescript +this.button.role = 'navbutton'; +let buttonRole = this.button.role; +``` + +#### Inherited from + +[`IgxIconButtonDirective`](IgxIconButtonDirective.md).[`role`](IgxIconButtonDirective.md#role) + +## Accessors + +### label + +#### Set Signature + +> **set** **label**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L153) + +Sets the `aria-label` attribute. + +##### Example + +```html +<button type="button" igxButton="flat" igxLabel="Label"></button> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L143) + +Returns the underlying DOM element. + +##### Returns + +`any` + +#### Inherited from + +`IgxButtonBaseDirective.nativeElement` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L120) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L113) + +Gets or sets whether the button is selected. +Mainly used in the IgxButtonGroup component and it will have no effect if set separately. + +##### Example + +```html +<button type="button" igxButton="flat" [selected]="button.selected"></button> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### type + +#### Set Signature + +> **set** **type**(`type`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L137) + +Sets the type of the button. + +##### Example + +```html +<button type="button" igxButton="outlined"></button> +``` + +##### Parameters + +###### type + +[`IgxButtonType`](../type-aliases/IgxButtonType.md) + +##### Returns + +`void` + +## Methods + +### emitSelected() + +> `protected` **emitSelected**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L97) + +#### Returns + +`void` + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L112) + +#### Returns + +`void` + +#### Inherited from + +`IgxButtonBaseDirective.ngAfterViewInit` + +*** + +### ngOnDestroy() + +> **ngOnDestroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L123) + +#### Returns + +`void` + +#### Inherited from + +`IgxButtonBaseDirective.ngOnDestroy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxButtonGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxButtonGroupComponent.md new file mode 100644 index 000000000..2c3ac2e9a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxButtonGroupComponent.md @@ -0,0 +1,504 @@ +# Class: IgxButtonGroupComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L46) + +**Ignite UI for Angular Button Group** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html) + +The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports +single, multi and singleRequired selection. + +Example: +```html +<igx-buttongroup selectionMode="multi" [values]="fontOptions"> +</igx-buttongroup> +``` +The `fontOptions` value shown above is defined as: +```typescript +this.fontOptions = [ + { icon: 'format_bold', selected: false }, + { icon: 'format_italic', selected: false }, + { icon: 'format_underlined', selected: false }]; +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxButtonGroupComponent**(): `IgxButtonGroupComponent` + +#### Returns + +`IgxButtonGroupComponent` + +## Properties + +### buttonClickNotifier$ + +> `protected` **buttonClickNotifier$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L286) + +*** + +### deselected + +> **deselected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L257) + +An + +#### Ouput + +property that emits an event when a button is deselected. +```typescript + @ViewChild("toast") + private toast: IgxToastComponent; + public deselectedHandler(buttongroup){ + this.toast.open() +} + //... +``` +```html +<igx-buttongroup> #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)"></igx-buttongroup> +<igx-toast #toast>You have deselected a button!</igx-toast> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L66) + +Gets/Sets the value of the `id` attribute. If not set it will be automatically generated. +```html + <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions"> +``` + +*** + +### queryListNotifier$ + +> `protected` **queryListNotifier$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L287) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L239) + +An + +#### Ouput + +property that emits an event when a button is selected. +```typescript +@ViewChild("toast") +private toast: IgxToastComponent; +public selectedHandler(buttongroup) { + this.toast.open() +} + //... +``` +```html +<igx-buttongroup #MyChild [selectionMode]="'multi'" (selected)="selectedHandler($event)"></igx-buttongroup> +<igx-toast #toast>You have made a selection!</igx-toast> +``` + +*** + +### values + +> **values**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L172) + +Property that configures the buttons in the button group using a collection of `Button` objects. +```typescript + public ngOnInit() { + this.cities = [ + new Button({ + label: "Sofia" + }), + new Button({ + label: "London" + }), + new Button({ + label: "New York", + selected: true + }), + new Button({ + label: "Tokyo" + }) + ]; + } + //.. +``` +```html + <igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup> +``` + +## Accessors + +### alignment + +#### Get Signature + +> **get** **alignment**(): [`ButtonGroupAlignment`](../type-aliases/ButtonGroupAlignment.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L219) + +Returns the alignment of the `igx-buttongroup`. +```typescript +@ViewChild("MyChild") +public buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let buttonAlignment = this.buttonG.alignment; +} +``` + +##### Returns + +[`ButtonGroupAlignment`](../type-aliases/ButtonGroupAlignment.md) + +#### Set Signature + +> **set** **alignment**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L206) + +Allows you to set the button group alignment. +Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`. +```typescript +public alignment = ButtonGroupAlignment.vertical; +//.. +``` +```html +<igx-buttongroup [selectionMode]="'single'" [values]="cities" [alignment]="alignment"></igx-buttongroup> +``` + +##### Parameters + +###### value + +[`ButtonGroupAlignment`](../type-aliases/ButtonGroupAlignment.md) + +##### Returns + +`void` + +*** + +### buttons + +#### Get Signature + +> **get** **buttons**(): [`IgxButtonDirective`](IgxButtonDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L54) + +A collection containing all buttons inside the button group. + +##### Returns + +[`IgxButtonDirective`](IgxButtonDirective.md)[] + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L181) + +Disables the `igx-buttongroup` component. By default it's false. +```html +<igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L184) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### isVertical + +#### Get Signature + +> **get** **isVertical**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L277) + +Returns true if the `igx-buttongroup` alignment is vertical. +Note that in order for the accessor to work correctly the property should be set explicitly. +```html +<igx-buttongroup #MyChild [alignment]="alignment" [values]="alignOptions"> +``` +```typescript +//... +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let orientation = this.buttonG.isVertical; +} +``` + +##### Returns + +`boolean` + +*** + +### itemContentCssClass + +#### Get Signature + +> **get** **itemContentCssClass**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L100) + +Returns the CSS class of the item content of the `IgxButtonGroup`. +```typescript + @ViewChild("MyChild") +public buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let buttonSelect = this.buttonG.itemContentCssClass; +} +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **itemContentCssClass**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L86) + +Allows you to set a style using the `itemContentCssClass` input. +The value should be the CSS class name that will be applied to the button group. +```typescript +public style1 = "styleClass"; + //.. +``` + ```html +<igx-buttongroup [itemContentCssClass]="style1" [selectionMode]="'multi'" [values]="alignOptions"> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### multiSelection + +#### Get Signature + +> **get** **multiSelection**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L110) + +Enables selecting multiple buttons. By default, multi-selection is false. + +##### Deprecated + +in version 16.1.0. Use the `selectionMode` property instead. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **multiSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L117) + +##### Parameters + +###### selectionMode + +`boolean` + +##### Returns + +`void` + +*** + +### selectedButtons + +#### Get Signature + +> **get** **selectedButtons**(): [`IgxButtonDirective`](IgxButtonDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L311) + +Gets the selected button/buttons. +```typescript +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let selectedButton = this.buttonG.selectedButtons; +} +``` + +##### Returns + +[`IgxButtonDirective`](IgxButtonDirective.md)[] + +*** + +### selectionMode + +#### Get Signature + +> **get** **selectionMode**(): `"single"` \| `"singleRequired"` \| `"multi"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L132) + +Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'. +```html +<igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup> +``` + +##### Returns + +`"single"` \| `"singleRequired"` \| `"multi"` + +#### Set Signature + +> **set** **selectionMode**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L135) + +##### Parameters + +###### selectionMode + +`"single"` \| `"singleRequired"` \| `"multi"` + +##### Returns + +`void` + +## Methods + +### deselectButton() + +> **deselectButton**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L396) + +Deselects a button by its index. +```typescript +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + this.buttonG.deselectButton(2); + this.cdr.detectChanges(); +} +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Member Of + +IgxButtonGroupComponent + +*** + +### selectButton() + +> **selectButton**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:328](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L328) + +Selects a button by its index. +```typescript +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + this.buttonG.selectButton(2); + this.cdr.detectChanges(); +} +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Member Of + +IgxButtonGroupComponent + +*** + +### updateDeselected() + +> **updateDeselected**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:368](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L368) + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCSVTextDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCSVTextDirective.md new file mode 100644 index 000000000..94b4128c7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCSVTextDirective.md @@ -0,0 +1,13 @@ +# Class: IgxCSVTextDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L16) + +## Constructors + +### Constructor + +> **new IgxCSVTextDirective**(): `IgxCSVTextDirective` + +#### Returns + +`IgxCSVTextDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarComponent.md new file mode 100644 index 000000000..50f95ca58 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarComponent.md @@ -0,0 +1,1282 @@ +# Class: IgxCalendarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L75) + +Calendar provides a way to display date information. + +## Igx Module + +IgxCalendarModule + +## Igx Theme + +igx-calendar-theme, igx-icon-theme + +## Igx Keywords + +calendar, datepicker, schedule, date + +## Igx Group + +Scheduling + +## Remarks + +The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple +or range selection. + +@example: +```html +<igx-calendar selection="range"></igx-calendar> +``` + +## Extends + +- `IgxCalendarBaseDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Properties + +### \_destroyRef + +> `protected` **\_destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L32) + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`_destroyRef`](IgxMonthPickerComponent.md#_destroyref) + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L34) + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`_localeId`](IgxMonthPickerComponent.md#_localeid) + +*** + +### activeViewChanged + +> **activeViewChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L106) + +Emits an event when the active view is changed. +```html +<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar> +``` +```typescript +public activeViewChanged(event: CalendarView) { + let activeView = event; +} +``` + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`activeViewChanged`](IgxMonthPickerComponent.md#activeviewchanged) + +*** + +### activeViewIdx + +> `protected` **activeViewIdx**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L42) + +Holds month view index we are operating on. + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`activeViewIdx`](IgxMonthPickerComponent.md#activeviewidx) + +*** + +### cdr? + +> `protected` `optional` **cdr?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L36) + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`cdr`](IgxMonthPickerComponent.md#cdr) + +*** + +### hasHeader + +> **hasHeader**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L115) + +Sets/gets whether the calendar has header. +Default value is `true`. + +#### Example + +```html +<igx-calendar [hasHeader]="false"></igx-calendar> +``` + +*** + +### headerOrientation + +> **headerOrientation**: `"horizontal"` \| `"vertical"` = `'horizontal'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L133) + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L71) + +Sets/gets whether the outside dates (dates that are out of the current month) will be hidden. +Default value is `false`. +```html +<igx-calendar [hideOutsideDays]="true"></igx-calendar> +``` +```typescript +let hideOutsideDays = this.calendar.hideOutsideDays; +``` + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`hideOutsideDays`](IgxMonthPickerComponent.md#hideoutsidedays) + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L37) + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`i18nFormatter`](IgxMonthPickerComponent.md#i18nformatter) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L103) + +Sets/gets the `id` of the calendar. + +#### Remarks + +If not set, the `id` will have value `"igx-calendar-0"`. + +#### Example + +```html +<igx-calendar id="my-first-calendar"></igx-calendar> +``` + +#### Memberof + +IgxCalendarComponent + +*** + +### keyboardNavigation? + +> `protected` `optional` **keyboardNavigation?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L35) + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`keyboardNavigation`](IgxMonthPickerComponent.md#keyboardnavigation) + +*** + +### orientation + +> **orientation**: `"horizontal"` \| `"vertical"` = `'horizontal'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L130) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L33) + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`platform`](IgxMonthPickerComponent.md#platform) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L78) + +Emits an event when a date is selected. +Provides reference the `selectedDates` property. + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`selected`](IgxMonthPickerComponent.md#selected) + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L166) + +Show/hide week numbers + +#### Example + +```html +<igx-calendar [showWeekNumbers]="true"></igx-calendar> +`` + +*** + +### vertical + +> **vertical**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L127) + +Sets/gets whether the calendar header will be in vertical position. +Default value is `false`. + +#### Example + +```html +<igx-calendar [vertical]="true"></igx-calendar> +``` + +*** + +### viewDateChanged + +> **viewDateChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L92) + +Emits an event when the month in view is changed. +```html +<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar> +``` +```typescript +public viewDateChanged(event: IViewDateChangeEventArgs) { + let viewDate = event.currentValue; +} +``` + +#### Inherited from + +[`IgxMonthPickerComponent`](IgxMonthPickerComponent.md).[`viewDateChanged`](IgxMonthPickerComponent.md#viewdatechanged) + +## Accessors + +### activeDescendant + +#### Get Signature + +> **get** `protected` **activeDescendant**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:461](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L461) + +##### Returns + +`number` + +#### Set Signature + +> **set** `protected` **activeDescendant**(`date`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:469](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L469) + +##### Parameters + +###### date + +`Date` + +##### Returns + +`void` + +*** + +### activeView + +#### Get Signature + +> **get** **activeView**(): [`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:374](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L374) + +Gets the current active view. +```typescript +this.activeView = calendar.activeView; +``` + +##### Returns + +[`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +#### Set Signature + +> **set** **activeView**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L387) + +Sets the current active view. +```html +<igx-calendar [activeView]="year" #calendar></igx-calendar> +``` +```typescript +calendar.activeView = IgxCalendarView.YEAR; +``` + +##### Parameters + +###### val + +[`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.activeView` + +*** + +### context + +#### Get Signature + +> **get** **context**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:368](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L368) + +Gets the context for the template marked with either `igxCalendarSubHeaderMonth` +or `igxCalendarSubHeaderYear` directive. + +##### Example + +```typescript +let context = this.calendar.context; +``` + +##### Returns + +`object` + +###### $implicit + +> **$implicit**: \{ `date`: `Date`; `index`: `number`; \} \| `object`[] = `formatObject` + +*** + +### disabledDates + +#### Get Signature + +> **get** **disabledDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:567](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L567) + +Gets the disabled dates descriptors. + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **disabledDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L583) + +Sets the disabled dates' descriptors. +```typescript +@ViewChild("MyCalendar") +public calendar: IgxCalendarComponent; +ngOnInit(){ + this.calendar.disabledDates = [ + {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, + {type: DateRangeType.Weekends}]; +} +``` + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.disabledDates` + +*** + +### formatOptions + +#### Get Signature + +> **get** **formatOptions**(): [`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L338) + +Gets the date format options of the views. + +##### Returns + +[`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +#### Set Signature + +> **set** **formatOptions**(`formatOptions`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L346) + +Sets the date format options of the views. +Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' } + +##### Parameters + +###### formatOptions + +[`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.formatOptions` + +*** + +### formatViews + +#### Get Signature + +> **get** **formatViews**(): [`IFormattingViews`](../interfaces/IFormattingViews.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L355) + +Gets whether the `day`, `month` and `year` should be rendered +according to the locale and formatOptions, if any. + +##### Returns + +[`IFormattingViews`](../interfaces/IFormattingViews.md) + +#### Set Signature + +> **set** **formatViews**(`formatViews`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L363) + +Sets whether the `day`, `month` and `year` should be rendered +according to the locale and formatOptions, if any. + +##### Parameters + +###### formatViews + +[`IFormattingViews`](../interfaces/IFormattingViews.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.formatViews` + +*** + +### headerContext + +#### Get Signature + +> **get** **headerContext**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L355) + +Gets the context for the template marked with the `igxCalendarHeader` directive. + +##### Example + +```typescript +let headerContext = this.calendar.headerContext; +``` + +##### Returns + +`object` + +###### $implicit + +> **$implicit**: \{ `date`: `Date`; `index`: `number`; \} \| `object`[] = `formatObject` + +*** + +### headerTemplate + +#### Get Signature + +> **get** **headerTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L299) + +Gets the header template. + +##### Example + +```typescript +let headerTemplate = this.calendar.headerTeamplate; +``` + +##### Memberof + +IgxCalendarComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **headerTemplate**(`directive`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L315) + +Sets the header template. + +##### Example + +```html +<igx-calendar headerTemplateDirective="igxCalendarHeader"></igx-calendar> +``` + +##### Memberof + +IgxCalendarComponent + +##### Parameters + +###### directive + +`any` + +##### Returns + +`void` + +*** + +### headerTitleTemplate + +#### Get Signature + +> **get** **headerTitleTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L270) + +Gets the header template. + +##### Example + +```typescript +let headerTitleTemplate = this.calendar.headerTitleTeamplate; +``` + +##### Memberof + +IgxCalendarComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **headerTitleTemplate**(`directive`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L286) + +Sets the header template. + +##### Example + +```html +<igx-calendar headerTitleTemplateDirective="igxCalendarHeaderTitle"></igx-calendar> +``` + +##### Memberof + +IgxCalendarComponent + +##### Parameters + +###### directive + +`any` + +##### Returns + +`void` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L319) + +Gets the `locale` of the calendar. +If not set, defaults to application's locale. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L327) + +Sets the `locale` of the calendar. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.locale` + +*** + +### monthsViewNumber + +#### Get Signature + +> **get** **monthsViewNumber**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L145) + +Sets/gets the number of month views displayed. +Default value is `1`. + +##### Example + +```html +<igx-calendar [monthsViewNumber]="2"></igx-calendar> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **monthsViewNumber**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L149) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:292](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L292) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L285) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.resourceStrings` + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L509) + +Gets the selection type. +Default value is `"single"`. +Changing the type of selection resets the currently +selected values if any. + +##### Returns + +`string` + +#### Set Signature + +> **set** **selection**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:516](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L516) + +Sets the selection. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.selection` + +*** + +### showActiveDay + +#### Get Signature + +> **get** `protected` **showActiveDay**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L457) + +##### Returns + +`boolean` + +*** + +### specialDates + +#### Get Signature + +> **get** **specialDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:608](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L608) + +Gets the special dates descriptors. + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **specialDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L624) + +Sets the special dates' descriptors. +```typescript +@ViewChild("MyCalendar") +public calendar: IgxCalendarComponent; +ngOnInit(){ + this.calendar.specialDates = [ + {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, + {type: DateRangeType.Weekends}]; +} +``` + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.specialDates` + +*** + +### subheaderTemplate + +#### Get Signature + +> **get** **subheaderTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L327) + +Gets the subheader template. + +##### Example + +```typescript +let subheaderTemplate = this.calendar.subheaderTemplate; +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **subheaderTemplate**(`directive`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:343](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L343) + +Sets the subheader template. + +##### Example + +```html +<igx-calendar subheaderTemplate="igxCalendarSubheader"></igx-calendar> +``` + +##### Memberof + +IgxCalendarComponent + +##### Parameters + +###### directive + +`any` + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `Date` \| `Date`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L636) + +Gets the selected date(s). + +When selection is set to `single`, it returns +a single `Date` object. +Otherwise it is an array of `Date` objects. + +##### Returns + +`Date` \| `Date`[] + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:651](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L651) + +Sets the selected date(s). + +When selection is set to `single`, it accepts +a single `Date` object. +Otherwise it is an array of `Date` objects. + +##### Parameters + +###### value + +`string` \| `Date` \| `Date`[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.value` + +*** + +### viewDate + +#### Get Signature + +> **get** **viewDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L537) + +Gets the date that is presented. By default it is the current date. + +##### Returns + +`Date` + +#### Set Signature + +> **set** **viewDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L544) + +Sets the date that will be presented in the default view when the component renders. + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.viewDate` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L302) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L310) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.weekStart` + +## Methods + +### deselectDate() + +> **deselectDate**(`value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:1025](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L1025) + +Deselects date(s) (based on the selection type). + +#### Parameters + +##### value? + +`string` \| `Date` \| `Date`[] + +#### Returns + +`void` + +#### Example + +```typescript + this.calendar.deselectDate(new Date(`2018-06-12`)); +```` + +#### Overrides + +`IgxCalendarBaseDirective.deselectDate` + +*** + +### formattedYears() + +> **formattedYears**(`value`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L464) + +#### Parameters + +##### value + +`Date` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.formattedYears` + +*** + +### getDecadeRange() + +> `protected` **getDecadeRange**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L491) + +#### Returns + +`object` + +##### end + +> **end**: `string` + +##### start + +> **start**: `string` + +#### Inherited from + +`IgxCalendarBaseDirective.getDecadeRange` + +*** + +### nextNavLabel() + +> `protected` **nextNavLabel**(`detail?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:480](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L480) + +#### Parameters + +##### detail? + +`string` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.nextNavLabel` + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L473) + +#### Returns + +`void` + +*** + +### onMouseDown() + +> `protected` **onMouseDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:439](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L439) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### onWrapperBlur() + +> `protected` **onWrapperBlur**(`_event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L526) + +#### Parameters + +##### \_event + +`FocusEvent` + +#### Returns + +`void` + +*** + +### onWrapperFocus() + +> `protected` **onWrapperFocus**(`_event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L521) + +#### Parameters + +##### \_event + +`FocusEvent` + +#### Returns + +`void` + +*** + +### prevNavLabel() + +> `protected` **prevNavLabel**(`detail?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:469](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L469) + +#### Parameters + +##### detail? + +`string` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.prevNavLabel` + +*** + +### selectDate() + +> **selectDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L719) + +Selects date(s) (based on the selection type). + +#### Parameters + +##### value + +`string` \| `Date` \| `Date`[] + +#### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.selectDate` + +*** + +### updateActiveDescendant() + +> **updateActiveDescendant**(`date`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:982](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts#L982) + +#### Parameters + +##### date + +`Date` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarMonthDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarMonthDirective.md new file mode 100644 index 000000000..dc681101c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarMonthDirective.md @@ -0,0 +1,175 @@ +# Class: IgxCalendarMonthDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L83) + +## Extends + +- [`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md) + +## Constructors + +### Constructor + +> **new IgxCalendarMonthDirective**(): `IgxCalendarMonthDirective` + +#### Returns + +`IgxCalendarMonthDirective` + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`constructor`](IgxCalendarViewBaseDirective.md#constructor) + +## Properties + +### date + +> **date**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L24) + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`date`](IgxCalendarViewBaseDirective.md#date) + +*** + +### elementRef + +> **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L18) + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`elementRef`](IgxCalendarViewBaseDirective.md#elementref) + +*** + +### itemSelection + +> **itemSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L30) + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`itemSelection`](IgxCalendarViewBaseDirective.md#itemselection) + +*** + +### showActive + +> **showActive**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L27) + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`showActive`](IgxCalendarViewBaseDirective.md#showactive) + +*** + +### value + +> **value**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L21) + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`value`](IgxCalendarViewBaseDirective.md#value) + +## Accessors + +### isActive + +#### Get Signature + +> **get** **isActive**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L99) + +##### Returns + +`boolean` + +#### Overrides + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`isActive`](IgxCalendarViewBaseDirective.md#isactive) + +*** + +### isCurrent + +#### Get Signature + +> **get** **isCurrent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L85) + +##### Returns + +`boolean` + +#### Overrides + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`isCurrent`](IgxCalendarViewBaseDirective.md#iscurrent) + +*** + +### isSelected + +#### Get Signature + +> **get** **isSelected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L92) + +##### Returns + +`boolean` + +#### Overrides + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`isSelected`](IgxCalendarViewBaseDirective.md#isselected) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L32) + +##### Returns + +`any` + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`nativeElement`](IgxCalendarViewBaseDirective.md#nativeelement) + +## Methods + +### onMouseDown() + +> **onMouseDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L37) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +#### Inherited from + +[`IgxCalendarViewBaseDirective`](IgxCalendarViewBaseDirective.md).[`onMouseDown`](IgxCalendarViewBaseDirective.md#onmousedown) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarViewBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarViewBaseDirective.md new file mode 100644 index 000000000..7a051e276 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCalendarViewBaseDirective.md @@ -0,0 +1,131 @@ +# Abstract Class: IgxCalendarViewBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L17) + +## Extended by + +- [`IgxCalendarMonthDirective`](IgxCalendarMonthDirective.md) + +## Constructors + +### Constructor + +> **new IgxCalendarViewBaseDirective**(): `IgxCalendarViewBaseDirective` + +#### Returns + +`IgxCalendarViewBaseDirective` + +## Properties + +### date + +> **date**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L24) + +*** + +### elementRef + +> **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L18) + +*** + +### itemSelection + +> **itemSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L30) + +*** + +### showActive + +> **showActive**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L27) + +*** + +### value + +> **value**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L21) + +## Accessors + +### isActive + +#### Get Signature + +> **get** `abstract` **isActive**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L44) + +##### Returns + +`boolean` + +*** + +### isCurrent + +#### Get Signature + +> **get** `abstract` **isCurrent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L42) + +##### Returns + +`boolean` + +*** + +### isSelected + +#### Get Signature + +> **get** `abstract` **isSelected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L43) + +##### Returns + +`boolean` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L32) + +##### Returns + +`any` + +## Methods + +### onMouseDown() + +> **onMouseDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L37) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardActionsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardActionsComponent.md new file mode 100644 index 000000000..eb95003d4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardActionsComponent.md @@ -0,0 +1,75 @@ +# Class: IgxCardActionsComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L274) + +IgxCardActions is container for the card actions. + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxCardActionsComponent**(): `IgxCardActionsComponent` + +#### Returns + +`IgxCardActionsComponent` + +## Properties + +### card + +> **card**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L275) + +*** + +### layout + +> **layout**: `string` = `IgxCardActionsLayout.START` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L290) + +Sets the layout style of the actions. +You can justify the elements slotted in the igx-card-action container +so that they are positioned equally from one another taking up all the +space available along the card actions axis. + +#### Example + +```html +<igx-card-actions layout="justify"></igx-card-actions> +``` + +*** + +### vertical + +> **vertical**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L298) + +Sets the vertical attribute of the actions. +When set to `true` the actions will be layed out vertically. + +## Accessors + +### isJustifyLayout + +#### Get Signature + +> **get** **isJustifyLayout**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:305](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L305) + +A getter that returns `true` when the layout has been +set to `justify`. + +##### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardComponent.md new file mode 100644 index 000000000..6a97b5bda --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardComponent.md @@ -0,0 +1,126 @@ +# Class: IgxCardComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L190) + +Card provides a way to display organized content in appealing way. + +## Igx Module + +IgxCardModule + +## Igx Theme + +igx-card-theme, igx-icon-theme, igx-button-theme + +## Igx Keywords + +card, button, avatar, icon + +## Igx Group + +Layouts + +## Remarks + +The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are +five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer. + +## Example + +```html +<igx-card> + <igx-card-header> + <h3 igxCardHeaderTitle>{{title}}</h3> + <h5 igxCardHeaderSubtitle>{{subtitle}}</h5> + </igx-card-header> + <igx-card-actions> + <button type="button" igxButton igxRipple>Share</button> + <button type="button" igxButton igxRipple>Play Album</button> + </igx-card-actions> +</igx-card> +``` + +## Constructors + +### Constructor + +> **new IgxCardComponent**(): `IgxCardComponent` + +#### Returns + +`IgxCardComponent` + +## Properties + +### elevated + +> **elevated**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:243](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L243) + +Sets/gets whether the card is elevated. +Default value is `false`. + +#### Example + +```html +<igx-card elevated></igx-card> +``` +```typescript +let cardElevation = this.card.elevated; +``` + +*** + +### horizontal + +> **horizontal**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L257) + +Sets the value of the `horizontal` attribute of the card. +Setting this to `true` will make the different card sections align horizontally, +essentially flipping the card to the side. + +#### Example + +```html +<igx-card [horizontal]="true"></igx-card> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L205) + +Sets/gets the `id` of the card. +If not set, `id` will have value `"igx-card-0"`; + +#### Example + +```html +<igx-card id="my-first-card"></igx-card> +``` +```typescript +let cardId = this.card.id; +``` + +*** + +### role + +> **role**: `string` = `'group'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L227) + +Sets the value of the `role` attribute of the card. +By default the value is set to `group`. + +#### Example + +```html +<igx-card role="group"></igx-card> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardContentDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardContentDirective.md new file mode 100644 index 000000000..f7639b230 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardContentDirective.md @@ -0,0 +1,15 @@ +# Class: IgxCardContentDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L126) + +IgxCardContent is container for the card content. + +## Constructors + +### Constructor + +> **new IgxCardContentDirective**(): `IgxCardContentDirective` + +#### Returns + +`IgxCardContentDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardFooterDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardFooterDirective.md new file mode 100644 index 000000000..fa144b577 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardFooterDirective.md @@ -0,0 +1,32 @@ +# Class: IgxCardFooterDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L140) + +IgxCardFooter is container for the card footer + +## Constructors + +### Constructor + +> **new IgxCardFooterDirective**(): `IgxCardFooterDirective` + +#### Returns + +`IgxCardFooterDirective` + +## Properties + +### role + +> **role**: `string` = `'footer'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L152) + +Sets the value of the `role` attribute of the card footer. +By default the value is set to `footer`. + +#### Example + +```html +<igx-card-footer role="footer"></igx-card-footer> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderComponent.md new file mode 100644 index 000000000..897c2fe94 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderComponent.md @@ -0,0 +1,32 @@ +# Class: IgxCardHeaderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L62) + +IgxCardHeader is container for the card header + +## Constructors + +### Constructor + +> **new IgxCardHeaderComponent**(): `IgxCardHeaderComponent` + +#### Returns + +`IgxCardHeaderComponent` + +## Properties + +### vertical + +> **vertical**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L78) + +Sets the layout style of the header. +By default the header elements(thumbnail and title/subtitle) are aligned horizontally. + +#### Example + +```html +<igx-card-header [vertical]="true"></igx-card-header> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderSubtitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderSubtitleDirective.md new file mode 100644 index 000000000..1f4b0e8fa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderSubtitleDirective.md @@ -0,0 +1,16 @@ +# Class: IgxCardHeaderSubtitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L113) + +igxCardHeaderSubtitle is used to denote the header subtitle in a card. +Use it to tag text nodes. + +## Constructors + +### Constructor + +> **new IgxCardHeaderSubtitleDirective**(): `IgxCardHeaderSubtitleDirective` + +#### Returns + +`IgxCardHeaderSubtitleDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderTitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderTitleDirective.md new file mode 100644 index 000000000..c7435d2b9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardHeaderTitleDirective.md @@ -0,0 +1,16 @@ +# Class: IgxCardHeaderTitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L99) + +igxCardHeaderTitle is used to denote the header title in a card. +Use it to tag text nodes. + +## Constructors + +### Constructor + +> **new IgxCardHeaderTitleDirective**(): `IgxCardHeaderTitleDirective` + +#### Returns + +`IgxCardHeaderTitleDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardMediaDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardMediaDirective.md new file mode 100644 index 000000000..3f07e1340 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardMediaDirective.md @@ -0,0 +1,60 @@ +# Class: IgxCardMediaDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L14) + +IgxCardMedia is container for the card media section. +Use it to wrap images and videos. + +## Constructors + +### Constructor + +> **new IgxCardMediaDirective**(): `IgxCardMediaDirective` + +#### Returns + +`IgxCardMediaDirective` + +## Properties + +### height + +> **height**: `string` = `'auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L44) + +Sets the `height` style property of the media container. +If not provided it will be set to `auto`. + +#### Example + +```html +<igx-card-media height="50%"></igx-card-media> +``` + +*** + +### role + +> **role**: `string` = `'img'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L51) + +Sets the `role` attribute of the media container. + +*** + +### width + +> **width**: `string` = `'auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L31) + +Sets the `width` and `min-width` style property +of the media container. If not provided it will be set to `auto`. + +#### Example + +```html +<igx-card-media width="300px"></igx-card-media> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardThumbnailDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardThumbnailDirective.md new file mode 100644 index 000000000..1f7f03c9e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCardThumbnailDirective.md @@ -0,0 +1,16 @@ +# Class: IgxCardThumbnailDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L89) + +IgxCardThumbnail is container for the card thumbnail section. +Use it to wrap anything you want to be used as a thumbnail. + +## Constructors + +### Constructor + +> **new IgxCardThumbnailDirective**(): `IgxCardThumbnailDirective` + +#### Returns + +`IgxCardThumbnailDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselComponent.md new file mode 100644 index 000000000..83901bc04 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselComponent.md @@ -0,0 +1,949 @@ +# Class: IgxCarouselComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L63) + +**Ignite UI for Angular Carousel** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html) + +The Ignite UI Carousel is used to browse or navigate through a collection of slides. Slides can contain custom +content such as images or cards and be used for things such as on-boarding tutorials or page-based interfaces. +It can be used as a separate fullscreen element or inside another component. + +Example: +```html +<igx-carousel> + <igx-slide> + <h3>First Slide Header</h3> + <p>First slide Content</p> + <igx-slide> + <igx-slide> + <h3>Second Slide Header</h3> + <p>Second Slide Content</p> +</igx-carousel> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxCarouselComponent**(): `IgxCarouselComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:548](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L548) + +#### Returns + +`IgxCarouselComponent` + +#### Overrides + +`IgxCarouselComponentBase.constructor` + +## Properties + +### animationType + +> **animationType**: [`CarouselAnimationType`](../type-aliases/CarouselAnimationType.md) = `CarouselAnimationType.slide` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L231) + +Gets/sets the animation type of carousel. +Default value is `slide`. +```html +<igx-carousel animationType="none"> +<igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +#### Overrides + +`IgxCarouselComponentBase.animationType` + +*** + +### carouselPaused + +> **carouselPaused**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:354](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L354) + +An event that is emitted after the carousel has been paused. +Provides a reference to the `IgxCarouselComponent` as an event argument. +```html +<igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### carouselPlaying + +> **carouselPlaying**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:365](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L365) + +An event that is emitted after the carousel has resumed transitioning between `slides`. +Provides a reference to the `IgxCarouselComponent` as an event argument. +```html +<igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L25) + +#### Inherited from + +`IgxCarouselComponentBase.cdr` + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-carousel'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L118) + +Returns the class of the carousel component. +```typescript +let class = this.carousel.cssClass; +``` + +#### Memberof + +IgxCarouselComponent + +*** + +### gesturesSupport + +> **gesturesSupport**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L196) + +Controls whether the carousel should support gestures. +Default value is `true`. +```html +<igx-carousel [gesturesSupport]="false"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L82) + +Sets the `id` of the carousel. +If not set, the `id` of the first carousel component will be `"igx-carousel-0"`. +```html +<igx-carousel id="my-first-carousel"></igx-carousel> +``` + +#### Memberof + +IgxCarouselComponent + +*** + +### indicators + +> **indicators**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L173) + +Controls whether the carousel should render the indicators. +Default value is `true`. +```html +<igx-carousel [indicators]="false"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### indicatorsOrientation + +> **indicatorsOrientation**: [`CarouselIndicatorsOrientation`](../type-aliases/CarouselIndicatorsOrientation.md) = `CarouselIndicatorsOrientation.end` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L219) + +Gets/sets the display mode of carousel indicators. It can be `start` or `end`. +Default value is `end`. +```html +<igx-carousel indicatorsOrientation="start"> +<igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### indicatorTemplate + +> **indicatorTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L253) + +The custom template, if any, that should be used when rendering carousel indicators + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.carousel.indicatorTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-carousel #carousel> + ... + <ng-template igxCarouselIndicator let-slide> + <igx-icon *ngIf="slide.active">brightness_7</igx-icon> + <igx-icon *ngIf="!slide.active">brightness_5</igx-icon> + </ng-template> + </igx-carousel> +``` + +*** + +### loop + +> **loop**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L140) + +Sets whether the carousel should `loop` back to the first slide after reaching the last slide. +Default value is `true`. +```html +<igx-carousel [loop]="false"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### maximumIndicatorsCount + +> **maximumIndicatorsCount**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L207) + +Controls the maximum indexes that can be shown. +Default value is `10`. +```html +<igx-carousel [maximumIndicatorsCount]="5"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### navigation + +> **navigation**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L162) + +Controls whether the carousel should render the left/right `navigation` buttons. +Default value is `true`. +```html +<igx-carousel [navigation]="false"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### nextButtonTemplate + +> **nextButtonTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:276](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L276) + +The custom template, if any, that should be used when rendering carousel next button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.carousel.nextButtonTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-carousel #carousel> + ... + <ng-template igxCarouselNextButton let-disabled> + <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled"> + <igx-icon name="add"></igx-icon> + </button> + </ng-template> + </igx-carousel> +``` + +*** + +### pause + +> **pause**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:151](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L151) + +Sets whether the carousel will `pause` the slide transitions on user interactions. +Default value is `true`. +```html + <igx-carousel [pause]="false"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### prevButtonTemplate + +> **prevButtonTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L299) + +The custom template, if any, that should be used when rendering carousel previous button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.carousel.prevButtonTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-carousel #carousel> + ... + <ng-template igxCarouselPrevButton let-disabled> + <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled"> + <igx-icon name="remove"></igx-icon> + </button> + </ng-template> + </igx-carousel> +``` + +*** + +### role + +> **role**: `string` = `'region'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L91) + +Returns the `role` attribute of the carousel. +```typescript +let carouselRole = this.carousel.role; +``` + +#### Memberof + +IgxCarouselComponent + +*** + +### slideAdded + +> **slideAdded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L332) + +An event that is emitted after a slide has been added to the carousel. +Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. +```html +<igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### slideChanged + +> **slideChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L321) + +An event that is emitted after a slide transition has happened. +Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. +```html +<igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### slideRemoved + +> **slideRemoved**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:343](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L343) + +An event that is emitted after a slide has been removed from the carousel. +Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments. +```html +<igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### slides + +> **slides**: `QueryList`\<[`IgxSlideComponent`](IgxSlideComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L310) + +The collection of `slides` currently in the carousel. +```typescript +let slides: QueryList<IgxSlideComponent> = this.carousel.slides; +``` + +#### Member Of + +IgxCarouselComponent + +*** + +### vertical + +> **vertical**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L185) + +Controls whether the carousel has vertical alignment. +Default value is `false`. +```html +<igx-carousel [vertical]="true"></igx-carousel> +``` + +#### Member Of + +IgxCarouselComponent + +#### Overrides + +`IgxCarouselComponentBase.vertical` + +## Accessors + +### current + +#### Get Signature + +> **get** **current**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:482](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L482) + +The index of the slide being currently shown. +```typescript +let currentSlideNumber = this.carousel.current; +``` + +##### Member Of + +IgxCarouselComponent + +##### Returns + +`number` + +*** + +### interval + +#### Get Signature + +> **get** **interval**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L530) + +Returns the time `interval` in milliseconds before the slide changes. +```typescript +let timeInterval = this.carousel.interval; +``` + +##### Memberof + +IgxCarouselComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **interval**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L543) + +Sets the time `interval` in milliseconds before the slide changes. +If not set, the carousel will not change `slides` automatically. +```html +<igx-carousel [interval]="1000"></igx-carousel> +``` + +##### Memberof + +IgxCarouselComponent + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### isDestroyed + +#### Get Signature + +> **get** **isDestroyed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:506](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L506) + +Returns а boolean indicating if the carousel is destroyed. +```typescript +let isDestroyed = this.carousel.isDestroyed; +``` + +##### Member Of + +IgxCarouselComponent + +##### Returns + +`boolean` + +*** + +### isPlaying + +#### Get Signature + +> **get** **isPlaying**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L494) + +Returns a boolean indicating if the carousel is playing. +```typescript +let isPlaying = this.carousel.isPlaying; +``` + +##### Member Of + +IgxCarouselComponent + +##### Returns + +`boolean` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L517) + +Returns a reference to the carousel element in the DOM. +```typescript +let nativeElement = this.carousel.nativeElement; +``` + +##### Memberof + +IgxCarouselComponent + +##### Returns + +`any` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L409) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L402) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### total + +#### Get Signature + +> **get** **total**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:470](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L470) + +Returns the total number of `slides` in the carousel. +```typescript +let slideCount = this.carousel.total; +``` + +##### Member Of + +IgxCarouselComponent + +##### Returns + +`number` + +*** + +### touchAction + +#### Get Signature + +> **get** **touchAction**(): `"auto"` \| `"pan-y"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L127) + +Gets the `touch-action` style of the `list item`. +```typescript +let touchAction = this.listItem.touchAction; +``` + +##### Returns + +`"auto"` \| `"pan-y"` + +## Methods + +### add() + +> **add**(`slide`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:769](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L769) + +Adds a new slide to the carousel. +```typescript +this.carousel.add(newSlide); +``` + +#### Parameters + +##### slide + +[`IgxSlideComponent`](IgxSlideComponent.md) + +#### Returns + +`void` + +#### Member Of + +IgxCarouselComponent + +*** + +### get() + +> **get**(`index`): [`IgxSlideComponent`](IgxSlideComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:757](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L757) + +Returns the slide corresponding to the provided `index` or null. +```typescript +let slide1 = this.carousel.get(1); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxSlideComponent`](IgxSlideComponent.md) + +#### Member Of + +IgxCarouselComponent + +*** + +### getCurrentElement() + +> `protected` **getCurrentElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:900](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L900) + +#### Returns + +`HTMLElement` + +#### Overrides + +`IgxCarouselComponentBase.getCurrentElement` + +*** + +### getPreviousElement() + +> `protected` **getPreviousElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:896](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L896) + +#### Returns + +`HTMLElement` + +#### Overrides + +`IgxCarouselComponentBase.getPreviousElement` + +*** + +### next() + +> **next**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L831) + +Transitions to the next slide in the carousel. +```typescript +this.carousel.next(); +``` + +#### Returns + +`void` + +#### Member Of + +IgxCarouselComponent + +*** + +### play() + +> **play**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L869) + +Resumes playing of the carousel if in paused state. +No operation otherwise. +```typescript +this.carousel.play(); +} +``` + +#### Returns + +`void` + +#### Member Of + +IgxCarouselComponent + +*** + +### prev() + +> **prev**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L849) + +Transitions to the previous slide in the carousel. +```typescript +this.carousel.prev(); +``` + +#### Returns + +`void` + +#### Member Of + +IgxCarouselComponent + +*** + +### remove() + +> **remove**(`slide`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:784](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L784) + +Removes a slide from the carousel. +```typescript +this.carousel.remove(slide); +``` + +#### Parameters + +##### slide + +[`IgxSlideComponent`](IgxSlideComponent.md) + +#### Returns + +`void` + +#### Member Of + +IgxCarouselComponent + +*** + +### select() + +#### Call Signature + +> **select**(`slide`, `direction?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:802](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L802) + +Switches to the passed-in slide with a given `direction`. +```typescript +const slide = this.carousel.get(2); +this.carousel.select(slide, CarouselAnimationDirection.NEXT); +``` + +##### Parameters + +###### slide + +[`IgxSlideComponent`](IgxSlideComponent.md) + +###### direction? + +[`CarouselAnimationDirection`](../enumerations/CarouselAnimationDirection.md) + +##### Returns + +`void` + +##### Member Of + +IgxCarouselComponent + +#### Call Signature + +> **select**(`index`, `direction?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:811](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L811) + +Switches to slide by index with a given `direction`. +```typescript +this.carousel.select(2, CarouselAnimationDirection.NEXT); +``` + +##### Parameters + +###### index + +`number` + +###### direction? + +[`CarouselAnimationDirection`](../enumerations/CarouselAnimationDirection.md) + +##### Returns + +`void` + +##### Member Of + +IgxCarouselComponent + +*** + +### stop() + +> **stop**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L888) + +Stops slide transitions if the `pause` option is set to `true`. +No operation otherwise. +```typescript + this.carousel.stop(); +} +``` + +#### Returns + +`void` + +#### Member Of + +IgxCarouselComponent diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselIndicatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselIndicatorDirective.md new file mode 100644 index 000000000..07026c67d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselIndicatorDirective.md @@ -0,0 +1,13 @@ +# Class: IgxCarouselIndicatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts#L7) + +## Constructors + +### Constructor + +> **new IgxCarouselIndicatorDirective**(): `IgxCarouselIndicatorDirective` + +#### Returns + +`IgxCarouselIndicatorDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselNextButtonDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselNextButtonDirective.md new file mode 100644 index 000000000..0316eb618 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselNextButtonDirective.md @@ -0,0 +1,13 @@ +# Class: IgxCarouselNextButtonDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts#L14) + +## Constructors + +### Constructor + +> **new IgxCarouselNextButtonDirective**(): `IgxCarouselNextButtonDirective` + +#### Returns + +`IgxCarouselNextButtonDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselPrevButtonDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselPrevButtonDirective.md new file mode 100644 index 000000000..35fd9f4b9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCarouselPrevButtonDirective.md @@ -0,0 +1,13 @@ +# Class: IgxCarouselPrevButtonDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts#L21) + +## Constructors + +### Constructor + +> **new IgxCarouselPrevButtonDirective**(): `IgxCarouselPrevButtonDirective` + +#### Returns + +`IgxCarouselPrevButtonDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCell.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCell.md new file mode 100644 index 000000000..5de302209 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCell.md @@ -0,0 +1,217 @@ +# Class: IgxCell + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L119) + +## Constructors + +### Constructor + +> **new IgxCell**(`id`, `rowIndex`, `column`, `value`, `_editValue`, `rowData`, `grid`): `IgxCell` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L124) + +#### Parameters + +##### id + +`any` + +##### rowIndex + +`number` + +##### column + +`any` + +##### value + +`any` + +##### \_editValue + +`any` + +##### rowData + +`any` + +##### grid + +[`GridType`](../interfaces/GridType.md) + +#### Returns + +`IgxCell` + +## Properties + +### \_editValue + +> **\_editValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L129) + +*** + +### column + +> **column**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L127) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L131) + +*** + +### id + +> **id**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L125) + +*** + +### pendingValue + +> **pendingValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L122) + +*** + +### primaryKey + +> **primaryKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L120) + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L130) + +*** + +### rowIndex + +> **rowIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L126) + +*** + +### state + +> **state**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L121) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L128) + +## Accessors + +### editValue + +#### Get Signature + +> **get** **editValue**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L135) + +##### Returns + +`any` + +#### Set Signature + +> **set** **editValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L142) + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +## Methods + +### castToNumber() + +> **castToNumber**(`value`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L154) + +#### Parameters + +##### value + +`any` + +#### Returns + +`any` + +*** + +### createCellEditDoneEventArgs() + +> **createCellEditDoneEventArgs**(`value`, `event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L183) + +#### Parameters + +##### value + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +*** + +### createCellEditEventArgs() + +> **createCellEditEventArgs**(`includeNewValue?`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L162) + +#### Parameters + +##### includeNewValue? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellCrudState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellCrudState.md new file mode 100644 index 000000000..217df812a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellCrudState.md @@ -0,0 +1,279 @@ +# Class: IgxCellCrudState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L207) + +## Extended by + +- [`IgxRowCrudState`](IgxRowCrudState.md) + +## Constructors + +### Constructor + +> **new IgxCellCrudState**(): `IgxCellCrudState` + +#### Returns + +`IgxCellCrudState` + +## Properties + +### cell + +> **cell**: [`IgxCell`](IgxCell.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L209) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L208) + +*** + +### isInCompositionMode + +> **isInCompositionMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L211) + +*** + +### row + +> **row**: [`IgxEditRow`](IgxEditRow.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L210) + +## Accessors + +### cellInEditMode + +#### Get Signature + +> **get** **cellInEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L231) + +##### Returns + +`boolean` + +## Methods + +### beginCellEdit() + +> **beginCellEdit**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L235) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### cellEdit() + +> **cellEdit**(`event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L245) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +*** + +### cellEditDone() + +> **cellEditDone**(`event`, `addRow`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L308) + +#### Parameters + +##### event + +`any` + +##### addRow + +`boolean` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +*** + +### createCell() + +> **createCell**(`cell`): [`IgxCell`](IgxCell.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L213) + +#### Parameters + +##### cell + +`any` + +#### Returns + +[`IgxCell`](IgxCell.md) + +*** + +### createRow() + +> **createRow**(`cell`): [`IgxEditRow`](IgxEditRow.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L218) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +[`IgxEditRow`](IgxEditRow.md) + +*** + +### endCellEdit() + +> **endCellEdit**(`restoreFocus?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L334) + +Clears cell editing state + +#### Parameters + +##### restoreFocus? + +`boolean` = `false` + +#### Returns + +`void` + +*** + +### exitCellEdit() + +> **exitCellEdit**(`event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L319) + +Exit cell edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +*** + +### sameCell() + +> **sameCell**(`cell`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L226) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +`boolean` + +*** + +### sameRow() + +> **sameRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L222) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +*** + +### targetInEdit() + +> **targetInEdit**(`rowIndex`, `columnIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L342) + +Returns whether the targeted cell is in edit mode + +#### Parameters + +##### rowIndex + +`number` + +##### columnIndex + +`number` + +#### Returns + +`boolean` + +*** + +### updateCell() + +> **updateCell**(`exit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L251) + +#### Parameters + +##### exit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellEditorTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellEditorTemplateDirective.md new file mode 100644 index 000000000..3de74016a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellEditorTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxCellEditorTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L75) + +## Constructors + +### Constructor + +> **new IgxCellEditorTemplateDirective**(): `IgxCellEditorTemplateDirective` + +#### Returns + +`IgxCellEditorTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L76) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxCellTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L79) + +#### Parameters + +##### \_directive + +`IgxCellEditorTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxCellTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellHeaderTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellHeaderTemplateDirective.md new file mode 100644 index 000000000..fbd9613a2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellHeaderTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxCellHeaderTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L50) + +## Constructors + +### Constructor + +> **new IgxCellHeaderTemplateDirective**(): `IgxCellHeaderTemplateDirective` + +#### Returns + +`IgxCellHeaderTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L51) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxColumnTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L54) + +#### Parameters + +##### \_directive + +`IgxCellHeaderTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxColumnTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellTemplateDirective.md new file mode 100644 index 000000000..52a73ce90 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxCellTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L22) + +## Constructors + +### Constructor + +> **new IgxCellTemplateDirective**(): `IgxCellTemplateDirective` + +#### Returns + +`IgxCellTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L23) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxCellTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L26) + +#### Parameters + +##### \_directive + +`IgxCellTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxCellTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellValidationErrorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellValidationErrorDirective.md new file mode 100644 index 000000000..401e780f6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCellValidationErrorDirective.md @@ -0,0 +1,43 @@ +# Class: IgxCellValidationErrorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L36) + +## Constructors + +### Constructor + +> **new IgxCellValidationErrorDirective**(): `IgxCellValidationErrorDirective` + +#### Returns + +`IgxCellValidationErrorDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L37) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxCellTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L40) + +#### Parameters + +##### \_directive + +`IgxCellValidationErrorDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxCellTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCheckboxComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCheckboxComponent.md new file mode 100644 index 000000000..6e499d646 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCheckboxComponent.md @@ -0,0 +1,758 @@ +# Class: IgxCheckboxComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L47) + +Allows users to make a binary choice for a certain condition. + +## Igx Module + +IgxCheckboxModule + +## Igx Theme + +igx-checkbox-theme + +## Igx Keywords + +checkbox, label + +## Igx Group + +Data entry and display + +## Remarks + +The Ignite UI Checkbox is a selection control that allows users to make a binary choice for a certain condition.It behaves similarly +to the native browser checkbox. + +## Example + +```html +<igx-checkbox [checked]="true"> + simple checkbox +</igx-checkbox> +``` + +## Extends + +- [`CheckboxBaseDirective`](CheckboxBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxCheckboxComponent**(): `IgxCheckboxComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L237) + +#### Returns + +`IgxCheckboxComponent` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`constructor`](CheckboxBaseDirective.md#constructor) + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L235) + +Sets/gets the value of the `aria-label` attribute. + +#### Example + +```html +<igx-checkbox aria-label="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabel = this.checkbox.ariaLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ariaLabel`](CheckboxBaseDirective.md#arialabel) + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L221) + +Sets/gets the `aria-labelledby` attribute. +If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute. + +#### Example + +```html +<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabelledBy = this.checkbox.ariaLabelledBy; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ariaLabelledBy`](CheckboxBaseDirective.md#arialabelledby) + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L27) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`cdr`](CheckboxBaseDirective.md#cdr) + +*** + +### change + +> `readonly` **change**: `EventEmitter`\<[`IChangeCheckboxEventArgs`](../interfaces/IChangeCheckboxEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L36) + +An event that is emitted after the checkbox state is changed. +Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments. + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`change`](CheckboxBaseDirective.md#change) + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-checkbox'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L59) + +Returns the class of the checkbox component. + +#### Example + +```typescript +let class = this.checkbox.cssClass; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`cssClass`](CheckboxBaseDirective.md#cssclass) + +*** + +### destroyRef + +> `protected` **destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L335) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`destroyRef`](CheckboxBaseDirective.md#destroyref) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L179) + +Sets/gets whether the checkbox is disabled. +Default value is `false`. + +#### Example + +```html +<igx-checkbox disabled></igx-checkbox> +``` +```typescript +let isDisabled = this.checkbox.disabled; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`disabled`](CheckboxBaseDirective.md#disabled) + +*** + +### disableRipple + +> **disableRipple**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L206) + +Enables/Disables the ripple effect. +If not set, `disableRipple` will have value `false`. + +#### Example + +```html +<igx-checkbox [disableRipple]="true"></igx-checkbox> +``` +```typescript +let isRippleDisabled = this.checkbox.desableRipple; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`disableRipple`](CheckboxBaseDirective.md#disableripple) + +*** + +### disableTransitions + +> **disableTransitions**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L226) + +Sets/gets whether the checkbox should disable all css transitions. +Default value is `false`. + +#### Example + +```html +<igx-checkbox [disableTransitions]="true"></igx-checkbox> +``` +```typescript +let disableTransitions = this.checkbox.disableTransitions; +``` + +*** + +### focused + +> **focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L126) + +Sets/gets whether the checkbox component is on focus. +Default value is `false`. + +#### Example + +```typescript +this.checkbox.focused = true; +``` +```typescript +let isFocused = this.checkbox.focused; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`focused`](CheckboxBaseDirective.md#focused) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L123) + +Sets/gets the `id` of the checkbox component. +If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`. + +#### Example + +```html +<igx-checkbox id="my-first-checkbox"></igx-checkbox> +``` +```typescript +let checkboxId = this.checkbox.id; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`id`](CheckboxBaseDirective.md#id) + +*** + +### indeterminate + +> **indeterminate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L142) + +Sets/gets the checkbox indeterminate visual state. +Default value is `false`; + +#### Example + +```html +<igx-checkbox [indeterminate]="true"></igx-checkbox> +``` +```typescript +let isIndeterminate = this.checkbox.indeterminate; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`indeterminate`](CheckboxBaseDirective.md#indeterminate) + +*** + +### invalid + +> **invalid**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L195) + +Sets/gets whether the checkbox is invalid. +Default value is `false`. + +#### Example + +```html +<igx-checkbox invalid></igx-checkbox> +``` +```typescript +let isInvalid = this.checkbox.invalid; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`invalid`](CheckboxBaseDirective.md#invalid) + +*** + +### labelId + +> **labelId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L137) + +Sets/gets the id of the `label` element. +If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`. + +#### Example + +```html +<igx-checkbox labelId="Label1"></igx-checkbox> +``` +```typescript +let labelId = this.component.labelId; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`labelId`](CheckboxBaseDirective.md#labelid) + +*** + +### labelPosition + +> **labelPosition**: `string` = `LabelPosition.AFTER` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L191) + +Sets/gets the position of the `label`. + If not set, the `labelPosition` will have value `"after"`. + +#### Example + +```html +<igx-checkbox labelPosition="before"></igx-checkbox> +``` +```typescript +let labelPosition = this.checkbox.labelPosition; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`labelPosition`](CheckboxBaseDirective.md#labelposition) + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L163) + +Sets/gets the `name` attribute. + +#### Example + +```html +<igx-checkbox name="Checkbox1"></igx-checkbox> +``` +```typescript +let name = this.checkbox.name; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`name`](CheckboxBaseDirective.md#name) + +*** + +### nativeInput + +> **nativeInput**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L54) + +Returns reference to the native checkbox element. + +#### Example + +```typescript +let checkboxElement = this.component.checkboxElement; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeInput`](CheckboxBaseDirective.md#nativeinput) + +*** + +### nativeLabel + +> **nativeLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L65) + +Returns reference to the native label element. +```typescript + +@example +let labelElement = this.component.nativeLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeLabel`](CheckboxBaseDirective.md#nativelabel) + +*** + +### ngControl + +> **ngControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L29) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ngControl`](CheckboxBaseDirective.md#ngcontrol) + +*** + +### placeholderLabel + +> **placeholderLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L107) + +Returns reference to the label placeholder element. +```typescript + +@example +let labelPlaceholder = this.component.placeholderLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`placeholderLabel`](CheckboxBaseDirective.md#placeholderlabel) + +*** + +### readonly + +> **readonly**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L210) + +Sets/gets whether the checkbox is readonly. +Default value is `false`. + +#### Example + +```html +<igx-checkbox [readonly]="true"></igx-checkbox> +``` +```typescript +let readonly = this.checkbox.readonly; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`readonly`](CheckboxBaseDirective.md#readonly) + +*** + +### tabindex + +> **tabindex**: `number` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L176) + +Sets/gets the value of the `tabindex` attribute. + +#### Example + +```html +<igx-checkbox [tabindex]="1"></igx-checkbox> +``` +```typescript +let tabIndex = this.checkbox.tabindex; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`tabindex`](CheckboxBaseDirective.md#tabindex) + +*** + +### themeToken + +> `protected` **themeToken**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L28) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`themeToken`](CheckboxBaseDirective.md#themetoken) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L150) + +Sets/gets the `value` attribute. + +#### Example + +```html +<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox> +``` +```typescript +let value = this.checkbox.value; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`value`](CheckboxBaseDirective.md#value) + +## Accessors + +### bootstrap + +#### Get Signature + +> **get** `protected` **bootstrap**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L96) + +Returns if the component is of type `bootstrap`. + +##### Example + +```typescript +let checkbox = this.checkbox.bootstrap; +``` + +##### Returns + +`boolean` + +*** + +### checked + +#### Get Signature + +> **get** **checked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L161) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L158) + +Sets/gets whether the checkbox is checked. +Default value is `false`. + +##### Example + +```html +<igx-checkbox [checked]="true"></igx-checkbox> +``` +```typescript +let isChecked = this.checkbox.checked; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`checked`](CheckboxBaseDirective.md#checked) + +*** + +### fluent + +#### Get Signature + +> **get** `protected` **fluent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L109) + +Returns if the component is of type `fluent`. + +##### Example + +```typescript +let checkbox = this.checkbox.fluent; +``` + +##### Returns + +`boolean` + +*** + +### indigo + +#### Get Signature + +> **get** `protected` **indigo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L83) + +Returns if the component is of type `indigo`. + +##### Example + +```typescript +let checkbox = this.checkbox.indigo; +``` + +##### Returns + +`boolean` + +*** + +### material + +#### Get Signature + +> **get** `protected` **material**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts#L70) + +Returns if the component is of type `material`. + +##### Example + +```typescript +let checkbox = this.checkbox.material; +``` + +##### Returns + +`boolean` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L94) + +Returns reference to the `nativeElement` of the igx-checkbox/igx-switch. + +##### Example + +```typescript +let nativeElement = this.component.nativeElement; +``` + +##### Returns + +`any` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeElement`](CheckboxBaseDirective.md#nativeelement) + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L267) + +Sets/gets whether the checkbox is required. +If not set, `required` will have value `false`. + +##### Example + +```html +<igx-checkbox required></igx-checkbox> +``` +```typescript +let isRequired = this.checkbox.required; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L270) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`required`](CheckboxBaseDirective.md#required) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxChipComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxChipComponent.md new file mode 100644 index 000000000..5c7f3bc1f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxChipComponent.md @@ -0,0 +1,880 @@ +# Class: IgxChipComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L89) + +Chip is compact visual component that displays information in an obround. + +## Igx Module + +IgxChipsModule + +## Igx Theme + +igx-chip-theme + +## Igx Keywords + +chip + +## Igx Group + +display + +## Remarks + +The Ignite UI Chip can be templated, deleted, and selected. +Multiple chips can be reordered and visually connected to each other. +Chips reside in a container called chips area which is responsible for managing the interactions between the chips. + +## Example + +```html +<igx-chip class="chipStyle" [id]="901" [draggable]="true" [removable]="true" (remove)="chipRemoved($event)"> + <igx-avatar class="chip-avatar-resized" igxPrefix></igx-avatar> +</igx-chip> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxChipComponent**(): `IgxChipComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L614) + +#### Returns + +`IgxChipComponent` + +## Properties + +### \_movedWhileRemoving + +> `protected` **\_movedWhileRemoving**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L609) + +*** + +### \_selected + +> `protected` **\_selected**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:607](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L607) + +*** + +### \_selectedItemClass + +> `protected` **\_selectedItemClass**: `string` = `'igx-chip__item--selected'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:608](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L608) + +*** + +### \_tabIndex + +> `protected` **\_tabIndex**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L606) + +*** + +### animateOnRelease + +> **animateOnRelease**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L187) + +Enables/disables the draggable element animation when the element is released. +By default it's set to true. + +#### Example + +```html +<igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip> +``` + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L90) + +*** + +### chipClick + +> **chipClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:404](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L404) + +Emits an event when the `IgxChipComponent` is clicked. +Returns the clicked `IgxChipComponent`, whether the event should be canceled. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (click)="chipClick($event)"> +``` + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:610](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L610) + +*** + +### data + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L163) + +Stores data related to the chip. + +#### Example + +```html +<igx-chip [data]="{ value: 'Country' }"></igx-chip> +``` + +*** + +### defaultClass + +> `protected` **defaultClass**: `string` = `'igx-chip'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L496) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L268) + +Disables the `IgxChipComponent`. When disabled it restricts user interactions +like focusing on click or tab, selection on click or Space, dragging. +By default it is set to false. + +#### Example + +```html +<igx-chip [id]="chip.id" [disabled]="true"></igx-chip> +``` + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L93) + +*** + +### dragDirective + +> **dragDirective**: [`IgxDragDirective`](IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L537) + +Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior. + +#### Example + +```html +<igx-chip [id]="chip.id" [draggable]="true"></igx-chip> +``` +```typescript +onMoveStart(event: IBaseChipEventArgs){ + let dragDirective = event.owner.dragDirective; +} +``` + +*** + +### dragDrop + +> **dragDrop**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:493](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L493) + +Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`. +Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as +the original drop event arguments. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragDrop)="chipLeave($event)"> +``` + +*** + +### dragEnter + +> **dragEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L454) + +Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`. +Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as +the original drop event arguments. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragEnter)="chipEnter($event)"> +``` + +*** + +### draggable + +> **draggable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L175) + +Defines if the `IgxChipComponent` can be dragged in order to change it's position. +By default it is set to false. + +#### Example + +```html +<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip> +``` + +*** + +### dragLeave + +> **dragLeave**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L467) + +Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`. +Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as +the original drop event arguments. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragLeave)="chipLeave($event)"> +``` + +*** + +### dragOver + +> **dragOver**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:480](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L480) + +Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`. +Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as +the original drop event arguments. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragOver)="chipOver($event)"> +``` + +*** + +### hideBaseOnDrag + +> **hideBaseOnDrag**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L199) + +Enables/disables the hiding of the base element that has been dragged. +By default it's set to true. + +#### Example + +```html +<igx-chip [id]="'igx-chip-1'" [draggable]="true" [hideBaseOnDrag]="false"></igx-chip> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L120) + +Sets the value of `id` attribute. If not provided it will be automatically generated. + +#### Example + +```html +<igx-chip [id]="'igx-chip-1'"></igx-chip> +``` + +*** + +### keyDown + +> **keyDown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:441](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L441) + +Emits an event when the `IgxChipComponent` keyboard navigation is being used. +Returns the focused/selected `IgxChipComponent`, whether the event should be canceled, +if the `alt`, `shift` or `control` key is pressed and the pressed key name. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (keyDown)="chipKeyDown($event)"> +``` + +*** + +### moveEnd + +> **moveEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L380) + +Emits an event when the `IgxChipComponent` moving ends. +Returns the moved `IgxChipComponent`. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveEnd)="moveEnded($event)"> +``` + +*** + +### moveStart + +> **moveStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:368](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L368) + +Emits an event when the `IgxChipComponent` moving starts. +Returns the moving `IgxChipComponent`. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveStart)="moveStarted($event)"> +``` + +*** + +### removable + +> **removable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L211) + +Defines if the `IgxChipComponent` should render remove button and throw remove events. +By default it is set to false. + +#### Example + +```html +<igx-chip [id]="'igx-chip-1'" [draggable]="true" [removable]="true"></igx-chip> +``` + +*** + +### remove + +> **remove**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L392) + +Emits an event when the `IgxChipComponent` is removed. +Returns the removed `IgxChipComponent`. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (remove)="remove($event)"> +``` + +*** + +### removeIcon + +> **removeIcon**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L223) + +Overrides the default icon that the chip applies to the remove button. + +#### Example + +```html +<igx-chip [id]="chip.id" [removable]="true" [removeIcon]="iconTemplate"></igx-chip> +<ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template> +``` + +*** + +### role + +> **role**: `string` = `'option'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L131) + +Returns the `role` attribute of the chip. + +#### Example + +```typescript +let chipRole = this.chip.role; +``` + +*** + +### selectable + +> **selectable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L235) + +Defines if the `IgxChipComponent` can be selected on click or through navigation, +By default it is set to false. + +#### Example + +```html +<igx-chip [id]="chip.id" [draggable]="true" [removable]="true" [selectable]="true"></igx-chip> +``` + +*** + +### selectedChanged + +> **selectedChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:428](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L428) + +Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanged)="chipSelectEnd($event)"> +``` + +*** + +### selectedChanging + +> **selectedChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L417) + +Emits event when the `IgxChipComponent` is selected/deselected. +Returns the selected chip reference, whether the event should be canceled, what is the next selection state and +when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`. + +#### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanging)="chipSelect($event)"> +``` + +*** + +### selectIcon + +> **selectIcon**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L247) + +Overrides the default icon that the chip applies when it is selected. + +#### Example + +```html +<igx-chip [id]="chip.id" [selectable]="true" [selectIcon]="iconTemplate"></igx-chip> +<ng-template #iconTemplate><igx-icon>done_outline</igx-icon></ng-template> +``` + +*** + +### variant? + +> `optional` **variant?**: [`IgxChipTypeVariant`](../type-aliases/IgxChipTypeVariant.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L109) + +Sets/gets the variant of the chip. + +#### Remarks + +Allowed values are `primary`, `info`, `success`, `warning`, `danger`. +Providing no/nullish value leaves the chip in its default state. + +#### Example + +```html +<igx-chip variant="success"></igx-chip> +``` + +## Accessors + +### chipSize + +#### Get Signature + +> **get** `protected` **chipSize**(): `Size` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L603) + +##### Returns + +`Size` + +*** + +### color + +#### Get Signature + +> **get** **color**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L338) + +Returns the background color of the `IgxChipComponent`. + +##### Example + +```typescript +@ViewChild('myChip') +public chip: IgxChipComponent; +ngAfterViewInit(){ + let chipColor = this.chip.color; +} +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **color**(`newColor`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:322](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L322) + +Sets the `IgxChipComponent` background color. +The `color` property supports string, rgb, hex. + +##### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [color]="'#ff0000'"></igx-chip> +``` + +##### Parameters + +###### newColor + +`any` + +##### Returns + +`void` + +*** + +### isDanger + +#### Get Signature + +> **get** `protected` **isDanger**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L519) + +##### Returns + +`boolean` + +*** + +### isInfo + +#### Get Signature + +> **get** `protected` **isInfo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:504](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L504) + +##### Returns + +`boolean` + +*** + +### isPrimary + +#### Get Signature + +> **get** `protected` **isPrimary**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:499](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L499) + +##### Returns + +`boolean` + +*** + +### isSuccess + +#### Get Signature + +> **get** `protected` **isSuccess**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L509) + +##### Returns + +`boolean` + +*** + +### isWarning + +#### Get Signature + +> **get** `protected` **isWarning**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:514](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L514) + +##### Returns + +`boolean` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:354](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L354) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L347) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L301) + +Returns if the `IgxChipComponent` is selected. + +##### Example + +```typescript +@ViewChild('myChip') +public chip: IgxChipComponent; +selectedChip(){ + let selectedChip = this.chip.selected; +} +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`newValue`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L285) + +Sets the `IgxChipComponent` selected state. + +##### Example + +```html +<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true"> +``` + +Two-way data binding: +```html +<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected"> +``` + +##### Parameters + +###### newValue + +`boolean` + +##### Returns + +`void` + +*** + +### tabIndex + +#### Get Signature + +> **get** **tabIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L147) + +##### Returns + +`number` + +#### Set Signature + +> **set** **tabIndex**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L143) + +Sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set. + +##### Example + +```html +<igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip> +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +## Methods + +### changeSelection() + +> `protected` **changeSelection**(`newValue`, `srcEvent?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L882) + +#### Parameters + +##### newValue + +`boolean` + +##### srcEvent? + +`any` = `null` + +#### Returns + +`void` + +*** + +### ngOnDestroy() + +> **ngOnDestroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L922) + +#### Returns + +`void` + +*** + +### ngOnInit() + +> **ngOnInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L918) + +#### Returns + +`void` + +*** + +### onRemoveMouseDown() + +> **onRemoveMouseDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:700](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L700) + +#### Parameters + +##### event + +`PointerEvent` \| `MouseEvent` + +#### Returns + +`void` + +*** + +### onSelectTransitionDone() + +> **onSelectTransitionDone**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L642) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxChipsAreaComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxChipsAreaComponent.md new file mode 100644 index 000000000..ad8ef86e1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxChipsAreaComponent.md @@ -0,0 +1,231 @@ +# Class: IgxChipsAreaComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L53) + +The chip area allows you to perform more complex scenarios with chips that require interaction, +like dragging, selection, navigation, etc. + +## Igx Module + +IgxChipsModule + +## Igx Theme + +igx-chip-theme + +## Igx Keywords + +chip area, chip + +## Igx Group + +display + +## Example + +```html +<igx-chips-area> + <igx-chip *ngFor="let chip of chipList" [id]="chip.id"> + <span>{{chip.text}}</span> + </igx-chip> +</igx-chips-area> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxChipsAreaComponent**(): `IgxChipsAreaComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L184) + +#### Returns + +`IgxChipsAreaComponent` + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` = `'chip area'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L80) + +Returns the `aria-label` attribute of the chips area. + +#### Example + +```typescript +let ariaLabel = this.chipsArea.ariaLabel; +``` + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L54) + +*** + +### chipsList + +> **chipsList**: `QueryList`\<[`IgxChipComponent`](IgxChipComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L174) + +Holds the `IgxChipComponent` in the `IgxChipsAreaComponent`. + +#### Example + +```typescript +ngAfterViewInit(){ + let chips = this.chipsArea.chipsList; +} +``` + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L176) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L55) + +*** + +### height + +> **height**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L108) + +Sets the height of the `IgxChipsAreaComponent`. + +#### Example + +```html +<igx-chips-area #chipsArea [width]="300" [height]="10" (onReorder)="chipsOrderChanged($event)"></igx-chips-area> +``` + +*** + +### hostClass + +> `protected` **hostClass**: `string` = `'igx-chip-area'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L179) + +*** + +### moveEnd + +> **moveEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L161) + +Emits an event after an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved. + +#### Example + +```html +<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (moveEnd)="moveEnd($event)"></igx-chips-area> +``` + +*** + +### moveStart + +> **moveStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L150) + +Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved. + +#### Example + +```html +<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (moveStart)="moveStart($event)"></igx-chips-area> +``` + +*** + +### reorder + +> **reorder**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L126) + +Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered. +Returns an array of `IgxChipComponent`s. + +#### Example + +```html +<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="changedOrder($event)"></igx-chips-area> +``` + +*** + +### role + +> **role**: `string` = `'listbox'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L68) + +Returns the `role` attribute of the chips area. + +#### Example + +```typescript +let chipsAreaRole = this.chipsArea.role; +``` + +*** + +### selectionChange + +> **selectionChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L139) + +Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected. +Fired after the chips area is initialized if there are initially selected chips as well. +Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`. + +#### Example + +```html +<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (selectionChange)="selection($event)"></igx-chips-area> +``` + +*** + +### width + +> **width**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L91) + +Sets the width of the `IgxChipsAreaComponent`. + +#### Example + +```html +<igx-chips-area #chipsArea [width]="300" [height]="10" (onReorder)="chipsOrderChanged($event)"></igx-chips-area> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCircularProgressBarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCircularProgressBarComponent.md new file mode 100644 index 000000000..3a03c7835 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCircularProgressBarComponent.md @@ -0,0 +1,586 @@ +# Class: IgxCircularProgressBarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L521) + +## Extends + +- `BaseProgressDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxCircularProgressBarComponent**(): `IgxCircularProgressBarComponent` + +#### Returns + +`IgxCircularProgressBarComponent` + +#### Inherited from + +`BaseProgressDirective.constructor` + +## Properties + +### \_animate + +> `protected` **\_animate**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L84) + +#### Inherited from + +`BaseProgressDirective._animate` + +*** + +### \_cdr + +> `protected` **\_cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L88) + +#### Inherited from + +`BaseProgressDirective._cdr` + +*** + +### \_contentInit + +> `protected` **\_contentInit**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L79) + +#### Inherited from + +`BaseProgressDirective._contentInit` + +*** + +### \_fraction + +> `protected` **\_fraction**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L86) + +#### Inherited from + +`BaseProgressDirective._fraction` + +*** + +### \_indeterminate + +> `protected` **\_indeterminate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L80) + +#### Inherited from + +`BaseProgressDirective._indeterminate` + +*** + +### \_integer + +> `protected` **\_integer**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L87) + +#### Inherited from + +`BaseProgressDirective._integer` + +*** + +### \_max + +> `protected` **\_max**: `number` = `100` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L82) + +#### Inherited from + +`BaseProgressDirective._max` + +*** + +### \_step + +> `protected` **\_step**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L85) + +#### Inherited from + +`BaseProgressDirective._step` + +*** + +### \_text + +> `protected` **\_text**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L81) + +#### Inherited from + +`BaseProgressDirective._text` + +*** + +### \_value + +> `protected` **\_value**: `number` = `MIN_VALUE` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L83) + +#### Inherited from + +`BaseProgressDirective._value` + +*** + +### \_zone + +> `protected` **\_zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L89) + +#### Inherited from + +`BaseProgressDirective._zone` + +*** + +### animationDuration + +> **animationDuration**: `number` = `2000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L77) + +Sets/Gets progressbar animation duration. By default, it is 2000ms. +```html +<igx-linear-bar [animationDuration]="3000"></igx-linear-bar> +<igx-circular-bar [animationDuration]="3000"></igx-linear-bar> +``` + +#### Inherited from + +`BaseProgressDirective.animationDuration` + +*** + +### gradientTemplate + +> **gradientTemplate**: [`IgxProgressBarGradientDirective`](IgxProgressBarGradientDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:577](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L577) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L538) + +Sets the value of `id` attribute. If not provided it will be automatically generated. +```html +<igx-circular-bar [id]="'igx-circular-bar-55'"></igx-circular-bar> +``` + +*** + +### progressChanged + +> **progressChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L67) + +An event, which is triggered after progress is changed. +```typescript +public progressChange(event) { + alert("Progress made!"); +} + //... +``` +```html +<igx-circular-bar (progressChanged)="progressChange($event)"></igx-circular-bar> +<igx-linear-bar (progressChanged)="progressChange($event)"></igx-linear-bar> +``` + +#### Inherited from + +`BaseProgressDirective.progressChanged` + +*** + +### textTemplate + +> **textTemplate**: [`IgxProgressBarTextTemplateDirective`](IgxProgressBarTextTemplateDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L574) + +*** + +### textVisibility + +> **textVisibility**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:571](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L571) + +Sets the text visibility. By default, it is set to true. +```html +<igx-circular-bar [textVisibility]="false"></igx-circular-bar> +``` + +*** + +### type + +> **type**: `string` = `'default'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:610](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L610) + +Set type of the `IgxCircularProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. +```html +<igx-circular-bar [type]="'error'"></igx-circular-bar> +``` + +## Accessors + +### animate + +#### Get Signature + +> **get** **animate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L198) + +Returns whether the `progress bar` has animation true/false. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; +public animationStatus(event) { + let animationStatus = this.progressBar.animate; + alert(animationStatus); +} +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **animate**(`animate`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L183) + +Animating the progress. By default, it is set to true. +```html +<igx-linear-bar [animate]="false"></igx-linear-bar> +<igx-circular-bar [animate]="false"></igx-circular-bar> +``` + +##### Parameters + +###### animate + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.animate` + +*** + +### indeterminate + +#### Get Signature + +> **get** **indeterminate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L113) + +Gets the current state of the progress bar: +- `true` if in the indeterminate state (no progress value displayed), +- `false` if the progress bar shows the actual progress. + +```typescript +const isIndeterminate = progressBar.indeterminate; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **indeterminate**(`isIndeterminate`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L99) + +Sets progressbar in indeterminate. By default, it is set to false. +```html +<igx-linear-bar [indeterminate]="true"></igx-linear-bar> +<igx-circular-bar [indeterminate]="true"></igx-circular-bar> +``` + +##### Parameters + +###### isIndeterminate + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.indeterminate` + +*** + +### max + +#### Get Signature + +> **get** **max**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L237) + +Returns the maximum progress value of the `progress bar`. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; +public maxValue(event) { + let max = this.progressBar.max; + alert(max); +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **max**(`maxNum`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L211) + +Set maximum value that can be passed. By default it is set to 100. +```html +<igx-linear-bar [max]="200"></igx-linear-bar> +<igx-circular-bar [max]="200"></igx-circular-bar> +``` + +##### Parameters + +###### maxNum + +`number` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.max` + +*** + +### step + +#### Get Signature + +> **get** **step**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L129) + +Returns the value which update the progress indicator of the `progress bar`. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; +public stepValue(event) { + let step = this.progressBar.step; + alert(step); +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **step**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L143) + +Sets the value by which progress indicator is updated. By default, it is 1. +```html +<igx-linear-bar [step]="1"></igx-linear-bar> +<igx-circular-bar [step]="1"></igx-circular-bar> +``` + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.step` + +*** + +### text + +#### Get Signature + +> **get** **text**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L171) + +Gets a custom text. +```typescript +let text = this.circularBar.text; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **text**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L160) + +Set a custom text. This will hide the counter value. +```html +<igx-circular-bar text="my text"></igx-circular-bar> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.text` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L301) + +Returns value that indicates the current `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` position. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent; +public getValue(event) { + let value = this.progressBar.value; + alert(value); +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **value**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L338) + +Set value that indicates the current `IgxLinearProgressBarComponent / IgxCircularProgressBarComponent` position. +```html +<igx-linear-bar [value]="50"></igx-linear-bar> +<igx-circular-bar [value]="50"></igx-circular-bar> +``` + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.value` + +*** + +### valueInPercent + +#### Get Signature + +> **get** **valueInPercent**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L283) + +Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent +public valuePercent(event){ + let percentValue = this.progressBar.valueInPercent; + alert(percentValue); +} +``` + +##### Returns + +`number` + +#### Inherited from + +`BaseProgressDirective.valueInPercent` + +## Methods + +### ngAfterContentInit() + +> **ngAfterContentInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:652](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L652) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCollapsibleIndicatorTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCollapsibleIndicatorTemplateDirective.md new file mode 100644 index 000000000..4ee956409 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCollapsibleIndicatorTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxCollapsibleIndicatorTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L89) + +## Constructors + +### Constructor + +> **new IgxCollapsibleIndicatorTemplateDirective**(): `IgxCollapsibleIndicatorTemplateDirective` + +#### Returns + +`IgxCollapsibleIndicatorTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L90) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxColumnTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L93) + +#### Parameters + +##### \_directive + +`IgxCollapsibleIndicatorTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxColumnTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnActionsBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnActionsBaseDirective.md new file mode 100644 index 000000000..fa884023a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnActionsBaseDirective.md @@ -0,0 +1,18 @@ +# Abstract Class: IgxColumnActionsBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions-base.directive.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions-base.directive.ts#L5) + +## Extended by + +- [`IgxColumnHidingDirective`](IgxColumnHidingDirective.md) +- [`IgxColumnPinningDirective`](IgxColumnPinningDirective.md) + +## Constructors + +### Constructor + +> **new IgxColumnActionsBaseDirective**(): `IgxColumnActionsBaseDirective` + +#### Returns + +`IgxColumnActionsBaseDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnActionsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnActionsComponent.md new file mode 100644 index 000000000..bdc2d6b41 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnActionsComponent.md @@ -0,0 +1,487 @@ +# Class: IgxColumnActionsComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L24) + +Providing reference to `IgxColumnActionsComponent`: +```typescript + @ViewChild('columnActions', { read: IgxColumnActionsComponent }) + public columnActions: IgxColumnActionsComponent; + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnActionsComponent**(): `IgxColumnActionsComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L165) + +#### Returns + +`IgxColumnActionsComponent` + +## Properties + +### \_differ + +> `protected` **\_differ**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L133) + +*** + +### columnItems + +> **columnItems**: `QueryList`\<[`IgxCheckboxComponent`](IgxCheckboxComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L91) + +Gets the checkbox components representing column items currently present in the dropdown + +#### Example + +```typescript +let columnItems = this.columnActions.columnItems; +``` + +*** + +### columnsAreaMaxHeight + +> **columnsAreaMaxHeight**: `string` = `'100%'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L71) + +Gets/sets the max height of the columns area. + +#### Remarks + +The default max height is 100%. + +#### Example + +```html +<igx-column-actions [columnsAreaMaxHeight]="200px"></igx-column-actions> +``` + +*** + +### columnToggled + +> **columnToggled**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L111) + +An event that is emitted after a column's checked state is changed. +Provides references to the `column` and the `checked` properties as event arguments. +```html + <igx-column-actions (columnToggled)="columnToggled($event)"></igx-column-actions> +``` + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-column-actions'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L59) + +Sets/Gets the css class selector. +By default the value of the `class` attribute is `"igx-column-actions"`. +```typescript +let cssCLass = this.columnHidingUI.cssClass; +``` +```typescript +this.columnHidingUI.cssClass = 'column-chooser'; +``` + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L37) + +Gets/Sets the grid to provide column actions for. + +#### Example + +```typescript +let grid = this.columnActions.grid; +``` + +*** + +### hideFilter + +> **hideFilter**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L81) + +Shows/hides the columns filtering input from the UI. + +#### Example + +```html + <igx-column-actions [hideFilter]="true"></igx-column-actions> +``` + +*** + +### indentation + +> **indentation**: `number` = `30` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L47) + +Gets/sets the indentation of columns in the column list based on their hierarchy level. + +#### Example + +``` +<igx-column-actions [indentation]="15"></igx-column-actions> +``` + +*** + +### title + +> **title**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L101) + +Gets/sets the title of the column actions component. + +#### Example + +```html +<igx-column-actions [title]="'Pin Columns'"></igx-column-actions> +``` + +## Accessors + +### checkAllText + +#### Get Signature + +> **get** **checkAllText**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L281) + +Gets the text of the button that checks all columns. + +##### Remarks + +If unset it is obtained from the IgxColumnActionsBased derived directive applied. + +##### Example + +```typescript +let uncheckAllText = this.columnActions.uncheckAllText; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **checkAllText**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L294) + +Sets the text of the button that checks all columns. + +##### Remarks + +If unset it is obtained from the IgxColumnActionsBased derived directive applied. + +##### Example + +```html +<igx-column-actions [checkAllText]="'Hide All'"></igx-column-actions> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### columnDisplayOrder + +#### Get Signature + +> **get** **columnDisplayOrder**(): [`ColumnDisplayOrder`](../type-aliases/ColumnDisplayOrder.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L228) + +Gets the display order of the columns. + +##### Example + +```typescript +let columnDisplayOrder = this.columnActions.columnDisplayOrder; +``` + +##### Returns + +[`ColumnDisplayOrder`](../type-aliases/ColumnDisplayOrder.md) + +#### Set Signature + +> **set** **columnDisplayOrder**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L239) + +Sets the display order of the columns. + +##### Example + +```typescript +this.columnActions.columnDisplayOrder = ColumnDisplayOrder.Alphabetical; +``` + +##### Parameters + +###### value + +[`ColumnDisplayOrder`](../type-aliases/ColumnDisplayOrder.md) + +##### Returns + +`void` + +*** + +### filterColumnsPrompt + +#### Get Signature + +> **get** **filterColumnsPrompt**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L178) + +Gets the prompt that is displayed in the filter input. + +##### Example + +```typescript +let filterColumnsPrompt = this.columnActions.filterColumnsPrompt; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **filterColumnsPrompt**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L189) + +Sets the prompt that is displayed in the filter input. + +##### Example + +```html +<igx-column-actions [filterColumnsPrompt]="'Type here to search'"></igx-column-actions> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### filterCriteria + +#### Get Signature + +> **get** **filterCriteria**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L201) + +Gets the value which filters the columns list. + +##### Example + +```typescript +let filterCriteria = this.columnActions.filterCriteria; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **filterCriteria**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L212) + +Sets the value which filters the columns list. + +##### Example + +```html + <igx-column-actions [filterCriteria]="'ID'"></igx-column-actions> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L324) + +Gets/Sets the value of the `id` attribute. + +##### Remarks + +If not provided it will be automatically generated. + +##### Example + +```html +<igx-column-actions [id]="'igx-actions-1'"></igx-column-actions> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L327) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### uncheckAllText + +#### Get Signature + +> **get** **uncheckAllText**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L256) + +Gets the text of the button that unchecks all columns. + +##### Remarks + +If unset it is obtained from the IgxColumnActionsBased derived directive applied. + +##### Example + +```typescript +let uncheckAllText = this.columnActions.uncheckAllText; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **uncheckAllText**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L267) + +Sets the text of the button that unchecks all columns. + +##### Example + +```html +<igx-column-actions [uncheckAllText]="'Show All'"></igx-column-actions> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## Methods + +### checkAllColumns() + +> **checkAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L375) + +Checks all columns and performs the appropriate action. + +#### Returns + +`void` + +#### Example + +```typescript +this.columnActions.checkAllColumns(); +``` + +*** + +### uncheckAllColumns() + +> **uncheckAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts#L363) + +Unchecks all columns and performs the appropriate action. + +#### Returns + +`void` + +#### Example + +```typescript +this.columnActions.uncheckAllColumns(); +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnComponent.md new file mode 100644 index 000000000..424b0a17f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnComponent.md @@ -0,0 +1,2839 @@ +# Class: IgxColumnComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L57) + +**Ignite UI for Angular Column** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#columns-configuration) + +The Ignite UI Column is used within an `igx-grid` element to define what data the column will show. Features such as sorting, +filtering & editing are enabled at the column level. You can also provide a template containing custom content inside +the column using `ng-template` which will be used for all cells within the column. + +## Igx Parent + +IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent + +## Extended by + +- [`IgxColumnGroupComponent`](IgxColumnGroupComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`ColumnType`](../interfaces/ColumnType.md) + +## Constructors + +### Constructor + +> **new IgxColumnComponent**(): `IgxColumnComponent` + +#### Returns + +`IgxColumnComponent` + +## Properties + +### \_mergingComparer + +> `protected` **\_mergingComparer**: (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1887) + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +#### Returns + +`boolean` + +*** + +### \_pinningPosition + +> `protected` **\_pinningPosition**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1837) + +*** + +### \_vIndex + +> `protected` **\_vIndex**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1836) + +*** + +### additionalTemplateContext + +> **additionalTemplateContext**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L878) + +Sets/gets custom properties provided in additional template context. + +```html +<igx-column [additionalTemplateContext]="contextObject"> + <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext"> + {{ props }} + </ng-template> +</igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`additionalTemplateContext`](../interfaces/ColumnType.md#additionaltemplatecontext) + +*** + +### autosizeHeader + +> **autosizeHeader**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L299) + +Sets/gets whether the column header is included in autosize logic. +Useful when template for a column header is sized based on parent, for example a default `div`. +Default value is `false`. +```typescript +let isResizable = this.column.resizable; +``` +```html +<igx-column [resizable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +*** + +### cellClasses + +> **cellClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:647](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L647) + +Sets a conditional class selector of the column cells. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class, while the +value is either a callback function that returns a boolean, +or boolean, like so: +```typescript +callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; } +cellClasses = { 'className' : this.callback }; +``` +```html +<igx-column [cellClasses] = "cellClasses"></igx-column> +<igx-column [cellClasses] = "{'class1' : true }"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +*** + +### cellStyles + +> **cellStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L670) + +Sets conditional style properties on the column cells. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +As with `cellClasses` it accepts a callback function. +```typescript +styles = { + background: 'royalblue', + color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit' +} +``` +```html +<igx-column [cellStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +*** + +### ~~children~~ + +> **children**: `QueryList`\<`IgxColumnComponent`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1820](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1820) + +Sets/gets the children columns. +```typescript +let columnChildren = this.column.children; +``` + +#### Deprecated + +in version 18.1.0. Use the `childColumns` property instead. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`children`](../interfaces/ColumnType.md#children) + +*** + +### colEnd + +> **colEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L836) + +Column index where the current field should end. +The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field +```html +<igx-column-layout> + <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`colEnd`](../interfaces/ColumnType.md#colend) + +*** + +### colStart + +> **colStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L862) + +Column index from which the field is starting. +```html +<igx-column-layout> + <igx-column [colStart]="1" [rowStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`colStart`](../interfaces/ColumnType.md#colstart) + +*** + +### dataType + +> **dataType**: `GridColumnDataType` = `GridColumnDataType.String` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L804) + +Sets/gets the data type of the column values. +Default value is `string`. +```typescript +let columnDataType = this.column.dataType; +``` +```html +<igx-column [dataType] = "'number'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`dataType`](../interfaces/ColumnType.md#datatype) + +*** + +### disableHiding + +> **disableHiding**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L456) + +Gets whether the hiding is disabled. +```typescript +let isHidingDisabled = this.column.disableHiding; +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`disableHiding`](../interfaces/ColumnType.md#disablehiding) + +*** + +### disablePinning + +> **disablePinning**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:468](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L468) + +Gets whether the pinning is disabled. +```typescript +let isPinningDisabled = this.column.disablePinning; +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`disablePinning`](../interfaces/ColumnType.md#disablepinning) + +*** + +### expandedChange + +> **expandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L431) + +Emitted when the column expanded or collapsed. + +```html +<igx-column (expandedChange)="expandedChange($event)"> +</igx-column> +``` + +*** + +### filterable + +> **filterable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L267) + +Sets/gets whether the column is filterable. +Default value is `true`. +```typescript +let isFilterable = this.column.filterable; +``` +```html +<igx-column [filterable] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`filterable`](../interfaces/ColumnType.md#filterable) + +*** + +### filteringIgnoreCase + +> **filteringIgnoreCase**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:759](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L759) + +Sets/gets whether the column filtering should be case sensitive. +Default value is `true`. +```typescript +let filteringIgnoreCase = this.column.filteringIgnoreCase; +``` +```html +<igx-column [filteringIgnoreCase] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`filteringIgnoreCase`](../interfaces/ColumnType.md#filteringignorecase) + +*** + +### formatter + +> **formatter**: (`value`, `rowData?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L710) + +Applies display format to cell values in the column. Does not modify the underlying data. + +#### Parameters + +##### value + +`any` + +##### rowData? + +`any` + +#### Returns + +`any` + +#### Remarks + +Note: As the formatter is used in places like the Excel style filtering dialog, in certain +scenarios (remote filtering for example), the row data argument can be `undefined`. + +In this example, we check to see if the column name is Salary, and then provide a method as the column formatter +to format the value into a currency string. + +#### Examples + +```typescript +columnInit(column: IgxColumnComponent) { + if (column.field == "Salary") { + column.formatter = (salary => this.format(salary)); + } +} + +format(value: number) : string { + return formatCurrency(value, "en-us", "$"); +} +``` + +```typescript +const column = this.grid.getColumnByName('Address'); +const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address; +column.formatter = addressFormatter; +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`formatter`](../interfaces/ColumnType.md#formatter) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L59) + +Represents the instance of the parent `GridType` that contains this column. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`grid`](../interfaces/ColumnType.md#grid) + +*** + +### header + +> **header**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L131) + +Sets/gets the `header` value. +```typescript +let columnHeader = this.column.header; +``` +```html +<igx-column [header] = "'ID'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`header`](../interfaces/ColumnType.md#header) + +*** + +### headerClasses + +> **headerClasses**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L566) + +Sets/gets the class selector of the column header. +```typescript +let columnHeaderClass = this.column.headerClasses; +``` +```html +<igx-column [headerClasses] = "'column-header'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`headerClasses`](../interfaces/ColumnType.md#headerclasses) + +*** + +### headerGroupClasses + +> **headerGroupClasses**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L603) + +Sets/gets the class selector of the column group header. +```typescript +let columnHeaderClass = this.column.headerGroupClasses; +``` +```html +<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`headerGroupClasses`](../interfaces/ColumnType.md#headergroupclasses) + +*** + +### headerGroupStyles + +> **headerGroupStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L624) + +Sets conditional style properties on the column header group wrapper. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +```typescript +styles = { + background: 'royalblue', + color: (column) => column.pinned ? 'red': 'inherit' +} +``` +```html +<igx-column [headerGroupStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`headerGroupStyles`](../interfaces/ColumnType.md#headergroupstyles) + +*** + +### headerStyles + +> **headerStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L587) + +Sets conditional style properties on the column header. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +```typescript +styles = { + background: 'royalblue', + color: (column) => column.pinned ? 'red': 'inherit' +} +``` +```html +<igx-column [headerStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`headerStyles`](../interfaces/ColumnType.md#headerstyles) + +*** + +### hiddenChange + +> **hiddenChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L419) + +Emitted when the column is hidden or shown. + +```html +<igx-column (hiddenChange)="hiddenChange($event)"> +</igx-column> +``` + +*** + +### parent + +> **parent**: [`ColumnType`](../interfaces/ColumnType.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1809) + +Sets/gets the parent column. +```typescript +let parentColumn = this.column.parent; +``` +```typescript +this.column.parent = higherLevelColumn; +``` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`parent`](../interfaces/ColumnType.md#parent) + +*** + +### pinnedChange + +> **pinnedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L902) + +Emitted when the column is pinned/unpinned. + +```html +<igx-column (pinnedChange)="pinnedChange($event)"> +</igx-column> +``` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L64) + +*** + +### resizable + +> **resizable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L282) + +Sets/gets whether the column is resizable. +Default value is `false`. +```typescript +let isResizable = this.column.resizable; +``` +```html +<igx-column [resizable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`resizable`](../interfaces/ColumnType.md#resizable) + +*** + +### rowEnd + +> **rowEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L822) + +Row index where the current field should end. +The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field +```html +<igx-column-layout> + <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`rowEnd`](../interfaces/ColumnType.md#rowend) + +*** + +### rowStart + +> **rowStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L849) + +Row index from which the field is starting. +```html +<igx-column-layout> + <igx-column [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`rowStart`](../interfaces/ColumnType.md#rowstart) + +*** + +### searchable + +> **searchable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:790](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L790) + +Sets/gets whether the column is `searchable`. +Default value is `true`. +```typescript +let isSearchable = this.column.searchable'; +``` +```html + <igx-column [searchable] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`searchable`](../interfaces/ColumnType.md#searchable) + +*** + +### sortable + +> **sortable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L161) + +Sets/gets whether the column is sortable. +Default value is `false`. +```typescript +let isSortable = this.column.sortable; +``` +```html +<igx-column [sortable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`sortable`](../interfaces/ColumnType.md#sortable) + +*** + +### sortingIgnoreCase + +> **sortingIgnoreCase**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L774) + +Sets/gets whether the column sorting should be case sensitive. +Default value is `true`. +```typescript +let sortingIgnoreCase = this.column.sortingIgnoreCase; +``` +```html +<igx-column [sortingIgnoreCase] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`sortingIgnoreCase`](../interfaces/ColumnType.md#sortingignorecase) + +*** + +### summaryFormatter + +> **summaryFormatter**: (`summary`, `summaryOperand`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L743) + +The summaryFormatter is used to format the display of the column summaries. + +In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter +to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers. + +```typescript +columnInit(column: IgxColumnComponent) { + if (column.field == "OrderDate") { + column.summaryFormatter = this.summaryFormat; + } +} + +summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryResult.key !== 'count' && result !== null && result !== undefined) { + const pipe = new DatePipe('fr-FR'); + return pipe.transform(result,'mediumDate'); + } + return result; +} +``` + +#### Parameters + +##### summary + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md) + +##### summaryOperand + +[`IgxSummaryOperand`](IgxSummaryOperand.md) + +#### Returns + +`any` + +#### Memberof + +IgxColumnComponent + +*** + +### title + +> **title**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L146) + +Sets/gets the `title` value. +```typescript +let title = this.column.title; +``` +```html +<igx-column [title] = "'Some column tooltip'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`title`](../interfaces/ColumnType.md#title) + +*** + +### widthChange + +> **widthChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L890) + +Emitted when the column width changes. + +```html +<igx-column (widthChange)="widthChange($event)"> +</igx-column> +``` + +## Accessors + +### bodyTemplate + +#### Get Signature + +> **get** **bodyTemplate**(): `TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1341](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1341) + +Returns a reference to the `bodyTemplate`. +```typescript +let bodyTemplate = this.column.bodyTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +#### Set Signature + +> **set** **bodyTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1361](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1361) + +Sets the body template. +```html +<ng-template #bodyTemplate igxCell let-val> + <div style = "background-color: yellowgreen" (click) = "changeColor(val)"> + <span> {{val}} </span> + </div> +</ng-template> +``` +```typescript +@ViewChild("'bodyTemplate'", {read: TemplateRef }) +public bodyTemplate: TemplateRef<any>; +this.column.bodyTemplate = this.bodyTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### childColumns + +#### Get Signature + +> **get** **childColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1607](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1607) + +A list containing all the child columns under this column (if any). +Empty without children or if this column is not Group or Layout. + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`childColumns`](../interfaces/ColumnType.md#childcolumns) + +*** + +### collapsible + +#### Set Signature + +> **set** **collapsible**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1746) + +Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation + +##### Parameters + +###### \_value + +`boolean` + +##### Returns + +`void` + +Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`collapsible`](../interfaces/ColumnType.md#collapsible) + +*** + +### columnGroup + +#### Get Signature + +> **get** **columnGroup**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1574) + +Returns a boolean indicating if the column is a `ColumnGroup`. +```typescript +let columnGroup = this.column.columnGroup; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +Specifies whether the column belongs to a group of columns. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`columnGroup`](../interfaces/ColumnType.md#columngroup) + +*** + +### columnLayout + +#### Get Signature + +> **get** **columnLayout**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1587) + +Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout. +```typescript +let columnGroup = this.column.columnGroup; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`columnLayout`](../interfaces/ColumnType.md#columnlayout) + +*** + +### columnLayoutChild + +#### Get Signature + +> **get** **columnLayoutChild**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1599) + +Returns a boolean indicating if the column is a child of a `ColumnLayout` for multi-row layout. +```typescript +let columnLayoutChild = this.column.columnLayoutChild; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`columnLayoutChild`](../interfaces/ColumnType.md#columnlayoutchild) + +*** + +### disabledSummaries + +#### Get Signature + +> **get** **disabledSummaries**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1165) + +Sets/gets the summary operands to exclude from display. +Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc. +```typescript +let disabledSummaries = this.column.disabledSummaries; +``` +```html +<igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`string`[] + +#### Set Signature + +> **set** **disabledSummaries**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1169) + +##### Parameters + +###### value + +`string`[] + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`disabledSummaries`](../interfaces/ColumnType.md#disabledsummaries) + +*** + +### editable + +#### Get Signature + +> **get** **editable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L222) + +Gets whether the column is editable. +Default value is `false`. +```typescript +let isEditable = this.column.editable; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **editable**(`editable`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L249) + +Sets whether the column is editable. +```typescript +this.column.editable = true; +``` +```html +<igx-column [editable] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### editable + +`boolean` + +##### Returns + +`void` + +Indicated whether the column can be edited. If the value is true, the column can be edited + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`editable`](../interfaces/ColumnType.md#editable) + +*** + +### editorOptions + +#### Get Signature + +> **get** **editorOptions**(): [`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1735) + +Sets properties on the default column editors + +##### Returns + +[`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +#### Set Signature + +> **set** **editorOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1732) + +Pass optional properties for the default column editors. + +##### Remarks + +Options may be applicable only to specific column type editors. + +##### Example + +```typescript +const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', +} +``` +```html +<igx-column dataType="date" [editorOptions]="editorOptions"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +[`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +##### Returns + +`void` + +Sets properties on the default column editors + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`editorOptions`](../interfaces/ColumnType.md#editoroptions) + +*** + +### errorTemplate + +#### Get Signature + +> **get** **errorTemplate**(): `TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1441](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1441) + +Returns a reference to the validation error template. +```typescript +let errorTemplate = this.column.errorTemplate; +``` + +##### Returns + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +#### Set Signature + +> **set** **errorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1459](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1459) + +Sets the error template. +```html +<ng-template igxCellValidationError let-cell="cell" #errorTemplate > + <div *ngIf="cell.validation.errors?.['forbiddenName']"> + This name is forbidden. + </div> +</ng-template> +``` +```typescript +@ViewChild("'errorTemplate'", {read: TemplateRef }) +public errorTemplate: TemplateRef<any>; +this.column.errorTemplate = this.errorTemplate; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### expanded + +#### Set Signature + +> **set** **expanded**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1755](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1755) + +Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded + +##### Parameters + +###### \_value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`expanded`](../interfaces/ColumnType.md#expanded) + +*** + +### field + +#### Get Signature + +> **get** **field**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L82) + +The internal field name, used in expressions and queries. + +##### Returns + +`string` + +#### Set Signature + +> **set** **field**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L78) + +Sets/gets the `field` value. +```typescript +let columnField = this.column.field; +``` +```html +<igx-column [field] = "'ID'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +The internal field name, used in expressions and queries. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`field`](../interfaces/ColumnType.md#field) + +*** + +### filterCellTemplate + +#### Get Signature + +> **get** **filterCellTemplate**(): `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1474](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1474) + +Returns a reference to the `filterCellTemplate`. +```typescript +let filterCellTemplate = this.column.filterCellTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +#### Set Signature + +> **set** **filterCellTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1492](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1492) + +Sets the quick filter template. +```html +<ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column"> + <input (input)="onInput()"> +</ng-template> +``` +```typescript +@ViewChild("'filterCellTemplate'", {read: TemplateRef }) +public filterCellTemplate: TemplateRef<any>; +this.column.filterCellTemplate = this.filterCellTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +##### Returns + +`void` + +Represents a custom template for filtering +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`filterCellTemplate`](../interfaces/ColumnType.md#filtercelltemplate) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1793) + +Returns the filteringExpressionsTree of the column. +```typescript +let tree = this.column.filteringExpressionsTree; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +The filtering expressions for the column. +The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`filteringExpressionsTree`](../interfaces/ColumnType.md#filteringexpressionstree) + +*** + +### filters + +#### Get Signature + +> **get** **filters**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1190) + +Gets the column `filters`. +```typescript +let columnFilters = this.column.filters' +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Set Signature + +> **set** **filters**(`instance`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1201) + +Sets the column `filters`. +```typescript +this.column.filters = IgxBooleanFilteringOperand.instance(). +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### instance + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +##### Returns + +`void` + +Optional filtering operands that apply to this field. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`filters`](../interfaces/ColumnType.md#filters) + +*** + +### groupable + +#### Get Signature + +> **get** **groupable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L204) + +Sets/gets whether the column is groupable. +Default value is `false`. +```typescript +let isGroupable = this.column.groupable; +``` +```html +<igx-column [groupable] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **groupable**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L207) + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`groupable`](../interfaces/ColumnType.md#groupable) + +*** + +### groupingComparer + +#### Get Signature + +> **get** **groupingComparer**(): (`a`, `b`, `currRec?`, `groupRec?`) => `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1263) + +Gets the function that compares values for grouping. +```typescript +let groupingComparer = this.column.groupingComparer' +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +(`a`, `b`, `currRec?`, `groupRec?`) => `number` + +#### Set Signature + +> **set** **groupingComparer**(`funcRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1277) + +Sets a custom function to compare values for grouping. +Subsequent values in the sorted data that the function returns 0 for are grouped. +```typescript +this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; } +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### funcRef + +(`a`, `b`, `currRec?`, `groupRec?`) => `number` + +##### Returns + +`void` + +Represents a method with custom grouping comparator to determine the members of the group. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`groupingComparer`](../interfaces/ColumnType.md#groupingcomparer) + +*** + +### hasSummary + +#### Get Signature + +> **get** **hasSummary**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L312) + +Gets a value indicating whether the summary for the column is enabled. +```typescript +let hasSummary = this.column.hasSummary; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hasSummary**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L324) + +Sets a value indicating whether the summary for the column is enabled. +Default value is `false`. +```html +<igx-column [hasSummary] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`hasSummary`](../interfaces/ColumnType.md#hassummary) + +*** + +### headerTemplate + +#### Get Signature + +> **get** **headerTemplate**(): `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1375) + +Returns a reference to the header template. +```typescript +let headerTemplate = this.column.headerTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +#### Set Signature + +> **set** **headerTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1396) + +Sets the header template. +Note that the column header height is fixed and any content bigger than it will be cut off. +```html +<ng-template #headerTemplate> + <div style = "background-color:black" (click) = "changeColor(val)"> + <span style="color:red" >{{column.field}}</span> + </div> +</ng-template> +``` +```typescript +@ViewChild("'headerTemplate'", {read: TemplateRef }) +public headerTemplate: TemplateRef<any>; +this.column.headerTemplate = this.headerTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for the custom header of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`headerTemplate`](../interfaces/ColumnType.md#headertemplate) + +*** + +### hidden + +#### Get Signature + +> **get** **hidden**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L342) + +Gets whether the column is hidden. +```typescript +let isHidden = this.column.hidden; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hidden**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L359) + +Sets the column hidden property. +Default value is `false`. +```html +<igx-column [hidden] = "true"></igx-column> +``` + +Two-way data binding. +```html +<igx-column [(hidden)] = "model.isHidden"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`hidden`](../interfaces/ColumnType.md#hidden) + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1041](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1041) + +Gets the column index. +```typescript +let columnIndex = this.column.index; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +The index of the column within the grid. +Includes the hidden columns when counting + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`index`](../interfaces/ColumnType.md#index) + +*** + +### inlineEditorTemplate + +#### Get Signature + +> **get** **inlineEditorTemplate**(): `TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1410](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1410) + +Returns a reference to the inline editor template. +```typescript +let inlineEditorTemplate = this.column.inlineEditorTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +#### Set Signature + +> **set** **inlineEditorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1428](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1428) + +Sets the inline editor template. +```html +<ng-template #inlineEditorTemplate igxCellEditor let-cell="cell"> + <input type="string" [(ngModel)]="cell.value"/> +</ng-template> +``` +```typescript +@ViewChild("'inlineEditorTemplate'", {read: TemplateRef }) +public inlineEditorTemplate: TemplateRef<any>; +this.column.inlineEditorTemplate = this.inlineEditorTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for the custom inline editor of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`inlineEditorTemplate`](../interfaces/ColumnType.md#inlineeditortemplate) + +*** + +### level + +#### Get Signature + +> **get** **level**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1624) + +Returns the level of the column in a column group. +Returns `0` if the column doesn't have a `parent`. +```typescript +let columnLevel = this.column.level; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +Represents the hierarchical level of the column in the column layout + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`level`](../interfaces/ColumnType.md#level) + +*** + +### maxWidth + +#### Get Signature + +> **get** **maxWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L549) + +##### Returns + +`string` + +#### Set Signature + +> **set** **maxWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L544) + +Sets/gets the maximum `width` of the column. +```typescript +let columnMaxWidth = this.column.width; +``` +```html +<igx-column [maxWidth] = "'150px'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`maxWidth`](../interfaces/ColumnType.md#maxwidth) + +*** + +### merge + +#### Get Signature + +> **get** **merge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L94) + +Sets/gets whether to merge cells in this column. +```html +<igx-column [merge]="true"></igx-column> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **merge**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L98) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`merge`](../interfaces/ColumnType.md#merge) + +*** + +### mergingComparer + +#### Get Signature + +> **get** **mergingComparer**(): (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1237) + +Gets the function that compares values for merging. +```typescript +let mergingComparer = this.column.mergingComparer' +``` + +##### Returns + +(`prevRecord`, `record`, `field`) => `boolean` + +#### Set Signature + +> **set** **mergingComparer**(`funcRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1248) + +Sets a custom function to compare values for merging. +```typescript +this.column.mergingComparer = (prevRecord: any, record: any, field: string) => { return prevRecord[field] === record[field]; } +``` + +##### Parameters + +###### funcRef + +(`prevRecord`, `record`, `field`) => `boolean` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`mergingComparer`](../interfaces/ColumnType.md#mergingcomparer) + +*** + +### minWidth + +#### Get Signature + +> **get** **minWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1020](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1020) + +##### Returns + +`string` + +#### Set Signature + +> **set** **minWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1012](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1012) + +Sets/gets the minimum `width` of the column. +Default value is `88`; +```typescript +let columnMinWidth = this.column.minWidth; +``` +```html +<igx-column [minWidth] = "'100px'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`minWidth`](../interfaces/ColumnType.md#minwidth) + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1078](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1078) + +Gets whether the column is `pinned`. +```typescript +let isPinned = this.column.pinned; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1095](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1095) + +Sets whether the column is pinned. +Default value is `false`. +```html +<igx-column [pinned] = "true"></igx-column> +``` + +Two-way data binding. +```html +<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently pinned. If the value is true, the column is pinned + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`pinned`](../interfaces/ColumnType.md#pinned) + +*** + +### pinningPosition + +#### Get Signature + +> **get** **pinningPosition**(): [`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1053](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1053) + +Gets the pinning position of the column. +```typescript +let pinningPosition = this.column.pinningPosition; + +##### Returns + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Set Signature + +> **set** **pinningPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1064](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1064) + +Sets the pinning position of the column. +```html +<igx-column [pinningPosition]="1"></igx-column> +``` + +##### Parameters + +###### value + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +##### Returns + +`void` + +*** + +### pipeArgs + +#### Get Signature + +> **get** **pipeArgs**(): [`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1710) + +Optional arguments for any pipe applied to the field. + +##### Returns + +[`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +#### Set Signature + +> **set** **pipeArgs**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1704) + +##### Remarks + +Pass optional parameters for DatePipe and/or DecimalPipe to format the display value for date and numeric columns. +Accepts an `IColumnPipeArgs` object with any of the `format`, `timezone` and `digitsInfo` properties. +For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe + +##### Example + +```typescript +const pipeArgs: IColumnPipeArgs = { + format: 'longDate', + timezone: 'UTC', + digitsInfo: '1.1-2' +} +``` +```html +<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column> +<igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +[`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +##### Returns + +`void` + +Optional arguments for any pipe applied to the field. + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`pipeArgs`](../interfaces/ColumnType.md#pipeargs) + +*** + +### selectable + +#### Get Signature + +> **get** **selectable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L172) + +Returns if the column is selectable. +```typescript +let columnSelectable = this.column.selectable; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectable**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L185) + +Sets if the column is selectable. +Default value is `true`. +```html +<igx-column [selectable] = "false"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column can be selected. If the value is true, the column can be selected + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`selectable`](../interfaces/ColumnType.md#selectable) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L385) + +Returns if the column is selected. +```typescript +let isSelected = this.column.selected; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:398](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L398) + +Select/deselect a column. +Default value is `false`. +```typescript +this.column.selected = true; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently selected. If the value is true, the column is selected + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`selected`](../interfaces/ColumnType.md#selected) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1213) + +Gets the column `sortStrategy`. +```typescript +let sortStrategy = this.column.sortStrategy +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1225) + +Sets the column `sortStrategy`. +```typescript +this.column.sortStrategy = new CustomSortingStrategy(). +class CustomSortingStrategy extends SortingStrategy {...} +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### classRef + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +##### Returns + +`void` + +The sorting strategy used for sorting this column. +The interface contains a method sort that sorts the provided data based on the given sorting expressions + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`sortStrategy`](../interfaces/ColumnType.md#sortstrategy) + +*** + +### summaries + +#### Get Signature + +> **get** **summaries**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1126) + +Gets the column `summaries`. +```typescript +let columnSummaries = this.column.summaries; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **summaries**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1139) + +Sets the column `summaries`. +```typescript +this.column.summaries = IgxNumberSummaryOperand; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`summaries`](../interfaces/ColumnType.md#summaries) + +*** + +### summaryTemplate + +#### Get Signature + +> **get** **summaryTemplate**(): `TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1307](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1307) + +Returns a reference to the `summaryTemplate`. +```typescript +let summaryTemplate = this.column.summaryTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +#### Set Signature + +> **set** **summaryTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1326) + +Sets the summary template. +```html +<ng-template #summaryTemplate igxSummary let-summaryResults> + <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p> + <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p> +</ng-template> +``` +```typescript +@ViewChild("'summaryTemplate'", {read: TemplateRef }) +public summaryTemplate: TemplateRef<any>; +this.column.summaryTemplate = this.summaryTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for a summary of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`summaryTemplate`](../interfaces/ColumnType.md#summarytemplate) + +*** + +### topLevelParent + +#### Get Signature + +> **get** **topLevelParent**(): [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2503](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2503) + +Returns a reference to the top level parent column. +```typescript +let topLevelParent = this.column.topLevelParent; +``` + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md) + +Optional +The root parent of this column (if any). +If there is no root parent, that means the current column is the root parent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`topLevelParent`](../interfaces/ColumnType.md#toplevelparent) + +*** + +### visibleIndex + +#### Get Signature + +> **get** **visibleIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1531) + +Gets the column visible index. +If the column is not visible, returns `-1`. +```typescript +let visibleColumnIndex = this.column.visibleIndex; +``` + +##### Returns + +`number` + +The index of the column within the grid. +Does not include the hidden columns when counting + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`visibleIndex`](../interfaces/ColumnType.md#visibleindex) + +*** + +### visibleWhenCollapsed + +#### Get Signature + +> **get** **visibleWhenCollapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1677](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1677) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **visibleWhenCollapsed**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1668) + +Indicates whether the column will be visible when its parent is collapsed. +```html +<igx-column-group> + <igx-column [visibleWhenCollapsed]="true"></igx-column> +</igx-column-group> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L481) + +Gets the `width` of the column. +```typescript +let columnWidth = this.column.width; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L507) + +Sets the `width` of the column. +```html +<igx-column [width] = "'25%'"></igx-column> +``` + +Two-way data binding. +```html +<igx-column [(width)]="model.columns[0].width"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`width`](../interfaces/ColumnType.md#width) + +## Methods + +### autosize() + +> **autosize**(`byHeaderOnly?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2543) + +Autosize the column to the longest currently visible cell value, including the header cell. +```typescript +@ViewChild('grid') grid: IgxGridComponent; +let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; +column.autosize(); +``` + +#### Parameters + +##### byHeaderOnly? + +`boolean` = `false` + +Set if column should be autosized based only on the header content. + +#### Returns + +`void` + +#### Memberof + +IgxColumnComponent + +*** + +### getColumnSizesString() + +> `protected` **getColumnSizesString**(`children`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2669](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2669) + +#### Parameters + +##### children + +`QueryList`\<`IgxColumnComponent`\> + +#### Returns + +`string` + +*** + +### move() + +> **move**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2434) + +Moves a column to the specified visible index. +If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. +If passed index would move the column to a different column group. moving is not performed. + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Example + +```typescript +column.move(index); +``` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`move`](../interfaces/ColumnType.md#move) + +*** + +### pin() + +> **pin**(`index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2239) + +Pins the column in the specified position at the provided index in that pinned area. +Defaults to index `0` if not provided, or to the initial index in the pinned area. +Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned. +Column cannot be pinned if: +- Is already pinned +- index argument is out of range +```typescript +let success = this.column.pin(); +``` + +#### Parameters + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`pin`](../interfaces/ColumnType.md#pin) + +*** + +### unpin() + +> **unpin**(`index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2349) + +Unpins the column and place it at the provided index in the unpinned area. +Defaults to index `0` if not provided, or to the initial index in the unpinned area. +Returns `true` if the column is successfully unpinned. Returns `false` if the column cannot be unpinned. +Column cannot be unpinned if: +- Is already unpinned +- index argument is out of range +```typescript +let success = this.column.unpin(); +``` + +#### Parameters + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Memberof + +IgxColumnComponent + +#### Implementation of + +[`ColumnType`](../interfaces/ColumnType.md).[`unpin`](../interfaces/ColumnType.md#unpin) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnEmailValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnEmailValidatorDirective.md new file mode 100644 index 000000000..716176b85 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnEmailValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnEmailValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L50) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnEmailValidatorDirective**(): `IgxColumnEmailValidatorDirective` + +#### Returns + +`IgxColumnEmailValidatorDirective` + +#### Inherited from + +`EmailValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnFormatterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnFormatterPipe.md new file mode 100644 index 000000000..6ce5e9917 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnFormatterPipe.md @@ -0,0 +1,47 @@ +# Class: IgxColumnFormatterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L378) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnFormatterPipe**(): `IgxColumnFormatterPipe` + +#### Returns + +`IgxColumnFormatterPipe` + +## Methods + +### transform() + +> **transform**(`value`, `formatter`, `rowData`, `columnData?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L380) + +#### Parameters + +##### value + +`any` + +##### formatter + +(`v`, `data`, `columnData?`) => `any` + +##### rowData + +`any` + +##### columnData? + +`any` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnGroupComponent.md new file mode 100644 index 000000000..2ab2566c8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnGroupComponent.md @@ -0,0 +1,2785 @@ +# Class: IgxColumnGroupComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L39) + +**Ignite UI for Angular Column Group** + +## Igx Parent + +IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent + +## Extends + +- [`IgxColumnComponent`](IgxColumnComponent.md) + +## Extended by + +- [`IgxColumnLayoutComponent`](IgxColumnLayoutComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnGroupComponent**(): `IgxColumnGroupComponent` + +#### Returns + +`IgxColumnGroupComponent` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`constructor`](IgxColumnComponent.md#constructor) + +## Properties + +### \_mergingComparer + +> `protected` **\_mergingComparer**: (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1887) + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`_mergingComparer`](IgxColumnComponent.md#_mergingcomparer) + +*** + +### \_pinningPosition + +> `protected` **\_pinningPosition**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1837) + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`_pinningPosition`](IgxColumnComponent.md#_pinningposition) + +*** + +### \_vIndex + +> `protected` **\_vIndex**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1836) + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`_vIndex`](IgxColumnComponent.md#_vindex) + +*** + +### additionalTemplateContext + +> **additionalTemplateContext**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L878) + +Sets/gets custom properties provided in additional template context. + +```html +<igx-column [additionalTemplateContext]="contextObject"> + <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext"> + {{ props }} + </ng-template> +</igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`additionalTemplateContext`](IgxColumnComponent.md#additionaltemplatecontext) + +*** + +### autosizeHeader + +> **autosizeHeader**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L299) + +Sets/gets whether the column header is included in autosize logic. +Useful when template for a column header is sized based on parent, for example a default `div`. +Default value is `false`. +```typescript +let isResizable = this.column.resizable; +``` +```html +<igx-column [resizable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`autosizeHeader`](IgxColumnComponent.md#autosizeheader) + +*** + +### cellClasses + +> **cellClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:647](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L647) + +Sets a conditional class selector of the column cells. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class, while the +value is either a callback function that returns a boolean, +or boolean, like so: +```typescript +callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; } +cellClasses = { 'className' : this.callback }; +``` +```html +<igx-column [cellClasses] = "cellClasses"></igx-column> +<igx-column [cellClasses] = "{'class1' : true }"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`cellClasses`](IgxColumnComponent.md#cellclasses) + +*** + +### cellStyles + +> **cellStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L670) + +Sets conditional style properties on the column cells. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +As with `cellClasses` it accepts a callback function. +```typescript +styles = { + background: 'royalblue', + color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit' +} +``` +```html +<igx-column [cellStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`cellStyles`](IgxColumnComponent.md#cellstyles) + +*** + +### ~~children~~ + +> **children**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L51) + +#### Deprecated + +in version 18.1.0. Use the `childColumns` property instead. + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`children`](IgxColumnComponent.md#children) + +*** + +### colEnd + +> **colEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L836) + +Column index where the current field should end. +The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field +```html +<igx-column-layout> + <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`colEnd`](IgxColumnComponent.md#colend) + +*** + +### collapsibleIndicatorTemplate + +> **collapsibleIndicatorTemplate**: `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L201) + +Allows you to define a custom template for expand/collapse indicator + +#### Memberof + +IgxColumnGroupComponent + +#### Overrides + +`IgxColumnComponent.collapsibleIndicatorTemplate` + +*** + +### colStart + +> **colStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L862) + +Column index from which the field is starting. +```html +<igx-column-layout> + <igx-column [colStart]="1" [rowStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`colStart`](IgxColumnComponent.md#colstart) + +*** + +### dataType + +> **dataType**: `GridColumnDataType` = `GridColumnDataType.String` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L804) + +Sets/gets the data type of the column values. +Default value is `string`. +```typescript +let columnDataType = this.column.dataType; +``` +```html +<igx-column [dataType] = "'number'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`dataType`](IgxColumnComponent.md#datatype) + +*** + +### disableHiding + +> **disableHiding**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L456) + +Gets whether the hiding is disabled. +```typescript +let isHidingDisabled = this.column.disableHiding; +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`disableHiding`](IgxColumnComponent.md#disablehiding) + +*** + +### disablePinning + +> **disablePinning**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:468](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L468) + +Gets whether the pinning is disabled. +```typescript +let isPinningDisabled = this.column.disablePinning; +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`disablePinning`](IgxColumnComponent.md#disablepinning) + +*** + +### expandedChange + +> **expandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L431) + +Emitted when the column expanded or collapsed. + +```html +<igx-column (expandedChange)="expandedChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`expandedChange`](IgxColumnComponent.md#expandedchange) + +*** + +### filterable + +> **filterable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L267) + +Sets/gets whether the column is filterable. +Default value is `true`. +```typescript +let isFilterable = this.column.filterable; +``` +```html +<igx-column [filterable] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`filterable`](IgxColumnComponent.md#filterable) + +*** + +### filteringIgnoreCase + +> **filteringIgnoreCase**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:759](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L759) + +Sets/gets whether the column filtering should be case sensitive. +Default value is `true`. +```typescript +let filteringIgnoreCase = this.column.filteringIgnoreCase; +``` +```html +<igx-column [filteringIgnoreCase] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`filteringIgnoreCase`](IgxColumnComponent.md#filteringignorecase) + +*** + +### formatter + +> **formatter**: (`value`, `rowData?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L710) + +Applies display format to cell values in the column. Does not modify the underlying data. + +#### Parameters + +##### value + +`any` + +##### rowData? + +`any` + +#### Returns + +`any` + +#### Remarks + +Note: As the formatter is used in places like the Excel style filtering dialog, in certain +scenarios (remote filtering for example), the row data argument can be `undefined`. + +In this example, we check to see if the column name is Salary, and then provide a method as the column formatter +to format the value into a currency string. + +#### Examples + +```typescript +columnInit(column: IgxColumnComponent) { + if (column.field == "Salary") { + column.formatter = (salary => this.format(salary)); + } +} + +format(value: number) : string { + return formatCurrency(value, "en-us", "$"); +} +``` + +```typescript +const column = this.grid.getColumnByName('Address'); +const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address; +column.formatter = addressFormatter; +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`formatter`](IgxColumnComponent.md#formatter) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L59) + +Represents the instance of the parent `GridType` that contains this column. + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`grid`](IgxColumnComponent.md#grid) + +*** + +### header + +> **header**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L131) + +Sets/gets the `header` value. +```typescript +let columnHeader = this.column.header; +``` +```html +<igx-column [header] = "'ID'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`header`](IgxColumnComponent.md#header) + +*** + +### headerClasses + +> **headerClasses**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L566) + +Sets/gets the class selector of the column header. +```typescript +let columnHeaderClass = this.column.headerClasses; +``` +```html +<igx-column [headerClasses] = "'column-header'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`headerClasses`](IgxColumnComponent.md#headerclasses) + +*** + +### headerGroupClasses + +> **headerGroupClasses**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L603) + +Sets/gets the class selector of the column group header. +```typescript +let columnHeaderClass = this.column.headerGroupClasses; +``` +```html +<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`headerGroupClasses`](IgxColumnComponent.md#headergroupclasses) + +*** + +### headerGroupStyles + +> **headerGroupStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L624) + +Sets conditional style properties on the column header group wrapper. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +```typescript +styles = { + background: 'royalblue', + color: (column) => column.pinned ? 'red': 'inherit' +} +``` +```html +<igx-column [headerGroupStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`headerGroupStyles`](IgxColumnComponent.md#headergroupstyles) + +*** + +### headerStyles + +> **headerStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L587) + +Sets conditional style properties on the column header. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +```typescript +styles = { + background: 'royalblue', + color: (column) => column.pinned ? 'red': 'inherit' +} +``` +```html +<igx-column [headerStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`headerStyles`](IgxColumnComponent.md#headerstyles) + +*** + +### hiddenChange + +> **hiddenChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L419) + +Emitted when the column is hidden or shown. + +```html +<igx-column (hiddenChange)="hiddenChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`hiddenChange`](IgxColumnComponent.md#hiddenchange) + +*** + +### parent + +> **parent**: [`ColumnType`](../interfaces/ColumnType.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1809) + +Sets/gets the parent column. +```typescript +let parentColumn = this.column.parent; +``` +```typescript +this.column.parent = higherLevelColumn; +``` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`parent`](IgxColumnComponent.md#parent) + +*** + +### pinnedChange + +> **pinnedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L902) + +Emitted when the column is pinned/unpinned. + +```html +<igx-column (pinnedChange)="pinnedChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`pinnedChange`](IgxColumnComponent.md#pinnedchange) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L64) + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`platform`](IgxColumnComponent.md#platform) + +*** + +### resizable + +> **resizable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L282) + +Sets/gets whether the column is resizable. +Default value is `false`. +```typescript +let isResizable = this.column.resizable; +``` +```html +<igx-column [resizable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`resizable`](IgxColumnComponent.md#resizable) + +*** + +### rowEnd + +> **rowEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L822) + +Row index where the current field should end. +The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field +```html +<igx-column-layout> + <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`rowEnd`](IgxColumnComponent.md#rowend) + +*** + +### rowStart + +> **rowStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L849) + +Row index from which the field is starting. +```html +<igx-column-layout> + <igx-column [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`rowStart`](IgxColumnComponent.md#rowstart) + +*** + +### searchable + +> **searchable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L142) + +Sets/gets whether the column group is `searchable`. +Default value is `true`. +```typescript +let isSearchable = this.columnGroup.searchable; +``` +```html + <igx-column-group [searchable] = "false"></igx-column-group> +``` + +#### Memberof + +IgxColumnGroupComponent + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`searchable`](IgxColumnComponent.md#searchable) + +*** + +### sortable + +> **sortable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L161) + +Sets/gets whether the column is sortable. +Default value is `false`. +```typescript +let isSortable = this.column.sortable; +``` +```html +<igx-column [sortable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`sortable`](IgxColumnComponent.md#sortable) + +*** + +### sortingIgnoreCase + +> **sortingIgnoreCase**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L774) + +Sets/gets whether the column sorting should be case sensitive. +Default value is `true`. +```typescript +let sortingIgnoreCase = this.column.sortingIgnoreCase; +``` +```html +<igx-column [sortingIgnoreCase] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`sortingIgnoreCase`](IgxColumnComponent.md#sortingignorecase) + +*** + +### summaryFormatter + +> **summaryFormatter**: (`summary`, `summaryOperand`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L743) + +The summaryFormatter is used to format the display of the column summaries. + +In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter +to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers. + +```typescript +columnInit(column: IgxColumnComponent) { + if (column.field == "OrderDate") { + column.summaryFormatter = this.summaryFormat; + } +} + +summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryResult.key !== 'count' && result !== null && result !== undefined) { + const pipe = new DatePipe('fr-FR'); + return pipe.transform(result,'mediumDate'); + } + return result; +} +``` + +#### Parameters + +##### summary + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md) + +##### summaryOperand + +[`IgxSummaryOperand`](IgxSummaryOperand.md) + +#### Returns + +`any` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`summaryFormatter`](IgxColumnComponent.md#summaryformatter) + +*** + +### title + +> **title**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L146) + +Sets/gets the `title` value. +```typescript +let title = this.column.title; +``` +```html +<igx-column [title] = "'Some column tooltip'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`title`](IgxColumnComponent.md#title) + +*** + +### widthChange + +> **widthChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L890) + +Emitted when the column width changes. + +```html +<igx-column (widthChange)="widthChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`widthChange`](IgxColumnComponent.md#widthchange) + +## Accessors + +### childColumns + +#### Get Signature + +> **get** **childColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L347) + +A list containing all the child columns under this column (if any). +Empty without children or if this column is not Group or Layout. + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`childColumns`](IgxColumnComponent.md#childcolumns) + +*** + +### collapsible + +#### Set Signature + +> **set** **collapsible**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L63) + +Set if the column group is collapsible. +Default value is `false` +```html + <igx-column-group [collapsible] = "true"></igx-column-group> +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`collapsible`](IgxColumnComponent.md#collapsible) + +*** + +### columnGroup + +#### Get Signature + +> **get** **columnGroup**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L363) + +Returns a boolean indicating if the column is a `ColumnGroup`. +```typescript +let isColumnGroup = this.columnGroup.columnGroup +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +Specifies whether the column belongs to a group of columns. + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`columnGroup`](IgxColumnComponent.md#columngroup) + +*** + +### columnLayout + +#### Get Signature + +> **get** **columnLayout**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:374](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L374) + +Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout. +```typescript +let columnGroup = this.column.columnGroup; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`columnLayout`](IgxColumnComponent.md#columnlayout) + +*** + +### columnLayoutChild + +#### Get Signature + +> **get** **columnLayoutChild**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1599) + +Returns a boolean indicating if the column is a child of a `ColumnLayout` for multi-row layout. +```typescript +let columnLayoutChild = this.column.columnLayoutChild; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`columnLayoutChild`](IgxColumnComponent.md#columnlayoutchild) + +*** + +### disabledSummaries + +#### Get Signature + +> **get** **disabledSummaries**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1165) + +Sets/gets the summary operands to exclude from display. +Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc. +```typescript +let disabledSummaries = this.column.disabledSummaries; +``` +```html +<igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`string`[] + +#### Set Signature + +> **set** **disabledSummaries**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1169) + +##### Parameters + +###### value + +`string`[] + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`disabledSummaries`](IgxColumnComponent.md#disabledsummaries) + +*** + +### editable + +#### Get Signature + +> **get** **editable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L222) + +Gets whether the column is editable. +Default value is `false`. +```typescript +let isEditable = this.column.editable; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **editable**(`editable`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L249) + +Sets whether the column is editable. +```typescript +this.column.editable = true; +``` +```html +<igx-column [editable] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### editable + +`boolean` + +##### Returns + +`void` + +Indicated whether the column can be edited. If the value is true, the column can be edited + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`editable`](IgxColumnComponent.md#editable) + +*** + +### editorOptions + +#### Get Signature + +> **get** **editorOptions**(): [`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1735) + +Sets properties on the default column editors + +##### Returns + +[`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +#### Set Signature + +> **set** **editorOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1732) + +Pass optional properties for the default column editors. + +##### Remarks + +Options may be applicable only to specific column type editors. + +##### Example + +```typescript +const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', +} +``` +```html +<igx-column dataType="date" [editorOptions]="editorOptions"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +[`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +##### Returns + +`void` + +Sets properties on the default column editors + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`editorOptions`](IgxColumnComponent.md#editoroptions) + +*** + +### errorTemplate + +#### Get Signature + +> **get** **errorTemplate**(): `TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1441](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1441) + +Returns a reference to the validation error template. +```typescript +let errorTemplate = this.column.errorTemplate; +``` + +##### Returns + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +#### Set Signature + +> **set** **errorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1459](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1459) + +Sets the error template. +```html +<ng-template igxCellValidationError let-cell="cell" #errorTemplate > + <div *ngIf="cell.validation.errors?.['forbiddenName']"> + This name is forbidden. + </div> +</ng-template> +``` +```typescript +@ViewChild("'errorTemplate'", {read: TemplateRef }) +public errorTemplate: TemplateRef<any>; +this.column.errorTemplate = this.errorTemplate; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`errorTemplate`](IgxColumnComponent.md#errortemplate) + +*** + +### expanded + +#### Set Signature + +> **set** **expanded**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L90) + +Set whether the group is expanded or collapsed initially. +Applied only if the collapsible property is set to `true` +Default value is `true` +```html + const state = false + <igx-column-group [(expand)] = "state"></igx-column-group> +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`expanded`](IgxColumnComponent.md#expanded) + +*** + +### field + +#### Get Signature + +> **get** **field**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L82) + +The internal field name, used in expressions and queries. + +##### Returns + +`string` + +#### Set Signature + +> **set** **field**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L78) + +Sets/gets the `field` value. +```typescript +let columnField = this.column.field; +``` +```html +<igx-column [field] = "'ID'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +The internal field name, used in expressions and queries. + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`field`](IgxColumnComponent.md#field) + +*** + +### filterCellTemplate + +#### Get Signature + +> **get** **filterCellTemplate**(): `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1474](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1474) + +Returns a reference to the `filterCellTemplate`. +```typescript +let filterCellTemplate = this.column.filterCellTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +#### Set Signature + +> **set** **filterCellTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1492](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1492) + +Sets the quick filter template. +```html +<ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column"> + <input (input)="onInput()"> +</ng-template> +``` +```typescript +@ViewChild("'filterCellTemplate'", {read: TemplateRef }) +public filterCellTemplate: TemplateRef<any>; +this.column.filterCellTemplate = this.filterCellTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +##### Returns + +`void` + +Represents a custom template for filtering +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`filterCellTemplate`](IgxColumnComponent.md#filtercelltemplate) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1793) + +Returns the filteringExpressionsTree of the column. +```typescript +let tree = this.column.filteringExpressionsTree; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +The filtering expressions for the column. +The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`filteringExpressionsTree`](IgxColumnComponent.md#filteringexpressionstree) + +*** + +### filters + +#### Get Signature + +> **get** **filters**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L152) + +Gets the column group `filters`. +```typescript +let columnGroupFilters = this.columnGroup.filters; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **filters**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L165) + +Sets the column group `filters`. +```typescript +this.columnGroup.filters = IgxStringFilteringOperand; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +Optional filtering operands that apply to this field. + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`filters`](IgxColumnComponent.md#filters) + +*** + +### groupable + +#### Get Signature + +> **get** **groupable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L204) + +Sets/gets whether the column is groupable. +Default value is `false`. +```typescript +let isGroupable = this.column.groupable; +``` +```html +<igx-column [groupable] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **groupable**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L207) + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`groupable`](IgxColumnComponent.md#groupable) + +*** + +### groupingComparer + +#### Get Signature + +> **get** **groupingComparer**(): (`a`, `b`, `currRec?`, `groupRec?`) => `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1263) + +Gets the function that compares values for grouping. +```typescript +let groupingComparer = this.column.groupingComparer' +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +(`a`, `b`, `currRec?`, `groupRec?`) => `number` + +#### Set Signature + +> **set** **groupingComparer**(`funcRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1277) + +Sets a custom function to compare values for grouping. +Subsequent values in the sorted data that the function returns 0 for are grouped. +```typescript +this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; } +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### funcRef + +(`a`, `b`, `currRec?`, `groupRec?`) => `number` + +##### Returns + +`void` + +Represents a method with custom grouping comparator to determine the members of the group. + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`groupingComparer`](IgxColumnComponent.md#groupingcomparer) + +*** + +### hasSummary + +#### Get Signature + +> **get** **hasSummary**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L312) + +Gets a value indicating whether the summary for the column is enabled. +```typescript +let hasSummary = this.column.hasSummary; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hasSummary**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L324) + +Sets a value indicating whether the summary for the column is enabled. +Default value is `false`. +```html +<igx-column [hasSummary] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`hasSummary`](IgxColumnComponent.md#hassummary) + +*** + +### headerTemplate + +#### Get Signature + +> **get** **headerTemplate**(): `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1375) + +Returns a reference to the header template. +```typescript +let headerTemplate = this.column.headerTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +#### Set Signature + +> **set** **headerTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1396) + +Sets the header template. +Note that the column header height is fixed and any content bigger than it will be cut off. +```html +<ng-template #headerTemplate> + <div style = "background-color:black" (click) = "changeColor(val)"> + <span style="color:red" >{{column.field}}</span> + </div> +</ng-template> +``` +```typescript +@ViewChild("'headerTemplate'", {read: TemplateRef }) +public headerTemplate: TemplateRef<any>; +this.column.headerTemplate = this.headerTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for the custom header of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`headerTemplate`](IgxColumnComponent.md#headertemplate) + +*** + +### hidden + +#### Get Signature + +> **get** **hidden**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L228) + +Gets whether the column group is hidden. +```typescript +let isHidden = this.columnGroup.hidden; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hidden**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L246) + +Sets the column group hidden property. +```html +<igx-column [hidden] = "true"></igx-column> +``` + +Two-way data binding +```html +<igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column> +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`hidden`](IgxColumnComponent.md#hidden) + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1041](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1041) + +Gets the column index. +```typescript +let columnIndex = this.column.index; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +The index of the column within the grid. +Includes the hidden columns when counting + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`index`](IgxColumnComponent.md#index) + +*** + +### level + +#### Get Signature + +> **get** **level**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1624) + +Returns the level of the column in a column group. +Returns `0` if the column doesn't have a `parent`. +```typescript +let columnLevel = this.column.level; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +Represents the hierarchical level of the column in the column layout + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`level`](IgxColumnComponent.md#level) + +*** + +### maxWidth + +#### Get Signature + +> **get** **maxWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L549) + +##### Returns + +`string` + +#### Set Signature + +> **set** **maxWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L544) + +Sets/gets the maximum `width` of the column. +```typescript +let columnMaxWidth = this.column.width; +``` +```html +<igx-column [maxWidth] = "'150px'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`maxWidth`](IgxColumnComponent.md#maxwidth) + +*** + +### merge + +#### Get Signature + +> **get** **merge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L94) + +Sets/gets whether to merge cells in this column. +```html +<igx-column [merge]="true"></igx-column> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **merge**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L98) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`merge`](IgxColumnComponent.md#merge) + +*** + +### mergingComparer + +#### Get Signature + +> **get** **mergingComparer**(): (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1237) + +Gets the function that compares values for merging. +```typescript +let mergingComparer = this.column.mergingComparer' +``` + +##### Returns + +(`prevRecord`, `record`, `field`) => `boolean` + +#### Set Signature + +> **set** **mergingComparer**(`funcRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1248) + +Sets a custom function to compare values for merging. +```typescript +this.column.mergingComparer = (prevRecord: any, record: any, field: string) => { return prevRecord[field] === record[field]; } +``` + +##### Parameters + +###### funcRef + +(`prevRecord`, `record`, `field`) => `boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`mergingComparer`](IgxColumnComponent.md#mergingcomparer) + +*** + +### minWidth + +#### Get Signature + +> **get** **minWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1020](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1020) + +##### Returns + +`string` + +#### Set Signature + +> **set** **minWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1012](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1012) + +Sets/gets the minimum `width` of the column. +Default value is `88`; +```typescript +let columnMinWidth = this.column.minWidth; +``` +```html +<igx-column [minWidth] = "'100px'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`minWidth`](IgxColumnComponent.md#minwidth) + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1078](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1078) + +Gets whether the column is `pinned`. +```typescript +let isPinned = this.column.pinned; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1095](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1095) + +Sets whether the column is pinned. +Default value is `false`. +```html +<igx-column [pinned] = "true"></igx-column> +``` + +Two-way data binding. +```html +<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently pinned. If the value is true, the column is pinned + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`pinned`](IgxColumnComponent.md#pinned) + +*** + +### pinningPosition + +#### Get Signature + +> **get** **pinningPosition**(): [`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1053](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1053) + +Gets the pinning position of the column. +```typescript +let pinningPosition = this.column.pinningPosition; + +##### Returns + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Set Signature + +> **set** **pinningPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1064](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1064) + +Sets the pinning position of the column. +```html +<igx-column [pinningPosition]="1"></igx-column> +``` + +##### Parameters + +###### value + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`pinningPosition`](IgxColumnComponent.md#pinningposition) + +*** + +### pipeArgs + +#### Get Signature + +> **get** **pipeArgs**(): [`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1710) + +Optional arguments for any pipe applied to the field. + +##### Returns + +[`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +#### Set Signature + +> **set** **pipeArgs**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1704) + +##### Remarks + +Pass optional parameters for DatePipe and/or DecimalPipe to format the display value for date and numeric columns. +Accepts an `IColumnPipeArgs` object with any of the `format`, `timezone` and `digitsInfo` properties. +For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe + +##### Example + +```typescript +const pipeArgs: IColumnPipeArgs = { + format: 'longDate', + timezone: 'UTC', + digitsInfo: '1.1-2' +} +``` +```html +<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column> +<igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +[`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +##### Returns + +`void` + +Optional arguments for any pipe applied to the field. + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`pipeArgs`](IgxColumnComponent.md#pipeargs) + +*** + +### selectable + +#### Get Signature + +> **get** **selectable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L175) + +Returns if the column group is selectable +```typescript +let columnGroupSelectable = this.columnGroup.selectable; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +Indicates if the column can be selected. If the value is true, the column can be selected + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`selectable`](IgxColumnComponent.md#selectable) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L269) + +Returns if the column group is selected. +```typescript +let isSelected = this.columnGroup.selected; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L283) + +Select/deselect the column group. +```typescript +this.columnGroup.selected = true; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently selected. If the value is true, the column is selected + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`selected`](IgxColumnComponent.md#selected) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1213) + +Gets the column `sortStrategy`. +```typescript +let sortStrategy = this.column.sortStrategy +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1225) + +Sets the column `sortStrategy`. +```typescript +this.column.sortStrategy = new CustomSortingStrategy(). +class CustomSortingStrategy extends SortingStrategy {...} +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### classRef + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +##### Returns + +`void` + +The sorting strategy used for sorting this column. +The interface contains a method sort that sorts the provided data based on the given sorting expressions + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`sortStrategy`](IgxColumnComponent.md#sortstrategy) + +*** + +### summaries + +#### Get Signature + +> **get** **summaries**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L113) + +Gets the column group `summaries`. +```typescript +let columnGroupSummaries = this.columnGroup.summaries; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **summaries**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L126) + +Sets the column group `summaries`. +```typescript +this.columnGroup.summaries = IgxNumberSummaryOperand; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`summaries`](IgxColumnComponent.md#summaries) + +*** + +### summaryTemplate + +#### Get Signature + +> **get** **summaryTemplate**(): `TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1307](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1307) + +Returns a reference to the `summaryTemplate`. +```typescript +let summaryTemplate = this.column.summaryTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +#### Set Signature + +> **set** **summaryTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1326) + +Sets the summary template. +```html +<ng-template #summaryTemplate igxSummary let-summaryResults> + <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p> + <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p> +</ng-template> +``` +```typescript +@ViewChild("'summaryTemplate'", {read: TemplateRef }) +public summaryTemplate: TemplateRef<any>; +this.column.summaryTemplate = this.summaryTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for a summary of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`summaryTemplate`](IgxColumnComponent.md#summarytemplate) + +*** + +### topLevelParent + +#### Get Signature + +> **get** **topLevelParent**(): [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2503](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2503) + +Returns a reference to the top level parent column. +```typescript +let topLevelParent = this.column.topLevelParent; +``` + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md) + +Optional +The root parent of this column (if any). +If there is no root parent, that means the current column is the root parent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`topLevelParent`](IgxColumnComponent.md#toplevelparent) + +*** + +### visibleIndex + +#### Get Signature + +> **get** **visibleIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1531) + +Gets the column visible index. +If the column is not visible, returns `-1`. +```typescript +let visibleColumnIndex = this.column.visibleIndex; +``` + +##### Returns + +`number` + +The index of the column within the grid. +Does not include the hidden columns when counting + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`visibleIndex`](IgxColumnComponent.md#visibleindex) + +*** + +### visibleWhenCollapsed + +#### Get Signature + +> **get** **visibleWhenCollapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1677](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1677) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **visibleWhenCollapsed**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1668) + +Indicates whether the column will be visible when its parent is collapsed. +```html +<igx-column-group> + <igx-column [visibleWhenCollapsed]="true"></igx-column> +</igx-column-group> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`visibleWhenCollapsed`](IgxColumnComponent.md#visiblewhencollapsed) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L385) + +Gets the width of the column group. +```typescript +let columnGroupWidth = this.columnGroup.width; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L396) + +Gets the `width` of the column. +```typescript +let columnWidth = this.column.width; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Overrides + +[`IgxColumnComponent`](IgxColumnComponent.md).[`width`](IgxColumnComponent.md#width) + +## Methods + +### autosize() + +> **autosize**(`byHeaderOnly?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2543) + +Autosize the column to the longest currently visible cell value, including the header cell. +```typescript +@ViewChild('grid') grid: IgxGridComponent; +let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; +column.autosize(); +``` + +#### Parameters + +##### byHeaderOnly? + +`boolean` = `false` + +Set if column should be autosized based only on the header content. + +#### Returns + +`void` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`autosize`](IgxColumnComponent.md#autosize) + +*** + +### getColumnSizesString() + +> `protected` **getColumnSizesString**(`children`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2669](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2669) + +#### Parameters + +##### children + +`QueryList`\<[`IgxColumnComponent`](IgxColumnComponent.md)\> + +#### Returns + +`string` + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`getColumnSizesString`](IgxColumnComponent.md#getcolumnsizesstring) + +*** + +### move() + +> **move**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2434) + +Moves a column to the specified visible index. +If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. +If passed index would move the column to a different column group. moving is not performed. + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Example + +```typescript +column.move(index); +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`move`](IgxColumnComponent.md#move) + +*** + +### pin() + +> **pin**(`index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2239) + +Pins the column in the specified position at the provided index in that pinned area. +Defaults to index `0` if not provided, or to the initial index in the pinned area. +Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned. +Column cannot be pinned if: +- Is already pinned +- index argument is out of range +```typescript +let success = this.column.pin(); +``` + +#### Parameters + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`pin`](IgxColumnComponent.md#pin) + +*** + +### unpin() + +> **unpin**(`index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2349) + +Unpins the column and place it at the provided index in the unpinned area. +Defaults to index `0` if not provided, or to the initial index in the unpinned area. +Returns `true` if the column is successfully unpinned. Returns `false` if the column cannot be unpinned. +Column cannot be unpinned if: +- Is already unpinned +- index argument is out of range +```typescript +let success = this.column.unpin(); +``` + +#### Parameters + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnComponent`](IgxColumnComponent.md).[`unpin`](IgxColumnComponent.md#unpin) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnHidingDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnHidingDirective.md new file mode 100644 index 000000000..c8c2173f6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnHidingDirective.md @@ -0,0 +1,31 @@ +# Class: IgxColumnHidingDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts#L10) + +## Extends + +- [`IgxColumnActionsBaseDirective`](IgxColumnActionsBaseDirective.md) + +## Constructors + +### Constructor + +> **new IgxColumnHidingDirective**(): `IgxColumnHidingDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts#L14) + +#### Returns + +`IgxColumnHidingDirective` + +#### Overrides + +[`IgxColumnActionsBaseDirective`](IgxColumnActionsBaseDirective.md).[`constructor`](IgxColumnActionsBaseDirective.md#constructor) + +## Properties + +### columnActions + +> `protected` **columnActions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnLayoutComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnLayoutComponent.md new file mode 100644 index 000000000..5d3b1c3e5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnLayoutComponent.md @@ -0,0 +1,2780 @@ +# Class: IgxColumnLayoutComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L33) + +Column layout for declaration of Multi-row Layout + +## Igx Parent + +IgxGridComponent + +## Extends + +- [`IgxColumnGroupComponent`](IgxColumnGroupComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnLayoutComponent**(): `IgxColumnLayoutComponent` + +#### Returns + +`IgxColumnLayoutComponent` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`constructor`](IgxColumnGroupComponent.md#constructor) + +## Properties + +### \_mergingComparer + +> `protected` **\_mergingComparer**: (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1887) + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`_mergingComparer`](IgxColumnGroupComponent.md#_mergingcomparer) + +*** + +### \_pinningPosition + +> `protected` **\_pinningPosition**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1837) + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`_pinningPosition`](IgxColumnGroupComponent.md#_pinningposition) + +*** + +### \_vIndex + +> `protected` **\_vIndex**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1836) + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`_vIndex`](IgxColumnGroupComponent.md#_vindex) + +*** + +### additionalTemplateContext + +> **additionalTemplateContext**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L878) + +Sets/gets custom properties provided in additional template context. + +```html +<igx-column [additionalTemplateContext]="contextObject"> + <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext"> + {{ props }} + </ng-template> +</igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`additionalTemplateContext`](IgxColumnGroupComponent.md#additionaltemplatecontext) + +*** + +### autosizeHeader + +> **autosizeHeader**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L299) + +Sets/gets whether the column header is included in autosize logic. +Useful when template for a column header is sized based on parent, for example a default `div`. +Default value is `false`. +```typescript +let isResizable = this.column.resizable; +``` +```html +<igx-column [resizable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`autosizeHeader`](IgxColumnGroupComponent.md#autosizeheader) + +*** + +### cellClasses + +> **cellClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:647](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L647) + +Sets a conditional class selector of the column cells. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class, while the +value is either a callback function that returns a boolean, +or boolean, like so: +```typescript +callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; } +cellClasses = { 'className' : this.callback }; +``` +```html +<igx-column [cellClasses] = "cellClasses"></igx-column> +<igx-column [cellClasses] = "{'class1' : true }"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`cellClasses`](IgxColumnGroupComponent.md#cellclasses) + +*** + +### cellStyles + +> **cellStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L670) + +Sets conditional style properties on the column cells. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +As with `cellClasses` it accepts a callback function. +```typescript +styles = { + background: 'royalblue', + color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit' +} +``` +```html +<igx-column [cellStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`cellStyles`](IgxColumnGroupComponent.md#cellstyles) + +*** + +### ~~children~~ + +> **children**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L51) + +#### Deprecated + +in version 18.1.0. Use the `childColumns` property instead. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`children`](IgxColumnGroupComponent.md#children) + +*** + +### colEnd + +> **colEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L836) + +Column index where the current field should end. +The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field +```html +<igx-column-layout> + <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`colEnd`](IgxColumnGroupComponent.md#colend) + +*** + +### collapsibleIndicatorTemplate + +> **collapsibleIndicatorTemplate**: `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L201) + +Allows you to define a custom template for expand/collapse indicator + +#### Memberof + +IgxColumnGroupComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`collapsibleIndicatorTemplate`](IgxColumnGroupComponent.md#collapsibleindicatortemplate) + +*** + +### colStart + +> **colStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L862) + +Column index from which the field is starting. +```html +<igx-column-layout> + <igx-column [colStart]="1" [rowStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`colStart`](IgxColumnGroupComponent.md#colstart) + +*** + +### dataType + +> **dataType**: `GridColumnDataType` = `GridColumnDataType.String` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L804) + +Sets/gets the data type of the column values. +Default value is `string`. +```typescript +let columnDataType = this.column.dataType; +``` +```html +<igx-column [dataType] = "'number'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`dataType`](IgxColumnGroupComponent.md#datatype) + +*** + +### disableHiding + +> **disableHiding**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L456) + +Gets whether the hiding is disabled. +```typescript +let isHidingDisabled = this.column.disableHiding; +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`disableHiding`](IgxColumnGroupComponent.md#disablehiding) + +*** + +### disablePinning + +> **disablePinning**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:468](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L468) + +Gets whether the pinning is disabled. +```typescript +let isPinningDisabled = this.column.disablePinning; +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`disablePinning`](IgxColumnGroupComponent.md#disablepinning) + +*** + +### expandedChange + +> **expandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L431) + +Emitted when the column expanded or collapsed. + +```html +<igx-column (expandedChange)="expandedChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`expandedChange`](IgxColumnGroupComponent.md#expandedchange) + +*** + +### filterable + +> **filterable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L267) + +Sets/gets whether the column is filterable. +Default value is `true`. +```typescript +let isFilterable = this.column.filterable; +``` +```html +<igx-column [filterable] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`filterable`](IgxColumnGroupComponent.md#filterable) + +*** + +### filteringIgnoreCase + +> **filteringIgnoreCase**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:759](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L759) + +Sets/gets whether the column filtering should be case sensitive. +Default value is `true`. +```typescript +let filteringIgnoreCase = this.column.filteringIgnoreCase; +``` +```html +<igx-column [filteringIgnoreCase] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`filteringIgnoreCase`](IgxColumnGroupComponent.md#filteringignorecase) + +*** + +### formatter + +> **formatter**: (`value`, `rowData?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L710) + +Applies display format to cell values in the column. Does not modify the underlying data. + +#### Parameters + +##### value + +`any` + +##### rowData? + +`any` + +#### Returns + +`any` + +#### Remarks + +Note: As the formatter is used in places like the Excel style filtering dialog, in certain +scenarios (remote filtering for example), the row data argument can be `undefined`. + +In this example, we check to see if the column name is Salary, and then provide a method as the column formatter +to format the value into a currency string. + +#### Examples + +```typescript +columnInit(column: IgxColumnComponent) { + if (column.field == "Salary") { + column.formatter = (salary => this.format(salary)); + } +} + +format(value: number) : string { + return formatCurrency(value, "en-us", "$"); +} +``` + +```typescript +const column = this.grid.getColumnByName('Address'); +const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address; +column.formatter = addressFormatter; +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`formatter`](IgxColumnGroupComponent.md#formatter) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L59) + +Represents the instance of the parent `GridType` that contains this column. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`grid`](IgxColumnGroupComponent.md#grid) + +*** + +### header + +> **header**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L131) + +Sets/gets the `header` value. +```typescript +let columnHeader = this.column.header; +``` +```html +<igx-column [header] = "'ID'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`header`](IgxColumnGroupComponent.md#header) + +*** + +### headerClasses + +> **headerClasses**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L566) + +Sets/gets the class selector of the column header. +```typescript +let columnHeaderClass = this.column.headerClasses; +``` +```html +<igx-column [headerClasses] = "'column-header'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`headerClasses`](IgxColumnGroupComponent.md#headerclasses) + +*** + +### headerGroupClasses + +> **headerGroupClasses**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L603) + +Sets/gets the class selector of the column group header. +```typescript +let columnHeaderClass = this.column.headerGroupClasses; +``` +```html +<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`headerGroupClasses`](IgxColumnGroupComponent.md#headergroupclasses) + +*** + +### headerGroupStyles + +> **headerGroupStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L624) + +Sets conditional style properties on the column header group wrapper. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +```typescript +styles = { + background: 'royalblue', + color: (column) => column.pinned ? 'red': 'inherit' +} +``` +```html +<igx-column [headerGroupStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`headerGroupStyles`](IgxColumnGroupComponent.md#headergroupstyles) + +*** + +### headerStyles + +> **headerStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L587) + +Sets conditional style properties on the column header. +Similar to `ngStyle` it accepts an object literal where the keys are +the style properties and the value is the expression to be evaluated. +```typescript +styles = { + background: 'royalblue', + color: (column) => column.pinned ? 'red': 'inherit' +} +``` +```html +<igx-column [headerStyles]="styles"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`headerStyles`](IgxColumnGroupComponent.md#headerstyles) + +*** + +### hiddenChange + +> **hiddenChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L419) + +Emitted when the column is hidden or shown. + +```html +<igx-column (hiddenChange)="hiddenChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`hiddenChange`](IgxColumnGroupComponent.md#hiddenchange) + +*** + +### parent + +> **parent**: [`ColumnType`](../interfaces/ColumnType.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1809) + +Sets/gets the parent column. +```typescript +let parentColumn = this.column.parent; +``` +```typescript +this.column.parent = higherLevelColumn; +``` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`parent`](IgxColumnGroupComponent.md#parent) + +*** + +### pinnedChange + +> **pinnedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L902) + +Emitted when the column is pinned/unpinned. + +```html +<igx-column (pinnedChange)="pinnedChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`pinnedChange`](IgxColumnGroupComponent.md#pinnedchange) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L64) + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`platform`](IgxColumnGroupComponent.md#platform) + +*** + +### resizable + +> **resizable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L282) + +Sets/gets whether the column is resizable. +Default value is `false`. +```typescript +let isResizable = this.column.resizable; +``` +```html +<igx-column [resizable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`resizable`](IgxColumnGroupComponent.md#resizable) + +*** + +### rowEnd + +> **rowEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L822) + +Row index where the current field should end. +The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field +```html +<igx-column-layout> + <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`rowEnd`](IgxColumnGroupComponent.md#rowend) + +*** + +### rowStart + +> **rowStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L849) + +Row index from which the field is starting. +```html +<igx-column-layout> + <igx-column [rowStart]="1" [colStart]="1"></igx-column> +</igx-column-layout> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`rowStart`](IgxColumnGroupComponent.md#rowstart) + +*** + +### searchable + +> **searchable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L142) + +Sets/gets whether the column group is `searchable`. +Default value is `true`. +```typescript +let isSearchable = this.columnGroup.searchable; +``` +```html + <igx-column-group [searchable] = "false"></igx-column-group> +``` + +#### Memberof + +IgxColumnGroupComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`searchable`](IgxColumnGroupComponent.md#searchable) + +*** + +### sortable + +> **sortable**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L161) + +Sets/gets whether the column is sortable. +Default value is `false`. +```typescript +let isSortable = this.column.sortable; +``` +```html +<igx-column [sortable] = "true"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`sortable`](IgxColumnGroupComponent.md#sortable) + +*** + +### sortingIgnoreCase + +> **sortingIgnoreCase**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L774) + +Sets/gets whether the column sorting should be case sensitive. +Default value is `true`. +```typescript +let sortingIgnoreCase = this.column.sortingIgnoreCase; +``` +```html +<igx-column [sortingIgnoreCase] = "false"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`sortingIgnoreCase`](IgxColumnGroupComponent.md#sortingignorecase) + +*** + +### summaryFormatter + +> **summaryFormatter**: (`summary`, `summaryOperand`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L743) + +The summaryFormatter is used to format the display of the column summaries. + +In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter +to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers. + +```typescript +columnInit(column: IgxColumnComponent) { + if (column.field == "OrderDate") { + column.summaryFormatter = this.summaryFormat; + } +} + +summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryResult.key !== 'count' && result !== null && result !== undefined) { + const pipe = new DatePipe('fr-FR'); + return pipe.transform(result,'mediumDate'); + } + return result; +} +``` + +#### Parameters + +##### summary + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md) + +##### summaryOperand + +[`IgxSummaryOperand`](IgxSummaryOperand.md) + +#### Returns + +`any` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`summaryFormatter`](IgxColumnGroupComponent.md#summaryformatter) + +*** + +### title + +> **title**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L146) + +Sets/gets the `title` value. +```typescript +let title = this.column.title; +``` +```html +<igx-column [title] = "'Some column tooltip'"></igx-column> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`title`](IgxColumnGroupComponent.md#title) + +*** + +### widthChange + +> **widthChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L890) + +Emitted when the column width changes. + +```html +<igx-column (widthChange)="widthChange($event)"> +</igx-column> +``` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`widthChange`](IgxColumnGroupComponent.md#widthchange) + +## Accessors + +### childColumns + +#### Get Signature + +> **get** **childColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L347) + +A list containing all the child columns under this column (if any). +Empty without children or if this column is not Group or Layout. + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`childColumns`](IgxColumnGroupComponent.md#childcolumns) + +*** + +### collapsible + +#### Set Signature + +> **set** **collapsible**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L63) + +Set if the column group is collapsible. +Default value is `false` +```html + <igx-column-group [collapsible] = "true"></igx-column-group> +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`collapsible`](IgxColumnGroupComponent.md#collapsible) + +*** + +### columnGroup + +#### Get Signature + +> **get** **columnGroup**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L363) + +Returns a boolean indicating if the column is a `ColumnGroup`. +```typescript +let isColumnGroup = this.columnGroup.columnGroup +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +Specifies whether the column belongs to a group of columns. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`columnGroup`](IgxColumnGroupComponent.md#columngroup) + +*** + +### columnLayout + +#### Get Signature + +> **get** **columnLayout**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L52) + +Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout. +```typescript +let columnGroup = this.column.columnGroup; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Overrides + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`columnLayout`](IgxColumnGroupComponent.md#columnlayout) + +*** + +### columnLayoutChild + +#### Get Signature + +> **get** **columnLayoutChild**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1599) + +Returns a boolean indicating if the column is a child of a `ColumnLayout` for multi-row layout. +```typescript +let columnLayoutChild = this.column.columnLayoutChild; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`columnLayoutChild`](IgxColumnGroupComponent.md#columnlayoutchild) + +*** + +### disabledSummaries + +#### Get Signature + +> **get** **disabledSummaries**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1165) + +Sets/gets the summary operands to exclude from display. +Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc. +```typescript +let disabledSummaries = this.column.disabledSummaries; +``` +```html +<igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`string`[] + +#### Set Signature + +> **set** **disabledSummaries**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1169) + +##### Parameters + +###### value + +`string`[] + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`disabledSummaries`](IgxColumnGroupComponent.md#disabledsummaries) + +*** + +### editable + +#### Get Signature + +> **get** **editable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L222) + +Gets whether the column is editable. +Default value is `false`. +```typescript +let isEditable = this.column.editable; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **editable**(`editable`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L249) + +Sets whether the column is editable. +```typescript +this.column.editable = true; +``` +```html +<igx-column [editable] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### editable + +`boolean` + +##### Returns + +`void` + +Indicated whether the column can be edited. If the value is true, the column can be edited + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`editable`](IgxColumnGroupComponent.md#editable) + +*** + +### editorOptions + +#### Get Signature + +> **get** **editorOptions**(): [`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1735) + +Sets properties on the default column editors + +##### Returns + +[`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +#### Set Signature + +> **set** **editorOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1732) + +Pass optional properties for the default column editors. + +##### Remarks + +Options may be applicable only to specific column type editors. + +##### Example + +```typescript +const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', +} +``` +```html +<igx-column dataType="date" [editorOptions]="editorOptions"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +[`IColumnEditorOptions`](../interfaces/IColumnEditorOptions.md) + +##### Returns + +`void` + +Sets properties on the default column editors + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`editorOptions`](IgxColumnGroupComponent.md#editoroptions) + +*** + +### errorTemplate + +#### Get Signature + +> **get** **errorTemplate**(): `TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1441](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1441) + +Returns a reference to the validation error template. +```typescript +let errorTemplate = this.column.errorTemplate; +``` + +##### Returns + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +#### Set Signature + +> **set** **errorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1459](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1459) + +Sets the error template. +```html +<ng-template igxCellValidationError let-cell="cell" #errorTemplate > + <div *ngIf="cell.validation.errors?.['forbiddenName']"> + This name is forbidden. + </div> +</ng-template> +``` +```typescript +@ViewChild("'errorTemplate'", {read: TemplateRef }) +public errorTemplate: TemplateRef<any>; +this.column.errorTemplate = this.errorTemplate; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`errorTemplate`](IgxColumnGroupComponent.md#errortemplate) + +*** + +### expanded + +#### Set Signature + +> **set** **expanded**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L90) + +Set whether the group is expanded or collapsed initially. +Applied only if the collapsible property is set to `true` +Default value is `true` +```html + const state = false + <igx-column-group [(expand)] = "state"></igx-column-group> +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`expanded`](IgxColumnGroupComponent.md#expanded) + +*** + +### field + +#### Get Signature + +> **get** **field**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L82) + +The internal field name, used in expressions and queries. + +##### Returns + +`string` + +#### Set Signature + +> **set** **field**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L78) + +Sets/gets the `field` value. +```typescript +let columnField = this.column.field; +``` +```html +<igx-column [field] = "'ID'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +The internal field name, used in expressions and queries. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`field`](IgxColumnGroupComponent.md#field) + +*** + +### filterCellTemplate + +#### Get Signature + +> **get** **filterCellTemplate**(): `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1474](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1474) + +Returns a reference to the `filterCellTemplate`. +```typescript +let filterCellTemplate = this.column.filterCellTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +#### Set Signature + +> **set** **filterCellTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1492](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1492) + +Sets the quick filter template. +```html +<ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column"> + <input (input)="onInput()"> +</ng-template> +``` +```typescript +@ViewChild("'filterCellTemplate'", {read: TemplateRef }) +public filterCellTemplate: TemplateRef<any>; +this.column.filterCellTemplate = this.filterCellTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +##### Returns + +`void` + +Represents a custom template for filtering +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`filterCellTemplate`](IgxColumnGroupComponent.md#filtercelltemplate) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1793) + +Returns the filteringExpressionsTree of the column. +```typescript +let tree = this.column.filteringExpressionsTree; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +The filtering expressions for the column. +The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`filteringExpressionsTree`](IgxColumnGroupComponent.md#filteringexpressionstree) + +*** + +### filters + +#### Get Signature + +> **get** **filters**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L152) + +Gets the column group `filters`. +```typescript +let columnGroupFilters = this.columnGroup.filters; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **filters**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L165) + +Sets the column group `filters`. +```typescript +this.columnGroup.filters = IgxStringFilteringOperand; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +Optional filtering operands that apply to this field. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`filters`](IgxColumnGroupComponent.md#filters) + +*** + +### groupable + +#### Get Signature + +> **get** **groupable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L204) + +Sets/gets whether the column is groupable. +Default value is `false`. +```typescript +let isGroupable = this.column.groupable; +``` +```html +<igx-column [groupable] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **groupable**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L207) + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`groupable`](IgxColumnGroupComponent.md#groupable) + +*** + +### groupingComparer + +#### Get Signature + +> **get** **groupingComparer**(): (`a`, `b`, `currRec?`, `groupRec?`) => `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1263) + +Gets the function that compares values for grouping. +```typescript +let groupingComparer = this.column.groupingComparer' +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +(`a`, `b`, `currRec?`, `groupRec?`) => `number` + +#### Set Signature + +> **set** **groupingComparer**(`funcRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1277) + +Sets a custom function to compare values for grouping. +Subsequent values in the sorted data that the function returns 0 for are grouped. +```typescript +this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; } +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### funcRef + +(`a`, `b`, `currRec?`, `groupRec?`) => `number` + +##### Returns + +`void` + +Represents a method with custom grouping comparator to determine the members of the group. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`groupingComparer`](IgxColumnGroupComponent.md#groupingcomparer) + +*** + +### hasSummary + +#### Get Signature + +> **get** **hasSummary**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L312) + +Gets a value indicating whether the summary for the column is enabled. +```typescript +let hasSummary = this.column.hasSummary; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hasSummary**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L324) + +Sets a value indicating whether the summary for the column is enabled. +Default value is `false`. +```html +<igx-column [hasSummary] = "true"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`hasSummary`](IgxColumnGroupComponent.md#hassummary) + +*** + +### headerTemplate + +#### Get Signature + +> **get** **headerTemplate**(): `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1375) + +Returns a reference to the header template. +```typescript +let headerTemplate = this.column.headerTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +#### Set Signature + +> **set** **headerTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1396) + +Sets the header template. +Note that the column header height is fixed and any content bigger than it will be cut off. +```html +<ng-template #headerTemplate> + <div style = "background-color:black" (click) = "changeColor(val)"> + <span style="color:red" >{{column.field}}</span> + </div> +</ng-template> +``` +```typescript +@ViewChild("'headerTemplate'", {read: TemplateRef }) +public headerTemplate: TemplateRef<any>; +this.column.headerTemplate = this.headerTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for the custom header of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`headerTemplate`](IgxColumnGroupComponent.md#headertemplate) + +*** + +### hidden + +#### Get Signature + +> **get** **hidden**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L101) + +Gets whether the column group is hidden. +```typescript +let isHidden = this.columnGroup.hidden; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hidden**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L114) + +Sets the column layout hidden property. +```typescript +<igx-column-layout [hidden] = "true"></igx-column-> +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible + +#### Overrides + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`hidden`](IgxColumnGroupComponent.md#hidden) + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1041](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1041) + +Gets the column index. +```typescript +let columnIndex = this.column.index; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +The index of the column within the grid. +Includes the hidden columns when counting + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`index`](IgxColumnGroupComponent.md#index) + +*** + +### level + +#### Get Signature + +> **get** **level**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1624) + +Returns the level of the column in a column group. +Returns `0` if the column doesn't have a `parent`. +```typescript +let columnLevel = this.column.level; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +Represents the hierarchical level of the column in the column layout + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`level`](IgxColumnGroupComponent.md#level) + +*** + +### maxWidth + +#### Get Signature + +> **get** **maxWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L549) + +##### Returns + +`string` + +#### Set Signature + +> **set** **maxWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L544) + +Sets/gets the maximum `width` of the column. +```typescript +let columnMaxWidth = this.column.width; +``` +```html +<igx-column [maxWidth] = "'150px'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`maxWidth`](IgxColumnGroupComponent.md#maxwidth) + +*** + +### merge + +#### Get Signature + +> **get** **merge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L94) + +Sets/gets whether to merge cells in this column. +```html +<igx-column [merge]="true"></igx-column> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **merge**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L98) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`merge`](IgxColumnGroupComponent.md#merge) + +*** + +### mergingComparer + +#### Get Signature + +> **get** **mergingComparer**(): (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1237) + +Gets the function that compares values for merging. +```typescript +let mergingComparer = this.column.mergingComparer' +``` + +##### Returns + +(`prevRecord`, `record`, `field`) => `boolean` + +#### Set Signature + +> **set** **mergingComparer**(`funcRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1248) + +Sets a custom function to compare values for merging. +```typescript +this.column.mergingComparer = (prevRecord: any, record: any, field: string) => { return prevRecord[field] === record[field]; } +``` + +##### Parameters + +###### funcRef + +(`prevRecord`, `record`, `field`) => `boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`mergingComparer`](IgxColumnGroupComponent.md#mergingcomparer) + +*** + +### minWidth + +#### Get Signature + +> **get** **minWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1020](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1020) + +##### Returns + +`string` + +#### Set Signature + +> **set** **minWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1012](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1012) + +Sets/gets the minimum `width` of the column. +Default value is `88`; +```typescript +let columnMinWidth = this.column.minWidth; +``` +```html +<igx-column [minWidth] = "'100px'"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`minWidth`](IgxColumnGroupComponent.md#minwidth) + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1078](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1078) + +Gets whether the column is `pinned`. +```typescript +let isPinned = this.column.pinned; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1095](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1095) + +Sets whether the column is pinned. +Default value is `false`. +```html +<igx-column [pinned] = "true"></igx-column> +``` + +Two-way data binding. +```html +<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently pinned. If the value is true, the column is pinned + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`pinned`](IgxColumnGroupComponent.md#pinned) + +*** + +### pinningPosition + +#### Get Signature + +> **get** **pinningPosition**(): [`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1053](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1053) + +Gets the pinning position of the column. +```typescript +let pinningPosition = this.column.pinningPosition; + +##### Returns + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Set Signature + +> **set** **pinningPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1064](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1064) + +Sets the pinning position of the column. +```html +<igx-column [pinningPosition]="1"></igx-column> +``` + +##### Parameters + +###### value + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`pinningPosition`](IgxColumnGroupComponent.md#pinningposition) + +*** + +### pipeArgs + +#### Get Signature + +> **get** **pipeArgs**(): [`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1710) + +Optional arguments for any pipe applied to the field. + +##### Returns + +[`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +#### Set Signature + +> **set** **pipeArgs**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1704) + +##### Remarks + +Pass optional parameters for DatePipe and/or DecimalPipe to format the display value for date and numeric columns. +Accepts an `IColumnPipeArgs` object with any of the `format`, `timezone` and `digitsInfo` properties. +For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe + +##### Example + +```typescript +const pipeArgs: IColumnPipeArgs = { + format: 'longDate', + timezone: 'UTC', + digitsInfo: '1.1-2' +} +``` +```html +<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column> +<igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +[`IColumnPipeArgs`](../interfaces/IColumnPipeArgs.md) + +##### Returns + +`void` + +Optional arguments for any pipe applied to the field. + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`pipeArgs`](IgxColumnGroupComponent.md#pipeargs) + +*** + +### selectable + +#### Get Signature + +> **get** **selectable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L175) + +Returns if the column group is selectable +```typescript +let columnGroupSelectable = this.columnGroup.selectable; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +Indicates if the column can be selected. If the value is true, the column can be selected + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`selectable`](IgxColumnGroupComponent.md#selectable) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L269) + +Returns if the column group is selected. +```typescript +let isSelected = this.columnGroup.selected; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L283) + +Select/deselect the column group. +```typescript +this.columnGroup.selected = true; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates if the column is currently selected. If the value is true, the column is selected + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`selected`](IgxColumnGroupComponent.md#selected) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1213) + +Gets the column `sortStrategy`. +```typescript +let sortStrategy = this.column.sortStrategy +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1225) + +Sets the column `sortStrategy`. +```typescript +this.column.sortStrategy = new CustomSortingStrategy(). +class CustomSortingStrategy extends SortingStrategy {...} +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### classRef + +[`ISortingStrategy`](../interfaces/ISortingStrategy.md) + +##### Returns + +`void` + +The sorting strategy used for sorting this column. +The interface contains a method sort that sorts the provided data based on the given sorting expressions + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`sortStrategy`](IgxColumnGroupComponent.md#sortstrategy) + +*** + +### summaries + +#### Get Signature + +> **get** **summaries**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L113) + +Gets the column group `summaries`. +```typescript +let columnGroupSummaries = this.columnGroup.summaries; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **summaries**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts#L126) + +Sets the column group `summaries`. +```typescript +this.columnGroup.summaries = IgxNumberSummaryOperand; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`summaries`](IgxColumnGroupComponent.md#summaries) + +*** + +### summaryTemplate + +#### Get Signature + +> **get** **summaryTemplate**(): `TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1307](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1307) + +Returns a reference to the `summaryTemplate`. +```typescript +let summaryTemplate = this.column.summaryTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +#### Set Signature + +> **set** **summaryTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1326) + +Sets the summary template. +```html +<ng-template #summaryTemplate igxSummary let-summaryResults> + <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p> + <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p> +</ng-template> +``` +```typescript +@ViewChild("'summaryTemplate'", {read: TemplateRef }) +public summaryTemplate: TemplateRef<any>; +this.column.summaryTemplate = this.summaryTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxSummaryTemplateContext`](../interfaces/IgxSummaryTemplateContext.md)\> + +##### Returns + +`void` + +The template reference for a summary of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`summaryTemplate`](IgxColumnGroupComponent.md#summarytemplate) + +*** + +### topLevelParent + +#### Get Signature + +> **get** **topLevelParent**(): [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2503](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2503) + +Returns a reference to the top level parent column. +```typescript +let topLevelParent = this.column.topLevelParent; +``` + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md) + +Optional +The root parent of this column (if any). +If there is no root parent, that means the current column is the root parent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`topLevelParent`](IgxColumnGroupComponent.md#toplevelparent) + +*** + +### visibleIndex + +#### Get Signature + +> **get** **visibleIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L79) + +Gets the column visible index. +If the column is not visible, returns `-1`. +```typescript +let visibleColumnIndex = this.column.visibleIndex; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`number` + +The index of the column within the grid. +Does not include the hidden columns when counting + +#### Overrides + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`visibleIndex`](IgxColumnGroupComponent.md#visibleindex) + +*** + +### visibleWhenCollapsed + +#### Get Signature + +> **get** **visibleWhenCollapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1677](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1677) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **visibleWhenCollapsed**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:1668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L1668) + +Indicates whether the column will be visible when its parent is collapsed. +```html +<igx-column-group> + <igx-column [visibleWhenCollapsed]="true"></igx-column> +</igx-column-group> +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`visibleWhenCollapsed`](IgxColumnGroupComponent.md#visiblewhencollapsed) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L44) + +Gets the width of the column layout. +```typescript +let columnGroupWidth = this.columnGroup.width; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **width**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts#L50) + +Gets the width of the column group. +```typescript +let columnGroupWidth = this.columnGroup.width; +``` + +##### Memberof + +IgxColumnGroupComponent + +##### Parameters + +###### val + +`any` + +##### Returns + +`void` + +#### Overrides + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`width`](IgxColumnGroupComponent.md#width) + +## Methods + +### autosize() + +> **autosize**(`byHeaderOnly?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2543) + +Autosize the column to the longest currently visible cell value, including the header cell. +```typescript +@ViewChild('grid') grid: IgxGridComponent; +let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; +column.autosize(); +``` + +#### Parameters + +##### byHeaderOnly? + +`boolean` = `false` + +Set if column should be autosized based only on the header content. + +#### Returns + +`void` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`autosize`](IgxColumnGroupComponent.md#autosize) + +*** + +### getColumnSizesString() + +> `protected` **getColumnSizesString**(`children`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2669](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2669) + +#### Parameters + +##### children + +`QueryList`\<[`IgxColumnComponent`](IgxColumnComponent.md)\> + +#### Returns + +`string` + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`getColumnSizesString`](IgxColumnGroupComponent.md#getcolumnsizesstring) + +*** + +### move() + +> **move**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2434) + +Moves a column to the specified visible index. +If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. +If passed index would move the column to a different column group. moving is not performed. + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Example + +```typescript +column.move(index); +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`move`](IgxColumnGroupComponent.md#move) + +*** + +### pin() + +> **pin**(`index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2239) + +Pins the column in the specified position at the provided index in that pinned area. +Defaults to index `0` if not provided, or to the initial index in the pinned area. +Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned. +Column cannot be pinned if: +- Is already pinned +- index argument is out of range +```typescript +let success = this.column.pin(); +``` + +#### Parameters + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`pin`](IgxColumnGroupComponent.md#pin) + +*** + +### unpin() + +> **unpin**(`index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:2349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/column.component.ts#L2349) + +Unpins the column and place it at the provided index in the unpinned area. +Defaults to index `0` if not provided, or to the initial index in the unpinned area. +Returns `true` if the column is successfully unpinned. Returns `false` if the column cannot be unpinned. +Column cannot be unpinned if: +- Is already unpinned +- index argument is out of range +```typescript +let success = this.column.unpin(); +``` + +#### Parameters + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md).[`unpin`](IgxColumnGroupComponent.md#unpin) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMaxLengthValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMaxLengthValidatorDirective.md new file mode 100644 index 000000000..3da75204d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMaxLengthValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnMaxLengthValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L73) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnMaxLengthValidatorDirective**(): `IgxColumnMaxLengthValidatorDirective` + +#### Returns + +`IgxColumnMaxLengthValidatorDirective` + +#### Inherited from + +`MaxLengthValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMaxValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMaxValidatorDirective.md new file mode 100644 index 000000000..f811dfb8b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMaxValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnMaxValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L38) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnMaxValidatorDirective**(): `IgxColumnMaxValidatorDirective` + +#### Returns + +`IgxColumnMaxValidatorDirective` + +#### Inherited from + +`MaxValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMinLengthValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMinLengthValidatorDirective.md new file mode 100644 index 000000000..215b2f4dd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMinLengthValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnMinLengthValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L62) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnMinLengthValidatorDirective**(): `IgxColumnMinLengthValidatorDirective` + +#### Returns + +`IgxColumnMinLengthValidatorDirective` + +#### Inherited from + +`MinLengthValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMinValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMinValidatorDirective.md new file mode 100644 index 000000000..c02ab1ea9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMinValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnMinValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L26) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnMinValidatorDirective**(): `IgxColumnMinValidatorDirective` + +#### Returns + +`IgxColumnMinValidatorDirective` + +#### Inherited from + +`MinValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMovingDropDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMovingDropDirective.md new file mode 100644 index 000000000..77533fab0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnMovingDropDirective.md @@ -0,0 +1,430 @@ +# Class: IgxColumnMovingDropDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L13) + +## Extends + +- [`IgxDropDirective`](IgxDropDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnMovingDropDirective**(): `IgxColumnMovingDropDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L54) + +#### Returns + +`IgxColumnMovingDropDirective` + +#### Overrides + +[`IgxDropDirective`](IgxDropDirective.md).[`constructor`](IgxDropDirective.md#constructor) + +## Properties + +### \_dropStrategy + +> `protected` **\_dropStrategy**: [`IDropStrategy`](../interfaces/IDropStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1769](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1769) + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`_dropStrategy`](IgxDropDirective.md#_dropstrategy) + +*** + +### \_renderer + +> `protected` **\_renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1774) + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`_renderer`](IgxDropDirective.md#_renderer) + +*** + +### dropChannel + +> **dropChannel**: `string` \| `number` \| `string`[] \| `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1646](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1646) + +A property that provides a way for igxDrag and igxDrop to be linked through channels. +It accepts single value or an array of values and evaluates then using strict equality. +```html +<div igxDrag [dragChannel]="'odd'"> + <span>95</span> +</div> +<div igxDrop [dropChannel]="['odd', 'irrational']"> + <span>Numbers drop area!</span> +</div> +``` + +#### Memberof + +IgxDropDirective + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`dropChannel`](IgxDropDirective.md#dropchannel) + +*** + +### dropped + +> **dropped**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1751](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1751) + +Event triggered when dragged element is dropped in the area of the element. +Since the `igxDrop` has default logic that appends the dropped element as a child, it can be canceled here. +To cancel the default logic the `cancel` property of the event needs to be set to true. +```html +<div class="cageArea" igxDrop (dropped)="dragDrop()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragDrop(){ + alert("A draggable element has been dropped in the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`dropped`](IgxDropDirective.md#dropped) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1773](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1773) + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`element`](IgxDropDirective.md#element) + +*** + +### enter + +> **enter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1698) + +Event triggered when dragged element enters the area of the element. +```html +<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`enter`](IgxDropDirective.md#enter) + +*** + +### leave + +> **leave**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1732) + +Event triggered when dragged element leaves the area of the element. +```html +<div class="cageArea" igxDrop (leave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragLeave(){ + alert("A draggable element has left the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`leave`](IgxDropDirective.md#leave) + +*** + +### over + +> **over**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1715) + +Event triggered when dragged element enters the area of the element. +```html +<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`over`](IgxDropDirective.md#over) + +## Accessors + +### column + +#### Get Signature + +> **get** **column**(): [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L27) + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md) + +*** + +### data + +#### Set Signature + +> **set** **data**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L18) + +- Save data inside the `igxDrop` directive. This can be set when instancing `igxDrop` on an element. +```html +<div [igxDrop]="{ source: myElement }"></div> +``` + +##### Memberof + +IgxDropDirective + +##### Parameters + +###### val + +[`ColumnType`](../interfaces/ColumnType.md) \| [`IgxForOfDirective`](IgxForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +##### Returns + +`void` + +#### Overrides + +[`IgxDropDirective`](IgxDropDirective.md).[`data`](IgxDropDirective.md#data) + +*** + +### dropStrategy + +#### Get Signature + +> **get** **dropStrategy**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1679](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1679) + +##### Returns + +`any` + +#### Set Signature + +> **set** **dropStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1675](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1675) + +Sets a drop strategy type that will be executed when an `IgxDrag` element is released inside + the current drop area. The provided strategies are: + - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions. + - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`. + - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`. + - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted + at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`. +```html +<div igxDrag> + <span>DragMe</span> +</div> +<div igxDrop [dropStrategy]="myDropStrategy"> + <span>Numbers drop area!</span> +</div> +``` +```typescript +import { IgxAppendDropStrategy } from 'igniteui-angular'; + +export class App { + public myDropStrategy = IgxAppendDropStrategy; +} +``` + +##### Memberof + +IgxDropDirective + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`dropStrategy`](IgxDropDirective.md#dropstrategy) + +*** + +### horizontalScroll + +#### Get Signature + +> **get** **horizontalScroll**(): [`IgxGridForOfDirective`](IgxGridForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L36) + +##### Returns + +[`IgxGridForOfDirective`](IgxGridForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +*** + +### isDropTarget + +#### Get Signature + +> **get** **isDropTarget**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L31) + +##### Returns + +`boolean` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts#L42) + +##### Returns + +`any` + +## Methods + +### getInsertIndexAt() + +> `protected` **getInsertIndexAt**(`draggedDir`, `elementsAtPoint`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1966) + +#### Parameters + +##### draggedDir + +[`IgxDragDirective`](IgxDragDirective.md) + +##### elementsAtPoint + +`any`[] + +#### Returns + +`number` + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`getInsertIndexAt`](IgxDropDirective.md#getinsertindexat) + +*** + +### getWindowScrollLeft() + +> `protected` **getWindowScrollLeft**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1927) + +#### Returns + +`number` + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`getWindowScrollLeft`](IgxDropDirective.md#getwindowscrollleft) + +*** + +### getWindowScrollTop() + +> `protected` **getWindowScrollTop**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1923) + +#### Returns + +`number` + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`getWindowScrollTop`](IgxDropDirective.md#getwindowscrolltop) + +*** + +### isDragLinked() + +> `protected` **isDragLinked**(`drag`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1931) + +#### Parameters + +##### drag + +[`IgxDragDirective`](IgxDragDirective.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxDropDirective`](IgxDropDirective.md).[`isDragLinked`](IgxDropDirective.md#isdraglinked) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnPatternValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnPatternValidatorDirective.md new file mode 100644 index 000000000..bc15431a0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnPatternValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnPatternValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L85) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnPatternValidatorDirective**(): `IgxColumnPatternValidatorDirective` + +#### Returns + +`IgxColumnPatternValidatorDirective` + +#### Inherited from + +`PatternValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnPinningDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnPinningDirective.md new file mode 100644 index 000000000..8b85a11c0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnPinningDirective.md @@ -0,0 +1,31 @@ +# Class: IgxColumnPinningDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts#L10) + +## Extends + +- [`IgxColumnActionsBaseDirective`](IgxColumnActionsBaseDirective.md) + +## Constructors + +### Constructor + +> **new IgxColumnPinningDirective**(): `IgxColumnPinningDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts#L14) + +#### Returns + +`IgxColumnPinningDirective` + +#### Overrides + +[`IgxColumnActionsBaseDirective`](IgxColumnActionsBaseDirective.md).[`constructor`](IgxColumnActionsBaseDirective.md#constructor) + +## Properties + +### columnActions + +> `protected` **columnActions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnRequiredValidatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnRequiredValidatorDirective.md new file mode 100644 index 000000000..473e3c226 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxColumnRequiredValidatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxColumnRequiredValidatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts#L14) + +## Extends + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxColumnRequiredValidatorDirective**(): `IgxColumnRequiredValidatorDirective` + +#### Returns + +`IgxColumnRequiredValidatorDirective` + +#### Inherited from + +`RequiredValidator.constructor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboAddItemDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboAddItemDirective.md new file mode 100644 index 000000000..4f8dacd87 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboAddItemDirective.md @@ -0,0 +1,47 @@ +# Class: IgxComboAddItemDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L138) + +Defines the custom template that will be used to display the `ADD` button + +## Remarks + +To show the `ADD` button, the `allowCustomValues` option must be enabled + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo #combo> + <ng-template igxComboAddItem> + <button type="button" class="combo__add-button"> + Click to add item + </button> + </ng-template> + </igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboAddItemDirective**(): `IgxComboAddItemDirective` + +#### Returns + +`IgxComboAddItemDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboBaseDirective.md new file mode 100644 index 000000000..5bc3db797 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboBaseDirective.md @@ -0,0 +1,2037 @@ +# Abstract Class: IgxComboBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L111) + +## Extended by + +- [`IgxComboComponent`](IgxComboComponent.md) +- [`IgxSimpleComboComponent`](IgxSimpleComboComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxComboBaseDirective**(): `IgxComboBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:987](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L987) + +#### Returns + +`IgxComboBaseDirective` + +## Properties + +### \_data + +> `protected` **\_data**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L953) + +*** + +### \_defaultResourceStrings + +> `protected` **\_defaultResourceStrings**: `PrefixedResourceStrings`\<`IAComboResourceStrings`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:962](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L962) + +*** + +### \_displayKey + +> `protected` **\_displayKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L959) + +*** + +### \_displayValue + +> `protected` **\_displayValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L955) + +*** + +### \_filteredData + +> `protected` **\_filteredData**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L958) + +*** + +### \_groupKey + +> `protected` **\_groupKey**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L956) + +*** + +### \_iconService + +> `protected` **\_iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L120) + +*** + +### \_injector + +> `protected` **\_injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L119) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L118) + +*** + +### \_onChangeCallback + +> `protected` **\_onChangeCallback**: (`_`) => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L967) + +#### Parameters + +##### \_ + +`any` + +#### Returns + +`void` + +*** + +### \_onTouchedCallback + +> `protected` **\_onTouchedCallback**: () => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L966) + +#### Returns + +`void` + +*** + +### \_remoteSelection + +> `protected` **\_remoteSelection**: `object` = `{}` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L960) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `PrefixedResourceStrings` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L961) + +*** + +### \_searchValue + +> `protected` **\_searchValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L957) + +*** + +### \_valid + +> `protected` **\_valid**: [`IgxInputState`](../enumerations/IgxInputState.md) = `IgxInputState.INITIAL` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L963) + +*** + +### \_value + +> `protected` **\_value**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L954) + +*** + +### addItemTemplate + +> **addItemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:671](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L671) + +The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.addItemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboAddItem> + <button type="button" igxButton="contained" class="combo__add-button"> + Click to add item + </button> + </ng-template> + </igx-combo> +``` + +*** + +### addition + +> **addition**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L537) + +Emitted when an item is being added to the data collection + +```html +<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo> +``` + +*** + +### allowCustomValues + +> **allowCustomValues**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L230) + +Controls whether custom values can be added to the collection + +```typescript +// get +let comboAllowsCustomValues = this.combo.allowCustomValues; +``` + +```html +<!--set--> +<igx-combo [allowCustomValues]='true'></igx-combo> +``` + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L444) + +Sets aria-labelledby attribute value. +```html +<igx-combo [ariaLabelledBy]="'label1'"> +``` + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L114) + +*** + +### clearIconTemplate + +> **clearIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:736](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L736) + +The custom template, if any, that should be used when rendering the combo CLEAR button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.clearIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboClearIcon> + <igx-icon>clear</igx-icon> + </ng-template> + </igx-combo> +``` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:527](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L527) + +Emitted after the dropdown is closed + +```html +<igx-combo (closed)='handleClosed($event)'></igx-combo> +``` + +#### Implementation of + +`IgxComboBase.closed` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L517) + +Emitted before the dropdown is closed + +```html +<igx-combo (closing)='handleClosing($event)'></igx-combo> +``` + +#### Implementation of + +`IgxComboBase.closing` + +*** + +### comboAPI + +> `protected` **comboAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L116) + +*** + +### compareCollator + +> `protected` **compareCollator**: `Collator` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L968) + +*** + +### complexTemplate + +> `protected` **complexTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:767](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L767) + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L969) + +*** + +### containerSize + +> `protected` **containerSize**: `any` = `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L951) + +*** + +### dataPreLoad + +> **dataPreLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L557) + +Emitted when new chunk of data is loaded from the virtualization + +```html +<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo> +``` + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L965) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L457) + +Disables the combo. The default is `false`. +```html +<igx-combo [disabled]="'true'"> +``` + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L117) + +*** + +### dropdown + +> `abstract` **dropdown**: `IgxComboDropDownComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:983](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L983) + +*** + +### dropdownContainer + +> `protected` **dropdownContainer**: `ElementRef` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:761](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L761) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L113) + +*** + +### emptyTemplate + +> **emptyTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L694) + +The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.emptyTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboEmpty> + <div class="combo--empty"> + There are no items to display + </div> + </ng-template> + </igx-combo> +``` + +*** + +### filterFunction + +> **filterFunction**: (`collection`, `searchValue`, `filteringOptions`) => `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L435) + +Gets/Sets the custom filtering function of the combo. + +#### Parameters + +##### collection + +`any`[] + +##### searchValue + +`any` + +##### filteringOptions + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +#### Returns + +`any`[] + +#### Example + +```html + <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo> +``` + +*** + +### footerTemplate + +> **footerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L627) + +The custom template, if any, that should be used when rendering the FOOTER for the combo items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.footerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboFooter> + <div class="combo__footer"> + This is a custom footer + </div> + </ng-template> + </igx-combo> +``` + +*** + +### headerItemTemplate + +> **headerItemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L648) + +The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.headerItemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboHeaderItem let-item let-key="groupKey"> + <div class="custom-item--group">Group header for {{ item[key] }}</div> + </ng-template> + </igx-combo> +``` + +*** + +### headerTemplate + +> **headerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L604) + +The custom template, if any, that should be used when rendering the HEADER for the combo items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.headerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboHeader> + <div class="combo__header"> + This is a custom header + </div> + </ng-template> + </igx-combo> +``` + +*** + +### internalSuffixes + +> `protected` **internalSuffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L776) + +*** + +### itemSize + +> `protected` **itemSize**: `any` = `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L952) + +*** + +### itemsWidth + +> **itemsWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L300) + +Configures the drop down list width + +```typescript +// get +let myComboItemsWidth = this.combo.itemsWidth; +``` + +```html +<!--set--> +<igx-combo [itemsWidth] = '"180px"'></igx-combo> +``` + +*** + +### itemTemplate + +> **itemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L581) + +The custom template, if any, that should be used when rendering ITEMS in the combo list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.itemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboItem let-item let-key="valueKey"> + <div class="custom-item"> + <div class="custom-item__name">{{ item[key] }}</div> + <div class="custom-item__cost">{{ item.cost }}</div> + </div> + </ng-template> + </igx-combo> +``` + +*** + +### ngControl + +> `protected` **ngControl**: `NgControl` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L964) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L507) + +Emitted after the dropdown is opened + +```html +<igx-combo (opened)='handleOpened($event)'></igx-combo> +``` + +#### Implementation of + +`IgxComboBase.opened` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L497) + +Emitted before the dropdown is opened + +```html +<igx-combo opening='handleOpening($event)'></igx-combo> +``` + +#### Implementation of + +`IgxComboBase.opening` + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L166) + +Set custom overlay settings that control how the combo's list of items is displayed. +Set: +```html +<igx-combo [overlaySettings]="customOverlaySettings"></igx-combo> +``` + +```typescript + const customSettings = { positionStrategy: { settings: { target: myTarget } } }; + combo.overlaySettings = customSettings; +``` +Get any custom overlay settings used by the combo: +```typescript + const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings; +``` + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L316) + +Defines the placeholder value for the combo value field + +```typescript +// get +let myComboPlaceholder = this.combo.placeholder; +``` + +```html +<!--set--> +<igx-combo [placeholder]='newPlaceHolder'></igx-combo> +``` + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L770) + +*** + +### primitiveTemplate + +> `protected` **primitiveTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L764) + +*** + +### searchInputUpdate + +> **searchInputUpdate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:547](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L547) + +Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.) + +```html +<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo> +``` + +*** + +### selectionChanged + +> `abstract` **selectionChanged**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:985](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L985) + +*** + +### selectionChanging + +> `abstract` **selectionChanging**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:984](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L984) + +*** + +### selectionService + +> `protected` **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L115) + +*** + +### showSearchCaseIcon + +> **showSearchCaseIcon**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L136) + +Defines whether the caseSensitive icon should be shown in the search input + +```typescript +// get +let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon; +``` + +```html +<!--set--> +<igx-combo [showSearchCaseIcon]='true'></igx-combo> +``` + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:773](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L773) + +*** + +### toggleIconTemplate + +> **toggleIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L715) + +The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.toggleIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon> + </ng-template> + </igx-combo> +``` + +*** + +### valueKey + +> **valueKey**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:354](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L354) + +Determines which column in the data source is used to determine the value. + +```typescript +// get +let myComboValueKey = this.combo.valueKey; +``` + +```html +<!--set--> +<igx-combo [valueKey]='myKey'></igx-combo> +``` + +#### Implementation of + +`IgxComboBase.valueKey` + +*** + +### virtDir + +> `protected` **virtDir**: [`IgxForOfDirective`](IgxForOfDirective.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:758](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L758) + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L214) + +Sets the style width of the element + +```typescript +// get +let myComboWidth = this.combo.width; +``` + +```html +<!--set--> +<igx-combo [width]='250px'></igx-combo> +``` + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L881) + +Gets drop down state. + +```typescript +let state = this.combo.collapsed; +``` + +##### Returns + +`boolean` + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L327) + +Combo data source. + +```html +<!--set--> +<igx-combo [data]='items'></igx-combo> +``` + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L330) + +##### Parameters + +###### val + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.data` + +*** + +### disableFiltering + +#### Get Signature + +> **get** **disableFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L142) + +Enables/disables filtering in the list. The default is `false`. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disableFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L145) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### displayKey + +#### Get Signature + +> **get** **displayKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L378) + +Determines which column in the data source is used to determine the display value. + +```typescript +// get +let myComboDisplayKey = this.combo.displayKey; + +// set +this.combo.displayKey = 'val'; + +``` + +```html +<!--set--> +<igx-combo [displayKey]='myDisplayKey'></igx-combo> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayKey**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L357) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +*** + +### displayValue + +#### Get Signature + +> **get** **displayValue**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L847) + +The text displayed in the combo input + +```typescript +// get +let comboDisplayValue = this.combo.displayValue; +``` + +##### Returns + +`string` + +*** + +### filteredData + +#### Get Signature + +> **get** `abstract` **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1406](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1406) + +##### Returns + +`any`[] + +#### Set Signature + +> **set** `abstract` **filteredData**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1407) + +##### Parameters + +###### val + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.filteredData` + +*** + +### filteringOptions + +#### Get Signature + +> **get** **filteringOptions**(): [`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L944) + +Configures the way combo items will be filtered. + +```typescript +// get +let myFilteringOptions = this.combo.filteringOptions; +``` + +```html +<!--set--> +<igx-combo [filteringOptions]='myFilteringOptions'></igx-combo> +``` + +##### Returns + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +#### Set Signature + +> **set** **filteringOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L947) + +##### Parameters + +###### value + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +##### Returns + +`void` + +*** + +### groupKey + +#### Get Signature + +> **get** **groupKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L403) + +The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +```typescript +// get +let currentGroupKey = this.combo.groupKey; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **groupKey**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L391) + +The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +```html +<!--set--> +<igx-combo [groupKey]='newGroupKey'></igx-combo> +``` + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.groupKey` + +*** + +### groupSortingDirection + +#### Get Signature + +> **get** **groupSortingDirection**(): [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L419) + +Sets groups sorting order. + +##### Example + +```html +<igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo> +``` +```typescript +public groupSortingDirection = SortingDirection.Asc; +``` + +##### Returns + +[`SortingDirection`](../enumerations/SortingDirection.md) + +#### Set Signature + +> **set** **groupSortingDirection**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:422](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L422) + +##### Parameters + +###### val + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### Returns + +`void` + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L183) + +Gets/gets combo id. + +```typescript +// get +let id = this.combo.id; +``` + +```html +<!--set--> +<igx-combo [id]='combo1'></igx-combo> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L187) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.id` + +*** + +### itemHeight + +#### Get Signature + +> **get** **itemHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L278) + +Configures the drop down list item height + +```typescript +// get +let myComboItemHeight = this.combo.itemHeight; +``` + +```html +<!--set--> +<igx-combo [itemHeight]='32'></igx-combo> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **itemHeight**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L282) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.itemHeight` + +*** + +### itemsMaxHeight + +#### Get Signature + +> **get** **itemsMaxHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L246) + +Configures the drop down list height + +```typescript +// get +let myComboItemsMaxHeight = this.combo.itemsMaxHeight; +``` + +```html +<!--set--> +<igx-combo [itemsMaxHeight]='320'></igx-combo> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **itemsMaxHeight**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L253) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.itemsMaxHeight` + +*** + +### required + +#### Get Signature + +> **get** `protected` **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1396) + +##### Returns + +`boolean` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:482](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L482) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L485) + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### searchValue + +#### Set Signature + +> **set** **searchValue**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L782) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.searchValue` + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1129) + +Get current selection state + +##### Returns + +`any`[] + +Array of selected items +```typescript +let mySelection = this.combo.selection; +``` + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:893](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L893) + +Gets total count of the virtual data items, when using remote service. + +```typescript +// get +let count = this.combo.totalItemCount; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`count`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L904) + +Sets total count of the virtual data items, when using remote service. + +```typescript +// set +this.combo.totalItemCount(remoteService.count); +``` + +##### Parameters + +###### count + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxComboBase.totalItemCount` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L467) + +Sets the visual combo type. +The allowed values are `line`, `box`, `border` and `search`. The default is `box`. +```html +<igx-combo [type]="'line'"> +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:471](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L471) + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +*** + +### valid + +#### Get Signature + +> **get** **valid**(): [`IgxInputState`](../enumerations/IgxInputState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L810) + +Gets if control is valid, when used in a form + +```typescript +// get +let valid = this.combo.valid; +``` + +##### Returns + +[`IgxInputState`](../enumerations/IgxInputState.md) + +#### Set Signature + +> **set** **valid**(`valid`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L822) + +Sets if control is valid, when used in a form + +```typescript +// set +this.combo.valid = IgxInputState.INVALID; +``` + +##### Parameters + +###### valid + +[`IgxInputState`](../enumerations/IgxInputState.md) + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L835) + +The value of the combo + +```typescript +// get +let comboValue = this.combo.value; +``` + +##### Returns + +`any`[] + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L859) + +Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize` + +```typescript +// get +let state = this.combo.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +#### Set Signature + +> **set** **virtualizationState**(`state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L870) + +Sets the current state of the virtualized data. + +```typescript +// set +this.combo.virtualizationState(state); +``` + +##### Parameters + +###### state + +[`IForOfState`](../interfaces/IForOfState.md) + +##### Returns + +`void` + +## Methods + +### checkMatch() + +> `protected` **checkMatch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1342) + +#### Returns + +`void` + +*** + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1110) + +A method that closes the combo. + +```html +<button type="button" (click)="combo.close()">Close Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +*** + +### convertKeysToItems() + +> `protected` **convertKeysToItems**(`keys`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1330) + +if there is a valueKey - map the keys to data items, else - just return the keys + +#### Parameters + +##### keys + +`any`[] + +#### Returns + +`any`[] + +*** + +### createDisplayText() + +> `abstract` `protected` **createDisplayText**(`newSelection`, `oldSelection`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1421) + +#### Parameters + +##### newSelection + +`any`[] + +##### oldSelection + +`any`[] + +#### Returns + +`any` + +*** + +### deselect() + +> `abstract` **deselect**(...`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1416) + +#### Parameters + +##### args + +\[\] \| \[`any`[], `Event`\] + +#### Returns + +`void` + +#### Implementation of + +`IgxComboBase.deselect` + +*** + +### findMatch() + +> `protected` **findMatch**(`element`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1347) + +#### Parameters + +##### element + +`any` + +#### Returns + +`boolean` + +*** + +### focusSearchInput() + +> `abstract` **focusSearchInput**(`opening?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1411) + +#### Parameters + +##### opening? + +`boolean` + +#### Returns + +`any` + +#### Implementation of + +`IgxComboBase.focusSearchInput` + +*** + +### getRemoteSelection() + +> `protected` **getRemoteSelection**(`newSelection`, `oldSelection`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1383) + +#### Parameters + +##### newSelection + +`any`[] + +##### oldSelection + +`any`[] + +#### Returns + +`string` + +*** + +### getValueDisplayPairs() + +> `protected` **getValueDisplayPairs**(`ids`): `object`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1376](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1376) + +For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]` + +#### Parameters + +##### ids + +`any`[] + +#### Returns + +`object`[] + +*** + +### handleOpened() + +> `abstract` **handleOpened**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1409) + +#### Returns + +`any` + +*** + +### manageRequiredAsterisk() + +> `protected` **manageRequiredAsterisk**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1353) + +#### Returns + +`void` + +*** + +### ngAfterViewChecked() + +> **ngAfterViewChecked**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:993](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L993) + +#### Returns + +`void` + +*** + +### onArrowDown() + +> `abstract` **onArrowDown**(`event`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1410](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1410) + +#### Parameters + +##### event + +`Event` + +#### Returns + +`any` + +*** + +### onStatusChanged() + +> `protected` **onStatusChanged**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1299) + +#### Returns + +`void` + +*** + +### open() + +> **open**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1092](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1092) + +A method that opens the combo. + +```html +<button type="button" (click)="combo.open()">Open Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +*** + +### registerRemoteEntries() + +> `protected` **registerRemoteEntries**(`ids`, `add?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1360) + +Contains key-value pairs of the selected valueKeys and their resp. displayKeys + +#### Parameters + +##### ids + +`any`[] + +##### add? + +`boolean` = `true` + +#### Returns + +`void` + +*** + +### select() + +#### Call Signature + +> `abstract` **select**(`newItem`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1413) + +##### Parameters + +###### newItem + +`any` + +##### Returns + +`void` + +##### Implementation of + +`IgxComboBase.select` + +#### Call Signature + +> `abstract` **select**(`newItems`, `clearCurrentSelection?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1414](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1414) + +##### Parameters + +###### newItems + +`any` + +###### clearCurrentSelection? + +`boolean` + +###### event? + +`Event` + +##### Returns + +`void` + +##### Implementation of + +`IgxComboBase.select` + +*** + +### setSelection() + +> `abstract` `protected` **setSelection**(`newSelection`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1420) + +#### Parameters + +##### newSelection + +`Set`\<`any`\> + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1072) + +A method that opens/closes the combo. + +```html +<button type="button" (click)="combo.toggle()">Toggle Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +*** + +### triggerCheck() + +> **triggerCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1117) + +Triggers change detection on the combo view + +#### Returns + +`void` + +#### Implementation of + +`IgxComboBase.triggerCheck` + +*** + +### writeValue() + +> `abstract` **writeValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1418) + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboClearIconDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboClearIconDirective.md new file mode 100644 index 000000000..07e039d97 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboClearIconDirective.md @@ -0,0 +1,41 @@ +# Class: IgxComboClearIconDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L180) + +Defines the custom template that will be used when rendering the combo's clear icon + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo #combo> + <ng-template igxComboClearIcon> + <igx-icon>clear</igx-icon> + </ng-template> + </igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboClearIconDirective**(): `IgxComboClearIconDirective` + +#### Returns + +`IgxComboClearIconDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboComponent.md new file mode 100644 index 000000000..1ac918e0d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboComponent.md @@ -0,0 +1,2499 @@ +# Class: IgxComboComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L122) + +Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list. + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Remarks + +It provides the ability to filter items as well as perform selection with the provided data. +Additionally, it exposes keyboard navigation and custom styling capabilities. + +## Example + +```html +<igx-combo [itemsMaxHeight]="250" [data]="locationData" + [displayKey]="'field'" [valueKey]="'field'" + placeholder="Location(s)" searchPlaceholder="Search..."> +</igx-combo> +``` + +## Extends + +- [`IgxComboBaseDirective`](IgxComboBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxComboComponent**(): `IgxComboComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L187) + +#### Returns + +`IgxComboComponent` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`constructor`](IgxComboBaseDirective.md#constructor) + +## Properties + +### \_data + +> `protected` **\_data**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L953) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_data`](IgxComboBaseDirective.md#_data) + +*** + +### \_defaultResourceStrings + +> `protected` **\_defaultResourceStrings**: `PrefixedResourceStrings`\<`IAComboResourceStrings`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:962](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L962) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_defaultResourceStrings`](IgxComboBaseDirective.md#_defaultresourcestrings) + +*** + +### \_displayKey + +> `protected` **\_displayKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L959) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_displayKey`](IgxComboBaseDirective.md#_displaykey) + +*** + +### \_displayValue + +> `protected` **\_displayValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L955) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_displayValue`](IgxComboBaseDirective.md#_displayvalue) + +*** + +### \_filteredData + +> `protected` **\_filteredData**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L958) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_filteredData`](IgxComboBaseDirective.md#_filtereddata) + +*** + +### \_groupKey + +> `protected` **\_groupKey**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L956) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_groupKey`](IgxComboBaseDirective.md#_groupkey) + +*** + +### \_iconService + +> `protected` **\_iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L120) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_iconService`](IgxComboBaseDirective.md#_iconservice) + +*** + +### \_injector + +> `protected` **\_injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L119) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_injector`](IgxComboBaseDirective.md#_injector) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L118) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_inputGroupType`](IgxComboBaseDirective.md#_inputgrouptype) + +*** + +### \_onChangeCallback + +> `protected` **\_onChangeCallback**: (`_`) => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L967) + +#### Parameters + +##### \_ + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_onChangeCallback`](IgxComboBaseDirective.md#_onchangecallback) + +*** + +### \_onTouchedCallback + +> `protected` **\_onTouchedCallback**: () => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L966) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_onTouchedCallback`](IgxComboBaseDirective.md#_ontouchedcallback) + +*** + +### \_prevInputValue + +> `protected` **\_prevInputValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L183) + +*** + +### \_remoteSelection + +> `protected` **\_remoteSelection**: `object` = `{}` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L960) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_remoteSelection`](IgxComboBaseDirective.md#_remoteselection) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `PrefixedResourceStrings` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L961) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_resourceStrings`](IgxComboBaseDirective.md#_resourcestrings) + +*** + +### \_searchValue + +> `protected` **\_searchValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L957) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_searchValue`](IgxComboBaseDirective.md#_searchvalue) + +*** + +### \_valid + +> `protected` **\_valid**: [`IgxInputState`](../enumerations/IgxInputState.md) = `IgxInputState.INITIAL` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L963) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_valid`](IgxComboBaseDirective.md#_valid) + +*** + +### \_value + +> `protected` **\_value**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L954) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_value`](IgxComboBaseDirective.md#_value) + +*** + +### addItemTemplate + +> **addItemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:671](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L671) + +The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.addItemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboAddItem> + <button type="button" igxButton="contained" class="combo__add-button"> + Click to add item + </button> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`addItemTemplate`](IgxComboBaseDirective.md#additemtemplate) + +*** + +### addition + +> **addition**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L537) + +Emitted when an item is being added to the data collection + +```html +<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`addition`](IgxComboBaseDirective.md#addition) + +*** + +### allowCustomValues + +> **allowCustomValues**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L230) + +Controls whether custom values can be added to the collection + +```typescript +// get +let comboAllowsCustomValues = this.combo.allowCustomValues; +``` + +```html +<!--set--> +<igx-combo [allowCustomValues]='true'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`allowCustomValues`](IgxComboBaseDirective.md#allowcustomvalues) + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L444) + +Sets aria-labelledby attribute value. +```html +<igx-combo [ariaLabelledBy]="'label1'"> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`ariaLabelledBy`](IgxComboBaseDirective.md#arialabelledby) + +*** + +### autoFocusSearch + +> **autoFocusSearch**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L129) + +Whether the combo's search box should be focused after the dropdown is opened. +When `false`, the combo's list item container will be focused instead + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L114) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`cdr`](IgxComboBaseDirective.md#cdr) + +*** + +### clearIconTemplate + +> **clearIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:736](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L736) + +The custom template, if any, that should be used when rendering the combo CLEAR button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.clearIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboClearIcon> + <igx-icon>clear</igx-icon> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`clearIconTemplate`](IgxComboBaseDirective.md#clearicontemplate) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:527](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L527) + +Emitted after the dropdown is closed + +```html +<igx-combo (closed)='handleClosed($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`closed`](IgxComboBaseDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L517) + +Emitted before the dropdown is closed + +```html +<igx-combo (closing)='handleClosing($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`closing`](IgxComboBaseDirective.md#closing) + +*** + +### comboAPI + +> `protected` **comboAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L116) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`comboAPI`](IgxComboBaseDirective.md#comboapi) + +*** + +### compareCollator + +> `protected` **compareCollator**: `Collator` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L968) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`compareCollator`](IgxComboBaseDirective.md#comparecollator) + +*** + +### complexTemplate + +> `protected` **complexTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:767](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L767) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`complexTemplate`](IgxComboBaseDirective.md#complextemplate) + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L969) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`computedStyles`](IgxComboBaseDirective.md#computedstyles) + +*** + +### containerSize + +> `protected` **containerSize**: `any` = `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L951) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`containerSize`](IgxComboBaseDirective.md#containersize) + +*** + +### dataPreLoad + +> **dataPreLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L557) + +Emitted when new chunk of data is loaded from the virtualization + +```html +<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`dataPreLoad`](IgxComboBaseDirective.md#datapreload) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L965) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`destroy$`](IgxComboBaseDirective.md#destroy) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L457) + +Disables the combo. The default is `false`. +```html +<igx-combo [disabled]="'true'"> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`disabled`](IgxComboBaseDirective.md#disabled) + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L117) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`document`](IgxComboBaseDirective.md#document) + +*** + +### dropdownContainer + +> `protected` **dropdownContainer**: `ElementRef` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:761](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L761) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`dropdownContainer`](IgxComboBaseDirective.md#dropdowncontainer) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L113) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`elementRef`](IgxComboBaseDirective.md#elementref) + +*** + +### emptyTemplate + +> **emptyTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L694) + +The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.emptyTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboEmpty> + <div class="combo--empty"> + There are no items to display + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`emptyTemplate`](IgxComboBaseDirective.md#emptytemplate) + +*** + +### filterFunction + +> **filterFunction**: (`collection`, `searchValue`, `filteringOptions`) => `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L435) + +Gets/Sets the custom filtering function of the combo. + +#### Parameters + +##### collection + +`any`[] + +##### searchValue + +`any` + +##### filteringOptions + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +#### Returns + +`any`[] + +#### Example + +```html + <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`filterFunction`](IgxComboBaseDirective.md#filterfunction) + +*** + +### footerTemplate + +> **footerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L627) + +The custom template, if any, that should be used when rendering the FOOTER for the combo items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.footerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboFooter> + <div class="combo__footer"> + This is a custom footer + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`footerTemplate`](IgxComboBaseDirective.md#footertemplate) + +*** + +### headerItemTemplate + +> **headerItemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L648) + +The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.headerItemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboHeaderItem let-item let-key="groupKey"> + <div class="custom-item--group">Group header for {{ item[key] }}</div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`headerItemTemplate`](IgxComboBaseDirective.md#headeritemtemplate) + +*** + +### headerTemplate + +> **headerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L604) + +The custom template, if any, that should be used when rendering the HEADER for the combo items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.headerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboHeader> + <div class="combo__header"> + This is a custom header + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`headerTemplate`](IgxComboBaseDirective.md#headertemplate) + +*** + +### internalSuffixes + +> `protected` **internalSuffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L776) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`internalSuffixes`](IgxComboBaseDirective.md#internalsuffixes) + +*** + +### itemSize + +> `protected` **itemSize**: `any` = `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L952) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemSize`](IgxComboBaseDirective.md#itemsize) + +*** + +### itemsWidth + +> **itemsWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L300) + +Configures the drop down list width + +```typescript +// get +let myComboItemsWidth = this.combo.itemsWidth; +``` + +```html +<!--set--> +<igx-combo [itemsWidth] = '"180px"'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemsWidth`](IgxComboBaseDirective.md#itemswidth) + +*** + +### itemTemplate + +> **itemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L581) + +The custom template, if any, that should be used when rendering ITEMS in the combo list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.itemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboItem let-item let-key="valueKey"> + <div class="custom-item"> + <div class="custom-item__name">{{ item[key] }}</div> + <div class="custom-item__cost">{{ item.cost }}</div> + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemTemplate`](IgxComboBaseDirective.md#itemtemplate) + +*** + +### ngControl + +> `protected` **ngControl**: `NgControl` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L964) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`ngControl`](IgxComboBaseDirective.md#ngcontrol) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L507) + +Emitted after the dropdown is opened + +```html +<igx-combo (opened)='handleOpened($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`opened`](IgxComboBaseDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L497) + +Emitted before the dropdown is opened + +```html +<igx-combo opening='handleOpening($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`opening`](IgxComboBaseDirective.md#opening) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L166) + +Set custom overlay settings that control how the combo's list of items is displayed. +Set: +```html +<igx-combo [overlaySettings]="customOverlaySettings"></igx-combo> +``` + +```typescript + const customSettings = { positionStrategy: { settings: { target: myTarget } } }; + combo.overlaySettings = customSettings; +``` +Get any custom overlay settings used by the combo: +```typescript + const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings; +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`overlaySettings`](IgxComboBaseDirective.md#overlaysettings) + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L316) + +Defines the placeholder value for the combo value field + +```typescript +// get +let myComboPlaceholder = this.combo.placeholder; +``` + +```html +<!--set--> +<igx-combo [placeholder]='newPlaceHolder'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`placeholder`](IgxComboBaseDirective.md#placeholder) + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L770) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`prefixes`](IgxComboBaseDirective.md#prefixes) + +*** + +### primitiveTemplate + +> `protected` **primitiveTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L764) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`primitiveTemplate`](IgxComboBaseDirective.md#primitivetemplate) + +*** + +### searchInputUpdate + +> **searchInputUpdate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:547](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L547) + +Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.) + +```html +<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`searchInputUpdate`](IgxComboBaseDirective.md#searchinputupdate) + +*** + +### ~~searchPlaceholder~~ + +> **searchPlaceholder**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L147) + +Defines the placeholder value for the combo dropdown search field + +#### Deprecated + +in version 18.2.0. Replaced with values in the localization resource strings. + +```typescript +// get +let myComboSearchPlaceholder = this.combo.searchPlaceholder; +``` + +```html +<!--set--> +<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo> +``` + +*** + +### selectionChanged + +> **selectionChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L167) + +Emitted when item selection is changed, after the selection completes + +```html +<igx-combo (selectionChanged)='handleSelection()'></igx-combo> +``` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selectionChanged`](IgxComboBaseDirective.md#selectionchanged) + +*** + +### selectionChanging + +> **selectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L157) + +Emitted when item selection is changing, before the selection completes + +```html +<igx-combo (selectionChanging)='handleSelection()'></igx-combo> +``` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selectionChanging`](IgxComboBaseDirective.md#selectionchanging) + +*** + +### selectionService + +> `protected` **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L115) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selectionService`](IgxComboBaseDirective.md#selectionservice) + +*** + +### showSearchCaseIcon + +> **showSearchCaseIcon**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L136) + +Defines whether the caseSensitive icon should be shown in the search input + +```typescript +// get +let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon; +``` + +```html +<!--set--> +<igx-combo [showSearchCaseIcon]='true'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`showSearchCaseIcon`](IgxComboBaseDirective.md#showsearchcaseicon) + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:773](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L773) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`suffixes`](IgxComboBaseDirective.md#suffixes) + +*** + +### toggleIconTemplate + +> **toggleIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L715) + +The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.toggleIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`toggleIconTemplate`](IgxComboBaseDirective.md#toggleicontemplate) + +*** + +### valueKey + +> **valueKey**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:354](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L354) + +Determines which column in the data source is used to determine the value. + +```typescript +// get +let myComboValueKey = this.combo.valueKey; +``` + +```html +<!--set--> +<igx-combo [valueKey]='myKey'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`valueKey`](IgxComboBaseDirective.md#valuekey) + +*** + +### virtDir + +> `protected` **virtDir**: [`IgxForOfDirective`](IgxForOfDirective.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:758](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L758) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`virtDir`](IgxComboBaseDirective.md#virtdir) + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L214) + +Sets the style width of the element + +```typescript +// get +let myComboWidth = this.combo.width; +``` + +```html +<!--set--> +<igx-combo [width]='250px'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`width`](IgxComboBaseDirective.md#width) + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L881) + +Gets drop down state. + +```typescript +let state = this.combo.collapsed; +``` + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`collapsed`](IgxComboBaseDirective.md#collapsed) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L327) + +Combo data source. + +```html +<!--set--> +<igx-combo [data]='items'></igx-combo> +``` + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L330) + +##### Parameters + +###### val + +`any`[] + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`data`](IgxComboBaseDirective.md#data) + +*** + +### disableFiltering + +#### Get Signature + +> **get** **disableFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L142) + +Enables/disables filtering in the list. The default is `false`. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disableFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L145) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`disableFiltering`](IgxComboBaseDirective.md#disablefiltering) + +*** + +### displayKey + +#### Get Signature + +> **get** **displayKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L378) + +Determines which column in the data source is used to determine the display value. + +```typescript +// get +let myComboDisplayKey = this.combo.displayKey; + +// set +this.combo.displayKey = 'val'; + +``` + +```html +<!--set--> +<igx-combo [displayKey]='myDisplayKey'></igx-combo> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayKey**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L357) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`displayKey`](IgxComboBaseDirective.md#displaykey) + +*** + +### displayValue + +#### Get Signature + +> **get** **displayValue**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L847) + +The text displayed in the combo input + +```typescript +// get +let comboDisplayValue = this.combo.displayValue; +``` + +##### Returns + +`string` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`displayValue`](IgxComboBaseDirective.md#displayvalue) + +*** + +### filteringOptions + +#### Get Signature + +> **get** **filteringOptions**(): [`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L944) + +Configures the way combo items will be filtered. + +```typescript +// get +let myFilteringOptions = this.combo.filteringOptions; +``` + +```html +<!--set--> +<igx-combo [filteringOptions]='myFilteringOptions'></igx-combo> +``` + +##### Returns + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +#### Set Signature + +> **set** **filteringOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L947) + +##### Parameters + +###### value + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`filteringOptions`](IgxComboBaseDirective.md#filteringoptions) + +*** + +### groupKey + +#### Get Signature + +> **get** **groupKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L403) + +The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +```typescript +// get +let currentGroupKey = this.combo.groupKey; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **groupKey**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L391) + +The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +```html +<!--set--> +<igx-combo [groupKey]='newGroupKey'></igx-combo> +``` + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`groupKey`](IgxComboBaseDirective.md#groupkey) + +*** + +### groupSortingDirection + +#### Get Signature + +> **get** **groupSortingDirection**(): [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L419) + +Sets groups sorting order. + +##### Example + +```html +<igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo> +``` +```typescript +public groupSortingDirection = SortingDirection.Asc; +``` + +##### Returns + +[`SortingDirection`](../enumerations/SortingDirection.md) + +#### Set Signature + +> **set** **groupSortingDirection**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:422](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L422) + +##### Parameters + +###### val + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`groupSortingDirection`](IgxComboBaseDirective.md#groupsortingdirection) + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L183) + +Gets/gets combo id. + +```typescript +// get +let id = this.combo.id; +``` + +```html +<!--set--> +<igx-combo [id]='combo1'></igx-combo> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L187) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`id`](IgxComboBaseDirective.md#id) + +*** + +### itemHeight + +#### Get Signature + +> **get** **itemHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L278) + +Configures the drop down list item height + +```typescript +// get +let myComboItemHeight = this.combo.itemHeight; +``` + +```html +<!--set--> +<igx-combo [itemHeight]='32'></igx-combo> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **itemHeight**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L282) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemHeight`](IgxComboBaseDirective.md#itemheight) + +*** + +### itemsMaxHeight + +#### Get Signature + +> **get** **itemsMaxHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L246) + +Configures the drop down list height + +```typescript +// get +let myComboItemsMaxHeight = this.combo.itemsMaxHeight; +``` + +```html +<!--set--> +<igx-combo [itemsMaxHeight]='320'></igx-combo> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **itemsMaxHeight**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L253) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemsMaxHeight`](IgxComboBaseDirective.md#itemsmaxheight) + +*** + +### required + +#### Get Signature + +> **get** `protected` **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1396) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`required`](IgxComboBaseDirective.md#required) + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:482](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L482) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L485) + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`resourceStrings`](IgxComboBaseDirective.md#resourcestrings) + +*** + +### searchValue + +#### Set Signature + +> **set** **searchValue**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L782) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`searchValue`](IgxComboBaseDirective.md#searchvalue) + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1129) + +Get current selection state + +##### Returns + +`any`[] + +Array of selected items +```typescript +let mySelection = this.combo.selection; +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selection`](IgxComboBaseDirective.md#selection) + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:893](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L893) + +Gets total count of the virtual data items, when using remote service. + +```typescript +// get +let count = this.combo.totalItemCount; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`count`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L904) + +Sets total count of the virtual data items, when using remote service. + +```typescript +// set +this.combo.totalItemCount(remoteService.count); +``` + +##### Parameters + +###### count + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`totalItemCount`](IgxComboBaseDirective.md#totalitemcount) + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L467) + +Sets the visual combo type. +The allowed values are `line`, `box`, `border` and `search`. The default is `box`. +```html +<igx-combo [type]="'line'"> +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:471](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L471) + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`type`](IgxComboBaseDirective.md#type) + +*** + +### valid + +#### Get Signature + +> **get** **valid**(): [`IgxInputState`](../enumerations/IgxInputState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L810) + +Gets if control is valid, when used in a form + +```typescript +// get +let valid = this.combo.valid; +``` + +##### Returns + +[`IgxInputState`](../enumerations/IgxInputState.md) + +#### Set Signature + +> **set** **valid**(`valid`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L822) + +Sets if control is valid, when used in a form + +```typescript +// set +this.combo.valid = IgxInputState.INVALID; +``` + +##### Parameters + +###### valid + +[`IgxInputState`](../enumerations/IgxInputState.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`valid`](IgxComboBaseDirective.md#valid) + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L835) + +The value of the combo + +```typescript +// get +let comboValue = this.combo.value; +``` + +##### Returns + +`any`[] + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`value`](IgxComboBaseDirective.md#value) + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L859) + +Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize` + +```typescript +// get +let state = this.combo.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +#### Set Signature + +> **set** **virtualizationState**(`state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L870) + +Sets the current state of the virtualized data. + +```typescript +// set +this.combo.virtualizationState(state); +``` + +##### Parameters + +###### state + +[`IForOfState`](../interfaces/IForOfState.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`virtualizationState`](IgxComboBaseDirective.md#virtualizationstate) + +## Methods + +### checkMatch() + +> `protected` **checkMatch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1342) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`checkMatch`](IgxComboBaseDirective.md#checkmatch) + +*** + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1110) + +A method that closes the combo. + +```html +<button type="button" (click)="combo.close()">Close Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`close`](IgxComboBaseDirective.md#close) + +*** + +### convertKeysToItems() + +> `protected` **convertKeysToItems**(`keys`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1330) + +if there is a valueKey - map the keys to data items, else - just return the keys + +#### Parameters + +##### keys + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`convertKeysToItems`](IgxComboBaseDirective.md#convertkeystoitems) + +*** + +### createDisplayText() + +> `protected` **createDisplayText**(`newSelection`, `oldSelection`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L456) + +#### Parameters + +##### newSelection + +`any`[] + +##### oldSelection + +`any`[] + +#### Returns + +`string` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`createDisplayText`](IgxComboBaseDirective.md#createdisplaytext) + +*** + +### deselect() + +> **deselect**(`items`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L312) + +Deselect defined items + +#### Parameters + +##### items + +`any`[] + +items to deselected +```typescript +this.combo.deselect(["New York", "New Jersey"]); +``` + +##### event? + +`Event` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`deselect`](IgxComboBaseDirective.md#deselect) + +*** + +### deselectAllItems() + +> **deselectAllItems**(`ignoreFilter?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:341](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L341) + +Deselect all (filtered) items + +#### Parameters + +##### ignoreFilter? + +`boolean` + +if set to true, deselects all items, otherwise deselects only the filtered ones. +```typescript +this.combo.deselectAllItems(); +``` + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### findMatch() + +> `protected` **findMatch**(`element`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1347) + +#### Parameters + +##### element + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`findMatch`](IgxComboBaseDirective.md#findmatch) + +*** + +### getRemoteSelection() + +> `protected` **getRemoteSelection**(`newSelection`, `oldSelection`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1383) + +#### Parameters + +##### newSelection + +`any`[] + +##### oldSelection + +`any`[] + +#### Returns + +`string` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`getRemoteSelection`](IgxComboBaseDirective.md#getremoteselection) + +*** + +### getSearchPlaceholderText() + +> `protected` **getSearchPlaceholderText**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L463) + +#### Returns + +`string` + +*** + +### getValueDisplayPairs() + +> `protected` **getValueDisplayPairs**(`ids`): `object`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1376](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1376) + +For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]` + +#### Parameters + +##### ids + +`any`[] + +#### Returns + +`object`[] + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`getValueDisplayPairs`](IgxComboBaseDirective.md#getvaluedisplaypairs) + +*** + +### manageRequiredAsterisk() + +> `protected` **manageRequiredAsterisk**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1353) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`manageRequiredAsterisk`](IgxComboBaseDirective.md#managerequiredasterisk) + +*** + +### ngAfterViewChecked() + +> **ngAfterViewChecked**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:993](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L993) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`ngAfterViewChecked`](IgxComboBaseDirective.md#ngafterviewchecked) + +*** + +### onArrowDown() + +> **onArrowDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L194) + +#### Parameters + +##### event + +`Event` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`onArrowDown`](IgxComboBaseDirective.md#onarrowdown) + +*** + +### onEscape() + +> **onEscape**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L201) + +#### Parameters + +##### event + +`Event` + +#### Returns + +`void` + +*** + +### onStatusChanged() + +> `protected` **onStatusChanged**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1299) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`onStatusChanged`](IgxComboBaseDirective.md#onstatuschanged) + +*** + +### open() + +> **open**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1092](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1092) + +A method that opens the combo. + +```html +<button type="button" (click)="combo.open()">Open Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`open`](IgxComboBaseDirective.md#open) + +*** + +### registerRemoteEntries() + +> `protected` **registerRemoteEntries**(`ids`, `add?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1360) + +Contains key-value pairs of the selected valueKeys and their resp. displayKeys + +#### Parameters + +##### ids + +`any`[] + +##### add? + +`boolean` = `true` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`registerRemoteEntries`](IgxComboBaseDirective.md#registerremoteentries) + +*** + +### select() + +> **select**(`newItems`, `clearCurrentSelection?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L297) + +Select defined items + +#### Parameters + +##### newItems + +`any`[] + +new items to be selected + +##### clearCurrentSelection? + +`boolean` + +if true clear previous selected items +```typescript +this.combo.select(["New York", "New Jersey"]); +``` + +##### event? + +`Event` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`select`](IgxComboBaseDirective.md#select) + +*** + +### selectAllItems() + +> **selectAllItems**(`ignoreFilter?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L327) + +Select all (filtered) items + +#### Parameters + +##### ignoreFilter? + +`boolean` + +if set to true, selects all items, otherwise selects only the filtered ones. +```typescript +this.combo.selectAllItems(); +``` + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### setSelectedItem() + +> **setSelectedItem**(`itemID`, `select?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:368](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L368) + +Selects/Deselects a single item + +#### Parameters + +##### itemID + +`any` + +the itemID of the specific item + +##### select? + +`boolean` = `true` + +If the item should be selected (true) or deselected (false) + +Without specified valueKey; +```typescript +this.combo.valueKey = null; +const items: { field: string, region: string}[] = data; +this.combo.setSelectedItem(items[0], true); +``` +With specified valueKey; +```typescript +this.combo.valueKey = 'field'; +const items: { field: string, region: string}[] = data; +this.combo.setSelectedItem('Connecticut', true); +``` + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### setSelection() + +> `protected` **setSelection**(`selection`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L408) + +#### Parameters + +##### selection + +`Set`\<`any`\> + +##### event? + +`Event` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`setSelection`](IgxComboBaseDirective.md#setselection) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1072) + +A method that opens/closes the combo. + +```html +<button type="button" (click)="combo.toggle()">Toggle Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`toggle`](IgxComboBaseDirective.md#toggle) + +*** + +### triggerCheck() + +> **triggerCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1117) + +Triggers change detection on the combo view + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`triggerCheck`](IgxComboBaseDirective.md#triggercheck) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboEmptyDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboEmptyDirective.md new file mode 100644 index 000000000..c9c5466e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboEmptyDirective.md @@ -0,0 +1,43 @@ +# Class: IgxComboEmptyDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L92) + +Defines the custom template that will be displayed when the combo's list is empty + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo> + <ng-template igxComboEmpty> + <div class="combo--empty"> + There are no items to display + </div> + </ng-template> + </igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboEmptyDirective**(): `IgxComboEmptyDirective` + +#### Returns + +`IgxComboEmptyDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboFooterDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboFooterDirective.md new file mode 100644 index 000000000..5e971f7a3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboFooterDirective.md @@ -0,0 +1,42 @@ +# Class: IgxComboFooterDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L45) + +Allows a custom element to be added at the end of the combo list. + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo> + <ng-template igxComboFooter> + <div class="footer-class">Custom footer</div> + <img src=""/> + </ng-template> +</igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboFooterDirective**(): `IgxComboFooterDirective` + +#### Returns + +`IgxComboFooterDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboHeaderDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboHeaderDirective.md new file mode 100644 index 000000000..bfff81189 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboHeaderDirective.md @@ -0,0 +1,42 @@ +# Class: IgxComboHeaderDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L23) + +Allows a custom element to be added at the beginning of the combo list. + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo> + <ng-template igxComboHeader> + <div class="header-class">Custom header</div> + <img src=""/> + </ng-template> +</igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboHeaderDirective**(): `IgxComboHeaderDirective` + +#### Returns + +`IgxComboHeaderDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboHeaderItemDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboHeaderItemDirective.md new file mode 100644 index 000000000..afee34026 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboHeaderItemDirective.md @@ -0,0 +1,41 @@ +# Class: IgxComboHeaderItemDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L113) + +Defines the custom template that will be used when rendering header items for groups in the combo's list + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo> + <ng-template igxComboHeaderItem let-item let-key="groupKey"> + <div class="custom-item--group">Group header for {{ item[key] }}</div> + </ng-template> + </igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboHeaderItemDirective**(): `IgxComboHeaderItemDirective` + +#### Returns + +`IgxComboHeaderItemDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboItemDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboItemDirective.md new file mode 100644 index 000000000..afc77cf4b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboItemDirective.md @@ -0,0 +1,44 @@ +# Class: IgxComboItemDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L69) + +Allows the combo's items to be modified with a custom template + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo> + <ng-template igxComboItem let-display let-key="valueKey"> + <div class="item"> + <span class="state">State: {{ display[key] }}</span> + <span class="region">Region: {{ display.region }}</span> + </div> + </ng-template> + * </igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboItemDirective**(): `IgxComboItemDirective` + +#### Returns + +`IgxComboItemDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboToggleIconDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboToggleIconDirective.md new file mode 100644 index 000000000..e9eb9a2d9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxComboToggleIconDirective.md @@ -0,0 +1,41 @@ +# Class: IgxComboToggleIconDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.directives.ts#L159) + +The custom template that will be used when rendering the combo's toggle button + +## Igx Module + +IgxComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, combo selection + +## Igx Group + +Grids & Lists + +## Example + +```ts +<igx-combo #combo> + <ng-template igxComboToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon> + </ng-template> + </igx-combo> +``` + +## Constructors + +### Constructor + +> **new IgxComboToggleIconDirective**(): `IgxComboToggleIconDirective` + +#### Returns + +`IgxComboToggleIconDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCsvExporterOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCsvExporterOptions.md new file mode 100644 index 000000000..0ed329ce8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCsvExporterOptions.md @@ -0,0 +1,395 @@ +# Class: IgxCsvExporterOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L6) + +Objects of this class are used to configure the CSV exporting process. + +## Extends + +- [`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +## Constructors + +### Constructor + +> **new IgxCsvExporterOptions**(`fileName`, `fileType`): `IgxCsvExporterOptions` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L11) + +#### Parameters + +##### fileName + +`string` + +##### fileType + +[`CsvFileTypes`](../enumerations/CsvFileTypes.md) + +#### Returns + +`IgxCsvExporterOptions` + +#### Overrides + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`constructor`](IgxExporterOptionsBase.md#constructor) + +## Properties + +### \_fileExtension + +> `protected` **\_fileExtension**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L105) + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`_fileExtension`](IgxExporterOptionsBase.md#_fileextension) + +*** + +### alwaysExportHeaders + +> **alwaysExportHeaders**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L101) + +Specifies whether the headers should be exported if there is no data. +```typescript +let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders; +this.exportOptions.alwaysExportHeaders = false; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`alwaysExportHeaders`](IgxExporterOptionsBase.md#alwaysexportheaders) + +*** + +### exportSummaries + +> **exportSummaries**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L79) + +Specifies whether the exported data should include column summaries. +```typescript +let exportSummaries = this.exportOptions.exportSummaries; +this.exportOptions.exportSummaries = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`exportSummaries`](IgxExporterOptionsBase.md#exportsummaries) + +*** + +### freezeHeaders + +> **freezeHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L90) + +Specifies whether the exported data should have frozen headers. +```typescript +let freezeHeaders = this.exportOptions.freezeHeaders; +this.exportOptions.freezeHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`freezeHeaders`](IgxExporterOptionsBase.md#freezeheaders) + +*** + +### ignoreColumnsOrder + +> **ignoreColumnsOrder**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L33) + +Specifies if the exporter should ignore the current column order in the IgxGrid. +```typescript +let ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder; +this.exportOptions.ignoreColumnsOrder = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreColumnsOrder`](IgxExporterOptionsBase.md#ignorecolumnsorder) + +*** + +### ignoreColumnsVisibility + +> **ignoreColumnsVisibility**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L11) + +Specifies whether hidden columns should be exported. +```typescript +let ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility; +this.exportOptions.ignoreColumnsVisibility = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreColumnsVisibility`](IgxExporterOptionsBase.md#ignorecolumnsvisibility) + +*** + +### ignoreFiltering + +> **ignoreFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L22) + +Specifies whether filtered out rows should be exported. +```typescript +let ignoreFiltering = this.exportOptions.ignoreFiltering; +this.exportOptions.ignoreFiltering = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreFiltering`](IgxExporterOptionsBase.md#ignorefiltering) + +*** + +### ignoreGrouping + +> **ignoreGrouping**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L57) + +Specifies whether the exported data should be grouped as in the provided IgxGrid. +```typescript +let ignoreGrouping = this.exportOptions.ignoreGrouping; +this.exportOptions.ignoreGrouping = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreGrouping`](IgxExporterOptionsBase.md#ignoregrouping) + +*** + +### ignoreMultiColumnHeaders + +> **ignoreMultiColumnHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L68) + +Specifies whether the exported data should include multi column headers as in the provided IgxGrid. +```typescript +let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders; +this.exportOptions.ignoreMultiColumnHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreMultiColumnHeaders`](IgxExporterOptionsBase.md#ignoremulticolumnheaders) + +*** + +### ignoreSorting + +> **ignoreSorting**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L46) + +Specifies whether the exported data should be sorted as in the provided IgxGrid. +When you export grouped data, setting ignoreSorting to true will cause +the grouping to fail because it relies on the sorting of the records. +```typescript +let ignoreSorting = this.exportOptions.ignoreSorting; +this.exportOptions.ignoreSorting = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreSorting`](IgxExporterOptionsBase.md#ignoresorting) + +## Accessors + +### fileName + +#### Get Signature + +> **get** **fileName**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L121) + +Gets the file name which will be used for the exporting operation. +```typescript +let fileName = this.exportOptions.fileName; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Returns + +`string` + +#### Set Signature + +> **set** **fileName**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L133) + +Sets the file name which will be used for the exporting operation. +```typescript +this.exportOptions.fileName = 'exportedData01'; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`fileName`](IgxExporterOptionsBase.md#filename) + +*** + +### fileType + +#### Get Signature + +> **get** **fileType**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L67) + +Gets the CSV export format. +```typescript +let filetype = this.exportOptions.fileType; +``` + +##### Memberof + +IgxCsvExporterOptions + +##### Returns + +`any` + +#### Set Signature + +> **set** **fileType**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L79) + +Sets the CSV export format. +```typescript +this.exportOptions.fileType = CsvFileTypes.TAB; +``` + +##### Memberof + +IgxCsvExporterOptions + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +*** + +### valueDelimiter + +#### Get Signature + +> **get** **valueDelimiter**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L43) + +Gets the value delimiter which will be used for the exporting operation. +```typescript +let delimiter = this.exportOptions.valueDelimiter; +``` + +##### Memberof + +IgxCsvExporterOptions + +##### Returns + +`any` + +#### Set Signature + +> **set** **valueDelimiter**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L55) + +Sets a value delimiter which will overwrite the default delimiter of the selected export format. +```typescript +this.exportOptions.valueDelimiter = '|'; +``` + +##### Memberof + +IgxCsvExporterOptions + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCsvExporterService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCsvExporterService.md new file mode 100644 index 000000000..1c065dadf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCsvExporterService.md @@ -0,0 +1,247 @@ +# Class: IgxCsvExporterService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts#L37) + +**Ignite UI for Angular CSV Exporter Service** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-csv) + +The Ignite UI for Angular CSV Exporter service can export data in a Character Separated Values format from +both raw data (array) or from an `IgxGrid`. + +Example: +```typescript +public localData = [ + { Name: "Eric Ridley", Age: "26" }, + { Name: "Alanis Brook", Age: "22" }, + { Name: "Jonathan Morris", Age: "23" } +]; + +constructor(private csvExportService: IgxCsvExporterService) { +} + +const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions("FileName", CsvFileTypes.CSV); +this.csvExportService.exportData(this.localData, opt); +``` + +## Extends + +- [`IgxBaseExporter`](IgxBaseExporter.md) + +## Constructors + +### Constructor + +> **new IgxCsvExporterService**(): `IgxCsvExporterService` + +#### Returns + +`IgxCsvExporterService` + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`constructor`](IgxBaseExporter.md#constructor) + +## Properties + +### \_ownersMap + +> `protected` **\_ownersMap**: `Map`\<`any`, [`IColumnList`](../interfaces/IColumnList.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L205) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`_ownersMap`](IgxBaseExporter.md#_ownersmap) + +*** + +### \_sort + +> `protected` **\_sort**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L203) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`_sort`](IgxBaseExporter.md#_sort) + +*** + +### columnExporting + +> **columnExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L201) + +This event is emitted when a column is exported. +```typescript +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`columnExporting`](IgxBaseExporter.md#columnexporting) + +*** + +### exportEnded + +> **exportEnded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts#L48) + +This event is emitted when the export process finishes. +```typescript +this.exporterService.exportEnded.subscribe((args: ICsvExportEndedEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxCsvExporterService + +#### Overrides + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportEnded`](IgxBaseExporter.md#exportended) + +*** + +### pivotGridFilterFieldsCount + +> `protected` **pivotGridFilterFieldsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L204) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`pivotGridFilterFieldsCount`](IgxBaseExporter.md#pivotgridfilterfieldscount) + +*** + +### rowExporting + +> **rowExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L189) + +This event is emitted when a row is exported. +```typescript +this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`rowExporting`](IgxBaseExporter.md#rowexporting) + +## Methods + +### export() + +> **export**(`grid`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L228) + +Method for exporting IgxGrid component's data. +```typescript +this.exporterService.export(this.igxGridForExport, this.exportOptions); +``` + +#### Parameters + +##### grid + +`any` + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`export`](IgxBaseExporter.md#export) + +*** + +### exportData() + +> **exportData**(`data`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L287) + +Method for exporting any kind of array data. +```typescript +this.exporterService.exportData(this.arrayForExport, this.exportOptions); +``` + +#### Parameters + +##### data + +`any`[] + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportData`](IgxBaseExporter.md#exportdata) + +*** + +### exportDataImplementation() + +> `protected` **exportDataImplementation**(`data`, `options`, `done`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts#L52) + +#### Parameters + +##### data + +[`IExportRecord`](../interfaces/IExportRecord.md)[] + +##### options + +[`IgxCsvExporterOptions`](IgxCsvExporterOptions.md) + +##### done + +() => `void` + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportDataImplementation`](IgxBaseExporter.md#exportdataimplementation) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCurrencyFormatterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCurrencyFormatterPipe.md new file mode 100644 index 000000000..6e88fbbab --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxCurrencyFormatterPipe.md @@ -0,0 +1,51 @@ +# Class: IgxCurrencyFormatterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L45) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxCurrencyFormatterPipe**(): `IgxCurrencyFormatterPipe` + +#### Returns + +`IgxCurrencyFormatterPipe` + +## Methods + +### transform() + +> **transform**(`value`, `currencyCode?`, `display?`, `digitsInfo?`, `locale?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L48) + +#### Parameters + +##### value + +`string` \| `number` + +##### currencyCode? + +`string` + +##### display? + +`string` + +##### digitsInfo? + +`string` + +##### locale? + +`string` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDataLoadingTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDataLoadingTemplateDirective.md new file mode 100644 index 000000000..0f5cd9f64 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDataLoadingTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxDataLoadingTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L44) + +## Constructors + +### Constructor + +> **new IgxDataLoadingTemplateDirective**(): `IgxDataLoadingTemplateDirective` + +#### Returns + +`IgxDataLoadingTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L45) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDataRecordSorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDataRecordSorting.md new file mode 100644 index 000000000..89bf8f5be --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDataRecordSorting.md @@ -0,0 +1,97 @@ +# Class: IgxDataRecordSorting + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L378) + +Represents a class extending the IgxSorting class +Provides custom data record sorting. + +## Extends + +- [`IgxSorting`](IgxSorting.md) + +## Constructors + +### Constructor + +> **new IgxDataRecordSorting**(): `IgxDataRecordSorting` + +#### Returns + +`IgxDataRecordSorting` + +#### Inherited from + +[`IgxSorting`](IgxSorting.md).[`constructor`](IgxSorting.md#constructor) + +## Methods + +### getFieldValue() + +> `protected` **getFieldValue**(`obj`, `key`, `isDate?`, `isTime?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L383) + +Overrides the base method to retrieve the field value from the data object instead of the record object. +Returns the value of the specified field in the data object. + +#### Parameters + +##### obj + +`any` + +##### key + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +#### Returns + +`any` + +#### Overrides + +`IgxSorting.getFieldValue` + +*** + +### sort() + +> **sort**(`data`, `expressions`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L90) + +Sorts the provided data based on the given sorting expressions. +`data`: The array of data to be sorted. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxSorting`](IgxSorting.md).[`sort`](IgxSorting.md#sort) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateFilteringOperand.md new file mode 100644 index 000000000..68de703bc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateFilteringOperand.md @@ -0,0 +1,217 @@ +# Class: IgxDateFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L210) + +Provides filtering operations for Dates + +## Export + +## Extends + +- `IgxBaseDateTimeFilteringOperand` + +## Constructors + +### Constructor + +> `protected` **new IgxDateFilteringOperand**(): `IgxDateFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L211) + +#### Returns + +`IgxDateFilteringOperand` + +#### Overrides + +`IgxBaseDateTimeFilteringOperand.constructor` + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.operations` + +*** + +### \_instance + +> `protected` `static` **\_instance**: [`IgxFilteringOperand`](IgxFilteringOperand.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand._instance` + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.append` + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.condition` + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.conditionList` + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L418) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +#### Overrides + +`IgxBaseDateTimeFilteringOperand.findValueInSet` + +*** + +### validateInputData() + +> `protected` **validateInputData**(`target`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L197) + +#### Parameters + +##### target + +`Date` + +#### Returns + +`void` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.validateInputData` + +*** + +### getDateParts() + +> `static` **getDateParts**(`date`, `dateFormat?`): [`IDateParts`](../interfaces/IDateParts.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L153) + +Splits a Date object into parts + +#### Parameters + +##### date + +`Date` + +##### dateFormat? + +`string` + +#### Returns + +[`IDateParts`](../interfaces/IDateParts.md) + +#### Memberof + +IgxDateFilteringOperand + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.getDateParts` + +*** + +### instance() + +> `static` **instance**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.instance` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateFormatterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateFormatterPipe.md new file mode 100644 index 000000000..aab8b954d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateFormatterPipe.md @@ -0,0 +1,47 @@ +# Class: IgxDateFormatterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L8) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDateFormatterPipe**(): `IgxDateFormatterPipe` + +#### Returns + +`IgxDateFormatterPipe` + +## Methods + +### transform() + +> **transform**(`value`, `format?`, `timezone?`, `locale?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L12) + +#### Parameters + +##### value + +`string` \| `number` \| `Date` + +##### format? + +`string` + +##### timezone? + +`string` + +##### locale? + +`string` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDatePickerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDatePickerComponent.md new file mode 100644 index 000000000..e09a8de13 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDatePickerComponent.md @@ -0,0 +1,1568 @@ +# Class: IgxDatePickerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L108) + +Date Picker displays a popup calendar that lets users select a single date. + +## Igx Module + +IgxDatePickerModule + +## Igx Theme + +igx-calendar-theme, igx-icon-theme + +## Igx Group + +Scheduling + +## Igx Keywords + +datepicker, calendar, schedule, date + +## Example + +```html +<igx-date-picker [(ngModel)]="selectedDate"></igx-date-picker> +``` + +## Extends + +- [`PickerBaseDirective`](PickerBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDatePickerComponent**(): `IgxDatePickerComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L531) + +#### Returns + +`IgxDatePickerComponent` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`constructor`](PickerBaseDirective.md#constructor) + +## Properties + +### \_collapsed + +> `protected` **\_collapsed**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L297) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_collapsed`](PickerBaseDirective.md#_collapsed) + +*** + +### \_defaultLocale + +> `protected` **\_defaultLocale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L294) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_defaultLocale`](PickerBaseDirective.md#_defaultlocale) + +*** + +### \_destroy$ + +> `protected` **\_destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:333](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L333) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_destroy$`](PickerBaseDirective.md#_destroy) + +*** + +### \_displayFormat + +> `protected` **\_displayFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:296](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L296) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_displayFormat`](PickerBaseDirective.md#_displayformat) + +*** + +### \_inputFormat + +> `protected` **\_inputFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:295](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L295) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_inputFormat`](PickerBaseDirective.md#_inputformat) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L33) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_inputGroupType`](PickerBaseDirective.md#_inputgrouptype) + +*** + +### \_locale + +> `protected` **\_locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L293) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_locale`](PickerBaseDirective.md#_locale) + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L32) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_localeId`](PickerBaseDirective.md#_localeid) + +*** + +### \_maxValue + +> `protected` **\_maxValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L300) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_maxValue`](PickerBaseDirective.md#_maxvalue) + +*** + +### \_minValue + +> `protected` **\_minValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L299) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_minValue`](PickerBaseDirective.md#_minvalue) + +*** + +### \_type + +> `protected` **\_type**: [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L298) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_type`](PickerBaseDirective.md#_type) + +*** + +### \_weekStart + +> `protected` **\_weekStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L301) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_weekStart`](PickerBaseDirective.md#_weekstart) + +*** + +### calendarFormat + +> **calendarFormat**: [`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L334) + +Gets/Sets the format options of the `IgxDatePickerComponent`. + +#### Example + +```typescript +this.datePicker.calendarFormat = {day: "numeric", month: "long", weekday: "long", year: "numeric"}; +``` + +*** + +### cancelButtonLabel + +> **cancelButtonLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L221) + +Gets/Sets the cancel button's label. + +#### Example + +```html +<igx-date-picker cancelButtonLabel="Cancel"></igx-date-picker> +``` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L274) + +Emitted after the calendar has closed. + +#### Example + +```html +<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`closed`](PickerBaseDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L263) + +Emitted when the calendar has started closing, cancelable. + +#### Example + +```html +<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`closing`](PickerBaseDirective.md#closing) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L144) + +Enables or disables the picker. + +#### Example + +```html +<igx-date-picker [disabled]="'true'"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`disabled`](PickerBaseDirective.md#disabled) + +*** + +### displayMonthsCount + +> **displayMonthsCount**: `number` = `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L152) + +Gets/Sets the number of month views displayed. + +#### Remarks + +Default value is `1`. + +#### Examples + +```html +<igx-date-picker [displayMonthsCount]="2"></igx-date-picker> +``` + +```typescript +let monthViewsDisplayed = this.datePicker.displayMonthsCount; +``` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L31) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`element`](PickerBaseDirective.md#element) + +*** + +### formatter + +> **formatter**: (`val`) => `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L199) + +Gets/Sets a custom formatter function on the selected or passed date. + +#### Parameters + +##### val + +`Date` + +#### Returns + +`string` + +#### Example + +```html +<igx-date-picker [value]="date" [formatter]="formatter"></igx-date-picker> +``` + +*** + +### formatViews + +> **formatViews**: [`IFormattingViews`](../interfaces/IFormattingViews.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L287) + +Gets/Sets the format views of the `IgxDatePickerComponent`. + +#### Example + +```typescript +let formatViews = this.datePicker.formatViews; + this.datePicker.formatViews = {day:false, month: false, year:false}; +``` + +*** + +### headerOrientation + +> **headerOrientation**: [`PickerHeaderOrientation`](../type-aliases/PickerHeaderOrientation.md) = `PickerHeaderOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L111) + +Gets/Sets the orientation of the `IgxDatePickerComponent` header. + +#### Example + +```html +<igx-date-picker headerOrientation="vertical"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`headerOrientation`](PickerBaseDirective.md#headerorientation) + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L122) + +Gets/Sets whether the header is hidden in dialog mode. + +#### Example + +```html +<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`hideHeader`](PickerBaseDirective.md#hideheader) + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L134) + +Gets/Sets whether the inactive dates will be hidden. + +#### Remarks + +Applies to dates that are out of the current month. +Default value is `false`. + +#### Examples + +```html +<igx-date-picker [hideOutsideDays]="true"></igx-date-picker> +``` + +```typescript +let hideOutsideDays = this.datePicker.hideOutsideDays; +``` + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L34) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`i18nFormatter`](PickerBaseDirective.md#i18nformatter) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L273) + +Gets/Sets the value of `id` attribute. + +#### Remarks + +If not provided it will be automatically generated. + +#### Example + +```html +<igx-date-picker [id]="'igx-date-picker-3'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker> +``` + +*** + +### inputGroup + +> `protected` **inputGroup**: [`IgxInputGroupComponent`](IgxInputGroupComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L291) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`inputGroup`](PickerBaseDirective.md#inputgroup) + +*** + +### mode + +> **mode**: [`PickerInteractionMode`](../type-aliases/PickerInteractionMode.md) = `PickerInteractionMode.DropDown` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L100) + +Can be `dropdown` with editable input field or `dialog` with readonly input field. + +#### Remarks + +Default mode is `dropdown` + +#### Example + +```html +<igx-date-picker mode="dialog"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`mode`](PickerBaseDirective.md#mode) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L252) + +Emitted after the calendar has opened. + +#### Example + +```html +<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`opened`](PickerBaseDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L241) + +Emitted when the calendar has started opening, cancelable. + +#### Example + +```html +<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`opening`](PickerBaseDirective.md#opening) + +*** + +### orientation + +> **orientation**: [`PickerCalendarOrientation`](../type-aliases/PickerCalendarOrientation.md) = `PickerCalendarOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L161) + +Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view. + +#### Example + +```ts +<igx-date-picker orientation="vertical"></igx-date-picker> +``` + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L260) + +Gets/Sets the container used for the popup element. + +#### Remarks + +`outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. + +#### Example + +```html +<div igxOverlayOutlet #outlet="overlay-outlet"></div> +//.. +<igx-date-picker [outlet]="outlet"></igx-date-picker> +//.. +``` + +#### Overrides + +[`IgxTimePickerComponent`](IgxTimePickerComponent.md).[`outlet`](IgxTimePickerComponent.md#outlet) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L133) + +Overlay settings used to display the pop-up element. + +#### Example + +```html +<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`overlaySettings`](PickerBaseDirective.md#overlaysettings) + +*** + +### placeholder + +> **placeholder**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L86) + +Sets the `placeholder` of the picker's input. + +#### Example + +```html +<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`placeholder`](PickerBaseDirective.md#placeholder) + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L285) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`prefixes`](PickerBaseDirective.md#prefixes) + +*** + +### resourceStrings + +> **resourceStrings**: `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L397) + +Gets/Sets the resource strings for the picker's default toggle icon. +By default it uses EN resources. + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L172) + +Show/hide week numbers + +#### Example + +```html +<igx-date-picker [showWeekNumbers]="true"></igx-date-picker> +`` + +*** + +### spinDelta + +> **spinDelta**: `Pick`\<[`DatePartDeltas`](../interfaces/DatePartDeltas.md), `"date"` \| `"month"` \| `"year"`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:244](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L244) + +Delta values used to increment or decrement each editor date part on spin actions. +All values default to `1`. + +#### Example + +```html +<igx-date-picker [spinDelta]="{ date: 5, month: 2 }"></igx-date-picker> +``` + +*** + +### spinLoop + +> **spinLoop**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:232](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L232) + +Specify if the currently spun date segment should loop over. + +#### Example + +```html +<igx-date-picker [spinLoop]="false"></igx-date-picker> +``` + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:288](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L288) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`suffixes`](PickerBaseDirective.md#suffixes) + +*** + +### tabIndex + +> **tabIndex**: `string` \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L230) + +Gets/Sets the default template editor's tabindex. + +#### Example + +```html +<igx-date-picker [tabIndex]="1"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`tabIndex`](PickerBaseDirective.md#tabindex) + +*** + +### todayButtonLabel + +> **todayButtonLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L210) + +Gets/Sets the today button's label. + +#### Example + +```html +<igx-date-picker todayButtonLabel="Today"></igx-date-picker> +``` + +*** + +### validationFailed + +> **validationFailed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:426](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L426) + +Emitted when the user types/spins invalid date in the date-picker editor. + +#### Example + +```html +<igx-date-picker (validationFailed)="onValidationFailed($event)"></igx-date-picker> +``` + +*** + +### valueChange + +> **valueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:415](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L415) + +Emitted when the picker's value changes. + +#### Remarks + +Used for `two-way` bindings. + +#### Example + +```html +<igx-date-picker [(value)]="date"></igx-date-picker> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`valueChange`](PickerBaseDirective.md#valuechange) + +## Accessors + +### activeDate + +#### Get Signature + +> **get** **activeDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L180) + +Gets/Sets the date which is shown in the calendar picker and is highlighted. +By default it is the current date, or the value of the picker, if set. + +##### Returns + +`Date` + +#### Set Signature + +> **set** **activeDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L186) + +##### Parameters + +###### value + +`Date` + +##### Returns + +`void` + +*** + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L312) + +Gets the picker's pop-up state. + +##### Example + +```typescript +const state = this.picker.collapsed; +``` + +##### Returns + +`boolean` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`collapsed`](PickerBaseDirective.md#collapsed) + +*** + +### disabledDates + +#### Get Signature + +> **get** **disabledDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L299) + +Gets/Sets the disabled dates descriptors. + +##### Example + +```typescript +let disabledDates = this.datepicker.disabledDates; +this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...]; +``` + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **disabledDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L302) + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +*** + +### displayFormat + +#### Get Signature + +> **get** **displayFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L73) + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L69) + +The format used to display the picker's value when it's not being edited. + +##### Remarks + +Uses Angular's DatePipe. + +##### Example + +```html +<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`displayFormat`](PickerBaseDirective.md#displayformat) + +*** + +### inputFormat + +#### Get Signature + +> **get** **inputFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L52) + +##### Returns + +`string` + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L48) + +The editor's input mask. + +##### Remarks + +Also used as a placeholder when none is provided. + +##### Example + +```html +<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`inputFormat`](PickerBaseDirective.md#inputformat) + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L157) + +Gets the `locale` of the date-picker. +If not set, defaults to applciation's locale.. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L165) + +Sets the `locale` of the date-picker. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`locale`](PickerBaseDirective.md#locale) + +*** + +### maxValue + +#### Get Signature + +> **get** **maxValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:388](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L388) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **maxValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L383) + +The maximum value the picker will accept. + +##### Example + +```ts +<igx-date-picker [maxValue]="maxDate"></igx-date-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### minValue + +#### Get Signature + +> **get** **minValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:372](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L372) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **minValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:367](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L367) + +The minimum value the picker will accept. + +##### Example + +```ts +<igx-date-picker [minValue]="minDate"></igx-date-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### specialDates + +#### Get Signature + +> **get** **specialDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L317) + +Gets/Sets the special dates descriptors. + +##### Example + +```typescript +let specialDates = this.datepicker.specialDates; +this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ]; +``` + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **specialDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L320) + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +*** + +### toggleContainer + +#### Get Signature + +> **get** `protected` **toggleContainer**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:552](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L552) + +##### Returns + +`HTMLElement` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`toggleContainer`](PickerBaseDirective.md#togglecontainer) + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L217) + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L214) + +Determines how the picker's input will be styled. + +##### Remarks + +Default is `box`. + +##### Example + +```html +<igx-date-picker [type]="'line'"></igx-date-picker> +``` + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`type`](PickerBaseDirective.md#type) + +*** + +### value + +#### Get Signature + +> **get** **value**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L347) + +Gets/Sets the selected date. + +##### Example + +```html +<igx-date-picker [value]="date"></igx-date-picker> +``` + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **value**(`date`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:350](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L350) + +##### Parameters + +###### date + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L176) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L184) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`weekStart`](PickerBaseDirective.md#weekstart) + +## Methods + +### clear() + +> **clear**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L685) + +Clears the input field and the picker's value. + +#### Returns + +`void` + +#### Example + +```typescript +this.datePicker.clear(); +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`clear`](PickerBaseDirective.md#clear) + +*** + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L636) + +Closes the picker's dropdown or dialog. + +#### Returns + +`void` + +#### Example + +```html +<igx-date-picker #picker></igx-date-picker> + +<button type="button" igxButton (click)="picker.close()">Close Dialog</button> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`close`](PickerBaseDirective.md#close) + +*** + +### decrement() + +> **decrement**(`datePart?`, `delta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:716](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L716) + +Decrement a specified `DatePart` + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +The optional DatePart to decrement. Defaults to Date. + +##### delta? + +`number` + +The optional delta to decrement by. Overrides `spinDelta`. + +#### Returns + +`void` + +#### Example + +```typescript +this.datePicker.decrement(DatePart.Date); +``` + +*** + +### increment() + +> **increment**(`datePart?`, `delta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:702](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L702) + +Increment a specified `DatePart`. + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +The optional DatePart to increment. Defaults to Date. + +##### delta? + +`number` + +The optional delta to increment by. Overrides `spinDelta`. + +#### Returns + +`void` + +#### Example + +```typescript +this.datePicker.increment(DatePart.Date); +``` + +*** + +### initLocale() + +> `protected` **initLocale**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L385) + +#### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`initLocale`](PickerBaseDirective.md#initlocale) + +*** + +### onResourceChange() + +> `protected` **onResourceChange**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L391) + +#### Parameters + +##### args + +`CustomEvent`\<`IResourceChangeEventArgs`\> + +#### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`onResourceChange`](PickerBaseDirective.md#onresourcechange) + +*** + +### open() + +> **open**(`settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L587) + +Opens the picker's dropdown or dialog. + +#### Parameters + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Example + +```html +<igx-date-picker #picker></igx-date-picker> + +<button type="button" igxButton (click)="picker.open()">Open Dialog</button> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`open`](PickerBaseDirective.md#open) + +*** + +### select() + +> **select**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L653) + +Selects a date. + +#### Parameters + +##### value + +`Date` + +#### Returns + +`void` + +#### Remarks + +Updates the value in the input field. + +#### Example + +```typescript +this.datePicker.select(date); +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`select`](PickerBaseDirective.md#select) + +*** + +### selectToday() + +> **selectToday**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:667](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L667) + +Selects today's date and closes the picker. + +#### Returns + +`void` + +#### Example + +```html +<igx-date-picker #picker></igx-date-picker> + +<button type="button" igxButton (click)="picker.selectToday()">Select Today</button> +``` + +*** + +### toggle() + +> **toggle**(`settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:618](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L618) + +Toggles the picker's dropdown or dialog + +#### Parameters + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Example + +```html +<igx-date-picker #picker></igx-date-picker> + +<button type="button" igxButton (click)="picker.toggle()">Toggle Dialog</button> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`toggle`](PickerBaseDirective.md#toggle) + +*** + +### updateResources() + +> `protected` **updateResources**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:1011](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts#L1011) + +#### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`updateResources`](PickerBaseDirective.md#updateresources) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeEndComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeEndComponent.md new file mode 100644 index 000000000..61506c55c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeEndComponent.md @@ -0,0 +1,554 @@ +# Class: IgxDateRangeEndComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L156) + +Defines the end input for a date range picker + +## Igx Module + +IgxDateRangePickerModule + +## Igx Theme + +igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme + +## Igx Keywords + +date, range, date range, date picker + +## Igx Group + +scheduling + +## Remarks + +When templating, end input has to be template separately + +## Example + +```html +<igx-date-range-picker mode="dropdown"> + ... + <igx-date-range-end> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-end> +</igx-date-range-picker> +``` + +## Constructors + +### Constructor + +> **new IgxDateRangeEndComponent**(): `IgxDateRangeEndComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L230) + +#### Returns + +`IgxDateRangeEndComponent` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.constructor` + +## Properties + +### \_prefixes + +> `protected` **\_prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L122) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent._prefixes` + +*** + +### \_suffixes + +> `protected` **\_suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L125) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent._suffixes` + +*** + +### dateTimeEditor + +> **dateTimeEditor**: [`IgxDateTimeEditorDirective`](IgxDateTimeEditorDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L55) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.dateTimeEditor` + +*** + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L75) + +Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`. +By default applied the class is applied. +```typescript + @ViewChild("MyInputGroup") + public inputGroup: IgxInputGroupComponent; + ngAfterViewInit(){ + this.inputGroup.defaultClass = false; +``` +} + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.defaultClass` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L40) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.element` + +*** + +### inputDirective + +> **inputDirective**: [`IgxInputDirective`](IgxInputDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L58) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.inputDirective` + +*** + +### ngControl + +> `protected` **ngControl**: `NgControl` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L61) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.ngControl` + +*** + +### suppressInputAutofocus + +> **suppressInputAutofocus**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L111) + +Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix). + +#### Remarks + +Automatic focus causes software keyboard to show on mobile devices. + +#### Example + +```html +<igx-input-group [suppressInputAutofocus]="true"></igx-input-group> +``` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.suppressInputAutofocus` + +## Accessors + +### hasBorder + +#### Get Signature + +> **get** **hasBorder**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L315) + +Returns whether the `IgxInputGroupComponent` has border. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputBorder = this.inputGroup.hasBorder; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.hasBorder` + +*** + +### hasHints + +#### Get Signature + +> **get** **hasHints**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L279) + +Returns whether the `IgxInputGroupComponent` has hints. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputHints = this.inputGroup.hasHints; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.hasHints` + +*** + +### isTypeBootstrap + +#### Get Signature + +> **get** **isTypeBootstrap**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L432) + +Returns true if the `IgxInputGroupComponent` theme is Bootstrap. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBootstrap = this.inputGroup.isTypeBootstrap; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeBootstrap` + +*** + +### isTypeBorder + +#### Get Signature + +> **get** **isTypeBorder**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L402) + +Returns whether the `IgxInputGroupComponent` type is border. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBorder = this.inputGroup.isTypeBorder; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeBorder` + +*** + +### isTypeBox + +#### Get Signature + +> **get** **isTypeBox**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L347) + +Returns whether the `IgxInputGroupComponent` type is box. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBox = this.inputGroup.isTypeBox; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeBox` + +*** + +### isTypeFluent + +#### Get Signature + +> **get** **isTypeFluent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L417) + +Returns true if the `IgxInputGroupComponent` theme is Fluent. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeFluent = this.inputGroup.isTypeFluent; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeFluent` + +*** + +### isTypeIndigo + +#### Get Signature + +> **get** **isTypeIndigo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L447) + +Returns true if the `IgxInputGroupComponent` theme is Indigo. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeIndigo = this.inputGroup.isTypeIndigo; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeIndigo` + +*** + +### isTypeLine + +#### Get Signature + +> **get** **isTypeLine**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L332) + +Returns whether the `IgxInputGroupComponent` type is line. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeLine = this.inputGroup.isTypeLine; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeLine` + +*** + +### isTypeSearch + +#### Get Signature + +> **get** **isTypeSearch**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:462](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L462) + +Returns whether the `IgxInputGroupComponent` type is search. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeSearch = this.inputGroup.isTypeSearch; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeSearch` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): [`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L59) + +Returns the resource strings. + +##### Returns + +[`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L52) + +Sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +[`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.resourceStrings` + +*** + +### theme + +#### Get Signature + +> **get** **theme**(): [`IgxTheme`](../type-aliases/IgxTheme.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L226) + +Returns the theme of the input. +The returned value is of type IgxInputGroupType. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = this.inputGroup.theme; +} + +##### Returns + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +#### Set Signature + +> **set** **theme**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L212) + +Sets the theme of the input. +Allowed values of type IgxInputGroupTheme. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = 'fluent'; +} + +##### Parameters + +###### value + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.theme` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L197) + +Returns the type of the `IgxInputGroupComponent`. How the input is styled. +The default is `line`. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputType = this.inputGroup.type; +} +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L182) + +Sets how the input will be styled. +Allowed values of type IgxInputGroupType. +```html +<igx-input-group [type]="'search'"> +``` + +##### Parameters + +###### value + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.type` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangePickerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangePickerComponent.md new file mode 100644 index 000000000..8cf3008f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangePickerComponent.md @@ -0,0 +1,1576 @@ +# Class: IgxDateRangePickerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L108) + +Provides the ability to select a range of dates from a calendar UI or editable inputs. + +## Igx Module + +IgxDateRangeModule + +## Igx Theme + +igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme + +## Igx Keywords + +date, range, date range, date picker + +## Igx Group + +scheduling + +## Remarks + +It displays the range selection in a single or two input fields. +The default template displays a single *readonly* input field +while projecting `igx-date-range-start` and `igx-date-range-end` +displays two *editable* input fields. + +## Example + +```html +<igx-date-range-picker mode="dropdown"></igx-date-range-picker> +``` + +## Extends + +- [`PickerBaseDirective`](PickerBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDateRangePickerComponent**(): `IgxDateRangePickerComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:658](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L658) + +#### Returns + +`IgxDateRangePickerComponent` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`constructor`](PickerBaseDirective.md#constructor) + +## Properties + +### \_collapsed + +> `protected` **\_collapsed**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L297) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_collapsed`](PickerBaseDirective.md#_collapsed) + +*** + +### \_defaultLocale + +> `protected` **\_defaultLocale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L294) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_defaultLocale`](PickerBaseDirective.md#_defaultlocale) + +*** + +### \_destroy$ + +> `protected` **\_destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:333](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L333) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_destroy$`](PickerBaseDirective.md#_destroy) + +*** + +### \_displayFormat + +> `protected` **\_displayFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:296](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L296) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_displayFormat`](PickerBaseDirective.md#_displayformat) + +*** + +### \_inputFormat + +> `protected` **\_inputFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:295](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L295) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_inputFormat`](PickerBaseDirective.md#_inputformat) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L33) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_inputGroupType`](PickerBaseDirective.md#_inputgrouptype) + +*** + +### \_locale + +> `protected` **\_locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L293) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_locale`](PickerBaseDirective.md#_locale) + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L32) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_localeId`](PickerBaseDirective.md#_localeid) + +*** + +### \_maxValue + +> `protected` **\_maxValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L300) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_maxValue`](PickerBaseDirective.md#_maxvalue) + +*** + +### \_minValue + +> `protected` **\_minValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L299) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_minValue`](PickerBaseDirective.md#_minvalue) + +*** + +### \_type + +> `protected` **\_type**: [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L298) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_type`](PickerBaseDirective.md#_type) + +*** + +### \_weekStart + +> `protected` **\_weekStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L301) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_weekStart`](PickerBaseDirective.md#_weekstart) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L274) + +Emitted after the calendar has closed. + +#### Example + +```html +<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`closed`](PickerBaseDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L263) + +Emitted when the calendar has started closing, cancelable. + +#### Example + +```html +<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`closing`](PickerBaseDirective.md#closing) + +*** + +### customRanges + +> **customRanges**: [`CustomDateRange`](../interfaces/CustomDateRange.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:429](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L429) + +Custom ranges rendered as chips. + +#### Example + +```html +<igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker> +`` + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L144) + +Enables or disables the picker. + +#### Example + +```html +<igx-date-picker [disabled]="'true'"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`disabled`](PickerBaseDirective.md#disabled) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L31) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`element`](PickerBaseDirective.md#element) + +*** + +### formatter + +> **formatter**: (`val`) => `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L176) + +A custom formatter function, applied on the selected or passed in date. + +#### Parameters + +##### val + +[`DateRange`](../interfaces/DateRange.md) + +#### Returns + +`string` + +#### Example + +```typescript +private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" }); +private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" }); + +public formatter(date: Date): string { + return `${this.dayFormatter.format(date)} - ${this.monthFormatter.format(date)} - ${date.getFullYear()}`; +} +``` +```html +<igx-date-range-picker [formatter]="formatter"></igx-date-range-picker> +``` + +*** + +### headerOrientation + +> **headerOrientation**: [`PickerHeaderOrientation`](../type-aliases/PickerHeaderOrientation.md) = `PickerHeaderOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L111) + +Gets/Sets the orientation of the `IgxDatePickerComponent` header. + +#### Example + +```html +<igx-date-picker headerOrientation="vertical"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`headerOrientation`](PickerBaseDirective.md#headerorientation) + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L122) + +Gets/Sets whether the header is hidden in dialog mode. + +#### Example + +```html +<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`hideHeader`](PickerBaseDirective.md#hideheader) + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L157) + +Gets/Sets whether dates that are not part of the current month will be displayed. + +#### Remarks + +Default value is `false`. + +#### Example + +```html +<igx-date-range-picker [hideOutsideDays]="true"></igx-date-range-picker> +``` + +*** + +### hint + +> **hint**: [`IgxHintDirective`](IgxHintDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L453) + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L34) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`i18nFormatter`](PickerBaseDirective.md#i18nformatter) + +*** + +### inputGroup + +> `protected` **inputGroup**: [`IgxInputGroupComponent`](IgxInputGroupComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L291) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`inputGroup`](PickerBaseDirective.md#inputgroup) + +*** + +### label + +> **label**: [`IgxLabelDirective`](IgxLabelDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L450) + +*** + +### mode + +> **mode**: [`PickerInteractionMode`](../type-aliases/PickerInteractionMode.md) = `PickerInteractionMode.DropDown` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L100) + +Can be `dropdown` with editable input field or `dialog` with readonly input field. + +#### Remarks + +Default mode is `dropdown` + +#### Example + +```html +<igx-date-picker mode="dialog"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`mode`](PickerBaseDirective.md#mode) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L252) + +Emitted after the calendar has opened. + +#### Example + +```html +<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`opened`](PickerBaseDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L241) + +Emitted when the calendar has started opening, cancelable. + +#### Example + +```html +<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`opening`](PickerBaseDirective.md#opening) + +*** + +### orientation + +> **orientation**: [`PickerCalendarOrientation`](../type-aliases/PickerCalendarOrientation.md) = `PickerCalendarOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L143) + +Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view. + +#### Example + +```ts +<igx-date-range-picker orientation="vertical"></igx-date-range-picker> +``` + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:382](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L382) + +Gets/Sets the container used for the popup element. + +#### Remarks + +`outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. + +#### Example + +```html +<div igxOverlayOutlet #outlet="overlay-outlet"></div> +//.. +<igx-date-range-picker [outlet]="outlet"></igx-date-range-picker> +//.. +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`outlet`](PickerBaseDirective.md#outlet) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L233) + +Custom overlay settings that should be used to display the calendar. + +#### Example + +```html +<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`overlaySettings`](PickerBaseDirective.md#overlaysettings) + +*** + +### pickerActions + +> **pickerActions**: [`IgxPickerActionsDirective`](IgxPickerActionsDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L456) + +*** + +### placeholder + +> **placeholder**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L366) + +Sets the `placeholder` for single-input `IgxDateRangePickerComponent`. + +#### Example + +```html +<igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`placeholder`](PickerBaseDirective.md#placeholder) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L110) + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L285) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`prefixes`](PickerBaseDirective.md#prefixes) + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L396) + +Show/hide week numbers + +#### Remarks + +Default is `false`. + +#### Example + +```html +<igx-date-range-picker [showWeekNumbers]="true"></igx-date-range-picker> +`` + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:288](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L288) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`suffixes`](PickerBaseDirective.md#suffixes) + +*** + +### tabIndex + +> **tabIndex**: `string` \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L230) + +Gets/Sets the default template editor's tabindex. + +#### Example + +```html +<igx-date-picker [tabIndex]="1"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`tabIndex`](PickerBaseDirective.md#tabindex) + +*** + +### usePredefinedRanges + +> **usePredefinedRanges**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L419) + +Whether to render built-in predefined ranges. + +#### Example + +```html +<igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker> +`` + +*** + +### valueChange + +> **valueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L432) + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`valueChange`](PickerBaseDirective.md#valuechange) + +## Accessors + +### activeDate + +#### Get Signature + +> **get** **activeDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L494) + +Gets/Sets the date which is shown in the calendar picker and is highlighted. +By default it is the current date, or the value of the picker, if set. + +##### Returns + +`Date` + +#### Set Signature + +> **set** **activeDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L500) + +##### Parameters + +###### value + +`Date` + +##### Returns + +`void` + +*** + +### cancelButtonText + +#### Get Signature + +> **get** **cancelButtonText**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L218) + +##### Returns + +`string` + +#### Set Signature + +> **set** **cancelButtonText**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L214) + +Overrides the default text of the calendar dialog **Cancel** button. + +##### Remarks + +Defaults to the value from resource strings, `"Cancel"` for the built-in EN. +The button will only show up in `dialog` mode. + +##### Example + +```html +<igx-date-range-picker cancelButtonText="取消"></igx-date-range-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L549) + +Gets calendar state. + +```typescript +let state = this.dateRange.collapsed; +``` + +##### Returns + +`boolean` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`collapsed`](PickerBaseDirective.md#collapsed) + +*** + +### disabledDates + +#### Get Signature + +> **get** **disabledDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L316) + +Gets/Sets the disabled dates descriptors. + +##### Example + +```typescript +let disabledDates = this.dateRangePicker.disabledDates; +this.dateRangePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...]; +``` + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **disabledDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L319) + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +*** + +### displayFormat + +#### Get Signature + +> **get** **displayFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L252) + +The format used to display the picker's value when it's not being edited. + +##### Remarks + +Uses Angular's DatePipe. + +##### Example + +```html +<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L248) + +The format used when editable inputs are not focused. + +##### Remarks + +Uses Angular's DatePipe. + +##### Example + +```html +<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`displayFormat`](PickerBaseDirective.md#displayformat) + +*** + +### displayMonthsCount + +#### Get Signature + +> **get** **displayMonthsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L128) + +The number of displayed month views. + +##### Remarks + +Default is `2`. + +##### Example + +```html +<igx-date-range-picker [displayMonthsCount]="3"></igx-date-range-picker> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **displayMonthsCount**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L132) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### doneButtonText + +#### Get Signature + +> **get** **doneButtonText**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L195) + +##### Returns + +`string` + +#### Set Signature + +> **set** **doneButtonText**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L191) + +Overrides the default text of the calendar dialog **Done** button. + +##### Remarks + +Defaults to the value from resource strings, `"Done"` for the built-in EN. +The button will only show up in `dialog` mode. + +##### Example + +```html +<igx-date-range-picker doneButtonText="完了"></igx-date-range-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### inputFormat + +#### Get Signature + +> **get** **inputFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L269) + +The editor's input mask. + +##### Remarks + +Also used as a placeholder when none is provided. + +##### Example + +```html +<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L265) + +The expected user input format and placeholder. + +##### Example + +```html +<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`inputFormat`](PickerBaseDirective.md#inputformat) + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:515](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L515) + +Gets the `locale` of the date-range-picker. +If not set, defaults to application's locale. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:523](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L523) + +Sets the `locale` of the date-picker. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`locale`](PickerBaseDirective.md#locale) + +*** + +### maxValue + +#### Get Signature + +> **get** **maxValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L302) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **maxValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L297) + +The maximum value in a valid range. + +##### Example + +```ts +<igx-date-range-picker [maxValue]="maxDate"></igx-date-range-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### minValue + +#### Get Signature + +> **get** **minValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L286) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **minValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L281) + +The minimum value in a valid range. + +##### Example + +```ts +<igx-date-range-picker [minValue]="minDate"></igx-date-range-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L353) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L346) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### specialDates + +#### Get Signature + +> **get** **specialDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L334) + +Gets/Sets the special dates descriptors. + +##### Example + +```typescript +let specialDates = this.dateRangePicker.specialDates; +this.dateRangePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ]; +``` + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **specialDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L337) + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +*** + +### toggleContainer + +#### Get Signature + +> **get** `protected` **toggleContainer**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:588](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L588) + +##### Returns + +`HTMLElement` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`toggleContainer`](PickerBaseDirective.md#togglecontainer) + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L217) + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L214) + +Determines how the picker's input will be styled. + +##### Remarks + +Default is `box`. + +##### Example + +```html +<igx-date-picker [type]="'line'"></igx-date-picker> +``` + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`type`](PickerBaseDirective.md#type) + +*** + +### value + +#### Get Signature + +> **get** **value**(): [`DateRange`](../interfaces/DateRange.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L565) + +The currently selected value / range from the calendar + +##### Remarks + +The current value is of type `DateRange` + +##### Example + +```typescript +const newValue: DateRange = { start: new Date("2/2/2012"), end: new Date("3/3/2013")}; +this.dateRangePicker.value = newValue; +``` + +##### Returns + +[`DateRange`](../interfaces/DateRange.md) + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:570](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L570) + +##### Parameters + +###### value + +[`DateRange`](../interfaces/DateRange.md) + +##### Returns + +`void` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L176) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L184) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`weekStart`](PickerBaseDirective.md#weekstart) + +## Methods + +### clear() + +> **clear**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:771](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L771) + +Clears the input field(s) and the picker's value. + +#### Returns + +`void` + +#### Example + +```typescript +this.dateRangePicker.clear(); +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`clear`](PickerBaseDirective.md#clear) + +*** + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:721](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L721) + +Closes the date range picker's dropdown or dialog. + +#### Returns + +`void` + +#### Example + +```html +<igx-date-range-picker #dateRange></igx-date-range-picker> + +<button type="button" igxButton (click)="dateRange.close()">Close Dialog</button> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`close`](PickerBaseDirective.md#close) + +*** + +### initLocale() + +> `protected` **initLocale**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L385) + +#### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`initLocale`](PickerBaseDirective.md#initlocale) + +*** + +### onResourceChange() + +> `protected` **onResourceChange**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:1323](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L1323) + +#### Parameters + +##### args + +`CustomEvent`\<`IResourceChangeEventArgs`\> + +#### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`onResourceChange`](PickerBaseDirective.md#onresourcechange) + +*** + +### onStatusChanged() + +> `protected` **onStatusChanged**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L916) + +#### Returns + +`void` + +*** + +### open() + +> **open**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L691) + +Opens the date range picker's dropdown or dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Example + +```html +<igx-date-range-picker #dateRange></igx-date-range-picker> + +<button type="button" igxButton (click)="dateRange.open()">Open Dialog</button +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`open`](PickerBaseDirective.md#open) + +*** + +### select() + +> **select**(`startDate`, `endDate?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:757](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L757) + +Selects a range of dates. If no `endDate` is passed, range is 1 day (only `startDate`) + +#### Parameters + +##### startDate + +`Date` + +##### endDate? + +`Date` + +#### Returns + +`void` + +#### Example + +```typescript +public selectFiveDayRange() { + const today = new Date(); + const inFiveDays = new Date(new Date().setDate(today.getDate() + 5)); + this.dateRange.select(today, inFiveDays); +} +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`select`](PickerBaseDirective.md#select) + +*** + +### toggle() + +> **toggle**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:737](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L737) + +Toggles the date range picker's dropdown or dialog + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Example + +```html +<igx-date-range-picker #dateRange></igx-date-range-picker> + +<button type="button" igxButton (click)="dateRange.toggle()">Toggle Dialog</button> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`toggle`](PickerBaseDirective.md#toggle) + +*** + +### updateResources() + +> `protected` **updateResources**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:1331](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts#L1331) + +#### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`updateResources`](PickerBaseDirective.md#updateresources) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeSeparatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeSeparatorDirective.md new file mode 100644 index 000000000..a0633279d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeSeparatorDirective.md @@ -0,0 +1,48 @@ +# Class: IgxDateRangeSeparatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L189) + +Replaces the default separator `to` with the provided value + +## Igx Module + +IgxDateRangePickerModule + +## Igx Theme + +igx-date-range-picker-theme + +## Igx Keywords + +date, range, date range, date picker + +## Igx Group + +scheduling + +## Example + +```html +<igx-date-range-picker> + <igx-date-range-start> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-start> + + <ng-template igxDateRangeSeparator>-</ng-template> + + <igx-date-range-end> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-end> + ... +</igx-date-range-picker> +``` + +## Constructors + +### Constructor + +> **new IgxDateRangeSeparatorDirective**(): `IgxDateRangeSeparatorDirective` + +#### Returns + +`IgxDateRangeSeparatorDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeStartComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeStartComponent.md new file mode 100644 index 000000000..ee29d7cfb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateRangeStartComponent.md @@ -0,0 +1,554 @@ +# Class: IgxDateRangeStartComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L121) + +Defines the start input for a date range picker + +## Igx Module + +IgxDateRangePickerModule + +## Igx Theme + +igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme + +## Igx Keywords + +date, range, date range, date picker + +## Igx Group + +scheduling + +## Remarks + +When templating, start input has to be templated separately + +## Example + +```html +<igx-date-range-picker mode="dropdown"> + <igx-date-range-start> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-start> + ... +</igx-date-range-picker> +``` + +## Constructors + +### Constructor + +> **new IgxDateRangeStartComponent**(): `IgxDateRangeStartComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L230) + +#### Returns + +`IgxDateRangeStartComponent` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.constructor` + +## Properties + +### \_prefixes + +> `protected` **\_prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L122) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent._prefixes` + +*** + +### \_suffixes + +> `protected` **\_suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L125) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent._suffixes` + +*** + +### dateTimeEditor + +> **dateTimeEditor**: [`IgxDateTimeEditorDirective`](IgxDateTimeEditorDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L55) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.dateTimeEditor` + +*** + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L75) + +Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`. +By default applied the class is applied. +```typescript + @ViewChild("MyInputGroup") + public inputGroup: IgxInputGroupComponent; + ngAfterViewInit(){ + this.inputGroup.defaultClass = false; +``` +} + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.defaultClass` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L40) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.element` + +*** + +### inputDirective + +> **inputDirective**: [`IgxInputDirective`](IgxInputDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L58) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.inputDirective` + +*** + +### ngControl + +> `protected` **ngControl**: `NgControl` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts#L61) + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.ngControl` + +*** + +### suppressInputAutofocus + +> **suppressInputAutofocus**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L111) + +Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix). + +#### Remarks + +Automatic focus causes software keyboard to show on mobile devices. + +#### Example + +```html +<igx-input-group [suppressInputAutofocus]="true"></igx-input-group> +``` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.suppressInputAutofocus` + +## Accessors + +### hasBorder + +#### Get Signature + +> **get** **hasBorder**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L315) + +Returns whether the `IgxInputGroupComponent` has border. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputBorder = this.inputGroup.hasBorder; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.hasBorder` + +*** + +### hasHints + +#### Get Signature + +> **get** **hasHints**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L279) + +Returns whether the `IgxInputGroupComponent` has hints. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputHints = this.inputGroup.hasHints; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.hasHints` + +*** + +### isTypeBootstrap + +#### Get Signature + +> **get** **isTypeBootstrap**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L432) + +Returns true if the `IgxInputGroupComponent` theme is Bootstrap. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBootstrap = this.inputGroup.isTypeBootstrap; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeBootstrap` + +*** + +### isTypeBorder + +#### Get Signature + +> **get** **isTypeBorder**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L402) + +Returns whether the `IgxInputGroupComponent` type is border. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBorder = this.inputGroup.isTypeBorder; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeBorder` + +*** + +### isTypeBox + +#### Get Signature + +> **get** **isTypeBox**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L347) + +Returns whether the `IgxInputGroupComponent` type is box. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBox = this.inputGroup.isTypeBox; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeBox` + +*** + +### isTypeFluent + +#### Get Signature + +> **get** **isTypeFluent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L417) + +Returns true if the `IgxInputGroupComponent` theme is Fluent. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeFluent = this.inputGroup.isTypeFluent; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeFluent` + +*** + +### isTypeIndigo + +#### Get Signature + +> **get** **isTypeIndigo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L447) + +Returns true if the `IgxInputGroupComponent` theme is Indigo. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeIndigo = this.inputGroup.isTypeIndigo; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeIndigo` + +*** + +### isTypeLine + +#### Get Signature + +> **get** **isTypeLine**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L332) + +Returns whether the `IgxInputGroupComponent` type is line. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeLine = this.inputGroup.isTypeLine; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeLine` + +*** + +### isTypeSearch + +#### Get Signature + +> **get** **isTypeSearch**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:462](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L462) + +Returns whether the `IgxInputGroupComponent` type is search. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeSearch = this.inputGroup.isTypeSearch; +} +``` + +##### Returns + +`boolean` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.isTypeSearch` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): [`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L59) + +Returns the resource strings. + +##### Returns + +[`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L52) + +Sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +[`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.resourceStrings` + +*** + +### theme + +#### Get Signature + +> **get** **theme**(): [`IgxTheme`](../type-aliases/IgxTheme.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L226) + +Returns the theme of the input. +The returned value is of type IgxInputGroupType. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = this.inputGroup.theme; +} + +##### Returns + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +#### Set Signature + +> **set** **theme**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L212) + +Sets the theme of the input. +Allowed values of type IgxInputGroupTheme. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = 'fluent'; +} + +##### Parameters + +###### value + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.theme` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L197) + +Returns the type of the `IgxInputGroupComponent`. How the input is styled. +The default is `line`. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputType = this.inputGroup.type; +} +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L182) + +Sets how the input will be styled. +Allowed values of type IgxInputGroupType. +```html +<igx-input-group [type]="'search'"> +``` + +##### Parameters + +###### value + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxDateRangeInputsBaseComponent.type` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateSummaryOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateSummaryOperand.md new file mode 100644 index 000000000..e5ae2adb0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateSummaryOperand.md @@ -0,0 +1,174 @@ +# Class: IgxDateSummaryOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L179) + +## Extends + +- [`IgxSummaryOperand`](IgxSummaryOperand.md) + +## Constructors + +### Constructor + +> **new IgxDateSummaryOperand**(): `IgxDateSummaryOperand` + +#### Returns + +`IgxDateSummaryOperand` + +#### Inherited from + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`constructor`](IgxSummaryOperand.md#constructor) + +## Methods + +### operate() + +> **operate**(`data?`, `allData?`, `fieldName?`, `groupRecord?`): [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L236) + +Executes the static methods and returns `IgxSummaryResult[]`. +```typescript +interface IgxSummaryResult { + key: string; + label: string; + summaryResult: any; +} +``` +Can be overridden in the inherited classes to provide customization for the `summary`. +```typescript +class CustomDateSummary extends IgxDateSummaryOperand { + constructor() { + super(); + } + public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] { + const result = super.operate(data, allData, fieldName, groupRecord); + result.push({ + key: "deadline", + label: "Deadline Date", + summaryResult: this.calculateDeadline(data); + }); + return result; + } +} +this.grid.getColumnByName('ColumnName').summaries = CustomDateSummary; +``` + +#### Parameters + +##### data? + +`any`[] = `[]` + +##### allData? + +`any`[] = `[]` + +##### fieldName? + +`string` + +##### groupRecord? + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +#### Returns + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +#### Memberof + +IgxDateSummaryOperand + +#### Overrides + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`operate`](IgxSummaryOperand.md#operate) + +*** + +### count() + +> `static` **count**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L18) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxSummaryOperand + +#### Inherited from + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`count`](IgxSummaryOperand.md#count) + +*** + +### earliest() + +> `static` **earliest**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:202](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L202) + +Returns the earliest date value in the data records. +If filtering is applied, returns the latest date value in the filtered data records. +```typescript +IgxDateSummaryOperand.earliest(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxDateSummaryOperand + +*** + +### latest() + +> `static` **latest**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L189) + +Returns the latest date value in the data records. +If filtering is applied, returns the latest date value in the filtered data records. +```typescript +IgxDateSummaryOperand.latest(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxDateSummaryOperand diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateTimeEditorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateTimeEditorDirective.md new file mode 100644 index 000000000..6ba50c1b8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateTimeEditorDirective.md @@ -0,0 +1,712 @@ +# Class: IgxDateTimeEditorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L52) + +Date Time Editor provides a functionality to input, edit and format date and time. + +## Igx Module + +IgxDateTimeEditorModule + +## Igx Parent + +IgxInputGroup + +## Igx Theme + +igx-input-theme + +## Igx Keywords + +date, time, editor + +## Igx Group + +Scheduling + +## Remarks + +The Ignite UI Date Time Editor Directive makes it easy for developers to manipulate date/time user input. +It requires input in a specified or default input format which is visible in the input element as a placeholder. +It allows the input of only date (ex: 'dd/MM/yyyy'), only time (ex:'HH:mm tt') or both at once, if needed. +Supports display format that may differ from the input format. +Provides methods to increment and decrement any specific/targeted `DatePart`. + +**Note:** This directive uses the Mask Directive internally and requires `type="text"` on the input element. +Input elements with `type="date"` or other date/time types are not supported, as they do not allow +programmatic cursor positioning and text selection required for mask functionality. + +## Example + +```html +<igx-input-group> + <input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [displayFormat]="'shortDate'" [(ngModel)]="date"/> +</igx-input-group> +``` + +## Extends + +- [`IgxMaskDirective`](IgxMaskDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDateTimeEditorDirective**(): `IgxDateTimeEditorDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L301) + +#### Returns + +`IgxDateTimeEditorDirective` + +#### Overrides + +[`IgxMaskDirective`](IgxMaskDirective.md).[`constructor`](IgxMaskDirective.md#constructor) + +## Properties + +### \_composing + +> `protected` **\_composing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L132) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`_composing`](IgxMaskDirective.md#_composing) + +*** + +### \_compositionStartIndex + +> `protected` **\_compositionStartIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L133) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`_compositionStartIndex`](IgxMaskDirective.md#_compositionstartindex) + +*** + +### \_focused + +> `protected` **\_focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L134) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`_focused`](IgxMaskDirective.md#_focused) + +*** + +### \_onChangeCallback + +> `protected` **\_onChangeCallback**: (`_`) => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L148) + +#### Parameters + +##### \_ + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`_onChangeCallback`](IgxMaskDirective.md#_onchangecallback) + +*** + +### \_onTouchedCallback + +> `protected` **\_onTouchedCallback**: () => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L147) + +#### Returns + +`void` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`_onTouchedCallback`](IgxMaskDirective.md#_ontouchedcallback) + +*** + +### defaultFormatType + +> **defaultFormatType**: `"date"` \| `"dateTime"` \| `"time"` = `'date'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L196) + +Specify the default input format type. Defaults to `date`, which includes +only date parts for editing. Other valid options are `time` and `dateTime`. + +#### Example + +```html +<input igxDateTimeEditor [defaultFormatType]="'dateTime'"> +``` + +*** + +### displayValuePipe + +> **displayValuePipe**: `PipeTransform` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L66) + +Specifies a pipe to be used on blur. +```html +<input [displayValuePipe] = "displayFormatPipe"> +``` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`displayValuePipe`](IgxMaskDirective.md#displayvaluepipe) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L14) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`elementRef`](IgxMaskDirective.md#elementref) + +*** + +### focusedValuePipe + +> **focusedValuePipe**: `PipeTransform` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L75) + +Specifies a pipe to be used on focus. +```html +<input [focusedValuePipe] = "inputFormatPipe"> +``` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`focusedValuePipe`](IgxMaskDirective.md#focusedvaluepipe) + +*** + +### includeLiterals + +> **includeLiterals**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L57) + +Specifies if the bound value includes the formatting symbols. +```html +<input [includeLiterals] = "true"> +``` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`includeLiterals`](IgxMaskDirective.md#includeliterals) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L72) + +Locale settings used for value formatting. + +#### Remarks + +Uses Angular's `LOCALE_ID` by default. Affects both input mask and display format if those are not set. +If a `locale` is set, it must be registered via `registerLocaleData`. +Please refer to https://angular.io/guide/i18n#i18n-pipes. +If it is not registered, `Intl` will be used for formatting. + +#### Example + +```html +<input igxDateTimeEditor [locale]="'en'"> +``` + +*** + +### maskParser + +> `protected` **maskParser**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L15) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`maskParser`](IgxMaskDirective.md#maskparser) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L17) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`platform`](IgxMaskDirective.md#platform) + +*** + +### promptChar + +> **promptChar**: `string` = `'_'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L48) + +Sets the character representing a fillable spot in the input mask. +Default value is "'_'". +```html +<input [promptChar] = "'/'"> +``` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`promptChar`](IgxMaskDirective.md#promptchar) + +*** + +### renderer + +> `protected` **renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L16) + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`renderer`](IgxMaskDirective.md#renderer) + +*** + +### spinDelta + +> **spinDelta**: [`DatePartDeltas`](../interfaces/DatePartDeltas.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L208) + +Delta values used to increment or decrement each editor date part on spin actions. +All values default to `1`. + +#### Example + +```html +<input igxDateTimeEditor [spinDelta]="{date: 5, minute: 30}"> +``` + +*** + +### spinLoop + +> **spinLoop**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L125) + +Specify if the currently spun date segment should loop over. + +#### Example + +```html +<input igxDateTimeEditor [spinLoop]="false"> +``` + +*** + +### validationFailed + +> **validationFailed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L230) + +Emitted when the editor is not within a specified range or when the editor's value is in an invalid state. + +#### Example + +```html +<input igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" (validationFailed)="onValidationFailed($event)"/> +``` + +*** + +### valueChange + +> **valueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L219) + +Emitted when the editor's value has changed. + +#### Example + +```html +<input igxDateTimeEditor (valueChange)="valueChange($event)"/> +``` + +*** + +### valueChanged + +> **valueChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L85) + +Emits an event each time the value changes. +Provides `rawValue: string` and `formattedValue: string` as event arguments. +```html +<input (valueChanged) = "valueChanged(rawValue: string, formattedValue: string)"> +``` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`valueChanged`](IgxMaskDirective.md#valuechanged) + +## Accessors + +### displayFormat + +#### Get Signature + +> **get** **displayFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L142) + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L137) + +Set both pre-defined format options such as `shortDate` and `longDate`, +as well as constructed format string using characters supported by `DatePipe`, e.g. `EE/MM/yyyy`. + +##### Example + +```html +<input igxDateTimeEditor [displayFormat]="'shortDate'"> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### inputFormat + +#### Get Signature + +> **get** **inputFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L162) + +##### Returns + +`string` + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L155) + +Expected user input format (and placeholder). + +##### Example + +```html +<input [igxDateTimeEditor]="'dd/MM/yyyy'"> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### mask + +#### Get Signature + +> **get** **mask**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L26) + +Sets the input mask. +```html +<input [igxMask] = "'00/00/0000'"> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **mask**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L30) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxMaskDirective`](IgxMaskDirective.md).[`mask`](IgxMaskDirective.md#mask) + +*** + +### maxValue + +#### Get Signature + +> **get** **maxValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L106) + +Maximum value required for the editor to remain valid. + +##### Remarks + +If a `string` value is passed in, it must be in the defined input format. + +##### Example + +```html +<input igxDateTimeEditor [maxValue]="maxDate"> +``` + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **maxValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L111) + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### minValue + +#### Get Signature + +> **get** **minValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L85) + +Minimum value required for the editor to remain valid. + +##### Remarks + +If a `string` value is passed, it must be in the defined input format. + +##### Example + +```html +<input igxDateTimeEditor [minValue]="minDate"> +``` + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **minValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L90) + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L182) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L175) + +Editor value. + +##### Example + +```html +<input igxDateTimeEditor [value]="date"> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +## Methods + +### clear() + +> **clear**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L347) + +Clear the input element value. + +#### Returns + +`void` + +*** + +### decrement() + +> **decrement**(`datePart?`, `delta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L375) + +Decrement specified DatePart. + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +The optional DatePart to decrement. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm'). + +##### delta? + +`number` + +The optional delta to decrement by. Overrides `spinDelta`. + +#### Returns + +`void` + +*** + +### increment() + +> **increment**(`datePart?`, `delta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L360) + +Increment specified DatePart. + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +The optional DatePart to increment. Defaults to Date or Hours (when Date is absent from the inputFormat - ex:'HH:mm'). + +##### delta? + +`number` + +The optional delta to increment by. Overrides `spinDelta`. + +#### Returns + +`void` + +*** + +### onWheel() + +> **onWheel**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts#L308) + +#### Parameters + +##### event + +`WheelEvent` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateTimeFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateTimeFilteringOperand.md new file mode 100644 index 000000000..dc55899a1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDateTimeFilteringOperand.md @@ -0,0 +1,213 @@ +# Class: IgxDateTimeFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:429](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L429) + +## Extends + +- `IgxBaseDateTimeFilteringOperand` + +## Constructors + +### Constructor + +> `protected` **new IgxDateTimeFilteringOperand**(): `IgxDateTimeFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:430](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L430) + +#### Returns + +`IgxDateTimeFilteringOperand` + +#### Overrides + +`IgxBaseDateTimeFilteringOperand.constructor` + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.operations` + +*** + +### \_instance + +> `protected` `static` **\_instance**: [`IgxFilteringOperand`](IgxFilteringOperand.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand._instance` + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.append` + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.condition` + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.conditionList` + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L190) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.findValueInSet` + +*** + +### validateInputData() + +> `protected` **validateInputData**(`target`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L197) + +#### Parameters + +##### target + +`Date` + +#### Returns + +`void` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.validateInputData` + +*** + +### getDateParts() + +> `static` **getDateParts**(`date`, `dateFormat?`): [`IDateParts`](../interfaces/IDateParts.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L153) + +Splits a Date object into parts + +#### Parameters + +##### date + +`Date` + +##### dateFormat? + +`string` + +#### Returns + +[`IDateParts`](../interfaces/IDateParts.md) + +#### Memberof + +IgxDateFilteringOperand + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.getDateParts` + +*** + +### instance() + +> `static` **instance**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.instance` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDaysViewComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDaysViewComponent.md new file mode 100644 index 000000000..a220b6feb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDaysViewComponent.md @@ -0,0 +1,1151 @@ +# Class: IgxDaysViewComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L58) + +## Extends + +- `IgxCalendarBaseDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Properties + +### \_destroyRef + +> `protected` **\_destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L32) + +#### Inherited from + +`IgxCalendarBaseDirective._destroyRef` + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L34) + +#### Inherited from + +`IgxCalendarBaseDirective._localeId` + +*** + +### activeViewChanged + +> **activeViewChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L106) + +Emits an event when the active view is changed. +```html +<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar> +``` +```typescript +public activeViewChanged(event: CalendarView) { + let activeView = event; +} +``` + +#### Inherited from + +`IgxCalendarBaseDirective.activeViewChanged` + +*** + +### activeViewIdx + +> `protected` **activeViewIdx**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L42) + +Holds month view index we are operating on. + +#### Inherited from + +`IgxCalendarBaseDirective.activeViewIdx` + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L60) + +#### Overrides + +`IgxCalendarBaseDirective.cdr` + +*** + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L213) + +*** + +### el + +> `protected` **el**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L59) + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L71) + +Sets/gets whether the outside dates (dates that are out of the current month) will be hidden. +Default value is `false`. +```html +<igx-calendar [hideOutsideDays]="true"></igx-calendar> +``` +```typescript +let hideOutsideDays = this.calendar.hideOutsideDays; +``` + +#### Inherited from + +`IgxCalendarBaseDirective.hideOutsideDays` + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L37) + +#### Inherited from + +`IgxCalendarBaseDirective.i18nFormatter` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L76) + +Sets/gets the `id` of the days view. +If not set, the `id` will have value `"igx-days-view-0"`. +```html +<igx-days-view id="my-days-view"></igx-days-view> +``` +```typescript +let daysViewId = this.daysView.id; +``` + +*** + +### keyboardNavigation? + +> `protected` `optional` **keyboardNavigation?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L35) + +#### Inherited from + +`IgxCalendarBaseDirective.keyboardNavigation` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L33) + +#### Inherited from + +`IgxCalendarBaseDirective.platform` + +*** + +### role + +> **role**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L84) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L78) + +Emits an event when a date is selected. +Provides reference the `selectedDates` property. + +#### Inherited from + +`IgxCalendarBaseDirective.selected` + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L115) + +Show/hide week numbers + +#### Example + +```html +<igx-days-view [showWeekNumbers]="true"></igx-days-view> +`` + +*** + +### tabIndex + +> **tabIndex**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L80) + +*** + +### viewClass + +> `readonly` **viewClass**: `true` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L87) + +*** + +### viewDateChanged + +> **viewDateChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L92) + +Emits an event when the month in view is changed. +```html +<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar> +``` +```typescript +public viewDateChanged(event: IViewDateChangeEventArgs) { + let viewDate = event.currentValue; +} +``` + +#### Inherited from + +`IgxCalendarBaseDirective.viewDateChanged` + +## Accessors + +### activeDate + +#### Get Signature + +> **get** **activeDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L128) + +##### Returns + +`Date` + +*** + +### activeDescendant + +#### Get Signature + +> **get** `protected` **activeDescendant**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L100) + +##### Returns + +`number` + +*** + +### activeView + +#### Get Signature + +> **get** **activeView**(): [`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:374](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L374) + +Gets the current active view. +```typescript +this.activeView = calendar.activeView; +``` + +##### Returns + +[`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +#### Set Signature + +> **set** **activeView**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L387) + +Sets the current active view. +```html +<igx-calendar [activeView]="year" #calendar></igx-calendar> +``` +```typescript +calendar.activeView = IgxCalendarView.YEAR; +``` + +##### Parameters + +###### val + +[`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.activeView` + +*** + +### calendarMonth + +#### Get Signature + +> **get** `protected` **calendarMonth**(): [`CalendarDay`](CalendarDay.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L424) + +##### Returns + +[`CalendarDay`](CalendarDay.md)[] + +*** + +### disabledDates + +#### Get Signature + +> **get** **disabledDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:567](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L567) + +Gets the disabled dates descriptors. + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **disabledDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L583) + +Sets the disabled dates' descriptors. +```typescript +@ViewChild("MyCalendar") +public calendar: IgxCalendarComponent; +ngOnInit(){ + this.calendar.disabledDates = [ + {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, + {type: DateRangeType.Weekends}]; +} +``` + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.disabledDates` + +*** + +### formatOptions + +#### Get Signature + +> **get** **formatOptions**(): [`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L338) + +Gets the date format options of the views. + +##### Returns + +[`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +#### Set Signature + +> **set** **formatOptions**(`formatOptions`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L346) + +Sets the date format options of the views. +Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' } + +##### Parameters + +###### formatOptions + +[`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.formatOptions` + +*** + +### formatViews + +#### Get Signature + +> **get** **formatViews**(): [`IFormattingViews`](../interfaces/IFormattingViews.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L355) + +Gets whether the `day`, `month` and `year` should be rendered +according to the locale and formatOptions, if any. + +##### Returns + +[`IFormattingViews`](../interfaces/IFormattingViews.md) + +#### Set Signature + +> **set** **formatViews**(`formatViews`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L363) + +Sets whether the `day`, `month` and `year` should be rendered +according to the locale and formatOptions, if any. + +##### Parameters + +###### formatViews + +[`IFormattingViews`](../interfaces/IFormattingViews.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.formatViews` + +*** + +### hideLeadingDays + +#### Get Signature + +> **get** **hideLeadingDays**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L152) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideLeadingDays**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L147) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### hideTrailingDays + +#### Get Signature + +> **get** **hideTrailingDays**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L162) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideTrailingDays**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L157) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### isBootstrap + +#### Get Signature + +> **get** `protected` **isBootstrap**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L227) + +##### Returns + +`boolean` + +*** + +### isFluent + +#### Get Signature + +> **get** `protected` **isFluent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L222) + +##### Returns + +`boolean` + +*** + +### isIndigo + +#### Get Signature + +> **get** `protected` **isIndigo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:232](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L232) + +##### Returns + +`boolean` + +*** + +### isMaterial + +#### Get Signature + +> **get** `protected` **isMaterial**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L217) + +##### Returns + +`boolean` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L319) + +Gets the `locale` of the calendar. +If not set, defaults to application's locale. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L327) + +Sets the `locale` of the calendar. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.locale` + +*** + +### monthWeeks + +#### Get Signature + +> **get** `protected` **monthWeeks**(): [`CalendarDay`](CalendarDay.md)[][] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:428](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L428) + +##### Returns + +[`CalendarDay`](CalendarDay.md)[][] + +*** + +### previewRangeDate + +#### Get Signature + +> **get** **previewRangeDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L142) + +##### Returns + +`Date` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:292](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L292) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L285) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.resourceStrings` + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L509) + +Gets the selection type. +Default value is `"single"`. +Changing the type of selection resets the currently +selected values if any. + +##### Returns + +`string` + +#### Set Signature + +> **set** **selection**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:516](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L516) + +Sets the selection. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.selection` + +*** + +### showActiveDay + +#### Get Signature + +> **get** **showActiveDay**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L171) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showActiveDay**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L167) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### specialDates + +#### Get Signature + +> **get** **specialDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:608](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L608) + +Gets the special dates descriptors. + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **specialDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L624) + +Sets the special dates' descriptors. +```typescript +@ViewChild("MyCalendar") +public calendar: IgxCalendarComponent; +ngOnInit(){ + this.calendar.specialDates = [ + {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, + {type: DateRangeType.Weekends}]; +} +``` + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.specialDates` + +*** + +### standalone + +#### Get Signature + +> **get** **standalone**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L91) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **standalone**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L95) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `Date` \| `Date`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L636) + +Gets the selected date(s). + +When selection is set to `single`, it returns +a single `Date` object. +Otherwise it is an array of `Date` objects. + +##### Returns + +`Date` \| `Date`[] + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:651](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L651) + +Sets the selected date(s). + +When selection is set to `single`, it accepts +a single `Date` object. +Otherwise it is an array of `Date` objects. + +##### Parameters + +###### value + +`string` \| `Date` \| `Date`[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.value` + +*** + +### viewDate + +#### Get Signature + +> **get** **viewDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L537) + +Gets the date that is presented. By default it is the current date. + +##### Returns + +`Date` + +#### Set Signature + +> **set** **viewDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L544) + +Sets the date that will be presented in the default view when the component renders. + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.viewDate` + +*** + +### weekNumberHeader + +#### Get Signature + +> **get** `protected` **weekNumberHeader**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:471](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L471) + +##### Returns + +`object` + +###### long + +> **long**: `string` + +###### short + +> **short**: `string` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L302) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L310) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.weekStart` + +## Methods + +### deselectDate() + +> **deselectDate**(`value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L746) + +Deselects date(s) (based on the selection type). + +#### Parameters + +##### value? + +`string` \| `Date` \| `Date`[] + +#### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.deselectDate` + +*** + +### formattedYears() + +> **formattedYears**(`value`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L464) + +#### Parameters + +##### value + +`Date` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.formattedYears` + +*** + +### getDecadeRange() + +> `protected` **getDecadeRange**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L491) + +#### Returns + +`object` + +##### end + +> **end**: `string` + +##### start + +> **start**: `string` + +#### Inherited from + +`IgxCalendarBaseDirective.getDecadeRange` + +*** + +### isWithinPreviewRange() + +> `protected` **isWithinPreviewRange**(`date`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:607](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L607) + +#### Parameters + +##### date + +`Date` + +#### Returns + +`boolean` + +*** + +### nextNavLabel() + +> `protected` **nextNavLabel**(`detail?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:480](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L480) + +#### Parameters + +##### detail? + +`string` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.nextNavLabel` + +*** + +### ngAfterContentChecked() + +> **ngAfterContentChecked**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts#L265) + +#### Returns + +`void` + +*** + +### prevNavLabel() + +> `protected` **prevNavLabel**(`detail?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:469](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L469) + +#### Parameters + +##### detail? + +`string` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.prevNavLabel` + +*** + +### selectDate() + +> **selectDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L719) + +Selects date(s) (based on the selection type). + +#### Parameters + +##### value + +`string` \| `Date` \| `Date`[] + +#### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.selectDate` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDefaultDropStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDefaultDropStrategy.md new file mode 100644 index 000000000..dd94d0c02 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDefaultDropStrategy.md @@ -0,0 +1,47 @@ +# Class: IgxDefaultDropStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L10) + +## Implements + +- [`IDropStrategy`](../interfaces/IDropStrategy.md) + +## Constructors + +### Constructor + +> **new IgxDefaultDropStrategy**(): `IgxDefaultDropStrategy` + +#### Returns + +`IgxDefaultDropStrategy` + +## Methods + +### dropAction() + +> **dropAction**(`_drag`, `_drop`, `_atIndex`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L12) + +#### Parameters + +##### \_drag + +[`IgxDragDirective`](IgxDragDirective.md) + +##### \_drop + +[`IgxDropDirective`](IgxDropDirective.md) + +##### \_atIndex + +`number` + +#### Returns + +`void` + +#### Implementation of + +[`IDropStrategy`](../interfaces/IDropStrategy.md).[`dropAction`](../interfaces/IDropStrategy.md#dropaction) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDialogComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDialogComponent.md new file mode 100644 index 000000000..a22e90ae4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDialogComponent.md @@ -0,0 +1,679 @@ +# Class: IgxDialogComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L47) + +**Ignite UI for Angular Dialog Window** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html) + +The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display +more complicated visuals such as a user sign-in form. It also provides a right and left button +which can be used for custom actions. + +Example: +```html +<button type="button" igxButton (click)="form.open()">Show Dialog</button> +<igx-dialog #form title="Sign In" rightButtonLabel="OK"> + <div> + <igx-input-group> + <input type="text" igxInput/> + <label igxLabel>Username</label> + </igx-input-group> + </div> + <div> + <igx-input-group> + <input type="password" igxInput/> + <label igxLabel>Password</label> + </igx-input-group> + </div> +</igx-dialog> +``` + +## Implements + +- [`IToggleView`](../interfaces/IToggleView.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDialogComponent**(): `IgxDialogComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L436) + +#### Returns + +`IgxDialogComponent` + +## Properties + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L293) + +An event that is emitted after the dialog is closed. +```html +<igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK"> +</igx-dialog> +``` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L283) + +An event that is emitted before the dialog is closed. +```html +<igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK"> +</igx-dialog> +``` + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:423](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L423) + +*** + +### focusTrap + +> **focusTrap**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L111) + +Set whether the Tab key focus is trapped within the dialog when opened. +Defaults to `true`. +```html +<igx-dialog focusTrap="false""></igx-dialog> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L69) + +Sets the value of the `id` attribute. If not provided it will be automatically generated. +```html +<igx-dialog [id]="'igx-dialog-56'" #alert title="Notification" + leftButtonLabel="OK" (leftButtonSelect)="alert.close()"> +</igx-dialog> +``` + +*** + +### leftButtonLabel + +> **leftButtonLabel**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L138) + +Sets the `label` of the left button of the dialog. +```html +<igx-dialog leftButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### leftButtonRipple + +> **leftButtonRipple**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L161) + +Sets the left button `ripple`. The `ripple` animates a click/tap to a component as a series of fading waves. +The property accepts all valid CSS color property values. +```html +<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### leftButtonSelect + +> **leftButtonSelect**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L303) + +An event that is emitted when the left button is clicked. +```html +<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel"> +</igx-dialog> +``` + +*** + +### leftButtonType + +> **leftButtonType**: [`IgxButtonType`](../type-aliases/IgxButtonType.md) = `'flat'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:151](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L151) + +Sets the left button `type`. The types are `flat`, `contained` and `fab`. +The `flat` type button is a rectangle and doesn't have a shadow. <br> +The `contained` type button is also a rectangle but has a shadow. <br> +The `fab` type button is a circle with a shadow. <br> +The default value is `flat`. +```html +<igx-dialog leftButtonType="contained" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### message + +> **message**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L129) + +Sets the message text of the dialog. +```html +<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L273) + +An event that is emitted after the dialog is opened. +```html +<igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"> +</igx-dialog> +``` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L263) + +An event that is emitted before the dialog is opened. +```html +<igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"> +</igx-dialog> +``` + +*** + +### rightButtonLabel + +> **rightButtonLabel**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L170) + +Sets the `label` of the right button of the dialog. +```html +<igx-dialog rightButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### rightButtonRipple + +> **rightButtonRipple**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L192) + +Sets the right button `ripple`. +```html +<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### rightButtonSelect + +> **rightButtonSelect**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L315) + +An event that is emitted when the right button is clicked. +```html +<igx-dialog (rightButtonSelect)="onDialogOKSelected($event)" +#dialog title="Confirmation" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK" +rightButtonRipple="#4CAF50" closeOnOutsideSelect="true"> +</igx-dialog> +``` + +*** + +### rightButtonType + +> **rightButtonType**: [`IgxButtonType`](../type-aliases/IgxButtonType.md) = `'flat'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L183) + +Sets the right button `type`. The types are `flat`, `contained` and `fab`. +The `flat` type button is a rectangle and doesn't have a shadow. <br> +The `contained` type button is also a rectangle but has a shadow. <br> +The `fab` type button is a circle with a shadow. <br> +The default value is `flat`. +```html +<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### title + +> **title**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L120) + +Sets the title of the dialog. +```html +<igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog> +``` + +*** + +### toggleRef + +> **toggleRef**: [`IgxToggleDirective`](IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L57) + +## Accessors + +### closeOnEscape + +#### Get Signature + +> **get** **closeOnEscape**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L94) + +Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true` +```html +<igx-dialog [closeOnEscape]="false" ></igx-dialog> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **closeOnEscape**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L98) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### closeOnOutsideSelect + +#### Get Signature + +> **get** **closeOnOutsideSelect**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L203) + +Gets/Sets whether the dialog should close on click outside the component. By default it's false. +```html +<igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()" +rightButtonLabel="OK" rightButtonRipple="#4CAF50" (rightButtonSelect)="onDialogOKSelected($event)"> +</igx-dialog> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **closeOnOutsideSelect**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L207) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### isCollapsed + +#### Get Signature + +> **get** **isCollapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L380) + +##### Returns + +`boolean` + +*** + +### isModal + +#### Get Signature + +> **get** **isModal**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L78) + +Controls whether the dialog should be shown as modal. Defaults to `true` +```html +<igx-dialog [isModal]="false" ></igx-dialog> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isModal**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L82) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### isOpen + +#### Get Signature + +> **get** **isOpen**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L363) + +State of the dialog. + +```typescript +// get +let dialogIsOpen = this.dialog.isOpen; +``` + +```html +<!--set--> +<igx-dialog [isOpen]='false'></igx-dialog> +``` + +Two-way data binding. +```html +<!--set--> +<igx-dialog [(isOpen)]='model.isOpen'></igx-dialog> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isOpen**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L366) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### positionSettings + +#### Get Signature + +> **get** **positionSettings**(): [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:220](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L220) + +Get the position and animation settings used by the dialog. +```typescript +@ViewChild('alert', { static: true }) public alert: IgxDialogComponent; +let currentPosition: PositionSettings = this.alert.positionSettings +``` + +##### Returns + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Set Signature + +> **set** **positionSettings**(`settings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:242](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L242) + +Set the position and animation settings used by the dialog. +```typescript +import { slideInLeft, slideOutRight } from 'igniteui-angular'; +... +@ViewChild('alert', { static: true }) public alert: IgxDialogComponent; + public newPositionSettings: PositionSettings = { + openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), + closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), + horizontalDirection: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Middle, + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Middle, + minSize: { height: 100, width: 100 } + }; +this.alert.positionSettings = this.newPositionSettings; +``` + +##### Parameters + +###### settings + +[`PositionSettings`](../interfaces/PositionSettings.md) + +##### Returns + +`void` + +*** + +### role + +#### Get Signature + +> **get** **role**(): `"dialog"` \| `"alertdialog"` \| `"alert"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:395](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L395) + +Returns the value of the role of the dialog. The valid values are `dialog`, `alertdialog`, `alert`. +```typescript +@ViewChild("MyDialog") +public dialog: IgxDialogComponent; +ngAfterViewInit() { + let dialogRole = this.dialog.role; +} + ``` + +##### Returns + +`"dialog"` \| `"alertdialog"` \| `"alert"` + +*** + +### state + +#### Get Signature + +> **get** **state**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:339](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L339) + +Returns the value of state. Possible state values are "open" or "close". +```typescript +@ViewChild("MyDialog") +public dialog: IgxDialogComponent; +ngAfterViewInit() { + let dialogState = this.dialog.state; +} +``` + +##### Returns + +`string` + +*** + +### titleId + +#### Get Signature + +> **get** **titleId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L419) + +Returns the value of the title id. +```typescript + @ViewChild("MyDialog") +public dialog: IgxDialogComponent; +ngAfterViewInit() { + let dialogTitle = this.dialog.titleId; +} +``` + +##### Returns + +`string` + +## Methods + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:486](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L486) + +A method that that closes the dialog. + +#### Returns + +`void` + +#### Member Of + +IgxDialogComponent +```html +<button type="button" (click)="dialog.close() igxButton="contained">Trigger Dialog</button> +<igx-dialog #dialog></igx-dialog> +``` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`close`](../interfaces/IToggleView.md#close) + +*** + +### ngAfterContentInit() + +> **ngAfterContentInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:448](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L448) + +#### Returns + +`void` + +*** + +### open() + +> **open**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L463) + +A method that opens the dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) = `...` + +#### Returns + +`void` + +#### Member Of + +IgxDialogComponent +```html +<button type="button" (click)="dialog.open() igxButton="contained">Trigger Dialog</button> +<igx-dialog #dialog></igx-dialog> +``` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`open`](../interfaces/IToggleView.md#open) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:501](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L501) + +A method that opens/closes the dialog. + +#### Returns + +`void` + +#### Member Of + +IgxDialogComponent +```html +<button type="button" (click)="dialog.toggle() igxButton="contained">Trigger Dialog</button> +<igx-dialog #dialog></igx-dialog> +``` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`toggle`](../interfaces/IToggleView.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDividerDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDividerDirective.md new file mode 100644 index 000000000..8d5b4f8e8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDividerDirective.md @@ -0,0 +1,158 @@ +# Class: IgxDividerDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L16) + +## Constructors + +### Constructor + +> **new IgxDividerDirective**(): `IgxDividerDirective` + +#### Returns + +`IgxDividerDirective` + +## Properties + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L29) + +Sets/gets the `id` of the divider. +If not set, `id` will have value `"igx-divider-0"`; +```html +<igx-divider id="my-divider"></igx-divider> +``` +```typescript +let dividerId = this.divider.id; +``` + +*** + +### middle + +> **middle**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L64) + +If set to `true` and an `inset` value has been provided, +the divider will start shrinking from both ends. +```html +<igx-divider [middle]="true"></igx-divider> +``` + +*** + +### role + +> **role**: `string` = `'separator'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L37) + +Sets the value of `role` attribute. +If not the default value of `separator` will be used. + +*** + +### type + +> **type**: `string` = `IgxDividerType.SOLID` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L48) + +Sets the type of the divider. The default value +is `default`. The divider can also be `dashed`; +```html +<igx-divider type="dashed"></igx-divider> +``` + +*** + +### vertical + +> **vertical**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L74) + +Sets the divider in vertical orientation. +```html +<igx-divider [vertical]="true"></igx-divider> +``` + +## Accessors + +### inset + +#### Get Signature + +> **get** **inset**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L97) + +Gets the current divider inset in terms of +inset-inline-start representation as applied to the divider. +```typescript +const inset = this.divider.inset; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **inset**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L86) + +Sets the inset of the divider from the side(s). +If the divider attribute `middle` is set to `true`, +it will inset the divider on both sides. +```typescript +this.divider.inset = '32px'; +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### isDashed + +#### Get Signature + +> **get** **isDashed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L51) + +##### Returns + +`boolean` + +*** + +### isSolid + +#### Get Signature + +> **get** **isSolid**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L116) + +A getter that returns `true` if the type of the divider is `default`; +```typescript +const isDefault = this.divider.isDefault; +``` + +##### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragDirective.md new file mode 100644 index 000000000..a6ff7db33 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragDirective.md @@ -0,0 +1,1219 @@ +# Class: IgxDragDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L189) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDragDirective**(): `IgxDragDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L695) + +#### Returns + +`IgxDragDirective` + +## Properties + +### \_clicked + +> `protected` **\_clicked**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:631](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L631) + +*** + +### \_containerScrollIntervalId + +> `protected` **\_containerScrollIntervalId**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:643](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L643) + +*** + +### \_data + +> `protected` **\_data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L636) + +*** + +### \_defaultOffsetX + +> `protected` **\_defaultOffsetX**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L620) + +Drag ghost related properties + +*** + +### \_defaultOffsetY + +> `protected` **\_defaultOffsetY**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L621) + +*** + +### \_destroy + +> `protected` **\_destroy**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L634) + +*** + +### \_dragStarted + +> `protected` **\_dragStarted**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:617](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L617) + +*** + +### \_dynamicGhostRef + +> `protected` **\_dynamicGhostRef**: `EmbeddedViewRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L628) + +*** + +### \_ghostHostX + +> `protected` **\_ghostHostX**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:626](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L626) + +*** + +### \_ghostHostY + +> `protected` **\_ghostHostY**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L627) + +*** + +### \_ghostStartX + +> `protected` **\_ghostStartX**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L624) + +*** + +### \_ghostStartY + +> `protected` **\_ghostStartY**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L625) + +*** + +### \_lastDropArea + +> `protected` **\_lastDropArea**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:632](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L632) + +*** + +### \_lastX + +> `protected` **\_lastX**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:615](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L615) + +*** + +### \_lastY + +> `protected` **\_lastY**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:616](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L616) + +*** + +### \_offsetX + +> `protected` **\_offsetX**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:622](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L622) + +*** + +### \_offsetY + +> `protected` **\_offsetY**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L623) + +*** + +### \_originalScrollContainerHeight + +> `protected` **\_originalScrollContainerHeight**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L639) + +*** + +### \_originalScrollContainerWidth + +> `protected` **\_originalScrollContainerWidth**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:638](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L638) + +*** + +### \_pointerDownId + +> `protected` **\_pointerDownId**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L630) + +*** + +### \_removeOnDestroy + +> `protected` **\_removeOnDestroy**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:635](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L635) + +*** + +### \_scrollContainer + +> `protected` **\_scrollContainer**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L637) + +*** + +### \_scrollContainerStep + +> `protected` **\_scrollContainerStep**: `number` = `5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L640) + +*** + +### \_scrollContainerStepMs + +> `protected` **\_scrollContainerStepMs**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L641) + +*** + +### \_scrollContainerThreshold + +> `protected` **\_scrollContainerThreshold**: `number` = `25` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L642) + +*** + +### \_startX + +> `protected` **\_startX**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L613) + +*** + +### \_startY + +> `protected` **\_startY**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L614) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:688](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L688) + +*** + +### dragChannel + +> **dragChannel**: `string` \| `number` \| `string`[] \| `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L253) + +A property that provides a way for igxDrag and igxDrop to be linked through channels. +It accepts single value or an array of values and evaluates then using strict equality. +```html +<div igxDrag [dragChannel]="'odd'"> + <span>95</span> +</div> +<div igxDrop [dropChannel]="['odd', 'irrational']"> + <span>Numbers drop area!</span> +</div> +``` + +#### Memberof + +IgxDragDirective + +*** + +### dragClick + +> **dragClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:406](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L406) + +Event triggered when the draggable element is clicked. +```html +<div igxDrag (dragClick)="onDragClick()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public onDragClick(){ + alert("The element has been clicked!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### dragDirection + +> **dragDirection**: [`DragDirection`](../enumerations/DragDirection.md) = `DragDirection.BOTH` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L236) + +Sets the directions that the element can be dragged. +By default it is set to both horizontal and vertical directions. +```html +<div igxDrag [dragDirection]="dragDir"> + <span>Drag Me!</span> +</div> +``` +```typescript +public dragDir = DragDirection.HORIZONTAL; +``` + +#### Memberof + +IgxDragDirective + +*** + +### dragEnd + +> **dragEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:388](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L388) + +Event triggered when the draggable element is released. +```html +<div igxDrag (dragEnd)="onDragEnd()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public onDragEnd(){ + alert("The drag has ended!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### dragMove + +> **dragMove**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:370](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L370) + +Event triggered when the draggable element has been moved. +```html +<div igxDrag (dragMove)="onDragMove()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public onDragMove(){ + alert("The element has moved!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### dragStart + +> **dragStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:352](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L352) + +Event triggered when the draggable element drag starts. +```html +<div igxDrag (dragStart)="onDragStart()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public onDragStart(){ + alert("The drag has stared!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### dragTolerance + +> **dragTolerance**: `number` = `5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L219) + +Sets the tolerance in pixels before drag starts. +By default the drag starts after the draggable element is moved by 5px. +```html +<div igxDrag [dragTolerance]="100"> + <span>Drag Me!</span> +</div> +``` + +#### Memberof + +IgxDragDirective + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L689) + +*** + +### ghost + +> **ghost**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L268) + +Sets whether the base element should be moved, or a ghost element should be rendered that represents it instead. +By default it is set to `true`. +If it is set to `false` when dragging the base element is moved instead and no ghost elements are rendered. +```html +<div igxDrag [ghost]="false"> + <span>Drag Me!</span> +</div> +``` + +#### Memberof + +IgxDragDirective + +*** + +### ghostClass + +> **ghostClass**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L281) + +Sets a custom class that will be added to the `ghostElement` element. +```html +<div igxDrag [ghostClass]="'ghostElement'"> + <span>Drag Me!</span> +</div> +``` + +#### Memberof + +IgxDragDirective + +*** + +### ghostContext + +> `protected` **ghostContext**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:612](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L612) + +*** + +### ghostCreate + +> **ghostCreate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L424) + +Event triggered when the drag ghost element is created. +```html +<div igxDrag (ghostCreate)="ghostCreated()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public ghostCreated(){ + alert("The ghost has been created!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### ghostDestroy + +> **ghostDestroy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L442) + +Event triggered when the drag ghost element is created. +```html +<div igxDrag (ghostDestroy)="ghostDestroyed()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public ghostDestroyed(){ + alert("The ghost has been destroyed!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### ghostHost + +> **ghostHost**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:328](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L328) + +Sets the element to which the dragged element will be appended. +By default it's set to null and the dragged element is appended to the body. +```html +<div #hostDiv></div> +<div igxDrag [ghostHost]="hostDiv"> + <span>Drag Me!</span> +</div> +``` + +#### Memberof + +IgxDragDirective + +*** + +### ghostStyle + +> **ghostStyle**: `object` = `{}` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L294) + +Set styles that will be added to the `ghostElement` element. +```html +<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}"> + <span>Drag Me!</span> +</div> +``` + +#### Memberof + +IgxDragDirective + +*** + +### ghostTemplate + +> **ghostTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L313) + +Specifies a template for the ghost element created when dragging starts and `ghost` is true. +By default a clone of the base element the igxDrag is instanced is created. +```html +<div igxDrag [ghostTemplate]="customGhost"> + <span>Drag Me!</span> +</div> +<ng-template #customGhost> + <div class="customGhostStyle"> + <span>I am being dragged!</span> + </div> +</ng-template> +``` + +#### Memberof + +IgxDragDirective + +*** + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L693) + +*** + +### renderer + +> **renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:692](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L692) + +*** + +### scrollContainer + +> **scrollContainer**: `HTMLElement` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L334) + +Overrides the scroll container of the dragged element. By default its the window. + +*** + +### transitioned + +> **transitioned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L460) + +Event triggered after the draggable element is released and after its animation has finished. +```html +<div igxDrag (transitioned)="onMoveEnd()"> + <span>Drag Me!</span> +</div> +``` +```typescript +public onMoveEnd(){ + alert("The move has ended!"); +} +``` + +#### Memberof + +IgxDragDirective + +*** + +### viewContainer + +> **viewContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:690](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L690) + +*** + +### zone + +> **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L691) + +## Accessors + +### baseLeft + +#### Get Signature + +> **get** `protected` **baseLeft**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L535) + +##### Returns + +`number` + +*** + +### baseOriginLeft + +#### Get Signature + +> **get** `protected` **baseOriginLeft**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L543) + +##### Returns + +`number` + +*** + +### baseOriginTop + +#### Get Signature + +> **get** `protected` **baseOriginTop**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:547](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L547) + +##### Returns + +`number` + +*** + +### baseTop + +#### Get Signature + +> **get** `protected` **baseTop**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:539](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L539) + +##### Returns + +`number` + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L203) + +##### Returns + +`any` + +#### Set Signature + +> **set** **data**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L199) + +- Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. +```html +<div [igxDrag]="{ source: myElement }"></div> +``` + +##### Memberof + +IgxDragDirective + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +*** + +### ghostLeft + +#### Get Signature + +> **get** `protected` **ghostLeft**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:560](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L560) + +##### Returns + +`number` + +#### Set Signature + +> **set** `protected` **ghostLeft**(`pageX`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L551) + +##### Parameters + +###### pageX + +`number` + +##### Returns + +`void` + +*** + +### ghostOffsetX + +#### Get Signature + +> **get** **ghostOffsetX**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:663](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L663) + +##### Returns + +`any` + +#### Set Signature + +> **set** **ghostOffsetX**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L659) + +Sets the offset of the dragged element relative to the mouse in pixels. +By default it's taking the relative position to the mouse when the drag started and keeps it the same. +```html +<div #hostDiv></div> +<div igxDrag [ghostOffsetX]="0"> + <span>Drag Me!</span> +</div> +``` + +##### Memberof + +IgxDragDirective + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +*** + +### ghostOffsetY + +#### Get Signature + +> **get** **ghostOffsetY**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L684) + +##### Returns + +`any` + +#### Set Signature + +> **set** **ghostOffsetY**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L680) + +Sets the offset of the dragged element relative to the mouse in pixels. +By default it's taking the relative position to the mouse when the drag started and keeps it the same. +```html +<div #hostDiv></div> +<div igxDrag [ghostOffsetY]="0"> + <span>Drag Me!</span> +</div> +``` + +##### Memberof + +IgxDragDirective + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +*** + +### ghostTop + +#### Get Signature + +> **get** `protected` **ghostTop**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:575](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L575) + +##### Returns + +`number` + +#### Set Signature + +> **set** `protected` **ghostTop**(`pageY`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L566) + +##### Parameters + +###### pageY + +`number` + +##### Returns + +`void` + +*** + +### location + +#### Get Signature + +> **get** **location**(): [`IgxDragLocation`](IgxDragLocation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:490](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L490) + +Gets the current location of the element relative to the page. + +##### Returns + +[`IgxDragLocation`](IgxDragLocation.md) + +*** + +### originLocation + +#### Get Signature + +> **get** **originLocation**(): [`IgxDragLocation`](IgxDragLocation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L497) + +Gets the original location of the element before dragging started. + +##### Returns + +[`IgxDragLocation`](IgxDragLocation.md) + +*** + +### windowScrollHeight + +#### Get Signature + +> **get** `protected` **windowScrollHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L589) + +##### Returns + +`any` + +*** + +### windowScrollLeft + +#### Get Signature + +> **get** `protected` **windowScrollLeft**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L585) + +##### Returns + +`any` + +*** + +### windowScrollTop + +#### Get Signature + +> **get** `protected` **windowScrollTop**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L581) + +##### Returns + +`any` + +*** + +### windowScrollWidth + +#### Get Signature + +> **get** `protected` **windowScrollWidth**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:593](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L593) + +##### Returns + +`any` + +## Methods + +### clearGhost() + +> `protected` **clearGhost**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1229](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1229) + +#### Returns + +`void` + +*** + +### detachGhost() + +> `protected` **detachGhost**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1222) + +#### Returns + +`void` + +*** + +### getContainerScrollDirection() + +> `protected` **getContainerScrollDirection**(): `DragScrollDirection` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1514](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1514) + +#### Returns + +`DragScrollDirection` + +*** + +### getGhostHostBaseOffsetX() + +> `protected` **getGhostHostBaseOffsetX**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1490](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1490) + +Since we are using absolute position to move the ghost, the ghost host might not have position: relative. +Combined with position static, this means that the absolute position in the browser is relative to the offsetParent. +The offsetParent is pretty much the closes parent that has position: relative, or if no such until it reaches the body. +That's why if this is the case, we need to know how much we should compensate for the ghostHost being offset from +its offsetParent. + +OffsetParent can be null in the case of position: fixed applied to the ghost host or display: none. In that case +just get the clientRects of the ghost host. + +#### Returns + +`any` + +*** + +### getGhostHostBaseOffsetY() + +> `protected` **getGhostHostBaseOffsetY**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1502](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1502) + +#### Returns + +`any` + +*** + +### getTransformX() + +> `protected` **getTransformX**(`elem`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1449) + +#### Parameters + +##### elem + +`any` + +#### Returns + +`number` + +*** + +### getTransformY() + +> `protected` **getTransformY**(`elem`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1460) + +#### Parameters + +##### elem + +`any` + +#### Returns + +`number` + +*** + +### onScrollContainer() + +> `protected` **onScrollContainer**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1592](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1592) + +#### Returns + +`void` + +*** + +### onScrollContainerStep() + +> `protected` **onScrollContainerStep**(`scrollDir`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1543) + +#### Parameters + +##### scrollDir + +`DragScrollDirection` + +#### Returns + +`void` + +*** + +### setLocation() + +> **setLocation**(`newLocation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L805) + +Sets desired location of the base element or ghost element if rended relative to the document. + +#### Parameters + +##### newLocation + +[`IgxDragLocation`](IgxDragLocation.md) + +New location that should be applied. It is advised to get new location using getBoundingClientRects() + scroll. + +#### Returns + +`void` + +*** + +### setTransformXY() + +> `protected` **setTransformXY**(`x`, `y`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1472](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1472) + +Method setting transformation to the base draggable element. + +#### Parameters + +##### x + +`number` + +##### y + +`number` + +#### Returns + +`void` + +*** + +### transitionTo() + +> **transitionTo**(`target`, `customAnimArgs?`, `startLocation?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L882) + +Animates the base or ghost element to a specific target location or other element using transition. +If `ghost` is true but there is not ghost rendered, it will be created and animated. +It is recommended to use 'getBoundingClientRects() + pageScroll' when determining desired location. + +#### Parameters + +##### target + +`any` + +Target that the base or ghost will transition to. It can be either location in the page or another HTML element. + +##### customAnimArgs? + +[`IDragCustomTransitionArgs`](../interfaces/IDragCustomTransitionArgs.md) + +Custom transition properties that will be applied when performing the transition. + +##### startLocation? + +[`IgxDragLocation`](IgxDragLocation.md) + +Start location from where the transition should start. + +#### Returns + +`void` + +*** + +### transitionToOrigin() + +> **transitionToOrigin**(`customAnimArgs?`, `startLocation?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L830) + +Animates the base or ghost element depending on the `ghost` input to its initial location. +If `ghost` is true but there is not ghost rendered, it will be created and animated. +If the base element has changed its DOM position its initial location will be changed accordingly. + +#### Parameters + +##### customAnimArgs? + +[`IDragCustomTransitionArgs`](../interfaces/IDragCustomTransitionArgs.md) + +Custom transition properties that will be applied when performing the transition. + +##### startLocation? + +[`IgxDragLocation`](IgxDragLocation.md) + +Start location from where the transition should start. + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragHandleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragHandleDirective.md new file mode 100644 index 000000000..19ee4a615 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragHandleDirective.md @@ -0,0 +1,29 @@ +# Class: IgxDragHandleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L161) + +## Constructors + +### Constructor + +> **new IgxDragHandleDirective**(): `IgxDragHandleDirective` + +#### Returns + +`IgxDragHandleDirective` + +## Properties + +### baseClass + +> **baseClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L165) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L162) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragIgnoreDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragIgnoreDirective.md new file mode 100644 index 000000000..430bc58c3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragIgnoreDirective.md @@ -0,0 +1,29 @@ +# Class: IgxDragIgnoreDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L177) + +## Constructors + +### Constructor + +> **new IgxDragIgnoreDirective**(): `IgxDragIgnoreDirective` + +#### Returns + +`IgxDragIgnoreDirective` + +## Properties + +### baseClass + +> **baseClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L181) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L178) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragLocation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragLocation.md new file mode 100644 index 000000000..93c9c41f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDragLocation.md @@ -0,0 +1,41 @@ +# Class: IgxDragLocation + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L147) + +## Constructors + +### Constructor + +> **new IgxDragLocation**(`_pageX`, `_pageY`): `IgxDragLocation` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:151](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L151) + +#### Parameters + +##### \_pageX + +`any` + +##### \_pageY + +`any` + +#### Returns + +`IgxDragLocation` + +## Properties + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L148) + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L149) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDirective.md new file mode 100644 index 000000000..f7f9e142a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDirective.md @@ -0,0 +1,325 @@ +# Class: IgxDropDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1613) + +## Extended by + +- [`IgxColumnMovingDropDirective`](IgxColumnMovingDropDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDropDirective**(): `IgxDropDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1777](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1777) + +#### Returns + +`IgxDropDirective` + +## Properties + +### \_dropStrategy + +> `protected` **\_dropStrategy**: [`IDropStrategy`](../interfaces/IDropStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1769](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1769) + +*** + +### \_renderer + +> `protected` **\_renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1774) + +*** + +### dropChannel + +> **dropChannel**: `string` \| `number` \| `string`[] \| `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1646](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1646) + +A property that provides a way for igxDrag and igxDrop to be linked through channels. +It accepts single value or an array of values and evaluates then using strict equality. +```html +<div igxDrag [dragChannel]="'odd'"> + <span>95</span> +</div> +<div igxDrop [dropChannel]="['odd', 'irrational']"> + <span>Numbers drop area!</span> +</div> +``` + +#### Memberof + +IgxDropDirective + +*** + +### dropped + +> **dropped**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1751](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1751) + +Event triggered when dragged element is dropped in the area of the element. +Since the `igxDrop` has default logic that appends the dropped element as a child, it can be canceled here. +To cancel the default logic the `cancel` property of the event needs to be set to true. +```html +<div class="cageArea" igxDrop (dropped)="dragDrop()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragDrop(){ + alert("A draggable element has been dropped in the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1773](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1773) + +*** + +### enter + +> **enter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1698) + +Event triggered when dragged element enters the area of the element. +```html +<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +*** + +### leave + +> **leave**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1732) + +Event triggered when dragged element leaves the area of the element. +```html +<div class="cageArea" igxDrop (leave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragLeave(){ + alert("A draggable element has left the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +*** + +### over + +> **over**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1715) + +Event triggered when dragged element enters the area of the element. +```html +<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()"> +</div> +``` +```typescript +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +``` + +#### Memberof + +IgxDropDirective + +## Accessors + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1627) + +##### Returns + +`any` + +#### Set Signature + +> **set** **data**(`v`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1623) + +- Save data inside the `igxDrop` directive. This can be set when instancing `igxDrop` on an element. +```html +<div [igxDrop]="{ source: myElement }"></div> +``` + +##### Memberof + +IgxDropDirective + +##### Parameters + +###### v + +`any` + +##### Returns + +`void` + +*** + +### dropStrategy + +#### Get Signature + +> **get** **dropStrategy**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1679](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1679) + +##### Returns + +`any` + +#### Set Signature + +> **set** **dropStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1675](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1675) + +Sets a drop strategy type that will be executed when an `IgxDrag` element is released inside + the current drop area. The provided strategies are: + - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions. + - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`. + - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`. + - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted + at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`. +```html +<div igxDrag> + <span>DragMe</span> +</div> +<div igxDrop [dropStrategy]="myDropStrategy"> + <span>Numbers drop area!</span> +</div> +``` +```typescript +import { IgxAppendDropStrategy } from 'igniteui-angular'; + +export class App { + public myDropStrategy = IgxAppendDropStrategy; +} +``` + +##### Memberof + +IgxDropDirective + +##### Parameters + +###### classRef + +`any` + +##### Returns + +`void` + +## Methods + +### getInsertIndexAt() + +> `protected` **getInsertIndexAt**(`draggedDir`, `elementsAtPoint`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1966) + +#### Parameters + +##### draggedDir + +[`IgxDragDirective`](IgxDragDirective.md) + +##### elementsAtPoint + +`any`[] + +#### Returns + +`number` + +*** + +### getWindowScrollLeft() + +> `protected` **getWindowScrollLeft**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1927) + +#### Returns + +`number` + +*** + +### getWindowScrollTop() + +> `protected` **getWindowScrollTop**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1923) + +#### Returns + +`number` + +*** + +### isDragLinked() + +> `protected` **isDragLinked**(`drag`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L1931) + +#### Parameters + +##### drag + +[`IgxDragDirective`](IgxDragDirective.md) + +#### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownBaseDirective.md new file mode 100644 index 000000000..c449db14e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownBaseDirective.md @@ -0,0 +1,433 @@ +# Abstract Class: IgxDropDownBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L23) + +An abstract class, defining a drop-down component, with: +Properties for display styles and classes +A collection items of type `IgxDropDownItemBaseDirective` +Properties and methods for navigating (highlighting/focusing) items from the collection +Properties and methods for selecting items from the collection + +## Extended by + +- [`IgxDropDownComponent`](IgxDropDownComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDropDownBaseDirective**(): `IgxDropDownBaseDirective` + +#### Returns + +`IgxDropDownBaseDirective` + +## Properties + +### \_focusedItem + +> `protected` **\_focusedItem**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L187) + +*** + +### \_height + +> `protected` **\_height**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L186) + +*** + +### \_id + +> `protected` **\_id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L188) + +*** + +### \_width + +> `protected` **\_width**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L185) + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L25) + +*** + +### collapsed + +> `abstract` `readonly` **collapsed**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L194) + +Gets if the dropdown is collapsed + +#### Implementation of + +`IDropDownList.collapsed` + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L189) + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L26) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L24) + +*** + +### height + +> **height**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L66) + +Gets/Sets the height of the drop down + +```typescript +// get +let myDropDownCurrentHeight = this.dropdown.height; +``` +```html +<!--set--> +<igx-drop-down [height]='400px'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownList.height` + +*** + +### maxHeight + +> **maxHeight**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L103) + +Gets/Sets the drop down's container max height. + +```typescript +// get +let maxHeight = this.dropdown.maxHeight; +``` +```html +<!--set--> +<igx-drop-down [maxHeight]='200px'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownList.maxHeight` + +*** + +### selectionChanging + +> **selectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L36) + +Emitted when item selection is changing, before the selection completes + +```html +<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownList.selectionChanging` + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L51) + +Gets/Sets the width of the drop down + +```typescript +// get +let myDropDownCurrentWidth = this.dropdown.width; +``` +```html +<!--set--> +<igx-drop-down [width]='160px'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownList.width` + +## Accessors + +### element + +#### Get Signature + +> **get** **element**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L158) + +Get dropdown html element + +```typescript +let myDropDownElement = this.dropdown.element; +``` + +##### Returns + +`any` + +*** + +### headers + +#### Get Signature + +> **get** **headers**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L138) + +Get all header items + +```typescript +let myDropDownHeaderItems = this.dropdown.headers; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +#### Implementation of + +`IDropDownList.headers` + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L82) + +Gets/Sets the drop down's id + +```typescript +// get +let myDropDownCurrentId = this.dropdown.id; +``` +```html +<!--set--> +<igx-drop-down [id]='newDropDownId'></igx-drop-down> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L85) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IDropDownList.id` + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L118) + +Get all non-header items + +```typescript +let myDropDownItems = this.dropdown.items; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +#### Implementation of + +`IDropDownList.items` + +## Methods + +### getNearestSiblingFocusableItemIndex() + +> `protected` **getNearestSiblingFocusableItemIndex**(`startIndex`, `direction`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L308) + +#### Parameters + +##### startIndex + +`number` + +##### direction + +`Navigate` + +#### Returns + +`number` + +*** + +### navigate() + +> `protected` **navigate**(`direction`, `currentIndex?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L299) + +#### Parameters + +##### direction + +`Navigate` + +##### currentIndex? + +`number` + +#### Returns + +`void` + +*** + +### navigateItem() + +> **navigateItem**(`newIndex`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L246) + +Navigates to the item on the specified index + +#### Parameters + +##### newIndex + +`number` + +number - the index of the item in the `items` collection + +#### Returns + +`void` + +#### Implementation of + +`IDropDownList.navigateItem` + +*** + +### ngOnInit() + +> **ngOnInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L196) + +#### Returns + +`void` + +*** + +### onItemActionKey() + +> **onItemActionKey**(`key`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L201) + +Keydown Handler + +#### Parameters + +##### key + +[`DropDownActionKey`](../type-aliases/DropDownActionKey.md) + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +`IDropDownList.onItemActionKey` + +*** + +### scrollToHiddenItem() + +> `protected` **scrollToHiddenItem**(`newItem`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L287) + +#### Parameters + +##### newItem + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownComponent.md new file mode 100644 index 000000000..2598e2276 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownComponent.md @@ -0,0 +1,1028 @@ +# Class: IgxDropDownComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L56) + +**Ignite UI for Angular DropDown** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down) + +The Ignite UI for Angular Drop Down displays a scrollable list of items which may be visually grouped and +supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down + +Example: +```html +<igx-drop-down> + <igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}> + {{ item.value }} + </igx-drop-down-item> +</igx-drop-down> +``` + +## Extends + +- [`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md) + +## Extended by + +- [`IgxSelectComponent`](IgxSelectComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDropDownComponent**(): `IgxDropDownComponent` + +#### Returns + +`IgxDropDownComponent` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`constructor`](IgxDropDownBaseDirective.md#constructor) + +## Properties + +### \_focusedItem + +> `protected` **\_focusedItem**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L187) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`_focusedItem`](IgxDropDownBaseDirective.md#_focuseditem) + +*** + +### \_height + +> `protected` **\_height**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L186) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`_height`](IgxDropDownBaseDirective.md#_height) + +*** + +### \_id + +> `protected` **\_id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L188) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`_id`](IgxDropDownBaseDirective.md#_id) + +*** + +### \_scrollPosition + +> `protected` **\_scrollPosition**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L237) + +*** + +### \_width + +> `protected` **\_width**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L185) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`_width`](IgxDropDownBaseDirective.md#_width) + +*** + +### allowItemsFocus + +> **allowItemsFocus**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L125) + +Gets/sets whether items take focus. Disabled by default. +When enabled, drop down items gain tab index and are focused when active - +this includes activating the selected item when opening the drop down and moving with keyboard navigation. + +Note: Keep that focus shift in mind when using the igxDropDownItemNavigation directive +and ensure it's placed either on each focusable item or a common ancestor to allow it to handle keyboard events. + +```typescript +// get +let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus; +``` + +```html +<!--set--> +<igx-drop-down [allowItemsFocus]='true'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.allowItemsFocus` + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L25) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`cdr`](IgxDropDownBaseDirective.md#cdr) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L104) + +Emitted after the dropdown is closed + +```html +<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.closed` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L94) + +Emitted before the dropdown is closed + +```html +<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.closing` + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L189) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`computedStyles`](IgxDropDownBaseDirective.md#computedstyles) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L236) + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L26) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`document`](IgxDropDownBaseDirective.md#document) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L24) + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`elementRef`](IgxDropDownBaseDirective.md#elementref) + +*** + +### height + +> **height**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L66) + +Gets/Sets the height of the drop down + +```typescript +// get +let myDropDownCurrentHeight = this.dropdown.height; +``` +```html +<!--set--> +<igx-drop-down [height]='400px'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.height` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`height`](IgxDropDownBaseDirective.md#height) + +*** + +### labelledBy + +> **labelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L134) + +Sets aria-labelledby attribute value. +```html +<igx-drop-down [labelledby]="labelId"></igx-drop-down> +``` + +*** + +### maxHeight + +> **maxHeight**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L103) + +Gets/Sets the drop down's container max height. + +```typescript +// get +let maxHeight = this.dropdown.maxHeight; +``` +```html +<!--set--> +<igx-drop-down [maxHeight]='200px'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.maxHeight` + +#### Inherited from + +`IgxDropDownComponent`.[`maxHeight`](#maxheight) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L84) + +Emitted after the dropdown is opened + +```html +<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.opened` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L74) + +Emitted before the dropdown is opened + +```html +<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.opening` + +*** + +### role + +> **role**: `string` = `'listbox'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L144) + +Gets/sets the `role` attribute of the drop down. Default is 'listbox'. + +```html + <igx-drop-down [role]="customRole"></igx-drop-down-item> +``` + +*** + +### scrollContainerRef + +> `protected` **scrollContainerRef**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L153) + +*** + +### selection + +> `protected` **selection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L57) + +*** + +### selectionChanging + +> **selectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L36) + +Emitted when item selection is changing, before the selection completes + +```html +<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.selectionChanging` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`selectionChanging`](IgxDropDownBaseDirective.md#selectionchanging) + +*** + +### toggleDirective + +> `protected` **toggleDirective**: [`IgxToggleDirective`](IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L150) + +*** + +### virtDir + +> `protected` **virtDir**: `IgxForOfToken`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L147) + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L51) + +Gets/Sets the width of the drop down + +```typescript +// get +let myDropDownCurrentWidth = this.dropdown.width; +``` +```html +<!--set--> +<igx-drop-down [width]='160px'></igx-drop-down> +``` + +#### Implementation of + +`IDropDownBase.width` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`width`](IgxDropDownBaseDirective.md#width) + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L221) + +Gets if the dropdown is collapsed + +```typescript +let isCollapsed = this.dropdown.collapsed; +``` + +##### Returns + +`boolean` + +Gets if the dropdown is collapsed + +#### Implementation of + +`IDropDownBase.collapsed` + +#### Overrides + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`collapsed`](IgxDropDownBaseDirective.md#collapsed) + +*** + +### collectionLength + +#### Get Signature + +> **get** `protected` **collectionLength**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L230) + +##### Returns + +`number` + +*** + +### element + +#### Get Signature + +> **get** **element**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L158) + +Get dropdown html element + +```typescript +let myDropDownElement = this.dropdown.element; +``` + +##### Returns + +`any` + +#### Implementation of + +`IDropDownBase.element` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`element`](IgxDropDownBaseDirective.md#element) + +*** + +### headers + +#### Get Signature + +> **get** **headers**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L138) + +Get all header items + +```typescript +let myDropDownHeaderItems = this.dropdown.headers; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +#### Implementation of + +`IDropDownBase.headers` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`headers`](IgxDropDownBaseDirective.md#headers) + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L183) + +Gets/Sets the drop down's id + +```typescript +// get +let myDropDownCurrentId = this.dropdown.id; +``` +```html +<!--set--> +<igx-drop-down [id]='newDropDownId'></igx-drop-down> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L186) + +Gets/Sets the drop down's id + +```typescript +// get +let myDropDownCurrentId = this.dropdown.id; +``` +```html +<!--set--> +<igx-drop-down [id]='newDropDownId'></igx-drop-down> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IDropDownBase.id` + +#### Overrides + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`id`](IgxDropDownBaseDirective.md#id) + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L118) + +Get all non-header items + +```typescript +let myDropDownItems = this.dropdown.items; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +#### Implementation of + +`IDropDownBase.items` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`items`](IgxDropDownBaseDirective.md#items) + +*** + +### listId + +#### Get Signature + +> **get** **listId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L195) + +Id of the internal listbox of the drop down + +##### Returns + +`string` + +*** + +### selectedItem + +#### Get Signature + +> **get** **selectedItem**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L206) + +Get currently selected item + +```typescript +let currentItem = this.dropdown.selectedItem; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +#### Implementation of + +`IDropDownBase.selectedItem` + +## Methods + +### clearSelection() + +> **clearSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L574) + +Clears the selection of the dropdown +```typescript +this.dropdown.clearSelection(); +``` + +#### Returns + +`void` + +*** + +### close() + +> **close**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L270) + +Closes the dropdown + +```typescript +this.dropdown.close(); +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +`IDropDownBase.close` + +*** + +### focusItem() + +> `protected` **focusItem**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:601](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L601) + +#### Parameters + +##### value + +`boolean` + +#### Returns + +`void` + +*** + +### getNearestSiblingFocusableItemIndex() + +> `protected` **getNearestSiblingFocusableItemIndex**(`startIndex`, `direction`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L308) + +#### Parameters + +##### startIndex + +`number` + +##### direction + +`Navigate` + +#### Returns + +`number` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`getNearestSiblingFocusableItemIndex`](IgxDropDownBaseDirective.md#getnearestsiblingfocusableitemindex) + +*** + +### isSelectionValid() + +> `protected` **isSelectionValid**(`selection`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:591](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L591) + +Checks whether the selection is valid +`null` - the selection should be emptied +Virtual? - the selection should at least have and `index` and `value` property +Non-virtual? - the selection should be a valid drop-down item and **not** be a header + +#### Parameters + +##### selection + +`any` + +#### Returns + +`boolean` + +*** + +### navigate() + +> `protected` **navigate**(`direction`, `currentIndex?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L299) + +#### Parameters + +##### direction + +`Navigate` + +##### currentIndex? + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`navigate`](IgxDropDownBaseDirective.md#navigate) + +*** + +### navigateItem() + +> **navigateItem**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L316) + +Navigates to the item on the specified index +If the data in the drop-down is virtualized, pass the index of the item in the virtualized data. + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Implementation of + +`IDropDownBase.navigateItem` + +#### Overrides + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`navigateItem`](IgxDropDownBaseDirective.md#navigateitem) + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L458) + +#### Returns + +`void` + +*** + +### ngOnInit() + +> **ngOnInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L196) + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`ngOnInit`](IgxDropDownBaseDirective.md#ngoninit) + +*** + +### onItemActionKey() + +> **onItemActionKey**(`key`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L465) + +Keydown Handler + +#### Parameters + +##### key + +[`DropDownActionKey`](../type-aliases/DropDownActionKey.md) + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +`IDropDownBase.onItemActionKey` + +#### Overrides + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`onItemActionKey`](IgxDropDownBaseDirective.md#onitemactionkey) + +*** + +### open() + +> **open**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L246) + +Opens the dropdown + +```typescript +this.dropdown.open(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +`IDropDownBase.open` + +*** + +### scrollToHiddenItem() + +> `protected` **scrollToHiddenItem**(`newItem`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L287) + +#### Parameters + +##### newItem + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md).[`scrollToHiddenItem`](IgxDropDownBaseDirective.md#scrolltohiddenitem) + +*** + +### scrollToItem() + +> `protected` **scrollToItem**(`item`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:597](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L597) + +#### Parameters + +##### item + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +#### Returns + +`void` + +*** + +### setSelectedItem() + +> **setSelectedItem**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L294) + +Select an item by index + +#### Parameters + +##### index + +`number` + +of the item to select; If the drop down uses *igxFor, pass the index in data + +#### Returns + +`void` + +#### Implementation of + +`IDropDownBase.setSelectedItem` + +*** + +### skipHeader() + +> `protected` **skipHeader**(`direction`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:616](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L616) + +#### Parameters + +##### direction + +`Navigate` + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L281) + +Toggles the dropdown + +```typescript +this.dropdown.toggle(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +`IDropDownBase.toggle` + +*** + +### updateItemFocus() + +> `protected` **updateItemFocus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:607](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L607) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownGroupComponent.md new file mode 100644 index 000000000..c86928fba --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownGroupComponent.md @@ -0,0 +1,94 @@ +# Class: IgxDropDownGroupComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L16) + +The `<igx-drop-down-item>` is a container intended for row items in +a `<igx-drop-down>` container. + +## Extended by + +- [`IgxSelectGroupComponent`](IgxSelectGroupComponent.md) + +## Constructors + +### Constructor + +> **new IgxDropDownGroupComponent**(): `IgxDropDownGroupComponent` + +#### Returns + +`IgxDropDownGroupComponent` + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L66) + +Sets/gets if the item group is disabled + +```typescript +const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; +// get +... +const groupState: boolean = myDropDownGroup.disabled; +... +//set +... +myDropDownGroup,disabled = false; +... +``` + +```html +<igx-drop-down-item-group [label]="'My Items'" [disabled]="true"> + <igx-drop-down-item *ngFor="let item of items[index]" [value]="item.value"> + {{ item.text }} + </igx-drop-down-item> +</igx-drop-down-item-group> +``` + +**NOTE:** All items inside of a disabled drop down group will be treated as disabled + +*** + +### label + +> **label**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L90) + +Sets/gets the label of the item group + +```typescript +const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; +// get +... +const myLabel: string = myDropDownGroup.label; +... +// set +... +myDropDownGroup.label = 'My New Label'; +... +``` + +```html +<igx-drop-down-item-group [label]="'My new Label'"> + ... +</igx-drop-down-item-group> +``` + +## Accessors + +### labelledBy + +#### Get Signature + +> **get** **labelledBy**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L25) + +##### Returns + +`string` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemBaseDirective.md new file mode 100644 index 000000000..0994b454c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemBaseDirective.md @@ -0,0 +1,429 @@ +# Class: IgxDropDownItemBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L19) + +An abstract class defining a drop-down item: +With properties / styles for selection, highlight, height +Bindable property for passing data (`value: any`) +Parent component (has to be used under a parent with type `IDropDownBase`) +Method for handling click on Host() + +## Extended by + +- [`IgxDropDownItemComponent`](IgxDropDownItemComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxDropDownItemBaseDirective**(): `IgxDropDownItemBaseDirective` + +#### Returns + +`IgxDropDownItemBaseDirective` + +## Properties + +### \_disabled + +> `protected` **\_disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L262) + +*** + +### \_index + +> `protected` **\_index**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:261](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L261) + +*** + +### \_label + +> `protected` **\_label**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L263) + +*** + +### \_selected + +> `protected` **\_selected**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L260) + +*** + +### dropDown + +> `protected` **dropDown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L20) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L21) + +*** + +### group + +> `protected` **group**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L22) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L38) + +Sets/gets the `id` of the item. +```html +<igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item> +``` +```typescript +let itemId = this.item.id; +``` + +#### Memberof + +IgxSelectItemComponent + +*** + +### isHeader + +> **isHeader**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L183) + +Sets/gets if the given item is header +```typescript + // get + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemHeader = mySelectedItem.isHeader; +``` + +```html + <!--set--> + <igx-drop-down-item *ngFor="let item of items"> + <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true"> + {{item.field}} + </div> + </igx-drop-down-item> +``` + +*** + +### role + +> **role**: `string` = `'option'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L223) + +Gets/sets the `role` attribute of the item. Default is 'option'. + +```html + <igx-drop-down-item [role]="customRole"></igx-drop-down-item> +``` + +*** + +### selection? + +> `protected` `optional` **selection?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L23) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L95) + +Gets/sets the value of the item if the item is databound + +```typescript +// usage in IgxDropDownItemComponent +// get +let mySelectedItemValue = this.dropdown.selectedItem.value; + +// set +let mySelectedItem = this.dropdown.selectedItem; +mySelectedItem.value = { id: 123, name: 'Example Name' } + +// usage in IgxComboItemComponent +// get +let myComboItemValue = this.combo.items[0].value; +``` + +## Accessors + +### ariaLabel + +#### Get Signature + +> **get** **ariaLabel**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L42) + +##### Returns + +`string` + +#### Set Signature + +> **set** **ariaLabel**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L46) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L206) + +Sets/gets if the given item is disabled + +```typescript + // get + let mySelectedItem = this.dropdown.selectedItem; + let myItemIsDisabled = mySelectedItem.disabled; +``` + +```html + <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}> + <div> + {{item.field}} + </div> + </igx-drop-down-item> +``` +**NOTE:** Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L210) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### focused + +#### Get Signature + +> **get** **focused**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L147) + +Sets/gets if the given item is focused +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemFocused = mySelectedItem.focused; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **focused**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L160) + +```html + <igx-drop-down-item *ngFor="let item of items" focused={{!item.focused}}> + <div> + {{item.field}} + </div> + </igx-drop-down-item> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### hasIndex + +#### Get Signature + +> **get** `protected` **hasIndex**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L252) + +##### Returns + +`boolean` + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L66) + +The data index of the dropdown item. + +```typescript +// get the data index of the selected dropdown item +let selectedItemIndex = this.dropdown.selectedItem.index +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **index**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L73) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### isSelectable + +#### Get Signature + +> **get** `protected` **isSelectable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L298) + +Returns true if the items is not a header or disabled + +##### Returns + +`boolean` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L121) + +Sets/Gets if the item is the currently selected one in the dropdown + +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemSelected = mySelectedItem.selected; // true +``` + +Two-way data binding +```html +<igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L125) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +## Methods + +### ensureItemFocus() + +> `protected` **ensureItemFocus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L303) + +If `allowItemsFocus` is enabled, keep the browser focus on the active item + +#### Returns + +`void` + +*** + +### ngDoCheck() + +> **ngDoCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L284) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemComponent.md new file mode 100644 index 000000000..264b99aba --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemComponent.md @@ -0,0 +1,514 @@ +# Class: IgxDropDownItemComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L16) + +The `<igx-drop-down-item>` is a container intended for row items in +a `<igx-drop-down>` container. + +## Extends + +- [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +## Extended by + +- [`IgxSelectItemComponent`](IgxSelectItemComponent.md) + +## Constructors + +### Constructor + +> **new IgxDropDownItemComponent**(): `IgxDropDownItemComponent` + +#### Returns + +`IgxDropDownItemComponent` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`constructor`](IgxDropDownItemBaseDirective.md#constructor) + +## Properties + +### \_disabled + +> `protected` **\_disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L262) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`_disabled`](IgxDropDownItemBaseDirective.md#_disabled) + +*** + +### \_index + +> `protected` **\_index**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:261](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L261) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`_index`](IgxDropDownItemBaseDirective.md#_index) + +*** + +### \_label + +> `protected` **\_label**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L263) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`_label`](IgxDropDownItemBaseDirective.md#_label) + +*** + +### \_selected + +> `protected` **\_selected**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L260) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`_selected`](IgxDropDownItemBaseDirective.md#_selected) + +*** + +### dropDown + +> `protected` **dropDown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L20) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`dropDown`](IgxDropDownItemBaseDirective.md#dropdown) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L21) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`elementRef`](IgxDropDownItemBaseDirective.md#elementref) + +*** + +### group + +> `protected` **group**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L22) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`group`](IgxDropDownItemBaseDirective.md#group) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L38) + +Sets/gets the `id` of the item. +```html +<igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item> +``` +```typescript +let itemId = this.item.id; +``` + +#### Memberof + +IgxSelectItemComponent + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`id`](IgxDropDownItemBaseDirective.md#id) + +*** + +### isHeader + +> **isHeader**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L183) + +Sets/gets if the given item is header +```typescript + // get + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemHeader = mySelectedItem.isHeader; +``` + +```html + <!--set--> + <igx-drop-down-item *ngFor="let item of items"> + <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true"> + {{item.field}} + </div> + </igx-drop-down-item> +``` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`isHeader`](IgxDropDownItemBaseDirective.md#isheader) + +*** + +### role + +> **role**: `string` = `'option'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L223) + +Gets/sets the `role` attribute of the item. Default is 'option'. + +```html + <igx-drop-down-item [role]="customRole"></igx-drop-down-item> +``` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`role`](IgxDropDownItemBaseDirective.md#role) + +*** + +### selection? + +> `protected` `optional` **selection?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L23) + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`selection`](IgxDropDownItemBaseDirective.md#selection) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L95) + +Gets/sets the value of the item if the item is databound + +```typescript +// usage in IgxDropDownItemComponent +// get +let mySelectedItemValue = this.dropdown.selectedItem.value; + +// set +let mySelectedItem = this.dropdown.selectedItem; +mySelectedItem.value = { id: 123, name: 'Example Name' } + +// usage in IgxComboItemComponent +// get +let myComboItemValue = this.combo.items[0].value; +``` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`value`](IgxDropDownItemBaseDirective.md#value) + +## Accessors + +### ariaLabel + +#### Get Signature + +> **get** **ariaLabel**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L42) + +##### Returns + +`string` + +#### Set Signature + +> **set** **ariaLabel**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L46) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`ariaLabel`](IgxDropDownItemBaseDirective.md#arialabel) + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L206) + +Sets/gets if the given item is disabled + +```typescript + // get + let mySelectedItem = this.dropdown.selectedItem; + let myItemIsDisabled = mySelectedItem.disabled; +``` + +```html + <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}> + <div> + {{item.field}} + </div> + </igx-drop-down-item> +``` +**NOTE:** Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L210) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`disabled`](IgxDropDownItemBaseDirective.md#disabled) + +*** + +### focused + +#### Get Signature + +> **get** **focused**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L24) + +Sets/gets if the given item is focused +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemFocused = mySelectedItem.focused; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **focused**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L41) + +Sets/gets if the given item is focused +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemFocused = mySelectedItem.focused; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`focused`](IgxDropDownItemBaseDirective.md#focused) + +*** + +### hasIndex + +#### Get Signature + +> **get** `protected` **hasIndex**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L252) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`hasIndex`](IgxDropDownItemBaseDirective.md#hasindex) + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L66) + +The data index of the dropdown item. + +```typescript +// get the data index of the selected dropdown item +let selectedItemIndex = this.dropdown.selectedItem.index +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **index**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L73) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`index`](IgxDropDownItemBaseDirective.md#index) + +*** + +### isSelectable + +#### Get Signature + +> **get** `protected` **isSelectable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L298) + +Returns true if the items is not a header or disabled + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`isSelectable`](IgxDropDownItemBaseDirective.md#isselectable) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L57) + +Sets/Gets if the item is the currently selected one in the dropdown + +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemSelected = mySelectedItem.selected; // true +``` + +Two-way data binding +```html +<igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L69) + +Sets/Gets if the item is the currently selected one in the dropdown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`selected`](IgxDropDownItemBaseDirective.md#selected) + +## Methods + +### ensureItemFocus() + +> `protected` **ensureItemFocus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L303) + +If `allowItemsFocus` is enabled, keep the browser focus on the active item + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`ensureItemFocus`](IgxDropDownItemBaseDirective.md#ensureitemfocus) + +*** + +### ngDoCheck() + +> **ngDoCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L284) + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md).[`ngDoCheck`](IgxDropDownItemBaseDirective.md#ngdocheck) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemNavigationDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemNavigationDirective.md new file mode 100644 index 000000000..f0a7b6bbe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxDropDownItemNavigationDirective.md @@ -0,0 +1,208 @@ +# Class: IgxDropDownItemNavigationDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L14) + +Navigation Directive that handles keyboard events on its host and controls a targeted IgxDropDownBaseDirective component + +## Extended by + +- [`IgxAutocompleteDirective`](IgxAutocompleteDirective.md) + +## Implements + +- [`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md) + +## Constructors + +### Constructor + +> **new IgxDropDownItemNavigationDirective**(): `IgxDropDownItemNavigationDirective` + +#### Returns + +`IgxDropDownItemNavigationDirective` + +## Properties + +### \_target + +> `protected` **\_target**: [`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L18) + +*** + +### dropdown + +> **dropdown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L15) + +## Accessors + +### activeDescendant + +#### Get Signature + +> **get** **activeDescendant**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L57) + +##### Returns + +`string` + +*** + +### target + +#### Get Signature + +> **get** **target**(): [`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L34) + +Gets the target of the navigation directive; + +```typescript +// Get +export class MyComponent { + ... + @ContentChild(IgxDropDownNavigationDirective) + navDirective: IgxDropDownNavigationDirective = null + ... + const navTarget: IgxDropDownBaseDirective = navDirective.navTarget +} +``` + +##### Returns + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md) + +#### Set Signature + +> **set** **target**(`target`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L52) + +Sets the target of the navigation directive; +If no valid target is passed, it falls back to the drop down context + +```html +<!-- Set --> +<input [igxDropDownItemNavigation]="dropdown" /> +... +<igx-drop-down #dropdown> +... +</igx-drop-down> +``` + +##### Parameters + +###### target + +[`IgxDropDownBaseDirective`](IgxDropDownBaseDirective.md) + +##### Returns + +`void` + +#### Implementation of + +[`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md).[`target`](../interfaces/IDropDownNavigationDirective.md#target) + +## Methods + +### handleKeyDown() + +> **handleKeyDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L65) + +Captures keydown events and calls the appropriate handlers on the target component + +#### Parameters + +##### event + +`KeyboardEvent` + +#### Returns + +`void` + +#### Implementation of + +[`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md).[`handleKeyDown`](../interfaces/IDropDownNavigationDirective.md#handlekeydown) + +*** + +### onArrowDownKeyDown() + +> **onArrowDownKeyDown**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L120) + +Navigates to previous item + +#### Returns + +`void` + +#### Implementation of + +[`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md).[`onArrowDownKeyDown`](../interfaces/IDropDownNavigationDirective.md#onarrowdownkeydown) + +*** + +### onArrowUpKeyDown() + +> **onArrowUpKeyDown**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L127) + +Navigates to previous item + +#### Returns + +`void` + +#### Implementation of + +[`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md).[`onArrowUpKeyDown`](../interfaces/IDropDownNavigationDirective.md#onarrowupkeydown) + +*** + +### onEndKeyDown() + +> **onEndKeyDown**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L134) + +Navigates to target's last item + +#### Returns + +`void` + +#### Implementation of + +[`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md).[`onEndKeyDown`](../interfaces/IDropDownNavigationDirective.md#onendkeydown) + +*** + +### onHomeKeyDown() + +> **onHomeKeyDown**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts#L141) + +Navigates to target's first item + +#### Returns + +`void` + +#### Implementation of + +[`IDropDownNavigationDirective`](../interfaces/IDropDownNavigationDirective.md).[`onHomeKeyDown`](../interfaces/IDropDownNavigationDirective.md#onhomekeydown) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxEditRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxEditRow.md new file mode 100644 index 000000000..5208a67cc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxEditRow.md @@ -0,0 +1,177 @@ +# Class: IgxEditRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L9) + +## Extended by + +- [`IgxAddRow`](IgxAddRow.md) + +## Constructors + +### Constructor + +> **new IgxEditRow**(`id`, `index`, `data`, `grid`): `IgxEditRow` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +#### Parameters + +##### id + +`any` + +##### index + +`number` + +##### data + +`any` + +##### grid + +[`GridType`](../interfaces/GridType.md) + +#### Returns + +`IgxEditRow` + +## Properties + +### data + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +*** + +### id + +> **id**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L15) + +*** + +### newData + +> **newData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L12) + +*** + +### rowFormGroup + +> **rowFormGroup**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L13) + +*** + +### state + +> **state**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L11) + +*** + +### transactionState + +> **transactionState**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L10) + +## Accessors + +### isAddRow + +#### Get Signature + +> **get** **isAddRow**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L75) + +##### Returns + +`boolean` + +## Methods + +### createRowDataEventArgs() + +> **createRowDataEventArgs**(`event?`): [`IRowDataCancelableEventArgs`](../interfaces/IRowDataCancelableEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L38) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IRowDataCancelableEventArgs`](../interfaces/IRowDataCancelableEventArgs.md) + +*** + +### createRowEditDoneEventArgs() + +> **createRowEditDoneEventArgs**(`cachedRowData`, `event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L55) + +#### Parameters + +##### cachedRowData + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +*** + +### createRowEditEventArgs() + +> **createRowEditEventArgs**(`includeNewValue?`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L19) + +#### Parameters + +##### includeNewValue? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxEmptyListTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxEmptyListTemplateDirective.md new file mode 100644 index 000000000..d3c85cf07 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxEmptyListTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxEmptyListTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L36) + +## Constructors + +### Constructor + +> **new IgxEmptyListTemplateDirective**(): `IgxEmptyListTemplateDirective` + +#### Returns + +`IgxEmptyListTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L37) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelExporterOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelExporterOptions.md new file mode 100644 index 000000000..102c065c0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelExporterOptions.md @@ -0,0 +1,478 @@ +# Class: IgxExcelExporterOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L6) + +Objects of this class are used to configure the Excel exporting process. + +## Extends + +- [`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +## Constructors + +### Constructor + +> **new IgxExcelExporterOptions**(`fileName`): `IgxExcelExporterOptions` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L34) + +#### Parameters + +##### fileName + +`string` + +#### Returns + +`IgxExcelExporterOptions` + +#### Overrides + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`constructor`](IgxExporterOptionsBase.md#constructor) + +## Properties + +### \_fileExtension + +> `protected` **\_fileExtension**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L105) + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`_fileExtension`](IgxExporterOptionsBase.md#_fileextension) + +*** + +### alwaysExportHeaders + +> **alwaysExportHeaders**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L101) + +Specifies whether the headers should be exported if there is no data. +```typescript +let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders; +this.exportOptions.alwaysExportHeaders = false; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`alwaysExportHeaders`](IgxExporterOptionsBase.md#alwaysexportheaders) + +*** + +### exportAsTable + +> **exportAsTable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L28) + +Specifies whether the exported data should be formatted as Excel table. (True by default) +```typescript +let exportAsTable = this.exportOptions.exportAsTable; +this.exportOptions.exportAsTable = false; +``` + +#### Memberof + +IgxExcelExporterOptions + +*** + +### exportSummaries + +> **exportSummaries**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L79) + +Specifies whether the exported data should include column summaries. +```typescript +let exportSummaries = this.exportOptions.exportSummaries; +this.exportOptions.exportSummaries = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`exportSummaries`](IgxExporterOptionsBase.md#exportsummaries) + +*** + +### freezeHeaders + +> **freezeHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L90) + +Specifies whether the exported data should have frozen headers. +```typescript +let freezeHeaders = this.exportOptions.freezeHeaders; +this.exportOptions.freezeHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`freezeHeaders`](IgxExporterOptionsBase.md#freezeheaders) + +*** + +### ignoreColumnsOrder + +> **ignoreColumnsOrder**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L33) + +Specifies if the exporter should ignore the current column order in the IgxGrid. +```typescript +let ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder; +this.exportOptions.ignoreColumnsOrder = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreColumnsOrder`](IgxExporterOptionsBase.md#ignorecolumnsorder) + +*** + +### ignoreColumnsVisibility + +> **ignoreColumnsVisibility**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L11) + +Specifies whether hidden columns should be exported. +```typescript +let ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility; +this.exportOptions.ignoreColumnsVisibility = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreColumnsVisibility`](IgxExporterOptionsBase.md#ignorecolumnsvisibility) + +*** + +### ignoreFiltering + +> **ignoreFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L22) + +Specifies whether filtered out rows should be exported. +```typescript +let ignoreFiltering = this.exportOptions.ignoreFiltering; +this.exportOptions.ignoreFiltering = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreFiltering`](IgxExporterOptionsBase.md#ignorefiltering) + +*** + +### ignoreGrouping + +> **ignoreGrouping**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L57) + +Specifies whether the exported data should be grouped as in the provided IgxGrid. +```typescript +let ignoreGrouping = this.exportOptions.ignoreGrouping; +this.exportOptions.ignoreGrouping = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreGrouping`](IgxExporterOptionsBase.md#ignoregrouping) + +*** + +### ignoreMultiColumnHeaders + +> **ignoreMultiColumnHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L68) + +Specifies whether the exported data should include multi column headers as in the provided IgxGrid. +```typescript +let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders; +this.exportOptions.ignoreMultiColumnHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreMultiColumnHeaders`](IgxExporterOptionsBase.md#ignoremulticolumnheaders) + +*** + +### ignorePinning + +> **ignorePinning**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L17) + +Specifies if column pinning should be ignored. If ignoreColumnsOrder is set to true, +this option will always be considered as set to true. +```typescript +let ignorePinning = this.exportOptions.ignorePinning; +this.exportOptions.ignorePinning = true; +``` + +#### Memberof + +IgxExcelExporterOptions + +*** + +### ignoreSorting + +> **ignoreSorting**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L46) + +Specifies whether the exported data should be sorted as in the provided IgxGrid. +When you export grouped data, setting ignoreSorting to true will cause +the grouping to fail because it relies on the sorting of the records. +```typescript +let ignoreSorting = this.exportOptions.ignoreSorting; +this.exportOptions.ignoreSorting = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreSorting`](IgxExporterOptionsBase.md#ignoresorting) + +## Accessors + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L46) + +Gets the width of the columns in the exported excel file. +```typescript +let width = this.exportOptions.columnWidth; +``` + +##### Memberof + +IgxExcelExporterOptions + +##### Returns + +`number` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L59) + +Sets the width of the columns in the exported excel file. If left unspecified, +the width of the column or the default width of the excel columns will be used. +```typescript +this.exportOptions.columnWidth = 55; +``` + +##### Memberof + +IgxExcelExporterOptions + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### fileName + +#### Get Signature + +> **get** **fileName**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L121) + +Gets the file name which will be used for the exporting operation. +```typescript +let fileName = this.exportOptions.fileName; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Returns + +`string` + +#### Set Signature + +> **set** **fileName**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L133) + +Sets the file name which will be used for the exporting operation. +```typescript +this.exportOptions.fileName = 'exportedData01'; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`fileName`](IgxExporterOptionsBase.md#filename) + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L75) + +Gets the height of the rows in the exported excel file. +```typescript +let height = this.exportOptions.rowHeight; +``` + +##### Memberof + +IgxExcelExporterOptions + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L88) + +Sets the height of the rows in the exported excel file. If left unspecified or 0, +the default height of the excel rows will be used. +```typescript +this.exportOptions.rowHeight = 25; +``` + +##### Memberof + +IgxExcelExporterOptions + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### worksheetName + +#### Get Signature + +> **get** **worksheetName**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L104) + +Gets the name of the worksheet in the exported excel file. +```typescript +let worksheetName = this.exportOptions.worksheetName; +``` + +##### Memberof + +IgxExcelExporterOptions + +##### Returns + +`string` + +#### Set Signature + +> **set** **worksheetName**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts#L120) + +Sets the name of the worksheet in the exported excel file. +```typescript +this.exportOptions.worksheetName = "Worksheet"; +``` + +##### Memberof + +IgxExcelExporterOptions + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelExporterService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelExporterService.md new file mode 100644 index 000000000..61197c35f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelExporterService.md @@ -0,0 +1,246 @@ +# Class: IgxExcelExporterService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts#L45) + +**Ignite UI for Angular Excel Exporter Service** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter_excel.html) + +The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from both raw data +(array) or from an `IgxGrid`. + +Example: +```typescript +public localData = [ + { Name: "Eric Ridley", Age: "26" }, + { Name: "Alanis Brook", Age: "22" }, + { Name: "Jonathan Morris", Age: "23" } +]; + +constructor(private excelExportService: IgxExcelExporterService) { +} + +this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("FileName")); +``` + +## Extends + +- [`IgxBaseExporter`](IgxBaseExporter.md) + +## Constructors + +### Constructor + +> **new IgxExcelExporterService**(): `IgxExcelExporterService` + +#### Returns + +`IgxExcelExporterService` + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`constructor`](IgxBaseExporter.md#constructor) + +## Properties + +### \_ownersMap + +> `protected` **\_ownersMap**: `Map`\<`any`, [`IColumnList`](../interfaces/IColumnList.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L205) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`_ownersMap`](IgxBaseExporter.md#_ownersmap) + +*** + +### \_sort + +> `protected` **\_sort**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L203) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`_sort`](IgxBaseExporter.md#_sort) + +*** + +### columnExporting + +> **columnExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L201) + +This event is emitted when a column is exported. +```typescript +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`columnExporting`](IgxBaseExporter.md#columnexporting) + +*** + +### exportEnded + +> **exportEnded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts#L57) + +This event is emitted when the export process finishes. +```typescript +this.exporterService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxExcelExporterService + +#### Overrides + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportEnded`](IgxBaseExporter.md#exportended) + +*** + +### pivotGridFilterFieldsCount + +> `protected` **pivotGridFilterFieldsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L204) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`pivotGridFilterFieldsCount`](IgxBaseExporter.md#pivotgridfilterfieldscount) + +*** + +### rowExporting + +> **rowExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L189) + +This event is emitted when a row is exported. +```typescript +this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`rowExporting`](IgxBaseExporter.md#rowexporting) + +## Methods + +### export() + +> **export**(`grid`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L228) + +Method for exporting IgxGrid component's data. +```typescript +this.exporterService.export(this.igxGridForExport, this.exportOptions); +``` + +#### Parameters + +##### grid + +`any` + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`export`](IgxBaseExporter.md#export) + +*** + +### exportData() + +> **exportData**(`data`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L287) + +Method for exporting any kind of array data. +```typescript +this.exporterService.exportData(this.arrayForExport, this.exportOptions); +``` + +#### Parameters + +##### data + +`any`[] + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportData`](IgxBaseExporter.md#exportdata) + +*** + +### exportDataImplementation() + +> `protected` **exportDataImplementation**(`data`, `options`, `done`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts#L76) + +#### Parameters + +##### data + +[`IExportRecord`](../interfaces/IExportRecord.md)[] + +##### options + +[`IgxExcelExporterOptions`](IgxExcelExporterOptions.md) + +##### done + +() => `void` + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportDataImplementation`](IgxBaseExporter.md#exportdataimplementation) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleClearFiltersComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleClearFiltersComponent.md new file mode 100644 index 000000000..4625949ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleClearFiltersComponent.md @@ -0,0 +1,31 @@ +# Class: IgxExcelStyleClearFiltersComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts#L15) + +A component used for presenting Excel style clear filters UI. + +## Constructors + +### Constructor + +> **new IgxExcelStyleClearFiltersComponent**(): `IgxExcelStyleClearFiltersComponent` + +#### Returns + +`IgxExcelStyleClearFiltersComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts#L16) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts#L17) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleColumnOperationsTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleColumnOperationsTemplateDirective.md new file mode 100644 index 000000000..efd6bd71a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleColumnOperationsTemplateDirective.md @@ -0,0 +1,13 @@ +# Class: IgxExcelStyleColumnOperationsTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L41) + +## Constructors + +### Constructor + +> **new IgxExcelStyleColumnOperationsTemplateDirective**(): `IgxExcelStyleColumnOperationsTemplateDirective` + +#### Returns + +`IgxExcelStyleColumnOperationsTemplateDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleConditionalFilterComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleConditionalFilterComponent.md new file mode 100644 index 000000000..86bacddca --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleConditionalFilterComponent.md @@ -0,0 +1,81 @@ +# Class: IgxExcelStyleConditionalFilterComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L20) + +A component used for presenting Excel style conditional filter UI. + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxExcelStyleConditionalFilterComponent**(): `IgxExcelStyleConditionalFilterComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L54) + +#### Returns + +`IgxExcelStyleConditionalFilterComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L21) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L22) + +## Accessors + +### filterNumber + +#### Get Signature + +> **get** `protected` **filterNumber**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L36) + +##### Returns + +`any` + +## Methods + +### getSelectedCondition() + +> `protected` **getSelectedCondition**(`condition`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L117) + +#### Parameters + +##### condition + +`string` + +#### Returns + +`boolean` + +*** + +### ngOnDestroy() + +> **ngOnDestroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts#L67) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleFilterOperationsTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleFilterOperationsTemplateDirective.md new file mode 100644 index 000000000..47e77b02a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleFilterOperationsTemplateDirective.md @@ -0,0 +1,13 @@ +# Class: IgxExcelStyleFilterOperationsTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L47) + +## Constructors + +### Constructor + +> **new IgxExcelStyleFilterOperationsTemplateDirective**(): `IgxExcelStyleFilterOperationsTemplateDirective` + +#### Returns + +`IgxExcelStyleFilterOperationsTemplateDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleHeaderComponent.md new file mode 100644 index 000000000..91059bd72 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleHeaderComponent.md @@ -0,0 +1,74 @@ +# Class: IgxExcelStyleHeaderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts#L15) + +A component used for presenting Excel style header UI. + +## Constructors + +### Constructor + +> **new IgxExcelStyleHeaderComponent**(): `IgxExcelStyleHeaderComponent` + +#### Returns + +`IgxExcelStyleHeaderComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts#L16) + +*** + +### showHiding + +> **showHiding**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts#L52) + +Sets whether the column hiding icon should be shown in the header. +Default value is `false`. + +#### Example + +```html +<igx-excel-style-header [showHiding]="true"></igx-excel-style-header> +``` + +*** + +### showPinning + +> **showPinning**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts#L28) + +Sets whether the column pinning icon should be shown in the header. +Default value is `false`. + +#### Example + +```html +<igx-excel-style-header [showPinning]="true"></igx-excel-style-header> +``` + +*** + +### showSelecting + +> **showSelecting**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts#L40) + +Sets whether the column selecting icon should be shown in the header. +Default value is `false`. + +#### Example + +```html +<igx-excel-style-header [showSelecting]="true"></igx-excel-style-header> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleHidingComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleHidingComponent.md new file mode 100644 index 000000000..68cee4dd0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleHidingComponent.md @@ -0,0 +1,23 @@ +# Class: IgxExcelStyleHidingComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts#L13) + +A component used for presenting Excel style column hiding UI. + +## Constructors + +### Constructor + +> **new IgxExcelStyleHidingComponent**(): `IgxExcelStyleHidingComponent` + +#### Returns + +`IgxExcelStyleHidingComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts#L14) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleLoadingValuesTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleLoadingValuesTemplateDirective.md new file mode 100644 index 000000000..ccd2ed46a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleLoadingValuesTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxExcelStyleLoadingValuesTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L22) + +## Constructors + +### Constructor + +> **new IgxExcelStyleLoadingValuesTemplateDirective**(): `IgxExcelStyleLoadingValuesTemplateDirective` + +#### Returns + +`IgxExcelStyleLoadingValuesTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L23) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_dir`, `ctx`): `ctx is undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L25) + +#### Parameters + +##### \_dir + +`IgxExcelStyleLoadingValuesTemplateDirective` + +##### ctx + +`unknown` + +#### Returns + +`ctx is undefined` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleMovingComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleMovingComponent.md new file mode 100644 index 000000000..51cf9269a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleMovingComponent.md @@ -0,0 +1,37 @@ +# Class: IgxExcelStyleMovingComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts#L16) + +A component used for presenting Excel style column moving UI. + +## Constructors + +### Constructor + +> **new IgxExcelStyleMovingComponent**(): `IgxExcelStyleMovingComponent` + +#### Returns + +`IgxExcelStyleMovingComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts#L17) + +## Accessors + +### esfSize + +#### Get Signature + +> **get** `protected` **esfSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts#L79) + +##### Returns + +`string` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStylePinningComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStylePinningComponent.md new file mode 100644 index 000000000..3381de7e5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStylePinningComponent.md @@ -0,0 +1,23 @@ +# Class: IgxExcelStylePinningComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts#L14) + +A component used for presenting Excel style column pinning UI. + +## Constructors + +### Constructor + +> **new IgxExcelStylePinningComponent**(): `IgxExcelStylePinningComponent` + +#### Returns + +`IgxExcelStylePinningComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSearchComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSearchComponent.md new file mode 100644 index 000000000..9bca77596 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSearchComponent.md @@ -0,0 +1,218 @@ +# Class: IgxExcelStyleSearchComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L40) + +A component used for presenting Excel style search UI. + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxExcelStyleSearchComponent**(): `IgxExcelStyleSearchComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L193) + +#### Returns + +`IgxExcelStyleSearchComponent` + +## Properties + +### activeDescendant + +> `protected` **activeDescendant**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L183) + +*** + +### cancelButton + +> `protected` **cancelButton**: [`IgxButtonDirective`](IgxButtonDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L60) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L41) + +*** + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L42) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L43) + +## Accessors + +### focusedItem + +#### Get Signature + +> **get** `protected` **focusedItem**(): `ActiveElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L389) + +##### Returns + +`ActiveElement` + +#### Set Signature + +> **set** `protected` **focusedItem**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L393) + +##### Parameters + +###### val + +`ActiveElement` + +##### Returns + +`void` + +*** + +### id + +#### Get Signature + +> **get** `protected` **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:374](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L374) + +##### Returns + +`string` + +#### Set Signature + +> **set** `protected` **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L377) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## Methods + +### getItemId() + +> `protected` **getItemId**(`index`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L381) + +#### Parameters + +##### index + +`number` + +#### Returns + +`string` + +*** + +### handleKeyDown() + +> `protected` **handleKeyDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:651](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L651) + +#### Parameters + +##### event + +`KeyboardEvent` + +#### Returns + +`void` + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:242](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L242) + +#### Returns + +`void` + +*** + +### ngOnDestroy() + +> **ngOnDestroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L249) + +#### Returns + +`void` + +*** + +### onFocus() + +> `protected` **onFocus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:687](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L687) + +#### Returns + +`void` + +*** + +### onFocusOut() + +> `protected` **onFocusOut**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:699](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L699) + +#### Returns + +`void` + +*** + +### setActiveDescendant() + +> `protected` **setActiveDescendant**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts#L385) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSelectingComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSelectingComponent.md new file mode 100644 index 000000000..b8a450f43 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSelectingComponent.md @@ -0,0 +1,23 @@ +# Class: IgxExcelStyleSelectingComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts#L14) + +A component used for presenting Excel style conditional filter UI. + +## Constructors + +### Constructor + +> **new IgxExcelStyleSelectingComponent**(): `IgxExcelStyleSelectingComponent` + +#### Returns + +`IgxExcelStyleSelectingComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSortingComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSortingComponent.md new file mode 100644 index 000000000..2211f5a71 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelStyleSortingComponent.md @@ -0,0 +1,55 @@ +# Class: IgxExcelStyleSortingComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts#L17) + +A component used for presenting Excel style column sorting UI. + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxExcelStyleSortingComponent**(): `IgxExcelStyleSortingComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts#L35) + +#### Returns + +`IgxExcelStyleSortingComponent` + +## Properties + +### esf + +> **esf**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts#L18) + +## Accessors + +### esfSize + +#### Get Signature + +> **get** `protected` **esfSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts#L61) + +##### Returns + +`string` + +## Methods + +### ngOnDestroy() + +> **ngOnDestroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts#L41) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelTextDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelTextDirective.md new file mode 100644 index 000000000..9e8fe54de --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExcelTextDirective.md @@ -0,0 +1,13 @@ +# Class: IgxExcelTextDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L9) + +## Constructors + +### Constructor + +> **new IgxExcelTextDirective**(): `IgxExcelTextDirective` + +#### Returns + +`IgxExcelTextDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelBodyComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelBodyComponent.md new file mode 100644 index 000000000..512984adf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelBodyComponent.md @@ -0,0 +1,149 @@ +# Class: IgxExpansionPanelBodyComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L9) + +## Constructors + +### Constructor + +> **new IgxExpansionPanelBodyComponent**(): `IgxExpansionPanelBodyComponent` + +#### Returns + +`IgxExpansionPanelBodyComponent` + +## Properties + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L12) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L11) + +*** + +### panel + +> **panel**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L10) + +*** + +### role + +> **role**: `string` = `'region'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L37) + +Gets/sets the `role` attribute of the panel body +Default is 'region'; +Get +```typescript + const currentRole = this.panel.body.role; +``` +Set +```typescript + this.panel.body.role = 'content'; +``` +```html + <igx-expansion-panel-body [role]="'custom'"></igx-expansion-panel-body> +``` + +## Accessors + +### label + +#### Get Signature + +> **get** **label**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L52) + +Gets the `aria-label` attribute of the panel body +Defaults to the panel id with '-region' in the end; +Get +```typescript + const currentLabel = this.panel.body.label; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **label**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L64) + +Sets the `aria-label` attribute of the panel body +```typescript + this.panel.body.label = 'my-custom-label'; +``` +```html + <igx-expansion-panel-body [label]="'my-custom-label'"></igx-expansion-panel-body> +``` + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +*** + +### labelledBy + +#### Get Signature + +> **get** **labelledBy**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L78) + +Gets the `aria-labelledby` attribute of the panel body +Defaults to the panel header id; +Get +```typescript + const currentLabel = this.panel.body.labelledBy; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **labelledBy**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts#L90) + +Sets the `aria-labelledby` attribute of the panel body +```typescript + this.panel.body.labelledBy = 'my-custom-id'; +``` +```html + <igx-expansion-panel-body [labelledBy]="'my-custom-id'"></igx-expansion-panel-body> +``` + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelComponent.md new file mode 100644 index 000000000..a56c0e1f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelComponent.md @@ -0,0 +1,407 @@ +# Class: IgxExpansionPanelComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L32) + +## Implements + +- [`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxExpansionPanelComponent**(): `IgxExpansionPanelComponent` + +#### Returns + +`IgxExpansionPanelComponent` + +#### Inherited from + +`ToggleAnimationPlayer.constructor` + +## Properties + +### \_animationSettings + +> `protected` **\_animationSettings**: `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L63) + +#### Inherited from + +`ToggleAnimationPlayer._animationSettings` + +*** + +### animationService + +> `protected` **animationService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L37) + +#### Inherited from + +`ToggleAnimationPlayer.animationService` + +*** + +### collapsed + +> **collapsed**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L128) + +Gets/sets whether the component is collapsed (its content is hidden) +Get +```typescript + const myPanelState: boolean = this.panel.collapsed; +``` +Set +```html + this.panel.collapsed = true; +``` + +Two-way data binding: +```html +<igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel> +``` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`collapsed`](../interfaces/IgxExpansionPanelBase.md#collapsed) + +*** + +### contentCollapsed + +> **contentCollapsed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L162) + +Emitted when the expansion panel finishes collapsing +```typescript + handleCollapsed(event: IExpansionPanelEventArgs) +``` +```html + <igx-expansion-panel (contentCollapsed)="handleCollapsed($event)"> + ... + </igx-expansion-panel> +``` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`contentCollapsed`](../interfaces/IgxExpansionPanelBase.md#contentcollapsed) + +*** + +### contentCollapsing + +> **contentCollapsing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L148) + +Emitted when the expansion panel starts collapsing +```typescript + handleCollapsing(event: IExpansionPanelCancelableEventArgs) +``` +```html + <igx-expansion-panel (contentCollapsing)="handleCollapsing($event)"> + ... + </igx-expansion-panel> +``` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`contentCollapsing`](../interfaces/IgxExpansionPanelBase.md#contentcollapsing) + +*** + +### contentExpanded + +> **contentExpanded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L190) + +Emitted when the expansion panel finishes expanding +```typescript + handleExpanded(event: IExpansionPanelEventArgs) +``` +```html + <igx-expansion-panel (contentExpanded)="handleExpanded($event)"> + ... + </igx-expansion-panel> +``` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`contentExpanded`](../interfaces/IgxExpansionPanelBase.md#contentexpanded) + +*** + +### contentExpanding + +> **contentExpanding**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L176) + +Emitted when the expansion panel starts expanding +```typescript + handleExpanding(event: IExpansionPanelCancelableEventArgs) +``` +```html + <igx-expansion-panel (contentExpanding)="handleExpanding($event)"> + ... + </igx-expansion-panel> +``` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`contentExpanding`](../interfaces/IgxExpansionPanelBase.md#contentexpanding) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L61) + +#### Inherited from + +`ToggleAnimationPlayer.destroy$` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L89) + +Sets/gets the `id` of the expansion panel component. +If not set, `id` will have value `"igx-expansion-panel-0"`; +```html +<igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel> +``` +```typescript +let panelId = this.panel.id; +``` + +#### Memberof + +IgxExpansionPanelComponent + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`id`](../interfaces/IgxExpansionPanelBase.md#id) + +*** + +### players + +> `protected` **players**: `Map`\<`string`, [`AnimationPlayer`](../interfaces/AnimationPlayer.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L62) + +#### Inherited from + +`ToggleAnimationPlayer.players` + +## Accessors + +### animationSettings + +#### Get Signature + +> **get** **animationSettings**(): `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L68) + +Sets/gets the animation settings of the expansion panel component +Open and Close animation should be passed + +Get +```typescript + const currentAnimations = this.panel.animationSettings; +``` +Set +```typescript + import { slideInLeft, slideOutRight } from 'igniteui-angular'; + ... + this.panel.animationsSettings = { + openAnimation: slideInLeft, + closeAnimation: slideOutRight +}; +``` +or via template +```typescript + import { slideInLeft, slideOutRight } from 'igniteui-angular'; + ... + myCustomAnimationObject = { + openAnimation: slideInLeft, + closeAnimation: slideOutRight +}; +```html + <igx-expansion-panel [animationSettings]='myCustomAnimationObject'> + ... + </igx-expansion-panel> +``` + +##### Returns + +`ToggleAnimationSettings` + +#### Set Signature + +> **set** **animationSettings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L71) + +##### Parameters + +###### value + +`ToggleAnimationSettings` + +##### Returns + +`void` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`animationSettings`](../interfaces/IgxExpansionPanelBase.md#animationsettings) + +#### Overrides + +`ToggleAnimationPlayer.animationSettings` + +## Methods + +### close() + +> **close**(`evt?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L314) + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`void` + +*** + +### collapse() + +> **collapse**(`evt?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L239) + +Collapses the panel + +```html + <igx-expansion-panel #myPanel> + ... + </igx-expansion-panel> + <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button> +``` + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`collapse`](../interfaces/IgxExpansionPanelBase.md#collapse) + +*** + +### expand() + +> **expand**(`evt?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:271](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L271) + +Expands the panel + +```html + <igx-expansion-panel #myPanel> + ... + </igx-expansion-panel> + <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button> +``` + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`expand`](../interfaces/IgxExpansionPanelBase.md#expand) + +*** + +### open() + +> **open**(`evt?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L310) + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(`evt?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts#L302) + +Toggles the panel + +```html + <igx-expansion-panel #myPanel> + ... + </igx-expansion-panel> + <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button> +``` + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IgxExpansionPanelBase`](../interfaces/IgxExpansionPanelBase.md).[`toggle`](../interfaces/IgxExpansionPanelBase.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelHeaderComponent.md new file mode 100644 index 000000000..457d543e1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExpansionPanelHeaderComponent.md @@ -0,0 +1,202 @@ +# Class: IgxExpansionPanelHeaderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L22) + +## Constructors + +### Constructor + +> **new IgxExpansionPanelHeaderComponent**(): `IgxExpansionPanelHeaderComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L206) + +#### Returns + +`IgxExpansionPanelHeaderComponent` + +## Properties + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L24) + +*** + +### elementRef + +> **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L25) + +*** + +### iconPosition + +> **iconPosition**: `ExpansionPanelHeaderIconPosition` = `ExpansionPanelHeaderIconPosition.LEFT` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L116) + +Gets/sets the position of the expansion-panel-header expand/collapse icon +Accepts `left`, `right` or `none` +```typescript + const currentIconPosition = this.panel.header.iconPosition; +``` +Set +```typescript + this.panel.header.iconPosition = 'left'; +``` +```html + <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header> +``` + +*** + +### id + +> **id**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L197) + +Sets/gets the `id` of the expansion panel header. +```typescript +let panelHeaderId = this.panel.header.id; +``` + +#### Memberof + +IgxExpansionPanelComponent + +*** + +### interaction + +> **interaction**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L132) + +Emitted whenever a user interacts with the header host +```typescript + handleInteraction(event: IExpansionPanelCancelableEventArgs) { + ... +} +``` +```html + <igx-expansion-panel-header (interaction)="handleInteraction($event)"> + ... + </igx-expansion-panel-header> +``` + +*** + +### lv + +> **lv**: `string` = `'3'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L67) + +Gets/sets the `aria-level` attribute of the header +Get +```typescript + const currentAriaLevel = this.panel.header.lv; +``` +Set +```typescript + this.panel.header.lv = '5'; +``` +```html + <igx-expansion-panel-header [lv]="myCustomLevel"></igx-expansion-panel-header> +``` + +*** + +### panel + +> **panel**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L23) + +*** + +### role + +> **role**: `string` = `'heading'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L85) + +Gets/sets the `role` attribute of the header +Get +```typescript + const currentRole = this.panel.header.role; +``` +Set +```typescript + this.panel.header.role = '5'; +``` +```html + <igx-expansion-panel-header [role]="'custom'"></igx-expansion-panel-header> +``` + +## Accessors + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L167) + +Gets/sets the whether the header is disabled +When disabled, the header will not handle user events and will stop their propagation + +```typescript + const isDisabled = this.panel.header.disabled; +``` +Set +```typescript + this.panel.header.disabled = true; +``` +```html + <igx-expansion-panel-header [disabled]="true"> + ... + </igx-expansion-panel-header> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L171) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### iconRef + +#### Get Signature + +> **get** **iconRef**(): `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts#L31) + +Returns a reference to the `igx-expansion-panel-icon` element; +If `iconPosition` is `NONE` - return null; + +##### Returns + +`ElementRef` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExporterOptionsBase.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExporterOptionsBase.md new file mode 100644 index 000000000..da841aece --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxExporterOptionsBase.md @@ -0,0 +1,251 @@ +# Abstract Class: IgxExporterOptionsBase + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L1) + +## Extended by + +- [`IgxCsvExporterOptions`](IgxCsvExporterOptions.md) +- [`IgxExcelExporterOptions`](IgxExcelExporterOptions.md) +- [`IgxPdfExporterOptions`](IgxPdfExporterOptions.md) + +## Constructors + +### Constructor + +> **new IgxExporterOptionsBase**(`fileName`, `_fileExtension`): `IgxExporterOptionsBase` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L105) + +#### Parameters + +##### fileName + +`string` + +##### \_fileExtension + +`string` + +#### Returns + +`IgxExporterOptionsBase` + +## Properties + +### \_fileExtension + +> `protected` **\_fileExtension**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L105) + +*** + +### alwaysExportHeaders + +> **alwaysExportHeaders**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L101) + +Specifies whether the headers should be exported if there is no data. +```typescript +let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders; +this.exportOptions.alwaysExportHeaders = false; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### exportSummaries + +> **exportSummaries**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L79) + +Specifies whether the exported data should include column summaries. +```typescript +let exportSummaries = this.exportOptions.exportSummaries; +this.exportOptions.exportSummaries = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### freezeHeaders + +> **freezeHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L90) + +Specifies whether the exported data should have frozen headers. +```typescript +let freezeHeaders = this.exportOptions.freezeHeaders; +this.exportOptions.freezeHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### ignoreColumnsOrder + +> **ignoreColumnsOrder**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L33) + +Specifies if the exporter should ignore the current column order in the IgxGrid. +```typescript +let ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder; +this.exportOptions.ignoreColumnsOrder = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### ignoreColumnsVisibility + +> **ignoreColumnsVisibility**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L11) + +Specifies whether hidden columns should be exported. +```typescript +let ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility; +this.exportOptions.ignoreColumnsVisibility = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### ignoreFiltering + +> **ignoreFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L22) + +Specifies whether filtered out rows should be exported. +```typescript +let ignoreFiltering = this.exportOptions.ignoreFiltering; +this.exportOptions.ignoreFiltering = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### ignoreGrouping + +> **ignoreGrouping**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L57) + +Specifies whether the exported data should be grouped as in the provided IgxGrid. +```typescript +let ignoreGrouping = this.exportOptions.ignoreGrouping; +this.exportOptions.ignoreGrouping = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### ignoreMultiColumnHeaders + +> **ignoreMultiColumnHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L68) + +Specifies whether the exported data should include multi column headers as in the provided IgxGrid. +```typescript +let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders; +this.exportOptions.ignoreMultiColumnHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +*** + +### ignoreSorting + +> **ignoreSorting**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L46) + +Specifies whether the exported data should be sorted as in the provided IgxGrid. +When you export grouped data, setting ignoreSorting to true will cause +the grouping to fail because it relies on the sorting of the records. +```typescript +let ignoreSorting = this.exportOptions.ignoreSorting; +this.exportOptions.ignoreSorting = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +## Accessors + +### fileName + +#### Get Signature + +> **get** **fileName**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L121) + +Gets the file name which will be used for the exporting operation. +```typescript +let fileName = this.exportOptions.fileName; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Returns + +`string` + +#### Set Signature + +> **set** **fileName**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L133) + +Sets the file name which will be used for the exporting operation. +```typescript +this.exportOptions.fileName = 'exportedData01'; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterCellTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterCellTemplateDirective.md new file mode 100644 index 000000000..2ae324b37 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterCellTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxFilterCellTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L8) + +## Constructors + +### Constructor + +> **new IgxFilterCellTemplateDirective**(): `IgxFilterCellTemplateDirective` + +#### Returns + +`IgxFilterCellTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L9) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxColumnTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L12) + +#### Parameters + +##### \_directive + +`IgxFilterCellTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxColumnTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterDirective.md new file mode 100644 index 000000000..8bb67c7f1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterDirective.md @@ -0,0 +1,61 @@ +# Class: IgxFilterDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L80) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxFilterDirective**(): `IgxFilterDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L86) + +#### Returns + +`IgxFilterDirective` + +## Properties + +### filtered + +> **filtered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L82) + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L81) + +*** + +### filterOptions + +> **filterOptions**: [`IgxFilterOptions`](IgxFilterOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L84) + +## Methods + +### ngOnChanges() + +> **ngOnChanges**(`changes`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L89) + +#### Parameters + +##### changes + +`SimpleChanges` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterOptions.md new file mode 100644 index 000000000..84c19ab36 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterOptions.md @@ -0,0 +1,135 @@ +# Class: IgxFilterOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L12) + +## Constructors + +### Constructor + +> **new IgxFilterOptions**(): `IgxFilterOptions` + +#### Returns + +`IgxFilterOptions` + +## Properties + +### inputValue + +> **inputValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L14) + +*** + +### items + +> **items**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L20) + +*** + +### key + +> **key**: `string` \| `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L17) + +## Methods + +### formatter() + +> **formatter**(`valueToTest`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L46) + +#### Parameters + +##### valueToTest + +`string` + +#### Returns + +`string` + +*** + +### get\_value() + +> **get\_value**(`item`, `key`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L27) + +#### Parameters + +##### item + +`any` + +##### key + +`string` + +#### Returns + +`string` + +*** + +### matchFn() + +> **matchFn**(`valueToTest`, `inputValue`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L54) + +#### Parameters + +##### valueToTest + +`string` + +##### inputValue + +`string` + +#### Returns + +`boolean` + +*** + +### metConditionFn() + +> **metConditionFn**(`item`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L60) + +#### Parameters + +##### item + +`any` + +#### Returns + +`void` + +*** + +### overdueConditionFn() + +> **overdueConditionFn**(`item`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L68) + +#### Parameters + +##### item + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterPipe.md new file mode 100644 index 000000000..fdc1efe20 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilterPipe.md @@ -0,0 +1,39 @@ +# Class: IgxFilterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L124) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxFilterPipe**(): `IgxFilterPipe` + +#### Returns + +`IgxFilterPipe` + +## Methods + +### transform() + +> **transform**(`items`, `options`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts#L141) + +#### Parameters + +##### items + +`any`[] + +##### options + +[`IgxFilterOptions`](IgxFilterOptions.md) + +#### Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilteringOperand.md new file mode 100644 index 000000000..d7305873e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFilteringOperand.md @@ -0,0 +1,134 @@ +# Class: IgxFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L7) + +Provides base filtering operations +Implementations should be Singleton + +## Export + +## Extended by + +- [`IgxBooleanFilteringOperand`](IgxBooleanFilteringOperand.md) +- [`IgxNumberFilteringOperand`](IgxNumberFilteringOperand.md) +- [`IgxStringFilteringOperand`](IgxStringFilteringOperand.md) + +## Constructors + +### Constructor + +> **new IgxFilteringOperand**(): `IgxFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L11) + +#### Returns + +`IgxFilteringOperand` + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +*** + +### \_instance + +> `protected` `static` **\_instance**: `IgxFilteringOperand` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L80) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +*** + +### instance() + +> `static` **instance**(): `IgxFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +`IgxFilteringOperand` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFlatTransactionFactory.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFlatTransactionFactory.md new file mode 100644 index 000000000..dc27e1499 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFlatTransactionFactory.md @@ -0,0 +1,43 @@ +# Class: IgxFlatTransactionFactory + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L25) + +Factory service for instantiating TransactionServices + +## Extended by + +- [`IgxHierarchicalTransactionFactory`](IgxHierarchicalTransactionFactory.md) + +## Constructors + +### Constructor + +> **new IgxFlatTransactionFactory**(): `IgxFlatTransactionFactory` + +#### Returns + +`IgxFlatTransactionFactory` + +## Methods + +### create() + +> **create**(`type`): [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L33) + +Creates a new Transaction service instance depending on the specified type. + +#### Parameters + +##### type + +[`TRANSACTION_TYPE`](../enumerations/TRANSACTION_TYPE.md) + +The type of the transaction + +#### Returns + +[`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +a new instance of TransactionService<Transaction, State> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFlexDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFlexDirective.md new file mode 100644 index 000000000..b9e0355bf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFlexDirective.md @@ -0,0 +1,107 @@ +# Class: IgxFlexDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L147) + +## Constructors + +### Constructor + +> **new IgxFlexDirective**(): `IgxFlexDirective` + +#### Returns + +`IgxFlexDirective` + +## Properties + +### basis + +> **basis**: `string` = `'auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L216) + +Applies the `flex-basis` attribute to an element that uses the directive. + +Default value is `auto`. + +Other possible values include `content`, `max-content`, `min-content`, `fit-content`. + +```html +<div igxFlex igxFlexBasis="fit-content">Content</div> +``` + +*** + +### flex + +> **flex**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L188) + +Applies the directive to an element. + +Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`. + +```html +<div igxFlex>Content</div> +``` + +*** + +### grow + +> **grow**: `number` = `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L162) + +Applies the `grow` attribute to an element that uses the directive. + +Default value is `1`. + +```html +<div> + <div igxFlex igxFlexGrow="0">Content1</div> + <div igxFlex igxFlexGrow="1">Content2</div> + <div igxFlex igxFlexGrow="0">Content3</div> +</div> +``` + +*** + +### order + +> **order**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L203) + +Applies the `order` attribute to an element that uses the directive. + +Default value is `0`. + +```html +<div> + <div igxFlex igxFlexOrder="1">Content1</div> + <div igxFlex igxFlexOrder="0">Content2</div> + <div igxFlex igxFlexOrder="2">Content3</div> +</div> +``` + +*** + +### shrink + +> **shrink**: `number` = `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L177) + +Applies the `shrink` attribute to an element that uses the directive. + +Default value is `1`. + +```html +<div> + <div igxFlex igxFlexShrink="1">Content1</div> + <div igxFlex igxFlexShrink="0">Content2</div> + <div igxFlex igxFlexShrink="1">Content3</div> +</div> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFocusDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFocusDirective.md new file mode 100644 index 000000000..06822784b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFocusDirective.md @@ -0,0 +1,113 @@ +# Class: IgxFocusDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts#L10) + +## Constructors + +### Constructor + +> **new IgxFocusDirective**(): `IgxFocusDirective` + +#### Returns + +`IgxFocusDirective` + +## Accessors + +### focused + +#### Get Signature + +> **get** **focused**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts#L29) + +Returns the state of the igxFocus. +```typescript +@ViewChild('focusContainer', {read: IgxFocusDirective}) +public igxFocus: IgxFocusDirective; +let isFocusOn = this.igxFocus.focused; +``` + +##### Memberof + +IgxFocusDirective + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **focused**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts#L43) + +Sets the state of the igxFocus. +```html +<igx-input-group > + <input #focusContainer igxInput [igxFocus]="true"/> +</igx-input-group> +``` + +##### Memberof + +IgxFocusDirective + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts#L58) + +Gets the native element of the igxFocus. +```typescript +@ViewChild('focusContainer', {read: IgxFocusDirective}) +public igxFocus: IgxFocusDirective; +let igxFocusNativeElement = this.igxFocus.nativeElement; +``` + +##### Memberof + +IgxFocusDirective + +##### Returns + +`any` + +## Methods + +### trigger() + +> **trigger**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts#L80) + +Triggers the igxFocus state. +```typescript +@ViewChild('focusContainer', {read: IgxFocusDirective}) +public igxFocus: IgxFocusDirective; +this.igxFocus.trigger(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxFocusDirective diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFocusTrapDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFocusTrapDirective.md new file mode 100644 index 000000000..ddef29e8f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxFocusTrapDirective.md @@ -0,0 +1,54 @@ +# Class: IgxFocusTrapDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts#L10) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxFocusTrapDirective**(): `IgxFocusTrapDirective` + +#### Returns + +`IgxFocusTrapDirective` + +## Properties + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts#L12) + +## Accessors + +### focusTrap + +#### Set Signature + +> **set** **focusTrap**(`focusTrap`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts#L31) + +Sets whether the Tab key focus is trapped within the element. + +##### Example + +```html +<div igxFocusTrap="true"></div> +``` + +##### Parameters + +###### focusTrap + +`boolean` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfContext.md new file mode 100644 index 000000000..d00d93414 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfContext.md @@ -0,0 +1,145 @@ +# Class: IgxForOfContext\<T, U\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L20) + +## Public Api + +## Extended by + +- [`IgxGridForOfContext`](IgxGridForOfContext.md) + +## Type Parameters + +### T + +`T` + +### U + +`U` *extends* `T`[] = `T`[] + +## Constructors + +### Constructor + +> **new IgxForOfContext**\<`T`, `U`\>(`$implicit`, `igxForOf`, `index`, `count`): `IgxForOfContext`\<`T`, `U`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L21) + +#### Parameters + +##### $implicit + +`T` + +##### igxForOf + +`U` + +##### index + +`number` + +##### count + +`number` + +#### Returns + +`IgxForOfContext`\<`T`, `U`\> + +## Properties + +### $implicit + +> **$implicit**: `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L22) + +*** + +### count + +> **count**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L25) + +*** + +### igxForOf + +> **igxForOf**: `U` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L23) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L24) + +## Accessors + +### even + +#### Get Signature + +> **get** **even**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L45) + +A function that returns whether the element is even or not + +##### Returns + +`boolean` + +*** + +### first + +#### Get Signature + +> **get** **first**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L31) + +A function that returns whether the element is the first or not + +##### Returns + +`boolean` + +*** + +### last + +#### Get Signature + +> **get** **last**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L38) + +A function that returns whether the element is the last or not + +##### Returns + +`boolean` + +*** + +### odd + +#### Get Signature + +> **get** **odd**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L52) + +A function that returns whether the element is odd or not + +##### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfDirective.md new file mode 100644 index 000000000..1b7188557 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfDirective.md @@ -0,0 +1,1258 @@ +# Class: IgxForOfDirective\<T, U\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L88) + +## Extended by + +- [`IgxGridForOfDirective`](IgxGridForOfDirective.md) + +## Type Parameters + +### T + +`T` + +### U + +`U` *extends* `T`[] = `T`[] + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxForOfDirective**\<`T`, `U`\>(): `IgxForOfDirective`\<`T`, `U`\> + +#### Returns + +`IgxForOfDirective`\<`T`, `U`\> + +#### Inherited from + +`IgxForOfToken<T,U>.constructor` + +## Properties + +### \_bScrollInternal + +> `protected` **\_bScrollInternal**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L281) + +If the next onScroll event is triggered due to internal setting of scrollTop + +*** + +### \_differ + +> `protected` **\_differ**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L275) + +*** + +### \_differs + +> `protected` **\_differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L91) + +*** + +### \_embeddedViews + +> `protected` **\_embeddedViews**: `EmbeddedViewRef`\<`any`\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L283) + +*** + +### \_embeddedViewSizesCache + +> `protected` **\_embeddedViewSizesCache**: `WeakMap`\<`EmbeddedViewRef`\<`any`\>, `number`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L99) + +*** + +### \_injector + +> `protected` **\_injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L92) + +*** + +### \_sizesCache + +> `protected` **\_sizesCache**: `number`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L273) + +*** + +### \_template + +> `protected` **\_template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L90) + +*** + +### \_trackByFn + +> `protected` **\_trackByFn**: `TrackByFunction`\<`T`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:276](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L276) + +*** + +### \_virtScrollPosition + +> `protected` **\_virtScrollPosition**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L279) + +Internal track for scroll top that is being virtualized + +*** + +### \_virtSize + +> `protected` **\_virtSize**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L289) + +Size that is being virtualized. + +*** + +### \_zone + +> `protected` **\_zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L94) + +*** + +### beforeViewDestroyed + +> **beforeViewDestroyed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L236) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L93) + +*** + +### chunkLoad + +> **chunkLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L199) + +An event that is emitted after a new chunk has been loaded. +```html +<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkLoad)="loadChunk($event)"></ng-template> +``` +```typescript +loadChunk(e){ +alert("chunk loaded!"); +} +``` + +#### Overrides + +`IgxForOfToken.chunkLoad` + +*** + +### chunkPreload + +> **chunkPreload**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L251) + +An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount. +Can be used for implementing remote load on demand for the igxFor data. +```html +<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template> +``` +```typescript +chunkPreload(e){ +alert("chunk is loading!"); +} +``` + +#### Overrides + +`IgxForOfToken.chunkPreload` + +*** + +### contentObserver + +> `protected` **contentObserver**: `ResizeObserver` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L285) + +*** + +### contentResizeNotify + +> `protected` **contentResizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L284) + +*** + +### contentSizeChange + +> **contentSizeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L219) + +An event that is emitted after the rendered content size of the igxForOf has been changed. + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L233) + +An event that is emitted after data has been changed. +```html +<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template> +``` +```typescript +dataChanged(e){ +alert("data changed!"); +} +``` + +*** + +### document + +> `protected` **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L97) + +*** + +### func + +> `protected` **func**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L272) + +*** + +### igxForContainerSize + +> **igxForContainerSize**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L167) + +Sets the px-affixed size of the container along the axis of scrolling. +For "horizontal" orientation this value is the width of the container and for "vertical" is the height. +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'" + [igxForScrollOrientation]="'horizontal'"> +</ng-template> +``` + +#### Overrides + +`IgxForOfToken.igxForContainerSize` + +*** + +### igxForItemSize + +> **igxForItemSize**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L185) + +Sets the px-affixed size of the item along the axis of scrolling. +For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row. +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template> +``` + +#### Overrides + +`IgxForOfToken.igxForItemSize` + +*** + +### igxForScrollContainer + +> **igxForScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L155) + +Optionally pass the parent `igxFor` instance to create a virtual template scrolling both horizontally and vertically. +```html +<ng-template #scrollContainer igxFor let-rowData [igxForOf]="data" + [igxForScrollOrientation]="'vertical'" + [igxForContainerSize]="'500px'" + [igxForItemSize]="'50px'" + let-rowIndex="index"> + <div [style.display]="'flex'" [style.height]="'50px'"> + <ng-template #childContainer igxFor let-item [igxForOf]="data" + [igxForScrollOrientation]="'horizontal'" + [igxForScrollContainer]="parentVirtDir" + [igxForContainerSize]="'500px'"> + <div [style.min-width]="'50px'">{{rowIndex}} : {{item.text}}</div> + </ng-template> + </div> +</ng-template> +``` + +*** + +### igxForScrollOrientation + +> **igxForScrollOrientation**: `string` = `'vertical'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L133) + +Specifies the scroll orientation. +Scroll orientation can be "vertical" or "horizontal". +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template> +``` + +*** + +### igxForSizePropName + +> **igxForSizePropName**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L123) + +Sets the property name from which to read the size in the data object. + +*** + +### individualSizeCache + +> `protected` **individualSizeCache**: `number`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L277) + +*** + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L96) + +*** + +### scrollComponent + +> `protected` **scrollComponent**: `VirtualHelperBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L274) + +*** + +### state + +> **state**: [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L267) + +The current state of the directive. It contains `startIndex` and `chunkSize`. +state.startIndex - The index of the item at which the current visible chunk begins. +state.chunkSize - The number of items the current visible chunk holds. +These options can be used when implementing remote virtualization as they provide the necessary state information. +```typescript +const gridState = this.parentVirtDir.state; +``` + +#### Overrides + +`IgxForOfToken.state` + +*** + +### syncScrollService + +> `protected` **syncScrollService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L95) + +*** + +### viewObserver + +> `protected` **viewObserver**: `ResizeObserver` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L286) + +*** + +### viewResizeNotify + +> `protected` **viewResizeNotify**: `Subject`\<`ResizeObserverEntry`[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L287) + +## Accessors + +### displayContainer + +#### Get Signature + +> **get** **displayContainer**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L347) + +##### Returns + +`HTMLElement` + +*** + +### embeddedViewNodes + +#### Get Signature + +> **get** `protected` **embeddedViewNodes**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L421) + +##### Returns + +`any`[] + +*** + +### igxForOf + +#### Get Signature + +> **get** **igxForOf**(): `U` & `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L108) + +Sets the data to be rendered. +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template> +``` + +##### Returns + +`U` & `T`[] + +#### Set Signature + +> **set** **igxForOf**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L112) + +##### Parameters + +###### value + +`U` & `T`[] + +##### Returns + +`void` + +#### Overrides + +`IgxForOfToken.igxForOf` + +*** + +### igxForTotalItemCount + +#### Get Signature + +> **get** **igxForTotalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L315) + +The total count of the virtual data items, when using remote service. +Similar to the property totalItemCount, but this will allow setting the data count into the template. +```html +<ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async" + [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **igxForTotalItemCount**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:318](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L318) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### igxForTrackBy + +#### Get Signature + +> **get** **igxForTrackBy**(): `TrackByFunction`\<`T`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1194) + +Gets the function used to track changes in the items collection. +By default the object references are compared. However this can be optimized if you have unique identifier +value that can be used for the comparison instead of the object ref or if you have some other property values +in the item object that should be tracked for changes. +This option is similar to ngForTrackBy. +```typescript +const trackFunc = this.parentVirtDir.igxForTrackBy; +``` + +##### Returns + +`TrackByFunction`\<`T`\> + +#### Set Signature + +> **set** **igxForTrackBy**(`fn`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1209) + +Sets the function used to track changes in the items collection. +This function can be set in scenarios where you want to optimize or +customize the tracking of changes for the items in the collection. +The igxForTrackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item. +```typescript +this.parentVirtDir.igxForTrackBy = (index, item) => { + return item.id + item.width; +}; +``` + +##### Parameters + +###### fn + +`TrackByFunction`\<`T`\> + +##### Returns + +`void` + +*** + +### scrollPosition + +#### Get Signature + +> **get** **scrollPosition**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:370](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L370) + +Gets/Sets the scroll position. +```typescript +const position = directive.scrollPosition; +directive.scrollPosition = value; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **scrollPosition**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L373) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Overrides + +`IgxForOfToken.scrollPosition` + +*** + +### sizesCache + +#### Get Signature + +> **get** `protected` **sizesCache**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L392) + +##### Returns + +`number`[] + +#### Set Signature + +> **set** `protected` **sizesCache**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:395](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L395) + +##### Parameters + +###### value + +`number`[] + +##### Returns + +`void` + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:328](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L328) + +The total count of the virtual data items, when using remote service. +```typescript +this.parentVirtDir.totalItemCount = data.Count; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L332) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Overrides + +`IgxForOfToken.totalItemCount` + +*** + +### virtualHelper + +#### Get Signature + +> **get** **virtualHelper**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L351) + +##### Returns + +`any` + +## Methods + +### \_adjustScrollPositionAfterSizeChange() + +> `protected` **\_adjustScrollPositionAfterSizeChange**(`sizeDiff`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1543) + +#### Parameters + +##### sizeDiff + +`any` + +#### Returns + +`void` + +*** + +### \_calcSize() + +> `protected` **\_calcSize**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1427) + +#### Returns + +`number` + +*** + +### \_calcVirtualScrollPosition() + +> `protected` **\_calcVirtualScrollPosition**(`scrollPosition`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1514](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1514) + +#### Parameters + +##### scrollPosition + +`number` + +#### Returns + +`void` + +*** + +### \_getItemSize() + +> `protected` **\_getItemSize**(`item`, `dimension`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1522](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1522) + +#### Parameters + +##### item + +`any` + +##### dimension + +`string` + +#### Returns + +`number` + +*** + +### \_recalcOnContainerChange() + +> `protected` **\_recalcOnContainerChange**(`containerSizeInfo?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1442) + +#### Parameters + +##### containerSizeInfo? + +`any` = `null` + +#### Returns + +`void` + +*** + +### \_recalcScrollBarSize() + +> `protected` **\_recalcScrollBarSize**(`containerSizeInfo?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1401) + +#### Parameters + +##### containerSizeInfo? + +`any` = `null` + +#### Returns + +`void` + +*** + +### \_updateScrollOffset() + +> `protected` **\_updateScrollOffset**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1527](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1527) + +#### Returns + +`void` + +*** + +### \_updateSizeCache() + +> `protected` **\_updateSizeCache**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1308) + +#### Returns + +`void` + +*** + +### addScroll() + +> **addScroll**(`add`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L639) + +Shifts the scroll thumb position. +```typescript +this.parentVirtDir.addScroll(5); +``` + +#### Parameters + +##### add + +`number` + +negative value to scroll previous and positive to scroll next; + +#### Returns + +`boolean` + +*** + +### addScrollTop() + +> **addScrollTop**(`add`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L627) + +Shifts the scroll thumb position. +```typescript +this.parentVirtDir.addScroll(5); +``` + +#### Parameters + +##### add + +`number` + +#### Returns + +`boolean` + +*** + +### applyChunkSizeChange() + +> `protected` **applyChunkSizeChange**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1496) + +Recalculates chunkSize and adds/removes elements if need due to the change. +this.state.chunkSize is updated in @addLastElem() or @removeLastElem() + +#### Returns + +`void` + +*** + +### getIndexAtScroll() + +> **getIndexAtScroll**(`scrollOffset`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L827) + +Returns the index of the element at the specified offset. +```typescript +this.parentVirtDir.getIndexAtScroll(100); +``` + +#### Parameters + +##### scrollOffset + +`number` + +#### Returns + +`number` + +*** + +### getItemCountInView() + +> **getItemCountInView**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:771](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L771) + +Returns the total number of items that are fully visible. +```typescript +this.parentVirtDir.getItemCountInView(); +``` + +#### Returns + +`number` + +*** + +### getMargin() + +> `protected` **getMargin**(`node`, `dimension`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1558](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1558) + +#### Parameters + +##### node + +`any` + +##### dimension + +`string` + +#### Returns + +`number` + +*** + +### getNodeSize() + +> `protected` **getNodeSize**(`rNode`, `_index`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L847) + +#### Parameters + +##### rNode + +`Element` + +##### \_index + +`number` + +#### Returns + +`number` + +*** + +### getScroll() + +> **getScroll**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:788](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L788) + +Returns a reference to the scrollbar DOM element. +This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation. +```typescript +dir.getScroll(); +``` + +#### Returns + +`any` + +#### Overrides + +`IgxForOfToken.getScroll` + +*** + +### getScrollForIndex() + +> **getScrollForIndex**(`index`, `bottom?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L815) + +Returns the scroll offset of the element at the specified index. +```typescript +this.parentVirtDir.getScrollForIndex(1); +``` + +#### Parameters + +##### index + +`number` + +##### bottom? + +`boolean` + +#### Returns + +`number` + +#### Overrides + +`IgxForOfToken.getScrollForIndex` + +*** + +### getSizeAt() + +> **getSizeAt**(`index`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:797](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L797) + +Returns the size of the element at the specified index. +```typescript +this.parentVirtDir.getSizeAt(1); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`number` + +*** + +### isIndexOutsideView() + +> **isIndexOutsideView**(`index`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L836) + +Returns whether the target index is outside the view. +```typescript +this.parentVirtDir.isIndexOutsideView(10); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`boolean` + +*** + +### isScrollable() + +> **isScrollable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L417) + +#### Returns + +`boolean` + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L512) + +#### Returns + +`void` + +*** + +### scrollNext() + +> **scrollNext**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:718](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L718) + +Scrolls by one item into the appropriate next direction. +For "horizontal" orientation that will be the right column and for "vertical" that is the lower row. +```typescript +this.parentVirtDir.scrollNext(); +``` + +#### Returns + +`void` + +*** + +### scrollNextPage() + +> **scrollNextPage**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:742](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L742) + +Scrolls by one page into the appropriate next direction. +For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom. +```typescript +this.parentVirtDir.scrollNextPage(); +``` + +#### Returns + +`void` + +*** + +### scrollPrev() + +> **scrollPrev**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L731) + +Scrolls by one item into the appropriate previous direction. +For "horizontal" orientation that will be the left column and for "vertical" that is the upper row. +```typescript +this.parentVirtDir.scrollPrev(); +``` + +#### Returns + +`void` + +*** + +### scrollPrevPage() + +> **scrollPrevPage**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L753) + +Scrolls by one page into the appropriate previous direction. +For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top. +```typescript +this.parentVirtDir.scrollPrevPage(); +``` + +#### Returns + +`void` + +*** + +### scrollTo() + +> **scrollTo**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L691) + +Scrolls to the specified index. +```typescript +this.parentVirtDir.scrollTo(5); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Overrides + +`IgxForOfToken.scrollTo` + +*** + +### subscribeToViewObserver() + +> `protected` **subscribeToViewObserver**(`target`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:523](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L523) + +#### Parameters + +##### target + +`Element` + +#### Returns + +`void` + +*** + +### updateSizes() + +> `protected` **updateSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L990) + +#### Returns + +`void` + +*** + +### updateViewSizes() + +> `protected` **updateViewSizes**(`entries`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1003) + +#### Parameters + +##### entries + +`ResizeObserverEntry`[] + +#### Returns + +`void` + +*** + +### verticalScrollHandler() + +> **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L413) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfScrollSyncService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfScrollSyncService.md new file mode 100644 index 000000000..2465a9240 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfScrollSyncService.md @@ -0,0 +1,53 @@ +# Class: IgxForOfScrollSyncService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.sync.service.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.sync.service.ts#L59) + +## Constructors + +### Constructor + +> **new IgxForOfScrollSyncService**(): `IgxForOfScrollSyncService` + +#### Returns + +`IgxForOfScrollSyncService` + +## Methods + +### getScrollMaster() + +> **getScrollMaster**(`dir`): `VirtualHelperBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.sync.service.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.sync.service.ts#L65) + +#### Parameters + +##### dir + +`string` + +#### Returns + +`VirtualHelperBaseDirective` + +*** + +### setScrollMaster() + +> **setScrollMaster**(`dir`, `scroll`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.sync.service.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.sync.service.ts#L61) + +#### Parameters + +##### dir + +`string` + +##### scroll + +`VirtualHelperBaseDirective` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfSyncService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfSyncService.md new file mode 100644 index 000000000..e90283174 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxForOfSyncService.md @@ -0,0 +1,13 @@ +# Class: IgxForOfSyncService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.sync.service.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.sync.service.ts#L8) + +## Constructors + +### Constructor + +> **new IgxForOfSyncService**(): `IgxForOfSyncService` + +#### Returns + +`IgxForOfSyncService` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridActionButtonComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridActionButtonComponent.md new file mode 100644 index 000000000..cce4dc914 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridActionButtonComponent.md @@ -0,0 +1,87 @@ +# Class: IgxGridActionButtonComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L14) + +## Constructors + +### Constructor + +> **new IgxGridActionButtonComponent**(): `IgxGridActionButtonComponent` + +#### Returns + +`IgxGridActionButtonComponent` + +## Properties + +### actionClick + +> **actionClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L30) + +Event emitted when action button is clicked. + +#### Example + +```html + <igx-grid-action-button (actionClick)="startEdit($event)"></igx-grid-action-button> +``` + +*** + +### asMenuItem + +> **asMenuItem**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L45) + +Whether button action is rendered in menu and should container text label. + +*** + +### classNames + +> **classNames**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L57) + +Additional Menu item container element classes. + +*** + +### container + +> **container**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L18) + +*** + +### iconName + +> **iconName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L51) + +Name of the icon to display in the button. + +*** + +### iconSet + +> **iconSet**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L68) + +The name of the icon set. Used in case the icon is from a different icon set. + +*** + +### labelText + +> **labelText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts#L74) + +The text of the label. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridActionsBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridActionsBaseDirective.md new file mode 100644 index 000000000..fc352a527 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridActionsBaseDirective.md @@ -0,0 +1,55 @@ +# Class: IgxGridActionsBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L16) + +## Extended by + +- [`IgxGridEditingActionsComponent`](IgxGridEditingActionsComponent.md) +- [`IgxGridPinningActionsComponent`](IgxGridPinningActionsComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridActionsBaseDirective**(): `IgxGridActionsBaseDirective` + +#### Returns + +`IgxGridActionsBaseDirective` + +## Properties + +### asMenuItems + +> **asMenuItems**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L34) + +Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label. + +#### Example + +```html + <igx-grid-pinning-actions [asMenuItems]='true'></igx-grid-pinning-actions> + <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions> +``` + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L18) + +*** + +### iconService + +> `protected` **iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L17) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridAddRowPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridAddRowPipe.md new file mode 100644 index 000000000..ef94600d7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridAddRowPipe.md @@ -0,0 +1,43 @@ +# Class: IgxGridAddRowPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L401) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridAddRowPipe**(): `IgxGridAddRowPipe` + +#### Returns + +`IgxGridAddRowPipe` + +## Methods + +### transform() + +> **transform**(`collection`, `isPinned?`, `_pipeTrigger`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:405](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L405) + +#### Parameters + +##### collection + +`any` + +##### isPinned? + +`boolean` = `false` + +##### \_pipeTrigger + +`number` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridBaseDirective.md new file mode 100644 index 000000000..b8420bc88 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridBaseDirective.md @@ -0,0 +1,7519 @@ +# Abstract Class: IgxGridBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L146) + +Interface representing a grid type. It is essentially the blueprint to a grid object. +Contains definitions of properties and methods, relevant to a grid +Extends `IGridDataBindable` + +## Extended by + +- [`IgxGridComponent`](IgxGridComponent.md) +- [`IgxTreeGridComponent`](IgxTreeGridComponent.md) +- [`IgxPivotGridComponent`](IgxPivotGridComponent.md) + +## Implements + +- [`GridType`](../interfaces/GridType.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridBaseDirective**(): `IgxGridBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3500) + +#### Returns + +`IgxGridBaseDirective` + +## Properties + +### \_allowAdvancedFiltering + +> `protected` **\_allowAdvancedFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3175) + +*** + +### \_allowFiltering + +> `protected` **\_allowFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3174) + +*** + +### \_autoGeneratedCols + +> `protected` **\_autoGeneratedCols**: [`ColumnType`](../interfaces/ColumnType.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3192) + +*** + +### \_autoGeneratedColsRefs + +> `protected` **\_autoGeneratedColsRefs**: `ComponentRef`\<[`IgxColumnComponent`](IgxColumnComponent.md)\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3193) + +*** + +### \_autoSizeColumnsNotify + +> `protected` **\_autoSizeColumnsNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3185) + +*** + +### \_batchEditing + +> `protected` **\_batchEditing**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3189) + +*** + +### \_cdrRequestRepaint + +> `protected` **\_cdrRequestRepaint**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3186) + +*** + +### \_dataView + +> `protected` **\_dataView**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3194) + +*** + +### \_defaultExpandState + +> `protected` **\_defaultExpandState**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3181) + +*** + +### \_defaultTargetRecordNumber + +> `protected` **\_defaultTargetRecordNumber**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3179) + +*** + +### \_diTransactions + +> `protected` **\_diTransactions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L177) + +*** + +### \_expansionStates + +> `protected` **\_expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3180) + +*** + +### \_filterMode + +> `protected` **\_filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) = `FilterMode.quickFilter` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3176) + +*** + +### \_filterStrategy + +> `protected` **\_filterStrategy**: [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3191) + +*** + +### \_firstAutoResize + +> `protected` **\_firstAutoResize**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3184) + +*** + +### \_headerFeaturesWidth + +> `protected` **\_headerFeaturesWidth**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3182) + +*** + +### \_hGridSchema + +> `protected` **\_hGridSchema**: [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3204) + +*** + +### \_init + +> `protected` **\_init**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3183) + +*** + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3195) + +*** + +### \_pinnedRecordIDs + +> `protected` **\_pinnedRecordIDs**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3164) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3206) + +*** + +### \_sortingOptions + +> `protected` **\_sortingOptions**: [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3190) + +*** + +### \_summaryRowList + +> `protected` **\_summaryRowList**: `QueryList`\<[`IgxSummaryRowComponent`](IgxSummaryRowComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1795) + +*** + +### \_transactions + +> `protected` **\_transactions**: [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3188) + +*** + +### \_userOutletDirective + +> `protected` **\_userOutletDirective**: [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3187) + +*** + +### activeNodeChange + +> **activeNodeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1059](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1059) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`activeNodeChange`](../interfaces/GridType.md#activenodechange) + +*** + +### addRowEmptyTemplate + +> **addRowEmptyTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L263) + +Gets/Sets a custom template for adding row UI when grid is empty. + +#### Example + +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L380) + +Emitted after advanced filtering is performed. + +#### Remarks + +Returns the advanced filtering expressions tree. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTreeChange`](../interfaces/GridType.md#advancedfilteringexpressionstreechange) + +*** + +### autoGenerate + +> **autoGenerate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L206) + +Gets/Sets whether to auto-generate the columns. + +#### Remarks + +The default value is false. When set to true, it will override all columns declared through code or in markup. + +#### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +*** + +### autoGenerateExclude + +> **autoGenerateExclude**: `string`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L223) + +Gets/Sets a list of property keys to be excluded from the generated column collection + +#### Remarks + +The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime +unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their +[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. + +#### Example + +```html +<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid> +``` +```typescript +const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] +``` + +*** + +### baseClass + +> `protected` **baseClass**: `string` = `'igx-grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1813) + +*** + +### cdr + +> `readonly` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L162) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cdr`](../interfaces/GridType.md#cdr) + +*** + +### cellClick + +> **cellClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L494) + +Emitted when a cell is clicked. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellClick`](../interfaces/GridType.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L640) + +Emitted when cell has been edited. + +#### Remarks + +Event is fired after editing is completed, when the cell is exiting edit mode. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEdit`](../interfaces/GridType.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L653) + +Emitted after cell has been edited and editing has been committed. + +#### Example + +```html +<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditDone`](../interfaces/GridType.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L613) + +Emitted when cell enters edit mode. + +#### Remarks + +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditEnter`](../interfaces/GridType.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L625) + +Emitted when cell exits edit mode. + +#### Example + +```html +<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditExit`](../interfaces/GridType.md#celleditexit) + +*** + +### clipboardOptions + +> **clipboardOptions**: [`IClipboardOptions`](../interfaces/IClipboardOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L335) + +Controls the copy behavior of the grid. + +*** + +### colResizingService + +> `protected` **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L153) + +*** + +### columnInit + +> **columnInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L732) + +Emitted when a column is initialized. + +#### Remarks + +Returns the column object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> +``` + +*** + +### columnMoving + +> **columnMoving**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L937) + +Emitted during the column moving operation. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. This event is cancelable. + +#### Example + +```html +<igx-grid (columnMoving)="moving($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMoving`](../interfaces/GridType.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L950) + +Emitted when column moving ends. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. + +#### Example + +```html +<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingEnd`](../interfaces/GridType.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L924) + +Emitted when column moving starts. + +#### Remarks + +Returns the moved `IgxColumnComponent` object. + +#### Example + +```html +<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingStart`](../interfaces/GridType.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L582) + +Emitted before `IgxColumnComponent` is pinned. + +#### Remarks + +The index at which to insert the column may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPin`](../interfaces/GridType.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L599) + +Emitted after `IgxColumnComponent` is pinned. + +#### Remarks + +The index that the column is inserted at may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPinned`](../interfaces/GridType.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L860) + +Emitted after column is resized. + +#### Remarks + +Returns the `IgxColumnComponent` object's old and new width. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnResized`](../interfaces/GridType.md#columnresized) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L565) + +Emitted when `IgxColumnComponent` is selected. + +#### Example + +```html +<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelectionChanging`](../interfaces/GridType.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L911) + +Emitted after column visibility is changed. + +#### Remarks + +Args: { column: IgxColumnComponent, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanged`](../interfaces/GridType.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L898) + +Emitted before column visibility is changed. + +#### Remarks + +Args: { column: any, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanging`](../interfaces/GridType.md#columnvisibilitychanging) + +*** + +### contextMenu + +> **contextMenu**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L872) + +Emitted when a cell or row is right clicked. + +#### Remarks + +Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. +```html +<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`contextMenu`](../interfaces/GridType.md#contextmenu) + +*** + +### data + +> `abstract` **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3349) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`data`](../interfaces/GridType.md#data) + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1129) + +Emitted after the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> +``` + +*** + +### dataChanging + +> **dataChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1118) + +Emitted before the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> +``` + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L163) + +*** + +### displayStyle + +> `protected` **displayStyle**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3452) + +*** + +### doubleClick + +> **doubleClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L885) + +Emitted when a cell is double clicked. + +#### Remarks + +Returns the `IgxGridCell` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`doubleClick`](../interfaces/GridType.md#doubleclick) + +*** + +### emptyDirectiveTemplate + +> `protected` **emptyDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1713) + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L166) + +*** + +### expansionStatesChange + +> **expansionStatesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1003) + +Emitted when the rows are expanded or collapsed. + +#### Example + +```html +<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid> +``` + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L778) + +Emitted before filtering expressions are applied. + +#### Remarks + +Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filtering`](../interfaces/GridType.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L791) + +Emitted after filtering is performed through the UI. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringDone`](../interfaces/GridType.md#filteringdone) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L366) + +Emitted after filtering is performed. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTreeChange`](../interfaces/GridType.md#filteringexpressionstreechange) + +*** + +### formGroupCreated + +> **formGroupCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L519) + +Emitted when formGroup is created on edit of row/cell. + +#### Example + +```html +<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`formGroupCreated`](../interfaces/GridType.md#formgroupcreated) + +*** + +### gridAPI + +> `readonly` **gridAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L155) + +Represents the grid service type providing API methods for the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridAPI`](../interfaces/GridType.md#gridapi) + +*** + +### gridComputedStyles + +> `protected` **gridComputedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3205) + +*** + +### gridCopy + +> **gridCopy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L991) + +Emitted when a copy operation is executed. + +#### Remarks + +Fired only if copy behavior is enabled through the [`clipboardOptions`][IgxGridBaseDirective#clipboardOptions](#clipboardoptions). + +*** + +### gridKeydown + +> **gridKeydown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L964) + +Emitted when keydown is triggered over element inside grid's body. + +#### Remarks + +This event is fired only if the key combination is supported in the grid. +Return the target type, target object and the original event. This event is cancelable. + +#### Example + +```html + <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridKeydown`](../interfaces/GridType.md#gridkeydown) + +*** + +### gridScroll + +> **gridScroll**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L392) + +Emitted when grid is scrolled horizontally/vertically. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (gridScroll)="onScroll($event)"></igx-grid> +``` + +*** + +### headerCollapsedIndicatorDirectiveTemplate + +> `protected` **headerCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1551) + +The custom template, if any, that should be used when rendering a header collapse indicator. + +*** + +### headerExpandedIndicatorDirectiveTemplate + +> `protected` **headerExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1520) + +The custom template, if any, that should be used when rendering a header expand indicator. + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L165) + +*** + +### loadingDirectiveTemplate + +> `protected` **loadingDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1710) + +*** + +### moving + +> **moving**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L230) + +Controls whether columns moving is enabled in the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moving`](../interfaces/GridType.md#moving) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L168) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigation`](../interfaces/GridType.md#navigation) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L172) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L176) + +*** + +### rangeSelected + +> **rangeSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1097) + +Emitted when making a range selection. + +#### Remarks + +Range selection can be made either through drag selection or through keyboard selection. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rangeSelected`](../interfaces/GridType.md#rangeselected) + +*** + +### rendered + +> **rendered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1101) + +Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM + +*** + +### rowAdd + +> **rowAdd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L847) + +Emmited just before the newly added row is commited. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdd`](../interfaces/GridType.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L805) + +Emitted when a row is added. + +#### Remarks + +Returns the data for the new `IgxGridRowComponent` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdded`](../interfaces/GridType.md#rowadded) + +*** + +### rowClasses + +> **rowClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L411) + +Sets a conditional class selector to the grid's row element. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class and the value is +either a callback function that returns a boolean, or boolean, like so: +```typescript +callback = (row: RowType) => { return row.selected > 6; } +rowClasses = { 'className' : this.callback }; +``` +```html +<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +*** + +### rowClick + +> **rowClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L507) + +Emitted when a row is clicked. + +#### Remarks + +Returns the `IgxGridRow`. + +#### Example + +```html +<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowClick`](../interfaces/GridType.md#rowclick) + +*** + +### rowCollapsedIndicatorDirectiveTemplate + +> `protected` **rowCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1489) + +The custom template, if any, that should be used when rendering a row collapse indicator. + +*** + +### rowDelete + +> **rowDelete**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L833) + +Emmited when deleting a row. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDelete`](../interfaces/GridType.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L819) + +Emitted when a row is deleted. + +#### Remarks + +Returns an `IRowDataEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDeleted`](../interfaces/GridType.md#rowdeleted) + +*** + +### rowDragEnd + +> **rowDragEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:982](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L982) + +Emitted when dropping a row. + +#### Remarks + +Return the dropped row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragEnd`](../interfaces/GridType.md#rowdragend) + +*** + +### rowDragStart + +> **rowDragStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L973) + +Emitted when start dragging a row. + +#### Remarks + +Return the dragged row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragStart`](../interfaces/GridType.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L686) + +Emitted when exiting edit mode for a row. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEdit`](../interfaces/GridType.md#rowedit) + +*** + +### rowEditDone + +> **rowEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L703) + +Emitted after exiting edit mode for a row and editing has been committed. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. + +#### Example + +```html +<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditDone`](../interfaces/GridType.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L668) + +Emitted when a row enters edit mode. + +#### Remarks + +Emitted when [rowEditable]="true". +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditEnter`](../interfaces/GridType.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L719) + +Emitted when row editing is canceled. + +#### Remarks + +Emits when [rowEditable]="true" & `endEdit(false)` is called. +Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button +in the row editing overlay. + +#### Example + +```html +<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditExit`](../interfaces/GridType.md#roweditexit) + +*** + +### rowExpandedIndicatorDirectiveTemplate + +> `protected` **rowExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1458) + +The custom template, if any, that should be used when rendering a row expand indicator. + +*** + +### rowPinned + +> **rowPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1048](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1048) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +*** + +### rowPinning + +> **rowPinning**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1037](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1037) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L554) + +Emitted when `IgxGridRowComponent` is selected. + +#### Example + +```html +<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectionChanging`](../interfaces/GridType.md#rowselectionchanging) + +*** + +### rowStyles + +> **rowStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L431) + +Sets conditional style properties on the grid row element. +It accepts an object literal where the keys are +the style properties and the value is an expression to be evaluated. +```typescript +styles = { + background: 'yellow', + color: (row: RowType) => row.selected : 'red': 'white' +} +``` +```html +<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +*** + +### rowToggle + +> **rowToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1026) + +Emitted when the expanded state of a row gets changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowToggle`](../interfaces/GridType.md#rowtoggle) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L543) + +Emitted when a cell is selected. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selected`](../interfaces/GridType.md#selected) + +*** + +### selectedRowsChange + +> **selectedRowsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1015) + +Emitted when the rows are selected or deselected. + +#### Example + +```html +<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid> +``` + +*** + +### snackbarDisplayTime + +> **snackbarDisplayTime**: `number` = `6000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L193) + +Gets/Sets the display time for the row adding snackbar notification. + +#### Remarks + +By default it is 6000ms. + +*** + +### sorting + +> **sorting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L752) + +Emitted before sorting expressions are applied. + +#### Remarks + +Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> +``` + +*** + +### sortingDone + +> **sortingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L765) + +Emitted after sorting is completed. + +#### Remarks + +Returns the sorting expression. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> +``` + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1072) + +Emitted before sorting is performed. + +#### Remarks + +Returns the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressionsChange`](../interfaces/GridType.md#sortingexpressionschange) + +*** + +### tbodyContainer + +> `protected` **tbodyContainer**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1324) + +*** + +### templateRows + +> `protected` **templateRows**: `string` = `'auto auto auto 1fr auto auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3455) + +*** + +### textHighlightService + +> `protected` **textHighlightService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L171) + +*** + +### toolbarExporting + +> **toolbarExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1086) + +Emitted when an export process is initiated by the user. + +#### Example + +```typescript +toolbarExporting(event: IGridToolbarExportEventArgs){ + const toolbarExporting = event; +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`toolbarExporting`](../interfaces/GridType.md#toolbarexporting) + +*** + +### transactionFactory + +> `protected` **transactionFactory**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L156) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `filteringExpressionsTree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L465) + +Gets/Sets a unique values strategy used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### filteringExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Remarks + +Provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering. + +#### Example + +```html +<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`uniqueColumnValuesStrategy`](../interfaces/GridType.md#uniquecolumnvaluesstrategy) + +*** + +### validation + +> `readonly` **validation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L150) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validation`](../interfaces/GridType.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L530) + +Emitted when grid's validation status changes. + +#### Example + +```html +<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationStatusChange`](../interfaces/GridType.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) = `'change'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2063) + +Gets/Sets the trigger for validators used when editing the grid. + +#### Example + +```html +<igx-grid #grid validationTrigger='blur'></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationTrigger`](../interfaces/GridType.md#validationtrigger) + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L164) + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L158) + +## Accessors + +### activeRowIndexes + +#### Get Signature + +> **get** `protected` **activeRowIndexes**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4068) + +##### Returns + +`number`[] + +*** + +### advancedFilteringExpressionsTree + +#### Get Signature + +> **get** **advancedFilteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1920) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **advancedFilteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1924) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTree`](../interfaces/GridType.md#advancedfilteringexpressionstree) + +*** + +### allowAdvancedFiltering + +#### Get Signature + +> **get** **allowAdvancedFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2336) + +Gets/Sets a value indicating whether the advanced filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowAdvancedFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2340) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowAdvancedFiltering`](../interfaces/GridType.md#allowadvancedfiltering) + +*** + +### allowFiltering + +#### Get Signature + +> **get** **allowFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2310) + +Gets/Sets if the filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2314) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowFiltering`](../interfaces/GridType.md#allowfiltering) + +*** + +### ariaColCount + +#### Get Signature + +> **get** `protected` **ariaColCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1816) + +##### Returns + +`number` + +*** + +### ariaRowCount + +#### Get Signature + +> **get** `protected` **ariaRowCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1821) + +##### Returns + +`number` + +*** + +### batchEditing + +#### Get Signature + +> **get** **batchEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2831) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **batchEditing**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2835) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`batchEditing`](../interfaces/GridType.md#batchediting) + +*** + +### cellMergeMode + +#### Get Signature + +> **get** **cellMergeMode**(): [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2901) + +Gets/Sets cell merge mode. + +##### Returns + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +#### Set Signature + +> **set** **cellMergeMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2905) + +##### Parameters + +###### value + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellMergeMode`](../interfaces/GridType.md#cellmergemode) + +*** + +### cellSelection + +#### Get Signature + +> **get** **cellSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2882) + +Gets/Sets cell selection mode. + +##### Remarks + +By default the cell selection mode is multiple + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **cellSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2886) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellSelection`](../interfaces/GridType.md#cellselection) + +*** + +### columns + +#### Get Signature + +> **get** **columns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4613) + +Gets an array of `IgxColumnComponent`s. + +##### Example + +```typescript +const colums = this.grid.columns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columns`](../interfaces/GridType.md#columns) + +*** + +### columnSelection + +#### Get Signature + +> **get** **columnSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2943) + +Gets/Sets column selection mode + +##### Remarks + +By default the row selection mode is none + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **columnSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2947) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelection`](../interfaces/GridType.md#columnselection) + +*** + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2187) + +Gets/Sets the default width of the columns. + +##### Example + +```html +<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2190) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### dataCloneStrategy + +#### Get Signature + +> **get** **dataCloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L320) + +Gets/Sets the data clone strategy of the grid when in edit mode. + +##### Example + +```html + <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> +``` + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **dataCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L324) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataCloneStrategy`](../interfaces/GridType.md#dataclonestrategy) + +*** + +### dataRowList + +#### Get Signature + +> **get** **dataRowList**(): `QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2606) + +A list of currently rendered `IgxGridRowComponent`'s. + +##### Example + +```typescript +const dataList = this.grid.dataRowList; +``` + +##### Returns + +`QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataRowList`](../interfaces/GridType.md#datarowlist) + +*** + +### dataView + +#### Get Signature + +> **get** **dataView**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5809) + +Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. + +##### Example + +```typescript + const dataView = this.grid.dataView; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataView`](../interfaces/GridType.md#dataview) + +*** + +### defaultRowHeight + +#### Get Signature + +> **get** **defaultRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4513) + +Gets the default row height. + +##### Example + +```typescript +const rowHeigh = this.grid.defaultRowHeight; +``` + +##### Returns + +`number` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`defaultRowHeight`](../interfaces/GridType.md#defaultrowheight) + +*** + +### dragGhostCustomTemplate + +#### Get Signature + +> **get** **dragGhostCustomTemplate**(): `TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1234) + +Gets the custom template, if any, used for row drag ghost. + +##### Returns + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +#### Set Signature + +> **set** **dragGhostCustomTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1251) + +Sets a custom template for the row drag ghost. +```html +<ng-template #template igxRowDragGhost> + <igx-icon>menu</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragGhostCustomTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +##### Returns + +`void` + +*** + +### dragIndicatorIconTemplate + +#### Get Signature + +> **get** **dragIndicatorIconTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2711](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2711) + +The custom template, if any, that should be used when rendering the row drag indicator icon + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **dragIndicatorIconTemplate**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2728) + +Sets a custom template that should be used when rendering the row drag indicator icon. +```html +<ng-template #template igxDragIndicatorIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragIndicatorIconTemplate = this.template; +``` + +##### Parameters + +###### val + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +The template for drag indicator icons. Could be of any type + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dragIndicatorIconTemplate`](../interfaces/GridType.md#dragindicatoricontemplate) + +*** + +### emptyFilteredGridMessage + +#### Get Signature + +> **get** **emptyFilteredGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2273) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyFilteredGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2269) + +Gets/Sets the message displayed when there are no records and the grid is filtered. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### emptyGridMessage + +#### Get Signature + +> **get** **emptyGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2208) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2205) + +Get/Sets the message displayed when there are no records. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### emptyGridTemplate + +#### Get Signature + +> **get** **emptyGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L247) + +Gets/Sets a custom template when empty. + +##### Example + +```html +<ng-template igxGridEmpty> + <!-- content to show when the grid is empty --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **emptyGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L250) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### excelStyleHeaderIconTemplate + +#### Get Signature + +> **get** **excelStyleHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1586) + +Gets the excel style header icon. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **excelStyleHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1603) + +Sets the excel style header icon. +```html +<ng-template #template igxExcelStyleHeaderIcon> +<igx-icon>filter_alt</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.excelStyleHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`excelStyleHeaderIconTemplate`](../interfaces/GridType.md#excelstyleheadericontemplate) + +*** + +### expansionStates + +#### Get Signature + +> **get** **expansionStates**(): `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4381) + +Gets/Sets a list of key-value pairs [row ID, expansion state]. + +##### Remarks + +Includes only states that differ from the default one. +Supports two-way binding. + +##### Example + +```html +<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> +</igx-grid> +``` + +##### Returns + +`Map`\<`any`, `boolean`\> + +#### Set Signature + +> **set** **expansionStates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4386) + +##### Parameters + +###### value + +`Map`\<`any`, `boolean`\> + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`expansionStates`](../interfaces/GridType.md#expansionstates) + +*** + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3359) + +Returns an array of objects containing the filtered data. + +##### Example + +```typescript +let filteredData = this.grid.filteredData; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredData`](../interfaces/GridType.md#filtereddata) + +*** + +### filteredSortedData + +#### Get Signature + +> **get** **filteredSortedData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3371) + +Returns an array containing the filtered sorted data. + +##### Example + +```typescript +const filteredSortedData = this.grid1.filteredSortedData; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredSortedData`](../interfaces/GridType.md#filteredsorteddata) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1874) + +Gets/Sets the filtering state. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way binding. + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **filteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1878) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTree`](../interfaces/GridType.md#filteringexpressionstree) + +*** + +### filteringLogic + +#### Get Signature + +> **get** **filteringLogic**(): [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1853) + +Gets/Sets the filtering logic of the `IgxGridComponent`. + +##### Remarks + +The default is AND. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> +``` + +##### Returns + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +#### Set Signature + +> **set** **filteringLogic**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1857) + +##### Parameters + +###### value + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringLogic`](../interfaces/GridType.md#filteringlogic) + +*** + +### filterMode + +#### Get Signature + +> **get** **filterMode**(): [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2362](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2362) + +Gets/Sets the filter mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it's set to FilterMode.quickFilter. + +##### Returns + +[`FilterMode`](../type-aliases/FilterMode.md) + +#### Set Signature + +> **set** **filterMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2366) + +The filter mode for the grid. It can be quick filter of excel-style filter + +##### Parameters + +###### value + +[`FilterMode`](../type-aliases/FilterMode.md) + +##### Returns + +`void` + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterMode`](../interfaces/GridType.md#filtermode) + +*** + +### filterStrategy + +#### Get Signature + +> **get** **filterStrategy**(): [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2456) + +Gets/Sets the filtering strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid> +``` + +##### Returns + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +#### Set Signature + +> **set** **filterStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2460) + +##### Parameters + +###### classRef + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterStrategy`](../interfaces/GridType.md#filterstrategy) + +*** + +### hasCellsToMerge + +#### Get Signature + +> **get** `protected` **hasCellsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4082) + +##### Returns + +`boolean` + +*** + +### hasVisibleColumns + +#### Set Signature + +> **set** **hasVisibleColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5533) + +Indicates whether the grid has columns that are shown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether the grid has columns that are shown + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hasVisibleColumns`](../interfaces/GridType.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **headerCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1557) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1574) + +Sets the row collapse indicator template. +```html +<ng-template igxHeaderCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerCollapsedIndicatorTemplate`](../interfaces/GridType.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +#### Get Signature + +> **get** **headerExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1526) + +Gets the header expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1543) + +Sets the header expand indicator template. +```html +<ng-template igxHeaderExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerExpandedIndicatorTemplate`](../interfaces/GridType.md#headerexpandedindicatortemplate) + +*** + +### headSelectorTemplate + +#### Get Signature + +> **get** **headSelectorTemplate**(): `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2620) + +Gets the header row selector template. + +##### Returns + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **headSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2637) + +Sets the header row selector template. +```html +<ng-template #template igxHeadSelector let-headContext> +{{ headContext.selectedCount }} / {{ headContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headSelectorTemplate`](../interfaces/GridType.md#headselectortemplate) + +*** + +### height + +#### Get Signature + +> **get** **height**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2109) + +Gets/Sets the height. + +##### Example + +```html +<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **height**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2113) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### hiddenColumnsCount + +#### Get Signature + +> **get** **hiddenColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2808) + +Gets the number of hidden columns. + +##### Example + +```typescript +const hiddenCol = this.grid.hiddenColumnsCount; +`` + +##### Returns + +`number` + +Represents the count of only the hidden (not visible) columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hiddenColumnsCount`](../interfaces/GridType.md#hiddencolumnscount) + +*** + +### hideRowSelectors + +#### Get Signature + +> **get** **hideRowSelectors**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2027](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2027) + +Gets/Sets if the row selectors are hidden. + +##### Remarks + +By default row selectors are shown + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideRowSelectors**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2031](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2031) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### isCustomSetRowHeight + +#### Get Signature + +> **get** `protected` **isCustomSetRowHeight**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3340) + +##### Returns + +`boolean` + +*** + +### isLoading + +#### Get Signature + +> **get** **isLoading**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2235) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isLoading**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2222) + +Gets/Sets whether the grid is going to show a loading indicator. + +##### Example + +```html +<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`isLoading`](../interfaces/GridType.md#isloading) + +*** + +### lastSearchInfo + +#### Get Signature + +> **get** **lastSearchInfo**(): [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2995](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2995) + +Represents the last search information. + +##### Returns + +[`ISearchInfo`](../interfaces/ISearchInfo.md) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`lastSearchInfo`](../interfaces/GridType.md#lastsearchinfo) + +*** + +### loadingGridTemplate + +#### Get Signature + +> **get** **loadingGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L280) + +Gets/Sets a custom template when loading. + +##### Example + +```html +<ng-template igxGridLoading> + <!-- content to show when the grid is loading --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **loadingGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L283) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1970) + +Gets/Sets the locale. + +##### Remarks + +If not set, returns browser's language. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1974) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`locale`](../interfaces/GridType.md#locale) + +*** + +### mergedDataInView + +#### Get Signature + +> **get** `protected` **mergedDataInView**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3986) + +##### Returns + +`any` + +*** + +### mergeStrategy + +#### Get Signature + +> **get** **mergeStrategy**(): [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2491) + +Gets/Sets the merge strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid> +``` + +##### Returns + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +#### Set Signature + +> **set** **mergeStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2494) + +##### Parameters + +###### value + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`mergeStrategy`](../interfaces/GridType.md#mergestrategy) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4485) + +Gets the native element. + +##### Example + +```typescript +const nativeEl = this.grid.nativeElement. +``` + +##### Returns + +`any` + +Represents the native HTML element itself + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`nativeElement`](../interfaces/GridType.md#nativeelement) + +*** + +### outlet + +#### Get Signature + +> **get** **outlet**(): [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4496) + +Gets/Sets the outlet used to attach the grid's overlays to. + +##### Remarks + +If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. + +##### Returns + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +#### Set Signature + +> **set** **outlet**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4500) + +##### Parameters + +###### val + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`outlet`](../interfaces/GridType.md#outlet) + +*** + +### pagingMode + +#### Get Signature + +> **get** **pagingMode**(): [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1987](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1987) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Returns + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +#### Set Signature + +> **set** **pagingMode**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1991) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Parameters + +###### val + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +##### Returns + +`void` + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pagingMode`](../interfaces/GridType.md#pagingmode) + +*** + +### pinnedColumns + +#### Get Signature + +> **get** **pinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4625) + +Gets an array of the pinned `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumns`](../interfaces/GridType.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +#### Get Signature + +> **get** **pinnedColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2815) + +Gets the number of pinned columns. + +##### Returns + +`number` + +Represents the count of only the pinned columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumnsCount`](../interfaces/GridType.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +#### Get Signature + +> **get** **pinnedEndColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4653) + +Gets an array of the pinned to the right `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedEndColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedEndColumns`](../interfaces/GridType.md#pinnedendcolumns) + +*** + +### pinnedRows + +#### Get Signature + +> **get** **pinnedRows**(): [`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4666) + +Gets an array of the pinned `IgxRowComponent`s. + +##### Example + +```typescript +const pinnedRow = this.grid.pinnedRows; +``` + +##### Returns + +[`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedRows`](../interfaces/GridType.md#pinnedrows) + +*** + +### pinnedStartColumns + +#### Get Signature + +> **get** **pinnedStartColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4641) + +Gets an array of the pinned to the left `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedStartColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedStartColumns`](../interfaces/GridType.md#pinnedstartcolumns) + +*** + +### pinning + +#### Get Signature + +> **get** **pinning**(): [`IPinningConfig`](../interfaces/IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2290) + +Gets/Sets the initial pinning configuration. + +##### Remarks + +Allows to apply pinning the columns to the start or the end. +Note that pinning to both sides at a time is not allowed. + +##### Example + +```html +<igx-grid [pinning]="pinningConfig"></igx-grid> +``` + +##### Returns + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +#### Set Signature + +> **set** **pinning**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2293) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +##### Parameters + +###### value + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +##### Returns + +`void` + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinning`](../interfaces/GridType.md#pinning) + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L443) + +Gets/Sets the primary key. + +##### Example + +```html +<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **primaryKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L447) + +Represents the unique primary key used for identifying rows in the grid + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the unique primary key used for identifying rows in the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`primaryKey`](../interfaces/GridType.md#primarykey) + +*** + +### renderData + +#### Get Signature + +> **get** `protected` **renderData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3446) + +##### Returns + +`any`[] + +*** + +### renderedActualRowHeight + +#### Get Signature + +> **get** `protected` **renderedActualRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7829) + +##### Returns + +`number` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1837) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1832) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`resourceStrings`](../interfaces/GridType.md#resourcestrings) + +*** + +### rowAddTextTemplate + +#### Get Signature + +> **get** **rowAddTextTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1403) + +Gets the row add text template. + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **rowAddTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1419) + +Sets the row add text template. +```html +<ng-template #template igxRowAddText> +Adding Row +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowAddTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### rowCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **rowCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1495) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1512) + +Sets the row collapse indicator template. +```html +<ng-template igxRowCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowCollapsedIndicatorTemplate`](../interfaces/GridType.md#rowcollapsedindicatortemplate) + +*** + +### rowDraggable + +#### Get Signature + +> **get** **rowDraggable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2045](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2045) + +Gets/Sets whether rows can be moved. + +##### Example + +```html +<igx-grid #grid [rowDraggable]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowDraggable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2049](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2049) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDraggable`](../interfaces/GridType.md#rowdraggable) + +*** + +### rowEditable + +#### Get Signature + +> **get** **rowEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2086) + +Gets/Sets whether the rows are editable. + +##### Remarks + +By default it is set to false. + +##### Example + +```html +<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2090) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditable`](../interfaces/GridType.md#roweditable) + +*** + +### rowEditActionsTemplate + +#### Get Signature + +> **get** **rowEditActionsTemplate**(): `TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1433) + +Gets the row edit actions template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditActionsTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1450) + +Sets the row edit actions template. +```html +<ng-template #template igxRowEditActions let-endRowEdit> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditActionsTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### rowEditTextTemplate + +#### Get Signature + +> **get** **rowEditTextTemplate**(): `TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1373) + +Gets the row edit text template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1389) + +Sets the row edit text template. +```html +<ng-template #template igxRowEditText let-rowChangesCount> +Changes: {{rowChangesCount}} +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### rowExpandedIndicatorTemplate + +#### Get Signature + +> **get** **rowExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1464) + +Gets the row expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1481) + +Sets the row expand indicator template. +```html +<ng-template igxRowExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowExpandedIndicatorTemplate`](../interfaces/GridType.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2166) + +Gets/Sets the row height. + +##### Example + +```html +<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2170) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +##### Parameters + +###### value + +`string` \| `number` + +##### Returns + +`void` + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowHeight`](../interfaces/GridType.md#rowheight) + +*** + +### rowList + +#### Get Signature + +> **get** **rowList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2585) + +A list of `IgxGridRowComponent`. + +##### Example + +```typescript +const rowList = this.grid.rowList; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowList`](../interfaces/GridType.md#rowlist) + +*** + +### rowSelection + +#### Get Signature + +> **get** **rowSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2922) + +Gets/Sets row selection mode + +##### Remarks + +By default the row selection mode is 'none' +Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **rowSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2926) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelection`](../interfaces/GridType.md#rowselection) + +*** + +### rowSelectorTemplate + +#### Get Signature + +> **get** **rowSelectorTemplate**(): `TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2653) + +Gets the row selector template. + +##### Returns + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **rowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2670) + +Sets a custom template for the row selectors. +```html +<ng-template #template igxRowSelector let-rowContext> + <igx-checkbox [checked]="rowContext.selected"></igx-checkbox> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectorTemplate`](../interfaces/GridType.md#rowselectortemplate) + +*** + +### selectedRows + +#### Get Signature + +> **get** **selectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2543) + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **selectedRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2539](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2539) + +Gets/Sets the current selection state. + +##### Remarks + +Represents the selected rows' IDs (primary key or rowData) + +##### Example + +```html +<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid> +``` + +##### Parameters + +###### rowIDs + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedRows`](../interfaces/GridType.md#selectedrows) + +*** + +### selectRowOnClick + +#### Get Signature + +> **get** **selectRowOnClick**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5822) + +Gets/Sets whether clicking over a row should select/deselect it + +##### Remarks + +By default it is set to true + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectRowOnClick**(`enabled`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5826) + +##### Parameters + +###### enabled + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRowOnClick`](../interfaces/GridType.md#selectrowonclick) + +*** + +### shouldGenerate + +#### Get Signature + +> **get** **shouldGenerate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2252) + +Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid + +##### Remarks + +This will allow to bind the grid to remote data and having auto-generated columns at the same time. +Note that after generating the columns, this property would be disabled to avoid re-creating +columns each time a new data is assigned. + +##### Example + +```typescript + this.grid.shouldGenerate = true; +``` + +##### Deprecated + +in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **shouldGenerate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2256) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### shouldResize + +#### Get Signature + +> **get** `protected` **shouldResize**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5574) + +##### Returns + +`boolean` + +*** + +### showSummaryOnCollapse + +#### Get Signature + +> **get** **showSummaryOnCollapse**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2438) + +Controls whether the summary row is visible when groupBy/parent row is collapsed. + +##### Example + +```html +<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible +when the groupBy/parent row is collapsed. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showSummaryOnCollapse**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2442) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### sortAscendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortAscendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1619) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortAscendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1636) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. +```html +<ng-template #template igxSortAscendingHeaderIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortAscendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortAscendingHeaderIconTemplate`](../interfaces/GridType.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortDescendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1648) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortDescendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1665) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. +```html +<ng-template #template igxSortDescendingHeaderIcon> + <igx-icon>expand_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortDescendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortDescendingHeaderIconTemplate`](../interfaces/GridType.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +#### Get Signature + +> **get** **sortHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1680) + +Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1697) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. +```html +<ng-template #template igxSortHeaderIcon> + <igx-icon>unfold_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortHeaderIconTemplate`](../interfaces/GridType.md#sortheadericontemplate) + +*** + +### sortingExpressions + +#### Get Signature + +> **get** **sortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2787](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2787) + +Gets/Sets the sorting state. + +##### Remarks + +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid> +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Set Signature + +> **set** **sortingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2791) + +##### Parameters + +###### value + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressions`](../interfaces/GridType.md#sortingexpressions) + +*** + +### sortingOptions + +#### Get Signature + +> **get** **sortingOptions**(): [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2520) + +##### Returns + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +#### Set Signature + +> **set** **sortingOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2512) + +Gets/Sets the sorting options - single or multiple sorting. +Accepts an `ISortingOptions` object with any of the `mode` properties. + +##### Example + +```typescript +const _sortingOptions: ISortingOptions = { + mode: 'single' +} +```html +<igx-grid [sortingOptions]="sortingOptions"><igx-grid> +``` + +##### Parameters + +###### value + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingOptions`](../interfaces/GridType.md#sortingoptions) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2473) + +Gets/Sets the sorting strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid> +``` + +##### Returns + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2477) + +##### Parameters + +###### value + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortStrategy`](../interfaces/GridType.md#sortstrategy) + +*** + +### summaryCalculationMode + +#### Get Signature + +> **get** **summaryCalculationMode**(): [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2413) + +Gets/Sets the summary calculation mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. + +##### Returns + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +#### Set Signature + +> **set** **summaryCalculationMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2417) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +##### Parameters + +###### value + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +##### Returns + +`void` + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryCalculationMode`](../interfaces/GridType.md#summarycalculationmode) + +*** + +### summaryPosition + +#### Get Signature + +> **get** **summaryPosition**(): [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2393) + +Gets/Sets the summary position. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is bottom. + +##### Returns + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +#### Set Signature + +> **set** **summaryPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2397) + +Represents the position of summaries: 'top', 'bottom' + +##### Parameters + +###### value + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +##### Returns + +`void` + +Represents the position of summaries: 'top', 'bottom' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryPosition`](../interfaces/GridType.md#summaryposition) + +*** + +### summaryRowHeight + +#### Get Signature + +> **get** **summaryRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L299) + +##### Returns + +`number` + +#### Set Signature + +> **set** **summaryRowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L291) + +Get/Set IgxSummaryRow height + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryRowHeight`](../interfaces/GridType.md#summaryrowheight) + +*** + +### totalCalcWidth + +#### Get Signature + +> **get** `protected` **totalCalcWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3442) + +##### Returns + +`number` + +*** + +### totalRecords + +#### Get Signature + +> **get** **totalRecords**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4760) + +Returns the total number of records. + +##### Remarks + +Only functions when paging is enabled. + +##### Example + +```typescript +const totalRecords = this.grid.totalRecords; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalRecords**(`total`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4764) + +##### Parameters + +###### total + +`number` + +##### Returns + +`void` + +*** + +### transactions + +#### Get Signature + +> **get** **transactions**(): [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2848) + +Get transactions service for the grid. + +##### Returns + +[`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Represents the transaction service for the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`transactions`](../interfaces/GridType.md#transactions) + +*** + +### unpinnedColumns + +#### Get Signature + +> **get** **unpinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4678) + +Gets an array of unpinned `IgxColumnComponent`s. + +##### Example + +```typescript +const unpinnedColumns = this.grid.unpinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are not pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinnedColumns`](../interfaces/GridType.md#unpinnedcolumns) + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3596) + +Returns the state of the grid virtualization. + +##### Remarks + +Includes the start index and how many records are rendered. + +##### Example + +```typescript +const gridVirtState = this.grid1.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`virtualizationState`](../interfaces/GridType.md#virtualizationstate) + +*** + +### visibleColumns + +#### Get Signature + +> **get** **visibleColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4741) + +Returns an array of visible `IgxColumnComponent`s. + +##### Example + +```typescript +const visibleColumns = this.grid.visibleColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`visibleColumns`](../interfaces/GridType.md#visiblecolumns) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2139) + +Gets/Sets the width of the grid. + +##### Example + +```typescript +let gridWidth = this.grid.width; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2143) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## Methods + +### \_addRowForIndex() + +> `protected` **\_addRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6590) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` + +#### Returns + +`void` + +*** + +### \_restoreVirtState() + +> `protected` **\_restoreVirtState**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6717](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6717) + +#### Parameters + +##### row + +`any` + +#### Returns + +`void` + +*** + +### \_shouldAutoSize() + +> `protected` **\_shouldAutoSize**(`renderedHeight`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7278) + +#### Parameters + +##### renderedHeight + +`any` + +#### Returns + +`boolean` + +*** + +### addRow() + +> **addRow**(`data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4941) + +Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source. + +#### Parameters + +##### data + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.addRow(record); +``` + +*** + +### allowResetOfColumnsToMerge() + +> `protected` **allowResetOfColumnsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3974) + +#### Returns + +`boolean` + +*** + +### autoSizeColumnsInView() + +> `protected` **autoSizeColumnsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7583) + +#### Returns + +`void` + +*** + +### beginAddRowById() + +> **beginAddRowById**(`rowID`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6570](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6570) + +Enters add mode by spawning the UI under the specified row by rowID. + +#### Parameters + +##### rowID + +`any` + +The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view + +##### asChild? + +`boolean` + +Whether the record should be added as a child. Only applicable to igxTreeGrid. + +#### Returns + +`void` + +#### Remarks + +If null is passed as rowID, the row adding UI is spawned as the first record in the data view + +#### Example + +```typescript +this.grid.beginAddRowById('ALFKI'); +this.grid.beginAddRowById('ALFKI', true); +this.grid.beginAddRowById(null); +``` + +*** + +### beginAddRowByIndex() + +> **beginAddRowByIndex**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6628) + +Enters add mode by spawning the UI at the specified index. + +#### Parameters + +##### index + +`number` + +The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length + +#### Returns + +`void` + +#### Remarks + +Accepted values for index are integers from 0 to this.grid.dataView.length + +#### Example + +```typescript +this.grid.beginAddRowByIndex(0); +``` + +*** + +### beginAddRowForIndex() + +> `protected` **beginAddRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6645) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` = `false` + +#### Returns + +`void` + +*** + +### buildDataView() + +> `protected` **buildDataView**(`_data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7763) + +#### Parameters + +##### \_data + +`any`[] + +#### Returns + +`void` + +*** + +### changeRowEditingOverlayStateOnScroll() + +> `protected` **changeRowEditingOverlayStateOnScroll**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6726](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6726) + +#### Parameters + +##### row + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`void` + +*** + +### checkContainerSizeChange() + +> `protected` **checkContainerSizeChange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7269) + +#### Returns + +`boolean` + +*** + +### checkPrimaryKeyField() + +> `protected` **checkPrimaryKeyField**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7068) + +#### Returns + +`void` + +*** + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5906) + +Deselect selected cells. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearCellSelection(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearCellSelection`](../interfaces/GridType.md#clearcellselection) + +*** + +### clearFilter() + +> **clearFilter**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5235) + +If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +Otherwise clears the filtering state of all `IgxColumnComponent`s. + +#### Example + +```typescript +this.grid.clearFilter(); +``` + +*** + +### clearSearch() + +> **clearSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5485) + +Removes all the highlights in the cell. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearSearch(); +``` + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5250) + +If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +otherwise clears the sorting state of all `IgxColumnComponent`. + +#### Example + +```typescript +this.grid.clearSort(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearSort`](../interfaces/GridType.md#clearsort) + +*** + +### closeAdvancedFilteringDialog() + +> **closeAdvancedFilteringDialog**(`applyChanges`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6457) + +Closes the advanced filtering dialog. + +#### Parameters + +##### applyChanges + +`boolean` + +indicates whether the changes should be applied + +#### Returns + +`void` + +*** + +### collapseAll() + +> **collapseAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4416) + +Collapses all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.collapseAll(); +``` + +*** + +### collapseRow() + +> **collapseRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4447) + +Collapses the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.collapseRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`collapseRow`](../interfaces/GridType.md#collapserow) + +*** + +### deleteRow() + +> **deleteRow**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4964) + +Removes the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +`any` + +#### Remarks + +Requires that the `primaryKey` property is set. +The method accept rowSelector as a parameter, which is the rowID. + +#### Example + +```typescript +this.grid1.deleteRow(0); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deleteRow`](../interfaces/GridType.md#deleterow) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6069](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6069) + +Deselects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllColumns`](../interfaces/GridType.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5890) + +Deselects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.deselectAllRows(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllRows`](../interfaces/GridType.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6043](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6043) + +Deselect specified columns by field. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectColumns(['ID','Name']); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectColumns`](../interfaces/GridType.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5854) + +Deselect specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectRows([1,2,5]); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectRows`](../interfaces/GridType.md#deselectrows) + +*** + +### disableSummaries() + +> **disableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5216) + +Disable summaries for the specified column. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Examples + +```typescript +grid.disableSummaries('ProductName'); +``` + +```typescript +grid.disableSummaries([{ fieldName: 'ProductName' }]); +``` + +#### Remarks + +Disable summaries for the listed columns. + +*** + +### enableSummaries() + +> **enableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5194) + +Enables summaries for the specified column and applies your customSummary. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Remarks + +If you do not provide the customSummary, then the default summary for the column data type will be applied. + +#### Examples + +```typescript +grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); +``` +Enable summaries for the listed columns. + +```typescript +grid.enableSummaries('ProductName'); +``` + +*** + +### endEdit() + +> **endEdit**(`commit?`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6534](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6534) + +Finishes the row transactions on the current row and returns whether the grid editing was canceled. + +#### Parameters + +##### commit? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Remarks + +If `commit === true`, passes them from the pending state to the data (or transaction service) + +#### Example + +```html +<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button> +``` + +*** + +### evaluateLoadingState() + +> `protected` **evaluateLoadingState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6741) + +Should be called when data and/or isLoading input changes so that the overlay can be +hidden/shown based on the current value of shouldOverlayLoading + +#### Returns + +`void` + +*** + +### expandAll() + +> **expandAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4403) + +Expands all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.expandAll(); +``` + +*** + +### expandRow() + +> **expandRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4432) + +Expands the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.expandRow(rowID); +``` + +*** + +### extractDataFromColumnsSelection() + +> `protected` **extractDataFromColumnsSelection**(`source`, `formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7637) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +*** + +### extractDataFromSelection() + +> `protected` **extractDataFromSelection**(`source`, `formatters?`, `headers?`, `columnData?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7444) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +##### columnData? + +`any`[] + +#### Returns + +`any`[] + +*** + +### filter() + +> **filter**(`name`, `value`, `conditionOrExpressionTree?`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5157) + +Filters a single `IgxColumnComponent`. + +#### Parameters + +##### name + +`string` + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### ignoreCase? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +public filter(term) { + this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); +} +``` + +*** + +### ~~filterGlobal()~~ + +> **filterGlobal**(`value`, `condition`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5174) + +Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. + +#### Parameters + +##### value + +`any` + +##### condition + +`any` + +##### ignoreCase? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); +``` + +#### Deprecated + +in version 19.0.0. + +*** + +### findNext() + +> **findNext**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5418) + +Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findNext("financial"); +``` + +*** + +### findPrev() + +> **findPrev**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5435) + +Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findPrev("financial"); +``` + +*** + +### generateDataFields() + +> `protected` **generateDataFields**(`data`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7384) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`string`[] + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4704) + +Returns the `IgxColumnComponent` by field name. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Example + +```typescript +const myCol = this.grid1.getColumnByName("ID"); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByName`](../interfaces/GridType.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4708) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByVisibleIndex`](../interfaces/GridType.md#getcolumnbyvisibleindex) + +*** + +### getColumnList() + +> `protected` **getColumnList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6951) + +#### Returns + +`any` + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4689) + +Gets the `width` to be set on `IgxGridHeaderGroupComponent`. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`string` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getHeaderGroupWidth`](../interfaces/GridType.md#getheadergroupwidth) + +*** + +### getMergeCellOffset() + +> `protected` **getMergeCellOffset**(`rowData`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3655) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`number` + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6272) + +Returns `ICellPosition` which defines the next cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getNextCell`](../interfaces/GridType.md#getnextcell) + +*** + +### getPinnedEndWidth() + +> **getPinnedEndWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5735) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedEndWidth(); +``` + +*** + +### getPinnedStartWidth() + +> **getPinnedStartWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5712) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedStartWidth(); +``` + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6308) + +Returns `ICellPosition` which defines the previous cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getPreviousCell`](../interfaces/GridType.md#getpreviouscell) + +*** + +### getRowData() + +> **getRowData**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5090) + +Returns the data that is contained in the row component. + +#### Parameters + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`any` + +#### Remarks + +If the primary key is not specified the row selector match the row data. + +#### Example + +```typescript +const data = grid.getRowData(94741); +``` + +*** + +### getSelectableColumnsAt() + +> `protected` **getSelectableColumnsAt**(`index`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7568](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7568) + +#### Parameters + +##### index + +`any` + +#### Returns + +`any` + +*** + +### getSelectedColumnsData() + +> **getSelectedColumnsData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6094](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6094) + +Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +*** + +### getSelectedData() + +> **getSelectedData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5986) + +Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5974) + +Get the currently selected ranges in the grid. + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getSelectedRanges`](../interfaces/GridType.md#getselectedranges) + +*** + +### horizontalScrollHandler() + +> `protected` **horizontalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7808) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +*** + +### isRecordPinnedByIndex() + +> **isRecordPinnedByIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3634) + +Returns whether the record is pinned or not. + +#### Parameters + +##### rowIndex + +`number` + +Index of the record in the `filteredSortedData` collection. + +#### Returns + +`boolean` + +*** + +### markForCheck() + +> **markForCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4926) + +Triggers change detection for the `IgxGridComponent`. +Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. +May degrade performance if used when not needed, or if misused: +```typescript +// DON'Ts: +// don't call markForCheck from inside a loop +// don't call markForCheck when a primitive has changed +grid.data.forEach(rec => { + rec = newValue; + grid.markForCheck(); +}); + +// DOs +// call markForCheck after updating a nested property +grid.data.forEach(rec => { + rec.nestedProp1.nestedProp2 = newValue; +}); +grid.markForCheck(); +``` + +#### Returns + +`void` + +#### Example + +```typescript +grid.markForCheck(); +``` + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4849) + +Places a column before or after the specified target column. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### target + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### pos? + +[`DropPosition`](../enumerations/DropPosition.md) = `DropPosition.AfterDropTarget` + +#### Returns + +`void` + +#### Example + +```typescript +grid.moveColumn(column, target); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moveColumn`](../interfaces/GridType.md#movecolumn) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColIndex?`, `cb?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6224) + +Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColIndex? + +`number` = `-1` + +##### cb? + +(`args`) => `void` + +#### Returns + +`void` + +#### Remarks + +Also can execute a custom logic over the target element, +through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } + +#### Example + +```typescript + this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigateTo`](../interfaces/GridType.md#navigateto) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6437) + +Opens the advanced filtering dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`openAdvancedFilteringDialog`](../interfaces/GridType.md#openadvancedfilteringdialog) + +*** + +### pinColumn() + +> **pinColumn**(`columnName`, `index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5287) + +Pins a column by field name. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Remarks + +Returns whether the operation is successful. + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +*** + +### pinRow() + +> **pinRow**(`rowID`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5320) + +Pin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### index? + +`number` + +The index at which to insert the row in the pinned collection. + +##### row? + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.pinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinRow`](../interfaces/GridType.md#pinrow) + +*** + +### recalculateAutoSizes() + +> **recalculateAutoSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4723](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4723) + +Recalculates all widths of columns that have size set to `auto`. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.recalculateAutoSizes(); +``` + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5401) + +Recalculates grid width/height dimensions. + +#### Returns + +`void` + +#### Remarks + +Should be run when changing DOM elements dimentions manually that affect the grid's size. + +#### Example + +```typescript +this.grid.reflow(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`reflow`](../interfaces/GridType.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(`updateActiveInfo?`, `endEdit?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5450) + +Reapplies the existing search. + +#### Parameters + +##### updateActiveInfo? + +`boolean` + +##### endEdit? + +`boolean` = `true` + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the last search. + +#### Example + +```typescript +this.grid.refreshSearch(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`refreshSearch`](../interfaces/GridType.md#refreshsearch) + +*** + +### resetNotifyChanges() + +> `protected` **resetNotifyChanges**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6829) + +#### Returns + +`void` + +*** + +### selectAllColumns() + +> **selectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6082) + +Selects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5872) + +Selects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.selectAllRows(); +this.grid.selectAllRows(false); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectAllRows`](../interfaces/GridType.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6015) + +Select specified columns. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectColumns(['ID','Name'], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectColumns`](../interfaces/GridType.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6000](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6000) + +Get current selected columns. + +#### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Example + +Returns an array with selected columns +```typescript +const selectedColumns = this.grid.selectedColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedColumns`](../interfaces/GridType.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`arg`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5934) + +Select range(s) of cells between certain rows and columns of the grid. + +#### Parameters + +##### arg + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) \| [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRange`](../interfaces/GridType.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5840) + +Select specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRows([1,2,5], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRows`](../interfaces/GridType.md#selectrows) + +*** + +### shouldRecreateColumns() + +> `protected` **shouldRecreateColumns**(`oldData`, `newData`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8177) + +#### Parameters + +##### oldData + +`any`[] + +##### newData + +`any`[] + +#### Returns + +`boolean` + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5109) + +Sort a single `IgxColumnComponent`. + +#### Parameters + +##### expression + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Remarks + +Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. + +#### Example + +```typescript +this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sort`](../interfaces/GridType.md#sort) + +*** + +### subscribeToTransactions() + +> `protected` **subscribeToTransactions**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6668) + +#### Returns + +`void` + +*** + +### switchTransactionService() + +> `protected` **switchTransactionService**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6656) + +#### Parameters + +##### val + +`boolean` + +#### Returns + +`void` + +*** + +### toggleColumnVisibility() + +> **toggleColumnVisibility**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4358](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4358) + +Toggles the specified column's visibility. + +#### Parameters + +##### args + +[`IColumnVisibilityChangedEventArgs`](../interfaces/IColumnVisibilityChangedEventArgs.md) + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.toggleColumnVisibility({ + column: this.grid1.columns[0], + newValue: true +}); +``` + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4463) + +Toggles the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.toggleRow(rowID); +``` + +*** + +### transactionStatusUpdate() + +> `protected` **transactionStatusUpdate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6674](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6674) + +#### Parameters + +##### event + +[`StateUpdateEvent`](../interfaces/StateUpdateEvent.md) + +#### Returns + +`void` + +*** + +### unpinColumn() + +> **unpinColumn**(`columnName`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5302) + +Unpins a column by field name. Returns whether the operation is successful. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +*** + +### unpinRow() + +> **unpinRow**(`rowID`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5355) + +Unpin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### row? + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.unpinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinRow`](../interfaces/GridType.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5016](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5016) + +Updates the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### value + +`any` + +the new value which is to be set. + +##### rowSelector + +`any` + +corresponds to rowID. + +##### column + +`string` + +corresponds to column field. + +#### Returns + +`void` + +#### Remarks + +Requires that the `primaryKey` property is set. + +#### Example + +```typescript +this.gridWithPK.updateCell('Updated', 1, 'ProductName'); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateCell`](../interfaces/GridType.md#updatecell) + +*** + +### updateDefaultRowHeight() + +> `protected` **updateDefaultRowHeight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8096](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8096) + +#### Returns + +`void` + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5061](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5061) + +Updates the `IgxGridRowComponent` + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`void` + +#### Remarks + +The row is specified by +rowSelector parameter and the data source record with the passed value. +This method will apply requested update only if primary key is specified in the grid. + +#### Example + +```typescript +grid.updateRow({ + ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') + }, 1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateRow`](../interfaces/GridType.md#updaterow) + +*** + +### updateScrollThrottle() + +> `protected` **updateScrollThrottle**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3990) + +#### Parameters + +##### cells + +`number` + +#### Returns + +`void` + +*** + +### verticalScrollHandler() + +> `protected` **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7783](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7783) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +*** + +### viewDetachHandler() + +> `protected` **viewDetachHandler**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6408) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +*** + +### writeToData() + +> `protected` **writeToData**(`rowIndex`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6713) + +#### Parameters + +##### rowIndex + +`number` + +##### value + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridBodyDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridBodyDirective.md new file mode 100644 index 000000000..0dbcc9476 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridBodyDirective.md @@ -0,0 +1,13 @@ +# Class: IgxGridBodyDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid.common.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid.common.ts#L13) + +## Constructors + +### Constructor + +> **new IgxGridBodyDirective**(): `IgxGridBodyDirective` + +#### Returns + +`IgxGridBodyDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCRUDService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCRUDService.md new file mode 100644 index 000000000..3e3c51a91 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCRUDService.md @@ -0,0 +1,772 @@ +# Class: IgxGridCRUDService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:632](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L632) + +## Extends + +- [`IgxRowAddCrudState`](IgxRowAddCrudState.md) + +## Constructors + +### Constructor + +> **new IgxGridCRUDService**(): `IgxGridCRUDService` + +#### Returns + +`IgxGridCRUDService` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`constructor`](IgxRowAddCrudState.md#constructor) + +## Properties + +### addRowParent + +> **addRowParent**: [`IgxAddRowParent`](../interfaces/IgxAddRowParent.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L531) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`addRowParent`](IgxRowAddCrudState.md#addrowparent) + +*** + +### cell + +> **cell**: [`IgxCell`](IgxCell.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L209) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`cell`](IgxRowAddCrudState.md#cell) + +*** + +### closeRowEditingOverlay + +> **closeRowEditingOverlay**: `Subject`\<`unknown`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L351) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`closeRowEditingOverlay`](IgxRowAddCrudState.md#closeroweditingoverlay) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L208) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`grid`](IgxRowAddCrudState.md#grid) + +*** + +### isInCompositionMode + +> **isInCompositionMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L211) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`isInCompositionMode`](IgxRowAddCrudState.md#isincompositionmode) + +*** + +### row + +> **row**: [`IgxEditRow`](IgxEditRow.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L210) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`row`](IgxRowAddCrudState.md#row) + +## Accessors + +### cellInEditMode + +#### Get Signature + +> **get** **cellInEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L231) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`cellInEditMode`](IgxRowAddCrudState.md#cellineditmode) + +*** + +### nonEditable + +#### Get Signature + +> **get** **nonEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:369](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L369) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`nonEditable`](IgxRowAddCrudState.md#noneditable) + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:356](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L356) + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`primaryKey`](IgxRowAddCrudState.md#primarykey) + +*** + +### rowEditing + +#### Get Signature + +> **get** **rowEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:365](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L365) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`rowEditing`](IgxRowAddCrudState.md#rowediting) + +*** + +### rowEditingBlocked + +#### Get Signature + +> **get** **rowEditingBlocked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L373) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditingBlocked**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L377) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`rowEditingBlocked`](IgxRowAddCrudState.md#roweditingblocked) + +*** + +### rowInEditMode + +#### Get Signature + +> **get** **rowInEditMode**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L360) + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`rowInEditMode`](IgxRowAddCrudState.md#rowineditmode) + +## Methods + +### beginCellEdit() + +> **beginCellEdit**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L235) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`beginCellEdit`](IgxRowAddCrudState.md#begincelledit) + +*** + +### beginRowEdit() + +> **beginRowEdit**(`event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:382](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L382) + +Enters row edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`beginRowEdit`](IgxRowAddCrudState.md#beginrowedit) + +*** + +### cellEdit() + +> **cellEdit**(`event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L245) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`cellEdit`](IgxRowAddCrudState.md#celledit) + +*** + +### cellEditDone() + +> **cellEditDone**(`event`, `addRow`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L308) + +#### Parameters + +##### event + +`any` + +##### addRow + +`boolean` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`cellEditDone`](IgxRowAddCrudState.md#celleditdone) + +*** + +### createCell() + +> **createCell**(`cell`): [`IgxCell`](IgxCell.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L213) + +#### Parameters + +##### cell + +`any` + +#### Returns + +[`IgxCell`](IgxCell.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`createCell`](IgxRowAddCrudState.md#createcell) + +*** + +### createRow() + +> **createRow**(`cell`): [`IgxEditRow`](IgxEditRow.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L218) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +[`IgxEditRow`](IgxEditRow.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`createRow`](IgxRowAddCrudState.md#createrow) + +*** + +### endCellEdit() + +> **endCellEdit**(`restoreFocus?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L334) + +Clears cell editing state + +#### Parameters + +##### restoreFocus? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`endCellEdit`](IgxRowAddCrudState.md#endcelledit) + +*** + +### endEdit() + +> **endEdit**(`commit?`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:740](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L740) + +Finishes the row transactions on the current row and returns whether the grid editing was canceled. + +#### Parameters + +##### commit? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Remarks + +If `commit === true`, passes them from the pending state to the data (or transaction service) + +#### Example + +```html +<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button> +``` + +*** + +### endEditMode() + +> **endEditMode**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L500) + +Clears cell and row editing state and closes row editing template if it is open + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`endEditMode`](IgxRowAddCrudState.md#endeditmode) + +*** + +### endRowEdit() + +> **endRowEdit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:493](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L493) + +Clears row editing state + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`endRowEdit`](IgxRowAddCrudState.md#endrowedit) + +*** + +### enterAddRowMode() + +> **enterAddRowMode**(`parentRow`, `asChild?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L685) + +Enters add row mode by creating temporary dummy so the user can fill in new row cells. + +#### Parameters + +##### parentRow + +[`RowType`](../interfaces/RowType.md) + +Parent row after which the Add Row UI will be rendered. + If `null` will show it at the bottom after all rows (or top if there are not rows). + +##### asChild? + +`boolean` + +Specifies if the new row should be added as a child to a tree row. + +##### event? + +`Event` + +Base event that triggered the add row mode. + +#### Returns + +`void` + +*** + +### enterEditMode() + +> **enterEditMode**(`cell`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L634) + +#### Parameters + +##### cell + +`any` + +##### event? + +`Event` + +#### Returns + +`boolean` + +*** + +### exitCellEdit() + +> **exitCellEdit**(`event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L319) + +Exit cell edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`exitCellEdit`](IgxRowAddCrudState.md#exitcelledit) + +*** + +### exitRowEdit() + +> **exitRowEdit**(`cachedRowData`, `event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:483](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L483) + +Exit row edit mode + +#### Parameters + +##### cachedRowData + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`exitRowEdit`](IgxRowAddCrudState.md#exitrowedit) + +*** + +### getParentRowId() + +> `protected` **getParentRowId**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L621) + +#### Returns + +`any` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`getParentRowId`](IgxRowAddCrudState.md#getparentrowid) + +*** + +### rowEdit() + +> **rowEdit**(`event`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:406](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L406) + +#### Parameters + +##### event + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`rowEdit`](IgxRowAddCrudState.md#rowedit) + +*** + +### rowEditDone() + +> **rowEditDone**(`cachedRowData`, `event`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L475) + +#### Parameters + +##### cachedRowData + +`any` + +##### event + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`rowEditDone`](IgxRowAddCrudState.md#roweditdone) + +*** + +### sameCell() + +> **sameCell**(`cell`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L226) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`sameCell`](IgxRowAddCrudState.md#samecell) + +*** + +### sameRow() + +> **sameRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L222) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`sameRow`](IgxRowAddCrudState.md#samerow) + +*** + +### targetInEdit() + +> **targetInEdit**(`rowIndex`, `columnIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L342) + +Returns whether the targeted cell is in edit mode + +#### Parameters + +##### rowIndex + +`number` + +##### columnIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`targetInEdit`](IgxRowAddCrudState.md#targetinedit) + +*** + +### updateCell() + +> **updateCell**(`exit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L251) + +#### Parameters + +##### exit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`updateCell`](IgxRowAddCrudState.md#updatecell) + +*** + +### updateRow() + +> **updateRow**(`commit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L412) + +#### Parameters + +##### commit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`updateRow`](IgxRowAddCrudState.md#updaterow) + +*** + +### updateRowEditData() + +> **updateRowEditData**(`row`, `value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:508](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L508) + +#### Parameters + +##### row + +[`IgxEditRow`](IgxEditRow.md) + +##### value? + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowAddCrudState`](IgxRowAddCrudState.md).[`updateRowEditData`](IgxRowAddCrudState.md#updateroweditdata) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCell.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCell.md new file mode 100644 index 000000000..ef603b951 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCell.md @@ -0,0 +1,479 @@ +# Class: IgxGridCell + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L5) + +Interface representing a cell in the grid. It is essentially the blueprint to a cell object. +Contains definitions of properties and methods, relevant to a cell + +## Implements + +- [`CellType`](../interfaces/CellType.md) + +## Properties + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L14) + +Returns the grid containing the cell. + +#### Memberof + +IgxGridCell + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`grid`](../interfaces/CellType.md#grid) + +## Accessors + +### active + +#### Get Signature + +> **get** **active**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:229](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L229) + +Indicates whether the cell is currently active (focused). + +##### Returns + +`boolean` + +Indicates whether the cell is currently active (focused). + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`active`](../interfaces/CellType.md#active) + +*** + +### column + +#### Get Signature + +> **get** **column**(): [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L56) + +Returns the column of the cell. +```typescript +let column = this.cell.column; +``` + +##### Memberof + +IgxGridCell + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md) + +Represents the column that the cell belongs to. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`column`](../interfaces/CellType.md#column) + +*** + +### editable + +#### Get Signature + +> **get** **editable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L107) + +Returns whether the cell is editable.. + +##### Memberof + +IgxGridCell + +##### Returns + +`boolean` + +Indicates whether the cell can be edited. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`editable`](../interfaces/CellType.md#editable) + +*** + +### editMode + +#### Get Signature + +> **get** **editMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L169) + +Returns if the row is currently in edit mode. + +##### Memberof + +IgxGridCell + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **editMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L182) + +Starts/ends edit mode for the cell. + +```typescript +cell.editMode = !cell.editMode; +``` + +##### Memberof + +IgxGridCell + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether the cell is currently in edit mode. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`editMode`](../interfaces/CellType.md#editmode) + +*** + +### editValue + +#### Get Signature + +> **get** **editValue**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L68) + +Gets the current edit value while a cell is in edit mode. +```typescript +let editValue = this.cell.editValue; +``` + +##### Memberof + +IgxGridCell + +##### Returns + +`any` + +#### Set Signature + +> **set** **editValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L83) + +Sets the current edit value while a cell is in edit mode. +Only for cell editing mode. +```typescript +this.cell.editValue = value; +``` + +##### Memberof + +IgxGridCell + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +The value to display when the cell is in edit mode. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`editValue`](../interfaces/CellType.md#editvalue) + +*** + +### id + +#### Get Signature + +> **get** **id**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L158) + +Gets the cell id. +A cell in the grid is identified by: +- rowID - primaryKey data value or the whole rowData, if the primaryKey is omitted. +- rowIndex - the row index +- columnID - column index + +```typescript +let cellID = cell.id; +``` + +##### Memberof + +IgxGridCell + +##### Returns + +`any` + +Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`id`](../interfaces/CellType.md#id) + +*** + +### row + +#### Get Signature + +> **get** **row**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L44) + +Returns the row containing the cell. +```typescript +let row = this.cell.row; +``` + +##### Memberof + +IgxGridCell + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +Represents the row that the cell belongs to + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`row`](../interfaces/CellType.md#row) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L206) + +Gets whether the cell is selected. +```typescript +let isSelected = this.cell.selected; +``` + +##### Memberof + +IgxGridCell + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L219) + +Selects/deselects the cell. +```typescript +this.cell.selected = true. +``` + +##### Memberof + +IgxGridCell + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`selected`](../interfaces/CellType.md#selected) + +*** + +### selectionNode + +#### Get Signature + +> **get** `protected` **selectionNode**(): [`ISelectionNode`](../interfaces/ISelectionNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L258) + +##### Returns + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +*** + +### validation + +#### Get Signature + +> **get** **validation**(): [`IGridValidationState`](../interfaces/IGridValidationState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L97) + +Gets the validation status and errors, if any. +```typescript +let validation = this.cell.validation; +let errors = validation.errors; +``` + +##### Returns + +[`IGridValidationState`](../interfaces/IGridValidationState.md) + +Optional; An object representing the validation state of the cell. +Whether it's valid or invalid, and if it has errors + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`validation`](../interfaces/CellType.md#validation) + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L128) + +Returns the cell value. + +##### Memberof + +IgxGridCell + +##### Returns + +`any` + +#### Set Signature + +> **set** **value**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L141) + +Updates the cell value. + +##### Memberof + +IgxGridCell + +##### Parameters + +###### val + +`any` + +##### Returns + +`void` + +The current value of the cell. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`value`](../interfaces/CellType.md#value) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L119) + +Gets the width of the cell. +```typescript +let cellWidth = this.cell.width; +``` + +##### Memberof + +IgxGridCell + +##### Returns + +`string` + +The CSS width of the cell as a string. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`width`](../interfaces/CellType.md#width) + +## Methods + +### update() + +> **update**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:244](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-cell.ts#L244) + +Updates the cell value. + +```typescript +cell.update(newValue); +``` + +#### Parameters + +##### val + +`any` + +#### Returns + +`void` + +#### Memberof + +IgxGridCell + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`update`](../interfaces/CellType.md#update) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCellComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCellComponent.md new file mode 100644 index 000000000..6234c068d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCellComponent.md @@ -0,0 +1,1254 @@ +# Class: IgxGridCellComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L112) + +Providing reference to `IgxGridCellComponent`: +```typescript +@ViewChild('grid', { read: IgxGridComponent }) + public grid: IgxGridComponent; +``` +```typescript + let column = this.grid.columnList.first; +``` +```typescript + let cell = column.cells[0]; +``` + +## Extended by + +- [`IgxGridExpandableCellComponent`](IgxGridExpandableCellComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`CellType`](../interfaces/CellType.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridCellComponent**(): `IgxGridCellComponent` + +#### Returns + +`IgxGridCellComponent` + +## Properties + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L843) + +*** + +### activeHighlightClass + +> **activeHighlightClass**: `string` = `'igx-highlight__active'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L821) + +Sets/gets the active highlight class class of the cell. +Default value is `"igx-highlight__active"`. +```typescript +let activeHighlightClass = this.cell.activeHighlightClass; +``` +```typescript +this.cell.activeHighlightClass = 'igx-cell-highlight_active'; +``` + +#### Memberof + +IgxGridCellComponent + +*** + +### addRowCellTemplate + +> `protected` **addRowCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L763) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L116) + +*** + +### cellTemplate + +> **cellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L246) + +Sets/gets the template of the cell. +```html +<ng-template #cellTemplate igxCell let-value> + <div style="font-style: oblique; color:blueviolet; background:red"> + <span>{{value}}</span> + </div> +</ng-template> +``` +```typescript +@ViewChild('cellTemplate',{read: TemplateRef}) +cellTemplate: TemplateRef<any>; +``` +```typescript +this.cell.cellTemplate = this.cellTemplate; +``` +```typescript +let template = this.cell.cellTemplate; +``` + +#### Memberof + +IgxGridCellComponent + +*** + +### cellValidationErrorTemplate + +> **cellValidationErrorTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L249) + +*** + +### column + +> **column**: [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L162) + +Gets the column of the cell. +```typescript + let cellColumn = this.cell.column; +``` + +#### Memberof + +IgxGridCellComponent + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`column`](../interfaces/CellType.md#column) + +*** + +### defaultCellTemplate + +> `protected` **defaultCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:751](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L751) + +*** + +### defaultPinnedIndicator + +> `protected` **defaultPinnedIndicator**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:757](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L757) + +*** + +### editMode + +> **editMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:522](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L522) + +Returns whether the cell is in edit mode. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`editMode`](../interfaces/CellType.md#editmode) + +*** + +### emptyCellTemplate + +> `protected` **emptyCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:754](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L754) + +*** + +### formatter + +> **formatter**: (`value`, `rowData?`, `columnData?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L277) + +Gets the cell formatter. +```typescript +let cellForamatter = this.cell.formatter; +``` + +#### Parameters + +##### value + +`any` + +##### rowData? + +`any` + +##### columnData? + +`any` + +#### Returns + +`any` + +#### Memberof + +IgxGridCellComponent + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L114) + +Represents the grid instance containing the cell + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`grid`](../interfaces/CellType.md#grid) + +*** + +### highlightClass + +> **highlightClass**: `string` = `'igx-highlight'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L807) + +Sets/gets the highlight class of the cell. +Default value is `"igx-highlight"`. +```typescript +let highlightClass = this.cell.highlightClass; +``` +```typescript +this.cell.highlightClass = 'igx-cell-highlight'; +``` + +#### Memberof + +IgxGridCellComponent + +*** + +### inlineEditorTemplate + +> `protected` **inlineEditorTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L760) + +*** + +### isMerged + +> **isMerged**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L175) + +Gets whether this cell is a merged cell. + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L115) + +*** + +### pinnedIndicator + +> **pinnedIndicator**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L252) + +*** + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L120) + +*** + +### role + +> **role**: `string` = `'gridcell'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L537) + +Sets/get the `role` property of the cell. +Default value is `"gridcell"`. +```typescript +this.cell.role = 'grid-cell'; +``` +```typescript +let cellRole = this.cell.role; +``` + +#### Memberof + +IgxGridCellComponent + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L214) + +Gets the data of the row of the cell. +```typescript +let rowData = this.cell.rowData; +``` + +#### Memberof + +IgxGridCellComponent + +*** + +### selectionService + +> `protected` **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L113) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:266](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L266) + +Sets/gets the cell value. +```typescript +this.cell.value = "Cell Value"; +``` +```typescript +let cellValue = this.cell.value; +``` + +#### Memberof + +IgxGridCellComponent + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`value`](../interfaces/CellType.md#value) + +*** + +### width + +> **width**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L630) + +Gets the width of the cell. +```typescript +let cellWidth = this.cell.width; +``` + +#### Memberof + +IgxGridCellComponent + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`width`](../interfaces/CellType.md#width) + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L118) + +## Accessors + +### ariaColIndex + +#### Get Signature + +> **get** `protected` **ariaColIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L746) + +##### Returns + +`number` + +*** + +### ariaRowIndex + +#### Get Signature + +> **get** `protected` **ariaRowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:740](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L740) + +##### Returns + +`number` + +*** + +### ariaSelected + +#### Get Signature + +> **get** **ariaSelected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L640) + +##### Returns + +`boolean` + +*** + +### attrCellID + +#### Get Signature + +> **get** **attrCellID**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L420) + +##### Returns + +`string` + +*** + +### booleanClass + +#### Get Signature + +> **get** **booleanClass**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L452) + +##### Returns + +`any` + +*** + +### cellID + +#### Get Signature + +> **get** **cellID**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L413) + +Gets the ID of the cell. +```typescript +let cellID = this.cell.cellID; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`object` + +###### columnID + +> **columnID**: `number` + +###### rowID + +> **rowID**: `any` + +###### rowIndex + +> **rowIndex**: `number` + +Optional; The `cellID` is the unique key, used to identify the cell + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`cellID`](../interfaces/CellType.md#cellid) + +*** + +### cellSelectionMode + +#### Set Signature + +> **set** **cellSelectionMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L477) + +##### Parameters + +###### value + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +*** + +### colEnd + +#### Get Signature + +> **get** **colEnd**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L609) + +##### Returns + +`number` + +*** + +### colStart + +#### Get Signature + +> **get** **colStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:617](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L617) + +##### Returns + +`number` + +*** + +### columnIndex + +#### Get Signature + +> **get** **columnIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L383) + +Gets the `index` of the cell column. +```typescript +let columnIndex = this.cell.columnIndex; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`number` + +*** + +### columnSelected + +#### Get Signature + +> **get** **columnSelected**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L684) + +Gets whether the cell column is selected. +```typescript +let isCellColumnSelected = this.cell.columnSelected; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`any` + +*** + +### context + +#### Get Signature + +> **get** **context**(): [`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L287) + +Gets the cell template context object. +```typescript + let context = this.cell.context(); +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md) + +*** + +### editable + +#### Get Signature + +> **get** **editable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:721](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L721) + +Returns whether the cell is editable. + +##### Returns + +`boolean` + +Indicates whether the cell can be edited. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`editable`](../interfaces/CellType.md#editable) + +*** + +### editValue + +#### Get Signature + +> **get** **editValue**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L712) + +Gets the current edit value while a cell is in edit mode. +Only for cell editing mode. +```typescript +let editValue = this.cell.editValue; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **editValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L697) + +Sets the current edit value while a cell is in edit mode. +Only for cell editing mode. +```typescript +this.cell.editValue = value; +``` + +##### Memberof + +IgxGridCellComponent + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +The value to display when the cell is in edit mode. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`editValue`](../interfaces/CellType.md#editvalue) + +*** + +### formControl + +#### Get Signature + +> **get** `protected` **formControl**(): `FormControl` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:593](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L593) + +Gets the formControl responsible for value changes and validation for this cell. + +##### Returns + +`FormControl` + +*** + +### gridColumnSpan + +#### Get Signature + +> **get** **gridColumnSpan**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:601](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L601) + +##### Returns + +`number` + +*** + +### gridID + +#### Get Signature + +> **get** **gridID**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L357) + +Gets the `id` of the grid in which the cell is stored. +```typescript +let gridId = this.cell.gridID; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`any` + +*** + +### gridRowSpan + +#### Get Signature + +> **get** **gridRowSpan**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:597](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L597) + +##### Returns + +`number` + +*** + +### highlight + +#### Get Signature + +> **get** `protected` **highlight**(): [`IgxTextHighlightDirective`](IgxTextHighlightDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:777](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L777) + +##### Returns + +[`IgxTextHighlightDirective`](IgxTextHighlightDirective.md) + +#### Set Signature + +> **set** `protected` **highlight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:766](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L766) + +##### Parameters + +###### value + +[`IgxTextHighlightDirective`](IgxTextHighlightDirective.md) + +##### Returns + +`void` + +*** + +### minHeight + +#### Get Signature + +> **get** `protected` **minHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L733) + +##### Returns + +`any` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L464) + +Returns a reference to the nativeElement of the cell. +```typescript +let cellNativeElement = this.cell.nativeElement; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`HTMLElement` + +Represents the native HTML element of the cell itself + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`nativeElement`](../interfaces/CellType.md#nativeelement) + +*** + +### pinnedIndicatorTemplate + +#### Get Signature + +> **get** **pinnedIndicatorTemplate**(): `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L342) + +Gets the pinned indicator template. +```typescript +let template = this.cell.pinnedIndicatorTemplate; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`TemplateRef`\<`any`\> + +*** + +### readonly + +#### Get Signature + +> **get** **readonly**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:548](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L548) + +Gets whether the cell is editable. +```typescript +let isCellReadonly = this.cell.readonly; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`boolean` + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`readonly`](../interfaces/CellType.md#readonly) + +*** + +### row + +#### Get Signature + +> **get** **row**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L201) + +Gets the row of the cell. +```typescript +let cellRow = this.cell.row; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +Represents the row that the cell belongs to + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`row`](../interfaces/CellType.md#row) + +*** + +### rowEnd + +#### Get Signature + +> **get** **rowEnd**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:605](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L605) + +##### Returns + +`number` + +*** + +### rowIndex + +#### Get Signature + +> **get** **rowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L371) + +Gets the `index` of the row where the cell is stored. +```typescript +let rowIndex = this.cell.rowIndex; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`number` + +*** + +### rowStart + +#### Get Signature + +> **get** **rowStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L613) + +##### Returns + +`number` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L653) + +Gets whether the cell is selected. +```typescript +let isSelected = this.cell.selected; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L665) + +Selects/deselects the cell. +```typescript +this.cell.selected = true. +``` + +##### Memberof + +IgxGridCellComponent + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`selected`](../interfaces/CellType.md#selected) + +*** + +### selectionNode + +#### Get Signature + +> **get** `protected` **selectionNode**(): [`ISelectionNode`](../interfaces/ISelectionNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:781](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L781) + +##### Returns + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +*** + +### template + +#### Get Signature + +> **get** **template**(): `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L317) + +Gets the cell template. +```typescript +let template = this.cell.template; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`TemplateRef`\<`any`\> + +*** + +### title + +#### Get Signature + +> **get** **title**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:425](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L425) + +An optional title to display for the cell + +##### Returns + +`any` + +An optional title to display for the cell + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`title`](../interfaces/CellType.md#title) + +*** + +### visibleColumnIndex + +#### Get Signature + +> **get** **visibleColumnIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L397) + +Returns the column visible index. +```typescript +let visibleColumnIndex = this.cell.visibleColumnIndex; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **visibleColumnIndex**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L401) + +The index of the column that the cell belongs to. It counts only the visible (not hidden) columns + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +The index of the column that the cell belongs to. It counts only the visible (not hidden) columns + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`visibleColumnIndex`](../interfaces/CellType.md#visiblecolumnindex) + +## Methods + +### clearHighlight() + +> **clearHighlight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:1206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L1206) + +Clears the highlight of the text in the cell. +```typescript +this.cell.clearHighLight(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxGridCellComponent + +*** + +### highlightText() + +> **highlightText**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:1194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L1194) + +If the provided string matches the text in the cell, the text gets highlighted. +```typescript +this.cell.highlightText('Cell Value', true); +``` + +#### Parameters + +##### text + +`string` + +##### caseSensitive? + +`boolean` + +##### exactMatch? + +`boolean` + +#### Returns + +`number` + +#### Memberof + +IgxGridCellComponent + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:899](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L899) + +#### Returns + +`void` + +*** + +### setEditMode() + +> **setEditMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:999](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L999) + +Starts/ends edit mode for the cell. + +```typescript +cell.setEditMode(true); +``` + +#### Parameters + +##### value + +`boolean` + +#### Returns + +`void` + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`setEditMode`](../interfaces/CellType.md#seteditmode) + +*** + +### update() + +> **update**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:1024](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L1024) + +Sets new value to the cell. +```typescript +this.cell.update('New Value'); +``` + +#### Parameters + +##### val + +`any` + +#### Returns + +`void` + +#### Memberof + +IgxGridCellComponent + +#### Implementation of + +[`CellType`](../interfaces/CellType.md).[`update`](../interfaces/CellType.md#update) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCellMergePipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCellMergePipe.md new file mode 100644 index 000000000..041baec8f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridCellMergePipe.md @@ -0,0 +1,51 @@ +# Class: IgxGridCellMergePipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.pipes.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.pipes.ts#L74) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridCellMergePipe**(): `IgxGridCellMergePipe` + +#### Returns + +`IgxGridCellMergePipe` + +## Methods + +### transform() + +> **transform**(`collection`, `colsToMerge`, `mergeMode`, `mergeStrategy`, `_pipeTrigger`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.pipes.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.pipes.ts#L78) + +#### Parameters + +##### collection + +`any` + +##### colsToMerge + +[`ColumnType`](../interfaces/ColumnType.md)[] + +##### mergeMode + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### mergeStrategy + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### \_pipeTrigger + +`number` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridColumnResizerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridColumnResizerComponent.md new file mode 100644 index 000000000..931b4c0b7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridColumnResizerComponent.md @@ -0,0 +1,41 @@ +# Class: IgxGridColumnResizerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts#L11) + +## Extended by + +- [`IgxPivotGridColumnResizerComponent`](IgxPivotGridColumnResizerComponent.md) + +## Constructors + +### Constructor + +> **new IgxGridColumnResizerComponent**(): `IgxGridColumnResizerComponent` + +#### Returns + +`IgxGridColumnResizerComponent` + +## Properties + +### colResizingService + +> **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts#L12) + +*** + +### resizer + +> **resizer**: `IgxColumnResizerDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts#L18) + +*** + +### restrictResizerTop + +> **restrictResizerTop**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridComponent.md new file mode 100644 index 000000000..5c376005c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridComponent.md @@ -0,0 +1,9837 @@ +# Class: IgxGridComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L169) + +Grid provides a way to present and manipulate tabular data. + +## Igx Module + +IgxGridModule + +## Igx Group + +Grids & Lists + +## Igx Keywords + +grid, table + +## Igx Theme + +igx-grid-theme + +## Remarks + +The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data +has been bound, it can be manipulated through filtering, sorting & editing operations. + +## Example + +```html +<igx-grid [data]="employeeData" [autoGenerate]="false"> + <igx-column field="first" header="First Name"></igx-column> + <igx-column field="last" header="Last Name"></igx-column> + <igx-column field="role" header="Role"></igx-column> +</igx-grid> +``` + +## Extends + +- [`IgxGridBaseDirective`](IgxGridBaseDirective.md) + +## Implements + +- [`GridType`](../interfaces/GridType.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridComponent**(): `IgxGridComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3500) + +#### Returns + +`IgxGridComponent` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`constructor`](IgxGridBaseDirective.md#constructor) + +## Properties + +### \_allowAdvancedFiltering + +> `protected` **\_allowAdvancedFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3175) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_allowAdvancedFiltering`](IgxTreeGridComponent.md#_allowadvancedfiltering) + +*** + +### \_allowFiltering + +> `protected` **\_allowFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3174) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_allowFiltering`](IgxTreeGridComponent.md#_allowfiltering) + +*** + +### \_autoGeneratedCols + +> `protected` **\_autoGeneratedCols**: [`ColumnType`](../interfaces/ColumnType.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3192) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoGeneratedCols`](IgxGridBaseDirective.md#_autogeneratedcols) + +*** + +### \_autoGeneratedColsRefs + +> `protected` **\_autoGeneratedColsRefs**: `ComponentRef`\<[`IgxColumnComponent`](IgxColumnComponent.md)\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3193) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoGeneratedColsRefs`](IgxGridBaseDirective.md#_autogeneratedcolsrefs) + +*** + +### \_autoSizeColumnsNotify + +> `protected` **\_autoSizeColumnsNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3185) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_autoSizeColumnsNotify`](IgxTreeGridComponent.md#_autosizecolumnsnotify) + +*** + +### \_batchEditing + +> `protected` **\_batchEditing**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3189) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_batchEditing`](IgxTreeGridComponent.md#_batchediting) + +*** + +### \_cdrRequestRepaint + +> `protected` **\_cdrRequestRepaint**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3186) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_cdrRequestRepaint`](IgxTreeGridComponent.md#_cdrrequestrepaint) + +*** + +### \_dataView + +> `protected` **\_dataView**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3194) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_dataView`](IgxTreeGridComponent.md#_dataview) + +*** + +### \_defaultExpandState + +> `protected` **\_defaultExpandState**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3181) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_defaultExpandState`](IgxTreeGridComponent.md#_defaultexpandstate) + +*** + +### \_defaultTargetRecordNumber + +> `protected` **\_defaultTargetRecordNumber**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3179) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_defaultTargetRecordNumber`](IgxTreeGridComponent.md#_defaulttargetrecordnumber) + +*** + +### \_diTransactions + +> `protected` **\_diTransactions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L177) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_diTransactions`](IgxGridBaseDirective.md#_ditransactions) + +*** + +### \_expansionStates + +> `protected` **\_expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3180) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_expansionStates`](IgxGridBaseDirective.md#_expansionstates) + +*** + +### \_filterMode + +> `protected` **\_filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) = `FilterMode.quickFilter` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3176) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_filterMode`](IgxGridBaseDirective.md#_filtermode) + +*** + +### \_filterStrategy + +> `protected` **\_filterStrategy**: [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3191) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_filterStrategy`](IgxGridBaseDirective.md#_filterstrategy) + +*** + +### \_firstAutoResize + +> `protected` **\_firstAutoResize**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3184) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_firstAutoResize`](IgxTreeGridComponent.md#_firstautoresize) + +*** + +### \_headerFeaturesWidth + +> `protected` **\_headerFeaturesWidth**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3182) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_headerFeaturesWidth`](IgxTreeGridComponent.md#_headerfeatureswidth) + +*** + +### \_hGridSchema + +> `protected` **\_hGridSchema**: [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3204) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_hGridSchema`](IgxGridBaseDirective.md#_hgridschema) + +*** + +### \_init + +> `protected` **\_init**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3183) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_init`](IgxTreeGridComponent.md#_init) + +*** + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3195) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_lastSearchInfo`](IgxGridBaseDirective.md#_lastsearchinfo) + +*** + +### \_pinnedRecordIDs + +> `protected` **\_pinnedRecordIDs**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3164) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_pinnedRecordIDs`](IgxTreeGridComponent.md#_pinnedrecordids) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3206) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`_resourceStrings`](IgxTreeGridComponent.md#_resourcestrings) + +*** + +### \_sortingOptions + +> `protected` **\_sortingOptions**: [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3190) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_sortingOptions`](IgxGridBaseDirective.md#_sortingoptions) + +*** + +### \_summaryRowList + +> `protected` **\_summaryRowList**: `QueryList`\<[`IgxSummaryRowComponent`](IgxSummaryRowComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1795) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_summaryRowList`](IgxGridBaseDirective.md#_summaryrowlist) + +*** + +### \_transactions + +> `protected` **\_transactions**: [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3188) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_transactions`](IgxGridBaseDirective.md#_transactions) + +*** + +### \_userOutletDirective + +> `protected` **\_userOutletDirective**: [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3187) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_userOutletDirective`](IgxGridBaseDirective.md#_useroutletdirective) + +*** + +### activeNodeChange + +> **activeNodeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1059](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1059) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`activeNodeChange`](../interfaces/GridType.md#activenodechange) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`activeNodeChange`](IgxTreeGridComponent.md#activenodechange) + +*** + +### addRowEmptyTemplate + +> **addRowEmptyTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L263) + +Gets/Sets a custom template for adding row UI when grid is empty. + +#### Example + +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`addRowEmptyTemplate`](IgxGridBaseDirective.md#addrowemptytemplate) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L380) + +Emitted after advanced filtering is performed. + +#### Remarks + +Returns the advanced filtering expressions tree. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTreeChange`](../interfaces/GridType.md#advancedfilteringexpressionstreechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`advancedFilteringExpressionsTreeChange`](IgxGridBaseDirective.md#advancedfilteringexpressionstreechange) + +*** + +### autoGenerate + +> **autoGenerate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L206) + +Gets/Sets whether to auto-generate the columns. + +#### Remarks + +The default value is false. When set to true, it will override all columns declared through code or in markup. + +#### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoGenerate`](IgxGridBaseDirective.md#autogenerate) + +*** + +### autoGenerateExclude + +> **autoGenerateExclude**: `string`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L223) + +Gets/Sets a list of property keys to be excluded from the generated column collection + +#### Remarks + +The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime +unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their +[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. + +#### Example + +```html +<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid> +``` +```typescript +const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoGenerateExclude`](IgxGridBaseDirective.md#autogenerateexclude) + +*** + +### baseClass + +> `protected` **baseClass**: `string` = `'igx-grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1813) + +#### Inherited from + +[`IgxPivotGridComponent`](IgxPivotGridComponent.md).[`baseClass`](IgxPivotGridComponent.md#baseclass) + +*** + +### cdr + +> `readonly` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L162) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cdr`](../interfaces/GridType.md#cdr) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cdr`](IgxGridBaseDirective.md#cdr) + +*** + +### cellClick + +> **cellClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L494) + +Emitted when a cell is clicked. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellClick`](../interfaces/GridType.md#cellclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellClick`](IgxGridBaseDirective.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L640) + +Emitted when cell has been edited. + +#### Remarks + +Event is fired after editing is completed, when the cell is exiting edit mode. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEdit`](../interfaces/GridType.md#celledit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEdit`](IgxGridBaseDirective.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L653) + +Emitted after cell has been edited and editing has been committed. + +#### Example + +```html +<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditDone`](../interfaces/GridType.md#celleditdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEditDone`](IgxGridBaseDirective.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L613) + +Emitted when cell enters edit mode. + +#### Remarks + +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditEnter`](../interfaces/GridType.md#celleditenter) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEditEnter`](IgxGridBaseDirective.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L625) + +Emitted when cell exits edit mode. + +#### Example + +```html +<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditExit`](../interfaces/GridType.md#celleditexit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEditExit`](IgxGridBaseDirective.md#celleditexit) + +*** + +### clipboardOptions + +> **clipboardOptions**: [`IClipboardOptions`](../interfaces/IClipboardOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L335) + +Controls the copy behavior of the grid. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clipboardOptions`](IgxGridBaseDirective.md#clipboardoptions) + +*** + +### colResizingService + +> `protected` **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L153) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`colResizingService`](IgxGridBaseDirective.md#colresizingservice) + +*** + +### columnInit + +> **columnInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L732) + +Emitted when a column is initialized. + +#### Remarks + +Returns the column object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnInit`](IgxGridBaseDirective.md#columninit) + +*** + +### columnMoving + +> **columnMoving**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L937) + +Emitted during the column moving operation. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. This event is cancelable. + +#### Example + +```html +<igx-grid (columnMoving)="moving($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMoving`](../interfaces/GridType.md#columnmoving) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnMoving`](IgxGridBaseDirective.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L950) + +Emitted when column moving ends. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. + +#### Example + +```html +<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingEnd`](../interfaces/GridType.md#columnmovingend) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnMovingEnd`](IgxGridBaseDirective.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L924) + +Emitted when column moving starts. + +#### Remarks + +Returns the moved `IgxColumnComponent` object. + +#### Example + +```html +<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingStart`](../interfaces/GridType.md#columnmovingstart) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnMovingStart`](IgxGridBaseDirective.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L582) + +Emitted before `IgxColumnComponent` is pinned. + +#### Remarks + +The index at which to insert the column may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPin`](../interfaces/GridType.md#columnpin) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnPin`](IgxGridBaseDirective.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L599) + +Emitted after `IgxColumnComponent` is pinned. + +#### Remarks + +The index that the column is inserted at may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPinned`](../interfaces/GridType.md#columnpinned) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnPinned`](IgxGridBaseDirective.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L860) + +Emitted after column is resized. + +#### Remarks + +Returns the `IgxColumnComponent` object's old and new width. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnResized`](../interfaces/GridType.md#columnresized) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnResized`](IgxGridBaseDirective.md#columnresized) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L565) + +Emitted when `IgxColumnComponent` is selected. + +#### Example + +```html +<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelectionChanging`](../interfaces/GridType.md#columnselectionchanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnSelectionChanging`](IgxGridBaseDirective.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L911) + +Emitted after column visibility is changed. + +#### Remarks + +Args: { column: IgxColumnComponent, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanged`](../interfaces/GridType.md#columnvisibilitychanged) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnVisibilityChanged`](IgxGridBaseDirective.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L898) + +Emitted before column visibility is changed. + +#### Remarks + +Args: { column: any, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanging`](../interfaces/GridType.md#columnvisibilitychanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnVisibilityChanging`](IgxGridBaseDirective.md#columnvisibilitychanging) + +*** + +### contextMenu + +> **contextMenu**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L872) + +Emitted when a cell or row is right clicked. + +#### Remarks + +Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. +```html +<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`contextMenu`](../interfaces/GridType.md#contextmenu) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`contextMenu`](IgxGridBaseDirective.md#contextmenu) + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1129) + +Emitted after the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> +``` + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`dataChanged`](IgxTreeGridComponent.md#datachanged) + +*** + +### dataChanging + +> **dataChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1118) + +Emitted before the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> +``` + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`dataChanging`](IgxTreeGridComponent.md#datachanging) + +*** + +### dataPreLoad + +> **dataPreLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L179) + +Emitted when a new chunk of data is loaded from virtualization. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataPreLoad)='handleDataPreloadEvent()'></igx-grid> +``` + +*** + +### defaultGroupTemplate + +> `protected` **defaultGroupTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:323](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L323) + +*** + +### detailTemplateContainer + +> `protected` **detailTemplateContainer**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L320) + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L163) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`differs`](IgxGridBaseDirective.md#differs) + +*** + +### displayStyle + +> `protected` **displayStyle**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3452) + +#### Inherited from + +[`IgxPivotGridComponent`](IgxPivotGridComponent.md).[`displayStyle`](IgxPivotGridComponent.md#displaystyle) + +*** + +### doubleClick + +> **doubleClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L885) + +Emitted when a cell is double clicked. + +#### Remarks + +Returns the `IgxGridCell` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`doubleClick`](../interfaces/GridType.md#doubleclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`doubleClick`](IgxGridBaseDirective.md#doubleclick) + +*** + +### dropAreaTemplate + +> **dropAreaTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L250) + +Gets/Sets the template that will be rendered as a GroupBy drop area. + +#### Remarks + +The grid needs to have at least one groupable column in order the GroupBy area to be displayed. + +#### Example + +```html +<igx-grid [dropAreaTemplate]="dropAreaRef"> +</igx-grid> +<ng-template #myDropArea> + <span> Custom drop area! </span> +</ng-template> +``` + +*** + +### emptyDirectiveTemplate + +> `protected` **emptyDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1713) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyDirectiveTemplate`](IgxGridBaseDirective.md#emptydirectivetemplate) + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L166) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`envInjector`](IgxGridBaseDirective.md#envinjector) + +*** + +### expansionStatesChange + +> **expansionStatesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1003) + +Emitted when the rows are expanded or collapsed. + +#### Example + +```html +<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`expansionStatesChange`](IgxTreeGridComponent.md#expansionstateschange) + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L778) + +Emitted before filtering expressions are applied. + +#### Remarks + +Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filtering`](../interfaces/GridType.md#filtering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filtering`](IgxGridBaseDirective.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L791) + +Emitted after filtering is performed through the UI. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringDone`](../interfaces/GridType.md#filteringdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringDone`](IgxGridBaseDirective.md#filteringdone) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L366) + +Emitted after filtering is performed. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTreeChange`](../interfaces/GridType.md#filteringexpressionstreechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringExpressionsTreeChange`](IgxGridBaseDirective.md#filteringexpressionstreechange) + +*** + +### formGroupCreated + +> **formGroupCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L519) + +Emitted when formGroup is created on edit of row/cell. + +#### Example + +```html +<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`formGroupCreated`](../interfaces/GridType.md#formgroupcreated) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`formGroupCreated`](IgxGridBaseDirective.md#formgroupcreated) + +*** + +### gridAPI + +> `readonly` **gridAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L155) + +Represents the grid service type providing API methods for the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridAPI`](../interfaces/GridType.md#gridapi) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridAPI`](IgxGridBaseDirective.md#gridapi) + +*** + +### gridComputedStyles + +> `protected` **gridComputedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3205) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridComputedStyles`](IgxGridBaseDirective.md#gridcomputedstyles) + +*** + +### gridCopy + +> **gridCopy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L991) + +Emitted when a copy operation is executed. + +#### Remarks + +Fired only if copy behavior is enabled through the [`clipboardOptions`][IgxGridBaseDirective#clipboardOptions](IgxGridBaseDirective.md#clipboardoptions). + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridCopy`](IgxGridBaseDirective.md#gridcopy) + +*** + +### gridKeydown + +> **gridKeydown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L964) + +Emitted when keydown is triggered over element inside grid's body. + +#### Remarks + +This event is fired only if the key combination is supported in the grid. +Return the target type, target object and the original event. This event is cancelable. + +#### Example + +```html + <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridKeydown`](../interfaces/GridType.md#gridkeydown) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridKeydown`](IgxGridBaseDirective.md#gridkeydown) + +*** + +### gridScroll + +> **gridScroll**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L392) + +Emitted when grid is scrolled horizontally/vertically. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (gridScroll)="onScroll($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridScroll`](IgxGridBaseDirective.md#gridscroll) + +*** + +### groupingDone + +> **groupingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:220](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L220) + +Emitted when columns are grouped/ungrouped. + +#### Remarks + +The `groupingDone` event would be raised only once if several columns get grouped at once by calling +the `groupBy()` or `clearGrouping()` API methods and passing an array as an argument. +The event arguments provide the `expressions`, `groupedColumns` and `ungroupedColumns` properties, which contain +the `ISortingExpression` and the `IgxColumnComponent` related to the grouping/ungrouping operation. +Please note that `groupedColumns` and `ungroupedColumns` show only the **newly** changed columns (affected by the **last** +grouping/ungrouping operation), not all columns which are currently grouped/ungrouped. +columns. + +#### Example + +```html +<igx-grid #grid [data]="localData" (groupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid> +``` + +*** + +### groupingExpansionStateChange + +> **groupingExpansionStateChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L201) + +Emitted when groups are expanded/collapsed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (groupingExpansionStateChange)="groupingExpansionStateChange($event)"></igx-grid> +``` + +*** + +### groupingExpressionsChange + +> **groupingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L190) + +Emitted when grouping is performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (groupingExpressionsChange)="groupingExpressionsChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupingExpressionsChange`](../interfaces/GridType.md#groupingexpressionschange) + +*** + +### groupsExpanded + +> **groupsExpanded**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L233) + +Gets/Sets whether created groups are rendered expanded or collapsed. + +#### Remarks + +The default rendered state is expanded. + +#### Example + +```html +<igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupsExpanded`](../interfaces/GridType.md#groupsexpanded) + +*** + +### headerCollapsedIndicatorDirectiveTemplate + +> `protected` **headerCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1551) + +The custom template, if any, that should be used when rendering a header collapse indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerCollapsedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#headercollapsedindicatordirectivetemplate) + +*** + +### headerExpandedIndicatorDirectiveTemplate + +> `protected` **headerExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1520) + +The custom template, if any, that should be used when rendering a header expand indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerExpandedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#headerexpandedindicatordirectivetemplate) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L311) + +Gets/Sets the value of the `id` attribute. + +#### Remarks + +If not provided it will be automatically generated. + +#### Example + +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`id`](../interfaces/GridType.md#id) + +#### Overrides + +`IgxGridBaseDirective.id` + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L165) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`injector`](IgxGridBaseDirective.md#injector) + +*** + +### loadingDirectiveTemplate + +> `protected` **loadingDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1710) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`loadingDirectiveTemplate`](IgxGridBaseDirective.md#loadingdirectivetemplate) + +*** + +### moving + +> **moving**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L230) + +Controls whether columns moving is enabled in the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moving`](../interfaces/GridType.md#moving) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`moving`](IgxGridBaseDirective.md#moving) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L168) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigation`](../interfaces/GridType.md#navigation) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`navigation`](IgxGridBaseDirective.md#navigation) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L172) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`overlayService`](IgxGridBaseDirective.md#overlayservice) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L176) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`platform`](IgxGridBaseDirective.md#platform) + +*** + +### rangeSelected + +> **rangeSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1097) + +Emitted when making a range selection. + +#### Remarks + +Range selection can be made either through drag selection or through keyboard selection. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rangeSelected`](../interfaces/GridType.md#rangeselected) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`rangeSelected`](IgxTreeGridComponent.md#rangeselected) + +*** + +### rendered + +> **rendered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1101) + +Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`rendered`](IgxTreeGridComponent.md#rendered) + +*** + +### rowAdd + +> **rowAdd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L847) + +Emmited just before the newly added row is commited. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdd`](../interfaces/GridType.md#rowadd) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAdd`](IgxGridBaseDirective.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L805) + +Emitted when a row is added. + +#### Remarks + +Returns the data for the new `IgxGridRowComponent` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdded`](../interfaces/GridType.md#rowadded) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAdded`](IgxGridBaseDirective.md#rowadded) + +*** + +### rowClasses + +> **rowClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L411) + +Sets a conditional class selector to the grid's row element. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class and the value is +either a callback function that returns a boolean, or boolean, like so: +```typescript +callback = (row: RowType) => { return row.selected > 6; } +rowClasses = { 'className' : this.callback }; +``` +```html +<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowClasses`](IgxGridBaseDirective.md#rowclasses) + +*** + +### rowClick + +> **rowClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L507) + +Emitted when a row is clicked. + +#### Remarks + +Returns the `IgxGridRow`. + +#### Example + +```html +<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowClick`](../interfaces/GridType.md#rowclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowClick`](IgxGridBaseDirective.md#rowclick) + +*** + +### rowCollapsedIndicatorDirectiveTemplate + +> `protected` **rowCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1489) + +The custom template, if any, that should be used when rendering a row collapse indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowCollapsedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#rowcollapsedindicatordirectivetemplate) + +*** + +### rowDelete + +> **rowDelete**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L833) + +Emmited when deleting a row. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDelete`](../interfaces/GridType.md#rowdelete) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDelete`](IgxGridBaseDirective.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L819) + +Emitted when a row is deleted. + +#### Remarks + +Returns an `IRowDataEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDeleted`](../interfaces/GridType.md#rowdeleted) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDeleted`](IgxGridBaseDirective.md#rowdeleted) + +*** + +### rowDragEnd + +> **rowDragEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:982](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L982) + +Emitted when dropping a row. + +#### Remarks + +Return the dropped row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragEnd`](../interfaces/GridType.md#rowdragend) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDragEnd`](IgxGridBaseDirective.md#rowdragend) + +*** + +### rowDragStart + +> **rowDragStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L973) + +Emitted when start dragging a row. + +#### Remarks + +Return the dragged row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragStart`](../interfaces/GridType.md#rowdragstart) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDragStart`](IgxGridBaseDirective.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L686) + +Emitted when exiting edit mode for a row. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEdit`](../interfaces/GridType.md#rowedit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEdit`](IgxGridBaseDirective.md#rowedit) + +*** + +### rowEditDone + +> **rowEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L703) + +Emitted after exiting edit mode for a row and editing has been committed. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. + +#### Example + +```html +<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditDone`](../interfaces/GridType.md#roweditdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditDone`](IgxGridBaseDirective.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L668) + +Emitted when a row enters edit mode. + +#### Remarks + +Emitted when [rowEditable]="true". +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditEnter`](../interfaces/GridType.md#roweditenter) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditEnter`](IgxGridBaseDirective.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L719) + +Emitted when row editing is canceled. + +#### Remarks + +Emits when [rowEditable]="true" & `endEdit(false)` is called. +Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button +in the row editing overlay. + +#### Example + +```html +<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditExit`](../interfaces/GridType.md#roweditexit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditExit`](IgxGridBaseDirective.md#roweditexit) + +*** + +### rowExpandedIndicatorDirectiveTemplate + +> `protected` **rowExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1458) + +The custom template, if any, that should be used when rendering a row expand indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowExpandedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#rowexpandedindicatordirectivetemplate) + +*** + +### rowPinned + +> **rowPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1048](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1048) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`rowPinned`](IgxTreeGridComponent.md#rowpinned) + +*** + +### rowPinning + +> **rowPinning**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1037](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1037) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`rowPinning`](IgxTreeGridComponent.md#rowpinning) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L554) + +Emitted when `IgxGridRowComponent` is selected. + +#### Example + +```html +<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectionChanging`](../interfaces/GridType.md#rowselectionchanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelectionChanging`](IgxGridBaseDirective.md#rowselectionchanging) + +*** + +### rowStyles + +> **rowStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L431) + +Sets conditional style properties on the grid row element. +It accepts an object literal where the keys are +the style properties and the value is an expression to be evaluated. +```typescript +styles = { + background: 'yellow', + color: (row: RowType) => row.selected : 'red': 'white' +} +``` +```html +<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowStyles`](IgxGridBaseDirective.md#rowstyles) + +*** + +### rowToggle + +> **rowToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1026) + +Emitted when the expanded state of a row gets changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowToggle`](../interfaces/GridType.md#rowtoggle) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`rowToggle`](IgxTreeGridComponent.md#rowtoggle) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L543) + +Emitted when a cell is selected. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selected`](../interfaces/GridType.md#selected) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selected`](IgxGridBaseDirective.md#selected) + +*** + +### selectedRowsChange + +> **selectedRowsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1015) + +Emitted when the rows are selected or deselected. + +#### Example + +```html +<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`selectedRowsChange`](IgxTreeGridComponent.md#selectedrowschange) + +*** + +### snackbarDisplayTime + +> **snackbarDisplayTime**: `number` = `6000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L193) + +Gets/Sets the display time for the row adding snackbar notification. + +#### Remarks + +By default it is 6000ms. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`snackbarDisplayTime`](IgxGridBaseDirective.md#snackbardisplaytime) + +*** + +### sorting + +> **sorting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L752) + +Emitted before sorting expressions are applied. + +#### Remarks + +Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sorting`](IgxGridBaseDirective.md#sorting) + +*** + +### sortingDone + +> **sortingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L765) + +Emitted after sorting is completed. + +#### Remarks + +Returns the sorting expression. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingDone`](IgxGridBaseDirective.md#sortingdone) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1072) + +Emitted before sorting is performed. + +#### Remarks + +Returns the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressionsChange`](../interfaces/GridType.md#sortingexpressionschange) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`sortingExpressionsChange`](IgxTreeGridComponent.md#sortingexpressionschange) + +*** + +### summaryTemplate + +> `protected` **summaryTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L326) + +*** + +### tbodyContainer + +> `protected` **tbodyContainer**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1324) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`tbodyContainer`](IgxGridBaseDirective.md#tbodycontainer) + +*** + +### templateRows + +> `protected` **templateRows**: `string` = `'auto auto auto 1fr auto auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3455) + +#### Inherited from + +[`IgxPivotGridComponent`](IgxPivotGridComponent.md).[`templateRows`](IgxPivotGridComponent.md#templaterows) + +*** + +### textHighlightService + +> `protected` **textHighlightService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L171) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`textHighlightService`](IgxGridBaseDirective.md#texthighlightservice) + +*** + +### toolbarExporting + +> **toolbarExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1086) + +Emitted when an export process is initiated by the user. + +#### Example + +```typescript +toolbarExporting(event: IGridToolbarExportEventArgs){ + const toolbarExporting = event; +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`toolbarExporting`](../interfaces/GridType.md#toolbarexporting) + +#### Inherited from + +[`IgxTreeGridComponent`](IgxTreeGridComponent.md).[`toolbarExporting`](IgxTreeGridComponent.md#toolbarexporting) + +*** + +### transactionFactory + +> `protected` **transactionFactory**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L156) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactionFactory`](IgxGridBaseDirective.md#transactionfactory) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `filteringExpressionsTree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L465) + +Gets/Sets a unique values strategy used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### filteringExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Remarks + +Provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering. + +#### Example + +```html +<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`uniqueColumnValuesStrategy`](../interfaces/GridType.md#uniquecolumnvaluesstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`uniqueColumnValuesStrategy`](IgxGridBaseDirective.md#uniquecolumnvaluesstrategy) + +*** + +### validation + +> `readonly` **validation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L150) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validation`](../interfaces/GridType.md#validation) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validation`](IgxGridBaseDirective.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L530) + +Emitted when grid's validation status changes. + +#### Example + +```html +<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationStatusChange`](../interfaces/GridType.md#validationstatuschange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validationStatusChange`](IgxGridBaseDirective.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) = `'change'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2063) + +Gets/Sets the trigger for validators used when editing the grid. + +#### Example + +```html +<igx-grid #grid validationTrigger='blur'></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationTrigger`](../interfaces/GridType.md#validationtrigger) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validationTrigger`](IgxGridBaseDirective.md#validationtrigger) + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L164) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`viewRef`](IgxGridBaseDirective.md#viewref) + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L158) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`zone`](IgxGridBaseDirective.md#zone) + +## Accessors + +### activeRowIndexes + +#### Get Signature + +> **get** `protected` **activeRowIndexes**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4068) + +##### Returns + +`number`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`activeRowIndexes`](IgxGridBaseDirective.md#activerowindexes) + +*** + +### advancedFilteringExpressionsTree + +#### Get Signature + +> **get** **advancedFilteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1920) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **advancedFilteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1924) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTree`](../interfaces/GridType.md#advancedfilteringexpressionstree) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`advancedFilteringExpressionsTree`](IgxGridBaseDirective.md#advancedfilteringexpressionstree) + +*** + +### allowAdvancedFiltering + +#### Get Signature + +> **get** **allowAdvancedFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2336) + +Gets/Sets a value indicating whether the advanced filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowAdvancedFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2340) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowAdvancedFiltering`](../interfaces/GridType.md#allowadvancedfiltering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowAdvancedFiltering`](IgxGridBaseDirective.md#allowadvancedfiltering) + +*** + +### allowFiltering + +#### Get Signature + +> **get** **allowFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2310) + +Gets/Sets if the filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2314) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowFiltering`](../interfaces/GridType.md#allowfiltering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowFiltering`](IgxGridBaseDirective.md#allowfiltering) + +*** + +### ariaColCount + +#### Get Signature + +> **get** `protected` **ariaColCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1816) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`ariaColCount`](IgxGridBaseDirective.md#ariacolcount) + +*** + +### ariaRowCount + +#### Get Signature + +> **get** `protected` **ariaRowCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1821) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`ariaRowCount`](IgxGridBaseDirective.md#ariarowcount) + +*** + +### batchEditing + +#### Get Signature + +> **get** **batchEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2831) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **batchEditing**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2835) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`batchEditing`](../interfaces/GridType.md#batchediting) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`batchEditing`](IgxGridBaseDirective.md#batchediting) + +*** + +### cellMergeMode + +#### Get Signature + +> **get** **cellMergeMode**(): [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2901) + +Gets/Sets cell merge mode. + +##### Returns + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +#### Set Signature + +> **set** **cellMergeMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2905) + +##### Parameters + +###### value + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellMergeMode`](../interfaces/GridType.md#cellmergemode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellMergeMode`](IgxGridBaseDirective.md#cellmergemode) + +*** + +### cellSelection + +#### Get Signature + +> **get** **cellSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2882) + +Gets/Sets cell selection mode. + +##### Remarks + +By default the cell selection mode is multiple + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **cellSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2886) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellSelection`](../interfaces/GridType.md#cellselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellSelection`](IgxGridBaseDirective.md#cellselection) + +*** + +### columns + +#### Get Signature + +> **get** **columns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4613) + +Gets an array of `IgxColumnComponent`s. + +##### Example + +```typescript +const colums = this.grid.columns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columns`](../interfaces/GridType.md#columns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columns`](IgxGridBaseDirective.md#columns) + +*** + +### columnSelection + +#### Get Signature + +> **get** **columnSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2943) + +Gets/Sets column selection mode + +##### Remarks + +By default the row selection mode is none + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **columnSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2947) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelection`](../interfaces/GridType.md#columnselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnSelection`](IgxGridBaseDirective.md#columnselection) + +*** + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2187) + +Gets/Sets the default width of the columns. + +##### Example + +```html +<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2190) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnWidth`](IgxGridBaseDirective.md#columnwidth) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L412) + +Gets/Sets the array of data that populates the component. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L416) + +##### Parameters + +###### value + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`data`](../interfaces/GridType.md#data) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`data`](IgxGridBaseDirective.md#data) + +*** + +### dataCloneStrategy + +#### Get Signature + +> **get** **dataCloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L320) + +Gets/Sets the data clone strategy of the grid when in edit mode. + +##### Example + +```html + <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> +``` + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **dataCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L324) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataCloneStrategy`](../interfaces/GridType.md#dataclonestrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataCloneStrategy`](IgxGridBaseDirective.md#dataclonestrategy) + +*** + +### dataRowList + +#### Get Signature + +> **get** **dataRowList**(): `QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2606) + +A list of currently rendered `IgxGridRowComponent`'s. + +##### Example + +```typescript +const dataList = this.grid.dataRowList; +``` + +##### Returns + +`QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataRowList`](../interfaces/GridType.md#datarowlist) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataRowList`](IgxGridBaseDirective.md#datarowlist) + +*** + +### dataView + +#### Get Signature + +> **get** **dataView**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5809) + +Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. + +##### Example + +```typescript + const dataView = this.grid.dataView; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataView`](../interfaces/GridType.md#dataview) + +#### Inherited from + +[`IgxPivotGridComponent`](IgxPivotGridComponent.md).[`dataView`](IgxPivotGridComponent.md#dataview) + +*** + +### defaultRowHeight + +#### Get Signature + +> **get** **defaultRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4513) + +Gets the default row height. + +##### Example + +```typescript +const rowHeigh = this.grid.defaultRowHeight; +``` + +##### Returns + +`number` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`defaultRowHeight`](../interfaces/GridType.md#defaultrowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`defaultRowHeight`](IgxGridBaseDirective.md#defaultrowheight) + +*** + +### detailTemplate + +#### Get Signature + +> **get** **detailTemplate**(): `TemplateRef`\<[`IgxGridMasterDetailContext`](../interfaces/IgxGridMasterDetailContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L268) + +Returns a reference to the master-detail template. +```typescript +let detailTemplate = this.grid.detailTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Returns + +`TemplateRef`\<[`IgxGridMasterDetailContext`](../interfaces/IgxGridMasterDetailContext.md)\> + +#### Set Signature + +> **set** **detailTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L289) + +Sets the master-detail template. +```html +<ng-template #detailTemplate igxGridDetail let-dataItem> + <div> + <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div> + <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div> + </div> +</ng-template> +``` +```typescript +@ViewChild("'detailTemplate'", {read: TemplateRef }) +public detailTemplate: TemplateRef<any>; +this.grid.detailTemplate = this.detailTemplate; +``` + +##### Memberof + +IgxColumnComponent + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridMasterDetailContext`](../interfaces/IgxGridMasterDetailContext.md)\> + +##### Returns + +`void` + +*** + +### dragGhostCustomTemplate + +#### Get Signature + +> **get** **dragGhostCustomTemplate**(): `TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1234) + +Gets the custom template, if any, used for row drag ghost. + +##### Returns + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +#### Set Signature + +> **set** **dragGhostCustomTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1251) + +Sets a custom template for the row drag ghost. +```html +<ng-template #template igxRowDragGhost> + <igx-icon>menu</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragGhostCustomTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dragGhostCustomTemplate`](IgxGridBaseDirective.md#dragghostcustomtemplate) + +*** + +### dragIndicatorIconTemplate + +#### Get Signature + +> **get** **dragIndicatorIconTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2711](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2711) + +The custom template, if any, that should be used when rendering the row drag indicator icon + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **dragIndicatorIconTemplate**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2728) + +Sets a custom template that should be used when rendering the row drag indicator icon. +```html +<ng-template #template igxDragIndicatorIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragIndicatorIconTemplate = this.template; +``` + +##### Parameters + +###### val + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +The template for drag indicator icons. Could be of any type + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dragIndicatorIconTemplate`](../interfaces/GridType.md#dragindicatoricontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dragIndicatorIconTemplate`](IgxGridBaseDirective.md#dragindicatoricontemplate) + +*** + +### dropAreaMessage + +#### Get Signature + +> **get** **dropAreaMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L628) + +##### Returns + +`string` + +#### Set Signature + +> **set** **dropAreaMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L623) + +Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on. + +##### Remarks + +The grid needs to have at least one groupable column in order the GroupBy area to be displayed. + +##### Example + +```html +<igx-grid dropAreaMessage="Drop here to group!"> + <igx-column [groupable]="true" field="ID"></igx-column> +</igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### emptyFilteredGridMessage + +#### Get Signature + +> **get** **emptyFilteredGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2273) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyFilteredGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2269) + +Gets/Sets the message displayed when there are no records and the grid is filtered. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyFilteredGridMessage`](IgxGridBaseDirective.md#emptyfilteredgridmessage) + +*** + +### emptyGridMessage + +#### Get Signature + +> **get** **emptyGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2208) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2205) + +Get/Sets the message displayed when there are no records. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyGridMessage`](IgxGridBaseDirective.md#emptygridmessage) + +*** + +### emptyGridTemplate + +#### Get Signature + +> **get** **emptyGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L247) + +Gets/Sets a custom template when empty. + +##### Example + +```html +<ng-template igxGridEmpty> + <!-- content to show when the grid is empty --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **emptyGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L250) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyGridTemplate`](IgxGridBaseDirective.md#emptygridtemplate) + +*** + +### excelStyleHeaderIconTemplate + +#### Get Signature + +> **get** **excelStyleHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1586) + +Gets the excel style header icon. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **excelStyleHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1603) + +Sets the excel style header icon. +```html +<ng-template #template igxExcelStyleHeaderIcon> +<igx-icon>filter_alt</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.excelStyleHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`excelStyleHeaderIconTemplate`](../interfaces/GridType.md#excelstyleheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`excelStyleHeaderIconTemplate`](IgxGridBaseDirective.md#excelstyleheadericontemplate) + +*** + +### expansionStates + +#### Get Signature + +> **get** **expansionStates**(): `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4381) + +Gets/Sets a list of key-value pairs [row ID, expansion state]. + +##### Remarks + +Includes only states that differ from the default one. +Supports two-way binding. + +##### Example + +```html +<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> +</igx-grid> +``` + +##### Returns + +`Map`\<`any`, `boolean`\> + +#### Set Signature + +> **set** **expansionStates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4386) + +##### Parameters + +###### value + +`Map`\<`any`, `boolean`\> + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`expansionStates`](../interfaces/GridType.md#expansionstates) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expansionStates`](IgxGridBaseDirective.md#expansionstates) + +*** + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3359) + +Returns an array of objects containing the filtered data. + +##### Example + +```typescript +let filteredData = this.grid.filteredData; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredData`](../interfaces/GridType.md#filtereddata) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteredData`](IgxGridBaseDirective.md#filtereddata) + +*** + +### filteredSortedData + +#### Get Signature + +> **get** **filteredSortedData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3371) + +Returns an array containing the filtered sorted data. + +##### Example + +```typescript +const filteredSortedData = this.grid1.filteredSortedData; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredSortedData`](../interfaces/GridType.md#filteredsorteddata) + +#### Inherited from + +[`IgxPivotGridComponent`](IgxPivotGridComponent.md).[`filteredSortedData`](IgxPivotGridComponent.md#filteredsorteddata) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1874) + +Gets/Sets the filtering state. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way binding. + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **filteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1878) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTree`](../interfaces/GridType.md#filteringexpressionstree) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringExpressionsTree`](IgxGridBaseDirective.md#filteringexpressionstree) + +*** + +### filteringLogic + +#### Get Signature + +> **get** **filteringLogic**(): [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1853) + +Gets/Sets the filtering logic of the `IgxGridComponent`. + +##### Remarks + +The default is AND. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> +``` + +##### Returns + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +#### Set Signature + +> **set** **filteringLogic**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1857) + +##### Parameters + +###### value + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringLogic`](../interfaces/GridType.md#filteringlogic) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringLogic`](IgxGridBaseDirective.md#filteringlogic) + +*** + +### filterMode + +#### Get Signature + +> **get** **filterMode**(): [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2362](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2362) + +Gets/Sets the filter mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it's set to FilterMode.quickFilter. + +##### Returns + +[`FilterMode`](../type-aliases/FilterMode.md) + +#### Set Signature + +> **set** **filterMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2366) + +The filter mode for the grid. It can be quick filter of excel-style filter + +##### Parameters + +###### value + +[`FilterMode`](../type-aliases/FilterMode.md) + +##### Returns + +`void` + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterMode`](../interfaces/GridType.md#filtermode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterMode`](IgxGridBaseDirective.md#filtermode) + +*** + +### filterStrategy + +#### Get Signature + +> **get** **filterStrategy**(): [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2456) + +Gets/Sets the filtering strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid> +``` + +##### Returns + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +#### Set Signature + +> **set** **filterStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2460) + +##### Parameters + +###### classRef + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterStrategy`](../interfaces/GridType.md#filterstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterStrategy`](IgxGridBaseDirective.md#filterstrategy) + +*** + +### groupByRowSelectorTemplate + +#### Get Signature + +> **get** **groupByRowSelectorTemplate**(): `TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](../interfaces/IgxGroupByRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L650) + +Gets the group by row selector template. + +##### Returns + +`TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](../interfaces/IgxGroupByRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **groupByRowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:667](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L667) + +Sets the group by row selector template. +```html +<ng-template #template igxGroupByRowSelector let-groupByRowContext> +{{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.groupByRowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](../interfaces/IgxGroupByRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupByRowSelectorTemplate`](../interfaces/GridType.md#groupbyrowselectortemplate) + +*** + +### groupingExpansionState + +#### Get Signature + +> **get** **groupingExpansionState**(): [`IGroupByExpandState`](../interfaces/IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L549) + +Gets/Sets a list of expansion states for group rows. + +##### Remarks + +Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. +Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid> +``` + +##### Returns + +[`IGroupByExpandState`](../interfaces/IGroupByExpandState.md)[] + +#### Set Signature + +> **set** **groupingExpansionState**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:553](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L553) + +##### Parameters + +###### value + +[`IGroupByExpandState`](../interfaces/IGroupByExpandState.md)[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupingExpansionState`](../interfaces/GridType.md#groupingexpansionstate) + +*** + +### groupingExpressions + +#### Get Signature + +> **get** **groupingExpressions**(): [`IGroupingExpression`](../interfaces/IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:493](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L493) + +Gets/Sets the group by state. + +##### Examples + +```typescript +let groupByState = this.grid.groupingExpressions; +this.grid.groupingExpressions = [...]; +``` + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way data binding. + +##### Returns + +[`IGroupingExpression`](../interfaces/IGroupingExpression.md)[] + +#### Set Signature + +> **set** **groupingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L497) + +##### Parameters + +###### value + +[`IGroupingExpression`](../interfaces/IGroupingExpression.md)[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupingExpressions`](../interfaces/GridType.md#groupingexpressions) + +*** + +### groupRowTemplate + +#### Get Signature + +> **get** **groupRowTemplate**(): `TemplateRef`\<[`IgxGroupByRowTemplateContext`](../interfaces/IgxGroupByRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:734](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L734) + +Gets/Sets the template reference for the group row. + +##### Example + +``` +const groupRowTemplate = this.grid.groupRowTemplate; +this.grid.groupRowTemplate = myRowTemplate; +``` + +##### Returns + +`TemplateRef`\<[`IgxGroupByRowTemplateContext`](../interfaces/IgxGroupByRowTemplateContext.md)\> + +#### Set Signature + +> **set** **groupRowTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:738](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L738) + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGroupByRowTemplateContext`](../interfaces/IgxGroupByRowTemplateContext.md)\> + +##### Returns + +`void` + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupRowTemplate`](../interfaces/GridType.md#grouprowtemplate) + +*** + +### groupsRecords + +#### Get Signature + +> **get** **groupsRecords**(): [`IGroupByRecord`](../interfaces/IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L353) + +Gets the hierarchical representation of the group by records. + +##### Example + +```typescript +let groupRecords = this.grid.groupsRecords; +``` + +##### Returns + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupsRecords`](../interfaces/GridType.md#groupsrecords) + +*** + +### groupStrategy + +#### Get Signature + +> **get** **groupStrategy**(): [`IGridGroupingStrategy`](../interfaces/IGridGroupingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:602](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L602) + +Gets/Sets the grouping strategy of the grid. + +##### Remarks + +The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well. + +##### Example + +```html + <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid> +``` + +##### Returns + +[`IGridGroupingStrategy`](../interfaces/IGridGroupingStrategy.md) + +#### Set Signature + +> **set** **groupStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L606) + +##### Parameters + +###### value + +[`IGridGroupingStrategy`](../interfaces/IGridGroupingStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupStrategy`](../interfaces/GridType.md#groupstrategy) + +*** + +### hasCellsToMerge + +#### Get Signature + +> **get** `protected` **hasCellsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4082) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hasCellsToMerge`](IgxGridBaseDirective.md#hascellstomerge) + +*** + +### hasVisibleColumns + +#### Set Signature + +> **set** **hasVisibleColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5533) + +Indicates whether the grid has columns that are shown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether the grid has columns that are shown + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hasVisibleColumns`](../interfaces/GridType.md#hasvisiblecolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hasVisibleColumns`](IgxGridBaseDirective.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **headerCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1557) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1574) + +Sets the row collapse indicator template. +```html +<ng-template igxHeaderCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerCollapsedIndicatorTemplate`](../interfaces/GridType.md#headercollapsedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerCollapsedIndicatorTemplate`](IgxGridBaseDirective.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +#### Get Signature + +> **get** **headerExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1526) + +Gets the header expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1543) + +Sets the header expand indicator template. +```html +<ng-template igxHeaderExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerExpandedIndicatorTemplate`](../interfaces/GridType.md#headerexpandedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerExpandedIndicatorTemplate`](IgxGridBaseDirective.md#headerexpandedindicatortemplate) + +*** + +### headSelectorTemplate + +#### Get Signature + +> **get** **headSelectorTemplate**(): `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2620) + +Gets the header row selector template. + +##### Returns + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **headSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2637) + +Sets the header row selector template. +```html +<ng-template #template igxHeadSelector let-headContext> +{{ headContext.selectedCount }} / {{ headContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headSelectorTemplate`](../interfaces/GridType.md#headselectortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headSelectorTemplate`](IgxGridBaseDirective.md#headselectortemplate) + +*** + +### height + +#### Get Signature + +> **get** **height**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2109) + +Gets/Sets the height. + +##### Example + +```html +<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **height**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2113) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`height`](IgxGridBaseDirective.md#height) + +*** + +### hiddenColumnsCount + +#### Get Signature + +> **get** **hiddenColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2808) + +Gets the number of hidden columns. + +##### Example + +```typescript +const hiddenCol = this.grid.hiddenColumnsCount; +`` + +##### Returns + +`number` + +Represents the count of only the hidden (not visible) columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hiddenColumnsCount`](../interfaces/GridType.md#hiddencolumnscount) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hiddenColumnsCount`](IgxGridBaseDirective.md#hiddencolumnscount) + +*** + +### hideGroupedColumns + +#### Get Signature + +> **get** **hideGroupedColumns**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L574) + +Gets/Sets whether the grouped columns should be hidden. + +##### Remarks + +The default value is "false" + +##### Example + +```html +<igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideGroupedColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:578](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L578) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### hideRowSelectors + +#### Get Signature + +> **get** **hideRowSelectors**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2027](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2027) + +Gets/Sets if the row selectors are hidden. + +##### Remarks + +By default row selectors are shown + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideRowSelectors**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2031](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2031) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hideRowSelectors`](IgxGridBaseDirective.md#hiderowselectors) + +*** + +### isCustomSetRowHeight + +#### Get Signature + +> **get** `protected` **isCustomSetRowHeight**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3340) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isCustomSetRowHeight`](IgxGridBaseDirective.md#iscustomsetrowheight) + +*** + +### isLoading + +#### Get Signature + +> **get** **isLoading**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2235) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isLoading**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2222) + +Gets/Sets whether the grid is going to show a loading indicator. + +##### Example + +```html +<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`isLoading`](../interfaces/GridType.md#isloading) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isLoading`](IgxGridBaseDirective.md#isloading) + +*** + +### lastSearchInfo + +#### Get Signature + +> **get** **lastSearchInfo**(): [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2995](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2995) + +Represents the last search information. + +##### Returns + +[`ISearchInfo`](../interfaces/ISearchInfo.md) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`lastSearchInfo`](../interfaces/GridType.md#lastsearchinfo) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`lastSearchInfo`](IgxGridBaseDirective.md#lastsearchinfo) + +*** + +### loadingGridTemplate + +#### Get Signature + +> **get** **loadingGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L280) + +Gets/Sets a custom template when loading. + +##### Example + +```html +<ng-template igxGridLoading> + <!-- content to show when the grid is loading --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **loadingGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L283) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`loadingGridTemplate`](IgxGridBaseDirective.md#loadinggridtemplate) + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1970) + +Gets/Sets the locale. + +##### Remarks + +If not set, returns browser's language. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1974) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`locale`](../interfaces/GridType.md#locale) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`locale`](IgxGridBaseDirective.md#locale) + +*** + +### mergedDataInView + +#### Get Signature + +> **get** `protected` **mergedDataInView**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3986) + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`mergedDataInView`](IgxGridBaseDirective.md#mergeddatainview) + +*** + +### mergeStrategy + +#### Get Signature + +> **get** **mergeStrategy**(): [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2491) + +Gets/Sets the merge strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid> +``` + +##### Returns + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +#### Set Signature + +> **set** **mergeStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2494) + +##### Parameters + +###### value + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`mergeStrategy`](../interfaces/GridType.md#mergestrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`mergeStrategy`](IgxGridBaseDirective.md#mergestrategy) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4485) + +Gets the native element. + +##### Example + +```typescript +const nativeEl = this.grid.nativeElement. +``` + +##### Returns + +`any` + +Represents the native HTML element itself + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`nativeElement`](../interfaces/GridType.md#nativeelement) + +#### Inherited from + +[`IgxPivotGridComponent`](IgxPivotGridComponent.md).[`nativeElement`](IgxPivotGridComponent.md#nativeelement) + +*** + +### outlet + +#### Get Signature + +> **get** **outlet**(): [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4496) + +Gets/Sets the outlet used to attach the grid's overlays to. + +##### Remarks + +If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. + +##### Returns + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +#### Set Signature + +> **set** **outlet**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4500) + +##### Parameters + +###### val + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`outlet`](../interfaces/GridType.md#outlet) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`outlet`](IgxGridBaseDirective.md#outlet) + +*** + +### pagingMode + +#### Get Signature + +> **get** **pagingMode**(): [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1987](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1987) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Returns + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +#### Set Signature + +> **set** **pagingMode**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1991) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Parameters + +###### val + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +##### Returns + +`void` + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pagingMode`](../interfaces/GridType.md#pagingmode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pagingMode`](IgxGridBaseDirective.md#pagingmode) + +*** + +### pinnedColumns + +#### Get Signature + +> **get** **pinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4625) + +Gets an array of the pinned `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumns`](../interfaces/GridType.md#pinnedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedColumns`](IgxGridBaseDirective.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +#### Get Signature + +> **get** **pinnedColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2815) + +Gets the number of pinned columns. + +##### Returns + +`number` + +Represents the count of only the pinned columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumnsCount`](../interfaces/GridType.md#pinnedcolumnscount) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedColumnsCount`](IgxGridBaseDirective.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +#### Get Signature + +> **get** **pinnedEndColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4653) + +Gets an array of the pinned to the right `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedEndColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedEndColumns`](../interfaces/GridType.md#pinnedendcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedEndColumns`](IgxGridBaseDirective.md#pinnedendcolumns) + +*** + +### pinnedRows + +#### Get Signature + +> **get** **pinnedRows**(): [`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4666) + +Gets an array of the pinned `IgxRowComponent`s. + +##### Example + +```typescript +const pinnedRow = this.grid.pinnedRows; +``` + +##### Returns + +[`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedRows`](../interfaces/GridType.md#pinnedrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedRows`](IgxGridBaseDirective.md#pinnedrows) + +*** + +### pinnedStartColumns + +#### Get Signature + +> **get** **pinnedStartColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4641) + +Gets an array of the pinned to the left `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedStartColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedStartColumns`](../interfaces/GridType.md#pinnedstartcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedStartColumns`](IgxGridBaseDirective.md#pinnedstartcolumns) + +*** + +### pinning + +#### Get Signature + +> **get** **pinning**(): [`IPinningConfig`](../interfaces/IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2290) + +Gets/Sets the initial pinning configuration. + +##### Remarks + +Allows to apply pinning the columns to the start or the end. +Note that pinning to both sides at a time is not allowed. + +##### Example + +```html +<igx-grid [pinning]="pinningConfig"></igx-grid> +``` + +##### Returns + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +#### Set Signature + +> **set** **pinning**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2293) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +##### Parameters + +###### value + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +##### Returns + +`void` + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinning`](../interfaces/GridType.md#pinning) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinning`](IgxGridBaseDirective.md#pinning) + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L443) + +Gets/Sets the primary key. + +##### Example + +```html +<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **primaryKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L447) + +Represents the unique primary key used for identifying rows in the grid + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the unique primary key used for identifying rows in the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`primaryKey`](../interfaces/GridType.md#primarykey) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`primaryKey`](IgxGridBaseDirective.md#primarykey) + +*** + +### renderData + +#### Get Signature + +> **get** `protected` **renderData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3446) + +##### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`renderData`](IgxGridBaseDirective.md#renderdata) + +*** + +### renderedActualRowHeight + +#### Get Signature + +> **get** `protected` **renderedActualRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7829) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`renderedActualRowHeight`](IgxGridBaseDirective.md#renderedactualrowheight) + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1837) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1832) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`resourceStrings`](../interfaces/GridType.md#resourcestrings) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`resourceStrings`](IgxGridBaseDirective.md#resourcestrings) + +*** + +### rowAddTextTemplate + +#### Get Signature + +> **get** **rowAddTextTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1403) + +Gets the row add text template. + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **rowAddTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1419) + +Sets the row add text template. +```html +<ng-template #template igxRowAddText> +Adding Row +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowAddTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAddTextTemplate`](IgxGridBaseDirective.md#rowaddtexttemplate) + +*** + +### rowCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **rowCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1495) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1512) + +Sets the row collapse indicator template. +```html +<ng-template igxRowCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowCollapsedIndicatorTemplate`](../interfaces/GridType.md#rowcollapsedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowCollapsedIndicatorTemplate`](IgxGridBaseDirective.md#rowcollapsedindicatortemplate) + +*** + +### rowDraggable + +#### Get Signature + +> **get** **rowDraggable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2045](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2045) + +Gets/Sets whether rows can be moved. + +##### Example + +```html +<igx-grid #grid [rowDraggable]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowDraggable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2049](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2049) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDraggable`](../interfaces/GridType.md#rowdraggable) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDraggable`](IgxGridBaseDirective.md#rowdraggable) + +*** + +### rowEditable + +#### Get Signature + +> **get** **rowEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2086) + +Gets/Sets whether the rows are editable. + +##### Remarks + +By default it is set to false. + +##### Example + +```html +<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2090) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditable`](../interfaces/GridType.md#roweditable) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditable`](IgxGridBaseDirective.md#roweditable) + +*** + +### rowEditActionsTemplate + +#### Get Signature + +> **get** **rowEditActionsTemplate**(): `TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1433) + +Gets the row edit actions template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditActionsTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1450) + +Sets the row edit actions template. +```html +<ng-template #template igxRowEditActions let-endRowEdit> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditActionsTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditActionsTemplate`](IgxGridBaseDirective.md#roweditactionstemplate) + +*** + +### rowEditTextTemplate + +#### Get Signature + +> **get** **rowEditTextTemplate**(): `TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1373) + +Gets the row edit text template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1389) + +Sets the row edit text template. +```html +<ng-template #template igxRowEditText let-rowChangesCount> +Changes: {{rowChangesCount}} +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditTextTemplate`](IgxGridBaseDirective.md#rowedittexttemplate) + +*** + +### rowExpandedIndicatorTemplate + +#### Get Signature + +> **get** **rowExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1464) + +Gets the row expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1481) + +Sets the row expand indicator template. +```html +<ng-template igxRowExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowExpandedIndicatorTemplate`](../interfaces/GridType.md#rowexpandedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowExpandedIndicatorTemplate`](IgxGridBaseDirective.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2166) + +Gets/Sets the row height. + +##### Example + +```html +<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2170) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +##### Parameters + +###### value + +`string` \| `number` + +##### Returns + +`void` + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowHeight`](../interfaces/GridType.md#rowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowHeight`](IgxGridBaseDirective.md#rowheight) + +*** + +### rowList + +#### Get Signature + +> **get** **rowList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2585) + +A list of `IgxGridRowComponent`. + +##### Example + +```typescript +const rowList = this.grid.rowList; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowList`](../interfaces/GridType.md#rowlist) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowList`](IgxGridBaseDirective.md#rowlist) + +*** + +### rowSelection + +#### Get Signature + +> **get** **rowSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2922) + +Gets/Sets row selection mode + +##### Remarks + +By default the row selection mode is 'none' +Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **rowSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2926) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelection`](../interfaces/GridType.md#rowselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelection`](IgxGridBaseDirective.md#rowselection) + +*** + +### rowSelectorTemplate + +#### Get Signature + +> **get** **rowSelectorTemplate**(): `TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2653) + +Gets the row selector template. + +##### Returns + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **rowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2670) + +Sets a custom template for the row selectors. +```html +<ng-template #template igxRowSelector let-rowContext> + <igx-checkbox [checked]="rowContext.selected"></igx-checkbox> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectorTemplate`](../interfaces/GridType.md#rowselectortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelectorTemplate`](IgxGridBaseDirective.md#rowselectortemplate) + +*** + +### selectedCells + +#### Get Signature + +> **get** **selectedCells**(): [`CellType`](../interfaces/CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1207) + +Returns an array of the selected `IgxGridCell`s. + +##### Example + +```typescript +const selectedCells = this.grid.selectedCells; +``` + +##### Returns + +[`CellType`](../interfaces/CellType.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedCells`](../interfaces/GridType.md#selectedcells) + +*** + +### selectedRows + +#### Get Signature + +> **get** **selectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2543) + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **selectedRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2539](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2539) + +Gets/Sets the current selection state. + +##### Remarks + +Represents the selected rows' IDs (primary key or rowData) + +##### Example + +```html +<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid> +``` + +##### Parameters + +###### rowIDs + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedRows`](../interfaces/GridType.md#selectedrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedRows`](IgxGridBaseDirective.md#selectedrows) + +*** + +### selectRowOnClick + +#### Get Signature + +> **get** **selectRowOnClick**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5822) + +Gets/Sets whether clicking over a row should select/deselect it + +##### Remarks + +By default it is set to true + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectRowOnClick**(`enabled`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5826) + +##### Parameters + +###### enabled + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRowOnClick`](../interfaces/GridType.md#selectrowonclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRowOnClick`](IgxGridBaseDirective.md#selectrowonclick) + +*** + +### shouldGenerate + +#### Get Signature + +> **get** **shouldGenerate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2252) + +Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid + +##### Remarks + +This will allow to bind the grid to remote data and having auto-generated columns at the same time. +Note that after generating the columns, this property would be disabled to avoid re-creating +columns each time a new data is assigned. + +##### Example + +```typescript + this.grid.shouldGenerate = true; +``` + +##### Deprecated + +in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **shouldGenerate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2256) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldGenerate`](IgxGridBaseDirective.md#shouldgenerate) + +*** + +### shouldResize + +#### Get Signature + +> **get** `protected` **shouldResize**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5574) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldResize`](IgxGridBaseDirective.md#shouldresize) + +*** + +### showGroupArea + +#### Get Signature + +> **get** **showGroupArea**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:913](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L913) + +Returns whether the `IgxGridComponent` has group area. + +##### Examples + +```typescript +let isGroupAreaVisible = this.grid.showGroupArea; +``` + +```html +<igx-grid #grid [data]="Data" [showGroupArea]="false"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showGroupArea**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L916) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### showSummaryOnCollapse + +#### Get Signature + +> **get** **showSummaryOnCollapse**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2438) + +Controls whether the summary row is visible when groupBy/parent row is collapsed. + +##### Example + +```html +<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible +when the groupBy/parent row is collapsed. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showSummaryOnCollapse**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2442) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`showSummaryOnCollapse`](IgxGridBaseDirective.md#showsummaryoncollapse) + +*** + +### sortAscendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortAscendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1619) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortAscendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1636) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. +```html +<ng-template #template igxSortAscendingHeaderIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortAscendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortAscendingHeaderIconTemplate`](../interfaces/GridType.md#sortascendingheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortAscendingHeaderIconTemplate`](IgxGridBaseDirective.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortDescendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1648) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortDescendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1665) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. +```html +<ng-template #template igxSortDescendingHeaderIcon> + <igx-icon>expand_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortDescendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortDescendingHeaderIconTemplate`](../interfaces/GridType.md#sortdescendingheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortDescendingHeaderIconTemplate`](IgxGridBaseDirective.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +#### Get Signature + +> **get** **sortHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1680) + +Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1697) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. +```html +<ng-template #template igxSortHeaderIcon> + <igx-icon>unfold_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortHeaderIconTemplate`](../interfaces/GridType.md#sortheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortHeaderIconTemplate`](IgxGridBaseDirective.md#sortheadericontemplate) + +*** + +### sortingExpressions + +#### Get Signature + +> **get** **sortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2787](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2787) + +Gets/Sets the sorting state. + +##### Remarks + +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid> +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Set Signature + +> **set** **sortingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2791) + +##### Parameters + +###### value + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressions`](../interfaces/GridType.md#sortingexpressions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingExpressions`](IgxGridBaseDirective.md#sortingexpressions) + +*** + +### sortingOptions + +#### Get Signature + +> **get** **sortingOptions**(): [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2520) + +##### Returns + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +#### Set Signature + +> **set** **sortingOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2512) + +Gets/Sets the sorting options - single or multiple sorting. +Accepts an `ISortingOptions` object with any of the `mode` properties. + +##### Example + +```typescript +const _sortingOptions: ISortingOptions = { + mode: 'single' +} +```html +<igx-grid [sortingOptions]="sortingOptions"><igx-grid> +``` + +##### Parameters + +###### value + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingOptions`](../interfaces/GridType.md#sortingoptions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingOptions`](IgxGridBaseDirective.md#sortingoptions) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2473) + +Gets/Sets the sorting strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid> +``` + +##### Returns + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2477) + +##### Parameters + +###### value + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortStrategy`](../interfaces/GridType.md#sortstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortStrategy`](IgxGridBaseDirective.md#sortstrategy) + +*** + +### summaryCalculationMode + +#### Get Signature + +> **get** **summaryCalculationMode**(): [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2413) + +Gets/Sets the summary calculation mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. + +##### Returns + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +#### Set Signature + +> **set** **summaryCalculationMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2417) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +##### Parameters + +###### value + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +##### Returns + +`void` + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryCalculationMode`](../interfaces/GridType.md#summarycalculationmode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryCalculationMode`](IgxGridBaseDirective.md#summarycalculationmode) + +*** + +### summaryPosition + +#### Get Signature + +> **get** **summaryPosition**(): [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2393) + +Gets/Sets the summary position. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is bottom. + +##### Returns + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +#### Set Signature + +> **set** **summaryPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2397) + +Represents the position of summaries: 'top', 'bottom' + +##### Parameters + +###### value + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +##### Returns + +`void` + +Represents the position of summaries: 'top', 'bottom' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryPosition`](../interfaces/GridType.md#summaryposition) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryPosition`](IgxGridBaseDirective.md#summaryposition) + +*** + +### summaryRowHeight + +#### Get Signature + +> **get** **summaryRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L299) + +##### Returns + +`number` + +#### Set Signature + +> **set** **summaryRowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L291) + +Get/Set IgxSummaryRow height + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryRowHeight`](../interfaces/GridType.md#summaryrowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryRowHeight`](IgxGridBaseDirective.md#summaryrowheight) + +*** + +### totalCalcWidth + +#### Get Signature + +> **get** `protected` **totalCalcWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3442) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`totalCalcWidth`](IgxGridBaseDirective.md#totalcalcwidth) + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L456) + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`count`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L452) + +Gets/Sets the total number of records in the data source. + +##### Remarks + +This property is required for remote grid virtualization to function when it is bound to remote data. + +##### Example + +```typescript +const itemCount = this.grid1.totalItemCount; +this.grid1.totalItemCount = 55; +``` + +##### Parameters + +###### count + +`number` + +##### Returns + +`void` + +*** + +### totalRecords + +#### Get Signature + +> **get** **totalRecords**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4760) + +Returns the total number of records. + +##### Remarks + +Only functions when paging is enabled. + +##### Example + +```typescript +const totalRecords = this.grid.totalRecords; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalRecords**(`total`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4764) + +##### Parameters + +###### total + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`totalRecords`](IgxGridBaseDirective.md#totalrecords) + +*** + +### transactions + +#### Get Signature + +> **get** **transactions**(): [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2848) + +Get transactions service for the grid. + +##### Returns + +[`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Represents the transaction service for the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`transactions`](../interfaces/GridType.md#transactions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactions`](IgxGridBaseDirective.md#transactions) + +*** + +### unpinnedColumns + +#### Get Signature + +> **get** **unpinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4678) + +Gets an array of unpinned `IgxColumnComponent`s. + +##### Example + +```typescript +const unpinnedColumns = this.grid.unpinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are not pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinnedColumns`](../interfaces/GridType.md#unpinnedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`unpinnedColumns`](IgxGridBaseDirective.md#unpinnedcolumns) + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3596) + +Returns the state of the grid virtualization. + +##### Remarks + +Includes the start index and how many records are rendered. + +##### Example + +```typescript +const gridVirtState = this.grid1.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`virtualizationState`](../interfaces/GridType.md#virtualizationstate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`virtualizationState`](IgxGridBaseDirective.md#virtualizationstate) + +*** + +### visibleColumns + +#### Get Signature + +> **get** **visibleColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4741) + +Returns an array of visible `IgxColumnComponent`s. + +##### Example + +```typescript +const visibleColumns = this.grid.visibleColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`visibleColumns`](../interfaces/GridType.md#visiblecolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`visibleColumns`](IgxGridBaseDirective.md#visiblecolumns) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2139) + +Gets/Sets the width of the grid. + +##### Example + +```typescript +let gridWidth = this.grid.width; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2143) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`width`](IgxGridBaseDirective.md#width) + +## Methods + +### \_addRowForIndex() + +> `protected` **\_addRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6590) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_addRowForIndex`](IgxGridBaseDirective.md#_addrowforindex) + +*** + +### \_restoreVirtState() + +> `protected` **\_restoreVirtState**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6717](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6717) + +#### Parameters + +##### row + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_restoreVirtState`](IgxGridBaseDirective.md#_restorevirtstate) + +*** + +### \_setupNavigationService() + +> `protected` **\_setupNavigationService**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1369](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1369) + +#### Returns + +`void` + +*** + +### \_shouldAutoSize() + +> `protected` **\_shouldAutoSize**(`renderedHeight`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7278) + +#### Parameters + +##### renderedHeight + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_shouldAutoSize`](IgxGridBaseDirective.md#_shouldautosize) + +*** + +### addRow() + +> **addRow**(`data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4941) + +Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source. + +#### Parameters + +##### data + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.addRow(record); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`addRow`](IgxGridBaseDirective.md#addrow) + +*** + +### allowResetOfColumnsToMerge() + +> `protected` **allowResetOfColumnsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3974) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowResetOfColumnsToMerge`](IgxGridBaseDirective.md#allowresetofcolumnstomerge) + +*** + +### autoSizeColumnsInView() + +> `protected` **autoSizeColumnsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7583) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoSizeColumnsInView`](IgxGridBaseDirective.md#autosizecolumnsinview) + +*** + +### beginAddRowById() + +> **beginAddRowById**(`rowID`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6570](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6570) + +Enters add mode by spawning the UI under the specified row by rowID. + +#### Parameters + +##### rowID + +`any` + +The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view + +##### asChild? + +`boolean` + +Whether the record should be added as a child. Only applicable to igxTreeGrid. + +#### Returns + +`void` + +#### Remarks + +If null is passed as rowID, the row adding UI is spawned as the first record in the data view + +#### Example + +```typescript +this.grid.beginAddRowById('ALFKI'); +this.grid.beginAddRowById('ALFKI', true); +this.grid.beginAddRowById(null); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowById`](IgxGridBaseDirective.md#beginaddrowbyid) + +*** + +### beginAddRowByIndex() + +> **beginAddRowByIndex**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6628) + +Enters add mode by spawning the UI at the specified index. + +#### Parameters + +##### index + +`number` + +The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length + +#### Returns + +`void` + +#### Remarks + +Accepted values for index are integers from 0 to this.grid.dataView.length + +#### Example + +```typescript +this.grid.beginAddRowByIndex(0); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowByIndex`](IgxGridBaseDirective.md#beginaddrowbyindex) + +*** + +### beginAddRowForIndex() + +> `protected` **beginAddRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6645) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowForIndex`](IgxGridBaseDirective.md#beginaddrowforindex) + +*** + +### buildDataView() + +> `protected` **buildDataView**(`_data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7763) + +#### Parameters + +##### \_data + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`buildDataView`](IgxGridBaseDirective.md#builddataview) + +*** + +### changeRowEditingOverlayStateOnScroll() + +> `protected` **changeRowEditingOverlayStateOnScroll**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6726](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6726) + +#### Parameters + +##### row + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`changeRowEditingOverlayStateOnScroll`](IgxGridBaseDirective.md#changeroweditingoverlaystateonscroll) + +*** + +### checkContainerSizeChange() + +> `protected` **checkContainerSizeChange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7269) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`checkContainerSizeChange`](IgxGridBaseDirective.md#checkcontainersizechange) + +*** + +### checkPrimaryKeyField() + +> `protected` **checkPrimaryKeyField**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7068) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`checkPrimaryKeyField`](IgxGridBaseDirective.md#checkprimarykeyfield) + +*** + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5906) + +Deselect selected cells. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearCellSelection(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearCellSelection`](../interfaces/GridType.md#clearcellselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearCellSelection`](IgxGridBaseDirective.md#clearcellselection) + +*** + +### clearFilter() + +> **clearFilter**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5235) + +If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +Otherwise clears the filtering state of all `IgxColumnComponent`s. + +#### Example + +```typescript +this.grid.clearFilter(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearFilter`](IgxGridBaseDirective.md#clearfilter) + +*** + +### clearGrouping() + +> **clearGrouping**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:789](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L789) + +Clears grouping for particular column, array of columns or all columns. + +#### Parameters + +##### name? + +`string` \| `string`[] + +Name of column or array of column names to be ungrouped. + +#### Returns + +`void` + +#### Remarks + +Clears all grouping in the grid, if no parameter is passed. +If a parameter is provided, clears grouping for a particular column or an array of columns. + +#### Example + +```typescript +this.grid.clearGrouping(); //clears all grouping +this.grid.clearGrouping("ID"); //ungroups a single column +this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearGrouping`](../interfaces/GridType.md#cleargrouping) + +*** + +### clearSearch() + +> **clearSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5485) + +Removes all the highlights in the cell. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearSearch(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearSearch`](IgxGridBaseDirective.md#clearsearch) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5250) + +If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +otherwise clears the sorting state of all `IgxColumnComponent`. + +#### Example + +```typescript +this.grid.clearSort(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearSort`](../interfaces/GridType.md#clearsort) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearSort`](IgxGridBaseDirective.md#clearsort) + +*** + +### closeAdvancedFilteringDialog() + +> **closeAdvancedFilteringDialog**(`applyChanges`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6457) + +Closes the advanced filtering dialog. + +#### Parameters + +##### applyChanges + +`boolean` + +indicates whether the changes should be applied + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`closeAdvancedFilteringDialog`](IgxGridBaseDirective.md#closeadvancedfilteringdialog) + +*** + +### collapseAll() + +> **collapseAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4416) + +Collapses all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.collapseAll(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`collapseAll`](IgxGridBaseDirective.md#collapseall) + +*** + +### collapseRow() + +> **collapseRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4447) + +Collapses the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.collapseRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`collapseRow`](../interfaces/GridType.md#collapserow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`collapseRow`](IgxGridBaseDirective.md#collapserow) + +*** + +### deleteRow() + +> **deleteRow**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4964) + +Removes the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +`any` + +#### Remarks + +Requires that the `primaryKey` property is set. +The method accept rowSelector as a parameter, which is the rowID. + +#### Example + +```typescript +this.grid1.deleteRow(0); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deleteRow`](../interfaces/GridType.md#deleterow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deleteRow`](IgxGridBaseDirective.md#deleterow) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6069](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6069) + +Deselects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllColumns`](../interfaces/GridType.md#deselectallcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectAllColumns`](IgxGridBaseDirective.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5890) + +Deselects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.deselectAllRows(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllRows`](../interfaces/GridType.md#deselectallrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectAllRows`](IgxGridBaseDirective.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6043](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6043) + +Deselect specified columns by field. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectColumns(['ID','Name']); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectColumns`](../interfaces/GridType.md#deselectcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectColumns`](IgxGridBaseDirective.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5854) + +Deselect specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectRows([1,2,5]); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectRows`](../interfaces/GridType.md#deselectrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectRows`](IgxGridBaseDirective.md#deselectrows) + +*** + +### deselectRowsInGroup() + +> **deselectRowsInGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L851) + +Deselect all rows within a group. + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +The group record which rows would be deselected. + +#### Returns + +`void` + +#### Example + +```typescript +public groupRow: IGroupByRecord; +this.grid.deselectRowsInGroup(this.groupRow); +``` + +*** + +### disableSummaries() + +> **disableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5216) + +Disable summaries for the specified column. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Examples + +```typescript +grid.disableSummaries('ProductName'); +``` + +```typescript +grid.disableSummaries([{ fieldName: 'ProductName' }]); +``` + +#### Remarks + +Disable summaries for the listed columns. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`disableSummaries`](IgxGridBaseDirective.md#disablesummaries) + +*** + +### enableSummaries() + +> **enableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5194) + +Enables summaries for the specified column and applies your customSummary. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Remarks + +If you do not provide the customSummary, then the default summary for the column data type will be applied. + +#### Examples + +```typescript +grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); +``` +Enable summaries for the listed columns. + +```typescript +grid.enableSummaries('ProductName'); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`enableSummaries`](IgxGridBaseDirective.md#enablesummaries) + +*** + +### endEdit() + +> **endEdit**(`commit?`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6534](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6534) + +Finishes the row transactions on the current row and returns whether the grid editing was canceled. + +#### Parameters + +##### commit? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Remarks + +If `commit === true`, passes them from the pending state to the data (or transaction service) + +#### Example + +```html +<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`endEdit`](IgxGridBaseDirective.md#endedit) + +*** + +### evaluateLoadingState() + +> `protected` **evaluateLoadingState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6741) + +Should be called when data and/or isLoading input changes so that the overlay can be +hidden/shown based on the current value of shouldOverlayLoading + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`evaluateLoadingState`](IgxGridBaseDirective.md#evaluateloadingstate) + +*** + +### expandAll() + +> **expandAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4403) + +Expands all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.expandAll(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expandAll`](IgxGridBaseDirective.md#expandall) + +*** + +### expandRow() + +> **expandRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4432) + +Expands the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.expandRow(rowID); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expandRow`](IgxGridBaseDirective.md#expandrow) + +*** + +### extractDataFromColumnsSelection() + +> `protected` **extractDataFromColumnsSelection**(`source`, `formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7637) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`extractDataFromColumnsSelection`](IgxGridBaseDirective.md#extractdatafromcolumnsselection) + +*** + +### extractDataFromSelection() + +> `protected` **extractDataFromSelection**(`source`, `formatters?`, `headers?`, `columnData?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7444) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +##### columnData? + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`extractDataFromSelection`](IgxGridBaseDirective.md#extractdatafromselection) + +*** + +### filter() + +> **filter**(`name`, `value`, `conditionOrExpressionTree?`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5157) + +Filters a single `IgxColumnComponent`. + +#### Parameters + +##### name + +`string` + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### ignoreCase? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +public filter(term) { + this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); +} +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filter`](IgxGridBaseDirective.md#filter) + +*** + +### ~~filterGlobal()~~ + +> **filterGlobal**(`value`, `condition`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5174) + +Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. + +#### Parameters + +##### value + +`any` + +##### condition + +`any` + +##### ignoreCase? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); +``` + +#### Deprecated + +in version 19.0.0. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterGlobal`](IgxGridBaseDirective.md#filterglobal) + +*** + +### findNext() + +> **findNext**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5418) + +Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findNext("financial"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`findNext`](IgxGridBaseDirective.md#findnext) + +*** + +### findPrev() + +> **findPrev**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5435) + +Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findPrev("financial"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`findPrev`](IgxGridBaseDirective.md#findprev) + +*** + +### fullyExpandGroup() + +> **fullyExpandGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:866](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L866) + +Expands the specified group and all of its parent groups. + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +The group record to fully expand. + +#### Returns + +`void` + +#### Example + +```typescript +public groupRow: IGroupByRecord; +this.grid.fullyExpandGroup(this.groupRow); +``` + +*** + +### generateDataFields() + +> `protected` **generateDataFields**(`data`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7384) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`string`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`generateDataFields`](IgxGridBaseDirective.md#generatedatafields) + +*** + +### getCellByColumn() + +> **getCellByColumn**(`rowIndex`, `columnField`): [`CellType`](../interfaces/CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1222) + +Returns a `CellType` object that matches the conditions. + +#### Parameters + +##### rowIndex + +`number` + +##### columnField + +`string` + +#### Returns + +[`CellType`](../interfaces/CellType.md) + +#### Example + +```typescript +const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); +``` + +*** + +### getCellByKey() + +> **getCellByKey**(`rowSelector`, `columnField`): [`CellType`](../interfaces/CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1245) + +Returns a `CellType` object that matches the conditions. + +#### Parameters + +##### rowSelector + +`any` + +match any rowID + +##### columnField + +`string` + +#### Returns + +[`CellType`](../interfaces/CellType.md) + +#### Remarks + +Requires that the primaryKey property is set. + +#### Example + +```typescript +grid.getCellByKey(1, 'index'); +``` + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4704) + +Returns the `IgxColumnComponent` by field name. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Example + +```typescript +const myCol = this.grid1.getColumnByName("ID"); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByName`](../interfaces/GridType.md#getcolumnbyname) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnByName`](IgxGridBaseDirective.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4708) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByVisibleIndex`](../interfaces/GridType.md#getcolumnbyvisibleindex) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnByVisibleIndex`](IgxGridBaseDirective.md#getcolumnbyvisibleindex) + +*** + +### getColumnList() + +> `protected` **getColumnList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6951) + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnList`](IgxGridBaseDirective.md#getcolumnlist) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4689) + +Gets the `width` to be set on `IgxGridHeaderGroupComponent`. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`string` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getHeaderGroupWidth`](../interfaces/GridType.md#getheadergroupwidth) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getHeaderGroupWidth`](IgxGridBaseDirective.md#getheadergroupwidth) + +*** + +### getMergeCellOffset() + +> `protected` **getMergeCellOffset**(`rowData`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3655) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getMergeCellOffset`](IgxGridBaseDirective.md#getmergecelloffset) + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6272) + +Returns `ICellPosition` which defines the next cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getNextCell`](../interfaces/GridType.md#getnextcell) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getNextCell`](IgxGridBaseDirective.md#getnextcell) + +*** + +### getPinnedEndWidth() + +> **getPinnedEndWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5735) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedEndWidth(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPinnedEndWidth`](IgxGridBaseDirective.md#getpinnedendwidth) + +*** + +### getPinnedStartWidth() + +> **getPinnedStartWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5712) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedStartWidth(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPinnedStartWidth`](IgxGridBaseDirective.md#getpinnedstartwidth) + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6308) + +Returns `ICellPosition` which defines the previous cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getPreviousCell`](../interfaces/GridType.md#getpreviouscell) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPreviousCell`](IgxGridBaseDirective.md#getpreviouscell) + +*** + +### getRowByIndex() + +> **getRowByIndex**(`index`): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1137) + +Returns the `IgxGridRow` by index. + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Example + +```typescript +const myRow = grid.getRowByIndex(1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getRowByIndex`](../interfaces/GridType.md#getrowbyindex) + +*** + +### getRowByKey() + +> **getRowByKey**(`key`): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1167) + +Returns `IgxGridRow` object by the specified primary key. + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Remarks + +Requires that the `primaryKey` property is set. + +#### Example + +```typescript +const myRow = this.grid1.getRowByKey("cell5"); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getRowByKey`](../interfaces/GridType.md#getrowbykey) + +*** + +### getRowData() + +> **getRowData**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5090) + +Returns the data that is contained in the row component. + +#### Parameters + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`any` + +#### Remarks + +If the primary key is not specified the row selector match the row data. + +#### Example + +```typescript +const data = grid.getRowData(94741); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getRowData`](IgxGridBaseDirective.md#getrowdata) + +*** + +### getSelectableColumnsAt() + +> `protected` **getSelectableColumnsAt**(`index`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7568](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7568) + +#### Parameters + +##### index + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectableColumnsAt`](IgxGridBaseDirective.md#getselectablecolumnsat) + +*** + +### getSelectedColumnsData() + +> **getSelectedColumnsData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6094](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6094) + +Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedColumnsData`](IgxGridBaseDirective.md#getselectedcolumnsdata) + +*** + +### getSelectedData() + +> **getSelectedData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1108) + +Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedData`](IgxGridBaseDirective.md#getselecteddata) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5974) + +Get the currently selected ranges in the grid. + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getSelectedRanges`](../interfaces/GridType.md#getselectedranges) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedRanges`](IgxGridBaseDirective.md#getselectedranges) + +*** + +### groupBy() + +> **groupBy**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:762](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L762) + +Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one. + +#### Parameters + +##### expression + +[`IGroupingExpression`](../interfaces/IGroupingExpression.md) \| [`IGroupingExpression`](../interfaces/IGroupingExpression.md)[] + +#### Returns + +`void` + +#### Remarks + +Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed. +The `groupingDone` event would get raised only **once** if this method gets called multiple times with the same arguments. + +#### Example + +```typescript +this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +this.grid.groupBy([ + { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false }, + { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true }, + { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false } +]); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`groupBy`](../interfaces/GridType.md#groupby) + +*** + +### horizontalScrollHandler() + +> `protected` **horizontalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7808) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`horizontalScrollHandler`](IgxGridBaseDirective.md#horizontalscrollhandler) + +*** + +### isExpandedGroup() + +> **isExpandedGroup**(`group`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:806](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L806) + +Returns if a group is expanded or not. + +#### Parameters + +##### group + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +The group record. + +#### Returns + +`boolean` + +#### Example + +```typescript +public groupRow: IGroupByRecord; +const expandedGroup = this.grid.isExpandedGroup(this.groupRow); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`isExpandedGroup`](../interfaces/GridType.md#isexpandedgroup) + +#### Overrides + +`IgxGridBaseDirective.isExpandedGroup` + +*** + +### isRecordPinnedByIndex() + +> **isRecordPinnedByIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3634) + +Returns whether the record is pinned or not. + +#### Parameters + +##### rowIndex + +`number` + +Index of the record in the `filteredSortedData` collection. + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isRecordPinnedByIndex`](IgxGridBaseDirective.md#isrecordpinnedbyindex) + +*** + +### markForCheck() + +> **markForCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4926) + +Triggers change detection for the `IgxGridComponent`. +Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. +May degrade performance if used when not needed, or if misused: +```typescript +// DON'Ts: +// don't call markForCheck from inside a loop +// don't call markForCheck when a primitive has changed +grid.data.forEach(rec => { + rec = newValue; + grid.markForCheck(); +}); + +// DOs +// call markForCheck after updating a nested property +grid.data.forEach(rec => { + rec.nestedProp1.nestedProp2 = newValue; +}); +grid.markForCheck(); +``` + +#### Returns + +`void` + +#### Example + +```typescript +grid.markForCheck(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`markForCheck`](IgxGridBaseDirective.md#markforcheck) + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4849) + +Places a column before or after the specified target column. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### target + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### pos? + +[`DropPosition`](../enumerations/DropPosition.md) = `DropPosition.AfterDropTarget` + +#### Returns + +`void` + +#### Example + +```typescript +grid.moveColumn(column, target); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moveColumn`](../interfaces/GridType.md#movecolumn) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`moveColumn`](IgxGridBaseDirective.md#movecolumn) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColIndex?`, `cb?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6224) + +Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColIndex? + +`number` = `-1` + +##### cb? + +(`args`) => `void` + +#### Returns + +`void` + +#### Remarks + +Also can execute a custom logic over the target element, +through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } + +#### Example + +```typescript + this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigateTo`](../interfaces/GridType.md#navigateto) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`navigateTo`](IgxGridBaseDirective.md#navigateto) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6437) + +Opens the advanced filtering dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`openAdvancedFilteringDialog`](../interfaces/GridType.md#openadvancedfilteringdialog) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`openAdvancedFilteringDialog`](IgxGridBaseDirective.md#openadvancedfilteringdialog) + +*** + +### pinColumn() + +> **pinColumn**(`columnName`, `index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5287) + +Pins a column by field name. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Remarks + +Returns whether the operation is successful. + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinColumn`](IgxGridBaseDirective.md#pincolumn) + +*** + +### pinRow() + +> **pinRow**(`rowID`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1253) + +Pin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### index? + +`number` + +The index at which to insert the row in the pinned collection. + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.pinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinRow`](../interfaces/GridType.md#pinrow) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinRow`](IgxGridBaseDirective.md#pinrow) + +*** + +### recalculateAutoSizes() + +> **recalculateAutoSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4723](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4723) + +Recalculates all widths of columns that have size set to `auto`. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.recalculateAutoSizes(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`recalculateAutoSizes`](IgxGridBaseDirective.md#recalculateautosizes) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5401) + +Recalculates grid width/height dimensions. + +#### Returns + +`void` + +#### Remarks + +Should be run when changing DOM elements dimentions manually that affect the grid's size. + +#### Example + +```typescript +this.grid.reflow(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`reflow`](../interfaces/GridType.md#reflow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`reflow`](IgxGridBaseDirective.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(`updateActiveInfo?`, `endEdit?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5450) + +Reapplies the existing search. + +#### Parameters + +##### updateActiveInfo? + +`boolean` + +##### endEdit? + +`boolean` = `true` + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the last search. + +#### Example + +```typescript +this.grid.refreshSearch(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`refreshSearch`](../interfaces/GridType.md#refreshsearch) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`refreshSearch`](IgxGridBaseDirective.md#refreshsearch) + +*** + +### resetNotifyChanges() + +> `protected` **resetNotifyChanges**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6829) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`resetNotifyChanges`](IgxGridBaseDirective.md#resetnotifychanges) + +*** + +### selectAllColumns() + +> **selectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6082) + +Selects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectAllColumns`](IgxGridBaseDirective.md#selectallcolumns) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5872) + +Selects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.selectAllRows(); +this.grid.selectAllRows(false); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectAllRows`](../interfaces/GridType.md#selectallrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectAllRows`](IgxGridBaseDirective.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6015) + +Select specified columns. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectColumns(['ID','Name'], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectColumns`](../interfaces/GridType.md#selectcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectColumns`](IgxGridBaseDirective.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6000](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6000) + +Get current selected columns. + +#### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Example + +Returns an array with selected columns +```typescript +const selectedColumns = this.grid.selectedColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedColumns`](../interfaces/GridType.md#selectedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedColumns`](IgxGridBaseDirective.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`arg`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5934) + +Select range(s) of cells between certain rows and columns of the grid. + +#### Parameters + +##### arg + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) \| [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRange`](../interfaces/GridType.md#selectrange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRange`](IgxGridBaseDirective.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5840) + +Select specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRows([1,2,5], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRows`](../interfaces/GridType.md#selectrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRows`](IgxGridBaseDirective.md#selectrows) + +*** + +### selectRowsInGroup() + +> **selectRowsInGroup**(`groupRow`, `clearPrevSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L836) + +Select all rows within a group. + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +##### clearPrevSelection? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRowsInGroup(this.groupRow, true); +``` + +*** + +### shouldRecreateColumns() + +> `protected` **shouldRecreateColumns**(`oldData`, `newData`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8177) + +#### Parameters + +##### oldData + +`any`[] + +##### newData + +`any`[] + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldRecreateColumns`](IgxGridBaseDirective.md#shouldrecreatecolumns) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5109) + +Sort a single `IgxColumnComponent`. + +#### Parameters + +##### expression + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Remarks + +Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. + +#### Example + +```typescript +this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sort`](../interfaces/GridType.md#sort) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sort`](IgxGridBaseDirective.md#sort) + +*** + +### subscribeToTransactions() + +> `protected` **subscribeToTransactions**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6668) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`subscribeToTransactions`](IgxGridBaseDirective.md#subscribetotransactions) + +*** + +### switchTransactionService() + +> `protected` **switchTransactionService**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6656) + +#### Parameters + +##### val + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`switchTransactionService`](IgxGridBaseDirective.md#switchtransactionservice) + +*** + +### toggleAllGroupRows() + +> **toggleAllGroupRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L888) + +Toggles the expansion state of all group rows recursively. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.toggleAllGroupRows; +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`toggleAllGroupRows`](../interfaces/GridType.md#toggleallgrouprows) + +*** + +### toggleColumnVisibility() + +> **toggleColumnVisibility**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4358](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4358) + +Toggles the specified column's visibility. + +#### Parameters + +##### args + +[`IColumnVisibilityChangedEventArgs`](../interfaces/IColumnVisibilityChangedEventArgs.md) + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.toggleColumnVisibility({ + column: this.grid1.columns[0], + newValue: true +}); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`toggleColumnVisibility`](IgxGridBaseDirective.md#togglecolumnvisibility) + +*** + +### toggleGroup() + +> **toggleGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L821) + +Toggles the expansion state of a group. + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +The group record to toggle. + +#### Returns + +`void` + +#### Example + +```typescript +public groupRow: IGroupByRecord; +const toggleExpGroup = this.grid.toggleGroup(this.groupRow); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`toggleGroup`](../interfaces/GridType.md#togglegroup) + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4463) + +Toggles the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.toggleRow(rowID); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`toggleRow`](IgxGridBaseDirective.md#togglerow) + +*** + +### transactionStatusUpdate() + +> `protected` **transactionStatusUpdate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6674](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6674) + +#### Parameters + +##### event + +[`StateUpdateEvent`](../interfaces/StateUpdateEvent.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactionStatusUpdate`](IgxGridBaseDirective.md#transactionstatusupdate) + +*** + +### unpinColumn() + +> **unpinColumn**(`columnName`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5302) + +Unpins a column by field name. Returns whether the operation is successful. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`unpinColumn`](IgxGridBaseDirective.md#unpincolumn) + +*** + +### unpinRow() + +> **unpinRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:1258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L1258) + +Unpin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.unpinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinRow`](../interfaces/GridType.md#unpinrow) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`unpinRow`](IgxGridBaseDirective.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5016](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5016) + +Updates the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### value + +`any` + +the new value which is to be set. + +##### rowSelector + +`any` + +corresponds to rowID. + +##### column + +`string` + +corresponds to column field. + +#### Returns + +`void` + +#### Remarks + +Requires that the `primaryKey` property is set. + +#### Example + +```typescript +this.gridWithPK.updateCell('Updated', 1, 'ProductName'); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateCell`](../interfaces/GridType.md#updatecell) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateCell`](IgxGridBaseDirective.md#updatecell) + +*** + +### updateDefaultRowHeight() + +> `protected` **updateDefaultRowHeight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8096](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8096) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateDefaultRowHeight`](IgxGridBaseDirective.md#updatedefaultrowheight) + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5061](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5061) + +Updates the `IgxGridRowComponent` + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`void` + +#### Remarks + +The row is specified by +rowSelector parameter and the data source record with the passed value. +This method will apply requested update only if primary key is specified in the grid. + +#### Example + +```typescript +grid.updateRow({ + ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') + }, 1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateRow`](../interfaces/GridType.md#updaterow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateRow`](IgxGridBaseDirective.md#updaterow) + +*** + +### updateScrollThrottle() + +> `protected` **updateScrollThrottle**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3990) + +#### Parameters + +##### cells + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateScrollThrottle`](IgxGridBaseDirective.md#updatescrollthrottle) + +*** + +### verticalScrollHandler() + +> `protected` **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7783](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7783) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`verticalScrollHandler`](IgxGridBaseDirective.md#verticalscrollhandler) + +*** + +### viewDetachHandler() + +> `protected` **viewDetachHandler**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6408) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`viewDetachHandler`](IgxGridBaseDirective.md#viewdetachhandler) + +*** + +### writeToData() + +> `protected` **writeToData**(`rowIndex`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6713) + +#### Parameters + +##### rowIndex + +`number` + +##### value + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`writeToData`](IgxGridBaseDirective.md#writetodata) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridDataMapperPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridDataMapperPipe.md new file mode 100644 index 000000000..719a16041 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridDataMapperPipe.md @@ -0,0 +1,51 @@ +# Class: IgxGridDataMapperPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L335) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridDataMapperPipe**(): `IgxGridDataMapperPipe` + +#### Returns + +`IgxGridDataMapperPipe` + +## Methods + +### transform() + +> **transform**(`data`, `field`, `_`, `val`, `isNestedPath`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L337) + +#### Parameters + +##### data + +`any`[] + +##### field + +`string` + +##### \_ + +`number` + +##### val + +`any` + +##### isNestedPath + +`boolean` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridEditingActionsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridEditingActionsComponent.md new file mode 100644 index 000000000..3c87339ec --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridEditingActionsComponent.md @@ -0,0 +1,174 @@ +# Class: IgxGridEditingActionsComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L23) + +Grid Editing Actions for the Action Strip + +## Igx Parent + +IgxActionStripComponent + +## Extends + +- [`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md) + +## Constructors + +### Constructor + +> **new IgxGridEditingActionsComponent**(): `IgxGridEditingActionsComponent` + +#### Returns + +`IgxGridEditingActionsComponent` + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`constructor`](IgxGridActionsBaseDirective.md#constructor) + +## Properties + +### addChild + +> **addChild**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L98) + +An input to enable/disable action strip child row adding button + +*** + +### asMenuItems + +> **asMenuItems**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L34) + +Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label. + +#### Example + +```html + <igx-grid-pinning-actions [asMenuItems]='true'></igx-grid-pinning-actions> + <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions> +``` + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`asMenuItems`](IgxGridActionsBaseDirective.md#asmenuitems) + +*** + +### deleteRow + +> **deleteRow**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L59) + +An input to enable/disable action strip row deleting button + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L18) + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`differs`](IgxGridActionsBaseDirective.md#differs) + +*** + +### editRow + +> **editRow**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L53) + +An input to enable/disable action strip row editing button + +*** + +### iconService + +> `protected` **iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L17) + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`iconService`](IgxGridActionsBaseDirective.md#iconservice) + +## Accessors + +### addRow + +#### Get Signature + +> **get** **addRow**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L41) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **addRow**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L38) + +An input to enable/disable action strip row adding button + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### hasChildren + +#### Get Signature + +> **get** **hasChildren**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L87) + +##### Returns + +`boolean` + +## Methods + +### startEdit() + +> **startEdit**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts#L112) + +Enter row or cell edit mode depending the grid rowEditable option + +#### Parameters + +##### event? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.gridEditingActions.startEdit(); +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridExcelStyleFilteringComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridExcelStyleFilteringComponent.md new file mode 100644 index 000000000..f50f87211 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridExcelStyleFilteringComponent.md @@ -0,0 +1,266 @@ +# Class: IgxGridExcelStyleFilteringComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L67) + +A component used for presenting Excel style filtering UI for a specific column. +It is used internally in the Grid, but could also be hosted in a container outside of it. + +Example: +```html +<igx-grid-excel-style-filtering + [column]="grid1.columns[0]"> +</igx-grid-excel-style-filtering> +``` + +## Extends + +- `BaseFilteringComponent` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridExcelStyleFilteringComponent**(): `IgxGridExcelStyleFilteringComponent` + +#### Returns + +`IgxGridExcelStyleFilteringComponent` + +#### Inherited from + +`BaseFilteringComponent.constructor` + +## Properties + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts#L9) + +#### Inherited from + +`BaseFilteringComponent.cdr` + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L401) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts#L10) + +#### Inherited from + +`BaseFilteringComponent.element` + +*** + +### gridAPI? + +> `protected` `optional` **gridAPI?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L69) + +*** + +### mainDropdown + +> **mainDropdown**: `ElementRef`\<`HTMLElement`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L132) + +#### Overrides + +`BaseFilteringComponent.mainDropdown` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/base-filtering.component.ts#L11) + +#### Inherited from + +`BaseFilteringComponent.platform` + +## Accessors + +### column + +#### Get Signature + +> **get** **column**(): [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L176) + +Returns the current column. + +##### Returns + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Set Signature + +> **set** **column**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L162) + +Sets the column. + +##### Parameters + +###### value + +[`ColumnType`](../interfaces/ColumnType.md) + +##### Returns + +`void` + +#### Overrides + +`BaseFilteringComponent.column` + +*** + +### maxHeight + +#### Get Signature + +> **get** **maxHeight**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:259](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L259) + +Gets the maximum height. + +Setting value in template: +```ts +[maxHeight]="'<number><unit (px|rem|etc..)>'" +``` + +Example for setting a value: +```ts +[maxHeight]="'700px'" +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **maxHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L268) + +Sets the maximum height. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### minHeight + +#### Get Signature + +> **get** **minHeight**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L221) + +Gets the minimum height. + +Setting value in template: +```ts +[minHeight]="'<number><unit (px|rem|etc..)>'" +``` + +Example for setting a value: +```ts +[minHeight]="'700px'" +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **minHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L230) + +Sets the minimum height. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### shouldApplySizes + +#### Get Signature + +> **get** `protected` **shouldApplySizes**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L79) + +##### Returns + +`boolean` + +*** + +### size + +#### Get Signature + +> **get** `protected` **size**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L403) + +##### Returns + +`string` + +## Methods + +### afterColumnChange() + +> `protected` **afterColumnChange**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts#L407) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridExpandableCellComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridExpandableCellComponent.md new file mode 100644 index 000000000..d6f78b6ea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridExpandableCellComponent.md @@ -0,0 +1,1462 @@ +# Class: IgxGridExpandableCellComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts#L40) + +Providing reference to `IgxGridCellComponent`: +```typescript +@ViewChild('grid', { read: IgxGridComponent }) + public grid: IgxGridComponent; +``` +```typescript + let column = this.grid.columnList.first; +``` +```typescript + let cell = column.cells[0]; +``` + +## Extends + +- [`IgxGridCellComponent`](IgxGridCellComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridExpandableCellComponent**(): `IgxGridExpandableCellComponent` + +#### Returns + +`IgxGridExpandableCellComponent` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`constructor`](IgxGridCellComponent.md#constructor) + +## Properties + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L843) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`_lastSearchInfo`](IgxGridCellComponent.md#_lastsearchinfo) + +*** + +### activeHighlightClass + +> **activeHighlightClass**: `string` = `'igx-highlight__active'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L821) + +Sets/gets the active highlight class class of the cell. +Default value is `"igx-highlight__active"`. +```typescript +let activeHighlightClass = this.cell.activeHighlightClass; +``` +```typescript +this.cell.activeHighlightClass = 'igx-cell-highlight_active'; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`activeHighlightClass`](IgxGridCellComponent.md#activehighlightclass) + +*** + +### addRowCellTemplate + +> `protected` **addRowCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L763) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`addRowCellTemplate`](IgxGridCellComponent.md#addrowcelltemplate) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L116) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`cdr`](IgxGridCellComponent.md#cdr) + +*** + +### cellTemplate + +> **cellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L246) + +Sets/gets the template of the cell. +```html +<ng-template #cellTemplate igxCell let-value> + <div style="font-style: oblique; color:blueviolet; background:red"> + <span>{{value}}</span> + </div> +</ng-template> +``` +```typescript +@ViewChild('cellTemplate',{read: TemplateRef}) +cellTemplate: TemplateRef<any>; +``` +```typescript +this.cell.cellTemplate = this.cellTemplate; +``` +```typescript +let template = this.cell.cellTemplate; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`cellTemplate`](IgxGridCellComponent.md#celltemplate) + +*** + +### cellValidationErrorTemplate + +> **cellValidationErrorTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L249) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`cellValidationErrorTemplate`](IgxGridCellComponent.md#cellvalidationerrortemplate) + +*** + +### column + +> **column**: [`ColumnType`](../interfaces/ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L162) + +Gets the column of the cell. +```typescript + let cellColumn = this.cell.column; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`column`](IgxGridCellComponent.md#column) + +*** + +### defaultCellTemplate + +> `protected` **defaultCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:751](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L751) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`defaultCellTemplate`](IgxGridCellComponent.md#defaultcelltemplate) + +*** + +### defaultPinnedIndicator + +> `protected` **defaultPinnedIndicator**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:757](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L757) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`defaultPinnedIndicator`](IgxGridCellComponent.md#defaultpinnedindicator) + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts#L41) + +*** + +### editMode + +> **editMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:522](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L522) + +Returns whether the cell is in edit mode. + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`editMode`](IgxGridCellComponent.md#editmode) + +*** + +### emptyCellTemplate + +> `protected` **emptyCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:754](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L754) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`emptyCellTemplate`](IgxGridCellComponent.md#emptycelltemplate) + +*** + +### formatter + +> **formatter**: (`value`, `rowData?`, `columnData?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L277) + +Gets the cell formatter. +```typescript +let cellForamatter = this.cell.formatter; +``` + +#### Parameters + +##### value + +`any` + +##### rowData? + +`any` + +##### columnData? + +`any` + +#### Returns + +`any` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`formatter`](IgxGridCellComponent.md#formatter) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L114) + +Represents the grid instance containing the cell + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`grid`](IgxGridCellComponent.md#grid) + +*** + +### highlightClass + +> **highlightClass**: `string` = `'igx-highlight'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L807) + +Sets/gets the highlight class of the cell. +Default value is `"igx-highlight"`. +```typescript +let highlightClass = this.cell.highlightClass; +``` +```typescript +this.cell.highlightClass = 'igx-cell-highlight'; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`highlightClass`](IgxGridCellComponent.md#highlightclass) + +*** + +### indentationDiv + +> **indentationDiv**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts#L53) + +*** + +### indicator + +> **indicator**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts#L50) + +*** + +### inlineEditorTemplate + +> `protected` **inlineEditorTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L760) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`inlineEditorTemplate`](IgxGridCellComponent.md#inlineeditortemplate) + +*** + +### isMerged + +> **isMerged**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L175) + +Gets whether this cell is a merged cell. + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`isMerged`](IgxGridCellComponent.md#ismerged) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L115) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`overlayService`](IgxGridCellComponent.md#overlayservice) + +*** + +### pinnedIndicator + +> **pinnedIndicator**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L252) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`pinnedIndicator`](IgxGridCellComponent.md#pinnedindicator) + +*** + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L120) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`platformUtil`](IgxGridCellComponent.md#platformutil) + +*** + +### role + +> **role**: `string` = `'gridcell'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L537) + +Sets/get the `role` property of the cell. +Default value is `"gridcell"`. +```typescript +this.cell.role = 'grid-cell'; +``` +```typescript +let cellRole = this.cell.role; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`role`](IgxGridCellComponent.md#role) + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L214) + +Gets the data of the row of the cell. +```typescript +let rowData = this.cell.rowData; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`rowData`](IgxGridCellComponent.md#rowdata) + +*** + +### selectionService + +> `protected` **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L113) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`selectionService`](IgxGridCellComponent.md#selectionservice) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:266](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L266) + +Sets/gets the cell value. +```typescript +this.cell.value = "Cell Value"; +``` +```typescript +let cellValue = this.cell.value; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`value`](IgxGridCellComponent.md#value) + +*** + +### width + +> **width**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L630) + +Gets the width of the cell. +```typescript +let cellWidth = this.cell.width; +``` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`width`](IgxGridCellComponent.md#width) + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L118) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`zone`](IgxGridCellComponent.md#zone) + +## Accessors + +### ariaColIndex + +#### Get Signature + +> **get** `protected` **ariaColIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L746) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`ariaColIndex`](IgxGridCellComponent.md#ariacolindex) + +*** + +### ariaRowIndex + +#### Get Signature + +> **get** `protected` **ariaRowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:740](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L740) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`ariaRowIndex`](IgxGridCellComponent.md#ariarowindex) + +*** + +### ariaSelected + +#### Get Signature + +> **get** **ariaSelected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L640) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`ariaSelected`](IgxGridCellComponent.md#ariaselected) + +*** + +### attrCellID + +#### Get Signature + +> **get** **attrCellID**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L420) + +##### Returns + +`string` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`attrCellID`](IgxGridCellComponent.md#attrcellid) + +*** + +### booleanClass + +#### Get Signature + +> **get** **booleanClass**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L452) + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`booleanClass`](IgxGridCellComponent.md#booleanclass) + +*** + +### cellID + +#### Get Signature + +> **get** **cellID**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L413) + +Gets the ID of the cell. +```typescript +let cellID = this.cell.cellID; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`object` + +###### columnID + +> **columnID**: `number` + +###### rowID + +> **rowID**: `any` + +###### rowIndex + +> **rowIndex**: `number` + +Optional; The `cellID` is the unique key, used to identify the cell + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`cellID`](IgxGridCellComponent.md#cellid) + +*** + +### cellSelectionMode + +#### Set Signature + +> **set** **cellSelectionMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L477) + +##### Parameters + +###### value + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`cellSelectionMode`](IgxGridCellComponent.md#cellselectionmode) + +*** + +### colEnd + +#### Get Signature + +> **get** **colEnd**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L609) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`colEnd`](IgxGridCellComponent.md#colend) + +*** + +### colStart + +#### Get Signature + +> **get** **colStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:617](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L617) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`colStart`](IgxGridCellComponent.md#colstart) + +*** + +### columnIndex + +#### Get Signature + +> **get** **columnIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L383) + +Gets the `index` of the cell column. +```typescript +let columnIndex = this.cell.columnIndex; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`columnIndex`](IgxGridCellComponent.md#columnindex) + +*** + +### columnSelected + +#### Get Signature + +> **get** **columnSelected**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L684) + +Gets whether the cell column is selected. +```typescript +let isCellColumnSelected = this.cell.columnSelected; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`columnSelected`](IgxGridCellComponent.md#columnselected) + +*** + +### context + +#### Get Signature + +> **get** **context**(): [`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L287) + +Gets the cell template context object. +```typescript + let context = this.cell.context(); +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +[`IgxCellTemplateContext`](../interfaces/IgxCellTemplateContext.md) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`context`](IgxGridCellComponent.md#context) + +*** + +### editable + +#### Get Signature + +> **get** **editable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:721](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L721) + +Returns whether the cell is editable. + +##### Returns + +`boolean` + +Indicates whether the cell can be edited. + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`editable`](IgxGridCellComponent.md#editable) + +*** + +### editValue + +#### Get Signature + +> **get** **editValue**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L712) + +Gets the current edit value while a cell is in edit mode. +Only for cell editing mode. +```typescript +let editValue = this.cell.editValue; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`any` + +#### Set Signature + +> **set** **editValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L697) + +Sets the current edit value while a cell is in edit mode. +Only for cell editing mode. +```typescript +this.cell.editValue = value; +``` + +##### Memberof + +IgxGridCellComponent + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +The value to display when the cell is in edit mode. + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`editValue`](IgxGridCellComponent.md#editvalue) + +*** + +### formControl + +#### Get Signature + +> **get** `protected` **formControl**(): `FormControl` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:593](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L593) + +Gets the formControl responsible for value changes and validation for this cell. + +##### Returns + +`FormControl` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`formControl`](IgxGridCellComponent.md#formcontrol) + +*** + +### gridColumnSpan + +#### Get Signature + +> **get** **gridColumnSpan**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:601](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L601) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`gridColumnSpan`](IgxGridCellComponent.md#gridcolumnspan) + +*** + +### gridID + +#### Get Signature + +> **get** **gridID**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L357) + +Gets the `id` of the grid in which the cell is stored. +```typescript +let gridId = this.cell.gridID; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`gridID`](IgxGridCellComponent.md#gridid) + +*** + +### gridRowSpan + +#### Get Signature + +> **get** **gridRowSpan**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:597](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L597) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`gridRowSpan`](IgxGridCellComponent.md#gridrowspan) + +*** + +### highlight + +#### Get Signature + +> **get** `protected` **highlight**(): [`IgxTextHighlightDirective`](IgxTextHighlightDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:777](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L777) + +##### Returns + +[`IgxTextHighlightDirective`](IgxTextHighlightDirective.md) + +#### Set Signature + +> **set** `protected` **highlight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:766](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L766) + +##### Parameters + +###### value + +[`IgxTextHighlightDirective`](IgxTextHighlightDirective.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`highlight`](IgxGridCellComponent.md#highlight) + +*** + +### minHeight + +#### Get Signature + +> **get** `protected` **minHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L733) + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`minHeight`](IgxGridCellComponent.md#minheight) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L464) + +Returns a reference to the nativeElement of the cell. +```typescript +let cellNativeElement = this.cell.nativeElement; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`HTMLElement` + +Represents the native HTML element of the cell itself + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`nativeElement`](IgxGridCellComponent.md#nativeelement) + +*** + +### pinnedIndicatorTemplate + +#### Get Signature + +> **get** **pinnedIndicatorTemplate**(): `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L342) + +Gets the pinned indicator template. +```typescript +let template = this.cell.pinnedIndicatorTemplate; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`TemplateRef`\<`any`\> + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`pinnedIndicatorTemplate`](IgxGridCellComponent.md#pinnedindicatortemplate) + +*** + +### readonly + +#### Get Signature + +> **get** **readonly**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:548](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L548) + +Gets whether the cell is editable. +```typescript +let isCellReadonly = this.cell.readonly; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`readonly`](IgxGridCellComponent.md#readonly) + +*** + +### row + +#### Get Signature + +> **get** **row**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L201) + +Gets the row of the cell. +```typescript +let cellRow = this.cell.row; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +Represents the row that the cell belongs to + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`row`](IgxGridCellComponent.md#row) + +*** + +### rowEnd + +#### Get Signature + +> **get** **rowEnd**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:605](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L605) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`rowEnd`](IgxGridCellComponent.md#rowend) + +*** + +### rowIndex + +#### Get Signature + +> **get** **rowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L371) + +Gets the `index` of the row where the cell is stored. +```typescript +let rowIndex = this.cell.rowIndex; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`rowIndex`](IgxGridCellComponent.md#rowindex) + +*** + +### rowStart + +#### Get Signature + +> **get** **rowStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L613) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`rowStart`](IgxGridCellComponent.md#rowstart) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L653) + +Gets whether the cell is selected. +```typescript +let isSelected = this.cell.selected; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L665) + +Selects/deselects the cell. +```typescript +this.cell.selected = true. +``` + +##### Memberof + +IgxGridCellComponent + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`selected`](IgxGridCellComponent.md#selected) + +*** + +### selectionNode + +#### Get Signature + +> **get** `protected` **selectionNode**(): [`ISelectionNode`](../interfaces/ISelectionNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:781](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L781) + +##### Returns + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`selectionNode`](IgxGridCellComponent.md#selectionnode) + +*** + +### template + +#### Get Signature + +> **get** **template**(): `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L317) + +Gets the cell template. +```typescript +let template = this.cell.template; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`TemplateRef`\<`any`\> + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`template`](IgxGridCellComponent.md#template) + +*** + +### title + +#### Get Signature + +> **get** **title**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:425](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L425) + +An optional title to display for the cell + +##### Returns + +`any` + +An optional title to display for the cell + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`title`](IgxGridCellComponent.md#title) + +*** + +### visibleColumnIndex + +#### Get Signature + +> **get** **visibleColumnIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L397) + +Returns the column visible index. +```typescript +let visibleColumnIndex = this.cell.visibleColumnIndex; +``` + +##### Memberof + +IgxGridCellComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **visibleColumnIndex**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L401) + +The index of the column that the cell belongs to. It counts only the visible (not hidden) columns + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +The index of the column that the cell belongs to. It counts only the visible (not hidden) columns + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`visibleColumnIndex`](IgxGridCellComponent.md#visiblecolumnindex) + +## Methods + +### clearHighlight() + +> **clearHighlight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:1206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L1206) + +Clears the highlight of the text in the cell. +```typescript +this.cell.clearHighLight(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`clearHighlight`](IgxGridCellComponent.md#clearhighlight) + +*** + +### highlightText() + +> **highlightText**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:1194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L1194) + +If the provided string matches the text in the cell, the text gets highlighted. +```typescript +this.cell.highlightText('Cell Value', true); +``` + +#### Parameters + +##### text + +`string` + +##### caseSensitive? + +`boolean` + +##### exactMatch? + +`boolean` + +#### Returns + +`number` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`highlightText`](IgxGridCellComponent.md#highlighttext) + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:899](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L899) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`ngAfterViewInit`](IgxGridCellComponent.md#ngafterviewinit) + +*** + +### setEditMode() + +> **setEditMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:999](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L999) + +Starts/ends edit mode for the cell. + +```typescript +cell.setEditMode(true); +``` + +#### Parameters + +##### value + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`setEditMode`](IgxGridCellComponent.md#seteditmode) + +*** + +### update() + +> **update**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:1024](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/cell.component.ts#L1024) + +Sets new value to the cell. +```typescript +this.cell.update('New Value'); +``` + +#### Parameters + +##### val + +`any` + +#### Returns + +`void` + +#### Memberof + +IgxGridCellComponent + +#### Inherited from + +[`IgxGridCellComponent`](IgxGridCellComponent.md).[`update`](IgxGridCellComponent.md#update) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridFooterComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridFooterComponent.md new file mode 100644 index 000000000..0bbdab233 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridFooterComponent.md @@ -0,0 +1,13 @@ +# Class: IgxGridFooterComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-footer/grid-footer.component.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-footer/grid-footer.component.ts#L8) + +## Constructors + +### Constructor + +> **new IgxGridFooterComponent**(): `IgxGridFooterComponent` + +#### Returns + +`IgxGridFooterComponent` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridForOfContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridForOfContext.md new file mode 100644 index 000000000..f70a6bd77 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridForOfContext.md @@ -0,0 +1,189 @@ +# Class: IgxGridForOfContext\<T, U\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1586) + +## Public Api + +## Extends + +- [`IgxForOfContext`](IgxForOfContext.md)\<`T`, `U`\> + +## Type Parameters + +### T + +`T` + +### U + +`U` *extends* `T`[] = `T`[] + +## Constructors + +### Constructor + +> **new IgxGridForOfContext**\<`T`, `U`\>(`$implicit`, `igxGridForOf`, `index`, `count`): `IgxGridForOfContext`\<`T`, `U`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1587) + +#### Parameters + +##### $implicit + +`T` + +##### igxGridForOf + +`U` + +##### index + +`number` + +##### count + +`number` + +#### Returns + +`IgxGridForOfContext`\<`T`, `U`\> + +#### Overrides + +[`IgxForOfContext`](IgxForOfContext.md).[`constructor`](IgxForOfContext.md#constructor) + +## Properties + +### $implicit + +> **$implicit**: `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L22) + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`$implicit`](IgxForOfContext.md#implicit) + +*** + +### count + +> **count**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L25) + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`count`](IgxForOfContext.md#count) + +*** + +### igxForOf + +> **igxForOf**: `U` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L23) + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`igxForOf`](IgxForOfContext.md#igxforof) + +*** + +### igxGridForOf + +> **igxGridForOf**: `U` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1589) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L24) + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`index`](IgxForOfContext.md#index) + +## Accessors + +### even + +#### Get Signature + +> **get** **even**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L45) + +A function that returns whether the element is even or not + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`even`](IgxForOfContext.md#even) + +*** + +### first + +#### Get Signature + +> **get** **first**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L31) + +A function that returns whether the element is the first or not + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`first`](IgxForOfContext.md#first) + +*** + +### last + +#### Get Signature + +> **get** **last**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L38) + +A function that returns whether the element is the last or not + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`last`](IgxForOfContext.md#last) + +*** + +### odd + +#### Get Signature + +> **get** **odd**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L52) + +A function that returns whether the element is odd or not + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfContext`](IgxForOfContext.md).[`odd`](IgxForOfContext.md#odd) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridForOfDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridForOfDirective.md new file mode 100644 index 000000000..6cadbc842 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridForOfDirective.md @@ -0,0 +1,1598 @@ +# Class: IgxGridForOfDirective\<T, U\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1601](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1601) + +## Extends + +- [`IgxForOfDirective`](IgxForOfDirective.md)\<`T`, `U`\> + +## Type Parameters + +### T + +`T` + +### U + +`U` *extends* `T`[] = `T`[] + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridForOfDirective**\<`T`, `U`\>(): `IgxGridForOfDirective`\<`T`, `U`\> + +#### Returns + +`IgxGridForOfDirective`\<`T`, `U`\> + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`constructor`](IgxForOfDirective.md#constructor) + +## Properties + +### \_bScrollInternal + +> `protected` **\_bScrollInternal**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L281) + +If the next onScroll event is triggered due to internal setting of scrollTop + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_bScrollInternal`](IgxForOfDirective.md#_bscrollinternal) + +*** + +### \_differ + +> `protected` **\_differ**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L275) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_differ`](IgxForOfDirective.md#_differ) + +*** + +### \_differs + +> `protected` **\_differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L91) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_differs`](IgxForOfDirective.md#_differs) + +*** + +### \_embeddedViews + +> `protected` **\_embeddedViews**: `EmbeddedViewRef`\<`any`\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L283) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_embeddedViews`](IgxForOfDirective.md#_embeddedviews) + +*** + +### \_embeddedViewSizesCache + +> `protected` **\_embeddedViewSizesCache**: `WeakMap`\<`EmbeddedViewRef`\<`any`\>, `number`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L99) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_embeddedViewSizesCache`](IgxForOfDirective.md#_embeddedviewsizescache) + +*** + +### \_injector + +> `protected` **\_injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L92) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_injector`](IgxForOfDirective.md#_injector) + +*** + +### \_sizesCache + +> `protected` **\_sizesCache**: `number`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L273) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_sizesCache`](IgxForOfDirective.md#_sizescache) + +*** + +### \_template + +> `protected` **\_template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L90) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_template`](IgxForOfDirective.md#_template) + +*** + +### \_trackByFn + +> `protected` **\_trackByFn**: `TrackByFunction`\<`T`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:276](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L276) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_trackByFn`](IgxForOfDirective.md#_trackbyfn) + +*** + +### \_virtScrollPosition + +> `protected` **\_virtScrollPosition**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L279) + +Internal track for scroll top that is being virtualized + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_virtScrollPosition`](IgxForOfDirective.md#_virtscrollposition) + +*** + +### \_virtSize + +> `protected` **\_virtSize**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L289) + +Size that is being virtualized. + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_virtSize`](IgxForOfDirective.md#_virtsize) + +*** + +### \_zone + +> `protected` **\_zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L94) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_zone`](IgxForOfDirective.md#_zone) + +*** + +### beforeViewDestroyed + +> **beforeViewDestroyed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L236) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`beforeViewDestroyed`](IgxForOfDirective.md#beforeviewdestroyed) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L93) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`cdr`](IgxForOfDirective.md#cdr) + +*** + +### chunkLoad + +> **chunkLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L199) + +An event that is emitted after a new chunk has been loaded. +```html +<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkLoad)="loadChunk($event)"></ng-template> +``` +```typescript +loadChunk(e){ +alert("chunk loaded!"); +} +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`chunkLoad`](IgxForOfDirective.md#chunkload) + +*** + +### chunkPreload + +> **chunkPreload**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L251) + +An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount. +Can be used for implementing remote load on demand for the igxFor data. +```html +<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template> +``` +```typescript +chunkPreload(e){ +alert("chunk is loading!"); +} +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`chunkPreload`](IgxForOfDirective.md#chunkpreload) + +*** + +### contentObserver + +> `protected` **contentObserver**: `ResizeObserver` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L285) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`contentObserver`](IgxForOfDirective.md#contentobserver) + +*** + +### contentResizeNotify + +> `protected` **contentResizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L284) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`contentResizeNotify`](IgxForOfDirective.md#contentresizenotify) + +*** + +### contentSizeChange + +> **contentSizeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L219) + +An event that is emitted after the rendered content size of the igxForOf has been changed. + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`contentSizeChange`](IgxForOfDirective.md#contentsizechange) + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L233) + +An event that is emitted after data has been changed. +```html +<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template> +``` +```typescript +dataChanged(e){ +alert("data changed!"); +} +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`dataChanged`](IgxForOfDirective.md#datachanged) + +*** + +### document + +> `protected` **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L97) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`document`](IgxForOfDirective.md#document) + +*** + +### func + +> `protected` **func**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L272) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`func`](IgxForOfDirective.md#func) + +*** + +### igxForContainerSize + +> **igxForContainerSize**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L167) + +Sets the px-affixed size of the container along the axis of scrolling. +For "horizontal" orientation this value is the width of the container and for "vertical" is the height. +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'" + [igxForScrollOrientation]="'horizontal'"> +</ng-template> +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForContainerSize`](IgxForOfDirective.md#igxforcontainersize) + +*** + +### igxForItemSize + +> **igxForItemSize**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L185) + +Sets the px-affixed size of the item along the axis of scrolling. +For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row. +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template> +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForItemSize`](IgxForOfDirective.md#igxforitemsize) + +*** + +### igxForScrollContainer + +> **igxForScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L155) + +Optionally pass the parent `igxFor` instance to create a virtual template scrolling both horizontally and vertically. +```html +<ng-template #scrollContainer igxFor let-rowData [igxForOf]="data" + [igxForScrollOrientation]="'vertical'" + [igxForContainerSize]="'500px'" + [igxForItemSize]="'50px'" + let-rowIndex="index"> + <div [style.display]="'flex'" [style.height]="'50px'"> + <ng-template #childContainer igxFor let-item [igxForOf]="data" + [igxForScrollOrientation]="'horizontal'" + [igxForScrollContainer]="parentVirtDir" + [igxForContainerSize]="'500px'"> + <div [style.min-width]="'50px'">{{rowIndex}} : {{item.text}}</div> + </ng-template> + </div> +</ng-template> +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForScrollContainer`](IgxForOfDirective.md#igxforscrollcontainer) + +*** + +### igxForScrollOrientation + +> **igxForScrollOrientation**: `string` = `'vertical'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L133) + +Specifies the scroll orientation. +Scroll orientation can be "vertical" or "horizontal". +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template> +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForScrollOrientation`](IgxForOfDirective.md#igxforscrollorientation) + +*** + +### igxForSizePropName + +> **igxForSizePropName**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L123) + +Sets the property name from which to read the size in the data object. + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForSizePropName`](IgxForOfDirective.md#igxforsizepropname) + +*** + +### igxGridForOfUniqueSizeCache + +> **igxGridForOfUniqueSizeCache**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1614) + +*** + +### igxGridForOfVariableSizes + +> **igxGridForOfVariableSizes**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1617](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1617) + +*** + +### individualSizeCache + +> `protected` **individualSizeCache**: `number`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L277) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`individualSizeCache`](IgxForOfDirective.md#individualsizecache) + +*** + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L96) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`platformUtil`](IgxForOfDirective.md#platformutil) + +*** + +### scrollComponent + +> `protected` **scrollComponent**: `VirtualHelperBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L274) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollComponent`](IgxForOfDirective.md#scrollcomponent) + +*** + +### state + +> **state**: [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L267) + +The current state of the directive. It contains `startIndex` and `chunkSize`. +state.startIndex - The index of the item at which the current visible chunk begins. +state.chunkSize - The number of items the current visible chunk holds. +These options can be used when implementing remote virtualization as they provide the necessary state information. +```typescript +const gridState = this.parentVirtDir.state; +``` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`state`](IgxForOfDirective.md#state) + +*** + +### syncScrollService + +> `protected` **syncScrollService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L95) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`syncScrollService`](IgxForOfDirective.md#syncscrollservice) + +*** + +### syncService + +> `protected` **syncService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1602](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1602) + +*** + +### viewObserver + +> `protected` **viewObserver**: `ResizeObserver` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L286) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`viewObserver`](IgxForOfDirective.md#viewobserver) + +*** + +### viewResizeNotify + +> `protected` **viewResizeNotify**: `Subject`\<`ResizeObserverEntry`[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L287) + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`viewResizeNotify`](IgxForOfDirective.md#viewresizenotify) + +## Accessors + +### displayContainer + +#### Get Signature + +> **get** **displayContainer**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L347) + +##### Returns + +`HTMLElement` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`displayContainer`](IgxForOfDirective.md#displaycontainer) + +*** + +### embeddedViewNodes + +#### Get Signature + +> **get** `protected` **embeddedViewNodes**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L421) + +##### Returns + +`any`[] + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`embeddedViewNodes`](IgxForOfDirective.md#embeddedviewnodes) + +*** + +### igxForOf + +#### Get Signature + +> **get** **igxForOf**(): `U` & `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L108) + +Sets the data to be rendered. +```html +<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template> +``` + +##### Returns + +`U` & `T`[] + +#### Set Signature + +> **set** **igxForOf**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L112) + +##### Parameters + +###### value + +`U` & `T`[] + +##### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForOf`](IgxForOfDirective.md#igxforof) + +*** + +### igxForTotalItemCount + +#### Get Signature + +> **get** **igxForTotalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L315) + +The total count of the virtual data items, when using remote service. +Similar to the property totalItemCount, but this will allow setting the data count into the template. +```html +<ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async" + [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **igxForTotalItemCount**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:318](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L318) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForTotalItemCount`](IgxForOfDirective.md#igxfortotalitemcount) + +*** + +### igxForTrackBy + +#### Get Signature + +> **get** **igxForTrackBy**(): `TrackByFunction`\<`T`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1194) + +Gets the function used to track changes in the items collection. +By default the object references are compared. However this can be optimized if you have unique identifier +value that can be used for the comparison instead of the object ref or if you have some other property values +in the item object that should be tracked for changes. +This option is similar to ngForTrackBy. +```typescript +const trackFunc = this.parentVirtDir.igxForTrackBy; +``` + +##### Returns + +`TrackByFunction`\<`T`\> + +#### Set Signature + +> **set** **igxForTrackBy**(`fn`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1209) + +Sets the function used to track changes in the items collection. +This function can be set in scenarios where you want to optimize or +customize the tracking of changes for the items in the collection. +The igxForTrackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item. +```typescript +this.parentVirtDir.igxForTrackBy = (index, item) => { + return item.id + item.width; +}; +``` + +##### Parameters + +###### fn + +`TrackByFunction`\<`T`\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`igxForTrackBy`](IgxForOfDirective.md#igxfortrackby) + +*** + +### igxGridForOf + +#### Get Signature + +> **get** **igxGridForOf**(): `U` & `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1609) + +##### Returns + +`U` & `T`[] + +#### Set Signature + +> **set** **igxGridForOf**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1605](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1605) + +##### Parameters + +###### value + +`U` & `T`[] + +##### Returns + +`void` + +*** + +### itemsDimension + +#### Get Signature + +> **get** `protected` **itemsDimension**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1641) + +##### Returns + +`any` + +*** + +### scrollPosition + +#### Get Signature + +> **get** **scrollPosition**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:370](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L370) + +Gets/Sets the scroll position. +```typescript +const position = directive.scrollPosition; +directive.scrollPosition = value; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **scrollPosition**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L373) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollPosition`](IgxForOfDirective.md#scrollposition) + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:328](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L328) + +The total count of the virtual data items, when using remote service. +```typescript +this.parentVirtDir.totalItemCount = data.Count; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L332) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`totalItemCount`](IgxForOfDirective.md#totalitemcount) + +*** + +### virtualHelper + +#### Get Signature + +> **get** **virtualHelper**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L351) + +##### Returns + +`any` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`virtualHelper`](IgxForOfDirective.md#virtualhelper) + +## Methods + +### \_adjustScrollPositionAfterSizeChange() + +> `protected` **\_adjustScrollPositionAfterSizeChange**(`sizeDiff`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1543) + +#### Parameters + +##### sizeDiff + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_adjustScrollPositionAfterSizeChange`](IgxForOfDirective.md#_adjustscrollpositionaftersizechange) + +*** + +### \_calcSize() + +> `protected` **\_calcSize**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1427) + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_calcSize`](IgxForOfDirective.md#_calcsize) + +*** + +### \_calcVirtualScrollPosition() + +> `protected` **\_calcVirtualScrollPosition**(`scrollPosition`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1514](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1514) + +#### Parameters + +##### scrollPosition + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_calcVirtualScrollPosition`](IgxForOfDirective.md#_calcvirtualscrollposition) + +*** + +### \_getItemSize() + +> `protected` **\_getItemSize**(`item`, `dimension`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1522](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1522) + +#### Parameters + +##### item + +`any` + +##### dimension + +`string` + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_getItemSize`](IgxForOfDirective.md#_getitemsize) + +*** + +### \_recalcOnContainerChange() + +> `protected` **\_recalcOnContainerChange**(`containerSizeInfo?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1442) + +#### Parameters + +##### containerSizeInfo? + +`any` = `null` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_recalcOnContainerChange`](IgxForOfDirective.md#_recalconcontainerchange) + +*** + +### \_recalcScrollBarSize() + +> `protected` **\_recalcScrollBarSize**(`containerSizeInfo?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1401) + +#### Parameters + +##### containerSizeInfo? + +`any` = `null` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_recalcScrollBarSize`](IgxForOfDirective.md#_recalcscrollbarsize) + +*** + +### \_updateScrollOffset() + +> `protected` **\_updateScrollOffset**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1527](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1527) + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_updateScrollOffset`](IgxForOfDirective.md#_updatescrolloffset) + +*** + +### \_updateSizeCache() + +> `protected` **\_updateSizeCache**(`changes?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1845](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1845) + +#### Parameters + +##### changes? + +`IterableChanges`\<`T`\> = `null` + +#### Returns + +`number` + +#### Overrides + +[`IgxForOfDirective`](IgxForOfDirective.md).[`_updateSizeCache`](IgxForOfDirective.md#_updatesizecache) + +*** + +### \_updateViews() + +> `protected` **\_updateViews**(`prevChunkSize`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1918) + +#### Parameters + +##### prevChunkSize + +`any` + +#### Returns + +`void` + +*** + +### addScroll() + +> **addScroll**(`add`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L639) + +Shifts the scroll thumb position. +```typescript +this.parentVirtDir.addScroll(5); +``` + +#### Parameters + +##### add + +`number` + +negative value to scroll previous and positive to scroll next; + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`addScroll`](IgxForOfDirective.md#addscroll) + +*** + +### addScrollTop() + +> **addScrollTop**(`add`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L627) + +Shifts the scroll thumb position. +```typescript +this.parentVirtDir.addScroll(5); +``` + +#### Parameters + +##### add + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`addScrollTop`](IgxForOfDirective.md#addscrolltop) + +*** + +### applyChunkSizeChange() + +> `protected` **applyChunkSizeChange**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1496) + +Recalculates chunkSize and adds/removes elements if need due to the change. +this.state.chunkSize is updated in @addLastElem() or @removeLastElem() + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`applyChunkSizeChange`](IgxForOfDirective.md#applychunksizechange) + +*** + +### getIndexAtScroll() + +> **getIndexAtScroll**(`scrollOffset`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L827) + +Returns the index of the element at the specified offset. +```typescript +this.parentVirtDir.getIndexAtScroll(100); +``` + +#### Parameters + +##### scrollOffset + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getIndexAtScroll`](IgxForOfDirective.md#getindexatscroll) + +*** + +### getItemCountInView() + +> **getItemCountInView**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:771](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L771) + +Returns the total number of items that are fully visible. +```typescript +this.parentVirtDir.getItemCountInView(); +``` + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getItemCountInView`](IgxForOfDirective.md#getitemcountinview) + +*** + +### getItemSize() + +> `protected` **getItemSize**(`item`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1799](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1799) + +#### Parameters + +##### item + +`any` + +#### Returns + +`number` + +*** + +### getMargin() + +> `protected` **getMargin**(`node`, `dimension`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1558](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1558) + +#### Parameters + +##### node + +`any` + +##### dimension + +`string` + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getMargin`](IgxForOfDirective.md#getmargin) + +*** + +### getNodeSize() + +> `protected` **getNodeSize**(`rNode`, `index?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1836) + +#### Parameters + +##### rNode + +`Element` + +##### index? + +`number` + +#### Returns + +`number` + +#### Overrides + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getNodeSize`](IgxForOfDirective.md#getnodesize) + +*** + +### getScroll() + +> **getScroll**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:788](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L788) + +Returns a reference to the scrollbar DOM element. +This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation. +```typescript +dir.getScroll(); +``` + +#### Returns + +`any` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getScroll`](IgxForOfDirective.md#getscroll) + +*** + +### getScrollForIndex() + +> **getScrollForIndex**(`index`, `bottom?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L815) + +Returns the scroll offset of the element at the specified index. +```typescript +this.parentVirtDir.getScrollForIndex(1); +``` + +#### Parameters + +##### index + +`number` + +##### bottom? + +`boolean` + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getScrollForIndex`](IgxForOfDirective.md#getscrollforindex) + +*** + +### getSizeAt() + +> **getSizeAt**(`index`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:797](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L797) + +Returns the size of the element at the specified index. +```typescript +this.parentVirtDir.getSizeAt(1); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`getSizeAt`](IgxForOfDirective.md#getsizeat) + +*** + +### handleCacheChanges() + +> `protected` **handleCacheChanges**(`changes`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1858) + +#### Parameters + +##### changes + +`IterableChanges`\<`T`\> + +#### Returns + +`number` + +*** + +### isIndexOutsideView() + +> **isIndexOutsideView**(`index`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L836) + +Returns whether the target index is outside the view. +```typescript +this.parentVirtDir.isIndexOutsideView(10); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`isIndexOutsideView`](IgxForOfDirective.md#isindexoutsideview) + +*** + +### isScrollable() + +> **isScrollable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L417) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`isScrollable`](IgxForOfDirective.md#isscrollable) + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L512) + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`ngAfterViewInit`](IgxForOfDirective.md#ngafterviewinit) + +*** + +### scrollNext() + +> **scrollNext**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:718](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L718) + +Scrolls by one item into the appropriate next direction. +For "horizontal" orientation that will be the right column and for "vertical" that is the lower row. +```typescript +this.parentVirtDir.scrollNext(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollNext`](IgxForOfDirective.md#scrollnext) + +*** + +### scrollNextPage() + +> **scrollNextPage**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:742](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L742) + +Scrolls by one page into the appropriate next direction. +For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom. +```typescript +this.parentVirtDir.scrollNextPage(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollNextPage`](IgxForOfDirective.md#scrollnextpage) + +*** + +### scrollPrev() + +> **scrollPrev**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L731) + +Scrolls by one item into the appropriate previous direction. +For "horizontal" orientation that will be the left column and for "vertical" that is the upper row. +```typescript +this.parentVirtDir.scrollPrev(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollPrev`](IgxForOfDirective.md#scrollprev) + +*** + +### scrollPrevPage() + +> **scrollPrevPage**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L753) + +Scrolls by one page into the appropriate previous direction. +For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top. +```typescript +this.parentVirtDir.scrollPrevPage(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollPrevPage`](IgxForOfDirective.md#scrollprevpage) + +*** + +### scrollTo() + +> **scrollTo**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L691) + +Scrolls to the specified index. +```typescript +this.parentVirtDir.scrollTo(5); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`scrollTo`](IgxForOfDirective.md#scrollto) + +*** + +### subscribeToViewObserver() + +> `protected` **subscribeToViewObserver**(`target`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:523](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L523) + +#### Parameters + +##### target + +`Element` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`subscribeToViewObserver`](IgxForOfDirective.md#subscribetoviewobserver) + +*** + +### updateSizes() + +> `protected` **updateSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L990) + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`updateSizes`](IgxForOfDirective.md#updatesizes) + +*** + +### updateViewSizes() + +> `protected` **updateViewSizes**(`entries`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1003) + +#### Parameters + +##### entries + +`ResizeObserverEntry`[] + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`updateViewSizes`](IgxForOfDirective.md#updateviewsizes) + +*** + +### verticalScrollHandler() + +> **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L413) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxForOfDirective`](IgxForOfDirective.md).[`verticalScrollHandler`](IgxForOfDirective.md#verticalscrollhandler) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridPinningActionsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridPinningActionsComponent.md new file mode 100644 index 000000000..c965d57a6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridPinningActionsComponent.md @@ -0,0 +1,142 @@ +# Class: IgxGridPinningActionsComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts#L23) + +Grid Pinning Actions for the Action Strip + +## Igx Parent + +IgxActionStripComponent + +## Extends + +- [`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md) + +## Constructors + +### Constructor + +> **new IgxGridPinningActionsComponent**(): `IgxGridPinningActionsComponent` + +#### Returns + +`IgxGridPinningActionsComponent` + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`constructor`](IgxGridActionsBaseDirective.md#constructor) + +## Properties + +### asMenuItems + +> **asMenuItems**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L34) + +Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label. + +#### Example + +```html + <igx-grid-pinning-actions [asMenuItems]='true'></igx-grid-pinning-actions> + <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions> +``` + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`asMenuItems`](IgxGridActionsBaseDirective.md#asmenuitems) + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L18) + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`differs`](IgxGridActionsBaseDirective.md#differs) + +*** + +### iconService + +> `protected` **iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts#L17) + +#### Inherited from + +[`IgxGridActionsBaseDirective`](IgxGridActionsBaseDirective.md).[`iconService`](IgxGridActionsBaseDirective.md#iconservice) + +## Methods + +### pin() + +> **pin**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts#L88) + +Pin the row according to the context. + +#### Parameters + +##### event? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.gridPinningActions.pin(); +``` + +*** + +### scrollToRow() + +> **scrollToRow**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts#L122) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +*** + +### unpin() + +> **unpin**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts#L109) + +Unpin the row according to the context. + +#### Parameters + +##### event? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.gridPinningActions.unpin(); +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridRow.md new file mode 100644 index 000000000..f96447189 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridRow.md @@ -0,0 +1,639 @@ +# Class: IgxGridRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L263) + +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +## Extends + +- `BaseRow` + +## Implements + +- [`RowType`](../interfaces/RowType.md) + +## Properties + +### \_data? + +> `protected` `optional` **\_data?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L14) + +#### Inherited from + +`BaseRow._data` + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L268) + +Represent the grid instance, the row belongs to + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`grid`](../interfaces/RowType.md#grid) + +#### Inherited from + +`BaseRow.grid` + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L269) + +The index of the row within the grid + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`index`](../interfaces/RowType.md#index) + +#### Inherited from + +`BaseRow.index` + +## Accessors + +### addRowUI + +#### Get Signature + +> **get** **addRowUI**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L46) + +Gets if this represents add row UI + +```typescript +let isAddRow = row.addRowUI; +``` + +##### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`addRowUI`](../interfaces/RowType.md#addrowui) + +#### Inherited from + +`BaseRow.addRowUI` + +*** + +### cells + +#### Get Signature + +> **get** **cells**(): [`CellType`](../interfaces/CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L195) + +Gets the rendered cells in the row component. + +##### Returns + +[`CellType`](../interfaces/CellType.md)[] + +Optional +A list or an array of cells, that belong to the row + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`cells`](../interfaces/RowType.md#cells) + +#### Inherited from + +`BaseRow.cells` + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L70) + +The data record that populates the row. + +```typescript +let rowData = row.data; +``` + +##### Returns + +`any` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`data`](../interfaces/RowType.md#data) + +#### Inherited from + +`BaseRow.data` + +*** + +### deleted + +#### Get Signature + +> **get** **deleted**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L173) + +Returns if the row is in delete state. + +##### Returns + +`boolean` + +Optional +Indicates whether the row is marked for deletion. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`deleted`](../interfaces/RowType.md#deleted) + +#### Inherited from + +`BaseRow.deleted` + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L188) + +Gets whether the row is disabled. +A disabled row represents a ghost placeholder created by row pinning. + +##### Returns + +`boolean` + +Optional +Indicates whether the current row is disabled + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`disabled`](../interfaces/RowType.md#disabled) + +#### Inherited from + +`BaseRow.disabled` + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L128) + +Gets the row expanded/collapsed state. + +```typescript +const isExpanded = row.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L139) + +Expands/collapses the row. + +```typescript +row.expanded = true; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`expanded`](../interfaces/RowType.md#expanded) + +#### Inherited from + +`BaseRow.expanded` + +*** + +### hasChildren + +#### Get Signature + +> **get** **hasChildren**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L180) + +Returns if the row has child rows. Always return false for IgxGridRow. + +##### Returns + +`boolean` + +Optional +Indicates whether the current row has any child rows + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`hasChildren`](../interfaces/RowType.md#haschildren) + +#### Inherited from + +`BaseRow.hasChildren` + +*** + +### inEditMode + +#### Get Signature + +> **get** **inEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L86) + +Returns if the row is currently in edit mode. + +##### Returns + +`boolean` + +Optional +Indicates whether the row is currently being edited. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`inEditMode`](../interfaces/RowType.md#ineditmode) + +#### Inherited from + +`BaseRow.inEditMode` + +*** + +### key + +#### Get Signature + +> **get** **key**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L33) + +Gets the row key. +A row in the grid is identified either by: +- primaryKey data value, +- the whole rowData, if the primaryKey is omitted. + +```typescript +let rowKey = row.key; +``` + +##### Returns + +`any` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`key`](../interfaces/RowType.md#key) + +#### Inherited from + +`BaseRow.key` + +*** + +### parent + +#### Get Signature + +> **get** **parent**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:323](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L323) + +Returns the parent row, if grid is grouped. + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +Optional +Contains the parent row of the current row, if it has one. +If the parent row exist, it means that the current row is a child row + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`parent`](../interfaces/RowType.md#parent) + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L102) + +Gets whether the row is pinned. +Default value is `false`. +```typescript +const isPinned = row.pinned; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L113) + +Sets whether the row is pinned. +Default value is `false`. +```typescript +row.pinned = !row.pinned; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is pinned. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`pinned`](../interfaces/RowType.md#pinned) + +#### Inherited from + +`BaseRow.pinned` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L150) + +Gets whether the row is selected. +Default value is `false`. +```typescript +row.selected = true; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L161) + +Sets whether the row is selected. +Default value is `false`. +```typescript +row.selected = !row.selected; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is selected + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`selected`](../interfaces/RowType.md#selected) + +#### Inherited from + +`BaseRow.selected` + +*** + +### validation + +#### Get Signature + +> **get** **validation**(): [`IGridValidationState`](../interfaces/IGridValidationState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L58) + +Gets the validation status and errors, if any. +```typescript +let validation = row.validation; +let errors = validation.errors; +``` + +##### Returns + +[`IGridValidationState`](../interfaces/IGridValidationState.md) + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`validation`](../interfaces/RowType.md#validation) + +#### Inherited from + +`BaseRow.validation` + +*** + +### viewIndex + +#### Get Signature + +> **get** **viewIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L278) + +Returns the view index calculated per the grid page. + +##### Returns + +`number` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`viewIndex`](../interfaces/RowType.md#viewindex) + +#### Overrides + +`BaseRow.viewIndex` + +## Methods + +### delete() + +> **delete**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L258) + +Removes the specified row from the grid's data source. +This method emits `onRowDeleted` event. + +```typescript +// delete the third selected row from the grid +this.grid.selectedRows[2].delete(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`delete`](../interfaces/RowType.md#delete) + +#### Inherited from + +`BaseRow.delete` + +*** + +### pin() + +> **pin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L213) + +Pins the specified row. +This method emits `onRowPinning` event. + +```typescript +// pin the selected row from the grid +this.grid.selectedRows[0].pin(); +``` + +#### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`pin`](../interfaces/RowType.md#pin) + +#### Inherited from + +`BaseRow.pin` + +*** + +### unpin() + +> **unpin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L226) + +Unpins the specified row. +This method emits `onRowPinning` event. + +```typescript +// unpin the selected row from the grid +this.grid.selectedRows[0].unpin(); +``` + +#### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`unpin`](../interfaces/RowType.md#unpin) + +#### Inherited from + +`BaseRow.unpin` + +*** + +### update() + +> **update**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L239) + +Updates the specified row object and the data source record with the passed value. + +```typescript +// update the second selected row's value +let newValue = "Apple"; +this.grid.selectedRows[1].update(newValue); +``` + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`update`](../interfaces/RowType.md#update) + +#### Inherited from + +`BaseRow.update` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridRowComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridRowComponent.md new file mode 100644 index 000000000..45e6adcdb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridRowComponent.md @@ -0,0 +1,822 @@ +# Class: IgxGridRowComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-row.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-row.component.ts#L27) + +## Extends + +- [`IgxRowDirective`](IgxRowDirective.md) + +## Constructors + +### Constructor + +> **new IgxGridRowComponent**(): `IgxGridRowComponent` + +#### Returns + +`IgxGridRowComponent` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`constructor`](IgxRowDirective.md#constructor) + +## Properties + +### \_addRow + +> `protected` **\_addRow**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L409) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`_addRow`](IgxRowDirective.md#_addrow) + +*** + +### \_cells + +> `protected` **\_cells**: `QueryList`\<[`CellType`](../interfaces/CellType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L200) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`_cells`](IgxRowDirective.md#_cells) + +*** + +### \_data + +> `protected` **\_data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L408) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`_data`](IgxRowDirective.md#_data) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L43) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`cdr`](IgxRowDirective.md#cdr) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L407) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`destroy$`](IgxRowDirective.md#destroy) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L108) + +Sets whether this specific row has disabled functionality for editing and row selection. +Default value is `false`. +```typescript +this.grid.selectedRows[0].pinned = true; +``` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`disabled`](IgxRowDirective.md#disabled) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L41) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`element`](IgxRowDirective.md#element) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L37) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`grid`](IgxRowDirective.md#grid) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L96) + +The index of the row. + +```typescript +// get the index of the second selected row +let selectedRowIndex = this.grid.selectedRows[1].index; +``` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`index`](IgxRowDirective.md#index) + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L39) + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`selectionService`](IgxRowDirective.md#selectionservice) + +*** + +### trackPinnedColumn + +> `protected` **trackPinnedColumn**: `object` = `trackByIdentity` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:720](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L720) + +- state persistence switching all pinned columns resets collection +- MRL unpinnedColumns igxFor modes entire child loop on unpin + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`trackPinnedColumn`](IgxRowDirective.md#trackpinnedcolumn) + +## Accessors + +### addRowUI + +#### Get Signature + +> **get** **addRowUI**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L160) + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`addRowUI`](IgxRowDirective.md#addrowui) + +*** + +### cells + +#### Get Signature + +> **get** **cells**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L210) + +Gets the rendered cells in the row component. + +```typescript +// get the cells of the third selected row +let selectedRowCells = this.grid.selectedRows[2].cells; +``` + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`cells`](IgxRowDirective.md#cells) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L72) + +The data passed to the row component. + +```typescript +// get the row data for the first selected row +let selectedRowData = this.grid.selectedRows[0].data; +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **data**(`v`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L84) + +##### Parameters + +###### v + +`any` + +##### Returns + +`void` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`data`](IgxRowDirective.md#data) + +*** + +### dataRowIndex + +#### Get Signature + +> **get** **dataRowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L222) + +##### Returns + +`number` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`dataRowIndex`](IgxRowDirective.md#datarowindex) + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L145) + +Gets the expanded state of the row. +```typescript +let isExpanded = row.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L156) + +Expands/collapses the current row. + +```typescript +this.grid.selectedRows[2].expanded = true; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`expanded`](IgxRowDirective.md#expanded) + +*** + +### hasMergedCells + +#### Get Signature + +> **get** **hasMergedCells**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L135) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`hasMergedCells`](IgxRowDirective.md#hasmergedcells) + +*** + +### inEditMode + +#### Get Signature + +> **get** **inEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L351) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`inEditMode`](IgxRowDirective.md#ineditmode) + +*** + +### key + +#### Get Signature + +> **get** **key**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:370](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L370) + +Gets the ID of the row. +A row in the grid is identified either by: +- primaryKey data value, +- the whole data, if the primaryKey is omitted. + +```typescript +let rowID = this.grid.selectedRows[2].key; +``` + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`key`](IgxRowDirective.md#key) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L387) + +The native DOM element representing the row. Could be null in certain environments. + +```typescript +// get the nativeElement of the second selected row +let selectedRowNativeElement = this.grid.selectedRows[1].nativeElement; +``` + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`nativeElement`](IgxRowDirective.md#nativeelement) + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L131) + +Gets whether the row is pinned. +```typescript +let isPinned = row.pinned; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L117) + +Sets whether the row is pinned. +Default value is `false`. +```typescript +this.grid.selectedRows[0].pinned = true; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`pinned`](IgxRowDirective.md#pinned) + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L167) + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`rowHeight`](IgxRowDirective.md#rowheight) + +*** + +### selected + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L235) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`selected`](IgxRowDirective.md#selected) + +*** + +### virtDirRow + +#### Get Signature + +> **get** **virtDirRow**(): [`IgxGridForOfDirective`](IgxGridForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L189) + +##### Returns + +[`IgxGridForOfDirective`](IgxGridForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`virtDirRow`](IgxRowDirective.md#virtdirrow) + +## Methods + +### beginAddRow() + +> **beginAddRow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L623) + +Spawns the add row UI for the specific row. + +#### Returns + +`void` + +#### Example + +```typescript +const row = this.grid1.getRowByIndex(1); +row.beginAddRow(); +``` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`beginAddRow`](IgxRowDirective.md#beginaddrow) + +*** + +### delete() + +> **delete**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:550](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L550) + +Removes the specified row from the grid's data source. +This method emits `rowDeleted` event. + +```typescript +// delete the third selected row from the grid +this.grid.selectedRows[2].delete(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`delete`](IgxRowDirective.md#delete) + +*** + +### extractRecordKey() + +> `protected` **extractRecordKey**(`rec`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:681](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L681) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`extractRecordKey`](IgxRowDirective.md#extractrecordkey) + +*** + +### getContext() + +> **getContext**(`col`, `row`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-row.component.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-row.component.ts#L29) + +#### Parameters + +##### col + +`any` + +##### row + +`any` + +#### Returns + +`object` + +##### $implicit + +> **$implicit**: `any` = `col` + +##### row + +> **row**: `any` + +*** + +### getContextMRL() + +> **getContextMRL**(`pinnedCols`, `row`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-row.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-row.component.ts#L36) + +#### Parameters + +##### pinnedCols + +`any` + +##### row + +`any` + +#### Returns + +`object` + +##### $implicit + +> **$implicit**: `any` = `pinnedCols` + +##### row + +> **row**: `any` + +*** + +### getMergeCellSpan() + +> `protected` **getMergeCellSpan**(`col`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L642) + +#### Parameters + +##### col + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`string` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`getMergeCellSpan`](IgxRowDirective.md#getmergecellspan) + +*** + +### getRowHeight() + +> `protected` **getRowHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L693) + +#### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`getRowHeight`](IgxRowDirective.md#getrowheight) + +*** + +### isCellActive() + +> **isCellActive**(`visibleColumnIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L554) + +#### Parameters + +##### visibleColumnIndex + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`isCellActive`](IgxRowDirective.md#iscellactive) + +*** + +### isHoveredRoot() + +> `protected` **isHoveredRoot**(`col`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L670) + +#### Parameters + +##### col + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`isHoveredRoot`](IgxRowDirective.md#ishoveredroot) + +*** + +### isSelectionRoot() + +> `protected` **isSelectionRoot**(`col`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L657) + +#### Parameters + +##### col + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`isSelectionRoot`](IgxRowDirective.md#isselectionroot) + +*** + +### pin() + +> **pin**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L574) + +Pins the specified row. +This method emits `rowPinning``rowPinned` event. + +```typescript +// pin the selected row from the grid +this.grid.selectedRows[0].pin(); +``` + +#### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`pin`](IgxRowDirective.md#pin) + +*** + +### unpin() + +> **unpin**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L587) + +Unpins the specified row. +This method emits `rowPinning``rowPinned` event. + +```typescript +// unpin the selected row from the grid +this.grid.selectedRows[0].unpin(); +``` + +#### Returns + +`any` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`unpin`](IgxRowDirective.md#unpin) + +*** + +### update() + +> **update**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L531) + +Updates the specified row object and the data source record with the passed value. + +```typescript +// update the second selected row's value +let newValue = "Apple"; +this.grid.selectedRows[1].update(newValue); +``` + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowDirective`](IgxRowDirective.md).[`update`](IgxRowDirective.md#update) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridSelectionService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridSelectionService.md new file mode 100644 index 000000000..21823d15c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridSelectionService.md @@ -0,0 +1,1485 @@ +# Class: IgxGridSelectionService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L11) + +## Constructors + +### Constructor + +> **new IgxGridSelectionService**(): `IgxGridSelectionService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L75) + +#### Returns + +`IgxGridSelectionService` + +## Properties + +### activeElement + +> **activeElement**: [`ISelectionNode`](../interfaces/ISelectionNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L17) + +*** + +### columnSelection + +> **columnSelection**: `Set`\<`string`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L26) + +*** + +### columnsState + +> **columnsState**: [`IColumnSelectionState`](../interfaces/IColumnSelectionState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L20) + +*** + +### dragMode + +> **dragMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L16) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L15) + +*** + +### indeterminateRows + +> **indeterminateRows**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L25) + +*** + +### keyboardState + +> **keyboardState**: [`ISelectionKeyboardState`](../interfaces/ISelectionKeyboardState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L18) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L13) + +*** + +### pointerState + +> **pointerState**: [`ISelectionPointerState`](../interfaces/ISelectionPointerState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L19) + +*** + +### rowSelection + +> **rowSelection**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L24) + +*** + +### selection + +> **selection**: `Map`\<`number`, `Set`\<`number`\>\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L22) + +*** + +### temp + +> **temp**: `Map`\<`number`, `Set`\<`number`\>\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L23) + +## Accessors + +### allData + +#### Get Signature + +> **get** **allData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L697) + +Returns all data in the grid, with applied filtering and sorting and without deleted rows. + +##### Returns + +`any`[] + +*** + +### filteredSelectedRowIds + +#### Get Signature + +> **get** **filteredSelectedRowIds**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L630) + +##### Returns + +`any`[] + +*** + +### primaryButton + +#### Get Signature + +> **get** **primaryButton**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L67) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **primaryButton**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L71) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### ranges + +#### Get Signature + +> **get** **ranges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L52) + +Returns the current selected ranges in the grid from both +keyboard and pointer interactions + +##### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +## Methods + +### add() + +> **add**(`node`, `addToRange?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L114) + +Adds a single node. +Single clicks | Ctrl + single clicks on cells is the usual case. + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### addToRange? + +`boolean` = `true` + +#### Returns + +`void` + +*** + +### addKeyboardRange() + +> **addKeyboardRange**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L129) + +Adds the active keyboard range selection (if any) to the `ranges` meta. + +#### Returns + +`void` + +*** + +### addRangeMeta() + +> **addRangeMeta**(`node`, `state?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L170) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### state? + +[`SelectionState`](../type-aliases/SelectionState.md) + +#### Returns + +`void` + +*** + +### areAllRowSelected() + +> **areAllRowSelected**(`newSelection?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L613) + +#### Parameters + +##### newSelection? + +`any` + +#### Returns + +`boolean` + +*** + +### areEqualCollections() + +> `protected` **areEqualCollections**(`first`, `second`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L830) + +#### Parameters + +##### first + +`any` + +##### second + +`any` + +#### Returns + +`boolean` + +*** + +### clear() + +> **clear**(`clearAcriveEl?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:368](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L368) + +#### Parameters + +##### clearAcriveEl? + +`boolean` = `false` + +#### Returns + +`void` + +*** + +### clearAllSelectedColumns() + +> **clearAllSelectedColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L826) + +Clear columnSelection + +#### Returns + +`void` + +*** + +### clearAllSelectedRows() + +> **clearAllSelectedRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L689) + +Clear rowSelection and update checkbox state + +#### Returns + +`void` + +*** + +### clearHeaderCBState() + +> **clearHeaderCBState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:676](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L676) + +#### Returns + +`void` + +*** + +### clearRowSelection() + +> **clearRowSelection**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:426](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L426) + +Clears row selection, if filtering is applied clears only selected rows from filtered data. + +#### Parameters + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### clearTextSelection() + +> **clearTextSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L377) + +#### Returns + +`void` + +*** + +### deselectColumn() + +> **deselectColumn**(`field`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:789](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L789) + +Deselect the specified column and emit event. + +#### Parameters + +##### field + +`string` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### deselectColumns() + +> **deselectColumns**(`fields`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:801](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L801) + +Deselect specified columns. And emit event. + +#### Parameters + +##### fields + +`string`[] + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### deselectColumnsWithNoEvent() + +> **deselectColumnsWithNoEvent**(`fields`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:796](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L796) + +Deselect specified columns. No event is emitted. + +#### Parameters + +##### fields + +`string`[] + +#### Returns + +`void` + +*** + +### deselectPivotRowByID() + +> **deselectPivotRowByID**(`rowID`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L491) + +#### Parameters + +##### rowID + +`any` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### deselectRow() + +> **deselectRow**(`rowID`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:476](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L476) + +Deselect the specified row and emit event. + +#### Parameters + +##### rowID + +`any` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### deselectRows() + +> **deselectRows**(`keys`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L543) + +#### Parameters + +##### keys + +`any`[] + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### deselectRowsWithNoEvent() + +> **deselectRowsWithNoEvent**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:569](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L569) + +Deselect specified rows. No event is emitted. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +*** + +### dragSelect() + +> **dragSelect**(`node`, `state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:361](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L361) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### state + +[`SelectionState`](../type-aliases/SelectionState.md) + +#### Returns + +`void` + +*** + +### emitColumnSelectionEvent() + +> **emitColumnSelectionEvent**(`newSelection`, `added`, `removed`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L808) + +#### Parameters + +##### newSelection + +`any` + +##### added + +`any` + +##### removed + +`any` + +##### event? + +`any` + +#### Returns + +`boolean` + +*** + +### emitRowSelectionEvent() + +> **emitRowSelectionEvent**(`newSelection`, `added`, `removed`, `event?`, `currSelection?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L636) + +#### Parameters + +##### newSelection + +`any` + +##### added + +`any` + +##### removed + +`any` + +##### event? + +`any` + +##### currSelection? + +`any` + +#### Returns + +`boolean` + +*** + +### generateRange() + +> **generateRange**(`node`, `state?`): [`GridSelectionRange`](../interfaces/GridSelectionRange.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L183) + +Generates a new selection range from the given `node`. +If `state` is passed instead it will generate the range based on the passed `node` +and the start node of the `state`. + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### state? + +[`SelectionState`](../type-aliases/SelectionState.md) + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) + +*** + +### getIndeterminateRows() + +> **getIndeterminateRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L421) + +Returns array of the rows in indeterminate state. + +#### Returns + +`any`[] + +*** + +### getPivotRowsByIds() + +> **getPivotRowsByIds**(`ids`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:661](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L661) + +#### Parameters + +##### ids + +`any`[] + +#### Returns + +`any`[] + +*** + +### getRecordKey() + +> **getRecordKey**(`record`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L684) + +#### Parameters + +##### record + +`any` + +#### Returns + +`any` + +*** + +### getRowDataById() + +> **getRowDataById**(`rowID`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L668) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`any` + +*** + +### getRowIDs() + +> **getRowIDs**(`data`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L680) + +#### Parameters + +##### data + +`any` + +#### Returns + +`any`[] + +*** + +### getSelectedColumns() + +> **getSelectedColumns**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:709](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L709) + +Returns array of the selected columns fields. + +#### Returns + +`any`[] + +*** + +### getSelectedRows() + +> **getSelectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L416) + +Returns array of the selected row id's. + +#### Returns + +`any`[] + +*** + +### getSelectedRowsData() + +> **getSelectedRowsData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L393) + +#### Returns + +`any`[] + +*** + +### hasSomeRowSelected() + +> **hasSomeRowSelected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L624) + +#### Returns + +`boolean` + +*** + +### initColumnsState() + +> **initColumnsState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L105) + +Resets the columns state + +#### Returns + +`void` + +*** + +### initKeyboardState() + +> **initKeyboardState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L84) + +Resets the keyboard state + +#### Returns + +`void` + +*** + +### initPointerState() + +> **initPointerState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L94) + +Resets the pointer state + +#### Returns + +`void` + +*** + +### isActiveLayout() + +> **isActiveLayout**(`current`, `target`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L166) + +#### Parameters + +##### current + +[`IMultiRowLayoutNode`](../interfaces/IMultiRowLayoutNode.md) + +##### target + +[`IMultiRowLayoutNode`](../interfaces/IMultiRowLayoutNode.md) + +#### Returns + +`boolean` + +*** + +### isActiveNode() + +> **isActiveNode**(`node`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L154) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +#### Returns + +`boolean` + +*** + +### isColumnSelected() + +> **isColumnSelected**(`field`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L713) + +#### Parameters + +##### field + +`string` + +#### Returns + +`boolean` + +*** + +### isInMap() + +> **isInMap**(`node`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L145) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +#### Returns + +`boolean` + +*** + +### isPivotRowSelected() + +> **isPivotRowSelected**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:579](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L579) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +*** + +### isRowInIndeterminateState() + +> **isRowInIndeterminateState**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:591](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L591) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +*** + +### isRowSelected() + +> **isRowSelected**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:575](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L575) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +*** + +### keyboardStateOnFocus() + +> **keyboardStateOnFocus**(`node`, `emitter`, `dom`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L222) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### emitter + +`EventEmitter`\<[`GridSelectionRange`](../interfaces/GridSelectionRange.md)\> + +##### dom + +`any` + +#### Returns + +`void` + +*** + +### keyboardStateOnKeydown() + +> **keyboardStateOnKeydown**(`node`, `shift`, `shiftTab`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L207) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### shift + +`boolean` + +##### shiftTab + +`boolean` + +#### Returns + +`void` + +*** + +### mergeMap() + +> **mergeMap**(`target`, `source`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:276](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L276) + +#### Parameters + +##### target + +`Map`\<`number`, `Set`\<`number`\>\> + +##### source + +`Map`\<`number`, `Set`\<`number`\>\> + +#### Returns + +`void` + +*** + +### pointerDown() + +> **pointerDown**(`node`, `shift`, `ctrl`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:244](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L244) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### shift + +`boolean` + +##### ctrl + +`boolean` + +#### Returns + +`void` + +*** + +### pointerDownShiftKey() + +> **pointerDownShiftKey**(`node`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:271](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L271) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +#### Returns + +`void` + +*** + +### pointerEnter() + +> **pointerEnter**(`node`, `event`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:295](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L295) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### event + +`PointerEvent` + +#### Returns + +`boolean` + +*** + +### pointerUp() + +> **pointerUp**(`node`, `emitter`, `firedOutsideGrid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:318](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L318) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### emitter + +`EventEmitter`\<[`GridSelectionRange`](../interfaces/GridSelectionRange.md)\> + +##### firedOutsideGrid? + +`boolean` + +#### Returns + +`boolean` + +*** + +### remove() + +> **remove**(`node`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L135) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +#### Returns + +`void` + +*** + +### removeRangeMeta() + +> **removeRangeMeta**(`node`, `state?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L174) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### state? + +[`SelectionState`](../type-aliases/SelectionState.md) + +#### Returns + +`void` + +*** + +### restoreTextSelection() + +> **restoreTextSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L386) + +#### Returns + +`void` + +*** + +### selectAllRows() + +> **selectAllRows**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L442) + +Select all rows, if filtering is applied select only from filtered data. + +#### Parameters + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectColumn() + +> **selectColumn**(`field`, `clearPrevSelection?`, `selectColumnsRange?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:718](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L718) + +Select the specified column and emit event. + +#### Parameters + +##### field + +`string` + +##### clearPrevSelection? + +`any` + +##### selectColumnsRange? + +`any` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectColumns() + +> **selectColumns**(`fields`, `clearPrevSelection?`, `selectColumnsRange?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L735) + +Select specified columns. And emit event. + +#### Parameters + +##### fields + +`string`[] + +##### clearPrevSelection? + +`any` + +##### selectColumnsRange? + +`any` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectColumnsRange() + +> **selectColumnsRange**(`field`, `event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:755](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L755) + +Select range from last clicked column to the current specified column. + +#### Parameters + +##### field + +`string` + +##### event + +`any` + +#### Returns + +`void` + +*** + +### selectColumnsWithNoEvent() + +> **selectColumnsWithNoEvent**(`fields`, `clearPrevSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:779](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L779) + +Select specified columns. No event is emitted. + +#### Parameters + +##### fields + +`string`[] + +##### clearPrevSelection? + +`any` + +#### Returns + +`void` + +*** + +### selected() + +> **selected**(`node`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L150) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +#### Returns + +`boolean` + +*** + +### selectMultipleRows() + +> **selectMultipleRows**(`rowID`, `rowData`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L596) + +Select range from last selected row to the current specified row. + +#### Parameters + +##### rowID + +`any` + +##### rowData + +`any` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectPivotRowById() + +> **selectPivotRowById**(`rowID`, `clearPrevSelection`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L467) + +#### Parameters + +##### rowID + +`any` + +##### clearPrevSelection + +`boolean` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectRange() + +> **selectRange**(`node`, `state`, `collection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:343](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L343) + +#### Parameters + +##### node + +[`ISelectionNode`](../interfaces/ISelectionNode.md) + +##### state + +[`SelectionState`](../type-aliases/SelectionState.md) + +##### collection? + +`Map`\<`number`, `Set`\<`number`\>\> = `...` + +#### Returns + +`void` + +*** + +### selectRowById() + +> **selectRowById**(`rowID`, `clearPrevSelection?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L451) + +Select the specified row and emit event. + +#### Parameters + +##### rowID + +`any` + +##### clearPrevSelection? + +`any` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectRows() + +> **selectRows**(`keys`, `clearPrevSelection?`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:524](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L524) + +Select the specified rows and emit event. + +#### Parameters + +##### keys + +`any`[] + +##### clearPrevSelection? + +`boolean` + +##### event? + +`any` + +#### Returns + +`void` + +*** + +### selectRowsWithNoEvent() + +> **selectRowsWithNoEvent**(`rowIDs`, `clearPrevSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:559](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/selection/selection.service.ts#L559) + +Select specified rows. No event is emitted. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearPrevSelection? + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridStateBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridStateBaseDirective.md new file mode 100644 index 000000000..65aa86aa9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridStateBaseDirective.md @@ -0,0 +1,183 @@ +# Class: IgxGridStateBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L112) + +## Extended by + +- [`IgxGridStateDirective`](IgxGridStateDirective.md) + +## Constructors + +### Constructor + +> **new IgxGridStateBaseDirective**(): `IgxGridStateBaseDirective` + +#### Returns + +`IgxGridStateBaseDirective` + +## Properties + +### \_options + +> `protected` **\_options**: [`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L123) + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L116) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L114) + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L117) + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L115) + +## Accessors + +### options + +#### Get Signature + +> **get** **options**(): [`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:502](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L502) + +An object with options determining if a certain feature state should be saved. +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +public options = {selection: false, advancedFiltering: false}; +``` + +##### Returns + +[`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +#### Set Signature + +> **set** **options**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:506](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L506) + +##### Parameters + +###### value + +[`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +##### Returns + +`void` + +## Methods + +### getStateInternal() + +> `protected` **getStateInternal**(`serialize?`, `features?`): `string` \| [`IGridState`](../interfaces/IGridState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L530) + +Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property. + +#### Parameters + +##### serialize? + +`boolean` = `true` + +##### features? + +keyof IGridStateOptions \| keyof IGridStateOptions[] + +#### Returns + +`string` \| [`IGridState`](../interfaces/IGridState.md) + +Returns the serialized to JSON string IGridState object, or the non-serialized IGridState object. +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +@ViewChild(IgxGridStateDirective, { static: true }) public state; +let state = this.state.getState(); // returns string +let state = this.state(false) // returns `IGridState` object +``` + +*** + +### setStateInternal() + +> `protected` **setStateInternal**(`state`, `features?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L554) + +Restores grid features' state based on the IGridState object passed as an argument. + +#### Parameters + +##### state + +[`IGridState`](../interfaces/IGridState.md) + +##### features? + +keyof IGridStateOptions \| keyof IGridStateOptions[] + +#### Returns + +`void` + +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +@ViewChild(IgxGridStateDirective, { static: true }) public state; +this.state.setState(gridState); +``` + +*** + +### stringifyCallback() + +> `protected` **stringifyCallback**(`key`, `val`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L695) + +#### Parameters + +##### key + +`string` + +##### val + +`any` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridStateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridStateDirective.md new file mode 100644 index 000000000..a2c517e3b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridStateDirective.md @@ -0,0 +1,311 @@ +# Class: IgxGridStateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state.directive.ts#L8) + +## Extends + +- [`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md) + +## Constructors + +### Constructor + +> **new IgxGridStateDirective**(): `IgxGridStateDirective` + +#### Returns + +`IgxGridStateDirective` + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`constructor`](IgxGridStateBaseDirective.md#constructor) + +## Properties + +### \_options + +> `protected` **\_options**: [`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L123) + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`_options`](IgxGridStateBaseDirective.md#_options) + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L116) + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`envInjector`](IgxGridStateBaseDirective.md#envinjector) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L114) + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`grid`](IgxGridStateBaseDirective.md#grid) + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L117) + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`injector`](IgxGridStateBaseDirective.md#injector) + +*** + +### stateParsed + +> **stateParsed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state.directive.ts#L78) + +Event emitted when set state is called with a string. +Returns the parsed state object so that it can be further modified before applying to the grid. +```typescript +this.state.stateParsed.subscribe(parsedState => parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance()}); +``` + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L115) + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`viewRef`](IgxGridStateBaseDirective.md#viewref) + +## Accessors + +### options + +#### Get Signature + +> **get** **options**(): [`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state.directive.ts#L21) + +An object with options determining if a certain feature state should be saved. +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +public options = {selection: false, advancedFiltering: false}; +``` + +##### Returns + +[`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +#### Set Signature + +> **set** **options**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state.directive.ts#L25) + +An object with options determining if a certain feature state should be saved. +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +public options = {selection: false, advancedFiltering: false}; +``` + +##### Parameters + +###### value + +[`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +##### Returns + +`void` + +#### Overrides + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`options`](IgxGridStateBaseDirective.md#options) + +## Methods + +### getState() + +> **getState**(`serialize?`, `features?`): `string` \| [`IGridState`](../interfaces/IGridState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state.directive.ts#L44) + +Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property. + +#### Parameters + +##### serialize? + +`boolean` = `true` + +##### features? + +keyof IGridStateOptions \| keyof IGridStateOptions[] + +#### Returns + +`string` \| [`IGridState`](../interfaces/IGridState.md) + +Returns the serialized to JSON string IGridState object, or the non-serialized IGridState object. +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +@ViewChild(IgxGridStateDirective, { static: true }) public state; +let state = this.state.getState(); // returns string +let state = this.state(false) // returns `IGridState` object +``` + +*** + +### getStateInternal() + +> `protected` **getStateInternal**(`serialize?`, `features?`): `string` \| [`IGridState`](../interfaces/IGridState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L530) + +Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property. + +#### Parameters + +##### serialize? + +`boolean` = `true` + +##### features? + +keyof IGridStateOptions \| keyof IGridStateOptions[] + +#### Returns + +`string` \| [`IGridState`](../interfaces/IGridState.md) + +Returns the serialized to JSON string IGridState object, or the non-serialized IGridState object. +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +@ViewChild(IgxGridStateDirective, { static: true }) public state; +let state = this.state.getState(); // returns string +let state = this.state(false) // returns `IGridState` object +``` + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`getStateInternal`](IgxGridStateBaseDirective.md#getstateinternal) + +*** + +### setState() + +> **setState**(`state`, `features?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state.directive.ts#L62) + +Restores grid features' state based on the IGridState object passed as an argument. + +#### Parameters + +##### state + +`string` \| [`IGridState`](../interfaces/IGridState.md) + +##### features? + +keyof IGridStateOptions \| keyof IGridStateOptions[] + +#### Returns + +`void` + +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +@ViewChild(IgxGridStateDirective, { static: true }) public state; +this.state.setState(gridState); +``` + +*** + +### setStateInternal() + +> `protected` **setStateInternal**(`state`, `features?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L554) + +Restores grid features' state based on the IGridState object passed as an argument. + +#### Parameters + +##### state + +[`IGridState`](../interfaces/IGridState.md) + +##### features? + +keyof IGridStateOptions \| keyof IGridStateOptions[] + +#### Returns + +`void` + +```html +<igx-grid [igxGridState]="options"></igx-grid> +``` +```typescript +@ViewChild(IgxGridStateDirective, { static: true }) public state; +this.state.setState(gridState); +``` + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`setStateInternal`](IgxGridStateBaseDirective.md#setstateinternal) + +*** + +### stringifyCallback() + +> `protected` **stringifyCallback**(`key`, `val`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L695) + +#### Parameters + +##### key + +`string` + +##### val + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridStateBaseDirective`](IgxGridStateBaseDirective.md).[`stringifyCallback`](IgxGridStateBaseDirective.md#stringifycallback) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarActionsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarActionsComponent.md new file mode 100644 index 000000000..def6635bb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarActionsComponent.md @@ -0,0 +1,31 @@ +# Class: IgxGridToolbarActionsComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L78) + +Provides a way to template the action portion of the toolbar in the grid. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridToolbarComponent + +## Example + +```html +<igx-grid-toolbar-actions> + <some-toolbar-action-here /> +</igx-grid-toolbar-actions> +``` + +## Constructors + +### Constructor + +> **new IgxGridToolbarActionsComponent**(): `IgxGridToolbarActionsComponent` + +#### Returns + +`IgxGridToolbarActionsComponent` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarAdvancedFilteringComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarAdvancedFilteringComponent.md new file mode 100644 index 000000000..9170683ee --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarAdvancedFilteringComponent.md @@ -0,0 +1,68 @@ +# Class: IgxGridToolbarAdvancedFilteringComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts#L31) + +Provides a pre-configured button to open the advanced filtering dialog of the grid. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridToolbarComponent, IgxGridToolbarActionsComponent + +## Example + +```html +<igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering> +<igx-grid-toolbar-advanced-filtering>Custom text</igx-grid-toolbar-advanced-filtering> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridToolbarAdvancedFilteringComponent**(): `IgxGridToolbarAdvancedFilteringComponent` + +#### Returns + +`IgxGridToolbarAdvancedFilteringComponent` + +## Properties + +### numberOfColumns + +> `protected` **numberOfColumns**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts#L34) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts#L44) + +## Methods + +### extractUniqueFieldNamesFromFilterTree() + +> `protected` **extractUniqueFieldNamesFromFilterTree**(`filteringTree?`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts#L59) + +#### Parameters + +##### filteringTree? + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`string`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarComponent.md new file mode 100644 index 000000000..18e6f6d07 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarComponent.md @@ -0,0 +1,118 @@ +# Class: IgxGridToolbarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L34) + +Provides a context-aware container component for UI operations for the grid components. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridToolbarComponent**(): `IgxGridToolbarComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L94) + +#### Returns + +`IgxGridToolbarComponent` + +## Properties + +### \_grid + +> `protected` **\_grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L91) + +*** + +### showProgress + +> **showProgress**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L48) + +When enabled, shows the indeterminate progress bar. + +#### Remarks + +By default this will be toggled, when the default exporter component is present +and an exporting is in progress. + +*** + +### sub + +> `protected` **sub**: `Subscription` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L92) + +## Accessors + +### grid + +#### Get Signature + +> **get** **grid**(): [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L61) + +Gets/sets the grid component for the toolbar component. + +##### Deprecated + +since version 17.1.0. No longer required to be set for the Hierarchical Grid child grid template + +##### Remarks + +Usually you should not set this property in the context of the default grid/tree grid. +The only grids that demands this to be set are the hierarchical child grids. For additional +information check the toolbar topic. + +##### Returns + +[`GridType`](../interfaces/GridType.md) + +#### Set Signature + +> **set** **grid**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L68) + +##### Parameters + +###### value + +[`GridType`](../interfaces/GridType.md) + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts#L73) + +Returns the native DOM element of the toolbar component + +##### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarDirective.md new file mode 100644 index 000000000..c3080b1e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarDirective.md @@ -0,0 +1,43 @@ +# Class: IgxGridToolbarDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L97) + +## Constructors + +### Constructor + +> **new IgxGridToolbarDirective**(): `IgxGridToolbarDirective` + +#### Returns + +`IgxGridToolbarDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L98) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_dir`, `ctx`): `ctx is IgxGridToolbarTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L101) + +#### Parameters + +##### \_dir + +`IgxGridToolbarDirective` + +##### ctx + +`unknown` + +#### Returns + +`ctx is IgxGridToolbarTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarExporterComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarExporterComponent.md new file mode 100644 index 000000000..527db74ef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarExporterComponent.md @@ -0,0 +1,313 @@ +# Class: IgxGridToolbarExporterComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L50) + +Provides a pre-configured exporter component for the grid. + +## Remarks + +This component still needs the actual exporter service(s) provided in the DI chain +in order to export something. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridToolbarComponent, IgxGridToolbarActionsComponent + +## Extends + +- `BaseToolbarDirective` + +## Constructors + +### Constructor + +> **new IgxGridToolbarExporterComponent**(): `IgxGridToolbarExporterComponent` + +#### Returns + +`IgxGridToolbarExporterComponent` + +#### Inherited from + +`BaseToolbarDirective.constructor` + +## Properties + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L79) + +Emits an event after the toggle container is closed. + +#### Inherited from + +[`IgxGridToolbarHidingComponent`](IgxGridToolbarHidingComponent.md).[`closed`](IgxGridToolbarHidingComponent.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L73) + +Emits an event before the toggle container is closed. + +#### Inherited from + +[`IgxGridToolbarHidingComponent`](IgxGridToolbarHidingComponent.md).[`closing`](IgxGridToolbarHidingComponent.md#closing) + +*** + +### columnListHeight + +> **columnListHeight**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L29) + +Sets the height of the column list in the dropdown. + +#### Inherited from + +`BaseToolbarDirective.columnListHeight` + +*** + +### columnToggle + +> **columnToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L85) + +Emits when after a column's checked state is changed + +#### Inherited from + +[`IgxGridToolbarHidingComponent`](IgxGridToolbarHidingComponent.md).[`columnToggle`](IgxGridToolbarHidingComponent.md#columntoggle) + +*** + +### exportCSV + +> **exportCSV**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L59) + +Show entry for CSV export. + +*** + +### exportEnded + +> **exportEnded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L90) + +Emitted on successful ending of an export operation. + +*** + +### exportExcel + +> **exportExcel**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L65) + +Show entry for Excel export. + +*** + +### exportPDF + +> **exportPDF**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L71) + +Show entry for PDF export. + +*** + +### exportStarted + +> **exportStarted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L84) + +Emitted when starting an export operation. Re-emitted additionally +by the grid itself. + +*** + +### filename + +> **filename**: `string` = `'ExportedData'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L77) + +The name for the exported file. + +*** + +### isExporting + +> `protected` **isExporting**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L95) + +Indicates whether there is an export in progress. + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L67) + +Emits an event after the toggle container is opened. + +#### Inherited from + +[`IgxGridToolbarHidingComponent`](IgxGridToolbarHidingComponent.md).[`opened`](IgxGridToolbarHidingComponent.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L61) + +Emits an event before the toggle container is opened. + +#### Inherited from + +[`IgxGridToolbarHidingComponent`](IgxGridToolbarHidingComponent.md).[`opening`](IgxGridToolbarHidingComponent.md#opening) + +*** + +### prompt + +> **prompt**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L41) + +The placeholder text for the search input. + +#### Inherited from + +`BaseToolbarDirective.prompt` + +*** + +### title + +> **title**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L35) + +Title text for the column action component + +#### Inherited from + +`BaseToolbarDirective.title` + +*** + +### toolbar + +> `protected` **toolbar**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L23) + +#### Inherited from + +[`IgxGridToolbarHidingComponent`](IgxGridToolbarHidingComponent.md).[`toolbar`](IgxGridToolbarHidingComponent.md#toolbar) + +## Accessors + +### overlaySettings + +#### Get Signature + +> **get** **overlaySettings**(): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L54) + +Returns overlay settings + +##### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Set Signature + +> **set** **overlaySettings**(`overlaySettings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L47) + +Sets overlay settings + +##### Parameters + +###### overlaySettings + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +##### Returns + +`void` + +#### Inherited from + +`BaseToolbarDirective.overlaySettings` + +## Methods + +### export() + +> **export**(`type`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L107) + +Export the grid's data + +#### Parameters + +##### type + +`"excel"` \| `"csv"` \| `"pdf"` + +File type to export + +#### Returns + +`void` + +*** + +### exportClicked() + +> `protected` **exportClicked**(`type`, `toggleRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L97) + +#### Parameters + +##### type + +`"excel"` \| `"csv"` \| `"pdf"` + +##### toggleRef? + +[`IgxToggleDirective`](IgxToggleDirective.md) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarHidingComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarHidingComponent.md new file mode 100644 index 000000000..cd4baf2a4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarHidingComponent.md @@ -0,0 +1,339 @@ +# Class: IgxGridToolbarHidingComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-hiding.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-hiding.component.ts#L32) + +Provides a pre-configured column hiding component for the grid. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridToolbarComponent, IgxGridToolbarActionsComponent + +## Example + +```html + <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding> +``` + +## Extends + +- `BaseToolbarColumnActionsDirective` + +## Constructors + +### Constructor + +> **new IgxGridToolbarHidingComponent**(): `IgxGridToolbarHidingComponent` + +#### Returns + +`IgxGridToolbarHidingComponent` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.constructor` + +## Properties + +### buttonText + +> **buttonText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L189) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.buttonText` + +*** + +### checkAllText + +> **checkAllText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L183) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.checkAllText` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L79) + +Emits an event after the toggle container is closed. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.closed` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L73) + +Emits an event before the toggle container is closed. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.closing` + +*** + +### columnActionsUI + +> `protected` **columnActionsUI**: [`IgxColumnActionsComponent`](IgxColumnActionsComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L191) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnActionsUI` + +*** + +### columnDisplayOrder + +> **columnDisplayOrder**: [`ColumnDisplayOrder`](../type-aliases/ColumnDisplayOrder.md) = `ColumnDisplayOrder.DisplayOrder` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L174) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnDisplayOrder` + +*** + +### columnListHeight + +> **columnListHeight**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L29) + +Sets the height of the column list in the dropdown. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnListHeight` + +*** + +### columnsAreaMaxHeight + +> **columnsAreaMaxHeight**: `string` = `'100%'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L177) + +#### Inherited from + +[`IgxGridToolbarPinningComponent`](IgxGridToolbarPinningComponent.md).[`columnsAreaMaxHeight`](IgxGridToolbarPinningComponent.md#columnsareamaxheight) + +*** + +### columnToggle + +> **columnToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L85) + +Emits when after a column's checked state is changed + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnToggle` + +*** + +### filterCriteria + +> **filterCriteria**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L171) + +#### Inherited from + +[`IgxGridToolbarPinningComponent`](IgxGridToolbarPinningComponent.md).[`filterCriteria`](IgxGridToolbarPinningComponent.md#filtercriteria) + +*** + +### hideFilter + +> **hideFilter**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L168) + +#### Inherited from + +[`IgxGridToolbarPinningComponent`](IgxGridToolbarPinningComponent.md).[`hideFilter`](IgxGridToolbarPinningComponent.md#hidefilter) + +*** + +### indentetion + +> **indentetion**: `number` = `30` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L186) + +#### Inherited from + +[`IgxGridToolbarPinningComponent`](IgxGridToolbarPinningComponent.md).[`indentetion`](IgxGridToolbarPinningComponent.md#indentetion) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L67) + +Emits an event after the toggle container is opened. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.opened` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L61) + +Emits an event before the toggle container is opened. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.opening` + +*** + +### prompt + +> **prompt**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L41) + +The placeholder text for the search input. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.prompt` + +*** + +### title + +> **title**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L35) + +Title text for the column action component + +#### Inherited from + +`BaseToolbarColumnActionsDirective.title` + +*** + +### toolbar + +> `protected` **toolbar**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L23) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.toolbar` + +*** + +### uncheckAllText + +> **uncheckAllText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L180) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.uncheckAllText` + +## Accessors + +### overlaySettings + +#### Get Signature + +> **get** **overlaySettings**(): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L54) + +Returns overlay settings + +##### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Set Signature + +> **set** **overlaySettings**(`overlaySettings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L47) + +Sets overlay settings + +##### Parameters + +###### overlaySettings + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +##### Returns + +`void` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.overlaySettings` + +## Methods + +### checkAll() + +> **checkAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L193) + +#### Returns + +`void` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.checkAll` + +*** + +### uncheckAll() + +> **uncheckAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L197) + +#### Returns + +`void` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.uncheckAll` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarPinningComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarPinningComponent.md new file mode 100644 index 000000000..bb60cc901 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarPinningComponent.md @@ -0,0 +1,339 @@ +# Class: IgxGridToolbarPinningComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-pinning.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-pinning.component.ts#L31) + +Provides a pre-configured column pinning component for the grid. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridToolbarComponent, IgxGridToolbarActionsComponent + +## Example + +```html + <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning> +``` + +## Extends + +- `BaseToolbarColumnActionsDirective` + +## Constructors + +### Constructor + +> **new IgxGridToolbarPinningComponent**(): `IgxGridToolbarPinningComponent` + +#### Returns + +`IgxGridToolbarPinningComponent` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.constructor` + +## Properties + +### buttonText + +> **buttonText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L189) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.buttonText` + +*** + +### checkAllText + +> **checkAllText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L183) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.checkAllText` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L79) + +Emits an event after the toggle container is closed. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.closed` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L73) + +Emits an event before the toggle container is closed. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.closing` + +*** + +### columnActionsUI + +> `protected` **columnActionsUI**: [`IgxColumnActionsComponent`](IgxColumnActionsComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L191) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnActionsUI` + +*** + +### columnDisplayOrder + +> **columnDisplayOrder**: [`ColumnDisplayOrder`](../type-aliases/ColumnDisplayOrder.md) = `ColumnDisplayOrder.DisplayOrder` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L174) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnDisplayOrder` + +*** + +### columnListHeight + +> **columnListHeight**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L29) + +Sets the height of the column list in the dropdown. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnListHeight` + +*** + +### columnsAreaMaxHeight + +> **columnsAreaMaxHeight**: `string` = `'100%'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L177) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnsAreaMaxHeight` + +*** + +### columnToggle + +> **columnToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L85) + +Emits when after a column's checked state is changed + +#### Inherited from + +`BaseToolbarColumnActionsDirective.columnToggle` + +*** + +### filterCriteria + +> **filterCriteria**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L171) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.filterCriteria` + +*** + +### hideFilter + +> **hideFilter**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L168) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.hideFilter` + +*** + +### indentetion + +> **indentetion**: `number` = `30` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L186) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.indentetion` + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L67) + +Emits an event after the toggle container is opened. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.opened` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L61) + +Emits an event before the toggle container is opened. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.opening` + +*** + +### prompt + +> **prompt**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L41) + +The placeholder text for the search input. + +#### Inherited from + +`BaseToolbarColumnActionsDirective.prompt` + +*** + +### title + +> **title**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L35) + +Title text for the column action component + +#### Inherited from + +`BaseToolbarColumnActionsDirective.title` + +*** + +### toolbar + +> `protected` **toolbar**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L23) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.toolbar` + +*** + +### uncheckAllText + +> **uncheckAllText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L180) + +#### Inherited from + +`BaseToolbarColumnActionsDirective.uncheckAllText` + +## Accessors + +### overlaySettings + +#### Get Signature + +> **get** **overlaySettings**(): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L54) + +Returns overlay settings + +##### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Set Signature + +> **set** **overlaySettings**(`overlaySettings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L47) + +Sets overlay settings + +##### Parameters + +###### overlaySettings + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +##### Returns + +`void` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.overlaySettings` + +## Methods + +### checkAll() + +> **checkAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L193) + +#### Returns + +`void` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.checkAll` + +*** + +### uncheckAll() + +> **uncheckAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts#L197) + +#### Returns + +`void` + +#### Inherited from + +`BaseToolbarColumnActionsDirective.uncheckAll` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarTitleComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarTitleComponent.md new file mode 100644 index 000000000..9c0e5782a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridToolbarTitleComponent.md @@ -0,0 +1,29 @@ +# Class: IgxGridToolbarTitleComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L45) + +Provides a way to template the title portion of the toolbar in the grid. + +## Igx Module + +IgxGridToolbarModule + +## Igx Parent + +IgxGridToolbarComponent + +## Example + +```html +<igx-grid-toolbar-title>My custom title</igx-grid-toolbar-title> +``` + +## Constructors + +### Constructor + +> **new IgxGridToolbarTitleComponent**(): `IgxGridToolbarTitleComponent` + +#### Returns + +`IgxGridToolbarTitleComponent` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridTransactionStatePipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridTransactionStatePipe.md new file mode 100644 index 000000000..7a0f6c79d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridTransactionStatePipe.md @@ -0,0 +1,59 @@ +# Class: IgxGridTransactionStatePipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L357) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridTransactionStatePipe**(): `IgxGridTransactionStatePipe` + +#### Returns + +`IgxGridTransactionStatePipe` + +## Methods + +### transform() + +> **transform**(`row_id`, `field`, `rowEditable`, `transactions`, `_`, `__`, `___`): `unknown` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L359) + +#### Parameters + +##### row\_id + +`any` + +##### field + +`string` + +##### rowEditable + +`boolean` + +##### transactions + +`any` + +##### \_ + +`any` + +##### \_\_ + +`any` + +##### \_\_\_ + +`any` + +#### Returns + +`unknown` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridUnmergeActivePipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridUnmergeActivePipe.md new file mode 100644 index 000000000..8e8155502 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridUnmergeActivePipe.md @@ -0,0 +1,51 @@ +# Class: IgxGridUnmergeActivePipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.pipes.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.pipes.ts#L91) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxGridUnmergeActivePipe**(): `IgxGridUnmergeActivePipe` + +#### Returns + +`IgxGridUnmergeActivePipe` + +## Methods + +### transform() + +> **transform**(`collection`, `colsToMerge`, `activeRowIndexes`, `pinned`, `_pipeTrigger`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.pipes.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.pipes.ts#L95) + +#### Parameters + +##### collection + +`any` + +##### colsToMerge + +[`ColumnType`](../interfaces/ColumnType.md)[] + +##### activeRowIndexes + +`number`[] + +##### pinned + +`boolean` + +##### \_pipeTrigger + +`number` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridValidationService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridValidationService.md new file mode 100644 index 000000000..f89a5ad77 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGridValidationService.md @@ -0,0 +1,141 @@ +# Class: IgxGridValidationService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L7) + +## Constructors + +### Constructor + +> **new IgxGridValidationService**(): `IgxGridValidationService` + +#### Returns + +`IgxGridValidationService` + +## Accessors + +### valid + +#### Get Signature + +> **get** **valid**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L19) + +Gets whether state is valid. + +##### Returns + +`boolean` + +## Methods + +### clear() + +> **clear**(`key?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L214) + +Clears validation state by key or all states if none is provided. + +#### Parameters + +##### key? + +`any` + +Optional. The key of the record for which to clear state. + +#### Returns + +`void` + +*** + +### getInvalid() + +> **getInvalid**(): [`IRecordValidationState`](../interfaces/IRecordValidationState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L144) + +Returns all invalid record states. + +#### Returns + +[`IRecordValidationState`](../interfaces/IRecordValidationState.md)[] + +*** + +### isFieldInvalid() + +> **isFieldInvalid**(`formGroup`, `fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L108) + +Checks the validity of the native ngControl + +#### Parameters + +##### formGroup + +`FormGroup` + +##### fieldName + +`string` + +#### Returns + +`boolean` + +*** + +### isFieldValidAfterEdit() + +> **isFieldValidAfterEdit**(`formGroup`, `fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L116) + +Checks the validity of the native ngControl after edit + +#### Parameters + +##### formGroup + +`FormGroup` + +##### fieldName + +`string` + +#### Returns + +`boolean` + +*** + +### markAsTouched() + +> **markAsTouched**(`key`, `field?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-validation.service.ts#L188) + +Marks the associated record or field as touched. + +#### Parameters + +##### key + +`any` + +The id of the record that will be marked as touched. + +##### field? + +`string` + +Optional. The field from the record that will be marked as touched. If not provided all fields will be touched. + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGroupByRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGroupByRow.md new file mode 100644 index 000000000..80a3f106e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGroupByRow.md @@ -0,0 +1,240 @@ +# Class: IgxGroupByRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L541) + +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +## Implements + +- [`RowType`](../interfaces/RowType.md) + +## Properties + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:550](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L550) + +The grid that contains the row. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`grid`](../interfaces/RowType.md#grid) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:545](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L545) + +Returns the row index. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`index`](../interfaces/RowType.md#index) + +*** + +### isGroupByRow + +> **isGroupByRow**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:555](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L555) + +Returns always true, because this is in instance of an IgxGroupByRow. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`isGroupByRow`](../interfaces/RowType.md#isgroupbyrow) + +## Accessors + +### children + +#### Get Signature + +> **get** **children**(): [`RowType`](../interfaces/RowType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:567](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L567) + +Returns the child rows. + +##### Returns + +[`RowType`](../interfaces/RowType.md)[] + +Optional +Contains the child rows of the current row, if there are any. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`children`](../interfaces/RowType.md#children) + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:667](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L667) + +Gets/sets whether the group row is expanded. +```typescript +const groupRowExpanded = groupRow.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:671](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L671) + +Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`expanded`](../interfaces/RowType.md#expanded) + +*** + +### groupRow + +#### Get Signature + +> **get** **groupRow**(): [`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:560](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L560) + +The IGroupByRecord object, representing the group record, if the row is a GroupByRow. + +##### Returns + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`groupRow`](../interfaces/RowType.md#grouprow) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L637) + +Gets whether the row is selected. +Default value is `false`. +```typescript +row.selected = true; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L648) + +Sets whether the row is selected. +Default value is `false`. +```typescript +row.selected = !row.selected; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is selected + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`selected`](../interfaces/RowType.md#selected) + +*** + +### viewIndex + +#### Get Signature + +> **get** **viewIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:579](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L579) + +Returns the view index calculated per the grid page. + +##### Returns + +`number` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`viewIndex`](../interfaces/RowType.md#viewindex) + +## Methods + +### isActive() + +> **isActive**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:675](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L675) + +#### Returns + +`boolean` + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L685) + +Toggles the group row expanded/collapsed state. +```typescript +groupRow.toggle() +``` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGroupedTreeGridSorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGroupedTreeGridSorting.md new file mode 100644 index 000000000..b291dbc6e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGroupedTreeGridSorting.md @@ -0,0 +1,72 @@ +# Class: IgxGroupedTreeGridSorting + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts#L23) + +Represents a class implementing the IGridSortingStrategy interface. +It provides sorting functionality for grid data based on sorting expressions. + +## Extends + +- [`IgxSorting`](IgxSorting.md) + +## Constructors + +### Constructor + +> **new IgxGroupedTreeGridSorting**(): `IgxGroupedTreeGridSorting` + +#### Returns + +`IgxGroupedTreeGridSorting` + +#### Inherited from + +[`IgxSorting`](IgxSorting.md).[`constructor`](IgxSorting.md#constructor) + +## Methods + +### sort() + +> **sort**(`data`, `expressions`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L90) + +Sorts the provided data based on the given sorting expressions. +`data`: The array of data to be sorted. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxSorting`](IgxSorting.md).[`sort`](IgxSorting.md#sort) + +*** + +### instance() + +> `static` **instance**(): `IgxGroupedTreeGridSorting` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts#L26) + +#### Returns + +`IgxGroupedTreeGridSorting` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGrouping.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGrouping.md new file mode 100644 index 000000000..7a2bdabc9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxGrouping.md @@ -0,0 +1,109 @@ +# Class: IgxGrouping + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L164) + +Represents a class implementing the IGridGroupingStrategy interface and extending the IgxSorting class. +It provides a method to group data based on the given grouping state. + +## Extends + +- [`IgxSorting`](IgxSorting.md) + +## Implements + +- [`IGridGroupingStrategy`](../interfaces/IGridGroupingStrategy.md) + +## Constructors + +### Constructor + +> **new IgxGrouping**(): `IgxGrouping` + +#### Returns + +`IgxGrouping` + +#### Inherited from + +[`IgxSorting`](IgxSorting.md).[`constructor`](IgxSorting.md#constructor) + +## Methods + +### groupBy() + +> **groupBy**(`data`, `state`, `grid?`, `groupsRecords?`, `fullResult?`): [`IGroupByResult`](../interfaces/IGroupByResult.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L170) + +Groups the provided data based on the given grouping state. +Returns an object containing the result of the grouping operation. + +#### Parameters + +##### data + +`any`[] + +##### state + +[`IGroupingState`](../interfaces/IGroupingState.md) + +##### grid? + +`any` + +##### groupsRecords? + +`any`[] + +##### fullResult? + +[`IGroupByResult`](../interfaces/IGroupByResult.md) = `...` + +#### Returns + +[`IGroupByResult`](../interfaces/IGroupByResult.md) + +#### Implementation of + +[`IGridGroupingStrategy`](../interfaces/IGridGroupingStrategy.md).[`groupBy`](../interfaces/IGridGroupingStrategy.md#groupby) + +*** + +### sort() + +> **sort**(`data`, `expressions`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L90) + +Sorts the provided data based on the given sorting expressions. +`data`: The array of data to be sorted. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Implementation of + +[`IGridGroupingStrategy`](../interfaces/IGridGroupingStrategy.md).[`sort`](../interfaces/IGridGroupingStrategy.md#sort) + +#### Inherited from + +[`IgxSorting`](IgxSorting.md).[`sort`](IgxSorting.md#sort) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHeaderGroupStylePipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHeaderGroupStylePipe.md new file mode 100644 index 000000000..ba97eeffb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHeaderGroupStylePipe.md @@ -0,0 +1,41 @@ +# Class: IgxHeaderGroupStylePipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/headers/pipes.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/headers/pipes.ts#L20) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxHeaderGroupStylePipe**(): `IgxHeaderGroupStylePipe` + +#### Returns + +`IgxHeaderGroupStylePipe` + +## Methods + +### transform() + +> **transform**(`styles`, `column`, `_`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/headers/pipes.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/headers/pipes.ts#L22) + +#### Parameters + +##### styles + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### \_ + +`number` + +#### Returns + +`object` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalGridComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalGridComponent.md new file mode 100644 index 000000000..852311a4c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalGridComponent.md @@ -0,0 +1,9326 @@ +# Class: IgxHierarchicalGridComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:331](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L331) + +Hierarchical grid + +## Igx Module + +IgxHierarchicalGridModule + +## Extends + +- `IgxHierarchicalGridBaseDirective` + +## Implements + +- [`GridType`](../interfaces/GridType.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxHierarchicalGridComponent**(): `IgxHierarchicalGridComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3500) + +#### Returns + +`IgxHierarchicalGridComponent` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.constructor` + +## Properties + +### \_allowAdvancedFiltering + +> `protected` **\_allowAdvancedFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3175) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._allowAdvancedFiltering` + +*** + +### \_allowFiltering + +> `protected` **\_allowFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3174) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._allowFiltering` + +*** + +### \_autoGeneratedCols + +> `protected` **\_autoGeneratedCols**: [`ColumnType`](../interfaces/ColumnType.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3192) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._autoGeneratedCols` + +*** + +### \_autoGeneratedColsRefs + +> `protected` **\_autoGeneratedColsRefs**: `ComponentRef`\<[`IgxColumnComponent`](IgxColumnComponent.md)\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3193) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._autoGeneratedColsRefs` + +*** + +### \_autoSizeColumnsNotify + +> `protected` **\_autoSizeColumnsNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3185) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._autoSizeColumnsNotify` + +*** + +### \_batchEditing + +> `protected` **\_batchEditing**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3189) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._batchEditing` + +*** + +### \_cdrRequestRepaint + +> `protected` **\_cdrRequestRepaint**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3186) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._cdrRequestRepaint` + +*** + +### \_dataView + +> `protected` **\_dataView**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3194) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._dataView` + +*** + +### \_defaultExpandState + +> `protected` **\_defaultExpandState**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3181) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._defaultExpandState` + +*** + +### \_defaultTargetRecordNumber + +> `protected` **\_defaultTargetRecordNumber**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3179) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._defaultTargetRecordNumber` + +*** + +### \_diTransactions + +> `protected` **\_diTransactions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L177) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._diTransactions` + +*** + +### \_expansionStates + +> `protected` **\_expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3180) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._expansionStates` + +*** + +### \_filterMode + +> `protected` **\_filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) = `FilterMode.quickFilter` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3176) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._filterMode` + +*** + +### \_filterStrategy + +> `protected` **\_filterStrategy**: [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3191) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._filterStrategy` + +*** + +### \_firstAutoResize + +> `protected` **\_firstAutoResize**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3184) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._firstAutoResize` + +*** + +### \_headerFeaturesWidth + +> `protected` **\_headerFeaturesWidth**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3182) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._headerFeaturesWidth` + +*** + +### \_hGridSchema + +> `protected` **\_hGridSchema**: [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3204) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._hGridSchema` + +*** + +### \_init + +> `protected` **\_init**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3183) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._init` + +*** + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3195) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._lastSearchInfo` + +*** + +### \_pinnedRecordIDs + +> `protected` **\_pinnedRecordIDs**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3164) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._pinnedRecordIDs` + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3206) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._resourceStrings` + +*** + +### \_sortingOptions + +> `protected` **\_sortingOptions**: [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3190) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._sortingOptions` + +*** + +### \_summaryRowList + +> `protected` **\_summaryRowList**: `QueryList`\<[`IgxSummaryRowComponent`](IgxSummaryRowComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1795) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._summaryRowList` + +*** + +### \_transactions + +> `protected` **\_transactions**: [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3188) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._transactions` + +*** + +### \_userOutletDirective + +> `protected` **\_userOutletDirective**: [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3187) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._userOutletDirective` + +*** + +### activeNodeChange + +> **activeNodeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1059](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1059) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`activeNodeChange`](../interfaces/GridType.md#activenodechange) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.activeNodeChange` + +*** + +### addRowEmptyTemplate + +> **addRowEmptyTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L263) + +Gets/Sets a custom template for adding row UI when grid is empty. + +#### Example + +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.addRowEmptyTemplate` + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L380) + +Emitted after advanced filtering is performed. + +#### Remarks + +Returns the advanced filtering expressions tree. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTreeChange`](../interfaces/GridType.md#advancedfilteringexpressionstreechange) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.advancedFilteringExpressionsTreeChange` + +*** + +### autoGenerate + +> **autoGenerate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L206) + +Gets/Sets whether to auto-generate the columns. + +#### Remarks + +The default value is false. When set to true, it will override all columns declared through code or in markup. + +#### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.autoGenerate` + +*** + +### autoGenerateExclude + +> **autoGenerateExclude**: `string`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L223) + +Gets/Sets a list of property keys to be excluded from the generated column collection + +#### Remarks + +The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime +unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their +[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. + +#### Example + +```html +<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid> +``` +```typescript +const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.autoGenerateExclude` + +*** + +### baseClass + +> `protected` **baseClass**: `string` = `'igx-grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1813) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.baseClass` + +*** + +### cdr + +> `readonly` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L162) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cdr`](../interfaces/GridType.md#cdr) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cdr` + +*** + +### cellClick + +> **cellClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L494) + +Emitted when a cell is clicked. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellClick`](../interfaces/GridType.md#cellclick) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellClick` + +*** + +### cellEdit + +> **cellEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L640) + +Emitted when cell has been edited. + +#### Remarks + +Event is fired after editing is completed, when the cell is exiting edit mode. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEdit`](../interfaces/GridType.md#celledit) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEdit` + +*** + +### cellEditDone + +> **cellEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L653) + +Emitted after cell has been edited and editing has been committed. + +#### Example + +```html +<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditDone`](../interfaces/GridType.md#celleditdone) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEditDone` + +*** + +### cellEditEnter + +> **cellEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L613) + +Emitted when cell enters edit mode. + +#### Remarks + +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditEnter`](../interfaces/GridType.md#celleditenter) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEditEnter` + +*** + +### cellEditExit + +> **cellEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L625) + +Emitted when cell exits edit mode. + +#### Example + +```html +<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditExit`](../interfaces/GridType.md#celleditexit) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEditExit` + +*** + +### childTemplate + +> `protected` **childTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L384) + +*** + +### clipboardOptions + +> **clipboardOptions**: [`IClipboardOptions`](../interfaces/IClipboardOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L335) + +Controls the copy behavior of the grid. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clipboardOptions` + +*** + +### colResizingService + +> `protected` **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L153) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.colResizingService` + +*** + +### columnInit + +> **columnInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L732) + +Emitted when a column is initialized. + +#### Remarks + +Returns the column object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnInit` + +*** + +### columnMoving + +> **columnMoving**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L937) + +Emitted during the column moving operation. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. This event is cancelable. + +#### Example + +```html +<igx-grid (columnMoving)="moving($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMoving`](../interfaces/GridType.md#columnmoving) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnMoving` + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L950) + +Emitted when column moving ends. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. + +#### Example + +```html +<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingEnd`](../interfaces/GridType.md#columnmovingend) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnMovingEnd` + +*** + +### columnMovingStart + +> **columnMovingStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L924) + +Emitted when column moving starts. + +#### Remarks + +Returns the moved `IgxColumnComponent` object. + +#### Example + +```html +<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingStart`](../interfaces/GridType.md#columnmovingstart) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnMovingStart` + +*** + +### columnPin + +> **columnPin**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L582) + +Emitted before `IgxColumnComponent` is pinned. + +#### Remarks + +The index at which to insert the column may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPin`](../interfaces/GridType.md#columnpin) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnPin` + +*** + +### columnPinned + +> **columnPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L599) + +Emitted after `IgxColumnComponent` is pinned. + +#### Remarks + +The index that the column is inserted at may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPinned`](../interfaces/GridType.md#columnpinned) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnPinned` + +*** + +### columnResized + +> **columnResized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L860) + +Emitted after column is resized. + +#### Remarks + +Returns the `IgxColumnComponent` object's old and new width. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnResized`](../interfaces/GridType.md#columnresized) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnResized` + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L565) + +Emitted when `IgxColumnComponent` is selected. + +#### Example + +```html +<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelectionChanging`](../interfaces/GridType.md#columnselectionchanging) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnSelectionChanging` + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L911) + +Emitted after column visibility is changed. + +#### Remarks + +Args: { column: IgxColumnComponent, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanged`](../interfaces/GridType.md#columnvisibilitychanged) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnVisibilityChanged` + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L898) + +Emitted before column visibility is changed. + +#### Remarks + +Args: { column: any, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanging`](../interfaces/GridType.md#columnvisibilitychanging) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnVisibilityChanging` + +*** + +### contextMenu + +> **contextMenu**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L872) + +Emitted when a cell or row is right clicked. + +#### Remarks + +Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. +```html +<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`contextMenu`](../interfaces/GridType.md#contextmenu) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.contextMenu` + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1129) + +Emitted after the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataChanged` + +*** + +### dataChanging + +> **dataChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1118) + +Emitted before the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataChanging` + +*** + +### dataPreLoad + +> **dataPreLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L77) + +Emitted when a new chunk of data is loaded from virtualization. + +#### Example + +```typescript + <igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (dataPreLoad)="handleEvent()"> + </igx-hierarchical-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataPreLoad` + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L163) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.differs` + +*** + +### displayStyle + +> `protected` **displayStyle**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3452) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.displayStyle` + +*** + +### doubleClick + +> **doubleClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L885) + +Emitted when a cell is double clicked. + +#### Remarks + +Returns the `IgxGridCell` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`doubleClick`](../interfaces/GridType.md#doubleclick) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.doubleClick` + +*** + +### emptyDirectiveTemplate + +> `protected` **emptyDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1713) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyDirectiveTemplate` + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L166) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.envInjector` + +*** + +### expansionStatesChange + +> **expansionStatesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1003) + +Emitted when the rows are expanded or collapsed. + +#### Example + +```html +<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expansionStatesChange` + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L778) + +Emitted before filtering expressions are applied. + +#### Remarks + +Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filtering`](../interfaces/GridType.md#filtering) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filtering` + +*** + +### filteringDone + +> **filteringDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L791) + +Emitted after filtering is performed through the UI. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringDone`](../interfaces/GridType.md#filteringdone) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringDone` + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L366) + +Emitted after filtering is performed. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTreeChange`](../interfaces/GridType.md#filteringexpressionstreechange) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringExpressionsTreeChange` + +*** + +### formGroupCreated + +> **formGroupCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L519) + +Emitted when formGroup is created on edit of row/cell. + +#### Example + +```html +<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`formGroupCreated`](../interfaces/GridType.md#formgroupcreated) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.formGroupCreated` + +*** + +### gridAPI + +> **gridAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L38) + +Represents the grid service type providing API methods for the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridAPI`](../interfaces/GridType.md#gridapi) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridAPI` + +*** + +### gridComputedStyles + +> `protected` **gridComputedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3205) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridComputedStyles` + +*** + +### gridCopy + +> **gridCopy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L991) + +Emitted when a copy operation is executed. + +#### Remarks + +Fired only if copy behavior is enabled through the [`clipboardOptions`][IgxGridBaseDirective#clipboardOptions](IgxGridBaseDirective.md#clipboardoptions). + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridCopy` + +*** + +### gridKeydown + +> **gridKeydown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L964) + +Emitted when keydown is triggered over element inside grid's body. + +#### Remarks + +This event is fired only if the key combination is supported in the grid. +Return the target type, target object and the original event. This event is cancelable. + +#### Example + +```html + <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridKeydown`](../interfaces/GridType.md#gridkeydown) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridKeydown` + +*** + +### gridScroll + +> **gridScroll**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L392) + +Emitted when grid is scrolled horizontally/vertically. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (gridScroll)="onScroll($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridScroll` + +*** + +### hasChildrenKey + +> **hasChildrenKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L51) + +Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator. + +#### Example + +```html +<igx-hierarchical-grid #grid [data]="localData" [hasChildrenKey]="'hasEmployees'"> +</igx-hierarchical-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hasChildrenKey`](../interfaces/GridType.md#haschildrenkey) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hasChildrenKey` + +*** + +### headerCollapsedIndicatorDirectiveTemplate + +> `protected` **headerCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1551) + +The custom template, if any, that should be used when rendering a header collapse indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerCollapsedIndicatorDirectiveTemplate` + +*** + +### headerExpandedIndicatorDirectiveTemplate + +> `protected` **headerExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1520) + +The custom template, if any, that should be used when rendering a header expand indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerExpandedIndicatorDirectiveTemplate` + +*** + +### hierarchicalRecordTemplate + +> `protected` **hierarchicalRecordTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L381) + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L165) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.injector` + +*** + +### loadingDirectiveTemplate + +> `protected` **loadingDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1710) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.loadingDirectiveTemplate` + +*** + +### moving + +> **moving**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L230) + +Controls whether columns moving is enabled in the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moving`](../interfaces/GridType.md#moving) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.moving` + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L40) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigation`](../interfaces/GridType.md#navigation) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.navigation` + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L172) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.overlayService` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L176) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.platform` + +*** + +### rangeSelected + +> **rangeSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1097) + +Emitted when making a range selection. + +#### Remarks + +Range selection can be made either through drag selection or through keyboard selection. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rangeSelected`](../interfaces/GridType.md#rangeselected) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rangeSelected` + +*** + +### rendered + +> **rendered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1101) + +Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rendered` + +*** + +### rowAdd + +> **rowAdd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L847) + +Emmited just before the newly added row is commited. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdd`](../interfaces/GridType.md#rowadd) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowAdd` + +*** + +### rowAdded + +> **rowAdded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L805) + +Emitted when a row is added. + +#### Remarks + +Returns the data for the new `IgxGridRowComponent` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdded`](../interfaces/GridType.md#rowadded) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowAdded` + +*** + +### rowClasses + +> **rowClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L411) + +Sets a conditional class selector to the grid's row element. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class and the value is +either a callback function that returns a boolean, or boolean, like so: +```typescript +callback = (row: RowType) => { return row.selected > 6; } +rowClasses = { 'className' : this.callback }; +``` +```html +<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowClasses` + +*** + +### rowClick + +> **rowClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L507) + +Emitted when a row is clicked. + +#### Remarks + +Returns the `IgxGridRow`. + +#### Example + +```html +<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowClick`](../interfaces/GridType.md#rowclick) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowClick` + +*** + +### rowCollapsedIndicatorDirectiveTemplate + +> `protected` **rowCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1489) + +The custom template, if any, that should be used when rendering a row collapse indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowCollapsedIndicatorDirectiveTemplate` + +*** + +### rowDelete + +> **rowDelete**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L833) + +Emmited when deleting a row. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDelete`](../interfaces/GridType.md#rowdelete) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDelete` + +*** + +### rowDeleted + +> **rowDeleted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L819) + +Emitted when a row is deleted. + +#### Remarks + +Returns an `IRowDataEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDeleted`](../interfaces/GridType.md#rowdeleted) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDeleted` + +*** + +### rowDragEnd + +> **rowDragEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:982](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L982) + +Emitted when dropping a row. + +#### Remarks + +Return the dropped row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragEnd`](../interfaces/GridType.md#rowdragend) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDragEnd` + +*** + +### rowDragStart + +> **rowDragStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L973) + +Emitted when start dragging a row. + +#### Remarks + +Return the dragged row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragStart`](../interfaces/GridType.md#rowdragstart) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDragStart` + +*** + +### rowEdit + +> **rowEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L686) + +Emitted when exiting edit mode for a row. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEdit`](../interfaces/GridType.md#rowedit) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEdit` + +*** + +### rowEditDone + +> **rowEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L703) + +Emitted after exiting edit mode for a row and editing has been committed. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. + +#### Example + +```html +<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditDone`](../interfaces/GridType.md#roweditdone) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditDone` + +*** + +### rowEditEnter + +> **rowEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L668) + +Emitted when a row enters edit mode. + +#### Remarks + +Emitted when [rowEditable]="true". +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditEnter`](../interfaces/GridType.md#roweditenter) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditEnter` + +*** + +### rowEditExit + +> **rowEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L719) + +Emitted when row editing is canceled. + +#### Remarks + +Emits when [rowEditable]="true" & `endEdit(false)` is called. +Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button +in the row editing overlay. + +#### Example + +```html +<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditExit`](../interfaces/GridType.md#roweditexit) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditExit` + +*** + +### rowExpandedIndicatorDirectiveTemplate + +> `protected` **rowExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1458) + +The custom template, if any, that should be used when rendering a row expand indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowExpandedIndicatorDirectiveTemplate` + +*** + +### rowPinned + +> **rowPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1048](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1048) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowPinned` + +*** + +### rowPinning + +> **rowPinning**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1037](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1037) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowPinning` + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L554) + +Emitted when `IgxGridRowComponent` is selected. + +#### Example + +```html +<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectionChanging`](../interfaces/GridType.md#rowselectionchanging) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowSelectionChanging` + +*** + +### rowStyles + +> **rowStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L431) + +Sets conditional style properties on the grid row element. +It accepts an object literal where the keys are +the style properties and the value is an expression to be evaluated. +```typescript +styles = { + background: 'yellow', + color: (row: RowType) => row.selected : 'red': 'white' +} +``` +```html +<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowStyles` + +*** + +### rowToggle + +> **rowToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1026) + +Emitted when the expanded state of a row gets changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowToggle`](../interfaces/GridType.md#rowtoggle) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowToggle` + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L543) + +Emitted when a cell is selected. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selected`](../interfaces/GridType.md#selected) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selected` + +*** + +### selectedRowsChange + +> **selectedRowsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1015) + +Emitted when the rows are selected or deselected. + +#### Example + +```html +<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectedRowsChange` + +*** + +### showExpandAll + +> **showExpandAll**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L65) + +Gets/Sets whether the expand/collapse all button in the header should be rendered. + +#### Remarks + +The default value is false. + +#### Example + +```html +<igx-hierarchical-grid #grid [data]="localData" [showExpandAll]="true"> +</igx-hierarchical-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`showExpandAll`](../interfaces/GridType.md#showexpandall) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.showExpandAll` + +*** + +### snackbarDisplayTime + +> **snackbarDisplayTime**: `number` = `6000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L193) + +Gets/Sets the display time for the row adding snackbar notification. + +#### Remarks + +By default it is 6000ms. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.snackbarDisplayTime` + +*** + +### sorting + +> **sorting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L752) + +Emitted before sorting expressions are applied. + +#### Remarks + +Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sorting` + +*** + +### sortingDone + +> **sortingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L765) + +Emitted after sorting is completed. + +#### Remarks + +Returns the sorting expression. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingDone` + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1072) + +Emitted before sorting is performed. + +#### Remarks + +Returns the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressionsChange`](../interfaces/GridType.md#sortingexpressionschange) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingExpressionsChange` + +*** + +### tbodyContainer + +> `protected` **tbodyContainer**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1324) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.tbodyContainer` + +*** + +### templateRows + +> `protected` **templateRows**: `string` = `'auto auto auto 1fr auto auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3455) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.templateRows` + +*** + +### textHighlightService + +> `protected` **textHighlightService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L171) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.textHighlightService` + +*** + +### toolbarExporting + +> **toolbarExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1086) + +Emitted when an export process is initiated by the user. + +#### Example + +```typescript +toolbarExporting(event: IGridToolbarExportEventArgs){ + const toolbarExporting = event; +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`toolbarExporting`](../interfaces/GridType.md#toolbarexporting) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.toolbarExporting` + +*** + +### transactionFactory + +> `protected` **transactionFactory**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L156) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.transactionFactory` + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `filteringExpressionsTree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L465) + +Gets/Sets a unique values strategy used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### filteringExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Remarks + +Provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering. + +#### Example + +```html +<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`uniqueColumnValuesStrategy`](../interfaces/GridType.md#uniquecolumnvaluesstrategy) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.uniqueColumnValuesStrategy` + +*** + +### validation + +> `readonly` **validation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L150) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validation`](../interfaces/GridType.md#validation) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.validation` + +*** + +### validationStatusChange + +> **validationStatusChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L530) + +Emitted when grid's validation status changes. + +#### Example + +```html +<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationStatusChange`](../interfaces/GridType.md#validationstatuschange) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.validationStatusChange` + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) = `'change'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2063) + +Gets/Sets the trigger for validators used when editing the grid. + +#### Example + +```html +<igx-grid #grid validationTrigger='blur'></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationTrigger`](../interfaces/GridType.md#validationtrigger) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.validationTrigger` + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L164) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.viewRef` + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L158) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.zone` + +## Accessors + +### activeRowIndexes + +#### Get Signature + +> **get** `protected` **activeRowIndexes**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4068) + +##### Returns + +`number`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.activeRowIndexes` + +*** + +### advancedFilteringExpressionsTree + +#### Get Signature + +> **get** **advancedFilteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:428](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L428) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **advancedFilteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L432) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTree`](../interfaces/GridType.md#advancedfilteringexpressionstree) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.advancedFilteringExpressionsTree` + +*** + +### allowAdvancedFiltering + +#### Get Signature + +> **get** **allowAdvancedFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2336) + +Gets/Sets a value indicating whether the advanced filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowAdvancedFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2340) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowAdvancedFiltering`](../interfaces/GridType.md#allowadvancedfiltering) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.allowAdvancedFiltering` + +*** + +### allowFiltering + +#### Get Signature + +> **get** **allowFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2310) + +Gets/Sets if the filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2314) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowFiltering`](../interfaces/GridType.md#allowfiltering) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.allowFiltering` + +*** + +### ariaColCount + +#### Get Signature + +> **get** `protected` **ariaColCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1816) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.ariaColCount` + +*** + +### ariaRowCount + +#### Get Signature + +> **get** `protected` **ariaRowCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1821) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.ariaRowCount` + +*** + +### batchEditing + +#### Get Signature + +> **get** **batchEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L106) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **batchEditing**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L110) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`batchEditing`](../interfaces/GridType.md#batchediting) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.batchEditing` + +*** + +### cellMergeMode + +#### Get Signature + +> **get** **cellMergeMode**(): [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2901) + +Gets/Sets cell merge mode. + +##### Returns + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +#### Set Signature + +> **set** **cellMergeMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2905) + +##### Parameters + +###### value + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellMergeMode`](../interfaces/GridType.md#cellmergemode) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellMergeMode` + +*** + +### cellSelection + +#### Get Signature + +> **get** **cellSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2882) + +Gets/Sets cell selection mode. + +##### Remarks + +By default the cell selection mode is multiple + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **cellSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2886) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellSelection`](../interfaces/GridType.md#cellselection) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellSelection` + +*** + +### columns + +#### Get Signature + +> **get** **columns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4613) + +Gets an array of `IgxColumnComponent`s. + +##### Example + +```typescript +const colums = this.grid.columns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columns`](../interfaces/GridType.md#columns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columns` + +*** + +### columnSelection + +#### Get Signature + +> **get** **columnSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2943) + +Gets/Sets column selection mode + +##### Remarks + +By default the row selection mode is none + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **columnSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2947) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelection`](../interfaces/GridType.md#columnselection) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnSelection` + +*** + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2187) + +Gets/Sets the default width of the columns. + +##### Example + +```html +<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2190) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnWidth` + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:486](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L486) + +Returns an array of data set to the `IgxHierarchicalGridComponent`. +```typescript +let filteredData = this.grid.filteredData; +``` + +##### Memberof + +IgxHierarchicalGridComponent + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:472](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L472) + +Gets/Sets the array of data that populates the component. +```html +<igx-hierarchical-grid [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid> +``` + +##### Memberof + +IgxHierarchicalGridComponent + +##### Parameters + +###### value + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`data`](../interfaces/GridType.md#data) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.data` + +*** + +### dataCloneStrategy + +#### Get Signature + +> **get** **dataCloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L320) + +Gets/Sets the data clone strategy of the grid when in edit mode. + +##### Example + +```html + <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> +``` + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **dataCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L324) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataCloneStrategy`](../interfaces/GridType.md#dataclonestrategy) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataCloneStrategy` + +*** + +### dataRowList + +#### Get Signature + +> **get** **dataRowList**(): `QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2606) + +A list of currently rendered `IgxGridRowComponent`'s. + +##### Example + +```typescript +const dataList = this.grid.dataRowList; +``` + +##### Returns + +`QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataRowList`](../interfaces/GridType.md#datarowlist) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataRowList` + +*** + +### dataView + +#### Get Signature + +> **get** **dataView**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5809) + +Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. + +##### Example + +```typescript + const dataView = this.grid.dataView; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataView`](../interfaces/GridType.md#dataview) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataView` + +*** + +### defaultRowHeight + +#### Get Signature + +> **get** **defaultRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4513) + +Gets the default row height. + +##### Example + +```typescript +const rowHeigh = this.grid.defaultRowHeight; +``` + +##### Returns + +`number` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`defaultRowHeight`](../interfaces/GridType.md#defaultrowheight) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.defaultRowHeight` + +*** + +### dragGhostCustomTemplate + +#### Get Signature + +> **get** **dragGhostCustomTemplate**(): `TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1234) + +Gets the custom template, if any, used for row drag ghost. + +##### Returns + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +#### Set Signature + +> **set** **dragGhostCustomTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1251) + +Sets a custom template for the row drag ghost. +```html +<ng-template #template igxRowDragGhost> + <igx-icon>menu</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragGhostCustomTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dragGhostCustomTemplate` + +*** + +### dragIndicatorIconTemplate + +#### Get Signature + +> **get** **dragIndicatorIconTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2711](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2711) + +The custom template, if any, that should be used when rendering the row drag indicator icon + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **dragIndicatorIconTemplate**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2728) + +Sets a custom template that should be used when rendering the row drag indicator icon. +```html +<ng-template #template igxDragIndicatorIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragIndicatorIconTemplate = this.template; +``` + +##### Parameters + +###### val + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +The template for drag indicator icons. Could be of any type + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dragIndicatorIconTemplate`](../interfaces/GridType.md#dragindicatoricontemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dragIndicatorIconTemplate` + +*** + +### emptyFilteredGridMessage + +#### Get Signature + +> **get** **emptyFilteredGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2273) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyFilteredGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2269) + +Gets/Sets the message displayed when there are no records and the grid is filtered. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyFilteredGridMessage` + +*** + +### emptyGridMessage + +#### Get Signature + +> **get** **emptyGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2208) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2205) + +Get/Sets the message displayed when there are no records. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyGridMessage` + +*** + +### emptyGridTemplate + +#### Get Signature + +> **get** **emptyGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L247) + +Gets/Sets a custom template when empty. + +##### Example + +```html +<ng-template igxGridEmpty> + <!-- content to show when the grid is empty --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **emptyGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L250) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyGridTemplate` + +*** + +### excelStyleHeaderIconTemplate + +#### Get Signature + +> **get** **excelStyleHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1586) + +Gets the excel style header icon. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **excelStyleHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1603) + +Sets the excel style header icon. +```html +<ng-template #template igxExcelStyleHeaderIcon> +<igx-icon>filter_alt</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.excelStyleHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`excelStyleHeaderIconTemplate`](../interfaces/GridType.md#excelstyleheadericontemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.excelStyleHeaderIconTemplate` + +*** + +### expandChildren + +#### Get Signature + +> **get** **expandChildren**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:548](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L548) + +Gets if all immediate children of the `IgxHierarchicalGridComponent` previously have been set to be expanded/collapsed. +If previously set and some rows have been manually expanded/collapsed it will still return the last set value. +```typescript +const expanded = this.grid.expandChildren; +``` + +##### Memberof + +IgxHierarchicalGridComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expandChildren**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:534](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L534) + +Sets if all immediate children of the `IgxHierarchicalGridComponent` should be expanded/collapsed. +Default value is false. +```html +<igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" [expandChildren]="true"></igx-hierarchical-grid> +``` + +##### Memberof + +IgxHierarchicalGridComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +`IgxHierarchicalGridBaseDirective.expandChildren` + +*** + +### expansionStates + +#### Get Signature + +> **get** **expansionStates**(): `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4381) + +Gets/Sets a list of key-value pairs [row ID, expansion state]. + +##### Remarks + +Includes only states that differ from the default one. +Supports two-way binding. + +##### Example + +```html +<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> +</igx-grid> +``` + +##### Returns + +`Map`\<`any`, `boolean`\> + +#### Set Signature + +> **set** **expansionStates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4386) + +##### Parameters + +###### value + +`Map`\<`any`, `boolean`\> + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`expansionStates`](../interfaces/GridType.md#expansionstates) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expansionStates` + +*** + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3359) + +Returns an array of objects containing the filtered data. + +##### Example + +```typescript +let filteredData = this.grid.filteredData; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredData`](../interfaces/GridType.md#filtereddata) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteredData` + +*** + +### filteredSortedData + +#### Get Signature + +> **get** **filteredSortedData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3371) + +Returns an array containing the filtered sorted data. + +##### Example + +```typescript +const filteredSortedData = this.grid1.filteredSortedData; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredSortedData`](../interfaces/GridType.md#filteredsorteddata) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteredSortedData` + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1874) + +Gets/Sets the filtering state. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way binding. + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **filteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1878) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTree`](../interfaces/GridType.md#filteringexpressionstree) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringExpressionsTree` + +*** + +### filteringLogic + +#### Get Signature + +> **get** **filteringLogic**(): [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1853) + +Gets/Sets the filtering logic of the `IgxGridComponent`. + +##### Remarks + +The default is AND. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> +``` + +##### Returns + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +#### Set Signature + +> **set** **filteringLogic**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1857) + +##### Parameters + +###### value + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringLogic`](../interfaces/GridType.md#filteringlogic) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringLogic` + +*** + +### filterMode + +#### Get Signature + +> **get** **filterMode**(): [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2362](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2362) + +Gets/Sets the filter mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it's set to FilterMode.quickFilter. + +##### Returns + +[`FilterMode`](../type-aliases/FilterMode.md) + +#### Set Signature + +> **set** **filterMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2366) + +The filter mode for the grid. It can be quick filter of excel-style filter + +##### Parameters + +###### value + +[`FilterMode`](../type-aliases/FilterMode.md) + +##### Returns + +`void` + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterMode`](../interfaces/GridType.md#filtermode) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filterMode` + +*** + +### filterStrategy + +#### Get Signature + +> **get** **filterStrategy**(): [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2456) + +Gets/Sets the filtering strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid> +``` + +##### Returns + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +#### Set Signature + +> **set** **filterStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2460) + +##### Parameters + +###### classRef + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterStrategy`](../interfaces/GridType.md#filterstrategy) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filterStrategy` + +*** + +### foreignKey + +#### Get Signature + +> **get** **foreignKey**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:610](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L610) + +Gets the unique identifier of the parent row. It may be a `string` or `number` if `primaryKey` of the +parent grid is set or an object reference of the parent record otherwise. +```typescript +const foreignKey = this.grid.foreignKey; +``` + +##### Memberof + +IgxHierarchicalGridComponent + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`foreignKey`](../interfaces/GridType.md#foreignkey) + +*** + +### hasCellsToMerge + +#### Get Signature + +> **get** `protected` **hasCellsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4082) + +##### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hasCellsToMerge` + +*** + +### hasVisibleColumns + +#### Set Signature + +> **set** **hasVisibleColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5533) + +Indicates whether the grid has columns that are shown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether the grid has columns that are shown + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hasVisibleColumns`](../interfaces/GridType.md#hasvisiblecolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hasVisibleColumns` + +*** + +### headerCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **headerCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1557) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1574) + +Sets the row collapse indicator template. +```html +<ng-template igxHeaderCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerCollapsedIndicatorTemplate`](../interfaces/GridType.md#headercollapsedindicatortemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerCollapsedIndicatorTemplate` + +*** + +### headerExpandedIndicatorTemplate + +#### Get Signature + +> **get** **headerExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1526) + +Gets the header expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1543) + +Sets the header expand indicator template. +```html +<ng-template igxHeaderExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerExpandedIndicatorTemplate`](../interfaces/GridType.md#headerexpandedindicatortemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerExpandedIndicatorTemplate` + +*** + +### headerHierarchyExpander + +#### Get Signature + +> **get** `protected` **headerHierarchyExpander**(): `ElementRef`\<`HTMLElement`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L387) + +##### Returns + +`ElementRef`\<`HTMLElement`\> + +*** + +### headSelectorTemplate + +#### Get Signature + +> **get** **headSelectorTemplate**(): `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2620) + +Gets the header row selector template. + +##### Returns + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **headSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2637) + +Sets the header row selector template. +```html +<ng-template #template igxHeadSelector let-headContext> +{{ headContext.selectedCount }} / {{ headContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headSelectorTemplate`](../interfaces/GridType.md#headselectortemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headSelectorTemplate` + +*** + +### height + +#### Get Signature + +> **get** **height**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2109) + +Gets/Sets the height. + +##### Example + +```html +<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **height**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2113) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.height` + +*** + +### hiddenColumnsCount + +#### Get Signature + +> **get** **hiddenColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2808) + +Gets the number of hidden columns. + +##### Example + +```typescript +const hiddenCol = this.grid.hiddenColumnsCount; +`` + +##### Returns + +`number` + +Represents the count of only the hidden (not visible) columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hiddenColumnsCount`](../interfaces/GridType.md#hiddencolumnscount) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hiddenColumnsCount` + +*** + +### hideRowSelectors + +#### Get Signature + +> **get** **hideRowSelectors**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2027](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2027) + +Gets/Sets if the row selectors are hidden. + +##### Remarks + +By default row selectors are shown + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideRowSelectors**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2031](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2031) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hideRowSelectors` + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L455) + +Gets/Sets the value of the `id` attribute. + +##### Remarks + +If not provided it will be automatically generated. + +##### Example + +```html +<igx-hierarchical-grid [id]="'igx-hgrid-1'" [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid> +``` + +##### Returns + +`string` + +Represents the unique identifier of the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`id`](../interfaces/GridType.md#id) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.id` + +*** + +### isCustomSetRowHeight + +#### Get Signature + +> **get** `protected` **isCustomSetRowHeight**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3340) + +##### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.isCustomSetRowHeight` + +*** + +### isLoading + +#### Get Signature + +> **get** **isLoading**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2235) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isLoading**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2222) + +Gets/Sets whether the grid is going to show a loading indicator. + +##### Example + +```html +<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`isLoading`](../interfaces/GridType.md#isloading) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.isLoading` + +*** + +### lastSearchInfo + +#### Get Signature + +> **get** **lastSearchInfo**(): [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2995](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2995) + +Represents the last search information. + +##### Returns + +[`ISearchInfo`](../interfaces/ISearchInfo.md) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`lastSearchInfo`](../interfaces/GridType.md#lastsearchinfo) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.lastSearchInfo` + +*** + +### loadingGridTemplate + +#### Get Signature + +> **get** **loadingGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L280) + +Gets/Sets a custom template when loading. + +##### Example + +```html +<ng-template igxGridLoading> + <!-- content to show when the grid is loading --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **loadingGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L283) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.loadingGridTemplate` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1970) + +Gets/Sets the locale. + +##### Remarks + +If not set, returns browser's language. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1974) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`locale`](../interfaces/GridType.md#locale) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.locale` + +*** + +### mergedDataInView + +#### Get Signature + +> **get** `protected` **mergedDataInView**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3986) + +##### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.mergedDataInView` + +*** + +### mergeStrategy + +#### Get Signature + +> **get** **mergeStrategy**(): [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2491) + +Gets/Sets the merge strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid> +``` + +##### Returns + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +#### Set Signature + +> **set** **mergeStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2494) + +##### Parameters + +###### value + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`mergeStrategy`](../interfaces/GridType.md#mergestrategy) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.mergeStrategy` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4485) + +Gets the native element. + +##### Example + +```typescript +const nativeEl = this.grid.nativeElement. +``` + +##### Returns + +`any` + +Represents the native HTML element itself + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`nativeElement`](../interfaces/GridType.md#nativeelement) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.nativeElement` + +*** + +### outlet + +#### Get Signature + +> **get** **outlet**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L91) + +Gets the outlet used to attach the grid's overlays to. + +##### Remarks + +If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. + +##### Returns + +`any` + +#### Set Signature + +> **set** **outlet**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L99) + +Sets the outlet used to attach the grid's overlays to. + +##### Parameters + +###### val + +`any` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`outlet`](../interfaces/GridType.md#outlet) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.outlet` + +*** + +### pagingMode + +#### Get Signature + +> **get** **pagingMode**(): [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1987](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1987) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Returns + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +#### Set Signature + +> **set** **pagingMode**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1991) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Parameters + +###### val + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +##### Returns + +`void` + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pagingMode`](../interfaces/GridType.md#pagingmode) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pagingMode` + +*** + +### pinnedColumns + +#### Get Signature + +> **get** **pinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4625) + +Gets an array of the pinned `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumns`](../interfaces/GridType.md#pinnedcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinnedColumns` + +*** + +### pinnedColumnsCount + +#### Get Signature + +> **get** **pinnedColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2815) + +Gets the number of pinned columns. + +##### Returns + +`number` + +Represents the count of only the pinned columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumnsCount`](../interfaces/GridType.md#pinnedcolumnscount) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinnedColumnsCount` + +*** + +### pinnedEndColumns + +#### Get Signature + +> **get** **pinnedEndColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4653) + +Gets an array of the pinned to the right `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedEndColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedEndColumns`](../interfaces/GridType.md#pinnedendcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinnedEndColumns` + +*** + +### pinnedRows + +#### Get Signature + +> **get** **pinnedRows**(): [`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4666) + +Gets an array of the pinned `IgxRowComponent`s. + +##### Example + +```typescript +const pinnedRow = this.grid.pinnedRows; +``` + +##### Returns + +[`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedRows`](../interfaces/GridType.md#pinnedrows) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinnedRows` + +*** + +### pinnedStartColumns + +#### Get Signature + +> **get** **pinnedStartColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4641) + +Gets an array of the pinned to the left `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedStartColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedStartColumns`](../interfaces/GridType.md#pinnedstartcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinnedStartColumns` + +*** + +### pinning + +#### Get Signature + +> **get** **pinning**(): [`IPinningConfig`](../interfaces/IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2290) + +Gets/Sets the initial pinning configuration. + +##### Remarks + +Allows to apply pinning the columns to the start or the end. +Note that pinning to both sides at a time is not allowed. + +##### Example + +```html +<igx-grid [pinning]="pinningConfig"></igx-grid> +``` + +##### Returns + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +#### Set Signature + +> **set** **pinning**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2293) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +##### Parameters + +###### value + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +##### Returns + +`void` + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinning`](../interfaces/GridType.md#pinning) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinning` + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L443) + +Gets/Sets the primary key. + +##### Example + +```html +<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **primaryKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L447) + +Represents the unique primary key used for identifying rows in the grid + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the unique primary key used for identifying rows in the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`primaryKey`](../interfaces/GridType.md#primarykey) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.primaryKey` + +*** + +### renderData + +#### Get Signature + +> **get** `protected` **renderData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3446) + +##### Returns + +`any`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.renderData` + +*** + +### renderedActualRowHeight + +#### Get Signature + +> **get** `protected` **renderedActualRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7829) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.renderedActualRowHeight` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings`\<`IAGridResourceStrings`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:597](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L597) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Returns + +`PrefixedResourceStrings`\<`IAGridResourceStrings`, `any`\> + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L587) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`resourceStrings`](../interfaces/GridType.md#resourcestrings) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.resourceStrings` + +*** + +### rowAddTextTemplate + +#### Get Signature + +> **get** **rowAddTextTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1403) + +Gets the row add text template. + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **rowAddTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1419) + +Sets the row add text template. +```html +<ng-template #template igxRowAddText> +Adding Row +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowAddTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowAddTextTemplate` + +*** + +### rowCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **rowCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1495) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1512) + +Sets the row collapse indicator template. +```html +<ng-template igxRowCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowCollapsedIndicatorTemplate`](../interfaces/GridType.md#rowcollapsedindicatortemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowCollapsedIndicatorTemplate` + +*** + +### rowDraggable + +#### Get Signature + +> **get** **rowDraggable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2045](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2045) + +Gets/Sets whether rows can be moved. + +##### Example + +```html +<igx-grid #grid [rowDraggable]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowDraggable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2049](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2049) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDraggable`](../interfaces/GridType.md#rowdraggable) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDraggable` + +*** + +### rowEditable + +#### Get Signature + +> **get** **rowEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2086) + +Gets/Sets whether the rows are editable. + +##### Remarks + +By default it is set to false. + +##### Example + +```html +<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2090) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditable`](../interfaces/GridType.md#roweditable) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditable` + +*** + +### rowEditActionsTemplate + +#### Get Signature + +> **get** **rowEditActionsTemplate**(): `TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1433) + +Gets the row edit actions template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditActionsTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1450) + +Sets the row edit actions template. +```html +<ng-template #template igxRowEditActions let-endRowEdit> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditActionsTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditActionsTemplate` + +*** + +### rowEditTextTemplate + +#### Get Signature + +> **get** **rowEditTextTemplate**(): `TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1373) + +Gets the row edit text template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1389) + +Sets the row edit text template. +```html +<ng-template #template igxRowEditText let-rowChangesCount> +Changes: {{rowChangesCount}} +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditTextTemplate` + +*** + +### rowExpandedIndicatorTemplate + +#### Get Signature + +> **get** **rowExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1464) + +Gets the row expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1481) + +Sets the row expand indicator template. +```html +<ng-template igxRowExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowExpandedIndicatorTemplate`](../interfaces/GridType.md#rowexpandedindicatortemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowExpandedIndicatorTemplate` + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2166) + +Gets/Sets the row height. + +##### Example + +```html +<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2170) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +##### Parameters + +###### value + +`string` \| `number` + +##### Returns + +`void` + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowHeight`](../interfaces/GridType.md#rowheight) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowHeight` + +*** + +### rowList + +#### Get Signature + +> **get** **rowList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2585) + +A list of `IgxGridRowComponent`. + +##### Example + +```typescript +const rowList = this.grid.rowList; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowList`](../interfaces/GridType.md#rowlist) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowList` + +*** + +### rowSelection + +#### Get Signature + +> **get** **rowSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2922) + +Gets/Sets row selection mode + +##### Remarks + +By default the row selection mode is 'none' +Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **rowSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2926) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelection`](../interfaces/GridType.md#rowselection) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowSelection` + +*** + +### rowSelectorTemplate + +#### Get Signature + +> **get** **rowSelectorTemplate**(): `TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2653) + +Gets the row selector template. + +##### Returns + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **rowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2670) + +Sets a custom template for the row selectors. +```html +<ng-template #template igxRowSelector let-rowContext> + <igx-checkbox [checked]="rowContext.selected"></igx-checkbox> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectorTemplate`](../interfaces/GridType.md#rowselectortemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowSelectorTemplate` + +*** + +### schema + +#### Get Signature + +> **get** **schema**(): [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L572) + +##### Returns + +[`EntityType`](../interfaces/EntityType.md)[] + +#### Set Signature + +> **set** **schema**(`entities`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:567](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L567) + +Gets/Sets the schema for the hierarchical grid. +This schema defines the structure and properties of the data displayed in the grid. +@Input() + +##### Remarks + +This property is required in remote data filtering scenarios. + +##### Example + +```typescript +const schema = this.grid.schema; +this.grid.schema = [{ name: 'Products', fields: [...], childEntities: [...] }]; +``` + +##### Parameters + +###### entities + +[`EntityType`](../interfaces/EntityType.md)[] + +An array of EntityType objects representing the grid's schema. + +##### Returns + +`void` + +*** + +### selectedCells + +#### Get Signature + +> **get** **selectedCells**(): [`CellType`](../interfaces/CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L808) + +Returns an array of the selected `IgxGridCell`s. + +##### Example + +```typescript +const selectedCells = this.grid.selectedCells; +``` + +##### Returns + +[`CellType`](../interfaces/CellType.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedCells`](../interfaces/GridType.md#selectedcells) + +*** + +### selectedRows + +#### Get Signature + +> **get** **selectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2543) + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **selectedRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2539](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2539) + +Gets/Sets the current selection state. + +##### Remarks + +Represents the selected rows' IDs (primary key or rowData) + +##### Example + +```html +<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid> +``` + +##### Parameters + +###### rowIDs + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedRows`](../interfaces/GridType.md#selectedrows) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectedRows` + +*** + +### selectRowOnClick + +#### Get Signature + +> **get** **selectRowOnClick**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5822) + +Gets/Sets whether clicking over a row should select/deselect it + +##### Remarks + +By default it is set to true + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectRowOnClick**(`enabled`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5826) + +##### Parameters + +###### enabled + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRowOnClick`](../interfaces/GridType.md#selectrowonclick) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectRowOnClick` + +*** + +### shouldGenerate + +#### Get Signature + +> **get** **shouldGenerate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2252) + +Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid + +##### Remarks + +This will allow to bind the grid to remote data and having auto-generated columns at the same time. +Note that after generating the columns, this property would be disabled to avoid re-creating +columns each time a new data is assigned. + +##### Example + +```typescript + this.grid.shouldGenerate = true; +``` + +##### Deprecated + +in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **shouldGenerate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2256) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.shouldGenerate` + +*** + +### shouldResize + +#### Get Signature + +> **get** `protected` **shouldResize**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5574) + +##### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.shouldResize` + +*** + +### showSummaryOnCollapse + +#### Get Signature + +> **get** **showSummaryOnCollapse**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2438) + +Controls whether the summary row is visible when groupBy/parent row is collapsed. + +##### Example + +```html +<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible +when the groupBy/parent row is collapsed. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showSummaryOnCollapse**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2442) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.showSummaryOnCollapse` + +*** + +### sortAscendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortAscendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1619) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortAscendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1636) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. +```html +<ng-template #template igxSortAscendingHeaderIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortAscendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortAscendingHeaderIconTemplate`](../interfaces/GridType.md#sortascendingheadericontemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortAscendingHeaderIconTemplate` + +*** + +### sortDescendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortDescendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1648) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortDescendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1665) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. +```html +<ng-template #template igxSortDescendingHeaderIcon> + <igx-icon>expand_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortDescendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortDescendingHeaderIconTemplate`](../interfaces/GridType.md#sortdescendingheadericontemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortDescendingHeaderIconTemplate` + +*** + +### sortHeaderIconTemplate + +#### Get Signature + +> **get** **sortHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1680) + +Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1697) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. +```html +<ng-template #template igxSortHeaderIcon> + <igx-icon>unfold_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortHeaderIconTemplate`](../interfaces/GridType.md#sortheadericontemplate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortHeaderIconTemplate` + +*** + +### sortingExpressions + +#### Get Signature + +> **get** **sortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2787](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2787) + +Gets/Sets the sorting state. + +##### Remarks + +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid> +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Set Signature + +> **set** **sortingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2791) + +##### Parameters + +###### value + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressions`](../interfaces/GridType.md#sortingexpressions) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingExpressions` + +*** + +### sortingOptions + +#### Get Signature + +> **get** **sortingOptions**(): [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2520) + +##### Returns + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +#### Set Signature + +> **set** **sortingOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2512) + +Gets/Sets the sorting options - single or multiple sorting. +Accepts an `ISortingOptions` object with any of the `mode` properties. + +##### Example + +```typescript +const _sortingOptions: ISortingOptions = { + mode: 'single' +} +```html +<igx-grid [sortingOptions]="sortingOptions"><igx-grid> +``` + +##### Parameters + +###### value + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingOptions`](../interfaces/GridType.md#sortingoptions) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingOptions` + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2473) + +Gets/Sets the sorting strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid> +``` + +##### Returns + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2477) + +##### Parameters + +###### value + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortStrategy`](../interfaces/GridType.md#sortstrategy) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortStrategy` + +*** + +### summaryCalculationMode + +#### Get Signature + +> **get** **summaryCalculationMode**(): [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2413) + +Gets/Sets the summary calculation mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. + +##### Returns + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +#### Set Signature + +> **set** **summaryCalculationMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2417) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +##### Parameters + +###### value + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +##### Returns + +`void` + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryCalculationMode`](../interfaces/GridType.md#summarycalculationmode) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.summaryCalculationMode` + +*** + +### summaryPosition + +#### Get Signature + +> **get** **summaryPosition**(): [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2393) + +Gets/Sets the summary position. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is bottom. + +##### Returns + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +#### Set Signature + +> **set** **summaryPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2397) + +Represents the position of summaries: 'top', 'bottom' + +##### Parameters + +###### value + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +##### Returns + +`void` + +Represents the position of summaries: 'top', 'bottom' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryPosition`](../interfaces/GridType.md#summaryposition) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.summaryPosition` + +*** + +### summaryRowHeight + +#### Get Signature + +> **get** **summaryRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L299) + +##### Returns + +`number` + +#### Set Signature + +> **set** **summaryRowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L291) + +Get/Set IgxSummaryRow height + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryRowHeight`](../interfaces/GridType.md#summaryrowheight) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.summaryRowHeight` + +*** + +### totalCalcWidth + +#### Get Signature + +> **get** `protected` **totalCalcWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3442) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.totalCalcWidth` + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L520) + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`count`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:516](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L516) + +Gets/Sets the total number of records in the data source. + +##### Remarks + +This property is required for remote grid virtualization to function when it is bound to remote data. + +##### Example + +```typescript +const itemCount = this.grid1.totalItemCount; +this.grid1.totalItemCount = 55; +``` + +##### Parameters + +###### count + +`number` + +##### Returns + +`void` + +*** + +### totalRecords + +#### Get Signature + +> **get** **totalRecords**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4760) + +Returns the total number of records. + +##### Remarks + +Only functions when paging is enabled. + +##### Example + +```typescript +const totalRecords = this.grid.totalRecords; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalRecords**(`total`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4764) + +##### Parameters + +###### total + +`number` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.totalRecords` + +*** + +### transactions + +#### Get Signature + +> **get** **transactions**(): [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2848) + +Get transactions service for the grid. + +##### Returns + +[`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Represents the transaction service for the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`transactions`](../interfaces/GridType.md#transactions) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.transactions` + +*** + +### unpinnedColumns + +#### Get Signature + +> **get** **unpinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4678) + +Gets an array of unpinned `IgxColumnComponent`s. + +##### Example + +```typescript +const unpinnedColumns = this.grid.unpinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are not pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinnedColumns`](../interfaces/GridType.md#unpinnedcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.unpinnedColumns` + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3596) + +Returns the state of the grid virtualization. + +##### Remarks + +Includes the start index and how many records are rendered. + +##### Example + +```typescript +const gridVirtState = this.grid1.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`virtualizationState`](../interfaces/GridType.md#virtualizationstate) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.virtualizationState` + +*** + +### visibleColumns + +#### Get Signature + +> **get** **visibleColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4741) + +Returns an array of visible `IgxColumnComponent`s. + +##### Example + +```typescript +const visibleColumns = this.grid.visibleColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`visibleColumns`](../interfaces/GridType.md#visiblecolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.visibleColumns` + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2139) + +Gets/Sets the width of the grid. + +##### Example + +```typescript +let gridWidth = this.grid.width; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2143) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.width` + +## Methods + +### \_addRowForIndex() + +> `protected` **\_addRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6590) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._addRowForIndex` + +*** + +### \_createColComponent() + +> `protected` **\_createColComponent**(`col`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L196) + +#### Parameters + +##### col + +`any` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._createColComponent` + +*** + +### \_createColGroupComponent() + +> `protected` **\_createColGroupComponent**(`col`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L175) + +#### Parameters + +##### col + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md) + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._createColGroupComponent` + +*** + +### \_createColumn() + +> `protected` **\_createColumn**(`col`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L165) + +#### Parameters + +##### col + +`any` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._createColumn` + +*** + +### \_restoreVirtState() + +> `protected` **\_restoreVirtState**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6717](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6717) + +#### Parameters + +##### row + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._restoreVirtState` + +*** + +### \_shouldAutoSize() + +> `protected` **\_shouldAutoSize**(`renderedHeight`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:1203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L1203) + +#### Parameters + +##### renderedHeight + +`any` + +#### Returns + +`boolean` + +#### Overrides + +`IgxHierarchicalGridBaseDirective._shouldAutoSize` + +*** + +### addRow() + +> **addRow**(`data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4941) + +Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source. + +#### Parameters + +##### data + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.addRow(record); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.addRow` + +*** + +### allowResetOfColumnsToMerge() + +> `protected` **allowResetOfColumnsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3974) + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.allowResetOfColumnsToMerge` + +*** + +### autoSizeColumnsInView() + +> `protected` **autoSizeColumnsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7583) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.autoSizeColumnsInView` + +*** + +### beginAddRowById() + +> **beginAddRowById**(`rowID`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6570](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6570) + +Enters add mode by spawning the UI under the specified row by rowID. + +#### Parameters + +##### rowID + +`any` + +The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view + +##### asChild? + +`boolean` + +Whether the record should be added as a child. Only applicable to igxTreeGrid. + +#### Returns + +`void` + +#### Remarks + +If null is passed as rowID, the row adding UI is spawned as the first record in the data view + +#### Example + +```typescript +this.grid.beginAddRowById('ALFKI'); +this.grid.beginAddRowById('ALFKI', true); +this.grid.beginAddRowById(null); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.beginAddRowById` + +*** + +### beginAddRowByIndex() + +> **beginAddRowByIndex**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6628) + +Enters add mode by spawning the UI at the specified index. + +#### Parameters + +##### index + +`number` + +The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length + +#### Returns + +`void` + +#### Remarks + +Accepted values for index are integers from 0 to this.grid.dataView.length + +#### Example + +```typescript +this.grid.beginAddRowByIndex(0); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.beginAddRowByIndex` + +*** + +### beginAddRowForIndex() + +> `protected` **beginAddRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6645) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.beginAddRowForIndex` + +*** + +### buildDataView() + +> `protected` **buildDataView**(`_data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7763) + +#### Parameters + +##### \_data + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.buildDataView` + +*** + +### changeRowEditingOverlayStateOnScroll() + +> `protected` **changeRowEditingOverlayStateOnScroll**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6726](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6726) + +#### Parameters + +##### row + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.changeRowEditingOverlayStateOnScroll` + +*** + +### checkContainerSizeChange() + +> `protected` **checkContainerSizeChange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7269) + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.checkContainerSizeChange` + +*** + +### checkPrimaryKeyField() + +> `protected` **checkPrimaryKeyField**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7068) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.checkPrimaryKeyField` + +*** + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5906) + +Deselect selected cells. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearCellSelection(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearCellSelection`](../interfaces/GridType.md#clearcellselection) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearCellSelection` + +*** + +### clearFilter() + +> **clearFilter**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5235) + +If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +Otherwise clears the filtering state of all `IgxColumnComponent`s. + +#### Example + +```typescript +this.grid.clearFilter(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearFilter` + +*** + +### clearSearch() + +> **clearSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5485) + +Removes all the highlights in the cell. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearSearch(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearSearch` + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5250) + +If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +otherwise clears the sorting state of all `IgxColumnComponent`. + +#### Example + +```typescript +this.grid.clearSort(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearSort`](../interfaces/GridType.md#clearsort) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearSort` + +*** + +### closeAdvancedFilteringDialog() + +> **closeAdvancedFilteringDialog**(`applyChanges`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6457) + +Closes the advanced filtering dialog. + +#### Parameters + +##### applyChanges + +`boolean` + +indicates whether the changes should be applied + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.closeAdvancedFilteringDialog` + +*** + +### collapseAll() + +> **collapseAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4416) + +Collapses all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.collapseAll(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.collapseAll` + +*** + +### collapseRow() + +> **collapseRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4447) + +Collapses the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.collapseRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`collapseRow`](../interfaces/GridType.md#collapserow) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.collapseRow` + +*** + +### deleteRow() + +> **deleteRow**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4964) + +Removes the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +`any` + +#### Remarks + +Requires that the `primaryKey` property is set. +The method accept rowSelector as a parameter, which is the rowID. + +#### Example + +```typescript +this.grid1.deleteRow(0); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deleteRow`](../interfaces/GridType.md#deleterow) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deleteRow` + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6069](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6069) + +Deselects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllColumns`](../interfaces/GridType.md#deselectallcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectAllColumns` + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5890) + +Deselects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.deselectAllRows(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllRows`](../interfaces/GridType.md#deselectallrows) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectAllRows` + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6043](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6043) + +Deselect specified columns by field. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectColumns(['ID','Name']); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectColumns`](../interfaces/GridType.md#deselectcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectColumns` + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5854) + +Deselect specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectRows([1,2,5]); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectRows`](../interfaces/GridType.md#deselectrows) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectRows` + +*** + +### disableSummaries() + +> **disableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5216) + +Disable summaries for the specified column. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Examples + +```typescript +grid.disableSummaries('ProductName'); +``` + +```typescript +grid.disableSummaries([{ fieldName: 'ProductName' }]); +``` + +#### Remarks + +Disable summaries for the listed columns. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.disableSummaries` + +*** + +### enableSummaries() + +> **enableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5194) + +Enables summaries for the specified column and applies your customSummary. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Remarks + +If you do not provide the customSummary, then the default summary for the column data type will be applied. + +#### Examples + +```typescript +grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); +``` +Enable summaries for the listed columns. + +```typescript +grid.enableSummaries('ProductName'); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.enableSummaries` + +*** + +### endEdit() + +> **endEdit**(`commit?`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6534](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6534) + +Finishes the row transactions on the current row and returns whether the grid editing was canceled. + +#### Parameters + +##### commit? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Remarks + +If `commit === true`, passes them from the pending state to the data (or transaction service) + +#### Example + +```html +<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.endEdit` + +*** + +### evaluateLoadingState() + +> `protected` **evaluateLoadingState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6741) + +Should be called when data and/or isLoading input changes so that the overlay can be +hidden/shown based on the current value of shouldOverlayLoading + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.evaluateLoadingState` + +*** + +### expandAll() + +> **expandAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4403) + +Expands all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.expandAll(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expandAll` + +*** + +### expandRow() + +> **expandRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4432) + +Expands the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.expandRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expandRow` + +*** + +### extractDataFromColumnsSelection() + +> `protected` **extractDataFromColumnsSelection**(`source`, `formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7637) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.extractDataFromColumnsSelection` + +*** + +### extractDataFromSelection() + +> `protected` **extractDataFromSelection**(`source`, `formatters?`, `headers?`, `columnData?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7444) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +##### columnData? + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.extractDataFromSelection` + +*** + +### filter() + +> **filter**(`name`, `value`, `conditionOrExpressionTree?`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5157) + +Filters a single `IgxColumnComponent`. + +#### Parameters + +##### name + +`string` + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### ignoreCase? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +public filter(term) { + this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); +} +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filter` + +*** + +### ~~filterGlobal()~~ + +> **filterGlobal**(`value`, `condition`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5174) + +Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. + +#### Parameters + +##### value + +`any` + +##### condition + +`any` + +##### ignoreCase? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); +``` + +#### Deprecated + +in version 19.0.0. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filterGlobal` + +*** + +### findNext() + +> **findNext**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5418) + +Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findNext("financial"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.findNext` + +*** + +### findPrev() + +> **findPrev**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5435) + +Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findPrev("financial"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.findPrev` + +*** + +### generateDataFields() + +> `protected` **generateDataFields**(`data`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:1148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L1148) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`string`[] + +#### Overrides + +`IgxHierarchicalGridBaseDirective.generateDataFields` + +*** + +### getCellByColumn() + +> **getCellByColumn**(`rowIndex`, `columnField`): [`CellType`](../interfaces/CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:823](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L823) + +Returns a `CellType` object that matches the conditions. + +#### Parameters + +##### rowIndex + +`number` + +##### columnField + +`string` + +#### Returns + +[`CellType`](../interfaces/CellType.md) + +#### Example + +```typescript +const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); +``` + +*** + +### getCellByKey() + +> **getCellByKey**(`rowSelector`, `columnField`): [`CellType`](../interfaces/CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L843) + +Returns a `CellType` object that matches the conditions. + +#### Parameters + +##### rowSelector + +`any` + +match any rowID + +##### columnField + +`string` + +#### Returns + +[`CellType`](../interfaces/CellType.md) + +#### Remarks + +Requires that the primaryKey property is set. + +#### Example + +```typescript +grid.getCellByKey(1, 'index'); +``` + +*** + +### getChildGrid() + +> `protected` **getChildGrid**(`path`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L215) + +#### Parameters + +##### path + +[`IPathSegment`](../interfaces/IPathSegment.md)[] + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getChildGrid` + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4704) + +Returns the `IgxColumnComponent` by field name. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Example + +```typescript +const myCol = this.grid1.getColumnByName("ID"); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByName`](../interfaces/GridType.md#getcolumnbyname) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getColumnByName` + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4708) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByVisibleIndex`](../interfaces/GridType.md#getcolumnbyvisibleindex) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getColumnByVisibleIndex` + +*** + +### getColumnList() + +> `protected` **getColumnList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:1185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L1185) + +#### Returns + +`any` + +#### Overrides + +`IgxHierarchicalGridBaseDirective.getColumnList` + +*** + +### getGridsForIsland() + +> `protected` **getGridsForIsland**(`rowIslandID`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L211) + +#### Parameters + +##### rowIslandID + +`string` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getGridsForIsland` + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4689) + +Gets the `width` to be set on `IgxGridHeaderGroupComponent`. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`string` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getHeaderGroupWidth`](../interfaces/GridType.md#getheadergroupwidth) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getHeaderGroupWidth` + +*** + +### getMergeCellOffset() + +> `protected` **getMergeCellOffset**(`rowData`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3655) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getMergeCellOffset` + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6272) + +Returns `ICellPosition` which defines the next cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getNextCell`](../interfaces/GridType.md#getnextcell) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getNextCell` + +*** + +### getPinnedEndWidth() + +> **getPinnedEndWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5735) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedEndWidth(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getPinnedEndWidth` + +*** + +### getPinnedStartWidth() + +> **getPinnedStartWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5712) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedStartWidth(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getPinnedStartWidth` + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6308) + +Returns `ICellPosition` which defines the previous cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getPreviousCell`](../interfaces/GridType.md#getpreviouscell) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getPreviousCell` + +*** + +### getRowByIndex() + +> **getRowByIndex**(`index`): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:755](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L755) + +Returns the `RowType` by index. + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Example + +```typescript +const myRow = this.grid1.getRowByIndex(1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getRowByIndex`](../interfaces/GridType.md#getrowbyindex) + +*** + +### getRowByKey() + +> **getRowByKey**(`key`): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:771](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L771) + +Returns the `RowType` by key. + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Example + +```typescript +const myRow = this.grid1.getRowByKey(1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getRowByKey`](../interfaces/GridType.md#getrowbykey) + +*** + +### getRowData() + +> **getRowData**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5090) + +Returns the data that is contained in the row component. + +#### Parameters + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`any` + +#### Remarks + +If the primary key is not specified the row selector match the row data. + +#### Example + +```typescript +const data = grid.getRowData(94741); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getRowData` + +*** + +### getSelectableColumnsAt() + +> `protected` **getSelectableColumnsAt**(`index`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7568](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7568) + +#### Parameters + +##### index + +`any` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectableColumnsAt` + +*** + +### getSelectedColumnsData() + +> **getSelectedColumnsData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6094](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6094) + +Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectedColumnsData` + +*** + +### getSelectedData() + +> **getSelectedData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5986) + +Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectedData` + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5974) + +Get the currently selected ranges in the grid. + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getSelectedRanges`](../interfaces/GridType.md#getselectedranges) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectedRanges` + +*** + +### horizontalScrollHandler() + +> `protected` **horizontalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7808) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.horizontalScrollHandler` + +*** + +### isRecordPinnedByIndex() + +> **isRecordPinnedByIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3634) + +Returns whether the record is pinned or not. + +#### Parameters + +##### rowIndex + +`number` + +Index of the record in the `filteredSortedData` collection. + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.isRecordPinnedByIndex` + +*** + +### markForCheck() + +> **markForCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4926) + +Triggers change detection for the `IgxGridComponent`. +Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. +May degrade performance if used when not needed, or if misused: +```typescript +// DON'Ts: +// don't call markForCheck from inside a loop +// don't call markForCheck when a primitive has changed +grid.data.forEach(rec => { + rec = newValue; + grid.markForCheck(); +}); + +// DOs +// call markForCheck after updating a nested property +grid.data.forEach(rec => { + rec.nestedProp1.nestedProp2 = newValue; +}); +grid.markForCheck(); +``` + +#### Returns + +`void` + +#### Example + +```typescript +grid.markForCheck(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.markForCheck` + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4849) + +Places a column before or after the specified target column. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### target + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### pos? + +[`DropPosition`](../enumerations/DropPosition.md) = `DropPosition.AfterDropTarget` + +#### Returns + +`void` + +#### Example + +```typescript +grid.moveColumn(column, target); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moveColumn`](../interfaces/GridType.md#movecolumn) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.moveColumn` + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColIndex?`, `cb?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6224) + +Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColIndex? + +`number` = `-1` + +##### cb? + +(`args`) => `void` + +#### Returns + +`void` + +#### Remarks + +Also can execute a custom logic over the target element, +through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } + +#### Example + +```typescript + this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigateTo`](../interfaces/GridType.md#navigateto) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.navigateTo` + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6437) + +Opens the advanced filtering dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`openAdvancedFilteringDialog`](../interfaces/GridType.md#openadvancedfilteringdialog) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.openAdvancedFilteringDialog` + +*** + +### pinColumn() + +> **pinColumn**(`columnName`, `index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5287) + +Pins a column by field name. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Remarks + +Returns whether the operation is successful. + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinColumn` + +*** + +### pinRow() + +> **pinRow**(`rowID`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L851) + +Pin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### index? + +`number` + +The index at which to insert the row in the pinned collection. + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.pinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinRow`](../interfaces/GridType.md#pinrow) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.pinRow` + +*** + +### recalculateAutoSizes() + +> **recalculateAutoSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4723](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4723) + +Recalculates all widths of columns that have size set to `auto`. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.recalculateAutoSizes(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.recalculateAutoSizes` + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5401) + +Recalculates grid width/height dimensions. + +#### Returns + +`void` + +#### Remarks + +Should be run when changing DOM elements dimentions manually that affect the grid's size. + +#### Example + +```typescript +this.grid.reflow(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`reflow`](../interfaces/GridType.md#reflow) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.reflow` + +*** + +### refreshSearch() + +> **refreshSearch**(`updateActiveInfo?`, `endEdit?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5450) + +Reapplies the existing search. + +#### Parameters + +##### updateActiveInfo? + +`boolean` + +##### endEdit? + +`boolean` = `true` + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the last search. + +#### Example + +```typescript +this.grid.refreshSearch(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`refreshSearch`](../interfaces/GridType.md#refreshsearch) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.refreshSearch` + +*** + +### resetNotifyChanges() + +> `protected` **resetNotifyChanges**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6829) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.resetNotifyChanges` + +*** + +### resizeNotifyHandler() + +> `protected` **resizeNotifyHandler**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:1156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L1156) + +#### Returns + +`void` + +*** + +### selectAllColumns() + +> **selectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6082) + +Selects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectAllColumns` + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5872) + +Selects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.selectAllRows(); +this.grid.selectAllRows(false); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectAllRows`](../interfaces/GridType.md#selectallrows) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectAllRows` + +*** + +### selectColumns() + +> **selectColumns**(`columns`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6015) + +Select specified columns. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectColumns(['ID','Name'], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectColumns`](../interfaces/GridType.md#selectcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectColumns` + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6000](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6000) + +Get current selected columns. + +#### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Example + +Returns an array with selected columns +```typescript +const selectedColumns = this.grid.selectedColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedColumns`](../interfaces/GridType.md#selectedcolumns) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectedColumns` + +*** + +### selectRange() + +> **selectRange**(`arg`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5934) + +Select range(s) of cells between certain rows and columns of the grid. + +#### Parameters + +##### arg + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) \| [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRange`](../interfaces/GridType.md#selectrange) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectRange` + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5840) + +Select specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRows([1,2,5], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRows`](../interfaces/GridType.md#selectrows) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectRows` + +*** + +### shouldRecreateColumns() + +> `protected` **shouldRecreateColumns**(`oldData`, `newData`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8177) + +#### Parameters + +##### oldData + +`any`[] + +##### newData + +`any`[] + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.shouldRecreateColumns` + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5109) + +Sort a single `IgxColumnComponent`. + +#### Parameters + +##### expression + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Remarks + +Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. + +#### Example + +```typescript +this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sort`](../interfaces/GridType.md#sort) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sort` + +*** + +### subscribeToTransactions() + +> `protected` **subscribeToTransactions**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6668) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.subscribeToTransactions` + +*** + +### switchTransactionService() + +> `protected` **switchTransactionService**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6656) + +#### Parameters + +##### val + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.switchTransactionService` + +*** + +### toggleColumnVisibility() + +> **toggleColumnVisibility**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4358](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4358) + +Toggles the specified column's visibility. + +#### Parameters + +##### args + +[`IColumnVisibilityChangedEventArgs`](../interfaces/IColumnVisibilityChangedEventArgs.md) + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.toggleColumnVisibility({ + column: this.grid1.columns[0], + newValue: true +}); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.toggleColumnVisibility` + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4463) + +Toggles the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.toggleRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.toggleRow` + +*** + +### transactionStatusUpdate() + +> `protected` **transactionStatusUpdate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6674](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6674) + +#### Parameters + +##### event + +[`StateUpdateEvent`](../interfaces/StateUpdateEvent.md) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.transactionStatusUpdate` + +*** + +### unpinColumn() + +> **unpinColumn**(`columnName`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5302) + +Unpins a column by field name. Returns whether the operation is successful. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.unpinColumn` + +*** + +### unpinRow() + +> **unpinRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:875](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts#L875) + +Unpin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.unpinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinRow`](../interfaces/GridType.md#unpinrow) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.unpinRow` + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5016](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5016) + +Updates the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### value + +`any` + +the new value which is to be set. + +##### rowSelector + +`any` + +corresponds to rowID. + +##### column + +`string` + +corresponds to column field. + +#### Returns + +`void` + +#### Remarks + +Requires that the `primaryKey` property is set. + +#### Example + +```typescript +this.gridWithPK.updateCell('Updated', 1, 'ProductName'); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateCell`](../interfaces/GridType.md#updatecell) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateCell` + +*** + +### updateDefaultRowHeight() + +> `protected` **updateDefaultRowHeight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8096](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8096) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateDefaultRowHeight` + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5061](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5061) + +Updates the `IgxGridRowComponent` + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`void` + +#### Remarks + +The row is specified by +rowSelector parameter and the data source record with the passed value. +This method will apply requested update only if primary key is specified in the grid. + +#### Example + +```typescript +grid.updateRow({ + ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') + }, 1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateRow`](../interfaces/GridType.md#updaterow) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateRow` + +*** + +### updateScrollThrottle() + +> `protected` **updateScrollThrottle**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3990) + +#### Parameters + +##### cells + +`number` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateScrollThrottle` + +*** + +### verticalScrollHandler() + +> `protected` **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7783](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7783) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.verticalScrollHandler` + +*** + +### viewDetachHandler() + +> `protected` **viewDetachHandler**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6408) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.viewDetachHandler` + +*** + +### writeToData() + +> `protected` **writeToData**(`rowIndex`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6713) + +#### Parameters + +##### rowIndex + +`number` + +##### value + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.writeToData` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalGridRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalGridRow.md new file mode 100644 index 000000000..7fc1f8fde --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalGridRow.md @@ -0,0 +1,615 @@ +# Class: IgxHierarchicalGridRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L497) + +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +## Extends + +- `BaseRow` + +## Implements + +- [`RowType`](../interfaces/RowType.md) + +## Properties + +### \_data? + +> `protected` `optional` **\_data?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L14) + +#### Inherited from + +`BaseRow._data` + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:502](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L502) + +Represent the grid instance, the row belongs to + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`grid`](../interfaces/RowType.md#grid) + +#### Inherited from + +`BaseRow.grid` + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:503](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L503) + +The index of the row within the grid + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`index`](../interfaces/RowType.md#index) + +#### Inherited from + +`BaseRow.index` + +## Accessors + +### addRowUI + +#### Get Signature + +> **get** **addRowUI**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L46) + +Gets if this represents add row UI + +```typescript +let isAddRow = row.addRowUI; +``` + +##### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`addRowUI`](../interfaces/RowType.md#addrowui) + +#### Inherited from + +`BaseRow.addRowUI` + +*** + +### cells + +#### Get Signature + +> **get** **cells**(): [`CellType`](../interfaces/CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L531) + +Gets the rendered cells in the row component. + +##### Returns + +[`CellType`](../interfaces/CellType.md)[] + +Optional +A list or an array of cells, that belong to the row + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`cells`](../interfaces/RowType.md#cells) + +#### Overrides + +`BaseRow.cells` + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L70) + +The data record that populates the row. + +```typescript +let rowData = row.data; +``` + +##### Returns + +`any` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`data`](../interfaces/RowType.md#data) + +#### Inherited from + +`BaseRow.data` + +*** + +### deleted + +#### Get Signature + +> **get** **deleted**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L173) + +Returns if the row is in delete state. + +##### Returns + +`boolean` + +Optional +Indicates whether the row is marked for deletion. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`deleted`](../interfaces/RowType.md#deleted) + +#### Inherited from + +`BaseRow.deleted` + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L188) + +Gets whether the row is disabled. +A disabled row represents a ghost placeholder created by row pinning. + +##### Returns + +`boolean` + +Optional +Indicates whether the current row is disabled + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`disabled`](../interfaces/RowType.md#disabled) + +#### Inherited from + +`BaseRow.disabled` + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L128) + +Gets the row expanded/collapsed state. + +```typescript +const isExpanded = row.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L139) + +Expands/collapses the row. + +```typescript +row.expanded = true; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`expanded`](../interfaces/RowType.md#expanded) + +#### Inherited from + +`BaseRow.expanded` + +*** + +### hasChildren + +#### Get Signature + +> **get** **hasChildren**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L512) + +Returns true if row islands exist. + +##### Returns + +`boolean` + +Optional +Indicates whether the current row has any child rows + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`hasChildren`](../interfaces/RowType.md#haschildren) + +#### Overrides + +`BaseRow.hasChildren` + +*** + +### inEditMode + +#### Get Signature + +> **get** **inEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L86) + +Returns if the row is currently in edit mode. + +##### Returns + +`boolean` + +Optional +Indicates whether the row is currently being edited. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`inEditMode`](../interfaces/RowType.md#ineditmode) + +#### Inherited from + +`BaseRow.inEditMode` + +*** + +### key + +#### Get Signature + +> **get** **key**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L33) + +Gets the row key. +A row in the grid is identified either by: +- primaryKey data value, +- the whole rowData, if the primaryKey is omitted. + +```typescript +let rowKey = row.key; +``` + +##### Returns + +`any` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`key`](../interfaces/RowType.md#key) + +#### Inherited from + +`BaseRow.key` + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L102) + +Gets whether the row is pinned. +Default value is `false`. +```typescript +const isPinned = row.pinned; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L113) + +Sets whether the row is pinned. +Default value is `false`. +```typescript +row.pinned = !row.pinned; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is pinned. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`pinned`](../interfaces/RowType.md#pinned) + +#### Inherited from + +`BaseRow.pinned` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L150) + +Gets whether the row is selected. +Default value is `false`. +```typescript +row.selected = true; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L161) + +Sets whether the row is selected. +Default value is `false`. +```typescript +row.selected = !row.selected; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is selected + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`selected`](../interfaces/RowType.md#selected) + +#### Inherited from + +`BaseRow.selected` + +*** + +### validation + +#### Get Signature + +> **get** **validation**(): [`IGridValidationState`](../interfaces/IGridValidationState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L58) + +Gets the validation status and errors, if any. +```typescript +let validation = row.validation; +let errors = validation.errors; +``` + +##### Returns + +[`IGridValidationState`](../interfaces/IGridValidationState.md) + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`validation`](../interfaces/RowType.md#validation) + +#### Inherited from + +`BaseRow.validation` + +*** + +### viewIndex + +#### Get Signature + +> **get** **viewIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L519) + +Returns the view index calculated per the grid page. + +##### Returns + +`number` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`viewIndex`](../interfaces/RowType.md#viewindex) + +#### Overrides + +`BaseRow.viewIndex` + +## Methods + +### delete() + +> **delete**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L258) + +Removes the specified row from the grid's data source. +This method emits `onRowDeleted` event. + +```typescript +// delete the third selected row from the grid +this.grid.selectedRows[2].delete(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`delete`](../interfaces/RowType.md#delete) + +#### Inherited from + +`BaseRow.delete` + +*** + +### pin() + +> **pin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L213) + +Pins the specified row. +This method emits `onRowPinning` event. + +```typescript +// pin the selected row from the grid +this.grid.selectedRows[0].pin(); +``` + +#### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`pin`](../interfaces/RowType.md#pin) + +#### Inherited from + +`BaseRow.pin` + +*** + +### unpin() + +> **unpin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L226) + +Unpins the specified row. +This method emits `onRowPinning` event. + +```typescript +// unpin the selected row from the grid +this.grid.selectedRows[0].unpin(); +``` + +#### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`unpin`](../interfaces/RowType.md#unpin) + +#### Inherited from + +`BaseRow.unpin` + +*** + +### update() + +> **update**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L239) + +Updates the specified row object and the data source record with the passed value. + +```typescript +// update the second selected row's value +let newValue = "Apple"; +this.grid.selectedRows[1].update(newValue); +``` + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`update`](../interfaces/RowType.md#update) + +#### Inherited from + +`BaseRow.update` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalTransactionFactory.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalTransactionFactory.md new file mode 100644 index 000000000..4b4caeee2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHierarchicalTransactionFactory.md @@ -0,0 +1,51 @@ +# Class: IgxHierarchicalTransactionFactory + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L49) + +Factory service for instantiating HierarchicalTransactionServices + +## Extends + +- [`IgxFlatTransactionFactory`](IgxFlatTransactionFactory.md) + +## Constructors + +### Constructor + +> **new IgxHierarchicalTransactionFactory**(): `IgxHierarchicalTransactionFactory` + +#### Returns + +`IgxHierarchicalTransactionFactory` + +#### Inherited from + +[`IgxFlatTransactionFactory`](IgxFlatTransactionFactory.md).[`constructor`](IgxFlatTransactionFactory.md#constructor) + +## Methods + +### create() + +> **create**(`type`): [`HierarchicalTransactionService`](../interfaces/HierarchicalTransactionService.md)\<`HierarchicalTransaction`, `HierarchicalState`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L57) + +Creates a new HierarchialTransaction service instance depending on the specified type. + +#### Parameters + +##### type + +[`TRANSACTION_TYPE`](../enumerations/TRANSACTION_TYPE.md) + +The type of the transaction + +#### Returns + +[`HierarchicalTransactionService`](../interfaces/HierarchicalTransactionService.md)\<`HierarchicalTransaction`, `HierarchicalState`\> + +a new instance of HierarchialTransaction<HierarchialTransaction, HierarchialState> + +#### Overrides + +[`IgxFlatTransactionFactory`](IgxFlatTransactionFactory.md).[`create`](IgxFlatTransactionFactory.md#create) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHintDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHintDirective.md new file mode 100644 index 000000000..008dbb6dc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxHintDirective.md @@ -0,0 +1,116 @@ +# Class: IgxHintDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts#L12) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxHintDirective**(): `IgxHintDirective` + +#### Returns + +`IgxHintDirective` + +## Properties + +### isPositionEnd + +> **isPositionEnd**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts#L44) + +Sets/gets whether the hint position is at the end. +Default value is `false`. +```typescript +@ViewChild('hint', {read: IgxHintDirective}) +public igxHint: IgxHintDirective; +this.igxHint.isPositionEnd = true; +``` +```typescript +let isHintPositionEnd = this.igxHint.isPositionEnd; +``` + +#### Memberof + +IgxHintDirective + +*** + +### isPositionStart + +> **isPositionStart**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts#L28) + +Sets/gets whether the hint position is at the start. +Default value is `false`. +```typescript +@ViewChild('hint', {read: IgxHintDirective}) +public igxHint: IgxHintDirective; +this.igxHint.isPositionStart = true; +``` +```typescript +let isHintPositionStart = this.igxHint.isPositionStart; +``` + +#### Memberof + +IgxHintDirective + +## Accessors + +### position + +#### Get Signature + +> **get** **position**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts#L76) + +Gets the position of the hint. +```typescript +@ViewChild('hint', {read: IgxHintDirective}) +public igxHint: IgxHintDirective; +let hintPosition = this.igxHint.position; +``` + +##### Memberof + +IgxHintDirective + +##### Returns + +`string` + +#### Set Signature + +> **set** **position**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts#L59) + +Sets the position of the hint. +```html +<igx-input-group> + <input igxInput type="text"/> + <igx-hint #hint [position]="'start'">IgxHint displayed at the start</igx-hint> +</igx-input-group> +``` + +##### Memberof + +IgxHintDirective + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconButtonDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconButtonDirective.md new file mode 100644 index 000000000..f786691e6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconButtonDirective.md @@ -0,0 +1,201 @@ +# Class: IgxIconButtonDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts#L23) + +The IgxIconButtonDirective provides a way to use an icon as a fully functional button. + +## Example + +```html +<button type="button" igxIconButton="outlined"> + <igx-icon>home</igx-icon> +</button> +``` + +## Extends + +- `IgxButtonBaseDirective` + +## Constructors + +### Constructor + +> **new IgxIconButtonDirective**(): `IgxIconButtonDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts#L26) + +#### Returns + +`IgxIconButtonDirective` + +#### Overrides + +`IgxButtonBaseDirective.constructor` + +## Properties + +### buttonClick + +> **buttonClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L35) + +Emitted when the button is clicked. + +#### Inherited from + +`IgxButtonBaseDirective.buttonClick` + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L91) + +Enables/disables the button. + +#### Example + +```html +<button igxButton="fab" disabled></button> +``` + +#### Inherited from + +`IgxButtonBaseDirective.disabled` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L27) + +#### Inherited from + +`IgxButtonBaseDirective.element` + +*** + +### focused + +> `protected` **focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L79) + +Sets/gets whether the button component is on focus. +Default value is `false`. +```typescript +this.button.focus = true; +``` +```typescript +let isFocused = this.button.focused; +``` + +#### Inherited from + +`IgxButtonBaseDirective.focused` + +*** + +### role + +> **role**: `string` = `'button'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L47) + +Sets/gets the `role` attribute. + +#### Example + +```typescript +this.button.role = 'navbutton'; +let buttonRole = this.button.role; +``` + +#### Inherited from + +`IgxButtonBaseDirective.role` + +## Accessors + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L143) + +Returns the underlying DOM element. + +##### Returns + +`any` + +#### Inherited from + +`IgxButtonBaseDirective.nativeElement` + +*** + +### type + +#### Set Signature + +> **set** **type**(`type`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts#L52) + +Sets the type of the icon button. + +##### Example + +```html +<button type="button" igxIconButton="flat"></button> +``` + +##### Parameters + +###### type + +[`IgxIconButtonType`](../type-aliases/IgxIconButtonType.md) + +##### Returns + +`void` + +## Methods + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L112) + +#### Returns + +`void` + +#### Inherited from + +`IgxButtonBaseDirective.ngAfterViewInit` + +*** + +### ngOnDestroy() + +> **ngOnDestroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button-base.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button-base.ts#L123) + +#### Returns + +`void` + +#### Inherited from + +`IgxButtonBaseDirective.ngOnDestroy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconComponent.md new file mode 100644 index 000000000..6abdb5583 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconComponent.md @@ -0,0 +1,300 @@ +# Class: IgxIconComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L34) + +Icon provides a way to include material icons to markup + +## Igx Module + +IgxIconModule + +## Igx Theme + +igx-icon-theme + +## Igx Keywords + +icon, picture + +## Igx Group + +Display + +## Remarks + +The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons +support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance +of the icon. + +## Example + +```html +<igx-icon family="filter-icons" active="true">home</igx-icon> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxIconComponent**(): `IgxIconComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L118) + +#### Returns + +`IgxIconComponent` + +## Properties + +### active + +> **active**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L116) + +An + +#### Input + +property that allows you to disable the `active` property. By default it's applied. + +#### Example + +```html +<igx-icon [active]="false">settings</igx-icon> +``` + +*** + +### ariaHidden + +> **ariaHidden**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L83) + +The `aria-hidden` attribute of the icon. + By default is set to 'true'. + +*** + +### el + +> **el**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L35) + +*** + +### family + +> **family**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L94) + +An + +#### Input + +property that sets the value of the `family`. By default it's "material". + +#### Example + +```html +<igx-icon family="material">settings</igx-icon> +``` + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L105) + +Set the `name` of the icon. + +#### Example + +```html +<igx-icon name="contains" family="filter-icons"></igx-icon> +``` + +## Accessors + +### elementClasses + +#### Get Signature + +> **get** `protected` **elementClasses**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L45) + +##### Returns + +`string` + +*** + +### getActive + +#### Get Signature + +> **get** **getActive**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L193) + +An accessor that returns the value of the active property. + +##### Example + +```typescript +@ViewChild("MyIcon") +public icon: IgxIconComponent; +ngAfterViewInit() { + let iconActive = this.icon.getActive; +} +``` + +##### Returns + +`boolean` + +*** + +### getFamily + +#### Get Signature + +> **get** **getFamily**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L177) + +An accessor that returns the value of the family property. + +##### Example + +```typescript + @ViewChild("MyIcon") +public icon: IgxIconComponent; +ngAfterViewInit() { + let iconFamily = this.icon.getFamily; +} +``` + +##### Returns + +`string` + +*** + +### getInactive + +#### Get Signature + +> **get** **getInactive**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L73) + +An accessor that returns inactive property. + +##### Example + +```typescript +@ViewChild("MyIcon") +public icon: IgxIconComponent; +ngAfterViewInit() { + let iconActive = this.icon.getInactive; +} +``` + +##### Returns + +`boolean` + +*** + +### getName + +#### Get Signature + +> **get** **getName**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L209) + +An accessor that returns the value of the iconName property. + +##### Example + +```typescript +@ViewChild("MyIcon") +public icon: IgxIconComponent; +ngAfterViewInit() { + let name = this.icon.getName; +} +``` + +##### Returns + +`string` + +*** + +### getSvg + +#### Get Signature + +> **get** **getSvg**(): `SafeHtml` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L225) + +An accessor that returns the underlying SVG image as SafeHtml. + +##### Example + +```typescript +@ViewChild("MyIcon") +public icon: IgxIconComponent; +ngAfterViewInit() { + let svg: SafeHtml = this.icon.getSvg; +} +``` + +##### Returns + +`SafeHtml` + +*** + +### iconRef + +#### Get Signature + +> **get** `protected` **iconRef**(): [`IconReference`](../type-aliases/IconReference.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L157) + +##### Returns + +[`IconReference`](../type-aliases/IconReference.md) + +#### Set Signature + +> **set** `protected` **iconRef**(`ref`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.component.ts#L161) + +##### Parameters + +###### ref + +[`IconReference`](../type-aliases/IconReference.md) + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconService.md new file mode 100644 index 000000000..287aeb4a9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxIconService.md @@ -0,0 +1,392 @@ +# Class: IgxIconService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L39) + +**Ignite UI for Angular Icon Service** - + +The Ignite UI Icon Service makes it easy for developers to include custom SVG images and use them with IgxIconComponent. +In addition it could be used to associate a custom class to be applied on IgxIconComponent according to given font-family. + +Example: +```typescript +this.iconService.setFamily('material', { className: 'material-icons', type: 'font' }); +this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); +``` + +## Constructors + +### Constructor + +> **new IgxIconService**(): `IgxIconService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L68) + +#### Returns + +`IgxIconService` + +## Properties + +### document + +> `protected` **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L45) + +*** + +### iconLoaded + +> **iconLoaded**: `Observable`\<[`IgxIconLoadedEvent`](../interfaces/IgxIconLoadedEvent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L56) + +Observable that emits when an icon is successfully loaded +through a HTTP request. + +#### Example + +```typescript +this.service.iconLoaded.subscribe((ev: IgxIconLoadedEvent) => ...); +``` + +## Accessors + +### defaultFamily + +#### Get Signature + +> **get** **defaultFamily**(): [`IconFamily`](../interfaces/IconFamily.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L94) + +Returns the default font-family. +```typescript + const defaultFamily = this.iconService.defaultFamily; +``` + +##### Returns + +[`IconFamily`](../interfaces/IconFamily.md) + +#### Set Signature + +> **set** **defaultFamily**(`family`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L104) + +Sets the default font-family. +```typescript + this.iconService.defaultFamily = 'svg-flags'; +``` + +##### Parameters + +###### family + +[`IconFamily`](../interfaces/IconFamily.md) + +##### Returns + +`void` + +## Methods + +### addIconRef() + +> **addIconRef**(`name`, `family`, `icon`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L178) + +Adds an icon reference meta for an icon in a meta family. + Executes only if no icon reference is found. +```typescript + this.iconService.addIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' }); +``` + +#### Parameters + +##### name + +`string` + +##### family + +`string` + +##### icon + +[`IconMeta`](../interfaces/IconMeta.md) + +#### Returns + +`void` + +*** + +### addSvgIcon() + +> **addSvgIcon**(`name`, `url`, `family?`, `stripMeta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:261](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L261) + +Adds an SVG image to the cache. SVG source is an url. +```typescript + this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); +``` + +#### Parameters + +##### name + +`string` + +##### url + +`string` + +##### family? + +`string` = `...` + +##### stripMeta? + +`boolean` = `false` + +#### Returns + +`void` + +*** + +### addSvgIconFromText() + +> **addSvgIconFromText**(`name`, `iconText`, `family?`, `stripMeta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L308) + +Adds an SVG image to the cache. SVG source is its text. +```typescript + this.iconService.addSvgIconFromText('simple', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <path d="M74 74h54v54H74" /></svg>', 'svg-flags'); +``` + +#### Parameters + +##### name + +`string` + +##### iconText + +`string` + +##### family? + +`string` = `...` + +##### stripMeta? + +`boolean` = `false` + +#### Returns + +`void` + +*** + +### familyClassName() + +> **familyClassName**(`alias`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L131) + +Returns the custom class, if any, associated to a given font-family. +```typescript + const familyClass = this.iconService.familyClassName('material'); +``` + +#### Parameters + +##### alias + +`string` + +#### Returns + +`string` + +*** + +### getIconRef() + +> **getIconRef**(`name`, `family`): [`IconReference`](../type-aliases/IconReference.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L222) + +Returns the icon reference meta for an icon in a given family. +```typescript + const iconRef = this.iconService.getIconRef('aruba', 'default'); +``` + +#### Parameters + +##### name + +`string` + +##### family + +`string` + +#### Returns + +[`IconReference`](../type-aliases/IconReference.md) + +*** + +### getSvgIcon() + +> **getSvgIcon**(`name`, `family`): `SafeHtml` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:352](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L352) + +Returns the cached SVG image as string. +```typescript + const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags'); +``` + +#### Parameters + +##### name + +`string` + +##### family + +`string` + +#### Returns + +`SafeHtml` + +*** + +### isSvgIconCached() + +> **isSvgIconCached**(`name`, `family`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L334) + +Returns whether a given SVG image is present in the cache. +```typescript + const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags'); +``` + +#### Parameters + +##### name + +`string` + +##### family + +`string` + +#### Returns + +`boolean` + +*** + +### ~~registerFamilyAlias()~~ + +> **registerFamilyAlias**(`alias`, `className?`, `type?`): `this` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L116) + +Registers a custom class to be applied to IgxIconComponent for a given font-family. +```typescript + this.iconService.registerFamilyAlias('material', 'material-icons'); +``` + +#### Parameters + +##### alias + +`string` + +##### className? + +`string` = `alias` + +##### type? + +`IconType` = `"font"` + +#### Returns + +`this` + +#### Deprecated + +in version 18.1.0. Use `setFamily` instead. + +*** + +### setFamily() + +> **setFamily**(`name`, `meta`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L167) + +Creates a family to className relationship that is applied to the IgxIconComponent + whenever that family name is used. +```typescript + this.iconService.setFamily('material', { className: 'material-icons', type: 'liga' }); +``` + +#### Parameters + +##### name + +`string` + +##### meta + +[`FamilyMeta`](../interfaces/FamilyMeta.md) + +#### Returns + +`void` + +*** + +### setIconRef() + +> **setIconRef**(`name`, `family`, `icon`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L201) + +Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family. +```typescript + this.iconService.setIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' }); +``` + +#### Parameters + +##### name + +`string` + +##### family + +`string` + +##### icon + +[`IconMeta`](../interfaces/IconMeta.md) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInputDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInputDirective.md new file mode 100644 index 000000000..4c26cf6b0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInputDirective.md @@ -0,0 +1,463 @@ +# Class: IgxInputDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L53) + +The `igxInput` directive creates single- or multiline text elements, covering common scenarios when dealing with form inputs. + +## Igx Module + +IgxInputGroupModule + +## Igx Parent + +Data Entry & Display + +## Igx Theme + +igx-input-group-theme + +## Igx Keywords + +input, input group, form, field, validation + +## Igx Group + +presentation + +## Example + +```html +<input-group> + <label for="address">Address</label> + <input igxInput name="address" type="text" [(ngModel)]="customer.address"> +</input-group> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxInputDirective**(): `IgxInputDirective` + +#### Returns + +`IgxInputDirective` + +## Properties + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L58) + +*** + +### element + +> `protected` **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L57) + +*** + +### formControl + +> `protected` **formControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L56) + +*** + +### inputGroup + +> **inputGroup**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L54) + +*** + +### isInput + +> **isInput**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L76) + +Sets/gets whether the `"igx-input-group__input"` class is added to the host element. +Default value is `false`. + +#### Examples + +```typescript +this.igxInput.isInput = true; +``` + +```typescript +let isCLassAdded = this.igxInput.isInput; +``` + +*** + +### isTextArea + +> **isTextArea**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L92) + +Sets/gets whether the `"class.igx-input-group__textarea"` class is added to the host element. +Default value is `false`. + +#### Examples + +```typescript +this.igxInput.isTextArea = true; +``` + +```typescript +let isCLassAdded = this.igxInput.isTextArea; +``` + +*** + +### ngModel + +> `protected` **ngModel**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L55) + +*** + +### renderer + +> `protected` **renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L59) + +## Accessors + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L162) + +Gets the `disabled` property + +##### Example + +```typescript +@ViewChild('igxInput', {read: IgxInputDirective}) + public igxInput: IgxInputDirective; +let isDisabled = this.igxInput.disabled; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L145) + +Sets the `disabled` property. + +##### Example + +```html +<input-group> + <input igxInput #igxInput [disabled]="true"> +</input-group> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### focused + +#### Get Signature + +> **get** **focused**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L453) + +Gets whether the igxInput is focused. + +##### Example + +```typescript +let isFocused = this.igxInput.focused; +``` + +##### Returns + +`any` + +*** + +### hasPlaceholder + +#### Get Signature + +> **get** **hasPlaceholder**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:415](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L415) + +Gets whether the igxInput has a placeholder. + +##### Example + +```typescript +let hasPlaceholder = this.igxInput.hasPlaceholder; +``` + +##### Returns + +`any` + +*** + +### isValid + +#### Get Signature + +> **get** **isValid**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:488](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L488) + +Gets whether the igxInput is valid. + +##### Example + +```typescript +let valid = this.igxInput.isValid; +``` + +##### Returns + +`boolean` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:348](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L348) + +Gets the `nativeElement` of the igxInput. + +##### Example + +```typescript +let igxInputNativeElement = this.igxInput.nativeElement; +``` + +##### Returns + +`any` + +*** + +### placeholder + +#### Get Signature + +> **get** **placeholder**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:426](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L426) + +Gets the placeholder element of the igxInput. + +##### Example + +```typescript +let igxInputPlaceholder = this.igxInput.placeholder; +``` + +##### Returns + +`any` + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L189) + +Gets whether the igxInput is required. + +##### Example + +```typescript +let isRequired = this.igxInput.required; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L177) + +Sets the `required` property. + +##### Example + +```html +<input-group> + <input igxInput #igxInput required> +</input-group> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### valid + +#### Get Signature + +> **get** **valid**(): [`IgxInputState`](../enumerations/IgxInputState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L464) + +Gets the state of the igxInput. + +##### Example + +```typescript +let igxInputState = this.igxInput.valid; +``` + +##### Returns + +[`IgxInputState`](../enumerations/IgxInputState.md) + +#### Set Signature + +> **set** **valid**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:476](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L476) + +Sets the state of the igxInput. + +##### Example + +```typescript +this.igxInput.valid = IgxInputState.INVALID; +``` + +##### Parameters + +###### value + +[`IgxInputState`](../enumerations/IgxInputState.md) + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L130) + +Gets the `value` property. + +##### Example + +```typescript +@ViewChild('igxInput', {read: IgxInputDirective}) + public igxInput: IgxInputDirective; +let inputValue = this.igxInput.value; +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L116) + +Sets the `value` property. + +##### Example + +```html +<input-group> + <input igxInput #igxInput [value]="'IgxInput Value'"> +</input-group> +``` + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +## Methods + +### focus() + +> **focus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L337) + +Sets a focus on the igxInput. + +#### Returns + +`void` + +#### Example + +```typescript +this.igxInput.focus(); +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInputGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInputGroupComponent.md new file mode 100644 index 000000000..7e99fb6ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInputGroupComponent.md @@ -0,0 +1,417 @@ +# Class: IgxInputGroupComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L39) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxInputGroupComponent**(): `IgxInputGroupComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L230) + +#### Returns + +`IgxInputGroupComponent` + +## Properties + +### \_prefixes + +> `protected` **\_prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L122) + +*** + +### \_suffixes + +> `protected` **\_suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L125) + +*** + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L75) + +Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`. +By default applied the class is applied. +```typescript + @ViewChild("MyInputGroup") + public inputGroup: IgxInputGroupComponent; + ngAfterViewInit(){ + this.inputGroup.defaultClass = false; +``` +} + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L40) + +*** + +### suppressInputAutofocus + +> **suppressInputAutofocus**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L111) + +Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix). + +#### Remarks + +Automatic focus causes software keyboard to show on mobile devices. + +#### Example + +```html +<igx-input-group [suppressInputAutofocus]="true"></igx-input-group> +``` + +## Accessors + +### hasBorder + +#### Get Signature + +> **get** **hasBorder**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L315) + +Returns whether the `IgxInputGroupComponent` has border. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputBorder = this.inputGroup.hasBorder; +} +``` + +##### Returns + +`boolean` + +*** + +### hasHints + +#### Get Signature + +> **get** **hasHints**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L279) + +Returns whether the `IgxInputGroupComponent` has hints. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputHints = this.inputGroup.hasHints; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeBootstrap + +#### Get Signature + +> **get** **isTypeBootstrap**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L432) + +Returns true if the `IgxInputGroupComponent` theme is Bootstrap. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBootstrap = this.inputGroup.isTypeBootstrap; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeBorder + +#### Get Signature + +> **get** **isTypeBorder**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L402) + +Returns whether the `IgxInputGroupComponent` type is border. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBorder = this.inputGroup.isTypeBorder; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeBox + +#### Get Signature + +> **get** **isTypeBox**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L347) + +Returns whether the `IgxInputGroupComponent` type is box. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBox = this.inputGroup.isTypeBox; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeFluent + +#### Get Signature + +> **get** **isTypeFluent**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L417) + +Returns true if the `IgxInputGroupComponent` theme is Fluent. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeFluent = this.inputGroup.isTypeFluent; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeIndigo + +#### Get Signature + +> **get** **isTypeIndigo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L447) + +Returns true if the `IgxInputGroupComponent` theme is Indigo. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeIndigo = this.inputGroup.isTypeIndigo; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeLine + +#### Get Signature + +> **get** **isTypeLine**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L332) + +Returns whether the `IgxInputGroupComponent` type is line. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeLine = this.inputGroup.isTypeLine; +} +``` + +##### Returns + +`boolean` + +*** + +### isTypeSearch + +#### Get Signature + +> **get** **isTypeSearch**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:462](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L462) + +Returns whether the `IgxInputGroupComponent` type is search. +```typescript +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeSearch = this.inputGroup.isTypeSearch; +} +``` + +##### Returns + +`boolean` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): [`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L59) + +Returns the resource strings. + +##### Returns + +[`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L52) + +Sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +[`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +##### Returns + +`void` + +*** + +### theme + +#### Get Signature + +> **get** **theme**(): [`IgxTheme`](../type-aliases/IgxTheme.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L226) + +Returns the theme of the input. +The returned value is of type IgxInputGroupType. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = this.inputGroup.theme; +} + +##### Returns + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +#### Set Signature + +> **set** **theme**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L212) + +Sets the theme of the input. +Allowed values of type IgxInputGroupTheme. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = 'fluent'; +} + +##### Parameters + +###### value + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +##### Returns + +`void` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L197) + +Returns the type of the `IgxInputGroupComponent`. How the input is styled. +The default is `line`. +```typescript +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputType = this.inputGroup.type; +} +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts#L182) + +Sets how the input will be styled. +Allowed values of type IgxInputGroupType. +```html +<igx-input-group [type]="'search'"> +``` + +##### Parameters + +###### value + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInsertDropStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInsertDropStrategy.md new file mode 100644 index 000000000..fec9fc5b8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxInsertDropStrategy.md @@ -0,0 +1,55 @@ +# Class: IgxInsertDropStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L46) + +## Implements + +- [`IDropStrategy`](../interfaces/IDropStrategy.md) + +## Constructors + +### Constructor + +> **new IgxInsertDropStrategy**(`_renderer`): `IgxInsertDropStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L48) + +#### Parameters + +##### \_renderer + +`Renderer2` + +#### Returns + +`IgxInsertDropStrategy` + +## Methods + +### dropAction() + +> **dropAction**(`drag`, `drop`, `atIndex`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L50) + +#### Parameters + +##### drag + +[`IgxDragDirective`](IgxDragDirective.md) + +##### drop + +[`IgxDropDirective`](IgxDropDirective.md) + +##### atIndex + +`number` + +#### Returns + +`void` + +#### Implementation of + +[`IDropStrategy`](../interfaces/IDropStrategy.md).[`dropAction`](../interfaces/IDropStrategy.md#dropaction) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLabelDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLabelDirective.md new file mode 100644 index 000000000..083881eef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLabelDirective.md @@ -0,0 +1,21 @@ +# Class: IgxLabelDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-label/label.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-label/label.directive.ts#L9) + +## Constructors + +### Constructor + +> **new IgxLabelDirective**(): `IgxLabelDirective` + +#### Returns + +`IgxLabelDirective` + +## Properties + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-label/label.directive.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-label/label.directive.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLayoutDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLayoutDirective.md new file mode 100644 index 000000000..8d35c719a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLayoutDirective.md @@ -0,0 +1,132 @@ +# Class: IgxLayoutDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L7) + +## Constructors + +### Constructor + +> **new IgxLayoutDirective**(): `IgxLayoutDirective` + +#### Returns + +`IgxLayoutDirective` + +## Properties + +### dir + +> **dir**: `string` = `'row'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L23) + +Sets the default flow direction of the container's children. + +Defaults to `rows`. + +```html + <div + igxLayout + igxLayoutDir="row"> + <div igxFlex>1</div> + <div igxFlex>2</div> + <div igxFlex>3</div> + </div> +``` + +*** + +### itemAlign + +> **itemAlign**: `string` = `'stretch'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L100) + +Defines the default behavior for how children are laid out along the corss axis of the current line. + +Defaults to `flex-start`. + +Other possible values are `flex-end`, `center`, `baseline`, and `stretch`. + +```html +<div + igxLayout + igxLayoutDir="column" + igxLayoutItemAlign="start"> + <div igxFlex igxFlexGrow="0">1</div> + <div igxFlex igxFlexGrow="0">2</div> + <div igxFlex igxFlexGrow="0">3</div> +</div> +``` + +*** + +### justify + +> **justify**: `string` = `'flex-start'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L80) + +Defines the alignment along the main axis. + +Defaults to `flex-start` which packs the children toward the start line. + +Other possible values are `flex-end`, `center`, `space-between`, `space-around`. + +```html +<div + igxLayout + igxLayoutDir="column" + igxLayoutJustify="space-between"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> +``` + +*** + +### reverse + +> **reverse**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L40) + +Defines the direction flex children are placed in the flex container. + +When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top. + +```html +<div + igxLayout + igxLayoutReverse="true"> + <div igxFlex>1</div> + <div igxFlex>2</div> + <div igxFlex>3</div> +</div> +``` + +*** + +### wrap + +> **wrap**: `string` = `'nowrap'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts#L60) + +By default the immediate children will all try to fit onto one line. + +The default value `nowrap` sets this behavior. + +Other accepted values are `wrap` and `wrap-reverse`. + +```html +<div + igxLayout + igxLayoutDir="row" + igxLayoutWrap="wrap"> + <div igxFlex igxFlexGrow="0">1</div> + <div igxFlex igxFlexGrow="0">2</div> + <div igxFlex igxFlexGrow="0">3</div> +</div> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLinearProgressBarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLinearProgressBarComponent.md new file mode 100644 index 000000000..cde699724 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxLinearProgressBarComponent.md @@ -0,0 +1,646 @@ +# Class: IgxLinearProgressBarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L373) + +## Extends + +- `BaseProgressDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxLinearProgressBarComponent**(): `IgxLinearProgressBarComponent` + +#### Returns + +`IgxLinearProgressBarComponent` + +#### Inherited from + +`BaseProgressDirective.constructor` + +## Properties + +### \_animate + +> `protected` **\_animate**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L84) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_animate`](IgxCircularProgressBarComponent.md#_animate) + +*** + +### \_cdr + +> `protected` **\_cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L88) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_cdr`](IgxCircularProgressBarComponent.md#_cdr) + +*** + +### \_contentInit + +> `protected` **\_contentInit**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L79) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_contentInit`](IgxCircularProgressBarComponent.md#_contentinit) + +*** + +### \_fraction + +> `protected` **\_fraction**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L86) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_fraction`](IgxCircularProgressBarComponent.md#_fraction) + +*** + +### \_indeterminate + +> `protected` **\_indeterminate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L80) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_indeterminate`](IgxCircularProgressBarComponent.md#_indeterminate) + +*** + +### \_integer + +> `protected` **\_integer**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L87) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_integer`](IgxCircularProgressBarComponent.md#_integer) + +*** + +### \_max + +> `protected` **\_max**: `number` = `100` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L82) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_max`](IgxCircularProgressBarComponent.md#_max) + +*** + +### \_step + +> `protected` **\_step**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L85) + +#### Inherited from + +`BaseProgressDirective._step` + +*** + +### \_text + +> `protected` **\_text**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L81) + +#### Inherited from + +`BaseProgressDirective._text` + +*** + +### \_value + +> `protected` **\_value**: `number` = `MIN_VALUE` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L83) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_value`](IgxCircularProgressBarComponent.md#_value) + +*** + +### \_zone + +> `protected` **\_zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L89) + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`_zone`](IgxCircularProgressBarComponent.md#_zone) + +*** + +### animationDuration + +> **animationDuration**: `number` = `2000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L77) + +Sets/Gets progressbar animation duration. By default, it is 2000ms. +```html +<igx-linear-bar [animationDuration]="3000"></igx-linear-bar> +<igx-circular-bar [animationDuration]="3000"></igx-linear-bar> +``` + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`animationDuration`](IgxCircularProgressBarComponent.md#animationduration) + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-linear-bar'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L378) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L417) + +Sets the value of `id` attribute. If not provided it will be automatically generated. +```html +<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar> +``` + +*** + +### progressChanged + +> **progressChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L67) + +An event, which is triggered after progress is changed. +```typescript +public progressChange(event) { + alert("Progress made!"); +} + //... +``` +```html +<igx-circular-bar (progressChanged)="progressChange($event)"></igx-circular-bar> +<igx-linear-bar (progressChanged)="progressChange($event)"></igx-linear-bar> +``` + +#### Inherited from + +[`IgxCircularProgressBarComponent`](IgxCircularProgressBarComponent.md).[`progressChanged`](IgxCircularProgressBarComponent.md#progresschanged) + +*** + +### role + +> **role**: `string` = `'progressbar'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L407) + +Sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`. +```html +<igx-linear-bar role="progressbar"></igx-linear-bar> +``` + +*** + +### striped + +> **striped**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:388](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L388) + +Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false. +```html +<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar> +``` + +*** + +### textAlign + +> **textAlign**: [`IgxTextAlign`](../type-aliases/IgxTextAlign.md) = `IgxTextAlign.START` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L450) + +Set the position that defines where the text is aligned. +Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`. +```typescript +public positionCenter: IgxTextAlign; +public ngOnInit() { + this.positionCenter = IgxTextAlign.CENTER; +} + //... +``` + ```html +<igx-linear-bar [textAlign]="positionCenter"></igx-linear-bar> +``` + +*** + +### textTop + +> **textTop**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:468](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L468) + +Set the position that defines if the text should be aligned above the progress line. By default, is set to false. +```html + <igx-linear-bar [textTop]="true"></igx-linear-bar> +``` + +*** + +### textVisibility + +> **textVisibility**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:459](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L459) + +Set the text to be visible. By default, it is set to true. +```html + <igx-linear-bar [textVisibility]="false"></igx-linear-bar> +``` + +*** + +### type + +> **type**: `string` = `'default'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L477) + +Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. +```html +<igx-linear-bar [type]="'error'"></igx-linear-bar> +``` + +*** + +### valueMin + +> **valueMin**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L375) + +## Accessors + +### animate + +#### Get Signature + +> **get** **animate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L198) + +Returns whether the `progress bar` has animation true/false. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; +public animationStatus(event) { + let animationStatus = this.progressBar.animate; + alert(animationStatus); +} +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **animate**(`animate`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L183) + +Animating the progress. By default, it is set to true. +```html +<igx-linear-bar [animate]="false"></igx-linear-bar> +<igx-circular-bar [animate]="false"></igx-circular-bar> +``` + +##### Parameters + +###### animate + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.animate` + +*** + +### indeterminate + +#### Get Signature + +> **get** **indeterminate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L113) + +Gets the current state of the progress bar: +- `true` if in the indeterminate state (no progress value displayed), +- `false` if the progress bar shows the actual progress. + +```typescript +const isIndeterminate = progressBar.indeterminate; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **indeterminate**(`isIndeterminate`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L99) + +Sets progressbar in indeterminate. By default, it is set to false. +```html +<igx-linear-bar [indeterminate]="true"></igx-linear-bar> +<igx-circular-bar [indeterminate]="true"></igx-circular-bar> +``` + +##### Parameters + +###### isIndeterminate + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.indeterminate` + +*** + +### max + +#### Get Signature + +> **get** **max**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L237) + +Returns the maximum progress value of the `progress bar`. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; +public maxValue(event) { + let max = this.progressBar.max; + alert(max); +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **max**(`maxNum`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L211) + +Set maximum value that can be passed. By default it is set to 100. +```html +<igx-linear-bar [max]="200"></igx-linear-bar> +<igx-circular-bar [max]="200"></igx-circular-bar> +``` + +##### Parameters + +###### maxNum + +`number` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.max` + +*** + +### step + +#### Get Signature + +> **get** **step**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L129) + +Returns the value which update the progress indicator of the `progress bar`. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; +public stepValue(event) { + let step = this.progressBar.step; + alert(step); +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **step**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L143) + +Sets the value by which progress indicator is updated. By default, it is 1. +```html +<igx-linear-bar [step]="1"></igx-linear-bar> +<igx-circular-bar [step]="1"></igx-circular-bar> +``` + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.step` + +*** + +### text + +#### Get Signature + +> **get** **text**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L171) + +Gets a custom text. +```typescript +let text = this.circularBar.text; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **text**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L160) + +Set a custom text. This will hide the counter value. +```html +<igx-circular-bar text="my text"></igx-circular-bar> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.text` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L301) + +Returns value that indicates the current `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` position. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent; +public getValue(event) { + let value = this.progressBar.value; + alert(value); +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **value**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L338) + +Set value that indicates the current `IgxLinearProgressBarComponent / IgxCircularProgressBarComponent` position. +```html +<igx-linear-bar [value]="50"></igx-linear-bar> +<igx-circular-bar [value]="50"></igx-circular-bar> +``` + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +`BaseProgressDirective.value` + +*** + +### valueInPercent + +#### Get Signature + +> **get** **valueInPercent**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L283) + +Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage. +```typescript +@ViewChild("MyProgressBar") +public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent +public valuePercent(event){ + let percentValue = this.progressBar.valueInPercent; + alert(percentValue); +} +``` + +##### Returns + +`number` + +#### Inherited from + +`BaseProgressDirective.valueInPercent` + +## Methods + +### ngAfterContentInit() + +> **ngAfterContentInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:511](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L511) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListActionDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListActionDirective.md new file mode 100644 index 000000000..a89fcde07 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListActionDirective.md @@ -0,0 +1,16 @@ +# Class: IgxListActionDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L83) + +igxListAction is container for the List action +Use it to wrap anything you want to be used as a list action: icon, checkbox... + +## Constructors + +### Constructor + +> **new IgxListActionDirective**(): `IgxListActionDirective` + +#### Returns + +`IgxListActionDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListComponent.md new file mode 100644 index 000000000..3fc119cad --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListComponent.md @@ -0,0 +1,692 @@ +# Class: IgxListComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L153) + +Displays a collection of data items in a templatable list format + +## Igx Module + +IgxListModule + +## Igx Theme + +igx-list-theme + +## Igx Keywords + +list, data + +## Igx Group + +Grids & Lists + +## Remarks + +The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering +of list items. Each list item is completely templatable and will support any valid HTML or Angular component. + +## Example + +```html +<igx-list> + <igx-list-item isHeader="true">Contacts</igx-list-item> + <igx-list-item *ngFor="let contact of contacts"> + <span class="name">{{ contact.name }}</span> + <span class="phone">{{ contact.phone }}</span> + </igx-list-item> +</igx-list> +``` + +## Constructors + +### Constructor + +> **new IgxListComponent**(): `IgxListComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:469](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L469) + +#### Returns + +`IgxListComponent` + +#### Overrides + +`IgxListBaseDirective.constructor` + +## Properties + +### allowLeftPanning + +> **allowLeftPanning**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L300) + +Sets/gets whether the left panning of an item is allowed. + +#### Remarks + +Default value is `false`. + +#### Example + +```html +<igx-list [allowLeftPanning]="true"></igx-list> +``` +```typescript +let isLeftPanningAllowed = this.list.allowLeftPanning; +``` + +#### Overrides + +`IgxListBaseDirective.allowLeftPanning` + +*** + +### allowRightPanning + +> **allowRightPanning**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L317) + +Sets/gets whether the right panning of an item is allowed. + +#### Remarks + +Default value is `false`. + +#### Example + +```html +<igx-list [allowRightPanning]="true"></igx-list> +``` +```typescript +let isRightPanningAllowed = this.list.allowRightPanning; +``` + +#### Overrides + +`IgxListBaseDirective.allowRightPanning` + +*** + +### children + +> **children**: `QueryList`\<[`IgxListItemComponent`](IgxListItemComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L166) + +Returns a collection of all items and headers in the list. + +#### Example + +```typescript +let listChildren: QueryList = this.list.children; +``` + +#### Overrides + +`IgxListBaseDirective.children` + +*** + +### dataLoadingTemplate + +> **dataLoadingTemplate**: [`IgxDataLoadingTemplateDirective`](IgxDataLoadingTemplateDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L209) + +Sets/gets the list loading template. + +#### Remarks + +This template is used by IgxList in case there are no list items defined and `isLoading` is set to `true`. + +#### Example + +```html +<igx-list> + <ng-template igxDataLoading> + <p>Patience, we are currently loading your data...</p> + </ng-template> +</igx-list> +``` +```typescript +let loadingTemplate = this.list.dataLoadingTemplate; +``` + +*** + +### el + +> `protected` **el**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L13) + +#### Inherited from + +`IgxListBaseDirective.el` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L154) + +*** + +### emptyListTemplate + +> **emptyListTemplate**: [`IgxEmptyListTemplateDirective`](IgxEmptyListTemplateDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L188) + +Sets/gets the empty list template. + +#### Remarks + +This template is used by IgxList in case there are no list items +defined and `isLoading` is set to `false`. + +#### Example + +```html +<igx-list> + <ng-template igxEmptyList> + <p class="empty">No contacts! :(</p> + </ng-template> +</igx-list> +``` +```typescript +let emptyTemplate = this.list.emptyListTemplate; +``` + +*** + +### endPan + +> **endPan**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L391) + +Event emitted when a pan gesture is completed or canceled. + +#### Remarks + +Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. + +#### Example + +```html +<igx-list (endPan)="endPan($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.endPan` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L283) + +Sets/gets the `id` of the list. + +#### Remarks + +If not set, the `id` of the first list component will be `"igx-list-0"`. + +#### Example + +```html +<igx-list id="my-first-list"></igx-list> +``` +```typescript +let listId = this.list.id; +``` + +*** + +### isLoading + +> **isLoading**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L335) + +Sets/gets whether the list is currently loading data. + +#### Remarks + +Set it to display the dataLoadingTemplate while data is being retrieved. +Default value is `false`. + +#### Example + +```html + <igx-list [isLoading]="true"></igx-list> +``` +```typescript +let isLoading = this.list.isLoading; +``` + +*** + +### itemClicked + +> **itemClicked**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L434) + +Event emitted when a list item is clicked. + +#### Remarks + +Provides references to the `IgxListItemComponent` and `Event` as event arguments. + +#### Example + +```html +<igx-list (itemClicked)="onItemClicked($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.itemClicked` + +*** + +### leftPan + +> **leftPan**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L349) + +Event emitted when a left pan gesture is executed on a list item. + +#### Remarks + +Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. + +#### Example + +```html +<igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.leftPan` + +*** + +### listItemLeftPanningTemplate + +> **listItemLeftPanningTemplate**: [`IgxListItemLeftPanningTemplateDirective`](IgxListItemLeftPanningTemplateDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L230) + +Sets/gets the template for left panning a list item. + +#### Remarks + +Default value is `null`. + +#### Example + +```html +<igx-list [allowLeftPanning]="true"> + <ng-template igxListItemLeftPanning> + <igx-icon>delete</igx-icon>Delete + </ng-template> +</igx-list> +``` +```typescript +let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate; +``` + +#### Overrides + +`IgxListBaseDirective.listItemLeftPanningTemplate` + +*** + +### listItemRightPanningTemplate + +> **listItemRightPanningTemplate**: [`IgxListItemRightPanningTemplateDirective`](IgxListItemRightPanningTemplateDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L251) + +Sets/gets the template for right panning a list item. + +#### Remarks + +Default value is `null`. + +#### Example + +```html +<igx-list [allowRightPanning] = "true"> + <ng-template igxListItemRightPanning> + <igx-icon>call</igx-icon>Dial + </ng-template> +</igx-list> +``` +```typescript +let itemRightPanTmpl = this.list.listItemRightPanningTemplate; +``` + +#### Overrides + +`IgxListBaseDirective.listItemRightPanningTemplate` + +*** + +### panEndTriggeringThreshold + +> **panEndTriggeringThreshold**: `number` = `0.5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L265) + +Provides a threshold after which the item's panning will be completed automatically. + +#### Remarks + +By default this property is set to 0.5 which is 50% of the list item's width. + +#### Example + +```html +<igx-list [panEndTriggeringThreshold]="0.8"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.panEndTriggeringThreshold` + +*** + +### panStateChange + +> **panStateChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L420) + +Event emitted when a pan gesture is executed on a list item. + +#### Remarks + +Provides references to the `IgxListItemComponent` and `IgxListPanState` as event arguments. + +#### Example + +```html +<igx-list (panStateChange)="panStateChange($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.panStateChange` + +*** + +### resetPan + +> **resetPan**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:405](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L405) + +Event emitted when a pan item is returned to its original position. + +#### Remarks + +Provides a reference to an object of type `IgxListComponent` as an event argument. + +#### Example + +```html +<igx-list (resetPan)="resetPan($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.resetPan` + +*** + +### rightPan + +> **rightPan**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L363) + +Event emitted when a right pan gesture is executed on a list item. + +#### Remarks + +Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. + +#### Example + +```html +<igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.rightPan` + +*** + +### startPan + +> **startPan**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L377) + +Event emitted when a pan gesture is started. + +#### Remarks + +Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. + +#### Example + +```html +<igx-list (startPan)="startPan($event)"></igx-list> +``` + +#### Overrides + +`IgxListBaseDirective.startPan` + +## Accessors + +### context + +#### Get Signature + +> **get** **context**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L582) + +Gets the `context` object of the template binding. + +##### Remarks + +Gets the `context` object which represents the `template context` binding into the `list container` +by providing the `$implicit` declaration which is the `IgxListComponent` itself. + +##### Example + +```typescript +let listComponent = this.list.context; +``` + +##### Returns + +`any` + +*** + +### headers + +#### Get Signature + +> **get** **headers**(): [`IgxListItemComponent`](IgxListItemComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:558](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L558) + +Gets the header list `items`. + +##### Example + +```typescript +let listHeaders: IgxListItemComponent[] = this.list.headers; +``` + +##### Returns + +[`IgxListItemComponent`](IgxListItemComponent.md)[] + +*** + +### isListEmpty + +#### Get Signature + +> **get** **isListEmpty**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L517) + +Gets a boolean indicating if the list is empty. + +##### Example + +```typescript +let isEmpty = this.list.isListEmpty; +``` + +##### Returns + +`boolean` + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgxListItemComponent`](IgxListItemComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L538) + +Gets the list `items` excluding the header ones. + +##### Example + +```typescript +let listItems: IgxListItemComponent[] = this.list.items; +``` + +##### Returns + +[`IgxListItemComponent`](IgxListItemComponent.md)[] + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L465) + +Returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L458) + +Sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### role + +#### Get Signature + +> **get** **role**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L500) + +Gets/Sets the `role` attribute value. + +##### Example + +```typescript +let listRole = this.list.role; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **role**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:504](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L504) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +*** + +### template + +#### Get Signature + +> **get** **template**(): `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L596) + +Gets a `TemplateRef` to the currently used template. + +##### Example + +```typescript +let listTemplate = this.list.template; +``` + +##### Returns + +`TemplateRef`\<`any`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemComponent.md new file mode 100644 index 000000000..2fce2e63c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemComponent.md @@ -0,0 +1,501 @@ +# Class: IgxListItemComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L34) + +The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component. + +Example: +```html +<igx-list> + <igx-list-item isHeader="true">Contacts</igx-list-item> + <igx-list-item *ngFor="let contact of contacts"> + <span class="name">{{ contact.name }}</span> + <span class="phone">{{ contact.phone }}</span> + </igx-list-item> +</igx-list> +``` + +## Implements + +- `IListChild` + +## Constructors + +### Constructor + +> **new IgxListItemComponent**(): `IgxListItemComponent` + +#### Returns + +`IgxListItemComponent` + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L98) + +Sets/gets the `aria-label` attribute of the `list item`. +```typescript +this.listItem.ariaLabel = "Item1"; +``` +```typescript +let itemAriaLabel = this.listItem.ariaLabel; +``` + +#### Memberof + +IgxListItemComponent + +*** + +### hidden + +> **hidden**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L84) + +Sets/gets whether the `list item` is hidden. +By default the `hidden` value is `false`. +```html +<igx-list-item [hidden] = "true">Hidden Item</igx-list-item> +``` +```typescript +let isHidden = this.listItem.hidden; +``` + +#### Memberof + +IgxListItemComponent + +*** + +### isHeader + +> **isHeader**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L69) + +Sets/gets whether the `list item` is a header. +```html +<igx-list-item [isHeader] = "true">Header</igx-list-item> +``` +```typescript +let isHeader = this.listItem.isHeader; +``` + +#### Memberof + +IgxListItemComponent + +*** + +### leftPanningTemplateElement + +> **leftPanningTemplateElement**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L46) + +Provides a reference to the template's base element shown when left panning a list item. +```typescript +const leftPanTmpl = this.listItem.leftPanningTemplateElement; +``` + +*** + +### list + +> **list**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L35) + +*** + +### rightPanningTemplateElement + +> **rightPanningTemplateElement**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L55) + +Provides a reference to the template's base element shown when right panning a list item. +```typescript +const rightPanTmpl = this.listItem.rightPanningTemplateElement; +``` + +*** + +### touchAction + +> **touchAction**: `string` = `'pan-y'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L107) + +Gets the `touch-action` style of the `list item`. +```typescript +let touchAction = this.listItem.touchAction; +``` + +## Accessors + +### contentElement + +#### Get Signature + +> **get** **contentElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L189) + +Returns a reference container which contains the list item's content. +```typescript +let listItemContainer = this.listItem.contentElement. +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`any` + +*** + +### context + +#### Get Signature + +> **get** **context**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L201) + +Returns the `context` object which represents the `template context` binding into the `list item container` +by providing the `$implicit` declaration which is the `IgxListItemComponent` itself. +```typescript +let listItemComponent = this.listItem.context; +``` + +##### Returns + +`any` + +*** + +### display + +#### Get Signature + +> **get** **display**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L332) + +Returns string value which describes the display mode of the `list item`. +```typescript +let isHidden = this.listItem.display; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`string` + +*** + +### element + +#### Get Signature + +> **get** **element**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L177) + +Returns an element reference to the list item. +```typescript +let listItemElement = this.listItem.element. +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`any` + +*** + +### headerStyle + +#### Get Signature + +> **get** **headerStyle**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:306](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L306) + +Indicates whether `list item` should have header style. +```typescript +let headerStyle = this.listItem.headerStyle; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`boolean` + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L153) + +Gets the `index` of a `list item`. +```typescript +let itemIndex = this.listItem.index; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **index**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L165) + +Sets the `index` of the `list item`. +```typescript +this.listItem.index = index; +``` + +##### Memberof + +IgxListItemComponent + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IListChild.index` + +*** + +### innerStyle + +#### Get Signature + +> **get** **innerStyle**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L319) + +Applies the inner style of the `list item` if the item is not counted as header. +```typescript +let innerStyle = this.listItem.innerStyle; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`boolean` + +*** + +### maxLeft + +#### Get Signature + +> **get** **maxLeft**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:229](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L229) + +Gets the maximum left position of the `list item`. +```typescript +let maxLeft = this.listItem.maxLeft; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`number` + +*** + +### maxRight + +#### Get Signature + +> **get** **maxRight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L241) + +Gets the maximum right position of the `list item`. +```typescript +let maxRight = this.listItem.maxRight; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`any` + +*** + +### panState + +#### Get Signature + +> **get** **panState**(): [`IgxListPanState`](../enumerations/IgxListPanState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L140) + +Gets the `panState` of a `list item`. +```typescript +let itemPanState = this.listItem.panState; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +[`IgxListPanState`](../enumerations/IgxListPanState.md) + +*** + +### role + +#### Get Signature + +> **get** **role**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L265) + +Gets/Sets the `role` attribute of the `list item`. +```typescript +let itemRole = this.listItem.role; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`string` + +#### Set Signature + +> **set** **role**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L269) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L289) + +Sets/gets whether the `list item` is selected. +Selection is only applied to non-header items. +When selected, the CSS class 'igx-list__item-base--selected' is added to the item. +```html +<igx-list-item [selected]="true">Selected Item</igx-list-item> +``` +```typescript +let isSelected = this.listItem.selected; +this.listItem.selected = true; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L293) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### width + +#### Get Signature + +> **get** **width**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list-item.component.ts#L215) + +Gets the width of a `list item`. +```typescript +let itemWidth = this.listItem.width; +``` + +##### Memberof + +IgxListItemComponent + +##### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemLeftPanningTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemLeftPanningTemplateDirective.md new file mode 100644 index 000000000..ebf4518b8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemLeftPanningTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxListItemLeftPanningTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L52) + +## Constructors + +### Constructor + +> **new IgxListItemLeftPanningTemplateDirective**(): `IgxListItemLeftPanningTemplateDirective` + +#### Returns + +`IgxListItemLeftPanningTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L53) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemRightPanningTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemRightPanningTemplateDirective.md new file mode 100644 index 000000000..d66990700 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListItemRightPanningTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxListItemRightPanningTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L60) + +## Constructors + +### Constructor + +> **new IgxListItemRightPanningTemplateDirective**(): `IgxListItemRightPanningTemplateDirective` + +#### Returns + +`IgxListItemRightPanningTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L61) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineDirective.md new file mode 100644 index 000000000..4fca0a9f2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineDirective.md @@ -0,0 +1,16 @@ +# Class: IgxListLineDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L93) + +igxListLine is container for the List text content +Use it to wrap anything you want to be used as a plane text. + +## Constructors + +### Constructor + +> **new IgxListLineDirective**(): `IgxListLineDirective` + +#### Returns + +`IgxListLineDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineSubTitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineSubTitleDirective.md new file mode 100644 index 000000000..a296ea5ea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineSubTitleDirective.md @@ -0,0 +1,24 @@ +# Class: IgxListLineSubTitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L116) + +igxListLineSubTitle is a directive that add class to the target element +Use it to make anything to look like list Subtitle. + +## Constructors + +### Constructor + +> **new IgxListLineSubTitleDirective**(): `IgxListLineSubTitleDirective` + +#### Returns + +`IgxListLineSubTitleDirective` + +## Properties + +### cssClass + +> **cssClass**: `string` = `'igx-list__item-line-subtitle'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L118) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineTitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineTitleDirective.md new file mode 100644 index 000000000..d0616494a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListLineTitleDirective.md @@ -0,0 +1,24 @@ +# Class: IgxListLineTitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L103) + +igxListLineTitle is a directive that add class to the target element +Use it to make anything to look like list Title. + +## Constructors + +### Constructor + +> **new IgxListLineTitleDirective**(): `IgxListLineTitleDirective` + +#### Returns + +`IgxListLineTitleDirective` + +## Properties + +### cssClass + +> **cssClass**: `string` = `'igx-list__item-line-title'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L105) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListThumbnailDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListThumbnailDirective.md new file mode 100644 index 000000000..2ebc92709 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxListThumbnailDirective.md @@ -0,0 +1,16 @@ +# Class: IgxListThumbnailDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L73) + +igxListThumbnail is container for the List media +Use it to wrap anything you want to be used as a thumbnail. + +## Constructors + +### Constructor + +> **new IgxListThumbnailDirective**(): `IgxListThumbnailDirective` + +#### Returns + +`IgxListThumbnailDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMaskDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMaskDirective.md new file mode 100644 index 000000000..e52dac42e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMaskDirective.md @@ -0,0 +1,211 @@ +# Class: IgxMaskDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L13) + +## Extended by + +- [`IgxDateTimeEditorDirective`](IgxDateTimeEditorDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxMaskDirective**(): `IgxMaskDirective` + +#### Returns + +`IgxMaskDirective` + +## Properties + +### \_composing + +> `protected` **\_composing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L132) + +*** + +### \_compositionStartIndex + +> `protected` **\_compositionStartIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L133) + +*** + +### \_focused + +> `protected` **\_focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L134) + +*** + +### \_onChangeCallback + +> `protected` **\_onChangeCallback**: (`_`) => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L148) + +#### Parameters + +##### \_ + +`any` + +#### Returns + +`void` + +*** + +### \_onTouchedCallback + +> `protected` **\_onTouchedCallback**: () => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L147) + +#### Returns + +`void` + +*** + +### displayValuePipe + +> **displayValuePipe**: `PipeTransform` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L66) + +Specifies a pipe to be used on blur. +```html +<input [displayValuePipe] = "displayFormatPipe"> +``` + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L14) + +*** + +### focusedValuePipe + +> **focusedValuePipe**: `PipeTransform` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L75) + +Specifies a pipe to be used on focus. +```html +<input [focusedValuePipe] = "inputFormatPipe"> +``` + +*** + +### includeLiterals + +> **includeLiterals**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L57) + +Specifies if the bound value includes the formatting symbols. +```html +<input [includeLiterals] = "true"> +``` + +*** + +### maskParser + +> `protected` **maskParser**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L15) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L17) + +*** + +### promptChar + +> **promptChar**: `string` = `'_'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L48) + +Sets the character representing a fillable spot in the input mask. +Default value is "'_'". +```html +<input [promptChar] = "'/'"> +``` + +*** + +### renderer + +> `protected` **renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L16) + +*** + +### valueChanged + +> **valueChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L85) + +Emits an event each time the value changes. +Provides `rawValue: string` and `formattedValue: string` as event arguments. +```html +<input (valueChanged) = "valueChanged(rawValue: string, formattedValue: string)"> +``` + +## Accessors + +### mask + +#### Get Signature + +> **get** **mask**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L26) + +Sets the input mask. +```html +<input [igxMask] = "'00/00/0000'"> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **mask**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L30) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMonthPickerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMonthPickerComponent.md new file mode 100644 index 000000000..e196bdf68 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMonthPickerComponent.md @@ -0,0 +1,917 @@ +# Class: IgxMonthPickerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L46) + +## Extends + +- `IgxCalendarBaseDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Properties + +### \_destroyRef + +> `protected` **\_destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L32) + +#### Inherited from + +`IgxCalendarBaseDirective._destroyRef` + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L34) + +#### Inherited from + +`IgxCalendarBaseDirective._localeId` + +*** + +### activeViewChanged + +> **activeViewChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L106) + +Emits an event when the active view is changed. +```html +<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar> +``` +```typescript +public activeViewChanged(event: CalendarView) { + let activeView = event; +} +``` + +#### Inherited from + +`IgxCalendarBaseDirective.activeViewChanged` + +*** + +### activeViewIdx + +> `protected` **activeViewIdx**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L42) + +Holds month view index we are operating on. + +#### Inherited from + +`IgxCalendarBaseDirective.activeViewIdx` + +*** + +### cdr? + +> `protected` `optional` **cdr?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L36) + +#### Inherited from + +`IgxCalendarBaseDirective.cdr` + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L71) + +Sets/gets whether the outside dates (dates that are out of the current month) will be hidden. +Default value is `false`. +```html +<igx-calendar [hideOutsideDays]="true"></igx-calendar> +``` +```typescript +let hideOutsideDays = this.calendar.hideOutsideDays; +``` + +#### Inherited from + +`IgxCalendarBaseDirective.hideOutsideDays` + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L37) + +#### Inherited from + +`IgxCalendarBaseDirective.i18nFormatter` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L53) + +Sets/gets the `id` of the month picker. +If not set, the `id` will have value `"igx-month-picker-0"`. + +*** + +### keyboardNavigation? + +> `protected` `optional` **keyboardNavigation?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L35) + +#### Inherited from + +`IgxCalendarBaseDirective.keyboardNavigation` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L33) + +#### Inherited from + +`IgxCalendarBaseDirective.platform` + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L78) + +Emits an event when a date is selected. +Provides reference the `selectedDates` property. + +#### Inherited from + +`IgxCalendarBaseDirective.selected` + +*** + +### viewDateChanged + +> **viewDateChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L92) + +Emits an event when the month in view is changed. +```html +<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar> +``` +```typescript +public viewDateChanged(event: IViewDateChangeEventArgs) { + let viewDate = event.currentValue; +} +``` + +#### Inherited from + +`IgxCalendarBaseDirective.viewDateChanged` + +## Accessors + +### activeDescendant + +#### Get Signature + +> **get** `protected` **activeDescendant**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L308) + +##### Returns + +`number` + +#### Set Signature + +> **set** `protected` **activeDescendant**(`date`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L316) + +##### Parameters + +###### date + +`Date` + +##### Returns + +`void` + +*** + +### activeView + +#### Get Signature + +> **get** **activeView**(): [`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:374](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L374) + +Gets the current active view. +```typescript +this.activeView = calendar.activeView; +``` + +##### Returns + +[`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +#### Set Signature + +> **set** **activeView**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L387) + +Sets the current active view. +```html +<igx-calendar [activeView]="year" #calendar></igx-calendar> +``` +```typescript +calendar.activeView = IgxCalendarView.YEAR; +``` + +##### Parameters + +###### val + +[`IgxCalendarView`](../type-aliases/IgxCalendarView.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.activeView` + +*** + +### disabledDates + +#### Get Signature + +> **get** **disabledDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:567](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L567) + +Gets the disabled dates descriptors. + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **disabledDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L583) + +Sets the disabled dates' descriptors. +```typescript +@ViewChild("MyCalendar") +public calendar: IgxCalendarComponent; +ngOnInit(){ + this.calendar.disabledDates = [ + {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, + {type: DateRangeType.Weekends}]; +} +``` + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.disabledDates` + +*** + +### formatOptions + +#### Get Signature + +> **get** **formatOptions**(): [`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L338) + +Gets the date format options of the views. + +##### Returns + +[`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +#### Set Signature + +> **set** **formatOptions**(`formatOptions`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L346) + +Sets the date format options of the views. +Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' } + +##### Parameters + +###### formatOptions + +[`IFormattingOptions`](../interfaces/IFormattingOptions.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.formatOptions` + +*** + +### formatViews + +#### Get Signature + +> **get** **formatViews**(): [`IFormattingViews`](../interfaces/IFormattingViews.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L355) + +Gets whether the `day`, `month` and `year` should be rendered +according to the locale and formatOptions, if any. + +##### Returns + +[`IFormattingViews`](../interfaces/IFormattingViews.md) + +#### Set Signature + +> **set** **formatViews**(`formatViews`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L363) + +Sets whether the `day`, `month` and `year` should be rendered +according to the locale and formatOptions, if any. + +##### Parameters + +###### formatViews + +[`IFormattingViews`](../interfaces/IFormattingViews.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.formatViews` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L319) + +Gets the `locale` of the calendar. +If not set, defaults to application's locale. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L327) + +Sets the `locale` of the calendar. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.locale` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:292](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L292) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L285) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.resourceStrings` + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L509) + +Gets the selection type. +Default value is `"single"`. +Changing the type of selection resets the currently +selected values if any. + +##### Returns + +`string` + +#### Set Signature + +> **set** **selection**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:516](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L516) + +Sets the selection. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.selection` + +*** + +### showActiveDay + +#### Get Signature + +> **get** `protected` **showActiveDay**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L304) + +##### Returns + +`boolean` + +*** + +### specialDates + +#### Get Signature + +> **get** **specialDates**(): [`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:608](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L608) + +Gets the special dates descriptors. + +##### Returns + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +#### Set Signature + +> **set** **specialDates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:624](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L624) + +Sets the special dates' descriptors. +```typescript +@ViewChild("MyCalendar") +public calendar: IgxCalendarComponent; +ngOnInit(){ + this.calendar.specialDates = [ + {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]}, + {type: DateRangeType.Weekends}]; +} +``` + +##### Parameters + +###### value + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.specialDates` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `Date` \| `Date`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L636) + +Gets the selected date(s). + +When selection is set to `single`, it returns +a single `Date` object. +Otherwise it is an array of `Date` objects. + +##### Returns + +`Date` \| `Date`[] + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:651](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L651) + +Sets the selected date(s). + +When selection is set to `single`, it accepts +a single `Date` object. +Otherwise it is an array of `Date` objects. + +##### Parameters + +###### value + +`string` \| `Date` \| `Date`[] + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.value` + +*** + +### viewDate + +#### Get Signature + +> **get** **viewDate**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L537) + +Gets the date that is presented. By default it is the current date. + +##### Returns + +`Date` + +#### Set Signature + +> **set** **viewDate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L544) + +Sets the date that will be presented in the default view when the component renders. + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.viewDate` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L302) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L310) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.weekStart` + +## Methods + +### deselectDate() + +> **deselectDate**(`value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L746) + +Deselects date(s) (based on the selection type). + +#### Parameters + +##### value? + +`string` \| `Date` \| `Date`[] + +#### Returns + +`void` + +#### Inherited from + +`IgxCalendarBaseDirective.deselectDate` + +*** + +### formattedYears() + +> **formattedYears**(`value`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L464) + +#### Parameters + +##### value + +`Date` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.formattedYears` + +*** + +### getDecadeRange() + +> `protected` **getDecadeRange**(): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L491) + +#### Returns + +`object` + +##### end + +> **end**: `string` + +##### start + +> **start**: `string` + +#### Inherited from + +`IgxCalendarBaseDirective.getDecadeRange` + +*** + +### nextNavLabel() + +> `protected` **nextNavLabel**(`detail?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:480](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L480) + +#### Parameters + +##### detail? + +`string` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.nextNavLabel` + +*** + +### ngAfterViewInit() + +> **ngAfterViewInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:328](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L328) + +#### Returns + +`void` + +*** + +### ngOnInit() + +> **ngOnInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L324) + +#### Returns + +`void` + +*** + +### onMouseDown() + +> `protected` **onMouseDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L286) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### onWrapperBlur() + +> `protected` **onWrapperBlur**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:361](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L361) + +#### Parameters + +##### event + +`FocusEvent` + +#### Returns + +`void` + +*** + +### onWrapperFocus() + +> `protected` **onWrapperFocus**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:356](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L356) + +#### Parameters + +##### event + +`FocusEvent` + +#### Returns + +`void` + +*** + +### prevNavLabel() + +> `protected` **prevNavLabel**(`detail?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:469](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar-base.ts#L469) + +#### Parameters + +##### detail? + +`string` + +#### Returns + +`string` + +#### Inherited from + +`IgxCalendarBaseDirective.prevNavLabel` + +*** + +### selectDate() + +> **selectDate**(`value`): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts#L247) + +Selects a date. +```typescript + this.monthPicker.selectDate(new Date(`2018-06-12`)); +``` + +#### Parameters + +##### value + +`Date` + +#### Returns + +`Date` + +#### Overrides + +`IgxCalendarBaseDirective.selectDate` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMonthsViewComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMonthsViewComponent.md new file mode 100644 index 000000000..6f4656da6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxMonthsViewComponent.md @@ -0,0 +1,318 @@ +# Class: IgxMonthsViewComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L37) + +## Extends + +- `IgxCalendarViewDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxMonthsViewComponent**(): `IgxMonthsViewComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L193) + +#### Returns + +`IgxMonthsViewComponent` + +#### Inherited from + +`IgxCalendarViewDirective.constructor` + +## Properties + +### dayInterval + +> `protected` **dayInterval**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L54) + +#### Inherited from + +`IgxCalendarViewDirective.dayInterval` + +*** + +### el + +> **el**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L38) + +*** + +### formatView + +> **formatView**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L108) + +Gets/sets whether the view should be rendered +according to the locale and format, if any. + +#### Overrides + +`IgxCalendarViewDirective.formatView` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L57) + +Sets/gets the `id` of the months view. +If not set, the `id` will have value `"igx-months-view-0"`. +```html +<igx-months-view id="my-months-view"></igx-months-view> +``` +```typescript +let monthsViewId = this.monthsView.id; +``` + +#### Memberof + +IgxMonthsViewComponent + +*** + +### role + +> **role**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L58) + +#### Inherited from + +`IgxCalendarViewDirective.role` + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L90) + +Emits an event when a selection is made in the view. +Provides reference the `date` property in the component. + +#### Memberof + +IgxCalendarViewDirective + +#### Inherited from + +`IgxCalendarViewDirective.selected` + +*** + +### showActive + +> **showActive**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L82) + +Applies styles to the active item on view focus. + +#### Inherited from + +`IgxCalendarViewDirective.showActive` + +*** + +### tabIndex + +> **tabIndex**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L62) + +#### Inherited from + +`IgxCalendarViewDirective.tabIndex` + +## Accessors + +### activeDescendant + +#### Get Signature + +> **get** `protected` **activeDescendant**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L65) + +##### Returns + +`number` + +#### Inherited from + +`IgxCalendarViewDirective.activeDescendant` + +*** + +### date + +#### Get Signature + +> **get** **date**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L164) + +##### Returns + +`Date` + +#### Set Signature + +> **set** **date**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L158) + +Gets/sets the selected date of the view. +By default it's the current date. +```typescript +let date = this.view.date; +``` + +##### Memberof + +IgxYearsViewComponent + +##### Parameters + +###### value + +`Date` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarViewDirective.date` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L178) + +Gets the `locale` of the view. +Default value is `"en"`. +```typescript +let locale = this.view.locale; +``` + +##### Memberof + +IgxCalendarViewDirective + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L189) + +Sets the `locale` of the view. +Expects a valid BCP 47 language tag. +Default value is `"en"`. + +##### Memberof + +IgxCalendarViewDirective + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarViewDirective.locale` + +*** + +### monthFormat + +#### Get Signature + +> **get** **monthFormat**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L87) + +Gets the month format option of the months view. +```typescript +let monthFormat = this.monthsView.monthFormat. +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **monthFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L99) + +Sets the month format option of the months view. +```html +<igx-months-view> [monthFormat]="short'"</igx-months-view> +``` + +##### Memberof + +IgxMonthsViewComponent + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +*** + +### standalone + +#### Set Signature + +> **set** **standalone**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts#L76) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerItemDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerItemDirective.md new file mode 100644 index 000000000..74d7aaac4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerItemDirective.md @@ -0,0 +1,64 @@ +# Class: IgxNavDrawerItemDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L8) + +## Constructors + +### Constructor + +> **new IgxNavDrawerItemDirective**(): `IgxNavDrawerItemDirective` + +#### Returns + +`IgxNavDrawerItemDirective` + +## Properties + +### active + +> **active**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L19) + +Styles a navigation drawer item as selected. +If not set, `active` will have default value `false`. + +#### Example + +```html +<span igxDrawerItem [active]="true">Active Item</span> +``` + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L30) + +Disables a navigation drawer item. +If not set, `disabled` will have default value `false`. + +#### Example + +```html +<span igxDrawerItem [disabled]="true">Disabled Item</span> +``` + +*** + +### isHeader + +> **isHeader**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L41) + +Styles a navigation drawer item as a group header. +If not set, `isHeader` will have default value `false`. + +#### Example + +```html +<span igxDrawerItem [isHeader]="true">Header</span> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerMiniTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerMiniTemplateDirective.md new file mode 100644 index 000000000..9a22a8fdc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerMiniTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxNavDrawerMiniTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L98) + +## Constructors + +### Constructor + +> **new IgxNavDrawerMiniTemplateDirective**(): `IgxNavDrawerMiniTemplateDirective` + +#### Returns + +`IgxNavDrawerMiniTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L99) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerTemplateDirective.md new file mode 100644 index 000000000..c0fa4efdb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavDrawerTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxNavDrawerTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L90) + +## Constructors + +### Constructor + +> **new IgxNavDrawerTemplateDirective**(): `IgxNavDrawerTemplateDirective` + +#### Returns + +`IgxNavDrawerTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts#L91) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarActionDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarActionDirective.md new file mode 100644 index 000000000..d99b525e4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarActionDirective.md @@ -0,0 +1,15 @@ +# Class: IgxNavbarActionDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L21) + +IgxActionIcon is a container for the action nav icon of the IgxNavbar. + +## Constructors + +### Constructor + +> **new IgxNavbarActionDirective**(): `IgxNavbarActionDirective` + +#### Returns + +`IgxNavbarActionDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarComponent.md new file mode 100644 index 000000000..158d0d9cc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarComponent.md @@ -0,0 +1,158 @@ +# Class: IgxNavbarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L60) + +**Ignite UI for Angular Navbar** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html) + +The Ignite UI Navbar is most commonly used to provide an app header with a hamburger menu and navigation +state such as a "Go Back" button. It also supports other actions represented by icons. + +Example: +```html +<igx-navbar title="Sample App" actionButtonIcon="menu"> + <igx-icon>search</igx-icon> + <igx-icon>favorite</igx-icon> + <igx-icon>more_vert</igx-icon> +</igx-navbar> +``` + +## Constructors + +### Constructor + +> **new IgxNavbarComponent**(): `IgxNavbarComponent` + +#### Returns + +`IgxNavbarComponent` + +## Properties + +### action + +> **action**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L100) + +The event that will be thrown when the action is executed, +provides reference to the `IgxNavbar` component as argument +```typescript +public actionExc(event){ + alert("Action Execute!"); +} + //.. +``` +```html +<igx-navbar (action)="actionExc($event)" title="Sample App" actionButtonIcon="menu"> +``` + +*** + +### actionButtonIcon + +> **actionButtonIcon**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L77) + +Sets the icon of the `IgxNavbarComponent`. +```html +<igx-navbar [title]="currentView" actionButtonIcon="arrow_back"></igx-navbar> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L69) + +Sets the value of the `id` attribute. If not provided it will be automatically generated. +```html +<igx-navbar [id]="'igx-navbar-12'" title="Sample App" actionButtonIcon="menu"> +``` + +*** + +### title + +> **title**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L85) + +Sets the title of the `IgxNavbarComponent`. +```html +<igx-navbar title="Sample App" actionButtonIcon="menu"> +``` + +*** + +### titleId + +> **titleId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L109) + +Sets the titleId of the `IgxNavbarComponent`. If not set it will be automatically generated. +```html +<igx-navbar [titleId]="'igx-navbar-7'" title="Sample App" actionButtonIcon="menu"> +``` + +## Accessors + +### isActionButtonVisible + +#### Get Signature + +> **get** **isActionButtonVisible**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L146) + +Returns whether the `IgxNavbarComponent` action button is visible, true/false. +```typescript + @ViewChild("MyChild") +public navBar: IgxNavbarComponent; +ngAfterViewInit(){ + let actionButtonVisibile = this.navBar.isActionButtonVisible; +} +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isActionButtonVisible**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L131) + +Sets whether the action button of the `IgxNavbarComponent` is visible. +```html +<igx-navbar [title]="currentView" [isActionButtonVisible]="'false'"></igx-navbar> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### isTitleContentVisible + +#### Get Signature + +> **get** **isTitleContentVisible**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L153) + +##### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarTitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarTitleDirective.md new file mode 100644 index 000000000..ab85f42dd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavbarTitleDirective.md @@ -0,0 +1,13 @@ +# Class: IgxNavbarTitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts#L27) + +## Constructors + +### Constructor + +> **new IgxNavbarTitleDirective**(): `IgxNavbarTitleDirective` + +#### Returns + +`IgxNavbarTitleDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationCloseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationCloseDirective.md new file mode 100644 index 000000000..bec2359fa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationCloseDirective.md @@ -0,0 +1,43 @@ +# Class: IgxNavigationCloseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L47) + +Directive that can close targets through provided NavigationService. + +Usage: +``` +<button type="button" igxNavClose="ID">Close</button> +``` +Where the `ID` matches the ID of compatible `IToggleView` component. + +## Constructors + +### Constructor + +> **new IgxNavigationCloseDirective**(): `IgxNavigationCloseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L52) + +#### Returns + +`IgxNavigationCloseDirective` + +## Properties + +### state + +> **state**: [`IgxNavigationService`](IgxNavigationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L50) + +## Methods + +### closeNavigationDrawer() + +> **closeNavigationDrawer**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L59) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationDrawerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationDrawerComponent.md new file mode 100644 index 000000000..d86ddf46a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationDrawerComponent.md @@ -0,0 +1,414 @@ +# Class: IgxNavigationDrawerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L44) + +**Ignite UI for Angular Navigation Drawer** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer) + +The Ignite UI Navigation Drawer is a collapsible side navigation container commonly used in combination with the Navbar. + +Example: +```html +<igx-nav-drawer id="navigation" [isOpen]="true"> + <ng-template igxDrawer> + <nav> + <span igxDrawerItem [isHeader]="true">Email</span> + <span igxDrawerItem igxRipple>Inbox</span> + <span igxDrawerItem igxRipple>Deleted</span> + <span igxDrawerItem igxRipple>Sent</span> + </nav> + </ng-template> +</igx-nav-drawer> +``` + +## Implements + +- [`IToggleView`](../interfaces/IToggleView.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxNavigationDrawerComponent**(): `IgxNavigationDrawerComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L454) + +#### Returns + +`IgxNavigationDrawerComponent` + +## Properties + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L247) + +Event fired when the Navigation Drawer has closed. + +```html +<igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer> +``` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L239) + +Event fired as the Navigation Drawer is about to close. + +```html +<igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer> +``` + +*** + +### disableAnimation + +> **disableAnimation**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L191) + +Enables/disables the animation, when toggling the drawer. Set to `false` by default. +````html +<igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer> +```` + +*** + +### enableGestures + +> **enableGestures**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L114) + +Enables the use of touch gestures to manipulate the drawer: +- swipe/pan from edge to open, swipe-toggle and pan-drag. + +```typescript +// get +let gesturesEnabled = this.navdrawer.enableGestures; +``` + +```html +<!--set--> +<igx-nav-drawer [enableGestures]='true'></igx-nav-drawer> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L83) + +ID of the component + +```typescript +// get +let myNavDrawerId = this.navdrawer.id; +``` + +```html +<!--set--> + <igx-nav-drawer id='navdrawer'></igx-nav-drawer> +``` + +*** + +### miniWidth + +> **miniWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L206) + +Width of the drawer in its mini state. + +```typescript +// get +let navDrawerMiniWidth = this.navdrawer.miniWidth; +``` + +```html +<!--set--> +<igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer> +``` + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L231) + +Event fired when the Navigation Drawer has opened. + +```html +<igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer> +``` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L223) + +Event fired as the Navigation Drawer is about to open. + +```html + <igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer> +``` + +*** + +### pinChange + +> **pinChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L215) + +Pinned state change output for two-way binding. + +```html +<igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer> +``` + +*** + +### pinThreshold + +> **pinThreshold**: `number` = `1024` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L135) + +Minimum device width required for automatic pin to be toggled. +Default is 1024, can be set to a falsy value to disable this behavior. + +```typescript +// get +let navDrawerPinThreshold = this.navdrawer.pinThreshold; +``` + +```html +<!--set--> +<igx-nav-drawer [pinThreshold]='1024'></igx-nav-drawer> +``` + +*** + +### position + +> **position**: `string` = `'left'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L98) + +Position of the Navigation Drawer. Can be "left"(default) or "right". + +```typescript +// get +let myNavDrawerPosition = this.navdrawer.position; +``` + +```html +<!--set--> +<igx-nav-drawer [position]="'left'"></igx-nav-drawer> +``` + +## Accessors + +### isOpen + +#### Get Signature + +> **get** **isOpen**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L279) + +State of the drawer. + +```typescript +// get +let navDrawerIsOpen = this.navdrawer.isOpen; +``` + +```html +<!--set--> +<igx-nav-drawer [isOpen]='false'></igx-nav-drawer> +``` + +Two-way data binding. +```html +<!--set--> +<igx-nav-drawer [(isOpen)]='model.isOpen'></igx-nav-drawer> +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **isOpen**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L282) + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +*** + +### pin + +#### Get Signature + +> **get** **pin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L152) + +When pinned the drawer is relatively positioned instead of sitting above content. +May require additional layout styling. + +```typescript +// get +let navDrawerIsPinned = this.navdrawer.pin; +``` + +```html +<!--set--> +<igx-nav-drawer [pin]="false"></igx-nav-drawer> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pin**(`v`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L155) + +##### Parameters + +###### v + +`boolean` + +##### Returns + +`void` + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L176) + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L179) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## Methods + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L582) + +Close the Navigation Drawer. Has no effect if already closed. + +```typescript +this.navdrawer.close(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`close`](../interfaces/IToggleView.md#close) + +*** + +### open() + +> **open**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L551) + +Open the Navigation Drawer. Has no effect if already opened. + +```typescript +this.navdrawer.open(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`open`](../interfaces/IToggleView.md#open) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:536](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts#L536) + +Toggle the open state of the Navigation Drawer. + +```typescript +this.navdrawer.toggle(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`toggle`](../interfaces/IToggleView.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationService.md new file mode 100644 index 000000000..128183364 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationService.md @@ -0,0 +1,143 @@ +# Class: IgxNavigationService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L10) + +Common service to be injected between components where those implementing common +ToggleView interface can register and toggle directives can call their methods. +TODO: Track currently active? Events? + +## Constructors + +### Constructor + +> **new IgxNavigationService**(): `IgxNavigationService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L13) + +#### Returns + +`IgxNavigationService` + +## Methods + +### add() + +> **add**(`id`, `navItem`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L17) + +#### Parameters + +##### id + +`string` + +##### navItem + +[`IToggleView`](../interfaces/IToggleView.md) + +#### Returns + +`void` + +*** + +### close() + +> **close**(`id`, ...`args`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L41) + +#### Parameters + +##### id + +`string` + +##### args + +...`any`[] + +#### Returns + +`any` + +*** + +### get() + +> **get**(`id`): [`IToggleView`](../interfaces/IToggleView.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L25) + +#### Parameters + +##### id + +`string` + +#### Returns + +[`IToggleView`](../interfaces/IToggleView.md) + +*** + +### open() + +> **open**(`id`, ...`args`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L36) + +#### Parameters + +##### id + +`string` + +##### args + +...`any`[] + +#### Returns + +`any` + +*** + +### remove() + +> **remove**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L21) + +#### Parameters + +##### id + +`string` + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(`id`, ...`args`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/nav.service.ts#L31) + +#### Parameters + +##### id + +`string` + +##### args + +...`any`[] + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationToggleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationToggleDirective.md new file mode 100644 index 000000000..29cdfd452 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNavigationToggleDirective.md @@ -0,0 +1,43 @@ +# Class: IgxNavigationToggleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L17) + +Directive that can toggle targets through provided NavigationService. + +Usage: +``` +<button type="button" igxNavToggle="ID">Toggle</button> +``` +Where the `ID` matches the ID of compatible `IToggleView` component. + +## Constructors + +### Constructor + +> **new IgxNavigationToggleDirective**(): `IgxNavigationToggleDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L22) + +#### Returns + +`IgxNavigationToggleDirective` + +## Properties + +### state + +> **state**: [`IgxNavigationService`](IgxNavigationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L20) + +## Methods + +### toggleNavigationDrawer() + +> **toggleNavigationDrawer**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/directives.ts#L29) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNotificationsDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNotificationsDirective.md new file mode 100644 index 000000000..2477e5182 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNotificationsDirective.md @@ -0,0 +1,434 @@ +# Abstract Class: IgxNotificationsDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L7) + +Common interface for Components with show and collapse functionality + +## Extends + +- [`IgxToggleDirective`](IgxToggleDirective.md) + +## Extended by + +- [`IgxSnackbarComponent`](IgxSnackbarComponent.md) +- [`IgxToastComponent`](IgxToastComponent.md) + +## Implements + +- [`IToggleView`](../interfaces/IToggleView.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxNotificationsDirective**(): `IgxNotificationsDirective` + +#### Returns + +`IgxNotificationsDirective` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`constructor`](IgxToggleDirective.md#constructor) + +## Properties + +### \_overlayId + +> `protected` **\_overlayId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L193) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`_overlayId`](IgxToggleDirective.md#_overlayid) + +*** + +### appended + +> **appended**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L143) + +Emits an event after the toggle element is appended to the overlay container. + +```typescript +onAppended() { + alert("Content appended!"); +} +``` + +```html +<div + igxToggle + (appended)='onToggleAppended()'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`appended`](IgxToggleDirective.md#appended) + +*** + +### ariaLive + +> **ariaLive**: `string` = `'polite'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L15) + +Sets/gets the `aria-live` attribute. +If not set, `aria-live` will have value `"polite"`. + +*** + +### autoHide + +> **autoHide**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L22) + +Sets/gets whether the element will be hidden after the `displayTime` is over. +Default value is `true`. + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L105) + +Emits an event after the toggle container is closed. + +```typescript +onToggleClosed(event) { + alert("Toggle closed!"); +} +``` + +```html +<div + igxToggle + (closed)='onToggleClosed($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`closed`](IgxToggleDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L124) + +Emits an event before the toggle container is closed. + +```typescript +onToggleClosing(event) { + alert("Toggle closing!"); +} +``` + +```html +<div + igxToggle + (closing)='onToggleClosing($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`closing`](IgxToggleDirective.md#closing) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L196) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`destroy$`](IgxToggleDirective.md#destroy) + +*** + +### displayTime + +> **displayTime**: `number` = `4000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L30) + +Sets/gets the duration of time span (in milliseconds) which the element will be visible +after it is being shown. +Default value is `4000`. + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L160) + +Identifier which is registered into `IgxNavigationService` + +```typescript +let myToggleId = this.toggle.id; +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`id`](IgxToggleDirective.md#id) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L67) + +Emits an event after the toggle container is opened. + +```typescript +onToggleOpened(event) { + alert("Toggle opened!"); +} +``` + +```html +<div + igxToggle + (opened)='onToggleOpened($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`opened`](IgxToggleDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L86) + +Emits an event before the toggle container is opened. + +```typescript +onToggleOpening(event) { + alert("Toggle opening!"); +} +``` + +```html +<div + igxToggle + (opening)='onToggleOpening($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`opening`](IgxToggleDirective.md#opening) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L39) + +Gets/Sets the container used for the element. + +#### Remarks + +`outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L46) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`overlayService`](IgxToggleDirective.md#overlayservice) + +## Accessors + +### isVisible + +#### Get Signature + +> **get** **isVisible**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L46) + +Enables/Disables the visibility of the element. +If not set, the `isVisible` attribute will have value `false`. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isVisible**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L50) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### overlayId + +#### Get Signature + +> **get** **overlayId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L303) + +Returns the id of the overlay the content is rendered in. +```typescript +this.myToggle.overlayId; +``` + +##### Returns + +`string` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`overlayId`](IgxToggleDirective.md#overlayid) + +## Methods + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L104) + +Hides the element. + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`close`](../interfaces/IToggleView.md#close) + +#### Overrides + +[`IgxToggleDirective`](IgxToggleDirective.md).[`close`](IgxToggleDirective.md#close) + +*** + +### reposition() + +> **reposition**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L313) + +Repositions the toggle. +```typescript +this.myToggle.reposition(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`reposition`](IgxToggleDirective.md#reposition) + +*** + +### setOffset() + +> **setOffset**(`deltaX`, `deltaY`, `offsetMode?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L321) + +Offsets the content along the corresponding axis by the provided amount with optional +offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set + +#### Parameters + +##### deltaX + +`number` + +##### deltaY + +`number` + +##### offsetMode? + +[`OffsetMode`](../enumerations/OffsetMode.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`setOffset`](IgxToggleDirective.md#setoffset) + +*** + +### toggle() + +> **toggle**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L281) + +Opens or closes the toggle, depending on its current state. + +```typescript +this.myToggle.toggle(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`toggle`](../interfaces/IToggleView.md#toggle) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`toggle`](IgxToggleDirective.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberFilteringOperand.md new file mode 100644 index 000000000..e70c7e8b3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberFilteringOperand.md @@ -0,0 +1,163 @@ +# Class: IgxNumberFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:757](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L757) + +Provides filtering operations for numbers + +## Export + +## Extends + +- [`IgxFilteringOperand`](IgxFilteringOperand.md) + +## Constructors + +### Constructor + +> `protected` **new IgxNumberFilteringOperand**(): `IgxNumberFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:758](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L758) + +#### Returns + +`IgxNumberFilteringOperand` + +#### Overrides + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`constructor`](IgxFilteringOperand.md#constructor) + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`operations`](IgxFilteringOperand.md#operations) + +*** + +### \_instance + +> `protected` `static` **\_instance**: [`IgxFilteringOperand`](IgxFilteringOperand.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`_instance`](IgxFilteringOperand.md#_instance) + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`append`](IgxFilteringOperand.md#append) + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`condition`](IgxFilteringOperand.md#condition) + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`conditionList`](IgxFilteringOperand.md#conditionlist) + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L80) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`findValueInSet`](IgxFilteringOperand.md#findvalueinset) + +*** + +### instance() + +> `static` **instance**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`instance`](IgxFilteringOperand.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberFormatterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberFormatterPipe.md new file mode 100644 index 000000000..ba0ac1a8a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberFormatterPipe.md @@ -0,0 +1,43 @@ +# Class: IgxNumberFormatterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L21) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxNumberFormatterPipe**(): `IgxNumberFormatterPipe` + +#### Returns + +`IgxNumberFormatterPipe` + +## Methods + +### transform() + +> **transform**(`value`, `digitsInfo?`, `locale?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L24) + +#### Parameters + +##### value + +`string` \| `number` + +##### digitsInfo? + +`string` + +##### locale? + +`string` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberSummaryOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberSummaryOperand.md new file mode 100644 index 000000000..08d2b6e64 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxNumberSummaryOperand.md @@ -0,0 +1,235 @@ +# Class: IgxNumberSummaryOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L63) + +## Extends + +- [`IgxSummaryOperand`](IgxSummaryOperand.md) + +## Constructors + +### Constructor + +> **new IgxNumberSummaryOperand**(): `IgxNumberSummaryOperand` + +#### Returns + +`IgxNumberSummaryOperand` + +#### Inherited from + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`constructor`](IgxSummaryOperand.md#constructor) + +## Methods + +### operate() + +> **operate**(`data?`, `allData?`, `fieldName?`, `groupRecord?`): [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L147) + +Executes the static methods and returns `IgxSummaryResult[]`. +```typescript +interface IgxSummaryResult { + key: string; + label: string; + summaryResult: any; +} +``` +Can be overridden in the inherited classes to provide customization for the `summary`. +```typescript +class CustomNumberSummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] { + const result = super.operate(data, allData, fieldName, groupRecord); + result.push({ + key: "avg", + label: "Avg", + summaryResult: IgxNumberSummaryOperand.average(data) + }); + result.push({ + key: 'mdn', + label: 'Median', + summaryResult: this.findMedian(data) + }); + return result; + } +} +this.grid.getColumnByName('ColumnName').summaries = CustomNumberSummary; +``` + +#### Parameters + +##### data? + +`any`[] = `[]` + +##### allData? + +`any`[] = `[]` + +##### fieldName? + +`string` + +##### groupRecord? + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +#### Returns + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +#### Memberof + +IgxNumberSummaryOperand + +#### Overrides + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`operate`](IgxSummaryOperand.md#operate) + +*** + +### average() + +> `static` **average**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L109) + +Returns the average numeric value in the data provided data records. +If filtering is applied, returns the average numeric value in the filtered data records. +```typescript +IgxSummaryOperand.average(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxNumberSummaryOperand + +*** + +### count() + +> `static` **count**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L18) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxSummaryOperand + +#### Inherited from + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`count`](IgxSummaryOperand.md#count) + +*** + +### max() + +> `static` **max**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L85) + +Returns the maximum numeric value in the provided data records. +If filtering is applied, returns the maximum value in the filtered data records. +```typescript +IgxNumberSummaryOperand.max(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxNumberSummaryOperand + +*** + +### min() + +> `static` **min**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L73) + +Returns the minimum numeric value in the provided data records. +If filtering is applied, returns the minimum value in the filtered data records. +```typescript +IgxNumberSummaryOperand.min(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxNumberSummaryOperand + +*** + +### sum() + +> `static` **sum**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L97) + +Returns the sum of the numeric values in the provided data records. +If filtering is applied, returns the sum of the numeric values in the data records. +```typescript +IgxNumberSummaryOperand.sum(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxNumberSummaryOperand diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxOverlayOutletDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxOverlayOutletDirective.md new file mode 100644 index 000000000..183778dfe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxOverlayOutletDirective.md @@ -0,0 +1,27 @@ +# Class: IgxOverlayOutletDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L25) + +Mark an element as an igxOverlay outlet container. +Directive instance is exported as `overlay-outlet` to be assigned to templates variables: +```html +<div igxOverlayOutlet #outlet="overlay-outlet"></div> +``` + +## Constructors + +### Constructor + +> **new IgxOverlayOutletDirective**(): `IgxOverlayOutletDirective` + +#### Returns + +`IgxOverlayOutletDirective` + +## Properties + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L27) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxOverlayService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxOverlayService.md new file mode 100644 index 000000000..b197fc078 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxOverlayService.md @@ -0,0 +1,476 @@ +# Class: IgxOverlayService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L41) + +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-main) +The overlay service allows users to show components on overlay div above all other elements in the page. + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxOverlayService**(): `IgxOverlayService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L136) + +#### Returns + +`IgxOverlayService` + +## Properties + +### animationStarting + +> **animationStarting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L116) + +Emitted just before the overlay animation start. +```typescript +animationStarting(event: OverlayAnimationEventArgs){ + const animationStarting = event; +} +``` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L86) + +Emitted after the overlay content is closed and all animations are finished. +```typescript +closed(event: OverlayEventArgs){ + const closed = event; +} +``` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L76) + +Emitted just before the overlay content starts to close. +```typescript +closing(event: OverlayCancelableEventArgs){ + const closing = event; +} +``` + +*** + +### contentAppended + +> **contentAppended**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L106) + +Emitted after the content is appended to the overlay, and before animations are started. +```typescript +contentAppended(event: OverlayEventArgs){ + const contentAppended = event; +} +``` + +*** + +### contentAppending + +> **contentAppending**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L96) + +Emitted before the content is appended to the overlay. +```typescript +contentAppending(event: OverlayEventArgs){ + const contentAppending = event; +} +``` + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L66) + +Emitted after the overlay content is opened and all animations are finished. +```typescript +opened(event: OverlayEventArgs){ + const opened = event; +} +``` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L56) + +Emitted just before the overlay content starts to open. +```typescript +opening(event: OverlayCancelableEventArgs){ + const opening = event; +} +``` + +*** + +### platformUtil + +> `protected` **platformUtil**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L45) + +## Methods + +### attach() + +#### Call Signature + +> **attach**(`element`, `settings?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L293) + +Generates Id. Provide this Id when call `show(id)` method + +##### Parameters + +###### element + +`ElementRef` + +###### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +(optional): Display settings for the overlay, such as positioning and scroll/close behavior. + +##### Returns + +`string` + +Id of the created overlay. Valid until `detach` is called. + +#### Call Signature + +> **attach**(`component`, `settings?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L304) + +Generates Id. Provide this Id when call `show(id)` method + +Note created instance is in root scope, prefer the `viewContainerRef` overload when local injection context is needed. + +##### Parameters + +###### component + +`Type`\<`any`\> + +Component Type to show in overlay + +###### settings? + +[`OverlayCreateSettings`](../interfaces/OverlayCreateSettings.md) + +(optional): Create settings for the overlay, such as positioning and scroll/close behavior. +Includes also an optional `Injector` to add to the created dynamic component's injectors. + +##### Returns + +`string` + +Id of the created overlay. Valid until `detach` is called. + +#### Call Signature + +> **attach**(`component`, `viewContainerRef`, `settings?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L313) + +Generates an Id. Provide this Id when calling the `show(id)` method + +##### Parameters + +###### component + +`Type`\<`any`\> + +Component Type to show in overlay + +###### viewContainerRef + +`ViewContainerRef` + +Reference to the container where created component's host view will be inserted + +###### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +(optional): Display settings for the overlay, such as positioning and scroll/close behavior. + +##### Returns + +`string` + +*** + +### detach() + +> **detach**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:361](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L361) + +Remove overlay with the provided id. + +#### Parameters + +##### id + +`string` + +Id of the overlay to remove +```typescript +this.overlay.detach(id); +``` + +#### Returns + +`void` + +*** + +### detachAll() + +> **detachAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L386) + +Remove all the overlays. +```typescript +this.overlay.detachAll(); +``` + +#### Returns + +`void` + +*** + +### hide() + +> **hide**(`id`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L465) + +Hides the component with the ID provided as a parameter. +```typescript +this.overlay.hide(id); +``` + +#### Parameters + +##### id + +`string` + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### hideAll() + +> **hideAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L475) + +Hides all the components and the overlay. +```typescript +this.overlay.hideAll(); +``` + +#### Returns + +`void` + +*** + +### reposition() + +> **reposition**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L489) + +Repositions the component with ID provided as a parameter. + +#### Parameters + +##### id + +`string` + +Id to reposition overlay for +```typescript +this.overlay.reposition(id); +``` + +#### Returns + +`void` + +*** + +### setOffset() + +> **setOffset**(`id`, `deltaX`, `deltaY`, `offsetMode?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:522](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L522) + +Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values + +#### Parameters + +##### id + +`string` + +Id to offset overlay for + +##### deltaX + +`number` + +Amount of offset in horizontal direction + +##### deltaY + +`number` + +Amount of offset in vertical direction + +##### offsetMode? + +[`OffsetMode`](../enumerations/OffsetMode.md) + +Determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set +```typescript +this.overlay.setOffset(id, deltaX, deltaY, offsetMode); +``` + +#### Returns + +`void` + +*** + +### show() + +> **show**(`id`, `settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:398](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L398) + +Shows the overlay for provided id. + +#### Parameters + +##### id + +`string` + +Id to show overlay for + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +Display settings for the overlay, such as positioning and scroll/close behavior. + +#### Returns + +`void` + +*** + +### createAbsoluteOverlaySettings() + +> `static` **createAbsoluteOverlaySettings**(`position?`, `outlet?`): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L147) + +Creates overlay settings with global or container position strategy and preset position settings + +#### Parameters + +##### position? + +[`AbsolutePosition`](../enumerations/AbsolutePosition.md) + +Preset position settings. Default position is 'center' + +##### outlet? + +`any` + +The outlet container to attach the overlay to + +#### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +Non-modal overlay settings based on Global or Container position strategy and the provided position. + +*** + +### createRelativeOverlaySettings() + +> `static` **createRelativeOverlaySettings**(`target`, `position?`, `strategy?`): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/overlay.ts#L169) + +Creates overlay settings with auto, connected or elastic position strategy and preset position settings + +#### Parameters + +##### target + +`HTMLElement` \| [`Point`](Point.md) + +Attaching target for the component to show + +##### position? + +[`RelativePosition`](../enumerations/RelativePosition.md) + +Preset position settings. By default the element is positioned below the target, left aligned. + +##### strategy? + +[`RelativePositionStrategy`](../enumerations/RelativePositionStrategy.md) + +The relative position strategy to be applied to the overlay settings. Default is Auto positioning strategy. + +#### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +Non-modal overlay settings based on the provided target, strategy and position. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPageNavigationComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPageNavigationComponent.md new file mode 100644 index 000000000..d9fe6e31a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPageNavigationComponent.md @@ -0,0 +1,31 @@ +# Class: IgxPageNavigationComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L397) + +## Constructors + +### Constructor + +> **new IgxPageNavigationComponent**(): `IgxPageNavigationComponent` + +#### Returns + +`IgxPageNavigationComponent` + +## Properties + +### paginator + +> **paginator**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:398](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L398) + +*** + +### role + +> **role**: `string` = `'navigation'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L412) + +Sets the `role` attribute of the element. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPageSizeSelectorComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPageSizeSelectorComponent.md new file mode 100644 index 000000000..96120b097 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPageSizeSelectorComponent.md @@ -0,0 +1,43 @@ +# Class: IgxPageSizeSelectorComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:372](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L372) + +## Constructors + +### Constructor + +> **new IgxPageSizeSelectorComponent**(): `IgxPageSizeSelectorComponent` + +#### Returns + +`IgxPageSizeSelectorComponent` + +## Properties + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L384) + +*** + +### paginator + +> **paginator**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L373) + +## Accessors + +### labelId + +#### Get Signature + +> **get** **labelId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L386) + +##### Returns + +`string` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorComponent.md new file mode 100644 index 000000000..530067de7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorComponent.md @@ -0,0 +1,514 @@ +# Class: IgxPaginatorComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L51) + +Paginator component description + +## Igx Parent + +IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * + +## Constructors + +### Constructor + +> **new IgxPaginatorComponent**(): `IgxPaginatorComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L269) + +#### Returns + +`IgxPaginatorComponent` + +## Properties + +### \_page + +> `protected` **\_page**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L125) + +*** + +### \_perPage + +> `protected` **\_perPage**: `number` = `15` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L128) + +*** + +### \_selectOptions + +> `protected` **\_selectOptions**: `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L127) + +*** + +### \_totalRecords + +> `protected` **\_totalRecords**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L126) + +*** + +### pageChange + +> **pageChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L93) + +Emitted after the current page is changed. + +#### Example + +```html +<igx-paginator (pageChange)="onPageChange($event)"></igx-paginator> +``` +```typescript +public onPageChange(page: number) { + this.currentPage = page; +} +``` + +#### Implementation of + +`IgxPaginatorToken.pageChange` + +*** + +### paging + +> **paging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L106) + +Emitted before paging is performed. + +#### Remarks + +Returns an object consisting of the current and next pages. + +#### Example + +```html +<igx-paginator (paging)="pagingHandler($event)"></igx-paginator> +``` + +*** + +### pagingDone + +> **pagingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L119) + +Emitted after paging is performed. + +#### Remarks + +Returns an object consisting of the previous and current pages. + +#### Example + +```html +<igx-paginator (pagingDone)="pagingDone($event)"></igx-paginator> +``` + +*** + +### perPageChange + +> **perPageChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L77) + +Emitted when `perPage` property value of the paginator is changed. + +#### Example + +```html +<igx-paginator (perPageChange)="onPerPageChange($event)"></igx-paginator> +``` +```typescript +public onPerPageChange(perPage: number) { + this.perPage = perPage; +} +``` + +*** + +### totalPages + +> **totalPages**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L124) + +Total pages calculated from totalRecords and perPage + +## Accessors + +### isFirstPage + +#### Get Signature + +> **get** **isFirstPage**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L291) + +Returns if the current page is the first page. +```typescript +const lastPage = this.paginator.isFirstPage; +``` + +##### Returns + +`boolean` + +*** + +### isLastPage + +#### Get Signature + +> **get** **isLastPage**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L281) + +Returns if the current page is the last page. +```typescript +const lastPage = this.paginator.isLastPage; +``` + +##### Returns + +`boolean` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L314) + +##### Returns + +`any` + +*** + +### overlaySettings + +#### Get Signature + +> **get** **overlaySettings**(): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:244](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L244) + +Sets custom OverlaySettings. +```html +<igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator> +``` + +##### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Set Signature + +> **set** **overlaySettings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L248) + +##### Parameters + +###### value + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +##### Returns + +`void` + +*** + +### page + +#### Get Signature + +> **get** **page**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L149) + +Gets/Sets the current page of the paginator. +The default is 0. +```typescript +let page = this.paginator.page; +``` + +##### Memberof + +IgxPaginatorComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **page**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L153) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxPaginatorToken.page` + +*** + +### perPage + +#### Get Signature + +> **get** **perPage**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L180) + +Gets/Sets the number of visible items per page in the paginator. +The default is 15. +```typescript +let itemsPerPage = this.paginator.perPage; +``` + +##### Memberof + +IgxPaginatorComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **perPage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L184) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxPaginatorToken.perPage` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L265) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L258) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### selectOptions + +#### Get Signature + +> **get** **selectOptions**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L228) + +Sets custom options in the select of the paginator +```typescript +let options = this.paginator.selectOptions; +``` + +##### Memberof + +IgxPaginatorComponent + +##### Returns + +`number`[] + +#### Set Signature + +> **set** **selectOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:232](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L232) + +##### Parameters + +###### value + +`number`[] + +##### Returns + +`void` + +*** + +### totalRecords + +#### Get Signature + +> **get** **totalRecords**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L206) + +Sets the total records. +```typescript +let totalRecords = this.paginator.totalRecords; +``` + +##### Memberof + +IgxPaginatorComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalRecords**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L210) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxPaginatorToken.totalRecords` + +## Methods + +### nextPage() + +> **nextPage**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L326) + +Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page. +```typescript +this.paginator.nextPage(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxPaginatorComponent + +*** + +### paginate() + +> **paginate**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L353) + +Goes to the desired page index. +```typescript +this.paginator.paginate(1); +``` + +#### Parameters + +##### val + +`number` + +#### Returns + +`void` + +#### Memberof + +IgxPaginatorComponent + +#### Implementation of + +`IgxPaginatorToken.paginate` + +*** + +### previousPage() + +> **previousPage**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:339](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L339) + +Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page. +```typescript +this.paginator.previousPage(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxPaginatorComponent diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorContentDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorContentDirective.md new file mode 100644 index 000000000..8a8da4d52 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorContentDirective.md @@ -0,0 +1,13 @@ +# Class: IgxPaginatorContentDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts#L20) + +## Constructors + +### Constructor + +> **new IgxPaginatorContentDirective**(): `IgxPaginatorContentDirective` + +#### Returns + +`IgxPaginatorContentDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorDirective.md new file mode 100644 index 000000000..f7903700e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPaginatorDirective.md @@ -0,0 +1,21 @@ +# Class: IgxPaginatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L18) + +## Constructors + +### Constructor + +> **new IgxPaginatorDirective**(): `IgxPaginatorDirective` + +#### Returns + +`IgxPaginatorDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfExporterOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfExporterOptions.md new file mode 100644 index 000000000..17a668448 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfExporterOptions.md @@ -0,0 +1,438 @@ +# Class: IgxPdfExporterOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L6) + +Objects of this class are used to configure the PDF exporting process. + +## Extends + +- [`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +## Constructors + +### Constructor + +> **new IgxPdfExporterOptions**(`fileName`): `IgxPdfExporterOptions` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L113) + +#### Parameters + +##### fileName + +`string` + +#### Returns + +`IgxPdfExporterOptions` + +#### Overrides + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`constructor`](IgxExporterOptionsBase.md#constructor) + +## Properties + +### \_fileExtension + +> `protected` **\_fileExtension**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L105) + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`_fileExtension`](IgxExporterOptionsBase.md#_fileextension) + +*** + +### alwaysExportHeaders + +> **alwaysExportHeaders**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L101) + +Specifies whether the headers should be exported if there is no data. +```typescript +let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders; +this.exportOptions.alwaysExportHeaders = false; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`alwaysExportHeaders`](IgxExporterOptionsBase.md#alwaysexportheaders) + +*** + +### customFont? + +> `optional` **customFont?**: [`PdfUnicodeFont`](../interfaces/PdfUnicodeFont.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L111) + +Custom font configuration for Unicode character support in PDF exports. + +By default, the PDF exporter uses the built-in Helvetica font, which only supports +basic Latin characters. If your data contains non-Latin characters (such as Cyrillic, +Chinese, Japanese, Arabic, Hebrew, or special symbols), you must provide a custom +TrueType font (TTF) that includes the required character glyphs. + +The font data must be provided as a Base64-encoded string of the TTF file contents. +You can optionally provide a separate bold variant for header styling. + +#### Remarks + +To convert a TTF file to Base64, you can use Node.js: +```javascript +const fs = require('fs'); +const fontData = fs.readFileSync('path/to/font.ttf'); +const base64 = fontData.toString('base64'); +fs.writeFileSync('font-base64.ts', `export const MY_FONT = '${base64}';`); +``` + +Or use an online Base64 encoder tool to convert your TTF file. + +#### Examples + +Basic usage with a single font (used for both normal and bold text): +```typescript +import { NOTO_SANS_REGULAR } from './fonts/noto-sans'; + +const options = new IgxPdfExporterOptions('Export'); +options.customFont = { + name: 'NotoSans', + data: NOTO_SANS_REGULAR +}; +this.pdfExporter.export(this.grid, options); +``` + +Usage with separate normal and bold font variants: +```typescript +import { NOTO_SANS_REGULAR, NOTO_SANS_BOLD } from './fonts/noto-sans'; + +const options = new IgxPdfExporterOptions('Export'); +options.customFont = { + name: 'NotoSans', + data: NOTO_SANS_REGULAR, + bold: { + name: 'NotoSans-Bold', + data: NOTO_SANS_BOLD + } +}; +this.pdfExporter.export(this.grid, options); +``` + +```ts +Recommended fonts for Unicode support: +- Noto Sans: Covers most Unicode scripts (https://fonts.google.com/noto) +- Arial Unicode MS: Comprehensive Unicode coverage +- Source Han Sans: Excellent CJK (Chinese, Japanese, Korean) support +``` + +#### Memberof + +IgxPdfExporterOptions + +*** + +### exportSummaries + +> **exportSummaries**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L79) + +Specifies whether the exported data should include column summaries. +```typescript +let exportSummaries = this.exportOptions.exportSummaries; +this.exportOptions.exportSummaries = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`exportSummaries`](IgxExporterOptionsBase.md#exportsummaries) + +*** + +### fontSize + +> **fontSize**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L49) + +Specifies the font size for the table content. (10 by default) +```typescript +let fontSize = this.exportOptions.fontSize; +this.exportOptions.fontSize = 12; +``` + +#### Memberof + +IgxPdfExporterOptions + +*** + +### freezeHeaders + +> **freezeHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L90) + +Specifies whether the exported data should have frozen headers. +```typescript +let freezeHeaders = this.exportOptions.freezeHeaders; +this.exportOptions.freezeHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`freezeHeaders`](IgxExporterOptionsBase.md#freezeheaders) + +*** + +### ignoreColumnsOrder + +> **ignoreColumnsOrder**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L33) + +Specifies if the exporter should ignore the current column order in the IgxGrid. +```typescript +let ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder; +this.exportOptions.ignoreColumnsOrder = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreColumnsOrder`](IgxExporterOptionsBase.md#ignorecolumnsorder) + +*** + +### ignoreColumnsVisibility + +> **ignoreColumnsVisibility**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L11) + +Specifies whether hidden columns should be exported. +```typescript +let ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility; +this.exportOptions.ignoreColumnsVisibility = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreColumnsVisibility`](IgxExporterOptionsBase.md#ignorecolumnsvisibility) + +*** + +### ignoreFiltering + +> **ignoreFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L22) + +Specifies whether filtered out rows should be exported. +```typescript +let ignoreFiltering = this.exportOptions.ignoreFiltering; +this.exportOptions.ignoreFiltering = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreFiltering`](IgxExporterOptionsBase.md#ignorefiltering) + +*** + +### ignoreGrouping + +> **ignoreGrouping**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L57) + +Specifies whether the exported data should be grouped as in the provided IgxGrid. +```typescript +let ignoreGrouping = this.exportOptions.ignoreGrouping; +this.exportOptions.ignoreGrouping = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreGrouping`](IgxExporterOptionsBase.md#ignoregrouping) + +*** + +### ignoreMultiColumnHeaders + +> **ignoreMultiColumnHeaders**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L68) + +Specifies whether the exported data should include multi column headers as in the provided IgxGrid. +```typescript +let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders; +this.exportOptions.ignoreMultiColumnHeaders = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreMultiColumnHeaders`](IgxExporterOptionsBase.md#ignoremulticolumnheaders) + +*** + +### ignoreSorting + +> **ignoreSorting**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L46) + +Specifies whether the exported data should be sorted as in the provided IgxGrid. +When you export grouped data, setting ignoreSorting to true will cause +the grouping to fail because it relies on the sorting of the records. +```typescript +let ignoreSorting = this.exportOptions.ignoreSorting; +this.exportOptions.ignoreSorting = true; +``` + +#### Memberof + +IgxExporterOptionsBase + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`ignoreSorting`](IgxExporterOptionsBase.md#ignoresorting) + +*** + +### pageOrientation + +> **pageOrientation**: `"portrait"` \| `"landscape"` = `'landscape'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L16) + +Specifies the page orientation. (portrait or landscape, landscape by default) +```typescript +let pageOrientation = this.exportOptions.pageOrientation; +this.exportOptions.pageOrientation = 'portrait'; +``` + +#### Memberof + +IgxPdfExporterOptions + +*** + +### pageSize + +> **pageSize**: `string` = `'a4'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L27) + +Specifies the page size. (a4, a3, letter, legal, etc., a4 by default) +```typescript +let pageSize = this.exportOptions.pageSize; +this.exportOptions.pageSize = 'letter'; +``` + +#### Memberof + +IgxPdfExporterOptions + +*** + +### showTableBorders + +> **showTableBorders**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L38) + +Specifies whether to show table borders. (True by default) +```typescript +let showTableBorders = this.exportOptions.showTableBorders; +this.exportOptions.showTableBorders = false; +``` + +#### Memberof + +IgxPdfExporterOptions + +## Accessors + +### fileName + +#### Get Signature + +> **get** **fileName**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L121) + +Gets the file name which will be used for the exporting operation. +```typescript +let fileName = this.exportOptions.fileName; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Returns + +`string` + +#### Set Signature + +> **set** **fileName**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts#L133) + +Sets the file name which will be used for the exporting operation. +```typescript +this.exportOptions.fileName = 'exportedData01'; +``` + +##### Memberof + +IgxExporterOptionsBase + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md).[`fileName`](IgxExporterOptionsBase.md#filename) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfExporterService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfExporterService.md new file mode 100644 index 000000000..d7379afb7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfExporterService.md @@ -0,0 +1,246 @@ +# Class: IgxPdfExporterService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts#L36) + +**Ignite UI for Angular PDF Exporter Service** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter_pdf.html) + +The Ignite UI for Angular PDF Exporter service can export data in PDF format from both raw data +(array) or from an `IgxGrid`. + +Example: +```typescript +public localData = [ + { Name: "Eric Ridley", Age: "26" }, + { Name: "Alanis Brook", Age: "22" }, + { Name: "Jonathan Morris", Age: "23" } +]; + +constructor(private pdfExportService: IgxPdfExporterService) { +} + +this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions("FileName")); +``` + +## Extends + +- [`IgxBaseExporter`](IgxBaseExporter.md) + +## Constructors + +### Constructor + +> **new IgxPdfExporterService**(): `IgxPdfExporterService` + +#### Returns + +`IgxPdfExporterService` + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`constructor`](IgxBaseExporter.md#constructor) + +## Properties + +### \_ownersMap + +> `protected` **\_ownersMap**: `Map`\<`any`, [`IColumnList`](../interfaces/IColumnList.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L205) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`_ownersMap`](IgxBaseExporter.md#_ownersmap) + +*** + +### \_sort + +> `protected` **\_sort**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L203) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`_sort`](IgxBaseExporter.md#_sort) + +*** + +### columnExporting + +> **columnExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L201) + +This event is emitted when a column is exported. +```typescript +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`columnExporting`](IgxBaseExporter.md#columnexporting) + +*** + +### exportEnded + +> **exportEnded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts#L48) + +This event is emitted when the export process finishes. +```typescript +this.exporterService.exportEnded.subscribe((args: IPdfExportEndedEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxPdfExporterService + +#### Overrides + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportEnded`](IgxBaseExporter.md#exportended) + +*** + +### pivotGridFilterFieldsCount + +> `protected` **pivotGridFilterFieldsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L204) + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`pivotGridFilterFieldsCount`](IgxBaseExporter.md#pivotgridfilterfieldscount) + +*** + +### rowExporting + +> **rowExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L189) + +This event is emitted when a row is exported. +```typescript +this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { +// put event handler code here +}); +``` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`rowExporting`](IgxBaseExporter.md#rowexporting) + +## Methods + +### export() + +> **export**(`grid`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L228) + +Method for exporting IgxGrid component's data. +```typescript +this.exporterService.export(this.igxGridForExport, this.exportOptions); +``` + +#### Parameters + +##### grid + +`any` + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`export`](IgxBaseExporter.md#export) + +*** + +### exportData() + +> **exportData**(`data`, `options`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L287) + +Method for exporting any kind of array data. +```typescript +this.exporterService.exportData(this.arrayForExport, this.exportOptions); +``` + +#### Parameters + +##### data + +`any`[] + +##### options + +[`IgxExporterOptionsBase`](IgxExporterOptionsBase.md) + +#### Returns + +`void` + +#### Memberof + +IgxBaseExporter + +#### Inherited from + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportData`](IgxBaseExporter.md#exportdata) + +*** + +### exportDataImplementation() + +> `protected` **exportDataImplementation**(`data`, `options`, `done`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts#L53) + +#### Parameters + +##### data + +[`IExportRecord`](../interfaces/IExportRecord.md)[] + +##### options + +[`IgxPdfExporterOptions`](IgxPdfExporterOptions.md) + +##### done + +() => `void` + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseExporter`](IgxBaseExporter.md).[`exportDataImplementation`](IgxBaseExporter.md#exportdataimplementation) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfTextDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfTextDirective.md new file mode 100644 index 000000000..3fe1546f3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPdfTextDirective.md @@ -0,0 +1,13 @@ +# Class: IgxPdfTextDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L23) + +## Constructors + +### Constructor + +> **new IgxPdfTextDirective**(): `IgxPdfTextDirective` + +#### Returns + +`IgxPdfTextDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPercentFormatterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPercentFormatterPipe.md new file mode 100644 index 000000000..8d219001c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPercentFormatterPipe.md @@ -0,0 +1,43 @@ +# Class: IgxPercentFormatterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L33) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxPercentFormatterPipe**(): `IgxPercentFormatterPipe` + +#### Returns + +`IgxPercentFormatterPipe` + +## Methods + +### transform() + +> **transform**(`value`, `digitsInfo?`, `locale?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/pipes.ts#L36) + +#### Parameters + +##### value + +`string` \| `number` + +##### digitsInfo? + +`string` + +##### locale? + +`string` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerActionsDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerActionsDirective.md new file mode 100644 index 000000000..f82fa7b53 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerActionsDirective.md @@ -0,0 +1,27 @@ +# Class: IgxPickerActionsDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L65) + +IgxPickerActionsDirective can be used to re-template the dropdown/dialog action buttons. + +## Remarks + +Can be applied to IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent + +## Constructors + +### Constructor + +> **new IgxPickerActionsDirective**(): `IgxPickerActionsDirective` + +#### Returns + +`IgxPickerActionsDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L66) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerClearComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerClearComponent.md new file mode 100644 index 000000000..930c6b76b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerClearComponent.md @@ -0,0 +1,71 @@ +# Class: IgxPickerClearComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L53) + +Templates the default clear icon in the picker. + +## Remarks + +Can be applied to IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent + +## Example + +```html +<igx-date-picker> + <igx-picker-clear igxSuffix> + <igx-icon>delete</igx-icon> + </igx-picker-clear> +</igx-date-picker> +``` + +## Extends + +- [`IgxPickerToggleComponent`](IgxPickerToggleComponent.md) + +## Constructors + +### Constructor + +> **new IgxPickerClearComponent**(): `IgxPickerClearComponent` + +#### Returns + +`IgxPickerClearComponent` + +#### Inherited from + +[`IgxPickerToggleComponent`](IgxPickerToggleComponent.md).[`constructor`](IgxPickerToggleComponent.md#constructor) + +## Properties + +### clicked + +> **clicked**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L24) + +#### Inherited from + +[`IgxPickerToggleComponent`](IgxPickerToggleComponent.md).[`clicked`](IgxPickerToggleComponent.md#clicked) + +## Methods + +### onClick() + +> **onClick**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L27) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +#### Inherited from + +[`IgxPickerToggleComponent`](IgxPickerToggleComponent.md).[`onClick`](IgxPickerToggleComponent.md#onclick) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerToggleComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerToggleComponent.md new file mode 100644 index 000000000..43b9e2561 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPickerToggleComponent.md @@ -0,0 +1,59 @@ +# Class: IgxPickerToggleComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L22) + +Templates the default toggle icon in the picker. + +## Remarks + +Can be applied to IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent + +## Example + +```html +<igx-date-range-picker> + <igx-picker-toggle igxSuffix> + <igx-icon>calendar_view_day</igx-icon> + </igx-picker-toggle> +</igx-date-range-picker> +``` + +## Extended by + +- [`IgxPickerClearComponent`](IgxPickerClearComponent.md) + +## Constructors + +### Constructor + +> **new IgxPickerToggleComponent**(): `IgxPickerToggleComponent` + +#### Returns + +`IgxPickerToggleComponent` + +## Properties + +### clicked + +> **clicked**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L24) + +## Methods + +### onClick() + +> **onClick**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts#L27) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotAggregate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotAggregate.md new file mode 100644 index 000000000..8ca854e8e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotAggregate.md @@ -0,0 +1,68 @@ +# Class: IgxPivotAggregate + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L5) + +## Extended by + +- [`IgxPivotNumericAggregate`](IgxPivotNumericAggregate.md) +- [`IgxPivotDateAggregate`](IgxPivotDateAggregate.md) +- [`IgxPivotTimeAggregate`](IgxPivotTimeAggregate.md) + +## Constructors + +### Constructor + +> **new IgxPivotAggregate**(): `IgxPivotAggregate` + +#### Returns + +`IgxPivotAggregate` + +## Methods + +### aggregators() + +> `static` **aggregators**(): [`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L14) + +Gets array with default aggregator function for base aggregation. +```typescript +IgxPivotAggregate.aggregators(); +``` + +#### Returns + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +#### Memberof + +IgxPivotAggregate + +*** + +### count() + +> `static` **count**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L30) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotAggregate diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDataSelectorComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDataSelectorComponent.md new file mode 100644 index 000000000..bfefa70f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDataSelectorComponent.md @@ -0,0 +1,269 @@ +# Class: IgxPivotDataSelectorComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L56) + +Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI + +## Igx Module + +IgxPivotGridModule + +## Igx Group + +Grids & Lists + +## Igx Keywords + +data selector, pivot, grid + +## Igx Theme + +pivot-data-selector-theme + +## Remarks + +The Ignite UI Data Selector has a searchable list with the grid data columns, +there are also four expandable areas underneath for filters, rows, columns, and values +is used for grouping and aggregating simple flat data into a pivot table. + +## Example + +```html +<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="configuration"> +</igx-pivot-grid> +<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector> +``` + +## Constructors + +### Constructor + +> **new IgxPivotDataSelectorComponent**(): `IgxPivotDataSelectorComponent` + +#### Returns + +`IgxPivotDataSelectorComponent` + +## Properties + +### animationSettings + +> **animationSettings**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L215) + +#### closeAnimation + +> **closeAnimation**: `any` + +#### openAnimation + +> **openAnimation**: `any` + +*** + +### columnsExpanded + +> **columnsExpanded**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L78) + +Gets/sets whether the columns panel is expanded +Get +```typescript + const columnsPanelState: boolean = this.dataSelector.columnsExpanded; +``` +Set +```html +<igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector> +``` + +Two-way data binding: +```html +<igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector> +``` + +*** + +### columnsExpandedChange + +> **columnsExpandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L90) + +Emitted when the columns panel is expanded or collapsed. + +#### Example + +```html +<igx-pivot-data-selector #grid [data]="localData" [height]="'305px'" + (columnsExpandedChange)="columnsExpandedChange($event)"></igx-pivot-data-selector> +``` + +*** + +### filtersExpanded + +> **filtersExpanded**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L140) + +Gets/sets whether the filters panel is expanded +Get +```typescript + const filtersPanelState: boolean = this.dataSelector.filtersExpanded; +``` +Set +```html +<igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector> +``` + +Two-way data binding: +```html +<igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector> +``` + +*** + +### filtersExpandedChange + +> **filtersExpandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L152) + +Emitted when the filters panel is expanded or collapsed. + +#### Example + +```html +<igx-pivot-data-selector #grid [data]="localData" [height]="'305px'" + (filtersExpandedChange)="filtersExpandedChange($event)"></igx-pivot-data-selector> +``` + +*** + +### rowsExpanded + +> **rowsExpanded**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L109) + +Gets/sets whether the rows panel is expanded +Get +```typescript + const rowsPanelState: boolean = this.dataSelector.rowsExpanded; +``` +Set +```html +<igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector> +``` + +Two-way data binding: +```html +<igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector> +``` + +*** + +### rowsExpandedChange + +> **rowsExpandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L121) + +Emitted when the rows panel is expanded or collapsed. + +#### Example + +```html +<igx-pivot-data-selector #grid [data]="localData" [height]="'305px'" + (rowsExpandedChange)="rowsExpandedChange($event)"></igx-pivot-data-selector> +``` + +*** + +### valuesExpanded + +> **valuesExpanded**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L171) + +Gets/sets whether the values panel is expanded +Get +```typescript + const valuesPanelState: boolean = this.dataSelector.valuesExpanded; +``` +Set +```html +<igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector> +``` + +Two-way data binding: +```html +<igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector> +``` + +*** + +### valuesExpandedChange + +> **valuesExpandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L183) + +Emitted when the values panel is expanded or collapsed. + +#### Example + +```html +<igx-pivot-data-selector #grid [data]="localData" [height]="'305px'" + (valuesExpandedChange)="valuesExpandedChange($event)"></igx-pivot-data-selector> +``` + +## Accessors + +### grid + +#### Get Signature + +> **get** **grid**(): [`PivotGridType`](../interfaces/PivotGridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L311) + +Returns the grid. + +##### Returns + +[`PivotGridType`](../interfaces/PivotGridType.md) + +#### Set Signature + +> **set** **grid**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L303) + +Sets the grid. + +##### Parameters + +###### value + +[`PivotGridType`](../interfaces/PivotGridType.md) + +##### Returns + +`void` + +*** + +### size + +#### Get Signature + +> **get** `protected` **size**(): `Size` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts#L193) + +##### Returns + +`Size` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDateAggregate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDateAggregate.md new file mode 100644 index 000000000..dc5b8c544 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDateAggregate.md @@ -0,0 +1,134 @@ +# Class: IgxPivotDateAggregate + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L126) + +## Extends + +- [`IgxPivotAggregate`](IgxPivotAggregate.md) + +## Constructors + +### Constructor + +> **new IgxPivotDateAggregate**(): `IgxPivotDateAggregate` + +#### Returns + +`IgxPivotDateAggregate` + +#### Inherited from + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`constructor`](IgxPivotAggregate.md#constructor) + +## Methods + +### aggregators() + +> `static` **aggregators**(): [`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L135) + +Gets array with default aggregator function for date aggregation. +```typescript +IgxPivotDateAggregate.aggregators(); +``` + +#### Returns + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +#### Memberof + +IgxPivotAggregate + +#### Overrides + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`aggregators`](IgxPivotAggregate.md#aggregators) + +*** + +### count() + +> `static` **count**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L30) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotAggregate + +#### Inherited from + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`count`](IgxPivotAggregate.md#count) + +*** + +### earliest() + +> `static` **earliest**(`members`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L172) + +Returns the earliest date value in the data records. +If filtering is applied, returns the latest date value in the filtered data records. +```typescript +IgxPivotDateAggregate.earliest(data); +``` + +#### Parameters + +##### members + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxPivotDateAggregate + +*** + +### latest() + +> `static` **latest**(`members`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L159) + +Returns the latest date value in the data records. +If filtering is applied, returns the latest date value in the filtered data records. +```typescript +IgxPivotDateAggregate.latest(data); +``` + +#### Parameters + +##### members + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxPivotDateAggregate diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDateDimension.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDateDimension.md new file mode 100644 index 000000000..58f34766c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotDateDimension.md @@ -0,0 +1,233 @@ +# Class: IgxPivotDateDimension + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L48) + +Configuration of a pivot dimension. + +## Implements + +- [`IPivotDimension`](../interfaces/IPivotDimension.md) + +## Constructors + +### Constructor + +> **new IgxPivotDateDimension**(`inBaseDimension?`, `inOptions?`): `IgxPivotDateDimension` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L125) + +Creates additional pivot date dimensions based on a provided dimension describing date data: + +#### Parameters + +##### inBaseDimension? + +[`IPivotDimension`](../interfaces/IPivotDimension.md) = `null` + +##### inOptions? + +[`IPivotDateDimensionOptions`](../interfaces/IPivotDateDimensionOptions.md) = `{}` + +Options for the predefined date dimensions whether to show quarter, years and etc. + +#### Returns + +`IgxPivotDateDimension` + +#### Example + +```typescript +// Displays only years as parent dimension to the base dimension provided. +new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, { total: false, months: false }); +``` + +## Properties + +### dataType? + +> `optional` **dataType?**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L55) + +Gets/Sets data type + +#### Implementation of + +[`IPivotDimension`](../interfaces/IPivotDimension.md).[`dataType`](../interfaces/IPivotDimension.md#datatype) + +*** + +### defaultOptions + +> **defaultOptions**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L59) + +Default options. + +#### fullDate + +> **fullDate**: `boolean` = `true` + +#### months + +> **months**: `boolean` = `true` + +#### total + +> **total**: `boolean` = `true` + +#### years + +> **years**: `boolean` = `true` + +*** + +### displayName + +> **displayName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L109) + +Display name to show instead of the field name of this value. * + +#### Implementation of + +[`IPivotDimension`](../interfaces/IPivotDimension.md).[`displayName`](../interfaces/IPivotDimension.md#displayname) + +*** + +### enabled + +> **enabled**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L50) + +Enables/Disables a particular dimension from pivot structure. + +#### Implementation of + +[`IPivotDimension`](../interfaces/IPivotDimension.md).[`enabled`](../interfaces/IPivotDimension.md#enabled) + +## Accessors + +### baseDimension + +#### Get Signature + +> **get** **baseDimension**(): [`IPivotDimension`](../interfaces/IPivotDimension.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L84) + +Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values. +Having base dimension set is required in order for the Date Dimensions to show. + +##### Returns + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +#### Set Signature + +> **set** **baseDimension**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L87) + +##### Parameters + +###### value + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### Returns + +`void` + +*** + +### options + +#### Get Signature + +> **get** **options**(): [`IPivotDateDimensionOptions`](../interfaces/IPivotDateDimensionOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L95) + +Gets/Sets the options for the predefined date dimensions whether to show quarter, years and etc. + +##### Returns + +[`IPivotDateDimensionOptions`](../interfaces/IPivotDateDimensionOptions.md) + +#### Set Signature + +> **set** **options**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L98) + +##### Parameters + +###### value + +[`IPivotDateDimensionOptions`](../interfaces/IPivotDateDimensionOptions.md) + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L76) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L72) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +## Methods + +### initialize() + +> `protected` **initialize**(`inBaseDimension`, `inOptions`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L133) + +#### Parameters + +##### inBaseDimension + +`any` + +##### inOptions + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotGridColumnResizerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotGridColumnResizerComponent.md new file mode 100644 index 000000000..9572a6584 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotGridColumnResizerComponent.md @@ -0,0 +1,57 @@ +# Class: IgxPivotGridColumnResizerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts#L12) + +## Extends + +- [`IgxGridColumnResizerComponent`](IgxGridColumnResizerComponent.md) + +## Constructors + +### Constructor + +> **new IgxPivotGridColumnResizerComponent**(): `IgxPivotGridColumnResizerComponent` + +#### Returns + +`IgxPivotGridColumnResizerComponent` + +#### Inherited from + +[`IgxGridColumnResizerComponent`](IgxGridColumnResizerComponent.md).[`constructor`](IgxGridColumnResizerComponent.md#constructor) + +## Properties + +### colResizingService + +> **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts#L13) + +#### Overrides + +[`IgxGridColumnResizerComponent`](IgxGridColumnResizerComponent.md).[`colResizingService`](IgxGridColumnResizerComponent.md#colresizingservice) + +*** + +### resizer + +> **resizer**: `IgxColumnResizerDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts#L18) + +#### Inherited from + +[`IgxGridColumnResizerComponent`](IgxGridColumnResizerComponent.md).[`resizer`](IgxGridColumnResizerComponent.md#resizer) + +*** + +### restrictResizerTop + +> **restrictResizerTop**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts#L15) + +#### Inherited from + +[`IgxGridColumnResizerComponent`](IgxGridColumnResizerComponent.md).[`restrictResizerTop`](IgxGridColumnResizerComponent.md#restrictresizertop) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotGridComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotGridComponent.md new file mode 100644 index 000000000..2e0bcf702 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotGridComponent.md @@ -0,0 +1,7819 @@ +# Class: IgxPivotGridComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L154) + +Pivot Grid provides a way to present and manipulate data in a pivot table view. + +## Igx Module + +IgxPivotGridModule + +## Igx Group + +Grids & Lists + +## Igx Keywords + +pivot, grid, table + +## Igx Theme + +igx-grid-theme + +## Remarks + +The Ignite UI Pivot Grid is used for grouping and aggregating simple flat data into a pivot table. Once data +has been bound and the dimensions and values configured it can be manipulated via sorting and filtering. + +## Example + +```html +<igx-pivot-grid [data]="data" [pivotConfiguration]="configuration"> +</igx-pivot-grid> +``` + +## Extends + +- [`IgxGridBaseDirective`](IgxGridBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`PivotGridType`](../interfaces/PivotGridType.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxPivotGridComponent**(): `IgxPivotGridComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3500) + +#### Returns + +`IgxPivotGridComponent` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`constructor`](IgxGridBaseDirective.md#constructor) + +## Properties + +### \_allowAdvancedFiltering + +> `protected` **\_allowAdvancedFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3175) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_allowAdvancedFiltering`](IgxGridBaseDirective.md#_allowadvancedfiltering) + +*** + +### \_allowFiltering + +> `protected` **\_allowFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3174) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_allowFiltering`](IgxGridBaseDirective.md#_allowfiltering) + +*** + +### \_autoGeneratedCols + +> `protected` **\_autoGeneratedCols**: [`ColumnType`](../interfaces/ColumnType.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3192) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoGeneratedCols`](IgxGridBaseDirective.md#_autogeneratedcols) + +*** + +### \_autoGeneratedColsRefs + +> `protected` **\_autoGeneratedColsRefs**: `ComponentRef`\<[`IgxColumnComponent`](IgxColumnComponent.md)\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3193) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoGeneratedColsRefs`](IgxGridBaseDirective.md#_autogeneratedcolsrefs) + +*** + +### \_autoSizeColumnsNotify + +> `protected` **\_autoSizeColumnsNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3185) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoSizeColumnsNotify`](IgxGridBaseDirective.md#_autosizecolumnsnotify) + +*** + +### \_batchEditing + +> `protected` **\_batchEditing**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3189) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_batchEditing`](IgxGridBaseDirective.md#_batchediting) + +*** + +### \_cdrRequestRepaint + +> `protected` **\_cdrRequestRepaint**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3186) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_cdrRequestRepaint`](IgxGridBaseDirective.md#_cdrrequestrepaint) + +*** + +### \_dataView + +> `protected` **\_dataView**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3194) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_dataView`](IgxGridBaseDirective.md#_dataview) + +*** + +### \_defaultExpandState + +> `protected` **\_defaultExpandState**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L648) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_defaultExpandState`](IgxGridBaseDirective.md#_defaultexpandstate) + +*** + +### \_defaultTargetRecordNumber + +> `protected` **\_defaultTargetRecordNumber**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3179) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_defaultTargetRecordNumber`](IgxGridBaseDirective.md#_defaulttargetrecordnumber) + +*** + +### \_diTransactions + +> `protected` **\_diTransactions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L177) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_diTransactions`](IgxGridBaseDirective.md#_ditransactions) + +*** + +### \_expansionStates + +> `protected` **\_expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3180) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_expansionStates`](IgxGridBaseDirective.md#_expansionstates) + +*** + +### \_filterMode + +> `protected` **\_filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) = `FilterMode.quickFilter` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3176) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_filterMode`](IgxGridBaseDirective.md#_filtermode) + +*** + +### \_filterStrategy + +> `protected` **\_filterStrategy**: [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:649](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L649) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_filterStrategy`](IgxGridBaseDirective.md#_filterstrategy) + +*** + +### \_firstAutoResize + +> `protected` **\_firstAutoResize**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3184) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_firstAutoResize`](IgxGridBaseDirective.md#_firstautoresize) + +*** + +### \_headerFeaturesWidth + +> `protected` **\_headerFeaturesWidth**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3182) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_headerFeaturesWidth`](IgxGridBaseDirective.md#_headerfeatureswidth) + +*** + +### \_hGridSchema + +> `protected` **\_hGridSchema**: [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3204) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_hGridSchema`](IgxGridBaseDirective.md#_hgridschema) + +*** + +### \_init + +> `protected` **\_init**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3183) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_init`](IgxGridBaseDirective.md#_init) + +*** + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3195) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_lastSearchInfo`](IgxGridBaseDirective.md#_lastsearchinfo) + +*** + +### \_pinnedRecordIDs + +> `protected` **\_pinnedRecordIDs**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3164) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_pinnedRecordIDs`](IgxGridBaseDirective.md#_pinnedrecordids) + +*** + +### \_pivotValueCloneStrategy + +> `protected` **\_pivotValueCloneStrategy**: [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:647](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L647) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3206) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_resourceStrings`](IgxGridBaseDirective.md#_resourcestrings) + +*** + +### \_sortingOptions + +> `protected` **\_sortingOptions**: [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3190) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_sortingOptions`](IgxGridBaseDirective.md#_sortingoptions) + +*** + +### \_summaryRowList + +> `protected` **\_summaryRowList**: `QueryList`\<[`IgxSummaryRowComponent`](IgxSummaryRowComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1795) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_summaryRowList`](IgxGridBaseDirective.md#_summaryrowlist) + +*** + +### \_transactions + +> `protected` **\_transactions**: [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3188) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_transactions`](IgxGridBaseDirective.md#_transactions) + +*** + +### \_userOutletDirective + +> `protected` **\_userOutletDirective**: [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3187) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_userOutletDirective`](IgxGridBaseDirective.md#_useroutletdirective) + +*** + +### activeNodeChange + +> **activeNodeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1059](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1059) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`activeNodeChange`](../interfaces/PivotGridType.md#activenodechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`activeNodeChange`](IgxGridBaseDirective.md#activenodechange) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L380) + +Emitted after advanced filtering is performed. + +#### Remarks + +Returns the advanced filtering expressions tree. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`advancedFilteringExpressionsTreeChange`](../interfaces/PivotGridType.md#advancedfilteringexpressionstreechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`advancedFilteringExpressionsTreeChange`](IgxGridBaseDirective.md#advancedfilteringexpressionstreechange) + +*** + +### autoGenerateConfig + +> **autoGenerateConfig**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L324) + +Gets/Sets whether to auto-generate the pivot configuration based on the provided data. + +#### Remarks + +The default value is false. When set to true, it will override all dimensions and values in the pivotConfiguration. + +#### Example + +```html +<igx-pivot-grid [data]="Data" [autoGenerateConfig]="true"></igx-pivot-grid> +``` + +*** + +### baseClass + +> `protected` **baseClass**: `string` = `'igx-grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1813) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`baseClass`](IgxGridBaseDirective.md#baseclass) + +*** + +### cdr + +> `readonly` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L162) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`cdr`](../interfaces/PivotGridType.md#cdr) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cdr`](IgxGridBaseDirective.md#cdr) + +*** + +### cellClick + +> **cellClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L494) + +Emitted when a cell is clicked. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`cellClick`](../interfaces/PivotGridType.md#cellclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellClick`](IgxGridBaseDirective.md#cellclick) + +*** + +### clipboardOptions + +> **clipboardOptions**: [`IClipboardOptions`](../interfaces/IClipboardOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L335) + +Controls the copy behavior of the grid. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clipboardOptions`](IgxGridBaseDirective.md#clipboardoptions) + +*** + +### colResizingService + +> `protected` **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L160) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`colResizingService`](IgxGridBaseDirective.md#colresizingservice) + +*** + +### columnInit + +> **columnInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L732) + +Emitted when a column is initialized. + +#### Remarks + +Returns the column object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnInit`](IgxGridBaseDirective.md#columninit) + +*** + +### columnResized + +> **columnResized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L860) + +Emitted after column is resized. + +#### Remarks + +Returns the `IgxColumnComponent` object's old and new width. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`columnResized`](../interfaces/PivotGridType.md#columnresized) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnResized`](IgxGridBaseDirective.md#columnresized) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L565) + +Emitted when `IgxColumnComponent` is selected. + +#### Example + +```html +<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`columnSelectionChanging`](../interfaces/PivotGridType.md#columnselectionchanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnSelectionChanging`](IgxGridBaseDirective.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L911) + +Emitted after column visibility is changed. + +#### Remarks + +Args: { column: IgxColumnComponent, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`columnVisibilityChanged`](../interfaces/PivotGridType.md#columnvisibilitychanged) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnVisibilityChanged`](IgxGridBaseDirective.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L898) + +Emitted before column visibility is changed. + +#### Remarks + +Args: { column: any, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`columnVisibilityChanging`](../interfaces/PivotGridType.md#columnvisibilitychanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnVisibilityChanging`](IgxGridBaseDirective.md#columnvisibilitychanging) + +*** + +### contextMenu + +> **contextMenu**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L872) + +Emitted when a cell or row is right clicked. + +#### Remarks + +Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. +```html +<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`contextMenu`](../interfaces/PivotGridType.md#contextmenu) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`contextMenu`](IgxGridBaseDirective.md#contextmenu) + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1129) + +Emitted after the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataChanged`](IgxGridBaseDirective.md#datachanged) + +*** + +### dataChanging + +> **dataChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1118) + +Emitted before the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataChanging`](IgxGridBaseDirective.md#datachanging) + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L163) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`differs`](IgxGridBaseDirective.md#differs) + +*** + +### dimensionInit + +> **dimensionInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L200) + +Emitted when the dimension is initialized. + +#### Remarks + +Emits the dimension that is about to be initialized. + +#### Example + +```html +<igx-pivot-grid #grid [data]="localData" [height]="'305px'" + (dimensionInit)="dimensionInit($event)"></igx-pivot-grid> +``` + +*** + +### dimensionsChange + +> **dimensionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L174) + +Emitted when the dimension collection is changed via the grid chip area. + +#### Remarks + +Returns the new dimension collection and its type: + +#### Example + +```html +<igx-pivot-grid #grid [data]="localData" [height]="'305px'" + (dimensionsChange)="dimensionsChange($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`dimensionsChange`](../interfaces/PivotGridType.md#dimensionschange) + +*** + +### dimensionsSortingExpressionsChange + +> **dimensionsSortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L226) + +Emitted when a dimension is sorted. + +#### Example + +```html +<igx-pivot-grid #grid [data]="localData" [height]="'305px'" + (dimensionsSortingExpressionsChange)="dimensionsSortingExpressionsChange($event)"></igx-pivot-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`dimensionsSortingExpressionsChange`](../interfaces/PivotGridType.md#dimensionssortingexpressionschange) + +*** + +### displayStyle + +> `protected` **displayStyle**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3452) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`displayStyle`](IgxGridBaseDirective.md#displaystyle) + +*** + +### doubleClick + +> **doubleClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L885) + +Emitted when a cell is double clicked. + +#### Remarks + +Returns the `IgxGridCell` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`doubleClick`](../interfaces/PivotGridType.md#doubleclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`doubleClick`](IgxGridBaseDirective.md#doubleclick) + +*** + +### emptyDirectiveTemplate + +> `protected` **emptyDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1713) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyDirectiveTemplate`](IgxGridBaseDirective.md#emptydirectivetemplate) + +*** + +### emptyPivotGridTemplate + +> **emptyPivotGridTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2438) + +Gets/Sets a custom template when pivot grid is empty. + +#### Example + +```html +<igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid> +``` + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L166) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`envInjector`](IgxGridBaseDirective.md#envinjector) + +*** + +### expansionStatesChange + +> **expansionStatesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1003) + +Emitted when the rows are expanded or collapsed. + +#### Example + +```html +<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expansionStatesChange`](IgxGridBaseDirective.md#expansionstateschange) + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L778) + +Emitted before filtering expressions are applied. + +#### Remarks + +Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filtering`](../interfaces/PivotGridType.md#filtering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filtering`](IgxGridBaseDirective.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L791) + +Emitted after filtering is performed through the UI. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filteringDone`](../interfaces/PivotGridType.md#filteringdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringDone`](IgxGridBaseDirective.md#filteringdone) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L366) + +Emitted after filtering is performed. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filteringExpressionsTreeChange`](../interfaces/PivotGridType.md#filteringexpressionstreechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringExpressionsTreeChange`](IgxGridBaseDirective.md#filteringexpressionstreechange) + +*** + +### formGroupCreated + +> **formGroupCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L519) + +Emitted when formGroup is created on edit of row/cell. + +#### Example + +```html +<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`formGroupCreated`](../interfaces/PivotGridType.md#formgroupcreated) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`formGroupCreated`](IgxGridBaseDirective.md#formgroupcreated) + +*** + +### gridAPI + +> `readonly` **gridAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L157) + +Represents the grid service type providing API methods for the grid + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`gridAPI`](../interfaces/PivotGridType.md#gridapi) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridAPI`](IgxGridBaseDirective.md#gridapi) + +*** + +### gridComputedStyles + +> `protected` **gridComputedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3205) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridComputedStyles`](IgxGridBaseDirective.md#gridcomputedstyles) + +*** + +### gridCopy + +> **gridCopy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L991) + +Emitted when a copy operation is executed. + +#### Remarks + +Fired only if copy behavior is enabled through the [`clipboardOptions`][IgxGridBaseDirective#clipboardOptions](IgxGridBaseDirective.md#clipboardoptions). + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridCopy`](IgxGridBaseDirective.md#gridcopy) + +*** + +### gridKeydown + +> **gridKeydown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L964) + +Emitted when keydown is triggered over element inside grid's body. + +#### Remarks + +This event is fired only if the key combination is supported in the grid. +Return the target type, target object and the original event. This event is cancelable. + +#### Example + +```html + <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`gridKeydown`](../interfaces/PivotGridType.md#gridkeydown) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridKeydown`](IgxGridBaseDirective.md#gridkeydown) + +*** + +### gridScroll + +> **gridScroll**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L392) + +Emitted when grid is scrolled horizontally/vertically. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (gridScroll)="onScroll($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridScroll`](IgxGridBaseDirective.md#gridscroll) + +*** + +### headerCollapsedIndicatorDirectiveTemplate + +> `protected` **headerCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1551) + +The custom template, if any, that should be used when rendering a header collapse indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerCollapsedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#headercollapsedindicatordirectivetemplate) + +*** + +### headerExpandedIndicatorDirectiveTemplate + +> `protected` **headerExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1520) + +The custom template, if any, that should be used when rendering a header expand indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerExpandedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#headerexpandedindicatordirectivetemplate) + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L165) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`injector`](IgxGridBaseDirective.md#injector) + +*** + +### loadingDirectiveTemplate + +> `protected` **loadingDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1710) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`loadingDirectiveTemplate`](IgxGridBaseDirective.md#loadingdirectivetemplate) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L159) + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`navigation`](../interfaces/PivotGridType.md#navigation) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`navigation`](IgxGridBaseDirective.md#navigation) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L172) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`overlayService`](IgxGridBaseDirective.md#overlayservice) + +*** + +### pivotConfigurationChange + +> **pivotConfigurationChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L186) + +Emitted when any of the pivotConfiguration properties is changed via the grid chip area. + +#### Example + +```html +<igx-pivot-grid #grid [data]="localData" [height]="'305px'" + (pivotConfigurationChanged)="configurationChanged($event)"></igx-grid> +``` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L176) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`platform`](IgxGridBaseDirective.md#platform) + +*** + +### rangeSelected + +> **rangeSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1097) + +Emitted when making a range selection. + +#### Remarks + +Range selection can be made either through drag selection or through keyboard selection. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rangeSelected`](../interfaces/PivotGridType.md#rangeselected) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rangeSelected`](IgxGridBaseDirective.md#rangeselected) + +*** + +### regroupTrigger + +> `protected` **regroupTrigger**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L650) + +*** + +### rendered + +> **rendered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1101) + +Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rendered`](IgxGridBaseDirective.md#rendered) + +*** + +### rowClasses + +> **rowClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L411) + +Sets a conditional class selector to the grid's row element. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class and the value is +either a callback function that returns a boolean, or boolean, like so: +```typescript +callback = (row: RowType) => { return row.selected > 6; } +rowClasses = { 'className' : this.callback }; +``` +```html +<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowClasses`](IgxGridBaseDirective.md#rowclasses) + +*** + +### rowClick + +> **rowClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L507) + +Emitted when a row is clicked. + +#### Remarks + +Returns the `IgxGridRow`. + +#### Example + +```html +<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowClick`](../interfaces/PivotGridType.md#rowclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowClick`](IgxGridBaseDirective.md#rowclick) + +*** + +### rowCollapsedIndicatorDirectiveTemplate + +> `protected` **rowCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1489) + +The custom template, if any, that should be used when rendering a row collapse indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowCollapsedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#rowcollapsedindicatordirectivetemplate) + +*** + +### rowDimensionHeaderTemplate + +> **rowDimensionHeaderTemplate**: `TemplateRef`\<[`IgxColumnTemplateContext`](../interfaces/IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L285) + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowDimensionHeaderTemplate`](../interfaces/PivotGridType.md#rowdimensionheadertemplate) + +*** + +### rowExpandedIndicatorDirectiveTemplate + +> `protected` **rowExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1458) + +The custom template, if any, that should be used when rendering a row expand indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowExpandedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#rowexpandedindicatordirectivetemplate) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L554) + +Emitted when `IgxGridRowComponent` is selected. + +#### Example + +```html +<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowSelectionChanging`](../interfaces/PivotGridType.md#rowselectionchanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelectionChanging`](IgxGridBaseDirective.md#rowselectionchanging) + +*** + +### rowStyles + +> **rowStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L431) + +Sets conditional style properties on the grid row element. +It accepts an object literal where the keys are +the style properties and the value is an expression to be evaluated. +```typescript +styles = { + background: 'yellow', + color: (row: RowType) => row.selected : 'red': 'white' +} +``` +```html +<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowStyles`](IgxGridBaseDirective.md#rowstyles) + +*** + +### rowToggle + +> **rowToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1026) + +Emitted when the expanded state of a row gets changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowToggle`](../interfaces/PivotGridType.md#rowtoggle) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowToggle`](IgxGridBaseDirective.md#rowtoggle) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L543) + +Emitted when a cell is selected. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selected`](../interfaces/PivotGridType.md#selected) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selected`](IgxGridBaseDirective.md#selected) + +*** + +### selectedRowsChange + +> **selectedRowsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1015) + +Emitted when the rows are selected or deselected. + +#### Example + +```html +<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedRowsChange`](IgxGridBaseDirective.md#selectedrowschange) + +*** + +### sorting + +> **sorting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L752) + +Emitted before sorting expressions are applied. + +#### Remarks + +Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sorting`](IgxGridBaseDirective.md#sorting) + +*** + +### sortingDone + +> **sortingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L765) + +Emitted after sorting is completed. + +#### Remarks + +Returns the sorting expression. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingDone`](IgxGridBaseDirective.md#sortingdone) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1072) + +Emitted before sorting is performed. + +#### Remarks + +Returns the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortingExpressionsChange`](../interfaces/PivotGridType.md#sortingexpressionschange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingExpressionsChange`](IgxGridBaseDirective.md#sortingexpressionschange) + +*** + +### tbodyContainer + +> `protected` **tbodyContainer**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1324) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`tbodyContainer`](IgxGridBaseDirective.md#tbodycontainer) + +*** + +### templateRows + +> `protected` **templateRows**: `string` = `'auto auto auto 1fr auto auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3455) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`templateRows`](IgxGridBaseDirective.md#templaterows) + +*** + +### textHighlightService + +> `protected` **textHighlightService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L171) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`textHighlightService`](IgxGridBaseDirective.md#texthighlightservice) + +*** + +### transactionFactory + +> `protected` **transactionFactory**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L156) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactionFactory`](IgxGridBaseDirective.md#transactionfactory) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `filteringExpressionsTree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L465) + +Gets/Sets a unique values strategy used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### filteringExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Remarks + +Provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering. + +#### Example + +```html +<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`uniqueColumnValuesStrategy`](../interfaces/PivotGridType.md#uniquecolumnvaluesstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`uniqueColumnValuesStrategy`](IgxGridBaseDirective.md#uniquecolumnvaluesstrategy) + +*** + +### validation + +> `readonly` **validation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L150) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`validation`](../interfaces/PivotGridType.md#validation) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validation`](IgxGridBaseDirective.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L530) + +Emitted when grid's validation status changes. + +#### Example + +```html +<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`validationStatusChange`](../interfaces/PivotGridType.md#validationstatuschange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validationStatusChange`](IgxGridBaseDirective.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) = `'change'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2063) + +Gets/Sets the trigger for validators used when editing the grid. + +#### Example + +```html +<igx-grid #grid validationTrigger='blur'></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`validationTrigger`](../interfaces/PivotGridType.md#validationtrigger) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validationTrigger`](IgxGridBaseDirective.md#validationtrigger) + +*** + +### valueChipTemplate + +> **valueChipTemplate**: `TemplateRef`\<[`IgxPivotGridValueTemplateContext`](../interfaces/IgxPivotGridValueTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L282) + +Gets/Sets a custom template for the value chips. + +#### Example + +```html +<igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`valueChipTemplate`](../interfaces/PivotGridType.md#valuechiptemplate) + +*** + +### valueInit + +> **valueInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L213) + +Emitted when the value is initialized. + +#### Remarks + +Emits the value that is about to be initialized. + +#### Example + +```html +<igx-pivot-grid #grid [data]="localData" [height]="'305px'" + (valueInit)="valueInit($event)"></igx-pivot-grid> +``` + +*** + +### valuesChange + +> **valuesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:240](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L240) + +Emitted when the values collection is changed via the grid chip area. + +#### Remarks + +Returns the new dimension + +#### Example + +```html +<igx-pivot-grid #grid [data]="localData" [height]="'305px'" + (valuesChange)="valuesChange($event)"></igx-grid> +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`valuesChange`](../interfaces/PivotGridType.md#valueschange) + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L164) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`viewRef`](IgxGridBaseDirective.md#viewref) + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L158) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`zone`](IgxGridBaseDirective.md#zone) + +## Accessors + +### activeRowIndexes + +#### Get Signature + +> **get** `protected` **activeRowIndexes**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4068) + +##### Returns + +`number`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`activeRowIndexes`](IgxGridBaseDirective.md#activerowindexes) + +*** + +### advancedFilteringExpressionsTree + +#### Get Signature + +> **get** **advancedFilteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1920) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **advancedFilteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1924) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`advancedFilteringExpressionsTree`](../interfaces/PivotGridType.md#advancedfilteringexpressionstree) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`advancedFilteringExpressionsTree`](IgxGridBaseDirective.md#advancedfilteringexpressionstree) + +*** + +### allDimensions + +#### Get Signature + +> **get** **allDimensions**(): [`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1049](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1049) + +Gets the full list of dimensions. + +##### Example + +```typescript +const dimensions = this.grid.allDimensions; +``` + +##### Returns + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +An array of all dimensions (rows and columns) in the pivot grid. +it includes hierarchical level, filters and sorting, dimensional level, etc. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`allDimensions`](../interfaces/PivotGridType.md#alldimensions) + +*** + +### allowAdvancedFiltering + +#### Set Signature + +> **set** **allowAdvancedFiltering**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L753) + +Gets/Sets a value indicating whether the advanced filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### \_value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`allowAdvancedFiltering`](../interfaces/PivotGridType.md#allowadvancedfiltering) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowAdvancedFiltering`](IgxGridBaseDirective.md#allowadvancedfiltering) + +*** + +### allowFiltering + +#### Set Signature + +> **set** **allowFiltering**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:775](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L775) + +Gets/Sets if the filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### \_value + +`boolean` + +##### Returns + +`void` + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`allowFiltering`](../interfaces/PivotGridType.md#allowfiltering) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowFiltering`](IgxGridBaseDirective.md#allowfiltering) + +*** + +### allVisibleDimensions + +#### Get Signature + +> **get** `protected` **allVisibleDimensions**(): [`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1055](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1055) + +##### Returns + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +*** + +### ariaColCount + +#### Get Signature + +> **get** `protected` **ariaColCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1816) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`ariaColCount`](IgxGridBaseDirective.md#ariacolcount) + +*** + +### ariaRowCount + +#### Get Signature + +> **get** `protected` **ariaRowCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1821) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`ariaRowCount`](IgxGridBaseDirective.md#ariarowcount) + +*** + +### batchEditing + +#### Set Signature + +> **set** **batchEditing**(`_val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:942](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L942) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Parameters + +###### \_val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`batchEditing`](../interfaces/PivotGridType.md#batchediting) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`batchEditing`](IgxGridBaseDirective.md#batchediting) + +*** + +### cellMergeMode + +#### Get Signature + +> **get** **cellMergeMode**(): [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2901) + +Gets/Sets cell merge mode. + +##### Returns + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +#### Set Signature + +> **set** **cellMergeMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2905) + +##### Parameters + +###### value + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`cellMergeMode`](../interfaces/PivotGridType.md#cellmergemode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellMergeMode`](IgxGridBaseDirective.md#cellmergemode) + +*** + +### cellSelection + +#### Get Signature + +> **get** **cellSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2882) + +Gets/Sets cell selection mode. + +##### Remarks + +By default the cell selection mode is multiple + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **cellSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2886) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`cellSelection`](../interfaces/PivotGridType.md#cellselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellSelection`](IgxGridBaseDirective.md#cellselection) + +*** + +### columns + +#### Get Signature + +> **get** **columns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4613) + +Gets an array of `IgxColumnComponent`s. + +##### Example + +```typescript +const colums = this.grid.columns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`columns`](../interfaces/PivotGridType.md#columns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columns`](IgxGridBaseDirective.md#columns) + +*** + +### columnSelection + +#### Get Signature + +> **get** **columnSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2943) + +Gets/Sets column selection mode + +##### Remarks + +By default the row selection mode is none + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **columnSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2947) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`columnSelection`](../interfaces/PivotGridType.md#columnselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnSelection`](IgxGridBaseDirective.md#columnselection) + +*** + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2187) + +Gets/Sets the default width of the columns. + +##### Example + +```html +<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2190) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnWidth`](IgxGridBaseDirective.md#columnwidth) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1153) + +Returns an array of data set to the component. +```typescript +let data = this.grid.data; +``` + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1129) + +Gets/Sets the array of data that populates the component. +```html +<igx-pivot-grid [data]="Data"></igx-pivot-grid> +``` + +##### Parameters + +###### value + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`data`](../interfaces/PivotGridType.md#data) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`data`](IgxGridBaseDirective.md#data) + +*** + +### dataCloneStrategy + +#### Get Signature + +> **get** **dataCloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L320) + +Gets/Sets the data clone strategy of the grid when in edit mode. + +##### Example + +```html + <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> +``` + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **dataCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L324) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`dataCloneStrategy`](../interfaces/PivotGridType.md#dataclonestrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataCloneStrategy`](IgxGridBaseDirective.md#dataclonestrategy) + +*** + +### dataRowList + +#### Get Signature + +> **get** **dataRowList**(): `QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2606) + +A list of currently rendered `IgxGridRowComponent`'s. + +##### Example + +```typescript +const dataList = this.grid.dataRowList; +``` + +##### Returns + +`QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`dataRowList`](../interfaces/PivotGridType.md#datarowlist) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataRowList`](IgxGridBaseDirective.md#datarowlist) + +*** + +### dataView + +#### Get Signature + +> **get** **dataView**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5809) + +Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. + +##### Example + +```typescript + const dataView = this.grid.dataView; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`dataView`](../interfaces/PivotGridType.md#dataview) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataView`](IgxGridBaseDirective.md#dataview) + +*** + +### defaultExpandState + +#### Get Signature + +> **get** **defaultExpandState**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:669](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L669) + +Gets/Sets the default expand state for all rows. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **defaultExpandState**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:673](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L673) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### defaultRowHeight + +#### Get Signature + +> **get** **defaultRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4513) + +Gets the default row height. + +##### Example + +```typescript +const rowHeigh = this.grid.defaultRowHeight; +``` + +##### Returns + +`number` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`defaultRowHeight`](../interfaces/PivotGridType.md#defaultrowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`defaultRowHeight`](IgxGridBaseDirective.md#defaultrowheight) + +*** + +### dimensionsSortingExpressions + +#### Get Signature + +> **get** **dimensionsSortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L251) + +Gets the sorting expressions generated for the dimensions. + +##### Example + +```typescript +const expressions = this.grid.dimensionsSortingExpressions; +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +*** + +### dragGhostCustomTemplate + +#### Get Signature + +> **get** **dragGhostCustomTemplate**(): `TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1234) + +Gets the custom template, if any, used for row drag ghost. + +##### Returns + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +#### Set Signature + +> **set** **dragGhostCustomTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1251) + +Sets a custom template for the row drag ghost. +```html +<ng-template #template igxRowDragGhost> + <igx-icon>menu</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragGhostCustomTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dragGhostCustomTemplate`](IgxGridBaseDirective.md#dragghostcustomtemplate) + +*** + +### dragIndicatorIconTemplate + +#### Set Signature + +> **set** **dragIndicatorIconTemplate**(`_val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L862) + +The custom template, if any, that should be used when rendering the row drag indicator icon + +##### Parameters + +###### \_val + +`TemplateRef`\<`any`\> + +##### Returns + +`void` + +The template for drag indicator icons. Could be of any type + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`dragIndicatorIconTemplate`](../interfaces/PivotGridType.md#dragindicatoricontemplate) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dragIndicatorIconTemplate`](IgxGridBaseDirective.md#dragindicatoricontemplate) + +*** + +### emptyBottomSize + +#### Get Signature + +> **get** `protected` **emptyBottomSize**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1075](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1075) + +##### Returns + +`number` + +*** + +### emptyFilteredGridMessage + +#### Get Signature + +> **get** **emptyFilteredGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2273) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyFilteredGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2269) + +Gets/Sets the message displayed when there are no records and the grid is filtered. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyFilteredGridMessage`](IgxGridBaseDirective.md#emptyfilteredgridmessage) + +*** + +### emptyGridMessage + +#### Get Signature + +> **get** **emptyGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2208) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2205) + +Get/Sets the message displayed when there are no records. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyGridMessage`](IgxGridBaseDirective.md#emptygridmessage) + +*** + +### emptyGridTemplate + +#### Get Signature + +> **get** **emptyGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L247) + +Gets/Sets a custom template when empty. + +##### Example + +```html +<ng-template igxGridEmpty> + <!-- content to show when the grid is empty --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **emptyGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L250) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyGridTemplate`](IgxGridBaseDirective.md#emptygridtemplate) + +*** + +### excelStyleHeaderIconTemplate + +#### Get Signature + +> **get** **excelStyleHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1586) + +Gets the excel style header icon. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **excelStyleHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1603) + +Sets the excel style header icon. +```html +<ng-template #template igxExcelStyleHeaderIcon> +<igx-icon>filter_alt</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.excelStyleHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`excelStyleHeaderIconTemplate`](../interfaces/PivotGridType.md#excelstyleheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`excelStyleHeaderIconTemplate`](IgxGridBaseDirective.md#excelstyleheadericontemplate) + +*** + +### expansionStates + +#### Get Signature + +> **get** **expansionStates**(): `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4381) + +Gets/Sets a list of key-value pairs [row ID, expansion state]. + +##### Remarks + +Includes only states that differ from the default one. +Supports two-way binding. + +##### Example + +```html +<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> +</igx-grid> +``` + +##### Returns + +`Map`\<`any`, `boolean`\> + +#### Set Signature + +> **set** **expansionStates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4386) + +##### Parameters + +###### value + +`Map`\<`any`, `boolean`\> + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`expansionStates`](../interfaces/PivotGridType.md#expansionstates) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expansionStates`](IgxGridBaseDirective.md#expansionstates) + +*** + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3359) + +Returns an array of objects containing the filtered data. + +##### Example + +```typescript +let filteredData = this.grid.filteredData; +``` + +##### Returns + +`any` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filteredData`](../interfaces/PivotGridType.md#filtereddata) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteredData`](IgxGridBaseDirective.md#filtereddata) + +*** + +### filteredSortedData + +#### Get Signature + +> **get** **filteredSortedData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3371) + +Returns an array containing the filtered sorted data. + +##### Example + +```typescript +const filteredSortedData = this.grid1.filteredSortedData; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filteredSortedData`](../interfaces/PivotGridType.md#filteredsorteddata) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteredSortedData`](IgxGridBaseDirective.md#filteredsorteddata) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1874) + +Gets/Sets the filtering state. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way binding. + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **filteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1878) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filteringExpressionsTree`](../interfaces/PivotGridType.md#filteringexpressionstree) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringExpressionsTree`](IgxGridBaseDirective.md#filteringexpressionstree) + +*** + +### filteringLogic + +#### Get Signature + +> **get** **filteringLogic**(): [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1853) + +Gets/Sets the filtering logic of the `IgxGridComponent`. + +##### Remarks + +The default is AND. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> +``` + +##### Returns + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +#### Set Signature + +> **set** **filteringLogic**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1857) + +##### Parameters + +###### value + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filteringLogic`](../interfaces/PivotGridType.md#filteringlogic) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringLogic`](IgxGridBaseDirective.md#filteringlogic) + +*** + +### filterMode + +#### Set Signature + +> **set** **filterMode**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L764) + +Gets/Sets the filter mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it's set to FilterMode.quickFilter. + +##### Parameters + +###### \_value + +[`FilterMode`](../type-aliases/FilterMode.md) + +##### Returns + +`void` + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filterMode`](../interfaces/PivotGridType.md#filtermode) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterMode`](IgxGridBaseDirective.md#filtermode) + +*** + +### filterStrategy + +#### Get Signature + +> **get** **filterStrategy**(): [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2456) + +Gets/Sets the filtering strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid> +``` + +##### Returns + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +#### Set Signature + +> **set** **filterStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2460) + +##### Parameters + +###### classRef + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`filterStrategy`](../interfaces/PivotGridType.md#filterstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterStrategy`](IgxGridBaseDirective.md#filterstrategy) + +*** + +### hasCellsToMerge + +#### Get Signature + +> **get** `protected` **hasCellsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4082) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hasCellsToMerge`](IgxGridBaseDirective.md#hascellstomerge) + +*** + +### hasVisibleColumns + +#### Set Signature + +> **set** **hasVisibleColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5533) + +Indicates whether the grid has columns that are shown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether the grid has columns that are shown + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`hasVisibleColumns`](../interfaces/PivotGridType.md#hasvisiblecolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hasVisibleColumns`](IgxGridBaseDirective.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **headerCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1557) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1574) + +Sets the row collapse indicator template. +```html +<ng-template igxHeaderCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`headerCollapsedIndicatorTemplate`](../interfaces/PivotGridType.md#headercollapsedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerCollapsedIndicatorTemplate`](IgxGridBaseDirective.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +#### Get Signature + +> **get** **headerExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1526) + +Gets the header expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1543) + +Sets the header expand indicator template. +```html +<ng-template igxHeaderExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`headerExpandedIndicatorTemplate`](../interfaces/PivotGridType.md#headerexpandedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerExpandedIndicatorTemplate`](IgxGridBaseDirective.md#headerexpandedindicatortemplate) + +*** + +### headSelectorTemplate + +#### Get Signature + +> **get** **headSelectorTemplate**(): `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2620) + +Gets the header row selector template. + +##### Returns + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **headSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2637) + +Sets the header row selector template. +```html +<ng-template #template igxHeadSelector let-headContext> +{{ headContext.selectedCount }} / {{ headContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`headSelectorTemplate`](../interfaces/PivotGridType.md#headselectortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headSelectorTemplate`](IgxGridBaseDirective.md#headselectortemplate) + +*** + +### height + +#### Get Signature + +> **get** **height**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2109) + +Gets/Sets the height. + +##### Example + +```html +<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **height**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2113) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`height`](IgxGridBaseDirective.md#height) + +*** + +### hideRowSelectors + +#### Set Signature + +> **set** **hideRowSelectors**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L697) + +Gets/Sets if the row selectors are hidden. + +##### Remarks + +By default row selectors are shown + +##### Parameters + +###### \_value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hideRowSelectors`](IgxGridBaseDirective.md#hiderowselectors) + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1112) + +Gets/Sets the value of the `id` attribute. + +##### Remarks + +If not provided it will be automatically generated. + +##### Example + +```html +<igx-pivot-grid [id]="'igx-pivot-1'" [data]="Data"></igx-pivot-grid> +``` + +##### Returns + +`string` + +Represents the unique identifier of the grid. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`id`](../interfaces/PivotGridType.md#id) + +#### Overrides + +`IgxGridBaseDirective.id` + +*** + +### isCustomSetRowHeight + +#### Get Signature + +> **get** `protected` **isCustomSetRowHeight**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3340) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isCustomSetRowHeight`](IgxGridBaseDirective.md#iscustomsetrowheight) + +*** + +### isLoading + +#### Get Signature + +> **get** **isLoading**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2235) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isLoading**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2222) + +Gets/Sets whether the grid is going to show a loading indicator. + +##### Example + +```html +<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`isLoading`](../interfaces/PivotGridType.md#isloading) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isLoading`](IgxGridBaseDirective.md#isloading) + +*** + +### lastSearchInfo + +#### Get Signature + +> **get** **lastSearchInfo**(): [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2995](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2995) + +Represents the last search information. + +##### Returns + +[`ISearchInfo`](../interfaces/ISearchInfo.md) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`lastSearchInfo`](../interfaces/PivotGridType.md#lastsearchinfo) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`lastSearchInfo`](IgxGridBaseDirective.md#lastsearchinfo) + +*** + +### loadingGridTemplate + +#### Get Signature + +> **get** **loadingGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L280) + +Gets/Sets a custom template when loading. + +##### Example + +```html +<ng-template igxGridLoading> + <!-- content to show when the grid is loading --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **loadingGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L283) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`loadingGridTemplate`](IgxGridBaseDirective.md#loadinggridtemplate) + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1970) + +Gets/Sets the locale. + +##### Remarks + +If not set, returns browser's language. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1974) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`locale`](../interfaces/PivotGridType.md#locale) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`locale`](IgxGridBaseDirective.md#locale) + +*** + +### mergedDataInView + +#### Get Signature + +> **get** `protected` **mergedDataInView**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3986) + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`mergedDataInView`](IgxGridBaseDirective.md#mergeddatainview) + +*** + +### mergeStrategy + +#### Get Signature + +> **get** **mergeStrategy**(): [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2491) + +Gets/Sets the merge strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid> +``` + +##### Returns + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +#### Set Signature + +> **set** **mergeStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2494) + +##### Parameters + +###### value + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`mergeStrategy`](../interfaces/PivotGridType.md#mergestrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`mergeStrategy`](IgxGridBaseDirective.md#mergestrategy) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4485) + +Gets the native element. + +##### Example + +```typescript +const nativeEl = this.grid.nativeElement. +``` + +##### Returns + +`any` + +Represents the native HTML element itself + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`nativeElement`](../interfaces/PivotGridType.md#nativeelement) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`nativeElement`](IgxGridBaseDirective.md#nativeelement) + +*** + +### outlet + +#### Get Signature + +> **get** **outlet**(): [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4496) + +Gets/Sets the outlet used to attach the grid's overlays to. + +##### Remarks + +If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. + +##### Returns + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +#### Set Signature + +> **set** **outlet**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4500) + +##### Parameters + +###### val + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`outlet`](../interfaces/PivotGridType.md#outlet) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`outlet`](IgxGridBaseDirective.md#outlet) + +*** + +### pagingMode + +#### Set Signature + +> **set** **pagingMode**(`_val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L685) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Parameters + +###### \_val + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +##### Returns + +`void` + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`pagingMode`](../interfaces/PivotGridType.md#pagingmode) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pagingMode`](IgxGridBaseDirective.md#pagingmode) + +*** + +### pinnedEndColumns + +#### Get Signature + +> **get** **pinnedEndColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4653) + +Gets an array of the pinned to the right `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedEndColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`pinnedEndColumns`](../interfaces/PivotGridType.md#pinnedendcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedEndColumns`](IgxGridBaseDirective.md#pinnedendcolumns) + +*** + +### pinnedStartColumns + +#### Get Signature + +> **get** **pinnedStartColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4641) + +Gets an array of the pinned to the left `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedStartColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`pinnedStartColumns`](../interfaces/PivotGridType.md#pinnedstartcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedStartColumns`](IgxGridBaseDirective.md#pinnedstartcolumns) + +*** + +### pinning + +#### Set Signature + +> **set** **pinning**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:884](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L884) + +Gets/Sets the initial pinning configuration. + +##### Remarks + +Allows to apply pinning the columns to the start or the end. +Note that pinning to both sides at a time is not allowed. + +##### Example + +```html +<igx-grid [pinning]="pinningConfig"></igx-grid> +``` + +##### Parameters + +###### \_value + +##### Returns + +`void` + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`pinning`](../interfaces/PivotGridType.md#pinning) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinning`](IgxGridBaseDirective.md#pinning) + +*** + +### pivotConfiguration + +#### Get Signature + +> **get** **pivotConfiguration**(): [`IPivotConfiguration`](../interfaces/IPivotConfiguration.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:309](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L309) + +The configuration settings for the pivot grid. +it includes dimension strategy for rows and columns, filters and data keys + +##### Returns + +[`IPivotConfiguration`](../interfaces/IPivotConfiguration.md) + +#### Set Signature + +> **set** **pivotConfiguration**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L298) + +Gets/Sets the pivot configuration with all related dimensions and values. + +##### Example + +```html +<igx-pivot-grid [pivotConfiguration]="config"></igx-pivot-grid> +``` + +##### Parameters + +###### value + +[`IPivotConfiguration`](../interfaces/IPivotConfiguration.md) + +##### Returns + +`void` + +The configuration settings for the pivot grid. +it includes dimension strategy for rows and columns, filters and data keys + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`pivotConfiguration`](../interfaces/PivotGridType.md#pivotconfiguration) + +*** + +### pivotUI + +#### Get Signature + +> **get** **pivotUI**(): [`IPivotUISettings`](../interfaces/IPivotUISettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L342) + +Specifies whether to show the pivot configuration UI in the grid. + +##### Returns + +[`IPivotUISettings`](../interfaces/IPivotUISettings.md) + +#### Set Signature + +> **set** **pivotUI**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L336) + +Specifies whether to show the pivot configuration UI in the grid. + +##### Parameters + +###### value + +[`IPivotUISettings`](../interfaces/IPivotUISettings.md) + +##### Returns + +`void` + +Specifies whether to show the pivot configuration UI in the grid. + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`pivotUI`](../interfaces/PivotGridType.md#pivotui) + +*** + +### pivotValueCloneStrategy + +#### Set Signature + +> **set** **pivotValueCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:394](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L394) + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L443) + +Gets/Sets the primary key. + +##### Example + +```html +<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **primaryKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L447) + +Represents the unique primary key used for identifying rows in the grid + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the unique primary key used for identifying rows in the grid + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`primaryKey`](../interfaces/PivotGridType.md#primarykey) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`primaryKey`](IgxGridBaseDirective.md#primarykey) + +*** + +### renderData + +#### Get Signature + +> **get** `protected` **renderData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3446) + +##### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`renderData`](IgxGridBaseDirective.md#renderdata) + +*** + +### renderedActualRowHeight + +#### Get Signature + +> **get** `protected` **renderedActualRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7829) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`renderedActualRowHeight`](IgxGridBaseDirective.md#renderedactualrowheight) + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1837) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1832) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`resourceStrings`](../interfaces/PivotGridType.md#resourcestrings) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`resourceStrings`](IgxGridBaseDirective.md#resourcestrings) + +*** + +### rowAddTextTemplate + +#### Get Signature + +> **get** **rowAddTextTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1403) + +Gets the row add text template. + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **rowAddTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1419) + +Sets the row add text template. +```html +<ng-template #template igxRowAddText> +Adding Row +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowAddTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAddTextTemplate`](IgxGridBaseDirective.md#rowaddtexttemplate) + +*** + +### rowCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **rowCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1495) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1512) + +Sets the row collapse indicator template. +```html +<ng-template igxRowCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowCollapsedIndicatorTemplate`](../interfaces/PivotGridType.md#rowcollapsedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowCollapsedIndicatorTemplate`](IgxGridBaseDirective.md#rowcollapsedindicatortemplate) + +*** + +### rowDraggable + +#### Set Signature + +> **set** **rowDraggable**(`_val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:742](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L742) + +Gets/Sets whether rows can be moved. + +##### Example + +```html +<igx-grid #grid [rowDraggable]="true"></igx-grid> +``` + +##### Parameters + +###### \_val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowDraggable`](../interfaces/PivotGridType.md#rowdraggable) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDraggable`](IgxGridBaseDirective.md#rowdraggable) + +*** + +### rowEditable + +#### Set Signature + +> **set** **rowEditable**(`_val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L874) + +Gets/Sets whether the rows are editable. + +##### Remarks + +By default it is set to false. + +##### Example + +```html +<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> +``` + +##### Parameters + +###### \_val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowEditable`](../interfaces/PivotGridType.md#roweditable) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditable`](IgxGridBaseDirective.md#roweditable) + +*** + +### rowEditActionsTemplate + +#### Get Signature + +> **get** **rowEditActionsTemplate**(): `TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1433) + +Gets the row edit actions template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditActionsTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1450) + +Sets the row edit actions template. +```html +<ng-template #template igxRowEditActions let-endRowEdit> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditActionsTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditActionsTemplate`](IgxGridBaseDirective.md#roweditactionstemplate) + +*** + +### rowEditTextTemplate + +#### Get Signature + +> **get** **rowEditTextTemplate**(): `TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1373) + +Gets the row edit text template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1389) + +Sets the row edit text template. +```html +<ng-template #template igxRowEditText let-rowChangesCount> +Changes: {{rowChangesCount}} +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditTextTemplate`](IgxGridBaseDirective.md#rowedittexttemplate) + +*** + +### rowExpandedIndicatorTemplate + +#### Get Signature + +> **get** **rowExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1464) + +Gets the row expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1481) + +Sets the row expand indicator template. +```html +<ng-template igxRowExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowExpandedIndicatorTemplate`](../interfaces/PivotGridType.md#rowexpandedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowExpandedIndicatorTemplate`](IgxGridBaseDirective.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2166) + +Gets/Sets the row height. + +##### Example + +```html +<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2170) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +##### Parameters + +###### value + +`string` \| `number` + +##### Returns + +`void` + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowHeight`](../interfaces/PivotGridType.md#rowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowHeight`](IgxGridBaseDirective.md#rowheight) + +*** + +### rowList + +#### Get Signature + +> **get** **rowList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2585) + +A list of `IgxGridRowComponent`. + +##### Example + +```typescript +const rowList = this.grid.rowList; +``` + +##### Returns + +`any` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowList`](../interfaces/PivotGridType.md#rowlist) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowList`](IgxGridBaseDirective.md#rowlist) + +*** + +### rowSelection + +#### Get Signature + +> **get** **rowSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2922) + +Gets/Sets row selection mode + +##### Remarks + +By default the row selection mode is 'none' +Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **rowSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2926) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowSelection`](../interfaces/PivotGridType.md#rowselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelection`](IgxGridBaseDirective.md#rowselection) + +*** + +### rowSelectorTemplate + +#### Get Signature + +> **get** **rowSelectorTemplate**(): `TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2653) + +Gets the row selector template. + +##### Returns + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **rowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2670) + +Sets a custom template for the row selectors. +```html +<ng-template #template igxRowSelector let-rowContext> + <igx-checkbox [checked]="rowContext.selected"></igx-checkbox> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`rowSelectorTemplate`](../interfaces/PivotGridType.md#rowselectortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelectorTemplate`](IgxGridBaseDirective.md#rowselectortemplate) + +*** + +### selectedRows + +#### Get Signature + +> **get** **selectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L946) + +Gets/Sets the current selection state. + +##### Remarks + +Represents the selected rows' IDs (primary key or rowData) + +##### Example + +```html +<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid> +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectedRows`](../interfaces/PivotGridType.md#selectedrows) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedRows`](IgxGridBaseDirective.md#selectedrows) + +*** + +### selectRowOnClick + +#### Get Signature + +> **get** **selectRowOnClick**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5822) + +Gets/Sets whether clicking over a row should select/deselect it + +##### Remarks + +By default it is set to true + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectRowOnClick**(`enabled`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5826) + +##### Parameters + +###### enabled + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectRowOnClick`](../interfaces/PivotGridType.md#selectrowonclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRowOnClick`](IgxGridBaseDirective.md#selectrowonclick) + +*** + +### shouldGenerate + +#### Set Signature + +> **set** **shouldGenerate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:720](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L720) + +Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid + +##### Remarks + +This will allow to bind the grid to remote data and having auto-generated columns at the same time. +Note that after generating the columns, this property would be disabled to avoid re-creating +columns each time a new data is assigned. + +##### Example + +```typescript + this.grid.shouldGenerate = true; +``` + +##### Deprecated + +in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldGenerate`](IgxGridBaseDirective.md#shouldgenerate) + +*** + +### shouldResize + +#### Get Signature + +> **get** `protected` **shouldResize**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1063) + +##### Returns + +`boolean` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldResize`](IgxGridBaseDirective.md#shouldresize) + +*** + +### showSummaryOnCollapse + +#### Set Signature + +> **set** **showSummaryOnCollapse**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:917](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L917) + +Controls whether the summary row is visible when groupBy/parent row is collapsed. + +##### Example + +```html +<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible +when the groupBy/parent row is collapsed. + +##### Parameters + +###### \_value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`showSummaryOnCollapse`](IgxGridBaseDirective.md#showsummaryoncollapse) + +*** + +### sortAscendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortAscendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1619) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortAscendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1636) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. +```html +<ng-template #template igxSortAscendingHeaderIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortAscendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortAscendingHeaderIconTemplate`](../interfaces/PivotGridType.md#sortascendingheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortAscendingHeaderIconTemplate`](IgxGridBaseDirective.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortDescendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1648) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortDescendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1665) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. +```html +<ng-template #template igxSortDescendingHeaderIcon> + <igx-icon>expand_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortDescendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortDescendingHeaderIconTemplate`](../interfaces/PivotGridType.md#sortdescendingheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortDescendingHeaderIconTemplate`](IgxGridBaseDirective.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +#### Get Signature + +> **get** **sortHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1680) + +Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1697) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. +```html +<ng-template #template igxSortHeaderIcon> + <igx-icon>unfold_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortHeaderIconTemplate`](../interfaces/PivotGridType.md#sortheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortHeaderIconTemplate`](IgxGridBaseDirective.md#sortheadericontemplate) + +*** + +### sortingExpressions + +#### Get Signature + +> **get** **sortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2787](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2787) + +Gets/Sets the sorting state. + +##### Remarks + +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid> +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Set Signature + +> **set** **sortingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2791) + +##### Parameters + +###### value + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortingExpressions`](../interfaces/PivotGridType.md#sortingexpressions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingExpressions`](IgxGridBaseDirective.md#sortingexpressions) + +*** + +### sortingOptions + +#### Get Signature + +> **get** **sortingOptions**(): [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2520) + +##### Returns + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +#### Set Signature + +> **set** **sortingOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2512) + +Gets/Sets the sorting options - single or multiple sorting. +Accepts an `ISortingOptions` object with any of the `mode` properties. + +##### Example + +```typescript +const _sortingOptions: ISortingOptions = { + mode: 'single' +} +```html +<igx-grid [sortingOptions]="sortingOptions"><igx-grid> +``` + +##### Parameters + +###### value + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortingOptions`](../interfaces/PivotGridType.md#sortingoptions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingOptions`](IgxGridBaseDirective.md#sortingoptions) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2473) + +Gets/Sets the sorting strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid> +``` + +##### Returns + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2477) + +##### Parameters + +###### value + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortStrategy`](../interfaces/PivotGridType.md#sortstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortStrategy`](IgxGridBaseDirective.md#sortstrategy) + +*** + +### summaryCalculationMode + +#### Set Signature + +> **set** **summaryCalculationMode**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L906) + +Gets/Sets the summary calculation mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. + +##### Parameters + +###### \_value + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +##### Returns + +`void` + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`summaryCalculationMode`](../interfaces/PivotGridType.md#summarycalculationmode) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryCalculationMode`](IgxGridBaseDirective.md#summarycalculationmode) + +*** + +### summaryPosition + +#### Set Signature + +> **set** **summaryPosition**(`_value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:895](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L895) + +Gets/Sets the summary position. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is bottom. + +##### Parameters + +###### \_value + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +##### Returns + +`void` + +Represents the position of summaries: 'top', 'bottom' + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`summaryPosition`](../interfaces/PivotGridType.md#summaryposition) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryPosition`](IgxGridBaseDirective.md#summaryposition) + +*** + +### summaryRowHeight + +#### Get Signature + +> **get** **summaryRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:842](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L842) + +Get/Set IgxSummaryRow height + +##### Returns + +`number` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`summaryRowHeight`](../interfaces/PivotGridType.md#summaryrowheight) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryRowHeight`](IgxGridBaseDirective.md#summaryrowheight) + +*** + +### superCompactMode + +#### Get Signature + +> **get** **superCompactMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L363) + +Enables a super compact theme for the component. + +##### Remarks + +Overrides the grid size option if one is set. + +##### Example + +```html +<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **superCompactMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:367](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L367) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### totalCalcWidth + +#### Get Signature + +> **get** `protected` **totalCalcWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3442) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`totalCalcWidth`](IgxGridBaseDirective.md#totalcalcwidth) + +*** + +### totalRecords + +#### Set Signature + +> **set** **totalRecords**(`_total`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1336) + +Returns the total number of records. + +##### Remarks + +Only functions when paging is enabled. + +##### Example + +```typescript +const totalRecords = this.grid.totalRecords; +``` + +##### Parameters + +###### \_total + +`number` + +##### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`totalRecords`](IgxGridBaseDirective.md#totalrecords) + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3596) + +Returns the state of the grid virtualization. + +##### Remarks + +Includes the start index and how many records are rendered. + +##### Example + +```typescript +const gridVirtState = this.grid1.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`virtualizationState`](../interfaces/PivotGridType.md#virtualizationstate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`virtualizationState`](IgxGridBaseDirective.md#virtualizationstate) + +*** + +### visibleColumns + +#### Get Signature + +> **get** **visibleColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4741) + +Returns an array of visible `IgxColumnComponent`s. + +##### Example + +```typescript +const visibleColumns = this.grid.visibleColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`visibleColumns`](../interfaces/PivotGridType.md#visiblecolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`visibleColumns`](IgxGridBaseDirective.md#visiblecolumns) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2139) + +Gets/Sets the width of the grid. + +##### Example + +```typescript +let gridWidth = this.grid.width; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2143) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`width`](IgxGridBaseDirective.md#width) + +## Methods + +### \_addRowForIndex() + +> `protected` **\_addRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6590) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_addRowForIndex`](IgxGridBaseDirective.md#_addrowforindex) + +*** + +### \_removeDimensionInternal() + +> `protected` **\_removeDimensionInternal**(`dimension`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1924) + +#### Parameters + +##### dimension + +`any` + +#### Returns + +`void` + +*** + +### \_restoreVirtState() + +> `protected` **\_restoreVirtState**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6717](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6717) + +#### Parameters + +##### row + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_restoreVirtState`](IgxGridBaseDirective.md#_restorevirtstate) + +*** + +### \_shouldAutoSize() + +> `protected` **\_shouldAutoSize**(`renderedHeight`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7278) + +#### Parameters + +##### renderedHeight + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_shouldAutoSize`](IgxGridBaseDirective.md#_shouldautosize) + +*** + +### allowResetOfColumnsToMerge() + +> `protected` **allowResetOfColumnsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3974) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowResetOfColumnsToMerge`](IgxGridBaseDirective.md#allowresetofcolumnstomerge) + +*** + +### autoSizeColumnsInView() + +> `protected` **autoSizeColumnsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7583) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoSizeColumnsInView`](IgxGridBaseDirective.md#autosizecolumnsinview) + +*** + +### autoSizeDimensionsInView() + +> `protected` **autoSizeDimensionsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2170) + +#### Returns + +`void` + +*** + +### autoSizeRowDimension() + +> **autoSizeRowDimension**(`dimension`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1595](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1595) + +Auto-sizes row dimension cells. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +The row dimension to size. + +#### Returns + +`void` + +#### Remarks + +Only sizes based on the dimension cells in view. + +#### Example + +```typescript +this.grid.autoSizeRowDimension(dimension); +``` + +*** + +### beginAddRowForIndex() + +> `protected` **beginAddRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6645) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowForIndex`](IgxGridBaseDirective.md#beginaddrowforindex) + +*** + +### buildDataView() + +> `protected` **buildDataView**(`data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2052](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2052) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`buildDataView`](IgxGridBaseDirective.md#builddataview) + +*** + +### calculateResizerTop() + +> `protected` **calculateResizerTop**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2467) + +#### Returns + +`any` + +*** + +### changeRowEditingOverlayStateOnScroll() + +> `protected` **changeRowEditingOverlayStateOnScroll**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6726](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6726) + +#### Parameters + +##### row + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`changeRowEditingOverlayStateOnScroll`](IgxGridBaseDirective.md#changeroweditingoverlaystateonscroll) + +*** + +### checkContainerSizeChange() + +> `protected` **checkContainerSizeChange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7269) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`checkContainerSizeChange`](IgxGridBaseDirective.md#checkcontainersizechange) + +*** + +### checkPrimaryKeyField() + +> `protected` **checkPrimaryKeyField**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7068) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`checkPrimaryKeyField`](IgxGridBaseDirective.md#checkprimarykeyfield) + +*** + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5906) + +Deselect selected cells. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearCellSelection(); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`clearCellSelection`](../interfaces/PivotGridType.md#clearcellselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearCellSelection`](IgxGridBaseDirective.md#clearcellselection) + +*** + +### clearFilter() + +> **clearFilter**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5235) + +If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +Otherwise clears the filtering state of all `IgxColumnComponent`s. + +#### Example + +```typescript +this.grid.clearFilter(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearFilter`](IgxGridBaseDirective.md#clearfilter) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5250) + +If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +otherwise clears the sorting state of all `IgxColumnComponent`. + +#### Example + +```typescript +this.grid.clearSort(); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`clearSort`](../interfaces/PivotGridType.md#clearsort) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearSort`](IgxGridBaseDirective.md#clearsort) + +*** + +### createColumnForDimension() + +> `protected` **createColumnForDimension**(`value`, `data`, `parent`, `isGroup`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2373) + +#### Parameters + +##### value + +`any` + +##### data + +`any` + +##### parent + +[`ColumnType`](../interfaces/ColumnType.md) + +##### isGroup + +`boolean` + +#### Returns + +`any` + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6069](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6069) + +Deselects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`deselectAllColumns`](../interfaces/PivotGridType.md#deselectallcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectAllColumns`](IgxGridBaseDirective.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5890) + +Deselects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.deselectAllRows(); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`deselectAllRows`](../interfaces/PivotGridType.md#deselectallrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectAllRows`](IgxGridBaseDirective.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6043](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6043) + +Deselect specified columns by field. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectColumns(['ID','Name']); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`deselectColumns`](../interfaces/PivotGridType.md#deselectcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectColumns`](IgxGridBaseDirective.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5854) + +Deselect specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectRows([1,2,5]); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`deselectRows`](../interfaces/PivotGridType.md#deselectrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectRows`](IgxGridBaseDirective.md#deselectrows) + +*** + +### evaluateLoadingState() + +> `protected` **evaluateLoadingState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6741) + +Should be called when data and/or isLoading input changes so that the overlay can be +hidden/shown based on the current value of shouldOverlayLoading + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`evaluateLoadingState`](IgxGridBaseDirective.md#evaluateloadingstate) + +*** + +### extractDataFromColumnsSelection() + +> `protected` **extractDataFromColumnsSelection**(`source`, `formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7637) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`extractDataFromColumnsSelection`](IgxGridBaseDirective.md#extractdatafromcolumnsselection) + +*** + +### extractDataFromSelection() + +> `protected` **extractDataFromSelection**(`source`, `formatters?`, `headers?`, `columnData?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7444) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +##### columnData? + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`extractDataFromSelection`](IgxGridBaseDirective.md#extractdatafromselection) + +*** + +### filter() + +> **filter**(`name`, `value`, `conditionOrExpressionTree?`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5157) + +Filters a single `IgxColumnComponent`. + +#### Parameters + +##### name + +`string` + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### ignoreCase? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +public filter(term) { + this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); +} +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filter`](IgxGridBaseDirective.md#filter) + +*** + +### filterDimension() + +> **filterDimension**(`dimension`, `value`, `conditionOrExpressionTree?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1858) + +Filters a single `IPivotDimension`. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`void` + +#### Example + +```typescript +public filter() { + const set = new Set(); + set.add('Value 1'); + set.add('Value 2'); + this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in')); +} +``` + +*** + +### ~~filterGlobal()~~ + +> **filterGlobal**(`value`, `condition`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5174) + +Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. + +#### Parameters + +##### value + +`any` + +##### condition + +`any` + +##### ignoreCase? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); +``` + +#### Deprecated + +in version 19.0.0. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterGlobal`](IgxGridBaseDirective.md#filterglobal) + +*** + +### generateColumnHierarchy() + +> `protected` **generateColumnHierarchy**(`fields`, `data`, `parent?`): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2228) + +#### Parameters + +##### fields + +`Map`\<`string`, `any`\> + +##### data + +`any` + +##### parent? + +`any` = `null` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +*** + +### generateConfig() + +> `protected` **generateConfig**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2313) + +#### Returns + +`void` + +*** + +### generateDataFields() + +> `protected` **generateDataFields**(`data`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7384) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`string`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`generateDataFields`](IgxGridBaseDirective.md#generatedatafields) + +*** + +### generateDimensionColumns() + +> `protected` **generateDimensionColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2130) + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +*** + +### generateFromData() + +> `protected` **generateFromData**(`fields`): `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2204) + +#### Parameters + +##### fields + +`string`[] + +#### Returns + +`Map`\<`string`, `any`\> + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4704) + +Returns the `IgxColumnComponent` by field name. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Example + +```typescript +const myCol = this.grid1.getColumnByName("ID"); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`getColumnByName`](../interfaces/PivotGridType.md#getcolumnbyname) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnByName`](IgxGridBaseDirective.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4708) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`getColumnByVisibleIndex`](../interfaces/PivotGridType.md#getcolumnbyvisibleindex) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnByVisibleIndex`](IgxGridBaseDirective.md#getcolumnbyvisibleindex) + +*** + +### getColumnGroupExpandState() + +> **getColumnGroupExpandState**(`col`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1531) + +#### Parameters + +##### col + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`boolean` + +*** + +### getColumnList() + +> `protected` **getColumnList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6951) + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnList`](IgxGridBaseDirective.md#getcolumnlist) + +*** + +### getContentCollection() + +> `protected` **getContentCollection**(`dimenstion`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2159) + +#### Parameters + +##### dimenstion + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +#### Returns + +`any` + +*** + +### getDimensionType() + +> `protected` **getDimensionType**(`dimension`): [`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1934) + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +#### Returns + +[`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4689) + +Gets the `width` to be set on `IgxGridHeaderGroupComponent`. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`string` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`getHeaderGroupWidth`](../interfaces/PivotGridType.md#getheadergroupwidth) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getHeaderGroupWidth`](IgxGridBaseDirective.md#getheadergroupwidth) + +*** + +### getLargesContentWidth() + +> `protected` **getLargesContentWidth**(`contents`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1946) + +#### Parameters + +##### contents + +`ElementRef`[] + +#### Returns + +`string` + +*** + +### getMeasureChildren() + +> `protected` **getMeasureChildren**(`data`, `parent`, `hidden`, `parentWidth`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2399](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2399) + +#### Parameters + +##### data + +`any` + +##### parent + +`any` + +##### hidden + +`any` + +##### parentWidth + +`any` + +#### Returns + +`any`[] + +*** + +### getMergeCellOffset() + +> `protected` **getMergeCellOffset**(`rowData`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3655) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getMergeCellOffset`](IgxGridBaseDirective.md#getmergecelloffset) + +*** + +### getPinnedEndWidth() + +> **getPinnedEndWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5735) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedEndWidth(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPinnedEndWidth`](IgxGridBaseDirective.md#getpinnedendwidth) + +*** + +### getPivotRowHeaderContentWidth() + +> `protected` **getPivotRowHeaderContentWidth**(`headerGroup`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1941) + +#### Parameters + +##### headerGroup + +`IgxPivotRowHeaderGroupComponent` + +#### Returns + +`number` + +*** + +### getRowData() + +> **getRowData**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5090) + +Returns the data that is contained in the row component. + +#### Parameters + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`any` + +#### Remarks + +If the primary key is not specified the row selector match the row data. + +#### Example + +```typescript +const data = grid.getRowData(94741); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getRowData`](IgxGridBaseDirective.md#getrowdata) + +*** + +### getSelectableColumnsAt() + +> `protected` **getSelectableColumnsAt**(`index`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7568](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7568) + +#### Parameters + +##### index + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectableColumnsAt`](IgxGridBaseDirective.md#getselectablecolumnsat) + +*** + +### getSelectedColumnsData() + +> **getSelectedColumnsData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6094](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6094) + +Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedColumnsData`](IgxGridBaseDirective.md#getselectedcolumnsdata) + +*** + +### getSelectedData() + +> **getSelectedData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5986) + +Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedData`](IgxGridBaseDirective.md#getselecteddata) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5974) + +Get the currently selected ranges in the grid. + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`getSelectedRanges`](../interfaces/PivotGridType.md#getselectedranges) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedRanges`](IgxGridBaseDirective.md#getselectedranges) + +*** + +### horizontalScrollHandler() + +> `protected` **horizontalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2064](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2064) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`horizontalScrollHandler`](IgxGridBaseDirective.md#horizontalscrollhandler) + +*** + +### insertDimensionAt() + +> **insertDimensionAt**(`dimension`, `targetCollectionType`, `index?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1628) + +Inserts dimension in target collection by type at specified index or at the collection's end. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +The dimension that will be added. + +##### targetCollectionType + +[`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +The target collection type to add to. Can be Row, Column or Filter. + +##### index? + +`number` + +The index in the collection at which to add. +This parameter is optional. If not set it will add it to the end of the collection. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1); +``` + +*** + +### insertValueAt() + +> **insertValueAt**(`value`, `index?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1737](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1737) + +Inserts value at specified index or at the end. + +#### Parameters + +##### value + +[`IPivotValue`](../interfaces/IPivotValue.md) + +The value definition that will be added. + +##### index? + +`number` + +The index in the collection at which to add. +This parameter is optional. If not set it will add it to the end of the collection. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.insertValueAt(value, 1); +``` + +*** + +### markForCheck() + +> **markForCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4926) + +Triggers change detection for the `IgxGridComponent`. +Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. +May degrade performance if used when not needed, or if misused: +```typescript +// DON'Ts: +// don't call markForCheck from inside a loop +// don't call markForCheck when a primitive has changed +grid.data.forEach(rec => { + rec = newValue; + grid.markForCheck(); +}); + +// DOs +// call markForCheck after updating a nested property +grid.data.forEach(rec => { + rec.nestedProp1.nestedProp2 = newValue; +}); +grid.markForCheck(); +``` + +#### Returns + +`void` + +#### Example + +```typescript +grid.markForCheck(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`markForCheck`](IgxGridBaseDirective.md#markforcheck) + +*** + +### moveDimension() + +> **moveDimension**(`dimension`, `targetCollectionType`, `index?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1659) + +Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +The dimension that will be moved. + +##### targetCollectionType + +[`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +The target collection type to move it to. Can be Row, Column or Filter. + +##### index? + +`number` + +The index in the collection at which to add. +This parameter is optional. If not set it will add it to the end of the collection. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.moveDimension(dimension, PivotDimensionType.Row, 1); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`moveDimension`](../interfaces/PivotGridType.md#movedimension) + +*** + +### moveValue() + +> **moveValue**(`value`, `index?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1765) + +Move value from its currently at specified index or at the end. + +#### Parameters + +##### value + +[`IPivotValue`](../interfaces/IPivotValue.md) + +The value that will be moved. + +##### index? + +`number` + +The index in the collection at which to add. +This parameter is optional. If not set it will add it to the end of the collection. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.moveValue(value, 1); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`moveValue`](../interfaces/PivotGridType.md#movevalue) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColIndex?`, `cb?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6224) + +Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColIndex? + +`number` = `-1` + +##### cb? + +(`args`) => `void` + +#### Returns + +`void` + +#### Remarks + +Also can execute a custom logic over the target element, +through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } + +#### Example + +```typescript + this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`navigateTo`](../interfaces/PivotGridType.md#navigateto) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`navigateTo`](IgxGridBaseDirective.md#navigateto) + +*** + +### notifyDimensionChange() + +> **notifyDimensionChange**(`regenerateColumns?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1033](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1033) + +Notifies for dimension change. + +#### Parameters + +##### regenerateColumns? + +`boolean` = `false` + +#### Returns + +`void` + +*** + +### recalculateAutoSizes() + +> **recalculateAutoSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4723](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4723) + +Recalculates all widths of columns that have size set to `auto`. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.recalculateAutoSizes(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`recalculateAutoSizes`](IgxGridBaseDirective.md#recalculateautosizes) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5401) + +Recalculates grid width/height dimensions. + +#### Returns + +`void` + +#### Remarks + +Should be run when changing DOM elements dimentions manually that affect the grid's size. + +#### Example + +```typescript +this.grid.reflow(); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`reflow`](../interfaces/PivotGridType.md#reflow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`reflow`](IgxGridBaseDirective.md#reflow) + +*** + +### removeDimension() + +> **removeDimension**(`dimension`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1683](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1683) + +Removes dimension from its currently collection. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +The dimension to be removed. + +#### Returns + +`void` + +#### Remarks + +This is different than toggleDimension that enabled/disables the dimension. +This completely removes the specified dimension from the collection. + +#### Example + +```typescript +this.grid.removeDimension(dimension); +``` + +*** + +### removeValue() + +> **removeValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1784](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1784) + +Removes value from collection. + +#### Parameters + +##### value + +[`IPivotValue`](../interfaces/IPivotValue.md) + +The value to be removed. + +#### Returns + +`void` + +#### Remarks + +This is different than toggleValue that enabled/disables the value. +This completely removes the specified value from the collection. + +#### Example + +```typescript +this.grid.removeValue(dimension); +``` + +*** + +### resetNotifyChanges() + +> `protected` **resetNotifyChanges**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6829) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`resetNotifyChanges`](IgxGridBaseDirective.md#resetnotifychanges) + +*** + +### resolveColumnDimensionWidth() + +> `protected` **resolveColumnDimensionWidth**(`dim`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2392) + +#### Parameters + +##### dim + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +#### Returns + +`string` + +*** + +### resolveToggle() + +> `protected` **resolveToggle**(`groupColumn`, `state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2026) + +#### Parameters + +##### groupColumn + +[`ColumnType`](../interfaces/ColumnType.md) + +##### state + +`boolean` + +#### Returns + +`void` + +*** + +### rowDimensionByName() + +> `protected` **rowDimensionByName**(`memberName`): [`IPivotDimension`](../interfaces/IPivotDimension.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2463) + +#### Parameters + +##### memberName + +`string` + +#### Returns + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +*** + +### selectAllColumns() + +> **selectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6082) + +Selects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectAllColumns`](IgxGridBaseDirective.md#selectallcolumns) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5872) + +Selects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.selectAllRows(); +this.grid.selectAllRows(false); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectAllRows`](../interfaces/PivotGridType.md#selectallrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectAllRows`](IgxGridBaseDirective.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6015) + +Select specified columns. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectColumns(['ID','Name'], true); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectColumns`](../interfaces/PivotGridType.md#selectcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectColumns`](IgxGridBaseDirective.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6000](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6000) + +Get current selected columns. + +#### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Example + +Returns an array with selected columns +```typescript +const selectedColumns = this.grid.selectedColumns(); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectedColumns`](../interfaces/PivotGridType.md#selectedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedColumns`](IgxGridBaseDirective.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`arg`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5934) + +Select range(s) of cells between certain rows and columns of the grid. + +#### Parameters + +##### arg + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) \| [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectRange`](../interfaces/PivotGridType.md#selectrange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRange`](IgxGridBaseDirective.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5840) + +Select specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRows([1,2,5], true); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`selectRows`](../interfaces/PivotGridType.md#selectrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRows`](IgxGridBaseDirective.md#selectrows) + +*** + +### shouldRecreateColumns() + +> `protected` **shouldRecreateColumns**(`oldData`, `newData`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8177) + +#### Parameters + +##### oldData + +`any`[] + +##### newData + +`any`[] + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldRecreateColumns`](IgxGridBaseDirective.md#shouldrecreatecolumns) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5109) + +Sort a single `IgxColumnComponent`. + +#### Parameters + +##### expression + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Remarks + +Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. + +#### Example + +```typescript +this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sort`](../interfaces/PivotGridType.md#sort) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sort`](IgxGridBaseDirective.md#sort) + +*** + +### sortDimension() + +> **sortDimension**(`dimension`, `sortDirection`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1824](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1824) + +Sort the dimension and its children in the provided direction. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### sortDirection + +[`SortingDirection`](../enumerations/SortingDirection.md) + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.sortDimension(dimension, SortingDirection.Asc); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`sortDimension`](../interfaces/PivotGridType.md#sortdimension) + +*** + +### subscribeToTransactions() + +> `protected` **subscribeToTransactions**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6668) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`subscribeToTransactions`](IgxGridBaseDirective.md#subscribetotransactions) + +*** + +### switchTransactionService() + +> `protected` **switchTransactionService**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6656) + +#### Parameters + +##### val + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`switchTransactionService`](IgxGridBaseDirective.md#switchtransactionservice) + +*** + +### toggleColumn() + +> **toggleColumn**(`col`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1275) + +#### Parameters + +##### col + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`void` + +*** + +### toggleDimension() + +> **toggleDimension**(`dimension`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1706](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1706) + +Toggles the dimension's enabled state on or off. + +#### Parameters + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +The dimension to be toggled. + +#### Returns + +`void` + +#### Remarks + +The dimension remains in its current collection. This just changes its enabled state. + +#### Example + +```typescript +this.grid.toggleDimension(dimension); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`toggleDimension`](../interfaces/PivotGridType.md#toggledimension) + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4463) + +Toggles the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.toggleRow(rowID); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`toggleRow`](../interfaces/PivotGridType.md#togglerow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`toggleRow`](IgxGridBaseDirective.md#togglerow) + +*** + +### toggleRowGroup() + +> **toggleRowGroup**(`col`, `newState`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1537) + +#### Parameters + +##### col + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### newState + +`boolean` + +#### Returns + +`void` + +*** + +### toggleValue() + +> **toggleValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1806](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L1806) + +Toggles the value's enabled state on or off. + +#### Parameters + +##### value + +[`IPivotValue`](../interfaces/IPivotValue.md) + +The value to be toggled. + +#### Returns + +`void` + +#### Remarks + +The value remains in its current collection. This just changes its enabled state. + +#### Example + +```typescript +this.grid.toggleValue(value); +``` + +#### Implementation of + +[`PivotGridType`](../interfaces/PivotGridType.md).[`toggleValue`](../interfaces/PivotGridType.md#togglevalue) + +*** + +### transactionStatusUpdate() + +> `protected` **transactionStatusUpdate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6674](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6674) + +#### Parameters + +##### event + +[`StateUpdateEvent`](../interfaces/StateUpdateEvent.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactionStatusUpdate`](IgxGridBaseDirective.md#transactionstatusupdate) + +*** + +### updateDefaultRowHeight() + +> `protected` **updateDefaultRowHeight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2473) + +#### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateDefaultRowHeight`](IgxGridBaseDirective.md#updatedefaultrowheight) + +*** + +### updateScrollThrottle() + +> `protected` **updateScrollThrottle**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3990) + +#### Parameters + +##### cells + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateScrollThrottle`](IgxGridBaseDirective.md#updatescrollthrottle) + +*** + +### verticalScrollHandler() + +> `protected` **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts#L2072) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`verticalScrollHandler`](IgxGridBaseDirective.md#verticalscrollhandler) + +*** + +### viewDetachHandler() + +> `protected` **viewDetachHandler**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6408) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`viewDetachHandler`](IgxGridBaseDirective.md#viewdetachhandler) + +*** + +### writeToData() + +> `protected` **writeToData**(`rowIndex`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6713) + +#### Parameters + +##### rowIndex + +`number` + +##### value + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`writeToData`](IgxGridBaseDirective.md#writetodata) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotNumericAggregate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotNumericAggregate.md new file mode 100644 index 000000000..e13f24fbf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotNumericAggregate.md @@ -0,0 +1,190 @@ +# Class: IgxPivotNumericAggregate + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L35) + +## Extends + +- [`IgxPivotAggregate`](IgxPivotAggregate.md) + +## Constructors + +### Constructor + +> **new IgxPivotNumericAggregate**(): `IgxPivotNumericAggregate` + +#### Returns + +`IgxPivotNumericAggregate` + +#### Inherited from + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`constructor`](IgxPivotAggregate.md#constructor) + +## Methods + +### aggregators() + +> `static` **aggregators**(): [`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L45) + +Gets array with default aggregator function for numeric aggregation. +```typescript +IgxPivotAggregate.aggregators(); +``` + +#### Returns + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +#### Memberof + +IgxPivotAggregate + +#### Overrides + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`aggregators`](IgxPivotAggregate.md#aggregators) + +*** + +### average() + +> `static` **average**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L121) + +Returns the average numeric value in the data provided data records. +If filtering is applied, returns the average numeric value in the filtered data records. +```typescript +IgxPivotNumericAggregate.average(data); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotNumericAggregate + +*** + +### count() + +> `static` **count**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L30) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotAggregate + +#### Inherited from + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`count`](IgxPivotAggregate.md#count) + +*** + +### max() + +> `static` **max**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L95) + +Returns the maximum numeric value in the provided data records. +If filtering is applied, returns the maximum value in the filtered data records. +```typescript +IgxPivotNumericAggregate.max(data); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotNumericAggregate + +*** + +### min() + +> `static` **min**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L82) + +Returns the minimum numeric value in the provided data records. +If filtering is applied, returns the minimum value in the filtered data records. +```typescript +IgxPivotNumericAggregate.min(members, data); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotNumericAggregate + +*** + +### sum() + +> `static` **sum**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L108) + +Returns the sum of the numeric values in the provided data records. +If filtering is applied, returns the sum of the numeric values in the data records. +```typescript +IgxPivotNumericAggregate.sum(data); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotNumericAggregate diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotTimeAggregate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotTimeAggregate.md new file mode 100644 index 000000000..b7d2aaa9f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPivotTimeAggregate.md @@ -0,0 +1,134 @@ +# Class: IgxPivotTimeAggregate + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L177) + +## Extends + +- [`IgxPivotAggregate`](IgxPivotAggregate.md) + +## Constructors + +### Constructor + +> **new IgxPivotTimeAggregate**(): `IgxPivotTimeAggregate` + +#### Returns + +`IgxPivotTimeAggregate` + +#### Inherited from + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`constructor`](IgxPivotAggregate.md#constructor) + +## Methods + +### aggregators() + +> `static` **aggregators**(): [`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L186) + +Gets array with default aggregator function for time aggregation. +```typescript +IgxPivotTimeAggregate.aggregators(); +``` + +#### Returns + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +#### Memberof + +IgxPivotAggregate + +#### Overrides + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`aggregators`](IgxPivotAggregate.md#aggregators) + +*** + +### count() + +> `static` **count**(`members`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L30) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### members + +`number`[] + +#### Returns + +`number` + +#### Memberof + +IgxPivotAggregate + +#### Inherited from + +[`IgxPivotAggregate`](IgxPivotAggregate.md).[`count`](IgxPivotAggregate.md#count) + +*** + +### earliestTime() + +> `static` **earliestTime**(`members`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L224) + +Returns the earliest time value in the data records. Compare only the time part of the date. +If filtering is applied, returns the earliest time value in the filtered data records. +```typescript +IgxPivotTimeAggregate.earliestTime(data); +``` + +#### Parameters + +##### members + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxPivotTimeAggregate + +*** + +### latestTime() + +> `static` **latestTime**(`members`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts#L211) + +Returns the latest time value in the data records. Compare only the time part of the date. +If filtering is applied, returns the latest time value in the filtered data records. +```typescript +IgxPivotTimeAggregate.latestTime(data); +``` + +#### Parameters + +##### members + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxPivotTimeAggregate diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPrependDropStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPrependDropStrategy.md new file mode 100644 index 000000000..c459c7027 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxPrependDropStrategy.md @@ -0,0 +1,55 @@ +# Class: IgxPrependDropStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L29) + +## Implements + +- [`IDropStrategy`](../interfaces/IDropStrategy.md) + +## Constructors + +### Constructor + +> **new IgxPrependDropStrategy**(`_renderer`): `IgxPrependDropStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L31) + +#### Parameters + +##### \_renderer + +`Renderer2` + +#### Returns + +`IgxPrependDropStrategy` + +## Methods + +### dropAction() + +> **dropAction**(`drag`, `drop`, `_atIndex`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L33) + +#### Parameters + +##### drag + +[`IgxDragDirective`](IgxDragDirective.md) + +##### drop + +[`IgxDropDirective`](IgxDropDirective.md) + +##### \_atIndex + +`number` + +#### Returns + +`void` + +#### Implementation of + +[`IDropStrategy`](../interfaces/IDropStrategy.md).[`dropAction`](../interfaces/IDropStrategy.md#dropaction) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxProgressBarGradientDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxProgressBarGradientDirective.md new file mode 100644 index 000000000..ab0787ac5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxProgressBarGradientDirective.md @@ -0,0 +1,21 @@ +# Class: IgxProgressBarGradientDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts#L15) + +## Constructors + +### Constructor + +> **new IgxProgressBarGradientDirective**(): `IgxProgressBarGradientDirective` + +#### Returns + +`IgxProgressBarGradientDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts#L16) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxProgressBarTextTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxProgressBarTextTemplateDirective.md new file mode 100644 index 000000000..beabd7175 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxProgressBarTextTemplateDirective.md @@ -0,0 +1,21 @@ +# Class: IgxProgressBarTextTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts#L7) + +## Constructors + +### Constructor + +> **new IgxProgressBarTextTemplateDirective**(): `IgxProgressBarTextTemplateDirective` + +#### Returns + +`IgxProgressBarTextTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderComponent.md new file mode 100644 index 000000000..ef9cb25e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderComponent.md @@ -0,0 +1,315 @@ +# Class: IgxQueryBuilderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L42) + +A component used for operating with complex filters by creating or editing conditions +and grouping them using AND/OR logic. +It is used internally in the Advanced Filtering of the Grid. + +## Example + +```html +<igx-query-builder [entities]="this.entities"> +</igx-query-builder> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxQueryBuilderComponent**(): `IgxQueryBuilderComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L252) + +#### Returns + +`IgxQueryBuilderComponent` + +## Properties + +### disableEntityChange + +> **disableEntityChange**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L189) + +Disables subsequent entity changes at the root level after the initial selection. + +*** + +### disableReturnFieldsChange + +> **disableReturnFieldsChange**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L207) + +Disables return fields changes at the root level. + +*** + +### expressionTreeChange + +> **expressionTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L217) + +Event fired as the expression tree is changed. + +```html + <igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder> +``` + +*** + +### iconService + +> `protected` **iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L43) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L167) + +Gets the `locale` of the query builder. +If not set, defaults to application's locale. + +*** + +### showEntityChangeDialog + +> **showEntityChangeDialog**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L62) + +Gets/sets whether the confirmation dialog should be shown when changing entity. +Default value is `true`. + +## Accessors + +### entities + +#### Get Signature + +> **get** **entities**(): [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L72) + +Gets the list of entities available for the IgxQueryBuilderComponent. + +Each entity describes a logical group of fields that can be used in queries. +An entity can optionally have child entities, allowing nested sub-queries. + +##### Returns + +[`EntityType`](../interfaces/EntityType.md)[] + +An array of [EntityType](../interfaces/EntityType.md) objects. + +#### Set Signature + +> **set** **entities**(`entities`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L101) + +Sets the list of entities for the IgxQueryBuilderComponent. +If the `expressionTree` is defined, it will be recreated with the new entities. + +Each entity should be an [EntityType](../interfaces/EntityType.md) object describing the fields and optionally child entities. + +Example: +```ts +[ + { + name: 'Orders', + fields: [{ field: 'OrderID', dataType: 'number' }], + childEntities: [ + { + name: 'OrderDetails', + fields: [{ field: 'ProductID', dataType: 'number' }] + } + ] + } +] +``` + +##### Parameters + +###### entities + +[`EntityType`](../interfaces/EntityType.md)[] + +The array of entities to set. + +##### Returns + +`void` + +*** + +### expressionTree + +#### Get Signature + +> **get** **expressionTree**(): [`IExpressionTree`](../interfaces/IExpressionTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L144) + +Returns the expression tree. + +##### Returns + +[`IExpressionTree`](../interfaces/IExpressionTree.md) + +#### Set Signature + +> **set** **expressionTree**(`expressionTree`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L152) + +Sets the expression tree. + +##### Parameters + +###### expressionTree + +[`IExpressionTree`](../interfaces/IExpressionTree.md) + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L181) + +Returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L174) + +Sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### searchValueTemplate + +#### Get Signature + +> **get** **searchValueTemplate**(): `TemplateRef`\<`IgxQueryBuilderSearchValueContext`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L199) + +##### Returns + +`TemplateRef`\<`IgxQueryBuilderSearchValueContext`\> + +#### Set Signature + +> **set** **searchValueTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L195) + +Sets/gets the search value template. + +##### Parameters + +###### template + +`TemplateRef`\<`IgxQueryBuilderSearchValueContext`\> + +##### Returns + +`void` + +## Methods + +### canCommit() + +> **canCommit**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L262) + +Returns whether the expression tree can be committed in the current state. + +#### Returns + +`boolean` + +*** + +### commit() + +> **commit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L269) + +Commits the expression tree in the current state if it is valid. If not throws an exception. + +#### Returns + +`void` + +*** + +### discard() + +> **discard**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L282) + +Discards all unsaved changes to the expression tree. + +#### Returns + +`void` + +*** + +### onExpressionTreeChange() + +> `protected` **onExpressionTreeChange**(`tree`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts#L330) + +#### Parameters + +##### tree + +[`IExpressionTree`](../interfaces/IExpressionTree.md) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderHeaderComponent.md new file mode 100644 index 000000000..8d01161e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderHeaderComponent.md @@ -0,0 +1,94 @@ +# Class: IgxQueryBuilderHeaderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts#L19) + +## Igx Parent + +IgxQueryBuilderComponent + +## Constructors + +### Constructor + +> **new IgxQueryBuilderHeaderComponent**(): `IgxQueryBuilderHeaderComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts#L73) + +#### Returns + +`IgxQueryBuilderHeaderComponent` + +## Properties + +### ~~showLegend~~ + +> **showLegend**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts#L53) + +Show/hide the legend. + +#### Example + +```html +<igx-query-builder-header [showLegend]="false"></igx-query-builder-header> +``` + +#### Deprecated + +in version 19.1.0. + +*** + +### title + +> **title**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts#L41) + +Sets the title of the `IgxQueryBuilderHeaderComponent`. + +#### Example + +```html +<igx-query-builder-header title="Sample Query Builder"></igx-query-builder-header> +``` + +## Accessors + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts#L69) + +Returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts#L62) + +Sets the resource strings. +By default it uses EN resources. + +##### Deprecated + +in version 19.1.0. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderSearchValueTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderSearchValueTemplateDirective.md new file mode 100644 index 000000000..7bfb0bbc3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxQueryBuilderSearchValueTemplateDirective.md @@ -0,0 +1,67 @@ +# Class: IgxQueryBuilderSearchValueTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts#L22) + +Defines the custom template that will be used for the search value input of condition in edit mode + +## Igx Module + +IgxQueryBuilderModule + +## Igx Keywords + +query builder, query builder search value + +## Igx Group + +Data entry and display + +## Example + +```ts +<igx-query-builder> + <ng-template igxQueryBuilderSearchValue let-expression="expression"> + <input type="text" required [(ngModel)]="expression.searchVal"/> + </ng-template> + </igx-query-builder> +``` + +## Constructors + +### Constructor + +> **new IgxQueryBuilderSearchValueTemplateDirective**(): `IgxQueryBuilderSearchValueTemplateDirective` + +#### Returns + +`IgxQueryBuilderSearchValueTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts#L23) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxQueryBuilderSearchValueContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts#L25) + +#### Parameters + +##### \_directive + +`IgxQueryBuilderSearchValueTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxQueryBuilderSearchValueContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRadioComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRadioComponent.md new file mode 100644 index 000000000..461f0026d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRadioComponent.md @@ -0,0 +1,683 @@ +# Class: IgxRadioComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L40) + +**Ignite UI for Angular Radio Button** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html) + +The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side. + +Example: +```html +<igx-radio> + Simple radio button +</igx-radio> +``` + +## Extends + +- [`CheckboxBaseDirective`](CheckboxBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxRadioComponent**(): `IgxRadioComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L237) + +#### Returns + +`IgxRadioComponent` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`constructor`](CheckboxBaseDirective.md#constructor) + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L235) + +Sets/gets the value of the `aria-label` attribute. + +#### Example + +```html +<igx-checkbox aria-label="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabel = this.checkbox.ariaLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ariaLabel`](CheckboxBaseDirective.md#arialabel) + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L221) + +Sets/gets the `aria-labelledby` attribute. +If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute. + +#### Example + +```html +<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabelledBy = this.checkbox.ariaLabelledBy; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ariaLabelledBy`](CheckboxBaseDirective.md#arialabelledby) + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L27) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`cdr`](CheckboxBaseDirective.md#cdr) + +*** + +### change + +> `readonly` **change**: `EventEmitter`\<[`IChangeCheckboxEventArgs`](../interfaces/IChangeCheckboxEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L36) + +An event that is emitted after the checkbox state is changed. +Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments. + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`change`](CheckboxBaseDirective.md#change) + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-radio'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L57) + +Returns the class of the radio component. +```typescript +let radioClass = this.radio.cssClass; +``` + +#### Memberof + +IgxRadioComponent + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`cssClass`](CheckboxBaseDirective.md#cssclass) + +*** + +### destroyRef + +> `protected` **destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L335) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`destroyRef`](CheckboxBaseDirective.md#destroyref) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L94) + +Sets/gets the `disabled` attribute. +Default value is `false`. +```html +<igx-radio disabled></igx-radio> +``` +```typescript +let isDisabled = this.radio.disabled; +``` + +#### Memberof + +IgxRadioComponent + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`disabled`](CheckboxBaseDirective.md#disabled) + +*** + +### disableRipple + +> **disableRipple**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L206) + +Enables/Disables the ripple effect. +If not set, `disableRipple` will have value `false`. + +#### Example + +```html +<igx-checkbox [disableRipple]="true"></igx-checkbox> +``` +```typescript +let isRippleDisabled = this.checkbox.desableRipple; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`disableRipple`](CheckboxBaseDirective.md#disableripple) + +*** + +### focused + +> **focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L125) + +Sets/gets whether the radio component is on focus. +Default value is `false`. +```typescript +this.radio.focus = true; +``` +```typescript +let isFocused = this.radio.focused; +``` + +#### Memberof + +IgxRadioComponent + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`focused`](CheckboxBaseDirective.md#focused) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L123) + +Sets/gets the `id` of the checkbox component. +If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`. + +#### Example + +```html +<igx-checkbox id="my-first-checkbox"></igx-checkbox> +``` +```typescript +let checkboxId = this.checkbox.id; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`id`](CheckboxBaseDirective.md#id) + +*** + +### indeterminate + +> **indeterminate**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L70) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`indeterminate`](CheckboxBaseDirective.md#indeterminate) + +*** + +### invalid + +> **invalid**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L110) + +Sets/gets whether the radio button is invalid. +Default value is `false`. +```html +<igx-radio invalid></igx-radio> +``` +```typescript +let isInvalid = this.radio.invalid; +``` + +#### Memberof + +IgxRadioComponent + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`invalid`](CheckboxBaseDirective.md#invalid) + +*** + +### labelId + +> **labelId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L137) + +Sets/gets the id of the `label` element. +If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`. + +#### Example + +```html +<igx-checkbox labelId="Label1"></igx-checkbox> +``` +```typescript +let labelId = this.component.labelId; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`labelId`](CheckboxBaseDirective.md#labelid) + +*** + +### labelPosition + +> **labelPosition**: `string` = `LabelPosition.AFTER` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L191) + +Sets/gets the position of the `label`. + If not set, the `labelPosition` will have value `"after"`. + +#### Example + +```html +<igx-checkbox labelPosition="before"></igx-checkbox> +``` +```typescript +let labelPosition = this.checkbox.labelPosition; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`labelPosition`](CheckboxBaseDirective.md#labelposition) + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L163) + +Sets/gets the `name` attribute. + +#### Example + +```html +<igx-checkbox name="Checkbox1"></igx-checkbox> +``` +```typescript +let name = this.checkbox.name; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`name`](CheckboxBaseDirective.md#name) + +*** + +### nativeInput + +> **nativeInput**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L54) + +Returns reference to the native checkbox element. + +#### Example + +```typescript +let checkboxElement = this.component.checkboxElement; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeInput`](CheckboxBaseDirective.md#nativeinput) + +*** + +### nativeLabel + +> **nativeLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L65) + +Returns reference to the native label element. +```typescript + +@example +let labelElement = this.component.nativeLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeLabel`](CheckboxBaseDirective.md#nativelabel) + +*** + +### ngControl + +> **ngControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L29) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ngControl`](CheckboxBaseDirective.md#ngcontrol) + +*** + +### placeholderLabel + +> **placeholderLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L107) + +Returns reference to the label placeholder element. +```typescript + +@example +let labelPlaceholder = this.component.placeholderLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`placeholderLabel`](CheckboxBaseDirective.md#placeholderlabel) + +*** + +### readonly + +> **readonly**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L69) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`readonly`](CheckboxBaseDirective.md#readonly) + +*** + +### tabindex + +> **tabindex**: `number` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L176) + +Sets/gets the value of the `tabindex` attribute. + +#### Example + +```html +<igx-checkbox [tabindex]="1"></igx-checkbox> +``` +```typescript +let tabIndex = this.checkbox.tabindex; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`tabindex`](CheckboxBaseDirective.md#tabindex) + +*** + +### themeToken + +> `protected` **themeToken**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L28) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`themeToken`](CheckboxBaseDirective.md#themetoken) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L150) + +Sets/gets the `value` attribute. + +#### Example + +```html +<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox> +``` +```typescript +let value = this.checkbox.value; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`value`](CheckboxBaseDirective.md#value) + +## Accessors + +### checked + +#### Get Signature + +> **get** **checked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L76) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L73) + +Sets/gets the `checked` attribute. +Default value is `false`. +```html +<igx-radio [checked]="true"></igx-radio> +``` +```typescript +let isChecked = this.radio.checked; +``` + +##### Memberof + +IgxRadioComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`checked`](CheckboxBaseDirective.md#checked) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L94) + +Returns reference to the `nativeElement` of the igx-checkbox/igx-switch. + +##### Example + +```typescript +let nativeElement = this.component.nativeElement; +``` + +##### Returns + +`any` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeElement`](CheckboxBaseDirective.md#nativeelement) + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L267) + +Sets/gets whether the checkbox is required. +If not set, `required` will have value `false`. + +##### Example + +```html +<igx-checkbox required></igx-checkbox> +``` +```typescript +let isRequired = this.checkbox.required; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L270) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`required`](CheckboxBaseDirective.md#required) + +## Methods + +### deselect() + +> **deselect**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L174) + +Deselects the current radio button. +```typescript +this.radio.deselect(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxRadioComponent + +*** + +### select() + +> **select**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L154) + +Selects the current radio button. +```typescript +this.radio.select(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxRadioComponent + +*** + +### writeValue() + +> **writeValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio.component.ts#L187) + +Checks whether the provided value is consistent to the current radio button. +If it is, the checked attribute will have value `true`; +```typescript +this.radio.writeValue('radioButtonValue'); +``` + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +#### Overrides + +`CheckboxBaseDirective.writeValue` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRadioGroupDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRadioGroupDirective.md new file mode 100644 index 000000000..aab4e8e57 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRadioGroupDirective.md @@ -0,0 +1,429 @@ +# Class: IgxRadioGroupDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L61) + +Radio group directive renders set of radio buttons. + +## Igx Module + +IgxRadioModule + +## Igx Theme + +igx-radio-theme + +## Igx Keywords + +radiogroup, radio, button, input + +## Igx Group + +Data Entry & Display + +## Remarks + +The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side. + +@example: +```html +<igx-radio-group name="radioGroup"> + <igx-radio *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}"> + {{item}} + </igx-radio> +</igx-radio-group> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxRadioGroupDirective**(): `IgxRadioGroupDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:486](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L486) + +#### Returns + +`IgxRadioGroupDirective` + +## Properties + +### change + +> `readonly` **change**: `EventEmitter`\<[`IChangeCheckboxEventArgs`](../interfaces/IChangeCheckboxEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L196) + +An event that is emitted after the radio group `value` is changed. + +#### Remarks + +Provides references to the selected `IgxRadioComponent` and the `value` property as event arguments. + +#### Example + +```html +<igx-radio-group (change)="handler($event)"></igx-radio-group> +``` + +*** + +### ngControl + +> **ngControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L62) + +## Accessors + +### alignment + +#### Get Signature + +> **get** **alignment**(): [`RadioGroupAlignment`](../type-aliases/RadioGroupAlignment.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L312) + +Returns the alignment of the `igx-radio-group`. +```typescript +@ViewChild("MyRadioGroup") +public radioGroup: IgxRadioGroupDirective; +ngAfterViewInit(){ + let radioAlignment = this.radioGroup.alignment; +} +``` + +##### Returns + +[`RadioGroupAlignment`](../type-aliases/RadioGroupAlignment.md) + +#### Set Signature + +> **set** **alignment**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L326) + +Allows you to set the radio group alignment. +Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`. +```typescript +public alignment = RadioGroupAlignment.vertical; +//.. +``` +```html +<igx-radio-group [alignment]="alignment"></igx-radio-group> +``` + +##### Parameters + +###### value + +[`RadioGroupAlignment`](../type-aliases/RadioGroupAlignment.md) + +##### Returns + +`void` + +*** + +### invalid + +#### Get Signature + +> **get** **invalid**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L175) + +Sets/gets whether the radio group is invalid. + +##### Remarks + +If not set, `invalid` will have value `false`. + +##### Example + +```html +<igx-radio-group [invalid] = "true"></igx-radio-group> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **invalid**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L179) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### name + +#### Get Signature + +> **get** **name**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L111) + +Sets/gets the `name` attribute of the radio group component. All child radio buttons inherits this name. + +##### Example + +```html +<igx-radio-group name = "Radio1"></igx-radio-group> + ``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **name**(`newValue`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L114) + +##### Parameters + +###### newValue + +`string` + +##### Returns + +`void` + +*** + +### radioButtons + +#### Get Signature + +> **get** **radioButtons**(): `QueryList`\<[`IgxRadioComponent`](IgxRadioComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L77) + +Returns reference to the child radio buttons. + +##### Example + +```typescript +let radioButtons = this.radioGroup.radioButtons; +``` + +##### Returns + +`QueryList`\<[`IgxRadioComponent`](IgxRadioComponent.md)\> + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L133) + +Sets/gets whether the radio group is required. + +##### Remarks + +If not set, `required` will have value `false`. + +##### Example + +```html +<igx-radio-group [required] = "true"></igx-radio-group> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L137) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): [`IgxRadioComponent`](IgxRadioComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L152) + +Sets/gets the selected child radio button. + +##### Example + +```typescript +let selectedButton = this.radioGroup.selected; +this.radioGroup.selected = selectedButton; +``` + +##### Returns + +[`IgxRadioComponent`](IgxRadioComponent.md) + +#### Set Signature + +> **set** **selected**(`selected`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L156) + +##### Parameters + +###### selected + +[`IgxRadioComponent`](IgxRadioComponent.md) + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L91) + +Sets/gets the `value` attribute. + +##### Example + +```html +<igx-radio-group [value] = "'radioButtonValue'"></igx-radio-group> +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **value**(`newValue`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L95) + +##### Parameters + +###### newValue + +`any` + +##### Returns + +`void` + +## Methods + +### handleClick() + +> `protected` **handleClick**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L246) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### handleKeyDown() + +> `protected` **handleKeyDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:255](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L255) + +#### Parameters + +##### event + +`KeyboardEvent` + +#### Returns + +`void` + +*** + +### ngDoCheck() + +> **ngDoCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:414](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L414) + +#### Returns + +`void` + +*** + +### writeValue() + +> **writeValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L449) + +Sets the "checked" property value on the radio input element. + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +#### Remarks + +Checks whether the provided value is consistent to the current radio button. +If it is, the checked attribute will have value `true` and selected property will contain the selected `IgxRadioComponent`. + +#### Example + +```typescript +this.radioGroup.writeValue('radioButtonValue'); +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxReadOnlyInputDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxReadOnlyInputDirective.md new file mode 100644 index 000000000..5e3867562 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxReadOnlyInputDirective.md @@ -0,0 +1,23 @@ +# Class: IgxReadOnlyInputDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts#L9) + +## Constructors + +### Constructor + +> **new IgxReadOnlyInputDirective**(): `IgxReadOnlyInputDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts#L19) + +#### Returns + +`IgxReadOnlyInputDirective` + +## Properties + +### igxReadOnlyInput + +> **igxReadOnlyInput**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts#L10) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRippleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRippleDirective.md new file mode 100644 index 000000000..d8ad12bf1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRippleDirective.md @@ -0,0 +1,168 @@ +# Class: IgxRippleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L16) + +## Constructors + +### Constructor + +> **new IgxRippleDirective**(): `IgxRippleDirective` + +#### Returns + +`IgxRippleDirective` + +## Properties + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L17) + +*** + +### renderer + +> `protected` **renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L18) + +*** + +### rippleColor + +> **rippleColor**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L56) + +Sets/gets the ripple color. +```html +<button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button> +``` +```typescript +@ViewChild('rippleContainer', {read: IgxRippleDirective}) +public ripple: IgxRippleDirective; +let rippleColor = this.ripple.rippleColor; +``` + +#### Memberof + +IgxRippleDirective + +*** + +### rippleDisabled + +> **rippleDisabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L100) + +Sets/gets whether the ripple is disabled. +Default value is `false`. +```html +<button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button> +``` +```typescript +@ViewChild('rippleContainer', {read: IgxRippleDirective}) +public ripple: IgxRippleDirective; +let isRippleDisabled = this.ripple.rippleDisabled; +``` + +#### Memberof + +IgxRippleDirective + +*** + +### rippleDuration + +> **rippleDuration**: `number` = `600` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L72) + +Sets/gets the ripple duration(in milliseconds). +Default value is `600`. +```html +<button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button> +``` +```typescript +@ViewChild('rippleContainer', {read: IgxRippleDirective}) +public ripple: IgxRippleDirective; +let rippleDuration = this.ripple.rippleDuration; +``` + +#### Memberof + +IgxRippleDirective + +*** + +### rippleTarget + +> **rippleTarget**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L41) + +Sets/gets the ripple target. +```html +<div #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div> +``` +```typescript +@ViewChild('rippleContainer', {read: IgxRippleDirective}) +public ripple: IgxRippleDirective; +let rippleTarget = this.ripple.rippleTarget; +``` +Can set the ripple to activate on a child element inside the parent where igxRipple is defined. +```html +<div #rippleContainer [igxRippleTarget]="'#child"'> + <button type="button" igxButton id="child">Click</button> +</div> +``` + +#### Memberof + +IgxRippleDirective + +## Accessors + +### centered + +#### Set Signature + +> **set** **centered**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L82) + +Enables/disables the ripple to be centered. +```html +<button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button> +``` + +##### Memberof + +IgxRippleDirective + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** `protected` **nativeElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts#L102) + +##### Returns + +`HTMLElement` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowAddCrudState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowAddCrudState.md new file mode 100644 index 000000000..877060bd2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowAddCrudState.md @@ -0,0 +1,681 @@ +# Class: IgxRowAddCrudState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L530) + +## Extends + +- [`IgxRowCrudState`](IgxRowCrudState.md) + +## Extended by + +- [`IgxGridCRUDService`](IgxGridCRUDService.md) + +## Constructors + +### Constructor + +> **new IgxRowAddCrudState**(): `IgxRowAddCrudState` + +#### Returns + +`IgxRowAddCrudState` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`constructor`](IgxRowCrudState.md#constructor) + +## Properties + +### addRowParent + +> **addRowParent**: [`IgxAddRowParent`](../interfaces/IgxAddRowParent.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L531) + +*** + +### cell + +> **cell**: [`IgxCell`](IgxCell.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L209) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`cell`](IgxRowCrudState.md#cell) + +*** + +### closeRowEditingOverlay + +> **closeRowEditingOverlay**: `Subject`\<`unknown`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L351) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`closeRowEditingOverlay`](IgxRowCrudState.md#closeroweditingoverlay) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L208) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`grid`](IgxRowCrudState.md#grid) + +*** + +### isInCompositionMode + +> **isInCompositionMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L211) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`isInCompositionMode`](IgxRowCrudState.md#isincompositionmode) + +*** + +### row + +> **row**: [`IgxEditRow`](IgxEditRow.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L210) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`row`](IgxRowCrudState.md#row) + +## Accessors + +### cellInEditMode + +#### Get Signature + +> **get** **cellInEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L231) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`cellInEditMode`](IgxRowCrudState.md#cellineditmode) + +*** + +### nonEditable + +#### Get Signature + +> **get** **nonEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:369](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L369) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`nonEditable`](IgxRowCrudState.md#noneditable) + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:356](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L356) + +##### Returns + +`any` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`primaryKey`](IgxRowCrudState.md#primarykey) + +*** + +### rowEditing + +#### Get Signature + +> **get** **rowEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:365](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L365) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`rowEditing`](IgxRowCrudState.md#rowediting) + +*** + +### rowEditingBlocked + +#### Get Signature + +> **get** **rowEditingBlocked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L373) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditingBlocked**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L377) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`rowEditingBlocked`](IgxRowCrudState.md#roweditingblocked) + +*** + +### rowInEditMode + +#### Get Signature + +> **get** **rowInEditMode**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L360) + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`rowInEditMode`](IgxRowCrudState.md#rowineditmode) + +## Methods + +### beginCellEdit() + +> **beginCellEdit**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L235) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`beginCellEdit`](IgxRowCrudState.md#begincelledit) + +*** + +### beginRowEdit() + +> **beginRowEdit**(`event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:382](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L382) + +Enters row edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`beginRowEdit`](IgxRowCrudState.md#beginrowedit) + +*** + +### cellEdit() + +> **cellEdit**(`event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L245) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`cellEdit`](IgxRowCrudState.md#celledit) + +*** + +### cellEditDone() + +> **cellEditDone**(`event`, `addRow`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L308) + +#### Parameters + +##### event + +`any` + +##### addRow + +`boolean` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`cellEditDone`](IgxRowCrudState.md#celleditdone) + +*** + +### createCell() + +> **createCell**(`cell`): [`IgxCell`](IgxCell.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L213) + +#### Parameters + +##### cell + +`any` + +#### Returns + +[`IgxCell`](IgxCell.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`createCell`](IgxRowCrudState.md#createcell) + +*** + +### createRow() + +> **createRow**(`cell`): [`IgxEditRow`](IgxEditRow.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L218) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +[`IgxEditRow`](IgxEditRow.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`createRow`](IgxRowCrudState.md#createrow) + +*** + +### endCellEdit() + +> **endCellEdit**(`restoreFocus?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L334) + +Clears cell editing state + +#### Parameters + +##### restoreFocus? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`endCellEdit`](IgxRowCrudState.md#endcelledit) + +*** + +### endEditMode() + +> **endEditMode**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L500) + +Clears cell and row editing state and closes row editing template if it is open + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`endEditMode`](IgxRowCrudState.md#endeditmode) + +*** + +### endRowEdit() + +> **endRowEdit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:493](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L493) + +Clears row editing state + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`endRowEdit`](IgxRowCrudState.md#endrowedit) + +*** + +### exitCellEdit() + +> **exitCellEdit**(`event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L319) + +Exit cell edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`exitCellEdit`](IgxRowCrudState.md#exitcelledit) + +*** + +### exitRowEdit() + +> **exitRowEdit**(`cachedRowData`, `event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:483](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L483) + +Exit row edit mode + +#### Parameters + +##### cachedRowData + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`exitRowEdit`](IgxRowCrudState.md#exitrowedit) + +*** + +### getParentRowId() + +> `protected` **getParentRowId**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L621) + +#### Returns + +`any` + +#### Overrides + +[`IgxRowCrudState`](IgxRowCrudState.md).[`getParentRowId`](IgxRowCrudState.md#getparentrowid) + +*** + +### rowEdit() + +> **rowEdit**(`event`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:406](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L406) + +#### Parameters + +##### event + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`rowEdit`](IgxRowCrudState.md#rowedit) + +*** + +### rowEditDone() + +> **rowEditDone**(`cachedRowData`, `event`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L475) + +#### Parameters + +##### cachedRowData + +`any` + +##### event + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`rowEditDone`](IgxRowCrudState.md#roweditdone) + +*** + +### sameCell() + +> **sameCell**(`cell`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L226) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`sameCell`](IgxRowCrudState.md#samecell) + +*** + +### sameRow() + +> **sameRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L222) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`sameRow`](IgxRowCrudState.md#samerow) + +*** + +### targetInEdit() + +> **targetInEdit**(`rowIndex`, `columnIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L342) + +Returns whether the targeted cell is in edit mode + +#### Parameters + +##### rowIndex + +`number` + +##### columnIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`targetInEdit`](IgxRowCrudState.md#targetinedit) + +*** + +### updateCell() + +> **updateCell**(`exit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L251) + +#### Parameters + +##### exit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`updateCell`](IgxRowCrudState.md#updatecell) + +*** + +### updateRow() + +> **updateRow**(`commit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L412) + +#### Parameters + +##### commit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`updateRow`](IgxRowCrudState.md#updaterow) + +*** + +### updateRowEditData() + +> **updateRowEditData**(`row`, `value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:508](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L508) + +#### Parameters + +##### row + +[`IgxEditRow`](IgxEditRow.md) + +##### value? + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxRowCrudState`](IgxRowCrudState.md).[`updateRowEditData`](IgxRowCrudState.md#updateroweditdata) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowCrudState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowCrudState.md new file mode 100644 index 000000000..16c253e9a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowCrudState.md @@ -0,0 +1,613 @@ +# Class: IgxRowCrudState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:350](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L350) + +## Extends + +- [`IgxCellCrudState`](IgxCellCrudState.md) + +## Extended by + +- [`IgxRowAddCrudState`](IgxRowAddCrudState.md) + +## Constructors + +### Constructor + +> **new IgxRowCrudState**(): `IgxRowCrudState` + +#### Returns + +`IgxRowCrudState` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`constructor`](IgxCellCrudState.md#constructor) + +## Properties + +### cell + +> **cell**: [`IgxCell`](IgxCell.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L209) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`cell`](IgxCellCrudState.md#cell) + +*** + +### closeRowEditingOverlay + +> **closeRowEditingOverlay**: `Subject`\<`unknown`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L351) + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L208) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`grid`](IgxCellCrudState.md#grid) + +*** + +### isInCompositionMode + +> **isInCompositionMode**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L211) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`isInCompositionMode`](IgxCellCrudState.md#isincompositionmode) + +*** + +### row + +> **row**: [`IgxEditRow`](IgxEditRow.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L210) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`row`](IgxCellCrudState.md#row) + +## Accessors + +### cellInEditMode + +#### Get Signature + +> **get** **cellInEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L231) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`cellInEditMode`](IgxCellCrudState.md#cellineditmode) + +*** + +### nonEditable + +#### Get Signature + +> **get** **nonEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:369](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L369) + +##### Returns + +`boolean` + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:356](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L356) + +##### Returns + +`any` + +*** + +### rowEditing + +#### Get Signature + +> **get** **rowEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:365](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L365) + +##### Returns + +`boolean` + +*** + +### rowEditingBlocked + +#### Get Signature + +> **get** **rowEditingBlocked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L373) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditingBlocked**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L377) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### rowInEditMode + +#### Get Signature + +> **get** **rowInEditMode**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L360) + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +## Methods + +### beginCellEdit() + +> **beginCellEdit**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L235) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`beginCellEdit`](IgxCellCrudState.md#begincelledit) + +*** + +### beginRowEdit() + +> **beginRowEdit**(`event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:382](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L382) + +Enters row edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`boolean` + +*** + +### cellEdit() + +> **cellEdit**(`event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L245) + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`cellEdit`](IgxCellCrudState.md#celledit) + +*** + +### cellEditDone() + +> **cellEditDone**(`event`, `addRow`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L308) + +#### Parameters + +##### event + +`any` + +##### addRow + +`boolean` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`cellEditDone`](IgxCellCrudState.md#celleditdone) + +*** + +### createCell() + +> **createCell**(`cell`): [`IgxCell`](IgxCell.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L213) + +#### Parameters + +##### cell + +`any` + +#### Returns + +[`IgxCell`](IgxCell.md) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`createCell`](IgxCellCrudState.md#createcell) + +*** + +### createRow() + +> **createRow**(`cell`): [`IgxEditRow`](IgxEditRow.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L218) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +[`IgxEditRow`](IgxEditRow.md) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`createRow`](IgxCellCrudState.md#createrow) + +*** + +### endCellEdit() + +> **endCellEdit**(`restoreFocus?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L334) + +Clears cell editing state + +#### Parameters + +##### restoreFocus? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`endCellEdit`](IgxCellCrudState.md#endcelledit) + +*** + +### endEditMode() + +> **endEditMode**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L500) + +Clears cell and row editing state and closes row editing template if it is open + +#### Returns + +`void` + +*** + +### endRowEdit() + +> **endRowEdit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:493](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L493) + +Clears row editing state + +#### Returns + +`void` + +*** + +### exitCellEdit() + +> **exitCellEdit**(`event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L319) + +Exit cell edit mode + +#### Parameters + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`exitCellEdit`](IgxCellCrudState.md#exitcelledit) + +*** + +### exitRowEdit() + +> **exitRowEdit**(`cachedRowData`, `event?`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:483](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L483) + +Exit row edit mode + +#### Parameters + +##### cachedRowData + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +*** + +### getParentRowId() + +> `protected` **getParentRowId**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:525](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L525) + +#### Returns + +`any` + +*** + +### rowEdit() + +> **rowEdit**(`event`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:406](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L406) + +#### Parameters + +##### event + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +*** + +### rowEditDone() + +> **rowEditDone**(`cachedRowData`, `event`): [`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L475) + +#### Parameters + +##### cachedRowData + +`any` + +##### event + +`Event` + +#### Returns + +[`IGridEditDoneEventArgs`](../interfaces/IGridEditDoneEventArgs.md) + +*** + +### sameCell() + +> **sameCell**(`cell`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L226) + +#### Parameters + +##### cell + +[`IgxCell`](IgxCell.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`sameCell`](IgxCellCrudState.md#samecell) + +*** + +### sameRow() + +> **sameRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L222) + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`sameRow`](IgxCellCrudState.md#samerow) + +*** + +### targetInEdit() + +> **targetInEdit**(`rowIndex`, `columnIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L342) + +Returns whether the targeted cell is in edit mode + +#### Parameters + +##### rowIndex + +`number` + +##### columnIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`targetInEdit`](IgxCellCrudState.md#targetinedit) + +*** + +### updateCell() + +> **updateCell**(`exit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L251) + +#### Parameters + +##### exit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +#### Inherited from + +[`IgxCellCrudState`](IgxCellCrudState.md).[`updateCell`](IgxCellCrudState.md#updatecell) + +*** + +### updateRow() + +> **updateRow**(`commit`, `event?`): [`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L412) + +#### Parameters + +##### commit + +`boolean` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](../interfaces/IGridEditEventArgs.md) + +*** + +### updateRowEditData() + +> **updateRowEditData**(`row`, `value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:508](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L508) + +#### Parameters + +##### row + +[`IgxEditRow`](IgxEditRow.md) + +##### value? + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowDirective.md new file mode 100644 index 000000000..ca69fdd54 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowDirective.md @@ -0,0 +1,624 @@ +# Class: IgxRowDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L35) + +## Extended by + +- [`IgxGridRowComponent`](IgxGridRowComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxRowDirective**(): `IgxRowDirective` + +#### Returns + +`IgxRowDirective` + +## Properties + +### \_addRow + +> `protected` **\_addRow**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L409) + +*** + +### \_cells + +> `protected` **\_cells**: `QueryList`\<[`CellType`](../interfaces/CellType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L200) + +*** + +### \_data + +> `protected` **\_data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L408) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L43) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L407) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L108) + +Sets whether this specific row has disabled functionality for editing and row selection. +Default value is `false`. +```typescript +this.grid.selectedRows[0].pinned = true; +``` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L41) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L37) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L96) + +The index of the row. + +```typescript +// get the index of the second selected row +let selectedRowIndex = this.grid.selectedRows[1].index; +``` + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L39) + +*** + +### trackPinnedColumn + +> `protected` **trackPinnedColumn**: `object` = `trackByIdentity` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:720](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L720) + +- state persistence switching all pinned columns resets collection +- MRL unpinnedColumns igxFor modes entire child loop on unpin + +## Accessors + +### addRowUI + +#### Get Signature + +> **get** **addRowUI**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L160) + +##### Returns + +`any` + +*** + +### cells + +#### Get Signature + +> **get** **cells**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L210) + +Gets the rendered cells in the row component. + +```typescript +// get the cells of the third selected row +let selectedRowCells = this.grid.selectedRows[2].cells; +``` + +##### Returns + +`any` + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L72) + +The data passed to the row component. + +```typescript +// get the row data for the first selected row +let selectedRowData = this.grid.selectedRows[0].data; +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **data**(`v`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L84) + +##### Parameters + +###### v + +`any` + +##### Returns + +`void` + +*** + +### dataRowIndex + +#### Get Signature + +> **get** **dataRowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L222) + +##### Returns + +`number` + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L145) + +Gets the expanded state of the row. +```typescript +let isExpanded = row.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L156) + +Expands/collapses the current row. + +```typescript +this.grid.selectedRows[2].expanded = true; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +*** + +### hasMergedCells + +#### Get Signature + +> **get** **hasMergedCells**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L135) + +##### Returns + +`boolean` + +*** + +### inEditMode + +#### Get Signature + +> **get** **inEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L351) + +##### Returns + +`boolean` + +*** + +### key + +#### Get Signature + +> **get** **key**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:370](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L370) + +Gets the ID of the row. +A row in the grid is identified either by: +- primaryKey data value, +- the whole data, if the primaryKey is omitted. + +```typescript +let rowID = this.grid.selectedRows[2].key; +``` + +##### Returns + +`any` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L387) + +The native DOM element representing the row. Could be null in certain environments. + +```typescript +// get the nativeElement of the second selected row +let selectedRowNativeElement = this.grid.selectedRows[1].nativeElement; +``` + +##### Returns + +`any` + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L131) + +Gets whether the row is pinned. +```typescript +let isPinned = row.pinned; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L117) + +Sets whether the row is pinned. +Default value is `false`. +```typescript +this.grid.selectedRows[0].pinned = true; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L167) + +##### Returns + +`any` + +*** + +### selected + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L235) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### virtDirRow + +#### Get Signature + +> **get** **virtDirRow**(): [`IgxGridForOfDirective`](IgxGridForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L189) + +##### Returns + +[`IgxGridForOfDirective`](IgxGridForOfDirective.md)\<[`ColumnType`](../interfaces/ColumnType.md), [`ColumnType`](../interfaces/ColumnType.md)[]\> + +## Methods + +### beginAddRow() + +> **beginAddRow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L623) + +Spawns the add row UI for the specific row. + +#### Returns + +`void` + +#### Example + +```typescript +const row = this.grid1.getRowByIndex(1); +row.beginAddRow(); +``` + +*** + +### delete() + +> **delete**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:550](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L550) + +Removes the specified row from the grid's data source. +This method emits `rowDeleted` event. + +```typescript +// delete the third selected row from the grid +this.grid.selectedRows[2].delete(); +``` + +#### Returns + +`void` + +*** + +### extractRecordKey() + +> `protected` **extractRecordKey**(`rec`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:681](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L681) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`any` + +*** + +### getMergeCellSpan() + +> `protected` **getMergeCellSpan**(`col`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L642) + +#### Parameters + +##### col + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`string` + +*** + +### getRowHeight() + +> `protected` **getRowHeight**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L693) + +#### Returns + +`any` + +*** + +### isCellActive() + +> **isCellActive**(`visibleColumnIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L554) + +#### Parameters + +##### visibleColumnIndex + +`any` + +#### Returns + +`boolean` + +*** + +### isHoveredRoot() + +> `protected` **isHoveredRoot**(`col`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L670) + +#### Parameters + +##### col + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +*** + +### isSelectionRoot() + +> `protected` **isSelectionRoot**(`col`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L657) + +#### Parameters + +##### col + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +*** + +### pin() + +> **pin**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L574) + +Pins the specified row. +This method emits `rowPinning``rowPinned` event. + +```typescript +// pin the selected row from the grid +this.grid.selectedRows[0].pin(); +``` + +#### Returns + +`any` + +*** + +### unpin() + +> **unpin**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:587](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L587) + +Unpins the specified row. +This method emits `rowPinning``rowPinned` event. + +```typescript +// unpin the selected row from the grid +this.grid.selectedRows[0].unpin(); +``` + +#### Returns + +`any` + +*** + +### update() + +> **update**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:531](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/row.directive.ts#L531) + +Updates the specified row object and the data source record with the passed value. + +```typescript +// update the second selected row's value +let newValue = "Apple"; +this.grid.selectedRows[1].update(newValue); +``` + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowIslandComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowIslandComponent.md new file mode 100644 index 000000000..19e07f513 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxRowIslandComponent.md @@ -0,0 +1,8135 @@ +# Class: IgxRowIslandComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L70) + +Row island + +## Igx Module + +IgxHierarchicalGridModule + +## Igx Parent + +IgxHierarchicalGridComponent, IgxRowIslandComponent + +## Extends + +- `IgxHierarchicalGridBaseDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxRowIslandComponent**(): `IgxRowIslandComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3500) + +#### Returns + +`IgxRowIslandComponent` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.constructor` + +## Properties + +### \_allowAdvancedFiltering + +> `protected` **\_allowAdvancedFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3175) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._allowAdvancedFiltering` + +*** + +### \_allowFiltering + +> `protected` **\_allowFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3174) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._allowFiltering` + +*** + +### \_autoGeneratedCols + +> `protected` **\_autoGeneratedCols**: [`ColumnType`](../interfaces/ColumnType.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3192) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._autoGeneratedCols` + +*** + +### \_autoGeneratedColsRefs + +> `protected` **\_autoGeneratedColsRefs**: `ComponentRef`\<[`IgxColumnComponent`](IgxColumnComponent.md)\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3193) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._autoGeneratedColsRefs` + +*** + +### \_autoSizeColumnsNotify + +> `protected` **\_autoSizeColumnsNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3185) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._autoSizeColumnsNotify` + +*** + +### \_batchEditing + +> `protected` **\_batchEditing**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3189) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._batchEditing` + +*** + +### \_cdrRequestRepaint + +> `protected` **\_cdrRequestRepaint**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3186) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._cdrRequestRepaint` + +*** + +### \_childColumns + +> `protected` **\_childColumns**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:518](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L518) + +*** + +### \_dataView + +> `protected` **\_dataView**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3194) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._dataView` + +*** + +### \_defaultExpandState + +> `protected` **\_defaultExpandState**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3181) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._defaultExpandState` + +*** + +### \_defaultTargetRecordNumber + +> `protected` **\_defaultTargetRecordNumber**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3179) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._defaultTargetRecordNumber` + +*** + +### \_diTransactions + +> `protected` **\_diTransactions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L177) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._diTransactions` + +*** + +### \_expansionStates + +> `protected` **\_expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3180) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._expansionStates` + +*** + +### \_filterMode + +> `protected` **\_filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) = `FilterMode.quickFilter` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3176) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._filterMode` + +*** + +### \_filterStrategy + +> `protected` **\_filterStrategy**: [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3191) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._filterStrategy` + +*** + +### \_firstAutoResize + +> `protected` **\_firstAutoResize**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3184) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._firstAutoResize` + +*** + +### \_headerFeaturesWidth + +> `protected` **\_headerFeaturesWidth**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3182) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._headerFeaturesWidth` + +*** + +### \_hGridSchema + +> `protected` **\_hGridSchema**: [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3204) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._hGridSchema` + +*** + +### \_init + +> `protected` **\_init**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3183) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._init` + +*** + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3195) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._lastSearchInfo` + +*** + +### \_pinnedRecordIDs + +> `protected` **\_pinnedRecordIDs**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3164) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._pinnedRecordIDs` + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3206) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._resourceStrings` + +*** + +### \_sortingOptions + +> `protected` **\_sortingOptions**: [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3190) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._sortingOptions` + +*** + +### \_summaryRowList + +> `protected` **\_summaryRowList**: `QueryList`\<[`IgxSummaryRowComponent`](IgxSummaryRowComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1795) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._summaryRowList` + +*** + +### \_transactions + +> `protected` **\_transactions**: [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3188) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._transactions` + +*** + +### \_userOutletDirective + +> `protected` **\_userOutletDirective**: [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3187) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._userOutletDirective` + +*** + +### activeNodeChange + +> **activeNodeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1059](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1059) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.activeNodeChange` + +*** + +### addRowEmptyTemplate + +> **addRowEmptyTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L263) + +Gets/Sets a custom template for adding row UI when grid is empty. + +#### Example + +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.addRowEmptyTemplate` + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L380) + +Emitted after advanced filtering is performed. + +#### Remarks + +Returns the advanced filtering expressions tree. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.advancedFilteringExpressionsTreeChange` + +*** + +### autoGenerate + +> **autoGenerate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L206) + +Gets/Sets whether to auto-generate the columns. + +#### Remarks + +The default value is false. When set to true, it will override all columns declared through code or in markup. + +#### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.autoGenerate` + +*** + +### autoGenerateExclude + +> **autoGenerateExclude**: `string`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L223) + +Gets/Sets a list of property keys to be excluded from the generated column collection + +#### Remarks + +The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime +unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their +[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. + +#### Example + +```html +<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid> +``` +```typescript +const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.autoGenerateExclude` + +*** + +### baseClass + +> `protected` **baseClass**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L304) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.baseClass` + +*** + +### cdr + +> `readonly` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L162) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cdr` + +*** + +### cellClick + +> **cellClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L494) + +Emitted when a cell is clicked. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellClick` + +*** + +### cellEdit + +> **cellEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L640) + +Emitted when cell has been edited. + +#### Remarks + +Event is fired after editing is completed, when the cell is exiting edit mode. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEdit` + +*** + +### cellEditDone + +> **cellEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L653) + +Emitted after cell has been edited and editing has been committed. + +#### Example + +```html +<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEditDone` + +*** + +### cellEditEnter + +> **cellEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L613) + +Emitted when cell enters edit mode. + +#### Remarks + +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEditEnter` + +*** + +### cellEditExit + +> **cellEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L625) + +Emitted when cell exits edit mode. + +#### Example + +```html +<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellEditExit` + +*** + +### clipboardOptions + +> **clipboardOptions**: [`IClipboardOptions`](../interfaces/IClipboardOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L335) + +Controls the copy behavior of the grid. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clipboardOptions` + +*** + +### colResizingService + +> `protected` **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L153) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.colResizingService` + +*** + +### columnInit + +> **columnInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L732) + +Emitted when a column is initialized. + +#### Remarks + +Returns the column object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnInit` + +*** + +### columnMoving + +> **columnMoving**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L937) + +Emitted during the column moving operation. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. This event is cancelable. + +#### Example + +```html +<igx-grid (columnMoving)="moving($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnMoving` + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L950) + +Emitted when column moving ends. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. + +#### Example + +```html +<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnMovingEnd` + +*** + +### columnMovingStart + +> **columnMovingStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L924) + +Emitted when column moving starts. + +#### Remarks + +Returns the moved `IgxColumnComponent` object. + +#### Example + +```html +<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnMovingStart` + +*** + +### columnPin + +> **columnPin**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L582) + +Emitted before `IgxColumnComponent` is pinned. + +#### Remarks + +The index at which to insert the column may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnPin` + +*** + +### columnPinned + +> **columnPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L599) + +Emitted after `IgxColumnComponent` is pinned. + +#### Remarks + +The index that the column is inserted at may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnPinned` + +*** + +### columnResized + +> **columnResized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L860) + +Emitted after column is resized. + +#### Remarks + +Returns the `IgxColumnComponent` object's old and new width. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnResized` + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L565) + +Emitted when `IgxColumnComponent` is selected. + +#### Example + +```html +<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnSelectionChanging` + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L911) + +Emitted after column visibility is changed. + +#### Remarks + +Args: { column: IgxColumnComponent, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnVisibilityChanged` + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L898) + +Emitted before column visibility is changed. + +#### Remarks + +Args: { column: any, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnVisibilityChanging` + +*** + +### contextMenu + +> **contextMenu**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L872) + +Emitted when a cell or row is right clicked. + +#### Remarks + +Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. +```html +<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.contextMenu` + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1129) + +Emitted after the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataChanged` + +*** + +### dataChanging + +> **dataChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1118) + +Emitted before the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataChanging` + +*** + +### dataPreLoad + +> **dataPreLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L77) + +Emitted when a new chunk of data is loaded from virtualization. + +#### Example + +```typescript + <igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (dataPreLoad)="handleEvent()"> + </igx-hierarchical-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataPreLoad` + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L163) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.differs` + +*** + +### displayStyle + +> `protected` **displayStyle**: `string` = `'none'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L311) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.displayStyle` + +*** + +### doubleClick + +> **doubleClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L885) + +Emitted when a cell is double clicked. + +#### Remarks + +Returns the `IgxGridCell` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.doubleClick` + +*** + +### emptyDirectiveTemplate + +> `protected` **emptyDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1713) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyDirectiveTemplate` + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L166) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.envInjector` + +*** + +### expansionStatesChange + +> **expansionStatesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1003) + +Emitted when the rows are expanded or collapsed. + +#### Example + +```html +<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expansionStatesChange` + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L778) + +Emitted before filtering expressions are applied. + +#### Remarks + +Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filtering` + +*** + +### filteringDone + +> **filteringDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L791) + +Emitted after filtering is performed through the UI. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringDone` + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L366) + +Emitted after filtering is performed. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringExpressionsTreeChange` + +*** + +### formGroupCreated + +> **formGroupCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L519) + +Emitted when formGroup is created on edit of row/cell. + +#### Example + +```html +<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.formGroupCreated` + +*** + +### gridAPI + +> **gridAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L38) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridAPI` + +*** + +### gridComputedStyles + +> `protected` **gridComputedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3205) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridComputedStyles` + +*** + +### gridCopy + +> **gridCopy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L991) + +Emitted when a copy operation is executed. + +#### Remarks + +Fired only if copy behavior is enabled through the [`clipboardOptions`][IgxGridBaseDirective#clipboardOptions](IgxGridBaseDirective.md#clipboardoptions). + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridCopy` + +*** + +### gridCreated + +> **gridCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L207) + +Event emitted when a grid is being created based on this row island. +```html +<igx-hierarchical-grid [data]="Data" [autoGenerate]="true"> + <igx-row-island [key]="'childData'" (gridCreated)="gridCreated($event)" #rowIsland> + <!-- ... --> + </igx-row-island> +</igx-hierarchical-grid> +``` + +#### Memberof + +IgxRowIslandComponent + +*** + +### gridInitialized + +> **gridInitialized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L223) + +Emitted after a grid is being initialized for this row island. +The emitting is done in `ngAfterViewInit`. +```html +<igx-hierarchical-grid [data]="Data" [autoGenerate]="true"> + <igx-row-island [key]="'childData'" (gridInitialized)="gridInitialized($event)" #rowIsland> + <!-- ... --> + </igx-row-island> +</igx-hierarchical-grid> +``` + +#### Memberof + +IgxRowIslandComponent + +*** + +### gridKeydown + +> **gridKeydown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L964) + +Emitted when keydown is triggered over element inside grid's body. + +#### Remarks + +This event is fired only if the key combination is supported in the grid. +Return the target type, target object and the original event. This event is cancelable. + +#### Example + +```html + <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridKeydown` + +*** + +### gridScroll + +> **gridScroll**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L392) + +Emitted when grid is scrolled horizontally/vertically. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (gridScroll)="onScroll($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.gridScroll` + +*** + +### hasChildrenKey + +> **hasChildrenKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L51) + +Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator. + +#### Example + +```html +<igx-hierarchical-grid #grid [data]="localData" [hasChildrenKey]="'hasEmployees'"> +</igx-hierarchical-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hasChildrenKey` + +*** + +### headerCollapsedIndicatorDirectiveTemplate + +> `protected` **headerCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1551) + +The custom template, if any, that should be used when rendering a header collapse indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerCollapsedIndicatorDirectiveTemplate` + +*** + +### headerExpandedIndicatorDirectiveTemplate + +> `protected` **headerExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1520) + +The custom template, if any, that should be used when rendering a header expand indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerExpandedIndicatorDirectiveTemplate` + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L165) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.injector` + +*** + +### key + +> **key**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L90) + +Sets the key of the row island by which child data would be taken from the row data if such is provided. +```html +<igx-hierarchical-grid [data]="Data" [autoGenerate]="true"> + <igx-row-island [key]="'childData'"> + <!-- ... --> + </igx-row-island> +</igx-hierarchical-grid> +``` + +#### Memberof + +IgxRowIslandComponent + +*** + +### loadingDirectiveTemplate + +> `protected` **loadingDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1710) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.loadingDirectiveTemplate` + +*** + +### moving + +> **moving**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L230) + +Controls whether columns moving is enabled in the grid. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.moving` + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L40) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.navigation` + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L172) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.overlayService` + +*** + +### paginatorDirectiveTemplate + +> `protected` **paginatorDirectiveTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L148) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L176) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.platform` + +*** + +### rangeSelected + +> **rangeSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1097) + +Emitted when making a range selection. + +#### Remarks + +Range selection can be made either through drag selection or through keyboard selection. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rangeSelected` + +*** + +### rendered + +> **rendered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1101) + +Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rendered` + +*** + +### rowAdd + +> **rowAdd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L847) + +Emmited just before the newly added row is commited. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowAdd` + +*** + +### rowAdded + +> **rowAdded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L805) + +Emitted when a row is added. + +#### Remarks + +Returns the data for the new `IgxGridRowComponent` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowAdded` + +*** + +### rowClasses + +> **rowClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L411) + +Sets a conditional class selector to the grid's row element. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class and the value is +either a callback function that returns a boolean, or boolean, like so: +```typescript +callback = (row: RowType) => { return row.selected > 6; } +rowClasses = { 'className' : this.callback }; +``` +```html +<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowClasses` + +*** + +### rowClick + +> **rowClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L507) + +Emitted when a row is clicked. + +#### Remarks + +Returns the `IgxGridRow`. + +#### Example + +```html +<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowClick` + +*** + +### rowCollapsedIndicatorDirectiveTemplate + +> `protected` **rowCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1489) + +The custom template, if any, that should be used when rendering a row collapse indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowCollapsedIndicatorDirectiveTemplate` + +*** + +### rowDelete + +> **rowDelete**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L833) + +Emmited when deleting a row. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDelete` + +*** + +### rowDeleted + +> **rowDeleted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L819) + +Emitted when a row is deleted. + +#### Remarks + +Returns an `IRowDataEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDeleted` + +*** + +### rowDragEnd + +> **rowDragEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:982](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L982) + +Emitted when dropping a row. + +#### Remarks + +Return the dropped row. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDragEnd` + +*** + +### rowDragStart + +> **rowDragStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L973) + +Emitted when start dragging a row. + +#### Remarks + +Return the dragged row. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDragStart` + +*** + +### rowEdit + +> **rowEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L686) + +Emitted when exiting edit mode for a row. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEdit` + +*** + +### rowEditDone + +> **rowEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L703) + +Emitted after exiting edit mode for a row and editing has been committed. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. + +#### Example + +```html +<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditDone` + +*** + +### rowEditEnter + +> **rowEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L668) + +Emitted when a row enters edit mode. + +#### Remarks + +Emitted when [rowEditable]="true". +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditEnter` + +*** + +### rowEditExit + +> **rowEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L719) + +Emitted when row editing is canceled. + +#### Remarks + +Emits when [rowEditable]="true" & `endEdit(false)` is called. +Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button +in the row editing overlay. + +#### Example + +```html +<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditExit` + +*** + +### rowExpandedIndicatorDirectiveTemplate + +> `protected` **rowExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1458) + +The custom template, if any, that should be used when rendering a row expand indicator. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowExpandedIndicatorDirectiveTemplate` + +*** + +### rowIslandAPI + +> **rowIslandAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L73) + +*** + +### rowPinned + +> **rowPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1048](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1048) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowPinned` + +*** + +### rowPinning + +> **rowPinning**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1037](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1037) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowPinning` + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L554) + +Emitted when `IgxGridRowComponent` is selected. + +#### Example + +```html +<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowSelectionChanging` + +*** + +### rowStyles + +> **rowStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L431) + +Sets conditional style properties on the grid row element. +It accepts an object literal where the keys are +the style properties and the value is an expression to be evaluated. +```typescript +styles = { + background: 'yellow', + color: (row: RowType) => row.selected : 'red': 'white' +} +``` +```html +<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowStyles` + +*** + +### rowToggle + +> **rowToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1026) + +Emitted when the expanded state of a row gets changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowToggle` + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L543) + +Emitted when a cell is selected. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selected` + +*** + +### selectedRowsChange + +> **selectedRowsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1015) + +Emitted when the rows are selected or deselected. + +#### Example + +```html +<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectedRowsChange` + +*** + +### showExpandAll + +> **showExpandAll**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L65) + +Gets/Sets whether the expand/collapse all button in the header should be rendered. + +#### Remarks + +The default value is false. + +#### Example + +```html +<igx-hierarchical-grid #grid [data]="localData" [showExpandAll]="true"> +</igx-hierarchical-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.showExpandAll` + +*** + +### snackbarDisplayTime + +> **snackbarDisplayTime**: `number` = `6000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L193) + +Gets/Sets the display time for the row adding snackbar notification. + +#### Remarks + +By default it is 6000ms. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.snackbarDisplayTime` + +*** + +### sorting + +> **sorting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L752) + +Emitted before sorting expressions are applied. + +#### Remarks + +Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sorting` + +*** + +### sortingDone + +> **sortingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L765) + +Emitted after sorting is completed. + +#### Remarks + +Returns the sorting expression. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingDone` + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1072) + +Emitted before sorting is performed. + +#### Remarks + +Returns the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingExpressionsChange` + +*** + +### tbodyContainer + +> `protected` **tbodyContainer**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1324) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.tbodyContainer` + +*** + +### templateRows + +> `protected` **templateRows**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L312) + +#### Overrides + +`IgxHierarchicalGridBaseDirective.templateRows` + +*** + +### textHighlightService + +> `protected` **textHighlightService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L171) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.textHighlightService` + +*** + +### toolbarDirectiveTemplate + +> `protected` **toolbarDirectiveTemplate**: `TemplateRef`\<[`IgxGridToolbarTemplateContext`](../interfaces/IgxGridToolbarTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L145) + +*** + +### toolbarExporting + +> **toolbarExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1086) + +Emitted when an export process is initiated by the user. + +#### Example + +```typescript +toolbarExporting(event: IGridToolbarExportEventArgs){ + const toolbarExporting = event; +} +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.toolbarExporting` + +*** + +### transactionFactory + +> `protected` **transactionFactory**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L156) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.transactionFactory` + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `filteringExpressionsTree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L465) + +Gets/Sets a unique values strategy used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### filteringExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Remarks + +Provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering. + +#### Example + +```html +<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.uniqueColumnValuesStrategy` + +*** + +### validation + +> `readonly` **validation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L150) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.validation` + +*** + +### validationStatusChange + +> **validationStatusChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L530) + +Emitted when grid's validation status changes. + +#### Example + +```html +<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.validationStatusChange` + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) = `'change'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2063) + +Gets/Sets the trigger for validators used when editing the grid. + +#### Example + +```html +<igx-grid #grid validationTrigger='blur'></igx-grid> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.validationTrigger` + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L164) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.viewRef` + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L158) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.zone` + +## Accessors + +### activeRowIndexes + +#### Get Signature + +> **get** `protected` **activeRowIndexes**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4068) + +##### Returns + +`number`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.activeRowIndexes` + +*** + +### advancedFilteringExpressionsTree + +#### Get Signature + +> **get** **advancedFilteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1920) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **advancedFilteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1924) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.advancedFilteringExpressionsTree` + +*** + +### allowAdvancedFiltering + +#### Get Signature + +> **get** **allowAdvancedFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2336) + +Gets/Sets a value indicating whether the advanced filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowAdvancedFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2340) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.allowAdvancedFiltering` + +*** + +### allowFiltering + +#### Get Signature + +> **get** **allowFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2310) + +Gets/Sets if the filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2314) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.allowFiltering` + +*** + +### ariaColCount + +#### Get Signature + +> **get** `protected` **ariaColCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1816) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.ariaColCount` + +*** + +### ariaRowCount + +#### Get Signature + +> **get** `protected` **ariaRowCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1821) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.ariaRowCount` + +*** + +### batchEditing + +#### Get Signature + +> **get** **batchEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L106) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **batchEditing**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L110) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.batchEditing` + +*** + +### cellMergeMode + +#### Get Signature + +> **get** **cellMergeMode**(): [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2901) + +Gets/Sets cell merge mode. + +##### Returns + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +#### Set Signature + +> **set** **cellMergeMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2905) + +##### Parameters + +###### value + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellMergeMode` + +*** + +### cellSelection + +#### Get Signature + +> **get** **cellSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2882) + +Gets/Sets cell selection mode. + +##### Remarks + +By default the cell selection mode is multiple + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **cellSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2886) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.cellSelection` + +*** + +### childDataKey + +#### Set Signature + +> **set** **childDataKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L102) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### columns + +#### Get Signature + +> **get** **columns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4613) + +Gets an array of `IgxColumnComponent`s. + +##### Example + +```typescript +const colums = this.grid.columns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columns` + +*** + +### columnSelection + +#### Get Signature + +> **get** **columnSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2943) + +Gets/Sets column selection mode + +##### Remarks + +By default the row selection mode is none + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **columnSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2947) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnSelection` + +*** + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2187) + +Gets/Sets the default width of the columns. + +##### Example + +```html +<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2190) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.columnWidth` + +*** + +### dataCloneStrategy + +#### Get Signature + +> **get** **dataCloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L320) + +Gets/Sets the data clone strategy of the grid when in edit mode. + +##### Example + +```html + <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> +``` + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **dataCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L324) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataCloneStrategy` + +*** + +### dataRowList + +#### Get Signature + +> **get** **dataRowList**(): `QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2606) + +A list of currently rendered `IgxGridRowComponent`'s. + +##### Example + +```typescript +const dataList = this.grid.dataRowList; +``` + +##### Returns + +`QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dataRowList` + +*** + +### defaultRowHeight + +#### Get Signature + +> **get** **defaultRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4513) + +Gets the default row height. + +##### Example + +```typescript +const rowHeigh = this.grid.defaultRowHeight; +``` + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.defaultRowHeight` + +*** + +### dragGhostCustomTemplate + +#### Get Signature + +> **get** **dragGhostCustomTemplate**(): `TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1234) + +Gets the custom template, if any, used for row drag ghost. + +##### Returns + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +#### Set Signature + +> **set** **dragGhostCustomTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1251) + +Sets a custom template for the row drag ghost. +```html +<ng-template #template igxRowDragGhost> + <igx-icon>menu</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragGhostCustomTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dragGhostCustomTemplate` + +*** + +### dragIndicatorIconTemplate + +#### Get Signature + +> **get** **dragIndicatorIconTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2711](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2711) + +The custom template, if any, that should be used when rendering the row drag indicator icon + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **dragIndicatorIconTemplate**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2728) + +Sets a custom template that should be used when rendering the row drag indicator icon. +```html +<ng-template #template igxDragIndicatorIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragIndicatorIconTemplate = this.template; +``` + +##### Parameters + +###### val + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.dragIndicatorIconTemplate` + +*** + +### emptyFilteredGridMessage + +#### Get Signature + +> **get** **emptyFilteredGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2273) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyFilteredGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2269) + +Gets/Sets the message displayed when there are no records and the grid is filtered. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyFilteredGridMessage` + +*** + +### emptyGridMessage + +#### Get Signature + +> **get** **emptyGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2208) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2205) + +Get/Sets the message displayed when there are no records. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyGridMessage` + +*** + +### emptyGridTemplate + +#### Get Signature + +> **get** **emptyGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L247) + +Gets/Sets a custom template when empty. + +##### Example + +```html +<ng-template igxGridEmpty> + <!-- content to show when the grid is empty --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **emptyGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L250) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.emptyGridTemplate` + +*** + +### excelStyleHeaderIconTemplate + +#### Get Signature + +> **get** **excelStyleHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1586) + +Gets the excel style header icon. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **excelStyleHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1603) + +Sets the excel style header icon. +```html +<ng-template #template igxExcelStyleHeaderIcon> +<igx-icon>filter_alt</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.excelStyleHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.excelStyleHeaderIconTemplate` + +*** + +### expandChildren + +#### Get Signature + +> **get** **expandChildren**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:356](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L356) + +Gets if all immediate children of the grids for this `IgxRowIslandComponent` have been set to be expanded/collapsed. +```typescript +const expanded = this.rowIsland.expandChildren; +``` + +##### Memberof + +IgxRowIslandComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expandChildren**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L334) + +Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed. +```html +<igx-hierarchical-grid [data]="Data" [autoGenerate]="true"> + <igx-row-island [key]="'childData'" [expandChildren]="true" #rowIsland> + <!-- ... --> + </igx-row-island> +</igx-hierarchical-grid> +``` + +##### Memberof + +IgxRowIslandComponent + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +`IgxHierarchicalGridBaseDirective.expandChildren` + +*** + +### expansionStates + +#### Get Signature + +> **get** **expansionStates**(): `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4381) + +Gets/Sets a list of key-value pairs [row ID, expansion state]. + +##### Remarks + +Includes only states that differ from the default one. +Supports two-way binding. + +##### Example + +```html +<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> +</igx-grid> +``` + +##### Returns + +`Map`\<`any`, `boolean`\> + +#### Set Signature + +> **set** **expansionStates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4386) + +##### Parameters + +###### value + +`Map`\<`any`, `boolean`\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expansionStates` + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1874) + +Gets/Sets the filtering state. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way binding. + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **filteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1878) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringExpressionsTree` + +*** + +### filteringLogic + +#### Get Signature + +> **get** **filteringLogic**(): [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1853) + +Gets/Sets the filtering logic of the `IgxGridComponent`. + +##### Remarks + +The default is AND. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> +``` + +##### Returns + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +#### Set Signature + +> **set** **filteringLogic**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1857) + +##### Parameters + +###### value + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filteringLogic` + +*** + +### filterMode + +#### Get Signature + +> **get** **filterMode**(): [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2362](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2362) + +Gets/Sets the filter mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it's set to FilterMode.quickFilter. + +##### Returns + +[`FilterMode`](../type-aliases/FilterMode.md) + +#### Set Signature + +> **set** **filterMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2366) + +The filter mode for the grid. It can be quick filter of excel-style filter + +##### Parameters + +###### value + +[`FilterMode`](../type-aliases/FilterMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filterMode` + +*** + +### filterStrategy + +#### Get Signature + +> **get** **filterStrategy**(): [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2456) + +Gets/Sets the filtering strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid> +``` + +##### Returns + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +#### Set Signature + +> **set** **filterStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2460) + +##### Parameters + +###### classRef + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filterStrategy` + +*** + +### hasCellsToMerge + +#### Get Signature + +> **get** `protected` **hasCellsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4082) + +##### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hasCellsToMerge` + +*** + +### hasVisibleColumns + +#### Set Signature + +> **set** **hasVisibleColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5533) + +Indicates whether the grid has columns that are shown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hasVisibleColumns` + +*** + +### headerCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **headerCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1557) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1574) + +Sets the row collapse indicator template. +```html +<ng-template igxHeaderCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerCollapsedIndicatorTemplate` + +*** + +### headerExpandedIndicatorTemplate + +#### Get Signature + +> **get** **headerExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1526) + +Gets the header expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1543) + +Sets the header expand indicator template. +```html +<ng-template igxHeaderExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headerExpandedIndicatorTemplate` + +*** + +### headSelectorTemplate + +#### Get Signature + +> **get** **headSelectorTemplate**(): `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2620) + +Gets the header row selector template. + +##### Returns + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **headSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2637) + +Sets the header row selector template. +```html +<ng-template #template igxHeadSelector let-headContext> +{{ headContext.selectedCount }} / {{ headContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.headSelectorTemplate` + +*** + +### height + +#### Get Signature + +> **get** **height**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2109) + +Gets/Sets the height. + +##### Example + +```html +<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **height**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2113) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.height` + +*** + +### hideRowSelectors + +#### Get Signature + +> **get** **hideRowSelectors**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2027](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2027) + +Gets/Sets if the row selectors are hidden. + +##### Remarks + +By default row selectors are shown + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideRowSelectors**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2031](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2031) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.hideRowSelectors` + +*** + +### isCustomSetRowHeight + +#### Get Signature + +> **get** `protected` **isCustomSetRowHeight**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3340) + +##### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.isCustomSetRowHeight` + +*** + +### isLoading + +#### Get Signature + +> **get** **isLoading**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2235) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isLoading**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2222) + +Gets/Sets whether the grid is going to show a loading indicator. + +##### Example + +```html +<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.isLoading` + +*** + +### loadingGridTemplate + +#### Get Signature + +> **get** **loadingGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L280) + +Gets/Sets a custom template when loading. + +##### Example + +```html +<ng-template igxGridLoading> + <!-- content to show when the grid is loading --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **loadingGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L283) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.loadingGridTemplate` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1970) + +Gets/Sets the locale. + +##### Remarks + +If not set, returns browser's language. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1974) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.locale` + +*** + +### mergedDataInView + +#### Get Signature + +> **get** `protected` **mergedDataInView**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3986) + +##### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.mergedDataInView` + +*** + +### mergeStrategy + +#### Get Signature + +> **get** **mergeStrategy**(): [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2491) + +Gets/Sets the merge strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid> +``` + +##### Returns + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +#### Set Signature + +> **set** **mergeStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2494) + +##### Parameters + +###### value + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.mergeStrategy` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4485) + +Gets the native element. + +##### Example + +```typescript +const nativeEl = this.grid.nativeElement. +``` + +##### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.nativeElement` + +*** + +### outlet + +#### Get Signature + +> **get** **outlet**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L91) + +Gets the outlet used to attach the grid's overlays to. + +##### Remarks + +If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. + +##### Returns + +`any` + +#### Set Signature + +> **set** **outlet**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L99) + +Sets the outlet used to attach the grid's overlays to. + +##### Parameters + +###### val + +`any` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.outlet` + +*** + +### paginatorTemplate + +#### Get Signature + +> **get** **paginatorTemplate**(): `TemplateRef`\<[`IgxGridPaginatorTemplateContext`](../interfaces/IgxGridPaginatorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L169) + +Sets/Gets the paginator template for each child grid created from this row island. + +##### Returns + +`TemplateRef`\<[`IgxGridPaginatorTemplateContext`](../interfaces/IgxGridPaginatorTemplateContext.md)\> + +#### Set Signature + +> **set** **paginatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L173) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridPaginatorTemplateContext`](../interfaces/IgxGridPaginatorTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### pagingMode + +#### Get Signature + +> **get** **pagingMode**(): [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1987](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1987) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Returns + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +#### Set Signature + +> **set** **pagingMode**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1991) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Parameters + +###### val + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pagingMode` + +*** + +### pinnedRows + +#### Get Signature + +> **get** **pinnedRows**(): [`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4666) + +Gets an array of the pinned `IgxRowComponent`s. + +##### Example + +```typescript +const pinnedRow = this.grid.pinnedRows; +``` + +##### Returns + +[`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinnedRows` + +*** + +### pinning + +#### Get Signature + +> **get** **pinning**(): [`IPinningConfig`](../interfaces/IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2290) + +Gets/Sets the initial pinning configuration. + +##### Remarks + +Allows to apply pinning the columns to the start or the end. +Note that pinning to both sides at a time is not allowed. + +##### Example + +```html +<igx-grid [pinning]="pinningConfig"></igx-grid> +``` + +##### Returns + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +#### Set Signature + +> **set** **pinning**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2293) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +##### Parameters + +###### value + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinning` + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L443) + +Gets/Sets the primary key. + +##### Example + +```html +<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **primaryKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L447) + +Represents the unique primary key used for identifying rows in the grid + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.primaryKey` + +*** + +### renderData + +#### Get Signature + +> **get** `protected` **renderData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3446) + +##### Returns + +`any`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.renderData` + +*** + +### renderedActualRowHeight + +#### Get Signature + +> **get** `protected` **renderedActualRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7829) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.renderedActualRowHeight` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings`\<`IAGridResourceStrings`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L118) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Returns + +`PrefixedResourceStrings`\<`IAGridResourceStrings`, `any`\> + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L113) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses the root grid resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Overrides + +`IgxHierarchicalGridBaseDirective.resourceStrings` + +*** + +### rowAddTextTemplate + +#### Get Signature + +> **get** **rowAddTextTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1403) + +Gets the row add text template. + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **rowAddTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1419) + +Sets the row add text template. +```html +<ng-template #template igxRowAddText> +Adding Row +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowAddTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowAddTextTemplate` + +*** + +### rowCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **rowCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1495) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1512) + +Sets the row collapse indicator template. +```html +<ng-template igxRowCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowCollapsedIndicatorTemplate` + +*** + +### rowDraggable + +#### Get Signature + +> **get** **rowDraggable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2045](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2045) + +Gets/Sets whether rows can be moved. + +##### Example + +```html +<igx-grid #grid [rowDraggable]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowDraggable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2049](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2049) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowDraggable` + +*** + +### rowEditable + +#### Get Signature + +> **get** **rowEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2086) + +Gets/Sets whether the rows are editable. + +##### Remarks + +By default it is set to false. + +##### Example + +```html +<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2090) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditable` + +*** + +### rowEditActionsTemplate + +#### Get Signature + +> **get** **rowEditActionsTemplate**(): `TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1433) + +Gets the row edit actions template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditActionsTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1450) + +Sets the row edit actions template. +```html +<ng-template #template igxRowEditActions let-endRowEdit> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditActionsTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditActionsTemplate` + +*** + +### rowEditTextTemplate + +#### Get Signature + +> **get** **rowEditTextTemplate**(): `TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1373) + +Gets the row edit text template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1389) + +Sets the row edit text template. +```html +<ng-template #template igxRowEditText let-rowChangesCount> +Changes: {{rowChangesCount}} +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowEditTextTemplate` + +*** + +### rowExpandedIndicatorTemplate + +#### Get Signature + +> **get** **rowExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1464) + +Gets the row expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1481) + +Sets the row expand indicator template. +```html +<ng-template igxRowExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowExpandedIndicatorTemplate` + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2166) + +Gets/Sets the row height. + +##### Example + +```html +<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2170) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +##### Parameters + +###### value + +`string` \| `number` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowHeight` + +*** + +### rowList + +#### Get Signature + +> **get** **rowList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2585) + +A list of `IgxGridRowComponent`. + +##### Example + +```typescript +const rowList = this.grid.rowList; +``` + +##### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowList` + +*** + +### rowSelection + +#### Get Signature + +> **get** **rowSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2922) + +Gets/Sets row selection mode + +##### Remarks + +By default the row selection mode is 'none' +Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **rowSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2926) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowSelection` + +*** + +### rowSelectorTemplate + +#### Get Signature + +> **get** **rowSelectorTemplate**(): `TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2653) + +Gets the row selector template. + +##### Returns + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **rowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2670) + +Sets a custom template for the row selectors. +```html +<ng-template #template igxRowSelector let-rowContext> + <igx-checkbox [checked]="rowContext.selected"></igx-checkbox> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.rowSelectorTemplate` + +*** + +### selectedRows + +#### Get Signature + +> **get** **selectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2543) + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **selectedRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2539](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2539) + +Gets/Sets the current selection state. + +##### Remarks + +Represents the selected rows' IDs (primary key or rowData) + +##### Example + +```html +<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid> +``` + +##### Parameters + +###### rowIDs + +`any`[] + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectedRows` + +*** + +### selectRowOnClick + +#### Get Signature + +> **get** **selectRowOnClick**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5822) + +Gets/Sets whether clicking over a row should select/deselect it + +##### Remarks + +By default it is set to true + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectRowOnClick**(`enabled`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5826) + +##### Parameters + +###### enabled + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectRowOnClick` + +*** + +### shouldGenerate + +#### Get Signature + +> **get** **shouldGenerate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2252) + +Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid + +##### Remarks + +This will allow to bind the grid to remote data and having auto-generated columns at the same time. +Note that after generating the columns, this property would be disabled to avoid re-creating +columns each time a new data is assigned. + +##### Example + +```typescript + this.grid.shouldGenerate = true; +``` + +##### Deprecated + +in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **shouldGenerate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2256) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.shouldGenerate` + +*** + +### shouldResize + +#### Get Signature + +> **get** `protected` **shouldResize**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5574) + +##### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.shouldResize` + +*** + +### showSummaryOnCollapse + +#### Get Signature + +> **get** **showSummaryOnCollapse**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2438) + +Controls whether the summary row is visible when groupBy/parent row is collapsed. + +##### Example + +```html +<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible +when the groupBy/parent row is collapsed. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showSummaryOnCollapse**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2442) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.showSummaryOnCollapse` + +*** + +### sortAscendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortAscendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1619) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortAscendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1636) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. +```html +<ng-template #template igxSortAscendingHeaderIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortAscendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortAscendingHeaderIconTemplate` + +*** + +### sortDescendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortDescendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1648) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortDescendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1665) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. +```html +<ng-template #template igxSortDescendingHeaderIcon> + <igx-icon>expand_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortDescendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortDescendingHeaderIconTemplate` + +*** + +### sortHeaderIconTemplate + +#### Get Signature + +> **get** **sortHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1680) + +Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1697) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. +```html +<ng-template #template igxSortHeaderIcon> + <igx-icon>unfold_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortHeaderIconTemplate` + +*** + +### sortingExpressions + +#### Get Signature + +> **get** **sortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2787](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2787) + +Gets/Sets the sorting state. + +##### Remarks + +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid> +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Set Signature + +> **set** **sortingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2791) + +##### Parameters + +###### value + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingExpressions` + +*** + +### sortingOptions + +#### Get Signature + +> **get** **sortingOptions**(): [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2520) + +##### Returns + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +#### Set Signature + +> **set** **sortingOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2512) + +Gets/Sets the sorting options - single or multiple sorting. +Accepts an `ISortingOptions` object with any of the `mode` properties. + +##### Example + +```typescript +const _sortingOptions: ISortingOptions = { + mode: 'single' +} +```html +<igx-grid [sortingOptions]="sortingOptions"><igx-grid> +``` + +##### Parameters + +###### value + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortingOptions` + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2473) + +Gets/Sets the sorting strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid> +``` + +##### Returns + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2477) + +##### Parameters + +###### value + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sortStrategy` + +*** + +### summaryCalculationMode + +#### Get Signature + +> **get** **summaryCalculationMode**(): [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2413) + +Gets/Sets the summary calculation mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. + +##### Returns + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +#### Set Signature + +> **set** **summaryCalculationMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2417) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +##### Parameters + +###### value + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.summaryCalculationMode` + +*** + +### summaryPosition + +#### Get Signature + +> **get** **summaryPosition**(): [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2393) + +Gets/Sets the summary position. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is bottom. + +##### Returns + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +#### Set Signature + +> **set** **summaryPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2397) + +Represents the position of summaries: 'top', 'bottom' + +##### Parameters + +###### value + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.summaryPosition` + +*** + +### summaryRowHeight + +#### Get Signature + +> **get** **summaryRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L299) + +##### Returns + +`number` + +#### Set Signature + +> **set** **summaryRowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L291) + +Get/Set IgxSummaryRow height + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.summaryRowHeight` + +*** + +### toolbarTemplate + +#### Get Signature + +> **get** **toolbarTemplate**(): `TemplateRef`\<[`IgxGridToolbarTemplateContext`](../interfaces/IgxGridToolbarTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L155) + +Sets/Gets the toolbar template for each child grid created from this row island. + +##### Returns + +`TemplateRef`\<[`IgxGridToolbarTemplateContext`](../interfaces/IgxGridToolbarTemplateContext.md)\> + +#### Set Signature + +> **set** **toolbarTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L159) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridToolbarTemplateContext`](../interfaces/IgxGridToolbarTemplateContext.md)\> + +##### Returns + +`void` + +*** + +### totalCalcWidth + +#### Get Signature + +> **get** `protected` **totalCalcWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3442) + +##### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.totalCalcWidth` + +*** + +### totalRecords + +#### Get Signature + +> **get** **totalRecords**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4760) + +Returns the total number of records. + +##### Remarks + +Only functions when paging is enabled. + +##### Example + +```typescript +const totalRecords = this.grid.totalRecords; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalRecords**(`total`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4764) + +##### Parameters + +###### total + +`number` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.totalRecords` + +*** + +### transactions + +#### Get Signature + +> **get** **transactions**(): [`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2848) + +Get transactions service for the grid. + +##### Returns + +[`TransactionService`](../interfaces/TransactionService.md)\<[`Transaction`](../interfaces/Transaction.md), [`State`](../interfaces/State.md)\> + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.transactions` + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2139) + +Gets/Sets the width of the grid. + +##### Example + +```typescript +let gridWidth = this.grid.width; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2143) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.width` + +## Methods + +### \_addRowForIndex() + +> `protected` **\_addRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6590) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._addRowForIndex` + +*** + +### \_createColComponent() + +> `protected` **\_createColComponent**(`col`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L196) + +#### Parameters + +##### col + +`any` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._createColComponent` + +*** + +### \_createColGroupComponent() + +> `protected` **\_createColGroupComponent**(`col`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L175) + +#### Parameters + +##### col + +[`IgxColumnGroupComponent`](IgxColumnGroupComponent.md) + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._createColGroupComponent` + +*** + +### \_createColumn() + +> `protected` **\_createColumn**(`col`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L165) + +#### Parameters + +##### col + +`any` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._createColumn` + +*** + +### \_restoreVirtState() + +> `protected` **\_restoreVirtState**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6717](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6717) + +#### Parameters + +##### row + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._restoreVirtState` + +*** + +### \_shouldAutoSize() + +> `protected` **\_shouldAutoSize**(`renderedHeight`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7278) + +#### Parameters + +##### renderedHeight + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective._shouldAutoSize` + +*** + +### addRow() + +> **addRow**(`data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4941) + +Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source. + +#### Parameters + +##### data + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.addRow(record); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.addRow` + +*** + +### allowResetOfColumnsToMerge() + +> `protected` **allowResetOfColumnsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3974) + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.allowResetOfColumnsToMerge` + +*** + +### autoSizeColumnsInView() + +> `protected` **autoSizeColumnsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7583) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.autoSizeColumnsInView` + +*** + +### beginAddRowById() + +> **beginAddRowById**(`rowID`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6570](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6570) + +Enters add mode by spawning the UI under the specified row by rowID. + +#### Parameters + +##### rowID + +`any` + +The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view + +##### asChild? + +`boolean` + +Whether the record should be added as a child. Only applicable to igxTreeGrid. + +#### Returns + +`void` + +#### Remarks + +If null is passed as rowID, the row adding UI is spawned as the first record in the data view + +#### Example + +```typescript +this.grid.beginAddRowById('ALFKI'); +this.grid.beginAddRowById('ALFKI', true); +this.grid.beginAddRowById(null); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.beginAddRowById` + +*** + +### beginAddRowByIndex() + +> **beginAddRowByIndex**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6628) + +Enters add mode by spawning the UI at the specified index. + +#### Parameters + +##### index + +`number` + +The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length + +#### Returns + +`void` + +#### Remarks + +Accepted values for index are integers from 0 to this.grid.dataView.length + +#### Example + +```typescript +this.grid.beginAddRowByIndex(0); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.beginAddRowByIndex` + +*** + +### beginAddRowForIndex() + +> `protected` **beginAddRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6645) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.beginAddRowForIndex` + +*** + +### buildDataView() + +> `protected` **buildDataView**(`_data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7763) + +#### Parameters + +##### \_data + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.buildDataView` + +*** + +### changeRowEditingOverlayStateOnScroll() + +> `protected` **changeRowEditingOverlayStateOnScroll**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6726](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6726) + +#### Parameters + +##### row + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.changeRowEditingOverlayStateOnScroll` + +*** + +### checkContainerSizeChange() + +> `protected` **checkContainerSizeChange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7269) + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.checkContainerSizeChange` + +*** + +### checkPrimaryKeyField() + +> `protected` **checkPrimaryKeyField**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7068) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.checkPrimaryKeyField` + +*** + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5906) + +Deselect selected cells. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearCellSelection(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearCellSelection` + +*** + +### clearFilter() + +> **clearFilter**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5235) + +If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +Otherwise clears the filtering state of all `IgxColumnComponent`s. + +#### Example + +```typescript +this.grid.clearFilter(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearFilter` + +*** + +### clearSearch() + +> **clearSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5485) + +Removes all the highlights in the cell. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearSearch(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearSearch` + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5250) + +If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +otherwise clears the sorting state of all `IgxColumnComponent`. + +#### Example + +```typescript +this.grid.clearSort(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.clearSort` + +*** + +### closeAdvancedFilteringDialog() + +> **closeAdvancedFilteringDialog**(`applyChanges`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6457) + +Closes the advanced filtering dialog. + +#### Parameters + +##### applyChanges + +`boolean` + +indicates whether the changes should be applied + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.closeAdvancedFilteringDialog` + +*** + +### collapseAll() + +> **collapseAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4416) + +Collapses all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.collapseAll(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.collapseAll` + +*** + +### collapseRow() + +> **collapseRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4447) + +Collapses the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.collapseRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.collapseRow` + +*** + +### deleteRow() + +> **deleteRow**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4964) + +Removes the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +`any` + +#### Remarks + +Requires that the `primaryKey` property is set. +The method accept rowSelector as a parameter, which is the rowID. + +#### Example + +```typescript +this.grid1.deleteRow(0); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deleteRow` + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6069](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6069) + +Deselects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectAllColumns` + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5890) + +Deselects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.deselectAllRows(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectAllRows` + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6043](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6043) + +Deselect specified columns by field. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectColumns(['ID','Name']); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectColumns` + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5854) + +Deselect specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectRows([1,2,5]); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.deselectRows` + +*** + +### disableSummaries() + +> **disableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5216) + +Disable summaries for the specified column. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Examples + +```typescript +grid.disableSummaries('ProductName'); +``` + +```typescript +grid.disableSummaries([{ fieldName: 'ProductName' }]); +``` + +#### Remarks + +Disable summaries for the listed columns. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.disableSummaries` + +*** + +### enableSummaries() + +> **enableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5194) + +Enables summaries for the specified column and applies your customSummary. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Remarks + +If you do not provide the customSummary, then the default summary for the column data type will be applied. + +#### Examples + +```typescript +grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); +``` +Enable summaries for the listed columns. + +```typescript +grid.enableSummaries('ProductName'); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.enableSummaries` + +*** + +### endEdit() + +> **endEdit**(`commit?`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6534](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6534) + +Finishes the row transactions on the current row and returns whether the grid editing was canceled. + +#### Parameters + +##### commit? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Remarks + +If `commit === true`, passes them from the pending state to the data (or transaction service) + +#### Example + +```html +<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button> +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.endEdit` + +*** + +### evaluateLoadingState() + +> `protected` **evaluateLoadingState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6741) + +Should be called when data and/or isLoading input changes so that the overlay can be +hidden/shown based on the current value of shouldOverlayLoading + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.evaluateLoadingState` + +*** + +### expandAll() + +> **expandAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4403) + +Expands all rows. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.expandAll(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expandAll` + +*** + +### expandRow() + +> **expandRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4432) + +Expands the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.expandRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.expandRow` + +*** + +### extractDataFromColumnsSelection() + +> `protected` **extractDataFromColumnsSelection**(`source`, `formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7637) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.extractDataFromColumnsSelection` + +*** + +### extractDataFromSelection() + +> `protected` **extractDataFromSelection**(`source`, `formatters?`, `headers?`, `columnData?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7444) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +##### columnData? + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.extractDataFromSelection` + +*** + +### filter() + +> **filter**(`name`, `value`, `conditionOrExpressionTree?`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5157) + +Filters a single `IgxColumnComponent`. + +#### Parameters + +##### name + +`string` + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### ignoreCase? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +public filter(term) { + this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); +} +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filter` + +*** + +### ~~filterGlobal()~~ + +> **filterGlobal**(`value`, `condition`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5174) + +Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. + +#### Parameters + +##### value + +`any` + +##### condition + +`any` + +##### ignoreCase? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); +``` + +#### Deprecated + +in version 19.0.0. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.filterGlobal` + +*** + +### findNext() + +> **findNext**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5418) + +Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findNext("financial"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.findNext` + +*** + +### findPrev() + +> **findPrev**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5435) + +Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findPrev("financial"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.findPrev` + +*** + +### generateDataFields() + +> `protected` **generateDataFields**(`data`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7384) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`string`[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.generateDataFields` + +*** + +### getChildGrid() + +> `protected` **getChildGrid**(`path`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L215) + +#### Parameters + +##### path + +[`IPathSegment`](../interfaces/IPathSegment.md)[] + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getChildGrid` + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4704) + +Returns the `IgxColumnComponent` by field name. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Example + +```typescript +const myCol = this.grid1.getColumnByName("ID"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getColumnByName` + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4708) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getColumnByVisibleIndex` + +*** + +### getColumnList() + +> `protected` **getColumnList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6951) + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getColumnList` + +*** + +### getGridsForIsland() + +> `protected` **getGridsForIsland**(`rowIslandID`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts#L211) + +#### Parameters + +##### rowIslandID + +`string` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getGridsForIsland` + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4689) + +Gets the `width` to be set on `IgxGridHeaderGroupComponent`. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`string` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getHeaderGroupWidth` + +*** + +### getMergeCellOffset() + +> `protected` **getMergeCellOffset**(`rowData`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3655) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`number` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getMergeCellOffset` + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6272) + +Returns `ICellPosition` which defines the next cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getNextCell` + +*** + +### getPinnedEndWidth() + +> **getPinnedEndWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5735) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedEndWidth(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getPinnedEndWidth` + +*** + +### getPinnedStartWidth() + +> **getPinnedStartWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5712) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedStartWidth(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getPinnedStartWidth` + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6308) + +Returns `ICellPosition` which defines the previous cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getPreviousCell` + +*** + +### getRowData() + +> **getRowData**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5090) + +Returns the data that is contained in the row component. + +#### Parameters + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`any` + +#### Remarks + +If the primary key is not specified the row selector match the row data. + +#### Example + +```typescript +const data = grid.getRowData(94741); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getRowData` + +*** + +### getSelectableColumnsAt() + +> `protected` **getSelectableColumnsAt**(`index`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7568](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7568) + +#### Parameters + +##### index + +`any` + +#### Returns + +`any` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectableColumnsAt` + +*** + +### getSelectedColumnsData() + +> **getSelectedColumnsData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6094](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6094) + +Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectedColumnsData` + +*** + +### getSelectedData() + +> **getSelectedData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5986) + +Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectedData` + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5974) + +Get the currently selected ranges in the grid. + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.getSelectedRanges` + +*** + +### horizontalScrollHandler() + +> `protected` **horizontalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7808) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.horizontalScrollHandler` + +*** + +### isRecordPinnedByIndex() + +> **isRecordPinnedByIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3634) + +Returns whether the record is pinned or not. + +#### Parameters + +##### rowIndex + +`number` + +Index of the record in the `filteredSortedData` collection. + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.isRecordPinnedByIndex` + +*** + +### markForCheck() + +> **markForCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4926) + +Triggers change detection for the `IgxGridComponent`. +Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. +May degrade performance if used when not needed, or if misused: +```typescript +// DON'Ts: +// don't call markForCheck from inside a loop +// don't call markForCheck when a primitive has changed +grid.data.forEach(rec => { + rec = newValue; + grid.markForCheck(); +}); + +// DOs +// call markForCheck after updating a nested property +grid.data.forEach(rec => { + rec.nestedProp1.nestedProp2 = newValue; +}); +grid.markForCheck(); +``` + +#### Returns + +`void` + +#### Example + +```typescript +grid.markForCheck(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.markForCheck` + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4849) + +Places a column before or after the specified target column. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### target + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### pos? + +[`DropPosition`](../enumerations/DropPosition.md) = `DropPosition.AfterDropTarget` + +#### Returns + +`void` + +#### Example + +```typescript +grid.moveColumn(column, target); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.moveColumn` + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColIndex?`, `cb?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6224) + +Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColIndex? + +`number` = `-1` + +##### cb? + +(`args`) => `void` + +#### Returns + +`void` + +#### Remarks + +Also can execute a custom logic over the target element, +through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } + +#### Example + +```typescript + this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.navigateTo` + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6437) + +Opens the advanced filtering dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.openAdvancedFilteringDialog` + +*** + +### pinColumn() + +> **pinColumn**(`columnName`, `index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5287) + +Pins a column by field name. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Remarks + +Returns whether the operation is successful. + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinColumn` + +*** + +### pinRow() + +> **pinRow**(`rowID`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5320) + +Pin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### index? + +`number` + +The index at which to insert the row in the pinned collection. + +##### row? + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.pinRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.pinRow` + +*** + +### recalculateAutoSizes() + +> **recalculateAutoSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4723](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4723) + +Recalculates all widths of columns that have size set to `auto`. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.recalculateAutoSizes(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.recalculateAutoSizes` + +*** + +### refreshSearch() + +> **refreshSearch**(`updateActiveInfo?`, `endEdit?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5450) + +Reapplies the existing search. + +#### Parameters + +##### updateActiveInfo? + +`boolean` + +##### endEdit? + +`boolean` = `true` + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the last search. + +#### Example + +```typescript +this.grid.refreshSearch(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.refreshSearch` + +*** + +### resetNotifyChanges() + +> `protected` **resetNotifyChanges**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6829) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.resetNotifyChanges` + +*** + +### selectAllColumns() + +> **selectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6082) + +Selects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectAllColumns` + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5872) + +Selects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.selectAllRows(); +this.grid.selectAllRows(false); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectAllRows` + +*** + +### selectColumns() + +> **selectColumns**(`columns`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6015) + +Select specified columns. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectColumns(['ID','Name'], true); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectColumns` + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6000](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6000) + +Get current selected columns. + +#### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Example + +Returns an array with selected columns +```typescript +const selectedColumns = this.grid.selectedColumns(); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectedColumns` + +*** + +### selectRange() + +> **selectRange**(`arg`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5934) + +Select range(s) of cells between certain rows and columns of the grid. + +#### Parameters + +##### arg + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) \| [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectRange` + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5840) + +Select specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRows([1,2,5], true); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.selectRows` + +*** + +### shouldRecreateColumns() + +> `protected` **shouldRecreateColumns**(`oldData`, `newData`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8177) + +#### Parameters + +##### oldData + +`any`[] + +##### newData + +`any`[] + +#### Returns + +`boolean` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.shouldRecreateColumns` + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5109) + +Sort a single `IgxColumnComponent`. + +#### Parameters + +##### expression + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Remarks + +Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. + +#### Example + +```typescript +this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.sort` + +*** + +### subscribeToTransactions() + +> `protected` **subscribeToTransactions**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6668) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.subscribeToTransactions` + +*** + +### switchTransactionService() + +> `protected` **switchTransactionService**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6656) + +#### Parameters + +##### val + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.switchTransactionService` + +*** + +### toggleColumnVisibility() + +> **toggleColumnVisibility**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4358](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4358) + +Toggles the specified column's visibility. + +#### Parameters + +##### args + +[`IColumnVisibilityChangedEventArgs`](../interfaces/IColumnVisibilityChangedEventArgs.md) + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.toggleColumnVisibility({ + column: this.grid1.columns[0], + newValue: true +}); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.toggleColumnVisibility` + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4463) + +Toggles the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.toggleRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.toggleRow` + +*** + +### transactionStatusUpdate() + +> `protected` **transactionStatusUpdate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6674](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6674) + +#### Parameters + +##### event + +[`StateUpdateEvent`](../interfaces/StateUpdateEvent.md) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.transactionStatusUpdate` + +*** + +### unpinColumn() + +> **unpinColumn**(`columnName`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5302) + +Unpins a column by field name. Returns whether the operation is successful. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.unpinColumn` + +*** + +### unpinRow() + +> **unpinRow**(`rowID`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5355) + +Unpin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### row? + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.unpinRow(rowID); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.unpinRow` + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5016](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5016) + +Updates the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### value + +`any` + +the new value which is to be set. + +##### rowSelector + +`any` + +corresponds to rowID. + +##### column + +`string` + +corresponds to column field. + +#### Returns + +`void` + +#### Remarks + +Requires that the `primaryKey` property is set. + +#### Example + +```typescript +this.gridWithPK.updateCell('Updated', 1, 'ProductName'); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateCell` + +*** + +### updateChildren() + +> `protected` **updateChildren**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:542](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L542) + +#### Returns + +`void` + +*** + +### updateColumnList() + +> `protected` **updateColumnList**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts#L520) + +#### Returns + +`void` + +*** + +### updateDefaultRowHeight() + +> `protected` **updateDefaultRowHeight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8096](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8096) + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateDefaultRowHeight` + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5061](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5061) + +Updates the `IgxGridRowComponent` + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`void` + +#### Remarks + +The row is specified by +rowSelector parameter and the data source record with the passed value. +This method will apply requested update only if primary key is specified in the grid. + +#### Example + +```typescript +grid.updateRow({ + ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') + }, 1); +``` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateRow` + +*** + +### updateScrollThrottle() + +> `protected` **updateScrollThrottle**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3990) + +#### Parameters + +##### cells + +`number` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.updateScrollThrottle` + +*** + +### verticalScrollHandler() + +> `protected` **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7783](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7783) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.verticalScrollHandler` + +*** + +### viewDetachHandler() + +> `protected` **viewDetachHandler**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6408) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.viewDetachHandler` + +*** + +### writeToData() + +> `protected` **writeToData**(`rowIndex`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6713) + +#### Parameters + +##### rowIndex + +`number` + +##### value + +`any` + +#### Returns + +`void` + +#### Inherited from + +`IgxHierarchicalGridBaseDirective.writeToData` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectComponent.md new file mode 100644 index 000000000..713b2ddb8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectComponent.md @@ -0,0 +1,1260 @@ +# Class: IgxSelectComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L78) + +**Ignite UI for Angular Select** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select) + +The `igxSelect` provides an input with dropdown list allowing selection of a single item. + +Example: +```html +<igx-select #select1 [placeholder]="'Pick One'"> + <label igxLabel>Select Label</label> + <igx-select-item *ngFor="let item of items" [value]="item.field"> + {{ item.field }} + </igx-select-item> +</igx-select> +``` + +## Extends + +- [`IgxDropDownComponent`](IgxDropDownComponent.md) + +## Implements + +- `IgxSelectBase` +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSelectComponent**(): `IgxSelectComponent` + +#### Returns + +`IgxSelectComponent` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`constructor`](IgxDropDownComponent.md#constructor) + +## Properties + +### \_focusedItem + +> `protected` **\_focusedItem**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L187) + +#### Implementation of + +`IgxSelectBase._focusedItem` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`_focusedItem`](IgxDropDownComponent.md#_focuseditem) + +*** + +### \_height + +> `protected` **\_height**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L186) + +#### Implementation of + +`IgxSelectBase._height` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`_height`](IgxDropDownComponent.md#_height) + +*** + +### \_id + +> `protected` **\_id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L188) + +#### Implementation of + +`IgxSelectBase._id` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`_id`](IgxDropDownComponent.md#_id) + +*** + +### \_scrollPosition + +> `protected` **\_scrollPosition**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L237) + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`_scrollPosition`](IgxDropDownComponent.md#_scrollposition) + +*** + +### \_width + +> `protected` **\_width**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L185) + +#### Implementation of + +`IgxSelectBase._width` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`_width`](IgxDropDownComponent.md#_width) + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L25) + +#### Implementation of + +`IgxSelectBase.cdr` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`cdr`](IgxDropDownComponent.md#cdr) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L173) + +Emitted after the dropdown is closed + +```html +<igx-select (closed)='handleClosed($event)'></igx-select> +``` + +#### Overrides + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`closed`](IgxDropDownComponent.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L163) + +Emitted before the dropdown is closed + +```html +<igx-select (closing)='handleClosing($event)'></igx-select> +``` + +#### Overrides + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`closing`](IgxDropDownComponent.md#closing) + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L189) + +#### Implementation of + +`IgxSelectBase.computedStyles` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`computedStyles`](IgxDropDownComponent.md#computedstyles) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L236) + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`destroy$`](IgxDropDownComponent.md#destroy) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L120) + +Disables the component. +```html +<igx-select [disabled]="'true'"></igx-select> +``` + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L26) + +#### Implementation of + +`IgxSelectBase.document` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`document`](IgxDropDownComponent.md#document) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L24) + +#### Implementation of + +`IgxSelectBase.elementRef` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`elementRef`](IgxDropDownComponent.md#elementref) + +*** + +### footerTemplate + +> **footerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:240](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L240) + +The custom template, if any, that should be used when rendering the FOOTER for the select items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.select.footerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-select #select> + ... + <ng-template igxSelectFooter> + <div class="select__footer"> + This is a custom footer + </div> + </ng-template> + </igx-select> +``` + +*** + +### headerTemplate + +> **headerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L217) + +The custom template, if any, that should be used when rendering the HEADER for the select items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.select.headerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-select #select> + ... + <ng-template igxSelectHeader> + <div class="select__header"> + This is a custom header + </div> + </ng-template> + </igx-select> +``` + +*** + +### internalSuffixes + +> `protected` **internalSuffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L102) + +*** + +### labelledBy + +> **labelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L134) + +Sets aria-labelledby attribute value. +```html +<igx-drop-down [labelledby]="labelId"></igx-drop-down> +``` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`labelledBy`](IgxDropDownComponent.md#labelledby) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L153) + +Emitted after the dropdown is opened + +```html +<igx-select (opened)='handleOpened($event)'></igx-select> +``` + +#### Overrides + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`opened`](IgxDropDownComponent.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L143) + +Emitted before the dropdown is opened + +```html +<igx-select opening='handleOpening($event)'></igx-select> +``` + +#### Overrides + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`opening`](IgxDropDownComponent.md#opening) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L80) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L129) + +Sets custom OverlaySettings `IgxSelectComponent`. +```html +<igx-select [overlaySettings] = "customOverlaySettings"></igx-select> +``` + +*** + +### placeholder + +> **placeholder**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L111) + +Sets input placeholder. + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L96) + +*** + +### role + +> **role**: `string` = `'listbox'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L144) + +Gets/sets the `role` attribute of the drop down. Default is 'listbox'. + +```html + <igx-drop-down [role]="customRole"></igx-drop-down-item> +``` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`role`](IgxDropDownComponent.md#role) + +*** + +### scrollContainerRef + +> `protected` **scrollContainerRef**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L153) + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`scrollContainerRef`](IgxDropDownComponent.md#scrollcontainerref) + +*** + +### selection + +> `protected` **selection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L57) + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`selection`](IgxDropDownComponent.md#selection) + +*** + +### selectionChanging + +> **selectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L36) + +Emitted when item selection is changing, before the selection completes + +```html +<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down> +``` + +#### Implementation of + +`IgxSelectBase.selectionChanging` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`selectionChanging`](IgxDropDownComponent.md#selectionchanging) + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L99) + +*** + +### toggleDirective + +> `protected` **toggleDirective**: [`IgxToggleDirective`](IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L150) + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`toggleDirective`](IgxDropDownComponent.md#toggledirective) + +*** + +### toggleIconTemplate + +> **toggleIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L194) + +The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.select.toggleIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-select #select> + ... + <ng-template igxSelectToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon> + </ng-template> + </igx-select> +``` + +*** + +### virtDir + +> `protected` **virtDir**: `IgxForOfToken`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L147) + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`virtDir`](IgxDropDownComponent.md#virtdir) + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L221) + +Gets if the dropdown is collapsed + +```typescript +let isCollapsed = this.dropdown.collapsed; +``` + +##### Returns + +`boolean` + +Gets if the dropdown is collapsed + +#### Implementation of + +`IgxSelectBase.collapsed` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`collapsed`](IgxDropDownComponent.md#collapsed) + +*** + +### collectionLength + +#### Get Signature + +> **get** `protected` **collectionLength**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L230) + +##### Returns + +`number` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`collectionLength`](IgxDropDownComponent.md#collectionlength) + +*** + +### element + +#### Get Signature + +> **get** **element**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L158) + +Get dropdown html element + +```typescript +let myDropDownElement = this.dropdown.element; +``` + +##### Returns + +`any` + +#### Implementation of + +`IgxSelectBase.element` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`element`](IgxDropDownComponent.md#element) + +*** + +### headers + +#### Get Signature + +> **get** **headers**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L138) + +Get all header items + +```typescript +let myDropDownHeaderItems = this.dropdown.headers; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +#### Implementation of + +`IgxSelectBase.headers` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`headers`](IgxDropDownComponent.md#headers) + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L183) + +Gets/Sets the drop down's id + +```typescript +// get +let myDropDownCurrentId = this.dropdown.id; +``` +```html +<!--set--> +<igx-drop-down [id]='newDropDownId'></igx-drop-down> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L186) + +Gets/Sets the drop down's id + +```typescript +// get +let myDropDownCurrentId = this.dropdown.id; +``` +```html +<!--set--> +<igx-drop-down [id]='newDropDownId'></igx-drop-down> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.id` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`id`](IgxDropDownComponent.md#id) + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L118) + +Get all non-header items + +```typescript +let myDropDownItems = this.dropdown.items; +``` + +##### Returns + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md)[] + +#### Implementation of + +`IgxSelectBase.items` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`items`](IgxDropDownComponent.md#items) + +*** + +### listId + +#### Get Signature + +> **get** **listId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L195) + +Id of the internal listbox of the drop down + +##### Returns + +`string` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`listId`](IgxDropDownComponent.md#listid) + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L297) + +Sets how the select will be styled. +The allowed values are `line`, `box` and `border`. The input-group default is `line`. +```html +<igx-select [type]="'box'"></igx-select> +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L301) + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L278) + +Gets/Sets the component value. + +```typescript +// get +let selectValue = this.select.value; +``` + +```typescript +// set +this.select.value = 'London'; +``` +```html +<igx-select [value]="value"></igx-select> +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **value**(`v`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L281) + +##### Parameters + +###### v + +`any` + +##### Returns + +`void` + +## Methods + +### clearSelection() + +> **clearSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L574) + +Clears the selection of the dropdown +```typescript +this.dropdown.clearSelection(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`clearSelection`](IgxDropDownComponent.md#clearselection) + +*** + +### close() + +> **close**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L270) + +Closes the dropdown + +```typescript +this.dropdown.close(); +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.close` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`close`](IgxDropDownComponent.md#close) + +*** + +### focusItem() + +> `protected` **focusItem**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:601](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L601) + +#### Parameters + +##### value + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`focusItem`](IgxDropDownComponent.md#focusitem) + +*** + +### getNearestSiblingFocusableItemIndex() + +> `protected` **getNearestSiblingFocusableItemIndex**(`startIndex`, `direction`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L308) + +#### Parameters + +##### startIndex + +`number` + +##### direction + +`Navigate` + +#### Returns + +`number` + +#### Implementation of + +`IgxSelectBase.getNearestSiblingFocusableItemIndex` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`getNearestSiblingFocusableItemIndex`](IgxDropDownComponent.md#getnearestsiblingfocusableitemindex) + +*** + +### inputGroupClick() + +> **inputGroupClick**(`event`, `overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L401) + +#### Parameters + +##### event + +`MouseEvent` + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +*** + +### isSelectionValid() + +> `protected` **isSelectionValid**(`selection`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:591](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L591) + +Checks whether the selection is valid +`null` - the selection should be emptied +Virtual? - the selection should at least have and `index` and `value` property +Non-virtual? - the selection should be a valid drop-down item and **not** be a header + +#### Parameters + +##### selection + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`isSelectionValid`](IgxDropDownComponent.md#isselectionvalid) + +*** + +### manageRequiredAsterisk() + +> `protected` **manageRequiredAsterisk**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:569](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L569) + +#### Returns + +`void` + +*** + +### navigate() + +> `protected` **navigate**(`direction`, `currentIndex?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:562](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L562) + +#### Parameters + +##### direction + +`Navigate` + +##### currentIndex? + +`number` + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.navigate` + +#### Overrides + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`navigate`](IgxDropDownComponent.md#navigate) + +*** + +### navigateItem() + +> **navigateItem**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L316) + +Navigates to the item on the specified index +If the data in the drop-down is virtualized, pass the index of the item in the virtualized data. + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.navigateItem` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`navigateItem`](IgxDropDownComponent.md#navigateitem) + +*** + +### onItemActionKey() + +> **onItemActionKey**(`key`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L465) + +Keydown Handler + +#### Parameters + +##### key + +[`DropDownActionKey`](../type-aliases/DropDownActionKey.md) + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.onItemActionKey` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`onItemActionKey`](IgxDropDownComponent.md#onitemactionkey) + +*** + +### onStatusChanged() + +> `protected` **onStatusChanged**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L540) + +#### Returns + +`void` + +*** + +### open() + +> **open**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:390](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select.component.ts#L390) + +Opens the select + +```typescript +this.select.open(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.open` + +#### Overrides + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`open`](IgxDropDownComponent.md#open) + +*** + +### scrollToHiddenItem() + +> `protected` **scrollToHiddenItem**(`newItem`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts#L287) + +#### Parameters + +##### newItem + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.scrollToHiddenItem` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`scrollToHiddenItem`](IgxDropDownComponent.md#scrolltohiddenitem) + +*** + +### scrollToItem() + +> `protected` **scrollToItem**(`item`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:597](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L597) + +#### Parameters + +##### item + +[`IgxDropDownItemBaseDirective`](IgxDropDownItemBaseDirective.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`scrollToItem`](IgxDropDownComponent.md#scrolltoitem) + +*** + +### setSelectedItem() + +> **setSelectedItem**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L294) + +Select an item by index + +#### Parameters + +##### index + +`number` + +of the item to select; If the drop down uses *igxFor, pass the index in data + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`setSelectedItem`](IgxDropDownComponent.md#setselecteditem) + +*** + +### skipHeader() + +> `protected` **skipHeader**(`direction`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:616](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L616) + +#### Parameters + +##### direction + +`Navigate` + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`skipHeader`](IgxDropDownComponent.md#skipheader) + +*** + +### toggle() + +> **toggle**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L281) + +Toggles the dropdown + +```typescript +this.dropdown.toggle(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +`IgxSelectBase.toggle` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`toggle`](IgxDropDownComponent.md#toggle) + +*** + +### updateItemFocus() + +> `protected` **updateItemFocus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:607](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts#L607) + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownComponent`](IgxDropDownComponent.md).[`updateItemFocus`](IgxDropDownComponent.md#updateitemfocus) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectGroupComponent.md new file mode 100644 index 000000000..f4148687b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectGroupComponent.md @@ -0,0 +1,110 @@ +# Class: IgxSelectGroupComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-group.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select-group.component.ts#L16) + +The `<igx-select-item>` is a container intended for row items in +a `<igx-select>` container. + +## Extends + +- [`IgxDropDownGroupComponent`](IgxDropDownGroupComponent.md) + +## Constructors + +### Constructor + +> **new IgxSelectGroupComponent**(): `IgxSelectGroupComponent` + +#### Returns + +`IgxSelectGroupComponent` + +#### Inherited from + +[`IgxDropDownGroupComponent`](IgxDropDownGroupComponent.md).[`constructor`](IgxDropDownGroupComponent.md#constructor) + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L66) + +Sets/gets if the item group is disabled + +```typescript +const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; +// get +... +const groupState: boolean = myDropDownGroup.disabled; +... +//set +... +myDropDownGroup,disabled = false; +... +``` + +```html +<igx-drop-down-item-group [label]="'My Items'" [disabled]="true"> + <igx-drop-down-item *ngFor="let item of items[index]" [value]="item.value"> + {{ item.text }} + </igx-drop-down-item> +</igx-drop-down-item-group> +``` + +**NOTE:** All items inside of a disabled drop down group will be treated as disabled + +#### Inherited from + +[`IgxDropDownGroupComponent`](IgxDropDownGroupComponent.md).[`disabled`](IgxDropDownGroupComponent.md#disabled) + +*** + +### label + +> **label**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L90) + +Sets/gets the label of the item group + +```typescript +const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; +// get +... +const myLabel: string = myDropDownGroup.label; +... +// set +... +myDropDownGroup.label = 'My New Label'; +... +``` + +```html +<igx-drop-down-item-group [label]="'My new Label'"> + ... +</igx-drop-down-item-group> +``` + +#### Inherited from + +[`IgxDropDownGroupComponent`](IgxDropDownGroupComponent.md).[`label`](IgxDropDownGroupComponent.md#label) + +## Accessors + +### labelledBy + +#### Get Signature + +> **get** **labelledBy**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts#L25) + +##### Returns + +`string` + +#### Inherited from + +[`IgxDropDownGroupComponent`](IgxDropDownGroupComponent.md).[`labelledBy`](IgxDropDownGroupComponent.md#labelledby) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectItemComponent.md new file mode 100644 index 000000000..a5730dcc7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSelectItemComponent.md @@ -0,0 +1,530 @@ +# Class: IgxSelectItemComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-item.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select-item.component.ts#L9) + +The `<igx-drop-down-item>` is a container intended for row items in +a `<igx-drop-down>` container. + +## Extends + +- [`IgxDropDownItemComponent`](IgxDropDownItemComponent.md) + +## Constructors + +### Constructor + +> **new IgxSelectItemComponent**(): `IgxSelectItemComponent` + +#### Returns + +`IgxSelectItemComponent` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`constructor`](IgxDropDownItemComponent.md#constructor) + +## Properties + +### \_disabled + +> `protected` **\_disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L262) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`_disabled`](IgxDropDownItemComponent.md#_disabled) + +*** + +### \_index + +> `protected` **\_index**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:261](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L261) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`_index`](IgxDropDownItemComponent.md#_index) + +*** + +### \_label + +> `protected` **\_label**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L263) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`_label`](IgxDropDownItemComponent.md#_label) + +*** + +### \_selected + +> `protected` **\_selected**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L260) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`_selected`](IgxDropDownItemComponent.md#_selected) + +*** + +### dropDown + +> `protected` **dropDown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L20) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`dropDown`](IgxDropDownItemComponent.md#dropdown) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L21) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`elementRef`](IgxDropDownItemComponent.md#elementref) + +*** + +### group + +> `protected` **group**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L22) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`group`](IgxDropDownItemComponent.md#group) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L38) + +Sets/gets the `id` of the item. +```html +<igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item> +``` +```typescript +let itemId = this.item.id; +``` + +#### Memberof + +IgxSelectItemComponent + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`id`](IgxDropDownItemComponent.md#id) + +*** + +### role + +> **role**: `string` = `'option'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L223) + +Gets/sets the `role` attribute of the item. Default is 'option'. + +```html + <igx-drop-down-item [role]="customRole"></igx-drop-down-item> +``` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`role`](IgxDropDownItemComponent.md#role) + +*** + +### selection? + +> `protected` `optional` **selection?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L23) + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`selection`](IgxDropDownItemComponent.md#selection) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L95) + +Gets/sets the value of the item if the item is databound + +```typescript +// usage in IgxDropDownItemComponent +// get +let mySelectedItemValue = this.dropdown.selectedItem.value; + +// set +let mySelectedItem = this.dropdown.selectedItem; +mySelectedItem.value = { id: 123, name: 'Example Name' } + +// usage in IgxComboItemComponent +// get +let myComboItemValue = this.combo.items[0].value; +``` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`value`](IgxDropDownItemComponent.md#value) + +## Accessors + +### ariaLabel + +#### Get Signature + +> **get** **ariaLabel**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L42) + +##### Returns + +`string` + +#### Set Signature + +> **set** **ariaLabel**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L46) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`ariaLabel`](IgxDropDownItemComponent.md#arialabel) + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L206) + +Sets/gets if the given item is disabled + +```typescript + // get + let mySelectedItem = this.dropdown.selectedItem; + let myItemIsDisabled = mySelectedItem.disabled; +``` + +```html + <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}> + <div> + {{item.field}} + </div> + </igx-drop-down-item> +``` +**NOTE:** Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L210) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`disabled`](IgxDropDownItemComponent.md#disabled) + +*** + +### focused + +#### Get Signature + +> **get** **focused**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L24) + +Sets/gets if the given item is focused +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemFocused = mySelectedItem.focused; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **focused**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts#L41) + +Sets/gets if the given item is focused +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemFocused = mySelectedItem.focused; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`focused`](IgxDropDownItemComponent.md#focused) + +*** + +### hasIndex + +#### Get Signature + +> **get** `protected` **hasIndex**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L252) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`hasIndex`](IgxDropDownItemComponent.md#hasindex) + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L66) + +The data index of the dropdown item. + +```typescript +// get the data index of the selected dropdown item +let selectedItemIndex = this.dropdown.selectedItem.index +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **index**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L73) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`index`](IgxDropDownItemComponent.md#index) + +*** + +### isSelectable + +#### Get Signature + +> **get** `protected` **isSelectable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L298) + +Returns true if the items is not a header or disabled + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`isSelectable`](IgxDropDownItemComponent.md#isselectable) + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-item.component.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select-item.component.ts#L55) + +Sets/Gets if the item is the currently selected one in the select + +```typescript + let mySelectedItem = this.select.selectedItem; + let isMyItemSelected = mySelectedItem.selected; // true +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-item.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select-item.component.ts#L59) + +Sets/Gets if the item is the currently selected one in the dropdown + +```typescript + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemSelected = mySelectedItem.selected; // true +``` + +Two-way data binding +```html +<igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item> +``` + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +#### Overrides + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`selected`](IgxDropDownItemComponent.md#selected) + +*** + +### text + +#### Get Signature + +> **get** **text**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-item.component.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select-item.component.ts#L30) + +Gets/Sets the item's text to be displayed in the select component's input when the item is selected. + +```typescript + //get + let mySelectedItem = this.dropDown.selectedItem; + let selectedItemText = mySelectedItem.text; +``` + +```html +// set +<igx-select-item [text]="'London'"></igx-select-item> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **text**(`text`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-item.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/select-item.component.ts#L34) + +##### Parameters + +###### text + +`string` + +##### Returns + +`void` + +## Methods + +### ensureItemFocus() + +> `protected` **ensureItemFocus**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L303) + +If `allowItemsFocus` is enabled, keep the browser focus on the active item + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`ensureItemFocus`](IgxDropDownItemComponent.md#ensureitemfocus) + +*** + +### ngDoCheck() + +> **ngDoCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts#L284) + +#### Returns + +`void` + +#### Inherited from + +[`IgxDropDownItemComponent`](IgxDropDownItemComponent.md).[`ngDoCheck`](IgxDropDownItemComponent.md#ngdocheck) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSimpleComboComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSimpleComboComponent.md new file mode 100644 index 000000000..0fe4d0123 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSimpleComboComponent.md @@ -0,0 +1,2278 @@ +# Class: IgxSimpleComboComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L62) + +Represents a drop-down list that provides filtering functionality, allowing users to choose a single option from a predefined list. + +## Igx Module + +IgxSimpleComboModule + +## Igx Theme + +igx-combo-theme + +## Igx Keywords + +combobox, single combo selection + +## Igx Group + +Grids & Lists + +## Remarks + +It provides the ability to filter items as well as perform single selection on the provided data. +Additionally, it exposes keyboard navigation and custom styling capabilities. + +## Example + +```html +<igx-simple-combo [itemsMaxHeight]="250" [data]="locationData" + [displayKey]="'field'" [valueKey]="'field'" + placeholder="Location" searchPlaceholder="Search..."> +</igx-simple-combo> +``` + +## Extends + +- [`IgxComboBaseDirective`](IgxComboBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSimpleComboComponent**(): `IgxSimpleComboComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L146) + +#### Returns + +`IgxSimpleComboComponent` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`constructor`](IgxComboBaseDirective.md#constructor) + +## Properties + +### \_data + +> `protected` **\_data**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L953) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_data`](IgxComboBaseDirective.md#_data) + +*** + +### \_defaultResourceStrings + +> `protected` **\_defaultResourceStrings**: `PrefixedResourceStrings`\<`IAComboResourceStrings`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:962](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L962) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_defaultResourceStrings`](IgxComboBaseDirective.md#_defaultresourcestrings) + +*** + +### \_displayKey + +> `protected` **\_displayKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L959) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_displayKey`](IgxComboBaseDirective.md#_displaykey) + +*** + +### \_displayValue + +> `protected` **\_displayValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L955) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_displayValue`](IgxComboBaseDirective.md#_displayvalue) + +*** + +### \_filteredData + +> `protected` **\_filteredData**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L958) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_filteredData`](IgxComboBaseDirective.md#_filtereddata) + +*** + +### \_groupKey + +> `protected` **\_groupKey**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L956) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_groupKey`](IgxComboBaseDirective.md#_groupkey) + +*** + +### \_iconService + +> `protected` **\_iconService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L120) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_iconService`](IgxComboBaseDirective.md#_iconservice) + +*** + +### \_injector + +> `protected` **\_injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L119) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_injector`](IgxComboBaseDirective.md#_injector) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L118) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_inputGroupType`](IgxComboBaseDirective.md#_inputgrouptype) + +*** + +### \_onChangeCallback + +> `protected` **\_onChangeCallback**: (`_`) => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L967) + +#### Parameters + +##### \_ + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_onChangeCallback`](IgxComboBaseDirective.md#_onchangecallback) + +*** + +### \_onTouchedCallback + +> `protected` **\_onTouchedCallback**: () => `void` = `noop` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L966) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_onTouchedCallback`](IgxComboBaseDirective.md#_ontouchedcallback) + +*** + +### \_remoteSelection + +> `protected` **\_remoteSelection**: `object` = `{}` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L960) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_remoteSelection`](IgxComboBaseDirective.md#_remoteselection) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `PrefixedResourceStrings` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L961) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_resourceStrings`](IgxComboBaseDirective.md#_resourcestrings) + +*** + +### \_searchValue + +> `protected` **\_searchValue**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L957) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_searchValue`](IgxComboBaseDirective.md#_searchvalue) + +*** + +### \_valid + +> `protected` **\_valid**: [`IgxInputState`](../enumerations/IgxInputState.md) = `IgxInputState.INITIAL` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L963) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_valid`](IgxComboBaseDirective.md#_valid) + +*** + +### \_value + +> `protected` **\_value**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L954) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`_value`](IgxComboBaseDirective.md#_value) + +*** + +### addItemTemplate + +> **addItemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:671](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L671) + +The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.addItemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboAddItem> + <button type="button" igxButton="contained" class="combo__add-button"> + Click to add item + </button> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`addItemTemplate`](IgxComboBaseDirective.md#additemtemplate) + +*** + +### addition + +> **addition**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L537) + +Emitted when an item is being added to the data collection + +```html +<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`addition`](IgxComboBaseDirective.md#addition) + +*** + +### allowCustomValues + +> **allowCustomValues**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L230) + +Controls whether custom values can be added to the collection + +```typescript +// get +let comboAllowsCustomValues = this.combo.allowCustomValues; +``` + +```html +<!--set--> +<igx-combo [allowCustomValues]='true'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`allowCustomValues`](IgxComboBaseDirective.md#allowcustomvalues) + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L444) + +Sets aria-labelledby attribute value. +```html +<igx-combo [ariaLabelledBy]="'label1'"> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`ariaLabelledBy`](IgxComboBaseDirective.md#arialabelledby) + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L114) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`cdr`](IgxComboBaseDirective.md#cdr) + +*** + +### clearIconTemplate + +> **clearIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:736](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L736) + +The custom template, if any, that should be used when rendering the combo CLEAR button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.clearIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboClearIcon> + <igx-icon>clear</igx-icon> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`clearIconTemplate`](IgxComboBaseDirective.md#clearicontemplate) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:527](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L527) + +Emitted after the dropdown is closed + +```html +<igx-combo (closed)='handleClosed($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`closed`](IgxComboBaseDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L517) + +Emitted before the dropdown is closed + +```html +<igx-combo (closing)='handleClosing($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`closing`](IgxComboBaseDirective.md#closing) + +*** + +### comboAPI + +> `protected` **comboAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L116) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`comboAPI`](IgxComboBaseDirective.md#comboapi) + +*** + +### compareCollator + +> `protected` **compareCollator**: `Collator` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L968) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`compareCollator`](IgxComboBaseDirective.md#comparecollator) + +*** + +### complexTemplate + +> `protected` **complexTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:767](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L767) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`complexTemplate`](IgxComboBaseDirective.md#complextemplate) + +*** + +### computedStyles + +> `protected` **computedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L969) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`computedStyles`](IgxComboBaseDirective.md#computedstyles) + +*** + +### containerSize + +> `protected` **containerSize**: `any` = `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L951) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`containerSize`](IgxComboBaseDirective.md#containersize) + +*** + +### dataPreLoad + +> **dataPreLoad**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L557) + +Emitted when new chunk of data is loaded from the virtualization + +```html +<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`dataPreLoad`](IgxComboBaseDirective.md#datapreload) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L965) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`destroy$`](IgxComboBaseDirective.md#destroy) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L457) + +Disables the combo. The default is `false`. +```html +<igx-combo [disabled]="'true'"> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`disabled`](IgxComboBaseDirective.md#disabled) + +*** + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L117) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`document`](IgxComboBaseDirective.md#document) + +*** + +### dropdownContainer + +> `protected` **dropdownContainer**: `ElementRef` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:761](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L761) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`dropdownContainer`](IgxComboBaseDirective.md#dropdowncontainer) + +*** + +### elementRef + +> `protected` **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L113) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`elementRef`](IgxComboBaseDirective.md#elementref) + +*** + +### emptyTemplate + +> **emptyTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L694) + +The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.emptyTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboEmpty> + <div class="combo--empty"> + There are no items to display + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`emptyTemplate`](IgxComboBaseDirective.md#emptytemplate) + +*** + +### filterFunction + +> **filterFunction**: (`collection`, `searchValue`, `filteringOptions`) => `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L435) + +Gets/Sets the custom filtering function of the combo. + +#### Parameters + +##### collection + +`any`[] + +##### searchValue + +`any` + +##### filteringOptions + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +#### Returns + +`any`[] + +#### Example + +```html + <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`filterFunction`](IgxComboBaseDirective.md#filterfunction) + +*** + +### footerTemplate + +> **footerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L627) + +The custom template, if any, that should be used when rendering the FOOTER for the combo items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.footerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboFooter> + <div class="combo__footer"> + This is a custom footer + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`footerTemplate`](IgxComboBaseDirective.md#footertemplate) + +*** + +### headerItemTemplate + +> **headerItemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L648) + +The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.headerItemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboHeaderItem let-item let-key="groupKey"> + <div class="custom-item--group">Group header for {{ item[key] }}</div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`headerItemTemplate`](IgxComboBaseDirective.md#headeritemtemplate) + +*** + +### headerTemplate + +> **headerTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L604) + +The custom template, if any, that should be used when rendering the HEADER for the combo items list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.headerTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboHeader> + <div class="combo__header"> + This is a custom header + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`headerTemplate`](IgxComboBaseDirective.md#headertemplate) + +*** + +### internalSuffixes + +> `protected` **internalSuffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L776) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`internalSuffixes`](IgxComboBaseDirective.md#internalsuffixes) + +*** + +### itemSize + +> `protected` **itemSize**: `any` = `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L952) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemSize`](IgxComboBaseDirective.md#itemsize) + +*** + +### itemsWidth + +> **itemsWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L300) + +Configures the drop down list width + +```typescript +// get +let myComboItemsWidth = this.combo.itemsWidth; +``` + +```html +<!--set--> +<igx-combo [itemsWidth] = '"180px"'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemsWidth`](IgxComboBaseDirective.md#itemswidth) + +*** + +### itemTemplate + +> **itemTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L581) + +The custom template, if any, that should be used when rendering ITEMS in the combo list + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.itemTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboItem let-item let-key="valueKey"> + <div class="custom-item"> + <div class="custom-item__name">{{ item[key] }}</div> + <div class="custom-item__cost">{{ item.cost }}</div> + </div> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemTemplate`](IgxComboBaseDirective.md#itemtemplate) + +*** + +### ngControl + +> `protected` **ngControl**: `NgControl` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L964) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`ngControl`](IgxComboBaseDirective.md#ngcontrol) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L507) + +Emitted after the dropdown is opened + +```html +<igx-combo (opened)='handleOpened($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`opened`](IgxComboBaseDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L497) + +Emitted before the dropdown is opened + +```html +<igx-combo opening='handleOpening($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`opening`](IgxComboBaseDirective.md#opening) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L166) + +Set custom overlay settings that control how the combo's list of items is displayed. +Set: +```html +<igx-combo [overlaySettings]="customOverlaySettings"></igx-combo> +``` + +```typescript + const customSettings = { positionStrategy: { settings: { target: myTarget } } }; + combo.overlaySettings = customSettings; +``` +Get any custom overlay settings used by the combo: +```typescript + const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings; +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`overlaySettings`](IgxComboBaseDirective.md#overlaysettings) + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L316) + +Defines the placeholder value for the combo value field + +```typescript +// get +let myComboPlaceholder = this.combo.placeholder; +``` + +```html +<!--set--> +<igx-combo [placeholder]='newPlaceHolder'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`placeholder`](IgxComboBaseDirective.md#placeholder) + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L770) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`prefixes`](IgxComboBaseDirective.md#prefixes) + +*** + +### primitiveTemplate + +> `protected` **primitiveTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L764) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`primitiveTemplate`](IgxComboBaseDirective.md#primitivetemplate) + +*** + +### searchInputUpdate + +> **searchInputUpdate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:547](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L547) + +Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.) + +```html +<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`searchInputUpdate`](IgxComboBaseDirective.md#searchinputupdate) + +*** + +### selectionChanged + +> **selectionChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L92) + +Emitted when item selection is changed, after the selection completes + +```html +<igx-simple-combo (selectionChanged)='handleSelection()'></igx-simple-combo> +``` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selectionChanged`](IgxComboBaseDirective.md#selectionchanged) + +*** + +### selectionChanging + +> **selectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L82) + +Emitted when item selection is changing, before the selection completes + +```html +<igx-simple-combo (selectionChanging)='handleSelection()'></igx-simple-combo> +``` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selectionChanging`](IgxComboBaseDirective.md#selectionchanging) + +*** + +### selectionService + +> `protected` **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L115) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selectionService`](IgxComboBaseDirective.md#selectionservice) + +*** + +### showSearchCaseIcon + +> **showSearchCaseIcon**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L136) + +Defines whether the caseSensitive icon should be shown in the search input + +```typescript +// get +let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon; +``` + +```html +<!--set--> +<igx-combo [showSearchCaseIcon]='true'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`showSearchCaseIcon`](IgxComboBaseDirective.md#showsearchcaseicon) + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:773](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L773) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`suffixes`](IgxComboBaseDirective.md#suffixes) + +*** + +### toggleIconTemplate + +> **toggleIconTemplate**: `TemplateRef`\<`any`\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L715) + +The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button + +```typescript +// Set in typescript +const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate; +myComponent.combo.toggleIconTemplate = myCustomTemplate; +``` +```html +<!-- Set in markup --> + <igx-combo #combo> + ... + <ng-template igxComboToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon> + </ng-template> + </igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`toggleIconTemplate`](IgxComboBaseDirective.md#toggleicontemplate) + +*** + +### valueKey + +> **valueKey**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:354](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L354) + +Determines which column in the data source is used to determine the value. + +```typescript +// get +let myComboValueKey = this.combo.valueKey; +``` + +```html +<!--set--> +<igx-combo [valueKey]='myKey'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`valueKey`](IgxComboBaseDirective.md#valuekey) + +*** + +### virtDir + +> `protected` **virtDir**: [`IgxForOfDirective`](IgxForOfDirective.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:758](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L758) + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`virtDir`](IgxComboBaseDirective.md#virtdir) + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L214) + +Sets the style width of the element + +```typescript +// get +let myComboWidth = this.combo.width; +``` + +```html +<!--set--> +<igx-combo [width]='250px'></igx-combo> +``` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`width`](IgxComboBaseDirective.md#width) + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L881) + +Gets drop down state. + +```typescript +let state = this.combo.collapsed; +``` + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`collapsed`](IgxComboBaseDirective.md#collapsed) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:327](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L327) + +Combo data source. + +```html +<!--set--> +<igx-combo [data]='items'></igx-combo> +``` + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L330) + +##### Parameters + +###### val + +`any`[] + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`data`](IgxComboBaseDirective.md#data) + +*** + +### disableFiltering + +#### Get Signature + +> **get** **disableFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L142) + +Enables/disables filtering in the list. The default is `false`. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disableFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L145) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`disableFiltering`](IgxComboBaseDirective.md#disablefiltering) + +*** + +### displayKey + +#### Get Signature + +> **get** **displayKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L378) + +Determines which column in the data source is used to determine the display value. + +```typescript +// get +let myComboDisplayKey = this.combo.displayKey; + +// set +this.combo.displayKey = 'val'; + +``` + +```html +<!--set--> +<igx-combo [displayKey]='myDisplayKey'></igx-combo> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayKey**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L357) + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`displayKey`](IgxComboBaseDirective.md#displaykey) + +*** + +### displayValue + +#### Get Signature + +> **get** **displayValue**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L847) + +The text displayed in the combo input + +```typescript +// get +let comboDisplayValue = this.combo.displayValue; +``` + +##### Returns + +`string` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`displayValue`](IgxComboBaseDirective.md#displayvalue) + +*** + +### filteringOptions + +#### Get Signature + +> **get** **filteringOptions**(): [`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L944) + +Configures the way combo items will be filtered. + +```typescript +// get +let myFilteringOptions = this.combo.filteringOptions; +``` + +```html +<!--set--> +<igx-combo [filteringOptions]='myFilteringOptions'></igx-combo> +``` + +##### Returns + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +#### Set Signature + +> **set** **filteringOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L947) + +##### Parameters + +###### value + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`filteringOptions`](IgxComboBaseDirective.md#filteringoptions) + +*** + +### groupKey + +#### Get Signature + +> **get** **groupKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L403) + +The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +```typescript +// get +let currentGroupKey = this.combo.groupKey; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **groupKey**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L391) + +The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +```html +<!--set--> +<igx-combo [groupKey]='newGroupKey'></igx-combo> +``` + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`groupKey`](IgxComboBaseDirective.md#groupkey) + +*** + +### groupSortingDirection + +#### Get Signature + +> **get** **groupSortingDirection**(): [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L419) + +Sets groups sorting order. + +##### Example + +```html +<igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo> +``` +```typescript +public groupSortingDirection = SortingDirection.Asc; +``` + +##### Returns + +[`SortingDirection`](../enumerations/SortingDirection.md) + +#### Set Signature + +> **set** **groupSortingDirection**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:422](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L422) + +##### Parameters + +###### val + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`groupSortingDirection`](IgxComboBaseDirective.md#groupsortingdirection) + +*** + +### hasSelectedItem + +#### Get Signature + +> **get** `protected` **hasSelectedItem**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L142) + +##### Returns + +`boolean` + +*** + +### id + +#### Get Signature + +> **get** **id**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L183) + +Gets/gets combo id. + +```typescript +// get +let id = this.combo.id; +``` + +```html +<!--set--> +<igx-combo [id]='combo1'></igx-combo> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **id**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L187) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`id`](IgxComboBaseDirective.md#id) + +*** + +### itemHeight + +#### Get Signature + +> **get** **itemHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L278) + +Configures the drop down list item height + +```typescript +// get +let myComboItemHeight = this.combo.itemHeight; +``` + +```html +<!--set--> +<igx-combo [itemHeight]='32'></igx-combo> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **itemHeight**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L282) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemHeight`](IgxComboBaseDirective.md#itemheight) + +*** + +### itemsMaxHeight + +#### Get Signature + +> **get** **itemsMaxHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L246) + +Configures the drop down list height + +```typescript +// get +let myComboItemsMaxHeight = this.combo.itemsMaxHeight; +``` + +```html +<!--set--> +<igx-combo [itemsMaxHeight]='320'></igx-combo> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **itemsMaxHeight**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L253) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`itemsMaxHeight`](IgxComboBaseDirective.md#itemsmaxheight) + +*** + +### required + +#### Get Signature + +> **get** `protected` **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1396) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`required`](IgxComboBaseDirective.md#required) + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:482](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L482) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L485) + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`resourceStrings`](IgxComboBaseDirective.md#resourcestrings) + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L109) + +Get current selection state + +##### Returns + +`any` + +The selected item, if any +```typescript +let mySelection = this.combo.selection; +``` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`selection`](IgxComboBaseDirective.md#selection) + +*** + +### totalItemCount + +#### Get Signature + +> **get** **totalItemCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:893](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L893) + +Gets total count of the virtual data items, when using remote service. + +```typescript +// get +let count = this.combo.totalItemCount; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalItemCount**(`count`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L904) + +Sets total count of the virtual data items, when using remote service. + +```typescript +// set +this.combo.totalItemCount(remoteService.count); +``` + +##### Parameters + +###### count + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`totalItemCount`](IgxComboBaseDirective.md#totalitemcount) + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L467) + +Sets the visual combo type. +The allowed values are `line`, `box`, `border` and `search`. The default is `box`. +```html +<igx-combo [type]="'line'"> +``` + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:471](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L471) + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`type`](IgxComboBaseDirective.md#type) + +*** + +### valid + +#### Get Signature + +> **get** **valid**(): [`IgxInputState`](../enumerations/IgxInputState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L810) + +Gets if control is valid, when used in a form + +```typescript +// get +let valid = this.combo.valid; +``` + +##### Returns + +[`IgxInputState`](../enumerations/IgxInputState.md) + +#### Set Signature + +> **set** **valid**(`valid`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L822) + +Sets if control is valid, when used in a form + +```typescript +// set +this.combo.valid = IgxInputState.INVALID; +``` + +##### Parameters + +###### valid + +[`IgxInputState`](../enumerations/IgxInputState.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`valid`](IgxComboBaseDirective.md#valid) + +*** + +### value + +#### Get Signature + +> **get** **value**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L97) + +The value of the combo + +```typescript +// get +let comboValue = this.combo.value; +``` + +##### Returns + +`any` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`value`](IgxComboBaseDirective.md#value) + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L859) + +Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize` + +```typescript +// get +let state = this.combo.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +#### Set Signature + +> **set** **virtualizationState**(`state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L870) + +Sets the current state of the virtualized data. + +```typescript +// set +this.combo.virtualizationState(state); +``` + +##### Parameters + +###### state + +[`IForOfState`](../interfaces/IForOfState.md) + +##### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`virtualizationState`](IgxComboBaseDirective.md#virtualizationstate) + +## Methods + +### checkMatch() + +> `protected` **checkMatch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1342](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1342) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`checkMatch`](IgxComboBaseDirective.md#checkmatch) + +*** + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1110) + +A method that closes the combo. + +```html +<button type="button" (click)="combo.close()">Close Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`close`](IgxComboBaseDirective.md#close) + +*** + +### convertKeysToItems() + +> `protected` **convertKeysToItems**(`keys`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1330) + +if there is a valueKey - map the keys to data items, else - just return the keys + +#### Parameters + +##### keys + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`convertKeysToItems`](IgxComboBaseDirective.md#convertkeystoitems) + +*** + +### createDisplayText() + +> `protected` **createDisplayText**(`newSelection`, `oldSelection`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:567](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L567) + +#### Parameters + +##### newSelection + +`any`[] + +##### oldSelection + +`any`[] + +#### Returns + +`string` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`createDisplayText`](IgxComboBaseDirective.md#createdisplaytext) + +*** + +### deselect() + +> **deselect**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L192) + +Deselect the currently selected item + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`deselect`](IgxComboBaseDirective.md#deselect) + +*** + +### findAllMatches() + +> `protected` **findAllMatches**(`element`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:498](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L498) + +#### Parameters + +##### element + +`any` + +#### Returns + +`boolean` + +*** + +### findMatch() + +> `protected` **findMatch**(`element`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1347) + +#### Parameters + +##### element + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`findMatch`](IgxComboBaseDirective.md#findmatch) + +*** + +### getRemoteSelection() + +> `protected` **getRemoteSelection**(`newSelection`, `oldSelection`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L582) + +#### Parameters + +##### newSelection + +`any`[] + +##### oldSelection + +`any`[] + +#### Returns + +`string` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`getRemoteSelection`](IgxComboBaseDirective.md#getremoteselection) + +*** + +### getValueDisplayPairs() + +> `protected` **getValueDisplayPairs**(`ids`): `object`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1376](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1376) + +For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]` + +#### Parameters + +##### ids + +`any`[] + +#### Returns + +`object`[] + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`getValueDisplayPairs`](IgxComboBaseDirective.md#getvaluedisplaypairs) + +*** + +### manageRequiredAsterisk() + +> `protected` **manageRequiredAsterisk**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1353) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`manageRequiredAsterisk`](IgxComboBaseDirective.md#managerequiredasterisk) + +*** + +### ngAfterViewChecked() + +> **ngAfterViewChecked**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:993](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L993) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`ngAfterViewChecked`](IgxComboBaseDirective.md#ngafterviewchecked) + +*** + +### onStatusChanged() + +> `protected` **onStatusChanged**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1299) + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`onStatusChanged`](IgxComboBaseDirective.md#onstatuschanged) + +*** + +### open() + +> **open**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1092](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1092) + +A method that opens the combo. + +```html +<button type="button" (click)="combo.open()">Open Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`open`](IgxComboBaseDirective.md#open) + +*** + +### registerRemoteEntries() + +> `protected` **registerRemoteEntries**(`ids`, `add?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:594](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L594) + +Contains key-value pairs of the selected valueKeys and their resp. displayKeys + +#### Parameters + +##### ids + +`any`[] + +##### add? + +`boolean` = `true` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`registerRemoteEntries`](IgxComboBaseDirective.md#registerremoteentries) + +*** + +### select() + +> **select**(`item`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L177) + +Select a defined item + +#### Parameters + +##### item + +`any` + +the item to be selected +```typescript +this.combo.select("New York"); +``` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`select`](IgxComboBaseDirective.md#select) + +*** + +### setSelection() + +> `protected` **setSelection**(`newSelection`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:508](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L508) + +#### Parameters + +##### newSelection + +`any` + +#### Returns + +`void` + +#### Overrides + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`setSelection`](IgxComboBaseDirective.md#setselection) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1072) + +A method that opens/closes the combo. + +```html +<button type="button" (click)="combo.toggle()">Toggle Combo</button> +<igx-combo #combo></igx-combo> +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`toggle`](IgxComboBaseDirective.md#toggle) + +*** + +### triggerCheck() + +> **triggerCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:1117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L1117) + +Triggers change detection on the combo view + +#### Returns + +`void` + +#### Inherited from + +[`IgxComboBaseDirective`](IgxComboBaseDirective.md).[`triggerCheck`](IgxComboBaseDirective.md#triggercheck) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSlideComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSlideComponent.md new file mode 100644 index 000000000..4dc529946 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSlideComponent.md @@ -0,0 +1,233 @@ +# Class: IgxSlideComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L22) + +A slide component that usually holds an image and/or a caption text. +IgxSlideComponent is usually a child component of an IgxCarouselComponent. + +``` +<igx-slide [input bindings] > + <ng-content></ng-content> +</igx-slide> +``` + +## Export + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSlideComponent**(): `IgxSlideComponent` + +#### Returns + +`IgxSlideComponent` + +## Properties + +### cssClass + +> **cssClass**: `string` = `'igx-slide'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L94) + +Returns the class of the slide component. +```typescript +let class = this.slide.cssClass; +``` + +#### Memberof + +IgxSlideComponent + +*** + +### direction + +> **direction**: [`CarouselAnimationDirection`](../enumerations/CarouselAnimationDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L47) + +Gets/sets the target `direction` for the slide. +```html +<igx-carousel> + <igx-slide direction="NEXT"></igx-slide> +<igx-carousel> +``` + +#### Member Of + +IgxSlideComponent + +#### Implementation of + +`IgxSlideComponentBase.direction` + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L35) + +Gets/sets the `index` of the slide inside the carousel. +```html +<igx-carousel> + <igx-slide index="1"></igx-slide> +<igx-carousel> +``` + +#### Member Of + +IgxSlideComponent + +*** + +### previous + +> **previous**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L125) + +#### Implementation of + +`IgxSlideComponentBase.previous` + +*** + +### tab + +> **tab**: `string` = `'tabpanel'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L79) + +Returns the `role` of the slide component. +By default is set to `tabpanel` + +#### Memberof + +IgxSlideComponent + +*** + +### total + +> **total**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L50) + +## Accessors + +### active + +#### Get Signature + +> **get** **active**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L115) + +Gets/sets the `active` state of the slide. +```html +<igx-carousel> + <igx-slide [active] ="false"></igx-slide> +<igx-carousel> +``` + +Two-way data binding. +```html +<igx-carousel> + <igx-slide [(active)] ="model.isActive"></igx-slide> +<igx-carousel> +``` + +##### Memberof + +IgxSlideComponent + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **active**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L119) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L143) + +Returns a reference to the carousel element in the DOM. +```typescript +let nativeElement = this.slide.nativeElement; +``` + +##### Memberof + +IgxSlideComponent + +##### Returns + +`any` + +*** + +### tabIndex + +#### Get Signature + +> **get** **tabIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L62) + +Returns the `tabIndex` of the slide component. +```typescript +let tabIndex = this.carousel.tabIndex; +``` + +##### Memberof + +IgxSlideComponent + +##### Deprecated + +in version 19.2.0. + +##### Returns + +`number` + +## Methods + +### ngAfterContentChecked() + +> **ngAfterContentChecked**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/slide.component.ts#L154) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSliderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSliderComponent.md new file mode 100644 index 000000000..0ba826c4f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSliderComponent.md @@ -0,0 +1,1026 @@ +# Class: IgxSliderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L38) + +**Ignite UI for Angular Slider** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider) + +The Ignite UI Slider allows selection in a given range by moving the thumb along the track. The track +can be defined as continuous or stepped, and you can choose between single and range slider types. + +Example: +```html +<igx-slider id="slider" + [minValue]="0" [maxValue]="100" + [continuous]=true [(ngModel)]="volume"> +</igx-slider> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSliderComponent**(): `IgxSliderComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:758](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L758) + +#### Returns + +`IgxSliderComponent` + +## Properties + +### dragFinished + +> **dragFinished**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:696](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L696) + +This event is emitted at the end of every slide interaction. +```typescript +public change(event){ + alert("The value has been changed!"); +} +``` +```html +<igx-slider (dragFinished)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5"> +``` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L113) + +Sets the value of the `id` attribute. +If not provided it will be automatically generated. +```html +<igx-slider [id]="'igx-slider-32'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20"> +``` + +*** + +### lowerValueChange + +> **lowerValueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L668) + +This event is emitted every time the lower value of a range slider is changed. +```typescript +public change(value){ + alert(`The lower value has been changed to ${value}`); +} +``` +```html +<igx-slider [(lowerValue)]="model.lowervalue" (lowerValueChange)="change($event)" [step]="5"> +``` + +*** + +### primaryTickLabels + +> **primaryTickLabels**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L599) + +show/hide primary tick labels +```html +<igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider> +``` + +*** + +### secondaryTickLabels + +> **secondaryTickLabels**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:608](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L608) + +show/hide secondary tick labels +```html +<igx-slider [secondaryTicks]="5" [secondaryTickLabels]="false"></igx-slider> +``` + +*** + +### showTicks + +> **showTicks**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L590) + +Show/hide slider ticks +```html +<igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier> +``` + +*** + +### thumbLabelVisibilityDuration + +> **thumbLabelVisibilityDuration**: `number` = `750` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L122) + +Sets the duration visibility of thumbs labels. The default value is 750 milliseconds. +```html +<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5"> +``` + +*** + +### tickLabelsOrientation + +> **tickLabelsOrientation**: [`TickLabelsOrientation`](../type-aliases/TickLabelsOrientation.md) = `TickLabelsOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:632](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L632) + +Changes tick labels rotation: +horizontal - The default rotation +toptobottom - Rotates tick labels vertically to 90deg +bottomtotop - Rotate tick labels vertically to -90deg +```html +<igx-slider [primaryTicks]="5" [secondaryTicks]="3" [tickLabelsOrientation]="tickLabelsOrientaiton"></igx-slider> +``` + +*** + +### ticksOrientation + +> **ticksOrientation**: [`TicksOrientation`](../type-aliases/TicksOrientation.md) = `TicksOrientation.Bottom` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L620) + +Changes ticks orientation: +bottom - The default orienation, below the slider track. +top - Above the slider track +mirror - combines top and bottom orientation. +```html +<igx-slider [primaryTicks]="5" [ticksOrientation]="ticksOrientation"></igx-slider> +``` + +*** + +### upperValueChange + +> **upperValueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:682](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L682) + +This event is emitted every time the upper value of a range slider is changed. +```typescript +public change(value){ + alert(`The upper value has been changed to ${value}`); +} +``` +```html +<igx-slider [(upperValue)]="model.uppervalue" (upperValueChange)="change($event)" [step]="5"> +``` + +*** + +### valueChange + +> **valueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:654](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L654) + +This event is emitted every time the value is changed. +```typescript +public change(event){ + alert("The value has been changed!"); +} +``` +```html +<igx-slider (valueChange)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5"> +``` + +## Accessors + +### context + +#### Get Signature + +> **get** **context**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L206) + +Returns the template context corresponding +to [IgxThumbFromTemplateDirective](IgxThumbFromTemplateDirective.md) and [IgxThumbToTemplateDirective](IgxThumbToTemplateDirective.md) templates. + +```typescript +return { + $implicit // returns the value of the label, + labels // returns the labels collection the user has passed. +} +``` + +##### Returns + +`any` + +*** + +### continuous + +#### Get Signature + +> **get** **continuous**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L287) + +Returns if the IgxSliderComponent is set as continuous. +```typescript +@ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let continuous = this.slider.continuous; +} +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **continuous**(`continuous`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L300) + +Sets the IgxSliderComponent as continuous. +By default is considered that the IgxSliderComponent is discrete. +Discrete IgxSliderComponent slider has step indicators over the track and visible thumb labels during interaction. +Continuous IgxSliderComponent does not have ticks and does not show bubble labels for values. +```html +<igx-slider #slider [continuous]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20"> +``` + +##### Parameters + +###### continuous + +`boolean` + +##### Returns + +`void` + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L258) + +Returns if the IgxSliderComponent is disabled. +```typescript +@ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let isDisabled = this.slider.disabled; +} +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`disable`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L268) + +Disables the component. +```html +<igx-slider #slider [disabled]="true" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20"> +``` + +##### Parameters + +###### disable + +`boolean` + +##### Returns + +`void` + +*** + +### isRange + +#### Get Signature + +> **get** **isRange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:780](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L780) + +Returns whether the `IgxSliderComponent` type is RANGE. +```typescript + @ViewChild("slider") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let sliderRange = this.slider.isRange; +} +``` + +##### Returns + +`boolean` + +*** + +### labels + +#### Get Signature + +> **get** **labels**(): (`string` \| `number` \| `boolean`)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L177) + +Enables `labelView`, by accepting a collection of primitive values with more than one element. +Each element will be equally spread over the slider and it will serve as a thumb label. +Once the property is set, it will precendence over [maxValue](#maxvalue), [minValue](#minvalue), [step](#step). +This means that the manipulation for those properties won't be allowed. + +##### Returns + +(`string` \| `number` \| `boolean`)[] + +#### Set Signature + +> **set** **labels**(`labels`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L181) + +##### Parameters + +###### labels + +(`string` \| `number` \| `boolean`)[] + +##### Returns + +`void` + +*** + +### labelsViewEnabled + +#### Get Signature + +> **get** **labelsViewEnabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:894](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L894) + +Returns if label view is enabled. +If the [labels](#labels) is set, the view is automatically activated. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +let labelView = this.slider.labelsViewEnabled; +``` + +##### Returns + +`boolean` + +*** + +### lowerBound + +#### Get Signature + +> **get** **lowerBound**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L412) + +Returns the lower boundary of settable values of the `IgxSliderComponent`. +If not set, will return `minValue`. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let sliderLowBound = this.slider.lowerBound; +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **lowerBound**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:428](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L428) + +Sets the lower boundary of settable values of the `IgxSliderComponent`. +If not set is the same as min value. +```html +<igx-slider [step]="5" [lowerBound]="20"> +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### lowerLabel + +#### Get Signature + +> **get** **lowerLabel**(): `string` \| `number` \| `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L869) + +Returns the value corresponding the lower label. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +let label = this.slider.lowerLabel; +``` + +##### Returns + +`string` \| `number` \| `boolean` + +*** + +### lowerValue + +#### Get Signature + +> **get** **lowerValue**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L794) + +Returns the lower value of a RANGE `IgxSliderComponent`. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +public lowValue(event){ + let sliderLowValue = this.slider.lowerValue; +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **lowerValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L813) + +Sets the lower value of a RANGE `IgxSliderComponent`. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +public lowValue(event){ + this.slider.lowerValue = value; +} +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### maxValue + +#### Get Signature + +> **get** **maxValue**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:365](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L365) + +Returns the maximum displayed track value for the IgxSliderComponent. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let sliderMax = this.slider.maxValue; +} + ``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **maxValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:379](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L379) + +Sets the maximal displayed track value for the `IgxSliderComponent`. +The default maximum value is 100. +```html +<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256"> +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### minValue + +#### Get Signature + +> **get** **minValue**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L317) + +Returns the minimal displayed track value of the `IgxSliderComponent`. +```typescript + @ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let sliderMin = this.slider.minValue; +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **minValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:333](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L333) + +Sets the minimal displayed track value for the `IgxSliderComponent`. +The default minimal value is 0. +```html +<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100"> +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### primaryTicks + +#### Get Signature + +> **get** **primaryTicks**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L535) + +Returns the number of the presented primary ticks. +```typescript +const primaryTicks = this.slider.primaryTicks; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **primaryTicks**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L549) + +Sets the number of primary ticks. If @labels is enabled, this property won't function. +Insted enable ticks by [showTicks](#showticks) property. +```typescript +this.slider.primaryTicks = 5; +``` + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +*** + +### secondaryTicks + +#### Get Signature + +> **get** **secondaryTicks**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:564](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L564) + +Returns the number of the presented secondary ticks. +```typescript +const secondaryTicks = this.slider.secondaryTicks; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **secondaryTicks**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:575](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L575) + +Sets the number of secondary ticks. The property functions even when [labels](#labels) is enabled, +but all secondary ticks won't present any tick labels. +```typescript +this.slider.secondaryTicks = 5; +``` + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +*** + +### step + +#### Get Signature + +> **get** **step**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:243](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L243) + +Returns the incremental/decremental dragging step of the IgxSliderComponent. +```typescript +@ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let step = this.slider.step; +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **step**(`step`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L221) + +Sets the incremental/decremental step of the value when dragging the thumb. +The default step is 1, and step should not be less or equal than 0. +```html +<igx-slider #slider [(ngModel)]="task.percentCompleted" [step]="5"> +``` + +##### Parameters + +###### step + +`number` + +##### Returns + +`void` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxSliderType`](../type-aliases/IgxSliderType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L143) + +Gets the type of the `IgxSliderComponent`. +The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE. +```typescript +@ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let type = this.slider.type; +} + +##### Returns + +[`IgxSliderType`](../type-aliases/IgxSliderType.md) + +#### Set Signature + +> **set** **type**(`type`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L157) + +Sets the type of the `IgxSliderComponent`. +The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE. +```typescript +sliderType: IgxSliderType = IgxSliderType.RANGE; +``` +```html +<igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100"> +``` + +##### Parameters + +###### type + +[`IgxSliderType`](../type-aliases/IgxSliderType.md) + +##### Returns + +`void` + +*** + +### upperBound + +#### Get Signature + +> **get** **upperBound**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L451) + +Returns the upper boundary of settable values of the `IgxSliderComponent`. +If not set, will return `maxValue` +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let sliderUpBound = this.slider.upperBound; +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **upperBound**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:467](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L467) + +Sets the upper boundary of the `IgxSliderComponent`. +If not set is the same as max value. +```html +<igx-slider [step]="5" [upperBound]="20"> +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### upperLabel + +#### Get Signature + +> **get** **upperLabel**(): `string` \| `number` \| `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L881) + +Returns the value corresponding the upper label. +```typescript +@ViewChild("slider") +public slider: IgxSliderComponent; +let label = this.slider.upperLabel; +``` + +##### Returns + +`string` \| `number` \| `boolean` + +*** + +### upperValue + +#### Get Signature + +> **get** **upperValue**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L833) + +Returns the upper value of a RANGE `IgxSliderComponent`. +Returns `value` of a SLIDER `IgxSliderComponent` +```typescript + @ViewChild("slider2") +public slider: IgxSliderComponent; +public upperValue(event){ + let upperValue = this.slider.upperValue; +} +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **upperValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L852) + +Sets the upper value of a RANGE `IgxSliderComponent`. +```typescript + @ViewChild("slider2") +public slider: IgxSliderComponent; +public upperValue(event){ + this.slider.upperValue = value; +} +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `number` \| [`IRangeSliderValue`](../interfaces/IRangeSliderValue.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:490](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L490) + +Returns the slider value. If the slider is of type [IgxSliderType.SLIDER](../variables/IgxSliderType.md#slider) the returned value is number. +If the slider type is [IgxSliderType.RANGE](../variables/IgxSliderType.md#range). +The returned value represents an object of [lowerValue](#lowervalue) and [upperValue](#uppervalue). +```typescript +@ViewChild("slider2") +public slider: IgxSliderComponent; +public sliderValue(event){ + let sliderVal = this.slider.value; +} +``` + +##### Returns + +`number` \| [`IRangeSliderValue`](../interfaces/IRangeSliderValue.md) + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L519) + +Sets the slider value. +If the slider is of type [IgxSliderType.SLIDER](../variables/IgxSliderType.md#slider). +The argument is number. By default the [value](#valuevalue-1) gets the [lowerBound](#lowerbound). +If the slider type is [IgxSliderType.RANGE](../variables/IgxSliderType.md#range) the argument +represents an object of [lowerValue](#lowervalue) and [upperValue](#uppervalue) properties. +By default the object is associated with the [lowerBound](#lowerbound) and [upperBound](#upperbound) property values. +```typescript +rangeValue = { + lower: 30, + upper: 60 +}; +``` +```html +<igx-slider [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="56" [maxValue]="256"> +``` + +##### Parameters + +###### value + +`number` \| [`IRangeSliderValue`](../interfaces/IRangeSliderValue.md) + +##### Returns + +`void` + +## Methods + +### ngAfterContentInit() + +> **ngAfterContentInit**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:945](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L945) + +#### Returns + +`void` + +*** + +### onPointerDown() + +> `protected` **onPointerDown**(`$event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:1126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L1126) + +#### Parameters + +##### $event + +`PointerEvent` + +#### Returns + +`void` + +*** + +### onPointerUp() + +> `protected` **onPointerUp**(`$event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:1148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L1148) + +#### Parameters + +##### $event + +`PointerEvent` + +#### Returns + +`void` + +*** + +### setValue() + +> **setValue**(`value`, `triggerChange`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:1105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.component.ts#L1105) + +#### Parameters + +##### value + +`number` \| [`IRangeSliderValue`](../interfaces/IRangeSliderValue.md) + +##### triggerChange + +`boolean` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSnackbarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSnackbarComponent.md new file mode 100644 index 000000000..f7fb669bb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSnackbarComponent.md @@ -0,0 +1,593 @@ +# Class: IgxSnackbarComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L39) + +**Ignite UI for Angular Snackbar** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.html) + +The Ignite UI Snack Bar provides feedback about an operation with a single-line message, which can +include a link to an action such as Undo. + +Example: +```html +<button type="button" igxButton (click)="snackbar.show()">Send message</button> +<div> + <igx-snackbar #snackbar> + Message sent + </igx-snackbar> +</div> +``` + +## Extends + +- [`IgxNotificationsDirective`](IgxNotificationsDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSnackbarComponent**(): `IgxSnackbarComponent` + +#### Returns + +`IgxSnackbarComponent` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`constructor`](IgxNotificationsDirective.md#constructor) + +## Properties + +### \_overlayId + +> `protected` **\_overlayId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L193) + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`_overlayId`](IgxNotificationsDirective.md#_overlayid) + +*** + +### actionText? + +> `optional` **actionText?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L72) + +Sets/gets the `actionText` attribute. +```html +<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar> +``` + +*** + +### animationDone + +> **animationDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L100) + +An event that will be emitted when the snackbar animation ends. +Provides reference to the `ToggleViewEventArgs` interface as an argument. +```html +<igx-snackbar (animationDone) = "animationDone($event)"></igx-snackbar> +``` + +*** + +### animationStarted + +> **animationStarted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L91) + +An event that will be emitted when the snackbar animation starts. +Provides reference to the `ToggleViewEventArgs` interface as an argument. +```html +<igx-snackbar (animationStarted) = "animationStarted($event)"></igx-snackbar> +``` + +*** + +### appended + +> **appended**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L143) + +Emits an event after the toggle element is appended to the overlay container. + +```typescript +onAppended() { + alert("Content appended!"); +} +``` + +```html +<div + igxToggle + (appended)='onToggleAppended()'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`appended`](IgxNotificationsDirective.md#appended) + +*** + +### ariaLive + +> **ariaLive**: `string` = `'polite'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L15) + +Sets/gets the `aria-live` attribute. +If not set, `aria-live` will have value `"polite"`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`ariaLive`](IgxNotificationsDirective.md#arialive) + +*** + +### autoHide + +> **autoHide**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L22) + +Sets/gets whether the element will be hidden after the `displayTime` is over. +Default value is `true`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`autoHide`](IgxNotificationsDirective.md#autohide) + +*** + +### clicked + +> **clicked**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L82) + +An event that will be emitted when the action button is clicked. +Provides reference to the `IgxSnackbarComponent` as an argument. +```html +<igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar> +``` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L105) + +Emits an event after the toggle container is closed. + +```typescript +onToggleClosed(event) { + alert("Toggle closed!"); +} +``` + +```html +<div + igxToggle + (closed)='onToggleClosed($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`closed`](IgxNotificationsDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L124) + +Emits an event before the toggle container is closed. + +```typescript +onToggleClosing(event) { + alert("Toggle closing!"); +} +``` + +```html +<div + igxToggle + (closing)='onToggleClosing($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`closing`](IgxNotificationsDirective.md#closing) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L196) + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`destroy$`](IgxNotificationsDirective.md#destroy) + +*** + +### displayTime + +> **displayTime**: `number` = `4000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L30) + +Sets/gets the duration of time span (in milliseconds) which the element will be visible +after it is being shown. +Default value is `4000`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`displayTime`](IgxNotificationsDirective.md#displaytime) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L55) + +Sets/gets the `id` of the snackbar. +If not set, the `id` of the first snackbar component will be `"igx-snackbar-0"`; +```html +<igx-snackbar id = "Snackbar1"></igx-snackbar> +``` +```typescript +let snackbarId = this.snackbar.id; +``` + +#### Memberof + +IgxSnackbarComponent + +#### Overrides + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`id`](IgxNotificationsDirective.md#id) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L67) + +Emits an event after the toggle container is opened. + +```typescript +onToggleOpened(event) { + alert("Toggle opened!"); +} +``` + +```html +<div + igxToggle + (opened)='onToggleOpened($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`opened`](IgxNotificationsDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L86) + +Emits an event before the toggle container is opened. + +```typescript +onToggleOpening(event) { + alert("Toggle opening!"); +} +``` + +```html +<div + igxToggle + (opening)='onToggleOpening($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`opening`](IgxNotificationsDirective.md#opening) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L39) + +Gets/Sets the container used for the element. + +#### Remarks + +`outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`outlet`](IgxNotificationsDirective.md#outlet) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L46) + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`overlayService`](IgxNotificationsDirective.md#overlayservice) + +## Accessors + +### isVisible + +#### Get Signature + +> **get** **isVisible**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L46) + +Enables/Disables the visibility of the element. +If not set, the `isVisible` attribute will have value `false`. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isVisible**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L50) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`isVisible`](IgxNotificationsDirective.md#isvisible) + +*** + +### overlayId + +#### Get Signature + +> **get** **overlayId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L303) + +Returns the id of the overlay the content is rendered in. +```typescript +this.myToggle.overlayId; +``` + +##### Returns + +`string` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`overlayId`](IgxNotificationsDirective.md#overlayid) + +*** + +### positionSettings + +#### Get Signature + +> **get** **positionSettings**(): [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L110) + +Get the position and animation settings used by the snackbar. +```typescript +@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; +let currentPosition: PositionSettings = this.snackbar.positionSettings +``` + +##### Returns + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Set Signature + +> **set** **positionSettings**(`settings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L135) + +Set the position and animation settings used by the snackbar. +```html +<igx-snackbar [positionSettings]="newPositionSettings"></igx-snackbar> +``` +```typescript +import { slideInTop, slideOutBottom } from 'igniteui-angular'; +... +@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; + public newPositionSettings: PositionSettings = { + openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}), + closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}), + horizontalDirection: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Middle, + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Middle, + minSize: { height: 100, width: 100 } + }; +this.snackbar.positionSettings = this.newPositionSettings; +``` + +##### Parameters + +###### settings + +[`PositionSettings`](../interfaces/PositionSettings.md) + +##### Returns + +`void` + +## Methods + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L104) + +Hides the element. + +#### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`close`](IgxNotificationsDirective.md#close) + +*** + +### open() + +> **open**(`message?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L154) + +Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`. +```typescript +this.snackbar.open(); +``` + +#### Parameters + +##### message? + +`string` + +#### Returns + +`void` + +#### Overrides + +`IgxNotificationsDirective.open` + +*** + +### reposition() + +> **reposition**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L313) + +Repositions the toggle. +```typescript +this.myToggle.reposition(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`reposition`](IgxNotificationsDirective.md#reposition) + +*** + +### setOffset() + +> **setOffset**(`deltaX`, `deltaY`, `offsetMode?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L321) + +Offsets the content along the corresponding axis by the provided amount with optional +offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set + +#### Parameters + +##### deltaX + +`number` + +##### deltaY + +`number` + +##### offsetMode? + +[`OffsetMode`](../enumerations/OffsetMode.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`setOffset`](IgxNotificationsDirective.md#setoffset) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts#L171) + +Opens or closes the snackbar, depending on its current state. + +```typescript +this.snackbar.toggle(); +``` + +#### Returns + +`void` + +#### Overrides + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`toggle`](IgxNotificationsDirective.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSorting.md new file mode 100644 index 000000000..e690d4b45 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSorting.md @@ -0,0 +1,62 @@ +# Class: IgxSorting + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L81) + +Represents a class implementing the IGridSortingStrategy interface. +It provides sorting functionality for grid data based on sorting expressions. + +## Extended by + +- [`IgxGrouping`](IgxGrouping.md) +- [`IgxDataRecordSorting`](IgxDataRecordSorting.md) +- [`IgxGroupedTreeGridSorting`](IgxGroupedTreeGridSorting.md) + +## Implements + +- [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +## Constructors + +### Constructor + +> **new IgxSorting**(): `IgxSorting` + +#### Returns + +`IgxSorting` + +## Methods + +### sort() + +> **sort**(`data`, `expressions`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L90) + +Sorts the provided data based on the given sorting expressions. +`data`: The array of data to be sorted. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any`[] + +#### Implementation of + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md).[`sort`](../interfaces/IGridSortingStrategy.md#sort) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSplitterComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSplitterComponent.md new file mode 100644 index 000000000..bf880e679 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSplitterComponent.md @@ -0,0 +1,205 @@ +# Class: IgxSplitterComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L50) + +Provides a framework for a simple layout, splitting the view horizontally or vertically +into multiple smaller resizable and collapsible areas. + +## Igx Module + +IgxSplitterModule + +## Igx Parent + +Layouts + +## Igx Theme + +igx-splitter-theme + +## Igx Keywords + +splitter panes layout + +## Igx Group + +presentation + +## Example + +```html +<igx-splitter> + <igx-splitter-pane> + ... + </igx-splitter-pane> + <igx-splitter-pane> + ... + </igx-splitter-pane> +</igx-splitter> +``` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSplitterComponent**(): `IgxSplitterComponent` + +#### Returns + +`IgxSplitterComponent` + +## Properties + +### document + +> **document**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L51) + +*** + +### nonCollapsible + +> **nonCollapsible**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L190) + +Sets the visibility of the handle and expanders in the splitter bar. +False by default + +#### Example + +```html +<igx-splitter [nonCollapsible]='true'> +</igx-splitter> +``` + +*** + +### panes + +> **panes**: `QueryList`\<[`IgxSplitterPaneComponent`](IgxSplitterPaneComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L64) + +Gets the list of splitter panes. + +#### Example + +```typescript +const panes = this.splitter.panes; +``` + +*** + +### resizeEnd + +> **resizeEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L134) + +Event fired when resizing of panes ends. + +#### Example + +```html +<igx-splitter (resizeEnd)='resizeEnd($event)'> + <igx-splitter-pane>...</igx-splitter-pane> +</igx-splitter> +``` + +*** + +### resizeStart + +> **resizeStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L107) + +Event fired when resizing of panes starts. + +#### Example + +```html +<igx-splitter (resizeStart)='resizeStart($event)'> + <igx-splitter-pane>...</igx-splitter-pane> +</igx-splitter> +``` + +*** + +### resizing + +> **resizing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L120) + +Event fired when resizing of panes is in progress. + +#### Example + +```html +<igx-splitter (resizing)='resizing($event)'> + <igx-splitter-pane>...</igx-splitter-pane> +</igx-splitter> +``` + +## Accessors + +### type + +#### Get Signature + +> **get** **type**(): [`SplitterType`](../enumerations/SplitterType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L170) + +Gets/Sets the splitter orientation. + +##### Example + +```html +<igx-splitter [type]="type">...</igx-splitter> +``` + +##### Returns + +[`SplitterType`](../enumerations/SplitterType.md) + +#### Set Signature + +> **set** **type**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L173) + +##### Parameters + +###### value + +[`SplitterType`](../enumerations/SplitterType.md) + +##### Returns + +`void` + +## Methods + +### onMoveEnd() + +> **onMoveEnd**(`delta`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L245) + +#### Parameters + +##### delta + +`number` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSplitterPaneComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSplitterPaneComponent.md new file mode 100644 index 000000000..d8c9fc0b0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSplitterPaneComponent.md @@ -0,0 +1,294 @@ +# Class: IgxSplitterPaneComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L22) + +Represents individual resizable/collapsible panes. + +## Igx Module + +IgxSplitterModule + +## Igx Parent + +IgxSplitterComponent + +## Igx Keywords + +pane + +## Igx Group + +presentation + +## Remarks + +Users can control the resize behavior via the min and max size properties. + +## Constructors + +### Constructor + +> **new IgxSplitterPaneComponent**(): `IgxSplitterPaneComponent` + +#### Returns + +`IgxSplitterPaneComponent` + +## Properties + +### collapsedChange + +> **collapsedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L104) + +Event fired when collapsed state of pane is changed. + +#### Example + +```html +<igx-splitter> + <igx-splitter-pane (collapsedChange)='paneCollapsedChange($event)'>...</igx-splitter-pane> +</igx-splitter> +``` + +*** + +### resizable + +> **resizable**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L91) + +Gets/Sets whether pane is resizable. + +#### Example + +```html +<igx-splitter> + <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane> +</igx-splitter> +``` + +#### Remarks + +If pane is not resizable its related splitter bar cannot be dragged. + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L228) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **collapsed**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L215) + +Gets/Sets whether current pane is collapsed. + +##### Example + +```typescript +const isCollapsed = pane.collapsed; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### dragSize + +#### Set Signature + +> **set** **dragSize**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L181) + +##### Parameters + +###### val + +`any` + +##### Returns + +`void` + +*** + +### maxSize + +#### Get Signature + +> **get** **maxSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L68) + +Gets/Set the maximum allowed size of the current pane. + +##### Example + +```html +<igx-splitter> + <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane> +</igx-splitter> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **maxSize**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L71) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### minSize + +#### Get Signature + +> **get** **minSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L47) + +Gets/Sets the minimum allowed size of the current pane. + +##### Example + +```html +<igx-splitter> + <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane> +</igx-splitter> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **minSize**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L50) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### order + +#### Set Signature + +> **set** **order**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L111) + +##### Parameters + +###### val + +`any` + +##### Returns + +`void` + +*** + +### size + +#### Get Signature + +> **get** **size**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L163) + +Gets/Sets the size of the current pane. + * + +##### Example + +```html +<igx-splitter> + <igx-splitter-pane [size]='size'>...</igx-splitter-pane> +</igx-splitter> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **size**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L167) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## Methods + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:244](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts#L244) + +Toggles the collapsed state of the pane. + +#### Returns + +`void` + +#### Example + +```typescript +pane.toggle(); +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepActiveIndicatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepActiveIndicatorDirective.md new file mode 100644 index 000000000..f870c6617 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepActiveIndicatorDirective.md @@ -0,0 +1,41 @@ +# Class: IgxStepActiveIndicatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L24) + +Allows a custom element to be added as an active step indicator. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <ng-template igxStepActiveIndicator> + <igx-icon>edit</igx-icon> + </ng-template> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepActiveIndicatorDirective**(): `IgxStepActiveIndicatorDirective` + +#### Returns + +`IgxStepActiveIndicatorDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepCompletedIndicatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepCompletedIndicatorDirective.md new file mode 100644 index 000000000..7ca3aaf63 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepCompletedIndicatorDirective.md @@ -0,0 +1,41 @@ +# Class: IgxStepCompletedIndicatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L45) + +Allows a custom element to be added as a complete step indicator. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <ng-template igxStepCompletedIndicator> + <igx-icon>check</igx-icon> + </ng-template> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepCompletedIndicatorDirective**(): `IgxStepCompletedIndicatorDirective` + +#### Returns + +`IgxStepCompletedIndicatorDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepComponent.md new file mode 100644 index 000000000..695a0a952 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepComponent.md @@ -0,0 +1,436 @@ +# Class: IgxStepComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L41) + +The IgxStepComponent is used within the `igx-stepper` element and it holds the content of each step. +It also supports custom indicators, title and subtitle. + +## Igx Module + +IgxStepperModule + +## Igx Keywords + +step + +## Example + +```html + <igx-stepper> + ... + <igx-step [active]="true" [completed]="true"> + ... + </igx-step> + ... + </igx-stepper> +``` + +## Implements + +- `IgxStep` +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxStepComponent**(): `IgxStepComponent` + +#### Returns + +`IgxStepComponent` + +#### Inherited from + +`ToggleAnimationPlayer.constructor` + +## Properties + +### \_animationSettings + +> `protected` **\_animationSettings**: `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L63) + +#### Implementation of + +`IgxStep._animationSettings` + +#### Inherited from + +`ToggleAnimationPlayer._animationSettings` + +*** + +### activeChange + +> **activeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L238) + +Emitted when the step's `active` property changes. Can be used for two-way binding. + +```html +<igx-step [(active)]="this.isActive"> +</igx-step> +``` + +```typescript +const step: IgxStepComponent = this.stepper.step[0]; +step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e)) +``` + +#### Implementation of + +`IgxStep.activeChange` + +*** + +### animationService + +> `protected` **animationService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L37) + +#### Implementation of + +[`IgxTreeNodeComponent`](IgxTreeNodeComponent.md).[`animationService`](IgxTreeNodeComponent.md#animationservice) + +#### Inherited from + +[`IgxTreeNodeComponent`](IgxTreeNodeComponent.md).[`animationService`](IgxTreeNodeComponent.md#animationservice) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L43) + +#### Implementation of + +`IgxStep.cdr` + +*** + +### completed + +> **completed**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L112) + +Get/Set whether the step is completed. + +#### Remarks + +When set to `true` the following separator is styled `solid`. + +```html +<igx-stepper> +... + <igx-step [completed]="true"></igx-step> +... +</igx-stepper> +``` + +```typescript +this.stepper.steps[1].completed = true; +``` + +#### Implementation of + +`IgxStep.completed` + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L61) + +#### Implementation of + +`IgxStep.destroy$` + +#### Inherited from + +`ToggleAnimationPlayer.destroy$` + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L63) + +Get/Set the `id` of the step component. +Default value is `"igx-step-0"`; +```html +<igx-step id="my-first-step"></igx-step> +``` +```typescript +const stepId = this.step.id; +``` + +#### Implementation of + +`IgxStep.id` + +*** + +### optional + +> **optional**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L154) + +Get/Set whether the step is optional. + +#### Remarks + +Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e. +if optional step is invalid the user could still move to the next step. + +```html +<igx-step [optional]="true"></igx-step> +``` +```typescript +this.stepper.steps[1].optional = true; +``` + +#### Implementation of + +`IgxStep.optional` + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L45) + +*** + +### players + +> `protected` **players**: `Map`\<`string`, [`AnimationPlayer`](../interfaces/AnimationPlayer.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L62) + +#### Implementation of + +`IgxStep.players` + +#### Inherited from + +`ToggleAnimationPlayer.players` + +*** + +### renderer + +> **renderer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L44) + +*** + +### stepper + +> **stepper**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L42) + +*** + +### stepperService + +> `protected` **stepperService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L46) + +## Accessors + +### active + +#### Get Signature + +> **get** **active**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L179) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **active**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L171) + +Get/Set the active state of the step + +```html +<igx-step [active]="true"></igx-step> +``` + +```typescript +this.stepper.steps[1].active = true; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +`IgxStep.active` + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L88) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L81) + +Get/Set whether the step is interactable. + +```html +<igx-stepper> +... + <igx-step [disabled]="true"></igx-step> +... +</igx-stepper> +``` + +```typescript +this.stepper.steps[1].disabled = true; +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +`IgxStep.disabled` + +*** + +### index + +#### Get Signature + +> **get** **index**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L268) + +Get the step index inside of the stepper. + +```typescript +const step = this.stepper.steps[1]; +const stepIndex: number = step.index; +``` + +##### Returns + +`number` + +#### Implementation of + +`IgxStep.index` + +*** + +### isValid + +#### Get Signature + +> **get** **isValid**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L128) + +Get/Set whether the step is valid. +```html +<igx-step [isValid]="form.form.valid"> + ... + <div igxStepContent> + <form #form="ngForm"> + ... + </form> + </div> +</igx-step> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isValid**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L132) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +`IgxStep.isValid` + +*** + +### tabIndex + +#### Get Signature + +> **get** **tabIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts#L190) + +##### Returns + +`number` + +#### Implementation of + +`IgxStep.tabIndex` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepContentDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepContentDirective.md new file mode 100644 index 000000000..583521a09 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepContentDirective.md @@ -0,0 +1,117 @@ +# Class: IgxStepContentDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L156) + +Allows a custom element to be added as a step content. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <igx-step> + <div igxStepContent>...</div> + </igx-step> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepContentDirective**(): `IgxStepContentDirective` + +#### Returns + +`IgxStepContentDirective` + +## Properties + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L166) + +*** + +### elementRef + +> **elementRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L159) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L178) + +*** + +### role + +> **role**: `string` = `'tabpanel'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L169) + +## Accessors + +### stepId + +#### Get Signature + +> **get** **stepId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L172) + +##### Returns + +`string` + +*** + +### tabIndex + +#### Get Signature + +> **get** **tabIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L182) + +##### Returns + +`number` + +#### Set Signature + +> **set** **tabIndex**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L190) + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepIndicatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepIndicatorDirective.md new file mode 100644 index 000000000..55972d8c2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepIndicatorDirective.md @@ -0,0 +1,41 @@ +# Class: IgxStepIndicatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L87) + +Allows a custom element to be added as a step indicator. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <igx-step> + <igx-icon igxStepIndicator>home</igx-icon> + </igx-step> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepIndicatorDirective**(): `IgxStepIndicatorDirective` + +#### Returns + +`IgxStepIndicatorDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepInvalidIndicatorDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepInvalidIndicatorDirective.md new file mode 100644 index 000000000..5e6588c58 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepInvalidIndicatorDirective.md @@ -0,0 +1,41 @@ +# Class: IgxStepInvalidIndicatorDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L66) + +Allows a custom element to be added as an invalid step indicator. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <ng-template igxStepInvalidIndicator> + <igx-icon>error</igx-icon> + </ng-template> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepInvalidIndicatorDirective**(): `IgxStepInvalidIndicatorDirective` + +#### Returns + +`IgxStepInvalidIndicatorDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepSubtitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepSubtitleDirective.md new file mode 100644 index 000000000..bf593c319 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepSubtitleDirective.md @@ -0,0 +1,49 @@ +# Class: IgxStepSubtitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L132) + +Allows a custom element to be added as a step subtitle. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <igx-step> + <p igxStepSubtitle>Home Subtitle</p> + </igx-step> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepSubtitleDirective**(): `IgxStepSubtitleDirective` + +#### Returns + +`IgxStepSubtitleDirective` + +## Properties + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L134) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepTitleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepTitleDirective.md new file mode 100644 index 000000000..cb802e4e3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepTitleDirective.md @@ -0,0 +1,49 @@ +# Class: IgxStepTitleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L108) + +Allows a custom element to be added as a step title. + +## Igx Module + +IgxStepperModule + +## Igx Theme + +igx-stepper-theme + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Example + +```ts +<igx-stepper> + <igx-step> + <p igxStepTitle>Home</p> + </igx-step> +</igx-stepper> +``` + +## Constructors + +### Constructor + +> **new IgxStepTitleDirective**(): `IgxStepTitleDirective` + +#### Returns + +`IgxStepTitleDirective` + +## Properties + +### defaultClass + +> **defaultClass**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts#L110) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepperComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepperComponent.md new file mode 100644 index 000000000..f75023c63 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStepperComponent.md @@ -0,0 +1,572 @@ +# Class: IgxStepperComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L72) + +IgxStepper provides a wizard-like workflow by dividing content into logical steps. + +## Igx Module + +IgxStepperModule + +## Igx Keywords + +stepper + +## Igx Group + +Layouts + +## Remarks + +The Ignite UI for Angular Stepper component allows the user to navigate between multiple steps. +It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step. +The component offers keyboard navigation and API to control the active step. + +## Example + +```html +<igx-stepper> + <igx-step [active]="true"> + <igx-icon igxStepIndicator>home</igx-icon> + <p igxStepTitle>Home</p> + <div igxStepContent> + ... + </div> + </igx-step> + <igx-step [optional]="true"> + <div igxStepContent> + ... + </div> + </igx-step> + <igx-step> + <div igxStepContent> + ... + </div> + </igx-step> +</igx-stepper> +``` + +## Implements + +- `IgxStepper` +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxStepperComponent**(): `IgxStepperComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:331](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L331) + +#### Returns + +`IgxStepperComponent` + +#### Overrides + +`IgxCarouselComponentBase.constructor` + +## Properties + +### activeStepChanged + +> **activeStepChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L284) + +Emitted when the active step is changed. + +#### Example + +``` +<igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper> +``` + +#### Implementation of + +`IgxStepper.activeStepChanged` + +*** + +### activeStepChanging + +> **activeStepChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L273) + +Emitted when the stepper's active step is changing. + +```html +<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)"> +</igx-stepper> +``` + +```typescript +public handleActiveStepChanging(event: IStepChangingEventArgs) { + if (event.newIndex < event.oldIndex) { + event.cancel = true; + } +} +``` + +#### Implementation of + +`IgxStepper.activeStepChanging` + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L25) + +#### Implementation of + +`IgxStepper.cdr` + +#### Inherited from + +`IgxCarouselComponentBase.cdr` + +*** + +### contentTop + +> **contentTop**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L226) + +Get/Set whether the content is displayed above the steps. + +#### Remarks + +Default value is `false` and the content is below the steps. + +```typescript +this.stepper.contentTop = true; +``` + +#### Implementation of + +`IgxStepper.contentTop` + +*** + +### stepType + +> **stepType**: [`IgxStepType`](../type-aliases/IgxStepType.md) = `IgxStepType.Full` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L213) + +Get/Set the type of the steps. + +```typescript +this.stepper.stepType = IgxStepType.Indicator; +``` + +#### Implementation of + +`IgxStepper.stepType` + +*** + +### titlePosition + +> **titlePosition**: [`IgxStepperTitlePosition`](../type-aliases/IgxStepperTitlePosition.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:240](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L240) + +Get/Set the position of the steps title. + +#### Remarks + +The default value when the stepper is horizontally orientated is `bottom`. +In vertical layout the default title position is `end`. + +```typescript +this.stepper.titlePosition = IgxStepperTitlePosition.Top; +``` + +#### Implementation of + +`IgxStepper.titlePosition` + +## Accessors + +### animationDuration + +#### Get Signature + +> **get** **animationDuration**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L141) + +Get/Set the animation duration. +```html +<igx-stepper [animationDuration]="500"> +<igx-stepper> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **animationDuration**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L145) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxStepper.animationDuration` + +*** + +### horizontalAnimationType + +#### Get Signature + +> **get** **horizontalAnimationType**(): [`HorizontalAnimationType`](../type-aliases/HorizontalAnimationType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L123) + +Get/Set the animation type of the stepper when the orientation direction is horizontal. + +##### Remarks + +Default value is `grow`. Other possible values are `fade` and `none`. + +```html +<igx-stepper animationType="none"> +<igx-stepper> +``` + +##### Returns + +[`HorizontalAnimationType`](../type-aliases/HorizontalAnimationType.md) + +#### Set Signature + +> **set** **horizontalAnimationType**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L127) + +##### Parameters + +###### value + +[`HorizontalAnimationType`](../type-aliases/HorizontalAnimationType.md) + +##### Returns + +`void` + +#### Implementation of + +`IgxStepper.horizontalAnimationType` + +*** + +### linear + +#### Get Signature + +> **get** **linear**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L164) + +Get/Set whether the stepper is linear. + +##### Remarks + +If the stepper is in linear mode and if the active step is valid only then the user is able to move forward. + +```html +<igx-stepper [linear]="true"></igx-stepper> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **linear**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L168) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +`IgxStepper.linear` + +*** + +### orientation + +#### Get Signature + +> **get** **orientation**(): [`IgxStepperOrientation`](../type-aliases/IgxStepperOrientation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L189) + +Get/Set the stepper orientation. + +```typescript +this.stepper.orientation = IgxStepperOrientation.Vertical; +``` + +##### Returns + +[`IgxStepperOrientation`](../type-aliases/IgxStepperOrientation.md) + +#### Set Signature + +> **set** **orientation**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L193) + +##### Parameters + +###### value + +[`IgxStepperOrientation`](../type-aliases/IgxStepperOrientation.md) + +##### Returns + +`void` + +#### Implementation of + +`IgxStepper.orientation` + +*** + +### steps + +#### Get Signature + +> **get** **steps**(): [`IgxStepComponent`](IgxStepComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:309](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L309) + +Get all steps. + +```typescript +const steps: IgxStepComponent[] = this.stepper.steps; +``` + +##### Returns + +[`IgxStepComponent`](IgxStepComponent.md)[] + +#### Implementation of + +`IgxStepper.steps` + +*** + +### verticalAnimationType + +#### Get Signature + +> **get** **verticalAnimationType**(): [`VerticalAnimationType`](../type-aliases/VerticalAnimationType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L89) + +Get/Set the animation type of the stepper when the orientation direction is vertical. + +##### Remarks + +Default value is `grow`. Other possible values are `fade` and `none`. + +```html +<igx-stepper verticalAnimationType="none"> +<igx-stepper> +``` + +##### Returns + +[`VerticalAnimationType`](../type-aliases/VerticalAnimationType.md) + +#### Set Signature + +> **set** **verticalAnimationType**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L93) + +##### Parameters + +###### value + +[`VerticalAnimationType`](../type-aliases/VerticalAnimationType.md) + +##### Returns + +`void` + +#### Implementation of + +`IgxStepper.verticalAnimationType` + +## Methods + +### getCurrentElement() + +> `protected` **getCurrentElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L452) + +#### Returns + +`HTMLElement` + +#### Implementation of + +`IgxStepper.getCurrentElement` + +#### Overrides + +`IgxCarouselComponentBase.getCurrentElement` + +*** + +### getPreviousElement() + +> `protected` **getPreviousElement**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:448](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L448) + +#### Returns + +`HTMLElement` + +#### Implementation of + +`IgxStepper.getPreviousElement` + +#### Overrides + +`IgxCarouselComponentBase.getPreviousElement` + +*** + +### navigateTo() + +> **navigateTo**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:394](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L394) + +Activates the step at a given index. + +```typescript +this.stepper.navigateTo(1); +``` + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Implementation of + +`IgxStepper.navigateTo` + +*** + +### next() + +> **next**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L409) + +Activates the next enabled step. + +```typescript +this.stepper.next(); +``` + +#### Returns + +`void` + +#### Implementation of + +`IgxStepper.next` + +*** + +### prev() + +> **prev**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L420) + +Activates the previous enabled step. + +```typescript +this.stepper.prev(); +``` + +#### Returns + +`void` + +#### Implementation of + +`IgxStepper.prev` + +*** + +### reset() + +> **reset**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts#L433) + +Resets the stepper to its initial state i.e. activates the first step. + +#### Returns + +`void` + +#### Remarks + +The steps' content will not be automatically reset. +```typescript +this.stepper.reset(); +``` + +#### Implementation of + +`IgxStepper.reset` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStringFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStringFilteringOperand.md new file mode 100644 index 000000000..b5c35fe2c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStringFilteringOperand.md @@ -0,0 +1,191 @@ +# Class: IgxStringFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:812](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L812) + +Provides filtering operations for strings + +## Export + +## Extends + +- [`IgxFilteringOperand`](IgxFilteringOperand.md) + +## Constructors + +### Constructor + +> `protected` **new IgxStringFilteringOperand**(): `IgxStringFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L813) + +#### Returns + +`IgxStringFilteringOperand` + +#### Overrides + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`constructor`](IgxFilteringOperand.md#constructor) + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`operations`](IgxFilteringOperand.md#operations) + +*** + +### \_instance + +> `protected` `static` **\_instance**: [`IgxFilteringOperand`](IgxFilteringOperand.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`_instance`](IgxFilteringOperand.md#_instance) + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`append`](IgxFilteringOperand.md#append) + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`condition`](IgxFilteringOperand.md#condition) + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`conditionList`](IgxFilteringOperand.md#conditionlist) + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L80) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`findValueInSet`](IgxFilteringOperand.md#findvalueinset) + +*** + +### applyIgnoreCase() + +> `static` **applyIgnoreCase**(`a`, `ignoreCase`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:889](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L889) + +Applies case sensitivity on strings if provided + +#### Parameters + +##### a + +`string` + +##### ignoreCase + +`boolean` + +#### Returns + +`string` + +#### Memberof + +IgxStringFilteringOperand + +*** + +### instance() + +> `static` **instance**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Inherited from + +[`IgxFilteringOperand`](IgxFilteringOperand.md).[`instance`](IgxFilteringOperand.md#instance) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStringReplacePipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStringReplacePipe.md new file mode 100644 index 000000000..4177d0955 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxStringReplacePipe.md @@ -0,0 +1,43 @@ +# Class: IgxStringReplacePipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L346) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxStringReplacePipe**(): `IgxStringReplacePipe` + +#### Returns + +`IgxStringReplacePipe` + +## Methods + +### transform() + +> **transform**(`value`, `search`, `replacement`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:348](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L348) + +#### Parameters + +##### value + +`string` + +##### search + +`string` \| `RegExp` + +##### replacement + +`string` + +#### Returns + +`string` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryDataPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryDataPipe.md new file mode 100644 index 000000000..5771d12ed --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryDataPipe.md @@ -0,0 +1,39 @@ +# Class: IgxSummaryDataPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts#L8) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSummaryDataPipe**(): `IgxSummaryDataPipe` + +#### Returns + +`IgxSummaryDataPipe` + +## Methods + +### transform() + +> **transform**(`id`, `trigger?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts#L13) + +#### Parameters + +##### id + +`string` + +##### trigger? + +`number` = `0` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryFormatterPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryFormatterPipe.md new file mode 100644 index 000000000..9f83a30d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryFormatterPipe.md @@ -0,0 +1,43 @@ +# Class: IgxSummaryFormatterPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L389) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSummaryFormatterPipe**(): `IgxSummaryFormatterPipe` + +#### Returns + +`IgxSummaryFormatterPipe` + +## Methods + +### transform() + +> **transform**(`summaryResult`, `summaryOperand`, `summaryFormatter`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pipes.ts#L391) + +#### Parameters + +##### summaryResult + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md) + +##### summaryOperand + +[`IgxSummaryOperand`](IgxSummaryOperand.md) + +##### summaryFormatter + +(`s`, `o`) => `any` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryOperand.md new file mode 100644 index 000000000..872a03af3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryOperand.md @@ -0,0 +1,108 @@ +# Class: IgxSummaryOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L8) + +## Extended by + +- [`IgxNumberSummaryOperand`](IgxNumberSummaryOperand.md) +- [`IgxDateSummaryOperand`](IgxDateSummaryOperand.md) +- [`IgxTimeSummaryOperand`](IgxTimeSummaryOperand.md) + +## Constructors + +### Constructor + +> **new IgxSummaryOperand**(): `IgxSummaryOperand` + +#### Returns + +`IgxSummaryOperand` + +## Methods + +### operate() + +> **operate**(`data?`, `_allData?`, `_fieldName?`, `_groupRecord?`): [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L51) + +Executes the static `count` method and returns `IgxSummaryResult[]`. +```typescript +interface IgxSummaryResult { + key: string; + label: string; + summaryResult: any; +} +``` +Can be overridden in the inherited classes to provide customization for the `summary`. +```typescript +class CustomSummary extends IgxSummaryOperand { + constructor() { + super(); + } + public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] { + const result = []; + result.push({ + key: "test", + label: "Test", + summaryResult: IgxSummaryOperand.count(data) + }); + return result; + } +} +this.grid.getColumnByName('ColumnName').summaries = CustomSummary; +``` + +#### Parameters + +##### data? + +`any`[] = `[]` + +##### \_allData? + +`any`[] = `[]` + +##### \_fieldName? + +`string` + +##### \_groupRecord? + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +#### Returns + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +#### Memberof + +IgxSummaryOperand + +*** + +### count() + +> `static` **count**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L18) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxSummaryOperand diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryRow.md new file mode 100644 index 000000000..cd51fbf16 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryRow.md @@ -0,0 +1,95 @@ +# Class: IgxSummaryRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L694) + +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +## Implements + +- [`RowType`](../interfaces/RowType.md) + +## Properties + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L703) + +The grid that contains the row. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`grid`](../interfaces/RowType.md#grid) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L698) + +Returns the row index. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`index`](../interfaces/RowType.md#index) + +*** + +### isSummaryRow + +> **isSummaryRow**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L708) + +Returns always true, because this is in instance of an IgxGroupByRow. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`isSummaryRow`](../interfaces/RowType.md#issummaryrow) + +## Accessors + +### summaries + +#### Get Signature + +> **get** **summaries**(): `Map`\<`string`, [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L713) + +The IGroupByRecord object, representing the group record, if the row is a GroupByRow. + +##### Returns + +`Map`\<`string`, [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[]\> + +Optional +A map of column field names to the summary results for the row. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`summaries`](../interfaces/RowType.md#summaries) + +*** + +### viewIndex + +#### Get Signature + +> **get** **viewIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:720](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L720) + +Returns the view index calculated per the grid page. + +##### Returns + +`number` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`viewIndex`](../interfaces/RowType.md#viewindex) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryRowComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryRowComponent.md new file mode 100644 index 000000000..f41e21bbb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryRowComponent.md @@ -0,0 +1,223 @@ +# Class: IgxSummaryRowComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L29) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSummaryRowComponent**(): `IgxSummaryRowComponent` + +#### Returns + +`IgxSummaryRowComponent` + +## Properties + +### \_summaryCells + +> **\_summaryCells**: `QueryList`\<`IgxSummaryCellComponent`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L57) + +*** + +### cdr + +> **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L32) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L31) + +*** + +### firstCellIndentation + +> **firstCellIndentation**: `number` = `-1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L45) + +*** + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L30) + +*** + +### gridID + +> **gridID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L39) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L42) + +*** + +### summaries + +> **summaries**: `Map`\<`string`, [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L36) + +*** + +### trackPinnedColumn + +> `protected` **trackPinnedColumn**: `object` = `trackByIdentity` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L139) + +state persistence switching all pinned columns resets collection + +## Accessors + +### dataRowIndex + +#### Get Signature + +> **get** **dataRowIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L48) + +##### Returns + +`number` + +*** + +### minHeight + +#### Get Signature + +> **get** **minHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L52) + +##### Returns + +`number` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L80) + +##### Returns + +`any` + +*** + +### summaryCells + +#### Get Signature + +> **get** **summaryCells**(): `QueryList`\<`IgxSummaryCellComponent`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L59) + +##### Returns + +`QueryList`\<`IgxSummaryCellComponent`\> + +#### Set Signature + +> **set** **summaryCells**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L68) + +##### Parameters + +###### cells + +`QueryList`\<`IgxSummaryCellComponent`\> + +##### Returns + +`void` + +## Methods + +### getColumnSummaries() + +> **getColumnSummaries**(`columnName`): [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L84) + +#### Parameters + +##### columnName + +`string` + +#### Returns + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +*** + +### getContext() + +> **getContext**(`row`, `cols`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L131) + +#### Parameters + +##### row + +`any` + +##### cols + +`any` + +#### Returns + +`object` + +##### $implicit + +> **$implicit**: `any` = `row` + +##### columns + +> **columns**: `any` = `cols` + +*** + +### ngDoCheck() + +> **ngDoCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts#L76) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryTemplateDirective.md new file mode 100644 index 000000000..2e2c75497 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSummaryTemplateDirective.md @@ -0,0 +1,43 @@ +# Class: IgxSummaryTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L103) + +## Constructors + +### Constructor + +> **new IgxSummaryTemplateDirective**(): `IgxSummaryTemplateDirective` + +#### Returns + +`IgxSummaryTemplateDirective` + +## Properties + +### template + +> **template**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L104) + +## Methods + +### ngTemplateContextGuard() + +> `static` **ngTemplateContextGuard**(`_directive`, `context`): `context is IgxSummaryTemplateContext` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts#L107) + +#### Parameters + +##### \_directive + +`IgxSummaryTemplateDirective` + +##### context + +`unknown` + +#### Returns + +`context is IgxSummaryTemplateContext` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSwitchComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSwitchComponent.md new file mode 100644 index 000000000..291d466d1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxSwitchComponent.md @@ -0,0 +1,616 @@ +# Class: IgxSwitchComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L44) + +The Switch component is a binary choice selection component. + +## Igx Module + +IgxSwitchModule + +## Igx Theme + +igx-switch-theme, igx-tooltip-theme + +## Igx Keywords + +switch, states, tooltip + +## Igx Group + +Data Entry & Display + +## Remarks + +The Ignite UI Switch lets the user toggle between on/off or true/false states. + +## Example + +```html +<igx-switch [checked]="true"> + Simple switch +</igx-switch> +``` + +## Extends + +- [`CheckboxBaseDirective`](CheckboxBaseDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxSwitchComponent**(): `IgxSwitchComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:237](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L237) + +#### Returns + +`IgxSwitchComponent` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`constructor`](CheckboxBaseDirective.md#constructor) + +## Properties + +### ariaLabel + +> **ariaLabel**: `string` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L235) + +Sets/gets the value of the `aria-label` attribute. + +#### Example + +```html +<igx-checkbox aria-label="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabel = this.checkbox.ariaLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ariaLabel`](CheckboxBaseDirective.md#arialabel) + +*** + +### ariaLabelledBy + +> **ariaLabelledBy**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L221) + +Sets/gets the `aria-labelledby` attribute. +If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute. + +#### Example + +```html +<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox> +``` +```typescript +let ariaLabelledBy = this.checkbox.ariaLabelledBy; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ariaLabelledBy`](CheckboxBaseDirective.md#arialabelledby) + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L27) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`cdr`](CheckboxBaseDirective.md#cdr) + +*** + +### change + +> `readonly` **change**: `EventEmitter`\<[`IChangeCheckboxEventArgs`](../interfaces/IChangeCheckboxEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L36) + +An event that is emitted after the checkbox state is changed. +Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments. + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`change`](CheckboxBaseDirective.md#change) + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-switch'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L56) + +Returns the class of the switch component. + +#### Example + +```typescript +let switchClass = this.switch.cssClass; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`cssClass`](CheckboxBaseDirective.md#cssclass) + +*** + +### destroyRef + +> `protected` **destroyRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L335) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`destroyRef`](CheckboxBaseDirective.md#destroyref) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L85) + +Sets/gets the `disabled` attribute. +Default value is `false`. + +#### Example + +```html +<igx-switch disabled><igx-switch> +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`disabled`](CheckboxBaseDirective.md#disabled) + +*** + +### disableRipple + +> **disableRipple**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L206) + +Enables/Disables the ripple effect. +If not set, `disableRipple` will have value `false`. + +#### Example + +```html +<igx-checkbox [disableRipple]="true"></igx-checkbox> +``` +```typescript +let isRippleDisabled = this.checkbox.desableRipple; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`disableRipple`](CheckboxBaseDirective.md#disableripple) + +*** + +### focused + +> **focused**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L113) + +Sets/gets whether the switch component is on focus. +Default value is `false`. + +#### Example + +```typescript +this.switch.focused = true; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`focused`](CheckboxBaseDirective.md#focused) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L123) + +Sets/gets the `id` of the checkbox component. +If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`. + +#### Example + +```html +<igx-checkbox id="my-first-checkbox"></igx-checkbox> +``` +```typescript +let checkboxId = this.checkbox.id; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`id`](CheckboxBaseDirective.md#id) + +*** + +### indeterminate + +> **indeterminate**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L70) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`indeterminate`](CheckboxBaseDirective.md#indeterminate) + +*** + +### invalid + +> **invalid**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L101) + +Sets/gets whether the switch component is invalid. +Default value is `false`. + +#### Example + +```html +<igx-switch invalid></igx-switch> +``` +```typescript +let isInvalid = this.switch.invalid; +``` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`invalid`](CheckboxBaseDirective.md#invalid) + +*** + +### labelId + +> **labelId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L137) + +Sets/gets the id of the `label` element. +If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`. + +#### Example + +```html +<igx-checkbox labelId="Label1"></igx-checkbox> +``` +```typescript +let labelId = this.component.labelId; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`labelId`](CheckboxBaseDirective.md#labelid) + +*** + +### labelPosition + +> **labelPosition**: `string` = `LabelPosition.AFTER` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L191) + +Sets/gets the position of the `label`. + If not set, the `labelPosition` will have value `"after"`. + +#### Example + +```html +<igx-checkbox labelPosition="before"></igx-checkbox> +``` +```typescript +let labelPosition = this.checkbox.labelPosition; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`labelPosition`](CheckboxBaseDirective.md#labelposition) + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L163) + +Sets/gets the `name` attribute. + +#### Example + +```html +<igx-checkbox name="Checkbox1"></igx-checkbox> +``` +```typescript +let name = this.checkbox.name; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`name`](CheckboxBaseDirective.md#name) + +*** + +### nativeInput + +> **nativeInput**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L54) + +Returns reference to the native checkbox element. + +#### Example + +```typescript +let checkboxElement = this.component.checkboxElement; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeInput`](CheckboxBaseDirective.md#nativeinput) + +*** + +### nativeLabel + +> **nativeLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L65) + +Returns reference to the native label element. +```typescript + +@example +let labelElement = this.component.nativeLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeLabel`](CheckboxBaseDirective.md#nativelabel) + +*** + +### ngControl + +> **ngControl**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L29) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`ngControl`](CheckboxBaseDirective.md#ngcontrol) + +*** + +### placeholderLabel + +> **placeholderLabel**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L107) + +Returns reference to the label placeholder element. +```typescript + +@example +let labelPlaceholder = this.component.placeholderLabel; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`placeholderLabel`](CheckboxBaseDirective.md#placeholderlabel) + +*** + +### readonly + +> **readonly**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L69) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`readonly`](CheckboxBaseDirective.md#readonly) + +*** + +### tabindex + +> **tabindex**: `number` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L176) + +Sets/gets the value of the `tabindex` attribute. + +#### Example + +```html +<igx-checkbox [tabindex]="1"></igx-checkbox> +``` +```typescript +let tabIndex = this.checkbox.tabindex; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`tabindex`](CheckboxBaseDirective.md#tabindex) + +*** + +### themeToken + +> `protected` **themeToken**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L28) + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`themeToken`](CheckboxBaseDirective.md#themetoken) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L150) + +Sets/gets the `value` attribute. + +#### Example + +```html +<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox> +``` +```typescript +let value = this.checkbox.value; +``` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`value`](CheckboxBaseDirective.md#value) + +## Accessors + +### checked + +#### Get Signature + +> **get** **checked**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L71) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/switch/src/switch/switch.component.ts#L68) + +Sets/gets whether the switch is on or off. +Default value is 'false'. + +##### Example + +```html + <igx-switch [checked]="true"></igx-switch> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`checked`](CheckboxBaseDirective.md#checked) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L94) + +Returns reference to the `nativeElement` of the igx-checkbox/igx-switch. + +##### Example + +```typescript +let nativeElement = this.component.nativeElement; +``` + +##### Returns + +`any` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`nativeElement`](CheckboxBaseDirective.md#nativeelement) + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L267) + +Sets/gets whether the checkbox is required. +If not set, `required` will have value `false`. + +##### Example + +```html +<igx-checkbox required></igx-checkbox> +``` +```typescript +let isRequired = this.checkbox.required; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:270](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L270) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`CheckboxBaseDirective`](CheckboxBaseDirective.md).[`required`](CheckboxBaseDirective.md#required) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabContentComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabContentComponent.md new file mode 100644 index 000000000..22ea4b0d1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabContentComponent.md @@ -0,0 +1,21 @@ +# Class: IgxTabContentComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tab-content.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tab-content.component.ts#L11) + +## Extends + +- [`IgxTabContentDirective`](IgxTabContentDirective.md) + +## Constructors + +### Constructor + +> **new IgxTabContentComponent**(): `IgxTabContentComponent` + +#### Returns + +`IgxTabContentComponent` + +#### Inherited from + +[`IgxTabContentDirective`](IgxTabContentDirective.md).[`constructor`](IgxTabContentDirective.md#constructor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabContentDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabContentDirective.md new file mode 100644 index 000000000..3b00e3c4b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabContentDirective.md @@ -0,0 +1,18 @@ +# Abstract Class: IgxTabContentDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-content.directive.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-content.directive.ts#L6) + +## Extended by + +- [`IgxBottomNavContentComponent`](IgxBottomNavContentComponent.md) +- [`IgxTabContentComponent`](IgxTabContentComponent.md) + +## Constructors + +### Constructor + +> **new IgxTabContentDirective**(): `IgxTabContentDirective` + +#### Returns + +`IgxTabContentDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderComponent.md new file mode 100644 index 000000000..0c7afaa28 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderComponent.md @@ -0,0 +1,26 @@ +# Class: IgxTabHeaderComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tab-header.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tab-header.component.ts#L13) + +## Extends + +- [`IgxTabHeaderDirective`](IgxTabHeaderDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTabHeaderComponent**(): `IgxTabHeaderComponent` + +#### Returns + +`IgxTabHeaderComponent` + +#### Inherited from + +[`IgxTabHeaderDirective`](IgxTabHeaderDirective.md).[`constructor`](IgxTabHeaderDirective.md#constructor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderDirective.md new file mode 100644 index 000000000..f35ef5aa6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderDirective.md @@ -0,0 +1,18 @@ +# Abstract Class: IgxTabHeaderDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-header.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-header.directive.ts#L8) + +## Extended by + +- [`IgxBottomNavHeaderComponent`](IgxBottomNavHeaderComponent.md) +- [`IgxTabHeaderComponent`](IgxTabHeaderComponent.md) + +## Constructors + +### Constructor + +> **new IgxTabHeaderDirective**(): `IgxTabHeaderDirective` + +#### Returns + +`IgxTabHeaderDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderIconDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderIconDirective.md new file mode 100644 index 000000000..89eed6733 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderIconDirective.md @@ -0,0 +1,13 @@ +# Class: IgxTabHeaderIconDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.directives.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.directives.ts#L13) + +## Constructors + +### Constructor + +> **new IgxTabHeaderIconDirective**(): `IgxTabHeaderIconDirective` + +#### Returns + +`IgxTabHeaderIconDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderLabelDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderLabelDirective.md new file mode 100644 index 000000000..a8ee7feac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabHeaderLabelDirective.md @@ -0,0 +1,13 @@ +# Class: IgxTabHeaderLabelDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.directives.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.directives.ts#L7) + +## Constructors + +### Constructor + +> **new IgxTabHeaderLabelDirective**(): `IgxTabHeaderLabelDirective` + +#### Returns + +`IgxTabHeaderLabelDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabItemComponent.md new file mode 100644 index 000000000..e015ac3ea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabItemComponent.md @@ -0,0 +1,85 @@ +# Class: IgxTabItemComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tab-item.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tab-item.component.ts#L10) + +## Extends + +- [`IgxTabItemDirective`](IgxTabItemDirective.md) + +## Constructors + +### Constructor + +> **new IgxTabItemComponent**(): `IgxTabItemComponent` + +#### Returns + +`IgxTabItemComponent` + +#### Inherited from + +[`IgxTabItemDirective`](IgxTabItemDirective.md).[`constructor`](IgxTabItemDirective.md#constructor) + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L36) + +Disables the item. + +#### Inherited from + +[`IgxTabItemDirective`](IgxTabItemDirective.md).[`disabled`](IgxTabItemDirective.md#disabled) + +*** + +### selectedChange + +> **selectedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L30) + +Output to enable support for two-way binding on [(selected)] + +#### Inherited from + +[`IgxTabItemDirective`](IgxTabItemDirective.md).[`selectedChange`](IgxTabItemDirective.md#selectedchange) + +## Accessors + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L49) + +Gets/Sets whether an item is selected. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L53) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxTabItemDirective`](IgxTabItemDirective.md).[`selected`](IgxTabItemDirective.md#selected) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabItemDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabItemDirective.md new file mode 100644 index 000000000..208f6277a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabItemDirective.md @@ -0,0 +1,78 @@ +# Abstract Class: IgxTabItemDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L6) + +## Extended by + +- [`IgxBottomNavItemComponent`](IgxBottomNavItemComponent.md) +- [`IgxTabItemComponent`](IgxTabItemComponent.md) + +## Constructors + +### Constructor + +> **new IgxTabItemDirective**(): `IgxTabItemDirective` + +#### Returns + +`IgxTabItemDirective` + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L36) + +Disables the item. + +#### Implementation of + +`IgxTabItemBase.disabled` + +*** + +### selectedChange + +> **selectedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L30) + +Output to enable support for two-way binding on [(selected)] + +## Accessors + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L49) + +Gets/Sets whether an item is selected. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts#L53) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +`IgxTabItemBase.selected` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabsComponent.md new file mode 100644 index 000000000..38a3be0c8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabsComponent.md @@ -0,0 +1,249 @@ +# Class: IgxTabsComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts#L65) + +Tabs component is used to organize or switch between similar data sets. + +## Igx Module + +IgxTabsModule + +## Igx Theme + +igx-tabs-theme + +## Igx Keywords + +tabs + +## Igx Group + +Layouts + +## Remarks + +The Ignite UI for Angular Tabs component places tabs at the top and allows for scrolling when there are multiple tab items on the screen. + +## Example + +```html +<igx-tabs> + <igx-tab-item> + <igx-tab-header> + <igx-icon igxTabHeaderIcon>folder</igx-icon> + <span igxTabHeaderLabel>Tab 1</span> + </igx-tab-header> + <igx-tab-content> + Content 1 + </igx-tab-content> + </igx-tab-item> + ... +</igx-tabs> +``` + +## Extends + +- [`IgxTabsDirective`](IgxTabsDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTabsComponent**(): `IgxTabsComponent` + +#### Returns + +`IgxTabsComponent` + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`constructor`](IgxTabsDirective.md#constructor) + +## Properties + +### activation + +> **activation**: `"auto"` \| `"manual"` = `'auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts#L93) + +Determines the tab activation. +When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed. +When set to manual, the tab is only focused. The selection happens after pressing Space or Enter. +Defaults is auto. + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L25) + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`cdr`](IgxTabsDirective.md#cdr) + +*** + +### disableAnimation + +> **disableAnimation**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L67) + +Enables/disables the transition animation of the contents. + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`disableAnimation`](IgxTabsDirective.md#disableanimation) + +*** + +### items + +> **items**: `QueryList`\<[`IgxTabItemDirective`](IgxTabItemDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L91) + +Returns the items. + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`items`](IgxTabsDirective.md#items) + +*** + +### selectedIndexChange + +> **selectedIndexChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L73) + +Output to enable support for two-way binding on [(selectedIndex)] + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedIndexChange`](IgxTabsDirective.md#selectedindexchange) + +*** + +### selectedIndexChanging + +> **selectedIndexChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L79) + +Emitted when the selected index is about to change. + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedIndexChanging`](IgxTabsDirective.md#selectedindexchanging) + +*** + +### selectedItemChange + +> **selectedItemChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L85) + +Emitted when the selected item is changed. + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedItemChange`](IgxTabsDirective.md#selecteditemchange) + +## Accessors + +### selectedIndex + +#### Get Signature + +> **get** **selectedIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L37) + +Gets/Sets the index of the selected item. +Default value is 0 if contents are defined otherwise defaults to -1. + +##### Returns + +`number` + +#### Set Signature + +> **set** **selectedIndex**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L41) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedIndex`](IgxTabsDirective.md#selectedindex) + +*** + +### selectedItem + +#### Get Signature + +> **get** **selectedItem**(): [`IgxTabItemDirective`](IgxTabItemDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L96) + +Gets the selected item. + +##### Returns + +[`IgxTabItemDirective`](IgxTabItemDirective.md) + +#### Inherited from + +[`IgxTabsDirective`](IgxTabsDirective.md).[`selectedItem`](IgxTabsDirective.md#selecteditem) + +*** + +### tabAlignment + +#### Get Signature + +> **get** **tabAlignment**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts#L74) + +Gets/Sets the tab alignment. Defaults to `start`. + +##### Returns + +`string` + +#### Set Signature + +> **set** **tabAlignment**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts#L78) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabsDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabsDirective.md new file mode 100644 index 000000000..60d43a23f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTabsDirective.md @@ -0,0 +1,146 @@ +# Abstract Class: IgxTabsDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L28) + +## Extended by + +- [`IgxBottomNavComponent`](IgxBottomNavComponent.md) +- [`IgxTabsComponent`](IgxTabsComponent.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTabsDirective**(): `IgxTabsDirective` + +#### Returns + +`IgxTabsDirective` + +#### Inherited from + +`IgxCarouselComponentBase.constructor` + +## Properties + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L25) + +#### Inherited from + +`IgxCarouselComponentBase.cdr` + +*** + +### disableAnimation + +> **disableAnimation**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L67) + +Enables/disables the transition animation of the contents. + +*** + +### items + +> **items**: `QueryList`\<[`IgxTabItemDirective`](IgxTabItemDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L91) + +Returns the items. + +#### Implementation of + +`IgxTabsBase.items` + +*** + +### selectedIndexChange + +> **selectedIndexChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L73) + +Output to enable support for two-way binding on [(selectedIndex)] + +*** + +### selectedIndexChanging + +> **selectedIndexChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L79) + +Emitted when the selected index is about to change. + +*** + +### selectedItemChange + +> **selectedItemChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L85) + +Emitted when the selected item is changed. + +## Accessors + +### selectedIndex + +#### Get Signature + +> **get** **selectedIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L37) + +Gets/Sets the index of the selected item. +Default value is 0 if contents are defined otherwise defaults to -1. + +##### Returns + +`number` + +#### Set Signature + +> **set** **selectedIndex**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L41) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +`IgxTabsBase.selectedIndex` + +*** + +### selectedItem + +#### Get Signature + +> **get** **selectedItem**(): [`IgxTabItemDirective`](IgxTabItemDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L96) + +Gets the selected item. + +##### Returns + +[`IgxTabItemDirective`](IgxTabItemDirective.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextHighlightDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextHighlightDirective.md new file mode 100644 index 000000000..096b8bb3e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextHighlightDirective.md @@ -0,0 +1,254 @@ +# Class: IgxTextHighlightDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L41) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTextHighlightDirective**(): `IgxTextHighlightDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L196) + +#### Returns + +`IgxTextHighlightDirective` + +## Properties + +### activeCssClass + +> **activeCssClass**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L72) + +Determines the `CSS` class of the active highlight element. +This allows the developer to provide custom `CSS` to customize the highlight. + +```html +<div + igxTextHighlight + [activeCssClass]="activeHighlightClass"> +</div> +``` + +*** + +### column + +> **column**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L147) + +The identifier of the column on which the directive is currently on. + +```html +<div + igxTextHighlight + [column]="0"> +</div> +``` + +*** + +### cssClass + +> **cssClass**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L58) + +Determines the `CSS` class of the highlight elements. +This allows the developer to provide custom `CSS` to customize the highlight. + +```html +<div + igxTextHighlight + [cssClass]="myClass"> +</div> +``` + +*** + +### groupName + +> **groupName**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L93) + +Identifies the highlight within a unique group. +This allows it to have several different highlight groups, +with each of them having their own active highlight. + +```html +<div + igxTextHighlight + [groupName]="myGroupName"> +</div> +``` + +*** + +### metadata + +> **metadata**: `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L168) + +A map that contains all additional conditions, that you need to activate a highlighted +element. To activate the condition, you will have to add a new metadata key to +the `metadata` property of the IActiveHighlightInfo interface. + +#### Example + +```typescript + // Set a property, which would disable the highlight for a given element on a certain condition + const metadata = new Map<string, any>(); + metadata.set('highlightElement', false); +``` +```html +<div + igxTextHighlight + [metadata]="metadata"> +</div> +``` + +*** + +### row + +> **row**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L134) + +The identifier of the row on which the directive is currently on. + +```html +<div + igxTextHighlight + [row]="0"> +</div> +``` + +## Accessors + +### value + +#### Get Signature + +> **get** **value**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L112) + +The underlying value of the element that will be highlighted. + +```typescript +// get +const elementValue = this.textHighlight.value; +``` + +```html +<!--set--> +<div + igxTextHighlight + [value]="newValue"> +</div> +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L115) + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` + +## Methods + +### activateIfNecessary() + +> **activateIfNecessary**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L314) + +Activates the highlight if it is on the currently active row and column. + +#### Returns + +`void` + +*** + +### clearHighlight() + +> **clearHighlight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L302) + +Clears any existing highlight. + +#### Returns + +`void` + +*** + +### highlight() + +> **highlight**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L274) + +Clears the existing highlight and highlights the searched text. +Returns how many times the element contains the searched text. + +#### Parameters + +##### text + +`string` + +##### caseSensitive? + +`boolean` + +##### exactMatch? + +`boolean` + +#### Returns + +`number` + +*** + +### observe() + +> **observe**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L326) + +Attaches a MutationObserver to the parentElement and watches for when the container element is removed/readded to the DOM. +Should be used only when necessary as using many observers may lead to performance degradation. + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextHighlightService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextHighlightService.md new file mode 100644 index 000000000..ea0d92038 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextHighlightService.md @@ -0,0 +1,96 @@ +# Class: IgxTextHighlightService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L7) + +## Constructors + +### Constructor + +> **new IgxTextHighlightService**(): `IgxTextHighlightService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L11) + +#### Returns + +`IgxTextHighlightService` + +## Properties + +### highlightGroupsMap + +> **highlightGroupsMap**: `Map`\<`string`, [`IActiveHighlightInfo`](../interfaces/IActiveHighlightInfo.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L8) + +*** + +### onActiveElementChanged + +> **onActiveElementChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L9) + +## Methods + +### clearActiveHighlight() + +> **clearActiveHighlight**(`groupName`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L25) + +Clears any existing highlight. + +#### Parameters + +##### groupName + +`any` + +#### Returns + +`void` + +*** + +### destroyGroup() + +> **destroyGroup**(`groupName`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L35) + +Destroys a highlight group. + +#### Parameters + +##### groupName + +`string` + +#### Returns + +`void` + +*** + +### setActiveHighlight() + +> **setActiveHighlight**(`groupName`, `highlight`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts#L17) + +Activates the highlight at a given index. +(if such index exists) + +#### Parameters + +##### groupName + +`string` + +##### highlight + +[`IActiveHighlightInfo`](../interfaces/IActiveHighlightInfo.md) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextSelectionDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextSelectionDirective.md new file mode 100644 index 000000000..3a7095a6b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTextSelectionDirective.md @@ -0,0 +1,105 @@ +# Class: IgxTextSelectionDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts#L8) + +## Constructors + +### Constructor + +> **new IgxTextSelectionDirective**(): `IgxTextSelectionDirective` + +#### Returns + +`IgxTextSelectionDirective` + +## Properties + +### selected + +> **selected**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts#L31) + +Determines whether the input element could be selected through the directive. + +```html +<!--set--> +<input + type="text" + id="firstName" + [igxTextSelection]="true"> +</input> + +<input + type="text" + id="lastName" + igxTextSelection + [selected]="true"> +</input> +``` + +## Accessors + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts#L54) + +Returns the nativeElement of the element where the directive was applied. + +```html +<input + type="text" + id="firstName" + igxTextSelection> +</input> +``` + +```typescript +@ViewChild('firstName', + {read: IgxTextSelectionDirective}) +public inputElement: IgxTextSelectionDirective; + +public getNativeElement() { + return this.inputElement.nativeElement; +} +``` + +##### Returns + +`any` + +## Methods + +### trigger() + +> **trigger**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts#L88) + +Triggers the selection of the element if it is marked as selectable. + +```html +<input + type="text" + id="firstName" + igxTextSelection> +</input> +``` + +```typescript +@ViewChild('firstName', + {read: IgxTextSelectionDirective}) +public inputElement: IgxTextSelectionDirective; + +public triggerElementSelection() { + this.inputElement.trigger(); +} +``` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxThumbFromTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxThumbFromTemplateDirective.md new file mode 100644 index 000000000..437db7686 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxThumbFromTemplateDirective.md @@ -0,0 +1,25 @@ +# Class: IgxThumbFromTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L18) + +Template directive that allows you to set a custom template representing the lower label value of the [IgxSliderComponent](IgxSliderComponent.md) + +```html +<igx-slider> + <ng-template igxSliderThumbFrom let-value let-labels>{{value}}</ng-template> +</igx-slider> +``` + +## Context + +[IgxSliderComponent.context](IgxSliderComponent.md#context) + +## Constructors + +### Constructor + +> **new IgxThumbFromTemplateDirective**(): `IgxThumbFromTemplateDirective` + +#### Returns + +`IgxThumbFromTemplateDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxThumbToTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxThumbToTemplateDirective.md new file mode 100644 index 000000000..fc8ef0a56 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxThumbToTemplateDirective.md @@ -0,0 +1,25 @@ +# Class: IgxThumbToTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L35) + +Template directive that allows you to set a custom template representing the upper label value of the [IgxSliderComponent](IgxSliderComponent.md) + +```html +<igx-slider> + <ng-template igxSliderThumbTo let-value let-labels>{{value}}</ng-template> +</igx-slider> +``` + +## Context + +[IgxSliderComponent.context](IgxSliderComponent.md#context) + +## Constructors + +### Constructor + +> **new IgxThumbToTemplateDirective**(): `IgxThumbToTemplateDirective` + +#### Returns + +`IgxThumbToTemplateDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTickLabelTemplateDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTickLabelTemplateDirective.md new file mode 100644 index 000000000..c90f1388b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTickLabelTemplateDirective.md @@ -0,0 +1,19 @@ +# Class: IgxTickLabelTemplateDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L46) + +Template directive that allows you to set a custom template, represeting primary/secondary tick labels of the [IgxSliderComponent](IgxSliderComponent.md) + +## Context + +IgxTicksComponent.context + +## Constructors + +### Constructor + +> **new IgxTickLabelTemplateDirective**(): `IgxTickLabelTemplateDirective` + +#### Returns + +`IgxTickLabelTemplateDirective` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimeFilteringOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimeFilteringOperand.md new file mode 100644 index 000000000..d9be1a7a8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimeFilteringOperand.md @@ -0,0 +1,213 @@ +# Class: IgxTimeFilteringOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L641) + +## Extends + +- `IgxBaseDateTimeFilteringOperand` + +## Constructors + +### Constructor + +> `protected` **new IgxTimeFilteringOperand**(): `IgxTimeFilteringOperand` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L642) + +#### Returns + +`IgxTimeFilteringOperand` + +#### Overrides + +`IgxBaseDateTimeFilteringOperand.constructor` + +## Properties + +### operations + +> **operations**: [`IFilteringOperation`](../interfaces/IFilteringOperation.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L9) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.operations` + +*** + +### \_instance + +> `protected` `static` **\_instance**: [`IgxFilteringOperand`](IgxFilteringOperand.md) = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L8) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand._instance` + +## Methods + +### append() + +> **append**(`operation`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L76) + +Adds a new condition to the filtering operations. + +#### Parameters + +##### operation + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +The filtering operation. + +#### Returns + +`void` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.append` + +*** + +### condition() + +> **condition**(`name`): [`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L67) + +Returns an instance of the condition with the specified name. + +#### Parameters + +##### name + +`string` + +The name of the condition. + +#### Returns + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.condition` + +*** + +### conditionList() + +> **conditionList**(): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L50) + +Returns an array of names of the conditions which are visible in the filtering UI + +#### Returns + +`string`[] + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.conditionList` + +*** + +### findValueInSet() + +> `protected` **findValueInSet**(`target`, `searchVal`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L743) + +#### Parameters + +##### target + +`any` + +##### searchVal + +`Set`\<`any`\> + +#### Returns + +`boolean` + +#### Overrides + +`IgxBaseDateTimeFilteringOperand.findValueInSet` + +*** + +### validateInputData() + +> `protected` **validateInputData**(`target`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L197) + +#### Parameters + +##### target + +`Date` + +#### Returns + +`void` + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.validateInputData` + +*** + +### getDateParts() + +> `static` **getDateParts**(`date`, `dateFormat?`): [`IDateParts`](../interfaces/IDateParts.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L153) + +Splits a Date object into parts + +#### Parameters + +##### date + +`Date` + +##### dateFormat? + +`string` + +#### Returns + +[`IDateParts`](../interfaces/IDateParts.md) + +#### Memberof + +IgxDateFilteringOperand + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.getDateParts` + +*** + +### instance() + +> `static` **instance**(): [`IgxFilteringOperand`](IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L43) + +#### Returns + +[`IgxFilteringOperand`](IgxFilteringOperand.md) + +#### Inherited from + +`IgxBaseDateTimeFilteringOperand.instance` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimePickerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimePickerComponent.md new file mode 100644 index 000000000..5612348ce --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimePickerComponent.md @@ -0,0 +1,1450 @@ +# Class: IgxTimePickerComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L87) + +Common interface for Components with show and collapse functionality + +## Extends + +- [`PickerBaseDirective`](PickerBaseDirective.md) + +## Implements + +- `IgxTimePickerBase` +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTimePickerComponent**(): `IgxTimePickerComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:612](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L612) + +#### Returns + +`IgxTimePickerComponent` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`constructor`](PickerBaseDirective.md#constructor) + +## Properties + +### \_collapsed + +> `protected` **\_collapsed**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L297) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_collapsed`](PickerBaseDirective.md#_collapsed) + +*** + +### \_defaultLocale + +> `protected` **\_defaultLocale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L294) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_defaultLocale`](PickerBaseDirective.md#_defaultlocale) + +*** + +### \_destroy$ + +> `protected` **\_destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:333](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L333) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_destroy$`](PickerBaseDirective.md#_destroy) + +*** + +### \_displayFormat + +> `protected` **\_displayFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:296](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L296) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_displayFormat`](PickerBaseDirective.md#_displayformat) + +*** + +### \_inputFormat + +> `protected` **\_inputFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:295](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L295) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_inputFormat`](PickerBaseDirective.md#_inputformat) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L33) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_inputGroupType`](PickerBaseDirective.md#_inputgrouptype) + +*** + +### \_locale + +> `protected` **\_locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L293) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_locale`](PickerBaseDirective.md#_locale) + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L32) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_localeId`](PickerBaseDirective.md#_localeid) + +*** + +### \_maxValue + +> `protected` **\_maxValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L300) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_maxValue`](PickerBaseDirective.md#_maxvalue) + +*** + +### \_minValue + +> `protected` **\_minValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L299) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_minValue`](PickerBaseDirective.md#_minvalue) + +*** + +### \_type + +> `protected` **\_type**: [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L298) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_type`](PickerBaseDirective.md#_type) + +*** + +### \_weekStart + +> `protected` **\_weekStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L301) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`_weekStart`](PickerBaseDirective.md#_weekstart) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L274) + +Emitted after the calendar has closed. + +#### Example + +```html +<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`closed`](PickerBaseDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L263) + +Emitted when the calendar has started closing, cancelable. + +#### Example + +```html +<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`closing`](PickerBaseDirective.md#closing) + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L144) + +Enables or disables the picker. + +#### Example + +```html +<igx-date-picker [disabled]="'true'"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`disabled`](PickerBaseDirective.md#disabled) + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L31) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`element`](PickerBaseDirective.md#element) + +*** + +### formatter + +> **formatter**: (`val`) => `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L247) + +Gets/Sets a custom formatter function on the selected or passed date. + +#### Parameters + +##### val + +`Date` + +#### Returns + +`string` + +#### Example + +```html +<igx-time-picker [value]="date" [formatter]="formatter"></igx-time-picker> +``` + +*** + +### headerOrientation + +> **headerOrientation**: [`PickerHeaderOrientation`](../type-aliases/PickerHeaderOrientation.md) = `PickerHeaderOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L111) + +Gets/Sets the orientation of the `IgxDatePickerComponent` header. + +#### Example + +```html +<igx-date-picker headerOrientation="vertical"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`headerOrientation`](PickerBaseDirective.md#headerorientation) + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L122) + +Gets/Sets whether the header is hidden in dialog mode. + +#### Example + +```html +<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`hideHeader`](PickerBaseDirective.md#hideheader) + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L34) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`i18nFormatter`](PickerBaseDirective.md#i18nformatter) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L107) + +Sets the value of the `id` attribute. +```html +<igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker> +``` + +*** + +### inputGroup + +> `protected` **inputGroup**: [`IgxInputGroupComponent`](IgxInputGroupComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L291) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`inputGroup`](PickerBaseDirective.md#inputgroup) + +*** + +### mode + +> **mode**: [`PickerInteractionMode`](../type-aliases/PickerInteractionMode.md) = `PickerInteractionMode.DropDown` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L159) + +Gets/Sets the interaction mode - dialog or drop down. + +#### Example + +```html +<igx-time-picker mode="dialog"></igx-time-picker> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`mode`](PickerBaseDirective.md#mode) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L252) + +Emitted after the calendar has opened. + +#### Example + +```html +<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`opened`](PickerBaseDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L241) + +Emitted when the calendar has started opening, cancelable. + +#### Example + +```html +<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`opening`](PickerBaseDirective.md#opening) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L200) + +The container used for the pop-up element. + +#### Example + +```html +<div igxOverlayOutlet #outlet="overlay-outlet"></div> +<!-- ... --> +<igx-date-picker [outlet]="outlet"></igx-date-picker> +<!-- ... --> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`outlet`](PickerBaseDirective.md#outlet) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L133) + +Overlay settings used to display the pop-up element. + +#### Example + +```html +<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`overlaySettings`](PickerBaseDirective.md#overlaysettings) + +*** + +### placeholder + +> **placeholder**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L86) + +Sets the `placeholder` of the picker's input. + +#### Example + +```html +<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`placeholder`](PickerBaseDirective.md#placeholder) + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L285) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`prefixes`](PickerBaseDirective.md#prefixes) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L262) + +Emitted after a selection has been done. + +#### Example + +```html +<igx-time-picker (selected)="onSelection($event)"></igx-time-picker> +``` + +*** + +### spinLoop + +> **spinLoop**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L236) + +Sets whether the seconds, minutes and hour spinning will loop back around when end value is reached. +By default it's set to true. +```html +<igx-time-picker [spinLoop]="false"></igx-time-picker> +``` + +#### Implementation of + +`IgxTimePickerBase.spinLoop` + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:288](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L288) + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`suffixes`](PickerBaseDirective.md#suffixes) + +*** + +### tabIndex + +> **tabIndex**: `string` \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L230) + +Gets/Sets the default template editor's tabindex. + +#### Example + +```html +<igx-date-picker [tabIndex]="1"></igx-date-picker> +``` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`tabIndex`](PickerBaseDirective.md#tabindex) + +*** + +### validationFailed + +> **validationFailed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L287) + +Emitted when the user types/spins invalid time in the time-picker editor. + +#### Example + +```html +<igx-time-picker (validationFailed)="onValidationFailed($event)"></igx-time-picker> +``` + +*** + +### valueChange + +> **valueChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:276](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L276) + +Emitted when the picker's value changes. + +#### Remarks + +Used for `two-way` bindings. + +#### Example + +```html +<igx-time-picker [(value)]="date"></igx-time-picker> +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`valueChange`](PickerBaseDirective.md#valuechange) + +## Accessors + +### cancelButtonLabel + +#### Get Signature + +> **get** **cancelButtonLabel**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:588](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L588) + +An accessor that returns the label of cancel button. + +##### Returns + +`string` + +#### Set Signature + +> **set** **cancelButtonLabel**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L581) + +Overrides the default text of the **Cancel** button. + +##### Remarks + +Defaults to the value from resource strings, `"Cancel"` for the built-in EN. +```html +<igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L196) + +Gets if the dropdown/dialog is collapsed + +```typescript +let isCollapsed = this.timePicker.collapsed; +``` + +##### Returns + +`boolean` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`collapsed`](PickerBaseDirective.md#collapsed) + +*** + +### displayFormat + +#### Get Signature + +> **get** **displayFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L126) + +The format used to display the picker's value when it's not being edited. + +##### Remarks + +Uses Angular's DatePipe. + +##### Example + +```html +<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L122) + +The format used when editable input is not focused. Defaults to the `inputFormat` if not set. + +##### Remarks + +Uses Angular's `DatePipe`. + +##### Example + +```html +<igx-time-picker displayFormat="mm:ss"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`displayFormat`](PickerBaseDirective.md#displayformat) + +*** + +### inputFormat + +#### Get Signature + +> **get** **inputFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L146) + +The editor's input mask. + +##### Remarks + +Also used as a placeholder when none is provided. + +##### Example + +```html +<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L142) + +The expected user input format and placeholder. + +##### Remarks + +Default is `hh:mm tt` + +##### Example + +```html +<igx-time-picker inputFormat="HH:mm"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IgxTimePickerBase.inputFormat` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`inputFormat`](PickerBaseDirective.md#inputformat) + +*** + +### itemsDelta + +#### Get Signature + +> **get** **itemsDelta**(): `Pick`\<[`DatePartDeltas`](../interfaces/DatePartDeltas.md), `"hours"` \| `"minutes"` \| `"seconds"` \| `"fractionalSeconds"`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:608](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L608) + +##### Returns + +`Pick`\<[`DatePartDeltas`](../interfaces/DatePartDeltas.md), `"hours"` \| `"minutes"` \| `"seconds"` \| `"fractionalSeconds"`\> + +#### Set Signature + +> **set** **itemsDelta**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L604) + +Delta values used to increment or decrement each editor date part on spin actions and +to display time portions in the dropdown/dialog. +By default `itemsDelta` is set to `{hour: 1, minute: 1, second: 1}` +```html +<igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker> +``` + +##### Parameters + +###### value + +`Pick`\<[`DatePartDeltas`](../interfaces/DatePartDeltas.md), `"hours"` \| `"minutes"` \| `"seconds"` \| `"fractionalSeconds"`\> + +##### Returns + +`void` + +#### Implementation of + +`IgxTimePickerBase.itemsDelta` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L157) + +Gets the `locale` of the date-picker. +If not set, defaults to applciation's locale.. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L165) + +Sets the `locale` of the date-picker. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Implementation of + +`IgxTimePickerBase.locale` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`locale`](PickerBaseDirective.md#locale) + +*** + +### maxValue + +#### Get Signature + +> **get** **maxValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L224) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **maxValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L212) + +The maximum value the picker will accept. + +##### Remarks + +If a `string` value is passed in, it must be in ISO format. + +##### Example + +```html +<igx-time-picker [maxValue]="20:30:00"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### minValue + +#### Get Signature + +> **get** **minValue**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L185) + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **minValue**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L173) + +The minimum value the picker will accept. + +##### Remarks + +If a `string` value is passed in, it must be in ISO format. + +##### Example + +```html +<igx-time-picker [minValue]="18:00:00"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### okButtonLabel + +#### Get Signature + +> **get** **okButtonLabel**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L565) + +An accessor that returns the label of ok button. + +##### Returns + +`string` + +#### Set Signature + +> **set** **okButtonLabel**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:558](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L558) + +Overrides the default text of the **OK** button. + +##### Remarks + +Defaults to the value from resource strings, `"OK"` for the built-in EN. + +```html +<igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L543) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:536](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L536) + +An accessor that sets the resource strings. +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### toggleContainer + +#### Get Signature + +> **get** `protected` **toggleContainer**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L413) + +##### Returns + +`HTMLElement` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`toggleContainer`](PickerBaseDirective.md#togglecontainer) + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L217) + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L214) + +Determines how the picker's input will be styled. + +##### Remarks + +Default is `box`. + +##### Example + +```html +<igx-date-picker [type]="'line'"></igx-date-picker> +``` + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`type`](PickerBaseDirective.md#type) + +*** + +### value + +#### Get Signature + +> **get** **value**(): `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:499](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L499) + +The currently selected value / time from the drop-down/dialog + +##### Remarks + +The current value is of type `Date` + +##### Example + +```typescript +const newValue: Date = new Date(2000, 2, 2, 10, 15, 15); +this.timePicker.value = newValue; +``` + +##### Returns + +`string` \| `Date` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L512) + +An accessor that allows you to set a time using the `value` input. +```html +public date: Date = new Date(Date.now()); + //... +<igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker> +``` + +##### Parameters + +###### value + +`string` \| `Date` + +##### Returns + +`void` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L176) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L184) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`weekStart`](PickerBaseDirective.md#weekstart) + +## Methods + +### clear() + +> **clear**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:814](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L814) + +Clears the time picker value if it is a `string` or resets the time to `00:00:00` if the value is a Date object. + +#### Returns + +`void` + +#### Example + +```typescript +this.timePicker.clear(); +``` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`clear`](PickerBaseDirective.md#clear) + +*** + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L794) + +Closes the dropdown/dialog. +```html +<igx-time-picker #timePicker></igx-time-picker> +``` +```typescript +@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent; +picker.close(); +``` + +#### Returns + +`void` + +#### Implementation of + +`IgxTimePickerBase.close` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`close`](PickerBaseDirective.md#close) + +*** + +### decrement() + +> **decrement**(`datePart?`, `delta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L874) + +Decrement a specified `DatePart` + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +The optional DatePart to decrement. Defaults to Hour. + +##### delta? + +`number` + +The optional delta to decrement by. Overrides `itemsDelta`. + +#### Returns + +`void` + +#### Example + +```typescript +this.timePicker.decrement(DatePart.Seconds); +``` + +*** + +### increment() + +> **increment**(`datePart?`, `delta?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L860) + +Increment a specified `DatePart`. + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +The optional DatePart to increment. Defaults to Hour. + +##### delta? + +`number` + +The optional delta to increment by. Overrides `itemsDelta`. + +#### Returns + +`void` + +#### Example + +```typescript +this.timePicker.increment(DatePart.Hours); +``` + +*** + +### initLocale() + +> `protected` **initLocale**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L385) + +#### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`initLocale`](PickerBaseDirective.md#initlocale) + +*** + +### onResourceChange() + +> `protected` **onResourceChange**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L391) + +#### Parameters + +##### args + +`CustomEvent`\<`IResourceChangeEventArgs`\> + +#### Returns + +`void` + +#### Inherited from + +[`PickerBaseDirective`](PickerBaseDirective.md).[`onResourceChange`](PickerBaseDirective.md#onresourcechange) + +*** + +### onStatusChanged() + +> `protected` **onStatusChanged**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:1071](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L1071) + +#### Returns + +`void` + +*** + +### open() + +> **open**(`settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:766](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L766) + +Opens the picker's dialog UI. + +#### Parameters + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +OverlaySettings - the overlay settings to use for positioning the drop down or dialog container according to +```html +<igx-time-picker #picker [value]="date"></igx-time-picker> +<button type="button" igxButton (click)="picker.open()">Open Dialog</button> +``` + +#### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`open`](PickerBaseDirective.md#open) + +*** + +### select() + +> **select**(`date`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:846](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L846) + +Selects time from the igxTimePicker. + +#### Parameters + +##### date + +`string` \| `Date` + +#### Returns + +`void` + +#### Example + +```typescript +this.timePicker.select(date); + +@param date Date object containing the time to be selected. + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`select`](PickerBaseDirective.md#select) + +*** + +### toggle() + +> **toggle**(`settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:798](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L798) + +#### Parameters + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`toggle`](PickerBaseDirective.md#toggle) + +*** + +### updateResources() + +> `protected` **updateResources**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:1088](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L1088) + +#### Returns + +`void` + +#### Overrides + +[`PickerBaseDirective`](PickerBaseDirective.md).[`updateResources`](PickerBaseDirective.md#updateresources) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimeSummaryOperand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimeSummaryOperand.md new file mode 100644 index 000000000..ef04094fb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTimeSummaryOperand.md @@ -0,0 +1,147 @@ +# Class: IgxTimeSummaryOperand + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L256) + +## Extends + +- [`IgxSummaryOperand`](IgxSummaryOperand.md) + +## Constructors + +### Constructor + +> **new IgxTimeSummaryOperand**(): `IgxTimeSummaryOperand` + +#### Returns + +`IgxTimeSummaryOperand` + +#### Inherited from + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`constructor`](IgxSummaryOperand.md#constructor) + +## Methods + +### operate() + +> **operate**(`data?`, `allData?`, `fieldName?`, `groupRecord?`): [`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L290) + +#### Parameters + +##### data? + +`any`[] = `[]` + +##### allData? + +`any`[] = `[]` + +##### fieldName? + +`string` + +##### groupRecord? + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +#### Returns + +[`IgxSummaryResult`](../interfaces/IgxSummaryResult.md)[] + +#### Memberof + +IgxTimeSummaryOperand + +#### Overrides + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`operate`](IgxSummaryOperand.md#operate) + +*** + +### count() + +> `static` **count**(`data`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L18) + +Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +```typescript +IgxSummaryOperand.count(dataSource); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`number` + +#### Memberof + +IgxSummaryOperand + +#### Inherited from + +[`IgxSummaryOperand`](IgxSummaryOperand.md).[`count`](IgxSummaryOperand.md#count) + +*** + +### earliestTime() + +> `static` **earliestTime**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L282) + +Returns the earliest time value in the data records. Compare only the time part of the date. +If filtering is applied, returns the earliest time value in the filtered data records. +```typescript +IgxTimeSummaryOperand.earliestTime(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxTimeSummaryOperand + +*** + +### latestTime() + +> `static` **latestTime**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:266](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts#L266) + +Returns the latest time value in the data records. Compare only the time part of the date. +If filtering is applied, returns the latest time value in the filtered data records. +```typescript +IgxTimeSummaryOperand.latestTime(data); +``` + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`any` + +#### Memberof + +IgxTimeSummaryOperand diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToastComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToastComponent.md new file mode 100644 index 000000000..30e7fc0fe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToastComponent.md @@ -0,0 +1,585 @@ +# Class: IgxToastComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L36) + +**Ignite UI for Angular Toast** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast) + +The Ignite UI Toast provides information and warning messages that are non-interactive and cannot +be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page. + +Example: +```html +<button type="button" igxButton (click)="toast.open()">Show notification</button> +<igx-toast #toast displayTime="1000"> + Notification displayed +</igx-toast> +``` + +## Extends + +- [`IgxNotificationsDirective`](IgxNotificationsDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxToastComponent**(): `IgxToastComponent` + +#### Returns + +`IgxToastComponent` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`constructor`](IgxNotificationsDirective.md#constructor) + +## Properties + +### \_overlayId + +> `protected` **\_overlayId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L193) + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`_overlayId`](IgxNotificationsDirective.md#_overlayid) + +*** + +### appended + +> **appended**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L143) + +Emits an event after the toggle element is appended to the overlay container. + +```typescript +onAppended() { + alert("Content appended!"); +} +``` + +```html +<div + igxToggle + (appended)='onToggleAppended()'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`appended`](IgxNotificationsDirective.md#appended) + +*** + +### ariaLive + +> **ariaLive**: `string` = `'polite'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L15) + +Sets/gets the `aria-live` attribute. +If not set, `aria-live` will have value `"polite"`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`ariaLive`](IgxNotificationsDirective.md#arialive) + +*** + +### autoHide + +> **autoHide**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L22) + +Sets/gets whether the element will be hidden after the `displayTime` is over. +Default value is `true`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`autoHide`](IgxNotificationsDirective.md#autohide) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L105) + +Emits an event after the toggle container is closed. + +```typescript +onToggleClosed(event) { + alert("Toggle closed!"); +} +``` + +```html +<div + igxToggle + (closed)='onToggleClosed($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`closed`](IgxNotificationsDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L124) + +Emits an event before the toggle container is closed. + +```typescript +onToggleClosing(event) { + alert("Toggle closing!"); +} +``` + +```html +<div + igxToggle + (closing)='onToggleClosing($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`closing`](IgxNotificationsDirective.md#closing) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L196) + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`destroy$`](IgxNotificationsDirective.md#destroy) + +*** + +### displayTime + +> **displayTime**: `number` = `4000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L30) + +Sets/gets the duration of time span (in milliseconds) which the element will be visible +after it is being shown. +Default value is `4000`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`displayTime`](IgxNotificationsDirective.md#displaytime) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L57) + +Sets/gets the `id` of the toast. +If not set, the `id` will have value `"igx-toast-0"`. +```html +<igx-toast id = "my-first-toast"></igx-toast> +``` +```typescript +let toastId = this.toast.id; +``` + +#### Overrides + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`id`](IgxNotificationsDirective.md#id) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L67) + +Emits an event after the toggle container is opened. + +```typescript +onToggleOpened(event) { + alert("Toggle opened!"); +} +``` + +```html +<div + igxToggle + (opened)='onToggleOpened($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`opened`](IgxNotificationsDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L86) + +Emits an event before the toggle container is opened. + +```typescript +onToggleOpening(event) { + alert("Toggle opening!"); +} +``` + +```html +<div + igxToggle + (opening)='onToggleOpening($event)'> +</div> +``` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`opening`](IgxNotificationsDirective.md#opening) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L39) + +Gets/Sets the container used for the element. + +#### Remarks + +`outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`outlet`](IgxNotificationsDirective.md#outlet) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L46) + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`overlayService`](IgxNotificationsDirective.md#overlayservice) + +*** + +### role + +> **role**: `string` = `'alert'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L73) + +Sets/gets the `role` attribute. +If not set, `role` will have value `"alert"`. +```html +<igx-toast [role] = "'notify'"></igx-toast> +``` +```typescript +let toastRole = this.toast.role; +``` + +#### Memberof + +IgxToastComponent + +## Accessors + +### element + +#### Get Signature + +> **get** **element**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L132) + +Gets the nativeElement of the toast. +```typescript +let nativeElement = this.toast.element; +``` + +##### Memberof + +IgxToastComponent + +##### Returns + +`any` + +#### Overrides + +`IgxNotificationsDirective.element` + +*** + +### isVisible + +#### Get Signature + +> **get** **isVisible**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L46) + +Enables/Disables the visibility of the element. +If not set, the `isVisible` attribute will have value `false`. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isVisible**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L50) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`isVisible`](IgxNotificationsDirective.md#isvisible) + +*** + +### overlayId + +#### Get Signature + +> **get** **overlayId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L303) + +Returns the id of the overlay the content is rendered in. +```typescript +this.myToggle.overlayId; +``` + +##### Returns + +`string` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`overlayId`](IgxNotificationsDirective.md#overlayid) + +*** + +### positionSettings + +#### Get Signature + +> **get** **positionSettings**(): [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L89) + +Get the position and animation settings used by the toast. +```typescript +@ViewChild('toast', { static: true }) public toast: IgxToastComponent; +let currentPosition: PositionSettings = this.toast.positionSettings +``` + +##### Returns + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Set Signature + +> **set** **positionSettings**(`settings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L113) + +Set the position and animation settings used by the toast. +```html +<igx-toast [positionSettings]="newPositionSettings"></igx-toast> +``` +```typescript +import { slideInTop, slideOutBottom } from 'igniteui-angular'; +... +@ViewChild('toast', { static: true }) public toast: IgxToastComponent; + public newPositionSettings: PositionSettings = { + openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}), + closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}), + horizontalDirection: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Middle, + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Middle + }; +this.toast.positionSettings = this.newPositionSettings; +``` + +##### Parameters + +###### settings + +[`PositionSettings`](../interfaces/PositionSettings.md) + +##### Returns + +`void` + +## Methods + +### close() + +> **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts#L104) + +Hides the element. + +#### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`close`](IgxNotificationsDirective.md#close) + +*** + +### open() + +> **open**(`message?`, `settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L144) + +Shows the toast. +If `autoHide` is enabled, the toast will hide after `displayTime` is over. + +```typescript +this.toast.open(); +``` + +#### Parameters + +##### message? + +`string` + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`void` + +#### Overrides + +`IgxNotificationsDirective.open` + +*** + +### reposition() + +> **reposition**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L313) + +Repositions the toggle. +```typescript +this.myToggle.reposition(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`reposition`](IgxNotificationsDirective.md#reposition) + +*** + +### setOffset() + +> **setOffset**(`deltaX`, `deltaY`, `offsetMode?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L321) + +Offsets the content along the corresponding axis by the provided amount with optional +offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set + +#### Parameters + +##### deltaX + +`number` + +##### deltaY + +`number` + +##### offsetMode? + +[`OffsetMode`](../enumerations/OffsetMode.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`setOffset`](IgxNotificationsDirective.md#setoffset) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/toast/src/toast/toast.component.ts#L162) + +Opens or closes the toast, depending on its current state. + +```typescript +this.toast.toggle(); +``` + +#### Returns + +`void` + +#### Overrides + +[`IgxNotificationsDirective`](IgxNotificationsDirective.md).[`toggle`](IgxNotificationsDirective.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToggleActionDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToggleActionDirective.md new file mode 100644 index 000000000..8ab579e7d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToggleActionDirective.md @@ -0,0 +1,114 @@ +# Class: IgxToggleActionDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L418) + +## Extended by + +- [`IgxTooltipTargetDirective`](IgxTooltipTargetDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxToggleActionDirective**(): `IgxToggleActionDirective` + +#### Returns + +`IgxToggleActionDirective` + +## Properties + +### \_overlayDefaults + +> `protected` **\_overlayDefaults**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:471](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L471) + +*** + +### \_target + +> `protected` **\_target**: `string` \| [`IToggleView`](../interfaces/IToggleView.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:472](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L472) + +*** + +### element + +> `protected` **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L419) + +*** + +### navigationService + +> `protected` **navigationService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L420) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L449) + +Determines where the toggle element overlay should be attached. + +```html +<!--set--> +<div igxToggleAction [igxToggleOutlet]="outlet"></div> +``` +Where `outlet` in an instance of `IgxOverlayOutletDirective` or an `ElementRef` + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L437) + +Provide settings that control the toggle overlay positioning, interaction and scroll behavior. +```typescript +const settings: OverlaySettings = { + closeOnOutsideClick: false, + modal: false + } +``` +--- +```html +<!--set--> +<div igxToggleAction [overlaySettings]="settings"></div> +``` + +## Methods + +### updateOverlaySettings() + +> `protected` **updateOverlaySettings**(`settings`): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L509) + +Updates provided overlay settings + +#### Parameters + +##### settings + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +settings to update + +#### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +returns updated copy of provided overlay settings diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToggleDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToggleDirective.md new file mode 100644 index 000000000..39dd398b9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxToggleDirective.md @@ -0,0 +1,328 @@ +# Class: IgxToggleDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L43) + +Common interface for Components with show and collapse functionality + +## Extended by + +- [`IgxTooltipDirective`](IgxTooltipDirective.md) +- [`IgxNotificationsDirective`](IgxNotificationsDirective.md) + +## Implements + +- [`IToggleView`](../interfaces/IToggleView.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxToggleDirective**(): `IgxToggleDirective` + +#### Returns + +`IgxToggleDirective` + +## Properties + +### \_overlayId + +> `protected` **\_overlayId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L193) + +*** + +### appended + +> **appended**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L143) + +Emits an event after the toggle element is appended to the overlay container. + +```typescript +onAppended() { + alert("Content appended!"); +} +``` + +```html +<div + igxToggle + (appended)='onToggleAppended()'> +</div> +``` + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L105) + +Emits an event after the toggle container is closed. + +```typescript +onToggleClosed(event) { + alert("Toggle closed!"); +} +``` + +```html +<div + igxToggle + (closed)='onToggleClosed($event)'> +</div> +``` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L124) + +Emits an event before the toggle container is closed. + +```typescript +onToggleClosing(event) { + alert("Toggle closing!"); +} +``` + +```html +<div + igxToggle + (closing)='onToggleClosing($event)'> +</div> +``` + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L196) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L160) + +Identifier which is registered into `IgxNavigationService` + +```typescript +let myToggleId = this.toggle.id; +``` + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L67) + +Emits an event after the toggle container is opened. + +```typescript +onToggleOpened(event) { + alert("Toggle opened!"); +} +``` + +```html +<div + igxToggle + (opened)='onToggleOpened($event)'> +</div> +``` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L86) + +Emits an event before the toggle container is opened. + +```typescript +onToggleOpening(event) { + alert("Toggle opening!"); +} +``` + +```html +<div + igxToggle + (opening)='onToggleOpening($event)'> +</div> +``` + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L46) + +## Accessors + +### overlayId + +#### Get Signature + +> **get** **overlayId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L303) + +Returns the id of the overlay the content is rendered in. +```typescript +this.myToggle.overlayId; +``` + +##### Returns + +`string` + +## Methods + +### close() + +> **close**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L262) + +Closes the toggle. + +```typescript +this.myToggle.close(); +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`close`](../interfaces/IToggleView.md#close) + +*** + +### open() + +> **open**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L213) + +Opens the toggle. + +```typescript +this.myToggle.open(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`open`](../interfaces/IToggleView.md#open) + +*** + +### reposition() + +> **reposition**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L313) + +Repositions the toggle. +```typescript +this.myToggle.reposition(); +``` + +#### Returns + +`void` + +*** + +### setOffset() + +> **setOffset**(`deltaX`, `deltaY`, `offsetMode?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L321) + +Offsets the content along the corresponding axis by the provided amount with optional +offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set + +#### Parameters + +##### deltaX + +`number` + +##### deltaY + +`number` + +##### offsetMode? + +[`OffsetMode`](../enumerations/OffsetMode.md) + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L281) + +Opens or closes the toggle, depending on its current state. + +```typescript +this.myToggle.toggle(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`toggle`](../interfaces/IToggleView.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTooltipDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTooltipDirective.md new file mode 100644 index 000000000..6a27cba08 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTooltipDirective.md @@ -0,0 +1,468 @@ +# Class: IgxTooltipDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts#L31) + +**Ignite UI for Angular Tooltip** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip) + +The Ignite UI for Angular Tooltip directive is used to mark an HTML element in the markup as one that should behave as a tooltip. +The tooltip is used in combination with the Ignite UI for Angular Tooltip Target by assigning the exported tooltip reference to the +respective target's selector property. + +Example: +```html +<button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +## Extends + +- [`IgxToggleDirective`](IgxToggleDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTooltipDirective**(): `IgxTooltipDirective` + +#### Returns + +`IgxTooltipDirective` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`constructor`](IgxToggleDirective.md#constructor) + +## Properties + +### \_overlayId + +> `protected` **\_overlayId**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L193) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`_overlayId`](IgxToggleDirective.md#_overlayid) + +*** + +### appended + +> **appended**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L143) + +Emits an event after the toggle element is appended to the overlay container. + +```typescript +onAppended() { + alert("Content appended!"); +} +``` + +```html +<div + igxToggle + (appended)='onToggleAppended()'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`appended`](IgxToggleDirective.md#appended) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L105) + +Emits an event after the toggle container is closed. + +```typescript +onToggleClosed(event) { + alert("Toggle closed!"); +} +``` + +```html +<div + igxToggle + (closed)='onToggleClosed($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`closed`](IgxToggleDirective.md#closed) + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L124) + +Emits an event before the toggle container is closed. + +```typescript +onToggleClosing(event) { + alert("Toggle closing!"); +} +``` + +```html +<div + igxToggle + (closing)='onToggleClosing($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`closing`](IgxToggleDirective.md#closing) + +*** + +### context + +> **context**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts#L64) + +Gets/sets any tooltip related data. +The 'context' can be used for storing any information that is necessary +to access when working with the tooltip. + +```typescript +// get +let tooltipContext = this.tooltip.context; +``` + +```typescript +// set +this.tooltip.context = "Tooltip's context"; +``` + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L196) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`destroy$`](IgxToggleDirective.md#destroy) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts#L76) + +Identifier for the tooltip. +If this is property is not explicitly set, it will be automatically generated. + +```typescript +let tooltipId = this.tooltip.id; +``` + +#### Overrides + +[`IgxToggleDirective`](IgxToggleDirective.md).[`id`](IgxToggleDirective.md#id) + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L67) + +Emits an event after the toggle container is opened. + +```typescript +onToggleOpened(event) { + alert("Toggle opened!"); +} +``` + +```html +<div + igxToggle + (opened)='onToggleOpened($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`opened`](IgxToggleDirective.md#opened) + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L86) + +Emits an event before the toggle container is opened. + +```typescript +onToggleOpening(event) { + alert("Toggle opening!"); +} +``` + +```html +<div + igxToggle + (opening)='onToggleOpening($event)'> +</div> +``` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`opening`](IgxToggleDirective.md#opening) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L46) + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`overlayService`](IgxToggleDirective.md#overlayservice) + +## Accessors + +### arrow + +#### Get Signature + +> **get** **arrow**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts#L101) + +Get the arrow element of the tooltip. + +```typescript +let tooltipArrow = this.tooltip.arrow; +``` + +##### Returns + +`HTMLElement` + +*** + +### overlayId + +#### Get Signature + +> **get** **overlayId**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L303) + +Returns the id of the overlay the content is rendered in. +```typescript +this.myToggle.overlayId; +``` + +##### Returns + +`string` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`overlayId`](IgxToggleDirective.md#overlayid) + +*** + +### role + +#### Get Signature + +> **get** **role**(): `"tooltip"` \| `"status"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts#L90) + +##### Returns + +`"tooltip"` \| `"status"` + +#### Set Signature + +> **set** **role**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts#L87) + +Get the role attribute of the tooltip. + +```typescript +let tooltipRole = this.tooltip.role; +``` + +##### Parameters + +###### value + +`"tooltip"` \| `"status"` + +##### Returns + +`void` + +## Methods + +### close() + +> **close**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L262) + +Closes the toggle. + +```typescript +this.myToggle.close(); +``` + +#### Parameters + +##### event? + +`Event` + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`close`](IgxToggleDirective.md#close) + +*** + +### open() + +> **open**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L213) + +Opens the toggle. + +```typescript +this.myToggle.open(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`open`](IgxToggleDirective.md#open) + +*** + +### reposition() + +> **reposition**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L313) + +Repositions the toggle. +```typescript +this.myToggle.reposition(); +``` + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`reposition`](IgxToggleDirective.md#reposition) + +*** + +### setOffset() + +> **setOffset**(`deltaX`, `deltaY`, `offsetMode?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L321) + +Offsets the content along the corresponding axis by the provided amount with optional +offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set + +#### Parameters + +##### deltaX + +`number` + +##### deltaY + +`number` + +##### offsetMode? + +[`OffsetMode`](../enumerations/OffsetMode.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`setOffset`](IgxToggleDirective.md#setoffset) + +*** + +### toggle() + +> **toggle**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L281) + +Opens or closes the toggle, depending on its current state. + +```typescript +this.myToggle.toggle(); +``` + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxToggleDirective`](IgxToggleDirective.md).[`toggle`](IgxToggleDirective.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTooltipTargetDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTooltipTargetDirective.md new file mode 100644 index 000000000..1576ad29c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTooltipTargetDirective.md @@ -0,0 +1,644 @@ +# Class: IgxTooltipTargetDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L49) + +**Ignite UI for Angular Tooltip Target** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip) + +The Ignite UI for Angular Tooltip Target directive is used to mark an HTML element in the markup as one that has a tooltip. +The tooltip target is used in combination with the Ignite UI for Angular Tooltip by assigning the exported tooltip reference to the +target's selector property. + +Example: +```html +<button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +## Extends + +- [`IgxToggleActionDirective`](IgxToggleActionDirective.md) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTooltipTargetDirective**(): `IgxTooltipTargetDirective` + +#### Returns + +`IgxTooltipTargetDirective` + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`constructor`](IgxToggleActionDirective.md#constructor) + +## Properties + +### \_overlayDefaults + +> `protected` **\_overlayDefaults**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:471](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L471) + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`_overlayDefaults`](IgxToggleActionDirective.md#_overlaydefaults) + +*** + +### \_target + +> `protected` **\_target**: `string` \| [`IToggleView`](../interfaces/IToggleView.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:472](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L472) + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`_target`](IgxToggleActionDirective.md#_target) + +*** + +### element + +> `protected` **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L419) + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`element`](IgxToggleActionDirective.md#element) + +*** + +### hideDelay + +> **hideDelay**: `number` = `300` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L82) + +Gets/sets the amount of milliseconds that should pass before hiding the tooltip. + +```typescript +// get +let tooltipHideDelay = this.tooltipTarget.hideDelay; +``` + +```html +<!--set--> +<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [hideDelay]="1500">Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +*** + +### navigationService + +> `protected` **navigationService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L420) + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`navigationService`](IgxToggleActionDirective.md#navigationservice) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L449) + +Determines where the toggle element overlay should be attached. + +```html +<!--set--> +<div igxToggleAction [igxToggleOutlet]="outlet"></div> +``` +Where `outlet` in an instance of `IgxOverlayOutletDirective` or an `ElementRef` + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`outlet`](IgxToggleActionDirective.md#outlet) + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L437) + +Provide settings that control the toggle overlay positioning, interaction and scroll behavior. +```typescript +const settings: OverlaySettings = { + closeOnOutsideClick: false, + modal: false + } +``` +--- +```html +<!--set--> +<div igxToggleAction [overlaySettings]="settings"></div> +``` + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`overlaySettings`](IgxToggleActionDirective.md#overlaysettings) + +*** + +### showDelay + +> **showDelay**: `number` = `200` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L65) + +Gets/sets the amount of milliseconds that should pass before showing the tooltip. + +```typescript +// get +let tooltipShowDelay = this.tooltipTarget.showDelay; +``` + +```html +<!--set--> +<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [showDelay]="1500">Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +*** + +### tooltipDisabled + +> **tooltipDisabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L233) + +Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false) +While setting this property to 'true' will disable the user interactions that shows/hides the tooltip, +the developer will still be able to show/hide the tooltip through the API. + +```typescript +// get +let tooltipDisabledValue = this.tooltipTarget.tooltipDisabled; +``` + +```html +<!--set--> +<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +*** + +### tooltipHide + +> **tooltipHide**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:367](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L367) + +Emits an event when the tooltip that is associated with this target starts hiding. +This event is fired before the start of the countdown to hiding the tooltip. + +```typescript +tooltipHiding(args: ITooltipHideEventArgs) { + alert("Tooltip started hiding!"); +} +``` + +```html +<button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipHide)='tooltipHiding($event)'>Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +*** + +### tooltipShow + +> **tooltipShow**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L349) + +Emits an event when the tooltip that is associated with this target starts showing. +This event is fired before the start of the countdown to showing the tooltip. + +```typescript +tooltipShowing(args: ITooltipShowEventArgs) { + alert("Tooltip started showing!"); +} +``` + +```html +<button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipShow)='tooltipShowing($event)'>Hover me</button> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +## Accessors + +### closeTemplate + +#### Get Signature + +> **get** **closeTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L176) + +##### Returns + +`any` + +#### Set Signature + +> **set** **closeTemplate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L171) + +Allows full control over the appearance of the close button inside the tooltip. + +```typescript +// get +let customCloseTemplate = this.tooltip.customCloseTemplate; +``` + +```typescript +// set +this.tooltip.customCloseTemplate = TemplateRef<any>; +``` + +```html +<!--set--> +<igx-icon igxTooltipTarget [closeButtonTemplate]="customClose" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon> +<ng-template #customClose> + <button class="my-close-btn">Close Me</button> +</ng-template> +``` + +##### Parameters + +###### value + +`TemplateRef`\<`any`\> + +##### Returns + +`void` + +*** + +### hasArrow + +#### Get Signature + +> **get** **hasArrow**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L111) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hasArrow**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L104) + +Controls whether to display an arrow indicator for the tooltip. +Set to true to show the arrow. Default value is `false`. + +```typescript +// get +let isArrowDisabled = this.tooltip.hasArrow; +``` + +```typescript +// set +this.tooltip.hasArrow = true; +``` + +```html +<!--set--> +<igx-icon igxTooltipTarget [hasArrow]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### hideTriggers + +#### Get Signature + +> **get** **hideTriggers**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L265) + +Which event triggers will hide the tooltip. +Expects a comma-separated string of different event triggers. +Defaults to `pointerleave` and `click`. +```html +<igx-icon [igxTooltipTarget]="tooltipRef" [hideTriggers]="'keypress,blur'">info</igx-icon> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **hideTriggers**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L269) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:318](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L318) + +Gets the respective native element of the directive. + +```typescript +let tooltipTargetElement = this.tooltipTarget.nativeElement; +``` + +##### Returns + +`any` + +*** + +### positionSettings + +#### Get Signature + +> **get** **positionSettings**(): [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L187) + +Get the position and animation settings used by the tooltip. +```typescript +let positionSettings = this.tooltipTarget.positionSettings; +``` + +##### Returns + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Set Signature + +> **set** **positionSettings**(`settings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L209) + +Set the position and animation settings used by the tooltip. +```html +<igx-icon [igxTooltipTarget]="tooltipRef" [positionSettings]="newPositionSettings">info</igx-icon> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` +```typescript + +import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular'; +... +public newPositionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Right, + horizontalStartPoint: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Top, + verticalStartPoint: VerticalAlignment.Top, +}; +``` + +##### Parameters + +###### settings + +[`PositionSettings`](../interfaces/PositionSettings.md) + +##### Returns + +`void` + +*** + +### showTriggers + +#### Get Signature + +> **get** **showTriggers**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L245) + +Which event triggers will show the tooltip. +Expects a comma-separated string of different event triggers. +Defaults to `pointerenter`. +```html +<igx-icon [igxTooltipTarget]="tooltipRef" [showTriggers]="'click,focus'">info</igx-icon> +<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **showTriggers**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L249) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### sticky + +#### Get Signature + +> **get** **sticky**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L144) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **sticky**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L134) + +Specifies if the tooltip remains visible until the user closes it via the close button or Esc key. + +```typescript +// get +let isSticky = this.tooltip.sticky; +``` + +```typescript +// set +this.tooltip.sticky = true; +``` + +```html +<!--set--> +<igx-icon igxTooltipTarget [sticky]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### tooltip + +#### Set Signature + +> **set** **tooltip**(`content`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L302) + +Specifies a plain text as tooltip content. +```html +<igx-icon igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">info</igx-icon> +``` + +##### Parameters + +###### content + +`any` + +##### Returns + +`void` + +*** + +### tooltipHidden + +#### Get Signature + +> **get** **tooltipHidden**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:329](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L329) + +Indicates if the tooltip that is is associated with this target is currently hidden. + +```typescript +let tooltipHiddenValue = this.tooltipTarget.tooltipHidden; +``` + +##### Returns + +`boolean` + +## Methods + +### hideTooltip() + +> **hideTooltip**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:484](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L484) + +Hides the tooltip if not already hidden. + +```typescript +this.tooltipTarget.hideTooltip(); +``` + +#### Returns + +`void` + +*** + +### showTooltip() + +> **showTooltip**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L473) + +Shows the tooltip if not already shown. + +```typescript +this.tooltipTarget.showTooltip(); +``` + +#### Returns + +`void` + +*** + +### updateOverlaySettings() + +> `protected` **updateOverlaySettings**(`settings`): [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L509) + +Updates provided overlay settings + +#### Parameters + +##### settings + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +settings to update + +#### Returns + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +returns updated copy of provided overlay settings + +#### Inherited from + +[`IgxToggleActionDirective`](IgxToggleActionDirective.md).[`updateOverlaySettings`](IgxToggleActionDirective.md#updateoverlaysettings) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTransactionService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTransactionService.md new file mode 100644 index 000000000..debd58cac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTransactionService.md @@ -0,0 +1,731 @@ +# Class: IgxTransactionService\<T, S\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L5) + +## Extends + +- [`IgxBaseTransactionService`](IgxBaseTransactionService.md)\<`T`, `S`\> + +## Type Parameters + +### T + +`T` *extends* [`Transaction`](../interfaces/Transaction.md) + +### S + +`S` *extends* [`State`](../interfaces/State.md) + +## Constructors + +### Constructor + +> **new IgxTransactionService**\<`T`, `S`\>(): `IgxTransactionService`\<`T`, `S`\> + +#### Returns + +`IgxTransactionService`\<`T`, `S`\> + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`constructor`](IgxBaseTransactionService.md#constructor) + +## Properties + +### \_isPending + +> `protected` **\_isPending**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L46) + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`_isPending`](IgxBaseTransactionService.md#_ispending) + +*** + +### \_pendingStates + +> `protected` **\_pendingStates**: `Map`\<`any`, `S`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L48) + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`_pendingStates`](IgxBaseTransactionService.md#_pendingstates) + +*** + +### \_pendingTransactions + +> `protected` **\_pendingTransactions**: `T`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L47) + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`_pendingTransactions`](IgxBaseTransactionService.md#_pendingtransactions) + +*** + +### \_redoStack + +> `protected` **\_redoStack**: [`Action`](../interfaces/Action.md)\<`T`\>[][] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L8) + +*** + +### \_states + +> `protected` **\_states**: `Map`\<`any`, `S`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L10) + +*** + +### \_transactions + +> `protected` **\_transactions**: `T`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L7) + +*** + +### \_undoStack + +> `protected` **\_undoStack**: [`Action`](../interfaces/Action.md)\<`T`\>[][] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L9) + +*** + +### onStateUpdate + +> **onStateUpdate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L44) + +Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`onStateUpdate`](IgxBaseTransactionService.md#onstateupdate) + +## Accessors + +### canRedo + +#### Get Signature + +> **get** **canRedo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L22) + +##### Returns + +`boolean` + +if there are any transactions in the Redo stack + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`canRedo`](IgxBaseTransactionService.md#canredo) + +*** + +### canUndo + +#### Get Signature + +> **get** **canUndo**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L15) + +##### Returns + +`boolean` + +if there are any transactions in the Undo stack + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`canUndo`](IgxBaseTransactionService.md#canundo) + +*** + +### cloneStrategy + +#### Get Signature + +> **get** **cloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L10) + +Gets/Sets the data clone strategy used to clone data + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **cloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L14) + +Gets/Sets the data clone strategy used to clone data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Gets/Sets the data clone strategy used to clone data + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`cloneStrategy`](IgxBaseTransactionService.md#clonestrategy) + +*** + +### enabled + +#### Get Signature + +> **get** **enabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L81) + +Returns whether transaction is enabled for this service + +##### Returns + +`boolean` + +Returns whether transaction is enabled for this service + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`enabled`](IgxBaseTransactionService.md#enabled) + +## Methods + +### add() + +> **add**(`transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L32) + +Adds provided transaction with recordRef if any + +#### Parameters + +##### transaction + +`T` + +Transaction to be added + +##### recordRef? + +`any` + +Reference to the value of the record in the data source related to the changed item + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`add`](IgxBaseTransactionService.md#add) + +*** + +### addTransaction() + +> `protected` **addTransaction**(`transaction`, `states`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L219) + +#### Parameters + +##### transaction + +`T` + +##### states + +`Map`\<`any`, `S`\> + +##### recordRef? + +`any` + +#### Returns + +`void` + +*** + +### cleanState() + +> `protected` **cleanState**(`id`, `states`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L223) + +Compares the state with recordRef and clears all duplicated values. If any state ends as +empty object removes it from states. + +#### Parameters + +##### id + +`any` + +##### states + +`Map`\<`any`, `S`\> + +#### Returns + +`void` + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`cleanState`](IgxBaseTransactionService.md#cleanstate) + +*** + +### clear() + +> **clear**(`id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L163) + +Clears all transactions + +#### Parameters + +##### id? + +`any` + +Optional record id to clear transactions for + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`clear`](IgxBaseTransactionService.md#clear) + +*** + +### commit() + +> **commit**(`data`, `id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L144) + +Applies all transactions over the provided data + +#### Parameters + +##### data + +`any`[] + +Data source to update + +##### id? + +`any` + +Optional record id to commit transactions for + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`commit`](IgxBaseTransactionService.md#commit) + +*** + +### endPending() + +> **endPending**(`commit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L118) + +Clears all pending transactions and aggregated pending state. If commit is set to true +commits pending states as single transaction + +#### Parameters + +##### commit + +`boolean` + +Should commit the pending states + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`endPending`](IgxBaseTransactionService.md#endpending) + +*** + +### getAggregatedChanges() + +> **getAggregatedChanges**(`mergeChanges`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L58) + +Returns aggregated changes from all transactions + +#### Parameters + +##### mergeChanges + +`boolean` + +If set to true will merge each state's value over relate recordRef +and will record resulting value in the related transaction + +#### Returns + +`T`[] + +Collection of aggregated transactions for each changed record + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`getAggregatedChanges`](IgxBaseTransactionService.md#getaggregatedchanges) + +*** + +### getAggregatedValue() + +> **getAggregatedValue**(`id`, `mergeChanges`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L93) + +Returns value of the required id including all uncommitted changes + +#### Parameters + +##### id + +`any` + +The id of the record to return value for + +##### mergeChanges + +`boolean` + +If set to true will merge state's value over relate recordRef +and will return merged value + +#### Returns + +`any` + +Value with changes or **null** + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`getAggregatedValue`](IgxBaseTransactionService.md#getaggregatedvalue) + +*** + +### getState() + +> **getState**(`id`, `pending?`): `S` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L74) + +Returns the state of the record with provided id + +#### Parameters + +##### id + +`any` + +The id of the record + +##### pending? + +`boolean` = `false` + +Should get pending state + +#### Returns + +`S` + +State of the record if any + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`getState`](IgxBaseTransactionService.md#getstate) + +*** + +### getTransactionLog() + +> **getTransactionLog**(`id?`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L44) + +Returns all recorded transactions in chronological order + +#### Parameters + +##### id? + +`any` + +Optional record id to get transactions for + +#### Returns + +`T`[] + +All transaction in the service or for the specified record + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`getTransactionLog`](IgxBaseTransactionService.md#gettransactionlog) + +*** + +### mergeValues() + +> `protected` **mergeValues**\<`U`\>(`first`, `second`): `U` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L209) + +Merges second values in first value and the result in empty object. If values are primitive type +returns second value if exists, or first value. + +#### Type Parameters + +##### U + +`U` + +#### Parameters + +##### first + +`U` + +Value to merge into + +##### second + +`U` + +Value to merge + +#### Returns + +`U` + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`mergeValues`](IgxBaseTransactionService.md#mergevalues) + +*** + +### redo() + +> **redo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L206) + +Applies the last undone transaction if any + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`redo`](IgxBaseTransactionService.md#redo) + +*** + +### startPending() + +> **startPending**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L152) + +Starts pending transactions. All transactions passed after call to startPending +will not be added to transaction log + +#### Returns + +`void` + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`startPending`](IgxBaseTransactionService.md#startpending) + +*** + +### undo() + +> **undo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L184) + +Remove the last transaction if any + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`undo`](IgxBaseTransactionService.md#undo) + +*** + +### updateRecord() + +> `protected` **updateRecord**(`data`, `state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L317) + +Updates state related record in the provided data + +#### Parameters + +##### data + +`any`[] + +Data source to update + +##### state + +`S` + +State to update data from + +#### Returns + +`void` + +*** + +### updateState() + +> `protected` **updateState**(`states`, `transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L269) + +Updates the provided states collection according to passed transaction and recordRef + +#### Parameters + +##### states + +`Map`\<`any`, `S`\> + +States collection to apply the update to + +##### transaction + +`T` + +Transaction to apply to the current state + +##### recordRef? + +`any` + +Reference to the value of the record in data source, if any, where transaction should be applied + +#### Returns + +`void` + +#### Overrides + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`updateState`](IgxBaseTransactionService.md#updatestate) + +*** + +### updateValue() + +> `protected` **updateValue**(`state`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts#L198) + +Updates the recordRef of the provided state with all the changes in the state. Accepts primitive and object value types + +#### Parameters + +##### state + +`S` + +State to update value for + +#### Returns + +`any` + +updated value including all the changes in provided state + +#### Inherited from + +[`IgxBaseTransactionService`](IgxBaseTransactionService.md).[`updateValue`](IgxBaseTransactionService.md#updatevalue) + +*** + +### verifyAddedTransaction() + +> `protected` **verifyAddedTransaction**(`states`, `transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts#L238) + +Verifies if the passed transaction is correct. If not throws an exception. + +#### Parameters + +##### states + +`Map`\<`any`, `S`\> + +##### transaction + +`T` + +Transaction to be verified + +##### recordRef? + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeComponent.md new file mode 100644 index 000000000..0220ed9c8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeComponent.md @@ -0,0 +1,555 @@ +# Class: IgxTreeComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L80) + +IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion. + +## Igx Module + +IgxTreeModule + +## Igx Keywords + +tree + +## Igx Theme + +igx-tree-theme + +## Igx Group + +Grids & Lists + +## Remark + +The Angular Tree Component allows users to represent hierarchical data in a tree-view structure, +maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. +Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. +The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation, +bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more. + +## Example + +```html +<igx-tree> + <igx-tree-node> + I am a parent node 1 + <igx-tree-node> + I am a child node 1 + </igx-tree-node> + ... + </igx-tree-node> + ... +</igx-tree> +``` + +## Implements + +- [`IgxTree`](../interfaces/IgxTree.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTreeComponent**(): `IgxTreeComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L315) + +#### Returns + +`IgxTreeComponent` + +## Properties + +### activeNodeChanged + +> **activeNodeChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:264](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L264) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree> +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`activeNodeChanged`](../interfaces/IgxTree.md#activenodechanged) + +*** + +### animationSettings + +> **animationSettings**: `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L159) + +Get/Set the animation settings that branches should use when expanding/collpasing. + +```html +<igx-tree [animationSettings]="customAnimationSettings"> +</igx-tree> +``` + +```typescript +const animationSettings: ToggleAnimationSettings = { + openAnimation: growVerIn, + closeAnimation: growVerOut +}; + +this.tree.animationSettings = animationSettings; +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`animationSettings`](../interfaces/IgxTree.md#animationsettings) + +*** + +### cssClass + +> **cssClass**: `string` = `'igx-tree'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L89) + +*** + +### expandIndicator + +> **expandIndicator**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L277) + +A custom template to be used for the expand indicator of nodes +```html +<igx-tree> + <ng-template igxTreeExpandIndicator let-expanded> + <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon> + </ng-template> +</igx-tree> +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`expandIndicator`](../interfaces/IgxTree.md#expandindicator) + +*** + +### nodeCollapsed + +> **nodeCollapsed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L253) + +Emitted when a node is collapsed, after it finishes + +#### Example + +```html +<igx-tree (nodeCollapsed)="handleNodeCollapsed($event)"> +</igx-tree> +``` +```typescript +public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) { + const collapsedNode: IgxTreeNode<any> = event.node; + console.log("Node is collapsed: ", collapsedNode.data); +} +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`nodeCollapsed`](../interfaces/IgxTree.md#nodecollapsed) + +*** + +### nodeCollapsing + +> **nodeCollapsing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L236) + +Emitted when a node is collapsing, before it finishes + +```html +<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)"> +</igx-tree> +``` + +```typescript +public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) { + const collapsedNode: IgxTreeNode<any> = event.node; + if (collapsedNode.alwaysOpen) { + event.cancel = true; + } +} +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`nodeCollapsing`](../interfaces/IgxTree.md#nodecollapsing) + +*** + +### nodeExpanded + +> **nodeExpanded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L217) + +Emitted when a node is expanded, after it finishes + +```html +<igx-tree (nodeExpanded)="handleNodeExpanded($event)"> +</igx-tree> +``` + +```typescript +public handleNodeExpanded(event: ITreeNodeToggledEventArgs) { + const expandedNode: IgxTreeNode<any> = event.node; + console.log("Node is expanded: ", expandedNode.data); +} +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`nodeExpanded`](../interfaces/IgxTree.md#nodeexpanded) + +*** + +### nodeExpanding + +> **nodeExpanding**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L200) + +Emitted when a node is expanding, before it finishes + +```html +<igx-tree (nodeExpanding)="handleNodeExpanding($event)"> +</igx-tree> +``` + +```typescript +public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) { + const expandedNode: IgxTreeNode<any> = event.node; + if (expandedNode.disabled) { + event.cancel = true; + } +} +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`nodeExpanding`](../interfaces/IgxTree.md#nodeexpanding) + +*** + +### nodeSelection + +> **nodeSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L181) + +Emitted when the node selection is changed through interaction + +```html +<igx-tree (nodeSelection)="handleNodeSelection($event)"> +</igx-tree> +``` + +```typescript +public handleNodeSelection(event: ITreeNodeSelectionEvent) { + const newSelection: IgxTreeNode<any>[] = event.newSelection; + const added: IgxTreeNode<any>[] = event.added; + console.log("New selection will be: ", newSelection); + console.log("Added nodes: ", event.added); +} +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`nodeSelection`](../interfaces/IgxTree.md#nodeselection) + +*** + +### singleBranchExpand + +> **singleBranchExpand**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L123) + +Get/Set how the tree should handle branch expansion. +If set to `true`, only a single branch can be expanded at a time, collapsing all others + +```html +<igx-tree [singleBranchExpand]="true"> +... +</igx-tree> +``` + +```typescript +const tree: IgxTree = this.tree; +this.tree.singleBranchExpand = false; +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`singleBranchExpand`](../interfaces/IgxTree.md#singlebranchexpand) + +*** + +### toggleNodeOnClick + +> **toggleNodeOnClick**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L139) + +Get/Set if nodes should be expanded/collapsed when clicking over them. + +```html +<igx-tree [toggleNodeOnClick]="true"> +... +</igx-tree> +``` + +```typescript +const tree: IgxTree = this.tree; +this.tree.toggleNodeOnClick = false; +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`toggleNodeOnClick`](../interfaces/IgxTree.md#togglenodeonclick) + +## Accessors + +### rootNodes + +#### Get Signature + +> **get** **rootNodes**(): [`IgxTreeNodeComponent`](IgxTreeNodeComponent.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L294) + +Returns all **root level** nodes + +```typescript +const tree: IgxTree = this.tree; +const rootNodes: IgxTreeNodeComponent<any>[] = tree.rootNodes; +``` + +##### Returns + +[`IgxTreeNodeComponent`](IgxTreeNodeComponent.md)\<`any`\>[] + +#### Implementation of + +`IgxTree.rootNodes` + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): [`IgxTreeSelectionType`](../type-aliases/IgxTreeSelectionType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L99) + +Gets/Sets tree selection mode + +##### Remarks + +By default the tree selection mode is 'None' + +##### Returns + +[`IgxTreeSelectionType`](../type-aliases/IgxTreeSelectionType.md) + +#### Set Signature + +> **set** **selection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L103) + +##### Parameters + +###### selectionMode + +[`IgxTreeSelectionType`](../type-aliases/IgxTreeSelectionType.md) + +##### Returns + +`void` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`selection`](../interfaces/IgxTree.md#selection) + +## Methods + +### collapseAll() + +> **collapseAll**(`nodes?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L353) + +Collapses all of the passed nodes. +If no nodes are passed, collapses ALL nodes + +#### Parameters + +##### nodes? + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\>[] + +nodes to be collapsed + +```typescript +const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.collapsible); +tree.collapseAll(nodes); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`collapseAll`](../interfaces/IgxTree.md#collapseall) + +*** + +### deselectAll() + +> **deselectAll**(`nodes?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L371) + +Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection. + +#### Parameters + +##### nodes? + +[`IgxTreeNodeComponent`](IgxTreeNodeComponent.md)\<`any`\>[] + +#### Returns + +`void` + +#### Example + +```typescript + const arr = [ + this.tree.nodes.toArray()[0], + this.tree.nodes.toArray()[1] + ]; + this.tree.deselectAll(arr); +``` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`deselectAll`](../interfaces/IgxTree.md#deselectall) + +*** + +### expandAll() + +> **expandAll**(`nodes?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L337) + +Expands all of the passed nodes. +If no nodes are passed, expands ALL nodes + +#### Parameters + +##### nodes? + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\>[] + +nodes to be expanded + +```typescript +const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.expandable); +tree.expandAll(nodes); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`expandAll`](../interfaces/IgxTree.md#expandall) + +*** + +### findNodes() + +> **findNodes**(`searchTerm`, `comparer?`): [`IgxTreeNodeComponent`](IgxTreeNodeComponent.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree.component.ts#L411) + +Returns all of the nodes that match the passed searchTerm. +Accepts a custom comparer function for evaluating the search term against the nodes. + +#### Parameters + +##### searchTerm + +`any` + +The data of the searched node + +##### comparer? + +[`IgxTreeSearchResolver`](../type-aliases/IgxTreeSearchResolver.md) + +A custom comparer function that evaluates the passed `searchTerm` against all nodes. + +#### Returns + +[`IgxTreeNodeComponent`](IgxTreeNodeComponent.md)\<`any`\>[] + +Array of nodes that match the search. `null` if no nodes are found. + +```html +<igx-tree> + <igx-tree-node *ngFor="let node of data" [data]="node"> + {{ node.label }} + </igx-tree-node> +</igx-tree> +``` + +```typescript +public data: DataEntry[] = FETCHED_DATA; +... +const matchedNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(searchTerm: data[5]); +``` + +Using a custom comparer +```typescript +public data: DataEntry[] = FETCHED_DATA; +... +const comparer: IgxTreeSearchResolver = (data: any, node: IgxTreeNode<DataEntry>) { + return node.data.index % 2 === 0; +} +const evenIndexNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(null, comparer); +``` + +#### Remarks + +Default search compares the passed `searchTerm` against the node's `data` Input. +When using `findNodes` w/o a `comparer`, make sure all nodes have `data` passed. + +#### Implementation of + +[`IgxTree`](../interfaces/IgxTree.md).[`findNodes`](../interfaces/IgxTree.md#findnodes) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeGridComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeGridComponent.md new file mode 100644 index 000000000..d3d9fd19d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeGridComponent.md @@ -0,0 +1,9243 @@ +# Class: IgxTreeGridComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L147) + +**Ignite UI for Angular Tree Grid** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) + +The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and +provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding. + +Example: +```html +<igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" [autoGenerate]="false"> + <igx-column field="first" header="First Name"></igx-column> + <igx-column field="last" header="Last Name"></igx-column> + <igx-column field="role" header="Role"></igx-column> +</igx-tree-grid> +``` + +## Extends + +- [`IgxGridBaseDirective`](IgxGridBaseDirective.md) + +## Implements + +- [`GridType`](../interfaces/GridType.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTreeGridComponent**(): `IgxTreeGridComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3500) + +#### Returns + +`IgxTreeGridComponent` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`constructor`](IgxGridBaseDirective.md#constructor) + +## Properties + +### \_allowAdvancedFiltering + +> `protected` **\_allowAdvancedFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3175) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_allowAdvancedFiltering`](IgxGridBaseDirective.md#_allowadvancedfiltering) + +*** + +### \_allowFiltering + +> `protected` **\_allowFiltering**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3174) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_allowFiltering`](IgxGridBaseDirective.md#_allowfiltering) + +*** + +### \_autoGeneratedCols + +> `protected` **\_autoGeneratedCols**: [`ColumnType`](../interfaces/ColumnType.md)[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3192) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoGeneratedCols`](IgxGridBaseDirective.md#_autogeneratedcols) + +*** + +### \_autoGeneratedColsRefs + +> `protected` **\_autoGeneratedColsRefs**: `ComponentRef`\<[`IgxColumnComponent`](IgxColumnComponent.md)\>[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3193) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoGeneratedColsRefs`](IgxGridBaseDirective.md#_autogeneratedcolsrefs) + +*** + +### \_autoSizeColumnsNotify + +> `protected` **\_autoSizeColumnsNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3185) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_autoSizeColumnsNotify`](IgxGridBaseDirective.md#_autosizecolumnsnotify) + +*** + +### \_batchEditing + +> `protected` **\_batchEditing**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3189) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_batchEditing`](IgxGridBaseDirective.md#_batchediting) + +*** + +### \_cdrRequestRepaint + +> `protected` **\_cdrRequestRepaint**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3186) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_cdrRequestRepaint`](IgxGridBaseDirective.md#_cdrrequestrepaint) + +*** + +### \_dataView + +> `protected` **\_dataView**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3194) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_dataView`](IgxGridBaseDirective.md#_dataview) + +*** + +### \_defaultExpandState + +> `protected` **\_defaultExpandState**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3181) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_defaultExpandState`](IgxGridBaseDirective.md#_defaultexpandstate) + +*** + +### \_defaultTargetRecordNumber + +> `protected` **\_defaultTargetRecordNumber**: `number` = `10` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3179) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_defaultTargetRecordNumber`](IgxGridBaseDirective.md#_defaulttargetrecordnumber) + +*** + +### \_diTransactions + +> `protected` **\_diTransactions**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L148) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_diTransactions`](IgxGridBaseDirective.md#_ditransactions) + +*** + +### \_expansionStates + +> `protected` **\_expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3180) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_expansionStates`](IgxGridBaseDirective.md#_expansionstates) + +*** + +### \_filterMode + +> `protected` **\_filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) = `FilterMode.quickFilter` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3176) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_filterMode`](IgxGridBaseDirective.md#_filtermode) + +*** + +### \_filterStrategy + +> `protected` **\_filterStrategy**: [`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L324) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_filterStrategy`](IgxGridBaseDirective.md#_filterstrategy) + +*** + +### \_firstAutoResize + +> `protected` **\_firstAutoResize**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3184) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_firstAutoResize`](IgxGridBaseDirective.md#_firstautoresize) + +*** + +### \_headerFeaturesWidth + +> `protected` **\_headerFeaturesWidth**: `number` = `NaN` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3182) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_headerFeaturesWidth`](IgxGridBaseDirective.md#_headerfeatureswidth) + +*** + +### \_hGridSchema + +> `protected` **\_hGridSchema**: [`EntityType`](../interfaces/EntityType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3204) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_hGridSchema`](IgxGridBaseDirective.md#_hgridschema) + +*** + +### \_init + +> `protected` **\_init**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3183) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_init`](IgxGridBaseDirective.md#_init) + +*** + +### \_lastSearchInfo + +> `protected` **\_lastSearchInfo**: [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3195) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_lastSearchInfo`](IgxGridBaseDirective.md#_lastsearchinfo) + +*** + +### \_pinnedRecordIDs + +> `protected` **\_pinnedRecordIDs**: `any`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3164) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_pinnedRecordIDs`](IgxGridBaseDirective.md#_pinnedrecordids) + +*** + +### \_resourceStrings + +> `protected` **\_resourceStrings**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3206) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_resourceStrings`](IgxGridBaseDirective.md#_resourcestrings) + +*** + +### \_sortingOptions + +> `protected` **\_sortingOptions**: [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3190) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_sortingOptions`](IgxGridBaseDirective.md#_sortingoptions) + +*** + +### \_summaryRowList + +> `protected` **\_summaryRowList**: `QueryList`\<[`IgxSummaryRowComponent`](IgxSummaryRowComponent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1795) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_summaryRowList`](IgxGridBaseDirective.md#_summaryrowlist) + +*** + +### \_transactions + +> `protected` **\_transactions**: [`HierarchicalTransactionService`](../interfaces/HierarchicalTransactionService.md)\<`HierarchicalTransaction`, `HierarchicalState`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:325](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L325) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_transactions`](IgxGridBaseDirective.md#_transactions) + +*** + +### \_userOutletDirective + +> `protected` **\_userOutletDirective**: [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3187) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_userOutletDirective`](IgxGridBaseDirective.md#_useroutletdirective) + +*** + +### activeNodeChange + +> **activeNodeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1059](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1059) + +Emitted when the active node is changed. + +#### Example + +``` +<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`activeNodeChange`](../interfaces/GridType.md#activenodechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`activeNodeChange`](IgxGridBaseDirective.md#activenodechange) + +*** + +### addRowEmptyTemplate + +> **addRowEmptyTemplate**: `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L263) + +Gets/Sets a custom template for adding row UI when grid is empty. + +#### Example + +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`addRowEmptyTemplate`](IgxGridBaseDirective.md#addrowemptytemplate) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:380](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L380) + +Emitted after advanced filtering is performed. + +#### Remarks + +Returns the advanced filtering expressions tree. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTreeChange`](../interfaces/GridType.md#advancedfilteringexpressionstreechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`advancedFilteringExpressionsTreeChange`](IgxGridBaseDirective.md#advancedfilteringexpressionstreechange) + +*** + +### autoGenerate + +> **autoGenerate**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L206) + +Gets/Sets whether to auto-generate the columns. + +#### Remarks + +The default value is false. When set to true, it will override all columns declared through code or in markup. + +#### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoGenerate`](IgxGridBaseDirective.md#autogenerate) + +*** + +### autoGenerateExclude + +> **autoGenerateExclude**: `string`[] = `[]` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L223) + +Gets/Sets a list of property keys to be excluded from the generated column collection + +#### Remarks + +The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime +unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their +[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. + +#### Example + +```html +<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid> +``` +```typescript +const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoGenerateExclude`](IgxGridBaseDirective.md#autogenerateexclude) + +*** + +### baseClass + +> `protected` **baseClass**: `string` = `'igx-grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1813) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`baseClass`](IgxGridBaseDirective.md#baseclass) + +*** + +### cascadeOnDelete + +> **cascadeOnDelete**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L200) + +Sets whether child records should be deleted when their parent gets deleted. +By default it is set to true and deletes all children along with the parent. +```html +<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false"> +</igx-tree-grid> +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cascadeOnDelete`](../interfaces/GridType.md#cascadeondelete) + +*** + +### cdr + +> `readonly` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L162) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cdr`](../interfaces/GridType.md#cdr) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cdr`](IgxGridBaseDirective.md#cdr) + +*** + +### cellClick + +> **cellClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L494) + +Emitted when a cell is clicked. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellClick`](../interfaces/GridType.md#cellclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellClick`](IgxGridBaseDirective.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:640](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L640) + +Emitted when cell has been edited. + +#### Remarks + +Event is fired after editing is completed, when the cell is exiting edit mode. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEdit`](../interfaces/GridType.md#celledit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEdit`](IgxGridBaseDirective.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L653) + +Emitted after cell has been edited and editing has been committed. + +#### Example + +```html +<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditDone`](../interfaces/GridType.md#celleditdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEditDone`](IgxGridBaseDirective.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L613) + +Emitted when cell enters edit mode. + +#### Remarks + +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditEnter`](../interfaces/GridType.md#celleditenter) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEditEnter`](IgxGridBaseDirective.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L625) + +Emitted when cell exits edit mode. + +#### Example + +```html +<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellEditExit`](../interfaces/GridType.md#celleditexit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellEditExit`](IgxGridBaseDirective.md#celleditexit) + +*** + +### childDataKey + +> **childDataKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L160) + +Sets the child data key of the `IgxTreeGridComponent`. +```html +<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid> +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`childDataKey`](../interfaces/GridType.md#childdatakey) + +*** + +### clipboardOptions + +> **clipboardOptions**: [`IClipboardOptions`](../interfaces/IClipboardOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L335) + +Controls the copy behavior of the grid. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clipboardOptions`](IgxGridBaseDirective.md#clipboardoptions) + +*** + +### colResizingService + +> `protected` **colResizingService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L153) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`colResizingService`](IgxGridBaseDirective.md#colresizingservice) + +*** + +### columnInit + +> **columnInit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L732) + +Emitted when a column is initialized. + +#### Remarks + +Returns the column object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnInit`](IgxGridBaseDirective.md#columninit) + +*** + +### columnMoving + +> **columnMoving**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L937) + +Emitted during the column moving operation. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. This event is cancelable. + +#### Example + +```html +<igx-grid (columnMoving)="moving($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMoving`](../interfaces/GridType.md#columnmoving) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnMoving`](IgxGridBaseDirective.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L950) + +Emitted when column moving ends. + +#### Remarks + +Returns the source and target `IgxColumnComponent` objects. + +#### Example + +```html +<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingEnd`](../interfaces/GridType.md#columnmovingend) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnMovingEnd`](IgxGridBaseDirective.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L924) + +Emitted when column moving starts. + +#### Remarks + +Returns the moved `IgxColumnComponent` object. + +#### Example + +```html +<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnMovingStart`](../interfaces/GridType.md#columnmovingstart) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnMovingStart`](IgxGridBaseDirective.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:582](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L582) + +Emitted before `IgxColumnComponent` is pinned. + +#### Remarks + +The index at which to insert the column may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPin`](../interfaces/GridType.md#columnpin) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnPin`](IgxGridBaseDirective.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L599) + +Emitted after `IgxColumnComponent` is pinned. + +#### Remarks + +The index that the column is inserted at may be changed through the `insertAtIndex` property. + +#### Example + +```typescript +public columnPinning(event) { + if (event.column.field === "Name") { + event.insertAtIndex = 0; + } +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnPinned`](../interfaces/GridType.md#columnpinned) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnPinned`](IgxGridBaseDirective.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L860) + +Emitted after column is resized. + +#### Remarks + +Returns the `IgxColumnComponent` object's old and new width. + +#### Example + +```html +<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnResized`](../interfaces/GridType.md#columnresized) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnResized`](IgxGridBaseDirective.md#columnresized) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:565](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L565) + +Emitted when `IgxColumnComponent` is selected. + +#### Example + +```html +<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelectionChanging`](../interfaces/GridType.md#columnselectionchanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnSelectionChanging`](IgxGridBaseDirective.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L911) + +Emitted after column visibility is changed. + +#### Remarks + +Args: { column: IgxColumnComponent, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanged`](../interfaces/GridType.md#columnvisibilitychanged) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnVisibilityChanged`](IgxGridBaseDirective.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L898) + +Emitted before column visibility is changed. + +#### Remarks + +Args: { column: any, newValue: boolean } + +#### Example + +```html +<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnVisibilityChanging`](../interfaces/GridType.md#columnvisibilitychanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnVisibilityChanging`](IgxGridBaseDirective.md#columnvisibilitychanging) + +*** + +### contextMenu + +> **contextMenu**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L872) + +Emitted when a cell or row is right clicked. + +#### Remarks + +Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. +```html +<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`contextMenu`](../interfaces/GridType.md#contextmenu) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`contextMenu`](IgxGridBaseDirective.md#contextmenu) + +*** + +### dataChanged + +> **dataChanged**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1129) + +Emitted after the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataChanged`](IgxGridBaseDirective.md#datachanged) + +*** + +### dataChanging + +> **dataChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1118) + +Emitted before the grid's data view is changed because of a data operation, rebinding, etc. + +#### Example + +```typescript + <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataChanging`](IgxGridBaseDirective.md#datachanging) + +*** + +### differs + +> `protected` **differs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L163) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`differs`](IgxGridBaseDirective.md#differs) + +*** + +### displayStyle + +> `protected` **displayStyle**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3452) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`displayStyle`](IgxGridBaseDirective.md#displaystyle) + +*** + +### doubleClick + +> **doubleClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L885) + +Emitted when a cell is double clicked. + +#### Remarks + +Returns the `IgxGridCell` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`doubleClick`](../interfaces/GridType.md#doubleclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`doubleClick`](IgxGridBaseDirective.md#doubleclick) + +*** + +### emptyDirectiveTemplate + +> `protected` **emptyDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1713](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1713) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyDirectiveTemplate`](IgxGridBaseDirective.md#emptydirectivetemplate) + +*** + +### envInjector + +> `protected` **envInjector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L166) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`envInjector`](IgxGridBaseDirective.md#envinjector) + +*** + +### expansionStatesChange + +> **expansionStatesChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1003](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1003) + +Emitted when the rows are expanded or collapsed. + +#### Example + +```html +<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expansionStatesChange`](IgxGridBaseDirective.md#expansionstateschange) + +*** + +### filtering + +> **filtering**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L778) + +Emitted before filtering expressions are applied. + +#### Remarks + +Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filtering`](../interfaces/GridType.md#filtering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filtering`](IgxGridBaseDirective.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L791) + +Emitted after filtering is performed through the UI. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringDone`](../interfaces/GridType.md#filteringdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringDone`](IgxGridBaseDirective.md#filteringdone) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L366) + +Emitted after filtering is performed. + +#### Remarks + +Returns the filtering expressions tree of the column for which filtering was performed. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTreeChange`](../interfaces/GridType.md#filteringexpressionstreechange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringExpressionsTreeChange`](IgxGridBaseDirective.md#filteringexpressionstreechange) + +*** + +### foreignKey + +> **foreignKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L172) + +Sets the foreign key of the `IgxTreeGridComponent`. +```html +<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true"> +</igx-tree-grid> +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`foreignKey`](../interfaces/GridType.md#foreignkey) + +*** + +### formGroupCreated + +> **formGroupCreated**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:519](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L519) + +Emitted when formGroup is created on edit of row/cell. + +#### Example + +```html +<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`formGroupCreated`](../interfaces/GridType.md#formgroupcreated) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`formGroupCreated`](IgxGridBaseDirective.md#formgroupcreated) + +*** + +### gridAPI + +> `readonly` **gridAPI**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L155) + +Represents the grid service type providing API methods for the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridAPI`](../interfaces/GridType.md#gridapi) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridAPI`](IgxGridBaseDirective.md#gridapi) + +*** + +### gridComputedStyles + +> `protected` **gridComputedStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3205) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridComputedStyles`](IgxGridBaseDirective.md#gridcomputedstyles) + +*** + +### gridCopy + +> **gridCopy**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L991) + +Emitted when a copy operation is executed. + +#### Remarks + +Fired only if copy behavior is enabled through the [`clipboardOptions`][IgxGridBaseDirective#clipboardOptions](IgxGridBaseDirective.md#clipboardoptions). + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridCopy`](IgxGridBaseDirective.md#gridcopy) + +*** + +### gridKeydown + +> **gridKeydown**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L964) + +Emitted when keydown is triggered over element inside grid's body. + +#### Remarks + +This event is fired only if the key combination is supported in the grid. +Return the target type, target object and the original event. This event is cancelable. + +#### Example + +```html + <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`gridKeydown`](../interfaces/GridType.md#gridkeydown) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridKeydown`](IgxGridBaseDirective.md#gridkeydown) + +*** + +### gridScroll + +> **gridScroll**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:392](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L392) + +Emitted when grid is scrolled horizontally/vertically. + +#### Example + +```html +<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" + (gridScroll)="onScroll($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`gridScroll`](IgxGridBaseDirective.md#gridscroll) + +*** + +### hasChildrenKey + +> **hasChildrenKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L187) + +Sets the key indicating whether a row has children. +This property is only used for load on demand scenarios. +```html +<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" + [loadChildrenOnDemand]="loadChildren" + [hasChildrenKey]="'hasEmployees'"> +</igx-tree-grid> +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hasChildrenKey`](../interfaces/GridType.md#haschildrenkey) + +*** + +### headerCollapsedIndicatorDirectiveTemplate + +> `protected` **headerCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1551) + +The custom template, if any, that should be used when rendering a header collapse indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerCollapsedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#headercollapsedindicatordirectivetemplate) + +*** + +### headerExpandedIndicatorDirectiveTemplate + +> `protected` **headerExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1520) + +The custom template, if any, that should be used when rendering a header expand indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerExpandedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#headerexpandedindicatordirectivetemplate) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L236) + +Sets the value of the `id` attribute. If not provided it will be automatically generated. +```html +<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid> +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`id`](../interfaces/GridType.md#id) + +#### Overrides + +`IgxGridBaseDirective.id` + +*** + +### injector + +> `protected` **injector**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L165) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`injector`](IgxGridBaseDirective.md#injector) + +*** + +### loadChildrenOnDemand + +> **loadChildrenOnDemand**: (`parentID`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L218) + +Sets a callback for loading child rows on demand. +```html +<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren"> +</igx-tree-grid> +``` +```typescript +public loadChildren = (parentID: any, done: (children: any[]) => void) => { + this.dataService.getData(parentID, children => done(children)); +} +``` + +#### Parameters + +##### parentID + +`any` + +##### done + +(`children`) => `void` + +#### Returns + +`void` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`loadChildrenOnDemand`](../interfaces/GridType.md#loadchildrenondemand) + +*** + +### loadingDirectiveTemplate + +> `protected` **loadingDirectiveTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1710) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`loadingDirectiveTemplate`](IgxGridBaseDirective.md#loadingdirectivetemplate) + +*** + +### moving + +> **moving**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L230) + +Controls whether columns moving is enabled in the grid. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moving`](../interfaces/GridType.md#moving) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`moving`](IgxGridBaseDirective.md#moving) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L168) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigation`](../interfaces/GridType.md#navigation) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`navigation`](IgxGridBaseDirective.md#navigation) + +*** + +### overlayService + +> `protected` **overlayService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L172) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`overlayService`](IgxGridBaseDirective.md#overlayservice) + +*** + +### platform + +> `protected` **platform**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L176) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`platform`](IgxGridBaseDirective.md#platform) + +*** + +### processedRecords + +> **processedRecords**: `Map`\<`any`, [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:317](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L317) + +Returns a map of all processed (filtered and sorted) `ITreeGridRecord`s. +```typescript +// gets the processed record with primaryKey=2 +const states = this.grid.processedRecords.get(2); +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`processedRecords`](../interfaces/GridType.md#processedrecords) + +*** + +### processedRootRecords + +> **processedRootRecords**: [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:305](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L305) + +Returns an array of processed (filtered and sorted) root `ITreeGridRecord`s. +```typescript +// gets the processed root record with index=2 +const states = this.grid.processedRootRecords[2]; +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`processedRootRecords`](../interfaces/GridType.md#processedrootrecords) + +*** + +### rangeSelected + +> **rangeSelected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1097) + +Emitted when making a range selection. + +#### Remarks + +Range selection can be made either through drag selection or through keyboard selection. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rangeSelected`](../interfaces/GridType.md#rangeselected) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rangeSelected`](IgxGridBaseDirective.md#rangeselected) + +*** + +### records + +> **records**: `Map`\<`any`, [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L294) + +Returns a map of all `ITreeGridRecord`s. +```typescript +// gets the record with primaryKey=2 +const states = this.grid.records.get(2); +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`records`](../interfaces/GridType.md#records) + +*** + +### rendered + +> **rendered**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1101) + +Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rendered`](IgxGridBaseDirective.md#rendered) + +*** + +### rootRecords + +> **rootRecords**: [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L282) + +Returns an array of the root level `ITreeGridRecord`s. +```typescript +// gets the root record with index=2 +const states = this.grid.rootRecords[2]; +``` + +#### Memberof + +IgxTreeGridComponent + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rootRecords`](../interfaces/GridType.md#rootrecords) + +*** + +### rowAdd + +> **rowAdd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L847) + +Emmited just before the newly added row is commited. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdd`](../interfaces/GridType.md#rowadd) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAdd`](IgxGridBaseDirective.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L805) + +Emitted when a row is added. + +#### Remarks + +Returns the data for the new `IgxGridRowComponent` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowAdded`](../interfaces/GridType.md#rowadded) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAdded`](IgxGridBaseDirective.md#rowadded) + +*** + +### rowClasses + +> **rowClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L411) + +Sets a conditional class selector to the grid's row element. +Accepts an object literal, containing key-value pairs, +where the key is the name of the CSS class and the value is +either a callback function that returns a boolean, or boolean, like so: +```typescript +callback = (row: RowType) => { return row.selected > 6; } +rowClasses = { 'className' : this.callback }; +``` +```html +<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowClasses`](IgxGridBaseDirective.md#rowclasses) + +*** + +### rowClick + +> **rowClick**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:507](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L507) + +Emitted when a row is clicked. + +#### Remarks + +Returns the `IgxGridRow`. + +#### Example + +```html +<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowClick`](../interfaces/GridType.md#rowclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowClick`](IgxGridBaseDirective.md#rowclick) + +*** + +### rowCollapsedIndicatorDirectiveTemplate + +> `protected` **rowCollapsedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1489) + +The custom template, if any, that should be used when rendering a row collapse indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowCollapsedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#rowcollapsedindicatordirectivetemplate) + +*** + +### rowDelete + +> **rowDelete**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L833) + +Emmited when deleting a row. + +#### Remarks + +This event is cancelable. +Returns an IRowDataCancellableEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDelete`](../interfaces/GridType.md#rowdelete) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDelete`](IgxGridBaseDirective.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L819) + +Emitted when a row is deleted. + +#### Remarks + +Returns an `IRowDataEventArgs` object. + +#### Example + +```html +<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDeleted`](../interfaces/GridType.md#rowdeleted) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDeleted`](IgxGridBaseDirective.md#rowdeleted) + +*** + +### rowDragEnd + +> **rowDragEnd**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:982](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L982) + +Emitted when dropping a row. + +#### Remarks + +Return the dropped row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragEnd`](../interfaces/GridType.md#rowdragend) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDragEnd`](IgxGridBaseDirective.md#rowdragend) + +*** + +### rowDragStart + +> **rowDragStart**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L973) + +Emitted when start dragging a row. + +#### Remarks + +Return the dragged row. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDragStart`](../interfaces/GridType.md#rowdragstart) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDragStart`](IgxGridBaseDirective.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L686) + +Emitted when exiting edit mode for a row. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEdit`](../interfaces/GridType.md#rowedit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEdit`](IgxGridBaseDirective.md#rowedit) + +*** + +### rowEditDone + +> **rowEditDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L703) + +Emitted after exiting edit mode for a row and editing has been committed. + +#### Remarks + +Emitted when [rowEditable]="true" & `endEdit(true)` is called. +Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, +performing paging operation, column resizing, pinning, moving or hitting `Done` +button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell. + +#### Example + +```html +<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditDone`](../interfaces/GridType.md#roweditdone) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditDone`](IgxGridBaseDirective.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L668) + +Emitted when a row enters edit mode. + +#### Remarks + +Emitted when [rowEditable]="true". +This event is cancelable. + +#### Example + +```html +<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditEnter`](../interfaces/GridType.md#roweditenter) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditEnter`](IgxGridBaseDirective.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L719) + +Emitted when row editing is canceled. + +#### Remarks + +Emits when [rowEditable]="true" & `endEdit(false)` is called. +Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button +in the row editing overlay. + +#### Example + +```html +<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> +</igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditExit`](../interfaces/GridType.md#roweditexit) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditExit`](IgxGridBaseDirective.md#roweditexit) + +*** + +### rowExpandedIndicatorDirectiveTemplate + +> `protected` **rowExpandedIndicatorDirectiveTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1458) + +The custom template, if any, that should be used when rendering a row expand indicator. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowExpandedIndicatorDirectiveTemplate`](IgxGridBaseDirective.md#rowexpandedindicatordirectivetemplate) + +*** + +### rowPinned + +> **rowPinned**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1048](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1048) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowPinned`](IgxGridBaseDirective.md#rowpinned) + +*** + +### rowPinning + +> **rowPinning**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1037](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1037) + +Emitted when the pinned state of a row is changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowPinning`](IgxGridBaseDirective.md#rowpinning) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L554) + +Emitted when `IgxGridRowComponent` is selected. + +#### Example + +```html +<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectionChanging`](../interfaces/GridType.md#rowselectionchanging) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelectionChanging`](IgxGridBaseDirective.md#rowselectionchanging) + +*** + +### rowStyles + +> **rowStyles**: `any` = `null` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L431) + +Sets conditional style properties on the grid row element. +It accepts an object literal where the keys are +the style properties and the value is an expression to be evaluated. +```typescript +styles = { + background: 'yellow', + color: (row: RowType) => row.selected : 'red': 'white' +} +``` +```html +<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> +``` + +#### Memberof + +IgxColumnComponent + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowStyles`](IgxGridBaseDirective.md#rowstyles) + +*** + +### rowToggle + +> **rowToggle**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1026](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1026) + +Emitted when the expanded state of a row gets changed. + +#### Example + +```html +<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowToggle`](../interfaces/GridType.md#rowtoggle) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowToggle`](IgxGridBaseDirective.md#rowtoggle) + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L543) + +Emitted when a cell is selected. + +#### Remarks + +Returns the `IgxGridCell`. + +#### Example + +```html +<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selected`](../interfaces/GridType.md#selected) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selected`](IgxGridBaseDirective.md#selected) + +*** + +### selectedRowsChange + +> **selectedRowsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1015) + +Emitted when the rows are selected or deselected. + +#### Example + +```html +<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedRowsChange`](IgxGridBaseDirective.md#selectedrowschange) + +*** + +### snackbarDisplayTime + +> **snackbarDisplayTime**: `number` = `6000` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L193) + +Gets/Sets the display time for the row adding snackbar notification. + +#### Remarks + +By default it is 6000ms. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`snackbarDisplayTime`](IgxGridBaseDirective.md#snackbardisplaytime) + +*** + +### sorting + +> **sorting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L752) + +Emitted before sorting expressions are applied. + +#### Remarks + +Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sorting`](IgxGridBaseDirective.md#sorting) + +*** + +### sortingDone + +> **sortingDone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L765) + +Emitted after sorting is completed. + +#### Remarks + +Returns the sorting expression. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingDone`](IgxGridBaseDirective.md#sortingdone) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1072) + +Emitted before sorting is performed. + +#### Remarks + +Returns the sorting expressions. + +#### Example + +```html +<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressionsChange`](../interfaces/GridType.md#sortingexpressionschange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingExpressionsChange`](IgxGridBaseDirective.md#sortingexpressionschange) + +*** + +### tbodyContainer + +> `protected` **tbodyContainer**: `ElementRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1324) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`tbodyContainer`](IgxGridBaseDirective.md#tbodycontainer) + +*** + +### templateRows + +> `protected` **templateRows**: `string` = `'auto auto auto 1fr auto auto'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3455) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`templateRows`](IgxGridBaseDirective.md#templaterows) + +*** + +### textHighlightService + +> `protected` **textHighlightService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L171) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`textHighlightService`](IgxGridBaseDirective.md#texthighlightservice) + +*** + +### toolbarExporting + +> **toolbarExporting**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1086) + +Emitted when an export process is initiated by the user. + +#### Example + +```typescript +toolbarExporting(event: IGridToolbarExportEventArgs){ + const toolbarExporting = event; +} +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`toolbarExporting`](../interfaces/GridType.md#toolbarexporting) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`toolbarExporting`](IgxGridBaseDirective.md#toolbarexporting) + +*** + +### transactionFactory + +> `protected` **transactionFactory**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L149) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactionFactory`](IgxGridBaseDirective.md#transactionfactory) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `filteringExpressionsTree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L465) + +Gets/Sets a unique values strategy used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### filteringExpressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Remarks + +Provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering. + +#### Example + +```html +<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`uniqueColumnValuesStrategy`](../interfaces/GridType.md#uniquecolumnvaluesstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`uniqueColumnValuesStrategy`](IgxGridBaseDirective.md#uniquecolumnvaluesstrategy) + +*** + +### validation + +> `readonly` **validation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L150) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validation`](../interfaces/GridType.md#validation) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validation`](IgxGridBaseDirective.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L530) + +Emitted when grid's validation status changes. + +#### Example + +```html +<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationStatusChange`](../interfaces/GridType.md#validationstatuschange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validationStatusChange`](IgxGridBaseDirective.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) = `'change'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2063](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2063) + +Gets/Sets the trigger for validators used when editing the grid. + +#### Example + +```html +<igx-grid #grid validationTrigger='blur'></igx-grid> +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`validationTrigger`](../interfaces/GridType.md#validationtrigger) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`validationTrigger`](IgxGridBaseDirective.md#validationtrigger) + +*** + +### viewRef + +> `protected` **viewRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L164) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`viewRef`](IgxGridBaseDirective.md#viewref) + +*** + +### zone + +> `protected` **zone**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L158) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`zone`](IgxGridBaseDirective.md#zone) + +## Accessors + +### activeRowIndexes + +#### Get Signature + +> **get** `protected` **activeRowIndexes**(): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4068) + +##### Returns + +`number`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`activeRowIndexes`](IgxGridBaseDirective.md#activerowindexes) + +*** + +### advancedFilteringExpressionsTree + +#### Get Signature + +> **get** **advancedFilteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1920) + +Gets/Sets the advanced filtering state. + +##### Example + +```typescript +let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; +this.grid.advancedFilteringExpressionsTree = logic; +``` + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **advancedFilteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1924) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`advancedFilteringExpressionsTree`](../interfaces/GridType.md#advancedfilteringexpressionstree) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`advancedFilteringExpressionsTree`](IgxGridBaseDirective.md#advancedfilteringexpressionstree) + +*** + +### allowAdvancedFiltering + +#### Get Signature + +> **get** **allowAdvancedFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2336) + +Gets/Sets a value indicating whether the advanced filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowAdvancedFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2340) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowAdvancedFiltering`](../interfaces/GridType.md#allowadvancedfiltering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowAdvancedFiltering`](IgxGridBaseDirective.md#allowadvancedfiltering) + +*** + +### allowFiltering + +#### Get Signature + +> **get** **allowFiltering**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2310) + +Gets/Sets if the filtering is enabled. + +##### Example + +```html +<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **allowFiltering**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2314) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`allowFiltering`](../interfaces/GridType.md#allowfiltering) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowFiltering`](IgxGridBaseDirective.md#allowfiltering) + +*** + +### ariaColCount + +#### Get Signature + +> **get** `protected` **ariaColCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1816) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`ariaColCount`](IgxGridBaseDirective.md#ariacolcount) + +*** + +### ariaRowCount + +#### Get Signature + +> **get** `protected` **ariaRowCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1821) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`ariaRowCount`](IgxGridBaseDirective.md#ariarowcount) + +*** + +### batchEditing + +#### Get Signature + +> **get** **batchEditing**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2831) + +Gets/Sets whether the grid has batch editing enabled. +When batch editing is enabled, changes are not made directly to the underlying data. +Instead, they are stored as transactions, which can later be committed w/ the `commit` method. + +##### Example + +```html +<igx-grid [batchEditing]="true" [data]="someData"> +</igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **batchEditing**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2835) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`batchEditing`](../interfaces/GridType.md#batchediting) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`batchEditing`](IgxGridBaseDirective.md#batchediting) + +*** + +### cellMergeMode + +#### Get Signature + +> **get** **cellMergeMode**(): [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2901) + +Gets/Sets cell merge mode. + +##### Returns + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +#### Set Signature + +> **set** **cellMergeMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2905) + +##### Parameters + +###### value + +[`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellMergeMode`](../interfaces/GridType.md#cellmergemode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellMergeMode`](IgxGridBaseDirective.md#cellmergemode) + +*** + +### cellSelection + +#### Get Signature + +> **get** **cellSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2882) + +Gets/Sets cell selection mode. + +##### Remarks + +By default the cell selection mode is multiple + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **cellSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2886) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`cellSelection`](../interfaces/GridType.md#cellselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`cellSelection`](IgxGridBaseDirective.md#cellselection) + +*** + +### columns + +#### Get Signature + +> **get** **columns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4613) + +Gets an array of `IgxColumnComponent`s. + +##### Example + +```typescript +const colums = this.grid.columns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columns`](../interfaces/GridType.md#columns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columns`](IgxGridBaseDirective.md#columns) + +*** + +### columnSelection + +#### Get Signature + +> **get** **columnSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2943) + +Gets/Sets column selection mode + +##### Remarks + +By default the row selection mode is none + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **columnSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2947](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2947) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`columnSelection`](../interfaces/GridType.md#columnselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnSelection`](IgxGridBaseDirective.md#columnselection) + +*** + +### columnWidth + +#### Get Signature + +> **get** **columnWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2187) + +Gets/Sets the default width of the columns. + +##### Example + +```html +<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **columnWidth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2190) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`columnWidth`](IgxGridBaseDirective.md#columnwidth) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:341](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L341) + +Gets/Sets the array of data that populates the component. +```html +<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid> +``` + +##### Memberof + +IgxTreeGridComponent + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **data**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L346) + +##### Parameters + +###### value + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`data`](../interfaces/GridType.md#data) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`data`](IgxGridBaseDirective.md#data) + +*** + +### dataCloneStrategy + +#### Get Signature + +> **get** **dataCloneStrategy**(): [`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L320) + +Gets/Sets the data clone strategy of the grid when in edit mode. + +##### Example + +```html + <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> +``` + +##### Returns + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Set Signature + +> **set** **dataCloneStrategy**(`strategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L324) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +##### Parameters + +###### strategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### Returns + +`void` + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataCloneStrategy`](../interfaces/GridType.md#dataclonestrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataCloneStrategy`](IgxGridBaseDirective.md#dataclonestrategy) + +*** + +### dataRowList + +#### Get Signature + +> **get** **dataRowList**(): `QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2606](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2606) + +A list of currently rendered `IgxGridRowComponent`'s. + +##### Example + +```typescript +const dataList = this.grid.dataRowList; +``` + +##### Returns + +`QueryList`\<[`IgxRowDirective`](IgxRowDirective.md)\> + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataRowList`](../interfaces/GridType.md#datarowlist) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataRowList`](IgxGridBaseDirective.md#datarowlist) + +*** + +### dataView + +#### Get Signature + +> **get** **dataView**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5809) + +Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. + +##### Example + +```typescript + const dataView = this.grid.dataView; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dataView`](../interfaces/GridType.md#dataview) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dataView`](IgxGridBaseDirective.md#dataview) + +*** + +### defaultRowHeight + +#### Get Signature + +> **get** **defaultRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4513) + +Gets the default row height. + +##### Example + +```typescript +const rowHeigh = this.grid.defaultRowHeight; +``` + +##### Returns + +`number` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`defaultRowHeight`](../interfaces/GridType.md#defaultrowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`defaultRowHeight`](IgxGridBaseDirective.md#defaultrowheight) + +*** + +### dragGhostCustomTemplate + +#### Get Signature + +> **get** **dragGhostCustomTemplate**(): `TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1234) + +Gets the custom template, if any, used for row drag ghost. + +##### Returns + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +#### Set Signature + +> **set** **dragGhostCustomTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1251) + +Sets a custom template for the row drag ghost. +```html +<ng-template #template igxRowDragGhost> + <igx-icon>menu</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragGhostCustomTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowDragGhostContext`](../interfaces/IgxGridRowDragGhostContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dragGhostCustomTemplate`](IgxGridBaseDirective.md#dragghostcustomtemplate) + +*** + +### dragIndicatorIconTemplate + +#### Get Signature + +> **get** **dragIndicatorIconTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2711](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2711) + +The custom template, if any, that should be used when rendering the row drag indicator icon + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **dragIndicatorIconTemplate**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2728) + +Sets a custom template that should be used when rendering the row drag indicator icon. +```html +<ng-template #template igxDragIndicatorIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.dragIndicatorIconTemplate = this.template; +``` + +##### Parameters + +###### val + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +The template for drag indicator icons. Could be of any type + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`dragIndicatorIconTemplate`](../interfaces/GridType.md#dragindicatoricontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`dragIndicatorIconTemplate`](IgxGridBaseDirective.md#dragindicatoricontemplate) + +*** + +### emptyFilteredGridMessage + +#### Get Signature + +> **get** **emptyFilteredGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2273) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyFilteredGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2269) + +Gets/Sets the message displayed when there are no records and the grid is filtered. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyFilteredGridMessage`](IgxGridBaseDirective.md#emptyfilteredgridmessage) + +*** + +### emptyGridMessage + +#### Get Signature + +> **get** **emptyGridMessage**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2208](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2208) + +##### Returns + +`string` + +#### Set Signature + +> **set** **emptyGridMessage**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2205) + +Get/Sets the message displayed when there are no records. + +##### Example + +```html +<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyGridMessage`](IgxGridBaseDirective.md#emptygridmessage) + +*** + +### emptyGridTemplate + +#### Get Signature + +> **get** **emptyGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L247) + +Gets/Sets a custom template when empty. + +##### Example + +```html +<ng-template igxGridEmpty> + <!-- content to show when the grid is empty --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **emptyGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L250) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`emptyGridTemplate`](IgxGridBaseDirective.md#emptygridtemplate) + +*** + +### excelStyleHeaderIconTemplate + +#### Get Signature + +> **get** **excelStyleHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1586) + +Gets the excel style header icon. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **excelStyleHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1603](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1603) + +Sets the excel style header icon. +```html +<ng-template #template igxExcelStyleHeaderIcon> +<igx-icon>filter_alt</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.excelStyleHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`excelStyleHeaderIconTemplate`](../interfaces/GridType.md#excelstyleheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`excelStyleHeaderIconTemplate`](IgxGridBaseDirective.md#excelstyleheadericontemplate) + +*** + +### expansionDepth + +#### Get Signature + +> **get** **expansionDepth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L387) + +Sets the count of levels to be expanded in the `IgxTreeGridComponent`. By default it is +set to `Infinity` which means all levels would be expanded. +```html +<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid> +``` + +##### Memberof + +IgxTreeGridComponent + +##### Returns + +`number` + +#### Set Signature + +> **set** **expansionDepth**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L391) + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`expansionDepth`](../interfaces/GridType.md#expansiondepth) + +*** + +### expansionStates + +#### Get Signature + +> **get** **expansionStates**(): `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4381) + +Gets/Sets a list of key-value pairs [row ID, expansion state]. + +##### Remarks + +Includes only states that differ from the default one. +Supports two-way binding. + +##### Example + +```html +<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> +</igx-grid> +``` + +##### Returns + +`Map`\<`any`, `boolean`\> + +#### Set Signature + +> **set** **expansionStates**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4386) + +##### Parameters + +###### value + +`Map`\<`any`, `boolean`\> + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`expansionStates`](../interfaces/GridType.md#expansionstates) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expansionStates`](IgxGridBaseDirective.md#expansionstates) + +*** + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3359) + +Returns an array of objects containing the filtered data. + +##### Example + +```typescript +let filteredData = this.grid.filteredData; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredData`](../interfaces/GridType.md#filtereddata) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteredData`](IgxGridBaseDirective.md#filtereddata) + +*** + +### filteredSortedData + +#### Get Signature + +> **get** **filteredSortedData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3371) + +Returns an array containing the filtered sorted data. + +##### Example + +```typescript +const filteredSortedData = this.grid1.filteredSortedData; +``` + +##### Returns + +`any`[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteredSortedData`](../interfaces/GridType.md#filteredsorteddata) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteredSortedData`](IgxGridBaseDirective.md#filteredsorteddata) + +*** + +### filteringExpressionsTree + +#### Get Signature + +> **get** **filteringExpressionsTree**(): [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1874) + +Gets/Sets the filtering state. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> +``` + +##### Remarks + +Supports two-way binding. + +##### Returns + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Set Signature + +> **set** **filteringExpressionsTree**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1878) + +##### Parameters + +###### value + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringExpressionsTree`](../interfaces/GridType.md#filteringexpressionstree) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringExpressionsTree`](IgxGridBaseDirective.md#filteringexpressionstree) + +*** + +### filteringLogic + +#### Get Signature + +> **get** **filteringLogic**(): [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1853) + +Gets/Sets the filtering logic of the `IgxGridComponent`. + +##### Remarks + +The default is AND. + +##### Example + +```html +<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> +``` + +##### Returns + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +#### Set Signature + +> **set** **filteringLogic**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1857) + +##### Parameters + +###### value + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filteringLogic`](../interfaces/GridType.md#filteringlogic) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filteringLogic`](IgxGridBaseDirective.md#filteringlogic) + +*** + +### filterMode + +#### Get Signature + +> **get** **filterMode**(): [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2362](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2362) + +Gets/Sets the filter mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it's set to FilterMode.quickFilter. + +##### Returns + +[`FilterMode`](../type-aliases/FilterMode.md) + +#### Set Signature + +> **set** **filterMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2366) + +The filter mode for the grid. It can be quick filter of excel-style filter + +##### Parameters + +###### value + +[`FilterMode`](../type-aliases/FilterMode.md) + +##### Returns + +`void` + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterMode`](../interfaces/GridType.md#filtermode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterMode`](IgxGridBaseDirective.md#filtermode) + +*** + +### filterStrategy + +#### Get Signature + +> **get** **filterStrategy**(): [`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2456](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2456) + +Gets/Sets the filtering strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid> +``` + +##### Returns + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +#### Set Signature + +> **set** **filterStrategy**(`classRef`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2460) + +##### Parameters + +###### classRef + +[`IFilteringStrategy`](../interfaces/IFilteringStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`filterStrategy`](../interfaces/GridType.md#filterstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterStrategy`](IgxGridBaseDirective.md#filterstrategy) + +*** + +### hasCellsToMerge + +#### Get Signature + +> **get** `protected` **hasCellsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4082) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hasCellsToMerge`](IgxGridBaseDirective.md#hascellstomerge) + +*** + +### hasVisibleColumns + +#### Set Signature + +> **set** **hasVisibleColumns**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5533) + +Indicates whether the grid has columns that are shown + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +Indicates whether the grid has columns that are shown + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hasVisibleColumns`](../interfaces/GridType.md#hasvisiblecolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hasVisibleColumns`](IgxGridBaseDirective.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **headerCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1557) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1574) + +Sets the row collapse indicator template. +```html +<ng-template igxHeaderCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerCollapsedIndicatorTemplate`](../interfaces/GridType.md#headercollapsedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerCollapsedIndicatorTemplate`](IgxGridBaseDirective.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +#### Get Signature + +> **get** **headerExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1526) + +Gets the header expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **headerExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1543) + +Sets the header expand indicator template. +```html +<ng-template igxHeaderExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headerExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headerExpandedIndicatorTemplate`](../interfaces/GridType.md#headerexpandedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headerExpandedIndicatorTemplate`](IgxGridBaseDirective.md#headerexpandedindicatortemplate) + +*** + +### headSelectorTemplate + +#### Get Signature + +> **get** **headSelectorTemplate**(): `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2620](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2620) + +Gets the header row selector template. + +##### Returns + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **headSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2637) + +Sets the header row selector template. +```html +<ng-template #template igxHeadSelector let-headContext> +{{ headContext.selectedCount }} / {{ headContext.totalCount }} +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.headSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxHeadSelectorTemplateContext`](../interfaces/IgxHeadSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`headSelectorTemplate`](../interfaces/GridType.md#headselectortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`headSelectorTemplate`](IgxGridBaseDirective.md#headselectortemplate) + +*** + +### height + +#### Get Signature + +> **get** **height**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2109) + +Gets/Sets the height. + +##### Example + +```html +<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **height**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2113) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`height`](IgxGridBaseDirective.md#height) + +*** + +### hiddenColumnsCount + +#### Get Signature + +> **get** **hiddenColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2808) + +Gets the number of hidden columns. + +##### Example + +```typescript +const hiddenCol = this.grid.hiddenColumnsCount; +`` + +##### Returns + +`number` + +Represents the count of only the hidden (not visible) columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`hiddenColumnsCount`](../interfaces/GridType.md#hiddencolumnscount) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hiddenColumnsCount`](IgxGridBaseDirective.md#hiddencolumnscount) + +*** + +### hideRowSelectors + +#### Get Signature + +> **get** **hideRowSelectors**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2027](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2027) + +Gets/Sets if the row selectors are hidden. + +##### Remarks + +By default row selectors are shown + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **hideRowSelectors**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2031](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2031) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`hideRowSelectors`](IgxGridBaseDirective.md#hiderowselectors) + +*** + +### isCustomSetRowHeight + +#### Get Signature + +> **get** `protected` **isCustomSetRowHeight**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3340) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isCustomSetRowHeight`](IgxGridBaseDirective.md#iscustomsetrowheight) + +*** + +### isLoading + +#### Get Signature + +> **get** **isLoading**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2235) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **isLoading**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2222) + +Gets/Sets whether the grid is going to show a loading indicator. + +##### Example + +```html +<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`isLoading`](../interfaces/GridType.md#isloading) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isLoading`](IgxGridBaseDirective.md#isloading) + +*** + +### lastSearchInfo + +#### Get Signature + +> **get** **lastSearchInfo**(): [`ISearchInfo`](../interfaces/ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2995](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2995) + +Represents the last search information. + +##### Returns + +[`ISearchInfo`](../interfaces/ISearchInfo.md) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`lastSearchInfo`](../interfaces/GridType.md#lastsearchinfo) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`lastSearchInfo`](IgxGridBaseDirective.md#lastsearchinfo) + +*** + +### loadingGridTemplate + +#### Get Signature + +> **get** **loadingGridTemplate**(): `TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L280) + +Gets/Sets a custom template when loading. + +##### Example + +```html +<ng-template igxGridLoading> + <!-- content to show when the grid is loading --> +</ng-template> +``` +Or +```html +<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +#### Set Signature + +> **set** **loadingGridTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:283](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L283) + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridTemplateContext`](../interfaces/IgxGridTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`loadingGridTemplate`](IgxGridBaseDirective.md#loadinggridtemplate) + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1970) + +Gets/Sets the locale. + +##### Remarks + +If not set, returns browser's language. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1974) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`locale`](../interfaces/GridType.md#locale) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`locale`](IgxGridBaseDirective.md#locale) + +*** + +### mergedDataInView + +#### Get Signature + +> **get** `protected` **mergedDataInView**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3986](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3986) + +##### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`mergedDataInView`](IgxGridBaseDirective.md#mergeddatainview) + +*** + +### mergeStrategy + +#### Get Signature + +> **get** **mergeStrategy**(): [`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2491](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2491) + +Gets/Sets the merge strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid> +``` + +##### Returns + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +#### Set Signature + +> **set** **mergeStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2494) + +##### Parameters + +###### value + +[`IGridMergeStrategy`](../interfaces/IGridMergeStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`mergeStrategy`](../interfaces/GridType.md#mergestrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`mergeStrategy`](IgxGridBaseDirective.md#mergestrategy) + +*** + +### nativeElement + +#### Get Signature + +> **get** **nativeElement**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4485) + +Gets the native element. + +##### Example + +```typescript +const nativeEl = this.grid.nativeElement. +``` + +##### Returns + +`any` + +Represents the native HTML element itself + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`nativeElement`](../interfaces/GridType.md#nativeelement) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`nativeElement`](IgxGridBaseDirective.md#nativeelement) + +*** + +### outlet + +#### Get Signature + +> **get** **outlet**(): [`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4496](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4496) + +Gets/Sets the outlet used to attach the grid's overlays to. + +##### Remarks + +If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive. + +##### Returns + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +#### Set Signature + +> **set** **outlet**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4500](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4500) + +##### Parameters + +###### val + +[`IgxOverlayOutletDirective`](IgxOverlayOutletDirective.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`outlet`](../interfaces/GridType.md#outlet) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`outlet`](IgxGridBaseDirective.md#outlet) + +*** + +### pagingMode + +#### Get Signature + +> **get** **pagingMode**(): [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1987](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1987) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Returns + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +#### Set Signature + +> **set** **pagingMode**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1991) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +##### Parameters + +###### val + +[`GridPagingMode`](../type-aliases/GridPagingMode.md) + +##### Returns + +`void` + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pagingMode`](../interfaces/GridType.md#pagingmode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pagingMode`](IgxGridBaseDirective.md#pagingmode) + +*** + +### pinnedColumns + +#### Get Signature + +> **get** **pinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4625) + +Gets an array of the pinned `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumns`](../interfaces/GridType.md#pinnedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedColumns`](IgxGridBaseDirective.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +#### Get Signature + +> **get** **pinnedColumnsCount**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2815) + +Gets the number of pinned columns. + +##### Returns + +`number` + +Represents the count of only the pinned columns + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedColumnsCount`](../interfaces/GridType.md#pinnedcolumnscount) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedColumnsCount`](IgxGridBaseDirective.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +#### Get Signature + +> **get** **pinnedEndColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4653) + +Gets an array of the pinned to the right `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedEndColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedEndColumns`](../interfaces/GridType.md#pinnedendcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedEndColumns`](IgxGridBaseDirective.md#pinnedendcolumns) + +*** + +### pinnedRows + +#### Get Signature + +> **get** **pinnedRows**(): [`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4666) + +Gets an array of the pinned `IgxRowComponent`s. + +##### Example + +```typescript +const pinnedRow = this.grid.pinnedRows; +``` + +##### Returns + +[`IgxGridRowComponent`](IgxGridRowComponent.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedRows`](../interfaces/GridType.md#pinnedrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedRows`](IgxGridBaseDirective.md#pinnedrows) + +*** + +### pinnedStartColumns + +#### Get Signature + +> **get** **pinnedStartColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4641) + +Gets an array of the pinned to the left `IgxColumnComponent`s. + +##### Example + +```typescript +const pinnedColumns = this.grid.pinnedStartColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinnedStartColumns`](../interfaces/GridType.md#pinnedstartcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinnedStartColumns`](IgxGridBaseDirective.md#pinnedstartcolumns) + +*** + +### pinning + +#### Get Signature + +> **get** **pinning**(): [`IPinningConfig`](../interfaces/IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2290) + +Gets/Sets the initial pinning configuration. + +##### Remarks + +Allows to apply pinning the columns to the start or the end. +Note that pinning to both sides at a time is not allowed. + +##### Example + +```html +<igx-grid [pinning]="pinningConfig"></igx-grid> +``` + +##### Returns + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +#### Set Signature + +> **set** **pinning**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2293) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +##### Parameters + +###### value + +[`IPinningConfig`](../interfaces/IPinningConfig.md) + +##### Returns + +`void` + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinning`](../interfaces/GridType.md#pinning) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinning`](IgxGridBaseDirective.md#pinning) + +*** + +### primaryKey + +#### Get Signature + +> **get** **primaryKey**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L443) + +Gets/Sets the primary key. + +##### Example + +```html +<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **primaryKey**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L447) + +Represents the unique primary key used for identifying rows in the grid + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +Represents the unique primary key used for identifying rows in the grid + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`primaryKey`](../interfaces/GridType.md#primarykey) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`primaryKey`](IgxGridBaseDirective.md#primarykey) + +*** + +### renderData + +#### Get Signature + +> **get** `protected` **renderData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3446) + +##### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`renderData`](IgxGridBaseDirective.md#renderdata) + +*** + +### renderedActualRowHeight + +#### Get Signature + +> **get** `protected` **renderedActualRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7829) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`renderedActualRowHeight`](IgxGridBaseDirective.md#renderedactualrowheight) + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1837) + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1832) + +Gets/Sets the resource strings. + +##### Remarks + +By default it uses EN resources. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`resourceStrings`](../interfaces/GridType.md#resourcestrings) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`resourceStrings`](IgxGridBaseDirective.md#resourcestrings) + +*** + +### rowAddTextTemplate + +#### Get Signature + +> **get** **rowAddTextTemplate**(): `TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1403) + +Gets the row add text template. + +##### Returns + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +#### Set Signature + +> **set** **rowAddTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1419) + +Sets the row add text template. +```html +<ng-template #template igxRowAddText> +Adding Row +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowAddTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridEmptyTemplateContext`](../interfaces/IgxGridEmptyTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowAddTextTemplate`](IgxGridBaseDirective.md#rowaddtexttemplate) + +*** + +### rowCollapsedIndicatorTemplate + +#### Get Signature + +> **get** **rowCollapsedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1495) + +Gets the row collapse indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowCollapsedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1512) + +Sets the row collapse indicator template. +```html +<ng-template igxRowCollapsedIndicator> + <igx-icon role="button">add</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowCollapsedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowCollapsedIndicatorTemplate`](../interfaces/GridType.md#rowcollapsedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowCollapsedIndicatorTemplate`](IgxGridBaseDirective.md#rowcollapsedindicatortemplate) + +*** + +### rowDraggable + +#### Get Signature + +> **get** **rowDraggable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2045](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2045) + +Gets/Sets whether rows can be moved. + +##### Example + +```html +<igx-grid #grid [rowDraggable]="true"></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowDraggable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2049](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2049) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowDraggable`](../interfaces/GridType.md#rowdraggable) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowDraggable`](IgxGridBaseDirective.md#rowdraggable) + +*** + +### rowEditable + +#### Get Signature + +> **get** **rowEditable**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2086](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2086) + +Gets/Sets whether the rows are editable. + +##### Remarks + +By default it is set to false. + +##### Example + +```html +<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **rowEditable**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2090) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowEditable`](../interfaces/GridType.md#roweditable) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditable`](IgxGridBaseDirective.md#roweditable) + +*** + +### rowEditActionsTemplate + +#### Get Signature + +> **get** **rowEditActionsTemplate**(): `TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1433](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1433) + +Gets the row edit actions template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditActionsTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1450) + +Sets the row edit actions template. +```html +<ng-template #template igxRowEditActions let-endRowEdit> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> + <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditActionsTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditActionsTemplateContext`](../interfaces/IgxGridRowEditActionsTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditActionsTemplate`](IgxGridBaseDirective.md#roweditactionstemplate) + +*** + +### rowEditTextTemplate + +#### Get Signature + +> **get** **rowEditTextTemplate**(): `TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1373) + +Gets the row edit text template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +#### Set Signature + +> **set** **rowEditTextTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1389) + +Sets the row edit text template. +```html +<ng-template #template igxRowEditText let-rowChangesCount> +Changes: {{rowChangesCount}} +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowEditTextTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowEditTextTemplateContext`](../interfaces/IgxGridRowEditTextTemplateContext.md)\> + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowEditTextTemplate`](IgxGridBaseDirective.md#rowedittexttemplate) + +*** + +### rowExpandedIndicatorTemplate + +#### Get Signature + +> **get** **rowExpandedIndicatorTemplate**(): `TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1464) + +Gets the row expand indicator template. + +##### Returns + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +#### Set Signature + +> **set** **rowExpandedIndicatorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1481) + +Sets the row expand indicator template. +```html +<ng-template igxRowExpandedIndicator> + <igx-icon role="button">remove</igx-icon> +</ng-template> +``` +```typescript +@ViewChild('template', {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowExpandedIndicatorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridRowTemplateContext`](../interfaces/IgxGridRowTemplateContext.md)\> + +##### Returns + +`void` + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowExpandedIndicatorTemplate`](../interfaces/GridType.md#rowexpandedindicatortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowExpandedIndicatorTemplate`](IgxGridBaseDirective.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +#### Get Signature + +> **get** **rowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2166) + +Gets/Sets the row height. + +##### Example + +```html +<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **rowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2170) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +##### Parameters + +###### value + +`string` \| `number` + +##### Returns + +`void` + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowHeight`](../interfaces/GridType.md#rowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowHeight`](IgxGridBaseDirective.md#rowheight) + +*** + +### rowList + +#### Get Signature + +> **get** **rowList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2585](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2585) + +A list of `IgxGridRowComponent`. + +##### Example + +```typescript +const rowList = this.grid.rowList; +``` + +##### Returns + +`any` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowList`](../interfaces/GridType.md#rowlist) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowList`](IgxGridBaseDirective.md#rowlist) + +*** + +### rowLoadingIndicatorTemplate + +#### Get Signature + +> **get** **rowLoadingIndicatorTemplate**(): `TemplateRef`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:412](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L412) + +Template for the row loading indicator when load on demand is enabled. +```html +<ng-template #rowLoadingTemplate> + <igx-icon>loop</igx-icon> +</ng-template> + +<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'" + [loadChildrenOnDemand]="loadChildren" + [rowLoadingIndicatorTemplate]="rowLoadingTemplate"> +</igx-tree-grid> +``` + +##### Memberof + +IgxTreeGridComponent + +##### Returns + +`TemplateRef`\<`void`\> + +#### Set Signature + +> **set** **rowLoadingIndicatorTemplate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L416) + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +##### Parameters + +###### value + +`TemplateRef`\<`void`\> + +##### Returns + +`void` + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowLoadingIndicatorTemplate`](../interfaces/GridType.md#rowloadingindicatortemplate) + +*** + +### rowSelection + +#### Get Signature + +> **get** **rowSelection**(): [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2922) + +Gets/Sets row selection mode + +##### Remarks + +By default the row selection mode is 'none' +Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple' + +##### Returns + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +#### Set Signature + +> **set** **rowSelection**(`selectionMode`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2926) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +##### Parameters + +###### selectionMode + +[`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +##### Returns + +`void` + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelection`](../interfaces/GridType.md#rowselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelection`](IgxGridBaseDirective.md#rowselection) + +*** + +### rowSelectorTemplate + +#### Get Signature + +> **get** **rowSelectorTemplate**(): `TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2653) + +Gets the row selector template. + +##### Returns + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +#### Set Signature + +> **set** **rowSelectorTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2670) + +Sets a custom template for the row selectors. +```html +<ng-template #template igxRowSelector let-rowContext> + <igx-checkbox [checked]="rowContext.selected"></igx-checkbox> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.rowSelectorTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxRowSelectorTemplateContext`](../interfaces/IgxRowSelectorTemplateContext.md)\> + +##### Returns + +`void` + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`rowSelectorTemplate`](../interfaces/GridType.md#rowselectortemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`rowSelectorTemplate`](IgxGridBaseDirective.md#rowselectortemplate) + +*** + +### selectedCells + +#### Get Signature + +> **get** **selectedCells**(): [`CellType`](../interfaces/CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L804) + +Returns an array of the selected `IgxGridCell`s. + +##### Example + +```typescript +const selectedCells = this.grid.selectedCells; +``` + +##### Returns + +[`CellType`](../interfaces/CellType.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedCells`](../interfaces/GridType.md#selectedcells) + +*** + +### selectedRows + +#### Get Signature + +> **get** **selectedRows**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2543](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2543) + +##### Returns + +`any`[] + +#### Set Signature + +> **set** **selectedRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2539](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2539) + +Gets/Sets the current selection state. + +##### Remarks + +Represents the selected rows' IDs (primary key or rowData) + +##### Example + +```html +<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid> +``` + +##### Parameters + +###### rowIDs + +`any`[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedRows`](../interfaces/GridType.md#selectedrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedRows`](IgxGridBaseDirective.md#selectedrows) + +*** + +### selectRowOnClick + +#### Get Signature + +> **get** **selectRowOnClick**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5822) + +Gets/Sets whether clicking over a row should select/deselect it + +##### Remarks + +By default it is set to true + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selectRowOnClick**(`enabled`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5826) + +##### Parameters + +###### enabled + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRowOnClick`](../interfaces/GridType.md#selectrowonclick) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRowOnClick`](IgxGridBaseDirective.md#selectrowonclick) + +*** + +### shouldGenerate + +#### Get Signature + +> **get** **shouldGenerate**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2252) + +Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid + +##### Remarks + +This will allow to bind the grid to remote data and having auto-generated columns at the same time. +Note that after generating the columns, this property would be disabled to avoid re-creating +columns each time a new data is assigned. + +##### Example + +```typescript + this.grid.shouldGenerate = true; +``` + +##### Deprecated + +in version 18.2.0. Column re-creation now relies on `autoGenerate` instead. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **shouldGenerate**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2256) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldGenerate`](IgxGridBaseDirective.md#shouldgenerate) + +*** + +### shouldResize + +#### Get Signature + +> **get** `protected` **shouldResize**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5574) + +##### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldResize`](IgxGridBaseDirective.md#shouldresize) + +*** + +### showSummaryOnCollapse + +#### Get Signature + +> **get** **showSummaryOnCollapse**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2438) + +Controls whether the summary row is visible when groupBy/parent row is collapsed. + +##### Example + +```html +<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible +when the groupBy/parent row is collapsed. + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **showSummaryOnCollapse**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2442) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`showSummaryOnCollapse`](IgxGridBaseDirective.md#showsummaryoncollapse) + +*** + +### sortAscendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortAscendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1619) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortAscendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1636](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1636) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. +```html +<ng-template #template igxSortAscendingHeaderIcon> + <igx-icon>expand_less</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortAscendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortAscendingHeaderIconTemplate`](../interfaces/GridType.md#sortascendingheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortAscendingHeaderIconTemplate`](IgxGridBaseDirective.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +#### Get Signature + +> **get** **sortDescendingHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1648](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1648) + +The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortDescendingHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1665) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. +```html +<ng-template #template igxSortDescendingHeaderIcon> + <igx-icon>expand_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortDescendingHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortDescendingHeaderIconTemplate`](../interfaces/GridType.md#sortdescendingheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortDescendingHeaderIconTemplate`](IgxGridBaseDirective.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +#### Get Signature + +> **get** **sortHeaderIconTemplate**(): `TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1680](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1680) + +Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. + +##### Returns + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +#### Set Signature + +> **set** **sortHeaderIconTemplate**(`template`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1697](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L1697) + +Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. +```html +<ng-template #template igxSortHeaderIcon> + <igx-icon>unfold_more</igx-icon> +</ng-template> +``` +```typescript +@ViewChild("'template'", {read: TemplateRef }) +public template: TemplateRef<any>; +this.grid.sortHeaderIconTemplate = this.template; +``` + +##### Parameters + +###### template + +`TemplateRef`\<[`IgxGridHeaderTemplateContext`](../interfaces/IgxGridHeaderTemplateContext.md)\> + +##### Returns + +`void` + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortHeaderIconTemplate`](../interfaces/GridType.md#sortheadericontemplate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortHeaderIconTemplate`](IgxGridBaseDirective.md#sortheadericontemplate) + +*** + +### sortingExpressions + +#### Get Signature + +> **get** **sortingExpressions**(): [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2787](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2787) + +Gets/Sets the sorting state. + +##### Remarks + +Supports two-way data binding. + +##### Example + +```html +<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid> +``` + +##### Returns + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Set Signature + +> **set** **sortingExpressions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2791](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2791) + +##### Parameters + +###### value + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingExpressions`](../interfaces/GridType.md#sortingexpressions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingExpressions`](IgxGridBaseDirective.md#sortingexpressions) + +*** + +### sortingOptions + +#### Get Signature + +> **get** **sortingOptions**(): [`ISortingOptions`](../interfaces/ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2520](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2520) + +##### Returns + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +#### Set Signature + +> **set** **sortingOptions**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2512](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2512) + +Gets/Sets the sorting options - single or multiple sorting. +Accepts an `ISortingOptions` object with any of the `mode` properties. + +##### Example + +```typescript +const _sortingOptions: ISortingOptions = { + mode: 'single' +} +```html +<igx-grid [sortingOptions]="sortingOptions"><igx-grid> +``` + +##### Parameters + +###### value + +[`ISortingOptions`](../interfaces/ISortingOptions.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortingOptions`](../interfaces/GridType.md#sortingoptions) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortingOptions`](IgxGridBaseDirective.md#sortingoptions) + +*** + +### sortStrategy + +#### Get Signature + +> **get** **sortStrategy**(): [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2473) + +Gets/Sets the sorting strategy of the grid. + +##### Example + +```html + <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid> +``` + +##### Returns + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +#### Set Signature + +> **set** **sortStrategy**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2477](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2477) + +##### Parameters + +###### value + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sortStrategy`](../interfaces/GridType.md#sortstrategy) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sortStrategy`](IgxGridBaseDirective.md#sortstrategy) + +*** + +### summaryCalculationMode + +#### Get Signature + +> **get** **summaryCalculationMode**(): [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2413) + +Gets/Sets the summary calculation mode. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level. + +##### Returns + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +#### Set Signature + +> **set** **summaryCalculationMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2417) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +##### Parameters + +###### value + +[`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +##### Returns + +`void` + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryCalculationMode`](../interfaces/GridType.md#summarycalculationmode) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryCalculationMode`](IgxGridBaseDirective.md#summarycalculationmode) + +*** + +### summaryPosition + +#### Get Signature + +> **get** **summaryPosition**(): [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2393) + +Gets/Sets the summary position. + +##### Example + +```html +<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid> +``` + +##### Remarks + +By default it is bottom. + +##### Returns + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +#### Set Signature + +> **set** **summaryPosition**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2397) + +Represents the position of summaries: 'top', 'bottom' + +##### Parameters + +###### value + +[`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +##### Returns + +`void` + +Represents the position of summaries: 'top', 'bottom' + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryPosition`](../interfaces/GridType.md#summaryposition) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryPosition`](IgxGridBaseDirective.md#summaryposition) + +*** + +### summaryRowHeight + +#### Get Signature + +> **get** **summaryRowHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L299) + +##### Returns + +`number` + +#### Set Signature + +> **set** **summaryRowHeight**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L291) + +Get/Set IgxSummaryRow height + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`summaryRowHeight`](../interfaces/GridType.md#summaryrowheight) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`summaryRowHeight`](IgxGridBaseDirective.md#summaryrowheight) + +*** + +### totalCalcWidth + +#### Get Signature + +> **get** `protected` **totalCalcWidth**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3442) + +##### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`totalCalcWidth`](IgxGridBaseDirective.md#totalcalcwidth) + +*** + +### totalRecords + +#### Get Signature + +> **get** **totalRecords**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4760) + +Returns the total number of records. + +##### Remarks + +Only functions when paging is enabled. + +##### Example + +```typescript +const totalRecords = this.grid.totalRecords; +``` + +##### Returns + +`number` + +#### Set Signature + +> **set** **totalRecords**(`total`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4764](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4764) + +##### Parameters + +###### total + +`number` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`totalRecords`](IgxGridBaseDirective.md#totalrecords) + +*** + +### unpinnedColumns + +#### Get Signature + +> **get** **unpinnedColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4678) + +Gets an array of unpinned `IgxColumnComponent`s. + +##### Example + +```typescript +const unpinnedColumns = this.grid.unpinnedColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones that are not pinned + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinnedColumns`](../interfaces/GridType.md#unpinnedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`unpinnedColumns`](IgxGridBaseDirective.md#unpinnedcolumns) + +*** + +### virtualizationState + +#### Get Signature + +> **get** **virtualizationState**(): [`IForOfState`](../interfaces/IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3596) + +Returns the state of the grid virtualization. + +##### Remarks + +Includes the start index and how many records are rendered. + +##### Example + +```typescript +const gridVirtState = this.grid1.virtualizationState; +``` + +##### Returns + +[`IForOfState`](../interfaces/IForOfState.md) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`virtualizationState`](../interfaces/GridType.md#virtualizationstate) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`virtualizationState`](IgxGridBaseDirective.md#virtualizationstate) + +*** + +### visibleColumns + +#### Get Signature + +> **get** **visibleColumns**(): [`IgxColumnComponent`](IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4741) + +Returns an array of visible `IgxColumnComponent`s. + +##### Example + +```typescript +const visibleColumns = this.grid.visibleColumns. +``` + +##### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md)[] + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`visibleColumns`](../interfaces/GridType.md#visiblecolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`visibleColumns`](IgxGridBaseDirective.md#visiblecolumns) + +*** + +### width + +#### Get Signature + +> **get** **width**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2139) + +Gets/Sets the width of the grid. + +##### Example + +```typescript +let gridWidth = this.grid.width; +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **width**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L2143) + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`width`](IgxGridBaseDirective.md#width) + +## Methods + +### \_addRowForIndex() + +> `protected` **\_addRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6590](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6590) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_addRowForIndex`](IgxGridBaseDirective.md#_addrowforindex) + +*** + +### \_restoreVirtState() + +> `protected` **\_restoreVirtState**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6717](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6717) + +#### Parameters + +##### row + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_restoreVirtState`](IgxGridBaseDirective.md#_restorevirtstate) + +*** + +### \_shouldAutoSize() + +> `protected` **\_shouldAutoSize**(`renderedHeight`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7278) + +#### Parameters + +##### renderedHeight + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`_shouldAutoSize`](IgxGridBaseDirective.md#_shouldautosize) + +*** + +### addRow() + +> **addRow**(`data`, `parentRowID?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L583) + +Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created +row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches +the specified parentRowID. If the parentRowID does not exist, an error would be thrown. +```typescript +const record = { + ID: this.grid.data[this.grid1.data.length - 1].ID + 1, + Name: this.newRecord +}; +this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1. +``` + +#### Parameters + +##### data + +`any` + +##### parentRowID? + +`any` + +#### Returns + +`void` + +#### Memberof + +IgxTreeGridComponent + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`addRow`](IgxGridBaseDirective.md#addrow) + +*** + +### allowResetOfColumnsToMerge() + +> `protected` **allowResetOfColumnsToMerge**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3974) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`allowResetOfColumnsToMerge`](IgxGridBaseDirective.md#allowresetofcolumnstomerge) + +*** + +### autoSizeColumnsInView() + +> `protected` **autoSizeColumnsInView**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7583](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7583) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`autoSizeColumnsInView`](IgxGridBaseDirective.md#autosizecolumnsinview) + +*** + +### beginAddRowById() + +> **beginAddRowById**(`rowID`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6570](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6570) + +Enters add mode by spawning the UI under the specified row by rowID. + +#### Parameters + +##### rowID + +`any` + +The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view + +##### asChild? + +`boolean` + +Whether the record should be added as a child. Only applicable to igxTreeGrid. + +#### Returns + +`void` + +#### Remarks + +If null is passed as rowID, the row adding UI is spawned as the first record in the data view + +#### Example + +```typescript +this.grid.beginAddRowById('ALFKI'); +this.grid.beginAddRowById('ALFKI', true); +this.grid.beginAddRowById(null); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowById`](IgxGridBaseDirective.md#beginaddrowbyid) + +*** + +### beginAddRowByIndex() + +> **beginAddRowByIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:616](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L616) + +Enters add mode by spawning the UI with the context of the specified row by index. + +#### Parameters + +##### index + +`number` + +The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length + +##### asChild? + +`boolean` + +Whether the record should be added as a child. Only applicable to igxTreeGrid. + +#### Returns + +`void` + +#### Remarks + +Accepted values for index are integers from 0 to this.grid.dataView.length + +#### Example + +```typescript +this.grid.beginAddRowByIndex(10); +this.grid.beginAddRowByIndex(10, true); +this.grid.beginAddRowByIndex(null); +``` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowByIndex`](IgxGridBaseDirective.md#beginaddrowbyindex) + +*** + +### beginAddRowForIndex() + +> `protected` **beginAddRowForIndex**(`index`, `asChild?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6645) + +#### Parameters + +##### index + +`number` + +##### asChild? + +`boolean` = `false` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`beginAddRowForIndex`](IgxGridBaseDirective.md#beginaddrowforindex) + +*** + +### buildDataView() + +> `protected` **buildDataView**(`_data`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7763](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7763) + +#### Parameters + +##### \_data + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`buildDataView`](IgxGridBaseDirective.md#builddataview) + +*** + +### changeRowEditingOverlayStateOnScroll() + +> `protected` **changeRowEditingOverlayStateOnScroll**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6726](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6726) + +#### Parameters + +##### row + +[`RowType`](../interfaces/RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`changeRowEditingOverlayStateOnScroll`](IgxGridBaseDirective.md#changeroweditingoverlaystateonscroll) + +*** + +### checkContainerSizeChange() + +> `protected` **checkContainerSizeChange**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7269) + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`checkContainerSizeChange`](IgxGridBaseDirective.md#checkcontainersizechange) + +*** + +### checkPrimaryKeyField() + +> `protected` **checkPrimaryKeyField**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7068) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`checkPrimaryKeyField`](IgxGridBaseDirective.md#checkprimarykeyfield) + +*** + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5906) + +Deselect selected cells. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearCellSelection(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearCellSelection`](../interfaces/GridType.md#clearcellselection) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearCellSelection`](IgxGridBaseDirective.md#clearcellselection) + +*** + +### clearFilter() + +> **clearFilter**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5235) + +If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +Otherwise clears the filtering state of all `IgxColumnComponent`s. + +#### Example + +```typescript +this.grid.clearFilter(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearFilter`](IgxGridBaseDirective.md#clearfilter) + +*** + +### clearSearch() + +> **clearSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5485](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5485) + +Removes all the highlights in the cell. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.clearSearch(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearSearch`](IgxGridBaseDirective.md#clearsearch) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5250) + +If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`. + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Remarks + +otherwise clears the sorting state of all `IgxColumnComponent`. + +#### Example + +```typescript +this.grid.clearSort(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`clearSort`](../interfaces/GridType.md#clearsort) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`clearSort`](IgxGridBaseDirective.md#clearsort) + +*** + +### closeAdvancedFilteringDialog() + +> **closeAdvancedFilteringDialog**(`applyChanges`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6457) + +Closes the advanced filtering dialog. + +#### Parameters + +##### applyChanges + +`boolean` + +indicates whether the changes should be applied + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`closeAdvancedFilteringDialog`](IgxGridBaseDirective.md#closeadvancedfilteringdialog) + +*** + +### collapseAll() + +> **collapseAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:547](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L547) + +Collapses all rows. + +```typescript +this.grid.collapseAll(); + ``` + +#### Returns + +`void` + +#### Memberof + +IgxTreeGridComponent + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`collapseAll`](IgxGridBaseDirective.md#collapseall) + +*** + +### collapseRow() + +> **collapseRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4447) + +Collapses the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.collapseRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`collapseRow`](../interfaces/GridType.md#collapserow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`collapseRow`](IgxGridBaseDirective.md#collapserow) + +*** + +### deleteRow() + +> **deleteRow**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4964) + +Removes the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +`any` + +#### Remarks + +Requires that the `primaryKey` property is set. +The method accept rowSelector as a parameter, which is the rowID. + +#### Example + +```typescript +this.grid1.deleteRow(0); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deleteRow`](../interfaces/GridType.md#deleterow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deleteRow`](IgxGridBaseDirective.md#deleterow) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6069](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6069) + +Deselects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllColumns`](../interfaces/GridType.md#deselectallcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectAllColumns`](IgxGridBaseDirective.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5890) + +Deselects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.deselectAllRows(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectAllRows`](../interfaces/GridType.md#deselectallrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectAllRows`](IgxGridBaseDirective.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6043](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6043) + +Deselect specified columns by field. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectColumns(['ID','Name']); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectColumns`](../interfaces/GridType.md#deselectcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectColumns`](IgxGridBaseDirective.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5854) + +Deselect specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectRows([1,2,5]); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`deselectRows`](../interfaces/GridType.md#deselectrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`deselectRows`](IgxGridBaseDirective.md#deselectrows) + +*** + +### disableSummaries() + +> **disableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5216) + +Disable summaries for the specified column. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Examples + +```typescript +grid.disableSummaries('ProductName'); +``` + +```typescript +grid.disableSummaries([{ fieldName: 'ProductName' }]); +``` + +#### Remarks + +Disable summaries for the listed columns. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`disableSummaries`](IgxGridBaseDirective.md#disablesummaries) + +*** + +### enableSummaries() + +> **enableSummaries**(...`rest`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5194) + +Enables summaries for the specified column and applies your customSummary. + +#### Parameters + +##### rest + +...`any`[] + +#### Returns + +`void` + +#### Remarks + +If you do not provide the customSummary, then the default summary for the column data type will be applied. + +#### Examples + +```typescript +grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); +``` +Enable summaries for the listed columns. + +```typescript +grid.enableSummaries('ProductName'); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`enableSummaries`](IgxGridBaseDirective.md#enablesummaries) + +*** + +### endEdit() + +> **endEdit**(`commit?`, `event?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6534](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6534) + +Finishes the row transactions on the current row and returns whether the grid editing was canceled. + +#### Parameters + +##### commit? + +`boolean` = `true` + +##### event? + +`Event` + +#### Returns + +`boolean` + +#### Remarks + +If `commit === true`, passes them from the pending state to the data (or transaction service) + +#### Example + +```html +<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button> +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`endEdit`](IgxGridBaseDirective.md#endedit) + +*** + +### evaluateLoadingState() + +> `protected` **evaluateLoadingState**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6741](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6741) + +Should be called when data and/or isLoading input changes so that the overlay can be +hidden/shown based on the current value of shouldOverlayLoading + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`evaluateLoadingState`](IgxGridBaseDirective.md#evaluateloadingstate) + +*** + +### expandAll() + +> **expandAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L533) + +Expands all rows. +```typescript +this.grid.expandAll(); +``` + +#### Returns + +`void` + +#### Memberof + +IgxTreeGridComponent + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expandAll`](IgxGridBaseDirective.md#expandall) + +*** + +### expandRow() + +> **expandRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4432) + +Expands the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.expandRow(rowID); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`expandRow`](IgxGridBaseDirective.md#expandrow) + +*** + +### extractDataFromColumnsSelection() + +> `protected` **extractDataFromColumnsSelection**(`source`, `formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7637) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`extractDataFromColumnsSelection`](IgxGridBaseDirective.md#extractdatafromcolumnsselection) + +*** + +### extractDataFromSelection() + +> `protected` **extractDataFromSelection**(`source`, `formatters?`, `headers?`, `columnData?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7444) + +#### Parameters + +##### source + +`any`[] + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +##### columnData? + +`any`[] + +#### Returns + +`any`[] + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`extractDataFromSelection`](IgxGridBaseDirective.md#extractdatafromselection) + +*** + +### filter() + +> **filter**(`name`, `value`, `conditionOrExpressionTree?`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5157) + +Filters a single `IgxColumnComponent`. + +#### Parameters + +##### name + +`string` + +##### value + +`any` + +##### conditionOrExpressionTree? + +[`IFilteringOperation`](../interfaces/IFilteringOperation.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### ignoreCase? + +`boolean` + +#### Returns + +`void` + +#### Example + +```typescript +public filter(term) { + this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); +} +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filter`](IgxGridBaseDirective.md#filter) + +*** + +### ~~filterGlobal()~~ + +> **filterGlobal**(`value`, `condition`, `ignoreCase?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5174) + +Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. + +#### Parameters + +##### value + +`any` + +##### condition + +`any` + +##### ignoreCase? + +`any` + +#### Returns + +`void` + +#### Example + +```typescript +grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); +``` + +#### Deprecated + +in version 19.0.0. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`filterGlobal`](IgxGridBaseDirective.md#filterglobal) + +*** + +### findNext() + +> **findNext**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5418) + +Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findNext("financial"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`findNext`](IgxGridBaseDirective.md#findnext) + +*** + +### findPrev() + +> **findPrev**(`text`, `caseSensitive?`, `exactMatch?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5435) + +Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. + +#### Parameters + +##### text + +`string` + +the string to search. + +##### caseSensitive? + +`boolean` + +optionally, if the search should be case sensitive (defaults to false). + +##### exactMatch? + +`boolean` + +optionally, if the text should match the entire value (defaults to false). + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the string. + +#### Example + +```typescript +this.grid.findPrev("financial"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`findPrev`](IgxGridBaseDirective.md#findprev) + +*** + +### findRecordIndexInView() + +> `protected` **findRecordIndexInView**(`rec`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:932](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L932) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`number` + +*** + +### generateDataFields() + +> `protected` **generateDataFields**(`data`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L902) + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`string`[] + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`generateDataFields`](IgxGridBaseDirective.md#generatedatafields) + +*** + +### getCellByColumn() + +> **getCellByColumn**(`rowIndex`, `columnField`): [`CellType`](../interfaces/CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L819) + +Returns a `CellType` object that matches the conditions. + +#### Parameters + +##### rowIndex + +`number` + +##### columnField + +`string` + +#### Returns + +[`CellType`](../interfaces/CellType.md) + +#### Example + +```typescript +const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); +``` + +*** + +### getCellByKey() + +> **getCellByKey**(`rowSelector`, `columnField`): [`CellType`](../interfaces/CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:839](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L839) + +Returns a `CellType` object that matches the conditions. + +#### Parameters + +##### rowSelector + +`any` + +match any rowID + +##### columnField + +`string` + +#### Returns + +[`CellType`](../interfaces/CellType.md) + +#### Remarks + +Requires that the primaryKey property is set. + +#### Example + +```typescript +grid.getCellByKey(1, 'index'); +``` + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4704) + +Returns the `IgxColumnComponent` by field name. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Example + +```typescript +const myCol = this.grid1.getColumnByName("ID"); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByName`](../interfaces/GridType.md#getcolumnbyname) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnByName`](IgxGridBaseDirective.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`IgxColumnComponent`](IgxColumnComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4708](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4708) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getColumnByVisibleIndex`](../interfaces/GridType.md#getcolumnbyvisibleindex) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnByVisibleIndex`](IgxGridBaseDirective.md#getcolumnbyvisibleindex) + +*** + +### getColumnList() + +> `protected` **getColumnList**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6951](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6951) + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getColumnList`](IgxGridBaseDirective.md#getcolumnlist) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4689](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4689) + +Gets the `width` to be set on `IgxGridHeaderGroupComponent`. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +#### Returns + +`string` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getHeaderGroupWidth`](../interfaces/GridType.md#getheadergroupwidth) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getHeaderGroupWidth`](IgxGridBaseDirective.md#getheadergroupwidth) + +*** + +### getMergeCellOffset() + +> `protected` **getMergeCellOffset**(`rowData`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3655) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getMergeCellOffset`](IgxGridBaseDirective.md#getmergecelloffset) + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6272](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6272) + +Returns `ICellPosition` which defines the next cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getNextCell`](../interfaces/GridType.md#getnextcell) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getNextCell`](IgxGridBaseDirective.md#getnextcell) + +*** + +### getPinnedEndWidth() + +> **getPinnedEndWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5735](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5735) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedEndWidth(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPinnedEndWidth`](IgxGridBaseDirective.md#getpinnedendwidth) + +*** + +### getPinnedStartWidth() + +> **getPinnedStartWidth**(`takeHidden?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5712) + +Gets calculated width of the pinned areas. + +#### Parameters + +##### takeHidden? + +`boolean` = `false` + +If we should take into account the hidden columns in the pinned area. + +#### Returns + +`number` + +#### Example + +```typescript +const pinnedWidth = this.grid.getPinnedStartWidth(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPinnedStartWidth`](IgxGridBaseDirective.md#getpinnedstartwidth) + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback?`): [`ICellPosition`](../interfaces/ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6308) + +Returns `ICellPosition` which defines the previous cell, +according to the current position, that match specific criteria. + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback? + +(`IgxColumnComponent`) => `boolean` + +#### Returns + +[`ICellPosition`](../interfaces/ICellPosition.md) + +#### Remarks + +You can pass callback function as a third parameter of `getPreviousCell` method. +The callback function accepts IgxColumnComponent as a param + +#### Example + +```typescript + const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getPreviousCell`](../interfaces/GridType.md#getpreviouscell) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getPreviousCell`](IgxGridBaseDirective.md#getpreviouscell) + +*** + +### getRowByIndex() + +> **getRowByIndex**(`index`): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:752](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L752) + +Returns the `IgxTreeGridRow` by index. + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Example + +```typescript +const myRow = treeGrid.getRowByIndex(1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getRowByIndex`](../interfaces/GridType.md#getrowbyindex) + +*** + +### getRowByKey() + +> **getRowByKey**(`key`): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:768](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L768) + +Returns the `RowType` object by the specified primary key. + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](../interfaces/RowType.md) + +#### Example + +```typescript +const myRow = this.treeGrid.getRowByIndex(1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getRowByKey`](../interfaces/GridType.md#getrowbykey) + +*** + +### getRowData() + +> **getRowData**(`rowSelector`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5090) + +Returns the data that is contained in the row component. + +#### Parameters + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`any` + +#### Remarks + +If the primary key is not specified the row selector match the row data. + +#### Example + +```typescript +const data = grid.getRowData(94741); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getRowData`](IgxGridBaseDirective.md#getrowdata) + +*** + +### getSelectableColumnsAt() + +> `protected` **getSelectableColumnsAt**(`index`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7568](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7568) + +#### Parameters + +##### index + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectableColumnsAt`](IgxGridBaseDirective.md#getselectablecolumnsat) + +*** + +### getSelectedColumnsData() + +> **getSelectedColumnsData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6094](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6094) + +Returns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedColumnsData`](IgxGridBaseDirective.md#getselectedcolumnsdata) + +*** + +### getSelectedData() + +> **getSelectedData**(`formatters?`, `headers?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:664](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L664) + +Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. + +#### Parameters + +##### formatters? + +`boolean` = `false` + +##### headers? + +`boolean` = `false` + +#### Returns + +`any`[] + +#### Remarks + +If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). +If `headers` is enabled, it will use the column header (if any) instead of the column field. + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedData`](IgxGridBaseDirective.md#getselecteddata) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5974](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5974) + +Get the currently selected ranges in the grid. + +#### Returns + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`getSelectedRanges`](../interfaces/GridType.md#getselectedranges) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`getSelectedRanges`](IgxGridBaseDirective.md#getselectedranges) + +*** + +### horizontalScrollHandler() + +> `protected` **horizontalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7808) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`horizontalScrollHandler`](IgxGridBaseDirective.md#horizontalscrollhandler) + +*** + +### isRecordPinnedByIndex() + +> **isRecordPinnedByIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3634) + +Returns whether the record is pinned or not. + +#### Parameters + +##### rowIndex + +`number` + +Index of the record in the `filteredSortedData` collection. + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`isRecordPinnedByIndex`](IgxGridBaseDirective.md#isrecordpinnedbyindex) + +*** + +### markForCheck() + +> **markForCheck**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4926) + +Triggers change detection for the `IgxGridComponent`. +Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. +May degrade performance if used when not needed, or if misused: +```typescript +// DON'Ts: +// don't call markForCheck from inside a loop +// don't call markForCheck when a primitive has changed +grid.data.forEach(rec => { + rec = newValue; + grid.markForCheck(); +}); + +// DOs +// call markForCheck after updating a nested property +grid.data.forEach(rec => { + rec.nestedProp1.nestedProp2 = newValue; +}); +grid.markForCheck(); +``` + +#### Returns + +`void` + +#### Example + +```typescript +grid.markForCheck(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`markForCheck`](IgxGridBaseDirective.md#markforcheck) + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4849) + +Places a column before or after the specified target column. + +#### Parameters + +##### column + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### target + +[`IgxColumnComponent`](IgxColumnComponent.md) + +##### pos? + +[`DropPosition`](../enumerations/DropPosition.md) = `DropPosition.AfterDropTarget` + +#### Returns + +`void` + +#### Example + +```typescript +grid.moveColumn(column, target); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`moveColumn`](../interfaces/GridType.md#movecolumn) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`moveColumn`](IgxGridBaseDirective.md#movecolumn) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColIndex?`, `cb?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6224) + +Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`. + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColIndex? + +`number` = `-1` + +##### cb? + +(`args`) => `void` + +#### Returns + +`void` + +#### Remarks + +Also can execute a custom logic over the target element, +through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } + +#### Example + +```typescript + this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`navigateTo`](../interfaces/GridType.md#navigateto) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`navigateTo`](IgxGridBaseDirective.md#navigateto) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6437) + +Opens the advanced filtering dialog. + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`openAdvancedFilteringDialog`](../interfaces/GridType.md#openadvancedfilteringdialog) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`openAdvancedFilteringDialog`](IgxGridBaseDirective.md#openadvancedfilteringdialog) + +*** + +### pinColumn() + +> **pinColumn**(`columnName`, `index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5287) + +Pins a column by field name. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +#### Remarks + +Returns whether the operation is successful. + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinColumn`](IgxGridBaseDirective.md#pincolumn) + +*** + +### pinRow() + +> **pinRow**(`rowID`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L847) + +Pin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +##### index? + +`number` + +The index at which to insert the row in the pinned collection. + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.pinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`pinRow`](../interfaces/GridType.md#pinrow) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`pinRow`](IgxGridBaseDirective.md#pinrow) + +*** + +### recalculateAutoSizes() + +> **recalculateAutoSizes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4723](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4723) + +Recalculates all widths of columns that have size set to `auto`. + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.recalculateAutoSizes(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`recalculateAutoSizes`](IgxGridBaseDirective.md#recalculateautosizes) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5401) + +Recalculates grid width/height dimensions. + +#### Returns + +`void` + +#### Remarks + +Should be run when changing DOM elements dimentions manually that affect the grid's size. + +#### Example + +```typescript +this.grid.reflow(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`reflow`](../interfaces/GridType.md#reflow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`reflow`](IgxGridBaseDirective.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(`updateActiveInfo?`, `endEdit?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5450](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5450) + +Reapplies the existing search. + +#### Parameters + +##### updateActiveInfo? + +`boolean` + +##### endEdit? + +`boolean` = `true` + +#### Returns + +`number` + +#### Remarks + +Returns how many times the grid contains the last search. + +#### Example + +```typescript +this.grid.refreshSearch(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`refreshSearch`](../interfaces/GridType.md#refreshsearch) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`refreshSearch`](IgxGridBaseDirective.md#refreshsearch) + +*** + +### resetNotifyChanges() + +> `protected` **resetNotifyChanges**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6829) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`resetNotifyChanges`](IgxGridBaseDirective.md#resetnotifychanges) + +*** + +### selectAllColumns() + +> **selectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6082](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6082) + +Selects all columns + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.deselectAllColumns(); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectAllColumns`](IgxGridBaseDirective.md#selectallcolumns) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5872) + +Selects all rows + +#### Parameters + +##### onlyFilterData? + +`boolean` = `true` + +#### Returns + +`void` + +#### Remarks + +By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. +If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. + +#### Example + +```typescript +this.grid.selectAllRows(); +this.grid.selectAllRows(false); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectAllRows`](../interfaces/GridType.md#selectallrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectAllRows`](IgxGridBaseDirective.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6015) + +Select specified columns. + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](../interfaces/ColumnType.md)[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectColumns(['ID','Name'], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectColumns`](../interfaces/GridType.md#selectcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectColumns`](IgxGridBaseDirective.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](../interfaces/ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6000](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6000) + +Get current selected columns. + +#### Returns + +[`ColumnType`](../interfaces/ColumnType.md)[] + +#### Example + +Returns an array with selected columns +```typescript +const selectedColumns = this.grid.selectedColumns(); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectedColumns`](../interfaces/GridType.md#selectedcolumns) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectedColumns`](IgxGridBaseDirective.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`arg`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5934) + +Select range(s) of cells between certain rows and columns of the grid. + +#### Parameters + +##### arg + +[`GridSelectionRange`](../interfaces/GridSelectionRange.md) \| [`GridSelectionRange`](../interfaces/GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRange`](../interfaces/GridType.md#selectrange) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRange`](IgxGridBaseDirective.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5840) + +Select specified rows by ID. + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +if true clears the current selection + +#### Returns + +`void` + +#### Example + +```typescript +this.grid.selectRows([1,2,5], true); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`selectRows`](../interfaces/GridType.md#selectrows) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`selectRows`](IgxGridBaseDirective.md#selectrows) + +*** + +### shouldRecreateColumns() + +> `protected` **shouldRecreateColumns**(`oldData`, `newData`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8177) + +#### Parameters + +##### oldData + +`any`[] + +##### newData + +`any`[] + +#### Returns + +`boolean` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`shouldRecreateColumns`](IgxGridBaseDirective.md#shouldrecreatecolumns) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5109](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5109) + +Sort a single `IgxColumnComponent`. + +#### Parameters + +##### expression + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Remarks + +Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. + +#### Example + +```typescript +this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`sort`](../interfaces/GridType.md#sort) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`sort`](IgxGridBaseDirective.md#sort) + +*** + +### subscribeToTransactions() + +> `protected` **subscribeToTransactions**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6668) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`subscribeToTransactions`](IgxGridBaseDirective.md#subscribetotransactions) + +*** + +### switchTransactionService() + +> `protected` **switchTransactionService**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6656) + +#### Parameters + +##### val + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`switchTransactionService`](IgxGridBaseDirective.md#switchtransactionservice) + +*** + +### toggleColumnVisibility() + +> **toggleColumnVisibility**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4358](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4358) + +Toggles the specified column's visibility. + +#### Parameters + +##### args + +[`IColumnVisibilityChangedEventArgs`](../interfaces/IColumnVisibilityChangedEventArgs.md) + +#### Returns + +`void` + +#### Example + +```typescript +this.grid1.toggleColumnVisibility({ + column: this.grid1.columns[0], + newValue: true +}); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`toggleColumnVisibility`](IgxGridBaseDirective.md#togglecolumnvisibility) + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L4463) + +Toggles the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`void` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.toggleRow(rowID); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`toggleRow`](IgxGridBaseDirective.md#togglerow) + +*** + +### trackPinnedRowData() + +> `protected` **trackPinnedRowData**(`record`): [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:1006](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L1006) + +triggerPipes will re-create pinnedData on CRUD operations + +#### Parameters + +##### record + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md) + +#### Returns + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md) + +*** + +### transactionStatusUpdate() + +> `protected` **transactionStatusUpdate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L906) + +#### Parameters + +##### event + +[`StateUpdateEvent`](../interfaces/StateUpdateEvent.md) + +#### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`transactionStatusUpdate`](IgxGridBaseDirective.md#transactionstatusupdate) + +*** + +### unpinColumn() + +> **unpinColumn**(`columnName`, `index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5302) + +Unpins a column by field name. Returns whether the operation is successful. + +#### Parameters + +##### columnName + +`string` \| [`IgxColumnComponent`](IgxColumnComponent.md) + +##### index? + +`number` + +#### Returns + +`boolean` + +#### Example + +```typescript +this.grid.pinColumn("ID"); +``` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`unpinColumn`](IgxGridBaseDirective.md#unpincolumn) + +*** + +### unpinRow() + +> **unpinRow**(`rowID`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L852) + +Unpin the row by its id. + +#### Parameters + +##### rowID + +`any` + +The row id - primaryKey value or the data record instance. + +#### Returns + +`boolean` + +#### Remarks + +ID is either the primaryKey value or the data record instance. + +#### Example + +```typescript +this.grid.unpinRow(rowID); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`unpinRow`](../interfaces/GridType.md#unpinrow) + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`unpinRow`](IgxGridBaseDirective.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5016](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5016) + +Updates the `IgxGridRowComponent` and the corresponding data record by primary key. + +#### Parameters + +##### value + +`any` + +the new value which is to be set. + +##### rowSelector + +`any` + +corresponds to rowID. + +##### column + +`string` + +corresponds to column field. + +#### Returns + +`void` + +#### Remarks + +Requires that the `primaryKey` property is set. + +#### Example + +```typescript +this.gridWithPK.updateCell('Updated', 1, 'ProductName'); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateCell`](../interfaces/GridType.md#updatecell) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateCell`](IgxGridBaseDirective.md#updatecell) + +*** + +### updateDefaultRowHeight() + +> `protected` **updateDefaultRowHeight**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:8096](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L8096) + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateDefaultRowHeight`](IgxGridBaseDirective.md#updatedefaultrowheight) + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5061](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L5061) + +Updates the `IgxGridRowComponent` + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +correspond to rowID + +#### Returns + +`void` + +#### Remarks + +The row is specified by +rowSelector parameter and the data source record with the passed value. +This method will apply requested update only if primary key is specified in the grid. + +#### Example + +```typescript +grid.updateRow({ + ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') + }, 1); +``` + +#### Implementation of + +[`GridType`](../interfaces/GridType.md).[`updateRow`](../interfaces/GridType.md#updaterow) + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateRow`](IgxGridBaseDirective.md#updaterow) + +*** + +### updateScrollThrottle() + +> `protected` **updateScrollThrottle**(`cells`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L3990) + +#### Parameters + +##### cells + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`updateScrollThrottle`](IgxGridBaseDirective.md#updatescrollthrottle) + +*** + +### verticalScrollHandler() + +> `protected` **verticalScrollHandler**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7783](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L7783) + +#### Parameters + +##### event + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`verticalScrollHandler`](IgxGridBaseDirective.md#verticalscrollhandler) + +*** + +### viewDetachHandler() + +> `protected` **viewDetachHandler**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts#L6408) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`viewDetachHandler`](IgxGridBaseDirective.md#viewdetachhandler) + +*** + +### writeToData() + +> `protected` **writeToData**(`rowIndex`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:981](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts#L981) + +#### Parameters + +##### rowIndex + +`number` + +##### value + +`any` + +#### Returns + +`void` + +#### Overrides + +[`IgxGridBaseDirective`](IgxGridBaseDirective.md).[`writeToData`](IgxGridBaseDirective.md#writetodata) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeGridRow.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeGridRow.md new file mode 100644 index 000000000..e2759c5ea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeGridRow.md @@ -0,0 +1,690 @@ +# Class: IgxTreeGridRow + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:341](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L341) + +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +## Extends + +- `BaseRow` + +## Implements + +- [`RowType`](../interfaces/RowType.md) + +## Properties + +### \_data? + +> `protected` `optional` **\_data?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L14) + +#### Inherited from + +`BaseRow._data` + +*** + +### grid + +> **grid**: [`GridType`](../interfaces/GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L346) + +Represent the grid instance, the row belongs to + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`grid`](../interfaces/RowType.md#grid) + +#### Inherited from + +`BaseRow.grid` + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L347) + +The index of the row within the grid + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`index`](../interfaces/RowType.md#index) + +#### Inherited from + +`BaseRow.index` + +## Accessors + +### addRowUI + +#### Get Signature + +> **get** **addRowUI**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L46) + +Gets if this represents add row UI + +```typescript +let isAddRow = row.addRowUI; +``` + +##### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`addRowUI`](../interfaces/RowType.md#addrowui) + +#### Inherited from + +`BaseRow.addRowUI` + +*** + +### cells + +#### Get Signature + +> **get** **cells**(): [`CellType`](../interfaces/CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L195) + +Gets the rendered cells in the row component. + +##### Returns + +[`CellType`](../interfaces/CellType.md)[] + +Optional +A list or an array of cells, that belong to the row + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`cells`](../interfaces/RowType.md#cells) + +#### Inherited from + +`BaseRow.cells` + +*** + +### children + +#### Get Signature + +> **get** **children**(): [`RowType`](../interfaces/RowType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:395](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L395) + +Returns the child rows. + +##### Returns + +[`RowType`](../interfaces/RowType.md)[] + +Optional +Contains the child rows of the current row, if there are any. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`children`](../interfaces/RowType.md#children) + +*** + +### data + +#### Get Signature + +> **get** **data**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L378) + +The data passed to the row component. + +```typescript +let selectedRowData = this.grid.selectedRows[0].data; +``` + +##### Returns + +`any` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`data`](../interfaces/RowType.md#data) + +#### Overrides + +`BaseRow.data` + +*** + +### deleted + +#### Get Signature + +> **get** **deleted**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:173](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L173) + +Returns if the row is in delete state. + +##### Returns + +`boolean` + +Optional +Indicates whether the row is marked for deletion. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`deleted`](../interfaces/RowType.md#deleted) + +#### Inherited from + +`BaseRow.deleted` + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:484](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L484) + +Gets whether the row is disabled. +A disabled row represents a ghost placeholder created by row pinning. + +##### Returns + +`boolean` + +Optional +Indicates whether the current row is disabled + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`disabled`](../interfaces/RowType.md#disabled) + +#### Overrides + +`BaseRow.disabled` + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:469](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L469) + +Gets whether the row is expanded. + +```typescript +let esExpanded = row.expanded; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:480](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L480) + +Expands/collapses the row. + +```typescript +row.expanded = true; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`expanded`](../interfaces/RowType.md#expanded) + +#### Overrides + +`BaseRow.expanded` + +*** + +### hasChildren + +#### Get Signature + +> **get** **hasChildren**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L417) + +Returns true if child rows exist. Always return false for IgxGridRow. + +##### Returns + +`boolean` + +Optional +Indicates whether the current row has any child rows + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`hasChildren`](../interfaces/RowType.md#haschildren) + +#### Overrides + +`BaseRow.hasChildren` + +*** + +### inEditMode + +#### Get Signature + +> **get** **inEditMode**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L86) + +Returns if the row is currently in edit mode. + +##### Returns + +`boolean` + +Optional +Indicates whether the row is currently being edited. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`inEditMode`](../interfaces/RowType.md#ineditmode) + +#### Inherited from + +`BaseRow.inEditMode` + +*** + +### key + +#### Get Signature + +> **get** **key**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L33) + +Gets the row key. +A row in the grid is identified either by: +- primaryKey data value, +- the whole rowData, if the primaryKey is omitted. + +```typescript +let rowKey = row.key; +``` + +##### Returns + +`any` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`key`](../interfaces/RowType.md#key) + +#### Inherited from + +`BaseRow.key` + +*** + +### parent + +#### Get Signature + +> **get** **parent**(): [`RowType`](../interfaces/RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L409) + +Returns the parent row. + +##### Returns + +[`RowType`](../interfaces/RowType.md) + +Optional +Contains the parent row of the current row, if it has one. +If the parent row exist, it means that the current row is a child row + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`parent`](../interfaces/RowType.md#parent) + +*** + +### pinned + +#### Get Signature + +> **get** **pinned**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L443) + +Gets whether the row is pinned. + +```typescript +let isPinned = row.pinned; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **pinned**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L454) + +Sets whether the row is pinned. +Default value is `false`. +```typescript +row.pinned = !row.pinned; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is pinned. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`pinned`](../interfaces/RowType.md#pinned) + +#### Overrides + +`BaseRow.pinned` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L150) + +Gets whether the row is selected. +Default value is `false`. +```typescript +row.selected = true; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L161) + +Sets whether the row is selected. +Default value is `false`. +```typescript +row.selected = !row.selected; +``` + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +Optional +Indicates whether the current row is selected + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`selected`](../interfaces/RowType.md#selected) + +#### Inherited from + +`BaseRow.selected` + +*** + +### treeRow + +#### Get Signature + +> **get** **treeRow**(): [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L432) + +The `ITreeGridRecord` with metadata about the row in the context of the tree grid. + +```typescript +const rowParent = this.treeGrid.getRowByKey(1).treeRow.parent; +``` + +##### Returns + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md) + +Optional +Represents the hierarchical record associated with the row (for tree grids). +It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc. + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`treeRow`](../interfaces/RowType.md#treerow) + +*** + +### validation + +#### Get Signature + +> **get** **validation**(): [`IGridValidationState`](../interfaces/IGridValidationState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L58) + +Gets the validation status and errors, if any. +```typescript +let validation = row.validation; +let errors = validation.errors; +``` + +##### Returns + +[`IGridValidationState`](../interfaces/IGridValidationState.md) + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`validation`](../interfaces/RowType.md#validation) + +#### Inherited from + +`BaseRow.validation` + +*** + +### viewIndex + +#### Get Signature + +> **get** **viewIndex**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:356](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L356) + +Returns the view index calculated per the grid page. + +##### Returns + +`number` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`viewIndex`](../interfaces/RowType.md#viewindex) + +#### Overrides + +`BaseRow.viewIndex` + +## Methods + +### delete() + +> **delete**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L258) + +Removes the specified row from the grid's data source. +This method emits `onRowDeleted` event. + +```typescript +// delete the third selected row from the grid +this.grid.selectedRows[2].delete(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`delete`](../interfaces/RowType.md#delete) + +#### Inherited from + +`BaseRow.delete` + +*** + +### pin() + +> **pin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L213) + +Pins the specified row. +This method emits `onRowPinning` event. + +```typescript +// pin the selected row from the grid +this.grid.selectedRows[0].pin(); +``` + +#### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`pin`](../interfaces/RowType.md#pin) + +#### Inherited from + +`BaseRow.pin` + +*** + +### unpin() + +> **unpin**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L226) + +Unpins the specified row. +This method emits `onRowPinning` event. + +```typescript +// unpin the selected row from the grid +this.grid.selectedRows[0].unpin(); +``` + +#### Returns + +`boolean` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`unpin`](../interfaces/RowType.md#unpin) + +#### Inherited from + +`BaseRow.unpin` + +*** + +### update() + +> **update**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-public-row.ts#L239) + +Updates the specified row object and the data source record with the passed value. + +```typescript +// update the second selected row's value +let newValue = "Apple"; +this.grid.selectedRows[1].update(newValue); +``` + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +#### Implementation of + +[`RowType`](../interfaces/RowType.md).[`update`](../interfaces/RowType.md#update) + +#### Inherited from + +`BaseRow.update` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeNodeComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeNodeComponent.md new file mode 100644 index 000000000..b891ede5c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxTreeNodeComponent.md @@ -0,0 +1,632 @@ +# Class: IgxTreeNodeComponent\<T\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L133) + +The tree node component represents a child node of the tree component or another tree node. +Usage: + +```html + <igx-tree> + ... + <igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)"> + {{ data.FirstName }} {{ data.LastName }} + </igx-tree-node> + ... + </igx-tree> +``` + +## Type Parameters + +### T + +`T` + +## Implements + +- [`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`T`\> +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxTreeNodeComponent**\<`T`\>(): `IgxTreeNodeComponent`\<`T`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:368](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L368) + +#### Returns + +`IgxTreeNodeComponent`\<`T`\> + +#### Overrides + +`ToggleAnimationPlayer.constructor` + +## Properties + +### \_animationSettings + +> `protected` **\_animationSettings**: `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L63) + +#### Inherited from + +`ToggleAnimationPlayer._animationSettings` + +*** + +### animationService + +> `protected` **animationService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L37) + +#### Inherited from + +`ToggleAnimationPlayer.animationService` + +*** + +### cdr + +> `protected` **cdr**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L138) + +*** + +### data + +> **data**: `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L160) + +The data entry that the node is visualizing. + +#### Remarks + +Required for searching through nodes. + +#### Example + +```html + <igx-tree> + ... + <igx-tree-node [data]="data"> + {{ data.FirstName }} {{ data.LastName }} + </igx-tree-node> + ... + </igx-tree> +``` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`data`](../interfaces/IgxTreeNode.md#data) + +*** + +### destroy$ + +> `protected` **destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L61) + +#### Inherited from + +`ToggleAnimationPlayer.destroy$` + +*** + +### expandedChange + +> **expandedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L265) + +Emitted when the node's `expanded` property changes. + +```html +<igx-tree> + <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded"> + </igx-tree-node> +</igx-tree> +``` + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e)) +``` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`expandedChange`](../interfaces/IgxTreeNode.md#expandedchange) + +*** + +### loading + +> **loading**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L169) + +To be used for load-on-demand scenarios in order to specify whether the node is loading data. + +#### Remarks + +Loading nodes do not render children. + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`loading`](../interfaces/IgxTreeNode.md#loading) + +*** + +### navService + +> `protected` **navService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L137) + +*** + +### parentNode + +> **parentNode**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L140) + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`parentNode`](../interfaces/IgxTreeNode.md#parentnode) + +*** + +### players + +> `protected` **players**: `Map`\<`string`, [`AnimationPlayer`](../interfaces/AnimationPlayer.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts#L62) + +#### Inherited from + +`ToggleAnimationPlayer.players` + +*** + +### selectedChange + +> **selectedChange**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L247) + +Emitted when the node's `selected` property changes. + +```html +<igx-tree> + <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected"> + </igx-tree-node> +</igx-tree> +``` + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e)) +``` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`selectedChange`](../interfaces/IgxTreeNode.md#selectedchange) + +*** + +### selectionService + +> `protected` **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L135) + +*** + +### tree + +> **tree**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L134) + +*** + +### treeService + +> `protected` **treeService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L136) + +## Accessors + +### active + +#### Get Signature + +> **get** **active**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L227) + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **active**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:220](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L220) + +Gets/Sets the active state of the node + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`active`](../interfaces/IgxTreeNode.md#active) + +*** + +### children + +#### Get Signature + +> **get** **children**(): [`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:338](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L338) + +Return the child nodes of the node (if any) + +##### Remarks + +Returns `null` if node does not have children + +##### Example + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +const children: IgxTreeNode<any>[] = node.children; +``` + +##### Returns + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\>[] + +*** + +### disabled + +#### Get Signature + +> **get** **disabled**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L293) + +Gets/Sets the disabled state of the node + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L297) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`disabled`](../interfaces/IgxTreeNode.md#disabled) + +*** + +### expanded + +#### Get Signature + +> **get** **expanded**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:462](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L462) + +Get/set whether the node is expanded + +```html +<igx-tree> + ... + <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode"> + {{ node.label }} + </igx-tree-node> +</igx-tree> +``` + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +const expanded = node.expanded; +node.expanded = true; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **expanded**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:466](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L466) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`expanded`](../interfaces/IgxTreeNode.md#expanded) + +*** + +### level + +#### Get Signature + +> **get** **level**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:405](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L405) + +The depth of the node, relative to the root + +```html +<igx-tree> + ... + <igx-tree-node #node> + My level is {{ node.level }} + </igx-tree-node> +</igx-tree> +``` + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0]; +const level: number = node.level; +``` + +##### Returns + +`number` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`level`](../interfaces/IgxTreeNode.md#level) + +*** + +### path + +#### Get Signature + +> **get** **path**(): [`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L281) + +Retrieves the full path to the node incuding itself + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +const path: IgxTreeNode<any>[] = node.path; +``` + +##### Returns + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\>[] + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`path`](../interfaces/IgxTreeNode.md#path) + +*** + +### resourceStrings + +#### Get Signature + +> **get** **resourceStrings**(): `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L210) + +An accessor that returns the resource strings. + +##### Returns + +`PrefixedResourceStrings` + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L203) + +Gets/Sets the resource strings. + +##### Remarks + +Uses EN resources by default. + +##### Parameters + +###### value + +`PrefixedResourceStrings` + +##### Returns + +`void` + +*** + +### selected + +#### Get Signature + +> **get** **selected**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L427) + +Get/set whether the node is selected. Supporst two-way binding. + +```html +<igx-tree> + ... + <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected"> + {{ node.label }} + </igx-tree-node> +</igx-tree> +``` + +```typescript +const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +const selected = node.selected; +node.selected = true; +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **selected**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L431) + +##### Parameters + +###### val + +`boolean` + +##### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`selected`](../interfaces/IgxTreeNode.md#selected) + +## Methods + +### collapse() + +> **collapse**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:665](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L665) + +Collapses the node, triggering animation + +```html +<igx-tree> + <igx-tree-node #node>My Node</igx-tree-node> +</igx-tree> +<button type="button" igxButton (click)="node.collapse()">Collapse Node</button> +``` + +```typescript +const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +myNode.collapse(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`collapse`](../interfaces/IgxTreeNode.md#collapse) + +*** + +### expand() + +> **expand**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L630) + +Expands the node, triggering animation + +```html +<igx-tree> + <igx-tree-node #node>My Node</igx-tree-node> +</igx-tree> +<button type="button" igxButton (click)="node.expand()">Expand Node</button> +``` + +```typescript +const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +myNode.expand(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`expand`](../interfaces/IgxTreeNode.md#expand) + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:580](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts#L580) + +Toggles the node expansion state, triggering animation + +```html +<igx-tree> + <igx-tree-node #node>My Node</igx-tree-node> +</igx-tree> +<button type="button" igxButton (click)="node.toggle()">Toggle Node</button> +``` + +```typescript +const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; +myNode.toggle(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md).[`toggle`](../interfaces/IgxTreeNode.md#toggle) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxYearsViewComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxYearsViewComponent.md new file mode 100644 index 000000000..fe2c74be8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IgxYearsViewComponent.md @@ -0,0 +1,297 @@ +# Class: IgxYearsViewComponent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts#L33) + +## Extends + +- `IgxCalendarViewDirective` + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new IgxYearsViewComponent**(): `IgxYearsViewComponent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:193](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L193) + +#### Returns + +`IgxYearsViewComponent` + +#### Inherited from + +`IgxCalendarViewDirective.constructor` + +## Properties + +### dayInterval + +> `protected` **dayInterval**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L54) + +#### Inherited from + +`IgxCalendarViewDirective.dayInterval` + +*** + +### el + +> **el**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts#L34) + +*** + +### formatView + +> **formatView**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L76) + +Gets/sets whether the view should be rendered +according to the locale and format, if any. + +#### Inherited from + +`IgxCalendarViewDirective.formatView` + +*** + +### role + +> **role**: `string` = `'grid'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L58) + +#### Inherited from + +`IgxCalendarViewDirective.role` + +*** + +### selected + +> **selected**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L90) + +Emits an event when a selection is made in the view. +Provides reference the `date` property in the component. + +#### Memberof + +IgxCalendarViewDirective + +#### Inherited from + +`IgxCalendarViewDirective.selected` + +*** + +### showActive + +> **showActive**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L82) + +Applies styles to the active item on view focus. + +#### Inherited from + +`IgxCalendarViewDirective.showActive` + +*** + +### tabIndex + +> **tabIndex**: `number` = `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L62) + +#### Inherited from + +`IgxCalendarViewDirective.tabIndex` + +## Accessors + +### activeDescendant + +#### Get Signature + +> **get** `protected` **activeDescendant**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L65) + +##### Returns + +`number` + +#### Inherited from + +`IgxCalendarViewDirective.activeDescendant` + +*** + +### date + +#### Get Signature + +> **get** **date**(): `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L164) + +##### Returns + +`Date` + +#### Set Signature + +> **set** **date**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L158) + +Gets/sets the selected date of the view. +By default it's the current date. +```typescript +let date = this.view.date; +``` + +##### Memberof + +IgxYearsViewComponent + +##### Parameters + +###### value + +`Date` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarViewDirective.date` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L178) + +Gets the `locale` of the view. +Default value is `"en"`. +```typescript +let locale = this.view.locale; +``` + +##### Memberof + +IgxCalendarViewDirective + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts#L189) + +Sets the `locale` of the view. +Expects a valid BCP 47 language tag. +Default value is `"en"`. + +##### Memberof + +IgxCalendarViewDirective + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgxCalendarViewDirective.locale` + +*** + +### standalone + +#### Set Signature + +> **set** **standalone**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts#L56) + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### yearFormat + +#### Get Signature + +> **get** **yearFormat**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts#L84) + +Gets the year format option of the years view. +```typescript +let yearFormat = this.yearsView.yearFormat. +``` + +##### Returns + +`any` + +#### Set Signature + +> **set** **yearFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts#L96) + +Sets the year format option of the years view. +```html +<igx-years-view [yearFormat]="numeric"></igx-years-view> +``` + +##### Memberof + +IgxYearsViewComponent + +##### Parameters + +###### value + +`any` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IntlFormatter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IntlFormatter.md new file mode 100644 index 000000000..af2fe629a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/IntlFormatter.md @@ -0,0 +1,363 @@ +# Class: IntlFormatter + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L14) + +## Extends + +- [`BaseFormatter`](BaseFormatter.md) + +## Constructors + +### Constructor + +> **new IntlFormatter**(): `IntlFormatter` + +#### Returns + +`IntlFormatter` + +#### Inherited from + +[`BaseFormatter`](BaseFormatter.md).[`constructor`](BaseFormatter.md#constructor) + +## Properties + +### IntlDateTimeStyleValues + +> `protected` **IntlDateTimeStyleValues**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L22) + +#### full + +> **full**: `string` = `'Full'` + +#### long + +> **long**: `string` = `'Long'` + +#### medium + +> **medium**: `string` = `'Medium'` + +#### short + +> **short**: `string` = `'Short'` + +#### Inherited from + +[`BaseFormatter`](BaseFormatter.md).[`IntlDateTimeStyleValues`](BaseFormatter.md#intldatetimestylevalues) + +## Methods + +### formatCurrency() + +> **formatCurrency**(`value`, `locale?`, `display?`, `currencyCode?`, `digitsInfo?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L51) + +Format number as a currency based on locale + +#### Parameters + +##### value + +`string` \| `number` + +##### locale? + +`string` + +##### display? + +`string` + +##### currencyCode? + +`string` + +##### digitsInfo? + +`string` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`formatCurrency`](BaseFormatter.md#formatcurrency) + +*** + +### formatDate() + +> **formatDate**(`value`, `format`, `locale`, `timezone?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L24) + +Format provided date to reflect locales format. Similar to Angular's formatDate. + +#### Parameters + +##### value + +`string` \| `number` \| `Date` + +##### format + +`string` + +##### locale + +`string` + +##### timezone? + +`string` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`formatDate`](BaseFormatter.md#formatdate) + +*** + +### formatNumber() + +> **formatNumber**(`value`, `locale?`, `digitsInfo?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L43) + +Format number value based on locale + +#### Parameters + +##### value + +`string` \| `number` + +##### locale? + +`string` + +##### digitsInfo? + +`string` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`formatNumber`](BaseFormatter.md#formatnumber) + +*** + +### formatPercent() + +> **formatPercent**(`value`, `locale?`, `digitsInfo?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L47) + +Format number value as percent based on locale + +#### Parameters + +##### value + +`string` \| `number` + +##### locale? + +`string` + +##### digitsInfo? + +`string` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`formatPercent`](BaseFormatter.md#formatpercent) + +*** + +### getCurrencyCode() + +> **getCurrencyCode**(`_locale`, `overrideCode?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L55) + +Retrieve the currency code of the locale provided. +Angular provides locale data for them, if using that. +When using Intl, it should be user defined and defaults to USD. + +#### Parameters + +##### \_locale + +`string` + +##### overrideCode? + +`string` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`getCurrencyCode`](BaseFormatter.md#getcurrencycode) + +*** + +### getCurrencySymbol() + +> **getCurrencySymbol**(`currencyCode`, `locale?`, `currencyDisplay?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L59) + +Get the currency symbol based on a currency code. + +#### Parameters + +##### currencyCode + +`string` + +##### locale? + +`string` + +##### currencyDisplay? + +keyof `NumberFormatOptionsCurrencyDisplayRegistry` = `"symbol"` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`getCurrencySymbol`](BaseFormatter.md#getcurrencysymbol) + +*** + +### getFormatOptions() + +> **getFormatOptions**(`format`): `DateTimeFormatOptions` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L51) + +Get Intl options based on format provided: + +date and time formats - short, medium, long, full + +date formats - shortDate, mediumDate, longDate, fullDate + +time formats - shortTime, mediumTime, longTime, fullTime + +#### Parameters + +##### format + +`string` + +#### Returns + +`DateTimeFormatOptions` + +Return the resolved options or null if not matching any of the above. + +#### Inherited from + +[`BaseFormatter`](BaseFormatter.md).[`getFormatOptions`](BaseFormatter.md#getformatoptions) + +*** + +### getLocaleDateTimeFormat() + +> **getLocaleDateTimeFormat**(`locale`, `forceLeadingZero?`, `options?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L73) + +Returns the date and time format based on a provided locale and options. + +#### Parameters + +##### locale + +`string` + +##### forceLeadingZero? + +`boolean` = `false` + +##### options? + +`DateTimeFormatOptions` + +#### Returns + +`string` + +#### Inherited from + +[`BaseFormatter`](BaseFormatter.md).[`getLocaleDateTimeFormat`](BaseFormatter.md#getlocaledatetimeformat) + +*** + +### getLocaleFirstDayOfWeek() + +> **getLocaleFirstDayOfWeek**(`locale?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L63) + +Get first day of the week. +Angular's default: 0...6. +Intl default: 1...7. + +#### Parameters + +##### locale? + +`string` + +#### Returns + +`number` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`getLocaleFirstDayOfWeek`](BaseFormatter.md#getlocalefirstdayofweek) + +*** + +### verifyLocale() + +> **verifyLocale**(`locale`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L15) + +#### Parameters + +##### locale + +`string` + +#### Returns + +`string` + +#### Overrides + +[`BaseFormatter`](BaseFormatter.md).[`verifyLocale`](BaseFormatter.md#verifylocale) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoOpScrollStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoOpScrollStrategy.md new file mode 100644 index 000000000..50751fa98 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoOpScrollStrategy.md @@ -0,0 +1,85 @@ +# Class: NoOpScrollStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts#L6) + +Empty scroll strategy. Does nothing. + +## Extends + +- [`ScrollStrategy`](ScrollStrategy.md) + +## Constructors + +### Constructor + +> **new NoOpScrollStrategy**(): `NoOpScrollStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts#L7) + +#### Returns + +`NoOpScrollStrategy` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`constructor`](ScrollStrategy.md#constructor) + +## Methods + +### attach() + +> **attach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts#L21) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`attach`](ScrollStrategy.md#attach) + +*** + +### detach() + +> **detach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts#L29) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`detach`](ScrollStrategy.md#detach) + +*** + +### initialize() + +> **initialize**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts#L13) + +Initializes the strategy. Should be called once + +#### Returns + +`void` + +#### Overrides + +[`ScrollStrategy`](ScrollStrategy.md).[`initialize`](ScrollStrategy.md#initialize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopFilteringStrategy.md new file mode 100644 index 000000000..62f857dcd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopFilteringStrategy.md @@ -0,0 +1,303 @@ +# Class: NoopFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:232](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L232) + +## Extends + +- [`BaseFilteringStrategy`](BaseFilteringStrategy.md) + +## Constructors + +### Constructor + +> **new NoopFilteringStrategy**(): `NoopFilteringStrategy` + +#### Returns + +`NoopFilteringStrategy` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`constructor`](BaseFilteringStrategy.md#constructor) + +## Methods + +### filter() + +> **filter**(`data`, `_`, `__?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:242](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L242) + +#### Parameters + +##### data + +`any`[] + +##### \_ + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### \_\_? + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any`[] + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`filter`](BaseFilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`findMatchByExpression`](BaseFilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `_fieldName`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L233) + +#### Parameters + +##### rec + +`any` + +##### \_fieldName + +`string` + +#### Returns + +`any` + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFieldValue`](BaseFilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L159) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilteredData`](BaseFilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItemKeyValue`](BaseFilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItemLabel`](BaseFilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L131) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItems`](BaseFilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`matchRecord`](BaseFilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`_column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L221) + +#### Parameters + +##### \_column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`shouldFormatFilterValues`](BaseFilteringStrategy.md#shouldformatfiltervalues) + +*** + +### instance() + +> `static` **instance**(): `NoopFilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L238) + +#### Returns + +`NoopFilteringStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopPivotDimensionsStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopPivotDimensionsStrategy.md new file mode 100644 index 000000000..82aaea021 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopPivotDimensionsStrategy.md @@ -0,0 +1,62 @@ +# Class: NoopPivotDimensionsStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L11) + +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +## Implements + +- [`IPivotDimensionStrategy`](../interfaces/IPivotDimensionStrategy.md) + +## Constructors + +### Constructor + +> **new NoopPivotDimensionsStrategy**(): `NoopPivotDimensionsStrategy` + +#### Returns + +`NoopPivotDimensionsStrategy` + +## Methods + +### process() + +> **process**(`collection`, `_`, `__`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L18) + +#### Parameters + +##### collection + +`any`[] + +##### \_ + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### \_\_ + +[`IPivotValue`](../interfaces/IPivotValue.md)[] + +#### Returns + +`any`[] + +#### Implementation of + +[`IPivotDimensionStrategy`](../interfaces/IPivotDimensionStrategy.md).[`process`](../interfaces/IPivotDimensionStrategy.md#process) + +*** + +### instance() + +> `static` **instance**(): `NoopPivotDimensionsStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L14) + +#### Returns + +`NoopPivotDimensionsStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopSortingStrategy.md new file mode 100644 index 000000000..3d2db7856 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/NoopSortingStrategy.md @@ -0,0 +1,49 @@ +# Class: NoopSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L359) + +Represents a class implementing the IGridSortingStrategy interface with a no-operation sorting strategy. +It performs no sorting and returns the data as it is. + +## Implements + +- [`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) + +## Methods + +### sort() + +> **sort**(`data`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:369](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L369) + +`data`: The array of data to be sorted. Could be of any type. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +#### Returns + +`any`[] + +#### Implementation of + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md).[`sort`](../interfaces/IGridSortingStrategy.md#sort) + +*** + +### instance() + +> `static` **instance**(): `NoopSortingStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:364](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L364) + +#### Returns + +`NoopSortingStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PerformanceService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PerformanceService.md new file mode 100644 index 000000000..6f797e76b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PerformanceService.md @@ -0,0 +1,117 @@ +# Class: PerformanceService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L74) + +## Constructors + +### Constructor + +> **new PerformanceService**(): `PerformanceService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L78) + +#### Returns + +`PerformanceService` + +## Methods + +### attachObserver() + +> **attachObserver**(`options?`): () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L102) + +#### Parameters + +##### options? + +`PerformanceObserverInit` + +#### Returns + +() => `void` + +*** + +### clearAll() + +> **clearAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L98) + +#### Returns + +`void` + +*** + +### clearMeasures() + +> **clearMeasures**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L94) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +*** + +### getMeasures() + +> **getMeasures**(`name?`): `PerformanceEntryList` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L90) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`PerformanceEntryList` + +*** + +### setLogEnabled() + +> **setLogEnabled**(`state`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L82) + +#### Parameters + +##### state + +`boolean` + +#### Returns + +`void` + +*** + +### start() + +> **start**(`name`): () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L86) + +#### Parameters + +##### name + +`string` + +#### Returns + +() => `void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PickerBaseDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PickerBaseDirective.md new file mode 100644 index 000000000..ef124db56 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PickerBaseDirective.md @@ -0,0 +1,762 @@ +# Abstract Class: PickerBaseDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L30) + +Common interface for Components with show and collapse functionality + +## Extended by + +- [`IgxDatePickerComponent`](IgxDatePickerComponent.md) +- [`IgxDateRangePickerComponent`](IgxDateRangePickerComponent.md) +- [`IgxTimePickerComponent`](IgxTimePickerComponent.md) + +## Implements + +- [`IToggleView`](../interfaces/IToggleView.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new PickerBaseDirective**(): `PickerBaseDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:339](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L339) + +#### Returns + +`PickerBaseDirective` + +## Properties + +### \_collapsed + +> `protected` **\_collapsed**: `boolean` = `true` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L297) + +*** + +### \_defaultLocale + +> `protected` **\_defaultLocale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L294) + +*** + +### \_destroy$ + +> `protected` **\_destroy$**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:333](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L333) + +*** + +### \_displayFormat + +> `protected` **\_displayFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:296](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L296) + +*** + +### \_inputFormat + +> `protected` **\_inputFormat**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:295](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L295) + +*** + +### \_inputGroupType + +> `protected` **\_inputGroupType**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L33) + +*** + +### \_locale + +> `protected` **\_locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L293) + +*** + +### \_localeId + +> `protected` **\_localeId**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L32) + +*** + +### \_maxValue + +> `protected` **\_maxValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L300) + +*** + +### \_minValue + +> `protected` **\_minValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:299](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L299) + +*** + +### \_type + +> `protected` **\_type**: [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L298) + +*** + +### \_weekStart + +> `protected` **\_weekStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L301) + +*** + +### closed + +> **closed**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L274) + +Emitted after the calendar has closed. + +#### Example + +```html +<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker> +``` + +*** + +### closing + +> **closing**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L263) + +Emitted when the calendar has started closing, cancelable. + +#### Example + +```html +<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker> +``` + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L144) + +Enables or disables the picker. + +#### Example + +```html +<igx-date-picker [disabled]="'true'"></igx-date-picker> +``` + +*** + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L31) + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`element`](../interfaces/IToggleView.md#element) + +*** + +### headerOrientation + +> **headerOrientation**: [`PickerHeaderOrientation`](../type-aliases/PickerHeaderOrientation.md) = `PickerHeaderOrientation.Horizontal` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L111) + +Gets/Sets the orientation of the `IgxDatePickerComponent` header. + +#### Example + +```html +<igx-date-picker headerOrientation="vertical"></igx-date-picker> +``` + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L122) + +Gets/Sets whether the header is hidden in dialog mode. + +#### Example + +```html +<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker> +``` + +*** + +### i18nFormatter + +> `protected` **i18nFormatter**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L34) + +*** + +### inputGroup + +> `protected` **inputGroup**: [`IgxInputGroupComponent`](IgxInputGroupComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L291) + +*** + +### mode + +> **mode**: [`PickerInteractionMode`](../type-aliases/PickerInteractionMode.md) = `PickerInteractionMode.DropDown` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L100) + +Can be `dropdown` with editable input field or `dialog` with readonly input field. + +#### Remarks + +Default mode is `dropdown` + +#### Example + +```html +<igx-date-picker mode="dialog"></igx-date-picker> +``` + +*** + +### opened + +> **opened**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L252) + +Emitted after the calendar has opened. + +#### Example + +```html +<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker> +``` + +*** + +### opening + +> **opening**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L241) + +Emitted when the calendar has started opening, cancelable. + +#### Example + +```html +<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker> +``` + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L200) + +The container used for the pop-up element. + +#### Example + +```html +<div igxOverlayOutlet #outlet="overlay-outlet"></div> +<!-- ... --> +<igx-date-picker [outlet]="outlet"></igx-date-picker> +<!-- ... --> +``` + +*** + +### overlaySettings + +> **overlaySettings**: [`OverlaySettings`](../interfaces/OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L133) + +Overlay settings used to display the pop-up element. + +#### Example + +```html +<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker> +``` + +*** + +### placeholder + +> **placeholder**: `string` = `''` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L86) + +Sets the `placeholder` of the picker's input. + +#### Example + +```html +<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker> +``` + +*** + +### prefixes + +> `protected` **prefixes**: `QueryList`\<`IgxPrefixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L285) + +*** + +### suffixes + +> `protected` **suffixes**: `QueryList`\<`IgxSuffixDirective`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:288](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L288) + +*** + +### tabIndex + +> **tabIndex**: `string` \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L230) + +Gets/Sets the default template editor's tabindex. + +#### Example + +```html +<igx-date-picker [tabIndex]="1"></igx-date-picker> +``` + +*** + +### valueChange + +> `abstract` **valueChange**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L337) + +## Accessors + +### collapsed + +#### Get Signature + +> **get** **collapsed**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L312) + +Gets the picker's pop-up state. + +##### Example + +```typescript +const state = this.picker.collapsed; +``` + +##### Returns + +`boolean` + +*** + +### displayFormat + +#### Get Signature + +> **get** **displayFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L73) + +##### Returns + +`string` + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L69) + +The format used to display the picker's value when it's not being edited. + +##### Remarks + +Uses Angular's DatePipe. + +##### Example + +```html +<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### inputFormat + +#### Get Signature + +> **get** **inputFormat**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L52) + +##### Returns + +`string` + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L48) + +The editor's input mask. + +##### Remarks + +Also used as a placeholder when none is provided. + +##### Example + +```html +<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker> +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### locale + +#### Get Signature + +> **get** **locale**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L157) + +Gets the `locale` of the date-picker. +If not set, defaults to applciation's locale.. + +##### Returns + +`string` + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L165) + +Sets the `locale` of the date-picker. +Expects a valid BCP 47 language tag. + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### toggleContainer + +#### Get Signature + +> **get** `abstract` `protected` **toggleContainer**(): `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L302) + +##### Returns + +`HTMLElement` + +*** + +### type + +#### Get Signature + +> **get** **type**(): [`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L217) + +##### Returns + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +#### Set Signature + +> **set** **type**(`val`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L214) + +Determines how the picker's input will be styled. + +##### Remarks + +Default is `box`. + +##### Example + +```html +<igx-date-picker [type]="'line'"></igx-date-picker> +``` + +##### Parameters + +###### val + +[`IgxInputGroupType`](../type-aliases/IgxInputGroupType.md) + +##### Returns + +`void` + +*** + +### weekStart + +#### Get Signature + +> **get** **weekStart**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L176) + +Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. + +##### Returns + +`number` + +#### Set Signature + +> **set** **weekStart**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L184) + +Sets the start day of the week. +Can be assigned to a numeric value or to `WEEKDAYS` enum value. + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +## Methods + +### clear() + +> `abstract` **clear**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L402) + +#### Returns + +`void` + +*** + +### close() + +> `abstract` **close**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L401) + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`close`](../interfaces/IToggleView.md#close) + +*** + +### getEditElement() + +> `abstract` **getEditElement**(): `HTMLInputElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L403) + +Return the focusable native element + +#### Returns + +`HTMLInputElement` + +#### Implementation of + +`EditorProvider.getEditElement` + +*** + +### initLocale() + +> `protected` **initLocale**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L385) + +#### Returns + +`void` + +*** + +### onResourceChange() + +> `protected` **onResourceChange**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L391) + +#### Parameters + +##### args + +`CustomEvent`\<`IResourceChangeEventArgs`\> + +#### Returns + +`void` + +*** + +### open() + +> `abstract` **open**(`settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:399](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L399) + +#### Parameters + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`open`](../interfaces/IToggleView.md#open) + +*** + +### select() + +> `abstract` **select**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:398](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L398) + +#### Parameters + +##### value + +`string` \| `Date` \| [`DateRange`](../interfaces/DateRange.md) + +#### Returns + +`void` + +*** + +### toggle() + +> `abstract` **toggle**(`settings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:400](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L400) + +#### Parameters + +##### settings? + +[`OverlaySettings`](../interfaces/OverlaySettings.md) + +#### Returns + +`void` + +#### Implementation of + +[`IToggleView`](../interfaces/IToggleView.md).[`toggle`](../interfaces/IToggleView.md#toggle) + +*** + +### updateResources() + +> `protected` **updateResources**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:396](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts#L396) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotColumnDimensionsStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotColumnDimensionsStrategy.md new file mode 100644 index 000000000..d5d460a20 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotColumnDimensionsStrategy.md @@ -0,0 +1,70 @@ +# Class: PivotColumnDimensionsStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L66) + +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +## Implements + +- [`IPivotDimensionStrategy`](../interfaces/IPivotDimensionStrategy.md) + +## Constructors + +### Constructor + +> **new PivotColumnDimensionsStrategy**(): `PivotColumnDimensionsStrategy` + +#### Returns + +`PivotColumnDimensionsStrategy` + +## Methods + +### process() + +> **process**(`collection`, `columns`, `values`, `cloneStrategy`, `pivotKeys?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L73) + +#### Parameters + +##### collection + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +##### columns + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### values + +[`IPivotValue`](../interfaces/IPivotValue.md)[] + +##### cloneStrategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### pivotKeys? + +[`IPivotKeys`](../interfaces/IPivotKeys.md) = `DEFAULT_PIVOT_KEYS` + +#### Returns + +`any`[] + +#### Implementation of + +[`IPivotDimensionStrategy`](../interfaces/IPivotDimensionStrategy.md).[`process`](../interfaces/IPivotDimensionStrategy.md#process) + +*** + +### instance() + +> `static` **instance**(): [`PivotRowDimensionsStrategy`](PivotRowDimensionsStrategy.md) \| `PivotColumnDimensionsStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L69) + +#### Returns + +[`PivotRowDimensionsStrategy`](PivotRowDimensionsStrategy.md) \| `PivotColumnDimensionsStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotRowDimensionsStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotRowDimensionsStrategy.md new file mode 100644 index 000000000..a53e29c51 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotRowDimensionsStrategy.md @@ -0,0 +1,70 @@ +# Class: PivotRowDimensionsStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L24) + +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +## Implements + +- [`IPivotDimensionStrategy`](../interfaces/IPivotDimensionStrategy.md) + +## Constructors + +### Constructor + +> **new PivotRowDimensionsStrategy**(): `PivotRowDimensionsStrategy` + +#### Returns + +`PivotRowDimensionsStrategy` + +## Methods + +### process() + +> **process**(`collection`, `rows`, `values`, `cloneStrategy`, `pivotKeys?`): [`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L31) + +#### Parameters + +##### collection + +`any` + +##### rows + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### values + +[`IPivotValue`](../interfaces/IPivotValue.md)[] + +##### cloneStrategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +##### pivotKeys? + +[`IPivotKeys`](../interfaces/IPivotKeys.md) = `DEFAULT_PIVOT_KEYS` + +#### Returns + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +#### Implementation of + +[`IPivotDimensionStrategy`](../interfaces/IPivotDimensionStrategy.md).[`process`](../interfaces/IPivotDimensionStrategy.md#process) + +*** + +### instance() + +> `static` **instance**(): `PivotRowDimensionsStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts#L27) + +#### Returns + +`PivotRowDimensionsStrategy` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotUtil.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotUtil.md new file mode 100644 index 000000000..810ed30e1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/PivotUtil.md @@ -0,0 +1,589 @@ +# Class: PivotUtil + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L6) + +## Constructors + +### Constructor + +> **new PivotUtil**(): `PivotUtil` + +#### Returns + +`PivotUtil` + +## Methods + +### aggregate() + +> `static` **aggregate**(`records`, `values`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:324](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L324) + +#### Parameters + +##### records + +`any` + +##### values + +[`IPivotValue`](../interfaces/IPivotValue.md)[] + +#### Returns + +`object` + +*** + +### applyAggregationRecordData() + +> `protected` `static` **applyAggregationRecordData**(`aggregationData`, `groupName`, `rec`, `pivotKeys`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L311) + +#### Parameters + +##### aggregationData + +`any` + +##### groupName + +`string` + +##### rec + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md) + +##### pivotKeys + +[`IPivotKeys`](../interfaces/IPivotKeys.md) + +#### Returns + +`void` + +*** + +### applyAggregations() + +> `static` **applyAggregations**(`rec`, `hierarchies`, `values`, `pivotKeys`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L290) + +#### Parameters + +##### rec + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md) + +##### hierarchies + +`any` + +##### values + +`any` + +##### pivotKeys + +[`IPivotKeys`](../interfaces/IPivotKeys.md) + +#### Returns + +`void` + +*** + +### assignLevels() + +> `static` **assignLevels**(`dims`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L175) + +#### Parameters + +##### dims + +`any` + +#### Returns + +`void` + +*** + +### buildExpressionTree() + +> `static` **buildExpressionTree**(`config`): [`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:404](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L404) + +#### Parameters + +##### config + +[`IPivotConfiguration`](../interfaces/IPivotConfiguration.md) + +#### Returns + +[`FilteringExpressionsTree`](FilteringExpressionsTree.md) + +*** + +### extractValueFromDimension() + +> `static` **extractValueFromDimension**(`dim`, `recData`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L222) + +#### Parameters + +##### dim + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### recData + +`any` + +#### Returns + +`any` + +*** + +### extractValuesForColumn() + +> `static` **extractValuesForColumn**(`dims`, `recData`, `pivotKeys`, `path?`): `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L257) + +#### Parameters + +##### dims + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### recData + +`any` + +##### pivotKeys + +[`IPivotKeys`](../interfaces/IPivotKeys.md) + +##### path? + +`any`[] = `[]` + +#### Returns + +`Map`\<`string`, `any`\> + +*** + +### extractValuesForRow() + +> `static` **extractValuesForRow**(`dims`, `recData`, `pivotKeys`, `cloneStrategy`): `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L235) + +#### Parameters + +##### dims + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### recData + +`any` + +##### pivotKeys + +[`IPivotKeys`](../interfaces/IPivotKeys.md) + +##### cloneStrategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Returns + +`Map`\<`string`, `any`\> + +*** + +### flatten() + +> `static` **flatten**(`arr`, `lvl?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L275) + +#### Parameters + +##### arr + +`any` + +##### lvl? + +`number` = `0` + +#### Returns + +`any` + +*** + +### flattenGroups() + +> `static` **flattenGroups**(`data`, `dimension`, `expansionStates`, `defaultExpand`, `parent?`, `parentRec?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L27) + +#### Parameters + +##### data + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### expansionStates + +`any` + +##### defaultExpand + +`boolean` + +##### parent? + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### parentRec? + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md) + +#### Returns + +`void` + +*** + +### flattenGroupsHorizontally() + +> `static` **flattenGroupsHorizontally**(`data`, `dimension`, `expansionStates`, `defaultExpand`, `visibleDimensions`, `summariesPosition`, `parent?`, `parentRec?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L85) + +#### Parameters + +##### data + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### expansionStates + +`any` + +##### defaultExpand + +`boolean` + +##### visibleDimensions + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### summariesPosition + +[`PivotSummaryPosition`](../enumerations/PivotSummaryPosition.md) + +##### parent? + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### parentRec? + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md) + +#### Returns + +`void` + +*** + +### getAggregateList() + +> `static` **getAggregateList**(`val`, `grid`): [`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:473](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L473) + +#### Parameters + +##### val + +[`IPivotValue`](../interfaces/IPivotValue.md) + +##### grid + +[`PivotGridType`](../interfaces/PivotGridType.md) + +#### Returns + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +*** + +### getAggregatorForType() + +> `static` **getAggregatorForType**(`aggregate`, `dataType`): (`members`, `data?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L337) + +#### Parameters + +##### aggregate + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md) + +##### dataType + +`GridColumnDataType` + +#### Returns + +(`members`, `data?`) => `any` + +*** + +### getAggregatorsForValue() + +> `static` **getAggregatorsForValue**(`value`, `grid`): [`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:494](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L494) + +#### Parameters + +##### value + +[`IPivotValue`](../interfaces/IPivotValue.md) + +##### grid + +[`PivotGridType`](../interfaces/PivotGridType.md) + +#### Returns + +[`IPivotAggregator`](../interfaces/IPivotAggregator.md)[] + +*** + +### getDimensionDepth() + +> `static` **getDimensionDepth**(`dim`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L226) + +#### Parameters + +##### dim + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +#### Returns + +`number` + +*** + +### getDirectLeafs() + +> `static` **getDirectLeafs**(`records`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L378) + +#### Parameters + +##### records + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +#### Returns + +`any`[] + +*** + +### getFieldsHierarchy() + +> `static` **getFieldsHierarchy**(`data`, `dimensions`, `dimensionType`, `pivotKeys`, `cloneStrategy`): `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L187) + +#### Parameters + +##### data + +`any`[] + +##### dimensions + +[`IPivotDimension`](../interfaces/IPivotDimension.md)[] + +##### dimensionType + +[`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +##### pivotKeys + +[`IPivotKeys`](../interfaces/IPivotKeys.md) + +##### cloneStrategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Returns + +`Map`\<`string`, `any`\> + +*** + +### getRecordKey() + +> `static` **getRecordKey**(`rec`, `currentDim`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L391) + +#### Parameters + +##### rec + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md) + +##### currentDim + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +#### Returns + +`string` + +*** + +### processGroups() + +> `static` **processGroups**(`recs`, `dimension`, `pivotKeys`, `cloneStrategy`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L9) + +#### Parameters + +##### recs + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +##### dimension + +[`IPivotDimension`](../interfaces/IPivotDimension.md) + +##### pivotKeys + +[`IPivotKeys`](../interfaces/IPivotKeys.md) + +##### cloneStrategy + +[`IDataCloneStrategy`](../interfaces/IDataCloneStrategy.md) + +#### Returns + +`void` + +*** + +### processHierarchy() + +> `static` **processHierarchy**(`hierarchies`, `pivotKeys`, `level?`, `rootData?`): [`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L351) + +#### Parameters + +##### hierarchies + +`any` + +##### pivotKeys + +`any` + +##### level? + +`number` = `0` + +##### rootData? + +`boolean` = `false` + +#### Returns + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +*** + +### sort() + +> `static` **sort**(`data`, `expressions`, `sorting?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L206) + +#### Parameters + +##### data + +[`IPivotGridRecord`](../interfaces/IPivotGridRecord.md)[] + +##### expressions + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +##### sorting? + +[`IGridSortingStrategy`](../interfaces/IGridSortingStrategy.md) = `...` + +#### Returns + +`any`[] + +*** + +### updateColumnTypeByAggregator() + +> `static` **updateColumnTypeByAggregator**(`columns`, `value`, `isSingleValue`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:510](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-util.ts#L510) + +#### Parameters + +##### columns + +`any`[] + +##### value + +[`IPivotValue`](../interfaces/IPivotValue.md) + +##### isSingleValue + +`boolean` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/Point.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/Point.md new file mode 100644 index 000000000..fad398826 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/Point.md @@ -0,0 +1,41 @@ +# Class: Point + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L87) + +## Constructors + +### Constructor + +> **new Point**(`x`, `y`): `Point` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L88) + +#### Parameters + +##### x + +`number` + +##### y + +`number` + +#### Returns + +`Point` + +## Properties + +### x + +> **x**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L88) + +*** + +### y + +> **y**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L88) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ScrollStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ScrollStrategy.md new file mode 100644 index 000000000..0f90e672f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ScrollStrategy.md @@ -0,0 +1,110 @@ +# Abstract Class: ScrollStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts#L4) + +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll). +Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService. + +## Extended by + +- [`AbsoluteScrollStrategy`](AbsoluteScrollStrategy.md) +- [`BlockScrollStrategy`](BlockScrollStrategy.md) +- [`CloseScrollStrategy`](CloseScrollStrategy.md) +- [`NoOpScrollStrategy`](NoOpScrollStrategy.md) + +## Implements + +- [`IScrollStrategy`](../interfaces/IScrollStrategy.md) + +## Constructors + +### Constructor + +> **new ScrollStrategy**(): `ScrollStrategy` + +#### Returns + +`ScrollStrategy` + +## Methods + +### attach() + +> `abstract` **attach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts#L23) + +Attaches the strategy +```typescript +settings.scrollStrategy.attach(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IScrollStrategy`](../interfaces/IScrollStrategy.md).[`attach`](../interfaces/IScrollStrategy.md#attach) + +*** + +### detach() + +> `abstract` **detach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts#L31) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +#### Implementation of + +[`IScrollStrategy`](../interfaces/IScrollStrategy.md).[`detach`](../interfaces/IScrollStrategy.md#detach) + +*** + +### initialize() + +> `abstract` **initialize**(`document`, `overlayService`, `id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts#L15) + +Initializes the strategy. Should be called once + +#### Parameters + +##### document + +`Document` + +reference to Document object. + +##### overlayService + +[`IgxOverlayService`](IgxOverlayService.md) + +IgxOverlay service to use in this strategy. + +##### id + +`string` + +Unique id for this strategy. +```typescript +settings.scrollStrategy.initialize(document, overlay, id); +``` + +#### Returns + +`any` + +#### Implementation of + +[`IScrollStrategy`](../interfaces/IScrollStrategy.md).[`initialize`](../interfaces/IScrollStrategy.md#initialize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/SortingIndexPipe.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/SortingIndexPipe.md new file mode 100644 index 000000000..986b79e6e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/SortingIndexPipe.md @@ -0,0 +1,39 @@ +# Class: SortingIndexPipe + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/headers/pipes.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/headers/pipes.ts#L9) + +## Implements + +- [`setCurrentI18n`](../variables/setCurrentI18n.md) + +## Constructors + +### Constructor + +> **new SortingIndexPipe**(): `SortingIndexPipe` + +#### Returns + +`SortingIndexPipe` + +## Methods + +### transform() + +> **transform**(`columnField`, `sortingExpressions`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/headers/pipes.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/headers/pipes.ts#L10) + +#### Parameters + +##### columnField + +`string` + +##### sortingExpressions + +[`ISortingExpression`](../interfaces/ISortingExpression.md)\<`any`\>[] + +#### Returns + +`number` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ThemeToken.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ThemeToken.md new file mode 100644 index 000000000..df3462519 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/ThemeToken.md @@ -0,0 +1,93 @@ +# Class: ThemeToken + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L4) + +## Constructors + +### Constructor + +> **new ThemeToken**(`t?`): `ThemeToken` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L8) + +#### Parameters + +##### t? + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +#### Returns + +`ThemeToken` + +## Properties + +### subject + +> **subject**: `BehaviorSubject`\<[`IgxTheme`](../type-aliases/IgxTheme.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L6) + +## Accessors + +### preferToken + +#### Get Signature + +> **get** **preferToken**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L30) + +##### Returns + +`boolean` + +*** + +### theme + +#### Get Signature + +> **get** **theme**(): [`IgxTheme`](../type-aliases/IgxTheme.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L26) + +##### Returns + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +## Methods + +### onChange() + +> **onChange**(`callback`): `Subscription` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L18) + +#### Parameters + +##### callback + +(`theme`) => `void` + +#### Returns + +`Subscription` + +*** + +### set() + +> **set**(`theme`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L22) + +#### Parameters + +##### theme + +[`IgxTheme`](../type-aliases/IgxTheme.md) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TooltipPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TooltipPositionStrategy.md new file mode 100644 index 000000000..9d13fe96c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TooltipPositionStrategy.md @@ -0,0 +1,470 @@ +# Class: TooltipPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L74) + +Positions the element as in **Connected** positioning strategy and re-positions the element in +the view port (calculating a different start point) in case the element is partially getting out of view + +## Extends + +- [`AutoPositionStrategy`](AutoPositionStrategy.md) + +## Constructors + +### Constructor + +> **new TooltipPositionStrategy**(`settings?`): `TooltipPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L78) + +#### Parameters + +##### settings? + +[`PositionSettings`](../interfaces/PositionSettings.md) + +#### Returns + +`TooltipPositionStrategy` + +#### Overrides + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`constructor`](AutoPositionStrategy.md#constructor) + +## Properties + +### \_initialSettings + +> `protected` **\_initialSettings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L6) + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`_initialSettings`](AutoPositionStrategy.md#_initialsettings) + +*** + +### \_initialSize + +> `protected` **\_initialSize**: [`Size`](../interfaces/Size.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L5) + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`_initialSize`](AutoPositionStrategy.md#_initialsize) + +*** + +### settings + +> **settings**: [`PositionSettings`](../interfaces/PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L21) + +PositionSettings to use when position the component in the overlay + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`settings`](AutoPositionStrategy.md#settings) + +## Methods + +### calculateElementRectangles() + +> `protected` **calculateElementRectangles**(`contentElement`, `target`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L67) + +Obtains the DomRect objects for the required elements - target and element to position + +#### Parameters + +##### contentElement + +`any` + +##### target + +`HTMLElement` \| [`Point`](Point.md) + +#### Returns + +`object` + +target and element DomRect objects + +##### elementRect + +> **elementRect**: `Partial`\<`DOMRect`\> + +##### targetRect + +> **targetRect**: `Partial`\<`DOMRect`\> + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`calculateElementRectangles`](AutoPositionStrategy.md#calculateelementrectangles) + +*** + +### calculateLeft() + +> `protected` **calculateLeft**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L81) + +Calculates the position of the left border of the element if it gets positioned +with provided start point and direction + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Start point of the target + +##### direction + +[`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`calculateLeft`](AutoPositionStrategy.md#calculateleft) + +*** + +### calculateTop() + +> `protected` **calculateTop**(`targetRect`, `elementRect`, `startPoint`, `direction`, `offset?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L99) + +Calculates the position of the top border of the element if it gets positioned +with provided position settings related to the target + +#### Parameters + +##### targetRect + +`Partial`\<`DOMRect`\> + +Rectangle of the target where element is attached + +##### elementRect + +`Partial`\<`DOMRect`\> + +Rectangle of the element + +##### startPoint + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Start point of the target + +##### direction + +[`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Direction in which to show the element + +##### offset? + +`number` + +#### Returns + +`number` + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`calculateTop`](AutoPositionStrategy.md#calculatetop) + +*** + +### clone() + +> **clone**(): [`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L58) + +Creates clone of this position strategy + +#### Returns + +[`IPositionStrategy`](../interfaces/IPositionStrategy.md) + +clone of this position strategy + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`clone`](AutoPositionStrategy.md#clone) + +*** + +### fitInViewport() + +> `protected` **fitInViewport**(`element`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L99) + +Fits the element into viewport according to the position settings + +#### Parameters + +##### element + +`HTMLElement` + +element to fit in viewport + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`void` + +#### Overrides + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`fitInViewport`](AutoPositionStrategy.md#fitinviewport) + +*** + +### getElementOffsets() + +> `protected` **getElementOffsets**(`connectedFit`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L82) + +Get element horizontal and vertical offsets by connectedFit +or `this.settings` if connectedFit offset is not defined. + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`object` + +horizontalOffset and verticalOffset + +##### horizontalOffset + +> **horizontalOffset**: `number` + +##### verticalOffset + +> **verticalOffset**: `number` + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`getElementOffsets`](AutoPositionStrategy.md#getelementoffsets) + +*** + +### position() + +> **position**(`contentElement`, `size`, `document?`, `initialCall?`, `target?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L86) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +##### size + +[`Size`](../interfaces/Size.md) + +Size of the element + +##### document? + +`Document` + +reference to the Document object + +##### initialCall? + +`boolean` + +should be true if this is the initial call to the method + +##### target? + +`HTMLElement` \| [`Point`](Point.md) + +attaching target for the component to show +```typescript +settings.positionStrategy.position(content, size, document, true); +``` + +#### Returns + +`void` + +#### Overrides + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`position`](AutoPositionStrategy.md#position) + +*** + +### positionArrow() + +> **positionArrow**(`arrow`, `arrowFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L112) + +Sets the position of the arrow relative to the tooltip element. + +#### Parameters + +##### arrow + +`HTMLElement` + +the arrow element of the tooltip. + +##### arrowFit + +[`ArrowFit`](../interfaces/ArrowFit.md) + +arrowFit object containing all necessary parameters. + +#### Returns + +`void` + +*** + +### setStyle() + +> `protected` **setStyle**(`element`, `targetRect`, `elementRect`, `connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts#L97) + +Sets element's style which effectively positions provided element according +to provided position settings + +#### Parameters + +##### element + +`HTMLElement` + +Element to position + +##### targetRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of strategy target + +##### elementRect + +`Partial`\<`DOMRect`\> + +Bounding rectangle of the element + +##### connectedFit + +`ConnectedFit` + +#### Returns + +`void` + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`setStyle`](AutoPositionStrategy.md#setstyle) + +*** + +### shouldFitInViewPort() + +> `protected` **shouldFitInViewPort**(`connectedFit`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L113) + +Returns whether the element should fit in viewport + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit object containing all necessary parameters + +#### Returns + +`boolean` + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`shouldFitInViewPort`](AutoPositionStrategy.md#shouldfitinviewport) + +*** + +### updateViewPortFit() + +> `protected` **updateViewPortFit**(`connectedFit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts#L44) + +Checks if element can fit in viewport and updates provided connectedFit +with the result + +#### Parameters + +##### connectedFit + +`ConnectedFit` + +connectedFit to update + +#### Returns + +`void` + +#### Inherited from + +[`AutoPositionStrategy`](AutoPositionStrategy.md).[`updateViewPortFit`](AutoPositionStrategy.md#updateviewportfit) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridFilteringStrategy.md new file mode 100644 index 000000000..86a728df4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridFilteringStrategy.md @@ -0,0 +1,328 @@ +# Class: TreeGridFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L8) + +## Extends + +- [`BaseFilteringStrategy`](BaseFilteringStrategy.md) + +## Extended by + +- [`TreeGridFormattedValuesFilteringStrategy`](TreeGridFormattedValuesFilteringStrategy.md) +- [`TreeGridMatchingRecordsOnlyFilteringStrategy`](TreeGridMatchingRecordsOnlyFilteringStrategy.md) + +## Constructors + +### Constructor + +> **new TreeGridFilteringStrategy**(`hierarchicalFilterFields?`): `TreeGridFilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L10) + +#### Parameters + +##### hierarchicalFilterFields? + +`string`[] + +#### Returns + +`TreeGridFilteringStrategy` + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`constructor`](BaseFilteringStrategy.md#constructor) + +## Properties + +### hierarchicalFilterFields? + +> `optional` **hierarchicalFilterFields?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L10) + +## Methods + +### filter() + +> **filter**(`data`, `expressionsTree`, `advancedExpressionsTree?`, `grid?`): [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L14) + +#### Parameters + +##### data + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree? + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`filter`](BaseFilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`findMatchByExpression`](BaseFilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `fieldName`, `isDate?`, `isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L19) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any` + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFieldValue`](BaseFilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L90) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilteredData`](BaseFilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItemKeyValue`](BaseFilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItemLabel`](BaseFilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L72) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Overrides + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`getFilterItems`](BaseFilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`matchRecord`](BaseFilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`_column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L221) + +#### Parameters + +##### \_column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`BaseFilteringStrategy`](BaseFilteringStrategy.md).[`shouldFormatFilterValues`](BaseFilteringStrategy.md#shouldformatfiltervalues) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridFormattedValuesFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridFormattedValuesFilteringStrategy.md new file mode 100644 index 000000000..02e198b92 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridFormattedValuesFilteringStrategy.md @@ -0,0 +1,332 @@ +# Class: TreeGridFormattedValuesFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L116) + +## Extends + +- [`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md) + +## Constructors + +### Constructor + +> **new TreeGridFormattedValuesFilteringStrategy**(`fields?`): `TreeGridFormattedValuesFilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L123) + +Creates a new instance of FormattedValuesFilteringStrategy. + +#### Parameters + +##### fields? + +`string`[] + +An array of column field names that should be formatted. +If omitted the values of all columns which has formatter will be formatted. + +#### Returns + +`TreeGridFormattedValuesFilteringStrategy` + +#### Overrides + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`constructor`](TreeGridFilteringStrategy.md#constructor) + +## Properties + +### hierarchicalFilterFields? + +> `optional` **hierarchicalFilterFields?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L10) + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`hierarchicalFilterFields`](TreeGridFilteringStrategy.md#hierarchicalfilterfields) + +## Methods + +### filter() + +> **filter**(`data`, `expressionsTree`, `advancedExpressionsTree?`, `grid?`): [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L14) + +#### Parameters + +##### data + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree? + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`filter`](TreeGridFilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`findMatchByExpression`](TreeGridFilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `fieldName`, `isDate?`, `isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L19) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFieldValue`](TreeGridFilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L90) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilteredData`](TreeGridFilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilterItemKeyValue`](TreeGridFilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilterItemLabel`](TreeGridFilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L72) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilterItems`](TreeGridFilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`matchRecord`](TreeGridFilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L127) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Overrides + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`shouldFormatFilterValues`](TreeGridFilteringStrategy.md#shouldformatfiltervalues) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridMatchingRecordsOnlyFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridMatchingRecordsOnlyFilteringStrategy.md new file mode 100644 index 000000000..7bc970c15 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/classes/TreeGridMatchingRecordsOnlyFilteringStrategy.md @@ -0,0 +1,327 @@ +# Class: TreeGridMatchingRecordsOnlyFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L132) + +## Extends + +- [`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md) + +## Constructors + +### Constructor + +> **new TreeGridMatchingRecordsOnlyFilteringStrategy**(`hierarchicalFilterFields?`): `TreeGridMatchingRecordsOnlyFilteringStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L10) + +#### Parameters + +##### hierarchicalFilterFields? + +`string`[] + +#### Returns + +`TreeGridMatchingRecordsOnlyFilteringStrategy` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`constructor`](TreeGridFilteringStrategy.md#constructor) + +## Properties + +### hierarchicalFilterFields? + +> `optional` **hierarchicalFilterFields?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L10) + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`hierarchicalFilterFields`](TreeGridFilteringStrategy.md#hierarchicalfilterfields) + +## Methods + +### filter() + +> **filter**(`data`, `expressionsTree`, `advancedExpressionsTree?`, `grid?`): [`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L133) + +#### Parameters + +##### data + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### advancedExpressionsTree? + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +[`ITreeGridRecord`](../interfaces/ITreeGridRecord.md)[] + +#### Overrides + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`filter`](TreeGridFilteringStrategy.md#filter) + +*** + +### findMatchByExpression() + +> **findMatchByExpression**(`rec`, `expr`, `isDate?`, `isTime?`, `grid?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L41) + +#### Parameters + +##### rec + +`any` + +##### expr + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`findMatchByExpression`](TreeGridFilteringStrategy.md#findmatchbyexpression) + +*** + +### getFieldValue() + +> `protected` **getFieldValue**(`rec`, `fieldName`, `isDate?`, `isTime?`, `grid?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L19) + +#### Parameters + +##### rec + +`any` + +##### fieldName + +`string` + +##### isDate? + +`boolean` = `false` + +##### isTime? + +`boolean` = `false` + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +#### Returns + +`any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFieldValue`](TreeGridFilteringStrategy.md#getfieldvalue) + +*** + +### getFilteredData() + +> `protected` **getFilteredData**(`column`, `tree`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L90) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilteredData`](TreeGridFilteringStrategy.md#getfiltereddata) + +*** + +### getFilterItemKeyValue() + +> `protected` **getFilterItemKeyValue**(`value`, `column`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L192) + +#### Parameters + +##### value + +`any` + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`object` + +##### finalValue + +> **finalValue**: `any` + +##### key + +> **key**: `any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilterItemKeyValue`](TreeGridFilteringStrategy.md#getfilteritemkeyvalue) + +*** + +### getFilterItemLabel() + +> `protected` **getFilterItemLabel**(`column`, `value`, `applyFormatter`, `data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L163) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### value + +`any` + +##### applyFormatter + +`boolean` + +##### data + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilterItemLabel`](TreeGridFilteringStrategy.md#getfilteritemlabel) + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts#L72) + +#### Parameters + +##### column + +[`ColumnType`](../interfaces/ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](../interfaces/IgxFilterItem.md)[]\> + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`getFilterItems`](TreeGridFilteringStrategy.md#getfilteritems) + +*** + +### matchRecord() + +> **matchRecord**(`rec`, `expressions`, `grid?`, `entity?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L67) + +#### Parameters + +##### rec + +`any` + +##### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](../interfaces/GridTypeBase.md) + +##### entity? + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`matchRecord`](TreeGridFilteringStrategy.md#matchrecord) + +*** + +### shouldFormatFilterValues() + +> `protected` **shouldFormatFilterValues**(`_column`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L221) + +#### Parameters + +##### \_column + +[`ColumnType`](../interfaces/ColumnType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`TreeGridFilteringStrategy`](TreeGridFilteringStrategy.md).[`shouldFormatFilterValues`](TreeGridFilteringStrategy.md#shouldformatfiltervalues) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/AbsolutePosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/AbsolutePosition.md new file mode 100644 index 000000000..2a3a82261 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/AbsolutePosition.md @@ -0,0 +1,29 @@ +# Enumeration: AbsolutePosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L72) + +Defines the possible positions for the absolute overlay settings presets. + +## Enumeration Members + +### Bottom + +> **Bottom**: `"bottom"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L73) + +*** + +### Center + +> **Center**: `"center"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L75) + +*** + +### Top + +> **Top**: `"top"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L74) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/CarouselAnimationDirection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/CarouselAnimationDirection.md new file mode 100644 index 000000000..27ecf931b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/CarouselAnimationDirection.md @@ -0,0 +1,27 @@ +# Enumeration: CarouselAnimationDirection + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L8) + +## Enumeration Members + +### NEXT + +> **NEXT**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L8) + +*** + +### NONE + +> **NONE**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L8) + +*** + +### PREV + +> **PREV**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ColumnPinningPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ColumnPinningPosition.md new file mode 100644 index 000000000..fc9caadce --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ColumnPinningPosition.md @@ -0,0 +1,23 @@ +# Enumeration: ColumnPinningPosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L85) + +Enumeration representing the possible positions for pinning columns. +- Start: Columns are pinned to the start of the grid. +- End: Columns are pinned to the end of the grid. + +## Enumeration Members + +### End + +> **End**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L87) + +*** + +### Start + +> **Start**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L86) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/CsvFileTypes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/CsvFileTypes.md new file mode 100644 index 000000000..9af92dc56 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/CsvFileTypes.md @@ -0,0 +1,36 @@ +# Enumeration: CsvFileTypes + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L117) + +This enumeration is used to configure the default value separator +as well as the default file extension used when performing CSV exporting. + +## Enumeration Members + +### CSV + +> **CSV**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L121) + +Character Separated Values, default separator is "comma", default file extension is .csv + +*** + +### TAB + +> **TAB**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:129](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L129) + +Tab Separated Values, default separator is tab, default file extension is .tab + +*** + +### TSV + +> **TSV**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts#L125) + +Tab Separated Values, default separator is tab, default file extension is .tsv diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DatePart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DatePart.md new file mode 100644 index 000000000..b45d6aff6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DatePart.md @@ -0,0 +1,77 @@ +# Enumeration: DatePart + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L4) + +Specify a particular date, time or AmPm part. + +## Enumeration Members + +### AmPm + +> **AmPm**: `"ampm"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L12) + +*** + +### Date + +> **Date**: `"date"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L5) + +*** + +### FractionalSeconds + +> **FractionalSeconds**: `"fractionalSeconds"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L11) + +*** + +### Hours + +> **Hours**: `"hours"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L8) + +*** + +### Literal + +> **Literal**: `"literal"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L13) + +*** + +### Minutes + +> **Minutes**: `"minutes"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L9) + +*** + +### Month + +> **Month**: `"month"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L6) + +*** + +### Seconds + +> **Seconds**: `"seconds"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L10) + +*** + +### Year + +> **Year**: `"year"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DateRangeType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DateRangeType.md new file mode 100644 index 000000000..bb0753a50 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DateRangeType.md @@ -0,0 +1,51 @@ +# Enumeration: DateRangeType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L6) + +## Enumeration Members + +### After + +> **After**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L7) + +*** + +### Before + +> **Before**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L8) + +*** + +### Between + +> **Between**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L9) + +*** + +### Specific + +> **Specific**: `3` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L10) + +*** + +### Weekdays + +> **Weekdays**: `4` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L11) + +*** + +### Weekends + +> **Weekends**: `5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DragDirection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DragDirection.md new file mode 100644 index 000000000..ba79c9dc7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DragDirection.md @@ -0,0 +1,27 @@ +# Enumeration: DragDirection + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L37) + +## Enumeration Members + +### BOTH + +> **BOTH**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L40) + +*** + +### HORIZONTAL + +> **HORIZONTAL**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L39) + +*** + +### VERTICAL + +> **VERTICAL**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L38) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DropPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DropPosition.md new file mode 100644 index 000000000..32acf27b1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/DropPosition.md @@ -0,0 +1,22 @@ +# Enumeration: DropPosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.service.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.service.ts#L9) + +This enumeration is used to configure whether the drop position is set before or after +the target. + +## Enumeration Members + +### AfterDropTarget + +> **AfterDropTarget**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.service.ts#L11) + +*** + +### BeforeDropTarget + +> **BeforeDropTarget**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/moving/moving.service.ts#L10) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ExportHeaderType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ExportHeaderType.md new file mode 100644 index 000000000..790433287 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ExportHeaderType.md @@ -0,0 +1,51 @@ +# Enumeration: ExportHeaderType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L18) + +## Enumeration Members + +### ColumnHeader + +> **ColumnHeader**: `"ColumnHeader"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L20) + +*** + +### MultiColumnHeader + +> **MultiColumnHeader**: `"MultiColumnHeader"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L22) + +*** + +### MultiRowHeader + +> **MultiRowHeader**: `"MultiRowHeader"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L21) + +*** + +### PivotMergedHeader + +> **PivotMergedHeader**: `"PivotMergedHeader"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L24) + +*** + +### PivotRowHeader + +> **PivotRowHeader**: `"PivotRowHeader"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L23) + +*** + +### RowHeader + +> **RowHeader**: `"RowHeader"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ExportRecordType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ExportRecordType.md new file mode 100644 index 000000000..9da1820ca --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ExportRecordType.md @@ -0,0 +1,59 @@ +# Enumeration: ExportRecordType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L8) + +## Enumeration Members + +### DataRecord + +> **DataRecord**: `"DataRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L11) + +*** + +### GroupedRecord + +> **GroupedRecord**: `"GroupedRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L9) + +*** + +### HeaderRecord + +> **HeaderRecord**: `"HeaderRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L13) + +*** + +### HierarchicalGridRecord + +> **HierarchicalGridRecord**: `"HierarchicalGridRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L12) + +*** + +### PivotGridRecord + +> **PivotGridRecord**: `"PivotGridRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L15) + +*** + +### SummaryRecord + +> **SummaryRecord**: `"SummaryRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L14) + +*** + +### TreeGridRecord + +> **TreeGridRecord**: `"TreeGridRecord"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L10) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/FilteringExpressionsTreeType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/FilteringExpressionsTreeType.md new file mode 100644 index 000000000..2d319b537 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/FilteringExpressionsTreeType.md @@ -0,0 +1,19 @@ +# Enumeration: FilteringExpressionsTreeType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L6) + +## Enumeration Members + +### Advanced + +> **Advanced**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L8) + +*** + +### Regular + +> **Regular**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/FilteringLogic.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/FilteringLogic.md new file mode 100644 index 000000000..90be70fc9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/FilteringLogic.md @@ -0,0 +1,19 @@ +# Enumeration: FilteringLogic + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L5) + +## Enumeration Members + +### And + +> **And**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L6) + +*** + +### Or + +> **Or**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/HorizontalAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/HorizontalAlignment.md new file mode 100644 index 000000000..fcb0fd03d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/HorizontalAlignment.md @@ -0,0 +1,27 @@ +# Enumeration: HorizontalAlignment + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L36) + +## Enumeration Members + +### Center + +> **Center**: `-0.5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L38) + +*** + +### Left + +> **Left**: `-1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L37) + +*** + +### Right + +> **Right**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L39) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/IgxInputState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/IgxInputState.md new file mode 100644 index 000000000..434dccd68 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/IgxInputState.md @@ -0,0 +1,27 @@ +# Enumeration: IgxInputState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L21) + +## Enumeration Members + +### INITIAL + +> **INITIAL**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L22) + +*** + +### INVALID + +> **INVALID**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L24) + +*** + +### VALID + +> **VALID**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts#L23) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/IgxListPanState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/IgxListPanState.md new file mode 100644 index 000000000..1ca388443 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/IgxListPanState.md @@ -0,0 +1,27 @@ +# Enumeration: IgxListPanState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L30) + +## Enumeration Members + +### LEFT + +> **LEFT**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L30) + +*** + +### NONE + +> **NONE**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L30) + +*** + +### RIGHT + +> **RIGHT**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.common.ts#L30) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/OffsetMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/OffsetMode.md new file mode 100644 index 000000000..134f5b0bd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/OffsetMode.md @@ -0,0 +1,21 @@ +# Enumeration: OffsetMode + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L81) + +Determines whether to add or set the offset values. + +## Enumeration Members + +### Add + +> **Add**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L82) + +*** + +### Set + +> **Set**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L83) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PagingError.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PagingError.md new file mode 100644 index 000000000..122d407e8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PagingError.md @@ -0,0 +1,27 @@ +# Enumeration: PagingError + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L1) + +## Enumeration Members + +### IncorrectPageIndex + +> **IncorrectPageIndex**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L3) + +*** + +### IncorrectRecordsPerPage + +> **IncorrectRecordsPerPage**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L4) + +*** + +### None + +> **None**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L2) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotDimensionType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotDimensionType.md new file mode 100644 index 000000000..40f12e849 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotDimensionType.md @@ -0,0 +1,29 @@ +# Enumeration: PivotDimensionType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L209) + +The dimension types - Row, Column or Filter. + +## Enumeration Members + +### Column + +> **Column**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L211) + +*** + +### Filter + +> **Filter**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L212) + +*** + +### Row + +> **Row**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L210) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotRowLayoutType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotRowLayoutType.md new file mode 100644 index 000000000..8657a43c3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotRowLayoutType.md @@ -0,0 +1,19 @@ +# Enumeration: PivotRowLayoutType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L216) + +## Enumeration Members + +### Horizontal + +> **Horizontal**: `"horizontal"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L218) + +*** + +### Vertical + +> **Vertical**: `"vertical"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L217) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotSummaryPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotSummaryPosition.md new file mode 100644 index 000000000..9c0a0e440 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/PivotSummaryPosition.md @@ -0,0 +1,19 @@ +# Enumeration: PivotSummaryPosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L221) + +## Enumeration Members + +### Bottom + +> **Bottom**: `"bottom"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L223) + +*** + +### Top + +> **Top**: `"top"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L222) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RelativePosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RelativePosition.md new file mode 100644 index 000000000..662f073bb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RelativePosition.md @@ -0,0 +1,45 @@ +# Enumeration: RelativePosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L61) + +Defines the possible positions for the relative overlay settings presets. + +## Enumeration Members + +### Above + +> **Above**: `"above"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L62) + +*** + +### After + +> **After**: `"after"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L65) + +*** + +### Before + +> **Before**: `"before"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L64) + +*** + +### Below + +> **Below**: `"below"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L63) + +*** + +### Default + +> **Default**: `"default"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L66) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RelativePositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RelativePositionStrategy.md new file mode 100644 index 000000000..f15c7a8a3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RelativePositionStrategy.md @@ -0,0 +1,29 @@ +# Enumeration: RelativePositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L52) + +Defines the possible values of the overlays' position strategy. + +## Enumeration Members + +### Auto + +> **Auto**: `"auto"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L54) + +*** + +### Connected + +> **Connected**: `"connected"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L53) + +*** + +### Elastic + +> **Elastic**: `"elastic"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L55) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RowPinningPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RowPinningPosition.md new file mode 100644 index 000000000..dc07f41f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/RowPinningPosition.md @@ -0,0 +1,23 @@ +# Enumeration: RowPinningPosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L88) + +Enumeration representing the possible positions for pinning rows. +- Top: Rows are pinned to the top of the grid. +- Bottom: Rows are pinned to the bottom of the grid. + +## Enumeration Members + +### Bottom + +> **Bottom**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L90) + +*** + +### Top + +> **Top**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L89) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ScrollDirection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ScrollDirection.md new file mode 100644 index 000000000..cfb38329f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/ScrollDirection.md @@ -0,0 +1,27 @@ +# Enumeration: ScrollDirection + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L12) + +## Enumeration Members + +### NEXT + +> **NEXT**: `"next"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L14) + +*** + +### NONE + +> **NONE**: `"none"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L15) + +*** + +### PREV + +> **PREV**: `"prev"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L13) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/SortingDirection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/SortingDirection.md new file mode 100644 index 000000000..4ca8fe81c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/SortingDirection.md @@ -0,0 +1,27 @@ +# Enumeration: SortingDirection + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L6) + +## Enumeration Members + +### Asc + +> **Asc**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L8) + +*** + +### Desc + +> **Desc**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L9) + +*** + +### None + +> **None**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/SplitterType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/SplitterType.md new file mode 100644 index 000000000..ad91ea2ec --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/SplitterType.md @@ -0,0 +1,21 @@ +# Enumeration: SplitterType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L9) + +An enumeration that defines the `SplitterComponent` panes orientation. + +## Enumeration Members + +### Horizontal + +> **Horizontal**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L10) + +*** + +### Vertical + +> **Vertical**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TRANSACTION_TYPE.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TRANSACTION_TYPE.md new file mode 100644 index 000000000..de06e27d5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TRANSACTION_TYPE.md @@ -0,0 +1,24 @@ +# Enumeration: TRANSACTION\_TYPE + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L14) + +The type of the transaction that should be provided. +When batchEditing is disabled, `None` is provided. +When enabled - `Base` is provided. +An enum instead of a boolean value leaves room for extra scenarios in the future. + +## Enumeration Members + +### Base + +> **Base**: `"Base"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L16) + +*** + +### None + +> **None**: `"None"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TransactionEventOrigin.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TransactionEventOrigin.md new file mode 100644 index 000000000..b467adefc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TransactionEventOrigin.md @@ -0,0 +1,43 @@ +# Enumeration: TransactionEventOrigin + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L10) + +## Enumeration Members + +### ADD + +> **ADD**: `"add"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L14) + +*** + +### CLEAR + +> **CLEAR**: `"clear"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L13) + +*** + +### END + +> **END**: `"endPending"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L15) + +*** + +### REDO + +> **REDO**: `"redo"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L12) + +*** + +### UNDO + +> **UNDO**: `"undo"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TransactionType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TransactionType.md new file mode 100644 index 000000000..55d79e8f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/TransactionType.md @@ -0,0 +1,27 @@ +# Enumeration: TransactionType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L4) + +## Enumeration Members + +### ADD + +> **ADD**: `"add"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L5) + +*** + +### DELETE + +> **DELETE**: `"delete"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L6) + +*** + +### UPDATE + +> **UPDATE**: `"update"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/VerticalAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/VerticalAlignment.md new file mode 100644 index 000000000..a11c10102 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/VerticalAlignment.md @@ -0,0 +1,27 @@ +# Enumeration: VerticalAlignment + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L43) + +## Enumeration Members + +### Bottom + +> **Bottom**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L46) + +*** + +### Middle + +> **Middle**: `-0.5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L45) + +*** + +### Top + +> **Top**: `-1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L44) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/WEEKDAYS.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/WEEKDAYS.md new file mode 100644 index 000000000..f3eca785a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/enumerations/WEEKDAYS.md @@ -0,0 +1,61 @@ +# Enumeration: WEEKDAYS + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L20) + +Enumeration representing the days of the week. + +## Enumeration Members + +### FRIDAY + +> **FRIDAY**: `5` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L26) + +*** + +### MONDAY + +> **MONDAY**: `1` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L22) + +*** + +### SATURDAY + +> **SATURDAY**: `6` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L27) + +*** + +### SUNDAY + +> **SUNDAY**: `0` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L21) + +*** + +### THURSDAY + +> **THURSDAY**: `4` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L25) + +*** + +### TUESDAY + +> **TUESDAY**: `2` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L23) + +*** + +### WEDNESDAY + +> **WEDNESDAY**: `3` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/enums.ts#L24) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/WatchColumnChanges.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/WatchColumnChanges.md new file mode 100644 index 000000000..12a844684 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/WatchColumnChanges.md @@ -0,0 +1,9 @@ +# Function: WatchColumnChanges() + +> **WatchColumnChanges**(): `PropertyDecorator` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/watch-changes.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/watch-changes.ts#L38) + +## Returns + +`PropertyDecorator` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/areSameMonth.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/areSameMonth.md new file mode 100644 index 000000000..e3a3e578f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/areSameMonth.md @@ -0,0 +1,19 @@ +# Function: areSameMonth() + +> **areSameMonth**(`firstMonth`, `secondMonth`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L18) + +## Parameters + +### firstMonth + +[`DayParameter`](../type-aliases/DayParameter.md) + +### secondMonth + +[`DayParameter`](../type-aliases/DayParameter.md) + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/calendarRange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/calendarRange.md new file mode 100644 index 000000000..375d1b740 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/calendarRange.md @@ -0,0 +1,22 @@ +# Function: calendarRange() + +> **calendarRange**(`options`): `Generator`\<[`CalendarDay`](../classes/CalendarDay.md), `void`, `unknown`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L92) + +Returns a generator yielding day values between `start` and `end` (non-inclusive) +by a given `unit` as a step. + +## Parameters + +### options + +[`CalendarRangeParams`](../type-aliases/CalendarRangeParams.md) + +## Returns + +`Generator`\<[`CalendarDay`](../classes/CalendarDay.md), `void`, `unknown`\> + +## Remarks + +By default, `unit` is set to 'day'. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/changei18n.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/changei18n.md new file mode 100644 index 000000000..11453d130 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/changei18n.md @@ -0,0 +1,18 @@ +# Function: changei18n() + +> **changei18n**(`resourceStrings`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/resources.ts#L102) + +Change resource strings for all components globally. The locale is not taken into account and this method should be called when the locale is changed. +Note: Legacy method. We suggest using the new `registerI18n` and `setCurrentI18n` methods exposed. + +## Parameters + +### resourceStrings + +[`IResourceStrings`](../interfaces/IResourceStrings.md) + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/clearAll.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/clearAll.md new file mode 100644 index 000000000..8ce172887 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/clearAll.md @@ -0,0 +1,15 @@ +# Function: clearAll() + +> **clearAll**(`withLogging?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L65) + +## Parameters + +### withLogging? + +`boolean` = `false` + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/clearMeasures.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/clearMeasures.md new file mode 100644 index 000000000..bf7679ddc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/clearMeasures.md @@ -0,0 +1,19 @@ +# Function: clearMeasures() + +> **clearMeasures**(`name?`, `withLogging?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L58) + +## Parameters + +### name? + +`string` + +### withLogging? + +`boolean` = `false` + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/columnFieldPath.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/columnFieldPath.md new file mode 100644 index 000000000..0d55d4f9b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/columnFieldPath.md @@ -0,0 +1,15 @@ +# Function: columnFieldPath() + +> **columnFieldPath**(`path?`): `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:505](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L505) + +## Parameters + +### path? + +`string` + +## Returns + +`string`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/comboIgnoreDiacriticsFilter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/comboIgnoreDiacriticsFilter.md new file mode 100644 index 000000000..229f725bf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/comboIgnoreDiacriticsFilter.md @@ -0,0 +1,38 @@ +# Function: comboIgnoreDiacriticsFilter() + +> **comboIgnoreDiacriticsFilter**\<`T`\>(`collection`, `searchValue`, `filteringOptions`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.pipes.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.pipes.ts#L106) + +Combo filter function which does not distinguish between accented letters and their base letters. +For example, when filtering for "resume", this function will match both "resume" and "résumé". + +## Type Parameters + +### T + +`T` + +## Parameters + +### collection + +`T`[] + +### searchValue + +`string` + +### filteringOptions + +[`IComboFilteringOptions`](../interfaces/IComboFilteringOptions.md) + +## Returns + +`T`[] + +## Example + +```html +<igx-combo [filterFunction]="comboIgnoreDiacriticFilterFunction"></igx-combo> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/copyDescriptors.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/copyDescriptors.md new file mode 100644 index 000000000..b6c7ac2c6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/copyDescriptors.md @@ -0,0 +1,22 @@ +# Function: copyDescriptors() + +> **copyDescriptors**(`obj`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L73) + +Creates an object with prototype from provided source and copies +all properties descriptors from provided source + +## Parameters + +### obj + +`any` + +Source to copy prototype and descriptors from + +## Returns + +`any` + +New object with cloned prototype and property descriptors diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/first.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/first.md new file mode 100644 index 000000000..e39b0fcc6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/first.md @@ -0,0 +1,23 @@ +# Function: first() + +> **first**\<`T`\>(`arr`): `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L586) + +Get the first item in an array + +## Type Parameters + +### T + +`T` + +## Parameters + +### arr + +`T`[] + +## Returns + +`T` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/formatToParts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/formatToParts.md new file mode 100644 index 000000000..bbe2f2a9c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/formatToParts.md @@ -0,0 +1,27 @@ +# Function: formatToParts() + +> **formatToParts**(`date`, `locale`, `options`, `parts`): `Record`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L183) + +## Parameters + +### date + +`Date` + +### locale + +`string` + +### options + +`DateTimeFormatOptions` + +### parts + +`string`[] + +## Returns + +`Record`\<`string`, `any`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/generateExpressionsList.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/generateExpressionsList.md new file mode 100644 index 000000000..efaeaacef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/generateExpressionsList.md @@ -0,0 +1,23 @@ +# Function: generateExpressionsList() + +> **generateExpressionsList**(`expressions`, `operator`, `expressionsUIs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/common.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/filtering/excel-style/common.ts#L45) + +## Parameters + +### expressions + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IFilteringExpressionsTree`](../interfaces/IFilteringExpressionsTree.md) + +### operator + +[`FilteringLogic`](../enumerations/FilteringLogic.md) + +### expressionsUIs + +`ExpressionUI`[] + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/generateMonth.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/generateMonth.md new file mode 100644 index 000000000..d474ec82e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/generateMonth.md @@ -0,0 +1,19 @@ +# Function: generateMonth() + +> **generateMonth**(`value`, `firstWeekDay`): `Generator`\<[`CalendarDay`](../classes/CalendarDay.md), `void`, `unknown`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L123) + +## Parameters + +### value + +[`DayParameter`](../type-aliases/DayParameter.md) + +### firstWeekDay + +`number` + +## Returns + +`Generator`\<[`CalendarDay`](../classes/CalendarDay.md), `void`, `unknown`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getClosestActiveDate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getClosestActiveDate.md new file mode 100644 index 000000000..c5453a4b3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getClosestActiveDate.md @@ -0,0 +1,23 @@ +# Function: getClosestActiveDate() + +> **getClosestActiveDate**(`start`, `delta`, `disabled?`): [`CalendarDay`](../classes/CalendarDay.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L60) + +## Parameters + +### start + +[`CalendarDay`](../classes/CalendarDay.md) + +### delta + +`number` + +### disabled? + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] = `[]` + +## Returns + +[`CalendarDay`](../classes/CalendarDay.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentCssSizeVar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentCssSizeVar.md new file mode 100644 index 000000000..dc5dde156 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentCssSizeVar.md @@ -0,0 +1,17 @@ +# Function: getComponentCssSizeVar() + +> **getComponentCssSizeVar**(`size`): `"var(--ig-size, var(--ig-size-small))"` \| `"var(--ig-size, var(--ig-size-medium))"` \| `"var(--ig-size, var(--ig-size-large))"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:628](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L628) + +## Parameters + +### size + +`string` + +## Returns + +`"var(--ig-size, var(--ig-size-small))"` \| `"var(--ig-size, var(--ig-size-medium))"` \| `"var(--ig-size, var(--ig-size-large))"` + +string that represents the --component-size default value diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentSize.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentSize.md new file mode 100644 index 000000000..dfa4eeb93 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentSize.md @@ -0,0 +1,17 @@ +# Function: getComponentSize() + +> **getComponentSize**(`el`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L581) + +Get the size of the component as derived from the CSS size variable + +## Parameters + +### el + +`Element` + +## Returns + +`string` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentTheme.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentTheme.md new file mode 100644 index 000000000..4953d60d8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getComponentTheme.md @@ -0,0 +1,15 @@ +# Function: getComponentTheme() + +> **getComponentTheme**(`el`): [`IgxTheme`](../type-aliases/IgxTheme.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:647](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L647) + +## Parameters + +### el + +`Element` + +## Returns + +[`IgxTheme`](../type-aliases/IgxTheme.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getCurrentResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getCurrentResourceStrings.md new file mode 100644 index 000000000..2b554fa55 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getCurrentResourceStrings.md @@ -0,0 +1,31 @@ +# Function: getCurrentResourceStrings() + +> **getCurrentResourceStrings**\<`T`\>(`defaultEN`, `init?`, `locale?`): `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/resources.ts#L46) + +Get current resource strings based on default. Result is truncated result, containing only relevant locale strings. + +## Type Parameters + +### T + +`T` + +## Parameters + +### defaultEN + +`T` + +### init? + +`boolean` = `true` + +### locale? + +`string` + +## Returns + +`T` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getHierarchy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getHierarchy.md new file mode 100644 index 000000000..7c2eb75f6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getHierarchy.md @@ -0,0 +1,15 @@ +# Function: getHierarchy() + +> **getHierarchy**(`gRow`): [`IGroupByKey`](../interfaces/IGroupByKey.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/operations.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/operations.ts#L17) + +## Parameters + +### gRow + +[`IGroupByRecord`](../interfaces/IGroupByRecord.md) + +## Returns + +[`IGroupByKey`](../interfaces/IGroupByKey.md)[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getMeasures.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getMeasures.md new file mode 100644 index 000000000..f5db3630c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getMeasures.md @@ -0,0 +1,15 @@ +# Function: getMeasures() + +> **getMeasures**(`name?`): `PerformanceEntryList` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L54) + +## Parameters + +### name? + +`string` + +## Returns + +`PerformanceEntryList` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getNextActiveDate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getNextActiveDate.md new file mode 100644 index 000000000..35644ab9c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getNextActiveDate.md @@ -0,0 +1,21 @@ +# Function: getNextActiveDate() + +> **getNextActiveDate**(`start`, `disabled?`): [`CalendarDay`](../classes/CalendarDay.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L37) + +Returns the next date starting from `start` that does not match the `disabled` descriptors + +## Parameters + +### start + +[`CalendarDay`](../classes/CalendarDay.md) + +### disabled? + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] = `[]` + +## Returns + +[`CalendarDay`](../classes/CalendarDay.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getPreviousActiveDate.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getPreviousActiveDate.md new file mode 100644 index 000000000..1b4e30415 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getPreviousActiveDate.md @@ -0,0 +1,21 @@ +# Function: getPreviousActiveDate() + +> **getPreviousActiveDate**(`start`, `disabled?`): [`CalendarDay`](../classes/CalendarDay.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L49) + +Returns the previous date starting from `start` that does not match the `disabled` descriptors + +## Parameters + +### start + +[`CalendarDay`](../classes/CalendarDay.md) + +### disabled? + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] = `[]` + +## Returns + +[`CalendarDay`](../classes/CalendarDay.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getUUID.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getUUID.md new file mode 100644 index 000000000..46c7a9af0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getUUID.md @@ -0,0 +1,13 @@ +# Function: getUUID() + +> **getUUID**(): `` `${string}-${string}-${string}-${string}-${string}` `` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/random.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/random.ts#L5) + +Use the function to get a random UUID string when secure context is not guaranteed making crypto.randomUUID unavailable. + +## Returns + +`` `${string}-${string}-${string}-${string}-${string}` `` + +A random UUID string. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getYearRange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getYearRange.md new file mode 100644 index 000000000..a37c10ebe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/getYearRange.md @@ -0,0 +1,27 @@ +# Function: getYearRange() + +> **getYearRange**(`current`, `range`): `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L134) + +## Parameters + +### current + +[`DayParameter`](../type-aliases/DayParameter.md) + +### range + +`number` + +## Returns + +`object` + +### end + +> **end**: `number` + +### start + +> **start**: `number` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/intoChunks.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/intoChunks.md new file mode 100644 index 000000000..d4c0af8cd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/intoChunks.md @@ -0,0 +1,40 @@ +# Function: intoChunks() + +> **intoChunks**\<`T`\>(`arr`, `size`): `Generator`\<`T`[], `void`, `unknown`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:615](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L615) + +Splits an array into chunks of length `size` and returns a generator +yielding each chunk. +The last chunk may contain less than `size` elements. + +## Type Parameters + +### T + +`T` + +## Parameters + +### arr + +`T`[] + +### size + +`number` + +## Returns + +`Generator`\<`T`[], `void`, `unknown`\> + +## Example + +```typescript +const arr = [0,1,2,3,4,5,6,7,8,9]; + +Array.from(chunk(arr, 2)) // [[0, 1], [2, 3], [4, 5], [6, 7], [8, 9]] +Array.from(chunk(arr, 3)) // [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]] +Array.from(chunk([], 3)) // [] +Array.from(chunk(arr, -3)) // Error +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isConstructor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isConstructor.md new file mode 100644 index 000000000..847cc1800 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isConstructor.md @@ -0,0 +1,15 @@ +# Function: isConstructor() + +> **isConstructor**(`ref`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L572) + +## Parameters + +### ref + +`any` + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isDateInRanges.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isDateInRanges.md new file mode 100644 index 000000000..e473bff3b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isDateInRanges.md @@ -0,0 +1,19 @@ +# Function: isDateInRanges() + +> **isDateInRanges**(`date`, `ranges`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L140) + +## Parameters + +### date + +[`DayParameter`](../type-aliases/DayParameter.md) + +### ranges + +[`DateRangeDescriptor`](../interfaces/DateRangeDescriptor.md)[] + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isHierarchyMatch.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isHierarchyMatch.md new file mode 100644 index 000000000..7dc61268a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isHierarchyMatch.md @@ -0,0 +1,23 @@ +# Function: isHierarchyMatch() + +> **isHierarchyMatch**(`h1`, `h2`, `expressions`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/operations.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/operations.ts#L6) + +## Parameters + +### h1 + +[`IGroupByKey`](../interfaces/IGroupByKey.md)[] + +### h2 + +[`IGroupByKey`](../interfaces/IGroupByKey.md)[] + +### expressions + +[`IGroupingExpression`](../interfaces/IGroupingExpression.md)[] + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isLeap.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isLeap.md new file mode 100644 index 000000000..a40a96234 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isLeap.md @@ -0,0 +1,19 @@ +# Function: isLeap() + +> **isLeap**(`year`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L54) + +Returns true for leap years, false for non-leap years. + +## Parameters + +### year + +`number` + +## Returns + +`boolean` + +## Export diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isNextMonth.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isNextMonth.md new file mode 100644 index 000000000..3b09c765e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isNextMonth.md @@ -0,0 +1,19 @@ +# Function: isNextMonth() + +> **isNextMonth**(`target`, `origin`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L26) + +## Parameters + +### target + +[`DayParameter`](../type-aliases/DayParameter.md) + +### origin + +[`DayParameter`](../type-aliases/DayParameter.md) + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isPreviousMonth.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isPreviousMonth.md new file mode 100644 index 000000000..826ba2a7a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isPreviousMonth.md @@ -0,0 +1,19 @@ +# Function: isPreviousMonth() + +> **isPreviousMonth**(`target`, `origin`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/helpers.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/helpers.ts#L31) + +## Parameters + +### target + +[`DayParameter`](../type-aliases/DayParameter.md) + +### origin + +[`DayParameter`](../type-aliases/DayParameter.md) + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isTree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isTree.md new file mode 100644 index 000000000..5eba46904 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/isTree.md @@ -0,0 +1,21 @@ +# Function: isTree() + +> **isTree**(`entry`): `entry is IExpressionTree` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L170) + +Checks if the given entry is an IExpressionTree. + +## Parameters + +### entry + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) \| [`IExpressionTree`](../interfaces/IExpressionTree.md) + +The entry to check. + +## Returns + +`entry is IExpressionTree` + +True if the entry is an IExpressionTree, false otherwise. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/last.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/last.md new file mode 100644 index 000000000..196f69060 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/last.md @@ -0,0 +1,23 @@ +# Function: last() + +> **last**\<`T`\>(`arr`): `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:591](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L591) + +Get the last item in an array + +## Type Parameters + +### T + +`T` + +## Parameters + +### arr + +`T`[] + +## Returns + +`T` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/modulo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/modulo.md new file mode 100644 index 000000000..720fb453f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/modulo.md @@ -0,0 +1,21 @@ +# Function: modulo() + +> **modulo**(`n`, `d`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:596](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L596) + +Calculates the modulo of two numbers, ensuring a non-negative result. + +## Parameters + +### n + +`number` + +### d + +`number` + +## Returns + +`number` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/monthRange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/monthRange.md new file mode 100644 index 000000000..67da5dbb6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/monthRange.md @@ -0,0 +1,23 @@ +# Function: monthRange() + +> **monthRange**(`year`, `month`): `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L66) + +Return weekday and number of days for year, month. + +## Parameters + +### year + +`number` + +### month + +`number` + +## Returns + +`number`[] + +## Export diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/normalizeURI.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/normalizeURI.md new file mode 100644 index 000000000..090f1a358 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/normalizeURI.md @@ -0,0 +1,19 @@ +# Function: normalizeURI() + +> **normalizeURI**(`path`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:643](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L643) + +## Parameters + +### path + +`string` + +The URI path to be normalized. + +## Returns + +`string` + +string encoded using the encodeURI function. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/notifyChanges.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/notifyChanges.md new file mode 100644 index 000000000..3fe3233a2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/notifyChanges.md @@ -0,0 +1,15 @@ +# Function: notifyChanges() + +> **notifyChanges**(`repaint?`): (`_`, `key`, `propDesc?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/watch-changes.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/watch-changes.ts#L65) + +## Parameters + +### repaint? + +`boolean` = `false` + +## Returns + +(`_`, `key`, `propDesc?`) => `any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/onResourceChangeHandle.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/onResourceChangeHandle.md new file mode 100644 index 000000000..19ab026d7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/onResourceChangeHandle.md @@ -0,0 +1,29 @@ +# Function: onResourceChangeHandle() + +> **onResourceChangeHandle**(`destroyObj`, `callback`, `context`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/resources.ts#L80) + +Bind to the i18n manager's onResourceChange event + +## Parameters + +### destroyObj + +`any` + +Object responsible for signaling destruction of the handling object + +### callback + +(`event?`) => `void` + +### context + +`any` + +Reference to the object's this context + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/provideIgniteIntl.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/provideIgniteIntl.md new file mode 100644 index 000000000..c09ddd77b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/provideIgniteIntl.md @@ -0,0 +1,11 @@ +# Function: provideIgniteIntl() + +> **provideIgniteIntl**(): `Provider`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts#L9) + +Set up provider for Ignite UI components to use Intl formatting, replacing the default Angular's one. + +## Returns + +`Provider`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/range.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/range.md new file mode 100644 index 000000000..58b8caeeb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/range.md @@ -0,0 +1,23 @@ +# Function: range() + +> **range**(`start?`, `stop`, `step?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L37) + +## Parameters + +### start? + +`number` = `0` + +### stop + +`number` + +### step? + +`number` = `1` + +## Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateExpression.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateExpression.md new file mode 100644 index 000000000..45a057e67 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateExpression.md @@ -0,0 +1,28 @@ +# Function: recreateExpression() + +> **recreateExpression**(`expression`, `fields`): [`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L141) + +Recreates an expression from the given fields by applying the correct operands +and adjusting the search value to be the correct type. + +## Parameters + +### expression + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +The expression to recreate. + +### fields + +[`FieldType`](../interfaces/FieldType.md)[] + +An array of fields to use for recreating the expression. + +## Returns + +[`IFilteringExpression`](../interfaces/IFilteringExpression.md) + +The recreated expression. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateTree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateTree.md new file mode 100644 index 000000000..a80aaa048 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateTree.md @@ -0,0 +1,32 @@ +# Function: recreateTree() + +> **recreateTree**(`tree`, `entities`, `isRoot?`): [`IExpressionTree`](../interfaces/IExpressionTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L181) + +Recreates the tree from a given array of entities by applying the correct operands +for each expression and adjusting the search values to be the correct type. + +## Parameters + +### tree + +[`IExpressionTree`](../interfaces/IExpressionTree.md) + +The expression tree to recreate. + +### entities + +[`EntityType`](../interfaces/EntityType.md)[] + +An array of entities to use for recreating the tree. + +### isRoot? + +`boolean` = `false` + +## Returns + +[`IExpressionTree`](../interfaces/IExpressionTree.md) + +The recreated expression tree. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateTreeFromFields.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateTreeFromFields.md new file mode 100644 index 000000000..105b90ef6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/recreateTreeFromFields.md @@ -0,0 +1,27 @@ +# Function: recreateTreeFromFields() + +> **recreateTreeFromFields**(`tree`, `fields`): [`IExpressionTree`](../interfaces/IExpressionTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts#L207) + +Recreates the tree from a given array of fields by applying the correct operands. +It is recommended to use `recreateTree` if there will be multiple entities in the tree +with potentially colliding field names. + +## Parameters + +### tree + +[`IExpressionTree`](../interfaces/IExpressionTree.md) + +The expression tree to recreate. + +### fields + +[`FieldType`](../interfaces/FieldType.md)[] + +An array of fields to use for recreating the tree. + +## Returns + +[`IExpressionTree`](../interfaces/IExpressionTree.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/registerI18n.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/registerI18n.md new file mode 100644 index 000000000..84b918389 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/registerI18n.md @@ -0,0 +1,23 @@ +# Function: registerI18n() + +> **registerI18n**(`resourceStrings`, `locale`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/resources.ts#L111) + +Set the current locale of all Ignite UI components. + +## Parameters + +### resourceStrings + +[`IResourceStrings`](../interfaces/IResourceStrings.md) + +### locale + +`string` + +The name of the locale. A string based on the BCP 47 language tag, that Intl supports. + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/rem.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/rem.md new file mode 100644 index 000000000..6e16e9eea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/rem.md @@ -0,0 +1,17 @@ +# Function: rem() + +> **rem**(`value`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:575](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L575) + +Converts pixel values to their rem counterparts for a base value + +## Parameters + +### value + +`string` \| `number` + +## Returns + +`number` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/startMeasure.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/startMeasure.md new file mode 100644 index 000000000..a75eb29f1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/startMeasure.md @@ -0,0 +1,19 @@ +# Function: startMeasure() + +> **startMeasure**(`name`, `withLogging?`): () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/performance.service.ts#L36) + +## Parameters + +### name + +`string` + +### withLogging? + +`boolean` = `false` + +## Returns + +() => `void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/toCalendarDay.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/toCalendarDay.md new file mode 100644 index 000000000..da1e9a9e3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/toCalendarDay.md @@ -0,0 +1,15 @@ +# Function: toCalendarDay() + +> **toCalendarDay**(`date`): [`CalendarDay`](../classes/CalendarDay.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L24) + +## Parameters + +### date + +[`DayParameter`](../type-aliases/DayParameter.md) + +## Returns + +[`CalendarDay`](../classes/CalendarDay.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/weekDay.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/weekDay.md new file mode 100644 index 000000000..0cb56f023 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/functions/weekDay.md @@ -0,0 +1,23 @@ +# Function: weekDay() + +> **weekDay**(`year`, `month`, `day`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L56) + +## Parameters + +### year + +`number` + +### month + +`number` + +### day + +`number` + +## Returns + +`number` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/index.json b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/index.json new file mode 100644 index 000000000..91883c791 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/index.json @@ -0,0 +1,8233 @@ +{ + "AbsoluteScrollStrategy": { + "title": "Class: AbsoluteScrollStrategy", + "component": "AbsoluteScrollStrategy", + "file": "classes/AbsoluteScrollStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/absolute-scroll-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "AutoPositionStrategy": { + "title": "Class: AutoPositionStrategy", + "component": "AutoPositionStrategy", + "file": "classes/AutoPositionStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "BaseFilteringStrategy": { + "title": "Abstract Class: BaseFilteringStrategy", + "component": "Abstract Class: BaseFilteringStrategy", + "file": "classes/BaseFilteringStrategy.md", + "type": "unknown", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "BaseFitPositionStrategy": { + "title": "Abstract Class: BaseFitPositionStrategy", + "component": "Abstract Class: BaseFitPositionStrategy", + "file": "classes/BaseFitPositionStrategy.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/base-fit-position-strategy.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b" + }, + "BaseFormatter": { + "title": "Class: BaseFormatter", + "component": "BaseFormatter", + "file": "classes/BaseFormatter.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "BlockScrollStrategy": { + "title": "Class: BlockScrollStrategy", + "component": "BlockScrollStrategy", + "file": "classes/BlockScrollStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/block-scroll-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "ByLevelTreeGridMergeStrategy": { + "title": "Class: ByLevelTreeGridMergeStrategy", + "component": "ByLevelTreeGridMergeStrategy", + "file": "classes/ByLevelTreeGridMergeStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "CachedDataCloneStrategy": { + "title": "Class: CachedDataCloneStrategy", + "component": "CachedDataCloneStrategy", + "file": "classes/CachedDataCloneStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "Calendar": { + "title": "Class: Calendar", + "component": "Calendar", + "file": "classes/Calendar.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "CalendarDay": { + "title": "Class: CalendarDay", + "component": "CalendarDay", + "file": "classes/CalendarDay.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "CarouselHammerConfig": { + "title": "Class: CarouselHammerConfig", + "component": "CarouselHammerConfig", + "file": "classes/CarouselHammerConfig.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "CheckboxBaseDirective": { + "title": "Class: CheckboxBaseDirective", + "component": "CheckboxBaseDirective", + "file": "classes/CheckboxBaseDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "CloseScrollStrategy": { + "title": "Class: CloseScrollStrategy", + "component": "CloseScrollStrategy", + "file": "classes/CloseScrollStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/close-scroll-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "ConnectedPositioningStrategy": { + "title": "Class: ConnectedPositioningStrategy", + "component": "ConnectedPositioningStrategy", + "file": "classes/ConnectedPositioningStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/connected-positioning-strategy.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "ContainerPositionStrategy": { + "title": "Class: ContainerPositionStrategy", + "component": "ContainerPositionStrategy", + "file": "classes/ContainerPositionStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/container-position-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841" + }, + "DefaultDataCloneStrategy": { + "title": "Class: DefaultDataCloneStrategy", + "component": "DefaultDataCloneStrategy", + "file": "classes/DefaultDataCloneStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "DefaultMergeStrategy": { + "title": "Class: DefaultMergeStrategy", + "component": "DefaultMergeStrategy", + "file": "classes/DefaultMergeStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "DefaultPivotGridRecordSortingStrategy": { + "title": "Class: DefaultPivotGridRecordSortingStrategy", + "component": "DefaultPivotGridRecordSortingStrategy", + "file": "classes/DefaultPivotGridRecordSortingStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "DefaultPivotSortingStrategy": { + "title": "Class: DefaultPivotSortingStrategy", + "component": "DefaultPivotSortingStrategy", + "file": "classes/DefaultPivotSortingStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-sort-strategy.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "DefaultSortingStrategy": { + "title": "Class: DefaultSortingStrategy", + "component": "DefaultSortingStrategy", + "file": "classes/DefaultSortingStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "DefaultTreeGridMergeStrategy": { + "title": "Class: DefaultTreeGridMergeStrategy", + "component": "DefaultTreeGridMergeStrategy", + "file": "classes/DefaultTreeGridMergeStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "DimensionValuesFilteringStrategy": { + "title": "Class: DimensionValuesFilteringStrategy", + "component": "DimensionValuesFilteringStrategy", + "file": "classes/DimensionValuesFilteringStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "ElasticPositionStrategy": { + "title": "Class: ElasticPositionStrategy", + "component": "ElasticPositionStrategy", + "file": "classes/ElasticPositionStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/elastic-position-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "ExpressionsTreeUtil": { + "title": "Class: ExpressionsTreeUtil", + "component": "ExpressionsTreeUtil", + "file": "classes/ExpressionsTreeUtil.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/expressions-tree-util.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "FilteringExpressionsTree": { + "title": "Class: FilteringExpressionsTree", + "component": "FilteringExpressionsTree", + "file": "classes/FilteringExpressionsTree.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "FilteringStrategy": { + "title": "Class: FilteringStrategy", + "component": "FilteringStrategy", + "file": "classes/FilteringStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:248](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "FilterUtil": { + "title": "Class: FilterUtil", + "component": "FilterUtil", + "file": "classes/FilterUtil.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "FormattedValuesFilteringStrategy": { + "title": "Class: FormattedValuesFilteringStrategy", + "component": "FormattedValuesFilteringStrategy", + "file": "classes/FormattedValuesFilteringStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "FormattedValuesSortingStrategy": { + "title": "Class: FormattedValuesSortingStrategy", + "component": "FormattedValuesSortingStrategy", + "file": "classes/FormattedValuesSortingStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "GlobalPositionStrategy": { + "title": "Class: GlobalPositionStrategy", + "component": "GlobalPositionStrategy", + "file": "classes/GlobalPositionStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/global-position-strategy.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "GroupMemberCountSortingStrategy": { + "title": "Class: GroupMemberCountSortingStrategy", + "component": "GroupMemberCountSortingStrategy", + "file": "classes/GroupMemberCountSortingStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgcFormControlDirective": { + "title": "Class: IgcFormControlDirective", + "component": "IgcFormControlDirective", + "file": "classes/IgcFormControlDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841" + }, + "IgSizeDirective": { + "title": "Class: IgSizeDirective", + "component": "IgSizeDirective", + "file": "classes/IgSizeDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/size/ig-size.directive.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxAccordionComponent": { + "title": "Class: IgxAccordionComponent", + "component": "IgxAccordionComponent", + "file": "classes/IgxAccordionComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxActionStripComponent": { + "title": "Class: IgxActionStripComponent", + "component": "IgxActionStripComponent", + "file": "classes/IgxActionStripComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxActionStripMenuItemDirective": { + "title": "Class: IgxActionStripMenuItemDirective", + "component": "IgxActionStripMenuItemDirective", + "file": "classes/IgxActionStripMenuItemDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxAddRow": { + "title": "Class: IgxAddRow", + "component": "IgxAddRow", + "file": "classes/IgxAddRow.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxAdvancedFilteringDialogComponent": { + "title": "Class: IgxAdvancedFilteringDialogComponent", + "component": "IgxAdvancedFilteringDialogComponent", + "file": "classes/IgxAdvancedFilteringDialogComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob" + }, + "IgxAngularAnimationPlayer": { + "title": "Class: IgxAngularAnimationPlayer", + "component": "IgxAngularAnimationPlayer", + "file": "classes/IgxAngularAnimationPlayer.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IgxAngularAnimationService": { + "title": "Class: IgxAngularAnimationService", + "component": "IgxAngularAnimationService", + "file": "classes/IgxAngularAnimationService.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxAppendDropStrategy": { + "title": "Class: IgxAppendDropStrategy", + "component": "IgxAppendDropStrategy", + "file": "classes/IgxAppendDropStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxAutocompleteDirective": { + "title": "Class: IgxAutocompleteDirective", + "component": "IgxAutocompleteDirective", + "file": "classes/IgxAutocompleteDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IgxAvatarComponent": { + "title": "Class: IgxAvatarComponent", + "component": "IgxAvatarComponent", + "file": "classes/IgxAvatarComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxBadgeComponent": { + "title": "Class: IgxBadgeComponent", + "component": "IgxBadgeComponent", + "file": "classes/IgxBadgeComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxBannerActionsDirective": { + "title": "Class: IgxBannerActionsDirective", + "component": "IgxBannerActionsDirective", + "file": "classes/IgxBannerActionsDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.directives.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxBannerComponent": { + "title": "Class: IgxBannerComponent", + "component": "IgxBannerComponent", + "file": "classes/IgxBannerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxBaseExporter": { + "title": "Abstract Class: IgxBaseExporter", + "component": "Abstract Class: IgxBaseExporter", + "file": "classes/IgxBaseExporter.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b" + }, + "IgxBaseTransactionService": { + "title": "Class: IgxBaseTransactionService\\<T, S\\>", + "component": "IgxBaseTransactionService\\<T, S\\>", + "file": "classes/IgxBaseTransactionService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/base-transaction.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxBooleanFilteringOperand": { + "title": "Class: IgxBooleanFilteringOperand", + "component": "IgxBooleanFilteringOperand", + "file": "classes/IgxBooleanFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxBottomNavComponent": { + "title": "Class: IgxBottomNavComponent", + "component": "IgxBottomNavComponent", + "file": "classes/IgxBottomNavComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxBottomNavContentComponent": { + "title": "Class: IgxBottomNavContentComponent", + "component": "IgxBottomNavContentComponent", + "file": "classes/IgxBottomNavContentComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxBottomNavHeaderComponent": { + "title": "Class: IgxBottomNavHeaderComponent", + "component": "IgxBottomNavHeaderComponent", + "file": "classes/IgxBottomNavHeaderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IgxBottomNavHeaderIconDirective": { + "title": "Class: IgxBottomNavHeaderIconDirective", + "component": "IgxBottomNavHeaderIconDirective", + "file": "classes/IgxBottomNavHeaderIconDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxBottomNavHeaderLabelDirective": { + "title": "Class: IgxBottomNavHeaderLabelDirective", + "component": "IgxBottomNavHeaderLabelDirective", + "file": "classes/IgxBottomNavHeaderLabelDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxBottomNavItemComponent": { + "title": "Class: IgxBottomNavItemComponent", + "component": "IgxBottomNavItemComponent", + "file": "classes/IgxBottomNavItemComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IgxButtonDirective": { + "title": "Class: IgxButtonDirective", + "component": "IgxButtonDirective", + "file": "classes/IgxButtonDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxButtonGroupComponent": { + "title": "Class: IgxButtonGroupComponent", + "component": "IgxButtonGroupComponent", + "file": "classes/IgxButtonGroupComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxCalendarComponent": { + "title": "Class: IgxCalendarComponent", + "component": "IgxCalendarComponent", + "file": "classes/IgxCalendarComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxCalendarMonthDirective": { + "title": "Class: IgxCalendarMonthDirective", + "component": "IgxCalendarMonthDirective", + "file": "classes/IgxCalendarMonthDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "IgxCalendarViewBaseDirective": { + "title": "Abstract Class: IgxCalendarViewBaseDirective", + "component": "Abstract Class: IgxCalendarViewBaseDirective", + "file": "classes/IgxCalendarViewBaseDirective.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "IgxCardActionsComponent": { + "title": "Class: IgxCardActionsComponent", + "component": "IgxCardActionsComponent", + "file": "classes/IgxCardActionsComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:274](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxCardComponent": { + "title": "Class: IgxCardComponent", + "component": "IgxCardComponent", + "file": "classes/IgxCardComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxCardContentDirective": { + "title": "Class: IgxCardContentDirective", + "component": "IgxCardContentDirective", + "file": "classes/IgxCardContentDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxCardFooterDirective": { + "title": "Class: IgxCardFooterDirective", + "component": "IgxCardFooterDirective", + "file": "classes/IgxCardFooterDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxCardHeaderComponent": { + "title": "Class: IgxCardHeaderComponent", + "component": "IgxCardHeaderComponent", + "file": "classes/IgxCardHeaderComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxCardHeaderSubtitleDirective": { + "title": "Class: IgxCardHeaderSubtitleDirective", + "component": "IgxCardHeaderSubtitleDirective", + "file": "classes/IgxCardHeaderSubtitleDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxCardHeaderTitleDirective": { + "title": "Class: IgxCardHeaderTitleDirective", + "component": "IgxCardHeaderTitleDirective", + "file": "classes/IgxCardHeaderTitleDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxCardMediaDirective": { + "title": "Class: IgxCardMediaDirective", + "component": "IgxCardMediaDirective", + "file": "classes/IgxCardMediaDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxCardThumbnailDirective": { + "title": "Class: IgxCardThumbnailDirective", + "component": "IgxCardThumbnailDirective", + "file": "classes/IgxCardThumbnailDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxCarouselComponent": { + "title": "Class: IgxCarouselComponent", + "component": "IgxCarouselComponent", + "file": "classes/IgxCarouselComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxCarouselIndicatorDirective": { + "title": "Class: IgxCarouselIndicatorDirective", + "component": "IgxCarouselIndicatorDirective", + "file": "classes/IgxCarouselIndicatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxCarouselNextButtonDirective": { + "title": "Class: IgxCarouselNextButtonDirective", + "component": "IgxCarouselNextButtonDirective", + "file": "classes/IgxCarouselNextButtonDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "IgxCarouselPrevButtonDirective": { + "title": "Class: IgxCarouselPrevButtonDirective", + "component": "IgxCarouselPrevButtonDirective", + "file": "classes/IgxCarouselPrevButtonDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.directives.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "IgxCell": { + "title": "Class: IgxCell", + "component": "IgxCell", + "file": "classes/IgxCell.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxCellCrudState": { + "title": "Class: IgxCellCrudState", + "component": "IgxCellCrudState", + "file": "classes/IgxCellCrudState.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxCellEditorTemplateDirective": { + "title": "Class: IgxCellEditorTemplateDirective", + "component": "IgxCellEditorTemplateDirective", + "file": "classes/IgxCellEditorTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxCellHeaderTemplateDirective": { + "title": "Class: IgxCellHeaderTemplateDirective", + "component": "IgxCellHeaderTemplateDirective", + "file": "classes/IgxCellHeaderTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxCellTemplateDirective": { + "title": "Class: IgxCellTemplateDirective", + "component": "IgxCellTemplateDirective", + "file": "classes/IgxCellTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxCellValidationErrorDirective": { + "title": "Class: IgxCellValidationErrorDirective", + "component": "IgxCellValidationErrorDirective", + "file": "classes/IgxCellValidationErrorDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxCheckboxComponent": { + "title": "Class: IgxCheckboxComponent", + "component": "IgxCheckboxComponent", + "file": "classes/IgxCheckboxComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxChipComponent": { + "title": "Class: IgxChipComponent", + "component": "IgxChipComponent", + "file": "classes/IgxChipComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxChipsAreaComponent": { + "title": "Class: IgxChipsAreaComponent", + "component": "IgxChipsAreaComponent", + "file": "classes/IgxChipsAreaComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxCircularProgressBarComponent": { + "title": "Class: IgxCircularProgressBarComponent", + "component": "IgxCircularProgressBarComponent", + "file": "classes/IgxCircularProgressBarComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxCollapsibleIndicatorTemplateDirective": { + "title": "Class: IgxCollapsibleIndicatorTemplateDirective", + "component": "IgxCollapsibleIndicatorTemplateDirective", + "file": "classes/IgxCollapsibleIndicatorTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxColumnActionsBaseDirective": { + "title": "Abstract Class: IgxColumnActionsBaseDirective", + "component": "Abstract Class: IgxColumnActionsBaseDirective", + "file": "classes/IgxColumnActionsBaseDirective.md", + "type": "unknown", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions-base.directive.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IgxColumnActionsComponent": { + "title": "Class: IgxColumnActionsComponent", + "component": "IgxColumnActionsComponent", + "file": "classes/IgxColumnActionsComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxColumnComponent": { + "title": "Class: IgxColumnComponent", + "component": "IgxColumnComponent", + "file": "classes/IgxColumnComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "IgxColumnEmailValidatorDirective": { + "title": "Class: IgxColumnEmailValidatorDirective", + "component": "IgxColumnEmailValidatorDirective", + "file": "classes/IgxColumnEmailValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnFormatterPipe": { + "title": "Class: IgxColumnFormatterPipe", + "component": "IgxColumnFormatterPipe", + "file": "classes/IgxColumnFormatterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxColumnGroupComponent": { + "title": "Class: IgxColumnGroupComponent", + "component": "IgxColumnGroupComponent", + "file": "classes/IgxColumnGroupComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxColumnHidingDirective": { + "title": "Class: IgxColumnHidingDirective", + "component": "IgxColumnHidingDirective", + "file": "classes/IgxColumnHidingDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-hiding.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IgxColumnLayoutComponent": { + "title": "Class: IgxColumnLayoutComponent", + "component": "IgxColumnLayoutComponent", + "file": "classes/IgxColumnLayoutComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxColumnMaxLengthValidatorDirective": { + "title": "Class: IgxColumnMaxLengthValidatorDirective", + "component": "IgxColumnMaxLengthValidatorDirective", + "file": "classes/IgxColumnMaxLengthValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnMaxValidatorDirective": { + "title": "Class: IgxColumnMaxValidatorDirective", + "component": "IgxColumnMaxValidatorDirective", + "file": "classes/IgxColumnMaxValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnMinLengthValidatorDirective": { + "title": "Class: IgxColumnMinLengthValidatorDirective", + "component": "IgxColumnMinLengthValidatorDirective", + "file": "classes/IgxColumnMinLengthValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnMinValidatorDirective": { + "title": "Class: IgxColumnMinValidatorDirective", + "component": "IgxColumnMinValidatorDirective", + "file": "classes/IgxColumnMinValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnMovingDropDirective": { + "title": "Class: IgxColumnMovingDropDirective", + "component": "IgxColumnMovingDropDirective", + "file": "classes/IgxColumnMovingDropDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnPatternValidatorDirective": { + "title": "Class: IgxColumnPatternValidatorDirective", + "component": "IgxColumnPatternValidatorDirective", + "file": "classes/IgxColumnPatternValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxColumnPinningDirective": { + "title": "Class: IgxColumnPinningDirective", + "component": "IgxColumnPinningDirective", + "file": "classes/IgxColumnPinningDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/column-actions/column-pinning.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxColumnRequiredValidatorDirective": { + "title": "Class: IgxColumnRequiredValidatorDirective", + "component": "IgxColumnRequiredValidatorDirective", + "file": "classes/IgxColumnRequiredValidatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/validators.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxComboAddItemDirective": { + "title": "Class: IgxComboAddItemDirective", + "component": "IgxComboAddItemDirective", + "file": "classes/IgxComboAddItemDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxComboBaseDirective": { + "title": "Abstract Class: IgxComboBaseDirective", + "component": "Abstract Class: IgxComboBaseDirective", + "file": "classes/IgxComboBaseDirective.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxComboClearIconDirective": { + "title": "Class: IgxComboClearIconDirective", + "component": "IgxComboClearIconDirective", + "file": "classes/IgxComboClearIconDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:180](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxComboComponent": { + "title": "Class: IgxComboComponent", + "component": "IgxComboComponent", + "file": "classes/IgxComboComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proje" + }, + "IgxComboEmptyDirective": { + "title": "Class: IgxComboEmptyDirective", + "component": "IgxComboEmptyDirective", + "file": "classes/IgxComboEmptyDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proje" + }, + "IgxComboFooterDirective": { + "title": "Class: IgxComboFooterDirective", + "component": "IgxComboFooterDirective", + "file": "classes/IgxComboFooterDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proje" + }, + "IgxComboHeaderDirective": { + "title": "Class: IgxComboHeaderDirective", + "component": "IgxComboHeaderDirective", + "file": "classes/IgxComboHeaderDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proje" + }, + "IgxComboHeaderItemDirective": { + "title": "Class: IgxComboHeaderItemDirective", + "component": "IgxComboHeaderItemDirective", + "file": "classes/IgxComboHeaderItemDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxComboItemDirective": { + "title": "Class: IgxComboItemDirective", + "component": "IgxComboItemDirective", + "file": "classes/IgxComboItemDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proje" + }, + "IgxComboToggleIconDirective": { + "title": "Class: IgxComboToggleIconDirective", + "component": "IgxComboToggleIconDirective", + "file": "classes/IgxComboToggleIconDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.directives.ts:159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxCsvExporterOptions": { + "title": "Class: IgxCsvExporterOptions", + "component": "IgxCsvExporterOptions", + "file": "classes/IgxCsvExporterOptions.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxCsvExporterService": { + "title": "Class: IgxCsvExporterService", + "component": "IgxCsvExporterService", + "file": "classes/IgxCsvExporterService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxCSVTextDirective": { + "title": "Class: IgxCSVTextDirective", + "component": "IgxCSVTextDirective", + "file": "classes/IgxCSVTextDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxCurrencyFormatterPipe": { + "title": "Class: IgxCurrencyFormatterPipe", + "component": "IgxCurrencyFormatterPipe", + "file": "classes/IgxCurrencyFormatterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxDataLoadingTemplateDirective": { + "title": "Class: IgxDataLoadingTemplateDirective", + "component": "IgxDataLoadingTemplateDirective", + "file": "classes/IgxDataLoadingTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "IgxDataRecordSorting": { + "title": "Class: IgxDataRecordSorting", + "component": "IgxDataRecordSorting", + "file": "classes/IgxDataRecordSorting.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:378](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxDateFilteringOperand": { + "title": "Class: IgxDateFilteringOperand", + "component": "IgxDateFilteringOperand", + "file": "classes/IgxDateFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxDateFormatterPipe": { + "title": "Class: IgxDateFormatterPipe", + "component": "IgxDateFormatterPipe", + "file": "classes/IgxDateFormatterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxDatePickerComponent": { + "title": "Class: IgxDatePickerComponent", + "component": "IgxDatePickerComponent", + "file": "classes/IgxDatePickerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxDateRangeEndComponent": { + "title": "Class: IgxDateRangeEndComponent", + "component": "IgxDateRangeEndComponent", + "file": "classes/IgxDateRangeEndComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8" + }, + "IgxDateRangePickerComponent": { + "title": "Class: IgxDateRangePickerComponent", + "component": "IgxDateRangePickerComponent", + "file": "classes/IgxDateRangePickerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd84" + }, + "IgxDateRangeSeparatorDirective": { + "title": "Class: IgxDateRangeSeparatorDirective", + "component": "IgxDateRangeSeparatorDirective", + "file": "classes/IgxDateRangeSeparatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8" + }, + "IgxDateRangeStartComponent": { + "title": "Class: IgxDateRangeStartComponent", + "component": "IgxDateRangeStartComponent", + "file": "classes/IgxDateRangeStartComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8" + }, + "IgxDateSummaryOperand": { + "title": "Class: IgxDateSummaryOperand", + "component": "IgxDateSummaryOperand", + "file": "classes/IgxDateSummaryOperand.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxDateTimeEditorDirective": { + "title": "Class: IgxDateTimeEditorDirective", + "component": "IgxDateTimeEditorDirective", + "file": "classes/IgxDateTimeEditorDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da" + }, + "IgxDateTimeFilteringOperand": { + "title": "Class: IgxDateTimeFilteringOperand", + "component": "IgxDateTimeFilteringOperand", + "file": "classes/IgxDateTimeFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:429](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxDaysViewComponent": { + "title": "Class: IgxDaysViewComponent", + "component": "IgxDaysViewComponent", + "file": "classes/IgxDaysViewComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IgxDefaultDropStrategy": { + "title": "Class: IgxDefaultDropStrategy", + "component": "IgxDefaultDropStrategy", + "file": "classes/IgxDefaultDropStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxDialogComponent": { + "title": "Class: IgxDialogComponent", + "component": "IgxDialogComponent", + "file": "classes/IgxDialogComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxDividerDirective": { + "title": "Class: IgxDividerDirective", + "component": "IgxDividerDirective", + "file": "classes/IgxDividerDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IgxDragDirective": { + "title": "Class: IgxDragDirective", + "component": "IgxDragDirective", + "file": "classes/IgxDragDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxDragHandleDirective": { + "title": "Class: IgxDragHandleDirective", + "component": "IgxDragHandleDirective", + "file": "classes/IgxDragHandleDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxDragIgnoreDirective": { + "title": "Class: IgxDragIgnoreDirective", + "component": "IgxDragIgnoreDirective", + "file": "classes/IgxDragIgnoreDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxDragLocation": { + "title": "Class: IgxDragLocation", + "component": "IgxDragLocation", + "file": "classes/IgxDragLocation.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxDropDirective": { + "title": "Class: IgxDropDirective", + "component": "IgxDropDirective", + "file": "classes/IgxDropDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1613](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "IgxDropDownBaseDirective": { + "title": "Abstract Class: IgxDropDownBaseDirective", + "component": "Abstract Class: IgxDropDownBaseDirective", + "file": "classes/IgxDropDownBaseDirective.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxDropDownComponent": { + "title": "Class: IgxDropDownComponent", + "component": "IgxDropDownComponent", + "file": "classes/IgxDropDownComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxDropDownGroupComponent": { + "title": "Class: IgxDropDownGroupComponent", + "component": "IgxDropDownGroupComponent", + "file": "classes/IgxDropDownGroupComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-group.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxDropDownItemBaseDirective": { + "title": "Class: IgxDropDownItemBaseDirective", + "component": "IgxDropDownItemBaseDirective", + "file": "classes/IgxDropDownItemBaseDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.base.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxDropDownItemComponent": { + "title": "Class: IgxDropDownItemComponent", + "component": "IgxDropDownItemComponent", + "file": "classes/IgxDropDownItemComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-item.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781" + }, + "IgxDropDownItemNavigationDirective": { + "title": "Class: IgxDropDownItemNavigationDirective", + "component": "IgxDropDownItemNavigationDirective", + "file": "classes/IgxDropDownItemNavigationDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxEditRow": { + "title": "Class: IgxEditRow", + "component": "IgxEditRow", + "file": "classes/IgxEditRow.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxEmptyListTemplateDirective": { + "title": "Class: IgxEmptyListTemplateDirective", + "component": "IgxEmptyListTemplateDirective", + "file": "classes/IgxEmptyListTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "IgxExcelExporterOptions": { + "title": "Class: IgxExcelExporterOptions", + "component": "IgxExcelExporterOptions", + "file": "classes/IgxExcelExporterOptions.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-options.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IgxExcelExporterService": { + "title": "Class: IgxExcelExporterService", + "component": "IgxExcelExporterService", + "file": "classes/IgxExcelExporterService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxExcelStyleClearFiltersComponent": { + "title": "Class: IgxExcelStyleClearFiltersComponent", + "component": "IgxExcelStyleClearFiltersComponent", + "file": "classes/IgxExcelStyleClearFiltersComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-clear-filters.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea80" + }, + "IgxExcelStyleColumnOperationsTemplateDirective": { + "title": "Class: IgxExcelStyleColumnOperationsTemplateDirective", + "component": "IgxExcelStyleColumnOperationsTemplateDirective", + "file": "classes/IgxExcelStyleColumnOperationsTemplateDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxExcelStyleConditionalFilterComponent": { + "title": "Class: IgxExcelStyleConditionalFilterComponent", + "component": "IgxExcelStyleConditionalFilterComponent", + "file": "classes/IgxExcelStyleConditionalFilterComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/2" + }, + "IgxExcelStyleFilterOperationsTemplateDirective": { + "title": "Class: IgxExcelStyleFilterOperationsTemplateDirective", + "component": "IgxExcelStyleFilterOperationsTemplateDirective", + "file": "classes/IgxExcelStyleFilterOperationsTemplateDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxExcelStyleHeaderComponent": { + "title": "Class: IgxExcelStyleHeaderComponent", + "component": "IgxExcelStyleHeaderComponent", + "file": "classes/IgxExcelStyleHeaderComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-header.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxExcelStyleHidingComponent": { + "title": "Class: IgxExcelStyleHidingComponent", + "component": "IgxExcelStyleHidingComponent", + "file": "classes/IgxExcelStyleHidingComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-hiding.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxExcelStyleLoadingValuesTemplateDirective": { + "title": "Class: IgxExcelStyleLoadingValuesTemplateDirective", + "component": "IgxExcelStyleLoadingValuesTemplateDirective", + "file": "classes/IgxExcelStyleLoadingValuesTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxExcelStyleMovingComponent": { + "title": "Class: IgxExcelStyleMovingComponent", + "component": "IgxExcelStyleMovingComponent", + "file": "classes/IgxExcelStyleMovingComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-moving.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxExcelStylePinningComponent": { + "title": "Class: IgxExcelStylePinningComponent", + "component": "IgxExcelStylePinningComponent", + "file": "classes/IgxExcelStylePinningComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-pinning.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8" + }, + "IgxExcelStyleSearchComponent": { + "title": "Class: IgxExcelStyleSearchComponent", + "component": "IgxExcelStyleSearchComponent", + "file": "classes/IgxExcelStyleSearchComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxExcelStyleSelectingComponent": { + "title": "Class: IgxExcelStyleSelectingComponent", + "component": "IgxExcelStyleSelectingComponent", + "file": "classes/IgxExcelStyleSelectingComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-selecting.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxExcelStyleSortingComponent": { + "title": "Class: IgxExcelStyleSortingComponent", + "component": "IgxExcelStyleSortingComponent", + "file": "classes/IgxExcelStyleSortingComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-sorting.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8" + }, + "IgxExcelTextDirective": { + "title": "Class: IgxExcelTextDirective", + "component": "IgxExcelTextDirective", + "file": "classes/IgxExcelTextDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxExpansionPanelBodyComponent": { + "title": "Class: IgxExpansionPanelBodyComponent", + "component": "IgxExpansionPanelBodyComponent", + "file": "classes/IgxExpansionPanelBodyComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-body.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxExpansionPanelComponent": { + "title": "Class: IgxExpansionPanelComponent", + "component": "IgxExpansionPanelComponent", + "file": "classes/IgxExpansionPanelComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841" + }, + "IgxExpansionPanelHeaderComponent": { + "title": "Class: IgxExpansionPanelHeaderComponent", + "component": "IgxExpansionPanelHeaderComponent", + "file": "classes/IgxExpansionPanelHeaderComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel-header.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxExporterOptionsBase": { + "title": "Abstract Class: IgxExporterOptionsBase", + "component": "Abstract Class: IgxExporterOptionsBase", + "file": "classes/IgxExporterOptionsBase.md", + "type": "unknown", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/exporter-options-base.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b" + }, + "IgxFilterCellTemplateDirective": { + "title": "Class: IgxFilterCellTemplateDirective", + "component": "IgxFilterCellTemplateDirective", + "file": "classes/IgxFilterCellTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "IgxFilterDirective": { + "title": "Class: IgxFilterDirective", + "component": "IgxFilterDirective", + "file": "classes/IgxFilterDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxFilteringOperand": { + "title": "Class: IgxFilteringOperand", + "component": "IgxFilteringOperand", + "file": "classes/IgxFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxFilterOptions": { + "title": "Class: IgxFilterOptions", + "component": "IgxFilterOptions", + "file": "classes/IgxFilterOptions.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxFilterPipe": { + "title": "Class: IgxFilterPipe", + "component": "IgxFilterPipe", + "file": "classes/IgxFilterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/filter/filter.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxFlatTransactionFactory": { + "title": "Class: IgxFlatTransactionFactory", + "component": "IgxFlatTransactionFactory", + "file": "classes/IgxFlatTransactionFactory.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "IgxFlexDirective": { + "title": "Class: IgxFlexDirective", + "component": "IgxFlexDirective", + "file": "classes/IgxFlexDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxFocusDirective": { + "title": "Class: IgxFocusDirective", + "component": "IgxFocusDirective", + "file": "classes/IgxFocusDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus/focus.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxFocusTrapDirective": { + "title": "Class: IgxFocusTrapDirective", + "component": "IgxFocusTrapDirective", + "file": "classes/IgxFocusTrapDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "IgxForOfContext": { + "title": "Class: IgxForOfContext\\<T, U\\>", + "component": "IgxForOfContext\\<T, U\\>", + "file": "classes/IgxForOfContext.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxForOfDirective": { + "title": "Class: IgxForOfDirective\\<T, U\\>", + "component": "IgxForOfDirective\\<T, U\\>", + "file": "classes/IgxForOfDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxForOfScrollSyncService": { + "title": "Class: IgxForOfScrollSyncService", + "component": "IgxForOfScrollSyncService", + "file": "classes/IgxForOfScrollSyncService.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.sync.service.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IgxForOfSyncService": { + "title": "Class: IgxForOfSyncService", + "component": "IgxForOfSyncService", + "file": "classes/IgxForOfSyncService.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.sync.service.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxGridActionButtonComponent": { + "title": "Class: IgxGridActionButtonComponent", + "component": "IgxGridActionButtonComponent", + "file": "classes/IgxGridActionButtonComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-action-button.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxGridActionsBaseDirective": { + "title": "Class: IgxGridActionsBaseDirective", + "component": "IgxGridActionsBaseDirective", + "file": "classes/IgxGridActionsBaseDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-actions-base.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IgxGridAddRowPipe": { + "title": "Class: IgxGridAddRowPipe", + "component": "IgxGridAddRowPipe", + "file": "classes/IgxGridAddRowPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxGridBaseDirective": { + "title": "Abstract Class: IgxGridBaseDirective", + "component": "Abstract Class: IgxGridBaseDirective", + "file": "classes/IgxGridBaseDirective.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxGridBodyDirective": { + "title": "Class: IgxGridBodyDirective", + "component": "IgxGridBodyDirective", + "file": "classes/IgxGridBodyDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid.common.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ig" + }, + "IgxGridCell": { + "title": "Class: IgxGridCell", + "component": "IgxGridCell", + "file": "classes/IgxGridCell.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-cell.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxGridCellComponent": { + "title": "Class: IgxGridCellComponent", + "component": "IgxGridCellComponent", + "file": "classes/IgxGridCellComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/cell.component.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxGridCellMergePipe": { + "title": "Class: IgxGridCellMergePipe", + "component": "IgxGridCellMergePipe", + "file": "classes/IgxGridCellMergePipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.pipes.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "IgxGridColumnResizerComponent": { + "title": "Class: IgxGridColumnResizerComponent", + "component": "IgxGridColumnResizerComponent", + "file": "classes/IgxGridColumnResizerComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/resizer.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "IgxGridComponent": { + "title": "Class: IgxGridComponent", + "component": "IgxGridComponent", + "file": "classes/IgxGridComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxGridCRUDService": { + "title": "Class: IgxGridCRUDService", + "component": "IgxGridCRUDService", + "file": "classes/IgxGridCRUDService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:632](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxGridDataMapperPipe": { + "title": "Class: IgxGridDataMapperPipe", + "component": "IgxGridDataMapperPipe", + "file": "classes/IgxGridDataMapperPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxGridEditingActionsComponent": { + "title": "Class: IgxGridEditingActionsComponent", + "component": "IgxGridEditingActionsComponent", + "file": "classes/IgxGridEditingActionsComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IgxGridExcelStyleFilteringComponent": { + "title": "Class: IgxGridExcelStyleFilteringComponent", + "component": "IgxGridExcelStyleFilteringComponent", + "file": "classes/IgxGridExcelStyleFilteringComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxGridExpandableCellComponent": { + "title": "Class: IgxGridExpandableCellComponent", + "component": "IgxGridExpandableCellComponent", + "file": "classes/IgxGridExpandableCellComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/expandable-cell.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxGridFooterComponent": { + "title": "Class: IgxGridFooterComponent", + "component": "IgxGridFooterComponent", + "file": "classes/IgxGridFooterComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-footer/grid-footer.component.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxGridForOfContext": { + "title": "Class: IgxGridForOfContext\\<T, U\\>", + "component": "IgxGridForOfContext\\<T, U\\>", + "file": "classes/IgxGridForOfContext.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:1586](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxGridForOfDirective": { + "title": "Class: IgxGridForOfDirective\\<T, U\\>", + "component": "IgxGridForOfDirective\\<T, U\\>", + "file": "classes/IgxGridForOfDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:1601](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxGridPinningActionsComponent": { + "title": "Class: IgxGridPinningActionsComponent", + "component": "IgxGridPinningActionsComponent", + "file": "classes/IgxGridPinningActionsComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IgxGridRow": { + "title": "Class: IgxGridRow", + "component": "IgxGridRow", + "file": "classes/IgxGridRow.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxGridRowComponent": { + "title": "Class: IgxGridRowComponent", + "component": "IgxGridRowComponent", + "file": "classes/IgxGridRowComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid-row.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxGridSelectionService": { + "title": "Class: IgxGridSelectionService", + "component": "IgxGridSelectionService", + "file": "classes/IgxGridSelectionService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/selection/selection.service.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxGridStateBaseDirective": { + "title": "Class: IgxGridStateBaseDirective", + "component": "IgxGridStateBaseDirective", + "file": "classes/IgxGridStateBaseDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxGridStateDirective": { + "title": "Class: IgxGridStateDirective", + "component": "IgxGridStateDirective", + "file": "classes/IgxGridStateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxGridToolbarActionsComponent": { + "title": "Class: IgxGridToolbarActionsComponent", + "component": "IgxGridToolbarActionsComponent", + "file": "classes/IgxGridToolbarActionsComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxGridToolbarAdvancedFilteringComponent": { + "title": "Class: IgxGridToolbarAdvancedFilteringComponent", + "component": "IgxGridToolbarAdvancedFilteringComponent", + "file": "classes/IgxGridToolbarAdvancedFilteringComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-advanced-filtering.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd" + }, + "IgxGridToolbarComponent": { + "title": "Class: IgxGridToolbarComponent", + "component": "IgxGridToolbarComponent", + "file": "classes/IgxGridToolbarComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxGridToolbarDirective": { + "title": "Class: IgxGridToolbarDirective", + "component": "IgxGridToolbarDirective", + "file": "classes/IgxGridToolbarDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxGridToolbarExporterComponent": { + "title": "Class: IgxGridToolbarExporterComponent", + "component": "IgxGridToolbarExporterComponent", + "file": "classes/IgxGridToolbarExporterComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxGridToolbarHidingComponent": { + "title": "Class: IgxGridToolbarHidingComponent", + "component": "IgxGridToolbarHidingComponent", + "file": "classes/IgxGridToolbarHidingComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-hiding.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxGridToolbarPinningComponent": { + "title": "Class: IgxGridToolbarPinningComponent", + "component": "IgxGridToolbarPinningComponent", + "file": "classes/IgxGridToolbarPinningComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-pinning.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IgxGridToolbarTitleComponent": { + "title": "Class: IgxGridToolbarTitleComponent", + "component": "IgxGridToolbarTitleComponent", + "file": "classes/IgxGridToolbarTitleComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxGridTransactionStatePipe": { + "title": "Class: IgxGridTransactionStatePipe", + "component": "IgxGridTransactionStatePipe", + "file": "classes/IgxGridTransactionStatePipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxGridUnmergeActivePipe": { + "title": "Class: IgxGridUnmergeActivePipe", + "component": "IgxGridUnmergeActivePipe", + "file": "classes/IgxGridUnmergeActivePipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.pipes.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "IgxGridValidationService": { + "title": "Class: IgxGridValidationService", + "component": "IgxGridValidationService", + "file": "classes/IgxGridValidationService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-validation.service.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxGroupByRow": { + "title": "Class: IgxGroupByRow", + "component": "IgxGroupByRow", + "file": "classes/IgxGroupByRow.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxGroupedTreeGridSorting": { + "title": "Class: IgxGroupedTreeGridSorting", + "component": "IgxGroupedTreeGridSorting", + "file": "classes/IgxGroupedTreeGridSorting.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxGrouping": { + "title": "Class: IgxGrouping", + "component": "IgxGrouping", + "file": "classes/IgxGrouping.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxHeaderGroupStylePipe": { + "title": "Class: IgxHeaderGroupStylePipe", + "component": "IgxHeaderGroupStylePipe", + "file": "classes/IgxHeaderGroupStylePipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/headers/pipes.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxHierarchicalGridComponent": { + "title": "Class: IgxHierarchicalGridComponent", + "component": "IgxHierarchicalGridComponent", + "file": "classes/IgxHierarchicalGridComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:331](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxHierarchicalGridRow": { + "title": "Class: IgxHierarchicalGridRow", + "component": "IgxHierarchicalGridRow", + "file": "classes/IgxHierarchicalGridRow.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:497](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxHierarchicalTransactionFactory": { + "title": "Class: IgxHierarchicalTransactionFactory", + "component": "IgxHierarchicalTransactionFactory", + "file": "classes/IgxHierarchicalTransactionFactory.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "IgxHintDirective": { + "title": "Class: IgxHintDirective", + "component": "IgxHintDirective", + "file": "classes/IgxHintDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-hint/hint.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IgxIconButtonDirective": { + "title": "Class: IgxIconButtonDirective", + "component": "IgxIconButtonDirective", + "file": "classes/IgxIconButtonDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxIconComponent": { + "title": "Class: IgxIconComponent", + "component": "IgxIconComponent", + "file": "classes/IgxIconComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxIconService": { + "title": "Class: IgxIconService", + "component": "IgxIconService", + "file": "classes/IgxIconService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ig" + }, + "IgxInputDirective": { + "title": "Class: IgxInputDirective", + "component": "IgxInputDirective", + "file": "classes/IgxInputDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b" + }, + "IgxInputGroupComponent": { + "title": "Class: IgxInputGroupComponent", + "component": "IgxInputGroupComponent", + "file": "classes/IgxInputGroupComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/input-group.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxInsertDropStrategy": { + "title": "Class: IgxInsertDropStrategy", + "component": "IgxInsertDropStrategy", + "file": "classes/IgxInsertDropStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxLabelDirective": { + "title": "Class: IgxLabelDirective", + "component": "IgxLabelDirective", + "file": "classes/IgxLabelDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-label/label.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IgxLayoutDirective": { + "title": "Class: IgxLayoutDirective", + "component": "IgxLayoutDirective", + "file": "classes/IgxLayoutDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/layout/layout.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781" + }, + "IgxLinearProgressBarComponent": { + "title": "Class: IgxLinearProgressBarComponent", + "component": "IgxLinearProgressBarComponent", + "file": "classes/IgxLinearProgressBarComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxListActionDirective": { + "title": "Class: IgxListActionDirective", + "component": "IgxListActionDirective", + "file": "classes/IgxListActionDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxListComponent": { + "title": "Class: IgxListComponent", + "component": "IgxListComponent", + "file": "classes/IgxListComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxListItemComponent": { + "title": "Class: IgxListItemComponent", + "component": "IgxListItemComponent", + "file": "classes/IgxListItemComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list-item.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxListItemLeftPanningTemplateDirective": { + "title": "Class: IgxListItemLeftPanningTemplateDirective", + "component": "IgxListItemLeftPanningTemplateDirective", + "file": "classes/IgxListItemLeftPanningTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "IgxListItemRightPanningTemplateDirective": { + "title": "Class: IgxListItemRightPanningTemplateDirective", + "component": "IgxListItemRightPanningTemplateDirective", + "file": "classes/IgxListItemRightPanningTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "IgxListLineDirective": { + "title": "Class: IgxListLineDirective", + "component": "IgxListLineDirective", + "file": "classes/IgxListLineDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxListLineSubTitleDirective": { + "title": "Class: IgxListLineSubTitleDirective", + "component": "IgxListLineSubTitleDirective", + "file": "classes/IgxListLineSubTitleDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxListLineTitleDirective": { + "title": "Class: IgxListLineTitleDirective", + "component": "IgxListLineTitleDirective", + "file": "classes/IgxListLineTitleDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxListThumbnailDirective": { + "title": "Class: IgxListThumbnailDirective", + "component": "IgxListThumbnailDirective", + "file": "classes/IgxListThumbnailDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxMaskDirective": { + "title": "Class: IgxMaskDirective", + "component": "IgxMaskDirective", + "file": "classes/IgxMaskDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxMonthPickerComponent": { + "title": "Class: IgxMonthPickerComponent", + "component": "IgxMonthPickerComponent", + "file": "classes/IgxMonthPickerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "IgxMonthsViewComponent": { + "title": "Class: IgxMonthsViewComponent", + "component": "IgxMonthsViewComponent", + "file": "classes/IgxMonthsViewComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/months-view/months-view.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IgxNavbarActionDirective": { + "title": "Class: IgxNavbarActionDirective", + "component": "IgxNavbarActionDirective", + "file": "classes/IgxNavbarActionDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxNavbarComponent": { + "title": "Class: IgxNavbarComponent", + "component": "IgxNavbarComponent", + "file": "classes/IgxNavbarComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxNavbarTitleDirective": { + "title": "Class: IgxNavbarTitleDirective", + "component": "IgxNavbarTitleDirective", + "file": "classes/IgxNavbarTitleDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxNavDrawerItemDirective": { + "title": "Class: IgxNavDrawerItemDirective", + "component": "IgxNavDrawerItemDirective", + "file": "classes/IgxNavDrawerItemDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e" + }, + "IgxNavDrawerMiniTemplateDirective": { + "title": "Class: IgxNavDrawerMiniTemplateDirective", + "component": "IgxNavDrawerMiniTemplateDirective", + "file": "classes/IgxNavDrawerMiniTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxNavDrawerTemplateDirective": { + "title": "Class: IgxNavDrawerTemplateDirective", + "component": "IgxNavDrawerTemplateDirective", + "file": "classes/IgxNavDrawerTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.directives.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6" + }, + "IgxNavigationCloseDirective": { + "title": "Class: IgxNavigationCloseDirective", + "component": "IgxNavigationCloseDirective", + "file": "classes/IgxNavigationCloseDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxNavigationDrawerComponent": { + "title": "Class: IgxNavigationDrawerComponent", + "component": "IgxNavigationDrawerComponent", + "file": "classes/IgxNavigationDrawerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e" + }, + "IgxNavigationService": { + "title": "Class: IgxNavigationService", + "component": "IgxNavigationService", + "file": "classes/IgxNavigationService.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/nav.service.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxNavigationToggleDirective": { + "title": "Class: IgxNavigationToggleDirective", + "component": "IgxNavigationToggleDirective", + "file": "classes/IgxNavigationToggleDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/directives.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxNotificationsDirective": { + "title": "Abstract Class: IgxNotificationsDirective", + "component": "Abstract Class: IgxNotificationsDirective", + "file": "classes/IgxNotificationsDirective.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841" + }, + "IgxNumberFilteringOperand": { + "title": "Class: IgxNumberFilteringOperand", + "component": "IgxNumberFilteringOperand", + "file": "classes/IgxNumberFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:757](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxNumberFormatterPipe": { + "title": "Class: IgxNumberFormatterPipe", + "component": "IgxNumberFormatterPipe", + "file": "classes/IgxNumberFormatterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxNumberSummaryOperand": { + "title": "Class: IgxNumberSummaryOperand", + "component": "IgxNumberSummaryOperand", + "file": "classes/IgxNumberSummaryOperand.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxOverlayOutletDirective": { + "title": "Class: IgxOverlayOutletDirective", + "component": "IgxOverlayOutletDirective", + "file": "classes/IgxOverlayOutletDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxOverlayService": { + "title": "Class: IgxOverlayService", + "component": "IgxOverlayService", + "file": "classes/IgxOverlayService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/overlay.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxPageNavigationComponent": { + "title": "Class: IgxPageNavigationComponent", + "component": "IgxPageNavigationComponent", + "file": "classes/IgxPageNavigationComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxPageSizeSelectorComponent": { + "title": "Class: IgxPageSizeSelectorComponent", + "component": "IgxPageSizeSelectorComponent", + "file": "classes/IgxPageSizeSelectorComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:372](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxPaginatorComponent": { + "title": "Class: IgxPaginatorComponent", + "component": "IgxPaginatorComponent", + "file": "classes/IgxPaginatorComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxPaginatorContentDirective": { + "title": "Class: IgxPaginatorContentDirective", + "component": "IgxPaginatorContentDirective", + "file": "classes/IgxPaginatorContentDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxPaginatorDirective": { + "title": "Class: IgxPaginatorDirective", + "component": "IgxPaginatorDirective", + "file": "classes/IgxPaginatorDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxPdfExporterOptions": { + "title": "Class: IgxPdfExporterOptions", + "component": "IgxPdfExporterOptions", + "file": "classes/IgxPdfExporterOptions.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxPdfExporterService": { + "title": "Class: IgxPdfExporterService", + "component": "IgxPdfExporterService", + "file": "classes/IgxPdfExporterService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxPdfTextDirective": { + "title": "Class: IgxPdfTextDirective", + "component": "IgxPdfTextDirective", + "file": "classes/IgxPdfTextDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxPercentFormatterPipe": { + "title": "Class: IgxPercentFormatterPipe", + "component": "IgxPercentFormatterPipe", + "file": "classes/IgxPercentFormatterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/pipes.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IgxPickerActionsDirective": { + "title": "Class: IgxPickerActionsDirective", + "component": "IgxPickerActionsDirective", + "file": "classes/IgxPickerActionsDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxPickerClearComponent": { + "title": "Class: IgxPickerClearComponent", + "component": "IgxPickerClearComponent", + "file": "classes/IgxPickerClearComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxPickerToggleComponent": { + "title": "Class: IgxPickerToggleComponent", + "component": "IgxPickerToggleComponent", + "file": "classes/IgxPickerToggleComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/picker-icons.common.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxPivotAggregate": { + "title": "Class: IgxPivotAggregate", + "component": "IgxPivotAggregate", + "file": "classes/IgxPivotAggregate.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxPivotDataSelectorComponent": { + "title": "Class: IgxPivotDataSelectorComponent", + "component": "IgxPivotDataSelectorComponent", + "file": "classes/IgxPivotDataSelectorComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxPivotDateAggregate": { + "title": "Class: IgxPivotDateAggregate", + "component": "IgxPivotDateAggregate", + "file": "classes/IgxPivotDateAggregate.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxPivotDateDimension": { + "title": "Class: IgxPivotDateDimension", + "component": "IgxPivotDateDimension", + "file": "classes/IgxPivotDateDimension.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxPivotGridColumnResizerComponent": { + "title": "Class: IgxPivotGridColumnResizerComponent", + "component": "IgxPivotGridColumnResizerComponent", + "file": "classes/IgxPivotGridColumnResizerComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/resizing/pivot-grid/pivot-resizer.component.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IgxPivotGridComponent": { + "title": "Class: IgxPivotGridComponent", + "component": "IgxPivotGridComponent", + "file": "classes/IgxPivotGridComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "IgxPivotNumericAggregate": { + "title": "Class: IgxPivotNumericAggregate", + "component": "IgxPivotNumericAggregate", + "file": "classes/IgxPivotNumericAggregate.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxPivotTimeAggregate": { + "title": "Class: IgxPivotTimeAggregate", + "component": "IgxPivotTimeAggregate", + "file": "classes/IgxPivotTimeAggregate.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-aggregate.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxPrependDropStrategy": { + "title": "Class: IgxPrependDropStrategy", + "component": "IgxPrependDropStrategy", + "file": "classes/IgxPrependDropStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxProgressBarGradientDirective": { + "title": "Class: IgxProgressBarGradientDirective", + "component": "IgxProgressBarGradientDirective", + "file": "classes/IgxProgressBarGradientDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxProgressBarTextTemplateDirective": { + "title": "Class: IgxProgressBarTextTemplateDirective", + "component": "IgxProgressBarTextTemplateDirective", + "file": "classes/IgxProgressBarTextTemplateDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.common.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxQueryBuilderComponent": { + "title": "Class: IgxQueryBuilderComponent", + "component": "IgxQueryBuilderComponent", + "file": "classes/IgxQueryBuilderComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IgxQueryBuilderHeaderComponent": { + "title": "Class: IgxQueryBuilderHeaderComponent", + "component": "IgxQueryBuilderHeaderComponent", + "file": "classes/IgxQueryBuilderHeaderComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd84" + }, + "IgxQueryBuilderSearchValueTemplateDirective": { + "title": "Class: IgxQueryBuilderSearchValueTemplateDirective", + "component": "IgxQueryBuilderSearchValueTemplateDirective", + "file": "classes/IgxQueryBuilderSearchValueTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IgxRadioComponent": { + "title": "Class: IgxRadioComponent", + "component": "IgxRadioComponent", + "file": "classes/IgxRadioComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxRadioGroupDirective": { + "title": "Class: IgxRadioGroupDirective", + "component": "IgxRadioGroupDirective", + "file": "classes/IgxRadioGroupDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxReadOnlyInputDirective": { + "title": "Class: IgxReadOnlyInputDirective", + "component": "IgxReadOnlyInputDirective", + "file": "classes/IgxReadOnlyInputDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da" + }, + "IgxRippleDirective": { + "title": "Class: IgxRippleDirective", + "component": "IgxRippleDirective", + "file": "classes/IgxRippleDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxRowAddCrudState": { + "title": "Class: IgxRowAddCrudState", + "component": "IgxRowAddCrudState", + "file": "classes/IgxRowAddCrudState.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxRowCrudState": { + "title": "Class: IgxRowCrudState", + "component": "IgxRowCrudState", + "file": "classes/IgxRowCrudState.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:350](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxRowDirective": { + "title": "Class: IgxRowDirective", + "component": "IgxRowDirective", + "file": "classes/IgxRowDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/row.directive.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxRowIslandComponent": { + "title": "Class: IgxRowIslandComponent", + "component": "IgxRowIslandComponent", + "file": "classes/IgxRowIslandComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781" + }, + "IgxSelectComponent": { + "title": "Class: IgxSelectComponent", + "component": "IgxSelectComponent", + "file": "classes/IgxSelectComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select.component.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxSelectGroupComponent": { + "title": "Class: IgxSelectGroupComponent", + "component": "IgxSelectGroupComponent", + "file": "classes/IgxSelectGroupComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-group.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxSelectItemComponent": { + "title": "Class: IgxSelectItemComponent", + "component": "IgxSelectItemComponent", + "file": "classes/IgxSelectItemComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/select-item.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxSimpleComboComponent": { + "title": "Class: IgxSimpleComboComponent", + "component": "IgxSimpleComboComponent", + "file": "classes/IgxSimpleComboComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgxSlideComponent": { + "title": "Class: IgxSlideComponent", + "component": "IgxSlideComponent", + "file": "classes/IgxSlideComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/slide.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxSliderComponent": { + "title": "Class: IgxSliderComponent", + "component": "IgxSliderComponent", + "file": "classes/IgxSliderComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxSnackbarComponent": { + "title": "Class: IgxSnackbarComponent", + "component": "IgxSnackbarComponent", + "file": "classes/IgxSnackbarComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxSorting": { + "title": "Class: IgxSorting", + "component": "IgxSorting", + "file": "classes/IgxSorting.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxSplitterComponent": { + "title": "Class: IgxSplitterComponent", + "component": "IgxSplitterComponent", + "file": "classes/IgxSplitterComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxSplitterPaneComponent": { + "title": "Class: IgxSplitterPaneComponent", + "component": "IgxSplitterPaneComponent", + "file": "classes/IgxSplitterPaneComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IgxStepActiveIndicatorDirective": { + "title": "Class: IgxStepActiveIndicatorDirective", + "component": "IgxStepActiveIndicatorDirective", + "file": "classes/IgxStepActiveIndicatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxStepCompletedIndicatorDirective": { + "title": "Class: IgxStepCompletedIndicatorDirective", + "component": "IgxStepCompletedIndicatorDirective", + "file": "classes/IgxStepCompletedIndicatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxStepComponent": { + "title": "Class: IgxStepComponent", + "component": "IgxStepComponent", + "file": "classes/IgxStepComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "IgxStepContentDirective": { + "title": "Class: IgxStepContentDirective", + "component": "IgxStepContentDirective", + "file": "classes/IgxStepContentDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxStepIndicatorDirective": { + "title": "Class: IgxStepIndicatorDirective", + "component": "IgxStepIndicatorDirective", + "file": "classes/IgxStepIndicatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxStepInvalidIndicatorDirective": { + "title": "Class: IgxStepInvalidIndicatorDirective", + "component": "IgxStepInvalidIndicatorDirective", + "file": "classes/IgxStepInvalidIndicatorDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxStepperComponent": { + "title": "Class: IgxStepperComponent", + "component": "IgxStepperComponent", + "file": "classes/IgxStepperComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxStepSubtitleDirective": { + "title": "Class: IgxStepSubtitleDirective", + "component": "IgxStepSubtitleDirective", + "file": "classes/IgxStepSubtitleDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxStepTitleDirective": { + "title": "Class: IgxStepTitleDirective", + "component": "IgxStepTitleDirective", + "file": "classes/IgxStepTitleDirective.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxStringFilteringOperand": { + "title": "Class: IgxStringFilteringOperand", + "component": "IgxStringFilteringOperand", + "file": "classes/IgxStringFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:812](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxStringReplacePipe": { + "title": "Class: IgxStringReplacePipe", + "component": "IgxStringReplacePipe", + "file": "classes/IgxStringReplacePipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxSummaryDataPipe": { + "title": "Class: IgxSummaryDataPipe", + "component": "IgxSummaryDataPipe", + "file": "classes/IgxSummaryDataPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-root-summary.pipe.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxSummaryFormatterPipe": { + "title": "Class: IgxSummaryFormatterPipe", + "component": "IgxSummaryFormatterPipe", + "file": "classes/IgxSummaryFormatterPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pipes.ts:389](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxSummaryOperand": { + "title": "Class: IgxSummaryOperand", + "component": "IgxSummaryOperand", + "file": "classes/IgxSummaryOperand.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxSummaryRow": { + "title": "Class: IgxSummaryRow", + "component": "IgxSummaryRow", + "file": "classes/IgxSummaryRow.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxSummaryRowComponent": { + "title": "Class: IgxSummaryRowComponent", + "component": "IgxSummaryRowComponent", + "file": "classes/IgxSummaryRowComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IgxSummaryTemplateDirective": { + "title": "Class: IgxSummaryTemplateDirective", + "component": "IgxSummaryTemplateDirective", + "file": "classes/IgxSummaryTemplateDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/templates.directive.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxSwitchComponent": { + "title": "Class: IgxSwitchComponent", + "component": "IgxSwitchComponent", + "file": "classes/IgxSwitchComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/switch/src/switch/switch.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxTabContentComponent": { + "title": "Class: IgxTabContentComponent", + "component": "IgxTabContentComponent", + "file": "classes/IgxTabContentComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tab-content.component.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxTabContentDirective": { + "title": "Abstract Class: IgxTabContentDirective", + "component": "Abstract Class: IgxTabContentDirective", + "file": "classes/IgxTabContentDirective.md", + "type": "unknown", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-content.directive.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxTabHeaderComponent": { + "title": "Class: IgxTabHeaderComponent", + "component": "IgxTabHeaderComponent", + "file": "classes/IgxTabHeaderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tab-header.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "IgxTabHeaderDirective": { + "title": "Abstract Class: IgxTabHeaderDirective", + "component": "Abstract Class: IgxTabHeaderDirective", + "file": "classes/IgxTabHeaderDirective.md", + "type": "unknown", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-header.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxTabHeaderIconDirective": { + "title": "Class: IgxTabHeaderIconDirective", + "component": "IgxTabHeaderIconDirective", + "file": "classes/IgxTabHeaderIconDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.directives.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "IgxTabHeaderLabelDirective": { + "title": "Class: IgxTabHeaderLabelDirective", + "component": "IgxTabHeaderLabelDirective", + "file": "classes/IgxTabHeaderLabelDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.directives.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxTabItemComponent": { + "title": "Class: IgxTabItemComponent", + "component": "IgxTabItemComponent", + "file": "classes/IgxTabItemComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tab-item.component.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IgxTabItemDirective": { + "title": "Abstract Class: IgxTabItemDirective", + "component": "Abstract Class: IgxTabItemDirective", + "file": "classes/IgxTabItemDirective.md", + "type": "unknown", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxTabsComponent": { + "title": "Class: IgxTabsComponent", + "component": "IgxTabsComponent", + "file": "classes/IgxTabsComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IgxTabsDirective": { + "title": "Abstract Class: IgxTabsDirective", + "component": "Abstract Class: IgxTabsDirective", + "file": "classes/IgxTabsDirective.md", + "type": "unknown", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxTextHighlightDirective": { + "title": "Class: IgxTextHighlightDirective", + "component": "IgxTextHighlightDirective", + "file": "classes/IgxTextHighlightDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxTextHighlightService": { + "title": "Class: IgxTextHighlightService", + "component": "IgxTextHighlightService", + "file": "classes/IgxTextHighlightService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.service.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd84" + }, + "IgxTextSelectionDirective": { + "title": "Class: IgxTextSelectionDirective", + "component": "IgxTextSelectionDirective", + "file": "classes/IgxTextSelectionDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-selection/text-selection.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd" + }, + "IgxThumbFromTemplateDirective": { + "title": "Class: IgxThumbFromTemplateDirective", + "component": "IgxThumbFromTemplateDirective", + "file": "classes/IgxThumbFromTemplateDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxThumbToTemplateDirective": { + "title": "Class: IgxThumbToTemplateDirective", + "component": "IgxThumbToTemplateDirective", + "file": "classes/IgxThumbToTemplateDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxTickLabelTemplateDirective": { + "title": "Class: IgxTickLabelTemplateDirective", + "component": "IgxTickLabelTemplateDirective", + "file": "classes/IgxTickLabelTemplateDirective.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxTimeFilteringOperand": { + "title": "Class: IgxTimeFilteringOperand", + "component": "IgxTimeFilteringOperand", + "file": "classes/IgxTimeFilteringOperand.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IgxTimePickerComponent": { + "title": "Class: IgxTimePickerComponent", + "component": "IgxTimePickerComponent", + "file": "classes/IgxTimePickerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxTimeSummaryOperand": { + "title": "Class: IgxTimeSummaryOperand", + "component": "IgxTimeSummaryOperand", + "file": "classes/IgxTimeSummaryOperand.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/summaries/grid-summary.ts:256](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxToastComponent": { + "title": "Class: IgxToastComponent", + "component": "IgxToastComponent", + "file": "classes/IgxToastComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/toast/src/toast/toast.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxToggleActionDirective": { + "title": "Class: IgxToggleActionDirective", + "component": "IgxToggleActionDirective", + "file": "classes/IgxToggleActionDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IgxToggleDirective": { + "title": "Class: IgxToggleDirective", + "component": "IgxToggleDirective", + "file": "classes/IgxToggleDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxTooltipDirective": { + "title": "Class: IgxTooltipDirective", + "component": "IgxTooltipDirective", + "file": "classes/IgxTooltipDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IgxTooltipTargetDirective": { + "title": "Class: IgxTooltipTargetDirective", + "component": "IgxTooltipTargetDirective", + "file": "classes/IgxTooltipTargetDirective.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IgxTransactionService": { + "title": "Class: IgxTransactionService\\<T, S\\>", + "component": "IgxTransactionService\\<T, S\\>", + "file": "classes/IgxTransactionService.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/igx-transaction.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxTreeComponent": { + "title": "Class: IgxTreeComponent", + "component": "IgxTreeComponent", + "file": "classes/IgxTreeComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree.component.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IgxTreeGridComponent": { + "title": "Class: IgxTreeGridComponent", + "component": "IgxTreeGridComponent", + "file": "classes/IgxTreeGridComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IgxTreeGridRow": { + "title": "Class: IgxTreeGridRow", + "component": "IgxTreeGridRow", + "file": "classes/IgxTreeGridRow.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-public-row.ts:341](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IgxTreeNodeComponent": { + "title": "Class: IgxTreeNodeComponent\\<T\\>", + "component": "IgxTreeNodeComponent\\<T\\>", + "file": "classes/IgxTreeNodeComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IgxYearsViewComponent": { + "title": "Class: IgxYearsViewComponent", + "component": "IgxYearsViewComponent", + "file": "classes/IgxYearsViewComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/years-view/years-view.component.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IntlFormatter": { + "title": "Class: IntlFormatter", + "component": "IntlFormatter", + "file": "classes/IntlFormatter.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-intl.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "ITreeGridAggregation": { + "title": "Class: ITreeGridAggregation", + "component": "ITreeGridAggregation", + "file": "classes/ITreeGridAggregation.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.grouping.pipe.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "NoopFilteringStrategy": { + "title": "Class: NoopFilteringStrategy", + "component": "NoopFilteringStrategy", + "file": "classes/NoopFilteringStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:232](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "NoopPivotDimensionsStrategy": { + "title": "Class: NoopPivotDimensionsStrategy", + "component": "NoopPivotDimensionsStrategy", + "file": "classes/NoopPivotDimensionsStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "NoOpScrollStrategy": { + "title": "Class: NoOpScrollStrategy", + "component": "NoOpScrollStrategy", + "file": "classes/NoOpScrollStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/NoOpScrollStrategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "NoopSortingStrategy": { + "title": "Class: NoopSortingStrategy", + "component": "NoopSortingStrategy", + "file": "classes/NoopSortingStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "PerformanceService": { + "title": "Class: PerformanceService", + "component": "PerformanceService", + "file": "classes/PerformanceService.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/performance.service.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "PickerBaseDirective": { + "title": "Abstract Class: PickerBaseDirective", + "component": "Abstract Class: PickerBaseDirective", + "file": "classes/PickerBaseDirective.md", + "type": "unknown", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "PivotColumnDimensionsStrategy": { + "title": "Class: PivotColumnDimensionsStrategy", + "component": "PivotColumnDimensionsStrategy", + "file": "classes/PivotColumnDimensionsStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "PivotRowDimensionsStrategy": { + "title": "Class: PivotRowDimensionsStrategy", + "component": "PivotRowDimensionsStrategy", + "file": "classes/PivotRowDimensionsStrategy.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/pivot-strategy.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "PivotUtil": { + "title": "Class: PivotUtil", + "component": "PivotUtil", + "file": "classes/PivotUtil.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-util.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igni" + }, + "Point": { + "title": "Class: Point", + "component": "Point", + "file": "classes/Point.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "ScrollStrategy": { + "title": "Abstract Class: ScrollStrategy", + "component": "Abstract Class: ScrollStrategy", + "file": "classes/ScrollStrategy.md", + "type": "unknown", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/scroll-strategy.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "SortingIndexPipe": { + "title": "Class: SortingIndexPipe", + "component": "SortingIndexPipe", + "file": "classes/SortingIndexPipe.md", + "type": "class", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/headers/pipes.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "ThemeToken": { + "title": "Class: ThemeToken", + "component": "ThemeToken", + "file": "classes/ThemeToken.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "TooltipPositionStrategy": { + "title": "Class: TooltipPositionStrategy", + "component": "TooltipPositionStrategy", + "file": "classes/TooltipPositionStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781" + }, + "TreeGridFilteringStrategy": { + "title": "Class: TreeGridFilteringStrategy", + "component": "TreeGridFilteringStrategy", + "file": "classes/TreeGridFilteringStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "TreeGridFormattedValuesFilteringStrategy": { + "title": "Class: TreeGridFormattedValuesFilteringStrategy", + "component": "TreeGridFormattedValuesFilteringStrategy", + "file": "classes/TreeGridFormattedValuesFilteringStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "TreeGridMatchingRecordsOnlyFilteringStrategy": { + "title": "Class: TreeGridMatchingRecordsOnlyFilteringStrategy", + "component": "TreeGridMatchingRecordsOnlyFilteringStrategy", + "file": "classes/TreeGridMatchingRecordsOnlyFilteringStrategy.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/tree-grid-filtering-strategy.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "AbsolutePosition": { + "title": "Enumeration: AbsolutePosition", + "component": "AbsolutePosition", + "file": "enumerations/AbsolutePosition.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "CarouselAnimationDirection": { + "title": "Enumeration: CarouselAnimationDirection", + "component": "CarouselAnimationDirection", + "file": "enumerations/CarouselAnimationDirection.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "ColumnPinningPosition": { + "title": "Enumeration: ColumnPinningPosition", + "component": "ColumnPinningPosition", + "file": "enumerations/ColumnPinningPosition.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "CsvFileTypes": { + "title": "Enumeration: CsvFileTypes", + "component": "CsvFileTypes", + "file": "enumerations/CsvFileTypes.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-options.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "DatePart": { + "title": "Enumeration: DatePart", + "component": "DatePart", + "file": "enumerations/DatePart.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "DateRangeType": { + "title": "Enumeration: DateRangeType", + "component": "DateRangeType", + "file": "enumerations/DateRangeType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "DragDirection": { + "title": "Enumeration: DragDirection", + "component": "DragDirection", + "file": "enumerations/DragDirection.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "DropPosition": { + "title": "Enumeration: DropPosition", + "component": "DropPosition", + "file": "enumerations/DropPosition.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/moving/moving.service.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "ExportHeaderType": { + "title": "Enumeration: ExportHeaderType", + "component": "ExportHeaderType", + "file": "enumerations/ExportHeaderType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "ExportRecordType": { + "title": "Enumeration: ExportRecordType", + "component": "ExportRecordType", + "file": "enumerations/ExportRecordType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "FilteringExpressionsTreeType": { + "title": "Enumeration: FilteringExpressionsTreeType", + "component": "FilteringExpressionsTreeType", + "file": "enumerations/FilteringExpressionsTreeType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "FilteringLogic": { + "title": "Enumeration: FilteringLogic", + "component": "FilteringLogic", + "file": "enumerations/FilteringLogic.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "HorizontalAlignment": { + "title": "Enumeration: HorizontalAlignment", + "component": "HorizontalAlignment", + "file": "enumerations/HorizontalAlignment.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxInputState": { + "title": "Enumeration: IgxInputState", + "component": "IgxInputState", + "file": "enumerations/IgxInputState.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b" + }, + "IgxListPanState": { + "title": "Enumeration: IgxListPanState", + "component": "IgxListPanState", + "file": "enumerations/IgxListPanState.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ign" + }, + "OffsetMode": { + "title": "Enumeration: OffsetMode", + "component": "OffsetMode", + "file": "enumerations/OffsetMode.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "PagingError": { + "title": "Enumeration: PagingError", + "component": "PagingError", + "file": "enumerations/PagingError.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "PivotDimensionType": { + "title": "Enumeration: PivotDimensionType", + "component": "PivotDimensionType", + "file": "enumerations/PivotDimensionType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "PivotRowLayoutType": { + "title": "Enumeration: PivotRowLayoutType", + "component": "PivotRowLayoutType", + "file": "enumerations/PivotRowLayoutType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "PivotSummaryPosition": { + "title": "Enumeration: PivotSummaryPosition", + "component": "PivotSummaryPosition", + "file": "enumerations/PivotSummaryPosition.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "RelativePosition": { + "title": "Enumeration: RelativePosition", + "component": "RelativePosition", + "file": "enumerations/RelativePosition.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "RelativePositionStrategy": { + "title": "Enumeration: RelativePositionStrategy", + "component": "RelativePositionStrategy", + "file": "enumerations/RelativePositionStrategy.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "RowPinningPosition": { + "title": "Enumeration: RowPinningPosition", + "component": "RowPinningPosition", + "file": "enumerations/RowPinningPosition.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "ScrollDirection": { + "title": "Enumeration: ScrollDirection", + "component": "ScrollDirection", + "file": "enumerations/ScrollDirection.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "SortingDirection": { + "title": "Enumeration: SortingDirection", + "component": "SortingDirection", + "file": "enumerations/SortingDirection.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "SplitterType": { + "title": "Enumeration: SplitterType", + "component": "SplitterType", + "file": "enumerations/SplitterType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "TransactionEventOrigin": { + "title": "Enumeration: TransactionEventOrigin", + "component": "TransactionEventOrigin", + "file": "enumerations/TransactionEventOrigin.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "TransactionType": { + "title": "Enumeration: TransactionType", + "component": "TransactionType", + "file": "enumerations/TransactionType.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "TRANSACTION_TYPE": { + "title": "Enumeration: TRANSACTION\\_TYPE", + "component": "TRANSACTION\\_TYPE", + "file": "enumerations/TRANSACTION_TYPE.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction-factory.service.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "VerticalAlignment": { + "title": "Enumeration: VerticalAlignment", + "component": "VerticalAlignment", + "file": "enumerations/VerticalAlignment.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "WEEKDAYS": { + "title": "Enumeration: WEEKDAYS", + "component": "WEEKDAYS", + "file": "enumerations/WEEKDAYS.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/enums.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-" + }, + "areSameMonth": { + "title": "Function: areSameMonth()", + "component": "areSameMonth()", + "file": "functions/areSameMonth.md", + "type": "function", + "keywords": [], + "summary": "> **areSameMonth**(`firstMonth`, `secondMonth`): `boolean`" + }, + "calendarRange": { + "title": "Function: calendarRange()", + "component": "calendarRange()", + "file": "functions/calendarRange.md", + "type": "function", + "keywords": [], + "summary": "> **calendarRange**(`options`): `Generator`\\<[`CalendarDay`](../classes/CalendarDay.md), `void`, `unknown`\\>" + }, + "changei18n": { + "title": "Function: changei18n()", + "component": "changei18n()", + "file": "functions/changei18n.md", + "type": "function", + "keywords": [], + "summary": "> **changei18n**(`resourceStrings`): `void`" + }, + "clearAll": { + "title": "Function: clearAll()", + "component": "clearAll()", + "file": "functions/clearAll.md", + "type": "function", + "keywords": [], + "summary": "> **clearAll**(`withLogging?`): `void`" + }, + "clearMeasures": { + "title": "Function: clearMeasures()", + "component": "clearMeasures()", + "file": "functions/clearMeasures.md", + "type": "function", + "keywords": [], + "summary": "> **clearMeasures**(`name?`, `withLogging?`): `void`" + }, + "columnFieldPath": { + "title": "Function: columnFieldPath()", + "component": "columnFieldPath()", + "file": "functions/columnFieldPath.md", + "type": "function", + "keywords": [], + "summary": "> **columnFieldPath**(`path?`): `string`[]" + }, + "comboIgnoreDiacriticsFilter": { + "title": "Function: comboIgnoreDiacriticsFilter()", + "component": "comboIgnoreDiacriticsFilter()", + "file": "functions/comboIgnoreDiacriticsFilter.md", + "type": "function", + "keywords": [], + "summary": "> **comboIgnoreDiacriticsFilter**\\<`T`\\>(`collection`, `searchValue`, `filteringOptions`): `T`[]" + }, + "copyDescriptors": { + "title": "Function: copyDescriptors()", + "component": "copyDescriptors()", + "file": "functions/copyDescriptors.md", + "type": "function", + "keywords": [], + "summary": "> **copyDescriptors**(`obj`): `any`" + }, + "first": { + "title": "Function: first()", + "component": "first()", + "file": "functions/first.md", + "type": "function", + "keywords": [], + "summary": "> **first**\\<`T`\\>(`arr`): `T`" + }, + "formatToParts": { + "title": "Function: formatToParts()", + "component": "formatToParts()", + "file": "functions/formatToParts.md", + "type": "function", + "keywords": [], + "summary": "> **formatToParts**(`date`, `locale`, `options`, `parts`): `Record`\\<`string`, `any`\\>" + }, + "generateExpressionsList": { + "title": "Function: generateExpressionsList()", + "component": "generateExpressionsList()", + "file": "functions/generateExpressionsList.md", + "type": "function", + "keywords": [], + "summary": "> **generateExpressionsList**(`expressions`, `operator`, `expressionsUIs`): `void`" + }, + "generateMonth": { + "title": "Function: generateMonth()", + "component": "generateMonth()", + "file": "functions/generateMonth.md", + "type": "function", + "keywords": [], + "summary": "> **generateMonth**(`value`, `firstWeekDay`): `Generator`\\<[`CalendarDay`](../classes/CalendarDay.md), `void`, `unknown`\\>" + }, + "getClosestActiveDate": { + "title": "Function: getClosestActiveDate()", + "component": "getClosestActiveDate()", + "file": "functions/getClosestActiveDate.md", + "type": "function", + "keywords": [], + "summary": "> **getClosestActiveDate**(`start`, `delta`, `disabled?`): [`CalendarDay`](../classes/CalendarDay.md)" + }, + "getComponentCssSizeVar": { + "title": "Function: getComponentCssSizeVar()", + "component": "getComponentCssSizeVar()", + "file": "functions/getComponentCssSizeVar.md", + "type": "function", + "keywords": [], + "summary": "> **getComponentCssSizeVar**(`size`): `\"var(--ig-size, var(--ig-size-small))\"` \\| `\"var(--ig-size, var(--ig-size-medium))\"` \\| `\"var(--ig-size, var(--ig-size-large))\"`" + }, + "getComponentSize": { + "title": "Function: getComponentSize()", + "component": "getComponentSize()", + "file": "functions/getComponentSize.md", + "type": "function", + "keywords": [], + "summary": "> **getComponentSize**(`el`): `string`" + }, + "getComponentTheme": { + "title": "Function: getComponentTheme()", + "component": "getComponentTheme()", + "file": "functions/getComponentTheme.md", + "type": "function", + "keywords": [], + "summary": "> **getComponentTheme**(`el`): [`IgxTheme`](../type-aliases/IgxTheme.md)" + }, + "getCurrentResourceStrings": { + "title": "Function: getCurrentResourceStrings()", + "component": "getCurrentResourceStrings()", + "file": "functions/getCurrentResourceStrings.md", + "type": "function", + "keywords": [], + "summary": "> **getCurrentResourceStrings**\\<`T`\\>(`defaultEN`, `init?`, `locale?`): `T`" + }, + "getHierarchy": { + "title": "Function: getHierarchy()", + "component": "getHierarchy()", + "file": "functions/getHierarchy.md", + "type": "function", + "keywords": [], + "summary": "> **getHierarchy**(`gRow`): [`IGroupByKey`](../interfaces/IGroupByKey.md)[]" + }, + "getMeasures": { + "title": "Function: getMeasures()", + "component": "getMeasures()", + "file": "functions/getMeasures.md", + "type": "function", + "keywords": [], + "summary": "> **getMeasures**(`name?`): `PerformanceEntryList`" + }, + "getNextActiveDate": { + "title": "Function: getNextActiveDate()", + "component": "getNextActiveDate()", + "file": "functions/getNextActiveDate.md", + "type": "function", + "keywords": [], + "summary": "> **getNextActiveDate**(`start`, `disabled?`): [`CalendarDay`](../classes/CalendarDay.md)" + }, + "getPreviousActiveDate": { + "title": "Function: getPreviousActiveDate()", + "component": "getPreviousActiveDate()", + "file": "functions/getPreviousActiveDate.md", + "type": "function", + "keywords": [], + "summary": "> **getPreviousActiveDate**(`start`, `disabled?`): [`CalendarDay`](../classes/CalendarDay.md)" + }, + "getUUID": { + "title": "Function: getUUID()", + "component": "getUUID()", + "file": "functions/getUUID.md", + "type": "function", + "keywords": [], + "summary": "> **getUUID**(): `` `${string}-${string}-${string}-${string}-${string}` ``" + }, + "getYearRange": { + "title": "Function: getYearRange()", + "component": "getYearRange()", + "file": "functions/getYearRange.md", + "type": "function", + "keywords": [], + "summary": "> **getYearRange**(`current`, `range`): `object`" + }, + "intoChunks": { + "title": "Function: intoChunks()", + "component": "intoChunks()", + "file": "functions/intoChunks.md", + "type": "function", + "keywords": [], + "summary": "> **intoChunks**\\<`T`\\>(`arr`, `size`): `Generator`\\<`T`[], `void`, `unknown`\\>" + }, + "isConstructor": { + "title": "Function: isConstructor()", + "component": "isConstructor()", + "file": "functions/isConstructor.md", + "type": "function", + "keywords": [], + "summary": "> **isConstructor**(`ref`): `boolean`" + }, + "isDateInRanges": { + "title": "Function: isDateInRanges()", + "component": "isDateInRanges()", + "file": "functions/isDateInRanges.md", + "type": "function", + "keywords": [], + "summary": "> **isDateInRanges**(`date`, `ranges`): `boolean`" + }, + "isHierarchyMatch": { + "title": "Function: isHierarchyMatch()", + "component": "isHierarchyMatch()", + "file": "functions/isHierarchyMatch.md", + "type": "function", + "keywords": [], + "summary": "> **isHierarchyMatch**(`h1`, `h2`, `expressions`): `boolean`" + }, + "isLeap": { + "title": "Function: isLeap()", + "component": "isLeap()", + "file": "functions/isLeap.md", + "type": "function", + "keywords": [], + "summary": "> **isLeap**(`year`): `boolean`" + }, + "isNextMonth": { + "title": "Function: isNextMonth()", + "component": "isNextMonth()", + "file": "functions/isNextMonth.md", + "type": "function", + "keywords": [], + "summary": "> **isNextMonth**(`target`, `origin`): `boolean`" + }, + "isPreviousMonth": { + "title": "Function: isPreviousMonth()", + "component": "isPreviousMonth()", + "file": "functions/isPreviousMonth.md", + "type": "function", + "keywords": [], + "summary": "> **isPreviousMonth**(`target`, `origin`): `boolean`" + }, + "isTree": { + "title": "Function: isTree()", + "component": "isTree()", + "file": "functions/isTree.md", + "type": "function", + "keywords": [], + "summary": "> **isTree**(`entry`): `entry is IExpressionTree`" + }, + "last": { + "title": "Function: last()", + "component": "last()", + "file": "functions/last.md", + "type": "function", + "keywords": [], + "summary": "> **last**\\<`T`\\>(`arr`): `T`" + }, + "modulo": { + "title": "Function: modulo()", + "component": "modulo()", + "file": "functions/modulo.md", + "type": "function", + "keywords": [], + "summary": "> **modulo**(`n`, `d`): `number`" + }, + "monthRange": { + "title": "Function: monthRange()", + "component": "monthRange()", + "file": "functions/monthRange.md", + "type": "function", + "keywords": [], + "summary": "> **monthRange**(`year`, `month`): `number`[]" + }, + "normalizeURI": { + "title": "Function: normalizeURI()", + "component": "normalizeURI()", + "file": "functions/normalizeURI.md", + "type": "function", + "keywords": [], + "summary": "> **normalizeURI**(`path`): `string`" + }, + "notifyChanges": { + "title": "Function: notifyChanges()", + "component": "notifyChanges()", + "file": "functions/notifyChanges.md", + "type": "function", + "keywords": [], + "summary": "> **notifyChanges**(`repaint?`): (`_`, `key`, `propDesc?`) => `any`" + }, + "onResourceChangeHandle": { + "title": "Function: onResourceChangeHandle()", + "component": "onResourceChangeHandle()", + "file": "functions/onResourceChangeHandle.md", + "type": "function", + "keywords": [], + "summary": "> **onResourceChangeHandle**(`destroyObj`, `callback`, `context`): `void`" + }, + "provideIgniteIntl": { + "title": "Function: provideIgniteIntl()", + "component": "provideIgniteIntl()", + "file": "functions/provideIgniteIntl.md", + "type": "function", + "keywords": [], + "summary": "> **provideIgniteIntl**(): `Provider`[]" + }, + "range": { + "title": "Function: range()", + "component": "range()", + "file": "functions/range.md", + "type": "function", + "keywords": [], + "summary": "> **range**(`start?`, `stop`, `step?`): `any`[]" + }, + "recreateExpression": { + "title": "Function: recreateExpression()", + "component": "recreateExpression()", + "file": "functions/recreateExpression.md", + "type": "function", + "keywords": [], + "summary": "> **recreateExpression**(`expression`, `fields`): [`IFilteringExpression`](../interfaces/IFilteringExpression.md)" + }, + "recreateTree": { + "title": "Function: recreateTree()", + "component": "recreateTree()", + "file": "functions/recreateTree.md", + "type": "function", + "keywords": [], + "summary": "> **recreateTree**(`tree`, `entities`, `isRoot?`): [`IExpressionTree`](../interfaces/IExpressionTree.md)" + }, + "recreateTreeFromFields": { + "title": "Function: recreateTreeFromFields()", + "component": "recreateTreeFromFields()", + "file": "functions/recreateTreeFromFields.md", + "type": "function", + "keywords": [], + "summary": "> **recreateTreeFromFields**(`tree`, `fields`): [`IExpressionTree`](../interfaces/IExpressionTree.md)" + }, + "registerI18n": { + "title": "Function: registerI18n()", + "component": "registerI18n()", + "file": "functions/registerI18n.md", + "type": "function", + "keywords": [], + "summary": "> **registerI18n**(`resourceStrings`, `locale`): `void`" + }, + "rem": { + "title": "Function: rem()", + "component": "rem()", + "file": "functions/rem.md", + "type": "function", + "keywords": [], + "summary": "> **rem**(`value`): `number`" + }, + "startMeasure": { + "title": "Function: startMeasure()", + "component": "startMeasure()", + "file": "functions/startMeasure.md", + "type": "function", + "keywords": [], + "summary": "> **startMeasure**(`name`, `withLogging?`): () => `void`" + }, + "toCalendarDay": { + "title": "Function: toCalendarDay()", + "component": "toCalendarDay()", + "file": "functions/toCalendarDay.md", + "type": "function", + "keywords": [], + "summary": "> **toCalendarDay**(`date`): [`CalendarDay`](../classes/CalendarDay.md)" + }, + "WatchColumnChanges": { + "title": "Function: WatchColumnChanges()", + "component": "WatchColumnChanges()", + "file": "functions/WatchColumnChanges.md", + "type": "function", + "keywords": [], + "summary": "> **WatchColumnChanges**(): `PropertyDecorator`" + }, + "weekDay": { + "title": "Function: weekDay()", + "component": "weekDay()", + "file": "functions/weekDay.md", + "type": "function", + "keywords": [], + "summary": "> **weekDay**(`year`, `month`, `day`): `number`" + }, + "Action": { + "title": "Interface: Action\\<T\\>", + "component": "Action\\<T\\>", + "file": "interfaces/Action.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "AnimationPlayer": { + "title": "Interface: AnimationPlayer", + "component": "AnimationPlayer", + "file": "interfaces/AnimationPlayer.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "AnimationService": { + "title": "Interface: AnimationService", + "component": "AnimationService", + "file": "interfaces/AnimationService.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "ArrowFit": { + "title": "Interface: ArrowFit", + "component": "ArrowFit", + "file": "interfaces/ArrowFit.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781" + }, + "AutocompleteOverlaySettings": { + "title": "Interface: AutocompleteOverlaySettings", + "component": "AutocompleteOverlaySettings", + "file": "interfaces/AutocompleteOverlaySettings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "AutocompleteSelectionChangingEventArgs": { + "title": "Interface: AutocompleteSelectionChangingEventArgs", + "component": "AutocompleteSelectionChangingEventArgs", + "file": "interfaces/AutocompleteSelectionChangingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "BannerCancelEventArgs": { + "title": "Interface: BannerCancelEventArgs", + "component": "BannerCancelEventArgs", + "file": "interfaces/BannerCancelEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "BannerEventArgs": { + "title": "Interface: BannerEventArgs", + "component": "BannerEventArgs", + "file": "interfaces/BannerEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pro" + }, + "CancelableBrowserEventArgs": { + "title": "Interface: CancelableBrowserEventArgs", + "component": "CancelableBrowserEventArgs", + "file": "interfaces/CancelableBrowserEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "CancelableEventArgs": { + "title": "Interface: CancelableEventArgs", + "component": "CancelableEventArgs", + "file": "interfaces/CancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "CarouselAnimationSettings": { + "title": "Interface: CarouselAnimationSettings", + "component": "CarouselAnimationSettings", + "file": "interfaces/CarouselAnimationSettings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "CellType": { + "title": "Interface: CellType", + "component": "CellType", + "file": "interfaces/CellType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "ColumnGroupsCache": { + "title": "Interface: ColumnGroupsCache", + "component": "ColumnGroupsCache", + "file": "interfaces/ColumnGroupsCache.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "ColumnType": { + "title": "Interface: ColumnType", + "component": "ColumnType", + "file": "interfaces/ColumnType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "CustomDateRange": { + "title": "Interface: CustomDateRange", + "component": "CustomDateRange", + "file": "interfaces/CustomDateRange.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ig" + }, + "DatePartDeltas": { + "title": "Interface: DatePartDeltas", + "component": "DatePartDeltas", + "file": "interfaces/DatePartDeltas.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "DateRange": { + "title": "Interface: DateRange", + "component": "DateRange", + "file": "interfaces/DateRange.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ig" + }, + "DateRangeDescriptor": { + "title": "Interface: DateRangeDescriptor", + "component": "DateRangeDescriptor", + "file": "interfaces/DateRangeDescriptor.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "DimensionValueType": { + "title": "Interface: DimensionValueType", + "component": "DimensionValueType", + "file": "interfaces/DimensionValueType.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "EntityType": { + "title": "Interface: EntityType", + "component": "EntityType", + "file": "interfaces/EntityType.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "FamilyMeta": { + "title": "Interface: FamilyMeta", + "component": "FamilyMeta", + "file": "interfaces/FamilyMeta.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-" + }, + "FieldType": { + "title": "Interface: FieldType", + "component": "FieldType", + "file": "interfaces/FieldType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "FlatGridType": { + "title": "Interface: FlatGridType", + "component": "FlatGridType", + "file": "interfaces/FlatGridType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:989](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "GridSelectionRange": { + "title": "Interface: GridSelectionRange", + "component": "GridSelectionRange", + "file": "interfaces/GridSelectionRange.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "GridServiceType": { + "title": "Interface: GridServiceType", + "component": "GridServiceType", + "file": "interfaces/GridServiceType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:329](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "GridSVGIcon": { + "title": "Interface: GridSVGIcon", + "component": "GridSVGIcon", + "file": "interfaces/GridSVGIcon.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1095](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "GridType": { + "title": "Interface: GridType", + "component": "GridType", + "file": "interfaces/GridType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "GridTypeBase": { + "title": "Interface: GridTypeBase", + "component": "GridTypeBase", + "file": "interfaces/GridTypeBase.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "HeaderType": { + "title": "Interface: HeaderType", + "component": "HeaderType", + "file": "interfaces/HeaderType.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "HierarchicalGridType": { + "title": "Interface: HierarchicalGridType", + "component": "HierarchicalGridType", + "file": "interfaces/HierarchicalGridType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "HierarchicalTransactionService": { + "title": "Interface: HierarchicalTransactionService\\<T, S\\>", + "component": "HierarchicalTransactionService\\<T, S\\>", + "file": "interfaces/HierarchicalTransactionService.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IAccordionCancelableEventArgs": { + "title": "Interface: IAccordionCancelableEventArgs", + "component": "IAccordionCancelableEventArgs", + "file": "interfaces/IAccordionCancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IAccordionEventArgs": { + "title": "Interface: IAccordionEventArgs", + "component": "IAccordionEventArgs", + "file": "interfaces/IAccordionEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IActiveHighlightInfo": { + "title": "Interface: IActiveHighlightInfo", + "component": "IActiveHighlightInfo", + "file": "interfaces/IActiveHighlightInfo.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IActiveNode": { + "title": "Interface: IActiveNode", + "component": "IActiveNode", + "file": "interfaces/IActiveNode.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IActiveNodeChangeEventArgs": { + "title": "Interface: IActiveNodeChangeEventArgs", + "component": "IActiveNodeChangeEventArgs", + "file": "interfaces/IActiveNodeChangeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:474](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IBaseCancelableBrowserEventArgs": { + "title": "Interface: IBaseCancelableBrowserEventArgs", + "component": "IBaseCancelableBrowserEventArgs", + "file": "interfaces/IBaseCancelableBrowserEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "IBaseCancelableEventArgs": { + "title": "Interface: IBaseCancelableEventArgs", + "component": "IBaseCancelableEventArgs", + "file": "interfaces/IBaseCancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:429](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "IBaseChipEventArgs": { + "title": "Interface: IBaseChipEventArgs", + "component": "IBaseChipEventArgs", + "file": "interfaces/IBaseChipEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IBaseChipsAreaEventArgs": { + "title": "Interface: IBaseChipsAreaEventArgs", + "component": "IBaseChipsAreaEventArgs", + "file": "interfaces/IBaseChipsAreaEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IBaseEventArgs": { + "title": "Interface: IBaseEventArgs", + "component": "IBaseEventArgs", + "file": "interfaces/IBaseEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:414](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "IBaseSearchInfo": { + "title": "Interface: IBaseSearchInfo", + "component": "IBaseSearchInfo", + "file": "interfaces/IBaseSearchInfo.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd" + }, + "IButtonEventArgs": { + "title": "Interface: IButtonEventArgs", + "component": "IButtonEventArgs", + "file": "interfaces/IButtonEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167" + }, + "IButtonGroupEventArgs": { + "title": "Interface: IButtonGroupEventArgs", + "component": "IButtonGroupEventArgs", + "file": "interfaces/IButtonGroupEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "ICachedViewLoadedEventArgs": { + "title": "Interface: ICachedViewLoadedEventArgs", + "component": "ICachedViewLoadedEventArgs", + "file": "interfaces/ICachedViewLoadedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\\_outlet.directive.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da" + }, + "ICellPosition": { + "title": "Interface: ICellPosition", + "component": "ICellPosition", + "file": "interfaces/ICellPosition.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:364](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IChangeCheckboxEventArgs": { + "title": "Interface: IChangeCheckboxEventArgs", + "component": "IChangeCheckboxEventArgs", + "file": "interfaces/IChangeCheckboxEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IChangeProgressEventArgs": { + "title": "Interface: IChangeProgressEventArgs", + "component": "IChangeProgressEventArgs", + "file": "interfaces/IChangeProgressEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IChipClickEventArgs": { + "title": "Interface: IChipClickEventArgs", + "component": "IChipClickEventArgs", + "file": "interfaces/IChipClickEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IChipEnterDragAreaEventArgs": { + "title": "Interface: IChipEnterDragAreaEventArgs", + "component": "IChipEnterDragAreaEventArgs", + "file": "interfaces/IChipEnterDragAreaEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IChipKeyDownEventArgs": { + "title": "Interface: IChipKeyDownEventArgs", + "component": "IChipKeyDownEventArgs", + "file": "interfaces/IChipKeyDownEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IChipsAreaReorderEventArgs": { + "title": "Interface: IChipsAreaReorderEventArgs", + "component": "IChipsAreaReorderEventArgs", + "file": "interfaces/IChipsAreaReorderEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IChipsAreaSelectEventArgs": { + "title": "Interface: IChipsAreaSelectEventArgs", + "component": "IChipsAreaSelectEventArgs", + "file": "interfaces/IChipsAreaSelectEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IChipSelectEventArgs": { + "title": "Interface: IChipSelectEventArgs", + "component": "IChipSelectEventArgs", + "file": "interfaces/IChipSelectEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IClipboardOptions": { + "title": "Interface: IClipboardOptions", + "component": "IClipboardOptions", + "file": "interfaces/IClipboardOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IColumnEditorOptions": { + "title": "Interface: IColumnEditorOptions", + "component": "IColumnEditorOptions", + "file": "interfaces/IColumnEditorOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IColumnExportingEventArgs": { + "title": "Interface: IColumnExportingEventArgs", + "component": "IColumnExportingEventArgs", + "file": "interfaces/IColumnExportingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b" + }, + "IColumnInfo": { + "title": "Interface: IColumnInfo", + "component": "IColumnInfo", + "file": "interfaces/IColumnInfo.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IColumnList": { + "title": "Interface: IColumnList", + "component": "IColumnList", + "file": "interfaces/IColumnList.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IColumnMovingEndEventArgs": { + "title": "Interface: IColumnMovingEndEventArgs", + "component": "IColumnMovingEndEventArgs", + "file": "interfaces/IColumnMovingEndEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:325](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnMovingEventArgs": { + "title": "Interface: IColumnMovingEventArgs", + "component": "IColumnMovingEventArgs", + "file": "interfaces/IColumnMovingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnMovingStartEventArgs": { + "title": "Interface: IColumnMovingStartEventArgs", + "component": "IColumnMovingStartEventArgs", + "file": "interfaces/IColumnMovingStartEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnPipeArgs": { + "title": "Interface: IColumnPipeArgs", + "component": "IColumnPipeArgs", + "file": "interfaces/IColumnPipeArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IColumnResizeEventArgs": { + "title": "Interface: IColumnResizeEventArgs", + "component": "IColumnResizeEventArgs", + "file": "interfaces/IColumnResizeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnResizingEventArgs": { + "title": "Interface: IColumnResizingEventArgs", + "component": "IColumnResizingEventArgs", + "file": "interfaces/IColumnResizingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnSelectionEventArgs": { + "title": "Interface: IColumnSelectionEventArgs", + "component": "IColumnSelectionEventArgs", + "file": "interfaces/IColumnSelectionEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:243](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnSelectionState": { + "title": "Interface: IColumnSelectionState", + "component": "IColumnSelectionState", + "file": "interfaces/IColumnSelectionState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "IColumnState": { + "title": "Interface: IColumnState", + "component": "IColumnState", + "file": "interfaces/IColumnState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IColumnToggledEventArgs": { + "title": "Interface: IColumnToggledEventArgs", + "component": "IColumnToggledEventArgs", + "file": "interfaces/IColumnToggledEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:466](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnVisibilityChangedEventArgs": { + "title": "Interface: IColumnVisibilityChangedEventArgs", + "component": "IColumnVisibilityChangedEventArgs", + "file": "interfaces/IColumnVisibilityChangedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IColumnVisibilityChangingEventArgs": { + "title": "Interface: IColumnVisibilityChangingEventArgs", + "component": "IColumnVisibilityChangingEventArgs", + "file": "interfaces/IColumnVisibilityChangingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:548](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IComboFilteringOptions": { + "title": "Interface: IComboFilteringOptions", + "component": "IComboFilteringOptions", + "file": "interfaces/IComboFilteringOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IComboItemAdditionEvent": { + "title": "Interface: IComboItemAdditionEvent", + "component": "IComboItemAdditionEvent", + "file": "interfaces/IComboItemAdditionEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IComboSearchInputEventArgs": { + "title": "Interface: IComboSearchInputEventArgs", + "component": "IComboSearchInputEventArgs", + "file": "interfaces/IComboSearchInputEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IComboSelectionChangedEventArgs": { + "title": "Interface: IComboSelectionChangedEventArgs", + "component": "IComboSelectionChangedEventArgs", + "file": "interfaces/IComboSelectionChangedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IComboSelectionChangingEventArgs": { + "title": "Interface: IComboSelectionChangingEventArgs", + "component": "IComboSelectionChangingEventArgs", + "file": "interfaces/IComboSelectionChangingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IconFamily": { + "title": "Interface: IconFamily", + "component": "IconFamily", + "file": "interfaces/IconFamily.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-" + }, + "IconMeta": { + "title": "Interface: IconMeta", + "component": "IconMeta", + "file": "interfaces/IconMeta.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-" + }, + "ICsvExportEndedEventArgs": { + "title": "Interface: ICsvExportEndedEventArgs", + "component": "ICsvExportEndedEventArgs", + "file": "interfaces/ICsvExportEndedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "IDataCloneStrategy": { + "title": "Interface: IDataCloneStrategy", + "component": "IDataCloneStrategy", + "file": "interfaces/IDataCloneStrategy.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IDateParts": { + "title": "Interface: IDateParts", + "component": "IDateParts", + "file": "interfaces/IDateParts.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IDatePickerValidationFailedEventArgs": { + "title": "Interface: IDatePickerValidationFailedEventArgs", + "component": "IDatePickerValidationFailedEventArgs", + "file": "interfaces/IDatePickerValidationFailedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IDialogCancellableEventArgs": { + "title": "Interface: IDialogCancellableEventArgs", + "component": "IDialogCancellableEventArgs", + "file": "interfaces/IDialogCancellableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:577](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IDialogEventArgs": { + "title": "Interface: IDialogEventArgs", + "component": "IDialogEventArgs", + "file": "interfaces/IDialogEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IDimensionsChange": { + "title": "Interface: IDimensionsChange", + "component": "IDimensionsChange", + "file": "interfaces/IDimensionsChange.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IDragBaseEventArgs": { + "title": "Interface: IDragBaseEventArgs", + "component": "IDragBaseEventArgs", + "file": "interfaces/IDragBaseEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IDragCustomTransitionArgs": { + "title": "Interface: IDragCustomTransitionArgs", + "component": "IDragCustomTransitionArgs", + "file": "interfaces/IDragCustomTransitionArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IDragGhostBaseEventArgs": { + "title": "Interface: IDragGhostBaseEventArgs", + "component": "IDragGhostBaseEventArgs", + "file": "interfaces/IDragGhostBaseEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IDragMoveEventArgs": { + "title": "Interface: IDragMoveEventArgs", + "component": "IDragMoveEventArgs", + "file": "interfaces/IDragMoveEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IDragStartEventArgs": { + "title": "Interface: IDragStartEventArgs", + "component": "IDragStartEventArgs", + "file": "interfaces/IDragStartEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e3" + }, + "IDropBaseEventArgs": { + "title": "Interface: IDropBaseEventArgs", + "component": "IDropBaseEventArgs", + "file": "interfaces/IDropBaseEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IDropDownNavigationDirective": { + "title": "Interface: IDropDownNavigationDirective", + "component": "IDropDownNavigationDirective", + "file": "interfaces/IDropDownNavigationDirective.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IDropDroppedEventArgs": { + "title": "Interface: IDropDroppedEventArgs", + "component": "IDropDroppedEventArgs", + "file": "interfaces/IDropDroppedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IDropStrategy": { + "title": "Interface: IDropStrategy", + "component": "IDropStrategy", + "file": "interfaces/IDropStrategy.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IExcelExportEndedEventArgs": { + "title": "Interface: IExcelExportEndedEventArgs", + "component": "IExcelExportEndedEventArgs", + "file": "interfaces/IExcelExportEndedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d" + }, + "IExpansionPanelCancelableEventArgs": { + "title": "Interface: IExpansionPanelCancelableEventArgs", + "component": "IExpansionPanelCancelableEventArgs", + "file": "interfaces/IExpansionPanelCancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IExpansionPanelEventArgs": { + "title": "Interface: IExpansionPanelEventArgs", + "component": "IExpansionPanelEventArgs", + "file": "interfaces/IExpansionPanelEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "IExportRecord": { + "title": "Interface: IExportRecord", + "component": "IExportRecord", + "file": "interfaces/IExportRecord.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IExpressionTree": { + "title": "Interface: IExpressionTree", + "component": "IExpressionTree", + "file": "interfaces/IExpressionTree.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IFieldEditorOptions": { + "title": "Interface: IFieldEditorOptions", + "component": "IFieldEditorOptions", + "file": "interfaces/IFieldEditorOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IFieldPipeArgs": { + "title": "Interface: IFieldPipeArgs", + "component": "IFieldPipeArgs", + "file": "interfaces/IFieldPipeArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IFieldValidationState": { + "title": "Interface: IFieldValidationState", + "component": "IFieldValidationState", + "file": "interfaces/IFieldValidationState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:322](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IFilteringEventArgs": { + "title": "Interface: IFilteringEventArgs", + "component": "IFilteringEventArgs", + "file": "interfaces/IFilteringEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:524](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IFilteringExpression": { + "title": "Interface: IFilteringExpression", + "component": "IFilteringExpression", + "file": "interfaces/IFilteringExpression.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IFilteringExpressionsTree": { + "title": "Interface: IFilteringExpressionsTree", + "component": "IFilteringExpressionsTree", + "file": "interfaces/IFilteringExpressionsTree.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IFilteringOperation": { + "title": "Interface: IFilteringOperation", + "component": "IFilteringOperation", + "file": "interfaces/IFilteringOperation.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159" + }, + "IFilteringState": { + "title": "Interface: IFilteringState", + "component": "IFilteringState", + "file": "interfaces/IFilteringState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IFilteringStrategy": { + "title": "Interface: IFilteringStrategy", + "component": "IFilteringStrategy", + "file": "interfaces/IFilteringStrategy.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IFormattedParts": { + "title": "Interface: IFormattedParts", + "component": "IFormattedParts", + "file": "interfaces/IFormattedParts.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IFormattingOptions": { + "title": "Interface: IFormattingOptions", + "component": "IFormattingOptions", + "file": "interfaces/IFormattingOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IFormattingViews": { + "title": "Interface: IFormattingViews", + "component": "IFormattingViews", + "file": "interfaces/IFormattingViews.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "IForOfDataChangeEventArgs": { + "title": "~~Interface: IForOfDataChangeEventArgs~~", + "component": "~~Interface: IForOfDataChangeEventArgs~~", + "file": "interfaces/IForOfDataChangeEventArgs.md", + "type": "unknown", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:1584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IForOfDataChangingEventArgs": { + "title": "~~Interface: IForOfDataChangingEventArgs~~", + "component": "~~Interface: IForOfDataChangingEventArgs~~", + "file": "interfaces/IForOfDataChangingEventArgs.md", + "type": "unknown", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:1579](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IForOfState": { + "title": "Interface: IForOfState", + "component": "IForOfState", + "file": "interfaces/IForOfState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\\_of.directive.ts:1571](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "IgcCalendarBaseEventMap": { + "title": "Interface: IgcCalendarBaseEventMap", + "component": "IgcCalendarBaseEventMap", + "file": "interfaces/IgcCalendarBaseEventMap.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ig" + }, + "IGridCellEventArgs": { + "title": "Interface: IGridCellEventArgs", + "component": "IGridCellEventArgs", + "file": "interfaces/IGridCellEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IGridClipboardEvent": { + "title": "Interface: IGridClipboardEvent", + "component": "IGridClipboardEvent", + "file": "interfaces/IGridClipboardEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "IGridContextMenuEventArgs": { + "title": "Interface: IGridContextMenuEventArgs", + "component": "IGridContextMenuEventArgs", + "file": "interfaces/IGridContextMenuEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IGridCreatedEventArgs": { + "title": "Interface: IGridCreatedEventArgs", + "component": "IGridCreatedEventArgs", + "file": "interfaces/IGridCreatedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IGridDataBindable": { + "title": "Interface: IGridDataBindable", + "component": "IGridDataBindable", + "file": "interfaces/IGridDataBindable.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IGridEditDoneEventArgs": { + "title": "Interface: IGridEditDoneEventArgs", + "component": "IGridEditDoneEventArgs", + "file": "interfaces/IGridEditDoneEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IGridEditEventArgs": { + "title": "Interface: IGridEditEventArgs", + "component": "IGridEditEventArgs", + "file": "interfaces/IGridEditEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IGridFormGroupCreatedEventArgs": { + "title": "Interface: IGridFormGroupCreatedEventArgs", + "component": "IGridFormGroupCreatedEventArgs", + "file": "interfaces/IGridFormGroupCreatedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IGridGroupingStrategy": { + "title": "Interface: IGridGroupingStrategy", + "component": "IGridGroupingStrategy", + "file": "interfaces/IGridGroupingStrategy.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IGridKeydownEventArgs": { + "title": "Interface: IGridKeydownEventArgs", + "component": "IGridKeydownEventArgs", + "file": "interfaces/IGridKeydownEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IGridMergeStrategy": { + "title": "Interface: IGridMergeStrategy", + "component": "IGridMergeStrategy", + "file": "interfaces/IGridMergeStrategy.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "IGridRowEventArgs": { + "title": "Interface: IGridRowEventArgs", + "component": "IGridRowEventArgs", + "file": "interfaces/IGridRowEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IGridScrollEventArgs": { + "title": "Interface: IGridScrollEventArgs", + "component": "IGridScrollEventArgs", + "file": "interfaces/IGridScrollEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IGridSortingStrategy": { + "title": "Interface: IGridSortingStrategy", + "component": "IGridSortingStrategy", + "file": "interfaces/IGridSortingStrategy.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IGridState": { + "title": "Interface: IGridState", + "component": "IGridState", + "file": "interfaces/IGridState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IGridStateCollection": { + "title": "Interface: IGridStateCollection", + "component": "IGridStateCollection", + "file": "interfaces/IGridStateCollection.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IGridStateOptions": { + "title": "Interface: IGridStateOptions", + "component": "IGridStateOptions", + "file": "interfaces/IGridStateOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IGridToolbarExportEventArgs": { + "title": "Interface: IGridToolbarExportEventArgs", + "component": "IGridToolbarExportEventArgs", + "file": "interfaces/IGridToolbarExportEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IGridValidationState": { + "title": "Interface: IGridValidationState", + "component": "IGridValidationState", + "file": "interfaces/IGridValidationState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IGridValidationStatusEventArgs": { + "title": "Interface: IGridValidationStatusEventArgs", + "component": "IGridValidationStatusEventArgs", + "file": "interfaces/IGridValidationStatusEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IGroupByExpandState": { + "title": "Interface: IGroupByExpandState", + "component": "IGroupByExpandState", + "file": "interfaces/IGroupByExpandState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IGroupByKey": { + "title": "Interface: IGroupByKey", + "component": "IGroupByKey", + "file": "interfaces/IGroupByKey.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IGroupByRecord": { + "title": "Interface: IGroupByRecord", + "component": "IGroupByRecord", + "file": "interfaces/IGroupByRecord.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IGroupByResult": { + "title": "Interface: IGroupByResult", + "component": "IGroupByResult", + "file": "interfaces/IGroupByResult.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IGroupingDoneEventArgs": { + "title": "Interface: IGroupingDoneEventArgs", + "component": "IGroupingDoneEventArgs", + "file": "interfaces/IGroupingDoneEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IGroupingExpression": { + "title": "Interface: IGroupingExpression", + "component": "IGroupingExpression", + "file": "interfaces/IGroupingExpression.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-expression.interface.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a" + }, + "IGroupingState": { + "title": "Interface: IGroupingState", + "component": "IGroupingState", + "file": "interfaces/IGroupingState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "IgxAddRowParent": { + "title": "Interface: IgxAddRowParent", + "component": "IgxAddRowParent", + "file": "interfaces/IgxAddRowParent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IgxCellTemplateContext": { + "title": "Interface: IgxCellTemplateContext", + "component": "IgxCellTemplateContext", + "file": "interfaces/IgxCellTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxColumnTemplateContext": { + "title": "Interface: IgxColumnTemplateContext", + "component": "IgxColumnTemplateContext", + "file": "interfaces/IgxColumnTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxDateTimeEditorEventArgs": { + "title": "Interface: IgxDateTimeEditorEventArgs", + "component": "IgxDateTimeEditorEventArgs", + "file": "interfaces/IgxDateTimeEditorEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8b" + }, + "IgxDragCustomEventDetails": { + "title": "Interface: IgxDragCustomEventDetails", + "component": "IgxDragCustomEventDetails", + "file": "interfaces/IgxDragCustomEventDetails.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e33" + }, + "IgxExpansionPanelBase": { + "title": "Interface: IgxExpansionPanelBase", + "component": "IgxExpansionPanelBase", + "file": "interfaces/IgxExpansionPanelBase.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e" + }, + "IgxExporterEvent": { + "title": "Interface: IgxExporterEvent", + "component": "IgxExporterEvent", + "file": "interfaces/IgxExporterEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336" + }, + "IgxFilterItem": { + "title": "Interface: IgxFilterItem", + "component": "IgxFilterItem", + "file": "interfaces/IgxFilterItem.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IgxGridEmptyTemplateContext": { + "title": "Interface: IgxGridEmptyTemplateContext", + "component": "IgxGridEmptyTemplateContext", + "file": "interfaces/IgxGridEmptyTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridHeaderTemplateContext": { + "title": "Interface: IgxGridHeaderTemplateContext", + "component": "IgxGridHeaderTemplateContext", + "file": "interfaces/IgxGridHeaderTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridMasterDetailContext": { + "title": "Interface: IgxGridMasterDetailContext", + "component": "IgxGridMasterDetailContext", + "file": "interfaces/IgxGridMasterDetailContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridPaginatorTemplateContext": { + "title": "Interface: IgxGridPaginatorTemplateContext", + "component": "IgxGridPaginatorTemplateContext", + "file": "interfaces/IgxGridPaginatorTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridRowDragGhostContext": { + "title": "Interface: IgxGridRowDragGhostContext", + "component": "IgxGridRowDragGhostContext", + "file": "interfaces/IgxGridRowDragGhostContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridRowEditActionsTemplateContext": { + "title": "Interface: IgxGridRowEditActionsTemplateContext", + "component": "IgxGridRowEditActionsTemplateContext", + "file": "interfaces/IgxGridRowEditActionsTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridRowEditTemplateContext": { + "title": "Interface: IgxGridRowEditTemplateContext", + "component": "IgxGridRowEditTemplateContext", + "file": "interfaces/IgxGridRowEditTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridRowEditTextTemplateContext": { + "title": "Interface: IgxGridRowEditTextTemplateContext", + "component": "IgxGridRowEditTextTemplateContext", + "file": "interfaces/IgxGridRowEditTextTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridRowTemplateContext": { + "title": "Interface: IgxGridRowTemplateContext", + "component": "IgxGridRowTemplateContext", + "file": "interfaces/IgxGridRowTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridTemplateContext": { + "title": "Interface: IgxGridTemplateContext", + "component": "IgxGridTemplateContext", + "file": "interfaces/IgxGridTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGridToolbarTemplateContext": { + "title": "Interface: IgxGridToolbarTemplateContext", + "component": "IgxGridToolbarTemplateContext", + "file": "interfaces/IgxGridToolbarTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IgxGroupByRowSelectorTemplateContext": { + "title": "Interface: IgxGroupByRowSelectorTemplateContext", + "component": "IgxGroupByRowSelectorTemplateContext", + "file": "interfaces/IgxGroupByRowSelectorTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGroupByRowSelectorTemplateDetails": { + "title": "Interface: IgxGroupByRowSelectorTemplateDetails", + "component": "IgxGroupByRowSelectorTemplateDetails", + "file": "interfaces/IgxGroupByRowSelectorTemplateDetails.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxGroupByRowTemplateContext": { + "title": "Interface: IgxGroupByRowTemplateContext", + "component": "IgxGroupByRowTemplateContext", + "file": "interfaces/IgxGroupByRowTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxHeadSelectorTemplateContext": { + "title": "Interface: IgxHeadSelectorTemplateContext", + "component": "IgxHeadSelectorTemplateContext", + "file": "interfaces/IgxHeadSelectorTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1202](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxHeadSelectorTemplateDetails": { + "title": "Interface: IgxHeadSelectorTemplateDetails", + "component": "IgxHeadSelectorTemplateDetails", + "file": "interfaces/IgxHeadSelectorTemplateDetails.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxIconLoadedEvent": { + "title": "Interface: IgxIconLoadedEvent", + "component": "IgxIconLoadedEvent", + "file": "interfaces/IgxIconLoadedEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/ig" + }, + "IgxPivotGridValueTemplateContext": { + "title": "Interface: IgxPivotGridValueTemplateContext", + "component": "IgxPivotGridValueTemplateContext", + "file": "interfaces/IgxPivotGridValueTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxRowSelectorTemplateContext": { + "title": "Interface: IgxRowSelectorTemplateContext", + "component": "IgxRowSelectorTemplateContext", + "file": "interfaces/IgxRowSelectorTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxRowSelectorTemplateDetails": { + "title": "Interface: IgxRowSelectorTemplateDetails", + "component": "IgxRowSelectorTemplateDetails", + "file": "interfaces/IgxRowSelectorTemplateDetails.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxSummaryResult": { + "title": "Interface: IgxSummaryResult", + "component": "IgxSummaryResult", + "file": "interfaces/IgxSummaryResult.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxSummaryTemplateContext": { + "title": "Interface: IgxSummaryTemplateContext", + "component": "IgxSummaryTemplateContext", + "file": "interfaces/IgxSummaryTemplateContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IgxTimePickerValidationFailedEventArgs": { + "title": "Interface: IgxTimePickerValidationFailedEventArgs", + "component": "IgxTimePickerValidationFailedEventArgs", + "file": "interfaces/IgxTimePickerValidationFailedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "IgxTree": { + "title": "Interface: IgxTree", + "component": "IgxTree", + "file": "interfaces/IgxTree.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "IgxTreeGridAPIService": { + "title": "Interface: IgxTreeGridAPIService", + "component": "IgxTreeGridAPIService", + "file": "interfaces/IgxTreeGridAPIService.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:415](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IgxTreeNode": { + "title": "Interface: IgxTreeNode\\<T\\>", + "component": "IgxTreeNode\\<T\\>", + "file": "interfaces/IgxTreeNode.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "IInputResourceStrings": { + "title": "Interface: IInputResourceStrings", + "component": "IInputResourceStrings", + "file": "interfaces/IInputResourceStrings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/proj" + }, + "IListItemClickEventArgs": { + "title": "Interface: IListItemClickEventArgs", + "component": "IListItemClickEventArgs", + "file": "interfaces/IListItemClickEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IListItemPanningEventArgs": { + "title": "Interface: IListItemPanningEventArgs", + "component": "IListItemPanningEventArgs", + "file": "interfaces/IListItemPanningEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IMaskEventArgs": { + "title": "Interface: IMaskEventArgs", + "component": "IMaskEventArgs", + "file": "interfaces/IMaskEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IMergeByResult": { + "title": "Interface: IMergeByResult", + "component": "IMergeByResult", + "file": "interfaces/IMergeByResult.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IMultiRowLayoutNode": { + "title": "Interface: IMultiRowLayoutNode", + "component": "IMultiRowLayoutNode", + "file": "interfaces/IMultiRowLayoutNode.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "IPageCancellableEventArgs": { + "title": "Interface: IPageCancellableEventArgs", + "component": "IPageCancellableEventArgs", + "file": "interfaces/IPageCancellableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IPageEventArgs": { + "title": "Interface: IPageEventArgs", + "component": "IPageEventArgs", + "file": "interfaces/IPageEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d6" + }, + "IPagingState": { + "title": "Interface: IPagingState", + "component": "IPagingState", + "file": "interfaces/IPagingState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678115" + }, + "IPanStateChangeEventArgs": { + "title": "Interface: IPanStateChangeEventArgs", + "component": "IPanStateChangeEventArgs", + "file": "interfaces/IPanStateChangeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IPathSegment": { + "title": "Interface: IPathSegment", + "component": "IPathSegment", + "file": "interfaces/IPathSegment.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:422](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPdfExportEndedEventArgs": { + "title": "Interface: IPdfExportEndedEventArgs", + "component": "IPdfExportEndedEventArgs", + "file": "interfaces/IPdfExportEndedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e77" + }, + "IPinColumnCancellableEventArgs": { + "title": "Interface: IPinColumnCancellableEventArgs", + "component": "IPinColumnCancellableEventArgs", + "file": "interfaces/IPinColumnCancellableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IPinColumnEventArgs": { + "title": "Interface: IPinColumnEventArgs", + "component": "IPinColumnEventArgs", + "file": "interfaces/IPinColumnEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IPinningConfig": { + "title": "Interface: IPinningConfig", + "component": "IPinningConfig", + "file": "interfaces/IPinningConfig.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "IPinRowEventArgs": { + "title": "Interface: IPinRowEventArgs", + "component": "IPinRowEventArgs", + "file": "interfaces/IPinRowEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IPivotAggregator": { + "title": "Interface: IPivotAggregator", + "component": "IPivotAggregator", + "file": "interfaces/IPivotAggregator.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IPivotConfiguration": { + "title": "Interface: IPivotConfiguration", + "component": "IPivotConfiguration", + "file": "interfaces/IPivotConfiguration.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IPivotConfigurationChangedEventArgs": { + "title": "Interface: IPivotConfigurationChangedEventArgs", + "component": "IPivotConfigurationChangedEventArgs", + "file": "interfaces/IPivotConfigurationChangedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IPivotDateDimensionOptions": { + "title": "Interface: IPivotDateDimensionOptions", + "component": "IPivotDateDimensionOptions", + "file": "interfaces/IPivotDateDimensionOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IPivotDimension": { + "title": "Interface: IPivotDimension", + "component": "IPivotDimension", + "file": "interfaces/IPivotDimension.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotDimensionData": { + "title": "Interface: IPivotDimensionData", + "component": "IPivotDimensionData", + "file": "interfaces/IPivotDimensionData.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotDimensionStrategy": { + "title": "Interface: IPivotDimensionStrategy", + "component": "IPivotDimensionStrategy", + "file": "interfaces/IPivotDimensionStrategy.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IPivotGridColumn": { + "title": "Interface: IPivotGridColumn", + "component": "IPivotGridColumn", + "file": "interfaces/IPivotGridColumn.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotGridGroupRecord": { + "title": "Interface: IPivotGridGroupRecord", + "component": "IPivotGridGroupRecord", + "file": "interfaces/IPivotGridGroupRecord.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotGridHorizontalGroup": { + "title": "Interface: IPivotGridHorizontalGroup", + "component": "IPivotGridHorizontalGroup", + "file": "interfaces/IPivotGridHorizontalGroup.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotGridRecord": { + "title": "Interface: IPivotGridRecord", + "component": "IPivotGridRecord", + "file": "interfaces/IPivotGridRecord.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotKeys": { + "title": "Interface: IPivotKeys", + "component": "IPivotKeys", + "file": "interfaces/IPivotKeys.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotUISettings": { + "title": "Interface: IPivotUISettings", + "component": "IPivotUISettings", + "file": "interfaces/IPivotUISettings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPivotValue": { + "title": "Interface: IPivotValue", + "component": "IPivotValue", + "file": "interfaces/IPivotValue.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "IPositionStrategy": { + "title": "Interface: IPositionStrategy", + "component": "IPositionStrategy", + "file": "interfaces/IPositionStrategy.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16" + }, + "IRangeSliderValue": { + "title": "Interface: IRangeSliderValue", + "component": "IRangeSliderValue", + "file": "interfaces/IRangeSliderValue.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "IRecordValidationState": { + "title": "Interface: IRecordValidationState", + "component": "IRecordValidationState", + "file": "interfaces/IRecordValidationState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "IResourceStrings": { + "title": "Interface: IResourceStrings", + "component": "IResourceStrings", + "file": "interfaces/IResourceStrings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IRowDataCancelableEventArgs": { + "title": "Interface: IRowDataCancelableEventArgs", + "component": "IRowDataCancelableEventArgs", + "file": "interfaces/IRowDataCancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IRowDataEventArgs": { + "title": "Interface: IRowDataEventArgs", + "component": "IRowDataEventArgs", + "file": "interfaces/IRowDataEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IRowDragEndEventArgs": { + "title": "Interface: IRowDragEndEventArgs", + "component": "IRowDragEndEventArgs", + "file": "interfaces/IRowDragEndEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IRowDragStartEventArgs": { + "title": "Interface: IRowDragStartEventArgs", + "component": "IRowDragStartEventArgs", + "file": "interfaces/IRowDragStartEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IRowExportingEventArgs": { + "title": "Interface: IRowExportingEventArgs", + "component": "IRowExportingEventArgs", + "file": "interfaces/IRowExportingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b8" + }, + "IRowSelectionEventArgs": { + "title": "Interface: IRowSelectionEventArgs", + "component": "IRowSelectionEventArgs", + "file": "interfaces/IRowSelectionEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IRowToggleEventArgs": { + "title": "Interface: IRowToggleEventArgs", + "component": "IRowToggleEventArgs", + "file": "interfaces/IRowToggleEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:404](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "IScrollStrategy": { + "title": "Interface: IScrollStrategy", + "component": "IScrollStrategy", + "file": "interfaces/IScrollStrategy.md", + "type": "interface", + "keywords": [ + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a167811" + }, + "ISearchInfo": { + "title": "Interface: ISearchInfo", + "component": "ISearchInfo", + "file": "interfaces/ISearchInfo.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:266](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "ISelectionEventArgs": { + "title": "Interface: ISelectionEventArgs", + "component": "ISelectionEventArgs", + "file": "interfaces/ISelectionEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "ISelectionKeyboardState": { + "title": "Interface: ISelectionKeyboardState", + "component": "ISelectionKeyboardState", + "file": "interfaces/ISelectionKeyboardState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "ISelectionNode": { + "title": "Interface: ISelectionNode", + "component": "ISelectionNode", + "file": "interfaces/ISelectionNode.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "ISelectionPointerState": { + "title": "Interface: ISelectionPointerState", + "component": "ISelectionPointerState", + "file": "interfaces/ISelectionPointerState.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/i" + }, + "ISimpleComboSelectionChangedEventArgs": { + "title": "Interface: ISimpleComboSelectionChangedEventArgs", + "component": "ISimpleComboSelectionChangedEventArgs", + "file": "interfaces/ISimpleComboSelectionChangedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "ISimpleComboSelectionChangingEventArgs": { + "title": "Interface: ISimpleComboSelectionChangingEventArgs", + "component": "ISimpleComboSelectionChangingEventArgs", + "file": "interfaces/ISimpleComboSelectionChangingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1" + }, + "ISizeInfo": { + "title": "Interface: ISizeInfo", + "component": "ISizeInfo", + "file": "interfaces/ISizeInfo.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "ISlideEventArgs": { + "title": "Interface: ISlideEventArgs", + "component": "ISlideEventArgs", + "file": "interfaces/ISlideEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:1100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69" + }, + "ISliderValueChangeEventArgs": { + "title": "Interface: ISliderValueChangeEventArgs", + "component": "ISliderValueChangeEventArgs", + "file": "interfaces/ISliderValueChangeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projec" + }, + "ISortingEventArgs": { + "title": "Interface: ISortingEventArgs", + "component": "ISortingEventArgs", + "file": "interfaces/ISortingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects" + }, + "ISortingExpression": { + "title": "Interface: ISortingExpression\\<T\\>", + "component": "ISortingExpression\\<T\\>", + "file": "interfaces/ISortingExpression.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "ISortingOptions": { + "title": "Interface: ISortingOptions", + "component": "ISortingOptions", + "file": "interfaces/ISortingOptions.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "ISortingStrategy": { + "title": "Interface: ISortingStrategy", + "component": "ISortingStrategy", + "file": "interfaces/ISortingStrategy.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "ISplitterBarResizeEventArgs": { + "title": "Interface: ISplitterBarResizeEventArgs", + "component": "ISplitterBarResizeEventArgs", + "file": "interfaces/ISplitterBarResizeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e7" + }, + "IStepChangedEventArgs": { + "title": "Interface: IStepChangedEventArgs", + "component": "IStepChangedEventArgs", + "file": "interfaces/IStepChangedEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IStepChangingEventArgs": { + "title": "Interface: IStepChangingEventArgs", + "component": "IStepChangingEventArgs", + "file": "interfaces/IStepChangingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "ISummaryExpression": { + "title": "Interface: ISummaryExpression", + "component": "ISummaryExpression", + "file": "interfaces/ISummaryExpression.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "ISummaryRecord": { + "title": "Interface: ISummaryRecord", + "component": "ISummaryRecord", + "file": "interfaces/ISummaryRecord.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "ITabsBaseEventArgs": { + "title": "Interface: ITabsBaseEventArgs", + "component": "ITabsBaseEventArgs", + "file": "interfaces/ITabsBaseEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "ITabsSelectedIndexChangingEventArgs": { + "title": "Interface: ITabsSelectedIndexChangingEventArgs", + "component": "ITabsSelectedIndexChangingEventArgs", + "file": "interfaces/ITabsSelectedIndexChangingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "ITabsSelectedItemChangeEventArgs": { + "title": "Interface: ITabsSelectedItemChangeEventArgs", + "component": "ITabsSelectedItemChangeEventArgs", + "file": "interfaces/ITabsSelectedItemChangeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/" + }, + "IToggleView": { + "title": "Interface: IToggleView", + "component": "IToggleView", + "file": "interfaces/IToggleView.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "ITooltipHideEventArgs": { + "title": "Interface: ITooltipHideEventArgs", + "component": "ITooltipHideEventArgs", + "file": "interfaces/ITooltipHideEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "ITooltipShowEventArgs": { + "title": "Interface: ITooltipShowEventArgs", + "component": "ITooltipShowEventArgs", + "file": "interfaces/ITooltipShowEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82" + }, + "ITreeGridRecord": { + "title": "Interface: ITreeGridRecord", + "component": "ITreeGridRecord", + "file": "interfaces/ITreeGridRecord.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "ITreeNodeEditedEvent": { + "title": "Interface: ITreeNodeEditedEvent", + "component": "ITreeNodeEditedEvent", + "file": "interfaces/ITreeNodeEditedEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "ITreeNodeEditingEvent": { + "title": "Interface: ITreeNodeEditingEvent", + "component": "ITreeNodeEditingEvent", + "file": "interfaces/ITreeNodeEditingEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "ITreeNodeSelectionEvent": { + "title": "Interface: ITreeNodeSelectionEvent", + "component": "ITreeNodeSelectionEvent", + "file": "interfaces/ITreeNodeSelectionEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "ITreeNodeToggledEventArgs": { + "title": "Interface: ITreeNodeToggledEventArgs", + "component": "ITreeNodeToggledEventArgs", + "file": "interfaces/ITreeNodeToggledEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "ITreeNodeTogglingEventArgs": { + "title": "Interface: ITreeNodeTogglingEventArgs", + "component": "ITreeNodeTogglingEventArgs", + "file": "interfaces/ITreeNodeTogglingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui" + }, + "IValuesChange": { + "title": "Interface: IValuesChange", + "component": "IValuesChange", + "file": "interfaces/IValuesChange.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "IViewChangeEventArgs": { + "title": "Interface: IViewChangeEventArgs", + "component": "IViewChangeEventArgs", + "file": "interfaces/IViewChangeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\\_outlet.directive.ts:216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da" + }, + "IViewDateChangeEventArgs": { + "title": "Interface: IViewDateChangeEventArgs", + "component": "IViewDateChangeEventArgs", + "file": "interfaces/IViewDateChangeEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/project" + }, + "OverlayAnimationEventArgs": { + "title": "Interface: OverlayAnimationEventArgs", + "component": "OverlayAnimationEventArgs", + "file": "interfaces/OverlayAnimationEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "OverlayCancelableEventArgs": { + "title": "Interface: OverlayCancelableEventArgs", + "component": "OverlayCancelableEventArgs", + "file": "interfaces/OverlayCancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "OverlayClosingEventArgs": { + "title": "Interface: OverlayClosingEventArgs", + "component": "OverlayClosingEventArgs", + "file": "interfaces/OverlayClosingEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "OverlayCreateSettings": { + "title": "Interface: OverlayCreateSettings", + "component": "OverlayCreateSettings", + "file": "interfaces/OverlayCreateSettings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "OverlayEventArgs": { + "title": "Interface: OverlayEventArgs", + "component": "OverlayEventArgs", + "file": "interfaces/OverlayEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "OverlaySettings": { + "title": "Interface: OverlaySettings", + "component": "OverlaySettings", + "file": "interfaces/OverlaySettings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "PdfUnicodeFont": { + "title": "Interface: PdfUnicodeFont", + "component": "PdfUnicodeFont", + "file": "interfaces/PdfUnicodeFont.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "PivotGridType": { + "title": "Interface: PivotGridType", + "component": "PivotGridType", + "file": "interfaces/PivotGridType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1024](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "PivotRowHeaderGroupType": { + "title": "Interface: PivotRowHeaderGroupType", + "component": "PivotRowHeaderGroupType", + "file": "interfaces/PivotRowHeaderGroupType.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "PositionSettings": { + "title": "Interface: PositionSettings", + "component": "PositionSettings", + "file": "interfaces/PositionSettings.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/pr" + }, + "RowType": { + "title": "Interface: RowType", + "component": "RowType", + "file": "interfaces/RowType.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/" + }, + "Size": { + "title": "Interface: Size", + "component": "Size", + "file": "interfaces/Size.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/p" + }, + "State": { + "title": "Interface: State", + "component": "State", + "file": "interfaces/State.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "StateUpdateEvent": { + "title": "Interface: StateUpdateEvent", + "component": "StateUpdateEvent", + "file": "interfaces/StateUpdateEvent.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "ToggleViewCancelableEventArgs": { + "title": "Interface: ToggleViewCancelableEventArgs", + "component": "ToggleViewCancelableEventArgs", + "file": "interfaces/ToggleViewCancelableEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "ToggleViewEventArgs": { + "title": "Interface: ToggleViewEventArgs", + "component": "ToggleViewEventArgs", + "file": "interfaces/ToggleViewEventArgs.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a1678" + }, + "Transaction": { + "title": "Interface: Transaction", + "component": "Transaction", + "file": "interfaces/Transaction.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "TransactionService": { + "title": "Interface: TransactionService\\<T, S\\>", + "component": "TransactionService\\<T, S\\>", + "file": "interfaces/TransactionService.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e" + }, + "TreeGridType": { + "title": "Interface: TreeGridType", + "component": "TreeGridType", + "file": "interfaces/TreeGridType.md", + "type": "interface", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1004](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779" + }, + "ButtonGroupAlignment": { + "title": "Variable: ButtonGroupAlignment", + "component": "Variable: ButtonGroupAlignment", + "file": "variables/ButtonGroupAlignment.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **ButtonGroupAlignment**: `object`" + }, + "CalendarRangeParams": { + "title": "Type Alias: CalendarRangeParams", + "component": "CalendarRangeParams", + "file": "type-aliases/CalendarRangeParams.md", + "type": "type", + "keywords": [ + "properties" + ], + "summary": "> **CalendarRangeParams** = `object`" + }, + "CalendarSelection": { + "title": "Variable: CalendarSelection", + "component": "Variable: CalendarSelection", + "file": "variables/CalendarSelection.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **CalendarSelection**: `object`" + }, + "CarouselAnimationType": { + "title": "Variable: CarouselAnimationType", + "component": "Variable: CarouselAnimationType", + "file": "variables/CarouselAnimationType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **CarouselAnimationType**: `object`" + }, + "CarouselIndicatorsOrientation": { + "title": "Variable: CarouselIndicatorsOrientation", + "component": "Variable: CarouselIndicatorsOrientation", + "file": "variables/CarouselIndicatorsOrientation.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **CarouselIndicatorsOrientation**: `object`" + }, + "ColumnDisplayOrder": { + "title": "Variable: ColumnDisplayOrder", + "component": "Variable: ColumnDisplayOrder", + "file": "variables/ColumnDisplayOrder.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **ColumnDisplayOrder**: `object`" + }, + "DayInterval": { + "title": "Type Alias: DayInterval", + "component": "DayInterval", + "file": "type-aliases/DayInterval.md", + "type": "type", + "keywords": [], + "summary": "> **DayInterval** = `\"year\"` \\| `\"quarter\"` \\| `\"month\"` \\| `\"week\"` \\| `\"day\"`" + }, + "DayParameter": { + "title": "Type Alias: DayParameter", + "component": "DayParameter", + "file": "type-aliases/DayParameter.md", + "type": "type", + "keywords": [], + "summary": "> **DayParameter** = [`CalendarDay`](../classes/CalendarDay.md) \\| `Date`" + }, + "DropDownActionKey": { + "title": "Variable: DropDownActionKey", + "component": "Variable: DropDownActionKey", + "file": "variables/DropDownActionKey.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **DropDownActionKey**: `object`" + }, + "FilterMode": { + "title": "Variable: FilterMode", + "component": "Variable: FilterMode", + "file": "variables/FilterMode.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **FilterMode**: `object`" + }, + "GridCellMergeMode": { + "title": "Variable: GridCellMergeMode", + "component": "Variable: GridCellMergeMode", + "file": "variables/GridCellMergeMode.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GridCellMergeMode**: `object`" + }, + "GridFeatures": { + "title": "Type Alias: GridFeatures", + "component": "GridFeatures", + "file": "type-aliases/GridFeatures.md", + "type": "type", + "keywords": [], + "summary": "> **GridFeatures** = keyof [`IGridStateOptions`](../interfaces/IGridStateOptions.md)" + }, + "GridKeydownTargetType": { + "title": "Type Alias: GridKeydownTargetType", + "component": "GridKeydownTargetType", + "file": "type-aliases/GridKeydownTargetType.md", + "type": "type", + "keywords": [], + "summary": "> **GridKeydownTargetType** = `\"dataCell\"` \\| `\"summaryCell\"` \\| `\"groupRow\"` \\| `\"hierarchicalRow\"` \\| `\"headerCell\"` \\| `\"masterDetailRow\"`" + }, + "GridPagingMode": { + "title": "Variable: GridPagingMode", + "component": "Variable: GridPagingMode", + "file": "variables/GridPagingMode.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GridPagingMode**: `object`" + }, + "GridSelectionMode": { + "title": "Variable: GridSelectionMode", + "component": "Variable: GridSelectionMode", + "file": "variables/GridSelectionMode.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GridSelectionMode**: `object`" + }, + "GridSummaryCalculationMode": { + "title": "Variable: GridSummaryCalculationMode", + "component": "Variable: GridSummaryCalculationMode", + "file": "variables/GridSummaryCalculationMode.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GridSummaryCalculationMode**: `object`" + }, + "GridSummaryPosition": { + "title": "Variable: GridSummaryPosition", + "component": "Variable: GridSummaryPosition", + "file": "variables/GridSummaryPosition.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GridSummaryPosition**: `object`" + }, + "GridValidationTrigger": { + "title": "Type Alias: GridValidationTrigger", + "component": "GridValidationTrigger", + "file": "type-aliases/GridValidationTrigger.md", + "type": "type", + "keywords": [], + "summary": "> **GridValidationTrigger** = `\"change\"` \\| `\"blur\"`" + }, + "HorizontalAnimationType": { + "title": "Variable: HorizontalAnimationType", + "component": "Variable: HorizontalAnimationType", + "file": "variables/HorizontalAnimationType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **HorizontalAnimationType**: `object`" + }, + "IActionStripResourceStrings": { + "title": "Type Alias: IActionStripResourceStrings", + "component": "IActionStripResourceStrings", + "file": "type-aliases/IActionStripResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IActionStripResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\" + }, + "IBannerResourceStrings": { + "title": "Type Alias: IBannerResourceStrings", + "component": "IBannerResourceStrings", + "file": "type-aliases/IBannerResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IBannerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "ICalendarResourceStrings": { + "title": "Type Alias: ICalendarResourceStrings", + "component": "ICalendarResourceStrings", + "file": "type-aliases/ICalendarResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **ICalendarResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "ICarouselResourceStrings": { + "title": "Type Alias: ICarouselResourceStrings", + "component": "ICarouselResourceStrings", + "file": "type-aliases/ICarouselResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **ICarouselResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IChipResourceStrings": { + "title": "Type Alias: IChipResourceStrings", + "component": "IChipResourceStrings", + "file": "type-aliases/IChipResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IChipResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IComboResourceStrings": { + "title": "Type Alias: IComboResourceStrings", + "component": "IComboResourceStrings", + "file": "type-aliases/IComboResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IComboResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IconReference": { + "title": "Type Alias: IconReference", + "component": "IconReference", + "file": "type-aliases/IconReference.md", + "type": "type", + "keywords": [], + "summary": "> **IconReference** = [`IconMeta`](../interfaces/IconMeta.md) & [`FamilyMeta`](../interfaces/FamilyMeta.md)" + }, + "IDatePickerResourceStrings": { + "title": "Type Alias: IDatePickerResourceStrings", + "component": "IDatePickerResourceStrings", + "file": "type-aliases/IDatePickerResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IDatePickerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IDateRangePickerResourceStrings": { + "title": "Type Alias: IDateRangePickerResourceStrings", + "component": "IDateRangePickerResourceStrings", + "file": "type-aliases/IDateRangePickerResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IDateRangePickerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n." + }, + "IGridResourceStrings": { + "title": "Type Alias: IGridResourceStrings", + "component": "IGridResourceStrings", + "file": "type-aliases/IGridResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IGridResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IgxAvatarSize": { + "title": "Variable: IgxAvatarSize", + "component": "Variable: IgxAvatarSize", + "file": "variables/IgxAvatarSize.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxAvatarSize**: `object`" + }, + "IgxAvatarType": { + "title": "Variable: IgxAvatarType", + "component": "Variable: IgxAvatarType", + "file": "variables/IgxAvatarType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxAvatarType**: `object`" + }, + "IgxBadgeType": { + "title": "Variable: IgxBadgeType", + "component": "Variable: IgxBadgeType", + "file": "variables/IgxBadgeType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxBadgeType**: `object`" + }, + "IgxButtonType": { + "title": "Type Alias: IgxButtonType", + "component": "IgxButtonType", + "file": "type-aliases/IgxButtonType.md", + "type": "type", + "keywords": [], + "summary": "> **IgxButtonType** = *typeof* `IgxButtonType`\\[keyof *typeof* `IgxButtonType`\\]" + }, + "IgxCalendarView": { + "title": "Variable: IgxCalendarView", + "component": "Variable: IgxCalendarView", + "file": "variables/IgxCalendarView.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxCalendarView**: `object`" + }, + "IgxCardActionsLayout": { + "title": "Variable: IgxCardActionsLayout", + "component": "Variable: IgxCardActionsLayout", + "file": "variables/IgxCardActionsLayout.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxCardActionsLayout**: `object`" + }, + "IgxChipTypeVariant": { + "title": "Variable: IgxChipTypeVariant", + "component": "Variable: IgxChipTypeVariant", + "file": "variables/IgxChipTypeVariant.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxChipTypeVariant**: `object`" + }, + "IgxDividerType": { + "title": "Variable: IgxDividerType", + "component": "Variable: IgxDividerType", + "file": "variables/IgxDividerType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxDividerType**: `object`" + }, + "IgxExporterOptions": { + "title": "Type Alias: IgxExporterOptions", + "component": "IgxExporterOptions", + "file": "type-aliases/IgxExporterOptions.md", + "type": "type", + "keywords": [], + "summary": "> **IgxExporterOptions** = [`IgxCsvExporterOptions`](../classes/IgxCsvExporterOptions.md) \\| [`IgxExcelExporterOptions`](../classes/IgxExcelExporterOptions.md) \\| [`IgxPdfExporterOptions`](../classes/" + }, + "IgxIconButtonType": { + "title": "Type Alias: IgxIconButtonType", + "component": "IgxIconButtonType", + "file": "type-aliases/IgxIconButtonType.md", + "type": "type", + "keywords": [], + "summary": "> **IgxIconButtonType** = *typeof* `IgxBaseButtonType`\\[keyof *typeof* `IgxBaseButtonType`\\]" + }, + "IgxInputGroupType": { + "title": "Type Alias: IgxInputGroupType", + "component": "IgxInputGroupType", + "file": "type-aliases/IgxInputGroupType.md", + "type": "type", + "keywords": [], + "summary": "> **IgxInputGroupType** = *typeof* [`IgxInputGroupEnum`](../variables/IgxInputGroupEnum.md)\\[keyof *typeof* [`IgxInputGroupEnum`](../variables/IgxInputGroupEnum.md)\\]" + }, + "IgxProgressType": { + "title": "Variable: IgxProgressType", + "component": "Variable: IgxProgressType", + "file": "variables/IgxProgressType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxProgressType**: `object`" + }, + "IgxSliderType": { + "title": "Variable: IgxSliderType", + "component": "Variable: IgxSliderType", + "file": "variables/IgxSliderType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxSliderType**: `object`" + }, + "IgxStepperOrientation": { + "title": "Variable: IgxStepperOrientation", + "component": "Variable: IgxStepperOrientation", + "file": "variables/IgxStepperOrientation.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxStepperOrientation**: `object`" + }, + "IgxStepperTitlePosition": { + "title": "Variable: IgxStepperTitlePosition", + "component": "Variable: IgxStepperTitlePosition", + "file": "variables/IgxStepperTitlePosition.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxStepperTitlePosition**: `object`" + }, + "IgxStepType": { + "title": "Variable: IgxStepType", + "component": "Variable: IgxStepType", + "file": "variables/IgxStepType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxStepType**: `object`" + }, + "IgxTabsAlignment": { + "title": "Variable: IgxTabsAlignment", + "component": "Variable: IgxTabsAlignment", + "file": "variables/IgxTabsAlignment.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxTabsAlignment**: `object`" + }, + "IgxTextAlign": { + "title": "Variable: IgxTextAlign", + "component": "Variable: IgxTextAlign", + "file": "variables/IgxTextAlign.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxTextAlign**: `object`" + }, + "IgxTheme": { + "title": "Type Alias: IgxTheme", + "component": "IgxTheme", + "file": "type-aliases/IgxTheme.md", + "type": "type", + "keywords": [], + "summary": "> **IgxTheme** = *typeof* `Theme`\\[keyof *typeof* `Theme`\\]" + }, + "IgxTreeSearchResolver": { + "title": "Type Alias: IgxTreeSearchResolver", + "component": "IgxTreeSearchResolver", + "file": "type-aliases/IgxTreeSearchResolver.md", + "type": "type", + "keywords": [], + "summary": "> **IgxTreeSearchResolver** = (`data`, `node`) => `boolean`" + }, + "IgxTreeSelectionType": { + "title": "Variable: IgxTreeSelectionType", + "component": "Variable: IgxTreeSelectionType", + "file": "variables/IgxTreeSelectionType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxTreeSelectionType**: `object`" + }, + "IListResourceStrings": { + "title": "Type Alias: IListResourceStrings", + "component": "IListResourceStrings", + "file": "type-aliases/IListResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IListResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IPaginatorResourceStrings": { + "title": "Type Alias: IPaginatorResourceStrings", + "component": "IPaginatorResourceStrings", + "file": "type-aliases/IPaginatorResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IPaginatorResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "IQueryBuilderResourceStrings": { + "title": "Type Alias: IQueryBuilderResourceStrings", + "component": "IQueryBuilderResourceStrings", + "file": "type-aliases/IQueryBuilderResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **IQueryBuilderResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)" + }, + "ITimePickerResourceStrings": { + "title": "Type Alias: ITimePickerResourceStrings", + "component": "ITimePickerResourceStrings", + "file": "type-aliases/ITimePickerResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **ITimePickerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "ITreeResourceStrings": { + "title": "Type Alias: ITreeResourceStrings", + "component": "ITreeResourceStrings", + "file": "type-aliases/ITreeResourceStrings.md", + "type": "type", + "keywords": [], + "summary": "> **ITreeResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\\>" + }, + "KeyOfOrString": { + "title": "Type Alias: KeyOfOrString\\<T, K\\>", + "component": "KeyOfOrString\\<T, K\\>", + "file": "type-aliases/KeyOfOrString.md", + "type": "type", + "keywords": [], + "summary": "> **KeyOfOrString**\\<`T`, `K`\\> = `K` *extends* keyof `T` ? `K` : `string`" + }, + "LabelPosition": { + "title": "Variable: LabelPosition", + "component": "Variable: LabelPosition", + "file": "variables/LabelPosition.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **LabelPosition**: `object`" + }, + "PickerCalendarOrientation": { + "title": "Variable: PickerCalendarOrientation", + "component": "Variable: PickerCalendarOrientation", + "file": "variables/PickerCalendarOrientation.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **PickerCalendarOrientation**: `object`" + }, + "PickerHeaderOrientation": { + "title": "Variable: PickerHeaderOrientation", + "component": "Variable: PickerHeaderOrientation", + "file": "variables/PickerHeaderOrientation.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **PickerHeaderOrientation**: `object`" + }, + "PickerInteractionMode": { + "title": "Variable: PickerInteractionMode", + "component": "Variable: PickerInteractionMode", + "file": "variables/PickerInteractionMode.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **PickerInteractionMode**: `object`" + }, + "PivotAggregation": { + "title": "Type Alias: PivotAggregation", + "component": "PivotAggregation", + "file": "type-aliases/PivotAggregation.md", + "type": "type", + "keywords": [], + "summary": "> **PivotAggregation** = (`members`, `data`) => `any`" + }, + "PivotAggregationType": { + "title": "Type Alias: PivotAggregationType", + "component": "PivotAggregationType", + "file": "type-aliases/PivotAggregationType.md", + "type": "type", + "keywords": [], + "summary": "> **PivotAggregationType** = `\"SUM\"` \\| `\"AVG\"` \\| `\"MIN\"` \\| `\"MAX\"` \\| `\"COUNT\"` \\| `\"LATEST\"` \\| `\"EARLIEST\"`" + }, + "RadioGroupAlignment": { + "title": "Variable: RadioGroupAlignment", + "component": "Variable: RadioGroupAlignment", + "file": "variables/RadioGroupAlignment.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **RadioGroupAlignment**: `object`" + }, + "SelectionState": { + "title": "Type Alias: SelectionState", + "component": "SelectionState", + "file": "type-aliases/SelectionState.md", + "type": "type", + "keywords": [], + "summary": "> **SelectionState** = [`ISelectionKeyboardState`](../interfaces/ISelectionKeyboardState.md) \\| [`ISelectionPointerState`](../interfaces/ISelectionPointerState.md)" + }, + "SliderHandle": { + "title": "Variable: SliderHandle", + "component": "Variable: SliderHandle", + "file": "variables/SliderHandle.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **SliderHandle**: `object`" + }, + "TickLabelsOrientation": { + "title": "Variable: TickLabelsOrientation", + "component": "Variable: TickLabelsOrientation", + "file": "variables/TickLabelsOrientation.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **TickLabelsOrientation**: `object`" + }, + "TicksOrientation": { + "title": "Variable: TicksOrientation", + "component": "Variable: TicksOrientation", + "file": "variables/TicksOrientation.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **TicksOrientation**: `object`" + }, + "ValidationStatus": { + "title": "Type Alias: ValidationStatus", + "component": "ValidationStatus", + "file": "type-aliases/ValidationStatus.md", + "type": "type", + "keywords": [], + "summary": "> **ValidationStatus** = `\"VALID\"` \\| `\"INVALID\"`" + }, + "VerticalAnimationType": { + "title": "Variable: VerticalAnimationType", + "component": "Variable: VerticalAnimationType", + "file": "variables/VerticalAnimationType.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **VerticalAnimationType**: `object`" + }, + "WeekDays": { + "title": "Type Alias: WeekDays", + "component": "WeekDays", + "file": "type-aliases/WeekDays.md", + "type": "type", + "keywords": [], + "summary": "> **WeekDays** = `\"sunday\"` \\| `\"monday\"` \\| `\"tuesday\"` \\| `\"wednesday\"` \\| `\"thursday\"` \\| `\"friday\"` \\| `\"saturday\"`" + }, + "ActionStripResourceStringsEN": { + "title": "Variable: ActionStripResourceStringsEN", + "component": "Variable: ActionStripResourceStringsEN", + "file": "variables/ActionStripResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **ActionStripResourceStringsEN**: [`IActionStripResourceStrings`](../type-aliases/IActionStripResourceStrings.md)" + }, + "BannerResourceStringsEN": { + "title": "Variable: BannerResourceStringsEN", + "component": "Variable: BannerResourceStringsEN", + "file": "variables/BannerResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **BannerResourceStringsEN**: [`IBannerResourceStrings`](../type-aliases/IBannerResourceStrings.md)" + }, + "CalendarResourceStringsEN": { + "title": "Variable: CalendarResourceStringsEN", + "component": "Variable: CalendarResourceStringsEN", + "file": "variables/CalendarResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **CalendarResourceStringsEN**: [`ICalendarResourceStrings`](../type-aliases/ICalendarResourceStrings.md)" + }, + "CarouselResourceStringsEN": { + "title": "Variable: CarouselResourceStringsEN", + "component": "Variable: CarouselResourceStringsEN", + "file": "variables/CarouselResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **CarouselResourceStringsEN**: [`ICarouselResourceStrings`](../type-aliases/ICarouselResourceStrings.md)" + }, + "ChipResourceStringsEN": { + "title": "Variable: ChipResourceStringsEN", + "component": "Variable: ChipResourceStringsEN", + "file": "variables/ChipResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **ChipResourceStringsEN**: [`IChipResourceStrings`](../type-aliases/IChipResourceStrings.md)" + }, + "ComboResourceStringsEN": { + "title": "Variable: ComboResourceStringsEN", + "component": "Variable: ComboResourceStringsEN", + "file": "variables/ComboResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **ComboResourceStringsEN**: [`IComboResourceStrings`](../type-aliases/IComboResourceStrings.md)" + }, + "DatePickerResourceStringsEN": { + "title": "Variable: DatePickerResourceStringsEN", + "component": "Variable: DatePickerResourceStringsEN", + "file": "variables/DatePickerResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **DatePickerResourceStringsEN**: [`IDatePickerResourceStrings`](../type-aliases/IDatePickerResourceStrings.md)" + }, + "DateRangePickerResourceStringsEN": { + "title": "Variable: DateRangePickerResourceStringsEN", + "component": "Variable: DateRangePickerResourceStringsEN", + "file": "variables/DateRangePickerResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **DateRangePickerResourceStringsEN**: [`IDateRangePickerResourceStrings`](../type-aliases/IDateRangePickerResourceStrings.md)" + }, + "daysInWeek": { + "title": "Variable: daysInWeek", + "component": "Variable: daysInWeek", + "file": "variables/daysInWeek.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **daysInWeek**: `7` = `7`" + }, + "DEFAULT_LOCALE": { + "title": "Variable: DEFAULT\\_LOCALE", + "component": "Variable: DEFAULT\\_LOCALE", + "file": "variables/DEFAULT_LOCALE.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **DEFAULT\\_LOCALE**: `\"en-US\"` = `'en-US'`" + }, + "DEFAULT_OWNER": { + "title": "Variable: DEFAULT\\_OWNER", + "component": "Variable: DEFAULT\\_OWNER", + "file": "variables/DEFAULT_OWNER.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **DEFAULT\\_OWNER**: `\"default\"` = `'default'`" + }, + "DEFAULT_PIVOT_KEYS": { + "title": "Variable: DEFAULT\\_PIVOT\\_KEYS", + "component": "Variable: DEFAULT\\_PIVOT\\_KEYS", + "file": "variables/DEFAULT_PIVOT_KEYS.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **DEFAULT\\_PIVOT\\_KEYS**: `object`" + }, + "GridResourceStringsEN": { + "title": "Variable: GridResourceStringsEN", + "component": "Variable: GridResourceStringsEN", + "file": "variables/GridResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GridResourceStringsEN**: [`IGridResourceStrings`](../type-aliases/IGridResourceStrings.md)" + }, + "GRID_LEVEL_COL": { + "title": "Variable: GRID\\_LEVEL\\_COL", + "component": "Variable: GRID\\_LEVEL\\_COL", + "file": "variables/GRID_LEVEL_COL.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GRID\\_LEVEL\\_COL**: `\"GRID_LEVEL_COL\"` = `'GRID_LEVEL_COL'`" + }, + "GRID_PARENT": { + "title": "Variable: GRID\\_PARENT", + "component": "Variable: GRID\\_PARENT", + "file": "variables/GRID_PARENT.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GRID\\_PARENT**: `\"grid-parent\"` = `'grid-parent'`" + }, + "GRID_ROOT_SUMMARY": { + "title": "Variable: GRID\\_ROOT\\_SUMMARY", + "component": "Variable: GRID\\_ROOT\\_SUMMARY", + "file": "variables/GRID_ROOT_SUMMARY.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **GRID\\_ROOT\\_SUMMARY**: `\"igxGridRootSummary\"` = `'igxGridRootSummary'`" + }, + "I18N_FORMATTER": { + "title": "Variable: I18N\\_FORMATTER", + "component": "Variable: I18N\\_FORMATTER", + "file": "variables/I18N_FORMATTER.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **I18N\\_FORMATTER**: `any`" + }, + "IgxGridTransaction": { + "title": "Variable: IgxGridTransaction", + "component": "Variable: IgxGridTransaction", + "file": "variables/IgxGridTransaction.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxGridTransaction**: `any`" + }, + "IgxInputGroupEnum": { + "title": "Variable: IgxInputGroupEnum", + "component": "Variable: IgxInputGroupEnum", + "file": "variables/IgxInputGroupEnum.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IgxInputGroupEnum**: `object`" + }, + "IGX_ACCORDION_DIRECTIVES": { + "title": "Variable: IGX\\_ACCORDION\\_DIRECTIVES", + "component": "Variable: IGX\\_ACCORDION\\_DIRECTIVES", + "file": "variables/IGX_ACCORDION_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_ACCORDION\\_DIRECTIVES**: readonly \\[*typeof* [`IgxAccordionComponent`](../classes/IgxAccordionComponent.md), *typeof* [`IgxExpansionPanelComponent`](../classes/IgxExpansionPanelCompon" + }, + "IGX_ACTION_STRIP_DIRECTIVES": { + "title": "Variable: IGX\\_ACTION\\_STRIP\\_DIRECTIVES", + "component": "Variable: IGX\\_ACTION\\_STRIP\\_DIRECTIVES", + "file": "variables/IGX_ACTION_STRIP_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_ACTION\\_STRIP\\_DIRECTIVES**: readonly \\[*typeof* [`IgxActionStripComponent`](../classes/IgxActionStripComponent.md), *typeof* [`IgxActionStripMenuItemDirective`](../classes/IgxActionS" + }, + "IGX_BANNER_DIRECTIVES": { + "title": "Variable: IGX\\_BANNER\\_DIRECTIVES", + "component": "Variable: IGX\\_BANNER\\_DIRECTIVES", + "file": "variables/IGX_BANNER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_BANNER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxBannerComponent`](../classes/IgxBannerComponent.md), *typeof* [`IgxBannerActionsDirective`](../classes/IgxBannerActionsDirective.md)\\]" + }, + "IGX_BOTTOM_NAV_DIRECTIVES": { + "title": "Variable: IGX\\_BOTTOM\\_NAV\\_DIRECTIVES", + "component": "Variable: IGX\\_BOTTOM\\_NAV\\_DIRECTIVES", + "file": "variables/IGX_BOTTOM_NAV_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_BOTTOM\\_NAV\\_DIRECTIVES**: readonly \\[*typeof* [`IgxBottomNavComponent`](../classes/IgxBottomNavComponent.md), *typeof* [`IgxBottomNavItemComponent`](../classes/IgxBottomNavItemCompon" + }, + "IGX_BUTTON_GROUP_DIRECTIVES": { + "title": "Variable: IGX\\_BUTTON\\_GROUP\\_DIRECTIVES", + "component": "Variable: IGX\\_BUTTON\\_GROUP\\_DIRECTIVES", + "file": "variables/IGX_BUTTON_GROUP_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_BUTTON\\_GROUP\\_DIRECTIVES**: readonly \\[*typeof* [`IgxButtonGroupComponent`](../classes/IgxButtonGroupComponent.md), *typeof* [`IgxButtonDirective`](../classes/IgxButtonDirective.md)\\" + }, + "IGX_CALENDAR_DIRECTIVES": { + "title": "Variable: IGX\\_CALENDAR\\_DIRECTIVES", + "component": "Variable: IGX\\_CALENDAR\\_DIRECTIVES", + "file": "variables/IGX_CALENDAR_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_CALENDAR\\_DIRECTIVES**: readonly \\[*typeof* [`IgxCalendarComponent`](../classes/IgxCalendarComponent.md), *typeof* [`IgxDaysViewComponent`](../classes/IgxDaysViewComponent.md), *typeo" + }, + "IGX_CALENDAR_VIEW_ITEM": { + "title": "Variable: IGX\\_CALENDAR\\_VIEW\\_ITEM", + "component": "Variable: IGX\\_CALENDAR\\_VIEW\\_ITEM", + "file": "variables/IGX_CALENDAR_VIEW_ITEM.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_CALENDAR\\_VIEW\\_ITEM**: `any`" + }, + "IGX_CARD_DIRECTIVES": { + "title": "Variable: IGX\\_CARD\\_DIRECTIVES", + "component": "Variable: IGX\\_CARD\\_DIRECTIVES", + "file": "variables/IGX_CARD_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_CARD\\_DIRECTIVES**: readonly \\[*typeof* [`IgxCardComponent`](../classes/IgxCardComponent.md), *typeof* [`IgxCardHeaderComponent`](../classes/IgxCardHeaderComponent.md), *typeof* [`Igx" + }, + "IGX_CAROUSEL_DIRECTIVES": { + "title": "Variable: IGX\\_CAROUSEL\\_DIRECTIVES", + "component": "Variable: IGX\\_CAROUSEL\\_DIRECTIVES", + "file": "variables/IGX_CAROUSEL_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_CAROUSEL\\_DIRECTIVES**: readonly \\[*typeof* [`IgxCarouselComponent`](../classes/IgxCarouselComponent.md), *typeof* [`IgxSlideComponent`](../classes/IgxSlideComponent.md), *typeof* [`I" + }, + "IGX_CHIPS_DIRECTIVES": { + "title": "Variable: IGX\\_CHIPS\\_DIRECTIVES", + "component": "Variable: IGX\\_CHIPS\\_DIRECTIVES", + "file": "variables/IGX_CHIPS_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_CHIPS\\_DIRECTIVES**: readonly \\[*typeof* [`IgxChipsAreaComponent`](../classes/IgxChipsAreaComponent.md), *typeof* [`IgxChipComponent`](../classes/IgxChipComponent.md), *typeof* `IgxPr" + }, + "IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES": { + "title": "Variable: IGX\\_CIRCULAR\\_PROGRESS\\_BAR\\_DIRECTIVES", + "component": "Variable: IGX\\_CIRCULAR\\_PROGRESS\\_BAR\\_DIRECTIVES", + "file": "variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_CIRCULAR\\_PROGRESS\\_BAR\\_DIRECTIVES**: readonly \\[*typeof* [`IgxCircularProgressBarComponent`](../classes/IgxCircularProgressBarComponent.md), *typeof* [`IgxProgressBarTextTemplateDir" + }, + "IGX_COMBO_COMPONENT": { + "title": "Variable: IGX\\_COMBO\\_COMPONENT", + "component": "Variable: IGX\\_COMBO\\_COMPONENT", + "file": "variables/IGX_COMBO_COMPONENT.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_COMBO\\_COMPONENT**: `any`" + }, + "IGX_COMBO_DIRECTIVES": { + "title": "Variable: IGX\\_COMBO\\_DIRECTIVES", + "component": "Variable: IGX\\_COMBO\\_DIRECTIVES", + "file": "variables/IGX_COMBO_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_COMBO\\_DIRECTIVES**: readonly \\[*typeof* [`IgxComboComponent`](../classes/IgxComboComponent.md), *typeof* [`IgxComboAddItemDirective`](../classes/IgxComboAddItemDirective.md), *typeof" + }, + "IGX_DATE_PICKER_DIRECTIVES": { + "title": "Variable: IGX\\_DATE\\_PICKER\\_DIRECTIVES", + "component": "Variable: IGX\\_DATE\\_PICKER\\_DIRECTIVES", + "file": "variables/IGX_DATE_PICKER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_DATE\\_PICKER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxDatePickerComponent`](../classes/IgxDatePickerComponent.md), *typeof* [`IgxPickerToggleComponent`](../classes/IgxPickerToggleCompo" + }, + "IGX_DATE_RANGE_PICKER_DIRECTIVES": { + "title": "Variable: IGX\\_DATE\\_RANGE\\_PICKER\\_DIRECTIVES", + "component": "Variable: IGX\\_DATE\\_RANGE\\_PICKER\\_DIRECTIVES", + "file": "variables/IGX_DATE_RANGE_PICKER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_DATE\\_RANGE\\_PICKER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxDateRangePickerComponent`](../classes/IgxDateRangePickerComponent.md), *typeof* [`IgxPickerToggleComponent`](../classes/Igx" + }, + "IGX_DIALOG_DIRECTIVES": { + "title": "Variable: IGX\\_DIALOG\\_DIRECTIVES", + "component": "Variable: IGX\\_DIALOG\\_DIRECTIVES", + "file": "variables/IGX_DIALOG_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_DIALOG\\_DIRECTIVES**: readonly \\[*typeof* [`IgxDialogComponent`](../classes/IgxDialogComponent.md), *typeof* `IgxDialogTitleDirective`, *typeof* `IgxDialogActionsDirective`\\]" + }, + "IGX_DRAG_DROP_DIRECTIVES": { + "title": "Variable: IGX\\_DRAG\\_DROP\\_DIRECTIVES", + "component": "Variable: IGX\\_DRAG\\_DROP\\_DIRECTIVES", + "file": "variables/IGX_DRAG_DROP_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_DRAG\\_DROP\\_DIRECTIVES**: readonly \\[*typeof* [`IgxDragDirective`](../classes/IgxDragDirective.md), *typeof* [`IgxDropDirective`](../classes/IgxDropDirective.md), *typeof* [`IgxDragHa" + }, + "IGX_DROPDOWN_BASE": { + "title": "Variable: IGX\\_DROPDOWN\\_BASE", + "component": "Variable: IGX\\_DROPDOWN\\_BASE", + "file": "variables/IGX_DROPDOWN_BASE.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_DROPDOWN\\_BASE**: `any`" + }, + "IGX_DROP_DOWN_DIRECTIVES": { + "title": "Variable: IGX\\_DROP\\_DOWN\\_DIRECTIVES", + "component": "Variable: IGX\\_DROP\\_DOWN\\_DIRECTIVES", + "file": "variables/IGX_DROP_DOWN_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_DROP\\_DOWN\\_DIRECTIVES**: readonly \\[*typeof* [`IgxDropDownComponent`](../classes/IgxDropDownComponent.md), *typeof* [`IgxDropDownItemComponent`](../classes/IgxDropDownItemComponent.m" + }, + "IGX_EXPANSION_PANEL_DIRECTIVES": { + "title": "Variable: IGX\\_EXPANSION\\_PANEL\\_DIRECTIVES", + "component": "Variable: IGX\\_EXPANSION\\_PANEL\\_DIRECTIVES", + "file": "variables/IGX_EXPANSION_PANEL_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_EXPANSION\\_PANEL\\_DIRECTIVES**: readonly \\[*typeof* [`IgxExpansionPanelComponent`](../classes/IgxExpansionPanelComponent.md), *typeof* [`IgxExpansionPanelHeaderComponent`](../classes/" + }, + "IGX_GRID_BASE": { + "title": "Variable: IGX\\_GRID\\_BASE", + "component": "Variable: IGX\\_GRID\\_BASE", + "file": "variables/IGX_GRID_BASE.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_GRID\\_BASE**: `any`" + }, + "IGX_GRID_COMMON_DIRECTIVES": { + "title": "Variable: IGX\\_GRID\\_COMMON\\_DIRECTIVES", + "component": "Variable: IGX\\_GRID\\_COMMON\\_DIRECTIVES", + "file": "variables/IGX_GRID_COMMON_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_GRID\\_COMMON\\_DIRECTIVES**: readonly \\[*typeof* [`IgxRowDirective`](../classes/IgxRowDirective.md), *typeof* [`IgxGridFooterComponent`](../classes/IgxGridFooterComponent.md), *typeof*" + }, + "IGX_GRID_DIRECTIVES": { + "title": "Variable: IGX\\_GRID\\_DIRECTIVES", + "component": "Variable: IGX\\_GRID\\_DIRECTIVES", + "file": "variables/IGX_GRID_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_GRID\\_DIRECTIVES**: readonly \\[*typeof* [`IgxGridComponent`](../classes/IgxGridComponent.md), *typeof* `IgxGroupByRowTemplateDirective`, *typeof* `IgxGridDetailTemplateDirective`, *ty" + }, + "IGX_GRID_SERVICE_BASE": { + "title": "Variable: IGX\\_GRID\\_SERVICE\\_BASE", + "component": "Variable: IGX\\_GRID\\_SERVICE\\_BASE", + "file": "variables/IGX_GRID_SERVICE_BASE.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_GRID\\_SERVICE\\_BASE**: `any`" + }, + "IGX_GRID_VALIDATION_DIRECTIVES": { + "title": "Variable: IGX\\_GRID\\_VALIDATION\\_DIRECTIVES", + "component": "Variable: IGX\\_GRID\\_VALIDATION\\_DIRECTIVES", + "file": "variables/IGX_GRID_VALIDATION_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_GRID\\_VALIDATION\\_DIRECTIVES**: readonly \\[*typeof* [`IgxColumnRequiredValidatorDirective`](../classes/IgxColumnRequiredValidatorDirective.md), *typeof* [`IgxColumnMinValidatorDirecti" + }, + "IGX_HIERARCHICAL_GRID_DIRECTIVES": { + "title": "Variable: IGX\\_HIERARCHICAL\\_GRID\\_DIRECTIVES", + "component": "Variable: IGX\\_HIERARCHICAL\\_GRID\\_DIRECTIVES", + "file": "variables/IGX_HIERARCHICAL_GRID_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_HIERARCHICAL\\_GRID\\_DIRECTIVES**: readonly \\[*typeof* [`IgxHierarchicalGridComponent`](../classes/IgxHierarchicalGridComponent.md), *typeof* [`IgxRowIslandComponent`](../classes/IgxRo" + }, + "IGX_INPUT_GROUP_DIRECTIVES": { + "title": "Variable: IGX\\_INPUT\\_GROUP\\_DIRECTIVES", + "component": "Variable: IGX\\_INPUT\\_GROUP\\_DIRECTIVES", + "file": "variables/IGX_INPUT_GROUP_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_INPUT\\_GROUP\\_DIRECTIVES**: readonly \\[*typeof* [`IgxInputGroupComponent`](../classes/IgxInputGroupComponent.md), *typeof* [`IgxInputDirective`](../classes/IgxInputDirective.md), *typ" + }, + "IGX_INPUT_GROUP_TYPE": { + "title": "Variable: IGX\\_INPUT\\_GROUP\\_TYPE", + "component": "Variable: IGX\\_INPUT\\_GROUP\\_TYPE", + "file": "variables/IGX_INPUT_GROUP_TYPE.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_INPUT\\_GROUP\\_TYPE**: `any`" + }, + "IGX_LINEAR_PROGRESS_BAR_DIRECTIVES": { + "title": "Variable: IGX\\_LINEAR\\_PROGRESS\\_BAR\\_DIRECTIVES", + "component": "Variable: IGX\\_LINEAR\\_PROGRESS\\_BAR\\_DIRECTIVES", + "file": "variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_LINEAR\\_PROGRESS\\_BAR\\_DIRECTIVES**: readonly \\[*typeof* [`IgxLinearProgressBarComponent`](../classes/IgxLinearProgressBarComponent.md), *typeof* [`IgxProgressBarGradientDirective`](." + }, + "IGX_LIST_DIRECTIVES": { + "title": "Variable: IGX\\_LIST\\_DIRECTIVES", + "component": "Variable: IGX\\_LIST\\_DIRECTIVES", + "file": "variables/IGX_LIST_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_LIST\\_DIRECTIVES**: readonly \\[*typeof* [`IgxListComponent`](../classes/IgxListComponent.md), *typeof* [`IgxListItemComponent`](../classes/IgxListItemComponent.md), *typeof* [`IgxList" + }, + "IGX_NAVBAR_DIRECTIVES": { + "title": "Variable: IGX\\_NAVBAR\\_DIRECTIVES", + "component": "Variable: IGX\\_NAVBAR\\_DIRECTIVES", + "file": "variables/IGX_NAVBAR_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_NAVBAR\\_DIRECTIVES**: readonly \\[*typeof* [`IgxNavbarComponent`](../classes/IgxNavbarComponent.md), *typeof* [`IgxNavbarActionDirective`](../classes/IgxNavbarActionDirective.md), *typ" + }, + "IGX_NAVIGATION_DRAWER_DIRECTIVES": { + "title": "Variable: IGX\\_NAVIGATION\\_DRAWER\\_DIRECTIVES", + "component": "Variable: IGX\\_NAVIGATION\\_DRAWER\\_DIRECTIVES", + "file": "variables/IGX_NAVIGATION_DRAWER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_NAVIGATION\\_DRAWER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxNavigationDrawerComponent`](../classes/IgxNavigationDrawerComponent.md), *typeof* [`IgxNavDrawerItemDirective`](../classes/I" + }, + "IGX_PAGINATOR_DIRECTIVES": { + "title": "Variable: IGX\\_PAGINATOR\\_DIRECTIVES", + "component": "Variable: IGX\\_PAGINATOR\\_DIRECTIVES", + "file": "variables/IGX_PAGINATOR_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_PAGINATOR\\_DIRECTIVES**: readonly \\[*typeof* [`IgxPaginatorComponent`](../classes/IgxPaginatorComponent.md), *typeof* [`IgxPageNavigationComponent`](../classes/IgxPageNavigationCompon" + }, + "IGX_PIVOT_GRID_DIRECTIVES": { + "title": "Variable: IGX\\_PIVOT\\_GRID\\_DIRECTIVES", + "component": "Variable: IGX\\_PIVOT\\_GRID\\_DIRECTIVES", + "file": "variables/IGX_PIVOT_GRID_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_PIVOT\\_GRID\\_DIRECTIVES**: readonly \\[*typeof* [`IgxPivotGridComponent`](../classes/IgxPivotGridComponent.md), *typeof* [`IgxPivotDataSelectorComponent`](../classes/IgxPivotDataSelect" + }, + "IGX_PROGRESS_BAR_DIRECTIVES": { + "title": "Variable: IGX\\_PROGRESS\\_BAR\\_DIRECTIVES", + "component": "Variable: IGX\\_PROGRESS\\_BAR\\_DIRECTIVES", + "file": "variables/IGX_PROGRESS_BAR_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_PROGRESS\\_BAR\\_DIRECTIVES**: readonly \\[*typeof* [`IgxLinearProgressBarComponent`](../classes/IgxLinearProgressBarComponent.md), *typeof* [`IgxCircularProgressBarComponent`](../classe" + }, + "IGX_QUERY_BUILDER_DIRECTIVES": { + "title": "Variable: IGX\\_QUERY\\_BUILDER\\_DIRECTIVES", + "component": "Variable: IGX\\_QUERY\\_BUILDER\\_DIRECTIVES", + "file": "variables/IGX_QUERY_BUILDER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_QUERY\\_BUILDER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxQueryBuilderComponent`](../classes/IgxQueryBuilderComponent.md), *typeof* [`IgxQueryBuilderHeaderComponent`](../classes/IgxQuery" + }, + "IGX_RADIO_GROUP_DIRECTIVES": { + "title": "Variable: IGX\\_RADIO\\_GROUP\\_DIRECTIVES", + "component": "Variable: IGX\\_RADIO\\_GROUP\\_DIRECTIVES", + "file": "variables/IGX_RADIO_GROUP_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_RADIO\\_GROUP\\_DIRECTIVES**: readonly \\[*typeof* [`IgxRadioGroupDirective`](../classes/IgxRadioGroupDirective.md), *typeof* [`IgxRadioComponent`](../classes/IgxRadioComponent.md)\\]" + }, + "IGX_SELECT_DIRECTIVES": { + "title": "Variable: IGX\\_SELECT\\_DIRECTIVES", + "component": "Variable: IGX\\_SELECT\\_DIRECTIVES", + "file": "variables/IGX_SELECT_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_SELECT\\_DIRECTIVES**: readonly \\[*typeof* [`IgxSelectComponent`](../classes/IgxSelectComponent.md), *typeof* [`IgxSelectItemComponent`](../classes/IgxSelectItemComponent.md), *typeof*" + }, + "IGX_SIMPLE_COMBO_DIRECTIVES": { + "title": "Variable: IGX\\_SIMPLE\\_COMBO\\_DIRECTIVES", + "component": "Variable: IGX\\_SIMPLE\\_COMBO\\_DIRECTIVES", + "file": "variables/IGX_SIMPLE_COMBO_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_SIMPLE\\_COMBO\\_DIRECTIVES**: readonly \\[*typeof* [`IgxSimpleComboComponent`](../classes/IgxSimpleComboComponent.md), *typeof* [`IgxComboAddItemDirective`](../classes/IgxComboAddItemDi" + }, + "IGX_SLIDER_DIRECTIVES": { + "title": "Variable: IGX\\_SLIDER\\_DIRECTIVES", + "component": "Variable: IGX\\_SLIDER\\_DIRECTIVES", + "file": "variables/IGX_SLIDER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_SLIDER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxSliderComponent`](../classes/IgxSliderComponent.md), *typeof* [`IgxThumbFromTemplateDirective`](../classes/IgxThumbFromTemplateDirective" + }, + "IGX_SPLITTER_DIRECTIVES": { + "title": "Variable: IGX\\_SPLITTER\\_DIRECTIVES", + "component": "Variable: IGX\\_SPLITTER\\_DIRECTIVES", + "file": "variables/IGX_SPLITTER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_SPLITTER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxSplitterComponent`](../classes/IgxSplitterComponent.md), *typeof* [`IgxSplitterPaneComponent`](../classes/IgxSplitterPaneComponent.md)" + }, + "IGX_STEPPER_DIRECTIVES": { + "title": "Variable: IGX\\_STEPPER\\_DIRECTIVES", + "component": "Variable: IGX\\_STEPPER\\_DIRECTIVES", + "file": "variables/IGX_STEPPER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_STEPPER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxStepComponent`](../classes/IgxStepComponent.md), *typeof* [`IgxStepperComponent`](../classes/IgxStepperComponent.md), *typeof* [`IgxSte" + }, + "IGX_TABS_DIRECTIVES": { + "title": "Variable: IGX\\_TABS\\_DIRECTIVES", + "component": "Variable: IGX\\_TABS\\_DIRECTIVES", + "file": "variables/IGX_TABS_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_TABS\\_DIRECTIVES**: readonly \\[*typeof* [`IgxTabsComponent`](../classes/IgxTabsComponent.md), *typeof* [`IgxTabItemComponent`](../classes/IgxTabItemComponent.md), *typeof* [`IgxTabHea" + }, + "IGX_TIME_PICKER_DIRECTIVES": { + "title": "Variable: IGX\\_TIME\\_PICKER\\_DIRECTIVES", + "component": "Variable: IGX\\_TIME\\_PICKER\\_DIRECTIVES", + "file": "variables/IGX_TIME_PICKER_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_TIME\\_PICKER\\_DIRECTIVES**: readonly \\[*typeof* [`IgxTimePickerComponent`](../classes/IgxTimePickerComponent.md), *typeof* [`IgxPickerActionsDirective`](../classes/IgxPickerActionsDir" + }, + "IGX_TOOLTIP_DIRECTIVES": { + "title": "Variable: IGX\\_TOOLTIP\\_DIRECTIVES", + "component": "Variable: IGX\\_TOOLTIP\\_DIRECTIVES", + "file": "variables/IGX_TOOLTIP_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_TOOLTIP\\_DIRECTIVES**: readonly \\[*typeof* [`IgxTooltipDirective`](../classes/IgxTooltipDirective.md), *typeof* [`IgxTooltipTargetDirective`](../classes/IgxTooltipTargetDirective.md)\\" + }, + "IGX_TREE_DIRECTIVES": { + "title": "Variable: IGX\\_TREE\\_DIRECTIVES", + "component": "Variable: IGX\\_TREE\\_DIRECTIVES", + "file": "variables/IGX_TREE_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_TREE\\_DIRECTIVES**: readonly \\[*typeof* [`IgxTreeComponent`](../classes/IgxTreeComponent.md), *typeof* [`IgxTreeNodeComponent`](../classes/IgxTreeNodeComponent.md), *typeof* `IgxTreeN" + }, + "IGX_TREE_GRID_DIRECTIVES": { + "title": "Variable: IGX\\_TREE\\_GRID\\_DIRECTIVES", + "component": "Variable: IGX\\_TREE\\_GRID\\_DIRECTIVES", + "file": "variables/IGX_TREE_GRID_DIRECTIVES.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IGX\\_TREE\\_GRID\\_DIRECTIVES**: readonly \\[*typeof* [`IgxTreeGridComponent`](../classes/IgxTreeGridComponent.md), *typeof* `IgxTreeGridGroupByAreaComponent`, *typeof* `IgxTreeGridGroupingPi" + }, + "IndigoIcons": { + "title": "Variable: IndigoIcons", + "component": "Variable: IndigoIcons", + "file": "variables/IndigoIcons.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **IndigoIcons**: `Map`\\<`string`, [`setCurrentI18n`](setCurrentI18n.md)\\>" + }, + "InputResourceStringsEN": { + "title": "Variable: InputResourceStringsEN", + "component": "Variable: InputResourceStringsEN", + "file": "variables/InputResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **InputResourceStringsEN**: [`IInputResourceStrings`](../interfaces/IInputResourceStrings.md)" + }, + "ListResourceStringsEN": { + "title": "Variable: ListResourceStringsEN", + "component": "Variable: ListResourceStringsEN", + "file": "variables/ListResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **ListResourceStringsEN**: [`IListResourceStrings`](../type-aliases/IListResourceStrings.md)" + }, + "NAVIGATION_KEYS": { + "title": "Variable: NAVIGATION\\_KEYS", + "component": "Variable: NAVIGATION\\_KEYS", + "file": "variables/NAVIGATION_KEYS.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **NAVIGATION\\_KEYS**: `Set`\\<`string`\\>" + }, + "PaginatorResourceStringsEN": { + "title": "Variable: PaginatorResourceStringsEN", + "component": "Variable: PaginatorResourceStringsEN", + "file": "variables/PaginatorResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **PaginatorResourceStringsEN**: [`IPaginatorResourceStrings`](../type-aliases/IPaginatorResourceStrings.md)" + }, + "QueryBuilderResourceStringsEN": { + "title": "Variable: QueryBuilderResourceStringsEN", + "component": "Variable: QueryBuilderResourceStringsEN", + "file": "variables/QueryBuilderResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **QueryBuilderResourceStringsEN**: [`IQueryBuilderResourceStrings`](../type-aliases/IQueryBuilderResourceStrings.md)" + }, + "setCurrentI18n": { + "title": "Variable: setCurrentI18n", + "component": "Variable: setCurrentI18n", + "file": "variables/setCurrentI18n.md", + "type": "unknown", + "keywords": [], + "summary": "> **setCurrentI18n**: `any`" + }, + "THEME_TOKEN": { + "title": "Variable: THEME\\_TOKEN", + "component": "Variable: THEME\\_TOKEN", + "file": "variables/THEME_TOKEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **THEME\\_TOKEN**: `any`" + }, + "TimePickerResourceStringsEN": { + "title": "Variable: TimePickerResourceStringsEN", + "component": "Variable: TimePickerResourceStringsEN", + "file": "variables/TimePickerResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **TimePickerResourceStringsEN**: [`ITimePickerResourceStrings`](../type-aliases/ITimePickerResourceStrings.md)" + }, + "TreeResourceStringsEN": { + "title": "Variable: TreeResourceStringsEN", + "component": "Variable: TreeResourceStringsEN", + "file": "variables/TreeResourceStringsEN.md", + "type": "unknown", + "keywords": [], + "summary": "> `const` **TreeResourceStringsEN**: [`ITreeResourceStrings`](../type-aliases/ITreeResourceStrings.md)" + } +} \ No newline at end of file diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Action.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Action.md new file mode 100644 index 000000000..aacc4a6db --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Action.md @@ -0,0 +1,25 @@ +# Interface: Action\<T\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L38) + +## Type Parameters + +### T + +`T` *extends* [`Transaction`](Transaction.md) + +## Properties + +### recordRef + +> **recordRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L40) + +*** + +### transaction + +> **transaction**: `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L39) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AnimationPlayer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AnimationPlayer.md new file mode 100644 index 000000000..f9d269e06 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AnimationPlayer.md @@ -0,0 +1,117 @@ +# Interface: AnimationPlayer + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L15) + +## Properties + +### animationEnd + +> **animationEnd**: `EventEmitter`\<[`IBaseEventArgs`](IBaseEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L23) + +Emits when the animation ends + +*** + +### animationStart + +> **animationStart**: `EventEmitter`\<[`IBaseEventArgs`](IBaseEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L19) + +Emits when the animation starts + +*** + +### position + +> **position**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L27) + +Current position of the animation. + +## Methods + +### destroy() + +> **destroy**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L47) + +Destroys the animation. + +#### Returns + +`void` + +*** + +### finish() + +> **finish**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L39) + +Ends the animation + +#### Returns + +`void` + +*** + +### hasStarted() + +> **hasStarted**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L51) + +Reports whether the animation has started. + +#### Returns + +`boolean` + +*** + +### init() + +> **init**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L31) + +Initialize the animation + +#### Returns + +`void` + +*** + +### play() + +> **play**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L35) + +Runs the animation + +#### Returns + +`void` + +*** + +### reset() + +> **reset**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L43) + +Resets the animation to its initial state + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AnimationService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AnimationService.md new file mode 100644 index 000000000..5705bff51 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AnimationService.md @@ -0,0 +1,31 @@ +# Interface: AnimationService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L5) + +## Properties + +### buildAnimation + +> **buildAnimation**: (`animationMetaData`, `element`) => [`AnimationPlayer`](AnimationPlayer.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/animation/animation.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/animation/animation.ts#L12) + +Creates an `AnimationPlayer` instance + +#### Parameters + +##### animationMetaData + +`AnimationReferenceMetadata` + +##### element + +`HTMLElement` + +The DOM element on which animation will be applied + +#### Returns + +[`AnimationPlayer`](AnimationPlayer.md) + +AnimationPlayer diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ArrowFit.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ArrowFit.md new file mode 100644 index 000000000..0dbb37900 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ArrowFit.md @@ -0,0 +1,53 @@ +# Interface: ArrowFit + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L30) + +## Properties + +### arrowRect? + +> `readonly` `optional` **arrowRect?**: `Partial`\<`DOMRect`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L32) + +Rectangle of the arrow element. + +*** + +### direction? + +> `readonly` `optional` **direction?**: `"left"` \| `"right"` \| `"bottom"` \| `"top"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L36) + +Direction in which the arrow points. + +*** + +### left? + +> `optional` **left?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L40) + +Horizontal offset of the arrow element from the tooltip + +*** + +### tooltipRect? + +> `readonly` `optional` **tooltipRect?**: `Partial`\<`DOMRect`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L34) + +Rectangle of the tooltip element. + +*** + +### top? + +> `optional` **top?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts#L38) + +Vertical offset of the arrow element from the tooltip diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AutocompleteOverlaySettings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AutocompleteOverlaySettings.md new file mode 100644 index 000000000..97d202b6a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AutocompleteOverlaySettings.md @@ -0,0 +1,33 @@ +# Interface: AutocompleteOverlaySettings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L30) + +## Properties + +### outlet? + +> `optional` **outlet?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L36) + +Set the outlet container to attach the overlay to + +*** + +### positionStrategy? + +> `optional` **positionStrategy?**: [`IPositionStrategy`](IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L32) + +Position strategy to use with this settings + +*** + +### scrollStrategy? + +> `optional` **scrollStrategy?**: [`IScrollStrategy`](IScrollStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L34) + +Scroll strategy to use with this settings diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AutocompleteSelectionChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AutocompleteSelectionChangingEventArgs.md new file mode 100644 index 000000000..74a4ebf0d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/AutocompleteSelectionChangingEventArgs.md @@ -0,0 +1,49 @@ +# Interface: AutocompleteSelectionChangingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L23) + +Interface that encapsulates onItemSelection event arguments - new value and cancel selection. + +## Export + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### value + +> **value**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts#L27) + +New value selected from the drop down diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/BannerCancelEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/BannerCancelEventArgs.md new file mode 100644 index 000000000..143e866be --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/BannerCancelEventArgs.md @@ -0,0 +1,47 @@ +# Interface: BannerCancelEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L32) + +## Extends + +- [`BannerEventArgs`](BannerEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L29) + +#### Inherited from + +[`BannerEventArgs`](BannerEventArgs.md).[`event`](BannerEventArgs.md#event) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`BannerEventArgs`](BannerEventArgs.md).[`owner`](BannerEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/BannerEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/BannerEventArgs.md new file mode 100644 index 000000000..b36dac9ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/BannerEventArgs.md @@ -0,0 +1,33 @@ +# Interface: BannerEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L28) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`BannerCancelEventArgs`](BannerCancelEventArgs.md) + +## Properties + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/banner.component.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/banner.component.ts#L29) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CancelableBrowserEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CancelableBrowserEventArgs.md new file mode 100644 index 000000000..95e536b79 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CancelableBrowserEventArgs.md @@ -0,0 +1,37 @@ +# Interface: CancelableBrowserEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L421) + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md) + +## Extended by + +- [`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md) +- [`ToggleViewCancelableEventArgs`](ToggleViewCancelableEventArgs.md) +- [`OverlayClosingEventArgs`](OverlayClosingEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L424) + +Browser event diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CancelableEventArgs.md new file mode 100644 index 000000000..3aa0bbb2e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CancelableEventArgs.md @@ -0,0 +1,37 @@ +# Interface: CancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L407) + +## Extended by + +- [`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md) +- [`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md) +- [`BannerCancelEventArgs`](BannerCancelEventArgs.md) +- [`IComboItemAdditionEvent`](IComboItemAdditionEvent.md) +- [`ISimpleComboSelectionChangingEventArgs`](ISimpleComboSelectionChangingEventArgs.md) +- [`IDialogCancellableEventArgs`](IDialogCancellableEventArgs.md) +- [`AutocompleteSelectionChangingEventArgs`](AutocompleteSelectionChangingEventArgs.md) +- [`IGridEditEventArgs`](IGridEditEventArgs.md) +- [`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md) +- [`IColumnResizingEventArgs`](IColumnResizingEventArgs.md) +- [`IRowSelectionEventArgs`](IRowSelectionEventArgs.md) +- [`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md) +- [`IRowDragStartEventArgs`](IRowDragStartEventArgs.md) +- [`IPinRowEventArgs`](IPinRowEventArgs.md) +- [`ISortingEventArgs`](ISortingEventArgs.md) +- [`IFilteringEventArgs`](IFilteringEventArgs.md) +- [`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md) +- [`IPageCancellableEventArgs`](IPageCancellableEventArgs.md) +- [`OverlayCancelableEventArgs`](OverlayCancelableEventArgs.md) +- [`ISelectionEventArgs`](ISelectionEventArgs.md) +- [`IExpansionPanelCancelableEventArgs`](IExpansionPanelCancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CarouselAnimationSettings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CarouselAnimationSettings.md new file mode 100644 index 000000000..c1303880e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CarouselAnimationSettings.md @@ -0,0 +1,19 @@ +# Interface: CarouselAnimationSettings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L10) + +## Properties + +### enterAnimation + +> **enterAnimation**: `AnimationReferenceMetadata` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L11) + +*** + +### leaveAnimation + +> **leaveAnimation**: `AnimationReferenceMetadata` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CellType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CellType.md new file mode 100644 index 000000000..f211e9aac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CellType.md @@ -0,0 +1,315 @@ +# Interface: CellType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L39) + +Interface representing a cell in the grid. It is essentially the blueprint to a cell object. +Contains definitions of properties and methods, relevant to a cell + +## Properties + +### active + +> **active**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L47) + +Indicates whether the cell is currently active (focused). + +*** + +### cellID? + +> `optional` **cellID?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L65) + +Optional; The `cellID` is the unique key, used to identify the cell + +*** + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L56) + +Represents the column that the cell belongs to. + +*** + +### editable + +> **editable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L49) + +Indicates whether the cell can be edited. + +*** + +### editMode + +> **editMode**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L51) + +Indicates whether the cell is currently in edit mode. + +*** + +### editValue + +> **editValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L43) + +The value to display when the cell is in edit mode. + +*** + +### grid + +> **grid**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L61) + +Represents the grid instance containing the cell + +*** + +### id? + +> `optional` **id?**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L63) + +Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell. + +#### columnID + +> **columnID**: `number` + +#### rowID + +> **rowID**: `any` + +#### rowIndex + +> **rowIndex**: `number` + +*** + +### nativeElement? + +> `optional` **nativeElement?**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L54) + +Represents the native HTML element of the cell itself + +*** + +### readonly? + +> `optional` **readonly?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L71) + +*** + +### row + +> **row**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L59) + +Represents the row that the cell belongs to + +*** + +### selected + +> **selected**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L45) + +Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. + +*** + +### title? + +> `optional` **title?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L73) + +An optional title to display for the cell + +*** + +### update + +> **update**: (`value`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L79) + +A method definition to update the value of the cell. + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +*** + +### validation? + +> `readonly` `optional` **validation?**: [`IGridValidationState`](IGridValidationState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L70) + +Optional; An object representing the validation state of the cell. +Whether it's valid or invalid, and if it has errors + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L41) + +The current value of the cell. + +*** + +### visibleColumnIndex? + +> `optional` **visibleColumnIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L77) + +The index of the column that the cell belongs to. It counts only the visible (not hidden) columns + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L75) + +The CSS width of the cell as a string. + +## Methods + +### activate()? + +> `optional` **activate**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L94) + +Optional +A method to activate the cell. +It takes a focus or keyboard event as an argument + +#### Parameters + +##### event + +`KeyboardEvent` \| `FocusEvent` + +#### Returns + +`void` + +*** + +### calculateSizeToFit()? + +> `optional` **calculateSizeToFit**(`range`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L87) + +Optional; +A method definition to calculate the size of the cell to fit the content +The method can be used to calculate the size of the cell with the longest content and resize all cells to that size + +#### Parameters + +##### range + +`any` + +#### Returns + +`number` + +*** + +### onClick()? + +> `optional` **onClick**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L108) + +Optional +A method to handle click events on the cell +It takes a mouse event as an argument + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### onDoubleClick()? + +> `optional` **onDoubleClick**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L101) + +Optional +A method to handle double-click events on the cell +It takes a mouse event as an argument + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### setEditMode()? + +> `optional` **setEditMode**(`value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L81) + +A method definition to start or end the edit mode of the cell. It takes a boolean value as an argument + +#### Parameters + +##### value + +`boolean` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ColumnGroupsCache.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ColumnGroupsCache.md new file mode 100644 index 000000000..13879b0eb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ColumnGroupsCache.md @@ -0,0 +1,19 @@ +# Interface: ColumnGroupsCache + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L23) + +## Properties + +### level + +> **level**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L24) + +*** + +### visibleIndex + +> **visibleIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L25) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ColumnType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ColumnType.md new file mode 100644 index 000000000..8d4a3c344 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ColumnType.md @@ -0,0 +1,982 @@ +# Interface: ColumnType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L164) + +Represents a column in the `GridType`. It is essentially the blueprint to a column object. +Contains definitions of properties and methods, relevant to a column + +## Extends + +- [`FieldType`](FieldType.md) + +## Properties + +### additionalTemplateContext + +> **additionalTemplateContext**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:337](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L337) + +*** + +### applySelectableClass + +> **applySelectableClass**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:344](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L344) + +*** + +### calcWidth + +> **calcWidth**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:209](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L209) + +Custom CSS styling, applied to every column +calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth + +*** + +### ~~children~~ + +> **children**: `QueryList`\<`ColumnType`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L171) + +A list containing all the child columns under this column (if any). + +#### Deprecated + +in version 18.1.0. Use the `childColumns` property instead. + +*** + +### colEnd + +> **colEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L314) + +*** + +### collapsible? + +> `optional` **collapsible?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L251) + +Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation + +*** + +### collapsibleIndicatorTemplate? + +> `optional` **collapsibleIndicatorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L195) + +The template reference for the collapsible indicator of the column. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### colStart + +> **colStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L313) + +*** + +### columnGroup + +> **columnGroup**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:259](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L259) + +Specifies whether the column belongs to a group of columns. + +*** + +### columnLayout + +> **columnLayout**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:308](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L308) + +*** + +### columnLayoutChild + +> **columnLayoutChild**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:319](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L319) + +*** + +### dataType + +> **dataType**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:232](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L232) + +Represents the type of data for the column: +string, number, boolean, currency, date, time, etc. + +#### Overrides + +[`FieldType`](FieldType.md).[`dataType`](FieldType.md#datatype) + +*** + +### defaultDateTimeFormat? + +> `optional` **defaultDateTimeFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L148) + +Default date/time format for Date/Time fields. + +#### Inherited from + +[`FieldType`](FieldType.md).[`defaultDateTimeFormat`](FieldType.md#defaultdatetimeformat) + +*** + +### defaultTimeFormat? + +> `optional` **defaultTimeFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L143) + +Default time format for Date/Time fields. + +#### Inherited from + +[`FieldType`](FieldType.md).[`defaultTimeFormat`](FieldType.md#defaulttimeformat) + +*** + +### disabledSummaries? + +> `optional` **disabledSummaries?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L293) + +*** + +### disableHiding + +> **disableHiding**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:271](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L271) + +Indicates whether a column can be hidden. If the value is true, the column cannot be hidden + +*** + +### disablePinning + +> **disablePinning**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:269](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L269) + +Indicates whether a column can be pinned. If the value is true, the column cannot be pinned + +*** + +### editable + +> **editable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L253) + +Indicated whether the column can be edited. If the value is true, the column can be edited + +*** + +### editorOptions + +> **editorOptions**: [`IColumnEditorOptions`](IColumnEditorOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L236) + +Sets properties on the default column editors + +#### Overrides + +[`FieldType`](FieldType.md).[`editorOptions`](FieldType.md#editoroptions) + +*** + +### expanded + +> **expanded**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L302) + +Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L112) + +The internal field name, used in expressions and queries. + +#### Inherited from + +[`FieldType`](FieldType.md).[`field`](FieldType.md#field) + +*** + +### filterable + +> **filterable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L265) + +Indicates whether a column can be filtered. If the value is true, the column can be filtered + +*** + +### filterCellTemplate + +> **filterCellTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L355) + +Represents a custom template for filtering +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### filteringExpressionsTree + +> **filteringExpressionsTree**: [`FilteringExpressionsTree`](../classes/FilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L290) + +The filtering expressions for the column. +The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. + +*** + +### filteringIgnoreCase + +> **filteringIgnoreCase**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L285) + +*** + +### filters? + +> `optional` **filters?**: [`IgxFilteringOperand`](../classes/IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L133) + +Optional filtering operands that apply to this field. + +#### Inherited from + +[`FieldType`](FieldType.md).[`filters`](FieldType.md#filters) + +*** + +### grid + +> **grid**: [`GridTypeBase`](GridTypeBase.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:166](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L166) + +Represents the instance of the parent `GridType` that contains this column. + +*** + +### groupable + +> **groupable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:261](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L261) + +Indicates whether a column can be put in a group. If the value is true, the column can be put in a group + +*** + +### groupingComparer + +> **groupingComparer**: (`a`, `b`) => `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L349) + +Represents a method with custom grouping comparator to determine the members of the group. + +#### Parameters + +##### a + +`any` + +##### b + +`any` + +#### Returns + +`number` + +*** + +### hasNestedPath + +> **hasNestedPath**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L336) + +*** + +### hasSummary + +> **hasSummary**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L291) + +*** + +### header? + +> `optional` **header?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L222) + +Optional +Represents the header text of the column + +#### Overrides + +[`FieldType`](FieldType.md).[`header`](FieldType.md#header) + +*** + +### headerClasses + +> **headerClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L197) + +Represents custom CSS classes applied to the header element. When added, they take different styling + +*** + +### headerGroupClasses + +> **headerGroupClasses**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:201](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L201) + +Represents custom CSS classes applied to the header group. When added, they take different styling + +*** + +### headerGroupStyles + +> **headerGroupStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L203) + +Represents custom CSS styles applied to the header group. When added, they take different styling + +*** + +### headerStyles + +> **headerStyles**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L199) + +Represents custom CSS styles applied to the header element. When added, they take different styling + +*** + +### headerTemplate + +> **headerTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L190) + +The template reference for the custom header of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### hidden + +> **hidden**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L267) + +Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L227) + +The index of the column within the grid. +Includes the hidden columns when counting + +*** + +### inlineEditorTemplate + +> **inlineEditorTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:241](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L241) + +The template reference for the custom inline editor of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### isFirstPinned + +> **isFirstPinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:343](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L343) + +Indicates whether the current column is the first for the grid to be pinned. +If the value is false, there are columns, that have been pinned before the current + +*** + +### isLastPinned + +> **isLastPinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L340) + +Indicates whether the current column is the last to be pinned. +If the value is false, there are columns, that have been pinned after the current + +*** + +### label? + +> `optional` **label?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L107) + +Display label for the field. + +#### Inherited from + +[`FieldType`](FieldType.md).[`label`](FieldType.md#label) + +*** + +### level + +> **level**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:310](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L310) + +Represents the hierarchical level of the column in the column layout + +*** + +### maxWidth + +> **maxWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L213) + +*** + +### maxWidthPercent + +> **maxWidthPercent**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L215) + +*** + +### maxWidthPx + +> **maxWidthPx**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L211) + +*** + +### merge + +> **merge**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L303) + +*** + +### mergingComparer + +> **mergingComparer**: (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L184) + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +#### Returns + +`boolean` + +*** + +### minWidth + +> **minWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L212) + +*** + +### minWidthPercent + +> **minWidthPercent**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:214](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L214) + +*** + +### minWidthPx + +> **minWidthPx**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L210) + +*** + +### parent + +> **parent**: `ColumnType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L334) + +Optional +The immediate parent (right above) column of this column (if any). +If there is no parent, that means the current column is the root parent + +*** + +### pinned + +> **pinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L300) + +Indicates if the column is currently pinned. If the value is true, the column is pinned + +*** + +### pipeArgs + +> **pipeArgs**: [`IColumnPipeArgs`](IColumnPipeArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L335) + +Optional arguments for any pipe applied to the field. + +#### Overrides + +[`FieldType`](FieldType.md).[`pipeArgs`](FieldType.md#pipeargs) + +*** + +### resizable + +> **resizable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:255](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L255) + +Specifies whether the column can be resized. If the value is true, the column can be resized + +*** + +### resolvedWidth + +> **resolvedWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L216) + +*** + +### rowEnd + +> **rowEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:312](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L312) + +*** + +### rowStart + +> **rowStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L311) + +*** + +### searchable + +> **searchable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L257) + +Specifies whether the data of the column can be searched. If the value is true, the column data can be searched + +*** + +### selectable + +> **selectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:307](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L307) + +Indicates if the column can be selected. If the value is true, the column can be selected + +*** + +### selected + +> **selected**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:305](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L305) + +Indicates if the column is currently selected. If the value is true, the column is selected + +*** + +### sortable + +> **sortable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L263) + +Indicates whether a column can be sorted. If the value is true, the column can be sorted. + +*** + +### sortingIgnoreCase + +> **sortingIgnoreCase**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:282](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L282) + +Indicates whether the search should match results, no matter the case of the letters (upper and lower) +If the value is false, the result will depend on the case (example: `E` will not match `e`) +If the value is true, the result will not depend on the case (example: `E` will match `e`) + +*** + +### sortStrategy + +> **sortStrategy**: [`ISortingStrategy`](ISortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:276](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L276) + +The sorting strategy used for sorting this column. +The interface contains a method sort that sorts the provided data based on the given sorting expressions + +*** + +### summaries + +> **summaries**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:292](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L292) + +*** + +### summaryTemplate + +> **summaryTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L298) + +The template reference for a summary of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### title + +> **title**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:346](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L346) + +The title of the column, used for accessibility purposes + +*** + +### topLevelParent? + +> `optional` **topLevelParent?**: `ColumnType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:326](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L326) + +Optional +The root parent of this column (if any). +If there is no root parent, that means the current column is the root parent + +*** + +### validators + +> **validators**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L183) + +*** + +### visibleIndex + +> **visibleIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L246) + +The index of the column within the grid. +Does not include the hidden columns when counting + +*** + +### width + +> **width**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:320](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L320) + +## Accessors + +### childColumns + +#### Get Signature + +> **get** **childColumns**(): `ColumnType`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L176) + +A list containing all the child columns under this column (if any). +Empty without children or if this column is not Group or Layout. + +##### Returns + +`ColumnType`[] + +## Methods + +### formatter()? + +> `optional` **formatter**(`value`, `rowData?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L157) + +Optional formatter function to transform the value before display. + +#### Parameters + +##### value + +`any` + +The value of the field. + +##### rowData? + +`any` + +Optional row data that contains this field. + +#### Returns + +`any` + +The formatted value. + +#### Inherited from + +[`FieldType`](FieldType.md).[`formatter`](FieldType.md#formatter) + +*** + +### getAutoSize() + +> **getAutoSize**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:363](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L363) + +A method definition to retrieve the set CSS size + +#### Returns + +`string` + +*** + +### getCellWidth() + +> **getCellWidth**(): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L366) + +A method definition to retrieve the set CSS width of the cells under the column + +#### Returns + +`string` + +*** + +### getGridTemplate() + +> **getGridTemplate**(`isRow`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:367](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L367) + +#### Parameters + +##### isRow + +`boolean` + +#### Returns + +`string` + +*** + +### getResizableColUnderEnd() + +> **getResizableColUnderEnd**(): `MRLResizeColumnInfo`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:364](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L364) + +#### Returns + +`MRLResizeColumnInfo`[] + +*** + +### move() + +> **move**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:361](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L361) + +A method definition to move the column to the specified index. +It takes the index of type number as a parameter + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +*** + +### pin() + +> **pin**(`index?`, `pinningPosition?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:372](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L372) + +Pins the column at the specified index (if not already pinned). + +#### Parameters + +##### index? + +`number` + +##### pinningPosition? + +[`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +#### Returns + +`boolean` + +*** + +### populateVisibleIndexes()? + +> `optional` **populateVisibleIndexes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:370](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L370) + +#### Returns + +`void` + +*** + +### toggleVisibility() + +> **toggleVisibility**(`value?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:369](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L369) + +A method definition to toggle column visibility (hidden or visible) + +#### Parameters + +##### value? + +`boolean` + +#### Returns + +`void` + +*** + +### unpin() + +> **unpin**(`index?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:374](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L374) + +Unpins the column at the specified index (if not already unpinned). + +#### Parameters + +##### index? + +`number` + +#### Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CustomDateRange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CustomDateRange.md new file mode 100644 index 000000000..71b78c0d3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/CustomDateRange.md @@ -0,0 +1,21 @@ +# Interface: CustomDateRange + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L45) + +Represents a range between two dates and a label used for predefined and custom date ranges. + +## Properties + +### dateRange + +> **dateRange**: [`DateRange`](DateRange.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L47) + +*** + +### label + +> **label**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L46) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DatePartDeltas.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DatePartDeltas.md new file mode 100644 index 000000000..ac81e7ac5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DatePartDeltas.md @@ -0,0 +1,61 @@ +# Interface: DatePartDeltas + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L25) + +Delta values used for spin actions. + +## Properties + +### date? + +> `optional` **date?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L26) + +*** + +### fractionalSeconds? + +> `optional` **fractionalSeconds?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L32) + +*** + +### hours? + +> `optional` **hours?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L29) + +*** + +### minutes? + +> `optional` **minutes?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L30) + +*** + +### month? + +> `optional` **month?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L27) + +*** + +### seconds? + +> `optional` **seconds?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L31) + +*** + +### year? + +> `optional` **year?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/date-parts.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/date-parts.ts#L28) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DateRange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DateRange.md new file mode 100644 index 000000000..3691ddfdf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DateRange.md @@ -0,0 +1,21 @@ +# Interface: DateRange + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L39) + +Represents a range between two dates. + +## Properties + +### end + +> **end**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L41) + +*** + +### start + +> **start**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L40) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DateRangeDescriptor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DateRangeDescriptor.md new file mode 100644 index 000000000..b685d9bd9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DateRangeDescriptor.md @@ -0,0 +1,19 @@ +# Interface: DateRangeDescriptor + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L1) + +## Properties + +### dateRange? + +> `optional` **dateRange?**: `Date`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L3) + +*** + +### type + +> **type**: [`DateRangeType`](../enumerations/DateRangeType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/dates/dateRange.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/dates/dateRange.ts#L2) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DimensionValueType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DimensionValueType.md new file mode 100644 index 000000000..c6ebcb77d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/DimensionValueType.md @@ -0,0 +1,19 @@ +# Interface: DimensionValueType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L257) + +## Properties + +### children + +> **children**: `Map`\<`string`, `string` \| `DimensionValueType`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:259](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L259) + +*** + +### value + +> **value**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:258](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L258) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/EntityType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/EntityType.md new file mode 100644 index 000000000..112e48555 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/EntityType.md @@ -0,0 +1,38 @@ +# Interface: EntityType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L381) + +Describes an entity in the QueryBuilder. +An entity represents a logical grouping of fields and can have nested child entities. + +## Properties + +### childEntities? + +> `optional` **childEntities?**: `EntityType`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L397) + +Optional child entities. +This allows building hierarchical or nested query structures. + +*** + +### fields + +> **fields**: [`FieldType`](FieldType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:391](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L391) + +The list of fields that belong to this entity. + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L386) + +The name of the entity. +Typically used as an identifier in expressions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FamilyMeta.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FamilyMeta.md new file mode 100644 index 000000000..c58b640cb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FamilyMeta.md @@ -0,0 +1,27 @@ +# Interface: FamilyMeta + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L30) + +## Properties + +### className + +> **className**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L31) + +*** + +### prefix? + +> `optional` **prefix?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L33) + +*** + +### type + +> **type**: `IconType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L32) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FieldType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FieldType.md new file mode 100644 index 000000000..4bfd47d8a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FieldType.md @@ -0,0 +1,129 @@ +# Interface: FieldType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L103) + +Describes a field that can be used in the Grid and QueryBuilder components. + +## Extended by + +- [`ColumnType`](ColumnType.md) + +## Properties + +### dataType + +> **dataType**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L123) + +The data type of the field. + +*** + +### defaultDateTimeFormat? + +> `optional` **defaultDateTimeFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L148) + +Default date/time format for Date/Time fields. + +*** + +### defaultTimeFormat? + +> `optional` **defaultTimeFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L143) + +Default time format for Date/Time fields. + +*** + +### editorOptions? + +> `optional` **editorOptions?**: [`IFieldEditorOptions`](IFieldEditorOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L128) + +Options for the editor associated with this field. + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L112) + +The internal field name, used in expressions and queries. + +*** + +### filters? + +> `optional` **filters?**: [`IgxFilteringOperand`](../classes/IgxFilteringOperand.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L133) + +Optional filtering operands that apply to this field. + +*** + +### header? + +> `optional` **header?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L117) + +Optional column header for UI display purposes. + +*** + +### label? + +> `optional` **label?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L107) + +Display label for the field. + +*** + +### pipeArgs? + +> `optional` **pipeArgs?**: [`IFieldPipeArgs`](IFieldPipeArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L138) + +Optional arguments for any pipe applied to the field. + +## Methods + +### formatter()? + +> `optional` **formatter**(`value`, `rowData?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L157) + +Optional formatter function to transform the value before display. + +#### Parameters + +##### value + +`any` + +The value of the field. + +##### rowData? + +`any` + +Optional row data that contains this field. + +#### Returns + +`any` + +The formatted value. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FlatGridType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FlatGridType.md new file mode 100644 index 000000000..19c7a4cc2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/FlatGridType.md @@ -0,0 +1,4409 @@ +# Interface: FlatGridType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:989](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L989) + +An interface describing a Flat Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from `GridType` + +## Extends + +- [`GridType`](GridType.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### \_baseFontSize? + +> `optional` **\_baseFontSize?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L641) + +The default font size, calculated for each element + +#### Inherited from + +[`GridType`](GridType.md).[`_baseFontSize`](GridType.md#_basefontsize) + +*** + +### \_filteredSortedUnpinnedData + +> **\_filteredSortedUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L694) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredSortedUnpinnedData`](GridType.md#_filteredsortedunpinneddata) + +*** + +### \_filteredUnpinnedData + +> **\_filteredUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L693) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredUnpinnedData`](GridType.md#_filteredunpinneddata) + +*** + +### \_totalRecords + +> **\_totalRecords**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:705](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L705) + +#### Inherited from + +[`GridType`](GridType.md).[`_totalRecords`](GridType.md#_totalrecords) + +*** + +### activeNodeChange + +> **activeNodeChange**: `EventEmitter`\<[`IActiveNodeChangeEventArgs`](IActiveNodeChangeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:818](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L818) + +#### Inherited from + +[`GridType`](GridType.md).[`activeNodeChange`](GridType.md#activenodechange) + +*** + +### advancedFilteringExpressionsTree + +> **advancedFilteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:877](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L877) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTree`](GridType.md#advancedfilteringexpressionstree) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L878) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTreeChange`](GridType.md#advancedfilteringexpressionstreechange) + +*** + +### allowAdvancedFiltering + +> **allowAdvancedFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L872) + +#### Inherited from + +[`GridType`](GridType.md).[`allowAdvancedFiltering`](GridType.md#allowadvancedfiltering) + +*** + +### allowFiltering + +> **allowFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:445](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L445) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Inherited from + +[`GridType`](GridType.md).[`allowFiltering`](GridType.md#allowfiltering) + +*** + +### batchEditing + +> **batchEditing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L881) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditing`](GridType.md#batchediting) + +*** + +### batchEditingChange? + +> `optional` **batchEditingChange?**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:839](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L839) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditingChange`](GridType.md#batcheditingchange) + +*** + +### calcHeight + +> **calcHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:633](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L633) + +CSS styling calculated for an element: calcHeight, calcWidth, outerWidth + +#### Inherited from + +[`GridType`](GridType.md).[`calcHeight`](GridType.md#calcheight) + +*** + +### calcWidth + +> **calcWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L634) + +#### Inherited from + +[`GridType`](GridType.md).[`calcWidth`](GridType.md#calcwidth) + +*** + +### cascadeOnDelete? + +> `optional` **cascadeOnDelete?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:796](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L796) + +#### Inherited from + +[`GridType`](GridType.md).[`cascadeOnDelete`](GridType.md#cascadeondelete) + +*** + +### cdr + +> `readonly` **cdr**: `ChangeDetectorRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L753) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Inherited from + +[`GridType`](GridType.md).[`cdr`](GridType.md#cdr) + +*** + +### cellClick + +> **cellClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:820](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L820) + +#### Inherited from + +[`GridType`](GridType.md).[`cellClick`](GridType.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L849) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEdit`](GridType.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:850](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L850) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditDone`](GridType.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L848) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditEnter`](GridType.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L851) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditExit`](GridType.md#celleditexit) + +*** + +### cellMergeMode + +> **cellMergeMode**: [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L435) + +#### Inherited from + +[`GridType`](GridType.md).[`cellMergeMode`](GridType.md#cellmergemode) + +*** + +### cellSelection + +> **cellSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L774) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`cellSelection`](GridType.md#cellselection) + +*** + +### childDataKey? + +> `optional` **childDataKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L794) + +#### Inherited from + +[`GridType`](GridType.md).[`childDataKey`](GridType.md#childdatakey) + +*** + +### childLayoutKeys? + +> `optional` **childLayoutKeys?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:806](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L806) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutKeys`](GridType.md#childlayoutkeys) + +*** + +### childLayoutList? + +> `optional` **childLayoutList?**: `QueryList`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L807) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutList`](GridType.md#childlayoutlist) + +*** + +### columnInDrag + +> **columnInDrag**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L530) + +Indicates if the column of the grid is in drag mode + +#### Inherited from + +[`GridType`](GridType.md).[`columnInDrag`](GridType.md#columnindrag) + +*** + +### columnList + +> **columnList**: `QueryList`\<[`ColumnType`](ColumnType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L659) + +An unmodifiable list, containing all the columns of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`columnList`](GridType.md#columnlist) + +*** + +### columnMoving + +> **columnMoving**: `EventEmitter`\<[`IColumnMovingEventArgs`](IColumnMovingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:834](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L834) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMoving`](GridType.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `EventEmitter`\<[`IColumnMovingEndEventArgs`](IColumnMovingEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L832) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingEnd`](GridType.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `EventEmitter`\<[`IColumnMovingStartEventArgs`](IColumnMovingStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L835) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingStart`](GridType.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `EventEmitter`\<[`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L836) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPin`](GridType.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `EventEmitter`\<[`IPinColumnEventArgs`](IPinColumnEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L830) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPinned`](GridType.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `EventEmitter`\<[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L831) + +#### Inherited from + +[`GridType`](GridType.md).[`columnResized`](GridType.md#columnresized) + +*** + +### columns + +> **columns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:660](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L660) + +#### Inherited from + +[`GridType`](GridType.md).[`columns`](GridType.md#columns) + +*** + +### columnSelection + +> **columnSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L778) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelection`](GridType.md#columnselection) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `EventEmitter`\<[`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L833) + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelectionChanging`](GridType.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `EventEmitter`\<[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:838](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L838) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanged`](GridType.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `EventEmitter`\<[`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L837) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanging`](GridType.md#columnvisibilitychanging) + +*** + +### columnWidthSetByUser + +> **columnWidthSetByUser**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L630) + +Indicates whether the width of the column is set by the user, or is configured automatically. + +#### Inherited from + +[`GridType`](GridType.md).[`columnWidthSetByUser`](GridType.md#columnwidthsetbyuser) + +*** + +### contextMenu + +> **contextMenu**: `EventEmitter`\<[`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:823](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L823) + +#### Inherited from + +[`GridType`](GridType.md).[`contextMenu`](GridType.md#contextmenu) + +*** + +### currencyPositionLeft + +> **currencyPositionLeft**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L627) + +Indicates whether the currency symbol is positioned to the left of values. + +#### Inherited from + +[`GridType`](GridType.md).[`currencyPositionLeft`](GridType.md#currencypositionleft) + +*** + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L29) + +#### Inherited from + +[`GridType`](GridType.md).[`data`](GridType.md#data) + +*** + +### dataCloneStrategy + +> **dataCloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L475) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Inherited from + +[`GridType`](GridType.md).[`dataCloneStrategy`](GridType.md#dataclonestrategy) + +*** + +### dataRowList + +> **dataRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L656) + +#### Inherited from + +[`GridType`](GridType.md).[`dataRowList`](GridType.md#datarowlist) + +*** + +### dataView + +> **dataView**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:692](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L692) + +#### Inherited from + +[`GridType`](GridType.md).[`dataView`](GridType.md#dataview) + +*** + +### dataWithAddedInTransactionRows + +> **dataWithAddedInTransactionRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:696](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L696) + +#### Inherited from + +[`GridType`](GridType.md).[`dataWithAddedInTransactionRows`](GridType.md#datawithaddedintransactionrows) + +*** + +### defaultRowHeight + +> **defaultRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L639) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultRowHeight`](GridType.md#defaultrowheight) + +*** + +### defaultSummaryHeight + +> **defaultSummaryHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:701](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L701) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultSummaryHeight`](GridType.md#defaultsummaryheight) + +*** + +### disableTransitions + +> **disableTransitions**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L625) + +Indicates whether transitions are disabled for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`disableTransitions`](GridType.md#disabletransitions) + +*** + +### doubleClick + +> **doubleClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L822) + +#### Inherited from + +[`GridType`](GridType.md).[`doubleClick`](GridType.md#doubleclick) + +*** + +### dragIndicatorIconBase + +> **dragIndicatorIconBase**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L623) + +The base drag indicator icon. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconBase`](GridType.md#dragindicatoriconbase) + +*** + +### dragIndicatorIconTemplate + +> **dragIndicatorIconTemplate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L621) + +The template for drag indicator icons. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconTemplate`](GridType.md#dragindicatoricontemplate) + +*** + +### excelStyleHeaderIconTemplate + +> **excelStyleHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L770) + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`excelStyleHeaderIconTemplate`](GridType.md#excelstyleheadericontemplate) + +*** + +### expansionDepth? + +> `optional` **expansionDepth?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L793) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionDepth`](GridType.md#expansiondepth) + +*** + +### expansionStates + +> **expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:652](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L652) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionStates`](GridType.md#expansionstates) + +*** + +### filteredSortedData + +> **filteredSortedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L695) + +#### Inherited from + +[`GridType`](GridType.md).[`filteredSortedData`](GridType.md#filteredsorteddata) + +*** + +### filtering + +> **filtering**: `EventEmitter`\<[`IFilteringEventArgs`](IFilteringEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:828](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L828) + +#### Inherited from + +[`GridType`](GridType.md).[`filtering`](GridType.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L829) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringDone`](GridType.md#filteringdone) + +*** + +### filteringExpressionsTree + +> **filteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:875](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L875) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTree`](GridType.md#filteringexpressionstree) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:876](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L876) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTreeChange`](GridType.md#filteringexpressionstreechange) + +*** + +### filteringLogic + +> **filteringLogic**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L870) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringLogic`](GridType.md#filteringlogic) + +*** + +### filteringPipeTrigger + +> **filteringPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L460) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringPipeTrigger`](GridType.md#filteringpipetrigger) + +*** + +### filterMode + +> **filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L481) + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Inherited from + +[`GridType`](GridType.md).[`filterMode`](GridType.md#filtermode) + +*** + +### filterStrategy + +> **filterStrategy**: [`IFilteringStrategy`](IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:871](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L871) + +#### Inherited from + +[`GridType`](GridType.md).[`filterStrategy`](GridType.md#filterstrategy) + +*** + +### firstEditableColumnIndex + +> **firstEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:730](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L730) + +#### Inherited from + +[`GridType`](GridType.md).[`firstEditableColumnIndex`](GridType.md#firsteditablecolumnindex) + +*** + +### flatData? + +> `optional` **flatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:790](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L790) + +#### Inherited from + +[`GridType`](GridType.md).[`flatData`](GridType.md#flatdata) + +*** + +### foreignKey? + +> `optional` **foreignKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L795) + +#### Inherited from + +[`GridType`](GridType.md).[`foreignKey`](GridType.md#foreignkey) + +*** + +### formGroupCreated + +> **formGroupCreated**: `EventEmitter`\<[`IGridFormGroupCreatedEventArgs`](IGridFormGroupCreatedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L859) + +#### Inherited from + +[`GridType`](GridType.md).[`formGroupCreated`](GridType.md#formgroupcreated) + +*** + +### getHeaderCellWidth + +> **getHeaderCellWidth**: (`element`) => [`ISizeInfo`](ISizeInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L746) + +Property, that gets the header cell inner width for auto-sizing. + +#### Parameters + +##### element + +`HTMLElement` + +#### Returns + +[`ISizeInfo`](ISizeInfo.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderCellWidth`](GridType.md#getheadercellwidth) + +*** + +### gridAPI + +> `readonly` **gridAPI**: [`GridServiceType`](GridServiceType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:478](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L478) + +Represents the grid service type providing API methods for the grid + +#### Inherited from + +[`GridType`](GridType.md).[`gridAPI`](GridType.md#gridapi) + +*** + +### gridKeydown + +> **gridKeydown**: `EventEmitter`\<[`IGridKeydownEventArgs`](IGridKeydownEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L819) + +#### Inherited from + +[`GridType`](GridType.md).[`gridKeydown`](GridType.md#gridkeydown) + +*** + +### groupByRowSelectorTemplate? + +> `optional` **groupByRowSelectorTemplate?**: `TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](IgxGroupByRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:578](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L578) + +Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupByRowSelectorTemplate`](GridType.md#groupbyrowselectortemplate) + +*** + +### groupingExpansionState + +> **groupingExpansionState**: [`IGroupByExpandState`](IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:990](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L990) + +#### Overrides + +[`GridType`](GridType.md).[`groupingExpansionState`](GridType.md#groupingexpansionstate) + +*** + +### groupingExpressions + +> **groupingExpressions**: [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:991](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L991) + +#### Overrides + +[`GridType`](GridType.md).[`groupingExpressions`](GridType.md#groupingexpressions) + +*** + +### groupingExpressionsChange + +> **groupingExpressionsChange**: `EventEmitter`\<[`IGroupingExpression`](IGroupingExpression.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:992](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L992) + +#### Overrides + +[`GridType`](GridType.md).[`groupingExpressionsChange`](GridType.md#groupingexpressionschange) + +*** + +### groupingFlatResult? + +> `optional` **groupingFlatResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L887) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingFlatResult`](GridType.md#groupingflatresult) + +*** + +### groupingMetadata? + +> `optional` **groupingMetadata?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:889](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L889) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingMetadata`](GridType.md#groupingmetadata) + +*** + +### groupingResult? + +> `optional` **groupingResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L888) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingResult`](GridType.md#groupingresult) + +*** + +### groupRowTemplate? + +> `optional` **groupRowTemplate?**: `TemplateRef`\<[`IgxGroupByRowTemplateContext`](IgxGroupByRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L572) + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupRowTemplate`](GridType.md#grouprowtemplate) + +*** + +### groupsExpanded? + +> `optional` **groupsExpanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L885) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsExpanded`](GridType.md#groupsexpanded) + +*** + +### groupsRecords? + +> `readonly` `optional` **groupsRecords?**: [`IGroupByRecord`](IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L886) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsRecords`](GridType.md#groupsrecords) + +*** + +### groupStrategy? + +> `optional` **groupStrategy?**: [`IGridGroupingStrategy`](IGridGroupingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L869) + +#### Inherited from + +[`GridType`](GridType.md).[`groupStrategy`](GridType.md#groupstrategy) + +*** + +### hasChildrenKey? + +> `optional` **hasChildrenKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:799](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L799) + +#### Inherited from + +[`GridType`](GridType.md).[`hasChildrenKey`](GridType.md#haschildrenkey) + +*** + +### hasDetails + +> **hasDetails**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L733) + +#### Inherited from + +[`GridType`](GridType.md).[`hasDetails`](GridType.md#hasdetails) + +*** + +### hasExpandableChildren? + +> `optional` **hasExpandableChildren?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L549) + +Optional +Indicates whether the grid has expandable children (hierarchical and tree grid) + +#### Inherited from + +[`GridType`](GridType.md).[`hasExpandableChildren`](GridType.md#hasexpandablechildren) + +*** + +### hasPinnedRecords + +> **hasPinnedRecords**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L685) + +#### Inherited from + +[`GridType`](GridType.md).[`hasPinnedRecords`](GridType.md#haspinnedrecords) + +*** + +### hasVisibleColumns + +> **hasVisibleColumns**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L544) + +Indicates whether the grid has columns that are shown + +#### Inherited from + +[`GridType`](GridType.md).[`hasVisibleColumns`](GridType.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +> **headerCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L614) + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerCollapsedIndicatorTemplate`](GridType.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +> **headerExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L619) + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerExpandedIndicatorTemplate`](GridType.md#headerexpandedindicatortemplate) + +*** + +### headerFeaturesWidth + +> **headerFeaturesWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:631](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L631) + +#### Inherited from + +[`GridType`](GridType.md).[`headerFeaturesWidth`](GridType.md#headerfeatureswidth) + +*** + +### headSelectorBaseAriaLabel + +> **headSelectorBaseAriaLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L541) + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorBaseAriaLabel`](GridType.md#headselectorbasearialabel) + +*** + +### headSelectorTemplate + +> **headSelectorTemplate**: `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L589) + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorTemplate`](GridType.md#headselectortemplate) + +*** + +### hiddenColumnsCount + +> **hiddenColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L557) + +Represents the count of only the hidden (not visible) columns + +#### Inherited from + +[`GridType`](GridType.md).[`hiddenColumnsCount`](GridType.md#hiddencolumnscount) + +*** + +### highlightedRowID? + +> `optional` **highlightedRowID?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L804) + +#### Inherited from + +[`GridType`](GridType.md).[`highlightedRowID`](GridType.md#highlightedrowid) + +*** + +### iconTemplate? + +> `optional` **iconTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L566) + +Optional +The template for grid icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`iconTemplate`](GridType.md#icontemplate) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L451) + +Represents the unique identifier of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`id`](GridType.md#id) + +*** + +### isCellSelectable + +> **isCellSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:682](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L682) + +Indicates whether cells are selectable in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isCellSelectable`](GridType.md#iscellselectable) + +*** + +### isLoading + +> **isLoading**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L465) + +#### Inherited from + +[`GridType`](GridType.md).[`isLoading`](GridType.md#isloading) + +*** + +### isMultiRowSelectionEnabled + +> **isMultiRowSelectionEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L684) + +Indicates whether it is allowed to select more than one row in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isMultiRowSelectionEnabled`](GridType.md#ismultirowselectionenabled) + +*** + +### isRowPinningToTop + +> **isRowPinningToTop**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L732) + +#### Inherited from + +[`GridType`](GridType.md).[`isRowPinningToTop`](GridType.md#isrowpinningtotop) + +*** + +### isRowSelectable + +> **isRowSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L526) + +Indicates whether the grid's rows can be selected + +#### Inherited from + +[`GridType`](GridType.md).[`isRowSelectable`](GridType.md#isrowselectable) + +*** + +### lastChildGrid? + +> `optional` **lastChildGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:785](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L785) + +#### Inherited from + +[`GridType`](GridType.md).[`lastChildGrid`](GridType.md#lastchildgrid) + +*** + +### lastEditableColumnIndex + +> **lastEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L731) + +#### Inherited from + +[`GridType`](GridType.md).[`lastEditableColumnIndex`](GridType.md#lasteditablecolumnindex) + +*** + +### lastSearchInfo + +> `readonly` **lastSearchInfo**: [`ISearchInfo`](ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L719) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Inherited from + +[`GridType`](GridType.md).[`lastSearchInfo`](GridType.md#lastsearchinfo) + +*** + +### loadChildrenOnDemand? + +> `optional` **loadChildrenOnDemand?**: (`parentID`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:798](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L798) + +#### Parameters + +##### parentID + +`any` + +##### done + +(`children`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`loadChildrenOnDemand`](GridType.md#loadchildrenondemand) + +*** + +### loadingRows? + +> `optional` **loadingRows?**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:801](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L801) + +#### Inherited from + +[`GridType`](GridType.md).[`loadingRows`](GridType.md#loadingrows) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L434) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Inherited from + +[`GridType`](GridType.md).[`locale`](GridType.md#locale) + +*** + +### localeChange + +> **localeChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L827) + +#### Inherited from + +[`GridType`](GridType.md).[`localeChange`](GridType.md#localechange) + +*** + +### mergeStrategy + +> **mergeStrategy**: [`IGridMergeStrategy`](IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L436) + +#### Inherited from + +[`GridType`](GridType.md).[`mergeStrategy`](GridType.md#mergestrategy) + +*** + +### moving + +> **moving**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L464) + +Indicates whether the grid is currently in a moving state. + +#### Inherited from + +[`GridType`](GridType.md).[`moving`](GridType.md#moving) + +*** + +### multiRowLayoutRowSize + +> **multiRowLayoutRowSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:638](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L638) + +#### Inherited from + +[`GridType`](GridType.md).[`multiRowLayoutRowSize`](GridType.md#multirowlayoutrowsize) + +*** + +### nativeElement + +> **nativeElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:440](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L440) + +Represents the native HTML element itself + +#### Inherited from + +[`GridType`](GridType.md).[`nativeElement`](GridType.md#nativeelement) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:518](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L518) + +#### Inherited from + +[`GridType`](GridType.md).[`navigation`](GridType.md#navigation) + +*** + +### outerWidth + +> **outerWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:635](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L635) + +#### Inherited from + +[`GridType`](GridType.md).[`outerWidth`](GridType.md#outerwidth) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L521) + +#### Inherited from + +[`GridType`](GridType.md).[`outlet`](GridType.md#outlet) + +*** + +### pagingMode + +> **pagingMode**: [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L710) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Inherited from + +[`GridType`](GridType.md).[`pagingMode`](GridType.md#pagingmode) + +*** + +### parent? + +> `optional` **parent?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:803](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L803) + +#### Inherited from + +[`GridType`](GridType.md).[`parent`](GridType.md#parent) + +*** + +### parentVirtDir + +> **parentVirtDir**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L653) + +#### Inherited from + +[`GridType`](GridType.md).[`parentVirtDir`](GridType.md#parentvirtdir) + +*** + +### pinnedColumns + +> **pinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L666) + +An array of columns, but it counts only the ones that are pinned + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumns`](GridType.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +> **pinnedColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:559](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L559) + +Represents the count of only the pinned columns + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumnsCount`](GridType.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +> **pinnedEndColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L670) + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndColumns`](GridType.md#pinnedendcolumns) + +*** + +### pinnedEndWidth + +> **pinnedEndWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L535) + +The width of pinned element for pinning at end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndWidth`](GridType.md#pinnedendwidth) + +*** + +### pinnedRecords + +> **pinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:687](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L687) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecords`](GridType.md#pinnedrecords) + +*** + +### pinnedRecordsCount + +> **pinnedRecordsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L686) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecordsCount`](GridType.md#pinnedrecordscount) + +*** + +### pinnedRows + +> **pinnedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L691) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRows`](GridType.md#pinnedrows) + +*** + +### pinnedStartColumns + +> **pinnedStartColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L668) + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartColumns`](GridType.md#pinnedstartcolumns) + +*** + +### pinnedStartWidth + +> **pinnedStartWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L533) + +The width of pinned element for pinning at start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartWidth`](GridType.md#pinnedstartwidth) + +*** + +### pinning + +> **pinning**: [`IPinningConfig`](IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L650) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Inherited from + +[`GridType`](GridType.md).[`pinning`](GridType.md#pinning) + +*** + +### pipeTrigger + +> **pipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L454) + +#### Inherited from + +[`GridType`](GridType.md).[`pipeTrigger`](GridType.md#pipetrigger) + +*** + +### primaryKey + +> **primaryKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L449) + +Represents the unique primary key used for identifying rows in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`primaryKey`](GridType.md#primarykey) + +*** + +### processedExpandedFlatData? + +> `optional` **processedExpandedFlatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L813) + +#### Inherited from + +[`GridType`](GridType.md).[`processedExpandedFlatData`](GridType.md#processedexpandedflatdata) + +*** + +### processedRecords? + +> `optional` **processedRecords?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L815) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRecords`](GridType.md#processedrecords) + +*** + +### processedRootRecords? + +> `optional` **processedRootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L809) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRootRecords`](GridType.md#processedrootrecords) + +*** + +### rangeSelected + +> **rangeSelected**: `EventEmitter`\<[`GridSelectionRange`](GridSelectionRange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:825](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L825) + +#### Inherited from + +[`GridType`](GridType.md).[`rangeSelected`](GridType.md#rangeselected) + +*** + +### records? + +> `optional` **records?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:812](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L812) + +#### Inherited from + +[`GridType`](GridType.md).[`records`](GridType.md#records) + +*** + +### rendered$ + +> **rendered$**: `Observable`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:864](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L864) + +#### Inherited from + +[`GridType`](GridType.md).[`rendered$`](GridType.md#rendered) + +*** + +### renderedRowHeight + +> **renderedRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L453) + +The height of the visible rows in the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`renderedRowHeight`](GridType.md#renderedrowheight) + +*** + +### resizeNotify + +> **resizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:866](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L866) + +#### Inherited from + +[`GridType`](GridType.md).[`resizeNotify`](GridType.md#resizenotify) + +*** + +### resourceStrings + +> **resourceStrings**: `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L437) + +#### Inherited from + +[`GridType`](GridType.md).[`resourceStrings`](GridType.md#resourcestrings) + +*** + +### rootGrid? + +> `optional` **rootGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L808) + +#### Inherited from + +[`GridType`](GridType.md).[`rootGrid`](GridType.md#rootgrid) + +*** + +### rootRecords? + +> `optional` **rootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L810) + +#### Inherited from + +[`GridType`](GridType.md).[`rootRecords`](GridType.md#rootrecords) + +*** + +### rootSummariesEnabled + +> **rootSummariesEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L443) + +#### Inherited from + +[`GridType`](GridType.md).[`rootSummariesEnabled`](GridType.md#rootsummariesenabled) + +*** + +### rowAdd + +> **rowAdd**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L840) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdd`](GridType.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:841](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L841) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdded`](GridType.md#rowadded) + +*** + +### rowAddedNotifier + +> **rowAddedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L843) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAddedNotifier`](GridType.md#rowaddednotifier) + +*** + +### rowClick + +> **rowClick**: `EventEmitter`\<[`IGridRowEventArgs`](IGridRowEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L821) + +#### Inherited from + +[`GridType`](GridType.md).[`rowClick`](GridType.md#rowclick) + +*** + +### rowCollapsedIndicatorTemplate + +> **rowCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L765) + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowCollapsedIndicatorTemplate`](GridType.md#rowcollapsedindicatortemplate) + +*** + +### rowDelete + +> **rowDelete**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:844](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L844) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDelete`](GridType.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:845](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L845) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeleted`](GridType.md#rowdeleted) + +*** + +### rowDeletedNotifier + +> **rowDeletedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L847) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeletedNotifier`](GridType.md#rowdeletednotifier) + +*** + +### rowDragEnd + +> **rowDragEnd**: `EventEmitter`\<[`IRowDragEndEventArgs`](IRowDragEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L857) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragEnd`](GridType.md#rowdragend) + +*** + +### rowDraggable + +> **rowDraggable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L447) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDraggable`](GridType.md#rowdraggable) + +*** + +### rowDragging + +> **rowDragging**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L728) + +Indicates whether a row is currently being dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragging`](GridType.md#rowdragging) + +*** + +### rowDragStart + +> **rowDragStart**: `EventEmitter`\<[`IRowDragStartEventArgs`](IRowDragStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:856](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L856) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragStart`](GridType.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L853) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEdit`](GridType.md#rowedit) + +*** + +### rowEditable + +> **rowEditable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L442) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditable`](GridType.md#roweditable) + +*** + +### rowEditDone + +> **rowEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L854) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditDone`](GridType.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L852) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditEnter`](GridType.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:855](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L855) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditExit`](GridType.md#roweditexit) + +*** + +### rowEditingOverlay + +> **rowEditingOverlay**: [`IgxToggleDirective`](../classes/IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L703) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditingOverlay`](GridType.md#roweditingoverlay) + +*** + +### rowEditTabs + +> **rowEditTabs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L715) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditTabs`](GridType.md#rowedittabs) + +*** + +### rowExpandedIndicatorTemplate + +> **rowExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L760) + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowExpandedIndicatorTemplate`](GridType.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +> **rowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L637) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Inherited from + +[`GridType`](GridType.md).[`rowHeight`](GridType.md#rowheight) + +*** + +### rowList + +> **rowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L657) + +#### Inherited from + +[`GridType`](GridType.md).[`rowList`](GridType.md#rowlist) + +*** + +### rowLoadingIndicatorTemplate? + +> `optional` **rowLoadingIndicatorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L584) + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowLoadingIndicatorTemplate`](GridType.md#rowloadingindicatortemplate) + +*** + +### rowSelection + +> **rowSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L776) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelection`](GridType.md#rowselection) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `EventEmitter`\<[`IRowSelectionEventArgs`](IRowSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L826) + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectionChanging`](GridType.md#rowselectionchanging) + +*** + +### rowSelectorTemplate + +> **rowSelectorTemplate**: `TemplateRef`\<[`IgxRowSelectorTemplateContext`](IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:594](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L594) + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectorTemplate`](GridType.md#rowselectortemplate) + +*** + +### rowToggle + +> **rowToggle**: `EventEmitter`\<[`IRowToggleEventArgs`](IRowToggleEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L858) + +#### Inherited from + +[`GridType`](GridType.md).[`rowToggle`](GridType.md#rowtoggle) + +*** + +### scrollSize + +> **scrollSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L642) + +#### Inherited from + +[`GridType`](GridType.md).[`scrollSize`](GridType.md#scrollsize) + +*** + +### selected + +> **selected**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:824](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L824) + +#### Inherited from + +[`GridType`](GridType.md).[`selected`](GridType.md#selected) + +*** + +### selectedCells? + +> `optional` **selectedCells?**: [`CellType`](CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L890) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedCells`](GridType.md#selectedcells) + +*** + +### selectedRows + +> **selectedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:891](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L891) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedRows`](GridType.md#selectedrows) + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L517) + +The service handling selection in the grid. Selecting, deselecting elements + +#### Inherited from + +[`GridType`](GridType.md).[`selectionService`](GridType.md#selectionservice) + +*** + +### selectRowOnClick + +> **selectRowOnClick**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:772](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L772) + +#### Inherited from + +[`GridType`](GridType.md).[`selectRowOnClick`](GridType.md#selectrowonclick) + +*** + +### showExpandAll? + +> `optional` **showExpandAll?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L554) + +Optional +Indicates whether collapsed grid elements should be expanded + +#### Inherited from + +[`GridType`](GridType.md).[`showExpandAll`](GridType.md#showexpandall) + +*** + +### showRowSelectors + +> **showRowSelectors**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:528](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L528) + +Indicates whether the selectors of the rows are visible + +#### Inherited from + +[`GridType`](GridType.md).[`showRowSelectors`](GridType.md#showrowselectors) + +*** + +### sortAscendingHeaderIconTemplate + +> **sortAscendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L604) + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortAscendingHeaderIconTemplate`](GridType.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +> **sortDescendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L609) + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortDescendingHeaderIconTemplate`](GridType.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +> **sortHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L599) + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortHeaderIconTemplate`](GridType.md#sortheadericontemplate) + +*** + +### sortingExpressions + +> **sortingExpressions**: [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:873](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L873) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressions`](GridType.md#sortingexpressions) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `EventEmitter`\<[`ISortingExpression`](ISortingExpression.md)\<`any`\>[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L874) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressionsChange`](GridType.md#sortingexpressionschange) + +*** + +### sortingOptions + +> **sortingOptions**: [`ISortingOptions`](ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:879](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L879) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingOptions`](GridType.md#sortingoptions) + +*** + +### sortStrategy + +> **sortStrategy**: [`IGridSortingStrategy`](IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:868](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L868) + +#### Inherited from + +[`GridType`](GridType.md).[`sortStrategy`](GridType.md#sortstrategy) + +*** + +### summariesMargin + +> **summariesMargin**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L540) + +The CSS margin of the summaries + +#### Inherited from + +[`GridType`](GridType.md).[`summariesMargin`](GridType.md#summariesmargin) + +*** + +### summariesRowList + +> **summariesRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L678) + +#### Inherited from + +[`GridType`](GridType.md).[`summariesRowList`](GridType.md#summariesrowlist) + +*** + +### summaryCalculationMode + +> **summaryCalculationMode**: [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:780](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L780) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryCalculationMode`](GridType.md#summarycalculationmode) + +*** + +### summaryPipeTrigger + +> **summaryPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L455) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPipeTrigger`](GridType.md#summarypipetrigger) + +*** + +### summaryPosition + +> **summaryPosition**: [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L782) + +Represents the position of summaries: 'top', 'bottom' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPosition`](GridType.md#summaryposition) + +*** + +### summaryRowHeight + +> **summaryRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:702](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L702) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryRowHeight`](GridType.md#summaryrowheight) + +*** + +### tbody + +> **tbody**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:654](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L654) + +#### Inherited from + +[`GridType`](GridType.md).[`tbody`](GridType.md#tbody) + +*** + +### toolbarExporting + +> **toolbarExporting**: `EventEmitter`\<[`IGridToolbarExportEventArgs`](IGridToolbarExportEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L862) + +#### Inherited from + +[`GridType`](GridType.md).[`toolbarExporting`](GridType.md#toolbarexporting) + +*** + +### totalRowsCountAfterFilter + +> **totalRowsCountAfterFilter**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L704) + +#### Inherited from + +[`GridType`](GridType.md).[`totalRowsCountAfterFilter`](GridType.md#totalrowscountafterfilter) + +*** + +### transactions + +> `readonly` **transactions**: [`TransactionService`](TransactionService.md)\<[`Transaction`](Transaction.md), [`State`](State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L698) + +Represents the transaction service for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`transactions`](GridType.md#transactions) + +*** + +### treeGroupArea? + +> `optional` **treeGroupArea?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L816) + +#### Inherited from + +[`GridType`](GridType.md).[`treeGroupArea`](GridType.md#treegrouparea) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `tree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L743) + +Property, that provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### tree + +[`FilteringExpressionsTree`](../classes/FilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`uniqueColumnValuesStrategy`](GridType.md#uniquecolumnvaluesstrategy) + +*** + +### unpinnedColumns + +> **unpinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:664](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L664) + +An array of columns, but it counts only the ones that are not pinned + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedColumns`](GridType.md#unpinnedcolumns) + +*** + +### unpinnedRecords + +> **unpinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:688](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L688) + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedRecords`](GridType.md#unpinnedrecords) + +*** + +### unpinnedWidth + +> **unpinnedWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L538) + +The width of unpinned element + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedWidth`](GridType.md#unpinnedwidth) + +*** + +### updateOnRender? + +> `optional` **updateOnRender?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L805) + +#### Inherited from + +[`GridType`](GridType.md).[`updateOnRender`](GridType.md#updateonrender) + +*** + +### validation + +> `readonly` **validation**: [`IgxGridValidationService`](../classes/IgxGridValidationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:700](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L700) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Inherited from + +[`GridType`](GridType.md).[`validation`](GridType.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `EventEmitter`\<[`IGridValidationStatusEventArgs`](IGridValidationStatusEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L860) + +#### Inherited from + +[`GridType`](GridType.md).[`validationStatusChange`](GridType.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L645) + +The trigger for grid validation. It's value can either be `change` or `blur` + +#### Inherited from + +[`GridType`](GridType.md).[`validationTrigger`](GridType.md#validationtrigger) + +*** + +### verticalScrollContainer + +> **verticalScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L655) + +#### Inherited from + +[`GridType`](GridType.md).[`verticalScrollContainer`](GridType.md#verticalscrollcontainer) + +*** + +### virtualizationState + +> **virtualizationState**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L513) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Inherited from + +[`GridType`](GridType.md).[`virtualizationState`](GridType.md#virtualizationstate) + +*** + +### visibleColumns + +> **visibleColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:662](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L662) + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Inherited from + +[`GridType`](GridType.md).[`visibleColumns`](GridType.md#visiblecolumns) + +## Accessors + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L30) + +##### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`filteredData`](GridType.md#filtereddata) + +## Methods + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L953) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearCellSelection`](GridType.md#clearcellselection) + +*** + +### clearGrouping() + +> **clearGrouping**(`field`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:995](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L995) + +#### Parameters + +##### field + +`string` + +#### Returns + +`void` + +#### Overrides + +[`GridType`](GridType.md).[`clearGrouping`](GridType.md#cleargrouping) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L927) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearSort`](GridType.md#clearsort) + +*** + +### closeRowEditingOverlay() + +> **closeRowEditingOverlay**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:972](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L972) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`closeRowEditingOverlay`](GridType.md#closeroweditingoverlay) + +*** + +### collapseRow() + +> **collapseRow**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L967) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`collapseRow`](GridType.md#collapserow) + +*** + +### columnToVisibleIndex() + +> **columnToVisibleIndex**(`key`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:945](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L945) + +#### Parameters + +##### key + +`string` \| `number` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`columnToVisibleIndex`](GridType.md#columntovisibleindex) + +*** + +### createColumnsList()? + +> `optional` **createColumnsList**(`cols`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:977](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L977) + +#### Parameters + +##### cols + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`createColumnsList`](GridType.md#createcolumnslist) + +*** + +### createFilterDropdown() + +> **createFilterDropdown**(`column`, `options`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L960) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### options + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`createFilterDropdown`](GridType.md#createfilterdropdown) + +*** + +### createRow()? + +> `optional` **createRow**(`index`, `data?`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L963) + +#### Parameters + +##### index + +`number` + +##### data? + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`createRow`](GridType.md#createrow) + +*** + +### deleteRow() + +> **deleteRow**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L964) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRow`](GridType.md#deleterow) + +*** + +### deleteRowById() + +> **deleteRowById**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L965) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRowById`](GridType.md#deleterowbyid) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L903) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllColumns`](GridType.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L958) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllRows`](GridType.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L904) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectColumns`](GridType.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L956) + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectRows`](GridType.md#deselectrows) + +*** + +### generateRowPath()? + +> `optional` **generateRowPath**(`rowId`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:980](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L980) + +#### Parameters + +##### rowId + +`any` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`generateRowPath`](GridType.md#generaterowpath) + +*** + +### getChildGrids()? + +> `optional` **getChildGrids**(`inDepth?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L943) + +#### Parameters + +##### inDepth? + +`boolean` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`getChildGrids`](GridType.md#getchildgrids) + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L919) + +#### Parameters + +##### name + +`string` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByName`](GridType.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L920) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`ColumnType`](ColumnType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByVisibleIndex`](GridType.md#getcolumnbyvisibleindex) + +*** + +### getDefaultExpandState() + +> **getDefaultExpandState**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:908](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L908) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`getDefaultExpandState`](GridType.md#getdefaultexpandstate) + +*** + +### getDragGhostCustomTemplate() + +> **getDragGhostCustomTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:915](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L915) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getDragGhostCustomTemplate`](GridType.md#getdragghostcustomtemplate) + +*** + +### getEmptyRecordObjectFor() + +> **getEmptyRecordObjectFor**(`inRow`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L931) + +#### Parameters + +##### inRow + +[`RowType`](RowType.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getEmptyRecordObjectFor`](GridType.md#getemptyrecordobjectfor) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:921](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L921) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderGroupWidth`](GridType.md#getheadergroupwidth) + +*** + +### getInitialPinnedIndex() + +> **getInitialPinnedIndex**(`rec`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:935](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L935) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getInitialPinnedIndex`](GridType.md#getinitialpinnedindex) + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L952) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getNextCell`](GridType.md#getnextcell) + +*** + +### getPossibleColumnWidth() + +> **getPossibleColumnWidth**(`baseWidth?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:910](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L910) + +#### Parameters + +##### baseWidth? + +`number` + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getPossibleColumnWidth`](GridType.md#getpossiblecolumnwidth) + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L950) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getPreviousCell`](GridType.md#getpreviouscell) + +*** + +### getRowByIndex()? + +> `optional` **getRowByIndex**(`index`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L923) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByIndex`](GridType.md#getrowbyindex) + +*** + +### getRowByKey()? + +> `optional` **getRowByKey**(`key`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L922) + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByKey`](GridType.md#getrowbykey) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L902) + +#### Returns + +[`GridSelectionRange`](GridSelectionRange.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`getSelectedRanges`](GridType.md#getselectedranges) + +*** + +### getUnpinnedIndexById() + +> **getUnpinnedIndexById**(`id`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:930](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L930) + +#### Parameters + +##### id + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getUnpinnedIndexById`](GridType.md#getunpinnedindexbyid) + +*** + +### getVisibleContentHeight() + +> **getVisibleContentHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:913](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L913) + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getVisibleContentHeight`](GridType.md#getvisiblecontentheight) + +*** + +### groupBy() + +> **groupBy**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:996](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L996) + +#### Parameters + +##### expression + +[`IGroupingExpression`](IGroupingExpression.md) \| [`IGroupingExpression`](IGroupingExpression.md)[] + +#### Returns + +`void` + +#### Overrides + +[`GridType`](GridType.md).[`groupBy`](GridType.md#groupby) + +*** + +### hasVerticalScroll() + +> **hasVerticalScroll**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:912](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L912) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`hasVerticalScroll`](GridType.md#hasverticalscroll) + +*** + +### isChildGridRecord()? + +> `optional` **isChildGridRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:942](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L942) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isChildGridRecord`](GridType.md#ischildgridrecord) + +*** + +### isColumnGrouped() + +> **isColumnGrouped**(`fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L937) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isColumnGrouped`](GridType.md#iscolumngrouped) + +*** + +### isDetailRecord() + +> **isDetailRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:938](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L938) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isDetailRecord`](GridType.md#isdetailrecord) + +*** + +### isExpandedGroup() + +> **isExpandedGroup**(`group`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:976](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L976) + +#### Parameters + +##### group + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isExpandedGroup`](GridType.md#isexpandedgroup) + +*** + +### isGhostRecord() + +> **isGhostRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:940](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L940) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGhostRecord`](GridType.md#isghostrecord) + +*** + +### isGroupByRecord() + +> **isGroupByRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:939](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L939) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGroupByRecord`](GridType.md#isgroupbyrecord) + +*** + +### isHierarchicalRecord()? + +> `optional` **isHierarchicalRecord**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L944) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isHierarchicalRecord`](GridType.md#ishierarchicalrecord) + +*** + +### isRecordMerged() + +> **isRecordMerged**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L934) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordMerged`](GridType.md#isrecordmerged) + +*** + +### isRecordPinned() + +> **isRecordPinned**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:933](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L933) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinned`](GridType.md#isrecordpinned) + +*** + +### isRecordPinnedByViewIndex() + +> **isRecordPinnedByViewIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:936](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L936) + +#### Parameters + +##### rowIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinnedByViewIndex`](GridType.md#isrecordpinnedbyviewindex) + +*** + +### isSummaryRow() + +> **isSummaryRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:932](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L932) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isSummaryRow`](GridType.md#issummaryrow) + +*** + +### isTreeRow()? + +> `optional` **isTreeRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L941) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isTreeRow`](GridType.md#istreerow) + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L946) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### target + +[`ColumnType`](ColumnType.md) + +##### pos + +[`DropPosition`](../enumerations/DropPosition.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`moveColumn`](GridType.md#movecolumn) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColumnIndex`, `callback?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:948](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L948) + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColumnIndex + +`number` + +##### callback? + +(`e`) => `any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`navigateTo`](GridType.md#navigateto) + +*** + +### notifyChanges() + +> **notifyChanges**(`repaint?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L968) + +#### Parameters + +##### repaint? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`notifyChanges`](GridType.md#notifychanges) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:917](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L917) + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openAdvancedFilteringDialog`](GridType.md#openadvancedfilteringdialog) + +*** + +### openRowOverlay() + +> **openRowOverlay**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L916) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openRowOverlay`](GridType.md#openrowoverlay) + +*** + +### pinRow() + +> **pinRow**(`id`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:928](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L928) + +#### Parameters + +##### id + +`any` + +##### index? + +`number` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`pinRow`](GridType.md#pinrow) + +*** + +### preventHeaderScroll()? + +> `optional` **preventHeaderScroll**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:981](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L981) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`preventHeaderScroll`](GridType.md#preventheaderscroll) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L973) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`reflow`](GridType.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:907](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L907) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`refreshSearch`](GridType.md#refreshsearch) + +*** + +### repositionRowEditingOverlay() + +> **repositionRowEditingOverlay**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:971](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L971) + +#### Parameters + +##### row + +[`RowType`](RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`repositionRowEditingOverlay`](GridType.md#repositionroweditingoverlay) + +*** + +### resetColumnCollections() + +> **resetColumnCollections**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L969) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetColumnCollections`](GridType.md#resetcolumncollections) + +*** + +### resetHorizontalVirtualization() + +> **resetHorizontalVirtualization**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L911) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetHorizontalVirtualization`](GridType.md#resethorizontalvirtualization) + +*** + +### resolveOutlet()? + +> `optional` **resolveOutlet**(): [`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:900](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L900) + +#### Returns + +[`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +#### Inherited from + +[`GridType`](GridType.md).[`resolveOutlet`](GridType.md#resolveoutlet) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L957) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectAllRows`](GridType.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L905) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectColumns`](GridType.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L906) + +#### Returns + +[`ColumnType`](ColumnType.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`selectedColumns`](GridType.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`range`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L954) + +#### Parameters + +##### range + +[`GridSelectionRange`](GridSelectionRange.md) \| [`GridSelectionRange`](GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRange`](GridType.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L955) + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRows`](GridType.md#selectrows) + +*** + +### setFilteredData() + +> **setFilteredData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L924) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredData`](GridType.md#setfiltereddata) + +*** + +### setFilteredSortedData() + +> **setFilteredSortedData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:925](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L925) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredSortedData`](GridType.md#setfilteredsorteddata) + +*** + +### setUpPaginator() + +> **setUpPaginator**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L959) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setUpPaginator`](GridType.md#setuppaginator) + +*** + +### showSnackbarFor() + +> **showSnackbarFor**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L918) + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`showSnackbarFor`](GridType.md#showsnackbarfor) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L926) + +#### Parameters + +##### expression + +[`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`sort`](GridType.md#sort) + +*** + +### toggleAll()? + +> `optional` **toggleAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:979](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L979) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAll`](GridType.md#toggleall) + +*** + +### toggleAllGroupRows()? + +> `optional` **toggleAllGroupRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:978](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L978) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAllGroupRows`](GridType.md#toggleallgrouprows) + +*** + +### toggleGroup() + +> **toggleGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:994](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L994) + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`void` + +#### Overrides + +[`GridType`](GridType.md).[`toggleGroup`](GridType.md#togglegroup) + +*** + +### trackColumnChanges() + +> **trackColumnChanges**(`index`, `column`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:909](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L909) + +#### Parameters + +##### index + +`number` + +##### column + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`trackColumnChanges`](GridType.md#trackcolumnchanges) + +*** + +### triggerPipes() + +> **triggerPipes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L970) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`triggerPipes`](GridType.md#triggerpipes) + +*** + +### unpinRow() + +> **unpinRow**(`id`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:929](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L929) + +#### Parameters + +##### id + +`any` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`unpinRow`](GridType.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L961) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +##### column + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateCell`](GridType.md#updatecell) + +*** + +### updateColumns() + +> **updateColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L901) + +#### Parameters + +##### columns + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateColumns`](GridType.md#updatecolumns) + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L966) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateRow`](GridType.md#updaterow) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridSVGIcon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridSVGIcon.md new file mode 100644 index 000000000..12c10c725 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridSVGIcon.md @@ -0,0 +1,19 @@ +# Interface: GridSVGIcon + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1095](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1095) + +## Properties + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1096](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1096) + +*** + +### value + +> **value**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1097](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1097) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridSelectionRange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridSelectionRange.md new file mode 100644 index 000000000..f13c68193 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridSelectionRange.md @@ -0,0 +1,48 @@ +# Interface: GridSelectionRange + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L10) + +Represents a range selection between certain rows and columns of the grid. +Range selection can be made either through drag selection or through keyboard selection. + +## Properties + +### columnEnd + +> **columnEnd**: `string` \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L26) + +The identifier or index of the ending column of the selection range. +It can be either a string representing the column's field name or a numeric index. + +*** + +### columnStart + +> **columnStart**: `string` \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L20) + +The identifier or index of the starting column of the selection range. +It can be either a string representing the column's field name or a numeric index. + +*** + +### rowEnd + +> **rowEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L14) + +The index of the ending row of the selection range. + +*** + +### rowStart + +> **rowStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L12) + +The index of the starting row of the selection range. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridServiceType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridServiceType.md new file mode 100644 index 000000000..a28038279 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridServiceType.md @@ -0,0 +1,866 @@ +# Interface: GridServiceType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:329](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L329) + +Represents the service interface for interacting with the grid. + +## Properties + +### cms + +> **cms**: `IgxColumnMovingService` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:336](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L336) + +A service responsible for handling column moving within the grid. It contains a reference to the column, its icon, and indicator for cancellation. + +*** + +### crudService + +> **crudService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:334](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L334) + +Represents the type of the CRUD service (Create, Read, Update, Delete) operations on the grid data. + +*** + +### grid + +> **grid**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:332](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L332) + +The reference to the parent `GridType` that contains the service. + +## Methods + +### addRowToData() + +> **addRowToData**(`rowData`, `parentID?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L381) + +Represents a method declaration for adding a new row to the grid. +It takes the row's data and the identifier of the parent row if applicable (used for tree grids) + +#### Parameters + +##### rowData + +`any` + +##### parentID? + +`any` + +#### Returns + +`void` + +*** + +### clear\_groupby()? + +> `optional` **clear\_groupby**(`field`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L417) + +#### Parameters + +##### field + +`any` + +#### Returns + +`void` + +*** + +### clear\_sort() + +> **clear\_sort**(`fieldName`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L402) + +Represents a method declaration for resetting the sorting + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`void` + +*** + +### deleteRowById() + +> **deleteRowById**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:383](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L383) + +Represents a method declaration for deleting a row, specified by it's identifier (taken as a parameter) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +*** + +### expand\_path\_to\_record()? + +> `optional` **expand\_path\_to\_record**(`record`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:413](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L413) + +#### Parameters + +##### record + +[`ITreeGridRecord`](ITreeGridRecord.md) + +#### Returns + +`void` + +*** + +### filterDataByExpressions() + +> **filterDataByExpressions**(`expressionsTree`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L407) + +#### Parameters + +##### expressionsTree + +[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +#### Returns + +`any`[] + +*** + +### get\_all\_data() + +> **get\_all\_data**(`includeTransactions?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:345](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L345) + +Represents a method declaration for retrieving all the data available in the grid, including any transactional data. +`includeTransactions`: Optional parameter. Specifies whether to include transactional data if present. +Returns an array containing all the data available in the grid. + +#### Parameters + +##### includeTransactions? + +`boolean` + +#### Returns + +`any`[] + +*** + +### get\_cell\_by\_index() + +> **get\_cell\_by\_index**(`rowIndex`, `columnID`): [`CellType`](CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:366](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L366) + +Represents a method declaration for retrieving the cell object associated with a specific row and column using their indexes. + +#### Parameters + +##### rowIndex + +`number` + +##### columnID + +`string` \| `number` + +#### Returns + +[`CellType`](CellType.md) + +*** + +### get\_cell\_by\_key() + +> **get\_cell\_by\_key**(`rowSelector`, `field`): [`CellType`](CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:364](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L364) + +Represents a method declaration for retrieving the cell object associated with a specific row and column in the grid. + +#### Parameters + +##### rowSelector + +`any` + +##### field + +`string` + +#### Returns + +[`CellType`](CellType.md) + +*** + +### get\_cell\_by\_visible\_index() + +> **get\_cell\_by\_visible\_index**(`rowIndex`, `columnIndex`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:371](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L371) + +Represents a method declaration for retrieving the cell object associated with a specific row and column using their indexes. +It counts only the indexes of the visible columns and rows + +#### Parameters + +##### rowIndex + +`number` + +##### columnIndex + +`number` + +#### Returns + +`any` + +*** + +### get\_column\_by\_name() + +> **get\_column\_by\_name**(`name`): [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L347) + +Represents a method declaration for retrieving a column object by its name, taken as a parameter. + +#### Parameters + +##### name + +`string` + +#### Returns + +[`ColumnType`](ColumnType.md) + +*** + +### get\_data() + +> **get\_data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:339](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L339) + +Represents a method declaration for retrieving the data used in the grid. The returned values could be of any type + +#### Returns + +`any`[] + +*** + +### get\_groupBy\_record\_id()? + +> `optional` **get\_groupBy\_record\_id**(`gRow`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:415](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L415) + +#### Parameters + +##### gRow + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`string` + +*** + +### get\_pin\_row\_event\_args() + +> **get\_pin\_row\_event\_args**(`rowID`, `index?`, `row?`, `pinned?`): [`IPinRowEventArgs`](IPinRowEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:405](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L405) + +Represents an event, triggered when the pin state is changed + +#### Parameters + +##### rowID + +`any` + +##### index? + +`number` + +##### row? + +[`RowType`](RowType.md) + +##### pinned? + +`boolean` + +#### Returns + +[`IPinRowEventArgs`](IPinRowEventArgs.md) + +*** + +### get\_rec\_by\_id() + +> **get\_rec\_by\_id**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L351) + +Represents a method declaration for retrieving the data associated with a specific record by its unique identifier (of any type, taken as a parameter). + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +*** + +### get\_rec\_id\_by\_index() + +> **get\_rec\_id\_by\_index**(`index`, `dataCollection?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:361](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L361) + +Represents a method declaration for retrieving the index of a record in the grid's data collection using its index. + +#### Parameters + +##### index + +`number` + +##### dataCollection? + +`any`[] + +#### Returns + +`any` + +*** + +### get\_rec\_index\_by\_id() + +> **get\_rec\_index\_by\_id**(`pk`, `dataCollection?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:359](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L359) + +Represents a method declaration for retrieving the index of a record in the grid's data collection using its unique identifier. + +#### Parameters + +##### pk + +`string` \| `number` + +##### dataCollection? + +`any`[] + +#### Returns + +`number` + +*** + +### get\_row\_by\_index() + +> **get\_row\_by\_index**(`rowSelector`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:355](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L355) + +Represents a method declaration for retrieving the row object associated with a specific index (taken as a parameter) in the grid + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +[`RowType`](RowType.md) + +*** + +### get\_row\_by\_key() + +> **get\_row\_by\_key**(`rowSelector`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:357](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L357) + +Represents a method declaration for retrieving the row object associated with a specific key (taken as a parameter) in the grid + +#### Parameters + +##### rowSelector + +`any` + +#### Returns + +[`RowType`](RowType.md) + +*** + +### get\_row\_expansion\_state() + +> **get\_row\_expansion\_state**(`id`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:385](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L385) + +Represents a method declaration for retrieving the row's current state of expansion (used for tree grids) + +#### Parameters + +##### id + +`any` + +#### Returns + +`boolean` + +*** + +### get\_row\_id() + +> **get\_row\_id**(`rowData`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:353](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L353) + +Represents a method declaration for retrieving the unique identifier of a specific row by its data. + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`any` + +*** + +### get\_row\_index\_in\_data() + +> **get\_row\_index\_in\_data**(`rowID`, `dataCollection?`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:362](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L362) + +#### Parameters + +##### rowID + +`any` + +##### dataCollection? + +`any`[] + +#### Returns + +`number` + +*** + +### get\_selected\_children()? + +> `optional` **get\_selected\_children**(`record`, `selectedRowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:414](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L414) + +#### Parameters + +##### record + +[`ITreeGridRecord`](ITreeGridRecord.md) + +##### selectedRowIDs + +`any`[] + +#### Returns + +`void` + +*** + +### get\_summary\_data() + +> **get\_summary\_data**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:388](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L388) + +#### Returns + +`any`[] + +*** + +### getChildGrid()? + +> `optional` **getChildGrid**(`path`): [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:420](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L420) + +#### Parameters + +##### path + +[`IPathSegment`](IPathSegment.md)[] + +#### Returns + +[`GridType`](GridType.md) + +*** + +### getChildGrids()? + +> `optional` **getChildGrids**(`inDepth?`): [`GridType`](GridType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L419) + +#### Parameters + +##### inDepth? + +`boolean` + +#### Returns + +[`GridType`](GridType.md)[] + +*** + +### getParentRowId()? + +> `optional` **getParentRowId**(`child`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L418) + +#### Parameters + +##### child + +[`GridType`](GridType.md) + +#### Returns + +`any` + +*** + +### getRowData() + +> **getRowData**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L349) + +Represents a method declaration for retrieving the data associated with a specific row by its unique identifier (of any type, taken as a parameter). + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +*** + +### prepare\_sorting\_expression() + +> **prepare\_sorting\_expression**(`stateCollections`, `expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:390](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L390) + +#### Parameters + +##### stateCollections + +`any`[][] + +##### expression + +[`ISortingExpression`](ISortingExpression.md) + +#### Returns + +`void` + +*** + +### registerChildRowIsland()? + +> `optional` **registerChildRowIsland**(`rowIsland`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:423](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L423) + +#### Parameters + +##### rowIsland + +[`GridType`](GridType.md) + +#### Returns + +`void` + +*** + +### remove\_grouping\_expression()? + +> `optional` **remove\_grouping\_expression**(`fieldName`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L416) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`void` + +*** + +### row\_deleted\_transaction() + +> **row\_deleted\_transaction**(`id`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:376](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L376) + +#### Parameters + +##### id + +`any` + +#### Returns + +`boolean` + +*** + +### set\_grouprow\_expansion\_state()? + +> `optional` **set\_grouprow\_expansion\_state**(`groupRow`, `value`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:375](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L375) + +Represents a method declaration that sets the expansion state of a group row (used for tree grids) +It takes the value for the expansion as a parameter (expanded or collapsed) + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](IGroupByRecord.md) + +##### value + +`boolean` + +#### Returns + +`void` + +*** + +### set\_row\_expansion\_state() + +> **set\_row\_expansion\_state**(`id`, `expanded`, `event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:387](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L387) + +Represents a method declaration for setting a new expansion state. It can be triggered by an event + +#### Parameters + +##### id + +`any` + +##### expanded + +`boolean` + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:395](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L395) + +Represents a method declaration for sorting by only one expression +The expression contains fieldName, sorting directory, whether case should be ignored and optional sorting strategy + +#### Parameters + +##### expression + +[`ISortingExpression`](ISortingExpression.md) + +#### Returns + +`void` + +*** + +### sort\_multiple() + +> **sort\_multiple**(`expressions`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:400](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L400) + +Represents a method declaration for sorting by multiple expressions +The expressions contains fieldName, sorting directory, whether case should be ignored and optional sorting strategy + +#### Parameters + +##### expressions + +[`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +*** + +### sortDataByExpressions() + +> **sortDataByExpressions**(`data`, `expressions`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L408) + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`any`[] + +*** + +### unsetChildRowIsland()? + +> `optional` **unsetChildRowIsland**(`rowIsland`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:422](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L422) + +#### Parameters + +##### rowIsland + +[`GridType`](GridType.md) + +#### Returns + +`void` + +*** + +### update\_cell() + +> **update\_cell**(`cell`): [`IGridEditEventArgs`](IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:410](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L410) + +#### Parameters + +##### cell + +[`IgxCell`](../classes/IgxCell.md) + +#### Returns + +[`IGridEditEventArgs`](IGridEditEventArgs.md) + +*** + +### update\_row() + +> **update\_row**(`row`, `value`, `event?`): [`IGridEditEventArgs`](IGridEditEventArgs.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L411) + +#### Parameters + +##### row + +[`IgxEditRow`](../classes/IgxEditRow.md) + +##### value + +`any` + +##### event? + +`Event` + +#### Returns + +[`IGridEditEventArgs`](IGridEditEventArgs.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridType.md new file mode 100644 index 000000000..c8b8446bc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridType.md @@ -0,0 +1,3292 @@ +# Interface: GridType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:432](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L432) + +Interface representing a grid type. It is essentially the blueprint to a grid object. +Contains definitions of properties and methods, relevant to a grid +Extends `IGridDataBindable` + +## Extends + +- [`IGridDataBindable`](IGridDataBindable.md) + +## Extended by + +- [`FlatGridType`](FlatGridType.md) +- [`TreeGridType`](TreeGridType.md) +- [`HierarchicalGridType`](HierarchicalGridType.md) +- [`PivotGridType`](PivotGridType.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### \_baseFontSize? + +> `optional` **\_baseFontSize?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L641) + +The default font size, calculated for each element + +*** + +### \_filteredSortedUnpinnedData + +> **\_filteredSortedUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L694) + +*** + +### \_filteredUnpinnedData + +> **\_filteredUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L693) + +*** + +### \_totalRecords + +> **\_totalRecords**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:705](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L705) + +*** + +### activeNodeChange + +> **activeNodeChange**: `EventEmitter`\<[`IActiveNodeChangeEventArgs`](IActiveNodeChangeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:818](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L818) + +*** + +### advancedFilteringExpressionsTree + +> **advancedFilteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:877](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L877) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L878) + +*** + +### allowAdvancedFiltering + +> **allowAdvancedFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L872) + +*** + +### allowFiltering + +> **allowFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:445](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L445) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +*** + +### batchEditing + +> **batchEditing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L881) + +*** + +### batchEditingChange? + +> `optional` **batchEditingChange?**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:839](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L839) + +*** + +### calcHeight + +> **calcHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:633](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L633) + +CSS styling calculated for an element: calcHeight, calcWidth, outerWidth + +*** + +### calcWidth + +> **calcWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L634) + +*** + +### cascadeOnDelete? + +> `optional` **cascadeOnDelete?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:796](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L796) + +*** + +### cdr + +> `readonly` **cdr**: `ChangeDetectorRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L753) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +*** + +### cellClick + +> **cellClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:820](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L820) + +*** + +### cellEdit + +> **cellEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L849) + +*** + +### cellEditDone + +> **cellEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:850](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L850) + +*** + +### cellEditEnter + +> **cellEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L848) + +*** + +### cellEditExit + +> **cellEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L851) + +*** + +### cellMergeMode + +> **cellMergeMode**: [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L435) + +*** + +### cellSelection + +> **cellSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L774) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +*** + +### childDataKey? + +> `optional` **childDataKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L794) + +*** + +### childLayoutKeys? + +> `optional` **childLayoutKeys?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:806](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L806) + +*** + +### childLayoutList? + +> `optional` **childLayoutList?**: `QueryList`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L807) + +*** + +### columnInDrag + +> **columnInDrag**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L530) + +Indicates if the column of the grid is in drag mode + +*** + +### columnList + +> **columnList**: `QueryList`\<[`ColumnType`](ColumnType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L659) + +An unmodifiable list, containing all the columns of the grid. + +*** + +### columnMoving + +> **columnMoving**: `EventEmitter`\<[`IColumnMovingEventArgs`](IColumnMovingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:834](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L834) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `EventEmitter`\<[`IColumnMovingEndEventArgs`](IColumnMovingEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L832) + +*** + +### columnMovingStart + +> **columnMovingStart**: `EventEmitter`\<[`IColumnMovingStartEventArgs`](IColumnMovingStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L835) + +*** + +### columnPin + +> **columnPin**: `EventEmitter`\<[`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L836) + +*** + +### columnPinned + +> **columnPinned**: `EventEmitter`\<[`IPinColumnEventArgs`](IPinColumnEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L830) + +*** + +### columnResized + +> **columnResized**: `EventEmitter`\<[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L831) + +*** + +### columns + +> **columns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:660](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L660) + +*** + +### columnSelection + +> **columnSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L778) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `EventEmitter`\<[`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L833) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `EventEmitter`\<[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:838](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L838) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `EventEmitter`\<[`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L837) + +*** + +### columnWidthSetByUser + +> **columnWidthSetByUser**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L630) + +Indicates whether the width of the column is set by the user, or is configured automatically. + +*** + +### contextMenu + +> **contextMenu**: `EventEmitter`\<[`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:823](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L823) + +*** + +### currencyPositionLeft + +> **currencyPositionLeft**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L627) + +Indicates whether the currency symbol is positioned to the left of values. + +*** + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L29) + +#### Inherited from + +[`IGridDataBindable`](IGridDataBindable.md).[`data`](IGridDataBindable.md#data) + +*** + +### dataCloneStrategy + +> **dataCloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L475) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +*** + +### dataRowList + +> **dataRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L656) + +*** + +### dataView + +> **dataView**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:692](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L692) + +*** + +### dataWithAddedInTransactionRows + +> **dataWithAddedInTransactionRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:696](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L696) + +*** + +### defaultRowHeight + +> **defaultRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L639) + +*** + +### defaultSummaryHeight + +> **defaultSummaryHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:701](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L701) + +*** + +### disableTransitions + +> **disableTransitions**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L625) + +Indicates whether transitions are disabled for the grid. + +*** + +### doubleClick + +> **doubleClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L822) + +*** + +### dragIndicatorIconBase + +> **dragIndicatorIconBase**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L623) + +The base drag indicator icon. Could be of any type + +*** + +### dragIndicatorIconTemplate + +> **dragIndicatorIconTemplate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L621) + +The template for drag indicator icons. Could be of any type + +*** + +### excelStyleHeaderIconTemplate + +> **excelStyleHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L770) + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### expansionDepth? + +> `optional` **expansionDepth?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L793) + +*** + +### expansionStates + +> **expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:652](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L652) + +*** + +### filteredSortedData + +> **filteredSortedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L695) + +*** + +### filtering + +> **filtering**: `EventEmitter`\<[`IFilteringEventArgs`](IFilteringEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:828](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L828) + +*** + +### filteringDone + +> **filteringDone**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L829) + +*** + +### filteringExpressionsTree + +> **filteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:875](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L875) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:876](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L876) + +*** + +### filteringLogic + +> **filteringLogic**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L870) + +*** + +### filteringPipeTrigger + +> **filteringPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L460) + +*** + +### filterMode + +> **filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L481) + +The filter mode for the grid. It can be quick filter of excel-style filter + +*** + +### filterStrategy + +> **filterStrategy**: [`IFilteringStrategy`](IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:871](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L871) + +*** + +### firstEditableColumnIndex + +> **firstEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:730](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L730) + +*** + +### flatData? + +> `optional` **flatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:790](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L790) + +*** + +### foreignKey? + +> `optional` **foreignKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L795) + +*** + +### formGroupCreated + +> **formGroupCreated**: `EventEmitter`\<[`IGridFormGroupCreatedEventArgs`](IGridFormGroupCreatedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L859) + +*** + +### getHeaderCellWidth + +> **getHeaderCellWidth**: (`element`) => [`ISizeInfo`](ISizeInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L746) + +Property, that gets the header cell inner width for auto-sizing. + +#### Parameters + +##### element + +`HTMLElement` + +#### Returns + +[`ISizeInfo`](ISizeInfo.md) + +*** + +### gridAPI + +> `readonly` **gridAPI**: [`GridServiceType`](GridServiceType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:478](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L478) + +Represents the grid service type providing API methods for the grid + +*** + +### gridKeydown + +> **gridKeydown**: `EventEmitter`\<[`IGridKeydownEventArgs`](IGridKeydownEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L819) + +*** + +### groupByRowSelectorTemplate? + +> `optional` **groupByRowSelectorTemplate?**: `TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](IgxGroupByRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:578](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L578) + +Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### groupingExpansionState? + +> `optional` **groupingExpansionState?**: [`IGroupByExpandState`](IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L882) + +*** + +### groupingExpressions? + +> `optional` **groupingExpressions?**: [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:883](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L883) + +*** + +### groupingExpressionsChange? + +> `optional` **groupingExpressionsChange?**: `EventEmitter`\<[`IGroupingExpression`](IGroupingExpression.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:884](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L884) + +*** + +### groupingFlatResult? + +> `optional` **groupingFlatResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L887) + +*** + +### groupingMetadata? + +> `optional` **groupingMetadata?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:889](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L889) + +*** + +### groupingResult? + +> `optional` **groupingResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L888) + +*** + +### groupRowTemplate? + +> `optional` **groupRowTemplate?**: `TemplateRef`\<[`IgxGroupByRowTemplateContext`](IgxGroupByRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L572) + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### groupsExpanded? + +> `optional` **groupsExpanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L885) + +*** + +### groupsRecords? + +> `readonly` `optional` **groupsRecords?**: [`IGroupByRecord`](IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L886) + +*** + +### groupStrategy? + +> `optional` **groupStrategy?**: [`IGridGroupingStrategy`](IGridGroupingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L869) + +*** + +### hasChildrenKey? + +> `optional` **hasChildrenKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:799](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L799) + +*** + +### hasDetails + +> **hasDetails**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L733) + +*** + +### hasExpandableChildren? + +> `optional` **hasExpandableChildren?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L549) + +Optional +Indicates whether the grid has expandable children (hierarchical and tree grid) + +*** + +### hasPinnedRecords + +> **hasPinnedRecords**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L685) + +*** + +### hasVisibleColumns + +> **hasVisibleColumns**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L544) + +Indicates whether the grid has columns that are shown + +*** + +### headerCollapsedIndicatorTemplate + +> **headerCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L614) + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### headerExpandedIndicatorTemplate + +> **headerExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L619) + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### headerFeaturesWidth + +> **headerFeaturesWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:631](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L631) + +*** + +### headSelectorBaseAriaLabel + +> **headSelectorBaseAriaLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L541) + +*** + +### headSelectorTemplate + +> **headSelectorTemplate**: `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L589) + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### hiddenColumnsCount + +> **hiddenColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L557) + +Represents the count of only the hidden (not visible) columns + +*** + +### highlightedRowID? + +> `optional` **highlightedRowID?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L804) + +*** + +### iconTemplate? + +> `optional` **iconTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L566) + +Optional +The template for grid icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L451) + +Represents the unique identifier of the grid. + +#### Overrides + +[`IGridDataBindable`](IGridDataBindable.md).[`id`](IGridDataBindable.md#id) + +*** + +### isCellSelectable + +> **isCellSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:682](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L682) + +Indicates whether cells are selectable in the grid + +*** + +### isLoading + +> **isLoading**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L465) + +*** + +### isMultiRowSelectionEnabled + +> **isMultiRowSelectionEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L684) + +Indicates whether it is allowed to select more than one row in the grid + +*** + +### isRowPinningToTop + +> **isRowPinningToTop**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L732) + +*** + +### isRowSelectable + +> **isRowSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L526) + +Indicates whether the grid's rows can be selected + +*** + +### lastChildGrid? + +> `optional` **lastChildGrid?**: `GridType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:785](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L785) + +*** + +### lastEditableColumnIndex + +> **lastEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L731) + +*** + +### lastSearchInfo + +> `readonly` **lastSearchInfo**: [`ISearchInfo`](ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L719) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +*** + +### loadChildrenOnDemand? + +> `optional` **loadChildrenOnDemand?**: (`parentID`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:798](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L798) + +#### Parameters + +##### parentID + +`any` + +##### done + +(`children`) => `void` + +#### Returns + +`void` + +*** + +### loadingRows? + +> `optional` **loadingRows?**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:801](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L801) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L434) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +*** + +### localeChange + +> **localeChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L827) + +*** + +### mergeStrategy + +> **mergeStrategy**: [`IGridMergeStrategy`](IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L436) + +*** + +### moving + +> **moving**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L464) + +Indicates whether the grid is currently in a moving state. + +*** + +### multiRowLayoutRowSize + +> **multiRowLayoutRowSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:638](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L638) + +*** + +### nativeElement + +> **nativeElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:440](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L440) + +Represents the native HTML element itself + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:518](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L518) + +*** + +### outerWidth + +> **outerWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:635](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L635) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L521) + +*** + +### pagingMode + +> **pagingMode**: [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L710) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +*** + +### parent? + +> `optional` **parent?**: `GridType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:803](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L803) + +*** + +### parentVirtDir + +> **parentVirtDir**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L653) + +*** + +### pinnedColumns + +> **pinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L666) + +An array of columns, but it counts only the ones that are pinned + +*** + +### pinnedColumnsCount + +> **pinnedColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:559](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L559) + +Represents the count of only the pinned columns + +*** + +### pinnedEndColumns + +> **pinnedEndColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L670) + +An array of columns, but it counts only the ones that are pinned to the end. + +*** + +### pinnedEndWidth + +> **pinnedEndWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L535) + +The width of pinned element for pinning at end. + +*** + +### pinnedRecords + +> **pinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:687](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L687) + +*** + +### pinnedRecordsCount + +> **pinnedRecordsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L686) + +*** + +### pinnedRows + +> **pinnedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L691) + +*** + +### pinnedStartColumns + +> **pinnedStartColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L668) + +An array of columns, but it counts only the ones that are pinned to the start. + +*** + +### pinnedStartWidth + +> **pinnedStartWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L533) + +The width of pinned element for pinning at start. + +*** + +### pinning + +> **pinning**: [`IPinningConfig`](IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L650) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +*** + +### pipeTrigger + +> **pipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L454) + +*** + +### primaryKey + +> **primaryKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L449) + +Represents the unique primary key used for identifying rows in the grid + +#### Overrides + +[`IGridDataBindable`](IGridDataBindable.md).[`primaryKey`](IGridDataBindable.md#primarykey) + +*** + +### processedExpandedFlatData? + +> `optional` **processedExpandedFlatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L813) + +*** + +### processedRecords? + +> `optional` **processedRecords?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L815) + +*** + +### processedRootRecords? + +> `optional` **processedRootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L809) + +*** + +### rangeSelected + +> **rangeSelected**: `EventEmitter`\<[`GridSelectionRange`](GridSelectionRange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:825](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L825) + +*** + +### records? + +> `optional` **records?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:812](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L812) + +*** + +### rendered$ + +> **rendered$**: `Observable`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:864](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L864) + +*** + +### renderedRowHeight + +> **renderedRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L453) + +The height of the visible rows in the grid. + +*** + +### resizeNotify + +> **resizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:866](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L866) + +*** + +### resourceStrings + +> **resourceStrings**: `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L437) + +*** + +### rootGrid? + +> `optional` **rootGrid?**: `GridType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L808) + +*** + +### rootRecords? + +> `optional` **rootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L810) + +*** + +### rootSummariesEnabled + +> **rootSummariesEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L443) + +*** + +### rowAdd + +> **rowAdd**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L840) + +*** + +### rowAdded + +> **rowAdded**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:841](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L841) + +*** + +### rowAddedNotifier + +> **rowAddedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L843) + +*** + +### rowClick + +> **rowClick**: `EventEmitter`\<[`IGridRowEventArgs`](IGridRowEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L821) + +*** + +### rowCollapsedIndicatorTemplate + +> **rowCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L765) + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### rowDelete + +> **rowDelete**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:844](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L844) + +*** + +### rowDeleted + +> **rowDeleted**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:845](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L845) + +*** + +### rowDeletedNotifier + +> **rowDeletedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L847) + +*** + +### rowDragEnd + +> **rowDragEnd**: `EventEmitter`\<[`IRowDragEndEventArgs`](IRowDragEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L857) + +*** + +### rowDraggable + +> **rowDraggable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L447) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +*** + +### rowDragging + +> **rowDragging**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L728) + +Indicates whether a row is currently being dragged + +*** + +### rowDragStart + +> **rowDragStart**: `EventEmitter`\<[`IRowDragStartEventArgs`](IRowDragStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:856](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L856) + +*** + +### rowEdit + +> **rowEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L853) + +*** + +### rowEditable + +> **rowEditable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L442) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +*** + +### rowEditDone + +> **rowEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L854) + +*** + +### rowEditEnter + +> **rowEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L852) + +*** + +### rowEditExit + +> **rowEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:855](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L855) + +*** + +### rowEditingOverlay + +> **rowEditingOverlay**: [`IgxToggleDirective`](../classes/IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L703) + +*** + +### rowEditTabs + +> **rowEditTabs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L715) + +*** + +### rowExpandedIndicatorTemplate + +> **rowExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L760) + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### rowHeight + +> **rowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L637) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +*** + +### rowList + +> **rowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L657) + +*** + +### rowLoadingIndicatorTemplate? + +> `optional` **rowLoadingIndicatorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L584) + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### rowSelection + +> **rowSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L776) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `EventEmitter`\<[`IRowSelectionEventArgs`](IRowSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L826) + +*** + +### rowSelectorTemplate + +> **rowSelectorTemplate**: `TemplateRef`\<[`IgxRowSelectorTemplateContext`](IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:594](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L594) + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### rowToggle + +> **rowToggle**: `EventEmitter`\<[`IRowToggleEventArgs`](IRowToggleEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L858) + +*** + +### scrollSize + +> **scrollSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L642) + +*** + +### selected + +> **selected**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:824](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L824) + +*** + +### selectedCells? + +> `optional` **selectedCells?**: [`CellType`](CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L890) + +*** + +### selectedRows + +> **selectedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:891](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L891) + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L517) + +The service handling selection in the grid. Selecting, deselecting elements + +*** + +### selectRowOnClick + +> **selectRowOnClick**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:772](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L772) + +*** + +### showExpandAll? + +> `optional` **showExpandAll?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L554) + +Optional +Indicates whether collapsed grid elements should be expanded + +*** + +### showRowSelectors + +> **showRowSelectors**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:528](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L528) + +Indicates whether the selectors of the rows are visible + +*** + +### sortAscendingHeaderIconTemplate + +> **sortAscendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L604) + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### sortDescendingHeaderIconTemplate + +> **sortDescendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L609) + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### sortHeaderIconTemplate + +> **sortHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L599) + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +*** + +### sortingExpressions + +> **sortingExpressions**: [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:873](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L873) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `EventEmitter`\<[`ISortingExpression`](ISortingExpression.md)\<`any`\>[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L874) + +*** + +### sortingOptions + +> **sortingOptions**: [`ISortingOptions`](ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:879](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L879) + +*** + +### sortStrategy + +> **sortStrategy**: [`IGridSortingStrategy`](IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:868](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L868) + +*** + +### summariesMargin + +> **summariesMargin**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L540) + +The CSS margin of the summaries + +*** + +### summariesRowList + +> **summariesRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L678) + +*** + +### summaryCalculationMode + +> **summaryCalculationMode**: [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:780](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L780) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +*** + +### summaryPipeTrigger + +> **summaryPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L455) + +*** + +### summaryPosition + +> **summaryPosition**: [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L782) + +Represents the position of summaries: 'top', 'bottom' + +*** + +### summaryRowHeight + +> **summaryRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:702](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L702) + +*** + +### tbody + +> **tbody**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:654](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L654) + +*** + +### toolbarExporting + +> **toolbarExporting**: `EventEmitter`\<[`IGridToolbarExportEventArgs`](IGridToolbarExportEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L862) + +*** + +### totalRowsCountAfterFilter + +> **totalRowsCountAfterFilter**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L704) + +*** + +### transactions + +> `readonly` **transactions**: [`TransactionService`](TransactionService.md)\<[`Transaction`](Transaction.md), [`State`](State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L698) + +Represents the transaction service for the grid. + +*** + +### treeGroupArea? + +> `optional` **treeGroupArea?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L816) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `tree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L743) + +Property, that provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### tree + +[`FilteringExpressionsTree`](../classes/FilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +*** + +### unpinnedColumns + +> **unpinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:664](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L664) + +An array of columns, but it counts only the ones that are not pinned + +*** + +### unpinnedRecords + +> **unpinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:688](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L688) + +*** + +### unpinnedWidth + +> **unpinnedWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L538) + +The width of unpinned element + +*** + +### updateOnRender? + +> `optional` **updateOnRender?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L805) + +*** + +### validation + +> `readonly` **validation**: [`IgxGridValidationService`](../classes/IgxGridValidationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:700](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L700) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +*** + +### validationStatusChange + +> **validationStatusChange**: `EventEmitter`\<[`IGridValidationStatusEventArgs`](IGridValidationStatusEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L860) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L645) + +The trigger for grid validation. It's value can either be `change` or `blur` + +*** + +### verticalScrollContainer + +> **verticalScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L655) + +*** + +### virtualizationState + +> **virtualizationState**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L513) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +*** + +### visibleColumns + +> **visibleColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:662](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L662) + +An array of columns, but it counts only the ones visible (not hidden) in the view + +## Accessors + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L30) + +##### Returns + +`any`[] + +#### Inherited from + +[`IGridDataBindable`](IGridDataBindable.md).[`filteredData`](IGridDataBindable.md#filtereddata) + +## Methods + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L953) + +#### Returns + +`void` + +*** + +### clearGrouping()? + +> `optional` **clearGrouping**(`field`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L898) + +#### Parameters + +##### field + +`string` + +#### Returns + +`void` + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L927) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +*** + +### closeRowEditingOverlay() + +> **closeRowEditingOverlay**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:972](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L972) + +#### Returns + +`void` + +*** + +### collapseRow() + +> **collapseRow**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L967) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +*** + +### columnToVisibleIndex() + +> **columnToVisibleIndex**(`key`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:945](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L945) + +#### Parameters + +##### key + +`string` \| `number` + +#### Returns + +`number` + +*** + +### createColumnsList()? + +> `optional` **createColumnsList**(`cols`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:977](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L977) + +#### Parameters + +##### cols + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +*** + +### createFilterDropdown() + +> **createFilterDropdown**(`column`, `options`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L960) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### options + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`any` + +*** + +### createRow()? + +> `optional` **createRow**(`index`, `data?`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L963) + +#### Parameters + +##### index + +`number` + +##### data? + +`any` + +#### Returns + +[`RowType`](RowType.md) + +*** + +### deleteRow() + +> **deleteRow**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L964) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +*** + +### deleteRowById() + +> **deleteRowById**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L965) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L903) + +#### Returns + +`void` + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L958) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L904) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L956) + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +*** + +### generateRowPath()? + +> `optional` **generateRowPath**(`rowId`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:980](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L980) + +#### Parameters + +##### rowId + +`any` + +#### Returns + +`any`[] + +*** + +### getChildGrids()? + +> `optional` **getChildGrids**(`inDepth?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L943) + +#### Parameters + +##### inDepth? + +`boolean` + +#### Returns + +`any`[] + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L919) + +#### Parameters + +##### name + +`string` + +#### Returns + +`any` + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L920) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`ColumnType`](ColumnType.md) + +*** + +### getDefaultExpandState() + +> **getDefaultExpandState**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:908](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L908) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +*** + +### getDragGhostCustomTemplate() + +> **getDragGhostCustomTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:915](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L915) + +#### Returns + +`any` + +*** + +### getEmptyRecordObjectFor() + +> **getEmptyRecordObjectFor**(`inRow`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L931) + +#### Parameters + +##### inRow + +[`RowType`](RowType.md) + +#### Returns + +`any` + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:921](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L921) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +#### Returns + +`string` + +*** + +### getInitialPinnedIndex() + +> **getInitialPinnedIndex**(`rec`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:935](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L935) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`number` + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L952) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +*** + +### getPossibleColumnWidth() + +> **getPossibleColumnWidth**(`baseWidth?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:910](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L910) + +#### Parameters + +##### baseWidth? + +`number` + +#### Returns + +`string` + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L950) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +*** + +### getRowByIndex()? + +> `optional` **getRowByIndex**(`index`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L923) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](RowType.md) + +*** + +### getRowByKey()? + +> `optional` **getRowByKey**(`key`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L922) + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](RowType.md) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L902) + +#### Returns + +[`GridSelectionRange`](GridSelectionRange.md)[] + +*** + +### getUnpinnedIndexById() + +> **getUnpinnedIndexById**(`id`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:930](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L930) + +#### Parameters + +##### id + +`any` + +#### Returns + +`number` + +*** + +### getVisibleContentHeight() + +> **getVisibleContentHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:913](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L913) + +#### Returns + +`number` + +*** + +### groupBy()? + +> `optional` **groupBy**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:899](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L899) + +#### Parameters + +##### expression + +[`IGroupingExpression`](IGroupingExpression.md) \| [`IGroupingExpression`](IGroupingExpression.md)[] + +#### Returns + +`void` + +*** + +### hasVerticalScroll() + +> **hasVerticalScroll**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:912](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L912) + +#### Returns + +`boolean` + +*** + +### isChildGridRecord()? + +> `optional` **isChildGridRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:942](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L942) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isColumnGrouped() + +> **isColumnGrouped**(`fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L937) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`boolean` + +*** + +### isDetailRecord() + +> **isDetailRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:938](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L938) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isExpandedGroup() + +> **isExpandedGroup**(`group`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:976](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L976) + +#### Parameters + +##### group + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`boolean` + +*** + +### isGhostRecord() + +> **isGhostRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:940](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L940) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isGroupByRecord() + +> **isGroupByRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:939](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L939) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isHierarchicalRecord()? + +> `optional` **isHierarchicalRecord**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L944) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +*** + +### isRecordMerged() + +> **isRecordMerged**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L934) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isRecordPinned() + +> **isRecordPinned**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:933](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L933) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isRecordPinnedByViewIndex() + +> **isRecordPinnedByViewIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:936](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L936) + +#### Parameters + +##### rowIndex + +`number` + +#### Returns + +`boolean` + +*** + +### isSummaryRow() + +> **isSummaryRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:932](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L932) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### isTreeRow()? + +> `optional` **isTreeRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L941) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L946) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### target + +[`ColumnType`](ColumnType.md) + +##### pos + +[`DropPosition`](../enumerations/DropPosition.md) + +#### Returns + +`void` + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColumnIndex`, `callback?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:948](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L948) + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColumnIndex + +`number` + +##### callback? + +(`e`) => `any` + +#### Returns + +`void` + +*** + +### notifyChanges() + +> **notifyChanges**(`repaint?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L968) + +#### Parameters + +##### repaint? + +`boolean` + +#### Returns + +`void` + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:917](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L917) + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`void` + +*** + +### openRowOverlay() + +> **openRowOverlay**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L916) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +*** + +### pinRow() + +> **pinRow**(`id`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:928](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L928) + +#### Parameters + +##### id + +`any` + +##### index? + +`number` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +*** + +### preventHeaderScroll()? + +> `optional` **preventHeaderScroll**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:981](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L981) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L973) + +#### Returns + +`void` + +*** + +### refreshSearch() + +> **refreshSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:907](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L907) + +#### Returns + +`void` + +*** + +### repositionRowEditingOverlay() + +> **repositionRowEditingOverlay**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:971](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L971) + +#### Parameters + +##### row + +[`RowType`](RowType.md) + +#### Returns + +`void` + +*** + +### resetColumnCollections() + +> **resetColumnCollections**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L969) + +#### Returns + +`void` + +*** + +### resetHorizontalVirtualization() + +> **resetHorizontalVirtualization**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L911) + +#### Returns + +`void` + +*** + +### resolveOutlet()? + +> `optional` **resolveOutlet**(): [`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:900](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L900) + +#### Returns + +[`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L957) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +*** + +### selectColumns() + +> **selectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L905) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L906) + +#### Returns + +[`ColumnType`](ColumnType.md)[] + +*** + +### selectRange() + +> **selectRange**(`range`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L954) + +#### Parameters + +##### range + +[`GridSelectionRange`](GridSelectionRange.md) \| [`GridSelectionRange`](GridSelectionRange.md)[] + +#### Returns + +`void` + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L955) + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +#### Returns + +`void` + +*** + +### setFilteredData() + +> **setFilteredData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L924) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +*** + +### setFilteredSortedData() + +> **setFilteredSortedData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:925](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L925) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +*** + +### setUpPaginator() + +> **setUpPaginator**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L959) + +#### Returns + +`void` + +*** + +### showSnackbarFor() + +> **showSnackbarFor**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L918) + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L926) + +#### Parameters + +##### expression + +[`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +*** + +### toggleAll()? + +> `optional` **toggleAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:979](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L979) + +#### Returns + +`void` + +*** + +### toggleAllGroupRows()? + +> `optional` **toggleAllGroupRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:978](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L978) + +#### Returns + +`void` + +*** + +### toggleGroup()? + +> `optional` **toggleGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:897](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L897) + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`void` + +*** + +### trackColumnChanges() + +> **trackColumnChanges**(`index`, `column`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:909](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L909) + +#### Parameters + +##### index + +`number` + +##### column + +`any` + +#### Returns + +`any` + +*** + +### triggerPipes() + +> **triggerPipes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L970) + +#### Returns + +`void` + +*** + +### unpinRow() + +> **unpinRow**(`id`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:929](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L929) + +#### Parameters + +##### id + +`any` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L961) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +##### column + +`string` + +#### Returns + +`void` + +*** + +### updateColumns() + +> **updateColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L901) + +#### Parameters + +##### columns + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L966) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridTypeBase.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridTypeBase.md new file mode 100644 index 000000000..8a5b8c74c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/GridTypeBase.md @@ -0,0 +1,37 @@ +# Interface: GridTypeBase + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L93) + +Stub type for GridType - minimal interface for typing in core + +## Extended by + +- [`IGridDataBindable`](IGridDataBindable.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L96) + +*** + +### id? + +> `optional` **id?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L95) + +*** + +### primaryKey? + +> `optional` **primaryKey?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L94) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HeaderType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HeaderType.md new file mode 100644 index 000000000..bb50e28f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HeaderType.md @@ -0,0 +1,76 @@ +# Interface: HeaderType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L115) + +Interface representing a header cell in the grid. It is essentially the blueprint to a header cell object. +Contains definitions of properties, relevant to the header + +## Properties + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L120) + +The column that the header cell represents. + +*** + +### nativeElement + +> **nativeElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L118) + +Represents the native HTML element of the cell itself + +*** + +### selectable + +> **selectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L124) + +Indicates whether the cell can be selected + +*** + +### selected + +> **selected**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L126) + +Indicates whether the cell is currently selected + +*** + +### sortDirection + +> **sortDirection**: [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L130) + +Represents the sorting direction of the column (ascending, descending or none). + +*** + +### sorted + +> **sorted**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L122) + +Indicates whether the column is currently sorted. + +*** + +### title + +> **title**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L128) + +Indicates whether the column header is a title cell. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HierarchicalGridType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HierarchicalGridType.md new file mode 100644 index 000000000..cd350b46b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HierarchicalGridType.md @@ -0,0 +1,4409 @@ +# Interface: HierarchicalGridType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1015](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1015) + +An interface describing a Hierarchical Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from `GridType` + +## Extends + +- [`GridType`](GridType.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### \_baseFontSize? + +> `optional` **\_baseFontSize?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L641) + +The default font size, calculated for each element + +#### Inherited from + +[`GridType`](GridType.md).[`_baseFontSize`](GridType.md#_basefontsize) + +*** + +### \_filteredSortedUnpinnedData + +> **\_filteredSortedUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L694) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredSortedUnpinnedData`](GridType.md#_filteredsortedunpinneddata) + +*** + +### \_filteredUnpinnedData + +> **\_filteredUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L693) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredUnpinnedData`](GridType.md#_filteredunpinneddata) + +*** + +### \_totalRecords + +> **\_totalRecords**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:705](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L705) + +#### Inherited from + +[`GridType`](GridType.md).[`_totalRecords`](GridType.md#_totalrecords) + +*** + +### activeNodeChange + +> **activeNodeChange**: `EventEmitter`\<[`IActiveNodeChangeEventArgs`](IActiveNodeChangeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:818](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L818) + +#### Inherited from + +[`GridType`](GridType.md).[`activeNodeChange`](GridType.md#activenodechange) + +*** + +### advancedFilteringExpressionsTree + +> **advancedFilteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:877](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L877) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTree`](GridType.md#advancedfilteringexpressionstree) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L878) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTreeChange`](GridType.md#advancedfilteringexpressionstreechange) + +*** + +### allowAdvancedFiltering + +> **allowAdvancedFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L872) + +#### Inherited from + +[`GridType`](GridType.md).[`allowAdvancedFiltering`](GridType.md#allowadvancedfiltering) + +*** + +### allowFiltering + +> **allowFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:445](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L445) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Inherited from + +[`GridType`](GridType.md).[`allowFiltering`](GridType.md#allowfiltering) + +*** + +### batchEditing + +> **batchEditing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L881) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditing`](GridType.md#batchediting) + +*** + +### batchEditingChange? + +> `optional` **batchEditingChange?**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:839](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L839) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditingChange`](GridType.md#batcheditingchange) + +*** + +### calcHeight + +> **calcHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:633](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L633) + +CSS styling calculated for an element: calcHeight, calcWidth, outerWidth + +#### Inherited from + +[`GridType`](GridType.md).[`calcHeight`](GridType.md#calcheight) + +*** + +### calcWidth + +> **calcWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L634) + +#### Inherited from + +[`GridType`](GridType.md).[`calcWidth`](GridType.md#calcwidth) + +*** + +### cascadeOnDelete? + +> `optional` **cascadeOnDelete?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:796](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L796) + +#### Inherited from + +[`GridType`](GridType.md).[`cascadeOnDelete`](GridType.md#cascadeondelete) + +*** + +### cdr + +> `readonly` **cdr**: `ChangeDetectorRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L753) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Inherited from + +[`GridType`](GridType.md).[`cdr`](GridType.md#cdr) + +*** + +### cellClick + +> **cellClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:820](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L820) + +#### Inherited from + +[`GridType`](GridType.md).[`cellClick`](GridType.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L849) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEdit`](GridType.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:850](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L850) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditDone`](GridType.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L848) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditEnter`](GridType.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L851) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditExit`](GridType.md#celleditexit) + +*** + +### cellMergeMode + +> **cellMergeMode**: [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L435) + +#### Inherited from + +[`GridType`](GridType.md).[`cellMergeMode`](GridType.md#cellmergemode) + +*** + +### cellSelection + +> **cellSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L774) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`cellSelection`](GridType.md#cellselection) + +*** + +### childDataKey? + +> `optional` **childDataKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L794) + +#### Inherited from + +[`GridType`](GridType.md).[`childDataKey`](GridType.md#childdatakey) + +*** + +### childLayoutKeys + +> **childLayoutKeys**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1016](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1016) + +#### Overrides + +[`GridType`](GridType.md).[`childLayoutKeys`](GridType.md#childlayoutkeys) + +*** + +### childLayoutList? + +> `optional` **childLayoutList?**: `QueryList`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L807) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutList`](GridType.md#childlayoutlist) + +*** + +### columnInDrag + +> **columnInDrag**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L530) + +Indicates if the column of the grid is in drag mode + +#### Inherited from + +[`GridType`](GridType.md).[`columnInDrag`](GridType.md#columnindrag) + +*** + +### columnList + +> **columnList**: `QueryList`\<[`ColumnType`](ColumnType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L659) + +An unmodifiable list, containing all the columns of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`columnList`](GridType.md#columnlist) + +*** + +### columnMoving + +> **columnMoving**: `EventEmitter`\<[`IColumnMovingEventArgs`](IColumnMovingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:834](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L834) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMoving`](GridType.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `EventEmitter`\<[`IColumnMovingEndEventArgs`](IColumnMovingEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L832) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingEnd`](GridType.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `EventEmitter`\<[`IColumnMovingStartEventArgs`](IColumnMovingStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L835) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingStart`](GridType.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `EventEmitter`\<[`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L836) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPin`](GridType.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `EventEmitter`\<[`IPinColumnEventArgs`](IPinColumnEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L830) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPinned`](GridType.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `EventEmitter`\<[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L831) + +#### Inherited from + +[`GridType`](GridType.md).[`columnResized`](GridType.md#columnresized) + +*** + +### columns + +> **columns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:660](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L660) + +#### Inherited from + +[`GridType`](GridType.md).[`columns`](GridType.md#columns) + +*** + +### columnSelection + +> **columnSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L778) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelection`](GridType.md#columnselection) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `EventEmitter`\<[`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L833) + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelectionChanging`](GridType.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `EventEmitter`\<[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:838](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L838) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanged`](GridType.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `EventEmitter`\<[`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L837) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanging`](GridType.md#columnvisibilitychanging) + +*** + +### columnWidthSetByUser + +> **columnWidthSetByUser**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L630) + +Indicates whether the width of the column is set by the user, or is configured automatically. + +#### Inherited from + +[`GridType`](GridType.md).[`columnWidthSetByUser`](GridType.md#columnwidthsetbyuser) + +*** + +### contextMenu + +> **contextMenu**: `EventEmitter`\<[`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:823](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L823) + +#### Inherited from + +[`GridType`](GridType.md).[`contextMenu`](GridType.md#contextmenu) + +*** + +### currencyPositionLeft + +> **currencyPositionLeft**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L627) + +Indicates whether the currency symbol is positioned to the left of values. + +#### Inherited from + +[`GridType`](GridType.md).[`currencyPositionLeft`](GridType.md#currencypositionleft) + +*** + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L29) + +#### Inherited from + +[`GridType`](GridType.md).[`data`](GridType.md#data) + +*** + +### dataCloneStrategy + +> **dataCloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L475) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Inherited from + +[`GridType`](GridType.md).[`dataCloneStrategy`](GridType.md#dataclonestrategy) + +*** + +### dataRowList + +> **dataRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L656) + +#### Inherited from + +[`GridType`](GridType.md).[`dataRowList`](GridType.md#datarowlist) + +*** + +### dataView + +> **dataView**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:692](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L692) + +#### Inherited from + +[`GridType`](GridType.md).[`dataView`](GridType.md#dataview) + +*** + +### dataWithAddedInTransactionRows + +> **dataWithAddedInTransactionRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:696](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L696) + +#### Inherited from + +[`GridType`](GridType.md).[`dataWithAddedInTransactionRows`](GridType.md#datawithaddedintransactionrows) + +*** + +### defaultRowHeight + +> **defaultRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L639) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultRowHeight`](GridType.md#defaultrowheight) + +*** + +### defaultSummaryHeight + +> **defaultSummaryHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:701](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L701) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultSummaryHeight`](GridType.md#defaultsummaryheight) + +*** + +### disableTransitions + +> **disableTransitions**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L625) + +Indicates whether transitions are disabled for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`disableTransitions`](GridType.md#disabletransitions) + +*** + +### doubleClick + +> **doubleClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L822) + +#### Inherited from + +[`GridType`](GridType.md).[`doubleClick`](GridType.md#doubleclick) + +*** + +### dragIndicatorIconBase + +> **dragIndicatorIconBase**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L623) + +The base drag indicator icon. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconBase`](GridType.md#dragindicatoriconbase) + +*** + +### dragIndicatorIconTemplate + +> **dragIndicatorIconTemplate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L621) + +The template for drag indicator icons. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconTemplate`](GridType.md#dragindicatoricontemplate) + +*** + +### excelStyleHeaderIconTemplate + +> **excelStyleHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L770) + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`excelStyleHeaderIconTemplate`](GridType.md#excelstyleheadericontemplate) + +*** + +### expansionDepth? + +> `optional` **expansionDepth?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L793) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionDepth`](GridType.md#expansiondepth) + +*** + +### expansionStates + +> **expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:652](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L652) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionStates`](GridType.md#expansionstates) + +*** + +### filteredSortedData + +> **filteredSortedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L695) + +#### Inherited from + +[`GridType`](GridType.md).[`filteredSortedData`](GridType.md#filteredsorteddata) + +*** + +### filtering + +> **filtering**: `EventEmitter`\<[`IFilteringEventArgs`](IFilteringEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:828](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L828) + +#### Inherited from + +[`GridType`](GridType.md).[`filtering`](GridType.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L829) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringDone`](GridType.md#filteringdone) + +*** + +### filteringExpressionsTree + +> **filteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:875](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L875) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTree`](GridType.md#filteringexpressionstree) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:876](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L876) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTreeChange`](GridType.md#filteringexpressionstreechange) + +*** + +### filteringLogic + +> **filteringLogic**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L870) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringLogic`](GridType.md#filteringlogic) + +*** + +### filteringPipeTrigger + +> **filteringPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L460) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringPipeTrigger`](GridType.md#filteringpipetrigger) + +*** + +### filterMode + +> **filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L481) + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Inherited from + +[`GridType`](GridType.md).[`filterMode`](GridType.md#filtermode) + +*** + +### filterStrategy + +> **filterStrategy**: [`IFilteringStrategy`](IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:871](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L871) + +#### Inherited from + +[`GridType`](GridType.md).[`filterStrategy`](GridType.md#filterstrategy) + +*** + +### firstEditableColumnIndex + +> **firstEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:730](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L730) + +#### Inherited from + +[`GridType`](GridType.md).[`firstEditableColumnIndex`](GridType.md#firsteditablecolumnindex) + +*** + +### flatData? + +> `optional` **flatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:790](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L790) + +#### Inherited from + +[`GridType`](GridType.md).[`flatData`](GridType.md#flatdata) + +*** + +### foreignKey? + +> `optional` **foreignKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L795) + +#### Inherited from + +[`GridType`](GridType.md).[`foreignKey`](GridType.md#foreignkey) + +*** + +### formGroupCreated + +> **formGroupCreated**: `EventEmitter`\<[`IGridFormGroupCreatedEventArgs`](IGridFormGroupCreatedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L859) + +#### Inherited from + +[`GridType`](GridType.md).[`formGroupCreated`](GridType.md#formgroupcreated) + +*** + +### getHeaderCellWidth + +> **getHeaderCellWidth**: (`element`) => [`ISizeInfo`](ISizeInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L746) + +Property, that gets the header cell inner width for auto-sizing. + +#### Parameters + +##### element + +`HTMLElement` + +#### Returns + +[`ISizeInfo`](ISizeInfo.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderCellWidth`](GridType.md#getheadercellwidth) + +*** + +### gridAPI + +> `readonly` **gridAPI**: [`GridServiceType`](GridServiceType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:478](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L478) + +Represents the grid service type providing API methods for the grid + +#### Inherited from + +[`GridType`](GridType.md).[`gridAPI`](GridType.md#gridapi) + +*** + +### gridKeydown + +> **gridKeydown**: `EventEmitter`\<[`IGridKeydownEventArgs`](IGridKeydownEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L819) + +#### Inherited from + +[`GridType`](GridType.md).[`gridKeydown`](GridType.md#gridkeydown) + +*** + +### groupByRowSelectorTemplate? + +> `optional` **groupByRowSelectorTemplate?**: `TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](IgxGroupByRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:578](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L578) + +Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupByRowSelectorTemplate`](GridType.md#groupbyrowselectortemplate) + +*** + +### groupingExpansionState? + +> `optional` **groupingExpansionState?**: [`IGroupByExpandState`](IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L882) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpansionState`](GridType.md#groupingexpansionstate) + +*** + +### groupingExpressions? + +> `optional` **groupingExpressions?**: [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:883](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L883) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpressions`](GridType.md#groupingexpressions) + +*** + +### groupingExpressionsChange? + +> `optional` **groupingExpressionsChange?**: `EventEmitter`\<[`IGroupingExpression`](IGroupingExpression.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:884](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L884) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpressionsChange`](GridType.md#groupingexpressionschange) + +*** + +### groupingFlatResult? + +> `optional` **groupingFlatResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L887) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingFlatResult`](GridType.md#groupingflatresult) + +*** + +### groupingMetadata? + +> `optional` **groupingMetadata?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:889](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L889) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingMetadata`](GridType.md#groupingmetadata) + +*** + +### groupingResult? + +> `optional` **groupingResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L888) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingResult`](GridType.md#groupingresult) + +*** + +### groupRowTemplate? + +> `optional` **groupRowTemplate?**: `TemplateRef`\<[`IgxGroupByRowTemplateContext`](IgxGroupByRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L572) + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupRowTemplate`](GridType.md#grouprowtemplate) + +*** + +### groupsExpanded? + +> `optional` **groupsExpanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L885) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsExpanded`](GridType.md#groupsexpanded) + +*** + +### groupsRecords? + +> `readonly` `optional` **groupsRecords?**: [`IGroupByRecord`](IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L886) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsRecords`](GridType.md#groupsrecords) + +*** + +### groupStrategy? + +> `optional` **groupStrategy?**: [`IGridGroupingStrategy`](IGridGroupingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L869) + +#### Inherited from + +[`GridType`](GridType.md).[`groupStrategy`](GridType.md#groupstrategy) + +*** + +### hasChildrenKey? + +> `optional` **hasChildrenKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:799](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L799) + +#### Inherited from + +[`GridType`](GridType.md).[`hasChildrenKey`](GridType.md#haschildrenkey) + +*** + +### hasDetails + +> **hasDetails**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L733) + +#### Inherited from + +[`GridType`](GridType.md).[`hasDetails`](GridType.md#hasdetails) + +*** + +### hasExpandableChildren? + +> `optional` **hasExpandableChildren?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L549) + +Optional +Indicates whether the grid has expandable children (hierarchical and tree grid) + +#### Inherited from + +[`GridType`](GridType.md).[`hasExpandableChildren`](GridType.md#hasexpandablechildren) + +*** + +### hasPinnedRecords + +> **hasPinnedRecords**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L685) + +#### Inherited from + +[`GridType`](GridType.md).[`hasPinnedRecords`](GridType.md#haspinnedrecords) + +*** + +### hasVisibleColumns + +> **hasVisibleColumns**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L544) + +Indicates whether the grid has columns that are shown + +#### Inherited from + +[`GridType`](GridType.md).[`hasVisibleColumns`](GridType.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +> **headerCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L614) + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerCollapsedIndicatorTemplate`](GridType.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +> **headerExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L619) + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerExpandedIndicatorTemplate`](GridType.md#headerexpandedindicatortemplate) + +*** + +### headerFeaturesWidth + +> **headerFeaturesWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:631](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L631) + +#### Inherited from + +[`GridType`](GridType.md).[`headerFeaturesWidth`](GridType.md#headerfeatureswidth) + +*** + +### headSelectorBaseAriaLabel + +> **headSelectorBaseAriaLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L541) + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorBaseAriaLabel`](GridType.md#headselectorbasearialabel) + +*** + +### headSelectorTemplate + +> **headSelectorTemplate**: `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L589) + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorTemplate`](GridType.md#headselectortemplate) + +*** + +### hiddenColumnsCount + +> **hiddenColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L557) + +Represents the count of only the hidden (not visible) columns + +#### Inherited from + +[`GridType`](GridType.md).[`hiddenColumnsCount`](GridType.md#hiddencolumnscount) + +*** + +### highlightedRowID? + +> `optional` **highlightedRowID?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L804) + +#### Inherited from + +[`GridType`](GridType.md).[`highlightedRowID`](GridType.md#highlightedrowid) + +*** + +### iconTemplate? + +> `optional` **iconTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L566) + +Optional +The template for grid icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`iconTemplate`](GridType.md#icontemplate) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L451) + +Represents the unique identifier of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`id`](GridType.md#id) + +*** + +### isCellSelectable + +> **isCellSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:682](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L682) + +Indicates whether cells are selectable in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isCellSelectable`](GridType.md#iscellselectable) + +*** + +### isLoading + +> **isLoading**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L465) + +#### Inherited from + +[`GridType`](GridType.md).[`isLoading`](GridType.md#isloading) + +*** + +### isMultiRowSelectionEnabled + +> **isMultiRowSelectionEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L684) + +Indicates whether it is allowed to select more than one row in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isMultiRowSelectionEnabled`](GridType.md#ismultirowselectionenabled) + +*** + +### isRowPinningToTop + +> **isRowPinningToTop**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L732) + +#### Inherited from + +[`GridType`](GridType.md).[`isRowPinningToTop`](GridType.md#isrowpinningtotop) + +*** + +### isRowSelectable + +> **isRowSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L526) + +Indicates whether the grid's rows can be selected + +#### Inherited from + +[`GridType`](GridType.md).[`isRowSelectable`](GridType.md#isrowselectable) + +*** + +### lastChildGrid? + +> `optional` **lastChildGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:785](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L785) + +#### Inherited from + +[`GridType`](GridType.md).[`lastChildGrid`](GridType.md#lastchildgrid) + +*** + +### lastEditableColumnIndex + +> **lastEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L731) + +#### Inherited from + +[`GridType`](GridType.md).[`lastEditableColumnIndex`](GridType.md#lasteditablecolumnindex) + +*** + +### lastSearchInfo + +> `readonly` **lastSearchInfo**: [`ISearchInfo`](ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L719) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Inherited from + +[`GridType`](GridType.md).[`lastSearchInfo`](GridType.md#lastsearchinfo) + +*** + +### loadChildrenOnDemand? + +> `optional` **loadChildrenOnDemand?**: (`parentID`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:798](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L798) + +#### Parameters + +##### parentID + +`any` + +##### done + +(`children`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`loadChildrenOnDemand`](GridType.md#loadchildrenondemand) + +*** + +### loadingRows? + +> `optional` **loadingRows?**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:801](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L801) + +#### Inherited from + +[`GridType`](GridType.md).[`loadingRows`](GridType.md#loadingrows) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L434) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Inherited from + +[`GridType`](GridType.md).[`locale`](GridType.md#locale) + +*** + +### localeChange + +> **localeChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L827) + +#### Inherited from + +[`GridType`](GridType.md).[`localeChange`](GridType.md#localechange) + +*** + +### mergeStrategy + +> **mergeStrategy**: [`IGridMergeStrategy`](IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L436) + +#### Inherited from + +[`GridType`](GridType.md).[`mergeStrategy`](GridType.md#mergestrategy) + +*** + +### moving + +> **moving**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L464) + +Indicates whether the grid is currently in a moving state. + +#### Inherited from + +[`GridType`](GridType.md).[`moving`](GridType.md#moving) + +*** + +### multiRowLayoutRowSize + +> **multiRowLayoutRowSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:638](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L638) + +#### Inherited from + +[`GridType`](GridType.md).[`multiRowLayoutRowSize`](GridType.md#multirowlayoutrowsize) + +*** + +### nativeElement + +> **nativeElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:440](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L440) + +Represents the native HTML element itself + +#### Inherited from + +[`GridType`](GridType.md).[`nativeElement`](GridType.md#nativeelement) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:518](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L518) + +#### Inherited from + +[`GridType`](GridType.md).[`navigation`](GridType.md#navigation) + +*** + +### outerWidth + +> **outerWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:635](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L635) + +#### Inherited from + +[`GridType`](GridType.md).[`outerWidth`](GridType.md#outerwidth) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L521) + +#### Inherited from + +[`GridType`](GridType.md).[`outlet`](GridType.md#outlet) + +*** + +### pagingMode + +> **pagingMode**: [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L710) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Inherited from + +[`GridType`](GridType.md).[`pagingMode`](GridType.md#pagingmode) + +*** + +### parent? + +> `optional` **parent?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:803](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L803) + +#### Inherited from + +[`GridType`](GridType.md).[`parent`](GridType.md#parent) + +*** + +### parentVirtDir + +> **parentVirtDir**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L653) + +#### Inherited from + +[`GridType`](GridType.md).[`parentVirtDir`](GridType.md#parentvirtdir) + +*** + +### pinnedColumns + +> **pinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L666) + +An array of columns, but it counts only the ones that are pinned + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumns`](GridType.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +> **pinnedColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:559](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L559) + +Represents the count of only the pinned columns + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumnsCount`](GridType.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +> **pinnedEndColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L670) + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndColumns`](GridType.md#pinnedendcolumns) + +*** + +### pinnedEndWidth + +> **pinnedEndWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L535) + +The width of pinned element for pinning at end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndWidth`](GridType.md#pinnedendwidth) + +*** + +### pinnedRecords + +> **pinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:687](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L687) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecords`](GridType.md#pinnedrecords) + +*** + +### pinnedRecordsCount + +> **pinnedRecordsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L686) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecordsCount`](GridType.md#pinnedrecordscount) + +*** + +### pinnedRows + +> **pinnedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L691) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRows`](GridType.md#pinnedrows) + +*** + +### pinnedStartColumns + +> **pinnedStartColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L668) + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartColumns`](GridType.md#pinnedstartcolumns) + +*** + +### pinnedStartWidth + +> **pinnedStartWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L533) + +The width of pinned element for pinning at start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartWidth`](GridType.md#pinnedstartwidth) + +*** + +### pinning + +> **pinning**: [`IPinningConfig`](IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L650) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Inherited from + +[`GridType`](GridType.md).[`pinning`](GridType.md#pinning) + +*** + +### pipeTrigger + +> **pipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L454) + +#### Inherited from + +[`GridType`](GridType.md).[`pipeTrigger`](GridType.md#pipetrigger) + +*** + +### primaryKey + +> **primaryKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L449) + +Represents the unique primary key used for identifying rows in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`primaryKey`](GridType.md#primarykey) + +*** + +### processedExpandedFlatData? + +> `optional` **processedExpandedFlatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L813) + +#### Inherited from + +[`GridType`](GridType.md).[`processedExpandedFlatData`](GridType.md#processedexpandedflatdata) + +*** + +### processedRecords? + +> `optional` **processedRecords?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L815) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRecords`](GridType.md#processedrecords) + +*** + +### processedRootRecords? + +> `optional` **processedRootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L809) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRootRecords`](GridType.md#processedrootrecords) + +*** + +### rangeSelected + +> **rangeSelected**: `EventEmitter`\<[`GridSelectionRange`](GridSelectionRange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:825](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L825) + +#### Inherited from + +[`GridType`](GridType.md).[`rangeSelected`](GridType.md#rangeselected) + +*** + +### records? + +> `optional` **records?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:812](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L812) + +#### Inherited from + +[`GridType`](GridType.md).[`records`](GridType.md#records) + +*** + +### rendered$ + +> **rendered$**: `Observable`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:864](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L864) + +#### Inherited from + +[`GridType`](GridType.md).[`rendered$`](GridType.md#rendered) + +*** + +### renderedRowHeight + +> **renderedRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L453) + +The height of the visible rows in the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`renderedRowHeight`](GridType.md#renderedrowheight) + +*** + +### resizeNotify + +> **resizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:866](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L866) + +#### Inherited from + +[`GridType`](GridType.md).[`resizeNotify`](GridType.md#resizenotify) + +*** + +### resourceStrings + +> **resourceStrings**: `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L437) + +#### Inherited from + +[`GridType`](GridType.md).[`resourceStrings`](GridType.md#resourcestrings) + +*** + +### rootGrid? + +> `optional` **rootGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L808) + +#### Inherited from + +[`GridType`](GridType.md).[`rootGrid`](GridType.md#rootgrid) + +*** + +### rootRecords? + +> `optional` **rootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L810) + +#### Inherited from + +[`GridType`](GridType.md).[`rootRecords`](GridType.md#rootrecords) + +*** + +### rootSummariesEnabled + +> **rootSummariesEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L443) + +#### Inherited from + +[`GridType`](GridType.md).[`rootSummariesEnabled`](GridType.md#rootsummariesenabled) + +*** + +### rowAdd + +> **rowAdd**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L840) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdd`](GridType.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:841](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L841) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdded`](GridType.md#rowadded) + +*** + +### rowAddedNotifier + +> **rowAddedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L843) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAddedNotifier`](GridType.md#rowaddednotifier) + +*** + +### rowClick + +> **rowClick**: `EventEmitter`\<[`IGridRowEventArgs`](IGridRowEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L821) + +#### Inherited from + +[`GridType`](GridType.md).[`rowClick`](GridType.md#rowclick) + +*** + +### rowCollapsedIndicatorTemplate + +> **rowCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L765) + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowCollapsedIndicatorTemplate`](GridType.md#rowcollapsedindicatortemplate) + +*** + +### rowDelete + +> **rowDelete**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:844](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L844) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDelete`](GridType.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:845](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L845) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeleted`](GridType.md#rowdeleted) + +*** + +### rowDeletedNotifier + +> **rowDeletedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L847) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeletedNotifier`](GridType.md#rowdeletednotifier) + +*** + +### rowDragEnd + +> **rowDragEnd**: `EventEmitter`\<[`IRowDragEndEventArgs`](IRowDragEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L857) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragEnd`](GridType.md#rowdragend) + +*** + +### rowDraggable + +> **rowDraggable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L447) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDraggable`](GridType.md#rowdraggable) + +*** + +### rowDragging + +> **rowDragging**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L728) + +Indicates whether a row is currently being dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragging`](GridType.md#rowdragging) + +*** + +### rowDragStart + +> **rowDragStart**: `EventEmitter`\<[`IRowDragStartEventArgs`](IRowDragStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:856](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L856) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragStart`](GridType.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L853) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEdit`](GridType.md#rowedit) + +*** + +### rowEditable + +> **rowEditable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L442) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditable`](GridType.md#roweditable) + +*** + +### rowEditDone + +> **rowEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L854) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditDone`](GridType.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L852) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditEnter`](GridType.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:855](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L855) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditExit`](GridType.md#roweditexit) + +*** + +### rowEditingOverlay + +> **rowEditingOverlay**: [`IgxToggleDirective`](../classes/IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L703) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditingOverlay`](GridType.md#roweditingoverlay) + +*** + +### rowEditTabs + +> **rowEditTabs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L715) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditTabs`](GridType.md#rowedittabs) + +*** + +### rowExpandedIndicatorTemplate + +> **rowExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L760) + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowExpandedIndicatorTemplate`](GridType.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +> **rowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L637) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Inherited from + +[`GridType`](GridType.md).[`rowHeight`](GridType.md#rowheight) + +*** + +### rowList + +> **rowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L657) + +#### Inherited from + +[`GridType`](GridType.md).[`rowList`](GridType.md#rowlist) + +*** + +### rowLoadingIndicatorTemplate? + +> `optional` **rowLoadingIndicatorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L584) + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowLoadingIndicatorTemplate`](GridType.md#rowloadingindicatortemplate) + +*** + +### rowSelection + +> **rowSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L776) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelection`](GridType.md#rowselection) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `EventEmitter`\<[`IRowSelectionEventArgs`](IRowSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L826) + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectionChanging`](GridType.md#rowselectionchanging) + +*** + +### rowSelectorTemplate + +> **rowSelectorTemplate**: `TemplateRef`\<[`IgxRowSelectorTemplateContext`](IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:594](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L594) + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectorTemplate`](GridType.md#rowselectortemplate) + +*** + +### rowToggle + +> **rowToggle**: `EventEmitter`\<[`IRowToggleEventArgs`](IRowToggleEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L858) + +#### Inherited from + +[`GridType`](GridType.md).[`rowToggle`](GridType.md#rowtoggle) + +*** + +### scrollSize + +> **scrollSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L642) + +#### Inherited from + +[`GridType`](GridType.md).[`scrollSize`](GridType.md#scrollsize) + +*** + +### selected + +> **selected**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:824](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L824) + +#### Inherited from + +[`GridType`](GridType.md).[`selected`](GridType.md#selected) + +*** + +### selectedCells? + +> `optional` **selectedCells?**: [`CellType`](CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L890) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedCells`](GridType.md#selectedcells) + +*** + +### selectedRows + +> **selectedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:891](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L891) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedRows`](GridType.md#selectedrows) + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L517) + +The service handling selection in the grid. Selecting, deselecting elements + +#### Inherited from + +[`GridType`](GridType.md).[`selectionService`](GridType.md#selectionservice) + +*** + +### selectRowOnClick + +> **selectRowOnClick**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:772](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L772) + +#### Inherited from + +[`GridType`](GridType.md).[`selectRowOnClick`](GridType.md#selectrowonclick) + +*** + +### showExpandAll? + +> `optional` **showExpandAll?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L554) + +Optional +Indicates whether collapsed grid elements should be expanded + +#### Inherited from + +[`GridType`](GridType.md).[`showExpandAll`](GridType.md#showexpandall) + +*** + +### showRowSelectors + +> **showRowSelectors**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:528](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L528) + +Indicates whether the selectors of the rows are visible + +#### Inherited from + +[`GridType`](GridType.md).[`showRowSelectors`](GridType.md#showrowselectors) + +*** + +### sortAscendingHeaderIconTemplate + +> **sortAscendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L604) + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortAscendingHeaderIconTemplate`](GridType.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +> **sortDescendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L609) + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortDescendingHeaderIconTemplate`](GridType.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +> **sortHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L599) + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortHeaderIconTemplate`](GridType.md#sortheadericontemplate) + +*** + +### sortingExpressions + +> **sortingExpressions**: [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:873](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L873) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressions`](GridType.md#sortingexpressions) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `EventEmitter`\<[`ISortingExpression`](ISortingExpression.md)\<`any`\>[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L874) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressionsChange`](GridType.md#sortingexpressionschange) + +*** + +### sortingOptions + +> **sortingOptions**: [`ISortingOptions`](ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:879](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L879) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingOptions`](GridType.md#sortingoptions) + +*** + +### sortStrategy + +> **sortStrategy**: [`IGridSortingStrategy`](IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:868](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L868) + +#### Inherited from + +[`GridType`](GridType.md).[`sortStrategy`](GridType.md#sortstrategy) + +*** + +### summariesMargin + +> **summariesMargin**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L540) + +The CSS margin of the summaries + +#### Inherited from + +[`GridType`](GridType.md).[`summariesMargin`](GridType.md#summariesmargin) + +*** + +### summariesRowList + +> **summariesRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L678) + +#### Inherited from + +[`GridType`](GridType.md).[`summariesRowList`](GridType.md#summariesrowlist) + +*** + +### summaryCalculationMode + +> **summaryCalculationMode**: [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:780](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L780) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryCalculationMode`](GridType.md#summarycalculationmode) + +*** + +### summaryPipeTrigger + +> **summaryPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L455) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPipeTrigger`](GridType.md#summarypipetrigger) + +*** + +### summaryPosition + +> **summaryPosition**: [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L782) + +Represents the position of summaries: 'top', 'bottom' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPosition`](GridType.md#summaryposition) + +*** + +### summaryRowHeight + +> **summaryRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:702](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L702) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryRowHeight`](GridType.md#summaryrowheight) + +*** + +### tbody + +> **tbody**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:654](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L654) + +#### Inherited from + +[`GridType`](GridType.md).[`tbody`](GridType.md#tbody) + +*** + +### toolbarExporting + +> **toolbarExporting**: `EventEmitter`\<[`IGridToolbarExportEventArgs`](IGridToolbarExportEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L862) + +#### Inherited from + +[`GridType`](GridType.md).[`toolbarExporting`](GridType.md#toolbarexporting) + +*** + +### totalRowsCountAfterFilter + +> **totalRowsCountAfterFilter**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L704) + +#### Inherited from + +[`GridType`](GridType.md).[`totalRowsCountAfterFilter`](GridType.md#totalrowscountafterfilter) + +*** + +### transactions + +> `readonly` **transactions**: [`TransactionService`](TransactionService.md)\<[`Transaction`](Transaction.md), [`State`](State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L698) + +Represents the transaction service for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`transactions`](GridType.md#transactions) + +*** + +### treeGroupArea? + +> `optional` **treeGroupArea?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L816) + +#### Inherited from + +[`GridType`](GridType.md).[`treeGroupArea`](GridType.md#treegrouparea) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `tree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L743) + +Property, that provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### tree + +[`FilteringExpressionsTree`](../classes/FilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`uniqueColumnValuesStrategy`](GridType.md#uniquecolumnvaluesstrategy) + +*** + +### unpinnedColumns + +> **unpinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:664](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L664) + +An array of columns, but it counts only the ones that are not pinned + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedColumns`](GridType.md#unpinnedcolumns) + +*** + +### unpinnedRecords + +> **unpinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:688](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L688) + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedRecords`](GridType.md#unpinnedrecords) + +*** + +### unpinnedWidth + +> **unpinnedWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L538) + +The width of unpinned element + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedWidth`](GridType.md#unpinnedwidth) + +*** + +### updateOnRender? + +> `optional` **updateOnRender?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L805) + +#### Inherited from + +[`GridType`](GridType.md).[`updateOnRender`](GridType.md#updateonrender) + +*** + +### validation + +> `readonly` **validation**: [`IgxGridValidationService`](../classes/IgxGridValidationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:700](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L700) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Inherited from + +[`GridType`](GridType.md).[`validation`](GridType.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `EventEmitter`\<[`IGridValidationStatusEventArgs`](IGridValidationStatusEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L860) + +#### Inherited from + +[`GridType`](GridType.md).[`validationStatusChange`](GridType.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L645) + +The trigger for grid validation. It's value can either be `change` or `blur` + +#### Inherited from + +[`GridType`](GridType.md).[`validationTrigger`](GridType.md#validationtrigger) + +*** + +### verticalScrollContainer + +> **verticalScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L655) + +#### Inherited from + +[`GridType`](GridType.md).[`verticalScrollContainer`](GridType.md#verticalscrollcontainer) + +*** + +### virtualizationState + +> **virtualizationState**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L513) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Inherited from + +[`GridType`](GridType.md).[`virtualizationState`](GridType.md#virtualizationstate) + +*** + +### visibleColumns + +> **visibleColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:662](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L662) + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Inherited from + +[`GridType`](GridType.md).[`visibleColumns`](GridType.md#visiblecolumns) + +## Accessors + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L30) + +##### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`filteredData`](GridType.md#filtereddata) + +## Methods + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L953) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearCellSelection`](GridType.md#clearcellselection) + +*** + +### clearGrouping()? + +> `optional` **clearGrouping**(`field`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L898) + +#### Parameters + +##### field + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearGrouping`](GridType.md#cleargrouping) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L927) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearSort`](GridType.md#clearsort) + +*** + +### closeRowEditingOverlay() + +> **closeRowEditingOverlay**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:972](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L972) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`closeRowEditingOverlay`](GridType.md#closeroweditingoverlay) + +*** + +### collapseRow() + +> **collapseRow**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L967) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`collapseRow`](GridType.md#collapserow) + +*** + +### columnToVisibleIndex() + +> **columnToVisibleIndex**(`key`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:945](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L945) + +#### Parameters + +##### key + +`string` \| `number` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`columnToVisibleIndex`](GridType.md#columntovisibleindex) + +*** + +### createColumnsList()? + +> `optional` **createColumnsList**(`cols`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:977](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L977) + +#### Parameters + +##### cols + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`createColumnsList`](GridType.md#createcolumnslist) + +*** + +### createFilterDropdown() + +> **createFilterDropdown**(`column`, `options`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L960) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### options + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`createFilterDropdown`](GridType.md#createfilterdropdown) + +*** + +### createRow()? + +> `optional` **createRow**(`index`, `data?`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L963) + +#### Parameters + +##### index + +`number` + +##### data? + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`createRow`](GridType.md#createrow) + +*** + +### deleteRow() + +> **deleteRow**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L964) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRow`](GridType.md#deleterow) + +*** + +### deleteRowById() + +> **deleteRowById**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L965) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRowById`](GridType.md#deleterowbyid) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L903) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllColumns`](GridType.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L958) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllRows`](GridType.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L904) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectColumns`](GridType.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L956) + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectRows`](GridType.md#deselectrows) + +*** + +### generateRowPath()? + +> `optional` **generateRowPath**(`rowId`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:980](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L980) + +#### Parameters + +##### rowId + +`any` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`generateRowPath`](GridType.md#generaterowpath) + +*** + +### getChildGrids()? + +> `optional` **getChildGrids**(`inDepth?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L943) + +#### Parameters + +##### inDepth? + +`boolean` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`getChildGrids`](GridType.md#getchildgrids) + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L919) + +#### Parameters + +##### name + +`string` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByName`](GridType.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L920) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`ColumnType`](ColumnType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByVisibleIndex`](GridType.md#getcolumnbyvisibleindex) + +*** + +### getDefaultExpandState() + +> **getDefaultExpandState**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:908](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L908) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`getDefaultExpandState`](GridType.md#getdefaultexpandstate) + +*** + +### getDragGhostCustomTemplate() + +> **getDragGhostCustomTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:915](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L915) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getDragGhostCustomTemplate`](GridType.md#getdragghostcustomtemplate) + +*** + +### getEmptyRecordObjectFor() + +> **getEmptyRecordObjectFor**(`inRow`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L931) + +#### Parameters + +##### inRow + +[`RowType`](RowType.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getEmptyRecordObjectFor`](GridType.md#getemptyrecordobjectfor) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:921](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L921) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderGroupWidth`](GridType.md#getheadergroupwidth) + +*** + +### getInitialPinnedIndex() + +> **getInitialPinnedIndex**(`rec`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:935](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L935) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getInitialPinnedIndex`](GridType.md#getinitialpinnedindex) + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L952) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getNextCell`](GridType.md#getnextcell) + +*** + +### getPossibleColumnWidth() + +> **getPossibleColumnWidth**(`baseWidth?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:910](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L910) + +#### Parameters + +##### baseWidth? + +`number` + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getPossibleColumnWidth`](GridType.md#getpossiblecolumnwidth) + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L950) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getPreviousCell`](GridType.md#getpreviouscell) + +*** + +### getRowByIndex()? + +> `optional` **getRowByIndex**(`index`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L923) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByIndex`](GridType.md#getrowbyindex) + +*** + +### getRowByKey()? + +> `optional` **getRowByKey**(`key`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L922) + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByKey`](GridType.md#getrowbykey) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L902) + +#### Returns + +[`GridSelectionRange`](GridSelectionRange.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`getSelectedRanges`](GridType.md#getselectedranges) + +*** + +### getUnpinnedIndexById() + +> **getUnpinnedIndexById**(`id`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:930](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L930) + +#### Parameters + +##### id + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getUnpinnedIndexById`](GridType.md#getunpinnedindexbyid) + +*** + +### getVisibleContentHeight() + +> **getVisibleContentHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:913](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L913) + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getVisibleContentHeight`](GridType.md#getvisiblecontentheight) + +*** + +### groupBy()? + +> `optional` **groupBy**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:899](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L899) + +#### Parameters + +##### expression + +[`IGroupingExpression`](IGroupingExpression.md) \| [`IGroupingExpression`](IGroupingExpression.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`groupBy`](GridType.md#groupby) + +*** + +### hasVerticalScroll() + +> **hasVerticalScroll**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:912](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L912) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`hasVerticalScroll`](GridType.md#hasverticalscroll) + +*** + +### isChildGridRecord()? + +> `optional` **isChildGridRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:942](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L942) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isChildGridRecord`](GridType.md#ischildgridrecord) + +*** + +### isColumnGrouped() + +> **isColumnGrouped**(`fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L937) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isColumnGrouped`](GridType.md#iscolumngrouped) + +*** + +### isDetailRecord() + +> **isDetailRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:938](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L938) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isDetailRecord`](GridType.md#isdetailrecord) + +*** + +### isExpandedGroup() + +> **isExpandedGroup**(`group`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:976](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L976) + +#### Parameters + +##### group + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isExpandedGroup`](GridType.md#isexpandedgroup) + +*** + +### isGhostRecord() + +> **isGhostRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:940](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L940) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGhostRecord`](GridType.md#isghostrecord) + +*** + +### isGroupByRecord() + +> **isGroupByRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:939](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L939) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGroupByRecord`](GridType.md#isgroupbyrecord) + +*** + +### isHierarchicalRecord()? + +> `optional` **isHierarchicalRecord**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L944) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isHierarchicalRecord`](GridType.md#ishierarchicalrecord) + +*** + +### isRecordMerged() + +> **isRecordMerged**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L934) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordMerged`](GridType.md#isrecordmerged) + +*** + +### isRecordPinned() + +> **isRecordPinned**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:933](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L933) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinned`](GridType.md#isrecordpinned) + +*** + +### isRecordPinnedByViewIndex() + +> **isRecordPinnedByViewIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:936](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L936) + +#### Parameters + +##### rowIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinnedByViewIndex`](GridType.md#isrecordpinnedbyviewindex) + +*** + +### isSummaryRow() + +> **isSummaryRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:932](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L932) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isSummaryRow`](GridType.md#issummaryrow) + +*** + +### isTreeRow()? + +> `optional` **isTreeRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L941) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isTreeRow`](GridType.md#istreerow) + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L946) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### target + +[`ColumnType`](ColumnType.md) + +##### pos + +[`DropPosition`](../enumerations/DropPosition.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`moveColumn`](GridType.md#movecolumn) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColumnIndex`, `callback?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:948](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L948) + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColumnIndex + +`number` + +##### callback? + +(`e`) => `any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`navigateTo`](GridType.md#navigateto) + +*** + +### notifyChanges() + +> **notifyChanges**(`repaint?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L968) + +#### Parameters + +##### repaint? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`notifyChanges`](GridType.md#notifychanges) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:917](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L917) + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openAdvancedFilteringDialog`](GridType.md#openadvancedfilteringdialog) + +*** + +### openRowOverlay() + +> **openRowOverlay**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L916) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openRowOverlay`](GridType.md#openrowoverlay) + +*** + +### pinRow() + +> **pinRow**(`id`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:928](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L928) + +#### Parameters + +##### id + +`any` + +##### index? + +`number` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`pinRow`](GridType.md#pinrow) + +*** + +### preventHeaderScroll()? + +> `optional` **preventHeaderScroll**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:981](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L981) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`preventHeaderScroll`](GridType.md#preventheaderscroll) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L973) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`reflow`](GridType.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:907](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L907) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`refreshSearch`](GridType.md#refreshsearch) + +*** + +### repositionRowEditingOverlay() + +> **repositionRowEditingOverlay**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:971](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L971) + +#### Parameters + +##### row + +[`RowType`](RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`repositionRowEditingOverlay`](GridType.md#repositionroweditingoverlay) + +*** + +### resetColumnCollections() + +> **resetColumnCollections**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L969) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetColumnCollections`](GridType.md#resetcolumncollections) + +*** + +### resetHorizontalVirtualization() + +> **resetHorizontalVirtualization**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L911) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetHorizontalVirtualization`](GridType.md#resethorizontalvirtualization) + +*** + +### resolveOutlet()? + +> `optional` **resolveOutlet**(): [`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:900](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L900) + +#### Returns + +[`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +#### Inherited from + +[`GridType`](GridType.md).[`resolveOutlet`](GridType.md#resolveoutlet) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L957) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectAllRows`](GridType.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L905) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectColumns`](GridType.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L906) + +#### Returns + +[`ColumnType`](ColumnType.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`selectedColumns`](GridType.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`range`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L954) + +#### Parameters + +##### range + +[`GridSelectionRange`](GridSelectionRange.md) \| [`GridSelectionRange`](GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRange`](GridType.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L955) + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRows`](GridType.md#selectrows) + +*** + +### setFilteredData() + +> **setFilteredData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L924) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredData`](GridType.md#setfiltereddata) + +*** + +### setFilteredSortedData() + +> **setFilteredSortedData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:925](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L925) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredSortedData`](GridType.md#setfilteredsorteddata) + +*** + +### setUpPaginator() + +> **setUpPaginator**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L959) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setUpPaginator`](GridType.md#setuppaginator) + +*** + +### showSnackbarFor() + +> **showSnackbarFor**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L918) + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`showSnackbarFor`](GridType.md#showsnackbarfor) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L926) + +#### Parameters + +##### expression + +[`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`sort`](GridType.md#sort) + +*** + +### toggleAll()? + +> `optional` **toggleAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:979](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L979) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAll`](GridType.md#toggleall) + +*** + +### toggleAllGroupRows()? + +> `optional` **toggleAllGroupRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:978](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L978) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAllGroupRows`](GridType.md#toggleallgrouprows) + +*** + +### toggleGroup()? + +> `optional` **toggleGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:897](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L897) + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleGroup`](GridType.md#togglegroup) + +*** + +### trackColumnChanges() + +> **trackColumnChanges**(`index`, `column`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:909](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L909) + +#### Parameters + +##### index + +`number` + +##### column + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`trackColumnChanges`](GridType.md#trackcolumnchanges) + +*** + +### triggerPipes() + +> **triggerPipes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L970) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`triggerPipes`](GridType.md#triggerpipes) + +*** + +### unpinRow() + +> **unpinRow**(`id`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:929](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L929) + +#### Parameters + +##### id + +`any` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`unpinRow`](GridType.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L961) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +##### column + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateCell`](GridType.md#updatecell) + +*** + +### updateColumns() + +> **updateColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L901) + +#### Parameters + +##### columns + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateColumns`](GridType.md#updatecolumns) + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L966) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateRow`](GridType.md#updaterow) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HierarchicalTransactionService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HierarchicalTransactionService.md new file mode 100644 index 000000000..2cbd78deb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/HierarchicalTransactionService.md @@ -0,0 +1,433 @@ +# Interface: HierarchicalTransactionService\<T, S\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts#L3) + +## Extends + +- [`TransactionService`](TransactionService.md)\<`T`, `S`\> + +## Type Parameters + +### T + +`T` *extends* `HierarchicalTransaction` + +### S + +`S` *extends* `HierarchicalState` + +## Properties + +### canRedo + +> **canRedo**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L80) + +#### Returns + +if there are any transactions in the Redo stack + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`canRedo`](TransactionService.md#canredo) + +*** + +### canUndo + +> **canUndo**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L75) + +#### Returns + +if there are any transactions in the Undo stack + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`canUndo`](TransactionService.md#canundo) + +*** + +### cloneStrategy + +> **cloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L65) + +Gets/Sets the data clone strategy used to clone data + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`cloneStrategy`](TransactionService.md#clonestrategy) + +*** + +### enabled + +> `readonly` **enabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L60) + +Returns whether transaction is enabled for this service + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`enabled`](TransactionService.md#enabled) + +*** + +### onStateUpdate? + +> `optional` **onStateUpdate?**: `EventEmitter`\<[`StateUpdateEvent`](StateUpdateEvent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L70) + +Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`onStateUpdate`](TransactionService.md#onstateupdate) + +## Methods + +### add() + +> **add**(`transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L88) + +Adds provided transaction with recordRef if any + +#### Parameters + +##### transaction + +`T` + +Transaction to be added + +##### recordRef? + +`any` + +Reference to the value of the record in the data source related to the changed item + +#### Returns + +`void` + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`add`](TransactionService.md#add) + +*** + +### clear() + +> **clear**(`id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L149) + +Clears all transactions + +#### Parameters + +##### id? + +`any` + +Optional record id to clear transactions for + +#### Returns + +`void` + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`clear`](TransactionService.md#clear) + +*** + +### commit() + +#### Call Signature + +> **commit**(`data`, `id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts#L11) + +Applies all transactions over the provided data + +##### Parameters + +###### data + +`any`[] + +Data source to update + +###### id? + +`any` + +Optional record id to commit transactions for + +##### Returns + +`void` + +##### Overrides + +[`TransactionService`](TransactionService.md).[`commit`](TransactionService.md#commit) + +#### Call Signature + +> **commit**(`data`, `primaryKey`, `childDataKey`, `id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/hierarchical-transaction.ts#L20) + +Applies all transactions over the provided data + +##### Parameters + +###### data + +`any`[] + +Data source to update + +###### primaryKey + +`any` + +Primary key of the hierarchical data + +###### childDataKey + +`any` + +Key of child data collection + +###### id? + +`any` + +Optional record id to commit transactions for + +##### Returns + +`void` + +##### Overrides + +`TransactionService.commit` + +*** + +### endPending() + +> **endPending**(`commit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L163) + +Clears all pending transactions and aggregated pending state. If commit is set to true +commits pending states as single transaction + +#### Parameters + +##### commit + +`boolean` + +Should commit the pending states + +#### Returns + +`void` + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`endPending`](TransactionService.md#endpending) + +*** + +### getAggregatedChanges() + +> **getAggregatedChanges**(`mergeChanges`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L115) + +Returns aggregated changes from all transactions + +#### Parameters + +##### mergeChanges + +`boolean` + +If set to true will merge each state's value over relate recordRef +and will record resulting value in the related transaction + +#### Returns + +`T`[] + +Collection of aggregated transactions for each changed record + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`getAggregatedChanges`](TransactionService.md#getaggregatedchanges) + +*** + +### getAggregatedValue() + +> **getAggregatedValue**(`id`, `mergeChanges`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L134) + +Returns value of the required id including all uncommitted changes + +#### Parameters + +##### id + +`any` + +The id of the record to return value for + +##### mergeChanges + +`boolean` + +If set to true will merge state's value over relate recordRef +and will return merged value + +#### Returns + +`any` + +Value with changes or **null** + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`getAggregatedValue`](TransactionService.md#getaggregatedvalue) + +*** + +### getState() + +> **getState**(`id`, `pending?`): `S` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L124) + +Returns the state of the record with provided id + +#### Parameters + +##### id + +`any` + +The id of the record + +##### pending? + +`boolean` + +Should get pending state + +#### Returns + +`S` + +State of the record if any + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`getState`](TransactionService.md#getstate) + +*** + +### getTransactionLog() + +> **getTransactionLog**(`id?`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L96) + +Returns all recorded transactions in chronological order + +#### Parameters + +##### id? + +`any` + +Optional record id to get transactions for + +#### Returns + +`T`[] + +All transaction in the service or for the specified record + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`getTransactionLog`](TransactionService.md#gettransactionlog) + +*** + +### redo() + +> **redo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L106) + +Applies the last undone transaction if any + +#### Returns + +`void` + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`redo`](TransactionService.md#redo) + +*** + +### startPending() + +> **startPending**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L155) + +Starts pending transactions. All transactions passed after call to startPending +will not be added to transaction log + +#### Returns + +`void` + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`startPending`](TransactionService.md#startpending) + +*** + +### undo() + +> **undo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L101) + +Remove the last transaction if any + +#### Returns + +`void` + +#### Inherited from + +[`TransactionService`](TransactionService.md).[`undo`](TransactionService.md#undo) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IAccordionCancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IAccordionCancelableEventArgs.md new file mode 100644 index 000000000..8cbcecb36 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IAccordionCancelableEventArgs.md @@ -0,0 +1,57 @@ +# Interface: IAccordionCancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L20) + +## Extends + +- [`IExpansionPanelCancelableEventArgs`](IExpansionPanelCancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L25) + +Enables canceling the expansion/collapse operation. + +#### Overrides + +[`IExpansionPanelCancelableEventArgs`](IExpansionPanelCancelableEventArgs.md).[`cancel`](IExpansionPanelCancelableEventArgs.md#cancel) + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L25) + +#### Inherited from + +[`IExpansionPanelCancelableEventArgs`](IExpansionPanelCancelableEventArgs.md).[`event`](IExpansionPanelCancelableEventArgs.md#event) + +*** + +### owner + +> **owner**: [`IgxAccordionComponent`](../classes/IgxAccordionComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L21) + +Provides reference to the owner component. + +#### Overrides + +[`IExpansionPanelCancelableEventArgs`](IExpansionPanelCancelableEventArgs.md).[`owner`](IExpansionPanelCancelableEventArgs.md#owner) + +*** + +### panel + +> **panel**: [`IgxExpansionPanelBase`](IgxExpansionPanelBase.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L23) + +Provides a reference to the `IgxExpansionPanelComponent` which is currently expanding/collapsing. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IAccordionEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IAccordionEventArgs.md new file mode 100644 index 000000000..0d8c748b6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IAccordionEventArgs.md @@ -0,0 +1,43 @@ +# Interface: IAccordionEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L14) + +## Extends + +- [`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md) + +## Properties + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L25) + +#### Inherited from + +[`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md).[`event`](IExpansionPanelEventArgs.md#event) + +*** + +### owner + +> **owner**: [`IgxAccordionComponent`](../classes/IgxAccordionComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L15) + +Provides reference to the owner component. + +#### Overrides + +[`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md).[`owner`](IExpansionPanelEventArgs.md#owner) + +*** + +### panel + +> **panel**: [`IgxExpansionPanelBase`](IgxExpansionPanelBase.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/accordion.component.ts#L17) + +Provides a reference to the `IgxExpansionPanelComponent` which was expanded/collapsed. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveHighlightInfo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveHighlightInfo.md new file mode 100644 index 000000000..269548e2a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveHighlightInfo.md @@ -0,0 +1,45 @@ +# Interface: IActiveHighlightInfo + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L18) + +An interface describing information for the active highlight. + +## Properties + +### column? + +> `optional` **column?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L26) + +The column of the highlight. + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L30) + +The index of the highlight. + +*** + +### metadata? + +> `optional` **metadata?**: `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L34) + +Additional, custom checks to perform prior an element highlighting. + +*** + +### row? + +> `optional` **row?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L22) + +The row of the highlight. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveNode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveNode.md new file mode 100644 index 000000000..0fce05ec2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveNode.md @@ -0,0 +1,51 @@ +# Interface: IActiveNode + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L27) + +## Properties + +### column? + +> `optional` **column?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L30) + +*** + +### gridID? + +> `optional` **gridID?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L28) + +*** + +### layout? + +> `optional` **layout?**: [`IMultiRowLayoutNode`](IMultiRowLayoutNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L33) + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L31) + +*** + +### mchCache? + +> `optional` **mchCache?**: [`ColumnGroupsCache`](ColumnGroupsCache.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L32) + +*** + +### row + +> **row**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts#L29) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveNodeChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveNodeChangeEventArgs.md new file mode 100644 index 000000000..31919609d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IActiveNodeChangeEventArgs.md @@ -0,0 +1,65 @@ +# Interface: IActiveNodeChangeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:474](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L474) + +Emitted when the active node is changed + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### column + +> **column**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:478](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L478) + +Represents the column index of the active node + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:483](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L483) + +Optional +Represents the hierarchical level of the active node + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### row + +> **row**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:476](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L476) + +Represents the row index of the active node + +*** + +### tag + +> **tag**: [`GridKeydownTargetType`](../type-aliases/GridKeydownTargetType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:488](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L488) + +Represents the type of the active node. +The GridKeydownTargetType is an enum or that specifies the possible target types diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseCancelableBrowserEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseCancelableBrowserEventArgs.md new file mode 100644 index 000000000..94bbb0bdd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseCancelableBrowserEventArgs.md @@ -0,0 +1,56 @@ +# Interface: IBaseCancelableBrowserEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L427) + +## Extends + +- [`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IStepChangingEventArgs`](IStepChangingEventArgs.md) +- [`ITreeNodeSelectionEvent`](ITreeNodeSelectionEvent.md) +- [`ITreeNodeEditingEvent`](ITreeNodeEditingEvent.md) +- [`ITreeNodeTogglingEventArgs`](ITreeNodeTogglingEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md).[`cancel`](CancelableBrowserEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L424) + +Browser event + +#### Inherited from + +[`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md).[`event`](CancelableBrowserEventArgs.md#event) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseCancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseCancelableEventArgs.md new file mode 100644 index 000000000..15771b8aa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseCancelableEventArgs.md @@ -0,0 +1,40 @@ +# Interface: IBaseCancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:429](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L429) + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IComboSelectionChangingEventArgs`](IComboSelectionChangingEventArgs.md) +- [`IComboSearchInputEventArgs`](IComboSearchInputEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseChipEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseChipEventArgs.md new file mode 100644 index 000000000..579db1a4d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseChipEventArgs.md @@ -0,0 +1,36 @@ +# Interface: IBaseChipEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L36) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IChipClickEventArgs`](IChipClickEventArgs.md) +- [`IChipKeyDownEventArgs`](IChipKeyDownEventArgs.md) +- [`IChipEnterDragAreaEventArgs`](IChipEnterDragAreaEventArgs.md) +- [`IChipSelectEventArgs`](IChipSelectEventArgs.md) + +## Properties + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L37) + +*** + +### owner + +> **owner**: [`IgxChipComponent`](../classes/IgxChipComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L38) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseChipsAreaEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseChipsAreaEventArgs.md new file mode 100644 index 000000000..3fcc9eb0e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseChipsAreaEventArgs.md @@ -0,0 +1,24 @@ +# Interface: IBaseChipsAreaEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L14) + +## Extended by + +- [`IChipsAreaReorderEventArgs`](IChipsAreaReorderEventArgs.md) +- [`IChipsAreaSelectEventArgs`](IChipsAreaSelectEventArgs.md) + +## Properties + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L15) + +*** + +### owner + +> **owner**: [`IgxChipsAreaComponent`](../classes/IgxChipsAreaComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L16) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseEventArgs.md new file mode 100644 index 000000000..c7f2d13cb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseEventArgs.md @@ -0,0 +1,88 @@ +# Interface: IBaseEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:414](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L414) + +## Extended by + +- [`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md) +- [`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md) +- [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) +- [`ISortingExpression`](ISortingExpression.md) +- [`IButtonEventArgs`](IButtonEventArgs.md) +- [`IChangeCheckboxEventArgs`](IChangeCheckboxEventArgs.md) +- [`IDropBaseEventArgs`](IDropBaseEventArgs.md) +- [`IDragBaseEventArgs`](IDragBaseEventArgs.md) +- [`IDragGhostBaseEventArgs`](IDragGhostBaseEventArgs.md) +- [`IMaskEventArgs`](IMaskEventArgs.md) +- [`IViewChangeEventArgs`](IViewChangeEventArgs.md) +- [`ToggleViewEventArgs`](ToggleViewEventArgs.md) +- [`ITooltipShowEventArgs`](ITooltipShowEventArgs.md) +- [`ITooltipHideEventArgs`](ITooltipHideEventArgs.md) +- [`BannerEventArgs`](BannerEventArgs.md) +- [`IButtonGroupEventArgs`](IButtonGroupEventArgs.md) +- [`ISlideEventArgs`](ISlideEventArgs.md) +- [`IBaseChipEventArgs`](IBaseChipEventArgs.md) +- [`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md) +- [`IComboItemAdditionEvent`](IComboItemAdditionEvent.md) +- [`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md) +- [`IDatePickerValidationFailedEventArgs`](IDatePickerValidationFailedEventArgs.md) +- [`IDialogEventArgs`](IDialogEventArgs.md) +- [`AutocompleteSelectionChangingEventArgs`](AutocompleteSelectionChangingEventArgs.md) +- [`IGridCellEventArgs`](IGridCellEventArgs.md) +- [`IGridRowEventArgs`](IGridRowEventArgs.md) +- [`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md) +- [`IPinColumnEventArgs`](IPinColumnEventArgs.md) +- [`IRowDataEventArgs`](IRowDataEventArgs.md) +- [`IColumnResizeEventArgs`](IColumnResizeEventArgs.md) +- [`IRowSelectionEventArgs`](IRowSelectionEventArgs.md) +- [`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md) +- [`IGridToolbarExportEventArgs`](IGridToolbarExportEventArgs.md) +- [`IColumnMovingStartEventArgs`](IColumnMovingStartEventArgs.md) +- [`IColumnMovingEventArgs`](IColumnMovingEventArgs.md) +- [`IColumnMovingEndEventArgs`](IColumnMovingEndEventArgs.md) +- [`IGridKeydownEventArgs`](IGridKeydownEventArgs.md) +- [`IRowDragEndEventArgs`](IRowDragEndEventArgs.md) +- [`IRowDragStartEventArgs`](IRowDragStartEventArgs.md) +- [`IRowToggleEventArgs`](IRowToggleEventArgs.md) +- [`IPinRowEventArgs`](IPinRowEventArgs.md) +- [`IGridScrollEventArgs`](IGridScrollEventArgs.md) +- [`IColumnToggledEventArgs`](IColumnToggledEventArgs.md) +- [`IActiveNodeChangeEventArgs`](IActiveNodeChangeEventArgs.md) +- [`ISortingEventArgs`](ISortingEventArgs.md) +- [`IFilteringEventArgs`](IFilteringEventArgs.md) +- [`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md) +- [`IRowExportingEventArgs`](IRowExportingEventArgs.md) +- [`IColumnExportingEventArgs`](IColumnExportingEventArgs.md) +- [`ICsvExportEndedEventArgs`](ICsvExportEndedEventArgs.md) +- [`IExcelExportEndedEventArgs`](IExcelExportEndedEventArgs.md) +- [`IPdfExportEndedEventArgs`](IPdfExportEndedEventArgs.md) +- [`IGroupingDoneEventArgs`](IGroupingDoneEventArgs.md) +- [`IGridCreatedEventArgs`](IGridCreatedEventArgs.md) +- [`IPanStateChangeEventArgs`](IPanStateChangeEventArgs.md) +- [`IListItemClickEventArgs`](IListItemClickEventArgs.md) +- [`IListItemPanningEventArgs`](IListItemPanningEventArgs.md) +- [`IPageEventArgs`](IPageEventArgs.md) +- [`ITabsBaseEventArgs`](ITabsBaseEventArgs.md) +- [`IgxTimePickerValidationFailedEventArgs`](IgxTimePickerValidationFailedEventArgs.md) +- [`OverlayAnimationEventArgs`](OverlayAnimationEventArgs.md) +- [`OverlayEventArgs`](OverlayEventArgs.md) +- [`IForOfDataChangingEventArgs`](IForOfDataChangingEventArgs.md) +- [`IForOfState`](IForOfState.md) +- [`ISelectionEventArgs`](ISelectionEventArgs.md) +- [`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md) +- [`IChangeProgressEventArgs`](IChangeProgressEventArgs.md) +- [`IStepChangingEventArgs`](IStepChangingEventArgs.md) +- [`IStepChangedEventArgs`](IStepChangedEventArgs.md) +- [`ITreeNodeEditedEvent`](ITreeNodeEditedEvent.md) +- [`ITreeNodeTogglingEventArgs`](ITreeNodeTogglingEventArgs.md) +- [`ITreeNodeToggledEventArgs`](ITreeNodeToggledEventArgs.md) + +## Properties + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseSearchInfo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseSearchInfo.md new file mode 100644 index 000000000..64d856e24 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IBaseSearchInfo.md @@ -0,0 +1,47 @@ +# Interface: IBaseSearchInfo + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L7) + +## Extended by + +- [`ISearchInfo`](ISearchInfo.md) + +## Properties + +### caseSensitive + +> **caseSensitive**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L9) + +*** + +### content + +> **content**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L12) + +*** + +### exactMatch + +> **exactMatch**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L10) + +*** + +### matchCount + +> **matchCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L11) + +*** + +### searchText + +> **searchText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IButtonEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IButtonEventArgs.md new file mode 100644 index 000000000..3f699bd67 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IButtonEventArgs.md @@ -0,0 +1,29 @@ +# Interface: IButtonEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L212) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### button + +> **button**: [`IgxButtonDirective`](../classes/IgxButtonDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L213) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IButtonGroupEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IButtonGroupEventArgs.md new file mode 100644 index 000000000..f7be96de1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IButtonGroupEventArgs.md @@ -0,0 +1,37 @@ +# Interface: IButtonGroupEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L535) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### button + +> **button**: [`IgxButtonDirective`](../classes/IgxButtonDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:537](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L537) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L538) + +*** + +### owner + +> **owner**: [`IgxButtonGroupComponent`](../classes/IgxButtonGroupComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:536](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L536) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICachedViewLoadedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICachedViewLoadedEventArgs.md new file mode 100644 index 000000000..abaab354c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICachedViewLoadedEventArgs.md @@ -0,0 +1,53 @@ +# Interface: ICachedViewLoadedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L222) + +## Extends + +- [`IViewChangeEventArgs`](IViewChangeEventArgs.md) + +## Properties + +### context + +> **context**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L219) + +#### Inherited from + +[`IViewChangeEventArgs`](IViewChangeEventArgs.md).[`context`](IViewChangeEventArgs.md#context) + +*** + +### oldContext + +> **oldContext**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L223) + +*** + +### owner + +> **owner**: `IgxTemplateOutletDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L217) + +Provides reference to the owner component. + +#### Inherited from + +[`IViewChangeEventArgs`](IViewChangeEventArgs.md).[`owner`](IViewChangeEventArgs.md#owner) + +*** + +### view + +> **view**: `EmbeddedViewRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L218) + +#### Inherited from + +[`IViewChangeEventArgs`](IViewChangeEventArgs.md).[`view`](IViewChangeEventArgs.md#view) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICellPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICellPosition.md new file mode 100644 index 000000000..e091b70a1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICellPosition.md @@ -0,0 +1,26 @@ +# Interface: ICellPosition + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:364](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L364) + +The event is triggered when getting the current position of a certain cell + +## Properties + +### rowIndex + +> **rowIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:367](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L367) + +It returns the position (index) of the row, the cell is in + +*** + +### visibleColumnIndex + +> **visibleColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:373](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L373) + +It returns the position (index) of the column, the cell is in +Counts only the visible (non hidden) columns diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChangeCheckboxEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChangeCheckboxEventArgs.md new file mode 100644 index 000000000..977121f40 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChangeCheckboxEventArgs.md @@ -0,0 +1,37 @@ +# Interface: IChangeCheckboxEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L18) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### checked + +> **checked**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L19) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### value? + +> `optional` **value?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L20) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChangeProgressEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChangeProgressEventArgs.md new file mode 100644 index 000000000..f725107ae --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChangeProgressEventArgs.md @@ -0,0 +1,37 @@ +# Interface: IChangeProgressEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L42) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### currentValue + +> **currentValue**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L44) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### previousValue + +> **previousValue**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L43) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipClickEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipClickEventArgs.md new file mode 100644 index 000000000..992c50841 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipClickEventArgs.md @@ -0,0 +1,41 @@ +# Interface: IChipClickEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L41) + +## Extends + +- [`IBaseChipEventArgs`](IBaseChipEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L42) + +*** + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L37) + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`originalEvent`](IBaseChipEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxChipComponent`](../classes/IgxChipComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L38) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`owner`](IBaseChipEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipEnterDragAreaEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipEnterDragAreaEventArgs.md new file mode 100644 index 000000000..25f82aac1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipEnterDragAreaEventArgs.md @@ -0,0 +1,41 @@ +# Interface: IChipEnterDragAreaEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L50) + +## Extends + +- [`IBaseChipEventArgs`](IBaseChipEventArgs.md) + +## Properties + +### dragChip + +> **dragChip**: [`IgxChipComponent`](../classes/IgxChipComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L51) + +*** + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L37) + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`originalEvent`](IBaseChipEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxChipComponent`](../classes/IgxChipComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L38) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`owner`](IBaseChipEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipKeyDownEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipKeyDownEventArgs.md new file mode 100644 index 000000000..8252898ea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipKeyDownEventArgs.md @@ -0,0 +1,41 @@ +# Interface: IChipKeyDownEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L45) + +## Extends + +- [`IBaseChipEventArgs`](IBaseChipEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L47) + +*** + +### originalEvent + +> **originalEvent**: `KeyboardEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L46) + +#### Overrides + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`originalEvent`](IBaseChipEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxChipComponent`](../classes/IgxChipComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L38) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`owner`](IBaseChipEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipSelectEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipSelectEventArgs.md new file mode 100644 index 000000000..bf09a7a22 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipSelectEventArgs.md @@ -0,0 +1,49 @@ +# Interface: IChipSelectEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L54) + +## Extends + +- [`IBaseChipEventArgs`](IBaseChipEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L55) + +*** + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L37) + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`originalEvent`](IBaseChipEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxChipComponent`](../classes/IgxChipComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L38) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseChipEventArgs`](IBaseChipEventArgs.md).[`owner`](IBaseChipEventArgs.md#owner) + +*** + +### selected + +> **selected**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L56) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipsAreaReorderEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipsAreaReorderEventArgs.md new file mode 100644 index 000000000..3a6a8f376 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipsAreaReorderEventArgs.md @@ -0,0 +1,39 @@ +# Interface: IChipsAreaReorderEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L19) + +## Extends + +- [`IBaseChipsAreaEventArgs`](IBaseChipsAreaEventArgs.md) + +## Properties + +### chipsArray + +> **chipsArray**: [`IgxChipComponent`](../classes/IgxChipComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L20) + +*** + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L15) + +#### Inherited from + +[`IBaseChipsAreaEventArgs`](IBaseChipsAreaEventArgs.md).[`originalEvent`](IBaseChipsAreaEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxChipsAreaComponent`](../classes/IgxChipsAreaComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L16) + +#### Inherited from + +[`IBaseChipsAreaEventArgs`](IBaseChipsAreaEventArgs.md).[`owner`](IBaseChipsAreaEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipsAreaSelectEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipsAreaSelectEventArgs.md new file mode 100644 index 000000000..8c1da608d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IChipsAreaSelectEventArgs.md @@ -0,0 +1,39 @@ +# Interface: IChipsAreaSelectEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L23) + +## Extends + +- [`IBaseChipsAreaEventArgs`](IBaseChipsAreaEventArgs.md) + +## Properties + +### newSelection + +> **newSelection**: [`IgxChipComponent`](../classes/IgxChipComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L24) + +*** + +### originalEvent + +> **originalEvent**: `KeyboardEvent` \| `MouseEvent` \| [`IDropBaseEventArgs`](IDropBaseEventArgs.md) \| [`IDragBaseEventArgs`](IDragBaseEventArgs.md) \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L15) + +#### Inherited from + +[`IBaseChipsAreaEventArgs`](IBaseChipsAreaEventArgs.md).[`originalEvent`](IBaseChipsAreaEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxChipsAreaComponent`](../classes/IgxChipsAreaComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chips-area.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chips-area.component.ts#L16) + +#### Inherited from + +[`IBaseChipsAreaEventArgs`](IBaseChipsAreaEventArgs.md).[`owner`](IBaseChipsAreaEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IClipboardOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IClipboardOptions.md new file mode 100644 index 000000000..bf6d6c6f3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IClipboardOptions.md @@ -0,0 +1,45 @@ +# Interface: IClipboardOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1227) + +An interface describing settings for clipboard options + +## Properties + +### copyFormatters + +> **copyFormatters**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1239](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1239) + +Apply the columns formatters (if any) on the data in the clipboard output. + +*** + +### copyHeaders + +> **copyHeaders**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1235](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1235) + +Include the columns headers in the clipboard output. + +*** + +### enabled + +> **enabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1231) + +Enables/disables the copy behavior + +*** + +### separator + +> **separator**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1243](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1243) + +The separator used for formatting the copy output. Defaults to `\t`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnEditorOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnEditorOptions.md new file mode 100644 index 000000000..acbb1c2f2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnEditorOptions.md @@ -0,0 +1,22 @@ +# Interface: IColumnEditorOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L52) + +## Extends + +- [`IFieldEditorOptions`](IFieldEditorOptions.md) + +## Properties + +### dateTimeFormat? + +> `optional` **dateTimeFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L49) + +A custom input format string used for the built-in editors of date/time columns. +See the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time + +#### Inherited from + +[`IFieldEditorOptions`](IFieldEditorOptions.md).[`dateTimeFormat`](IFieldEditorOptions.md#datetimeformat) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnExportingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnExportingEventArgs.md new file mode 100644 index 000000000..b1a7f181c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnExportingEventArgs.md @@ -0,0 +1,88 @@ +# Interface: IColumnExportingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L101) + +columnExporting event arguments +```typescript +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// set args properties here +}); +``` + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L120) + +Skip the exporting column when set to true + +*** + +### columnIndex + +> **columnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L115) + +Contains the exporting column index + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L110) + +Contains the exporting column field name + +*** + +### grid? + +> `optional` **grid?**: [`GridTypeBase`](GridTypeBase.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L130) + +A reference to the grid owner. + +*** + +### header + +> **header**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L105) + +Contains the exporting column header + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### skipFormatter + +> **skipFormatter**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L125) + +Export the column's data without applying its formatter, when set to true diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnInfo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnInfo.md new file mode 100644 index 000000000..293e59885 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnInfo.md @@ -0,0 +1,155 @@ +# Interface: IColumnInfo + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L49) + +## Properties + +### columnGroup? + +> `optional` **columnGroup?**: `string` \| [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L64) + +*** + +### columnGroupParent? + +> `optional` **columnGroupParent?**: `string` \| [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L63) + +*** + +### columnSpan? + +> `optional` **columnSpan?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L58) + +*** + +### currencyCode? + +> `optional` **currencyCode?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L65) + +*** + +### dataType? + +> `optional` **dataType?**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L53) + +*** + +### dateFormat? + +> `optional` **dateFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L67) + +*** + +### digitsInfo? + +> `optional` **digitsInfo?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L68) + +*** + +### displayFormat? + +> `optional` **displayFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L66) + +*** + +### exportIndex? + +> `optional` **exportIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L61) + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L51) + +*** + +### formatter? + +> `optional` **formatter?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L55) + +*** + +### header + +> **header**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L50) + +*** + +### headerType? + +> `optional` **headerType?**: [`ExportHeaderType`](../enumerations/ExportHeaderType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L56) + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L60) + +*** + +### pinnedIndex? + +> `optional` **pinnedIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L62) + +*** + +### rowSpan? + +> `optional` **rowSpan?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L59) + +*** + +### skip + +> **skip**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L52) + +*** + +### skipFormatter? + +> `optional` **skipFormatter?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L54) + +*** + +### startIndex? + +> `optional` **startIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L57) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnList.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnList.md new file mode 100644 index 000000000..a74e38c29 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnList.md @@ -0,0 +1,43 @@ +# Interface: IColumnList + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L41) + +## Properties + +### columns + +> **columns**: [`IColumnInfo`](IColumnInfo.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L42) + +*** + +### columnWidths + +> **columnWidths**: `number`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L43) + +*** + +### indexOfLastPinnedColumn + +> **indexOfLastPinnedColumn**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L44) + +*** + +### maxLevel? + +> `optional` **maxLevel?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L45) + +*** + +### maxRowLevel? + +> `optional` **maxRowLevel?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L46) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingEndEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingEndEventArgs.md new file mode 100644 index 000000000..527fbae48 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingEndEventArgs.md @@ -0,0 +1,56 @@ +# Interface: IColumnMovingEndEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:325](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L325) + +Represents event arguments related to the end of a column moving operation in a grid + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:340](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L340) + +`cancel` returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### source + +> **source**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:330](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L330) + +The source of the event represents the column that is being moved. +The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties + +*** + +### target + +> **target**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:335](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L335) + +The target of the event represents the column, the source is being moved to. +The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingEventArgs.md new file mode 100644 index 000000000..60be80de2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingEventArgs.md @@ -0,0 +1,45 @@ +# Interface: IColumnMovingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:311](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L311) + +Represents event arguments related to a column moving operation in a grid + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:321](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L321) + +`cancel` returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### source + +> **source**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:316](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L316) + +Represents the column that is being moved. +The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingStartEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingStartEventArgs.md new file mode 100644 index 000000000..83358af20 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnMovingStartEventArgs.md @@ -0,0 +1,34 @@ +# Interface: IColumnMovingStartEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:302](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L302) + +Represents event arguments related to the start of a column moving operation in a grid. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### source + +> **source**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:307](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L307) + +Represents the column that is being moved. +The `ColumnType` contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnPipeArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnPipeArgs.md new file mode 100644 index 000000000..f56cea478 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnPipeArgs.md @@ -0,0 +1,96 @@ +# Interface: IColumnPipeArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L42) + +## Extends + +- [`IFieldPipeArgs`](IFieldPipeArgs.md) + +## Properties + +### currencyCode? + +> `optional` **currencyCode?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L29) + +The currency code of type string, default value undefined + +#### Inherited from + +[`IFieldPipeArgs`](IFieldPipeArgs.md).[`currencyCode`](IFieldPipeArgs.md#currencycode) + +*** + +### digitsInfo? + +> `optional` **digitsInfo?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L27) + +Decimal representation options, specified by a string in the following format: +`{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. +`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. +`minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. +`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + +#### Inherited from + +[`IFieldPipeArgs`](IFieldPipeArgs.md).[`digitsInfo`](IFieldPipeArgs.md#digitsinfo) + +*** + +### display? + +> `optional` **display?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L34) + +Allow us to display currency 'symbol' or 'code' or 'symbol-narrow' or our own string. +The value is of type string. By default is set to 'symbol' + +#### Inherited from + +[`IFieldPipeArgs`](IFieldPipeArgs.md).[`display`](IFieldPipeArgs.md#display) + +*** + +### format? + +> `optional` **format?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L17) + +The date/time components that a date column will display, using predefined options or a custom format string. + +#### Inherited from + +[`IFieldPipeArgs`](IFieldPipeArgs.md).[`format`](IFieldPipeArgs.md#format) + +*** + +### timezone? + +> `optional` **timezone?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L19) + +A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. + +#### Inherited from + +[`IFieldPipeArgs`](IFieldPipeArgs.md).[`timezone`](IFieldPipeArgs.md#timezone) + +*** + +### weekStart? + +> `optional` **weekStart?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L37) + +The first week day to be displayed in calendar when filtering or editing a date column + +#### Inherited from + +[`IFieldPipeArgs`](IFieldPipeArgs.md).[`weekStart`](IFieldPipeArgs.md#weekstart) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnResizeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnResizeEventArgs.md new file mode 100644 index 000000000..3ef99f2bf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnResizeEventArgs.md @@ -0,0 +1,57 @@ +# Interface: IColumnResizeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L192) + +The event arguments when a column is being resized + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IColumnResizingEventArgs`](IColumnResizingEventArgs.md) + +## Properties + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L194) + +Represents the information of the column that is being resized + +*** + +### newWidth + +> **newWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L198) + +Represents the new width, the column is being resized to + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### prevWidth + +> **prevWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L196) + +Represents the old width of the column before the resizing diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnResizingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnResizingEventArgs.md new file mode 100644 index 000000000..094f17fc1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnResizingEventArgs.md @@ -0,0 +1,81 @@ +# Interface: IColumnResizingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L206) + +The event arguments when a column is being resized +It contains information about the column, it's old and new width +The event can be canceled + +## Extends + +- [`IColumnResizeEventArgs`](IColumnResizeEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L194) + +Represents the information of the column that is being resized + +#### Inherited from + +[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md).[`column`](IColumnResizeEventArgs.md#column) + +*** + +### newWidth + +> **newWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L198) + +Represents the new width, the column is being resized to + +#### Inherited from + +[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md).[`newWidth`](IColumnResizeEventArgs.md#newwidth) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md).[`owner`](IColumnResizeEventArgs.md#owner) + +*** + +### prevWidth + +> **prevWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L196) + +Represents the old width of the column before the resizing + +#### Inherited from + +[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md).[`prevWidth`](IColumnResizeEventArgs.md#prevwidth) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnSelectionEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnSelectionEventArgs.md new file mode 100644 index 000000000..fa1a920fe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnSelectionEventArgs.md @@ -0,0 +1,91 @@ +# Interface: IColumnSelectionEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:243](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L243) + +The event arguments when the selection state of a column is being changed +The event is cancelable + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### added + +> `readonly` **added**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L252) + +Represents an array of all added columns +Whenever a column has been selected, the array is "refreshed" with the selected columns + +*** + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### event? + +> `readonly` `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:263](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L263) + +Represents the original event, that has triggered the selection change +selecting, deselecting + +*** + +### newSelection + +> **newSelection**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:247](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L247) + +Represents the newly selected columns + +*** + +### oldSelection + +> `readonly` **oldSelection**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:245](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L245) + +Represents an array of columns, that have already been selected + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### removed + +> `readonly` **removed**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L257) + +Represents an array of all columns, removed from the selection +Whenever a column has been deselected, the array is "refreshed" with the columns, that have been previously selected, but are no longer diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnSelectionState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnSelectionState.md new file mode 100644 index 000000000..fb560072c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnSelectionState.md @@ -0,0 +1,25 @@ +# Interface: IColumnSelectionState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L90) + +Represents the state of the columns in the grid. + +## Properties + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L92) + +Represents the field name of the selected column, if any. Can be null if no column is selected. + +*** + +### range + +> **range**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L94) + +An array of strings representing the ranges of selected columns in the grid. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnState.md new file mode 100644 index 000000000..da47c8e92 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnState.md @@ -0,0 +1,261 @@ +# Interface: IColumnState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L61) + +## Properties + +### colEnd? + +> `optional` **colEnd?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L86) + +*** + +### collapsible? + +> `optional` **collapsible?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L95) + +*** + +### colStart? + +> `optional` **colStart?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L85) + +*** + +### columnGroup + +> **columnGroup**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L80) + +*** + +### columnLayout? + +> `optional` **columnLayout?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L82) + +*** + +### dataType + +> **dataType**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L73) + +*** + +### disableHiding + +> **disableHiding**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L93) + +*** + +### disablePinning + +> **disablePinning**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L94) + +*** + +### editable + +> **editable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L65) + +*** + +### expanded? + +> `optional` **expanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L96) + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L75) + +*** + +### filterable + +> **filterable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L64) + +*** + +### filteringIgnoreCase + +> **filteringIgnoreCase**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L67) + +*** + +### groupable + +> **groupable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L71) + +*** + +### hasSummary + +> **hasSummary**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L74) + +*** + +### header + +> **header**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L77) + +*** + +### headerClasses + +> **headerClasses**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L68) + +*** + +### headerGroupClasses + +> **headerGroupClasses**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L69) + +*** + +### hidden + +> **hidden**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L72) + +*** + +### key + +> **key**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L91) + +*** + +### maxWidth + +> **maxWidth**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L70) + +*** + +### ~~parent?~~ + +> `optional` **parent?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L90) + +#### Deprecated + +*** + +### parentKey + +> **parentKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L92) + +*** + +### pinned + +> **pinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L62) + +*** + +### resizable + +> **resizable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L78) + +*** + +### rowEnd? + +> `optional` **rowEnd?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L84) + +*** + +### rowStart? + +> `optional` **rowStart?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L83) + +*** + +### searchable + +> **searchable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L79) + +*** + +### sortable + +> **sortable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L63) + +*** + +### sortingIgnoreCase + +> **sortingIgnoreCase**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L66) + +*** + +### visibleWhenCollapsed? + +> `optional` **visibleWhenCollapsed?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L97) + +*** + +### width + +> **width**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L76) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnToggledEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnToggledEventArgs.md new file mode 100644 index 000000000..92724ade2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnToggledEventArgs.md @@ -0,0 +1,44 @@ +# Interface: IColumnToggledEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:466](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L466) + +Event emitted when a checkbox in the checkbox +list of an IgxColumnActions component is clicked. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### checked + +> **checked**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:470](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L470) + +The checked state after the action. + +*** + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:468](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L468) + +The column that is toggled. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnVisibilityChangedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnVisibilityChangedEventArgs.md new file mode 100644 index 000000000..f71e630a9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnVisibilityChangedEventArgs.md @@ -0,0 +1,48 @@ +# Interface: IColumnVisibilityChangedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L533) + +The event arguments after a column's visibility is changed. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md) + +## Properties + +### column + +> **column**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L535) + +Represents the column the event originated from + +*** + +### newValue + +> **newValue**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L540) + +The new hidden state that the column will have, if operation is successful. +Will be `true` when hiding and `false` when showing. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnVisibilityChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnVisibilityChangingEventArgs.md new file mode 100644 index 000000000..f8216ea58 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IColumnVisibilityChangingEventArgs.md @@ -0,0 +1,68 @@ +# Interface: IColumnVisibilityChangingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:548](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L548) + +The event arguments when a column's visibility is changed. +The event is cancelable +It contains information about the column and the it's visibility after the operation (will be `true` when hiding and `false` when showing) + +## Extends + +- [`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### column + +> **column**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L535) + +Represents the column the event originated from + +#### Inherited from + +[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md).[`column`](IColumnVisibilityChangedEventArgs.md#column) + +*** + +### newValue + +> **newValue**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L540) + +The new hidden state that the column will have, if operation is successful. +Will be `true` when hiding and `false` when showing. + +#### Inherited from + +[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md).[`newValue`](IColumnVisibilityChangedEventArgs.md#newvalue) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md).[`owner`](IColumnVisibilityChangedEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboFilteringOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboFilteringOptions.md new file mode 100644 index 000000000..2e179e3de --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboFilteringOptions.md @@ -0,0 +1,25 @@ +# Interface: IComboFilteringOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L103) + +The filtering criteria to be applied on data search + +## Properties + +### caseSensitive? + +> `optional` **caseSensitive?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L105) + +Defines filtering case-sensitivity + +*** + +### filteringKey? + +> `optional` **filteringKey?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L107) + +Defines optional key to filter against complex list items. Default to displayKey if provided. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboItemAdditionEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboItemAdditionEvent.md new file mode 100644 index 000000000..805f865e7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboItemAdditionEvent.md @@ -0,0 +1,59 @@ +# Interface: IComboItemAdditionEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L54) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### addedItem + +> **addedItem**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L56) + +*** + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### newCollection + +> **newCollection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L57) + +*** + +### oldCollection + +> **oldCollection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L55) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSearchInputEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSearchInputEventArgs.md new file mode 100644 index 000000000..f1f34e173 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSearchInputEventArgs.md @@ -0,0 +1,47 @@ +# Interface: IComboSearchInputEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L49) + +Event emitted when the igx-combo's search input changes + +## Extends + +- [`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md).[`cancel`](IBaseCancelableEventArgs.md#cancel) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md).[`owner`](IBaseCancelableEventArgs.md#owner) + +*** + +### searchText + +> **searchText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L51) + +The text that has been typed into the search input diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSelectionChangedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSelectionChangedEventArgs.md new file mode 100644 index 000000000..4bd49777f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSelectionChangedEventArgs.md @@ -0,0 +1,107 @@ +# Interface: IComboSelectionChangedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L26) + +Event emitted when the Combo's selection has changed + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IComboSelectionChangingEventArgs`](IComboSelectionChangingEventArgs.md) + +## Properties + +### added + +> **added**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L36) + +An array containing the items added to the selection (if any) + +*** + +### displayText + +> **displayText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L40) + +The display text of the combo text box + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L42) + +The user interaction that triggered the selection change + +*** + +### newSelection + +> **newSelection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L34) + +An array containing the new selection items + +*** + +### newValue + +> **newValue**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L30) + +An array containing the new selection items + +*** + +### oldSelection + +> **oldSelection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L32) + +An array containing the old selection items + +*** + +### oldValue + +> **oldValue**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L28) + +An array containing the old selection values + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### removed + +> **removed**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L38) + +An array containing the items removed from the selection (if any) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSelectionChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSelectionChangingEventArgs.md new file mode 100644 index 000000000..38df54cba --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IComboSelectionChangingEventArgs.md @@ -0,0 +1,149 @@ +# Interface: IComboSelectionChangingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L46) + +Event emitted when the Combo's selection is changing + +## Extends + +- [`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md) + +## Properties + +### added + +> **added**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L36) + +An array containing the items added to the selection (if any) + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`added`](IComboSelectionChangedEventArgs.md#added) + +*** + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IBaseCancelableEventArgs`](IBaseCancelableEventArgs.md).[`cancel`](IBaseCancelableEventArgs.md#cancel) + +*** + +### displayText + +> **displayText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L40) + +The display text of the combo text box + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`displayText`](IComboSelectionChangedEventArgs.md#displaytext) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L42) + +The user interaction that triggered the selection change + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`event`](IComboSelectionChangedEventArgs.md#event) + +*** + +### newSelection + +> **newSelection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L34) + +An array containing the new selection items + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`newSelection`](IComboSelectionChangedEventArgs.md#newselection) + +*** + +### newValue + +> **newValue**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L30) + +An array containing the new selection items + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`newValue`](IComboSelectionChangedEventArgs.md#newvalue) + +*** + +### oldSelection + +> **oldSelection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L32) + +An array containing the old selection items + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`oldSelection`](IComboSelectionChangedEventArgs.md#oldselection) + +*** + +### oldValue + +> **oldValue**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L28) + +An array containing the old selection values + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`oldValue`](IComboSelectionChangedEventArgs.md#oldvalue) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`owner`](IComboSelectionChangedEventArgs.md#owner) + +*** + +### removed + +> **removed**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.component.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.component.ts#L38) + +An array containing the items removed from the selection (if any) + +#### Inherited from + +[`IComboSelectionChangedEventArgs`](IComboSelectionChangedEventArgs.md).[`removed`](IComboSelectionChangedEventArgs.md#removed) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICsvExportEndedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICsvExportEndedEventArgs.md new file mode 100644 index 000000000..c63242cd0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ICsvExportEndedEventArgs.md @@ -0,0 +1,29 @@ +# Interface: ICsvExportEndedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts#L8) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### csvData? + +> `optional` **csvData?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter.ts#L9) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDataCloneStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDataCloneStrategy.md new file mode 100644 index 000000000..66bb3eefd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDataCloneStrategy.md @@ -0,0 +1,27 @@ +# Interface: IDataCloneStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts#L3) + +## Methods + +### clone() + +> **clone**(`data`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/data-clone-strategy.ts#L9) + +Clones provided data + +#### Parameters + +##### data + +`any` + +primitive value, date and object to be cloned + +#### Returns + +`any` + +deep copy of provided value diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDateParts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDateParts.md new file mode 100644 index 000000000..1323e5e06 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDateParts.md @@ -0,0 +1,63 @@ +# Interface: IDateParts + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L919) + +Interface describing Date object in parts + +## Export + +## Properties + +### day + +> **day**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L922) + +*** + +### hours + +> **hours**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L923) + +*** + +### milliseconds + +> **milliseconds**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L926) + +*** + +### minutes + +> **minutes**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L924) + +*** + +### month + +> **month**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:921](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L921) + +*** + +### seconds + +> **seconds**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:925](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L925) + +*** + +### year + +> **year**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L920) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDatePickerValidationFailedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDatePickerValidationFailedEventArgs.md new file mode 100644 index 000000000..7d26faabc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDatePickerValidationFailedEventArgs.md @@ -0,0 +1,40 @@ +# Interface: IDatePickerValidationFailedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts#L7) + +Provides information about date picker reference and its previously valid value +when onValidationFailed event is fired. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### currentValue + +> **currentValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts#L9) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### prevValue + +> **prevValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/date-picker.common.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDialogCancellableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDialogCancellableEventArgs.md new file mode 100644 index 000000000..a7aa09dcb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDialogCancellableEventArgs.md @@ -0,0 +1,59 @@ +# Interface: IDialogCancellableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:577](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L577) + +## Extends + +- [`IDialogEventArgs`](IDialogEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### dialog + +> **dialog**: [`IgxDialogComponent`](../classes/IgxDialogComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:573](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L573) + +#### Inherited from + +[`IDialogEventArgs`](IDialogEventArgs.md).[`dialog`](IDialogEventArgs.md#dialog) + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L574) + +#### Inherited from + +[`IDialogEventArgs`](IDialogEventArgs.md).[`event`](IDialogEventArgs.md#event) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IDialogEventArgs`](IDialogEventArgs.md).[`owner`](IDialogEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDialogEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDialogEventArgs.md new file mode 100644 index 000000000..7d64e773c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDialogEventArgs.md @@ -0,0 +1,41 @@ +# Interface: IDialogEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L572) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IDialogCancellableEventArgs`](IDialogCancellableEventArgs.md) + +## Properties + +### dialog + +> **dialog**: [`IgxDialogComponent`](../classes/IgxDialogComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:573](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L573) + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts:574](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts#L574) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDimensionsChange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDimensionsChange.md new file mode 100644 index 000000000..256406caf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDimensionsChange.md @@ -0,0 +1,25 @@ +# Interface: IDimensionsChange + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L15) + +Event emitted when dimension collection for rows, columns of filters is changed. + +## Properties + +### dimensionCollectionType + +> **dimensionCollectionType**: [`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L19) + +The dimension list type - Row, Column or Filter. + +*** + +### dimensions + +> **dimensions**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L17) + +The new list of dimensions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragBaseEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragBaseEventArgs.md new file mode 100644 index 000000000..c8bfd1b80 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragBaseEventArgs.md @@ -0,0 +1,78 @@ +# Interface: IDragBaseEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L95) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IDragStartEventArgs`](IDragStartEventArgs.md) + +## Properties + +### originalEvent + +> **originalEvent**: `PointerEvent` \| `MouseEvent` \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L100) + +Reference to the original event that caused the interaction with the element. +Can be PointerEvent, TouchEvent or MouseEvent. + +*** + +### owner + +> **owner**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L102) + +The owner igxDrag directive that triggered this event. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L111) + +The current position of the pointer on X axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L116) + +The current position of the pointer on Y axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +*** + +### startX + +> **startX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L104) + +The initial position of the pointer on X axis when the dragged element began moving + +*** + +### startY + +> **startY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L106) + +The initial position of the pointer on Y axis when the dragged element began moving diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragCustomTransitionArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragCustomTransitionArgs.md new file mode 100644 index 000000000..b28997cd8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragCustomTransitionArgs.md @@ -0,0 +1,27 @@ +# Interface: IDragCustomTransitionArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:141](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L141) + +## Properties + +### delay? + +> `optional` **delay?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L144) + +*** + +### duration? + +> `optional` **duration?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L142) + +*** + +### timingFunction? + +> `optional` **timingFunction?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L143) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragGhostBaseEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragGhostBaseEventArgs.md new file mode 100644 index 000000000..e66aaa307 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragGhostBaseEventArgs.md @@ -0,0 +1,41 @@ +# Interface: IDragGhostBaseEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L132) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L138) + +Set if the ghost creation/destruction should be canceled. + +*** + +### ghostElement + +> **ghostElement**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L136) + +Instance to the ghost element that is created when dragging starts. + +*** + +### owner + +> **owner**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L134) + +The owner igxDrag directive that triggered this event. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragMoveEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragMoveEventArgs.md new file mode 100644 index 000000000..6b3a6cf1b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragMoveEventArgs.md @@ -0,0 +1,128 @@ +# Interface: IDragMoveEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L124) + +## Extends + +- [`IDragStartEventArgs`](IDragStartEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L121) + +Set if the the dragging should be canceled. + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`cancel`](IDragStartEventArgs.md#cancel) + +*** + +### nextPageX + +> **nextPageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L126) + +The new pageX position of the pointer that the igxDrag will use. It can be overridden to limit dragged element X movement. + +*** + +### nextPageY + +> **nextPageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L128) + +The new pageX position of the pointer that the igxDrag will use. It can be overridden to limit dragged element Y movement. + +*** + +### originalEvent + +> **originalEvent**: `PointerEvent` \| `MouseEvent` \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L100) + +Reference to the original event that caused the interaction with the element. +Can be PointerEvent, TouchEvent or MouseEvent. + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`originalEvent`](IDragStartEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L102) + +The owner igxDrag directive that triggered this event. + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`owner`](IDragStartEventArgs.md#owner) + +*** + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L111) + +The current position of the pointer on X axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`pageX`](IDragStartEventArgs.md#pagex) + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L116) + +The current position of the pointer on Y axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`pageY`](IDragStartEventArgs.md#pagey) + +*** + +### startX + +> **startX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L104) + +The initial position of the pointer on X axis when the dragged element began moving + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`startX`](IDragStartEventArgs.md#startx) + +*** + +### startY + +> **startY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L106) + +The initial position of the pointer on Y axis when the dragged element began moving + +#### Inherited from + +[`IDragStartEventArgs`](IDragStartEventArgs.md).[`startY`](IDragStartEventArgs.md#starty) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragStartEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragStartEventArgs.md new file mode 100644 index 000000000..1f5e69b1b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDragStartEventArgs.md @@ -0,0 +1,108 @@ +# Interface: IDragStartEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L119) + +## Extends + +- [`IDragBaseEventArgs`](IDragBaseEventArgs.md) + +## Extended by + +- [`IDragMoveEventArgs`](IDragMoveEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L121) + +Set if the the dragging should be canceled. + +*** + +### originalEvent + +> **originalEvent**: `PointerEvent` \| `MouseEvent` \| `TouchEvent` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L100) + +Reference to the original event that caused the interaction with the element. +Can be PointerEvent, TouchEvent or MouseEvent. + +#### Inherited from + +[`IDragBaseEventArgs`](IDragBaseEventArgs.md).[`originalEvent`](IDragBaseEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L102) + +The owner igxDrag directive that triggered this event. + +#### Inherited from + +[`IDragBaseEventArgs`](IDragBaseEventArgs.md).[`owner`](IDragBaseEventArgs.md#owner) + +*** + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L111) + +The current position of the pointer on X axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDragBaseEventArgs`](IDragBaseEventArgs.md).[`pageX`](IDragBaseEventArgs.md#pagex) + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L116) + +The current position of the pointer on Y axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDragBaseEventArgs`](IDragBaseEventArgs.md).[`pageY`](IDragBaseEventArgs.md#pagey) + +*** + +### startX + +> **startX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L104) + +The initial position of the pointer on X axis when the dragged element began moving + +#### Inherited from + +[`IDragBaseEventArgs`](IDragBaseEventArgs.md).[`startX`](IDragBaseEventArgs.md#startx) + +*** + +### startY + +> **startY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L106) + +The initial position of the pointer on Y axis when the dragged element began moving + +#### Inherited from + +[`IDragBaseEventArgs`](IDragBaseEventArgs.md).[`startY`](IDragBaseEventArgs.md#starty) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropBaseEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropBaseEventArgs.md new file mode 100644 index 000000000..b0015e6d7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropBaseEventArgs.md @@ -0,0 +1,120 @@ +# Interface: IDropBaseEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L52) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IDropDroppedEventArgs`](IDropDroppedEventArgs.md) + +## Properties + +### drag + +> **drag**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L61) + +The igxDrag directive instanced on an element that entered the area of the igxDrop element + +*** + +### dragData + +> **dragData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L63) + +The data contained for the draggable element in igxDrag directive. + +*** + +### offsetX + +> **offsetX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L82) + +The current position of the pointer on X axis relative to the container that initializes the igxDrop. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +*** + +### offsetY + +> **offsetY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L87) + +The current position of the pointer on Y axis relative to the container that initializes the igxDrop. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +*** + +### originalEvent + +> **originalEvent**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L57) + +Reference to the original event that caused the draggable element to enter the igxDrop element. +Can be PointerEvent, TouchEvent or MouseEvent. + +*** + +### owner + +> **owner**: [`IgxDropDirective`](../classes/IgxDropDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L59) + +The owner igxDrop directive that triggered this event. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L72) + +The current position of the pointer on X axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L77) + +The current position of the pointer on Y axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +*** + +### startX + +> **startX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L65) + +The initial position of the pointer on X axis when the dragged element began moving + +*** + +### startY + +> **startY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L67) + +The initial position of the pointer on Y axis when the dragged element began moving diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropDownNavigationDirective.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropDownNavigationDirective.md new file mode 100644 index 000000000..e635b86a4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropDownNavigationDirective.md @@ -0,0 +1,105 @@ +# Interface: IDropDownNavigationDirective + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L36) + +Interface for an instance of IgxDropDownNavigationDirective + +## Export + +## Properties + +### target + +> **target**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L37) + +## Methods + +### handleKeyDown() + +> **handleKeyDown**(`event`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L38) + +#### Parameters + +##### event + +`KeyboardEvent` + +#### Returns + +`void` + +*** + +### onArrowDownKeyDown() + +> **onArrowDownKeyDown**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L39) + +#### Parameters + +##### event? + +`KeyboardEvent` + +#### Returns + +`void` + +*** + +### onArrowUpKeyDown() + +> **onArrowUpKeyDown**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L40) + +#### Parameters + +##### event? + +`KeyboardEvent` + +#### Returns + +`void` + +*** + +### onEndKeyDown() + +> **onEndKeyDown**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L41) + +#### Parameters + +##### event? + +`KeyboardEvent` + +#### Returns + +`void` + +*** + +### onHomeKeyDown() + +> **onHomeKeyDown**(`event?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L42) + +#### Parameters + +##### event? + +`KeyboardEvent` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropDroppedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropDroppedEventArgs.md new file mode 100644 index 000000000..74492e1f7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropDroppedEventArgs.md @@ -0,0 +1,162 @@ +# Interface: IDropDroppedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L90) + +## Extends + +- [`IDropBaseEventArgs`](IDropBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L92) + +Specifies if the default drop logic related to the event should be canceled. + +*** + +### drag + +> **drag**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L61) + +The igxDrag directive instanced on an element that entered the area of the igxDrop element + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`drag`](IDropBaseEventArgs.md#drag) + +*** + +### dragData + +> **dragData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L63) + +The data contained for the draggable element in igxDrag directive. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`dragData`](IDropBaseEventArgs.md#dragdata) + +*** + +### offsetX + +> **offsetX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L82) + +The current position of the pointer on X axis relative to the container that initializes the igxDrop. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`offsetX`](IDropBaseEventArgs.md#offsetx) + +*** + +### offsetY + +> **offsetY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L87) + +The current position of the pointer on Y axis relative to the container that initializes the igxDrop. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`offsetY`](IDropBaseEventArgs.md#offsety) + +*** + +### originalEvent + +> **originalEvent**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L57) + +Reference to the original event that caused the draggable element to enter the igxDrop element. +Can be PointerEvent, TouchEvent or MouseEvent. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`originalEvent`](IDropBaseEventArgs.md#originalevent) + +*** + +### owner + +> **owner**: [`IgxDropDirective`](../classes/IgxDropDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L59) + +The owner igxDrop directive that triggered this event. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`owner`](IDropBaseEventArgs.md#owner) + +*** + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:72](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L72) + +The current position of the pointer on X axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`pageX`](IDropBaseEventArgs.md#pagex) + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L77) + +The current position of the pointer on Y axis when the event was triggered. +Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop. + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`pageY`](IDropBaseEventArgs.md#pagey) + +*** + +### startX + +> **startX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L65) + +The initial position of the pointer on X axis when the dragged element began moving + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`startX`](IDropBaseEventArgs.md#startx) + +*** + +### startY + +> **startY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L67) + +The initial position of the pointer on Y axis when the dragged element began moving + +#### Inherited from + +[`IDropBaseEventArgs`](IDropBaseEventArgs.md).[`startY`](IDropBaseEventArgs.md#starty) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropStrategy.md new file mode 100644 index 000000000..36a54a784 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IDropStrategy.md @@ -0,0 +1,29 @@ +# Interface: IDropStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L5) + +## Properties + +### dropAction + +> **dropAction**: (`drag`, `drop`, `atIndex`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.strategy.ts#L6) + +#### Parameters + +##### drag + +[`IgxDragDirective`](../classes/IgxDragDirective.md) + +##### drop + +[`IgxDropDirective`](../classes/IgxDropDirective.md) + +##### atIndex + +`number` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExcelExportEndedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExcelExportEndedEventArgs.md new file mode 100644 index 000000000..068aea10d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExcelExportEndedEventArgs.md @@ -0,0 +1,29 @@ +# Interface: IExcelExportEndedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts#L14) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### xlsx? + +> `optional` **xlsx?**: `Object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpansionPanelCancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpansionPanelCancelableEventArgs.md new file mode 100644 index 000000000..50b33ed82 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpansionPanelCancelableEventArgs.md @@ -0,0 +1,51 @@ +# Interface: IExpansionPanelCancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L28) + +## Extends + +- [`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Extended by + +- [`IAccordionCancelableEventArgs`](IAccordionCancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L25) + +#### Inherited from + +[`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md).[`event`](IExpansionPanelEventArgs.md#event) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IExpansionPanelEventArgs`](IExpansionPanelEventArgs.md).[`owner`](IExpansionPanelEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpansionPanelEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpansionPanelEventArgs.md new file mode 100644 index 000000000..168e30974 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpansionPanelEventArgs.md @@ -0,0 +1,34 @@ +# Interface: IExpansionPanelEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L24) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IAccordionEventArgs`](IAccordionEventArgs.md) +- [`IExpansionPanelCancelableEventArgs`](IExpansionPanelCancelableEventArgs.md) + +## Properties + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L25) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExportRecord.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExportRecord.md new file mode 100644 index 000000000..d39bd6617 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExportRecord.md @@ -0,0 +1,83 @@ +# Interface: IExportRecord + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L27) + +## Properties + +### data + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L28) + +*** + +### dimensionKeys? + +> `optional` **dimensionKeys?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L38) + +*** + +### hidden? + +> `optional` **hidden?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L32) + +*** + +### hierarchicalOwner? + +> `optional` **hierarchicalOwner?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L34) + +*** + +### level + +> **level**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L29) + +*** + +### owner? + +> `optional` **owner?**: `string` \| [`GridTypeBase`](GridTypeBase.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L31) + +*** + +### rawData? + +> `optional` **rawData?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L37) + +*** + +### references? + +> `optional` **references?**: [`IColumnInfo`](IColumnInfo.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L35) + +*** + +### summaryKey? + +> `optional` **summaryKey?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L33) + +*** + +### type + +> **type**: [`ExportRecordType`](../enumerations/ExportRecordType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L30) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpressionTree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpressionTree.md new file mode 100644 index 000000000..60a5fab99 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IExpressionTree.md @@ -0,0 +1,47 @@ +# Interface: IExpressionTree + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L12) + +## Extended by + +- [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +## Properties + +### entity? + +> `optional` **entity?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L16) + +*** + +### fieldName? + +> `optional` **fieldName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L15) + +*** + +### filteringOperands + +> **filteringOperands**: ([`IFilteringExpression`](IFilteringExpression.md) \| `IExpressionTree`)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L13) + +*** + +### operator + +> **operator**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L14) + +*** + +### returnFields? + +> `optional` **returnFields?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L17) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldEditorOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldEditorOptions.md new file mode 100644 index 000000000..8d710c9c3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldEditorOptions.md @@ -0,0 +1,18 @@ +# Interface: IFieldEditorOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L44) + +## Extended by + +- [`IColumnEditorOptions`](IColumnEditorOptions.md) + +## Properties + +### dateTimeFormat? + +> `optional` **dateTimeFormat?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L49) + +A custom input format string used for the built-in editors of date/time columns. +See the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldPipeArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldPipeArgs.md new file mode 100644 index 000000000..263f1e9d4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldPipeArgs.md @@ -0,0 +1,72 @@ +# Interface: IFieldPipeArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L15) + +## Extended by + +- [`IColumnPipeArgs`](IColumnPipeArgs.md) + +## Properties + +### currencyCode? + +> `optional` **currencyCode?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L29) + +The currency code of type string, default value undefined + +*** + +### digitsInfo? + +> `optional` **digitsInfo?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L27) + +Decimal representation options, specified by a string in the following format: +`{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. +`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. +`minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. +`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + +*** + +### display? + +> `optional` **display?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L34) + +Allow us to display currency 'symbol' or 'code' or 'symbol-narrow' or our own string. +The value is of type string. By default is set to 'symbol' + +*** + +### format? + +> `optional` **format?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L17) + +The date/time components that a date column will display, using predefined options or a custom format string. + +*** + +### timezone? + +> `optional` **timezone?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L19) + +A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. + +*** + +### weekStart? + +> `optional` **weekStart?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L37) + +The first week day to be displayed in calendar when filtering or editing a date column diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldValidationState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldValidationState.md new file mode 100644 index 000000000..308a5ebd4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFieldValidationState.md @@ -0,0 +1,42 @@ +# Interface: IFieldValidationState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:322](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L322) + +Interface representing the validation state of a field in the grid. +-`field`: The name of the field (property) being validated. + +## Extends + +- [`IGridValidationState`](IGridValidationState.md) + +## Properties + +### errors? + +> `readonly` `optional` **errors?**: `ValidationErrors` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:305](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L305) + +#### Inherited from + +[`IGridValidationState`](IGridValidationState.md).[`errors`](IGridValidationState.md#errors) + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:323](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L323) + +*** + +### status + +> `readonly` **status**: [`ValidationStatus`](../type-aliases/ValidationStatus.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L304) + +#### Inherited from + +[`IGridValidationState`](IGridValidationState.md).[`status`](IGridValidationState.md#status) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringEventArgs.md new file mode 100644 index 000000000..a2b119da7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringEventArgs.md @@ -0,0 +1,49 @@ +# Interface: IFilteringEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:524](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L524) + +Represents event arguments related to filtering operations +The event is cancelable + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### filteringExpressions + +> **filteringExpressions**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:529](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L529) + +Represents the filtering expressions applied to the grid. +The expression contains information like filtering operands and operator, an expression or condition, etc. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringExpression.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringExpression.md new file mode 100644 index 000000000..ee0f6c03c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringExpression.md @@ -0,0 +1,53 @@ +# Interface: IFilteringExpression + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L15) + +Represents filtering expressions. + +## Properties + +### condition? + +> `optional` **condition?**: [`IFilteringOperation`](IFilteringOperation.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L17) + +*** + +### conditionName? + +> `optional` **conditionName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L18) + +*** + +### fieldName + +> **fieldName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L16) + +*** + +### ignoreCase? + +> `optional` **ignoreCase?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L21) + +*** + +### searchTree? + +> `optional` **searchTree?**: [`IExpressionTree`](IExpressionTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L20) + +*** + +### searchVal? + +> `optional` **searchVal?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringExpressionsTree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringExpressionsTree.md new file mode 100644 index 000000000..8f65ce1f6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringExpressionsTree.md @@ -0,0 +1,133 @@ +# Interface: IFilteringExpressionsTree + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L22) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`IExpressionTree`](IExpressionTree.md) + +## Properties + +### entity? + +> `optional` **entity?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L16) + +#### Inherited from + +[`IExpressionTree`](IExpressionTree.md).[`entity`](IExpressionTree.md#entity) + +*** + +### fieldName? + +> `optional` **fieldName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L15) + +#### Inherited from + +[`IExpressionTree`](IExpressionTree.md).[`fieldName`](IExpressionTree.md#fieldname) + +*** + +### filteringOperands + +> **filteringOperands**: ([`IFilteringExpression`](IFilteringExpression.md) \| `IFilteringExpressionsTree`)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L23) + +#### Overrides + +[`IExpressionTree`](IExpressionTree.md).[`filteringOperands`](IExpressionTree.md#filteringoperands) + +*** + +### ~~find?~~ + +> `optional` **find?**: (`fieldName`) => [`IFilteringExpression`](IFilteringExpression.md) \| `IFilteringExpressionsTree` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L31) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +[`IFilteringExpression`](IFilteringExpression.md) \| `IFilteringExpressionsTree` + +#### Deprecated + +in version 18.2.0. Use `ExpressionsTreeUtil.find` instead. + +*** + +### ~~findIndex?~~ + +> `optional` **findIndex?**: (`fieldName`) => `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L37) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`number` + +#### Deprecated + +in version 18.2.0. Use `ExpressionsTreeUtil.findIndex` instead. + +*** + +### operator + +> **operator**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L14) + +#### Inherited from + +[`IExpressionTree`](IExpressionTree.md).[`operator`](IExpressionTree.md#operator) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### returnFields? + +> `optional` **returnFields?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L17) + +#### Inherited from + +[`IExpressionTree`](IExpressionTree.md).[`returnFields`](IExpressionTree.md#returnfields) + +*** + +### type? + +> `optional` **type?**: [`FilteringExpressionsTreeType`](../enumerations/FilteringExpressionsTreeType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-expressions-tree.ts#L25) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringOperation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringOperation.md new file mode 100644 index 000000000..35f6a8341 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringOperation.md @@ -0,0 +1,73 @@ +# Interface: IFilteringOperation + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L903) + +Interface describing filtering operations + +## Export + +## Properties + +### hidden? + +> `optional` **hidden?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:908](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L908) + +*** + +### iconName + +> **iconName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:907](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L907) + +*** + +### isNestedQuery? + +> `optional` **isNestedQuery?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L906) + +*** + +### isUnary + +> **isUnary**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L905) + +*** + +### logic? + +> `optional` **logic?**: (`value`, `searchVal?`, `ignoreCase?`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L911) + +#### Parameters + +##### value + +`any` + +##### searchVal? + +`any` + +##### ignoreCase? + +`boolean` + +#### Returns + +`boolean` + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-condition.ts#L904) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringState.md new file mode 100644 index 000000000..748878c63 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringState.md @@ -0,0 +1,27 @@ +# Interface: IFilteringState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts#L4) + +## Properties + +### advancedExpressionsTree? + +> `optional` **advancedExpressionsTree?**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts#L6) + +*** + +### expressionsTree + +> **expressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts#L5) + +*** + +### strategy? + +> `optional` **strategy?**: [`IFilteringStrategy`](IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-state.interface.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringStrategy.md new file mode 100644 index 000000000..1d757c979 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFilteringStrategy.md @@ -0,0 +1,55 @@ +# Interface: IFilteringStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L24) + +## Methods + +### filter() + +> **filter**(`data`, `expressionsTree`, `advancedExpressionsTree?`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L25) + +#### Parameters + +##### data + +`any`[] + +##### expressionsTree + +[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +##### advancedExpressionsTree? + +[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +##### grid? + +[`GridTypeBase`](GridTypeBase.md) + +#### Returns + +`any`[] + +*** + +### getFilterItems() + +> **getFilterItems**(`column`, `tree`): `Promise`\<[`IgxFilterItem`](IgxFilterItem.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L28) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### tree + +[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +#### Returns + +`Promise`\<[`IgxFilterItem`](IgxFilterItem.md)[]\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfDataChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfDataChangeEventArgs.md new file mode 100644 index 000000000..98d097c45 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfDataChangeEventArgs.md @@ -0,0 +1,49 @@ +# ~~Interface: IForOfDataChangeEventArgs~~ + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1584) + +## Deprecated + +in 19.2.7. Use `IForOfDataChangeEventArgs` instead. + +## Extends + +- [`IForOfDataChangingEventArgs`](IForOfDataChangingEventArgs.md) + +## Properties + +### ~~containerSize~~ + +> **containerSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1580](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1580) + +#### Inherited from + +[`IForOfDataChangingEventArgs`](IForOfDataChangingEventArgs.md).[`containerSize`](IForOfDataChangingEventArgs.md#containersize) + +*** + +### ~~owner?~~ + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IForOfDataChangingEventArgs`](IForOfDataChangingEventArgs.md).[`owner`](IForOfDataChangingEventArgs.md#owner) + +*** + +### ~~state~~ + +> **state**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1581) + +#### Inherited from + +[`IForOfDataChangingEventArgs`](IForOfDataChangingEventArgs.md).[`state`](IForOfDataChangingEventArgs.md#state) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfDataChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfDataChangingEventArgs.md new file mode 100644 index 000000000..b309068b5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfDataChangingEventArgs.md @@ -0,0 +1,45 @@ +# ~~Interface: IForOfDataChangingEventArgs~~ + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1579](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1579) + +## Deprecated + +in 19.2.7. Use `IForOfDataChangeEventArgs` instead. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IForOfDataChangeEventArgs`](IForOfDataChangeEventArgs.md) + +## Properties + +### ~~containerSize~~ + +> **containerSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1580](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1580) + +*** + +### ~~owner?~~ + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### ~~state~~ + +> **state**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1581](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1581) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfState.md new file mode 100644 index 000000000..c68247e22 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IForOfState.md @@ -0,0 +1,37 @@ +# Interface: IForOfState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1571](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1571) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### chunkSize? + +> `optional` **chunkSize?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1573](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1573) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### startIndex? + +> `optional` **startIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/for-of/for\_of.directive.ts:1572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts#L1572) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattedParts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattedParts.md new file mode 100644 index 000000000..285233c18 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattedParts.md @@ -0,0 +1,27 @@ +# Interface: IFormattedParts + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L78) + +## Properties + +### combined + +> **combined**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:81](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L81) + +*** + +### literal? + +> `optional` **literal?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L80) + +*** + +### value + +> **value**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L79) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattingOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattingOptions.md new file mode 100644 index 000000000..ca0ea179f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattingOptions.md @@ -0,0 +1,35 @@ +# Interface: IFormattingOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L84) + +## Properties + +### day? + +> `optional` **day?**: `"numeric"` \| `"2-digit"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L85) + +*** + +### month? + +> `optional` **month?**: `"numeric"` \| `"2-digit"` \| `"long"` \| `"short"` \| `"narrow"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L86) + +*** + +### weekday? + +> `optional` **weekday?**: `"long"` \| `"short"` \| `"narrow"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L87) + +*** + +### year? + +> `optional` **year?**: `"numeric"` \| `"2-digit"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L88) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattingViews.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattingViews.md new file mode 100644 index 000000000..df83c725c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IFormattingViews.md @@ -0,0 +1,27 @@ +# Interface: IFormattingViews + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L91) + +## Properties + +### day? + +> `optional` **day?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L92) + +*** + +### month? + +> `optional` **month?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L93) + +*** + +### year? + +> `optional` **year?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L94) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridCellEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridCellEventArgs.md new file mode 100644 index 000000000..164c9247f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridCellEventArgs.md @@ -0,0 +1,48 @@ +# Interface: IGridCellEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L20) + +Represents an event argument related to grid cell interactions. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md) + +## Properties + +### cell + +> **cell**: [`CellType`](CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L22) + +Represents the grid cell that triggered the event. + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L28) + +Represents the original event that occurred +Examples of such events include: selecting, clicking, double clicking, etc. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridClipboardEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridClipboardEvent.md new file mode 100644 index 000000000..98d6a2be3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridClipboardEvent.md @@ -0,0 +1,26 @@ +# Interface: IGridClipboardEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L9) + +The event arguments when data from a grid is being copied. + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L16) + +`cancel` returns whether an external event has intercepted the copying +If the value becomes "true", it returns/exits from the method, instantiating the interface + +*** + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L11) + +`data` can be of any type and refers to the data that is being copied/stored to the clipboard diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridContextMenuEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridContextMenuEventArgs.md new file mode 100644 index 000000000..084ef57e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridContextMenuEventArgs.md @@ -0,0 +1,66 @@ +# Interface: IGridContextMenuEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L43) + +Represents an event argument for the grid contextMenu output + +## Extends + +- [`IGridCellEventArgs`](IGridCellEventArgs.md).[`IGridRowEventArgs`](IGridRowEventArgs.md) + +## Properties + +### cell + +> **cell**: [`CellType`](CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L22) + +Represents the grid cell that triggered the event. + +#### Inherited from + +[`IGridCellEventArgs`](IGridCellEventArgs.md).[`cell`](IGridCellEventArgs.md#cell) + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L28) + +Represents the original event that occurred +Examples of such events include: selecting, clicking, double clicking, etc. + +#### Inherited from + +[`IGridCellEventArgs`](IGridCellEventArgs.md).[`event`](IGridCellEventArgs.md#event) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IGridCellEventArgs`](IGridCellEventArgs.md).[`owner`](IGridCellEventArgs.md#owner) + +*** + +### row + +> **row**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L34) + +Represents the grid row that triggered the event. + +#### Inherited from + +[`IGridRowEventArgs`](IGridRowEventArgs.md).[`row`](IGridRowEventArgs.md#row) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridCreatedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridCreatedEventArgs.md new file mode 100644 index 000000000..3efdaf9bd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridCreatedEventArgs.md @@ -0,0 +1,45 @@ +# Interface: IGridCreatedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts#L6) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### grid + +> **grid**: [`IgxHierarchicalGridComponent`](../classes/IgxHierarchicalGridComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts#L9) + +*** + +### owner + +> **owner**: [`IgxRowIslandComponent`](../classes/IgxRowIslandComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts#L7) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### parentID + +> **parentID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts#L8) + +*** + +### parentRowData? + +> `optional` **parentRowData?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/events.ts#L10) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridDataBindable.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridDataBindable.md new file mode 100644 index 000000000..f462c04c5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridDataBindable.md @@ -0,0 +1,67 @@ +# Interface: IGridDataBindable + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L28) + +Stub type for GridType - minimal interface for typing in core + +## Extends + +- [`GridTypeBase`](GridTypeBase.md) + +## Extended by + +- [`GridType`](GridType.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L29) + +#### Overrides + +[`GridTypeBase`](GridTypeBase.md).[`data`](GridTypeBase.md#data) + +*** + +### id? + +> `optional` **id?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:95](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L95) + +#### Inherited from + +[`GridTypeBase`](GridTypeBase.md).[`id`](GridTypeBase.md#id) + +*** + +### primaryKey? + +> `optional` **primaryKey?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L94) + +#### Inherited from + +[`GridTypeBase`](GridTypeBase.md).[`primaryKey`](GridTypeBase.md#primarykey) + +## Accessors + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L30) + +##### Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridEditDoneEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridEditDoneEventArgs.md new file mode 100644 index 000000000..1babdca81 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridEditDoneEventArgs.md @@ -0,0 +1,159 @@ +# Interface: IGridEditDoneEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L46) + +Represents event arguments related to grid editing completion. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IGridEditEventArgs`](IGridEditEventArgs.md) + +## Properties + +### cellID? + +> `optional` **cellID?**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L56) + +#### columnID + +> **columnID**: `any` + +#### rowID + +> **rowID**: `any` + +#### rowIndex + +> **rowIndex**: `number` + +*** + +### column? + +> `optional` **column?**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L87) + +Optional +Represents the column information of the edited cell + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L82) + +Optional +Represents the original event, that has triggered the edit + +*** + +### isAddRow? + +> `optional` **isAddRow?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L97) + +Optional +Indicates if the editing consists of adding a new row + +*** + +### newValue? + +> `optional` **newValue?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L76) + +Optional +Represents the value, that is being entered in the edited cell +When there is no `newValue` and the event has ended, the value of the cell returns to the `oldValue` + +*** + +### oldValue + +> **oldValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L70) + +Represents the previous (before editing) value of the edited cell. +It's used when the event has been stopped/exited. + +*** + +### owner? + +> `optional` **owner?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L92) + +Optional +Represents the grid instance that owns the edit event. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### ~~primaryKey~~ + +> **primaryKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L54) + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L65) + +`rowData` represents the updated/committed data of the row after the edit (newValue) +The only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled + +*** + +### ~~rowID~~ + +> **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L50) + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L55) + +*** + +### valid? + +> `optional` **valid?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L103) + +Optional +Indicates if the new value would be valid. +It can be set to return the result of the methods for validation of the grid diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridEditEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridEditEventArgs.md new file mode 100644 index 000000000..7a1568f53 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridEditEventArgs.md @@ -0,0 +1,219 @@ +# Interface: IGridEditEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L112) + +Represents event arguments related to grid editing. +The event is cancelable +It contains information about the row and the column, as well as the old and nwe value of the element/cell + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md) + +## Extended by + +- [`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### cellID? + +> `optional` **cellID?**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L56) + +#### columnID + +> **columnID**: `any` + +#### rowID + +> **rowID**: `any` + +#### rowIndex + +> **rowIndex**: `number` + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`cellID`](IGridEditDoneEventArgs.md#cellid) + +*** + +### column? + +> `optional` **column?**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L87) + +Optional +Represents the column information of the edited cell + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`column`](IGridEditDoneEventArgs.md#column) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L82) + +Optional +Represents the original event, that has triggered the edit + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`event`](IGridEditDoneEventArgs.md#event) + +*** + +### isAddRow? + +> `optional` **isAddRow?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L97) + +Optional +Indicates if the editing consists of adding a new row + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`isAddRow`](IGridEditDoneEventArgs.md#isaddrow) + +*** + +### newValue? + +> `optional` **newValue?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L76) + +Optional +Represents the value, that is being entered in the edited cell +When there is no `newValue` and the event has ended, the value of the cell returns to the `oldValue` + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`newValue`](IGridEditDoneEventArgs.md#newvalue) + +*** + +### oldValue + +> **oldValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L70) + +Represents the previous (before editing) value of the edited cell. +It's used when the event has been stopped/exited. + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`oldValue`](IGridEditDoneEventArgs.md#oldvalue) + +*** + +### owner? + +> `optional` **owner?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L92) + +Optional +Represents the grid instance that owns the edit event. + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`owner`](IGridEditDoneEventArgs.md#owner) + +*** + +### ~~primaryKey~~ + +> **primaryKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L54) + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`primaryKey`](IGridEditDoneEventArgs.md#primarykey) + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L65) + +`rowData` represents the updated/committed data of the row after the edit (newValue) +The only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`rowData`](IGridEditDoneEventArgs.md#rowdata) + +*** + +### ~~rowID~~ + +> **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L50) + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`rowID`](IGridEditDoneEventArgs.md#rowid) + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L55) + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`rowKey`](IGridEditDoneEventArgs.md#rowkey) + +*** + +### valid? + +> `optional` **valid?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L103) + +Optional +Indicates if the new value would be valid. +It can be set to return the result of the methods for validation of the grid + +#### Inherited from + +[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md).[`valid`](IGridEditDoneEventArgs.md#valid) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridFormGroupCreatedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridFormGroupCreatedEventArgs.md new file mode 100644 index 000000000..d42a9c28b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridFormGroupCreatedEventArgs.md @@ -0,0 +1,23 @@ +# Interface: IGridFormGroupCreatedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L275) + +Interface representing the event arguments when a form group is created in the grid. +- formGroup: The form group that is created. +- owner: The grid instance that owns the form group. + +## Properties + +### formGroup + +> **formGroup**: `FormGroup` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L277) + +*** + +### owner + +> **owner**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L278) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridGroupingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridGroupingStrategy.md new file mode 100644 index 000000000..191bfb9ad --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridGroupingStrategy.md @@ -0,0 +1,86 @@ +# Interface: IGridGroupingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L34) + +Represents a grouping strategy for the grid data, extending the Sorting Strategy interface (contains a sorting method). + +## Extends + +- [`IGridSortingStrategy`](IGridSortingStrategy.md) + +## Methods + +### groupBy() + +> **groupBy**(`data`, `state`, `grid?`, `groupsRecords?`, `fullResult?`): [`IGroupByResult`](IGroupByResult.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L45) + +The method groups the provided data based on the given grouping state and returns the result. +`data`: The array of data to be grouped. Could be of any type. +`state`: The grouping state that defines the grouping settings and expressions. +`grid`: (Optional) The instance of the grid where the grouping is applied. +`groupsRecords`: (Optional) An array that holds the records for each group. +`fullResult`: (Optional) The complete result of grouping including groups and summary data. +Returns an object containing the result of the grouping operation. + +#### Parameters + +##### data + +`any`[] + +##### state + +[`IGroupingState`](IGroupingState.md) + +##### grid? + +`any` + +##### groupsRecords? + +`any`[] + +##### fullResult? + +[`IGroupByResult`](IGroupByResult.md) + +#### Returns + +[`IGroupByResult`](IGroupByResult.md) + +*** + +### sort() + +> **sort**(`data`, `expressions`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L28) + +`data`: The array of data to be sorted. Could be of any type. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +##### grid? + +[`GridTypeBase`](GridTypeBase.md) + +#### Returns + +`any`[] + +#### Inherited from + +[`IGridSortingStrategy`](IGridSortingStrategy.md).[`sort`](IGridSortingStrategy.md#sort) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridKeydownEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridKeydownEventArgs.md new file mode 100644 index 000000000..b069d6028 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridKeydownEventArgs.md @@ -0,0 +1,66 @@ +# Interface: IGridKeydownEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:347](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L347) + +Represents an event, emitted when keydown is triggered over element inside grid's body +This event is fired only if the key combination is supported in the grid. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:360](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L360) + +The event is cancelable +`cancel` returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:354](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L354) + +Represents the original event, that occurred. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### target + +> **target**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:351](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L351) + +Represents the information and details of the object itself + +*** + +### targetType + +> **targetType**: [`GridKeydownTargetType`](../type-aliases/GridKeydownTargetType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:349](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L349) + +The `targetType` represents the type of the targeted object. For example a cell or a row diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridMergeStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridMergeStrategy.md new file mode 100644 index 000000000..1014fc603 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridMergeStrategy.md @@ -0,0 +1,82 @@ +# Interface: IGridMergeStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L14) + +Merge strategy interface. + +## Properties + +### comparer + +> **comparer**: (`prevRecord`, `record`, `field`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L41) + +Function that compares values for merging. Returns true if same, false if different. + +#### Parameters + +##### prevRecord + +`any` + +##### record + +`any` + +##### field + +`string` + +#### Returns + +`boolean` + +*** + +### merge + +> **merge**: (`data`, `field`, `comparer`, `result`, `activeRowIndexes`, `isDate?`, `isTime?`, `grid?`) => `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L20) + +Function that processes merging of the whole data per merged field. +Returns collection where object has reference to the original record and map of the cell merge metadata per field. + +#### Parameters + +##### data + +`any`[] + +##### field + +`string` + +##### comparer + +(`prevRecord`, `currentRecord`, `field`) => `boolean` + +##### result + +`any`[] + +##### activeRowIndexes + +`number`[] + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](GridTypeBase.md) + +#### Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridRowEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridRowEventArgs.md new file mode 100644 index 000000000..beb17a6d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridRowEventArgs.md @@ -0,0 +1,48 @@ +# Interface: IGridRowEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L32) + +Represents an event argument related to grid row interactions. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md) + +## Properties + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L39) + +Represents the original event that occurred +Examples of such events include: selecting, clicking, double clicking, etc. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### row + +> **row**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L34) + +Represents the grid row that triggered the event. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridScrollEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridScrollEventArgs.md new file mode 100644 index 000000000..e54c67023 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridScrollEventArgs.md @@ -0,0 +1,53 @@ +# Interface: IGridScrollEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:452](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L452) + +Event emitted when a grid is scrolled. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### direction + +> **direction**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L454) + +The scroll direction - vertical or horizontal. + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:457](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L457) + +The original browser scroll event. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### scrollPosition + +> **scrollPosition**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:459](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L459) + +The new scroll position diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridSortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridSortingStrategy.md new file mode 100644 index 000000000..bc77069db --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridSortingStrategy.md @@ -0,0 +1,41 @@ +# Interface: IGridSortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L20) + +Represents a sorting strategy for the grid data +Contains a single method sort that sorts the provided data based on the given sorting expressions + +## Extended by + +- [`IGridGroupingStrategy`](IGridGroupingStrategy.md) + +## Methods + +### sort() + +> **sort**(`data`, `expressions`, `grid?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-sorting-strategy.ts#L28) + +`data`: The array of data to be sorted. Could be of any type. +`expressions`: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +`grid`: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +#### Parameters + +##### data + +`any`[] + +##### expressions + +[`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +##### grid? + +[`GridTypeBase`](GridTypeBase.md) + +#### Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridState.md new file mode 100644 index 000000000..229c727e5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridState.md @@ -0,0 +1,131 @@ +# Interface: IGridState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L12) + +## Properties + +### advancedFiltering? + +> `optional` **advancedFiltering?**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L15) + +*** + +### cellSelection? + +> `optional` **cellSelection?**: [`GridSelectionRange`](GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L20) + +*** + +### columns? + +> `optional` **columns?**: [`IColumnState`](IColumnState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L13) + +*** + +### columnSelection? + +> `optional` **columnSelection?**: `string`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L23) + +*** + +### expansion? + +> `optional` **expansion?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L28) + +*** + +### filtering? + +> `optional` **filtering?**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L14) + +*** + +### groupBy? + +> `optional` **groupBy?**: [`IGroupingState`](IGroupingState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L19) + +*** + +### id? + +> `optional` **id?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L30) + +*** + +### moving? + +> `optional` **moving?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L17) + +*** + +### paging? + +> `optional` **paging?**: [`IPagingState`](IPagingState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L16) + +*** + +### pinningConfig? + +> `optional` **pinningConfig?**: [`IPinningConfig`](IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L26) + +*** + +### pivotConfiguration? + +> `optional` **pivotConfiguration?**: [`IPivotConfiguration`](IPivotConfiguration.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L31) + +*** + +### rowIslands? + +> `optional` **rowIslands?**: [`IGridStateCollection`](IGridStateCollection.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L29) + +*** + +### rowPinning? + +> `optional` **rowPinning?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L25) + +*** + +### rowSelection? + +> `optional` **rowSelection?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L22) + +*** + +### sorting? + +> `optional` **sorting?**: [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L18) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridStateCollection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridStateCollection.md new file mode 100644 index 000000000..4272a8d36 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridStateCollection.md @@ -0,0 +1,27 @@ +# Interface: IGridStateCollection + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L35) + +## Properties + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L36) + +*** + +### parentRowID + +> **parentRowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L37) + +*** + +### state + +> **state**: [`IGridState`](IGridState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L38) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridStateOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridStateOptions.md new file mode 100644 index 000000000..de41d9b58 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridStateOptions.md @@ -0,0 +1,123 @@ +# Interface: IGridStateOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L41) + +## Properties + +### advancedFiltering? + +> `optional` **advancedFiltering?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L44) + +*** + +### cellSelection? + +> `optional` **cellSelection?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L48) + +*** + +### columns? + +> `optional` **columns?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L42) + +*** + +### columnSelection? + +> `optional` **columnSelection?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L50) + +*** + +### expansion? + +> `optional` **expansion?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L53) + +*** + +### filtering? + +> `optional` **filtering?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L43) + +*** + +### groupBy? + +> `optional` **groupBy?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L46) + +*** + +### moving? + +> `optional` **moving?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L55) + +*** + +### paging? + +> `optional` **paging?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L47) + +*** + +### pinningConfig? + +> `optional` **pinningConfig?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L52) + +*** + +### pivotConfiguration? + +> `optional` **pivotConfiguration?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L56) + +*** + +### rowIslands? + +> `optional` **rowIslands?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L54) + +*** + +### rowPinning? + +> `optional` **rowPinning?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L51) + +*** + +### rowSelection? + +> `optional` **rowSelection?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L49) + +*** + +### sorting? + +> `optional` **sorting?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L45) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridToolbarExportEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridToolbarExportEventArgs.md new file mode 100644 index 000000000..497f23606 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridToolbarExportEventArgs.md @@ -0,0 +1,71 @@ +# Interface: IGridToolbarExportEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:278](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L278) + +Represents the arguments for the grid toolbar export event. +It provides information about the grid instance, exporter service, export options, +and allows the event to be canceled. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:298](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L298) + +`cancel` returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface + +*** + +### exporter + +> **exporter**: [`IgxBaseExporter`](../classes/IgxBaseExporter.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L287) + +The `exporter` is a base service. +The type (an abstract class `IgxBaseExporter`) has it's own properties and methods +It is used to define the format and options of the export, the exported element +and methods for preparing the data from the elements for exporting + +*** + +### grid + +> **grid**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:280](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L280) + +`grid` represents a reference to the instance of the grid te event originated from + +*** + +### options + +> **options**: [`IgxExporterOptionsBase`](../classes/IgxExporterOptionsBase.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L293) + +Represents the different settings, that can be given to an export +The type (an abstract class `IgxExporterOptionsBase`) has properties for column settings +(whether they should be ignored) as well as method for generating a file name + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridValidationState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridValidationState.md new file mode 100644 index 000000000..b24b53323 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridValidationState.md @@ -0,0 +1,28 @@ +# Interface: IGridValidationState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:303](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L303) + +Interface representing the validation state of a grid. +- status: The validation status ('VALID' or 'INVALID'). +- errors: The validation errors if any. + +## Extended by + +- [`IRecordValidationState`](IRecordValidationState.md) +- [`IFieldValidationState`](IFieldValidationState.md) + +## Properties + +### errors? + +> `readonly` `optional` **errors?**: `ValidationErrors` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:305](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L305) + +*** + +### status + +> `readonly` **status**: [`ValidationStatus`](../type-aliases/ValidationStatus.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L304) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridValidationStatusEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridValidationStatusEventArgs.md new file mode 100644 index 000000000..8c0c5c2d0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGridValidationStatusEventArgs.md @@ -0,0 +1,23 @@ +# Interface: IGridValidationStatusEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L286) + +Interface representing the event arguments for the grid validation status change event. +- status: The validation status ('VALID' or 'INVALID'). +- owner: The grid instance that owns the validation state. + +## Properties + +### owner + +> **owner**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:288](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L288) + +*** + +### status + +> **status**: [`ValidationStatus`](../type-aliases/ValidationStatus.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:287](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L287) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByExpandState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByExpandState.md new file mode 100644 index 000000000..42846add3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByExpandState.md @@ -0,0 +1,19 @@ +# Interface: IGroupByExpandState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts#L1) + +## Properties + +### expanded + +> **expanded**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts#L2) + +*** + +### hierarchy + +> **hierarchy**: [`IGroupByKey`](IGroupByKey.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts#L3) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByKey.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByKey.md new file mode 100644 index 000000000..40bdff79c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByKey.md @@ -0,0 +1,19 @@ +# Interface: IGroupByKey + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts#L6) + +## Properties + +### fieldName + +> **fieldName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts#L7) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-expand-state.interface.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByRecord.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByRecord.md new file mode 100644 index 000000000..1ede4676f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByRecord.md @@ -0,0 +1,67 @@ +# Interface: IGroupByRecord + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L10) + +## Properties + +### column? + +> `optional` **column?**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L19) + +*** + +### expression + +> **expression**: [`ISortingExpression`](ISortingExpression.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L11) + +*** + +### groupParent + +> **groupParent**: `IGroupByRecord` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L16) + +*** + +### groups? + +> `optional` **groups?**: `IGroupByRecord`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L17) + +*** + +### height + +> **height**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L18) + +*** + +### level + +> **level**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L12) + +*** + +### records + +> **records**: `GroupedRecords` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L14) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-record.interface.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByResult.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByResult.md new file mode 100644 index 000000000..d985b72d0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupByResult.md @@ -0,0 +1,19 @@ +# Interface: IGroupByResult + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts#L3) + +## Properties + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts#L4) + +*** + +### metadata + +> **metadata**: [`IGroupByRecord`](IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grouping-result.interface.ts#L5) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingDoneEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingDoneEventArgs.md new file mode 100644 index 000000000..85d3d9308 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingDoneEventArgs.md @@ -0,0 +1,45 @@ +# Interface: IGroupingDoneEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L67) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### expressions + +> **expressions**: [`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:68](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L68) + +*** + +### groupedColumns + +> **groupedColumns**: [`IgxColumnComponent`](../classes/IgxColumnComponent.md) \| [`IgxColumnComponent`](../classes/IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L69) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### ungroupedColumns + +> **ungroupedColumns**: [`IgxColumnComponent`](../classes/IgxColumnComponent.md) \| [`IgxColumnComponent`](../classes/IgxColumnComponent.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.component.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.component.ts#L70) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingExpression.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingExpression.md new file mode 100644 index 000000000..21485ea98 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingExpression.md @@ -0,0 +1,99 @@ +# Interface: IGroupingExpression + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-expression.interface.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grouping-expression.interface.ts#L5) + +## Extends + +- [`ISortingExpression`](ISortingExpression.md) + +## Properties + +### dir + +> **dir**: [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L17) + +#### Inherited from + +[`ISortingExpression`](ISortingExpression.md).[`dir`](ISortingExpression.md#dir) + +*** + +### fieldName + +> **fieldName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L15) + +#### Inherited from + +[`ISortingExpression`](ISortingExpression.md).[`fieldName`](ISortingExpression.md#fieldname) + +*** + +### groupingComparer? + +> `optional` **groupingComparer?**: (`a`, `b`, `currRec?`, `groupRec?`) => `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grouping-expression.interface.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grouping-expression.interface.ts#L7) + +#### Parameters + +##### a + +`any` + +##### b + +`any` + +##### currRec? + +`any` + +##### groupRec? + +`any` + +#### Returns + +`number` + +*** + +### ignoreCase? + +> `optional` **ignoreCase?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L18) + +#### Inherited from + +[`ISortingExpression`](ISortingExpression.md).[`ignoreCase`](ISortingExpression.md#ignorecase) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`ISortingExpression`](ISortingExpression.md).[`owner`](ISortingExpression.md#owner) + +*** + +### strategy? + +> `optional` **strategy?**: [`ISortingStrategy`](ISortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L19) + +#### Inherited from + +[`ISortingExpression`](ISortingExpression.md).[`strategy`](ISortingExpression.md#strategy) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingState.md new file mode 100644 index 000000000..7e4718134 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IGroupingState.md @@ -0,0 +1,27 @@ +# Interface: IGroupingState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts#L6) + +## Properties + +### defaultExpanded + +> **defaultExpanded**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts#L9) + +*** + +### expansion + +> **expansion**: [`IGroupByExpandState`](IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts#L8) + +*** + +### expressions + +> **expressions**: [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/groupby-state.interface.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IInputResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IInputResourceStrings.md new file mode 100644 index 000000000..dac1a7c00 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IInputResourceStrings.md @@ -0,0 +1,23 @@ +# Interface: IInputResourceStrings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/input-resources.ts#L3) + +## Extended by + +- [`IResourceStrings`](IResourceStrings.md) + +## Properties + +### igx\_input\_file\_placeholder? + +> `optional` **igx\_input\_file\_placeholder?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/input-resources.ts#L5) + +*** + +### igx\_input\_upload\_button? + +> `optional` **igx\_input\_upload\_button?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/input-resources.ts#L4) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IListItemClickEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IListItemClickEventArgs.md new file mode 100644 index 000000000..4c00ce451 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IListItemClickEventArgs.md @@ -0,0 +1,47 @@ +# Interface: IListItemClickEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L50) + +Interface for the listItemClick igxList event arguments + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### direction + +> **direction**: [`IgxListPanState`](../enumerations/IgxListPanState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L53) + +*** + +### event + +> **event**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L52) + +*** + +### item + +> **item**: [`IgxListItemComponent`](../classes/IgxListItemComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L51) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IListItemPanningEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IListItemPanningEventArgs.md new file mode 100644 index 000000000..e25dbf166 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IListItemPanningEventArgs.md @@ -0,0 +1,47 @@ +# Interface: IListItemPanningEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L59) + +Interface for the listItemPanning igxList event arguments + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### direction + +> **direction**: [`IgxListPanState`](../enumerations/IgxListPanState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:61](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L61) + +*** + +### item + +> **item**: [`IgxListItemComponent`](../classes/IgxListItemComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L60) + +*** + +### keepItem + +> **keepItem**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L62) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMaskEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMaskEventArgs.md new file mode 100644 index 000000000..7c4fd98f7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMaskEventArgs.md @@ -0,0 +1,39 @@ +# Interface: IMaskEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:417](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L417) + +The IgxMaskModule provides the [IgxMaskDirective](../classes/IgxMaskDirective.md) inside your application. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### formattedValue + +> **formattedValue**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:419](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L419) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### rawValue + +> **rawValue**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts#L418) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMergeByResult.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMergeByResult.md new file mode 100644 index 000000000..ffe58d613 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMergeByResult.md @@ -0,0 +1,27 @@ +# Interface: IMergeByResult + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L4) + +## Properties + +### childRecords? + +> `optional` **childRecords?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L7) + +*** + +### root? + +> `optional` **root?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L6) + +*** + +### rowSpan + +> **rowSpan**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/merge-strategy.ts#L5) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMultiRowLayoutNode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMultiRowLayoutNode.md new file mode 100644 index 000000000..e83b78709 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IMultiRowLayoutNode.md @@ -0,0 +1,43 @@ +# Interface: IMultiRowLayoutNode + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L54) + +## Properties + +### colEnd + +> **colEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L58) + +*** + +### colStart + +> **colStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L56) + +*** + +### columnVisibleIndex + +> **columnVisibleIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L59) + +*** + +### rowEnd + +> **rowEnd**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L57) + +*** + +### rowStart + +> **rowStart**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L55) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPageCancellableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPageCancellableEventArgs.md new file mode 100644 index 000000000..e105a9374 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPageCancellableEventArgs.md @@ -0,0 +1,37 @@ +# Interface: IPageCancellableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L9) + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### current + +> **current**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L10) + +*** + +### next + +> **next**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPageEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPageEventArgs.md new file mode 100644 index 000000000..08f18f44e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPageEventArgs.md @@ -0,0 +1,37 @@ +# Interface: IPageEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L4) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### current + +> **current**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L6) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### previous + +> **previous**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/paginator-interfaces.ts#L5) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPagingState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPagingState.md new file mode 100644 index 000000000..eaea2f17d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPagingState.md @@ -0,0 +1,39 @@ +# Interface: IPagingState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L9) + +## Properties + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L10) + +*** + +### metadata? + +> `optional` **metadata?**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L13) + +#### countPages + +> **countPages**: `number` + +#### countRecords + +> **countRecords**: `number` + +#### error + +> **error**: [`PagingError`](../enumerations/PagingError.md) + +*** + +### recordsPerPage + +> **recordsPerPage**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/paging-state.interface.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPanStateChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPanStateChangeEventArgs.md new file mode 100644 index 000000000..31290b387 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPanStateChangeEventArgs.md @@ -0,0 +1,47 @@ +# Interface: IPanStateChangeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L41) + +Interface for the panStateChange igxList event arguments + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### item + +> **item**: [`IgxListItemComponent`](../classes/IgxListItemComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L44) + +*** + +### newState + +> **newState**: [`IgxListPanState`](../enumerations/IgxListPanState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L43) + +*** + +### oldState + +> **oldState**: [`IgxListPanState`](../enumerations/IgxListPanState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/list.component.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/list.component.ts#L42) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPathSegment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPathSegment.md new file mode 100644 index 000000000..475c39bd8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPathSegment.md @@ -0,0 +1,37 @@ +# Interface: IPathSegment + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:422](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L422) + +Interface representing a segment of a path in a hierarchical grid. + +## Properties + +### ~~rowID~~ + +> **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L427) + +The unique identifier of the row within the segment. + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +*** + +### rowIslandKey + +> **rowIslandKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:430](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L430) + +The key representing the row's 'hierarchical level. + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:428](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L428) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPdfExportEndedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPdfExportEndedEventArgs.md new file mode 100644 index 000000000..fc10df0ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPdfExportEndedEventArgs.md @@ -0,0 +1,29 @@ +# Interface: IPdfExportEndedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts#L8) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### pdf? + +> `optional` **pdf?**: `jsPDF` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinColumnCancellableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinColumnCancellableEventArgs.md new file mode 100644 index 000000000..aa4e330e3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinColumnCancellableEventArgs.md @@ -0,0 +1,83 @@ +# Interface: IPinColumnCancellableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L165) + +The event arguments before a column's pin state is changed. +`insertAtIndex`specifies at which index in the pinned/unpinned area the column is inserted. +Can be changed in the `columnPin` event. +`isPinned` returns the actual pin state of the column. When pinning/unpinning is successful, +the value of `isPinned` will change accordingly when read in the "-ing" and "-ed" event. + +## Extends + +- [`IPinColumnEventArgs`](IPinColumnEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L145) + +#### Inherited from + +[`IPinColumnEventArgs`](IPinColumnEventArgs.md).[`column`](IPinColumnEventArgs.md#column) + +*** + +### insertAtIndex + +> **insertAtIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L150) + +If pinned, specifies at which index in the pinned area the column is inserted. +If unpinned, specifies at which index in the unpinned area the column is inserted. + +#### Inherited from + +[`IPinColumnEventArgs`](IPinColumnEventArgs.md).[`insertAtIndex`](IPinColumnEventArgs.md#insertatindex) + +*** + +### isPinned + +> **isPinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L155) + +Returns the actual pin state of the column. +If pinning/unpinning is successful, value of `isPinned` will change accordingly when read in the "-ing" and "-ed" event. + +#### Inherited from + +[`IPinColumnEventArgs`](IPinColumnEventArgs.md).[`isPinned`](IPinColumnEventArgs.md#ispinned) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IPinColumnEventArgs`](IPinColumnEventArgs.md).[`owner`](IPinColumnEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinColumnEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinColumnEventArgs.md new file mode 100644 index 000000000..b7871da61 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinColumnEventArgs.md @@ -0,0 +1,59 @@ +# Interface: IPinColumnEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L144) + +The event arguments after a column's pin state is changed. +`insertAtIndex`specifies at which index in the pinned/unpinned area the column was inserted. +`isPinned` returns the actual pin state of the column after the operation completed. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md) + +## Properties + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L145) + +*** + +### insertAtIndex + +> **insertAtIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L150) + +If pinned, specifies at which index in the pinned area the column is inserted. +If unpinned, specifies at which index in the unpinned area the column is inserted. + +*** + +### isPinned + +> **isPinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L155) + +Returns the actual pin state of the column. +If pinning/unpinning is successful, value of `isPinned` will change accordingly when read in the "-ing" and "-ed" event. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinRowEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinRowEventArgs.md new file mode 100644 index 000000000..8faa32e31 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinRowEventArgs.md @@ -0,0 +1,89 @@ +# Interface: IPinRowEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L434) + +Event emitted when a row's pin state changes. +The event is cancelable + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### insertAtIndex? + +> `optional` **insertAtIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L444) + +The index at which to pin the row in the pinned rows collection. + +*** + +### isPinned + +> `readonly` **isPinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:446](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L446) + +Whether or not the row is pinned or unpinned. + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### row? + +> `optional` **row?**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L442) + +*** + +### ~~rowID~~ + +> `readonly` **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:440](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L440) + +The ID of the row, that was pinned/unpinned. +ID is either the primaryKey value or the data record instance. + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +*** + +### rowKey + +> `readonly` **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:441](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L441) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinningConfig.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinningConfig.md new file mode 100644 index 000000000..92721dd1e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPinningConfig.md @@ -0,0 +1,21 @@ +# Interface: IPinningConfig + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1219) + +An interface describing settings for row/column pinning position. + +## Properties + +### columns? + +> `optional` **columns?**: [`ColumnPinningPosition`](../enumerations/ColumnPinningPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1220](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1220) + +*** + +### rows? + +> `optional` **rows?**: [`RowPinningPosition`](../enumerations/RowPinningPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1221) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotAggregator.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotAggregator.md new file mode 100644 index 000000000..c679f4b30 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotAggregator.md @@ -0,0 +1,62 @@ +# Interface: IPivotAggregator + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:62](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L62) + +Interface describing a IPivotAggregator class. +Used for specifying custom aggregator lists. + +## Properties + +### aggregator? + +> `optional` **aggregator?**: (`members`, `data?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L79) + +Aggregator function can be a custom implementation of `PivotAggregation`, or +use predefined ones from `IgxPivotAggregate` and its variants. + +#### Parameters + +##### members + +`any`[] + +##### data? + +`any`[] + +#### Returns + +`any` + +*** + +### aggregatorName? + +> `optional` **aggregatorName?**: [`PivotAggregationType`](../type-aliases/PivotAggregationType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L71) + +Aggregation name that will be used from a list of predefined aggregations. +If not set will use the specified aggregator function. + +*** + +### key + +> **key**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L64) + +Aggregation unique key. + +*** + +### label + +> **label**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L66) + +Aggregation label to show in the UI. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotConfiguration.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotConfiguration.md new file mode 100644 index 000000000..9e08ca7ca --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotConfiguration.md @@ -0,0 +1,75 @@ +# Interface: IPivotConfiguration + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:86](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L86) + +Configuration of the pivot grid. + +## Properties + +### columns + +> **columns**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L94) + +A list of the columns. + +*** + +### columnStrategy? + +> `optional` **columnStrategy?**: [`IPivotDimensionStrategy`](IPivotDimensionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L90) + +A strategy to transform the columns. + +*** + +### filters? + +> `optional` **filters?**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L98) + +Dimensions to be displayed in the filter area. + +*** + +### pivotKeys? + +> `optional` **pivotKeys?**: [`IPivotKeys`](IPivotKeys.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L100) + +Pivot data keys used for data generation. Can be used for custom remote scenarios where the data is pre-populated. + +*** + +### rows + +> **rows**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L92) + +A list of the rows. + +*** + +### rowStrategy? + +> `optional` **rowStrategy?**: [`IPivotDimensionStrategy`](IPivotDimensionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L88) + +A strategy to transform the rows. + +*** + +### values + +> **values**: [`IPivotValue`](IPivotValue.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L96) + +A list of the values. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotConfigurationChangedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotConfigurationChangedEventArgs.md new file mode 100644 index 000000000..15887c9e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotConfigurationChangedEventArgs.md @@ -0,0 +1,15 @@ +# Interface: IPivotConfigurationChangedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L33) + +Event emitted when pivot configuration is changed. + +## Properties + +### pivotConfiguration + +> **pivotConfiguration**: [`IPivotConfiguration`](IPivotConfiguration.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L35) + +The new configuration. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDateDimensionOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDateDimensionOptions.md new file mode 100644 index 000000000..a3532ab8a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDateDimensionOptions.md @@ -0,0 +1,51 @@ +# Interface: IPivotDateDimensionOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L6) + +## Properties + +### fullDate? + +> `optional` **fullDate?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L16) + +Enabled/Disables dimensions for the full date provided + +*** + +### months? + +> `optional` **months?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L14) + +Enables/Disables dimensions per month from provided periods. + +*** + +### quarters? + +> `optional` **quarters?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L12) + +*** + +### total? + +> `optional` **total?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L8) + +Enables/Disables total value of all periods. + +*** + +### years? + +> `optional` **years?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts#L10) + +Enables/Disables dimensions per year from provided periods. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimension.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimension.md new file mode 100644 index 000000000..80a648211 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimension.md @@ -0,0 +1,133 @@ +# Interface: IPivotDimension + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L108) + +Configuration of a pivot dimension. + +## Properties + +### childLevel? + +> `optional` **childLevel?**: `IPivotDimension` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L110) + +Allows defining a hierarchy when multiple sub groups need to be extracted from single member. + +*** + +### dataType? + +> `optional` **dataType?**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L135) + +The dataType of the related data field. + +*** + +### displayName? + +> `optional` **displayName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L119) + +Display name to show instead of the field name of this value. * + +*** + +### enabled + +> **enabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:121](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L121) + +Enables/Disables a particular dimension from pivot structure. + +*** + +### filter? + +> `optional` **filter?**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L125) + +A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe. + +*** + +### horizontalSummary? + +> `optional` **horizontalSummary?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L142) + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L139) + +Level of the dimension. + +*** + +### memberFunction? + +> `optional` **memberFunction?**: (`data`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L117) + +Function that extracts the value + +#### Parameters + +##### data + +`any` + +#### Returns + +`any` + +*** + +### memberName + +> **memberName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L112) + +Unique member to extract related data field value or the result of the memberFunction. + +*** + +### sortable? + +> `optional` **sortable?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L127) + +Enable/disable sorting for a particular dimension. True by default. + +*** + +### sortDirection? + +> `optional` **sortDirection?**: [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L131) + +The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension. + +*** + +### width? + +> `optional` **width?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:137](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L137) + +The width of the dimension cells to be rendered.Can be pixel, % or "auto". diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimensionData.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimensionData.md new file mode 100644 index 000000000..f0ca19555 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimensionData.md @@ -0,0 +1,46 @@ +# Interface: IPivotDimensionData + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:238](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L238) + +Interface describing the pivot dimension data. +Contains additional information needed to render dimension headers. + +## Properties + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:240](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L240) + +Associated column definition. + +*** + +### dimension + +> **dimension**: [`IPivotDimension`](IPivotDimension.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:242](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L242) + +Associated dimension definition. + +*** + +### isChild? + +> `optional` **isChild?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L246) + +Whether this a child dimension. + +*** + +### prevDimensions + +> **prevDimensions**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:244](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L244) + +List of previous dimension groups. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimensionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimensionStrategy.md new file mode 100644 index 000000000..0b3517f7e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotDimensionStrategy.md @@ -0,0 +1,40 @@ +# Interface: IPivotDimensionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L42) + +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +## Methods + +### process() + +> **process**(`collection`, `dimensions`, `values`, `cloneStrategy`, `pivotKeys?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L44) + +#### Parameters + +##### collection + +`any` + +##### dimensions + +[`IPivotDimension`](IPivotDimension.md)[] + +##### values + +[`IPivotValue`](IPivotValue.md)[] + +##### cloneStrategy + +[`IDataCloneStrategy`](IDataCloneStrategy.md) + +##### pivotKeys? + +[`IPivotKeys`](IPivotKeys.md) + +#### Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridColumn.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridColumn.md new file mode 100644 index 000000000..3ec23d29f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridColumn.md @@ -0,0 +1,42 @@ +# Interface: IPivotGridColumn + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L178) + +Interface describing the Pivot column data. + Contains information on the related column dimensions and their values. + +## Properties + +### dimensions + +> **dimensions**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L184) + +List of dimensions associated with the column.* + +*** + +### dimensionValues + +> **dimensionValues**: `Map`\<`string`, `string`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L182) + +Gets/Sets the group value associated with the related column dimension by its memberName. * + +*** + +### field + +> **field**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L179) + +*** + +### value + +> **value**: [`IPivotValue`](IPivotValue.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:185](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L185) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridGroupRecord.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridGroupRecord.md new file mode 100644 index 000000000..81fddf949 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridGroupRecord.md @@ -0,0 +1,135 @@ +# Interface: IPivotGridGroupRecord + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:284](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L284) + +## Extends + +- [`IPivotGridRecord`](IPivotGridRecord.md) + +## Properties + +### aggregationValues + +> **aggregationValues**: `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L268) + +Gets/Sets the aggregation value associated with the value path. Value path depends on configured column dimension hierarchy and values.* + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`aggregationValues`](IPivotGridRecord.md#aggregationvalues) + +*** + +### children? + +> `optional` **children?**: `Map`\<`string`, [`IPivotGridRecord`](IPivotGridRecord.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:271](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L271) + +List of children records in case any row dimension member contain a hierarchy. Each dimension member contains its own hierarchy, which you can get by its memberName. * + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`children`](IPivotGridRecord.md#children) + +*** + +### dataIndex? + +> `optional` **dataIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L281) + +The index of the record in the total view + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`dataIndex`](IPivotGridRecord.md#dataindex) + +*** + +### dimensions + +> **dimensions**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L277) + +List of dimensions associated with the record.* + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`dimensions`](IPivotGridRecord.md#dimensions) + +*** + +### dimensionValues + +> **dimensionValues**: `Map`\<`string`, `string`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L265) + +Gets/Sets the group value associated with the related row dimension by its memberName. * + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`dimensionValues`](IPivotGridRecord.md#dimensionvalues) + +*** + +### height? + +> `optional` **height?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:285](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L285) + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L275) + +Record level* + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`level`](IPivotGridRecord.md#level) + +*** + +### records? + +> `optional` **records?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L273) + +List of original data records associated with the current pivoted data. * + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`records`](IPivotGridRecord.md#records) + +*** + +### rowSpan? + +> `optional` **rowSpan?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:286](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L286) + +*** + +### totalRecordDimensionName? + +> `optional` **totalRecordDimensionName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L279) + +If set, it specifies the name of the dimension, that has total record enabled. + +#### Inherited from + +[`IPivotGridRecord`](IPivotGridRecord.md).[`totalRecordDimensionName`](IPivotGridRecord.md#totalrecorddimensionname) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridHorizontalGroup.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridHorizontalGroup.md new file mode 100644 index 000000000..e737554a8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridHorizontalGroup.md @@ -0,0 +1,67 @@ +# Interface: IPivotGridHorizontalGroup + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:289](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L289) + +## Properties + +### colSpan? + +> `optional` **colSpan?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:297](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L297) + +*** + +### colStart? + +> `optional` **colStart?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:296](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L296) + +*** + +### dimensions? + +> `optional` **dimensions?**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:292](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L292) + +*** + +### records? + +> `optional` **records?**: [`IPivotGridRecord`](IPivotGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:293](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L293) + +*** + +### rootDimension? + +> `optional` **rootDimension?**: [`IPivotDimension`](IPivotDimension.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:291](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L291) + +*** + +### rowSpan? + +> `optional` **rowSpan?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:295](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L295) + +*** + +### rowStart? + +> `optional` **rowStart?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:294](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L294) + +*** + +### value? + +> `optional` **value?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:290](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L290) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridRecord.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridRecord.md new file mode 100644 index 000000000..6eb71acd3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotGridRecord.md @@ -0,0 +1,87 @@ +# Interface: IPivotGridRecord + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L262) + +## Extended by + +- [`IPivotGridGroupRecord`](IPivotGridGroupRecord.md) + +## Properties + +### aggregationValues + +> **aggregationValues**: `Map`\<`string`, `any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L268) + +Gets/Sets the aggregation value associated with the value path. Value path depends on configured column dimension hierarchy and values.* + +*** + +### children? + +> `optional` **children?**: `Map`\<`string`, `IPivotGridRecord`[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:271](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L271) + +List of children records in case any row dimension member contain a hierarchy. Each dimension member contains its own hierarchy, which you can get by its memberName. * + +*** + +### dataIndex? + +> `optional` **dataIndex?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:281](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L281) + +The index of the record in the total view + +*** + +### dimensions + +> **dimensions**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:277](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L277) + +List of dimensions associated with the record.* + +*** + +### dimensionValues + +> **dimensionValues**: `Map`\<`string`, `string`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:265](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L265) + +Gets/Sets the group value associated with the related row dimension by its memberName. * + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:275](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L275) + +Record level* + +*** + +### records? + +> `optional` **records?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:273](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L273) + +List of original data records associated with the current pivoted data. * + +*** + +### totalRecordDimensionName? + +> `optional` **totalRecordDimensionName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:279](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L279) + +If set, it specifies the name of the dimension, that has total record enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotKeys.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotKeys.md new file mode 100644 index 000000000..6d87a94bf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotKeys.md @@ -0,0 +1,66 @@ +# Interface: IPivotKeys + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L192) + +Interface describing the Pivot data keys used for data generation. + Can be used for custom remote scenarios where the data is pre-populated. + +## Properties + +### aggregations + +> **aggregations**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L198) + +Field that stores aggregation values. + +*** + +### children + +> **children**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:194](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L194) + +Field that stores children for hierarchy building. + +*** + +### columnDimensionSeparator + +> **columnDimensionSeparator**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:202](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L202) + +Separator used when generating the unique column field values. + +*** + +### level + +> **level**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L200) + +Field that stores dimension level based on its hierarchy. + +*** + +### records + +> **records**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L196) + +Field that stores reference to the original data records. + +*** + +### rowDimensionSeparator + +> **rowDimensionSeparator**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:204](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L204) + +Separator used when generating the unique row field values. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotUISettings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotUISettings.md new file mode 100644 index 000000000..c67ca2350 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotUISettings.md @@ -0,0 +1,35 @@ +# Interface: IPivotUISettings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:226](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L226) + +## Properties + +### horizontalSummariesPosition? + +> `optional` **horizontalSummariesPosition?**: [`PivotSummaryPosition`](../enumerations/PivotSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:230](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L230) + +*** + +### rowLayout? + +> `optional` **rowLayout?**: [`PivotRowLayoutType`](../enumerations/PivotRowLayoutType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:229](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L229) + +*** + +### showConfiguration? + +> `optional` **showConfiguration?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:227](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L227) + +*** + +### showRowHeaders? + +> `optional` **showRowHeaders?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L228) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotValue.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotValue.md new file mode 100644 index 000000000..87fed7e51 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPivotValue.md @@ -0,0 +1,103 @@ +# Interface: IPivotValue + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L149) + +Configuration of a pivot value aggregation. + +## Properties + +### aggregate + +> **aggregate**: [`IPivotAggregator`](IPivotAggregator.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L157) + +Active aggregator definition with key, label and aggregator. + +*** + +### aggregateList? + +> `optional` **aggregateList?**: [`IPivotAggregator`](IPivotAggregator.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:161](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L161) + +List of aggregates to show in aggregate drop-down. + +*** + +### dataType? + +> `optional` **dataType?**: `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L167) + +Enables a data type specific template of the cells + +*** + +### displayName? + +> `optional` **displayName?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L153) + +Display name to show instead of member for the column header of this value. * + +*** + +### enabled + +> **enabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L163) + +Enables/Disables a particular value from pivot aggregation. + +*** + +### formatter? + +> `optional` **formatter?**: (`value`, `rowData?`, `columnData?`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L172) + +Applies display format to cell values. + +#### Parameters + +##### value + +`any` + +##### rowData? + +[`IPivotGridRecord`](IPivotGridRecord.md) + +##### columnData? + +[`IPivotGridColumn`](IPivotGridColumn.md) + +#### Returns + +`any` + +*** + +### member + +> **member**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:151](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L151) + +Unique member to extract related data field value for aggregations. + +*** + +### styles? + +> `optional` **styles?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L165) + +Allow conditionally styling of the IgxPivotGrid cells. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPositionStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPositionStrategy.md new file mode 100644 index 000000000..8ecf4ca1e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IPositionStrategy.md @@ -0,0 +1,82 @@ +# Interface: IPositionStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts#L7) + +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-position) +Position strategies determine where to display the component in the provided IgxOverlayService. + +## Properties + +### settings + +> **settings**: [`PositionSettings`](PositionSettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts#L11) + +PositionSettings to use when position the component in the overlay + +## Methods + +### clone() + +> **clone**(): `IPositionStrategy` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts#L34) + +Clone the strategy instance. +```typescript +settings.positionStrategy.clone(); +``` + +#### Returns + +`IPositionStrategy` + +*** + +### position() + +> **position**(`contentElement`, `size?`, `document?`, `initialCall?`, `target?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/position/IPositionStrategy.ts#L26) + +Position the element based on the PositionStrategy implementing this interface. + +#### Parameters + +##### contentElement + +`HTMLElement` + +The HTML element to be positioned + +##### size? + +[`Size`](Size.md) + +Size of the element + +##### document? + +`Document` + +reference to the Document object + +##### initialCall? + +`boolean` + +should be true if this is the initial call to the method + +##### target? + +`HTMLElement` \| [`Point`](../classes/Point.md) + +attaching target for the component to show +```typescript +settings.positionStrategy.position(content, size, document, true); +``` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRangeSliderValue.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRangeSliderValue.md new file mode 100644 index 000000000..ba9076a3c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRangeSliderValue.md @@ -0,0 +1,19 @@ +# Interface: IRangeSliderValue + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L48) + +## Properties + +### lower + +> **lower**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L49) + +*** + +### upper + +> **upper**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L50) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRecordValidationState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRecordValidationState.md new file mode 100644 index 000000000..87adcea22 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRecordValidationState.md @@ -0,0 +1,51 @@ +# Interface: IRecordValidationState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:313](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L313) + +Interface representing the validation state of a record in the grid. +- `key`: The unique identifier of the record. +- `fields`: An array of the validation state of individual fields in the record. + +## Extends + +- [`IGridValidationState`](IGridValidationState.md) + +## Properties + +### errors? + +> `readonly` `optional` **errors?**: `ValidationErrors` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:305](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L305) + +#### Inherited from + +[`IGridValidationState`](IGridValidationState.md).[`errors`](IGridValidationState.md#errors) + +*** + +### fields + +> **fields**: [`IFieldValidationState`](IFieldValidationState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:315](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L315) + +*** + +### key + +> **key**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:314](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L314) + +*** + +### status + +> `readonly` **status**: [`ValidationStatus`](../type-aliases/ValidationStatus.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:304](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L304) + +#### Inherited from + +[`IGridValidationState`](IGridValidationState.md).[`status`](IGridValidationState.md#status) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IResourceStrings.md new file mode 100644 index 000000000..b465ef896 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IResourceStrings.md @@ -0,0 +1,31 @@ +# Interface: IResourceStrings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/resources.ts#L26) + +## Extends + +- [`IGridResourceStrings`](../type-aliases/IGridResourceStrings.md).[`ITimePickerResourceStrings`](../type-aliases/ITimePickerResourceStrings.md).[`ICalendarResourceStrings`](../type-aliases/ICalendarResourceStrings.md).[`ICarouselResourceStrings`](../type-aliases/ICarouselResourceStrings.md).[`IChipResourceStrings`](../type-aliases/IChipResourceStrings.md).[`IComboResourceStrings`](../type-aliases/IComboResourceStrings.md).[`IInputResourceStrings`](IInputResourceStrings.md).[`IDatePickerResourceStrings`](../type-aliases/IDatePickerResourceStrings.md).[`IDateRangePickerResourceStrings`](../type-aliases/IDateRangePickerResourceStrings.md).[`IListResourceStrings`](../type-aliases/IListResourceStrings.md).[`IPaginatorResourceStrings`](../type-aliases/IPaginatorResourceStrings.md).[`ITreeResourceStrings`](../type-aliases/ITreeResourceStrings.md).[`IActionStripResourceStrings`](../type-aliases/IActionStripResourceStrings.md).[`IQueryBuilderResourceStrings`](../type-aliases/IQueryBuilderResourceStrings.md).[`IBannerResourceStrings`](../type-aliases/IBannerResourceStrings.md) + +## Properties + +### igx\_input\_file\_placeholder? + +> `optional` **igx\_input\_file\_placeholder?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/input-resources.ts#L5) + +#### Inherited from + +[`IInputResourceStrings`](IInputResourceStrings.md).[`igx_input_file_placeholder`](IInputResourceStrings.md#igx_input_file_placeholder) + +*** + +### igx\_input\_upload\_button? + +> `optional` **igx\_input\_upload\_button?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/input-resources.ts#L4) + +#### Inherited from + +[`IInputResourceStrings`](IInputResourceStrings.md).[`igx_input_upload_button`](IInputResourceStrings.md#igx_input_upload_button) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDataCancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDataCancelableEventArgs.md new file mode 100644 index 000000000..b0e6c70e7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDataCancelableEventArgs.md @@ -0,0 +1,230 @@ +# Interface: IRowDataCancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L115) + +Represents event arguments related to events, that can occur for rows in a grid +Example for events: adding, deleting, selection, transaction, etc. + +## Extends + +- [`IRowDataEventArgs`](IRowDataEventArgs.md).[`IGridEditEventArgs`](IGridEditEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`cancel`](IGridEditEventArgs.md#cancel) + +*** + +### ~~cellID?~~ + +> `optional` **cellID?**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L119) + +#### ~~columnID~~ + +> **columnID**: `any` + +#### ~~rowID~~ + +> **rowID**: `any` + +#### ~~rowIndex~~ + +> **rowIndex**: `number` + +#### Deprecated + +#### Overrides + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`cellID`](IGridEditEventArgs.md#cellid) + +*** + +### column? + +> `optional` **column?**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:87](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L87) + +Optional +Represents the column information of the edited cell + +#### Inherited from + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`column`](IGridEditEventArgs.md#column) + +*** + +### ~~data~~ + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L176) + +#### Deprecated + +since version 17.1.0. Use the `rowData` property instead. + +#### Inherited from + +[`IRowDataEventArgs`](IRowDataEventArgs.md).[`data`](IRowDataEventArgs.md#data) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L82) + +Optional +Represents the original event, that has triggered the edit + +#### Inherited from + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`event`](IGridEditEventArgs.md#event) + +*** + +### ~~isAddRow?~~ + +> `optional` **isAddRow?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L135) + +#### Deprecated + +#### Overrides + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`isAddRow`](IGridEditEventArgs.md#isaddrow) + +*** + +### ~~newValue?~~ + +> `optional` **newValue?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:131](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L131) + +#### Deprecated + +#### Overrides + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`newValue`](IGridEditEventArgs.md#newvalue) + +*** + +### ~~oldValue~~ + +> **oldValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:127](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L127) + +#### Deprecated + +#### Overrides + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`oldValue`](IGridEditEventArgs.md#oldvalue) + +*** + +### owner + +> **owner**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L136) + +Represents the grid instance that owns the edit event. + +#### Overrides + +[`IRowDataEventArgs`](IRowDataEventArgs.md).[`owner`](IRowDataEventArgs.md#owner) + +*** + +### ~~primaryKey~~ + +> **primaryKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L183) + +Represents the unique key, the row can be associated with. +Available if `primaryKey` exists + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +#### Inherited from + +[`IRowDataEventArgs`](IRowDataEventArgs.md).[`primaryKey`](IRowDataEventArgs.md#primarykey) + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L177) + +`rowData` represents the updated/committed data of the row after the edit (newValue) +The only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled + +#### Inherited from + +[`IRowDataEventArgs`](IRowDataEventArgs.md).[`rowData`](IRowDataEventArgs.md#rowdata) + +*** + +### ~~rowID~~ + +> **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L50) + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +#### Inherited from + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`rowID`](IGridEditEventArgs.md#rowid) + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L184) + +#### Inherited from + +[`IRowDataEventArgs`](IRowDataEventArgs.md).[`rowKey`](IRowDataEventArgs.md#rowkey) + +*** + +### valid? + +> `optional` **valid?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L103) + +Optional +Indicates if the new value would be valid. +It can be set to return the result of the methods for validation of the grid + +#### Inherited from + +[`IGridEditEventArgs`](IGridEditEventArgs.md).[`valid`](IGridEditEventArgs.md#valid) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDataEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDataEventArgs.md new file mode 100644 index 000000000..78a4ab93d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDataEventArgs.md @@ -0,0 +1,71 @@ +# Interface: IRowDataEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L172) + +Represents event arguments related to events, that can occur for rows in a grid +Example for events: adding, deleting, selection, transaction, etc. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md) + +## Properties + +### ~~data~~ + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L176) + +#### Deprecated + +since version 17.1.0. Use the `rowData` property instead. + +*** + +### owner + +> **owner**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L187) + +Represents the grid instance that owns the edit event. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### ~~primaryKey~~ + +> **primaryKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:183](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L183) + +Represents the unique key, the row can be associated with. +Available if `primaryKey` exists + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L177) + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L184) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDragEndEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDragEndEventArgs.md new file mode 100644 index 000000000..4b19ae8d5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDragEndEventArgs.md @@ -0,0 +1,63 @@ +# Interface: IRowDragEndEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:377](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L377) + +Emitted when a dragging operation is finished (when the row is dropped) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### animation + +> **animation**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:386](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L386) + +`animation` returns whether the event is animated + +*** + +### dragData + +> **dragData**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:381](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L381) + +Represents the information of the row that is being dragged. + +*** + +### dragDirective + +> **dragDirective**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:379](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L379) + +Represents the drag directive or information associated with the drag operation + +*** + +### dragElement + +> **dragElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:384](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L384) + +Represents the HTML element itself + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDragStartEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDragStartEventArgs.md new file mode 100644 index 000000000..53b119b97 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowDragStartEventArgs.md @@ -0,0 +1,68 @@ +# Interface: IRowDragStartEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:393](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L393) + +Emitted when a dragging operation is starting (when the row is "picked") +The event is cancelable + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### dragData + +> **dragData**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:397](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L397) + +Represents the information of the row that is being dragged. + +*** + +### dragDirective + +> **dragDirective**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:395](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L395) + +Represents the drag directive or information associated with the drag operation + +*** + +### dragElement + +> **dragElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:400](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L400) + +Represents the HTML element itself + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowExportingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowExportingEventArgs.md new file mode 100644 index 000000000..07657c97a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowExportingEventArgs.md @@ -0,0 +1,56 @@ +# Interface: IRowExportingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L76) + +rowExporting event arguments +this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { +// set args properties here +}) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L90) + +Skip the exporting row when set to true + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### rowData + +> **rowData**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L80) + +Contains the exporting row data + +*** + +### rowIndex + +> **rowIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L85) + +Contains the exporting row index diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowSelectionEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowSelectionEventArgs.md new file mode 100644 index 000000000..61e67e8d9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowSelectionEventArgs.md @@ -0,0 +1,102 @@ +# Interface: IRowSelectionEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:213](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L213) + +The event arguments when the selection state of a row is being changed +The event is cancelable + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### added + +> `readonly` **added**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:222](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L222) + +Represents an array of all added rows +Whenever a row has been selected, the array is "refreshed" with the selected rows + +*** + +### allRowsSelected? + +> `readonly` `optional` **allRowsSelected?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:236](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L236) + +Indicates whether or not all rows of the grid have been selected + +*** + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### event? + +> `readonly` `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:234](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L234) + +Represents the original event, that has triggered the selection change +selecting, deselecting + +*** + +### newSelection + +> **newSelection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L217) + +Represents the newly selected rows + +*** + +### oldSelection + +> `readonly` **oldSelection**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:215](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L215) + +Represents an array of rows, that have already been selected + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### removed + +> `readonly` **removed**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:228](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L228) + +Represents an array of all rows, removed from the selection +Whenever a row has been deselected, the array is "refreshed" with the rows, +that have been previously selected, but are no longer diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowToggleEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowToggleEventArgs.md new file mode 100644 index 000000000..d31d293b0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IRowToggleEventArgs.md @@ -0,0 +1,79 @@ +# Interface: IRowToggleEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:404](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L404) + +Represents event arguments related to the row's expansion state being changed in a grid + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:427](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L427) + +The event is cancelable +`cancel` returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:421](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L421) + +Optional +Represents the original event, that has triggered the expansion/collapse + +*** + +### expanded + +> **expanded**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:415](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L415) + +Returns the state of the row after the operation has ended +Indicating whether the row is being expanded (true) or collapsed (false) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### ~~rowID~~ + +> **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L409) + +Represents the ID of the row that emitted the event (which state is changed) + +#### Deprecated + +since version 17.1.0. Use the `rowKey` property instead. + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:410](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L410) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IScrollStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IScrollStrategy.md new file mode 100644 index 000000000..8b1983505 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IScrollStrategy.md @@ -0,0 +1,77 @@ +# Interface: IScrollStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts#L6) + +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll). +Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService. + +## Methods + +### attach() + +> **attach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts#L26) + +Attaches the strategy +```typescript +settings.scrollStrategy.attach(); +``` + +#### Returns + +`void` + +*** + +### detach() + +> **detach**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts#L34) + +Detaches the strategy +```typescript +settings.scrollStrategy.detach(); +``` + +#### Returns + +`void` + +*** + +### initialize() + +> **initialize**(`document`, `overlayService`, `id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/scroll/IScrollStrategy.ts#L18) + +Initializes the strategy. Should be called once + +#### Parameters + +##### document + +`Document` + +reference to Document object. + +##### overlayService + +[`IgxOverlayService`](../classes/IgxOverlayService.md) + +IgxOverlay service to use in this strategy. + +##### id + +`string` + +Unique id for this strategy. +```typescript +settings.scrollStrategy.initialize(document, overlay, id); +``` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISearchInfo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISearchInfo.md new file mode 100644 index 000000000..5659adc5a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISearchInfo.md @@ -0,0 +1,83 @@ +# Interface: ISearchInfo + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:266](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L266) + +## Extends + +- [`IBaseSearchInfo`](IBaseSearchInfo.md) + +## Properties + +### activeMatchIndex + +> **activeMatchIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:268](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L268) + +*** + +### caseSensitive + +> **caseSensitive**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L9) + +#### Inherited from + +[`IBaseSearchInfo`](IBaseSearchInfo.md).[`caseSensitive`](IBaseSearchInfo.md#casesensitive) + +*** + +### content + +> **content**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L12) + +#### Inherited from + +[`IBaseSearchInfo`](IBaseSearchInfo.md).[`content`](IBaseSearchInfo.md#content) + +*** + +### exactMatch + +> **exactMatch**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L10) + +#### Inherited from + +[`IBaseSearchInfo`](IBaseSearchInfo.md).[`exactMatch`](IBaseSearchInfo.md#exactmatch) + +*** + +### matchCount + +> **matchCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L11) + +#### Inherited from + +[`IBaseSearchInfo`](IBaseSearchInfo.md).[`matchCount`](IBaseSearchInfo.md#matchcount) + +*** + +### matchInfoCache + +> **matchInfoCache**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L267) + +*** + +### searchText + +> **searchText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/text-highlight/text-highlight.directive.ts#L8) + +#### Inherited from + +[`IBaseSearchInfo`](IBaseSearchInfo.md).[`searchText`](IBaseSearchInfo.md#searchtext) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionEventArgs.md new file mode 100644 index 000000000..9c057bfd5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionEventArgs.md @@ -0,0 +1,55 @@ +# Interface: ISelectionEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L26) + +Interface that encapsulates selectionChanging event arguments - old selection, new selection and cancel selection. + +## Export + +## Extends + +- [`CancelableEventArgs`](CancelableEventArgs.md).[`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### newSelection + +> **newSelection**: [`IgxDropDownItemBaseDirective`](../classes/IgxDropDownItemBaseDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L28) + +*** + +### oldSelection + +> **oldSelection**: [`IgxDropDownItemBaseDirective`](../classes/IgxDropDownItemBaseDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L27) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionKeyboardState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionKeyboardState.md new file mode 100644 index 000000000..e05ba2a4d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionKeyboardState.md @@ -0,0 +1,49 @@ +# Interface: ISelectionKeyboardState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L65) + +Represents the state of the keyboard when selecting. + +## Extended by + +- [`ISelectionPointerState`](ISelectionPointerState.md) + +## Properties + +### active + +> **active**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L73) + +Indicates whether the selection is currently active (being performed). `False` when resetting the selection. + +*** + +### node + +> **node**: [`ISelectionNode`](ISelectionNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L67) + +The selected node in the grid, if any. Can be null if no node is selected. + +*** + +### range + +> **range**: [`GridSelectionRange`](GridSelectionRange.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L71) + +The range of the selected cells in the grid. Can be null when resetting the selection. + +*** + +### shift + +> **shift**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L69) + +Indicates whether the Shift key is currently pressed during the selection. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionNode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionNode.md new file mode 100644 index 000000000..b0199881e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionNode.md @@ -0,0 +1,48 @@ +# Interface: ISelectionNode + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L32) + +Represents a single selected cell or node in a grid. + +## Properties + +### column + +> **column**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L40) + +The index of the selected column. + +*** + +### isSummaryRow? + +> `optional` **isSummaryRow?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L51) + +(Optional) +Indicates if the selected node is a summary row. +This property is true if the selected row is a summary row; otherwise, it is false. + +*** + +### layout? + +> `optional` **layout?**: [`IMultiRowLayoutNode`](IMultiRowLayoutNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L45) + +(Optional) +Additional layout information for multi-row selection nodes. + +*** + +### row + +> **row**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L36) + +The index of the selected row. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionPointerState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionPointerState.md new file mode 100644 index 000000000..0a28f8925 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISelectionPointerState.md @@ -0,0 +1,86 @@ +# Interface: ISelectionPointerState + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L80) + +Represents the state of the grid selection using pointer interactions (mouse). +Extends ISelectionKeyboardState to include pointer-specific properties. + +## Extends + +- [`ISelectionKeyboardState`](ISelectionKeyboardState.md) + +## Properties + +### active + +> **active**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:73](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L73) + +Indicates whether the selection is currently active (being performed). `False` when resetting the selection. + +#### Inherited from + +[`ISelectionKeyboardState`](ISelectionKeyboardState.md).[`active`](ISelectionKeyboardState.md#active) + +*** + +### ctrl + +> **ctrl**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:82](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L82) + +Indicates whether the Ctrl key is currently pressed during the selection. + +*** + +### node + +> **node**: [`ISelectionNode`](ISelectionNode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L67) + +The selected node in the grid, if any. Can be null if no node is selected. + +#### Inherited from + +[`ISelectionKeyboardState`](ISelectionKeyboardState.md).[`node`](ISelectionKeyboardState.md#node) + +*** + +### primaryButton + +> **primaryButton**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L84) + +Indicates whether the primary pointer button is pressed during the selection (clicked). + +*** + +### range + +> **range**: [`GridSelectionRange`](GridSelectionRange.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:71](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L71) + +The range of the selected cells in the grid. Can be null when resetting the selection. + +#### Inherited from + +[`ISelectionKeyboardState`](ISelectionKeyboardState.md).[`range`](ISelectionKeyboardState.md#range) + +*** + +### shift + +> **shift**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L69) + +Indicates whether the Shift key is currently pressed during the selection. + +#### Inherited from + +[`ISelectionKeyboardState`](ISelectionKeyboardState.md).[`shift`](ISelectionKeyboardState.md#shift) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISimpleComboSelectionChangedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISimpleComboSelectionChangedEventArgs.md new file mode 100644 index 000000000..2597655cf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISimpleComboSelectionChangedEventArgs.md @@ -0,0 +1,77 @@ +# Interface: ISimpleComboSelectionChangedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L17) + +Emitted when the Combo's selection has changed. + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`ISimpleComboSelectionChangingEventArgs`](ISimpleComboSelectionChangingEventArgs.md) + +## Properties + +### displayText + +> **displayText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L27) + +The display text of the combo text box + +*** + +### newSelection + +> **newSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L25) + +The new selection item + +*** + +### newValue + +> **newValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L21) + +The new selection value + +*** + +### oldSelection + +> **oldSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L23) + +The old selection item + +*** + +### oldValue + +> **oldValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L19) + +The old selection value + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISimpleComboSelectionChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISimpleComboSelectionChangingEventArgs.md new file mode 100644 index 000000000..51094234b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISimpleComboSelectionChangingEventArgs.md @@ -0,0 +1,107 @@ +# Interface: ISimpleComboSelectionChangingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L31) + +Emitted when the Combo's selection is changing. + +## Extends + +- [`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### displayText + +> **displayText**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L27) + +The display text of the combo text box + +#### Inherited from + +[`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`displayText`](ISimpleComboSelectionChangedEventArgs.md#displaytext) + +*** + +### newSelection + +> **newSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L25) + +The new selection item + +#### Inherited from + +[`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`newSelection`](ISimpleComboSelectionChangedEventArgs.md#newselection) + +*** + +### newValue + +> **newValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L21) + +The new selection value + +#### Inherited from + +[`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`newValue`](ISimpleComboSelectionChangedEventArgs.md#newvalue) + +*** + +### oldSelection + +> **oldSelection**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L23) + +The old selection item + +#### Inherited from + +[`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`oldSelection`](ISimpleComboSelectionChangedEventArgs.md#oldselection) + +*** + +### oldValue + +> **oldValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts#L19) + +The old selection value + +#### Inherited from + +[`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`oldValue`](ISimpleComboSelectionChangedEventArgs.md#oldvalue) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`ISimpleComboSelectionChangedEventArgs`](ISimpleComboSelectionChangedEventArgs.md).[`owner`](ISimpleComboSelectionChangedEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISizeInfo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISizeInfo.md new file mode 100644 index 000000000..cbf5b5c42 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISizeInfo.md @@ -0,0 +1,19 @@ +# Interface: ISizeInfo + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1100) + +## Properties + +### padding + +> **padding**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1102) + +*** + +### width + +> **width**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1101) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISlideEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISlideEventArgs.md new file mode 100644 index 000000000..80b80e68b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISlideEventArgs.md @@ -0,0 +1,37 @@ +# Interface: ISlideEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:1100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L1100) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### carousel + +> **carousel**: [`IgxCarouselComponent`](../classes/IgxCarouselComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:1101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L1101) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### slide + +> **slide**: [`IgxSlideComponent`](../classes/IgxSlideComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts:1102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts#L1102) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISliderValueChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISliderValueChangeEventArgs.md new file mode 100644 index 000000000..2f0b639db --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISliderValueChangeEventArgs.md @@ -0,0 +1,19 @@ +# Interface: ISliderValueChangeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:53](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L53) + +## Properties + +### oldValue + +> **oldValue**: `number` \| [`IRangeSliderValue`](IRangeSliderValue.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L54) + +*** + +### value + +> **value**: `number` \| [`IRangeSliderValue`](IRangeSliderValue.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L55) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingEventArgs.md new file mode 100644 index 000000000..b1293819e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingEventArgs.md @@ -0,0 +1,64 @@ +# Interface: ISortingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:495](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L495) + +Represents event arguments related to sorting and grouping operations +The event is cancelable + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### groupingExpressions? + +> `optional` **groupingExpressions?**: [`IGroupingExpression`](IGroupingExpression.md) \| [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:509](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L509) + +Optional +Represents the grouping expressions applied to the grid. +It can be a single grouping expression or an array of them +The expression contains information like the sorting expression and criteria by which the elements will be grouped + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### sortingExpressions? + +> `optional` **sortingExpressions?**: [`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/events.ts:502](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/events.ts#L502) + +Optional +Represents the sorting expressions applied to the grid. +It can be a single sorting expression or an array of them +The expression contains information like file name, whether the letter case should be taken into account, etc. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingExpression.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingExpression.md new file mode 100644 index 000000000..6576bc9bb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingExpression.md @@ -0,0 +1,63 @@ +# Interface: ISortingExpression\<T\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L14) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`IGroupingExpression`](IGroupingExpression.md) + +## Type Parameters + +### T + +`T` = `any` + +## Properties + +### dir + +> **dir**: [`SortingDirection`](../enumerations/SortingDirection.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L17) + +*** + +### fieldName + +> **fieldName**: [`KeyOfOrString`](../type-aliases/KeyOfOrString.md)\<`T`, keyof `T`\> & `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L15) + +*** + +### ignoreCase? + +> `optional` **ignoreCase?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L18) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### strategy? + +> `optional` **strategy?**: [`ISortingStrategy`](ISortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingOptions.md new file mode 100644 index 000000000..9d74bd87d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingOptions.md @@ -0,0 +1,11 @@ +# Interface: ISortingOptions + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:54](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L54) + +## Properties + +### mode + +> **mode**: `"single"` \| `"multiple"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L55) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingStrategy.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingStrategy.md new file mode 100644 index 000000000..cf14b7814 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISortingStrategy.md @@ -0,0 +1,49 @@ +# Interface: ISortingStrategy + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L22) + +## Properties + +### sort + +> **sort**: (`data`, `fieldName`, `dir`, `ignoreCase`, `valueResolver`, `isDate?`, `isTime?`, `grid?`) => `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/sorting-strategy.ts#L24) + +#### Parameters + +##### data + +`any`[] + +##### fieldName + +`string` + +##### dir + +[`SortingDirection`](../enumerations/SortingDirection.md) + +##### ignoreCase + +`boolean` + +##### valueResolver + +(`obj`, `key`, `isDate?`) => `any` + +##### isDate? + +`boolean` + +##### isTime? + +`boolean` + +##### grid? + +[`GridTypeBase`](GridTypeBase.md) + +#### Returns + +`any`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISplitterBarResizeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISplitterBarResizeEventArgs.md new file mode 100644 index 000000000..cb001933d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISplitterBarResizeEventArgs.md @@ -0,0 +1,19 @@ +# Interface: ISplitterBarResizeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L14) + +## Properties + +### pane + +> **pane**: [`IgxSplitterPaneComponent`](../classes/IgxSplitterPaneComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L15) + +*** + +### sibling + +> **sibling**: [`IgxSplitterPaneComponent`](../classes/IgxSplitterPaneComponent.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/splitter.component.ts#L16) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IStepChangedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IStepChangedEventArgs.md new file mode 100644 index 000000000..b41ad36ab --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IStepChangedEventArgs.md @@ -0,0 +1,29 @@ +# Interface: IStepChangedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L110) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L112) + +*** + +### owner + +> **owner**: `IgxStepper` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L113) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IStepChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IStepChangingEventArgs.md new file mode 100644 index 000000000..c2018170a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IStepChangingEventArgs.md @@ -0,0 +1,65 @@ +# Interface: IStepChangingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:104](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L104) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`cancel`](IBaseCancelableBrowserEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L424) + +Browser event + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`event`](IBaseCancelableBrowserEventArgs.md#event) + +*** + +### newIndex + +> **newIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L105) + +*** + +### oldIndex + +> **oldIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L106) + +*** + +### owner + +> **owner**: `IgxStepper` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L107) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISummaryExpression.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISummaryExpression.md new file mode 100644 index 000000000..7015015c5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISummaryExpression.md @@ -0,0 +1,19 @@ +# Interface: ISummaryExpression + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L435) + +## Properties + +### customSummary? + +> `optional` **customSummary?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:438](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L438) + +*** + +### fieldName + +> **fieldName**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L436) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISummaryRecord.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISummaryRecord.md new file mode 100644 index 000000000..6b624bd24 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ISummaryRecord.md @@ -0,0 +1,27 @@ +# Interface: ISummaryRecord + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:463](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L463) + +## Properties + +### cellIndentation? + +> `optional` **cellIndentation?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:466](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L466) + +*** + +### max? + +> `optional` **max?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L465) + +*** + +### summaries + +> **summaries**: `Map`\<`string`, [`IgxSummaryResult`](IgxSummaryResult.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L464) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsBaseEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsBaseEventArgs.md new file mode 100644 index 000000000..f88f5ac29 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsBaseEventArgs.md @@ -0,0 +1,26 @@ +# Interface: ITabsBaseEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L12) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`ITabsSelectedIndexChangingEventArgs`](ITabsSelectedIndexChangingEventArgs.md) +- [`ITabsSelectedItemChangeEventArgs`](ITabsSelectedItemChangeEventArgs.md) + +## Properties + +### owner + +> `readonly` **owner**: [`IgxTabsDirective`](../classes/IgxTabsDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L13) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsSelectedIndexChangingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsSelectedIndexChangingEventArgs.md new file mode 100644 index 000000000..01e0ad7b7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsSelectedIndexChangingEventArgs.md @@ -0,0 +1,45 @@ +# Interface: ITabsSelectedIndexChangingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L16) + +## Extends + +- [`ITabsBaseEventArgs`](ITabsBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L17) + +*** + +### newIndex + +> **newIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L19) + +*** + +### oldIndex + +> `readonly` **oldIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L18) + +*** + +### owner + +> `readonly` **owner**: [`IgxTabsDirective`](../classes/IgxTabsDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L13) + +Provides reference to the owner component. + +#### Inherited from + +[`ITabsBaseEventArgs`](ITabsBaseEventArgs.md).[`owner`](ITabsBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsSelectedItemChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsSelectedItemChangeEventArgs.md new file mode 100644 index 000000000..63a5e69c4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITabsSelectedItemChangeEventArgs.md @@ -0,0 +1,37 @@ +# Interface: ITabsSelectedItemChangeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L22) + +## Extends + +- [`ITabsBaseEventArgs`](ITabsBaseEventArgs.md) + +## Properties + +### newItem + +> `readonly` **newItem**: [`IgxTabItemDirective`](../classes/IgxTabItemDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L24) + +*** + +### oldItem + +> `readonly` **oldItem**: [`IgxTabItemDirective`](../classes/IgxTabItemDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L23) + +*** + +### owner + +> `readonly` **owner**: [`IgxTabsDirective`](../classes/IgxTabsDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts#L13) + +Provides reference to the owner component. + +#### Inherited from + +[`ITabsBaseEventArgs`](ITabsBaseEventArgs.md).[`owner`](ITabsBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IToggleView.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IToggleView.md new file mode 100644 index 000000000..53ee5a115 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IToggleView.md @@ -0,0 +1,67 @@ +# Interface: IToggleView + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts#L4) + +Common interface for Components with show and collapse functionality + +## Properties + +### element + +> **element**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts#L5) + +## Methods + +### close() + +> **close**(...`args`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts#L8) + +#### Parameters + +##### args + +...`any`[] + +#### Returns + +`any` + +*** + +### open() + +> **open**(...`args`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts#L7) + +#### Parameters + +##### args + +...`any`[] + +#### Returns + +`any` + +*** + +### toggle() + +> **toggle**(...`args`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/navigation/IToggleView.ts#L9) + +#### Parameters + +##### args + +...`any`[] + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITooltipHideEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITooltipHideEventArgs.md new file mode 100644 index 000000000..ab66f7d03 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITooltipHideEventArgs.md @@ -0,0 +1,45 @@ +# Interface: ITooltipHideEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L24) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L27) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### target + +> **target**: [`IgxTooltipTargetDirective`](../classes/IgxTooltipTargetDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L25) + +*** + +### tooltip + +> **tooltip**: [`IgxTooltipDirective`](../classes/IgxTooltipDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L26) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITooltipShowEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITooltipShowEventArgs.md new file mode 100644 index 000000000..627b0cfb0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITooltipShowEventArgs.md @@ -0,0 +1,45 @@ +# Interface: ITooltipShowEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L19) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L22) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### target + +> **target**: [`IgxTooltipTargetDirective`](../classes/IgxTooltipTargetDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L20) + +*** + +### tooltip + +> **tooltip**: [`IgxTooltipDirective`](../classes/IgxTooltipDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts#L21) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeGridRecord.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeGridRecord.md new file mode 100644 index 000000000..f76ed16cc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeGridRecord.md @@ -0,0 +1,59 @@ +# Interface: ITreeGridRecord + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:401](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L401) + +## Properties + +### children? + +> `optional` **children?**: `ITreeGridRecord`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:404](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L404) + +*** + +### data + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:403](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L403) + +*** + +### expanded? + +> `optional` **expanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:409](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L409) + +*** + +### isFilteredOutParent? + +> `optional` **isFilteredOutParent?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:408](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L408) + +*** + +### key + +> **key**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:402](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L402) + +*** + +### level? + +> `optional` **level?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:407](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L407) + +*** + +### parent? + +> `optional` **parent?**: `ITreeGridRecord` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:406](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L406) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeEditedEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeEditedEvent.md new file mode 100644 index 000000000..d8ecce3ed --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeEditedEvent.md @@ -0,0 +1,37 @@ +# Interface: ITreeNodeEditedEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L88) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### node + +> **node**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L89) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L90) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeEditingEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeEditingEvent.md new file mode 100644 index 000000000..55d7e1d65 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeEditingEvent.md @@ -0,0 +1,65 @@ +# Interface: ITreeNodeEditingEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:83](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L83) + +## Extends + +- [`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`cancel`](IBaseCancelableBrowserEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L424) + +Browser event + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`event`](IBaseCancelableBrowserEventArgs.md#event) + +*** + +### node + +> **node**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:84](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L84) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`owner`](IBaseCancelableBrowserEventArgs.md#owner) + +*** + +### value + +> **value**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:85](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L85) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeSelectionEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeSelectionEvent.md new file mode 100644 index 000000000..861b618e2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeSelectionEvent.md @@ -0,0 +1,81 @@ +# Interface: ITreeNodeSelectionEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L75) + +## Extends + +- [`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md) + +## Properties + +### added + +> **added**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:78](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L78) + +*** + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`cancel`](IBaseCancelableBrowserEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L80) + +Browser event + +#### Overrides + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`event`](IBaseCancelableBrowserEventArgs.md#event) + +*** + +### newSelection + +> **newSelection**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:77](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L77) + +*** + +### oldSelection + +> **oldSelection**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L76) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`owner`](IBaseCancelableBrowserEventArgs.md#owner) + +*** + +### removed + +> **removed**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L79) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeToggledEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeToggledEventArgs.md new file mode 100644 index 000000000..b00014a27 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeToggledEventArgs.md @@ -0,0 +1,29 @@ +# Interface: ITreeNodeToggledEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:97](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L97) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### node + +> **node**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L98) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeTogglingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeTogglingEventArgs.md new file mode 100644 index 000000000..761b7bf51 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ITreeNodeTogglingEventArgs.md @@ -0,0 +1,57 @@ +# Interface: ITreeNodeTogglingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:93](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L93) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md).[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`cancel`](IBaseCancelableBrowserEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:424](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L424) + +Browser event + +#### Inherited from + +[`IBaseCancelableBrowserEventArgs`](IBaseCancelableBrowserEventArgs.md).[`event`](IBaseCancelableBrowserEventArgs.md#event) + +*** + +### node + +> **node**: [`IgxTreeNode`](IgxTreeNode.md)\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L94) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IValuesChange.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IValuesChange.md new file mode 100644 index 000000000..5f23f756b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IValuesChange.md @@ -0,0 +1,15 @@ +# Interface: IValuesChange + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L25) + +Event emitted when values list is changed. + +## Properties + +### values + +> **values**: [`IPivotValue`](IPivotValue.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L27) + +The new list of values. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IViewChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IViewChangeEventArgs.md new file mode 100644 index 000000000..c4eda6271 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IViewChangeEventArgs.md @@ -0,0 +1,41 @@ +# Interface: IViewChangeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:216](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L216) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`ICachedViewLoadedEventArgs`](ICachedViewLoadedEventArgs.md) + +## Properties + +### context + +> **context**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:219](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L219) + +*** + +### owner + +> **owner**: `IgxTemplateOutletDirective` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L217) + +Provides reference to the owner component. + +#### Overrides + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### view + +> **view**: `EmbeddedViewRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/template-outlet/template\_outlet.directive.ts:218](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/template-outlet/template_outlet.directive.ts#L218) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IViewDateChangeEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IViewDateChangeEventArgs.md new file mode 100644 index 000000000..621328c47 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IViewDateChangeEventArgs.md @@ -0,0 +1,19 @@ +# Interface: IViewDateChangeEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L18) + +## Properties + +### currentValue + +> **currentValue**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L20) + +*** + +### previousValue + +> **previousValue**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IconFamily.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IconFamily.md new file mode 100644 index 000000000..8834682b7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IconFamily.md @@ -0,0 +1,19 @@ +# Interface: IconFamily + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:36](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L36) + +## Properties + +### meta + +> **meta**: [`FamilyMeta`](FamilyMeta.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:38](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L38) + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:37](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L37) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IconMeta.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IconMeta.md new file mode 100644 index 000000000..a49516291 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IconMeta.md @@ -0,0 +1,27 @@ +# Interface: IconMeta + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L22) + +## Properties + +### family + +> **family**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L24) + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L23) + +*** + +### type? + +> `optional` **type?**: `IconType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L25) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgcCalendarBaseEventMap.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgcCalendarBaseEventMap.md new file mode 100644 index 000000000..f9ddf8c5c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgcCalendarBaseEventMap.md @@ -0,0 +1,11 @@ +# Interface: IgcCalendarBaseEventMap + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L34) + +## Properties + +### igcChange + +> **igcChange**: `CustomEvent`\<`Date` \| `Date`[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L35) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxAddRowParent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxAddRowParent.md new file mode 100644 index 000000000..b80c2e88e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxAddRowParent.md @@ -0,0 +1,47 @@ +# Interface: IgxAddRowParent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:108](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L108) + +## Properties + +### asChild + +> **asChild**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L115) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L114) + +*** + +### isPinned + +> **isPinned**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:116](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L116) + +*** + +### ~~rowID~~ + +> **rowID**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:112](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L112) + +#### Deprecated + +since version 17.1.0. Use `rowKey` instead + +*** + +### rowKey + +> **rowKey**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/crud.service.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/crud.service.ts#L113) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxCellTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxCellTemplateContext.md new file mode 100644 index 000000000..2ff732b67 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxCellTemplateContext.md @@ -0,0 +1,43 @@ +# Interface: IgxCellTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1158) + +## Properties + +### $implicit + +> **$implicit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1159](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1159) + +*** + +### additionalTemplateContext + +> **additionalTemplateContext**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1160) + +*** + +### cell + +> **cell**: [`CellType`](CellType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1165) + +*** + +### defaultErrorTemplate? + +> `optional` **defaultErrorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1164](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1164) + +*** + +### formControl? + +> `optional` **formControl?**: `FormControl`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1162](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1162) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxColumnTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxColumnTemplateContext.md new file mode 100644 index 000000000..79e6aee95 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxColumnTemplateContext.md @@ -0,0 +1,19 @@ +# Interface: IgxColumnTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1153](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1153) + +## Properties + +### $implicit + +> **$implicit**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1154) + +*** + +### column + +> **column**: [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1155) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxDateTimeEditorEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxDateTimeEditorEventArgs.md new file mode 100644 index 000000000..d5d16fba4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxDateTimeEditorEventArgs.md @@ -0,0 +1,27 @@ +# Interface: IgxDateTimeEditorEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts#L1) + +## Properties + +### newValue? + +> `optional` **newValue?**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts#L3) + +*** + +### oldValue? + +> `readonly` `optional` **oldValue?**: `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts#L2) + +*** + +### userInput + +> `readonly` **userInput**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.common.ts#L4) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxDragCustomEventDetails.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxDragCustomEventDetails.md new file mode 100644 index 000000000..cbff9b311 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxDragCustomEventDetails.md @@ -0,0 +1,51 @@ +# Interface: IgxDragCustomEventDetails + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L43) + +## Properties + +### originalEvent + +> **originalEvent**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:49](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L49) + +*** + +### owner + +> **owner**: [`IgxDragDirective`](../classes/IgxDragDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:48](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L48) + +*** + +### pageX + +> **pageX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L46) + +*** + +### pageY + +> **pageY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L47) + +*** + +### startX + +> **startX**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L44) + +*** + +### startY + +> **startY**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts#L45) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxExpansionPanelBase.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxExpansionPanelBase.md new file mode 100644 index 000000000..d861a3ca3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxExpansionPanelBase.md @@ -0,0 +1,129 @@ +# Interface: IgxExpansionPanelBase + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L5) + +## Properties + +### animationSettings + +> **animationSettings**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L11) + +#### closeAnimation + +> **closeAnimation**: `AnimationReferenceMetadata` + +#### openAnimation + +> **openAnimation**: `AnimationReferenceMetadata` + +*** + +### collapsed + +> **collapsed**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L10) + +*** + +### contentCollapsed + +> **contentCollapsed**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L12) + +*** + +### contentCollapsing + +> **contentCollapsing**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L13) + +*** + +### contentExpanded + +> **contentExpanded**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L14) + +*** + +### contentExpanding + +> **contentExpanding**: `EventEmitter`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L15) + +*** + +### cssClass + +> **cssClass**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L7) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L6) + +## Methods + +### collapse() + +> **collapse**(`evt?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L16) + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`any` + +*** + +### expand() + +> **expand**(`evt?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L17) + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`any` + +*** + +### toggle() + +> **toggle**(`evt?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts#L18) + +#### Parameters + +##### evt? + +`Event` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxExporterEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxExporterEvent.md new file mode 100644 index 000000000..ed013665f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxExporterEvent.md @@ -0,0 +1,35 @@ +# Interface: IgxExporterEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L20) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L25) + +*** + +### exporter + +> **exporter**: [`IgxBaseExporter`](../classes/IgxBaseExporter.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L21) + +*** + +### grid + +> **grid**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L24) + +*** + +### options + +> **options**: [`IgxExporterOptions`](../type-aliases/IgxExporterOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L23) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxFilterItem.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxFilterItem.md new file mode 100644 index 000000000..5b4b266c0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxFilterItem.md @@ -0,0 +1,27 @@ +# Interface: IgxFilterItem + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L32) + +## Properties + +### children? + +> `optional` **children?**: `IgxFilterItem`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L35) + +*** + +### label? + +> `optional` **label?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L34) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/filtering-strategy.ts#L33) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridEmptyTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridEmptyTemplateContext.md new file mode 100644 index 000000000..e2b9069f7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridEmptyTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridEmptyTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1128) + +## Properties + +### $implicit + +> **$implicit**: `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1130) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridHeaderTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridHeaderTemplateContext.md new file mode 100644 index 000000000..d4b0d2893 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridHeaderTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridHeaderTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1149) + +## Properties + +### $implicit + +> **$implicit**: [`HeaderType`](HeaderType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1150) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridMasterDetailContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridMasterDetailContext.md new file mode 100644 index 000000000..debc2e319 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridMasterDetailContext.md @@ -0,0 +1,19 @@ +# Interface: IgxGridMasterDetailContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1105) + +## Properties + +### $implicit + +> **$implicit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1106) + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1107) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridPaginatorTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridPaginatorTemplateContext.md new file mode 100644 index 000000000..bd18276d4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridPaginatorTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridPaginatorTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1210](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1210) + +## Properties + +### $implicit + +> **$implicit**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1211](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1211) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowDragGhostContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowDragGhostContext.md new file mode 100644 index 000000000..bff3f4ed7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowDragGhostContext.md @@ -0,0 +1,27 @@ +# Interface: IgxGridRowDragGhostContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1122) + +## Properties + +### $implicit + +> **$implicit**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1123) + +*** + +### data + +> **data**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1124) + +*** + +### grid + +> **grid**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1125](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1125) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditActionsTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditActionsTemplateContext.md new file mode 100644 index 000000000..451cc4d33 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditActionsTemplateContext.md @@ -0,0 +1,25 @@ +# Interface: IgxGridRowEditActionsTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1143](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1143) + +## Properties + +### $implicit + +> **$implicit**: (`commit`, `event?`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1146) + +#### Parameters + +##### commit + +`boolean` + +##### event? + +`Event` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditTemplateContext.md new file mode 100644 index 000000000..c63a37aeb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditTemplateContext.md @@ -0,0 +1,41 @@ +# Interface: IgxGridRowEditTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1133](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1133) + +## Properties + +### $implicit + +> **$implicit**: `undefined` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1134) + +*** + +### endEdit + +> **endEdit**: (`commit`, `event?`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1136](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1136) + +#### Parameters + +##### commit + +`boolean` + +##### event? + +`Event` + +#### Returns + +`void` + +*** + +### rowChangesCount + +> **rowChangesCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1135) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditTextTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditTextTemplateContext.md new file mode 100644 index 000000000..20301909e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowEditTextTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridRowEditTextTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1139) + +## Properties + +### $implicit + +> **$implicit**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1140](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1140) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowTemplateContext.md new file mode 100644 index 000000000..52e611e5e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridRowTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridRowTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1118](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1118) + +## Properties + +### $implicit + +> **$implicit**: [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1119](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1119) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridTemplateContext.md new file mode 100644 index 000000000..671265451 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1114](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1114) + +## Properties + +### $implicit + +> **$implicit**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1115) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridToolbarTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridToolbarTemplateContext.md new file mode 100644 index 000000000..be616b51c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGridToolbarTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGridToolbarTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L89) + +## Properties + +### $implicit + +> **$implicit**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/common.ts:90](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/common.ts#L90) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowSelectorTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowSelectorTemplateContext.md new file mode 100644 index 000000000..8236fc571 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowSelectorTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGroupByRowSelectorTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1191](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1191) + +## Properties + +### $implicit + +> **$implicit**: [`IgxGroupByRowSelectorTemplateDetails`](IgxGroupByRowSelectorTemplateDetails.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1192) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowSelectorTemplateDetails.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowSelectorTemplateDetails.md new file mode 100644 index 000000000..106188373 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowSelectorTemplateDetails.md @@ -0,0 +1,27 @@ +# Interface: IgxGroupByRowSelectorTemplateDetails + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1186](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1186) + +## Properties + +### groupRow + +> **groupRow**: [`IGroupByRecord`](IGroupByRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1189](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1189) + +*** + +### selectedCount + +> **selectedCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1187](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1187) + +*** + +### totalCount + +> **totalCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1188](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1188) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowTemplateContext.md new file mode 100644 index 000000000..b76734982 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxGroupByRowTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxGroupByRowTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1110) + +## Properties + +### $implicit + +> **$implicit**: [`IGroupByRecord`](IGroupByRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1111](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1111) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxHeadSelectorTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxHeadSelectorTemplateContext.md new file mode 100644 index 000000000..6d8b62dcb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxHeadSelectorTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxHeadSelectorTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1202](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1202) + +## Properties + +### $implicit + +> **$implicit**: [`IgxHeadSelectorTemplateDetails`](IgxHeadSelectorTemplateDetails.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1203](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1203) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxHeadSelectorTemplateDetails.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxHeadSelectorTemplateDetails.md new file mode 100644 index 000000000..26f7cb08e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxHeadSelectorTemplateDetails.md @@ -0,0 +1,43 @@ +# Interface: IgxHeadSelectorTemplateDetails + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1196](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1196) + +## Properties + +### deselectAll? + +> `optional` **deselectAll?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1200) + +#### Returns + +`void` + +*** + +### selectAll? + +> `optional` **selectAll?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1199](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1199) + +#### Returns + +`void` + +*** + +### selectedCount + +> **selectedCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1197](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1197) + +*** + +### totalCount + +> **totalCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1198](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1198) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxIconLoadedEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxIconLoadedEvent.md new file mode 100644 index 000000000..db035b76d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxIconLoadedEvent.md @@ -0,0 +1,36 @@ +# Interface: IgxIconLoadedEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L15) + +Event emitted when a SVG icon is loaded through +a HTTP request. + +## Properties + +### family + +> **family**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L21) + +The font-family for the icon. Defaults to material. + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L17) + +Name of the icon + +*** + +### value? + +> `optional` **value?**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icon.service.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icon.service.ts#L19) + +The actual SVG text, if any diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxPivotGridValueTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxPivotGridValueTemplateContext.md new file mode 100644 index 000000000..e4510dd36 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxPivotGridValueTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxPivotGridValueTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:300](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L300) + +## Properties + +### $implicit + +> **$implicit**: [`IPivotValue`](IPivotValue.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:301](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L301) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxRowSelectorTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxRowSelectorTemplateContext.md new file mode 100644 index 000000000..9ebb064aa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxRowSelectorTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxRowSelectorTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1181](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1181) + +## Properties + +### $implicit + +> **$implicit**: [`IgxRowSelectorTemplateDetails`](IgxRowSelectorTemplateDetails.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1182](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1182) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxRowSelectorTemplateDetails.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxRowSelectorTemplateDetails.md new file mode 100644 index 000000000..bcd778839 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxRowSelectorTemplateDetails.md @@ -0,0 +1,63 @@ +# Interface: IgxRowSelectorTemplateDetails + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1169) + +## Properties + +### deselect? + +> `optional` **deselect?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1178](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1178) + +#### Returns + +`void` + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1170) + +*** + +### key + +> **key**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1175](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1175) + +*** + +### ~~rowID~~ + +> **rowID**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1174) + +#### Deprecated + +in version 15.1.0. Use the `key` property instead. + +*** + +### select? + +> `optional` **select?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1177) + +#### Returns + +`void` + +*** + +### selected + +> **selected**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1176](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1176) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxSummaryResult.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxSummaryResult.md new file mode 100644 index 000000000..98797e948 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxSummaryResult.md @@ -0,0 +1,48 @@ +# Interface: IgxSummaryResult + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L443) + +## Properties + +### defaultFormatting? + +> `optional` **defaultFormatting?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L460) + +Apply default formatting based on the grid column type. +```typescript +const result: IgxSummaryResult = { + key: 'key', + label: 'label', + defaultFormatting: true +} +``` + +#### Memberof + +IgxSummaryResult + +*** + +### key + +> **key**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:444](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L444) + +*** + +### label + +> **label**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:445](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L445) + +*** + +### summaryResult + +> **summaryResult**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L447) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxSummaryTemplateContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxSummaryTemplateContext.md new file mode 100644 index 000000000..733f8f60a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxSummaryTemplateContext.md @@ -0,0 +1,11 @@ +# Interface: IgxSummaryTemplateContext + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1206](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1206) + +## Properties + +### $implicit + +> **$implicit**: [`IgxSummaryResult`](IgxSummaryResult.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1207](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1207) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTimePickerValidationFailedEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTimePickerValidationFailedEventArgs.md new file mode 100644 index 000000000..41c01469d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTimePickerValidationFailedEventArgs.md @@ -0,0 +1,37 @@ +# Interface: IgxTimePickerValidationFailedEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L56) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### currentValue + +> **currentValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L58) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### previousValue + +> **previousValue**: `string` \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:57](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts#L57) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTree.md new file mode 100644 index 000000000..f3a7b1add --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTree.md @@ -0,0 +1,167 @@ +# Interface: IgxTree + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L10) + +## Properties + +### activeNodeChanged + +> **activeNodeChanged**: `EventEmitter`\<[`IgxTreeNode`](IgxTreeNode.md)\<`any`\>\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L31) + +*** + +### animationSettings + +> **animationSettings**: `ToggleAnimationSettings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L19) + +*** + +### expandIndicator + +> **expandIndicator**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L18) + +*** + +### nodeCollapsed + +> **nodeCollapsed**: `EventEmitter`\<[`ITreeNodeToggledEventArgs`](ITreeNodeToggledEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L30) + +*** + +### nodeCollapsing + +> **nodeCollapsing**: `EventEmitter`\<[`ITreeNodeTogglingEventArgs`](ITreeNodeTogglingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L29) + +*** + +### nodeExpanded + +> **nodeExpanded**: `EventEmitter`\<[`ITreeNodeToggledEventArgs`](ITreeNodeToggledEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L28) + +*** + +### nodeExpanding + +> **nodeExpanding**: `EventEmitter`\<[`ITreeNodeTogglingEventArgs`](ITreeNodeTogglingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L27) + +*** + +### nodeSelection + +> **nodeSelection**: `EventEmitter`\<[`ITreeNodeSelectionEvent`](ITreeNodeSelectionEvent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L26) + +*** + +### selection + +> **selection**: [`IgxTreeSelectionType`](../type-aliases/IgxTreeSelectionType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L17) + +*** + +### singleBranchExpand + +> **singleBranchExpand**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L15) + +*** + +### toggleNodeOnClick + +> **toggleNodeOnClick**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L16) + +## Methods + +### collapseAll() + +> **collapseAll**(`nodes`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L33) + +#### Parameters + +##### nodes + +[`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +#### Returns + +`void` + +*** + +### deselectAll() + +> **deselectAll**(`node?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L34) + +#### Parameters + +##### node? + +[`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +#### Returns + +`void` + +*** + +### expandAll() + +> **expandAll**(`nodes`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L32) + +#### Parameters + +##### nodes + +[`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +#### Returns + +`void` + +*** + +### findNodes() + +> **findNodes**(`searchTerm`, `comparer?`): [`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L35) + +#### Parameters + +##### searchTerm + +`any` + +##### comparer? + +[`IgxTreeSearchResolver`](../type-aliases/IgxTreeSearchResolver.md) + +#### Returns + +[`IgxTreeNode`](IgxTreeNode.md)\<`any`\>[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTreeGridAPIService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTreeGridAPIService.md new file mode 100644 index 000000000..fdf465510 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTreeGridAPIService.md @@ -0,0 +1,27 @@ +# Interface: IgxTreeGridAPIService + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:415](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L415) + +Stub type for IgxTreeGridAPIService - minimal interface for typing in core + +## Indexable + +> \[`key`: `string`\]: `any` + +## Methods + +### get\_row\_id() + +> **get\_row\_id**(`rowData`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:416](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L416) + +#### Parameters + +##### rowData + +`any` + +#### Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTreeNode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTreeNode.md new file mode 100644 index 000000000..6f7ea12c2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/IgxTreeNode.md @@ -0,0 +1,133 @@ +# Interface: IgxTreeNode\<T\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:39](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L39) + +## Type Parameters + +### T + +`T` + +## Properties + +### active + +> **active**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L50) + +*** + +### data + +> **data**: `T` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:52](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L52) + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:47](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L47) + +*** + +### expanded + +> **expanded**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L43) + +*** + +### expandedChange + +> **expandedChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:64](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L64) + +*** + +### level + +> **level**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:51](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L51) + +*** + +### loading + +> **loading**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:41](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L41) + +*** + +### parentNode? + +> `optional` **parentNode?**: `IgxTreeNode`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L40) + +*** + +### path + +> **path**: `IgxTreeNode`\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:42](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L42) + +*** + +### selected + +> **selected**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:46](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L46) + +*** + +### selectedChange + +> **selectedChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:63](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L63) + +## Methods + +### collapse() + +> **collapse**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:66](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L66) + +#### Returns + +`void` + +*** + +### expand() + +> **expand**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L65) + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:67](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L67) + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayAnimationEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayAnimationEventArgs.md new file mode 100644 index 000000000..22fcc4806 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayAnimationEventArgs.md @@ -0,0 +1,51 @@ +# Interface: OverlayAnimationEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L163) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Properties + +### animationPlayer + +> **animationPlayer**: [`AnimationPlayer`](AnimationPlayer.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L167) + +Animation player that will play the animation + +*** + +### animationType + +> **animationType**: `"open"` \| `"close"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L169) + +Type of animation to be played. It should be either 'open' or 'close' + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:165](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L165) + +Id of the overlay generated with `attach()` method + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayCancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayCancelableEventArgs.md new file mode 100644 index 000000000..ee5f24e7b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayCancelableEventArgs.md @@ -0,0 +1,105 @@ +# Interface: OverlayCancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L157) + +## Extends + +- [`OverlayEventArgs`](OverlayEventArgs.md).[`CancelableEventArgs`](CancelableEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableEventArgs`](CancelableEventArgs.md).[`cancel`](CancelableEventArgs.md#cancel) + +*** + +### componentRef? + +> `optional` **componentRef?**: `ComponentRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L148) + +Available when `Type<T>` is provided to the `attach()` method and allows access to the created Component instance + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`componentRef`](OverlayEventArgs.md#componentref) + +*** + +### elementRef? + +> `optional` **elementRef?**: `ElementRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L150) + +Will provide the elementRef of the markup that will be displayed in the overlay + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`elementRef`](OverlayEventArgs.md#elementref) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L154) + +Will provide the original keyboard event if closed from ESC or click + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`event`](OverlayEventArgs.md#event) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L146) + +Id of the overlay generated with `attach()` method + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`id`](OverlayEventArgs.md#id) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`owner`](OverlayEventArgs.md#owner) + +*** + +### settings? + +> `optional` **settings?**: [`OverlaySettings`](OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L152) + +Will provide the overlay settings which will be used when the component is attached + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`settings`](OverlayEventArgs.md#settings) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayClosingEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayClosingEventArgs.md new file mode 100644 index 000000000..c2e5809d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayClosingEventArgs.md @@ -0,0 +1,105 @@ +# Interface: OverlayClosingEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:160](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L160) + +## Extends + +- [`OverlayEventArgs`](OverlayEventArgs.md).[`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md).[`cancel`](CancelableBrowserEventArgs.md#cancel) + +*** + +### componentRef? + +> `optional` **componentRef?**: `ComponentRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L148) + +Available when `Type<T>` is provided to the `attach()` method and allows access to the created Component instance + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`componentRef`](OverlayEventArgs.md#componentref) + +*** + +### elementRef? + +> `optional` **elementRef?**: `ElementRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L150) + +Will provide the elementRef of the markup that will be displayed in the overlay + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`elementRef`](OverlayEventArgs.md#elementref) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L154) + +Will provide the original keyboard event if closed from ESC or click + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`event`](OverlayEventArgs.md#event) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L146) + +Id of the overlay generated with `attach()` method + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`id`](OverlayEventArgs.md#id) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`owner`](OverlayEventArgs.md#owner) + +*** + +### settings? + +> `optional` **settings?**: [`OverlaySettings`](OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L152) + +Will provide the overlay settings which will be used when the component is attached + +#### Inherited from + +[`OverlayEventArgs`](OverlayEventArgs.md).[`settings`](OverlayEventArgs.md#settings) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayCreateSettings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayCreateSettings.md new file mode 100644 index 000000000..7f8b4963d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayCreateSettings.md @@ -0,0 +1,115 @@ +# Interface: OverlayCreateSettings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:221](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L221) + +## Extends + +- [`OverlaySettings`](OverlaySettings.md) + +## Properties + +### closeOnEscape? + +> `optional` **closeOnEscape?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L132) + +Set if the overlay should close when `Esc` key is pressed + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`closeOnEscape`](OverlaySettings.md#closeonescape) + +*** + +### closeOnOutsideClick? + +> `optional` **closeOnOutsideClick?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L130) + +Set if the overlay should close on outside click + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`closeOnOutsideClick`](OverlaySettings.md#closeonoutsideclick) + +*** + +### injector? + +> `optional` **injector?**: `Injector` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:225](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L225) + +An `Injector` instance to add in the created component ref's injectors tree. + +*** + +### modal? + +> `optional` **modal?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L128) + +Set if the overlay should be in modal mode + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`modal`](OverlaySettings.md#modal) + +*** + +### outlet? + +> `optional` **outlet?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L135) + +Set the outlet container to attach the overlay to + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`outlet`](OverlaySettings.md#outlet) + +*** + +### positionStrategy? + +> `optional` **positionStrategy?**: [`IPositionStrategy`](IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L124) + +Position strategy to use with these settings + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`positionStrategy`](OverlaySettings.md#positionstrategy) + +*** + +### scrollStrategy? + +> `optional` **scrollStrategy?**: [`IScrollStrategy`](IScrollStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L126) + +Scroll strategy to use with these settings + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`scrollStrategy`](OverlaySettings.md#scrollstrategy) + +*** + +### target? + +> `optional` **target?**: `HTMLElement` \| [`Point`](../classes/Point.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L122) + +Attaching target for the component to show + +#### Inherited from + +[`OverlaySettings`](OverlaySettings.md).[`target`](OverlaySettings.md#target) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayEventArgs.md new file mode 100644 index 000000000..55e0d2f36 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlayEventArgs.md @@ -0,0 +1,76 @@ +# Interface: OverlayEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L144) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`OverlayCancelableEventArgs`](OverlayCancelableEventArgs.md) +- [`OverlayClosingEventArgs`](OverlayClosingEventArgs.md) + +## Properties + +### componentRef? + +> `optional` **componentRef?**: `ComponentRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L148) + +Available when `Type<T>` is provided to the `attach()` method and allows access to the created Component instance + +*** + +### elementRef? + +> `optional` **elementRef?**: `ElementRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:150](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L150) + +Will provide the elementRef of the markup that will be displayed in the overlay + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L154) + +Will provide the original keyboard event if closed from ESC or click + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:146](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L146) + +Id of the overlay generated with `attach()` method + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) + +*** + +### settings? + +> `optional` **settings?**: [`OverlaySettings`](OverlaySettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:152](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L152) + +Will provide the overlay settings which will be used when the component is attached diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlaySettings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlaySettings.md new file mode 100644 index 000000000..b68978e71 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/OverlaySettings.md @@ -0,0 +1,77 @@ +# Interface: OverlaySettings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:120](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L120) + +## Extended by + +- [`OverlayCreateSettings`](OverlayCreateSettings.md) + +## Properties + +### closeOnEscape? + +> `optional` **closeOnEscape?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:132](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L132) + +Set if the overlay should close when `Esc` key is pressed + +*** + +### closeOnOutsideClick? + +> `optional` **closeOnOutsideClick?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L130) + +Set if the overlay should close on outside click + +*** + +### modal? + +> `optional` **modal?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:128](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L128) + +Set if the overlay should be in modal mode + +*** + +### outlet? + +> `optional` **outlet?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:135](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L135) + +Set the outlet container to attach the overlay to + +*** + +### positionStrategy? + +> `optional` **positionStrategy?**: [`IPositionStrategy`](IPositionStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L124) + +Position strategy to use with these settings + +*** + +### scrollStrategy? + +> `optional` **scrollStrategy?**: [`IScrollStrategy`](IScrollStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:126](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L126) + +Scroll strategy to use with these settings + +*** + +### target? + +> `optional` **target?**: `HTMLElement` \| [`Point`](../classes/Point.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:122](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L122) + +Attaching target for the component to show diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PdfUnicodeFont.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PdfUnicodeFont.md new file mode 100644 index 000000000..bb19c3a0d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PdfUnicodeFont.md @@ -0,0 +1,111 @@ +# Interface: PdfUnicodeFont + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L154) + +Font configuration interface for PDF export with Unicode character support. + +This interface defines the structure for providing custom TrueType fonts (TTF) +to the PDF exporter. Custom fonts are required when exporting data that contains +non-Latin characters, as the default Helvetica font only supports basic Latin characters. + +## Remarks + +The font data must be Base64-encoded TTF file contents. Both the normal and optional +bold variants should be from the same font family for consistent styling. + +If the bold variant is not provided, the normal font will be used for both +regular text and headers (which are typically rendered in bold). + +## Examples + +Minimal configuration: +```typescript +const font: PdfUnicodeFont = { + name: 'MyFont', + data: 'AAEAAAATAQAABAAwR0...' // Base64-encoded TTF data +}; +``` + +Full configuration with bold variant: +```typescript +const font: PdfUnicodeFont = { + name: 'MyFont-Regular', + data: 'AAEAAAATAQAABAAwR0...', // Base64-encoded regular TTF + bold: { + name: 'MyFont-Bold', + data: 'BBFAAAAUBQAACAAxS1...' // Base64-encoded bold TTF + } +}; +``` + +## Properties + +### bold? + +> `optional` **bold?**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:192](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L192) + +Optional bold variant of the font for styling headers and emphasized text. + +If provided, this font will be used for table headers and any other text +that should appear in bold. If not provided, the normal font specified +by `data` and `name` will be used for all text, including headers. + +#### data + +> **data**: `string` + +Base64-encoded font data from a bold TrueType Font (TTF) file. + +#### name + +> **name**: `string` + +The font family name for the bold variant. + +This should be different from the regular font name to avoid conflicts +(e.g., 'NotoSans-Bold' vs 'NotoSans'). + +#### Remarks + +For best visual results, use the bold variant from the same font family +as the regular font. + +*** + +### data + +> **data**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:167](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L167) + +Base64-encoded font data from a TrueType Font (TTF) file. + +This should be the complete TTF file contents encoded as a Base64 string. +The font must include glyphs for all characters that may appear in your grid data. + +#### Remarks + +To convert a TTF file to Base64 in Node.js: +```javascript +const base64Data = require('fs').readFileSync('font.ttf').toString('base64'); +``` + +*** + +### name + +> **name**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-options.ts#L179) + +The font family name to register with the PDF library. + +This name is used internally by jsPDF to reference the font. It should be +a simple identifier without spaces (e.g., 'NotoSans', 'ArialUnicode'). + +#### Remarks + +The name does not need to match the actual font's internal name, but using +a descriptive name helps with debugging and maintenance. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PivotGridType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PivotGridType.md new file mode 100644 index 000000000..325fbdf74 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PivotGridType.md @@ -0,0 +1,4772 @@ +# Interface: PivotGridType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1024](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1024) + +An interface describing a Pivot Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from `GridType` + +## Extends + +- [`GridType`](GridType.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### \_baseFontSize? + +> `optional` **\_baseFontSize?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L641) + +The default font size, calculated for each element + +#### Inherited from + +[`GridType`](GridType.md).[`_baseFontSize`](GridType.md#_basefontsize) + +*** + +### \_filteredSortedUnpinnedData + +> **\_filteredSortedUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L694) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredSortedUnpinnedData`](GridType.md#_filteredsortedunpinneddata) + +*** + +### \_filteredUnpinnedData + +> **\_filteredUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L693) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredUnpinnedData`](GridType.md#_filteredunpinneddata) + +*** + +### \_totalRecords + +> **\_totalRecords**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:705](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L705) + +#### Inherited from + +[`GridType`](GridType.md).[`_totalRecords`](GridType.md#_totalrecords) + +*** + +### activeNodeChange + +> **activeNodeChange**: `EventEmitter`\<[`IActiveNodeChangeEventArgs`](IActiveNodeChangeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:818](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L818) + +#### Inherited from + +[`GridType`](GridType.md).[`activeNodeChange`](GridType.md#activenodechange) + +*** + +### advancedFilteringExpressionsTree + +> **advancedFilteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:877](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L877) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTree`](GridType.md#advancedfilteringexpressionstree) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L878) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTreeChange`](GridType.md#advancedfilteringexpressionstreechange) + +*** + +### allDimensions + +> **allDimensions**: [`IPivotDimension`](IPivotDimension.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1034](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1034) + +An array of all dimensions (rows and columns) in the pivot grid. +it includes hierarchical level, filters and sorting, dimensional level, etc. + +*** + +### allowAdvancedFiltering + +> **allowAdvancedFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L872) + +#### Inherited from + +[`GridType`](GridType.md).[`allowAdvancedFiltering`](GridType.md#allowadvancedfiltering) + +*** + +### allowFiltering + +> **allowFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:445](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L445) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Inherited from + +[`GridType`](GridType.md).[`allowFiltering`](GridType.md#allowfiltering) + +*** + +### batchEditing + +> **batchEditing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L881) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditing`](GridType.md#batchediting) + +*** + +### batchEditingChange? + +> `optional` **batchEditingChange?**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:839](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L839) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditingChange`](GridType.md#batcheditingchange) + +*** + +### calcHeight + +> **calcHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:633](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L633) + +CSS styling calculated for an element: calcHeight, calcWidth, outerWidth + +#### Inherited from + +[`GridType`](GridType.md).[`calcHeight`](GridType.md#calcheight) + +*** + +### calcWidth + +> **calcWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L634) + +#### Inherited from + +[`GridType`](GridType.md).[`calcWidth`](GridType.md#calcwidth) + +*** + +### cascadeOnDelete? + +> `optional` **cascadeOnDelete?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:796](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L796) + +#### Inherited from + +[`GridType`](GridType.md).[`cascadeOnDelete`](GridType.md#cascadeondelete) + +*** + +### cdr + +> `readonly` **cdr**: `ChangeDetectorRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L753) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Inherited from + +[`GridType`](GridType.md).[`cdr`](GridType.md#cdr) + +*** + +### cellClick + +> **cellClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:820](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L820) + +#### Inherited from + +[`GridType`](GridType.md).[`cellClick`](GridType.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L849) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEdit`](GridType.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:850](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L850) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditDone`](GridType.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L848) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditEnter`](GridType.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L851) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditExit`](GridType.md#celleditexit) + +*** + +### cellMergeMode + +> **cellMergeMode**: [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L435) + +#### Inherited from + +[`GridType`](GridType.md).[`cellMergeMode`](GridType.md#cellmergemode) + +*** + +### cellSelection + +> **cellSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L774) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`cellSelection`](GridType.md#cellselection) + +*** + +### childDataKey? + +> `optional` **childDataKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L794) + +#### Inherited from + +[`GridType`](GridType.md).[`childDataKey`](GridType.md#childdatakey) + +*** + +### childLayoutKeys? + +> `optional` **childLayoutKeys?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:806](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L806) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutKeys`](GridType.md#childlayoutkeys) + +*** + +### childLayoutList? + +> `optional` **childLayoutList?**: `QueryList`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L807) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutList`](GridType.md#childlayoutlist) + +*** + +### columnInDrag + +> **columnInDrag**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L530) + +Indicates if the column of the grid is in drag mode + +#### Inherited from + +[`GridType`](GridType.md).[`columnInDrag`](GridType.md#columnindrag) + +*** + +### columnList + +> **columnList**: `QueryList`\<[`ColumnType`](ColumnType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L659) + +An unmodifiable list, containing all the columns of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`columnList`](GridType.md#columnlist) + +*** + +### columnMoving + +> **columnMoving**: `EventEmitter`\<[`IColumnMovingEventArgs`](IColumnMovingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:834](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L834) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMoving`](GridType.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `EventEmitter`\<[`IColumnMovingEndEventArgs`](IColumnMovingEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L832) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingEnd`](GridType.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `EventEmitter`\<[`IColumnMovingStartEventArgs`](IColumnMovingStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L835) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingStart`](GridType.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `EventEmitter`\<[`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L836) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPin`](GridType.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `EventEmitter`\<[`IPinColumnEventArgs`](IPinColumnEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L830) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPinned`](GridType.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `EventEmitter`\<[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L831) + +#### Inherited from + +[`GridType`](GridType.md).[`columnResized`](GridType.md#columnresized) + +*** + +### columns + +> **columns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:660](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L660) + +#### Inherited from + +[`GridType`](GridType.md).[`columns`](GridType.md#columns) + +*** + +### columnSelection + +> **columnSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L778) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelection`](GridType.md#columnselection) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `EventEmitter`\<[`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L833) + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelectionChanging`](GridType.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `EventEmitter`\<[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:838](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L838) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanged`](GridType.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `EventEmitter`\<[`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L837) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanging`](GridType.md#columnvisibilitychanging) + +*** + +### columnWidthSetByUser + +> **columnWidthSetByUser**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L630) + +Indicates whether the width of the column is set by the user, or is configured automatically. + +#### Inherited from + +[`GridType`](GridType.md).[`columnWidthSetByUser`](GridType.md#columnwidthsetbyuser) + +*** + +### contextMenu + +> **contextMenu**: `EventEmitter`\<[`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:823](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L823) + +#### Inherited from + +[`GridType`](GridType.md).[`contextMenu`](GridType.md#contextmenu) + +*** + +### currencyPositionLeft + +> **currencyPositionLeft**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L627) + +Indicates whether the currency symbol is positioned to the left of values. + +#### Inherited from + +[`GridType`](GridType.md).[`currencyPositionLeft`](GridType.md#currencypositionleft) + +*** + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L29) + +#### Inherited from + +[`GridType`](GridType.md).[`data`](GridType.md#data) + +*** + +### dataCloneStrategy + +> **dataCloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L475) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Inherited from + +[`GridType`](GridType.md).[`dataCloneStrategy`](GridType.md#dataclonestrategy) + +*** + +### dataRowList + +> **dataRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L656) + +#### Inherited from + +[`GridType`](GridType.md).[`dataRowList`](GridType.md#datarowlist) + +*** + +### dataView + +> **dataView**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:692](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L692) + +#### Inherited from + +[`GridType`](GridType.md).[`dataView`](GridType.md#dataview) + +*** + +### dataWithAddedInTransactionRows + +> **dataWithAddedInTransactionRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:696](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L696) + +#### Inherited from + +[`GridType`](GridType.md).[`dataWithAddedInTransactionRows`](GridType.md#datawithaddedintransactionrows) + +*** + +### defaultRowHeight + +> **defaultRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L639) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultRowHeight`](GridType.md#defaultrowheight) + +*** + +### defaultSummaryHeight + +> **defaultSummaryHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:701](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L701) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultSummaryHeight`](GridType.md#defaultsummaryheight) + +*** + +### dimensionsChange + +> **dimensionsChange**: `EventEmitter`\<[`IDimensionsChange`](IDimensionsChange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1081](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1081) + +Emits an event when the dimensions in the pivot grid change. + +*** + +### dimensionsSortingExpressionsChange + +> **dimensionsSortingExpressionsChange**: `EventEmitter`\<[`ISortingExpression`](ISortingExpression.md)\<`any`\>[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1085](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1085) + +Emits an event when the a dimension is sorted. + +*** + +### disableTransitions + +> **disableTransitions**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L625) + +Indicates whether transitions are disabled for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`disableTransitions`](GridType.md#disabletransitions) + +*** + +### doubleClick + +> **doubleClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L822) + +#### Inherited from + +[`GridType`](GridType.md).[`doubleClick`](GridType.md#doubleclick) + +*** + +### dragIndicatorIconBase + +> **dragIndicatorIconBase**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L623) + +The base drag indicator icon. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconBase`](GridType.md#dragindicatoriconbase) + +*** + +### dragIndicatorIconTemplate + +> **dragIndicatorIconTemplate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L621) + +The template for drag indicator icons. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconTemplate`](GridType.md#dragindicatoricontemplate) + +*** + +### excelStyleFilterMaxHeight + +> **excelStyleFilterMaxHeight**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1089](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1089) + +*** + +### excelStyleFilterMinHeight + +> **excelStyleFilterMinHeight**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1090](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1090) + +*** + +### excelStyleHeaderIconTemplate + +> **excelStyleHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L770) + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`excelStyleHeaderIconTemplate`](GridType.md#excelstyleheadericontemplate) + +*** + +### expansionDepth? + +> `optional` **expansionDepth?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L793) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionDepth`](GridType.md#expansiondepth) + +*** + +### expansionStates + +> **expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:652](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L652) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionStates`](GridType.md#expansionstates) + +*** + +### filteredSortedData + +> **filteredSortedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L695) + +#### Inherited from + +[`GridType`](GridType.md).[`filteredSortedData`](GridType.md#filteredsorteddata) + +*** + +### filtering + +> **filtering**: `EventEmitter`\<[`IFilteringEventArgs`](IFilteringEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:828](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L828) + +#### Inherited from + +[`GridType`](GridType.md).[`filtering`](GridType.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L829) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringDone`](GridType.md#filteringdone) + +*** + +### filteringExpressionsTree + +> **filteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:875](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L875) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTree`](GridType.md#filteringexpressionstree) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:876](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L876) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTreeChange`](GridType.md#filteringexpressionstreechange) + +*** + +### filteringLogic + +> **filteringLogic**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L870) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringLogic`](GridType.md#filteringlogic) + +*** + +### filteringPipeTrigger + +> **filteringPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L460) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringPipeTrigger`](GridType.md#filteringpipetrigger) + +*** + +### filterMode + +> **filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L481) + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Inherited from + +[`GridType`](GridType.md).[`filterMode`](GridType.md#filtermode) + +*** + +### filterStrategy + +> **filterStrategy**: [`IFilteringStrategy`](IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:871](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L871) + +#### Inherited from + +[`GridType`](GridType.md).[`filterStrategy`](GridType.md#filterstrategy) + +*** + +### firstEditableColumnIndex + +> **firstEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:730](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L730) + +#### Inherited from + +[`GridType`](GridType.md).[`firstEditableColumnIndex`](GridType.md#firsteditablecolumnindex) + +*** + +### flatData? + +> `optional` **flatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:790](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L790) + +#### Inherited from + +[`GridType`](GridType.md).[`flatData`](GridType.md#flatdata) + +*** + +### foreignKey? + +> `optional` **foreignKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L795) + +#### Inherited from + +[`GridType`](GridType.md).[`foreignKey`](GridType.md#foreignkey) + +*** + +### formGroupCreated + +> **formGroupCreated**: `EventEmitter`\<[`IGridFormGroupCreatedEventArgs`](IGridFormGroupCreatedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L859) + +#### Inherited from + +[`GridType`](GridType.md).[`formGroupCreated`](GridType.md#formgroupcreated) + +*** + +### getHeaderCellWidth + +> **getHeaderCellWidth**: (`element`) => [`ISizeInfo`](ISizeInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L746) + +Property, that gets the header cell inner width for auto-sizing. + +#### Parameters + +##### element + +`HTMLElement` + +#### Returns + +[`ISizeInfo`](ISizeInfo.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderCellWidth`](GridType.md#getheadercellwidth) + +*** + +### gridAPI + +> `readonly` **gridAPI**: [`GridServiceType`](GridServiceType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:478](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L478) + +Represents the grid service type providing API methods for the grid + +#### Inherited from + +[`GridType`](GridType.md).[`gridAPI`](GridType.md#gridapi) + +*** + +### gridKeydown + +> **gridKeydown**: `EventEmitter`\<[`IGridKeydownEventArgs`](IGridKeydownEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L819) + +#### Inherited from + +[`GridType`](GridType.md).[`gridKeydown`](GridType.md#gridkeydown) + +*** + +### groupByRowSelectorTemplate? + +> `optional` **groupByRowSelectorTemplate?**: `TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](IgxGroupByRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:578](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L578) + +Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupByRowSelectorTemplate`](GridType.md#groupbyrowselectortemplate) + +*** + +### groupingExpansionState? + +> `optional` **groupingExpansionState?**: [`IGroupByExpandState`](IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L882) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpansionState`](GridType.md#groupingexpansionstate) + +*** + +### groupingExpressions? + +> `optional` **groupingExpressions?**: [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:883](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L883) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpressions`](GridType.md#groupingexpressions) + +*** + +### groupingExpressionsChange? + +> `optional` **groupingExpressionsChange?**: `EventEmitter`\<[`IGroupingExpression`](IGroupingExpression.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:884](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L884) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpressionsChange`](GridType.md#groupingexpressionschange) + +*** + +### groupingFlatResult? + +> `optional` **groupingFlatResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L887) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingFlatResult`](GridType.md#groupingflatresult) + +*** + +### groupingMetadata? + +> `optional` **groupingMetadata?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:889](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L889) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingMetadata`](GridType.md#groupingmetadata) + +*** + +### groupingResult? + +> `optional` **groupingResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L888) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingResult`](GridType.md#groupingresult) + +*** + +### groupRowTemplate? + +> `optional` **groupRowTemplate?**: `TemplateRef`\<[`IgxGroupByRowTemplateContext`](IgxGroupByRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L572) + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupRowTemplate`](GridType.md#grouprowtemplate) + +*** + +### groupsExpanded? + +> `optional` **groupsExpanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L885) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsExpanded`](GridType.md#groupsexpanded) + +*** + +### groupsRecords? + +> `readonly` `optional` **groupsRecords?**: [`IGroupByRecord`](IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L886) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsRecords`](GridType.md#groupsrecords) + +*** + +### groupStrategy? + +> `optional` **groupStrategy?**: [`IGridGroupingStrategy`](IGridGroupingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L869) + +#### Inherited from + +[`GridType`](GridType.md).[`groupStrategy`](GridType.md#groupstrategy) + +*** + +### hasChildrenKey? + +> `optional` **hasChildrenKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:799](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L799) + +#### Inherited from + +[`GridType`](GridType.md).[`hasChildrenKey`](GridType.md#haschildrenkey) + +*** + +### hasDetails + +> **hasDetails**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L733) + +#### Inherited from + +[`GridType`](GridType.md).[`hasDetails`](GridType.md#hasdetails) + +*** + +### hasExpandableChildren? + +> `optional` **hasExpandableChildren?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L549) + +Optional +Indicates whether the grid has expandable children (hierarchical and tree grid) + +#### Inherited from + +[`GridType`](GridType.md).[`hasExpandableChildren`](GridType.md#hasexpandablechildren) + +*** + +### hasMultipleValues + +> **hasMultipleValues**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1088](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1088) + +*** + +### hasPinnedRecords + +> **hasPinnedRecords**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L685) + +#### Inherited from + +[`GridType`](GridType.md).[`hasPinnedRecords`](GridType.md#haspinnedrecords) + +*** + +### hasVisibleColumns + +> **hasVisibleColumns**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L544) + +Indicates whether the grid has columns that are shown + +#### Inherited from + +[`GridType`](GridType.md).[`hasVisibleColumns`](GridType.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +> **headerCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L614) + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerCollapsedIndicatorTemplate`](GridType.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +> **headerExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L619) + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerExpandedIndicatorTemplate`](GridType.md#headerexpandedindicatortemplate) + +*** + +### headerFeaturesWidth + +> **headerFeaturesWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:631](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L631) + +#### Inherited from + +[`GridType`](GridType.md).[`headerFeaturesWidth`](GridType.md#headerfeatureswidth) + +*** + +### headSelectorBaseAriaLabel + +> **headSelectorBaseAriaLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L541) + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorBaseAriaLabel`](GridType.md#headselectorbasearialabel) + +*** + +### headSelectorTemplate + +> **headSelectorTemplate**: `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L589) + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorTemplate`](GridType.md#headselectortemplate) + +*** + +### hiddenColumnsCount + +> **hiddenColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L557) + +Represents the count of only the hidden (not visible) columns + +#### Inherited from + +[`GridType`](GridType.md).[`hiddenColumnsCount`](GridType.md#hiddencolumnscount) + +*** + +### highlightedRowID? + +> `optional` **highlightedRowID?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L804) + +#### Inherited from + +[`GridType`](GridType.md).[`highlightedRowID`](GridType.md#highlightedrowid) + +*** + +### iconTemplate? + +> `optional` **iconTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L566) + +Optional +The template for grid icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`iconTemplate`](GridType.md#icontemplate) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L451) + +Represents the unique identifier of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`id`](GridType.md#id) + +*** + +### isCellSelectable + +> **isCellSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:682](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L682) + +Indicates whether cells are selectable in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isCellSelectable`](GridType.md#iscellselectable) + +*** + +### isLoading + +> **isLoading**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L465) + +#### Inherited from + +[`GridType`](GridType.md).[`isLoading`](GridType.md#isloading) + +*** + +### isMultiRowSelectionEnabled + +> **isMultiRowSelectionEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L684) + +Indicates whether it is allowed to select more than one row in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isMultiRowSelectionEnabled`](GridType.md#ismultirowselectionenabled) + +*** + +### isRowPinningToTop + +> **isRowPinningToTop**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L732) + +#### Inherited from + +[`GridType`](GridType.md).[`isRowPinningToTop`](GridType.md#isrowpinningtotop) + +*** + +### isRowSelectable + +> **isRowSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L526) + +Indicates whether the grid's rows can be selected + +#### Inherited from + +[`GridType`](GridType.md).[`isRowSelectable`](GridType.md#isrowselectable) + +*** + +### lastChildGrid? + +> `optional` **lastChildGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:785](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L785) + +#### Inherited from + +[`GridType`](GridType.md).[`lastChildGrid`](GridType.md#lastchildgrid) + +*** + +### lastEditableColumnIndex + +> **lastEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L731) + +#### Inherited from + +[`GridType`](GridType.md).[`lastEditableColumnIndex`](GridType.md#lasteditablecolumnindex) + +*** + +### lastSearchInfo + +> `readonly` **lastSearchInfo**: [`ISearchInfo`](ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L719) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Inherited from + +[`GridType`](GridType.md).[`lastSearchInfo`](GridType.md#lastsearchinfo) + +*** + +### loadChildrenOnDemand? + +> `optional` **loadChildrenOnDemand?**: (`parentID`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:798](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L798) + +#### Parameters + +##### parentID + +`any` + +##### done + +(`children`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`loadChildrenOnDemand`](GridType.md#loadchildrenondemand) + +*** + +### loadingRows? + +> `optional` **loadingRows?**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:801](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L801) + +#### Inherited from + +[`GridType`](GridType.md).[`loadingRows`](GridType.md#loadingrows) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L434) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Inherited from + +[`GridType`](GridType.md).[`locale`](GridType.md#locale) + +*** + +### localeChange + +> **localeChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L827) + +#### Inherited from + +[`GridType`](GridType.md).[`localeChange`](GridType.md#localechange) + +*** + +### mergeStrategy + +> **mergeStrategy**: [`IGridMergeStrategy`](IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L436) + +#### Inherited from + +[`GridType`](GridType.md).[`mergeStrategy`](GridType.md#mergestrategy) + +*** + +### moving + +> **moving**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L464) + +Indicates whether the grid is currently in a moving state. + +#### Inherited from + +[`GridType`](GridType.md).[`moving`](GridType.md#moving) + +*** + +### multiRowLayoutRowSize + +> **multiRowLayoutRowSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:638](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L638) + +#### Inherited from + +[`GridType`](GridType.md).[`multiRowLayoutRowSize`](GridType.md#multirowlayoutrowsize) + +*** + +### nativeElement + +> **nativeElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:440](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L440) + +Represents the native HTML element itself + +#### Inherited from + +[`GridType`](GridType.md).[`nativeElement`](GridType.md#nativeelement) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:518](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L518) + +#### Inherited from + +[`GridType`](GridType.md).[`navigation`](GridType.md#navigation) + +*** + +### outerWidth + +> **outerWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:635](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L635) + +#### Inherited from + +[`GridType`](GridType.md).[`outerWidth`](GridType.md#outerwidth) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L521) + +#### Inherited from + +[`GridType`](GridType.md).[`outlet`](GridType.md#outlet) + +*** + +### pagingMode + +> **pagingMode**: [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L710) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Inherited from + +[`GridType`](GridType.md).[`pagingMode`](GridType.md#pagingmode) + +*** + +### parent? + +> `optional` **parent?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:803](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L803) + +#### Inherited from + +[`GridType`](GridType.md).[`parent`](GridType.md#parent) + +*** + +### parentVirtDir + +> **parentVirtDir**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L653) + +#### Inherited from + +[`GridType`](GridType.md).[`parentVirtDir`](GridType.md#parentvirtdir) + +*** + +### pinnedColumns + +> **pinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L666) + +An array of columns, but it counts only the ones that are pinned + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumns`](GridType.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +> **pinnedColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:559](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L559) + +Represents the count of only the pinned columns + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumnsCount`](GridType.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +> **pinnedEndColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L670) + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndColumns`](GridType.md#pinnedendcolumns) + +*** + +### pinnedEndWidth + +> **pinnedEndWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L535) + +The width of pinned element for pinning at end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndWidth`](GridType.md#pinnedendwidth) + +*** + +### pinnedRecords + +> **pinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:687](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L687) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecords`](GridType.md#pinnedrecords) + +*** + +### pinnedRecordsCount + +> **pinnedRecordsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L686) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecordsCount`](GridType.md#pinnedrecordscount) + +*** + +### pinnedRows + +> **pinnedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L691) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRows`](GridType.md#pinnedrows) + +*** + +### pinnedStartColumns + +> **pinnedStartColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L668) + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartColumns`](GridType.md#pinnedstartcolumns) + +*** + +### pinnedStartWidth + +> **pinnedStartWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L533) + +The width of pinned element for pinning at start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartWidth`](GridType.md#pinnedstartwidth) + +*** + +### pinning + +> **pinning**: [`IPinningConfig`](IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L650) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Inherited from + +[`GridType`](GridType.md).[`pinning`](GridType.md#pinning) + +*** + +### pipeTrigger + +> **pipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L454) + +#### Inherited from + +[`GridType`](GridType.md).[`pipeTrigger`](GridType.md#pipetrigger) + +*** + +### pivotConfiguration + +> **pivotConfiguration**: [`IPivotConfiguration`](IPivotConfiguration.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1029](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1029) + +The configuration settings for the pivot grid. +it includes dimension strategy for rows and columns, filters and data keys + +*** + +### pivotRowWidths + +> **pivotRowWidths**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1052](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1052) + +*** + +### pivotUI + +> **pivotUI**: [`IPivotUISettings`](IPivotUISettings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1036](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1036) + +Specifies whether to show the pivot configuration UI in the grid. + +*** + +### primaryKey + +> **primaryKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L449) + +Represents the unique primary key used for identifying rows in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`primaryKey`](GridType.md#primarykey) + +*** + +### processedExpandedFlatData? + +> `optional` **processedExpandedFlatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L813) + +#### Inherited from + +[`GridType`](GridType.md).[`processedExpandedFlatData`](GridType.md#processedexpandedflatdata) + +*** + +### processedRecords? + +> `optional` **processedRecords?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L815) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRecords`](GridType.md#processedrecords) + +*** + +### processedRootRecords? + +> `optional` **processedRootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L809) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRootRecords`](GridType.md#processedrootrecords) + +*** + +### rangeSelected + +> **rangeSelected**: `EventEmitter`\<[`GridSelectionRange`](GridSelectionRange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:825](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L825) + +#### Inherited from + +[`GridType`](GridType.md).[`rangeSelected`](GridType.md#rangeselected) + +*** + +### records? + +> `optional` **records?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:812](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L812) + +#### Inherited from + +[`GridType`](GridType.md).[`records`](GridType.md#records) + +*** + +### rendered$ + +> **rendered$**: `Observable`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:864](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L864) + +#### Inherited from + +[`GridType`](GridType.md).[`rendered$`](GridType.md#rendered) + +*** + +### renderedRowHeight + +> **renderedRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L453) + +The height of the visible rows in the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`renderedRowHeight`](GridType.md#renderedrowheight) + +*** + +### resizeNotify + +> **resizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:866](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L866) + +#### Inherited from + +[`GridType`](GridType.md).[`resizeNotify`](GridType.md#resizenotify) + +*** + +### resourceStrings + +> **resourceStrings**: `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L437) + +#### Inherited from + +[`GridType`](GridType.md).[`resourceStrings`](GridType.md#resourcestrings) + +*** + +### rootGrid? + +> `optional` **rootGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L808) + +#### Inherited from + +[`GridType`](GridType.md).[`rootGrid`](GridType.md#rootgrid) + +*** + +### rootRecords? + +> `optional` **rootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L810) + +#### Inherited from + +[`GridType`](GridType.md).[`rootRecords`](GridType.md#rootrecords) + +*** + +### rootSummariesEnabled + +> **rootSummariesEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L443) + +#### Inherited from + +[`GridType`](GridType.md).[`rootSummariesEnabled`](GridType.md#rootsummariesenabled) + +*** + +### rowAdd + +> **rowAdd**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L840) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdd`](GridType.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:841](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L841) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdded`](GridType.md#rowadded) + +*** + +### rowAddedNotifier + +> **rowAddedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L843) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAddedNotifier`](GridType.md#rowaddednotifier) + +*** + +### rowClick + +> **rowClick**: `EventEmitter`\<[`IGridRowEventArgs`](IGridRowEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L821) + +#### Inherited from + +[`GridType`](GridType.md).[`rowClick`](GridType.md#rowclick) + +*** + +### rowCollapsedIndicatorTemplate + +> **rowCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L765) + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowCollapsedIndicatorTemplate`](GridType.md#rowcollapsedindicatortemplate) + +*** + +### rowDelete + +> **rowDelete**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:844](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L844) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDelete`](GridType.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:845](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L845) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeleted`](GridType.md#rowdeleted) + +*** + +### rowDeletedNotifier + +> **rowDeletedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L847) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeletedNotifier`](GridType.md#rowdeletednotifier) + +*** + +### rowDimensionHeaderTemplate + +> **rowDimensionHeaderTemplate**: `TemplateRef`\<[`IgxColumnTemplateContext`](IgxColumnTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1092](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1092) + +*** + +### rowDimensionResizing + +> **rowDimensionResizing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1041](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1041) + +*** + +### rowDragEnd + +> **rowDragEnd**: `EventEmitter`\<[`IRowDragEndEventArgs`](IRowDragEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L857) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragEnd`](GridType.md#rowdragend) + +*** + +### rowDraggable + +> **rowDraggable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L447) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDraggable`](GridType.md#rowdraggable) + +*** + +### rowDragging + +> **rowDragging**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L728) + +Indicates whether a row is currently being dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragging`](GridType.md#rowdragging) + +*** + +### rowDragStart + +> **rowDragStart**: `EventEmitter`\<[`IRowDragStartEventArgs`](IRowDragStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:856](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L856) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragStart`](GridType.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L853) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEdit`](GridType.md#rowedit) + +*** + +### rowEditable + +> **rowEditable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L442) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditable`](GridType.md#roweditable) + +*** + +### rowEditDone + +> **rowEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L854) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditDone`](GridType.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L852) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditEnter`](GridType.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:855](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L855) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditExit`](GridType.md#roweditexit) + +*** + +### rowEditingOverlay + +> **rowEditingOverlay**: [`IgxToggleDirective`](../classes/IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L703) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditingOverlay`](GridType.md#roweditingoverlay) + +*** + +### rowEditTabs + +> **rowEditTabs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L715) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditTabs`](GridType.md#rowedittabs) + +*** + +### rowExpandedIndicatorTemplate + +> **rowExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L760) + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowExpandedIndicatorTemplate`](GridType.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +> **rowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L637) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Inherited from + +[`GridType`](GridType.md).[`rowHeight`](GridType.md#rowheight) + +*** + +### rowList + +> **rowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L657) + +#### Inherited from + +[`GridType`](GridType.md).[`rowList`](GridType.md#rowlist) + +*** + +### rowLoadingIndicatorTemplate? + +> `optional` **rowLoadingIndicatorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L584) + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowLoadingIndicatorTemplate`](GridType.md#rowloadingindicatortemplate) + +*** + +### rowSelection + +> **rowSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L776) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelection`](GridType.md#rowselection) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `EventEmitter`\<[`IRowSelectionEventArgs`](IRowSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L826) + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectionChanging`](GridType.md#rowselectionchanging) + +*** + +### rowSelectorTemplate + +> **rowSelectorTemplate**: `TemplateRef`\<[`IgxRowSelectorTemplateContext`](IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:594](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L594) + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectorTemplate`](GridType.md#rowselectortemplate) + +*** + +### rowToggle + +> **rowToggle**: `EventEmitter`\<[`IRowToggleEventArgs`](IRowToggleEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L858) + +#### Inherited from + +[`GridType`](GridType.md).[`rowToggle`](GridType.md#rowtoggle) + +*** + +### scrollSize + +> **scrollSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L642) + +#### Inherited from + +[`GridType`](GridType.md).[`scrollSize`](GridType.md#scrollsize) + +*** + +### selected + +> **selected**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:824](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L824) + +#### Inherited from + +[`GridType`](GridType.md).[`selected`](GridType.md#selected) + +*** + +### selectedCells? + +> `optional` **selectedCells?**: [`CellType`](CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L890) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedCells`](GridType.md#selectedcells) + +*** + +### selectedRows + +> **selectedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:891](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L891) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedRows`](GridType.md#selectedrows) + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L517) + +The service handling selection in the grid. Selecting, deselecting elements + +#### Inherited from + +[`GridType`](GridType.md).[`selectionService`](GridType.md#selectionservice) + +*** + +### selectRowOnClick + +> **selectRowOnClick**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:772](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L772) + +#### Inherited from + +[`GridType`](GridType.md).[`selectRowOnClick`](GridType.md#selectrowonclick) + +*** + +### showExpandAll? + +> `optional` **showExpandAll?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L554) + +Optional +Indicates whether collapsed grid elements should be expanded + +#### Inherited from + +[`GridType`](GridType.md).[`showExpandAll`](GridType.md#showexpandall) + +*** + +### showRowSelectors + +> **showRowSelectors**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:528](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L528) + +Indicates whether the selectors of the rows are visible + +#### Inherited from + +[`GridType`](GridType.md).[`showRowSelectors`](GridType.md#showrowselectors) + +*** + +### sortAscendingHeaderIconTemplate + +> **sortAscendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L604) + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortAscendingHeaderIconTemplate`](GridType.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +> **sortDescendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L609) + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortDescendingHeaderIconTemplate`](GridType.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +> **sortHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L599) + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortHeaderIconTemplate`](GridType.md#sortheadericontemplate) + +*** + +### sortingExpressions + +> **sortingExpressions**: [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:873](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L873) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressions`](GridType.md#sortingexpressions) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `EventEmitter`\<[`ISortingExpression`](ISortingExpression.md)\<`any`\>[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L874) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressionsChange`](GridType.md#sortingexpressionschange) + +*** + +### sortingOptions + +> **sortingOptions**: [`ISortingOptions`](ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:879](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L879) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingOptions`](GridType.md#sortingoptions) + +*** + +### sortStrategy + +> **sortStrategy**: [`IGridSortingStrategy`](IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:868](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L868) + +#### Inherited from + +[`GridType`](GridType.md).[`sortStrategy`](GridType.md#sortstrategy) + +*** + +### summariesMargin + +> **summariesMargin**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L540) + +The CSS margin of the summaries + +#### Inherited from + +[`GridType`](GridType.md).[`summariesMargin`](GridType.md#summariesmargin) + +*** + +### summariesRowList + +> **summariesRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L678) + +#### Inherited from + +[`GridType`](GridType.md).[`summariesRowList`](GridType.md#summariesrowlist) + +*** + +### summaryCalculationMode + +> **summaryCalculationMode**: [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:780](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L780) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryCalculationMode`](GridType.md#summarycalculationmode) + +*** + +### summaryPipeTrigger + +> **summaryPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L455) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPipeTrigger`](GridType.md#summarypipetrigger) + +*** + +### summaryPosition + +> **summaryPosition**: [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L782) + +Represents the position of summaries: 'top', 'bottom' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPosition`](GridType.md#summaryposition) + +*** + +### summaryRowHeight + +> **summaryRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:702](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L702) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryRowHeight`](GridType.md#summaryrowheight) + +*** + +### tbody + +> **tbody**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:654](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L654) + +#### Inherited from + +[`GridType`](GridType.md).[`tbody`](GridType.md#tbody) + +*** + +### toolbarExporting + +> **toolbarExporting**: `EventEmitter`\<[`IGridToolbarExportEventArgs`](IGridToolbarExportEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L862) + +#### Inherited from + +[`GridType`](GridType.md).[`toolbarExporting`](GridType.md#toolbarexporting) + +*** + +### totalRowsCountAfterFilter + +> **totalRowsCountAfterFilter**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L704) + +#### Inherited from + +[`GridType`](GridType.md).[`totalRowsCountAfterFilter`](GridType.md#totalrowscountafterfilter) + +*** + +### transactions + +> `readonly` **transactions**: [`TransactionService`](TransactionService.md)\<[`Transaction`](Transaction.md), [`State`](State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L698) + +Represents the transaction service for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`transactions`](GridType.md#transactions) + +*** + +### treeGroupArea? + +> `optional` **treeGroupArea?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L816) + +#### Inherited from + +[`GridType`](GridType.md).[`treeGroupArea`](GridType.md#treegrouparea) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `tree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L743) + +Property, that provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### tree + +[`FilteringExpressionsTree`](../classes/FilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`uniqueColumnValuesStrategy`](GridType.md#uniquecolumnvaluesstrategy) + +*** + +### unpinnedColumns + +> **unpinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:664](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L664) + +An array of columns, but it counts only the ones that are not pinned + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedColumns`](GridType.md#unpinnedcolumns) + +*** + +### unpinnedRecords + +> **unpinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:688](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L688) + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedRecords`](GridType.md#unpinnedrecords) + +*** + +### unpinnedWidth + +> **unpinnedWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L538) + +The width of unpinned element + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedWidth`](GridType.md#unpinnedwidth) + +*** + +### updateOnRender? + +> `optional` **updateOnRender?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L805) + +#### Inherited from + +[`GridType`](GridType.md).[`updateOnRender`](GridType.md#updateonrender) + +*** + +### validation + +> `readonly` **validation**: [`IgxGridValidationService`](../classes/IgxGridValidationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:700](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L700) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Inherited from + +[`GridType`](GridType.md).[`validation`](GridType.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `EventEmitter`\<[`IGridValidationStatusEventArgs`](IGridValidationStatusEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L860) + +#### Inherited from + +[`GridType`](GridType.md).[`validationStatusChange`](GridType.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L645) + +The trigger for grid validation. It's value can either be `change` or `blur` + +#### Inherited from + +[`GridType`](GridType.md).[`validationTrigger`](GridType.md#validationtrigger) + +*** + +### valueChipTemplate + +> **valueChipTemplate**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1091](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1091) + +*** + +### valuesChange + +> **valuesChange**: `EventEmitter`\<[`IValuesChange`](IValuesChange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1083](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1083) + +Emits an event when the values in the pivot grid change. + +*** + +### verticalScrollContainer + +> **verticalScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L655) + +#### Inherited from + +[`GridType`](GridType.md).[`verticalScrollContainer`](GridType.md#verticalscrollcontainer) + +*** + +### virtualizationState + +> **virtualizationState**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L513) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Inherited from + +[`GridType`](GridType.md).[`virtualizationState`](GridType.md#virtualizationstate) + +*** + +### visibleColumns + +> **visibleColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:662](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L662) + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Inherited from + +[`GridType`](GridType.md).[`visibleColumns`](GridType.md#visiblecolumns) + +## Accessors + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L30) + +##### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`filteredData`](GridType.md#filtereddata) + +## Methods + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L953) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearCellSelection`](GridType.md#clearcellselection) + +*** + +### clearGrouping()? + +> `optional` **clearGrouping**(`field`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L898) + +#### Parameters + +##### field + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearGrouping`](GridType.md#cleargrouping) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L927) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearSort`](GridType.md#clearsort) + +*** + +### closeRowEditingOverlay() + +> **closeRowEditingOverlay**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:972](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L972) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`closeRowEditingOverlay`](GridType.md#closeroweditingoverlay) + +*** + +### collapseRow() + +> **collapseRow**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L967) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`collapseRow`](GridType.md#collapserow) + +*** + +### columnToVisibleIndex() + +> **columnToVisibleIndex**(`key`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:945](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L945) + +#### Parameters + +##### key + +`string` \| `number` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`columnToVisibleIndex`](GridType.md#columntovisibleindex) + +*** + +### createColumnsList()? + +> `optional` **createColumnsList**(`cols`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:977](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L977) + +#### Parameters + +##### cols + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`createColumnsList`](GridType.md#createcolumnslist) + +*** + +### createFilterDropdown() + +> **createFilterDropdown**(`column`, `options`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L960) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### options + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`createFilterDropdown`](GridType.md#createfilterdropdown) + +*** + +### createRow()? + +> `optional` **createRow**(`index`, `data?`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L963) + +#### Parameters + +##### index + +`number` + +##### data? + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`createRow`](GridType.md#createrow) + +*** + +### deleteRow() + +> **deleteRow**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L964) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRow`](GridType.md#deleterow) + +*** + +### deleteRowById() + +> **deleteRowById**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L965) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRowById`](GridType.md#deleterowbyid) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L903) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllColumns`](GridType.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L958) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllRows`](GridType.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L904) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectColumns`](GridType.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L956) + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectRows`](GridType.md#deselectrows) + +*** + +### generateRowPath()? + +> `optional` **generateRowPath**(`rowId`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:980](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L980) + +#### Parameters + +##### rowId + +`any` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`generateRowPath`](GridType.md#generaterowpath) + +*** + +### getChildGrids()? + +> `optional` **getChildGrids**(`inDepth?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L943) + +#### Parameters + +##### inDepth? + +`boolean` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`getChildGrids`](GridType.md#getchildgrids) + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L919) + +#### Parameters + +##### name + +`string` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByName`](GridType.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L920) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`ColumnType`](ColumnType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByVisibleIndex`](GridType.md#getcolumnbyvisibleindex) + +*** + +### getDefaultExpandState() + +> **getDefaultExpandState**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:908](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L908) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`getDefaultExpandState`](GridType.md#getdefaultexpandstate) + +*** + +### getDimensionsByType() + +> **getDimensionsByType**(`dimension`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1068](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1068) + +#### Parameters + +##### dimension + +[`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +#### Returns + +`any` + +*** + +### getDragGhostCustomTemplate() + +> **getDragGhostCustomTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:915](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L915) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getDragGhostCustomTemplate`](GridType.md#getdragghostcustomtemplate) + +*** + +### getEmptyRecordObjectFor() + +> **getEmptyRecordObjectFor**(`inRow`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L931) + +#### Parameters + +##### inRow + +[`RowType`](RowType.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getEmptyRecordObjectFor`](GridType.md#getemptyrecordobjectfor) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:921](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L921) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderGroupWidth`](GridType.md#getheadergroupwidth) + +*** + +### getInitialPinnedIndex() + +> **getInitialPinnedIndex**(`rec`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:935](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L935) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getInitialPinnedIndex`](GridType.md#getinitialpinnedindex) + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L952) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getNextCell`](GridType.md#getnextcell) + +*** + +### getPossibleColumnWidth() + +> **getPossibleColumnWidth**(`baseWidth?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:910](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L910) + +#### Parameters + +##### baseWidth? + +`number` + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getPossibleColumnWidth`](GridType.md#getpossiblecolumnwidth) + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L950) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getPreviousCell`](GridType.md#getpreviouscell) + +*** + +### getRowByIndex()? + +> `optional` **getRowByIndex**(`index`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L923) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByIndex`](GridType.md#getrowbyindex) + +*** + +### getRowByKey()? + +> `optional` **getRowByKey**(`key`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L922) + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByKey`](GridType.md#getrowbykey) + +*** + +### getRowDimensionByName() + +> **getRowDimensionByName**(`name`): [`IPivotDimension`](IPivotDimension.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1053](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1053) + +#### Parameters + +##### name + +`string` + +#### Returns + +[`IPivotDimension`](IPivotDimension.md) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L902) + +#### Returns + +[`GridSelectionRange`](GridSelectionRange.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`getSelectedRanges`](GridType.md#getselectedranges) + +*** + +### getUnpinnedIndexById() + +> **getUnpinnedIndexById**(`id`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:930](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L930) + +#### Parameters + +##### id + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getUnpinnedIndexById`](GridType.md#getunpinnedindexbyid) + +*** + +### getVisibleContentHeight() + +> **getVisibleContentHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:913](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L913) + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getVisibleContentHeight`](GridType.md#getvisiblecontentheight) + +*** + +### groupBy()? + +> `optional` **groupBy**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:899](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L899) + +#### Parameters + +##### expression + +[`IGroupingExpression`](IGroupingExpression.md) \| [`IGroupingExpression`](IGroupingExpression.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`groupBy`](GridType.md#groupby) + +*** + +### hasVerticalScroll() + +> **hasVerticalScroll**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:912](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L912) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`hasVerticalScroll`](GridType.md#hasverticalscroll) + +*** + +### isChildGridRecord()? + +> `optional` **isChildGridRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:942](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L942) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isChildGridRecord`](GridType.md#ischildgridrecord) + +*** + +### isColumnGrouped() + +> **isColumnGrouped**(`fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L937) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isColumnGrouped`](GridType.md#iscolumngrouped) + +*** + +### isDetailRecord() + +> **isDetailRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:938](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L938) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isDetailRecord`](GridType.md#isdetailrecord) + +*** + +### isExpandedGroup() + +> **isExpandedGroup**(`group`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:976](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L976) + +#### Parameters + +##### group + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isExpandedGroup`](GridType.md#isexpandedgroup) + +*** + +### isGhostRecord() + +> **isGhostRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:940](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L940) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGhostRecord`](GridType.md#isghostrecord) + +*** + +### isGroupByRecord() + +> **isGroupByRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:939](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L939) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGroupByRecord`](GridType.md#isgroupbyrecord) + +*** + +### isHierarchicalRecord()? + +> `optional` **isHierarchicalRecord**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L944) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isHierarchicalRecord`](GridType.md#ishierarchicalrecord) + +*** + +### isRecordMerged() + +> **isRecordMerged**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L934) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordMerged`](GridType.md#isrecordmerged) + +*** + +### isRecordPinned() + +> **isRecordPinned**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:933](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L933) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinned`](GridType.md#isrecordpinned) + +*** + +### isRecordPinnedByViewIndex() + +> **isRecordPinnedByViewIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:936](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L936) + +#### Parameters + +##### rowIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinnedByViewIndex`](GridType.md#isrecordpinnedbyviewindex) + +*** + +### isSummaryRow() + +> **isSummaryRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:932](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L932) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isSummaryRow`](GridType.md#issummaryrow) + +*** + +### isTreeRow()? + +> `optional` **isTreeRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:941](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L941) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isTreeRow`](GridType.md#istreerow) + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L946) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### target + +[`ColumnType`](ColumnType.md) + +##### pos + +[`DropPosition`](../enumerations/DropPosition.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`moveColumn`](GridType.md#movecolumn) + +*** + +### moveDimension() + +> **moveDimension**(`dimension`, `targetCollectionType`, `index?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1067](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1067) + +Represents a method declaration for moving dimension from its currently collection to the specified target collection +by type (Row, Column or Filter) at specified index or at the collection's end + +#### Parameters + +##### dimension + +[`IPivotDimension`](IPivotDimension.md) + +##### targetCollectionType + +[`PivotDimensionType`](../enumerations/PivotDimensionType.md) + +##### index? + +`number` + +#### Returns + +`any` + +*** + +### moveValue() + +> **moveValue**(`value`, `index?`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1077](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1077) + +Move value from its currently at specified index or at the end. +If the parameter is not set, it will add it to the end of the collection. + +#### Parameters + +##### value + +[`IPivotValue`](IPivotValue.md) + +##### index? + +`number` + +#### Returns + +`any` + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColumnIndex`, `callback?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:948](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L948) + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColumnIndex + +`number` + +##### callback? + +(`e`) => `any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`navigateTo`](GridType.md#navigateto) + +*** + +### notifyChanges() + +> **notifyChanges**(`repaint?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L968) + +#### Parameters + +##### repaint? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`notifyChanges`](GridType.md#notifychanges) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:917](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L917) + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openAdvancedFilteringDialog`](GridType.md#openadvancedfilteringdialog) + +*** + +### openRowOverlay() + +> **openRowOverlay**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L916) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openRowOverlay`](GridType.md#openrowoverlay) + +*** + +### pinRow() + +> **pinRow**(`id`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:928](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L928) + +#### Parameters + +##### id + +`any` + +##### index? + +`number` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`pinRow`](GridType.md#pinrow) + +*** + +### preventHeaderScroll()? + +> `optional` **preventHeaderScroll**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:981](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L981) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`preventHeaderScroll`](GridType.md#preventheaderscroll) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L973) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`reflow`](GridType.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:907](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L907) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`refreshSearch`](GridType.md#refreshsearch) + +*** + +### repositionRowEditingOverlay() + +> **repositionRowEditingOverlay**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:971](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L971) + +#### Parameters + +##### row + +[`RowType`](RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`repositionRowEditingOverlay`](GridType.md#repositionroweditingoverlay) + +*** + +### resetColumnCollections() + +> **resetColumnCollections**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L969) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetColumnCollections`](GridType.md#resetcolumncollections) + +*** + +### resetHorizontalVirtualization() + +> **resetHorizontalVirtualization**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L911) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetHorizontalVirtualization`](GridType.md#resethorizontalvirtualization) + +*** + +### resolveDataTypes() + +> **resolveDataTypes**(`field`): `GridColumnDataType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1062](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1062) + +Represents a method declaration for resolving the data type for a specific field (column). +It takes the field as a parameter and returns it's type + +#### Parameters + +##### field + +`any` + +#### Returns + +`GridColumnDataType` + +*** + +### resolveOutlet()? + +> `optional` **resolveOutlet**(): [`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:900](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L900) + +#### Returns + +[`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +#### Inherited from + +[`GridType`](GridType.md).[`resolveOutlet`](GridType.md#resolveoutlet) + +*** + +### rowDimensionWidth() + +> **rowDimensionWidth**(`dim`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1078](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1078) + +#### Parameters + +##### dim + +[`IPivotDimension`](IPivotDimension.md) + +#### Returns + +`string` + +*** + +### rowDimensionWidthToPixels() + +> **rowDimensionWidthToPixels**(`dim`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1079](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1079) + +#### Parameters + +##### dim + +[`IPivotDimension`](IPivotDimension.md) + +#### Returns + +`number` + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L957) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectAllRows`](GridType.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L905) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectColumns`](GridType.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L906) + +#### Returns + +[`ColumnType`](ColumnType.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`selectedColumns`](GridType.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`range`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L954) + +#### Parameters + +##### range + +[`GridSelectionRange`](GridSelectionRange.md) \| [`GridSelectionRange`](GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRange`](GridType.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L955) + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRows`](GridType.md#selectrows) + +*** + +### setFilteredData() + +> **setFilteredData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L924) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredData`](GridType.md#setfiltereddata) + +*** + +### setFilteredSortedData() + +> **setFilteredSortedData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:925](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L925) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredSortedData`](GridType.md#setfilteredsorteddata) + +*** + +### setupColumns() + +> **setupColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1055](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1055) + +Represents a method declaration for setting up the columns for the pivot grid based on the pivot configuration + +#### Returns + +`void` + +*** + +### setUpPaginator() + +> **setUpPaginator**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L959) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setUpPaginator`](GridType.md#setuppaginator) + +*** + +### showSnackbarFor() + +> **showSnackbarFor**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L918) + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`showSnackbarFor`](GridType.md#showsnackbarfor) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L926) + +#### Parameters + +##### expression + +[`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`sort`](GridType.md#sort) + +*** + +### sortDimension() + +> **sortDimension**(`dimension`, `sortDirection`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1072](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1072) + +Sort the dimension and its children in the provided direction (ascending, descending or none). + +#### Parameters + +##### dimension + +[`IPivotDimension`](IPivotDimension.md) + +##### sortDirection + +[`SortingDirection`](../enumerations/SortingDirection.md) + +#### Returns + +`any` + +*** + +### toggleAll()? + +> `optional` **toggleAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:979](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L979) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAll`](GridType.md#toggleall) + +*** + +### toggleAllGroupRows()? + +> `optional` **toggleAllGroupRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:978](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L978) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAllGroupRows`](GridType.md#toggleallgrouprows) + +*** + +### toggleDimension() + +> **toggleDimension**(`dimension`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1070](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1070) + +Toggles the dimension's enabled state on or off. The dimension remains in its current collection + +#### Parameters + +##### dimension + +[`IPivotDimension`](IPivotDimension.md) + +#### Returns + +`any` + +*** + +### toggleGroup()? + +> `optional` **toggleGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:897](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L897) + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleGroup`](GridType.md#togglegroup) + +*** + +### toggleRow() + +> **toggleRow**(`rowID`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1057](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1057) + +Represents a method declaration that allows toggle of expansion state of a row (taken as a parameter) in the pivot grid + +#### Parameters + +##### rowID + +`any` + +#### Returns + +`void` + +*** + +### toggleValue() + +> **toggleValue**(`value`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1074](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1074) + +Toggles the value's enabled state on or off. The value remains in its current collection. + +#### Parameters + +##### value + +[`IPivotValue`](IPivotValue.md) + +#### Returns + +`any` + +*** + +### trackColumnChanges() + +> **trackColumnChanges**(`index`, `column`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:909](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L909) + +#### Parameters + +##### index + +`number` + +##### column + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`trackColumnChanges`](GridType.md#trackcolumnchanges) + +*** + +### triggerPipes() + +> **triggerPipes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L970) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`triggerPipes`](GridType.md#triggerpipes) + +*** + +### unpinRow() + +> **unpinRow**(`id`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:929](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L929) + +#### Parameters + +##### id + +`any` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`unpinRow`](GridType.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L961) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +##### column + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateCell`](GridType.md#updatecell) + +*** + +### updateColumns() + +> **updateColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L901) + +#### Parameters + +##### columns + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateColumns`](GridType.md#updatecolumns) + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L966) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateRow`](GridType.md#updaterow) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PivotRowHeaderGroupType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PivotRowHeaderGroupType.md new file mode 100644 index 000000000..044860e2c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PivotRowHeaderGroupType.md @@ -0,0 +1,43 @@ +# Interface: PivotRowHeaderGroupType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:249](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L249) + +## Properties + +### grid + +> **grid**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:254](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L254) + +*** + +### header + +> **header**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L252) + +*** + +### headerID + +> **headerID**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:253](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L253) + +*** + +### parent + +> **parent**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:251](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L251) + +*** + +### rowIndex + +> **rowIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:250](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L250) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PositionSettings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PositionSettings.md new file mode 100644 index 000000000..d69e49be5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/PositionSettings.md @@ -0,0 +1,83 @@ +# Interface: PositionSettings + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:99](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L99) + +## Properties + +### closeAnimation? + +> `optional` **closeAnimation?**: `AnimationReferenceMetadata` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:113](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L113) + +Animation applied while overlay closes + +*** + +### horizontalDirection? + +> `optional` **horizontalDirection?**: [`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L101) + +Direction in which the component should show + +*** + +### horizontalStartPoint? + +> `optional` **horizontalStartPoint?**: [`HorizontalAlignment`](../enumerations/HorizontalAlignment.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:105](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L105) + +Target's starting point + +*** + +### minSize? + +> `optional` **minSize?**: [`Size`](Size.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L115) + +The size up to which element may shrink when shown in elastic position strategy + +*** + +### offset? + +> `optional` **offset?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L117) + +The offset of the element from the target in pixels + +*** + +### openAnimation? + +> `optional` **openAnimation?**: `AnimationReferenceMetadata` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:110](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L110) + +Animation applied while overlay opens + +*** + +### verticalDirection? + +> `optional` **verticalDirection?**: [`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:103](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L103) + +Direction in which the component should show + +*** + +### verticalStartPoint? + +> `optional` **verticalStartPoint?**: [`VerticalAlignment`](../enumerations/VerticalAlignment.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L107) + +Target's starting point diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/RowType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/RowType.md new file mode 100644 index 000000000..d8c70a097 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/RowType.md @@ -0,0 +1,381 @@ +# Interface: RowType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:139](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L139) + +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +## Properties + +### addRowUI? + +> `optional` **addRowUI?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:224](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L224) + +*** + +### beginAddRow? + +> `optional` **beginAddRow?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:246](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L246) + +Optional +A method to handle adding a new row + +#### Returns + +`void` + +*** + +### cells? + +> `optional` **cells?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L163) + +Optional +A list or an array of cells, that belong to the row + +*** + +### children? + +> `optional` **children?**: `RowType`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:205](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L205) + +Optional +Contains the child rows of the current row, if there are any. + +*** + +### data? + +> `optional` **data?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:158](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L158) + +*** + +### delete? + +> `optional` **delete?**: () => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:257](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L257) + +Optional +A method to handle deleting rows + +#### Returns + +`any` + +*** + +### deleted? + +> `optional` **deleted?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:195](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L195) + +Optional +Indicates whether the row is marked for deletion. + +*** + +### disabled? + +> `optional` **disabled?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L168) + +Optional +Indicates whether the current row is disabled + +*** + +### expanded? + +> `optional` **expanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:190](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L190) + +Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed + +*** + +### focused? + +> `optional` **focused?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:229](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L229) + +Optional +Indicates whether the row is currently focused. + +*** + +### grid + +> **grid**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:231](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L231) + +Represent the grid instance, the row belongs to + +*** + +### groupRow? + +> `optional` **groupRow?**: [`IGroupByRecord`](IGroupByRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L155) + +*** + +### hasChildren? + +> `optional` **hasChildren?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:217](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L217) + +Optional +Indicates whether the current row has any child rows + +*** + +### index + +> **index**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:144](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L144) + +The index of the row within the grid + +*** + +### inEditMode? + +> `optional` **inEditMode?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:200](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L200) + +Optional +Indicates whether the row is currently being edited. + +*** + +### isGroupByRow? + +> `optional` **isGroupByRow?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:147](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L147) + +Indicates whether the row is grouped. + +*** + +### isSummaryRow? + +> `optional` **isSummaryRow?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:148](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L148) + +*** + +### key? + +> `optional` **key?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:156](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L156) + +*** + +### nativeElement? + +> `optional` **nativeElement?**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L142) + +Represents the native HTML element of the row itself + +*** + +### onClick? + +> `optional` **onClick?**: (`event`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:240](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L240) + +Optional +A method to handle click event on the row +It takes a `MouseEvent` as an argument + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### onRowSelectorClick? + +> `optional` **onRowSelectorClick?**: (`event`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L233) + +#### Parameters + +##### event + +`MouseEvent` + +#### Returns + +`void` + +*** + +### parent? + +> `optional` **parent?**: `RowType` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:212](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L212) + +Optional +Contains the parent row of the current row, if it has one. +If the parent row exist, it means that the current row is a child row + +*** + +### pin? + +> `optional` **pin?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:262](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L262) + +Optional +A method to handle pinning a row + +#### Returns + +`void` + +*** + +### pinned? + +> `optional` **pinned?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:179](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L179) + +Optional +Indicates whether the current row is pinned. + +*** + +### selected? + +> `optional` **selected?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:184](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L184) + +Optional +Indicates whether the current row is selected + +*** + +### summaries? + +> `optional` **summaries?**: `Map`\<`string`, [`IgxSummaryResult`](IgxSummaryResult.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:154](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L154) + +Optional +A map of column field names to the summary results for the row. + +*** + +### treeRow? + +> `optional` **treeRow?**: [`ITreeGridRecord`](ITreeGridRecord.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:223](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L223) + +Optional +Represents the hierarchical record associated with the row (for tree grids). +It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc. + +*** + +### unpin? + +> `optional` **unpin?**: () => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:267](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L267) + +Optional +A method to handle unpinning a row, that has been pinned + +#### Returns + +`void` + +*** + +### update? + +> `optional` **update?**: (`value`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:252](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L252) + +Optional +A method to handle changing the value of elements of the row +It takes the new value as an argument + +#### Parameters + +##### value + +`any` + +#### Returns + +`void` + +*** + +### validation? + +> `readonly` `optional` **validation?**: [`IGridValidationState`](IGridValidationState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:157](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L157) + +*** + +### viewIndex + +> **viewIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L145) + +*** + +### virtDirRow? + +> `optional` **virtDirRow?**: [`IgxGridForOfDirective`](../classes/IgxGridForOfDirective.md)\<[`ColumnType`](ColumnType.md), [`ColumnType`](ColumnType.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L174) + +Optional +Virtualization state of data record added from cache diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Size.md new file mode 100644 index 000000000..2f7418df3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Size.md @@ -0,0 +1,23 @@ +# Interface: Size + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:172](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L172) + +## Properties + +### height + +> **height**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:177](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L177) + +Gets or sets the vertical component of Size + +*** + +### width + +> **width**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/overlay/utilities.ts:174](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/overlay/utilities.ts#L174) + +Gets or sets the horizontal component of Size diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/State.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/State.md new file mode 100644 index 000000000..26db0c042 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/State.md @@ -0,0 +1,27 @@ +# Interface: State + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:32](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L32) + +## Properties + +### recordRef + +> **recordRef**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L34) + +*** + +### type + +> **type**: [`TransactionType`](../enumerations/TransactionType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L35) + +*** + +### value + +> **value**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:33](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L33) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/StateUpdateEvent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/StateUpdateEvent.md new file mode 100644 index 000000000..ce98e23fe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/StateUpdateEvent.md @@ -0,0 +1,19 @@ +# Interface: StateUpdateEvent + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:43](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L43) + +## Properties + +### actions + +> **actions**: [`Action`](Action.md)\<[`Transaction`](Transaction.md)\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L45) + +*** + +### origin + +> **origin**: [`TransactionEventOrigin`](../enumerations/TransactionEventOrigin.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:44](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L44) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ToggleViewCancelableEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ToggleViewCancelableEventArgs.md new file mode 100644 index 000000000..8d8bd8c4b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ToggleViewCancelableEventArgs.md @@ -0,0 +1,63 @@ +# Interface: ToggleViewCancelableEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L30) + +## Extends + +- [`ToggleViewEventArgs`](ToggleViewEventArgs.md).[`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md) + +## Properties + +### cancel + +> **cancel**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:411](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L411) + +Provides the ability to cancel the event. + +#### Inherited from + +[`CancelableBrowserEventArgs`](CancelableBrowserEventArgs.md).[`cancel`](CancelableBrowserEventArgs.md#cancel) + +*** + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L27) + +Browser event + +#### Inherited from + +[`ToggleViewEventArgs`](ToggleViewEventArgs.md).[`event`](ToggleViewEventArgs.md#event) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L25) + +Id of the toggle view + +#### Inherited from + +[`ToggleViewEventArgs`](ToggleViewEventArgs.md).[`id`](ToggleViewEventArgs.md#id) + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`ToggleViewEventArgs`](ToggleViewEventArgs.md).[`owner`](ToggleViewEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ToggleViewEventArgs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ToggleViewEventArgs.md new file mode 100644 index 000000000..478dbdd31 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/ToggleViewEventArgs.md @@ -0,0 +1,43 @@ +# Interface: ToggleViewEventArgs + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L23) + +## Extends + +- [`IBaseEventArgs`](IBaseEventArgs.md) + +## Extended by + +- [`ToggleViewCancelableEventArgs`](ToggleViewCancelableEventArgs.md) + +## Properties + +### event? + +> `optional` **event?**: `Event` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L27) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts#L25) + +Id of the toggle view + +*** + +### owner? + +> `optional` **owner?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:418](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L418) + +Provides reference to the owner component. + +#### Inherited from + +[`IBaseEventArgs`](IBaseEventArgs.md).[`owner`](IBaseEventArgs.md#owner) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Transaction.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Transaction.md new file mode 100644 index 000000000..a1ae89786 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/Transaction.md @@ -0,0 +1,27 @@ +# Interface: Transaction + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L18) + +## Properties + +### id + +> **id**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L19) + +*** + +### newValue + +> **newValue**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L21) + +*** + +### type + +> **type**: [`TransactionType`](../enumerations/TransactionType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:20](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L20) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/TransactionService.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/TransactionService.md new file mode 100644 index 000000000..bc07b11a4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/TransactionService.md @@ -0,0 +1,325 @@ +# Interface: TransactionService\<T, S\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:56](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L56) + +## Extended by + +- [`HierarchicalTransactionService`](HierarchicalTransactionService.md) + +## Type Parameters + +### T + +`T` *extends* [`Transaction`](Transaction.md) + +### S + +`S` *extends* [`State`](State.md) + +## Properties + +### canRedo + +> **canRedo**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:80](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L80) + +#### Returns + +if there are any transactions in the Redo stack + +*** + +### canUndo + +> **canUndo**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:75](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L75) + +#### Returns + +if there are any transactions in the Undo stack + +*** + +### cloneStrategy + +> **cloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:65](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L65) + +Gets/Sets the data clone strategy used to clone data + +*** + +### enabled + +> `readonly` **enabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:60](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L60) + +Returns whether transaction is enabled for this service + +*** + +### onStateUpdate? + +> `optional` **onStateUpdate?**: `EventEmitter`\<[`StateUpdateEvent`](StateUpdateEvent.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L70) + +Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo + +## Methods + +### add() + +> **add**(`transaction`, `recordRef?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:88](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L88) + +Adds provided transaction with recordRef if any + +#### Parameters + +##### transaction + +`T` + +Transaction to be added + +##### recordRef? + +`any` + +Reference to the value of the record in the data source related to the changed item + +#### Returns + +`void` + +*** + +### clear() + +> **clear**(`id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L149) + +Clears all transactions + +#### Parameters + +##### id? + +`any` + +Optional record id to clear transactions for + +#### Returns + +`void` + +*** + +### commit() + +> **commit**(`data`, `id?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:142](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L142) + +Applies all transactions over the provided data + +#### Parameters + +##### data + +`any`[] + +Data source to update + +##### id? + +`any` + +Optional record id to commit transactions for + +#### Returns + +`void` + +*** + +### endPending() + +> **endPending**(`commit`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:163](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L163) + +Clears all pending transactions and aggregated pending state. If commit is set to true +commits pending states as single transaction + +#### Parameters + +##### commit + +`boolean` + +Should commit the pending states + +#### Returns + +`void` + +*** + +### getAggregatedChanges() + +> **getAggregatedChanges**(`mergeChanges`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:115](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L115) + +Returns aggregated changes from all transactions + +#### Parameters + +##### mergeChanges + +`boolean` + +If set to true will merge each state's value over relate recordRef +and will record resulting value in the related transaction + +#### Returns + +`T`[] + +Collection of aggregated transactions for each changed record + +*** + +### getAggregatedValue() + +> **getAggregatedValue**(`id`, `mergeChanges`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:134](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L134) + +Returns value of the required id including all uncommitted changes + +#### Parameters + +##### id + +`any` + +The id of the record to return value for + +##### mergeChanges + +`boolean` + +If set to true will merge state's value over relate recordRef +and will return merged value + +#### Returns + +`any` + +Value with changes or **null** + +*** + +### getState() + +> **getState**(`id`, `pending?`): `S` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:124](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L124) + +Returns the state of the record with provided id + +#### Parameters + +##### id + +`any` + +The id of the record + +##### pending? + +`boolean` + +Should get pending state + +#### Returns + +`S` + +State of the record if any + +*** + +### getTransactionLog() + +> **getTransactionLog**(`id?`): `T`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:96](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L96) + +Returns all recorded transactions in chronological order + +#### Parameters + +##### id? + +`any` + +Optional record id to get transactions for + +#### Returns + +`T`[] + +All transaction in the service or for the specified record + +*** + +### redo() + +> **redo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:106](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L106) + +Applies the last undone transaction if any + +#### Returns + +`void` + +*** + +### startPending() + +> **startPending**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:155](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L155) + +Starts pending transactions. All transactions passed after call to startPending +will not be added to transaction log + +#### Returns + +`void` + +*** + +### undo() + +> **undo**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/transaction/transaction.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/transaction/transaction.ts#L101) + +Remove the last transaction if any + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/TreeGridType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/TreeGridType.md new file mode 100644 index 000000000..ecadc26e7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/interfaces/TreeGridType.md @@ -0,0 +1,4409 @@ +# Interface: TreeGridType + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1004](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1004) + +An interface describing a Tree Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from `GridType` + +## Extends + +- [`GridType`](GridType.md) + +## Indexable + +> \[`key`: `string`\]: `any` + +## Properties + +### \_baseFontSize? + +> `optional` **\_baseFontSize?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:641](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L641) + +The default font size, calculated for each element + +#### Inherited from + +[`GridType`](GridType.md).[`_baseFontSize`](GridType.md#_basefontsize) + +*** + +### \_filteredSortedUnpinnedData + +> **\_filteredSortedUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:694](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L694) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredSortedUnpinnedData`](GridType.md#_filteredsortedunpinneddata) + +*** + +### \_filteredUnpinnedData + +> **\_filteredUnpinnedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:693](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L693) + +#### Inherited from + +[`GridType`](GridType.md).[`_filteredUnpinnedData`](GridType.md#_filteredunpinneddata) + +*** + +### \_totalRecords + +> **\_totalRecords**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:705](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L705) + +#### Inherited from + +[`GridType`](GridType.md).[`_totalRecords`](GridType.md#_totalrecords) + +*** + +### activeNodeChange + +> **activeNodeChange**: `EventEmitter`\<[`IActiveNodeChangeEventArgs`](IActiveNodeChangeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:818](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L818) + +#### Inherited from + +[`GridType`](GridType.md).[`activeNodeChange`](GridType.md#activenodechange) + +*** + +### advancedFilteringExpressionsTree + +> **advancedFilteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:877](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L877) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTree`](GridType.md#advancedfilteringexpressionstree) + +*** + +### advancedFilteringExpressionsTreeChange + +> **advancedFilteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:878](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L878) + +#### Inherited from + +[`GridType`](GridType.md).[`advancedFilteringExpressionsTreeChange`](GridType.md#advancedfilteringexpressionstreechange) + +*** + +### allowAdvancedFiltering + +> **allowAdvancedFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:872](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L872) + +#### Inherited from + +[`GridType`](GridType.md).[`allowAdvancedFiltering`](GridType.md#allowadvancedfiltering) + +*** + +### allowFiltering + +> **allowFiltering**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:445](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L445) + +Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered + +#### Inherited from + +[`GridType`](GridType.md).[`allowFiltering`](GridType.md#allowfiltering) + +*** + +### batchEditing + +> **batchEditing**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:881](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L881) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditing`](GridType.md#batchediting) + +*** + +### batchEditingChange? + +> `optional` **batchEditingChange?**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:839](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L839) + +#### Inherited from + +[`GridType`](GridType.md).[`batchEditingChange`](GridType.md#batcheditingchange) + +*** + +### calcHeight + +> **calcHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:633](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L633) + +CSS styling calculated for an element: calcHeight, calcWidth, outerWidth + +#### Inherited from + +[`GridType`](GridType.md).[`calcHeight`](GridType.md#calcheight) + +*** + +### calcWidth + +> **calcWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:634](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L634) + +#### Inherited from + +[`GridType`](GridType.md).[`calcWidth`](GridType.md#calcwidth) + +*** + +### cascadeOnDelete? + +> `optional` **cascadeOnDelete?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:796](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L796) + +#### Inherited from + +[`GridType`](GridType.md).[`cascadeOnDelete`](GridType.md#cascadeondelete) + +*** + +### cdr + +> `readonly` **cdr**: `ChangeDetectorRef` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:753](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L753) + +Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) + +#### Inherited from + +[`GridType`](GridType.md).[`cdr`](GridType.md#cdr) + +*** + +### cellClick + +> **cellClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:820](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L820) + +#### Inherited from + +[`GridType`](GridType.md).[`cellClick`](GridType.md#cellclick) + +*** + +### cellEdit + +> **cellEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:849](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L849) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEdit`](GridType.md#celledit) + +*** + +### cellEditDone + +> **cellEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:850](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L850) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditDone`](GridType.md#celleditdone) + +*** + +### cellEditEnter + +> **cellEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:848](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L848) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditEnter`](GridType.md#celleditenter) + +*** + +### cellEditExit + +> **cellEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:851](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L851) + +#### Inherited from + +[`GridType`](GridType.md).[`cellEditExit`](GridType.md#celleditexit) + +*** + +### cellMergeMode + +> **cellMergeMode**: [`GridCellMergeMode`](../type-aliases/GridCellMergeMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:435](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L435) + +#### Inherited from + +[`GridType`](GridType.md).[`cellMergeMode`](GridType.md#cellmergemode) + +*** + +### cellSelection + +> **cellSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:774](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L774) + +Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`cellSelection`](GridType.md#cellselection) + +*** + +### childDataKey? + +> `optional` **childDataKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:794](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L794) + +#### Inherited from + +[`GridType`](GridType.md).[`childDataKey`](GridType.md#childdatakey) + +*** + +### childLayoutKeys? + +> `optional` **childLayoutKeys?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:806](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L806) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutKeys`](GridType.md#childlayoutkeys) + +*** + +### childLayoutList? + +> `optional` **childLayoutList?**: `QueryList`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:807](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L807) + +#### Inherited from + +[`GridType`](GridType.md).[`childLayoutList`](GridType.md#childlayoutlist) + +*** + +### columnInDrag + +> **columnInDrag**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:530](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L530) + +Indicates if the column of the grid is in drag mode + +#### Inherited from + +[`GridType`](GridType.md).[`columnInDrag`](GridType.md#columnindrag) + +*** + +### columnList + +> **columnList**: `QueryList`\<[`ColumnType`](ColumnType.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:659](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L659) + +An unmodifiable list, containing all the columns of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`columnList`](GridType.md#columnlist) + +*** + +### columnMoving + +> **columnMoving**: `EventEmitter`\<[`IColumnMovingEventArgs`](IColumnMovingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:834](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L834) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMoving`](GridType.md#columnmoving) + +*** + +### columnMovingEnd + +> **columnMovingEnd**: `EventEmitter`\<[`IColumnMovingEndEventArgs`](IColumnMovingEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:832](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L832) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingEnd`](GridType.md#columnmovingend) + +*** + +### columnMovingStart + +> **columnMovingStart**: `EventEmitter`\<[`IColumnMovingStartEventArgs`](IColumnMovingStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:835](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L835) + +#### Inherited from + +[`GridType`](GridType.md).[`columnMovingStart`](GridType.md#columnmovingstart) + +*** + +### columnPin + +> **columnPin**: `EventEmitter`\<[`IPinColumnCancellableEventArgs`](IPinColumnCancellableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:836](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L836) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPin`](GridType.md#columnpin) + +*** + +### columnPinned + +> **columnPinned**: `EventEmitter`\<[`IPinColumnEventArgs`](IPinColumnEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:830](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L830) + +#### Inherited from + +[`GridType`](GridType.md).[`columnPinned`](GridType.md#columnpinned) + +*** + +### columnResized + +> **columnResized**: `EventEmitter`\<[`IColumnResizeEventArgs`](IColumnResizeEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:831](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L831) + +#### Inherited from + +[`GridType`](GridType.md).[`columnResized`](GridType.md#columnresized) + +*** + +### columns + +> **columns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:660](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L660) + +#### Inherited from + +[`GridType`](GridType.md).[`columns`](GridType.md#columns) + +*** + +### columnSelection + +> **columnSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:778](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L778) + +Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelection`](GridType.md#columnselection) + +*** + +### columnSelectionChanging + +> **columnSelectionChanging**: `EventEmitter`\<[`IColumnSelectionEventArgs`](IColumnSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:833](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L833) + +#### Inherited from + +[`GridType`](GridType.md).[`columnSelectionChanging`](GridType.md#columnselectionchanging) + +*** + +### columnVisibilityChanged + +> **columnVisibilityChanged**: `EventEmitter`\<[`IColumnVisibilityChangedEventArgs`](IColumnVisibilityChangedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:838](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L838) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanged`](GridType.md#columnvisibilitychanged) + +*** + +### columnVisibilityChanging + +> **columnVisibilityChanging**: `EventEmitter`\<[`IColumnVisibilityChangingEventArgs`](IColumnVisibilityChangingEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:837](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L837) + +#### Inherited from + +[`GridType`](GridType.md).[`columnVisibilityChanging`](GridType.md#columnvisibilitychanging) + +*** + +### columnWidthSetByUser + +> **columnWidthSetByUser**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:630](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L630) + +Indicates whether the width of the column is set by the user, or is configured automatically. + +#### Inherited from + +[`GridType`](GridType.md).[`columnWidthSetByUser`](GridType.md#columnwidthsetbyuser) + +*** + +### contextMenu + +> **contextMenu**: `EventEmitter`\<[`IGridContextMenuEventArgs`](IGridContextMenuEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:823](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L823) + +#### Inherited from + +[`GridType`](GridType.md).[`contextMenu`](GridType.md#contextmenu) + +*** + +### currencyPositionLeft + +> **currencyPositionLeft**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:627](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L627) + +Indicates whether the currency symbol is positioned to the left of values. + +#### Inherited from + +[`GridType`](GridType.md).[`currencyPositionLeft`](GridType.md#currencypositionleft) + +*** + +### data + +> **data**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L29) + +#### Inherited from + +[`GridType`](GridType.md).[`data`](GridType.md#data) + +*** + +### dataCloneStrategy + +> **dataCloneStrategy**: [`IDataCloneStrategy`](IDataCloneStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L475) + +Strategy, used for cloning the provided data. The type has one method, that takes any type of data + +#### Inherited from + +[`GridType`](GridType.md).[`dataCloneStrategy`](GridType.md#dataclonestrategy) + +*** + +### dataRowList + +> **dataRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:656](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L656) + +#### Inherited from + +[`GridType`](GridType.md).[`dataRowList`](GridType.md#datarowlist) + +*** + +### dataView + +> **dataView**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:692](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L692) + +#### Inherited from + +[`GridType`](GridType.md).[`dataView`](GridType.md#dataview) + +*** + +### dataWithAddedInTransactionRows + +> **dataWithAddedInTransactionRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:696](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L696) + +#### Inherited from + +[`GridType`](GridType.md).[`dataWithAddedInTransactionRows`](GridType.md#datawithaddedintransactionrows) + +*** + +### defaultRowHeight + +> **defaultRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:639](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L639) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultRowHeight`](GridType.md#defaultrowheight) + +*** + +### defaultSummaryHeight + +> **defaultSummaryHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:701](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L701) + +#### Inherited from + +[`GridType`](GridType.md).[`defaultSummaryHeight`](GridType.md#defaultsummaryheight) + +*** + +### disableTransitions + +> **disableTransitions**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:625](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L625) + +Indicates whether transitions are disabled for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`disableTransitions`](GridType.md#disabletransitions) + +*** + +### doubleClick + +> **doubleClick**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:822](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L822) + +#### Inherited from + +[`GridType`](GridType.md).[`doubleClick`](GridType.md#doubleclick) + +*** + +### dragIndicatorIconBase + +> **dragIndicatorIconBase**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:623](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L623) + +The base drag indicator icon. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconBase`](GridType.md#dragindicatoriconbase) + +*** + +### dragIndicatorIconTemplate + +> **dragIndicatorIconTemplate**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:621](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L621) + +The template for drag indicator icons. Could be of any type + +#### Inherited from + +[`GridType`](GridType.md).[`dragIndicatorIconTemplate`](GridType.md#dragindicatoricontemplate) + +*** + +### excelStyleHeaderIconTemplate + +> **excelStyleHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:770](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L770) + +The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`excelStyleHeaderIconTemplate`](GridType.md#excelstyleheadericontemplate) + +*** + +### expansionDepth? + +> `optional` **expansionDepth?**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:793](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L793) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionDepth`](GridType.md#expansiondepth) + +*** + +### expansionStates + +> **expansionStates**: `Map`\<`any`, `boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:652](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L652) + +#### Inherited from + +[`GridType`](GridType.md).[`expansionStates`](GridType.md#expansionstates) + +*** + +### filteredSortedData + +> **filteredSortedData**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:695](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L695) + +#### Inherited from + +[`GridType`](GridType.md).[`filteredSortedData`](GridType.md#filteredsorteddata) + +*** + +### filtering + +> **filtering**: `EventEmitter`\<[`IFilteringEventArgs`](IFilteringEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:828](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L828) + +#### Inherited from + +[`GridType`](GridType.md).[`filtering`](GridType.md#filtering) + +*** + +### filteringDone + +> **filteringDone**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:829](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L829) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringDone`](GridType.md#filteringdone) + +*** + +### filteringExpressionsTree + +> **filteringExpressionsTree**: [`IFilteringExpressionsTree`](IFilteringExpressionsTree.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:875](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L875) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTree`](GridType.md#filteringexpressionstree) + +*** + +### filteringExpressionsTreeChange + +> **filteringExpressionsTreeChange**: `EventEmitter`\<[`IFilteringExpressionsTree`](IFilteringExpressionsTree.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:876](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L876) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringExpressionsTreeChange`](GridType.md#filteringexpressionstreechange) + +*** + +### filteringLogic + +> **filteringLogic**: [`FilteringLogic`](../enumerations/FilteringLogic.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:870](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L870) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringLogic`](GridType.md#filteringlogic) + +*** + +### filteringPipeTrigger + +> **filteringPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:460](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L460) + +#### Inherited from + +[`GridType`](GridType.md).[`filteringPipeTrigger`](GridType.md#filteringpipetrigger) + +*** + +### filterMode + +> **filterMode**: [`FilterMode`](../type-aliases/FilterMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:481](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L481) + +The filter mode for the grid. It can be quick filter of excel-style filter + +#### Inherited from + +[`GridType`](GridType.md).[`filterMode`](GridType.md#filtermode) + +*** + +### filterStrategy + +> **filterStrategy**: [`IFilteringStrategy`](IFilteringStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:871](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L871) + +#### Inherited from + +[`GridType`](GridType.md).[`filterStrategy`](GridType.md#filterstrategy) + +*** + +### firstEditableColumnIndex + +> **firstEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:730](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L730) + +#### Inherited from + +[`GridType`](GridType.md).[`firstEditableColumnIndex`](GridType.md#firsteditablecolumnindex) + +*** + +### flatData? + +> `optional` **flatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:790](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L790) + +#### Inherited from + +[`GridType`](GridType.md).[`flatData`](GridType.md#flatdata) + +*** + +### foreignKey? + +> `optional` **foreignKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:795](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L795) + +#### Inherited from + +[`GridType`](GridType.md).[`foreignKey`](GridType.md#foreignkey) + +*** + +### formGroupCreated + +> **formGroupCreated**: `EventEmitter`\<[`IGridFormGroupCreatedEventArgs`](IGridFormGroupCreatedEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:859](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L859) + +#### Inherited from + +[`GridType`](GridType.md).[`formGroupCreated`](GridType.md#formgroupcreated) + +*** + +### getHeaderCellWidth + +> **getHeaderCellWidth**: (`element`) => [`ISizeInfo`](ISizeInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:746](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L746) + +Property, that gets the header cell inner width for auto-sizing. + +#### Parameters + +##### element + +`HTMLElement` + +#### Returns + +[`ISizeInfo`](ISizeInfo.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderCellWidth`](GridType.md#getheadercellwidth) + +*** + +### gridAPI + +> `readonly` **gridAPI**: [`GridServiceType`](GridServiceType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:478](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L478) + +Represents the grid service type providing API methods for the grid + +#### Inherited from + +[`GridType`](GridType.md).[`gridAPI`](GridType.md#gridapi) + +*** + +### gridKeydown + +> **gridKeydown**: `EventEmitter`\<[`IGridKeydownEventArgs`](IGridKeydownEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:819](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L819) + +#### Inherited from + +[`GridType`](GridType.md).[`gridKeydown`](GridType.md#gridkeydown) + +*** + +### groupByRowSelectorTemplate? + +> `optional` **groupByRowSelectorTemplate?**: `TemplateRef`\<[`IgxGroupByRowSelectorTemplateContext`](IgxGroupByRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:578](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L578) + +Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupByRowSelectorTemplate`](GridType.md#groupbyrowselectortemplate) + +*** + +### groupingExpansionState? + +> `optional` **groupingExpansionState?**: [`IGroupByExpandState`](IGroupByExpandState.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:882](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L882) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpansionState`](GridType.md#groupingexpansionstate) + +*** + +### groupingExpressions? + +> `optional` **groupingExpressions?**: [`IGroupingExpression`](IGroupingExpression.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:883](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L883) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpressions`](GridType.md#groupingexpressions) + +*** + +### groupingExpressionsChange? + +> `optional` **groupingExpressionsChange?**: `EventEmitter`\<[`IGroupingExpression`](IGroupingExpression.md)[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:884](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L884) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingExpressionsChange`](GridType.md#groupingexpressionschange) + +*** + +### groupingFlatResult? + +> `optional` **groupingFlatResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:887](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L887) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingFlatResult`](GridType.md#groupingflatresult) + +*** + +### groupingMetadata? + +> `optional` **groupingMetadata?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:889](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L889) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingMetadata`](GridType.md#groupingmetadata) + +*** + +### groupingResult? + +> `optional` **groupingResult?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:888](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L888) + +#### Inherited from + +[`GridType`](GridType.md).[`groupingResult`](GridType.md#groupingresult) + +*** + +### groupRowTemplate? + +> `optional` **groupRowTemplate?**: `TemplateRef`\<[`IgxGroupByRowTemplateContext`](IgxGroupByRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:572](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L572) + +Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`groupRowTemplate`](GridType.md#grouprowtemplate) + +*** + +### groupsExpanded? + +> `optional` **groupsExpanded?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:885](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L885) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsExpanded`](GridType.md#groupsexpanded) + +*** + +### groupsRecords? + +> `readonly` `optional` **groupsRecords?**: [`IGroupByRecord`](IGroupByRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:886](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L886) + +#### Inherited from + +[`GridType`](GridType.md).[`groupsRecords`](GridType.md#groupsrecords) + +*** + +### groupStrategy? + +> `optional` **groupStrategy?**: [`IGridGroupingStrategy`](IGridGroupingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:869](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L869) + +#### Inherited from + +[`GridType`](GridType.md).[`groupStrategy`](GridType.md#groupstrategy) + +*** + +### hasChildrenKey? + +> `optional` **hasChildrenKey?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:799](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L799) + +#### Inherited from + +[`GridType`](GridType.md).[`hasChildrenKey`](GridType.md#haschildrenkey) + +*** + +### hasDetails + +> **hasDetails**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:733](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L733) + +#### Inherited from + +[`GridType`](GridType.md).[`hasDetails`](GridType.md#hasdetails) + +*** + +### hasExpandableChildren? + +> `optional` **hasExpandableChildren?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:549](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L549) + +Optional +Indicates whether the grid has expandable children (hierarchical and tree grid) + +#### Inherited from + +[`GridType`](GridType.md).[`hasExpandableChildren`](GridType.md#hasexpandablechildren) + +*** + +### hasPinnedRecords + +> **hasPinnedRecords**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:685](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L685) + +#### Inherited from + +[`GridType`](GridType.md).[`hasPinnedRecords`](GridType.md#haspinnedrecords) + +*** + +### hasVisibleColumns + +> **hasVisibleColumns**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:544](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L544) + +Indicates whether the grid has columns that are shown + +#### Inherited from + +[`GridType`](GridType.md).[`hasVisibleColumns`](GridType.md#hasvisiblecolumns) + +*** + +### headerCollapsedIndicatorTemplate + +> **headerCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:614](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L614) + +The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerCollapsedIndicatorTemplate`](GridType.md#headercollapsedindicatortemplate) + +*** + +### headerExpandedIndicatorTemplate + +> **headerExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridTemplateContext`](IgxGridTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:619](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L619) + +The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headerExpandedIndicatorTemplate`](GridType.md#headerexpandedindicatortemplate) + +*** + +### headerFeaturesWidth + +> **headerFeaturesWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:631](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L631) + +#### Inherited from + +[`GridType`](GridType.md).[`headerFeaturesWidth`](GridType.md#headerfeatureswidth) + +*** + +### headSelectorBaseAriaLabel + +> **headSelectorBaseAriaLabel**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:541](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L541) + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorBaseAriaLabel`](GridType.md#headselectorbasearialabel) + +*** + +### headSelectorTemplate + +> **headSelectorTemplate**: `TemplateRef`\<[`IgxHeadSelectorTemplateContext`](IgxHeadSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:589](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L589) + +The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`headSelectorTemplate`](GridType.md#headselectortemplate) + +*** + +### hiddenColumnsCount + +> **hiddenColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:557](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L557) + +Represents the count of only the hidden (not visible) columns + +#### Inherited from + +[`GridType`](GridType.md).[`hiddenColumnsCount`](GridType.md#hiddencolumnscount) + +*** + +### highlightedRowID? + +> `optional` **highlightedRowID?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:804](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L804) + +#### Inherited from + +[`GridType`](GridType.md).[`highlightedRowID`](GridType.md#highlightedrowid) + +*** + +### iconTemplate? + +> `optional` **iconTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:566](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L566) + +Optional +The template for grid icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`iconTemplate`](GridType.md#icontemplate) + +*** + +### id + +> **id**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:451](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L451) + +Represents the unique identifier of the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`id`](GridType.md#id) + +*** + +### isCellSelectable + +> **isCellSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:682](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L682) + +Indicates whether cells are selectable in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isCellSelectable`](GridType.md#iscellselectable) + +*** + +### isLoading + +> **isLoading**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:465](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L465) + +#### Inherited from + +[`GridType`](GridType.md).[`isLoading`](GridType.md#isloading) + +*** + +### isMultiRowSelectionEnabled + +> **isMultiRowSelectionEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:684](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L684) + +Indicates whether it is allowed to select more than one row in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`isMultiRowSelectionEnabled`](GridType.md#ismultirowselectionenabled) + +*** + +### isRowPinningToTop + +> **isRowPinningToTop**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:732](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L732) + +#### Inherited from + +[`GridType`](GridType.md).[`isRowPinningToTop`](GridType.md#isrowpinningtotop) + +*** + +### isRowSelectable + +> **isRowSelectable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:526](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L526) + +Indicates whether the grid's rows can be selected + +#### Inherited from + +[`GridType`](GridType.md).[`isRowSelectable`](GridType.md#isrowselectable) + +*** + +### lastChildGrid? + +> `optional` **lastChildGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:785](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L785) + +#### Inherited from + +[`GridType`](GridType.md).[`lastChildGrid`](GridType.md#lastchildgrid) + +*** + +### lastEditableColumnIndex + +> **lastEditableColumnIndex**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:731](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L731) + +#### Inherited from + +[`GridType`](GridType.md).[`lastEditableColumnIndex`](GridType.md#lasteditablecolumnindex) + +*** + +### lastSearchInfo + +> `readonly` **lastSearchInfo**: [`ISearchInfo`](ISearchInfo.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:719](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L719) + +Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search + +#### Inherited from + +[`GridType`](GridType.md).[`lastSearchInfo`](GridType.md#lastsearchinfo) + +*** + +### loadChildrenOnDemand? + +> `optional` **loadChildrenOnDemand?**: (`parentID`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:798](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L798) + +#### Parameters + +##### parentID + +`any` + +##### done + +(`children`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`loadChildrenOnDemand`](GridType.md#loadchildrenondemand) + +*** + +### loadingRows? + +> `optional` **loadingRows?**: `Set`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:801](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L801) + +#### Inherited from + +[`GridType`](GridType.md).[`loadingRows`](GridType.md#loadingrows) + +*** + +### locale + +> **locale**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:434](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L434) + +Represents the locale of the grid: `USD`, `EUR`, `GBP`, `CNY`, `JPY`, etc. + +#### Inherited from + +[`GridType`](GridType.md).[`locale`](GridType.md#locale) + +*** + +### localeChange + +> **localeChange**: `EventEmitter`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:827](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L827) + +#### Inherited from + +[`GridType`](GridType.md).[`localeChange`](GridType.md#localechange) + +*** + +### mergeStrategy + +> **mergeStrategy**: [`IGridMergeStrategy`](IGridMergeStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:436](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L436) + +#### Inherited from + +[`GridType`](GridType.md).[`mergeStrategy`](GridType.md#mergestrategy) + +*** + +### moving + +> **moving**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:464](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L464) + +Indicates whether the grid is currently in a moving state. + +#### Inherited from + +[`GridType`](GridType.md).[`moving`](GridType.md#moving) + +*** + +### multiRowLayoutRowSize + +> **multiRowLayoutRowSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:638](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L638) + +#### Inherited from + +[`GridType`](GridType.md).[`multiRowLayoutRowSize`](GridType.md#multirowlayoutrowsize) + +*** + +### nativeElement + +> **nativeElement**: `HTMLElement` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:440](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L440) + +Represents the native HTML element itself + +#### Inherited from + +[`GridType`](GridType.md).[`nativeElement`](GridType.md#nativeelement) + +*** + +### navigation + +> **navigation**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:518](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L518) + +#### Inherited from + +[`GridType`](GridType.md).[`navigation`](GridType.md#navigation) + +*** + +### outerWidth + +> **outerWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:635](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L635) + +#### Inherited from + +[`GridType`](GridType.md).[`outerWidth`](GridType.md#outerwidth) + +*** + +### outlet + +> **outlet**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:521](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L521) + +#### Inherited from + +[`GridType`](GridType.md).[`outlet`](GridType.md#outlet) + +*** + +### pagingMode + +> **pagingMode**: [`GridPagingMode`](../type-aliases/GridPagingMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:710](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L710) + +Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page + +#### Inherited from + +[`GridType`](GridType.md).[`pagingMode`](GridType.md#pagingmode) + +*** + +### parent? + +> `optional` **parent?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:803](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L803) + +#### Inherited from + +[`GridType`](GridType.md).[`parent`](GridType.md#parent) + +*** + +### parentVirtDir + +> **parentVirtDir**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:653](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L653) + +#### Inherited from + +[`GridType`](GridType.md).[`parentVirtDir`](GridType.md#parentvirtdir) + +*** + +### pinnedColumns + +> **pinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:666](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L666) + +An array of columns, but it counts only the ones that are pinned + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumns`](GridType.md#pinnedcolumns) + +*** + +### pinnedColumnsCount + +> **pinnedColumnsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:559](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L559) + +Represents the count of only the pinned columns + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedColumnsCount`](GridType.md#pinnedcolumnscount) + +*** + +### pinnedEndColumns + +> **pinnedEndColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:670](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L670) + +An array of columns, but it counts only the ones that are pinned to the end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndColumns`](GridType.md#pinnedendcolumns) + +*** + +### pinnedEndWidth + +> **pinnedEndWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:535](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L535) + +The width of pinned element for pinning at end. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedEndWidth`](GridType.md#pinnedendwidth) + +*** + +### pinnedRecords + +> **pinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:687](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L687) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecords`](GridType.md#pinnedrecords) + +*** + +### pinnedRecordsCount + +> **pinnedRecordsCount**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:686](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L686) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRecordsCount`](GridType.md#pinnedrecordscount) + +*** + +### pinnedRows + +> **pinnedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:691](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L691) + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedRows`](GridType.md#pinnedrows) + +*** + +### pinnedStartColumns + +> **pinnedStartColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:668](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L668) + +An array of columns, but it counts only the ones that are pinned to the start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartColumns`](GridType.md#pinnedstartcolumns) + +*** + +### pinnedStartWidth + +> **pinnedStartWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:533](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L533) + +The width of pinned element for pinning at start. + +#### Inherited from + +[`GridType`](GridType.md).[`pinnedStartWidth`](GridType.md#pinnedstartwidth) + +*** + +### pinning + +> **pinning**: [`IPinningConfig`](IPinningConfig.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:650](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L650) + +The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) + +#### Inherited from + +[`GridType`](GridType.md).[`pinning`](GridType.md#pinning) + +*** + +### pipeTrigger + +> **pipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:454](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L454) + +#### Inherited from + +[`GridType`](GridType.md).[`pipeTrigger`](GridType.md#pipetrigger) + +*** + +### primaryKey + +> **primaryKey**: `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:449](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L449) + +Represents the unique primary key used for identifying rows in the grid + +#### Inherited from + +[`GridType`](GridType.md).[`primaryKey`](GridType.md#primarykey) + +*** + +### processedExpandedFlatData? + +> `optional` **processedExpandedFlatData?**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:813](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L813) + +#### Inherited from + +[`GridType`](GridType.md).[`processedExpandedFlatData`](GridType.md#processedexpandedflatdata) + +*** + +### processedRecords? + +> `optional` **processedRecords?**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:815](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L815) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRecords`](GridType.md#processedrecords) + +*** + +### processedRootRecords? + +> `optional` **processedRootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:809](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L809) + +#### Inherited from + +[`GridType`](GridType.md).[`processedRootRecords`](GridType.md#processedrootrecords) + +*** + +### rangeSelected + +> **rangeSelected**: `EventEmitter`\<[`GridSelectionRange`](GridSelectionRange.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:825](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L825) + +#### Inherited from + +[`GridType`](GridType.md).[`rangeSelected`](GridType.md#rangeselected) + +*** + +### records + +> **records**: `Map`\<`any`, [`ITreeGridRecord`](ITreeGridRecord.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1006](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1006) + +#### Overrides + +[`GridType`](GridType.md).[`records`](GridType.md#records) + +*** + +### rendered$ + +> **rendered$**: `Observable`\<`boolean`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:864](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L864) + +#### Inherited from + +[`GridType`](GridType.md).[`rendered$`](GridType.md#rendered) + +*** + +### renderedRowHeight + +> **renderedRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:453](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L453) + +The height of the visible rows in the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`renderedRowHeight`](GridType.md#renderedrowheight) + +*** + +### resizeNotify + +> **resizeNotify**: `Subject`\<`void`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:866](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L866) + +#### Inherited from + +[`GridType`](GridType.md).[`resizeNotify`](GridType.md#resizenotify) + +*** + +### resourceStrings + +> **resourceStrings**: `PrefixedResourceStrings` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:437](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L437) + +#### Inherited from + +[`GridType`](GridType.md).[`resourceStrings`](GridType.md#resourcestrings) + +*** + +### rootGrid? + +> `optional` **rootGrid?**: [`GridType`](GridType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:808](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L808) + +#### Inherited from + +[`GridType`](GridType.md).[`rootGrid`](GridType.md#rootgrid) + +*** + +### rootRecords? + +> `optional` **rootRecords?**: [`ITreeGridRecord`](ITreeGridRecord.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:810](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L810) + +#### Inherited from + +[`GridType`](GridType.md).[`rootRecords`](GridType.md#rootrecords) + +*** + +### rootSummariesEnabled + +> **rootSummariesEnabled**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:443](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L443) + +#### Inherited from + +[`GridType`](GridType.md).[`rootSummariesEnabled`](GridType.md#rootsummariesenabled) + +*** + +### rowAdd + +> **rowAdd**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:840](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L840) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdd`](GridType.md#rowadd) + +*** + +### rowAdded + +> **rowAdded**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:841](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L841) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAdded`](GridType.md#rowadded) + +*** + +### rowAddedNotifier + +> **rowAddedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:843](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L843) + +#### Inherited from + +[`GridType`](GridType.md).[`rowAddedNotifier`](GridType.md#rowaddednotifier) + +*** + +### rowClick + +> **rowClick**: `EventEmitter`\<[`IGridRowEventArgs`](IGridRowEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:821](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L821) + +#### Inherited from + +[`GridType`](GridType.md).[`rowClick`](GridType.md#rowclick) + +*** + +### rowCollapsedIndicatorTemplate + +> **rowCollapsedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:765](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L765) + +The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowCollapsedIndicatorTemplate`](GridType.md#rowcollapsedindicatortemplate) + +*** + +### rowDelete + +> **rowDelete**: `EventEmitter`\<[`IRowDataCancelableEventArgs`](IRowDataCancelableEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:844](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L844) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDelete`](GridType.md#rowdelete) + +*** + +### rowDeleted + +> **rowDeleted**: `EventEmitter`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:845](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L845) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeleted`](GridType.md#rowdeleted) + +*** + +### rowDeletedNotifier + +> **rowDeletedNotifier**: `Subject`\<[`IRowDataEventArgs`](IRowDataEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:847](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L847) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDeletedNotifier`](GridType.md#rowdeletednotifier) + +*** + +### rowDragEnd + +> **rowDragEnd**: `EventEmitter`\<[`IRowDragEndEventArgs`](IRowDragEndEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:857](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L857) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragEnd`](GridType.md#rowdragend) + +*** + +### rowDraggable + +> **rowDraggable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:447](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L447) + +Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDraggable`](GridType.md#rowdraggable) + +*** + +### rowDragging + +> **rowDragging**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:728](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L728) + +Indicates whether a row is currently being dragged + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragging`](GridType.md#rowdragging) + +*** + +### rowDragStart + +> **rowDragStart**: `EventEmitter`\<[`IRowDragStartEventArgs`](IRowDragStartEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:856](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L856) + +#### Inherited from + +[`GridType`](GridType.md).[`rowDragStart`](GridType.md#rowdragstart) + +*** + +### rowEdit + +> **rowEdit**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:853](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L853) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEdit`](GridType.md#rowedit) + +*** + +### rowEditable + +> **rowEditable**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:442](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L442) + +Indicates whether rows in the grid are editable. If te value is true, the rows can be edited + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditable`](GridType.md#roweditable) + +*** + +### rowEditDone + +> **rowEditDone**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:854](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L854) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditDone`](GridType.md#roweditdone) + +*** + +### rowEditEnter + +> **rowEditEnter**: `EventEmitter`\<[`IGridEditEventArgs`](IGridEditEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:852](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L852) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditEnter`](GridType.md#roweditenter) + +*** + +### rowEditExit + +> **rowEditExit**: `EventEmitter`\<[`IGridEditDoneEventArgs`](IGridEditDoneEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:855](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L855) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditExit`](GridType.md#roweditexit) + +*** + +### rowEditingOverlay + +> **rowEditingOverlay**: [`IgxToggleDirective`](../classes/IgxToggleDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:703](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L703) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditingOverlay`](GridType.md#roweditingoverlay) + +*** + +### rowEditTabs + +> **rowEditTabs**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:715](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L715) + +#### Inherited from + +[`GridType`](GridType.md).[`rowEditTabs`](GridType.md#rowedittabs) + +*** + +### rowExpandedIndicatorTemplate + +> **rowExpandedIndicatorTemplate**: `TemplateRef`\<[`IgxGridRowTemplateContext`](IgxGridRowTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:760](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L760) + +The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowExpandedIndicatorTemplate`](GridType.md#rowexpandedindicatortemplate) + +*** + +### rowHeight + +> **rowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:637](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L637) + +The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling + +#### Inherited from + +[`GridType`](GridType.md).[`rowHeight`](GridType.md#rowheight) + +*** + +### rowList + +> **rowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:657](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L657) + +#### Inherited from + +[`GridType`](GridType.md).[`rowList`](GridType.md#rowlist) + +*** + +### rowLoadingIndicatorTemplate? + +> `optional` **rowLoadingIndicatorTemplate?**: `TemplateRef`\<`any`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:584](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L584) + +Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowLoadingIndicatorTemplate`](GridType.md#rowloadingindicatortemplate) + +*** + +### rowSelection + +> **rowSelection**: [`GridSelectionMode`](../type-aliases/GridSelectionMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:776](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L776) + +Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelection`](GridType.md#rowselection) + +*** + +### rowSelectionChanging + +> **rowSelectionChanging**: `EventEmitter`\<[`IRowSelectionEventArgs`](IRowSelectionEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:826](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L826) + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectionChanging`](GridType.md#rowselectionchanging) + +*** + +### rowSelectorTemplate + +> **rowSelectorTemplate**: `TemplateRef`\<[`IgxRowSelectorTemplateContext`](IgxRowSelectorTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:594](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L594) + +The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`rowSelectorTemplate`](GridType.md#rowselectortemplate) + +*** + +### rowToggle + +> **rowToggle**: `EventEmitter`\<[`IRowToggleEventArgs`](IRowToggleEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:858](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L858) + +#### Inherited from + +[`GridType`](GridType.md).[`rowToggle`](GridType.md#rowtoggle) + +*** + +### scrollSize + +> **scrollSize**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:642](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L642) + +#### Inherited from + +[`GridType`](GridType.md).[`scrollSize`](GridType.md#scrollsize) + +*** + +### selected + +> **selected**: `EventEmitter`\<[`IGridCellEventArgs`](IGridCellEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:824](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L824) + +#### Inherited from + +[`GridType`](GridType.md).[`selected`](GridType.md#selected) + +*** + +### selectedCells? + +> `optional` **selectedCells?**: [`CellType`](CellType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:890](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L890) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedCells`](GridType.md#selectedcells) + +*** + +### selectedRows + +> **selectedRows**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:891](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L891) + +#### Inherited from + +[`GridType`](GridType.md).[`selectedRows`](GridType.md#selectedrows) + +*** + +### selectionService + +> **selectionService**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:517](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L517) + +The service handling selection in the grid. Selecting, deselecting elements + +#### Inherited from + +[`GridType`](GridType.md).[`selectionService`](GridType.md#selectionservice) + +*** + +### selectRowOnClick + +> **selectRowOnClick**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:772](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L772) + +#### Inherited from + +[`GridType`](GridType.md).[`selectRowOnClick`](GridType.md#selectrowonclick) + +*** + +### showExpandAll? + +> `optional` **showExpandAll?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:554](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L554) + +Optional +Indicates whether collapsed grid elements should be expanded + +#### Inherited from + +[`GridType`](GridType.md).[`showExpandAll`](GridType.md#showexpandall) + +*** + +### showRowSelectors + +> **showRowSelectors**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:528](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L528) + +Indicates whether the selectors of the rows are visible + +#### Inherited from + +[`GridType`](GridType.md).[`showRowSelectors`](GridType.md#showrowselectors) + +*** + +### sortAscendingHeaderIconTemplate + +> **sortAscendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:604](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L604) + +The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortAscendingHeaderIconTemplate`](GridType.md#sortascendingheadericontemplate) + +*** + +### sortDescendingHeaderIconTemplate + +> **sortDescendingHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:609](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L609) + +The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortDescendingHeaderIconTemplate`](GridType.md#sortdescendingheadericontemplate) + +*** + +### sortHeaderIconTemplate + +> **sortHeaderIconTemplate**: `TemplateRef`\<[`IgxGridHeaderTemplateContext`](IgxGridHeaderTemplateContext.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:599](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L599) + +The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views + +#### Inherited from + +[`GridType`](GridType.md).[`sortHeaderIconTemplate`](GridType.md#sortheadericontemplate) + +*** + +### sortingExpressions + +> **sortingExpressions**: [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:873](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L873) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressions`](GridType.md#sortingexpressions) + +*** + +### sortingExpressionsChange + +> **sortingExpressionsChange**: `EventEmitter`\<[`ISortingExpression`](ISortingExpression.md)\<`any`\>[]\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:874](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L874) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingExpressionsChange`](GridType.md#sortingexpressionschange) + +*** + +### sortingOptions + +> **sortingOptions**: [`ISortingOptions`](ISortingOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:879](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L879) + +#### Inherited from + +[`GridType`](GridType.md).[`sortingOptions`](GridType.md#sortingoptions) + +*** + +### sortStrategy + +> **sortStrategy**: [`IGridSortingStrategy`](IGridSortingStrategy.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:868](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L868) + +#### Inherited from + +[`GridType`](GridType.md).[`sortStrategy`](GridType.md#sortstrategy) + +*** + +### summariesMargin + +> **summariesMargin**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:540](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L540) + +The CSS margin of the summaries + +#### Inherited from + +[`GridType`](GridType.md).[`summariesMargin`](GridType.md#summariesmargin) + +*** + +### summariesRowList + +> **summariesRowList**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:678](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L678) + +#### Inherited from + +[`GridType`](GridType.md).[`summariesRowList`](GridType.md#summariesrowlist) + +*** + +### summaryCalculationMode + +> **summaryCalculationMode**: [`GridSummaryCalculationMode`](../type-aliases/GridSummaryCalculationMode.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:780](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L780) + +Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryCalculationMode`](GridType.md#summarycalculationmode) + +*** + +### summaryPipeTrigger + +> **summaryPipeTrigger**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:455](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L455) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPipeTrigger`](GridType.md#summarypipetrigger) + +*** + +### summaryPosition + +> **summaryPosition**: [`GridSummaryPosition`](../type-aliases/GridSummaryPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:782](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L782) + +Represents the position of summaries: 'top', 'bottom' + +#### Inherited from + +[`GridType`](GridType.md).[`summaryPosition`](GridType.md#summaryposition) + +*** + +### summaryRowHeight + +> **summaryRowHeight**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:702](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L702) + +#### Inherited from + +[`GridType`](GridType.md).[`summaryRowHeight`](GridType.md#summaryrowheight) + +*** + +### tbody + +> **tbody**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:654](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L654) + +#### Inherited from + +[`GridType`](GridType.md).[`tbody`](GridType.md#tbody) + +*** + +### toolbarExporting + +> **toolbarExporting**: `EventEmitter`\<[`IGridToolbarExportEventArgs`](IGridToolbarExportEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:862](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L862) + +#### Inherited from + +[`GridType`](GridType.md).[`toolbarExporting`](GridType.md#toolbarexporting) + +*** + +### totalRowsCountAfterFilter + +> **totalRowsCountAfterFilter**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:704](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L704) + +#### Inherited from + +[`GridType`](GridType.md).[`totalRowsCountAfterFilter`](GridType.md#totalrowscountafterfilter) + +*** + +### transactions + +> `readonly` **transactions**: [`TransactionService`](TransactionService.md)\<[`Transaction`](Transaction.md), [`State`](State.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:698](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L698) + +Represents the transaction service for the grid. + +#### Inherited from + +[`GridType`](GridType.md).[`transactions`](GridType.md#transactions) + +*** + +### treeGroupArea? + +> `optional` **treeGroupArea?**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:816](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L816) + +#### Inherited from + +[`GridType`](GridType.md).[`treeGroupArea`](GridType.md#treegrouparea) + +*** + +### uniqueColumnValuesStrategy + +> **uniqueColumnValuesStrategy**: (`column`, `tree`, `done`) => `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:743](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L743) + +Property, that provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### tree + +[`FilteringExpressionsTree`](../classes/FilteringExpressionsTree.md) + +##### done + +(`values`) => `void` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`uniqueColumnValuesStrategy`](GridType.md#uniquecolumnvaluesstrategy) + +*** + +### unpinnedColumns + +> **unpinnedColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:664](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L664) + +An array of columns, but it counts only the ones that are not pinned + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedColumns`](GridType.md#unpinnedcolumns) + +*** + +### unpinnedRecords + +> **unpinnedRecords**: `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:688](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L688) + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedRecords`](GridType.md#unpinnedrecords) + +*** + +### unpinnedWidth + +> **unpinnedWidth**: `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:538](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L538) + +The width of unpinned element + +#### Inherited from + +[`GridType`](GridType.md).[`unpinnedWidth`](GridType.md#unpinnedwidth) + +*** + +### updateOnRender? + +> `optional` **updateOnRender?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:805](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L805) + +#### Inherited from + +[`GridType`](GridType.md).[`updateOnRender`](GridType.md#updateonrender) + +*** + +### validation + +> `readonly` **validation**: [`IgxGridValidationService`](../classes/IgxGridValidationService.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:700](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L700) + +Represents the validation service for the grid. The type contains properties and methods (logic) for validating records + +#### Inherited from + +[`GridType`](GridType.md).[`validation`](GridType.md#validation) + +*** + +### validationStatusChange + +> **validationStatusChange**: `EventEmitter`\<[`IGridValidationStatusEventArgs`](IGridValidationStatusEventArgs.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:860](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L860) + +#### Inherited from + +[`GridType`](GridType.md).[`validationStatusChange`](GridType.md#validationstatuschange) + +*** + +### validationTrigger + +> **validationTrigger**: [`GridValidationTrigger`](../type-aliases/GridValidationTrigger.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:645](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L645) + +The trigger for grid validation. It's value can either be `change` or `blur` + +#### Inherited from + +[`GridType`](GridType.md).[`validationTrigger`](GridType.md#validationtrigger) + +*** + +### verticalScrollContainer + +> **verticalScrollContainer**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:655](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L655) + +#### Inherited from + +[`GridType`](GridType.md).[`verticalScrollContainer`](GridType.md#verticalscrollcontainer) + +*** + +### virtualizationState + +> **virtualizationState**: [`IForOfState`](IForOfState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:513](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L513) + +Represents the state of virtualization for the grid. It has an owner, start index and chunk size + +#### Inherited from + +[`GridType`](GridType.md).[`virtualizationState`](GridType.md#virtualizationstate) + +*** + +### visibleColumns + +> **visibleColumns**: [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:662](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L662) + +An array of columns, but it counts only the ones visible (not hidden) in the view + +#### Inherited from + +[`GridType`](GridType.md).[`visibleColumns`](GridType.md#visiblecolumns) + +## Accessors + +### filteredData + +#### Get Signature + +> **get** **filteredData**(): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:30](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L30) + +##### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`filteredData`](GridType.md#filtereddata) + +## Methods + +### clearCellSelection() + +> **clearCellSelection**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:953](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L953) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearCellSelection`](GridType.md#clearcellselection) + +*** + +### clearGrouping()? + +> `optional` **clearGrouping**(`field`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:898](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L898) + +#### Parameters + +##### field + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearGrouping`](GridType.md#cleargrouping) + +*** + +### clearSort() + +> **clearSort**(`name?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:927](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L927) + +#### Parameters + +##### name? + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`clearSort`](GridType.md#clearsort) + +*** + +### closeRowEditingOverlay() + +> **closeRowEditingOverlay**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:972](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L972) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`closeRowEditingOverlay`](GridType.md#closeroweditingoverlay) + +*** + +### collapseRow() + +> **collapseRow**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:967](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L967) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`collapseRow`](GridType.md#collapserow) + +*** + +### columnToVisibleIndex() + +> **columnToVisibleIndex**(`key`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:945](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L945) + +#### Parameters + +##### key + +`string` \| `number` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`columnToVisibleIndex`](GridType.md#columntovisibleindex) + +*** + +### createColumnsList()? + +> `optional` **createColumnsList**(`cols`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:977](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L977) + +#### Parameters + +##### cols + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`createColumnsList`](GridType.md#createcolumnslist) + +*** + +### createFilterDropdown() + +> **createFilterDropdown**(`column`, `options`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:960](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L960) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### options + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`createFilterDropdown`](GridType.md#createfilterdropdown) + +*** + +### createRow()? + +> `optional` **createRow**(`index`, `data?`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:963](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L963) + +#### Parameters + +##### index + +`number` + +##### data? + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`createRow`](GridType.md#createrow) + +*** + +### deleteRow() + +> **deleteRow**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:964](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L964) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRow`](GridType.md#deleterow) + +*** + +### deleteRowById() + +> **deleteRowById**(`id`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:965](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L965) + +#### Parameters + +##### id + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`deleteRowById`](GridType.md#deleterowbyid) + +*** + +### deselectAllColumns() + +> **deselectAllColumns**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:903](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L903) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllColumns`](GridType.md#deselectallcolumns) + +*** + +### deselectAllRows() + +> **deselectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:958](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L958) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectAllRows`](GridType.md#deselectallrows) + +*** + +### deselectColumns() + +> **deselectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:904](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L904) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectColumns`](GridType.md#deselectcolumns) + +*** + +### deselectRows() + +> **deselectRows**(`rowIDs`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:956](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L956) + +#### Parameters + +##### rowIDs + +`any`[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`deselectRows`](GridType.md#deselectrows) + +*** + +### generateRowPath()? + +> `optional` **generateRowPath**(`rowId`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:980](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L980) + +#### Parameters + +##### rowId + +`any` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`generateRowPath`](GridType.md#generaterowpath) + +*** + +### getChildGrids()? + +> `optional` **getChildGrids**(`inDepth?`): `any`[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:943](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L943) + +#### Parameters + +##### inDepth? + +`boolean` + +#### Returns + +`any`[] + +#### Inherited from + +[`GridType`](GridType.md).[`getChildGrids`](GridType.md#getchildgrids) + +*** + +### getColumnByName() + +> **getColumnByName**(`name`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:919](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L919) + +#### Parameters + +##### name + +`string` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByName`](GridType.md#getcolumnbyname) + +*** + +### getColumnByVisibleIndex() + +> **getColumnByVisibleIndex**(`index`): [`ColumnType`](ColumnType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:920](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L920) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`ColumnType`](ColumnType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getColumnByVisibleIndex`](GridType.md#getcolumnbyvisibleindex) + +*** + +### getDefaultExpandState() + +> **getDefaultExpandState**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:908](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L908) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`getDefaultExpandState`](GridType.md#getdefaultexpandstate) + +*** + +### getDragGhostCustomTemplate() + +> **getDragGhostCustomTemplate**(): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:915](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L915) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getDragGhostCustomTemplate`](GridType.md#getdragghostcustomtemplate) + +*** + +### getEmptyRecordObjectFor() + +> **getEmptyRecordObjectFor**(`inRow`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:931](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L931) + +#### Parameters + +##### inRow + +[`RowType`](RowType.md) + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`getEmptyRecordObjectFor`](GridType.md#getemptyrecordobjectfor) + +*** + +### getHeaderGroupWidth() + +> **getHeaderGroupWidth**(`column`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:921](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L921) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getHeaderGroupWidth`](GridType.md#getheadergroupwidth) + +*** + +### getInitialPinnedIndex() + +> **getInitialPinnedIndex**(`rec`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:935](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L935) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getInitialPinnedIndex`](GridType.md#getinitialpinnedindex) + +*** + +### getNextCell() + +> **getNextCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:952](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L952) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getNextCell`](GridType.md#getnextcell) + +*** + +### getPossibleColumnWidth() + +> **getPossibleColumnWidth**(`baseWidth?`): `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:910](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L910) + +#### Parameters + +##### baseWidth? + +`number` + +#### Returns + +`string` + +#### Inherited from + +[`GridType`](GridType.md).[`getPossibleColumnWidth`](GridType.md#getpossiblecolumnwidth) + +*** + +### getPreviousCell() + +> **getPreviousCell**(`currRowIndex`, `curVisibleColIndex`, `callback`): [`ICellPosition`](ICellPosition.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:950](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L950) + +#### Parameters + +##### currRowIndex + +`number` + +##### curVisibleColIndex + +`number` + +##### callback + +(`c`) => `boolean` + +#### Returns + +[`ICellPosition`](ICellPosition.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getPreviousCell`](GridType.md#getpreviouscell) + +*** + +### getRowByIndex()? + +> `optional` **getRowByIndex**(`index`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:923](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L923) + +#### Parameters + +##### index + +`number` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByIndex`](GridType.md#getrowbyindex) + +*** + +### getRowByKey()? + +> `optional` **getRowByKey**(`key`): [`RowType`](RowType.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:922](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L922) + +#### Parameters + +##### key + +`any` + +#### Returns + +[`RowType`](RowType.md) + +#### Inherited from + +[`GridType`](GridType.md).[`getRowByKey`](GridType.md#getrowbykey) + +*** + +### getSelectedRanges() + +> **getSelectedRanges**(): [`GridSelectionRange`](GridSelectionRange.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:902](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L902) + +#### Returns + +[`GridSelectionRange`](GridSelectionRange.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`getSelectedRanges`](GridType.md#getselectedranges) + +*** + +### getUnpinnedIndexById() + +> **getUnpinnedIndexById**(`id`): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:930](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L930) + +#### Parameters + +##### id + +`any` + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getUnpinnedIndexById`](GridType.md#getunpinnedindexbyid) + +*** + +### getVisibleContentHeight() + +> **getVisibleContentHeight**(): `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:913](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L913) + +#### Returns + +`number` + +#### Inherited from + +[`GridType`](GridType.md).[`getVisibleContentHeight`](GridType.md#getvisiblecontentheight) + +*** + +### groupBy()? + +> `optional` **groupBy**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:899](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L899) + +#### Parameters + +##### expression + +[`IGroupingExpression`](IGroupingExpression.md) \| [`IGroupingExpression`](IGroupingExpression.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`groupBy`](GridType.md#groupby) + +*** + +### hasVerticalScroll() + +> **hasVerticalScroll**(): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:912](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L912) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`hasVerticalScroll`](GridType.md#hasverticalscroll) + +*** + +### isChildGridRecord()? + +> `optional` **isChildGridRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:942](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L942) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isChildGridRecord`](GridType.md#ischildgridrecord) + +*** + +### isColumnGrouped() + +> **isColumnGrouped**(`fieldName`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:937](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L937) + +#### Parameters + +##### fieldName + +`string` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isColumnGrouped`](GridType.md#iscolumngrouped) + +*** + +### isDetailRecord() + +> **isDetailRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:938](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L938) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isDetailRecord`](GridType.md#isdetailrecord) + +*** + +### isExpandedGroup() + +> **isExpandedGroup**(`group`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:976](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L976) + +#### Parameters + +##### group + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isExpandedGroup`](GridType.md#isexpandedgroup) + +*** + +### isGhostRecord() + +> **isGhostRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:940](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L940) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGhostRecord`](GridType.md#isghostrecord) + +*** + +### isGroupByRecord() + +> **isGroupByRecord**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:939](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L939) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isGroupByRecord`](GridType.md#isgroupbyrecord) + +*** + +### isHierarchicalRecord()? + +> `optional` **isHierarchicalRecord**(`record`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:944](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L944) + +#### Parameters + +##### record + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isHierarchicalRecord`](GridType.md#ishierarchicalrecord) + +*** + +### isRecordMerged() + +> **isRecordMerged**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:934](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L934) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordMerged`](GridType.md#isrecordmerged) + +*** + +### isRecordPinned() + +> **isRecordPinned**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:933](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L933) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinned`](GridType.md#isrecordpinned) + +*** + +### isRecordPinnedByViewIndex() + +> **isRecordPinnedByViewIndex**(`rowIndex`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:936](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L936) + +#### Parameters + +##### rowIndex + +`number` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isRecordPinnedByViewIndex`](GridType.md#isrecordpinnedbyviewindex) + +*** + +### isSummaryRow() + +> **isSummaryRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:932](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L932) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`isSummaryRow`](GridType.md#issummaryrow) + +*** + +### isTreeRow() + +> **isTreeRow**(`rec`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:1007](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L1007) + +#### Parameters + +##### rec + +`any` + +#### Returns + +`boolean` + +#### Overrides + +[`GridType`](GridType.md).[`isTreeRow`](GridType.md#istreerow) + +*** + +### moveColumn() + +> **moveColumn**(`column`, `target`, `pos`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:946](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L946) + +#### Parameters + +##### column + +[`ColumnType`](ColumnType.md) + +##### target + +[`ColumnType`](ColumnType.md) + +##### pos + +[`DropPosition`](../enumerations/DropPosition.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`moveColumn`](GridType.md#movecolumn) + +*** + +### navigateTo() + +> **navigateTo**(`rowIndex`, `visibleColumnIndex`, `callback?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:948](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L948) + +#### Parameters + +##### rowIndex + +`number` + +##### visibleColumnIndex + +`number` + +##### callback? + +(`e`) => `any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`navigateTo`](GridType.md#navigateto) + +*** + +### notifyChanges() + +> **notifyChanges**(`repaint?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:968](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L968) + +#### Parameters + +##### repaint? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`notifyChanges`](GridType.md#notifychanges) + +*** + +### openAdvancedFilteringDialog() + +> **openAdvancedFilteringDialog**(`overlaySettings?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:917](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L917) + +#### Parameters + +##### overlaySettings? + +[`OverlaySettings`](OverlaySettings.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openAdvancedFilteringDialog`](GridType.md#openadvancedfilteringdialog) + +*** + +### openRowOverlay() + +> **openRowOverlay**(`id`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:916](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L916) + +#### Parameters + +##### id + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`openRowOverlay`](GridType.md#openrowoverlay) + +*** + +### pinRow() + +> **pinRow**(`id`, `index?`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:928](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L928) + +#### Parameters + +##### id + +`any` + +##### index? + +`number` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`pinRow`](GridType.md#pinrow) + +*** + +### preventHeaderScroll()? + +> `optional` **preventHeaderScroll**(`args`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:981](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L981) + +#### Parameters + +##### args + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`preventHeaderScroll`](GridType.md#preventheaderscroll) + +*** + +### reflow() + +> **reflow**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:973](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L973) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`reflow`](GridType.md#reflow) + +*** + +### refreshSearch() + +> **refreshSearch**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:907](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L907) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`refreshSearch`](GridType.md#refreshsearch) + +*** + +### repositionRowEditingOverlay() + +> **repositionRowEditingOverlay**(`row`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:971](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L971) + +#### Parameters + +##### row + +[`RowType`](RowType.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`repositionRowEditingOverlay`](GridType.md#repositionroweditingoverlay) + +*** + +### resetColumnCollections() + +> **resetColumnCollections**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:969](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L969) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetColumnCollections`](GridType.md#resetcolumncollections) + +*** + +### resetHorizontalVirtualization() + +> **resetHorizontalVirtualization**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:911](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L911) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`resetHorizontalVirtualization`](GridType.md#resethorizontalvirtualization) + +*** + +### resolveOutlet()? + +> `optional` **resolveOutlet**(): [`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:900](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L900) + +#### Returns + +[`IgxOverlayOutletDirective`](../classes/IgxOverlayOutletDirective.md) + +#### Inherited from + +[`GridType`](GridType.md).[`resolveOutlet`](GridType.md#resolveoutlet) + +*** + +### selectAllRows() + +> **selectAllRows**(`onlyFilterData?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:957](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L957) + +#### Parameters + +##### onlyFilterData? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectAllRows`](GridType.md#selectallrows) + +*** + +### selectColumns() + +> **selectColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:905](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L905) + +#### Parameters + +##### columns + +`string`[] \| [`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectColumns`](GridType.md#selectcolumns) + +*** + +### selectedColumns() + +> **selectedColumns**(): [`ColumnType`](ColumnType.md)[] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:906](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L906) + +#### Returns + +[`ColumnType`](ColumnType.md)[] + +#### Inherited from + +[`GridType`](GridType.md).[`selectedColumns`](GridType.md#selectedcolumns) + +*** + +### selectRange() + +> **selectRange**(`range`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:954](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L954) + +#### Parameters + +##### range + +[`GridSelectionRange`](GridSelectionRange.md) \| [`GridSelectionRange`](GridSelectionRange.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRange`](GridType.md#selectrange) + +*** + +### selectRows() + +> **selectRows**(`rowIDs`, `clearCurrentSelection?`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:955](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L955) + +#### Parameters + +##### rowIDs + +`any`[] + +##### clearCurrentSelection? + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`selectRows`](GridType.md#selectrows) + +*** + +### setFilteredData() + +> **setFilteredData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:924](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L924) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredData`](GridType.md#setfiltereddata) + +*** + +### setFilteredSortedData() + +> **setFilteredSortedData**(`data`, `pinned`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:925](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L925) + +#### Parameters + +##### data + +`any` + +##### pinned + +`boolean` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setFilteredSortedData`](GridType.md#setfilteredsorteddata) + +*** + +### setUpPaginator() + +> **setUpPaginator**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:959](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L959) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`setUpPaginator`](GridType.md#setuppaginator) + +*** + +### showSnackbarFor() + +> **showSnackbarFor**(`index`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:918](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L918) + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`showSnackbarFor`](GridType.md#showsnackbarfor) + +*** + +### sort() + +> **sort**(`expression`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:926](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L926) + +#### Parameters + +##### expression + +[`ISortingExpression`](ISortingExpression.md)\<`any`\> \| [`ISortingExpression`](ISortingExpression.md)\<`any`\>[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`sort`](GridType.md#sort) + +*** + +### toggleAll()? + +> `optional` **toggleAll**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:979](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L979) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAll`](GridType.md#toggleall) + +*** + +### toggleAllGroupRows()? + +> `optional` **toggleAllGroupRows**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:978](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L978) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleAllGroupRows`](GridType.md#toggleallgrouprows) + +*** + +### toggleGroup()? + +> `optional` **toggleGroup**(`groupRow`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:897](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L897) + +#### Parameters + +##### groupRow + +[`IGroupByRecord`](IGroupByRecord.md) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`toggleGroup`](GridType.md#togglegroup) + +*** + +### trackColumnChanges() + +> **trackColumnChanges**(`index`, `column`): `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:909](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L909) + +#### Parameters + +##### index + +`number` + +##### column + +`any` + +#### Returns + +`any` + +#### Inherited from + +[`GridType`](GridType.md).[`trackColumnChanges`](GridType.md#trackcolumnchanges) + +*** + +### triggerPipes() + +> **triggerPipes**(): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:970](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L970) + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`triggerPipes`](GridType.md#triggerpipes) + +*** + +### unpinRow() + +> **unpinRow**(`id`, `row?`): `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:929](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L929) + +#### Parameters + +##### id + +`any` + +##### row? + +[`RowType`](RowType.md) + +#### Returns + +`boolean` + +#### Inherited from + +[`GridType`](GridType.md).[`unpinRow`](GridType.md#unpinrow) + +*** + +### updateCell() + +> **updateCell**(`value`, `rowSelector`, `column`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:961](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L961) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +##### column + +`string` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateCell`](GridType.md#updatecell) + +*** + +### updateColumns() + +> **updateColumns**(`columns`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:901](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L901) + +#### Parameters + +##### columns + +[`ColumnType`](ColumnType.md)[] + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateColumns`](GridType.md#updatecolumns) + +*** + +### updateRow() + +> **updateRow**(`value`, `rowSelector`): `void` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:966](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L966) + +#### Parameters + +##### value + +`any` + +##### rowSelector + +`any` + +#### Returns + +`void` + +#### Inherited from + +[`GridType`](GridType.md).[`updateRow`](GridType.md#updaterow) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ButtonGroupAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ButtonGroupAlignment.md new file mode 100644 index 000000000..433e99633 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ButtonGroupAlignment.md @@ -0,0 +1,7 @@ +# Type Alias: ButtonGroupAlignment + +> **ButtonGroupAlignment** = *typeof* [`ButtonGroupAlignment`](../variables/ButtonGroupAlignment.md)\[keyof *typeof* [`ButtonGroupAlignment`](../variables/ButtonGroupAlignment.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L13) + +Determines the Button Group alignment diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CalendarRangeParams.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CalendarRangeParams.md new file mode 100644 index 000000000..276ae9e7f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CalendarRangeParams.md @@ -0,0 +1,37 @@ +# Type Alias: CalendarRangeParams + +> **CalendarRangeParams** = `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L6) + +## Properties + +### end + +> **end**: [`DayParameter`](DayParameter.md) \| `number` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L8) + +*** + +### inclusive? + +> `optional` **inclusive?**: `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:10](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L10) + +*** + +### start + +> **start**: [`DayParameter`](DayParameter.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L7) + +*** + +### unit? + +> `optional` **unit?**: [`DayInterval`](DayInterval.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CalendarSelection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CalendarSelection.md new file mode 100644 index 000000000..ff13e5204 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CalendarSelection.md @@ -0,0 +1,7 @@ +# Type Alias: CalendarSelection + +> **CalendarSelection** = *typeof* [`CalendarSelection`](../variables/CalendarSelection.md)\[keyof *typeof* [`CalendarSelection`](../variables/CalendarSelection.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L5) + +Sets the selection type - single, multi or range. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CarouselAnimationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CarouselAnimationType.md new file mode 100644 index 000000000..9bb7dc88d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CarouselAnimationType.md @@ -0,0 +1,5 @@ +# Type Alias: CarouselAnimationType + +> **CarouselAnimationType** = *typeof* [`CarouselAnimationType`](../variables/CarouselAnimationType.md)\[keyof *typeof* [`CarouselAnimationType`](../variables/CarouselAnimationType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/enums.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/enums.ts#L2) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CarouselIndicatorsOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CarouselIndicatorsOrientation.md new file mode 100644 index 000000000..8ba64e6af --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/CarouselIndicatorsOrientation.md @@ -0,0 +1,5 @@ +# Type Alias: CarouselIndicatorsOrientation + +> **CarouselIndicatorsOrientation** = *typeof* [`CarouselIndicatorsOrientation`](../variables/CarouselIndicatorsOrientation.md)\[keyof *typeof* [`CarouselIndicatorsOrientation`](../variables/CarouselIndicatorsOrientation.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/enums.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/enums.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ColumnDisplayOrder.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ColumnDisplayOrder.md new file mode 100644 index 000000000..081a2dd97 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ColumnDisplayOrder.md @@ -0,0 +1,7 @@ +# Type Alias: ColumnDisplayOrder + +> **ColumnDisplayOrder** = *typeof* [`ColumnDisplayOrder`](../variables/ColumnDisplayOrder.md)\[keyof *typeof* [`ColumnDisplayOrder`](../variables/ColumnDisplayOrder.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L76) + +Enumeration representing different column display order options. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DayInterval.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DayInterval.md new file mode 100644 index 000000000..c0ae39fef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DayInterval.md @@ -0,0 +1,5 @@ +# Type Alias: DayInterval + +> **DayInterval** = `"year"` \| `"quarter"` \| `"month"` \| `"week"` \| `"day"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DayParameter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DayParameter.md new file mode 100644 index 000000000..73a06f7eb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DayParameter.md @@ -0,0 +1,5 @@ +# Type Alias: DayParameter + +> **DayParameter** = [`CalendarDay`](../classes/CalendarDay.md) \| `Date` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:4](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L4) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DropDownActionKey.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DropDownActionKey.md new file mode 100644 index 000000000..c4990f51a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/DropDownActionKey.md @@ -0,0 +1,7 @@ +# Type Alias: DropDownActionKey + +> **DropDownActionKey** = *typeof* [`DropDownActionKey`](../variables/DropDownActionKey.md)\[keyof *typeof* [`DropDownActionKey`](../variables/DropDownActionKey.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L13) + +Key actions that have designated handlers in IgxDropDownComponent diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/FilterMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/FilterMode.md new file mode 100644 index 000000000..965a5e57b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/FilterMode.md @@ -0,0 +1,9 @@ +# Type Alias: FilterMode + +> **FilterMode** = *typeof* [`FilterMode`](../variables/FilterMode.md)\[keyof *typeof* [`FilterMode`](../variables/FilterMode.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L7) + +Enumeration representing different filter modes for grid filtering. +- quickFilter: Default mode with a filter row UI between the column headers and the first row of records. +- excelStyleFilter: Filter mode where an Excel-style filter is used. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridCellMergeMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridCellMergeMode.md new file mode 100644 index 000000000..719a89712 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridCellMergeMode.md @@ -0,0 +1,9 @@ +# Type Alias: GridCellMergeMode + +> **GridCellMergeMode** = *typeof* [`GridCellMergeMode`](../variables/GridCellMergeMode.md)\[keyof *typeof* [`GridCellMergeMode`](../variables/GridCellMergeMode.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L69) + +Enumeration representing different cell merging modes for the grid elements. +- 'onSort': Only merge cells in column that are sorted. +- 'always': Always merge adjacent cells based on merge strategy. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridFeatures.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridFeatures.md new file mode 100644 index 000000000..e227c4171 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridFeatures.md @@ -0,0 +1,5 @@ +# Type Alias: GridFeatures + +> **GridFeatures** = keyof [`IGridStateOptions`](../interfaces/IGridStateOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/state-base.directive.ts:100](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/state-base.directive.ts#L100) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridKeydownTargetType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridKeydownTargetType.md new file mode 100644 index 000000000..7fd494d04 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridKeydownTargetType.md @@ -0,0 +1,13 @@ +# Type Alias: GridKeydownTargetType + +> **GridKeydownTargetType** = `"dataCell"` \| `"summaryCell"` \| `"groupRow"` \| `"hierarchicalRow"` \| `"headerCell"` \| `"masterDetailRow"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:40](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L40) + +Type representing the type of the target object (elements of the grid) for keydown (fired when a key is pressed) events in the grid. +- 'dataCell': Represents a data cell within the grid. It contains and displays individual data values +- 'summaryCell': Summary cells display aggregated/summarized data at the bottom of the grid. They provide insights like total record count, min/max values, etc. +- 'groupRow': Group row within the grid. Group rows are used to group related data rows by columns. Contains the related group expression, level, sub-records and group value. +- 'hierarchicalRow': Hierarchical rows are similar to group rows, but represent a more complex hierarchical structure, allowing for nested grouping +- 'headerCell': Represents a header cell within the grid. Header cells are used to display column headers, providing context and labels for the columns. +- 'masterDetailRow': Represents a grid row that can be expanded in order to show additional information diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridPagingMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridPagingMode.md new file mode 100644 index 000000000..395aba821 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridPagingMode.md @@ -0,0 +1,9 @@ +# Type Alias: GridPagingMode + +> **GridPagingMode** = *typeof* [`GridPagingMode`](../variables/GridPagingMode.md)\[keyof *typeof* [`GridPagingMode`](../variables/GridPagingMode.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L98) + +Enumeration representing different paging modes for the grid. +- Local: The grid will use local data to extract pages during paging. +- Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSelectionMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSelectionMode.md new file mode 100644 index 000000000..f0d2fd97b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSelectionMode.md @@ -0,0 +1,11 @@ +# Type Alias: GridSelectionMode + +> **GridSelectionMode** = *typeof* [`GridSelectionMode`](../variables/GridSelectionMode.md)\[keyof *typeof* [`GridSelectionMode`](../variables/GridSelectionMode.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L55) + +Enumeration representing different selection modes for the grid elements if can be selected. +- 'none': No selection is allowed. Default row and column selection mode. +- 'single': Only one element can be selected at a time. Selecting a new one will deselect the previously selected one. +- 'multiple': Default cell selection mode. More than one element can be selected at a time. +- 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSummaryCalculationMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSummaryCalculationMode.md new file mode 100644 index 000000000..5fee68c32 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSummaryCalculationMode.md @@ -0,0 +1,10 @@ +# Type Alias: GridSummaryCalculationMode + +> **GridSummaryCalculationMode** = *typeof* [`GridSummaryCalculationMode`](../variables/GridSummaryCalculationMode.md)\[keyof *typeof* [`GridSummaryCalculationMode`](../variables/GridSummaryCalculationMode.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L475) + +Enumeration representing different calculation modes for grid summaries. +- rootLevelOnly: Summaries are calculated only for the root level. +- childLevelsOnly: Summaries are calculated only for child levels. +- rootAndChildLevels: Default value; Summaries are calculated for both root and child levels. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSummaryPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSummaryPosition.md new file mode 100644 index 000000000..3c9019d8d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridSummaryPosition.md @@ -0,0 +1,9 @@ +# Type Alias: GridSummaryPosition + +> **GridSummaryPosition** = *typeof* [`GridSummaryPosition`](../variables/GridSummaryPosition.md)\[keyof *typeof* [`GridSummaryPosition`](../variables/GridSummaryPosition.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L18) + +Enumeration representing the position of grid summary rows. +- top: Default value; Summary rows are displayed at the top of the grid. +- bottom: Summary rows are displayed at the bottom of the grid. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridValidationTrigger.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridValidationTrigger.md new file mode 100644 index 000000000..ca2b95f94 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/GridValidationTrigger.md @@ -0,0 +1,9 @@ +# Type Alias: GridValidationTrigger + +> **GridValidationTrigger** = `"change"` \| `"blur"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:29](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L29) + +Type representing the triggers for grid cell validation. +- 'change': Validation is triggered when the cell value changes. +- 'blur': Validation is triggered when the cell loses focus. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/HorizontalAnimationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/HorizontalAnimationType.md new file mode 100644 index 000000000..7130cd5a7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/HorizontalAnimationType.md @@ -0,0 +1,5 @@ +# Type Alias: HorizontalAnimationType + +> **HorizontalAnimationType** = *typeof* [`HorizontalAnimationType`](../variables/HorizontalAnimationType.md)\[keyof *typeof* [`HorizontalAnimationType`](../variables/HorizontalAnimationType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L145) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IActionStripResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IActionStripResourceStrings.md new file mode 100644 index 000000000..7f58db800 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IActionStripResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IActionStripResourceStrings + +> **IActionStripResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/action-strip-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/action-strip-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IBannerResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IBannerResourceStrings.md new file mode 100644 index 000000000..0718159e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IBannerResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IBannerResourceStrings + +> **IBannerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/banner-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/banner-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ICalendarResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ICalendarResourceStrings.md new file mode 100644 index 000000000..0ef6e4582 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ICalendarResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: ICalendarResourceStrings + +> **ICalendarResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/calendar-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/calendar-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ICarouselResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ICarouselResourceStrings.md new file mode 100644 index 000000000..c3aecd305 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ICarouselResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: ICarouselResourceStrings + +> **ICarouselResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/carousel-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/carousel-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IChipResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IChipResourceStrings.md new file mode 100644 index 000000000..c373b58a5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IChipResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IChipResourceStrings + +> **IChipResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/chip-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/chip-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IComboResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IComboResourceStrings.md new file mode 100644 index 000000000..5ef18b670 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IComboResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IComboResourceStrings + +> **IComboResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/combo-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/combo-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IDatePickerResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IDatePickerResourceStrings.md new file mode 100644 index 000000000..b40cd67fa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IDatePickerResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IDatePickerResourceStrings + +> **IDatePickerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/date-picker-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/date-picker-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IDateRangePickerResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IDateRangePickerResourceStrings.md new file mode 100644 index 000000000..ce1f81daa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IDateRangePickerResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IDateRangePickerResourceStrings + +> **IDateRangePickerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/date-range-picker-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/date-range-picker-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IGridResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IGridResourceStrings.md new file mode 100644 index 000000000..a5cd63475 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IGridResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IGridResourceStrings + +> **IGridResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/grid-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/grid-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IListResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IListResourceStrings.md new file mode 100644 index 000000000..3216d463a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IListResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IListResourceStrings + +> **IListResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/list-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/list-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IPaginatorResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IPaginatorResourceStrings.md new file mode 100644 index 000000000..39bf20dea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IPaginatorResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IPaginatorResourceStrings + +> **IPaginatorResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/paginator-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/paginator-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IQueryBuilderResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IQueryBuilderResourceStrings.md new file mode 100644 index 000000000..94c628845 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IQueryBuilderResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: IQueryBuilderResourceStrings + +> **IQueryBuilderResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/query-builder-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/query-builder-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ITimePickerResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ITimePickerResourceStrings.md new file mode 100644 index 000000000..1fc0f8274 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ITimePickerResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: ITimePickerResourceStrings + +> **ITimePickerResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/time-picker-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/time-picker-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ITreeResourceStrings.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ITreeResourceStrings.md new file mode 100644 index 000000000..83e42c7b0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ITreeResourceStrings.md @@ -0,0 +1,5 @@ +# Type Alias: ITreeResourceStrings + +> **ITreeResourceStrings** = [`setCurrentI18n`](../variables/setCurrentI18n.md)\<[`setCurrentI18n`](../variables/setCurrentI18n.md), *typeof* [`setCurrentI18n`](../variables/setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/tree-resources.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/tree-resources.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IconReference.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IconReference.md new file mode 100644 index 000000000..5cbb54169 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IconReference.md @@ -0,0 +1,5 @@ +# Type Alias: IconReference + +> **IconReference** = [`IconMeta`](../interfaces/IconMeta.md) & [`FamilyMeta`](../interfaces/FamilyMeta.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/types.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/types.ts#L14) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxAvatarSize.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxAvatarSize.md new file mode 100644 index 000000000..ea01651d3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxAvatarSize.md @@ -0,0 +1,5 @@ +# Type Alias: IgxAvatarSize + +> **IgxAvatarSize** = *typeof* [`IgxAvatarSize`](../variables/IgxAvatarSize.md)\[keyof *typeof* [`IgxAvatarSize`](../variables/IgxAvatarSize.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxAvatarType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxAvatarType.md new file mode 100644 index 000000000..c3f23e6b1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxAvatarType.md @@ -0,0 +1,5 @@ +# Type Alias: IgxAvatarType + +> **IgxAvatarType** = *typeof* [`IgxAvatarType`](../variables/IgxAvatarType.md)\[keyof *typeof* [`IgxAvatarType`](../variables/IgxAvatarType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L15) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxBadgeType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxBadgeType.md new file mode 100644 index 000000000..adc6e676a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxBadgeType.md @@ -0,0 +1,7 @@ +# Type Alias: IgxBadgeType + +> **IgxBadgeType** = *typeof* [`IgxBadgeType`](../variables/IgxBadgeType.md)\[keyof *typeof* [`IgxBadgeType`](../variables/IgxBadgeType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L9) + +Determines the igxBadge type diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxButtonType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxButtonType.md new file mode 100644 index 000000000..da7f86b8c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxButtonType.md @@ -0,0 +1,7 @@ +# Type Alias: IgxButtonType + +> **IgxButtonType** = *typeof* `IgxButtonType`\[keyof *typeof* `IgxButtonType`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/button.directive.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/button.directive.ts#L23) + +Determines the Button type. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxCalendarView.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxCalendarView.md new file mode 100644 index 000000000..5b07e2dfd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxCalendarView.md @@ -0,0 +1,7 @@ +# Type Alias: IgxCalendarView + +> **IgxCalendarView** = *typeof* [`IgxCalendarView`](../variables/IgxCalendarView.md)\[keyof *typeof* [`IgxCalendarView`](../variables/IgxCalendarView.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L23) + +Determines the Calendar active view - days, months or years. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxCardActionsLayout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxCardActionsLayout.md new file mode 100644 index 000000000..e38dea9fa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxCardActionsLayout.md @@ -0,0 +1,5 @@ +# Type Alias: IgxCardActionsLayout + +> **IgxCardActionsLayout** = *typeof* [`IgxCardActionsLayout`](../variables/IgxCardActionsLayout.md)\[keyof *typeof* [`IgxCardActionsLayout`](../variables/IgxCardActionsLayout.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L260) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxChipTypeVariant.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxChipTypeVariant.md new file mode 100644 index 000000000..22b556898 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxChipTypeVariant.md @@ -0,0 +1,5 @@ +# Type Alias: IgxChipTypeVariant + +> **IgxChipTypeVariant** = *typeof* [`IgxChipTypeVariant`](../variables/IgxChipTypeVariant.md)\[keyof *typeof* [`IgxChipTypeVariant`](../variables/IgxChipTypeVariant.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L27) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxDividerType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxDividerType.md new file mode 100644 index 000000000..3b70be728 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxDividerType.md @@ -0,0 +1,5 @@ +# Type Alias: IgxDividerType + +> **IgxDividerType** = *typeof* [`IgxDividerType`](../variables/IgxDividerType.md)\[keyof *typeof* [`IgxDividerType`](../variables/IgxDividerType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L3) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxExporterOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxExporterOptions.md new file mode 100644 index 000000000..008e8fd23 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxExporterOptions.md @@ -0,0 +1,5 @@ +# Type Alias: IgxExporterOptions + +> **IgxExporterOptions** = [`IgxCsvExporterOptions`](../classes/IgxCsvExporterOptions.md) \| [`IgxExcelExporterOptions`](../classes/IgxExcelExporterOptions.md) \| [`IgxPdfExporterOptions`](../classes/IgxPdfExporterOptions.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component.ts#L16) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxIconButtonType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxIconButtonType.md new file mode 100644 index 000000000..4cadda549 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxIconButtonType.md @@ -0,0 +1,7 @@ +# Type Alias: IgxIconButtonType + +> **IgxIconButtonType** = *typeof* `IgxBaseButtonType`\[keyof *typeof* `IgxBaseButtonType`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts#L7) + +Determines the Icon Button type. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxInputGroupType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxInputGroupType.md new file mode 100644 index 000000000..748ab2e71 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxInputGroupType.md @@ -0,0 +1,7 @@ +# Type Alias: IgxInputGroupType + +> **IgxInputGroupType** = *typeof* [`IgxInputGroupEnum`](../variables/IgxInputGroupEnum.md)\[keyof *typeof* [`IgxInputGroupEnum`](../variables/IgxInputGroupEnum.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/inputGroupType.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/inputGroupType.ts#L19) + +Determines the InputGroupType. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxProgressType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxProgressType.md new file mode 100644 index 000000000..aa3f8fc13 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxProgressType.md @@ -0,0 +1,5 @@ +# Type Alias: IgxProgressType + +> **IgxProgressType** = *typeof* [`IgxProgressType`](../variables/IgxProgressType.md)\[keyof *typeof* [`IgxProgressType`](../variables/IgxProgressType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L34) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxSliderType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxSliderType.md new file mode 100644 index 000000000..79b5c82aa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxSliderType.md @@ -0,0 +1,5 @@ +# Type Alias: IgxSliderType + +> **IgxSliderType** = *typeof* [`IgxSliderType`](../variables/IgxSliderType.md)\[keyof *typeof* [`IgxSliderType`](../variables/IgxSliderType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L58) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepType.md new file mode 100644 index 000000000..a7250f5ef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepType.md @@ -0,0 +1,5 @@ +# Type Alias: IgxStepType + +> **IgxStepType** = *typeof* [`IgxStepType`](../variables/IgxStepType.md)\[keyof *typeof* [`IgxStepType`](../variables/IgxStepType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L123) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepperOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepperOrientation.md new file mode 100644 index 000000000..6b20dd1fd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepperOrientation.md @@ -0,0 +1,5 @@ +# Type Alias: IgxStepperOrientation + +> **IgxStepperOrientation** = *typeof* [`IgxStepperOrientation`](../variables/IgxStepperOrientation.md)\[keyof *typeof* [`IgxStepperOrientation`](../variables/IgxStepperOrientation.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L117) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepperTitlePosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepperTitlePosition.md new file mode 100644 index 000000000..a9d87c1d1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxStepperTitlePosition.md @@ -0,0 +1,5 @@ +# Type Alias: IgxStepperTitlePosition + +> **IgxStepperTitlePosition** = *typeof* [`IgxStepperTitlePosition`](../variables/IgxStepperTitlePosition.md)\[keyof *typeof* [`IgxStepperTitlePosition`](../variables/IgxStepperTitlePosition.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L130) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTabsAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTabsAlignment.md new file mode 100644 index 000000000..1d2a44ec2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTabsAlignment.md @@ -0,0 +1,5 @@ +# Type Alias: IgxTabsAlignment + +> **IgxTabsAlignment** = *typeof* [`IgxTabsAlignment`](../variables/IgxTabsAlignment.md)\[keyof *typeof* [`IgxTabsAlignment`](../variables/IgxTabsAlignment.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTextAlign.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTextAlign.md new file mode 100644 index 000000000..18a262bfb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTextAlign.md @@ -0,0 +1,5 @@ +# Type Alias: IgxTextAlign + +> **IgxTextAlign** = *typeof* [`IgxTextAlign`](../variables/IgxTextAlign.md)\[keyof *typeof* [`IgxTextAlign`](../variables/IgxTextAlign.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L27) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTheme.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTheme.md new file mode 100644 index 000000000..1f16f6b12 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTheme.md @@ -0,0 +1,7 @@ +# Type Alias: IgxTheme + +> **IgxTheme** = *typeof* `Theme`\[keyof *typeof* `Theme`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:50](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L50) + +Determines the component theme. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTreeSearchResolver.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTreeSearchResolver.md new file mode 100644 index 000000000..b597b2eeb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTreeSearchResolver.md @@ -0,0 +1,21 @@ +# Type Alias: IgxTreeSearchResolver + +> **IgxTreeSearchResolver** = (`data`, `node`) => `boolean` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L8) + +Comparer function that can be used when searching through IgxTreeNode<any>[] + +## Parameters + +### data + +`any` + +### node + +[`IgxTreeNode`](../interfaces/IgxTreeNode.md)\<`any`\> + +## Returns + +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTreeSelectionType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTreeSelectionType.md new file mode 100644 index 000000000..9f5fb8344 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/IgxTreeSelectionType.md @@ -0,0 +1,5 @@ +# Type Alias: IgxTreeSelectionType + +> **IgxTreeSelectionType** = *typeof* [`IgxTreeSelectionType`](../variables/IgxTreeSelectionType.md)\[keyof *typeof* [`IgxTreeSelectionType`](../variables/IgxTreeSelectionType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L102) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/KeyOfOrString.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/KeyOfOrString.md new file mode 100644 index 000000000..4dc2bdfaa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/KeyOfOrString.md @@ -0,0 +1,15 @@ +# Type Alias: KeyOfOrString\<T, K\> + +> **KeyOfOrString**\<`T`, `K`\> = `K` *extends* keyof `T` ? `K` : `string` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/types.ts:1](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/types.ts#L1) + +## Type Parameters + +### T + +`T` + +### K + +`K` = keyof `T` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/LabelPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/LabelPosition.md new file mode 100644 index 000000000..0719347a1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/LabelPosition.md @@ -0,0 +1,5 @@ +# Type Alias: LabelPosition + +> **LabelPosition** = *typeof* [`LabelPosition`](../variables/LabelPosition.md)\[keyof *typeof* [`LabelPosition`](../variables/LabelPosition.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerCalendarOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerCalendarOrientation.md new file mode 100644 index 000000000..b8ba91558 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerCalendarOrientation.md @@ -0,0 +1,7 @@ +# Type Alias: PickerCalendarOrientation + +> **PickerCalendarOrientation** = *typeof* [`PickerCalendarOrientation`](../variables/PickerCalendarOrientation.md)\[keyof *typeof* [`PickerCalendarOrientation`](../variables/PickerCalendarOrientation.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L9) + +Calendar orientation. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerHeaderOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerHeaderOrientation.md new file mode 100644 index 000000000..6f0621348 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerHeaderOrientation.md @@ -0,0 +1,7 @@ +# Type Alias: PickerHeaderOrientation + +> **PickerHeaderOrientation** = *typeof* [`PickerHeaderOrientation`](../variables/PickerHeaderOrientation.md)\[keyof *typeof* [`PickerHeaderOrientation`](../variables/PickerHeaderOrientation.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L2) + +Header orientation in `dialog` mode. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerInteractionMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerInteractionMode.md new file mode 100644 index 000000000..dd85463b5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PickerInteractionMode.md @@ -0,0 +1,8 @@ +# Type Alias: PickerInteractionMode + +> **PickerInteractionMode** = *typeof* [`PickerInteractionMode`](../variables/PickerInteractionMode.md)\[keyof *typeof* [`PickerInteractionMode`](../variables/PickerInteractionMode.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L19) + +This enumeration is used to configure whether the date/time picker has an editable input with drop down +or is readonly - the date/time is selected only through a dialog. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PivotAggregation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PivotAggregation.md new file mode 100644 index 000000000..afb219efa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PivotAggregation.md @@ -0,0 +1,22 @@ +# Type Alias: PivotAggregation + +> **PivotAggregation** = (`members`, `data`) => `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L55) + +Interface describing a PivotAggregation function. +Accepts an array of extracted data members and a array of the original data records. + +## Parameters + +### members + +`any`[] + +### data + +`any`[] + +## Returns + +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PivotAggregationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PivotAggregationType.md new file mode 100644 index 000000000..6ae4add95 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/PivotAggregationType.md @@ -0,0 +1,5 @@ +# Type Alias: PivotAggregationType + +> **PivotAggregationType** = `"SUM"` \| `"AVG"` \| `"MIN"` \| `"MAX"` \| `"COUNT"` \| `"LATEST"` \| `"EARLIEST"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:233](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L233) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/RadioGroupAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/RadioGroupAlignment.md new file mode 100644 index 000000000..402c1e973 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/RadioGroupAlignment.md @@ -0,0 +1,7 @@ +# Type Alias: RadioGroupAlignment + +> **RadioGroupAlignment** = *typeof* [`RadioGroupAlignment`](../variables/RadioGroupAlignment.md)\[keyof *typeof* [`RadioGroupAlignment`](../variables/RadioGroupAlignment.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L25) + +Determines the Radio Group alignment diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/SelectionState.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/SelectionState.md new file mode 100644 index 000000000..7c1f17f7d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/SelectionState.md @@ -0,0 +1,8 @@ +# Type Alias: SelectionState + +> **SelectionState** = [`ISelectionKeyboardState`](../interfaces/ISelectionKeyboardState.md) \| [`ISelectionPointerState`](../interfaces/ISelectionPointerState.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:101](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L101) + +Represents the overall state of grid selection, combining both keyboard and pointer interaction states. +It can be either an ISelectionKeyboardState or an ISelectionPointerState. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/SliderHandle.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/SliderHandle.md new file mode 100644 index 000000000..b107a3284 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/SliderHandle.md @@ -0,0 +1,5 @@ +# Type Alias: SliderHandle + +> **SliderHandle** = *typeof* [`SliderHandle`](../variables/SliderHandle.md)\[keyof *typeof* [`SliderHandle`](../variables/SliderHandle.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L70) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/TickLabelsOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/TickLabelsOrientation.md new file mode 100644 index 000000000..2e95b319a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/TickLabelsOrientation.md @@ -0,0 +1,7 @@ +# Type Alias: TickLabelsOrientation + +> **TickLabelsOrientation** = *typeof* [`TickLabelsOrientation`](../variables/TickLabelsOrientation.md)\[keyof *typeof* [`TickLabelsOrientation`](../variables/TickLabelsOrientation.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L79) + +Slider Tick labels Orientation diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/TicksOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/TicksOrientation.md new file mode 100644 index 000000000..e06cad67f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/TicksOrientation.md @@ -0,0 +1,7 @@ +# Type Alias: TicksOrientation + +> **TicksOrientation** = *typeof* [`TicksOrientation`](../variables/TicksOrientation.md)\[keyof *typeof* [`TicksOrientation`](../variables/TicksOrientation.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L89) + +Slider Ticks orientation diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ValidationStatus.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ValidationStatus.md new file mode 100644 index 000000000..294eb47c7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/ValidationStatus.md @@ -0,0 +1,9 @@ +# Type Alias: ValidationStatus + +> **ValidationStatus** = `"VALID"` \| `"INVALID"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:296](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L296) + +Type representing the validation status. +- 'VALID': The validation status is valid. +- 'INVALID': The validation status is invalid. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/VerticalAnimationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/VerticalAnimationType.md new file mode 100644 index 000000000..ddf401067 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/VerticalAnimationType.md @@ -0,0 +1,5 @@ +# Type Alias: VerticalAnimationType + +> **VerticalAnimationType** = *typeof* [`VerticalAnimationType`](../variables/VerticalAnimationType.md)\[keyof *typeof* [`VerticalAnimationType`](../variables/VerticalAnimationType.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L138) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/WeekDays.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/WeekDays.md new file mode 100644 index 000000000..a97f55d69 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/type-aliases/WeekDays.md @@ -0,0 +1,5 @@ +# Type Alias: WeekDays + +> **WeekDays** = `"sunday"` \| `"monday"` \| `"tuesday"` \| `"wednesday"` \| `"thursday"` \| `"friday"` \| `"saturday"` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L25) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ActionStripResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ActionStripResourceStringsEN.md new file mode 100644 index 000000000..40c6b8478 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ActionStripResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: ActionStripResourceStringsEN + +> `const` **ActionStripResourceStringsEN**: [`IActionStripResourceStrings`](../type-aliases/IActionStripResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/action-strip-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/action-strip-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/BannerResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/BannerResourceStringsEN.md new file mode 100644 index 000000000..fdc7c180c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/BannerResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: BannerResourceStringsEN + +> `const` **BannerResourceStringsEN**: [`IBannerResourceStrings`](../type-aliases/IBannerResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/banner-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/banner-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ButtonGroupAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ButtonGroupAlignment.md new file mode 100644 index 000000000..bb459ee9b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ButtonGroupAlignment.md @@ -0,0 +1,17 @@ +# Variable: ButtonGroupAlignment + +> `const` **ButtonGroupAlignment**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/button-group.component.ts#L13) + +Determines the Button Group alignment + +## Type Declaration + +### horizontal + +> `readonly` **horizontal**: `"horizontal"` = `'horizontal'` + +### vertical + +> `readonly` **vertical**: `"vertical"` = `'vertical'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CalendarResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CalendarResourceStringsEN.md new file mode 100644 index 000000000..115e7b251 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CalendarResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: CalendarResourceStringsEN + +> `const` **CalendarResourceStringsEN**: [`ICalendarResourceStrings`](../type-aliases/ICalendarResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/calendar-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/calendar-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CalendarSelection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CalendarSelection.md new file mode 100644 index 000000000..1ba32d7f1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CalendarSelection.md @@ -0,0 +1,21 @@ +# Variable: CalendarSelection + +> `const` **CalendarSelection**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:5](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L5) + +Sets the selection type - single, multi or range. + +## Type Declaration + +### MULTI + +> `readonly` **MULTI**: `"multi"` = `'multi'` + +### RANGE + +> `readonly` **RANGE**: `"range"` = `'range'` + +### SINGLE + +> `readonly` **SINGLE**: `"single"` = `'single'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselAnimationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselAnimationType.md new file mode 100644 index 000000000..7d8f731ba --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselAnimationType.md @@ -0,0 +1,19 @@ +# Variable: CarouselAnimationType + +> `const` **CarouselAnimationType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/enums.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/enums.ts#L2) + +## Type Declaration + +### fade + +> `readonly` **fade**: `"fade"` = `'fade'` + +### none + +> `readonly` **none**: `"none"` = `'none'` + +### slide + +> `readonly` **slide**: `"slide"` = `'slide'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselIndicatorsOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselIndicatorsOrientation.md new file mode 100644 index 000000000..00d4725f7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselIndicatorsOrientation.md @@ -0,0 +1,31 @@ +# Variable: CarouselIndicatorsOrientation + +> `const` **CarouselIndicatorsOrientation**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/enums.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/enums.ts#L9) + +## Type Declaration + +### ~~bottom~~ + +> `readonly` **bottom**: `"bottom"` = `'bottom'` + +#### Deprecated + +in version 19.1.0. Use `end` instead. + +### end + +> `readonly` **end**: `"end"` = `'end'` + +### start + +> `readonly` **start**: `"start"` = `'start'` + +### ~~top~~ + +> `readonly` **top**: `"top"` = `'top'` + +#### Deprecated + +in version 19.1.0. Use `start` instead. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselResourceStringsEN.md new file mode 100644 index 000000000..eb95a225a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/CarouselResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: CarouselResourceStringsEN + +> `const` **CarouselResourceStringsEN**: [`ICarouselResourceStrings`](../type-aliases/ICarouselResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/carousel-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/carousel-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ChipResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ChipResourceStringsEN.md new file mode 100644 index 000000000..53476d7aa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ChipResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: ChipResourceStringsEN + +> `const` **ChipResourceStringsEN**: [`IChipResourceStrings`](../type-aliases/IChipResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/chip-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/chip-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ColumnDisplayOrder.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ColumnDisplayOrder.md new file mode 100644 index 000000000..011b782d5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ColumnDisplayOrder.md @@ -0,0 +1,17 @@ +# Variable: ColumnDisplayOrder + +> `const` **ColumnDisplayOrder**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:76](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L76) + +Enumeration representing different column display order options. + +## Type Declaration + +### Alphabetical + +> `readonly` **Alphabetical**: `"Alphabetical"` = `'Alphabetical'` + +### DisplayOrder + +> `readonly` **DisplayOrder**: `"DisplayOrder"` = `'DisplayOrder'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ComboResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ComboResourceStringsEN.md new file mode 100644 index 000000000..fd46c7916 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ComboResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: ComboResourceStringsEN + +> `const` **ComboResourceStringsEN**: [`IComboResourceStrings`](../type-aliases/IComboResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/combo-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/combo-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_LOCALE.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_LOCALE.md new file mode 100644 index 000000000..af2d183c7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_LOCALE.md @@ -0,0 +1,5 @@ +# Variable: DEFAULT\_LOCALE + +> `const` **DEFAULT\_LOCALE**: `"en-US"` = `'en-US'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/resources.ts:24](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/resources.ts#L24) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_OWNER.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_OWNER.md new file mode 100644 index 000000000..22929bfd9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_OWNER.md @@ -0,0 +1,5 @@ +# Variable: DEFAULT\_OWNER + +> `const` **DEFAULT\_OWNER**: `"default"` = `'default'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:168](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L168) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_PIVOT_KEYS.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_PIVOT_KEYS.md new file mode 100644 index 000000000..e6fc6a531 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DEFAULT_PIVOT_KEYS.md @@ -0,0 +1,33 @@ +# Variable: DEFAULT\_PIVOT\_KEYS + +> `const` **DEFAULT\_PIVOT\_KEYS**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts#L7) + +Default pivot keys used for data processing in the pivot pipes. + +## Type Declaration + +### aggregations + +> **aggregations**: `string` = `'aggregations'` + +### children + +> **children**: `string` = `'children'` + +### columnDimensionSeparator + +> **columnDimensionSeparator**: `string` = `'-'` + +### level + +> **level**: `string` = `'level'` + +### records + +> **records**: `string` = `'records'` + +### rowDimensionSeparator + +> **rowDimensionSeparator**: `string` = `'_'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DatePickerResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DatePickerResourceStringsEN.md new file mode 100644 index 000000000..263fb031a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DatePickerResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: DatePickerResourceStringsEN + +> `const` **DatePickerResourceStringsEN**: [`IDatePickerResourceStrings`](../type-aliases/IDatePickerResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/date-picker-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/date-picker-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DateRangePickerResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DateRangePickerResourceStringsEN.md new file mode 100644 index 000000000..289306c4f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DateRangePickerResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: DateRangePickerResourceStringsEN + +> `const` **DateRangePickerResourceStringsEN**: [`IDateRangePickerResourceStrings`](../type-aliases/IDateRangePickerResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/date-range-picker-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/date-range-picker-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DropDownActionKey.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DropDownActionKey.md new file mode 100644 index 000000000..e4e0f4c92 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/DropDownActionKey.md @@ -0,0 +1,25 @@ +# Variable: DropDownActionKey + +> `const` **DropDownActionKey**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L13) + +Key actions that have designated handlers in IgxDropDownComponent + +## Type Declaration + +### ENTER + +> `readonly` **ENTER**: `"enter"` = `'enter'` + +### ESCAPE + +> `readonly` **ESCAPE**: `"escape"` = `'escape'` + +### SPACE + +> `readonly` **SPACE**: `"space"` = `'space'` + +### TAB + +> `readonly` **TAB**: `"tab"` = `'tab'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/FilterMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/FilterMode.md new file mode 100644 index 000000000..07a8d0164 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/FilterMode.md @@ -0,0 +1,19 @@ +# Variable: FilterMode + +> `const` **FilterMode**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L7) + +Enumeration representing different filter modes for grid filtering. +- quickFilter: Default mode with a filter row UI between the column headers and the first row of records. +- excelStyleFilter: Filter mode where an Excel-style filter is used. + +## Type Declaration + +### excelStyleFilter + +> `readonly` **excelStyleFilter**: `"excelStyleFilter"` = `'excelStyleFilter'` + +### quickFilter + +> `readonly` **quickFilter**: `"quickFilter"` = `'quickFilter'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_LEVEL_COL.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_LEVEL_COL.md new file mode 100644 index 000000000..4d3953f79 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_LEVEL_COL.md @@ -0,0 +1,5 @@ +# Variable: GRID\_LEVEL\_COL + +> `const` **GRID\_LEVEL\_COL**: `"GRID_LEVEL_COL"` = `'GRID_LEVEL_COL'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:171](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L171) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_PARENT.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_PARENT.md new file mode 100644 index 000000000..e68ca4f46 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_PARENT.md @@ -0,0 +1,5 @@ +# Variable: GRID\_PARENT + +> `const` **GRID\_PARENT**: `"grid-parent"` = `'grid-parent'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:170](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L170) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_ROOT_SUMMARY.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_ROOT_SUMMARY.md new file mode 100644 index 000000000..77c074415 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GRID_ROOT_SUMMARY.md @@ -0,0 +1,5 @@ +# Variable: GRID\_ROOT\_SUMMARY + +> `const` **GRID\_ROOT\_SUMMARY**: `"igxGridRootSummary"` = `'igxGridRootSummary'` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts:169](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts#L169) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridCellMergeMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridCellMergeMode.md new file mode 100644 index 000000000..4a217e2cd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridCellMergeMode.md @@ -0,0 +1,19 @@ +# Variable: GridCellMergeMode + +> `const` **GridCellMergeMode**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:69](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L69) + +Enumeration representing different cell merging modes for the grid elements. +- 'onSort': Only merge cells in column that are sorted. +- 'always': Always merge adjacent cells based on merge strategy. + +## Type Declaration + +### always + +> `readonly` **always**: `"always"` = `'always'` + +### onSort + +> `readonly` **onSort**: `"onSort"` = `'onSort'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridPagingMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridPagingMode.md new file mode 100644 index 000000000..c618c66c6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridPagingMode.md @@ -0,0 +1,19 @@ +# Variable: GridPagingMode + +> `const` **GridPagingMode**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:98](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L98) + +Enumeration representing different paging modes for the grid. +- Local: The grid will use local data to extract pages during paging. +- Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions. + +## Type Declaration + +### Local + +> `readonly` **Local**: `"local"` = `'local'` + +### Remote + +> `readonly` **Remote**: `"remote"` = `'remote'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridResourceStringsEN.md new file mode 100644 index 000000000..a39896eb0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: GridResourceStringsEN + +> `const` **GridResourceStringsEN**: [`IGridResourceStrings`](../type-aliases/IGridResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/grid-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/grid-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSelectionMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSelectionMode.md new file mode 100644 index 000000000..3462e9709 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSelectionMode.md @@ -0,0 +1,29 @@ +# Variable: GridSelectionMode + +> `const` **GridSelectionMode**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:55](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L55) + +Enumeration representing different selection modes for the grid elements if can be selected. +- 'none': No selection is allowed. Default row and column selection mode. +- 'single': Only one element can be selected at a time. Selecting a new one will deselect the previously selected one. +- 'multiple': Default cell selection mode. More than one element can be selected at a time. +- 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action + +## Type Declaration + +### multiple + +> `readonly` **multiple**: `"multiple"` = `'multiple'` + +### multipleCascade + +> `readonly` **multipleCascade**: `"multipleCascade"` = `'multipleCascade'` + +### none + +> `readonly` **none**: `"none"` = `'none'` + +### single + +> `readonly` **single**: `"single"` = `'single'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSummaryCalculationMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSummaryCalculationMode.md new file mode 100644 index 000000000..5d1921947 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSummaryCalculationMode.md @@ -0,0 +1,24 @@ +# Variable: GridSummaryCalculationMode + +> `const` **GridSummaryCalculationMode**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/data-operations/grid-types.ts:475](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/data-operations/grid-types.ts#L475) + +Enumeration representing different calculation modes for grid summaries. +- rootLevelOnly: Summaries are calculated only for the root level. +- childLevelsOnly: Summaries are calculated only for child levels. +- rootAndChildLevels: Default value; Summaries are calculated for both root and child levels. + +## Type Declaration + +### childLevelsOnly + +> `readonly` **childLevelsOnly**: `"childLevelsOnly"` = `'childLevelsOnly'` + +### rootAndChildLevels + +> `readonly` **rootAndChildLevels**: `"rootAndChildLevels"` = `'rootAndChildLevels'` + +### rootLevelOnly + +> `readonly` **rootLevelOnly**: `"rootLevelOnly"` = `'rootLevelOnly'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSummaryPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSummaryPosition.md new file mode 100644 index 000000000..ee5a6dff5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/GridSummaryPosition.md @@ -0,0 +1,19 @@ +# Variable: GridSummaryPosition + +> `const` **GridSummaryPosition**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/enums.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/enums.ts#L18) + +Enumeration representing the position of grid summary rows. +- top: Default value; Summary rows are displayed at the top of the grid. +- bottom: Summary rows are displayed at the bottom of the grid. + +## Type Declaration + +### bottom + +> `readonly` **bottom**: `"bottom"` = `'bottom'` + +### top + +> `readonly` **top**: `"top"` = `'top'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/HorizontalAnimationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/HorizontalAnimationType.md new file mode 100644 index 000000000..5771f0ae4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/HorizontalAnimationType.md @@ -0,0 +1,19 @@ +# Variable: HorizontalAnimationType + +> `const` **HorizontalAnimationType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:145](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L145) + +## Type Declaration + +### fade + +> `readonly` **fade**: `"fade"` = `'fade'` + +### none + +> `readonly` **none**: `"none"` = `'none'` + +### slide + +> `readonly` **slide**: `"slide"` = `'slide'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/I18N_FORMATTER.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/I18N_FORMATTER.md new file mode 100644 index 000000000..597102aca --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/I18N_FORMATTER.md @@ -0,0 +1,7 @@ +# Variable: I18N\_FORMATTER + +> `const` **I18N\_FORMATTER**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.ts#L16) + +Injection token that allows for retrieving the i18n formatter for the IgniteUI components. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_ACCORDION_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_ACCORDION_DIRECTIVES.md new file mode 100644 index 000000000..bf75b0037 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_ACCORDION_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_ACCORDION\_DIRECTIVES + +> `const` **IGX\_ACCORDION\_DIRECTIVES**: readonly \[*typeof* [`IgxAccordionComponent`](../classes/IgxAccordionComponent.md), *typeof* [`IgxExpansionPanelComponent`](../classes/IgxExpansionPanelComponent.md), *typeof* [`IgxExpansionPanelHeaderComponent`](../classes/IgxExpansionPanelHeaderComponent.md), *typeof* [`IgxExpansionPanelBodyComponent`](../classes/IgxExpansionPanelBodyComponent.md), *typeof* `IgxExpansionPanelDescriptionDirective`, *typeof* `IgxExpansionPanelTitleDirective`, *typeof* `IgxExpansionPanelIconDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/accordion/src/accordion/public\_api.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/accordion/src/accordion/public_api.ts#L18) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_ACTION_STRIP_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_ACTION_STRIP_DIRECTIVES.md new file mode 100644 index 000000000..880792db8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_ACTION_STRIP_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_ACTION\_STRIP\_DIRECTIVES + +> `const` **IGX\_ACTION\_STRIP\_DIRECTIVES**: readonly \[*typeof* [`IgxActionStripComponent`](../classes/IgxActionStripComponent.md), *typeof* [`IgxActionStripMenuItemDirective`](../classes/IgxActionStripMenuItemDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/action-strip/src/action-strip/public\_api.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/action-strip/src/action-strip/public_api.ts#L6) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BANNER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BANNER_DIRECTIVES.md new file mode 100644 index 000000000..a6efdde74 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BANNER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_BANNER\_DIRECTIVES + +> `const` **IGX\_BANNER\_DIRECTIVES**: readonly \[*typeof* [`IgxBannerComponent`](../classes/IgxBannerComponent.md), *typeof* [`IgxBannerActionsDirective`](../classes/IgxBannerActionsDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/banner/src/banner/public\_api.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/banner/src/banner/public_api.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BOTTOM_NAV_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BOTTOM_NAV_DIRECTIVES.md new file mode 100644 index 000000000..3289fff17 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BOTTOM_NAV_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_BOTTOM\_NAV\_DIRECTIVES + +> `const` **IGX\_BOTTOM\_NAV\_DIRECTIVES**: readonly \[*typeof* [`IgxBottomNavComponent`](../classes/IgxBottomNavComponent.md), *typeof* [`IgxBottomNavItemComponent`](../classes/IgxBottomNavItemComponent.md), *typeof* [`IgxBottomNavHeaderComponent`](../classes/IgxBottomNavHeaderComponent.md), *typeof* [`IgxBottomNavContentComponent`](../classes/IgxBottomNavContentComponent.md), *typeof* [`IgxBottomNavHeaderLabelDirective`](../classes/IgxBottomNavHeaderLabelDirective.md), *typeof* [`IgxBottomNavHeaderIconDirective`](../classes/IgxBottomNavHeaderIconDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/bottom-nav/src/bottom-nav/public\_api.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/bottom-nav/src/bottom-nav/public_api.ts#L14) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BUTTON_GROUP_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BUTTON_GROUP_DIRECTIVES.md new file mode 100644 index 000000000..f3dab80c7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_BUTTON_GROUP_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_BUTTON\_GROUP\_DIRECTIVES + +> `const` **IGX\_BUTTON\_GROUP\_DIRECTIVES**: readonly \[*typeof* [`IgxButtonGroupComponent`](../classes/IgxButtonGroupComponent.md), *typeof* [`IgxButtonDirective`](../classes/IgxButtonDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/button-group/src/button-group/public\_api.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/button-group/src/button-group/public_api.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CALENDAR_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CALENDAR_DIRECTIVES.md new file mode 100644 index 000000000..44e5bf1b8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CALENDAR_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_CALENDAR\_DIRECTIVES + +> `const` **IGX\_CALENDAR\_DIRECTIVES**: readonly \[*typeof* [`IgxCalendarComponent`](../classes/IgxCalendarComponent.md), *typeof* [`IgxDaysViewComponent`](../classes/IgxDaysViewComponent.md), *typeof* [`IgxMonthsViewComponent`](../classes/IgxMonthsViewComponent.md), *typeof* [`IgxYearsViewComponent`](../classes/IgxYearsViewComponent.md), *typeof* [`IgxMonthPickerComponent`](../classes/IgxMonthPickerComponent.md), *typeof* `IgxCalendarHeaderTemplateDirective`, *typeof* `IgxCalendarHeaderTitleTemplateDirective`, *typeof* [`IgxCalendarMonthDirective`](../classes/IgxCalendarMonthDirective.md), *typeof* `IgxCalendarYearDirective`, *typeof* `IgxCalendarSubheaderTemplateDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/public\_api.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/public_api.ts#L17) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CALENDAR_VIEW_ITEM.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CALENDAR_VIEW_ITEM.md new file mode 100644 index 000000000..9f163f8f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CALENDAR_VIEW_ITEM.md @@ -0,0 +1,5 @@ +# Variable: IGX\_CALENDAR\_VIEW\_ITEM + +> `const` **IGX\_CALENDAR\_VIEW\_ITEM**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts:13](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.directives.ts#L13) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CARD_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CARD_DIRECTIVES.md new file mode 100644 index 000000000..770636957 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CARD_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_CARD\_DIRECTIVES + +> `const` **IGX\_CARD\_DIRECTIVES**: readonly \[*typeof* [`IgxCardComponent`](../classes/IgxCardComponent.md), *typeof* [`IgxCardHeaderComponent`](../classes/IgxCardHeaderComponent.md), *typeof* [`IgxCardMediaDirective`](../classes/IgxCardMediaDirective.md), *typeof* [`IgxCardContentDirective`](../classes/IgxCardContentDirective.md), *typeof* [`IgxCardActionsComponent`](../classes/IgxCardActionsComponent.md), *typeof* [`IgxCardFooterDirective`](../classes/IgxCardFooterDirective.md), *typeof* [`IgxCardHeaderTitleDirective`](../classes/IgxCardHeaderTitleDirective.md), *typeof* [`IgxCardHeaderSubtitleDirective`](../classes/IgxCardHeaderSubtitleDirective.md), *typeof* [`IgxCardThumbnailDirective`](../classes/IgxCardThumbnailDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/public\_api.ts:16](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/public_api.ts#L16) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CAROUSEL_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CAROUSEL_DIRECTIVES.md new file mode 100644 index 000000000..72773b0d9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CAROUSEL_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_CAROUSEL\_DIRECTIVES + +> `const` **IGX\_CAROUSEL\_DIRECTIVES**: readonly \[*typeof* [`IgxCarouselComponent`](../classes/IgxCarouselComponent.md), *typeof* [`IgxSlideComponent`](../classes/IgxSlideComponent.md), *typeof* [`IgxCarouselIndicatorDirective`](../classes/IgxCarouselIndicatorDirective.md), *typeof* [`IgxCarouselNextButtonDirective`](../classes/IgxCarouselNextButtonDirective.md), *typeof* [`IgxCarouselPrevButtonDirective`](../classes/IgxCarouselPrevButtonDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/carousel/src/carousel/public\_api.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/carousel/src/carousel/public_api.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CHIPS_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CHIPS_DIRECTIVES.md new file mode 100644 index 000000000..258e57493 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CHIPS_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_CHIPS\_DIRECTIVES + +> `const` **IGX\_CHIPS\_DIRECTIVES**: readonly \[*typeof* [`IgxChipsAreaComponent`](../classes/IgxChipsAreaComponent.md), *typeof* [`IgxChipComponent`](../classes/IgxChipComponent.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/public\_api.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/public_api.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES.md new file mode 100644 index 000000000..8fbafe68a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_CIRCULAR\_PROGRESS\_BAR\_DIRECTIVES + +> `const` **IGX\_CIRCULAR\_PROGRESS\_BAR\_DIRECTIVES**: readonly \[*typeof* [`IgxCircularProgressBarComponent`](../classes/IgxCircularProgressBarComponent.md), *typeof* [`IgxProgressBarTextTemplateDirective`](../classes/IgxProgressBarTextTemplateDirective.md), *typeof* [`IgxProgressBarGradientDirective`](../classes/IgxProgressBarGradientDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/public\_api.ts:28](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts#L28) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_COMBO_COMPONENT.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_COMBO_COMPONENT.md new file mode 100644 index 000000000..0aa1baafb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_COMBO_COMPONENT.md @@ -0,0 +1,5 @@ +# Variable: IGX\_COMBO\_COMPONENT + +> `const` **IGX\_COMBO\_COMPONENT**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/combo.common.ts:59](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/combo.common.ts#L59) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_COMBO_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_COMBO_DIRECTIVES.md new file mode 100644 index 000000000..157514b2a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_COMBO_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_COMBO\_DIRECTIVES + +> `const` **IGX\_COMBO\_DIRECTIVES**: readonly \[*typeof* [`IgxComboComponent`](../classes/IgxComboComponent.md), *typeof* [`IgxComboAddItemDirective`](../classes/IgxComboAddItemDirective.md), *typeof* [`IgxComboClearIconDirective`](../classes/IgxComboClearIconDirective.md), *typeof* [`IgxComboEmptyDirective`](../classes/IgxComboEmptyDirective.md), *typeof* [`IgxComboFooterDirective`](../classes/IgxComboFooterDirective.md), *typeof* [`IgxComboHeaderDirective`](../classes/IgxComboHeaderDirective.md), *typeof* [`IgxComboHeaderItemDirective`](../classes/IgxComboHeaderItemDirective.md), *typeof* [`IgxComboItemDirective`](../classes/IgxComboItemDirective.md), *typeof* [`IgxComboToggleIconDirective`](../classes/IgxComboToggleIconDirective.md), *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/combo/src/combo/public\_api.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/combo/src/combo/public_api.ts#L25) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DATE_PICKER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DATE_PICKER_DIRECTIVES.md new file mode 100644 index 000000000..65e44766d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DATE_PICKER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_DATE\_PICKER\_DIRECTIVES + +> `const` **IGX\_DATE\_PICKER\_DIRECTIVES**: readonly \[*typeof* [`IgxDatePickerComponent`](../classes/IgxDatePickerComponent.md), *typeof* [`IgxPickerToggleComponent`](../classes/IgxPickerToggleComponent.md), *typeof* [`IgxPickerClearComponent`](../classes/IgxPickerClearComponent.md), *typeof* [`IgxPickerActionsDirective`](../classes/IgxPickerActionsDirective.md), *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md), *typeof* `IgxCalendarHeaderTemplateDirective`, *typeof* `IgxCalendarSubheaderTemplateDirective`, *typeof* `IgxCalendarHeaderTitleTemplateDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-picker/public\_api.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-picker/public_api.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DATE_RANGE_PICKER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DATE_RANGE_PICKER_DIRECTIVES.md new file mode 100644 index 000000000..e4175b578 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DATE_RANGE_PICKER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_DATE\_RANGE\_PICKER\_DIRECTIVES + +> `const` **IGX\_DATE\_RANGE\_PICKER\_DIRECTIVES**: readonly \[*typeof* [`IgxDateRangePickerComponent`](../classes/IgxDateRangePickerComponent.md), *typeof* [`IgxPickerToggleComponent`](../classes/IgxPickerToggleComponent.md), *typeof* [`IgxPickerClearComponent`](../classes/IgxPickerClearComponent.md), *typeof* [`IgxDateRangeStartComponent`](../classes/IgxDateRangeStartComponent.md), *typeof* [`IgxDateRangeEndComponent`](../classes/IgxDateRangeEndComponent.md), *typeof* [`IgxDateRangeSeparatorDirective`](../classes/IgxDateRangeSeparatorDirective.md), *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md), *typeof* `IgxCalendarHeaderTemplateDirective`, *typeof* `IgxCalendarSubheaderTemplateDirective`, *typeof* `IgxCalendarHeaderTitleTemplateDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/date-picker/src/date-range-picker/public\_api.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/date-picker/src/date-range-picker/public_api.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DIALOG_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DIALOG_DIRECTIVES.md new file mode 100644 index 000000000..2f83f8a52 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DIALOG_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_DIALOG\_DIRECTIVES + +> `const` **IGX\_DIALOG\_DIRECTIVES**: readonly \[*typeof* [`IgxDialogComponent`](../classes/IgxDialogComponent.md), *typeof* `IgxDialogTitleDirective`, *typeof* `IgxDialogActionsDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/dialog/src/dialog/public\_api.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/dialog/src/dialog/public_api.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DRAG_DROP_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DRAG_DROP_DIRECTIVES.md new file mode 100644 index 000000000..4fac6c6aa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DRAG_DROP_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_DRAG\_DROP\_DIRECTIVES + +> `const` **IGX\_DRAG\_DROP\_DIRECTIVES**: readonly \[*typeof* [`IgxDragDirective`](../classes/IgxDragDirective.md), *typeof* [`IgxDropDirective`](../classes/IgxDropDirective.md), *typeof* [`IgxDragHandleDirective`](../classes/IgxDragHandleDirective.md), *typeof* [`IgxDragIgnoreDirective`](../classes/IgxDragIgnoreDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/drag-drop/public\_api.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/drag-drop/public_api.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DROPDOWN_BASE.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DROPDOWN_BASE.md new file mode 100644 index 000000000..2f7d3a6a2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DROPDOWN_BASE.md @@ -0,0 +1,5 @@ +# Variable: IGX\_DROPDOWN\_BASE + +> `const` **IGX\_DROPDOWN\_BASE**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts:45](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/drop-down.common.ts#L45) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DROP_DOWN_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DROP_DOWN_DIRECTIVES.md new file mode 100644 index 000000000..3581c39f6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_DROP_DOWN_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_DROP\_DOWN\_DIRECTIVES + +> `const` **IGX\_DROP\_DOWN\_DIRECTIVES**: readonly \[*typeof* [`IgxDropDownComponent`](../classes/IgxDropDownComponent.md), *typeof* [`IgxDropDownItemComponent`](../classes/IgxDropDownItemComponent.md), *typeof* [`IgxDropDownGroupComponent`](../classes/IgxDropDownGroupComponent.md), *typeof* [`IgxDropDownItemNavigationDirective`](../classes/IgxDropDownItemNavigationDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/drop-down/src/drop-down/public\_api.ts:18](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/drop-down/src/drop-down/public_api.ts#L18) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_EXPANSION_PANEL_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_EXPANSION_PANEL_DIRECTIVES.md new file mode 100644 index 000000000..935cf7687 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_EXPANSION_PANEL_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_EXPANSION\_PANEL\_DIRECTIVES + +> `const` **IGX\_EXPANSION\_PANEL\_DIRECTIVES**: readonly \[*typeof* [`IgxExpansionPanelComponent`](../classes/IgxExpansionPanelComponent.md), *typeof* [`IgxExpansionPanelHeaderComponent`](../classes/IgxExpansionPanelHeaderComponent.md), *typeof* [`IgxExpansionPanelBodyComponent`](../classes/IgxExpansionPanelBodyComponent.md), *typeof* `IgxExpansionPanelDescriptionDirective`, *typeof* `IgxExpansionPanelTitleDirective`, *typeof* `IgxExpansionPanelIconDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/expansion-panel/src/expansion-panel/public\_api.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/expansion-panel/src/expansion-panel/public_api.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_BASE.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_BASE.md new file mode 100644 index 000000000..3cfd9e5fa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_BASE.md @@ -0,0 +1,5 @@ +# Variable: IGX\_GRID\_BASE + +> `const` **IGX\_GRID\_BASE**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L25) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_COMMON_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_COMMON_DIRECTIVES.md new file mode 100644 index 000000000..5200b7eab --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_COMMON_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_GRID\_COMMON\_DIRECTIVES + +> `const` **IGX\_GRID\_COMMON\_DIRECTIVES**: readonly \[*typeof* [`IgxRowDirective`](../classes/IgxRowDirective.md), *typeof* [`IgxGridFooterComponent`](../classes/IgxGridFooterComponent.md), *typeof* [`IgxAdvancedFilteringDialogComponent`](../classes/IgxAdvancedFilteringDialogComponent.md), *typeof* `IgxRowExpandedIndicatorDirective`, *typeof* `IgxRowCollapsedIndicatorDirective`, *typeof* `IgxHeaderExpandedIndicatorDirective`, *typeof* `IgxHeaderCollapsedIndicatorDirective`, *typeof* `IgxExcelStyleHeaderIconDirective`, *typeof* `IgxSortAscendingHeaderIconDirective`, *typeof* `IgxSortDescendingHeaderIconDirective`, *typeof* `IgxSortHeaderIconDirective`, *typeof* `IgxGridEmptyTemplateDirective`, *typeof* `IgxGridLoadingTemplateDirective`, *typeof* `IgxDragIndicatorIconDirective`, *typeof* `IgxRowDragGhostDirective`, *typeof* [`IgxGridStateDirective`](../classes/IgxGridStateDirective.md), *typeof* `IgxGridHeaderComponent`, *typeof* `IgxGridHeaderGroupComponent`, *typeof* `IgxGridHeaderRowComponent`, *typeof* [`IgxFilterCellTemplateDirective`](../classes/IgxFilterCellTemplateDirective.md), *typeof* [`IgxSummaryTemplateDirective`](../classes/IgxSummaryTemplateDirective.md), *typeof* [`IgxCellTemplateDirective`](../classes/IgxCellTemplateDirective.md), *typeof* [`IgxCellValidationErrorDirective`](../classes/IgxCellValidationErrorDirective.md), *typeof* [`IgxCellHeaderTemplateDirective`](../classes/IgxCellHeaderTemplateDirective.md), *typeof* `IgxCellFooterTemplateDirective`, *typeof* [`IgxCellEditorTemplateDirective`](../classes/IgxCellEditorTemplateDirective.md), *typeof* [`IgxCollapsibleIndicatorTemplateDirective`](../classes/IgxCollapsibleIndicatorTemplateDirective.md), *typeof* [`IgxColumnComponent`](../classes/IgxColumnComponent.md), *typeof* [`IgxColumnGroupComponent`](../classes/IgxColumnGroupComponent.md), *typeof* [`IgxColumnLayoutComponent`](../classes/IgxColumnLayoutComponent.md), *typeof* [`IgxColumnActionsComponent`](../classes/IgxColumnActionsComponent.md), *typeof* [`IgxColumnHidingDirective`](../classes/IgxColumnHidingDirective.md), *typeof* [`IgxColumnPinningDirective`](../classes/IgxColumnPinningDirective.md), *typeof* `IgxRowSelectorDirective`, *typeof* `IgxGroupByRowSelectorDirective`, *typeof* `IgxHeadSelectorDirective`, *typeof* [`IgxCSVTextDirective`](../classes/IgxCSVTextDirective.md), *typeof* [`IgxExcelTextDirective`](../classes/IgxExcelTextDirective.md), *typeof* [`IgxGridToolbarActionsComponent`](../classes/IgxGridToolbarActionsComponent.md), *typeof* [`IgxGridToolbarAdvancedFilteringComponent`](../classes/IgxGridToolbarAdvancedFilteringComponent.md), *typeof* [`IgxGridToolbarComponent`](../classes/IgxGridToolbarComponent.md), *typeof* [`IgxGridToolbarExporterComponent`](../classes/IgxGridToolbarExporterComponent.md), *typeof* [`IgxGridToolbarHidingComponent`](../classes/IgxGridToolbarHidingComponent.md), *typeof* [`IgxGridToolbarPinningComponent`](../classes/IgxGridToolbarPinningComponent.md), *typeof* [`IgxGridToolbarTitleComponent`](../classes/IgxGridToolbarTitleComponent.md), *typeof* [`IgxGridToolbarDirective`](../classes/IgxGridToolbarDirective.md), *typeof* [`IgxGridExcelStyleFilteringComponent`](../classes/IgxGridExcelStyleFilteringComponent.md), *typeof* [`IgxExcelStyleHeaderComponent`](../classes/IgxExcelStyleHeaderComponent.md), *typeof* [`IgxExcelStyleSortingComponent`](../classes/IgxExcelStyleSortingComponent.md), *typeof* [`IgxExcelStylePinningComponent`](../classes/IgxExcelStylePinningComponent.md), *typeof* [`IgxExcelStyleHidingComponent`](../classes/IgxExcelStyleHidingComponent.md), *typeof* [`IgxExcelStyleSelectingComponent`](../classes/IgxExcelStyleSelectingComponent.md), *typeof* [`IgxExcelStyleClearFiltersComponent`](../classes/IgxExcelStyleClearFiltersComponent.md), *typeof* [`IgxExcelStyleConditionalFilterComponent`](../classes/IgxExcelStyleConditionalFilterComponent.md), *typeof* [`IgxExcelStyleMovingComponent`](../classes/IgxExcelStyleMovingComponent.md), *typeof* [`IgxExcelStyleSearchComponent`](../classes/IgxExcelStyleSearchComponent.md), *typeof* [`IgxExcelStyleColumnOperationsTemplateDirective`](../classes/IgxExcelStyleColumnOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleFilterOperationsTemplateDirective`](../classes/IgxExcelStyleFilterOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleLoadingValuesTemplateDirective`](../classes/IgxExcelStyleLoadingValuesTemplateDirective.md), *typeof* [`IgxGridPinningActionsComponent`](../classes/IgxGridPinningActionsComponent.md), *typeof* [`IgxGridEditingActionsComponent`](../classes/IgxGridEditingActionsComponent.md), *typeof* [`IgxGridActionsBaseDirective`](../classes/IgxGridActionsBaseDirective.md), *typeof* [`IgxGridActionButtonComponent`](../classes/IgxGridActionButtonComponent.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/public\_api.ts:149](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/public_api.ts#L149) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_DIRECTIVES.md new file mode 100644 index 000000000..3af842ca5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_GRID\_DIRECTIVES + +> `const` **IGX\_GRID\_DIRECTIVES**: readonly \[*typeof* [`IgxGridComponent`](../classes/IgxGridComponent.md), *typeof* `IgxGroupByRowTemplateDirective`, *typeof* `IgxGridDetailTemplateDirective`, *typeof* `IgxRowAddTextDirective`, *typeof* `IgxRowEditActionsDirective`, *typeof* `IgxRowEditTextDirective`, *typeof* `IgxRowEditTabStopDirective`, *typeof* [`IgxRowDirective`](../classes/IgxRowDirective.md), *typeof* [`IgxGridFooterComponent`](../classes/IgxGridFooterComponent.md), *typeof* [`IgxAdvancedFilteringDialogComponent`](../classes/IgxAdvancedFilteringDialogComponent.md), *typeof* `IgxRowExpandedIndicatorDirective`, *typeof* `IgxRowCollapsedIndicatorDirective`, *typeof* `IgxHeaderExpandedIndicatorDirective`, *typeof* `IgxHeaderCollapsedIndicatorDirective`, *typeof* `IgxExcelStyleHeaderIconDirective`, *typeof* `IgxSortAscendingHeaderIconDirective`, *typeof* `IgxSortDescendingHeaderIconDirective`, *typeof* `IgxSortHeaderIconDirective`, *typeof* `IgxGridEmptyTemplateDirective`, *typeof* `IgxGridLoadingTemplateDirective`, *typeof* `IgxDragIndicatorIconDirective`, *typeof* `IgxRowDragGhostDirective`, *typeof* [`IgxGridStateDirective`](../classes/IgxGridStateDirective.md), *typeof* [`IgxGridPinningActionsComponent`](../classes/IgxGridPinningActionsComponent.md), *typeof* [`IgxGridEditingActionsComponent`](../classes/IgxGridEditingActionsComponent.md), *typeof* [`IgxGridActionsBaseDirective`](../classes/IgxGridActionsBaseDirective.md), *typeof* [`IgxGridActionButtonComponent`](../classes/IgxGridActionButtonComponent.md), *typeof* `IgxGridHeaderComponent`, *typeof* `IgxGridHeaderGroupComponent`, *typeof* `IgxGridHeaderRowComponent`, *typeof* [`IgxFilterCellTemplateDirective`](../classes/IgxFilterCellTemplateDirective.md), *typeof* [`IgxSummaryTemplateDirective`](../classes/IgxSummaryTemplateDirective.md), *typeof* [`IgxCellTemplateDirective`](../classes/IgxCellTemplateDirective.md), *typeof* [`IgxCellValidationErrorDirective`](../classes/IgxCellValidationErrorDirective.md), *typeof* [`IgxCellHeaderTemplateDirective`](../classes/IgxCellHeaderTemplateDirective.md), *typeof* `IgxCellFooterTemplateDirective`, *typeof* [`IgxCellEditorTemplateDirective`](../classes/IgxCellEditorTemplateDirective.md), *typeof* [`IgxCollapsibleIndicatorTemplateDirective`](../classes/IgxCollapsibleIndicatorTemplateDirective.md), *typeof* [`IgxColumnComponent`](../classes/IgxColumnComponent.md), *typeof* [`IgxColumnGroupComponent`](../classes/IgxColumnGroupComponent.md), *typeof* [`IgxColumnLayoutComponent`](../classes/IgxColumnLayoutComponent.md), *typeof* [`IgxColumnActionsComponent`](../classes/IgxColumnActionsComponent.md), *typeof* [`IgxColumnHidingDirective`](../classes/IgxColumnHidingDirective.md), *typeof* [`IgxColumnPinningDirective`](../classes/IgxColumnPinningDirective.md), *typeof* `IgxRowSelectorDirective`, *typeof* `IgxGroupByRowSelectorDirective`, *typeof* `IgxHeadSelectorDirective`, *typeof* [`IgxCSVTextDirective`](../classes/IgxCSVTextDirective.md), *typeof* [`IgxExcelTextDirective`](../classes/IgxExcelTextDirective.md), *typeof* [`IgxGridToolbarActionsComponent`](../classes/IgxGridToolbarActionsComponent.md), *typeof* [`IgxGridToolbarAdvancedFilteringComponent`](../classes/IgxGridToolbarAdvancedFilteringComponent.md), *typeof* [`IgxGridToolbarComponent`](../classes/IgxGridToolbarComponent.md), *typeof* [`IgxGridToolbarExporterComponent`](../classes/IgxGridToolbarExporterComponent.md), *typeof* [`IgxGridToolbarHidingComponent`](../classes/IgxGridToolbarHidingComponent.md), *typeof* [`IgxGridToolbarPinningComponent`](../classes/IgxGridToolbarPinningComponent.md), *typeof* [`IgxGridToolbarTitleComponent`](../classes/IgxGridToolbarTitleComponent.md), *typeof* [`IgxGridToolbarDirective`](../classes/IgxGridToolbarDirective.md), *typeof* [`IgxGridExcelStyleFilteringComponent`](../classes/IgxGridExcelStyleFilteringComponent.md), *typeof* [`IgxExcelStyleHeaderComponent`](../classes/IgxExcelStyleHeaderComponent.md), *typeof* [`IgxExcelStyleSortingComponent`](../classes/IgxExcelStyleSortingComponent.md), *typeof* [`IgxExcelStylePinningComponent`](../classes/IgxExcelStylePinningComponent.md), *typeof* [`IgxExcelStyleHidingComponent`](../classes/IgxExcelStyleHidingComponent.md), *typeof* [`IgxExcelStyleSelectingComponent`](../classes/IgxExcelStyleSelectingComponent.md), *typeof* [`IgxExcelStyleClearFiltersComponent`](../classes/IgxExcelStyleClearFiltersComponent.md), *typeof* [`IgxExcelStyleConditionalFilterComponent`](../classes/IgxExcelStyleConditionalFilterComponent.md), *typeof* [`IgxExcelStyleMovingComponent`](../classes/IgxExcelStyleMovingComponent.md), *typeof* [`IgxExcelStyleSearchComponent`](../classes/IgxExcelStyleSearchComponent.md), *typeof* [`IgxExcelStyleColumnOperationsTemplateDirective`](../classes/IgxExcelStyleColumnOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleFilterOperationsTemplateDirective`](../classes/IgxExcelStyleFilterOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleLoadingValuesTemplateDirective`](../classes/IgxExcelStyleLoadingValuesTemplateDirective.md), *typeof* [`IgxColumnRequiredValidatorDirective`](../classes/IgxColumnRequiredValidatorDirective.md), *typeof* [`IgxColumnMinValidatorDirective`](../classes/IgxColumnMinValidatorDirective.md), *typeof* [`IgxColumnMaxValidatorDirective`](../classes/IgxColumnMaxValidatorDirective.md), *typeof* [`IgxColumnEmailValidatorDirective`](../classes/IgxColumnEmailValidatorDirective.md), *typeof* [`IgxColumnMinLengthValidatorDirective`](../classes/IgxColumnMinLengthValidatorDirective.md), *typeof* [`IgxColumnMaxLengthValidatorDirective`](../classes/IgxColumnMaxLengthValidatorDirective.md), *typeof* [`IgxColumnPatternValidatorDirective`](../classes/IgxColumnPatternValidatorDirective.md), *typeof* [`IgxPaginatorComponent`](../classes/IgxPaginatorComponent.md), *typeof* [`IgxPageNavigationComponent`](../classes/IgxPageNavigationComponent.md), *typeof* [`IgxPageSizeSelectorComponent`](../classes/IgxPageSizeSelectorComponent.md), *typeof* [`IgxPaginatorContentDirective`](../classes/IgxPaginatorContentDirective.md), *typeof* [`IgxPaginatorDirective`](../classes/IgxPaginatorDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/grid/src/grid.module.ts:94](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/grid/src/grid.module.ts#L94) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_SERVICE_BASE.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_SERVICE_BASE.md new file mode 100644 index 000000000..461d8b394 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_SERVICE_BASE.md @@ -0,0 +1,5 @@ +# Variable: IGX\_GRID\_SERVICE\_BASE + +> `const` **IGX\_GRID\_SERVICE\_BASE**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/grid.interface.ts:26](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/grid.interface.ts#L26) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_VALIDATION_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_VALIDATION_DIRECTIVES.md new file mode 100644 index 000000000..73151ddb9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_GRID_VALIDATION_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_GRID\_VALIDATION\_DIRECTIVES + +> `const` **IGX\_GRID\_VALIDATION\_DIRECTIVES**: readonly \[*typeof* [`IgxColumnRequiredValidatorDirective`](../classes/IgxColumnRequiredValidatorDirective.md), *typeof* [`IgxColumnMinValidatorDirective`](../classes/IgxColumnMinValidatorDirective.md), *typeof* [`IgxColumnMaxValidatorDirective`](../classes/IgxColumnMaxValidatorDirective.md), *typeof* [`IgxColumnEmailValidatorDirective`](../classes/IgxColumnEmailValidatorDirective.md), *typeof* [`IgxColumnMinLengthValidatorDirective`](../classes/IgxColumnMinLengthValidatorDirective.md), *typeof* [`IgxColumnMaxLengthValidatorDirective`](../classes/IgxColumnMaxLengthValidatorDirective.md), *typeof* [`IgxColumnPatternValidatorDirective`](../classes/IgxColumnPatternValidatorDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/columns/public\_api.ts:31](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/columns/public_api.ts#L31) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_HIERARCHICAL_GRID_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_HIERARCHICAL_GRID_DIRECTIVES.md new file mode 100644 index 000000000..0d437a60c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_HIERARCHICAL_GRID_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_HIERARCHICAL\_GRID\_DIRECTIVES + +> `const` **IGX\_HIERARCHICAL\_GRID\_DIRECTIVES**: readonly \[*typeof* [`IgxHierarchicalGridComponent`](../classes/IgxHierarchicalGridComponent.md), *typeof* [`IgxRowIslandComponent`](../classes/IgxRowIslandComponent.md), *typeof* `IgxRowAddTextDirective`, *typeof* `IgxRowEditActionsDirective`, *typeof* `IgxRowEditTextDirective`, *typeof* `IgxRowEditTabStopDirective`, *typeof* [`IgxRowDirective`](../classes/IgxRowDirective.md), *typeof* [`IgxGridFooterComponent`](../classes/IgxGridFooterComponent.md), *typeof* [`IgxAdvancedFilteringDialogComponent`](../classes/IgxAdvancedFilteringDialogComponent.md), *typeof* `IgxRowExpandedIndicatorDirective`, *typeof* `IgxRowCollapsedIndicatorDirective`, *typeof* `IgxHeaderExpandedIndicatorDirective`, *typeof* `IgxHeaderCollapsedIndicatorDirective`, *typeof* `IgxExcelStyleHeaderIconDirective`, *typeof* `IgxSortAscendingHeaderIconDirective`, *typeof* `IgxSortDescendingHeaderIconDirective`, *typeof* `IgxSortHeaderIconDirective`, *typeof* `IgxDragIndicatorIconDirective`, *typeof* `IgxRowDragGhostDirective`, *typeof* [`IgxGridStateDirective`](../classes/IgxGridStateDirective.md), *typeof* [`IgxGridPinningActionsComponent`](../classes/IgxGridPinningActionsComponent.md), *typeof* [`IgxGridEditingActionsComponent`](../classes/IgxGridEditingActionsComponent.md), *typeof* [`IgxGridActionsBaseDirective`](../classes/IgxGridActionsBaseDirective.md), *typeof* [`IgxGridActionButtonComponent`](../classes/IgxGridActionButtonComponent.md), *typeof* `IgxGridHeaderComponent`, *typeof* `IgxGridHeaderGroupComponent`, *typeof* `IgxGridHeaderRowComponent`, *typeof* [`IgxFilterCellTemplateDirective`](../classes/IgxFilterCellTemplateDirective.md), *typeof* [`IgxSummaryTemplateDirective`](../classes/IgxSummaryTemplateDirective.md), *typeof* [`IgxCellTemplateDirective`](../classes/IgxCellTemplateDirective.md), *typeof* [`IgxCellValidationErrorDirective`](../classes/IgxCellValidationErrorDirective.md), *typeof* [`IgxCellHeaderTemplateDirective`](../classes/IgxCellHeaderTemplateDirective.md), *typeof* `IgxCellFooterTemplateDirective`, *typeof* [`IgxCellEditorTemplateDirective`](../classes/IgxCellEditorTemplateDirective.md), *typeof* [`IgxCollapsibleIndicatorTemplateDirective`](../classes/IgxCollapsibleIndicatorTemplateDirective.md), *typeof* [`IgxColumnComponent`](../classes/IgxColumnComponent.md), *typeof* [`IgxColumnGroupComponent`](../classes/IgxColumnGroupComponent.md), *typeof* [`IgxColumnLayoutComponent`](../classes/IgxColumnLayoutComponent.md), *typeof* [`IgxColumnActionsComponent`](../classes/IgxColumnActionsComponent.md), *typeof* [`IgxColumnHidingDirective`](../classes/IgxColumnHidingDirective.md), *typeof* [`IgxColumnPinningDirective`](../classes/IgxColumnPinningDirective.md), *typeof* `IgxRowSelectorDirective`, *typeof* `IgxGroupByRowSelectorDirective`, *typeof* `IgxHeadSelectorDirective`, *typeof* [`IgxCSVTextDirective`](../classes/IgxCSVTextDirective.md), *typeof* [`IgxExcelTextDirective`](../classes/IgxExcelTextDirective.md), *typeof* [`IgxGridToolbarActionsComponent`](../classes/IgxGridToolbarActionsComponent.md), *typeof* [`IgxGridToolbarAdvancedFilteringComponent`](../classes/IgxGridToolbarAdvancedFilteringComponent.md), *typeof* [`IgxGridToolbarComponent`](../classes/IgxGridToolbarComponent.md), *typeof* [`IgxGridToolbarExporterComponent`](../classes/IgxGridToolbarExporterComponent.md), *typeof* [`IgxGridToolbarHidingComponent`](../classes/IgxGridToolbarHidingComponent.md), *typeof* [`IgxGridToolbarPinningComponent`](../classes/IgxGridToolbarPinningComponent.md), *typeof* [`IgxGridToolbarTitleComponent`](../classes/IgxGridToolbarTitleComponent.md), *typeof* [`IgxGridToolbarDirective`](../classes/IgxGridToolbarDirective.md), *typeof* [`IgxGridExcelStyleFilteringComponent`](../classes/IgxGridExcelStyleFilteringComponent.md), *typeof* [`IgxExcelStyleHeaderComponent`](../classes/IgxExcelStyleHeaderComponent.md), *typeof* [`IgxExcelStyleSortingComponent`](../classes/IgxExcelStyleSortingComponent.md), *typeof* [`IgxExcelStylePinningComponent`](../classes/IgxExcelStylePinningComponent.md), *typeof* [`IgxExcelStyleHidingComponent`](../classes/IgxExcelStyleHidingComponent.md), *typeof* [`IgxExcelStyleSelectingComponent`](../classes/IgxExcelStyleSelectingComponent.md), *typeof* [`IgxExcelStyleClearFiltersComponent`](../classes/IgxExcelStyleClearFiltersComponent.md), *typeof* [`IgxExcelStyleConditionalFilterComponent`](../classes/IgxExcelStyleConditionalFilterComponent.md), *typeof* [`IgxExcelStyleMovingComponent`](../classes/IgxExcelStyleMovingComponent.md), *typeof* [`IgxExcelStyleSearchComponent`](../classes/IgxExcelStyleSearchComponent.md), *typeof* [`IgxExcelStyleColumnOperationsTemplateDirective`](../classes/IgxExcelStyleColumnOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleFilterOperationsTemplateDirective`](../classes/IgxExcelStyleFilterOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleLoadingValuesTemplateDirective`](../classes/IgxExcelStyleLoadingValuesTemplateDirective.md), *typeof* [`IgxColumnRequiredValidatorDirective`](../classes/IgxColumnRequiredValidatorDirective.md), *typeof* [`IgxColumnMinValidatorDirective`](../classes/IgxColumnMinValidatorDirective.md), *typeof* [`IgxColumnMaxValidatorDirective`](../classes/IgxColumnMaxValidatorDirective.md), *typeof* [`IgxColumnEmailValidatorDirective`](../classes/IgxColumnEmailValidatorDirective.md), *typeof* [`IgxColumnMinLengthValidatorDirective`](../classes/IgxColumnMinLengthValidatorDirective.md), *typeof* [`IgxColumnMaxLengthValidatorDirective`](../classes/IgxColumnMaxLengthValidatorDirective.md), *typeof* [`IgxColumnPatternValidatorDirective`](../classes/IgxColumnPatternValidatorDirective.md), *typeof* [`IgxPaginatorComponent`](../classes/IgxPaginatorComponent.md), *typeof* [`IgxPageNavigationComponent`](../classes/IgxPageNavigationComponent.md), *typeof* [`IgxPageSizeSelectorComponent`](../classes/IgxPageSizeSelectorComponent.md), *typeof* [`IgxPaginatorContentDirective`](../classes/IgxPaginatorContentDirective.md), *typeof* [`IgxPaginatorDirective`](../classes/IgxPaginatorDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.module.ts:91](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.module.ts#L91) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_INPUT_GROUP_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_INPUT_GROUP_DIRECTIVES.md new file mode 100644 index 000000000..49e3787e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_INPUT_GROUP_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_INPUT\_GROUP\_DIRECTIVES + +> `const` **IGX\_INPUT\_GROUP\_DIRECTIVES**: readonly \[*typeof* [`IgxInputGroupComponent`](../classes/IgxInputGroupComponent.md), *typeof* [`IgxInputDirective`](../classes/IgxInputDirective.md), *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/public\_api.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/public_api.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_INPUT_GROUP_TYPE.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_INPUT_GROUP_TYPE.md new file mode 100644 index 000000000..dab764db0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_INPUT_GROUP_TYPE.md @@ -0,0 +1,7 @@ +# Variable: IGX\_INPUT\_GROUP\_TYPE + +> `const` **IGX\_INPUT\_GROUP\_TYPE**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/inputGroupType.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/inputGroupType.ts#L14) + +Defines the InputGroupType DI token. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES.md new file mode 100644 index 000000000..29a1b2c8b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_LINEAR\_PROGRESS\_BAR\_DIRECTIVES + +> `const` **IGX\_LINEAR\_PROGRESS\_BAR\_DIRECTIVES**: readonly \[*typeof* [`IgxLinearProgressBarComponent`](../classes/IgxLinearProgressBarComponent.md), *typeof* [`IgxProgressBarGradientDirective`](../classes/IgxProgressBarGradientDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/public\_api.ts:22](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts#L22) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_LIST_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_LIST_DIRECTIVES.md new file mode 100644 index 000000000..693c73a78 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_LIST_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_LIST\_DIRECTIVES + +> `const` **IGX\_LIST\_DIRECTIVES**: readonly \[*typeof* [`IgxListComponent`](../classes/IgxListComponent.md), *typeof* [`IgxListItemComponent`](../classes/IgxListItemComponent.md), *typeof* [`IgxListThumbnailDirective`](../classes/IgxListThumbnailDirective.md), *typeof* [`IgxListActionDirective`](../classes/IgxListActionDirective.md), *typeof* [`IgxListLineDirective`](../classes/IgxListLineDirective.md), *typeof* [`IgxListLineTitleDirective`](../classes/IgxListLineTitleDirective.md), *typeof* [`IgxListLineSubTitleDirective`](../classes/IgxListLineSubTitleDirective.md), *typeof* [`IgxDataLoadingTemplateDirective`](../classes/IgxDataLoadingTemplateDirective.md), *typeof* [`IgxEmptyListTemplateDirective`](../classes/IgxEmptyListTemplateDirective.md), *typeof* [`IgxListItemLeftPanningTemplateDirective`](../classes/IgxListItemLeftPanningTemplateDirective.md), *typeof* [`IgxListItemRightPanningTemplateDirective`](../classes/IgxListItemRightPanningTemplateDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/list/src/list/public\_api.ts:17](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/list/src/list/public_api.ts#L17) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_NAVBAR_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_NAVBAR_DIRECTIVES.md new file mode 100644 index 000000000..5e2ca0f4b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_NAVBAR_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_NAVBAR\_DIRECTIVES + +> `const` **IGX\_NAVBAR\_DIRECTIVES**: readonly \[*typeof* [`IgxNavbarComponent`](../classes/IgxNavbarComponent.md), *typeof* [`IgxNavbarActionDirective`](../classes/IgxNavbarActionDirective.md), *typeof* [`IgxNavbarTitleDirective`](../classes/IgxNavbarTitleDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navbar/src/navbar/public\_api.ts:6](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navbar/src/navbar/public_api.ts#L6) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_NAVIGATION_DRAWER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_NAVIGATION_DRAWER_DIRECTIVES.md new file mode 100644 index 000000000..ad99f3838 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_NAVIGATION_DRAWER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_NAVIGATION\_DRAWER\_DIRECTIVES + +> `const` **IGX\_NAVIGATION\_DRAWER\_DIRECTIVES**: readonly \[*typeof* [`IgxNavigationDrawerComponent`](../classes/IgxNavigationDrawerComponent.md), *typeof* [`IgxNavDrawerItemDirective`](../classes/IgxNavDrawerItemDirective.md), *typeof* [`IgxNavDrawerMiniTemplateDirective`](../classes/IgxNavDrawerMiniTemplateDirective.md), *typeof* [`IgxNavDrawerTemplateDirective`](../classes/IgxNavDrawerTemplateDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/public\_api.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/public_api.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PAGINATOR_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PAGINATOR_DIRECTIVES.md new file mode 100644 index 000000000..2292ff041 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PAGINATOR_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_PAGINATOR\_DIRECTIVES + +> `const` **IGX\_PAGINATOR\_DIRECTIVES**: readonly \[*typeof* [`IgxPaginatorComponent`](../classes/IgxPaginatorComponent.md), *typeof* [`IgxPageNavigationComponent`](../classes/IgxPageNavigationComponent.md), *typeof* [`IgxPageSizeSelectorComponent`](../classes/IgxPageSizeSelectorComponent.md), *typeof* [`IgxPaginatorContentDirective`](../classes/IgxPaginatorContentDirective.md), *typeof* [`IgxPaginatorDirective`](../classes/IgxPaginatorDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/paginator/src/paginator/public\_api.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/paginator/src/paginator/public_api.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PIVOT_GRID_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PIVOT_GRID_DIRECTIVES.md new file mode 100644 index 000000000..5dc843e15 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PIVOT_GRID_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_PIVOT\_GRID\_DIRECTIVES + +> `const` **IGX\_PIVOT\_GRID\_DIRECTIVES**: readonly \[*typeof* [`IgxPivotGridComponent`](../classes/IgxPivotGridComponent.md), *typeof* [`IgxPivotDataSelectorComponent`](../classes/IgxPivotDataSelectorComponent.md), *typeof* `IgxPivotValueChipTemplateDirective`, *typeof* [`IgxRowDirective`](../classes/IgxRowDirective.md), *typeof* [`IgxGridFooterComponent`](../classes/IgxGridFooterComponent.md), *typeof* [`IgxAdvancedFilteringDialogComponent`](../classes/IgxAdvancedFilteringDialogComponent.md), *typeof* `IgxRowExpandedIndicatorDirective`, *typeof* `IgxRowCollapsedIndicatorDirective`, *typeof* `IgxHeaderExpandedIndicatorDirective`, *typeof* `IgxHeaderCollapsedIndicatorDirective`, *typeof* `IgxExcelStyleHeaderIconDirective`, *typeof* `IgxSortAscendingHeaderIconDirective`, *typeof* `IgxSortDescendingHeaderIconDirective`, *typeof* `IgxSortHeaderIconDirective`, *typeof* `IgxDragIndicatorIconDirective`, *typeof* `IgxRowDragGhostDirective`, *typeof* [`IgxGridStateDirective`](../classes/IgxGridStateDirective.md), *typeof* [`IgxGridPinningActionsComponent`](../classes/IgxGridPinningActionsComponent.md), *typeof* [`IgxGridEditingActionsComponent`](../classes/IgxGridEditingActionsComponent.md), *typeof* [`IgxGridActionsBaseDirective`](../classes/IgxGridActionsBaseDirective.md), *typeof* [`IgxGridActionButtonComponent`](../classes/IgxGridActionButtonComponent.md), *typeof* `IgxGridHeaderComponent`, *typeof* `IgxGridHeaderGroupComponent`, *typeof* `IgxGridHeaderRowComponent`, *typeof* [`IgxFilterCellTemplateDirective`](../classes/IgxFilterCellTemplateDirective.md), *typeof* [`IgxSummaryTemplateDirective`](../classes/IgxSummaryTemplateDirective.md), *typeof* [`IgxCellTemplateDirective`](../classes/IgxCellTemplateDirective.md), *typeof* [`IgxCellValidationErrorDirective`](../classes/IgxCellValidationErrorDirective.md), *typeof* [`IgxCellHeaderTemplateDirective`](../classes/IgxCellHeaderTemplateDirective.md), *typeof* `IgxCellFooterTemplateDirective`, *typeof* [`IgxCellEditorTemplateDirective`](../classes/IgxCellEditorTemplateDirective.md), *typeof* [`IgxCollapsibleIndicatorTemplateDirective`](../classes/IgxCollapsibleIndicatorTemplateDirective.md), *typeof* [`IgxColumnComponent`](../classes/IgxColumnComponent.md), *typeof* [`IgxColumnGroupComponent`](../classes/IgxColumnGroupComponent.md), *typeof* [`IgxColumnLayoutComponent`](../classes/IgxColumnLayoutComponent.md), *typeof* [`IgxColumnActionsComponent`](../classes/IgxColumnActionsComponent.md), *typeof* [`IgxColumnHidingDirective`](../classes/IgxColumnHidingDirective.md), *typeof* [`IgxColumnPinningDirective`](../classes/IgxColumnPinningDirective.md), *typeof* `IgxRowSelectorDirective`, *typeof* `IgxGroupByRowSelectorDirective`, *typeof* `IgxHeadSelectorDirective`, *typeof* [`IgxCSVTextDirective`](../classes/IgxCSVTextDirective.md), *typeof* [`IgxExcelTextDirective`](../classes/IgxExcelTextDirective.md), *typeof* [`IgxGridToolbarActionsComponent`](../classes/IgxGridToolbarActionsComponent.md), *typeof* [`IgxGridToolbarAdvancedFilteringComponent`](../classes/IgxGridToolbarAdvancedFilteringComponent.md), *typeof* [`IgxGridToolbarComponent`](../classes/IgxGridToolbarComponent.md), *typeof* [`IgxGridToolbarExporterComponent`](../classes/IgxGridToolbarExporterComponent.md), *typeof* [`IgxGridToolbarHidingComponent`](../classes/IgxGridToolbarHidingComponent.md), *typeof* [`IgxGridToolbarPinningComponent`](../classes/IgxGridToolbarPinningComponent.md), *typeof* [`IgxGridToolbarTitleComponent`](../classes/IgxGridToolbarTitleComponent.md), *typeof* [`IgxGridToolbarDirective`](../classes/IgxGridToolbarDirective.md), *typeof* [`IgxGridExcelStyleFilteringComponent`](../classes/IgxGridExcelStyleFilteringComponent.md), *typeof* [`IgxExcelStyleHeaderComponent`](../classes/IgxExcelStyleHeaderComponent.md), *typeof* [`IgxExcelStyleSortingComponent`](../classes/IgxExcelStyleSortingComponent.md), *typeof* [`IgxExcelStylePinningComponent`](../classes/IgxExcelStylePinningComponent.md), *typeof* [`IgxExcelStyleHidingComponent`](../classes/IgxExcelStyleHidingComponent.md), *typeof* [`IgxExcelStyleSelectingComponent`](../classes/IgxExcelStyleSelectingComponent.md), *typeof* [`IgxExcelStyleClearFiltersComponent`](../classes/IgxExcelStyleClearFiltersComponent.md), *typeof* [`IgxExcelStyleConditionalFilterComponent`](../classes/IgxExcelStyleConditionalFilterComponent.md), *typeof* [`IgxExcelStyleMovingComponent`](../classes/IgxExcelStyleMovingComponent.md), *typeof* [`IgxExcelStyleSearchComponent`](../classes/IgxExcelStyleSearchComponent.md), *typeof* [`IgxExcelStyleColumnOperationsTemplateDirective`](../classes/IgxExcelStyleColumnOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleFilterOperationsTemplateDirective`](../classes/IgxExcelStyleFilterOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleLoadingValuesTemplateDirective`](../classes/IgxExcelStyleLoadingValuesTemplateDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.module.ts:74](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.module.ts#L74) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PROGRESS_BAR_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PROGRESS_BAR_DIRECTIVES.md new file mode 100644 index 000000000..dccb8d1ce --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_PROGRESS_BAR_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_PROGRESS\_BAR\_DIRECTIVES + +> `const` **IGX\_PROGRESS\_BAR\_DIRECTIVES**: readonly \[*typeof* [`IgxLinearProgressBarComponent`](../classes/IgxLinearProgressBarComponent.md), *typeof* [`IgxCircularProgressBarComponent`](../classes/IgxCircularProgressBarComponent.md), *typeof* [`IgxProgressBarTextTemplateDirective`](../classes/IgxProgressBarTextTemplateDirective.md), *typeof* [`IgxProgressBarGradientDirective`](../classes/IgxProgressBarGradientDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/public\_api.ts:14](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/public_api.ts#L14) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_QUERY_BUILDER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_QUERY_BUILDER_DIRECTIVES.md new file mode 100644 index 000000000..7fe734860 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_QUERY_BUILDER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_QUERY\_BUILDER\_DIRECTIVES + +> `const` **IGX\_QUERY\_BUILDER\_DIRECTIVES**: readonly \[*typeof* [`IgxQueryBuilderComponent`](../classes/IgxQueryBuilderComponent.md), *typeof* [`IgxQueryBuilderHeaderComponent`](../classes/IgxQueryBuilderHeaderComponent.md), *typeof* [`IgxQueryBuilderSearchValueTemplateDirective`](../classes/IgxQueryBuilderSearchValueTemplateDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/query-builder/src/query-builder/public\_api.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/query-builder/src/query-builder/public_api.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_RADIO_GROUP_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_RADIO_GROUP_DIRECTIVES.md new file mode 100644 index 000000000..369901e84 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_RADIO_GROUP_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_RADIO\_GROUP\_DIRECTIVES + +> `const` **IGX\_RADIO\_GROUP\_DIRECTIVES**: readonly \[*typeof* [`IgxRadioGroupDirective`](../classes/IgxRadioGroupDirective.md), *typeof* [`IgxRadioComponent`](../classes/IgxRadioComponent.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/public\_api.ts:7](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/public_api.ts#L7) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SELECT_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SELECT_DIRECTIVES.md new file mode 100644 index 000000000..e933687a9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SELECT_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_SELECT\_DIRECTIVES + +> `const` **IGX\_SELECT\_DIRECTIVES**: readonly \[*typeof* [`IgxSelectComponent`](../classes/IgxSelectComponent.md), *typeof* [`IgxSelectItemComponent`](../classes/IgxSelectItemComponent.md), *typeof* [`IgxSelectGroupComponent`](../classes/IgxSelectGroupComponent.md), *typeof* `IgxSelectHeaderDirective`, *typeof* `IgxSelectFooterDirective`, *typeof* `IgxSelectToggleIconDirective`, *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/select/src/select/public\_api.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/select/src/select/public_api.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SIMPLE_COMBO_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SIMPLE_COMBO_DIRECTIVES.md new file mode 100644 index 000000000..a8b053c68 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SIMPLE_COMBO_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_SIMPLE\_COMBO\_DIRECTIVES + +> `const` **IGX\_SIMPLE\_COMBO\_DIRECTIVES**: readonly \[*typeof* [`IgxSimpleComboComponent`](../classes/IgxSimpleComboComponent.md), *typeof* [`IgxComboAddItemDirective`](../classes/IgxComboAddItemDirective.md), *typeof* [`IgxComboClearIconDirective`](../classes/IgxComboClearIconDirective.md), *typeof* [`IgxComboEmptyDirective`](../classes/IgxComboEmptyDirective.md), *typeof* [`IgxComboFooterDirective`](../classes/IgxComboFooterDirective.md), *typeof* [`IgxComboHeaderDirective`](../classes/IgxComboHeaderDirective.md), *typeof* [`IgxComboHeaderItemDirective`](../classes/IgxComboHeaderItemDirective.md), *typeof* [`IgxComboItemDirective`](../classes/IgxComboItemDirective.md), *typeof* [`IgxComboToggleIconDirective`](../classes/IgxComboToggleIconDirective.md), *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/simple-combo/src/simple-combo/public\_api.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/simple-combo/src/simple-combo/public_api.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SLIDER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SLIDER_DIRECTIVES.md new file mode 100644 index 000000000..4a44d1111 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SLIDER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_SLIDER\_DIRECTIVES + +> `const` **IGX\_SLIDER\_DIRECTIVES**: readonly \[*typeof* [`IgxSliderComponent`](../classes/IgxSliderComponent.md), *typeof* [`IgxThumbFromTemplateDirective`](../classes/IgxThumbFromTemplateDirective.md), *typeof* [`IgxThumbToTemplateDirective`](../classes/IgxThumbToTemplateDirective.md), *typeof* [`IgxTickLabelTemplateDirective`](../classes/IgxTickLabelTemplateDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/public\_api.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/public_api.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SPLITTER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SPLITTER_DIRECTIVES.md new file mode 100644 index 000000000..6b0dabe6f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_SPLITTER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_SPLITTER\_DIRECTIVES + +> `const` **IGX\_SPLITTER\_DIRECTIVES**: readonly \[*typeof* [`IgxSplitterComponent`](../classes/IgxSplitterComponent.md), *typeof* [`IgxSplitterPaneComponent`](../classes/IgxSplitterPaneComponent.md), *typeof* `IgxSplitBarComponent`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/splitter/src/splitter/public\_api.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/splitter/src/splitter/public_api.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_STEPPER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_STEPPER_DIRECTIVES.md new file mode 100644 index 000000000..94eec3704 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_STEPPER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_STEPPER\_DIRECTIVES + +> `const` **IGX\_STEPPER\_DIRECTIVES**: readonly \[*typeof* [`IgxStepComponent`](../classes/IgxStepComponent.md), *typeof* [`IgxStepperComponent`](../classes/IgxStepperComponent.md), *typeof* [`IgxStepTitleDirective`](../classes/IgxStepTitleDirective.md), *typeof* [`IgxStepSubtitleDirective`](../classes/IgxStepSubtitleDirective.md), *typeof* [`IgxStepIndicatorDirective`](../classes/IgxStepIndicatorDirective.md), *typeof* [`IgxStepContentDirective`](../classes/IgxStepContentDirective.md), *typeof* [`IgxStepActiveIndicatorDirective`](../classes/IgxStepActiveIndicatorDirective.md), *typeof* [`IgxStepCompletedIndicatorDirective`](../classes/IgxStepCompletedIndicatorDirective.md), *typeof* [`IgxStepInvalidIndicatorDirective`](../classes/IgxStepInvalidIndicatorDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/public\_api.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/public_api.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TABS_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TABS_DIRECTIVES.md new file mode 100644 index 000000000..87354169f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TABS_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_TABS\_DIRECTIVES + +> `const` **IGX\_TABS\_DIRECTIVES**: readonly \[*typeof* [`IgxTabsComponent`](../classes/IgxTabsComponent.md), *typeof* [`IgxTabItemComponent`](../classes/IgxTabItemComponent.md), *typeof* [`IgxTabHeaderComponent`](../classes/IgxTabHeaderComponent.md), *typeof* [`IgxTabContentComponent`](../classes/IgxTabContentComponent.md), *typeof* [`IgxTabHeaderLabelDirective`](../classes/IgxTabHeaderLabelDirective.md), *typeof* [`IgxTabHeaderIconDirective`](../classes/IgxTabHeaderIconDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/public\_api.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/public_api.ts#L19) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TIME_PICKER_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TIME_PICKER_DIRECTIVES.md new file mode 100644 index 000000000..6705ef8d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TIME_PICKER_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_TIME\_PICKER\_DIRECTIVES + +> `const` **IGX\_TIME\_PICKER\_DIRECTIVES**: readonly \[*typeof* [`IgxTimePickerComponent`](../classes/IgxTimePickerComponent.md), *typeof* [`IgxPickerActionsDirective`](../classes/IgxPickerActionsDirective.md), *typeof* [`IgxPickerToggleComponent`](../classes/IgxPickerToggleComponent.md), *typeof* [`IgxPickerClearComponent`](../classes/IgxPickerClearComponent.md), *typeof* [`IgxLabelDirective`](../classes/IgxLabelDirective.md), *typeof* `IgxPrefixDirective`, *typeof* `IgxSuffixDirective`, *typeof* [`IgxHintDirective`](../classes/IgxHintDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/time-picker/src/time-picker/public\_api.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/time-picker/src/time-picker/public_api.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TOOLTIP_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TOOLTIP_DIRECTIVES.md new file mode 100644 index 000000000..632cfe881 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TOOLTIP_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_TOOLTIP\_DIRECTIVES + +> `const` **IGX\_TOOLTIP\_DIRECTIVES**: readonly \[*typeof* [`IgxTooltipDirective`](../classes/IgxTooltipDirective.md), *typeof* [`IgxTooltipTargetDirective`](../classes/IgxTooltipTargetDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/tooltip/public\_api.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/tooltip/public_api.ts#L9) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TREE_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TREE_DIRECTIVES.md new file mode 100644 index 000000000..d36ff0082 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TREE_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_TREE\_DIRECTIVES + +> `const` **IGX\_TREE\_DIRECTIVES**: readonly \[*typeof* [`IgxTreeComponent`](../classes/IgxTreeComponent.md), *typeof* [`IgxTreeNodeComponent`](../classes/IgxTreeNodeComponent.md), *typeof* `IgxTreeNodeLinkDirective`, *typeof* `IgxTreeExpandIndicatorDirective`\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/public\_api.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/public_api.ts#L12) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TREE_GRID_DIRECTIVES.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TREE_GRID_DIRECTIVES.md new file mode 100644 index 000000000..85504d395 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IGX_TREE_GRID_DIRECTIVES.md @@ -0,0 +1,5 @@ +# Variable: IGX\_TREE\_GRID\_DIRECTIVES + +> `const` **IGX\_TREE\_GRID\_DIRECTIVES**: readonly \[*typeof* [`IgxTreeGridComponent`](../classes/IgxTreeGridComponent.md), *typeof* `IgxTreeGridGroupByAreaComponent`, *typeof* `IgxTreeGridGroupingPipe`, *typeof* `IgxRowAddTextDirective`, *typeof* `IgxRowEditActionsDirective`, *typeof* `IgxRowEditTextDirective`, *typeof* `IgxRowEditTabStopDirective`, *typeof* [`IgxRowDirective`](../classes/IgxRowDirective.md), *typeof* [`IgxGridFooterComponent`](../classes/IgxGridFooterComponent.md), *typeof* [`IgxAdvancedFilteringDialogComponent`](../classes/IgxAdvancedFilteringDialogComponent.md), *typeof* `IgxRowExpandedIndicatorDirective`, *typeof* `IgxRowCollapsedIndicatorDirective`, *typeof* `IgxHeaderExpandedIndicatorDirective`, *typeof* `IgxHeaderCollapsedIndicatorDirective`, *typeof* `IgxExcelStyleHeaderIconDirective`, *typeof* `IgxSortAscendingHeaderIconDirective`, *typeof* `IgxSortDescendingHeaderIconDirective`, *typeof* `IgxSortHeaderIconDirective`, *typeof* `IgxDragIndicatorIconDirective`, *typeof* `IgxRowDragGhostDirective`, *typeof* [`IgxGridStateDirective`](../classes/IgxGridStateDirective.md), *typeof* [`IgxGridPinningActionsComponent`](../classes/IgxGridPinningActionsComponent.md), *typeof* [`IgxGridEditingActionsComponent`](../classes/IgxGridEditingActionsComponent.md), *typeof* [`IgxGridActionsBaseDirective`](../classes/IgxGridActionsBaseDirective.md), *typeof* [`IgxGridActionButtonComponent`](../classes/IgxGridActionButtonComponent.md), *typeof* `IgxGridHeaderComponent`, *typeof* `IgxGridHeaderGroupComponent`, *typeof* `IgxGridHeaderRowComponent`, *typeof* [`IgxFilterCellTemplateDirective`](../classes/IgxFilterCellTemplateDirective.md), *typeof* [`IgxSummaryTemplateDirective`](../classes/IgxSummaryTemplateDirective.md), *typeof* [`IgxCellTemplateDirective`](../classes/IgxCellTemplateDirective.md), *typeof* [`IgxCellValidationErrorDirective`](../classes/IgxCellValidationErrorDirective.md), *typeof* [`IgxCellHeaderTemplateDirective`](../classes/IgxCellHeaderTemplateDirective.md), *typeof* `IgxCellFooterTemplateDirective`, *typeof* [`IgxCellEditorTemplateDirective`](../classes/IgxCellEditorTemplateDirective.md), *typeof* [`IgxCollapsibleIndicatorTemplateDirective`](../classes/IgxCollapsibleIndicatorTemplateDirective.md), *typeof* [`IgxColumnComponent`](../classes/IgxColumnComponent.md), *typeof* [`IgxColumnGroupComponent`](../classes/IgxColumnGroupComponent.md), *typeof* [`IgxColumnLayoutComponent`](../classes/IgxColumnLayoutComponent.md), *typeof* [`IgxColumnActionsComponent`](../classes/IgxColumnActionsComponent.md), *typeof* [`IgxColumnHidingDirective`](../classes/IgxColumnHidingDirective.md), *typeof* [`IgxColumnPinningDirective`](../classes/IgxColumnPinningDirective.md), *typeof* `IgxRowSelectorDirective`, *typeof* `IgxGroupByRowSelectorDirective`, *typeof* `IgxHeadSelectorDirective`, *typeof* [`IgxCSVTextDirective`](../classes/IgxCSVTextDirective.md), *typeof* [`IgxExcelTextDirective`](../classes/IgxExcelTextDirective.md), *typeof* [`IgxGridToolbarActionsComponent`](../classes/IgxGridToolbarActionsComponent.md), *typeof* [`IgxGridToolbarAdvancedFilteringComponent`](../classes/IgxGridToolbarAdvancedFilteringComponent.md), *typeof* [`IgxGridToolbarComponent`](../classes/IgxGridToolbarComponent.md), *typeof* [`IgxGridToolbarExporterComponent`](../classes/IgxGridToolbarExporterComponent.md), *typeof* [`IgxGridToolbarHidingComponent`](../classes/IgxGridToolbarHidingComponent.md), *typeof* [`IgxGridToolbarPinningComponent`](../classes/IgxGridToolbarPinningComponent.md), *typeof* [`IgxGridToolbarTitleComponent`](../classes/IgxGridToolbarTitleComponent.md), *typeof* [`IgxGridToolbarDirective`](../classes/IgxGridToolbarDirective.md), *typeof* [`IgxGridExcelStyleFilteringComponent`](../classes/IgxGridExcelStyleFilteringComponent.md), *typeof* [`IgxExcelStyleHeaderComponent`](../classes/IgxExcelStyleHeaderComponent.md), *typeof* [`IgxExcelStyleSortingComponent`](../classes/IgxExcelStyleSortingComponent.md), *typeof* [`IgxExcelStylePinningComponent`](../classes/IgxExcelStylePinningComponent.md), *typeof* [`IgxExcelStyleHidingComponent`](../classes/IgxExcelStyleHidingComponent.md), *typeof* [`IgxExcelStyleSelectingComponent`](../classes/IgxExcelStyleSelectingComponent.md), *typeof* [`IgxExcelStyleClearFiltersComponent`](../classes/IgxExcelStyleClearFiltersComponent.md), *typeof* [`IgxExcelStyleConditionalFilterComponent`](../classes/IgxExcelStyleConditionalFilterComponent.md), *typeof* [`IgxExcelStyleMovingComponent`](../classes/IgxExcelStyleMovingComponent.md), *typeof* [`IgxExcelStyleSearchComponent`](../classes/IgxExcelStyleSearchComponent.md), *typeof* [`IgxExcelStyleColumnOperationsTemplateDirective`](../classes/IgxExcelStyleColumnOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleFilterOperationsTemplateDirective`](../classes/IgxExcelStyleFilterOperationsTemplateDirective.md), *typeof* [`IgxExcelStyleLoadingValuesTemplateDirective`](../classes/IgxExcelStyleLoadingValuesTemplateDirective.md), *typeof* [`IgxColumnRequiredValidatorDirective`](../classes/IgxColumnRequiredValidatorDirective.md), *typeof* [`IgxColumnMinValidatorDirective`](../classes/IgxColumnMinValidatorDirective.md), *typeof* [`IgxColumnMaxValidatorDirective`](../classes/IgxColumnMaxValidatorDirective.md), *typeof* [`IgxColumnEmailValidatorDirective`](../classes/IgxColumnEmailValidatorDirective.md), *typeof* [`IgxColumnMinLengthValidatorDirective`](../classes/IgxColumnMinLengthValidatorDirective.md), *typeof* [`IgxColumnMaxLengthValidatorDirective`](../classes/IgxColumnMaxLengthValidatorDirective.md), *typeof* [`IgxColumnPatternValidatorDirective`](../classes/IgxColumnPatternValidatorDirective.md), *typeof* [`IgxPaginatorComponent`](../classes/IgxPaginatorComponent.md), *typeof* [`IgxPageNavigationComponent`](../classes/IgxPageNavigationComponent.md), *typeof* [`IgxPageSizeSelectorComponent`](../classes/IgxPageSizeSelectorComponent.md), *typeof* [`IgxPaginatorContentDirective`](../classes/IgxPaginatorContentDirective.md), *typeof* [`IgxPaginatorDirective`](../classes/IgxPaginatorDirective.md)\] + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/tree-grid/src/tree-grid.module.ts:92](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/tree-grid/src/tree-grid.module.ts#L92) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxAvatarSize.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxAvatarSize.md new file mode 100644 index 000000000..0688535d7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxAvatarSize.md @@ -0,0 +1,19 @@ +# Variable: IgxAvatarSize + +> `const` **IgxAvatarSize**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L8) + +## Type Declaration + +### LARGE + +> `readonly` **LARGE**: `"large"` = `'large'` + +### MEDIUM + +> `readonly` **MEDIUM**: `"medium"` = `'medium'` + +### SMALL + +> `readonly` **SMALL**: `"small"` = `'small'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxAvatarType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxAvatarType.md new file mode 100644 index 000000000..5254ed50b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxAvatarType.md @@ -0,0 +1,23 @@ +# Variable: IgxAvatarType + +> `const` **IgxAvatarType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts:15](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/avatar/src/avatar/avatar.component.ts#L15) + +## Type Declaration + +### CUSTOM + +> `readonly` **CUSTOM**: `"custom"` = `'custom'` + +### ICON + +> `readonly` **ICON**: `"icon"` = `'icon'` + +### IMAGE + +> `readonly` **IMAGE**: `"image"` = `'image'` + +### INITIALS + +> `readonly` **INITIALS**: `"initials"` = `'initials'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxBadgeType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxBadgeType.md new file mode 100644 index 000000000..fd7432d54 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxBadgeType.md @@ -0,0 +1,29 @@ +# Variable: IgxBadgeType + +> `const` **IgxBadgeType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/badge/src/badge/badge.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/badge/src/badge/badge.component.ts#L9) + +Determines the igxBadge type + +## Type Declaration + +### ERROR + +> `readonly` **ERROR**: `"error"` = `'error'` + +### INFO + +> `readonly` **INFO**: `"info"` = `'info'` + +### PRIMARY + +> `readonly` **PRIMARY**: `"primary"` = `'primary'` + +### SUCCESS + +> `readonly` **SUCCESS**: `"success"` = `'success'` + +### WARNING + +> `readonly` **WARNING**: `"warning"` = `'warning'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxCalendarView.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxCalendarView.md new file mode 100644 index 000000000..3197ebd29 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxCalendarView.md @@ -0,0 +1,19 @@ +# Variable: IgxCalendarView + +> `const` **IgxCalendarView**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/calendar/src/calendar/calendar.ts:23](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/calendar/src/calendar/calendar.ts#L23) + +## Type Declaration + +### Decade + +> `readonly` **Decade**: `"decade"` = `'decade'` + +### Month + +> `readonly` **Month**: `"month"` = `'month'` + +### Year + +> `readonly` **Year**: `"year"` = `'year'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxCardActionsLayout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxCardActionsLayout.md new file mode 100644 index 000000000..d04968b14 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxCardActionsLayout.md @@ -0,0 +1,15 @@ +# Variable: IgxCardActionsLayout + +> `const` **IgxCardActionsLayout**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/card/src/card/card.component.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/card/src/card/card.component.ts#L260) + +## Type Declaration + +### JUSTIFY + +> `readonly` **JUSTIFY**: `"justify"` = `'justify'` + +### START + +> `readonly` **START**: `"start"` = `'start'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxChipTypeVariant.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxChipTypeVariant.md new file mode 100644 index 000000000..27f51ae6a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxChipTypeVariant.md @@ -0,0 +1,27 @@ +# Variable: IgxChipTypeVariant + +> `const` **IgxChipTypeVariant**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/chips/src/chips/chip.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/chips/src/chips/chip.component.ts#L27) + +## Type Declaration + +### DANGER + +> `readonly` **DANGER**: `"danger"` = `'danger'` + +### INFO + +> `readonly` **INFO**: `"info"` = `'info'` + +### PRIMARY + +> `readonly` **PRIMARY**: `"primary"` = `'primary'` + +### SUCCESS + +> `readonly` **SUCCESS**: `"success"` = `'success'` + +### WARNING + +> `readonly` **WARNING**: `"warning"` = `'warning'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxDividerType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxDividerType.md new file mode 100644 index 000000000..c07cdb914 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxDividerType.md @@ -0,0 +1,15 @@ +# Variable: IgxDividerType + +> `const` **IgxDividerType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts#L3) + +## Type Declaration + +### DASHED + +> `readonly` **DASHED**: `"dashed"` = `'dashed'` + +### SOLID + +> `readonly` **SOLID**: `"solid"` = `'solid'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxGridTransaction.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxGridTransaction.md new file mode 100644 index 000000000..f2bb7b3c0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxGridTransaction.md @@ -0,0 +1,8 @@ +# Variable: IgxGridTransaction + +> `const` **IgxGridTransaction**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/grids/core/src/common/types.ts:107](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/grids/core/src/common/types.ts#L107) + +Injection token for accessing the grid transaction object. +This allows injecting the grid transaction object into components or services. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxInputGroupEnum.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxInputGroupEnum.md new file mode 100644 index 000000000..d6d08fc87 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxInputGroupEnum.md @@ -0,0 +1,23 @@ +# Variable: IgxInputGroupEnum + +> `const` **IgxInputGroupEnum**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/input-group/src/input-group/inputGroupType.ts:3](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/input-group/src/input-group/inputGroupType.ts#L3) + +## Type Declaration + +### Border + +> `readonly` **Border**: `"border"` = `'border'` + +### Box + +> `readonly` **Box**: `"box"` = `'box'` + +### Line + +> `readonly` **Line**: `"line"` = `'line'` + +### Search + +> `readonly` **Search**: `"search"` = `'search'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxProgressType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxProgressType.md new file mode 100644 index 000000000..8246f55ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxProgressType.md @@ -0,0 +1,23 @@ +# Variable: IgxProgressType + +> `const` **IgxProgressType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:34](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L34) + +## Type Declaration + +### ERROR + +> `readonly` **ERROR**: `"error"` = `'error'` + +### INFO + +> `readonly` **INFO**: `"info"` = `'info'` + +### SUCCESS + +> `readonly` **SUCCESS**: `"success"` = `'success'` + +### WARNING + +> `readonly` **WARNING**: `"warning"` = `'warning'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxSliderType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxSliderType.md new file mode 100644 index 000000000..c5cacdc7f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxSliderType.md @@ -0,0 +1,19 @@ +# Variable: IgxSliderType + +> `const` **IgxSliderType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:58](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L58) + +## Type Declaration + +### RANGE + +> `readonly` **RANGE**: `"range"` = `'range'` + +Range slider with multiple thumbs, that can mark the range. + +### SLIDER + +> `readonly` **SLIDER**: `"slider"` = `'slider'` + +Slider with single thumb. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepType.md new file mode 100644 index 000000000..a0482ba7a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepType.md @@ -0,0 +1,19 @@ +# Variable: IgxStepType + +> `const` **IgxStepType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:123](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L123) + +## Type Declaration + +### Full + +> `readonly` **Full**: `"full"` = `'full'` + +### Indicator + +> `readonly` **Indicator**: `"indicator"` = `'indicator'` + +### Title + +> `readonly` **Title**: `"title"` = `'title'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepperOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepperOrientation.md new file mode 100644 index 000000000..40fd48328 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepperOrientation.md @@ -0,0 +1,15 @@ +# Variable: IgxStepperOrientation + +> `const` **IgxStepperOrientation**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:117](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L117) + +## Type Declaration + +### Horizontal + +> `readonly` **Horizontal**: `"horizontal"` = `'horizontal'` + +### Vertical + +> `readonly` **Vertical**: `"vertical"` = `'vertical'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepperTitlePosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepperTitlePosition.md new file mode 100644 index 000000000..569251f07 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxStepperTitlePosition.md @@ -0,0 +1,23 @@ +# Variable: IgxStepperTitlePosition + +> `const` **IgxStepperTitlePosition**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:130](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L130) + +## Type Declaration + +### Bottom + +> `readonly` **Bottom**: `"bottom"` = `'bottom'` + +### End + +> `readonly` **End**: `"end"` = `'end'` + +### Start + +> `readonly` **Start**: `"start"` = `'start'` + +### Top + +> `readonly` **Top**: `"top"` = `'top'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTabsAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTabsAlignment.md new file mode 100644 index 000000000..f4f982b33 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTabsAlignment.md @@ -0,0 +1,23 @@ +# Variable: IgxTabsAlignment + +> `const` **IgxTabsAlignment**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts#L9) + +## Type Declaration + +### center + +> `readonly` **center**: `"center"` = `'center'` + +### end + +> `readonly` **end**: `"end"` = `'end'` + +### justify + +> `readonly` **justify**: `"justify"` = `'justify'` + +### start + +> `readonly` **start**: `"start"` = `'start'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTextAlign.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTextAlign.md new file mode 100644 index 000000000..04a1b25f8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTextAlign.md @@ -0,0 +1,19 @@ +# Variable: IgxTextAlign + +> `const` **IgxTextAlign**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:27](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts#L27) + +## Type Declaration + +### CENTER + +> `readonly` **CENTER**: `"center"` = `'center'` + +### END + +> `readonly` **END**: `"end"` = `'end'` + +### START + +> `readonly` **START**: `"start"` = `'start'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTreeSelectionType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTreeSelectionType.md new file mode 100644 index 000000000..c9fc1e5c5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IgxTreeSelectionType.md @@ -0,0 +1,19 @@ +# Variable: IgxTreeSelectionType + +> `const` **IgxTreeSelectionType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/tree/src/tree/common.ts:102](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/tree/src/tree/common.ts#L102) + +## Type Declaration + +### BiState + +> `readonly` **BiState**: `"BiState"` = `'BiState'` + +### Cascading + +> `readonly` **Cascading**: `"Cascading"` = `'Cascading'` + +### None + +> `readonly` **None**: `"None"` = `'None'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IndigoIcons.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IndigoIcons.md new file mode 100644 index 000000000..6a1d3aba0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/IndigoIcons.md @@ -0,0 +1,5 @@ +# Variable: IndigoIcons + +> `const` **IndigoIcons**: `Map`\<`string`, [`setCurrentI18n`](setCurrentI18n.md)\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/icon/src/icon/icons.indigo.ts:260](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/icon/src/icon/icons.indigo.ts#L260) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/InputResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/InputResourceStringsEN.md new file mode 100644 index 000000000..6223ca263 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/InputResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: InputResourceStringsEN + +> `const` **InputResourceStringsEN**: [`IInputResourceStrings`](../interfaces/IInputResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/input-resources.ts:8](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/input-resources.ts#L8) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/LabelPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/LabelPosition.md new file mode 100644 index 000000000..e5a02f92a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/LabelPosition.md @@ -0,0 +1,15 @@ +# Variable: LabelPosition + +> `const` **LabelPosition**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:12](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts#L12) + +## Type Declaration + +### AFTER + +> `readonly` **AFTER**: `"after"` = `'after'` + +### BEFORE + +> `readonly` **BEFORE**: `"before"` = `'before'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ListResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ListResourceStringsEN.md new file mode 100644 index 000000000..772552861 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/ListResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: ListResourceStringsEN + +> `const` **ListResourceStringsEN**: [`IListResourceStrings`](../type-aliases/IListResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/list-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/list-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/NAVIGATION_KEYS.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/NAVIGATION_KEYS.md new file mode 100644 index 000000000..9a0f7663f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/NAVIGATION_KEYS.md @@ -0,0 +1,5 @@ +# Variable: NAVIGATION\_KEYS + +> `const` **NAVIGATION\_KEYS**: `Set`\<`string`\> + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/utils.ts:431](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/utils.ts#L431) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PaginatorResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PaginatorResourceStringsEN.md new file mode 100644 index 000000000..900fdc861 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PaginatorResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: PaginatorResourceStringsEN + +> `const` **PaginatorResourceStringsEN**: [`IPaginatorResourceStrings`](../type-aliases/IPaginatorResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/paginator-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/paginator-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerCalendarOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerCalendarOrientation.md new file mode 100644 index 000000000..b7a65fe9f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerCalendarOrientation.md @@ -0,0 +1,17 @@ +# Variable: PickerCalendarOrientation + +> `const` **PickerCalendarOrientation**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:9](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L9) + +Calendar orientation. + +## Type Declaration + +### Horizontal + +> `readonly` **Horizontal**: `"horizontal"` = `'horizontal'` + +### Vertical + +> `readonly` **Vertical**: `"vertical"` = `'vertical'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerHeaderOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerHeaderOrientation.md new file mode 100644 index 000000000..853061551 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerHeaderOrientation.md @@ -0,0 +1,17 @@ +# Variable: PickerHeaderOrientation + +> `const` **PickerHeaderOrientation**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:2](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L2) + +Header orientation in `dialog` mode. + +## Type Declaration + +### Horizontal + +> `readonly` **Horizontal**: `"horizontal"` = `'horizontal'` + +### Vertical + +> `readonly` **Vertical**: `"vertical"` = `'vertical'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerInteractionMode.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerInteractionMode.md new file mode 100644 index 000000000..e2bc44805 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/PickerInteractionMode.md @@ -0,0 +1,18 @@ +# Variable: PickerInteractionMode + +> `const` **PickerInteractionMode**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/types.ts:19](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/types.ts#L19) + +This enumeration is used to configure whether the date/time picker has an editable input with drop down +or is readonly - the date/time is selected only through a dialog. + +## Type Declaration + +### Dialog + +> `readonly` **Dialog**: `"dialog"` = `'dialog'` + +### DropDown + +> `readonly` **DropDown**: `"dropdown"` = `'dropdown'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/QueryBuilderResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/QueryBuilderResourceStringsEN.md new file mode 100644 index 000000000..6d04bba9e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/QueryBuilderResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: QueryBuilderResourceStringsEN + +> `const` **QueryBuilderResourceStringsEN**: [`IQueryBuilderResourceStrings`](../type-aliases/IQueryBuilderResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/query-builder-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/query-builder-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/RadioGroupAlignment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/RadioGroupAlignment.md new file mode 100644 index 000000000..f318cc722 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/RadioGroupAlignment.md @@ -0,0 +1,17 @@ +# Variable: RadioGroupAlignment + +> `const` **RadioGroupAlignment**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts:25](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts#L25) + +Determines the Radio Group alignment + +## Type Declaration + +### horizontal + +> `readonly` **horizontal**: `"horizontal"` = `'horizontal'` + +### vertical + +> `readonly` **vertical**: `"vertical"` = `'vertical'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/SliderHandle.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/SliderHandle.md new file mode 100644 index 000000000..93783b223 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/SliderHandle.md @@ -0,0 +1,15 @@ +# Variable: SliderHandle + +> `const` **SliderHandle**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:70](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L70) + +## Type Declaration + +### FROM + +> `readonly` **FROM**: `"from"` = `'from'` + +### TO + +> `readonly` **TO**: `"to"` = `'to'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/THEME_TOKEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/THEME_TOKEN.md new file mode 100644 index 000000000..74354c460 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/THEME_TOKEN.md @@ -0,0 +1,5 @@ +# Variable: THEME\_TOKEN + +> `const` **THEME\_TOKEN**: `any` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/services/theme/theme.token.ts:35](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/services/theme/theme.token.ts#L35) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TickLabelsOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TickLabelsOrientation.md new file mode 100644 index 000000000..67e3a713f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TickLabelsOrientation.md @@ -0,0 +1,21 @@ +# Variable: TickLabelsOrientation + +> `const` **TickLabelsOrientation**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:79](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L79) + +Slider Tick labels Orientation + +## Type Declaration + +### BottomToTop + +> `readonly` **BottomToTop**: `"bottomtotop"` = `'bottomtotop'` + +### Horizontal + +> `readonly` **Horizontal**: `"horizontal"` = `'horizontal'` + +### TopToBottom + +> `readonly` **TopToBottom**: `"toptobottom"` = `'toptobottom'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TicksOrientation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TicksOrientation.md new file mode 100644 index 000000000..18ad016c7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TicksOrientation.md @@ -0,0 +1,21 @@ +# Variable: TicksOrientation + +> `const` **TicksOrientation**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/slider/src/slider/slider.common.ts:89](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/slider/src/slider/slider.common.ts#L89) + +Slider Ticks orientation + +## Type Declaration + +### Bottom + +> `readonly` **Bottom**: `"bottom"` = `'bottom'` + +### Mirror + +> `readonly` **Mirror**: `"mirror"` = `'mirror'` + +### Top + +> `readonly` **Top**: `"top"` = `'top'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TimePickerResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TimePickerResourceStringsEN.md new file mode 100644 index 000000000..43e3820d7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TimePickerResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: TimePickerResourceStringsEN + +> `const` **TimePickerResourceStringsEN**: [`ITimePickerResourceStrings`](../type-aliases/ITimePickerResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/time-picker-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/time-picker-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TreeResourceStringsEN.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TreeResourceStringsEN.md new file mode 100644 index 000000000..366ad8787 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/TreeResourceStringsEN.md @@ -0,0 +1,5 @@ +# Variable: TreeResourceStringsEN + +> `const` **TreeResourceStringsEN**: [`ITreeResourceStrings`](../type-aliases/ITreeResourceStrings.md) + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/core/i18n/tree-resources.ts:11](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/core/i18n/tree-resources.ts#L11) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/VerticalAnimationType.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/VerticalAnimationType.md new file mode 100644 index 000000000..891720189 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/VerticalAnimationType.md @@ -0,0 +1,19 @@ +# Variable: VerticalAnimationType + +> `const` **VerticalAnimationType**: `object` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts:138](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts#L138) + +## Type Declaration + +### Fade + +> `readonly` **Fade**: `"fade"` = `'fade'` + +### Grow + +> `readonly` **Grow**: `"grow"` = `'grow'` + +### None + +> `readonly` **None**: `"none"` = `'none'` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/daysInWeek.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/daysInWeek.md new file mode 100644 index 000000000..ccd1e6119 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/daysInWeek.md @@ -0,0 +1,5 @@ +# Variable: daysInWeek + +> `const` **daysInWeek**: `7` = `7` + +Defined in: [angular/igniteui-angular/projects/igniteui-angular/core/src/date-common/util/model.ts:21](https://github.com/IgniteUI/igniteui-angular/blob/28ea802da6e8bd841b82e336a16781159d69e779/projects/igniteui-angular/core/src/date-common/util/model.ts#L21) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/setCurrentI18n.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/setCurrentI18n.md new file mode 100644 index 000000000..5d9dbb1be --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular/api/variables/setCurrentI18n.md @@ -0,0 +1,3 @@ +# Variable: setCurrentI18n + +> **setCurrentI18n**: `any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/batch-compression.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/batch-compression.md new file mode 100644 index 000000000..353d2711f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/batch-compression.md @@ -0,0 +1,235 @@ +# Implementation Plan: OpenAI Batch API for Compression Pipeline + +**Status: IMPLEMENTED** + +## Context + +The compression step currently processes ~300 files per framework **sequentially** — one API call at a time with a 0.5s delay between calls. This takes **2-4 hours per platform**. The bottleneck is not compute but API latency and rate limiting. + +OpenAI's Batch API offers: +- **50% cost reduction** on all models +- **All ~300 requests submitted at once** — no sequential waiting, no delay management +- Typical completion for this workload: **minutes to ~1 hour** (24h SLA guarantee) +- Same model, same quality, same parameters — only difference is async processing + +## Approach: New `--batch` Flag on Existing Scripts + +Add a `--batch` mode to each existing compress script. This keeps all platform-specific logic (system prompts, paths, validation) in one place. + +The batch flow has 3 phases: + +``` +compress:react --batch submit → uploads JSONL, creates batch, saves batch ID +compress:react --batch poll → polls until complete, downloads results, writes files +compress:react --batch retry → re-submits failed/invalid files via a second batch +``` + +## Files to Modify + +| File | Change | +|------|--------| +| `scripts/compress-react-docs.ts` | Add `--batch` mode (implement first) | +| `scripts/compress-angular-docs.ts` | Port `--batch` mode | +| `scripts/compress-wc-docs.ts` | Port `--batch` mode | +| `scripts/compress-blazor-docs.ts` | Port `--batch` mode | +| `package.json` | Add `compress:batch:*` convenience scripts | + +## CLI Interface + +```bash +# Sequential (existing behavior, unchanged) +npm run compress:react + +# Batch mode — 3 steps +npm run compress:react -- --batch submit # Step 1: submit batch +npm run compress:react -- --batch poll # Step 2: poll & download +npm run compress:react -- --batch retry # Step 3: retry failures (optional) + +# Existing flags still work with --batch submit: +npm run compress:react -- --batch submit --model gpt-5-mini --only grid.md +``` + +## Step 1: `--batch submit` + +1. Collect `.md` files from `INPUT_DIR` (same `collectMdFiles()`) +2. Apply `--only`, `--resume-from`, `--min-size` filters (same logic as sequential) +3. For each file, build a JSONL request line: + ```jsonl + {"custom_id":"grid.md","method":"POST","url":"/v1/chat/completions","body":{"model":"gpt-5-mini","messages":[{"role":"system","content":"<system prompt>"},{"role":"user","content":"Compress this documentation:\n\n<content>"}],"max_completion_tokens":32000}} + ``` +4. Write to `OUTPUT_DIR/_batch_input.jsonl` +5. Upload via `client.files.create({ file: createReadStream(path), purpose: "batch" })` +6. Create batch via `client.batches.create({ input_file_id, endpoint: "/v1/chat/completions", completion_window: "24h" })` +7. Save to `OUTPUT_DIR/_batch_state.json`: + ```json + { + "batch_id": "batch_abc123", + "input_file_id": "file-xyz", + "status": "submitted", + "submitted_at": "2026-02-23T10:00:00Z", + "model": "gpt-5-mini", + "file_count": 308, + "files": ["accordion.md", "area-chart.md", "..."] + } + ``` +8. Print batch ID and instructions to run poll + +## Step 2: `--batch poll` + +1. Read `_batch_state.json` to get `batch_id` +2. Poll `client.batches.retrieve(batchId)` every 30 seconds +3. Print progress: `[10:05:00Z] in_progress | 150/308 completed | 0 failed` +4. On terminal status (`completed`, `failed`, `expired`, `cancelled`): + a. Download output file via `client.files.content(batch.output_file_id)` + b. For each result JSONL line: + - Extract `custom_id` (filename) and `response.body.choices[0].message.content` + - Apply `stripResponseWrapper()` + - Apply `validateStructure()` — track valid vs invalid + - Count tokens with `enc.encode()` + - Write valid files to `OUTPUT_DIR/<filename>` + c. Download error file if `batch.error_file_id` exists, track failed files + d. Write `_compression_stats.json` and `_compression_log.csv` (same format as sequential) + e. Update `_batch_state.json`: + ```json + { + "status": "completed", + "completed_at": "...", + "succeeded": 300, + "failed": 5, + "invalid": 3, + "failed_files": ["file1.md"], + "invalid_files": ["file3.md"] + } + ``` +5. Print summary with succeeded/failed/invalid counts + +## Step 3: `--batch retry` + +1. Read `_batch_state.json` — combine `failed_files` + `invalid_files` +2. If empty, print "Nothing to retry" and exit +3. Build new JSONL with only those files +4. Submit new batch (same as step 1 for the subset) +5. Save new batch ID to `_batch_state.json` (as `retry_batch_id`) +6. User runs `--batch poll` again to collect retry results + +## Code Changes + +### parseArgs() — extend CliArgs + +```typescript +interface CliArgs { + // ... existing fields unchanged ... + batch?: "submit" | "poll" | "retry"; +} +// Add to switch: +case "--batch": opts.batch = args[++i] as "submit" | "poll" | "retry"; break; +``` + +### main() — branch on batch mode + +```typescript +async function main() { + const opts = parseArgs(); + if (opts.batch) { + switch (opts.batch) { + case "submit": return batchSubmit(opts); + case "poll": return batchPoll(opts); + case "retry": return batchRetry(opts); + } + } + // ... existing sequential code unchanged ... +} +``` + +### New functions: `batchSubmit()`, `batchPoll()`, `batchRetry()` + +These are new ~50-80 line functions added to each compress script. They reuse all existing helpers: +- `getSystemPrompt()` — unchanged +- `collectMdFiles()` — unchanged +- `validateStructure()` — applied post-download instead of inline +- `stripResponseWrapper()` — applied post-download instead of inline +- `fileName()` — unchanged +- Token counting via `encodingForModel("gpt-4o")` — same + +### OpenAI SDK usage + +The batch functions use `createReadStream` from `fs` (new import) and the existing `OpenAI` client: +```typescript +import { createReadStream } from "fs"; + +// Submit +const file = await client.files.create({ file: createReadStream(jsonlPath), purpose: "batch" }); +const batch = await client.batches.create({ input_file_id: file.id, endpoint: "/v1/chat/completions", completion_window: "24h" }); + +// Poll +const batch = await client.batches.retrieve(batchId); + +// Download results +const content = await client.files.content(batch.output_file_id); +const text = await content.text(); +``` + +## package.json Scripts + +```json +{ + "compress:batch:angular:submit": "npx tsx --env-file=.env scripts/compress-angular-docs.ts --batch submit", + "compress:batch:angular:poll": "npx tsx --env-file=.env scripts/compress-angular-docs.ts --batch poll", + "compress:batch:react:submit": "npx tsx --env-file=.env scripts/compress-react-docs.ts --batch submit", + "compress:batch:react:poll": "npx tsx --env-file=.env scripts/compress-react-docs.ts --batch poll", + "compress:batch:blazor:submit": "npx tsx --env-file=.env scripts/compress-blazor-docs.ts --batch submit", + "compress:batch:blazor:poll": "npx tsx --env-file=.env scripts/compress-blazor-docs.ts --batch poll", + "compress:batch:wc:submit": "npx tsx --env-file=.env scripts/compress-wc-docs.ts --batch submit", + "compress:batch:wc:poll": "npx tsx --env-file=.env scripts/compress-wc-docs.ts --batch poll" +} +``` + +## Implementation Order + +1. Implement in `compress-react-docs.ts` first (simplest: flat files, no nested dirs) +2. Test end-to-end: `--batch submit` → `--batch poll` → verify output matches sequential +3. Port to the other 3 scripts (copy batch functions, change path constants) +4. Add npm scripts to `package.json` +5. Update docs (CLAUDE.md, README.md, docs/progress.md) + +## Verification + +1. **Single file submit**: `npm run compress:react -- --batch submit --only accordion.md` + - Creates `_batch_input.jsonl` (1 line) and `_batch_state.json` +2. **Poll**: `npm run compress:react -- --batch poll` + - Polls until done, writes `accordion.md` to output, writes stats/log +3. **Full batch**: `npm run compress:react -- --batch submit` then `--batch poll` + - Compare output files and stats with a previous sequential run +4. **Retry**: Manually add a file to `invalid_files` in `_batch_state.json`, run `--batch retry` +5. **Sequential unchanged**: `npm run compress:react` still works exactly as before + +## OpenAI Batch API Reference + +### Pricing + +Flat **50% discount** on all models vs real-time API. + +### Limits + +| Limit | Value | +|-------|-------| +| Max requests per batch | 50,000 | +| Max input file size | 200 MB | +| Completion SLA | 24 hours (typically much faster) | + +### Batch Statuses + +``` +validating → failed + → in_progress → finalizing → completed + → expired + → cancelling → cancelled +``` + +### Supported Features + +Function calling, structured outputs, JSON mode, all model parameters — all supported. Only streaming is not available (irrelevant for this use case). + +### Error Handling + +Partial failures are handled gracefully — successful responses go to `output_file_id`, failed ones go to `error_file_id`. Each line includes `custom_id` for correlation. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/blazor-pipeline-plan.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/blazor-pipeline-plan.md new file mode 100644 index 000000000..93f90b6de --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/blazor-pipeline-plan.md @@ -0,0 +1,127 @@ +# Blazor Documentation Pipeline — Implementation Plan + +## Context + +The project has working Angular, React, and WebComponents documentation pipelines (export → inject → compress). Blazor is the last remaining platform. Like React and WebComponents, Blazor uses the shared xplat build system (`igniteui-xplat-docs`), the same `toc.json` with `exclude` arrays, and the same flattening logic. The differences are: `Igb` prefix (no suffix), `.razor`/`.razor.cs`/`.razor.css` sample files, `App.razor` entry file, and a new submodule (`igniteui-blazor-examples`). + +## Required Reading Before Implementation + +Read these files in order before writing any code: + +1. **`docs/knowledgebase.md`** — Cross-platform lessons learned (18 entries). Issues #1 (prefix), #2 (hallucination), #3 (code block structure), #4 (toc.json), #5 (metadata), #17 (data trimming), #18 (flattening) all apply. +2. **`scripts/export-react-docs.ts`** — Template for the export script (toc.json parsing, flattening, metadata injection). The Blazor export is structurally identical. +3. **`scripts/inject-react-docs.ts`** — Template for the inject script (code-view replacement, data array trimming, size report). Blazor needs different file type handling. +4. **`scripts/compress-react-docs.ts`** — Template for the compress script (LLM compression, token counting, CSV log). Blazor needs a different system prompt. +5. **`common/igniteui-xplat-docs/docConfig.json`** — Blazor-specific configuration: `samplesGithubFile: "App.razor"`, sample paths, package names, replacements. +6. **`common/igniteui-xplat-docs/package.json`** — Build commands: `buildBlazor` runs `tsc && gulp buildOutputBlazor`. +7. **`common/igniteui-xplat-docs/docfx/en/components/toc.json`** — Verify Blazor entries by checking `exclude` arrays don't contain `"Blazor"`. + +## Files to Create + +### 1. `scripts/export-blazor-docs.ts` + +Clone of `scripts/export-react-docs.ts` with these changes: +- `BUILT_DOCS` → `dist/Blazor/en/components` (instead of `dist/React/...`) +- `OUTPUT_DIR` → `dist/docs_processing/blazor` +- `parseTocJson` filter: `excludes.includes("Blazor")` instead of `"React"` +- Build command: `npm run buildBlazor` instead of `buildReact` +- All log messages: "Blazor" instead of "React" + +### 2. `scripts/inject-blazor-docs.ts` + +Clone of `scripts/inject-react-docs.ts` with these changes: +- `EXAMPLES_ROOT` → `join(ROOT, "blazor", "igniteui-blazor-examples", "samples")` +- `DOCS_ROOT` → `dist/docs_processing/blazor` +- `OUTPUT_ROOT` → `dist/docs_prepeared/blazor` +- `readReactSampleFiles` → `readBlazorSampleFiles`: read `.razor`, `.razor.cs`, `.cs`, `.razor.css`, `.css` files + - File type mapping: `.razor` → `razor`, `.razor.cs` / `.cs` → `csharp`, `.razor.css` / `.css` → `css` + - Skip files: `_Imports.razor`, `wwwroot/` contents, `.csproj`, `Program.cs` +- `trimDataArrays` regex: match `` ```csharp `` and `` ```razor `` code blocks (instead of `tsx`/`typescript`) +- Size report: adjust code block language matching (`razor`/`csharp` instead of `tsx`) +- Log messages: "Blazor" instead of "React" + +### 3. `scripts/compress-blazor-docs.ts` + +Clone of `scripts/compress-react-docs.ts` with these changes: +- `INPUT_DIR` → `dist/docs_prepeared/blazor` +- `OUTPUT_DIR` → `dist/docs_final/blazor` +- `LOG_FILE` → `dist/docs_final/blazor/_compression_log.csv` +- System prompt changes: + - "Ignite UI for Blazor" instead of "Ignite UI for React" + - `Igb` prefix, no suffix (e.g., `IgbGrid`, `IgbButton`, `IgbCombo`, `IgbDatePicker`) + - Code format: Razor markup + C# (not TSX/JSX) + - Keep Razor templates and C# code-behind as separate blocks + - Comment syntax: use `@* comment *@` in Razor blocks, `// comment` in C# blocks + - Adjust all references from TSX/JSX/React to Razor/C#/Blazor +- Error message: "Run 'npm run inject:blazor' first" + +## Files to Modify + +### 4. `package.json` — add npm scripts + +```json +"build:xplat-blazor": "cd common/igniteui-xplat-docs && npm run buildBlazor", +"export:blazor": "npx tsx scripts/export-blazor-docs.ts --skip-build", +"inject:blazor": "npx tsx scripts/inject-blazor-docs.ts", +"compress:blazor": "npx tsx --env-file=.env scripts/compress-blazor-docs.ts", +"validate:blazor": "npx tsx --env-file=.env scripts/validate-docs.ts --input ./dist/docs_final/blazor", +"pipeline:blazor": "npm run clear:blazor && npm run build:xplat-blazor && npm run export:blazor && npm run inject:blazor && npm run compress:blazor" +``` + +Note: `clear:blazor` already exists in package.json. + +### 5. `.gitmodules` (at repo root) + +Add entry for the Blazor examples submodule: +``` +[submodule "igniteui-doc-mcp/blazor/igniteui-blazor-examples"] + path = igniteui-doc-mcp/blazor/igniteui-blazor-examples + url = https://github.com/IgniteUI/igniteui-blazor-examples.git +``` + +### 6. `docs/progress.md` + +Move "Other Platform Pipelines (Blazor)" from "Not Implemented" to "Implemented". + +### 7. `CLAUDE.md` + +Add Blazor pipeline documentation section (parallel to the React/WC sections). Add `blazor/` to project structure. + +### 8. `README.md` (igniteui-doc-mcp) + +Add Blazor steps to pipeline commands and directory structure. + +### 9. `README.md` (root) + +Add Blazor submodule to git submodules list. + +## Submodule Setup + +```bash +git submodule add https://github.com/IgniteUI/igniteui-blazor-examples.git igniteui-doc-mcp/blazor/igniteui-blazor-examples +``` + +## Key Blazor-Specific Details + +| Aspect | React | WebComponents | Blazor | +|--------|-------|---------------|--------| +| Prefix | `Igr` | `Igc` | `Igb` | +| Suffix | None (`IgrGrid`) | `Component` (`IgcGridComponent`) | None (`IgbGrid`) | +| Sample entry | `index.tsx` | `index.html` | `App.razor` | +| Sample files | `.tsx`, `.ts`, `.css` | `.html`, `.ts`, `.css` | `.razor`, `.razor.cs`, `.css` | +| Code block langs | `tsx`, `typescript`, `css` | `html`, `typescript`, `css` | `razor`, `csharp`, `css` | +| Comment syntax | `{/* */}` (JSX), `//` (TS) | `<!-- -->` (HTML), `//` (TS) | `@* *@` (Razor), `//` (C#) | +| Build command | `buildReact` | `buildWC` | `buildBlazor` | +| toc.json exclude | `"React"` | `"WebComponents"` | `"Blazor"` | +| Built output dir | `dist/React/en/components` | `dist/WebComponents/en/components` | `dist/Blazor/en/components` | +| Examples repo | `igniteui-react-examples` | `igniteui-wc-examples` | `igniteui-blazor-examples` | +| Package | npm packages | npm packages | `IgniteUI.Blazor` (NuGet) | + +## Verification + +1. **Build xplat**: `npm run build:xplat-blazor` — should produce files under `common/igniteui-xplat-docs/dist/Blazor/` +2. **Export**: `npm run export:blazor` — should produce flattened `.md` files in `dist/docs_processing/blazor/` +3. **Inject**: `npm run inject:blazor` — should produce docs with inlined sample code in `dist/docs_prepeared/blazor/`, no files >300KB +4. **Compress** (dry run): `npm run compress:blazor -- --dry-run` — verify file count and sizes +5. **Full pipeline**: `npm run pipeline:blazor` +6. **Validate**: `npm run validate:blazor` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/db.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/db.md new file mode 100644 index 000000000..fe39ba0c0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/db.md @@ -0,0 +1,167 @@ +# SQLite + FTS4 Database Integration + +**Status: IMPLEMENTED** + +## Overview + +The MCP server uses a SQLite database with FTS4 full-text search to index all 4 frameworks (~1,200 docs). A build step (`build-db`) runs after `compress` to load all compressed docs into `dist/igniteui-docs.db`. The MCP server queries this database using `sql.js` (pure WASM SQLite). + +### Files + +| File | Role | +|------|------| +| `scripts/build-db.ts` | Reads `docs_final/` + `docs_prepeared/`, writes `.db` | +| `src/index.ts` | MCP server — loads `.db` via `sql.js`, exposes 3 tools | +| `src/sql.js.d.ts` | TypeScript type declarations for `sql.js` | + +### Dependencies + +- **`sql.js`** (runtime) — Pure WASM SQLite used by the MCP server. Cross-platform, no native addons. +- **`better-sqlite3`** (dev) — Native SQLite used by `build-db.ts` for fast bulk inserts. + +**Why FTS4, not FTS5**: `sql.js` WASM build includes FTS3/FTS4 but not FTS5. FTS4 provides all needed features (external content, porter tokenizer, prefix indexes, `snippet()`). The only missing FTS5 feature is `bm25()` ranking, unnecessary for ~1,200 docs. + +## Architecture + +``` +Pipeline: export → inject → compress → build-db + ↓ + dist/igniteui-docs.db + ↓ + MCP Server (src/index.ts) +``` + +## Database Schema + +```sql +-- Main table storing all component documentation +CREATE TABLE docs ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + framework TEXT NOT NULL, -- 'angular', 'react', 'blazor', 'webcomponents' + filename TEXT NOT NULL, -- flat basename: 'button.md', 'chart-animations.md' + component TEXT NOT NULL, -- 'IgxGridComponent, IgxColumnComponent' + toc_name TEXT, -- 'Grid' (display name from toc.yml) + premium INTEGER DEFAULT 0, -- 1 if premium component + keywords TEXT, -- 'grid, sorting, filtering, paging' + summary TEXT, -- one-line description + content TEXT NOT NULL, -- full compressed markdown (without frontmatter) + UNIQUE(framework, filename) +); + +-- FTS4 virtual table for full-text search (external content, no duplication) +CREATE VIRTUAL TABLE docs_fts USING fts4( + component, + toc_name, + keywords, + summary, + content, + content='docs', -- external content: references docs table by rowid + tokenize=porter, -- stemming: "filtering" matches "filter", "filtered" + prefix="2,3" -- prefix indexes for autocomplete +); +``` + +### Why This Schema + +- **FTS4** (not FTS5): `sql.js` WASM build includes FTS3/FTS4 but not FTS5. FTS4 provides all needed features. The only missing FTS5 feature is built-in `bm25()` ranking, which is unnecessary for ~1,200 docs. +- **External content** (`content='docs'`): FTS index references the `docs` table by rowid — no data duplication. Full markdown stored once in `docs.content`. +- **Porter stemmer**: "filtering" matches "filter", "filtered", "filters" — critical for technical docs. +- **Prefix indexes** (`prefix="2,3"`): Speeds up prefix queries like `grid*` for autocomplete-style searches. +- **`framework` column**: Enables cross-platform queries or framework-specific filtering. +- **`premium` column**: Allows filtering premium content if needed by MCP clients. +- **`UNIQUE(framework, filename)`**: Prevents duplicate entries on rebuild. +- **`filename` is always a flat basename**: All four platforms produce flat `docs_final/<framework>/` directories. The Angular compress script flattens its nested `docs_prepeared/` input (e.g., `charts/features/chart-animations.md` → `chart-animations.md`) by extracting the basename. React, WebComponents, and Blazor are already flat at all pipeline stages. There are no filename collisions within a single framework's `docs_final/` output. + +### Actual Size (measured) + +- Angular: 281, React: 308, Blazor: 295, WC: 324 = **1,208 docs** total +- DB file: **~20MB** (text + FTS index) + +## Usage + +```bash +npm run build:db # full rebuild for all frameworks +npm run build:db -- --framework react # rebuild only react rows +``` + +The `build:db` step runs after `compress` and before `npm run build` (TypeScript compilation). It is separate from the `pipeline:*` scripts. + +## build-db.ts Details + +1. Reads `.md` files from `dist/docs_final/<framework>/` (skips `_` prefixed files) +2. Parses frontmatter: `component`, `keywords`, `summary`, `premium` +3. Looks up `_tocName` from `dist/docs_prepeared/<framework>/` (basename→path index for nested Angular dirs) +4. Strips frontmatter, stores body in `content` column +5. Full rebuild: DROP + CREATE tables. Per-framework (`--framework`): DELETE rows + reinsert +6. Rebuilds FTS index + `PRAGMA optimize` + +**`toc_name` lookup**: Compressed docs don't contain `toc_name`. The build script extracts `_tocName` from the corresponding prepared doc. For Angular (nested `docs_prepeared/`), it builds a basename→path index. Falls back to `null` with a warning if no prepared file exists. + +**Known issue — Angular basename collisions**: Angular's `docs_prepeared/` has filename collisions across subdirectories (e.g., `grid/editing.md` vs `treegrid/editing.md`). The compress script extracts basenames, so last-write wins. This pre-existing bug needs a fix in `compress-angular-docs.ts` to prefix parent directories. + +## MCP Server (src/index.ts) + +Uses `sql.js` (WASM SQLite) to load `dist/igniteui-docs.db` into memory at startup. All queries use a `prepare()`/`step()`/`getAsObject()` pattern. + +### Tools + +| Tool | Parameters | Description | +|------|-----------|-------------| +| `list_components` | `framework` (required), `filter?` | SQL LIKE against filename, toc_name, component, keywords, summary | +| `get_doc` | `framework` (required), `name` (required) | Returns full markdown. Appends `.md` internally | +| `search_docs` | `framework` (required), `query` (required) | FTS4 MATCH with `snippet()`, top 20 results | + +All tools require `framework` (`angular`, `react`, `blazor`, `webcomponents`). + +## Query Examples + +```sql +-- List all Angular grid-related components +SELECT toc_name, component, summary FROM docs +WHERE framework = 'angular' AND (keywords LIKE '%grid%' OR toc_name LIKE '%Grid%'); + +-- Full-text search (FTS4) +SELECT d.toc_name, d.component, snippet(docs_fts, '>>>', '<<<', '...', -1, 32) +FROM docs_fts +JOIN docs d ON d.rowid = docs_fts.rowid +WHERE docs_fts MATCH 'grid filtering column' +AND d.framework = 'angular' +LIMIT 10; + +-- Prefix search (autocomplete) +SELECT d.toc_name, d.framework FROM docs_fts +JOIN docs d ON d.rowid = docs_fts.rowid +WHERE docs_fts MATCH 'com*' +LIMIT 10; + +-- Cross-platform: find equivalent components +SELECT framework, toc_name, component, summary FROM docs +WHERE toc_name = 'Grid'; + +-- Non-premium components only +SELECT toc_name, summary FROM docs +WHERE framework = 'angular' AND premium = 0 +ORDER BY toc_name; +``` + +## FTS4 Sync Strategy + +Since `docs_fts` is an external content FTS4 table, it must be kept in sync with the `docs` table. For our use case this is simple — the database is **rebuilt from scratch** on each `build-db` run (not incrementally updated). The rebuild flow: + +1. `DROP TABLE IF EXISTS docs_fts` +2. `DROP TABLE IF EXISTS docs` +3. Create both tables +4. Insert all docs +5. `INSERT INTO docs_fts(docs_fts) VALUES('rebuild')` — populates FTS index from `docs` table + +No triggers needed since the MCP server opens the DB as **read-only**. + +## Considerations + +- **Cross-platform portability**: The MCP server uses `sql.js` (pure WASM SQLite) — no native addons, no C++ compiler, works identically on Windows, macOS, and Linux. A package built on one OS runs on any other. `better-sqlite3` (native addon) is a dev dependency only, used by `build-db.ts` at build time on the developer's machine. +- **DB location**: `dist/igniteui-docs.db` — inside `dist/` so it's cleaned by `npm run clear` and rebuilt as part of the pipeline. Per-platform `clear:<platform>` scripts do NOT delete the `.db` file (they only clear that platform's subdirectories). +- **Concurrent access**: Not an issue — MCP server opens read-only, build script is the only writer and runs before the server starts. +- **`.gitignore`**: The `.db` file should be in `.gitignore` (it's a build artifact in `dist/`). +- **Angular flatten fix required**: The current `compress-angular-docs.ts` has a basename collision bug (47+ files silently overwritten). This must be fixed before `build-db` can index Angular docs correctly. See Step 2 for details. +- **`docs_prepeared/` dependency**: The `build-db` step requires `docs_prepeared/<framework>/` to exist for `toc_name` lookup. If the prepared docs were cleaned before `build-db` runs, `toc_name` will be `null` for affected files. The `pipeline:*` scripts clear and re-create `docs_processing/`, `docs_prepeared/`, and `docs_final/` under the platform subdir at the start. Since `build-db` runs separately (after the pipeline completes), `docs_prepeared/` will exist as long as the user hasn't manually run `clear:<platform>` between the pipeline and `build:db`. +- **No side effects**: The `build-db` script only reads from `dist/docs_final/` and `dist/docs_prepeared/`, and writes to `dist/igniteui-docs.db`. It does not run any clean/clear operations, does not modify pipeline artifacts, and does not trigger other scripts. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/dual-mode-implementation-plan.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/dual-mode-implementation-plan.md new file mode 100644 index 000000000..bd58abb09 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/dual-mode-implementation-plan.md @@ -0,0 +1,79 @@ +# Plan: Dual-Mode MCP Server (Option B — Provider Abstraction) + +## Problem + +The MCP server currently works only in remote mode (proxying to `DOCS_BACKEND_URL`). It needs a second mode that queries a local SQLite database (`dist/igniteui-docs.db`) directly via `sql.js`. The architecture in `docs/db.md` was designed but never implemented in `src/index.ts`. + +## Approach + +Introduce a `DocsProvider` interface and two implementations. The server picks the provider at startup based on a `--local` CLI flag (or fallback to env var `DOCS_MODE=local`). Tool registration stays in `index.ts` but delegates all data access to the chosen provider. + +## File Plan + +``` +src/ +├── index.ts # MODIFY — extract fetch logic, wire up provider +├── providers/ +│ ├── DocsProvider.ts # NEW — interface definition + result types +│ ├── RemoteDocsProvider.ts # NEW — current fetch-based logic (extracted from index.ts) +│ └── LocalDocsProvider.ts # NEW — sql.js WASM-based SQLite queries +├── tools/ +│ └── description.ts # no changes +``` + +## Interface Design + +```ts +// providers/DocsProvider.ts +interface DocsProvider { + listComponents(framework: string, filter?: string): Promise<string>; + getDoc(framework: string, name: string): Promise<{ text: string; found: boolean }>; + searchDocs(framework: string, query: string): Promise<string>; +} +``` + +All three methods return serialized text (matching the current tool output format) so the tool handlers in `index.ts` stay simple — they just call the provider and wrap the result. + +## Todos + +1. **define-provider-interface** — Create `src/providers/DocsProvider.ts` with the interface and shared types. + +2. **extract-remote-provider** — Move current fetch logic from `index.ts` into `src/providers/RemoteDocsProvider.ts`. No behavior change. + +3. **implement-local-provider** — Create `src/providers/LocalDocsProvider.ts`: + - Add `sql.js` as a runtime dependency + - Load `igniteui-docs.db` into memory at init (path resolved relative to `__dirname` or via env var `DB_PATH`) + - Implement `listComponents` — SQL LIKE query against filename, toc_name, component, keywords, summary + - Implement `getDoc` — SELECT by framework + filename (append `.md`) + - Implement `searchDocs` — FTS4 MATCH with `snippet()`, top 20 results + - Use query patterns from `docs/db.md` + +4. **wire-up-index** — Modify `index.ts`: + - Parse `--local` from `process.argv` (or check `DOCS_MODE` env var) + - Instantiate the appropriate provider + - Refactor the 3 doc tool handlers to call `provider.listComponents()` / `provider.getDoc()` / `provider.searchDocs()` + - Keep `get_project_setup_guide` and the prompt unchanged (they don't use docs) + +5. **add-sql-js-dependency** — `npm install sql.js` and verify it bundles the WASM file correctly. + +6. **update-docs** — Update CLAUDE.md and README.md to document the `--local` flag and dual-mode behavior. + +## Mode Detection Logic + +``` +1. If `--local` flag is present → local mode +2. Else if `DOCS_MODE=local` env var → local mode +3. Else → remote mode (current default, backward-compatible) +``` + +## DB Path Resolution (local mode) + +1. `DB_PATH` env var if set +2. Otherwise `path.join(__dirname, 'igniteui-docs.db')` — since `__dirname` in compiled output IS `dist/`, the `.db` file is a sibling of the compiled JS. + +## Notes + +- `sql.js` requires its WASM binary. The default `initSqlJs()` call fetches it from CDN or uses a local path. For Node.js, the npm package bundles it at `node_modules/sql.js/dist/sql-wasm.wasm` — pass `locateFile` to point there. +- The `listComponents` output format should match the remote backend response so MCP clients see identical results regardless of mode. +- No changes to `build-db.ts`, pipeline scripts, or `tsconfig.json`. +- The `.db` file (~20MB) is a build artifact — not committed to git. Users must run the pipeline or `build:db` before using local mode. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/impl_plan.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/impl_plan.md new file mode 100644 index 000000000..68080b5dc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/impl_plan.md @@ -0,0 +1,116 @@ +# Plan: Code-View Tag Replacement Script + +## Context + +The markdown documentation files in `igniteui-docfx/en/components/` contain `<code-view>` tags that embed live Angular sample demos via iframes. To make the docs self-contained (for AI consumption / compressed docs), we need a TypeScript script that replaces each `<code-view>` tag with the actual source code of the referenced Angular component (TypeScript, HTML, SCSS/CSS). + +## Script Location + +`scripts/compress-angular-docs.ts` — new TypeScript script in the existing `scripts/` directory. + +## Output + +Processed markdown files saved to `dist/angular_docs/`, preserving the original directory structure from `igniteui-docfx/en/components/`. + +## Algorithm + +### 1. Parse code-view tags + +Use regex to match all `<code-view ... >[\s\S]*?</code-view>` blocks in each `.md` file. + +Extract the `iframe-src` attribute value. All 967 code-view tags have one. + +### 2. Map iframe-src to sample directory + +Extract two things from iframe-src: +- **Base URL variable**: determines which app directory to search +- **URL path segments**: e.g. `/notifications/banner-sample-2/` + +Base URL → app root mapping: +| Base URL | App Root | +|---|---| +| `{environment:demosBaseUrl}` | `igniteui-angular-samples/src/app/` | +| `{environment:dvDemosBaseUrl}` | `igniteui-angular-samples/src/app/` (same app, different category) | +| `{environment:lobDemosBaseUrl}` | `igniteui-angular-samples/projects/app-lob/src/app/` | +| `{environment:crmDemoBaseUrl}` | `igniteui-angular-samples/projects/app-crm/src/app/` | + +### 3. Build route-to-file map from Angular routing files + +The URL path doesn't map 1:1 to the filesystem (e.g. URL `/notifications/banner-sample-2/` maps to `notifications/banner/banner-sample-2/`). Instead of guessing, **parse the Angular routing files** to build a definitive lookup table. + +**Routing files to parse** (27 total across 3 apps): + +| App | Root routes | Child route files | +|---|---|---| +| Main | `src/app/app.routes.ts` | `src/app/{category}/{category}.routes.ts` (16 files) | +| LOB | `projects/app-lob/src/app/app.routes.ts` | `projects/app-lob/src/app/{category}/*.routes.ts` (8 files) | +| CRM | `projects/app-crm/src/app/app.routes.ts` | (inline, 1 file) | + +**Parsing steps:** + +1. Read each `app.routes.ts` to get top-level route `path` values and their `loadChildren` import paths (e.g. `path: 'notifications'` → `./notifications/notifications.routes`) +2. Read each child `.routes.ts` file and extract route entries: + - `path` value (the URL segment, e.g. `'banner-sample-2'`) + - `component` class name (e.g. `BannerSample2Component`) + - The corresponding `import` statement at the top of the file that maps the class to a relative file path (e.g. `import { BannerSample2Component } from './banner/banner-sample-2/banner-sample-2.component'`) +3. Resolve the relative import path against the routing file's directory to get the absolute component file path +4. Store in a `Map<string, string>` keyed by full URL path (e.g. `notifications/banner-sample-2` → absolute path to `banner-sample-2.component.ts`) + +**Result**: A complete lookup table mapping every URL path to its component's `.component.ts` file. The `.component.html` and `.component.scss`/`.component.css` files are in the same directory. + +### 4. Read component files + +From the resolved `.component.ts` path, derive the sibling files in the same directory: +- `{sampleName}.component.ts` +- `{sampleName}.component.html` +- `{sampleName}.component.scss` (fallback to `.component.css`) + +### 5. Build replacement + +Replace the entire `<code-view>...</code-view>` block with fenced code blocks: + +~~~ +```typescript +// contents of .component.ts +``` +```html +<!-- contents of .component.html --> +``` +```scss +// contents of .component.scss (only if non-empty) +``` +~~~ + +Skip empty files (like the user requested). + +### 6. Write output + +Save the modified markdown to `dist/angular_docs/`, mirroring the directory structure. E.g.: +- `igniteui-docfx/en/components/banner.md` → `dist/angular_docs/banner.md` +- `igniteui-docfx/en/components/charts/types/column-chart.md` → `dist/angular_docs/charts/types/column-chart.md` + +## Key Files + +- **New**: `scripts/compress-angular-docs.ts` — the script +- **Input**: `igniteui-docfx/en/components/**/*.md` (233 files with code-view tags) +- **Sample source**: `igniteui-angular-samples/src/app/` and `projects/app-lob/`, `projects/app-crm/` +- **Output**: `dist/angular_docs/**/*.md` + +## Run Command + +Add npm script: `"compress:angular": "npx tsx scripts/compress-angular-docs.ts"` + +No build step needed — use `tsx` for direct TypeScript execution (add as devDependency). + +## Error Handling + +- Log warnings to stderr for: unresolved iframe-src paths, missing component files +- Leave the original code-view tag in place if sample can't be found +- Print summary at end: total files processed, total code-views replaced, total warnings + +## Verification + +1. Run the script: `npm run compress:angular` +2. Check `dist/angular_docs/banner.md` — verify banner-sample-2 code-view is replaced with TS/HTML code blocks +3. Check a chart doc and a grid doc to verify dv/lob base URLs resolve correctly +4. Check warning count — should be minimal diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/incremental-processing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/incremental-processing.md new file mode 100644 index 000000000..0ab7b0759 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/incremental-processing.md @@ -0,0 +1,138 @@ +# Incremental Processing Plan + +## Problem + +The compress step uses LLM API calls (~$0.01-0.05 per file, ~1-3s per file). Running it on all ~370 Angular files takes significant time and cost. When upstream repos (docfx, samples) get new commits, typically only a few docs change. We need to avoid reprocessing unchanged documents. + +## Proposed Approach + +Track the **prepared** docs (post-inject output) in the repository. After each inject run, compare the new output against the tracked version. Only files that actually changed get sent to the compress step. After successful compression, the tracked copy is updated. + +## Directory Layout + +``` +igniteui-doc-mcp/ + docs_baseline/ ← NEW: tracked in git (post-inject snapshots) + angular/ + accordion.md ← copy of last-processed prepared doc + button.md + ... + dist/ ← gitignored (build artifacts) + docs_processing/angular/ ← export output + docs_prepeared/angular/ ← inject output (fresh) + docs_final/angular/ ← compress output + igniteui-docs.db ← SQLite DB +``` + +**Size impact on repo**: ~8.6MB for Angular prepared docs. With 4 platforms: ~35MB total. Acceptable for a docs repo — these are text files that diff/compress well in git. + +## Pipeline Flow (Updated) + +``` +export → inject → diff → compress (changed only) → update baseline → build-db +``` + +### Step-by-step: + +1. **Export**: `dist/docs_processing/angular/` ← from docfx source +2. **Inject**: `dist/docs_prepeared/angular/` ← code samples injected +3. **Diff** (NEW): Compare `dist/docs_prepeared/angular/` against `docs_baseline/angular/` + - Produces a list of changed/new/deleted files + - Unchanged files are skipped +4. **Compress**: Only processes files from the diff list + - Writes to `dist/docs_final/angular/` (only changed files) + - Unchanged files are copied from existing `dist/docs_final/` (or left in place) +5. **Update baseline** (NEW): Copy successfully compressed prepared docs to `docs_baseline/angular/` + - Only updates files that were successfully compressed + - Deleted files are removed from baseline +6. **Build DB**: Reads all files from `dist/docs_final/angular/` into SQLite + +## Implementation + +### New Script: `scripts/diff-docs.ts` + +Compares `dist/docs_prepeared/<framework>/` against `docs_baseline/<framework>/` and outputs a JSON manifest: + +```typescript +interface DiffResult { + framework: string; + changed: string[]; // files with content differences + added: string[]; // new files not in baseline + deleted: string[]; // files in baseline but not in fresh output + unchanged: string[]; // identical files (skipped) +} +``` + +**Comparison method**: Content hash (SHA-256) of each file after normalizing line endings to `\n`. This ensures consistent hashes across Windows (CRLF) and Linux (LF), regardless of git's `core.autocrlf` setting or `.gitattributes` rules. + +```bash +npx tsx scripts/diff-docs.ts --framework angular +# Output: dist/diff-manifest.json +``` + +**Output example**: +```json +{ + "framework": "angular", + "changed": ["grid.md", "button.md"], + "added": ["new-component.md"], + "deleted": ["deprecated-component.md"], + "unchanged": ["accordion.md", "action-strip.md", "...348 more"] +} +``` + +### Modify: `scripts/compress-angular-docs.ts` + +Add `--manifest` flag to accept the diff manifest: + +```bash +npx tsx --env-file=.env scripts/compress-angular-docs.ts --manifest dist/diff-manifest.json +``` + +When `--manifest` is provided: +- Only process files listed in `changed` + `added` +- For `deleted` files: remove from `dist/docs_final/angular/` if present +- Skip `unchanged` files entirely +- When `--manifest` is NOT provided: process all files (current behavior, for full rebuild) + +### New Script: `scripts/update-baseline.ts` + +After successful compression, updates the baseline: + +```bash +npx tsx scripts/update-baseline.ts --framework angular --manifest dist/diff-manifest.json +``` + +- Copies `changed` + `added` files from `dist/docs_prepeared/angular/` → `docs_baseline/angular/` +- Removes `deleted` files from `docs_baseline/angular/` +- Does NOT touch `unchanged` files + +### Updated npm Scripts + +```json +{ + "diff:angular": "npx tsx scripts/diff-docs.ts --framework angular", + "update-baseline:angular": "npx tsx scripts/update-baseline.ts --framework angular --manifest dist/diff-manifest.json", + "pipeline:angular": "npm run clear:build && npm run export:angular && npm run inject:angular && npm run diff:angular && npm run compress:angular -- --manifest dist/diff-manifest.json && npm run update-baseline:angular && npm run build:db -- --framework angular", + "pipeline:angular:full": "npm run clear && npm run export:angular && npm run inject:angular && npm run compress:angular && npm run update-baseline:angular --full && npm run build:db -- --framework angular" +} +``` + +Note: `clear:build` should only clear `dist/docs_processing/` and `dist/docs_prepeared/` (working dirs), NOT `dist/docs_final/` (we need it for unchanged files) and NOT `dist/igniteui-docs.db`. + +### First Run (Bootstrap) + +When `docs_baseline/angular/` doesn't exist yet: +- `diff-docs.ts` treats ALL files as `added` +- Full compress runs (same as today) +- `update-baseline.ts` creates baseline dir and copies all prepared files + +## Considerations + +- **Accuracy**: Content hashing is deterministic. If inject output is byte-identical, the file is skipped. No false negatives. +- **Inject non-determinism**: The inject step is deterministic (it reads source code and inserts it). Same input → same output. Safe to hash. +- **Line endings**: `diff-docs.ts` normalizes all content to `\n` before hashing, so CRLF (Windows) vs LF (Linux) differences never cause false changes. The baseline files in git should use `.gitattributes` with `* text eol=lf` for the `docs_baseline/` directory to keep diffs clean. +- **Partial failures**: If compress fails mid-run, baseline is NOT updated for failed files. Next run will re-detect them as changed. +- **Force rebuild**: `pipeline:angular:full` skips diff and processes everything. Use after prompt changes or model upgrades. +- **Cross-platform**: `diff-docs.ts` and `update-baseline.ts` accept `--framework`, ready for React/Blazor/WebComponents. +- **Git diffs**: Since baseline files are tracked, `git diff` shows exactly what changed between processing runs — useful for review. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/knowledgebase.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/knowledgebase.md new file mode 100644 index 000000000..0655f9c49 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/knowledgebase.md @@ -0,0 +1,358 @@ +# Documentation Processing Knowledgebase + +Lessons learned and issues encountered while building the documentation processing pipelines. Entries 1-16 are from the Angular pipeline; entries 17-21 from React; entries 22-26 from WebComponents and cross-platform improvements; entries 27-32 from Blazor, cross-platform architecture, and prompt improvements. + +## 1. LLM Compression: Wrong Component Prefix (Hallucination) + +**Problem:** The LLM system prompt in `compress-angular-docs.ts` was copied from a React workflow and instructed the model to use React's `Igr` prefix (e.g. `IgrButton`) instead of Angular's `Igx` prefix (e.g. `IgxButtonDirective`). + +**Impact:** All compressed docs had incorrect component names in frontmatter, breaking search/filtering in the MCP server. + +**Fix:** Make the system prompt framework-specific. Each platform has its own naming convention: + +| Framework | Prefix | Example | Suffix convention | +|---|---|---|---| +| Angular | `Igx` | `IgxGridComponent`, `IgxButtonDirective` | Includes `Component`/`Directive` suffix | +| React | `Igr` | `IgrGrid`, `IgrCategoryChart` | No suffix | +| WebComponents | `Igc` | `IgcGridComponent` | Includes `Component` suffix | +| Blazor | `Igb` | `IgbGrid`, `IgbCategoryChart` | No suffix | + +**Rule:** Each platform's compress script must have a platform-specific system prompt with correct prefix, examples, and naming conventions. + +## 2. LLM Compression: Hallucinated Content from Stub Documents + +**Problem:** Source files that contained only headers and `<!-- TODO -->` comments (e.g. `chart-legends.md`) were sent to the LLM compressor. The LLM fabricated entire documentation including fake API details, invented code examples, and non-existent component properties. + +**Impact:** The MCP server would serve completely fabricated documentation as if it were real. + +**Fix:** Added an anti-hallucination rule to the system prompt: +> "Do NOT invent or generate new content. If the input document contains only headers and TODO/placeholder comments with no actual documentation, return only the frontmatter and the existing headers." + +**Rule:** All platform compress scripts must include this rule. Additionally, filtering out stub files before compression (via toc.yml) is the preferred first line of defense. + +## 3. LLM Compression: Code Block Merging + +**Problem:** The LLM merged separate TypeScript, HTML, and SCSS code blocks into a single inline Angular component (converting `templateUrl` → inline `template`, `styleUrls` → inline `styles`). This changed the structure of the original code examples. + +**Impact:** Compressed docs showed a different coding pattern than the actual samples, which could mislead developers. + +**Fix:** Added a rule to the system prompt: +> "Do NOT merge separate code blocks (TypeScript, HTML, SCSS) into a single inline component. If the original has separate templateUrl/styleUrls files shown as individual code blocks, keep them as separate code blocks." + +**Rule:** Preserve the original code structure. This applies to all platforms — Angular uses `templateUrl`/`styleUrls`, React has separate JSX/CSS files, Blazor has `.razor`/`.razor.css`, etc. + +## 4. Processing Files Not in Published Documentation + +**Problem:** The export script (`export-angular-docs.ts`) used `collectFiles()` to recursively find all `.md` files in the components directory. This included files not part of the published documentation (stubs, drafts, unreferenced files). + +**Impact:** Unpublished stub files went through the pipeline and produced hallucinated output (see issue #2). + +**Fix:** Use `toc.yml` as the source of truth. Parse it to get the definitive list of files to process. Only files referenced in `toc.yml` are exported. + +**Rule:** Every platform's documentation source likely has a table of contents or manifest file. Always use it as the source of truth rather than filesystem enumeration. Known manifest locations: +- **Angular:** `angular/igniteui-docfx/en/components/toc.yml` (YAML, flat list with `name`, `href`, `premium`) +- **React / WebComponents / Blazor:** `common/igniteui-xplat-docs/docfx/en/components/toc.json` (JSON, shared across platforms with `exclude` arrays for platform filtering — an entry is included for a platform if `"Platform"` is NOT in its `exclude` array) + +## 5. toc.yml Contains Valuable Metadata + +**Problem:** The `toc.yml` file contains metadata (`name`, `premium`, `new`, `updated`) that was being discarded. The human-readable `name` and `premium` status are useful for the MCP server's search and filtering. + +**Fix:** Inject `_tocName` and `_premium` fields into the exported markdown frontmatter. The compress prompt is instructed to carry `premium: true` through to the output frontmatter and use `_tocName` as a hint for the component name. + +**Rule:** When processing documentation for other platforms, identify and carry forward any useful metadata from the manifest/toc into the pipeline. + +## 6. Grid Template Expansion (Angular-Specific) + +**Problem:** Angular docs use a template system (`grids_templates/`) where shared grid documentation is expanded into separate files for Grid, Tree Grid, Hierarchical Grid, and Pivot Grid using `@@include()`, `@@if`, and `@@variable` directives. + +**Impact:** The expanded files don't exist on disk — they're generated at build time. The toc.yml references the expanded paths (e.g. `treegrid/sorting.md`) not the template source. + +**Fix:** Run grid template expansion first, then match toc entries against both expanded outputs and regular source files. + +**Rule:** Other platforms may have similar template/include systems. Check for build-time content generation before assuming 1:1 mapping between source files and published docs. + +## 7. Stale Files in Output Directory + +**Problem:** The export script writes to `dist/docs_processing/` without clearing it first. When switching from `collectFiles()` to toc-based processing, previously exported files (like `chart-legends.md`) remained in the output directory from earlier runs. + +**Impact:** Downstream pipeline steps (inject, compress) would process stale files that shouldn't be there. + +**Mitigation:** The `npm run pipeline:angular` script runs `clear` first, which removes the entire `dist/` directory. Always use the full pipeline command or run `clear` before `export` when iterating. + +**Rule:** Pipeline scripts should always clear output directories before writing. The `pipeline:*` npm script should handle this automatically. + +## 8. Compression Script: Use OpenAI SDK with `--api-base` for Provider Flexibility + +**Context:** The original Python script used `litellm` for multi-provider LLM access. The TypeScript port uses the `openai` npm package instead. + +**Why:** The OpenAI SDK's chat completions API is the de facto standard. Most providers (Azure OpenAI, local LM Studio, Ollama, Groq, Together AI) expose an OpenAI-compatible endpoint. The `--api-base` CLI arg maps to the SDK's `baseURL` option, so switching providers requires no code changes. + +**Rule:** For new platform compress scripts, reuse the `openai` SDK + `--api-base` pattern rather than adding a multi-provider abstraction. Keep the `--model` arg as a plain string passed directly to the SDK. + +## 9. Compression Script: Resume and Single-File Reprocessing + +**Context:** LLM compression is slow and expensive (one API call per file, hundreds of files). Interruptions and quality issues on individual files are common. + +**Flags implemented:** +- `--resume-from <filename>` — copies all files before the named file unchanged, then starts compressing from that file onward. Essential for recovering from interrupted runs without re-spending API credits. +- `--only <filename>` — processes a single file, useful for iterating on compression quality or reprocessing a file that had validation errors. + +**Rule:** All platform compress scripts should include both flags. They save significant time and cost during development and production runs. + +## 10. Environment Variables: Use Node's Built-in `--env-file` Flag + +**Context:** The compress script needs `OPENAI_API_KEY`. Rather than adding a `dotenv` dependency, the npm script uses Node.js's built-in `--env-file` flag (available since Node 20.6+): + +```json +"compress:angular": "npx tsx --env-file=.env scripts/compress-angular-docs.ts" +``` + +**Rule:** Prefer `--env-file=.env` over the `dotenv` package for new scripts. It keeps dependencies minimal and works with both `node` and `tsx`. Ensure `.env` is in `.gitignore`. + +## 11. Pipeline Orchestration: Single `pipeline:*` npm Script + +**Context:** Each platform pipeline has 3 ordered steps (export → inject → compress) plus a clear step. Remembering the correct order and running them individually is error-prone. + +**Pattern:** Define a single orchestrator script per platform: +```json +"pipeline:angular": "npm run clear && npm run export:angular && npm run inject:angular && npm run compress:angular" +``` + +Uses `&&` chaining so any step failure stops the pipeline. + +**Rule:** Every new platform should have a `pipeline:<platform>` script. The order is always: `clear` → `export:<platform>` → `inject:<platform>` → `compress:<platform>`. Individual step scripts remain available for debugging. + +## 12. Environment Variable Placeholders in Documentation + +**Problem:** Source markdown files contain `{environment:angularApiUrl}`, `{environment:sassApiUrl}`, `{environment:dvApiBaseUrl}` placeholders for API documentation links. These are normally resolved at build time by the docfx system but remain as raw placeholders in our export. The LLM compressor either stripped the links entirely or kept the unresolved placeholders. + +**Impact:** Compressed docs lost all API reference links, making them less useful for developers. + +**Fix:** In the export step, load `environment.json` (found in the docfx source) and replace API URL placeholders with production URLs before writing the exported files. Only API documentation URLs are replaced (`angularApiUrl`, `sassApiUrl`, `dvApiBaseUrl`); demo base URLs (`demosBaseUrl`, etc.) are left as-is because they reference iframe samples that get replaced by the inject step. + +**Rule:** Each platform's docfx source likely has an `environment.json` or similar config. Replace API documentation URL placeholders during export so downstream steps have real, usable links. Do not replace demo/sample URLs — those are handled by the inject step. + +## 13. Data-Heavy Files Get Over-Compressed + +**Problem:** Files that are primarily data resources (e.g. `geo-map-resources-world-locations.md` containing hundreds of location objects) received 97% compression, losing essentially all content. The LLM reduced a massive dataset to 3 items and called the utility "small and compact" — the opposite of the truth. + +**Impact:** Compressed docs for data resource files were almost empty and inaccurate. + +**Fix:** Updated the compress prompt to explicitly handle data-heavy files: keep only 1-2 representative items to show the data shape, preserve the class/function structure. The validation prompt was also updated to not penalize data truncation as long as the data shape is preserved. + +**Rule:** Each platform will have data-heavy documentation files. The compress prompt must explicitly instruct the LLM on how to handle them. Validation should account for expected data truncation. + +## 14. Use Structured Output for LLM JSON Responses + +**Problem:** The validation script expected the LLM judge to return strict JSON, but responses sometimes included markdown fences, truncated JSON, or extra text before/after the object. This caused parse failures (e.g. `combo.md` failed entirely in the first validation run). + +**Fix:** Use OpenAI's structured output feature (`zodTextFormat` from `openai/helpers/zod` + `client.responses.parse()`) which guarantees the response matches a Zod schema. This eliminates JSON parsing failures entirely. + +**Rule:** Any pipeline script that expects structured LLM output (JSON scores, metadata extraction, etc.) should use structured output with a Zod schema. Reserve free-form `chat.completions.create()` only for scripts that need unstructured text (like the compress step which outputs markdown). + +## 15. Make Pipeline Tools Platform-Independent + +**Problem:** The validation script was originally named `validate-angular-docs.ts` with hardcoded Angular paths. This would require duplicating the entire script for each platform. + +**Fix:** Renamed to `validate-docs.ts` with `--input`, `--original`, and `--output` CLI parameters. The npm script passes platform-specific paths: +```json +"validate:angular": "npx tsx --env-file=.env scripts/validate-docs.ts --input ./dist/docs_final/angular" +``` + +**Rule:** Pipeline tools that don't contain platform-specific logic should accept directory paths as parameters instead of hardcoding them. Platform-specific npm scripts in `package.json` provide the concrete paths. This avoids script duplication when adding new platforms. + +## 16. Per-Platform Cleanup Scripts + +**Problem:** The original `clear` script deleted the entire `dist/` directory. When working on one platform, this wiped the processed output of all other platforms. + +**Fix:** Added `clear:<platform>` scripts that only remove that platform's subdirectories from `docs_processing/`, `docs_prepeared/`, and `docs_final/`. The full `clear` script still exists for complete resets. + +**Rule:** Always provide per-platform cleanup. The `pipeline:<platform>` script should use `clear:<platform>`, not the global `clear`. + +## 17. Injected Sample Code Contains Massive Data Arrays + +**Problem:** React (and likely Blazor/WC) sample source files contain auto-generated data classes with 500-1000 items each. After the inject step inlines these into docs, individual files balloon to 300KB-1.4MB. Files this large cause poor LLM compression results, exceed context windows, and waste API credits. + +**Three distinct data patterns found:** +1. `const newItems = [new Item({...}), new Item({...}), ...];` — single-line items in a const array (most common, e.g. `FinancialDataAll` with 1000 items) +2. `this.push(new Item({...})); this.push(new Item({...}));` — repeated multi-line push calls in a constructor (e.g. `InvoicesData` with 499 items) +3. `export const X = [{...}, {...}, ...];` — plain object array literals (e.g. `SALES_DATA_NEW` with 1042 items) + +**Impact:** Before trimming: 20.19 MB total, 15 files over 300KB. After trimming: 8.64 MB total, 0 files over 300KB. + +**Fix:** Added a `trimDataArrays` post-processing step to the inject script that keeps the first 3 items per array and replaces the rest with `// ... N more items`. This preserves the data shape for documentation while eliminating bulk. + +**Rule:** Any platform's inject script should include data array trimming as a post-processing step. Do not rely on the LLM compressor to handle data trimming — it's too expensive, unreliable, and the arrays may exceed the LLM's context window. Trim deterministically at inject time. + +## 18. Xplat Build Output Requires Filename Flattening + +**Problem:** The xplat gulp build (`buildReact`, `buildBlazor`, `buildWC`) produces hierarchically nested output directories (e.g. `grids/grid/editing.md`, `charts/types/area-chart.md`). The downstream pipeline expects flat single-directory output. + +**Fix:** The export script flattens paths using these rules: +- Top-level files: keep filename as-is (`bullet-graph.md`) +- Grid component subdirectories: prefix with component dir (`grids/grid/editing.md` → `grid-editing.md`, `grids/tree-grid/editing.md` → `tree-grid-editing.md`) +- Category subdirectories (charts/types, etc.): use just the filename (`charts/types/area-chart.md` → `area-chart.md`) since it's already descriptive +- Collisions: add parent directory prefix + +**Rule:** When implementing Blazor/WC pipelines, reuse the same flattening logic. The xplat build produces the same directory hierarchy for all platforms. + +## 19. LLM Compression: Code Rewriting and Silent "Fixes" + +**Problem:** The LLM compressor silently "corrects" apparent typos in code examples (e.g. `StartValue` → `startValue`, `bndValue` → `endValue`) and synthesizes simplified code snippets with made-up values (e.g. replacing `transitionDuration = 1000` set imperatively with `transitionDuration={500}` as a JSX prop that never existed in the original). + +**Impact:** Compressed docs contain code that doesn't match the actual component API or sample source, potentially misleading developers. "Fixed" typos may mask real documentation bugs that should be reported upstream. + +**Fix:** Added rules to the compress prompt: +- "Never rewrite or fix code from the original — preserve property names, values, and casing exactly" +- "Never change literal values" +- "Do not synthesize simplified code snippets to replace originals — compress by trimming, not rewriting" + +**Rule:** All platform compress prompts need these rules. LLMs have a strong tendency to "improve" code they compress. The prompt must explicitly forbid it. + +## 20. LLM Compression: Dropping Complex Examples Entirely + +**Problem:** When a section has a large, complex code example (e.g. accordion customization showing IgrCheckbox, IgrRangeSlider, IgrDateTimeInput, IgrRating, IgrRadioGroup, and `registerIconFromText` in 260 lines), the LLM sometimes deletes the entire example and replaces it with a text pointer like "see the product examples". This loses the most instructive content in the doc. + +**Fix:** Added rules to the compress prompt: +- "When trimming a code example, trim it — do NOT delete it entirely" +- "Every section that has a code example in the original must keep at least a shortened version" +- "If a section has a complex/advanced example, keep a trimmed version preserving the structural pattern" + +**Rule:** All platform compress prompts should include this. The LLM defaults to dropping content it can't easily shrink. The prompt must make clear that a trimmed 30-line version of a 260-line example is far more valuable than no example at all. + +## 21. LLM Compression: Code Block Self-Consistency + +**Problem:** The LLM removes variable definitions, data model fields, or component props from code blocks while keeping code that references them. Examples: removing `const mods = [...]` while keeping `mods.forEach(...)`, removing `highLA`/`lowLA` fields from a data model while keeping `lowMemberPath="lowLA"` in JSX, removing `name` prop from `<IgrDataToolTipLayer>`. + +**Fix:** Added a rule to the compress prompt: +- "Code blocks must be self-consistent — if a block references a variable, field, or prop, that reference must be defined within the same or adjacent block" +- "Do not strip component props from JSX" + +**Rule:** All platform compress prompts need this. The LLM optimizes for size reduction without checking referential integrity. Broken code examples are worse than verbose ones. + +## 22. Token Counting with js-tiktoken + +**Context:** Compressed docs are served to LLMs via the MCP server. Knowing the token count per file is essential for understanding context window consumption and budgeting. + +**Implementation:** All compress scripts use `js-tiktoken` with `encodingForModel("gpt-4o")` (o200k_base encoding) to count tokens per compressed file. Token counts appear in three places: +- Per-file console output: `-> 28.1KB (49% reduction) [7234 tokens]` +- Summary line: `Total tokens: 142,567` +- `_compression_log.csv` with columns: `file,original_kb,compressed_kb,reduction_pct,tokens` +- `total_tokens` field in `_compression_stats.json` + +Tokens are counted for all files including skipped (below min-size threshold) and dry-run files, so the totals always reflect the full output directory. + +**Rule:** Any new platform compress script must include token counting. Use the same `encodingForModel("gpt-4o")` call — the encoding is model-agnostic enough for estimation purposes even if the docs are ultimately consumed by a different model. + +## 23. Under-Compression on Code-Heavy Files + +**Problem:** Documents that are primarily code with little prose (e.g. `cell-template.md` with a large `GridLiteDataService` class, `bullet-graph.md` with many HTML attribute examples) consistently under-compress. Observed reductions: `cell-template.md` ~15%, `bullet-graph.md` ~35%, `card.md` ~31% — all well below the ~50% target. + +**Why:** The compress prompt correctly instructs the LLM to preserve code integrity and keep at least one example per section. For code-heavy docs, there's simply not enough prose to cut, and the LLM is (rightly) conservative about trimming code blocks. + +**Impact:** These files consume more tokens than expected but the code they preserve is genuinely useful. Forcing deeper cuts would harm quality. + +**Rule:** Accept under-compression on code-heavy files as expected behavior. Do not tune the prompt to force deeper cuts — the ~50% target is an average across the full corpus, not a per-file requirement. Data service/utility class method bodies are the one area where deeper trimming is safe (keep signatures + one representative method, `// ...` the rest), but this is better handled in the inject step's `trimDataArrays` than by prompt tuning. + +## 24. LLM Compression: Synthesized Code Snippets for Prose-Only Sections + +**Problem:** When a documentation section describes a component feature in prose only (no code example in the original), the LLM occasionally synthesizes a small illustrative code snippet. Example: the WebComponents `card.md` "Outlined cards" section only had prose describing the `outlined` attribute, but the compressed version added `<igc-card outlined><!-- content --></igc-card>`. + +**Impact:** The synthesized snippet is technically accurate (derived from the prose) but violates the anti-hallucination rule. It creates content that wasn't in the source, even if it's helpful. + +**Rule:** The existing anti-hallucination prompt rule ("Do NOT invent or generate new content") should catch this, but LLMs still do it occasionally for very short/obvious snippets. During validation, flag these as minor issues but don't consider them blockers. The rule "every section that had a code example must keep one" should not be misread as "every section must have a code example" — sections that were prose-only in the original should stay prose-only. + +## 25. LLM Compression: Markdown Links Dropped in API References + +**Problem:** The LLM consistently strips markdown hyperlink syntax from API References and Additional Resources sections. `[Bar Chart](bar-chart.md)` becomes `- Bar Chart` or `Bar Chart (bar-chart.md)`. This was observed across all WebComponents compressed files and likely affects all platforms. + +**Impact:** Internal documentation cross-references lose their navigability. For MCP serving this is low-impact (the MCP server doesn't render links), but if the compressed docs are ever used in a context that supports markdown links, the references are broken. + +**Rule:** This is a known LLM behavior — models treat links as verbose boilerplate and strip them for compression. The current prompt doesn't explicitly address link preservation. If link preservation becomes important, add a rule: "Preserve markdown hyperlinks in API References and Additional Resources sections exactly as they appear in the original." For now, accept this as a minor quality trade-off. + +## 26. LLM Compression: Header Hierarchy Changes + +**Problem:** The LLM occasionally changes heading levels during compression — demoting `##` headers to `###` (e.g. in `area-chart.md` where chart variant sections were demoted), promoting `###` to `##` (e.g. Summary section in `card.md`), or merging similar sections under a combined header (e.g. "Stacked 100% Area / Spline Area"). Observed across WebComponents files. + +**Impact:** Changes document structure, which could affect any tooling that parses headers for navigation or sectioning. Merged sections lose their individual identity. + +**Rule:** The compress prompt says "preserve all markdown headers" but doesn't explicitly forbid changing their levels or merging them. If header fidelity is important, add: "Do not change heading levels (##, ###, ####) — keep them exactly as in the original. Do not merge separate sections into combined headers." For now this is a minor issue since the MCP server doesn't use header hierarchy for indexing. + +## 27. Blazor Sample File Types and Skip List + +**Context:** Blazor samples use a different file structure than React (`.tsx`) or WebComponents (`.html`/`.ts`). The inject script must handle Blazor-specific extensions and skip boilerplate files. + +**File types to read:** +- `.razor` → language: `razor` +- `.razor.cs` / `.cs` → language: `csharp` +- `.razor.css` / `.css` → language: `css` + +**Files to skip:** `_Imports.razor`, `.csproj`, `Program.cs`, and everything under `wwwroot/`. These are project scaffolding, not sample content. + +**Rule:** Each platform's inject script needs a curated skip list. Blazor has more boilerplate files than React/WC. The skip list prevents project configuration from being inlined into documentation. + +## 28. Cross-Platform Architecture: Gulp Build First (Option A) + +**Context:** React, WebComponents, and Blazor docs all live in the shared `igniteui-xplat-docs` repo. Rather than reimplementing the complex `MarkdownTransformer` logic (variable replacement from `docConfig.json`, platform conditional sections, code fence filtering, grid template expansion, API link resolution via `apiMap/`), all three pipelines use Option A: run the gulp build first (`buildReact`, `buildWC`, `buildBlazor`), then process the fully-resolved output. + +**Why:** The gulp build handles ~62KB of `docConfig.json` replacements, platform-conditional HTML comment blocks (`<!-- Blazor -->...<!-- end: Blazor -->`), code fence filtering per platform, shared grid template expansion from `grids/_shared/`, and API type name resolution via `apiMap/` JSON files. Reimplementing this would be error-prone and risk diverging from the official documentation site. + +**Rule:** For any platform using the xplat build system, always run the gulp build as a prerequisite step. The `--skip-build` flag on export scripts is for development iteration only (when the build output already exists). The `pipeline:*` npm scripts always include the build step. + +See `docs/xplat-docs-architecture.md` for detailed analysis of the xplat build system. + +## 29. Blazor Naming Inconsistency in docConfig.json + +**Problem:** In `docConfig.json`, the `{GridName}` replacement values for Blazor are inconsistent — only the base `GridName` has the `Igb` prefix (`IgbGrid`), while the others use unprefixed names (`TreeGrid`, `PivotGrid`, `HierarchicalGrid`). However, in actual Blazor code, component **tags** always use the `Igb` prefix: `<IgbGrid>`, `<IgbTreeGrid>`, `<IgbPivotGrid>`. + +**Impact:** The `{GridName}` variable is used in prose text, not in code blocks, so this doesn't cause incorrect code examples. But it means the prose might say "TreeGrid" while the code says `<IgbTreeGrid>`. + +**Rule:** Be aware of this inconsistency when validating Blazor compressed docs. The compress prompt correctly specifies `Igb` prefix with no suffix, but validation shouldn't flag prose mentions of unprefixed grid names inherited from `docConfig.json` replacements. + +## 30. Xplat toc.json vs Angular toc.yml + +**Context:** Angular uses `toc.yml` (YAML, flat list with `name`, `href`, `premium` fields). React, WebComponents, and Blazor share `toc.json` (JSON, hierarchical with `exclude` arrays for platform filtering). + +**Key difference:** In `toc.json`, an entry is included for a platform if: +- It has no `exclude` field, OR +- The platform name (e.g., `"Blazor"`) is NOT in the `exclude` array + +This is the opposite logic from what you might expect — `exclude` means "hide from these platforms", not "include for these platforms". + +**Rule:** When adding a new platform, filter toc.json entries by checking `!entry.exclude?.includes("PlatformName")`. The platform names are case-sensitive: `"Angular"`, `"React"`, `"WebComponents"`, `"Blazor"`. + +## 31. Backtick Sample Syntax vs code-view Tags + +**Problem:** The xplat source docs use a backtick syntax for sample references (`` `sample="/gauges/bullet-graph/animation", height="155"` ``), not `<code-view>` tags like Angular. However, the xplat gulp build converts these backtick references into `<code-view>` HTML tags with `iframe-src` and `github-src` attributes during the build step. + +**Impact:** After the gulp build, the inject scripts for React, WC, and Blazor can use the same `<code-view>` regex pattern as Angular's inject script. The `github-src` attribute provides a direct path to the sample source directory, making resolution simpler than Angular's route-based approach. + +**Rule:** Always process post-build output (not raw source) for xplat platforms. The backtick-to-code-view conversion is handled by the gulp build, and the `github-src` attribute is the primary mechanism for locating sample files across all xplat platforms. + +## 32. LLM Compression: Variant Sections Merged and Examples Dropped + +**Problem:** In docs that cover multiple sub-types of the same component family (e.g., `area-chart.md` with Stacked Area, Stacked 100% Area, Stacked Spline Area, Stacked 100% Spline Area), the LLM treats these as "minor variations of the same pattern" and merges their sections under a combined heading (e.g., "### Stacked Area / Stacked Spline / Stacked 100% Variants"). This causes two issues simultaneously: header hierarchy changes (KB #26) and dropped examples (KB #20), since the merged section keeps only one example for all variants. + +**Impact:** Developers lose the specific component/series type names and their code patterns. Each variant uses a different component class (e.g., `IgbStackedAreaSeries` vs `IgbStacked100SplineAreaSeries`), and merging them hides these distinctions. + +**Fix:** Updated all four compress prompts with three reinforcing rules: +1. **WHAT TO CUT #2** (redundant examples): Added explicit exception — sections covering **different component types or sub-types** are NOT redundant, even if boilerplate is similar. The differentiator is the component tag or series type. +2. **WHAT TO KEEP #1** (headers): Added "Do not change heading levels. Do not merge or combine separate headings into one." +3. **WHAT TO KEEP #3** (examples per section): Added explicit examples of variant sections that must each keep their own code example, plus anti-merge rule: "Do NOT merge separate sections into a combined section." + +**Rule:** This three-pronged approach is needed because the LLM's merge behavior is a chain: it first decides sections are "redundant" → merges headers → then drops examples from the merged section. Blocking any single step isn't enough — all three rules must reinforce each other. + +## Related Documentation + +| Document | Description | Status | +|----------|-------------|--------| +| `impl_plan.md` | Original plan for `<code-view>` tag replacement in Angular docs | ✅ Implemented | +| `prefix_fix.md` | Plan for fixing React→Angular prefix in compress prompt | ✅ Implemented | +| `toc_based_processing.md` | Plan for using `toc.yml` as source of truth instead of filesystem enumeration | ✅ Implemented | +| `xplat-docs-architecture.md` | Architecture analysis of the shared xplat build system (variable replacement, platform filtering, code fence filtering, API mapping) | Reference | +| `react-pipeline.md` | React pipeline implementation plan (export → inject → compress) | ✅ Implemented | +| `wc-pipeline-plan.md` | WebComponents pipeline implementation plan | ✅ Implemented | +| `blazor-pipeline-plan.md` | Blazor pipeline implementation plan | ✅ Implemented | +| `db.md` | SQLite + FTS5 database integration plan (replaces file-based MCP server) | ⬜ Not implemented | +| `incremental-processing.md` | Incremental processing plan (diff-based pipeline to avoid reprocessing unchanged docs) | ⬜ Not implemented | +| `progress.md` | Implementation progress tracker (what's done, what's planned) | Active | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/prefix_fix.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/prefix_fix.md new file mode 100644 index 000000000..18d4a5032 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/prefix_fix.md @@ -0,0 +1,77 @@ +# Fix: Angular Component Naming in compress-angular-docs.ts + +## Problem + +The `compress-angular-docs.ts` script has a system prompt copied from a React compression workflow. The LLM is instructed to use **React** component names with the `Igr` prefix (e.g. `IgrButton`, `IgrGrid`) in the frontmatter `component` field — but this script exclusively processes **Angular** documentation where the correct prefix is `Igx` (e.g. `IgxButtonDirective`, `IgxGridComponent`). + +**Example:** + +| Field | Current (wrong) | Expected | +|---|---|---| +| Input doc | `angular/igniteui-docfx/en/components/button.md` (uses `IgxButtonModule`, `IgxButtonDirective`) | +| Output `component:` | `IgrButton` | `IgxButtonDirective` | + +The `component` frontmatter field is used by the MCP server (`src/index.ts`) for filtering and display in `list_components` and matching in `search_docs`. Wrong prefixes mean Angular searches for `IgxButton` won't match the compressed doc. + +## Root Cause + +The system prompt in `getSystemPrompt()` (line 73-116 of `compress-angular-docs.ts`) contains: + +1. **Line 74**: Generic description mentioning "Angular, React, Blazor, Web Components" — but this script only processes Angular docs +2. **Line 80**: Example frontmatter uses `IgrExactComponentName` (React prefix) +3. **Line 86**: Explicit instruction: _"The exact Ignite UI React component class name(s) as used in code (e.g. IgrCategoryChart, IgrGrid, IgrCombo, IgrDatePicker). Use the PascalCase Igr-prefixed name."_ + +This prompt was copied from a React compression workflow and was never updated for Angular. + +## Proposed Fix + +Since `compress-angular-docs.ts` is a dedicated Angular script (it reads from the Angular pipeline output, is invoked via `npm run compress:angular`, and will never process non-Angular docs), the fix is straightforward: **update the system prompt to be Angular-specific**. + +### Changes to `getSystemPrompt()` in `scripts/compress-angular-docs.ts` + +**1. Line 74** — Narrow the scope from generic to Angular-only: + +```diff +- You are compressing Infragistics Ignite UI component documentation (Angular, React, Blazor, Web Components). ++ You are compressing Infragistics Ignite UI for Angular component documentation. +``` + +**2. Line 80** — Fix the frontmatter example: + +```diff +- component: IgrExactComponentName ++ component: IgxExactComponentName +``` + +**3. Line 86** — Replace the React-specific `component` field instruction: + +```diff +- - **component**: The exact Ignite UI React component class name(s) as used in code +- (e.g. IgrCategoryChart, IgrGrid, IgrCombo, IgrDatePicker). Use the PascalCase +- Igr-prefixed name. If the doc covers multiple components, comma-separate them. ++ - **component**: The exact Ignite UI for Angular component/directive class name(s) as ++ found in the document's source code (e.g. IgxGridComponent, IgxButtonDirective, ++ IgxComboComponent, IgxDatePickerComponent). Use the PascalCase Igx-prefixed name ++ including the Component/Directive suffix as used in Angular. If the doc covers ++ multiple components, comma-separate them. +``` + +No other changes are needed — the rest of the prompt (WHAT TO CUT, WHAT TO KEEP, OUTPUT RULES) is already framework-neutral and even references Angular-specific patterns like `@NgModule` and `IgxModule`. + +## Files to Change + +| File | Change | +|---|---| +| `scripts/compress-angular-docs.ts` | Update 3 lines in the `getSystemPrompt()` system prompt string (lines 74, 80, 86) | + +## Verification + +1. Process a single file: `npm run compress:angular -- --resume-from button.md --min-size 0` +2. Check `dist/docs_final/angular/button.md` frontmatter — should have `component: IgxButtonDirective` (not `IgrButton`) +3. Spot-check a grid doc — should have `component: IgxGridComponent` + +## Optional Follow-Up (out of scope) + +- Update `src/index.ts` tool descriptions from "React" to be framework-generic or parameterized +- Make the MCP server docs directory configurable (currently hardcoded to `react_compressed/`) +- Re-compress all existing Angular docs after the fix is applied diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/progress.md new file mode 100644 index 000000000..08a2c6a5f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/progress.md @@ -0,0 +1,114 @@ +# Implementation Progress + +Tracks which plans/features have been implemented and which are pending. + +## Implemented + +### Prefix Fix (`prefix_fix.md`) +- **Status**: ✅ Done +- **What**: Fixed LLM compress prompt using React `Igr` prefix instead of Angular `Igx` +- **Files changed**: `scripts/compress-angular-docs.ts` (3 lines in system prompt) + +### Code-View Injection (`impl_plan.md`) +- **Status**: ✅ Done +- **What**: Script that replaces `<code-view>` tags with actual Angular component source code (TS/HTML/SCSS) +- **Files changed**: `scripts/inject-angular-docs.ts` + +### TOC-Based Processing (`toc_based_processing.md`) +- **Status**: ✅ Done +- **What**: Export step reads `toc.yml` to determine which files to process, injects `_tocName` and `_premium` metadata into frontmatter +- **Files changed**: `scripts/export-angular-docs.ts`, `scripts/compress-angular-docs.ts` + +### Compress Prompt Improvements +- **Status**: ✅ Done +- **What**: Anti-hallucination rule, no-merge rule for separate code blocks, `_premium`/`_tocName` carry-through +- **Files changed**: `scripts/compress-angular-docs.ts` (system prompt) + +### Single File / Resume Processing +- **Status**: ✅ Done +- **What**: Added `--only` flag to process a single file and `--resume-from` to continue from a specific file +- **Files changed**: `scripts/compress-angular-docs.ts` + +### Validation Script (`validate-docs.ts`) +- **Status**: ✅ Done +- **What**: Platform-independent LLM-as-Judge script using GPT-5.1 to score compressed docs on completeness, accuracy, hallucination, structure. Uses OpenAI structured output (`zodTextFormat` + `client.responses.parse()`) for guaranteed valid JSON. +- **Files changed**: `scripts/validate-docs.ts`, `package.json` (npm scripts for `validate:angular`, `validate:react`, `validate:webcomponents`, `validate:blazor`) + +### React Documentation Pipeline +- **Status**: ✅ Done +- **What**: Full export → inject → compress pipeline for React docs using xplat gulp build + toc.json filtering +- **Files created**: `scripts/export-react-docs.ts`, `scripts/inject-react-docs.ts`, `scripts/compress-react-docs.ts` +- **Files changed**: `package.json` (npm scripts), `.gitmodules` (react examples submodule), `CLAUDE.md` +- **Key differences from Angular**: Uses toc.json with `exclude` arrays instead of toc.yml, flattens hierarchical build output to flat filenames, uses `github-src` attribute directly for sample resolution (no route parsing), reads TSX files instead of TS/HTML/SCSS, React-specific compress prompt with `Igr` prefix + +### WebComponents Documentation Pipeline +- **Status**: ✅ Done +- **What**: Full export → inject → compress pipeline for WebComponents docs using xplat gulp build + toc.json filtering +- **Files created**: `scripts/export-wc-docs.ts`, `scripts/inject-wc-docs.ts`, `scripts/compress-wc-docs.ts` +- **Files changed**: `package.json` (npm scripts), `.gitmodules` (wc examples submodule), `CLAUDE.md` +- **Key differences from React**: Uses `Igc` prefix with `Component` suffix (e.g. `IgcGridComponent`), reads `.html`/`.ts`/`.css` files (not `.tsx`), toc.json exclude filter checks `"WebComponents"`, built output from `dist/WebComponents/`, HTML+TypeScript as separate blocks in compress prompt + +### Token Counting in Compression Scripts +- **Status**: ✅ Done +- **What**: Added `js-tiktoken` (o200k_base encoding via `gpt-4o` model) to all four compress scripts to count tokens per compressed file +- **Files changed**: `scripts/compress-angular-docs.ts`, `scripts/compress-react-docs.ts`, `scripts/compress-wc-docs.ts`, `scripts/compress-blazor-docs.ts`, `package.json` +- **Output**: Per-file token count in console (`[7234 tokens]`), total tokens in summary, `_compression_log.csv` with per-file stats, `total_tokens` field in `_compression_stats.json` + +### Blazor Documentation Pipeline +- **Status**: ✅ Done +- **What**: Full export → inject → compress pipeline for Blazor docs using xplat gulp build + toc.json filtering +- **Files created**: `scripts/export-blazor-docs.ts`, `scripts/inject-blazor-docs.ts`, `scripts/compress-blazor-docs.ts` +- **Files changed**: `package.json` (npm scripts), `.gitmodules` (blazor examples submodule), `CLAUDE.md` +- **Key differences from React/WC**: Uses `Igb` prefix with no suffix (e.g. `IgbGrid`), reads `.razor`/`.razor.cs`/`.cs`/`.razor.css`/`.css` files, toc.json exclude filter checks `"Blazor"`, built output from `dist/Blazor/`, Razor+C# as separate blocks in compress prompt, `@* comment *@` syntax in Razor blocks + +### Knowledgebase Cross-Platform Entries +- **Status**: ✅ Done +- **What**: Added entries 27-31 to `docs/knowledgebase.md` covering Blazor file types, cross-platform architecture (Option A: gulp build first), Blazor naming inconsistency, toc.json vs toc.yml, backtick sample syntax. Added Related Documentation table referencing all docs. +- **Files changed**: `docs/knowledgebase.md` + +### Compress Prompt: Anti-Merge and Header Preservation +- **Status**: ✅ Done +- **What**: Fixed LLM merging separate variant sections (e.g. Stacked Area + Stacked Spline Area → combined section with dropped examples). Added three reinforcing rules to all four compress scripts: (1) sections covering different component types are NOT redundant, (2) heading levels must be preserved exactly, (3) separate sections must not be merged into combined sections. +- **Files changed**: `scripts/compress-angular-docs.ts`, `scripts/compress-react-docs.ts`, `scripts/compress-wc-docs.ts`, `scripts/compress-blazor-docs.ts` (system prompts), `docs/knowledgebase.md` (entry #32) + +### SQLite + FTS4 Database (`db.md`) +- **Status**: ✅ Done +- **What**: Replaced file-based MCP server with SQLite FTS4 full-text search database indexing all 4 frameworks (~1,208 docs) +- **Files created**: `scripts/build-db.ts`, `src/sql.js.d.ts` +- **Files changed**: `src/index.ts` (full rewrite), `package.json` (renamed to `igniteui-docs-mcp`, added `build:db` script, added `sql.js` + `better-sqlite3` deps) +- **Key changes**: + - `build-db.ts` uses `better-sqlite3` to read `docs_final/` + `docs_prepeared/` and produce `dist/igniteui-docs.db` + - `src/index.ts` uses `sql.js` (WASM SQLite) to load the DB and serve queries + - All 3 MCP tools gain a `framework` parameter (optional for `list_components`/`search_docs`, required for `get_doc`) + - `search_docs` uses FTS4 MATCH with Porter stemming and `snippet()` excerpts (top 20 results) + - `list_components` uses SQL LIKE for filtering across filename, toc_name, component, keywords, summary + - `toc_name` looked up from prepared docs (`_tocName` frontmatter field) at build time + - Server renamed from `igniteui-react-docs` to `igniteui-docs` + - DB size: ~20MB for 1,208 docs + +### Batch Compression (`batch-compression.md`) +- **Status**: ✅ Done +- **What**: OpenAI Batch API integration for all 4 compress scripts. Submits all ~300 docs per framework as a single async batch instead of sequential API calls. 50% cost reduction, completion in minutes to ~1 hour. +- **Files changed**: `scripts/compress-angular-docs.ts`, `scripts/compress-react-docs.ts`, `scripts/compress-wc-docs.ts`, `scripts/compress-blazor-docs.ts`, `package.json` +- **Key features**: + - `--batch submit` — builds JSONL, uploads to OpenAI, creates batch, saves `_batch_state.json` + - `--batch poll` — polls batch status every 30s, downloads results, applies `stripResponseWrapper()` + `validateStructure()`, writes output files + stats/log + - `--batch retry` — re-submits failed/invalid files as a new batch + - Uses relative paths as `custom_id` to handle Angular's nested subdirectories (grid/, hierarchical-grid/, tree-grid/ share filenames) + - Displays batch-level errors from `batch.errors.data` on failure + - 8 convenience npm scripts: `compress:batch:{angular,react,blazor,wc}:{submit,poll}` + - Existing `--only`, `--resume-from`, `--min-size`, `--model` flags work with `--batch submit` + - Sequential mode unchanged — omitting `--batch` runs the original one-by-one flow + +## Not Implemented + +### Incremental Processing (`incremental-processing.md`) +- **Status**: ⬜ Planned +- **What**: Avoid reprocessing unchanged documents by tracking prepared docs in repo and diffing +- **Key tasks**: + - [ ] Create `docs_baseline/` tracked directory + - [ ] Create `scripts/diff-docs.ts` (content hash comparison) + - [ ] Add `--manifest` flag to compress script + - [ ] Create `scripts/update-baseline.ts` + - [ ] Add `clear:build` script (partial clear, preserves `docs_final/`) + - [ ] Update pipeline npm scripts diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-pipeline.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-pipeline.md new file mode 100644 index 000000000..7ffe6e8fe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-pipeline.md @@ -0,0 +1,210 @@ +# React Documentation Pipeline Implementation Plan + +## Context + +The Angular pipeline (export → inject → compress) is fully working. We now need a React pipeline. Unlike Angular (which has its own `igniteui-docfx` repo), React docs live in the shared `igniteui-xplat-docs` repo alongside Blazor and WebComponents. The xplat repo has its own gulp build that handles variable replacement, platform filtering, code fence filtering, grid template expansion, and API link resolution. The gulp build also converts backtick sample syntax into `<code-view>` HTML tags — the same format Angular uses — which means the inject step can follow the same pattern. + +## Pipeline Overview + +``` +[xplat gulp build] → export:react → inject:react → [size check] → compress:react +``` + +| Step | What it does | Input | Output | +|------|-------------|-------|--------| +| Prerequisites | Run xplat gulp build | xplat source docs | `common/igniteui-xplat-docs/dist/React/en/components/` | +| Export | Flatten, add toc metadata | gulp build output | `dist/docs_processing/react/` | +| Inject | Replace `<code-view>` with sample source | exported docs + react examples submodule | `dist/docs_prepeared/react/` | +| Size Check | Report files >300KB, may need splitting | `dist/docs_prepeared/react/` | Log report + optional action | +| Compress | LLM compression with React-specific prompt | injected docs | `dist/docs_final/react/` | + +## Step 0: Add Git Submodule + +Add `igniteui-react-examples` under `react/`: + +```bash +git submodule add https://github.com/IgniteUI/igniteui-react-examples.git react/igniteui-react-examples +``` + +Update `.gitmodules` accordingly. The sample files live at `react/igniteui-react-examples/samples/{path}/src/`. + +## Step 1: `scripts/export-react-docs.ts` + +**Purpose:** Run the xplat gulp build for React, then flatten and enrich the output. + +**Flow:** +1. Run `npm run buildReact` inside `common/igniteui-xplat-docs/` (via `child_process.execSync`) + - This produces fully processed `.md` files at `common/igniteui-xplat-docs/dist/React/en/components/` + - Variables resolved, conditionals stripped, code fences filtered, API links resolved, grid templates expanded + - Sample references converted to `<code-view>` tags with `iframe-src` and `github-src` attributes +2. Parse `common/igniteui-xplat-docs/docfx/en/components/toc.json` + - Filter entries: include only those where `"React"` is NOT in the `exclude` array + - Extract `name` (display name) and `premium` metadata per entry + - Build a map of `href → { name, premium }` +3. Read built files from `common/igniteui-xplat-docs/dist/React/en/components/` + - Match each file against the toc map + - Flatten hierarchical paths to single-level names (e.g., `charts/types/area-chart.md` → `area-chart.md`, `grids/grid/editing.md` → `grid-editing.md`) + - Handle naming collisions if any (prefix with parent directory) +4. For each file: + - Inject `_tocName` and `_premium` into frontmatter (reuse `injectTocMetadata()` logic from Angular export) + - Write to `dist/docs_processing/react/` + +**Key differences from Angular export:** +- No template expansion needed (gulp build already does it) +- No `@@include`/`@@if` processing needed (gulp build already does it) +- No environment variable replacement needed (gulp build already does it) +- toc.json parsing instead of toc.yml (different format, `exclude` arrays instead of flat list) +- Flattening hierarchical output to flat filenames + +**Files to create:** `scripts/export-react-docs.ts` + +## Step 2: `scripts/inject-react-docs.ts` + +**Purpose:** Replace `<code-view>` tags with actual React sample source code from `react/igniteui-react-examples`. + +The xplat gulp build converts backtick samples into `<code-view>` tags: +```html +<code-view style="height: 600px" alt="React Pie Chart Overview" + data-demos-base-url="{environment:demosBaseUrl}" + iframe-src="{environment:demosBaseUrl}/charts/pie-chart/overview" + github-src="charts/pie-chart/overview"> +</code-view> +``` + +**Flow:** +1. Read files from `dist/docs_processing/react/` +2. For each `<code-view>` tag, extract `github-src` attribute (e.g., `charts/pie-chart/overview`) +3. Map to source directory: `react/igniteui-react-examples/samples/{github-src}/src/` +4. Read sample files from that directory: + - `index.tsx` — main entry point (from `docConfig.json` `samplesGithubFile: "src/index.tsx"`) + - Any `.tsx` files (component implementations) + - Any `.css`/`.scss` files (styles) +5. Inline the source code as markdown code blocks (```tsx, ```css) +6. Replace the `<code-view>` tag with the inlined code +7. If source files not found, strip the `<code-view>` tag and log a warning +8. Write to `dist/docs_prepeared/react/` + +**Key differences from Angular inject:** +- No route parsing needed (Angular uses `app.routes.ts` to map URLs to components) +- Uses `github-src` attribute directly to locate files (simpler than Angular's two strategies) +- Reads `.tsx` files instead of `.component.ts` + `.component.html` + `.component.scss` +- Single resolution strategy (file-based via `github-src`) instead of Angular's two (route-based + file-based) + +**Files to create:** `scripts/inject-react-docs.ts` + +## Step 2.5: Post-Inject Size Validation + +**Purpose:** After injection, some files may become very large (>300KB) because sample code is inlined. Files this large are problematic for LLM compression — they may exceed context windows, produce poor results, or cost significantly more per file. + +**Implementation (built into `inject-react-docs.ts` as a post-processing report):** + +After all files are written to `dist/docs_prepeared/react/`, scan all output files and: +1. Report total file count and aggregate size +2. Flag any files exceeding 300KB with their sizes +3. For flagged files, report how many `<code-view>` tags were injected (sample injection is the main cause of bloat) + +**If files exceed 300KB, we have several options to evaluate:** +- **Limit samples per file**: Only inject the first N samples, strip the rest (keeps structure but reduces code bulk) +- **Truncate sample code**: For each injected sample, only keep the main component file (`index.tsx`), skip supplementary files +- **Split large files**: Break into logical sub-documents (e.g., `grid-editing.md` split by section headers) — requires changes to the flatten step and toc mapping +- **Raise compress `--min-size`**: Skip these files from compression (they'd remain uncompressed, which is suboptimal) + +The right approach depends on how many files exceed the threshold and by how much. The size report from the inject step will inform which strategy to use before proceeding to compression. + +## Step 3: `scripts/compress-react-docs.ts` + +**Purpose:** LLM-compress React docs with a React-specific system prompt. + +**Approach:** Copy `compress-angular-docs.ts` and modify the system prompt: +- Change `Igx` prefix → `Igr` prefix +- Change examples: `IgxGridComponent` → `IgrGrid`, `IgxButtonDirective` → `IgrButton` +- Remove Angular suffixes (`Component`, `Directive`) — React components don't use them +- Update product name: "Ignite UI for Angular" → "Ignite UI for React" +- Update code language references: Angular uses `ts`/`html`/`scss` separately; React uses `tsx` +- Keep all generic rules (anti-hallucination, no-merge, data truncation, premium carry-through) + +All CLI flags carry over unchanged: `--model`, `--api-base`, `--min-size`, `--dry-run`, `--delay`, `--resume-from`, `--only`. + +**Files to create:** `scripts/compress-react-docs.ts` + +## Step 4: npm Scripts in `package.json` + +```json +{ + "build:xplat-react": "cd common/igniteui-xplat-docs && npm run buildReact", + "export:react": "npx tsx scripts/export-react-docs.ts", + "inject:react": "npx tsx scripts/inject-react-docs.ts", + "compress:react": "npx tsx --env-file=.env scripts/compress-react-docs.ts", + "validate:react": "npx tsx --env-file=.env scripts/validate-docs.ts --input ./dist/docs_final/react", + "pipeline:react": "npm run clear:react && npm run build:xplat-react && npm run export:react && npm run inject:react && npm run compress:react" +} +``` + +Note: `build:xplat-react` runs the gulp build as a prerequisite. The `pipeline:react` command chains everything. + +## Step 5: Update `progress.md` + +Add a new entry under "Implemented" for the React pipeline. + +## toc.json Parsing Details + +The toc.json structure uses `exclude` arrays. An entry is included for React if: +- It has no `exclude` field, OR +- `"React"` is NOT in the `exclude` array + +Entries can be nested (`items` array). For entries with `items`, both the parent and children need filtering. An entry with `header: true` is a section header (no content file). + +The `href` field maps to a file path relative to `doc/en/components/`. Grid shared topics have special handling — the gulp build expands `_shared/` entries into per-grid-type files. + +## Filename Flattening Strategy + +The gulp build output preserves the directory hierarchy: +``` +dist/React/en/components/ +├── bullet-graph.md → bullet-graph.md +├── charts/ +│ ├── chart-overview.md → chart-overview.md +│ └── types/ +│ └── area-chart.md → area-chart.md +├── grids/ +│ ├── grid/ +│ │ └── editing.md → grid-editing.md +│ └── tree-grid/ +│ └── editing.md → tree-grid-editing.md +``` + +Rules: +- Top-level files: keep filename as-is +- Files in component-specific subdirectories (e.g., `grids/grid/`): prefix with directory name +- Files in category subdirectories (e.g., `charts/types/`): use just the filename (it's already descriptive) +- Handle collisions by adding parent directory prefix + +## Verification + +1. **Export step**: Run `npm run build:xplat-react && npm run export:react`, verify files appear in `dist/docs_processing/react/` with correct frontmatter (`_tocName`, `_premium`) +2. **Inject step**: Run `npm run inject:react`, verify `<code-view>` tags are replaced with inline TSX/CSS code blocks in `dist/docs_prepeared/react/`. Check the size report for files >300KB. +3. **Compress step**: Run `npm run compress:react -- --only <file>.md` on a single file, verify output has correct `Igr` prefix in frontmatter and React-appropriate content +4. **Full pipeline**: Run `npm run pipeline:react` end-to-end +5. **Validation**: Run `npm run validate:react` to score compressed output quality +6. **MCP server**: Temporarily point `src/index.ts` at `dist/docs_final/react/` instead of `react_compressed/` and verify `list_components`, `get_doc`, `search_docs` work correctly + +## Critical Files + +| File | Action | +|------|--------| +| `scripts/export-react-docs.ts` | Create | +| `scripts/inject-react-docs.ts` | Create | +| `scripts/compress-react-docs.ts` | Create | +| `package.json` | Add npm scripts | +| `.gitmodules` | Add react/igniteui-react-examples submodule | +| `docs/progress.md` | Update with React pipeline status | +| `CLAUDE.md` | Update project structure and pipeline docs | + +## Reusable Code from Angular Pipeline + +- `injectTocMetadata()` from `export-angular-docs.ts` — same logic, different toc format +- `validateStructure()` and `stripResponseWrapper()` from `compress-angular-docs.ts` — identical +- `compressWithLLM()` from `compress-angular-docs.ts` — identical except system prompt +- CLI argument parsing pattern from `compress-angular-docs.ts` — identical +- `<code-view>` regex from `inject-angular-docs.ts` — same tag format in gulp build output +- `readExampleFiles()` pattern from `inject-angular-docs.ts` — adapted for TSX files diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/react/igniteui-react.json b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react/igniteui-react.json new file mode 100644 index 000000000..6d3ce865a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react/igniteui-react.json @@ -0,0 +1,233806 @@ +{ + "id": 0, + "name": "Ignite UI for React", + "variant": "project", + "kind": 1, + "flags": {}, + "children": [ + { + "id": 1, + "name": "igniteui-react", + "variant": "declaration", + "kind": 2, + "flags": {}, + "children": [ + { + "id": 54399, + "name": "DatePart", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54406, + "name": "AmPm", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 23, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "amPm" + } + }, + { + "id": 54402, + "name": "Date", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 19, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "date" + } + }, + { + "id": 54403, + "name": "Hours", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 20, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "hours" + } + }, + { + "id": 54404, + "name": "Minutes", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 21, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "minutes" + } + }, + { + "id": 54400, + "name": "Month", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 17, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "month" + } + }, + { + "id": 54405, + "name": "Seconds", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 22, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "seconds" + } + }, + { + "id": 54401, + "name": "Year", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 18, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": "year" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54406, + 54402, + 54403, + 54404, + 54400, + 54405, + 54401 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 16, + "character": 20 + } + ] + }, + { + "id": 54392, + "name": "DateRangeType", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54393, + "name": "After", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 2, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": 0 + } + }, + { + "id": 54394, + "name": "Before", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 3, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": 1 + } + }, + { + "id": 54395, + "name": "Between", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 4, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": 2 + } + }, + { + "id": 54396, + "name": "Specific", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": 3 + } + }, + { + "id": 54397, + "name": "Weekdays", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": 4 + } + }, + { + "id": 54398, + "name": "Weekends", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 7, + "character": 4 + } + ], + "type": { + "type": "literal", + "value": 5 + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54393, + 54394, + 54395, + 54396, + 54397, + 54398 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 1, + "character": 20 + } + ] + }, + { + "id": 54547, + "name": "IgrDockingIndicatorPosition", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54557, + "name": "bottom", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 49, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "bottom" + } + }, + { + "id": 54558, + "name": "bottomMost", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 50, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "bottomMost" + } + }, + { + "id": 54560, + "name": "center", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 52, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "center" + } + }, + { + "id": 54548, + "name": "left", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 40, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "left" + } + }, + { + "id": 54549, + "name": "leftMost", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 41, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "leftMost" + } + }, + { + "id": 54559, + "name": "outerBottom", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 51, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "outerBottom" + } + }, + { + "id": 54550, + "name": "outerLeft", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 42, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "outerLeft" + } + }, + { + "id": 54553, + "name": "outerRight", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 45, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "outerRight" + } + }, + { + "id": 54556, + "name": "outerTop", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 48, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "outerTop" + } + }, + { + "id": 54551, + "name": "right", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 43, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "right" + } + }, + { + "id": 54552, + "name": "rightMost", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 44, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "rightMost" + } + }, + { + "id": 54561, + "name": "splitterHorizontal", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 53, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "splitterHorizontal" + } + }, + { + "id": 54562, + "name": "splitterVertical", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 54, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "splitterVertical" + } + }, + { + "id": 54554, + "name": "top", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 46, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "top" + } + }, + { + "id": 54555, + "name": "topMost", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 47, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "topMost" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54557, + 54558, + 54560, + 54548, + 54549, + 54559, + 54550, + 54553, + 54556, + 54551, + 54552, + 54561, + 54562, + 54554, + 54555 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 39, + "character": 20 + } + ] + }, + { + "id": 54525, + "name": "IgrDockManagerPaneType", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54527, + "name": "contentPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 4, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "contentPane" + } + }, + { + "id": 54529, + "name": "documentHost", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 6, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "documentHost" + } + }, + { + "id": 54526, + "name": "splitPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 3, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "splitPane" + } + }, + { + "id": 54528, + "name": "tabGroupPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 5, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "tabGroupPane" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54527, + 54529, + 54526, + 54528 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 2, + "character": 20 + } + ] + }, + { + "id": 54538, + "name": "IgrPaneActionBehavior", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enumeration used to determine which panes within a dockable TabGroupPane are affected by a particular pane action such as closing or unpinning a pane." + } + ] + }, + "children": [ + { + "id": 54539, + "name": "allPanes", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 22, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "allPanes" + } + }, + { + "id": 54540, + "name": "selectedPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 23, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "selectedPane" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54539, + 54540 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 21, + "character": 20 + } + ] + }, + { + "id": 54587, + "name": "IgrPaneDragActionType", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54590, + "name": "dockPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 141, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "dockPane" + } + }, + { + "id": 54588, + "name": "floatPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 139, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "floatPane" + } + }, + { + "id": 54589, + "name": "moveFloatingPane", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 140, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "moveFloatingPane" + } + }, + { + "id": 54591, + "name": "moveTab", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 142, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "moveTab" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54590, + 54588, + 54589, + 54591 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 138, + "character": 20 + } + ] + }, + { + "id": 56615, + "name": "IgrResizerLocation", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 56617, + "name": "bottom", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 633, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "bottom" + } + }, + { + "id": 56622, + "name": "bottomLeft", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 638, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "bottomLeft" + } + }, + { + "id": 56623, + "name": "bottomRight", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 639, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "bottomRight" + } + }, + { + "id": 56618, + "name": "left", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 634, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "left" + } + }, + { + "id": 56619, + "name": "right", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 635, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "right" + } + }, + { + "id": 56616, + "name": "top", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 632, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "top" + } + }, + { + "id": 56620, + "name": "topLeft", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 636, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "topLeft" + } + }, + { + "id": 56621, + "name": "topRight", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 637, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "topRight" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 56617, + 56622, + 56623, + 56618, + 56619, + 56616, + 56620, + 56621 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 631, + "character": 20 + } + ] + }, + { + "id": 54530, + "name": "IgrSplitPaneOrientation", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54531, + "name": "horizontal", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 9, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "horizontal" + } + }, + { + "id": 54532, + "name": "vertical", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 10, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "vertical" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54531, + 54532 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 8, + "character": 20 + } + ] + }, + { + "id": 54533, + "name": "IgrUnpinnedLocation", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54535, + "name": "bottom", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 14, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "bottom" + } + }, + { + "id": 54536, + "name": "left", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 15, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "left" + } + }, + { + "id": 54537, + "name": "right", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 16, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "right" + } + }, + { + "id": 54534, + "name": "top", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 13, + "character": 2 + } + ], + "type": { + "type": "literal", + "value": "top" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 54535, + 54536, + 54537, + 54534 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 12, + "character": 20 + } + ] + }, + { + "id": 52536, + "name": "IgrAccordion", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The Accordion is a container-based component that can house multiple expansion panels\nand offers keyboard navigation." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the expansion panels inside default slot." + } + ] + } + ] + }, + "children": [ + { + "id": 52570, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52571, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52572, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52573, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52566, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52567, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52568, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52569, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52562, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52563, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52564, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52565, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52558, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52559, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52560, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52561, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52549, + "name": "panels", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns all of the accordions's direct igc-expansion-panel children." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 52548, + "name": "singleExpand", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allows only one panel to be expanded at a time." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52550, + "name": "hideAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides all of the child expansion panels' contents." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52551, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "line": 35, + "character": 4 + } + ], + "signatures": [ + { + "id": 52552, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides all of the child expansion panels' contents." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "line": 35, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52553, + "name": "hideAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides all of the child expansion panels' contents." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52554, + "name": "showAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows all of the child expansion panels' contents." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52555, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "line": 37, + "character": 4 + } + ], + "signatures": [ + { + "id": 52556, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows all of the child expansion panels' contents." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "line": 37, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52557, + "name": "showAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows all of the child expansion panels' contents." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52549, + 52548 + ] + }, + { + "title": "Methods", + "children": [ + 52550, + 52554 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52570, + 52566, + 52562, + 52558 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52570, + 52566, + 52562, + 52558 + ] + }, + { + "title": "Methods", + "children": [ + 52550, + 52554 + ] + }, + { + "title": "Properties", + "children": [ + 52549, + 52548 + ] + } + ], + "sources": [ + { + "fileName": "src/components/accordion.ts", + "line": 12, + "character": 13 + }, + { + "fileName": "src/components/accordion.ts", + "line": 33, + "character": 12 + } + ], + "signatures": [ + { + "id": 52540, + "name": "IgrAccordion", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52475, + "name": "IgrAvatar", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An avatar component is used as a representation of a user identity\ntypically in a user profile." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders an icon inside the default slot." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the avatar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "initials - The initials wrapper of the avatar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "image - The image wrapper of the avatar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "icon - The icon wrapper of the avatar." + } + ] + } + ] + }, + "children": [ + { + "id": 52484, + "name": "alt", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Alternative text for the image." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52485, + "name": "initials", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Initials to use as a fallback when no image is available." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52486, + "name": "shape", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The shape of the avatar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54449, + "name": "AvatarShape", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52483, + "name": "src", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The image source to use." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52484, + 52485, + 52486, + 52483 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52484, + 52485, + 52486, + 52483 + ] + } + ], + "sources": [ + { + "fileName": "src/components/avatar.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/components/avatar.ts", + "line": 22, + "character": 12 + } + ], + "signatures": [ + { + "id": 52479, + "name": "IgrAvatar", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52575, + "name": "IgrBadge", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The badge is a component indicating a status on a related item or an area\nwhere some active indication is required." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot for the badge." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the badge." + } + ] + } + ] + }, + "children": [ + { + "id": 52584, + "name": "outlined", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether to draw an outlined version of the badge." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52585, + "name": "shape", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The shape of the badge." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54450, + "name": "BadgeShape", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52583, + "name": "variant", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The type of badge." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54446, + "name": "StyleVariant", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52584, + 52585, + 52583 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52584, + 52585, + 52583 + ] + } + ], + "sources": [ + { + "fileName": "src/components/badge.ts", + "line": 12, + "character": 13 + }, + { + "fileName": "src/components/badge.ts", + "line": 19, + "character": 12 + } + ], + "signatures": [ + { + "id": 52579, + "name": "IgrBadge", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52587, + "name": "IgrBanner", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The " + }, + { + "kind": "code", + "text": "`igc-banner`" + }, + { + "kind": "text", + "text": " component displays important and concise message(s) for a user to address, that is specific to a page or feature." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the text content of the banner message." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders additional content at the start of the message block." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "actions - Renders any action elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the banner component." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "spacer - The inner wrapper that sets the space around the banner." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message - The part that holds the text and the illustration." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "illustration - The part that holds the banner icon/illustration." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The part that holds the banner text content." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "actions - The part that holds the banner action buttons." + } + ] + } + ] + }, + "children": [ + { + "id": 52614, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the banner is closed" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52615, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52616, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52617, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52610, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted before closing the banner" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52611, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52612, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52613, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52597, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the banner is being shown/hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52602, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the banner if not already hidden. Returns `true` when the animation has completed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52603, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "line": 42, + "character": 4 + } + ], + "signatures": [ + { + "id": 52604, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the banner if not already hidden. Returns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when the animation has completed." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "line": 42, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52605, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the banner if not already hidden. Returns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when the animation has completed." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52598, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the banner if not already shown. Returns `true` when the animation has completed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52599, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "line": 40, + "character": 4 + } + ], + "signatures": [ + { + "id": 52600, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the banner if not already shown. Returns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when the animation has completed." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "line": 40, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52601, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the banner if not already shown. Returns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when the animation has completed." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52606, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles between shown/hidden state. Returns `true` when the animation has completed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52607, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "line": 44, + "character": 4 + } + ], + "signatures": [ + { + "id": 52608, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles between shown/hidden state. Returns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when the animation has completed." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "line": 44, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52609, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles between shown/hidden state. Returns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when the animation has completed." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52597 + ] + }, + { + "title": "Methods", + "children": [ + 52602, + 52598, + 52606 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52614, + 52610 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52614, + 52610 + ] + }, + { + "title": "Methods", + "children": [ + 52602, + 52598, + 52606 + ] + }, + { + "title": "Properties", + "children": [ + 52597 + ] + } + ], + "sources": [ + { + "fileName": "src/components/banner.ts", + "line": 21, + "character": 13 + }, + { + "fileName": "src/components/banner.ts", + "line": 34, + "character": 12 + } + ], + "signatures": [ + { + "id": 52591, + "name": "IgrBanner", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52140, + "name": "IgrButton", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a clickable button, used to submit forms or anywhere in a\ndocument for accessible, standard button functionality." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the label of the button." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the label of the button." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the label of the button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The native button element of the igc-button component." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix container of the igc-button component." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix container of the igc-button component." + } + ] + } + ] + }, + "children": [ + { + "id": 52148, + "name": "variant", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the variant of the button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54452, + "name": "ButtonVariant", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52148 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52148 + ] + } + ], + "sources": [ + { + "fileName": "src/components/button.ts", + "line": 16, + "character": 13 + }, + { + "fileName": "src/components/button.ts", + "line": 23, + "character": 12 + } + ], + "signatures": [ + { + "id": 52144, + "name": "IgrButton", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52645, + "name": "IgrButtonGroup", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The " + }, + { + "kind": "code", + "text": "`igc-button-group`" + }, + { + "kind": "text", + "text": " groups a series of " + }, + { + "kind": "code", + "text": "`igc-toggle-button`" + }, + { + "kind": "text", + "text": "s together, exposing features such as layout and selection." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders " + }, + { + "kind": "code", + "text": "`igc-toggle-button`" + }, + { + "kind": "text", + "text": " component." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "group - The button group container." + } + ] + } + ] + }, + "children": [ + { + "id": 52663, + "name": "onDeselect", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a button is deselected through user interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52664, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52665, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52666, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52659, + "name": "onSelect", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a button is selected through user interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52660, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52661, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52662, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52656, + "name": "alignment", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the orientation of the buttons in the group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52655, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disables all buttons inside the group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52658, + "name": "selectedItems", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the currently selected buttons (their values)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 52657, + "name": "selection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the mode of selection for the button group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54451, + "name": "ButtonGroupSelection", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52656, + 52655, + 52658, + 52657 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52663, + 52659 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52663, + 52659 + ] + }, + { + "title": "Properties", + "children": [ + 52656, + 52655, + 52658, + 52657 + ] + } + ], + "sources": [ + { + "fileName": "src/components/button-group.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/components/button-group.ts", + "line": 29, + "character": 12 + } + ], + "signatures": [ + { + "id": 52649, + "name": "IgrButtonGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52170, + "name": "IgrCalendar", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a calendar that lets users\nto select a date value in a variety of different ways." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The default slot for the calendar." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders the title of the calendar header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "header-date - Renders content instead of the current date/range in the calendar header." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The header element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-title - The header title element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-date - The header date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The content element which contains the views and navigation elements of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content-vertical - The content element which contains the views and navigation elements of the calendar in vertical orientation." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation - The navigation container element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "months-navigation - The months navigation button element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-navigation - The years navigation button element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-range - The years range element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation-buttons - The navigation buttons container of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation-button - Previous/next navigation button of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-view-container - The days view container element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-view - Days view element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "months-view - The months view element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-view - The years view element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-row - Days row element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - Week header label element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "week-number - Week number element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "week-number-inner - Week number inner element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "date - Date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "date-inner - Date inner element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "first - The first selected date element of the calendar in range selection." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "last - The last selected date element of the calendar in range selection." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "inactive - Inactive date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "hidden - Hidden date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "weekend - Weekend date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "range - Range selected element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "special - Special date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "disabled - Disabled date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "single - Single selected date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "preview - Range selection preview date element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "month - Month element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "month-inner - Month inner element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "year - Year element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "year-inner - Year inner element of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "selected - Indicates selected state. Applies to date, month and year elements of the calendar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "current - Indicates current state. Applies to date, month and year elements of the calendar." + } + ] + } + ] + }, + "children": [ + { + "id": 52187, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when calendar changes its value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52188, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52189, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52190, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "union", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + } + ] + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52184, + "name": "activeView", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current active view of the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54385, + "name": "CalendarActiveView", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52185, + "name": "formatOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The options used to format the months and the weekdays in the calendar views." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Pick" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Intl.DateTimeFormatOptions" + }, + "name": "DateTimeFormatOptions", + "package": "typescript", + "qualifiedName": "Intl.DateTimeFormatOptions" + }, + { + "type": "union", + "types": [ + { + "type": "literal", + "value": "month" + }, + { + "type": "literal", + "value": "weekday" + } + ] + } + ], + "name": "Pick", + "package": "typescript" + } + }, + { + "id": 52181, + "name": "headerOrientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the calendar header." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54386, + "name": "CalendarHeaderOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52180, + "name": "hideHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to render the calendar header part.\nWhen the calendar selection is set to " + }, + { + "kind": "code", + "text": "`multiple`" + }, + { + "kind": "text", + "text": " the header is always hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52179, + "name": "hideOutsideDays", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to show the dates that do not belong to the current active month." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52182, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the calendar months when more than one month\nis being shown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52186, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The resource strings for localization." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54286, + "name": "IgcCalendarResourceStrings", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52183, + "name": "visibleMonths", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The number of months displayed in the days view." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52184, + 52185, + 52181, + 52180, + 52179, + 52182, + 52186, + 52183 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52187 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52187 + ] + }, + { + "title": "Properties", + "children": [ + 52184, + 52185, + 52181, + 52180, + 52179, + 52182, + 52186, + 52183 + ] + } + ], + "sources": [ + { + "fileName": "src/components/calendar.ts", + "line": 52, + "character": 13 + }, + { + "fileName": "src/components/calendar.ts", + "line": 64, + "character": 12 + } + ], + "signatures": [ + { + "id": 52174, + "name": "IgrCalendar", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52705, + "name": "IgrCard", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A container which wraps different elements related to a single subject" + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders card content" + } + ] + } + ] + }, + "children": [ + { + "id": 52713, + "name": "elevated", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets card elevated style, otherwise card looks outlined." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52713 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52713 + ] + } + ], + "sources": [ + { + "fileName": "src/components/card.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/card.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52709, + "name": "IgrCard", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52668, + "name": "IgrCardActions", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A container for card action items like buttons" + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "start - Renders items at the beginning of actions area" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders items at the middle of actions area" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "end - Renders items at the end of actions area" + } + ] + } + ] + }, + "children": [ + { + "id": 52676, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the actions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52676 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52676 + ] + } + ], + "sources": [ + { + "fileName": "src/components/card-actions.ts", + "line": 12, + "character": 13 + }, + { + "fileName": "src/components/card-actions.ts", + "line": 19, + "character": 12 + } + ], + "signatures": [ + { + "id": 52672, + "name": "IgrCardActions", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52678, + "name": "IgrCardContent", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A container for card's text content" + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the card text content" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/card-content.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/card-content.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52682, + "name": "IgrCardContent", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52687, + "name": "IgrCardHeader", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A container for card's header" + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "thumbnail - Renders header media like icon" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders the card title" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "subtitle - Renders the card subtitle" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders content next to the card title" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The card header container" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/card-header.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/components/card-header.ts", + "line": 21, + "character": 12 + } + ], + "signatures": [ + { + "id": 52691, + "name": "IgrCardHeader", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52696, + "name": "IgrCardMedia", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A container for card's media - could be an image, gif, video" + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the card media content" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/card-media.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/card-media.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52700, + "name": "IgrCardMedia", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53169, + "name": "IgrCarousel", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The " + }, + { + "kind": "code", + "text": "`igc-carousel`" + }, + { + "kind": "text", + "text": " presents a set of " + }, + { + "kind": "code", + "text": "`igc-carousel-slide`" + }, + { + "kind": "text", + "text": "s by sequentially displaying a subset of one or more slides." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "Default - slot for the carousel. Any projected " + }, + { + "kind": "code", + "text": "`igc-carousel-slide`" + }, + { + "kind": "text", + "text": " components should be projected here." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "previous-button - Renders content inside the previous button." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "next-button - Renders content inside the next button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation - The wrapper container of each carousel navigation button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "previous - The wrapper container of the carousel previous navigation button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "next - The wrapper container of the carousel next navigation button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "dot - The carousel dot indicator container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "active - The carousel active dot indicator container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The label container of the carousel indicators." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "start - The wrapping container of all carousel indicators when indicators-orientation is set to start." + } + ] + } + ] + }, + "children": [ + { + "id": 53234, + "name": "onPaused", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the carousel enters paused state by a user interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53235, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53236, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53237, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53230, + "name": "onPlaying", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the carousel enters playing state by a user interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53231, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53232, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53233, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53226, + "name": "onSlideChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the current active slide is changed either by user interaction or by the interval callback." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53227, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53228, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53229, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53190, + "name": "animationType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The animation type." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54441, + "name": "HorizontalTransitionAnimation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53180, + "name": "disableLoop", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel should skip rotating to the first slide after it reaches the last." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53181, + "name": "disablePauseOnInteraction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel should ignore use interactions and not pause on them." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53183, + "name": "hideIndicators", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel should render the indicator controls (dots)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53182, + "name": "hideNavigation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel should skip rendering of the default navigation buttons." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53186, + "name": "indicatorsLabelFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The format used to set the aria-label on the carousel indicators.\nInstances of '{0}' will be replaced with the index of the corresponding slide." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53185, + "name": "indicatorsOrientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the orientation of the indicator controls (dots)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54453, + "name": "CarouselIndicatorsOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53188, + "name": "interval", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The duration in milliseconds between changing the active slide." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53189, + "name": "maximumIndicatorsCount", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the maximum indicator controls (dots) that can be shown. Default value is " + }, + { + "kind": "code", + "text": "`10`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53187, + "name": "slidesLabelFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The format used to set the aria-label on the carousel slides and the text displayed\nwhen the number of indicators is greater than tha maximum indicator count.\nInstances of '{0}' will be replaced with the index of the corresponding slide.\nInstances of '{1}' will be replaced with the total amount of slides." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53184, + "name": "vertical", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel has vertical alignment." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53193, + "name": "current", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the current active slide." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53195, + "name": "isPaused", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel in in paused state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53194, + "name": "isPlaying", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the carousel is in playing state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53191, + "name": "slides", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The slides of the carousel." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53146, + "name": "IgcCarouselSlideComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 53192, + "name": "total", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The total number of slides." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53204, + "name": "next", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the next slide, runs any animations, and returns if the operation was successful." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53205, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 173, + "character": 4 + } + ], + "signatures": [ + { + "id": 53206, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the next slide, runs any animations, and returns if the operation was successful." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 173, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53207, + "name": "next", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the next slide, runs any animations, and returns if the operation was successful." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53200, + "name": "pause", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pauses the carousel rotation of slides." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53201, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 169, + "character": 4 + } + ], + "signatures": [ + { + "id": 53202, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pauses the carousel rotation of slides." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 169, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53203, + "name": "pause", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pauses the carousel rotation of slides." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53196, + "name": "play", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resumes playing of the carousel slides." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53197, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 165, + "character": 4 + } + ], + "signatures": [ + { + "id": 53198, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resumes playing of the carousel slides." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 165, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53199, + "name": "play", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resumes playing of the carousel slides." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53208, + "name": "prev", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the previous slide, runs any animations, and returns if the operation was successful." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53209, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 177, + "character": 4 + } + ], + "signatures": [ + { + "id": 53210, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the previous slide, runs any animations, and returns if the operation was successful." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 177, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53211, + "name": "prev", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the previous slide, runs any animations, and returns if the operation was successful." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53212, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the passed-in slide, runs any animations, and returns if the operation was successful." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53213, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 181, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 185, + "character": 4 + } + ], + "signatures": [ + { + "id": 53214, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the passed-in slide, runs any animations, and returns if the operation was successful." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 181, + "character": 4 + } + ], + "parameters": [ + { + "id": 53215, + "name": "slide", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 53146, + "name": "IgcCarouselSlideComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53216, + "name": "animationDirection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "next" + }, + { + "type": "literal", + "value": "prev" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + }, + { + "id": 53217, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to slide by index, runs any animations, and returns if the operation was successful." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "line": 185, + "character": 4 + } + ], + "parameters": [ + { + "id": 53218, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53219, + "name": "animationDirection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "next" + }, + { + "type": "literal", + "value": "prev" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53220, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to the passed-in slide, runs any animations, and returns if the operation was successful." + } + ] + }, + "parameters": [ + { + "id": 53221, + "name": "slide", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 53146, + "name": "IgcCarouselSlideComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53222, + "name": "animationDirection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "next" + }, + { + "type": "literal", + "value": "prev" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + }, + { + "id": 53223, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Switches to slide by index, runs any animations, and returns if the operation was successful." + } + ] + }, + "parameters": [ + { + "id": 53224, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53225, + "name": "animationDirection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "next" + }, + { + "type": "literal", + "value": "prev" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53190, + 53180, + 53181, + 53183, + 53182, + 53186, + 53185, + 53188, + 53189, + 53187, + 53184 + ] + }, + { + "title": "Accessors", + "children": [ + 53193, + 53195, + 53194, + 53191, + 53192 + ] + }, + { + "title": "Methods", + "children": [ + 53204, + 53200, + 53196, + 53208, + 53212 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53234, + 53230, + 53226 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 53193, + 53195, + 53194, + 53191, + 53192 + ] + }, + { + "title": "Events", + "children": [ + 53234, + 53230, + 53226 + ] + }, + { + "title": "Methods", + "children": [ + 53204, + 53200, + 53196, + 53208, + 53212 + ] + }, + { + "title": "Properties", + "children": [ + 53190, + 53180, + 53181, + 53183, + 53182, + 53186, + 53185, + 53188, + 53189, + 53187, + 53184 + ] + } + ], + "sources": [ + { + "fileName": "src/components/carousel.ts", + "line": 23, + "character": 13 + }, + { + "fileName": "src/components/carousel.ts", + "line": 41, + "character": 12 + } + ], + "signatures": [ + { + "id": 53173, + "name": "IgrCarousel", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53131, + "name": "IgrCarouselIndicator", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Used when a custom indicator needs to be passed to the " + }, + { + "kind": "code", + "text": "`igc-carousel`" + }, + { + "kind": "text", + "text": " component." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot for projected inactive indicator." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "active - Default slot for projected active indicator." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indicator - The wrapping container of the carousel dot indicator." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "inactive - The wrapping container of the inactive dot indicator." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "active - The wrapping container of the active dot indicator." + } + ] + } + ] + }, + "children": [ + { + "id": 53139, + "name": "active", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53140, + "name": "index", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53139, + 53140 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53139, + 53140 + ] + } + ], + "sources": [ + { + "fileName": "src/components/carousel-indicator.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/components/carousel-indicator.ts", + "line": 21, + "character": 12 + } + ], + "signatures": [ + { + "id": 53135, + "name": "IgrCarouselIndicator", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53146, + "name": "IgrCarouselSlide", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A single content container within a set of containers used in the context of an " + }, + { + "kind": "code", + "text": "`igc-carousel`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "Default - slot for the carousel slide." + } + ] + } + ] + }, + "children": [ + { + "id": 53154, + "name": "active", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current active slide for the carousel component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53155, + "name": "previous", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53154, + 53155 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53154, + 53155 + ] + } + ], + "sources": [ + { + "fileName": "src/components/carousel-slide.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/carousel-slide.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 53150, + "name": "IgrCarouselSlide", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52892, + "name": "IgrChat", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A chat UI component for displaying messages, attachments, and input interaction." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Slot for injecting content (e.g., avatar or icon) before the chat title." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Slot for overriding the chat title content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "actions - Slot for injecting header actions (e.g., buttons, menus)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suggestions-header - Slot for rendering a custom header for the suggestions list." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suggestions - Slot for rendering a custom list of quick reply suggestions." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suggestions-actions - Slot for rendering additional actions." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suggestion - Slot for rendering a single suggestion item." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "empty-state - Slot shown when there are no messages." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "chat-container - Styles the main chat container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - Styles the chat header container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - Styles the element before the chat title (e.g., avatar)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "title - Styles the chat header title." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-area-container - Styles the container holding the messages and (optional) suggestions." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-list - Styles the message list container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-item - Styles each message wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "typing-indicator - Styles the typing indicator container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "typing-dot - Styles individual typing indicator dots." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suggestions-container - Styles the container holding all suggestions." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suggestions-header - Styles the suggestions header." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suggestion - Styles each suggestion item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suggestion-prefix - Styles the icon or prefix in a suggestion." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suggestion-title - Styles the text/title of a suggestion." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "empty-state - Styles the empty state container when there are no messages." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-area-container - Styles the wrapper around the chat input area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-container - Styles the main input container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-attachments-container - Styles the container for attachments in the input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-attachment-container - Styles a single attachment in the input area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-attachment-name - Styles the file name of an attachment." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-attachment-icon - Styles the icon of an attachment." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "text-input - Styles the text input field for typing messages." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-actions-container - Styles the container for input actions." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-actions-start - Styles the group of actions at the start of the input after the default file upload." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input-actions-end - Styles the group of actions at the end of the input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "file-upload-container - Styles the container for the file upload input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "file-upload - Styles the file upload input itself." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "send-button-container - Styles the container around the send button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "send-button - Styles the send button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-container - Styles the container of a single message." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-list - (forwarded) - Styles the internal list of messages." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-header - Styles the header of a message (e.g., sender, timestamp)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-content - Styles the text content of a message." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-attachments-container - Styles the container for message attachments." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-attachment - Styles a single message attachment." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-actions-container - Styles the container holding message actions." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message-sent - Styles messages marked as sent by the current user." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "attachment-header - Styles the header of an attachment block." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "attachment-content - Styles the content of an attachment block." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "attachment-icon - Styles the icon of an attachment." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "file-name - Styles the file name shown in an attachment." + } + ] + } + ] + }, + "children": [ + { + "id": 52957, + "name": "onAttachmentAdded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when attachment(s) are added either through drag & drop or through the default file input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52958, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52959, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52960, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52953, + "name": "onAttachmentClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when a chat message attachment is clicked." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52954, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52955, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52956, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52965, + "name": "onAttachmentDrag", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched during an attachment drag operation." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52966, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52967, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52968, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52969, + "name": "onAttachmentDrop", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when an attachment is dropped (e.g., in a drag" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52970, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52971, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52972, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52961, + "name": "onAttachmentRemoved", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when an attachment is removed by the user." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52962, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52963, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52964, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52981, + "name": "onInputBlur", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when the chat input field loses focus." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52982, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52983, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52984, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52985, + "name": "onInputChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when the content of the chat input changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52986, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52987, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52988, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52977, + "name": "onInputFocus", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when the chat input field gains focus." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52978, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52979, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52980, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52945, + "name": "onMessageCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when a new chat message is created (sent)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52946, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52947, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52948, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54335, + "name": "IgcChatMessage", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52949, + "name": "onMessageReact", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when a message is reacted to." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52950, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52951, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52952, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54363, + "name": "IgcChatMessageReaction", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52973, + "name": "onTypingChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dispatched when the typing status changes (e.g., user starts or stops typing)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52974, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52975, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52976, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52933, + "name": "draftMessage", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The chat message currently being composed but not yet sent.\nIncludes the draft text and any attachments." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52934, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 52936, + "name": "attachments", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "line": 159, + "character": 8 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 52935, + "name": "text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "line": 158, + "character": 8 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52936, + 52935 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "line": 157, + "character": 24 + } + ] + } + } + }, + { + "id": 52932, + "name": "messages", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The list of chat messages currently displayed.\nUse this property to set or update the message history." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54335, + "name": "IgcChatMessage", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 52937, + "name": "options", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the chat behavior and appearance through a configuration object.\nUse this to toggle UI options, provide suggestions, templates, etc." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54349, + "name": "IgcChatOptions", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52938, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The resource strings of the chat." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54302, + "name": "IgcChatResourceStrings", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52939, + "name": "scrollToMessage", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Scrolls the view to a specific message by id." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52940, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "line": 177, + "character": 4 + } + ], + "signatures": [ + { + "id": 52941, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Scrolls the view to a specific message by id." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "line": 177, + "character": 4 + } + ], + "parameters": [ + { + "id": 52942, + "name": "messageId", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52943, + "name": "scrollToMessage", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Scrolls the view to a specific message by id." + } + ] + }, + "parameters": [ + { + "id": 52944, + "name": "messageId", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52933, + 52932, + 52937, + 52938 + ] + }, + { + "title": "Methods", + "children": [ + 52939 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52957, + 52953, + 52965, + 52969, + 52961, + 52981, + 52985, + 52977, + 52945, + 52949, + 52973 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52957, + 52953, + 52965, + 52969, + 52961, + 52981, + 52985, + 52977, + 52945, + 52949, + 52973 + ] + }, + { + "title": "Methods", + "children": [ + 52939 + ] + }, + { + "title": "Properties", + "children": [ + 52933, + 52932, + 52937, + 52938 + ] + } + ], + "sources": [ + { + "fileName": "src/components/chat.ts", + "line": 70, + "character": 13 + }, + { + "fileName": "src/components/chat.ts", + "line": 135, + "character": 12 + } + ], + "signatures": [ + { + "id": 52896, + "name": "IgrChat", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53239, + "name": "IgrCheckbox", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A check box allowing single values to be selected/deselected." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The checkbox label." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the checkbox." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "control - The checkbox input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The checkbox label." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indicator - The checkbox indicator icon." + } + ] + } + ] + }, + "children": [ + { + "id": 53249, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53250, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53251, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53252, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54314, + "name": "IgcCheckboxChangeEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53248, + "name": "indeterminate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Draws the checkbox in indeterminate state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53248 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53249 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53249 + ] + }, + { + "title": "Properties", + "children": [ + 53248 + ] + } + ], + "sources": [ + { + "fileName": "src/components/checkbox.ts", + "line": 20, + "character": 13 + }, + { + "fileName": "src/components/checkbox.ts", + "line": 32, + "character": 12 + } + ], + "signatures": [ + { + "id": 53243, + "name": "IgrCheckbox", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52339, + "name": "IgrChip", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Chips help people enter information, make selections, filter content, or trigger actions." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders content in the default slot of the chip." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content at the start of the chip, before the default content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content at the end of the chip after the default content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "select - Content to render when the chip in selected state." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "remove - Content to override the default remove chip icon." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the chip." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix container of the chip." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix container of the chip." + } + ] + } + ] + }, + "children": [ + { + "id": 52354, + "name": "onRemove", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emits an event when the chip component is removed. Returns the removed chip component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52355, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52356, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52357, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52358, + "name": "onSelect", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emits event when the chip component is selected/deselected and any related animations and transitions also end." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52359, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52360, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52361, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52349, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the disabled state for the chip." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52350, + "name": "removable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines if the chip is removable or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52351, + "name": "selectable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines if the chip is selectable or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52352, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines if the chip is selected or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52353, + "name": "variant", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A property that sets the color variant of the chip component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54446, + "name": "StyleVariant", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52349, + 52350, + 52351, + 52352, + 52353 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52354, + 52358 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52354, + 52358 + ] + }, + { + "title": "Properties", + "children": [ + 52349, + 52350, + 52351, + 52352, + 52353 + ] + } + ], + "sources": [ + { + "fileName": "src/components/chip.ts", + "line": 20, + "character": 13 + }, + { + "fileName": "src/components/chip.ts", + "line": 31, + "character": 12 + } + ], + "signatures": [ + { + "id": 52343, + "name": "IgrChip", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53254, + "name": "IgrCircularGradient", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Used for defining gradient stops in the igc-circular-progress.\nFor each " + }, + { + "kind": "code", + "text": "`igc-circular-gradient`" + }, + { + "kind": "text", + "text": " defined as " + }, + { + "kind": "code", + "text": "`gradient`" + }, + { + "kind": "text", + "text": " slot of " + }, + { + "kind": "code", + "text": "`igc-circular-progress`" + }, + { + "kind": "text", + "text": " element would be created a SVG stop element.\nThe values passed as " + }, + { + "kind": "code", + "text": "`color`" + }, + { + "kind": "text", + "text": ", " + }, + { + "kind": "code", + "text": "`offset`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`opacity`" + }, + { + "kind": "text", + "text": " would be set as\n" + }, + { + "kind": "code", + "text": "`stop-color`" + }, + { + "kind": "text", + "text": ", " + }, + { + "kind": "code", + "text": "`offset`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`stop-opacity`" + }, + { + "kind": "text", + "text": " of the SVG element without further validations." + } + ] + }, + "children": [ + { + "id": 53263, + "name": "color", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines the color of the gradient stop" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53262, + "name": "offset", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines where the gradient stop is placed along the gradient vector" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53264, + "name": "opacity", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines the opacity of the gradient stop" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53263, + 53262, + 53264 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53263, + 53262, + 53264 + ] + } + ], + "sources": [ + { + "fileName": "src/components/circular-gradient.ts", + "line": 12, + "character": 13 + }, + { + "fileName": "src/components/circular-gradient.ts", + "line": 19, + "character": 12 + } + ], + "signatures": [ + { + "id": 53258, + "name": "IgrCircularGradient", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53266, + "name": "IgrCircularProgress", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A circular progress indicator used to express unspecified wait time or display\nthe length of a process." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The text area container." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts " + }, + { + "kind": "code", + "text": "`igc-circular-gradient`" + }, + { + "kind": "text", + "text": " elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "svg - The igc-circular-progress SVG element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "gradient_start - The igc-circular-progress linear-gradient start color." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "gradient_end - The igc-circular-progress linear-gradient end color." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "track - The igc-circular-progress ring track area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "fill - The igc-circular-progress indicator area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The igc-circular-progress label." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "value - The igc-circular-progress label value." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indeterminate - The igc-circular-progress indeterminate state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "primary - The igc-circular-progress primary state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "danger - The igc-circular-progress error state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "warning - The igc-circular-progress warning state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "info - The igc-circular-progress info state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "success - The igc-circular-progress success state." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/circular-progress.ts", + "line": 25, + "character": 13 + }, + { + "fileName": "src/components/circular-progress.ts", + "line": 32, + "character": 12 + } + ], + "signatures": [ + { + "id": 53270, + "name": "IgrCircularProgress", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53275, + "name": "IgrCombo", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection.\nIn contrast to the Select component, the Combo component displays all options in a virtualized list of items,\nmeaning the combo box can simultaneously show thousands of options, where one or more options can be selected.\nAdditionally, users can create custom item templates, allowing for robust data visualization.\nThe Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the input of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "header - Renders a container before the list of options of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "footer - Renders a container after the list of options of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "toggle-icon - Renders content inside the suffix container of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "clear-icon - Renders content inside the suffix container of the combo." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The encapsulated text label of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The main input field of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "native-input - The native input of the main input field of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "toggle-icon - The toggle icon wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "clear-icon - The clear icon wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "case-icon - The case icon wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "search-input - The search input field of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "list-wrapper - The list of options wrapper of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "list - The list of options box of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "item - Represents each item in the list of options of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "group-header - Represents each header in the list of options of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "active - Appended to the item parts list when the item is active of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "selected - Appended to the item parts list when the item is selected of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "checkbox - Represents each checkbox of each list item of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "checkbox-indicator - Represents the checkbox indicator of each list item of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "checked - Appended to checkbox parts list when checkbox is checked in the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The container holding the header content of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "footer - The container holding the footer content of the combo." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "empty - The container holding the empty content of the combo." + } + ] + } + ] + }, + "children": [ + { + "id": 53344, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's selection has changed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53345, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53346, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53347, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54330, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + } + ], + "name": "IgcComboChangeEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53360, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the list of options is closed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53361, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53362, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53363, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53356, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitter just before the list of options is closed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53357, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53358, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53359, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53352, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the list of options is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53353, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53354, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53355, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53348, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the list of options is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53349, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53350, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53351, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53293, + "name": "autofocus", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The autofocus attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53294, + "name": "autofocusList", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Focuses the list of options when the menu opens." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53304, + "name": "caseSensitiveIcon", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables the case sensitive search icon in the filtering input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53290, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The data source used to generate the list of options." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 53305, + "name": "disableFiltering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disables the filtering of the list of options." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53300, + "name": "displayKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The key in the data source used to display items in the list." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "typeOperator", + "operator": "keyof", + "target": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 53303, + "name": "filteringOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An object that configures the filtering of the combo." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54429, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "FilteringOptions", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53307, + "name": "groupHeaderTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The template used for the content of each combo group header." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54421, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "ComboItemTemplate", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53301, + "name": "groupKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The key in the data source used to group items in the list." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "typeOperator", + "operator": "keyof", + "target": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 53302, + "name": "groupSorting", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sorts the items in each group by ascending or descending order." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54434, + "name": "GroupingDirection", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53306, + "name": "itemTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The template used for the content of each combo item." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54421, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "ComboItemTemplate", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53295, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53298, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the open state of the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53291, + "name": "outlined", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The outlined attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53296, + "name": "placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53297, + "name": "placeholderSearch", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the search input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53292, + "name": "singleSelect", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables single selection mode and moves item filtering to the main input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53308, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboValue" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "ComboValue", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 53299, + "name": "valueKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The key in the data source used when selecting items." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "typeOperator", + "operator": "keyof", + "target": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 53319, + "name": "selection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the current selection as an array of objects as provided in the `data` source." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 53315, + "name": "blur", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53316, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 230, + "character": 4 + } + ], + "signatures": [ + { + "id": 53317, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 230, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53318, + "name": "blur", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the component." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53326, + "name": "deselect", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects option(s) in the list by either reference or valueKey.\nIf not argument is provided all items will be deselected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53327, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 280, + "character": 4 + } + ], + "signatures": [ + { + "id": 53328, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects option(s) in the list by either reference or valueKey.\nIf not argument is provided all items will be deselected." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst combo<IgcComboComponent<T>> = document.querySelector('igc-combo');\n\n// Deselect one item at a time by reference when valueKey is not specified.\ncombo.deselect(combo.data[0]);\n\n// Deselect multiple items at a time by reference when valueKey is not specified.\ncombo.deselect([combo.data[0], combo.data[1]]);\n\n// Deselect one item at a time when valueKey is specified.\ncombo.deselect('BG01');\n\n// Deselect multiple items at a time when valueKey is specified.\ncombo.deselect(['BG01', 'BG02']);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 280, + "character": 4 + } + ], + "parameters": [ + { + "id": 53329, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "One or more items to be deselected. Multiple items should be passed as an array.\nWhen valueKey is specified, the corresponding value should be used in place of the item reference." + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53330, + "name": "deselect", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects option(s) in the list by either reference or valueKey.\nIf not argument is provided all items will be deselected." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst combo<IgcComboComponent<T>> = document.querySelector('igc-combo');\n\n// Deselect one item at a time by reference when valueKey is not specified.\ncombo.deselect(combo.data[0]);\n\n// Deselect multiple items at a time by reference when valueKey is not specified.\ncombo.deselect([combo.data[0], combo.data[1]]);\n\n// Deselect one item at a time when valueKey is specified.\ncombo.deselect('BG01');\n\n// Deselect multiple items at a time when valueKey is specified.\ncombo.deselect(['BG01', 'BG02']);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 53331, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "One or more items to be deselected. Multiple items should be passed as an array.\nWhen valueKey is specified, the corresponding value should be used in place of the item reference." + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53309, + "name": "focus", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53310, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 228, + "character": 4 + } + ], + "signatures": [ + { + "id": 53311, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 228, + "character": 4 + } + ], + "parameters": [ + { + "id": 53312, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53313, + "name": "focus", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the component." + } + ] + }, + "parameters": [ + { + "id": 53314, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53336, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the list of options." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53337, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 292, + "character": 4 + } + ], + "signatures": [ + { + "id": 53338, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the list of options." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 292, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53339, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the list of options." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53320, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects option(s) in the list by either reference or valueKey.\nIf not argument is provided all items will be selected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53321, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 257, + "character": 4 + } + ], + "signatures": [ + { + "id": 53322, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects option(s) in the list by either reference or valueKey.\nIf not argument is provided all items will be selected." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst combo<IgcComboComponent<T>> = document.querySelector('igc-combo');\n\n// Select one item at a time by reference when valueKey is not specified.\ncombo.select(combo.data[0]);\n\n// Select multiple items at a time by reference when valueKey is not specified.\ncombo.select([combo.data[0], combo.data[1]]);\n\n// Select one item at a time when valueKey is specified.\ncombo.select('BG01');\n\n// Select multiple items at a time when valueKey is specified.\ncombo.select(['BG01', 'BG02']);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 257, + "character": 4 + } + ], + "parameters": [ + { + "id": 53323, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "One or more items to be selected. Multiple items should be passed as an array.\nWhen valueKey is specified, the corresponding value should be used in place of the item reference." + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53324, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects option(s) in the list by either reference or valueKey.\nIf not argument is provided all items will be selected." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst combo<IgcComboComponent<T>> = document.querySelector('igc-combo');\n\n// Select one item at a time by reference when valueKey is not specified.\ncombo.select(combo.data[0]);\n\n// Select multiple items at a time by reference when valueKey is not specified.\ncombo.select([combo.data[0], combo.data[1]]);\n\n// Select one item at a time when valueKey is specified.\ncombo.select('BG01');\n\n// Select multiple items at a time when valueKey is specified.\ncombo.select(['BG01', 'BG02']);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 53325, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "One or more items to be selected. Multiple items should be passed as an array.\nWhen valueKey is specified, the corresponding value should be used in place of the item reference." + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "Item" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.T" + }, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "default.T", + "refersToTypeParameter": true + } + ], + "name": "Item", + "package": "igniteui-webcomponents" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53332, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the list of options." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53333, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 289, + "character": 4 + } + ], + "signatures": [ + { + "id": 53334, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the list of options." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 289, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53335, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the list of options." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53340, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the list of options." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53341, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 295, + "character": 4 + } + ], + "signatures": [ + { + "id": 53342, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the list of options." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "line": 295, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53343, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the list of options." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53293, + 53294, + 53304, + 53290, + 53305, + 53300, + 53303, + 53307, + 53301, + 53302, + 53306, + 53295, + 53298, + 53291, + 53296, + 53297, + 53292, + 53308, + 53299 + ] + }, + { + "title": "Accessors", + "children": [ + 53319 + ] + }, + { + "title": "Methods", + "children": [ + 53315, + 53326, + 53309, + 53336, + 53320, + 53332, + 53340 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53344, + 53360, + 53356, + 53352, + 53348 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 53319 + ] + }, + { + "title": "Events", + "children": [ + 53344, + 53360, + 53356, + 53352, + 53348 + ] + }, + { + "title": "Methods", + "children": [ + 53315, + 53326, + 53309, + 53336, + 53320, + 53332, + 53340 + ] + }, + { + "title": "Properties", + "children": [ + 53293, + 53294, + 53304, + 53290, + 53305, + 53300, + 53303, + 53307, + 53301, + 53302, + 53306, + 53295, + 53298, + 53291, + 53296, + 53297, + 53292, + 53308, + 53299 + ] + } + ], + "sources": [ + { + "fileName": "src/components/combo.ts", + "line": 51, + "character": 13 + }, + { + "fileName": "src/components/combo.ts", + "line": 73, + "character": 12 + } + ], + "signatures": [ + { + "id": 53279, + "name": "IgrCombo", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53365, + "name": "IgrDatePicker", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "igc-date-picker is a feature rich component used for entering a date through manual text input or\nchoosing date values from a calendar dialog that pops up." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "bad-input - Renders content when the value is in the disabledDates ranges." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-overflow - Renders content when the max validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-underflow - Renders content when the min validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders content in the calendar title." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "header-date - Renders content instead of the current date/range in the calendar header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "clear-icon - Renders a clear icon template." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon - Renders the icon/content for the calendar picker." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open - Renders the icon/content for the picker in open state." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "actions - Renders content in the action part of the picker in open state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The label wrapper that renders content above the target input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "container - The main wrapper that holds all main input elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon - The calendar icon wrapper for closed state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open - The calendar icon wrapper for opened state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "clear-icon - The clear icon wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "actions - The actions wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper-text wrapper that renders content below the target input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The calendar header element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-title - The calendar header title element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-date - The calendar header date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-content - The calendar content element which contains the views and navigation elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation - The calendar navigation container element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "months-navigation - The calendar months navigation button element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-navigation - The calendar years navigation button element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-range - The calendar years range element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation-buttons - The calendar navigation buttons container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation-button - The calendar previous/next navigation button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-view-container - The calendar days view container element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-view - The calendar days view element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "months-view - The calendar months view element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-view - The calendar years view element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-row - The calendar days row element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-label - The calendar week header label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "week-number - The calendar week number element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "week-number-inner - The calendar week number inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "date - The calendar date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "date-inner - The calendar date inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "first - The calendar first selected date element in range selection." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "last - The calendar last selected date element in range selection." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "inactive - The calendar inactive date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "hidden - The calendar hidden date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "weekend - The calendar weekend date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "range - The calendar range selected element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "special - The calendar special date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "disabled - The calendar disabled date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "single - The calendar single selected date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "preview - The calendar range selection preview date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "month - The calendar month element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "month-inner - The calendar month inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "year - The calendar year element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "year-inner - The calendar year inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "selected - The calendar selected state for element(s). Applies to date, month and year elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "current - The calendar current state for element(s). Applies to date, month and year elements." + } + ] + } + ] + }, + "children": [ + { + "id": 53466, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the user modifies and commits the elements's value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53467, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53468, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53469, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53462, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the calendar dropdown is hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53463, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53464, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53465, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53458, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the calendar dropdown is hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53459, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53460, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53461, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53470, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when when the user types in the element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53471, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53472, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53473, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53454, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the calendar dropdown is shown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53455, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53456, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53457, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53450, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the calendar dropdown is shown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53451, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53452, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53453, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53385, + "name": "activeDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the date which is shown in the calendar picker and is highlighted.\nBy default it is the current date." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 53392, + "name": "disabledDates", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets disabled dates." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54388, + "name": "DateRangeDescriptor", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 53398, + "name": "displayFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Format to display the value in when not editing.\nDefaults to the input format if not set." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53388, + "name": "headerOrientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the calendar header." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54386, + "name": "CalendarHeaderOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53390, + "name": "hideHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the calendar hides its header." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53391, + "name": "hideOutsideDays", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the visibility of the dates that do not belong to the current month." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53399, + "name": "inputFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The date format to apply on the input.\nDefaults to the current locale Intl.DateTimeFormat" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53380, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label of the datepicker." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53400, + "name": "locale", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The locale settings used to display the value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53387, + "name": "max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The maximum value required for the date picker to remain valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 53386, + "name": "min", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The minimum value required for the date picker to remain valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 53381, + "name": "mode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the calendar is opened in a dropdown or a modal dialog" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54442, + "name": "PickerMode", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53382, + "name": "nonEditable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to allow typing in the input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53379, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the state of the datepicker dropdown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53389, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the multiple months displayed in the calendar's days view." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53394, + "name": "outlined", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the control will have outlined appearance." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53395, + "name": "placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53401, + "name": "prompt", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The prompt symbol to use for unfilled parts of the mask." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53383, + "name": "readOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Makes the control a readonly field." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53402, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The resource strings of the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54286, + "name": "IgcCalendarResourceStrings", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53397, + "name": "showWeekNumbers", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to show the number of the week in the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53393, + "name": "specialDates", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets special dates." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54388, + "name": "DateRangeDescriptor", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 53384, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value of the picker" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 53396, + "name": "visibleMonths", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The number of months displayed in the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53403, + "name": "weekStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the start day of the week for the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54391, + "name": "WeekDays", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53404, + "name": "clear", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input part of the component of any user input" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53405, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 252, + "character": 4 + } + ], + "signatures": [ + { + "id": 53406, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input part of the component of any user input" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 252, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53407, + "name": "clear", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input part of the component of any user input" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53424, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the text in the input of the component" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53425, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 258, + "character": 4 + } + ], + "signatures": [ + { + "id": 53426, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the text in the input of the component" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 258, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53427, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the text in the input of the component" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53438, + "name": "setRangeText", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53439, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 261, + "character": 4 + } + ], + "signatures": [ + { + "id": 53440, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 261, + "character": 4 + } + ], + "parameters": [ + { + "id": 53441, + "name": "replacement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53442, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53443, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53444, + "name": "mode", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54444, + "name": "RangeTextSelectMode", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53445, + "name": "setRangeText", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 53446, + "name": "replacement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53447, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53448, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53449, + "name": "mode", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54444, + "name": "RangeTextSelectMode", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53428, + "name": "setSelectionRange", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the text selection range in the input of the component" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53429, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 260, + "character": 4 + } + ], + "signatures": [ + { + "id": 53430, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the text selection range in the input of the component" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 260, + "character": 4 + } + ], + "parameters": [ + { + "id": 53431, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53432, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53433, + "name": "direction", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54445, + "name": "SelectionRangeDirection", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53434, + "name": "setSelectionRange", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the text selection range in the input of the component" + } + ] + }, + "parameters": [ + { + "id": 53435, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53436, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53437, + "name": "direction", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54445, + "name": "SelectionRangeDirection", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53416, + "name": "stepDown", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the passed in date part" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53417, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 256, + "character": 4 + } + ], + "signatures": [ + { + "id": 53418, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the passed in date part" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 256, + "character": 4 + } + ], + "parameters": [ + { + "id": 53419, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53420, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53421, + "name": "stepDown", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the passed in date part" + } + ] + }, + "parameters": [ + { + "id": 53422, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53423, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53408, + "name": "stepUp", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the passed in date part" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53409, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 254, + "character": 4 + } + ], + "signatures": [ + { + "id": 53410, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the passed in date part" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "line": 254, + "character": 4 + } + ], + "parameters": [ + { + "id": 53411, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53412, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53413, + "name": "stepUp", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the passed in date part" + } + ] + }, + "parameters": [ + { + "id": 53414, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53415, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53385, + 53392, + 53398, + 53388, + 53390, + 53391, + 53399, + 53380, + 53400, + 53387, + 53386, + 53381, + 53382, + 53379, + 53389, + 53394, + 53395, + 53401, + 53383, + 53402, + 53397, + 53393, + 53384, + 53396, + 53403 + ] + }, + { + "title": "Methods", + "children": [ + 53404, + 53424, + 53438, + 53428, + 53416, + 53408 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53466, + 53462, + 53458, + 53470, + 53454, + 53450 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53466, + 53462, + 53458, + 53470, + 53454, + 53450 + ] + }, + { + "title": "Methods", + "children": [ + 53404, + 53424, + 53438, + 53428, + 53416, + 53408 + ] + }, + { + "title": "Properties", + "children": [ + 53385, + 53392, + 53398, + 53388, + 53390, + 53391, + 53399, + 53380, + 53400, + 53387, + 53386, + 53381, + 53382, + 53379, + 53389, + 53394, + 53395, + 53401, + 53383, + 53402, + 53397, + 53393, + 53384, + 53396, + 53403 + ] + } + ], + "sources": [ + { + "fileName": "src/components/date-picker.ts", + "line": 78, + "character": 13 + }, + { + "fileName": "src/components/date-picker.ts", + "line": 105, + "character": 12 + } + ], + "signatures": [ + { + "id": 53369, + "name": "IgrDatePicker", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52363, + "name": "IgrDateRangePicker", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The igc-date-range-picker allows the user to select a range of dates." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input (single input)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix-start - Renders content before the start input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix-end - Renders content before the end input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the input (single input)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix-start - Renders content after the start input (single input)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix-end - Renders content after the end input (single input)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "bad-input - Renders content when the value is in the disabledDates ranges." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-overflow - Renders content when the max validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-underflow - Renders content when the min validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders content in the calendar title." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "header-date - Renders content instead of the current date/range in the calendar header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "clear-icon - Renders a clear icon template." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "clear-icon-start - Renders a clear icon template for the start input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "clear-icon-end - Renders a clear icon template for the end input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon - Renders the icon/content for the calendar picker." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon-start - Renders the icon/content for the calendar picker for the start input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon-end - Renders the icon/content for the calendar picker for the end input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open - Renders the icon/content for the picker in open state." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open-start - Renders the icon/content for the picker in open state for the start input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open-end - Renders the icon/content for the picker in open state for the end input (two inputs)." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "actions - Renders content in the action part of the picker in open state." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "separator - Renders the separator element between the two inputs." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "separator - The separator element between the two inputs." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "ranges - The wrapper that renders the custom and predefined ranges." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The label wrapper that renders content above the target input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon - The calendar icon wrapper for closed state (single input)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon-start - The calendar icon wrapper for closed state for the start input (two inputs)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon-end - The calendar icon wrapper for closed state for the end input (two inputs)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open - The calendar icon wrapper for opened state (single input)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open-start - The calendar icon wrapper for opened state for the start input (two inputs)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-icon-open-end - The calendar icon wrapper for opened state for the end input (two inputs)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "clear-icon - The clear icon wrapper (single input)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "clear-icon-start - The clear icon wrapper for the start input (two inputs)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "clear-icon-end - The clear icon wrapper for the end input (two inputs)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "actions - The wrapper for the custom actions area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "clear-icon - The clear icon wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper-text wrapper that renders content below the target input." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The calendar header element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-title - The calendar header title element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-date - The calendar header date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-content - The calendar content element which contains the views and navigation elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation - The calendar navigation container element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "months-navigation - The calendar months navigation button element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-navigation - The calendar years navigation button element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-range - The calendar years range element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation-buttons - The calendar navigation buttons container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "navigation-button - The calendar previous/next navigation button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-view-container - The calendar days view container element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-view - The calendar days view element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "months-view - The calendar months view element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "years-view - The calendar years view element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "days-row - The calendar days row element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "calendar-label - The calendar week header label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "week-number - The calendar week number element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "week-number-inner - The calendar week number inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "date - The calendar date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "date-inner - The calendar date inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "first - The calendar first selected date element in range selection." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "last - The calendar last selected date element in range selection." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "inactive - The calendar inactive date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "hidden - The calendar hidden date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "weekend - The calendar weekend date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "range - The calendar range selected element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "special - The calendar special date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "disabled - The calendar disabled date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "single - The calendar single selected date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "preview - The calendar range selection preview date element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "month - The calendar month element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "month-inner - The calendar month inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "year - The calendar year element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "year-inner - The calendar year inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "selected - The calendar selected state for element(s). Applies to date, month and year elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "current - The calendar current state for element(s). Applies to date, month and year elements." + } + ] + } + ] + }, + "children": [ + { + "id": 52434, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the user modifies and commits the elements's value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52435, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52436, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52437, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54417, + "name": "DateRangeValue", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52430, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the calendar dropdown is hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52431, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52432, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52433, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52426, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the calendar dropdown is hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52427, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52428, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52429, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52438, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when when the user types in the element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52439, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52440, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52441, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54417, + "name": "DateRangeValue", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52422, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the calendar dropdown is shown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52423, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52424, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52425, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52418, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the calendar dropdown is shown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52419, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52420, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52421, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52403, + "name": "activeDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the date which is shown in the calendar picker and is highlighted.\nBy default it is the current date." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 52378, + "name": "customRanges", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Renders chips with custom ranges based on the elements of the array." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54414, + "name": "CustomDateRange", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 52398, + "name": "disabledDates", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets disabled dates." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54388, + "name": "DateRangeDescriptor", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 52394, + "name": "displayFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Format to display the value in when not editing.\nDefaults to the input format if not set." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52400, + "name": "headerOrientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the calendar header." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52402, + "name": "hideHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the calendar hides its header." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52405, + "name": "hideOutsideDays", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the visibility of the dates that do not belong to the current month." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52395, + "name": "inputFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The date format to apply on the inputs.\nDefaults to the current locale Intl.DateTimeFormat" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52387, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label of the control (single input)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52389, + "name": "labelEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label attribute of the end input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52388, + "name": "labelStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label attribute of the start input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52382, + "name": "locale", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The locale settings used to display the value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52397, + "name": "max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The maximum value required for the date range picker to remain valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 52396, + "name": "min", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The minimum value required for the date range picker to remain valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 52379, + "name": "mode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the calendar is opened in a dropdown or a modal dialog" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54442, + "name": "PickerMode", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52385, + "name": "nonEditable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to allow typing in the input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52401, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the multiple months displayed in the calendar's days view." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52386, + "name": "outlined", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the control will have outlined appearance." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52390, + "name": "placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the control (single input)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52392, + "name": "placeholderEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the end input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52391, + "name": "placeholderStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the start input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52393, + "name": "prompt", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The prompt symbol to use for unfilled parts of the mask." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52384, + "name": "readOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Makes the control a readonly field." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52383, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The resource strings of the date range picker." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/date-range-picker.resources.d.ts", + "qualifiedName": "IgcDateRangePickerResourceStrings" + }, + "name": "IgcDateRangePickerResourceStrings", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52404, + "name": "showWeekNumbers", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to show the number of the week in the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52406, + "name": "specialDates", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets special dates." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54388, + "name": "DateRangeDescriptor", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 52381, + "name": "usePredefinedRanges", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the control will show chips with predefined ranges." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52380, + "name": "useTwoInputs", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Use two inputs to display the date range values. Makes the input editable in dropdown mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52377, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54417, + "name": "DateRangeValue", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52399, + "name": "visibleMonths", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The number of months displayed in the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52407, + "name": "weekStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the start day of the week for the calendar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54391, + "name": "WeekDays", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52408, + "name": "clear", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input parts of the component of any user input" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52409, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 305, + "character": 4 + } + ], + "signatures": [ + { + "id": 52410, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input parts of the component of any user input" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 305, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52411, + "name": "clear", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input parts of the component of any user input" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52412, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects a date range value in the picker" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52413, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 307, + "character": 4 + } + ], + "signatures": [ + { + "id": 52414, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects a date range value in the picker" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 307, + "character": 4 + } + ], + "parameters": [ + { + "id": 52415, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54417, + "name": "DateRangeValue", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52416, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects a date range value in the picker" + } + ] + }, + "parameters": [ + { + "id": 52417, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54417, + "name": "DateRangeValue", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52403, + 52378, + 52398, + 52394, + 52400, + 52402, + 52405, + 52395, + 52387, + 52389, + 52388, + 52382, + 52397, + 52396, + 52379, + 52385, + 52401, + 52386, + 52390, + 52392, + 52391, + 52393, + 52384, + 52383, + 52404, + 52406, + 52381, + 52380, + 52377, + 52399, + 52407 + ] + }, + { + "title": "Methods", + "children": [ + 52408, + 52412 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52434, + 52430, + 52426, + 52438, + 52422, + 52418 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52434, + 52430, + 52426, + 52438, + 52422, + 52418 + ] + }, + { + "title": "Methods", + "children": [ + 52408, + 52412 + ] + }, + { + "title": "Properties", + "children": [ + 52403, + 52378, + 52398, + 52394, + 52400, + 52402, + 52405, + 52395, + 52387, + 52389, + 52388, + 52382, + 52397, + 52396, + 52379, + 52385, + 52401, + 52386, + 52390, + 52392, + 52391, + 52393, + 52384, + 52383, + 52404, + 52406, + 52381, + 52380, + 52377, + 52399, + 52407 + ] + } + ], + "sources": [ + { + "fileName": "src/components/date-range-picker.ts", + "line": 96, + "character": 13 + }, + { + "fileName": "src/components/date-range-picker.ts", + "line": 123, + "character": 12 + } + ], + "signatures": [ + { + "id": 52367, + "name": "IgrDateRangePicker", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52192, + "name": "IgrDateTimeInput", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A date time input is an input field that lets you set and edit the date and time in a chosen input element\nusing customizable display and input formats." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-overflow - Renders content when the max validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-underflow - Renders content when the min validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "container - The main wrapper that holds all main input elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper." + } + ] + } + ] + }, + "children": [ + { + "id": 52238, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52239, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52240, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52241, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52234, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control input receives user input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52235, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52236, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52237, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52206, + "name": "displayFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Format to display the value in when not editing.\nDefaults to the input format if not set." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52202, + "name": "inputFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The date format to apply on the input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52209, + "name": "locale", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The locale settings used to display the value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52205, + "name": "max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The maximum value required for the input to remain valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 52204, + "name": "min", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The minimum value required for the input to remain valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 52207, + "name": "spinDelta", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Delta values used to increment or decrement each date part on step actions.\nAll values default to " + }, + { + "kind": "code", + "text": "`1`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54407, + "name": "DatePartDeltas", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52208, + "name": "spinLoop", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether to loop over the currently spun segment." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52203, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 52230, + "name": "clear", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input element of user input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52231, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 104, + "character": 4 + } + ], + "signatures": [ + { + "id": 52232, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input element of user input." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 104, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52233, + "name": "clear", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the input element of user input." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52210, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52211, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 98, + "character": 4 + } + ], + "signatures": [ + { + "id": 52212, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 98, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52213, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52222, + "name": "stepDown", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements a date/time portion." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52223, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 102, + "character": 4 + } + ], + "signatures": [ + { + "id": 52224, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements a date/time portion." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 102, + "character": 4 + } + ], + "parameters": [ + { + "id": 52225, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52226, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52227, + "name": "stepDown", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements a date/time portion." + } + ] + }, + "parameters": [ + { + "id": 52228, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52229, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52214, + "name": "stepUp", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments a date/time portion." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52215, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 100, + "character": 4 + } + ], + "signatures": [ + { + "id": 52216, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments a date/time portion." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "line": 100, + "character": 4 + } + ], + "parameters": [ + { + "id": 52217, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52218, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52219, + "name": "stepUp", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments a date/time portion." + } + ] + }, + "parameters": [ + { + "id": 52220, + "name": "datePart", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54399, + "name": "DatePart", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52221, + "name": "delta", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52206, + 52202, + 52209, + 52205, + 52204, + 52207, + 52208, + 52203 + ] + }, + { + "title": "Methods", + "children": [ + 52230, + 52210, + 52222, + 52214 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52238, + 52234 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52238, + 52234 + ] + }, + { + "title": "Methods", + "children": [ + 52230, + 52210, + 52222, + 52214 + ] + }, + { + "title": "Properties", + "children": [ + 52206, + 52202, + 52209, + 52205, + 52204, + 52207, + 52208, + 52203 + ] + }, + { + "title": "lifecycle", + "children": [ + 52210 + ] + } + ], + "sources": [ + { + "fileName": "src/components/date-time-input.ts", + "line": 27, + "character": 13 + }, + { + "fileName": "src/components/date-time-input.ts", + "line": 42, + "character": 12 + } + ], + "signatures": [ + { + "id": 52196, + "name": "IgrDateTimeInput", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52243, + "name": "IgrDialog", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a Dialog component." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders content inside the default slot of the dialog." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders content in the title slot of the dialog header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "message - Renders the message content of the dialog." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "footer - Renders content in the dialog footer." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the dialog." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "title - The title container of the dialog." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "footer - The footer container of the dialog." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "overlay - The backdrop overlay of the dialog." + } + ] + } + ] + }, + "children": [ + { + "id": 52275, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after closing the dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52276, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52277, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52278, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52271, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitter just before the dialog is closed. Cancelable." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52272, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52273, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52274, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52254, + "name": "closeOnOutsideClick", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the dialog should be closed when clicking outside of it." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52255, + "name": "hideDefaultAction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to hide the default action button for the dialog.\n\nWhen there is projected content in the " + }, + { + "kind": "code", + "text": "`footer`" + }, + { + "kind": "text", + "text": " slot this property\nhas no effect." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52253, + "name": "keepOpenOnEscape", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the dialog should be kept open when pressing the 'Escape' button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52256, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the dialog is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52258, + "name": "returnValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the return value for the dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52257, + "name": "title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the title of the dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52263, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52264, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "line": 80, + "character": 4 + } + ], + "signatures": [ + { + "id": 52265, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "line": 80, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52266, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the dialog." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52259, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52260, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "line": 78, + "character": 4 + } + ], + "signatures": [ + { + "id": 52261, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "line": 78, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52262, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the dialog." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52267, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52268, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "line": 82, + "character": 4 + } + ], + "signatures": [ + { + "id": 52269, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "line": 82, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52270, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the dialog." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52254, + 52255, + 52253, + 52256, + 52258, + 52257 + ] + }, + { + "title": "Methods", + "children": [ + 52263, + 52259, + 52267 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52275, + 52271 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52275, + 52271 + ] + }, + { + "title": "Methods", + "children": [ + 52263, + 52259, + 52267 + ] + }, + { + "title": "Properties", + "children": [ + 52254, + 52255, + 52253, + 52256, + 52258, + 52257 + ] + } + ], + "sources": [ + { + "fileName": "src/components/dialog.ts", + "line": 20, + "character": 13 + }, + { + "fileName": "src/components/dialog.ts", + "line": 33, + "character": 12 + } + ], + "signatures": [ + { + "id": 52247, + "name": "IgrDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52990, + "name": "IgrDivider", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page." + } + ], + "blockTags": [ + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--color - Sets the color of the divider." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--inset - Shrinks the divider by the given amount from the start. If " + }, + { + "kind": "code", + "text": "`middle`" + }, + { + "kind": "text", + "text": " is set it will shrink from both sides." + } + ] + } + ] + }, + "children": [ + { + "id": 52999, + "name": "middle", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "When set and inset is provided, it will shrink the divider line from both sides." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53000, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to render a solid or a dashed divider line." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54454, + "name": "DividerType", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52998, + "name": "vertical", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to render a vertical divider line." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52999, + 53000, + 52998 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52999, + 53000, + 52998 + ] + } + ], + "sources": [ + { + "fileName": "src/components/divider.ts", + "line": 11, + "character": 13 + }, + { + "fileName": "src/components/divider.ts", + "line": 18, + "character": 12 + } + ], + "signatures": [ + { + "id": 52994, + "name": "IgrDivider", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 3, + "name": "IgrDockManager", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A Dock Manager component that provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving, maximizing and hiding panes." + } + ] + }, + "children": [ + { + "id": 157, + "name": "onActivePaneChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 158, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 159, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 160, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54544, + "name": "IgcActivePaneEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 177, + "name": "onFloatingPaneResizeEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 178, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 179, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 180, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56629, + "name": "IgcFloatingPaneResizeEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 173, + "name": "onFloatingPaneResizeMove", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 174, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 175, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 176, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56632, + "name": "IgcFloatingPaneResizeMoveEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 181, + "name": "onFloatingPaneResizeStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 182, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 183, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 184, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56629, + "name": "IgcFloatingPaneResizeEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 185, + "name": "onLayoutChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 186, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 187, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 188, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 145, + "name": "onPaneClose", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 146, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 147, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 148, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54573, + "name": "IgcPaneCloseEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 169, + "name": "onPaneDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 170, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 171, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 172, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54615, + "name": "IgcPaneDragEndEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 165, + "name": "onPaneDragOver", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 166, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 167, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 168, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54610, + "name": "IgcPaneDragOverEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 161, + "name": "onPaneDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 162, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 163, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 164, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54584, + "name": "IgcPaneDragStartEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 121, + "name": "onPaneHeaderConnected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 122, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 123, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 124, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54567, + "name": "IgcPaneHeaderConnectionEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 125, + "name": "onPaneHeaderDisconnected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 126, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 127, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 128, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54567, + "name": "IgcPaneHeaderConnectionEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 153, + "name": "onPanePinnedToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 154, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 155, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 156, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54579, + "name": "IgcPanePinnedEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 149, + "name": "onPaneScroll", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 150, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 151, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 152, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54576, + "name": "IgcPaneScrollEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 141, + "name": "onSplitterResizeEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 142, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 143, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 144, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 137, + "name": "onSplitterResizeStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 138, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 139, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 140, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 129, + "name": "onTabHeaderConnected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 130, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 131, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 132, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54570, + "name": "IgcTabHeaderConnectionEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 133, + "name": "onTabHeaderDisconnected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 134, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 135, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 136, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54570, + "name": "IgcTabHeaderConnectionEventArgs", + "package": "igniteui-dockmanager" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 31, + "name": "activePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the active pane of the Dock Manager." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + }, + { + "id": 37, + "name": "allowFloatingPanesResize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to resize floating panes. Defaults to true." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 39, + "name": "allowInnerDock", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to inner dock panes. Defaults to true." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 32, + "name": "allowMaximize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to maximize panes. Defaults to true." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 45, + "name": "allowRootDock", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether docking into the root-level pane is allowed.\n\nWhen set to true (default), panes can be docked directly into the root container.\nThis is done by creating a new root pane and repositioning the existing root pane as a sibling to the newly docked content pane." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 44, + "name": "allowSplitterDock", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user can dock the dragged pane directly in the parent split pane by dragging it over a splitter.\nIf enabled, a docking indicator will be shown over the splitter's drag handler. Defaults to false." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 46, + "name": "autoScrollConfig", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Configuration for edge auto-scrolling behavior during drag operations.\n\n- " + }, + { + "kind": "code", + "text": "`edgeThreshold`" + }, + { + "kind": "text", + "text": ": Distance in pixels from the container's edge that triggers scrolling.\n- " + }, + { + "kind": "code", + "text": "`scrollSpeed`" + }, + { + "kind": "text", + "text": ": Number of pixels to scroll per interval (affects scroll rate)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 47, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 48, + "name": "edgeThreshold", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 569, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 49, + "name": "scrollSpeed", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 570, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 48, + 49 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 568, + "character": 21 + } + ] + } + } + }, + { + "id": 42, + "name": "closeBehavior", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the selected pane or all panes are closed when clicking the close button of a pane within a dockable TabGroup.\nDefaults to 'allPanes'." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54538, + "name": "IgcPaneActionBehavior", + "package": "igniteui-dockmanager" + } + }, + { + "id": 33, + "name": "containedInBoundaries", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to false." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 38, + "name": "disableKeyboardNavigation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disables the built-in keyboard shortcuts for pane navigation. Defaults to false." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 29, + "name": "draggedPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the currently dragged pane." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54654, + "name": "IgcTabGroupPane", + "package": "igniteui-dockmanager" + } + ] + } + }, + { + "id": 30, + "name": "dropPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the current drop position when performing custom drag/drop." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 50, + "name": "enableDragCursor", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables changing the mouse cursor when hovering over a tab or pane header.\n\nWhen set to " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": ", the cursor changes from the default to " + }, + { + "kind": "code", + "text": "`pointer`" + }, + { + "kind": "text", + "text": ",\nindicating that the header can be dragged (e.g., to dock or float the pane)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 28, + "name": "layout", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the layout configuration of the Dock Manager." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54668, + "name": "IgcDockManagerLayout", + "package": "igniteui-dockmanager" + } + }, + { + "id": 35, + "name": "maximizedPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the maximized pane." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54654, + "name": "IgcTabGroupPane", + "package": "igniteui-dockmanager" + } + ] + } + }, + { + "id": 41, + "name": "proximityDock", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user can dock the dragged pane by dragging it close to the target pane edges.\nIf enabled, docking indicators are not visible. Defaults to false." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 36, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the resource strings." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 56605, + "name": "IgcDockManagerResourceStrings", + "package": "igniteui-dockmanager" + } + }, + { + "id": 34, + "name": "showHeaderIconOnHover", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines which tab header icons should show when hovering over the tab with the mouse. Defaults to none." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "none" + }, + { + "type": "literal", + "value": "closeOnly" + }, + { + "type": "literal", + "value": "moreOptionsOnly" + }, + { + "type": "literal", + "value": "all" + } + ] + } + }, + { + "id": 40, + "name": "showPaneHeaders", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether pane headers are only shown on hover or always visible. Defaults to 'always'." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "always" + }, + { + "type": "literal", + "value": "onHoverOnly" + } + ] + } + }, + { + "id": 43, + "name": "unpinBehavior", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the selected pane or all panes are unpinned when clicking the unpin button of a pane within a dockable TabGroup.\nDefaults to 'allPanes'." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54538, + "name": "IgcPaneActionBehavior", + "package": "igniteui-dockmanager" + } + }, + { + "id": 67, + "name": "addEventListener", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 68, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 594, + "character": 2 + }, + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 595, + "character": 2 + } + ], + "signatures": [ + { + "id": 69, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 594, + "character": 2 + } + ], + "typeParameters": [ + { + "id": 70, + "name": "K", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "type": { + "type": "typeOperator", + "operator": "keyof", + "target": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerEventMap" + }, + "name": "IgcDockManagerEventMap", + "package": "igniteui-dockmanager" + } + } + } + ], + "parameters": [ + { + "id": 71, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + } + }, + { + "id": 72, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reflection", + "declaration": { + "id": 73, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 594, + "character": 78 + } + ], + "signatures": [ + { + "id": 74, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 594, + "character": 78 + } + ], + "parameters": [ + { + "id": 75, + "name": "this", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 76, + "name": "ev", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "indexedAccess", + "indexType": { + "type": "reference", + "target": 70, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + }, + "objectType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerEventMap" + }, + "name": "IgcDockManagerEventMap", + "package": "igniteui-dockmanager" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + } + }, + { + "id": 77, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "AddEventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 78, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 595, + "character": 2 + } + ], + "parameters": [ + { + "id": 79, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 80, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "EventListenerOrEventListenerObject", + "package": "typescript" + } + }, + { + "id": 81, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "AddEventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 82, + "name": "addEventListener", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 83, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + } + }, + { + "id": 84, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reflection", + "declaration": { + "id": 85, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 594, + "character": 78 + } + ], + "signatures": [ + { + "id": 86, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 594, + "character": 78 + } + ], + "parameters": [ + { + "id": 87, + "name": "this", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 88, + "name": "ev", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "indexedAccess", + "indexType": { + "type": "reference", + "target": 70, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + }, + "objectType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerEventMap" + }, + "name": "IgcDockManagerEventMap", + "package": "igniteui-dockmanager" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + } + }, + { + "id": 89, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "AddEventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 90, + "name": "addEventListener", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 91, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 92, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "EventListenerOrEventListenerObject", + "package": "typescript" + } + }, + { + "id": 93, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "AddEventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 51, + "name": "dropPane", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Performs drop of the `draggedPane` into the specified `dropPosition`.\nReturns true if the pane has been docked otherwise returns false." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 585, + "character": 2 + } + ], + "signatures": [ + { + "id": 53, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Performs drop of the " + }, + { + "kind": "code", + "text": "`draggedPane`" + }, + { + "kind": "text", + "text": " into the specified " + }, + { + "kind": "code", + "text": "`dropPosition`" + }, + { + "kind": "text", + "text": ".\nReturns true if the pane has been docked otherwise returns false." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 585, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 54, + "name": "dropPane", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Performs drop of the " + }, + { + "kind": "code", + "text": "`draggedPane`" + }, + { + "kind": "text", + "text": " into the specified " + }, + { + "kind": "code", + "text": "`dropPosition`" + }, + { + "kind": "text", + "text": ".\nReturns true if the pane has been docked otherwise returns false." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 61, + "name": "focusPane", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Focuses a pane from the layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 62, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 593, + "character": 2 + } + ], + "signatures": [ + { + "id": 63, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Focuses a pane from the layout." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 593, + "character": 2 + } + ], + "parameters": [ + { + "id": 64, + "name": "contentId", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 65, + "name": "focusPane", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Focuses a pane from the layout." + } + ] + }, + "parameters": [ + { + "id": 66, + "name": "contentId", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 94, + "name": "removeEventListener", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 95, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 596, + "character": 2 + }, + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 597, + "character": 2 + } + ], + "signatures": [ + { + "id": 96, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 596, + "character": 2 + } + ], + "typeParameters": [ + { + "id": 97, + "name": "K", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "type": { + "type": "typeOperator", + "operator": "keyof", + "target": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerEventMap" + }, + "name": "IgcDockManagerEventMap", + "package": "igniteui-dockmanager" + } + } + } + ], + "parameters": [ + { + "id": 98, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 97, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + } + }, + { + "id": 99, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reflection", + "declaration": { + "id": 100, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 596, + "character": 81 + } + ], + "signatures": [ + { + "id": 101, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 596, + "character": 81 + } + ], + "parameters": [ + { + "id": 102, + "name": "this", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 103, + "name": "ev", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "indexedAccess", + "indexType": { + "type": "reference", + "target": 97, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + }, + "objectType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerEventMap" + }, + "name": "IgcDockManagerEventMap", + "package": "igniteui-dockmanager" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + } + }, + { + "id": 104, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "EventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 105, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 597, + "character": 2 + } + ], + "parameters": [ + { + "id": 106, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 107, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "EventListenerOrEventListenerObject", + "package": "typescript" + } + }, + { + "id": 108, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "EventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 109, + "name": "removeEventListener", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 110, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 97, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + } + }, + { + "id": 111, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reflection", + "declaration": { + "id": 112, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 596, + "character": 81 + } + ], + "signatures": [ + { + "id": 113, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 596, + "character": 81 + } + ], + "parameters": [ + { + "id": 114, + "name": "this", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 115, + "name": "ev", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "indexedAccess", + "indexType": { + "type": "reference", + "target": 97, + "name": "K", + "package": "igniteui-dockmanager", + "refersToTypeParameter": true + }, + "objectType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerEventMap" + }, + "name": "IgcDockManagerEventMap", + "package": "igniteui-dockmanager" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + } + }, + { + "id": 116, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "EventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 117, + "name": "removeEventListener", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 118, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 119, + "name": "listener", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "EventListenerOrEventListenerObject", + "package": "typescript" + } + }, + { + "id": 120, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "boolean" + }, + { + "type": "reference", + "target": -1, + "name": "EventListenerOptions", + "package": "typescript" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 55, + "name": "removePane", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes a pane from the layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 589, + "character": 2 + } + ], + "signatures": [ + { + "id": 57, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes a pane from the layout." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 589, + "character": 2 + } + ], + "parameters": [ + { + "id": 58, + "name": "pane", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54667, + "name": "IgcDockManagerPane", + "package": "igniteui-dockmanager" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 59, + "name": "removePane", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes a pane from the layout." + } + ] + }, + "parameters": [ + { + "id": 60, + "name": "pane", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54667, + "name": "IgcDockManagerPane", + "package": "igniteui-dockmanager" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 31, + 37, + 39, + 32, + 45, + 44, + 46, + 42, + 33, + 38, + 29, + 30, + 50, + 28, + 35, + 41, + 36, + 34, + 40, + 43 + ] + }, + { + "title": "Methods", + "children": [ + 67, + 51, + 61, + 94, + 55 + ] + }, + { + "title": "Set Signatures", + "children": [ + 157, + 177, + 173, + 181, + 185, + 145, + 169, + 165, + 161, + 121, + 125, + 153, + 149, + 141, + 137, + 129, + 133 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 157, + 177, + 173, + 181, + 185, + 145, + 169, + 165, + 161, + 121, + 125, + 153, + 149, + 141, + 137, + 129, + 133 + ] + }, + { + "title": "Methods", + "children": [ + 67, + 51, + 61, + 94, + 55 + ] + }, + { + "title": "Properties", + "children": [ + 31, + 37, + 39, + 32, + 45, + 44, + 46, + 42, + 33, + 38, + 29, + 30, + 50, + 28, + 35, + 41, + 36, + 34, + 40, + 43 + ] + } + ], + "sources": [ + { + "fileName": "src/dock-manager/index.ts", + "line": 17, + "character": 13 + }, + { + "fileName": "src/dock-manager/index.ts", + "line": 75, + "character": 12 + } + ], + "signatures": [ + { + "id": 7, + "name": "IgrDockManager", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53503, + "name": "IgrDropdown", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a DropDown component." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "target - Renders the dropdown's target element." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the dropdown list items." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The dropdown list wrapper container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "list - The dropdown list element." + } + ] + } + ] + }, + "children": [ + { + "id": 53564, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the selected item changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53565, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53566, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53567, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53580, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after closing the dropdown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53581, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53582, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53583, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53576, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitter just before the dropdown is closed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53577, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53578, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53579, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53572, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the dropdown is open." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53573, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53574, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53575, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53568, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the dropdown is open." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53569, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53570, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53571, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53519, + "name": "distance", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The distance from the target element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53518, + "name": "flip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53516, + "name": "placement", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The preferred placement of the component around the target element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54420, + "name": "PopoverPlacement", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53520, + "name": "sameWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the dropdown's width should be the same as the target's one." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53517, + "name": "scrollStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines the behavior of the component during scrolling of the parent container." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54443, + "name": "PopoverScrollStrategy", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53522, + "name": "groups", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the group items of the dropdown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53484, + "name": "IgcDropdownGroupComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 53521, + "name": "items", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the items of the dropdown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 53523, + "name": "selectedItem", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the selected item from the dropdown or null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53560, + "name": "clearSelection", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the current selection of the dropdown." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53561, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 111, + "character": 4 + } + ], + "signatures": [ + { + "id": 53562, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the current selection of the dropdown." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 111, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53563, + "name": "clearSelection", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears the current selection of the dropdown." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53524, + "name": "disconnectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53525, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 80, + "character": 4 + } + ], + "signatures": [ + { + "id": 53526, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is removed from the document's DOM.\n\nThis callback is the main signal to the element that it may no longer be\nused. " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": " should ensure that nothing is holding a\nreference to the element (such as event listeners added to nodes external\nto the element), so that it is free to be garbage collected.\n\n" + }, + { + "kind": "code", + "text": "```ts\ndisconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nAn element may be re-connected after being disconnected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 80, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53527, + "name": "disconnectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is removed from the document's DOM.\n\nThis callback is the main signal to the element that it may no longer be\nused. " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": " should ensure that nothing is holding a\nreference to the element (such as event listeners added to nodes external\nto the element), so that it is free to be garbage collected.\n\n" + }, + { + "kind": "code", + "text": "```ts\ndisconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nAn element may be re-connected after being disconnected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53540, + "name": "navigateTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53541, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 103, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 105, + "character": 4 + } + ], + "signatures": [ + { + "id": 53542, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 103, + "character": 4 + } + ], + "parameters": [ + { + "id": 53543, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53544, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 105, + "character": 4 + } + ], + "parameters": [ + { + "id": 53545, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + } + }, + "signatures": [ + { + "id": 53546, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53547, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53548, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53549, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + }, + { + "id": 53550, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53551, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 107, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 109, + "character": 4 + } + ], + "signatures": [ + { + "id": 53552, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 107, + "character": 4 + } + ], + "parameters": [ + { + "id": 53553, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53554, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 109, + "character": 4 + } + ], + "parameters": [ + { + "id": 53555, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + } + }, + "signatures": [ + { + "id": 53556, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53557, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53558, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53559, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + }, + { + "id": 53528, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53529, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 99, + "character": 4 + } + ], + "signatures": [ + { + "id": 53530, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 99, + "character": 4 + } + ], + "parameters": [ + { + "id": 53531, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53532, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the component." + } + ] + }, + "parameters": [ + { + "id": 53533, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53534, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53535, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 101, + "character": 4 + } + ], + "signatures": [ + { + "id": 53536, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "line": 101, + "character": 4 + } + ], + "parameters": [ + { + "id": 53537, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53538, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the component." + } + ] + }, + "parameters": [ + { + "id": 53539, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53519, + 53518, + 53516, + 53520, + 53517 + ] + }, + { + "title": "Accessors", + "children": [ + 53522, + 53521, + 53523 + ] + }, + { + "title": "Methods", + "children": [ + 53560, + 53524, + 53540, + 53550, + 53528, + 53534 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53564, + 53580, + 53576, + 53572, + 53568 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 53522, + 53521, + 53523 + ] + }, + { + "title": "Events", + "children": [ + 53564, + 53580, + 53576, + 53572, + 53568 + ] + }, + { + "title": "Methods", + "children": [ + 53560, + 53524, + 53540, + 53550, + 53528, + 53534 + ] + }, + { + "title": "Properties", + "children": [ + 53519, + 53518, + 53516, + 53520, + 53517 + ] + }, + { + "title": "lifecycle", + "children": [ + 53524 + ] + } + ], + "sources": [ + { + "fileName": "src/components/dropdown.ts", + "line": 19, + "character": 13 + }, + { + "fileName": "src/components/dropdown.ts", + "line": 43, + "character": 12 + } + ], + "signatures": [ + { + "id": 53507, + "name": "IgrDropdown", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53484, + "name": "IgrDropdownGroup", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A container for a group of " + }, + { + "kind": "code", + "text": "`igc-dropdown-item`" + }, + { + "kind": "text", + "text": " components." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "label - Contains the group's label." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Intended to contain the items belonging to this group." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element." + } + ] + } + ] + }, + "children": [ + { + "id": 53492, + "name": "items", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "All child " + }, + { + "kind": "code", + "text": "`igc-dropdown-item`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53475, + "name": "IgcDropdownItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53492 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53492 + ] + } + ], + "sources": [ + { + "fileName": "src/components/dropdown-group.ts", + "line": 12, + "character": 13 + }, + { + "fileName": "src/components/dropdown-group.ts", + "line": 19, + "character": 12 + } + ], + "signatures": [ + { + "id": 53488, + "name": "IgrDropdownGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53494, + "name": "IgrDropdownHeader", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a header item in a igc-dropdown list." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the header." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/dropdown-header.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/dropdown-header.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 53498, + "name": "IgrDropdownHeader", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53475, + "name": "IgrDropdownItem", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an item in a dropdown list." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the item's main content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the item's main content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the item's main content." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper of the igc-dropdown-item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The main content wrapper of the igc-dropdown-item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper of the igc-dropdown-item." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/dropdown-item.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/components/dropdown-item.ts", + "line": 22, + "character": 12 + } + ], + "signatures": [ + { + "id": 53479, + "name": "IgrDropdownItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52488, + "name": "IgrExpansionPanel", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The Expansion Panel Component provides a way to display information in a toggleable way -\ncompact summary view containing title and description and expanded detail view containing\nadditional content to the summary header." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- renders the default content of the panel" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - renders the title of the panel's header" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "subtitle - renders the subtitle of the panel's header" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "indicator - renders the expand/collapsed indicator" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "indicator-expanded - renders the expanded state of the indicator" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The container of the expansion indicator, title and subtitle." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "title - The title container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "subtitle - The subtitle container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indicator - The indicator container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The expansion panel's content wrapper." + } + ] + } + ] + }, + "children": [ + { + "id": 52531, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the expansion panel is closed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52532, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52533, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52534, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52527, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted before closing the expansion panel." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52528, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52529, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52530, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52523, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the expansion panel is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52524, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52525, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52526, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52519, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted before opening the expansion panel." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52520, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52521, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52522, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 52488, + "name": "IgcExpansionPanelComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52501, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52502, + "name": "indicatorPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The indicator position of the expansion panel." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54455, + "name": "ExpansionPanelIndicatorPosition", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52500, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the contents of the control should be visible." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52503, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52504, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 60, + "character": 4 + } + ], + "signatures": [ + { + "id": 52505, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 60, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52506, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52511, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the panel content." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52512, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 69, + "character": 4 + } + ], + "signatures": [ + { + "id": 52513, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the panel content." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 69, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52514, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the panel content." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52515, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the panel content." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52516, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 71, + "character": 4 + } + ], + "signatures": [ + { + "id": 52517, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the panel content." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 71, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52518, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the panel content." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52507, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the panel open/close state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52508, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 67, + "character": 4 + } + ], + "signatures": [ + { + "id": 52509, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the panel open/close state." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "line": 67, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52510, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the panel open/close state." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52501, + 52502, + 52500 + ] + }, + { + "title": "Methods", + "children": [ + 52503, + 52511, + 52515, + 52507 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52531, + 52527, + 52523, + 52519 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52531, + 52527, + 52523, + 52519 + ] + }, + { + "title": "Methods", + "children": [ + 52503, + 52511, + 52515, + 52507 + ] + }, + { + "title": "Properties", + "children": [ + 52501, + 52502, + 52500 + ] + }, + { + "title": "lifecycle", + "children": [ + 52503 + ] + } + ], + "sources": [ + { + "fileName": "src/components/expansion-panel.ts", + "line": 26, + "character": 13 + }, + { + "fileName": "src/components/expansion-panel.ts", + "line": 47, + "character": 12 + } + ], + "signatures": [ + { + "id": 52492, + "name": "IgrExpansionPanel", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52443, + "name": "IgrFileInput", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "file-selector-text - Renders content for the browse button when input type is file." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "file-missing-text - Renders content when input type is file and no file is chosen." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "container - The main wrapper that holds all main input elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "file-names - The file names wrapper when input type is 'file'." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "file-selector-button - The browse button when input type is 'file'." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper." + } + ] + } + ] + }, + "children": [ + { + "id": 52470, + "name": "onCancel", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's file picker dialog is canceled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52471, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52472, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52473, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "FileList", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52466, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52467, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52468, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52469, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "FileList", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52455, + "name": "accept", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The accept attribute of the control.\nDefines the file types as a list of comma-separated values that the file input should accept." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52456, + "name": "autofocus", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The autofocus attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52454, + "name": "multiple", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The multiple attribute of the control.\nUsed to indicate that a file input allows the user to select more than one file." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52453, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52457, + "name": "files", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the selected files, if any; otherwise returns null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": -1, + "name": "FileList", + "package": "typescript" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52455, + 52456, + 52454, + 52453 + ] + }, + { + "title": "Accessors", + "children": [ + 52457 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52470, + 52466 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 52457 + ] + }, + { + "title": "Events", + "children": [ + 52470, + 52466 + ] + }, + { + "title": "Properties", + "children": [ + 52455, + 52456, + 52454, + 52453 + ] + } + ], + "sources": [ + { + "fileName": "src/components/file-input.ts", + "line": 27, + "character": 13 + }, + { + "fileName": "src/components/file-input.ts", + "line": 42, + "character": 12 + } + ], + "signatures": [ + { + "id": 52447, + "name": "IgrFileInput", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52150, + "name": "IgrIcon", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The icon component allows visualizing collections of pre-registered SVG icons." + } + ] + }, + "children": [ + { + "id": 52159, + "name": "collection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the registered collection for look up of icons.\nDefaults to " + }, + { + "kind": "code", + "text": "`default`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52160, + "name": "mirrored", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to flip the icon. Useful for RTL layouts." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52158, + "name": "name", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the icon glyph to draw." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52161, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52162, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "line": 33, + "character": 4 + } + ], + "signatures": [ + { + "id": 52163, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "line": 33, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52164, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52165, + "name": "disconnectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52166, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "line": 34, + "character": 4 + } + ], + "signatures": [ + { + "id": 52167, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is removed from the document's DOM.\n\nThis callback is the main signal to the element that it may no longer be\nused. " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": " should ensure that nothing is holding a\nreference to the element (such as event listeners added to nodes external\nto the element), so that it is free to be garbage collected.\n\n" + }, + { + "kind": "code", + "text": "```ts\ndisconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nAn element may be re-connected after being disconnected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "line": 34, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52168, + "name": "disconnectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is removed from the document's DOM.\n\nThis callback is the main signal to the element that it may no longer be\nused. " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": " should ensure that nothing is holding a\nreference to the element (such as event listeners added to nodes external\nto the element), so that it is free to be garbage collected.\n\n" + }, + { + "kind": "code", + "text": "```ts\ndisconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nAn element may be re-connected after being disconnected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52159, + 52160, + 52158 + ] + }, + { + "title": "Methods", + "children": [ + 52161, + 52165 + ] + } + ], + "categories": [ + { + "title": "Methods", + "children": [ + 52161, + 52165 + ] + }, + { + "title": "Properties", + "children": [ + 52159, + 52160, + 52158 + ] + }, + { + "title": "lifecycle", + "children": [ + 52161, + 52165 + ] + } + ], + "sources": [ + { + "fileName": "src/components/icon.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/components/icon.ts", + "line": 16, + "character": 12 + } + ], + "signatures": [ + { + "id": 52154, + "name": "IgrIcon", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52807, + "name": "IgrIconButton", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The wrapping element of the icon button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "icon - The icon element of the icon button." + } + ] + } + ] + }, + "children": [ + { + "id": 52816, + "name": "collection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the icon collection." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52817, + "name": "mirrored", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to flip the icon button. Useful for RTL layouts." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52815, + "name": "name", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the icon." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52818, + "name": "variant", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The visual variant of the icon button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54456, + "name": "IconButtonVariant", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52816, + 52817, + 52815, + 52818 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52816, + 52817, + 52815, + 52818 + ] + } + ], + "sources": [ + { + "fileName": "src/components/icon-button.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/icon-button.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52811, + "name": "IgrIconButton", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52280, + "name": "IgrInput", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "type-mismatch - Renders content when the a type url/email input pattern validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "pattern-mismatch - Renders content when the pattern validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "too-long - Renders content when the maxlength validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "too-short - Renders content when the minlength validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-overflow - Renders content when the max validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "range-underflow - Renders content when the min validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "step-mismatch - Renders content when the step validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "container - The main wrapper that holds all main input elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper." + } + ] + } + ] + }, + "children": [ + { + "id": 52334, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52335, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52336, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52337, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52330, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control input receives user input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52331, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52332, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52333, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52300, + "name": "autocomplete", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The autocomplete attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52299, + "name": "autofocus", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The autofocus attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52292, + "name": "inputMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The input mode attribute of the control.\nSee [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52297, + "name": "max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The max attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52295, + "name": "maxLength", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The maximum string length of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52296, + "name": "min", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The min attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52294, + "name": "minLength", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The minimum string length required by the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52293, + "name": "pattern", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The pattern attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52298, + "name": "step", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The step attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52291, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The type attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54457, + "name": "InputType", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52301, + "name": "validateOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables validation rules to be evaluated without restricting user input. This applies to the " + }, + { + "kind": "code", + "text": "`maxLength`" + }, + { + "kind": "text", + "text": " property for\nstring-type inputs or allows spin buttons to exceed the predefined " + }, + { + "kind": "code", + "text": "`min/max`" + }, + { + "kind": "text", + "text": " limits for number-type inputs." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52290, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52314, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all text within the input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52315, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 114, + "character": 4 + } + ], + "signatures": [ + { + "id": 52316, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all text within the input." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 114, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52317, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all text within the input." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52302, + "name": "setRangeText", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Replaces the selected text in the input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52303, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 112, + "character": 4 + } + ], + "signatures": [ + { + "id": 52304, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Replaces the selected text in the input." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 112, + "character": 4 + } + ], + "parameters": [ + { + "id": 52305, + "name": "replacement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52306, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52307, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52308, + "name": "selectMode", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54444, + "name": "RangeTextSelectMode", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52309, + "name": "setRangeText", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Replaces the selected text in the input." + } + ] + }, + "parameters": [ + { + "id": 52310, + "name": "replacement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52311, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52312, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52313, + "name": "selectMode", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54444, + "name": "RangeTextSelectMode", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52324, + "name": "stepDown", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the numeric value of the input by one or more steps." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52325, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 118, + "character": 4 + } + ], + "signatures": [ + { + "id": 52326, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the numeric value of the input by one or more steps." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 118, + "character": 4 + } + ], + "parameters": [ + { + "id": 52327, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52328, + "name": "stepDown", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the numeric value of the input by one or more steps." + } + ] + }, + "parameters": [ + { + "id": 52329, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52318, + "name": "stepUp", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the numeric value of the input by one or more steps." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52319, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 116, + "character": 4 + } + ], + "signatures": [ + { + "id": 52320, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the numeric value of the input by one or more steps." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "line": 116, + "character": 4 + } + ], + "parameters": [ + { + "id": 52321, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52322, + "name": "stepUp", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the numeric value of the input by one or more steps." + } + ] + }, + "parameters": [ + { + "id": 52323, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52300, + 52299, + 52292, + 52297, + 52295, + 52296, + 52294, + 52293, + 52298, + 52291, + 52301, + 52290 + ] + }, + { + "title": "Methods", + "children": [ + 52314, + 52302, + 52324, + 52318 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52334, + 52330 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52334, + 52330 + ] + }, + { + "title": "Methods", + "children": [ + 52314, + 52302, + 52324, + 52318 + ] + }, + { + "title": "Properties", + "children": [ + 52300, + 52299, + 52292, + 52297, + 52295, + 52296, + 52294, + 52293, + 52298, + 52291, + 52301, + 52290 + ] + } + ], + "sources": [ + { + "fileName": "src/components/input.ts", + "line": 30, + "character": 13 + }, + { + "fileName": "src/components/input.ts", + "line": 41, + "character": 12 + } + ], + "signatures": [ + { + "id": 52284, + "name": "IgrInput", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53698, + "name": "IgrLinearProgress", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A linear progress indicator used to express unspecified wait time or display\nthe length of a process." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The text area container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "track - The igc-linear-progress track area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "fill - The igc-linear-progress indicator area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "striped - The igc-linear-progress striped indicator." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The igc-linear-progress label." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "value - The igc-linear-progress label value." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indeterminate - The igc-linear-progress indeterminate state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "primary - The igc-linear-progress indicator primary state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "danger - The igc-linear-progress indicator error state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "warning - The igc-linear-progress indicator warning state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "info - The igc-linear-progress indicator info state." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "success - The igc-linear-progress indicator success state." + } + ] + } + ] + }, + "children": [ + { + "id": 53707, + "name": "labelAlign", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The position for the default label of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54458, + "name": "LinearProgressLabelAlign", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53706, + "name": "striped", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the striped look of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53707, + 53706 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53707, + 53706 + ] + } + ], + "sources": [ + { + "fileName": "src/components/linear-progress.ts", + "line": 22, + "character": 13 + }, + { + "fileName": "src/components/linear-progress.ts", + "line": 29, + "character": 12 + } + ], + "signatures": [ + { + "id": 53702, + "name": "IgrLinearProgress", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52798, + "name": "IgrList", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Displays a collection of data items in a templatable list format." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the list items and list headers inside default slot." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/list.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/list.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52802, + "name": "IgrList", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52779, + "name": "IgrListHeader", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Header list item." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders header list item's content." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/list-header.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/list-header.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52783, + "name": "IgrListHeader", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52788, + "name": "IgrListItem", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The list-item component is a container\nintended for row items in the list component." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders custom content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "start - Renders content before all other content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "end - Renders content after all other content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders the title." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "subtitle - Renders the subtitle." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "start - The start container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "end - The end container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The header and custom content container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The title and subtitle container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "title - The title container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "subtitle - The subtitle container." + } + ] + } + ] + }, + "children": [ + { + "id": 52796, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Defines if the list item is selected or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52796 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 52796 + ] + } + ], + "sources": [ + { + "fileName": "src/components/list-item.ts", + "line": 21, + "character": 13 + }, + { + "fileName": "src/components/list-item.ts", + "line": 28, + "character": 12 + } + ], + "signatures": [ + { + "id": 52792, + "name": "IgrListItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53709, + "name": "IgrMaskInput", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A masked input is an input field where a developer can control user input and format the visible value,\nbased on configurable rules" + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the input" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input" + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "bad-input - Renders content when a required mask pattern validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "container - The main wrapper that holds all main input elements" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper" + } + ] + } + ] + }, + "children": [ + { + "id": 53727, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when an alteration of the control's value is committed by the user" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53728, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53729, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53730, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53723, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control receives user input" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53724, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53725, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53726, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53721, + "name": "mask", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The masked pattern of the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53722, + "name": "prompt", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The prompt symbol to use for unfilled parts of the mask pattern." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53720, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53719, + "name": "valueMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dictates the behavior when retrieving the value of the control:\n\n- " + }, + { + "kind": "code", + "text": "`raw`" + }, + { + "kind": "text", + "text": " will return the clean user input.\n- " + }, + { + "kind": "code", + "text": "`withFormatting`" + }, + { + "kind": "text", + "text": " will return the value with all literals and prompts." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54459, + "name": "MaskInputValueMode", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53721, + 53722, + 53720, + 53719 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53727, + 53723 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53727, + 53723 + ] + }, + { + "title": "Properties", + "children": [ + 53721, + 53722, + 53720, + 53719 + ] + } + ], + "sources": [ + { + "fileName": "src/components/mask-input.ts", + "line": 26, + "character": 13 + }, + { + "fileName": "src/components/mask-input.ts", + "line": 39, + "character": 12 + } + ], + "signatures": [ + { + "id": 53713, + "name": "IgrMaskInput", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53775, + "name": "IgrNavbar", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A navigation bar component is used to facilitate navigation through\na series of hierarchical screens within an app." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders a title inside the default slot." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "start - Renders left aligned icons." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "end - Renders right aligned action icons." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the navigation bar." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "start - The left aligned icon container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "middle - The navigation bar title container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "end - The right aligned action icons container." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/navbar.ts", + "line": 17, + "character": 13 + }, + { + "fileName": "src/components/navbar.ts", + "line": 24, + "character": 12 + } + ], + "signatures": [ + { + "id": 53779, + "name": "IgrNavbar", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53752, + "name": "IgrNavDrawer", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a side navigation container that provides\nquick access between views." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The default slot for the igc-navigation-drawer." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "mini - The slot for the mini variant of the igc-navigation-drawer." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the igc-navigation-drawer." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "main - The main container of the igc-navigation-drawer." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "mini - The mini container of the igc-navigation-drawer." + } + ] + } + ] + }, + "children": [ + { + "id": 53761, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the drawer is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53760, + "name": "position", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The position of the drawer." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54460, + "name": "NavDrawerPosition", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53766, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the drawer." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53767, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "line": 36, + "character": 4 + } + ], + "signatures": [ + { + "id": 53768, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the drawer." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "line": 36, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53769, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the drawer." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53762, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the drawer." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53763, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "line": 34, + "character": 4 + } + ], + "signatures": [ + { + "id": 53764, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the drawer." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "line": 34, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53765, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the drawer." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 53770, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the drawer." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53771, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "line": 38, + "character": 4 + } + ], + "signatures": [ + { + "id": 53772, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the drawer." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "line": 38, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 53773, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the open state of the drawer." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53761, + 53760 + ] + }, + { + "title": "Methods", + "children": [ + 53766, + 53762, + 53770 + ] + } + ], + "categories": [ + { + "title": "Methods", + "children": [ + 53766, + 53762, + 53770 + ] + }, + { + "title": "Properties", + "children": [ + 53761, + 53760 + ] + } + ], + "sources": [ + { + "fileName": "src/components/nav-drawer.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/components/nav-drawer.ts", + "line": 22, + "character": 12 + } + ], + "signatures": [ + { + "id": 53756, + "name": "IgrNavDrawer", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53732, + "name": "IgrNavDrawerHeaderItem", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A wrapper for navigation drawer's header." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the header content" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/nav-drawer-header-item.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/nav-drawer-header-item.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 53736, + "name": "IgrNavDrawerHeaderItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53741, + "name": "IgrNavDrawerItem", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a navigation drawer item." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "content - The content slot for the drawer item." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "icon - The slot for the icon of the drawer item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the drawer item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "icon - The icon container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The content container." + } + ] + } + ] + }, + "children": [ + { + "id": 53750, + "name": "active", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the drawer is active." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53749, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the drawer is disabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53750, + 53749 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53750, + 53749 + ] + } + ], + "sources": [ + { + "fileName": "src/components/nav-drawer-item.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/components/nav-drawer-item.ts", + "line": 21, + "character": 12 + } + ], + "signatures": [ + { + "id": 53745, + "name": "IgrNavDrawerItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53784, + "name": "IgrRadio", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The radio label." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The radio control base wrapper." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "control - The radio input control." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The radio control label." + } + ] + } + ] + }, + "children": [ + { + "id": 53825, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53826, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53827, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53828, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54317, + "name": "IgcRadioChangeEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53795, + "name": "checked", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The checked state of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53796, + "name": "labelPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label position of the radio control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54447, + "name": "ToggleLabelPosition", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53793, + "name": "required", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53794, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53807, + "name": "blur", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the radio control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53808, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 79, + "character": 4 + } + ], + "signatures": [ + { + "id": 53809, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the radio control." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 79, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53810, + "name": "blur", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the radio control." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53811, + "name": "checkValidity", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks for validity of the control and emits the invalid event if it invalid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53812, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 83, + "character": 4 + } + ], + "signatures": [ + { + "id": 53813, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks for validity of the control and emits the invalid event if it invalid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 83, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 53814, + "name": "checkValidity", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks for validity of the control and emits the invalid event if it invalid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 53797, + "name": "click", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Simulates a click on the radio control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53798, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 75, + "character": 4 + } + ], + "signatures": [ + { + "id": 53799, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Simulates a click on the radio control." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 75, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53800, + "name": "click", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Simulates a click on the radio control." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53801, + "name": "focus", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the radio control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53802, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 77, + "character": 4 + } + ], + "signatures": [ + { + "id": 53803, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the radio control." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 77, + "character": 4 + } + ], + "parameters": [ + { + "id": 53804, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53805, + "name": "focus", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the radio control." + } + ] + }, + "parameters": [ + { + "id": 53806, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53815, + "name": "reportValidity", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks for validity of the control and shows the browser message if it invalid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53816, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 85, + "character": 4 + } + ], + "signatures": [ + { + "id": 53817, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks for validity of the control and shows the browser message if it invalid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 85, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 53818, + "name": "reportValidity", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks for validity of the control and shows the browser message if it invalid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 53819, + "name": "setCustomValidity", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a custom validation message for the control.\nAs long as `message` is not empty, the control is considered invalid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53820, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 90, + "character": 4 + } + ], + "signatures": [ + { + "id": 53821, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a custom validation message for the control.\nAs long as " + }, + { + "kind": "code", + "text": "`message`" + }, + { + "kind": "text", + "text": " is not empty, the control is considered invalid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 90, + "character": 4 + } + ], + "parameters": [ + { + "id": 53822, + "name": "message", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53823, + "name": "setCustomValidity", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a custom validation message for the control.\nAs long as " + }, + { + "kind": "code", + "text": "`message`" + }, + { + "kind": "text", + "text": " is not empty, the control is considered invalid." + } + ] + }, + "parameters": [ + { + "id": 53824, + "name": "message", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53795, + 53796, + 53793, + 53794 + ] + }, + { + "title": "Methods", + "children": [ + 53807, + 53811, + 53797, + 53801, + 53815, + 53819 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53825 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53825 + ] + }, + { + "title": "Methods", + "children": [ + 53807, + 53811, + 53797, + 53801, + 53815, + 53819 + ] + }, + { + "title": "Properties", + "children": [ + 53795, + 53796, + 53793, + 53794 + ] + } + ], + "sources": [ + { + "fileName": "src/components/radio.ts", + "line": 18, + "character": 13 + }, + { + "fileName": "src/components/radio.ts", + "line": 28, + "character": 12 + } + ], + "signatures": [ + { + "id": 53788, + "name": "IgrRadio", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53830, + "name": "IgrRadioGroup", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The igc-radio-group component unifies one or more igc-radio buttons." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot" + } + ] + } + ] + }, + "children": [ + { + "id": 53843, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53844, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53845, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53846, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54317, + "name": "IgcRadioChangeEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53839, + "name": "alignment", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Alignment of the radio controls inside this group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54440, + "name": "ContentOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53840, + "name": "defaultValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53841, + "name": "name", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the name for all child igc-radio components." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53842, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the checked igc-radio element that matches `value`" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53839, + 53840, + 53841, + 53842 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53843 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53843 + ] + }, + { + "title": "Properties", + "children": [ + 53839, + 53840, + 53841, + 53842 + ] + } + ], + "sources": [ + { + "fileName": "src/components/radio-group.ts", + "line": 11, + "character": 13 + }, + { + "fileName": "src/components/radio-group.ts", + "line": 21, + "character": 12 + } + ], + "signatures": [ + { + "id": 53834, + "name": "IgrRadioGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53919, + "name": "IgrRangeSlider", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A range slider component used to select two numeric values within a range." + } + ], + "blockTags": [ + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the slider." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "ticks - The ticks container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick-group - The tick group container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick - The tick element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick-label - The tick label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick-label-inner - The inner element of the tick label." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumbs - The thumbs container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb - The thumb element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb-label - The thumb tooltip label container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb-label-inner - The thumb tooltip label inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "track - The track container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "steps - The track steps element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "inactive - The inactive element of the track." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "fill - The filled part of the track." + } + ] + } + ] + }, + "children": [ + { + "id": 53937, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a value change is committed on a thumb drag end or keyboard interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53938, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53939, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53940, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54320, + "name": "IgcRangeSliderValueEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53933, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a value is changed via thumb drag or keyboard interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53934, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53935, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53936, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54320, + "name": "IgcRangeSliderValueEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53929, + "name": "lower", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current value of the lower thumb." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53931, + "name": "thumbLabelLower", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The aria label for the lower thumb." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53932, + "name": "thumbLabelUpper", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The aria label for the upper thumb." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53930, + "name": "upper", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current value of the upper thumb." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53929, + 53931, + 53932, + 53930 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53937, + 53933 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53937, + 53933 + ] + }, + { + "title": "Properties", + "children": [ + 53929, + 53931, + 53932, + 53930 + ] + } + ], + "sources": [ + { + "fileName": "src/components/range-slider.ts", + "line": 26, + "character": 13 + }, + { + "fileName": "src/components/range-slider.ts", + "line": 41, + "character": 12 + } + ], + "signatures": [ + { + "id": 53923, + "name": "IgrRangeSlider", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53861, + "name": "IgrRating", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Rating provides insight regarding others' opinions and experiences,\nand can allow the user to submit a rating of their own" + } + ], + "blockTags": [ + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The main wrapper which holds all of the rating elements." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The label part." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "value-label - The value label part." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "symbols - A wrapper for all rating symbols." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "symbol - The part of the encapsulated default symbol." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "full - The part of the encapsulated full symbols." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "empty - The part of the encapsulated empty symbols." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--symbol-size - The size of the symbols." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--symbol-full-color - The color of the filled symbol." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--symbol-empty-color - The color of the empty symbol." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--symbol-full-filter - The filter(s) used for the filled symbol." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--symbol-empty-filter - The filter(s) used for the empty symbol." + } + ] + } + ] + }, + "children": [ + { + "id": 53892, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the value of the control changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53893, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53894, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53895, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53896, + "name": "onHover", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when hover is enabled and the user mouses over a symbol of the rating." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53897, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53898, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53899, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53879, + "name": "allowReset", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to reset the rating when the user selects the same value." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53876, + "name": "hoverPreview", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets hover preview behavior for the component" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53873, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53871, + "name": "max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The maximum value for the rating.\n\nIf there are projected symbols, the maximum value will be resolved\nbased on the number of symbols." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53877, + "name": "readOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Makes the control a readonly field." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53878, + "name": "single", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles single selection visual mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53872, + "name": "step", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The minimum value change allowed.\n\nValid values are in the interval between 0 and 1 inclusive." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53875, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current value of the component" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53874, + "name": "valueFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A format string which sets aria-valuetext. Instances of '{0}' will be replaced\nwith the current value of the control and instances of '{1}' with the maximum value for the control.\n\nImportant for screen-readers and useful for localization." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53886, + "name": "stepDown", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the value of the control by `n` steps multiplied by\nthe step factor." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53887, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "line": 132, + "character": 4 + } + ], + "signatures": [ + { + "id": 53888, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the value of the control by " + }, + { + "kind": "code", + "text": "`n`" + }, + { + "kind": "text", + "text": " steps multiplied by\nthe step factor." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "line": 132, + "character": 4 + } + ], + "parameters": [ + { + "id": 53889, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53890, + "name": "stepDown", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the value of the control by " + }, + { + "kind": "code", + "text": "`n`" + }, + { + "kind": "text", + "text": " steps multiplied by\nthe step factor." + } + ] + }, + "parameters": [ + { + "id": 53891, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53880, + "name": "stepUp", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the value of the control by `n` steps multiplied by the\nstep factor." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53881, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "line": 127, + "character": 4 + } + ], + "signatures": [ + { + "id": 53882, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the value of the control by " + }, + { + "kind": "code", + "text": "`n`" + }, + { + "kind": "text", + "text": " steps multiplied by the\nstep factor." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "line": 127, + "character": 4 + } + ], + "parameters": [ + { + "id": 53883, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53884, + "name": "stepUp", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the value of the control by " + }, + { + "kind": "code", + "text": "`n`" + }, + { + "kind": "text", + "text": " steps multiplied by the\nstep factor." + } + ] + }, + "parameters": [ + { + "id": 53885, + "name": "n", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53879, + 53876, + 53873, + 53871, + 53877, + 53878, + 53872, + 53875, + 53874 + ] + }, + { + "title": "Methods", + "children": [ + 53886, + 53880 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53892, + 53896 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53892, + 53896 + ] + }, + { + "title": "Methods", + "children": [ + 53886, + 53880 + ] + }, + { + "title": "Properties", + "children": [ + 53879, + 53876, + 53873, + 53871, + 53877, + 53878, + 53872, + 53875, + 53874 + ] + } + ], + "sources": [ + { + "fileName": "src/components/rating.ts", + "line": 25, + "character": 13 + }, + { + "fileName": "src/components/rating.ts", + "line": 36, + "character": 12 + } + ], + "signatures": [ + { + "id": 53865, + "name": "IgrRating", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53848, + "name": "IgrRatingSymbol", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Used when a custom icon/symbol/element needs to be passed to the igc-rating component." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot for projected full symbols/icons." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "empty - Default slot for projected empty symbols/icons." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "symbol - The symbol wrapping container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "full - The full symbol wrapping container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "empty - The empty symbol wrapping container." + } + ] + } + ] + }, + "children": [ + { + "id": 53856, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53857, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/rating/rating-symbol.d.ts", + "line": 19, + "character": 4 + } + ], + "signatures": [ + { + "id": 53858, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/rating/rating-symbol.d.ts", + "line": 19, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53859, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Methods", + "children": [ + 53856 + ] + } + ], + "categories": [ + { + "title": "Methods", + "children": [ + 53856 + ] + }, + { + "title": "lifecycle", + "children": [ + 53856 + ] + } + ], + "sources": [ + { + "fileName": "src/components/rating-symbol.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/components/rating-symbol.ts", + "line": 22, + "character": 12 + } + ], + "signatures": [ + { + "id": 53852, + "name": "IgrRatingSymbol", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53901, + "name": "IgrRipple", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A ripple can be applied to an element to represent\ninteractive surface." + } + ] + }, + "sources": [ + { + "fileName": "src/components/ripple.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/ripple.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 53905, + "name": "IgrRipple", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53615, + "name": "IgrSelect", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a control that provides a menu of options." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the list of select items." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "header - Renders a container before the list of options." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "footer - Renders a container after the list of options." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "toggle-icon - Renders content inside the suffix container." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "toggle-icon-expanded - Renders content for the toggle icon when the component is in open state." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "list - The list wrapping container for the items of the igc-select." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The encapsulated igc-input of the igc-select." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The encapsulated text label of the igc-select." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper of the input of the igc-select." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper of the input of the igc-select." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "toggle-icon - The toggle icon wrapper of the igc-select." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper of the igc-select." + } + ] + } + ] + }, + "children": [ + { + "id": 53677, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53678, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53679, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53680, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53693, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the list of options is closed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53694, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53695, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53696, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53689, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitter just before the list of options is closed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53690, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53691, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53692, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53685, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the list of options is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53686, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53687, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53688, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53681, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted just before the list of options is opened." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53682, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53683, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53684, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53630, + "name": "autofocus", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The autofocus attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53631, + "name": "distance", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The distance of the select dropdown from its input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53632, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53629, + "name": "outlined", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The outlined attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53633, + "name": "placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53634, + "name": "placement", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The preferred placement of the select dropdown around its input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54420, + "name": "PopoverPlacement", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53635, + "name": "scrollStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines the behavior of the component during scrolling of the parent container." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54443, + "name": "PopoverScrollStrategy", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53628, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53637, + "name": "groups", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the groups of the igc-select component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53595, + "name": "IgcSelectGroupComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 53636, + "name": "items", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the items of the igc-select component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 53638, + "name": "selectedItem", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the selected item from the dropdown or null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53645, + "name": "blur", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53646, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 144, + "character": 4 + } + ], + "signatures": [ + { + "id": 53647, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 144, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53648, + "name": "blur", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the component." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53673, + "name": "clearSelection", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resets the current value and selection of the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53674, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 156, + "character": 4 + } + ], + "signatures": [ + { + "id": 53675, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resets the current value and selection of the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 156, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53676, + "name": "clearSelection", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resets the current value and selection of the component." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53639, + "name": "focus", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53640, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 142, + "character": 4 + } + ], + "signatures": [ + { + "id": 53641, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 142, + "character": 4 + } + ], + "parameters": [ + { + "id": 53642, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53643, + "name": "focus", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the component." + } + ] + }, + "parameters": [ + { + "id": 53644, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53653, + "name": "navigateTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53654, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 148, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 150, + "character": 4 + } + ], + "signatures": [ + { + "id": 53655, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 148, + "character": 4 + } + ], + "parameters": [ + { + "id": 53656, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53657, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 150, + "character": 4 + } + ], + "parameters": [ + { + "id": 53658, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + } + }, + "signatures": [ + { + "id": 53659, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53660, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53661, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53662, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + }, + { + "id": 53649, + "name": "reportValidity", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks the validity of the control and moves the focus to it if it is not valid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53650, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 146, + "character": 4 + } + ], + "signatures": [ + { + "id": 53651, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks the validity of the control and moves the focus to it if it is not valid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 146, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 53652, + "name": "reportValidity", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Checks the validity of the control and moves the focus to it if it is not valid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 53663, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53664, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 152, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 154, + "character": 4 + } + ], + "signatures": [ + { + "id": 53665, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 152, + "character": 4 + } + ], + "parameters": [ + { + "id": 53666, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53667, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "line": 154, + "character": 4 + } + ], + "parameters": [ + { + "id": 53668, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + } + }, + "signatures": [ + { + "id": 53669, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item with the specified value. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53670, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 53671, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the item at the specified index. If it exists, returns the found item, otherwise - null." + } + ] + }, + "parameters": [ + { + "id": 53672, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53630, + 53631, + 53632, + 53629, + 53633, + 53634, + 53635, + 53628 + ] + }, + { + "title": "Accessors", + "children": [ + 53637, + 53636, + 53638 + ] + }, + { + "title": "Methods", + "children": [ + 53645, + 53673, + 53639, + 53653, + 53649, + 53663 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53677, + 53693, + 53689, + 53685, + 53681 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 53637, + 53636, + 53638 + ] + }, + { + "title": "Events", + "children": [ + 53677, + 53693, + 53689, + 53685, + 53681 + ] + }, + { + "title": "Methods", + "children": [ + 53645, + 53673, + 53639, + 53653, + 53649, + 53663 + ] + }, + { + "title": "Properties", + "children": [ + 53630, + 53631, + 53632, + 53629, + 53633, + 53634, + 53635, + 53628 + ] + } + ], + "sources": [ + { + "fileName": "src/components/select.ts", + "line": 33, + "character": 13 + }, + { + "fileName": "src/components/select.ts", + "line": 51, + "character": 12 + } + ], + "signatures": [ + { + "id": 53619, + "name": "IgrSelect", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53595, + "name": "IgrSelectGroup", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "label - Contains the group's label." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Intended to contain the items belonging to this group." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element." + } + ] + } + ] + }, + "children": [ + { + "id": 53604, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the group item and all its children are disabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53603, + "name": "items", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "All child " + }, + { + "kind": "code", + "text": "`igc-select-item`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53585, + "name": "IgcSelectItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53604, + 53603 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53604, + 53603 + ] + } + ], + "sources": [ + { + "fileName": "src/components/select-group.ts", + "line": 11, + "character": 13 + }, + { + "fileName": "src/components/select-group.ts", + "line": 18, + "character": 12 + } + ], + "signatures": [ + { + "id": 53599, + "name": "IgrSelectGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53606, + "name": "IgrSelectHeader", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a header item in an igc-select component." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the header." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/select-header.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/select-header.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 53610, + "name": "IgrSelectHeader", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53585, + "name": "IgrSelectItem", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an item in a select list." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the all content bar the prefix and suffix." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the main content area." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after the main content area." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper of the igc-select-item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The main content wrapper of the igc-select-item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper of the igc-select-item." + } + ] + } + ] + }, + "children": [ + { + "id": 53593, + "name": "active", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the item is disabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53593 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53593 + ] + } + ], + "sources": [ + { + "fileName": "src/components/select-item.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/components/select-item.ts", + "line": 22, + "character": 12 + } + ], + "signatures": [ + { + "id": 53589, + "name": "IgrSelectItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53957, + "name": "IgrSlider", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A slider component used to select numeric value within a range." + } + ], + "blockTags": [ + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the slider." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "ticks - The ticks container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick-group - The tick group container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick - The tick element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick-label - The tick label element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tick-label-inner - The inner element of the tick label." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumbs - The thumbs container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb - The thumb element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb-label - The thumb tooltip label container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb-label-inner - The thumb tooltip label inner element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "track - The track container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "steps - The track steps element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "inactive - The inactive element of the track." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "fill - The filled part of the track." + } + ] + } + ] + }, + "children": [ + { + "id": 53984, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a value change is committed on a thumb drag end or keyboard interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53985, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53986, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53987, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53980, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a value is changed via thumb drag or keyboard interaction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53981, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53982, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53983, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53967, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current value of the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53974, + "name": "stepDown", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53975, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "line": 64, + "character": 4 + } + ], + "signatures": [ + { + "id": 53976, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the value of the slider by " + }, + { + "kind": "code", + "text": "`stepDecrement * step`" + }, + { + "kind": "text", + "text": ", where " + }, + { + "kind": "code", + "text": "`stepDecrement`" + }, + { + "kind": "text", + "text": " defaults to 1." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "line": 64, + "character": 4 + } + ], + "parameters": [ + { + "id": 53977, + "name": "stepDecrement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional step decrement. If no parameter is passed, it defaults to 1." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53978, + "name": "stepDown", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decrements the value of the slider by " + }, + { + "kind": "code", + "text": "`stepDecrement * step`" + }, + { + "kind": "text", + "text": ", where " + }, + { + "kind": "code", + "text": "`stepDecrement`" + }, + { + "kind": "text", + "text": " defaults to 1." + } + ] + }, + "parameters": [ + { + "id": 53979, + "name": "stepDecrement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional step decrement. If no parameter is passed, it defaults to 1." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53968, + "name": "stepUp", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53969, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "line": 59, + "character": 4 + } + ], + "signatures": [ + { + "id": 53970, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the value of the slider by " + }, + { + "kind": "code", + "text": "`stepIncrement * step`" + }, + { + "kind": "text", + "text": ", where " + }, + { + "kind": "code", + "text": "`stepIncrement`" + }, + { + "kind": "text", + "text": " defaults to 1." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "line": 59, + "character": 4 + } + ], + "parameters": [ + { + "id": 53971, + "name": "stepIncrement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional step increment. If no parameter is passed, it defaults to 1." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53972, + "name": "stepUp", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Increments the value of the slider by " + }, + { + "kind": "code", + "text": "`stepIncrement * step`" + }, + { + "kind": "text", + "text": ", where " + }, + { + "kind": "code", + "text": "`stepIncrement`" + }, + { + "kind": "text", + "text": " defaults to 1." + } + ] + }, + "parameters": [ + { + "id": 53973, + "name": "stepIncrement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional step increment. If no parameter is passed, it defaults to 1." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53967 + ] + }, + { + "title": "Methods", + "children": [ + 53974, + 53968 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53984, + 53980 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53984, + 53980 + ] + }, + { + "title": "Methods", + "children": [ + 53974, + 53968 + ] + }, + { + "title": "Properties", + "children": [ + 53967 + ] + } + ], + "sources": [ + { + "fileName": "src/components/slider.ts", + "line": 26, + "character": 13 + }, + { + "fileName": "src/components/slider.ts", + "line": 37, + "character": 12 + } + ], + "signatures": [ + { + "id": 53961, + "name": "IgrSlider", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53910, + "name": "IgrSliderLabel", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allows formatting the values of the slider as string values.\nThe text content of the slider labels is used for thumb and tick labels." + } + ] + }, + "sources": [ + { + "fileName": "src/components/slider-label.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/slider-label.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 53914, + "name": "IgrSliderLabel", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53942, + "name": "IgrSnackbar", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A snackbar component is used to provide feedback about an operation\nby showing a brief message at the bottom of the screen." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot to render the snackbar content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "action - Renders the action part of the snackbar. Usually an interactive element (button)" + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the snackbar component." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "message - The snackbar message." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "action - The default snackbar action button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "action-container - The area holding the actions." + } + ] + } + ] + }, + "children": [ + { + "id": 53952, + "name": "onAction", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the snackbar action button is clicked." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53953, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53954, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53955, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53951, + "name": "actionText", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The snackbar action button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53951 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53952 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 53952 + ] + }, + { + "title": "Properties", + "children": [ + 53951 + ] + } + ], + "sources": [ + { + "fileName": "src/components/snackbar.ts", + "line": 18, + "character": 13 + }, + { + "fileName": "src/components/snackbar.ts", + "line": 30, + "character": 12 + } + ], + "signatures": [ + { + "id": 53946, + "name": "IgrSnackbar", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54192, + "name": "IgrStep", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The step component is used within the " + }, + { + "kind": "code", + "text": "`igc-stepper`" + }, + { + "kind": "text", + "text": " element and it holds the content of each step.\nIt also supports custom indicators, title and subtitle." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the content of the step." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "indicator - Renders the indicator of the step. By default, it displays the step index + 1." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders the title of the step." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "subtitle - Renders the subtitle of the step." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header-container - Wrapper of the step's " + }, + { + "kind": "code", + "text": "`header`" + }, + { + "kind": "text", + "text": " and its separators." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "disabled - Indicates a disabled state. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "complete-start - Indicates a complete state of the current step. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "complete-end - Indicates a complete state of the previous step. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "optional - Indicates an optional state. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "invalid - Indicates an invalid state. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "top - Indicates that the title should be above the indicator. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "bottom - Indicates that the title should be below the indicator. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "start - Indicates that the title should be before the indicator. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "end - Indicates that the title should be after the indicator. Applies to " + }, + { + "kind": "code", + "text": "`header-container`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - Wrapper of the step's " + }, + { + "kind": "code", + "text": "`indicator`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`text`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indicator - The indicator of the step." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "text - Wrapper of the step's " + }, + { + "kind": "code", + "text": "`title`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`subtitle`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "empty - Indicates that no title and subtitle has been provided to the step. Applies to " + }, + { + "kind": "code", + "text": "`text`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "title - The title of the step." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "subtitle - The subtitle of the step." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "body - Wrapper of the step's " + }, + { + "kind": "code", + "text": "`content`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - The steps " + }, + { + "kind": "code", + "text": "`content`" + }, + { + "kind": "text", + "text": "." + } + ] + } + ] + }, + "children": [ + { + "id": 54203, + "name": "active", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the step is activе." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54206, + "name": "complete", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the step is completed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54201, + "name": "contentBody", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 54205, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the step is interactable." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54200, + "name": "header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 54202, + "name": "invalid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the step is invalid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54204, + "name": "optional", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the step is optional." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54225, + "name": "isAccessible", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54203, + 54206, + 54201, + 54205, + 54200, + 54202, + 54204 + ] + }, + { + "title": "Accessors", + "children": [ + 54225 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 54225 + ] + }, + { + "title": "Properties", + "children": [ + 54203, + 54206, + 54201, + 54205, + 54200, + 54202, + 54204 + ] + } + ], + "sources": [ + { + "fileName": "src/components/step.ts", + "line": 36, + "character": 13 + }, + { + "fileName": "src/components/step.ts", + "line": 43, + "character": 12 + } + ], + "signatures": [ + { + "id": 54196, + "name": "IgrStep", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54227, + "name": "IgrStepper", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "IgxStepper provides a wizard-like workflow by dividing content into logical steps." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the step components inside default slot." + } + ] + } + ] + }, + "children": [ + { + "id": 54272, + "name": "onActiveStepChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the active step is changed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54273, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54274, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54275, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54326, + "name": "IgcActiveStepChangedEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54268, + "name": "onActiveStepChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the active step is about to change." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54269, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54270, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54271, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54323, + "name": "IgcActiveStepChangingEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54244, + "name": "animationDuration", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The animation duration in either vertical or horizontal mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54241, + "name": "contentTop", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set whether the content is displayed above the steps." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54243, + "name": "horizontalAnimation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The animation type when in horizontal mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54441, + "name": "HorizontalTransitionAnimation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54240, + "name": "linear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set whether the stepper is linear." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54238, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the orientation of the stepper." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54463, + "name": "StepperOrientation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54237, + "name": "steps", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns all of the stepper's steps." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54192, + "name": "IgcStepComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 54239, + "name": "stepType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set the type of the steps." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54464, + "name": "StepperStepType", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54245, + "name": "titlePosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set the position of the steps title." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54465, + "name": "StepperTitlePosition", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54242, + "name": "verticalAnimation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The animation type when in vertical mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54466, + "name": "StepperVerticalAnimation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54246, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54247, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 88, + "character": 4 + } + ], + "signatures": [ + { + "id": 54248, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 88, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54249, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54250, + "name": "navigateTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the step at a given index." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54251, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 108, + "character": 4 + } + ], + "signatures": [ + { + "id": 54252, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the step at a given index." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 108, + "character": 4 + } + ], + "parameters": [ + { + "id": 54253, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54254, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the step at a given index." + } + ] + }, + "parameters": [ + { + "id": 54255, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54256, + "name": "next", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the next enabled step." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54257, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 110, + "character": 4 + } + ], + "signatures": [ + { + "id": 54258, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the next enabled step." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 110, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54259, + "name": "next", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the next enabled step." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54260, + "name": "prev", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the previous enabled step." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54261, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 112, + "character": 4 + } + ], + "signatures": [ + { + "id": 54262, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the previous enabled step." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 112, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54263, + "name": "prev", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Activates the previous enabled step." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54264, + "name": "reset", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resets the stepper to its initial state i.e. activates the first step." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54265, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 119, + "character": 4 + } + ], + "signatures": [ + { + "id": 54266, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resets the stepper to its initial state i.e. activates the first step." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The steps' content will not be automatically reset." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "line": 119, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54267, + "name": "reset", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Resets the stepper to its initial state i.e. activates the first step." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The steps' content will not be automatically reset." + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54244, + 54241, + 54243, + 54240, + 54238, + 54237, + 54239, + 54245, + 54242 + ] + }, + { + "title": "Methods", + "children": [ + 54246, + 54250, + 54256, + 54260, + 54264 + ] + }, + { + "title": "Set Signatures", + "children": [ + 54272, + 54268 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 54272, + 54268 + ] + }, + { + "title": "Methods", + "children": [ + 54246, + 54250, + 54256, + 54260, + 54264 + ] + }, + { + "title": "Properties", + "children": [ + 54244, + 54241, + 54243, + 54240, + 54238, + 54237, + 54239, + 54245, + 54242 + ] + }, + { + "title": "lifecycle", + "children": [ + 54246 + ] + } + ], + "sources": [ + { + "fileName": "src/components/stepper.ts", + "line": 13, + "character": 13 + }, + { + "fileName": "src/components/stepper.ts", + "line": 28, + "character": 12 + } + ], + "signatures": [ + { + "id": 54231, + "name": "IgrStepper", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54037, + "name": "IgrSwitch", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Similar to a checkbox, a switch controls the state of a single setting on or off." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- The switch label." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the switch." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "control - The switch input element." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "thumb - The position indicator of the switch." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The switch label." + } + ] + } + ] + }, + "children": [ + { + "id": 54046, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control's checked state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54047, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54048, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54049, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54314, + "name": "IgcCheckboxChangeEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + } + ], + "groups": [ + { + "title": "Set Signatures", + "children": [ + 54046 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 54046 + ] + } + ], + "sources": [ + { + "fileName": "src/components/switch.ts", + "line": 16, + "character": 13 + }, + { + "fileName": "src/components/switch.ts", + "line": 26, + "character": 12 + } + ], + "signatures": [ + { + "id": 54041, + "name": "IgrSwitch", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53989, + "name": "IgrTab", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A tab element slotted into an " + }, + { + "kind": "code", + "text": "`igc-tabs`" + }, + { + "kind": "text", + "text": " container." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the tab's content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "label - Renders the tab header's label." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders the tab header's prefix." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders the tab header's suffix." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tab-header - The header of a single tab." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - Tab header's label prefix." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content - Tab header's label slot container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - Tab header's label suffix." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "tab-body - Holds the body content of a single tab, only the body of the selected tab is visible." + } + ] + } + ] + }, + "children": [ + { + "id": 53999, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the tab is disabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53997, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tab item label." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53998, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the tab is selected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53999, + 53997, + 53998 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 53999, + 53997, + 53998 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tab.ts", + "line": 18, + "character": 13 + }, + { + "fileName": "src/components/tab.ts", + "line": 25, + "character": 12 + } + ], + "signatures": [ + { + "id": 53993, + "name": "IgrTab", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54005, + "name": "IgrTabs", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\n\nThe " + }, + { + "kind": "code", + "text": "`<igc-tabs>`" + }, + { + "kind": "text", + "text": " component allows the user to navigate between multiple " + }, + { + "kind": "code", + "text": "`<igc-tab>`" + }, + { + "kind": "text", + "text": " elements.\nIt supports keyboard navigation and provides API methods to control the selected tab." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the " + }, + { + "kind": "code", + "text": "`IgcTabComponents`" + }, + { + "kind": "text", + "text": " inside default slot." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "start-scroll-button - The start scroll button displayed when the tabs overflow." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "end-scroll-button - The end scroll button displayed when the tabs overflow." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "selected-indicator - The indicator that shows which tab is selected." + } + ] + } + ] + }, + "children": [ + { + "id": 54032, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the selected tab changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54033, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54034, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54035, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53989, + "name": "IgcTabComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54015, + "name": "activation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines the tab activation. When set to auto,\nthe tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\nand the corresponding panel is displayed.\nWhen set to manual, the tab is only focused. The selection happens after pressing Space or Enter." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54467, + "name": "TabsActivation", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54014, + "name": "alignment", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the alignment for the tab headers" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54468, + "name": "TabsAlignment", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54017, + "name": "selected", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the currently selected tab label or IDREF if no label property is set." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54016, + "name": "tabs", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the direct `igc-tab` elements that are children of this element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53989, + "name": "IgcTabComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 54022, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the specified tab and displays the corresponding panel." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54023, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "line": 78, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "line": 79, + "character": 4 + } + ], + "signatures": [ + { + "id": 54024, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the specified tab and displays the corresponding panel." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "line": 78, + "character": 4 + } + ], + "parameters": [ + { + "id": 54025, + "name": "id", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 54026, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the specified tab and displays the corresponding panel." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "line": 79, + "character": 4 + } + ], + "parameters": [ + { + "id": 54027, + "name": "ref", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 53989, + "name": "IgcTabComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54028, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the specified tab and displays the corresponding panel." + } + ] + }, + "parameters": [ + { + "id": 54029, + "name": "id", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 54030, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects the specified tab and displays the corresponding panel." + } + ] + }, + "parameters": [ + { + "id": 54031, + "name": "ref", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 53989, + "name": "IgcTabComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54015, + 54014 + ] + }, + { + "title": "Accessors", + "children": [ + 54017, + 54016 + ] + }, + { + "title": "Methods", + "children": [ + 54022 + ] + }, + { + "title": "Set Signatures", + "children": [ + 54032 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 54017, + 54016 + ] + }, + { + "title": "Events", + "children": [ + 54032 + ] + }, + { + "title": "Methods", + "children": [ + 54022 + ] + }, + { + "title": "Properties", + "children": [ + 54015, + 54014 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tabs.ts", + "line": 18, + "character": 13 + }, + { + "fileName": "src/components/tabs.ts", + "line": 28, + "character": 12 + } + ], + "signatures": [ + { + "id": 54009, + "name": "IgrTabs", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52820, + "name": "IgrTextarea", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "This element represents a multi-line plain-text editing control,\nuseful when you want to allow users to enter a sizeable amount of free-form text,\nfor example a comment on a review or feedback form." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Text content from the default slot will be used as the value of the component." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "prefix - Renders content before the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "suffix - Renders content after input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "helper-text - Renders content below the input." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "value-missing - Renders content when the required validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "too-long - Renders content when the maxlength validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "too-short - Renders content when the minlength validation fails." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "custom-error - Renders content when setCustomValidity(message) is set." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "invalid - Renders content when the component is in invalid state (validity.valid = false)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "container - The main wrapper that holds all main input elements of the textarea." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "input - The native input element of the igc-textarea." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The native label element of the igc-textarea." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "prefix - The prefix wrapper of the igc-textarea." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "suffix - The suffix wrapper of the igc-textarea." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "helper-text - The helper text wrapper of the igc-textarea." + } + ] + } + ] + }, + "children": [ + { + "id": 52887, + "name": "onChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the a change to the control value is committed by the user." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52888, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52889, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52890, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52883, + "name": "onInput", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the control receives user input." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52884, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52885, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52886, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52831, + "name": "autocapitalize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize)." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52830, + "name": "autocomplete", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,\nas well as guidance to the browser as to the type of information expected in the field.\nRefer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52832, + "name": "inputMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52833, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The label for the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52834, + "name": "maxLength", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The maximum number of characters (UTF-16 code units) that the user can enter.\nIf this value isn't specified, the user can enter an unlimited number of characters." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52835, + "name": "minLength", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The minimum number of characters (UTF-16 code units) required that the user should enter." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52836, + "name": "outlined", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the control will have outlined appearance." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52837, + "name": "placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The placeholder attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52838, + "name": "readOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Makes the control a readonly field." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52839, + "name": "resize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether the control can be resized.\nWhen " + }, + { + "kind": "code", + "text": "`auto`" + }, + { + "kind": "text", + "text": " is set, the control will try to expand and fit its content." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54469, + "name": "TextareaResize", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52840, + "name": "rows", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The number of visible text lines for the control. If it is specified, it must be a positive integer.\nIf it is not specified, the default value is 2." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52842, + "name": "spellcheck", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether the element may be checked for spelling errors." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52844, + "name": "validateOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables validation rules to be evaluated without restricting user input. This applies to the " + }, + { + "kind": "code", + "text": "`maxLength`" + }, + { + "kind": "text", + "text": " property\nwhen it is defined." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52841, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value of the component" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52843, + "name": "wrap", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates how the control should wrap the value for form submission.\nRefer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\nfor explanation of the available values." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "off" + }, + { + "type": "literal", + "value": "hard" + }, + { + "type": "literal", + "value": "soft" + } + ] + } + }, + { + "id": 52871, + "name": "scrollTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52872, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 172, + "character": 4 + }, + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 173, + "character": 4 + } + ], + "signatures": [ + { + "id": 52873, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo)" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 172, + "character": 4 + } + ], + "parameters": [ + { + "id": 52874, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "ScrollToOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 52875, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 173, + "character": 4 + } + ], + "parameters": [ + { + "id": 52876, + "name": "x", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52877, + "name": "y", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52878, + "name": "scrollTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo)" + } + ] + }, + "parameters": [ + { + "id": 52879, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "ScrollToOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + }, + { + "id": 52880, + "name": "scrollTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 52881, + "name": "x", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52882, + "name": "y", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52845, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all text within the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52846, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 167, + "character": 4 + } + ], + "signatures": [ + { + "id": 52847, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all text within the control." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 167, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52848, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all text within the control." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52859, + "name": "setRangeText", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Replaces the selected text in the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52860, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 171, + "character": 4 + } + ], + "signatures": [ + { + "id": 52861, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Replaces the selected text in the control." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 171, + "character": 4 + } + ], + "parameters": [ + { + "id": 52862, + "name": "replacement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52863, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52864, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52865, + "name": "selectMode", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54444, + "name": "RangeTextSelectMode", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52866, + "name": "setRangeText", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Replaces the selected text in the control." + } + ] + }, + "parameters": [ + { + "id": 52867, + "name": "replacement", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52868, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52869, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52870, + "name": "selectMode", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54444, + "name": "RangeTextSelectMode", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52849, + "name": "setSelectionRange", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the text selection range of the control" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52850, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 169, + "character": 4 + } + ], + "signatures": [ + { + "id": 52851, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the text selection range of the control" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "line": 169, + "character": 4 + } + ], + "parameters": [ + { + "id": 52852, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52853, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52854, + "name": "direction", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54445, + "name": "SelectionRangeDirection", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52855, + "name": "setSelectionRange", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the text selection range of the control" + } + ] + }, + "parameters": [ + { + "id": 52856, + "name": "start", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52857, + "name": "end", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52858, + "name": "direction", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 54445, + "name": "SelectionRangeDirection", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52831, + 52830, + 52832, + 52833, + 52834, + 52835, + 52836, + 52837, + 52838, + 52839, + 52840, + 52842, + 52844, + 52841, + 52843 + ] + }, + { + "title": "Methods", + "children": [ + 52871, + 52845, + 52859, + 52849 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52887, + 52883 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52887, + 52883 + ] + }, + { + "title": "Methods", + "children": [ + 52871, + 52845, + 52859, + 52849 + ] + }, + { + "title": "Properties", + "children": [ + 52831, + 52830, + 52832, + 52833, + 52834, + 52835, + 52836, + 52837, + 52838, + 52839, + 52840, + 52842, + 52844, + 52841, + 52843 + ] + } + ], + "sources": [ + { + "fileName": "src/components/textarea.ts", + "line": 29, + "character": 13 + }, + { + "fileName": "src/components/textarea.ts", + "line": 42, + "character": 12 + } + ], + "signatures": [ + { + "id": 52824, + "name": "IgrTextarea", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53002, + "name": "IgrTile", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tile component is used within the " + }, + { + "kind": "code", + "text": "`igc-tile-manager`" + }, + { + "kind": "text", + "text": " as a container\nfor displaying various types of information." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot for the tile's content." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "title - Renders the title of the tile header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "maximize-action - Renders the maximize action element of the tile header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "fullscreen-action - Renders the fullscreen action element of the tile header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "actions - Renders items after the default actions in the tile header." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "side-adorner - Renders the side resize handle of the tile." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "corner-adorner - Renders the corner resize handle of the tile." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "bottom-adorner - Renders the bottom resize handle of the tile." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The wrapper for the entire tile content, header and content." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "header - The container for the tile header, including title and actions." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "title - The title container of the tile." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "actions - The actions container of the tile header." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "content-container - The container wrapping the tile’s main content." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "trigger-side - The part for the side adorner of the encapsulated resize element in the tile." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "trigger - The part for the corner adorner of the encapsulated resize element in the tile." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile." + } + ] + } + ] + }, + "children": [ + { + "id": 53048, + "name": "onTileDragCancel", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when a tile drag operation is canceled by the user." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53049, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53050, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53051, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53044, + "name": "onTileDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when a drag operation with a tile is successfully completed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53045, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53046, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53047, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53040, + "name": "onTileDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when a drag operation on a tile is about to begin. Cancelable." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53041, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53042, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53043, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53032, + "name": "onTileFullscreen", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when tile the fullscreen state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53033, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53034, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53035, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54311, + "name": "IgcTileChangeStateEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53036, + "name": "onTileMaximize", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when tile the maximize state changes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53037, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53038, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53039, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54311, + "name": "IgcTileChangeStateEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53060, + "name": "onTileResizeCancel", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when a resize operation on a tile is canceled by the user." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53061, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53062, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53063, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53056, + "name": "onTileResizeEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when a resize operation on a tile is successfully completed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53057, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53058, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53059, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53052, + "name": "onTileResizeStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Fired when a resize operation on a tile is about to begin. Cancelable." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53053, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53054, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53055, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53018, + "name": "colSpan", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The number of columns the tile will span." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53020, + "name": "colStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The starting column for the tile." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53025, + "name": "disableFullscreen", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to disable the rendering of the tile " + }, + { + "kind": "code", + "text": "`fullscreen-action`" + }, + { + "kind": "text", + "text": " slot and its\ndefault fullscreen action button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53026, + "name": "disableMaximize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to disable the rendering of the tile " + }, + { + "kind": "code", + "text": "`maximize-action`" + }, + { + "kind": "text", + "text": " slot and its\ndefault maximize action button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53024, + "name": "disableResize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether to disable tile resize behavior regardless\not its tile manager parent settings." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53023, + "name": "maximized", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the tile occupies all available space within the layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 53027, + "name": "position", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the tile's visual position in the layout.\nCorresponds to the CSS `order` property." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53019, + "name": "rowSpan", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The number of rows the tile will span." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53021, + "name": "rowStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The starting row for the tile." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53022, + "name": "fullscreen", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the tile occupies the whole screen." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53018, + 53020, + 53025, + 53026, + 53024, + 53023, + 53027, + 53019, + 53021 + ] + }, + { + "title": "Accessors", + "children": [ + 53022 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53048, + 53044, + 53040, + 53032, + 53036, + 53060, + 53056, + 53052 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 53022 + ] + }, + { + "title": "Events", + "children": [ + 53048, + 53044, + 53040, + 53032, + 53036, + 53060, + 53056, + 53052 + ] + }, + { + "title": "Properties", + "children": [ + 53018, + 53020, + 53025, + 53026, + 53024, + 53023, + 53027, + 53019, + 53021 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tile.ts", + "line": 35, + "character": 13 + }, + { + "fileName": "src/components/tile.ts", + "line": 68, + "character": 12 + } + ], + "signatures": [ + { + "id": 53006, + "name": "IgrTile", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 53065, + "name": "IgrTileManager", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot for the tile manager. Only " + }, + { + "kind": "code", + "text": "`igc-tile`" + }, + { + "kind": "text", + "text": " elements will be projected inside the CSS grid container." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The tile manager CSS Grid container." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--column-count - The number of columns for the tile manager. The " + }, + { + "kind": "code", + "text": "`column-count`" + }, + { + "kind": "text", + "text": " attribute sets this variable." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--min-col-width - The minimum size of the columns in the tile-manager. The " + }, + { + "kind": "code", + "text": "`min-column-width`" + }, + { + "kind": "text", + "text": " attribute sets this variable." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--min-row-height - The minimum size of the rows in the tile-manager. The " + }, + { + "kind": "code", + "text": "`min-row-height`" + }, + { + "kind": "text", + "text": " attribute sets this variable." + } + ] + }, + { + "tag": "@cssproperty", + "content": [ + { + "kind": "text", + "text": "--grid-gap - The gap size of the underlying CSS grid container. The " + }, + { + "kind": "code", + "text": "`gap`" + }, + { + "kind": "text", + "text": " attributes sts this variable." + } + ] + } + ] + }, + "children": [ + { + "id": 53114, + "name": "onTileDragCancel", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53115, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53116, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53117, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53110, + "name": "onTileDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53111, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53112, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53113, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53106, + "name": "onTileDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53107, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53108, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53109, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53098, + "name": "onTileFullscreen", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53099, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53100, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53101, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54311, + "name": "IgcTileChangeStateEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53102, + "name": "onTileMaximize", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53103, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53104, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53105, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54311, + "name": "IgcTileChangeStateEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53126, + "name": "onTileResizeCancel", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53127, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53128, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53129, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53122, + "name": "onTileResizeEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53123, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53124, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53125, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53118, + "name": "onTileResizeStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53119, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 53120, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 53121, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 53083, + "name": "columnCount", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the number of columns for the tile manager.\nSetting value <= than zero will trigger a responsive layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 53082, + "name": "dragMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether drag and drop operations are enabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54470, + "name": "TileManagerDragMode", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53086, + "name": "gap", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the gap size between tiles in the tile manager." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53084, + "name": "minColumnWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the minimum width for a column unit in the tile manager." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53085, + "name": "minRowHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the minimum height for a row unit in the tile manager." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 53081, + "name": "resizeMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether resize operations are enabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54471, + "name": "TileManagerResizeMode", + "package": "igniteui-webcomponents" + } + }, + { + "id": 53087, + "name": "tiles", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the tiles sorted by their position in the layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 53092, + "name": "loadLayout", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores a previously serialized state produced by `saveLayout`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53093, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "line": 100, + "character": 4 + } + ], + "signatures": [ + { + "id": 53094, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores a previously serialized state produced by " + }, + { + "kind": "code", + "text": "`saveLayout`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "line": 100, + "character": 4 + } + ], + "parameters": [ + { + "id": 53095, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 53096, + "name": "loadLayout", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores a previously serialized state produced by " + }, + { + "kind": "code", + "text": "`saveLayout`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "parameters": [ + { + "id": 53097, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 53088, + "name": "saveLayout", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the properties of the current tile collections as a JSON payload." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 53089, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "line": 96, + "character": 4 + } + ], + "signatures": [ + { + "id": 53090, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the properties of the current tile collections as a JSON payload." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The content of the tiles is not serialized or saved. Only tile properties\nare serialized." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "line": 96, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + } + }, + "signatures": [ + { + "id": 53091, + "name": "saveLayout", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the properties of the current tile collections as a JSON payload." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The content of the tiles is not serialized or saved. Only tile properties\nare serialized." + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 53083, + 53082, + 53086, + 53084, + 53085, + 53081 + ] + }, + { + "title": "Accessors", + "children": [ + 53087 + ] + }, + { + "title": "Methods", + "children": [ + 53092, + 53088 + ] + }, + { + "title": "Set Signatures", + "children": [ + 53114, + 53110, + 53106, + 53098, + 53102, + 53126, + 53122, + 53118 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 53087 + ] + }, + { + "title": "Events", + "children": [ + 53114, + 53110, + 53106, + 53098, + 53102, + 53126, + 53122, + 53118 + ] + }, + { + "title": "Methods", + "children": [ + 53092, + 53088 + ] + }, + { + "title": "Properties", + "children": [ + 53083, + 53082, + 53086, + 53084, + 53085, + 53081 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tile-manager.ts", + "line": 16, + "character": 13 + }, + { + "fileName": "src/components/tile-manager.ts", + "line": 49, + "character": 12 + } + ], + "signatures": [ + { + "id": 53069, + "name": "IgrTileManager", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52715, + "name": "IgrToast", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A toast component is used to show a notification" + } + ], + "blockTags": [ + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The base wrapper of the toast." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "src/components/toast.ts", + "line": 10, + "character": 13 + }, + { + "fileName": "src/components/toast.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 52719, + "name": "IgrToast", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52619, + "name": "IgrToggleButton", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The " + }, + { + "kind": "code", + "text": "`igc-toggle-button`" + }, + { + "kind": "text", + "text": " wraps a native button element and exposes additional " + }, + { + "kind": "code", + "text": "`value`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`selected`" + }, + { + "kind": "text", + "text": " properties.\nIt is used in the context of an " + }, + { + "kind": "code", + "text": "`igc-button-group`" + }, + { + "kind": "text", + "text": " to facilitate the creation of group/toolbar like UX behaviors." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "Renders - the label/content of the button." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "toggle - The native button element." + } + ] + } + ] + }, + "children": [ + { + "id": 52629, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the button is disabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52628, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the button is selected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52627, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value attribute of the control." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52636, + "name": "blur", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52637, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "line": 37, + "character": 4 + } + ], + "signatures": [ + { + "id": 52638, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the button." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "line": 37, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52639, + "name": "blur", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes focus from the button." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52640, + "name": "click", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Simulates a mouse click on the element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52641, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "line": 39, + "character": 4 + } + ], + "signatures": [ + { + "id": 52642, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Simulates a mouse click on the element." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "line": 39, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52643, + "name": "click", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Simulates a mouse click on the element." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 52630, + "name": "focus", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the button." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52631, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "line": 35, + "character": 4 + } + ], + "signatures": [ + { + "id": 52632, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the button." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "line": 35, + "character": 4 + } + ], + "parameters": [ + { + "id": 52633, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 52634, + "name": "focus", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets focus on the button." + } + ] + }, + "parameters": [ + { + "id": 52635, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": -1, + "name": "FocusOptions", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52629, + 52628, + 52627 + ] + }, + { + "title": "Methods", + "children": [ + 52636, + 52640, + 52630 + ] + } + ], + "categories": [ + { + "title": "Methods", + "children": [ + 52636, + 52640, + 52630 + ] + }, + { + "title": "Properties", + "children": [ + 52629, + 52628, + 52627 + ] + } + ], + "sources": [ + { + "fileName": "src/components/toggle-button.ts", + "line": 12, + "character": 13 + }, + { + "fileName": "src/components/toggle-button.ts", + "line": 19, + "character": 12 + } + ], + "signatures": [ + { + "id": 52623, + "name": "IgrToggleButton", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 52724, + "name": "IgrTooltip", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).\nIt offers features such as placement customization, delays, sticky mode, and animations." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Default slot of the tooltip component." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "close-button - Slot for custom sticky-mode close action (e.g., an icon/button)." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "base - The wrapping container of the tooltip content." + } + ] + } + ] + }, + "children": [ + { + "id": 52774, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the tooltip has been fully removed from view." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52775, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52776, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52777, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52770, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted before the tooltip begins to close. Can be canceled to prevent closing." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52771, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52772, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52773, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52766, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted after the tooltip has successfully opened and is visible." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52767, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52768, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52769, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52762, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted before the tooltip begins to open. Can be canceled to prevent opening." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52763, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 52764, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 52765, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 52741, + "name": "anchor", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An element instance or an IDREF to use as the anchor for the tooltip." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "Element", + "package": "@types/react" + } + ] + } + }, + { + "id": 52737, + "name": "disableArrow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to disable the rendering of the arrow indicator for the tooltip." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52745, + "name": "hideDelay", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies the number of milliseconds that should pass before hiding the tooltip." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52743, + "name": "hideTriggers", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Which event triggers will hide the tooltip.\nExpects a comma separate string of different event triggers." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52746, + "name": "message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies a plain text as tooltip content." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52739, + "name": "offset", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The offset of the tooltip from the anchor in pixels." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52736, + "name": "open", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the tooltip is showing." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52740, + "name": "placement", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Where to place the floating element relative to the parent anchor element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54420, + "name": "PopoverPlacement", + "package": "igniteui-webcomponents" + } + }, + { + "id": 52744, + "name": "showDelay", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies the number of milliseconds that should pass before showing the tooltip." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 52742, + "name": "showTriggers", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Which event triggers will show the tooltip.\nExpects a comma separate string of different event triggers." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 52747, + "name": "sticky", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies if the tooltip remains visible until the user closes it via the close button or Esc key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52738, + "name": "withArrow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether to render an arrow indicator for the tooltip." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 52754, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the tooltip if not already hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52755, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "line": 152, + "character": 4 + } + ], + "signatures": [ + { + "id": 52756, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the tooltip if not already hidden." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "line": 152, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52757, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hides the tooltip if not already hidden." + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52748, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the tooltip if not already showing.\nIf a target is provided, sets it as a transient anchor." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52749, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "line": 150, + "character": 4 + } + ], + "signatures": [ + { + "id": 52750, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the tooltip if not already showing.\n If a target is provided, sets it as a transient anchor." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "line": 150, + "character": 4 + } + ], + "parameters": [ + { + "id": 52751, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "Element", + "package": "@types/react" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52752, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Shows the tooltip if not already showing.\n If a target is provided, sets it as a transient anchor." + } + ] + }, + "parameters": [ + { + "id": 52753, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "reference", + "target": -1, + "name": "Element", + "package": "@types/react" + } + ] + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 52758, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the tooltip between shown/hidden state" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 52759, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "line": 154, + "character": 4 + } + ], + "signatures": [ + { + "id": 52760, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the tooltip between shown/hidden state" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "line": 154, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + }, + "signatures": [ + { + "id": 52761, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the tooltip between shown/hidden state" + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 52741, + 52737, + 52745, + 52743, + 52746, + 52739, + 52736, + 52740, + 52744, + 52742, + 52747, + 52738 + ] + }, + { + "title": "Methods", + "children": [ + 52754, + 52748, + 52758 + ] + }, + { + "title": "Set Signatures", + "children": [ + 52774, + 52770, + 52766, + 52762 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 52774, + 52770, + 52766, + 52762 + ] + }, + { + "title": "Methods", + "children": [ + 52754, + 52748, + 52758 + ] + }, + { + "title": "Properties", + "children": [ + 52741, + 52737, + 52745, + 52743, + 52746, + 52739, + 52736, + 52740, + 52744, + 52742, + 52747, + 52738 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tooltip.ts", + "line": 18, + "character": 13 + }, + { + "fileName": "src/components/tooltip.ts", + "line": 39, + "character": 12 + } + ], + "signatures": [ + { + "id": 52728, + "name": "IgrTooltip", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54113, + "name": "IgrTree", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tree allows users to represent hierarchical data in a tree-view structure,\nmaintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders the tree items inside default slot." + } + ] + } + ] + }, + "children": [ + { + "id": 54187, + "name": "onActiveItem", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the tree's" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54188, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54189, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54190, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54171, + "name": "onItemCollapsed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when tree item is collapsed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54172, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54173, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54174, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54175, + "name": "onItemCollapsing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when tree item is about to collapse." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54176, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54177, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54178, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54179, + "name": "onItemExpanded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when tree item is expanded." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54180, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54181, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54182, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54183, + "name": "onItemExpanding", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when tree item is about to expand." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54184, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54185, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54186, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54167, + "name": "onSelection", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when item selection is changing, before the selection completes." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54168, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 54169, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 54170, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54328, + "name": "IgcTreeSelectionEventArgs", + "package": "igniteui-webcomponents" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 54131, + "name": "selection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The selection state of the tree." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54448, + "name": "TreeSelection", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54129, + "name": "singleBranchExpand", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether a single or multiple of a parent's child items can be expanded." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54130, + "name": "toggleNodeOnClick", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether clicking over nodes will change their expanded state or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54136, + "name": "items", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns all of the tree's items." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 54161, + "name": "collapse", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all of the passed items.\nIf no items are passed, collapses ALL items." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54162, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 70, + "character": 4 + } + ], + "signatures": [ + { + "id": 54163, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all of the passed items.\nIf no items are passed, collapses ALL items." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 70, + "character": 4 + } + ], + "parameters": [ + { + "id": 54164, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54165, + "name": "collapse", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all of the passed items.\nIf no items are passed, collapses ALL items." + } + ] + }, + "parameters": [ + { + "id": 54166, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54132, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54133, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 51, + "character": 4 + } + ], + "signatures": [ + { + "id": 54134, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 51, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54135, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54149, + "name": "deselect", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54150, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 60, + "character": 4 + } + ], + "signatures": [ + { + "id": 54151, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 60, + "character": 4 + } + ], + "parameters": [ + { + "id": 54152, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54153, + "name": "deselect", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection." + } + ] + }, + "parameters": [ + { + "id": 54154, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54155, + "name": "expand", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all of the passed items.\nIf no items are passed, expands ALL items." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54156, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 65, + "character": 4 + } + ], + "signatures": [ + { + "id": 54157, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all of the passed items.\nIf no items are passed, expands ALL items." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 65, + "character": 4 + } + ], + "parameters": [ + { + "id": 54158, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54159, + "name": "expand", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all of the passed items.\nIf no items are passed, expands ALL items." + } + ] + }, + "parameters": [ + { + "id": 54160, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54137, + "name": "expandToItem", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "Object" + }, + "signatures": [ + { + "id": 54141, + "name": "expandToItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [], + "modifierTags": [ + "@private" + ] + }, + "parameters": [ + { + "id": 54142, + "name": "item", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54143, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select all items if the items collection is empty. Otherwise, select the items in the items collection." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54144, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 58, + "character": 4 + } + ], + "signatures": [ + { + "id": 54145, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select all items if the items collection is empty. Otherwise, select the items in the items collection." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "line": 58, + "character": 4 + } + ], + "parameters": [ + { + "id": 54146, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54147, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select all items if the items collection is empty. Otherwise, select the items in the items collection." + } + ] + }, + "parameters": [ + { + "id": 54148, + "name": "items", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54131, + 54129, + 54130 + ] + }, + { + "title": "Accessors", + "children": [ + 54136 + ] + }, + { + "title": "Methods", + "children": [ + 54161, + 54132, + 54149, + 54155, + 54137, + 54143 + ] + }, + { + "title": "Set Signatures", + "children": [ + 54187, + 54171, + 54175, + 54179, + 54183, + 54167 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 54136 + ] + }, + { + "title": "Events", + "children": [ + 54187, + 54171, + 54175, + 54179, + 54183, + 54167 + ] + }, + { + "title": "Methods", + "children": [ + 54161, + 54132, + 54149, + 54155, + 54137, + 54143 + ] + }, + { + "title": "Properties", + "children": [ + 54131, + 54129, + 54130 + ] + }, + { + "title": "lifecycle", + "children": [ + 54132 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tree.ts", + "line": 18, + "character": 13 + }, + { + "fileName": "src/components/tree.ts", + "line": 45, + "character": 12 + } + ], + "signatures": [ + { + "id": 54117, + "name": "IgrTree", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54051, + "name": "IgrTreeItem", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tree-item component represents a child item of the tree component or another tree item." + } + ], + "blockTags": [ + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "- Renders nested tree-item component." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "label - Renders the tree item container." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "indicator - Renders the expand indicator container." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "loading - Renders the tree item loading indicator container." + } + ] + }, + { + "tag": "@slot", + "content": [ + { + "kind": "text", + "text": "indentation - Renders the container (by default the space) before the tree item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "wrapper - The wrapper for the tree item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "selected - Indicates selected state. Applies to " + }, + { + "kind": "code", + "text": "`wrapper`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "focused - Indicates focused state. Applies to " + }, + { + "kind": "code", + "text": "`wrapper`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "active - Indicates an active state. Applies to " + }, + { + "kind": "code", + "text": "`wrapper`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "indicator - The expand indicator of the tree item." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "label - The tree item content." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "text - The tree item displayed text." + } + ] + }, + { + "tag": "@csspart", + "content": [ + { + "kind": "text", + "text": "select - The checkbox of the tree item when selection is enabled." + } + ] + } + ] + }, + "children": [ + { + "id": 54068, + "name": "active", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Marks the item as the tree's active item." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54069, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54067, + "name": "expanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tree item expansion state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54066, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tree item label." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54064, + "name": "level", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The depth of the item, relative to the root." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54071, + "name": "loading", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "To be used for load-on-demand scenarios in order to specify whether the item is loading data." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54060, + "name": "parent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The parent item of the current tree item (if any)" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 54070, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tree item selection state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54059, + "name": "tree", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A reference to the tree the item is a part of." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 54113, + "name": "IgcTreeComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + }, + { + "id": 54072, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value entry that the tree item is visualizing. Required for searching through items." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 54081, + "name": "path", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The full path to the tree item, starting from the top-most ancestor." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + }, + { + "id": 54108, + "name": "collapse", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the tree item." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54109, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 131, + "character": 4 + } + ], + "signatures": [ + { + "id": 54110, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the tree item." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 131, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54111, + "name": "collapse", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the tree item." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54096, + "name": "collapseWithEvent", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "Object" + }, + "signatures": [ + { + "id": 54099, + "name": "collapseWithEvent", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the tree item." + } + ], + "modifierTags": [ + "@private" + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 54073, + "name": "connectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54074, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 90, + "character": 4 + } + ], + "signatures": [ + { + "id": 54075, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 90, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54076, + "name": "connectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is added to the document's DOM.\n\nIn " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " you should setup tasks that should only occur when\nthe element is connected to the document. The most common of these is\nadding event listeners to nodes external to the element, like a keydown\nevent handler added to the window.\n\n" + }, + { + "kind": "code", + "text": "```ts\nconnectedCallback() {\n super.connectedCallback();\n addEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nTypically, anything done in " + }, + { + "kind": "code", + "text": "`connectedCallback()`" + }, + { + "kind": "text", + "text": " should be undone when the\nelement is disconnected, in " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54077, + "name": "disconnectedCallback", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54078, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 91, + "character": 4 + } + ], + "signatures": [ + { + "id": 54079, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is removed from the document's DOM.\n\nThis callback is the main signal to the element that it may no longer be\nused. " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": " should ensure that nothing is holding a\nreference to the element (such as event listeners added to nodes external\nto the element), so that it is free to be garbage collected.\n\n" + }, + { + "kind": "code", + "text": "```ts\ndisconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nAn element may be re-connected after being disconnected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 91, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54080, + "name": "disconnectedCallback", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Invoked when the component is removed from the document's DOM.\n\nThis callback is the main signal to the element that it may no longer be\nused. " + }, + { + "kind": "code", + "text": "`disconnectedCallback()`" + }, + { + "kind": "text", + "text": " should ensure that nothing is holding a\nreference to the element (such as event listeners added to nodes external\nto the element), so that it is free to be garbage collected.\n\n" + }, + { + "kind": "code", + "text": "```ts\ndisconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this._handleKeydown);\n}\n```" + }, + { + "kind": "text", + "text": "\n\nAn element may be re-connected after being disconnected." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "lifecycle" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54104, + "name": "expand", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the tree item." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54105, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 129, + "character": 4 + } + ], + "signatures": [ + { + "id": 54106, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the tree item." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 129, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54107, + "name": "expand", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the tree item." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54092, + "name": "expandWithEvent", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "Object" + }, + "signatures": [ + { + "id": 54095, + "name": "expandWithEvent", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the tree item." + } + ], + "modifierTags": [ + "@private" + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 54082, + "name": "getChildren", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a collection of child items.\nIf the parameter value is true returns all tree item's direct children,\notherwise - only the direct children." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54083, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 113, + "character": 4 + } + ], + "signatures": [ + { + "id": 54084, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a collection of child items.\nIf the parameter value is true returns all tree item's direct children,\notherwise - only the direct children." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 113, + "character": 4 + } + ], + "parameters": [ + { + "id": 54085, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54086, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54087, + "name": "flatten", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 114, + "character": 8 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54087 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 113, + "character": 26 + } + ] + } + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ] + } + }, + "signatures": [ + { + "id": 54088, + "name": "getChildren", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a collection of child items.\nIf the parameter value is true returns all tree item's direct children,\notherwise - only the direct children." + } + ] + }, + "parameters": [ + { + "id": 54089, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54090, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54091, + "name": "flatten", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 114, + "character": 8 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54091 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 113, + "character": 26 + } + ] + } + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ] + }, + { + "id": 54100, + "name": "toggle", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles tree item expansion state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 54101, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 127, + "character": 4 + } + ], + "signatures": [ + { + "id": 54102, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles tree item expansion state." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "line": 127, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 54103, + "name": "toggle", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles tree item expansion state." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54068, + 54069, + 54067, + 54066, + 54064, + 54071, + 54060, + 54070, + 54059, + 54072 + ] + }, + { + "title": "Accessors", + "children": [ + 54081 + ] + }, + { + "title": "Methods", + "children": [ + 54108, + 54096, + 54073, + 54077, + 54104, + 54092, + 54082, + 54100 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 54081 + ] + }, + { + "title": "Methods", + "children": [ + 54108, + 54096, + 54073, + 54077, + 54104, + 54092, + 54082, + 54100 + ] + }, + { + "title": "Properties", + "children": [ + 54068, + 54069, + 54067, + 54066, + 54064, + 54071, + 54060, + 54070, + 54059, + 54072 + ] + }, + { + "title": "lifecycle", + "children": [ + 54073, + 54077 + ] + } + ], + "sources": [ + { + "fileName": "src/components/tree-item.ts", + "line": 22, + "character": 13 + }, + { + "fileName": "src/components/tree-item.ts", + "line": 29, + "character": 12 + } + ], + "signatures": [ + { + "id": 54055, + "name": "IgrTreeItem", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 54505, + "name": "ChatAttachmentRenderContext", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The context object for renderers that deal with a specific attachment within a message.\nIt extends the message context with the attachment data." + } + ] + }, + "children": [ + { + "id": 54506, + "name": "attachment", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The specific attachment being rendered." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 281, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54508, + "name": "instance", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The instance of the IgcChatComponent." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 247, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 52892, + "name": "IgcChatComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + }, + "inheritedFrom": { + "type": "reference", + "target": 54504, + "name": "ChatMessageRenderContext.instance" + } + }, + { + "id": 54507, + "name": "message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The specific chat message being rendered." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 271, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54335, + "name": "IgcChatMessage", + "package": "igniteui-webcomponents" + }, + "inheritedFrom": { + "type": "reference", + "target": 54503, + "name": "ChatMessageRenderContext.message" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54506, + 54508, + 54507 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 277, + "character": 17 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext", + "package": "igniteui-webcomponents" + } + ] + }, + { + "id": 54498, + "name": "ChatInputRenderContext", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The context object for renderers that deal with the chat input area.\nIt extends the base context with input-specific properties." + } + ] + }, + "children": [ + { + "id": 54499, + "name": "attachments", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The list of attachments currently in the input area." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 257, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 54501, + "name": "instance", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The instance of the IgcChatComponent." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 247, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 52892, + "name": "IgcChatComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + }, + "inheritedFrom": { + "type": "reference", + "target": 54497, + "name": "ChatRenderContext.instance" + } + }, + { + "id": 54500, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current value of the input field." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 261, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54499, + 54501, + 54500 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 253, + "character": 17 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ] + }, + { + "id": 54502, + "name": "ChatMessageRenderContext", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The context object for renderers that deal with a specific chat message.\nIt extends the base context with the message data." + } + ] + }, + "children": [ + { + "id": 54504, + "name": "instance", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The instance of the IgcChatComponent." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 247, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 52892, + "name": "IgcChatComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + }, + "inheritedFrom": { + "type": "reference", + "target": 54497, + "name": "ChatRenderContext.instance" + } + }, + { + "id": 54503, + "name": "message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The specific chat message being rendered." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 271, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54335, + "name": "IgcChatMessage", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54504, + 54503 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 267, + "character": 17 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 54505, + "name": "ChatAttachmentRenderContext" + } + ] + }, + { + "id": 54496, + "name": "ChatRenderContext", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The base context object passed to custom renderer functions, containing the chat component instance." + } + ] + }, + "children": [ + { + "id": 54497, + "name": "instance", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The instance of the IgcChatComponent." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 247, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 52892, + "name": "IgcChatComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54497 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 243, + "character": 17 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 54498, + "name": "ChatInputRenderContext" + }, + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext" + } + ] + }, + { + "id": 54472, + "name": "ChatRenderers", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A collection of optional rendering functions that allow for custom UI rendering.\nEach property is a function that takes a context object and returns a template result." + } + ] + }, + "children": [ + { + "id": 54473, + "name": "attachment", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for a single chat message attachment." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 165, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54505, + "name": "ChatAttachmentRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54474, + "name": "attachmentContent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the content of an attachment." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 169, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54505, + "name": "ChatAttachmentRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54475, + "name": "attachmentHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the header of an attachment." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 173, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54505, + "name": "ChatAttachmentRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54476, + "name": "fileUploadButton", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the file upload button in the input area." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 177, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54477, + "name": "input", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the main chat input field." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 181, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54498, + "name": "ChatInputRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54478, + "name": "inputActions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the actions container within the input area." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 185, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54479, + "name": "inputActionsEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the actions at the end of the input area." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 189, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54480, + "name": "inputActionsStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the actions at the start of the input area." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 193, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54481, + "name": "inputAttachments", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the attachment previews within the input field." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 197, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54498, + "name": "ChatInputRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54482, + "name": "message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for an entire chat message bubble." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 201, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54483, + "name": "messageActions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for message-specific actions (e.g., reply or delete buttons)." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 205, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54484, + "name": "messageAttachments", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the attachments associated with a message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 209, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54485, + "name": "messageContent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the main text and content of a message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 213, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54486, + "name": "messageHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the header of a message, including sender and timestamp." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 217, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54502, + "name": "ChatMessageRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54488, + "name": "sendButton", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the message send button." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 225, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54489, + "name": "suggestionPrefix", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the prefix text shown before suggestions." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 229, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54487, + "name": "typingIndicator", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Custom renderer for the \"is typing\" indicator." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 221, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54490, + "typeArguments": [ + { + "type": "reference", + "target": 54496, + "name": "ChatRenderContext", + "package": "igniteui-webcomponents" + } + ], + "name": "ChatTemplateRenderer", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54473, + 54474, + 54475, + 54476, + 54477, + 54478, + 54479, + 54480, + 54481, + 54482, + 54483, + 54484, + 54485, + 54486, + 54488, + 54489, + 54487 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 161, + "character": 17 + } + ] + }, + { + "id": 54426, + "name": "ComboTemplateProps", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54427, + "name": "item", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 44, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54428, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "ComboTemplateProps.T", + "refersToTypeParameter": true + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54427 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 43, + "character": 17 + } + ], + "typeParameters": [ + { + "id": 54428, + "name": "T", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "object" + } + } + ] + }, + { + "id": 54414, + "name": "CustomDateRange", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54416, + "name": "dateRange", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 12, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54417, + "name": "DateRangeValue", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54415, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 11, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54416, + 54415 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 10, + "character": 17 + } + ] + }, + { + "id": 54407, + "name": "DatePartDeltas", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54408, + "name": "date", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 33, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54411, + "name": "hours", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 36, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54412, + "name": "minutes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 37, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54409, + "name": "month", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 34, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54413, + "name": "seconds", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 38, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54410, + "name": "year", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 35, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54408, + 54411, + 54412, + 54409, + 54413, + 54410 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "line": 32, + "character": 17 + } + ] + }, + { + "id": 54388, + "name": "DateRangeDescriptor", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54390, + "name": "dateRange", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 11, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + } + }, + { + "id": 54389, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 10, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54392, + "name": "DateRangeType", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54390, + 54389 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 9, + "character": 17 + } + ] + }, + { + "id": 54417, + "name": "DateRangeValue", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54419, + "name": "end", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 8, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + }, + { + "id": 54418, + "name": "start", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 7, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Date" + }, + "name": "Date", + "package": "typescript" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54419, + 54418 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "line": 6, + "character": 17 + } + ] + }, + { + "id": 54429, + "name": "FilteringOptions", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54431, + "name": "caseSensitive", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 19, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54430, + "name": "filterKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 18, + "character": 4 + } + ], + "type": { + "type": "typeOperator", + "operator": "keyof", + "target": { + "type": "reference", + "target": 54433, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "FilteringOptions.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 54432, + "name": "matchDiacritics", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 20, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54431, + 54430, + 54432 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 17, + "character": 17 + } + ], + "typeParameters": [ + { + "id": 54433, + "name": "T", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "object" + } + } + ] + }, + { + "id": 54435, + "name": "IconMeta", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54437, + "name": "collection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "line": 33, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54438, + "name": "external", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "line": 34, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54436, + "name": "name", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "line": 32, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54437, + 54438, + 54436 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "line": 31, + "character": 17 + } + ] + }, + { + "id": 54544, + "name": "IgrActivePaneEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54545, + "name": "newPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the new active pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54546, + "name": "oldPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the old active pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 37, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54545, + 54546 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 29, + "character": 17 + } + ] + }, + { + "id": 54326, + "name": "IgrActiveStepChangedEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54327, + "name": "index", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54327 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "line": 5, + "character": 17 + } + ] + }, + { + "id": 54323, + "name": "IgrActiveStepChangingEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54325, + "name": "newIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "line": 3, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54324, + "name": "oldIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "line": 2, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54325, + 54324 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "line": 1, + "character": 17 + } + ] + }, + { + "id": 54286, + "name": "IgrCalendarResourceStrings", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54293, + "name": "endDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 8, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54295, + "name": "nextMonth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 10, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54297, + "name": "nextYear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 12, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54299, + "name": "nextYears", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 14, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54294, + "name": "previousMonth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 9, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54296, + "name": "previousYear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 11, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54298, + "name": "previousYears", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 13, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54289, + "name": "selectDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 4, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54291, + "name": "selectedDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54287, + "name": "selectMonth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 2, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54290, + "name": "selectRange", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54288, + "name": "selectYear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 3, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54292, + "name": "startDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 7, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54300, + "name": "weekLabel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 15, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54293, + 54295, + 54297, + 54299, + 54294, + 54296, + 54298, + 54289, + 54291, + 54287, + 54290, + 54288, + 54292, + 54300 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 1, + "character": 17 + } + ] + }, + { + "id": 54335, + "name": "IgrChatMessage", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a single chat message in the conversation." + } + ] + }, + "children": [ + { + "id": 54340, + "name": "attachments", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional list of attachments associated with the message,\nsuch as images, files, or links." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 26, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54342, + "name": "IgcChatMessageAttachment", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 54336, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A unique identifier for the message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 9, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54341, + "name": "reactions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional list of reactions associated with the message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 30, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 54338, + "name": "sender", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The identifier or name of the sender of the message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 17, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54337, + "name": "text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The textual content of the message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 13, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54339, + "name": "timestamp", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The timestamp indicating when the message was sent." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 21, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54340, + 54336, + 54341, + 54338, + 54337, + 54339 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 5, + "character": 17 + } + ] + }, + { + "id": 54342, + "name": "IgrChatMessageAttachment", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an attachment associated with a chat message." + } + ] + }, + "children": [ + { + "id": 54346, + "name": "file", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The actual File object, if the attachment was provided locally (e.g. via upload)." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 52, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": -1, + "name": "File", + "package": "typescript" + } + }, + { + "id": 54343, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A unique identifier for the attachment." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 39, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54344, + "name": "name", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The display name of the attachment (e.g. file name)." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 43, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54348, + "name": "thumbnail", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional URL to a thumbnail preview of the attachment (e.g. for images or videos)." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 60, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54347, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The MIME type or a custom type identifier for the attachment (e.g. \"image/png\", \"pdf\", \"audio\")." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 56, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54345, + "name": "url", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The URL from which the attachment can be downloaded or viewed.\nTypically used for attachments stored on a server or CDN." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54346, + 54343, + 54344, + 54348, + 54347, + 54345 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 35, + "character": 17 + } + ] + }, + { + "id": 54363, + "name": "IgrChatMessageReaction", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a user's reaction to a specific chat message." + } + ] + }, + "children": [ + { + "id": 54364, + "name": "message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The chat message that the reaction is associated with." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 151, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54335, + "name": "IgcChatMessage", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54365, + "name": "reaction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The string representation of the reaction, such as an emoji or a string;" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 155, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54364, + 54365 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 147, + "character": 17 + } + ] + }, + { + "id": 54302, + "name": "IgrChatResourceStrings", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54308, + "name": "attachmentLabel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 7, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54309, + "name": "attachmentsListLabel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 8, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54310, + "name": "messageCopied", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 9, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54304, + "name": "reactionCopy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 3, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54306, + "name": "reactionDislike", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54305, + "name": "reactionLike", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 4, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54307, + "name": "reactionRegenerate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54303, + "name": "suggestionsHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 2, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54308, + 54309, + 54310, + 54304, + 54306, + 54305, + 54307, + 54303 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 1, + "character": 17 + } + ] + }, + { + "id": 54314, + "name": "IgrCheckboxChangeEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54315, + "name": "checked", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox-base.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54316, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox-base.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54315, + 54316 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox-base.d.ts", + "line": 4, + "character": 17 + } + ] + }, + { + "id": 54330, + "name": "IgrComboChangeEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54332, + "name": "items", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 30, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54334, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcComboChangeEventArgs.T", + "refersToTypeParameter": true + } + } + }, + { + "id": 54331, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 29, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboValue" + }, + "typeArguments": [ + { + "type": "reference", + "target": 54334, + "name": "T", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcComboChangeEventArgs.T", + "refersToTypeParameter": true + } + ], + "name": "ComboValue", + "package": "igniteui-webcomponents" + } + } + }, + { + "id": 54333, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 31, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboChangeType" + }, + "name": "ComboChangeType", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54332, + 54331, + 54333 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 28, + "character": 17 + } + ], + "typeParameters": [ + { + "id": 54334, + "name": "T", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "object" + }, + "default": { + "type": "intrinsic", + "name": "any" + } + } + ] + }, + { + "id": 54618, + "name": "IgrContentPane", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54632, + "name": "acceptsInnerDock", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user can inner dock another pane in this one. Defaults to true." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 250, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54628, + "name": "allowClose", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to close the pane. Defaults to true." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 234, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54631, + "name": "allowDocking", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to dock the pane. Defaults to true." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 246, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54633, + "name": "allowFloating", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to make the pane floating. Defaults to true." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 254, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54629, + "name": "allowMaximize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to maximize the pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 238, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54630, + "name": "allowPinning", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the end user is allowed to pin/unpin the pane. Defaults to true." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 242, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54621, + "name": "contentId", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The slot attribute's value of the content element." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 206, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54639, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether a pane is disabled. Defaults to false." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 282, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54640, + "name": "documentOnly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Marks that a content pane can be docked only inside a document host." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 286, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54626, + "name": "floatingHeaderId", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The slot attribute's value of the floating header element. If not set, the " + }, + { + "kind": "code", + "text": "`headerId`" + }, + { + "kind": "text", + "text": " property value is used." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 226, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54622, + "name": "header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The text header of the content pane. Even if header slot templates are used, the text header is used for aria label." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 210, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54623, + "name": "headerId", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The slot attribute's value of the content pane header element. If not set, the " + }, + { + "kind": "code", + "text": "`header`" + }, + { + "kind": "text", + "text": " property value is used." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 214, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54638, + "name": "hidden", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether a pane is hidden in the UI. Defaults to false." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 278, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54619, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the pane. If not set the Dock Manager generates it automatically." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 198, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54636, + "name": "isMaximized", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether a content pane is maximized or not. Defaults to false." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 266, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54635, + "name": "isPinned", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether a content pane is pinned or not. Defaults to true." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 262, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54627, + "name": "size", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The size of the pane relative to its sibling panes' sizes. Defaults to 100." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 230, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54624, + "name": "tabHeaderId", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The slot attribute's value of the tab header element. If not set, the " + }, + { + "kind": "code", + "text": "`header`" + }, + { + "kind": "text", + "text": " property value is used." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 218, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54620, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The type of the pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 202, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54527, + "name": "contentPane", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcDockManagerPaneType.contentPane" + } + }, + { + "id": 54625, + "name": "unpinnedHeaderId", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The slot attribute's value of the unpinned header element. If not set, the " + }, + { + "kind": "code", + "text": "`header`" + }, + { + "kind": "text", + "text": " property value is used." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 222, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54637, + "name": "unpinnedLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The desired unpinned location of the content pane.\n\nIf not set the Dock Manager automatically calculates it based on the location of the pane relatively to the document host.\nIf more than one document host is presented, the closest one in the pane hierarchy will be used for the calculation.\nIf there is no document host, the default location is left." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 274, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54533, + "name": "IgcUnpinnedLocation", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54634, + "name": "unpinnedSize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The absolute size of the pane in an unpinned state. Defaults to 200." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 258, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54632, + 54628, + 54631, + 54633, + 54629, + 54630, + 54621, + 54639, + 54640, + 54626, + 54622, + 54623, + 54638, + 54619, + 54636, + 54635, + 54627, + 54624, + 54620, + 54625, + 54637, + 54634 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 194, + "character": 17 + } + ] + }, + { + "id": 54563, + "name": "IgrDockingIndicator", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54566, + "name": "direction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets a value indicating the direction of the docking indicator." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 68, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54565, + "name": "isRoot", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets a value indicating whether the docking indicator is a root one." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 64, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54564, + "name": "position", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the position of the docking indicator." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 60, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54547, + "name": "IgcDockingIndicatorPosition", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54566, + 54565, + 54564 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 56, + "character": 17 + } + ] + }, + { + "id": 54668, + "name": "IgrDockManagerLayout", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Describes a Dock Manager layout." + } + ] + }, + "children": [ + { + "id": 54670, + "name": "floatingPanes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The floating panes of the layout." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 401, + "character": 2 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54669, + "name": "rootPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The root split pane of the layout." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 397, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54670, + 54669 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 393, + "character": 17 + } + ] + }, + { + "id": 54541, + "name": "IgrDockManagerPoint", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54542, + "name": "x", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 26, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54543, + "name": "y", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 27, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54542, + 54543 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 25, + "character": 17 + } + ] + }, + { + "id": 56605, + "name": "IgrDockManagerResourceStrings", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Describes dock manager resource strings." + } + ] + }, + "children": [ + { + "id": 56606, + "name": "close", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 621, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56614, + "name": "documents", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 629, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56609, + "name": "maximize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 624, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56610, + "name": "minimize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 625, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56611, + "name": "moreOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 626, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56612, + "name": "moreTabs", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 627, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56613, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 628, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56607, + "name": "pin", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 622, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56608, + "name": "unpin", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 623, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56606, + 56614, + 56609, + 56610, + 56611, + 56612, + 56613, + 56607, + 56608 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 620, + "character": 17 + } + ] + }, + { + "id": 54601, + "name": "IgrDockPaneAction", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54603, + "name": "dockingIndicator", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 157, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54563, + "name": "IgcDockingIndicator", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54604, + "name": "targetPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 158, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54667, + "name": "IgcDockManagerPane", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54602, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 156, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54590, + "name": "dockPane", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragActionType.dockPane" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54603, + 54604, + 54602 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 155, + "character": 17 + } + ] + }, + { + "id": 54662, + "name": "IgrDocumentHost", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54663, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the pane. If not set the Dock Manager generates it automatically." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 375, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54665, + "name": "rootPane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The root split pane of the document host." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 383, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54666, + "name": "size", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The size of the pane relative to its sibling panes' sizes. Defaults to 100." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 387, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54664, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The type of the pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 379, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54529, + "name": "documentHost", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcDockManagerPaneType.documentHost" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54663, + 54665, + 54666, + 54664 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 371, + "character": 17 + } + ] + }, + { + "id": 56629, + "name": "IgrFloatingPaneResizeEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 56631, + "name": "resizerLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the edge/corner that is being dragged." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 667, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56615, + "name": "IgcResizerLocation", + "package": "igniteui-dockmanager" + } + }, + { + "id": 56630, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the source pane that triggers the resize operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 663, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56631, + 56630 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 659, + "character": 17 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 56632, + "name": "IgrFloatingPaneResizeMoveEventArgsDetail" + } + ] + }, + { + "id": 56632, + "name": "IgrFloatingPaneResizeMoveEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 56636, + "name": "newHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's height after the resizing operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 685, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56638, + "name": "newLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's floating location after the resizing operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 693, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 56634, + "name": "newWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's width after the resizing operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 677, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56635, + "name": "oldHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's height before the resizing operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 681, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56637, + "name": "oldLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's floating location before the resizing operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 689, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 56633, + "name": "oldWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's width before the resizing operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 673, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56640, + "name": "resizerLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the edge/corner that is being dragged." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 667, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56615, + "name": "IgcResizerLocation", + "package": "igniteui-dockmanager" + }, + "inheritedFrom": { + "type": "reference", + "target": 56631, + "name": "IgcFloatingPaneResizeEventArgs.resizerLocation" + } + }, + { + "id": 56639, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the source pane that triggers the resize operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 663, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + }, + "inheritedFrom": { + "type": "reference", + "target": 56630, + "name": "IgcFloatingPaneResizeEventArgs.sourcePane" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56636, + 56638, + 56634, + 56635, + 56637, + 56633, + 56640, + 56639 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 669, + "character": 17 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 56629, + "name": "IgcFloatingPaneResizeEventArgs", + "package": "igniteui-dockmanager" + } + ] + }, + { + "id": 54592, + "name": "IgrFloatPaneAction", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54596, + "name": "height", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 148, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54594, + "name": "location", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 146, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54593, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 145, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54588, + "name": "floatPane", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragActionType.floatPane" + } + }, + { + "id": 54595, + "name": "width", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 147, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54596, + 54594, + 54593, + 54595 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 144, + "character": 17 + } + ] + }, + { + "id": 54597, + "name": "IgrMoveFloatingPaneAction", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54600, + "name": "newLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 153, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54599, + "name": "oldLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 152, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54598, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 151, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54589, + "name": "moveFloatingPane", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragActionType.moveFloatingPane" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54600, + 54599, + 54598 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 150, + "character": 17 + } + ] + }, + { + "id": 54605, + "name": "IgrMoveTabAction", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54608, + "name": "newIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 163, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54607, + "name": "oldIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 162, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54606, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 161, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54591, + "name": "moveTab", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragActionType.moveTab" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54608, + 54607, + 54606 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 160, + "character": 17 + } + ] + }, + { + "id": 54573, + "name": "IgrPaneCloseEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54575, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the panes that are about to close." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 98, + "character": 2 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54574, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get the source pane that triggers the close." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 94, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54667, + "name": "IgcDockManagerPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54575, + 54574 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 90, + "character": 17 + } + ] + }, + { + "id": 54615, + "name": "IgrPaneDragEndEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54617, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the panes that end dragging." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 192, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54616, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the source pane that ends dragging." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 188, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54654, + "name": "IgcTabGroupPane", + "package": "igniteui-dockmanager" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54617, + 54616 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 184, + "character": 17 + } + ] + }, + { + "id": 54610, + "name": "IgrPaneDragOverEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54613, + "name": "action", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets information about the action being performed." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 178, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54609, + "name": "IgcPaneDragAction", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54614, + "name": "isValid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the action is valid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 182, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54612, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the panes that are dragged over." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 174, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54611, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the source pane that triggers the drag over." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 170, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54654, + "name": "IgcTabGroupPane", + "package": "igniteui-dockmanager" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54613, + 54614, + 54612, + 54611 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 166, + "character": 17 + } + ] + }, + { + "id": 54584, + "name": "IgrPaneDragStartEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54586, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the panes that are about to get dragged." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 136, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54585, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the source pane that triggers the drag start." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 132, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54586, + 54585 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 128, + "character": 17 + } + ] + }, + { + "id": 54567, + "name": "IgrPaneHeaderConnectionEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54569, + "name": "element", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The header element that is being connected/disconnected." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 78, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54671, + "name": "IgcPaneHeaderElement", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54568, + "name": "pane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The pane whose header is being connected/disconnected." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 74, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54569, + 54568 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 70, + "character": 17 + } + ] + }, + { + "id": 54671, + "name": "IgrPaneHeaderElement", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Describes a pane header element." + } + ] + }, + "children": [ + { + "id": 54672, + "name": "dragService", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the drag service." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 606, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/drag-drop/drag.service.d.ts", + "qualifiedName": "IgcDragService" + }, + "name": "IgcDragService", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54672 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 602, + "character": 17 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + }, + { + "id": 54579, + "name": "IgrPanePinnedEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54583, + "name": "location", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the unpinned location." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 126, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54533, + "name": "IgcUnpinnedLocation", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54582, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the new pinned value." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 122, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54581, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the panes that are about to get pinned/unpinned." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 118, + "character": 2 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54580, + "name": "sourcePane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the source pane that triggers the pinned state change." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 114, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54583, + 54582, + 54581, + 54580 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 110, + "character": 17 + } + ] + }, + { + "id": 54576, + "name": "IgrPaneScrollEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54578, + "name": "contentElement", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the content element that is scrolled." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 108, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + }, + { + "id": 54577, + "name": "pane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the content pane that is scrolled." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 104, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54578, + 54577 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 100, + "character": 17 + } + ] + }, + { + "id": 54317, + "name": "IgrRadioChangeEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54318, + "name": "checked", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54319, + "name": "value", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54318, + 54319 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "line": 4, + "character": 17 + } + ] + }, + { + "id": 54320, + "name": "IgrRangeSliderValueEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54321, + "name": "lower", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "line": 4, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54322, + "name": "upper", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54321, + 54322 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "line": 3, + "character": 17 + } + ] + }, + { + "id": 54641, + "name": "IgrSplitPane", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54651, + "name": "allowEmpty", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the pane should present in the UI when empty." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 328, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54649, + "name": "floatingHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The absolute height of the pane. Applies only for floating panes. Defaults to 100." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 320, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54647, + "name": "floatingLocation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The absolute location point of the pane. Applies only for floating panes." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 312, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54541, + "name": "IgcDockManagerPoint", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54650, + "name": "floatingResizable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether floating pane resizing is allowed. Applies only for floating panes." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 324, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54648, + "name": "floatingWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The absolute width of the pane. Applies only for floating panes. Defaults to 100." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 316, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54642, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the pane. If not set the Dock Manager generates it automatically." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 292, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54652, + "name": "isMaximized", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether a split pane is maximized or not. Defaults to false." + } + ], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "in 1.14.4. Use the " + }, + { + "kind": "code", + "text": "`isMaximized`" + }, + { + "kind": "text", + "text": " property of TabGroupPane and/or ContentPane instead.\nHaving isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 334, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54644, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The orientation of the split pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 300, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54530, + "name": "IgcSplitPaneOrientation", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54645, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The child panes of the split pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 304, + "character": 2 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54667, + "name": "IgcDockManagerPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54646, + "name": "size", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The size of the pane relative to its sibling panes' sizes. Defaults to 100." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 308, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54643, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The type of the pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 296, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54526, + "name": "splitPane", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcDockManagerPaneType.splitPane" + } + }, + { + "id": 54653, + "name": "useFixedSize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether child panes are sized in pixels (instead of relatively to their siblings) and can be resized beyond the viewport, allowing scrollable overflow within the container.\nDefaults to false." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 339, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54651, + 54649, + 54647, + 54650, + 54648, + 54642, + 54652, + 54644, + 54645, + 54646, + 54643, + 54653 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 288, + "character": 17 + } + ] + }, + { + "id": 56624, + "name": "IgrSplitterResizeEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 56626, + "name": "orientation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's orientation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 649, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54530, + "name": "IgcSplitPaneOrientation", + "package": "igniteui-dockmanager" + } + }, + { + "id": 56625, + "name": "pane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane being resized with the splitter." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 645, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54667, + "name": "IgcDockManagerPane", + "package": "igniteui-dockmanager" + } + }, + { + "id": 56628, + "name": "paneHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's height." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 657, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56627, + "name": "paneWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pane's width." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 653, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56626, + 56625, + 56628, + 56627 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 641, + "character": 17 + } + ] + }, + { + "id": 54654, + "name": "IgrTabGroupPane", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54660, + "name": "allowEmpty", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether the pane should present in the UI when empty." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 365, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54655, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the pane. If not set the Dock Manager generates it automatically." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 345, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54661, + "name": "isMaximized", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Determines whether a tab group is maximized or not. Defaults to false." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 369, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54657, + "name": "panes", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The child content panes of the tab group." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 353, + "character": 2 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + }, + { + "id": 54659, + "name": "selectedIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the selected tab." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 361, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54658, + "name": "size", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The size of the pane relative to its sibling panes' sizes. Defaults to 100." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 357, + "character": 2 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54656, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The type of the pane." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 349, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": 54528, + "name": "tabGroupPane", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcDockManagerPaneType.tabGroupPane" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54660, + 54655, + 54661, + 54657, + 54659, + 54658, + 54656 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 341, + "character": 17 + } + ] + }, + { + "id": 54570, + "name": "IgrTabHeaderConnectionEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54572, + "name": "element", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The tab header element that is being connected/disconnected." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 88, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 55638, + "name": "IgcTabHeaderElement", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54571, + "name": "pane", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The pane whose tab header is being connected/disconnected." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 84, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54572, + 54571 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 80, + "character": 17 + } + ] + }, + { + "id": 55638, + "name": "IgrTabHeaderElement", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Describes a tab header element." + } + ] + }, + "children": [ + { + "id": 55639, + "name": "dragService", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the drag service." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 615, + "character": 2 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/drag-drop/drag.service.d.ts", + "qualifiedName": "IgcDragService" + }, + "name": "IgcDragService", + "package": "igniteui-dockmanager" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 55639 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 611, + "character": 17 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + }, + { + "id": 54311, + "name": "IgrTileChangeStateEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54313, + "name": "state", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "line": 6, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54312, + "name": "tile", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "line": 5, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 53002, + "name": "IgcTileComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54313, + 54312 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "line": 4, + "character": 17 + } + ] + }, + { + "id": 54328, + "name": "IgrTreeSelectionEventArgsDetail", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54329, + "name": "newSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.common.d.ts", + "line": 13, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 54051, + "name": "IgcTreeItemComponent", + "package": "igniteui-webcomponents", + "qualifiedName": "default" + } + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54329 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/tree/tree.common.d.ts", + "line": 12, + "character": 17 + } + ] + }, + { + "id": 54439, + "name": "AbsolutePosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 1, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "bottom" + }, + { + "type": "literal", + "value": "middle" + }, + { + "type": "literal", + "value": "top" + } + ] + } + }, + { + "id": 54449, + "name": "AvatarShape", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 11, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "square" + }, + { + "type": "literal", + "value": "circle" + }, + { + "type": "literal", + "value": "rounded" + } + ] + } + }, + { + "id": 54450, + "name": "BadgeShape", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 12, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "rounded" + }, + { + "type": "literal", + "value": "square" + } + ] + } + }, + { + "id": 54451, + "name": "ButtonGroupSelection", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 13, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "single" + }, + { + "type": "literal", + "value": "single-required" + }, + { + "type": "literal", + "value": "multiple" + } + ] + } + }, + { + "id": 54452, + "name": "ButtonVariant", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 14, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "contained" + }, + { + "type": "literal", + "value": "flat" + }, + { + "type": "literal", + "value": "outlined" + }, + { + "type": "literal", + "value": "fab" + } + ] + } + }, + { + "id": 54385, + "name": "CalendarActiveView", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 14, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "days" + }, + { + "type": "literal", + "value": "months" + }, + { + "type": "literal", + "value": "years" + } + ] + } + }, + { + "id": 54386, + "name": "CalendarHeaderOrientation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 15, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "horizontal" + }, + { + "type": "literal", + "value": "vertical" + } + ] + } + }, + { + "id": 54387, + "name": "CalendarSelection", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 16, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "single" + }, + { + "type": "literal", + "value": "multiple" + }, + { + "type": "literal", + "value": "range" + } + ] + } + }, + { + "id": 54453, + "name": "CarouselIndicatorsOrientation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 15, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "end" + }, + { + "type": "literal", + "value": "start" + } + ] + } + }, + { + "id": 54495, + "name": "ChatSuggestionsPosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A string literal type defining the two possible positions for chat suggestions." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 239, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "below-input" + }, + { + "type": "literal", + "value": "below-messages" + } + ] + } + }, + { + "id": 54490, + "name": "ChatTemplateRenderer", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A generic type for a function that serves as a custom renderer.\nIt takes a context object of type T and returns a template result." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 235, + "character": 12 + } + ], + "typeParameters": [ + { + "id": 54494, + "name": "T", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + } + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 54491, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 235, + "character": 38 + } + ], + "signatures": [ + { + "id": 54492, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 54493, + "name": "ctx", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54494, + "name": "T", + "package": "igniteui-webcomponents", + "refersToTypeParameter": true + } + } + ], + "type": { + "type": "intrinsic", + "name": "unknown" + } + } + ] + } + } + }, + { + "id": 54421, + "name": "ComboItemTemplate", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 42, + "character": 12 + } + ], + "typeParameters": [ + { + "id": 54425, + "name": "T", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "object" + } + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 54422, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 42, + "character": 50 + } + ], + "signatures": [ + { + "id": 54423, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 54424, + "name": "props", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54426, + "typeArguments": [ + { + "type": "reference", + "target": 54425, + "name": "T", + "package": "igniteui-webcomponents", + "refersToTypeParameter": true + } + ], + "name": "ComboTemplateProps", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/lit-html/src/lit-html.ts", + "qualifiedName": "TemplateResult" + }, + "name": "TemplateResult", + "package": "lit-html" + } + } + ] + } + } + }, + { + "id": 54440, + "name": "ContentOrientation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 2, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "horizontal" + }, + { + "type": "literal", + "value": "vertical" + } + ] + } + }, + { + "id": 54454, + "name": "DividerType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 16, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "solid" + }, + { + "type": "literal", + "value": "dashed" + } + ] + } + }, + { + "id": 54455, + "name": "ExpansionPanelIndicatorPosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 17, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "start" + }, + { + "type": "literal", + "value": "end" + }, + { + "type": "literal", + "value": "none" + } + ] + } + }, + { + "id": 54434, + "name": "GroupingDirection", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "line": 13, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "asc" + }, + { + "type": "literal", + "value": "desc" + }, + { + "type": "literal", + "value": "none" + } + ] + } + }, + { + "id": 54441, + "name": "HorizontalTransitionAnimation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 3, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "slide" + }, + { + "type": "literal", + "value": "fade" + }, + { + "type": "literal", + "value": "none" + } + ] + } + }, + { + "id": 54456, + "name": "IconButtonVariant", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 18, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "contained" + }, + { + "type": "literal", + "value": "flat" + }, + { + "type": "literal", + "value": "outlined" + } + ] + } + }, + { + "id": 54509, + "name": "IgrActivePaneEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 43, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54544, + "name": "IgrActivePaneEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcActivePaneEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54282, + "name": "IgrActiveStepChangedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 30, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54326, + "name": "IgrActiveStepChangedEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcActiveStepChangedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54281, + "name": "IgrActiveStepChangingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 28, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54323, + "name": "IgrActiveStepChangingEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcActiveStepChangingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54349, + "name": "IgrChatOptions", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Configuration options for customizing the behavior and appearance of the chat component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 65, + "character": 12 + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 54350, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 54355, + "name": "acceptedFiles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The accepted files that could be attached.\nDefines the file types as a list of comma-separated values (e.g. \"image/*,.pdf\") that the file input should accept." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 87, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54361, + "name": "adoptRootStyles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A boolean flag that, when " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": ", enables a **quick and dirty workaround** for styling\ncomponents rendered within the Shadow DOM, from custom message renderers, by allowing them\nto inherit styles from the document's root. This can be useful for developers who prefer not to handle\nShadow DOM encapsulation, but it is **not the recommended approach**.\n\nIt is highly advised to use standard Web Component styling methods first, in this order:\n\n1. **CSS Variables and Parts API**: Use the exposed " + }, + { + "kind": "code", + "text": "`::part`" + }, + { + "kind": "text", + "text": " API with custom CSS variables to style\nyour content in your custom renderers.\n\n2. **" + }, + { + "kind": "code", + "text": "`link`" + }, + { + "kind": "text", + "text": " elements**: For larger style sheets, link them directly within the Shadow DOM to maintain\nencapsulation.\n\n3. **Inline " + }, + { + "kind": "code", + "text": "`<style>`" + }, + { + "kind": "text", + "text": " tags**: Use these for small, self-contained styles within a template.\n\nThis property should be used as a **last resort** as it can lead to **style leakage**, where\nglobal styles unexpectedly bleed into the component, breaking encapsulation and causing\nunpredictable visual issues.\n\n**WARNING**: This is a once time shot. Changing this property in runtime won't reflect\nits value." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 138, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54351, + "name": "currentUserId", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The ID of the current user. Used to differentiate between incoming and outgoing messages." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 69, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54352, + "name": "disableAutoScroll", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": ", prevents the chat from automatically scrolling to the latest message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 73, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54353, + "name": "disableInputAttachments", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": ", disables the ability to upload and send attachments.\nDefaults to " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 78, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54356, + "name": "headerText", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional header text to display at the top of the chat component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 91, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54357, + "name": "inputPlaceholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional placeholder text for the chat input area.\nProvides a hint to the user about what they can type (e.g. \"Type a message...\")." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 96, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54354, + "name": "isTyping", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the other user is currently typing a message." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 82, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 54362, + "name": "renderers", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An object containing a collection of custom renderers for different parts of the chat UI." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 142, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54472, + "name": "ChatRenderers", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54360, + "name": "stopTypingDelay", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Time in milliseconds to wait before dispatching a stop typing event.\nDefault is " + }, + { + "kind": "code", + "text": "`3000`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 114, + "character": 4 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 54358, + "name": "suggestions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Suggested text snippets or quick replies that can be shown as user-selectable options." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 100, + "character": 4 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 54359, + "name": "suggestionsPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the position of the chat suggestions within the component layout.\n\n- " + }, + { + "kind": "code", + "text": "`\"below-input\"`" + }, + { + "kind": "text", + "text": ": Renders suggestions below the chat input area.\n- " + }, + { + "kind": "code", + "text": "`\"below-messages\"`" + }, + { + "kind": "text", + "text": ": Renders suggestions below the chat messages area.\n\nDefault is " + }, + { + "kind": "code", + "text": "`\"below-messages\"`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 109, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 54495, + "name": "ChatSuggestionsPosition", + "package": "igniteui-webcomponents" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 54355, + 54361, + 54351, + 54352, + 54353, + 54356, + 54357, + 54354, + 54362, + 54360, + 54358, + 54359 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "line": 65, + "character": 29 + } + ] + } + } + }, + { + "id": 54278, + "name": "IgrCheckboxChangeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 22, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54314, + "name": "IgrCheckboxChangeEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcCheckboxChangeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54284, + "name": "IgrComboChangeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 34, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54330, + "name": "IgrComboChangeEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcComboChangeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54667, + "name": "IgrDockManagerPane", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 389, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54618, + "name": "IgcContentPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54641, + "name": "IgcSplitPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54654, + "name": "IgcTabGroupPane", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54662, + "name": "IgcDocumentHost", + "package": "igniteui-dockmanager" + } + ] + } + }, + { + "id": 54519, + "name": "IgrFloatingPaneResizeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 59, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56629, + "name": "IgrFloatingPaneResizeEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcFloatingPaneResizeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54520, + "name": "IgrFloatingPaneResizeMoveEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 61, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56632, + "name": "IgrFloatingPaneResizeMoveEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54512, + "name": "IgrPaneCloseEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 48, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54573, + "name": "IgrPaneCloseEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneCloseEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54609, + "name": "IgrPaneDragAction", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "line": 165, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 54592, + "name": "IgcFloatPaneAction", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54597, + "name": "IgcMoveFloatingPaneAction", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54601, + "name": "IgcDockPaneAction", + "package": "igniteui-dockmanager" + }, + { + "type": "reference", + "target": 54605, + "name": "IgcMoveTabAction", + "package": "igniteui-dockmanager" + } + ] + } + }, + { + "id": 54517, + "name": "IgrPaneDragEndEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 55, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54615, + "name": "IgrPaneDragEndEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragEndEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54516, + "name": "IgrPaneDragOverEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 53, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54610, + "name": "IgrPaneDragOverEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragOverEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54515, + "name": "IgrPaneDragStartEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 51, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54584, + "name": "IgrPaneDragStartEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneDragStartEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54510, + "name": "IgrPaneHeaderConnectionEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 44, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54567, + "name": "IgrPaneHeaderConnectionEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneHeaderConnectionEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54514, + "name": "IgrPanePinnedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 50, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54579, + "name": "IgrPanePinnedEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPanePinnedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54513, + "name": "IgrPaneScrollEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 49, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54576, + "name": "IgrPaneScrollEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcPaneScrollEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54279, + "name": "IgrRadioChangeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 24, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54317, + "name": "IgrRadioChangeEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcRadioChangeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54280, + "name": "IgrRangeSliderValueEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 26, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54320, + "name": "IgrRangeSliderValueEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcRangeSliderValueEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54518, + "name": "IgrSplitterResizeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 57, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56624, + "name": "IgrSplitterResizeEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcSplitterResizeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54511, + "name": "IgrTabHeaderConnectionEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/dock-manager/types.ts", + "line": 46, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54570, + "name": "IgrTabHeaderConnectionEventArgsDetail", + "package": "igniteui-dockmanager", + "qualifiedName": "IgcTabHeaderConnectionEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54277, + "name": "IgrTileChangeStateEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 20, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54311, + "name": "IgrTileChangeStateEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcTileChangeStateEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54283, + "name": "IgrTreeSelectionEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/components/types.ts", + "line": 32, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 54328, + "name": "IgrTreeSelectionEventArgsDetail", + "package": "igniteui-webcomponents", + "qualifiedName": "IgcTreeSelectionEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 54457, + "name": "InputType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 19, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "text" + }, + { + "type": "literal", + "value": "email" + }, + { + "type": "literal", + "value": "number" + }, + { + "type": "literal", + "value": "password" + }, + { + "type": "literal", + "value": "search" + }, + { + "type": "literal", + "value": "tel" + }, + { + "type": "literal", + "value": "url" + } + ] + } + }, + { + "id": 54458, + "name": "LinearProgressLabelAlign", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 20, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "top-start" + }, + { + "type": "literal", + "value": "top" + }, + { + "type": "literal", + "value": "top-end" + }, + { + "type": "literal", + "value": "bottom-start" + }, + { + "type": "literal", + "value": "bottom" + }, + { + "type": "literal", + "value": "bottom-end" + } + ] + } + }, + { + "id": 54459, + "name": "MaskInputValueMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 21, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "raw" + }, + { + "type": "literal", + "value": "withFormatting" + } + ] + } + }, + { + "id": 54460, + "name": "NavDrawerPosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 22, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "start" + }, + { + "type": "literal", + "value": "end" + }, + { + "type": "literal", + "value": "top" + }, + { + "type": "literal", + "value": "bottom" + }, + { + "type": "literal", + "value": "relative" + } + ] + } + }, + { + "id": 54442, + "name": "PickerMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 4, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "dropdown" + }, + { + "type": "literal", + "value": "dialog" + } + ] + } + }, + { + "id": 54420, + "name": "PopoverPlacement", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Describes the preferred placement of a toggle component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/popover/popover.d.ts", + "line": 5, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "top" + }, + { + "type": "literal", + "value": "top-start" + }, + { + "type": "literal", + "value": "top-end" + }, + { + "type": "literal", + "value": "bottom" + }, + { + "type": "literal", + "value": "bottom-start" + }, + { + "type": "literal", + "value": "bottom-end" + }, + { + "type": "literal", + "value": "right" + }, + { + "type": "literal", + "value": "right-start" + }, + { + "type": "literal", + "value": "right-end" + }, + { + "type": "literal", + "value": "left" + }, + { + "type": "literal", + "value": "left-start" + }, + { + "type": "literal", + "value": "left-end" + } + ] + } + }, + { + "id": 54443, + "name": "PopoverScrollStrategy", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 5, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "scroll" + }, + { + "type": "literal", + "value": "block" + }, + { + "type": "literal", + "value": "close" + } + ] + } + }, + { + "id": 54444, + "name": "RangeTextSelectMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 6, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "preserve" + }, + { + "type": "literal", + "value": "select" + }, + { + "type": "literal", + "value": "start" + }, + { + "type": "literal", + "value": "end" + } + ] + } + }, + { + "id": 54445, + "name": "SelectionRangeDirection", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 7, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "none" + }, + { + "type": "literal", + "value": "backward" + }, + { + "type": "literal", + "value": "forward" + } + ] + } + }, + { + "id": 54461, + "name": "SliderTickLabelRotation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 23, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": 0 + }, + { + "type": "literal", + "value": 90 + }, + { + "type": "literal", + "value": -90 + } + ] + } + }, + { + "id": 54462, + "name": "SliderTickOrientation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 24, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "end" + }, + { + "type": "literal", + "value": "mirror" + }, + { + "type": "literal", + "value": "start" + } + ] + } + }, + { + "id": 54463, + "name": "StepperOrientation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 25, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "horizontal" + }, + { + "type": "literal", + "value": "vertical" + } + ] + } + }, + { + "id": 54464, + "name": "StepperStepType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 26, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "full" + }, + { + "type": "literal", + "value": "indicator" + }, + { + "type": "literal", + "value": "title" + } + ] + } + }, + { + "id": 54465, + "name": "StepperTitlePosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 27, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "auto" + }, + { + "type": "literal", + "value": "bottom" + }, + { + "type": "literal", + "value": "top" + }, + { + "type": "literal", + "value": "end" + }, + { + "type": "literal", + "value": "start" + } + ] + } + }, + { + "id": 54466, + "name": "StepperVerticalAnimation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 28, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "grow" + }, + { + "type": "literal", + "value": "fade" + }, + { + "type": "literal", + "value": "none" + } + ] + } + }, + { + "id": 54446, + "name": "StyleVariant", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 8, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "primary" + }, + { + "type": "literal", + "value": "info" + }, + { + "type": "literal", + "value": "success" + }, + { + "type": "literal", + "value": "warning" + }, + { + "type": "literal", + "value": "danger" + } + ] + } + }, + { + "id": 54467, + "name": "TabsActivation", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 29, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "auto" + }, + { + "type": "literal", + "value": "manual" + } + ] + } + }, + { + "id": 54468, + "name": "TabsAlignment", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 30, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "start" + }, + { + "type": "literal", + "value": "end" + }, + { + "type": "literal", + "value": "center" + }, + { + "type": "literal", + "value": "justify" + } + ] + } + }, + { + "id": 54469, + "name": "TextareaResize", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 31, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "vertical" + }, + { + "type": "literal", + "value": "auto" + }, + { + "type": "literal", + "value": "none" + } + ] + } + }, + { + "id": 54470, + "name": "TileManagerDragMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 32, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "none" + }, + { + "type": "literal", + "value": "tile-header" + }, + { + "type": "literal", + "value": "tile" + } + ] + } + }, + { + "id": 54471, + "name": "TileManagerResizeMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 33, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "none" + }, + { + "type": "literal", + "value": "hover" + }, + { + "type": "literal", + "value": "always" + } + ] + } + }, + { + "id": 54447, + "name": "ToggleLabelPosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 9, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "after" + }, + { + "type": "literal", + "value": "before" + } + ] + } + }, + { + "id": 54448, + "name": "TreeSelection", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "line": 10, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "none" + }, + { + "type": "literal", + "value": "multiple" + }, + { + "type": "literal", + "value": "cascade" + } + ] + } + }, + { + "id": 54391, + "name": "WeekDays", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "line": 13, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "sunday" + }, + { + "type": "literal", + "value": "monday" + }, + { + "type": "literal", + "value": "tuesday" + }, + { + "type": "literal", + "value": "wednesday" + }, + { + "type": "literal", + "value": "thursday" + }, + { + "type": "literal", + "value": "friday" + }, + { + "type": "literal", + "value": "saturday" + } + ] + } + }, + { + "id": 54285, + "name": "IgrCalendarResourceStringEN", + "variant": "declaration", + "kind": 32, + "flags": { + "isExternal": true, + "isConst": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 54286, + "name": "IgcCalendarResourceStrings", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54301, + "name": "IgrChatResourceStringEN", + "variant": "declaration", + "kind": 32, + "flags": { + "isExternal": true, + "isConst": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "line": 11, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 54302, + "name": "IgcChatResourceStrings", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54521, + "name": "IgrDockManagerResourceStringsEN", + "variant": "declaration", + "kind": 32, + "flags": { + "isExternal": true, + "isConst": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "English resource strings for the Dock Manager" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.en.d.ts", + "line": 5, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56605, + "name": "IgcDockManagerResourceStrings", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54523, + "name": "IgrDockManagerResourceStringsES", + "variant": "declaration", + "kind": 32, + "flags": { + "isExternal": true, + "isConst": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Spanish resource strings for the Dock Manager" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.es.d.ts", + "line": 5, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56605, + "name": "IgcDockManagerResourceStrings", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54522, + "name": "IgrDockManagerResourceStringsJP", + "variant": "declaration", + "kind": 32, + "flags": { + "isExternal": true, + "isConst": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Japanese resource strings for the Dock Manager" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.jp.d.ts", + "line": 5, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56605, + "name": "IgcDockManagerResourceStrings", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54524, + "name": "IgrDockManagerResourceStringsKO", + "variant": "declaration", + "kind": 32, + "flags": { + "isExternal": true, + "isConst": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Korean resource strings for the Dock Manager" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.ko.d.ts", + "line": 5, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56605, + "name": "IgcDockManagerResourceStrings", + "package": "igniteui-dockmanager" + } + }, + { + "id": 54381, + "name": "configureTheme", + "variant": "declaration", + "kind": 64, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/theming/config.d.ts", + "line": 17, + "character": 24 + } + ], + "signatures": [ + { + "id": 54382, + "name": "configureTheme", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allows the global configuration of the active theme.\n\nUsage:\n " + }, + { + "kind": "code", + "text": "```ts\n import { configureTheme } from 'igniteui-webcomponents';\n\n configureTheme('material', 'light');\n ```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/theming/config.d.ts", + "line": 17, + "character": 24 + } + ], + "parameters": [ + { + "id": 54383, + "name": "t", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/theming/types.d.ts", + "qualifiedName": "Theme" + }, + "name": "Theme", + "package": "igniteui-webcomponents" + } + }, + { + "id": 54384, + "name": "v", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents/theming/types.d.ts", + "qualifiedName": "ThemeVariant" + }, + "name": "ThemeVariant", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54366, + "name": "registerIcon", + "variant": "declaration", + "kind": 64, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "line": 21, + "character": 24 + } + ], + "signatures": [ + { + "id": 54367, + "name": "registerIcon", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "line": 21, + "character": 24 + } + ], + "parameters": [ + { + "id": 54368, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54369, + "name": "url", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54370, + "name": "collection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 54371, + "name": "registerIconFromText", + "variant": "declaration", + "kind": 64, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "line": 22, + "character": 24 + } + ], + "signatures": [ + { + "id": 54372, + "name": "registerIconFromText", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "line": 22, + "character": 24 + } + ], + "parameters": [ + { + "id": 54373, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54374, + "name": "iconText", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54375, + "name": "collection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 54376, + "name": "setIconRef", + "variant": "declaration", + "kind": 64, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "line": 23, + "character": 24 + } + ], + "signatures": [ + { + "id": 54377, + "name": "setIconRef", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "line": 23, + "character": 24 + } + ], + "parameters": [ + { + "id": 54378, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54379, + "name": "collection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 54380, + "name": "icon", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 54435, + "name": "IconMeta", + "package": "igniteui-webcomponents" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Enumerations", + "children": [ + 54399, + 54392, + 54547, + 54525, + 54538, + 54587, + 56615, + 54530, + 54533 + ] + }, + { + "title": "Classes", + "children": [ + 52536, + 52475, + 52575, + 52587, + 52140, + 52645, + 52170, + 52705, + 52668, + 52678, + 52687, + 52696, + 53169, + 53131, + 53146, + 52892, + 53239, + 52339, + 53254, + 53266, + 53275, + 53365, + 52363, + 52192, + 52243, + 52990, + 3, + 53503, + 53484, + 53494, + 53475, + 52488, + 52443, + 52150, + 52807, + 52280, + 53698, + 52798, + 52779, + 52788, + 53709, + 53775, + 53752, + 53732, + 53741, + 53784, + 53830, + 53919, + 53861, + 53848, + 53901, + 53615, + 53595, + 53606, + 53585, + 53957, + 53910, + 53942, + 54192, + 54227, + 54037, + 53989, + 54005, + 52820, + 53002, + 53065, + 52715, + 52619, + 52724, + 54113, + 54051 + ] + }, + { + "title": "Interfaces", + "children": [ + 54505, + 54498, + 54502, + 54496, + 54472, + 54426, + 54414, + 54407, + 54388, + 54417, + 54429, + 54435, + 54544, + 54326, + 54323, + 54286, + 54335, + 54342, + 54363, + 54302, + 54314, + 54330, + 54618, + 54563, + 54668, + 54541, + 56605, + 54601, + 54662, + 56629, + 56632, + 54592, + 54597, + 54605, + 54573, + 54615, + 54610, + 54584, + 54567, + 54671, + 54579, + 54576, + 54317, + 54320, + 54641, + 56624, + 54654, + 54570, + 55638, + 54311, + 54328 + ] + }, + { + "title": "Type Aliases", + "children": [ + 54439, + 54449, + 54450, + 54451, + 54452, + 54385, + 54386, + 54387, + 54453, + 54495, + 54490, + 54421, + 54440, + 54454, + 54455, + 54434, + 54441, + 54456, + 54509, + 54282, + 54281, + 54349, + 54278, + 54284, + 54667, + 54519, + 54520, + 54512, + 54609, + 54517, + 54516, + 54515, + 54510, + 54514, + 54513, + 54279, + 54280, + 54518, + 54511, + 54277, + 54283, + 54457, + 54458, + 54459, + 54460, + 54442, + 54420, + 54443, + 54444, + 54445, + 54461, + 54462, + 54463, + 54464, + 54465, + 54466, + 54446, + 54467, + 54468, + 54469, + 54470, + 54471, + 54447, + 54448, + 54391 + ] + }, + { + "title": "Variables", + "children": [ + 54285, + 54301, + 54521, + 54523, + 54522, + 54524 + ] + }, + { + "title": "Functions", + "children": [ + 54381, + 54366, + 54371, + 54376 + ] + } + ], + "sources": [ + { + "fileName": "src/components/index.ts", + "line": 1, + "character": 0 + } + ] + }, + { + "id": 194, + "name": "igniteui-react-grids", + "variant": "declaration", + "kind": 2, + "flags": {}, + "children": [ + { + "id": 70258, + "name": "ColumnPinningPosition", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enumeration representing the possible positions for pinning columns.\n- Start: Columns are pinned to the start of the grid.\n- End: Columns are pinned to the end of the grid." + } + ] + }, + "children": [ + { + "id": 70260, + "name": "End", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/column-pinning-position.d.ts", + "line": 16, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70259, + "name": "Start", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/column-pinning-position.d.ts", + "line": 15, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70260, + 70259 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/column-pinning-position.d.ts", + "line": 13, + "character": 24 + } + ] + }, + { + "id": 70268, + "name": "DropPosition", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "This enumeration is used to configure whether the drop position is set before or after\nthe target." + } + ] + }, + "children": [ + { + "id": 70270, + "name": "AfterDropTarget", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/drop-position.d.ts", + "line": 15, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70269, + "name": "BeforeDropTarget", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/drop-position.d.ts", + "line": 14, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70270, + 70269 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/drop-position.d.ts", + "line": 12, + "character": 24 + } + ] + }, + { + "id": 70255, + "name": "FilteringExpressionsTreeType", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70257, + "name": "Advanced", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-expressions-tree-type.d.ts", + "line": 11, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70256, + "name": "Regular", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-expressions-tree-type.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70257, + 70256 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-expressions-tree-type.d.ts", + "line": 8, + "character": 24 + } + ] + }, + { + "id": 70252, + "name": "FilteringLogic", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70253, + "name": "And", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-logic.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70254, + "name": "Or", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-logic.d.ts", + "line": 11, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70253, + 70254 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-logic.d.ts", + "line": 8, + "character": 24 + } + ] + }, + { + "id": 70280, + "name": "HorizontalAlignment", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70282, + "name": "Center", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "line": 11, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": -0.5 + } + }, + { + "id": 70281, + "name": "Left", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": -1 + } + }, + { + "id": 70283, + "name": "Right", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "line": 12, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": 0 + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70282, + 70281, + 70283 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "line": 8, + "character": 24 + } + ] + }, + { + "id": 70243, + "name": "PivotDimensionType", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension types - Row, Column or Filter." + } + ] + }, + "children": [ + { + "id": 70245, + "name": "Column", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "line": 12, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70246, + "name": "Filter", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "line": 13, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70244, + "name": "Row", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "line": 11, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70245, + 70246, + 70244 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "line": 9, + "character": 24 + } + ] + }, + { + "id": 70273, + "name": "RowPinningPosition", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enumeration representing the possible positions for pinning rows.\n- Top: Rows are pinned to the top of the grid.\n- Bottom: Rows are pinned to the bottom of the grid." + } + ] + }, + "children": [ + { + "id": 70275, + "name": "Bottom", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/row-pinning-position.d.ts", + "line": 16, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70274, + "name": "Top", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/row-pinning-position.d.ts", + "line": 15, + "character": 6 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70275, + 70274 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/row-pinning-position.d.ts", + "line": 13, + "character": 24 + } + ] + }, + { + "id": 70247, + "name": "SortingDirection", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70249, + "name": "Asc", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "line": 11, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": 1 + } + }, + { + "id": 70250, + "name": "Desc", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "line": 12, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": 2 + } + }, + { + "id": 70248, + "name": "None", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": 0 + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70249, + 70250, + 70248 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "line": 8, + "character": 24 + } + ] + }, + { + "id": 70284, + "name": "VerticalAlignment", + "variant": "declaration", + "kind": 8, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70287, + "name": "Bottom", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "line": 12, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": 0 + } + }, + { + "id": 70286, + "name": "Middle", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "line": 11, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": -0.5 + } + }, + { + "id": 70285, + "name": "Top", + "variant": "declaration", + "kind": 16, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "literal", + "value": -1 + } + } + ], + "groups": [ + { + "title": "Enumeration Members", + "children": [ + 70287, + 70286, + 70285 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "line": 8, + "character": 24 + } + ] + }, + { + "id": 56683, + "name": "IgrActionStrip", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Action Strip provides templatable area for one or more actions." + } + ] + }, + "children": [ + { + "id": 56691, + "name": "actionButtons", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "ActionButton as ContentChildren inside the Action Strip" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 60666, + "name": "IgcGridActionsBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 56692, + "name": "hidden", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the visibility of the Action Strip.\nCould be used to set if the Action Strip will be initially hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56693, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the resource strings." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 61638, + "name": "IgcActionStripResourceStrings", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56700, + "name": "hide", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hiding the Action Strip and removing it from its current context element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56701, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "line": 114, + "character": 11 + } + ], + "signatures": [ + { + "id": 56702, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hiding the Action Strip and removing it from its current context element." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.actionStrip.hide();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "line": 114, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56703, + "name": "hide", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hiding the Action Strip and removing it from its current context element." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.actionStrip.hide();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56694, + "name": "show", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Showing the Action Strip and appending it the specified context element." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56695, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "line": 102, + "character": 11 + } + ], + "signatures": [ + { + "id": 56696, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Showing the Action Strip and appending it the specified context element." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.actionStrip.show(row);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "line": 102, + "character": 11 + } + ], + "parameters": [ + { + "id": 56697, + "name": "context", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56698, + "name": "show", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Showing the Action Strip and appending it the specified context element." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.actionStrip.show(row);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56699, + "name": "context", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56691, + 56692, + 56693 + ] + }, + { + "title": "Methods", + "children": [ + 56700, + 56694 + ] + } + ], + "categories": [ + { + "title": "Methods", + "children": [ + 56700, + 56694 + ] + }, + { + "title": "Properties", + "children": [ + 56691, + 56692, + 56693 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/action-strip.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/action-strip.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 56687, + "name": "IgrActionStrip", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 61638, + "name": "IgrActionStripResourceStrings", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61639, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61640, + "name": "IgrActionStripResourceStrings", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61638, + "name": "IgcActionStripResourceStrings", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61641, + "name": "igx_action_strip_button_more_title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-resource-strings.d.ts", + "line": 10, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61639 + ] + }, + { + "title": "Properties", + "children": [ + 61641 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-resource-strings.d.ts", + "line": 6, + "character": 25 + } + ] + }, + { + "id": 68627, + "name": "IgrActiveNodeChangeEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when the active node is changed" + } + ] + }, + "children": [ + { + "id": 68628, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68629, + "name": "IgrActiveNodeChangeEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68627, + "name": "IgcActiveNodeChangeEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68631, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the column index of the active node" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68632, + "name": "level", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the hierarchical level of the active node" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68634, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68630, + "name": "row", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the row index of the active node" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68633, + "name": "tag", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the type of the active node.\nThe GridKeydownTargetType is an enum or that specifies the possible target types" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70278, + "name": "GridKeydownTargetType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68628 + ] + }, + { + "title": "Properties", + "children": [ + 68631, + 68632, + 68634, + 68630, + 68633 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 67959, + "name": "IgrBaseEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67960, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67961, + "name": "IgrBaseEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67962, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67960 + ] + }, + { + "title": "Properties", + "children": [ + 67962 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 7, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 63578, + "name": "IgrForOfState" + }, + { + "type": "reference", + "target": 63615, + "name": "IgrGroupingDoneEventArgsDetail" + }, + { + "type": "reference", + "target": 65546, + "name": "IgrSortingExpression" + }, + { + "type": "reference", + "target": 67736, + "name": "IgrToggleViewEventArgsDetail" + }, + { + "type": "reference", + "target": 67741, + "name": "IgrColumnToggledEventArgsDetail" + }, + { + "type": "reference", + "target": 68393, + "name": "IgrGridScrollEventArgsDetail" + }, + { + "type": "reference", + "target": 68400, + "name": "IgrGridCellEventArgsDetail" + }, + { + "type": "reference", + "target": 68406, + "name": "IgrGridRowEventArgsDetail" + }, + { + "type": "reference", + "target": 68447, + "name": "IgrPinColumnEventArgsDetail" + }, + { + "type": "reference", + "target": 68473, + "name": "IgrGridEditDoneEventArgsDetail" + }, + { + "type": "reference", + "target": 68509, + "name": "IgrRowDataEventArgsDetail" + }, + { + "type": "reference", + "target": 68533, + "name": "IgrColumnResizeEventArgsDetail" + }, + { + "type": "reference", + "target": 68552, + "name": "IgrColumnVisibilityChangedEventArgsDetail" + }, + { + "type": "reference", + "target": 68558, + "name": "IgrColumnMovingStartEventArgsDetail" + }, + { + "type": "reference", + "target": 68563, + "name": "IgrColumnMovingEventArgsDetail" + }, + { + "type": "reference", + "target": 68569, + "name": "IgrColumnMovingEndEventArgsDetail" + }, + { + "type": "reference", + "target": 68576, + "name": "IgrGridKeydownEventArgsDetail" + }, + { + "type": "reference", + "target": 68591, + "name": "IgrRowDragEndEventArgsDetail" + }, + { + "type": "reference", + "target": 68609, + "name": "IgrRowToggleEventArgsDetail" + }, + { + "type": "reference", + "target": 68627, + "name": "IgrActiveNodeChangeEventArgsDetail" + }, + { + "type": "reference", + "target": 68635, + "name": "IgrGridToolbarExportEventArgsDetail" + }, + { + "type": "reference", + "target": 68961, + "name": "IgrGridCreatedEventArgsDetail" + }, + { + "type": "reference", + "target": 70087, + "name": "IgrForOfDataChangingEventArgsDetail" + }, + { + "type": "reference", + "target": 70126, + "name": "IgrPageEventArgsDetail" + }, + { + "type": "reference", + "target": 70214, + "name": "IgrRowExportingEventArgsDetail" + }, + { + "type": "reference", + "target": 70221, + "name": "IgrColumnExportingEventArgsDetail" + } + ] + }, + { + "id": 69021, + "name": "IgrBaseExporter", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true, + "isAbstract": true + }, + "children": [ + { + "id": 69022, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 2, + "character": 46 + } + ], + "signatures": [ + { + "id": 69023, + "name": "IgrBaseExporter", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 2, + "character": 46 + } + ], + "parameters": [ + { + "id": 69024, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isRest": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "reference", + "target": 69021, + "name": "IgcBaseExporter", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcBaseExporterEventMap, Constructor<LitElement>>(LitElement).constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcBaseExporterEventMap, Constructor<LitElement>>(LitElement).constructor" + } + }, + { + "id": 69025, + "name": "export", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "line": 27, + "character": 11 + } + ], + "signatures": [ + { + "id": 69026, + "name": "export", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Method for exporting IgxGrid component's data.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.exporterService.export(this.igxGridForExport, this.exportOptions);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxBaseExporter" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "line": 27, + "character": 11 + } + ], + "parameters": [ + { + "id": 69027, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 69028, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70042, + "name": "IgcExporterOptionsBase", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 69029, + "name": "exportData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "line": 39, + "character": 11 + } + ], + "signatures": [ + { + "id": 69030, + "name": "exportData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Method for exporting any kind of array data.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.exporterService.exportData(this.arrayForExport, this.exportOptions);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxBaseExporter" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "line": 39, + "character": 11 + } + ], + "parameters": [ + { + "id": 69031, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 69032, + "name": "options", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70042, + "name": "IgcExporterOptionsBase", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 69022 + ] + }, + { + "title": "Methods", + "children": [ + 69025, + 69029 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "line": 12, + "character": 34 + } + ], + "extendedTypes": [ + { + "type": "intersection", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "EventEmitterInterface" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "IgcBaseExporterEventMap" + }, + "name": "IgcBaseExporterEventMap", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "intrinsic", + "name": "this" + } + ], + "name": "EventEmitterInterface", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "LitElement" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "this" + } + ], + "name": "LitElement", + "package": "igniteui-webcomponents-grids" + } + ] + } + ] + }, + { + "id": 61853, + "name": "IgrBaseFilteringStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true, + "isAbstract": true + }, + "children": [ + { + "id": 61854, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61855, + "name": "IgrBaseFilteringStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61853, + "name": "IgcBaseFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61873, + "name": "filter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 31, + "character": 11 + } + ], + "signatures": [ + { + "id": 61874, + "name": "filter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 31, + "character": 11 + } + ], + "parameters": [ + { + "id": 61875, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61876, + "name": "expressionsTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61877, + "name": "advancedExpressionsTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61878, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + }, + { + "id": 61856, + "name": "findMatchByExpression", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "signatures": [ + { + "id": 61857, + "name": "findMatchByExpression", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "parameters": [ + { + "id": 61858, + "name": "rec", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61859, + "name": "expr", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61860, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61861, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61862, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 61869, + "name": "getFilterItems", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 27, + "character": 11 + } + ], + "signatures": [ + { + "id": 61870, + "name": "getFilterItems", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 27, + "character": 11 + } + ], + "parameters": [ + { + "id": 61871, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61872, + "name": "tree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 67950, + "name": "IgcFilterItem", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + }, + { + "id": 61863, + "name": "matchRecord", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 23, + "character": 11 + } + ], + "signatures": [ + { + "id": 61864, + "name": "matchRecord", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 23, + "character": 11 + } + ], + "parameters": [ + { + "id": 61865, + "name": "rec", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61866, + "name": "expressions", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + { + "id": 61867, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61868, + "name": "entity", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61854 + ] + }, + { + "title": "Methods", + "children": [ + 61873, + 61856, + 61869, + 61863 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 13, + "character": 34 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 61826, + "name": "IgrNoopFilteringStrategy" + } + ] + }, + { + "id": 70179, + "name": "IgrBaseSearchInfo", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70180, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70181, + "name": "IgrBaseSearchInfo", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70179, + "name": "IgcBaseSearchInfo", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70186, + "name": "caseSensitive", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 70187, + "name": "caseSensitive", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70188, + "name": "caseSensitive", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 70189, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70198, + "name": "content", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 28, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 29, + "character": 21 + } + ], + "getSignature": { + "id": 70199, + "name": "content", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 29, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 70200, + "name": "content", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 28, + "character": 15 + } + ], + "parameters": [ + { + "id": 70201, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70190, + "name": "exactMatch", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 20, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 21, + "character": 21 + } + ], + "getSignature": { + "id": 70191, + "name": "exactMatch", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 21, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70192, + "name": "exactMatch", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 20, + "character": 15 + } + ], + "parameters": [ + { + "id": 70193, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70194, + "name": "matchCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 70195, + "name": "matchCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 70196, + "name": "matchCount", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 70197, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70182, + "name": "searchText", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 12, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 70183, + "name": "searchText", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 70184, + "name": "searchText", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 12, + "character": 15 + } + ], + "parameters": [ + { + "id": 70185, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70180 + ] + }, + { + "title": "Accessors", + "children": [ + 70186, + 70198, + 70190, + 70194, + 70182 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 68809, + "name": "IgrSearchInfo" + } + ] + }, + { + "id": 61642, + "name": "IgrBooleanFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides filtering operations for booleans" + } + ], + "blockTags": [ + { + "tag": "@export", + "content": [] + } + ] + }, + "children": [ + { + "id": 61645, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61646, + "name": "IgrBooleanFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61642, + "name": "IgcBooleanFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61663, + "name": "IgcFilteringOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61662, + "name": "IgcFilteringOperand.constructor" + } + }, + { + "id": 61647, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61648, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcFilteringOperand.operations" + } + }, + "setSignature": { + "id": 61649, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61650, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcFilteringOperand.operations" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 61664, + "name": "IgcFilteringOperand.operations" + } + }, + { + "id": 61656, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61657, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61658, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 61674, + "name": "IgcFilteringOperand.append" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61673, + "name": "IgcFilteringOperand.append" + } + }, + { + "id": 61653, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61654, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61655, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61671, + "name": "IgcFilteringOperand.condition" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61670, + "name": "IgcFilteringOperand.condition" + } + }, + { + "id": 61651, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61652, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 61669, + "name": "IgcFilteringOperand.conditionList" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61668, + "name": "IgcFilteringOperand.conditionList" + } + }, + { + "id": 61643, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61644, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61661, + "name": "IgcFilteringOperand.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61660, + "name": "IgcFilteringOperand.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61645 + ] + }, + { + "title": "Accessors", + "children": [ + 61647 + ] + }, + { + "title": "Methods", + "children": [ + 61656, + 61653, + 61651, + 61643 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-boolean-filtering-operand.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 61979, + "name": "IgrByLevelTreeGridMergeStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61982, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61983, + "name": "IgrByLevelTreeGridMergeStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61979, + "name": "IgcByLevelTreeGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61961, + "name": "IgcDefaultMergeStrategy.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61960, + "name": "IgcDefaultMergeStrategy.constructor" + } + }, + { + "id": 61984, + "name": "comparer", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "line": 13, + "character": 11 + } + ], + "signatures": [ + { + "id": 61985, + "name": "comparer", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 61986, + "name": "prevRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61987, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61988, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61989, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61990, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "overwrites": { + "type": "reference", + "target": 61973, + "name": "IgcDefaultMergeStrategy.comparer" + } + } + ], + "overwrites": { + "type": "reference", + "target": 61972, + "name": "IgcDefaultMergeStrategy.comparer" + } + }, + { + "id": 61991, + "name": "merge", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "signatures": [ + { + "id": 61992, + "name": "merge", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "parameters": [ + { + "id": 61993, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61994, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61995, + "name": "comparer", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61996, + "name": "result", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61997, + "name": "activeRowIndexes", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 61998, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61999, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62000, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 61963, + "name": "IgcDefaultMergeStrategy.merge" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61962, + "name": "IgcDefaultMergeStrategy.merge" + } + }, + { + "id": 61980, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 13, + "character": 18 + } + ], + "signatures": [ + { + "id": 61981, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 13, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61957, + "name": "IgcDefaultMergeStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61959, + "name": "IgcDefaultMergeStrategy.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61958, + "name": "IgcDefaultMergeStrategy.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61982 + ] + }, + { + "title": "Methods", + "children": [ + 61984, + 61991, + 61980 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61957, + "name": "IgcDefaultMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 70021, + "name": "IgrCancelableBrowserEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70022, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70023, + "name": "IgrCancelableBrowserEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70021, + "name": "IgcCancelableBrowserEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70040, + "name": "IgcCancelableEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 70039, + "name": "IgcCancelableEventArgs.constructor" + } + }, + { + "id": 70024, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 70041, + "name": "IgcCancelableEventArgs.cancel" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70022 + ] + }, + { + "title": "Properties", + "children": [ + 70024 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-browser-event-args.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 70038, + "name": "IgcCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 70038, + "name": "IgrCancelableEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70039, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70040, + "name": "IgrCancelableEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70038, + "name": "IgcCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70041, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70039 + ] + }, + { + "title": "Properties", + "children": [ + 70041 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "line": 7, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 70021, + "name": "IgrCancelableBrowserEventArgsDetail" + }, + { + "type": "reference", + "target": 70120, + "name": "IgrPageCancellableEventArgsDetail" + } + ] + }, + { + "id": 68902, + "name": "IgrCellPosition", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event is triggered when getting the current position of a certain cell" + } + ] + }, + "children": [ + { + "id": 68903, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68904, + "name": "IgrCellPosition", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68905, + "name": "rowIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 15, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 16, + "character": 21 + } + ], + "getSignature": { + "id": 68906, + "name": "rowIndex", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 16, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68907, + "name": "rowIndex", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "It returns the position (index) of the row, the cell is in" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 15, + "character": 15 + } + ], + "parameters": [ + { + "id": 68908, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68909, + "name": "visibleColumnIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 68910, + "name": "visibleColumnIndex", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68911, + "name": "visibleColumnIndex", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "It returns the position (index) of the column, the cell is in\nCounts only the visible (non hidden) columns" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 68912, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68903 + ] + }, + { + "title": "Accessors", + "children": [ + 68905, + 68909 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 68333, + "name": "IgrCellTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68334, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68335, + "name": "IgrCellTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68333, + "name": "IgcCellTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68340, + "name": "additionalTemplateContext", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 68341, + "name": "additionalTemplateContext", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68342, + "name": "additionalTemplateContext", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 68343, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68344, + "name": "cell", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 21, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 22, + "character": 21 + } + ], + "getSignature": { + "id": 68345, + "name": "cell", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 22, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68346, + "name": "cell", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 21, + "character": 15 + } + ], + "parameters": [ + { + "id": 68347, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68336, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68337, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68338, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68339, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68334 + ] + }, + { + "title": "Accessors", + "children": [ + 68340, + 68344, + 68336 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 63705, + "name": "IgrCellType", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface representing a cell in the grid. It is essentially the blueprint to a cell object.\nContains definitions of properties and methods, relevant to a cell" + } + ] + }, + "children": [ + { + "id": 63706, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63707, + "name": "IgrCellType", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63749, + "name": "cellID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional; The " + }, + { + "kind": "code", + "text": "`cellID`" + }, + { + "kind": "text", + "text": " is the unique key, used to identify the cell" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 73, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63744, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 69, + "character": 11 + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 63745, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63747, + "name": "columnID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 69, + "character": 30 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 63746, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 69, + "character": 18 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63748, + "name": "rowIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 69, + "character": 48 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 63747, + 63746, + 63748 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 69, + "character": 16 + } + ] + } + } + }, + { + "id": 63751, + "name": "readonly", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 83, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63752, + "name": "title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An optional title to display for the cell" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 87, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63750, + "name": "validation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional; An object representing the validation state of the cell.\nWhether it's valid or invalid, and if it has errors" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 80, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68939, + "name": "IgcGridValidationState", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 63757, + "name": "visibleColumnIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the column that the cell belongs to. It counts only the visible (not hidden) columns" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 96, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 63720, + "name": "active", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 38, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 39, + "character": 21 + } + ], + "getSignature": { + "id": 63721, + "name": "active", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 39, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 63722, + "name": "active", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the cell is currently active (focused)." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 38, + "character": 15 + } + ], + "parameters": [ + { + "id": 63723, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63732, + "name": "column", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 53, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 54, + "character": 21 + } + ], + "getSignature": { + "id": 63733, + "name": "column", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 54, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63734, + "name": "column", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the column that the cell belongs to." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 53, + "character": 15 + } + ], + "parameters": [ + { + "id": 63735, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63724, + "name": "editable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 43, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 44, + "character": 21 + } + ], + "getSignature": { + "id": 63725, + "name": "editable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 44, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 63726, + "name": "editable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the cell can be edited." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 43, + "character": 15 + } + ], + "parameters": [ + { + "id": 63727, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63728, + "name": "editMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 48, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 49, + "character": 21 + } + ], + "getSignature": { + "id": 63729, + "name": "editMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 49, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 63730, + "name": "editMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the cell is currently in edit mode." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 48, + "character": 15 + } + ], + "parameters": [ + { + "id": 63731, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63712, + "name": "editValue", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 28, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 29, + "character": 21 + } + ], + "getSignature": { + "id": 63713, + "name": "editValue", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 29, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 63714, + "name": "editValue", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value to display when the cell is in edit mode." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 28, + "character": 15 + } + ], + "parameters": [ + { + "id": 63715, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63740, + "name": "grid", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 64, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 65, + "character": 21 + } + ], + "getSignature": { + "id": 63741, + "name": "grid", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 65, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63742, + "name": "grid", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the grid instance containing the cell" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 64, + "character": 15 + } + ], + "parameters": [ + { + "id": 63743, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63736, + "name": "row", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 59, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 60, + "character": 21 + } + ], + "getSignature": { + "id": 63737, + "name": "row", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 60, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63738, + "name": "row", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the row that the cell belongs to" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 59, + "character": 15 + } + ], + "parameters": [ + { + "id": 63739, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63716, + "name": "selected", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 33, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 34, + "character": 21 + } + ], + "getSignature": { + "id": 63717, + "name": "selected", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 34, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 63718, + "name": "selected", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 33, + "character": 15 + } + ], + "parameters": [ + { + "id": 63719, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63708, + "name": "value", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 63709, + "name": "value", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 63710, + "name": "value", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The current value of the cell." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 63711, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63753, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 91, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 92, + "character": 21 + } + ], + "getSignature": { + "id": 63754, + "name": "width", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 92, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 63755, + "name": "width", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The CSS width of the cell as a string." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 91, + "character": 15 + } + ], + "parameters": [ + { + "id": 63756, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63764, + "name": "calculateSizeToFit", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 112, + "character": 11 + } + ], + "signatures": [ + { + "id": 63765, + "name": "calculateSizeToFit", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional;\nA method definition to calculate the size of the cell to fit the content\nThe method can be used to calculate the size of the cell with the longest content and resize all cells to that size" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 112, + "character": 11 + } + ], + "parameters": [ + { + "id": 63766, + "name": "range", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 63761, + "name": "setEditMode", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 104, + "character": 11 + } + ], + "signatures": [ + { + "id": 63762, + "name": "setEditMode", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A method definition to start or end the edit mode of the cell. It takes a boolean value as an argument" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 104, + "character": 11 + } + ], + "parameters": [ + { + "id": 63763, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 63758, + "name": "update", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 100, + "character": 11 + } + ], + "signatures": [ + { + "id": 63759, + "name": "update", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A method definition to update the value of the cell." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 100, + "character": 11 + } + ], + "parameters": [ + { + "id": 63760, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63706 + ] + }, + { + "title": "Properties", + "children": [ + 63749, + 63744, + 63751, + 63752, + 63750, + 63757 + ] + }, + { + "title": "Accessors", + "children": [ + 63720, + 63732, + 63724, + 63728, + 63712, + 63740, + 63736, + 63716, + 63708, + 63753 + ] + }, + { + "title": "Methods", + "children": [ + 63764, + 63761, + 63758 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "line": 18, + "character": 25 + } + ] + }, + { + "id": 68374, + "name": "IgrClipboardOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An interface describing settings for clipboard options" + } + ] + }, + "children": [ + { + "id": 68375, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68376, + "name": "IgrClipboardOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68374, + "name": "IgcClipboardOptions", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68385, + "name": "copyFormatters", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 32, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 33, + "character": 21 + } + ], + "getSignature": { + "id": 68386, + "name": "copyFormatters", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 33, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68387, + "name": "copyFormatters", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Apply the columns formatters (if any) on the data in the clipboard output." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 32, + "character": 15 + } + ], + "parameters": [ + { + "id": 68388, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68381, + "name": "copyHeaders", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 25, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 26, + "character": 21 + } + ], + "getSignature": { + "id": 68382, + "name": "copyHeaders", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 26, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68383, + "name": "copyHeaders", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Include the columns headers in the clipboard output." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 25, + "character": 15 + } + ], + "parameters": [ + { + "id": 68384, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68377, + "name": "enabled", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 68378, + "name": "enabled", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68379, + "name": "enabled", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/disables the copy behavior" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 68380, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68389, + "name": "separator", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 39, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 40, + "character": 21 + } + ], + "getSignature": { + "id": 68390, + "name": "separator", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 40, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68391, + "name": "separator", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The separator used for formatting the copy output. Defaults to " + }, + { + "kind": "code", + "text": "`\\t`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 39, + "character": 15 + } + ], + "parameters": [ + { + "id": 68392, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68375 + ] + }, + { + "title": "Accessors", + "children": [ + 68385, + 68381, + 68377, + 68389 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 56801, + "name": "IgrColumn", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "**Ignite UI for Angular Column** - [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#columns-configuration) The Ignite UI Column is used within an " + }, + { + "kind": "code", + "text": "`igx-grid`" + }, + { + "kind": "text", + "text": " element to define what data the column will show. Features such as sorting, filtering & editing are enabled at the column level. You can also provide a template containing custom content inside the column using " + }, + { + "kind": "code", + "text": "`ng-template`" + }, + { + "kind": "text", + "text": " which will be used for all cells within the column." + } + ] + }, + "children": [ + { + "id": 56910, + "name": "onExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56911, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56912, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56913, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56906, + "name": "onHiddenChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56907, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56908, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56909, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56918, + "name": "onPinnedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56919, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56920, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56921, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56914, + "name": "onWidthChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56915, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56916, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56917, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56853, + "name": "additionalTemplateContext", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets custom properties provided in additional template context.\n\n```html\n<igx-column [additionalTemplateContext]=\"contextObject\">\n <ng-template igxCell let-cell=\"cell\" let-props=\"additionalTemplateContext\">\n {{ props }}\n </ng-template>\n</igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56829, + "name": "autosizeHeader", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column header is included in autosize logic.\nUseful when template for a column header is sized based on parent, for example a default `div`.\nDefault value is `false`.\n```typescript\nlet isResizable = this.column.resizable;\n```\n```html\n<igx-column [resizable] = \"true\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56863, + "name": "bodyTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the `bodyTemplate`.\n```typescript\nlet bodyTemplate = this.column.bodyTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68333, + "name": "IgcCellTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56841, + "name": "cellClasses", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a conditional class selector of the column cells.\nAccepts an object literal, containing key-value pairs,\nwhere the key is the name of the CSS class, while the\nvalue is either a callback function that returns a boolean,\nor boolean, like so:\n```typescript\ncallback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; }\ncellClasses = { 'className' : this.callback };\n```\n```html\n<igx-column [cellClasses] = \"cellClasses\"></igx-column>\n<igx-column [cellClasses] = \"{'class1' : true }\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56842, + "name": "cellStyles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets conditional style properties on the column cells.\nSimilar to `ngStyle` it accepts an object literal where the keys are\nthe style properties and the value is the expression to be evaluated.\nAs with `cellClasses` it accepts a callback function.\n```typescript\nstyles = {\n background: 'royalblue',\n color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'\n}\n```\n```html\n<igx-column [cellStyles]=\"styles\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56850, + "name": "colEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Column index where the current field should end.\nThe amount of columns between colStart and colEnd will determine the amount of spanning columns to that field\n```html\n<igx-column-layout>\n <igx-column [colEnd]=\"3\" [rowStart]=\"1\" [colStart]=\"1\"></igx-column>\n</igx-column-layout>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56852, + "name": "colStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Column index from which the field is starting.\n```html\n<igx-column-layout>\n <igx-column [colStart]=\"1\" [rowStart]=\"1\"></igx-column>\n</igx-column-layout>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56848, + "name": "dataType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the data type of the column values.\nDefault value is `string`.\n```typescript\nlet columnDataType = this.column.dataType;\n```\n```html\n<igx-column [dataType] = \"'number'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70242, + "name": "GridColumnDataType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56859, + "name": "disabledSummaries", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the summary operands to exclude from display.\nAccepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc.\n```typescript\nlet disabledSummaries = this.column.disabledSummaries;\n```\n```html\n<igx-column [disabledSummaries]=\"['min', 'max', 'average']\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 56833, + "name": "disableHiding", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets whether the hiding is disabled.\n```typescript\nlet isHidingDisabled = this.column.disableHiding;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56834, + "name": "disablePinning", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets whether the pinning is disabled.\n```typescript\nlet isPinningDisabled = this.column.disablePinning;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56826, + "name": "editable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets whether the column is editable.\nDefault value is `false`.\n```typescript\nlet isEditable = this.column.editable;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56876, + "name": "editorOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pass optional properties for the default column editors." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68357, + "name": "IgcColumnEditorOptions", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56866, + "name": "errorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the validation error template.\n```typescript\nlet errorTemplate = this.column.errorTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68333, + "name": "IgcCellTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56819, + "name": "field", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the `field` value.\n```typescript\nlet columnField = this.column.field;\n```\n```html\n<igx-column [field] = \"'ID'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56827, + "name": "filterable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column is filterable.\nDefault value is `true`.\n```typescript\nlet isFilterable = this.column.filterable;\n```\n```html\n<igx-column [filterable] = \"false\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56867, + "name": "filterCellTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the `filterCellTemplate`.\n```typescript\nlet filterCellTemplate = this.column.filterCellTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 62052, + "name": "IgcColumnTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56845, + "name": "filteringIgnoreCase", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column filtering should be case sensitive.\nDefault value is `true`.\n```typescript\nlet filteringIgnoreCase = this.column.filteringIgnoreCase;\n```\n```html\n<igx-column [filteringIgnoreCase] = \"false\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56860, + "name": "filters", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column `filters`.\n```typescript\nlet columnFilters = this.column.filters'\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56843, + "name": "formatter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Applies display format to cell values in the column. Does not modify the underlying data." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56825, + "name": "groupable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column is groupable.\nDefault value is `false`.\n```typescript\nlet isGroupable = this.column.groupable;\n```\n```html\n<igx-column [groupable] = \"true\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56830, + "name": "hasSummary", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets a value indicating whether the summary for the column is enabled.\n```typescript\nlet hasSummary = this.column.hasSummary;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56821, + "name": "header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the `header` value.\n```typescript\nlet columnHeader = this.column.header;\n```\n```html\n<igx-column [header] = \"'ID'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56837, + "name": "headerClasses", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the class selector of the column header.\n```typescript\nlet columnHeaderClass = this.column.headerClasses;\n```\n```html\n<igx-column [headerClasses] = \"'column-header'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56839, + "name": "headerGroupClasses", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the class selector of the column group header.\n```typescript\nlet columnHeaderClass = this.column.headerGroupClasses;\n```\n```html\n<igx-column [headerGroupClasses] = \"'column-group-header'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56840, + "name": "headerGroupStyles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets conditional style properties on the column header group wrapper.\nSimilar to `ngStyle` it accepts an object literal where the keys are\nthe style properties and the value is the expression to be evaluated.\n```typescript\nstyles = {\n background: 'royalblue',\n color: (column) => column.pinned ? 'red': 'inherit'\n}\n```\n```html\n<igx-column [headerGroupStyles]=\"styles\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56838, + "name": "headerStyles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets conditional style properties on the column header.\nSimilar to `ngStyle` it accepts an object literal where the keys are\nthe style properties and the value is the expression to be evaluated.\n```typescript\nstyles = {\n background: 'royalblue',\n color: (column) => column.pinned ? 'red': 'inherit'\n}\n```\n```html\n<igx-column [headerStyles]=\"styles\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56864, + "name": "headerTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the header template.\n```typescript\nlet headerTemplate = this.column.headerTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 62052, + "name": "IgcColumnTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56831, + "name": "hidden", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets whether the column is hidden.\n```typescript\nlet isHidden = this.column.hidden;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56865, + "name": "inlineEditorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the inline editor template.\n```typescript\nlet inlineEditorTemplate = this.column.inlineEditorTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68333, + "name": "IgcCellTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56836, + "name": "maxWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the maximum `width` of the column.\n```typescript\nlet columnMaxWidth = this.column.width;\n```\n```html\n<igx-column [maxWidth] = \"'150px'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56820, + "name": "merge", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether to merge cells in this column.\n```html\n<igx-column [merge]=\"true\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56854, + "name": "minWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the minimum `width` of the column.\nDefault value is `88`;\n```typescript\nlet columnMinWidth = this.column.minWidth;\n```\n```html\n<igx-column [minWidth] = \"'100px'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56878, + "name": "parent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the parent column.\n```typescript\nlet parentColumn = this.column.parent;\n```\n```typescript\nthis.column.parent = higherLevelColumn;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56857, + "name": "pinned", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets whether the column is `pinned`.\n```typescript\nlet isPinned = this.column.pinned;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56856, + "name": "pinningPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the pinning position of the column.\n```typescript\nlet pinningPosition = this.column.pinningPosition;" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56875, + "name": "pipeArgs", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68348, + "name": "IgcColumnPipeArgs", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56828, + "name": "resizable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column is resizable.\nDefault value is `false`.\n```typescript\nlet isResizable = this.column.resizable;\n```\n```html\n<igx-column [resizable] = \"true\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56849, + "name": "rowEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Row index where the current field should end.\nThe amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field\n```html\n<igx-column-layout>\n <igx-column [rowEnd]=\"2\" [rowStart]=\"1\" [colStart]=\"1\"></igx-column>\n</igx-column-layout>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56851, + "name": "rowStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Row index from which the field is starting.\n```html\n<igx-column-layout>\n <igx-column [rowStart]=\"1\" [colStart]=\"1\"></igx-column>\n</igx-column-layout>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56847, + "name": "searchable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column is `searchable`.\nDefault value is `true`.\n```typescript\nlet isSearchable = this.column.searchable';\n```\n```html\n <igx-column [searchable] = \"false\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56824, + "name": "selectable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if the column is selectable.\n```typescript\nlet columnSelectable = this.column.selectable;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56832, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if the column is selected.\n```typescript\nlet isSelected = this.column.selected;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56823, + "name": "sortable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column is sortable.\nDefault value is `false`.\n```typescript\nlet isSortable = this.column.sortable;\n```\n```html\n<igx-column [sortable] = \"true\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56846, + "name": "sortingIgnoreCase", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets whether the column sorting should be case sensitive.\nDefault value is `true`.\n```typescript\nlet sortingIgnoreCase = this.column.sortingIgnoreCase;\n```\n```html\n<igx-column [sortingIgnoreCase] = \"false\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56861, + "name": "sortStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column `sortStrategy`.\n```typescript\nlet sortStrategy = this.column.sortStrategy\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68323, + "name": "IgcSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56858, + "name": "summaries", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column `summaries`.\n```typescript\nlet columnSummaries = this.column.summaries;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56844, + "name": "summaryFormatter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The summaryFormatter is used to format the display of the column summaries.\n\nIn this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter\nto change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.\n\n```typescript\ncolumnInit(column: IgxColumnComponent) {\n if (column.field == \"OrderDate\") {\n column.summaryFormatter = this.summaryFormat;\n }\n}\n\nsummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {\n const result = summary.summaryResult;\n if(summaryResult.key !== 'count' && result !== null && result !== undefined) {\n const pipe = new DatePipe('fr-FR');\n return pipe.transform(result,'mediumDate');\n }\n return result;\n}\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56862, + "name": "summaryTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the `summaryTemplate`.\n```typescript\nlet summaryTemplate = this.column.summaryTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68326, + "name": "IgcSummaryTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56822, + "name": "title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/gets the `title` value.\n```typescript\nlet title = this.column.title;\n```\n```html\n<igx-column [title] = \"'Some column tooltip'\"></igx-column>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56874, + "name": "visibleWhenCollapsed", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the column will be visible when its parent is collapsed.\n```html\n<igx-column-group>\n <igx-column [visibleWhenCollapsed]=\"true\"></igx-column>\n</igx-column-group>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56835, + "name": "width", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the `width` of the column.\n```typescript\nlet columnWidth = this.column.width;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56872, + "name": "childColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list containing all the child columns under this column (if any).\nEmpty without children or if this column is not Group or Layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 56869, + "name": "columnGroup", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a boolean indicating if the column is a `ColumnGroup`.\n```typescript\nlet columnGroup = this.column.columnGroup;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56870, + "name": "columnLayout", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout.\n```typescript\nlet columnGroup = this.column.columnGroup;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56871, + "name": "columnLayoutChild", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a boolean indicating if the column is a child of a `ColumnLayout` for multi-row layout.\n```typescript\nlet columnLayoutChild = this.column.columnLayoutChild;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56877, + "name": "filteringExpressionsTree", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the filteringExpressionsTree of the column.\n```typescript\nlet tree = this.column.filteringExpressionsTree;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56855, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column index.\n```typescript\nlet columnIndex = this.column.index;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56873, + "name": "level", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the level of the column in a column group.\nReturns `0` if the column doesn't have a `parent`.\n```typescript\nlet columnLevel = this.column.level;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56879, + "name": "topLevelParent", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the top level parent column.\n```typescript\nlet topLevelParent = this.column.topLevelParent;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56868, + "name": "visibleIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column visible index.\nIf the column is not visible, returns `-1`.\n```typescript\nlet visibleColumnIndex = this.column.visibleIndex;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56900, + "name": "autosize", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Autosize the column to the longest currently visible cell value, including the header cell.\n```typescript" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56901, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1054, + "character": 11 + } + ], + "signatures": [ + { + "id": 56902, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Autosize the column to the longest currently visible cell value, including the header cell.\n" + }, + { + "kind": "code", + "text": "```typescript\n@ViewChild('grid') grid: IgxGridComponent;\nlet column = this.grid.columnList.filter(c => c.field === 'ID')[0];\ncolumn.autosize();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1054, + "character": 11 + } + ], + "parameters": [ + { + "id": 56903, + "name": "byHeaderOnly", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set if column should be autosized based only on the header content." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56904, + "name": "autosize", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Autosize the column to the longest currently visible cell value, including the header cell.\n" + }, + { + "kind": "code", + "text": "```typescript\n@ViewChild('grid') grid: IgxGridComponent;\nlet column = this.grid.columnList.filter(c => c.field === 'ID')[0];\ncolumn.autosize();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56905, + "name": "byHeaderOnly", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set if column should be autosized based only on the header content." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56894, + "name": "move", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Moves a column to the specified visible index.\nIf passed index is invalid, or if column would receive a different visible index after moving, moving is not performed.\nIf passed index would move the column to a different column group. moving is not performed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56895, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1039, + "character": 11 + } + ], + "signatures": [ + { + "id": 56896, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Moves a column to the specified visible index.\nIf passed index is invalid, or if column would receive a different visible index after moving, moving is not performed.\nIf passed index would move the column to a different column group. moving is not performed." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ncolumn.move(index);\n```" + } + ] + }, + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1039, + "character": 11 + } + ], + "parameters": [ + { + "id": 56897, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56898, + "name": "move", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Moves a column to the specified visible index.\nIf passed index is invalid, or if column would receive a different visible index after moving, moving is not performed.\nIf passed index would move the column to a different column group. moving is not performed." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ncolumn.move(index);\n```" + } + ] + }, + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56899, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56880, + "name": "pin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins the column in the specified position at the provided index in that pinned area.\nDefaults to index `0` if not provided, or to the initial index in the pinned area.\nReturns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned.\nColumn cannot be pinned if:\n- Is already pinned\n- index argument is out of range\n```typescript\nlet success = this.column.pin();\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56881, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1008, + "character": 11 + } + ], + "signatures": [ + { + "id": 56882, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins the column in the specified position at the provided index in that pinned area.\nDefaults to index " + }, + { + "kind": "code", + "text": "`0`" + }, + { + "kind": "text", + "text": " if not provided, or to the initial index in the pinned area.\nReturns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " if the column is successfully pinned. Returns " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " if the column cannot be pinned.\nColumn cannot be pinned if:\n- Is already pinned\n- index argument is out of range\n" + }, + { + "kind": "code", + "text": "```typescript\nlet success = this.column.pin();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1008, + "character": 11 + } + ], + "parameters": [ + { + "id": 56883, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56884, + "name": "pinningPosition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 56885, + "name": "pin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins the column in the specified position at the provided index in that pinned area.\nDefaults to index " + }, + { + "kind": "code", + "text": "`0`" + }, + { + "kind": "text", + "text": " if not provided, or to the initial index in the pinned area.\nReturns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " if the column is successfully pinned. Returns " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " if the column cannot be pinned.\nColumn cannot be pinned if:\n- Is already pinned\n- index argument is out of range\n" + }, + { + "kind": "code", + "text": "```typescript\nlet success = this.column.pin();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56886, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56887, + "name": "pinningPosition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 56888, + "name": "unpin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins the column and place it at the provided index in the unpinned area.\nDefaults to index `0` if not provided, or to the initial index in the unpinned area.\nReturns `true` if the column is successfully unpinned. Returns `false` if the column cannot be unpinned.\nColumn cannot be unpinned if:\n- Is already unpinned\n- index argument is out of range\n```typescript\nlet success = this.column.unpin();\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56889, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1024, + "character": 11 + } + ], + "signatures": [ + { + "id": 56890, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins the column and place it at the provided index in the unpinned area.\nDefaults to index " + }, + { + "kind": "code", + "text": "`0`" + }, + { + "kind": "text", + "text": " if not provided, or to the initial index in the unpinned area.\nReturns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " if the column is successfully unpinned. Returns " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " if the column cannot be unpinned.\nColumn cannot be unpinned if:\n- Is already unpinned\n- index argument is out of range\n" + }, + { + "kind": "code", + "text": "```typescript\nlet success = this.column.unpin();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "line": 1024, + "character": 11 + } + ], + "parameters": [ + { + "id": 56891, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 56892, + "name": "unpin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins the column and place it at the provided index in the unpinned area.\nDefaults to index " + }, + { + "kind": "code", + "text": "`0`" + }, + { + "kind": "text", + "text": " if not provided, or to the initial index in the unpinned area.\nReturns " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " if the column is successfully unpinned. Returns " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " if the column cannot be unpinned.\nColumn cannot be unpinned if:\n- Is already unpinned\n- index argument is out of range\n" + }, + { + "kind": "code", + "text": "```typescript\nlet success = this.column.unpin();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56893, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56853, + 56829, + 56863, + 56841, + 56842, + 56850, + 56852, + 56848, + 56859, + 56833, + 56834, + 56826, + 56876, + 56866, + 56819, + 56827, + 56867, + 56845, + 56860, + 56843, + 56825, + 56830, + 56821, + 56837, + 56839, + 56840, + 56838, + 56864, + 56831, + 56865, + 56836, + 56820, + 56854, + 56878, + 56857, + 56856, + 56875, + 56828, + 56849, + 56851, + 56847, + 56824, + 56832, + 56823, + 56846, + 56861, + 56858, + 56844, + 56862, + 56822, + 56874, + 56835 + ] + }, + { + "title": "Accessors", + "children": [ + 56872, + 56869, + 56870, + 56871, + 56877, + 56855, + 56873, + 56879, + 56868 + ] + }, + { + "title": "Methods", + "children": [ + 56900, + 56894, + 56880, + 56888 + ] + }, + { + "title": "Set Signatures", + "children": [ + 56910, + 56906, + 56918, + 56914 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 56872, + 56869, + 56870, + 56871, + 56877, + 56855, + 56873, + 56879, + 56868 + ] + }, + { + "title": "Events", + "children": [ + 56910, + 56906, + 56918, + 56914 + ] + }, + { + "title": "Methods", + "children": [ + 56900, + 56894, + 56880, + 56888 + ] + }, + { + "title": "Properties", + "children": [ + 56853, + 56829, + 56863, + 56841, + 56842, + 56850, + 56852, + 56848, + 56859, + 56833, + 56834, + 56826, + 56876, + 56866, + 56819, + 56827, + 56867, + 56845, + 56860, + 56843, + 56825, + 56830, + 56821, + 56837, + 56839, + 56840, + 56838, + 56864, + 56831, + 56865, + 56836, + 56820, + 56854, + 56878, + 56857, + 56856, + 56875, + 56828, + 56849, + 56851, + 56847, + 56824, + 56832, + 56823, + 56846, + 56861, + 56858, + 56844, + 56862, + 56822, + 56874, + 56835 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/column.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/grids/column.ts", + "line": 44, + "character": 12 + } + ], + "signatures": [ + { + "id": 56805, + "name": "IgrColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68357, + "name": "IgrColumnEditorOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68358, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68359, + "name": "IgrColumnEditorOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68357, + "name": "IgcColumnEditorOptions", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70036, + "name": "IgcFieldEditorOptions.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 70035, + "name": "IgcFieldEditorOptions.constructor" + } + }, + { + "id": 68360, + "name": "dateTimeFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A custom input format string used for the built-in editors of date/time columns.\nSee the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-editor-options.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 70037, + "name": "IgcFieldEditorOptions.dateTimeFormat" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68358 + ] + }, + { + "title": "Properties", + "children": [ + 68360 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-editor-options.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 70034, + "name": "IgcFieldEditorOptions", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 70221, + "name": "IgrColumnExportingEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "columnExporting event arguments\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {\n// set args properties here\n});\n```" + } + ] + }, + "children": [ + { + "id": 70222, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70223, + "name": "IgrColumnExportingEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70221, + "name": "IgcColumnExportingEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 70227, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Skip the exporting column when set to true" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 45, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 70226, + "name": "columnIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Contains the exporting column index" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 38, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70225, + "name": "field", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Contains the exporting column field name" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70229, + "name": "grid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A reference to the grid owner." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 59, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 70224, + "name": "header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Contains the exporting column header" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70230, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 70228, + "name": "skipFormatter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Export the column's data without applying its formatter, when set to true" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 52, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70222 + ] + }, + { + "title": "Properties", + "children": [ + 70227, + 70226, + 70225, + 70229, + 70224, + 70230, + 70228 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "line": 17, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 56752, + "name": "IgrColumnGroup", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "**Ignite UI for Angular Column Group**" + } + ] + }, + "children": [ + { + "id": 56788, + "name": "onExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56789, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56790, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56791, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56784, + "name": "onHiddenChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56785, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56786, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56787, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56796, + "name": "onPinnedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56797, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56798, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56799, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56792, + "name": "onWidthChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56793, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56794, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56795, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56771, + "name": "children", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": -1, + "name": "HTMLCollection", + "package": "typescript" + } + }, + { + "id": 56772, + "name": "collapsible", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set if the column group is collapsible.\nDefault value is `false`\n```html\n <igx-column-group [collapsible] = \"true\"></igx-column-group>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56777, + "name": "collapsibleIndicatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allows you to define a custom template for expand/collapse indicator" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 62052, + "name": "IgcColumnTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56773, + "name": "expanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set whether the group is expanded or collapsed initially.\nApplied only if the collapsible property is set to `true`\nDefault value is `true`\n```html\n const state = false\n <igx-column-group [(expand)] = \"state\"></igx-column-group>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56780, + "name": "childColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list containing all the child columns under this column (if any).\nEmpty without children or if this column is not Group or Layout." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 56781, + "name": "columnGroup", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a boolean indicating if the column is a `ColumnGroup`.\n```typescript\nlet isColumnGroup = this.columnGroup.columnGroup\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56782, + "name": "columnLayout", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a boolean indicating if the column is a `ColumnLayout` for multi-row layout.\n```typescript\nlet columnGroup = this.column.columnGroup;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56775, + "name": "filters", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column group `filters`.\n```typescript\nlet columnGroupFilters = this.columnGroup.filters;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56778, + "name": "hidden", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets whether the column group is hidden.\n```typescript\nlet isHidden = this.columnGroup.hidden;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56776, + "name": "selectable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if the column group is selectable\n```typescript\nlet columnGroupSelectable = this.columnGroup.selectable;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56779, + "name": "selected", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if the column group is selected.\n```typescript\nlet isSelected = this.columnGroup.selected;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56774, + "name": "summaries", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column group `summaries`.\n```typescript\nlet columnGroupSummaries = this.columnGroup.summaries;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 56783, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the width of the column group.\n```typescript\nlet columnGroupWidth = this.columnGroup.width;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56771, + 56772, + 56777, + 56773 + ] + }, + { + "title": "Accessors", + "children": [ + 56780, + 56781, + 56782, + 56775, + 56778, + 56776, + 56779, + 56774, + 56783 + ] + }, + { + "title": "Set Signatures", + "children": [ + 56788, + 56784, + 56796, + 56792 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 56780, + 56781, + 56782, + 56775, + 56778, + 56776, + 56779, + 56774, + 56783 + ] + }, + { + "title": "Events", + "children": [ + 56788, + 56784, + 56796, + 56792 + ] + }, + { + "title": "Properties", + "children": [ + 56771, + 56772, + 56777, + 56773 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/column-group.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/grids/column-group.ts", + "line": 45, + "character": 12 + } + ], + "signatures": [ + { + "id": 56756, + "name": "IgrColumnGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 56923, + "name": "IgrColumnLayout", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Column layout for declaration of Multi-row Layout" + } + ] + }, + "children": [ + { + "id": 56948, + "name": "onExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56949, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56950, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56951, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56944, + "name": "onHiddenChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56945, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56946, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56947, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56956, + "name": "onPinnedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56957, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56958, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56959, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56952, + "name": "onWidthChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56953, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56954, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56955, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "string" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56943, + "name": "visibleIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the column visible index.\nIf the column is not visible, returns `-1`.\n```typescript\nlet visibleColumnIndex = this.column.visibleIndex;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 56942, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the width of the column layout.\n```typescript\nlet columnGroupWidth = this.columnGroup.width;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Accessors", + "children": [ + 56943, + 56942 + ] + }, + { + "title": "Set Signatures", + "children": [ + 56948, + 56944, + 56956, + 56952 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 56943, + 56942 + ] + }, + { + "title": "Events", + "children": [ + 56948, + 56944, + 56956, + 56952 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/column-layout.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/grids/column-layout.ts", + "line": 45, + "character": 12 + } + ], + "signatures": [ + { + "id": 56927, + "name": "IgrColumnLayout", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68569, + "name": "IgrColumnMovingEndEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to the end of a column moving operation in a grid" + } + ] + }, + "children": [ + { + "id": 68570, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68571, + "name": "IgrColumnMovingEndEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68569, + "name": "IgcColumnMovingEndEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68574, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`cancel`" + }, + { + "kind": "text", + "text": " returns whether the event has been intercepted and stopped\nIf the value becomes \"true\", it returns/exits from the method, instantiating the interface" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68575, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68572, + "name": "source", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The source of the event represents the column that is being moved.\nThe " + }, + { + "kind": "code", + "text": "`ColumnType`" + }, + { + "kind": "text", + "text": " contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68573, + "name": "target", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The target of the event represents the column, the source is being moved to.\nThe " + }, + { + "kind": "code", + "text": "`ColumnType`" + }, + { + "kind": "text", + "text": " contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68570 + ] + }, + { + "title": "Properties", + "children": [ + 68574, + 68575, + 68572, + 68573 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68563, + "name": "IgrColumnMovingEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to a column moving operation in a grid" + } + ] + }, + "children": [ + { + "id": 68564, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68565, + "name": "IgrColumnMovingEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68563, + "name": "IgcColumnMovingEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68567, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`cancel`" + }, + { + "kind": "text", + "text": " returns whether the event has been intercepted and stopped\nIf the value becomes \"true\", it returns/exits from the method, instantiating the interface" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-event-args.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68568, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68566, + "name": "source", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the column that is being moved.\nThe " + }, + { + "kind": "code", + "text": "`ColumnType`" + }, + { + "kind": "text", + "text": " contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68564 + ] + }, + { + "title": "Properties", + "children": [ + 68567, + 68568, + 68566 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68558, + "name": "IgrColumnMovingStartEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to the start of a column moving operation in a grid." + } + ] + }, + "children": [ + { + "id": 68559, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68560, + "name": "IgrColumnMovingStartEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68558, + "name": "IgcColumnMovingStartEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68562, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68561, + "name": "source", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the column that is being moved.\nThe " + }, + { + "kind": "code", + "text": "`ColumnType`" + }, + { + "kind": "text", + "text": " contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-start-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68559 + ] + }, + { + "title": "Properties", + "children": [ + 68562, + 68561 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-start-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68348, + "name": "IgrColumnPipeArgs", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68349, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68350, + "name": "IgrColumnPipeArgs", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68348, + "name": "IgcColumnPipeArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70027, + "name": "IgcFieldPipeArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 70026, + "name": "IgcFieldPipeArgs.constructor" + } + }, + { + "id": 68354, + "name": "currencyCode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The currency code of type string, default value undefined" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 70031, + "name": "IgcFieldPipeArgs.currencyCode" + } + }, + { + "id": 68353, + "name": "digitsInfo", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decimal representation options, specified by a string in the following format:\n" + }, + { + "kind": "code", + "text": "`{minIntegerDigits}`" + }, + { + "kind": "text", + "text": "." + }, + { + "kind": "code", + "text": "`{minFractionDigits}`" + }, + { + "kind": "text", + "text": "-" + }, + { + "kind": "code", + "text": "`{maxFractionDigits}`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "`minIntegerDigits`" + }, + { + "kind": "text", + "text": ": The minimum number of integer digits before the decimal point. Default is 1.\n" + }, + { + "kind": "code", + "text": "`minFractionDigits`" + }, + { + "kind": "text", + "text": ": The minimum number of digits after the decimal point. Default is 0.\n" + }, + { + "kind": "code", + "text": "`maxFractionDigits`" + }, + { + "kind": "text", + "text": ": The maximum number of digits after the decimal point. Default is 3." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 70030, + "name": "IgcFieldPipeArgs.digitsInfo" + } + }, + { + "id": 68355, + "name": "display", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allow us to display currency 'symbol' or 'code' or 'symbol-narrow' or our own string.\nThe value is of type string. By default is set to 'symbol'" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 38, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 70032, + "name": "IgcFieldPipeArgs.display" + } + }, + { + "id": 68351, + "name": "format", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The date/time components that a date column will display, using predefined options or a custom format string." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 70028, + "name": "IgcFieldPipeArgs.format" + } + }, + { + "id": 68352, + "name": "timezone", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 70029, + "name": "IgcFieldPipeArgs.timezone" + } + }, + { + "id": 68356, + "name": "weekStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The first week day to be displayed in calendar when filtering or editing a date column" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 43, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": 70033, + "name": "IgcFieldPipeArgs.weekStart" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68349 + ] + }, + { + "title": "Properties", + "children": [ + 68354, + 68353, + 68355, + 68351, + 68352, + 68356 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-pipe-args.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 70025, + "name": "IgcFieldPipeArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68533, + "name": "IgrColumnResizeEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments when a column is being resized" + } + ] + }, + "children": [ + { + "id": 68534, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68535, + "name": "IgrColumnResizeEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68533, + "name": "IgcColumnResizeEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68536, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the information of the column that is being resized" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68538, + "name": "newWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the new width, the column is being resized to" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 68539, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68537, + "name": "prevWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the old width of the column before the resizing" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68534 + ] + }, + { + "title": "Properties", + "children": [ + 68536, + 68538, + 68539, + 68537 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68431, + "name": "IgrColumnSelectionEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments when the selection state of a column is being changed\nThe event is cancelable" + } + ] + }, + "children": [ + { + "id": 68432, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68433, + "name": "IgrColumnSelectionEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68431, + "name": "IgcColumnSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68436, + "name": "added", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an array of all added columns\nWhenever a column has been selected, the array is \"refreshed\" with the selected columns" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 68438, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 40, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68435, + "name": "newSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the newly selected columns" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 68434, + "name": "oldSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an array of columns, that have already been selected" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 68439, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 46, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68437, + "name": "removed", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an array of all columns, removed from the selection\nWhenever a column has been deselected, the array is \"refreshed\" with the columns, that have been previously selected, but are no longer" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68432 + ] + }, + { + "title": "Properties", + "children": [ + 68436, + 68438, + 68435, + 68434, + 68439, + 68437 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 67781, + "name": "IgrColumnState", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67782, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67783, + "name": "IgrColumnState", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67781, + "name": "IgcColumnState", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67864, + "name": "colEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 104, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 67882, + "name": "collapsible", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 129, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67863, + "name": "colStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 101, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 67860, + "name": "columnLayout", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 92, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67883, + "name": "expanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 132, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67865, + "name": "parent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 110, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 67862, + "name": "rowEnd", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 98, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 67861, + "name": "rowStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 95, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 67884, + "name": "visibleWhenCollapsed", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 135, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67856, + "name": "columnGroup", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 87, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 88, + "character": 21 + } + ], + "getSignature": { + "id": 67857, + "name": "columnGroup", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 88, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67858, + "name": "columnGroup", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 87, + "character": 15 + } + ], + "parameters": [ + { + "id": 67859, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67828, + "name": "dataType", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 59, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 60, + "character": 21 + } + ], + "getSignature": { + "id": 67829, + "name": "dataType", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 60, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70242, + "name": "GridColumnDataType", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 67830, + "name": "dataType", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 59, + "character": 15 + } + ], + "parameters": [ + { + "id": 67831, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70242, + "name": "GridColumnDataType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67874, + "name": "disableHiding", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 121, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 122, + "character": 21 + } + ], + "getSignature": { + "id": 67875, + "name": "disableHiding", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 122, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67876, + "name": "disableHiding", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 121, + "character": 15 + } + ], + "parameters": [ + { + "id": 67877, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67878, + "name": "disablePinning", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 125, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 126, + "character": 21 + } + ], + "getSignature": { + "id": 67879, + "name": "disablePinning", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 126, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67880, + "name": "disablePinning", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 125, + "character": 15 + } + ], + "parameters": [ + { + "id": 67881, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67796, + "name": "editable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 27, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 28, + "character": 21 + } + ], + "getSignature": { + "id": 67797, + "name": "editable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 28, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67798, + "name": "editable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 27, + "character": 15 + } + ], + "parameters": [ + { + "id": 67799, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67836, + "name": "field", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 67, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 68, + "character": 21 + } + ], + "getSignature": { + "id": 67837, + "name": "field", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 68, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67838, + "name": "field", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 67, + "character": 15 + } + ], + "parameters": [ + { + "id": 67839, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67792, + "name": "filterable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 67793, + "name": "filterable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67794, + "name": "filterable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 67795, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67804, + "name": "filteringIgnoreCase", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 35, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 36, + "character": 21 + } + ], + "getSignature": { + "id": 67805, + "name": "filteringIgnoreCase", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 36, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67806, + "name": "filteringIgnoreCase", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 35, + "character": 15 + } + ], + "parameters": [ + { + "id": 67807, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67820, + "name": "groupable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 51, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 52, + "character": 21 + } + ], + "getSignature": { + "id": 67821, + "name": "groupable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 52, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67822, + "name": "groupable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 51, + "character": 15 + } + ], + "parameters": [ + { + "id": 67823, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67832, + "name": "hasSummary", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 63, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 64, + "character": 21 + } + ], + "getSignature": { + "id": 67833, + "name": "hasSummary", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 64, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67834, + "name": "hasSummary", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 63, + "character": 15 + } + ], + "parameters": [ + { + "id": 67835, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67844, + "name": "header", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 75, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 76, + "character": 21 + } + ], + "getSignature": { + "id": 67845, + "name": "header", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 76, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67846, + "name": "header", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 75, + "character": 15 + } + ], + "parameters": [ + { + "id": 67847, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67808, + "name": "headerClasses", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 39, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 40, + "character": 21 + } + ], + "getSignature": { + "id": 67809, + "name": "headerClasses", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 40, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67810, + "name": "headerClasses", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 39, + "character": 15 + } + ], + "parameters": [ + { + "id": 67811, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67812, + "name": "headerGroupClasses", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 43, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 44, + "character": 21 + } + ], + "getSignature": { + "id": 67813, + "name": "headerGroupClasses", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 44, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67814, + "name": "headerGroupClasses", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 43, + "character": 15 + } + ], + "parameters": [ + { + "id": 67815, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67824, + "name": "hidden", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 55, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 56, + "character": 21 + } + ], + "getSignature": { + "id": 67825, + "name": "hidden", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 56, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67826, + "name": "hidden", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 55, + "character": 15 + } + ], + "parameters": [ + { + "id": 67827, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67866, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 113, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 114, + "character": 21 + } + ], + "getSignature": { + "id": 67867, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 114, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67868, + "name": "key", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 113, + "character": 15 + } + ], + "parameters": [ + { + "id": 67869, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67816, + "name": "maxWidth", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 47, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 48, + "character": 21 + } + ], + "getSignature": { + "id": 67817, + "name": "maxWidth", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 48, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67818, + "name": "maxWidth", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 47, + "character": 15 + } + ], + "parameters": [ + { + "id": 67819, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67870, + "name": "parentKey", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 117, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 118, + "character": 21 + } + ], + "getSignature": { + "id": 67871, + "name": "parentKey", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 118, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67872, + "name": "parentKey", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 117, + "character": 15 + } + ], + "parameters": [ + { + "id": 67873, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67784, + "name": "pinned", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 15, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 16, + "character": 21 + } + ], + "getSignature": { + "id": 67785, + "name": "pinned", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 16, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67786, + "name": "pinned", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 15, + "character": 15 + } + ], + "parameters": [ + { + "id": 67787, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67848, + "name": "resizable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 79, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 80, + "character": 21 + } + ], + "getSignature": { + "id": 67849, + "name": "resizable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 80, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67850, + "name": "resizable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 79, + "character": 15 + } + ], + "parameters": [ + { + "id": 67851, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67852, + "name": "searchable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 83, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 84, + "character": 21 + } + ], + "getSignature": { + "id": 67853, + "name": "searchable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 84, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67854, + "name": "searchable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 83, + "character": 15 + } + ], + "parameters": [ + { + "id": 67855, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67788, + "name": "sortable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 67789, + "name": "sortable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67790, + "name": "sortable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 67791, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67800, + "name": "sortingIgnoreCase", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 31, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 32, + "character": 21 + } + ], + "getSignature": { + "id": 67801, + "name": "sortingIgnoreCase", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 32, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67802, + "name": "sortingIgnoreCase", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 31, + "character": 15 + } + ], + "parameters": [ + { + "id": 67803, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67840, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 71, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 72, + "character": 21 + } + ], + "getSignature": { + "id": 67841, + "name": "width", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 72, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 67842, + "name": "width", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 71, + "character": 15 + } + ], + "parameters": [ + { + "id": 67843, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67782 + ] + }, + { + "title": "Properties", + "children": [ + 67864, + 67882, + 67863, + 67860, + 67883, + 67865, + 67862, + 67861, + 67884 + ] + }, + { + "title": "Accessors", + "children": [ + 67856, + 67828, + 67874, + 67878, + 67796, + 67836, + 67792, + 67804, + 67820, + 67832, + 67844, + 67808, + 67812, + 67824, + 67866, + 67816, + 67870, + 67784, + 67848, + 67852, + 67788, + 67800, + 67840 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 62052, + "name": "IgrColumnTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 62053, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 62054, + "name": "IgrColumnTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62052, + "name": "IgcColumnTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62059, + "name": "column", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 62060, + "name": "column", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62061, + "name": "column", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 62062, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62055, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 62056, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62057, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 62058, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 62053 + ] + }, + { + "title": "Accessors", + "children": [ + 62059, + 62055 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 67741, + "name": "IgrColumnToggledEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Event emitted when a checkbox in the checkbox\nlist of an IgxColumnActions component is clicked." + } + ] + }, + "children": [ + { + "id": 67742, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67743, + "name": "IgrColumnToggledEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67741, + "name": "IgcColumnToggledEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 67745, + "name": "checked", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The checked state after the action." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-toggled-event-args.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67744, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The column that is toggled." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-toggled-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 67746, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67742 + ] + }, + { + "title": "Properties", + "children": [ + 67745, + 67744, + 67746 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-toggled-event-args.d.ts", + "line": 13, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68552, + "name": "IgrColumnVisibilityChangedEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments after a column's visibility is changed." + } + ] + }, + "children": [ + { + "id": 68553, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68554, + "name": "IgrColumnVisibilityChangedEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68555, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the column the event originated from" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changed-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68556, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The new hidden state that the column will have, if operation is successful.\nWill be " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when hiding and " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " when showing." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changed-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68557, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68553 + ] + }, + { + "title": "Properties", + "children": [ + 68555, + 68556, + 68557 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changed-event-args.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68546, + "name": "IgrColumnVisibilityChangingEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments when a column's visibility is changed.\nThe event is cancelable\nIt contains information about the column and the it's visibility after the operation (will be " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when hiding and " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " when showing)" + } + ] + }, + "children": [ + { + "id": 68547, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68548, + "name": "IgrColumnVisibilityChangingEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68546, + "name": "IgcColumnVisibilityChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68551, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "line": 30, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68549, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the column the event originated from" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68550, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The new hidden state that the column will have, if operation is successful.\nWill be " + }, + { + "kind": "code", + "text": "`true`" + }, + { + "kind": "text", + "text": " when hiding and " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": " when showing." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68547 + ] + }, + { + "title": "Properties", + "children": [ + 68551, + 68549, + 68550 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 68368, + "name": "IgrDataCloneStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68369, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68370, + "name": "IgrDataCloneStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68371, + "name": "clone", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "line": 17, + "character": 11 + } + ], + "signatures": [ + { + "id": 68372, + "name": "clone", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clones provided data" + } + ], + "blockTags": [ + { + "tag": "@returns", + "content": [ + { + "kind": "text", + "text": "deep copy of provided value" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "line": 17, + "character": 11 + } + ], + "parameters": [ + { + "id": 68373, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "primitive value, date and object to be cloned" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68369 + ] + }, + { + "title": "Methods", + "children": [ + 68371 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 61676, + "name": "IgrDateFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides filtering operations for Dates" + } + ], + "blockTags": [ + { + "tag": "@export", + "content": [] + } + ] + }, + "children": [ + { + "id": 61679, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61680, + "name": "IgrDateFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61676, + "name": "IgcDateFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.constructor" + } + }, + { + "id": 61681, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61682, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + "setSignature": { + "id": 61683, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61684, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + { + "id": 61690, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61691, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61692, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.append" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.append" + } + }, + { + "id": 61687, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61688, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61689, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.condition" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.condition" + } + }, + { + "id": 61685, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61686, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.conditionList" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.conditionList" + } + }, + { + "id": 61677, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61678, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61679 + ] + }, + { + "title": "Accessors", + "children": [ + 61681 + ] + }, + { + "title": "Methods", + "children": [ + 61690, + 61687, + 61685, + 61677 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-filtering-operand.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 65660, + "name": "IgrDateSummaryOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65670, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65671, + "name": "IgrDateSummaryOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65660, + "name": "IgcDateSummaryOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 65613, + "name": "IgcSummaryOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65612, + "name": "IgcSummaryOperand.constructor" + } + }, + { + "id": 65672, + "name": "operate", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 70, + "character": 11 + } + ], + "signatures": [ + { + "id": 65673, + "name": "operate", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Executes the static methods and returns " + }, + { + "kind": "code", + "text": "`IgxSummaryResult[]`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\ninterface IgxSummaryResult {\n key: string;\n label: string;\n summaryResult: any;\n}\n```" + }, + { + "kind": "text", + "text": "\nCan be overridden in the inherited classes to provide customization for the " + }, + { + "kind": "code", + "text": "`summary`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nclass CustomDateSummary extends IgxDateSummaryOperand {\n constructor() {\n super();\n }\n public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {\n const result = super.operate(data, allData, fieldName, groupRecord);\n result.push({\n key: \"deadline\",\n label: \"Deadline Date\",\n summaryResult: this.calculateDeadline(data);\n });\n return result;\n }\n}\nthis.grid.getColumnByName('ColumnName').summaries = CustomDateSummary;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxDateSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 70, + "character": 11 + } + ], + "parameters": [ + { + "id": 65674, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65675, + "name": "allData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65676, + "name": "fieldName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65677, + "name": "groupRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + }, + "overwrites": { + "type": "reference", + "target": 65615, + "name": "IgcSummaryOperand.operate" + } + } + ], + "overwrites": { + "type": "reference", + "target": 65614, + "name": "IgcSummaryOperand.operate" + } + }, + { + "id": 65667, + "name": "count", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "signatures": [ + { + "id": 65668, + "name": "count", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Counts all the records in the data source.\nIf filtering is applied, counts only the filtered records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxSummaryOperand.count(dataSource);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "parameters": [ + { + "id": 65669, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": 65610, + "name": "IgcSummaryOperand.count" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65609, + "name": "IgcSummaryOperand.count" + } + }, + { + "id": 65664, + "name": "earliest", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 37, + "character": 18 + } + ], + "signatures": [ + { + "id": 65665, + "name": "earliest", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the earliest date value in the data records.\nIf filtering is applied, returns the latest date value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxDateSummaryOperand.earliest(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxDateSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 37, + "character": 18 + } + ], + "parameters": [ + { + "id": 65666, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 65661, + "name": "latest", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 25, + "character": 18 + } + ], + "signatures": [ + { + "id": 65662, + "name": "latest", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the latest date value in the data records.\nIf filtering is applied, returns the latest date value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxDateSummaryOperand.latest(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxDateSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 25, + "character": 18 + } + ], + "parameters": [ + { + "id": 65663, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65670 + ] + }, + { + "title": "Methods", + "children": [ + 65672, + 65667, + 65664, + 65661 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 65608, + "name": "IgcSummaryOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 61710, + "name": "IgrDateTimeFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61713, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61714, + "name": "IgrDateTimeFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61710, + "name": "IgcDateTimeFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.constructor" + } + }, + { + "id": 61715, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61716, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + "setSignature": { + "id": 61717, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61718, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + { + "id": 61724, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61725, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61726, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.append" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.append" + } + }, + { + "id": 61721, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61722, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61723, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.condition" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.condition" + } + }, + { + "id": 61719, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61720, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.conditionList" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.conditionList" + } + }, + { + "id": 61711, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61712, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61713 + ] + }, + { + "title": "Accessors", + "children": [ + 61715 + ] + }, + { + "title": "Methods", + "children": [ + 61724, + 61721, + 61719, + 61711 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-time-filtering-operand.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 61957, + "name": "IgrDefaultMergeStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61960, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61961, + "name": "IgrDefaultMergeStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61957, + "name": "IgcDefaultMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61972, + "name": "comparer", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 23, + "character": 11 + } + ], + "signatures": [ + { + "id": 61973, + "name": "comparer", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 23, + "character": 11 + } + ], + "parameters": [ + { + "id": 61974, + "name": "prevRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61975, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61976, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61977, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61978, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 61962, + "name": "merge", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "signatures": [ + { + "id": 61963, + "name": "merge", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "parameters": [ + { + "id": 61964, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61965, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61966, + "name": "comparer", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61967, + "name": "result", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61968, + "name": "activeRowIndexes", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 61969, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61970, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61971, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 61958, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 13, + "character": 18 + } + ], + "signatures": [ + { + "id": 61959, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 13, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61957, + "name": "IgcDefaultMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61960 + ] + }, + { + "title": "Methods", + "children": [ + 61972, + 61962, + 61958 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 61935, + "name": "IgrDefaultTreeGridMergeStrategy" + }, + { + "type": "reference", + "target": 61979, + "name": "IgrByLevelTreeGridMergeStrategy" + } + ] + }, + { + "id": 61935, + "name": "IgrDefaultTreeGridMergeStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61938, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61939, + "name": "IgrDefaultTreeGridMergeStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61935, + "name": "IgcDefaultTreeGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61961, + "name": "IgcDefaultMergeStrategy.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61960, + "name": "IgcDefaultMergeStrategy.constructor" + } + }, + { + "id": 61940, + "name": "comparer", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "line": 14, + "character": 11 + } + ], + "signatures": [ + { + "id": 61941, + "name": "comparer", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "line": 14, + "character": 11 + } + ], + "parameters": [ + { + "id": 61942, + "name": "prevRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61943, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61944, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61945, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61946, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "overwrites": { + "type": "reference", + "target": 61973, + "name": "IgcDefaultMergeStrategy.comparer" + } + } + ], + "overwrites": { + "type": "reference", + "target": 61972, + "name": "IgcDefaultMergeStrategy.comparer" + } + }, + { + "id": 61947, + "name": "merge", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "signatures": [ + { + "id": 61948, + "name": "merge", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "parameters": [ + { + "id": 61949, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61950, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61951, + "name": "comparer", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61952, + "name": "result", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61953, + "name": "activeRowIndexes", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 61954, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61955, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61956, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 61963, + "name": "IgcDefaultMergeStrategy.merge" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61962, + "name": "IgcDefaultMergeStrategy.merge" + } + }, + { + "id": 61936, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 13, + "character": 18 + } + ], + "signatures": [ + { + "id": 61937, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "line": 13, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61957, + "name": "IgcDefaultMergeStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61959, + "name": "IgcDefaultMergeStrategy.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61958, + "name": "IgcDefaultMergeStrategy.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61938 + ] + }, + { + "title": "Methods", + "children": [ + 61940, + 61947, + 61936 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61957, + "name": "IgcDefaultMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 65531, + "name": "IgrDimensionsChange", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Event emitted when dimension collection for rows, columns of filters is changed." + } + ] + }, + "children": [ + { + "id": 65532, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65533, + "name": "IgrDimensionsChange", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65531, + "name": "IgcDimensionsChange", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65538, + "name": "dimensionCollectionType", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 65539, + "name": "dimensionCollectionType", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70243, + "name": "PivotDimensionType", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 65540, + "name": "dimensionCollectionType", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension list type - Row, Column or Filter." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 65541, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70243, + "name": "PivotDimensionType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65534, + "name": "dimensions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 65535, + "name": "dimensions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 65536, + "name": "dimensions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The new list of dimensions." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 65537, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65532 + ] + }, + { + "title": "Accessors", + "children": [ + 65538, + 65534 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "line": 13, + "character": 25 + } + ] + }, + { + "id": 66709, + "name": "IgrExporterEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 66710, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 66711, + "name": "IgrExporterEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 66709, + "name": "IgcExporterEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 66724, + "name": "cancel", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 29, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 30, + "character": 21 + } + ], + "getSignature": { + "id": 66725, + "name": "cancel", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 30, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 66726, + "name": "cancel", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 29, + "character": 15 + } + ], + "parameters": [ + { + "id": 66727, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 66712, + "name": "exporter", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 66713, + "name": "exporter", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 69021, + "name": "IgcBaseExporter", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 66714, + "name": "exporter", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 66715, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 69021, + "name": "IgcBaseExporter", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 66720, + "name": "grid", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 25, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 26, + "character": 21 + } + ], + "getSignature": { + "id": 66721, + "name": "grid", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 26, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 66722, + "name": "grid", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 25, + "character": 15 + } + ], + "parameters": [ + { + "id": 66723, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 66716, + "name": "options", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 21, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 22, + "character": 21 + } + ], + "getSignature": { + "id": 66717, + "name": "options", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 22, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70042, + "name": "IgcExporterOptionsBase", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 66718, + "name": "options", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 21, + "character": 15 + } + ], + "parameters": [ + { + "id": 66719, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70042, + "name": "IgcExporterOptionsBase", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 66710 + ] + }, + { + "title": "Accessors", + "children": [ + 66724, + 66712, + 66720, + 66716 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 70018, + "name": "IgrExporterOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70019, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70020, + "name": "IgrExporterOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70018, + "name": "IgcExporterOptions", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70019 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 70042, + "name": "IgrExporterOptionsBase", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true, + "isAbstract": true + }, + "children": [ + { + "id": 70043, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 148, + "character": 4 + } + ], + "signatures": [ + { + "id": 70044, + "name": "IgrExporterOptionsBase", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 148, + "character": 4 + } + ], + "parameters": [ + { + "id": 70045, + "name": "fileName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70046, + "name": "_fileExtension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 70042, + "name": "IgcExporterOptionsBase", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70079, + "name": "alwaysExportHeaders", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 132, + "character": 16 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 133, + "character": 21 + } + ], + "getSignature": { + "id": 70080, + "name": "alwaysExportHeaders", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 133, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70081, + "name": "alwaysExportHeaders", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether the headers should be exported if there is no data.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet alwaysExportHeaders = this.exportOptions.alwaysExportHeaders;\nthis.exportOptions.alwaysExportHeaders = false;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 132, + "character": 16 + } + ], + "parameters": [ + { + "id": 70082, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70071, + "name": "exportSummaries", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 104, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 105, + "character": 21 + } + ], + "getSignature": { + "id": 70072, + "name": "exportSummaries", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 105, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70073, + "name": "exportSummaries", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether the exported data should include column summaries.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet exportSummaries = this.exportOptions.exportSummaries;\nthis.exportOptions.exportSummaries = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 104, + "character": 15 + } + ], + "parameters": [ + { + "id": 70074, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70083, + "name": "fileName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 145, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 146, + "character": 21 + } + ], + "getSignature": { + "id": 70084, + "name": "fileName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 146, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 70085, + "name": "fileName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the file name which will be used for the exporting operation.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet fileName = this.exportOptions.fileName;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 145, + "character": 15 + } + ], + "parameters": [ + { + "id": 70086, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70075, + "name": "freezeHeaders", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 118, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 119, + "character": 21 + } + ], + "getSignature": { + "id": 70076, + "name": "freezeHeaders", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 119, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70077, + "name": "freezeHeaders", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether the exported data should have frozen headers.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet freezeHeaders = this.exportOptions.freezeHeaders;\nthis.exportOptions.freezeHeaders = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 118, + "character": 15 + } + ], + "parameters": [ + { + "id": 70078, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70055, + "name": "ignoreColumnsOrder", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 46, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 47, + "character": 21 + } + ], + "getSignature": { + "id": 70056, + "name": "ignoreColumnsOrder", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 47, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70057, + "name": "ignoreColumnsOrder", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies if the exporter should ignore the current column order in the IgxGrid.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder;\nthis.exportOptions.ignoreColumnsOrder = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 46, + "character": 15 + } + ], + "parameters": [ + { + "id": 70058, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70047, + "name": "ignoreColumnsVisibility", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 70048, + "name": "ignoreColumnsVisibility", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70049, + "name": "ignoreColumnsVisibility", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether hidden columns should be exported.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility;\nthis.exportOptions.ignoreColumnsVisibility = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 70050, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70051, + "name": "ignoreFiltering", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 32, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 33, + "character": 21 + } + ], + "getSignature": { + "id": 70052, + "name": "ignoreFiltering", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 33, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70053, + "name": "ignoreFiltering", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether filtered out rows should be exported.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet ignoreFiltering = this.exportOptions.ignoreFiltering;\nthis.exportOptions.ignoreFiltering = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 32, + "character": 15 + } + ], + "parameters": [ + { + "id": 70054, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70063, + "name": "ignoreGrouping", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 76, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 77, + "character": 21 + } + ], + "getSignature": { + "id": 70064, + "name": "ignoreGrouping", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 77, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70065, + "name": "ignoreGrouping", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether the exported data should be grouped as in the provided IgxGrid.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet ignoreGrouping = this.exportOptions.ignoreGrouping;\nthis.exportOptions.ignoreGrouping = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 76, + "character": 15 + } + ], + "parameters": [ + { + "id": 70066, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70067, + "name": "ignoreMultiColumnHeaders", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 90, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 91, + "character": 21 + } + ], + "getSignature": { + "id": 70068, + "name": "ignoreMultiColumnHeaders", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 91, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70069, + "name": "ignoreMultiColumnHeaders", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether the exported data should include multi column headers as in the provided IgxGrid.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders;\nthis.exportOptions.ignoreMultiColumnHeaders = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 90, + "character": 15 + } + ], + "parameters": [ + { + "id": 70070, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70059, + "name": "ignoreSorting", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 62, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 63, + "character": 21 + } + ], + "getSignature": { + "id": 70060, + "name": "ignoreSorting", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 63, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70061, + "name": "ignoreSorting", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Specifies whether the exported data should be sorted as in the provided IgxGrid.\nWhen you export grouped data, setting ignoreSorting to true will cause\nthe grouping to fail because it relies on the sorting of the records.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet ignoreSorting = this.exportOptions.ignoreSorting;\nthis.exportOptions.ignoreSorting = true;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxExporterOptionsBase" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 62, + "character": 15 + } + ], + "parameters": [ + { + "id": 70062, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70043 + ] + }, + { + "title": "Accessors", + "children": [ + 70079, + 70071, + 70083, + 70075, + 70055, + 70047, + 70051, + 70063, + 70067, + 70059 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "line": 5, + "character": 34 + } + ] + }, + { + "id": 61812, + "name": "IgrExpressionTree", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61813, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61814, + "name": "IgrExpressionTree", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61812, + "name": "IgcExpressionTree", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61824, + "name": "entity", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61823, + "name": "fieldName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61825, + "name": "returnFields", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 61815, + "name": "filteringOperands", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 15, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 16, + "character": 21 + } + ], + "getSignature": { + "id": 61816, + "name": "filteringOperands", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 16, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61812, + "name": "IgcExpressionTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + ] + } + } + }, + "setSignature": { + "id": 61817, + "name": "filteringOperands", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 15, + "character": 15 + } + ], + "parameters": [ + { + "id": 61818, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61812, + "name": "IgcExpressionTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + ] + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61819, + "name": "operator", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 61820, + "name": "operator", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 61821, + "name": "operator", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 61822, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61813 + ] + }, + { + "title": "Properties", + "children": [ + 61824, + 61823, + 61825 + ] + }, + { + "title": "Accessors", + "children": [ + 61815, + 61819 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 61879, + "name": "IgrFilteringExpressionsTree" + } + ] + }, + { + "id": 70034, + "name": "IgrFieldEditorOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70035, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70036, + "name": "IgrFieldEditorOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70034, + "name": "IgcFieldEditorOptions", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70037, + "name": "dateTimeFormat", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A custom input format string used for the built-in editors of date/time columns.\nSee the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-editor-options.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70035 + ] + }, + { + "title": "Properties", + "children": [ + 70037 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-editor-options.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 68357, + "name": "IgrColumnEditorOptions" + } + ] + }, + { + "id": 70025, + "name": "IgrFieldPipeArgs", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70026, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70027, + "name": "IgrFieldPipeArgs", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70025, + "name": "IgcFieldPipeArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70031, + "name": "currencyCode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The currency code of type string, default value undefined" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70030, + "name": "digitsInfo", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Decimal representation options, specified by a string in the following format:\n" + }, + { + "kind": "code", + "text": "`{minIntegerDigits}`" + }, + { + "kind": "text", + "text": "." + }, + { + "kind": "code", + "text": "`{minFractionDigits}`" + }, + { + "kind": "text", + "text": "-" + }, + { + "kind": "code", + "text": "`{maxFractionDigits}`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "`minIntegerDigits`" + }, + { + "kind": "text", + "text": ": The minimum number of integer digits before the decimal point. Default is 1.\n" + }, + { + "kind": "code", + "text": "`minFractionDigits`" + }, + { + "kind": "text", + "text": ": The minimum number of digits after the decimal point. Default is 0.\n" + }, + { + "kind": "code", + "text": "`maxFractionDigits`" + }, + { + "kind": "text", + "text": ": The maximum number of digits after the decimal point. Default is 3." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70032, + "name": "display", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allow us to display currency 'symbol' or 'code' or 'symbol-narrow' or our own string.\nThe value is of type string. By default is set to 'symbol'" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 38, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70028, + "name": "format", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The date/time components that a date column will display, using predefined options or a custom format string." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70029, + "name": "timezone", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70033, + "name": "weekStart", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The first week day to be displayed in calendar when filtering or editing a date column" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 43, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70026 + ] + }, + { + "title": "Properties", + "children": [ + 70031, + 70030, + 70032, + 70028, + 70029, + 70033 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 68348, + "name": "IgrColumnPipeArgs" + } + ] + }, + { + "id": 68503, + "name": "IgrFilteringEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to filtering operations\nThe event is cancelable" + } + ] + }, + "children": [ + { + "id": 68504, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68505, + "name": "IgrFilteringEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68503, + "name": "IgcFilteringEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68508, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68506, + "name": "filteringExpressions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the filtering expressions applied to the grid.\nThe expression contains information like filtering operands and operator, an expression or condition, etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68507, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68504 + ] + }, + { + "title": "Properties", + "children": [ + 68508, + 68506, + 68507 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 61782, + "name": "IgrFilteringExpression", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents filtering expressions." + } + ] + }, + "children": [ + { + "id": 61783, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61784, + "name": "IgrFilteringExpression", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61789, + "name": "condition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61790, + "name": "conditionName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61793, + "name": "ignoreCase", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61792, + "name": "searchTree", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61812, + "name": "IgcExpressionTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61791, + "name": "searchVal", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61785, + "name": "fieldName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 61786, + "name": "fieldName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 61787, + "name": "fieldName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 61788, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61783 + ] + }, + { + "title": "Properties", + "children": [ + 61789, + 61790, + 61793, + 61792, + 61791 + ] + }, + { + "title": "Accessors", + "children": [ + 61785 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 61879, + "name": "IgrFilteringExpressionsTree", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61880, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61881, + "name": "IgrFilteringExpressionsTree", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61814, + "name": "IgcExpressionTree.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61813, + "name": "IgcExpressionTree.constructor" + } + }, + { + "id": 61893, + "name": "entity", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 39, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "overwrites": { + "type": "reference", + "target": 61824, + "name": "IgcExpressionTree.entity" + } + }, + { + "id": 61892, + "name": "fieldName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 36, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "overwrites": { + "type": "reference", + "target": 61823, + "name": "IgcExpressionTree.fieldName" + } + }, + { + "id": 61887, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61894, + "name": "returnFields", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 42, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "overwrites": { + "type": "reference", + "target": 61825, + "name": "IgcExpressionTree.returnFields" + } + }, + { + "id": 61886, + "name": "type", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70255, + "name": "FilteringExpressionsTreeType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61882, + "name": "filteringOperands", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 61883, + "name": "filteringOperands", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + "overwrites": { + "type": "reference", + "target": -1, + "name": "IgcExpressionTree.filteringOperands" + } + }, + "setSignature": { + "id": 61884, + "name": "filteringOperands", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 61885, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + ] + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "overwrites": { + "type": "reference", + "target": -1, + "name": "IgcExpressionTree.filteringOperands" + } + }, + "overwrites": { + "type": "reference", + "target": 61815, + "name": "IgcExpressionTree.filteringOperands" + } + }, + { + "id": 61888, + "name": "operator", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 32, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 33, + "character": 21 + } + ], + "getSignature": { + "id": 61889, + "name": "operator", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 33, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + }, + "overwrites": { + "type": "reference", + "target": -1, + "name": "IgcExpressionTree.operator" + } + }, + "setSignature": { + "id": 61890, + "name": "operator", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 32, + "character": 15 + } + ], + "parameters": [ + { + "id": 61891, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "overwrites": { + "type": "reference", + "target": -1, + "name": "IgcExpressionTree.operator" + } + }, + "overwrites": { + "type": "reference", + "target": 61819, + "name": "IgcExpressionTree.operator" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61880 + ] + }, + { + "title": "Properties", + "children": [ + 61893, + 61892, + 61887, + 61894, + 61886 + ] + }, + { + "title": "Accessors", + "children": [ + 61882, + 61888 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61812, + "name": "IgcExpressionTree", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 61659, + "name": "IgrFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides base filtering operations\nImplementations should be Singleton" + } + ], + "blockTags": [ + { + "tag": "@export", + "content": [] + } + ] + }, + "children": [ + { + "id": 61662, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61663, + "name": "IgrFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61664, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61665, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 61666, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61667, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61673, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61674, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61675, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 61670, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61671, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61672, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61668, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61669, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ] + }, + { + "id": 61660, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61661, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61662 + ] + }, + { + "title": "Accessors", + "children": [ + 61664 + ] + }, + { + "title": "Methods", + "children": [ + 61673, + 61670, + 61668, + 61660 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 61642, + "name": "IgrBooleanFilteringOperand" + }, + { + "type": "reference", + "target": 61744, + "name": "IgrNumberFilteringOperand" + }, + { + "type": "reference", + "target": 61761, + "name": "IgrStringFilteringOperand" + } + ] + }, + { + "id": 61794, + "name": "IgrFilteringOperation", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface describing filtering operations" + } + ], + "blockTags": [ + { + "tag": "@export", + "content": [] + } + ] + }, + "children": [ + { + "id": 61795, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61796, + "name": "IgrFilteringOperation", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61810, + "name": "hidden", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61805, + "name": "isNestedQuery", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61811, + "name": "logic", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 39, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61806, + "name": "iconName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 30, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 31, + "character": 21 + } + ], + "getSignature": { + "id": 61807, + "name": "iconName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 31, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 61808, + "name": "iconName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 30, + "character": 15 + } + ], + "parameters": [ + { + "id": 61809, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61801, + "name": "isUnary", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 61802, + "name": "isUnary", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 61803, + "name": "isUnary", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 61804, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61797, + "name": "name", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 61798, + "name": "name", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 61799, + "name": "name", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 61800, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61795 + ] + }, + { + "title": "Properties", + "children": [ + 61810, + 61805, + 61811 + ] + }, + { + "title": "Accessors", + "children": [ + 61806, + 61801, + 61797 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "line": 15, + "character": 25 + } + ] + }, + { + "id": 68698, + "name": "IgrFilteringStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68699, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68700, + "name": "IgrFilteringStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68698, + "name": "IgcFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68701, + "name": "filter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "line": 17, + "character": 11 + } + ], + "signatures": [ + { + "id": 68702, + "name": "filter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "line": 17, + "character": 11 + } + ], + "parameters": [ + { + "id": 68703, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68704, + "name": "expressionsTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68705, + "name": "advancedExpressionsTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68706, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + }, + { + "id": 68707, + "name": "getFilterItems", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "line": 21, + "character": 11 + } + ], + "signatures": [ + { + "id": 68708, + "name": "getFilterItems", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "line": 21, + "character": 11 + } + ], + "parameters": [ + { + "id": 68709, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68710, + "name": "tree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 67950, + "name": "IgcFilterItem", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "Promise", + "package": "typescript" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68699 + ] + }, + { + "title": "Methods", + "children": [ + 68701, + 68707 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "line": 13, + "character": 25 + } + ] + }, + { + "id": 67950, + "name": "IgrFilterItem", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67951, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67952, + "name": "IgrFilterItem", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67950, + "name": "IgcFilterItem", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67958, + "name": "children", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67950, + "name": "IgcFilterItem", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 67957, + "name": "label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 67953, + "name": "value", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 13, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 67954, + "name": "value", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 67955, + "name": "value", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 13, + "character": 15 + } + ], + "parameters": [ + { + "id": 67956, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67951 + ] + }, + { + "title": "Properties", + "children": [ + 67958, + 67957 + ] + }, + { + "title": "Accessors", + "children": [ + 67953 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 68643, + "name": "IgrForOfDataChangeEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use " + }, + { + "kind": "code", + "text": "`IForOfDataChangeEventArgs`" + }, + { + "kind": "text", + "text": " instead." + } + ] + } + ] + }, + "children": [ + { + "id": 68644, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68645, + "name": "IgrForOfDataChangeEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70089, + "name": "IgcForOfDataChangingEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 70088, + "name": "IgcForOfDataChangingEventArgs.constructor" + } + }, + { + "id": 68646, + "name": "containerSize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": 70090, + "name": "IgcForOfDataChangingEventArgs.containerSize" + } + }, + { + "id": 68648, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 70092, + "name": "IgcForOfDataChangingEventArgs.owner" + } + }, + { + "id": 68647, + "name": "state", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70091, + "name": "IgcForOfDataChangingEventArgs.state" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68644 + ] + }, + { + "title": "Properties", + "children": [ + 68646, + 68648, + 68647 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-change-event-args.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 70087, + "name": "IgcForOfDataChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 70087, + "name": "IgrForOfDataChangingEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use " + }, + { + "kind": "code", + "text": "`IForOfDataChangeEventArgs`" + }, + { + "kind": "text", + "text": " instead." + } + ] + } + ] + }, + "children": [ + { + "id": 70088, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70089, + "name": "IgrForOfDataChangingEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70087, + "name": "IgcForOfDataChangingEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 70090, + "name": "containerSize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70092, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 70091, + "name": "state", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70088 + ] + }, + { + "title": "Properties", + "children": [ + 70090, + 70092, + 70091 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 68643, + "name": "IgrForOfDataChangeEventArgsDetail" + } + ] + }, + { + "id": 63578, + "name": "IgrForOfState", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63579, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63580, + "name": "IgrForOfState", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 63582, + "name": "chunkSize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-state.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 63583, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 63581, + "name": "startIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-state.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63579 + ] + }, + { + "title": "Properties", + "children": [ + 63582, + 63583, + 63581 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-state.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 56961, + "name": "IgrGrid", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Grid provides a way to present and manipulate tabular data." + } + ] + }, + "children": [ + { + "id": 57367, + "name": "onActiveNodeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57368, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57369, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57370, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68627, + "name": "IgcActiveNodeChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57183, + "name": "onAdvancedFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57184, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57185, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57186, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57191, + "name": "onCellClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57192, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57193, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57194, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57235, + "name": "onCellEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57236, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57237, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57238, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57239, + "name": "onCellEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57240, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57241, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57242, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57227, + "name": "onCellEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57228, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57229, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57230, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57231, + "name": "onCellEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57232, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57233, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57234, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57259, + "name": "onColumnInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57260, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57261, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57262, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57323, + "name": "onColumnMoving", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57324, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57325, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57326, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68563, + "name": "IgcColumnMovingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57327, + "name": "onColumnMovingEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57328, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57329, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57330, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68569, + "name": "IgcColumnMovingEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57319, + "name": "onColumnMovingStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57320, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57321, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57322, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68558, + "name": "IgcColumnMovingStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57219, + "name": "onColumnPin", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57220, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57221, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57222, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68440, + "name": "IgcPinColumnCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57223, + "name": "onColumnPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57224, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57225, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57226, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68447, + "name": "IgcPinColumnEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57299, + "name": "onColumnResized", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57300, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57301, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57302, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68533, + "name": "IgcColumnResizeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57263, + "name": "onColumnsAutogenerated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57264, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57265, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57266, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "IgcColumnsAutoGeneratedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57215, + "name": "onColumnSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57216, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57217, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57218, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68431, + "name": "IgcColumnSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57315, + "name": "onColumnVisibilityChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57316, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57317, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57318, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57311, + "name": "onColumnVisibilityChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57312, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57313, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57314, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68546, + "name": "IgcColumnVisibilityChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57303, + "name": "onContextMenu", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57304, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57305, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57306, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68540, + "name": "IgcGridContextMenuEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57391, + "name": "onDataChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57392, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57393, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57394, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57387, + "name": "onDataChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57388, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57389, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57390, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57163, + "name": "onDataPreLoad", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57164, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57165, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57166, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57307, + "name": "onDoubleClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57308, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57309, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57310, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57347, + "name": "onExpansionStatesChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57348, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57349, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57350, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57275, + "name": "onFiltering", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57276, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57277, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57278, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68503, + "name": "IgcFilteringEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57279, + "name": "onFilteringDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57280, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57281, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57282, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57179, + "name": "onFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57180, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57181, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57182, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57199, + "name": "onFormGroupCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57200, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57201, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57202, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68412, + "name": "IgcGridFormGroupCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57343, + "name": "onGridCopy", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57344, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57345, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57346, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68598, + "name": "IgcGridClipboardEvent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57331, + "name": "onGridKeydown", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57332, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57333, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57334, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68576, + "name": "IgcGridKeydownEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57187, + "name": "onGridScroll", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57188, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57189, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57190, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68393, + "name": "IgcGridScrollEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57175, + "name": "onGroupingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57176, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57177, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57178, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 63615, + "name": "IgcGroupingDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57171, + "name": "onGroupingExpansionStateChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57172, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57173, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57174, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 63604, + "name": "IgcGroupByExpandState", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57167, + "name": "onGroupingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57168, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57169, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57170, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57379, + "name": "onRangeSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57380, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57381, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57382, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57383, + "name": "onRendered", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57384, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57385, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57386, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57295, + "name": "onRowAdd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57296, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57297, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57298, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57283, + "name": "onRowAdded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57284, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57285, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57286, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57195, + "name": "onRowClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57196, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57197, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57198, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68406, + "name": "IgcGridRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57291, + "name": "onRowDelete", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57292, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57293, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57294, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57287, + "name": "onRowDeleted", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57288, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57289, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57290, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57339, + "name": "onRowDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57340, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57341, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57342, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68591, + "name": "IgcRowDragEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57335, + "name": "onRowDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57336, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57337, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57338, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68584, + "name": "IgcRowDragStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57247, + "name": "onRowEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57248, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57249, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57250, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57251, + "name": "onRowEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57252, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57253, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57254, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57243, + "name": "onRowEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57244, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57245, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57246, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57255, + "name": "onRowEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57256, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57257, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57258, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57363, + "name": "onRowPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57364, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57365, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57366, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57359, + "name": "onRowPinning", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57360, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57361, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57362, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57211, + "name": "onRowSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57212, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57213, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57214, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68421, + "name": "IgcRowSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57355, + "name": "onRowToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57356, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57357, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57358, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68609, + "name": "IgcRowToggleEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57207, + "name": "onSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57208, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57209, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57210, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57351, + "name": "onSelectedRowsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57352, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57353, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57354, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57267, + "name": "onSorting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57268, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57269, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57270, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68496, + "name": "IgcSortingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57271, + "name": "onSortingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57272, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57273, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57274, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57371, + "name": "onSortingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57372, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57373, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57374, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57375, + "name": "onToolbarExporting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57376, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57377, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57378, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68635, + "name": "IgcGridToolbarExportEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57203, + "name": "onValidationStatusChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57204, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57205, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57206, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68416, + "name": "IgcGridValidationStatusEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57054, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the array of data that populates the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 57051, + "name": "detailTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a reference to the master-detail template.\n```typescript\nlet detailTemplate = this.grid.detailTemplate;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 63622, + "name": "IgcGridMasterDetailContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57060, + "name": "dropAreaMessage", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57050, + "name": "dropAreaTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the template that will be rendered as a GroupBy drop area." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57061, + "name": "groupByRowSelectorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the group by row selector template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 63648, + "name": "IgcGroupByRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57057, + "name": "groupingExpansionState", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of expansion states for group rows." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63604, + "name": "IgcGroupByExpandState", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57056, + "name": "groupingExpressions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the group by state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57062, + "name": "groupRowTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the template reference for the group row." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 63655, + "name": "IgcGroupByRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57049, + "name": "groupsExpanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether created groups are rendered expanded or collapsed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57059, + "name": "groupStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the grouping strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 63633, + "name": "IgcGridGroupingStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57058, + "name": "hideGroupedColumns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the grouped columns should be hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57052, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the value of the `id` attribute." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57063, + "name": "showGroupArea", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns whether the `IgxGridComponent` has group area." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57055, + "name": "totalItemCount", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the total number of records in the data source." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57053, + "name": "groupsRecords", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the hierarchical representation of the group by records." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57064, + "name": "selectedCells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the selected `IgxGridCell`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57071, + "name": "clearGrouping", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears grouping for particular column, array of columns or all columns." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57072, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 355, + "character": 11 + } + ], + "signatures": [ + { + "id": 57073, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears grouping for particular column, array of columns or all columns." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Clears all grouping in the grid, if no parameter is passed.\nIf a parameter is provided, clears grouping for a particular column or an array of columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearGrouping(); //clears all grouping\nthis.grid.clearGrouping(\"ID\"); //ungroups a single column\nthis.grid.clearGrouping([\"ID\", \"Column1\", \"Column2\"]); //ungroups multiple columns\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 355, + "character": 11 + } + ], + "parameters": [ + { + "id": 57074, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Name of column or array of column names to be ungrouped." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57075, + "name": "clearGrouping", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clears grouping for particular column, array of columns or all columns." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Clears all grouping in the grid, if no parameter is passed.\nIf a parameter is provided, clears grouping for a particular column or an array of columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearGrouping(); //clears all grouping\nthis.grid.clearGrouping(\"ID\"); //ungroups a single column\nthis.grid.clearGrouping([\"ID\", \"Column1\", \"Column2\"]); //ungroups multiple columns\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57076, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Name of column or array of column names to be ungrouped." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57097, + "name": "deselectRowsInGroup", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect all rows within a group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57098, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 411, + "character": 11 + } + ], + "signatures": [ + { + "id": 57099, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect all rows within a group." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nthis.grid.deselectRowsInGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 411, + "character": 11 + } + ], + "parameters": [ + { + "id": 57100, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record which rows would be deselected." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57101, + "name": "deselectRowsInGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect all rows within a group." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nthis.grid.deselectRowsInGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57102, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record which rows would be deselected." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57103, + "name": "fullyExpandGroup", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the specified group and all of its parent groups." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57104, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 425, + "character": 11 + } + ], + "signatures": [ + { + "id": 57105, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the specified group and all of its parent groups." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nthis.grid.fullyExpandGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 425, + "character": 11 + } + ], + "parameters": [ + { + "id": 57106, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record to fully expand." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57107, + "name": "fullyExpandGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the specified group and all of its parent groups." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nthis.grid.fullyExpandGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57108, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record to fully expand." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57133, + "name": "getCellByColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a `CellType` object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57134, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 491, + "character": 11 + } + ], + "signatures": [ + { + "id": 57135, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCell = this.grid1.getCellByColumn(2, \"UnitPrice\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 491, + "character": 11 + } + ], + "parameters": [ + { + "id": 57136, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57137, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57138, + "name": "getCellByColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCell = this.grid1.getCellByColumn(2, \"UnitPrice\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57139, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57140, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57141, + "name": "getCellByKey", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a `CellType` object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57142, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 507, + "character": 11 + } + ], + "signatures": [ + { + "id": 57143, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the primaryKey property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.getCellByKey(1, 'index');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 507, + "character": 11 + } + ], + "parameters": [ + { + "id": 57144, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "match any rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57145, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57146, + "name": "getCellByKey", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the primaryKey property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.getCellByKey(1, 'index');\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57147, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "match any rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57148, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57121, + "name": "getRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the `IgxGridRow` by index." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57122, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 462, + "character": 11 + } + ], + "signatures": [ + { + "id": 57123, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxGridRow`" + }, + { + "kind": "text", + "text": " by index." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = grid.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 462, + "character": 11 + } + ], + "parameters": [ + { + "id": 57124, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57125, + "name": "getRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxGridRow`" + }, + { + "kind": "text", + "text": " by index." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = grid.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57126, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57127, + "name": "getRowByKey", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns `IgxGridRow` object by the specified primary key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57128, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 477, + "character": 11 + } + ], + "signatures": [ + { + "id": 57129, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`IgxGridRow`" + }, + { + "kind": "text", + "text": " object by the specified primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.grid1.getRowByKey(\"cell5\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 477, + "character": 11 + } + ], + "parameters": [ + { + "id": 57130, + "name": "key", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57131, + "name": "getRowByKey", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`IgxGridRow`" + }, + { + "kind": "text", + "text": " object by the specified primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.grid1.getRowByKey(\"cell5\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57132, + "name": "key", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57113, + "name": "getSelectedData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "\nReturns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57114, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 449, + "character": 11 + } + ], + "signatures": [ + { + "id": 57115, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 449, + "character": 11 + } + ], + "parameters": [ + { + "id": 57116, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57117, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + } + }, + "signatures": [ + { + "id": 57118, + "name": "getSelectedData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "parameters": [ + { + "id": 57119, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57120, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + }, + { + "id": 57065, + "name": "groupBy", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57066, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 337, + "character": 11 + } + ], + "signatures": [ + { + "id": 57067, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Groups by a new " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " based on the provided expression, or modifies an existing one." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Also allows for multiple columns to be grouped at once if an array of " + }, + { + "kind": "code", + "text": "`ISortingExpression`" + }, + { + "kind": "text", + "text": " is passed.\nThe " + }, + { + "kind": "code", + "text": "`groupingDone`" + }, + { + "kind": "text", + "text": " event would get raised only **once** if this method gets called multiple times with the same arguments." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });\nthis.grid.groupBy([\n { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },\n { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },\n { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }\n]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 337, + "character": 11 + } + ], + "parameters": [ + { + "id": 57068, + "name": "expression", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57069, + "name": "groupBy", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Groups by a new " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " based on the provided expression, or modifies an existing one." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Also allows for multiple columns to be grouped at once if an array of " + }, + { + "kind": "code", + "text": "`ISortingExpression`" + }, + { + "kind": "text", + "text": " is passed.\nThe " + }, + { + "kind": "code", + "text": "`groupingDone`" + }, + { + "kind": "text", + "text": " event would get raised only **once** if this method gets called multiple times with the same arguments." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });\nthis.grid.groupBy([\n { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },\n { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },\n { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }\n]);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57070, + "name": "expression", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57077, + "name": "isExpandedGroup", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if a group is expanded or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57078, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 369, + "character": 11 + } + ], + "signatures": [ + { + "id": 57079, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if a group is expanded or not." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nconst expandedGroup = this.grid.isExpandedGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 369, + "character": 11 + } + ], + "parameters": [ + { + "id": 57080, + "name": "group", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 57081, + "name": "isExpandedGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if a group is expanded or not." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nconst expandedGroup = this.grid.isExpandedGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57082, + "name": "group", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 57149, + "name": "pinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57150, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 511, + "character": 11 + } + ], + "signatures": [ + { + "id": 57151, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 511, + "character": 11 + } + ], + "parameters": [ + { + "id": 57152, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57153, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 57154, + "name": "pinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57155, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57156, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 57089, + "name": "selectRowsInGroup", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select all rows within a group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57090, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 397, + "character": 11 + } + ], + "signatures": [ + { + "id": 57091, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select all rows within a group." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectRowsInGroup(this.groupRow, true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 397, + "character": 11 + } + ], + "parameters": [ + { + "id": 57092, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57093, + "name": "clearPrevSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57094, + "name": "selectRowsInGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select all rows within a group." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectRowsInGroup(this.groupRow, true);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57095, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57096, + "name": "clearPrevSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57109, + "name": "toggleAllGroupRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the expansion state of all group rows recursively." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57110, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 437, + "character": 11 + } + ], + "signatures": [ + { + "id": 57111, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the expansion state of all group rows recursively." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleAllGroupRows;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 437, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57112, + "name": "toggleAllGroupRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the expansion state of all group rows recursively." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleAllGroupRows;\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57083, + "name": "toggleGroup", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the expansion state of a group." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57084, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 383, + "character": 11 + } + ], + "signatures": [ + { + "id": 57085, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the expansion state of a group." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nconst toggleExpGroup = this.grid.toggleGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 383, + "character": 11 + } + ], + "parameters": [ + { + "id": 57086, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record to toggle." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57087, + "name": "toggleGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the expansion state of a group." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic groupRow: IGroupByRecord;\nconst toggleExpGroup = this.grid.toggleGroup(this.groupRow);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57088, + "name": "groupRow", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The group record to toggle." + } + ] + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57157, + "name": "unpinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57158, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 515, + "character": 11 + } + ], + "signatures": [ + { + "id": 57159, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "line": 515, + "character": 11 + } + ], + "parameters": [ + { + "id": 57160, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 57161, + "name": "unpinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57162, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 57054, + 57051, + 57060, + 57050, + 57061, + 57057, + 57056, + 57062, + 57049, + 57059, + 57058, + 57052, + 57063, + 57055 + ] + }, + { + "title": "Accessors", + "children": [ + 57053, + 57064 + ] + }, + { + "title": "Methods", + "children": [ + 57071, + 57097, + 57103, + 57133, + 57141, + 57121, + 57127, + 57113, + 57065, + 57077, + 57149, + 57089, + 57109, + 57083, + 57157 + ] + }, + { + "title": "Set Signatures", + "children": [ + 57367, + 57183, + 57191, + 57235, + 57239, + 57227, + 57231, + 57259, + 57323, + 57327, + 57319, + 57219, + 57223, + 57299, + 57263, + 57215, + 57315, + 57311, + 57303, + 57391, + 57387, + 57163, + 57307, + 57347, + 57275, + 57279, + 57179, + 57199, + 57343, + 57331, + 57187, + 57175, + 57171, + 57167, + 57379, + 57383, + 57295, + 57283, + 57195, + 57291, + 57287, + 57339, + 57335, + 57247, + 57251, + 57243, + 57255, + 57363, + 57359, + 57211, + 57355, + 57207, + 57351, + 57267, + 57271, + 57371, + 57375, + 57203 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 57053, + 57064 + ] + }, + { + "title": "Events", + "children": [ + 57367, + 57183, + 57191, + 57235, + 57239, + 57227, + 57231, + 57259, + 57323, + 57327, + 57319, + 57219, + 57223, + 57299, + 57263, + 57215, + 57315, + 57311, + 57303, + 57391, + 57387, + 57163, + 57307, + 57347, + 57275, + 57279, + 57179, + 57199, + 57343, + 57331, + 57187, + 57175, + 57171, + 57167, + 57379, + 57383, + 57295, + 57283, + 57195, + 57291, + 57287, + 57339, + 57335, + 57247, + 57251, + 57243, + 57255, + 57363, + 57359, + 57211, + 57355, + 57207, + 57351, + 57267, + 57271, + 57371, + 57375, + 57203 + ] + }, + { + "title": "Methods", + "children": [ + 57071, + 57097, + 57103, + 57133, + 57141, + 57121, + 57127, + 57113, + 57065, + 57077, + 57149, + 57089, + 57109, + 57083, + 57157 + ] + }, + { + "title": "Properties", + "children": [ + 57054, + 57051, + 57060, + 57050, + 57061, + 57057, + 57056, + 57062, + 57049, + 57059, + 57058, + 57052, + 57063, + 57055 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid.ts", + "line": 68, + "character": 13 + }, + { + "fileName": "src/grids/grid.ts", + "line": 260, + "character": 12 + } + ], + "signatures": [ + { + "id": 56965, + "name": "IgrGrid", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 60666, + "name": "IgrGridActionsBaseDirective", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)" + } + ] + }, + "children": [ + { + "id": 60669, + "name": "asMenuItems", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "line": 26, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "line": 27, + "character": 21 + } + ], + "getSignature": { + "id": 60670, + "name": "asMenuItems", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "line": 27, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 60671, + "name": "asMenuItems", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid-pinning-actions [asMenuItems]='true'></igx-grid-pinning-actions>\n <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "line": 26, + "character": 15 + } + ], + "parameters": [ + { + "id": 60672, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Accessors", + "children": [ + 60669 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + }, + { + "id": 62071, + "name": "IgrGridBaseDirective", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true, + "isAbstract": true + }, + "children": [ + { + "id": 62072, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 2, + "character": 46 + } + ], + "signatures": [ + { + "id": 62073, + "name": "IgrGridBaseDirective", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 2, + "character": 46 + } + ], + "parameters": [ + { + "id": 62074, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isRest": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcGridBaseDirectiveEventMap, Constructor<LitElement>>(LitElement).constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcGridBaseDirectiveEventMap, Constructor<LitElement>>(LitElement).constructor" + } + }, + { + "id": 62131, + "name": "actionStripComponents", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 306, + "character": 21 + } + ], + "getSignature": { + "id": 62132, + "name": "actionStripComponents", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 306, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": -1, + "name": "IgcActionStripToken", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62095, + "name": "addRowEmptyTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 176, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 177, + "character": 21 + } + ], + "getSignature": { + "id": 62096, + "name": "addRowEmptyTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 177, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62097, + "name": "addRowEmptyTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template for adding row UI when grid is empty." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [addRowEmptyTemplate]=\"myTemplate\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 176, + "character": 15 + } + ], + "parameters": [ + { + "id": 62098, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62203, + "name": "advancedFilteringExpressionsTree", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 480, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 481, + "character": 21 + } + ], + "getSignature": { + "id": 62204, + "name": "advancedFilteringExpressionsTree", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 481, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62205, + "name": "advancedFilteringExpressionsTree", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the advanced filtering state." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nlet advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;\nthis.grid.advancedFilteringExpressionsTree = logic;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 480, + "character": 15 + } + ], + "parameters": [ + { + "id": 62206, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62271, + "name": "allowAdvancedFiltering", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 700, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 701, + "character": 21 + } + ], + "getSignature": { + "id": 62272, + "name": "allowAdvancedFiltering", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 701, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62273, + "name": "allowAdvancedFiltering", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a value indicating whether the advanced filtering is enabled." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [allowAdvancedFiltering]=\"true\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 700, + "character": 15 + } + ], + "parameters": [ + { + "id": 62274, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62267, + "name": "allowFiltering", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 687, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 688, + "character": 21 + } + ], + "getSignature": { + "id": 62268, + "name": "allowFiltering", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 688, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62269, + "name": "allowFiltering", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the filtering is enabled." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [allowFiltering]=\"true\" [height]=\"'305px'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 687, + "character": 15 + } + ], + "parameters": [ + { + "id": 62270, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62079, + "name": "autoGenerate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 116, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 117, + "character": 21 + } + ], + "getSignature": { + "id": 62080, + "name": "autoGenerate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 117, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62081, + "name": "autoGenerate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether to auto-generate the columns." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The default value is false. When set to true, it will override all columns declared through code or in markup." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [data]=\"Data\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 116, + "character": 15 + } + ], + "parameters": [ + { + "id": 62082, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62083, + "name": "autoGenerateExclude", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 135, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 136, + "character": 21 + } + ], + "getSignature": { + "id": 62084, + "name": "autoGenerateExclude", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 136, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + "setSignature": { + "id": 62085, + "name": "autoGenerateExclude", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of property keys to be excluded from the generated column collection" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime\nunless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their\n[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid data=[Data] [autoGenerate]=\"true\" [autoGenerateExclude]=\"['ProductName', 'Count']\"></igx-grid>\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```typescript\nconst Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 135, + "character": 15 + } + ], + "parameters": [ + { + "id": 62086, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62335, + "name": "batchEditing", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 941, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 942, + "character": 21 + } + ], + "getSignature": { + "id": 62336, + "name": "batchEditing", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 942, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62337, + "name": "batchEditing", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the grid has batch editing enabled.\nWhen batch editing is enabled, changes are not made directly to the underlying data.\nInstead, they are stored as transactions, which can later be committed w/ the " + }, + { + "kind": "code", + "text": "`commit`" + }, + { + "kind": "text", + "text": " method." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [batchEditing]=\"true\" [data]=\"someData\">\n</igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 941, + "character": 15 + } + ], + "parameters": [ + { + "id": 62338, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62343, + "name": "cellMergeMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 962, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 963, + "character": 21 + } + ], + "getSignature": { + "id": 62344, + "name": "cellMergeMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 963, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70267, + "name": "GridCellMergeMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62345, + "name": "cellMergeMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets cell merge mode." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 962, + "character": 15 + } + ], + "parameters": [ + { + "id": 62346, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70267, + "name": "GridCellMergeMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62339, + "name": "cellSelection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 953, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 954, + "character": 21 + } + ], + "getSignature": { + "id": 62340, + "name": "cellSelection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 954, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62341, + "name": "cellSelection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets cell selection mode." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default the cell selection mode is multiple" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 953, + "character": 15 + } + ], + "parameters": [ + { + "id": 62342, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62111, + "name": "clipboardOptions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 224, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 225, + "character": 21 + } + ], + "getSignature": { + "id": 62112, + "name": "clipboardOptions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 225, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68374, + "name": "IgcClipboardOptions", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62113, + "name": "clipboardOptions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the copy behavior of the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 224, + "character": 15 + } + ], + "parameters": [ + { + "id": 62114, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68374, + "name": "IgcClipboardOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62127, + "name": "columnList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 294, + "character": 21 + } + ], + "getSignature": { + "id": 62128, + "name": "columnList", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 294, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62373, + "name": "columns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1086, + "character": 15 + } + ], + "getSignature": { + "id": 62374, + "name": "columns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst colums = this.grid.columns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1086, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62351, + "name": "columnSelection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 986, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 987, + "character": 21 + } + ], + "getSignature": { + "id": 62352, + "name": "columnSelection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 987, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62353, + "name": "columnSelection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets column selection mode" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default the row selection mode is none" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 986, + "character": 15 + } + ], + "parameters": [ + { + "id": 62354, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62243, + "name": "columnWidth", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 600, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 601, + "character": 21 + } + ], + "getSignature": { + "id": 62244, + "name": "columnWidth", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 601, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62245, + "name": "columnWidth", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the default width of the columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [columnWidth]=\"100\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 600, + "character": 15 + } + ], + "parameters": [ + { + "id": 62246, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62107, + "name": "dataCloneStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 216, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 217, + "character": 21 + } + ], + "getSignature": { + "id": 62108, + "name": "dataCloneStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 217, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62109, + "name": "dataCloneStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the data clone strategy of the grid when in edit mode." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [dataCloneStrategy]=\"customCloneStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 216, + "character": 15 + } + ], + "parameters": [ + { + "id": 62110, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62313, + "name": "dataRowList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 867, + "character": 15 + } + ], + "getSignature": { + "id": 62314, + "name": "dataRowList", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of currently rendered " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": "'s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst dataList = this.grid.dataRowList;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 867, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62391, + "name": "dataView", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1186, + "character": 15 + } + ], + "getSignature": { + "id": 62392, + "name": "dataView", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const dataView = this.grid.dataView;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1186, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + }, + { + "id": 62371, + "name": "defaultRowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1074, + "character": 15 + } + ], + "getSignature": { + "id": 62372, + "name": "defaultRowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the default row height." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst rowHeigh = this.grid.defaultRowHeight;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1074, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 62135, + "name": "dragGhostCustomTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 314, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 315, + "character": 21 + } + ], + "getSignature": { + "id": 62136, + "name": "dragGhostCustomTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 315, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68652, + "name": "IgcGridRowDragGhostContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62137, + "name": "dragGhostCustomTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the custom template, if any, used for row drag ghost." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 314, + "character": 15 + } + ], + "parameters": [ + { + "id": 62138, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68652, + "name": "IgcGridRowDragGhostContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62323, + "name": "dragIndicatorIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 890, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 891, + "character": 21 + } + ], + "getSignature": { + "id": 62324, + "name": "dragIndicatorIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 891, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62325, + "name": "dragIndicatorIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering the row drag indicator icon" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 890, + "character": 15 + } + ], + "parameters": [ + { + "id": 62326, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62259, + "name": "emptyFilteredGridMessage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 657, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 658, + "character": 21 + } + ], + "getSignature": { + "id": 62260, + "name": "emptyFilteredGridMessage", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 658, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62261, + "name": "emptyFilteredGridMessage", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the message displayed when there are no records and the grid is filtered." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [emptyGridMessage]=\"'The grid is empty'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 657, + "character": 15 + } + ], + "parameters": [ + { + "id": 62262, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62247, + "name": "emptyGridMessage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 613, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 614, + "character": 21 + } + ], + "getSignature": { + "id": 62248, + "name": "emptyGridMessage", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 614, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62249, + "name": "emptyGridMessage", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Sets the message displayed when there are no records." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [emptyGridMessage]=\"'The grid is empty'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 613, + "character": 15 + } + ], + "parameters": [ + { + "id": 62250, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62091, + "name": "emptyGridTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 163, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 164, + "character": 21 + } + ], + "getSignature": { + "id": 62092, + "name": "emptyGridTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 164, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62093, + "name": "emptyGridTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when empty." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<ng-template igxGridEmpty>\n <!-- content to show when the grid is empty -->\n</ng-template>\n```" + }, + { + "kind": "text", + "text": "\nOr\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [emptyGridTemplate]=\"myTemplate\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 163, + "character": 15 + } + ], + "parameters": [ + { + "id": 62094, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62167, + "name": "excelStyleHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 378, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 379, + "character": 21 + } + ], + "getSignature": { + "id": 62168, + "name": "excelStyleHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 379, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62169, + "name": "excelStyleHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the excel style header icon." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 378, + "character": 15 + } + ], + "parameters": [ + { + "id": 62170, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62363, + "name": "expansionStates", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1049, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1050, + "character": 21 + } + ], + "getSignature": { + "id": 62364, + "name": "expansionStates", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1050, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + }, + "setSignature": { + "id": 62365, + "name": "expansionStates", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of key-value pairs [row ID, expansion state]." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Includes only states that differ from the default one.\nSupports two-way binding." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"data\" [(expansionStates)]=\"model.expansionStates\">\n</igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1049, + "character": 15 + } + ], + "parameters": [ + { + "id": 62366, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62357, + "name": "filteredData", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1006, + "character": 15 + } + ], + "getSignature": { + "id": 62358, + "name": "filteredData", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of objects containing the filtered data." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nlet filteredData = this.grid.filteredData;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1006, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 62359, + "name": "filteredSortedData", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1018, + "character": 15 + } + ], + "getSignature": { + "id": 62360, + "name": "filteredSortedData", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array containing the filtered sorted data." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst filteredSortedData = this.grid1.filteredSortedData;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1018, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + }, + { + "id": 62199, + "name": "filteringExpressionsTree", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 466, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 467, + "character": 21 + } + ], + "getSignature": { + "id": 62200, + "name": "filteringExpressionsTree", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 467, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62201, + "name": "filteringExpressionsTree", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering state." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [autoGenerate]=\"true\" [(filteringExpressionsTree)]=\"model.filteringExpressions\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Supports two-way binding." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 466, + "character": 15 + } + ], + "parameters": [ + { + "id": 62202, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62195, + "name": "filteringLogic", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 450, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 451, + "character": 21 + } + ], + "getSignature": { + "id": 62196, + "name": "filteringLogic", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 451, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62197, + "name": "filteringLogic", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering logic of the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The default is AND." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [data]=\"Data\" [autoGenerate]=\"true\" [filteringLogic]=\"filtering\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 450, + "character": 15 + } + ], + "parameters": [ + { + "id": 62198, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62275, + "name": "filterMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 715, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 716, + "character": 21 + } + ], + "getSignature": { + "id": 62276, + "name": "filterMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 716, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70263, + "name": "FilterMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62277, + "name": "filterMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filter mode." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [filterMode]=\"'quickFilter'\" [height]=\"'305px'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it's set to FilterMode.quickFilter." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 715, + "character": 15 + } + ], + "parameters": [ + { + "id": 62278, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70263, + "name": "FilterMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62291, + "name": "filterStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 774, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 775, + "character": 21 + } + ], + "getSignature": { + "id": 62292, + "name": "filterStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 775, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68698, + "name": "IgcFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62293, + "name": "filterStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [filterStrategy]=\"filterStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 774, + "character": 15 + } + ], + "parameters": [ + { + "id": 62294, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68698, + "name": "IgcFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62163, + "name": "headerCollapsedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 370, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 371, + "character": 21 + } + ], + "getSignature": { + "id": 62164, + "name": "headerCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 371, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62165, + "name": "headerCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row collapse indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 370, + "character": 15 + } + ], + "parameters": [ + { + "id": 62166, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62159, + "name": "headerExpandedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 362, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 363, + "character": 21 + } + ], + "getSignature": { + "id": 62160, + "name": "headerExpandedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 363, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62161, + "name": "headerExpandedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the header expand indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 362, + "character": 15 + } + ], + "parameters": [ + { + "id": 62162, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62315, + "name": "headSelectorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 874, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 875, + "character": 21 + } + ], + "getSignature": { + "id": 62316, + "name": "headSelectorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 875, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68795, + "name": "IgcHeadSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62317, + "name": "headSelectorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the header row selector template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 874, + "character": 15 + } + ], + "parameters": [ + { + "id": 62318, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68795, + "name": "IgcHeadSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62231, + "name": "height", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 561, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 562, + "character": 21 + } + ], + "getSignature": { + "id": 62232, + "name": "height", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 562, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62233, + "name": "height", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the height." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [height]=\"'305px'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 561, + "character": 15 + } + ], + "parameters": [ + { + "id": 62234, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62331, + "name": "hiddenColumnsCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 919, + "character": 15 + } + ], + "getSignature": { + "id": 62332, + "name": "hiddenColumnsCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the number of hidden columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst hiddenCol = this.grid.hiddenColumnsCount;\n``" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 919, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 62215, + "name": "hideRowSelectors", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 507, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 508, + "character": 21 + } + ], + "getSignature": { + "id": 62216, + "name": "hideRowSelectors", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 508, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62217, + "name": "hideRowSelectors", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the row selectors are hidden." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default row selectors are shown" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 507, + "character": 15 + } + ], + "parameters": [ + { + "id": 62218, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62251, + "name": "isLoading", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 626, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 627, + "character": 21 + } + ], + "getSignature": { + "id": 62252, + "name": "isLoading", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 627, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62253, + "name": "isLoading", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the grid is going to show a loading indicator." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [isLoading]=\"true\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 626, + "character": 15 + } + ], + "parameters": [ + { + "id": 62254, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62355, + "name": "lastSearchInfo", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 994, + "character": 15 + } + ], + "getSignature": { + "id": 62356, + "name": "lastSearchInfo", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the last search information." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 994, + "character": 15 + } + ], + "type": { + "type": "reference", + "target": 68809, + "name": "IgcSearchInfo", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 62099, + "name": "loadingGridTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 195, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 196, + "character": 21 + } + ], + "getSignature": { + "id": 62100, + "name": "loadingGridTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 196, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62101, + "name": "loadingGridTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when loading." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<ng-template igxGridLoading>\n <!-- content to show when the grid is loading -->\n</ng-template>\n```" + }, + { + "kind": "text", + "text": "\nOr\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [loadingGridTemplate]=\"myTemplate\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 195, + "character": 15 + } + ], + "parameters": [ + { + "id": 62102, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62207, + "name": "locale", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 491, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 492, + "character": 21 + } + ], + "getSignature": { + "id": 62208, + "name": "locale", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 492, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62209, + "name": "locale", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the locale." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If not set, returns browser's language." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 491, + "character": 15 + } + ], + "parameters": [ + { + "id": 62210, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62299, + "name": "mergeStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 801, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 802, + "character": 21 + } + ], + "getSignature": { + "id": 62300, + "name": "mergeStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 802, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68719, + "name": "IgcGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62301, + "name": "mergeStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the merge strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [mergeStrategy]=\"mergeStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 801, + "character": 15 + } + ], + "parameters": [ + { + "id": 62302, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68719, + "name": "IgcGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62087, + "name": "moving", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 144, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 145, + "character": 21 + } + ], + "getSignature": { + "id": 62088, + "name": "moving", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 145, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62089, + "name": "moving", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether columns moving is enabled in the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 144, + "character": 15 + } + ], + "parameters": [ + { + "id": 62090, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62367, + "name": "outlet", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1060, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1061, + "character": 21 + } + ], + "getSignature": { + "id": 62368, + "name": "outlet", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1061, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68840, + "name": "IgcOverlayOutletDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62369, + "name": "outlet", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the outlet used to attach the grid's overlays to." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1060, + "character": 15 + } + ], + "parameters": [ + { + "id": 62370, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68840, + "name": "IgcOverlayOutletDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62187, + "name": "paginationComponents", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 425, + "character": 21 + } + ], + "getSignature": { + "id": 62188, + "name": "paginationComponents", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 425, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 59577, + "name": "IgcPaginatorComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62211, + "name": "pagingMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 496, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 497, + "character": 21 + } + ], + "getSignature": { + "id": 62212, + "name": "pagingMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 497, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70261, + "name": "GridPagingMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62213, + "name": "pagingMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 496, + "character": 15 + } + ], + "parameters": [ + { + "id": 62214, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70261, + "name": "GridPagingMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62375, + "name": "pinnedColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1098, + "character": 15 + } + ], + "getSignature": { + "id": 62376, + "name": "pinnedColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedColumns = this.grid.pinnedColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1098, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62333, + "name": "pinnedColumnsCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 926, + "character": 15 + } + ], + "getSignature": { + "id": 62334, + "name": "pinnedColumnsCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the number of pinned columns." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 926, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 62379, + "name": "pinnedEndColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1122, + "character": 15 + } + ], + "getSignature": { + "id": 62380, + "name": "pinnedEndColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned to the right " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedColumns = this.grid.pinnedEndColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1122, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62381, + "name": "pinnedRows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1135, + "character": 15 + } + ], + "getSignature": { + "id": 62382, + "name": "pinnedRows", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned " + }, + { + "kind": "code", + "text": "`IgxRowComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedRow = this.grid.pinnedRows;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1135, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68843, + "name": "IgcGridRowComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62377, + "name": "pinnedStartColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1110, + "character": 15 + } + ], + "getSignature": { + "id": 62378, + "name": "pinnedStartColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned to the left " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedColumns = this.grid.pinnedStartColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1110, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62263, + "name": "pinning", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 674, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 675, + "character": 21 + } + ], + "getSignature": { + "id": 62264, + "name": "pinning", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 675, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62265, + "name": "pinning", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the initial pinning configuration." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Allows to apply pinning the columns to the start or the end.\nNote that pinning to both sides at a time is not allowed." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [pinning]=\"pinningConfig\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 674, + "character": 15 + } + ], + "parameters": [ + { + "id": 62266, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62123, + "name": "primaryKey", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 280, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 281, + "character": 21 + } + ], + "getSignature": { + "id": 62124, + "name": "primaryKey", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 281, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62125, + "name": "primaryKey", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the primary key." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [primaryKey]=\"'ProductID'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 280, + "character": 15 + } + ], + "parameters": [ + { + "id": 62126, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62191, + "name": "resourceStrings", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 435, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 436, + "character": 21 + } + ], + "getSignature": { + "id": 62192, + "name": "resourceStrings", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 436, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62193, + "name": "resourceStrings", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the resource strings." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it uses EN resources." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 435, + "character": 15 + } + ], + "parameters": [ + { + "id": 62194, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62143, + "name": "rowAddTextTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 330, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 331, + "character": 21 + } + ], + "getSignature": { + "id": 62144, + "name": "rowAddTextTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 331, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62145, + "name": "rowAddTextTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row add text template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 330, + "character": 15 + } + ], + "parameters": [ + { + "id": 62146, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62115, + "name": "rowClasses", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 245, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 246, + "character": 21 + } + ], + "getSignature": { + "id": 62116, + "name": "rowClasses", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 246, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 62117, + "name": "rowClasses", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a conditional class selector to the grid's row element.\nAccepts an object literal, containing key-value pairs,\nwhere the key is the name of the CSS class and the value is\neither a callback function that returns a boolean, or boolean, like so:\n" + }, + { + "kind": "code", + "text": "```typescript\ncallback = (row: RowType) => { return row.selected > 6; }\nrowClasses = { 'className' : this.callback };\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [rowClasses] = \"rowClasses\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 245, + "character": 15 + } + ], + "parameters": [ + { + "id": 62118, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62155, + "name": "rowCollapsedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 354, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 355, + "character": 21 + } + ], + "getSignature": { + "id": 62156, + "name": "rowCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 355, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62157, + "name": "rowCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row collapse indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 354, + "character": 15 + } + ], + "parameters": [ + { + "id": 62158, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62219, + "name": "rowDraggable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 520, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 521, + "character": 21 + } + ], + "getSignature": { + "id": 62220, + "name": "rowDraggable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 521, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62221, + "name": "rowDraggable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether rows can be moved." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [rowDraggable]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 520, + "character": 15 + } + ], + "parameters": [ + { + "id": 62222, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62227, + "name": "rowEditable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 548, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 549, + "character": 21 + } + ], + "getSignature": { + "id": 62228, + "name": "rowEditable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 549, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62229, + "name": "rowEditable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the rows are editable." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is set to false." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [rowEditable]=\"true\" [primaryKey]=\"'ProductID'\" ></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 548, + "character": 15 + } + ], + "parameters": [ + { + "id": 62230, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62147, + "name": "rowEditActionsTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 338, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 339, + "character": 21 + } + ], + "getSignature": { + "id": 62148, + "name": "rowEditActionsTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 339, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68677, + "name": "IgcGridRowEditActionsTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62149, + "name": "rowEditActionsTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row edit actions template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 338, + "character": 15 + } + ], + "parameters": [ + { + "id": 62150, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68677, + "name": "IgcGridRowEditActionsTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62139, + "name": "rowEditTextTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 322, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 323, + "character": 21 + } + ], + "getSignature": { + "id": 62140, + "name": "rowEditTextTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 323, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68667, + "name": "IgcGridRowEditTextTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62141, + "name": "rowEditTextTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row edit text template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 322, + "character": 15 + } + ], + "parameters": [ + { + "id": 62142, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68667, + "name": "IgcGridRowEditTextTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62151, + "name": "rowExpandedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 346, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 347, + "character": 21 + } + ], + "getSignature": { + "id": 62152, + "name": "rowExpandedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 347, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62153, + "name": "rowExpandedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row expand indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 346, + "character": 15 + } + ], + "parameters": [ + { + "id": 62154, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62239, + "name": "rowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 587, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 588, + "character": 21 + } + ], + "getSignature": { + "id": 62240, + "name": "rowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 588, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 62241, + "name": "rowHeight", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the row height." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [rowHeight]=\"100\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 587, + "character": 15 + } + ], + "parameters": [ + { + "id": 62242, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62311, + "name": "rowList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 854, + "character": 15 + } + ], + "getSignature": { + "id": 62312, + "name": "rowList", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst rowList = this.grid.rowList;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 854, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62347, + "name": "rowSelection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 974, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 975, + "character": 21 + } + ], + "getSignature": { + "id": 62348, + "name": "rowSelection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 975, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62349, + "name": "rowSelection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets row selection mode" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default the row selection mode is 'none'\nNote that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 974, + "character": 15 + } + ], + "parameters": [ + { + "id": 62350, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62319, + "name": "rowSelectorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 882, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 883, + "character": 21 + } + ], + "getSignature": { + "id": 62320, + "name": "rowSelectorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 883, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68802, + "name": "IgcRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62321, + "name": "rowSelectorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row selector template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 882, + "character": 15 + } + ], + "parameters": [ + { + "id": 62322, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68802, + "name": "IgcRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62119, + "name": "rowStyles", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 267, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 268, + "character": 21 + } + ], + "getSignature": { + "id": 62120, + "name": "rowStyles", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 268, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 62121, + "name": "rowStyles", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets conditional style properties on the grid row element.\nIt accepts an object literal where the keys are\nthe style properties and the value is an expression to be evaluated.\n" + }, + { + "kind": "code", + "text": "```typescript\nstyles = {\n background: 'yellow',\n color: (row: RowType) => row.selected : 'red': 'white'\n}\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [rowStyles]=\"styles\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 267, + "character": 15 + } + ], + "parameters": [ + { + "id": 62122, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62307, + "name": "selectedRows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 840, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 841, + "character": 21 + } + ], + "getSignature": { + "id": 62308, + "name": "selectedRows", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 841, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + "setSignature": { + "id": 62309, + "name": "selectedRows", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the current selection state." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Represents the selected rows' IDs (primary key or rowData)" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [data]=\"localData\" primaryKey=\"ID\" rowSelection=\"multiple\" [selectedRows]=\"[0, 1, 2]\"><igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 840, + "character": 11 + } + ], + "parameters": [ + { + "id": 62310, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62393, + "name": "selectRowOnClick", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1197, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1198, + "character": 21 + } + ], + "getSignature": { + "id": 62394, + "name": "selectRowOnClick", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1198, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62395, + "name": "selectRowOnClick", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether clicking over a row should select/deselect it" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is set to true" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1197, + "character": 15 + } + ], + "parameters": [ + { + "id": 62396, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62255, + "name": "shouldGenerate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 644, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 645, + "character": 21 + } + ], + "getSignature": { + "id": 62256, + "name": "shouldGenerate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 645, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62257, + "name": "shouldGenerate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "This will allow to bind the grid to remote data and having auto-generated columns at the same time.\nNote that after generating the columns, this property would be disabled to avoid re-creating\ncolumns each time a new data is assigned." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n this.grid.shouldGenerate = true;\n```" + } + ] + }, + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Column re-creation now relies on " + }, + { + "kind": "code", + "text": "`autoGenerate`" + }, + { + "kind": "text", + "text": " instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 644, + "character": 15 + } + ], + "parameters": [ + { + "id": 62258, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62287, + "name": "showSummaryOnCollapse", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 761, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 762, + "character": 21 + } + ], + "getSignature": { + "id": 62288, + "name": "showSummaryOnCollapse", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 762, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62289, + "name": "showSummaryOnCollapse", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether the summary row is visible when groupBy/parent row is collapsed." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [showSummaryOnCollapse]=\"true\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible\nwhen the groupBy/parent row is collapsed." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 761, + "character": 15 + } + ], + "parameters": [ + { + "id": 62290, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62075, + "name": "snackbarDisplayTime", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 101, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 102, + "character": 21 + } + ], + "getSignature": { + "id": 62076, + "name": "snackbarDisplayTime", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 102, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 62077, + "name": "snackbarDisplayTime", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the display time for the row adding snackbar notification." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is 6000ms." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 101, + "character": 15 + } + ], + "parameters": [ + { + "id": 62078, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62171, + "name": "sortAscendingHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 386, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 387, + "character": 21 + } + ], + "getSignature": { + "id": 62172, + "name": "sortAscendingHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 387, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62173, + "name": "sortAscendingHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 386, + "character": 15 + } + ], + "parameters": [ + { + "id": 62174, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62175, + "name": "sortDescendingHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 394, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 395, + "character": 21 + } + ], + "getSignature": { + "id": 62176, + "name": "sortDescendingHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 395, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62177, + "name": "sortDescendingHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 394, + "character": 15 + } + ], + "parameters": [ + { + "id": 62178, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62179, + "name": "sortHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 402, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 403, + "character": 21 + } + ], + "getSignature": { + "id": 62180, + "name": "sortHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 403, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62181, + "name": "sortHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 402, + "character": 15 + } + ], + "parameters": [ + { + "id": 62182, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62327, + "name": "sortingExpressions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 906, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 907, + "character": 21 + } + ], + "getSignature": { + "id": 62328, + "name": "sortingExpressions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 907, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 62329, + "name": "sortingExpressions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting state." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Supports two-way data binding." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [autoGenerate]=\"true\" [(sortingExpressions)]=\"model.sortingExpressions\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 906, + "character": 15 + } + ], + "parameters": [ + { + "id": 62330, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62303, + "name": "sortingOptions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 819, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 820, + "character": 21 + } + ], + "getSignature": { + "id": 62304, + "name": "sortingOptions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 820, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68737, + "name": "IgcSortingOptions", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62305, + "name": "sortingOptions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting options - single or multiple sorting.\nAccepts an " + }, + { + "kind": "code", + "text": "`ISortingOptions`" + }, + { + "kind": "text", + "text": " object with any of the " + }, + { + "kind": "code", + "text": "`mode`" + }, + { + "kind": "text", + "text": " properties." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst _sortingOptions: ISortingOptions = {\n mode: 'single'\n}\n```" + }, + { + "kind": "text", + "text": "html\n<igx-grid [sortingOptions]=\"sortingOptions\"><igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 819, + "character": 15 + } + ], + "parameters": [ + { + "id": 62306, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68737, + "name": "IgcSortingOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62295, + "name": "sortStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 787, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 788, + "character": 21 + } + ], + "getSignature": { + "id": 62296, + "name": "sortStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 788, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62297, + "name": "sortStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [sortStrategy]=\"sortStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 787, + "character": 15 + } + ], + "parameters": [ + { + "id": 62298, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62283, + "name": "summaryCalculationMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 745, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 746, + "character": 21 + } + ], + "getSignature": { + "id": 62284, + "name": "summaryCalculationMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 746, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70265, + "name": "GridSummaryCalculationMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62285, + "name": "summaryCalculationMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the summary calculation mode." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" summaryCalculationMode=\"rootLevelOnly\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 745, + "character": 15 + } + ], + "parameters": [ + { + "id": 62286, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70265, + "name": "GridSummaryCalculationMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62279, + "name": "summaryPosition", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 730, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 731, + "character": 21 + } + ], + "getSignature": { + "id": 62280, + "name": "summaryPosition", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 731, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70264, + "name": "GridSummaryPosition", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62281, + "name": "summaryPosition", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the summary position." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" summaryPosition=\"top\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is bottom." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 730, + "character": 15 + } + ], + "parameters": [ + { + "id": 62282, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70264, + "name": "GridSummaryPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62103, + "name": "summaryRowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 203, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 204, + "character": 21 + } + ], + "getSignature": { + "id": 62104, + "name": "summaryRowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 204, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 62105, + "name": "summaryRowHeight", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set IgxSummaryRow height" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 203, + "character": 15 + } + ], + "parameters": [ + { + "id": 62106, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62183, + "name": "toolbar", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 414, + "character": 21 + } + ], + "getSignature": { + "id": 62184, + "name": "toolbar", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 414, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 59566, + "name": "IgcGridToolbarComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62387, + "name": "totalRecords", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1173, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1174, + "character": 21 + } + ], + "getSignature": { + "id": 62388, + "name": "totalRecords", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1174, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 62389, + "name": "totalRecords", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the total number of records." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Only functions when paging is enabled." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst totalRecords = this.grid.totalRecords;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1173, + "character": 15 + } + ], + "parameters": [ + { + "id": 62390, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62383, + "name": "unpinnedColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1147, + "character": 15 + } + ], + "getSignature": { + "id": 62384, + "name": "unpinnedColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of unpinned " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst unpinnedColumns = this.grid.unpinnedColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1147, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62223, + "name": "validationTrigger", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 533, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 534, + "character": 21 + } + ], + "getSignature": { + "id": 62224, + "name": "validationTrigger", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 534, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70262, + "name": "GridValidationTrigger", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62225, + "name": "validationTrigger", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the trigger for validators used when editing the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid validationTrigger='blur'></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 533, + "character": 15 + } + ], + "parameters": [ + { + "id": 62226, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70262, + "name": "GridValidationTrigger", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62361, + "name": "virtualizationState", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1032, + "character": 15 + } + ], + "getSignature": { + "id": 62362, + "name": "virtualizationState", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the state of the grid virtualization." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Includes the start index and how many records are rendered." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst gridVirtState = this.grid1.virtualizationState;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1032, + "character": 15 + } + ], + "type": { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 62385, + "name": "visibleColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1159, + "character": 15 + } + ], + "getSignature": { + "id": 62386, + "name": "visibleColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of visible " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst visibleColumns = this.grid.visibleColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1159, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 62235, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 574, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 575, + "character": 21 + } + ], + "getSignature": { + "id": 62236, + "name": "width", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 575, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62237, + "name": "width", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the width of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nlet gridWidth = this.grid.width;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 574, + "character": 15 + } + ], + "parameters": [ + { + "id": 62238, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62434, + "name": "addRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1384, + "character": 11 + } + ], + "signatures": [ + { + "id": 62435, + "name": "addRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and adds the data record to the end of the data source." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.addRow(record);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1384, + "character": 11 + } + ], + "parameters": [ + { + "id": 62436, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62586, + "name": "beginAddRowById", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2016, + "character": 11 + } + ], + "signatures": [ + { + "id": 62587, + "name": "beginAddRowById", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI under the specified row by rowID." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If null is passed as rowID, the row adding UI is spawned as the first record in the data view" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowById('ALFKI');\nthis.grid.beginAddRowById('ALFKI', true);\nthis.grid.beginAddRowById(null);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2016, + "character": 11 + } + ], + "parameters": [ + { + "id": 62588, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62589, + "name": "asChild", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the record should be added as a child. Only applicable to igxTreeGrid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62590, + "name": "beginAddRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2032, + "character": 11 + } + ], + "signatures": [ + { + "id": 62591, + "name": "beginAddRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI at the specified index." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Accepted values for index are integers from 0 to this.grid.dataView.length" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowByIndex(0);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2032, + "character": 11 + } + ], + "parameters": [ + { + "id": 62592, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62533, + "name": "clearCellSelection", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1810, + "character": 11 + } + ], + "signatures": [ + { + "id": 62534, + "name": "clearCellSelection", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect selected cells." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearCellSelection();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1810, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62472, + "name": "clearFilter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1557, + "character": 11 + } + ], + "signatures": [ + { + "id": 62473, + "name": "clearFilter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the filtering state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Otherwise clears the filtering state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearFilter();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1557, + "character": 11 + } + ], + "parameters": [ + { + "id": 62474, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62512, + "name": "clearSearch", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1713, + "character": 11 + } + ], + "signatures": [ + { + "id": 62513, + "name": "clearSearch", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes all the highlights in the cell." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSearch();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1713, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62475, + "name": "clearSort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1572, + "character": 11 + } + ], + "signatures": [ + { + "id": 62476, + "name": "clearSort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the sorting state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "otherwise clears the sorting state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSort();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1572, + "character": 11 + } + ], + "parameters": [ + { + "id": 62477, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62579, + "name": "closeAdvancedFilteringDialog", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1978, + "character": 11 + } + ], + "signatures": [ + { + "id": 62580, + "name": "closeAdvancedFilteringDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the advanced filtering dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1978, + "character": 11 + } + ], + "parameters": [ + { + "id": 62581, + "name": "applyChanges", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "indicates whether the changes should be applied" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62405, + "name": "collapseAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1246, + "character": 11 + } + ], + "signatures": [ + { + "id": 62406, + "name": "collapseAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseAll();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1246, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62410, + "name": "collapseRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1276, + "character": 11 + } + ], + "signatures": [ + { + "id": 62411, + "name": "collapseRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1276, + "character": 11 + } + ], + "parameters": [ + { + "id": 62412, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62437, + "name": "deleteRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1401, + "character": 11 + } + ], + "signatures": [ + { + "id": 62438, + "name": "deleteRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set.\nThe method accept rowSelector as a parameter, which is the rowID." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.deleteRow(0);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1401, + "character": 11 + } + ], + "parameters": [ + { + "id": 62439, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + }, + { + "id": 62553, + "name": "deselectAllColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1888, + "character": 11 + } + ], + "signatures": [ + { + "id": 62554, + "name": "deselectAllColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1888, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62530, + "name": "deselectAllRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1799, + "character": 11 + } + ], + "signatures": [ + { + "id": 62531, + "name": "deselectAllRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllRows();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1799, + "character": 11 + } + ], + "parameters": [ + { + "id": 62532, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62550, + "name": "deselectColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1876, + "character": 11 + } + ], + "signatures": [ + { + "id": 62551, + "name": "deselectColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified columns by field." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectColumns(['ID','Name']);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1876, + "character": 11 + } + ], + "parameters": [ + { + "id": 62552, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62524, + "name": "deselectRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1766, + "character": 11 + } + ], + "signatures": [ + { + "id": 62525, + "name": "deselectRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectRows([1,2,5]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1766, + "character": 11 + } + ], + "parameters": [ + { + "id": 62526, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62469, + "name": "disableSummaries", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1542, + "character": 11 + } + ], + "signatures": [ + { + "id": 62470, + "name": "disableSummaries", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disable summaries for the specified column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries('ProductName');\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Disable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries([{ fieldName: 'ProductName' }]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1542, + "character": 11 + } + ], + "parameters": [ + { + "id": 62471, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62466, + "name": "enableSummaries", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1524, + "character": 11 + } + ], + "signatures": [ + { + "id": 62467, + "name": "enableSummaries", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables summaries for the specified column and applies your customSummary." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If you do not provide the customSummary, then the default summary for the column data type will be applied." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);\n```" + }, + { + "kind": "text", + "text": "\nEnable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries('ProductName');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1524, + "character": 11 + } + ], + "parameters": [ + { + "id": 62468, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62582, + "name": "endEdit", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1996, + "character": 11 + } + ], + "signatures": [ + { + "id": 62583, + "name": "endEdit", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finishes the row transactions on the current row and returns whether the grid editing was canceled." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`commit === true`" + }, + { + "kind": "text", + "text": ", passes them from the pending state to the data (or transaction service)" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<button type=\"button\" igxButton (click)=\"grid.endEdit(true)\">Commit Row</button>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1996, + "character": 11 + } + ], + "parameters": [ + { + "id": 62584, + "name": "commit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62585, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 62403, + "name": "expandAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1234, + "character": 11 + } + ], + "signatures": [ + { + "id": 62404, + "name": "expandAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandAll();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1234, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62407, + "name": "expandRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1261, + "character": 11 + } + ], + "signatures": [ + { + "id": 62408, + "name": "expandRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1261, + "character": 11 + } + ], + "parameters": [ + { + "id": 62409, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62455, + "name": "filter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1488, + "character": 11 + } + ], + "signatures": [ + { + "id": 62456, + "name": "filter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic filter(term) {\n this.grid.filter(\"ProductName\", term, IgxStringFilteringOperand.instance().condition(\"contains\"));\n}\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1488, + "character": 11 + } + ], + "parameters": [ + { + "id": 62457, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62458, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62459, + "name": "conditionOrExpressionTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + { + "id": 62460, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62461, + "name": "filterGlobal", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1504, + "character": 11 + } + ], + "signatures": [ + { + "id": 62462, + "name": "filterGlobal", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters all the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " in the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": " with the same condition." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));\n```" + } + ] + }, + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1504, + "character": 11 + } + ], + "parameters": [ + { + "id": 62463, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62464, + "name": "condition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62465, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62498, + "name": "findNext", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1669, + "character": 11 + } + ], + "signatures": [ + { + "id": 62499, + "name": "findNext", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findNext(\"financial\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1669, + "character": 11 + } + ], + "parameters": [ + { + "id": 62500, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62501, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62502, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 62503, + "name": "findPrev", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1686, + "character": 11 + } + ], + "signatures": [ + { + "id": 62504, + "name": "findPrev", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findPrev(\"financial\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1686, + "character": 11 + } + ], + "parameters": [ + { + "id": 62505, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62506, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62507, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 62419, + "name": "getColumnByName", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1312, + "character": 11 + } + ], + "signatures": [ + { + "id": 62420, + "name": "getColumnByName", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " by field name." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCol = this.grid1.getColumnByName(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1312, + "character": 11 + } + ], + "parameters": [ + { + "id": 62421, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62422, + "name": "getColumnByVisibleIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1316, + "character": 11 + } + ], + "signatures": [ + { + "id": 62423, + "name": "getColumnByVisibleIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1316, + "character": 11 + } + ], + "parameters": [ + { + "id": 62424, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62416, + "name": "getHeaderGroupWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1299, + "character": 11 + } + ], + "signatures": [ + { + "id": 62417, + "name": "getHeaderGroupWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the " + }, + { + "kind": "code", + "text": "`width`" + }, + { + "kind": "text", + "text": " to be set on " + }, + { + "kind": "code", + "text": "`IgxGridHeaderGroupComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1299, + "character": 11 + } + ], + "parameters": [ + { + "id": 62418, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + }, + { + "id": 62566, + "name": "getNextCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1945, + "character": 11 + } + ], + "signatures": [ + { + "id": 62567, + "name": "getNextCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the next cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1945, + "character": 11 + } + ], + "parameters": [ + { + "id": 62568, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62569, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62570, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62517, + "name": "getPinnedEndWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1739, + "character": 11 + } + ], + "signatures": [ + { + "id": 62518, + "name": "getPinnedEndWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedEndWidth();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1739, + "character": 11 + } + ], + "parameters": [ + { + "id": 62519, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62514, + "name": "getPinnedStartWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1726, + "character": 11 + } + ], + "signatures": [ + { + "id": 62515, + "name": "getPinnedStartWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedStartWidth();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1726, + "character": 11 + } + ], + "parameters": [ + { + "id": 62516, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62571, + "name": "getPreviousCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1962, + "character": 11 + } + ], + "signatures": [ + { + "id": 62572, + "name": "getPreviousCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the previous cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1962, + "character": 11 + } + ], + "parameters": [ + { + "id": 62573, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62574, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62575, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62449, + "name": "getRowData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1456, + "character": 11 + } + ], + "signatures": [ + { + "id": 62450, + "name": "getRowData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the data that is contained in the row component." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If the primary key is not specified the row selector match the row data." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst data = grid.getRowData(94741);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1456, + "character": 11 + } + ], + "parameters": [ + { + "id": 62451, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + }, + { + "id": 62557, + "name": "getSelectedColumnsData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1912, + "character": 11 + } + ], + "signatures": [ + { + "id": 62558, + "name": "getSelectedColumnsData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current columns selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1912, + "character": 11 + } + ], + "parameters": [ + { + "id": 62559, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62560, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62540, + "name": "getSelectedData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1836, + "character": 11 + } + ], + "signatures": [ + { + "id": 62541, + "name": "getSelectedData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1836, + "character": 11 + } + ], + "parameters": [ + { + "id": 62542, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62543, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62538, + "name": "getSelectedRanges", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1824, + "character": 11 + } + ], + "signatures": [ + { + "id": 62539, + "name": "getSelectedRanges", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get the currently selected ranges in the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1824, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + }, + { + "id": 62397, + "name": "isRecordPinnedByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1207, + "character": 11 + } + ], + "signatures": [ + { + "id": 62398, + "name": "isRecordPinnedByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns whether the record is pinned or not." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1207, + "character": 11 + } + ], + "parameters": [ + { + "id": 62399, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Index of the record in the " + }, + { + "kind": "code", + "text": "`filteredSortedData`" + }, + { + "kind": "text", + "text": " collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62432, + "name": "markForCheck", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1370, + "character": 11 + } + ], + "signatures": [ + { + "id": 62433, + "name": "markForCheck", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Triggers change detection for the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": ".\nCalling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.\nMay degrade performance if used when not needed, or if misused:\n" + }, + { + "kind": "code", + "text": "```typescript\n// DON'Ts:\n// don't call markForCheck from inside a loop\n// don't call markForCheck when a primitive has changed\ngrid.data.forEach(rec => {\n rec = newValue;\n grid.markForCheck();\n});\n\n// DOs\n// call markForCheck after updating a nested property\ngrid.data.forEach(rec => {\n rec.nestedProp1.nestedProp2 = newValue;\n});\ngrid.markForCheck();\n```" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.markForCheck();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1370, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62427, + "name": "moveColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1340, + "character": 11 + } + ], + "signatures": [ + { + "id": 62428, + "name": "moveColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Places a column before or after the specified target column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.moveColumn(column, target);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1340, + "character": 11 + } + ], + "parameters": [ + { + "id": 62429, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62430, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62431, + "name": "pos", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70268, + "name": "DropPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62561, + "name": "navigateTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1928, + "character": 11 + } + ], + "signatures": [ + { + "id": 62562, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to a position in the grid based on provided " + }, + { + "kind": "code", + "text": "`rowindex`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`visibleColumnIndex`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Also can execute a custom logic over the target element,\nthrough a callback function that accepts { targetType: GridKeydownTargetType, target: Object }" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1928, + "character": 11 + } + ], + "parameters": [ + { + "id": 62563, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62564, + "name": "visibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62565, + "name": "cb", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62576, + "name": "openAdvancedFilteringDialog", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1969, + "character": 11 + } + ], + "signatures": [ + { + "id": 62577, + "name": "openAdvancedFilteringDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the advanced filtering dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1969, + "character": 11 + } + ], + "parameters": [ + { + "id": 62578, + "name": "overlaySettings", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62478, + "name": "pinColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1591, + "character": 11 + } + ], + "signatures": [ + { + "id": 62479, + "name": "pinColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins a column by field name." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns whether the operation is successful." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1591, + "character": 11 + } + ], + "parameters": [ + { + "id": 62480, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62481, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62482, + "name": "pinningPosition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 62487, + "name": "pinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1622, + "character": 11 + } + ], + "signatures": [ + { + "id": 62488, + "name": "pinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1622, + "character": 11 + } + ], + "parameters": [ + { + "id": 62489, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62490, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62491, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 62425, + "name": "recalculateAutoSizes", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1328, + "character": 11 + } + ], + "signatures": [ + { + "id": 62426, + "name": "recalculateAutoSizes", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates all widths of columns that have size set to " + }, + { + "kind": "code", + "text": "`auto`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.recalculateAutoSizes();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1328, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62496, + "name": "reflow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1652, + "character": 11 + } + ], + "signatures": [ + { + "id": 62497, + "name": "reflow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates grid width/height dimensions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Should be run when changing DOM elements dimentions manually that affect the grid's size." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.reflow();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1652, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62508, + "name": "refreshSearch", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1701, + "character": 11 + } + ], + "signatures": [ + { + "id": 62509, + "name": "refreshSearch", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Reapplies the existing search." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the last search." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.refreshSearch();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1701, + "character": 11 + } + ], + "parameters": [ + { + "id": 62510, + "name": "updateActiveInfo", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62511, + "name": "endEdit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 62555, + "name": "selectAllColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1900, + "character": 11 + } + ], + "signatures": [ + { + "id": 62556, + "name": "selectAllColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1900, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62527, + "name": "selectAllRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1783, + "character": 11 + } + ], + "signatures": [ + { + "id": 62528, + "name": "selectAllRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectAllRows();\nthis.grid.selectAllRows(false);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1783, + "character": 11 + } + ], + "parameters": [ + { + "id": 62529, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62546, + "name": "selectColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1863, + "character": 11 + } + ], + "signatures": [ + { + "id": 62547, + "name": "selectColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectColumns(['ID','Name'], true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1863, + "character": 11 + } + ], + "parameters": [ + { + "id": 62548, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + { + "id": 62549, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62544, + "name": "selectedColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1849, + "character": 11 + } + ], + "signatures": [ + { + "id": 62545, + "name": "selectedColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get current selected columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "text", + "text": "Returns an array with selected columns\n" + }, + { + "kind": "code", + "text": "```typescript\nconst selectedColumns = this.grid.selectedColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1849, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + }, + { + "id": 62535, + "name": "selectRange", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1817, + "character": 11 + } + ], + "signatures": [ + { + "id": 62536, + "name": "selectRange", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select range(s) of cells between certain rows and columns of the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1817, + "character": 11 + } + ], + "parameters": [ + { + "id": 62537, + "name": "arg", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62520, + "name": "selectRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1753, + "character": 11 + } + ], + "signatures": [ + { + "id": 62521, + "name": "selectRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectRows([1,2,5], true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1753, + "character": 11 + } + ], + "parameters": [ + { + "id": 62522, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 62523, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62452, + "name": "sort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1470, + "character": 11 + } + ], + "signatures": [ + { + "id": 62453, + "name": "sort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Sort the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": "'s " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " based on the provided array of sorting expressions." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1470, + "character": 11 + } + ], + "parameters": [ + { + "id": 62454, + "name": "expression", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62400, + "name": "toggleColumnVisibility", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1222, + "character": 11 + } + ], + "signatures": [ + { + "id": 62401, + "name": "toggleColumnVisibility", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the specified column's visibility." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.toggleColumnVisibility({\n column: this.grid1.columns[0],\n newValue: true\n});\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1222, + "character": 11 + } + ], + "parameters": [ + { + "id": 62402, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62413, + "name": "toggleRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1292, + "character": 11 + } + ], + "signatures": [ + { + "id": 62414, + "name": "toggleRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1292, + "character": 11 + } + ], + "parameters": [ + { + "id": 62415, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62483, + "name": "unpinColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1605, + "character": 11 + } + ], + "signatures": [ + { + "id": 62484, + "name": "unpinColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins a column by field name. Returns whether the operation is successful." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1605, + "character": 11 + } + ], + "parameters": [ + { + "id": 62485, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62486, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 62492, + "name": "unpinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1638, + "character": 11 + } + ], + "signatures": [ + { + "id": 62493, + "name": "unpinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1638, + "character": 11 + } + ], + "parameters": [ + { + "id": 62494, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62495, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 62440, + "name": "updateCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1419, + "character": 11 + } + ], + "signatures": [ + { + "id": 62441, + "name": "updateCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridWithPK.updateCell('Updated', 1, 'ProductName');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1419, + "character": 11 + } + ], + "parameters": [ + { + "id": 62442, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the new value which is to be set." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62443, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to rowID." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62444, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to column field." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 62445, + "name": "updateRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1441, + "character": 11 + } + ], + "signatures": [ + { + "id": 62446, + "name": "updateRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The row is specified by\nrowSelector parameter and the data source record with the passed value.\nThis method will apply requested update only if primary key is specified in the grid." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.updateRow({\n ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')\n }, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1441, + "character": 11 + } + ], + "parameters": [ + { + "id": 62447, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62448, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 62072 + ] + }, + { + "title": "Accessors", + "children": [ + 62131, + 62095, + 62203, + 62271, + 62267, + 62079, + 62083, + 62335, + 62343, + 62339, + 62111, + 62127, + 62373, + 62351, + 62243, + 62107, + 62313, + 62391, + 62371, + 62135, + 62323, + 62259, + 62247, + 62091, + 62167, + 62363, + 62357, + 62359, + 62199, + 62195, + 62275, + 62291, + 62163, + 62159, + 62315, + 62231, + 62331, + 62215, + 62251, + 62355, + 62099, + 62207, + 62299, + 62087, + 62367, + 62187, + 62211, + 62375, + 62333, + 62379, + 62381, + 62377, + 62263, + 62123, + 62191, + 62143, + 62115, + 62155, + 62219, + 62227, + 62147, + 62139, + 62151, + 62239, + 62311, + 62347, + 62319, + 62119, + 62307, + 62393, + 62255, + 62287, + 62075, + 62171, + 62175, + 62179, + 62327, + 62303, + 62295, + 62283, + 62279, + 62103, + 62183, + 62387, + 62383, + 62223, + 62361, + 62385, + 62235 + ] + }, + { + "title": "Methods", + "children": [ + 62434, + 62586, + 62590, + 62533, + 62472, + 62512, + 62475, + 62579, + 62405, + 62410, + 62437, + 62553, + 62530, + 62550, + 62524, + 62469, + 62466, + 62582, + 62403, + 62407, + 62455, + 62461, + 62498, + 62503, + 62419, + 62422, + 62416, + 62566, + 62517, + 62514, + 62571, + 62449, + 62557, + 62540, + 62538, + 62397, + 62432, + 62427, + 62561, + 62576, + 62478, + 62487, + 62425, + 62496, + 62508, + 62555, + 62527, + 62546, + 62544, + 62535, + 62520, + 62452, + 62400, + 62413, + 62483, + 62492, + 62440, + 62445 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 89, + "character": 34 + } + ], + "extendedTypes": [ + { + "type": "intersection", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "EventEmitterInterface" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirectiveEventMap" + }, + "name": "IgcGridBaseDirectiveEventMap", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "intrinsic", + "name": "this" + } + ], + "name": "EventEmitterInterface", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "LitElement" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "this" + } + ], + "name": "LitElement", + "package": "igniteui-webcomponents-grids" + } + ] + } + ] + }, + { + "id": 68400, + "name": "IgrGridCellEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an event argument related to grid cell interactions." + } + ] + }, + "children": [ + { + "id": 68401, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68402, + "name": "IgrGridCellEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68403, + "name": "cell", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the grid cell that triggered the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-cell-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68404, + "name": "event", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the original event that occurred\nExamples of such events include: selecting, clicking, double clicking, etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-cell-event-args.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68405, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68401 + ] + }, + { + "title": "Properties", + "children": [ + 68403, + 68404, + 68405 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-cell-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68598, + "name": "IgrGridClipboardEvent", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments when data from a grid is being copied." + } + ] + }, + "children": [ + { + "id": 68599, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68600, + "name": "IgrGridClipboardEvent", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68598, + "name": "IgcGridClipboardEvent", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68605, + "name": "cancel", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 68606, + "name": "cancel", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68607, + "name": "cancel", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`cancel`" + }, + { + "kind": "text", + "text": " returns whether an external event has intercepted the copying\nIf the value becomes \"true\", it returns/exits from the method, instantiating the interface" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 68608, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68601, + "name": "data", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 14, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 68602, + "name": "data", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + "setSignature": { + "id": 68603, + "name": "data", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`data`" + }, + { + "kind": "text", + "text": " can be of any type and refers to the data that is being copied/stored to the clipboard" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 14, + "character": 15 + } + ], + "parameters": [ + { + "id": 68604, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68599 + ] + }, + { + "title": "Accessors", + "children": [ + 68605, + 68601 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 68540, + "name": "IgrGridContextMenuEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an event argument for the grid contextMenu output" + } + ] + }, + "children": [ + { + "id": 68541, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68542, + "name": "IgrGridContextMenuEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68540, + "name": "IgcGridContextMenuEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68543, + "name": "cell", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the grid cell that triggered the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68544, + "name": "event", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the original event that occurred\nExamples of such events include: selecting, clicking, double clicking, etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68545, + "name": "row", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the grid row that triggered the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68541 + ] + }, + { + "title": "Properties", + "children": [ + 68543, + 68544, + 68545 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 68961, + "name": "IgrGridCreatedEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68962, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68963, + "name": "IgrGridCreatedEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68961, + "name": "IgcGridCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68966, + "name": "grid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 57396, + "name": "IgcHierarchicalGridComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68964, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 57754, + "name": "IgcRowIslandComponent", + "package": "igniteui-webcomponents-grids" + }, + "overwrites": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68965, + "name": "parentID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68967, + "name": "parentRowData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68962 + ] + }, + { + "title": "Properties", + "children": [ + 68966, + 68964, + 68965, + 68967 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68473, + "name": "IgrGridEditDoneEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to grid editing completion." + } + ] + }, + "children": [ + { + "id": 68474, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68475, + "name": "IgrGridEditDoneEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68479, + "name": "cellID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 30, + "character": 11 + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 68480, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68482, + "name": "columnID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 30, + "character": 34 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68481, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 30, + "character": 22 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68483, + "name": "rowIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 30, + "character": 49 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 68482, + 68481, + 68483 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 30, + "character": 20 + } + ] + } + } + }, + { + "id": 68487, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the column information of the edited cell" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 59, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68489, + "name": "isAddRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates if the editing consists of adding a new row" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 73, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68486, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the value, that is being entered in the edited cell\nWhen there is no " + }, + { + "kind": "code", + "text": "`newValue`" + }, + { + "kind": "text", + "text": " and the event has ended, the value of the cell returns to the " + }, + { + "kind": "code", + "text": "`oldValue`" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 52, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68485, + "name": "oldValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the previous (before editing) value of the edited cell.\nIt's used when the event has been stopped/exited." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 44, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68488, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the grid instance that owns the edit event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 66, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + }, + "overwrites": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68477, + "name": "primaryKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68484, + "name": "rowData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`rowData`" + }, + { + "kind": "text", + "text": " represents the updated/committed data of the row after the edit (newValue)\nThe only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 37, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68476, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68478, + "name": "rowKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68490, + "name": "valid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates if the new value would be valid.\nIt can be set to return the result of the methods for validation of the grid" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 81, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68474 + ] + }, + { + "title": "Properties", + "children": [ + 68479, + 68487, + 68489, + 68486, + 68485, + 68488, + 68477, + 68484, + 68476, + 68478, + 68490 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68454, + "name": "IgrGridEditEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to grid editing.\nThe event is cancelable\nIt contains information about the row and the column, as well as the old and nwe value of the element/cell" + } + ] + }, + "children": [ + { + "id": 68455, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68456, + "name": "IgrGridEditEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68457, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68461, + "name": "cellID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 40, + "character": 11 + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 68462, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68464, + "name": "columnID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 40, + "character": 34 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68463, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 40, + "character": 22 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68465, + "name": "rowIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 40, + "character": 49 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 68464, + 68463, + 68465 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 40, + "character": 20 + } + ] + } + } + }, + { + "id": 68469, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the column information of the edited cell" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 69, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68471, + "name": "isAddRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates if the editing consists of adding a new row" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 83, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68468, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the value, that is being entered in the edited cell\nWhen there is no " + }, + { + "kind": "code", + "text": "`newValue`" + }, + { + "kind": "text", + "text": " and the event has ended, the value of the cell returns to the " + }, + { + "kind": "code", + "text": "`oldValue`" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 62, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68467, + "name": "oldValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the previous (before editing) value of the edited cell.\nIt's used when the event has been stopped/exited." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 54, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68470, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the grid instance that owns the edit event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 76, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68459, + "name": "primaryKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68466, + "name": "rowData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`rowData`" + }, + { + "kind": "text", + "text": " represents the updated/committed data of the row after the edit (newValue)\nThe only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 47, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68458, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68460, + "name": "rowKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 37, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68472, + "name": "valid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates if the new value would be valid.\nIt can be set to return the result of the methods for validation of the grid" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 91, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68455 + ] + }, + { + "title": "Properties", + "children": [ + 68457, + 68461, + 68469, + 68471, + 68468, + 68467, + 68470, + 68459, + 68466, + 68458, + 68460, + 68472 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "line": 15, + "character": 25 + } + ] + }, + { + "id": 56705, + "name": "IgrGridEditingActions", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Grid Editing Actions for the Action Strip" + } + ] + }, + "children": [ + { + "id": 56717, + "name": "addChild", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An input to enable/disable action strip child row adding button" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56713, + "name": "addRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An input to enable/disable action strip row adding button" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56715, + "name": "deleteRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An input to enable/disable action strip row deleting button" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56714, + "name": "editRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An input to enable/disable action strip row editing button" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56716, + "name": "hasChildren", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 56718, + "name": "startEdit", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enter row or cell edit mode depending the grid rowEditable option" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56719, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "line": 72, + "character": 11 + } + ], + "signatures": [ + { + "id": 56720, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enter row or cell edit mode depending the grid rowEditable option" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridEditingActions.startEdit();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "line": 72, + "character": 11 + } + ], + "parameters": [ + { + "id": 56721, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56722, + "name": "startEdit", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enter row or cell edit mode depending the grid rowEditable option" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridEditingActions.startEdit();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56723, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 56717, + 56713, + 56715, + 56714 + ] + }, + { + "title": "Accessors", + "children": [ + 56716 + ] + }, + { + "title": "Methods", + "children": [ + 56718 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 56716 + ] + }, + { + "title": "Methods", + "children": [ + 56718 + ] + }, + { + "title": "Properties", + "children": [ + 56717, + 56713, + 56715, + 56714 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-editing-actions.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/grid-editing-actions.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 56709, + "name": "IgrGridEditingActions", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68674, + "name": "IgrGridEmptyTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68675, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68676, + "name": "IgrGridEmptyTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68675 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-empty-template-context.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 68412, + "name": "IgrGridFormGroupCreatedEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface representing the event arguments when a form group is created in the grid.\n- formGroup: The form group that is created.\n- owner: The grid instance that owns the form group." + } + ] + }, + "children": [ + { + "id": 68413, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68414, + "name": "IgrGridFormGroupCreatedEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68412, + "name": "IgcGridFormGroupCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68415, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-form-group-created-event-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68413 + ] + }, + { + "title": "Properties", + "children": [ + 68415 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-form-group-created-event-args.d.ts", + "line": 13, + "character": 25 + } + ] + }, + { + "id": 63633, + "name": "IgrGridGroupingStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a grouping strategy for the grid data, extending the Sorting Strategy interface (contains a sorting method)." + } + ] + }, + "children": [ + { + "id": 63634, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63635, + "name": "IgrGridGroupingStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63633, + "name": "IgcGridGroupingStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 68713, + "name": "IgcGridSortingStrategy.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68712, + "name": "IgcGridSortingStrategy.constructor" + } + }, + { + "id": 63636, + "name": "groupBy", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 63637, + "name": "groupBy", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The method groups the provided data based on the given grouping state and returns the result.\n" + }, + { + "kind": "code", + "text": "`data`" + }, + { + "kind": "text", + "text": ": The array of data to be grouped. Could be of any type.\n" + }, + { + "kind": "code", + "text": "`state`" + }, + { + "kind": "text", + "text": ": The grouping state that defines the grouping settings and expressions.\n" + }, + { + "kind": "code", + "text": "`grid`" + }, + { + "kind": "text", + "text": ": (Optional) The instance of the grid where the grouping is applied.\n" + }, + { + "kind": "code", + "text": "`groupsRecords`" + }, + { + "kind": "text", + "text": ": (Optional) An array that holds the records for each group.\n" + }, + { + "kind": "code", + "text": "`fullResult`" + }, + { + "kind": "text", + "text": ": (Optional) The complete result of grouping including groups and summary data.\nReturns an object containing the result of the grouping operation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "line": 28, + "character": 11 + } + ], + "parameters": [ + { + "id": 63638, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 63639, + "name": "state", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67896, + "name": "IgcGroupingState", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 63640, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63641, + "name": "groupsRecords", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 63642, + "name": "fullResult", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61895, + "name": "IgcGroupByResult", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "reference", + "target": 61895, + "name": "IgcGroupByResult", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63643, + "name": "sort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "line": 25, + "character": 11 + } + ], + "signatures": [ + { + "id": 63644, + "name": "sort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`data`" + }, + { + "kind": "text", + "text": ": The array of data to be sorted. Could be of any type.\n" + }, + { + "kind": "code", + "text": "`expressions`" + }, + { + "kind": "text", + "text": ": An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc.\n" + }, + { + "kind": "code", + "text": "`grid`" + }, + { + "kind": "text", + "text": ": (Optional) The instance of the grid where the sorting is applied.\nReturns a new array with the data sorted according to the sorting expressions." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "line": 25, + "character": 11 + } + ], + "parameters": [ + { + "id": 63645, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 63646, + "name": "expressions", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 63647, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68715, + "name": "IgcGridSortingStrategy.sort" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68714, + "name": "IgcGridSortingStrategy.sort" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63634 + ] + }, + { + "title": "Methods", + "children": [ + 63636, + 63643 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68691, + "name": "IgrGridHeaderTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68692, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68693, + "name": "IgrGridHeaderTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68694, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68695, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70093, + "name": "IgcHeaderType", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68696, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68697, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70093, + "name": "IgcHeaderType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68692 + ] + }, + { + "title": "Accessors", + "children": [ + 68694 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68576, + "name": "IgrGridKeydownEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an event, emitted when keydown is triggered over element inside grid's body\nThis event is fired only if the key combination is supported in the grid." + } + ] + }, + "children": [ + { + "id": 68577, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68578, + "name": "IgrGridKeydownEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68576, + "name": "IgcGridKeydownEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68582, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event is cancelable\n" + }, + { + "kind": "code", + "text": "`cancel`" + }, + { + "kind": "text", + "text": " returns whether the event has been intercepted and stopped\nIf the value becomes \"true\", it returns/exits from the method, instantiating the interface" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68581, + "name": "event", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the original event, that occurred." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68583, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68580, + "name": "target", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the information and details of the object itself" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68579, + "name": "targetType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The " + }, + { + "kind": "code", + "text": "`targetType`" + }, + { + "kind": "text", + "text": " represents the type of the targeted object. For example a cell or a row" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70278, + "name": "GridKeydownTargetType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68577 + ] + }, + { + "title": "Properties", + "children": [ + 68582, + 68581, + 68583, + 68580, + 68579 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "line": 13, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 63622, + "name": "IgrGridMasterDetailContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63623, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63624, + "name": "IgrGridMasterDetailContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63622, + "name": "IgcGridMasterDetailContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63625, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 12, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 63626, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 63627, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 12, + "character": 11 + } + ], + "parameters": [ + { + "id": 63628, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63629, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 63630, + "name": "index", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 63631, + "name": "index", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 63632, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63623 + ] + }, + { + "title": "Accessors", + "children": [ + 63625, + 63629 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 68719, + "name": "IgrGridMergeStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Merge strategy interface." + } + ] + }, + "children": [ + { + "id": 68720, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68721, + "name": "IgrGridMergeStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68719, + "name": "IgcGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68732, + "name": "comparer", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "line": 27, + "character": 11 + } + ], + "signatures": [ + { + "id": 68733, + "name": "comparer", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Function that compares values for merging. Returns true if same, false if different." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "line": 27, + "character": 11 + } + ], + "parameters": [ + { + "id": 68734, + "name": "prevRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68735, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68736, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 68722, + "name": "merge", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "line": 21, + "character": 11 + } + ], + "signatures": [ + { + "id": 68723, + "name": "merge", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Function that processes merging of the whole data per merged field.\nReturns collection where object has reference to the original record and map of the cell merge metadata per field." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "line": 21, + "character": 11 + } + ], + "parameters": [ + { + "id": 68724, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68725, + "name": "field", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 68726, + "name": "comparer", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68727, + "name": "result", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68728, + "name": "activeRowIndexes", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 68729, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68730, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68731, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68720 + ] + }, + { + "title": "Methods", + "children": [ + 68732, + 68722 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 68954, + "name": "IgrGridPaginatorTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68955, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68956, + "name": "IgrGridPaginatorTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68954, + "name": "IgcGridPaginatorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68957, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68958, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68959, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68960, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68955 + ] + }, + { + "title": "Accessors", + "children": [ + 68957 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 56725, + "name": "IgrGridPinningActions", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Grid Pinning Actions for the Action Strip" + } + ] + }, + "children": [ + { + "id": 56733, + "name": "pin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row according to the context." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56734, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "line": 35, + "character": 11 + } + ], + "signatures": [ + { + "id": 56735, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row according to the context." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridPinningActions.pin();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "line": 35, + "character": 11 + } + ], + "parameters": [ + { + "id": 56736, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56737, + "name": "pin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row according to the context." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridPinningActions.pin();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56738, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56745, + "name": "scrollToRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56746, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "line": 51, + "character": 11 + } + ], + "signatures": [ + { + "id": 56747, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "line": 51, + "character": 11 + } + ], + "parameters": [ + { + "id": 56748, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56749, + "name": "scrollToRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 56750, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56739, + "name": "unpin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row according to the context." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56740, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "line": 47, + "character": 11 + } + ], + "signatures": [ + { + "id": 56741, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row according to the context." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridPinningActions.unpin();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "line": 47, + "character": 11 + } + ], + "parameters": [ + { + "id": 56742, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56743, + "name": "unpin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row according to the context." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridPinningActions.unpin();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 56744, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Methods", + "children": [ + 56733, + 56745, + 56739 + ] + } + ], + "categories": [ + { + "title": "Methods", + "children": [ + 56733, + 56745, + 56739 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-pinning-actions.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/grid-pinning-actions.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 56729, + "name": "IgrGridPinningActions", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 65341, + "name": "IgrGridResourceStrings", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65342, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65343, + "name": "IgrGridResourceStrings", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65486, + "name": "igx_grid_actions_add_child_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 436, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65484, + "name": "igx_grid_actions_add_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 430, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65487, + "name": "igx_grid_actions_delete_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 439, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65483, + "name": "igx_grid_actions_edit_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 427, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65491, + "name": "igx_grid_actions_jumpDown_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 451, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65490, + "name": "igx_grid_actions_jumpUp_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 448, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65488, + "name": "igx_grid_actions_pin_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 442, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65489, + "name": "igx_grid_actions_unpin_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 445, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65485, + "name": "igx_grid_add_row_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 433, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65444, + "name": "igx_grid_advanced_filter_add_condition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 310, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65445, + "name": "igx_grid_advanced_filter_add_condition_root", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 313, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65446, + "name": "igx_grid_advanced_filter_add_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 316, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65447, + "name": "igx_grid_advanced_filter_add_group_root", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 319, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65437, + "name": "igx_grid_advanced_filter_and_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 289, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65442, + "name": "igx_grid_advanced_filter_and_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 304, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65452, + "name": "igx_grid_advanced_filter_column_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 334, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65440, + "name": "igx_grid_advanced_filter_create_and_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 298, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65441, + "name": "igx_grid_advanced_filter_create_or_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 301, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65449, + "name": "igx_grid_advanced_filter_delete", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 325, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65450, + "name": "igx_grid_advanced_filter_delete_filters", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 328, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65458, + "name": "igx_grid_advanced_filter_dialog_checkbox_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 352, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65457, + "name": "igx_grid_advanced_filter_dialog_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 349, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65456, + "name": "igx_grid_advanced_filter_dialog_title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 346, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65459, + "name": "igx_grid_advanced_filter_drop_ghost_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 355, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65439, + "name": "igx_grid_advanced_filter_end_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 295, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65436, + "name": "igx_grid_advanced_filter_from_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 286, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65451, + "name": "igx_grid_advanced_filter_initial_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 331, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65438, + "name": "igx_grid_advanced_filter_or_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 292, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65443, + "name": "igx_grid_advanced_filter_or_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 307, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65454, + "name": "igx_grid_advanced_filter_query_value_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 340, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65460, + "name": "igx_grid_advanced_filter_select_entity", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 358, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65461, + "name": "igx_grid_advanced_filter_select_return_field_single", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 361, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65455, + "name": "igx_grid_advanced_filter_switch_group", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 343, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65435, + "name": "igx_grid_advanced_filter_title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 283, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65448, + "name": "igx_grid_advanced_filter_ungroup", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 322, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65453, + "name": "igx_grid_advanced_filter_value_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 337, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65357, + "name": "igx_grid_complex_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 49, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65521, + "name": "igx_grid_email_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 541, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65347, + "name": "igx_grid_emptyFilteredGrid_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65348, + "name": "igx_grid_emptyGrid_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65419, + "name": "igx_grid_excel_add_to_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 235, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65415, + "name": "igx_grid_excel_apply", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 223, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65420, + "name": "igx_grid_excel_blanks", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 238, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65430, + "name": "igx_grid_excel_boolean_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 268, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65414, + "name": "igx_grid_excel_cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 220, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65431, + "name": "igx_grid_excel_currency_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 271, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65411, + "name": "igx_grid_excel_custom_dialog_add", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 211, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65412, + "name": "igx_grid_excel_custom_dialog_clear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 214, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65413, + "name": "igx_grid_excel_custom_dialog_header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 217, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65432, + "name": "igx_grid_excel_custom_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 274, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65429, + "name": "igx_grid_excel_date_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 265, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65426, + "name": "igx_grid_excel_deselect", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 256, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65410, + "name": "igx_grid_excel_filter_clear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 208, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65404, + "name": "igx_grid_excel_filter_moving_header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 190, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65400, + "name": "igx_grid_excel_filter_moving_left", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 178, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65401, + "name": "igx_grid_excel_filter_moving_left_short", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 181, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65402, + "name": "igx_grid_excel_filter_moving_right", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 184, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65403, + "name": "igx_grid_excel_filter_moving_right_short", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 187, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65405, + "name": "igx_grid_excel_filter_sorting_asc", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 193, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65406, + "name": "igx_grid_excel_filter_sorting_asc_short", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 196, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65407, + "name": "igx_grid_excel_filter_sorting_desc", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 199, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65408, + "name": "igx_grid_excel_filter_sorting_desc_short", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 202, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65409, + "name": "igx_grid_excel_filter_sorting_header", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 205, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65421, + "name": "igx_grid_excel_hide", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 241, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65434, + "name": "igx_grid_excel_matches_count", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 280, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65433, + "name": "igx_grid_excel_no_matches", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 277, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65428, + "name": "igx_grid_excel_number_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 262, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65423, + "name": "igx_grid_excel_pin", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 247, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65416, + "name": "igx_grid_excel_search_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 226, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65425, + "name": "igx_grid_excel_select", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 253, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65417, + "name": "igx_grid_excel_select_all", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 229, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65418, + "name": "igx_grid_excel_select_all_search_results", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 232, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65422, + "name": "igx_grid_excel_show", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 244, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65427, + "name": "igx_grid_excel_text_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 259, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65424, + "name": "igx_grid_excel_unpin", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 250, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65349, + "name": "igx_grid_filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65370, + "name": "igx_grid_filter_after", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 88, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65389, + "name": "igx_grid_filter_all", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 145, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65371, + "name": "igx_grid_filter_at", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 91, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65374, + "name": "igx_grid_filter_at_after", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 100, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65373, + "name": "igx_grid_filter_at_before", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 97, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65369, + "name": "igx_grid_filter_before", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 85, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65392, + "name": "igx_grid_filter_condition_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 154, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65359, + "name": "igx_grid_filter_contains", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 55, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65360, + "name": "igx_grid_filter_doesNotContain", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 58, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65364, + "name": "igx_grid_filter_doesNotEqual", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 70, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65365, + "name": "igx_grid_filter_empty", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 73, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65362, + "name": "igx_grid_filter_endsWith", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 64, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65363, + "name": "igx_grid_filter_equals", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 67, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65388, + "name": "igx_grid_filter_false", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 142, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65383, + "name": "igx_grid_filter_greaterThan", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 127, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65385, + "name": "igx_grid_filter_greaterThanOrEqualTo", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 133, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65390, + "name": "igx_grid_filter_in", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 148, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65378, + "name": "igx_grid_filter_lastMonth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 112, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65381, + "name": "igx_grid_filter_lastYear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 121, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65384, + "name": "igx_grid_filter_lessThan", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 130, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65386, + "name": "igx_grid_filter_lessThanOrEqualTo", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 136, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65379, + "name": "igx_grid_filter_nextMonth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 115, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65382, + "name": "igx_grid_filter_nextYear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 124, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65372, + "name": "igx_grid_filter_not_at", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 94, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65366, + "name": "igx_grid_filter_notEmpty", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 76, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65391, + "name": "igx_grid_filter_notIn", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 151, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65368, + "name": "igx_grid_filter_notNull", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 82, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65367, + "name": "igx_grid_filter_null", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 79, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65356, + "name": "igx_grid_filter_operator_and", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 46, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65358, + "name": "igx_grid_filter_operator_or", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 52, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65353, + "name": "igx_grid_filter_row_boolean_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 37, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65350, + "name": "igx_grid_filter_row_close", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65354, + "name": "igx_grid_filter_row_date_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 40, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65352, + "name": "igx_grid_filter_row_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65351, + "name": "igx_grid_filter_row_reset", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65355, + "name": "igx_grid_filter_row_time_placeholder", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 43, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65361, + "name": "igx_grid_filter_startsWith", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 61, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65377, + "name": "igx_grid_filter_thisMonth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 109, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65380, + "name": "igx_grid_filter_thisYear", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 118, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65375, + "name": "igx_grid_filter_today", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 103, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65387, + "name": "igx_grid_filter_true", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 139, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65376, + "name": "igx_grid_filter_yesterday", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 106, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65346, + "name": "igx_grid_groupByArea_deselect_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65344, + "name": "igx_grid_groupByArea_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 10, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65345, + "name": "igx_grid_groupByArea_select_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65463, + "name": "igx_grid_hiding_check_all_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 367, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65464, + "name": "igx_grid_hiding_uncheck_all_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 370, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65520, + "name": "igx_grid_max_length_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 538, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65518, + "name": "igx_grid_max_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 532, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65519, + "name": "igx_grid_min_length_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 535, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65517, + "name": "igx_grid_min_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 529, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65522, + "name": "igx_grid_pattern_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 544, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65462, + "name": "igx_grid_pinned_row_indicator", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 364, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65465, + "name": "igx_grid_pinning_check_all_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 373, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65466, + "name": "igx_grid_pinning_uncheck_all_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 376, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65497, + "name": "igx_grid_pivot_aggregate_avg", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 469, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65493, + "name": "igx_grid_pivot_aggregate_count", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 457, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65499, + "name": "igx_grid_pivot_aggregate_date_earliest", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 475, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65498, + "name": "igx_grid_pivot_aggregate_date_latest", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 472, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65495, + "name": "igx_grid_pivot_aggregate_max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 463, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65494, + "name": "igx_grid_pivot_aggregate_min", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 460, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65496, + "name": "igx_grid_pivot_aggregate_sum", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 466, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65501, + "name": "igx_grid_pivot_aggregate_time_earliest", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 481, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65500, + "name": "igx_grid_pivot_aggregate_time_latest", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 478, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65507, + "name": "igx_grid_pivot_column_drop_chip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 499, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65492, + "name": "igx_grid_pivot_date_dimension_total", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 454, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65503, + "name": "igx_grid_pivot_empty_column_drop_area", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 487, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65504, + "name": "igx_grid_pivot_empty_filter_drop_area", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 490, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65510, + "name": "igx_grid_pivot_empty_message", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 508, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65502, + "name": "igx_grid_pivot_empty_row_drop_area", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 484, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65505, + "name": "igx_grid_pivot_empty_value_drop_area", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 493, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65508, + "name": "igx_grid_pivot_filter_drop_chip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 502, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65506, + "name": "igx_grid_pivot_row_drop_chip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 496, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65513, + "name": "igx_grid_pivot_selector_columns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 517, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65511, + "name": "igx_grid_pivot_selector_filters", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 511, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65515, + "name": "igx_grid_pivot_selector_panel_empty", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 523, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65512, + "name": "igx_grid_pivot_selector_rows", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 514, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65514, + "name": "igx_grid_pivot_selector_values", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 520, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65509, + "name": "igx_grid_pivot_value_drop_chip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 505, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65516, + "name": "igx_grid_required_validation_error", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 526, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65468, + "name": "igx_grid_row_edit_btn_cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 382, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65467, + "name": "igx_grid_row_edit_btn_done", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 379, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65469, + "name": "igx_grid_row_edit_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 385, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65482, + "name": "igx_grid_snackbar_addrow_actiontext", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 424, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65481, + "name": "igx_grid_snackbar_addrow_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 421, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65397, + "name": "igx_grid_summary_average", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 169, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65393, + "name": "igx_grid_summary_count", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 157, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65398, + "name": "igx_grid_summary_earliest", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 172, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65399, + "name": "igx_grid_summary_latest", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 175, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65395, + "name": "igx_grid_summary_max", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 163, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65394, + "name": "igx_grid_summary_min", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 160, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65396, + "name": "igx_grid_summary_sum", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 166, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65470, + "name": "igx_grid_toolbar_actions_filter_prompt", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 388, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65476, + "name": "igx_grid_toolbar_advanced_filtering_button_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 406, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65475, + "name": "igx_grid_toolbar_advanced_filtering_button_tooltip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 403, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65478, + "name": "igx_grid_toolbar_exporter_button_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 412, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65477, + "name": "igx_grid_toolbar_exporter_button_tooltip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 409, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65480, + "name": "igx_grid_toolbar_exporter_csv_entry_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 418, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65479, + "name": "igx_grid_toolbar_exporter_excel_entry_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 415, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65472, + "name": "igx_grid_toolbar_hiding_button_tooltip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 394, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65474, + "name": "igx_grid_toolbar_hiding_title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 400, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65471, + "name": "igx_grid_toolbar_pinning_button_tooltip", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 391, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65473, + "name": "igx_grid_toolbar_pinning_title", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 397, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65342 + ] + }, + { + "title": "Properties", + "children": [ + 65486, + 65484, + 65487, + 65483, + 65491, + 65490, + 65488, + 65489, + 65485, + 65444, + 65445, + 65446, + 65447, + 65437, + 65442, + 65452, + 65440, + 65441, + 65449, + 65450, + 65458, + 65457, + 65456, + 65459, + 65439, + 65436, + 65451, + 65438, + 65443, + 65454, + 65460, + 65461, + 65455, + 65435, + 65448, + 65453, + 65357, + 65521, + 65347, + 65348, + 65419, + 65415, + 65420, + 65430, + 65414, + 65431, + 65411, + 65412, + 65413, + 65432, + 65429, + 65426, + 65410, + 65404, + 65400, + 65401, + 65402, + 65403, + 65405, + 65406, + 65407, + 65408, + 65409, + 65421, + 65434, + 65433, + 65428, + 65423, + 65416, + 65425, + 65417, + 65418, + 65422, + 65427, + 65424, + 65349, + 65370, + 65389, + 65371, + 65374, + 65373, + 65369, + 65392, + 65359, + 65360, + 65364, + 65365, + 65362, + 65363, + 65388, + 65383, + 65385, + 65390, + 65378, + 65381, + 65384, + 65386, + 65379, + 65382, + 65372, + 65366, + 65391, + 65368, + 65367, + 65356, + 65358, + 65353, + 65350, + 65354, + 65352, + 65351, + 65355, + 65361, + 65377, + 65380, + 65375, + 65387, + 65376, + 65346, + 65344, + 65345, + 65463, + 65464, + 65520, + 65518, + 65519, + 65517, + 65522, + 65462, + 65465, + 65466, + 65497, + 65493, + 65499, + 65498, + 65495, + 65494, + 65496, + 65501, + 65500, + 65507, + 65492, + 65503, + 65504, + 65510, + 65502, + 65505, + 65508, + 65506, + 65513, + 65511, + 65515, + 65512, + 65514, + 65509, + 65516, + 65468, + 65467, + 65469, + 65482, + 65481, + 65397, + 65393, + 65398, + 65399, + 65395, + 65394, + 65396, + 65470, + 65476, + 65475, + 65478, + 65477, + 65480, + 65479, + 65472, + 65474, + 65471, + 65473 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "line": 6, + "character": 25 + } + ] + }, + { + "id": 68843, + "name": "IgrGridRowComponent", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68844, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68845, + "name": "IgrGridRowComponent", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68843, + "name": "IgcGridRowComponent", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 68746, + "name": "IgcRowDirective.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68745, + "name": "IgcRowDirective.constructor" + } + }, + { + "id": 68876, + "name": "addRowUI", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 78, + "character": 15 + } + ], + "getSignature": { + "id": 68877, + "name": "addRowUI", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 78, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.addRowUI" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68769, + "name": "IgcRowDirective.addRowUI" + } + }, + { + "id": 68880, + "name": "cells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 94, + "character": 15 + } + ], + "getSignature": { + "id": 68881, + "name": "cells", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the rendered cells in the row component.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// get the cells of the third selected row\nlet selectedRowCells = this.grid.selectedRows[2].cells;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 94, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.cells" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68773, + "name": "IgcRowDirective.cells" + } + }, + { + "id": 68854, + "name": "data", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 68855, + "name": "data", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.data" + } + }, + "setSignature": { + "id": 68856, + "name": "data", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The data passed to the row component.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// get the row data for the first selected row\nlet selectedRowData = this.grid.selectedRows[0].data;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 68857, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.data" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68747, + "name": "IgcRowDirective.data" + } + }, + { + "id": 68882, + "name": "dataRowIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 98, + "character": 15 + } + ], + "getSignature": { + "id": 68883, + "name": "dataRowIndex", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 98, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.dataRowIndex" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68775, + "name": "IgcRowDirective.dataRowIndex" + } + }, + { + "id": 68862, + "name": "disabled", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 46, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 47, + "character": 21 + } + ], + "getSignature": { + "id": 68863, + "name": "disabled", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 47, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.disabled" + } + }, + "setSignature": { + "id": 68864, + "name": "disabled", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether this specific row has disabled functionality for editing and row selection.\nDefault value is " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.selectedRows[0].pinned = true;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 46, + "character": 15 + } + ], + "parameters": [ + { + "id": 68865, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.disabled" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68755, + "name": "IgcRowDirective.disabled" + } + }, + { + "id": 68872, + "name": "expanded", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 73, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 74, + "character": 21 + } + ], + "getSignature": { + "id": 68873, + "name": "expanded", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 74, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.expanded" + } + }, + "setSignature": { + "id": 68874, + "name": "expanded", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the expanded state of the row.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet isExpanded = row.expanded;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 73, + "character": 15 + } + ], + "parameters": [ + { + "id": 68875, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.expanded" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68765, + "name": "IgcRowDirective.expanded" + } + }, + { + "id": 68870, + "name": "hasMergedCells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 63, + "character": 15 + } + ], + "getSignature": { + "id": 68871, + "name": "hasMergedCells", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 63, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.hasMergedCells" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68763, + "name": "IgcRowDirective.hasMergedCells" + } + }, + { + "id": 68858, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 34, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 35, + "character": 21 + } + ], + "getSignature": { + "id": 68859, + "name": "index", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 35, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.index" + } + }, + "setSignature": { + "id": 68860, + "name": "index", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the row.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// get the index of the second selected row\nlet selectedRowIndex = this.grid.selectedRows[1].index;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 34, + "character": 15 + } + ], + "parameters": [ + { + "id": 68861, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.index" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68751, + "name": "IgcRowDirective.index" + } + }, + { + "id": 68884, + "name": "inEditMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 103, + "character": 15 + } + ], + "getSignature": { + "id": 68885, + "name": "inEditMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 103, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.inEditMode" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68777, + "name": "IgcRowDirective.inEditMode" + } + }, + { + "id": 68886, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 117, + "character": 15 + } + ], + "getSignature": { + "id": 68887, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the ID of the row.\nA row in the grid is identified either by:\n- primaryKey data value,\n- the whole data, if the primaryKey is omitted.\n\n" + }, + { + "kind": "code", + "text": "```typescript\nlet rowID = this.grid.selectedRows[2].key;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 117, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.key" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68779, + "name": "IgcRowDirective.key" + } + }, + { + "id": 68866, + "name": "pinned", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 58, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 59, + "character": 21 + } + ], + "getSignature": { + "id": 68867, + "name": "pinned", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 59, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.pinned" + } + }, + "setSignature": { + "id": 68868, + "name": "pinned", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether the row is pinned.\nDefault value is " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.selectedRows[0].pinned = true;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 58, + "character": 15 + } + ], + "parameters": [ + { + "id": 68869, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.pinned" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68759, + "name": "IgcRowDirective.pinned" + } + }, + { + "id": 68878, + "name": "rowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 82, + "character": 15 + } + ], + "getSignature": { + "id": 68879, + "name": "rowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 82, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcRowDirective.rowHeight" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 68771, + "name": "IgcRowDirective.rowHeight" + } + }, + { + "id": 68900, + "name": "beginAddRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 186, + "character": 11 + } + ], + "signatures": [ + { + "id": 68901, + "name": "beginAddRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Spawns the add row UI for the specific row." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst row = this.grid1.getRowByIndex(1);\nrow.beginAddRow();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 186, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 68794, + "name": "IgcRowDirective.beginAddRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68793, + "name": "IgcRowDirective.beginAddRow" + } + }, + { + "id": 68891, + "name": "delete", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 143, + "character": 11 + } + ], + "signatures": [ + { + "id": 68892, + "name": "delete", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the specified row from the grid's data source.\nThis method emits " + }, + { + "kind": "code", + "text": "`rowDeleted`" + }, + { + "kind": "text", + "text": " event.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// delete the third selected row from the grid\nthis.grid.selectedRows[2].delete();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 143, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 68785, + "name": "IgcRowDirective.delete" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68784, + "name": "IgcRowDirective.delete" + } + }, + { + "id": 68846, + "name": "getContext", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "line": 15, + "character": 11 + } + ], + "signatures": [ + { + "id": 68847, + "name": "getContext", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "line": 15, + "character": 11 + } + ], + "parameters": [ + { + "id": 68848, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68849, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68850, + "name": "getContextMRL", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "line": 19, + "character": 11 + } + ], + "signatures": [ + { + "id": 68851, + "name": "getContextMRL", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "line": 19, + "character": 11 + } + ], + "parameters": [ + { + "id": 68852, + "name": "pinnedCols", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68853, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68893, + "name": "isCellActive", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 147, + "character": 11 + } + ], + "signatures": [ + { + "id": 68894, + "name": "isCellActive", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 147, + "character": 11 + } + ], + "parameters": [ + { + "id": 68895, + "name": "visibleColumnIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 68787, + "name": "IgcRowDirective.isCellActive" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68786, + "name": "IgcRowDirective.isCellActive" + } + }, + { + "id": 68896, + "name": "pin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 160, + "character": 11 + } + ], + "signatures": [ + { + "id": 68897, + "name": "pin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins the specified row.\nThis method emits " + }, + { + "kind": "code", + "text": "`rowPinning`" + }, + { + "kind": "text", + "text": "`rowPinned` event.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// pin the selected row from the grid\nthis.grid.selectedRows[0].pin();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 160, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 68790, + "name": "IgcRowDirective.pin" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68789, + "name": "IgcRowDirective.pin" + } + }, + { + "id": 68898, + "name": "unpin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 173, + "character": 11 + } + ], + "signatures": [ + { + "id": 68899, + "name": "unpin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins the specified row.\nThis method emits " + }, + { + "kind": "code", + "text": "`rowPinning`" + }, + { + "kind": "text", + "text": "`rowPinned` event.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// unpin the selected row from the grid\nthis.grid.selectedRows[0].unpin();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 173, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 68792, + "name": "IgcRowDirective.unpin" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68791, + "name": "IgcRowDirective.unpin" + } + }, + { + "id": 68888, + "name": "update", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 130, + "character": 11 + } + ], + "signatures": [ + { + "id": 68889, + "name": "update", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the specified row object and the data source record with the passed value.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// update the second selected row's value\nlet newValue = \"Apple\";\nthis.grid.selectedRows[1].update(newValue);\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 130, + "character": 11 + } + ], + "parameters": [ + { + "id": 68890, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 68782, + "name": "IgcRowDirective.update" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 68781, + "name": "IgcRowDirective.update" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68844 + ] + }, + { + "title": "Accessors", + "children": [ + 68876, + 68880, + 68854, + 68882, + 68862, + 68872, + 68870, + 68858, + 68884, + 68886, + 68866, + 68878 + ] + }, + { + "title": "Methods", + "children": [ + 68900, + 68891, + 68846, + 68850, + 68893, + 68896, + 68898, + 68888 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68652, + "name": "IgrGridRowDragGhostContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68653, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68654, + "name": "IgrGridRowDragGhostContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68652, + "name": "IgcGridRowDragGhostContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68659, + "name": "data", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 68660, + "name": "data", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68661, + "name": "data", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 68662, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68663, + "name": "grid", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 21, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 22, + "character": 21 + } + ], + "getSignature": { + "id": 68664, + "name": "grid", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 22, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68665, + "name": "grid", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 21, + "character": 15 + } + ], + "parameters": [ + { + "id": 68666, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68655, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68656, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68657, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68658, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68653 + ] + }, + { + "title": "Accessors", + "children": [ + 68659, + 68663, + 68655 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68677, + "name": "IgrGridRowEditActionsTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68678, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68679, + "name": "IgrGridRowEditActionsTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68677, + "name": "IgcGridRowEditActionsTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68680, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "line": 14, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 68681, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68682, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "line": 14, + "character": 11 + } + ], + "parameters": [ + { + "id": 68683, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68678 + ] + }, + { + "title": "Accessors", + "children": [ + 68680 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 68667, + "name": "IgrGridRowEditTextTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68668, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68669, + "name": "IgrGridRowEditTextTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68667, + "name": "IgcGridRowEditTextTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68670, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "line": 12, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 68671, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68672, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "line": 12, + "character": 11 + } + ], + "parameters": [ + { + "id": 68673, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68668 + ] + }, + { + "title": "Accessors", + "children": [ + 68670 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 68406, + "name": "IgrGridRowEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an event argument related to grid row interactions." + } + ] + }, + "children": [ + { + "id": 68407, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68408, + "name": "IgrGridRowEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68406, + "name": "IgcGridRowEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68410, + "name": "event", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the original event that occurred\nExamples of such events include: selecting, clicking, double clicking, etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-event-args.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68411, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68409, + "name": "row", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the grid row that triggered the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68407 + ] + }, + { + "title": "Properties", + "children": [ + 68410, + 68411, + 68409 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68684, + "name": "IgrGridRowTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68685, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68686, + "name": "IgrGridRowTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68687, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68688, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68689, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68690, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68685 + ] + }, + { + "title": "Accessors", + "children": [ + 68687 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68393, + "name": "IgrGridScrollEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Event emitted when a grid is scrolled." + } + ] + }, + "children": [ + { + "id": 68394, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68395, + "name": "IgrGridScrollEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68393, + "name": "IgcGridScrollEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68396, + "name": "direction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The scroll direction - vertical or horizontal." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 68397, + "name": "event", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The original browser scroll event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68399, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68398, + "name": "scrollPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The new scroll position" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68394 + ] + }, + { + "title": "Properties", + "children": [ + 68396, + 68397, + 68399, + 68398 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 67911, + "name": "IgrGridSelectionRange", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a range selection between certain rows and columns of the grid.\nRange selection can be made either through drag selection or through keyboard selection." + } + ] + }, + "children": [ + { + "id": 67912, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67913, + "name": "IgrGridSelectionRange", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67926, + "name": "columnEnd", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 42, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 43, + "character": 21 + } + ], + "getSignature": { + "id": 67927, + "name": "columnEnd", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 43, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67928, + "name": "columnEnd", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The identifier or index of the ending column of the selection range.\nIt can be either a string representing the column's field name or a numeric index." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 42, + "character": 15 + } + ], + "parameters": [ + { + "id": 67929, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67922, + "name": "columnStart", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 33, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 34, + "character": 21 + } + ], + "getSignature": { + "id": 67923, + "name": "columnStart", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 34, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67924, + "name": "columnStart", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The identifier or index of the starting column of the selection range.\nIt can be either a string representing the column's field name or a numeric index." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 33, + "character": 15 + } + ], + "parameters": [ + { + "id": 67925, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67918, + "name": "rowEnd", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 67919, + "name": "rowEnd", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 67920, + "name": "rowEnd", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the ending row of the selection range." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 67921, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67914, + "name": "rowStart", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 67915, + "name": "rowStart", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 67916, + "name": "rowStart", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the starting row of the selection range." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 67917, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67912 + ] + }, + { + "title": "Accessors", + "children": [ + 67926, + 67922, + 67918, + 67914 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 68711, + "name": "IgrGridSortingStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a sorting strategy for the grid data\nContains a single method sort that sorts the provided data based on the given sorting expressions" + } + ] + }, + "children": [ + { + "id": 68712, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68713, + "name": "IgrGridSortingStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68714, + "name": "sort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "line": 25, + "character": 11 + } + ], + "signatures": [ + { + "id": 68715, + "name": "sort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`data`" + }, + { + "kind": "text", + "text": ": The array of data to be sorted. Could be of any type.\n" + }, + { + "kind": "code", + "text": "`expressions`" + }, + { + "kind": "text", + "text": ": An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc.\n" + }, + { + "kind": "code", + "text": "`grid`" + }, + { + "kind": "text", + "text": ": (Optional) The instance of the grid where the sorting is applied.\nReturns a new array with the data sorted according to the sorting expressions." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "line": 25, + "character": 11 + } + ], + "parameters": [ + { + "id": 68716, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68717, + "name": "expressions", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 68718, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68712 + ] + }, + { + "title": "Methods", + "children": [ + 68714 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 63633, + "name": "IgrGridGroupingStrategy" + } + ] + }, + { + "id": 56641, + "name": "IgrGridState", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "State component allows saving and restoring the state of the grid features." + } + ] + }, + "children": [ + { + "id": 56678, + "name": "onStateParsed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56679, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 56680, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 56681, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 60647, + "name": "IgcGridStateInfo", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 56650, + "name": "applyState", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores grid features' state based on the IGridStateInfo object passed as an argument." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56651, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 56652, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores grid features' state based on the IGridStateInfo object passed as an argument." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 56653, + "name": "state", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "object to restore state from." + } + ] + }, + "type": { + "type": "reference", + "target": 60647, + "name": "IgcGridStateInfo", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56654, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56655, + "name": "applyState", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores grid features' state based on the IGridStateInfo object passed as an argument." + } + ] + }, + "parameters": [ + { + "id": 56656, + "name": "state", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "object to restore state from." + } + ] + }, + "type": { + "type": "reference", + "target": 60647, + "name": "IgcGridStateInfo", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 56657, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56658, + "name": "applyStateFromString", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores grid features' state based on the serialized IGridState object passed as an argument." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56659, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 56660, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores grid features' state based on the serialized IGridState object passed as an argument." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 56661, + "name": "state", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "string to restore state from." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56662, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 56663, + "name": "applyStateFromString", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Restores grid features' state based on the serialized IGridState object passed as an argument." + } + ] + }, + "parameters": [ + { + "id": 56664, + "name": "state", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "string to restore state from." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 56665, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 56666, + "name": "getState", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56667, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 56, + "character": 11 + } + ], + "signatures": [ + { + "id": 56668, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the " + }, + { + "kind": "code", + "text": "`options`" + }, + { + "kind": "text", + "text": " property." + } + ], + "blockTags": [ + { + "tag": "@returns", + "content": [ + { + "kind": "text", + "text": "The state object." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 56, + "character": 11 + } + ], + "parameters": [ + { + "id": 56669, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "reference", + "target": 60647, + "name": "IgcGridStateInfo", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 56670, + "name": "getState", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the " + }, + { + "kind": "code", + "text": "`options`" + }, + { + "kind": "text", + "text": " property." + } + ], + "blockTags": [ + { + "tag": "@returns", + "content": [ + { + "kind": "text", + "text": "The state object." + } + ] + } + ] + }, + "parameters": [ + { + "id": 56671, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "reference", + "target": 60647, + "name": "IgcGridStateInfo", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 56672, + "name": "getStateAsString", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 56673, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 66, + "character": 11 + } + ], + "signatures": [ + { + "id": 56674, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the " + }, + { + "kind": "code", + "text": "`options`" + }, + { + "kind": "text", + "text": " property." + } + ], + "blockTags": [ + { + "tag": "@returns", + "content": [ + { + "kind": "text", + "text": "Returns the serialized to JSON string IGridStateInfo object." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "line": 66, + "character": 11 + } + ], + "parameters": [ + { + "id": 56675, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + } + }, + "signatures": [ + { + "id": 56676, + "name": "getStateAsString", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the " + }, + { + "kind": "code", + "text": "`options`" + }, + { + "kind": "text", + "text": " property." + } + ], + "blockTags": [ + { + "tag": "@returns", + "content": [ + { + "kind": "text", + "text": "Returns the serialized to JSON string IGridStateInfo object." + } + ] + } + ] + }, + "parameters": [ + { + "id": 56677, + "name": "features", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + } + ], + "groups": [ + { + "title": "Methods", + "children": [ + 56650, + 56658, + 56666, + 56672 + ] + }, + { + "title": "Set Signatures", + "children": [ + 56678 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 56678 + ] + }, + { + "title": "Methods", + "children": [ + 56650, + 56658, + 56666, + 56672 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-state.ts", + "line": 11, + "character": 13 + }, + { + "fileName": "src/grids/grid-state.ts", + "line": 24, + "character": 12 + } + ], + "signatures": [ + { + "id": 56645, + "name": "IgrGridState", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 59675, + "name": "IgrGridStateBaseDirective", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)" + } + ] + }, + "children": [ + { + "id": 59678, + "name": "options", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "line": 25, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "line": 26, + "character": 21 + } + ], + "getSignature": { + "id": 59679, + "name": "options", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "line": 26, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 67763, + "name": "IgcGridStateOptions", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 59680, + "name": "options", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An object with options determining if a certain feature state should be saved.\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid [igxGridState]=\"options\"></igx-grid>\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```typescript\npublic options = {selection: false, advancedFiltering: false};\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "line": 25, + "character": 15 + } + ], + "parameters": [ + { + "id": 59681, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67763, + "name": "IgcGridStateOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Accessors", + "children": [ + 59678 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + } + ] + }, + { + "id": 67935, + "name": "IgrGridStateCollection", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67936, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67937, + "name": "IgrGridStateCollection", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67935, + "name": "IgcGridStateCollection", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67938, + "name": "id", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 14, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 67939, + "name": "id", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 67940, + "name": "id", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 14, + "character": 15 + } + ], + "parameters": [ + { + "id": 67941, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67942, + "name": "parentRowID", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 67943, + "name": "parentRowID", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 67944, + "name": "parentRowID", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 67945, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67946, + "name": "state", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 67947, + "name": "state", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56641, + "name": "IgcGridStateComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 67948, + "name": "state", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 67949, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56641, + "name": "IgcGridStateComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67936 + ] + }, + { + "title": "Accessors", + "children": [ + 67938, + 67942, + 67946 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 60647, + "name": "IgrGridStateInfo", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 60648, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 60649, + "name": "IgrGridStateInfo", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 60647, + "name": "IgcGridStateInfo", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 60652, + "name": "advancedFiltering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 60657, + "name": "cellSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 44, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 60650, + "name": "columns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67781, + "name": "IgcColumnState", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 60659, + "name": "columnSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 51, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 60662, + "name": "expansion", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 62, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 60651, + "name": "filtering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 60656, + "name": "groupBy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 41, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 67896, + "name": "IgcGroupingState", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 60664, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 68, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 60654, + "name": "moving", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 60653, + "name": "paging", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 67885, + "name": "IgcPagingState", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 60661, + "name": "pinningConfig", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 58, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 60665, + "name": "pivotConfiguration", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 71, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 65574, + "name": "IgcPivotConfiguration", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 60663, + "name": "rowIslands", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 65, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67935, + "name": "IgcGridStateCollection", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 60660, + "name": "rowPinning", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 55, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 60658, + "name": "rowSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 48, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 60655, + "name": "sorting", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 38, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 60648 + ] + }, + { + "title": "Properties", + "children": [ + 60652, + 60657, + 60650, + 60659, + 60662, + 60651, + 60656, + 60664, + 60654, + 60653, + 60661, + 60665, + 60663, + 60660, + 60658, + 60655 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "line": 19, + "character": 25 + } + ] + }, + { + "id": 67763, + "name": "IgrGridStateOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67764, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67765, + "name": "IgrGridStateOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67763, + "name": "IgcGridStateOptions", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67768, + "name": "advancedFiltering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67772, + "name": "cellSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 30, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67766, + "name": "columns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 12, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67774, + "name": "columnSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 36, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67777, + "name": "expansion", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 45, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67767, + "name": "filtering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67770, + "name": "groupBy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67779, + "name": "moving", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 51, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67771, + "name": "paging", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67776, + "name": "pinningConfig", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 42, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67780, + "name": "pivotConfiguration", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 54, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67778, + "name": "rowIslands", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 48, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67775, + "name": "rowPinning", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 39, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67773, + "name": "rowSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67769, + "name": "sorting", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67764 + ] + }, + { + "title": "Properties", + "children": [ + 67768, + 67772, + 67766, + 67774, + 67777, + 67767, + 67770, + 67779, + 67771, + 67776, + 67780, + 67778, + 67775, + 67773, + 67769 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68361, + "name": "IgrGridTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68362, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68363, + "name": "IgrGridTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68364, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68365, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68366, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68367, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68362 + ] + }, + { + "title": "Accessors", + "children": [ + 68364 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 59566, + "name": "IgrGridToolbar", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a context-aware container component for UI operations for the grid components." + } + ] + }, + "children": [ + { + "id": 59575, + "name": "grid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets the grid component for the toolbar component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 59574, + "name": "showProgress", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "When enabled, shows the indeterminate progress bar." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 59575, + 59574 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 59575, + 59574 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-toolbar.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 59570, + "name": "IgrGridToolbar", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 59036, + "name": "IgrGridToolbarActions", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a way to template the action portion of the toolbar in the grid." + } + ] + }, + "sources": [ + { + "fileName": "src/grids/grid-toolbar-actions.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar-actions.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 59040, + "name": "IgrGridToolbarActions", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 59045, + "name": "IgrGridToolbarAdvancedFiltering", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a pre-configured button to open the advanced filtering dialog of the grid." + } + ] + }, + "children": [ + { + "id": 59053, + "name": "overlaySettings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 59053 + ] + } + ], + "categories": [ + { + "title": "Properties", + "children": [ + 59053 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-toolbar-advanced-filtering.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar-advanced-filtering.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 59049, + "name": "IgrGridToolbarAdvancedFiltering", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 59055, + "name": "IgrGridToolbarExporter", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a pre-configured exporter component for the grid." + } + ] + }, + "children": [ + { + "id": 59099, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59100, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59101, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59102, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59095, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59096, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59097, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59098, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59103, + "name": "onColumnToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59104, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59105, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59106, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67741, + "name": "IgcColumnToggledEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59083, + "name": "onExportEnded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59084, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59085, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59086, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59079, + "name": "onExportStarted", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59080, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59081, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59082, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 66709, + "name": "IgcExporterEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59091, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59092, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59093, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59094, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59087, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59088, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59089, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59090, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67732, + "name": "IgcToggleViewCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59070, + "name": "exportCSV", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Show entry for CSV export." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59071, + "name": "exportExcel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Show entry for Excel export." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59072, + "name": "filename", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name for the exported file." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 59073, + "name": "export", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Export the grid's data" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59074, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "line": 69, + "character": 11 + } + ], + "signatures": [ + { + "id": 59075, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Export the grid's data" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "line": 69, + "character": 11 + } + ], + "parameters": [ + { + "id": 59076, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "File type to export" + } + ] + }, + "type": { + "type": "reference", + "target": 70251, + "name": "GridToolbarExporterType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59077, + "name": "export", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Export the grid's data" + } + ] + }, + "parameters": [ + { + "id": 59078, + "name": "type", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "File type to export" + } + ] + }, + "type": { + "type": "reference", + "target": 70251, + "name": "GridToolbarExporterType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 59070, + 59071, + 59072 + ] + }, + { + "title": "Methods", + "children": [ + 59073 + ] + }, + { + "title": "Set Signatures", + "children": [ + 59099, + 59095, + 59103, + 59083, + 59079, + 59091, + 59087 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 59099, + 59095, + 59103, + 59083, + 59079, + 59091, + 59087 + ] + }, + { + "title": "Methods", + "children": [ + 59073 + ] + }, + { + "title": "Properties", + "children": [ + 59070, + 59071, + 59072 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-toolbar-exporter.ts", + "line": 17, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar-exporter.ts", + "line": 48, + "character": 12 + } + ], + "signatures": [ + { + "id": 59059, + "name": "IgrGridToolbarExporter", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68635, + "name": "IgrGridToolbarExportEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the arguments for the grid toolbar export event.\nIt provides information about the grid instance, exporter service, export options,\nand allows the event to be canceled." + } + ] + }, + "children": [ + { + "id": 68636, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68637, + "name": "IgrGridToolbarExportEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68635, + "name": "IgcGridToolbarExportEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68641, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`cancel`" + }, + { + "kind": "text", + "text": " returns whether the event has been intercepted and stopped\nIf the value becomes \"true\", it returns/exits from the method, instantiating the interface" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "line": 47, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68639, + "name": "exporter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The " + }, + { + "kind": "code", + "text": "`exporter`" + }, + { + "kind": "text", + "text": " is a base service.\nThe type (an abstract class " + }, + { + "kind": "code", + "text": "`IgxBaseExporter`" + }, + { + "kind": "text", + "text": ") has it's own properties and methods\nIt is used to define the format and options of the export, the exported element\nand methods for preparing the data from the elements for exporting" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 69021, + "name": "IgcBaseExporter", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68638, + "name": "grid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`grid`" + }, + { + "kind": "text", + "text": " represents a reference to the instance of the grid te event originated from" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68640, + "name": "options", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the different settings, that can be given to an export\nThe type (an abstract class " + }, + { + "kind": "code", + "text": "`IgxExporterOptionsBase`" + }, + { + "kind": "text", + "text": ") has properties for column settings\n(whether they should be ignored) as well as method for generating a file name" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "line": 40, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70042, + "name": "IgcExporterOptionsBase", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68642, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68636 + ] + }, + { + "title": "Properties", + "children": [ + 68641, + 68639, + 68638, + 68640, + 68642 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "line": 18, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 59108, + "name": "IgrGridToolbarHiding", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a pre-configured column hiding component for the grid." + } + ] + }, + "children": [ + { + "id": 59133, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59134, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59135, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59136, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59129, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59130, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59131, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59132, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59137, + "name": "onColumnToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59138, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59139, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59140, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67741, + "name": "IgcColumnToggledEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59125, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59126, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59127, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59128, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59121, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59122, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59123, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59124, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67732, + "name": "IgcToggleViewCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + } + ], + "groups": [ + { + "title": "Set Signatures", + "children": [ + 59133, + 59129, + 59137, + 59125, + 59121 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 59133, + 59129, + 59137, + 59125, + 59121 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-toolbar-hiding.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar-hiding.ts", + "line": 40, + "character": 12 + } + ], + "signatures": [ + { + "id": 59112, + "name": "IgrGridToolbarHiding", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 59142, + "name": "IgrGridToolbarPinning", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a pre-configured column pinning component for the grid." + } + ] + }, + "children": [ + { + "id": 59167, + "name": "onClosed", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59168, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59169, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59170, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59163, + "name": "onClosing", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59164, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59165, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59166, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59171, + "name": "onColumnToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59172, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59173, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59174, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67741, + "name": "IgcColumnToggledEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59159, + "name": "onOpened", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59160, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59161, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59162, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59155, + "name": "onOpening", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59156, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59157, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59158, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67732, + "name": "IgcToggleViewCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + } + ], + "groups": [ + { + "title": "Set Signatures", + "children": [ + 59167, + 59163, + 59171, + 59159, + 59155 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 59167, + 59163, + 59171, + 59159, + 59155 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/grid-toolbar-pinning.ts", + "line": 15, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar-pinning.ts", + "line": 40, + "character": 12 + } + ], + "signatures": [ + { + "id": 59146, + "name": "IgrGridToolbarPinning", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68947, + "name": "IgrGridToolbarTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68948, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68949, + "name": "IgrGridToolbarTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68947, + "name": "IgcGridToolbarTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68950, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68951, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68952, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68953, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68948 + ] + }, + { + "title": "Accessors", + "children": [ + 68950 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 59027, + "name": "IgrGridToolbarTitle", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides a way to template the title portion of the toolbar in the grid." + } + ] + }, + "sources": [ + { + "fileName": "src/grids/grid-toolbar-title.ts", + "line": 9, + "character": 13 + }, + { + "fileName": "src/grids/grid-toolbar-title.ts", + "line": 17, + "character": 12 + } + ], + "signatures": [ + { + "id": 59031, + "name": "IgrGridToolbarTitle", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68939, + "name": "IgrGridValidationState", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface representing the validation state of a grid.\n- status: The validation status ('VALID' or 'INVALID').\n- errors: The validation errors if any." + } + ] + }, + "children": [ + { + "id": 68940, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68941, + "name": "IgrGridValidationState", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68939, + "name": "IgcGridValidationState", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68946, + "name": "errors", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70202, + "name": "IgcValidationErrors", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68942, + "name": "status", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 68943, + "name": "status", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70277, + "name": "ValidationStatus", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68944, + "name": "status", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 68945, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70277, + "name": "ValidationStatus", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68940 + ] + }, + { + "title": "Properties", + "children": [ + 68946 + ] + }, + { + "title": "Accessors", + "children": [ + 68942 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "line": 15, + "character": 25 + } + ] + }, + { + "id": 68416, + "name": "IgrGridValidationStatusEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface representing the event arguments for the grid validation status change event.\n- status: The validation status ('VALID' or 'INVALID').\n- owner: The grid instance that owns the validation state." + } + ] + }, + "children": [ + { + "id": 68417, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68418, + "name": "IgrGridValidationStatusEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68416, + "name": "IgcGridValidationStatusEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68420, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-status-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68419, + "name": "status", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-status-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70277, + "name": "ValidationStatus", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68417 + ] + }, + { + "title": "Properties", + "children": [ + 68420, + 68419 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-status-event-args.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 63604, + "name": "IgrGroupByExpandState", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63605, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63606, + "name": "IgrGroupByExpandState", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63604, + "name": "IgcGroupByExpandState", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63607, + "name": "expanded", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 11, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 12, + "character": 21 + } + ], + "getSignature": { + "id": 63608, + "name": "expanded", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 12, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 63609, + "name": "expanded", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 11, + "character": 15 + } + ], + "parameters": [ + { + "id": 63610, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63611, + "name": "hierarchy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 15, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 16, + "character": 21 + } + ], + "getSignature": { + "id": 63612, + "name": "hierarchy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 16, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68913, + "name": "IgcGroupByKey", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 63613, + "name": "hierarchy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 15, + "character": 15 + } + ], + "parameters": [ + { + "id": 63614, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68913, + "name": "IgcGroupByKey", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63605 + ] + }, + { + "title": "Accessors", + "children": [ + 63607, + 63611 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 68913, + "name": "IgrGroupByKey", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68914, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68915, + "name": "IgrGroupByKey", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68913, + "name": "IgcGroupByKey", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68916, + "name": "fieldName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 12, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 68917, + "name": "fieldName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68918, + "name": "fieldName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 12, + "character": 15 + } + ], + "parameters": [ + { + "id": 68919, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68920, + "name": "value", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 68921, + "name": "value", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68922, + "name": "value", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 68923, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68914 + ] + }, + { + "title": "Accessors", + "children": [ + 68916, + 68920 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 61906, + "name": "IgrGroupByRecord", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61907, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61908, + "name": "IgrGroupByRecord", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61934, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 42, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61929, + "name": "groups", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 61909, + "name": "expression", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 14, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 61910, + "name": "expression", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 61911, + "name": "expression", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 14, + "character": 15 + } + ], + "parameters": [ + { + "id": 61912, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61925, + "name": "groupParent", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 31, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 32, + "character": 21 + } + ], + "getSignature": { + "id": 61926, + "name": "groupParent", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 32, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 61927, + "name": "groupParent", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 31, + "character": 15 + } + ], + "parameters": [ + { + "id": 61928, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61930, + "name": "height", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 38, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 39, + "character": 21 + } + ], + "getSignature": { + "id": 61931, + "name": "height", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 39, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 61932, + "name": "height", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 38, + "character": 15 + } + ], + "parameters": [ + { + "id": 61933, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61913, + "name": "level", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 61914, + "name": "level", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 61915, + "name": "level", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 61916, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61917, + "name": "records", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 61918, + "name": "records", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + "setSignature": { + "id": 61919, + "name": "records", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 61920, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61921, + "name": "value", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 27, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 28, + "character": 21 + } + ], + "getSignature": { + "id": 61922, + "name": "value", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 28, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 61923, + "name": "value", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 27, + "character": 15 + } + ], + "parameters": [ + { + "id": 61924, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61907 + ] + }, + { + "title": "Properties", + "children": [ + 61934, + 61929 + ] + }, + { + "title": "Accessors", + "children": [ + 61909, + 61925, + 61930, + 61913, + 61917, + 61921 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 61895, + "name": "IgrGroupByResult", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61896, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61897, + "name": "IgrGroupByResult", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61895, + "name": "IgcGroupByResult", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 61898, + "name": "data", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 13, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 61899, + "name": "data", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + "setSignature": { + "id": 61900, + "name": "data", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 13, + "character": 15 + } + ], + "parameters": [ + { + "id": 61901, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 61902, + "name": "metadata", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 61903, + "name": "metadata", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 61904, + "name": "metadata", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 61905, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61896 + ] + }, + { + "title": "Accessors", + "children": [ + 61898, + 61902 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 63648, + "name": "IgrGroupByRowSelectorTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63649, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63650, + "name": "IgrGroupByRowSelectorTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63648, + "name": "IgcGroupByRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63651, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "line": 12, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 63652, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68924, + "name": "IgcGroupByRowSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63653, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "line": 12, + "character": 11 + } + ], + "parameters": [ + { + "id": 63654, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68924, + "name": "IgcGroupByRowSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63649 + ] + }, + { + "title": "Accessors", + "children": [ + 63651 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 68924, + "name": "IgrGroupByRowSelectorTemplateDetails", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68925, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68926, + "name": "IgrGroupByRowSelectorTemplateDetails", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68924, + "name": "IgcGroupByRowSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68935, + "name": "groupRow", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 21, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 22, + "character": 21 + } + ], + "getSignature": { + "id": 68936, + "name": "groupRow", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 22, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68937, + "name": "groupRow", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 21, + "character": 15 + } + ], + "parameters": [ + { + "id": 68938, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68927, + "name": "selectedCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 13, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68928, + "name": "selectedCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68929, + "name": "selectedCount", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 13, + "character": 15 + } + ], + "parameters": [ + { + "id": 68930, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68931, + "name": "totalCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 68932, + "name": "totalCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68933, + "name": "totalCount", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 68934, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68925 + ] + }, + { + "title": "Accessors", + "children": [ + 68935, + 68927, + 68931 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 63655, + "name": "IgrGroupByRowTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63656, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63657, + "name": "IgrGroupByRowTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63655, + "name": "IgcGroupByRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63658, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 63659, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63660, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 63661, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63656 + ] + }, + { + "title": "Accessors", + "children": [ + 63658 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 63615, + "name": "IgrGroupingDoneEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63616, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63617, + "name": "IgrGroupingDoneEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63615, + "name": "IgcGroupingDoneEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 63618, + "name": "expressions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 63619, + "name": "groupedColumns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 63621, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 63620, + "name": "ungroupedColumns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63616 + ] + }, + { + "title": "Properties", + "children": [ + 63618, + 63619, + 63621, + 63620 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 63584, + "name": "IgrGroupingExpression", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 63585, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63586, + "name": "IgrGroupingExpression", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 65548, + "name": "IgcSortingExpression.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65547, + "name": "IgcSortingExpression.constructor" + } + }, + { + "id": 63601, + "name": "ignoreCase", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 65557, + "name": "IgcSortingExpression.ignoreCase" + } + }, + { + "id": 63603, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 65559, + "name": "IgcSortingExpression.owner" + } + }, + { + "id": 63602, + "name": "strategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68323, + "name": "IgcSortingStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 65558, + "name": "IgcSortingExpression.strategy" + } + }, + { + "id": 63597, + "name": "dir", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 63598, + "name": "dir", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcSortingExpression.dir" + } + }, + "setSignature": { + "id": 63599, + "name": "dir", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 63600, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcSortingExpression.dir" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 65553, + "name": "IgcSortingExpression.dir" + } + }, + { + "id": 63593, + "name": "fieldName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 63594, + "name": "fieldName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcSortingExpression.fieldName" + } + }, + "setSignature": { + "id": 63595, + "name": "fieldName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 63596, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcSortingExpression.fieldName" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 65549, + "name": "IgcSortingExpression.fieldName" + } + }, + { + "id": 63587, + "name": "groupingComparer", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "line": 16, + "character": 11 + } + ], + "signatures": [ + { + "id": 63588, + "name": "groupingComparer", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "line": 16, + "character": 11 + } + ], + "parameters": [ + { + "id": 63589, + "name": "a", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63590, + "name": "b", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63591, + "name": "currRec", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63592, + "name": "groupRec", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63585 + ] + }, + { + "title": "Properties", + "children": [ + 63601, + 63603, + 63602 + ] + }, + { + "title": "Accessors", + "children": [ + 63597, + 63593 + ] + }, + { + "title": "Methods", + "children": [ + 63587 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "line": 11, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 67896, + "name": "IgrGroupingState", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67897, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67898, + "name": "IgrGroupingState", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67896, + "name": "IgcGroupingState", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67907, + "name": "defaultExpanded", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 67908, + "name": "defaultExpanded", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 67909, + "name": "defaultExpanded", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 67910, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67903, + "name": "expansion", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 20, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 21, + "character": 21 + } + ], + "getSignature": { + "id": 67904, + "name": "expansion", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 21, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63604, + "name": "IgcGroupByExpandState", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 67905, + "name": "expansion", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 20, + "character": 15 + } + ], + "parameters": [ + { + "id": 67906, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63604, + "name": "IgcGroupByExpandState", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67899, + "name": "expressions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 67900, + "name": "expressions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 67901, + "name": "expressions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 67902, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67897 + ] + }, + { + "title": "Accessors", + "children": [ + 67907, + 67903, + 67899 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 70093, + "name": "IgrHeaderType", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface representing a header cell in the grid. It is essentially the blueprint to a header cell object.\nContains definitions of properties, relevant to the header" + } + ] + }, + "children": [ + { + "id": 70094, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70095, + "name": "IgrHeaderType", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70093, + "name": "IgcHeaderType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70096, + "name": "column", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 70097, + "name": "column", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 70098, + "name": "column", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The column that the header cell represents." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 70099, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70104, + "name": "selectable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 29, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 30, + "character": 21 + } + ], + "getSignature": { + "id": 70105, + "name": "selectable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 30, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70106, + "name": "selectable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the cell can be selected" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 29, + "character": 15 + } + ], + "parameters": [ + { + "id": 70107, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70108, + "name": "selected", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 34, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 35, + "character": 21 + } + ], + "getSignature": { + "id": 70109, + "name": "selected", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 35, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70110, + "name": "selected", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the cell is currently selected" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 34, + "character": 15 + } + ], + "parameters": [ + { + "id": 70111, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70116, + "name": "sortDirection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 44, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 45, + "character": 21 + } + ], + "getSignature": { + "id": 70117, + "name": "sortDirection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 45, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 70118, + "name": "sortDirection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the sorting direction of the column (ascending, descending or none)." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 44, + "character": 15 + } + ], + "parameters": [ + { + "id": 70119, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70100, + "name": "sorted", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 70101, + "name": "sorted", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70102, + "name": "sorted", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the column is currently sorted." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 70103, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70112, + "name": "title", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 39, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 40, + "character": 21 + } + ], + "getSignature": { + "id": 70113, + "name": "title", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 40, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70114, + "name": "title", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the column header is a title cell." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 39, + "character": 15 + } + ], + "parameters": [ + { + "id": 70115, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70094 + ] + }, + { + "title": "Accessors", + "children": [ + 70096, + 70104, + 70108, + 70116, + 70100, + 70112 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 68795, + "name": "IgrHeadSelectorTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68796, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68797, + "name": "IgrHeadSelectorTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68795, + "name": "IgcHeadSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68798, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "line": 12, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 68799, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70141, + "name": "IgcHeadSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68800, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "line": 12, + "character": 11 + } + ], + "parameters": [ + { + "id": 68801, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70141, + "name": "IgcHeadSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68796 + ] + }, + { + "title": "Accessors", + "children": [ + 68798 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 70141, + "name": "IgrHeadSelectorTemplateDetails", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70142, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70143, + "name": "IgrHeadSelectorTemplateDetails", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70141, + "name": "IgcHeadSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70144, + "name": "selectedCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 12, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 70145, + "name": "selectedCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 70146, + "name": "selectedCount", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 12, + "character": 15 + } + ], + "parameters": [ + { + "id": 70147, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70148, + "name": "totalCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 70149, + "name": "totalCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 70150, + "name": "totalCount", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 70151, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70154, + "name": "deselectAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 23, + "character": 11 + } + ], + "signatures": [ + { + "id": 70155, + "name": "deselectAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 70152, + "name": "selectAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 20, + "character": 11 + } + ], + "signatures": [ + { + "id": 70153, + "name": "selectAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70142 + ] + }, + { + "title": "Accessors", + "children": [ + 70144, + 70148 + ] + }, + { + "title": "Methods", + "children": [ + 70154, + 70152 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 57396, + "name": "IgrHierarchicalGrid", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Hierarchical grid" + } + ] + }, + "children": [ + { + "id": 57725, + "name": "onActiveNodeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57726, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57727, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57728, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68627, + "name": "IgcActiveNodeChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57541, + "name": "onAdvancedFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57542, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57543, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57544, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57549, + "name": "onCellClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57550, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57551, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57552, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57593, + "name": "onCellEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57594, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57595, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57596, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57597, + "name": "onCellEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57598, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57599, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57600, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57585, + "name": "onCellEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57586, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57587, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57588, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57589, + "name": "onCellEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57590, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57591, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57592, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57617, + "name": "onColumnInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57618, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57619, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57620, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57681, + "name": "onColumnMoving", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57682, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57683, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57684, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68563, + "name": "IgcColumnMovingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57685, + "name": "onColumnMovingEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57686, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57687, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57688, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68569, + "name": "IgcColumnMovingEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57677, + "name": "onColumnMovingStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57678, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57679, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57680, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68558, + "name": "IgcColumnMovingStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57577, + "name": "onColumnPin", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57578, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57579, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57580, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68440, + "name": "IgcPinColumnCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57581, + "name": "onColumnPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57582, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57583, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57584, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68447, + "name": "IgcPinColumnEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57657, + "name": "onColumnResized", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57658, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57659, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57660, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68533, + "name": "IgcColumnResizeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57621, + "name": "onColumnsAutogenerated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57622, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57623, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57624, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "IgcColumnsAutoGeneratedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57573, + "name": "onColumnSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57574, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57575, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57576, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68431, + "name": "IgcColumnSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57673, + "name": "onColumnVisibilityChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57674, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57675, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57676, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57669, + "name": "onColumnVisibilityChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57670, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57671, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57672, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68546, + "name": "IgcColumnVisibilityChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57661, + "name": "onContextMenu", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57662, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57663, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57664, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68540, + "name": "IgcGridContextMenuEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57749, + "name": "onDataChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57750, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57751, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57752, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57745, + "name": "onDataChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57746, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57747, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57748, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57533, + "name": "onDataPreLoad", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57534, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57535, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57536, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57665, + "name": "onDoubleClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57666, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57667, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57668, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57705, + "name": "onExpansionStatesChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57706, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57707, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57708, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57633, + "name": "onFiltering", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57634, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57635, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57636, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68503, + "name": "IgcFilteringEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57637, + "name": "onFilteringDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57638, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57639, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57640, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57537, + "name": "onFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57538, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57539, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57540, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57557, + "name": "onFormGroupCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57558, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57559, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57560, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68412, + "name": "IgcGridFormGroupCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57701, + "name": "onGridCopy", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57702, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57703, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57704, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68598, + "name": "IgcGridClipboardEvent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57689, + "name": "onGridKeydown", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57690, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57691, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57692, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68576, + "name": "IgcGridKeydownEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57545, + "name": "onGridScroll", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57546, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57547, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57548, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68393, + "name": "IgcGridScrollEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57737, + "name": "onRangeSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57738, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57739, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57740, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57741, + "name": "onRendered", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57742, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57743, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57744, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57653, + "name": "onRowAdd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57654, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57655, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57656, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57641, + "name": "onRowAdded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57642, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57643, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57644, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57553, + "name": "onRowClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57554, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57555, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57556, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68406, + "name": "IgcGridRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57649, + "name": "onRowDelete", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57650, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57651, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57652, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57645, + "name": "onRowDeleted", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57646, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57647, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57648, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57697, + "name": "onRowDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57698, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57699, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57700, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68591, + "name": "IgcRowDragEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57693, + "name": "onRowDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57694, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57695, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57696, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68584, + "name": "IgcRowDragStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57605, + "name": "onRowEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57606, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57607, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57608, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57609, + "name": "onRowEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57610, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57611, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57612, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57601, + "name": "onRowEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57602, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57603, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57604, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57613, + "name": "onRowEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57614, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57615, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57616, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57721, + "name": "onRowPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57722, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57723, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57724, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57717, + "name": "onRowPinning", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57718, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57719, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57720, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57569, + "name": "onRowSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57570, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57571, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57572, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68421, + "name": "IgcRowSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57713, + "name": "onRowToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57714, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57715, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57716, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68609, + "name": "IgcRowToggleEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57565, + "name": "onSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57566, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57567, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57568, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57709, + "name": "onSelectedRowsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57710, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57711, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57712, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57625, + "name": "onSorting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57626, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57627, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57628, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68496, + "name": "IgcSortingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57629, + "name": "onSortingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57630, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57631, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57632, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57729, + "name": "onSortingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57730, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57731, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57732, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57733, + "name": "onToolbarExporting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57734, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57735, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57736, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68635, + "name": "IgcGridToolbarExportEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57561, + "name": "onValidationStatusChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57562, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 57563, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 57564, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68416, + "name": "IgcGridValidationStatusEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57478, + "name": "advancedFilteringExpressionsTree", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57477, + "name": "childLayoutList", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 57754, + "name": "IgcRowIslandComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57480, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the array of data that populates the component.\n```html\n<igx-hierarchical-grid [data]=\"Data\" [autoGenerate]=\"true\"></igx-hierarchical-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 57482, + "name": "expandChildren", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets if all immediate children of the `IgxHierarchicalGridComponent` should be expanded/collapsed.\nDefault value is false.\n```html\n<igx-hierarchical-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [autoGenerate]=\"true\" [expandChildren]=\"true\"></igx-hierarchical-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57479, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the value of the `id` attribute." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57481, + "name": "totalItemCount", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the total number of records in the data source." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57483, + "name": "foreignKey", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the unique identifier of the parent row. It may be a `string` or `number` if `primaryKey` of the\nparent grid is set or an object reference of the parent record otherwise.\n```typescript\nconst foreignKey = this.grid.foreignKey;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57484, + "name": "selectedCells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the selected `IgxGridCell`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57497, + "name": "getCellByColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a `CellType` object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57498, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 197, + "character": 11 + } + ], + "signatures": [ + { + "id": 57499, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCell = this.grid1.getCellByColumn(2, \"UnitPrice\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 197, + "character": 11 + } + ], + "parameters": [ + { + "id": 57500, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57501, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57502, + "name": "getCellByColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCell = this.grid1.getCellByColumn(2, \"UnitPrice\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57503, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57504, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57505, + "name": "getCellByKey", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a `CellType` object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57506, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 213, + "character": 11 + } + ], + "signatures": [ + { + "id": 57507, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the primaryKey property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.getCellByKey(1, 'index');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 213, + "character": 11 + } + ], + "parameters": [ + { + "id": 57508, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "match any rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57509, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57510, + "name": "getCellByKey", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the primaryKey property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.getCellByKey(1, 'index');\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57511, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "match any rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57512, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57527, + "name": "getDefaultExpandState", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57528, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 225, + "character": 11 + } + ], + "signatures": [ + { + "id": 57529, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 225, + "character": 11 + } + ], + "parameters": [ + { + "id": 57530, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57531, + "name": "getDefaultExpandState", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 57532, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57485, + "name": "getRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the `RowType` by index." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57486, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 170, + "character": 11 + } + ], + "signatures": [ + { + "id": 57487, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`RowType`" + }, + { + "kind": "text", + "text": " by index." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.grid1.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 170, + "character": 11 + } + ], + "parameters": [ + { + "id": 57488, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57489, + "name": "getRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`RowType`" + }, + { + "kind": "text", + "text": " by index." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.grid1.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57490, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57491, + "name": "getRowByKey", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the `RowType` by key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57492, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 183, + "character": 11 + } + ], + "signatures": [ + { + "id": 57493, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`RowType`" + }, + { + "kind": "text", + "text": " by key." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.grid1.getRowByKey(1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 183, + "character": 11 + } + ], + "parameters": [ + { + "id": 57494, + "name": "key", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57495, + "name": "getRowByKey", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`RowType`" + }, + { + "kind": "text", + "text": " by key." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.grid1.getRowByKey(1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57496, + "name": "key", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57513, + "name": "pinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57514, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 217, + "character": 11 + } + ], + "signatures": [ + { + "id": 57515, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 217, + "character": 11 + } + ], + "parameters": [ + { + "id": 57516, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57517, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 57518, + "name": "pinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57519, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57520, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 57521, + "name": "unpinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57522, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 221, + "character": 11 + } + ], + "signatures": [ + { + "id": 57523, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "line": 221, + "character": 11 + } + ], + "parameters": [ + { + "id": 57524, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 57525, + "name": "unpinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57526, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 57478, + 57477, + 57480, + 57482, + 57479, + 57481 + ] + }, + { + "title": "Accessors", + "children": [ + 57483, + 57484 + ] + }, + { + "title": "Methods", + "children": [ + 57497, + 57505, + 57527, + 57485, + 57491, + 57513, + 57521 + ] + }, + { + "title": "Set Signatures", + "children": [ + 57725, + 57541, + 57549, + 57593, + 57597, + 57585, + 57589, + 57617, + 57681, + 57685, + 57677, + 57577, + 57581, + 57657, + 57621, + 57573, + 57673, + 57669, + 57661, + 57749, + 57745, + 57533, + 57665, + 57705, + 57633, + 57637, + 57537, + 57557, + 57701, + 57689, + 57545, + 57737, + 57741, + 57653, + 57641, + 57553, + 57649, + 57645, + 57697, + 57693, + 57605, + 57609, + 57601, + 57613, + 57721, + 57717, + 57569, + 57713, + 57565, + 57709, + 57625, + 57629, + 57729, + 57733, + 57561 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 57483, + 57484 + ] + }, + { + "title": "Events", + "children": [ + 57725, + 57541, + 57549, + 57593, + 57597, + 57585, + 57589, + 57617, + 57681, + 57685, + 57677, + 57577, + 57581, + 57657, + 57621, + 57573, + 57673, + 57669, + 57661, + 57749, + 57745, + 57533, + 57665, + 57705, + 57633, + 57637, + 57537, + 57557, + 57701, + 57689, + 57545, + 57737, + 57741, + 57653, + 57641, + 57553, + 57649, + 57645, + 57697, + 57693, + 57605, + 57609, + 57601, + 57613, + 57721, + 57717, + 57569, + 57713, + 57565, + 57709, + 57625, + 57629, + 57729, + 57733, + 57561 + ] + }, + { + "title": "Methods", + "children": [ + 57497, + 57505, + 57527, + 57485, + 57491, + 57513, + 57521 + ] + }, + { + "title": "Properties", + "children": [ + 57478, + 57477, + 57480, + 57482, + 57479, + 57481 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/hierarchical-grid.ts", + "line": 65, + "character": 13 + }, + { + "fileName": "src/grids/hierarchical-grid.ts", + "line": 262, + "character": 12 + } + ], + "signatures": [ + { + "id": 57400, + "name": "IgrHierarchicalGrid", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 63767, + "name": "IgrHierarchicalGridBaseDirective", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true, + "isAbstract": true + }, + "children": [ + { + "id": 63768, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 2, + "character": 46 + } + ], + "signatures": [ + { + "id": 63769, + "name": "IgrHierarchicalGridBaseDirective", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 2, + "character": 46 + } + ], + "parameters": [ + { + "id": 63770, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isRest": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "reference", + "target": 63767, + "name": "IgcHierarchicalGridBaseDirective", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).constructor" + } + }, + { + "id": 63907, + "name": "actionStripComponents", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 306, + "character": 21 + } + ], + "getSignature": { + "id": 63908, + "name": "actionStripComponents", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 306, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": -1, + "name": "IgcActionStripToken", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).actionStripComponents" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).actionStripComponents" + } + }, + { + "id": 63871, + "name": "addRowEmptyTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 176, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 177, + "character": 21 + } + ], + "getSignature": { + "id": 63872, + "name": "addRowEmptyTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 177, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).addRowEmptyTemplate" + } + }, + "setSignature": { + "id": 63873, + "name": "addRowEmptyTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template for adding row UI when grid is empty." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [addRowEmptyTemplate]=\"myTemplate\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 176, + "character": 15 + } + ], + "parameters": [ + { + "id": 63874, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).addRowEmptyTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).addRowEmptyTemplate" + } + }, + { + "id": 63979, + "name": "advancedFilteringExpressionsTree", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 480, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 481, + "character": 21 + } + ], + "getSignature": { + "id": 63980, + "name": "advancedFilteringExpressionsTree", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 481, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).advancedFilteringExpressionsTree" + } + }, + "setSignature": { + "id": 63981, + "name": "advancedFilteringExpressionsTree", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the advanced filtering state." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nlet advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;\nthis.grid.advancedFilteringExpressionsTree = logic;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 480, + "character": 15 + } + ], + "parameters": [ + { + "id": 63982, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).advancedFilteringExpressionsTree" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).advancedFilteringExpressionsTree" + } + }, + { + "id": 64047, + "name": "allowAdvancedFiltering", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 700, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 701, + "character": 21 + } + ], + "getSignature": { + "id": 64048, + "name": "allowAdvancedFiltering", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 701, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).allowAdvancedFiltering" + } + }, + "setSignature": { + "id": 64049, + "name": "allowAdvancedFiltering", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a value indicating whether the advanced filtering is enabled." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [allowAdvancedFiltering]=\"true\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 700, + "character": 15 + } + ], + "parameters": [ + { + "id": 64050, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).allowAdvancedFiltering" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).allowAdvancedFiltering" + } + }, + { + "id": 64043, + "name": "allowFiltering", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 687, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 688, + "character": 21 + } + ], + "getSignature": { + "id": 64044, + "name": "allowFiltering", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 688, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).allowFiltering" + } + }, + "setSignature": { + "id": 64045, + "name": "allowFiltering", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the filtering is enabled." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [allowFiltering]=\"true\" [height]=\"'305px'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 687, + "character": 15 + } + ], + "parameters": [ + { + "id": 64046, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).allowFiltering" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).allowFiltering" + } + }, + { + "id": 63855, + "name": "autoGenerate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 116, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 117, + "character": 21 + } + ], + "getSignature": { + "id": 63856, + "name": "autoGenerate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 117, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).autoGenerate" + } + }, + "setSignature": { + "id": 63857, + "name": "autoGenerate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether to auto-generate the columns." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The default value is false. When set to true, it will override all columns declared through code or in markup." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [data]=\"Data\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 116, + "character": 15 + } + ], + "parameters": [ + { + "id": 63858, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).autoGenerate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).autoGenerate" + } + }, + { + "id": 63859, + "name": "autoGenerateExclude", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 135, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 136, + "character": 21 + } + ], + "getSignature": { + "id": 63860, + "name": "autoGenerateExclude", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 136, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).autoGenerateExclude" + } + }, + "setSignature": { + "id": 63861, + "name": "autoGenerateExclude", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of property keys to be excluded from the generated column collection" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime\nunless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their\n[hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid data=[Data] [autoGenerate]=\"true\" [autoGenerateExclude]=\"['ProductName', 'Count']\"></igx-grid>\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```typescript\nconst Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 135, + "character": 15 + } + ], + "parameters": [ + { + "id": 63862, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).autoGenerateExclude" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).autoGenerateExclude" + } + }, + { + "id": 64111, + "name": "batchEditing", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 941, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 942, + "character": 21 + } + ], + "getSignature": { + "id": 64112, + "name": "batchEditing", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 942, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).batchEditing" + } + }, + "setSignature": { + "id": 64113, + "name": "batchEditing", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the grid has batch editing enabled.\nWhen batch editing is enabled, changes are not made directly to the underlying data.\nInstead, they are stored as transactions, which can later be committed w/ the " + }, + { + "kind": "code", + "text": "`commit`" + }, + { + "kind": "text", + "text": " method." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [batchEditing]=\"true\" [data]=\"someData\">\n</igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 941, + "character": 15 + } + ], + "parameters": [ + { + "id": 64114, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).batchEditing" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).batchEditing" + } + }, + { + "id": 64119, + "name": "cellMergeMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 962, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 963, + "character": 21 + } + ], + "getSignature": { + "id": 64120, + "name": "cellMergeMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 963, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70267, + "name": "GridCellMergeMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).cellMergeMode" + } + }, + "setSignature": { + "id": 64121, + "name": "cellMergeMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets cell merge mode." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 962, + "character": 15 + } + ], + "parameters": [ + { + "id": 64122, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70267, + "name": "GridCellMergeMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).cellMergeMode" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).cellMergeMode" + } + }, + { + "id": 64115, + "name": "cellSelection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 953, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 954, + "character": 21 + } + ], + "getSignature": { + "id": 64116, + "name": "cellSelection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 954, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).cellSelection" + } + }, + "setSignature": { + "id": 64117, + "name": "cellSelection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets cell selection mode." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default the cell selection mode is multiple" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 953, + "character": 15 + } + ], + "parameters": [ + { + "id": 64118, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).cellSelection" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).cellSelection" + } + }, + { + "id": 63887, + "name": "clipboardOptions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 224, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 225, + "character": 21 + } + ], + "getSignature": { + "id": 63888, + "name": "clipboardOptions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 225, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68374, + "name": "IgcClipboardOptions", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clipboardOptions" + } + }, + "setSignature": { + "id": 63889, + "name": "clipboardOptions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the copy behavior of the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 224, + "character": 15 + } + ], + "parameters": [ + { + "id": 63890, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68374, + "name": "IgcClipboardOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clipboardOptions" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clipboardOptions" + } + }, + { + "id": 63903, + "name": "columnList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 294, + "character": 21 + } + ], + "getSignature": { + "id": 63904, + "name": "columnList", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 294, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnList" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnList" + } + }, + { + "id": 64149, + "name": "columns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1086, + "character": 15 + } + ], + "getSignature": { + "id": 64150, + "name": "columns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst colums = this.grid.columns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1086, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columns" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columns" + } + }, + { + "id": 64127, + "name": "columnSelection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 986, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 987, + "character": 21 + } + ], + "getSignature": { + "id": 64128, + "name": "columnSelection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 987, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnSelection" + } + }, + "setSignature": { + "id": 64129, + "name": "columnSelection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets column selection mode" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default the row selection mode is none" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 986, + "character": 15 + } + ], + "parameters": [ + { + "id": 64130, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnSelection" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnSelection" + } + }, + { + "id": 64019, + "name": "columnWidth", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 600, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 601, + "character": 21 + } + ], + "getSignature": { + "id": 64020, + "name": "columnWidth", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 601, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnWidth" + } + }, + "setSignature": { + "id": 64021, + "name": "columnWidth", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the default width of the columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [columnWidth]=\"100\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 600, + "character": 15 + } + ], + "parameters": [ + { + "id": 64022, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnWidth" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).columnWidth" + } + }, + { + "id": 63883, + "name": "dataCloneStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 216, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 217, + "character": 21 + } + ], + "getSignature": { + "id": 63884, + "name": "dataCloneStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 217, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataCloneStrategy" + } + }, + "setSignature": { + "id": 63885, + "name": "dataCloneStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the data clone strategy of the grid when in edit mode." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [dataCloneStrategy]=\"customCloneStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 216, + "character": 15 + } + ], + "parameters": [ + { + "id": 63886, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataCloneStrategy" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataCloneStrategy" + } + }, + { + "id": 64089, + "name": "dataRowList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 867, + "character": 15 + } + ], + "getSignature": { + "id": 64090, + "name": "dataRowList", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of currently rendered " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": "'s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst dataList = this.grid.dataRowList;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 867, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataRowList" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataRowList" + } + }, + { + "id": 64167, + "name": "dataView", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1186, + "character": 15 + } + ], + "getSignature": { + "id": 64168, + "name": "dataView", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const dataView = this.grid.dataView;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1186, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataView" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dataView" + } + }, + { + "id": 64147, + "name": "defaultRowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1074, + "character": 15 + } + ], + "getSignature": { + "id": 64148, + "name": "defaultRowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the default row height." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst rowHeigh = this.grid.defaultRowHeight;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1074, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).defaultRowHeight" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).defaultRowHeight" + } + }, + { + "id": 63911, + "name": "dragGhostCustomTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 314, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 315, + "character": 21 + } + ], + "getSignature": { + "id": 63912, + "name": "dragGhostCustomTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 315, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68652, + "name": "IgcGridRowDragGhostContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dragGhostCustomTemplate" + } + }, + "setSignature": { + "id": 63913, + "name": "dragGhostCustomTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the custom template, if any, used for row drag ghost." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 314, + "character": 15 + } + ], + "parameters": [ + { + "id": 63914, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68652, + "name": "IgcGridRowDragGhostContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dragGhostCustomTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dragGhostCustomTemplate" + } + }, + { + "id": 64099, + "name": "dragIndicatorIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 890, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 891, + "character": 21 + } + ], + "getSignature": { + "id": 64100, + "name": "dragIndicatorIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 891, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dragIndicatorIconTemplate" + } + }, + "setSignature": { + "id": 64101, + "name": "dragIndicatorIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering the row drag indicator icon" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 890, + "character": 15 + } + ], + "parameters": [ + { + "id": 64102, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dragIndicatorIconTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).dragIndicatorIconTemplate" + } + }, + { + "id": 64035, + "name": "emptyFilteredGridMessage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 657, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 658, + "character": 21 + } + ], + "getSignature": { + "id": 64036, + "name": "emptyFilteredGridMessage", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 658, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyFilteredGridMessage" + } + }, + "setSignature": { + "id": 64037, + "name": "emptyFilteredGridMessage", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the message displayed when there are no records and the grid is filtered." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [emptyGridMessage]=\"'The grid is empty'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 657, + "character": 15 + } + ], + "parameters": [ + { + "id": 64038, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyFilteredGridMessage" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyFilteredGridMessage" + } + }, + { + "id": 64023, + "name": "emptyGridMessage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 613, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 614, + "character": 21 + } + ], + "getSignature": { + "id": 64024, + "name": "emptyGridMessage", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 614, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyGridMessage" + } + }, + "setSignature": { + "id": 64025, + "name": "emptyGridMessage", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Sets the message displayed when there are no records." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [emptyGridMessage]=\"'The grid is empty'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 613, + "character": 15 + } + ], + "parameters": [ + { + "id": 64026, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyGridMessage" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyGridMessage" + } + }, + { + "id": 63867, + "name": "emptyGridTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 163, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 164, + "character": 21 + } + ], + "getSignature": { + "id": 63868, + "name": "emptyGridTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 164, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyGridTemplate" + } + }, + "setSignature": { + "id": 63869, + "name": "emptyGridTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when empty." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<ng-template igxGridEmpty>\n <!-- content to show when the grid is empty -->\n</ng-template>\n```" + }, + { + "kind": "text", + "text": "\nOr\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [emptyGridTemplate]=\"myTemplate\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 163, + "character": 15 + } + ], + "parameters": [ + { + "id": 63870, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyGridTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).emptyGridTemplate" + } + }, + { + "id": 63943, + "name": "excelStyleHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 378, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 379, + "character": 21 + } + ], + "getSignature": { + "id": 63944, + "name": "excelStyleHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 379, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).excelStyleHeaderIconTemplate" + } + }, + "setSignature": { + "id": 63945, + "name": "excelStyleHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the excel style header icon." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 378, + "character": 15 + } + ], + "parameters": [ + { + "id": 63946, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).excelStyleHeaderIconTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).excelStyleHeaderIconTemplate" + } + }, + { + "id": 64139, + "name": "expansionStates", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1049, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1050, + "character": 21 + } + ], + "getSignature": { + "id": 64140, + "name": "expansionStates", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1050, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expansionStates" + } + }, + "setSignature": { + "id": 64141, + "name": "expansionStates", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of key-value pairs [row ID, expansion state]." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Includes only states that differ from the default one.\nSupports two-way binding." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"data\" [(expansionStates)]=\"model.expansionStates\">\n</igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1049, + "character": 15 + } + ], + "parameters": [ + { + "id": 64142, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expansionStates" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expansionStates" + } + }, + { + "id": 64133, + "name": "filteredData", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1006, + "character": 15 + } + ], + "getSignature": { + "id": 64134, + "name": "filteredData", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of objects containing the filtered data." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nlet filteredData = this.grid.filteredData;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1006, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteredData" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteredData" + } + }, + { + "id": 64135, + "name": "filteredSortedData", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1018, + "character": 15 + } + ], + "getSignature": { + "id": 64136, + "name": "filteredSortedData", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array containing the filtered sorted data." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst filteredSortedData = this.grid1.filteredSortedData;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1018, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteredSortedData" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteredSortedData" + } + }, + { + "id": 63975, + "name": "filteringExpressionsTree", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 466, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 467, + "character": 21 + } + ], + "getSignature": { + "id": 63976, + "name": "filteringExpressionsTree", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 467, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteringExpressionsTree" + } + }, + "setSignature": { + "id": 63977, + "name": "filteringExpressionsTree", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering state." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [autoGenerate]=\"true\" [(filteringExpressionsTree)]=\"model.filteringExpressions\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Supports two-way binding." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 466, + "character": 15 + } + ], + "parameters": [ + { + "id": 63978, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteringExpressionsTree" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteringExpressionsTree" + } + }, + { + "id": 63971, + "name": "filteringLogic", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 450, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 451, + "character": 21 + } + ], + "getSignature": { + "id": 63972, + "name": "filteringLogic", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 451, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteringLogic" + } + }, + "setSignature": { + "id": 63973, + "name": "filteringLogic", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering logic of the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The default is AND." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [data]=\"Data\" [autoGenerate]=\"true\" [filteringLogic]=\"filtering\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 450, + "character": 15 + } + ], + "parameters": [ + { + "id": 63974, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteringLogic" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filteringLogic" + } + }, + { + "id": 64051, + "name": "filterMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 715, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 716, + "character": 21 + } + ], + "getSignature": { + "id": 64052, + "name": "filterMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 716, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70263, + "name": "FilterMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterMode" + } + }, + "setSignature": { + "id": 64053, + "name": "filterMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filter mode." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [filterMode]=\"'quickFilter'\" [height]=\"'305px'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it's set to FilterMode.quickFilter." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 715, + "character": 15 + } + ], + "parameters": [ + { + "id": 64054, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70263, + "name": "FilterMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterMode" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterMode" + } + }, + { + "id": 64067, + "name": "filterStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 774, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 775, + "character": 21 + } + ], + "getSignature": { + "id": 64068, + "name": "filterStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 775, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68698, + "name": "IgcFilteringStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterStrategy" + } + }, + "setSignature": { + "id": 64069, + "name": "filterStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [filterStrategy]=\"filterStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 774, + "character": 15 + } + ], + "parameters": [ + { + "id": 64070, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68698, + "name": "IgcFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterStrategy" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterStrategy" + } + }, + { + "id": 63771, + "name": "hasChildrenKey", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 30, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 31, + "character": 21 + } + ], + "getSignature": { + "id": 63772, + "name": "hasChildrenKey", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 31, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 63773, + "name": "hasChildrenKey", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-hierarchical-grid #grid [data]=\"localData\" [hasChildrenKey]=\"'hasEmployees'\">\n</igx-hierarchical-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 30, + "character": 15 + } + ], + "parameters": [ + { + "id": 63774, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63939, + "name": "headerCollapsedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 370, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 371, + "character": 21 + } + ], + "getSignature": { + "id": 63940, + "name": "headerCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 371, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headerCollapsedIndicatorTemplate" + } + }, + "setSignature": { + "id": 63941, + "name": "headerCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row collapse indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 370, + "character": 15 + } + ], + "parameters": [ + { + "id": 63942, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headerCollapsedIndicatorTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headerCollapsedIndicatorTemplate" + } + }, + { + "id": 63935, + "name": "headerExpandedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 362, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 363, + "character": 21 + } + ], + "getSignature": { + "id": 63936, + "name": "headerExpandedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 363, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headerExpandedIndicatorTemplate" + } + }, + "setSignature": { + "id": 63937, + "name": "headerExpandedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the header expand indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 362, + "character": 15 + } + ], + "parameters": [ + { + "id": 63938, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headerExpandedIndicatorTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headerExpandedIndicatorTemplate" + } + }, + { + "id": 64091, + "name": "headSelectorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 874, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 875, + "character": 21 + } + ], + "getSignature": { + "id": 64092, + "name": "headSelectorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 875, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68795, + "name": "IgcHeadSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headSelectorTemplate" + } + }, + "setSignature": { + "id": 64093, + "name": "headSelectorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the header row selector template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 874, + "character": 15 + } + ], + "parameters": [ + { + "id": 64094, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68795, + "name": "IgcHeadSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headSelectorTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).headSelectorTemplate" + } + }, + { + "id": 64007, + "name": "height", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 561, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 562, + "character": 21 + } + ], + "getSignature": { + "id": 64008, + "name": "height", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 562, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).height" + } + }, + "setSignature": { + "id": 64009, + "name": "height", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the height." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [height]=\"'305px'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 561, + "character": 15 + } + ], + "parameters": [ + { + "id": 64010, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).height" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).height" + } + }, + { + "id": 64107, + "name": "hiddenColumnsCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 919, + "character": 15 + } + ], + "getSignature": { + "id": 64108, + "name": "hiddenColumnsCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the number of hidden columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst hiddenCol = this.grid.hiddenColumnsCount;\n``" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 919, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).hiddenColumnsCount" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).hiddenColumnsCount" + } + }, + { + "id": 63991, + "name": "hideRowSelectors", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 507, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 508, + "character": 21 + } + ], + "getSignature": { + "id": 63992, + "name": "hideRowSelectors", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 508, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).hideRowSelectors" + } + }, + "setSignature": { + "id": 63993, + "name": "hideRowSelectors", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the row selectors are hidden." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default row selectors are shown" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 507, + "character": 15 + } + ], + "parameters": [ + { + "id": 63994, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).hideRowSelectors" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).hideRowSelectors" + } + }, + { + "id": 64027, + "name": "isLoading", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 626, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 627, + "character": 21 + } + ], + "getSignature": { + "id": 64028, + "name": "isLoading", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 627, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).isLoading" + } + }, + "setSignature": { + "id": 64029, + "name": "isLoading", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the grid is going to show a loading indicator." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [isLoading]=\"true\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 626, + "character": 15 + } + ], + "parameters": [ + { + "id": 64030, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).isLoading" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).isLoading" + } + }, + { + "id": 64131, + "name": "lastSearchInfo", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 994, + "character": 15 + } + ], + "getSignature": { + "id": 64132, + "name": "lastSearchInfo", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the last search information." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 994, + "character": 15 + } + ], + "type": { + "type": "reference", + "target": 68809, + "name": "IgcSearchInfo", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).lastSearchInfo" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).lastSearchInfo" + } + }, + { + "id": 63875, + "name": "loadingGridTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 195, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 196, + "character": 21 + } + ], + "getSignature": { + "id": 63876, + "name": "loadingGridTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 196, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).loadingGridTemplate" + } + }, + "setSignature": { + "id": 63877, + "name": "loadingGridTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when loading." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<ng-template igxGridLoading>\n <!-- content to show when the grid is loading -->\n</ng-template>\n```" + }, + { + "kind": "text", + "text": "\nOr\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid [id]=\"'igx-grid-1'\" [data]=\"Data\" [loadingGridTemplate]=\"myTemplate\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 195, + "character": 15 + } + ], + "parameters": [ + { + "id": 63878, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).loadingGridTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).loadingGridTemplate" + } + }, + { + "id": 63983, + "name": "locale", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 491, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 492, + "character": 21 + } + ], + "getSignature": { + "id": 63984, + "name": "locale", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 492, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).locale" + } + }, + "setSignature": { + "id": 63985, + "name": "locale", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the locale." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If not set, returns browser's language." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 491, + "character": 15 + } + ], + "parameters": [ + { + "id": 63986, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).locale" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).locale" + } + }, + { + "id": 64075, + "name": "mergeStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 801, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 802, + "character": 21 + } + ], + "getSignature": { + "id": 64076, + "name": "mergeStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 802, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68719, + "name": "IgcGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).mergeStrategy" + } + }, + "setSignature": { + "id": 64077, + "name": "mergeStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the merge strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [mergeStrategy]=\"mergeStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 801, + "character": 15 + } + ], + "parameters": [ + { + "id": 64078, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68719, + "name": "IgcGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).mergeStrategy" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).mergeStrategy" + } + }, + { + "id": 63863, + "name": "moving", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 144, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 145, + "character": 21 + } + ], + "getSignature": { + "id": 63864, + "name": "moving", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 145, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).moving" + } + }, + "setSignature": { + "id": 63865, + "name": "moving", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether columns moving is enabled in the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 144, + "character": 15 + } + ], + "parameters": [ + { + "id": 63866, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).moving" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).moving" + } + }, + { + "id": 64143, + "name": "outlet", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1060, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1061, + "character": 21 + } + ], + "getSignature": { + "id": 64144, + "name": "outlet", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1061, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68840, + "name": "IgcOverlayOutletDirective", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).outlet" + } + }, + "setSignature": { + "id": 64145, + "name": "outlet", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the outlet used to attach the grid's overlays to." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1060, + "character": 15 + } + ], + "parameters": [ + { + "id": 64146, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68840, + "name": "IgcOverlayOutletDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).outlet" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).outlet" + } + }, + { + "id": 63963, + "name": "paginationComponents", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 425, + "character": 21 + } + ], + "getSignature": { + "id": 63964, + "name": "paginationComponents", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 425, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 59577, + "name": "IgcPaginatorComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).paginationComponents" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).paginationComponents" + } + }, + { + "id": 63987, + "name": "pagingMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 496, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 497, + "character": 21 + } + ], + "getSignature": { + "id": 63988, + "name": "pagingMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 497, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70261, + "name": "GridPagingMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pagingMode" + } + }, + "setSignature": { + "id": 63989, + "name": "pagingMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 496, + "character": 15 + } + ], + "parameters": [ + { + "id": 63990, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70261, + "name": "GridPagingMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pagingMode" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pagingMode" + } + }, + { + "id": 64151, + "name": "pinnedColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1098, + "character": 15 + } + ], + "getSignature": { + "id": 64152, + "name": "pinnedColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedColumns = this.grid.pinnedColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1098, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedColumns" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedColumns" + } + }, + { + "id": 64109, + "name": "pinnedColumnsCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 926, + "character": 15 + } + ], + "getSignature": { + "id": 64110, + "name": "pinnedColumnsCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the number of pinned columns." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 926, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedColumnsCount" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedColumnsCount" + } + }, + { + "id": 64155, + "name": "pinnedEndColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1122, + "character": 15 + } + ], + "getSignature": { + "id": 64156, + "name": "pinnedEndColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned to the right " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedColumns = this.grid.pinnedEndColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1122, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedEndColumns" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedEndColumns" + } + }, + { + "id": 64157, + "name": "pinnedRows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1135, + "character": 15 + } + ], + "getSignature": { + "id": 64158, + "name": "pinnedRows", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned " + }, + { + "kind": "code", + "text": "`IgxRowComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedRow = this.grid.pinnedRows;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1135, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68843, + "name": "IgcGridRowComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedRows" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedRows" + } + }, + { + "id": 64153, + "name": "pinnedStartColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1110, + "character": 15 + } + ], + "getSignature": { + "id": 64154, + "name": "pinnedStartColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned to the left " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedColumns = this.grid.pinnedStartColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1110, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedStartColumns" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinnedStartColumns" + } + }, + { + "id": 64039, + "name": "pinning", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 674, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 675, + "character": 21 + } + ], + "getSignature": { + "id": 64040, + "name": "pinning", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 675, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinning" + } + }, + "setSignature": { + "id": 64041, + "name": "pinning", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the initial pinning configuration." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Allows to apply pinning the columns to the start or the end.\nNote that pinning to both sides at a time is not allowed." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [pinning]=\"pinningConfig\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 674, + "character": 15 + } + ], + "parameters": [ + { + "id": 64042, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinning" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinning" + } + }, + { + "id": 63899, + "name": "primaryKey", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 280, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 281, + "character": 21 + } + ], + "getSignature": { + "id": 63900, + "name": "primaryKey", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 281, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).primaryKey" + } + }, + "setSignature": { + "id": 63901, + "name": "primaryKey", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the primary key." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [primaryKey]=\"'ProductID'\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 280, + "character": 15 + } + ], + "parameters": [ + { + "id": 63902, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).primaryKey" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).primaryKey" + } + }, + { + "id": 63967, + "name": "resourceStrings", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 435, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 436, + "character": 21 + } + ], + "getSignature": { + "id": 63968, + "name": "resourceStrings", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 436, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).resourceStrings" + } + }, + "setSignature": { + "id": 63969, + "name": "resourceStrings", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the resource strings." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it uses EN resources." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 435, + "character": 15 + } + ], + "parameters": [ + { + "id": 63970, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).resourceStrings" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).resourceStrings" + } + }, + { + "id": 63779, + "name": "rootGrid", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 50, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 51, + "character": 21 + } + ], + "getSignature": { + "id": 63780, + "name": "rootGrid", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 51, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63781, + "name": "rootGrid", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 50, + "character": 15 + } + ], + "parameters": [ + { + "id": 63782, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63919, + "name": "rowAddTextTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 330, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 331, + "character": 21 + } + ], + "getSignature": { + "id": 63920, + "name": "rowAddTextTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 331, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowAddTextTemplate" + } + }, + "setSignature": { + "id": 63921, + "name": "rowAddTextTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row add text template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 330, + "character": 15 + } + ], + "parameters": [ + { + "id": 63922, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowAddTextTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowAddTextTemplate" + } + }, + { + "id": 63891, + "name": "rowClasses", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 245, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 246, + "character": 21 + } + ], + "getSignature": { + "id": 63892, + "name": "rowClasses", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 246, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowClasses" + } + }, + "setSignature": { + "id": 63893, + "name": "rowClasses", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a conditional class selector to the grid's row element.\nAccepts an object literal, containing key-value pairs,\nwhere the key is the name of the CSS class and the value is\neither a callback function that returns a boolean, or boolean, like so:\n" + }, + { + "kind": "code", + "text": "```typescript\ncallback = (row: RowType) => { return row.selected > 6; }\nrowClasses = { 'className' : this.callback };\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [rowClasses] = \"rowClasses\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 245, + "character": 15 + } + ], + "parameters": [ + { + "id": 63894, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowClasses" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowClasses" + } + }, + { + "id": 63931, + "name": "rowCollapsedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 354, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 355, + "character": 21 + } + ], + "getSignature": { + "id": 63932, + "name": "rowCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 355, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowCollapsedIndicatorTemplate" + } + }, + "setSignature": { + "id": 63933, + "name": "rowCollapsedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row collapse indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 354, + "character": 15 + } + ], + "parameters": [ + { + "id": 63934, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowCollapsedIndicatorTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowCollapsedIndicatorTemplate" + } + }, + { + "id": 63995, + "name": "rowDraggable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 520, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 521, + "character": 21 + } + ], + "getSignature": { + "id": 63996, + "name": "rowDraggable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 521, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowDraggable" + } + }, + "setSignature": { + "id": 63997, + "name": "rowDraggable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether rows can be moved." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [rowDraggable]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 520, + "character": 15 + } + ], + "parameters": [ + { + "id": 63998, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowDraggable" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowDraggable" + } + }, + { + "id": 64003, + "name": "rowEditable", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 548, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 549, + "character": 21 + } + ], + "getSignature": { + "id": 64004, + "name": "rowEditable", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 549, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditable" + } + }, + "setSignature": { + "id": 64005, + "name": "rowEditable", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the rows are editable." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is set to false." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [rowEditable]=\"true\" [primaryKey]=\"'ProductID'\" ></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 548, + "character": 15 + } + ], + "parameters": [ + { + "id": 64006, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditable" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditable" + } + }, + { + "id": 63923, + "name": "rowEditActionsTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 338, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 339, + "character": 21 + } + ], + "getSignature": { + "id": 63924, + "name": "rowEditActionsTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 339, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68677, + "name": "IgcGridRowEditActionsTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditActionsTemplate" + } + }, + "setSignature": { + "id": 63925, + "name": "rowEditActionsTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row edit actions template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 338, + "character": 15 + } + ], + "parameters": [ + { + "id": 63926, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68677, + "name": "IgcGridRowEditActionsTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditActionsTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditActionsTemplate" + } + }, + { + "id": 63915, + "name": "rowEditTextTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 322, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 323, + "character": 21 + } + ], + "getSignature": { + "id": 63916, + "name": "rowEditTextTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 323, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68667, + "name": "IgcGridRowEditTextTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditTextTemplate" + } + }, + "setSignature": { + "id": 63917, + "name": "rowEditTextTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row edit text template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 322, + "character": 15 + } + ], + "parameters": [ + { + "id": 63918, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68667, + "name": "IgcGridRowEditTextTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditTextTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowEditTextTemplate" + } + }, + { + "id": 63927, + "name": "rowExpandedIndicatorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 346, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 347, + "character": 21 + } + ], + "getSignature": { + "id": 63928, + "name": "rowExpandedIndicatorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 347, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowExpandedIndicatorTemplate" + } + }, + "setSignature": { + "id": 63929, + "name": "rowExpandedIndicatorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row expand indicator template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 346, + "character": 15 + } + ], + "parameters": [ + { + "id": 63930, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowExpandedIndicatorTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowExpandedIndicatorTemplate" + } + }, + { + "id": 64015, + "name": "rowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 587, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 588, + "character": 21 + } + ], + "getSignature": { + "id": 64016, + "name": "rowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 588, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowHeight" + } + }, + "setSignature": { + "id": 64017, + "name": "rowHeight", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the row height." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [rowHeight]=\"100\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 587, + "character": 15 + } + ], + "parameters": [ + { + "id": 64018, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowHeight" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowHeight" + } + }, + { + "id": 64087, + "name": "rowList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 854, + "character": 15 + } + ], + "getSignature": { + "id": 64088, + "name": "rowList", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst rowList = this.grid.rowList;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 854, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowList" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowList" + } + }, + { + "id": 64123, + "name": "rowSelection", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 974, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 975, + "character": 21 + } + ], + "getSignature": { + "id": 64124, + "name": "rowSelection", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 975, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowSelection" + } + }, + "setSignature": { + "id": 64125, + "name": "rowSelection", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets row selection mode" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default the row selection mode is 'none'\nNote that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 974, + "character": 15 + } + ], + "parameters": [ + { + "id": 64126, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowSelection" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowSelection" + } + }, + { + "id": 64095, + "name": "rowSelectorTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 882, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 883, + "character": 21 + } + ], + "getSignature": { + "id": 64096, + "name": "rowSelectorTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 883, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68802, + "name": "IgcRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowSelectorTemplate" + } + }, + "setSignature": { + "id": 64097, + "name": "rowSelectorTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row selector template." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 882, + "character": 15 + } + ], + "parameters": [ + { + "id": 64098, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68802, + "name": "IgcRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowSelectorTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowSelectorTemplate" + } + }, + { + "id": 63895, + "name": "rowStyles", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 267, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 268, + "character": 21 + } + ], + "getSignature": { + "id": 63896, + "name": "rowStyles", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 268, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowStyles" + } + }, + "setSignature": { + "id": 63897, + "name": "rowStyles", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets conditional style properties on the grid row element.\nIt accepts an object literal where the keys are\nthe style properties and the value is an expression to be evaluated.\n" + }, + { + "kind": "code", + "text": "```typescript\nstyles = {\n background: 'yellow',\n color: (row: RowType) => row.selected : 'red': 'white'\n}\n```" + }, + { + "kind": "text", + "text": "\n" + }, + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [rowStyles]=\"styles\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxColumnComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 267, + "character": 15 + } + ], + "parameters": [ + { + "id": 63898, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowStyles" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).rowStyles" + } + }, + { + "id": 64083, + "name": "selectedRows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 840, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 841, + "character": 21 + } + ], + "getSignature": { + "id": 64084, + "name": "selectedRows", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 841, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectedRows" + } + }, + "setSignature": { + "id": 64085, + "name": "selectedRows", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the current selection state." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Represents the selected rows' IDs (primary key or rowData)" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid [data]=\"localData\" primaryKey=\"ID\" rowSelection=\"multiple\" [selectedRows]=\"[0, 1, 2]\"><igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 840, + "character": 11 + } + ], + "parameters": [ + { + "id": 64086, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectedRows" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectedRows" + } + }, + { + "id": 64169, + "name": "selectRowOnClick", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1197, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1198, + "character": 21 + } + ], + "getSignature": { + "id": 64170, + "name": "selectRowOnClick", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1198, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRowOnClick" + } + }, + "setSignature": { + "id": 64171, + "name": "selectRowOnClick", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether clicking over a row should select/deselect it" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is set to true" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1197, + "character": 15 + } + ], + "parameters": [ + { + "id": 64172, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRowOnClick" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRowOnClick" + } + }, + { + "id": 64031, + "name": "shouldGenerate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 644, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 645, + "character": 21 + } + ], + "getSignature": { + "id": 64032, + "name": "shouldGenerate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 645, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).shouldGenerate" + } + }, + "setSignature": { + "id": 64033, + "name": "shouldGenerate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "This will allow to bind the grid to remote data and having auto-generated columns at the same time.\nNote that after generating the columns, this property would be disabled to avoid re-creating\ncolumns each time a new data is assigned." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n this.grid.shouldGenerate = true;\n```" + } + ] + }, + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Column re-creation now relies on " + }, + { + "kind": "code", + "text": "`autoGenerate`" + }, + { + "kind": "text", + "text": " instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 644, + "character": 15 + } + ], + "parameters": [ + { + "id": 64034, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).shouldGenerate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).shouldGenerate" + } + }, + { + "id": 63775, + "name": "showExpandAll", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 46, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 47, + "character": 21 + } + ], + "getSignature": { + "id": 63776, + "name": "showExpandAll", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 47, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 63777, + "name": "showExpandAll", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the expand/collapse all button in the header should be rendered." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The default value is false." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-hierarchical-grid #grid [data]=\"localData\" [showExpandAll]=\"true\">\n</igx-hierarchical-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 46, + "character": 15 + } + ], + "parameters": [ + { + "id": 63778, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 64063, + "name": "showSummaryOnCollapse", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 761, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 762, + "character": 21 + } + ], + "getSignature": { + "id": 64064, + "name": "showSummaryOnCollapse", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 762, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).showSummaryOnCollapse" + } + }, + "setSignature": { + "id": 64065, + "name": "showSummaryOnCollapse", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether the summary row is visible when groupBy/parent row is collapsed." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" [showSummaryOnCollapse]=\"true\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible\nwhen the groupBy/parent row is collapsed." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 761, + "character": 15 + } + ], + "parameters": [ + { + "id": 64066, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).showSummaryOnCollapse" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).showSummaryOnCollapse" + } + }, + { + "id": 63851, + "name": "snackbarDisplayTime", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 101, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 102, + "character": 21 + } + ], + "getSignature": { + "id": 63852, + "name": "snackbarDisplayTime", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 102, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).snackbarDisplayTime" + } + }, + "setSignature": { + "id": 63853, + "name": "snackbarDisplayTime", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the display time for the row adding snackbar notification." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is 6000ms." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 101, + "character": 15 + } + ], + "parameters": [ + { + "id": 63854, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).snackbarDisplayTime" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).snackbarDisplayTime" + } + }, + { + "id": 63947, + "name": "sortAscendingHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 386, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 387, + "character": 21 + } + ], + "getSignature": { + "id": 63948, + "name": "sortAscendingHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 387, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortAscendingHeaderIconTemplate" + } + }, + "setSignature": { + "id": 63949, + "name": "sortAscendingHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 386, + "character": 15 + } + ], + "parameters": [ + { + "id": 63950, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortAscendingHeaderIconTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortAscendingHeaderIconTemplate" + } + }, + { + "id": 63951, + "name": "sortDescendingHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 394, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 395, + "character": 21 + } + ], + "getSignature": { + "id": 63952, + "name": "sortDescendingHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 395, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortDescendingHeaderIconTemplate" + } + }, + "setSignature": { + "id": 63953, + "name": "sortDescendingHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 394, + "character": 15 + } + ], + "parameters": [ + { + "id": 63954, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortDescendingHeaderIconTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortDescendingHeaderIconTemplate" + } + }, + { + "id": 63955, + "name": "sortHeaderIconTemplate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 402, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 403, + "character": 21 + } + ], + "getSignature": { + "id": 63956, + "name": "sortHeaderIconTemplate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 403, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortHeaderIconTemplate" + } + }, + "setSignature": { + "id": 63957, + "name": "sortHeaderIconTemplate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 402, + "character": 15 + } + ], + "parameters": [ + { + "id": 63958, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortHeaderIconTemplate" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortHeaderIconTemplate" + } + }, + { + "id": 64103, + "name": "sortingExpressions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 906, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 907, + "character": 21 + } + ], + "getSignature": { + "id": 64104, + "name": "sortingExpressions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 907, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortingExpressions" + } + }, + "setSignature": { + "id": 64105, + "name": "sortingExpressions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting state." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Supports two-way data binding." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"Data\" [autoGenerate]=\"true\" [(sortingExpressions)]=\"model.sortingExpressions\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 906, + "character": 15 + } + ], + "parameters": [ + { + "id": 64106, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortingExpressions" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortingExpressions" + } + }, + { + "id": 64079, + "name": "sortingOptions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 819, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 820, + "character": 21 + } + ], + "getSignature": { + "id": 64080, + "name": "sortingOptions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 820, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68737, + "name": "IgcSortingOptions", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortingOptions" + } + }, + "setSignature": { + "id": 64081, + "name": "sortingOptions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting options - single or multiple sorting.\nAccepts an " + }, + { + "kind": "code", + "text": "`ISortingOptions`" + }, + { + "kind": "text", + "text": " object with any of the " + }, + { + "kind": "code", + "text": "`mode`" + }, + { + "kind": "text", + "text": " properties." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst _sortingOptions: ISortingOptions = {\n mode: 'single'\n}\n```" + }, + { + "kind": "text", + "text": "html\n<igx-grid [sortingOptions]=\"sortingOptions\"><igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 819, + "character": 15 + } + ], + "parameters": [ + { + "id": 64082, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68737, + "name": "IgcSortingOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortingOptions" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortingOptions" + } + }, + { + "id": 64071, + "name": "sortStrategy", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 787, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 788, + "character": 21 + } + ], + "getSignature": { + "id": 64072, + "name": "sortStrategy", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 788, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortStrategy" + } + }, + "setSignature": { + "id": 64073, + "name": "sortStrategy", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n <igx-grid #grid [data]=\"localData\" [sortStrategy]=\"sortStrategy\"></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 787, + "character": 15 + } + ], + "parameters": [ + { + "id": 64074, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortStrategy" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sortStrategy" + } + }, + { + "id": 64059, + "name": "summaryCalculationMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 745, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 746, + "character": 21 + } + ], + "getSignature": { + "id": 64060, + "name": "summaryCalculationMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 746, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70265, + "name": "GridSummaryCalculationMode", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryCalculationMode" + } + }, + "setSignature": { + "id": 64061, + "name": "summaryCalculationMode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the summary calculation mode." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" summaryCalculationMode=\"rootLevelOnly\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 745, + "character": 15 + } + ], + "parameters": [ + { + "id": 64062, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70265, + "name": "GridSummaryCalculationMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryCalculationMode" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryCalculationMode" + } + }, + { + "id": 64055, + "name": "summaryPosition", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 730, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 731, + "character": 21 + } + ], + "getSignature": { + "id": 64056, + "name": "summaryPosition", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 731, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70264, + "name": "GridSummaryPosition", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryPosition" + } + }, + "setSignature": { + "id": 64057, + "name": "summaryPosition", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the summary position." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid [data]=\"localData\" summaryPosition=\"top\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it is bottom." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 730, + "character": 15 + } + ], + "parameters": [ + { + "id": 64058, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70264, + "name": "GridSummaryPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryPosition" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryPosition" + } + }, + { + "id": 63879, + "name": "summaryRowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 203, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 204, + "character": 21 + } + ], + "getSignature": { + "id": 63880, + "name": "summaryRowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 204, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryRowHeight" + } + }, + "setSignature": { + "id": 63881, + "name": "summaryRowHeight", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set IgxSummaryRow height" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 203, + "character": 15 + } + ], + "parameters": [ + { + "id": 63882, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryRowHeight" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).summaryRowHeight" + } + }, + { + "id": 63959, + "name": "toolbar", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 414, + "character": 21 + } + ], + "getSignature": { + "id": 63960, + "name": "toolbar", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 414, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 59566, + "name": "IgcGridToolbarComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).toolbar" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).toolbar" + } + }, + { + "id": 64163, + "name": "totalRecords", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1173, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1174, + "character": 21 + } + ], + "getSignature": { + "id": 64164, + "name": "totalRecords", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1174, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).totalRecords" + } + }, + "setSignature": { + "id": 64165, + "name": "totalRecords", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the total number of records." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Only functions when paging is enabled." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst totalRecords = this.grid.totalRecords;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1173, + "character": 15 + } + ], + "parameters": [ + { + "id": 64166, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).totalRecords" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).totalRecords" + } + }, + { + "id": 64159, + "name": "unpinnedColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1147, + "character": 15 + } + ], + "getSignature": { + "id": 64160, + "name": "unpinnedColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of unpinned " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst unpinnedColumns = this.grid.unpinnedColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1147, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).unpinnedColumns" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).unpinnedColumns" + } + }, + { + "id": 63999, + "name": "validationTrigger", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 533, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 534, + "character": 21 + } + ], + "getSignature": { + "id": 64000, + "name": "validationTrigger", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 534, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70262, + "name": "GridValidationTrigger", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).validationTrigger" + } + }, + "setSignature": { + "id": 64001, + "name": "validationTrigger", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the trigger for validators used when editing the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<igx-grid #grid validationTrigger='blur'></igx-grid>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 533, + "character": 15 + } + ], + "parameters": [ + { + "id": 64002, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70262, + "name": "GridValidationTrigger", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).validationTrigger" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).validationTrigger" + } + }, + { + "id": 64137, + "name": "virtualizationState", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1032, + "character": 15 + } + ], + "getSignature": { + "id": 64138, + "name": "virtualizationState", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the state of the grid virtualization." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Includes the start index and how many records are rendered." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst gridVirtState = this.grid1.virtualizationState;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1032, + "character": 15 + } + ], + "type": { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).virtualizationState" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).virtualizationState" + } + }, + { + "id": 64161, + "name": "visibleColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1159, + "character": 15 + } + ], + "getSignature": { + "id": 64162, + "name": "visibleColumns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of visible " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst visibleColumns = this.grid.visibleColumns.\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1159, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).visibleColumns" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).visibleColumns" + } + }, + { + "id": 64011, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 574, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 575, + "character": 21 + } + ], + "getSignature": { + "id": 64012, + "name": "width", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 575, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).width" + } + }, + "setSignature": { + "id": 64013, + "name": "width", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the width of the grid." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nlet gridWidth = this.grid.width;\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 574, + "character": 15 + } + ], + "parameters": [ + { + "id": 64014, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).width" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).width" + } + }, + { + "id": 64210, + "name": "addRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1384, + "character": 11 + } + ], + "signatures": [ + { + "id": 64211, + "name": "addRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and adds the data record to the end of the data source." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.addRow(record);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1384, + "character": 11 + } + ], + "parameters": [ + { + "id": 64212, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).addRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).addRow" + } + }, + { + "id": 64362, + "name": "beginAddRowById", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2016, + "character": 11 + } + ], + "signatures": [ + { + "id": 64363, + "name": "beginAddRowById", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI under the specified row by rowID." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If null is passed as rowID, the row adding UI is spawned as the first record in the data view" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowById('ALFKI');\nthis.grid.beginAddRowById('ALFKI', true);\nthis.grid.beginAddRowById(null);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2016, + "character": 11 + } + ], + "parameters": [ + { + "id": 64364, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64365, + "name": "asChild", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the record should be added as a child. Only applicable to igxTreeGrid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).beginAddRowById" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).beginAddRowById" + } + }, + { + "id": 64366, + "name": "beginAddRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2032, + "character": 11 + } + ], + "signatures": [ + { + "id": 64367, + "name": "beginAddRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI at the specified index." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Accepted values for index are integers from 0 to this.grid.dataView.length" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowByIndex(0);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 2032, + "character": 11 + } + ], + "parameters": [ + { + "id": 64368, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).beginAddRowByIndex" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).beginAddRowByIndex" + } + }, + { + "id": 64309, + "name": "clearCellSelection", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1810, + "character": 11 + } + ], + "signatures": [ + { + "id": 64310, + "name": "clearCellSelection", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect selected cells." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearCellSelection();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1810, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearCellSelection" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearCellSelection" + } + }, + { + "id": 64248, + "name": "clearFilter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1557, + "character": 11 + } + ], + "signatures": [ + { + "id": 64249, + "name": "clearFilter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the filtering state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Otherwise clears the filtering state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearFilter();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1557, + "character": 11 + } + ], + "parameters": [ + { + "id": 64250, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearFilter" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearFilter" + } + }, + { + "id": 64288, + "name": "clearSearch", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1713, + "character": 11 + } + ], + "signatures": [ + { + "id": 64289, + "name": "clearSearch", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes all the highlights in the cell." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSearch();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1713, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearSearch" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearSearch" + } + }, + { + "id": 64251, + "name": "clearSort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1572, + "character": 11 + } + ], + "signatures": [ + { + "id": 64252, + "name": "clearSort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the sorting state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "otherwise clears the sorting state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSort();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1572, + "character": 11 + } + ], + "parameters": [ + { + "id": 64253, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearSort" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).clearSort" + } + }, + { + "id": 64355, + "name": "closeAdvancedFilteringDialog", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1978, + "character": 11 + } + ], + "signatures": [ + { + "id": 64356, + "name": "closeAdvancedFilteringDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the advanced filtering dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1978, + "character": 11 + } + ], + "parameters": [ + { + "id": 64357, + "name": "applyChanges", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "indicates whether the changes should be applied" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).closeAdvancedFilteringDialog" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).closeAdvancedFilteringDialog" + } + }, + { + "id": 64181, + "name": "collapseAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1246, + "character": 11 + } + ], + "signatures": [ + { + "id": 64182, + "name": "collapseAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseAll();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1246, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).collapseAll" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).collapseAll" + } + }, + { + "id": 64186, + "name": "collapseRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1276, + "character": 11 + } + ], + "signatures": [ + { + "id": 64187, + "name": "collapseRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1276, + "character": 11 + } + ], + "parameters": [ + { + "id": 64188, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).collapseRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).collapseRow" + } + }, + { + "id": 64213, + "name": "deleteRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1401, + "character": 11 + } + ], + "signatures": [ + { + "id": 64214, + "name": "deleteRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set.\nThe method accept rowSelector as a parameter, which is the rowID." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.deleteRow(0);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1401, + "character": 11 + } + ], + "parameters": [ + { + "id": 64215, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deleteRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deleteRow" + } + }, + { + "id": 64329, + "name": "deselectAllColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1888, + "character": 11 + } + ], + "signatures": [ + { + "id": 64330, + "name": "deselectAllColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1888, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectAllColumns" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectAllColumns" + } + }, + { + "id": 64306, + "name": "deselectAllRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1799, + "character": 11 + } + ], + "signatures": [ + { + "id": 64307, + "name": "deselectAllRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllRows();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1799, + "character": 11 + } + ], + "parameters": [ + { + "id": 64308, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectAllRows" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectAllRows" + } + }, + { + "id": 64326, + "name": "deselectColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1876, + "character": 11 + } + ], + "signatures": [ + { + "id": 64327, + "name": "deselectColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified columns by field." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectColumns(['ID','Name']);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1876, + "character": 11 + } + ], + "parameters": [ + { + "id": 64328, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectColumns" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectColumns" + } + }, + { + "id": 64300, + "name": "deselectRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1766, + "character": 11 + } + ], + "signatures": [ + { + "id": 64301, + "name": "deselectRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectRows([1,2,5]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1766, + "character": 11 + } + ], + "parameters": [ + { + "id": 64302, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectRows" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).deselectRows" + } + }, + { + "id": 64245, + "name": "disableSummaries", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1542, + "character": 11 + } + ], + "signatures": [ + { + "id": 64246, + "name": "disableSummaries", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disable summaries for the specified column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries('ProductName');\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Disable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries([{ fieldName: 'ProductName' }]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1542, + "character": 11 + } + ], + "parameters": [ + { + "id": 64247, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).disableSummaries" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).disableSummaries" + } + }, + { + "id": 64242, + "name": "enableSummaries", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1524, + "character": 11 + } + ], + "signatures": [ + { + "id": 64243, + "name": "enableSummaries", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables summaries for the specified column and applies your customSummary." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If you do not provide the customSummary, then the default summary for the column data type will be applied." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);\n```" + }, + { + "kind": "text", + "text": "\nEnable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries('ProductName');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1524, + "character": 11 + } + ], + "parameters": [ + { + "id": 64244, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).enableSummaries" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).enableSummaries" + } + }, + { + "id": 64358, + "name": "endEdit", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1996, + "character": 11 + } + ], + "signatures": [ + { + "id": 64359, + "name": "endEdit", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finishes the row transactions on the current row and returns whether the grid editing was canceled." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`commit === true`" + }, + { + "kind": "text", + "text": ", passes them from the pending state to the data (or transaction service)" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<button type=\"button\" igxButton (click)=\"grid.endEdit(true)\">Commit Row</button>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1996, + "character": 11 + } + ], + "parameters": [ + { + "id": 64360, + "name": "commit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 64361, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).endEdit" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).endEdit" + } + }, + { + "id": 64179, + "name": "expandAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1234, + "character": 11 + } + ], + "signatures": [ + { + "id": 64180, + "name": "expandAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandAll();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1234, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expandAll" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expandAll" + } + }, + { + "id": 64183, + "name": "expandRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1261, + "character": 11 + } + ], + "signatures": [ + { + "id": 64184, + "name": "expandRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1261, + "character": 11 + } + ], + "parameters": [ + { + "id": 64185, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expandRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).expandRow" + } + }, + { + "id": 64231, + "name": "filter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1488, + "character": 11 + } + ], + "signatures": [ + { + "id": 64232, + "name": "filter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic filter(term) {\n this.grid.filter(\"ProductName\", term, IgxStringFilteringOperand.instance().condition(\"contains\"));\n}\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1488, + "character": 11 + } + ], + "parameters": [ + { + "id": 64233, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 64234, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64235, + "name": "conditionOrExpressionTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + { + "id": 64236, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filter" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filter" + } + }, + { + "id": 64237, + "name": "filterGlobal", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1504, + "character": 11 + } + ], + "signatures": [ + { + "id": 64238, + "name": "filterGlobal", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters all the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " in the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": " with the same condition." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));\n```" + } + ] + }, + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1504, + "character": 11 + } + ], + "parameters": [ + { + "id": 64239, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64240, + "name": "condition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64241, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterGlobal" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).filterGlobal" + } + }, + { + "id": 64274, + "name": "findNext", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1669, + "character": 11 + } + ], + "signatures": [ + { + "id": 64275, + "name": "findNext", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findNext(\"financial\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1669, + "character": 11 + } + ], + "parameters": [ + { + "id": 64276, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 64277, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 64278, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).findNext" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).findNext" + } + }, + { + "id": 64279, + "name": "findPrev", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1686, + "character": 11 + } + ], + "signatures": [ + { + "id": 64280, + "name": "findPrev", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findPrev(\"financial\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1686, + "character": 11 + } + ], + "parameters": [ + { + "id": 64281, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 64282, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 64283, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).findPrev" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).findPrev" + } + }, + { + "id": 64195, + "name": "getColumnByName", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1312, + "character": 11 + } + ], + "signatures": [ + { + "id": 64196, + "name": "getColumnByName", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " by field name." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCol = this.grid1.getColumnByName(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1312, + "character": 11 + } + ], + "parameters": [ + { + "id": 64197, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getColumnByName" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getColumnByName" + } + }, + { + "id": 64198, + "name": "getColumnByVisibleIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1316, + "character": 11 + } + ], + "signatures": [ + { + "id": 64199, + "name": "getColumnByVisibleIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1316, + "character": 11 + } + ], + "parameters": [ + { + "id": 64200, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getColumnByVisibleIndex" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getColumnByVisibleIndex" + } + }, + { + "id": 64192, + "name": "getHeaderGroupWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1299, + "character": 11 + } + ], + "signatures": [ + { + "id": 64193, + "name": "getHeaderGroupWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the " + }, + { + "kind": "code", + "text": "`width`" + }, + { + "kind": "text", + "text": " to be set on " + }, + { + "kind": "code", + "text": "`IgxGridHeaderGroupComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1299, + "character": 11 + } + ], + "parameters": [ + { + "id": 64194, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getHeaderGroupWidth" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getHeaderGroupWidth" + } + }, + { + "id": 64342, + "name": "getNextCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1945, + "character": 11 + } + ], + "signatures": [ + { + "id": 64343, + "name": "getNextCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the next cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1945, + "character": 11 + } + ], + "parameters": [ + { + "id": 64344, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64345, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64346, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getNextCell" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getNextCell" + } + }, + { + "id": 64293, + "name": "getPinnedEndWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1739, + "character": 11 + } + ], + "signatures": [ + { + "id": 64294, + "name": "getPinnedEndWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedEndWidth();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1739, + "character": 11 + } + ], + "parameters": [ + { + "id": 64295, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getPinnedEndWidth" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getPinnedEndWidth" + } + }, + { + "id": 64290, + "name": "getPinnedStartWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1726, + "character": 11 + } + ], + "signatures": [ + { + "id": 64291, + "name": "getPinnedStartWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedStartWidth();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1726, + "character": 11 + } + ], + "parameters": [ + { + "id": 64292, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getPinnedStartWidth" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getPinnedStartWidth" + } + }, + { + "id": 64347, + "name": "getPreviousCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1962, + "character": 11 + } + ], + "signatures": [ + { + "id": 64348, + "name": "getPreviousCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the previous cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1962, + "character": 11 + } + ], + "parameters": [ + { + "id": 64349, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64350, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64351, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getPreviousCell" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getPreviousCell" + } + }, + { + "id": 64225, + "name": "getRowData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1456, + "character": 11 + } + ], + "signatures": [ + { + "id": 64226, + "name": "getRowData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the data that is contained in the row component." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If the primary key is not specified the row selector match the row data." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst data = grid.getRowData(94741);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1456, + "character": 11 + } + ], + "parameters": [ + { + "id": 64227, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getRowData" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getRowData" + } + }, + { + "id": 64333, + "name": "getSelectedColumnsData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1912, + "character": 11 + } + ], + "signatures": [ + { + "id": 64334, + "name": "getSelectedColumnsData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current columns selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1912, + "character": 11 + } + ], + "parameters": [ + { + "id": 64335, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 64336, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getSelectedColumnsData" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getSelectedColumnsData" + } + }, + { + "id": 64316, + "name": "getSelectedData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1836, + "character": 11 + } + ], + "signatures": [ + { + "id": 64317, + "name": "getSelectedData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1836, + "character": 11 + } + ], + "parameters": [ + { + "id": 64318, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 64319, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getSelectedData" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getSelectedData" + } + }, + { + "id": 64314, + "name": "getSelectedRanges", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1824, + "character": 11 + } + ], + "signatures": [ + { + "id": 64315, + "name": "getSelectedRanges", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get the currently selected ranges in the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1824, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getSelectedRanges" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).getSelectedRanges" + } + }, + { + "id": 64173, + "name": "isRecordPinnedByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1207, + "character": 11 + } + ], + "signatures": [ + { + "id": 64174, + "name": "isRecordPinnedByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns whether the record is pinned or not." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1207, + "character": 11 + } + ], + "parameters": [ + { + "id": 64175, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Index of the record in the " + }, + { + "kind": "code", + "text": "`filteredSortedData`" + }, + { + "kind": "text", + "text": " collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).isRecordPinnedByIndex" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).isRecordPinnedByIndex" + } + }, + { + "id": 64208, + "name": "markForCheck", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1370, + "character": 11 + } + ], + "signatures": [ + { + "id": 64209, + "name": "markForCheck", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Triggers change detection for the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": ".\nCalling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.\nMay degrade performance if used when not needed, or if misused:\n" + }, + { + "kind": "code", + "text": "```typescript\n// DON'Ts:\n// don't call markForCheck from inside a loop\n// don't call markForCheck when a primitive has changed\ngrid.data.forEach(rec => {\n rec = newValue;\n grid.markForCheck();\n});\n\n// DOs\n// call markForCheck after updating a nested property\ngrid.data.forEach(rec => {\n rec.nestedProp1.nestedProp2 = newValue;\n});\ngrid.markForCheck();\n```" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.markForCheck();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1370, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).markForCheck" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).markForCheck" + } + }, + { + "id": 64203, + "name": "moveColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1340, + "character": 11 + } + ], + "signatures": [ + { + "id": 64204, + "name": "moveColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Places a column before or after the specified target column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.moveColumn(column, target);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1340, + "character": 11 + } + ], + "parameters": [ + { + "id": 64205, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 64206, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 64207, + "name": "pos", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70268, + "name": "DropPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).moveColumn" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).moveColumn" + } + }, + { + "id": 64337, + "name": "navigateTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1928, + "character": 11 + } + ], + "signatures": [ + { + "id": 64338, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to a position in the grid based on provided " + }, + { + "kind": "code", + "text": "`rowindex`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`visibleColumnIndex`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Also can execute a custom logic over the target element,\nthrough a callback function that accepts { targetType: GridKeydownTargetType, target: Object }" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1928, + "character": 11 + } + ], + "parameters": [ + { + "id": 64339, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64340, + "name": "visibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64341, + "name": "cb", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).navigateTo" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).navigateTo" + } + }, + { + "id": 64352, + "name": "openAdvancedFilteringDialog", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1969, + "character": 11 + } + ], + "signatures": [ + { + "id": 64353, + "name": "openAdvancedFilteringDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the advanced filtering dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1969, + "character": 11 + } + ], + "parameters": [ + { + "id": 64354, + "name": "overlaySettings", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).openAdvancedFilteringDialog" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).openAdvancedFilteringDialog" + } + }, + { + "id": 64254, + "name": "pinColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1591, + "character": 11 + } + ], + "signatures": [ + { + "id": 64255, + "name": "pinColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins a column by field name." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns whether the operation is successful." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1591, + "character": 11 + } + ], + "parameters": [ + { + "id": 64256, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 64257, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64258, + "name": "pinningPosition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinColumn" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinColumn" + } + }, + { + "id": 64263, + "name": "pinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1622, + "character": 11 + } + ], + "signatures": [ + { + "id": 64264, + "name": "pinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1622, + "character": 11 + } + ], + "parameters": [ + { + "id": 64265, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64266, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 64267, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).pinRow" + } + }, + { + "id": 64201, + "name": "recalculateAutoSizes", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1328, + "character": 11 + } + ], + "signatures": [ + { + "id": 64202, + "name": "recalculateAutoSizes", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates all widths of columns that have size set to " + }, + { + "kind": "code", + "text": "`auto`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.recalculateAutoSizes();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1328, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).recalculateAutoSizes" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).recalculateAutoSizes" + } + }, + { + "id": 64272, + "name": "reflow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1652, + "character": 11 + } + ], + "signatures": [ + { + "id": 64273, + "name": "reflow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates grid width/height dimensions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Should be run when changing DOM elements dimentions manually that affect the grid's size." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.reflow();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1652, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).reflow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).reflow" + } + }, + { + "id": 64284, + "name": "refreshSearch", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1701, + "character": 11 + } + ], + "signatures": [ + { + "id": 64285, + "name": "refreshSearch", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Reapplies the existing search." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the last search." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.refreshSearch();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1701, + "character": 11 + } + ], + "parameters": [ + { + "id": 64286, + "name": "updateActiveInfo", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 64287, + "name": "endEdit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).refreshSearch" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).refreshSearch" + } + }, + { + "id": 64331, + "name": "selectAllColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1900, + "character": 11 + } + ], + "signatures": [ + { + "id": 64332, + "name": "selectAllColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1900, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectAllColumns" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectAllColumns" + } + }, + { + "id": 64303, + "name": "selectAllRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1783, + "character": 11 + } + ], + "signatures": [ + { + "id": 64304, + "name": "selectAllRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectAllRows();\nthis.grid.selectAllRows(false);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1783, + "character": 11 + } + ], + "parameters": [ + { + "id": 64305, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectAllRows" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectAllRows" + } + }, + { + "id": 64322, + "name": "selectColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1863, + "character": 11 + } + ], + "signatures": [ + { + "id": 64323, + "name": "selectColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectColumns(['ID','Name'], true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1863, + "character": 11 + } + ], + "parameters": [ + { + "id": 64324, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + { + "id": 64325, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectColumns" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectColumns" + } + }, + { + "id": 64320, + "name": "selectedColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1849, + "character": 11 + } + ], + "signatures": [ + { + "id": 64321, + "name": "selectedColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get current selected columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "text", + "text": "Returns an array with selected columns\n" + }, + { + "kind": "code", + "text": "```typescript\nconst selectedColumns = this.grid.selectedColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1849, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectedColumns" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectedColumns" + } + }, + { + "id": 64311, + "name": "selectRange", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1817, + "character": 11 + } + ], + "signatures": [ + { + "id": 64312, + "name": "selectRange", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select range(s) of cells between certain rows and columns of the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1817, + "character": 11 + } + ], + "parameters": [ + { + "id": 64313, + "name": "arg", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRange" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRange" + } + }, + { + "id": 64296, + "name": "selectRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1753, + "character": 11 + } + ], + "signatures": [ + { + "id": 64297, + "name": "selectRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectRows([1,2,5], true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1753, + "character": 11 + } + ], + "parameters": [ + { + "id": 64298, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 64299, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRows" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).selectRows" + } + }, + { + "id": 64228, + "name": "sort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1470, + "character": 11 + } + ], + "signatures": [ + { + "id": 64229, + "name": "sort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Sort the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": "'s " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " based on the provided array of sorting expressions." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1470, + "character": 11 + } + ], + "parameters": [ + { + "id": 64230, + "name": "expression", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sort" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).sort" + } + }, + { + "id": 64176, + "name": "toggleColumnVisibility", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1222, + "character": 11 + } + ], + "signatures": [ + { + "id": 64177, + "name": "toggleColumnVisibility", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the specified column's visibility." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.toggleColumnVisibility({\n column: this.grid1.columns[0],\n newValue: true\n});\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1222, + "character": 11 + } + ], + "parameters": [ + { + "id": 64178, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).toggleColumnVisibility" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).toggleColumnVisibility" + } + }, + { + "id": 64189, + "name": "toggleRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1292, + "character": 11 + } + ], + "signatures": [ + { + "id": 64190, + "name": "toggleRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1292, + "character": 11 + } + ], + "parameters": [ + { + "id": 64191, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).toggleRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).toggleRow" + } + }, + { + "id": 64259, + "name": "unpinColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1605, + "character": 11 + } + ], + "signatures": [ + { + "id": 64260, + "name": "unpinColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins a column by field name. Returns whether the operation is successful." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1605, + "character": 11 + } + ], + "parameters": [ + { + "id": 64261, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 64262, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).unpinColumn" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).unpinColumn" + } + }, + { + "id": 64268, + "name": "unpinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1638, + "character": 11 + } + ], + "signatures": [ + { + "id": 64269, + "name": "unpinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1638, + "character": 11 + } + ], + "parameters": [ + { + "id": 64270, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64271, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).unpinRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).unpinRow" + } + }, + { + "id": 64216, + "name": "updateCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1419, + "character": 11 + } + ], + "signatures": [ + { + "id": 64217, + "name": "updateCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridWithPK.updateCell('Updated', 1, 'ProductName');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1419, + "character": 11 + } + ], + "parameters": [ + { + "id": 64218, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the new value which is to be set." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64219, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to rowID." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64220, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to column field." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).updateCell" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).updateCell" + } + }, + { + "id": 64221, + "name": "updateRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1441, + "character": 11 + } + ], + "signatures": [ + { + "id": 64222, + "name": "updateRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The row is specified by\nrowSelector parameter and the data source record with the passed value.\nThis method will apply requested update only if primary key is specified in the grid." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.updateRow({\n ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')\n }, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "line": 1441, + "character": 11 + } + ], + "parameters": [ + { + "id": 64223, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 64224, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).updateRow" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "EventEmitterMixin<IgcHierarchicalGridBaseDirectiveEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective).updateRow" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63768 + ] + }, + { + "title": "Accessors", + "children": [ + 63907, + 63871, + 63979, + 64047, + 64043, + 63855, + 63859, + 64111, + 64119, + 64115, + 63887, + 63903, + 64149, + 64127, + 64019, + 63883, + 64089, + 64167, + 64147, + 63911, + 64099, + 64035, + 64023, + 63867, + 63943, + 64139, + 64133, + 64135, + 63975, + 63971, + 64051, + 64067, + 63771, + 63939, + 63935, + 64091, + 64007, + 64107, + 63991, + 64027, + 64131, + 63875, + 63983, + 64075, + 63863, + 64143, + 63963, + 63987, + 64151, + 64109, + 64155, + 64157, + 64153, + 64039, + 63899, + 63967, + 63779, + 63919, + 63891, + 63931, + 63995, + 64003, + 63923, + 63915, + 63927, + 64015, + 64087, + 64123, + 64095, + 63895, + 64083, + 64169, + 64031, + 63775, + 64063, + 63851, + 63947, + 63951, + 63955, + 64103, + 64079, + 64071, + 64059, + 64055, + 63879, + 63959, + 64163, + 64159, + 63999, + 64137, + 64161, + 64011 + ] + }, + { + "title": "Methods", + "children": [ + 64210, + 64362, + 64366, + 64309, + 64248, + 64288, + 64251, + 64355, + 64181, + 64186, + 64213, + 64329, + 64306, + 64326, + 64300, + 64245, + 64242, + 64358, + 64179, + 64183, + 64231, + 64237, + 64274, + 64279, + 64195, + 64198, + 64192, + 64342, + 64293, + 64290, + 64347, + 64225, + 64333, + 64316, + 64314, + 64173, + 64208, + 64203, + 64337, + 64352, + 64254, + 64263, + 64201, + 64272, + 64284, + 64331, + 64303, + 64322, + 64320, + 64311, + 64296, + 64228, + 64176, + 64189, + 64259, + 64268, + 64216, + 64221 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "line": 16, + "character": 34 + } + ], + "extendedTypes": [ + { + "type": "intersection", + "types": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "EventEmitterInterface" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirectiveEventMap" + }, + "name": "IgcHierarchicalGridBaseDirectiveEventMap", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "intrinsic", + "name": "this" + } + ], + "name": "EventEmitterInterface", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 62071, + "typeArguments": [ + { + "type": "intrinsic", + "name": "this" + } + ], + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + ] + } + ] + }, + { + "id": 61826, + "name": "IgrNoopFilteringStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61829, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 61830, + "name": "IgrNoopFilteringStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61826, + "name": "IgcNoopFilteringStrategy", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61855, + "name": "IgcBaseFilteringStrategy.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61854, + "name": "IgcBaseFilteringStrategy.constructor" + } + }, + { + "id": 61831, + "name": "filter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "line": 19, + "character": 11 + } + ], + "signatures": [ + { + "id": 61832, + "name": "filter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "line": 19, + "character": 11 + } + ], + "parameters": [ + { + "id": 61833, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 61834, + "name": "_", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61835, + "name": "__", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + }, + "overwrites": { + "type": "reference", + "target": 61874, + "name": "IgcBaseFilteringStrategy.filter" + } + } + ], + "overwrites": { + "type": "reference", + "target": 61873, + "name": "IgcBaseFilteringStrategy.filter" + } + }, + { + "id": 61836, + "name": "findMatchByExpression", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "signatures": [ + { + "id": 61837, + "name": "findMatchByExpression", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 18, + "character": 11 + } + ], + "parameters": [ + { + "id": 61838, + "name": "rec", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61839, + "name": "expr", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61840, + "name": "isDate", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61841, + "name": "isTime", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 61842, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 61857, + "name": "IgcBaseFilteringStrategy.findMatchByExpression" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61856, + "name": "IgcBaseFilteringStrategy.findMatchByExpression" + } + }, + { + "id": 61849, + "name": "getFilterItems", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 27, + "character": 11 + } + ], + "signatures": [ + { + "id": 61850, + "name": "getFilterItems", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 27, + "character": 11 + } + ], + "parameters": [ + { + "id": 61851, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61852, + "name": "tree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es5.d.ts", + "qualifiedName": "Promise" + }, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 67950, + "name": "IgcFilterItem", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "Promise", + "package": "typescript" + }, + "inheritedFrom": { + "type": "reference", + "target": 61870, + "name": "IgcBaseFilteringStrategy.getFilterItems" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61869, + "name": "IgcBaseFilteringStrategy.getFilterItems" + } + }, + { + "id": 61843, + "name": "matchRecord", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 23, + "character": 11 + } + ], + "signatures": [ + { + "id": 61844, + "name": "matchRecord", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "line": 23, + "character": 11 + } + ], + "parameters": [ + { + "id": 61845, + "name": "rec", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 61846, + "name": "expressions", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61782, + "name": "IgcFilteringExpression", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + { + "id": 61847, + "name": "grid", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 61848, + "name": "entity", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 61864, + "name": "IgcBaseFilteringStrategy.matchRecord" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61863, + "name": "IgcBaseFilteringStrategy.matchRecord" + } + }, + { + "id": 61827, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "line": 15, + "character": 18 + } + ], + "signatures": [ + { + "id": 61828, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "line": 15, + "character": 18 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61829 + ] + }, + { + "title": "Methods", + "children": [ + 61831, + 61836, + 61849, + 61843, + 61827 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61853, + "name": "IgcBaseFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 62001, + "name": "IgrNoopPivotDimensionsStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 62004, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 62005, + "name": "IgrNoopPivotDimensionsStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62001, + "name": "IgcNoopPivotDimensionsStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62006, + "name": "process", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "line": 19, + "character": 11 + } + ], + "signatures": [ + { + "id": 62007, + "name": "process", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "line": 19, + "character": 11 + } + ], + "parameters": [ + { + "id": 62008, + "name": "collection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 62009, + "name": "_", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 62010, + "name": "__", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + }, + { + "id": 62002, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "line": 15, + "character": 18 + } + ], + "signatures": [ + { + "id": 62003, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "line": 15, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 62001, + "name": "IgcNoopPivotDimensionsStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 62004 + ] + }, + { + "title": "Methods", + "children": [ + 62006, + 62002 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 62063, + "name": "IgrNoopSortingStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents a class implementing the IGridSortingStrategy interface with a no-operation sorting strategy.\nIt performs no sorting and returns the data as it is." + } + ] + }, + "children": [ + { + "id": 62066, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 62067, + "name": "IgrNoopSortingStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62063, + "name": "IgcNoopSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62068, + "name": "sort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "line": 22, + "character": 11 + } + ], + "signatures": [ + { + "id": 62069, + "name": "sort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "line": 22, + "character": 11 + } + ], + "parameters": [ + { + "id": 62070, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + }, + { + "id": 62064, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "line": 17, + "character": 18 + } + ], + "signatures": [ + { + "id": 62065, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "line": 17, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 62063, + "name": "IgcNoopSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 62066 + ] + }, + { + "title": "Methods", + "children": [ + 62068, + 62064 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 61744, + "name": "IgrNumberFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides filtering operations for numbers" + } + ], + "blockTags": [ + { + "tag": "@export", + "content": [] + } + ] + }, + "children": [ + { + "id": 61747, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61748, + "name": "IgrNumberFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61744, + "name": "IgcNumberFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61663, + "name": "IgcFilteringOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61662, + "name": "IgcFilteringOperand.constructor" + } + }, + { + "id": 61749, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61750, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcFilteringOperand.operations" + } + }, + "setSignature": { + "id": 61751, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61752, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcFilteringOperand.operations" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 61664, + "name": "IgcFilteringOperand.operations" + } + }, + { + "id": 61758, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61759, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61760, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 61674, + "name": "IgcFilteringOperand.append" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61673, + "name": "IgcFilteringOperand.append" + } + }, + { + "id": 61755, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61756, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61757, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61671, + "name": "IgcFilteringOperand.condition" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61670, + "name": "IgcFilteringOperand.condition" + } + }, + { + "id": 61753, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61754, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 61669, + "name": "IgcFilteringOperand.conditionList" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61668, + "name": "IgcFilteringOperand.conditionList" + } + }, + { + "id": 61745, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61746, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61661, + "name": "IgcFilteringOperand.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61660, + "name": "IgcFilteringOperand.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61747 + ] + }, + { + "title": "Accessors", + "children": [ + 61749 + ] + }, + { + "title": "Methods", + "children": [ + 61758, + 61755, + 61753, + 61745 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-filtering-operand.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 65636, + "name": "IgrNumberSummaryOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65652, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65653, + "name": "IgrNumberSummaryOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65636, + "name": "IgcNumberSummaryOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 65613, + "name": "IgcSummaryOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65612, + "name": "IgcSummaryOperand.constructor" + } + }, + { + "id": 65654, + "name": "operate", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 99, + "character": 11 + } + ], + "signatures": [ + { + "id": 65655, + "name": "operate", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Executes the static methods and returns " + }, + { + "kind": "code", + "text": "`IgxSummaryResult[]`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\ninterface IgxSummaryResult {\n key: string;\n label: string;\n summaryResult: any;\n}\n```" + }, + { + "kind": "text", + "text": "\nCan be overridden in the inherited classes to provide customization for the " + }, + { + "kind": "code", + "text": "`summary`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nclass CustomNumberSummary extends IgxNumberSummaryOperand {\n constructor() {\n super();\n }\n public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {\n const result = super.operate(data, allData, fieldName, groupRecord);\n result.push({\n key: \"avg\",\n label: \"Avg\",\n summaryResult: IgxNumberSummaryOperand.average(data)\n });\n result.push({\n key: 'mdn',\n label: 'Median',\n summaryResult: this.findMedian(data)\n });\n return result;\n }\n}\nthis.grid.getColumnByName('ColumnName').summaries = CustomNumberSummary;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxNumberSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 99, + "character": 11 + } + ], + "parameters": [ + { + "id": 65656, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65657, + "name": "allData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65658, + "name": "fieldName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65659, + "name": "groupRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + }, + "overwrites": { + "type": "reference", + "target": 65615, + "name": "IgcSummaryOperand.operate" + } + } + ], + "overwrites": { + "type": "reference", + "target": 65614, + "name": "IgcSummaryOperand.operate" + } + }, + { + "id": 65646, + "name": "average", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 61, + "character": 18 + } + ], + "signatures": [ + { + "id": 65647, + "name": "average", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the average numeric value in the data provided data records.\nIf filtering is applied, returns the average numeric value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxSummaryOperand.average(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxNumberSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 61, + "character": 18 + } + ], + "parameters": [ + { + "id": 65648, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 65649, + "name": "count", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "signatures": [ + { + "id": 65650, + "name": "count", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Counts all the records in the data source.\nIf filtering is applied, counts only the filtered records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxSummaryOperand.count(dataSource);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "parameters": [ + { + "id": 65651, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": 65610, + "name": "IgcSummaryOperand.count" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65609, + "name": "IgcSummaryOperand.count" + } + }, + { + "id": 65640, + "name": "max", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 37, + "character": 18 + } + ], + "signatures": [ + { + "id": 65641, + "name": "max", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the maximum numeric value in the provided data records.\nIf filtering is applied, returns the maximum value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxNumberSummaryOperand.max(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxNumberSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 37, + "character": 18 + } + ], + "parameters": [ + { + "id": 65642, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 65637, + "name": "min", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 25, + "character": 18 + } + ], + "signatures": [ + { + "id": 65638, + "name": "min", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the minimum numeric value in the provided data records.\nIf filtering is applied, returns the minimum value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxNumberSummaryOperand.min(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxNumberSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 25, + "character": 18 + } + ], + "parameters": [ + { + "id": 65639, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 65643, + "name": "sum", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 49, + "character": 18 + } + ], + "signatures": [ + { + "id": 65644, + "name": "sum", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the sum of the numeric values in the provided data records.\nIf filtering is applied, returns the sum of the numeric values in the data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxNumberSummaryOperand.sum(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxNumberSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 49, + "character": 18 + } + ], + "parameters": [ + { + "id": 65645, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65652 + ] + }, + { + "title": "Methods", + "children": [ + 65654, + 65646, + 65649, + 65640, + 65637, + 65643 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 65608, + "name": "IgcSummaryOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68840, + "name": "IgrOverlayOutletDirective", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Mark an element as an igxOverlay outlet container.\nDirective instance is exported as " + }, + { + "kind": "code", + "text": "`overlay-outlet`" + }, + { + "kind": "text", + "text": " to be assigned to templates variables:\n" + }, + { + "kind": "code", + "text": "```html\n<div igxOverlayOutlet #outlet=\"overlay-outlet\"></div>\n```" + } + ] + }, + "children": [ + { + "id": 68841, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68842, + "name": "IgrOverlayOutletDirective", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68840, + "name": "IgcOverlayOutletDirective", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68841 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-outlet-directive.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 65696, + "name": "IgrOverlaySettings", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65697, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65698, + "name": "IgrOverlaySettings", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65704, + "name": "closeOnEscape", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set if the overlay should close when " + }, + { + "kind": "code", + "text": "`Esc`" + }, + { + "kind": "text", + "text": " key is pressed" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 36, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65703, + "name": "closeOnOutsideClick", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set if the overlay should close on outside click" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65702, + "name": "modal", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Set if the overlay should be in modal mode" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65700, + "name": "positionStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Position strategy to use with these settings" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 69005, + "name": "IgcPositionStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65701, + "name": "scrollStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Scroll strategy to use with these settings" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 69014, + "name": "IgcScrollStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65699, + "name": "target", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Attaching target for the component to show" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": -1, + "name": "HTMLElement", + "package": "@types/react" + }, + { + "type": "reference", + "target": 70288, + "name": "Point", + "package": "igniteui-webcomponents-grids" + } + ] + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65697 + ] + }, + { + "title": "Properties", + "children": [ + 65704, + 65703, + 65702, + 65700, + 65701, + 65699 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 70120, + "name": "IgrPageCancellableEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70121, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70122, + "name": "IgrPageCancellableEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70120, + "name": "IgcPageCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70040, + "name": "IgcCancelableEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 70039, + "name": "IgcCancelableEventArgs.constructor" + } + }, + { + "id": 70125, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 70041, + "name": "IgcCancelableEventArgs.cancel" + } + }, + { + "id": 70123, + "name": "current", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-cancellable-event-args.d.ts", + "line": 12, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70124, + "name": "next", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-cancellable-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70121 + ] + }, + { + "title": "Properties", + "children": [ + 70125, + 70123, + 70124 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-cancellable-event-args.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 70038, + "name": "IgcCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 70126, + "name": "IgrPageEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70127, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70128, + "name": "IgrPageEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70126, + "name": "IgcPageEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 70130, + "name": "current", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70131, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 70129, + "name": "previous", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-event-args.d.ts", + "line": 12, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70127 + ] + }, + { + "title": "Properties", + "children": [ + 70130, + 70131, + 70129 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-event-args.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 59577, + "name": "IgrPaginator", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Paginator component description" + } + ] + }, + "children": [ + { + "id": 59616, + "name": "onPageChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59617, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59618, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59619, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59620, + "name": "onPaging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59621, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59622, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59623, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70120, + "name": "IgcPageCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59624, + "name": "onPagingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59625, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59626, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59627, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70126, + "name": "IgcPageEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59612, + "name": "onPerPageChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59613, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59614, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59615, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "number" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59594, + "name": "overlaySettings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets custom OverlaySettings.\n```html\n<igx-paginator [overlaySettings] = \"customOverlaySettings\"></igx-paginator>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 59590, + "name": "page", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the current page of the paginator.\nThe default is 0.\n```typescript\nlet page = this.paginator.page;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59591, + "name": "perPage", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the number of visible items per page in the paginator.\nThe default is 15.\n```typescript\nlet itemsPerPage = this.paginator.perPage;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59595, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An accessor that sets the resource strings.\nBy default it uses EN resources." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70132, + "name": "IgcPaginatorResourceStrings", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 59593, + "name": "selectOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets custom options in the select of the paginator\n```typescript\nlet options = this.paginator.selectOptions;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 59589, + "name": "totalPages", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Total pages calculated from totalRecords and perPage" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59592, + "name": "totalRecords", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the total records.\n```typescript\nlet totalRecords = this.paginator.totalRecords;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59597, + "name": "isFirstPage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if the current page is the first page.\n```typescript\nconst lastPage = this.paginator.isFirstPage;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59596, + "name": "isLastPage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns if the current page is the last page.\n```typescript\nconst lastPage = this.paginator.isLastPage;\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59598, + "name": "nextPage", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page.\n```typescript\nthis.paginator.nextPage();\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59599, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "line": 147, + "character": 11 + } + ], + "signatures": [ + { + "id": 59600, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the next page of the " + }, + { + "kind": "code", + "text": "`IgxPaginatorComponent`" + }, + { + "kind": "text", + "text": ", if the paginator is not already at the last page.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.paginator.nextPage();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxPaginatorComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "line": 147, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59601, + "name": "nextPage", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the next page of the " + }, + { + "kind": "code", + "text": "`IgxPaginatorComponent`" + }, + { + "kind": "text", + "text": ", if the paginator is not already at the last page.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.paginator.nextPage();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxPaginatorComponent" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59606, + "name": "paginate", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the desired page index.\n```typescript\nthis.paginator.paginate(1);\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59607, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "line": 170, + "character": 11 + } + ], + "signatures": [ + { + "id": 59608, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the desired page index.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.paginator.paginate(1);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxPaginatorComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "line": 170, + "character": 11 + } + ], + "parameters": [ + { + "id": 59609, + "name": "val", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59610, + "name": "paginate", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the desired page index.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.paginator.paginate(1);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxPaginatorComponent" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59611, + "name": "val", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59602, + "name": "previousPage", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page.\n```typescript\nthis.paginator.previousPage();\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59603, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "line": 158, + "character": 11 + } + ], + "signatures": [ + { + "id": 59604, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the previous page of the " + }, + { + "kind": "code", + "text": "`IgxPaginatorComponent`" + }, + { + "kind": "text", + "text": ", if the paginator is not already at the first page.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.paginator.previousPage();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxPaginatorComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "line": 158, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59605, + "name": "previousPage", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Goes to the previous page of the " + }, + { + "kind": "code", + "text": "`IgxPaginatorComponent`" + }, + { + "kind": "text", + "text": ", if the paginator is not already at the first page.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.paginator.previousPage();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxPaginatorComponent" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 59594, + 59590, + 59591, + 59595, + 59593, + 59589, + 59592 + ] + }, + { + "title": "Accessors", + "children": [ + 59597, + 59596 + ] + }, + { + "title": "Methods", + "children": [ + 59598, + 59606, + 59602 + ] + }, + { + "title": "Set Signatures", + "children": [ + 59616, + 59620, + 59624, + 59612 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 59597, + 59596 + ] + }, + { + "title": "Events", + "children": [ + 59616, + 59620, + 59624, + 59612 + ] + }, + { + "title": "Methods", + "children": [ + 59598, + 59606, + 59602 + ] + }, + { + "title": "Properties", + "children": [ + 59594, + 59590, + 59591, + 59595, + 59593, + 59589, + 59592 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/paginator.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/grids/paginator.ts", + "line": 34, + "character": 12 + } + ], + "signatures": [ + { + "id": 59581, + "name": "IgrPaginator", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 70132, + "name": "IgrPaginatorResourceStrings", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70133, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70134, + "name": "IgrPaginatorResourceStrings", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70132, + "name": "IgcPaginatorResourceStrings", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70137, + "name": "igx_paginator_first_page_button_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70135, + "name": "igx_paginator_label", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 10, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70139, + "name": "igx_paginator_last_page_button_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70140, + "name": "igx_paginator_next_page_button_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70136, + "name": "igx_paginator_pager_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 70138, + "name": "igx_paginator_previous_page_button_text", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70133 + ] + }, + { + "title": "Properties", + "children": [ + 70137, + 70135, + 70139, + 70140, + 70136, + 70138 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "line": 6, + "character": 25 + } + ] + }, + { + "id": 67885, + "name": "IgrPagingState", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67886, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67887, + "name": "IgrPagingState", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67885, + "name": "IgcPagingState", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67888, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 14, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 67889, + "name": "index", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 67890, + "name": "index", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 14, + "character": 15 + } + ], + "parameters": [ + { + "id": 67891, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67892, + "name": "recordsPerPage", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 67893, + "name": "recordsPerPage", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 67894, + "name": "recordsPerPage", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 67895, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67886 + ] + }, + { + "title": "Accessors", + "children": [ + 67888, + 67892 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 68440, + "name": "IgrPinColumnCancellableEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments before a column's pin state is changed.\n" + }, + { + "kind": "code", + "text": "`insertAtIndex`" + }, + { + "kind": "text", + "text": "specifies at which index in the pinned/unpinned area the column is inserted.\nCan be changed in the " + }, + { + "kind": "code", + "text": "`columnPin`" + }, + { + "kind": "text", + "text": " event.\n" + }, + { + "kind": "code", + "text": "`isPinned`" + }, + { + "kind": "text", + "text": " returns the actual pin state of the column. When pinning/unpinning is successful,\nthe value of " + }, + { + "kind": "code", + "text": "`isPinned`" + }, + { + "kind": "text", + "text": " will change accordingly when read in the \"-ing\" and \"-ed\" event." + } + ] + }, + "children": [ + { + "id": 68441, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68442, + "name": "IgrPinColumnCancellableEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68440, + "name": "IgcPinColumnCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68446, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "line": 39, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68443, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68444, + "name": "insertAtIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If pinned, specifies at which index in the pinned area the column is inserted.\nIf unpinned, specifies at which index in the unpinned area the column is inserted." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68445, + "name": "isPinned", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the actual pin state of the column.\nIf pinning/unpinning is successful, value of " + }, + { + "kind": "code", + "text": "`isPinned`" + }, + { + "kind": "text", + "text": " will change accordingly when read in the \"-ing\" and \"-ed\" event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68441 + ] + }, + { + "title": "Properties", + "children": [ + 68446, + 68443, + 68444, + 68445 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "line": 15, + "character": 25 + } + ] + }, + { + "id": 68447, + "name": "IgrPinColumnEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments after a column's pin state is changed.\n" + }, + { + "kind": "code", + "text": "`insertAtIndex`" + }, + { + "kind": "text", + "text": "specifies at which index in the pinned/unpinned area the column was inserted.\n" + }, + { + "kind": "code", + "text": "`isPinned`" + }, + { + "kind": "text", + "text": " returns the actual pin state of the column after the operation completed." + } + ] + }, + "children": [ + { + "id": 68448, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68449, + "name": "IgrPinColumnEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68447, + "name": "IgcPinColumnEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68450, + "name": "column", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68451, + "name": "insertAtIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If pinned, specifies at which index in the pinned area the column is inserted.\nIf unpinned, specifies at which index in the unpinned area the column is inserted." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68452, + "name": "isPinned", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the actual pin state of the column.\nIf pinning/unpinning is successful, value of " + }, + { + "kind": "code", + "text": "`isPinned`" + }, + { + "kind": "text", + "text": " will change accordingly when read in the \"-ing\" and \"-ed\" event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68453, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68448 + ] + }, + { + "title": "Properties", + "children": [ + 68450, + 68451, + 68452, + 68453 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 67930, + "name": "IgrPinningConfig", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "An interface describing settings for row/column pinning position." + } + ] + }, + "children": [ + { + "id": 67931, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67932, + "name": "IgrPinningConfig", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67933, + "name": "columns", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pinning-config.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 67934, + "name": "rows", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pinning-config.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70273, + "name": "RowPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67931 + ] + }, + { + "title": "Properties", + "children": [ + 67933, + 67934 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pinning-config.d.ts", + "line": 15, + "character": 25 + } + ] + }, + { + "id": 68617, + "name": "IgrPinRowEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Event emitted when a row's pin state changes.\nThe event is cancelable" + } + ] + }, + "children": [ + { + "id": 68618, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68619, + "name": "IgrPinRowEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68626, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 47, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68623, + "name": "insertAtIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to pin the row in the pinned rows collection." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68624, + "name": "isPinned", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether or not the row is pinned or unpinned." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68625, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 41, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68622, + "name": "row", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68620, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The ID of the row, that was pinned/unpinned.\nID is either the primaryKey value or the data record instance." + } + ], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68621, + "name": "rowKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68618 + ] + }, + { + "title": "Properties", + "children": [ + 68626, + 68623, + 68624, + 68625, + 68622, + 68620, + 68621 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 68284, + "name": "IgrPivotAggregator", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface describing a IPivotAggregator class.\nUsed for specifying custom aggregator lists." + } + ] + }, + "children": [ + { + "id": 68285, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68286, + "name": "IgrPivotAggregator", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68284, + "name": "IgcPivotAggregator", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68296, + "name": "aggregator", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Aggregator function can be a custom implementation of " + }, + { + "kind": "code", + "text": "`PivotAggregation`" + }, + { + "kind": "text", + "text": ", or\nuse predefined ones from " + }, + { + "kind": "code", + "text": "`IgxPivotAggregate`" + }, + { + "kind": "text", + "text": " and its variants." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 42, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68295, + "name": "aggregatorName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Aggregation name that will be used from a list of predefined aggregations.\nIf not set will use the specified aggregator function." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70276, + "name": "PivotAggregationType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68287, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 68288, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68289, + "name": "key", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Aggregation unique key." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 68290, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68291, + "name": "label", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 68292, + "name": "label", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68293, + "name": "label", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Aggregation label to show in the UI." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 68294, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68285 + ] + }, + { + "title": "Properties", + "children": [ + 68296, + 68295 + ] + }, + { + "title": "Accessors", + "children": [ + 68287, + 68291 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 65574, + "name": "IgrPivotConfiguration", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Configuration of the pivot grid." + } + ] + }, + "children": [ + { + "id": 65575, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65576, + "name": "IgrPivotConfiguration", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65574, + "name": "IgcPivotConfiguration", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65578, + "name": "columnStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A strategy to transform the columns." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68968, + "name": "IgcPivotDimensionStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65591, + "name": "filters", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Dimensions to be displayed in the filter area." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 44, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 65592, + "name": "pivotKeys", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pivot data keys used for data generation. Can be used for custom remote scenarios where the data is pre-populated." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 48, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68978, + "name": "IgcPivotKeys", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65577, + "name": "rowStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A strategy to transform the rows." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68968, + "name": "IgcPivotDimensionStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65583, + "name": "columns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 34, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 35, + "character": 21 + } + ], + "getSignature": { + "id": 65584, + "name": "columns", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 35, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 65585, + "name": "columns", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of the columns." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 34, + "character": 15 + } + ], + "parameters": [ + { + "id": 65586, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65579, + "name": "rows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 29, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 30, + "character": 21 + } + ], + "getSignature": { + "id": 65580, + "name": "rows", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 30, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 65581, + "name": "rows", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of the rows." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 29, + "character": 15 + } + ], + "parameters": [ + { + "id": 65582, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65587, + "name": "values", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 39, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 40, + "character": 21 + } + ], + "getSignature": { + "id": 65588, + "name": "values", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 40, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 65589, + "name": "values", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of the values." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 39, + "character": 15 + } + ], + "parameters": [ + { + "id": 65590, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65575 + ] + }, + { + "title": "Properties", + "children": [ + 65578, + 65591, + 65592, + 65577 + ] + }, + { + "title": "Accessors", + "children": [ + 65583, + 65579, + 65587 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "line": 16, + "character": 25 + } + ] + }, + { + "id": 65542, + "name": "IgrPivotConfigurationChangedEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Event emitted when pivot configuration is changed." + } + ] + }, + "children": [ + { + "id": 65543, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65544, + "name": "IgrPivotConfigurationChangedEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65542, + "name": "IgcPivotConfigurationChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65545, + "name": "pivotConfiguration", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The new configuration." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration-changed-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 65574, + "name": "IgcPivotConfiguration", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65543 + ] + }, + { + "title": "Properties", + "children": [ + 65545 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration-changed-event-args.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 58541, + "name": "IgrPivotDataSelector", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI" + } + ] + }, + "children": [ + { + "id": 58558, + "name": "onColumnsExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58559, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58560, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58561, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58566, + "name": "onFiltersExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58567, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58568, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58569, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58562, + "name": "onRowsExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58563, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58564, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58565, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58570, + "name": "onValuesExpandedChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58571, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58572, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58573, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58553, + "name": "columnsExpanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the columns panel is expanded\nGet\n```typescript\n const columnsPanelState: boolean = this.dataSelector.columnsExpanded;\n```\nSet\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [columnsExpanded]=\"columnsPanelState\"></igx-pivot-data-selector>\n```\n\nTwo-way data binding:\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [(columnsExpanded)]=\"columnsPanelState\"></igx-pivot-data-selector>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58555, + "name": "filtersExpanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the filters panel is expanded\nGet\n```typescript\n const filtersPanelState: boolean = this.dataSelector.filtersExpanded;\n```\nSet\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [filtersExpanded]=\"filtersPanelState\"></igx-pivot-data-selector>\n```\n\nTwo-way data binding:\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [(filtersExpanded)]=\"filtersPanelState\"></igx-pivot-data-selector>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58557, + "name": "grid", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 58575, + "name": "IgcPivotGridComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58554, + "name": "rowsExpanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the rows panel is expanded\nGet\n```typescript\n const rowsPanelState: boolean = this.dataSelector.rowsExpanded;\n```\nSet\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [rowsExpanded]=\"rowsPanelState\"></igx-pivot-data-selector>\n```\n\nTwo-way data binding:\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [(rowsExpanded)]=\"rowsPanelState\"></igx-pivot-data-selector>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58556, + "name": "valuesExpanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/sets whether the values panel is expanded\nGet\n```typescript\n const valuesPanelState: boolean = this.dataSelector.valuesExpanded;\n```\nSet\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [valuesExpanded]=\"valuesPanelState\"></igx-pivot-data-selector>\n```\n\nTwo-way data binding:\n```html\n<igx-pivot-data-selector [grid]=\"grid1\" [(valuesExpanded)]=\"valuesPanelState\"></igx-pivot-data-selector>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 58553, + 58555, + 58557, + 58554, + 58556 + ] + }, + { + "title": "Set Signatures", + "children": [ + 58558, + 58566, + 58562, + 58570 + ] + } + ], + "categories": [ + { + "title": "Events", + "children": [ + 58558, + 58566, + 58562, + 58570 + ] + }, + { + "title": "Properties", + "children": [ + 58553, + 58555, + 58557, + 58554, + 58556 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/pivot-data-selector.ts", + "line": 14, + "character": 13 + }, + { + "fileName": "src/grids/pivot-data-selector.ts", + "line": 36, + "character": 12 + } + ], + "signatures": [ + { + "id": 58545, + "name": "IgrPivotDataSelector", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 65306, + "name": "IgrPivotDateDimension", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Configuration of a pivot dimension." + } + ] + }, + "children": [ + { + "id": 65307, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 86, + "character": 4 + } + ], + "signatures": [ + { + "id": 65308, + "name": "IgrPivotDateDimension", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 86, + "character": 4 + } + ], + "parameters": [ + { + "id": 65309, + "name": "inBaseDimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65310, + "name": "inOptions", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 65523, + "name": "IgcPivotDateDimensionOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "reference", + "target": 65306, + "name": "IgcPivotDateDimension", + "package": "igniteui-webcomponents-grids" + }, + "overwrites": { + "type": "reference", + "target": 62013, + "name": "IgcPivotDimension.constructor" + } + } + ], + "overwrites": { + "type": "reference", + "target": 62012, + "name": "IgcPivotDimension.constructor" + } + }, + { + "id": 65329, + "name": "childLevel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allows defining a hierarchy when multiple sub groups need to be extracted from single member." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 62014, + "name": "IgcPivotDimension.childLevel" + } + }, + { + "id": 65315, + "name": "dataType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets data type" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 53, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70242, + "name": "GridColumnDataType", + "package": "igniteui-webcomponents-grids" + }, + "overwrites": { + "type": "reference", + "target": 62028, + "name": "IgcPivotDimension.dataType" + } + }, + { + "id": 65328, + "name": "displayName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Display name to show instead of the field name of this value. *" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 84, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "overwrites": { + "type": "reference", + "target": 62020, + "name": "IgcPivotDimension.displayName" + } + }, + { + "id": 65335, + "name": "filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A predefined or defined via the " + }, + { + "kind": "code", + "text": "`igxPivotSelector`" + }, + { + "kind": "text", + "text": " filter expression tree for the current dimension to be applied in the filter pipe." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 48, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 62025, + "name": "IgcPivotDimension.filter" + } + }, + { + "id": 65340, + "name": "horizontalSummary", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 75, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 62031, + "name": "IgcPivotDimension.horizontalSummary" + } + }, + { + "id": 65339, + "name": "level", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Level of the dimension." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 72, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": 62030, + "name": "IgcPivotDimension.level" + } + }, + { + "id": 65334, + "name": "memberFunction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Function that extracts the value" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 62019, + "name": "IgcPivotDimension.memberFunction" + } + }, + { + "id": 65336, + "name": "sortable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enable/disable sorting for a particular dimension. True by default." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 52, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": 62026, + "name": "IgcPivotDimension.sortable" + } + }, + { + "id": 65337, + "name": "sortDirection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 58, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 62027, + "name": "IgcPivotDimension.sortDirection" + } + }, + { + "id": 65338, + "name": "width", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The width of the dimension cells to be rendered.Can be pixel, % or \"auto\"." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 68, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": 62029, + "name": "IgcPivotDimension.width" + } + }, + { + "id": 65320, + "name": "baseDimension", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 72, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 73, + "character": 21 + } + ], + "getSignature": { + "id": 65321, + "name": "baseDimension", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 73, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 65322, + "name": "baseDimension", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values.\nHaving base dimension set is required in order for the Date Dimensions to show." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 72, + "character": 15 + } + ], + "parameters": [ + { + "id": 65323, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65311, + "name": "enabled", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 45, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 46, + "character": 21 + } + ], + "getSignature": { + "id": 65312, + "name": "enabled", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables a particular dimension from pivot structure." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 46, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "overwrites": { + "type": "reference", + "target": -1, + "name": "IgcPivotDimension.enabled" + } + }, + "setSignature": { + "id": 65313, + "name": "enabled", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables a particular dimension from pivot structure." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 45, + "character": 15 + } + ], + "parameters": [ + { + "id": 65314, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "overwrites": { + "type": "reference", + "target": -1, + "name": "IgcPivotDimension.enabled" + } + }, + "overwrites": { + "type": "reference", + "target": 62021, + "name": "IgcPivotDimension.enabled" + } + }, + { + "id": 65330, + "name": "memberName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 25, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 26, + "character": 21 + } + ], + "getSignature": { + "id": 65331, + "name": "memberName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 26, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcPivotDimension.memberName" + } + }, + "setSignature": { + "id": 65332, + "name": "memberName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unique member to extract related data field value or the result of the memberFunction." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 25, + "character": 15 + } + ], + "parameters": [ + { + "id": 65333, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcPivotDimension.memberName" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 62015, + "name": "IgcPivotDimension.memberName" + } + }, + { + "id": 65324, + "name": "options", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 80, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 81, + "character": 21 + } + ], + "getSignature": { + "id": 65325, + "name": "options", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 81, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 65523, + "name": "IgcPivotDateDimensionOptions", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 65326, + "name": "options", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the options for the predefined date dimensions whether to show quarter, years and etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 80, + "character": 15 + } + ], + "parameters": [ + { + "id": 65327, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65523, + "name": "IgcPivotDateDimensionOptions", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65316, + "name": "resourceStrings", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 63, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 64, + "character": 21 + } + ], + "getSignature": { + "id": 65317, + "name": "resourceStrings", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 64, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 65318, + "name": "resourceStrings", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the resource strings." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default it uses EN resources." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 63, + "character": 15 + } + ], + "parameters": [ + { + "id": 65319, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65307 + ] + }, + { + "title": "Properties", + "children": [ + 65329, + 65315, + 65328, + 65335, + 65340, + 65339, + 65334, + 65336, + 65337, + 65338 + ] + }, + { + "title": "Accessors", + "children": [ + 65320, + 65311, + 65330, + 65324, + 65316 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "line": 40, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 65523, + "name": "IgrPivotDateDimensionOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65524, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65525, + "name": "IgrPivotDateDimensionOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65523, + "name": "IgcPivotDateDimensionOptions", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65530, + "name": "fullDate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enabled/Disables dimensions for the full date provided" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65529, + "name": "months", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables dimensions per month from provided periods." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "line": 25, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65528, + "name": "quarters", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65526, + "name": "total", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables total value of all periods." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65527, + "name": "years", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables dimensions per year from provided periods." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65524 + ] + }, + { + "title": "Properties", + "children": [ + 65530, + 65529, + 65528, + 65526, + 65527 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 62011, + "name": "IgrPivotDimension", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Configuration of a pivot dimension." + } + ] + }, + "children": [ + { + "id": 62012, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 62013, + "name": "IgrPivotDimension", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62014, + "name": "childLevel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allows defining a hierarchy when multiple sub groups need to be extracted from single member." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62028, + "name": "dataType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dataType of the related data field." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 64, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70242, + "name": "GridColumnDataType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62020, + "name": "displayName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Display name to show instead of the field name of this value. *" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 37, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62025, + "name": "filter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A predefined or defined via the " + }, + { + "kind": "code", + "text": "`igxPivotSelector`" + }, + { + "kind": "text", + "text": " filter expression tree for the current dimension to be applied in the filter pipe." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 48, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62031, + "name": "horizontalSummary", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 75, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62030, + "name": "level", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Level of the dimension." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 72, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 62019, + "name": "memberFunction", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Function that extracts the value" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62026, + "name": "sortable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enable/disable sorting for a particular dimension. True by default." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 52, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 62027, + "name": "sortDirection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 58, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62029, + "name": "width", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The width of the dimension cells to be rendered.Can be pixel, % or \"auto\"." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 68, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62021, + "name": "enabled", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 41, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 42, + "character": 21 + } + ], + "getSignature": { + "id": 62022, + "name": "enabled", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 42, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62023, + "name": "enabled", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables a particular dimension from pivot structure." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 41, + "character": 15 + } + ], + "parameters": [ + { + "id": 62024, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62015, + "name": "memberName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 25, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 26, + "character": 21 + } + ], + "getSignature": { + "id": 62016, + "name": "memberName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 26, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62017, + "name": "memberName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unique member to extract related data field value or the result of the memberFunction." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 25, + "character": 15 + } + ], + "parameters": [ + { + "id": 62018, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 62012 + ] + }, + { + "title": "Properties", + "children": [ + 62014, + 62028, + 62020, + 62025, + 62031, + 62030, + 62019, + 62026, + 62027, + 62029 + ] + }, + { + "title": "Accessors", + "children": [ + 62021, + 62015 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "line": 16, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 65306, + "name": "IgrPivotDateDimension" + } + ] + }, + { + "id": 68968, + "name": "IgrPivotDimensionStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface describing Pivot data processing for dimensions.\nShould contain a process method and return records hierarchy based on the provided dimensions." + } + ] + }, + "children": [ + { + "id": 68969, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68970, + "name": "IgrPivotDimensionStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68968, + "name": "IgcPivotDimensionStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68971, + "name": "process", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "line": 21, + "character": 11 + } + ], + "signatures": [ + { + "id": 68972, + "name": "process", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "line": 21, + "character": 11 + } + ], + "parameters": [ + { + "id": 68973, + "name": "collection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68974, + "name": "dimensions", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 68975, + "name": "values", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 68976, + "name": "cloneStrategy", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68977, + "name": "pivotKeys", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 68978, + "name": "IgcPivotKeys", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68969 + ] + }, + { + "title": "Methods", + "children": [ + 68971 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "line": 16, + "character": 25 + } + ] + }, + { + "id": 58575, + "name": "IgrPivotGrid", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pivot Grid provides a way to present and manipulate data in a pivot table view." + } + ] + }, + "children": [ + { + "id": 58998, + "name": "onActiveNodeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58999, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59000, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59001, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68627, + "name": "IgcActiveNodeChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58814, + "name": "onAdvancedFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58815, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58816, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58817, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58822, + "name": "onCellClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58823, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58824, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58825, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58866, + "name": "onCellEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58867, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58868, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58869, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58870, + "name": "onCellEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58871, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58872, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58873, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58858, + "name": "onCellEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58859, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58860, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58861, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58862, + "name": "onCellEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58863, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58864, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58865, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58890, + "name": "onColumnInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58891, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58892, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58893, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58954, + "name": "onColumnMoving", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58955, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58956, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58957, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68563, + "name": "IgcColumnMovingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58958, + "name": "onColumnMovingEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58959, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58960, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58961, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68569, + "name": "IgcColumnMovingEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58950, + "name": "onColumnMovingStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58951, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58952, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58953, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68558, + "name": "IgcColumnMovingStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58850, + "name": "onColumnPin", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58851, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58852, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58853, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68440, + "name": "IgcPinColumnCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58854, + "name": "onColumnPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58855, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58856, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58857, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68447, + "name": "IgcPinColumnEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58930, + "name": "onColumnResized", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58931, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58932, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58933, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68533, + "name": "IgcColumnResizeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58894, + "name": "onColumnsAutogenerated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58895, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58896, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58897, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "IgcColumnsAutoGeneratedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58846, + "name": "onColumnSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58847, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58848, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58849, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68431, + "name": "IgcColumnSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58946, + "name": "onColumnVisibilityChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58947, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58948, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58949, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58942, + "name": "onColumnVisibilityChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58943, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58944, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58945, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68546, + "name": "IgcColumnVisibilityChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58934, + "name": "onContextMenu", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58935, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58936, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58937, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68540, + "name": "IgcGridContextMenuEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59022, + "name": "onDataChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59023, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59024, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59025, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59018, + "name": "onDataChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59019, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59020, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59021, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58794, + "name": "onDimensionInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58795, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58796, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58797, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58786, + "name": "onDimensionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58787, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58788, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58789, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 65531, + "name": "IgcDimensionsChange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58802, + "name": "onDimensionsSortingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58803, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58804, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58805, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58938, + "name": "onDoubleClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58939, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58940, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58941, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58978, + "name": "onExpansionStatesChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58979, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58980, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58981, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58906, + "name": "onFiltering", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58907, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58908, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58909, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68503, + "name": "IgcFilteringEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58910, + "name": "onFilteringDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58911, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58912, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58913, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58810, + "name": "onFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58811, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58812, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58813, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58830, + "name": "onFormGroupCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58831, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58832, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58833, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68412, + "name": "IgcGridFormGroupCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58974, + "name": "onGridCopy", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58975, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58976, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58977, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68598, + "name": "IgcGridClipboardEvent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58962, + "name": "onGridKeydown", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58963, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58964, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58965, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68576, + "name": "IgcGridKeydownEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58818, + "name": "onGridScroll", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58819, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58820, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58821, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68393, + "name": "IgcGridScrollEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58790, + "name": "onPivotConfigurationChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58791, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58792, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58793, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 65542, + "name": "IgcPivotConfigurationChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59010, + "name": "onRangeSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59011, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59012, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59013, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59014, + "name": "onRendered", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59015, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59016, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59017, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58926, + "name": "onRowAdd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58927, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58928, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58929, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58914, + "name": "onRowAdded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58915, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58916, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58917, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58826, + "name": "onRowClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58827, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58828, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58829, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68406, + "name": "IgcGridRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58922, + "name": "onRowDelete", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58923, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58924, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58925, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58918, + "name": "onRowDeleted", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58919, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58920, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58921, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58970, + "name": "onRowDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58971, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58972, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58973, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68591, + "name": "IgcRowDragEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58966, + "name": "onRowDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58967, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58968, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58969, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68584, + "name": "IgcRowDragStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58878, + "name": "onRowEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58879, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58880, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58881, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58882, + "name": "onRowEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58883, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58884, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58885, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58874, + "name": "onRowEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58875, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58876, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58877, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58886, + "name": "onRowEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58887, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58888, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58889, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58994, + "name": "onRowPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58995, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58996, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58997, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58990, + "name": "onRowPinning", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58991, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58992, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58993, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58842, + "name": "onRowSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58843, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58844, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58845, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68421, + "name": "IgcRowSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58986, + "name": "onRowToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58987, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58988, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58989, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68609, + "name": "IgcRowToggleEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58838, + "name": "onSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58839, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58840, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58841, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58982, + "name": "onSelectedRowsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58983, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58984, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58985, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58898, + "name": "onSorting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58899, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58900, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58901, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68496, + "name": "IgcSortingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58902, + "name": "onSortingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58903, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58904, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58905, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59002, + "name": "onSortingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59003, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59004, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59005, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59006, + "name": "onToolbarExporting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59007, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59008, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59009, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68635, + "name": "IgcGridToolbarExportEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58834, + "name": "onValidationStatusChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58835, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58836, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58837, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68416, + "name": "IgcGridValidationStatusEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58798, + "name": "onValueInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58799, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58800, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58801, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58806, + "name": "onValuesChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58807, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58808, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58809, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 65560, + "name": "IgcValuesChange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58668, + "name": "autoGenerateConfig", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether to auto-generate the pivot configuration based on the provided data." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58674, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the array of data that populates the component.\n```html\n<igx-pivot-grid [data]=\"Data\"></igx-pivot-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 58671, + "name": "defaultExpandState", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the default expand state for all rows." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58675, + "name": "emptyPivotGridTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when pivot grid is empty." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58667, + "name": "pivotConfiguration", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the pivot configuration with all related dimensions and values." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 65574, + "name": "IgcPivotConfiguration", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58669, + "name": "pivotUI", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 65593, + "name": "IgcPivotUISettings", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58666, + "name": "rowDimensionHeaderTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 62052, + "name": "IgcColumnTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58670, + "name": "superCompactMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables a super compact theme for the component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58665, + "name": "valueChipTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template for the value chips." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 65567, + "name": "IgcPivotGridValueTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58673, + "name": "allDimensions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the full list of dimensions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 58664, + "name": "dimensionsSortingExpressions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the sorting expressions generated for the dimensions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 58672, + "name": "selectedRows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 58702, + "name": "autoSizeRowDimension", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Auto-sizes row dimension cells." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58703, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 244, + "character": 11 + } + ], + "signatures": [ + { + "id": 58704, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Auto-sizes row dimension cells." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Only sizes based on the dimension cells in view." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.autoSizeRowDimension(dimension);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 244, + "character": 11 + } + ], + "parameters": [ + { + "id": 58705, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row dimension to size." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58706, + "name": "autoSizeRowDimension", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Auto-sizes row dimension cells." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Only sizes based on the dimension cells in view." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.autoSizeRowDimension(dimension);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58707, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row dimension to size." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58776, + "name": "filterDimension", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single `IPivotDimension`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58777, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 393, + "character": 11 + } + ], + "signatures": [ + { + "id": 58778, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single " + }, + { + "kind": "code", + "text": "`IPivotDimension`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic filter() {\n const set = new Set();\n set.add('Value 1');\n set.add('Value 2');\n this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in'));\n}\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 393, + "character": 11 + } + ], + "parameters": [ + { + "id": 58779, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58780, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58781, + "name": "conditionOrExpressionTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58782, + "name": "filterDimension", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single " + }, + { + "kind": "code", + "text": "`IPivotDimension`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic filter() {\n const set = new Set();\n set.add('Value 1');\n set.add('Value 2');\n this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in'));\n}\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58783, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58784, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58785, + "name": "conditionOrExpressionTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58688, + "name": "getColumnGroupExpandState", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58689, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 225, + "character": 11 + } + ], + "signatures": [ + { + "id": 58690, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 225, + "character": 11 + } + ], + "parameters": [ + { + "id": 58691, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58692, + "name": "getColumnGroupExpandState", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 58693, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58708, + "name": "insertDimensionAt", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Inserts dimension in target collection by type at specified index or at the collection's end." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58709, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 260, + "character": 11 + } + ], + "signatures": [ + { + "id": 58710, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Inserts dimension in target collection by type at specified index or at the collection's end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 260, + "character": 11 + } + ], + "parameters": [ + { + "id": 58711, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension that will be added." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58712, + "name": "targetCollectionType", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The target collection type to add to. Can be Row, Column or Filter." + } + ] + }, + "type": { + "type": "reference", + "target": 70243, + "name": "PivotDimensionType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58713, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58714, + "name": "insertDimensionAt", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Inserts dimension in target collection by type at specified index or at the collection's end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58715, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension that will be added." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58716, + "name": "targetCollectionType", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The target collection type to add to. Can be Row, Column or Filter." + } + ] + }, + "type": { + "type": "reference", + "target": 70243, + "name": "PivotDimensionType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58717, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58740, + "name": "insertValueAt", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Inserts value at specified index or at the end." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58741, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 320, + "character": 11 + } + ], + "signatures": [ + { + "id": 58742, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Inserts value at specified index or at the end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.insertValueAt(value, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 320, + "character": 11 + } + ], + "parameters": [ + { + "id": 58743, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value definition that will be added." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58744, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58745, + "name": "insertValueAt", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Inserts value at specified index or at the end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.insertValueAt(value, 1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58746, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value definition that will be added." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58747, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58718, + "name": "moveDimension", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58719, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 276, + "character": 11 + } + ], + "signatures": [ + { + "id": 58720, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.moveDimension(dimension, PivotDimensionType.Row, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 276, + "character": 11 + } + ], + "parameters": [ + { + "id": 58721, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension that will be moved." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58722, + "name": "targetCollectionType", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The target collection type to move it to. Can be Row, Column or Filter." + } + ] + }, + "type": { + "type": "reference", + "target": 70243, + "name": "PivotDimensionType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58723, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58724, + "name": "moveDimension", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.moveDimension(dimension, PivotDimensionType.Row, 1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58725, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension that will be moved." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58726, + "name": "targetCollectionType", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The target collection type to move it to. Can be Row, Column or Filter." + } + ] + }, + "type": { + "type": "reference", + "target": 70243, + "name": "PivotDimensionType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58727, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58748, + "name": "moveValue", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Move value from its currently at specified index or at the end." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58749, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 335, + "character": 11 + } + ], + "signatures": [ + { + "id": 58750, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Move value from its currently at specified index or at the end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.moveValue(value, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 335, + "character": 11 + } + ], + "parameters": [ + { + "id": 58751, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value that will be moved." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58752, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58753, + "name": "moveValue", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Move value from its currently at specified index or at the end." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.moveValue(value, 1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58754, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value that will be moved." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58755, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index in the collection at which to add.\nThis parameter is optional. If not set it will add it to the end of the collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58676, + "name": "notifyDimensionChange", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Notifies for dimension change." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58677, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 217, + "character": 11 + } + ], + "signatures": [ + { + "id": 58678, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Notifies for dimension change." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 217, + "character": 11 + } + ], + "parameters": [ + { + "id": 58679, + "name": "regenerateColumns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58680, + "name": "notifyDimensionChange", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Notifies for dimension change." + } + ] + }, + "parameters": [ + { + "id": 58681, + "name": "regenerateColumns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58728, + "name": "removeDimension", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes dimension from its currently collection." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58729, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 291, + "character": 11 + } + ], + "signatures": [ + { + "id": 58730, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes dimension from its currently collection." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "This is different than toggleDimension that enabled/disables the dimension.\nThis completely removes the specified dimension from the collection." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.removeDimension(dimension);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 291, + "character": 11 + } + ], + "parameters": [ + { + "id": 58731, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension to be removed." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58732, + "name": "removeDimension", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes dimension from its currently collection." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "This is different than toggleDimension that enabled/disables the dimension.\nThis completely removes the specified dimension from the collection." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.removeDimension(dimension);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58733, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension to be removed." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58756, + "name": "removeValue", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes value from collection." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58757, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 350, + "character": 11 + } + ], + "signatures": [ + { + "id": 58758, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes value from collection." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "This is different than toggleValue that enabled/disables the value.\nThis completely removes the specified value from the collection." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.removeValue(dimension);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 350, + "character": 11 + } + ], + "parameters": [ + { + "id": 58759, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value to be removed." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58760, + "name": "removeValue", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes value from collection." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "This is different than toggleValue that enabled/disables the value.\nThis completely removes the specified value from the collection." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.removeValue(dimension);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58761, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value to be removed." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58768, + "name": "sortDimension", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort the dimension and its children in the provided direction." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58769, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 376, + "character": 11 + } + ], + "signatures": [ + { + "id": 58770, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort the dimension and its children in the provided direction." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.sortDimension(dimension, SortingDirection.Asc);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 376, + "character": 11 + } + ], + "parameters": [ + { + "id": 58771, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58772, + "name": "sortDirection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58773, + "name": "sortDimension", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort the dimension and its children in the provided direction." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.sortDimension(dimension, SortingDirection.Asc);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58774, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58775, + "name": "sortDirection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58682, + "name": "toggleColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58683, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 221, + "character": 11 + } + ], + "signatures": [ + { + "id": 58684, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 221, + "character": 11 + } + ], + "parameters": [ + { + "id": 58685, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58686, + "name": "toggleColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 58687, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58734, + "name": "toggleDimension", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the dimension's enabled state on or off." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58735, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 305, + "character": 11 + } + ], + "signatures": [ + { + "id": 58736, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the dimension's enabled state on or off." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The dimension remains in its current collection. This just changes its enabled state." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleDimension(dimension);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 305, + "character": 11 + } + ], + "parameters": [ + { + "id": 58737, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension to be toggled." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58738, + "name": "toggleDimension", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the dimension's enabled state on or off." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The dimension remains in its current collection. This just changes its enabled state." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleDimension(dimension);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58739, + "name": "dimension", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The dimension to be toggled." + } + ] + }, + "type": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58694, + "name": "toggleRowGroup", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58695, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 229, + "character": 11 + } + ], + "signatures": [ + { + "id": 58696, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 229, + "character": 11 + } + ], + "parameters": [ + { + "id": 58697, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58698, + "name": "newState", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58699, + "name": "toggleRowGroup", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 58700, + "name": "col", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 58701, + "name": "newState", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58762, + "name": "toggleValue", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the value's enabled state on or off." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58763, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 364, + "character": 11 + } + ], + "signatures": [ + { + "id": 58764, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the value's enabled state on or off." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The value remains in its current collection. This just changes its enabled state." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleValue(value);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "line": 364, + "character": 11 + } + ], + "parameters": [ + { + "id": 58765, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value to be toggled." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58766, + "name": "toggleValue", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the value's enabled state on or off." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The value remains in its current collection. This just changes its enabled state." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleValue(value);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58767, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The value to be toggled." + } + ] + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 58668, + 58674, + 58671, + 58675, + 58667, + 58669, + 58666, + 58670, + 58665 + ] + }, + { + "title": "Accessors", + "children": [ + 58673, + 58664, + 58672 + ] + }, + { + "title": "Methods", + "children": [ + 58702, + 58776, + 58688, + 58708, + 58740, + 58718, + 58748, + 58676, + 58728, + 58756, + 58768, + 58682, + 58734, + 58694, + 58762 + ] + }, + { + "title": "Set Signatures", + "children": [ + 58998, + 58814, + 58822, + 58866, + 58870, + 58858, + 58862, + 58890, + 58954, + 58958, + 58950, + 58850, + 58854, + 58930, + 58894, + 58846, + 58946, + 58942, + 58934, + 59022, + 59018, + 58794, + 58786, + 58802, + 58938, + 58978, + 58906, + 58910, + 58810, + 58830, + 58974, + 58962, + 58818, + 58790, + 59010, + 59014, + 58926, + 58914, + 58826, + 58922, + 58918, + 58970, + 58966, + 58878, + 58882, + 58874, + 58886, + 58994, + 58990, + 58842, + 58986, + 58838, + 58982, + 58898, + 58902, + 59002, + 59006, + 58834, + 58798, + 58806 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 58673, + 58664, + 58672 + ] + }, + { + "title": "Events", + "children": [ + 58998, + 58814, + 58822, + 58866, + 58870, + 58858, + 58862, + 58890, + 58954, + 58958, + 58950, + 58850, + 58854, + 58930, + 58894, + 58846, + 58946, + 58942, + 58934, + 59022, + 59018, + 58794, + 58786, + 58802, + 58938, + 58978, + 58906, + 58910, + 58810, + 58830, + 58974, + 58962, + 58818, + 58790, + 59010, + 59014, + 58926, + 58914, + 58826, + 58922, + 58918, + 58970, + 58966, + 58878, + 58882, + 58874, + 58886, + 58994, + 58990, + 58842, + 58986, + 58838, + 58982, + 58898, + 58902, + 59002, + 59006, + 58834, + 58798, + 58806 + ] + }, + { + "title": "Methods", + "children": [ + 58702, + 58776, + 58688, + 58708, + 58740, + 58718, + 58748, + 58676, + 58728, + 58756, + 58768, + 58682, + 58734, + 58694, + 58762 + ] + }, + { + "title": "Properties", + "children": [ + 58668, + 58674, + 58671, + 58675, + 58667, + 58669, + 58666, + 58670, + 58665 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/pivot-grid.ts", + "line": 70, + "character": 13 + }, + { + "fileName": "src/grids/pivot-grid.ts", + "line": 280, + "character": 12 + } + ], + "signatures": [ + { + "id": 58579, + "name": "IgrPivotGrid", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68308, + "name": "IgrPivotGridColumn", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface describing the Pivot column data.\n Contains information on the related column dimensions and their values." + } + ] + }, + "children": [ + { + "id": 68309, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68310, + "name": "IgrPivotGridColumn", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68308, + "name": "IgcPivotGridColumn", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68315, + "name": "dimensions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 22, + "character": 19 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 68316, + "name": "dimensions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 68317, + "name": "dimensions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "List of dimensions associated with the column.*" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 22, + "character": 19 + } + ], + "parameters": [ + { + "id": 68318, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68311, + "name": "field", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 17, + "character": 19 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 68312, + "name": "field", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68313, + "name": "field", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 17, + "character": 19 + } + ], + "parameters": [ + { + "id": 68314, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68319, + "name": "value", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 26, + "character": 19 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 27, + "character": 21 + } + ], + "getSignature": { + "id": 68320, + "name": "value", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 27, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68321, + "name": "value", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 26, + "character": 19 + } + ], + "parameters": [ + { + "id": 68322, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68309 + ] + }, + { + "title": "Accessors", + "children": [ + 68315, + 68311, + 68319 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "line": 13, + "character": 25 + } + ] + }, + { + "id": 68297, + "name": "IgrPivotGridRecord", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68298, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68299, + "name": "IgrPivotGridRecord", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68297, + "name": "IgcPivotGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68307, + "name": "dataIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the record in the total view" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68301, + "name": "level", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Record level*" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 18, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 68300, + "name": "records", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "List of original data records associated with the current pivoted data. *" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68306, + "name": "totalRecordDimensionName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If set, it specifies the name of the dimension, that has total record enabled." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 68302, + "name": "dimensions", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 68303, + "name": "dimensions", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 68304, + "name": "dimensions", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "List of dimensions associated with the record.*" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 68305, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62011, + "name": "IgcPivotDimension", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68298 + ] + }, + { + "title": "Properties", + "children": [ + 68307, + 68301, + 68300, + 68306 + ] + }, + { + "title": "Accessors", + "children": [ + 68302 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 65567, + "name": "IgrPivotGridValueTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65568, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65569, + "name": "IgrPivotGridValueTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65567, + "name": "IgcPivotGridValueTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65570, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 65571, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 65572, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 65573, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65568 + ] + }, + { + "title": "Accessors", + "children": [ + 65570 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68978, + "name": "IgrPivotKeys", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface describing the Pivot data keys used for data generation.\n Can be used for custom remote scenarios where the data is pre-populated." + } + ] + }, + "children": [ + { + "id": 68979, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68980, + "name": "IgrPivotKeys", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68978, + "name": "IgcPivotKeys", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68989, + "name": "aggregations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 27, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 28, + "character": 21 + } + ], + "getSignature": { + "id": 68990, + "name": "aggregations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 28, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68991, + "name": "aggregations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Field that stores aggregation values." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 27, + "character": 15 + } + ], + "parameters": [ + { + "id": 68992, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68981, + "name": "children", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 68982, + "name": "children", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68983, + "name": "children", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Field that stores children for hierarchy building." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 68984, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68997, + "name": "columnDimensionSeparator", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 37, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 38, + "character": 21 + } + ], + "getSignature": { + "id": 68998, + "name": "columnDimensionSeparator", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 38, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68999, + "name": "columnDimensionSeparator", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Separator used when generating the unique column field values." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 37, + "character": 15 + } + ], + "parameters": [ + { + "id": 69000, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68993, + "name": "level", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 32, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 33, + "character": 21 + } + ], + "getSignature": { + "id": 68994, + "name": "level", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 33, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68995, + "name": "level", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Field that stores dimension level based on its hierarchy." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 32, + "character": 15 + } + ], + "parameters": [ + { + "id": 68996, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68985, + "name": "records", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 68986, + "name": "records", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 68987, + "name": "records", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Field that stores reference to the original data records." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 68988, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 69001, + "name": "rowDimensionSeparator", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 42, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 43, + "character": 21 + } + ], + "getSignature": { + "id": 69002, + "name": "rowDimensionSeparator", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 43, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 69003, + "name": "rowDimensionSeparator", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Separator used when generating the unique row field values." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 42, + "character": 15 + } + ], + "parameters": [ + { + "id": 69004, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68979 + ] + }, + { + "title": "Accessors", + "children": [ + 68989, + 68981, + 68997, + 68993, + 68985, + 69001 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 65593, + "name": "IgrPivotUISettings", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65594, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65595, + "name": "IgrPivotUISettings", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65593, + "name": "IgcPivotUISettings", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65599, + "name": "horizontalSummariesPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70272, + "name": "PivotSummaryPosition", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65598, + "name": "rowLayout", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70271, + "name": "PivotRowLayoutType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65596, + "name": "showConfiguration", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65597, + "name": "showRowHeaders", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65594 + ] + }, + { + "title": "Properties", + "children": [ + 65599, + 65598, + 65596, + 65597 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 62032, + "name": "IgrPivotValue", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Configuration of a pivot value aggregation." + } + ] + }, + "children": [ + { + "id": 62033, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 62034, + "name": "IgrPivotValue", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 62044, + "name": "aggregateList", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "List of aggregates to show in aggregate drop-down." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 37, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68284, + "name": "IgcPivotAggregator", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 62050, + "name": "dataType", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables a data type specific template of the cells" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 50, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70242, + "name": "GridColumnDataType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 62039, + "name": "displayName", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Display name to show instead of member for the column header of this value. *" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 62051, + "name": "formatter", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Applies display format to cell values." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 57, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62049, + "name": "styles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Allow conditionally styling of the IgxPivotGrid cells." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 46, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 62040, + "name": "aggregate", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 30, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 31, + "character": 21 + } + ], + "getSignature": { + "id": 62041, + "name": "aggregate", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 31, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 68284, + "name": "IgcPivotAggregator", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 62042, + "name": "aggregate", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Active aggregator definition with key, label and aggregator." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 30, + "character": 15 + } + ], + "parameters": [ + { + "id": 62043, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68284, + "name": "IgcPivotAggregator", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62045, + "name": "enabled", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 41, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 42, + "character": 21 + } + ], + "getSignature": { + "id": 62046, + "name": "enabled", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 42, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 62047, + "name": "enabled", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables/Disables a particular value from pivot aggregation." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 41, + "character": 15 + } + ], + "parameters": [ + { + "id": 62048, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 62035, + "name": "member", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 62036, + "name": "member", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 62037, + "name": "member", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unique member to extract related data field value for aggregations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 62038, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 62033 + ] + }, + { + "title": "Properties", + "children": [ + 62044, + 62050, + 62039, + 62051, + 62049 + ] + }, + { + "title": "Accessors", + "children": [ + 62040, + 62045, + 62035 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "line": 14, + "character": 25 + } + ] + }, + { + "id": 70205, + "name": "IgrPositionSettings", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70206, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70207, + "name": "IgrPositionSettings", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70205, + "name": "IgcPositionSettings", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70208, + "name": "horizontalDirection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Direction in which the component should show" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70280, + "name": "HorizontalAlignment", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 70210, + "name": "horizontalStartPoint", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Target's starting point" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70280, + "name": "HorizontalAlignment", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 70212, + "name": "minSize", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The size up to which element may shrink when shown in elastic position strategy" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70231, + "name": "IgcSize", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 70213, + "name": "offset", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The offset of the element from the target in pixels" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 36, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70209, + "name": "verticalDirection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Direction in which the component should show" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70284, + "name": "VerticalAlignment", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 70211, + "name": "verticalStartPoint", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Target's starting point" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 70284, + "name": "VerticalAlignment", + "package": "igniteui-webcomponents-grids" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70206 + ] + }, + { + "title": "Properties", + "children": [ + 70208, + 70210, + 70212, + 70213, + 70209, + 70211 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 69005, + "name": "IgrPositionStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-position)\nPosition strategies determine where to display the component in the provided IgxOverlayService." + } + ] + }, + "children": [ + { + "id": 69006, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 69007, + "name": "IgrPositionStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 69005, + "name": "IgcPositionStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 69008, + "name": "settings", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 20, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 21, + "character": 21 + } + ], + "getSignature": { + "id": 69009, + "name": "settings", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 21, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70205, + "name": "IgcPositionSettings", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 69010, + "name": "settings", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "PositionSettings to use when position the component in the overlay" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 20, + "character": 15 + } + ], + "parameters": [ + { + "id": 69011, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70205, + "name": "IgcPositionSettings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 69012, + "name": "clone", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 31, + "character": 12 + } + ], + "signatures": [ + { + "id": 69013, + "name": "clone", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Clone the strategy instance.\n" + }, + { + "kind": "code", + "text": "```typescript\nsettings.positionStrategy.clone();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 31, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 69005, + "name": "IgcPositionStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 69006 + ] + }, + { + "title": "Accessors", + "children": [ + 69008 + ] + }, + { + "title": "Methods", + "children": [ + 69012 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "line": 13, + "character": 25 + } + ] + }, + { + "id": 68517, + "name": "IgrRowDataCancelableEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68518, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68519, + "name": "IgrRowDataCancelableEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68520, + "name": "cellID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "reflection", + "declaration": { + "id": 68521, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68523, + "name": "columnID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 15, + "character": 34 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68522, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 15, + "character": 22 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68524, + "name": "rowIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 15, + "character": 49 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 68523, + 68522, + 68524 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 15, + "character": 20 + } + ] + } + } + }, + { + "id": 68529, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowData`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 42, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68527, + "name": "isAddRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68526, + "name": "newValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68525, + "name": "oldValue", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68528, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 36, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68531, + "name": "primaryKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the unique key, the row can be associated with.\nAvailable if " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " exists" + } + ], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 53, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68530, + "name": "rowData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 45, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68532, + "name": "rowKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 56, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68518 + ] + }, + { + "title": "Properties", + "children": [ + 68520, + 68529, + 68527, + 68526, + 68525, + 68528, + 68531, + 68530, + 68532 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68509, + "name": "IgrRowDataEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to events, that can occur for rows in a grid\nExample for events: adding, deleting, selection, transaction, etc." + } + ] + }, + "children": [ + { + "id": 68510, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68511, + "name": "IgrRowDataEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68512, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowData`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68516, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68514, + "name": "primaryKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the unique key, the row can be associated with.\nAvailable if " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " exists" + } + ], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "line": 30, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68513, + "name": "rowData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68515, + "name": "rowKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68510 + ] + }, + { + "title": "Properties", + "children": [ + 68512, + 68516, + 68514, + 68513, + 68515 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68744, + "name": "IgrRowDirective", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68745, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68746, + "name": "IgrRowDirective", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68769, + "name": "addRowUI", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 78, + "character": 15 + } + ], + "getSignature": { + "id": 68770, + "name": "addRowUI", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 78, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68773, + "name": "cells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 94, + "character": 15 + } + ], + "getSignature": { + "id": 68774, + "name": "cells", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the rendered cells in the row component.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// get the cells of the third selected row\nlet selectedRowCells = this.grid.selectedRows[2].cells;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 94, + "character": 15 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + } + }, + { + "id": 68747, + "name": "data", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 68748, + "name": "data", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 68749, + "name": "data", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The data passed to the row component.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// get the row data for the first selected row\nlet selectedRowData = this.grid.selectedRows[0].data;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 68750, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68775, + "name": "dataRowIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 98, + "character": 15 + } + ], + "getSignature": { + "id": 68776, + "name": "dataRowIndex", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 98, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 68755, + "name": "disabled", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 46, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 47, + "character": 21 + } + ], + "getSignature": { + "id": 68756, + "name": "disabled", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 47, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68757, + "name": "disabled", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether this specific row has disabled functionality for editing and row selection.\nDefault value is " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.selectedRows[0].pinned = true;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 46, + "character": 15 + } + ], + "parameters": [ + { + "id": 68758, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68765, + "name": "expanded", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 73, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 74, + "character": 21 + } + ], + "getSignature": { + "id": 68766, + "name": "expanded", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 74, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68767, + "name": "expanded", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the expanded state of the row.\n" + }, + { + "kind": "code", + "text": "```typescript\nlet isExpanded = row.expanded;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 73, + "character": 15 + } + ], + "parameters": [ + { + "id": 68768, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68763, + "name": "hasMergedCells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 63, + "character": 15 + } + ], + "getSignature": { + "id": 68764, + "name": "hasMergedCells", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 63, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + }, + { + "id": 68751, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 34, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 35, + "character": 21 + } + ], + "getSignature": { + "id": 68752, + "name": "index", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 35, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68753, + "name": "index", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the row.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// get the index of the second selected row\nlet selectedRowIndex = this.grid.selectedRows[1].index;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 34, + "character": 15 + } + ], + "parameters": [ + { + "id": 68754, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68777, + "name": "inEditMode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 103, + "character": 15 + } + ], + "getSignature": { + "id": 68778, + "name": "inEditMode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 103, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + }, + { + "id": 68779, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 117, + "character": 15 + } + ], + "getSignature": { + "id": 68780, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the ID of the row.\nA row in the grid is identified either by:\n- primaryKey data value,\n- the whole data, if the primaryKey is omitted.\n\n" + }, + { + "kind": "code", + "text": "```typescript\nlet rowID = this.grid.selectedRows[2].key;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 117, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68759, + "name": "pinned", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 58, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 59, + "character": 21 + } + ], + "getSignature": { + "id": 68760, + "name": "pinned", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 59, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 68761, + "name": "pinned", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether the row is pinned.\nDefault value is " + }, + { + "kind": "code", + "text": "`false`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.selectedRows[0].pinned = true;\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 58, + "character": 15 + } + ], + "parameters": [ + { + "id": 68762, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68771, + "name": "rowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 82, + "character": 15 + } + ], + "getSignature": { + "id": 68772, + "name": "rowHeight", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 82, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + }, + { + "id": 68793, + "name": "beginAddRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 186, + "character": 11 + } + ], + "signatures": [ + { + "id": 68794, + "name": "beginAddRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Spawns the add row UI for the specific row." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst row = this.grid1.getRowByIndex(1);\nrow.beginAddRow();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 186, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68784, + "name": "delete", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 143, + "character": 11 + } + ], + "signatures": [ + { + "id": 68785, + "name": "delete", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the specified row from the grid's data source.\nThis method emits " + }, + { + "kind": "code", + "text": "`rowDeleted`" + }, + { + "kind": "text", + "text": " event.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// delete the third selected row from the grid\nthis.grid.selectedRows[2].delete();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 143, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68786, + "name": "isCellActive", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 147, + "character": 11 + } + ], + "signatures": [ + { + "id": 68787, + "name": "isCellActive", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 147, + "character": 11 + } + ], + "parameters": [ + { + "id": 68788, + "name": "visibleColumnIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68789, + "name": "pin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 160, + "character": 11 + } + ], + "signatures": [ + { + "id": 68790, + "name": "pin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins the specified row.\nThis method emits " + }, + { + "kind": "code", + "text": "`rowPinning`" + }, + { + "kind": "text", + "text": "`rowPinned` event.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// pin the selected row from the grid\nthis.grid.selectedRows[0].pin();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 160, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68791, + "name": "unpin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 173, + "character": 11 + } + ], + "signatures": [ + { + "id": 68792, + "name": "unpin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins the specified row.\nThis method emits " + }, + { + "kind": "code", + "text": "`rowPinning`" + }, + { + "kind": "text", + "text": "`rowPinned` event.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// unpin the selected row from the grid\nthis.grid.selectedRows[0].unpin();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 173, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 68781, + "name": "update", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 130, + "character": 11 + } + ], + "signatures": [ + { + "id": 68782, + "name": "update", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the specified row object and the data source record with the passed value.\n\n" + }, + { + "kind": "code", + "text": "```typescript\n// update the second selected row's value\nlet newValue = \"Apple\";\nthis.grid.selectedRows[1].update(newValue);\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 130, + "character": 11 + } + ], + "parameters": [ + { + "id": 68783, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68745 + ] + }, + { + "title": "Accessors", + "children": [ + 68769, + 68773, + 68747, + 68775, + 68755, + 68765, + 68763, + 68751, + 68777, + 68779, + 68759, + 68771 + ] + }, + { + "title": "Methods", + "children": [ + 68793, + 68784, + 68786, + 68789, + 68791, + 68781 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 68843, + "name": "IgrGridRowComponent" + } + ] + }, + { + "id": 68591, + "name": "IgrRowDragEndEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a dragging operation is finished (when the row is dropped)" + } + ] + }, + "children": [ + { + "id": 68592, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68593, + "name": "IgrRowDragEndEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68591, + "name": "IgcRowDragEndEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68596, + "name": "animation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "code", + "text": "`animation`" + }, + { + "kind": "text", + "text": " returns whether the event is animated" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68595, + "name": "dragData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the information of the row that is being dragged." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68594, + "name": "dragDirective", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the drag directive or information associated with the drag operation" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "line": 15, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68597, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68592 + ] + }, + { + "title": "Properties", + "children": [ + 68596, + 68595, + 68594, + 68597 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 68584, + "name": "IgrRowDragStartEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Emitted when a dragging operation is starting (when the row is \"picked\")\nThe event is cancelable" + } + ] + }, + "children": [ + { + "id": 68585, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68586, + "name": "IgrRowDragStartEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68584, + "name": "IgcRowDragStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68589, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68588, + "name": "dragData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the information of the row that is being dragged." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "line": 21, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 68587, + "name": "dragDirective", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the drag directive or information associated with the drag operation" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68590, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68585 + ] + }, + { + "title": "Properties", + "children": [ + 68589, + 68588, + 68587, + 68590 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 70214, + "name": "IgrRowExportingEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "rowExporting event arguments\nthis.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => {\n// set args properties here\n})" + } + ] + }, + "children": [ + { + "id": 70215, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70216, + "name": "IgrRowExportingEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70214, + "name": "IgcRowExportingEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 70219, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Skip the exporting row when set to true" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 70220, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 70217, + "name": "rowData", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Contains the exporting row data" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 70218, + "name": "rowIndex", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Contains the exporting row index" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70215 + ] + }, + { + "title": "Properties", + "children": [ + 70219, + 70220, + 70217, + 70218 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "line": 13, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 57754, + "name": "IgrRowIsland", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Row island" + } + ] + }, + "children": [ + { + "id": 58512, + "name": "onActiveNodeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58513, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58514, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58515, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68627, + "name": "IgcActiveNodeChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58328, + "name": "onAdvancedFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58329, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58330, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58331, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58336, + "name": "onCellClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58337, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58338, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58339, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58380, + "name": "onCellEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58381, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58382, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58383, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58384, + "name": "onCellEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58385, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58386, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58387, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58372, + "name": "onCellEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58373, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58374, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58375, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58376, + "name": "onCellEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58377, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58378, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58379, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58404, + "name": "onColumnInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58405, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58406, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58407, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58468, + "name": "onColumnMoving", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58469, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58470, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58471, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68563, + "name": "IgcColumnMovingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58472, + "name": "onColumnMovingEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58473, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58474, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58475, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68569, + "name": "IgcColumnMovingEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58464, + "name": "onColumnMovingStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58465, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58466, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58467, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68558, + "name": "IgcColumnMovingStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58364, + "name": "onColumnPin", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58365, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58366, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58367, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68440, + "name": "IgcPinColumnCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58368, + "name": "onColumnPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58369, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58370, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58371, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68447, + "name": "IgcPinColumnEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58444, + "name": "onColumnResized", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58445, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58446, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58447, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68533, + "name": "IgcColumnResizeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58408, + "name": "onColumnsAutogenerated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58409, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58410, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58411, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "IgcColumnsAutoGeneratedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58360, + "name": "onColumnSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58361, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58362, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58363, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68431, + "name": "IgcColumnSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58460, + "name": "onColumnVisibilityChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58461, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58462, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58463, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58456, + "name": "onColumnVisibilityChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58457, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58458, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58459, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68546, + "name": "IgcColumnVisibilityChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58448, + "name": "onContextMenu", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58449, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58450, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58451, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68540, + "name": "IgcGridContextMenuEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58536, + "name": "onDataChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58537, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58538, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58539, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58532, + "name": "onDataChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58533, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58534, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58535, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58320, + "name": "onDataPreLoad", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58321, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58322, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58323, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 63578, + "name": "IgcForOfState", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58452, + "name": "onDoubleClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58453, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58454, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58455, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58492, + "name": "onExpansionStatesChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58493, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58494, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58495, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58420, + "name": "onFiltering", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58421, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58422, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58423, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68503, + "name": "IgcFilteringEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58424, + "name": "onFilteringDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58425, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58426, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58427, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58324, + "name": "onFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58325, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58326, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58327, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58344, + "name": "onFormGroupCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58345, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58346, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58347, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68412, + "name": "IgcGridFormGroupCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58488, + "name": "onGridCopy", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58489, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58490, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58491, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68598, + "name": "IgcGridClipboardEvent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58312, + "name": "onGridCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58313, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58314, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58315, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68961, + "name": "IgcGridCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58316, + "name": "onGridInitialized", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58317, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58318, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58319, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68961, + "name": "IgcGridCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58476, + "name": "onGridKeydown", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58477, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58478, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58479, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68576, + "name": "IgcGridKeydownEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58332, + "name": "onGridScroll", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58333, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58334, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58335, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68393, + "name": "IgcGridScrollEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58524, + "name": "onRangeSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58525, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58526, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58527, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58528, + "name": "onRendered", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58529, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58530, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58531, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58440, + "name": "onRowAdd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58441, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58442, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58443, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58428, + "name": "onRowAdded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58429, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58430, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58431, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58340, + "name": "onRowClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58341, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58342, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58343, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68406, + "name": "IgcGridRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58436, + "name": "onRowDelete", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58437, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58438, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58439, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58432, + "name": "onRowDeleted", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58433, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58434, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58435, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58484, + "name": "onRowDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58485, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58486, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58487, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68591, + "name": "IgcRowDragEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58480, + "name": "onRowDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58481, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58482, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58483, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68584, + "name": "IgcRowDragStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58392, + "name": "onRowEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58393, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58394, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58395, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58396, + "name": "onRowEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58397, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58398, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58399, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58388, + "name": "onRowEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58389, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58390, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58391, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58400, + "name": "onRowEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58401, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58402, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58403, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58508, + "name": "onRowPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58509, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58510, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58511, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58504, + "name": "onRowPinning", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58505, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58506, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58507, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58356, + "name": "onRowSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58357, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58358, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58359, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68421, + "name": "IgcRowSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58500, + "name": "onRowToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58501, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58502, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58503, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68609, + "name": "IgcRowToggleEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58352, + "name": "onSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58353, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58354, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58355, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58496, + "name": "onSelectedRowsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58497, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58498, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58499, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58412, + "name": "onSorting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58413, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58414, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58415, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68496, + "name": "IgcSortingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58416, + "name": "onSortingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58417, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58418, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58419, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58516, + "name": "onSortingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58517, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58518, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58519, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58520, + "name": "onToolbarExporting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58521, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58522, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58523, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68635, + "name": "IgcGridToolbarExportEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 58348, + "name": "onValidationStatusChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58349, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 58350, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 58351, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68416, + "name": "IgcGridValidationStatusEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 57843, + "name": "actionStripComponents", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": -1, + "name": "IgcActionStripToken", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57853, + "name": "addRowEmptyTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template for adding row UI when grid is empty." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57879, + "name": "advancedFilteringExpressionsTree", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the advanced filtering state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57896, + "name": "allowAdvancedFiltering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a value indicating whether the advanced filtering is enabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57895, + "name": "allowFiltering", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the filtering is enabled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57849, + "name": "autoGenerate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether to auto-generate the columns." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57850, + "name": "autoGenerateExclude", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of property keys to be excluded from the generated column collection" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + } + }, + { + "id": 57847, + "name": "batchEditing", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57913, + "name": "cellMergeMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets cell merge mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70267, + "name": "GridCellMergeMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57912, + "name": "cellSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets cell selection mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57839, + "name": "childDataKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the key of the row island by which child data would be taken from the row data if such is provided." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57840, + "name": "childLayoutList", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 57754, + "name": "IgcRowIslandComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57857, + "name": "clipboardOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls the copy behavior of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68374, + "name": "IgcClipboardOptions", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57861, + "name": "columnList", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57915, + "name": "columnSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets column selection mode" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57889, + "name": "columnWidth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the default width of the columns." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57856, + "name": "dataCloneStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the data clone strategy of the grid when in edit mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68368, + "name": "IgcDataCloneStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57862, + "name": "dragGhostCustomTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the custom template, if any, used for row drag ghost." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68652, + "name": "IgcGridRowDragGhostContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57910, + "name": "dragIndicatorIconTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering the row drag indicator icon" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57893, + "name": "emptyFilteredGridMessage", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the message displayed when there are no records and the grid is filtered." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57890, + "name": "emptyGridMessage", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Sets the message displayed when there are no records." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57852, + "name": "emptyGridTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when empty." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57870, + "name": "excelStyleHeaderIconTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the excel style header icon." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57844, + "name": "expandChildren", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed.\n```html\n<igx-hierarchical-grid [data]=\"Data\" [autoGenerate]=\"true\">\n <igx-row-island [key]=\"'childData'\" [expandChildren]=\"true\" #rowIsland>\n <!-- ... -->\n </igx-row-island>\n</igx-hierarchical-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57916, + "name": "expansionStates", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a list of key-value pairs [row ID, expansion state]." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + }, + { + "id": 57878, + "name": "filteringExpressionsTree", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57877, + "name": "filteringLogic", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering logic of the `IgxGridComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70252, + "name": "FilteringLogic", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57897, + "name": "filterMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filter mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70263, + "name": "FilterMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57901, + "name": "filterStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the filtering strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68698, + "name": "IgcFilteringStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57845, + "name": "hasChildrenKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57869, + "name": "headerCollapsedIndicatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row collapse indicator template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57868, + "name": "headerExpandedIndicatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the header expand indicator template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57908, + "name": "headSelectorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the header row selector template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68795, + "name": "IgcHeadSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57886, + "name": "height", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the height." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57882, + "name": "hideRowSelectors", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets if the row selectors are hidden." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57891, + "name": "isLoading", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the grid is going to show a loading indicator." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57854, + "name": "loadingGridTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets a custom template when loading." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68361, + "name": "IgcGridTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57880, + "name": "locale", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the locale." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57903, + "name": "mergeStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the merge strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68719, + "name": "IgcGridMergeStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57851, + "name": "moving", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether columns moving is enabled in the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57875, + "name": "paginationComponents", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 59577, + "name": "IgcPaginatorComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57842, + "name": "paginatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/Gets the paginator template for each child grid created from this row island." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68954, + "name": "IgcGridPaginatorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57881, + "name": "pagingMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70261, + "name": "GridPagingMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57894, + "name": "pinning", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the initial pinning configuration." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 67930, + "name": "IgcPinningConfig", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57860, + "name": "primaryKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the primary key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57876, + "name": "resourceStrings", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the resource strings." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 65341, + "name": "IgcGridResourceStrings", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57864, + "name": "rowAddTextTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row add text template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68674, + "name": "IgcGridEmptyTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57858, + "name": "rowClasses", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a conditional class selector to the grid's row element.\nAccepts an object literal, containing key-value pairs,\nwhere the key is the name of the CSS class and the value is\neither a callback function that returns a boolean, or boolean, like so:\n```typescript\ncallback = (row: RowType) => { return row.selected > 6; }\nrowClasses = { 'className' : this.callback };\n```\n```html\n<igx-grid #grid [data]=\"Data\" [rowClasses] = \"rowClasses\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57867, + "name": "rowCollapsedIndicatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row collapse indicator template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57883, + "name": "rowDraggable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether rows can be moved." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57885, + "name": "rowEditable", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the rows are editable." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57865, + "name": "rowEditActionsTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row edit actions template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68677, + "name": "IgcGridRowEditActionsTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57863, + "name": "rowEditTextTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row edit text template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68667, + "name": "IgcGridRowEditTextTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57866, + "name": "rowExpandedIndicatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row expand indicator template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68684, + "name": "IgcGridRowTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57888, + "name": "rowHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the row height." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57914, + "name": "rowSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets row selection mode" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70266, + "name": "GridSelectionMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57909, + "name": "rowSelectorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the row selector template." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68802, + "name": "IgcRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57859, + "name": "rowStyles", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets conditional style properties on the grid row element.\nIt accepts an object literal where the keys are\nthe style properties and the value is an expression to be evaluated.\n```typescript\nstyles = {\n background: 'yellow',\n color: (row: RowType) => row.selected : 'red': 'white'\n}\n```\n```html\n<igx-grid #grid [data]=\"Data\" [rowStyles]=\"styles\" [autoGenerate]=\"true\"></igx-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 57905, + "name": "selectedRows", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the current selection state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 57923, + "name": "selectRowOnClick", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether clicking over a row should select/deselect it" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57892, + "name": "shouldGenerate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57846, + "name": "showExpandAll", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets whether the expand/collapse all button in the header should be rendered." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57900, + "name": "showSummaryOnCollapse", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Controls whether the summary row is visible when groupBy/parent row is collapsed." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 57848, + "name": "snackbarDisplayTime", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the display time for the row adding snackbar notification." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57871, + "name": "sortAscendingHeaderIconTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57872, + "name": "sortDescendingHeaderIconTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57873, + "name": "sortHeaderIconTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68691, + "name": "IgcGridHeaderTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57911, + "name": "sortingExpressions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting state." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57904, + "name": "sortingOptions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting options - single or multiple sorting.\nAccepts an `ISortingOptions` object with any of the `mode` properties." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68737, + "name": "IgcSortingOptions", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57902, + "name": "sortStrategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the sorting strategy of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 68711, + "name": "IgcGridSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57899, + "name": "summaryCalculationMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the summary calculation mode." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70265, + "name": "GridSummaryCalculationMode", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57898, + "name": "summaryPosition", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the summary position." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70264, + "name": "GridSummaryPosition", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57855, + "name": "summaryRowHeight", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get/Set IgxSummaryRow height" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57874, + "name": "toolbar", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 59566, + "name": "IgcGridToolbarComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57841, + "name": "toolbarTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets/Gets the toolbar template for each child grid created from this row island." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "reference", + "target": 68947, + "name": "IgcGridToolbarTemplateContext", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57922, + "name": "totalRecords", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the total number of records." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57884, + "name": "validationTrigger", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the trigger for validators used when editing the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": 70262, + "name": "GridValidationTrigger", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57887, + "name": "width", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the width of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 57918, + "name": "columns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of `IgxColumnComponent`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57907, + "name": "dataRowList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of currently rendered `IgxGridRowComponent`'s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57917, + "name": "defaultRowHeight", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the default row height." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 57920, + "name": "pinnedEndColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned to the right `IgxColumnComponent`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57921, + "name": "pinnedRows", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned `IgxRowComponent`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68843, + "name": "IgcGridRowComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57919, + "name": "pinnedStartColumns", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets an array of the pinned to the left `IgxColumnComponent`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57906, + "name": "rowList", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "A list of `IgxGridRowComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 68744, + "name": "IgcRowDirective", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 57998, + "name": "addRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57999, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1355, + "character": 11 + } + ], + "signatures": [ + { + "id": 58000, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and adds the data record to the end of the data source." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.addRow(record);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1355, + "character": 11 + } + ], + "parameters": [ + { + "id": 58001, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58002, + "name": "addRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and adds the data record to the end of the data source." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.addRow(record);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58003, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58298, + "name": "beginAddRowById", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI under the specified row by rowID." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58299, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1973, + "character": 11 + } + ], + "signatures": [ + { + "id": 58300, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI under the specified row by rowID." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If null is passed as rowID, the row adding UI is spawned as the first record in the data view" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowById('ALFKI');\nthis.grid.beginAddRowById('ALFKI', true);\nthis.grid.beginAddRowById(null);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1973, + "character": 11 + } + ], + "parameters": [ + { + "id": 58301, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58302, + "name": "asChild", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the record should be added as a child. Only applicable to igxTreeGrid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58303, + "name": "beginAddRowById", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI under the specified row by rowID." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If null is passed as rowID, the row adding UI is spawned as the first record in the data view" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowById('ALFKI');\nthis.grid.beginAddRowById('ALFKI', true);\nthis.grid.beginAddRowById(null);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58304, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58305, + "name": "asChild", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the record should be added as a child. Only applicable to igxTreeGrid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58306, + "name": "beginAddRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI at the specified index." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58307, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1989, + "character": 11 + } + ], + "signatures": [ + { + "id": 58308, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI at the specified index." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Accepted values for index are integers from 0 to this.grid.dataView.length" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowByIndex(0);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1989, + "character": 11 + } + ], + "parameters": [ + { + "id": 58309, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58310, + "name": "beginAddRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI at the specified index." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Accepted values for index are integers from 0 to this.grid.dataView.length" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowByIndex(0);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58311, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58192, + "name": "clearCellSelection", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect selected cells." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58193, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1767, + "character": 11 + } + ], + "signatures": [ + { + "id": 58194, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect selected cells." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearCellSelection();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1767, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58195, + "name": "clearCellSelection", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect selected cells." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearCellSelection();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58074, + "name": "clearFilter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58075, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1528, + "character": 11 + } + ], + "signatures": [ + { + "id": 58076, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the filtering state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Otherwise clears the filtering state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearFilter();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1528, + "character": 11 + } + ], + "parameters": [ + { + "id": 58077, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58078, + "name": "clearFilter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the filtering state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Otherwise clears the filtering state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "s." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearFilter();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58079, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58150, + "name": "clearSearch", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes all the highlights in the cell." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58151, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1670, + "character": 11 + } + ], + "signatures": [ + { + "id": 58152, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes all the highlights in the cell." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSearch();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1670, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58153, + "name": "clearSearch", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes all the highlights in the cell." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSearch();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58080, + "name": "clearSort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58081, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1543, + "character": 11 + } + ], + "signatures": [ + { + "id": 58082, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the sorting state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "otherwise clears the sorting state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSort();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1543, + "character": 11 + } + ], + "parameters": [ + { + "id": 58083, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58084, + "name": "clearSort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If name is provided, clears the sorting state of the corresponding " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "otherwise clears the sorting state of all " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.clearSort();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58085, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58284, + "name": "closeAdvancedFilteringDialog", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the advanced filtering dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58285, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1935, + "character": 11 + } + ], + "signatures": [ + { + "id": 58286, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the advanced filtering dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1935, + "character": 11 + } + ], + "parameters": [ + { + "id": 58287, + "name": "applyChanges", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "indicates whether the changes should be applied" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58288, + "name": "closeAdvancedFilteringDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Closes the advanced filtering dialog." + } + ] + }, + "parameters": [ + { + "id": 58289, + "name": "applyChanges", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "indicates whether the changes should be applied" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57940, + "name": "collapseAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57941, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1217, + "character": 11 + } + ], + "signatures": [ + { + "id": 57942, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseAll();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1217, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57943, + "name": "collapseAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseAll();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57950, + "name": "collapseRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the row by its id." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57951, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1247, + "character": 11 + } + ], + "signatures": [ + { + "id": 57952, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1247, + "character": 11 + } + ], + "parameters": [ + { + "id": 57953, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57954, + "name": "collapseRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57955, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58004, + "name": "deleteRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the `IgxGridRowComponent` and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58005, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1372, + "character": 11 + } + ], + "signatures": [ + { + "id": 58006, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set.\nThe method accept rowSelector as a parameter, which is the rowID." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.deleteRow(0);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1372, + "character": 11 + } + ], + "parameters": [ + { + "id": 58007, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + }, + "signatures": [ + { + "id": 58008, + "name": "deleteRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Removes the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set.\nThe method accept rowSelector as a parameter, which is the rowID." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.deleteRow(0);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58009, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + }, + { + "id": 58232, + "name": "deselectAllColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all columns" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58233, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1845, + "character": 11 + } + ], + "signatures": [ + { + "id": 58234, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1845, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58235, + "name": "deselectAllColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58186, + "name": "deselectAllRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all rows" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58187, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1756, + "character": 11 + } + ], + "signatures": [ + { + "id": 58188, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllRows();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1756, + "character": 11 + } + ], + "parameters": [ + { + "id": 58189, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58190, + "name": "deselectAllRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllRows();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58191, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58226, + "name": "deselectColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified columns by field." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58227, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1833, + "character": 11 + } + ], + "signatures": [ + { + "id": 58228, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified columns by field." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectColumns(['ID','Name']);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1833, + "character": 11 + } + ], + "parameters": [ + { + "id": 58229, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58230, + "name": "deselectColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified columns by field." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectColumns(['ID','Name']);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58231, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58174, + "name": "deselectRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58175, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1723, + "character": 11 + } + ], + "signatures": [ + { + "id": 58176, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectRows([1,2,5]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1723, + "character": 11 + } + ], + "parameters": [ + { + "id": 58177, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58178, + "name": "deselectRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Deselect specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectRows([1,2,5]);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58179, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58068, + "name": "disableSummaries", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disable summaries for the specified column." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58069, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1513, + "character": 11 + } + ], + "signatures": [ + { + "id": 58070, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disable summaries for the specified column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries('ProductName');\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Disable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries([{ fieldName: 'ProductName' }]);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1513, + "character": 11 + } + ], + "parameters": [ + { + "id": 58071, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58072, + "name": "disableSummaries", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Disable summaries for the specified column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries('ProductName');\n```" + } + ] + }, + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Disable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.disableSummaries([{ fieldName: 'ProductName' }]);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58073, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58062, + "name": "enableSummaries", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables summaries for the specified column and applies your customSummary." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58063, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1495, + "character": 11 + } + ], + "signatures": [ + { + "id": 58064, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables summaries for the specified column and applies your customSummary." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If you do not provide the customSummary, then the default summary for the column data type will be applied." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);\n```" + }, + { + "kind": "text", + "text": "\nEnable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries('ProductName');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1495, + "character": 11 + } + ], + "parameters": [ + { + "id": 58065, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58066, + "name": "enableSummaries", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enables summaries for the specified column and applies your customSummary." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If you do not provide the customSummary, then the default summary for the column data type will be applied." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);\n```" + }, + { + "kind": "text", + "text": "\nEnable summaries for the listed columns." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.enableSummaries('ProductName');\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58067, + "name": "rest", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58290, + "name": "endEdit", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finishes the row transactions on the current row and returns whether the grid editing was canceled." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58291, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1953, + "character": 11 + } + ], + "signatures": [ + { + "id": 58292, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finishes the row transactions on the current row and returns whether the grid editing was canceled." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`commit === true`" + }, + { + "kind": "text", + "text": ", passes them from the pending state to the data (or transaction service)" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<button type=\"button\" igxButton (click)=\"grid.endEdit(true)\">Commit Row</button>\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1953, + "character": 11 + } + ], + "parameters": [ + { + "id": 58293, + "name": "commit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58294, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 58295, + "name": "endEdit", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finishes the row transactions on the current row and returns whether the grid editing was canceled." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`commit === true`" + }, + { + "kind": "text", + "text": ", passes them from the pending state to the data (or transaction service)" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```html\n<button type=\"button\" igxButton (click)=\"grid.endEdit(true)\">Commit Row</button>\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58296, + "name": "commit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58297, + "name": "evt", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 57936, + "name": "expandAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57937, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1205, + "character": 11 + } + ], + "signatures": [ + { + "id": 57938, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandAll();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1205, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57939, + "name": "expandAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandAll();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57944, + "name": "expandRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the row by its id." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57945, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1232, + "character": 11 + } + ], + "signatures": [ + { + "id": 57946, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1232, + "character": 11 + } + ], + "parameters": [ + { + "id": 57947, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57948, + "name": "expandRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.expandRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57949, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58040, + "name": "filter", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single `IgxColumnComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58041, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1459, + "character": 11 + } + ], + "signatures": [ + { + "id": 58042, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic filter(term) {\n this.grid.filter(\"ProductName\", term, IgxStringFilteringOperand.instance().condition(\"contains\"));\n}\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1459, + "character": 11 + } + ], + "parameters": [ + { + "id": 58043, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58044, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58045, + "name": "conditionOrExpressionTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + { + "id": 58046, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58047, + "name": "filter", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\npublic filter(term) {\n this.grid.filter(\"ProductName\", term, IgxStringFilteringOperand.instance().condition(\"contains\"));\n}\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58048, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58049, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58050, + "name": "conditionOrExpressionTree", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + }, + { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + ] + } + }, + { + "id": 58051, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58052, + "name": "filterGlobal", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58053, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1475, + "character": 11 + } + ], + "signatures": [ + { + "id": 58054, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters all the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " in the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": " with the same condition." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));\n```" + } + ] + }, + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1475, + "character": 11 + } + ], + "parameters": [ + { + "id": 58055, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58056, + "name": "condition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58057, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58058, + "name": "filterGlobal", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Filters all the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " in the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": " with the same condition." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));\n```" + } + ] + }, + { + "tag": "@deprecated", + "content": [] + } + ] + }, + "parameters": [ + { + "id": 58059, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58060, + "name": "condition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58061, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58122, + "name": "findNext", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58123, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1626, + "character": 11 + } + ], + "signatures": [ + { + "id": 58124, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findNext(\"financial\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1626, + "character": 11 + } + ], + "parameters": [ + { + "id": 58125, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58126, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58127, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + } + }, + "signatures": [ + { + "id": 58128, + "name": "findNext", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findNext(\"financial\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58129, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58130, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58131, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 58132, + "name": "findPrev", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58133, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1643, + "character": 11 + } + ], + "signatures": [ + { + "id": 58134, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findPrev(\"financial\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1643, + "character": 11 + } + ], + "parameters": [ + { + "id": 58135, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58136, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58137, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + } + }, + "signatures": [ + { + "id": 58138, + "name": "findPrev", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the string." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.findPrev(\"financial\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58139, + "name": "text", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the string to search." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58140, + "name": "caseSensitive", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the search should be case sensitive (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58141, + "name": "exactMatch", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "optionally, if the text should match the entire value (defaults to false)." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 57968, + "name": "getColumnByName", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the `IgxColumnComponent` by field name." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57969, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1283, + "character": 11 + } + ], + "signatures": [ + { + "id": 57970, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " by field name." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCol = this.grid1.getColumnByName(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1283, + "character": 11 + } + ], + "parameters": [ + { + "id": 57971, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57972, + "name": "getColumnByName", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " by field name." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCol = this.grid1.getColumnByName(\"ID\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57973, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57974, + "name": "getColumnByVisibleIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57975, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1287, + "character": 11 + } + ], + "signatures": [ + { + "id": 57976, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1287, + "character": 11 + } + ], + "parameters": [ + { + "id": 57977, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 57978, + "name": "getColumnByVisibleIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 57979, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 57962, + "name": "getHeaderGroupWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the `width` to be set on `IgxGridHeaderGroupComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57963, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1270, + "character": 11 + } + ], + "signatures": [ + { + "id": 57964, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the " + }, + { + "kind": "code", + "text": "`width`" + }, + { + "kind": "text", + "text": " to be set on " + }, + { + "kind": "code", + "text": "`IgxGridHeaderGroupComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1270, + "character": 11 + } + ], + "parameters": [ + { + "id": 57965, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + } + }, + "signatures": [ + { + "id": 57966, + "name": "getHeaderGroupWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets the " + }, + { + "kind": "code", + "text": "`width`" + }, + { + "kind": "text", + "text": " to be set on " + }, + { + "kind": "code", + "text": "`IgxGridHeaderGroupComponent`" + }, + { + "kind": "text", + "text": "." + } + ] + }, + "parameters": [ + { + "id": 57967, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + }, + { + "id": 58258, + "name": "getNextCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns `ICellPosition` which defines the next cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58259, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1902, + "character": 11 + } + ], + "signatures": [ + { + "id": 58260, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the next cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1902, + "character": 11 + } + ], + "parameters": [ + { + "id": 58261, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58262, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58263, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 58264, + "name": "getNextCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the next cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58265, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58266, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58267, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 58160, + "name": "getPinnedEndWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58161, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1696, + "character": 11 + } + ], + "signatures": [ + { + "id": 58162, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedEndWidth();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1696, + "character": 11 + } + ], + "parameters": [ + { + "id": 58163, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58164, + "name": "getPinnedEndWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedEndWidth();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58165, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58154, + "name": "getPinnedStartWidth", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58155, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1683, + "character": 11 + } + ], + "signatures": [ + { + "id": 58156, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedStartWidth();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1683, + "character": 11 + } + ], + "parameters": [ + { + "id": 58157, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58158, + "name": "getPinnedStartWidth", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets calculated width of the pinned areas." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst pinnedWidth = this.grid.getPinnedStartWidth();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58159, + "name": "takeHidden", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "If we should take into account the hidden columns in the pinned area." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58268, + "name": "getPreviousCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns `ICellPosition` which defines the previous cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58269, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1919, + "character": 11 + } + ], + "signatures": [ + { + "id": 58270, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the previous cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1919, + "character": 11 + } + ], + "parameters": [ + { + "id": 58271, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58272, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58273, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 58274, + "name": "getPreviousCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns " + }, + { + "kind": "code", + "text": "`ICellPosition`" + }, + { + "kind": "text", + "text": " which defines the previous cell,\naccording to the current position, that match specific criteria." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "You can pass callback function as a third parameter of " + }, + { + "kind": "code", + "text": "`getPreviousCell`" + }, + { + "kind": "text", + "text": " method.\nThe callback function accepts IgxColumnComponent as a param" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58275, + "name": "currRowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58276, + "name": "curVisibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58277, + "name": "callback", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 68902, + "name": "IgcCellPosition", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 58028, + "name": "getRowData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the data that is contained in the row component." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58029, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1427, + "character": 11 + } + ], + "signatures": [ + { + "id": 58030, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the data that is contained in the row component." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If the primary key is not specified the row selector match the row data." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst data = grid.getRowData(94741);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1427, + "character": 11 + } + ], + "parameters": [ + { + "id": 58031, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + } + }, + "signatures": [ + { + "id": 58032, + "name": "getRowData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the data that is contained in the row component." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If the primary key is not specified the row selector match the row data." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst data = grid.getRowData(94741);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58033, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + }, + { + "id": 58240, + "name": "getSelectedColumnsData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "\nReturns an array of the current columns selection in the form of `[{ column.field: cell.value }, ...]`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58241, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1869, + "character": 11 + } + ], + "signatures": [ + { + "id": 58242, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current columns selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1869, + "character": 11 + } + ], + "parameters": [ + { + "id": 58243, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58244, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58245, + "name": "getSelectedColumnsData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current columns selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "parameters": [ + { + "id": 58246, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58247, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58206, + "name": "getSelectedData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "\nReturns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58207, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1793, + "character": 11 + } + ], + "signatures": [ + { + "id": 58208, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1793, + "character": 11 + } + ], + "parameters": [ + { + "id": 58209, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58210, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58211, + "name": "getSelectedData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "parameters": [ + { + "id": 58212, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58213, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58202, + "name": "getSelectedRanges", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get the currently selected ranges in the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58203, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1781, + "character": 11 + } + ], + "signatures": [ + { + "id": 58204, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get the currently selected ranges in the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1781, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + } + }, + "signatures": [ + { + "id": 58205, + "name": "getSelectedRanges", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get the currently selected ranges in the grid." + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + }, + { + "id": 57924, + "name": "isRecordPinnedByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns whether the record is pinned or not." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57925, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1178, + "character": 11 + } + ], + "signatures": [ + { + "id": 57926, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns whether the record is pinned or not." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1178, + "character": 11 + } + ], + "parameters": [ + { + "id": 57927, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Index of the record in the " + }, + { + "kind": "code", + "text": "`filteredSortedData`" + }, + { + "kind": "text", + "text": " collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57928, + "name": "isRecordPinnedByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns whether the record is pinned or not." + } + ] + }, + "parameters": [ + { + "id": 57929, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Index of the record in the " + }, + { + "kind": "code", + "text": "`filteredSortedData`" + }, + { + "kind": "text", + "text": " collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57994, + "name": "markForCheck", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Triggers change detection for the `IgxGridComponent`.\nCalling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.\nMay degrade performance if used when not needed, or if misused:\n```typescript\n// DON'Ts:\n// don't call markForCheck from inside a loop\n// don't call markForCheck when a primitive has changed\ngrid.data.forEach(rec => {\n rec = newValue;\n grid.markForCheck();\n});\n\n// DOs\n// call markForCheck after updating a nested property\ngrid.data.forEach(rec => {\n rec.nestedProp1.nestedProp2 = newValue;\n});\ngrid.markForCheck();\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57995, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1341, + "character": 11 + } + ], + "signatures": [ + { + "id": 57996, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Triggers change detection for the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": ".\nCalling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.\nMay degrade performance if used when not needed, or if misused:\n" + }, + { + "kind": "code", + "text": "```typescript\n// DON'Ts:\n// don't call markForCheck from inside a loop\n// don't call markForCheck when a primitive has changed\ngrid.data.forEach(rec => {\n rec = newValue;\n grid.markForCheck();\n});\n\n// DOs\n// call markForCheck after updating a nested property\ngrid.data.forEach(rec => {\n rec.nestedProp1.nestedProp2 = newValue;\n});\ngrid.markForCheck();\n```" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.markForCheck();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1341, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57997, + "name": "markForCheck", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Triggers change detection for the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": ".\nCalling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.\nMay degrade performance if used when not needed, or if misused:\n" + }, + { + "kind": "code", + "text": "```typescript\n// DON'Ts:\n// don't call markForCheck from inside a loop\n// don't call markForCheck when a primitive has changed\ngrid.data.forEach(rec => {\n rec = newValue;\n grid.markForCheck();\n});\n\n// DOs\n// call markForCheck after updating a nested property\ngrid.data.forEach(rec => {\n rec.nestedProp1.nestedProp2 = newValue;\n});\ngrid.markForCheck();\n```" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.markForCheck();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57984, + "name": "moveColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Places a column before or after the specified target column." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57985, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1311, + "character": 11 + } + ], + "signatures": [ + { + "id": 57986, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Places a column before or after the specified target column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.moveColumn(column, target);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1311, + "character": 11 + } + ], + "parameters": [ + { + "id": 57987, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57988, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57989, + "name": "pos", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70268, + "name": "DropPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57990, + "name": "moveColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Places a column before or after the specified target column." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.moveColumn(column, target);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57991, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57992, + "name": "target", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 57993, + "name": "pos", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70268, + "name": "DropPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58248, + "name": "navigateTo", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to a position in the grid based on provided `rowindex` and `visibleColumnIndex`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58249, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1885, + "character": 11 + } + ], + "signatures": [ + { + "id": 58250, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to a position in the grid based on provided " + }, + { + "kind": "code", + "text": "`rowindex`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`visibleColumnIndex`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Also can execute a custom logic over the target element,\nthrough a callback function that accepts { targetType: GridKeydownTargetType, target: Object }" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1885, + "character": 11 + } + ], + "parameters": [ + { + "id": 58251, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58252, + "name": "visibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58253, + "name": "cb", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58254, + "name": "navigateTo", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Navigates to a position in the grid based on provided " + }, + { + "kind": "code", + "text": "`rowindex`" + }, + { + "kind": "text", + "text": " and " + }, + { + "kind": "code", + "text": "`visibleColumnIndex`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Also can execute a custom logic over the target element,\nthrough a callback function that accepts { targetType: GridKeydownTargetType, target: Object }" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\n this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58255, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58256, + "name": "visibleColIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58257, + "name": "cb", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58278, + "name": "openAdvancedFilteringDialog", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the advanced filtering dialog." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58279, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1926, + "character": 11 + } + ], + "signatures": [ + { + "id": 58280, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the advanced filtering dialog." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1926, + "character": 11 + } + ], + "parameters": [ + { + "id": 58281, + "name": "overlaySettings", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58282, + "name": "openAdvancedFilteringDialog", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Opens the advanced filtering dialog." + } + ] + }, + "parameters": [ + { + "id": 58283, + "name": "overlaySettings", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 65696, + "name": "IgcOverlaySettings", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58086, + "name": "pinColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins a column by field name." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58087, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1562, + "character": 11 + } + ], + "signatures": [ + { + "id": 58088, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins a column by field name." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns whether the operation is successful." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1562, + "character": 11 + } + ], + "parameters": [ + { + "id": 58089, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58090, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58091, + "name": "pinningPosition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 58092, + "name": "pinColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pins a column by field name." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns whether the operation is successful." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58093, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58094, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58095, + "name": "pinningPosition", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 70258, + "name": "ColumnPinningPosition", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 58104, + "name": "pinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58105, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1593, + "character": 11 + } + ], + "signatures": [ + { + "id": 58106, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1593, + "character": 11 + } + ], + "parameters": [ + { + "id": 58107, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58108, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58109, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 58110, + "name": "pinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58111, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58112, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 58113, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 57980, + "name": "recalculateAutoSizes", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates all widths of columns that have size set to `auto`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57981, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1299, + "character": 11 + } + ], + "signatures": [ + { + "id": 57982, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates all widths of columns that have size set to " + }, + { + "kind": "code", + "text": "`auto`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.recalculateAutoSizes();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1299, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57983, + "name": "recalculateAutoSizes", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Recalculates all widths of columns that have size set to " + }, + { + "kind": "code", + "text": "`auto`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.recalculateAutoSizes();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58142, + "name": "refreshSearch", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Reapplies the existing search." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58143, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1658, + "character": 11 + } + ], + "signatures": [ + { + "id": 58144, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Reapplies the existing search." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the last search." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.refreshSearch();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1658, + "character": 11 + } + ], + "parameters": [ + { + "id": 58145, + "name": "updateActiveInfo", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58146, + "name": "endEdit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + } + }, + "signatures": [ + { + "id": 58147, + "name": "refreshSearch", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Reapplies the existing search." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Returns how many times the grid contains the last search." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.refreshSearch();\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58148, + "name": "updateActiveInfo", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 58149, + "name": "endEdit", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + }, + { + "id": 58236, + "name": "selectAllColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all columns" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58237, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1857, + "character": 11 + } + ], + "signatures": [ + { + "id": 58238, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1857, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58239, + "name": "selectAllColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all columns" + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.deselectAllColumns();\n```" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58180, + "name": "selectAllRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all rows" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58181, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1740, + "character": 11 + } + ], + "signatures": [ + { + "id": 58182, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectAllRows();\nthis.grid.selectAllRows(false);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1740, + "character": 11 + } + ], + "parameters": [ + { + "id": 58183, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58184, + "name": "selectAllRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Selects all rows" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.\nIf you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectAllRows();\nthis.grid.selectAllRows(false);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58185, + "name": "onlyFilterData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58218, + "name": "selectColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified columns." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58219, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1820, + "character": 11 + } + ], + "signatures": [ + { + "id": 58220, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectColumns(['ID','Name'], true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1820, + "character": 11 + } + ], + "parameters": [ + { + "id": 58221, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + { + "id": 58222, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58223, + "name": "selectColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectColumns(['ID','Name'], true);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58224, + "name": "columns", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "union", + "types": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + { + "id": 58225, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58214, + "name": "selectedColumns", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get current selected columns." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58215, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1806, + "character": 11 + } + ], + "signatures": [ + { + "id": 58216, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get current selected columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "text", + "text": "Returns an array with selected columns\n" + }, + { + "kind": "code", + "text": "```typescript\nconst selectedColumns = this.grid.selectedColumns();\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1806, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + } + }, + "signatures": [ + { + "id": 58217, + "name": "selectedColumns", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Get current selected columns." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "text", + "text": "Returns an array with selected columns\n" + }, + { + "kind": "code", + "text": "```typescript\nconst selectedColumns = this.grid.selectedColumns();\n```" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + }, + { + "id": 58196, + "name": "selectRange", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select range(s) of cells between certain rows and columns of the grid." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58197, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1774, + "character": 11 + } + ], + "signatures": [ + { + "id": 58198, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select range(s) of cells between certain rows and columns of the grid." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1774, + "character": 11 + } + ], + "parameters": [ + { + "id": 58199, + "name": "arg", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58200, + "name": "selectRange", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select range(s) of cells between certain rows and columns of the grid." + } + ] + }, + "parameters": [ + { + "id": 58201, + "name": "arg", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58166, + "name": "selectRows", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58167, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1710, + "character": 11 + } + ], + "signatures": [ + { + "id": 58168, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectRows([1,2,5], true);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1710, + "character": 11 + } + ], + "parameters": [ + { + "id": 58169, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 58170, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58171, + "name": "selectRows", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Select specified rows by ID." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.selectRows([1,2,5], true);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58172, + "name": "rowIDs", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 58173, + "name": "clearCurrentSelection", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "if true clears the current selection" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58034, + "name": "sort", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort a single `IgxColumnComponent`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58035, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1441, + "character": 11 + } + ], + "signatures": [ + { + "id": 58036, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Sort the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": "'s " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " based on the provided array of sorting expressions." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1441, + "character": 11 + } + ], + "parameters": [ + { + "id": 58037, + "name": "expression", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58038, + "name": "sort", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sort a single " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Sort the " + }, + { + "kind": "code", + "text": "`IgxGridComponent`" + }, + { + "kind": "text", + "text": "'s " + }, + { + "kind": "code", + "text": "`IgxColumnComponent`" + }, + { + "kind": "text", + "text": " based on the provided array of sorting expressions." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58039, + "name": "expression", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57930, + "name": "toggleColumnVisibility", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the specified column's visibility." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57931, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1193, + "character": 11 + } + ], + "signatures": [ + { + "id": 57932, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the specified column's visibility." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.toggleColumnVisibility({\n column: this.grid1.columns[0],\n newValue: true\n});\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1193, + "character": 11 + } + ], + "parameters": [ + { + "id": 57933, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57934, + "name": "toggleColumnVisibility", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the specified column's visibility." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid1.toggleColumnVisibility({\n column: this.grid1.columns[0],\n newValue: true\n});\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57935, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 57956, + "name": "toggleRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the row by its id." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 57957, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1263, + "character": 11 + } + ], + "signatures": [ + { + "id": 57958, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1263, + "character": 11 + } + ], + "parameters": [ + { + "id": 57959, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 57960, + "name": "toggleRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Toggles the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.toggleRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 57961, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58096, + "name": "unpinColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins a column by field name. Returns whether the operation is successful." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58097, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1576, + "character": 11 + } + ], + "signatures": [ + { + "id": 58098, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins a column by field name. Returns whether the operation is successful." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1576, + "character": 11 + } + ], + "parameters": [ + { + "id": 58099, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58100, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 58101, + "name": "unpinColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpins a column by field name. Returns whether the operation is successful." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinColumn(\"ID\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58102, + "name": "columnName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 58103, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 58114, + "name": "unpinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58115, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1609, + "character": 11 + } + ], + "signatures": [ + { + "id": 58116, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1609, + "character": 11 + } + ], + "parameters": [ + { + "id": 58117, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58118, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 58119, + "name": "unpinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58120, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58121, + "name": "row", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 58010, + "name": "updateCell", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the `IgxGridRowComponent` and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58011, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1390, + "character": 11 + } + ], + "signatures": [ + { + "id": 58012, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridWithPK.updateCell('Updated', 1, 'ProductName');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1390, + "character": 11 + } + ], + "parameters": [ + { + "id": 58013, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the new value which is to be set." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58014, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to rowID." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58015, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to column field." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58016, + "name": "updateCell", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + }, + { + "kind": "text", + "text": " and the corresponding data record by primary key." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the " + }, + { + "kind": "code", + "text": "`primaryKey`" + }, + { + "kind": "text", + "text": " property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.gridWithPK.updateCell('Updated', 1, 'ProductName');\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58017, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "the new value which is to be set." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58018, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to rowID." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58019, + "name": "column", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "corresponds to column field." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 58020, + "name": "updateRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the `IgxGridRowComponent`" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 58021, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1412, + "character": 11 + } + ], + "signatures": [ + { + "id": 58022, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The row is specified by\nrowSelector parameter and the data source record with the passed value.\nThis method will apply requested update only if primary key is specified in the grid." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.updateRow({\n ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')\n }, 1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "line": 1412, + "character": 11 + } + ], + "parameters": [ + { + "id": 58023, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58024, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 58025, + "name": "updateRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Updates the " + }, + { + "kind": "code", + "text": "`IgxGridRowComponent`" + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "The row is specified by\nrowSelector parameter and the data source record with the passed value.\nThis method will apply requested update only if primary key is specified in the grid." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.updateRow({\n ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')\n }, 1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 58026, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 58027, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "correspond to rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 57843, + 57853, + 57879, + 57896, + 57895, + 57849, + 57850, + 57847, + 57913, + 57912, + 57839, + 57840, + 57857, + 57861, + 57915, + 57889, + 57856, + 57862, + 57910, + 57893, + 57890, + 57852, + 57870, + 57844, + 57916, + 57878, + 57877, + 57897, + 57901, + 57845, + 57869, + 57868, + 57908, + 57886, + 57882, + 57891, + 57854, + 57880, + 57903, + 57851, + 57875, + 57842, + 57881, + 57894, + 57860, + 57876, + 57864, + 57858, + 57867, + 57883, + 57885, + 57865, + 57863, + 57866, + 57888, + 57914, + 57909, + 57859, + 57905, + 57923, + 57892, + 57846, + 57900, + 57848, + 57871, + 57872, + 57873, + 57911, + 57904, + 57902, + 57899, + 57898, + 57855, + 57874, + 57841, + 57922, + 57884, + 57887 + ] + }, + { + "title": "Accessors", + "children": [ + 57918, + 57907, + 57917, + 57920, + 57921, + 57919, + 57906 + ] + }, + { + "title": "Methods", + "children": [ + 57998, + 58298, + 58306, + 58192, + 58074, + 58150, + 58080, + 58284, + 57940, + 57950, + 58004, + 58232, + 58186, + 58226, + 58174, + 58068, + 58062, + 58290, + 57936, + 57944, + 58040, + 58052, + 58122, + 58132, + 57968, + 57974, + 57962, + 58258, + 58160, + 58154, + 58268, + 58028, + 58240, + 58206, + 58202, + 57924, + 57994, + 57984, + 58248, + 58278, + 58086, + 58104, + 57980, + 58142, + 58236, + 58180, + 58218, + 58214, + 58196, + 58166, + 58034, + 57930, + 57956, + 58096, + 58114, + 58010, + 58020 + ] + }, + { + "title": "Set Signatures", + "children": [ + 58512, + 58328, + 58336, + 58380, + 58384, + 58372, + 58376, + 58404, + 58468, + 58472, + 58464, + 58364, + 58368, + 58444, + 58408, + 58360, + 58460, + 58456, + 58448, + 58536, + 58532, + 58320, + 58452, + 58492, + 58420, + 58424, + 58324, + 58344, + 58488, + 58312, + 58316, + 58476, + 58332, + 58524, + 58528, + 58440, + 58428, + 58340, + 58436, + 58432, + 58484, + 58480, + 58392, + 58396, + 58388, + 58400, + 58508, + 58504, + 58356, + 58500, + 58352, + 58496, + 58412, + 58416, + 58516, + 58520, + 58348 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 57918, + 57907, + 57917, + 57920, + 57921, + 57919, + 57906 + ] + }, + { + "title": "Events", + "children": [ + 58512, + 58328, + 58336, + 58380, + 58384, + 58372, + 58376, + 58404, + 58468, + 58472, + 58464, + 58364, + 58368, + 58444, + 58408, + 58360, + 58460, + 58456, + 58448, + 58536, + 58532, + 58320, + 58452, + 58492, + 58420, + 58424, + 58324, + 58344, + 58488, + 58312, + 58316, + 58476, + 58332, + 58524, + 58528, + 58440, + 58428, + 58340, + 58436, + 58432, + 58484, + 58480, + 58392, + 58396, + 58388, + 58400, + 58508, + 58504, + 58356, + 58500, + 58352, + 58496, + 58412, + 58416, + 58516, + 58520, + 58348 + ] + }, + { + "title": "Methods", + "children": [ + 57998, + 58298, + 58306, + 58192, + 58074, + 58150, + 58080, + 58284, + 57940, + 57950, + 58004, + 58232, + 58186, + 58226, + 58174, + 58068, + 58062, + 58290, + 57936, + 57944, + 58040, + 58052, + 58122, + 58132, + 57968, + 57974, + 57962, + 58258, + 58160, + 58154, + 58268, + 58028, + 58240, + 58206, + 58202, + 57924, + 57994, + 57984, + 58248, + 58278, + 58086, + 58104, + 57980, + 58142, + 58236, + 58180, + 58218, + 58214, + 58196, + 58166, + 58034, + 57930, + 57956, + 58096, + 58114, + 58010, + 58020 + ] + }, + { + "title": "Properties", + "children": [ + 57843, + 57853, + 57879, + 57896, + 57895, + 57849, + 57850, + 57847, + 57913, + 57912, + 57839, + 57840, + 57857, + 57861, + 57915, + 57889, + 57856, + 57862, + 57910, + 57893, + 57890, + 57852, + 57870, + 57844, + 57916, + 57878, + 57877, + 57897, + 57901, + 57845, + 57869, + 57868, + 57908, + 57886, + 57882, + 57891, + 57854, + 57880, + 57903, + 57851, + 57875, + 57842, + 57881, + 57894, + 57860, + 57876, + 57864, + 57858, + 57867, + 57883, + 57885, + 57865, + 57863, + 57866, + 57888, + 57914, + 57909, + 57859, + 57905, + 57923, + 57892, + 57846, + 57900, + 57848, + 57871, + 57872, + 57873, + 57911, + 57904, + 57902, + 57899, + 57898, + 57855, + 57874, + 57841, + 57922, + 57884, + 57887 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/row-island.ts", + "line": 67, + "character": 13 + }, + { + "fileName": "src/grids/row-island.ts", + "line": 266, + "character": 12 + } + ], + "signatures": [ + { + "id": 57758, + "name": "IgrRowIsland", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 68421, + "name": "IgrRowSelectionEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event arguments when the selection state of a row is being changed\nThe event is cancelable" + } + ] + }, + "children": [ + { + "id": 68422, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68423, + "name": "IgrRowSelectionEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68421, + "name": "IgcRowSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68426, + "name": "added", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an array of all added rows\nWhenever a row has been selected, the array is \"refreshed\" with the selected rows" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68428, + "name": "allRowsSelected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether or not all rows of the grid have been selected" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 39, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68429, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 45, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68425, + "name": "newSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the newly selected rows" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68424, + "name": "oldSelection", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an array of rows, that have already been selected" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 16, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 68430, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 51, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68427, + "name": "removed", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents an array of all rows, removed from the selection\nWhenever a row has been deselected, the array is \"refreshed\" with the rows,\nthat have been previously selected, but are no longer" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68422 + ] + }, + { + "title": "Properties", + "children": [ + 68426, + 68428, + 68429, + 68425, + 68424, + 68430, + 68427 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 68802, + "name": "IgrRowSelectorTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68803, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68804, + "name": "IgrRowSelectorTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68802, + "name": "IgcRowSelectorTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68805, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68806, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70156, + "name": "IgcRowSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68807, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68808, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70156, + "name": "IgcRowSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68803 + ] + }, + { + "title": "Accessors", + "children": [ + 68805 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 70156, + "name": "IgrRowSelectorTemplateDetails", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70157, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70158, + "name": "IgrRowSelectorTemplateDetails", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70156, + "name": "IgcRowSelectorTemplateDetails", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70159, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 12, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 70160, + "name": "index", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 70161, + "name": "index", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 12, + "character": 15 + } + ], + "parameters": [ + { + "id": 70162, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70167, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 70168, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 70169, + "name": "key", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 70170, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70163, + "name": "rowID", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 70164, + "name": "rowID", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 70165, + "name": "rowID", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`key`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 70166, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70171, + "name": "selected", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 27, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 28, + "character": 21 + } + ], + "getSignature": { + "id": 70172, + "name": "selected", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 28, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + "setSignature": { + "id": 70173, + "name": "selected", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 27, + "character": 15 + } + ], + "parameters": [ + { + "id": 70174, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70177, + "name": "deselect", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 34, + "character": 11 + } + ], + "signatures": [ + { + "id": 70178, + "name": "deselect", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 34, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 70175, + "name": "select", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 31, + "character": 11 + } + ], + "signatures": [ + { + "id": 70176, + "name": "select", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 31, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70157 + ] + }, + { + "title": "Accessors", + "children": [ + 70159, + 70167, + 70163, + 70171 + ] + }, + { + "title": "Methods", + "children": [ + 70177, + 70175 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68609, + "name": "IgrRowToggleEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to the row's expansion state being changed in a grid" + } + ] + }, + "children": [ + { + "id": 68610, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68611, + "name": "IgrRowToggleEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68609, + "name": "IgcRowToggleEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 68615, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The event is cancelable\n" + }, + { + "kind": "code", + "text": "`cancel`" + }, + { + "kind": "text", + "text": " returns whether the event has been intercepted and stopped\nIf the value becomes \"true\", it returns/exits from the method, instantiating the interface" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68614, + "name": "expanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the state of the row after the operation has ended\nIndicating whether the row is being expanded (true) or collapsed (false)" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68616, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 68612, + "name": "rowID", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents the ID of the row that emitted the event (which state is changed)" + } + ], + "blockTags": [ + { + "tag": "@deprecated", + "content": [ + { + "kind": "text", + "text": "Use the " + }, + { + "kind": "code", + "text": "`rowKey`" + }, + { + "kind": "text", + "text": " property instead." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "line": 17, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68613, + "name": "rowKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68610 + ] + }, + { + "title": "Properties", + "children": [ + 68615, + 68614, + 68616, + 68612, + 68613 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 63662, + "name": "IgrRowType", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Interface representing a row in the grid. It is essentially the blueprint to a row object.\nContains definitions of properties and methods, relevant to a row" + } + ] + }, + "children": [ + { + "id": 63663, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 63664, + "name": "IgrRowType", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 63690, + "name": "addRowUI", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 131, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63679, + "name": "cells", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nA list or an array of cells, that belong to the row" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 54, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 63686, + "name": "children", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nContains the child rows of the current row, if there are any." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 104, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 63678, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 47, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63684, + "name": "deleted", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the row is marked for deletion." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 90, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63680, + "name": "disabled", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the current row is disabled" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 61, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63683, + "name": "expanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the current row is expanded.\nThe value is true, if the row is expanded and false, if it is collapsed" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 83, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63691, + "name": "focused", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the row is currently focused." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 138, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63675, + "name": "groupRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 38, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 63688, + "name": "hasChildren", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the current row has any child rows" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 120, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63685, + "name": "inEditMode", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the row is currently being edited." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 97, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63673, + "name": "isGroupByRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Indicates whether the row is grouped." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63674, + "name": "isSummaryRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63676, + "name": "key", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 41, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 63687, + "name": "parent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nContains the parent row of the current row, if it has one.\nIf the parent row exist, it means that the current row is a child row" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 113, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 63681, + "name": "pinned", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the current row is pinned." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 68, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63682, + "name": "selected", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nIndicates whether the current row is selected" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 75, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 63689, + "name": "treeRow", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the hierarchical record associated with the row (for tree grids).\nIt is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 128, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 63677, + "name": "validation", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 44, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68939, + "name": "IgcGridValidationState", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 63692, + "name": "grid", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 142, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 143, + "character": 21 + } + ], + "getSignature": { + "id": 63693, + "name": "grid", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 143, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 63694, + "name": "grid", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represent the grid instance, the row belongs to" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 142, + "character": 15 + } + ], + "parameters": [ + { + "id": 63695, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 62071, + "name": "IgcGridBaseDirective", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63665, + "name": "index", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 63666, + "name": "index", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 63667, + "name": "index", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index of the row within the grid" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 63668, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63669, + "name": "viewIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 27, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 28, + "character": 21 + } + ], + "getSignature": { + "id": 63670, + "name": "viewIndex", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 28, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 63671, + "name": "viewIndex", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 27, + "character": 15 + } + ], + "parameters": [ + { + "id": 63672, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 63699, + "name": "delete", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 158, + "character": 11 + } + ], + "signatures": [ + { + "id": 63700, + "name": "delete", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nA method to handle deleting rows" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 158, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + } + ] + }, + { + "id": 63701, + "name": "pin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 165, + "character": 11 + } + ], + "signatures": [ + { + "id": 63702, + "name": "pin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nA method to handle pinning a row" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 165, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 63703, + "name": "unpin", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 172, + "character": 11 + } + ], + "signatures": [ + { + "id": 63704, + "name": "unpin", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nA method to handle unpinning a row, that has been pinned" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 172, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 63696, + "name": "update", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 151, + "character": 11 + } + ], + "signatures": [ + { + "id": 63697, + "name": "update", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nA method to handle changing the value of elements of the row\nIt takes the new value as an argument" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 151, + "character": 11 + } + ], + "parameters": [ + { + "id": 63698, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 63663 + ] + }, + { + "title": "Properties", + "children": [ + 63690, + 63679, + 63686, + 63678, + 63684, + 63680, + 63683, + 63691, + 63675, + 63688, + 63685, + 63673, + 63674, + 63676, + 63687, + 63681, + 63682, + 63689, + 63677 + ] + }, + { + "title": "Accessors", + "children": [ + 63692, + 63665, + 63669 + ] + }, + { + "title": "Methods", + "children": [ + 63699, + 63701, + 63703, + 63696 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "line": 18, + "character": 25 + } + ] + }, + { + "id": 69014, + "name": "IgrScrollStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll).\nScroll strategies determines how the scrolling will be handled in the provided IgxOverlayService." + } + ] + }, + "children": [ + { + "id": 69015, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 69016, + "name": "IgrScrollStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 69014, + "name": "IgcScrollStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 69017, + "name": "attach", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "line": 22, + "character": 11 + } + ], + "signatures": [ + { + "id": 69018, + "name": "attach", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Attaches the strategy\n" + }, + { + "kind": "code", + "text": "```typescript\nsettings.scrollStrategy.attach();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "line": 22, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 69019, + "name": "detach", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "line": 32, + "character": 11 + } + ], + "signatures": [ + { + "id": 69020, + "name": "detach", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Detaches the strategy\n" + }, + { + "kind": "code", + "text": "```typescript\nsettings.scrollStrategy.detach();\n```" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 69015 + ] + }, + { + "title": "Methods", + "children": [ + 69017, + 69019 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "line": 11, + "character": 25 + } + ] + }, + { + "id": 68809, + "name": "IgrSearchInfo", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68810, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68811, + "name": "IgrSearchInfo", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68809, + "name": "IgcSearchInfo", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 70181, + "name": "IgcBaseSearchInfo.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 70180, + "name": "IgcBaseSearchInfo.constructor" + } + }, + { + "id": 68816, + "name": "activeMatchIndex", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 68817, + "name": "activeMatchIndex", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 68818, + "name": "activeMatchIndex", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 68819, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68824, + "name": "caseSensitive", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 68825, + "name": "caseSensitive", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.caseSensitive" + } + }, + "setSignature": { + "id": 68826, + "name": "caseSensitive", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 68827, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.caseSensitive" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 70186, + "name": "IgcBaseSearchInfo.caseSensitive" + } + }, + { + "id": 68836, + "name": "content", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 28, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 29, + "character": 21 + } + ], + "getSignature": { + "id": 68837, + "name": "content", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 29, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.content" + } + }, + "setSignature": { + "id": 68838, + "name": "content", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 28, + "character": 15 + } + ], + "parameters": [ + { + "id": 68839, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.content" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 70198, + "name": "IgcBaseSearchInfo.content" + } + }, + { + "id": 68828, + "name": "exactMatch", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 20, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 21, + "character": 21 + } + ], + "getSignature": { + "id": 68829, + "name": "exactMatch", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 21, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.exactMatch" + } + }, + "setSignature": { + "id": 68830, + "name": "exactMatch", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 20, + "character": 15 + } + ], + "parameters": [ + { + "id": 68831, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.exactMatch" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 70190, + "name": "IgcBaseSearchInfo.exactMatch" + } + }, + { + "id": 68832, + "name": "matchCount", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 24, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 25, + "character": 21 + } + ], + "getSignature": { + "id": 68833, + "name": "matchCount", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 25, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.matchCount" + } + }, + "setSignature": { + "id": 68834, + "name": "matchCount", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 24, + "character": 15 + } + ], + "parameters": [ + { + "id": 68835, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.matchCount" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 70194, + "name": "IgcBaseSearchInfo.matchCount" + } + }, + { + "id": 68812, + "name": "matchInfoCache", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 13, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68813, + "name": "matchInfoCache", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + "setSignature": { + "id": 68814, + "name": "matchInfoCache", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 13, + "character": 15 + } + ], + "parameters": [ + { + "id": 68815, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 68820, + "name": "searchText", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 12, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 68821, + "name": "searchText", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.searchText" + } + }, + "setSignature": { + "id": 68822, + "name": "searchText", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "line": 12, + "character": 15 + } + ], + "parameters": [ + { + "id": 68823, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseSearchInfo.searchText" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 70182, + "name": "IgcBaseSearchInfo.searchText" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68810 + ] + }, + { + "title": "Accessors", + "children": [ + 68816, + 68824, + 68836, + 68828, + 68832, + 68812, + 68820 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 70179, + "name": "IgcBaseSearchInfo", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 70231, + "name": "IgrSize", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70232, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70233, + "name": "IgrSize", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70231, + "name": "IgcSize", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70238, + "name": "height", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 19, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 20, + "character": 21 + } + ], + "getSignature": { + "id": 70239, + "name": "height", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 20, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 70240, + "name": "height", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets or sets the vertical component of Size" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 19, + "character": 15 + } + ], + "parameters": [ + { + "id": 70241, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 70234, + "name": "width", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 13, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 70235, + "name": "width", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + "setSignature": { + "id": 70236, + "name": "width", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets or sets the horizontal component of Size" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 13, + "character": 15 + } + ], + "parameters": [ + { + "id": 70237, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70232 + ] + }, + { + "title": "Accessors", + "children": [ + 70238, + 70234 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 68496, + "name": "IgrSortingEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Represents event arguments related to sorting and grouping operations\nThe event is cancelable" + } + ] + }, + "children": [ + { + "id": 68497, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68498, + "name": "IgrSortingEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68496, + "name": "IgcSortingEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68502, + "name": "cancel", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides the ability to cancel the event." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "line": 44, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 68500, + "name": "groupingExpressions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the grouping expressions applied to the grid.\nIt can be a single grouping expression or an array of them\nThe expression contains information like the sorting expression and criteria by which the elements will be grouped" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "line": 32, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63584, + "name": "IgcGroupingExpression", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 68501, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "line": 38, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 68499, + "name": "sortingExpressions", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Optional\nRepresents the sorting expressions applied to the grid.\nIt can be a single sorting expression or an array of them\nThe expression contains information like file name, whether the letter case should be taken into account, etc." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "line": 23, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68497 + ] + }, + { + "title": "Properties", + "children": [ + 68502, + 68500, + 68501, + 68499 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "line": 13, + "character": 25 + } + ] + }, + { + "id": 65546, + "name": "IgrSortingExpression", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65547, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65548, + "name": "IgrSortingExpression", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 65557, + "name": "ignoreCase", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 26, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65559, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + }, + { + "id": 65558, + "name": "strategy", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 68323, + "name": "IgcSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 65553, + "name": "dir", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 22, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 23, + "character": 21 + } + ], + "getSignature": { + "id": 65554, + "name": "dir", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 23, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 65555, + "name": "dir", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 22, + "character": 15 + } + ], + "parameters": [ + { + "id": 65556, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70247, + "name": "SortingDirection", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65549, + "name": "fieldName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 65550, + "name": "fieldName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 65551, + "name": "fieldName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 65552, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65547 + ] + }, + { + "title": "Properties", + "children": [ + 65557, + 65559, + 65558 + ] + }, + { + "title": "Accessors", + "children": [ + 65553, + 65549 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "line": 13, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 63584, + "name": "IgrGroupingExpression" + } + ] + }, + { + "id": 68737, + "name": "IgrSortingOptions", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68738, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68739, + "name": "IgrSortingOptions", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68737, + "name": "IgcSortingOptions", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68740, + "name": "mode", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "line": 13, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68741, + "name": "mode", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "reference", + "target": 70279, + "name": "SortingOptionsMode", + "package": "igniteui-webcomponents-grids" + } + }, + "setSignature": { + "id": 68742, + "name": "mode", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "line": 13, + "character": 15 + } + ], + "parameters": [ + { + "id": 68743, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70279, + "name": "SortingOptionsMode", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68738 + ] + }, + { + "title": "Accessors", + "children": [ + 68740 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "line": 9, + "character": 25 + } + ] + }, + { + "id": 68323, + "name": "IgrSortingStrategy", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68324, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68325, + "name": "IgrSortingStrategy", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68323, + "name": "IgcSortingStrategy", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68324 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-strategy.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 61761, + "name": "IgrStringFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides filtering operations for strings" + } + ], + "blockTags": [ + { + "tag": "@export", + "content": [] + } + ] + }, + "children": [ + { + "id": 61768, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61769, + "name": "IgrStringFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61761, + "name": "IgcStringFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61663, + "name": "IgcFilteringOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61662, + "name": "IgcFilteringOperand.constructor" + } + }, + { + "id": 61770, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61771, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcFilteringOperand.operations" + } + }, + "setSignature": { + "id": 61772, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61773, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcFilteringOperand.operations" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 61664, + "name": "IgcFilteringOperand.operations" + } + }, + { + "id": 61779, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61780, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61781, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": 61674, + "name": "IgcFilteringOperand.append" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61673, + "name": "IgcFilteringOperand.append" + } + }, + { + "id": 61776, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61777, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61778, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61671, + "name": "IgcFilteringOperand.condition" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61670, + "name": "IgcFilteringOperand.condition" + } + }, + { + "id": 61774, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61775, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": 61669, + "name": "IgcFilteringOperand.conditionList" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61668, + "name": "IgcFilteringOperand.conditionList" + } + }, + { + "id": 61762, + "name": "applyIgnoreCase", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "line": 24, + "character": 18 + } + ], + "signatures": [ + { + "id": 61763, + "name": "applyIgnoreCase", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Applies case sensitivity on strings if provided" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxStringFilteringOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "line": 24, + "character": 18 + } + ], + "parameters": [ + { + "id": 61764, + "name": "a", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 61765, + "name": "ignoreCase", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ] + }, + { + "id": 61766, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61767, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 61661, + "name": "IgcFilteringOperand.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 61660, + "name": "IgcFilteringOperand.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61768 + ] + }, + { + "title": "Accessors", + "children": [ + 61770 + ] + }, + { + "title": "Methods", + "children": [ + 61779, + 61776, + 61774, + 61762, + 61766 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "line": 14, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 65600, + "name": "IgrSummaryExpression", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65601, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65602, + "name": "IgrSummaryExpression", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65600, + "name": "IgcSummaryExpression", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65607, + "name": "customSummary", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "line": 19, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 65603, + "name": "fieldName", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "line": 14, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 65604, + "name": "fieldName", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 65605, + "name": "fieldName", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "line": 14, + "character": 15 + } + ], + "parameters": [ + { + "id": 65606, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65601 + ] + }, + { + "title": "Properties", + "children": [ + 65607 + ] + }, + { + "title": "Accessors", + "children": [ + 65603 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 65608, + "name": "IgrSummaryOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65612, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65613, + "name": "IgrSummaryOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65608, + "name": "IgcSummaryOperand", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65614, + "name": "operate", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 56, + "character": 11 + } + ], + "signatures": [ + { + "id": 65615, + "name": "operate", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Executes the static " + }, + { + "kind": "code", + "text": "`count`" + }, + { + "kind": "text", + "text": " method and returns " + }, + { + "kind": "code", + "text": "`IgxSummaryResult[]`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\ninterface IgxSummaryResult {\n key: string;\n label: string;\n summaryResult: any;\n}\n```" + }, + { + "kind": "text", + "text": "\nCan be overridden in the inherited classes to provide customization for the " + }, + { + "kind": "code", + "text": "`summary`" + }, + { + "kind": "text", + "text": ".\n" + }, + { + "kind": "code", + "text": "```typescript\nclass CustomSummary extends IgxSummaryOperand {\n constructor() {\n super();\n }\n public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {\n const result = [];\n result.push({\n key: \"test\",\n label: \"Test\",\n summaryResult: IgxSummaryOperand.count(data)\n });\n return result;\n }\n}\nthis.grid.getColumnByName('ColumnName').summaries = CustomSummary;\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 56, + "character": 11 + } + ], + "parameters": [ + { + "id": 65616, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65617, + "name": "_allData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65618, + "name": "_fieldName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65619, + "name": "_groupRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + } + } + ] + }, + { + "id": 65609, + "name": "count", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "signatures": [ + { + "id": 65610, + "name": "count", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Counts all the records in the data source.\nIf filtering is applied, counts only the filtered records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxSummaryOperand.count(dataSource);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "parameters": [ + { + "id": 65611, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65612 + ] + }, + { + "title": "Methods", + "children": [ + 65614, + 65609 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 10, + "character": 25 + } + ], + "extendedBy": [ + { + "type": "reference", + "target": 65636, + "name": "IgrNumberSummaryOperand" + }, + { + "type": "reference", + "target": 65660, + "name": "IgrDateSummaryOperand" + }, + { + "type": "reference", + "target": 65678, + "name": "IgrTimeSummaryOperand" + } + ] + }, + { + "id": 65620, + "name": "IgrSummaryResult", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65621, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65622, + "name": "IgrSummaryResult", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65635, + "name": "defaultFormatting", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Apply default formatting based on the grid column type.\n" + }, + { + "kind": "code", + "text": "```typescript\nconst result: IgxSummaryResult = {\n key: 'key',\n label: 'label',\n defaultFormatting: true\n}\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxSummaryResult" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 39, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 65623, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 14, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 15, + "character": 21 + } + ], + "getSignature": { + "id": 65624, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 15, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 65625, + "name": "key", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 14, + "character": 15 + } + ], + "parameters": [ + { + "id": 65626, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65627, + "name": "label", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 18, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 19, + "character": 21 + } + ], + "getSignature": { + "id": 65628, + "name": "label", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 19, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + "setSignature": { + "id": 65629, + "name": "label", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 18, + "character": 15 + } + ], + "parameters": [ + { + "id": 65630, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 65631, + "name": "summaryResult", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 23, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 24, + "character": 21 + } + ], + "getSignature": { + "id": 65632, + "name": "summaryResult", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 24, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 65633, + "name": "summaryResult", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 23, + "character": 15 + } + ], + "parameters": [ + { + "id": 65634, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65621 + ] + }, + { + "title": "Properties", + "children": [ + 65635 + ] + }, + { + "title": "Accessors", + "children": [ + 65623, + 65627, + 65631 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "line": 10, + "character": 25 + } + ] + }, + { + "id": 68326, + "name": "IgrSummaryTemplateContext", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 68327, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 68328, + "name": "IgrSummaryTemplateContext", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 68326, + "name": "IgcSummaryTemplateContext", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 68329, + "name": "implicit", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "line": 13, + "character": 11 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "getSignature": { + "id": 68330, + "name": "implicit", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "line": 14, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 68331, + "name": "implicit", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "line": 13, + "character": 11 + } + ], + "parameters": [ + { + "id": 68332, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 68327 + ] + }, + { + "title": "Accessors", + "children": [ + 68329 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 61727, + "name": "IgrTimeFilteringOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 61730, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "signatures": [ + { + "id": 61731, + "name": "IgrTimeFilteringOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 48, + "character": 4 + } + ], + "type": { + "type": "reference", + "target": 61727, + "name": "IgcTimeFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.constructor" + } + }, + { + "id": 61732, + "name": "operations", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 61733, + "name": "operations", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + "setSignature": { + "id": 61734, + "name": "operations", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 61735, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.operations" + } + }, + { + "id": 61741, + "name": "append", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "signatures": [ + { + "id": 61742, + "name": "append", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Adds a new condition to the filtering operations." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 46, + "character": 11 + } + ], + "parameters": [ + { + "id": 61743, + "name": "operation", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The filtering operation." + } + ] + }, + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.append" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.append" + } + }, + { + "id": 61738, + "name": "condition", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "signatures": [ + { + "id": 61739, + "name": "condition", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an instance of the condition with the specified name." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 37, + "character": 11 + } + ], + "parameters": [ + { + "id": 61740, + "name": "name", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The name of the condition." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 61794, + "name": "IgcFilteringOperation", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.condition" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.condition" + } + }, + { + "id": 61736, + "name": "conditionList", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "signatures": [ + { + "id": 61737, + "name": "conditionList", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of names of the conditions which are visible in the filtering UI" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 28, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "string" + } + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.conditionList" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.conditionList" + } + }, + { + "id": 61728, + "name": "instance", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "signatures": [ + { + "id": 61729, + "name": "instance", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "line": 21, + "character": 18 + } + ], + "type": { + "type": "reference", + "target": 61659, + "name": "IgcFilteringOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.instance" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand.instance" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 61730 + ] + }, + { + "title": "Accessors", + "children": [ + 61732 + ] + }, + { + "title": "Methods", + "children": [ + 61741, + 61738, + 61736, + 61728 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-filtering-operand.d.ts", + "line": 9, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "IgcBaseDateTimeFilteringOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 65678, + "name": "IgrTimeSummaryOperand", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 65688, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65689, + "name": "IgrTimeSummaryOperand", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65678, + "name": "IgcTimeSummaryOperand", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 65613, + "name": "IgcSummaryOperand.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65612, + "name": "IgcSummaryOperand.constructor" + } + }, + { + "id": 65690, + "name": "operate", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 44, + "character": 11 + } + ], + "signatures": [ + { + "id": 65691, + "name": "operate", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTimeSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 44, + "character": 11 + } + ], + "parameters": [ + { + "id": 65692, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65693, + "name": "allData", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 65694, + "name": "fieldName", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 65695, + "name": "groupRecord", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "reference", + "target": 61906, + "name": "IgcGroupByRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 65620, + "name": "IgcSummaryResult", + "package": "igniteui-webcomponents-grids" + } + }, + "overwrites": { + "type": "reference", + "target": 65615, + "name": "IgcSummaryOperand.operate" + } + } + ], + "overwrites": { + "type": "reference", + "target": 65614, + "name": "IgcSummaryOperand.operate" + } + }, + { + "id": 65685, + "name": "count", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true, + "isInherited": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "signatures": [ + { + "id": 65686, + "name": "count", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Counts all the records in the data source.\nIf filtering is applied, counts only the filtered records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxSummaryOperand.count(dataSource);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "line": 23, + "character": 18 + } + ], + "parameters": [ + { + "id": 65687, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "number" + }, + "inheritedFrom": { + "type": "reference", + "target": 65610, + "name": "IgcSummaryOperand.count" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 65609, + "name": "IgcSummaryOperand.count" + } + }, + { + "id": 65682, + "name": "earliestTime", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 38, + "character": 18 + } + ], + "signatures": [ + { + "id": 65683, + "name": "earliestTime", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the earliest time value in the data records. Compare only the time part of the date.\nIf filtering is applied, returns the earliest time value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxTimeSummaryOperand.earliestTime(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTimeSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 38, + "character": 18 + } + ], + "parameters": [ + { + "id": 65684, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 65679, + "name": "latestTime", + "variant": "declaration", + "kind": 2048, + "flags": { + "isPublic": true, + "isStatic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 25, + "character": 18 + } + ], + "signatures": [ + { + "id": 65680, + "name": "latestTime", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the latest time value in the data records. Compare only the time part of the date.\nIf filtering is applied, returns the latest time value in the filtered data records.\n" + }, + { + "kind": "code", + "text": "```typescript\nIgxTimeSummaryOperand.latestTime(data);\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTimeSummaryOperand" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 25, + "character": 18 + } + ], + "parameters": [ + { + "id": 65681, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65688 + ] + }, + { + "title": "Methods", + "children": [ + 65690, + 65685, + 65682, + 65679 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "line": 12, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 65608, + "name": "IgcSummaryOperand", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 67732, + "name": "IgrToggleViewCancelableEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67733, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67734, + "name": "IgrToggleViewCancelableEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67732, + "name": "IgcToggleViewCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67735, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Id of the toggle view" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-cancelable-event-args.d.ts", + "line": 12, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67733 + ] + }, + { + "title": "Properties", + "children": [ + 67735 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-cancelable-event-args.d.ts", + "line": 7, + "character": 25 + } + ] + }, + { + "id": 67736, + "name": "IgrToggleViewEventArgsDetail", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67737, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67738, + "name": "IgrToggleViewEventArgsDetail", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67736, + "name": "IgcToggleViewEventArgs", + "package": "igniteui-webcomponents-grids" + }, + "inheritedFrom": { + "type": "reference", + "target": 67961, + "name": "IgcBaseEventArgs.constructor" + } + } + ], + "inheritedFrom": { + "type": "reference", + "target": 67960, + "name": "IgcBaseEventArgs.constructor" + } + }, + { + "id": 67739, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Id of the toggle view" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-event-args.d.ts", + "line": 13, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 67740, + "name": "owner", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true, + "isInherited": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Provides reference to the owner component." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + }, + "inheritedFrom": { + "type": "reference", + "target": 67962, + "name": "IgcBaseEventArgs.owner" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67737 + ] + }, + { + "title": "Properties", + "children": [ + 67739, + 67740 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-event-args.d.ts", + "line": 8, + "character": 25 + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": 67959, + "name": "IgcBaseEventArgs", + "package": "igniteui-webcomponents-grids" + } + ] + }, + { + "id": 59176, + "name": "IgrTreeGrid", + "variant": "declaration", + "kind": 128, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text", + "text": "**Ignite UI for Angular Tree Grid** - [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding. Example:" + } + ] + }, + "children": [ + { + "id": 59537, + "name": "onActiveNodeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59538, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59539, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59540, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68627, + "name": "IgcActiveNodeChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59353, + "name": "onAdvancedFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59354, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59355, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59356, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59361, + "name": "onCellClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59362, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59363, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59364, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59405, + "name": "onCellEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59406, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59407, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59408, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59409, + "name": "onCellEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59410, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59411, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59412, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59397, + "name": "onCellEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59398, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59399, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59400, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59401, + "name": "onCellEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59402, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59403, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59404, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59429, + "name": "onColumnInit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59430, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59431, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59432, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 56801, + "name": "IgcColumnComponent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59493, + "name": "onColumnMoving", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59494, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59495, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59496, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68563, + "name": "IgcColumnMovingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59497, + "name": "onColumnMovingEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59498, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59499, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59500, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68569, + "name": "IgcColumnMovingEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59489, + "name": "onColumnMovingStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59490, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59491, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59492, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68558, + "name": "IgcColumnMovingStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59389, + "name": "onColumnPin", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59390, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59391, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59392, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68440, + "name": "IgcPinColumnCancellableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59393, + "name": "onColumnPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59394, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59395, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59396, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68447, + "name": "IgcPinColumnEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59469, + "name": "onColumnResized", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59470, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59471, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59472, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68533, + "name": "IgcColumnResizeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59433, + "name": "onColumnsAutogenerated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59434, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59435, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59436, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "IgcColumnsAutoGeneratedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59385, + "name": "onColumnSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59386, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59387, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59388, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68431, + "name": "IgcColumnSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59485, + "name": "onColumnVisibilityChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59486, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59487, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59488, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68552, + "name": "IgcColumnVisibilityChangedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59481, + "name": "onColumnVisibilityChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59482, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59483, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59484, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68546, + "name": "IgcColumnVisibilityChangingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59473, + "name": "onContextMenu", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59474, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59475, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59476, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68540, + "name": "IgcGridContextMenuEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59561, + "name": "onDataChanged", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59562, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59563, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59564, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59557, + "name": "onDataChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59558, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59559, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59560, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgcForOfDataChangeEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59477, + "name": "onDoubleClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59478, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59479, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59480, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59517, + "name": "onExpansionStatesChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59518, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59519, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59520, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.es2015.collection.d.ts", + "qualifiedName": "Map" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "any" + }, + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "Map", + "package": "typescript" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59445, + "name": "onFiltering", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59446, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59447, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59448, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68503, + "name": "IgcFilteringEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59449, + "name": "onFilteringDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59450, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59451, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59452, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59349, + "name": "onFilteringExpressionsTreeChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59350, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59351, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59352, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 61879, + "name": "IgcFilteringExpressionsTree", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59369, + "name": "onFormGroupCreated", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59370, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59371, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59372, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68412, + "name": "IgcGridFormGroupCreatedEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59513, + "name": "onGridCopy", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59514, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59515, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59516, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68598, + "name": "IgcGridClipboardEvent", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59501, + "name": "onGridKeydown", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59502, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59503, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59504, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68576, + "name": "IgcGridKeydownEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59357, + "name": "onGridScroll", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59358, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59359, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59360, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68393, + "name": "IgcGridScrollEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59549, + "name": "onRangeSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59550, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59551, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59552, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67911, + "name": "IgcGridSelectionRange", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59553, + "name": "onRendered", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59554, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59555, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59556, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "intrinsic", + "name": "boolean" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59465, + "name": "onRowAdd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59466, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59467, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59468, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59453, + "name": "onRowAdded", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59454, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59455, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59456, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59365, + "name": "onRowClick", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59366, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59367, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59368, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68406, + "name": "IgcGridRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59461, + "name": "onRowDelete", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59462, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59463, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59464, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgcRowDataCancelableEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59457, + "name": "onRowDeleted", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59458, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59459, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59460, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgcRowDataEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59509, + "name": "onRowDragEnd", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59510, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59511, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59512, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68591, + "name": "IgcRowDragEndEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59505, + "name": "onRowDragStart", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59506, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59507, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59508, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68584, + "name": "IgcRowDragStartEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59417, + "name": "onRowEdit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59418, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59419, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59420, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59421, + "name": "onRowEditDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59422, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59423, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59424, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59413, + "name": "onRowEditEnter", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59414, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59415, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59416, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgcGridEditEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59425, + "name": "onRowEditExit", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59426, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59427, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59428, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgcGridEditDoneEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59533, + "name": "onRowPinned", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59534, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59535, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59536, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59529, + "name": "onRowPinning", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59530, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59531, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59532, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgcPinRowEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59381, + "name": "onRowSelectionChanging", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59382, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59383, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59384, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68421, + "name": "IgcRowSelectionEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59525, + "name": "onRowToggle", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59526, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59527, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59528, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68609, + "name": "IgcRowToggleEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59377, + "name": "onSelected", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59378, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59379, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59380, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgcGridCellEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59521, + "name": "onSelectedRowsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59522, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59523, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59524, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59437, + "name": "onSorting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59438, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59439, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59440, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68496, + "name": "IgcSortingEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59441, + "name": "onSortingDone", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59442, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59443, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59444, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59541, + "name": "onSortingExpressionsChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59542, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59543, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59544, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "array", + "elementType": { + "type": "reference", + "target": 65546, + "name": "IgcSortingExpression", + "package": "igniteui-webcomponents-grids" + } + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59545, + "name": "onToolbarExporting", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59546, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59547, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59548, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68635, + "name": "IgcGridToolbarExportEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59373, + "name": "onValidationStatusChange", + "variant": "declaration", + "kind": 1048576, + "flags": {}, + "comment": { + "summary": [ + { + "kind": "text" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Events" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59374, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": {}, + "signatures": [ + { + "id": 59375, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": {}, + "parameters": [ + { + "id": 59376, + "name": "args", + "variant": "param", + "kind": 32768, + "flags": {}, + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68416, + "name": "IgcGridValidationStatusEventArgs", + "package": "igniteui-webcomponents-grids" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + }, + { + "id": 59260, + "name": "cascadeOnDelete", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets whether child records should be deleted when their parent gets deleted.\nBy default it is set to true and deletes all children along with the parent.\n```html\n<igx-tree-grid [data]=\"employeeData\" [primaryKey]=\"'employeeID'\" [foreignKey]=\"'parentID'\" cascadeOnDelete=\"false\">\n</igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59257, + "name": "childDataKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the child data key of the `IgxTreeGridComponent`.\n```html\n<igx-tree-grid #grid [data]=\"employeeData\" [childDataKey]=\"'employees'\" [autoGenerate]=\"true\"></igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 59265, + "name": "data", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Gets/Sets the array of data that populates the component.\n```html\n<igx-tree-grid [data]=\"Data\" [autoGenerate]=\"true\"></igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + }, + { + "id": 59266, + "name": "expansionDepth", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the count of levels to be expanded in the `IgxTreeGridComponent`. By default it is\nset to `Infinity` which means all levels would be expanded.\n```html\n<igx-tree-grid #grid [data]=\"employeeData\" [childDataKey]=\"'employees'\" expansionDepth=\"1\" [autoGenerate]=\"true\"></igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59258, + "name": "foreignKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the foreign key of the `IgxTreeGridComponent`.\n```html\n<igx-tree-grid #grid [data]=\"employeeData\" [primaryKey]=\"'employeeID'\" [foreignKey]=\"'parentID'\" [autoGenerate]=\"true\">\n</igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 59259, + "name": "hasChildrenKey", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the key indicating whether a row has children.\nThis property is only used for load on demand scenarios.\n```html\n<igx-tree-grid #grid [data]=\"employeeData\" [primaryKey]=\"'employeeID'\" [foreignKey]=\"'parentID'\"\n [loadChildrenOnDemand]=\"loadChildren\"\n [hasChildrenKey]=\"'hasEmployees'\">\n</igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 59262, + "name": "id", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets the value of the `id` attribute. If not provided it will be automatically generated.\n```html\n<igx-tree-grid [id]=\"'igx-tree-grid-1'\"></igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "string" + } + }, + { + "id": 59261, + "name": "loadChildrenOnDemand", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Sets a callback for loading child rows on demand.\n```html\n<igx-tree-grid [data]=\"employeeData\" [primaryKey]=\"'employeeID'\" [foreignKey]=\"'parentID'\" [loadChildrenOnDemand]=\"loadChildren\">\n</igx-tree-grid>\n```\n```typescript\npublic loadChildren = (parentID: any, done: (children: any[]) => void) => {\n this.dataService.getData(parentID, children => done(children));\n}\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59264, + "name": "processedRootRecords", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of processed (filtered and sorted) root `ITreeGridRecord`s.\n```typescript\n// gets the processed root record with index=2\nconst states = this.grid.processedRootRecords[2];\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 59263, + "name": "rootRecords", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the root level `ITreeGridRecord`s.\n```typescript\n// gets the root record with index=2\nconst states = this.grid.rootRecords[2];\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 59267, + "name": "rowLoadingIndicatorTemplate", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Template for the row loading indicator when load on demand is enabled.\n```html\n<ng-template #rowLoadingTemplate>\n <igx-icon>loop</igx-icon>\n</ng-template>\n\n<igx-tree-grid #grid [data]=\"employeeData\" [primaryKey]=\"'ID'\" [foreignKey]=\"'parentID'\"\n [loadChildrenOnDemand]=\"loadChildren\"\n [rowLoadingIndicatorTemplate]=\"rowLoadingTemplate\">\n</igx-tree-grid>\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Properties" + } + ] + } + ] + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcRenderFunction" + }, + "typeArguments": [ + { + "type": "intrinsic", + "name": "void" + } + ], + "name": "IgcRenderFunction", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 59268, + "name": "selectedCells", + "variant": "declaration", + "kind": 262144, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the selected `IgxGridCell`s." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Accessors" + } + ] + } + ] + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 59283, + "name": "addRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created\nrow would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches\nthe specified parentRowID. If the parentRowID does not exist, an error would be thrown.\n```typescript\nconst record = {\n ID: this.grid.data[this.grid1.data.length - 1].ID + 1,\n Name: this.newRecord\n};\nthis.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59284, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 293, + "character": 11 + } + ], + "signatures": [ + { + "id": 59285, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new " + }, + { + "kind": "code", + "text": "`IgxTreeGridRowComponent`" + }, + { + "kind": "text", + "text": " with the given data. If a parentRowID is not specified, the newly created\nrow would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches\nthe specified parentRowID. If the parentRowID does not exist, an error would be thrown.\n" + }, + { + "kind": "code", + "text": "```typescript\nconst record = {\n ID: this.grid.data[this.grid1.data.length - 1].ID + 1,\n Name: this.newRecord\n};\nthis.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTreeGridComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 293, + "character": 11 + } + ], + "parameters": [ + { + "id": 59286, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59287, + "name": "parentRowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59288, + "name": "addRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Creates a new " + }, + { + "kind": "code", + "text": "`IgxTreeGridRowComponent`" + }, + { + "kind": "text", + "text": " with the given data. If a parentRowID is not specified, the newly created\nrow would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches\nthe specified parentRowID. If the parentRowID does not exist, an error would be thrown.\n" + }, + { + "kind": "code", + "text": "```typescript\nconst record = {\n ID: this.grid.data[this.grid1.data.length - 1].ID + 1,\n Name: this.newRecord\n};\nthis.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTreeGridComponent" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59289, + "name": "data", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59290, + "name": "parentRowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59291, + "name": "beginAddRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI with the context of the specified row by index." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59292, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 316, + "character": 11 + } + ], + "signatures": [ + { + "id": 59293, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI with the context of the specified row by index." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Accepted values for index are integers from 0 to this.grid.dataView.length" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowByIndex(10);\nthis.grid.beginAddRowByIndex(10, true);\nthis.grid.beginAddRowByIndex(null);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 316, + "character": 11 + } + ], + "parameters": [ + { + "id": 59294, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59295, + "name": "asChild", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the record should be added as a child. Only applicable to igxTreeGrid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59296, + "name": "beginAddRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Enters add mode by spawning the UI with the context of the specified row by index." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Accepted values for index are integers from 0 to this.grid.dataView.length" + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.beginAddRowByIndex(10);\nthis.grid.beginAddRowByIndex(10, true);\nthis.grid.beginAddRowByIndex(null);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59297, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59298, + "name": "asChild", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the record should be added as a child. Only applicable to igxTreeGrid." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59279, + "name": "collapseAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows.\n\n```typescript\nthis.grid.collapseAll();\n ```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59280, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 271, + "character": 11 + } + ], + "signatures": [ + { + "id": 59281, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows.\n\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseAll();\n ```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTreeGridComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 271, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59282, + "name": "collapseAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Collapses all rows.\n\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.collapseAll();\n ```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTreeGridComponent" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59275, + "name": "expandAll", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows.\n```typescript\nthis.grid.expandAll();\n```" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59276, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 258, + "character": 11 + } + ], + "signatures": [ + { + "id": 59277, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.expandAll();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTreeGridComponent" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 258, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59278, + "name": "expandAll", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Expands all rows.\n" + }, + { + "kind": "code", + "text": "```typescript\nthis.grid.expandAll();\n```" + } + ], + "blockTags": [ + { + "tag": "@memberof", + "content": [ + { + "kind": "text", + "text": "IgxTreeGridComponent" + } + ] + } + ] + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59319, + "name": "getCellByColumn", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a `CellType` object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59320, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 368, + "character": 11 + } + ], + "signatures": [ + { + "id": 59321, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCell = this.grid1.getCellByColumn(2, \"UnitPrice\");\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 368, + "character": 11 + } + ], + "parameters": [ + { + "id": 59322, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59323, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 59324, + "name": "getCellByColumn", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myCell = this.grid1.getCellByColumn(2, \"UnitPrice\");\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59325, + "name": "rowIndex", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 59326, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 59327, + "name": "getCellByKey", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a `CellType` object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59328, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 384, + "character": 11 + } + ], + "signatures": [ + { + "id": 59329, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the primaryKey property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.getCellByKey(1, 'index');\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 384, + "character": 11 + } + ], + "parameters": [ + { + "id": 59330, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "match any rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59331, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 59332, + "name": "getCellByKey", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns a " + }, + { + "kind": "code", + "text": "`CellType`" + }, + { + "kind": "text", + "text": " object that matches the conditions." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "Requires that the primaryKey property is set." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\ngrid.getCellByKey(1, 'index');\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59333, + "name": "rowSelector", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "match any rowID" + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59334, + "name": "columnField", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "string" + } + } + ], + "type": { + "type": "reference", + "target": 63705, + "name": "IgcCellType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 59269, + "name": "getDefaultExpandState", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59270, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 246, + "character": 11 + } + ], + "signatures": [ + { + "id": 59271, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 246, + "character": 11 + } + ], + "parameters": [ + { + "id": 59272, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + }, + "signatures": [ + { + "id": 59273, + "name": "getDefaultExpandState", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "parameters": [ + { + "id": 59274, + "name": "record", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + }, + { + "id": 59307, + "name": "getRowByIndex", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the `IgxTreeGridRow` by index." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59308, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 341, + "character": 11 + } + ], + "signatures": [ + { + "id": 59309, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxTreeGridRow`" + }, + { + "kind": "text", + "text": " by index." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = treeGrid.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 341, + "character": 11 + } + ], + "parameters": [ + { + "id": 59310, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 59311, + "name": "getRowByIndex", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`IgxTreeGridRow`" + }, + { + "kind": "text", + "text": " by index." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = treeGrid.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59312, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 59313, + "name": "getRowByKey", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the `RowType` object by the specified primary key." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59314, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 354, + "character": 11 + } + ], + "signatures": [ + { + "id": 59315, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`RowType`" + }, + { + "kind": "text", + "text": " object by the specified primary key." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.treeGrid.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 354, + "character": 11 + } + ], + "parameters": [ + { + "id": 59316, + "name": "key", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + }, + "signatures": [ + { + "id": 59317, + "name": "getRowByKey", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns the " + }, + { + "kind": "code", + "text": "`RowType`" + }, + { + "kind": "text", + "text": " object by the specified primary key." + } + ], + "blockTags": [ + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nconst myRow = this.treeGrid.getRowByIndex(1);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59318, + "name": "key", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "reference", + "target": 63662, + "name": "IgcRowType", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 59299, + "name": "getSelectedData", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "\nReturns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`." + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59300, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 328, + "character": 11 + } + ], + "signatures": [ + { + "id": 59301, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 328, + "character": 11 + } + ], + "parameters": [ + { + "id": 59302, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59303, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + } + }, + "signatures": [ + { + "id": 59304, + "name": "getSelectedData", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns an array of the current cell selection in the form of " + }, + { + "kind": "code", + "text": "`[{ column.field: cell.value }, ...]`" + }, + { + "kind": "text", + "text": "." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "If " + }, + { + "kind": "code", + "text": "`formatters`" + }, + { + "kind": "text", + "text": " is enabled, the cell value will be formatted by its respective column formatter (if any).\nIf " + }, + { + "kind": "code", + "text": "`headers`" + }, + { + "kind": "text", + "text": " is enabled, it will use the column header (if any) instead of the column field." + } + ] + } + ] + }, + "parameters": [ + { + "id": 59305, + "name": "formatters", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 59306, + "name": "headers", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ], + "type": { + "type": "array", + "elementType": { + "type": "intrinsic", + "name": "any" + } + } + } + ] + }, + { + "id": 59335, + "name": "pinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59336, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 388, + "character": 11 + } + ], + "signatures": [ + { + "id": 59337, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 388, + "character": 11 + } + ], + "parameters": [ + { + "id": 59338, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59339, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 59340, + "name": "pinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Pin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.pinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59341, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + }, + { + "id": 59342, + "name": "index", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true, + "isOptional": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The index at which to insert the row in the pinned collection." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + }, + { + "id": 59343, + "name": "unpinRow", + "variant": "declaration", + "kind": 2048, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "" + } + ], + "blockTags": [ + { + "tag": "@category", + "content": [ + { + "kind": "text", + "text": "Methods" + } + ] + } + ] + }, + "type": { + "type": "reflection", + "declaration": { + "id": 59344, + "name": "__type", + "variant": "declaration", + "kind": 65536, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 392, + "character": 11 + } + ], + "signatures": [ + { + "id": 59345, + "name": "__type", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "line": 392, + "character": 11 + } + ], + "parameters": [ + { + "id": 59346, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + }, + "signatures": [ + { + "id": 59347, + "name": "unpinRow", + "variant": "signature", + "kind": 4096, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Unpin the row by its id." + } + ], + "blockTags": [ + { + "tag": "@remarks", + "content": [ + { + "kind": "text", + "text": "ID is either the primaryKey value or the data record instance." + } + ] + }, + { + "tag": "@example", + "content": [ + { + "kind": "code", + "text": "```typescript\nthis.grid.unpinRow(rowID);\n```" + } + ] + } + ] + }, + "parameters": [ + { + "id": 59348, + "name": "rowID", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The row id - primaryKey value or the data record instance." + } + ] + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + } + ] + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 59260, + 59257, + 59265, + 59266, + 59258, + 59259, + 59262, + 59261, + 59264, + 59263, + 59267 + ] + }, + { + "title": "Accessors", + "children": [ + 59268 + ] + }, + { + "title": "Methods", + "children": [ + 59283, + 59291, + 59279, + 59275, + 59319, + 59327, + 59269, + 59307, + 59313, + 59299, + 59335, + 59343 + ] + }, + { + "title": "Set Signatures", + "children": [ + 59537, + 59353, + 59361, + 59405, + 59409, + 59397, + 59401, + 59429, + 59493, + 59497, + 59489, + 59389, + 59393, + 59469, + 59433, + 59385, + 59485, + 59481, + 59473, + 59561, + 59557, + 59477, + 59517, + 59445, + 59449, + 59349, + 59369, + 59513, + 59501, + 59357, + 59549, + 59553, + 59465, + 59453, + 59365, + 59461, + 59457, + 59509, + 59505, + 59417, + 59421, + 59413, + 59425, + 59533, + 59529, + 59381, + 59525, + 59377, + 59521, + 59437, + 59441, + 59541, + 59545, + 59373 + ] + } + ], + "categories": [ + { + "title": "Accessors", + "children": [ + 59268 + ] + }, + { + "title": "Events", + "children": [ + 59537, + 59353, + 59361, + 59405, + 59409, + 59397, + 59401, + 59429, + 59493, + 59497, + 59489, + 59389, + 59393, + 59469, + 59433, + 59385, + 59485, + 59481, + 59473, + 59561, + 59557, + 59477, + 59517, + 59445, + 59449, + 59349, + 59369, + 59513, + 59501, + 59357, + 59549, + 59553, + 59465, + 59453, + 59365, + 59461, + 59457, + 59509, + 59505, + 59417, + 59421, + 59413, + 59425, + 59533, + 59529, + 59381, + 59525, + 59377, + 59521, + 59437, + 59441, + 59541, + 59545, + 59373 + ] + }, + { + "title": "Methods", + "children": [ + 59283, + 59291, + 59279, + 59275, + 59319, + 59327, + 59269, + 59307, + 59313, + 59299, + 59335, + 59343 + ] + }, + { + "title": "Properties", + "children": [ + 59260, + 59257, + 59265, + 59266, + 59258, + 59259, + 59262, + 59261, + 59264, + 59263, + 59267 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/tree-grid.ts", + "line": 64, + "character": 13 + }, + { + "fileName": "src/grids/tree-grid.ts", + "line": 253, + "character": 12 + } + ], + "signatures": [ + { + "id": 59180, + "name": "IgrTreeGrid", + "variant": "signature", + "kind": 4096, + "flags": { + "isStatic": true + }, + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "React.ReactNode" + }, + "name": "ReactNode", + "package": "@types/react", + "qualifiedName": "React.ReactNode" + } + } + ] + }, + { + "id": 67747, + "name": "IgrTreeGridRecord", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 67748, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 67749, + "name": "IgrTreeGridRecord", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 67758, + "name": "children", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 20, + "character": 11 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + } + }, + { + "id": 67762, + "name": "expanded", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 33, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67761, + "name": "isFilteredOutParent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 30, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "boolean" + } + }, + { + "id": 67760, + "name": "level", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 67759, + "name": "parent", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 24, + "character": 11 + } + ], + "type": { + "type": "reference", + "target": 67747, + "name": "IgcTreeGridRecord", + "package": "igniteui-webcomponents-grids" + } + }, + { + "id": 67754, + "name": "data", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 16, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 17, + "character": 21 + } + ], + "getSignature": { + "id": 67755, + "name": "data", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 17, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 67756, + "name": "data", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 16, + "character": 15 + } + ], + "parameters": [ + { + "id": 67757, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + }, + { + "id": 67750, + "name": "key", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 12, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 13, + "character": 21 + } + ], + "getSignature": { + "id": 67751, + "name": "key", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 13, + "character": 21 + } + ], + "type": { + "type": "intrinsic", + "name": "any" + } + }, + "setSignature": { + "id": 67752, + "name": "key", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 12, + "character": 15 + } + ], + "parameters": [ + { + "id": 67753, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "any" + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 67748 + ] + }, + { + "title": "Properties", + "children": [ + 67758, + 67762, + 67761, + 67760, + 67759 + ] + }, + { + "title": "Accessors", + "children": [ + 67754, + 67750 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "line": 8, + "character": 25 + } + ] + }, + { + "id": 70202, + "name": "IgrValidationErrors", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70203, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 70204, + "name": "IgrValidationErrors", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 70202, + "name": "IgcValidationErrors", + "package": "igniteui-webcomponents-grids" + } + } + ] + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70203 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-validation-errors.d.ts", + "line": 5, + "character": 25 + } + ] + }, + { + "id": 65560, + "name": "IgrValuesChange", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Event emitted when values list is changed." + } + ] + }, + "children": [ + { + "id": 65561, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "signatures": [ + { + "id": 65562, + "name": "IgrValuesChange", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "type": { + "type": "reference", + "target": 65560, + "name": "IgcValuesChange", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 65563, + "name": "values", + "variant": "declaration", + "kind": 262144, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "line": 17, + "character": 15 + }, + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "line": 18, + "character": 21 + } + ], + "getSignature": { + "id": 65564, + "name": "values", + "variant": "signature", + "kind": 524288, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "line": 18, + "character": 21 + } + ], + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + }, + "setSignature": { + "id": 65565, + "name": "values", + "variant": "signature", + "kind": 1048576, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "The new list of values." + } + ] + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "line": 17, + "character": 15 + } + ], + "parameters": [ + { + "id": 65566, + "name": "value", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "array", + "elementType": { + "type": "reference", + "target": 62032, + "name": "IgcPivotValue", + "package": "igniteui-webcomponents-grids" + } + } + } + ], + "type": { + "type": "intrinsic", + "name": "void" + } + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 65561 + ] + }, + { + "title": "Accessors", + "children": [ + 65563 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "line": 12, + "character": 25 + } + ] + }, + { + "id": 70288, + "name": "Point", + "variant": "declaration", + "kind": 128, + "flags": { + "isExternal": true + }, + "children": [ + { + "id": 70289, + "name": "constructor", + "variant": "declaration", + "kind": 512, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 33, + "character": 8 + } + ], + "signatures": [ + { + "id": 70290, + "name": "Point", + "variant": "signature", + "kind": 16384, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 33, + "character": 8 + } + ], + "parameters": [ + { + "id": 70291, + "name": "x", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70292, + "name": "y", + "variant": "param", + "kind": 32768, + "flags": { + "isExternal": true + }, + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "type": { + "type": "reference", + "target": 70288, + "name": "Point", + "package": "igniteui-webcomponents-grids" + } + } + ] + }, + { + "id": 70293, + "name": "x", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 34, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + }, + { + "id": 70294, + "name": "y", + "variant": "declaration", + "kind": 1024, + "flags": { + "isPublic": true, + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 35, + "character": 15 + } + ], + "type": { + "type": "intrinsic", + "name": "number" + } + } + ], + "groups": [ + { + "title": "Constructors", + "children": [ + 70289 + ] + }, + { + "title": "Properties", + "children": [ + 70293, + 70294 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "line": 32, + "character": 25 + } + ] + }, + { + "id": 70263, + "name": "FilterMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filter-mode.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "quickFilter" + }, + { + "type": "literal", + "value": "excelStyleFilter" + } + ] + } + }, + { + "id": 70267, + "name": "GridCellMergeMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-cell-merge-mode.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "always" + }, + { + "type": "literal", + "value": "onSort" + } + ] + } + }, + { + "id": 70242, + "name": "GridColumnDataType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-column-data-type.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "string" + }, + { + "type": "literal", + "value": "number" + }, + { + "type": "literal", + "value": "boolean" + }, + { + "type": "literal", + "value": "date" + }, + { + "type": "literal", + "value": "dateTime" + }, + { + "type": "literal", + "value": "time" + }, + { + "type": "literal", + "value": "currency" + }, + { + "type": "literal", + "value": "percent" + }, + { + "type": "literal", + "value": "image" + } + ] + } + }, + { + "id": 70278, + "name": "GridKeydownTargetType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-keydown-target-type.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "dataCell" + }, + { + "type": "literal", + "value": "summaryCell" + }, + { + "type": "literal", + "value": "groupRow" + }, + { + "type": "literal", + "value": "hierarchicalRow" + }, + { + "type": "literal", + "value": "headerCell" + }, + { + "type": "literal", + "value": "masterDetailRow" + } + ] + } + }, + { + "id": 70261, + "name": "GridPagingMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-paging-mode.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "local" + }, + { + "type": "literal", + "value": "remote" + } + ] + } + }, + { + "id": 70266, + "name": "GridSelectionMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-selection-mode.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "none" + }, + { + "type": "literal", + "value": "single" + }, + { + "type": "literal", + "value": "multiple" + }, + { + "type": "literal", + "value": "multipleCascade" + } + ] + } + }, + { + "id": 70265, + "name": "GridSummaryCalculationMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-summary-calculation-mode.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "rootLevelOnly" + }, + { + "type": "literal", + "value": "childLevelsOnly" + }, + { + "type": "literal", + "value": "rootAndChildLevels" + } + ] + } + }, + { + "id": 70264, + "name": "GridSummaryPosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-summary-position.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "top" + }, + { + "type": "literal", + "value": "bottom" + } + ] + } + }, + { + "id": 70251, + "name": "GridToolbarExporterType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-toolbar-exporter-type.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "excel" + }, + { + "type": "literal", + "value": "csv" + } + ] + } + }, + { + "id": 70262, + "name": "GridValidationTrigger", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-validation-trigger.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "change" + }, + { + "type": "literal", + "value": "blur" + } + ] + } + }, + { + "id": 59664, + "name": "IgrActiveNodeChangeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 225, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68627, + "name": "IgrActiveNodeChangeEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcActiveNodeChangeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59635, + "name": "IgrBaseEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 179, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67959, + "name": "IgrBaseEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcBaseEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59668, + "name": "IgrCancelableBrowserEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 233, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70021, + "name": "IgrCancelableBrowserEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcCancelableBrowserEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59669, + "name": "IgrCancelableEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 235, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70038, + "name": "IgrCancelableEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcCancelableEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59674, + "name": "IgrColumnExportingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 243, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70221, + "name": "IgrColumnExportingEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnExportingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59658, + "name": "IgrColumnMovingEndEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 216, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68569, + "name": "IgrColumnMovingEndEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnMovingEndEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59657, + "name": "IgrColumnMovingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 214, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68563, + "name": "IgrColumnMovingEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnMovingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59656, + "name": "IgrColumnMovingStartEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 212, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68558, + "name": "IgrColumnMovingStartEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnMovingStartEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59652, + "name": "IgrColumnResizeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 204, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68533, + "name": "IgrColumnResizeEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnResizeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59647, + "name": "IgrColumnsAutoGeneratedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 197, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": -1, + "name": "IgrColumnsAutoGeneratedEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnsAutoGeneratedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59642, + "name": "IgrColumnSelectionEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 189, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68431, + "name": "IgrColumnSelectionEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnSelectionEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59634, + "name": "IgrColumnToggledEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 177, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67741, + "name": "IgrColumnToggledEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnToggledEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59655, + "name": "IgrColumnVisibilityChangedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 210, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68552, + "name": "IgrColumnVisibilityChangedEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnVisibilityChangedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59654, + "name": "IgrColumnVisibilityChangingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 208, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68546, + "name": "IgrColumnVisibilityChangingEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcColumnVisibilityChangingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59631, + "name": "IgrExporterEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 173, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 66709, + "name": "IgrExporterEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcExporterEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59649, + "name": "IgrFilteringEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 200, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68503, + "name": "IgrFilteringEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcFilteringEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59666, + "name": "IgrForOfDataChangeEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 229, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68643, + "name": "IgrForOfDataChangeEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcForOfDataChangeEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59670, + "name": "IgrForOfDataChangingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 236, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70087, + "name": "IgrForOfDataChangingEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcForOfDataChangingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59637, + "name": "IgrGridCellEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 181, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68400, + "name": "IgrGridCellEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridCellEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59653, + "name": "IgrGridContextMenuEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 206, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68540, + "name": "IgrGridContextMenuEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridContextMenuEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59667, + "name": "IgrGridCreatedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 231, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68961, + "name": "IgrGridCreatedEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridCreatedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59646, + "name": "IgrGridEditDoneEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 195, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68473, + "name": "IgrGridEditDoneEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridEditDoneEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59645, + "name": "IgrGridEditEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 194, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68454, + "name": "IgrGridEditEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridEditEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59639, + "name": "IgrGridFormGroupCreatedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 183, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68412, + "name": "IgrGridFormGroupCreatedEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridFormGroupCreatedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59659, + "name": "IgrGridKeydownEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 218, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68576, + "name": "IgrGridKeydownEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridKeydownEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59638, + "name": "IgrGridRowEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 182, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68406, + "name": "IgrGridRowEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridRowEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59636, + "name": "IgrGridScrollEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 180, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68393, + "name": "IgrGridScrollEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridScrollEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59665, + "name": "IgrGridToolbarExportEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 227, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68635, + "name": "IgrGridToolbarExportEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridToolbarExportEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59640, + "name": "IgrGridValidationStatusEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 185, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68416, + "name": "IgrGridValidationStatusEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGridValidationStatusEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59629, + "name": "IgrGroupingDoneEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 169, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 63615, + "name": "IgrGroupingDoneEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcGroupingDoneEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59671, + "name": "IgrPageCancellableEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 238, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70120, + "name": "IgrPageCancellableEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcPageCancellableEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59672, + "name": "IgrPageEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 240, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70126, + "name": "IgrPageEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcPageEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59643, + "name": "IgrPinColumnCancellableEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 191, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68440, + "name": "IgrPinColumnCancellableEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcPinColumnCancellableEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59644, + "name": "IgrPinColumnEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 193, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68447, + "name": "IgrPinColumnEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcPinColumnEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59663, + "name": "IgrPinRowEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 224, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68617, + "name": "IgrPinRowEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcPinRowEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59630, + "name": "IgrPivotConfigurationChangedEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 171, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 65542, + "name": "IgrPivotConfigurationChangedEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcPivotConfigurationChangedEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59651, + "name": "IgrRowDataCancelableEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 202, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68517, + "name": "IgrRowDataCancelableEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowDataCancelableEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59650, + "name": "IgrRowDataEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 201, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68509, + "name": "IgrRowDataEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowDataEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59661, + "name": "IgrRowDragEndEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 222, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68591, + "name": "IgrRowDragEndEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowDragEndEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59660, + "name": "IgrRowDragStartEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 220, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68584, + "name": "IgrRowDragStartEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowDragStartEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59673, + "name": "IgrRowExportingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 241, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 70214, + "name": "IgrRowExportingEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowExportingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59641, + "name": "IgrRowSelectionEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 187, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68421, + "name": "IgrRowSelectionEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowSelectionEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59662, + "name": "IgrRowToggleEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 223, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68609, + "name": "IgrRowToggleEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcRowToggleEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59648, + "name": "IgrSortingEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 199, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 68496, + "name": "IgrSortingEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcSortingEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59632, + "name": "IgrToggleViewCancelableEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 174, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67732, + "name": "IgrToggleViewCancelableEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcToggleViewCancelableEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 59633, + "name": "IgrToggleViewEventArgs", + "variant": "declaration", + "kind": 2097152, + "flags": {}, + "sources": [ + { + "fileName": "src/grids/types.ts", + "line": 176, + "character": 12 + } + ], + "type": { + "type": "reference", + "target": 192085, + "typeArguments": [ + { + "type": "reference", + "target": 67736, + "name": "IgrToggleViewEventArgsDetail", + "package": "igniteui-webcomponents-grids", + "qualifiedName": "IgcToggleViewEventArgs" + } + ], + "name": "CustomEvent", + "package": "typescript" + } + }, + { + "id": 70276, + "name": "PivotAggregationType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-aggregation-type.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "SUM" + }, + { + "type": "literal", + "value": "AVG" + }, + { + "type": "literal", + "value": "MIN" + }, + { + "type": "literal", + "value": "MAX" + }, + { + "type": "literal", + "value": "COUNT" + }, + { + "type": "literal", + "value": "LATEST" + }, + { + "type": "literal", + "value": "EARLIEST" + } + ] + } + }, + { + "id": 70271, + "name": "PivotRowLayoutType", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-row-layout-type.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "Vertical" + }, + { + "type": "literal", + "value": "Horizontal" + } + ] + } + }, + { + "id": 70272, + "name": "PivotSummaryPosition", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-summary-position.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "Top" + }, + { + "type": "literal", + "value": "Bottom" + } + ] + } + }, + { + "id": 70279, + "name": "SortingOptionsMode", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-options-mode.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "single" + }, + { + "type": "literal", + "value": "multiple" + } + ] + } + }, + { + "id": 70277, + "name": "ValidationStatus", + "variant": "declaration", + "kind": 2097152, + "flags": { + "isExternal": true + }, + "sources": [ + { + "fileName": "node_modules/igniteui-webcomponents-grids/grids/lib/validation-status.d.ts", + "line": 2, + "character": 30 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "literal", + "value": "VALID" + }, + { + "type": "literal", + "value": "INVALID" + } + ] + } + } + ], + "groups": [ + { + "title": "Enumerations", + "children": [ + 70258, + 70268, + 70255, + 70252, + 70280, + 70243, + 70273, + 70247, + 70284 + ] + }, + { + "title": "Classes", + "children": [ + 56683, + 61638, + 68627, + 67959, + 69021, + 61853, + 70179, + 61642, + 61979, + 70021, + 70038, + 68902, + 68333, + 63705, + 68374, + 56801, + 68357, + 70221, + 56752, + 56923, + 68569, + 68563, + 68558, + 68348, + 68533, + 68431, + 67781, + 62052, + 67741, + 68552, + 68546, + 68368, + 61676, + 65660, + 61710, + 61957, + 61935, + 65531, + 66709, + 70018, + 70042, + 61812, + 70034, + 70025, + 68503, + 61782, + 61879, + 61659, + 61794, + 68698, + 67950, + 68643, + 70087, + 63578, + 56961, + 60666, + 62071, + 68400, + 68598, + 68540, + 68961, + 68473, + 68454, + 56705, + 68674, + 68412, + 63633, + 68691, + 68576, + 63622, + 68719, + 68954, + 56725, + 65341, + 68843, + 68652, + 68677, + 68667, + 68406, + 68684, + 68393, + 67911, + 68711, + 56641, + 59675, + 67935, + 60647, + 67763, + 68361, + 59566, + 59036, + 59045, + 59055, + 68635, + 59108, + 59142, + 68947, + 59027, + 68939, + 68416, + 63604, + 68913, + 61906, + 61895, + 63648, + 68924, + 63655, + 63615, + 63584, + 67896, + 70093, + 68795, + 70141, + 57396, + 63767, + 61826, + 62001, + 62063, + 61744, + 65636, + 68840, + 65696, + 70120, + 70126, + 59577, + 70132, + 67885, + 68440, + 68447, + 67930, + 68617, + 68284, + 65574, + 65542, + 58541, + 65306, + 65523, + 62011, + 68968, + 58575, + 68308, + 68297, + 65567, + 68978, + 65593, + 62032, + 70205, + 69005, + 68517, + 68509, + 68744, + 68591, + 68584, + 70214, + 57754, + 68421, + 68802, + 70156, + 68609, + 63662, + 69014, + 68809, + 70231, + 68496, + 65546, + 68737, + 68323, + 61761, + 65600, + 65608, + 65620, + 68326, + 61727, + 65678, + 67732, + 67736, + 59176, + 67747, + 70202, + 65560, + 70288 + ] + }, + { + "title": "Type Aliases", + "children": [ + 70263, + 70267, + 70242, + 70278, + 70261, + 70266, + 70265, + 70264, + 70251, + 70262, + 59664, + 59635, + 59668, + 59669, + 59674, + 59658, + 59657, + 59656, + 59652, + 59647, + 59642, + 59634, + 59655, + 59654, + 59631, + 59649, + 59666, + 59670, + 59637, + 59653, + 59667, + 59646, + 59645, + 59639, + 59659, + 59638, + 59636, + 59665, + 59640, + 59629, + 59671, + 59672, + 59643, + 59644, + 59663, + 59630, + 59651, + 59650, + 59661, + 59660, + 59673, + 59641, + 59662, + 59648, + 59632, + 59633, + 70276, + 70271, + 70272, + 70279, + 70277 + ] + } + ], + "sources": [ + { + "fileName": "src/grids/index.ts", + "line": 1, + "character": 0 + } + ] + }, + { + "id": 195, + "name": "typescript", + "variant": "declaration", + "kind": 2, + "flags": {}, + "children": [ + { + "id": 192085, + "name": "CustomEvent", + "variant": "declaration", + "kind": 256, + "flags": { + "isExternal": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent)" + } + ] + }, + "children": [ + { + "id": 192086, + "name": "detail", + "variant": "declaration", + "kind": 1024, + "flags": { + "isExternal": true, + "isReadonly": true + }, + "comment": { + "summary": [ + { + "kind": "text", + "text": "Returns any custom data event was created with. Typically used for synthetic events.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)" + } + ] + }, + "sources": [ + { + "fileName": "node_modules/typescript/lib/lib.dom.d.ts", + "line": 6502, + "character": 13 + } + ], + "type": { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.dom.d.ts", + "qualifiedName": "CustomEvent.T" + }, + "name": "T", + "package": "typescript", + "qualifiedName": "CustomEvent.T", + "refersToTypeParameter": true + } + } + ], + "groups": [ + { + "title": "Properties", + "children": [ + 192086 + ] + } + ], + "sources": [ + { + "fileName": "node_modules/typescript/lib/lib.dom.d.ts", + "line": 6496, + "character": 10 + }, + { + "fileName": "node_modules/typescript/lib/lib.dom.d.ts", + "line": 6511, + "character": 12 + }, + { + "fileName": "node_modules/@types/node/web-globals/events.d.ts", + "line": 75, + "character": 14 + }, + { + "fileName": "node_modules/@types/node/web-globals/events.d.ts", + "line": 76, + "character": 8 + } + ], + "typeParameters": [ + { + "id": 192123, + "name": "T", + "variant": "typeParam", + "kind": 131072, + "flags": { + "isExternal": true + }, + "default": { + "type": "intrinsic", + "name": "any" + } + } + ], + "extendedTypes": [ + { + "type": "reference", + "target": -1, + "name": "Event", + "package": "@types/react" + }, + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/@types/node/web-globals/events.d.ts", + "qualifiedName": "_CustomEvent" + }, + "typeArguments": [ + { + "type": "reference", + "target": { + "sourceFileName": "node_modules/typescript/lib/lib.dom.d.ts", + "qualifiedName": "CustomEvent.T" + }, + "name": "T", + "package": "typescript", + "qualifiedName": "CustomEvent.T", + "refersToTypeParameter": true + } + ], + "name": "_CustomEvent", + "package": "@types/node" + } + ] + } + ], + "groups": [ + { + "title": "Interfaces", + "children": [ + 192085 + ] + } + ] + } + ], + "groups": [ + { + "title": "Modules", + "children": [ + 1, + 194, + 195 + ] + } + ], + "packageName": "react-wrappers", + "symbolIdMap": { + "1": { + "sourceFileName": "src/components/index.ts", + "qualifiedName": "" + }, + "3": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent" + }, + "8": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "9": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object" + }, + "10": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneHeaderConnected" + }, + "11": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneHeaderDisconnected" + }, + "12": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onTabHeaderConnected" + }, + "13": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onTabHeaderDisconnected" + }, + "14": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onSplitterResizeStart" + }, + "15": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onSplitterResizeEnd" + }, + "16": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneClose" + }, + "17": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneScroll" + }, + "18": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPanePinnedToggle" + }, + "19": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onActivePaneChanged" + }, + "20": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneDragStart" + }, + "21": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneDragOver" + }, + "22": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneDragEnd" + }, + "23": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onFloatingPaneResizeMove" + }, + "24": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onFloatingPaneResizeEnd" + }, + "25": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onFloatingPaneResizeStart" + }, + "26": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onLayoutChange" + }, + "27": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "28": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.layout" + }, + "29": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.draggedPane" + }, + "30": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.dropPosition" + }, + "31": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.activePane" + }, + "32": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.allowMaximize" + }, + "33": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.containedInBoundaries" + }, + "34": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.showHeaderIconOnHover" + }, + "35": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.maximizedPane" + }, + "36": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.resourceStrings" + }, + "37": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.allowFloatingPanesResize" + }, + "38": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.disableKeyboardNavigation" + }, + "39": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.allowInnerDock" + }, + "40": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.showPaneHeaders" + }, + "41": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.proximityDock" + }, + "42": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.closeBehavior" + }, + "43": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.unpinBehavior" + }, + "44": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.allowSplitterDock" + }, + "45": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.allowRootDock" + }, + "46": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.autoScrollConfig" + }, + "47": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "48": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type.edgeThreshold" + }, + "49": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type.scrollSpeed" + }, + "50": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.enableDragCursor" + }, + "51": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.dropPane" + }, + "52": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.dropPane" + }, + "53": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.dropPane" + }, + "55": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removePane" + }, + "56": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removePane" + }, + "57": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removePane" + }, + "58": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "pane" + }, + "60": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "pane" + }, + "61": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.focusPane" + }, + "62": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.focusPane" + }, + "63": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.focusPane" + }, + "64": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "contentId" + }, + "66": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "contentId" + }, + "67": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.addEventListener" + }, + "68": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.addEventListener" + }, + "69": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.addEventListener" + }, + "70": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "K" + }, + "71": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "72": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "73": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "74": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "75": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "this" + }, + "76": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "ev" + }, + "77": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "78": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.addEventListener" + }, + "79": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "80": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "81": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "83": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "84": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "85": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "86": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "87": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "this" + }, + "88": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "ev" + }, + "89": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "91": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "92": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "93": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "94": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removeEventListener" + }, + "95": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removeEventListener" + }, + "96": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removeEventListener" + }, + "97": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "K" + }, + "98": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "99": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "100": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "101": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "102": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "this" + }, + "103": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "ev" + }, + "104": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "105": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerComponent.removeEventListener" + }, + "106": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "107": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "108": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "110": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "111": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "112": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "113": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "__type" + }, + "114": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "this" + }, + "115": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "ev" + }, + "116": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "118": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "type" + }, + "119": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "listener" + }, + "120": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "options" + }, + "121": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneHeaderConnected" + }, + "125": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneHeaderDisconnected" + }, + "129": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onTabHeaderConnected" + }, + "133": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onTabHeaderDisconnected" + }, + "137": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onSplitterResizeStart" + }, + "141": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onSplitterResizeEnd" + }, + "145": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneClose" + }, + "149": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneScroll" + }, + "153": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPanePinnedToggle" + }, + "157": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onActivePaneChanged" + }, + "161": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneDragStart" + }, + "165": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneDragOver" + }, + "169": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onPaneDragEnd" + }, + "173": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onFloatingPaneResizeMove" + }, + "177": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onFloatingPaneResizeEnd" + }, + "181": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onFloatingPaneResizeStart" + }, + "185": { + "sourceFileName": "src/dock-manager/index.ts", + "qualifiedName": "__object.onLayoutChange" + }, + "194": { + "sourceFileName": "src/grids/index.ts", + "qualifiedName": "" + }, + "52140": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/button.d.ts", + "qualifiedName": "default" + }, + "52145": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52146": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52147": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52148": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/button.d.ts", + "qualifiedName": "default.variant" + }, + "52150": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default" + }, + "52155": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52156": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52157": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52158": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.name" + }, + "52159": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.collection" + }, + "52160": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.mirrored" + }, + "52161": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52162": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52163": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52165": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "52166": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "52167": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "52170": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default" + }, + "52175": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52176": { + "sourceFileName": "src/components/calendar.ts", + "qualifiedName": "__object" + }, + "52177": { + "sourceFileName": "src/components/calendar.ts", + "qualifiedName": "__object.onChange" + }, + "52178": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52179": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.hideOutsideDays" + }, + "52180": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.hideHeader" + }, + "52181": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.headerOrientation" + }, + "52182": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.orientation" + }, + "52183": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.visibleMonths" + }, + "52184": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.activeView" + }, + "52185": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.formatOptions" + }, + "52186": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/calendar.d.ts", + "qualifiedName": "default.resourceStrings" + }, + "52187": { + "sourceFileName": "src/components/calendar.ts", + "qualifiedName": "__object.onChange" + }, + "52192": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default" + }, + "52197": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52198": { + "sourceFileName": "src/components/date-time-input.ts", + "qualifiedName": "__object" + }, + "52199": { + "sourceFileName": "src/components/date-time-input.ts", + "qualifiedName": "__object.onInput" + }, + "52200": { + "sourceFileName": "src/components/date-time-input.ts", + "qualifiedName": "__object.onChange" + }, + "52201": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52202": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.inputFormat" + }, + "52203": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.value" + }, + "52204": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.min" + }, + "52205": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.max" + }, + "52206": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.displayFormat" + }, + "52207": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.spinDelta" + }, + "52208": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.spinLoop" + }, + "52209": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.locale" + }, + "52210": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52211": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52212": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52214": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.stepUp" + }, + "52215": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.stepUp" + }, + "52216": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.stepUp" + }, + "52217": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "datePart" + }, + "52218": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "delta" + }, + "52220": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "datePart" + }, + "52221": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "delta" + }, + "52222": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.stepDown" + }, + "52223": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.stepDown" + }, + "52224": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.stepDown" + }, + "52225": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "datePart" + }, + "52226": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "delta" + }, + "52228": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "datePart" + }, + "52229": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "delta" + }, + "52230": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.clear" + }, + "52231": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.clear" + }, + "52232": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-time-input.d.ts", + "qualifiedName": "default.clear" + }, + "52234": { + "sourceFileName": "src/components/date-time-input.ts", + "qualifiedName": "__object.onInput" + }, + "52238": { + "sourceFileName": "src/components/date-time-input.ts", + "qualifiedName": "__object.onChange" + }, + "52243": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default" + }, + "52248": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52249": { + "sourceFileName": "src/components/dialog.ts", + "qualifiedName": "__object" + }, + "52250": { + "sourceFileName": "src/components/dialog.ts", + "qualifiedName": "__object.onClosing" + }, + "52251": { + "sourceFileName": "src/components/dialog.ts", + "qualifiedName": "__object.onClosed" + }, + "52252": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52253": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.keepOpenOnEscape" + }, + "52254": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.closeOnOutsideClick" + }, + "52255": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.hideDefaultAction" + }, + "52256": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.open" + }, + "52257": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.title" + }, + "52258": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.returnValue" + }, + "52259": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.show" + }, + "52260": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.show" + }, + "52261": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.show" + }, + "52263": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.hide" + }, + "52264": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.hide" + }, + "52265": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.hide" + }, + "52267": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.toggle" + }, + "52268": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.toggle" + }, + "52269": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dialog/dialog.d.ts", + "qualifiedName": "default.toggle" + }, + "52271": { + "sourceFileName": "src/components/dialog.ts", + "qualifiedName": "__object.onClosing" + }, + "52275": { + "sourceFileName": "src/components/dialog.ts", + "qualifiedName": "__object.onClosed" + }, + "52280": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default" + }, + "52285": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52286": { + "sourceFileName": "src/components/input.ts", + "qualifiedName": "__object" + }, + "52287": { + "sourceFileName": "src/components/input.ts", + "qualifiedName": "__object.onInput" + }, + "52288": { + "sourceFileName": "src/components/input.ts", + "qualifiedName": "__object.onChange" + }, + "52289": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52290": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.value" + }, + "52291": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.type" + }, + "52292": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.inputMode" + }, + "52293": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.pattern" + }, + "52294": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.minLength" + }, + "52295": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.maxLength" + }, + "52296": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.min" + }, + "52297": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.max" + }, + "52298": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.step" + }, + "52299": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.autofocus" + }, + "52300": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.autocomplete" + }, + "52301": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.validateOnly" + }, + "52302": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.setRangeText" + }, + "52303": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.setRangeText" + }, + "52304": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.setRangeText" + }, + "52305": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "replacement" + }, + "52306": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "start" + }, + "52307": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "end" + }, + "52308": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "selectMode" + }, + "52310": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "replacement" + }, + "52311": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "start" + }, + "52312": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "end" + }, + "52313": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "selectMode" + }, + "52314": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.select" + }, + "52315": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.select" + }, + "52316": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.select" + }, + "52318": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.stepUp" + }, + "52319": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.stepUp" + }, + "52320": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.stepUp" + }, + "52321": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "n" + }, + "52323": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "n" + }, + "52324": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.stepDown" + }, + "52325": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.stepDown" + }, + "52326": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "default.stepDown" + }, + "52327": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "n" + }, + "52329": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/input/input.d.ts", + "qualifiedName": "n" + }, + "52330": { + "sourceFileName": "src/components/input.ts", + "qualifiedName": "__object.onInput" + }, + "52334": { + "sourceFileName": "src/components/input.ts", + "qualifiedName": "__object.onChange" + }, + "52339": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chip/chip.d.ts", + "qualifiedName": "default" + }, + "52344": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52345": { + "sourceFileName": "src/components/chip.ts", + "qualifiedName": "__object" + }, + "52346": { + "sourceFileName": "src/components/chip.ts", + "qualifiedName": "__object.onRemove" + }, + "52347": { + "sourceFileName": "src/components/chip.ts", + "qualifiedName": "__object.onSelect" + }, + "52348": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52349": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chip/chip.d.ts", + "qualifiedName": "default.disabled" + }, + "52350": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chip/chip.d.ts", + "qualifiedName": "default.removable" + }, + "52351": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chip/chip.d.ts", + "qualifiedName": "default.selectable" + }, + "52352": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chip/chip.d.ts", + "qualifiedName": "default.selected" + }, + "52353": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chip/chip.d.ts", + "qualifiedName": "default.variant" + }, + "52354": { + "sourceFileName": "src/components/chip.ts", + "qualifiedName": "__object.onRemove" + }, + "52358": { + "sourceFileName": "src/components/chip.ts", + "qualifiedName": "__object.onSelect" + }, + "52363": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default" + }, + "52368": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52369": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object" + }, + "52370": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onOpening" + }, + "52371": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onOpened" + }, + "52372": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onClosing" + }, + "52373": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onClosed" + }, + "52374": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onChange" + }, + "52375": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onInput" + }, + "52376": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52377": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.value" + }, + "52378": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.customRanges" + }, + "52379": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.mode" + }, + "52380": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.useTwoInputs" + }, + "52381": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.usePredefinedRanges" + }, + "52382": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.locale" + }, + "52383": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.resourceStrings" + }, + "52384": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.readOnly" + }, + "52385": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.nonEditable" + }, + "52386": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.outlined" + }, + "52387": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.label" + }, + "52388": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.labelStart" + }, + "52389": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.labelEnd" + }, + "52390": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.placeholder" + }, + "52391": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.placeholderStart" + }, + "52392": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.placeholderEnd" + }, + "52393": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.prompt" + }, + "52394": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.displayFormat" + }, + "52395": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.inputFormat" + }, + "52396": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.min" + }, + "52397": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.max" + }, + "52398": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.disabledDates" + }, + "52399": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.visibleMonths" + }, + "52400": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.headerOrientation" + }, + "52401": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.orientation" + }, + "52402": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.hideHeader" + }, + "52403": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.activeDate" + }, + "52404": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.showWeekNumbers" + }, + "52405": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.hideOutsideDays" + }, + "52406": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.specialDates" + }, + "52407": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.weekStart" + }, + "52408": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.clear" + }, + "52409": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.clear" + }, + "52410": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.clear" + }, + "52412": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.select" + }, + "52413": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.select" + }, + "52414": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "default.select" + }, + "52415": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "value" + }, + "52417": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "value" + }, + "52418": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onOpening" + }, + "52422": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onOpened" + }, + "52426": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onClosing" + }, + "52430": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onClosed" + }, + "52434": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onChange" + }, + "52438": { + "sourceFileName": "src/components/date-range-picker.ts", + "qualifiedName": "__object.onInput" + }, + "52443": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/file-input/file-input.d.ts", + "qualifiedName": "default" + }, + "52448": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52449": { + "sourceFileName": "src/components/file-input.ts", + "qualifiedName": "__object" + }, + "52450": { + "sourceFileName": "src/components/file-input.ts", + "qualifiedName": "__object.onChange" + }, + "52451": { + "sourceFileName": "src/components/file-input.ts", + "qualifiedName": "__object.onCancel" + }, + "52452": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52453": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/file-input/file-input.d.ts", + "qualifiedName": "default.value" + }, + "52454": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/file-input/file-input.d.ts", + "qualifiedName": "default.multiple" + }, + "52455": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/file-input/file-input.d.ts", + "qualifiedName": "default.accept" + }, + "52456": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/file-input/file-input.d.ts", + "qualifiedName": "default.autofocus" + }, + "52457": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/file-input/file-input.d.ts", + "qualifiedName": "default.files" + }, + "52466": { + "sourceFileName": "src/components/file-input.ts", + "qualifiedName": "__object.onChange" + }, + "52470": { + "sourceFileName": "src/components/file-input.ts", + "qualifiedName": "__object.onCancel" + }, + "52475": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/avatar/avatar.d.ts", + "qualifiedName": "default" + }, + "52480": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52481": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52482": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52483": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/avatar/avatar.d.ts", + "qualifiedName": "default.src" + }, + "52484": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/avatar/avatar.d.ts", + "qualifiedName": "default.alt" + }, + "52485": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/avatar/avatar.d.ts", + "qualifiedName": "default.initials" + }, + "52486": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/avatar/avatar.d.ts", + "qualifiedName": "default.shape" + }, + "52488": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default" + }, + "52493": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52494": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object" + }, + "52495": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onOpening" + }, + "52496": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onOpened" + }, + "52497": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onClosing" + }, + "52498": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onClosed" + }, + "52499": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52500": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.open" + }, + "52501": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.disabled" + }, + "52502": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.indicatorPosition" + }, + "52503": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52504": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52505": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "52507": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.toggle" + }, + "52508": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.toggle" + }, + "52509": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.toggle" + }, + "52511": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.hide" + }, + "52512": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.hide" + }, + "52513": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.hide" + }, + "52515": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.show" + }, + "52516": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.show" + }, + "52517": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/expansion-panel/expansion-panel.d.ts", + "qualifiedName": "default.show" + }, + "52519": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onOpening" + }, + "52523": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onOpened" + }, + "52527": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onClosing" + }, + "52531": { + "sourceFileName": "src/components/expansion-panel.ts", + "qualifiedName": "__object.onClosed" + }, + "52536": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default" + }, + "52541": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52542": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object" + }, + "52543": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onOpening" + }, + "52544": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onOpened" + }, + "52545": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onClosing" + }, + "52546": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onClosed" + }, + "52547": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52548": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.singleExpand" + }, + "52549": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.panels" + }, + "52550": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.hideAll" + }, + "52551": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.hideAll" + }, + "52552": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.hideAll" + }, + "52554": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.showAll" + }, + "52555": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.showAll" + }, + "52556": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/accordion/accordion.d.ts", + "qualifiedName": "default.showAll" + }, + "52558": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onOpening" + }, + "52562": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onOpened" + }, + "52566": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onClosing" + }, + "52570": { + "sourceFileName": "src/components/accordion.ts", + "qualifiedName": "__object.onClosed" + }, + "52575": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/badge/badge.d.ts", + "qualifiedName": "default" + }, + "52580": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52581": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52582": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52583": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/badge/badge.d.ts", + "qualifiedName": "default.variant" + }, + "52584": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/badge/badge.d.ts", + "qualifiedName": "default.outlined" + }, + "52585": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/badge/badge.d.ts", + "qualifiedName": "default.shape" + }, + "52587": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default" + }, + "52592": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52593": { + "sourceFileName": "src/components/banner.ts", + "qualifiedName": "__object" + }, + "52594": { + "sourceFileName": "src/components/banner.ts", + "qualifiedName": "__object.onClosing" + }, + "52595": { + "sourceFileName": "src/components/banner.ts", + "qualifiedName": "__object.onClosed" + }, + "52596": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52597": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.open" + }, + "52598": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.show" + }, + "52599": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.show" + }, + "52600": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.show" + }, + "52602": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.hide" + }, + "52603": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.hide" + }, + "52604": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.hide" + }, + "52606": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.toggle" + }, + "52607": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.toggle" + }, + "52608": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/banner/banner.d.ts", + "qualifiedName": "default.toggle" + }, + "52610": { + "sourceFileName": "src/components/banner.ts", + "qualifiedName": "__object.onClosing" + }, + "52614": { + "sourceFileName": "src/components/banner.ts", + "qualifiedName": "__object.onClosed" + }, + "52619": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default" + }, + "52624": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52625": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52626": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52627": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.value" + }, + "52628": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.selected" + }, + "52629": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.disabled" + }, + "52630": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.focus" + }, + "52631": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.focus" + }, + "52632": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.focus" + }, + "52633": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "options" + }, + "52635": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "options" + }, + "52636": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.blur" + }, + "52637": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.blur" + }, + "52638": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.blur" + }, + "52640": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.click" + }, + "52641": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.click" + }, + "52642": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/toggle-button.d.ts", + "qualifiedName": "default.click" + }, + "52645": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/button-group.d.ts", + "qualifiedName": "default" + }, + "52650": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52651": { + "sourceFileName": "src/components/button-group.ts", + "qualifiedName": "__object" + }, + "52652": { + "sourceFileName": "src/components/button-group.ts", + "qualifiedName": "__object.onSelect" + }, + "52653": { + "sourceFileName": "src/components/button-group.ts", + "qualifiedName": "__object.onDeselect" + }, + "52654": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52655": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/button-group.d.ts", + "qualifiedName": "default.disabled" + }, + "52656": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/button-group.d.ts", + "qualifiedName": "default.alignment" + }, + "52657": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/button-group.d.ts", + "qualifiedName": "default.selection" + }, + "52658": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button-group/button-group.d.ts", + "qualifiedName": "default.selectedItems" + }, + "52659": { + "sourceFileName": "src/components/button-group.ts", + "qualifiedName": "__object.onSelect" + }, + "52663": { + "sourceFileName": "src/components/button-group.ts", + "qualifiedName": "__object.onDeselect" + }, + "52668": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.actions.d.ts", + "qualifiedName": "default" + }, + "52673": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52674": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52675": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52676": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.actions.d.ts", + "qualifiedName": "default.orientation" + }, + "52678": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.content.d.ts", + "qualifiedName": "default" + }, + "52683": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52684": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52685": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52687": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.header.d.ts", + "qualifiedName": "default" + }, + "52692": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52693": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52694": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52696": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.media.d.ts", + "qualifiedName": "default" + }, + "52701": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52702": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52703": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52705": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.d.ts", + "qualifiedName": "default" + }, + "52710": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52711": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52712": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52713": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/card/card.d.ts", + "qualifiedName": "default.elevated" + }, + "52715": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/toast/toast.d.ts", + "qualifiedName": "default" + }, + "52720": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52721": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52722": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52724": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default" + }, + "52729": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52730": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object" + }, + "52731": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onOpening" + }, + "52732": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onOpened" + }, + "52733": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onClosing" + }, + "52734": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onClosed" + }, + "52735": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52736": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.open" + }, + "52737": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.disableArrow" + }, + "52738": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.withArrow" + }, + "52739": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.offset" + }, + "52740": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.placement" + }, + "52741": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.anchor" + }, + "52742": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.showTriggers" + }, + "52743": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.hideTriggers" + }, + "52744": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.showDelay" + }, + "52745": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.hideDelay" + }, + "52746": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.message" + }, + "52747": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.sticky" + }, + "52748": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.show" + }, + "52749": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.show" + }, + "52750": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.show" + }, + "52751": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "target" + }, + "52753": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "target" + }, + "52754": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.hide" + }, + "52755": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.hide" + }, + "52756": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.hide" + }, + "52758": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.toggle" + }, + "52759": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.toggle" + }, + "52760": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tooltip/tooltip.d.ts", + "qualifiedName": "default.toggle" + }, + "52762": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onOpening" + }, + "52766": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onOpened" + }, + "52770": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onClosing" + }, + "52774": { + "sourceFileName": "src/components/tooltip.ts", + "qualifiedName": "__object.onClosed" + }, + "52779": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/list/list-header.d.ts", + "qualifiedName": "default" + }, + "52784": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52785": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52786": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52788": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/list/list-item.d.ts", + "qualifiedName": "default" + }, + "52793": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52794": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52795": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52796": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/list/list-item.d.ts", + "qualifiedName": "default.selected" + }, + "52798": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/list/list.d.ts", + "qualifiedName": "default" + }, + "52803": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52804": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52805": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52807": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/icon-button.d.ts", + "qualifiedName": "default" + }, + "52812": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52813": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52814": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52815": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/icon-button.d.ts", + "qualifiedName": "default.name" + }, + "52816": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/icon-button.d.ts", + "qualifiedName": "default.collection" + }, + "52817": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/icon-button.d.ts", + "qualifiedName": "default.mirrored" + }, + "52818": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/button/icon-button.d.ts", + "qualifiedName": "default.variant" + }, + "52820": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default" + }, + "52825": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52826": { + "sourceFileName": "src/components/textarea.ts", + "qualifiedName": "__object" + }, + "52827": { + "sourceFileName": "src/components/textarea.ts", + "qualifiedName": "__object.onInput" + }, + "52828": { + "sourceFileName": "src/components/textarea.ts", + "qualifiedName": "__object.onChange" + }, + "52829": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52830": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.autocomplete" + }, + "52831": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.autocapitalize" + }, + "52832": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.inputMode" + }, + "52833": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.label" + }, + "52834": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.maxLength" + }, + "52835": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.minLength" + }, + "52836": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.outlined" + }, + "52837": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.placeholder" + }, + "52838": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.readOnly" + }, + "52839": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.resize" + }, + "52840": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.rows" + }, + "52841": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.value" + }, + "52842": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.spellcheck" + }, + "52843": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.wrap" + }, + "52844": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.validateOnly" + }, + "52845": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.select" + }, + "52846": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.select" + }, + "52847": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.select" + }, + "52849": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.setSelectionRange" + }, + "52850": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.setSelectionRange" + }, + "52851": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.setSelectionRange" + }, + "52852": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "start" + }, + "52853": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "end" + }, + "52854": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "direction" + }, + "52856": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "start" + }, + "52857": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "end" + }, + "52858": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "direction" + }, + "52859": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.setRangeText" + }, + "52860": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.setRangeText" + }, + "52861": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.setRangeText" + }, + "52862": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "replacement" + }, + "52863": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "start" + }, + "52864": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "end" + }, + "52865": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "selectMode" + }, + "52867": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "replacement" + }, + "52868": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "start" + }, + "52869": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "end" + }, + "52870": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "selectMode" + }, + "52871": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.scrollTo" + }, + "52872": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.scrollTo" + }, + "52873": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.scrollTo" + }, + "52874": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "options" + }, + "52875": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "default.scrollTo" + }, + "52876": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "x" + }, + "52877": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "y" + }, + "52879": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "options" + }, + "52881": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "x" + }, + "52882": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/textarea/textarea.d.ts", + "qualifiedName": "y" + }, + "52883": { + "sourceFileName": "src/components/textarea.ts", + "qualifiedName": "__object.onInput" + }, + "52887": { + "sourceFileName": "src/components/textarea.ts", + "qualifiedName": "__object.onChange" + }, + "52892": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default" + }, + "52897": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52898": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object" + }, + "52899": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onMessageCreated" + }, + "52900": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onMessageReact" + }, + "52901": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentClick" + }, + "52902": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentAdded" + }, + "52903": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentRemoved" + }, + "52904": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentDrag" + }, + "52905": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentDrop" + }, + "52906": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onTypingChange" + }, + "52907": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onInputFocus" + }, + "52908": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onInputBlur" + }, + "52909": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onInputChange" + }, + "52910": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object" + }, + "52911": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.options" + }, + "52912": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object" + }, + "52913": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.renderers" + }, + "52914": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object" + }, + "52915": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.attachment" + }, + "52916": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.attachmentContent" + }, + "52917": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.attachmentHeader" + }, + "52918": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.fileUploadButton" + }, + "52919": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.input" + }, + "52920": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.inputActions" + }, + "52921": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.inputActionsEnd" + }, + "52922": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.inputActionsStart" + }, + "52923": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.inputAttachments" + }, + "52924": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.message" + }, + "52925": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.messageActions" + }, + "52926": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.messageAttachments" + }, + "52927": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.messageContent" + }, + "52928": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.messageHeader" + }, + "52929": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.typingIndicator" + }, + "52930": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.sendButton" + }, + "52931": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.suggestionPrefix" + }, + "52932": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.messages" + }, + "52933": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.draftMessage" + }, + "52934": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "__type" + }, + "52935": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "__type.text" + }, + "52936": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "__type.attachments" + }, + "52937": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.options" + }, + "52938": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.resourceStrings" + }, + "52939": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.scrollToMessage" + }, + "52940": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.scrollToMessage" + }, + "52941": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "default.scrollToMessage" + }, + "52942": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "messageId" + }, + "52944": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/chat.d.ts", + "qualifiedName": "messageId" + }, + "52945": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onMessageCreated" + }, + "52949": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onMessageReact" + }, + "52953": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentClick" + }, + "52957": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentAdded" + }, + "52961": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentRemoved" + }, + "52965": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentDrag" + }, + "52969": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onAttachmentDrop" + }, + "52973": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onTypingChange" + }, + "52977": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onInputFocus" + }, + "52981": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onInputBlur" + }, + "52985": { + "sourceFileName": "src/components/chat.ts", + "qualifiedName": "__object.onInputChange" + }, + "52990": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/divider/divider.d.ts", + "qualifiedName": "default" + }, + "52995": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "52996": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52997": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "52998": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/divider/divider.d.ts", + "qualifiedName": "default.vertical" + }, + "52999": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/divider/divider.d.ts", + "qualifiedName": "default.middle" + }, + "53000": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/divider/divider.d.ts", + "qualifiedName": "default.type" + }, + "53002": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default" + }, + "53007": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53008": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object" + }, + "53009": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileFullscreen" + }, + "53010": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileMaximize" + }, + "53011": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileDragStart" + }, + "53012": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileDragEnd" + }, + "53013": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileDragCancel" + }, + "53014": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileResizeStart" + }, + "53015": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileResizeEnd" + }, + "53016": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileResizeCancel" + }, + "53017": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53018": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.colSpan" + }, + "53019": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.rowSpan" + }, + "53020": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.colStart" + }, + "53021": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.rowStart" + }, + "53022": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.fullscreen" + }, + "53023": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.maximized" + }, + "53024": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.disableResize" + }, + "53025": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.disableFullscreen" + }, + "53026": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.disableMaximize" + }, + "53027": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "default.position" + }, + "53032": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileFullscreen" + }, + "53036": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileMaximize" + }, + "53040": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileDragStart" + }, + "53044": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileDragEnd" + }, + "53048": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileDragCancel" + }, + "53052": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileResizeStart" + }, + "53056": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileResizeEnd" + }, + "53060": { + "sourceFileName": "src/components/tile.ts", + "qualifiedName": "__object.onTileResizeCancel" + }, + "53065": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default" + }, + "53070": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53071": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object" + }, + "53072": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileFullscreen" + }, + "53073": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileMaximize" + }, + "53074": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileDragStart" + }, + "53075": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileDragEnd" + }, + "53076": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileDragCancel" + }, + "53077": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileResizeStart" + }, + "53078": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileResizeEnd" + }, + "53079": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileResizeCancel" + }, + "53080": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53081": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.resizeMode" + }, + "53082": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.dragMode" + }, + "53083": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.columnCount" + }, + "53084": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.minColumnWidth" + }, + "53085": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.minRowHeight" + }, + "53086": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.gap" + }, + "53087": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.tiles" + }, + "53088": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.saveLayout" + }, + "53089": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.saveLayout" + }, + "53090": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.saveLayout" + }, + "53092": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.loadLayout" + }, + "53093": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.loadLayout" + }, + "53094": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "default.loadLayout" + }, + "53095": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "data" + }, + "53097": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile-manager.d.ts", + "qualifiedName": "data" + }, + "53098": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileFullscreen" + }, + "53102": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileMaximize" + }, + "53106": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileDragStart" + }, + "53110": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileDragEnd" + }, + "53114": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileDragCancel" + }, + "53118": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileResizeStart" + }, + "53122": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileResizeEnd" + }, + "53126": { + "sourceFileName": "src/components/tile-manager.ts", + "qualifiedName": "__object.onTileResizeCancel" + }, + "53131": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel-indicator.d.ts", + "qualifiedName": "default" + }, + "53136": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53137": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53138": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53139": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel-indicator.d.ts", + "qualifiedName": "default.active" + }, + "53140": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel-indicator.d.ts", + "qualifiedName": "default.index" + }, + "53146": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel-slide.d.ts", + "qualifiedName": "default" + }, + "53151": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53152": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53153": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53154": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel-slide.d.ts", + "qualifiedName": "default.active" + }, + "53155": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel-slide.d.ts", + "qualifiedName": "default.previous" + }, + "53169": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default" + }, + "53174": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53175": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object" + }, + "53176": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object.onSlideChanged" + }, + "53177": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object.onPlaying" + }, + "53178": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object.onPaused" + }, + "53179": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53180": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.disableLoop" + }, + "53181": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.disablePauseOnInteraction" + }, + "53182": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.hideNavigation" + }, + "53183": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.hideIndicators" + }, + "53184": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.vertical" + }, + "53185": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.indicatorsOrientation" + }, + "53186": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.indicatorsLabelFormat" + }, + "53187": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.slidesLabelFormat" + }, + "53188": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.interval" + }, + "53189": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.maximumIndicatorsCount" + }, + "53190": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.animationType" + }, + "53191": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.slides" + }, + "53192": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.total" + }, + "53193": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.current" + }, + "53194": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.isPlaying" + }, + "53195": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.isPaused" + }, + "53196": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.play" + }, + "53197": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.play" + }, + "53198": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.play" + }, + "53200": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.pause" + }, + "53201": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.pause" + }, + "53202": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.pause" + }, + "53204": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.next" + }, + "53205": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.next" + }, + "53206": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.next" + }, + "53208": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.prev" + }, + "53209": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.prev" + }, + "53210": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.prev" + }, + "53212": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.select" + }, + "53213": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.select" + }, + "53214": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.select" + }, + "53215": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "slide" + }, + "53216": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "animationDirection" + }, + "53217": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "default.select" + }, + "53218": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "index" + }, + "53219": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "animationDirection" + }, + "53221": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "slide" + }, + "53222": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "animationDirection" + }, + "53224": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "index" + }, + "53225": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/carousel/carousel.d.ts", + "qualifiedName": "animationDirection" + }, + "53226": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object.onSlideChanged" + }, + "53230": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object.onPlaying" + }, + "53234": { + "sourceFileName": "src/components/carousel.ts", + "qualifiedName": "__object.onPaused" + }, + "53239": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox.d.ts", + "qualifiedName": "default" + }, + "53244": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53245": { + "sourceFileName": "src/components/checkbox.ts", + "qualifiedName": "__object" + }, + "53246": { + "sourceFileName": "src/components/checkbox.ts", + "qualifiedName": "__object.onChange" + }, + "53247": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53248": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox.d.ts", + "qualifiedName": "default.indeterminate" + }, + "53249": { + "sourceFileName": "src/components/checkbox.ts", + "qualifiedName": "__object.onChange" + }, + "53254": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/circular-gradient.d.ts", + "qualifiedName": "default" + }, + "53259": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53260": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53261": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53262": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/circular-gradient.d.ts", + "qualifiedName": "default.offset" + }, + "53263": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/circular-gradient.d.ts", + "qualifiedName": "default.color" + }, + "53264": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/circular-gradient.d.ts", + "qualifiedName": "default.opacity" + }, + "53266": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/circular-progress.d.ts", + "qualifiedName": "default" + }, + "53271": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53272": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53273": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53275": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default" + }, + "53280": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53281": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object" + }, + "53282": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onChange" + }, + "53283": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onOpening" + }, + "53284": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onOpened" + }, + "53285": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onClosing" + }, + "53286": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onClosed" + }, + "53287": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object" + }, + "53288": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.itemTemplate" + }, + "53289": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.groupHeaderTemplate" + }, + "53290": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.data" + }, + "53291": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.outlined" + }, + "53292": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.singleSelect" + }, + "53293": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.autofocus" + }, + "53294": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.autofocusList" + }, + "53295": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.label" + }, + "53296": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.placeholder" + }, + "53297": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.placeholderSearch" + }, + "53298": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.open" + }, + "53299": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.valueKey" + }, + "53300": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.displayKey" + }, + "53301": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.groupKey" + }, + "53302": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.groupSorting" + }, + "53303": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.filteringOptions" + }, + "53304": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.caseSensitiveIcon" + }, + "53305": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.disableFiltering" + }, + "53306": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.itemTemplate" + }, + "53307": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.groupHeaderTemplate" + }, + "53308": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.value" + }, + "53309": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.focus" + }, + "53310": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.focus" + }, + "53311": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.focus" + }, + "53312": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "options" + }, + "53314": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "options" + }, + "53315": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.blur" + }, + "53316": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.blur" + }, + "53317": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.blur" + }, + "53319": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.selection" + }, + "53320": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.select" + }, + "53321": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.select" + }, + "53322": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.select" + }, + "53323": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "items" + }, + "53325": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "items" + }, + "53326": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.deselect" + }, + "53327": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.deselect" + }, + "53328": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.deselect" + }, + "53329": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "items" + }, + "53331": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "items" + }, + "53332": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.show" + }, + "53333": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.show" + }, + "53334": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.show" + }, + "53336": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.hide" + }, + "53337": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.hide" + }, + "53338": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.hide" + }, + "53340": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.toggle" + }, + "53341": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.toggle" + }, + "53342": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/combo.d.ts", + "qualifiedName": "default.toggle" + }, + "53344": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onChange" + }, + "53348": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onOpening" + }, + "53352": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onOpened" + }, + "53356": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onClosing" + }, + "53360": { + "sourceFileName": "src/components/combo.ts", + "qualifiedName": "__object.onClosed" + }, + "53365": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default" + }, + "53370": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53371": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object" + }, + "53372": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onOpening" + }, + "53373": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onOpened" + }, + "53374": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onClosing" + }, + "53375": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onClosed" + }, + "53376": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onChange" + }, + "53377": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onInput" + }, + "53378": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53379": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.open" + }, + "53380": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.label" + }, + "53381": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.mode" + }, + "53382": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.nonEditable" + }, + "53383": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.readOnly" + }, + "53384": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.value" + }, + "53385": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.activeDate" + }, + "53386": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.min" + }, + "53387": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.max" + }, + "53388": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.headerOrientation" + }, + "53389": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.orientation" + }, + "53390": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.hideHeader" + }, + "53391": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.hideOutsideDays" + }, + "53392": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.disabledDates" + }, + "53393": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.specialDates" + }, + "53394": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.outlined" + }, + "53395": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.placeholder" + }, + "53396": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.visibleMonths" + }, + "53397": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.showWeekNumbers" + }, + "53398": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.displayFormat" + }, + "53399": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.inputFormat" + }, + "53400": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.locale" + }, + "53401": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.prompt" + }, + "53402": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.resourceStrings" + }, + "53403": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.weekStart" + }, + "53404": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.clear" + }, + "53405": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.clear" + }, + "53406": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.clear" + }, + "53408": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.stepUp" + }, + "53409": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.stepUp" + }, + "53410": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.stepUp" + }, + "53411": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "datePart" + }, + "53412": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "delta" + }, + "53414": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "datePart" + }, + "53415": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "delta" + }, + "53416": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.stepDown" + }, + "53417": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.stepDown" + }, + "53418": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.stepDown" + }, + "53419": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "datePart" + }, + "53420": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "delta" + }, + "53422": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "datePart" + }, + "53423": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "delta" + }, + "53424": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.select" + }, + "53425": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.select" + }, + "53426": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.select" + }, + "53428": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.setSelectionRange" + }, + "53429": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.setSelectionRange" + }, + "53430": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.setSelectionRange" + }, + "53431": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "start" + }, + "53432": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "end" + }, + "53433": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "direction" + }, + "53435": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "start" + }, + "53436": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "end" + }, + "53437": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "direction" + }, + "53438": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.setRangeText" + }, + "53439": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.setRangeText" + }, + "53440": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "default.setRangeText" + }, + "53441": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "replacement" + }, + "53442": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "start" + }, + "53443": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "end" + }, + "53444": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "mode" + }, + "53446": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "replacement" + }, + "53447": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "start" + }, + "53448": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "end" + }, + "53449": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-picker/date-picker.d.ts", + "qualifiedName": "mode" + }, + "53450": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onOpening" + }, + "53454": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onOpened" + }, + "53458": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onClosing" + }, + "53462": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onClosed" + }, + "53466": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onChange" + }, + "53470": { + "sourceFileName": "src/components/date-picker.ts", + "qualifiedName": "__object.onInput" + }, + "53475": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown-item.d.ts", + "qualifiedName": "default" + }, + "53480": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53481": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53482": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53484": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown-group.d.ts", + "qualifiedName": "default" + }, + "53489": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53490": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53491": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53492": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown-group.d.ts", + "qualifiedName": "default.items" + }, + "53494": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown-header.d.ts", + "qualifiedName": "default" + }, + "53499": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53500": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53501": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53503": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default" + }, + "53508": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53509": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object" + }, + "53510": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onChange" + }, + "53511": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onOpening" + }, + "53512": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onOpened" + }, + "53513": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onClosing" + }, + "53514": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onClosed" + }, + "53515": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53516": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.placement" + }, + "53517": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.scrollStrategy" + }, + "53518": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.flip" + }, + "53519": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.distance" + }, + "53520": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.sameWidth" + }, + "53521": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.items" + }, + "53522": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.groups" + }, + "53523": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.selectedItem" + }, + "53524": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "53525": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "53526": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "53528": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.show" + }, + "53529": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.show" + }, + "53530": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.show" + }, + "53531": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "target" + }, + "53533": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "target" + }, + "53534": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.toggle" + }, + "53535": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.toggle" + }, + "53536": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.toggle" + }, + "53537": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "target" + }, + "53539": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "target" + }, + "53540": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53541": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53542": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53543": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "value" + }, + "53544": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53545": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "index" + }, + "53547": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "value" + }, + "53549": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "index" + }, + "53550": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.select" + }, + "53551": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.select" + }, + "53552": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.select" + }, + "53553": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "value" + }, + "53554": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.select" + }, + "53555": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "index" + }, + "53557": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "value" + }, + "53559": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "index" + }, + "53560": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.clearSelection" + }, + "53561": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.clearSelection" + }, + "53562": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/dropdown/dropdown.d.ts", + "qualifiedName": "default.clearSelection" + }, + "53564": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onChange" + }, + "53568": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onOpening" + }, + "53572": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onOpened" + }, + "53576": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onClosing" + }, + "53580": { + "sourceFileName": "src/components/dropdown.ts", + "qualifiedName": "__object.onClosed" + }, + "53585": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select-item.d.ts", + "qualifiedName": "default" + }, + "53590": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53591": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53592": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53593": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select-item.d.ts", + "qualifiedName": "default.active" + }, + "53595": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select-group.d.ts", + "qualifiedName": "default" + }, + "53600": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53601": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53602": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53603": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select-group.d.ts", + "qualifiedName": "default.items" + }, + "53604": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select-group.d.ts", + "qualifiedName": "default.disabled" + }, + "53606": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select-header.d.ts", + "qualifiedName": "default" + }, + "53611": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53612": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53613": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53615": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default" + }, + "53620": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53621": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object" + }, + "53622": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onChange" + }, + "53623": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onOpening" + }, + "53624": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onOpened" + }, + "53625": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onClosing" + }, + "53626": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onClosed" + }, + "53627": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53628": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.value" + }, + "53629": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.outlined" + }, + "53630": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.autofocus" + }, + "53631": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.distance" + }, + "53632": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.label" + }, + "53633": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.placeholder" + }, + "53634": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.placement" + }, + "53635": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.scrollStrategy" + }, + "53636": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.items" + }, + "53637": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.groups" + }, + "53638": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.selectedItem" + }, + "53639": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.focus" + }, + "53640": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.focus" + }, + "53641": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.focus" + }, + "53642": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "options" + }, + "53644": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "options" + }, + "53645": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.blur" + }, + "53646": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.blur" + }, + "53647": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.blur" + }, + "53649": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.reportValidity" + }, + "53650": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.reportValidity" + }, + "53651": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.reportValidity" + }, + "53653": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53654": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53655": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53656": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "value" + }, + "53657": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.navigateTo" + }, + "53658": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "index" + }, + "53660": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "value" + }, + "53662": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "index" + }, + "53663": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.select" + }, + "53664": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.select" + }, + "53665": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.select" + }, + "53666": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "value" + }, + "53667": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.select" + }, + "53668": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "index" + }, + "53670": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "value" + }, + "53672": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "index" + }, + "53673": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.clearSelection" + }, + "53674": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.clearSelection" + }, + "53675": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/select/select.d.ts", + "qualifiedName": "default.clearSelection" + }, + "53677": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onChange" + }, + "53681": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onOpening" + }, + "53685": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onOpened" + }, + "53689": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onClosing" + }, + "53693": { + "sourceFileName": "src/components/select.ts", + "qualifiedName": "__object.onClosed" + }, + "53698": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/linear-progress.d.ts", + "qualifiedName": "default" + }, + "53703": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53704": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53705": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53706": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/linear-progress.d.ts", + "qualifiedName": "default.striped" + }, + "53707": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/progress/linear-progress.d.ts", + "qualifiedName": "default.labelAlign" + }, + "53709": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/mask-input/mask-input.d.ts", + "qualifiedName": "default" + }, + "53714": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53715": { + "sourceFileName": "src/components/mask-input.ts", + "qualifiedName": "__object" + }, + "53716": { + "sourceFileName": "src/components/mask-input.ts", + "qualifiedName": "__object.onInput" + }, + "53717": { + "sourceFileName": "src/components/mask-input.ts", + "qualifiedName": "__object.onChange" + }, + "53718": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53719": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/mask-input/mask-input.d.ts", + "qualifiedName": "default.valueMode" + }, + "53720": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/mask-input/mask-input.d.ts", + "qualifiedName": "default.value" + }, + "53721": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/mask-input/mask-input.d.ts", + "qualifiedName": "default.mask" + }, + "53722": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/mask-input/mask-input.d.ts", + "qualifiedName": "default.prompt" + }, + "53723": { + "sourceFileName": "src/components/mask-input.ts", + "qualifiedName": "__object.onInput" + }, + "53727": { + "sourceFileName": "src/components/mask-input.ts", + "qualifiedName": "__object.onChange" + }, + "53732": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer-header-item.d.ts", + "qualifiedName": "default" + }, + "53737": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53738": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53739": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53741": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer-item.d.ts", + "qualifiedName": "default" + }, + "53746": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53747": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53748": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53749": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer-item.d.ts", + "qualifiedName": "default.disabled" + }, + "53750": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer-item.d.ts", + "qualifiedName": "default.active" + }, + "53752": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default" + }, + "53757": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53758": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53759": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53760": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.position" + }, + "53761": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.open" + }, + "53762": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.show" + }, + "53763": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.show" + }, + "53764": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.show" + }, + "53766": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.hide" + }, + "53767": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.hide" + }, + "53768": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.hide" + }, + "53770": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.toggle" + }, + "53771": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.toggle" + }, + "53772": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/nav-drawer/nav-drawer.d.ts", + "qualifiedName": "default.toggle" + }, + "53775": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/navbar/navbar.d.ts", + "qualifiedName": "default" + }, + "53780": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53781": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53782": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53784": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default" + }, + "53789": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53790": { + "sourceFileName": "src/components/radio.ts", + "qualifiedName": "__object" + }, + "53791": { + "sourceFileName": "src/components/radio.ts", + "qualifiedName": "__object.onChange" + }, + "53792": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53793": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.required" + }, + "53794": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.value" + }, + "53795": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.checked" + }, + "53796": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.labelPosition" + }, + "53797": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.click" + }, + "53798": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.click" + }, + "53799": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.click" + }, + "53801": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.focus" + }, + "53802": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.focus" + }, + "53803": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.focus" + }, + "53804": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "options" + }, + "53806": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "options" + }, + "53807": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.blur" + }, + "53808": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.blur" + }, + "53809": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.blur" + }, + "53811": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.checkValidity" + }, + "53812": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.checkValidity" + }, + "53813": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.checkValidity" + }, + "53815": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.reportValidity" + }, + "53816": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.reportValidity" + }, + "53817": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.reportValidity" + }, + "53819": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.setCustomValidity" + }, + "53820": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.setCustomValidity" + }, + "53821": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "default.setCustomValidity" + }, + "53822": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "message" + }, + "53824": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "message" + }, + "53825": { + "sourceFileName": "src/components/radio.ts", + "qualifiedName": "__object.onChange" + }, + "53830": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio-group/radio-group.d.ts", + "qualifiedName": "default" + }, + "53835": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53836": { + "sourceFileName": "src/components/radio-group.ts", + "qualifiedName": "__object" + }, + "53837": { + "sourceFileName": "src/components/radio-group.ts", + "qualifiedName": "__object.onChange" + }, + "53838": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53839": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio-group/radio-group.d.ts", + "qualifiedName": "default.alignment" + }, + "53840": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio-group/radio-group.d.ts", + "qualifiedName": "default.defaultValue" + }, + "53841": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio-group/radio-group.d.ts", + "qualifiedName": "default.name" + }, + "53842": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio-group/radio-group.d.ts", + "qualifiedName": "default.value" + }, + "53843": { + "sourceFileName": "src/components/radio-group.ts", + "qualifiedName": "__object.onChange" + }, + "53848": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating-symbol.d.ts", + "qualifiedName": "default" + }, + "53853": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53854": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53855": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53856": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating-symbol.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "53857": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating-symbol.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "53858": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating-symbol.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "53861": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default" + }, + "53866": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53867": { + "sourceFileName": "src/components/rating.ts", + "qualifiedName": "__object" + }, + "53868": { + "sourceFileName": "src/components/rating.ts", + "qualifiedName": "__object.onChange" + }, + "53869": { + "sourceFileName": "src/components/rating.ts", + "qualifiedName": "__object.onHover" + }, + "53870": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53871": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.max" + }, + "53872": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.step" + }, + "53873": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.label" + }, + "53874": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.valueFormat" + }, + "53875": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.value" + }, + "53876": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.hoverPreview" + }, + "53877": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.readOnly" + }, + "53878": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.single" + }, + "53879": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.allowReset" + }, + "53880": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.stepUp" + }, + "53881": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.stepUp" + }, + "53882": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.stepUp" + }, + "53883": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "n" + }, + "53885": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "n" + }, + "53886": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.stepDown" + }, + "53887": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.stepDown" + }, + "53888": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "default.stepDown" + }, + "53889": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "n" + }, + "53891": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/rating/rating.d.ts", + "qualifiedName": "n" + }, + "53892": { + "sourceFileName": "src/components/rating.ts", + "qualifiedName": "__object.onChange" + }, + "53896": { + "sourceFileName": "src/components/rating.ts", + "qualifiedName": "__object.onHover" + }, + "53901": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/ripple/ripple.d.ts", + "qualifiedName": "default" + }, + "53906": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53907": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53908": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53910": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider-label.d.ts", + "qualifiedName": "default" + }, + "53915": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53916": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53917": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53919": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "default" + }, + "53924": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53925": { + "sourceFileName": "src/components/range-slider.ts", + "qualifiedName": "__object" + }, + "53926": { + "sourceFileName": "src/components/range-slider.ts", + "qualifiedName": "__object.onInput" + }, + "53927": { + "sourceFileName": "src/components/range-slider.ts", + "qualifiedName": "__object.onChange" + }, + "53928": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53929": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "default.lower" + }, + "53930": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "default.upper" + }, + "53931": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "default.thumbLabelLower" + }, + "53932": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "default.thumbLabelUpper" + }, + "53933": { + "sourceFileName": "src/components/range-slider.ts", + "qualifiedName": "__object.onInput" + }, + "53937": { + "sourceFileName": "src/components/range-slider.ts", + "qualifiedName": "__object.onChange" + }, + "53942": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/snackbar/snackbar.d.ts", + "qualifiedName": "default" + }, + "53947": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53948": { + "sourceFileName": "src/components/snackbar.ts", + "qualifiedName": "__object" + }, + "53949": { + "sourceFileName": "src/components/snackbar.ts", + "qualifiedName": "__object.onAction" + }, + "53950": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53951": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/snackbar/snackbar.d.ts", + "qualifiedName": "default.actionText" + }, + "53952": { + "sourceFileName": "src/components/snackbar.ts", + "qualifiedName": "__object.onAction" + }, + "53957": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default" + }, + "53962": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53963": { + "sourceFileName": "src/components/slider.ts", + "qualifiedName": "__object" + }, + "53964": { + "sourceFileName": "src/components/slider.ts", + "qualifiedName": "__object.onInput" + }, + "53965": { + "sourceFileName": "src/components/slider.ts", + "qualifiedName": "__object.onChange" + }, + "53966": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53967": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.value" + }, + "53968": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.stepUp" + }, + "53969": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.stepUp" + }, + "53970": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.stepUp" + }, + "53971": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "stepIncrement" + }, + "53973": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "stepIncrement" + }, + "53974": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.stepDown" + }, + "53975": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.stepDown" + }, + "53976": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "default.stepDown" + }, + "53977": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "stepDecrement" + }, + "53979": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/slider.d.ts", + "qualifiedName": "stepDecrement" + }, + "53980": { + "sourceFileName": "src/components/slider.ts", + "qualifiedName": "__object.onInput" + }, + "53984": { + "sourceFileName": "src/components/slider.ts", + "qualifiedName": "__object.onChange" + }, + "53989": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tab.d.ts", + "qualifiedName": "default" + }, + "53994": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "53995": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53996": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "53997": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tab.d.ts", + "qualifiedName": "default.label" + }, + "53998": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tab.d.ts", + "qualifiedName": "default.selected" + }, + "53999": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tab.d.ts", + "qualifiedName": "default.disabled" + }, + "54005": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default" + }, + "54010": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "54011": { + "sourceFileName": "src/components/tabs.ts", + "qualifiedName": "__object" + }, + "54012": { + "sourceFileName": "src/components/tabs.ts", + "qualifiedName": "__object.onChange" + }, + "54013": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54014": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.alignment" + }, + "54015": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.activation" + }, + "54016": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.tabs" + }, + "54017": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.selected" + }, + "54022": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.select" + }, + "54023": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.select" + }, + "54024": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.select" + }, + "54025": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "id" + }, + "54026": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "default.select" + }, + "54027": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "ref" + }, + "54029": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "id" + }, + "54031": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tabs/tabs.d.ts", + "qualifiedName": "ref" + }, + "54032": { + "sourceFileName": "src/components/tabs.ts", + "qualifiedName": "__object.onChange" + }, + "54037": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/checkbox/switch.d.ts", + "qualifiedName": "default" + }, + "54042": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "54043": { + "sourceFileName": "src/components/switch.ts", + "qualifiedName": "__object" + }, + "54044": { + "sourceFileName": "src/components/switch.ts", + "qualifiedName": "__object.onChange" + }, + "54045": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54046": { + "sourceFileName": "src/components/switch.ts", + "qualifiedName": "__object.onChange" + }, + "54051": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default" + }, + "54056": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "54057": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54058": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54059": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.tree" + }, + "54060": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.parent" + }, + "54064": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.level" + }, + "54066": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.label" + }, + "54067": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.expanded" + }, + "54068": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.active" + }, + "54069": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.disabled" + }, + "54070": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.selected" + }, + "54071": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.loading" + }, + "54072": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.value" + }, + "54073": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54074": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54075": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54077": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "54078": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "54079": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.disconnectedCallback" + }, + "54081": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.path" + }, + "54082": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.getChildren" + }, + "54083": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.getChildren" + }, + "54084": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.getChildren" + }, + "54085": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "options" + }, + "54086": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "__type" + }, + "54087": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "__type.flatten" + }, + "54089": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "options" + }, + "54090": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "__type" + }, + "54091": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "__type.flatten" + }, + "54092": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.expandWithEvent" + }, + "54096": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.collapseWithEvent" + }, + "54100": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.toggle" + }, + "54101": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.toggle" + }, + "54102": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.toggle" + }, + "54104": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.expand" + }, + "54105": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.expand" + }, + "54106": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.expand" + }, + "54108": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.collapse" + }, + "54109": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.collapse" + }, + "54110": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree-item.d.ts", + "qualifiedName": "default.collapse" + }, + "54113": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default" + }, + "54118": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "54119": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object" + }, + "54120": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onSelection" + }, + "54121": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemCollapsed" + }, + "54122": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemCollapsing" + }, + "54123": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemExpanded" + }, + "54124": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemExpanding" + }, + "54125": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onActiveItem" + }, + "54126": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54129": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.singleBranchExpand" + }, + "54130": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.toggleNodeOnClick" + }, + "54131": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.selection" + }, + "54132": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54133": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54134": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54136": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.items" + }, + "54137": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.expandToItem" + }, + "54142": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "item" + }, + "54143": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.select" + }, + "54144": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.select" + }, + "54145": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.select" + }, + "54146": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54148": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54149": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.deselect" + }, + "54150": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.deselect" + }, + "54151": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.deselect" + }, + "54152": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54154": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54155": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.expand" + }, + "54156": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.expand" + }, + "54157": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.expand" + }, + "54158": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54160": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54161": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.collapse" + }, + "54162": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.collapse" + }, + "54163": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "default.collapse" + }, + "54164": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54166": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.d.ts", + "qualifiedName": "items" + }, + "54167": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onSelection" + }, + "54171": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemCollapsed" + }, + "54175": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemCollapsing" + }, + "54179": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemExpanded" + }, + "54183": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onItemExpanding" + }, + "54187": { + "sourceFileName": "src/components/tree.ts", + "qualifiedName": "__object.onActiveItem" + }, + "54192": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default" + }, + "54197": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "54198": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54199": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54200": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.header" + }, + "54201": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.contentBody" + }, + "54202": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.invalid" + }, + "54203": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.active" + }, + "54204": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.optional" + }, + "54205": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.disabled" + }, + "54206": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.complete" + }, + "54225": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/step.d.ts", + "qualifiedName": "default.isAccessible" + }, + "54227": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default" + }, + "54232": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "54233": { + "sourceFileName": "src/components/stepper.ts", + "qualifiedName": "__object" + }, + "54234": { + "sourceFileName": "src/components/stepper.ts", + "qualifiedName": "__object.onActiveStepChanging" + }, + "54235": { + "sourceFileName": "src/components/stepper.ts", + "qualifiedName": "__object.onActiveStepChanged" + }, + "54236": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "54237": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.steps" + }, + "54238": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.orientation" + }, + "54239": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.stepType" + }, + "54240": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.linear" + }, + "54241": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.contentTop" + }, + "54242": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.verticalAnimation" + }, + "54243": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.horizontalAnimation" + }, + "54244": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.animationDuration" + }, + "54245": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.titlePosition" + }, + "54246": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54247": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54248": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.connectedCallback" + }, + "54250": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.navigateTo" + }, + "54251": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.navigateTo" + }, + "54252": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.navigateTo" + }, + "54253": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "index" + }, + "54255": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "index" + }, + "54256": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.next" + }, + "54257": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.next" + }, + "54258": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.next" + }, + "54260": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.prev" + }, + "54261": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.prev" + }, + "54262": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.prev" + }, + "54264": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.reset" + }, + "54265": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.reset" + }, + "54266": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.d.ts", + "qualifiedName": "default.reset" + }, + "54268": { + "sourceFileName": "src/components/stepper.ts", + "qualifiedName": "__object.onActiveStepChanging" + }, + "54272": { + "sourceFileName": "src/components/stepper.ts", + "qualifiedName": "__object.onActiveStepChanged" + }, + "54277": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrTileChangeStateEventArgs" + }, + "54278": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrCheckboxChangeEventArgs" + }, + "54279": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrRadioChangeEventArgs" + }, + "54280": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrRangeSliderValueEventArgs" + }, + "54281": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrActiveStepChangingEventArgs" + }, + "54282": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrActiveStepChangedEventArgs" + }, + "54283": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrTreeSelectionEventArgs" + }, + "54284": { + "sourceFileName": "src/components/types.ts", + "qualifiedName": "IgrComboChangeEventArgs" + }, + "54285": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStringEN" + }, + "54286": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings" + }, + "54287": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.selectMonth" + }, + "54288": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.selectYear" + }, + "54289": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.selectDate" + }, + "54290": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.selectRange" + }, + "54291": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.selectedDate" + }, + "54292": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.startDate" + }, + "54293": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.endDate" + }, + "54294": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.previousMonth" + }, + "54295": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.nextMonth" + }, + "54296": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.previousYear" + }, + "54297": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.nextYear" + }, + "54298": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.previousYears" + }, + "54299": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.nextYears" + }, + "54300": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/calendar.resources.d.ts", + "qualifiedName": "IgcCalendarResourceStrings.weekLabel" + }, + "54301": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStringEN" + }, + "54302": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings" + }, + "54303": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.suggestionsHeader" + }, + "54304": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.reactionCopy" + }, + "54305": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.reactionLike" + }, + "54306": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.reactionDislike" + }, + "54307": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.reactionRegenerate" + }, + "54308": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.attachmentLabel" + }, + "54309": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.attachmentsListLabel" + }, + "54310": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/common/i18n/chat.resources.d.ts", + "qualifiedName": "IgcChatResourceStrings.messageCopied" + }, + "54311": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "IgcTileChangeStateEventArgs" + }, + "54312": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "IgcTileChangeStateEventArgs.tile" + }, + "54313": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tile-manager/tile.d.ts", + "qualifiedName": "IgcTileChangeStateEventArgs.state" + }, + "54314": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox-base.d.ts", + "qualifiedName": "IgcCheckboxChangeEventArgs" + }, + "54315": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox-base.d.ts", + "qualifiedName": "IgcCheckboxChangeEventArgs.checked" + }, + "54316": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/checkbox/checkbox-base.d.ts", + "qualifiedName": "IgcCheckboxChangeEventArgs.value" + }, + "54317": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "IgcRadioChangeEventArgs" + }, + "54318": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "IgcRadioChangeEventArgs.checked" + }, + "54319": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/radio/radio.d.ts", + "qualifiedName": "IgcRadioChangeEventArgs.value" + }, + "54320": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "IgcRangeSliderValueEventArgs" + }, + "54321": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "IgcRangeSliderValueEventArgs.lower" + }, + "54322": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/slider/range-slider.d.ts", + "qualifiedName": "IgcRangeSliderValueEventArgs.upper" + }, + "54323": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "qualifiedName": "IgcActiveStepChangingEventArgs" + }, + "54324": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "qualifiedName": "IgcActiveStepChangingEventArgs.oldIndex" + }, + "54325": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "qualifiedName": "IgcActiveStepChangingEventArgs.newIndex" + }, + "54326": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "qualifiedName": "IgcActiveStepChangedEventArgs" + }, + "54327": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/stepper/stepper.common.d.ts", + "qualifiedName": "IgcActiveStepChangedEventArgs.index" + }, + "54328": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.common.d.ts", + "qualifiedName": "IgcTreeSelectionEventArgs" + }, + "54329": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/tree/tree.common.d.ts", + "qualifiedName": "IgcTreeSelectionEventArgs.newSelection" + }, + "54330": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "IgcComboChangeEventArgs" + }, + "54331": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "IgcComboChangeEventArgs.newValue" + }, + "54332": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "IgcComboChangeEventArgs.items" + }, + "54333": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "IgcComboChangeEventArgs.type" + }, + "54334": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "IgcComboChangeEventArgs.T" + }, + "54335": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage" + }, + "54336": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage.id" + }, + "54337": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage.text" + }, + "54338": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage.sender" + }, + "54339": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage.timestamp" + }, + "54340": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage.attachments" + }, + "54341": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessage.reactions" + }, + "54342": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment" + }, + "54343": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment.id" + }, + "54344": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment.name" + }, + "54345": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment.url" + }, + "54346": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment.file" + }, + "54347": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment.type" + }, + "54348": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageAttachment.thumbnail" + }, + "54349": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatOptions" + }, + "54350": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type" + }, + "54351": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.currentUserId" + }, + "54352": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.disableAutoScroll" + }, + "54353": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.disableInputAttachments" + }, + "54354": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.isTyping" + }, + "54355": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.acceptedFiles" + }, + "54356": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.headerText" + }, + "54357": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.inputPlaceholder" + }, + "54358": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.suggestions" + }, + "54359": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.suggestionsPosition" + }, + "54360": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.stopTypingDelay" + }, + "54361": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.adoptRootStyles" + }, + "54362": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type.renderers" + }, + "54363": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageReaction" + }, + "54364": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageReaction.message" + }, + "54365": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "IgcChatMessageReaction.reaction" + }, + "54366": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "registerIcon" + }, + "54367": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "registerIcon" + }, + "54368": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "name" + }, + "54369": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "url" + }, + "54370": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "collection" + }, + "54371": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "registerIconFromText" + }, + "54372": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "registerIconFromText" + }, + "54373": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "name" + }, + "54374": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "iconText" + }, + "54375": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "collection" + }, + "54376": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "setIconRef" + }, + "54377": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "setIconRef" + }, + "54378": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "name" + }, + "54379": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "collection" + }, + "54380": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/icon.registry.d.ts", + "qualifiedName": "icon" + }, + "54381": { + "sourceFileName": "node_modules/igniteui-webcomponents/theming/config.d.ts", + "qualifiedName": "configureTheme" + }, + "54382": { + "sourceFileName": "node_modules/igniteui-webcomponents/theming/config.d.ts", + "qualifiedName": "configureTheme" + }, + "54383": { + "sourceFileName": "node_modules/igniteui-webcomponents/theming/config.d.ts", + "qualifiedName": "t" + }, + "54384": { + "sourceFileName": "node_modules/igniteui-webcomponents/theming/config.d.ts", + "qualifiedName": "v" + }, + "54385": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "CalendarActiveView" + }, + "54386": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "CalendarHeaderOrientation" + }, + "54387": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "CalendarSelection" + }, + "54388": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeDescriptor" + }, + "54389": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeDescriptor.type" + }, + "54390": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeDescriptor.dateRange" + }, + "54391": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "WeekDays" + }, + "54392": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType" + }, + "54393": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType.After" + }, + "54394": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType.Before" + }, + "54395": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType.Between" + }, + "54396": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType.Specific" + }, + "54397": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType.Weekdays" + }, + "54398": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/calendar/types.d.ts", + "qualifiedName": "DateRangeType.Weekends" + }, + "54399": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart" + }, + "54400": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.Month" + }, + "54401": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.Year" + }, + "54402": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.Date" + }, + "54403": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.Hours" + }, + "54404": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.Minutes" + }, + "54405": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.Seconds" + }, + "54406": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePart.AmPm" + }, + "54407": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas" + }, + "54408": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas.date" + }, + "54409": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas.month" + }, + "54410": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas.year" + }, + "54411": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas.hours" + }, + "54412": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas.minutes" + }, + "54413": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-time-input/date-util.d.ts", + "qualifiedName": "DatePartDeltas.seconds" + }, + "54414": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "CustomDateRange" + }, + "54415": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "CustomDateRange.label" + }, + "54416": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "CustomDateRange.dateRange" + }, + "54417": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "DateRangeValue" + }, + "54418": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "DateRangeValue.start" + }, + "54419": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/date-range-picker/date-range-picker.d.ts", + "qualifiedName": "DateRangeValue.end" + }, + "54420": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/popover/popover.d.ts", + "qualifiedName": "PopoverPlacement" + }, + "54421": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboItemTemplate" + }, + "54422": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "__type" + }, + "54423": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "__type" + }, + "54424": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "props" + }, + "54425": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "T" + }, + "54426": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboTemplateProps" + }, + "54427": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboTemplateProps.item" + }, + "54428": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "ComboTemplateProps.T" + }, + "54429": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "FilteringOptions" + }, + "54430": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "FilteringOptions.filterKey" + }, + "54431": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "FilteringOptions.caseSensitive" + }, + "54432": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "FilteringOptions.matchDiacritics" + }, + "54433": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "FilteringOptions.T" + }, + "54434": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/combo/types.d.ts", + "qualifiedName": "GroupingDirection" + }, + "54435": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "qualifiedName": "IconMeta" + }, + "54436": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "qualifiedName": "IconMeta.name" + }, + "54437": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "qualifiedName": "IconMeta.collection" + }, + "54438": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/icon/registry/types.d.ts", + "qualifiedName": "IconMeta.external" + }, + "54439": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "AbsolutePosition" + }, + "54440": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "ContentOrientation" + }, + "54441": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "HorizontalTransitionAnimation" + }, + "54442": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "PickerMode" + }, + "54443": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "PopoverScrollStrategy" + }, + "54444": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "RangeTextSelectMode" + }, + "54445": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "SelectionRangeDirection" + }, + "54446": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "StyleVariant" + }, + "54447": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "ToggleLabelPosition" + }, + "54448": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "TreeSelection" + }, + "54449": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "AvatarShape" + }, + "54450": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "BadgeShape" + }, + "54451": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "ButtonGroupSelection" + }, + "54452": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "ButtonVariant" + }, + "54453": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "CarouselIndicatorsOrientation" + }, + "54454": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "DividerType" + }, + "54455": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "ExpansionPanelIndicatorPosition" + }, + "54456": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "IconButtonVariant" + }, + "54457": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "InputType" + }, + "54458": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "LinearProgressLabelAlign" + }, + "54459": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "MaskInputValueMode" + }, + "54460": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "NavDrawerPosition" + }, + "54461": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "SliderTickLabelRotation" + }, + "54462": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "SliderTickOrientation" + }, + "54463": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "StepperOrientation" + }, + "54464": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "StepperStepType" + }, + "54465": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "StepperTitlePosition" + }, + "54466": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "StepperVerticalAnimation" + }, + "54467": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "TabsActivation" + }, + "54468": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "TabsAlignment" + }, + "54469": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "TextareaResize" + }, + "54470": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "TileManagerDragMode" + }, + "54471": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/types.d.ts", + "qualifiedName": "TileManagerResizeMode" + }, + "54472": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers" + }, + "54473": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.attachment" + }, + "54474": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.attachmentContent" + }, + "54475": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.attachmentHeader" + }, + "54476": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.fileUploadButton" + }, + "54477": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.input" + }, + "54478": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.inputActions" + }, + "54479": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.inputActionsEnd" + }, + "54480": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.inputActionsStart" + }, + "54481": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.inputAttachments" + }, + "54482": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.message" + }, + "54483": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.messageActions" + }, + "54484": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.messageAttachments" + }, + "54485": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.messageContent" + }, + "54486": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.messageHeader" + }, + "54487": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.typingIndicator" + }, + "54488": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.sendButton" + }, + "54489": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderers.suggestionPrefix" + }, + "54490": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatTemplateRenderer" + }, + "54491": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type" + }, + "54492": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "__type" + }, + "54493": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ctx" + }, + "54494": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "T" + }, + "54495": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatSuggestionsPosition" + }, + "54496": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderContext" + }, + "54497": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderContext.instance" + }, + "54498": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatInputRenderContext" + }, + "54499": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatInputRenderContext.attachments" + }, + "54500": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatInputRenderContext.value" + }, + "54501": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderContext.instance" + }, + "54502": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatMessageRenderContext" + }, + "54503": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatMessageRenderContext.message" + }, + "54504": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderContext.instance" + }, + "54505": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatAttachmentRenderContext" + }, + "54506": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatAttachmentRenderContext.attachment" + }, + "54507": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatMessageRenderContext.message" + }, + "54508": { + "sourceFileName": "node_modules/igniteui-webcomponents/components/chat/types.d.ts", + "qualifiedName": "ChatRenderContext.instance" + }, + "54509": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrActivePaneEventArgs" + }, + "54510": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPaneHeaderConnectionEventArgs" + }, + "54511": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrTabHeaderConnectionEventArgs" + }, + "54512": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPaneCloseEventArgs" + }, + "54513": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPaneScrollEventArgs" + }, + "54514": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPanePinnedEventArgs" + }, + "54515": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPaneDragStartEventArgs" + }, + "54516": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPaneDragOverEventArgs" + }, + "54517": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrPaneDragEndEventArgs" + }, + "54518": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrSplitterResizeEventArgs" + }, + "54519": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrFloatingPaneResizeEventArgs" + }, + "54520": { + "sourceFileName": "src/dock-manager/types.ts", + "qualifiedName": "IgrFloatingPaneResizeMoveEventArgs" + }, + "54521": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.en.d.ts", + "qualifiedName": "IgcDockManagerResourceStringsEN" + }, + "54522": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.jp.d.ts", + "qualifiedName": "IgcDockManagerResourceStringsJP" + }, + "54523": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.es.d.ts", + "qualifiedName": "IgcDockManagerResourceStringsES" + }, + "54524": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/i18n/resources.ko.d.ts", + "qualifiedName": "IgcDockManagerResourceStringsKO" + }, + "54525": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPaneType" + }, + "54526": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPaneType.splitPane" + }, + "54527": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPaneType.contentPane" + }, + "54528": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPaneType.tabGroupPane" + }, + "54529": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPaneType.documentHost" + }, + "54530": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPaneOrientation" + }, + "54531": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPaneOrientation.horizontal" + }, + "54532": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPaneOrientation.vertical" + }, + "54533": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcUnpinnedLocation" + }, + "54534": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcUnpinnedLocation.top" + }, + "54535": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcUnpinnedLocation.bottom" + }, + "54536": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcUnpinnedLocation.left" + }, + "54537": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcUnpinnedLocation.right" + }, + "54538": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneActionBehavior" + }, + "54539": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneActionBehavior.allPanes" + }, + "54540": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneActionBehavior.selectedPane" + }, + "54541": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPoint" + }, + "54542": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPoint.x" + }, + "54543": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPoint.y" + }, + "54544": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcActivePaneEventArgs" + }, + "54545": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcActivePaneEventArgs.newPane" + }, + "54546": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcActivePaneEventArgs.oldPane" + }, + "54547": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition" + }, + "54548": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.left" + }, + "54549": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.leftMost" + }, + "54550": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.outerLeft" + }, + "54551": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.right" + }, + "54552": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.rightMost" + }, + "54553": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.outerRight" + }, + "54554": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.top" + }, + "54555": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.topMost" + }, + "54556": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.outerTop" + }, + "54557": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.bottom" + }, + "54558": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.bottomMost" + }, + "54559": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.outerBottom" + }, + "54560": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.center" + }, + "54561": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.splitterHorizontal" + }, + "54562": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicatorPosition.splitterVertical" + }, + "54563": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicator" + }, + "54564": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicator.position" + }, + "54565": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicator.isRoot" + }, + "54566": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockingIndicator.direction" + }, + "54567": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneHeaderConnectionEventArgs" + }, + "54568": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneHeaderConnectionEventArgs.pane" + }, + "54569": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneHeaderConnectionEventArgs.element" + }, + "54570": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabHeaderConnectionEventArgs" + }, + "54571": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabHeaderConnectionEventArgs.pane" + }, + "54572": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabHeaderConnectionEventArgs.element" + }, + "54573": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneCloseEventArgs" + }, + "54574": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneCloseEventArgs.sourcePane" + }, + "54575": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneCloseEventArgs.panes" + }, + "54576": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneScrollEventArgs" + }, + "54577": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneScrollEventArgs.pane" + }, + "54578": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneScrollEventArgs.contentElement" + }, + "54579": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPanePinnedEventArgs" + }, + "54580": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPanePinnedEventArgs.sourcePane" + }, + "54581": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPanePinnedEventArgs.panes" + }, + "54582": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPanePinnedEventArgs.newValue" + }, + "54583": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPanePinnedEventArgs.location" + }, + "54584": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragStartEventArgs" + }, + "54585": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragStartEventArgs.sourcePane" + }, + "54586": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragStartEventArgs.panes" + }, + "54587": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragActionType" + }, + "54588": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragActionType.floatPane" + }, + "54589": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragActionType.moveFloatingPane" + }, + "54590": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragActionType.dockPane" + }, + "54591": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragActionType.moveTab" + }, + "54592": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatPaneAction" + }, + "54593": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatPaneAction.type" + }, + "54594": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatPaneAction.location" + }, + "54595": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatPaneAction.width" + }, + "54596": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatPaneAction.height" + }, + "54597": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveFloatingPaneAction" + }, + "54598": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveFloatingPaneAction.type" + }, + "54599": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveFloatingPaneAction.oldLocation" + }, + "54600": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveFloatingPaneAction.newLocation" + }, + "54601": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockPaneAction" + }, + "54602": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockPaneAction.type" + }, + "54603": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockPaneAction.dockingIndicator" + }, + "54604": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockPaneAction.targetPane" + }, + "54605": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveTabAction" + }, + "54606": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveTabAction.type" + }, + "54607": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveTabAction.oldIndex" + }, + "54608": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcMoveTabAction.newIndex" + }, + "54609": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragAction" + }, + "54610": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragOverEventArgs" + }, + "54611": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragOverEventArgs.sourcePane" + }, + "54612": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragOverEventArgs.panes" + }, + "54613": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragOverEventArgs.action" + }, + "54614": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragOverEventArgs.isValid" + }, + "54615": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragEndEventArgs" + }, + "54616": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragEndEventArgs.sourcePane" + }, + "54617": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneDragEndEventArgs.panes" + }, + "54618": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane" + }, + "54619": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.id" + }, + "54620": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.type" + }, + "54621": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.contentId" + }, + "54622": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.header" + }, + "54623": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.headerId" + }, + "54624": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.tabHeaderId" + }, + "54625": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.unpinnedHeaderId" + }, + "54626": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.floatingHeaderId" + }, + "54627": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.size" + }, + "54628": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.allowClose" + }, + "54629": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.allowMaximize" + }, + "54630": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.allowPinning" + }, + "54631": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.allowDocking" + }, + "54632": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.acceptsInnerDock" + }, + "54633": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.allowFloating" + }, + "54634": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.unpinnedSize" + }, + "54635": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.isPinned" + }, + "54636": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.isMaximized" + }, + "54637": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.unpinnedLocation" + }, + "54638": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.hidden" + }, + "54639": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.disabled" + }, + "54640": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcContentPane.documentOnly" + }, + "54641": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane" + }, + "54642": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.id" + }, + "54643": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.type" + }, + "54644": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.orientation" + }, + "54645": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.panes" + }, + "54646": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.size" + }, + "54647": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.floatingLocation" + }, + "54648": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.floatingWidth" + }, + "54649": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.floatingHeight" + }, + "54650": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.floatingResizable" + }, + "54651": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.allowEmpty" + }, + "54652": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.isMaximized" + }, + "54653": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitPane.useFixedSize" + }, + "54654": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane" + }, + "54655": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.id" + }, + "54656": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.type" + }, + "54657": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.panes" + }, + "54658": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.size" + }, + "54659": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.selectedIndex" + }, + "54660": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.allowEmpty" + }, + "54661": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabGroupPane.isMaximized" + }, + "54662": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDocumentHost" + }, + "54663": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDocumentHost.id" + }, + "54664": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDocumentHost.type" + }, + "54665": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDocumentHost.rootPane" + }, + "54666": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDocumentHost.size" + }, + "54667": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerPane" + }, + "54668": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerLayout" + }, + "54669": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerLayout.rootPane" + }, + "54670": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerLayout.floatingPanes" + }, + "54671": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneHeaderElement" + }, + "54672": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcPaneHeaderElement.dragService" + }, + "55638": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabHeaderElement" + }, + "55639": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcTabHeaderElement.dragService" + }, + "56605": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings" + }, + "56606": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.close" + }, + "56607": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.pin" + }, + "56608": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.unpin" + }, + "56609": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.maximize" + }, + "56610": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.minimize" + }, + "56611": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.moreOptions" + }, + "56612": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.moreTabs" + }, + "56613": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.panes" + }, + "56614": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcDockManagerResourceStrings.documents" + }, + "56615": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation" + }, + "56616": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.top" + }, + "56617": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.bottom" + }, + "56618": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.left" + }, + "56619": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.right" + }, + "56620": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.topLeft" + }, + "56621": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.topRight" + }, + "56622": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.bottomLeft" + }, + "56623": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcResizerLocation.bottomRight" + }, + "56624": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitterResizeEventArgs" + }, + "56625": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitterResizeEventArgs.pane" + }, + "56626": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitterResizeEventArgs.orientation" + }, + "56627": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitterResizeEventArgs.paneWidth" + }, + "56628": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcSplitterResizeEventArgs.paneHeight" + }, + "56629": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeEventArgs" + }, + "56630": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeEventArgs.sourcePane" + }, + "56631": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeEventArgs.resizerLocation" + }, + "56632": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs" + }, + "56633": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs.oldWidth" + }, + "56634": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs.newWidth" + }, + "56635": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs.oldHeight" + }, + "56636": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs.newHeight" + }, + "56637": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs.oldLocation" + }, + "56638": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeMoveEventArgs.newLocation" + }, + "56639": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeEventArgs.sourcePane" + }, + "56640": { + "sourceFileName": "node_modules/igniteui-dockmanager/dist/types/components/dockmanager/dockmanager.public-interfaces.d.ts", + "qualifiedName": "IgcFloatingPaneResizeEventArgs.resizerLocation" + }, + "56641": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent" + }, + "56646": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56647": { + "sourceFileName": "src/grids/grid-state.ts", + "qualifiedName": "__object" + }, + "56648": { + "sourceFileName": "src/grids/grid-state.ts", + "qualifiedName": "__object.onStateParsed" + }, + "56649": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56650": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.applyState" + }, + "56651": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.applyState" + }, + "56652": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.applyState" + }, + "56653": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "state" + }, + "56654": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56656": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "state" + }, + "56657": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56658": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.applyStateFromString" + }, + "56659": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.applyStateFromString" + }, + "56660": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.applyStateFromString" + }, + "56661": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "state" + }, + "56662": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56664": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "state" + }, + "56665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.getState" + }, + "56667": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.getState" + }, + "56668": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.getState" + }, + "56669": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56671": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.getStateAsString" + }, + "56673": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.getStateAsString" + }, + "56674": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "IgcGridStateComponent.getStateAsString" + }, + "56675": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56677": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-component.d.ts", + "qualifiedName": "features" + }, + "56678": { + "sourceFileName": "src/grids/grid-state.ts", + "qualifiedName": "__object.onStateParsed" + }, + "56683": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent" + }, + "56688": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56689": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56690": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56691": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.actionButtons" + }, + "56692": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.hidden" + }, + "56693": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.resourceStrings" + }, + "56694": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.show" + }, + "56695": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.show" + }, + "56696": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.show" + }, + "56697": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "context" + }, + "56699": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "context" + }, + "56700": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.hide" + }, + "56701": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.hide" + }, + "56702": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-component.d.ts", + "qualifiedName": "IgcActionStripComponent.hide" + }, + "56705": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent" + }, + "56710": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56711": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56712": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56713": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.addRow" + }, + "56714": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.editRow" + }, + "56715": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.deleteRow" + }, + "56716": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.hasChildren" + }, + "56717": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.addChild" + }, + "56718": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.startEdit" + }, + "56719": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.startEdit" + }, + "56720": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "IgcGridEditingActionsComponent.startEdit" + }, + "56721": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56723": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-editing-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56725": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent" + }, + "56730": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56731": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56732": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "56733": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.pin" + }, + "56734": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.pin" + }, + "56735": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.pin" + }, + "56736": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56738": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56739": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.unpin" + }, + "56740": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.unpin" + }, + "56741": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.unpin" + }, + "56742": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56744": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56745": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.scrollToRow" + }, + "56746": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.scrollToRow" + }, + "56747": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "IgcGridPinningActionsComponent.scrollToRow" + }, + "56748": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56750": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-pinning-actions-component.d.ts", + "qualifiedName": "evt" + }, + "56752": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent" + }, + "56757": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56758": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object" + }, + "56759": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onHiddenChange" + }, + "56760": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onExpandedChange" + }, + "56761": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onWidthChange" + }, + "56762": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onPinnedChange" + }, + "56763": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object" + }, + "56764": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.collapsibleIndicatorTemplate" + }, + "56765": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.summaryTemplate" + }, + "56766": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.bodyTemplate" + }, + "56767": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.headerTemplate" + }, + "56768": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.inlineEditorTemplate" + }, + "56769": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.errorTemplate" + }, + "56770": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.filterCellTemplate" + }, + "56771": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.children" + }, + "56772": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.collapsible" + }, + "56773": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.expanded" + }, + "56774": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.summaries" + }, + "56775": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.filters" + }, + "56776": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.selectable" + }, + "56777": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.collapsibleIndicatorTemplate" + }, + "56778": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.hidden" + }, + "56779": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.selected" + }, + "56780": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.childColumns" + }, + "56781": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.columnGroup" + }, + "56782": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.columnLayout" + }, + "56783": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-group-component.d.ts", + "qualifiedName": "IgcColumnGroupComponent.width" + }, + "56784": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onHiddenChange" + }, + "56788": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onExpandedChange" + }, + "56792": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onWidthChange" + }, + "56796": { + "sourceFileName": "src/grids/column-group.ts", + "qualifiedName": "__object.onPinnedChange" + }, + "56801": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent" + }, + "56806": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56807": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object" + }, + "56808": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onHiddenChange" + }, + "56809": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onExpandedChange" + }, + "56810": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onWidthChange" + }, + "56811": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onPinnedChange" + }, + "56812": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object" + }, + "56813": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.summaryTemplate" + }, + "56814": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.bodyTemplate" + }, + "56815": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.headerTemplate" + }, + "56816": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.inlineEditorTemplate" + }, + "56817": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.errorTemplate" + }, + "56818": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.filterCellTemplate" + }, + "56819": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.field" + }, + "56820": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.merge" + }, + "56821": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.header" + }, + "56822": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.title" + }, + "56823": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.sortable" + }, + "56824": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.selectable" + }, + "56825": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.groupable" + }, + "56826": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.editable" + }, + "56827": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.filterable" + }, + "56828": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.resizable" + }, + "56829": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.autosizeHeader" + }, + "56830": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.hasSummary" + }, + "56831": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.hidden" + }, + "56832": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.selected" + }, + "56833": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.disableHiding" + }, + "56834": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.disablePinning" + }, + "56835": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.width" + }, + "56836": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.maxWidth" + }, + "56837": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.headerClasses" + }, + "56838": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.headerStyles" + }, + "56839": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.headerGroupClasses" + }, + "56840": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.headerGroupStyles" + }, + "56841": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.cellClasses" + }, + "56842": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.cellStyles" + }, + "56843": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.formatter" + }, + "56844": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.summaryFormatter" + }, + "56845": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.filteringIgnoreCase" + }, + "56846": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.sortingIgnoreCase" + }, + "56847": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.searchable" + }, + "56848": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.dataType" + }, + "56849": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.rowEnd" + }, + "56850": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.colEnd" + }, + "56851": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.rowStart" + }, + "56852": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.colStart" + }, + "56853": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.additionalTemplateContext" + }, + "56854": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.minWidth" + }, + "56855": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.index" + }, + "56856": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.pinningPosition" + }, + "56857": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.pinned" + }, + "56858": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.summaries" + }, + "56859": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.disabledSummaries" + }, + "56860": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.filters" + }, + "56861": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.sortStrategy" + }, + "56862": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.summaryTemplate" + }, + "56863": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.bodyTemplate" + }, + "56864": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.headerTemplate" + }, + "56865": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.inlineEditorTemplate" + }, + "56866": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.errorTemplate" + }, + "56867": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.filterCellTemplate" + }, + "56868": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.visibleIndex" + }, + "56869": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.columnGroup" + }, + "56870": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.columnLayout" + }, + "56871": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.columnLayoutChild" + }, + "56872": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.childColumns" + }, + "56873": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.level" + }, + "56874": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.visibleWhenCollapsed" + }, + "56875": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.pipeArgs" + }, + "56876": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.editorOptions" + }, + "56877": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.filteringExpressionsTree" + }, + "56878": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.parent" + }, + "56879": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.topLevelParent" + }, + "56880": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.pin" + }, + "56881": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.pin" + }, + "56882": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.pin" + }, + "56883": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "index" + }, + "56884": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "pinningPosition" + }, + "56886": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "index" + }, + "56887": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "pinningPosition" + }, + "56888": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.unpin" + }, + "56889": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.unpin" + }, + "56890": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.unpin" + }, + "56891": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "index" + }, + "56893": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "index" + }, + "56894": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.move" + }, + "56895": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.move" + }, + "56896": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.move" + }, + "56897": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "index" + }, + "56899": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "index" + }, + "56900": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.autosize" + }, + "56901": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.autosize" + }, + "56902": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "IgcColumnComponent.autosize" + }, + "56903": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "byHeaderOnly" + }, + "56905": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-component.d.ts", + "qualifiedName": "byHeaderOnly" + }, + "56906": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onHiddenChange" + }, + "56910": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onExpandedChange" + }, + "56914": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onWidthChange" + }, + "56918": { + "sourceFileName": "src/grids/column.ts", + "qualifiedName": "__object.onPinnedChange" + }, + "56923": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-layout-component.d.ts", + "qualifiedName": "IgcColumnLayoutComponent" + }, + "56928": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56929": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object" + }, + "56930": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onHiddenChange" + }, + "56931": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onExpandedChange" + }, + "56932": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onWidthChange" + }, + "56933": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onPinnedChange" + }, + "56934": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object" + }, + "56935": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.collapsibleIndicatorTemplate" + }, + "56936": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.summaryTemplate" + }, + "56937": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.bodyTemplate" + }, + "56938": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.headerTemplate" + }, + "56939": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.inlineEditorTemplate" + }, + "56940": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.errorTemplate" + }, + "56941": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.filterCellTemplate" + }, + "56942": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-layout-component.d.ts", + "qualifiedName": "IgcColumnLayoutComponent.width" + }, + "56943": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-layout-component.d.ts", + "qualifiedName": "IgcColumnLayoutComponent.visibleIndex" + }, + "56944": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onHiddenChange" + }, + "56948": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onExpandedChange" + }, + "56952": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onWidthChange" + }, + "56956": { + "sourceFileName": "src/grids/column-layout.ts", + "qualifiedName": "__object.onPinnedChange" + }, + "56961": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent" + }, + "56966": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "56967": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object" + }, + "56968": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDataPreLoad" + }, + "56969": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGroupingExpressionsChange" + }, + "56970": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGroupingExpansionStateChange" + }, + "56971": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGroupingDone" + }, + "56972": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "56973": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "56974": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "56975": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "56976": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "56977": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "56978": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "56979": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSelected" + }, + "56980": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "56981": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "56982": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "56983": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "56984": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "56985": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "56986": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "56987": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "56988": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "56989": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "56990": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "56991": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "56992": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "56993": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "56994": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSorting" + }, + "56995": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "56996": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "56997": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "56998": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "56999": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "57000": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "57001": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "57002": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "57003": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "57004": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "57005": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "57006": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "57007": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "57008": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "57009": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "57010": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "57011": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "57012": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "57013": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "57014": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "57015": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "57016": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "57017": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "57018": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "57019": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "57020": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "57021": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "57022": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "57023": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRendered" + }, + "57024": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "57025": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "57026": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object" + }, + "57027": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.dropAreaTemplate" + }, + "57028": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.detailTemplate" + }, + "57029": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.groupByRowSelectorTemplate" + }, + "57030": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.groupRowTemplate" + }, + "57031": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.emptyGridTemplate" + }, + "57032": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.addRowEmptyTemplate" + }, + "57033": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.loadingGridTemplate" + }, + "57034": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.dragGhostCustomTemplate" + }, + "57035": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.rowEditTextTemplate" + }, + "57036": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.rowAddTextTemplate" + }, + "57037": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.rowEditActionsTemplate" + }, + "57038": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.rowExpandedIndicatorTemplate" + }, + "57039": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.rowCollapsedIndicatorTemplate" + }, + "57040": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.headerExpandedIndicatorTemplate" + }, + "57041": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.headerCollapsedIndicatorTemplate" + }, + "57042": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.excelStyleHeaderIconTemplate" + }, + "57043": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.sortAscendingHeaderIconTemplate" + }, + "57044": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.sortDescendingHeaderIconTemplate" + }, + "57045": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.sortHeaderIconTemplate" + }, + "57046": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.headSelectorTemplate" + }, + "57047": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.rowSelectorTemplate" + }, + "57048": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.dragIndicatorIconTemplate" + }, + "57049": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupsExpanded" + }, + "57050": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.dropAreaTemplate" + }, + "57051": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.detailTemplate" + }, + "57052": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.id" + }, + "57053": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupsRecords" + }, + "57054": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.data" + }, + "57055": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.totalItemCount" + }, + "57056": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupingExpressions" + }, + "57057": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupingExpansionState" + }, + "57058": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.hideGroupedColumns" + }, + "57059": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupStrategy" + }, + "57060": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.dropAreaMessage" + }, + "57061": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupByRowSelectorTemplate" + }, + "57062": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupRowTemplate" + }, + "57063": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.showGroupArea" + }, + "57064": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.selectedCells" + }, + "57065": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupBy" + }, + "57066": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupBy" + }, + "57067": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.groupBy" + }, + "57068": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "expression" + }, + "57070": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "expression" + }, + "57071": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.clearGrouping" + }, + "57072": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.clearGrouping" + }, + "57073": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.clearGrouping" + }, + "57074": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "name" + }, + "57076": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "name" + }, + "57077": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.isExpandedGroup" + }, + "57078": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.isExpandedGroup" + }, + "57079": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.isExpandedGroup" + }, + "57080": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "group" + }, + "57082": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "group" + }, + "57083": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.toggleGroup" + }, + "57084": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.toggleGroup" + }, + "57085": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.toggleGroup" + }, + "57086": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57088": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57089": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.selectRowsInGroup" + }, + "57090": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.selectRowsInGroup" + }, + "57091": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.selectRowsInGroup" + }, + "57092": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57093": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "clearPrevSelection" + }, + "57095": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57096": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "clearPrevSelection" + }, + "57097": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.deselectRowsInGroup" + }, + "57098": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.deselectRowsInGroup" + }, + "57099": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.deselectRowsInGroup" + }, + "57100": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57102": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57103": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.fullyExpandGroup" + }, + "57104": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.fullyExpandGroup" + }, + "57105": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.fullyExpandGroup" + }, + "57106": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57108": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "groupRow" + }, + "57109": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.toggleAllGroupRows" + }, + "57110": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.toggleAllGroupRows" + }, + "57111": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.toggleAllGroupRows" + }, + "57113": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getSelectedData" + }, + "57114": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getSelectedData" + }, + "57115": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getSelectedData" + }, + "57116": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "formatters" + }, + "57117": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "headers" + }, + "57119": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "formatters" + }, + "57120": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "headers" + }, + "57121": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getRowByIndex" + }, + "57122": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getRowByIndex" + }, + "57123": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getRowByIndex" + }, + "57124": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "index" + }, + "57126": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "index" + }, + "57127": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getRowByKey" + }, + "57128": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getRowByKey" + }, + "57129": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getRowByKey" + }, + "57130": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "key" + }, + "57132": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "key" + }, + "57133": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getCellByColumn" + }, + "57134": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getCellByColumn" + }, + "57135": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getCellByColumn" + }, + "57136": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowIndex" + }, + "57137": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57139": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowIndex" + }, + "57140": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57141": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getCellByKey" + }, + "57142": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getCellByKey" + }, + "57143": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.getCellByKey" + }, + "57144": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowSelector" + }, + "57145": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57147": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowSelector" + }, + "57148": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57149": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.pinRow" + }, + "57150": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.pinRow" + }, + "57151": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.pinRow" + }, + "57152": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57153": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "index" + }, + "57155": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57156": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "index" + }, + "57157": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.unpinRow" + }, + "57158": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.unpinRow" + }, + "57159": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "IgcGridComponent.unpinRow" + }, + "57160": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57162": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57163": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDataPreLoad" + }, + "57167": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGroupingExpressionsChange" + }, + "57171": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGroupingExpansionStateChange" + }, + "57175": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGroupingDone" + }, + "57179": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "57183": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "57187": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "57191": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "57195": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "57199": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "57203": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "57207": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSelected" + }, + "57211": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "57215": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "57219": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "57223": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "57227": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "57231": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "57235": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "57239": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "57243": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "57247": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "57251": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "57255": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "57259": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "57263": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "57267": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSorting" + }, + "57271": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "57275": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "57279": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "57283": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "57287": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "57291": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "57295": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "57299": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "57303": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "57307": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "57311": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "57315": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "57319": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "57323": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "57327": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "57331": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "57335": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "57339": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "57343": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "57347": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "57351": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "57355": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "57359": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "57363": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "57367": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "57371": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "57375": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "57379": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "57383": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onRendered" + }, + "57387": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "57391": { + "sourceFileName": "src/grids/grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "57396": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent" + }, + "57401": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "57402": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object" + }, + "57403": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDataPreLoad" + }, + "57404": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "57405": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "57406": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "57407": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "57408": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "57409": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "57410": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "57411": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSelected" + }, + "57412": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "57413": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "57414": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "57415": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "57416": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "57417": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "57418": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "57419": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "57420": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "57421": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "57422": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "57423": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "57424": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "57425": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "57426": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSorting" + }, + "57427": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "57428": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "57429": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "57430": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "57431": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "57432": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "57433": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "57434": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "57435": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "57436": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "57437": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "57438": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "57439": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "57440": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "57441": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "57442": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "57443": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "57444": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "57445": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "57446": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "57447": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "57448": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "57449": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "57450": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "57451": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "57452": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "57453": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "57454": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "57455": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRendered" + }, + "57456": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "57457": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "57458": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object" + }, + "57459": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.emptyGridTemplate" + }, + "57460": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.addRowEmptyTemplate" + }, + "57461": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.loadingGridTemplate" + }, + "57462": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.dragGhostCustomTemplate" + }, + "57463": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.rowEditTextTemplate" + }, + "57464": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.rowAddTextTemplate" + }, + "57465": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.rowEditActionsTemplate" + }, + "57466": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.rowExpandedIndicatorTemplate" + }, + "57467": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.rowCollapsedIndicatorTemplate" + }, + "57468": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.headerExpandedIndicatorTemplate" + }, + "57469": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.headerCollapsedIndicatorTemplate" + }, + "57470": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.excelStyleHeaderIconTemplate" + }, + "57471": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.sortAscendingHeaderIconTemplate" + }, + "57472": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.sortDescendingHeaderIconTemplate" + }, + "57473": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.sortHeaderIconTemplate" + }, + "57474": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.headSelectorTemplate" + }, + "57475": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.rowSelectorTemplate" + }, + "57476": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.dragIndicatorIconTemplate" + }, + "57477": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.childLayoutList" + }, + "57478": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.advancedFilteringExpressionsTree" + }, + "57479": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.id" + }, + "57480": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.data" + }, + "57481": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.totalItemCount" + }, + "57482": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.expandChildren" + }, + "57483": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.foreignKey" + }, + "57484": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.selectedCells" + }, + "57485": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getRowByIndex" + }, + "57486": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getRowByIndex" + }, + "57487": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getRowByIndex" + }, + "57488": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "index" + }, + "57490": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "index" + }, + "57491": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getRowByKey" + }, + "57492": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getRowByKey" + }, + "57493": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getRowByKey" + }, + "57494": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "key" + }, + "57496": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "key" + }, + "57497": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getCellByColumn" + }, + "57498": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getCellByColumn" + }, + "57499": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getCellByColumn" + }, + "57500": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowIndex" + }, + "57501": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57503": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowIndex" + }, + "57504": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57505": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getCellByKey" + }, + "57506": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getCellByKey" + }, + "57507": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getCellByKey" + }, + "57508": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowSelector" + }, + "57509": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57511": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowSelector" + }, + "57512": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "57513": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.pinRow" + }, + "57514": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.pinRow" + }, + "57515": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.pinRow" + }, + "57516": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57517": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "index" + }, + "57519": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57520": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "index" + }, + "57521": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.unpinRow" + }, + "57522": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.unpinRow" + }, + "57523": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.unpinRow" + }, + "57524": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57526": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "57527": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getDefaultExpandState" + }, + "57528": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getDefaultExpandState" + }, + "57529": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "IgcHierarchicalGridComponent.getDefaultExpandState" + }, + "57530": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "record" + }, + "57532": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-component.d.ts", + "qualifiedName": "record" + }, + "57533": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDataPreLoad" + }, + "57537": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "57541": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "57545": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "57549": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "57553": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "57557": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "57561": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "57565": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSelected" + }, + "57569": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "57573": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "57577": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "57581": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "57585": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "57589": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "57593": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "57597": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "57601": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "57605": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "57609": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "57613": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "57617": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "57621": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "57625": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSorting" + }, + "57629": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "57633": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "57637": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "57641": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "57645": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "57649": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "57653": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "57657": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "57661": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "57665": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "57669": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "57673": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "57677": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "57681": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "57685": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "57689": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "57693": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "57697": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "57701": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "57705": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "57709": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "57713": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "57717": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "57721": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "57725": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "57729": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "57733": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "57737": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "57741": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onRendered" + }, + "57745": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "57749": { + "sourceFileName": "src/grids/hierarchical-grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "57754": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent" + }, + "57759": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "57760": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object" + }, + "57761": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridCreated" + }, + "57762": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridInitialized" + }, + "57763": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDataPreLoad" + }, + "57764": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "57765": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "57766": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridScroll" + }, + "57767": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellClick" + }, + "57768": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowClick" + }, + "57769": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "57770": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "57771": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSelected" + }, + "57772": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "57773": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "57774": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnPin" + }, + "57775": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "57776": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "57777": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "57778": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEdit" + }, + "57779": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "57780": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "57781": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEdit" + }, + "57782": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "57783": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "57784": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnInit" + }, + "57785": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "57786": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSorting" + }, + "57787": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSortingDone" + }, + "57788": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFiltering" + }, + "57789": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "57790": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowAdded" + }, + "57791": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "57792": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDelete" + }, + "57793": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowAdd" + }, + "57794": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnResized" + }, + "57795": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onContextMenu" + }, + "57796": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "57797": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "57798": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "57799": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "57800": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "57801": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "57802": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "57803": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "57804": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "57805": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridCopy" + }, + "57806": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "57807": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "57808": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowToggle" + }, + "57809": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowPinning" + }, + "57810": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowPinned" + }, + "57811": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "57812": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "57813": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "57814": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "57815": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRendered" + }, + "57816": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDataChanging" + }, + "57817": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDataChanged" + }, + "57818": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object" + }, + "57819": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.toolbarTemplate" + }, + "57820": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.paginatorTemplate" + }, + "57821": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.emptyGridTemplate" + }, + "57822": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.addRowEmptyTemplate" + }, + "57823": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.loadingGridTemplate" + }, + "57824": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.dragGhostCustomTemplate" + }, + "57825": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.rowEditTextTemplate" + }, + "57826": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.rowAddTextTemplate" + }, + "57827": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.rowEditActionsTemplate" + }, + "57828": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.rowExpandedIndicatorTemplate" + }, + "57829": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.rowCollapsedIndicatorTemplate" + }, + "57830": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.headerExpandedIndicatorTemplate" + }, + "57831": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.headerCollapsedIndicatorTemplate" + }, + "57832": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.excelStyleHeaderIconTemplate" + }, + "57833": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.sortAscendingHeaderIconTemplate" + }, + "57834": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.sortDescendingHeaderIconTemplate" + }, + "57835": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.sortHeaderIconTemplate" + }, + "57836": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.headSelectorTemplate" + }, + "57837": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.rowSelectorTemplate" + }, + "57838": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.dragIndicatorIconTemplate" + }, + "57839": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.childDataKey" + }, + "57840": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.childLayoutList" + }, + "57841": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toolbarTemplate" + }, + "57842": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.paginatorTemplate" + }, + "57843": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.actionStripComponents" + }, + "57844": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandChildren" + }, + "57845": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.hasChildrenKey" + }, + "57846": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.showExpandAll" + }, + "57847": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.batchEditing" + }, + "57848": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.snackbarDisplayTime" + }, + "57849": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.autoGenerate" + }, + "57850": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.autoGenerateExclude" + }, + "57851": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.moving" + }, + "57852": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.emptyGridTemplate" + }, + "57853": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.addRowEmptyTemplate" + }, + "57854": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.loadingGridTemplate" + }, + "57855": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.summaryRowHeight" + }, + "57856": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.dataCloneStrategy" + }, + "57857": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clipboardOptions" + }, + "57858": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowClasses" + }, + "57859": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowStyles" + }, + "57860": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.primaryKey" + }, + "57861": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.columnList" + }, + "57862": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.dragGhostCustomTemplate" + }, + "57863": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowEditTextTemplate" + }, + "57864": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowAddTextTemplate" + }, + "57865": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowEditActionsTemplate" + }, + "57866": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowExpandedIndicatorTemplate" + }, + "57867": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowCollapsedIndicatorTemplate" + }, + "57868": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.headerExpandedIndicatorTemplate" + }, + "57869": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.headerCollapsedIndicatorTemplate" + }, + "57870": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.excelStyleHeaderIconTemplate" + }, + "57871": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sortAscendingHeaderIconTemplate" + }, + "57872": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sortDescendingHeaderIconTemplate" + }, + "57873": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sortHeaderIconTemplate" + }, + "57874": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toolbar" + }, + "57875": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.paginationComponents" + }, + "57876": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.resourceStrings" + }, + "57877": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filteringLogic" + }, + "57878": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filteringExpressionsTree" + }, + "57879": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.advancedFilteringExpressionsTree" + }, + "57880": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.locale" + }, + "57881": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pagingMode" + }, + "57882": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.hideRowSelectors" + }, + "57883": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowDraggable" + }, + "57884": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.validationTrigger" + }, + "57885": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowEditable" + }, + "57886": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.height" + }, + "57887": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.width" + }, + "57888": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowHeight" + }, + "57889": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.columnWidth" + }, + "57890": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.emptyGridMessage" + }, + "57891": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.isLoading" + }, + "57892": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.shouldGenerate" + }, + "57893": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.emptyFilteredGridMessage" + }, + "57894": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinning" + }, + "57895": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.allowFiltering" + }, + "57896": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.allowAdvancedFiltering" + }, + "57897": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filterMode" + }, + "57898": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.summaryPosition" + }, + "57899": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.summaryCalculationMode" + }, + "57900": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.showSummaryOnCollapse" + }, + "57901": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filterStrategy" + }, + "57902": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sortStrategy" + }, + "57903": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.mergeStrategy" + }, + "57904": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sortingOptions" + }, + "57905": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectedRows" + }, + "57906": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowList" + }, + "57907": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.dataRowList" + }, + "57908": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.headSelectorTemplate" + }, + "57909": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowSelectorTemplate" + }, + "57910": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.dragIndicatorIconTemplate" + }, + "57911": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sortingExpressions" + }, + "57912": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.cellSelection" + }, + "57913": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.cellMergeMode" + }, + "57914": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.rowSelection" + }, + "57915": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.columnSelection" + }, + "57916": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expansionStates" + }, + "57917": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.defaultRowHeight" + }, + "57918": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.columns" + }, + "57919": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinnedStartColumns" + }, + "57920": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinnedEndColumns" + }, + "57921": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinnedRows" + }, + "57922": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.totalRecords" + }, + "57923": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRowOnClick" + }, + "57924": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.isRecordPinnedByIndex" + }, + "57925": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.isRecordPinnedByIndex" + }, + "57926": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.isRecordPinnedByIndex" + }, + "57927": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIndex" + }, + "57929": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIndex" + }, + "57930": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toggleColumnVisibility" + }, + "57931": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toggleColumnVisibility" + }, + "57932": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toggleColumnVisibility" + }, + "57933": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "args" + }, + "57935": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "args" + }, + "57936": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandAll" + }, + "57937": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandAll" + }, + "57938": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandAll" + }, + "57940": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.collapseAll" + }, + "57941": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.collapseAll" + }, + "57942": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.collapseAll" + }, + "57944": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandRow" + }, + "57945": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandRow" + }, + "57946": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.expandRow" + }, + "57947": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "57949": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "57950": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.collapseRow" + }, + "57951": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.collapseRow" + }, + "57952": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.collapseRow" + }, + "57953": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "57955": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "57956": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toggleRow" + }, + "57957": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toggleRow" + }, + "57958": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.toggleRow" + }, + "57959": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "57961": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "57962": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getHeaderGroupWidth" + }, + "57963": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getHeaderGroupWidth" + }, + "57964": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getHeaderGroupWidth" + }, + "57965": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "column" + }, + "57967": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "column" + }, + "57968": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getColumnByName" + }, + "57969": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getColumnByName" + }, + "57970": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getColumnByName" + }, + "57971": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "57973": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "57974": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getColumnByVisibleIndex" + }, + "57975": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getColumnByVisibleIndex" + }, + "57976": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getColumnByVisibleIndex" + }, + "57977": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "57979": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "57980": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.recalculateAutoSizes" + }, + "57981": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.recalculateAutoSizes" + }, + "57982": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.recalculateAutoSizes" + }, + "57984": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.moveColumn" + }, + "57985": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.moveColumn" + }, + "57986": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.moveColumn" + }, + "57987": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "column" + }, + "57988": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "target" + }, + "57989": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "pos" + }, + "57991": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "column" + }, + "57992": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "target" + }, + "57993": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "pos" + }, + "57994": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.markForCheck" + }, + "57995": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.markForCheck" + }, + "57996": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.markForCheck" + }, + "57998": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.addRow" + }, + "57999": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.addRow" + }, + "58000": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.addRow" + }, + "58001": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "data" + }, + "58003": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "data" + }, + "58004": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deleteRow" + }, + "58005": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deleteRow" + }, + "58006": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deleteRow" + }, + "58007": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58009": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58010": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.updateCell" + }, + "58011": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.updateCell" + }, + "58012": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.updateCell" + }, + "58013": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58014": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58015": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "column" + }, + "58017": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58018": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58019": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "column" + }, + "58020": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.updateRow" + }, + "58021": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.updateRow" + }, + "58022": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.updateRow" + }, + "58023": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58024": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58026": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58027": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58028": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getRowData" + }, + "58029": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getRowData" + }, + "58030": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getRowData" + }, + "58031": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58033": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowSelector" + }, + "58034": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sort" + }, + "58035": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sort" + }, + "58036": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.sort" + }, + "58037": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "expression" + }, + "58039": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "expression" + }, + "58040": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filter" + }, + "58041": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filter" + }, + "58042": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filter" + }, + "58043": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "58044": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58045": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "conditionOrExpressionTree" + }, + "58046": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "ignoreCase" + }, + "58048": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "58049": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58050": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "conditionOrExpressionTree" + }, + "58051": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "ignoreCase" + }, + "58052": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filterGlobal" + }, + "58053": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filterGlobal" + }, + "58054": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.filterGlobal" + }, + "58055": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58056": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "condition" + }, + "58057": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "ignoreCase" + }, + "58059": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "value" + }, + "58060": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "condition" + }, + "58061": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "ignoreCase" + }, + "58062": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.enableSummaries" + }, + "58063": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.enableSummaries" + }, + "58064": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.enableSummaries" + }, + "58065": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rest" + }, + "58067": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rest" + }, + "58068": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.disableSummaries" + }, + "58069": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.disableSummaries" + }, + "58070": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.disableSummaries" + }, + "58071": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rest" + }, + "58073": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rest" + }, + "58074": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearFilter" + }, + "58075": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearFilter" + }, + "58076": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearFilter" + }, + "58077": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "58079": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "58080": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearSort" + }, + "58081": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearSort" + }, + "58082": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearSort" + }, + "58083": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "58085": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "name" + }, + "58086": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinColumn" + }, + "58087": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinColumn" + }, + "58088": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinColumn" + }, + "58089": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columnName" + }, + "58090": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58091": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "pinningPosition" + }, + "58093": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columnName" + }, + "58094": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58095": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "pinningPosition" + }, + "58096": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.unpinColumn" + }, + "58097": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.unpinColumn" + }, + "58098": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.unpinColumn" + }, + "58099": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columnName" + }, + "58100": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58102": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columnName" + }, + "58103": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58104": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinRow" + }, + "58105": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinRow" + }, + "58106": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.pinRow" + }, + "58107": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "58108": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58109": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "row" + }, + "58111": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "58112": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58113": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "row" + }, + "58114": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.unpinRow" + }, + "58115": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.unpinRow" + }, + "58116": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.unpinRow" + }, + "58117": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "58118": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "row" + }, + "58120": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "58121": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "row" + }, + "58122": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.findNext" + }, + "58123": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.findNext" + }, + "58124": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.findNext" + }, + "58125": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "text" + }, + "58126": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "caseSensitive" + }, + "58127": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "exactMatch" + }, + "58129": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "text" + }, + "58130": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "caseSensitive" + }, + "58131": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "exactMatch" + }, + "58132": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.findPrev" + }, + "58133": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.findPrev" + }, + "58134": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.findPrev" + }, + "58135": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "text" + }, + "58136": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "caseSensitive" + }, + "58137": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "exactMatch" + }, + "58139": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "text" + }, + "58140": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "caseSensitive" + }, + "58141": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "exactMatch" + }, + "58142": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.refreshSearch" + }, + "58143": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.refreshSearch" + }, + "58144": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.refreshSearch" + }, + "58145": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "updateActiveInfo" + }, + "58146": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "endEdit" + }, + "58148": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "updateActiveInfo" + }, + "58149": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "endEdit" + }, + "58150": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearSearch" + }, + "58151": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearSearch" + }, + "58152": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearSearch" + }, + "58154": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPinnedStartWidth" + }, + "58155": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPinnedStartWidth" + }, + "58156": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPinnedStartWidth" + }, + "58157": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "takeHidden" + }, + "58159": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "takeHidden" + }, + "58160": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPinnedEndWidth" + }, + "58161": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPinnedEndWidth" + }, + "58162": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPinnedEndWidth" + }, + "58163": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "takeHidden" + }, + "58165": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "takeHidden" + }, + "58166": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRows" + }, + "58167": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRows" + }, + "58168": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRows" + }, + "58169": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIDs" + }, + "58170": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "58172": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIDs" + }, + "58173": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "58174": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectRows" + }, + "58175": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectRows" + }, + "58176": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectRows" + }, + "58177": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIDs" + }, + "58179": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIDs" + }, + "58180": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectAllRows" + }, + "58181": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectAllRows" + }, + "58182": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectAllRows" + }, + "58183": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "onlyFilterData" + }, + "58185": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "onlyFilterData" + }, + "58186": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectAllRows" + }, + "58187": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectAllRows" + }, + "58188": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectAllRows" + }, + "58189": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "onlyFilterData" + }, + "58191": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "onlyFilterData" + }, + "58192": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearCellSelection" + }, + "58193": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearCellSelection" + }, + "58194": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.clearCellSelection" + }, + "58196": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRange" + }, + "58197": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRange" + }, + "58198": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectRange" + }, + "58199": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "arg" + }, + "58201": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "arg" + }, + "58202": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedRanges" + }, + "58203": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedRanges" + }, + "58204": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedRanges" + }, + "58206": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedData" + }, + "58207": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedData" + }, + "58208": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedData" + }, + "58209": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "formatters" + }, + "58210": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "headers" + }, + "58212": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "formatters" + }, + "58213": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "headers" + }, + "58214": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectedColumns" + }, + "58215": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectedColumns" + }, + "58216": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectedColumns" + }, + "58218": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectColumns" + }, + "58219": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectColumns" + }, + "58220": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectColumns" + }, + "58221": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columns" + }, + "58222": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "58224": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columns" + }, + "58225": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "58226": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectColumns" + }, + "58227": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectColumns" + }, + "58228": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectColumns" + }, + "58229": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columns" + }, + "58231": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "columns" + }, + "58232": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectAllColumns" + }, + "58233": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectAllColumns" + }, + "58234": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.deselectAllColumns" + }, + "58236": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectAllColumns" + }, + "58237": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectAllColumns" + }, + "58238": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.selectAllColumns" + }, + "58240": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedColumnsData" + }, + "58241": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedColumnsData" + }, + "58242": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getSelectedColumnsData" + }, + "58243": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "formatters" + }, + "58244": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "headers" + }, + "58246": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "formatters" + }, + "58247": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "headers" + }, + "58248": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.navigateTo" + }, + "58249": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.navigateTo" + }, + "58250": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.navigateTo" + }, + "58251": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIndex" + }, + "58252": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "visibleColIndex" + }, + "58253": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "cb" + }, + "58255": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowIndex" + }, + "58256": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "visibleColIndex" + }, + "58257": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "cb" + }, + "58258": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getNextCell" + }, + "58259": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getNextCell" + }, + "58260": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getNextCell" + }, + "58261": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "currRowIndex" + }, + "58262": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "58263": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "callback" + }, + "58265": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "currRowIndex" + }, + "58266": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "58267": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "callback" + }, + "58268": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPreviousCell" + }, + "58269": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPreviousCell" + }, + "58270": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.getPreviousCell" + }, + "58271": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "currRowIndex" + }, + "58272": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "58273": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "callback" + }, + "58275": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "currRowIndex" + }, + "58276": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "58277": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "callback" + }, + "58278": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.openAdvancedFilteringDialog" + }, + "58279": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.openAdvancedFilteringDialog" + }, + "58280": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.openAdvancedFilteringDialog" + }, + "58281": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "overlaySettings" + }, + "58283": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "overlaySettings" + }, + "58284": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.closeAdvancedFilteringDialog" + }, + "58285": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.closeAdvancedFilteringDialog" + }, + "58286": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.closeAdvancedFilteringDialog" + }, + "58287": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "applyChanges" + }, + "58289": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "applyChanges" + }, + "58290": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.endEdit" + }, + "58291": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.endEdit" + }, + "58292": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.endEdit" + }, + "58293": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "commit" + }, + "58294": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "evt" + }, + "58296": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "commit" + }, + "58297": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "evt" + }, + "58298": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.beginAddRowById" + }, + "58299": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.beginAddRowById" + }, + "58300": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.beginAddRowById" + }, + "58301": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "58302": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "asChild" + }, + "58304": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "rowID" + }, + "58305": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "asChild" + }, + "58306": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.beginAddRowByIndex" + }, + "58307": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.beginAddRowByIndex" + }, + "58308": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "IgcRowIslandComponent.beginAddRowByIndex" + }, + "58309": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58311": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-island-component.d.ts", + "qualifiedName": "index" + }, + "58312": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridCreated" + }, + "58316": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridInitialized" + }, + "58320": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDataPreLoad" + }, + "58324": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "58328": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "58332": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridScroll" + }, + "58336": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellClick" + }, + "58340": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowClick" + }, + "58344": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "58348": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "58352": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSelected" + }, + "58356": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "58360": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "58364": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnPin" + }, + "58368": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "58372": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "58376": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "58380": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEdit" + }, + "58384": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "58388": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "58392": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEdit" + }, + "58396": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "58400": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "58404": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnInit" + }, + "58408": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "58412": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSorting" + }, + "58416": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSortingDone" + }, + "58420": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFiltering" + }, + "58424": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "58428": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowAdded" + }, + "58432": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "58436": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDelete" + }, + "58440": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowAdd" + }, + "58444": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnResized" + }, + "58448": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onContextMenu" + }, + "58452": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "58456": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "58460": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "58464": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "58468": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "58472": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "58476": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "58480": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "58484": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "58488": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onGridCopy" + }, + "58492": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "58496": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "58500": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowToggle" + }, + "58504": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowPinning" + }, + "58508": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRowPinned" + }, + "58512": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "58516": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "58520": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "58524": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "58528": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onRendered" + }, + "58532": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDataChanging" + }, + "58536": { + "sourceFileName": "src/grids/row-island.ts", + "qualifiedName": "__object.onDataChanged" + }, + "58541": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-data-selector-component.d.ts", + "qualifiedName": "IgcPivotDataSelectorComponent" + }, + "58546": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "58547": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object" + }, + "58548": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onColumnsExpandedChange" + }, + "58549": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onRowsExpandedChange" + }, + "58550": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onFiltersExpandedChange" + }, + "58551": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onValuesExpandedChange" + }, + "58552": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "58553": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-data-selector-component.d.ts", + "qualifiedName": "IgcPivotDataSelectorComponent.columnsExpanded" + }, + "58554": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-data-selector-component.d.ts", + "qualifiedName": "IgcPivotDataSelectorComponent.rowsExpanded" + }, + "58555": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-data-selector-component.d.ts", + "qualifiedName": "IgcPivotDataSelectorComponent.filtersExpanded" + }, + "58556": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-data-selector-component.d.ts", + "qualifiedName": "IgcPivotDataSelectorComponent.valuesExpanded" + }, + "58557": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-data-selector-component.d.ts", + "qualifiedName": "IgcPivotDataSelectorComponent.grid" + }, + "58558": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onColumnsExpandedChange" + }, + "58562": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onRowsExpandedChange" + }, + "58566": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onFiltersExpandedChange" + }, + "58570": { + "sourceFileName": "src/grids/pivot-data-selector.ts", + "qualifiedName": "__object.onValuesExpandedChange" + }, + "58575": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent" + }, + "58580": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "58581": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object" + }, + "58582": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDimensionsChange" + }, + "58583": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onPivotConfigurationChange" + }, + "58584": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDimensionInit" + }, + "58585": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onValueInit" + }, + "58586": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDimensionsSortingExpressionsChange" + }, + "58587": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onValuesChange" + }, + "58588": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "58589": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "58590": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "58591": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "58592": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "58593": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "58594": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "58595": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSelected" + }, + "58596": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "58597": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "58598": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "58599": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "58600": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "58601": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "58602": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "58603": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "58604": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "58605": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "58606": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "58607": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "58608": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "58609": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "58610": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSorting" + }, + "58611": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "58612": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "58613": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "58614": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "58615": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "58616": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "58617": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "58618": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "58619": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "58620": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "58621": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "58622": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "58623": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "58624": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "58625": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "58626": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "58627": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "58628": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "58629": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "58630": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "58631": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "58632": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "58633": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "58634": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "58635": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "58636": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "58637": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "58638": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "58639": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRendered" + }, + "58640": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "58641": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "58642": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object" + }, + "58643": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.valueChipTemplate" + }, + "58644": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowDimensionHeaderTemplate" + }, + "58645": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.emptyPivotGridTemplate" + }, + "58646": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.emptyGridTemplate" + }, + "58647": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.addRowEmptyTemplate" + }, + "58648": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.loadingGridTemplate" + }, + "58649": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.dragGhostCustomTemplate" + }, + "58650": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowEditTextTemplate" + }, + "58651": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowAddTextTemplate" + }, + "58652": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowEditActionsTemplate" + }, + "58653": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowExpandedIndicatorTemplate" + }, + "58654": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowCollapsedIndicatorTemplate" + }, + "58655": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.headerExpandedIndicatorTemplate" + }, + "58656": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.headerCollapsedIndicatorTemplate" + }, + "58657": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.excelStyleHeaderIconTemplate" + }, + "58658": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.sortAscendingHeaderIconTemplate" + }, + "58659": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.sortDescendingHeaderIconTemplate" + }, + "58660": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.sortHeaderIconTemplate" + }, + "58661": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.headSelectorTemplate" + }, + "58662": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.rowSelectorTemplate" + }, + "58663": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.dragIndicatorIconTemplate" + }, + "58664": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.dimensionsSortingExpressions" + }, + "58665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.valueChipTemplate" + }, + "58666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.rowDimensionHeaderTemplate" + }, + "58667": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.pivotConfiguration" + }, + "58668": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.autoGenerateConfig" + }, + "58669": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.pivotUI" + }, + "58670": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.superCompactMode" + }, + "58671": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.defaultExpandState" + }, + "58672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.selectedRows" + }, + "58673": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.allDimensions" + }, + "58674": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.data" + }, + "58675": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.emptyPivotGridTemplate" + }, + "58676": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.notifyDimensionChange" + }, + "58677": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.notifyDimensionChange" + }, + "58678": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.notifyDimensionChange" + }, + "58679": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "regenerateColumns" + }, + "58681": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "regenerateColumns" + }, + "58682": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleColumn" + }, + "58683": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleColumn" + }, + "58684": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleColumn" + }, + "58685": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "col" + }, + "58687": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "col" + }, + "58688": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.getColumnGroupExpandState" + }, + "58689": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.getColumnGroupExpandState" + }, + "58690": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.getColumnGroupExpandState" + }, + "58691": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "col" + }, + "58693": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "col" + }, + "58694": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleRowGroup" + }, + "58695": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleRowGroup" + }, + "58696": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleRowGroup" + }, + "58697": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "col" + }, + "58698": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "newState" + }, + "58700": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "col" + }, + "58701": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "newState" + }, + "58702": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.autoSizeRowDimension" + }, + "58703": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.autoSizeRowDimension" + }, + "58704": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.autoSizeRowDimension" + }, + "58705": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58707": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58708": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.insertDimensionAt" + }, + "58709": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.insertDimensionAt" + }, + "58710": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.insertDimensionAt" + }, + "58711": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58712": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "targetCollectionType" + }, + "58713": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58715": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58716": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "targetCollectionType" + }, + "58717": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58718": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.moveDimension" + }, + "58719": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.moveDimension" + }, + "58720": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.moveDimension" + }, + "58721": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58722": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "targetCollectionType" + }, + "58723": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58725": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58726": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "targetCollectionType" + }, + "58727": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58728": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.removeDimension" + }, + "58729": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.removeDimension" + }, + "58730": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.removeDimension" + }, + "58731": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58733": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58734": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleDimension" + }, + "58735": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleDimension" + }, + "58736": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleDimension" + }, + "58737": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58739": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58740": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.insertValueAt" + }, + "58741": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.insertValueAt" + }, + "58742": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.insertValueAt" + }, + "58743": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58744": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58746": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58747": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58748": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.moveValue" + }, + "58749": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.moveValue" + }, + "58750": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.moveValue" + }, + "58751": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58752": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58754": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58755": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "index" + }, + "58756": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.removeValue" + }, + "58757": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.removeValue" + }, + "58758": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.removeValue" + }, + "58759": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58761": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58762": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleValue" + }, + "58763": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleValue" + }, + "58764": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.toggleValue" + }, + "58765": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58767": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58768": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.sortDimension" + }, + "58769": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.sortDimension" + }, + "58770": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.sortDimension" + }, + "58771": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58772": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "sortDirection" + }, + "58774": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58775": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "sortDirection" + }, + "58776": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.filterDimension" + }, + "58777": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.filterDimension" + }, + "58778": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "IgcPivotGridComponent.filterDimension" + }, + "58779": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58780": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58781": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "conditionOrExpressionTree" + }, + "58783": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "dimension" + }, + "58784": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "value" + }, + "58785": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-component.d.ts", + "qualifiedName": "conditionOrExpressionTree" + }, + "58786": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDimensionsChange" + }, + "58790": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onPivotConfigurationChange" + }, + "58794": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDimensionInit" + }, + "58798": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onValueInit" + }, + "58802": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDimensionsSortingExpressionsChange" + }, + "58806": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onValuesChange" + }, + "58810": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "58814": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "58818": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "58822": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "58826": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "58830": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "58834": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "58838": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSelected" + }, + "58842": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "58846": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "58850": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "58854": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "58858": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "58862": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "58866": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "58870": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "58874": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "58878": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "58882": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "58886": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "58890": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "58894": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "58898": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSorting" + }, + "58902": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "58906": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "58910": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "58914": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "58918": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "58922": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "58926": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "58930": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "58934": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "58938": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "58942": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "58946": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "58950": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "58954": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "58958": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "58962": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "58966": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "58970": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "58974": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "58978": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "58982": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "58986": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "58990": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "58994": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "58998": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "59002": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "59006": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "59010": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "59014": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onRendered" + }, + "59018": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "59022": { + "sourceFileName": "src/grids/pivot-grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "59027": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-title-component.d.ts", + "qualifiedName": "IgcGridToolbarTitleComponent" + }, + "59032": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59033": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59034": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59036": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-actions-component.d.ts", + "qualifiedName": "IgcGridToolbarActionsComponent" + }, + "59041": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59042": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59043": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59045": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-advanced-filtering-component.d.ts", + "qualifiedName": "IgcGridToolbarAdvancedFilteringComponent" + }, + "59050": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59051": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59052": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59053": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-advanced-filtering-component.d.ts", + "qualifiedName": "IgcGridToolbarAdvancedFilteringComponent.overlaySettings" + }, + "59055": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent" + }, + "59060": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59061": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object" + }, + "59062": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onExportStarted" + }, + "59063": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onExportEnded" + }, + "59064": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onOpening" + }, + "59065": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onOpened" + }, + "59066": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onClosing" + }, + "59067": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onClosed" + }, + "59068": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onColumnToggle" + }, + "59069": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59070": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent.exportCSV" + }, + "59071": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent.exportExcel" + }, + "59072": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent.filename" + }, + "59073": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent.export" + }, + "59074": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent.export" + }, + "59075": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "IgcGridToolbarExporterComponent.export" + }, + "59076": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "type" + }, + "59078": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-exporter-component.d.ts", + "qualifiedName": "type" + }, + "59079": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onExportStarted" + }, + "59083": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onExportEnded" + }, + "59087": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onOpening" + }, + "59091": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onOpened" + }, + "59095": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onClosing" + }, + "59099": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onClosed" + }, + "59103": { + "sourceFileName": "src/grids/grid-toolbar-exporter.ts", + "qualifiedName": "__object.onColumnToggle" + }, + "59108": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-hiding-component.d.ts", + "qualifiedName": "IgcGridToolbarHidingComponent" + }, + "59113": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59114": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object" + }, + "59115": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onOpening" + }, + "59116": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onOpened" + }, + "59117": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onClosing" + }, + "59118": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onClosed" + }, + "59119": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onColumnToggle" + }, + "59120": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59121": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onOpening" + }, + "59125": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onOpened" + }, + "59129": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onClosing" + }, + "59133": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onClosed" + }, + "59137": { + "sourceFileName": "src/grids/grid-toolbar-hiding.ts", + "qualifiedName": "__object.onColumnToggle" + }, + "59142": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-pinning-component.d.ts", + "qualifiedName": "IgcGridToolbarPinningComponent" + }, + "59147": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59148": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object" + }, + "59149": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onOpening" + }, + "59150": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onOpened" + }, + "59151": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onClosing" + }, + "59152": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onClosed" + }, + "59153": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onColumnToggle" + }, + "59154": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59155": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onOpening" + }, + "59159": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onOpened" + }, + "59163": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onClosing" + }, + "59167": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onClosed" + }, + "59171": { + "sourceFileName": "src/grids/grid-toolbar-pinning.ts", + "qualifiedName": "__object.onColumnToggle" + }, + "59176": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent" + }, + "59181": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59182": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object" + }, + "59183": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "59184": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "59185": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "59186": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "59187": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "59188": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "59189": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "59190": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSelected" + }, + "59191": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "59192": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "59193": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "59194": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "59195": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "59196": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "59197": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "59198": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "59199": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "59200": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "59201": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "59202": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "59203": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "59204": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "59205": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSorting" + }, + "59206": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "59207": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "59208": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "59209": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "59210": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "59211": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "59212": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "59213": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "59214": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "59215": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "59216": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "59217": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "59218": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "59219": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "59220": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "59221": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "59222": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "59223": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "59224": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "59225": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "59226": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "59227": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "59228": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "59229": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "59230": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "59231": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "59232": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "59233": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "59234": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRendered" + }, + "59235": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "59236": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "59237": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object" + }, + "59238": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowLoadingIndicatorTemplate" + }, + "59239": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.emptyGridTemplate" + }, + "59240": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.addRowEmptyTemplate" + }, + "59241": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.loadingGridTemplate" + }, + "59242": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.dragGhostCustomTemplate" + }, + "59243": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowEditTextTemplate" + }, + "59244": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowAddTextTemplate" + }, + "59245": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowEditActionsTemplate" + }, + "59246": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowExpandedIndicatorTemplate" + }, + "59247": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowCollapsedIndicatorTemplate" + }, + "59248": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.headerExpandedIndicatorTemplate" + }, + "59249": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.headerCollapsedIndicatorTemplate" + }, + "59250": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.excelStyleHeaderIconTemplate" + }, + "59251": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.sortAscendingHeaderIconTemplate" + }, + "59252": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.sortDescendingHeaderIconTemplate" + }, + "59253": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.sortHeaderIconTemplate" + }, + "59254": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.headSelectorTemplate" + }, + "59255": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.rowSelectorTemplate" + }, + "59256": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.dragIndicatorIconTemplate" + }, + "59257": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.childDataKey" + }, + "59258": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.foreignKey" + }, + "59259": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.hasChildrenKey" + }, + "59260": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.cascadeOnDelete" + }, + "59261": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.loadChildrenOnDemand" + }, + "59262": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.id" + }, + "59263": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.rootRecords" + }, + "59264": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.processedRootRecords" + }, + "59265": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.data" + }, + "59266": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.expansionDepth" + }, + "59267": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.rowLoadingIndicatorTemplate" + }, + "59268": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.selectedCells" + }, + "59269": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getDefaultExpandState" + }, + "59270": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getDefaultExpandState" + }, + "59271": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getDefaultExpandState" + }, + "59272": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "record" + }, + "59274": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "record" + }, + "59275": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.expandAll" + }, + "59276": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.expandAll" + }, + "59277": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.expandAll" + }, + "59279": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.collapseAll" + }, + "59280": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.collapseAll" + }, + "59281": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.collapseAll" + }, + "59283": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.addRow" + }, + "59284": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.addRow" + }, + "59285": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.addRow" + }, + "59286": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "data" + }, + "59287": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "parentRowID" + }, + "59289": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "data" + }, + "59290": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "parentRowID" + }, + "59291": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.beginAddRowByIndex" + }, + "59292": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.beginAddRowByIndex" + }, + "59293": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.beginAddRowByIndex" + }, + "59294": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "index" + }, + "59295": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "asChild" + }, + "59297": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "index" + }, + "59298": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "asChild" + }, + "59299": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getSelectedData" + }, + "59300": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getSelectedData" + }, + "59301": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getSelectedData" + }, + "59302": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "formatters" + }, + "59303": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "headers" + }, + "59305": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "formatters" + }, + "59306": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "headers" + }, + "59307": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getRowByIndex" + }, + "59308": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getRowByIndex" + }, + "59309": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getRowByIndex" + }, + "59310": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "index" + }, + "59312": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "index" + }, + "59313": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getRowByKey" + }, + "59314": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getRowByKey" + }, + "59315": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getRowByKey" + }, + "59316": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "key" + }, + "59318": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "key" + }, + "59319": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getCellByColumn" + }, + "59320": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getCellByColumn" + }, + "59321": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getCellByColumn" + }, + "59322": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowIndex" + }, + "59323": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "59325": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowIndex" + }, + "59326": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "59327": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getCellByKey" + }, + "59328": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getCellByKey" + }, + "59329": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.getCellByKey" + }, + "59330": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowSelector" + }, + "59331": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "59333": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowSelector" + }, + "59334": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "columnField" + }, + "59335": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.pinRow" + }, + "59336": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.pinRow" + }, + "59337": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.pinRow" + }, + "59338": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "59339": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "index" + }, + "59341": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "59342": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "index" + }, + "59343": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.unpinRow" + }, + "59344": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.unpinRow" + }, + "59345": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "IgcTreeGridComponent.unpinRow" + }, + "59346": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "59348": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-component.d.ts", + "qualifiedName": "rowID" + }, + "59349": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFilteringExpressionsTreeChange" + }, + "59353": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onAdvancedFilteringExpressionsTreeChange" + }, + "59357": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onGridScroll" + }, + "59361": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellClick" + }, + "59365": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowClick" + }, + "59369": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFormGroupCreated" + }, + "59373": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onValidationStatusChange" + }, + "59377": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSelected" + }, + "59381": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowSelectionChanging" + }, + "59385": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnSelectionChanging" + }, + "59389": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnPin" + }, + "59393": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnPinned" + }, + "59397": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEditEnter" + }, + "59401": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEditExit" + }, + "59405": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEdit" + }, + "59409": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onCellEditDone" + }, + "59413": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEditEnter" + }, + "59417": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEdit" + }, + "59421": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEditDone" + }, + "59425": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowEditExit" + }, + "59429": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnInit" + }, + "59433": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnsAutogenerated" + }, + "59437": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSorting" + }, + "59441": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSortingDone" + }, + "59445": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFiltering" + }, + "59449": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onFilteringDone" + }, + "59453": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowAdded" + }, + "59457": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDeleted" + }, + "59461": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDelete" + }, + "59465": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowAdd" + }, + "59469": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnResized" + }, + "59473": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onContextMenu" + }, + "59477": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onDoubleClick" + }, + "59481": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanging" + }, + "59485": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnVisibilityChanged" + }, + "59489": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnMovingStart" + }, + "59493": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnMoving" + }, + "59497": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onColumnMovingEnd" + }, + "59501": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onGridKeydown" + }, + "59505": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDragStart" + }, + "59509": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowDragEnd" + }, + "59513": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onGridCopy" + }, + "59517": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onExpansionStatesChange" + }, + "59521": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSelectedRowsChange" + }, + "59525": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowToggle" + }, + "59529": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowPinning" + }, + "59533": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRowPinned" + }, + "59537": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onActiveNodeChange" + }, + "59541": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onSortingExpressionsChange" + }, + "59545": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onToolbarExporting" + }, + "59549": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRangeSelected" + }, + "59553": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onRendered" + }, + "59557": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onDataChanging" + }, + "59561": { + "sourceFileName": "src/grids/tree-grid.ts", + "qualifiedName": "__object.onDataChanged" + }, + "59566": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-component.d.ts", + "qualifiedName": "IgcGridToolbarComponent" + }, + "59571": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59572": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59573": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59574": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-component.d.ts", + "qualifiedName": "IgcGridToolbarComponent.showProgress" + }, + "59575": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-component.d.ts", + "qualifiedName": "IgcGridToolbarComponent.grid" + }, + "59577": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent" + }, + "59582": { + "sourceFileName": "node_modules/@types/react/index.d.ts", + "qualifiedName": "props" + }, + "59583": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object" + }, + "59584": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPerPageChange" + }, + "59585": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPageChange" + }, + "59586": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPaging" + }, + "59587": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPagingDone" + }, + "59588": { + "sourceFileName": "", + "qualifiedName": "__type" + }, + "59589": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.totalPages" + }, + "59590": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.page" + }, + "59591": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.perPage" + }, + "59592": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.totalRecords" + }, + "59593": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.selectOptions" + }, + "59594": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.overlaySettings" + }, + "59595": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.resourceStrings" + }, + "59596": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.isLastPage" + }, + "59597": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.isFirstPage" + }, + "59598": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.nextPage" + }, + "59599": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.nextPage" + }, + "59600": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.nextPage" + }, + "59602": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.previousPage" + }, + "59603": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.previousPage" + }, + "59604": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.previousPage" + }, + "59606": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.paginate" + }, + "59607": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.paginate" + }, + "59608": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "IgcPaginatorComponent.paginate" + }, + "59609": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "val" + }, + "59611": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-component.d.ts", + "qualifiedName": "val" + }, + "59612": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPerPageChange" + }, + "59616": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPageChange" + }, + "59620": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPaging" + }, + "59624": { + "sourceFileName": "src/grids/paginator.ts", + "qualifiedName": "__object.onPagingDone" + }, + "59629": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGroupingDoneEventArgs" + }, + "59630": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrPivotConfigurationChangedEventArgs" + }, + "59631": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrExporterEventArgs" + }, + "59632": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrToggleViewCancelableEventArgs" + }, + "59633": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrToggleViewEventArgs" + }, + "59634": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnToggledEventArgs" + }, + "59635": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrBaseEventArgs" + }, + "59636": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridScrollEventArgs" + }, + "59637": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridCellEventArgs" + }, + "59638": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridRowEventArgs" + }, + "59639": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridFormGroupCreatedEventArgs" + }, + "59640": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridValidationStatusEventArgs" + }, + "59641": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowSelectionEventArgs" + }, + "59642": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnSelectionEventArgs" + }, + "59643": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrPinColumnCancellableEventArgs" + }, + "59644": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrPinColumnEventArgs" + }, + "59645": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridEditEventArgs" + }, + "59646": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridEditDoneEventArgs" + }, + "59647": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnsAutoGeneratedEventArgs" + }, + "59648": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrSortingEventArgs" + }, + "59649": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrFilteringEventArgs" + }, + "59650": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowDataEventArgs" + }, + "59651": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowDataCancelableEventArgs" + }, + "59652": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnResizeEventArgs" + }, + "59653": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridContextMenuEventArgs" + }, + "59654": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnVisibilityChangingEventArgs" + }, + "59655": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnVisibilityChangedEventArgs" + }, + "59656": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnMovingStartEventArgs" + }, + "59657": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnMovingEventArgs" + }, + "59658": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnMovingEndEventArgs" + }, + "59659": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridKeydownEventArgs" + }, + "59660": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowDragStartEventArgs" + }, + "59661": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowDragEndEventArgs" + }, + "59662": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowToggleEventArgs" + }, + "59663": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrPinRowEventArgs" + }, + "59664": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrActiveNodeChangeEventArgs" + }, + "59665": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridToolbarExportEventArgs" + }, + "59666": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrForOfDataChangeEventArgs" + }, + "59667": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrGridCreatedEventArgs" + }, + "59668": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrCancelableBrowserEventArgs" + }, + "59669": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrCancelableEventArgs" + }, + "59670": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrForOfDataChangingEventArgs" + }, + "59671": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrPageCancellableEventArgs" + }, + "59672": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrPageEventArgs" + }, + "59673": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrRowExportingEventArgs" + }, + "59674": { + "sourceFileName": "src/grids/types.ts", + "qualifiedName": "IgrColumnExportingEventArgs" + }, + "59675": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "qualifiedName": "IgcGridStateBaseDirective" + }, + "59678": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "qualifiedName": "IgcGridStateBaseDirective.options" + }, + "59679": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "qualifiedName": "IgcGridStateBaseDirective.options" + }, + "59680": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "qualifiedName": "IgcGridStateBaseDirective.options" + }, + "59681": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-base-directive.d.ts", + "qualifiedName": "value" + }, + "60647": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo" + }, + "60650": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.columns" + }, + "60651": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.filtering" + }, + "60652": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.advancedFiltering" + }, + "60653": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.paging" + }, + "60654": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.moving" + }, + "60655": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.sorting" + }, + "60656": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.groupBy" + }, + "60657": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.cellSelection" + }, + "60658": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.rowSelection" + }, + "60659": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.columnSelection" + }, + "60660": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.rowPinning" + }, + "60661": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.pinningConfig" + }, + "60662": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.expansion" + }, + "60663": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.rowIslands" + }, + "60664": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.id" + }, + "60665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-info.d.ts", + "qualifiedName": "IgcGridStateInfo.pivotConfiguration" + }, + "60666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "qualifiedName": "IgcGridActionsBaseDirective" + }, + "60669": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "qualifiedName": "IgcGridActionsBaseDirective.asMenuItems" + }, + "60670": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "qualifiedName": "IgcGridActionsBaseDirective.asMenuItems" + }, + "60671": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "qualifiedName": "IgcGridActionsBaseDirective.asMenuItems" + }, + "60672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-actions-base-directive.d.ts", + "qualifiedName": "value" + }, + "61638": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-resource-strings.d.ts", + "qualifiedName": "IgcActionStripResourceStrings" + }, + "61641": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-action-strip-resource-strings.d.ts", + "qualifiedName": "IgcActionStripResourceStrings.igx_action_strip_button_more_title" + }, + "61642": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-boolean-filtering-operand.d.ts", + "qualifiedName": "IgcBooleanFilteringOperand" + }, + "61643": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61644": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61645": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61646": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcBooleanFilteringOperand" + }, + "61647": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61648": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61649": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61650": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61651": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61652": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61653": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61654": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61655": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61656": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61657": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61658": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61659": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand" + }, + "61660": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61661": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61662": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61663": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand" + }, + "61664": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61667": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61668": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61669": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61670": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61671": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61673": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61674": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61675": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61676": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-filtering-operand.d.ts", + "qualifiedName": "IgcDateFilteringOperand" + }, + "61677": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61678": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61679": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61680": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcDateFilteringOperand" + }, + "61681": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61682": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61683": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61684": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61685": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61686": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61687": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61688": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61689": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61690": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61691": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61692": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61710": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-time-filtering-operand.d.ts", + "qualifiedName": "IgcDateTimeFilteringOperand" + }, + "61711": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61712": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61713": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61714": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcDateTimeFilteringOperand" + }, + "61715": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61716": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61717": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61718": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61719": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61720": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61721": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61722": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61723": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61724": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61725": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61726": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61727": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-filtering-operand.d.ts", + "qualifiedName": "IgcTimeFilteringOperand" + }, + "61728": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61729": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61730": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61731": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcTimeFilteringOperand" + }, + "61732": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61733": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61734": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61735": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61736": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61737": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61738": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61739": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61740": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61741": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61742": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61743": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61744": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-filtering-operand.d.ts", + "qualifiedName": "IgcNumberFilteringOperand" + }, + "61745": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61746": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61747": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61748": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcNumberFilteringOperand" + }, + "61749": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61750": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61751": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61752": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61753": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61754": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61755": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61756": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61757": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61758": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61759": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61760": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61761": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "qualifiedName": "IgcStringFilteringOperand" + }, + "61762": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "qualifiedName": "IgcStringFilteringOperand.applyIgnoreCase" + }, + "61763": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "qualifiedName": "IgcStringFilteringOperand.applyIgnoreCase" + }, + "61764": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "qualifiedName": "a" + }, + "61765": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-string-filtering-operand.d.ts", + "qualifiedName": "ignoreCase" + }, + "61766": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61767": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.instance" + }, + "61768": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.__constructor" + }, + "61769": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcStringFilteringOperand" + }, + "61770": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61771": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61772": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.operations" + }, + "61773": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "value" + }, + "61774": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61775": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.conditionList" + }, + "61776": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61777": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.condition" + }, + "61778": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "name" + }, + "61779": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61780": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "IgcFilteringOperand.append" + }, + "61781": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operand.d.ts", + "qualifiedName": "operation" + }, + "61782": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression" + }, + "61785": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.fieldName" + }, + "61786": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.fieldName" + }, + "61787": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.fieldName" + }, + "61788": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "value" + }, + "61789": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.condition" + }, + "61790": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.conditionName" + }, + "61791": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.searchVal" + }, + "61792": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.searchTree" + }, + "61793": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expression.d.ts", + "qualifiedName": "IgcFilteringExpression.ignoreCase" + }, + "61794": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation" + }, + "61797": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.name" + }, + "61798": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.name" + }, + "61799": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.name" + }, + "61800": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "value" + }, + "61801": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.isUnary" + }, + "61802": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.isUnary" + }, + "61803": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.isUnary" + }, + "61804": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "value" + }, + "61805": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.isNestedQuery" + }, + "61806": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.iconName" + }, + "61807": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.iconName" + }, + "61808": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.iconName" + }, + "61809": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "value" + }, + "61810": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.hidden" + }, + "61811": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-operation.d.ts", + "qualifiedName": "IgcFilteringOperation.logic" + }, + "61812": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree" + }, + "61815": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.filteringOperands" + }, + "61816": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.filteringOperands" + }, + "61817": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.filteringOperands" + }, + "61818": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "value" + }, + "61819": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.operator" + }, + "61820": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.operator" + }, + "61821": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.operator" + }, + "61822": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "value" + }, + "61823": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.fieldName" + }, + "61824": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.entity" + }, + "61825": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-expression-tree.d.ts", + "qualifiedName": "IgcExpressionTree.returnFields" + }, + "61826": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "IgcNoopFilteringStrategy" + }, + "61827": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "IgcNoopFilteringStrategy.instance" + }, + "61828": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "IgcNoopFilteringStrategy.instance" + }, + "61831": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "IgcNoopFilteringStrategy.filter" + }, + "61832": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "IgcNoopFilteringStrategy.filter" + }, + "61833": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "data" + }, + "61834": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "_" + }, + "61835": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-filtering-strategy.d.ts", + "qualifiedName": "__" + }, + "61836": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.findMatchByExpression" + }, + "61837": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.findMatchByExpression" + }, + "61838": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "rec" + }, + "61839": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "expr" + }, + "61840": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61841": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61842": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "grid" + }, + "61843": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.matchRecord" + }, + "61844": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.matchRecord" + }, + "61845": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "rec" + }, + "61846": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "expressions" + }, + "61847": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "grid" + }, + "61848": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "entity" + }, + "61849": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.getFilterItems" + }, + "61850": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.getFilterItems" + }, + "61851": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "column" + }, + "61852": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "tree" + }, + "61853": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy" + }, + "61856": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.findMatchByExpression" + }, + "61857": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.findMatchByExpression" + }, + "61858": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "rec" + }, + "61859": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "expr" + }, + "61860": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61861": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61862": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "grid" + }, + "61863": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.matchRecord" + }, + "61864": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.matchRecord" + }, + "61865": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "rec" + }, + "61866": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "expressions" + }, + "61867": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "grid" + }, + "61868": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "entity" + }, + "61869": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.getFilterItems" + }, + "61870": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.getFilterItems" + }, + "61871": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "column" + }, + "61872": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "tree" + }, + "61873": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.filter" + }, + "61874": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "IgcBaseFilteringStrategy.filter" + }, + "61875": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "data" + }, + "61876": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "expressionsTree" + }, + "61877": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "advancedExpressionsTree" + }, + "61878": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-filtering-strategy.d.ts", + "qualifiedName": "grid" + }, + "61879": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree" + }, + "61882": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.filteringOperands" + }, + "61883": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.filteringOperands" + }, + "61884": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.filteringOperands" + }, + "61885": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "value" + }, + "61886": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.type" + }, + "61887": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.owner" + }, + "61888": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.operator" + }, + "61889": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.operator" + }, + "61890": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.operator" + }, + "61891": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "value" + }, + "61892": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.fieldName" + }, + "61893": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.entity" + }, + "61894": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-expressions-tree.d.ts", + "qualifiedName": "IgcFilteringExpressionsTree.returnFields" + }, + "61895": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult" + }, + "61898": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult.data" + }, + "61899": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult.data" + }, + "61900": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult.data" + }, + "61901": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "value" + }, + "61902": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult.metadata" + }, + "61903": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult.metadata" + }, + "61904": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "IgcGroupByResult.metadata" + }, + "61905": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-result.d.ts", + "qualifiedName": "value" + }, + "61906": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord" + }, + "61909": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.expression" + }, + "61910": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.expression" + }, + "61911": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.expression" + }, + "61912": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "value" + }, + "61913": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.level" + }, + "61914": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.level" + }, + "61915": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.level" + }, + "61916": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "value" + }, + "61917": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.records" + }, + "61918": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.records" + }, + "61919": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.records" + }, + "61920": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "value" + }, + "61921": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.value" + }, + "61922": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.value" + }, + "61923": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.value" + }, + "61924": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "value" + }, + "61925": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.groupParent" + }, + "61926": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.groupParent" + }, + "61927": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.groupParent" + }, + "61928": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "value" + }, + "61929": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.groups" + }, + "61930": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.height" + }, + "61931": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.height" + }, + "61932": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.height" + }, + "61933": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "value" + }, + "61934": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-record.d.ts", + "qualifiedName": "IgcGroupByRecord.column" + }, + "61935": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultTreeGridMergeStrategy" + }, + "61936": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.instance" + }, + "61937": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.instance" + }, + "61940": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultTreeGridMergeStrategy.comparer" + }, + "61941": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultTreeGridMergeStrategy.comparer" + }, + "61942": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "prevRecord" + }, + "61943": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "record" + }, + "61944": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "61945": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61946": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-tree-grid-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61947": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.merge" + }, + "61948": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.merge" + }, + "61949": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "data" + }, + "61950": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "61951": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "comparer" + }, + "61952": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "result" + }, + "61953": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "activeRowIndexes" + }, + "61954": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61955": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61956": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "grid" + }, + "61957": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy" + }, + "61958": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.instance" + }, + "61959": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.instance" + }, + "61962": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.merge" + }, + "61963": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.merge" + }, + "61964": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "data" + }, + "61965": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "61966": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "comparer" + }, + "61967": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "result" + }, + "61968": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "activeRowIndexes" + }, + "61969": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61970": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61971": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "grid" + }, + "61972": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.comparer" + }, + "61973": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.comparer" + }, + "61974": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "prevRecord" + }, + "61975": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "record" + }, + "61976": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "61977": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61978": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61979": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "IgcByLevelTreeGridMergeStrategy" + }, + "61980": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.instance" + }, + "61981": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.instance" + }, + "61984": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "IgcByLevelTreeGridMergeStrategy.comparer" + }, + "61985": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "IgcByLevelTreeGridMergeStrategy.comparer" + }, + "61986": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "prevRecord" + }, + "61987": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "record" + }, + "61988": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "61989": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61990": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-by-level-tree-grid-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "61991": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.merge" + }, + "61992": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "IgcDefaultMergeStrategy.merge" + }, + "61993": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "data" + }, + "61994": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "61995": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "comparer" + }, + "61996": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "result" + }, + "61997": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "activeRowIndexes" + }, + "61998": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "61999": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "62000": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-default-merge-strategy.d.ts", + "qualifiedName": "grid" + }, + "62001": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "IgcNoopPivotDimensionsStrategy" + }, + "62002": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "IgcNoopPivotDimensionsStrategy.instance" + }, + "62003": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "IgcNoopPivotDimensionsStrategy.instance" + }, + "62006": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "IgcNoopPivotDimensionsStrategy.process" + }, + "62007": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "IgcNoopPivotDimensionsStrategy.process" + }, + "62008": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "collection" + }, + "62009": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "_" + }, + "62010": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-pivot-dimensions-strategy.d.ts", + "qualifiedName": "__" + }, + "62011": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension" + }, + "62014": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.childLevel" + }, + "62015": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberName" + }, + "62016": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberName" + }, + "62017": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberName" + }, + "62018": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "value" + }, + "62019": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberFunction" + }, + "62020": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.displayName" + }, + "62021": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.enabled" + }, + "62022": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.enabled" + }, + "62023": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.enabled" + }, + "62024": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "value" + }, + "62025": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.filter" + }, + "62026": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.sortable" + }, + "62027": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.sortDirection" + }, + "62028": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.dataType" + }, + "62029": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.width" + }, + "62030": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.level" + }, + "62031": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.horizontalSummary" + }, + "62032": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue" + }, + "62035": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.member" + }, + "62036": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.member" + }, + "62037": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.member" + }, + "62038": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "value" + }, + "62039": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.displayName" + }, + "62040": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.aggregate" + }, + "62041": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.aggregate" + }, + "62042": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.aggregate" + }, + "62043": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "value" + }, + "62044": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.aggregateList" + }, + "62045": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.enabled" + }, + "62046": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.enabled" + }, + "62047": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.enabled" + }, + "62048": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "value" + }, + "62049": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.styles" + }, + "62050": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.dataType" + }, + "62051": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-value.d.ts", + "qualifiedName": "IgcPivotValue.formatter" + }, + "62052": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext" + }, + "62055": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext.implicit" + }, + "62056": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext.implicit" + }, + "62057": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext.implicit" + }, + "62058": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "value" + }, + "62059": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext.column" + }, + "62060": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext.column" + }, + "62061": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "IgcColumnTemplateContext.column" + }, + "62062": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-template-context.d.ts", + "qualifiedName": "value" + }, + "62063": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "qualifiedName": "IgcNoopSortingStrategy" + }, + "62064": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "qualifiedName": "IgcNoopSortingStrategy.instance" + }, + "62065": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "qualifiedName": "IgcNoopSortingStrategy.instance" + }, + "62068": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "qualifiedName": "IgcNoopSortingStrategy.sort" + }, + "62069": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "qualifiedName": "IgcNoopSortingStrategy.sort" + }, + "62070": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-noop-sorting-strategy.d.ts", + "qualifiedName": "data" + }, + "62071": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective" + }, + "62072": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "__type" + }, + "62073": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcGridBaseDirective" + }, + "62074": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "args" + }, + "62075": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.snackbarDisplayTime" + }, + "62076": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.snackbarDisplayTime" + }, + "62077": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.snackbarDisplayTime" + }, + "62078": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62079": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerate" + }, + "62080": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerate" + }, + "62081": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerate" + }, + "62082": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62083": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerateExclude" + }, + "62084": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerateExclude" + }, + "62085": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerateExclude" + }, + "62086": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62087": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moving" + }, + "62088": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moving" + }, + "62089": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moving" + }, + "62090": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62091": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridTemplate" + }, + "62092": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridTemplate" + }, + "62093": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridTemplate" + }, + "62094": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62095": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRowEmptyTemplate" + }, + "62096": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRowEmptyTemplate" + }, + "62097": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRowEmptyTemplate" + }, + "62098": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62099": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.loadingGridTemplate" + }, + "62100": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.loadingGridTemplate" + }, + "62101": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.loadingGridTemplate" + }, + "62102": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62103": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryRowHeight" + }, + "62104": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryRowHeight" + }, + "62105": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryRowHeight" + }, + "62106": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62107": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataCloneStrategy" + }, + "62108": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataCloneStrategy" + }, + "62109": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataCloneStrategy" + }, + "62110": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62111": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clipboardOptions" + }, + "62112": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clipboardOptions" + }, + "62113": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clipboardOptions" + }, + "62114": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62115": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowClasses" + }, + "62116": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowClasses" + }, + "62117": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowClasses" + }, + "62118": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62119": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowStyles" + }, + "62120": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowStyles" + }, + "62121": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowStyles" + }, + "62122": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62123": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.primaryKey" + }, + "62124": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.primaryKey" + }, + "62125": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.primaryKey" + }, + "62126": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62127": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnList" + }, + "62128": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnList" + }, + "62131": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.actionStripComponents" + }, + "62132": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.actionStripComponents" + }, + "62135": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragGhostCustomTemplate" + }, + "62136": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragGhostCustomTemplate" + }, + "62137": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragGhostCustomTemplate" + }, + "62138": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62139": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditTextTemplate" + }, + "62140": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditTextTemplate" + }, + "62141": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditTextTemplate" + }, + "62142": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62143": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowAddTextTemplate" + }, + "62144": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowAddTextTemplate" + }, + "62145": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowAddTextTemplate" + }, + "62146": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62147": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditActionsTemplate" + }, + "62148": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditActionsTemplate" + }, + "62149": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditActionsTemplate" + }, + "62150": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62151": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowExpandedIndicatorTemplate" + }, + "62152": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowExpandedIndicatorTemplate" + }, + "62153": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowExpandedIndicatorTemplate" + }, + "62154": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62155": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowCollapsedIndicatorTemplate" + }, + "62156": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowCollapsedIndicatorTemplate" + }, + "62157": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowCollapsedIndicatorTemplate" + }, + "62158": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62159": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerExpandedIndicatorTemplate" + }, + "62160": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerExpandedIndicatorTemplate" + }, + "62161": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerExpandedIndicatorTemplate" + }, + "62162": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62163": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerCollapsedIndicatorTemplate" + }, + "62164": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerCollapsedIndicatorTemplate" + }, + "62165": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerCollapsedIndicatorTemplate" + }, + "62166": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62167": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.excelStyleHeaderIconTemplate" + }, + "62168": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.excelStyleHeaderIconTemplate" + }, + "62169": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.excelStyleHeaderIconTemplate" + }, + "62170": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62171": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortAscendingHeaderIconTemplate" + }, + "62172": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortAscendingHeaderIconTemplate" + }, + "62173": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortAscendingHeaderIconTemplate" + }, + "62174": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62175": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortDescendingHeaderIconTemplate" + }, + "62176": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortDescendingHeaderIconTemplate" + }, + "62177": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortDescendingHeaderIconTemplate" + }, + "62178": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62179": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortHeaderIconTemplate" + }, + "62180": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortHeaderIconTemplate" + }, + "62181": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortHeaderIconTemplate" + }, + "62182": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62183": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toolbar" + }, + "62184": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toolbar" + }, + "62187": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.paginationComponents" + }, + "62188": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.paginationComponents" + }, + "62191": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.resourceStrings" + }, + "62192": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.resourceStrings" + }, + "62193": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.resourceStrings" + }, + "62194": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62195": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringLogic" + }, + "62196": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringLogic" + }, + "62197": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringLogic" + }, + "62198": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62199": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringExpressionsTree" + }, + "62200": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringExpressionsTree" + }, + "62201": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringExpressionsTree" + }, + "62202": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62203": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.advancedFilteringExpressionsTree" + }, + "62204": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.advancedFilteringExpressionsTree" + }, + "62205": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.advancedFilteringExpressionsTree" + }, + "62206": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62207": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.locale" + }, + "62208": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.locale" + }, + "62209": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.locale" + }, + "62210": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62211": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pagingMode" + }, + "62212": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pagingMode" + }, + "62213": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pagingMode" + }, + "62214": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62215": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hideRowSelectors" + }, + "62216": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hideRowSelectors" + }, + "62217": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hideRowSelectors" + }, + "62218": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62219": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowDraggable" + }, + "62220": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowDraggable" + }, + "62221": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowDraggable" + }, + "62222": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62223": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.validationTrigger" + }, + "62224": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.validationTrigger" + }, + "62225": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.validationTrigger" + }, + "62226": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62227": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditable" + }, + "62228": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditable" + }, + "62229": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditable" + }, + "62230": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62231": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.height" + }, + "62232": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.height" + }, + "62233": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.height" + }, + "62234": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62235": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.width" + }, + "62236": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.width" + }, + "62237": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.width" + }, + "62238": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62239": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowHeight" + }, + "62240": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowHeight" + }, + "62241": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowHeight" + }, + "62242": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62243": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnWidth" + }, + "62244": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnWidth" + }, + "62245": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnWidth" + }, + "62246": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62247": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridMessage" + }, + "62248": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridMessage" + }, + "62249": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridMessage" + }, + "62250": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62251": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isLoading" + }, + "62252": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isLoading" + }, + "62253": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isLoading" + }, + "62254": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62255": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.shouldGenerate" + }, + "62256": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.shouldGenerate" + }, + "62257": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.shouldGenerate" + }, + "62258": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62259": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyFilteredGridMessage" + }, + "62260": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyFilteredGridMessage" + }, + "62261": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyFilteredGridMessage" + }, + "62262": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62263": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinning" + }, + "62264": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinning" + }, + "62265": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinning" + }, + "62266": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62267": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowFiltering" + }, + "62268": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowFiltering" + }, + "62269": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowFiltering" + }, + "62270": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62271": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowAdvancedFiltering" + }, + "62272": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowAdvancedFiltering" + }, + "62273": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowAdvancedFiltering" + }, + "62274": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62275": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterMode" + }, + "62276": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterMode" + }, + "62277": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterMode" + }, + "62278": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62279": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryPosition" + }, + "62280": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryPosition" + }, + "62281": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryPosition" + }, + "62282": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62283": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryCalculationMode" + }, + "62284": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryCalculationMode" + }, + "62285": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryCalculationMode" + }, + "62286": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62287": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.showSummaryOnCollapse" + }, + "62288": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.showSummaryOnCollapse" + }, + "62289": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.showSummaryOnCollapse" + }, + "62290": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62291": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterStrategy" + }, + "62292": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterStrategy" + }, + "62293": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterStrategy" + }, + "62294": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62295": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortStrategy" + }, + "62296": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortStrategy" + }, + "62297": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortStrategy" + }, + "62298": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62299": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.mergeStrategy" + }, + "62300": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.mergeStrategy" + }, + "62301": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.mergeStrategy" + }, + "62302": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62303": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingOptions" + }, + "62304": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingOptions" + }, + "62305": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingOptions" + }, + "62306": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62307": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedRows" + }, + "62308": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedRows" + }, + "62309": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedRows" + }, + "62310": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62311": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowList" + }, + "62312": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowList" + }, + "62313": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataRowList" + }, + "62314": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataRowList" + }, + "62315": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headSelectorTemplate" + }, + "62316": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headSelectorTemplate" + }, + "62317": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headSelectorTemplate" + }, + "62318": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62319": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelectorTemplate" + }, + "62320": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelectorTemplate" + }, + "62321": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelectorTemplate" + }, + "62322": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62323": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragIndicatorIconTemplate" + }, + "62324": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragIndicatorIconTemplate" + }, + "62325": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragIndicatorIconTemplate" + }, + "62326": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62327": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingExpressions" + }, + "62328": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingExpressions" + }, + "62329": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingExpressions" + }, + "62330": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62331": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hiddenColumnsCount" + }, + "62332": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hiddenColumnsCount" + }, + "62333": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumnsCount" + }, + "62334": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumnsCount" + }, + "62335": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.batchEditing" + }, + "62336": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.batchEditing" + }, + "62337": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.batchEditing" + }, + "62338": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62339": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellSelection" + }, + "62340": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellSelection" + }, + "62341": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellSelection" + }, + "62342": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62343": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellMergeMode" + }, + "62344": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellMergeMode" + }, + "62345": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellMergeMode" + }, + "62346": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62347": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelection" + }, + "62348": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelection" + }, + "62349": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelection" + }, + "62350": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62351": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnSelection" + }, + "62352": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnSelection" + }, + "62353": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnSelection" + }, + "62354": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62355": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.lastSearchInfo" + }, + "62356": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.lastSearchInfo" + }, + "62357": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredData" + }, + "62358": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredData" + }, + "62359": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredSortedData" + }, + "62360": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredSortedData" + }, + "62361": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.virtualizationState" + }, + "62362": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.virtualizationState" + }, + "62363": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expansionStates" + }, + "62364": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expansionStates" + }, + "62365": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expansionStates" + }, + "62366": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62367": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.outlet" + }, + "62368": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.outlet" + }, + "62369": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.outlet" + }, + "62370": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62371": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.defaultRowHeight" + }, + "62372": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.defaultRowHeight" + }, + "62373": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columns" + }, + "62374": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columns" + }, + "62375": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumns" + }, + "62376": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumns" + }, + "62377": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedStartColumns" + }, + "62378": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedStartColumns" + }, + "62379": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedEndColumns" + }, + "62380": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedEndColumns" + }, + "62381": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedRows" + }, + "62382": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedRows" + }, + "62383": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinnedColumns" + }, + "62384": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinnedColumns" + }, + "62385": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.visibleColumns" + }, + "62386": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.visibleColumns" + }, + "62387": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.totalRecords" + }, + "62388": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.totalRecords" + }, + "62389": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.totalRecords" + }, + "62390": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62391": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataView" + }, + "62392": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataView" + }, + "62393": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRowOnClick" + }, + "62394": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRowOnClick" + }, + "62395": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRowOnClick" + }, + "62396": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62397": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isRecordPinnedByIndex" + }, + "62398": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isRecordPinnedByIndex" + }, + "62399": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIndex" + }, + "62400": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleColumnVisibility" + }, + "62401": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleColumnVisibility" + }, + "62402": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "args" + }, + "62403": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandAll" + }, + "62404": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandAll" + }, + "62405": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseAll" + }, + "62406": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseAll" + }, + "62407": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandRow" + }, + "62408": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandRow" + }, + "62409": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "62410": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseRow" + }, + "62411": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseRow" + }, + "62412": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "62413": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleRow" + }, + "62414": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleRow" + }, + "62415": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "62416": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getHeaderGroupWidth" + }, + "62417": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getHeaderGroupWidth" + }, + "62418": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "column" + }, + "62419": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByName" + }, + "62420": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByName" + }, + "62421": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "62422": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByVisibleIndex" + }, + "62423": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByVisibleIndex" + }, + "62424": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "62425": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.recalculateAutoSizes" + }, + "62426": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.recalculateAutoSizes" + }, + "62427": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moveColumn" + }, + "62428": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moveColumn" + }, + "62429": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "column" + }, + "62430": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "target" + }, + "62431": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "pos" + }, + "62432": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.markForCheck" + }, + "62433": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.markForCheck" + }, + "62434": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRow" + }, + "62435": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRow" + }, + "62436": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "data" + }, + "62437": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deleteRow" + }, + "62438": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deleteRow" + }, + "62439": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "62440": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateCell" + }, + "62441": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateCell" + }, + "62442": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62443": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "62444": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "column" + }, + "62445": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateRow" + }, + "62446": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateRow" + }, + "62447": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62448": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "62449": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getRowData" + }, + "62450": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getRowData" + }, + "62451": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "62452": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sort" + }, + "62453": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sort" + }, + "62454": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "expression" + }, + "62455": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filter" + }, + "62456": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filter" + }, + "62457": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "62458": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62459": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "conditionOrExpressionTree" + }, + "62460": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "ignoreCase" + }, + "62461": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterGlobal" + }, + "62462": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterGlobal" + }, + "62463": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "62464": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "condition" + }, + "62465": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "ignoreCase" + }, + "62466": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.enableSummaries" + }, + "62467": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.enableSummaries" + }, + "62468": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rest" + }, + "62469": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.disableSummaries" + }, + "62470": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.disableSummaries" + }, + "62471": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rest" + }, + "62472": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearFilter" + }, + "62473": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearFilter" + }, + "62474": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "62475": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSort" + }, + "62476": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSort" + }, + "62477": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "62478": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinColumn" + }, + "62479": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinColumn" + }, + "62480": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columnName" + }, + "62481": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "62482": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "pinningPosition" + }, + "62483": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinColumn" + }, + "62484": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinColumn" + }, + "62485": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columnName" + }, + "62486": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "62487": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinRow" + }, + "62488": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinRow" + }, + "62489": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "62490": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "62491": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "row" + }, + "62492": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinRow" + }, + "62493": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinRow" + }, + "62494": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "62495": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "row" + }, + "62496": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.reflow" + }, + "62497": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.reflow" + }, + "62498": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findNext" + }, + "62499": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findNext" + }, + "62500": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "text" + }, + "62501": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "caseSensitive" + }, + "62502": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "exactMatch" + }, + "62503": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findPrev" + }, + "62504": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findPrev" + }, + "62505": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "text" + }, + "62506": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "caseSensitive" + }, + "62507": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "exactMatch" + }, + "62508": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.refreshSearch" + }, + "62509": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.refreshSearch" + }, + "62510": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "updateActiveInfo" + }, + "62511": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "endEdit" + }, + "62512": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSearch" + }, + "62513": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSearch" + }, + "62514": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedStartWidth" + }, + "62515": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedStartWidth" + }, + "62516": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "takeHidden" + }, + "62517": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedEndWidth" + }, + "62518": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedEndWidth" + }, + "62519": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "takeHidden" + }, + "62520": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRows" + }, + "62521": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRows" + }, + "62522": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIDs" + }, + "62523": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "62524": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectRows" + }, + "62525": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectRows" + }, + "62526": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIDs" + }, + "62527": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllRows" + }, + "62528": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllRows" + }, + "62529": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "onlyFilterData" + }, + "62530": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllRows" + }, + "62531": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllRows" + }, + "62532": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "onlyFilterData" + }, + "62533": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearCellSelection" + }, + "62534": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearCellSelection" + }, + "62535": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRange" + }, + "62536": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRange" + }, + "62537": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "arg" + }, + "62538": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedRanges" + }, + "62539": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedRanges" + }, + "62540": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedData" + }, + "62541": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedData" + }, + "62542": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "formatters" + }, + "62543": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "headers" + }, + "62544": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedColumns" + }, + "62545": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedColumns" + }, + "62546": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectColumns" + }, + "62547": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectColumns" + }, + "62548": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columns" + }, + "62549": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "62550": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectColumns" + }, + "62551": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectColumns" + }, + "62552": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columns" + }, + "62553": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllColumns" + }, + "62554": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllColumns" + }, + "62555": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllColumns" + }, + "62556": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllColumns" + }, + "62557": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedColumnsData" + }, + "62558": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedColumnsData" + }, + "62559": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "formatters" + }, + "62560": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "headers" + }, + "62561": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.navigateTo" + }, + "62562": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.navigateTo" + }, + "62563": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIndex" + }, + "62564": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "visibleColIndex" + }, + "62565": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "cb" + }, + "62566": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getNextCell" + }, + "62567": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getNextCell" + }, + "62568": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "currRowIndex" + }, + "62569": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "62570": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "callback" + }, + "62571": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPreviousCell" + }, + "62572": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPreviousCell" + }, + "62573": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "currRowIndex" + }, + "62574": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "62575": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "callback" + }, + "62576": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.openAdvancedFilteringDialog" + }, + "62577": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.openAdvancedFilteringDialog" + }, + "62578": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "overlaySettings" + }, + "62579": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.closeAdvancedFilteringDialog" + }, + "62580": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.closeAdvancedFilteringDialog" + }, + "62581": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "applyChanges" + }, + "62582": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.endEdit" + }, + "62583": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.endEdit" + }, + "62584": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "commit" + }, + "62585": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "evt" + }, + "62586": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowById" + }, + "62587": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowById" + }, + "62588": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "62589": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "asChild" + }, + "62590": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowByIndex" + }, + "62591": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowByIndex" + }, + "62592": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "63578": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-state.d.ts", + "qualifiedName": "IgcForOfState" + }, + "63581": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-state.d.ts", + "qualifiedName": "IgcForOfState.startIndex" + }, + "63582": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-state.d.ts", + "qualifiedName": "IgcForOfState.chunkSize" + }, + "63583": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "63584": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "IgcGroupingExpression" + }, + "63587": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "IgcGroupingExpression.groupingComparer" + }, + "63588": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "IgcGroupingExpression.groupingComparer" + }, + "63589": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "a" + }, + "63590": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "b" + }, + "63591": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "currRec" + }, + "63592": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-expression.d.ts", + "qualifiedName": "groupRec" + }, + "63593": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.fieldName" + }, + "63594": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.fieldName" + }, + "63595": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.fieldName" + }, + "63596": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "value" + }, + "63597": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.dir" + }, + "63598": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.dir" + }, + "63599": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.dir" + }, + "63600": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "value" + }, + "63601": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.ignoreCase" + }, + "63602": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.strategy" + }, + "63603": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "63604": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState" + }, + "63607": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState.expanded" + }, + "63608": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState.expanded" + }, + "63609": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState.expanded" + }, + "63610": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "value" + }, + "63611": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState.hierarchy" + }, + "63612": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState.hierarchy" + }, + "63613": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "IgcGroupByExpandState.hierarchy" + }, + "63614": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-expand-state.d.ts", + "qualifiedName": "value" + }, + "63615": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "qualifiedName": "IgcGroupingDoneEventArgs" + }, + "63618": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "qualifiedName": "IgcGroupingDoneEventArgs.expressions" + }, + "63619": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "qualifiedName": "IgcGroupingDoneEventArgs.groupedColumns" + }, + "63620": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-done-event-args.d.ts", + "qualifiedName": "IgcGroupingDoneEventArgs.ungroupedColumns" + }, + "63621": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "63622": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext" + }, + "63625": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext.implicit" + }, + "63626": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext.implicit" + }, + "63627": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext.implicit" + }, + "63628": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "value" + }, + "63629": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext.index" + }, + "63630": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext.index" + }, + "63631": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "IgcGridMasterDetailContext.index" + }, + "63632": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-master-detail-context.d.ts", + "qualifiedName": "value" + }, + "63633": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "IgcGridGroupingStrategy" + }, + "63636": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "IgcGridGroupingStrategy.groupBy" + }, + "63637": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "IgcGridGroupingStrategy.groupBy" + }, + "63638": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "data" + }, + "63639": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "state" + }, + "63640": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "grid" + }, + "63641": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "groupsRecords" + }, + "63642": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-grouping-strategy.d.ts", + "qualifiedName": "fullResult" + }, + "63643": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "IgcGridSortingStrategy.sort" + }, + "63644": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "IgcGridSortingStrategy.sort" + }, + "63645": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "data" + }, + "63646": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "expressions" + }, + "63647": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "grid" + }, + "63648": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateContext" + }, + "63651": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateContext.implicit" + }, + "63652": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateContext.implicit" + }, + "63653": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateContext.implicit" + }, + "63654": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-context.d.ts", + "qualifiedName": "value" + }, + "63655": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "qualifiedName": "IgcGroupByRowTemplateContext" + }, + "63658": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "qualifiedName": "IgcGroupByRowTemplateContext.implicit" + }, + "63659": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "qualifiedName": "IgcGroupByRowTemplateContext.implicit" + }, + "63660": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "qualifiedName": "IgcGroupByRowTemplateContext.implicit" + }, + "63661": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-template-context.d.ts", + "qualifiedName": "value" + }, + "63662": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType" + }, + "63665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.index" + }, + "63666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.index" + }, + "63667": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.index" + }, + "63668": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "value" + }, + "63669": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.viewIndex" + }, + "63670": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.viewIndex" + }, + "63671": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.viewIndex" + }, + "63672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "value" + }, + "63673": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.isGroupByRow" + }, + "63674": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.isSummaryRow" + }, + "63675": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.groupRow" + }, + "63676": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.key" + }, + "63677": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.validation" + }, + "63678": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.data" + }, + "63679": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.cells" + }, + "63680": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.disabled" + }, + "63681": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.pinned" + }, + "63682": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.selected" + }, + "63683": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.expanded" + }, + "63684": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.deleted" + }, + "63685": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.inEditMode" + }, + "63686": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.children" + }, + "63687": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.parent" + }, + "63688": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.hasChildren" + }, + "63689": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.treeRow" + }, + "63690": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.addRowUI" + }, + "63691": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.focused" + }, + "63692": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.grid" + }, + "63693": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.grid" + }, + "63694": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.grid" + }, + "63695": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "value" + }, + "63696": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.update" + }, + "63697": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.update" + }, + "63698": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "value" + }, + "63699": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.delete" + }, + "63700": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.delete" + }, + "63701": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.pin" + }, + "63702": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.pin" + }, + "63703": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.unpin" + }, + "63704": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-type.d.ts", + "qualifiedName": "IgcRowType.unpin" + }, + "63705": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType" + }, + "63708": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.value" + }, + "63709": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.value" + }, + "63710": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.value" + }, + "63711": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63712": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editValue" + }, + "63713": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editValue" + }, + "63714": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editValue" + }, + "63715": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63716": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.selected" + }, + "63717": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.selected" + }, + "63718": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.selected" + }, + "63719": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63720": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.active" + }, + "63721": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.active" + }, + "63722": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.active" + }, + "63723": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63724": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editable" + }, + "63725": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editable" + }, + "63726": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editable" + }, + "63727": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63728": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editMode" + }, + "63729": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editMode" + }, + "63730": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.editMode" + }, + "63731": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63732": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.column" + }, + "63733": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.column" + }, + "63734": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.column" + }, + "63735": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63736": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.row" + }, + "63737": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.row" + }, + "63738": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.row" + }, + "63739": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63740": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.grid" + }, + "63741": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.grid" + }, + "63742": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.grid" + }, + "63743": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63744": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.id" + }, + "63745": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "__type" + }, + "63746": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "__type.rowID" + }, + "63747": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "__type.columnID" + }, + "63748": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "__type.rowIndex" + }, + "63749": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.cellID" + }, + "63750": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.validation" + }, + "63751": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.readonly" + }, + "63752": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.title" + }, + "63753": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.width" + }, + "63754": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.width" + }, + "63755": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.width" + }, + "63756": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63757": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.visibleColumnIndex" + }, + "63758": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.update" + }, + "63759": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.update" + }, + "63760": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63761": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.setEditMode" + }, + "63762": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.setEditMode" + }, + "63763": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "value" + }, + "63764": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.calculateSizeToFit" + }, + "63765": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "IgcCellType.calculateSizeToFit" + }, + "63766": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-type.d.ts", + "qualifiedName": "range" + }, + "63767": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective" + }, + "63768": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "__type" + }, + "63769": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective" + }, + "63770": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "args" + }, + "63771": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.hasChildrenKey" + }, + "63772": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.hasChildrenKey" + }, + "63773": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.hasChildrenKey" + }, + "63774": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63775": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.showExpandAll" + }, + "63776": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.showExpandAll" + }, + "63777": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.showExpandAll" + }, + "63778": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63779": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.rootGrid" + }, + "63780": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.rootGrid" + }, + "63781": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "IgcHierarchicalGridBaseDirective.rootGrid" + }, + "63782": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-hierarchical-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63851": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.snackbarDisplayTime" + }, + "63852": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.snackbarDisplayTime" + }, + "63853": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.snackbarDisplayTime" + }, + "63854": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63855": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerate" + }, + "63856": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerate" + }, + "63857": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerate" + }, + "63858": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63859": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerateExclude" + }, + "63860": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerateExclude" + }, + "63861": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.autoGenerateExclude" + }, + "63862": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63863": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moving" + }, + "63864": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moving" + }, + "63865": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moving" + }, + "63866": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63867": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridTemplate" + }, + "63868": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridTemplate" + }, + "63869": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridTemplate" + }, + "63870": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63871": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRowEmptyTemplate" + }, + "63872": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRowEmptyTemplate" + }, + "63873": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRowEmptyTemplate" + }, + "63874": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63875": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.loadingGridTemplate" + }, + "63876": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.loadingGridTemplate" + }, + "63877": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.loadingGridTemplate" + }, + "63878": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63879": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryRowHeight" + }, + "63880": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryRowHeight" + }, + "63881": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryRowHeight" + }, + "63882": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63883": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataCloneStrategy" + }, + "63884": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataCloneStrategy" + }, + "63885": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataCloneStrategy" + }, + "63886": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63887": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clipboardOptions" + }, + "63888": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clipboardOptions" + }, + "63889": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clipboardOptions" + }, + "63890": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63891": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowClasses" + }, + "63892": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowClasses" + }, + "63893": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowClasses" + }, + "63894": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63895": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowStyles" + }, + "63896": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowStyles" + }, + "63897": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowStyles" + }, + "63898": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63899": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.primaryKey" + }, + "63900": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.primaryKey" + }, + "63901": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.primaryKey" + }, + "63902": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63903": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnList" + }, + "63904": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnList" + }, + "63907": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.actionStripComponents" + }, + "63908": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.actionStripComponents" + }, + "63911": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragGhostCustomTemplate" + }, + "63912": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragGhostCustomTemplate" + }, + "63913": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragGhostCustomTemplate" + }, + "63914": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63915": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditTextTemplate" + }, + "63916": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditTextTemplate" + }, + "63917": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditTextTemplate" + }, + "63918": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63919": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowAddTextTemplate" + }, + "63920": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowAddTextTemplate" + }, + "63921": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowAddTextTemplate" + }, + "63922": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63923": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditActionsTemplate" + }, + "63924": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditActionsTemplate" + }, + "63925": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditActionsTemplate" + }, + "63926": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63927": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowExpandedIndicatorTemplate" + }, + "63928": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowExpandedIndicatorTemplate" + }, + "63929": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowExpandedIndicatorTemplate" + }, + "63930": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63931": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowCollapsedIndicatorTemplate" + }, + "63932": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowCollapsedIndicatorTemplate" + }, + "63933": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowCollapsedIndicatorTemplate" + }, + "63934": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63935": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerExpandedIndicatorTemplate" + }, + "63936": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerExpandedIndicatorTemplate" + }, + "63937": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerExpandedIndicatorTemplate" + }, + "63938": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63939": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerCollapsedIndicatorTemplate" + }, + "63940": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerCollapsedIndicatorTemplate" + }, + "63941": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headerCollapsedIndicatorTemplate" + }, + "63942": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63943": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.excelStyleHeaderIconTemplate" + }, + "63944": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.excelStyleHeaderIconTemplate" + }, + "63945": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.excelStyleHeaderIconTemplate" + }, + "63946": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63947": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortAscendingHeaderIconTemplate" + }, + "63948": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortAscendingHeaderIconTemplate" + }, + "63949": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortAscendingHeaderIconTemplate" + }, + "63950": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63951": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortDescendingHeaderIconTemplate" + }, + "63952": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortDescendingHeaderIconTemplate" + }, + "63953": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortDescendingHeaderIconTemplate" + }, + "63954": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63955": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortHeaderIconTemplate" + }, + "63956": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortHeaderIconTemplate" + }, + "63957": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortHeaderIconTemplate" + }, + "63958": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63959": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toolbar" + }, + "63960": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toolbar" + }, + "63963": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.paginationComponents" + }, + "63964": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.paginationComponents" + }, + "63967": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.resourceStrings" + }, + "63968": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.resourceStrings" + }, + "63969": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.resourceStrings" + }, + "63970": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63971": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringLogic" + }, + "63972": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringLogic" + }, + "63973": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringLogic" + }, + "63974": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63975": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringExpressionsTree" + }, + "63976": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringExpressionsTree" + }, + "63977": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteringExpressionsTree" + }, + "63978": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63979": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.advancedFilteringExpressionsTree" + }, + "63980": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.advancedFilteringExpressionsTree" + }, + "63981": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.advancedFilteringExpressionsTree" + }, + "63982": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63983": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.locale" + }, + "63984": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.locale" + }, + "63985": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.locale" + }, + "63986": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63987": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pagingMode" + }, + "63988": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pagingMode" + }, + "63989": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pagingMode" + }, + "63990": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63991": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hideRowSelectors" + }, + "63992": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hideRowSelectors" + }, + "63993": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hideRowSelectors" + }, + "63994": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63995": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowDraggable" + }, + "63996": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowDraggable" + }, + "63997": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowDraggable" + }, + "63998": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "63999": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.validationTrigger" + }, + "64000": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.validationTrigger" + }, + "64001": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.validationTrigger" + }, + "64002": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64003": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditable" + }, + "64004": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditable" + }, + "64005": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowEditable" + }, + "64006": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64007": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.height" + }, + "64008": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.height" + }, + "64009": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.height" + }, + "64010": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64011": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.width" + }, + "64012": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.width" + }, + "64013": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.width" + }, + "64014": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64015": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowHeight" + }, + "64016": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowHeight" + }, + "64017": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowHeight" + }, + "64018": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64019": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnWidth" + }, + "64020": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnWidth" + }, + "64021": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnWidth" + }, + "64022": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64023": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridMessage" + }, + "64024": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridMessage" + }, + "64025": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyGridMessage" + }, + "64026": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64027": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isLoading" + }, + "64028": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isLoading" + }, + "64029": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isLoading" + }, + "64030": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64031": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.shouldGenerate" + }, + "64032": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.shouldGenerate" + }, + "64033": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.shouldGenerate" + }, + "64034": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64035": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyFilteredGridMessage" + }, + "64036": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyFilteredGridMessage" + }, + "64037": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.emptyFilteredGridMessage" + }, + "64038": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64039": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinning" + }, + "64040": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinning" + }, + "64041": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinning" + }, + "64042": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64043": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowFiltering" + }, + "64044": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowFiltering" + }, + "64045": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowFiltering" + }, + "64046": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64047": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowAdvancedFiltering" + }, + "64048": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowAdvancedFiltering" + }, + "64049": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.allowAdvancedFiltering" + }, + "64050": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64051": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterMode" + }, + "64052": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterMode" + }, + "64053": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterMode" + }, + "64054": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64055": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryPosition" + }, + "64056": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryPosition" + }, + "64057": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryPosition" + }, + "64058": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64059": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryCalculationMode" + }, + "64060": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryCalculationMode" + }, + "64061": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.summaryCalculationMode" + }, + "64062": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64063": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.showSummaryOnCollapse" + }, + "64064": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.showSummaryOnCollapse" + }, + "64065": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.showSummaryOnCollapse" + }, + "64066": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64067": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterStrategy" + }, + "64068": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterStrategy" + }, + "64069": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterStrategy" + }, + "64070": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64071": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortStrategy" + }, + "64072": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortStrategy" + }, + "64073": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortStrategy" + }, + "64074": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64075": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.mergeStrategy" + }, + "64076": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.mergeStrategy" + }, + "64077": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.mergeStrategy" + }, + "64078": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64079": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingOptions" + }, + "64080": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingOptions" + }, + "64081": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingOptions" + }, + "64082": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64083": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedRows" + }, + "64084": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedRows" + }, + "64085": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedRows" + }, + "64086": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64087": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowList" + }, + "64088": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowList" + }, + "64089": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataRowList" + }, + "64090": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataRowList" + }, + "64091": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headSelectorTemplate" + }, + "64092": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headSelectorTemplate" + }, + "64093": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.headSelectorTemplate" + }, + "64094": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64095": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelectorTemplate" + }, + "64096": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelectorTemplate" + }, + "64097": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelectorTemplate" + }, + "64098": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64099": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragIndicatorIconTemplate" + }, + "64100": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragIndicatorIconTemplate" + }, + "64101": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dragIndicatorIconTemplate" + }, + "64102": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64103": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingExpressions" + }, + "64104": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingExpressions" + }, + "64105": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sortingExpressions" + }, + "64106": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64107": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hiddenColumnsCount" + }, + "64108": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.hiddenColumnsCount" + }, + "64109": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumnsCount" + }, + "64110": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumnsCount" + }, + "64111": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.batchEditing" + }, + "64112": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.batchEditing" + }, + "64113": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.batchEditing" + }, + "64114": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64115": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellSelection" + }, + "64116": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellSelection" + }, + "64117": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellSelection" + }, + "64118": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64119": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellMergeMode" + }, + "64120": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellMergeMode" + }, + "64121": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.cellMergeMode" + }, + "64122": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64123": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelection" + }, + "64124": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelection" + }, + "64125": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.rowSelection" + }, + "64126": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64127": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnSelection" + }, + "64128": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnSelection" + }, + "64129": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columnSelection" + }, + "64130": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64131": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.lastSearchInfo" + }, + "64132": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.lastSearchInfo" + }, + "64133": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredData" + }, + "64134": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredData" + }, + "64135": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredSortedData" + }, + "64136": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filteredSortedData" + }, + "64137": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.virtualizationState" + }, + "64138": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.virtualizationState" + }, + "64139": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expansionStates" + }, + "64140": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expansionStates" + }, + "64141": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expansionStates" + }, + "64142": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64143": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.outlet" + }, + "64144": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.outlet" + }, + "64145": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.outlet" + }, + "64146": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64147": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.defaultRowHeight" + }, + "64148": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.defaultRowHeight" + }, + "64149": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columns" + }, + "64150": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.columns" + }, + "64151": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumns" + }, + "64152": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedColumns" + }, + "64153": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedStartColumns" + }, + "64154": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedStartColumns" + }, + "64155": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedEndColumns" + }, + "64156": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedEndColumns" + }, + "64157": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedRows" + }, + "64158": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinnedRows" + }, + "64159": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinnedColumns" + }, + "64160": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinnedColumns" + }, + "64161": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.visibleColumns" + }, + "64162": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.visibleColumns" + }, + "64163": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.totalRecords" + }, + "64164": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.totalRecords" + }, + "64165": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.totalRecords" + }, + "64166": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64167": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataView" + }, + "64168": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.dataView" + }, + "64169": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRowOnClick" + }, + "64170": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRowOnClick" + }, + "64171": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRowOnClick" + }, + "64172": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64173": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isRecordPinnedByIndex" + }, + "64174": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.isRecordPinnedByIndex" + }, + "64175": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIndex" + }, + "64176": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleColumnVisibility" + }, + "64177": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleColumnVisibility" + }, + "64178": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "args" + }, + "64179": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandAll" + }, + "64180": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandAll" + }, + "64181": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseAll" + }, + "64182": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseAll" + }, + "64183": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandRow" + }, + "64184": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.expandRow" + }, + "64185": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "64186": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseRow" + }, + "64187": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.collapseRow" + }, + "64188": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "64189": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleRow" + }, + "64190": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.toggleRow" + }, + "64191": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "64192": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getHeaderGroupWidth" + }, + "64193": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getHeaderGroupWidth" + }, + "64194": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "column" + }, + "64195": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByName" + }, + "64196": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByName" + }, + "64197": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "64198": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByVisibleIndex" + }, + "64199": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getColumnByVisibleIndex" + }, + "64200": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "64201": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.recalculateAutoSizes" + }, + "64202": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.recalculateAutoSizes" + }, + "64203": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moveColumn" + }, + "64204": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.moveColumn" + }, + "64205": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "column" + }, + "64206": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "target" + }, + "64207": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "pos" + }, + "64208": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.markForCheck" + }, + "64209": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.markForCheck" + }, + "64210": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRow" + }, + "64211": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.addRow" + }, + "64212": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "data" + }, + "64213": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deleteRow" + }, + "64214": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deleteRow" + }, + "64215": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "64216": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateCell" + }, + "64217": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateCell" + }, + "64218": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64219": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "64220": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "column" + }, + "64221": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateRow" + }, + "64222": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.updateRow" + }, + "64223": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64224": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "64225": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getRowData" + }, + "64226": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getRowData" + }, + "64227": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowSelector" + }, + "64228": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sort" + }, + "64229": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.sort" + }, + "64230": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "expression" + }, + "64231": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filter" + }, + "64232": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filter" + }, + "64233": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "64234": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64235": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "conditionOrExpressionTree" + }, + "64236": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "ignoreCase" + }, + "64237": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterGlobal" + }, + "64238": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.filterGlobal" + }, + "64239": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "value" + }, + "64240": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "condition" + }, + "64241": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "ignoreCase" + }, + "64242": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.enableSummaries" + }, + "64243": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.enableSummaries" + }, + "64244": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rest" + }, + "64245": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.disableSummaries" + }, + "64246": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.disableSummaries" + }, + "64247": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rest" + }, + "64248": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearFilter" + }, + "64249": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearFilter" + }, + "64250": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "64251": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSort" + }, + "64252": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSort" + }, + "64253": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "name" + }, + "64254": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinColumn" + }, + "64255": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinColumn" + }, + "64256": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columnName" + }, + "64257": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "64258": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "pinningPosition" + }, + "64259": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinColumn" + }, + "64260": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinColumn" + }, + "64261": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columnName" + }, + "64262": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "64263": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinRow" + }, + "64264": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.pinRow" + }, + "64265": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "64266": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "64267": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "row" + }, + "64268": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinRow" + }, + "64269": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.unpinRow" + }, + "64270": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "64271": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "row" + }, + "64272": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.reflow" + }, + "64273": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.reflow" + }, + "64274": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findNext" + }, + "64275": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findNext" + }, + "64276": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "text" + }, + "64277": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "caseSensitive" + }, + "64278": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "exactMatch" + }, + "64279": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findPrev" + }, + "64280": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.findPrev" + }, + "64281": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "text" + }, + "64282": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "caseSensitive" + }, + "64283": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "exactMatch" + }, + "64284": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.refreshSearch" + }, + "64285": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.refreshSearch" + }, + "64286": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "updateActiveInfo" + }, + "64287": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "endEdit" + }, + "64288": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSearch" + }, + "64289": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearSearch" + }, + "64290": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedStartWidth" + }, + "64291": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedStartWidth" + }, + "64292": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "takeHidden" + }, + "64293": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedEndWidth" + }, + "64294": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPinnedEndWidth" + }, + "64295": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "takeHidden" + }, + "64296": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRows" + }, + "64297": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRows" + }, + "64298": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIDs" + }, + "64299": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "64300": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectRows" + }, + "64301": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectRows" + }, + "64302": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIDs" + }, + "64303": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllRows" + }, + "64304": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllRows" + }, + "64305": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "onlyFilterData" + }, + "64306": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllRows" + }, + "64307": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllRows" + }, + "64308": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "onlyFilterData" + }, + "64309": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearCellSelection" + }, + "64310": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.clearCellSelection" + }, + "64311": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRange" + }, + "64312": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectRange" + }, + "64313": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "arg" + }, + "64314": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedRanges" + }, + "64315": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedRanges" + }, + "64316": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedData" + }, + "64317": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedData" + }, + "64318": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "formatters" + }, + "64319": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "headers" + }, + "64320": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedColumns" + }, + "64321": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectedColumns" + }, + "64322": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectColumns" + }, + "64323": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectColumns" + }, + "64324": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columns" + }, + "64325": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "clearCurrentSelection" + }, + "64326": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectColumns" + }, + "64327": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectColumns" + }, + "64328": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "columns" + }, + "64329": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllColumns" + }, + "64330": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.deselectAllColumns" + }, + "64331": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllColumns" + }, + "64332": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.selectAllColumns" + }, + "64333": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedColumnsData" + }, + "64334": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getSelectedColumnsData" + }, + "64335": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "formatters" + }, + "64336": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "headers" + }, + "64337": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.navigateTo" + }, + "64338": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.navigateTo" + }, + "64339": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowIndex" + }, + "64340": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "visibleColIndex" + }, + "64341": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "cb" + }, + "64342": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getNextCell" + }, + "64343": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getNextCell" + }, + "64344": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "currRowIndex" + }, + "64345": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "64346": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "callback" + }, + "64347": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPreviousCell" + }, + "64348": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.getPreviousCell" + }, + "64349": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "currRowIndex" + }, + "64350": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "curVisibleColIndex" + }, + "64351": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "callback" + }, + "64352": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.openAdvancedFilteringDialog" + }, + "64353": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.openAdvancedFilteringDialog" + }, + "64354": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "overlaySettings" + }, + "64355": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.closeAdvancedFilteringDialog" + }, + "64356": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.closeAdvancedFilteringDialog" + }, + "64357": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "applyChanges" + }, + "64358": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.endEdit" + }, + "64359": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.endEdit" + }, + "64360": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "commit" + }, + "64361": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "evt" + }, + "64362": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowById" + }, + "64363": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowById" + }, + "64364": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "rowID" + }, + "64365": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "asChild" + }, + "64366": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowByIndex" + }, + "64367": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "IgcGridBaseDirective.beginAddRowByIndex" + }, + "64368": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-base-directive.d.ts", + "qualifiedName": "index" + }, + "65306": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension" + }, + "65307": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.__constructor" + }, + "65308": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension" + }, + "65309": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "inBaseDimension" + }, + "65310": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "inOptions" + }, + "65311": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.enabled" + }, + "65312": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.enabled" + }, + "65313": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.enabled" + }, + "65314": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "value" + }, + "65315": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.dataType" + }, + "65316": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.resourceStrings" + }, + "65317": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.resourceStrings" + }, + "65318": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.resourceStrings" + }, + "65319": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "value" + }, + "65320": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.baseDimension" + }, + "65321": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.baseDimension" + }, + "65322": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.baseDimension" + }, + "65323": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "value" + }, + "65324": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.options" + }, + "65325": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.options" + }, + "65326": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.options" + }, + "65327": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "value" + }, + "65328": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension.d.ts", + "qualifiedName": "IgcPivotDateDimension.displayName" + }, + "65329": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.childLevel" + }, + "65330": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberName" + }, + "65331": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberName" + }, + "65332": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberName" + }, + "65333": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "value" + }, + "65334": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.memberFunction" + }, + "65335": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.filter" + }, + "65336": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.sortable" + }, + "65337": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.sortDirection" + }, + "65338": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.width" + }, + "65339": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.level" + }, + "65340": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension.d.ts", + "qualifiedName": "IgcPivotDimension.horizontalSummary" + }, + "65341": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings" + }, + "65344": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_groupByArea_message" + }, + "65345": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_groupByArea_select_message" + }, + "65346": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_groupByArea_deselect_message" + }, + "65347": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_emptyFilteredGrid_message" + }, + "65348": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_emptyGrid_message" + }, + "65349": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter" + }, + "65350": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_row_close" + }, + "65351": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_row_reset" + }, + "65352": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_row_placeholder" + }, + "65353": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_row_boolean_placeholder" + }, + "65354": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_row_date_placeholder" + }, + "65355": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_row_time_placeholder" + }, + "65356": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_operator_and" + }, + "65357": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_complex_filter" + }, + "65358": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_operator_or" + }, + "65359": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_contains" + }, + "65360": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_doesNotContain" + }, + "65361": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_startsWith" + }, + "65362": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_endsWith" + }, + "65363": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_equals" + }, + "65364": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_doesNotEqual" + }, + "65365": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_empty" + }, + "65366": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_notEmpty" + }, + "65367": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_null" + }, + "65368": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_notNull" + }, + "65369": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_before" + }, + "65370": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_after" + }, + "65371": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_at" + }, + "65372": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_not_at" + }, + "65373": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_at_before" + }, + "65374": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_at_after" + }, + "65375": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_today" + }, + "65376": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_yesterday" + }, + "65377": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_thisMonth" + }, + "65378": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_lastMonth" + }, + "65379": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_nextMonth" + }, + "65380": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_thisYear" + }, + "65381": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_lastYear" + }, + "65382": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_nextYear" + }, + "65383": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_greaterThan" + }, + "65384": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_lessThan" + }, + "65385": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_greaterThanOrEqualTo" + }, + "65386": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_lessThanOrEqualTo" + }, + "65387": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_true" + }, + "65388": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_false" + }, + "65389": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_all" + }, + "65390": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_in" + }, + "65391": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_notIn" + }, + "65392": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_filter_condition_placeholder" + }, + "65393": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_count" + }, + "65394": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_min" + }, + "65395": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_max" + }, + "65396": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_sum" + }, + "65397": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_average" + }, + "65398": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_earliest" + }, + "65399": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_summary_latest" + }, + "65400": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_moving_left" + }, + "65401": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_moving_left_short" + }, + "65402": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_moving_right" + }, + "65403": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_moving_right_short" + }, + "65404": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_moving_header" + }, + "65405": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_sorting_asc" + }, + "65406": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_sorting_asc_short" + }, + "65407": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_sorting_desc" + }, + "65408": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_sorting_desc_short" + }, + "65409": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_sorting_header" + }, + "65410": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_filter_clear" + }, + "65411": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_custom_dialog_add" + }, + "65412": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_custom_dialog_clear" + }, + "65413": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_custom_dialog_header" + }, + "65414": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_cancel" + }, + "65415": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_apply" + }, + "65416": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_search_placeholder" + }, + "65417": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_select_all" + }, + "65418": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_select_all_search_results" + }, + "65419": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_add_to_filter" + }, + "65420": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_blanks" + }, + "65421": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_hide" + }, + "65422": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_show" + }, + "65423": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_pin" + }, + "65424": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_unpin" + }, + "65425": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_select" + }, + "65426": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_deselect" + }, + "65427": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_text_filter" + }, + "65428": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_number_filter" + }, + "65429": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_date_filter" + }, + "65430": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_boolean_filter" + }, + "65431": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_currency_filter" + }, + "65432": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_custom_filter" + }, + "65433": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_no_matches" + }, + "65434": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_excel_matches_count" + }, + "65435": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_title" + }, + "65436": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_from_label" + }, + "65437": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_and_group" + }, + "65438": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_or_group" + }, + "65439": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_end_group" + }, + "65440": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_create_and_group" + }, + "65441": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_create_or_group" + }, + "65442": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_and_label" + }, + "65443": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_or_label" + }, + "65444": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_add_condition" + }, + "65445": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_add_condition_root" + }, + "65446": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_add_group" + }, + "65447": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_add_group_root" + }, + "65448": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_ungroup" + }, + "65449": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_delete" + }, + "65450": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_delete_filters" + }, + "65451": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_initial_text" + }, + "65452": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_column_placeholder" + }, + "65453": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_value_placeholder" + }, + "65454": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_query_value_placeholder" + }, + "65455": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_switch_group" + }, + "65456": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_dialog_title" + }, + "65457": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_dialog_message" + }, + "65458": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_dialog_checkbox_text" + }, + "65459": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_drop_ghost_text" + }, + "65460": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_select_entity" + }, + "65461": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_advanced_filter_select_return_field_single" + }, + "65462": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pinned_row_indicator" + }, + "65463": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_hiding_check_all_label" + }, + "65464": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_hiding_uncheck_all_label" + }, + "65465": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pinning_check_all_label" + }, + "65466": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pinning_uncheck_all_label" + }, + "65467": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_row_edit_btn_done" + }, + "65468": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_row_edit_btn_cancel" + }, + "65469": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_row_edit_text" + }, + "65470": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_actions_filter_prompt" + }, + "65471": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_pinning_button_tooltip" + }, + "65472": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_hiding_button_tooltip" + }, + "65473": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_pinning_title" + }, + "65474": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_hiding_title" + }, + "65475": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip" + }, + "65476": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_advanced_filtering_button_label" + }, + "65477": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_exporter_button_tooltip" + }, + "65478": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_exporter_button_label" + }, + "65479": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_exporter_excel_entry_text" + }, + "65480": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_toolbar_exporter_csv_entry_text" + }, + "65481": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_snackbar_addrow_label" + }, + "65482": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_snackbar_addrow_actiontext" + }, + "65483": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_edit_label" + }, + "65484": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_add_label" + }, + "65485": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_add_row_label" + }, + "65486": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_add_child_label" + }, + "65487": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_delete_label" + }, + "65488": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_pin_label" + }, + "65489": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_unpin_label" + }, + "65490": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_jumpUp_label" + }, + "65491": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_actions_jumpDown_label" + }, + "65492": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_date_dimension_total" + }, + "65493": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_count" + }, + "65494": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_min" + }, + "65495": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_max" + }, + "65496": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_sum" + }, + "65497": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_avg" + }, + "65498": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_date_latest" + }, + "65499": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_date_earliest" + }, + "65500": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_time_latest" + }, + "65501": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_aggregate_time_earliest" + }, + "65502": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_empty_row_drop_area" + }, + "65503": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_empty_column_drop_area" + }, + "65504": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_empty_filter_drop_area" + }, + "65505": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_empty_value_drop_area" + }, + "65506": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_row_drop_chip" + }, + "65507": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_column_drop_chip" + }, + "65508": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_filter_drop_chip" + }, + "65509": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_value_drop_chip" + }, + "65510": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_empty_message" + }, + "65511": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_selector_filters" + }, + "65512": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_selector_rows" + }, + "65513": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_selector_columns" + }, + "65514": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_selector_values" + }, + "65515": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pivot_selector_panel_empty" + }, + "65516": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_required_validation_error" + }, + "65517": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_min_validation_error" + }, + "65518": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_max_validation_error" + }, + "65519": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_min_length_validation_error" + }, + "65520": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_max_length_validation_error" + }, + "65521": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_email_validation_error" + }, + "65522": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-resource-strings.d.ts", + "qualifiedName": "IgcGridResourceStrings.igx_grid_pattern_validation_error" + }, + "65523": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "qualifiedName": "IgcPivotDateDimensionOptions" + }, + "65526": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "qualifiedName": "IgcPivotDateDimensionOptions.total" + }, + "65527": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "qualifiedName": "IgcPivotDateDimensionOptions.years" + }, + "65528": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "qualifiedName": "IgcPivotDateDimensionOptions.quarters" + }, + "65529": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "qualifiedName": "IgcPivotDateDimensionOptions.months" + }, + "65530": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-date-dimension-options.d.ts", + "qualifiedName": "IgcPivotDateDimensionOptions.fullDate" + }, + "65531": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange" + }, + "65534": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange.dimensions" + }, + "65535": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange.dimensions" + }, + "65536": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange.dimensions" + }, + "65537": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "value" + }, + "65538": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange.dimensionCollectionType" + }, + "65539": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange.dimensionCollectionType" + }, + "65540": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "IgcDimensionsChange.dimensionCollectionType" + }, + "65541": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-dimensions-change.d.ts", + "qualifiedName": "value" + }, + "65542": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration-changed-event-args.d.ts", + "qualifiedName": "IgcPivotConfigurationChangedEventArgs" + }, + "65545": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration-changed-event-args.d.ts", + "qualifiedName": "IgcPivotConfigurationChangedEventArgs.pivotConfiguration" + }, + "65546": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression" + }, + "65549": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.fieldName" + }, + "65550": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.fieldName" + }, + "65551": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.fieldName" + }, + "65552": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "value" + }, + "65553": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.dir" + }, + "65554": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.dir" + }, + "65555": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.dir" + }, + "65556": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "value" + }, + "65557": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.ignoreCase" + }, + "65558": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-expression.d.ts", + "qualifiedName": "IgcSortingExpression.strategy" + }, + "65559": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "65560": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "qualifiedName": "IgcValuesChange" + }, + "65563": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "qualifiedName": "IgcValuesChange.values" + }, + "65564": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "qualifiedName": "IgcValuesChange.values" + }, + "65565": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "qualifiedName": "IgcValuesChange.values" + }, + "65566": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-values-change.d.ts", + "qualifiedName": "value" + }, + "65567": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "qualifiedName": "IgcPivotGridValueTemplateContext" + }, + "65570": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "qualifiedName": "IgcPivotGridValueTemplateContext.implicit" + }, + "65571": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "qualifiedName": "IgcPivotGridValueTemplateContext.implicit" + }, + "65572": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "qualifiedName": "IgcPivotGridValueTemplateContext.implicit" + }, + "65573": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-value-template-context.d.ts", + "qualifiedName": "value" + }, + "65574": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration" + }, + "65577": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.rowStrategy" + }, + "65578": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.columnStrategy" + }, + "65579": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.rows" + }, + "65580": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.rows" + }, + "65581": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.rows" + }, + "65582": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "value" + }, + "65583": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.columns" + }, + "65584": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.columns" + }, + "65585": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.columns" + }, + "65586": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "value" + }, + "65587": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.values" + }, + "65588": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.values" + }, + "65589": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.values" + }, + "65590": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "value" + }, + "65591": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.filters" + }, + "65592": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-configuration.d.ts", + "qualifiedName": "IgcPivotConfiguration.pivotKeys" + }, + "65593": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "qualifiedName": "IgcPivotUISettings" + }, + "65596": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "qualifiedName": "IgcPivotUISettings.showConfiguration" + }, + "65597": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "qualifiedName": "IgcPivotUISettings.showRowHeaders" + }, + "65598": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "qualifiedName": "IgcPivotUISettings.rowLayout" + }, + "65599": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-ui-settings.d.ts", + "qualifiedName": "IgcPivotUISettings.horizontalSummariesPosition" + }, + "65600": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "qualifiedName": "IgcSummaryExpression" + }, + "65603": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "qualifiedName": "IgcSummaryExpression.fieldName" + }, + "65604": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "qualifiedName": "IgcSummaryExpression.fieldName" + }, + "65605": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "qualifiedName": "IgcSummaryExpression.fieldName" + }, + "65606": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "qualifiedName": "value" + }, + "65607": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-expression.d.ts", + "qualifiedName": "IgcSummaryExpression.customSummary" + }, + "65608": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand" + }, + "65609": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65610": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65611": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65614": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.operate" + }, + "65615": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.operate" + }, + "65616": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65617": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "_allData" + }, + "65618": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "_fieldName" + }, + "65619": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "_groupRecord" + }, + "65620": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult" + }, + "65623": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.key" + }, + "65624": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.key" + }, + "65625": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.key" + }, + "65626": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "value" + }, + "65627": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.label" + }, + "65628": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.label" + }, + "65629": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.label" + }, + "65630": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "value" + }, + "65631": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.summaryResult" + }, + "65632": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.summaryResult" + }, + "65633": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.summaryResult" + }, + "65634": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "value" + }, + "65635": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-result.d.ts", + "qualifiedName": "IgcSummaryResult.defaultFormatting" + }, + "65636": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand" + }, + "65637": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.min" + }, + "65638": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.min" + }, + "65639": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65640": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.max" + }, + "65641": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.max" + }, + "65642": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65643": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.sum" + }, + "65644": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.sum" + }, + "65645": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65646": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.average" + }, + "65647": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.average" + }, + "65648": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65649": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65650": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65651": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65654": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.operate" + }, + "65655": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "IgcNumberSummaryOperand.operate" + }, + "65656": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65657": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "allData" + }, + "65658": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "fieldName" + }, + "65659": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-number-summary-operand.d.ts", + "qualifiedName": "groupRecord" + }, + "65660": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand" + }, + "65661": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand.latest" + }, + "65662": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand.latest" + }, + "65663": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65664": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand.earliest" + }, + "65665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand.earliest" + }, + "65666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65667": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65668": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65669": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand.operate" + }, + "65673": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "IgcDateSummaryOperand.operate" + }, + "65674": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65675": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "allData" + }, + "65676": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "fieldName" + }, + "65677": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-date-summary-operand.d.ts", + "qualifiedName": "groupRecord" + }, + "65678": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand" + }, + "65679": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand.latestTime" + }, + "65680": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand.latestTime" + }, + "65681": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65682": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand.earliestTime" + }, + "65683": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand.earliestTime" + }, + "65684": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65685": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65686": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "IgcSummaryOperand.count" + }, + "65687": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65690": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand.operate" + }, + "65691": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "IgcTimeSummaryOperand.operate" + }, + "65692": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "data" + }, + "65693": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "allData" + }, + "65694": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "fieldName" + }, + "65695": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-time-summary-operand.d.ts", + "qualifiedName": "groupRecord" + }, + "65696": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings" + }, + "65699": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings.target" + }, + "65700": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings.positionStrategy" + }, + "65701": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings.scrollStrategy" + }, + "65702": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings.modal" + }, + "65703": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings.closeOnOutsideClick" + }, + "65704": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-settings.d.ts", + "qualifiedName": "IgcOverlaySettings.closeOnEscape" + }, + "66709": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs" + }, + "66712": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.exporter" + }, + "66713": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.exporter" + }, + "66714": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.exporter" + }, + "66715": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "value" + }, + "66716": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.options" + }, + "66717": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.options" + }, + "66718": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.options" + }, + "66719": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "value" + }, + "66720": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.grid" + }, + "66721": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.grid" + }, + "66722": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.grid" + }, + "66723": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "value" + }, + "66724": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.cancel" + }, + "66725": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.cancel" + }, + "66726": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "IgcExporterEventArgs.cancel" + }, + "66727": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-event-args.d.ts", + "qualifiedName": "value" + }, + "67732": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-cancelable-event-args.d.ts", + "qualifiedName": "IgcToggleViewCancelableEventArgs" + }, + "67735": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-cancelable-event-args.d.ts", + "qualifiedName": "IgcToggleViewCancelableEventArgs.id" + }, + "67736": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-event-args.d.ts", + "qualifiedName": "IgcToggleViewEventArgs" + }, + "67739": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-toggle-view-event-args.d.ts", + "qualifiedName": "IgcToggleViewEventArgs.id" + }, + "67740": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "67741": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-toggled-event-args.d.ts", + "qualifiedName": "IgcColumnToggledEventArgs" + }, + "67744": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-toggled-event-args.d.ts", + "qualifiedName": "IgcColumnToggledEventArgs.column" + }, + "67745": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-toggled-event-args.d.ts", + "qualifiedName": "IgcColumnToggledEventArgs.checked" + }, + "67746": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "67747": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord" + }, + "67750": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.key" + }, + "67751": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.key" + }, + "67752": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.key" + }, + "67753": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "value" + }, + "67754": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.data" + }, + "67755": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.data" + }, + "67756": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.data" + }, + "67757": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "value" + }, + "67758": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.children" + }, + "67759": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.parent" + }, + "67760": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.level" + }, + "67761": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.isFilteredOutParent" + }, + "67762": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-tree-grid-record.d.ts", + "qualifiedName": "IgcTreeGridRecord.expanded" + }, + "67763": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions" + }, + "67766": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.columns" + }, + "67767": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.filtering" + }, + "67768": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.advancedFiltering" + }, + "67769": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.sorting" + }, + "67770": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.groupBy" + }, + "67771": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.paging" + }, + "67772": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.cellSelection" + }, + "67773": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.rowSelection" + }, + "67774": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.columnSelection" + }, + "67775": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.rowPinning" + }, + "67776": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.pinningConfig" + }, + "67777": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.expansion" + }, + "67778": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.rowIslands" + }, + "67779": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.moving" + }, + "67780": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-options.d.ts", + "qualifiedName": "IgcGridStateOptions.pivotConfiguration" + }, + "67781": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState" + }, + "67784": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.pinned" + }, + "67785": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.pinned" + }, + "67786": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.pinned" + }, + "67787": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67788": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.sortable" + }, + "67789": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.sortable" + }, + "67790": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.sortable" + }, + "67791": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67792": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.filterable" + }, + "67793": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.filterable" + }, + "67794": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.filterable" + }, + "67795": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67796": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.editable" + }, + "67797": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.editable" + }, + "67798": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.editable" + }, + "67799": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67800": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.sortingIgnoreCase" + }, + "67801": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.sortingIgnoreCase" + }, + "67802": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.sortingIgnoreCase" + }, + "67803": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67804": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.filteringIgnoreCase" + }, + "67805": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.filteringIgnoreCase" + }, + "67806": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.filteringIgnoreCase" + }, + "67807": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67808": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.headerClasses" + }, + "67809": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.headerClasses" + }, + "67810": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.headerClasses" + }, + "67811": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67812": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.headerGroupClasses" + }, + "67813": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.headerGroupClasses" + }, + "67814": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.headerGroupClasses" + }, + "67815": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67816": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.maxWidth" + }, + "67817": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.maxWidth" + }, + "67818": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.maxWidth" + }, + "67819": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67820": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.groupable" + }, + "67821": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.groupable" + }, + "67822": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.groupable" + }, + "67823": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67824": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.hidden" + }, + "67825": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.hidden" + }, + "67826": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.hidden" + }, + "67827": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67828": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.dataType" + }, + "67829": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.dataType" + }, + "67830": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.dataType" + }, + "67831": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67832": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.hasSummary" + }, + "67833": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.hasSummary" + }, + "67834": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.hasSummary" + }, + "67835": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67836": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.field" + }, + "67837": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.field" + }, + "67838": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.field" + }, + "67839": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67840": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.width" + }, + "67841": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.width" + }, + "67842": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.width" + }, + "67843": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67844": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.header" + }, + "67845": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.header" + }, + "67846": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.header" + }, + "67847": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67848": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.resizable" + }, + "67849": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.resizable" + }, + "67850": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.resizable" + }, + "67851": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67852": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.searchable" + }, + "67853": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.searchable" + }, + "67854": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.searchable" + }, + "67855": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67856": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.columnGroup" + }, + "67857": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.columnGroup" + }, + "67858": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.columnGroup" + }, + "67859": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67860": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.columnLayout" + }, + "67861": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.rowStart" + }, + "67862": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.rowEnd" + }, + "67863": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.colStart" + }, + "67864": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.colEnd" + }, + "67865": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.parent" + }, + "67866": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.key" + }, + "67867": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.key" + }, + "67868": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.key" + }, + "67869": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67870": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.parentKey" + }, + "67871": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.parentKey" + }, + "67872": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.parentKey" + }, + "67873": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67874": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.disableHiding" + }, + "67875": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.disableHiding" + }, + "67876": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.disableHiding" + }, + "67877": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67878": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.disablePinning" + }, + "67879": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.disablePinning" + }, + "67880": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.disablePinning" + }, + "67881": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "value" + }, + "67882": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.collapsible" + }, + "67883": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.expanded" + }, + "67884": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-state.d.ts", + "qualifiedName": "IgcColumnState.visibleWhenCollapsed" + }, + "67885": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState" + }, + "67888": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState.index" + }, + "67889": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState.index" + }, + "67890": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState.index" + }, + "67891": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "value" + }, + "67892": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState.recordsPerPage" + }, + "67893": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState.recordsPerPage" + }, + "67894": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "IgcPagingState.recordsPerPage" + }, + "67895": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paging-state.d.ts", + "qualifiedName": "value" + }, + "67896": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState" + }, + "67899": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.expressions" + }, + "67900": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.expressions" + }, + "67901": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.expressions" + }, + "67902": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "value" + }, + "67903": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.expansion" + }, + "67904": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.expansion" + }, + "67905": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.expansion" + }, + "67906": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "value" + }, + "67907": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.defaultExpanded" + }, + "67908": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.defaultExpanded" + }, + "67909": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "IgcGroupingState.defaultExpanded" + }, + "67910": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grouping-state.d.ts", + "qualifiedName": "value" + }, + "67911": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange" + }, + "67914": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.rowStart" + }, + "67915": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.rowStart" + }, + "67916": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.rowStart" + }, + "67917": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "value" + }, + "67918": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.rowEnd" + }, + "67919": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.rowEnd" + }, + "67920": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.rowEnd" + }, + "67921": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "value" + }, + "67922": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.columnStart" + }, + "67923": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.columnStart" + }, + "67924": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.columnStart" + }, + "67925": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "value" + }, + "67926": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.columnEnd" + }, + "67927": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.columnEnd" + }, + "67928": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "IgcGridSelectionRange.columnEnd" + }, + "67929": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-selection-range.d.ts", + "qualifiedName": "value" + }, + "67930": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pinning-config.d.ts", + "qualifiedName": "IgcPinningConfig" + }, + "67933": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pinning-config.d.ts", + "qualifiedName": "IgcPinningConfig.columns" + }, + "67934": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pinning-config.d.ts", + "qualifiedName": "IgcPinningConfig.rows" + }, + "67935": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection" + }, + "67938": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.id" + }, + "67939": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.id" + }, + "67940": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.id" + }, + "67941": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "value" + }, + "67942": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.parentRowID" + }, + "67943": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.parentRowID" + }, + "67944": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.parentRowID" + }, + "67945": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "value" + }, + "67946": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.state" + }, + "67947": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.state" + }, + "67948": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "IgcGridStateCollection.state" + }, + "67949": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-state-collection.d.ts", + "qualifiedName": "value" + }, + "67950": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "IgcFilterItem" + }, + "67953": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "IgcFilterItem.value" + }, + "67954": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "IgcFilterItem.value" + }, + "67955": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "IgcFilterItem.value" + }, + "67956": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "value" + }, + "67957": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "IgcFilterItem.label" + }, + "67958": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filter-item.d.ts", + "qualifiedName": "IgcFilterItem.children" + }, + "67959": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs" + }, + "67962": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68284": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator" + }, + "68287": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.key" + }, + "68288": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.key" + }, + "68289": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.key" + }, + "68290": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "value" + }, + "68291": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.label" + }, + "68292": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.label" + }, + "68293": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.label" + }, + "68294": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "value" + }, + "68295": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.aggregatorName" + }, + "68296": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-aggregator.d.ts", + "qualifiedName": "IgcPivotAggregator.aggregator" + }, + "68297": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord" + }, + "68300": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.records" + }, + "68301": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.level" + }, + "68302": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.dimensions" + }, + "68303": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.dimensions" + }, + "68304": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.dimensions" + }, + "68305": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "value" + }, + "68306": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.totalRecordDimensionName" + }, + "68307": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-record.d.ts", + "qualifiedName": "IgcPivotGridRecord.dataIndex" + }, + "68308": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn" + }, + "68311": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.field" + }, + "68312": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.field" + }, + "68313": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.field" + }, + "68314": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "value" + }, + "68315": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.dimensions" + }, + "68316": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.dimensions" + }, + "68317": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.dimensions" + }, + "68318": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "value" + }, + "68319": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.value" + }, + "68320": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.value" + }, + "68321": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "IgcPivotGridColumn.value" + }, + "68322": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-grid-column.d.ts", + "qualifiedName": "value" + }, + "68323": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-strategy.d.ts", + "qualifiedName": "IgcSortingStrategy" + }, + "68326": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "qualifiedName": "IgcSummaryTemplateContext" + }, + "68329": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "qualifiedName": "IgcSummaryTemplateContext.implicit" + }, + "68330": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "qualifiedName": "IgcSummaryTemplateContext.implicit" + }, + "68331": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "qualifiedName": "IgcSummaryTemplateContext.implicit" + }, + "68332": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-summary-template-context.d.ts", + "qualifiedName": "value" + }, + "68333": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext" + }, + "68336": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.implicit" + }, + "68337": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.implicit" + }, + "68338": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.implicit" + }, + "68339": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "value" + }, + "68340": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.additionalTemplateContext" + }, + "68341": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.additionalTemplateContext" + }, + "68342": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.additionalTemplateContext" + }, + "68343": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "value" + }, + "68344": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.cell" + }, + "68345": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.cell" + }, + "68346": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "IgcCellTemplateContext.cell" + }, + "68347": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-template-context.d.ts", + "qualifiedName": "value" + }, + "68348": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-pipe-args.d.ts", + "qualifiedName": "IgcColumnPipeArgs" + }, + "68351": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.format" + }, + "68352": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.timezone" + }, + "68353": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.digitsInfo" + }, + "68354": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.currencyCode" + }, + "68355": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.display" + }, + "68356": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.weekStart" + }, + "68357": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-editor-options.d.ts", + "qualifiedName": "IgcColumnEditorOptions" + }, + "68360": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-editor-options.d.ts", + "qualifiedName": "IgcFieldEditorOptions.dateTimeFormat" + }, + "68361": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "qualifiedName": "IgcGridTemplateContext" + }, + "68364": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "qualifiedName": "IgcGridTemplateContext.implicit" + }, + "68365": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "qualifiedName": "IgcGridTemplateContext.implicit" + }, + "68366": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "qualifiedName": "IgcGridTemplateContext.implicit" + }, + "68367": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-template-context.d.ts", + "qualifiedName": "value" + }, + "68368": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "qualifiedName": "IgcDataCloneStrategy" + }, + "68371": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "qualifiedName": "IgcDataCloneStrategy.clone" + }, + "68372": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "qualifiedName": "IgcDataCloneStrategy.clone" + }, + "68373": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-data-clone-strategy.d.ts", + "qualifiedName": "data" + }, + "68374": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions" + }, + "68377": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.enabled" + }, + "68378": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.enabled" + }, + "68379": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.enabled" + }, + "68380": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "value" + }, + "68381": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.copyHeaders" + }, + "68382": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.copyHeaders" + }, + "68383": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.copyHeaders" + }, + "68384": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "value" + }, + "68385": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.copyFormatters" + }, + "68386": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.copyFormatters" + }, + "68387": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.copyFormatters" + }, + "68388": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "value" + }, + "68389": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.separator" + }, + "68390": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.separator" + }, + "68391": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "IgcClipboardOptions.separator" + }, + "68392": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-clipboard-options.d.ts", + "qualifiedName": "value" + }, + "68393": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "qualifiedName": "IgcGridScrollEventArgs" + }, + "68396": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "qualifiedName": "IgcGridScrollEventArgs.direction" + }, + "68397": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "qualifiedName": "IgcGridScrollEventArgs.event" + }, + "68398": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-scroll-event-args.d.ts", + "qualifiedName": "IgcGridScrollEventArgs.scrollPosition" + }, + "68399": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68400": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-cell-event-args.d.ts", + "qualifiedName": "IgcGridCellEventArgs" + }, + "68403": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-cell-event-args.d.ts", + "qualifiedName": "IgcGridCellEventArgs.cell" + }, + "68404": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-cell-event-args.d.ts", + "qualifiedName": "IgcGridCellEventArgs.event" + }, + "68405": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68406": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-event-args.d.ts", + "qualifiedName": "IgcGridRowEventArgs" + }, + "68409": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-event-args.d.ts", + "qualifiedName": "IgcGridRowEventArgs.row" + }, + "68410": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-event-args.d.ts", + "qualifiedName": "IgcGridRowEventArgs.event" + }, + "68411": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68412": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-form-group-created-event-args.d.ts", + "qualifiedName": "IgcGridFormGroupCreatedEventArgs" + }, + "68415": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-form-group-created-event-args.d.ts", + "qualifiedName": "IgcGridFormGroupCreatedEventArgs.owner" + }, + "68416": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-status-event-args.d.ts", + "qualifiedName": "IgcGridValidationStatusEventArgs" + }, + "68419": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-status-event-args.d.ts", + "qualifiedName": "IgcGridValidationStatusEventArgs.status" + }, + "68420": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-status-event-args.d.ts", + "qualifiedName": "IgcGridValidationStatusEventArgs.owner" + }, + "68421": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs" + }, + "68424": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.oldSelection" + }, + "68425": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.newSelection" + }, + "68426": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.added" + }, + "68427": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.removed" + }, + "68428": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.allRowsSelected" + }, + "68429": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.cancel" + }, + "68430": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selection-event-args.d.ts", + "qualifiedName": "IgcRowSelectionEventArgs.owner" + }, + "68431": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs" + }, + "68434": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs.oldSelection" + }, + "68435": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs.newSelection" + }, + "68436": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs.added" + }, + "68437": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs.removed" + }, + "68438": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs.cancel" + }, + "68439": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-selection-event-args.d.ts", + "qualifiedName": "IgcColumnSelectionEventArgs.owner" + }, + "68440": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "qualifiedName": "IgcPinColumnCancellableEventArgs" + }, + "68443": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "qualifiedName": "IgcPinColumnCancellableEventArgs.column" + }, + "68444": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "qualifiedName": "IgcPinColumnCancellableEventArgs.insertAtIndex" + }, + "68445": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "qualifiedName": "IgcPinColumnCancellableEventArgs.isPinned" + }, + "68446": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-cancellable-event-args.d.ts", + "qualifiedName": "IgcPinColumnCancellableEventArgs.cancel" + }, + "68447": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "qualifiedName": "IgcPinColumnEventArgs" + }, + "68450": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "qualifiedName": "IgcPinColumnEventArgs.column" + }, + "68451": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "qualifiedName": "IgcPinColumnEventArgs.insertAtIndex" + }, + "68452": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-column-event-args.d.ts", + "qualifiedName": "IgcPinColumnEventArgs.isPinned" + }, + "68453": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68454": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs" + }, + "68457": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.cancel" + }, + "68458": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.rowID" + }, + "68459": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.primaryKey" + }, + "68460": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.rowKey" + }, + "68461": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.cellID" + }, + "68462": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "__type" + }, + "68463": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "__type.rowID" + }, + "68464": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "__type.columnID" + }, + "68465": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "__type.rowIndex" + }, + "68466": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.rowData" + }, + "68467": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.oldValue" + }, + "68468": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.newValue" + }, + "68469": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.column" + }, + "68470": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.owner" + }, + "68471": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.isAddRow" + }, + "68472": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-event-args.d.ts", + "qualifiedName": "IgcGridEditEventArgs.valid" + }, + "68473": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs" + }, + "68476": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.rowID" + }, + "68477": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.primaryKey" + }, + "68478": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.rowKey" + }, + "68479": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.cellID" + }, + "68480": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "__type" + }, + "68481": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "__type.rowID" + }, + "68482": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "__type.columnID" + }, + "68483": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "__type.rowIndex" + }, + "68484": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.rowData" + }, + "68485": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.oldValue" + }, + "68486": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.newValue" + }, + "68487": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.column" + }, + "68488": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.owner" + }, + "68489": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.isAddRow" + }, + "68490": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-edit-done-event-args.d.ts", + "qualifiedName": "IgcGridEditDoneEventArgs.valid" + }, + "68496": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "qualifiedName": "IgcSortingEventArgs" + }, + "68499": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "qualifiedName": "IgcSortingEventArgs.sortingExpressions" + }, + "68500": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "qualifiedName": "IgcSortingEventArgs.groupingExpressions" + }, + "68501": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "qualifiedName": "IgcSortingEventArgs.owner" + }, + "68502": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-event-args.d.ts", + "qualifiedName": "IgcSortingEventArgs.cancel" + }, + "68503": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "qualifiedName": "IgcFilteringEventArgs" + }, + "68506": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "qualifiedName": "IgcFilteringEventArgs.filteringExpressions" + }, + "68507": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "qualifiedName": "IgcFilteringEventArgs.owner" + }, + "68508": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-event-args.d.ts", + "qualifiedName": "IgcFilteringEventArgs.cancel" + }, + "68509": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "qualifiedName": "IgcRowDataEventArgs" + }, + "68512": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "qualifiedName": "IgcRowDataEventArgs.data" + }, + "68513": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "qualifiedName": "IgcRowDataEventArgs.rowData" + }, + "68514": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "qualifiedName": "IgcRowDataEventArgs.primaryKey" + }, + "68515": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-event-args.d.ts", + "qualifiedName": "IgcRowDataEventArgs.rowKey" + }, + "68516": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68517": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs" + }, + "68520": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.cellID" + }, + "68521": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "__type" + }, + "68522": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "__type.rowID" + }, + "68523": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "__type.columnID" + }, + "68524": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "__type.rowIndex" + }, + "68525": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.oldValue" + }, + "68526": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.newValue" + }, + "68527": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.isAddRow" + }, + "68528": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.owner" + }, + "68529": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.data" + }, + "68530": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.rowData" + }, + "68531": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.primaryKey" + }, + "68532": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-data-cancelable-event-args.d.ts", + "qualifiedName": "IgcRowDataCancelableEventArgs.rowKey" + }, + "68533": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "qualifiedName": "IgcColumnResizeEventArgs" + }, + "68536": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "qualifiedName": "IgcColumnResizeEventArgs.column" + }, + "68537": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "qualifiedName": "IgcColumnResizeEventArgs.prevWidth" + }, + "68538": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-resize-event-args.d.ts", + "qualifiedName": "IgcColumnResizeEventArgs.newWidth" + }, + "68539": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68540": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "qualifiedName": "IgcGridContextMenuEventArgs" + }, + "68543": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "qualifiedName": "IgcGridContextMenuEventArgs.cell" + }, + "68544": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "qualifiedName": "IgcGridContextMenuEventArgs.event" + }, + "68545": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-context-menu-event-args.d.ts", + "qualifiedName": "IgcGridContextMenuEventArgs.row" + }, + "68546": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangingEventArgs" + }, + "68549": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangingEventArgs.column" + }, + "68550": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangingEventArgs.newValue" + }, + "68551": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changing-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangingEventArgs.cancel" + }, + "68552": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changed-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangedEventArgs" + }, + "68555": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changed-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangedEventArgs.column" + }, + "68556": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-visibility-changed-event-args.d.ts", + "qualifiedName": "IgcColumnVisibilityChangedEventArgs.newValue" + }, + "68557": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68558": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-start-event-args.d.ts", + "qualifiedName": "IgcColumnMovingStartEventArgs" + }, + "68561": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-start-event-args.d.ts", + "qualifiedName": "IgcColumnMovingStartEventArgs.source" + }, + "68562": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68563": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEventArgs" + }, + "68566": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEventArgs.source" + }, + "68567": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEventArgs.cancel" + }, + "68568": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68569": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEndEventArgs" + }, + "68572": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEndEventArgs.source" + }, + "68573": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEndEventArgs.target" + }, + "68574": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-moving-end-event-args.d.ts", + "qualifiedName": "IgcColumnMovingEndEventArgs.cancel" + }, + "68575": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68576": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "qualifiedName": "IgcGridKeydownEventArgs" + }, + "68579": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "qualifiedName": "IgcGridKeydownEventArgs.targetType" + }, + "68580": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "qualifiedName": "IgcGridKeydownEventArgs.target" + }, + "68581": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "qualifiedName": "IgcGridKeydownEventArgs.event" + }, + "68582": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-keydown-event-args.d.ts", + "qualifiedName": "IgcGridKeydownEventArgs.cancel" + }, + "68583": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68584": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "qualifiedName": "IgcRowDragStartEventArgs" + }, + "68587": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "qualifiedName": "IgcRowDragStartEventArgs.dragDirective" + }, + "68588": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "qualifiedName": "IgcRowDragStartEventArgs.dragData" + }, + "68589": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "qualifiedName": "IgcRowDragStartEventArgs.cancel" + }, + "68590": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-start-event-args.d.ts", + "qualifiedName": "IgcRowDragStartEventArgs.owner" + }, + "68591": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "qualifiedName": "IgcRowDragEndEventArgs" + }, + "68594": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "qualifiedName": "IgcRowDragEndEventArgs.dragDirective" + }, + "68595": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "qualifiedName": "IgcRowDragEndEventArgs.dragData" + }, + "68596": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-drag-end-event-args.d.ts", + "qualifiedName": "IgcRowDragEndEventArgs.animation" + }, + "68597": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68598": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent" + }, + "68601": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent.data" + }, + "68602": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent.data" + }, + "68603": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent.data" + }, + "68604": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "value" + }, + "68605": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent.cancel" + }, + "68606": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent.cancel" + }, + "68607": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "IgcGridClipboardEvent.cancel" + }, + "68608": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-clipboard-event.d.ts", + "qualifiedName": "value" + }, + "68609": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "qualifiedName": "IgcRowToggleEventArgs" + }, + "68612": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "qualifiedName": "IgcRowToggleEventArgs.rowID" + }, + "68613": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "qualifiedName": "IgcRowToggleEventArgs.rowKey" + }, + "68614": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "qualifiedName": "IgcRowToggleEventArgs.expanded" + }, + "68615": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-toggle-event-args.d.ts", + "qualifiedName": "IgcRowToggleEventArgs.cancel" + }, + "68616": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68617": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs" + }, + "68620": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.rowID" + }, + "68621": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.rowKey" + }, + "68622": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.row" + }, + "68623": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.insertAtIndex" + }, + "68624": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.isPinned" + }, + "68625": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.owner" + }, + "68626": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pin-row-event-args.d.ts", + "qualifiedName": "IgcPinRowEventArgs.cancel" + }, + "68627": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "qualifiedName": "IgcActiveNodeChangeEventArgs" + }, + "68630": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "qualifiedName": "IgcActiveNodeChangeEventArgs.row" + }, + "68631": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "qualifiedName": "IgcActiveNodeChangeEventArgs.column" + }, + "68632": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "qualifiedName": "IgcActiveNodeChangeEventArgs.level" + }, + "68633": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-active-node-change-event-args.d.ts", + "qualifiedName": "IgcActiveNodeChangeEventArgs.tag" + }, + "68634": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68635": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "qualifiedName": "IgcGridToolbarExportEventArgs" + }, + "68638": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "qualifiedName": "IgcGridToolbarExportEventArgs.grid" + }, + "68639": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "qualifiedName": "IgcGridToolbarExportEventArgs.exporter" + }, + "68640": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "qualifiedName": "IgcGridToolbarExportEventArgs.options" + }, + "68641": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-export-event-args.d.ts", + "qualifiedName": "IgcGridToolbarExportEventArgs.cancel" + }, + "68642": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68643": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-change-event-args.d.ts", + "qualifiedName": "IgcForOfDataChangeEventArgs" + }, + "68646": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "qualifiedName": "IgcForOfDataChangingEventArgs.containerSize" + }, + "68647": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "qualifiedName": "IgcForOfDataChangingEventArgs.state" + }, + "68648": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "68652": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext" + }, + "68655": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.implicit" + }, + "68656": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.implicit" + }, + "68657": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.implicit" + }, + "68658": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "value" + }, + "68659": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.data" + }, + "68660": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.data" + }, + "68661": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.data" + }, + "68662": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "value" + }, + "68663": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.grid" + }, + "68664": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.grid" + }, + "68665": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "IgcGridRowDragGhostContext.grid" + }, + "68666": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-drag-ghost-context.d.ts", + "qualifiedName": "value" + }, + "68667": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "qualifiedName": "IgcGridRowEditTextTemplateContext" + }, + "68670": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "qualifiedName": "IgcGridRowEditTextTemplateContext.implicit" + }, + "68671": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "qualifiedName": "IgcGridRowEditTextTemplateContext.implicit" + }, + "68672": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "qualifiedName": "IgcGridRowEditTextTemplateContext.implicit" + }, + "68673": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-text-template-context.d.ts", + "qualifiedName": "value" + }, + "68674": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-empty-template-context.d.ts", + "qualifiedName": "IgcGridEmptyTemplateContext" + }, + "68677": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "qualifiedName": "IgcGridRowEditActionsTemplateContext" + }, + "68680": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "qualifiedName": "IgcGridRowEditActionsTemplateContext.implicit" + }, + "68681": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "qualifiedName": "IgcGridRowEditActionsTemplateContext.implicit" + }, + "68682": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "qualifiedName": "IgcGridRowEditActionsTemplateContext.implicit" + }, + "68683": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-edit-actions-template-context.d.ts", + "qualifiedName": "value" + }, + "68684": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "qualifiedName": "IgcGridRowTemplateContext" + }, + "68687": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "qualifiedName": "IgcGridRowTemplateContext.implicit" + }, + "68688": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "qualifiedName": "IgcGridRowTemplateContext.implicit" + }, + "68689": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "qualifiedName": "IgcGridRowTemplateContext.implicit" + }, + "68690": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-template-context.d.ts", + "qualifiedName": "value" + }, + "68691": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "qualifiedName": "IgcGridHeaderTemplateContext" + }, + "68694": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "qualifiedName": "IgcGridHeaderTemplateContext.implicit" + }, + "68695": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "qualifiedName": "IgcGridHeaderTemplateContext.implicit" + }, + "68696": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "qualifiedName": "IgcGridHeaderTemplateContext.implicit" + }, + "68697": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-header-template-context.d.ts", + "qualifiedName": "value" + }, + "68698": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "IgcFilteringStrategy" + }, + "68701": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "IgcFilteringStrategy.filter" + }, + "68702": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "IgcFilteringStrategy.filter" + }, + "68703": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "data" + }, + "68704": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "expressionsTree" + }, + "68705": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "advancedExpressionsTree" + }, + "68706": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "grid" + }, + "68707": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "IgcFilteringStrategy.getFilterItems" + }, + "68708": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "IgcFilteringStrategy.getFilterItems" + }, + "68709": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "column" + }, + "68710": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-filtering-strategy.d.ts", + "qualifiedName": "tree" + }, + "68711": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "IgcGridSortingStrategy" + }, + "68714": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "IgcGridSortingStrategy.sort" + }, + "68715": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "IgcGridSortingStrategy.sort" + }, + "68716": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "data" + }, + "68717": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "expressions" + }, + "68718": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-sorting-strategy.d.ts", + "qualifiedName": "grid" + }, + "68719": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "IgcGridMergeStrategy" + }, + "68722": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "IgcGridMergeStrategy.merge" + }, + "68723": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "IgcGridMergeStrategy.merge" + }, + "68724": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "data" + }, + "68725": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "68726": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "comparer" + }, + "68727": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "result" + }, + "68728": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "activeRowIndexes" + }, + "68729": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "isDate" + }, + "68730": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "isTime" + }, + "68731": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "grid" + }, + "68732": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "IgcGridMergeStrategy.comparer" + }, + "68733": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "IgcGridMergeStrategy.comparer" + }, + "68734": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "prevRecord" + }, + "68735": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "record" + }, + "68736": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-merge-strategy.d.ts", + "qualifiedName": "field" + }, + "68737": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "qualifiedName": "IgcSortingOptions" + }, + "68740": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "qualifiedName": "IgcSortingOptions.mode" + }, + "68741": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "qualifiedName": "IgcSortingOptions.mode" + }, + "68742": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "qualifiedName": "IgcSortingOptions.mode" + }, + "68743": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-sorting-options.d.ts", + "qualifiedName": "value" + }, + "68744": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective" + }, + "68747": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.data" + }, + "68748": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.data" + }, + "68749": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.data" + }, + "68750": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68751": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.index" + }, + "68752": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.index" + }, + "68753": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.index" + }, + "68754": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68755": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.disabled" + }, + "68756": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.disabled" + }, + "68757": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.disabled" + }, + "68758": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68759": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pinned" + }, + "68760": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pinned" + }, + "68761": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pinned" + }, + "68762": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68763": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.hasMergedCells" + }, + "68764": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.hasMergedCells" + }, + "68765": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.expanded" + }, + "68766": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.expanded" + }, + "68767": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.expanded" + }, + "68768": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68769": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.addRowUI" + }, + "68770": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.addRowUI" + }, + "68771": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.rowHeight" + }, + "68772": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.rowHeight" + }, + "68773": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.cells" + }, + "68774": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.cells" + }, + "68775": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.dataRowIndex" + }, + "68776": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.dataRowIndex" + }, + "68777": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.inEditMode" + }, + "68778": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.inEditMode" + }, + "68779": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.key" + }, + "68780": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.key" + }, + "68781": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.update" + }, + "68782": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.update" + }, + "68783": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68784": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.delete" + }, + "68785": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.delete" + }, + "68786": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.isCellActive" + }, + "68787": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.isCellActive" + }, + "68788": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "visibleColumnIndex" + }, + "68789": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pin" + }, + "68790": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pin" + }, + "68791": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.unpin" + }, + "68792": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.unpin" + }, + "68793": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.beginAddRow" + }, + "68794": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.beginAddRow" + }, + "68795": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateContext" + }, + "68798": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateContext.implicit" + }, + "68799": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateContext.implicit" + }, + "68800": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateContext.implicit" + }, + "68801": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-context.d.ts", + "qualifiedName": "value" + }, + "68802": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "qualifiedName": "IgcRowSelectorTemplateContext" + }, + "68805": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "qualifiedName": "IgcRowSelectorTemplateContext.implicit" + }, + "68806": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "qualifiedName": "IgcRowSelectorTemplateContext.implicit" + }, + "68807": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "qualifiedName": "IgcRowSelectorTemplateContext.implicit" + }, + "68808": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-context.d.ts", + "qualifiedName": "value" + }, + "68809": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo" + }, + "68812": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo.matchInfoCache" + }, + "68813": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo.matchInfoCache" + }, + "68814": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo.matchInfoCache" + }, + "68815": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "value" + }, + "68816": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo.activeMatchIndex" + }, + "68817": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo.activeMatchIndex" + }, + "68818": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "IgcSearchInfo.activeMatchIndex" + }, + "68819": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-search-info.d.ts", + "qualifiedName": "value" + }, + "68820": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.searchText" + }, + "68821": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.searchText" + }, + "68822": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.searchText" + }, + "68823": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "68824": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.caseSensitive" + }, + "68825": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.caseSensitive" + }, + "68826": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.caseSensitive" + }, + "68827": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "68828": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.exactMatch" + }, + "68829": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.exactMatch" + }, + "68830": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.exactMatch" + }, + "68831": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "68832": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.matchCount" + }, + "68833": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.matchCount" + }, + "68834": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.matchCount" + }, + "68835": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "68836": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.content" + }, + "68837": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.content" + }, + "68838": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.content" + }, + "68839": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "68840": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-overlay-outlet-directive.d.ts", + "qualifiedName": "IgcOverlayOutletDirective" + }, + "68843": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "IgcGridRowComponent" + }, + "68846": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "IgcGridRowComponent.getContext" + }, + "68847": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "IgcGridRowComponent.getContext" + }, + "68848": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "col" + }, + "68849": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "row" + }, + "68850": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "IgcGridRowComponent.getContextMRL" + }, + "68851": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "IgcGridRowComponent.getContextMRL" + }, + "68852": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "pinnedCols" + }, + "68853": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-row-component.d.ts", + "qualifiedName": "row" + }, + "68854": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.data" + }, + "68855": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.data" + }, + "68856": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.data" + }, + "68857": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68858": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.index" + }, + "68859": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.index" + }, + "68860": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.index" + }, + "68861": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68862": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.disabled" + }, + "68863": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.disabled" + }, + "68864": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.disabled" + }, + "68865": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68866": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pinned" + }, + "68867": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pinned" + }, + "68868": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pinned" + }, + "68869": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68870": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.hasMergedCells" + }, + "68871": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.hasMergedCells" + }, + "68872": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.expanded" + }, + "68873": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.expanded" + }, + "68874": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.expanded" + }, + "68875": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68876": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.addRowUI" + }, + "68877": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.addRowUI" + }, + "68878": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.rowHeight" + }, + "68879": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.rowHeight" + }, + "68880": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.cells" + }, + "68881": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.cells" + }, + "68882": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.dataRowIndex" + }, + "68883": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.dataRowIndex" + }, + "68884": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.inEditMode" + }, + "68885": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.inEditMode" + }, + "68886": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.key" + }, + "68887": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.key" + }, + "68888": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.update" + }, + "68889": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.update" + }, + "68890": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "value" + }, + "68891": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.delete" + }, + "68892": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.delete" + }, + "68893": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.isCellActive" + }, + "68894": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.isCellActive" + }, + "68895": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "visibleColumnIndex" + }, + "68896": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pin" + }, + "68897": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.pin" + }, + "68898": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.unpin" + }, + "68899": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.unpin" + }, + "68900": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.beginAddRow" + }, + "68901": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-directive.d.ts", + "qualifiedName": "IgcRowDirective.beginAddRow" + }, + "68902": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition" + }, + "68905": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition.rowIndex" + }, + "68906": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition.rowIndex" + }, + "68907": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition.rowIndex" + }, + "68908": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "value" + }, + "68909": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition.visibleColumnIndex" + }, + "68910": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition.visibleColumnIndex" + }, + "68911": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "IgcCellPosition.visibleColumnIndex" + }, + "68912": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cell-position.d.ts", + "qualifiedName": "value" + }, + "68913": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey" + }, + "68916": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey.fieldName" + }, + "68917": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey.fieldName" + }, + "68918": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey.fieldName" + }, + "68919": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "value" + }, + "68920": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey.value" + }, + "68921": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey.value" + }, + "68922": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "IgcGroupByKey.value" + }, + "68923": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-key.d.ts", + "qualifiedName": "value" + }, + "68924": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails" + }, + "68927": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.selectedCount" + }, + "68928": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.selectedCount" + }, + "68929": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.selectedCount" + }, + "68930": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "68931": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.totalCount" + }, + "68932": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.totalCount" + }, + "68933": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.totalCount" + }, + "68934": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "68935": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.groupRow" + }, + "68936": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.groupRow" + }, + "68937": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "IgcGroupByRowSelectorTemplateDetails.groupRow" + }, + "68938": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-group-by-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "68939": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "qualifiedName": "IgcGridValidationState" + }, + "68942": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "qualifiedName": "IgcGridValidationState.status" + }, + "68943": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "qualifiedName": "IgcGridValidationState.status" + }, + "68944": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "qualifiedName": "IgcGridValidationState.status" + }, + "68945": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "qualifiedName": "value" + }, + "68946": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-validation-state.d.ts", + "qualifiedName": "IgcGridValidationState.errors" + }, + "68947": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "qualifiedName": "IgcGridToolbarTemplateContext" + }, + "68950": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "qualifiedName": "IgcGridToolbarTemplateContext.implicit" + }, + "68951": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "qualifiedName": "IgcGridToolbarTemplateContext.implicit" + }, + "68952": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "qualifiedName": "IgcGridToolbarTemplateContext.implicit" + }, + "68953": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-toolbar-template-context.d.ts", + "qualifiedName": "value" + }, + "68954": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "qualifiedName": "IgcGridPaginatorTemplateContext" + }, + "68957": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "qualifiedName": "IgcGridPaginatorTemplateContext.implicit" + }, + "68958": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "qualifiedName": "IgcGridPaginatorTemplateContext.implicit" + }, + "68959": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "qualifiedName": "IgcGridPaginatorTemplateContext.implicit" + }, + "68960": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-paginator-template-context.d.ts", + "qualifiedName": "value" + }, + "68961": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "qualifiedName": "IgcGridCreatedEventArgs" + }, + "68964": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "qualifiedName": "IgcGridCreatedEventArgs.owner" + }, + "68965": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "qualifiedName": "IgcGridCreatedEventArgs.parentID" + }, + "68966": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "qualifiedName": "IgcGridCreatedEventArgs.grid" + }, + "68967": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-grid-created-event-args.d.ts", + "qualifiedName": "IgcGridCreatedEventArgs.parentRowData" + }, + "68968": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "IgcPivotDimensionStrategy" + }, + "68971": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "IgcPivotDimensionStrategy.process" + }, + "68972": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "IgcPivotDimensionStrategy.process" + }, + "68973": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "collection" + }, + "68974": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "dimensions" + }, + "68975": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "values" + }, + "68976": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "cloneStrategy" + }, + "68977": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-dimension-strategy.d.ts", + "qualifiedName": "pivotKeys" + }, + "68978": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys" + }, + "68981": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.children" + }, + "68982": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.children" + }, + "68983": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.children" + }, + "68984": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "value" + }, + "68985": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.records" + }, + "68986": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.records" + }, + "68987": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.records" + }, + "68988": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "value" + }, + "68989": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.aggregations" + }, + "68990": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.aggregations" + }, + "68991": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.aggregations" + }, + "68992": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "value" + }, + "68993": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.level" + }, + "68994": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.level" + }, + "68995": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.level" + }, + "68996": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "value" + }, + "68997": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.columnDimensionSeparator" + }, + "68998": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.columnDimensionSeparator" + }, + "68999": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.columnDimensionSeparator" + }, + "69000": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "value" + }, + "69001": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.rowDimensionSeparator" + }, + "69002": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.rowDimensionSeparator" + }, + "69003": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "IgcPivotKeys.rowDimensionSeparator" + }, + "69004": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-pivot-keys.d.ts", + "qualifiedName": "value" + }, + "69005": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "IgcPositionStrategy" + }, + "69008": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "IgcPositionStrategy.settings" + }, + "69009": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "IgcPositionStrategy.settings" + }, + "69010": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "IgcPositionStrategy.settings" + }, + "69011": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "value" + }, + "69012": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "IgcPositionStrategy.clone" + }, + "69013": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-strategy.d.ts", + "qualifiedName": "IgcPositionStrategy.clone" + }, + "69014": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "qualifiedName": "IgcScrollStrategy" + }, + "69017": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "qualifiedName": "IgcScrollStrategy.attach" + }, + "69018": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "qualifiedName": "IgcScrollStrategy.attach" + }, + "69019": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "qualifiedName": "IgcScrollStrategy.detach" + }, + "69020": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-scroll-strategy.d.ts", + "qualifiedName": "IgcScrollStrategy.detach" + }, + "69021": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "IgcBaseExporter" + }, + "69022": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "__type" + }, + "69023": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "IgcBaseExporter" + }, + "69024": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "args" + }, + "69025": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "IgcBaseExporter.export" + }, + "69026": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "IgcBaseExporter.export" + }, + "69027": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "grid" + }, + "69028": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "options" + }, + "69029": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "IgcBaseExporter.exportData" + }, + "69030": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "IgcBaseExporter.exportData" + }, + "69031": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "data" + }, + "69032": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-exporter.d.ts", + "qualifiedName": "options" + }, + "70018": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options.d.ts", + "qualifiedName": "IgcExporterOptions" + }, + "70021": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-browser-event-args.d.ts", + "qualifiedName": "IgcCancelableBrowserEventArgs" + }, + "70024": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "qualifiedName": "IgcCancelableEventArgs.cancel" + }, + "70025": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs" + }, + "70028": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.format" + }, + "70029": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.timezone" + }, + "70030": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.digitsInfo" + }, + "70031": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.currencyCode" + }, + "70032": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.display" + }, + "70033": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-pipe-args.d.ts", + "qualifiedName": "IgcFieldPipeArgs.weekStart" + }, + "70034": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-editor-options.d.ts", + "qualifiedName": "IgcFieldEditorOptions" + }, + "70037": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-field-editor-options.d.ts", + "qualifiedName": "IgcFieldEditorOptions.dateTimeFormat" + }, + "70038": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "qualifiedName": "IgcCancelableEventArgs" + }, + "70041": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "qualifiedName": "IgcCancelableEventArgs.cancel" + }, + "70042": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase" + }, + "70043": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.__constructor" + }, + "70044": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase" + }, + "70045": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "fileName" + }, + "70046": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "_fileExtension" + }, + "70047": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreColumnsVisibility" + }, + "70048": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreColumnsVisibility" + }, + "70049": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreColumnsVisibility" + }, + "70050": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70051": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreFiltering" + }, + "70052": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreFiltering" + }, + "70053": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreFiltering" + }, + "70054": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70055": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreColumnsOrder" + }, + "70056": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreColumnsOrder" + }, + "70057": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreColumnsOrder" + }, + "70058": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70059": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreSorting" + }, + "70060": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreSorting" + }, + "70061": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreSorting" + }, + "70062": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70063": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreGrouping" + }, + "70064": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreGrouping" + }, + "70065": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreGrouping" + }, + "70066": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70067": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreMultiColumnHeaders" + }, + "70068": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreMultiColumnHeaders" + }, + "70069": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.ignoreMultiColumnHeaders" + }, + "70070": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70071": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.exportSummaries" + }, + "70072": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.exportSummaries" + }, + "70073": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.exportSummaries" + }, + "70074": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70075": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.freezeHeaders" + }, + "70076": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.freezeHeaders" + }, + "70077": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.freezeHeaders" + }, + "70078": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70079": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.alwaysExportHeaders" + }, + "70080": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.alwaysExportHeaders" + }, + "70081": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.alwaysExportHeaders" + }, + "70082": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70083": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.fileName" + }, + "70084": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.fileName" + }, + "70085": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "IgcExporterOptionsBase.fileName" + }, + "70086": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-exporter-options-base.d.ts", + "qualifiedName": "value" + }, + "70087": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "qualifiedName": "IgcForOfDataChangingEventArgs" + }, + "70090": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "qualifiedName": "IgcForOfDataChangingEventArgs.containerSize" + }, + "70091": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-for-of-data-changing-event-args.d.ts", + "qualifiedName": "IgcForOfDataChangingEventArgs.state" + }, + "70092": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "70093": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType" + }, + "70096": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.column" + }, + "70097": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.column" + }, + "70098": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.column" + }, + "70099": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "value" + }, + "70100": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.sorted" + }, + "70101": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.sorted" + }, + "70102": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.sorted" + }, + "70103": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "value" + }, + "70104": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.selectable" + }, + "70105": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.selectable" + }, + "70106": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.selectable" + }, + "70107": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "value" + }, + "70108": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.selected" + }, + "70109": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.selected" + }, + "70110": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.selected" + }, + "70111": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "value" + }, + "70112": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.title" + }, + "70113": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.title" + }, + "70114": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.title" + }, + "70115": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "value" + }, + "70116": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.sortDirection" + }, + "70117": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.sortDirection" + }, + "70118": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "IgcHeaderType.sortDirection" + }, + "70119": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-header-type.d.ts", + "qualifiedName": "value" + }, + "70120": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-cancellable-event-args.d.ts", + "qualifiedName": "IgcPageCancellableEventArgs" + }, + "70123": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-cancellable-event-args.d.ts", + "qualifiedName": "IgcPageCancellableEventArgs.current" + }, + "70124": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-cancellable-event-args.d.ts", + "qualifiedName": "IgcPageCancellableEventArgs.next" + }, + "70125": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-cancelable-event-args.d.ts", + "qualifiedName": "IgcCancelableEventArgs.cancel" + }, + "70126": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-event-args.d.ts", + "qualifiedName": "IgcPageEventArgs" + }, + "70129": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-event-args.d.ts", + "qualifiedName": "IgcPageEventArgs.previous" + }, + "70130": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-page-event-args.d.ts", + "qualifiedName": "IgcPageEventArgs.current" + }, + "70131": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "70132": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings" + }, + "70135": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings.igx_paginator_label" + }, + "70136": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings.igx_paginator_pager_text" + }, + "70137": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings.igx_paginator_first_page_button_text" + }, + "70138": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings.igx_paginator_previous_page_button_text" + }, + "70139": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings.igx_paginator_last_page_button_text" + }, + "70140": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-paginator-resource-strings.d.ts", + "qualifiedName": "IgcPaginatorResourceStrings.igx_paginator_next_page_button_text" + }, + "70141": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails" + }, + "70144": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.selectedCount" + }, + "70145": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.selectedCount" + }, + "70146": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.selectedCount" + }, + "70147": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "70148": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.totalCount" + }, + "70149": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.totalCount" + }, + "70150": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.totalCount" + }, + "70151": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "70152": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.selectAll" + }, + "70153": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.selectAll" + }, + "70154": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.deselectAll" + }, + "70155": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-head-selector-template-details.d.ts", + "qualifiedName": "IgcHeadSelectorTemplateDetails.deselectAll" + }, + "70156": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails" + }, + "70159": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.index" + }, + "70160": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.index" + }, + "70161": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.index" + }, + "70162": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "70163": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.rowID" + }, + "70164": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.rowID" + }, + "70165": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.rowID" + }, + "70166": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "70167": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.key" + }, + "70168": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.key" + }, + "70169": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.key" + }, + "70170": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "70171": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.selected" + }, + "70172": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.selected" + }, + "70173": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.selected" + }, + "70174": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "value" + }, + "70175": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.select" + }, + "70176": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.select" + }, + "70177": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.deselect" + }, + "70178": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-selector-template-details.d.ts", + "qualifiedName": "IgcRowSelectorTemplateDetails.deselect" + }, + "70179": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo" + }, + "70182": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.searchText" + }, + "70183": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.searchText" + }, + "70184": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.searchText" + }, + "70185": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "70186": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.caseSensitive" + }, + "70187": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.caseSensitive" + }, + "70188": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.caseSensitive" + }, + "70189": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "70190": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.exactMatch" + }, + "70191": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.exactMatch" + }, + "70192": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.exactMatch" + }, + "70193": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "70194": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.matchCount" + }, + "70195": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.matchCount" + }, + "70196": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.matchCount" + }, + "70197": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "70198": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.content" + }, + "70199": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.content" + }, + "70200": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "IgcBaseSearchInfo.content" + }, + "70201": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-search-info.d.ts", + "qualifiedName": "value" + }, + "70202": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-validation-errors.d.ts", + "qualifiedName": "IgcValidationErrors" + }, + "70205": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings" + }, + "70208": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings.horizontalDirection" + }, + "70209": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings.verticalDirection" + }, + "70210": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings.horizontalStartPoint" + }, + "70211": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings.verticalStartPoint" + }, + "70212": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings.minSize" + }, + "70213": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-position-settings.d.ts", + "qualifiedName": "IgcPositionSettings.offset" + }, + "70214": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "qualifiedName": "IgcRowExportingEventArgs" + }, + "70217": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "qualifiedName": "IgcRowExportingEventArgs.rowData" + }, + "70218": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "qualifiedName": "IgcRowExportingEventArgs.rowIndex" + }, + "70219": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-row-exporting-event-args.d.ts", + "qualifiedName": "IgcRowExportingEventArgs.cancel" + }, + "70220": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "70221": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs" + }, + "70224": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs.header" + }, + "70225": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs.field" + }, + "70226": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs.columnIndex" + }, + "70227": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs.cancel" + }, + "70228": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs.skipFormatter" + }, + "70229": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-column-exporting-event-args.d.ts", + "qualifiedName": "IgcColumnExportingEventArgs.grid" + }, + "70230": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-base-event-args.d.ts", + "qualifiedName": "IgcBaseEventArgs.owner" + }, + "70231": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize" + }, + "70234": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize.width" + }, + "70235": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize.width" + }, + "70236": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize.width" + }, + "70237": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "value" + }, + "70238": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize.height" + }, + "70239": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize.height" + }, + "70240": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "IgcSize.height" + }, + "70241": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/igc-size.d.ts", + "qualifiedName": "value" + }, + "70242": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-column-data-type.d.ts", + "qualifiedName": "GridColumnDataType" + }, + "70243": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "qualifiedName": "PivotDimensionType" + }, + "70244": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "qualifiedName": "PivotDimensionType.Row" + }, + "70245": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "qualifiedName": "PivotDimensionType.Column" + }, + "70246": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-dimension-type.d.ts", + "qualifiedName": "PivotDimensionType.Filter" + }, + "70247": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "qualifiedName": "SortingDirection" + }, + "70248": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "qualifiedName": "SortingDirection.None" + }, + "70249": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "qualifiedName": "SortingDirection.Asc" + }, + "70250": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-direction.d.ts", + "qualifiedName": "SortingDirection.Desc" + }, + "70251": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-toolbar-exporter-type.d.ts", + "qualifiedName": "GridToolbarExporterType" + }, + "70252": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-logic.d.ts", + "qualifiedName": "FilteringLogic" + }, + "70253": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-logic.d.ts", + "qualifiedName": "FilteringLogic.And" + }, + "70254": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-logic.d.ts", + "qualifiedName": "FilteringLogic.Or" + }, + "70255": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-expressions-tree-type.d.ts", + "qualifiedName": "FilteringExpressionsTreeType" + }, + "70256": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-expressions-tree-type.d.ts", + "qualifiedName": "FilteringExpressionsTreeType.Regular" + }, + "70257": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filtering-expressions-tree-type.d.ts", + "qualifiedName": "FilteringExpressionsTreeType.Advanced" + }, + "70258": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/column-pinning-position.d.ts", + "qualifiedName": "ColumnPinningPosition" + }, + "70259": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/column-pinning-position.d.ts", + "qualifiedName": "ColumnPinningPosition.Start" + }, + "70260": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/column-pinning-position.d.ts", + "qualifiedName": "ColumnPinningPosition.End" + }, + "70261": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-paging-mode.d.ts", + "qualifiedName": "GridPagingMode" + }, + "70262": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-validation-trigger.d.ts", + "qualifiedName": "GridValidationTrigger" + }, + "70263": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/filter-mode.d.ts", + "qualifiedName": "FilterMode" + }, + "70264": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-summary-position.d.ts", + "qualifiedName": "GridSummaryPosition" + }, + "70265": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-summary-calculation-mode.d.ts", + "qualifiedName": "GridSummaryCalculationMode" + }, + "70266": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-selection-mode.d.ts", + "qualifiedName": "GridSelectionMode" + }, + "70267": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-cell-merge-mode.d.ts", + "qualifiedName": "GridCellMergeMode" + }, + "70268": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/drop-position.d.ts", + "qualifiedName": "DropPosition" + }, + "70269": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/drop-position.d.ts", + "qualifiedName": "DropPosition.BeforeDropTarget" + }, + "70270": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/drop-position.d.ts", + "qualifiedName": "DropPosition.AfterDropTarget" + }, + "70271": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-row-layout-type.d.ts", + "qualifiedName": "PivotRowLayoutType" + }, + "70272": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-summary-position.d.ts", + "qualifiedName": "PivotSummaryPosition" + }, + "70273": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/row-pinning-position.d.ts", + "qualifiedName": "RowPinningPosition" + }, + "70274": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/row-pinning-position.d.ts", + "qualifiedName": "RowPinningPosition.Top" + }, + "70275": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/row-pinning-position.d.ts", + "qualifiedName": "RowPinningPosition.Bottom" + }, + "70276": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/pivot-aggregation-type.d.ts", + "qualifiedName": "PivotAggregationType" + }, + "70277": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/validation-status.d.ts", + "qualifiedName": "ValidationStatus" + }, + "70278": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/grid-keydown-target-type.d.ts", + "qualifiedName": "GridKeydownTargetType" + }, + "70279": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/sorting-options-mode.d.ts", + "qualifiedName": "SortingOptionsMode" + }, + "70280": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "qualifiedName": "HorizontalAlignment" + }, + "70281": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "qualifiedName": "HorizontalAlignment.Left" + }, + "70282": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "qualifiedName": "HorizontalAlignment.Center" + }, + "70283": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/horizontal-alignment.d.ts", + "qualifiedName": "HorizontalAlignment.Right" + }, + "70284": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "qualifiedName": "VerticalAlignment" + }, + "70285": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "qualifiedName": "VerticalAlignment.Top" + }, + "70286": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "qualifiedName": "VerticalAlignment.Middle" + }, + "70287": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/vertical-alignment.d.ts", + "qualifiedName": "VerticalAlignment.Bottom" + }, + "70288": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "Point" + }, + "70289": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "Point.__constructor" + }, + "70290": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "Point" + }, + "70291": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "x" + }, + "70292": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "y" + }, + "70293": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "Point.x" + }, + "70294": { + "sourceFileName": "node_modules/igniteui-webcomponents-grids/grids/lib/common.d.ts", + "qualifiedName": "Point.y" + }, + "192085": { + "sourceFileName": "node_modules/typescript/lib/lib.dom.d.ts", + "qualifiedName": "CustomEvent" + }, + "192086": { + "sourceFileName": "node_modules/typescript/lib/lib.dom.d.ts", + "qualifiedName": "CustomEvent.detail" + }, + "192123": { + "sourceFileName": "node_modules/typescript/lib/lib.dom.d.ts", + "qualifiedName": "CustomEvent.T" + } + }, + "files": { + "entries": { + "1": "src/components/index.ts", + "2": "src/dock-manager/index.ts", + "3": "src/grids/index.ts" + }, + "reflections": { + "1": 1, + "3": 194 + } + } +} diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/toc_based_processing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/toc_based_processing.md new file mode 100644 index 000000000..ba34fd782 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/toc_based_processing.md @@ -0,0 +1,127 @@ +# Plan: Use toc.yml as Source of Truth for Documentation Processing + +## Problem + +The current `export-angular-docs.ts` script collects **all `.md` files** from the `igniteui-docfx/en/components/` directory recursively. This includes files that are not part of the published documentation (e.g. `chart-legends.md` which is only TODO stubs). The `toc.yml` file is the definitive list of files that are actually built and published on the documentation website. + +Additionally, `toc.yml` contains valuable metadata per entry: +- **`name`** — the human-readable display name (e.g. "Excel Style Filtering", "Date Range Picker") +- **`premium: true`** — marks components that require a paid license +- **`new: true`** / **`updated: true`** — freshness indicators +- **`header: true`** — section headers (some have an `href` and should still be processed) +- **`items`** — nested child entries (hierarchical structure) + +This metadata is currently discarded. The `name` and `premium` status are especially useful for the MCP server's frontmatter and search. + +## Current Behavior + +``` +export-angular-docs.ts: + collectFiles(DOCFX_ARTICLES, ".md") → processes ALL .md files recursively +``` + +This results in: +- Stub/TODO files (like `chart-legends.md`) being processed and then hallucinated by the LLM compressor +- No `name` or `premium` metadata carried forward into the pipeline + +## Proposed Changes + +### 1. Parse `toc.yml` in `export-angular-docs.ts` + +Add a function to parse `toc.yml` and extract a flat list of entries with their metadata: + +```typescript +interface TocEntry { + name: string; // display name, e.g. "Excel Style Filtering" + href: string; // relative path, e.g. "grid/excel-style-filtering.md" + premium: boolean; // true if premium: true in toc +} + +function parseToc(tocPath: string): TocEntry[] +``` + +The parser should: +- Read the YAML file (use a simple line-by-line parser or add `js-yaml` as a dependency) +- Recursively traverse `items` arrays to flatten nested entries +- Skip entries without an `href` field (this naturally excludes `header: true` entries that are pure section dividers, while keeping headers that have an associated article) +- Skip commented-out entries (lines starting with `#`) +- Collect `name`, `href`, and `premium` (default `false`) for each entry + +### 2. Use toc entries as the file list instead of `collectFiles()` + +Replace: +```typescript +const allMdFiles = collectFiles(DOCFX_ARTICLES, ".md"); +``` + +With: +```typescript +const tocEntries = parseToc(join(DOCFX_ARTICLES, "toc.yml")); +``` + +Then iterate over `tocEntries` instead of raw file paths. Each entry's `href` resolves to the source `.md` file. The grid template expansion still applies — entries with hrefs like `treegrid/sorting.md` or `grid/filtering.md` will match expanded template outputs. + +### 3. Inject `name` and `premium` into the exported markdown + +Before writing each exported file, prepend metadata as a YAML frontmatter comment or augment the existing frontmatter. The simplest approach: add lines to the existing docfx frontmatter block: + +```yaml +--- +title: ... +_description: ... +_tocName: Excel Style Filtering +_premium: true +--- +``` + +These fields will flow through the inject step untouched and be available to the compress step's LLM, which can use them to: +- Set the frontmatter `component` field more accurately +- Add `premium: true` to the output frontmatter for the MCP server to filter on + +### 4. Update the compress prompt to handle `_tocName` and `_premium` + +Add to the system prompt's frontmatter rules: + +``` +- **premium**: If the input frontmatter contains `_premium: true`, include `premium: true` in your output frontmatter. Otherwise omit it. +- Use the `_tocName` from the input frontmatter as a hint for the component display name. +``` + +### 5. Output directory flattening + +Currently the compress step flattens subdirectory structure (e.g. `charts/features/chart-data-legend.md` → `chart-data-legend.md`). With toc-based file selection, the pipeline should preserve the relative path from toc as the canonical identifier instead of just the filename. This avoids potential name collisions (unlikely but possible) and keeps the relationship to the toc clear. + +## Files to Change + +| File | Change | +|---|---| +| `scripts/export-angular-docs.ts` | Add `parseToc()`, replace `collectFiles()` with toc-based iteration, inject `_tocName`/`_premium` into frontmatter | +| `scripts/compress-angular-docs.ts` | Update system prompt to preserve `premium` field from input frontmatter | + +## Dependencies + +The toc.yml is standard YAML. Options: +- **Option A (recommended):** Add `js-yaml` or `yaml` npm package for robust parsing +- **Option B:** Write a simple line-based parser (toc.yml uses a simple subset of YAML — indentation-based nesting with string/boolean values) + +## Grid Template Consideration + +Grid template entries in toc.yml reference paths like `treegrid/sorting.md`, `hierarchicalgrid/filtering.md`, etc. These don't exist as source files — they are generated by `expandGridTemplates()` from `grids_templates/`. The logic should: +1. Parse toc entries → get set of expected hrefs +2. Run grid template expansion → produces files at expanded paths +3. For each toc entry href: + - If it matches an expanded grid template output → use that + - Otherwise → read from `DOCFX_ARTICLES/{href}` +4. Skip any href whose source file doesn't exist (log a warning) + +This is largely the same logic as today, just driven by toc entries instead of filesystem enumeration. + +## Verification + +1. Run `npm run export:angular` and compare output file count: + - Current: all `.md` files in components/ (~300+) + - Expected: only files listed in toc.yml (~250-280, minus headers and commented entries) +2. Confirm `chart-legends.md` is NOT in the output (not in toc.yml) +3. Confirm grid docs (treegrid/sorting.md, etc.) ARE in the output +4. Spot-check that `_tocName` and `_premium` appear in exported frontmatter +5. Run full pipeline on a few files and verify `premium: true` flows through to final output diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/wc-pipeline-plan.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/wc-pipeline-plan.md new file mode 100644 index 000000000..0fa07ee0e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/wc-pipeline-plan.md @@ -0,0 +1,97 @@ +# WebComponents Documentation Pipeline — Implementation Plan + +## Context + +The project has working Angular and React documentation pipelines (export → inject → compress). WebComponents is listed as "Not started" in progress.md. The WC pipeline is structurally identical to React — both use the shared xplat build system (`igniteui-xplat-docs`), the same `toc.json` with `exclude` arrays, and the same flattening logic. The differences are well-defined: `Igc` prefix (with `Component` suffix), `index.html` entry file, `.ts/.html/.css` sample files (not `.tsx`), and a new submodule (`igniteui-wc-examples`). + +## Files to Create + +### 1. `scripts/export-wc-docs.ts` +Clone of `scripts/export-react-docs.ts` with these changes: +- `BUILT_DOCS` → `dist/WebComponents/en/components` (instead of `dist/React/...`) +- `OUTPUT_DIR` → `dist/docs_processing/webcomponents` +- `parseTocJson` filter: `excludes.includes("WebComponents")` instead of `"React"` +- Build command: `npm run buildWC` instead of `buildReact` +- All log messages: "WebComponents" instead of "React" + +### 2. `scripts/inject-wc-docs.ts` +Clone of `scripts/inject-react-docs.ts` with these changes: +- `EXAMPLES_ROOT` → `join(ROOT, "webcomponents", "igniteui-wc-examples", "samples")` +- `DOCS_ROOT` → `dist/docs_processing/webcomponents` +- `OUTPUT_ROOT` → `dist/docs_prepeared/webcomponents` +- `readReactSampleFiles` → `readWcSampleFiles`: read `index.html`, `.ts`, `.css` files (not `.tsx`) + - File type mapping: `.html` → `html`, `.ts` → `typescript`, `.css` → `css` + - Skip files: adjust skip list for WC (no `react-app-env.d.ts`, etc.) +- Size report: adjust code block language matching (`html`/`typescript` instead of `tsx`) +- Log messages: "WebComponents" instead of "React" + +### 3. `scripts/compress-wc-docs.ts` +Clone of `scripts/compress-react-docs.ts` with these changes: +- `INPUT_DIR` → `dist/docs_prepeared/webcomponents` +- `OUTPUT_DIR` → `dist/docs_final/webcomponents` +- System prompt changes: + - "Ignite UI for Web Components" instead of "Ignite UI for React" + - `Igc` prefix with `Component` suffix (e.g., `IgcGridComponent`, `IgcButtonComponent`) + - Code format: HTML + TypeScript (not TSX/JSX) + - Keep HTML templates and TypeScript code as separate blocks + - Comment syntax: use `<!-- -->` in HTML blocks, `// comment` in TS blocks + - Adjust all references from TSX/JSX/React to HTML/TS/WebComponents +- Error message: "Run 'npm run inject:webcomponents' first" + +## Files to Modify + +### 4. `package.json` — add npm scripts +```json +"build:xplat-wc": "cd common/igniteui-xplat-docs && npm run buildWC", +"export:webcomponents": "npx tsx scripts/export-wc-docs.ts --skip-build", +"inject:webcomponents": "npx tsx scripts/inject-wc-docs.ts", +"compress:webcomponents": "npx tsx --env-file=.env scripts/compress-wc-docs.ts", +"validate:webcomponents": "npx tsx --env-file=.env scripts/validate-docs.ts --input ./dist/docs_final/webcomponents", +"pipeline:webcomponents": "npm run clear:webcomponents && npm run build:xplat-wc && npm run export:webcomponents && npm run inject:webcomponents && npm run compress:webcomponents" +``` + +Note: `clear:webcomponents` already exists in package.json. + +### 5. `.gitmodules` (at repo root) +Add entry for the WC examples submodule: +``` +[submodule "igniteui-wc-examples"] + path = igniteui-doc-mcp/webcomponents/igniteui-wc-examples + url = https://github.com/IgniteUI/igniteui-wc-examples.git +``` + +### 6. `docs/progress.md` +Add WebComponents pipeline entry under "Implemented" section. + +### 7. `CLAUDE.md` +Add WebComponents pipeline documentation section (parallel to the React section). + +## Submodule Setup + +After modifying `.gitmodules`, initialize the submodule: +```bash +git submodule add https://github.com/IgniteUI/igniteui-wc-examples.git igniteui-doc-mcp/webcomponents/igniteui-wc-examples +``` + +## Key WC-Specific Details + +| Aspect | React | WebComponents | +|--------|-------|---------------| +| Prefix | `Igr` | `Igc` | +| Suffix | None (`IgrGrid`) | `Component` (`IgcGridComponent`) | +| Sample entry | `index.tsx` | `index.html` | +| Sample files | `.tsx`, `.ts`, `.css` | `.html`, `.ts`, `.css` | +| Build command | `buildReact` | `buildWC` | +| toc.json exclude | `"React"` | `"WebComponents"` | +| Built output dir | `dist/React/en/components` | `dist/WebComponents/en/components` | +| Examples repo | `igniteui-react-examples` | `igniteui-wc-examples` | +| API URL env var | — | `wcApiUrl` | + +## Verification + +1. **Build xplat**: `npm run build:xplat-wc` — should produce files under `common/igniteui-xplat-docs/dist/WebComponents/` +2. **Export**: `npm run export:webcomponents` — should produce flattened `.md` files in `dist/docs_processing/webcomponents/` +3. **Inject**: `npm run inject:webcomponents` — should produce docs with inlined sample code in `dist/docs_prepeared/webcomponents/`, no files >300KB +4. **Compress** (dry run): `npm run compress:webcomponents -- --dry-run` — verify file count and sizes +5. **Full pipeline**: `npm run pipeline:webcomponents` +6. **Validate**: `npm run validate:webcomponents` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/README.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/README.md new file mode 100644 index 000000000..2dd8d7de2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/README.md @@ -0,0 +1,108 @@ +# Ignite UI for Web Components + +## Enumerations + +- [DatePart](enumerations/DatePart.md) + +## Classes + +- [IgcAccordionComponent](classes/IgcAccordionComponent.md) +- [IgcAvatarComponent](classes/IgcAvatarComponent.md) +- [IgcBadgeComponent](classes/IgcBadgeComponent.md) +- [IgcBannerComponent](classes/IgcBannerComponent.md) +- [IgcButtonComponent](classes/IgcButtonComponent.md) +- [IgcButtonGroupComponent](classes/IgcButtonGroupComponent.md) +- [IgcCalendarComponent](classes/IgcCalendarComponent.md) +- [IgcCardActionsComponent](classes/IgcCardActionsComponent.md) +- [IgcCardComponent](classes/IgcCardComponent.md) +- [IgcCardContentComponent](classes/IgcCardContentComponent.md) +- [IgcCardHeaderComponent](classes/IgcCardHeaderComponent.md) +- [IgcCardMediaComponent](classes/IgcCardMediaComponent.md) +- [IgcCarouselComponent](classes/IgcCarouselComponent.md) +- [IgcCarouselIndicatorComponent](classes/IgcCarouselIndicatorComponent.md) +- [IgcCarouselSlideComponent](classes/IgcCarouselSlideComponent.md) +- [IgcChatComponent](classes/IgcChatComponent.md) +- [IgcCheckboxComponent](classes/IgcCheckboxComponent.md) +- [IgcChipComponent](classes/IgcChipComponent.md) +- [IgcCircularGradientComponent](classes/IgcCircularGradientComponent.md) +- [IgcCircularProgressComponent](classes/IgcCircularProgressComponent.md) +- [IgcComboComponent](classes/IgcComboComponent.md) +- [IgcDatePickerComponent](classes/IgcDatePickerComponent.md) +- [IgcDateRangePickerComponent](classes/IgcDateRangePickerComponent.md) +- [IgcDateTimeInputComponent](classes/IgcDateTimeInputComponent.md) +- [IgcDialogComponent](classes/IgcDialogComponent.md) +- [IgcDividerComponent](classes/IgcDividerComponent.md) +- [IgcDropdownComponent](classes/IgcDropdownComponent.md) +- [IgcDropdownGroupComponent](classes/IgcDropdownGroupComponent.md) +- [IgcDropdownHeaderComponent](classes/IgcDropdownHeaderComponent.md) +- [IgcDropdownItemComponent](classes/IgcDropdownItemComponent.md) +- [IgcExpansionPanelComponent](classes/IgcExpansionPanelComponent.md) +- [IgcFileInputComponent](classes/IgcFileInputComponent.md) +- [IgcIconButtonComponent](classes/IgcIconButtonComponent.md) +- [IgcIconComponent](classes/IgcIconComponent.md) +- [IgcInputComponent](classes/IgcInputComponent.md) +- [IgcLinearProgressComponent](classes/IgcLinearProgressComponent.md) +- [IgcListComponent](classes/IgcListComponent.md) +- [IgcListHeaderComponent](classes/IgcListHeaderComponent.md) +- [IgcListItemComponent](classes/IgcListItemComponent.md) +- [IgcMaskInputComponent](classes/IgcMaskInputComponent.md) +- [IgcNavbarComponent](classes/IgcNavbarComponent.md) +- [IgcNavDrawerComponent](classes/IgcNavDrawerComponent.md) +- [IgcNavDrawerHeaderItemComponent](classes/IgcNavDrawerHeaderItemComponent.md) +- [IgcNavDrawerItemComponent](classes/IgcNavDrawerItemComponent.md) +- [IgcRadioComponent](classes/IgcRadioComponent.md) +- [IgcRadioGroupComponent](classes/IgcRadioGroupComponent.md) +- [IgcRangeSliderComponent](classes/IgcRangeSliderComponent.md) +- [IgcRatingComponent](classes/IgcRatingComponent.md) +- [IgcRatingSymbolComponent](classes/IgcRatingSymbolComponent.md) +- [IgcRippleComponent](classes/IgcRippleComponent.md) +- [IgcSelectComponent](classes/IgcSelectComponent.md) +- [IgcSelectGroupComponent](classes/IgcSelectGroupComponent.md) +- [IgcSelectHeaderComponent](classes/IgcSelectHeaderComponent.md) +- [IgcSelectItemComponent](classes/IgcSelectItemComponent.md) +- [IgcSliderComponent](classes/IgcSliderComponent.md) +- [IgcSliderLabelComponent](classes/IgcSliderLabelComponent.md) +- [IgcSnackbarComponent](classes/IgcSnackbarComponent.md) +- [IgcSplitterComponent](classes/IgcSplitterComponent.md) +- [IgcStepComponent](classes/IgcStepComponent.md) +- [IgcStepperComponent](classes/IgcStepperComponent.md) +- [IgcSwitchComponent](classes/IgcSwitchComponent.md) +- [IgcTabComponent](classes/IgcTabComponent.md) +- [IgcTabsComponent](classes/IgcTabsComponent.md) +- [IgcTextareaComponent](classes/IgcTextareaComponent.md) +- [IgcThemeProviderComponent](classes/IgcThemeProviderComponent.md) +- [IgcTileComponent](classes/IgcTileComponent.md) +- [IgcTileManagerComponent](classes/IgcTileManagerComponent.md) +- [IgcToastComponent](classes/IgcToastComponent.md) +- [IgcToggleButtonComponent](classes/IgcToggleButtonComponent.md) +- [IgcTooltipComponent](classes/IgcTooltipComponent.md) +- [IgcTreeComponent](classes/IgcTreeComponent.md) +- [IgcTreeItemComponent](classes/IgcTreeItemComponent.md) + +## Interfaces + +- [ChatAttachmentRenderContext](interfaces/ChatAttachmentRenderContext.md) +- [ChatInputRenderContext](interfaces/ChatInputRenderContext.md) +- [ChatMessageRenderContext](interfaces/ChatMessageRenderContext.md) +- [ChatRenderContext](interfaces/ChatRenderContext.md) +- [ChatRenderers](interfaces/ChatRenderers.md) +- [IgcChatComponentEventMap](interfaces/IgcChatComponentEventMap.md) +- [IgcChatMessage](interfaces/IgcChatMessage.md) +- [IgcChatMessageAttachment](interfaces/IgcChatMessageAttachment.md) +- [IgcChatMessageReaction](interfaces/IgcChatMessageReaction.md) + +## Type Aliases + +- [ChatSuggestionsPosition](type-aliases/ChatSuggestionsPosition.md) +- [ChatTemplateRenderer](type-aliases/ChatTemplateRenderer.md) +- [IgcChatOptions](type-aliases/IgcChatOptions.md) +- [PopoverPlacement](type-aliases/PopoverPlacement.md) + +## Functions + +- [configureTheme](functions/configureTheme.md) +- [registerIcon](functions/registerIcon.md) +- [registerIconFromText](functions/registerIconFromText.md) +- [setIconRef](functions/setIconRef.md) +- [θaddAdoptedStylesController](functions/θaddAdoptedStylesController.md) +- [θaddThemingController](functions/θaddThemingController.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcAccordionComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcAccordionComponent.md new file mode 100644 index 000000000..ad69f6f64 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcAccordionComponent.md @@ -0,0 +1,119 @@ +# Class: IgcAccordionComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/accordion/accordion.ts#L26) + +The Accordion is a container-based component that can house multiple expansion panels +and offers keyboard navigation. + +## Element + +igc-accordion + +## Slot + +- Renders the expansion panels inside default slot. + +## Extends + +- `LitElement` + +## Other + +### singleExpand + +> **singleExpand**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:59](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/accordion/accordion.ts#L59) + +Allows only one panel to be expanded at a time. + +#### Attr + +single-expand + +#### Default + +```ts +false +``` + +*** + +### panels + +#### Get Signature + +> **get** **panels**(): [`IgcExpansionPanelComponent`](IgcExpansionPanelComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/accordion/accordion.ts#L63) + +Returns all of the accordions's direct igc-expansion-panel children. + +##### Returns + +[`IgcExpansionPanelComponent`](IgcExpansionPanelComponent.md)[] + +*** + +### hideAll() + +> **hideAll**(): `Promise`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:215](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/accordion/accordion.ts#L215) + +Hides all of the child expansion panels' contents. + +#### Returns + +`Promise`\<`void`\> + +*** + +### showAll() + +> **showAll**(): `Promise`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:220](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/accordion/accordion.ts#L220) + +Shows all of the child expansion panels' contents. + +#### Returns + +`Promise`\<`void`\> + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/accordion/accordion.ts#L28) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcAvatarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcAvatarComponent.md new file mode 100644 index 000000000..26d133316 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcAvatarComponent.md @@ -0,0 +1,119 @@ +# Class: IgcAvatarComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/avatar/avatar.ts#L25) + +An avatar component is used as a representation of a user identity +typically in a user profile. + +## Element + +igc-avatar + +## Slot + +- Renders an icon inside the default slot. + +## Csspart + +base - The base wrapper of the avatar. + +## Csspart + +initials - The initials wrapper of the avatar. + +## Csspart + +image - The image wrapper of the avatar. + +## Csspart + +icon - The icon wrapper of the avatar. + +## Extends + +- `LitElement` + +## Other + +### alt? + +> `optional` **alt?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/avatar/avatar.ts#L56) + +Alternative text for the image. + +#### Attr + +*** + +### initials? + +> `optional` **initials?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/avatar/avatar.ts#L63) + +Initials to use as a fallback when no image is available. + +#### Attr + +*** + +### shape + +> **shape**: `AvatarShape` = `'square'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/avatar/avatar.ts#L70) + +The shape of the avatar. + +#### Attr + +*** + +### src? + +> `optional` **src?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/avatar/avatar.ts#L49) + +The image source to use. + +#### Attr + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:27](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/avatar/avatar.ts#L27) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcBadgeComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcBadgeComponent.md new file mode 100644 index 000000000..2c4c7fe74 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcBadgeComponent.md @@ -0,0 +1,152 @@ +# Class: IgcBadgeComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badge/badge.ts#L31) + +The badge is a component indicating a status on a related item or an area +where some active indication is required. + +## Element + +igc-badge + +## Slot + +- Default slot for the badge content. + +## Csspart + +base - The base wrapper of the badge. + +## Csspart + +icon - The icon container, present when an igc-icon element is slotted. + +## Example + +```html +<igc-badge variant="success">New</igc-badge> +<igc-badge variant="danger" shape="square">5</igc-badge> +<igc-badge dot></igc-badge> +``` + +## Extends + +- `LitElement` + +## Other + +### dot + +> **dot**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:86](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badge/badge.ts#L86) + +Sets whether to render a dot type badge. +When enabled, the badge appears as a small dot without any content. + +#### Attr + +dot + +#### Default + +```ts +false +``` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:67](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badge/badge.ts#L67) + +Sets whether to draw an outlined version of the badge. + +#### Attr + +outlined + +#### Default + +```ts +false +``` + +*** + +### shape + +> **shape**: `BadgeShape` = `'rounded'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:76](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badge/badge.ts#L76) + +The shape of the badge. + +#### Attr + +shape + +#### Default + +```ts +'rounded' +``` + +*** + +### variant + +> **variant**: `StyleVariant` = `'primary'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:58](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badge/badge.ts#L58) + +The type (style variant) of the badge. + +#### Attr + +variant + +#### Default + +```ts +'primary' +``` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:33](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badge/badge.ts#L33) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcBannerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcBannerComponent.md new file mode 100644 index 000000000..a7cffe757 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcBannerComponent.md @@ -0,0 +1,123 @@ +# Class: IgcBannerComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/banner/banner.ts#L41) + +The `igc-banner` component displays important and concise message(s) for a user to address, that is specific to a page or feature. + +## Element + +igc-banner + +## Slot + +- Renders the text content of the banner message. + +## Slot + +prefix - Renders additional content at the start of the message block. + +## Slot + +actions - Renders any action elements. + +## Fires + +igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner. + +## Fires + +igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner. + +## Csspart + +base - The base wrapper of the banner component. + +## Csspart + +spacer - The inner wrapper that sets the space around the banner. + +## Csspart + +message - The part that holds the text and the illustration. + +## Csspart + +illustration - The part that holds the banner icon/illustration. + +## Csspart + +content - The part that holds the banner text content. + +## Csspart + +actions - The part that holds the banner action buttons. + +## Extends + +- `EventEmitterInterface`\<`IgcBannerComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/banner/banner.ts#L61) + +Determines whether the banner is being shown/hidden. + +#### Attr + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-banner"` = `'igc-banner'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/banner/banner.ts#L45) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Methods + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/banner/banner.ts#L94) + +Hides the banner if not already hidden. Returns `true` when the animation has completed. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:84](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/banner/banner.ts#L84) + +Shows the banner if not already shown. Returns `true` when the animation has completed. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:105](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/banner/banner.ts#L105) + +Toggles between shown/hidden state. Returns `true` when the animation has completed. + +#### Returns + +`Promise`\<`boolean`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcButtonComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcButtonComponent.md new file mode 100644 index 000000000..a9921ed15 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcButtonComponent.md @@ -0,0 +1,241 @@ +# Class: IgcButtonComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button.ts#L26) + +Represents a clickable button, used to submit forms or anywhere in a +document for accessible, standard button functionality. + +## Element + +igc-button + +## Slot + +- Renders the label of the button. + +## Slot + +prefix - Renders content before the label of the button. + +## Slot + +suffix - Renders content after the label of the button. + +## Csspart + +base - The native button element of the igc-button component. + +## Csspart + +prefix - The prefix container of the igc-button component. + +## Csspart + +suffix - The suffix container of the igc-button component. + +## Extends + +- `IgcButtonBaseComponent` + +## Properties + +### download? + +> `optional` **download?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L56) + +Prompts to save the linked URL instead of navigating to it. + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.download` + +*** + +### href? + +> `optional` **href?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L49) + +The URL the button points to. + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.href` + +*** + +### rel? + +> `optional` **rel?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:71](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L71) + +The relationship of the linked URL. +See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.rel` + +*** + +### target? + +> `optional` **target?**: `"_blank"` \| `"_parent"` \| `"_self"` \| `"_top"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L63) + +Where to display the linked URL, as the name for a browsing context. + +#### Attr + +#### Inherited from + +[`IgcIconButtonComponent`](IgcIconButtonComponent.md).[`target`](IgcIconButtonComponent.md#target) + +*** + +### type + +> **type**: `"reset"` \| `"submit"` \| `"button"` = `'button'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L42) + +The type of the button. Defaults to `button`. + +#### Attr + +#### Inherited from + +[`IgcIconButtonComponent`](IgcIconButtonComponent.md).[`type`](IgcIconButtonComponent.md#type) + +*** + +### variant + +> **variant**: `ButtonVariant` = `'contained'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button.ts:40](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button.ts#L40) + +Sets the variant of the button. + +#### Attr + +## Accessors + +### disabled + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L78) + +The disabled state of the component + +##### Attr + +[disabled=false] + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.disabled` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L90) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`IgcButtonBaseComponent.form` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L107) + +Removes focus from the button. + +#### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.blur` + +*** + +### click() + +> **click**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:101](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L101) + +Simulates a mouse click on the element + +#### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.click` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L96) + +Sets focus in the button. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.focus` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcButtonGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcButtonGroupComponent.md new file mode 100644 index 000000000..71f11aafe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcButtonGroupComponent.md @@ -0,0 +1,95 @@ +# Class: IgcButtonGroupComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:38](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/button-group.ts#L38) + +The `igc-button-group` groups a series of `igc-toggle-button`s together, exposing features such as layout and selection. + +## Element + +igc-button-group + +## Slot + +- Renders `igc-toggle-button` component. + +## Fires + +igcSelect - Emitted when a button is selected through user interaction. + +## Fires + +igcDeselect - Emitted when a button is deselected through user interaction. + +## Csspart + +group - The button group container. + +## Extends + +- `EventEmitterInterface`\<`IgcButtonGroupComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### alignment + +> **alignment**: `ContentOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/button-group.ts#L94) + +Sets the orientation of the buttons in the group. + +#### Attr + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:87](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/button-group.ts#L87) + +Disables all buttons inside the group. + +#### Attr + +*** + +### selection + +> **selection**: `ButtonGroupSelection` = `'single'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:101](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/button-group.ts#L101) + +Controls the mode of selection for the button group. + +#### Attr + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-button-group"` = `'igc-button-group'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/button-group.ts#L42) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### selectedItems + +#### Get Signature + +> **get** **selectedItems**(): `string`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:108](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/button-group.ts#L108) + +Gets/Sets the currently selected buttons (their values). + +##### Attr + +##### Returns + +`string`[] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCalendarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCalendarComponent.md new file mode 100644 index 000000000..0be7cc12b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCalendarComponent.md @@ -0,0 +1,590 @@ +# Class: IgcCalendarComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L107) + +Represents a calendar that lets users +to select a date value in a variety of different ways. + +## Element + +igc-calendar + +## Slot + +- The default slot for the calendar. + +## Slot + +title - Renders the title of the calendar header. + +## Slot + +header-date - Renders content instead of the current date/range in the calendar header. + +## Fires + +igcChange - Emitted when calendar changes its value. + +## Csspart + +header - The header element of the calendar. + +## Csspart + +header-title - The header title element of the calendar. + +## Csspart + +header-date - The header date element of the calendar. + +## Csspart + +content - The content element which contains the views and navigation elements of the calendar. + +## Csspart + +content-vertical - The content element which contains the views and navigation elements of the calendar in vertical orientation. + +## Csspart + +navigation - The navigation container element of the calendar. + +## Csspart + +months-navigation - The months navigation button element of the calendar. + +## Csspart + +years-navigation - The years navigation button element of the calendar. + +## Csspart + +years-range - The years range element of the calendar. + +## Csspart + +navigation-buttons - The navigation buttons container of the calendar. + +## Csspart + +navigation-button - Previous/next navigation button of the calendar. + +## Csspart + +days-view-container - The days view container element of the calendar. + +## Csspart + +days-view - Days view element of the calendar. + +## Csspart + +months-view - The months view element of the calendar. + +## Csspart + +years-view - The years view element of the calendar. + +## Csspart + +days-row - Days row element of the calendar. + +## Csspart + +label - Week header label element of the calendar. + +## Csspart + +week-number - Week number element of the calendar. + +## Csspart + +week-number-inner - Week number inner element of the calendar. + +## Csspart + +date - Date element of the calendar. + +## Csspart + +date-inner - Date inner element of the calendar. + +## Csspart + +first - The first selected date element of the calendar in range selection. + +## Csspart + +last - The last selected date element of the calendar in range selection. + +## Csspart + +inactive - Inactive date element of the calendar. + +## Csspart + +hidden - Hidden date element of the calendar. + +## Csspart + +weekend - Weekend date element of the calendar. + +## Csspart + +range - Range selected element of the calendar. + +## Csspart + +special - Special date element of the calendar. + +## Csspart + +disabled - Disabled date element of the calendar. + +## Csspart + +single - Single selected date element of the calendar. + +## Csspart + +preview - Range selection preview date element of the calendar. + +## Csspart + +month - Month element of the calendar. + +## Csspart + +month-inner - Month inner element of the calendar. + +## Csspart + +year - Year element of the calendar. + +## Csspart + +year-inner - Year inner element of the calendar. + +## Csspart + +selected - Indicates selected state. Applies to date, month and year elements of the calendar. + +## Csspart + +current - Indicates current state. Applies to date, month and year elements of the calendar. + +## Extends + +- `EventEmitterInterface`\<`IgcCalendarComponentEventMap`, `this`\> & `IgcCalendarBaseComponent`\<`this`\> + +## Properties + +### activeView + +> **activeView**: `CalendarActiveView` = `'days'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:232](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L232) + +The current active view of the component. + +#### Attr + +active-view + +#### Default + +```ts +"days" +``` + +*** + +### formatOptions + +> **formatOptions**: `Pick`\<`Intl.DateTimeFormatOptions`, `"month"` \| `"weekday"`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:236](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L236) + +The options used to format the months and the weekdays in the calendar views. + +*** + +### headerOrientation + +> **headerOrientation**: `CalendarHeaderOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:207](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L207) + +The orientation of the calendar header. + +#### Attr + +header-orientation + +#### Default + +```ts +"horizontal" +``` + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:199](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L199) + +Whether to render the calendar header part. +When the calendar selection is set to `multiple` the header is always hidden. + +#### Attr + +hide-header + +#### Default + +```ts +false +``` + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:189](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L189) + +Whether to show the dates that do not belong to the current active month. + +#### Attr + +hide-outside-days + +#### Default + +```ts +false +``` + +*** + +### orientation + +> **orientation**: `ContentOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:216](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L216) + +The orientation of the calendar months when more than one month +is being shown. + +#### Attr + +orientation + +#### Default + +```ts +"horizontal" +``` + +*** + +### selection + +> **selection**: `CalendarSelection` = `'single'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:121](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L121) + +Sets the type of selection in the component. + +#### Attr + +selection + +#### Default + +```ts +single +``` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).selection` + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:129](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L129) + +Whether to show the week numbers. + +#### Attr + +show-week-numbers + +#### Default + +```ts +false +``` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).showWeekNumbers` + +*** + +### visibleMonths + +> **visibleMonths**: `number` = `1` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:224](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L224) + +The number of months displayed in the days view. + +#### Attr + +visible-months + +#### Default + +```ts +1 +``` + +*** + +### weekStart + +> **weekStart**: `WeekDays` = `'sunday'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:137](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L137) + +Gets/Sets the first day of the week. + +#### Attr + +week-start + +#### Default + +```ts +sunday +``` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).weekStart` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-calendar"` = `'igc-calendar'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:111](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/calendar.ts#L111) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### activeDate + +#### Set Signature + +> **set** **activeDate**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:103](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L103) + +Get/Set the date which is shown in view and is highlighted. By default it is the current date. + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).activeDate` + +*** + +### disabledDates + +#### Set Signature + +> **set** **disabledDates**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:176](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L176) + +Gets/Sets the disabled dates for the component. + +##### Parameters + +###### value + +`DateRangeDescriptor`[] + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).disabledDates` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:144](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L144) + +Gets/Sets the locale used for formatting and displaying the dates in the component. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).locale` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L156) + +The resource strings for localization. + +##### Parameters + +###### value + +`IgcCalendarResourceStrings` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).resourceStrings` + +*** + +### specialDates + +#### Set Signature + +> **set** **specialDates**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:166](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L166) + +Gets/Sets the special dates for the component. + +##### Parameters + +###### value + +`DateRangeDescriptor`[] + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).specialDates` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L74) + +The current value of the calendar. +Used when selection is set to single + +##### Attr + +value + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).value` + +*** + +### values + +#### Set Signature + +> **set** **values**(`values`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/base.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/calendar/base.ts#L91) + +The current values of the calendar. +Used when selection is set to multiple of range. + +##### Attr + +values + +##### Parameters + +###### values + +`string` \| (`string` \| `Date`)[] \| `null` \| `undefined` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent).values` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardActionsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardActionsComponent.md new file mode 100644 index 000000000..281441c8d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardActionsComponent.md @@ -0,0 +1,93 @@ +# Class: IgcCardActionsComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.actions.ts:30](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.actions.ts#L30) + +A container component for card action items such as buttons or icon buttons. +Actions can be positioned at the start, center, or end of the container. + +## Element + +igc-card-actions + +## Slot + +start - Renders items at the beginning of the actions area. + +## Slot + +- Renders items in the center of the actions area. + +## Slot + +end - Renders items at the end of the actions area. + +## Example + +```html +<igc-card-actions> + <igc-button slot="start" variant="flat">Like</igc-button> + <igc-button slot="start" variant="flat">Share</igc-button> + <igc-icon-button slot="end" name="more_vert"></igc-icon-button> +</igc-card-actions> +``` + +## Extends + +- `LitElement` + +## Other + +### orientation + +> **orientation**: `ContentOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.actions.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.actions.ts#L51) + +The orientation of the actions layout. + +#### Attr + +orientation + +#### Default + +```ts +'horizontal' +``` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.actions.ts:32](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.actions.ts#L32) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardComponent.md new file mode 100644 index 000000000..f4606d5d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardComponent.md @@ -0,0 +1,94 @@ +# Class: IgcCardComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.ts:39](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.ts#L39) + +A container component that wraps different elements related to a single subject. +The card component provides a flexible container for organizing content such as headers, +media, text content, and actions. + +## Element + +igc-card + +## Slot + +- Renders the card content. Typically contains igc-card-header, igc-card-media, igc-card-content, and igc-card-actions. + +## Example + +```html +<igc-card> + <igc-card-header> + <h3 slot="title">Card Title</h3> + <h5 slot="subtitle">Card Subtitle</h5> + </igc-card-header> + <igc-card-content> + <p>Card content goes here</p> + </igc-card-content> + <igc-card-actions> + <button slot="start">Action</button> + </igc-card-actions> +</igc-card> +``` + +## Extends + +- `LitElement` + +## Other + +### elevated + +> **elevated**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.ts:62](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.ts#L62) + +Sets the card to have an elevated appearance with shadow. +When false, the card uses an outlined style with a border. + +#### Attr + +elevated + +#### Default + +```ts +false +``` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.ts#L41) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardContentComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardContentComponent.md new file mode 100644 index 000000000..7470965f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardContentComponent.md @@ -0,0 +1,63 @@ +# Class: IgcCardContentComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.content.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.content.ts#L24) + +A container component for the card's main text content. +This component should be used within an igc-card element to display the primary content. + +## Element + +igc-card-content + +## Slot + +- Renders the card text content (e.g., paragraphs, lists). + +## Example + +```html +<igc-card-content> + <p>This is the main content of the card. It can contain any text or HTML content.</p> +</igc-card-content> +``` + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.content.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.content.ts#L26) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardHeaderComponent.md new file mode 100644 index 000000000..505339087 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardHeaderComponent.md @@ -0,0 +1,89 @@ +# Class: IgcCardHeaderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.header.ts:33](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.header.ts#L33) + +A container component for the card's header section. +Displays header content including an optional thumbnail, title, subtitle, and additional content. + +## Element + +igc-card-header + +## Slot + +thumbnail - Renders header media such as an icon or small image. + +## Slot + +title - Renders the card title (typically a heading element). + +## Slot + +subtitle - Renders the card subtitle (typically a smaller heading or text). + +## Slot + +- Renders additional content displayed next to the title area. + +## Csspart + +header - The card header text container. + +## Csspart + +title - The title slot wrapper. + +## Csspart + +subtitle - The subtitle slot wrapper. + +## Example + +```html +<igc-card-header> + <igc-avatar slot="thumbnail" initials="AB"></igc-avatar> + <h3 slot="title">Card Title</h3> + <h5 slot="subtitle">Card Subtitle</h5> +</igc-card-header> +``` + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.header.ts:35](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.header.ts#L35) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardMediaComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardMediaComponent.md new file mode 100644 index 000000000..ee774fb09 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCardMediaComponent.md @@ -0,0 +1,65 @@ +# Class: IgcCardMediaComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.media.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.media.ts#L23) + +A container component for card media content such as images, GIFs, or videos. +This component should be used within an igc-card element to display visual content. + +## Element + +igc-card-media + +## Slot + +- Renders the card media content (e.g., img, video elements). + +## Example + +```html +<igc-card> + <igc-card-media> + <img src="image.jpg" alt="Card image" /> + </igc-card-media> +</igc-card> +``` + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.media.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/card.media.ts#L25) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselComponent.md new file mode 100644 index 000000000..064db1d1f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselComponent.md @@ -0,0 +1,492 @@ +# Class: IgcCarouselComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:95](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L95) + +The `igc-carousel` presents a set of `igc-carousel-slide`s by sequentially displaying a subset of one or more slides. + +## Element + +igc-carousel + +## Slot + +Default slot for the carousel. Any projected `igc-carousel-slide` components should be projected here. + +## Slot + +previous-button - Renders content inside the previous button. + +## Slot + +next-button - Renders content inside the next button. + +## Fires + +igcSlideChanged - Emitted when the current active slide is changed either by user interaction or by the interval callback. + +## Fires + +igcPlaying - Emitted when the carousel enters playing state by a user interaction. + +## Fires + +igcPaused - Emitted when the carousel enters paused state by a user interaction. + +## Csspart + +navigation - The wrapper container of each carousel navigation button. + +## Csspart + +previous - The wrapper container of the carousel previous navigation button. + +## Csspart + +next - The wrapper container of the carousel next navigation button. + +## Csspart + +dot - The carousel dot indicator container. + +## Csspart + +active - The carousel active dot indicator container. + +## Csspart + +label - The label container of the carousel indicators. + +## Csspart + +start - The wrapping container of all carousel indicators when indicators-orientation is set to start. + +## Extends + +- `EventEmitterInterface`\<`IgcCarouselComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### animationType + +> **animationType**: `HorizontalTransitionAnimation` = `'slide'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:285](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L285) + +The animation type. + +#### Attr + +animation-type + +*** + +### disableLoop + +> **disableLoop**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:185](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L185) + +Whether the carousel should skip rotating to the first slide after it reaches the last. + +#### Attr + +disable-loop + +*** + +### disablePauseOnInteraction + +> **disablePauseOnInteraction**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:196](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L196) + +Whether the carousel should ignore use interactions and not pause on them. + +#### Attr + +disable-pause-on-interaction + +*** + +### hideIndicators + +> **hideIndicators**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:210](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L210) + +Whether the carousel should render the indicator controls (dots). + +#### Attr + +hide-indicators + +*** + +### hideNavigation + +> **hideNavigation**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:203](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L203) + +Whether the carousel should skip rendering of the default navigation buttons. + +#### Attr + +hide-navigation + +*** + +### indicatorsOrientation + +> **indicatorsOrientation**: `CarouselIndicatorsOrientation` = `'end'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:224](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L224) + +Sets the orientation of the indicator controls (dots). + +#### Attr + +indicators-orientation + +*** + +### interval + +> **interval**: `number` \| `undefined` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:271](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L271) + +The duration in milliseconds between changing the active slide. + +#### Attr + +interval + +*** + +### maximumIndicatorsCount + +> **maximumIndicatorsCount**: `number` = `10` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:278](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L278) + +Controls the maximum indicator controls (dots) that can be shown. Default value is `10`. + +#### Attr + +maximum-indicators-count + +*** + +### vertical + +> **vertical**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:217](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L217) + +Whether the carousel has vertical alignment. + +#### Attr + +vertical + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-carousel"` = `'igc-carousel'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:100](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L100) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### current + +#### Get Signature + +> **get** **current**(): `number` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:331](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L331) + +The index of the current active slide. + +##### Returns + +`number` + +*** + +### indicatorsLabelFormat + +#### Set Signature + +> **set** **indicatorsLabelFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:233](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L233) + +The format used to set the aria-label on the carousel indicators. +Instances of '{0}' will be replaced with the index of the corresponding slide. + +##### Attr + +indicators-label-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### isPaused + +#### Get Signature + +> **get** **isPaused**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:345](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L345) + +Whether the carousel in in paused state. + +##### Returns + +`boolean` + +*** + +### isPlaying + +#### Get Signature + +> **get** **isPlaying**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:338](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L338) + +Whether the carousel is in playing state. + +##### Returns + +`boolean` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:292](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L292) + +Gets/Sets the locale used for getting language, affecting resource strings. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:305](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L305) + +The resource strings for localization. +Currently only aria-label attributes are localized for the carousel. + +##### Parameters + +###### value + +`ICarouselResourceStrings` + +##### Returns + +`void` + +*** + +### slides + +#### Get Signature + +> **get** **slides**(): [`IgcCarouselSlideComponent`](IgcCarouselSlideComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:317](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L317) + +The slides of the carousel. + +##### Returns + +[`IgcCarouselSlideComponent`](IgcCarouselSlideComponent.md)[] + +*** + +### slidesLabelFormat + +#### Set Signature + +> **set** **slidesLabelFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:254](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L254) + +The format used to set the aria-label on the carousel slides and the text displayed +when the number of indicators is greater than tha maximum indicator count. +Instances of '{0}' will be replaced with the index of the corresponding slide. +Instances of '{1}' will be replaced with the total amount of slides. + +##### Attr + +slides-label-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### total + +#### Get Signature + +> **get** **total**(): `number` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:324](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L324) + +The total number of slides. + +##### Returns + +`number` + +## Methods + +### next() + +> **next**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:715](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L715) + +Switches to the next slide, runs any animations, and returns if the operation was successful. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### pause() + +> **pause**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:704](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L704) + +Pauses the carousel rotation of slides. + +#### Returns + +`void` + +*** + +### play() + +> **play**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:693](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L693) + +Resumes playing of the carousel slides. + +#### Returns + +`void` + +*** + +### prev() + +> **prev**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:727](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L727) + +Switches to the previous slide, runs any animations, and returns if the operation was successful. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### select() + +#### Call Signature + +> **select**(`slide`, `animationDirection?`): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:740](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L740) + +Switches to the passed-in slide, runs any animations, and returns if the operation was successful. + +##### Parameters + +###### slide + +[`IgcCarouselSlideComponent`](IgcCarouselSlideComponent.md) + +###### animationDirection? + +`"next"` \| `"prev"` + +##### Returns + +`Promise`\<`boolean`\> + +#### Call Signature + +> **select**(`index`, `animationDirection?`): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:747](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel.ts#L747) + +Switches to slide by index, runs any animations, and returns if the operation was successful. + +##### Parameters + +###### index + +`number` + +###### animationDirection? + +`"next"` \| `"prev"` + +##### Returns + +`Promise`\<`boolean`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselIndicatorComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselIndicatorComponent.md new file mode 100644 index 000000000..08065a30d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselIndicatorComponent.md @@ -0,0 +1,70 @@ +# Class: IgcCarouselIndicatorComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-indicator.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel-indicator.ts#L24) + +Used when a custom indicator needs to be passed to the `igc-carousel` component. + +## Element + +igc-carousel-indicator + +## Slot + +- Default slot for projected inactive indicator. + +## Slot + +active - Default slot for projected active indicator. + +## Csspart + +indicator - The wrapping container of the carousel dot indicator. + +## Csspart + +inactive - The wrapping container of the inactive dot indicator. + +## Csspart + +active - The wrapping container of the active dot indicator. + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-indicator.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel-indicator.ts#L26) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselSlideComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselSlideComponent.md new file mode 100644 index 000000000..6818aac1d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCarouselSlideComponent.md @@ -0,0 +1,66 @@ +# Class: IgcCarouselSlideComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-slide.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel-slide.ts#L23) + +A single content container within a set of containers used in the context of an `igc-carousel`. + +## Element + +igc-carousel-slide + +## Slot + +Default slot for the carousel slide. + +## Extends + +- `LitElement` + +## Other + +### active + +> **active**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-slide.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel-slide.ts#L70) + +The current active slide for the carousel component. + +#### Attr + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-slide.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/carousel/carousel-slide.ts#L24) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcChatComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcChatComponent.md new file mode 100644 index 000000000..f0bc31d9e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcChatComponent.md @@ -0,0 +1,374 @@ +# Class: IgcChatComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:185](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L185) + +A chat UI component for displaying messages, attachments, and input interaction. + +## Element + +igc-chat + +## Fires + +igcMessageCreated - Dispatched when a new chat message is created (sent). + +## Fires + +igcMessageReact - Dispatched when a message is reacted to. + +## Fires + +igcAttachmentClick - Dispatched when a chat message attachment is clicked. + +## Fires + +igcAttachmentAdded - Dispatched when attachment(s) are added either through drag & drop or through the default file input. + +## Fires + +igcAttachmentRemoved - Dispatched when an attachment is removed by the user. + +## Fires + +igcAttachmentDrag - Dispatched during an attachment drag operation. + +## Fires + +igcAttachmentDrop - Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation). + +## Fires + +igcTypingChange - Dispatched when the typing status changes (e.g., user starts or stops typing). + +## Fires + +igcInputFocus - Dispatched when the chat input field gains focus. + +## Fires + +igcInputBlur - Dispatched when the chat input field loses focus. + +## Fires + +igcInputChange - Dispatched when the content of the chat input changes. + +## Slot + +prefix - Slot for injecting content (e.g., avatar or icon) before the chat title. + +## Slot + +title - Slot for overriding the chat title content. + +## Slot + +actions - Slot for injecting header actions (e.g., buttons, menus). + +## Slot + +suggestions-header - Slot for rendering a custom header for the suggestions list. + +## Slot + +suggestions - Slot for rendering a custom list of quick reply suggestions. + +## Slot + +suggestions-actions - Slot for rendering additional actions. + +## Slot + +suggestion - Slot for rendering a single suggestion item. + +## Slot + +empty-state - Slot shown when there are no messages. + +## Slot + +typing-indicator - Slot for the "is typing" indicator. + +## Csspart + +chat-container - Styles the main chat container. + +## Csspart + +header - Styles the chat header container. + +## Csspart + +prefix - Styles the element before the chat title (e.g., avatar). + +## Csspart + +title - Styles the chat header title. + +## Csspart + +message-area-container - Styles the container holding the messages and (optional) suggestions. + +## Csspart + +message-list - Styles the message list container. + +## Csspart + +message-item - Styles each message wrapper. + +## Csspart + +typing-indicator - Styles the typing indicator container. + +## Csspart + +typing-dot - Styles individual typing indicator dots. + +## Csspart + +suggestions-container - Styles the container holding all suggestions. + +## Csspart + +suggestions-header - Styles the suggestions header. + +## Csspart + +suggestion - Styles each suggestion item. + +## Csspart + +suggestion-prefix - Styles the icon or prefix in a suggestion. + +## Csspart + +suggestion-title - Styles the text/title of a suggestion. + +## Csspart + +empty-state - Styles the empty state container when there are no messages. + +## Csspart + +input-area-container - Styles the wrapper around the chat input area. + +## Csspart + +input-area - Styles the main text input area. + +## Csspart + +input-attachments-container - Styles the container for attachments in the input. + +## Csspart + +input-attachment-container - Styles a single attachment in the input area. + +## Csspart + +input-attachment-name - Styles the file name of an attachment. + +## Csspart + +input-attachment-icon - Styles the icon of an attachment. + +## Csspart + +text-input - Styles the text input field for typing messages. + +## Csspart + +input-actions-container - Styles the container for input actions. + +## Csspart + +input-actions-start - Styles the group of actions at the start of the input after the default file upload. + +## Csspart + +input-actions-end - Styles the group of actions at the end of the input. + +## Csspart + +file-upload-container - Styles the container for the file upload input. + +## Csspart + +file-upload - Styles the file upload input itself. + +## Csspart + +send-button-container - Styles the container around the send button. + +## Csspart + +send-button - Styles the send button. + +## Csspart + +message-container - Styles the container of a single message. + +## Csspart + +message-list (forwarded) - Styles the internal list of messages. + +## Csspart + +message-header - Styles the header of a message (e.g., sender, timestamp). + +## Csspart + +message-content - Styles the text content of a message. + +## Csspart + +message-attachments-container - Styles the container for message attachments. + +## Csspart + +message-attachment - Styles a single message attachment. + +## Csspart + +message-actions-container - Styles the container holding message actions. + +## Csspart + +message-sent - Styles messages marked as sent by the current user. + +## Csspart + +attachment-header - Styles the header of an attachment block. + +## Csspart + +attachment-content - Styles the content of an attachment block. + +## Csspart + +attachment-icon - Styles the icon of an attachment. + +## Csspart + +file-name - Styles the file name shown in an attachment. + +## Extends + +- `EventEmitterInterface`\<[`IgcChatComponentEventMap`](../interfaces/IgcChatComponentEventMap.md), `this`\> & `LitElement`\<`this`\> + +## Properties + +### resourceStrings + +> **resourceStrings**: `IgcChatResourceStrings` = `IgcChatResourceStringEN` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:307](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L307) + +The resource strings of the chat. + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-chat"` = `'igc-chat'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:189](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L189) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### draftMessage + +#### Set Signature + +> **set** **draftMessage**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:269](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L269) + +The chat message currently being composed but not yet sent. +Includes the draft text and any attachments. + +##### Parameters + +###### value + +###### attachments? + +[`IgcChatMessageAttachment`](../interfaces/IgcChatMessageAttachment.md)[] + +###### text + +`string` + +##### Returns + +`void` + +*** + +### messages + +#### Set Signature + +> **set** **messages**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:256](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L256) + +The list of chat messages currently displayed. +Use this property to set or update the message history. + +##### Parameters + +###### value + +[`IgcChatMessage`](../interfaces/IgcChatMessage.md)[] + +##### Returns + +`void` + +*** + +### options + +#### Set Signature + +> **set** **options**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:295](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L295) + +Controls the chat behavior and appearance through a configuration object. +Use this to toggle UI options, provide suggestions, templates, etc. + +##### Parameters + +###### value + +[`IgcChatOptions`](../type-aliases/IgcChatOptions.md) + +##### Returns + +`void` + +## Methods + +### scrollToMessage() + +> **scrollToMessage**(`messageId`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:330](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L330) + +Scrolls the view to a specific message by id. + +#### Parameters + +##### messageId + +`string` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCheckboxComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCheckboxComponent.md new file mode 100644 index 000000000..2d938d8b8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCheckboxComponent.md @@ -0,0 +1,462 @@ +# Class: IgcCheckboxComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox.ts:34](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox.ts#L34) + +A check box allowing single values to be selected/deselected. + +## Element + +igc-checkbox + +## Slot + +- The checkbox label. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Csspart + +base - The base wrapper of the checkbox. + +## Csspart + +control - The checkbox input element. + +## Csspart + +label - The checkbox label. + +## Csspart + +indicator - The checkbox indicator icon. + +## Extends + +- `IgcCheckboxBaseComponent` + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcCheckboxBaseComponent.disabled` + +*** + +### indeterminate + +> **indeterminate**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox.ts:53](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox.ts#L53) + +Draws the checkbox in indeterminate state. + +#### Attr + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcCheckboxBaseComponent.invalid` + +*** + +### labelPosition + +> **labelPosition**: `ToggleLabelPosition` = `'after'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L91) + +The label position of the control. + +#### Attr + +label-position + +#### Inherited from + +`IgcCheckboxBaseComponent.labelPosition` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`IgcCheckboxBaseComponent.name` + +## Accessors + +### checked + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L78) + +The checked state of the control. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.checked` + +*** + +### defaultChecked + +#### Set Signature + +> **set** **defaultChecked**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:162](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L162) + +The initial checked state of the component. + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.defaultChecked` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`IgcCheckboxBaseComponent.form` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.required` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`IgcCheckboxBaseComponent.validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`IgcCheckboxBaseComponent.validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L61) + +The value attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.value` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`IgcCheckboxBaseComponent.willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:106](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L106) + +Removes focus from the control. + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcCheckboxBaseComponent.checkValidity` + +*** + +### click() + +> **click**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L94) + +Simulates a click on the control. + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.click` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:100](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L100) + +Sets focus on the control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.focus` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcCheckboxBaseComponent.reportValidity` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.setCustomValidity` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcChipComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcChipComponent.md new file mode 100644 index 000000000..68454687b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcChipComponent.md @@ -0,0 +1,174 @@ +# Class: IgcChipComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L44) + +Chips help people enter information, make selections, filter content, or trigger actions. + +## Element + +igc-chip + +## Slot + +- Renders content in the default slot of the chip. + +## Slot + +prefix - Renders content at the start of the chip, before the default content. + +## Slot + +suffix - Renders content at the end of the chip after the default content. + +## Slot + +select - Content to render when the chip in selected state. + +## Slot + +remove - Content to override the default remove chip icon. + +## Fires + +igcRemove - Emits an event when the chip component is removed. Returns the removed chip component. + +## Fires + +igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end. + +## Csspart + +base - The base wrapper of the chip. + +## Csspart + +prefix - The prefix container of the chip. + +## Csspart + +suffix - The suffix container of the chip. + +## Extends + +- `EventEmitterInterface`\<`IgcChipComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:67](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L67) + +Sets the disabled state for the chip. + +#### Attr + +*** + +### removable + +> **removable**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L74) + +Defines if the chip is removable or not. + +#### Attr + +*** + +### selectable + +> **selectable**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:81](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L81) + +Defines if the chip is selectable or not. + +#### Attr + +*** + +### selected + +> **selected**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:89](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L89) + +Defines if the chip is selected or not. + +#### Attr + +*** + +### variant + +> **variant**: `StyleVariant` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L96) + +A property that sets the color variant of the chip component. + +#### Attr + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-chip"` = `'igc-chip'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:48](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L48) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:103](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L103) + +Gets/Sets the locale used for getting language, affecting resource strings. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:116](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/chip.ts#L116) + +The resource strings for localization. +Currently only aria-labels for the default select/remove icons are localized. + +##### Parameters + +###### value + +`IChipResourceStrings` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCircularGradientComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCircularGradientComponent.md new file mode 100644 index 000000000..fd90c9db9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCircularGradientComponent.md @@ -0,0 +1,52 @@ +# Class: IgcCircularGradientComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-gradient.ts:14](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/circular-gradient.ts#L14) + +Used for defining gradient stops in the igc-circular-progress. +For each `igc-circular-gradient` defined as `gradient` slot of `igc-circular-progress` element would be created a SVG stop element. +The values passed as `color`, `offset` and `opacity` would be set as +`stop-color`, `offset` and `stop-opacity` of the SVG element without further validations. + +## Element + +igc-circular-gradient + +## Extends + +- `LitElement` + +## Properties + +### color + +> **color**: `string` = `'black'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-gradient.ts:34](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/circular-gradient.ts#L34) + +Defines the color of the gradient stop + +#### Attr + +*** + +### offset + +> **offset**: `string` = `'0%'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-gradient.ts:27](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/circular-gradient.ts#L27) + +Defines where the gradient stop is placed along the gradient vector + +#### Attr + +*** + +### opacity + +> **opacity**: `number` = `1` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-gradient.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/circular-gradient.ts#L41) + +Defines the opacity of the gradient stop + +#### Attr diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCircularProgressComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCircularProgressComponent.md new file mode 100644 index 000000000..c1101e956 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcCircularProgressComponent.md @@ -0,0 +1,232 @@ +# Class: IgcCircularProgressComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-progress.ts:38](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/circular-progress.ts#L38) + +A circular progress indicator used to express unspecified wait time or display +the length of a process. + +## Element + +igc-circular-progress + +## Slot + +- The text area container. + +## Slot + +gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements. + +## Csspart + +svg - The igc-circular-progress SVG element. + +## Csspart + +gradient_start - The igc-circular-progress linear-gradient start color. + +## Csspart + +gradient_end - The igc-circular-progress linear-gradient end color. + +## Csspart + +track - The igc-circular-progress ring track area. + +## Csspart + +fill - The igc-circular-progress indicator area. + +## Csspart + +label - The igc-circular-progress label. + +## Csspart + +value - The igc-circular-progress label value. + +## Csspart + +indeterminate - The igc-circular-progress indeterminate state. + +## Csspart + +primary - The igc-circular-progress primary state. + +## Csspart + +danger - The igc-circular-progress error state. + +## Csspart + +warning - The igc-circular-progress warning state. + +## Csspart + +info - The igc-circular-progress info state. + +## Csspart + +success - The igc-circular-progress success state. + +## Extends + +- `IgcProgressBaseComponent` + +## Other + +### animationDuration + +> **animationDuration**: `number` = `500` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:68](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L68) + +Animation duration in milliseconds. + +#### Attr + +animation-duration + +#### Inherited from + +[`IgcLinearProgressComponent`](IgcLinearProgressComponent.md).[`animationDuration`](IgcLinearProgressComponent.md#animationduration) + +*** + +### hideLabel + +> **hideLabel**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:82](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L82) + +Shows/hides the label of the control. + +#### Attr + +hide-label + +#### Inherited from + +[`IgcLinearProgressComponent`](IgcLinearProgressComponent.md).[`hideLabel`](IgcLinearProgressComponent.md#hidelabel) + +*** + +### indeterminate + +> **indeterminate**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:75](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L75) + +The indeterminate state of the control. + +#### Attr + +#### Inherited from + +[`IgcLinearProgressComponent`](IgcLinearProgressComponent.md).[`indeterminate`](IgcLinearProgressComponent.md#indeterminate) + +*** + +### labelFormat + +> **labelFormat**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:92](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L92) + +Format string for the default label of the control. +Placeholders: + {0} - current value of the control. + {1} - max value of the control. + +#### Attr + +label-format + +#### Inherited from + +`IgcProgressBaseComponent.labelFormat` + +*** + +### max + +> **max**: `number` = `100` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:47](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L47) + +Maximum value of the control. + +#### Attr + +#### Inherited from + +[`IgcLinearProgressComponent`](IgcLinearProgressComponent.md).[`max`](IgcLinearProgressComponent.md#max) + +*** + +### value + +> **value**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L54) + +The value of the control. + +#### Attr + +#### Inherited from + +[`IgcLinearProgressComponent`](IgcLinearProgressComponent.md).[`value`](IgcLinearProgressComponent.md#value) + +*** + +### variant + +> **variant**: `StyleVariant` = `'primary'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L61) + +The variant of the control. + +#### Attr + +#### Inherited from + +`IgcProgressBaseComponent.variant` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-progress.ts:40](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/circular-progress.ts#L40) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`IgcProgressBaseComponent.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcComboComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcComboComponent.md new file mode 100644 index 000000000..3da9cea0d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcComboComponent.md @@ -0,0 +1,1133 @@ +# Class: IgcComboComponent\<T\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:109](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L109) + +The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection. +In contrast to the Select component, the Combo component displays all options in a virtualized list of items, +meaning the combo box can simultaneously show thousands of options, where one or more options can be selected. +Additionally, users can create custom item templates, allowing for robust data visualization. +The Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more. + +## Element + +igc-combo + +## Slot + +prefix - Renders content before the input of the combo. + +## Slot + +suffix - Renders content after the input of the combo. + +## Slot + +header - Renders a container before the list of options of the combo. + +## Slot + +footer - Renders a container after the list of options of the combo. + +## Slot + +empty - Renders content when the combo dropdown list has no items/data. + +## Slot + +helper-text - Renders content below the input of the combo. + +## Slot + +toggle-icon - Renders content inside the suffix container of the combo. + +## Slot + +clear-icon - Renders content inside the suffix container of the combo. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcChange - Emitted when the control's selection has changed. + +## Fires + +igcOpening - Emitted just before the list of options is opened. + +## Fires + +igcOpened - Emitted after the list of options is opened. + +## Fires + +igcClosing - Emitter just before the list of options is closed. + +## Fires + +igcClosed - Emitted after the list of options is closed. + +## Csspart + +label - The encapsulated text label of the combo. + +## Csspart + +input - The main input field of the combo. + +## Csspart + +native-input - The native input of the main input field of the combo. + +## Csspart + +prefix - The prefix wrapper of the combo. + +## Csspart + +suffix - The suffix wrapper of the combo. + +## Csspart + +toggle-icon - The toggle icon wrapper of the combo. + +## Csspart + +clear-icon - The clear icon wrapper of the combo. + +## Csspart + +case-icon - The case icon wrapper of the combo. + +## Csspart + +helper-text - The helper text wrapper of the combo. + +## Csspart + +search-input - The search input field of the combo. + +## Csspart + +list-wrapper - The list of options wrapper of the combo. + +## Csspart + +list - The list of options box of the combo. + +## Csspart + +item - Represents each item in the list of options of the combo. + +## Csspart + +group-header - Represents each header in the list of options of the combo. + +## Csspart + +active - Appended to the item parts list when the item is active of the combo. + +## Csspart + +selected - Appended to the item parts list when the item is selected of the combo. + +## Csspart + +checkbox - Represents each checkbox of each list item of the combo. + +## Csspart + +checkbox-indicator - Represents the checkbox indicator of each list item of the combo. + +## Csspart + +checked - Appended to checkbox parts list when checkbox is checked in the combo. + +## Csspart + +header - The container holding the header content of the combo. + +## Csspart + +footer - The container holding the footer content of the combo. + +## Csspart + +empty - The container holding the empty content of the combo. + +## Extends + +- `FormRequiredInterface`\<`this`\> & `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcComboComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Type Parameters + +### T + +`T` *extends* `object` = `any` + +## Properties + +### autofocus + +> **autofocus**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:265](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L265) + +The autofocus attribute of the control. + +#### Attr + +autofocus + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).autofocus` + +*** + +### autofocusList + +> **autofocusList**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:272](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L272) + +Focuses the list of options when the menu opens. + +#### Attr + +autofocus-list + +*** + +### caseSensitiveIcon + +> **caseSensitiveIcon**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:429](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L429) + +Enables the case sensitive search icon in the filtering input. + +#### Attr + +case-sensitive-icon + +*** + +### disableClear + +> **disableClear**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:452](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L452) + +Hides the clear button. + +#### Attr + +disable-clear + +#### Default + +```ts +false +``` + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).disabled` + +*** + +### groupHeaderTemplate + +> **groupHeaderTemplate**: `ComboItemTemplate`\<`T`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:469](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L469) + +The template used for the content of each combo group header. + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).invalid` + +*** + +### itemTemplate + +> **itemTemplate**: `ComboItemTemplate`\<`T`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:460](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L460) + +The template used for the content of each combo item. + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:292](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L292) + +The label attribute of the control. + +#### Attr + +label + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).name` + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:325](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L325) + +Sets the open state of the component. + +#### Attr + +open + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:234](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L234) + +The outlined attribute of the control. + +#### Attr + +outlined + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:299](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L299) + +The placeholder attribute of the control. + +#### Attr + +placeholder + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-combo"` = `'igc-combo'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:116](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L116) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### data + +#### Set Signature + +> **set** **data**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:214](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L214) + +The data source used to generate the list of options. + +##### Parameters + +###### value + +`T`[] + +##### Returns + +`void` + +*** + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue` + +*** + +### disableFiltering + +#### Set Signature + +> **set** **disableFiltering**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:437](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L437) + +Disables the filtering of the list of options. + +##### Attr + +disable-filtering + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### displayKey + +#### Set Signature + +> **set** **displayKey**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:358](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L358) + +The key in the data source used to display items in the list. + +##### Attr + +display-key + +##### Parameters + +###### value + +keyof `T` \| `undefined` + +##### Returns + +`void` + +*** + +### filteringOptions + +#### Set Signature + +> **set** **filteringOptions**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:412](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L412) + +An object that configures the filtering of the combo. + +##### Attr + +filtering-options + +##### Parameters + +###### value + +`Partial`\<`FilteringOptions`\<`T`\>\> + +##### Returns + +`void` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).form` + +*** + +### groupKey + +#### Set Signature + +> **set** **groupKey**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:374](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L374) + +The key in the data source used to group items in the list. + +##### Attr + +group-key + +##### Parameters + +###### value + +keyof `T` \| `undefined` + +##### Returns + +`void` + +*** + +### groupSorting + +#### Set Signature + +> **set** **groupSorting**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:392](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L392) + +Sorts the items in each group by ascending or descending order. + +##### Attr + +group-sorting + +##### Default + +```ts +asc +``` + +##### Parameters + +###### value + +`GroupingDirection` + +##### Returns + +`void` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:279](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L279) + +Gets/Sets the locale used for getting language, affecting resource strings. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### placeholderSearch + +#### Set Signature + +> **set** **placeholderSearch**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:306](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L306) + +The placeholder attribute of the search input. + +##### Attr + +placeholder-search + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).required` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:331](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L331) + +The resource strings for localization. + +##### Parameters + +###### value + +`IComboResourceStrings` + +##### Returns + +`void` + +*** + +### selection + +#### Get Signature + +> **get** **selection**(): `T`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:617](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L617) + +Returns the current selection as an array of objects as provided in the `data` source. + +##### Returns + +`T`[] + +*** + +### singleSelect + +#### Set Signature + +> **set** **singleSelect**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:242](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L242) + +Enables single selection mode and moves item filtering to the main input. + +##### Attr + +single-select + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).validity` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `ComboValue`\<`T`\>[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:515](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L515) + +Returns the current selection as a list of comma separated values, +represented by the value key, when provided. + +##### Returns + +`ComboValue`\<`T`\>[] + +#### Set Signature + +> **set** **value**(`items`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:503](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L503) + +Sets the value (selected items). The passed value must be a valid JSON array. +If the data source is an array of complex objects, the `valueKey` attribute must be set. +Note that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`. + +##### Attr + +value + +##### Example + +```tsx +<igc-combo + .data=${[ + { + id: 'BG01', + name: 'Sofia' + }, + { + id: 'BG02', + name: 'Plovdiv' + } + ]} + display-key='name' + value-key='id' + value='["BG01", "BG02"]'> + </igc-combo> +``` + +##### Parameters + +###### items + +`ComboValue`\<`T`\>[] + +##### Returns + +`void` + +*** + +### valueKey + +#### Set Signature + +> **set** **valueKey**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:344](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L344) + +The key in the data source used when selecting items. + +##### Attr + +value-key + +##### Parameters + +###### value + +keyof `T` \| `undefined` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:610](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L610) + +Removes focus from the component. + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).checkValidity` + +*** + +### deselect() + +> **deselect**(`items?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:670](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L670) + +Deselects option(s) in the list by either reference or valueKey. +If not argument is provided all items will be deselected. + +#### Parameters + +##### items? + +`Item`\<`T`\> \| `Item`\<`T`\>[] + +One or more items to be deselected. Multiple items should be passed as an array. +When valueKey is specified, the corresponding value should be used in place of the item reference. + +#### Returns + +`void` + +#### Example + +```typescript +const combo<IgcComboComponent<T>> = document.querySelector('igc-combo'); + +// Deselect one item at a time by reference when valueKey is not specified. +combo.deselect(combo.data[0]); + +// Deselect multiple items at a time by reference when valueKey is not specified. +combo.deselect([combo.data[0], combo.data[1]]); + +// Deselect one item at a time when valueKey is specified. +combo.deselect('BG01'); + +// Deselect multiple items at a time when valueKey is specified. +combo.deselect(['BG01', 'BG02']); +``` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:604](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L604) + +Sets focus on the component. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).focus` + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:761](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L761) + +Hides the list of options. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).reportValidity` + +*** + +### select() + +> **select**(`items?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:643](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L643) + +Selects option(s) in the list by either reference or valueKey. +If not argument is provided all items will be selected. + +#### Parameters + +##### items? + +`Item`\<`T`\> \| `Item`\<`T`\>[] + +One or more items to be selected. Multiple items should be passed as an array. +When valueKey is specified, the corresponding value should be used in place of the item reference. + +#### Returns + +`void` + +#### Example + +```typescript +const combo<IgcComboComponent<T>> = document.querySelector('igc-combo'); + +// Select one item at a time by reference when valueKey is not specified. +combo.select(combo.data[0]); + +// Select multiple items at a time by reference when valueKey is not specified. +combo.select([combo.data[0], combo.data[1]]); + +// Select one item at a time when valueKey is specified. +combo.select('BG01'); + +// Select multiple items at a time when valueKey is specified. +combo.select(['BG01', 'BG02']); +``` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcComboComponentEventMap, Constructor<LitElement>>( LitElement ) ).setCustomValidity` + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:741](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L741) + +Shows the list of options. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:770](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/combo/combo.ts#L770) + +Toggles the list of options. + +#### Returns + +`Promise`\<`boolean`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDatePickerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDatePickerComponent.md new file mode 100644 index 000000000..c3910b45f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDatePickerComponent.md @@ -0,0 +1,1180 @@ +# Class: IgcDatePickerComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:173](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L173) + +igc-date-picker is a feature rich component used for entering a date through manual text input or +choosing date values from a calendar dialog that pops up. + +## Element + +igc-date-picker + +## Slot + +prefix - Renders content before the input. + +## Slot + +suffix - Renders content after the input. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +bad-input - Renders content when the value is in the disabledDates ranges. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +range-overflow - Renders content when the max validation fails. + +## Slot + +range-underflow - Renders content when the min validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Slot + +title - Renders content in the calendar title. + +## Slot + +header-date - Renders content instead of the current date/range in the calendar header. + +## Slot + +clear-icon - Renders a clear icon template. + +## Slot + +calendar-icon - Renders the icon/content for the calendar picker. + +## Slot + +calendar-icon-open - Renders the icon/content for the picker in open state. + +## Slot + +actions - Renders content in the action part of the picker in open state. + +## Fires + +igcOpening - Emitted just before the calendar dropdown is shown. + +## Fires + +igcOpened - Emitted after the calendar dropdown is shown. + +## Fires + +igcClosing - Emitted just before the calendar dropdown is hidden. + +## Fires + +igcClosed - Emitted after the calendar dropdown is hidden. + +## Fires + +igcChange - Emitted when the user modifies and commits the elements's value. + +## Fires + +igcInput - Emitted when when the user types in the element. + +## Csspart + +label - The label wrapper that renders content above the target input. + +## Csspart + +container - The main wrapper that holds all main input elements. + +## Csspart + +input - The native input element. + +## Csspart + +prefix - The prefix wrapper. + +## Csspart + +suffix - The suffix wrapper. + +## Csspart + +calendar-icon - The calendar icon wrapper for closed state. + +## Csspart + +calendar-icon-open - The calendar icon wrapper for opened state. + +## Csspart + +clear-icon - The clear icon wrapper. + +## Csspart + +actions - The actions wrapper. + +## Csspart + +helper-text - The helper-text wrapper that renders content below the target input. + +## Csspart + +header - The calendar header element. + +## Csspart + +header-title - The calendar header title element. + +## Csspart + +header-date - The calendar header date element. + +## Csspart + +calendar-content - The calendar content element which contains the views and navigation elements. + +## Csspart + +navigation - The calendar navigation container element. + +## Csspart + +months-navigation - The calendar months navigation button element. + +## Csspart + +years-navigation - The calendar years navigation button element. + +## Csspart + +years-range - The calendar years range element. + +## Csspart + +navigation-buttons - The calendar navigation buttons container. + +## Csspart + +navigation-button - The calendar previous/next navigation button. + +## Csspart + +days-view-container - The calendar days view container element. + +## Csspart + +days-view - The calendar days view element. + +## Csspart + +months-view - The calendar months view element. + +## Csspart + +years-view - The calendar years view element. + +## Csspart + +days-row - The calendar days row element. + +## Csspart + +calendar-label - The calendar week header label element. + +## Csspart + +week-number - The calendar week number element. + +## Csspart + +week-number-inner - The calendar week number inner element. + +## Csspart + +date - The calendar date element. + +## Csspart + +date-inner - The calendar date inner element. + +## Csspart + +first - The calendar first selected date element in range selection. + +## Csspart + +last - The calendar last selected date element in range selection. + +## Csspart + +inactive - The calendar inactive date element. + +## Csspart + +hidden - The calendar hidden date element. + +## Csspart + +weekend - The calendar weekend date element. + +## Csspart + +range - The calendar range selected element. + +## Csspart + +special - The calendar special date element. + +## Csspart + +disabled - The calendar disabled date element. + +## Csspart + +single - The calendar single selected date element. + +## Csspart + +preview - The calendar range selection preview date element. + +## Csspart + +month - The calendar month element. + +## Csspart + +month-inner - The calendar month inner element. + +## Csspart + +year - The calendar year element. + +## Csspart + +year-inner - The calendar year inner element. + +## Csspart + +selected - The calendar selected state for element(s). Applies to date, month and year elements. + +## Csspart + +current - The calendar current state for element(s). Applies to date, month and year elements. + +## Extends + +- `FormRequiredInterface`\<`this`\> & `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcDatePickerComponentEventMap`, `this`\> & `IgcBaseComboBoxLikeComponent`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).disabled` + +*** + +### headerOrientation + +> **headerOrientation**: `CalendarHeaderOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:351](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L351) + +The orientation of the calendar header. + +#### Attr + +header-orientation + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:365](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L365) + +Determines whether the calendar hides its header. + +#### Attr + +hide-header + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:372](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L372) + +Controls the visibility of the dates that do not belong to the current month. + +#### Attr + +hide-outside-days + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).invalid` + +*** + +### keepOpenOnOutsideClick + +> **keepOpenOnOutsideClick**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L42) + +Whether the component dropdown should be kept open on clicking outside of it. + +#### Attr + +keep-open-on-outside-click + +#### Inherited from + +[`IgcDateRangePickerComponent`](IgcDateRangePickerComponent.md).[`keepOpenOnOutsideClick`](IgcDateRangePickerComponent.md#keepopenonoutsideclick) + +*** + +### keepOpenOnSelect + +> **keepOpenOnSelect**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L31) + +Whether the component dropdown should be kept open on selection. + +#### Attr + +keep-open-on-select + +#### Inherited from + +[`IgcDateRangePickerComponent`](IgcDateRangePickerComponent.md).[`keepOpenOnSelect`](IgcDateRangePickerComponent.md#keepopenonselect) + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:266](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L266) + +The label of the datepicker. + +#### Attr + +label + +*** + +### mode + +> **mode**: `PickerMode` = `'dropdown'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:273](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L273) + +Determines whether the calendar is opened in a dropdown or a modal dialog + +#### Attr + +mode + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).name` + +*** + +### nonEditable + +> **nonEditable**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:280](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L280) + +Whether to allow typing in the input. + +#### Attr + +non-editable + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:259](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L259) + +Sets the state of the datepicker dropdown. + +#### Attr + +#### Overrides + +[`IgcDropdownComponent`](IgcDropdownComponent.md).[`open`](IgcDropdownComponent.md#open) + +*** + +### orientation + +> **orientation**: `ContentOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:358](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L358) + +The orientation of the multiple months displayed in the calendar's days view. + +#### Attr + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:395](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L395) + +Whether the control will have outlined appearance. + +#### Attr + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:402](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L402) + +The placeholder attribute of the control. + +#### Attr + +*** + +### prompt + +> **prompt**: `string` = `'_'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:450](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L450) + +The prompt symbol to use for unfilled parts of the mask. + +#### Attr + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:287](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L287) + +Makes the control a readonly field. + +#### Attr + +readonly + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:416](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L416) + +Whether to show the number of the week in the calendar. + +#### Attr + +show-week-numbers + +*** + +### specialDates + +> **specialDates**: `DateRangeDescriptor`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:388](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L388) + +Gets/sets special dates. + +*** + +### visibleMonths + +> **visibleMonths**: `number` = `1` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:409](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L409) + +The number of months displayed in the calendar. + +#### Attr + +visible-months + +*** + +### weekStart + +> **weekStart**: `WeekDays` = `'sunday'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:479](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L479) + +Sets the start day of the week for the calendar. + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-date-picker"` = `'igc-date-picker'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:179](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L179) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### activeDate + +#### Set Signature + +> **set** **activeDate**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:308](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L308) + +Gets/Sets the date which is shown in the calendar picker and is highlighted. +By default it is the current date. + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).defaultValue` + +*** + +### disabledDates + +#### Set Signature + +> **set** **disabledDates**(`dates`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:376](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L376) + +Gets/sets disabled dates. + +##### Parameters + +###### dates + +`DateRangeDescriptor`[] + +##### Returns + +`void` + +*** + +### displayFormat + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:424](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L424) + +Format to display the value in when not editing. +Defaults to the locale format if not set. + +##### Attr + +display-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).form` + +*** + +### inputFormat + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:438](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L438) + +The date format to apply on the input. +Defaults to the current locale Intl.DateTimeFormat + +##### Attr + +input-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:457](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L457) + +Gets/Sets the locale used for formatting the display value. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:336](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L336) + +The maximum value required for the date picker to remain valid. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### min + +#### Set Signature + +> **set** **min**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:321](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L321) + +The minimum value required for the date picker to remain valid. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).required` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:469](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L469) + +The resource strings for localization. + +##### Parameters + +###### value + +`IgcCalendarResourceStrings` + +##### Returns + +`void` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:295](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L295) + +The value of the picker + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).willValidate` + +## Methods + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).checkValidity` + +*** + +### clear() + +> **clear**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:636](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L636) + +Clears the input part of the component of any user input + +#### Returns + +`void` + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L107) + +Hides the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).hide` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).reportValidity` + +*** + +### select() + +> **select**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:653](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L653) + +Selects the text in the input of the component + +#### Returns + +`void` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).setCustomValidity` + +*** + +### setSelectionRange() + +> **setSelectionRange**(`start`, `end`, `direction?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:659](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L659) + +Sets the text selection range in the input of the component + +#### Parameters + +##### start + +`number` + +##### end + +`number` + +##### direction? + +`SelectionRangeDirection` + +#### Returns + +`void` + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L102) + +Shows the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).show` + +*** + +### stepDown() + +> **stepDown**(`datePart?`, `delta?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:648](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L648) + +Decrements the passed in date part + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +##### delta? + +`number` + +#### Returns + +`void` + +*** + +### stepUp() + +> **stepUp**(`datePart?`, `delta?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:643](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-picker/date-picker.ts#L643) + +Increments the passed in date part + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +##### delta? + +`number` + +#### Returns + +`void` + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:112](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L112) + +Toggles the open state of the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).toggle` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDateRangePickerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDateRangePickerComponent.md new file mode 100644 index 000000000..305e3ee4c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDateRangePickerComponent.md @@ -0,0 +1,1293 @@ +# Class: IgcDateRangePickerComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:193](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L193) + +The igc-date-range-picker allows the user to select a range of dates. + +## Element + +igc-date-range-picker + +## Slot + +prefix - Renders content before the input (single input). + +## Slot + +prefix-start - Renders content before the start input (two inputs). + +## Slot + +prefix-end - Renders content before the end input (two inputs). + +## Slot + +suffix - Renders content after the input (single input). + +## Slot + +suffix-start - Renders content after the start input (single input). + +## Slot + +suffix-end - Renders content after the end input (single input). + +## Slot + +helper-text - Renders content below the input. + +## Slot + +bad-input - Renders content when the value is in the disabledDates ranges. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +range-overflow - Renders content when the max validation fails. + +## Slot + +range-underflow - Renders content when the min validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Slot + +title - Renders content in the calendar title. + +## Slot + +header-date - Renders content instead of the current date/range in the calendar header. + +## Slot + +clear-icon - Renders a clear icon template. + +## Slot + +clear-icon-start - Renders a clear icon template for the start input (two inputs). + +## Slot + +clear-icon-end - Renders a clear icon template for the end input (two inputs). + +## Slot + +calendar-icon - Renders the icon/content for the calendar picker. + +## Slot + +calendar-icon-start - Renders the icon/content for the calendar picker for the start input (two inputs). + +## Slot + +calendar-icon-end - Renders the icon/content for the calendar picker for the end input (two inputs). + +## Slot + +calendar-icon-open - Renders the icon/content for the picker in open state. + +## Slot + +calendar-icon-open-start - Renders the icon/content for the picker in open state for the start input (two inputs). + +## Slot + +calendar-icon-open-end - Renders the icon/content for the picker in open state for the end input (two inputs). + +## Slot + +actions - Renders content in the action part of the picker in open state. + +## Slot + +separator - Renders the separator element between the two inputs. + +## Fires + +igcOpening - Emitted just before the calendar dropdown is shown. + +## Fires + +igcOpened - Emitted after the calendar dropdown is shown. + +## Fires + +igcClosing - Emitted just before the calendar dropdown is hidden. + +## Fires + +igcClosed - Emitted after the calendar dropdown is hidden. + +## Fires + +igcChange - Emitted when the user modifies and commits the elements's value. + +## Fires + +igcInput - Emitted when when the user types in the element. + +## Csspart + +separator - The separator element between the two inputs. + +## Csspart + +ranges - The wrapper that renders the custom and predefined ranges. + +## Csspart + +label - The label wrapper that renders content above the target input. + +## Csspart + +calendar-icon - The calendar icon wrapper for closed state (single input). + +## Csspart + +calendar-icon-start - The calendar icon wrapper for closed state for the start input (two inputs). + +## Csspart + +calendar-icon-end - The calendar icon wrapper for closed state for the end input (two inputs). + +## Csspart + +calendar-icon-open - The calendar icon wrapper for opened state (single input). + +## Csspart + +calendar-icon-open-start - The calendar icon wrapper for opened state for the start input (two inputs). + +## Csspart + +calendar-icon-open-end - The calendar icon wrapper for opened state for the end input (two inputs). + +## Csspart + +clear-icon - The clear icon wrapper (single input). + +## Csspart + +clear-icon-start - The clear icon wrapper for the start input (two inputs). + +## Csspart + +clear-icon-end - The clear icon wrapper for the end input (two inputs). + +## Csspart + +actions - The wrapper for the custom actions area. + +## Csspart + +clear-icon - The clear icon wrapper. + +## Csspart + +input - The native input element. + +## Csspart + +prefix - The prefix wrapper. + +## Csspart + +suffix - The suffix wrapper. + +## Csspart + +helper-text - The helper-text wrapper that renders content below the target input. + +## Csspart + +header - The calendar header element. + +## Csspart + +header-title - The calendar header title element. + +## Csspart + +header-date - The calendar header date element. + +## Csspart + +calendar-content - The calendar content element which contains the views and navigation elements. + +## Csspart + +navigation - The calendar navigation container element. + +## Csspart + +months-navigation - The calendar months navigation button element. + +## Csspart + +years-navigation - The calendar years navigation button element. + +## Csspart + +years-range - The calendar years range element. + +## Csspart + +navigation-buttons - The calendar navigation buttons container. + +## Csspart + +navigation-button - The calendar previous/next navigation button. + +## Csspart + +days-view-container - The calendar days view container element. + +## Csspart + +days-view - The calendar days view element. + +## Csspart + +months-view - The calendar months view element. + +## Csspart + +years-view - The calendar years view element. + +## Csspart + +days-row - The calendar days row element. + +## Csspart + +calendar-label - The calendar week header label element. + +## Csspart + +week-number - The calendar week number element. + +## Csspart + +week-number-inner - The calendar week number inner element. + +## Csspart + +date - The calendar date element. + +## Csspart + +date-inner - The calendar date inner element. + +## Csspart + +first - The calendar first selected date element in range selection. + +## Csspart + +last - The calendar last selected date element in range selection. + +## Csspart + +inactive - The calendar inactive date element. + +## Csspart + +hidden - The calendar hidden date element. + +## Csspart + +weekend - The calendar weekend date element. + +## Csspart + +range - The calendar range selected element. + +## Csspart + +special - The calendar special date element. + +## Csspart + +disabled - The calendar disabled date element. + +## Csspart + +single - The calendar single selected date element. + +## Csspart + +preview - The calendar range selection preview date element. + +## Csspart + +month - The calendar month element. + +## Csspart + +month-inner - The calendar month inner element. + +## Csspart + +year - The calendar year element. + +## Csspart + +year-inner - The calendar year inner element. + +## Csspart + +selected - The calendar selected state for element(s). Applies to date, month and year elements. + +## Csspart + +current - The calendar current state for element(s). Applies to date, month and year elements. + +## Extends + +- `FormRequiredInterface`\<`this`\> & `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcDateRangePickerComponentEventMap`, `this`\> & `IgcBaseComboBoxLikeComponent`\<`this`\> + +## Properties + +### customRanges + +> **customRanges**: `CustomDateRange`[] = `[]` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:332](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L332) + +Renders chips with custom ranges based on the elements of the array. + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).disabled` + +*** + +### headerOrientation + +> **headerOrientation**: `ContentOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:561](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L561) + +The orientation of the calendar header. + +#### Attr + +header-orientation + +*** + +### hideHeader + +> **hideHeader**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:575](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L575) + +Determines whether the calendar hides its header. + +#### Attr + +hide-header + +*** + +### hideOutsideDays + +> **hideOutsideDays**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:602](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L602) + +Controls the visibility of the dates that do not belong to the current month. + +#### Attr + +hide-outside-days + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).invalid` + +*** + +### keepOpenOnOutsideClick + +> **keepOpenOnOutsideClick**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L42) + +Whether the component dropdown should be kept open on clicking outside of it. + +#### Attr + +keep-open-on-outside-click + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).keepOpenOnOutsideClick` + +*** + +### keepOpenOnSelect + +> **keepOpenOnSelect**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L31) + +Whether the component dropdown should be kept open on selection. + +#### Attr + +keep-open-on-select + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).keepOpenOnSelect` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:412](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L412) + +The label of the control (single input). + +#### Attr + +label + +*** + +### labelEnd + +> **labelEnd**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:426](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L426) + +The label attribute of the end input. + +#### Attr + +label-end + +*** + +### labelStart + +> **labelStart**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:419](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L419) + +The label attribute of the start input. + +#### Attr + +label-start + +*** + +### mode + +> **mode**: `PickerMode` = `'dropdown'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:339](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L339) + +Determines whether the calendar is opened in a dropdown or a modal dialog + +#### Attr + +mode + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).name` + +*** + +### nonEditable + +> **nonEditable**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:398](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L398) + +Whether to allow typing in the input. + +#### Attr + +non-editable + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L49) + +Sets the open state of the component. + +#### Attr + +#### Inherited from + +[`IgcDropdownComponent`](IgcDropdownComponent.md).[`open`](IgcDropdownComponent.md#open) + +*** + +### orientation + +> **orientation**: `ContentOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:568](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L568) + +The orientation of the multiple months displayed in the calendar's days view. + +#### Attr + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:405](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L405) + +Whether the control will have outlined appearance. + +#### Attr + +*** + +### placeholderEnd + +> **placeholderEnd**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:454](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L454) + +The placeholder attribute of the end input. + +#### Attr + +placeholder-end + +*** + +### placeholderStart + +> **placeholderStart**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:447](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L447) + +The placeholder attribute of the start input. + +#### Attr + +placeholder-start + +*** + +### prompt + +> **prompt**: `string` = `'_'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:460](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L460) + +The prompt symbol to use for unfilled parts of the mask. + +#### Attr + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:391](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L391) + +Makes the control a readonly field. + +#### Attr + +readonly + +*** + +### showWeekNumbers + +> **showWeekNumbers**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:595](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L595) + +Whether to show the number of the week in the calendar. + +#### Attr + +show-week-numbers + +*** + +### specialDates + +> **specialDates**: `DateRangeDescriptor`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:606](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L606) + +Gets/sets special dates. + +*** + +### usePredefinedRanges + +> **usePredefinedRanges**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:357](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L357) + +Whether the control will show chips with predefined ranges. + +#### Attr + +*** + +### useTwoInputs + +> **useTwoInputs**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:346](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L346) + +Use two inputs to display the date range values. Makes the input editable in dropdown mode. + +#### Attr + +use-two-inputs + +*** + +### weekStart + +> **weekStart**: `WeekDays` = `'sunday'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:610](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L610) + +Sets the start day of the week for the calendar. + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-date-range-picker"` = `'igc-date-range-picker'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:199](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L199) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### activeDate + +#### Set Signature + +> **set** **activeDate**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:582](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L582) + +Gets/Sets the date which is shown in the calendar picker and is highlighted. +By default it is the current date. + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).defaultValue` + +*** + +### disabledDates + +#### Set Signature + +> **set** **disabledDates**(`dates`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:530](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L530) + +Gets/sets disabled dates. + +##### Parameters + +###### dates + +`DateRangeDescriptor`[] + +##### Returns + +`void` + +*** + +### displayFormat + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:468](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L468) + +Format to display the value in when not editing. +Defaults to the locale format if not set. + +##### Attr + +display-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).form` + +*** + +### inputFormat + +#### Set Signature + +> **set** **inputFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:485](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L485) + +The date format to apply on the inputs. +Defaults to the current locale Intl.DateTimeFormat + +##### Attr + +input-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:364](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L364) + +The locale settings used to display the value. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:518](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L518) + +The maximum value required for the date range picker to remain valid. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### min + +#### Set Signature + +> **set** **min**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:503](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L503) + +The minimum value required for the date range picker to remain valid. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### placeholder + +#### Set Signature + +> **set** **placeholder**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:433](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L433) + +The placeholder attribute of the control (single input). + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).required` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:374](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L374) + +The resource strings of the date range picker. + +##### Parameters + +###### value + +`IgcDateRangePickerResourceStrings` + +##### Returns + +`void` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:319](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L319) + +The value of the picker + +##### Attr + +##### Parameters + +###### value + +`string` \| `DateRangeValue` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### visibleMonths + +#### Get Signature + +> **get** **visibleMonths**(): `number` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:549](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L549) + +The number of months displayed in the calendar. + +##### Attr + +visible-months + +##### Returns + +`number` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).willValidate` + +## Methods + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).checkValidity` + +*** + +### clear() + +> **clear**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:651](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L651) + +Clears the input parts of the component of any user input + +#### Returns + +`void` + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L107) + +Hides the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).hide` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).reportValidity` + +*** + +### select() + +> **select**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:661](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-range-picker/date-range-picker.ts#L661) + +Selects a date range value in the picker + +#### Parameters + +##### value + +`DateRangeValue` \| `null` + +#### Returns + +`void` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).setCustomValidity` + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L102) + +Shows the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).show` + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:112](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L112) + +Toggles the open state of the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).toggle` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDateTimeInputComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDateTimeInputComponent.md new file mode 100644 index 000000000..a9a052133 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDateTimeInputComponent.md @@ -0,0 +1,882 @@ +# Class: IgcDateTimeInputComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:92](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L92) + +A date time input is an input field that lets you set and edit the date and time in a chosen input element +using customizable display and input formats. + +## Element + +igc-date-time-input + +## Slot + +prefix - Renders content before the input. + +## Slot + +suffix - Renders content after input. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +range-overflow - Renders content when the max validation fails. + +## Slot + +range-underflow - Renders content when the min validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcInput - Emitted when the control input receives user input. + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Csspart + +container - The main wrapper that holds all main input elements. + +## Csspart + +input - The native input element. + +## Csspart + +label - The native label element. + +## Csspart + +prefix - The prefix wrapper. + +## Csspart + +suffix - The suffix wrapper. + +## Csspart + +helper-text - The helper text wrapper. + +## Extends + +- `EventEmitterInterface`\<`IgcDateTimeInputComponentEventMap`, `this`\> & `IgcMaskInputBaseComponent`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).disabled` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).invalid` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L70) + +The label for the control. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).label` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).name` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L56) + +Whether the control will have outlined appearance. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +[`IgcFileInputComponent`](IgcFileInputComponent.md).[`outlined`](IgcFileInputComponent.md#outlined) + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L63) + +The placeholder attribute of the control. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).placeholder` + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:50](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L50) + +Makes the control a readonly field. + +#### Attr + +readonly + +#### Default + +```ts +false +``` + +#### Inherited from + +[`IgcMaskInputComponent`](IgcMaskInputComponent.md).[`readOnly`](IgcMaskInputComponent.md#readonly) + +*** + +### spinDelta? + +> `optional` **spinDelta?**: `DatePartDeltas` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:241](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L241) + +Delta values used to increment or decrement each date part on step actions. +All values default to `1`. + +*** + +### spinLoop + +> **spinLoop**: `boolean` = `true` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:248](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L248) + +Sets whether to loop over the currently spun segment. + +#### Attr + +spin-loop + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-date-time-input"` = `'igc-date-time-input'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L96) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).defaultValue` + +*** + +### displayFormat + +#### Set Signature + +> **set** **displayFormat**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:226](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L226) + +Format to display the value in when not editing. +Defaults to the locale format if not set. + +##### Attr + +display-format + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).form` + +*** + +### inputFormat + +#### Set Signature + +> **set** **inputFormat**(`val`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:165](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L165) + +The date format to apply on the input. + +##### Attr + +input-format + +##### Parameters + +###### val + +`string` + +##### Returns + +`void` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:255](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L255) + +Gets/Sets the locale used for formatting the display value. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### mask + +#### Set Signature + +> **set** **mask**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:59](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L59) + +The masked pattern of the component. + +##### Attr + +##### Default + +```ts +'CCCCCCCCCC' +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).mask` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:211](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L211) + +The maximum value required for the input to remain valid. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### min + +#### Set Signature + +> **set** **min**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:197](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L197) + +The minimum value required for the input to remain valid. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +*** + +### prompt + +#### Set Signature + +> **set** **prompt**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L74) + +The prompt symbol to use for unfilled parts of the mask pattern. + +##### Attr + +##### Default + +```ts +'_' +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).prompt` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).required` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).validity` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `Date` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:188](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L188) + +The value attribute of the control. +Type varies based on the input type and can be string, Date or null. + +##### Returns + +`Date` \| `null` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:183](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L183) + +The value of the input. + +##### Attr + +##### Parameters + +###### value + +`string` \| `Date` \| `null` \| `undefined` + +##### Returns + +`void` + +#### Overrides + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).value` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L102) + +Removes focus from the control. + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).checkValidity` + +*** + +### clear() + +> **clear**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:670](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L670) + +Clears the input element of user input. + +#### Returns + +`void` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L96) + +Sets focus on the control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).focus` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).reportValidity` + +*** + +### select() + +> **select**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L90) + +Selects all the text inside the input. + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).select` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setCustomValidity` + +*** + +### setRangeText() + +> **setRangeText**(`replacement`, `start?`, `end?`, `selectMode?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:198](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L198) + +Replaces the selected text in the control and re-applies the mask + +#### Parameters + +##### replacement + +`string` + +##### start? + +`number` + +##### end? + +`number` + +##### selectMode? + +`RangeTextSelectMode` + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setRangeText` + +*** + +### setSelectionRange() + +> **setSelectionRange**(`start?`, `end?`, `direction?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:187](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L187) + +Sets the text selection range of the control + +#### Parameters + +##### start? + +`number` + +##### end? + +`number` + +##### direction? + +`SelectionRangeDirection` = `'none'` + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setSelectionRange` + +*** + +### stepDown() + +> **stepDown**(`datePart?`, `delta?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:665](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L665) + +Decrements a date/time portion. + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +##### delta? + +`number` + +#### Returns + +`void` + +*** + +### stepUp() + +> **stepUp**(`datePart?`, `delta?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:660](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-time-input.ts#L660) + +Increments a date/time portion. + +#### Parameters + +##### datePart? + +[`DatePart`](../enumerations/DatePart.md) + +##### delta? + +`number` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDialogComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDialogComponent.md new file mode 100644 index 000000000..54106318b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDialogComponent.md @@ -0,0 +1,190 @@ +# Class: IgcDialogComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L45) + +Represents a Dialog component. + +## Element + +igc-dialog + +## Fires + +igcClosing - Emitter just before the dialog is closed. Cancelable. + +## Fires + +igcClosed - Emitted after closing the dialog. + +## Slot + +- Renders content inside the default slot of the dialog. + +## Slot + +title - Renders content in the title slot of the dialog header. + +## Slot + +message - Renders the message content of the dialog. + +## Slot + +footer - Renders content in the dialog footer. + +## Csspart + +base - The base wrapper of the dialog. + +## Csspart + +title - The title container of the dialog. + +## Csspart + +footer - The footer container of the dialog. + +## Csspart + +overlay - The backdrop overlay of the dialog. + +## Extends + +- `EventEmitterInterface`\<`IgcDialogComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### closeOnOutsideClick + +> **closeOnOutsideClick**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L94) + +Whether the dialog should be closed when clicking outside of it. + +#### Attr + +close-on-outside-click + +*** + +### hideDefaultAction + +> **hideDefaultAction**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:104](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L104) + +Whether to hide the default action button for the dialog. + +When there is projected content in the `footer` slot this property +has no effect. + +#### Attr + +hide-default-action + +*** + +### keepOpenOnEscape + +> **keepOpenOnEscape**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:87](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L87) + +Whether the dialog should be kept open when pressing the 'Escape' button. + +#### Attr + +keep-open-on-escape + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:111](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L111) + +Whether the dialog is opened. + +#### Attr + +*** + +### returnValue + +> **returnValue**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:122](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L122) + +Sets the return value for the dialog. + +*** + +### title + +> **title**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:118](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L118) + +Sets the title of the dialog. + +#### Attr + +#### Overrides + +`EventEmitterMixin< IgcDialogComponentEventMap, Constructor<LitElement> >(LitElement).title` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-dialog"` = `'igc-dialog'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L49) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Methods + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:229](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L229) + +Closes the dialog. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:218](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L218) + +Opens the dialog. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:234](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dialog/dialog.ts#L234) + +Toggles the open state of the dialog. + +#### Returns + +`Promise`\<`boolean`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDividerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDividerComponent.md new file mode 100644 index 000000000..7e86f3e45 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDividerComponent.md @@ -0,0 +1,126 @@ +# Class: IgcDividerComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/divider/divider.ts:20](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/divider/divider.ts#L20) + +The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page. + +## Element + +igc-divider + +## Cssproperty + +--color - Sets the color of the divider. + +## Cssproperty + +--inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides. + +## Extends + +- `LitElement` + +## Other + +### middle + +> **middle**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/divider/divider.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/divider/divider.ts#L61) + +When set and inset is provided, it will shrink the divider line from both sides. + +#### Attr + +#### Default + +```ts +false +``` + +*** + +### type + +> **type**: `DividerType` = `'solid'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/divider/divider.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/divider/divider.ts#L70) + +Whether to render a solid or a dashed divider line. + +#### Attr + +type + +#### Default + +```ts +'solid' +``` + +*** + +### vertical + +#### Set Signature + +> **set** **vertical**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/divider/divider.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/divider/divider.ts#L44) + +Whether to render a vertical divider line. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/divider/divider.ts:22](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/divider/divider.ts#L22) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownComponent.md new file mode 100644 index 000000000..2af97789b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownComponent.md @@ -0,0 +1,422 @@ +# Class: IgcDropdownComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L78) + +Represents a DropDown component. + +## Element + +igc-dropdown + +## Fires + +igcChange - Emitted when the selected item changes. + +## Fires + +igcOpening - Emitted just before the dropdown is open. + +## Fires + +igcOpened - Emitted after the dropdown is open. + +## Fires + +igcClosing - Emitter just before the dropdown is closed. + +## Fires + +igcClosed - Emitted after closing the dropdown. + +## Slot + +target - Renders the dropdown's target element. + +## Slot + +- Renders the dropdown list items. + +## Csspart + +base - The dropdown list wrapper container. + +## Csspart + +list - The dropdown list element. + +## Extends + +- `EventEmitterInterface`\<`IgcDropdownComponentEventMap`, `this`\> & `IgcBaseComboBoxLikeComponent`\<`this`\> + +## Other + +### distance + +> **distance**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:158](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L158) + +The distance from the target element. + +#### Attr + +*** + +### flip + +> **flip**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:151](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L151) + +Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area. +When true, once enough space is detected on its preferred side, it will flip back. + +#### Attr + +*** + +### keepOpenOnOutsideClick + +> **keepOpenOnOutsideClick**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L42) + +Whether the component dropdown should be kept open on clicking outside of it. + +#### Attr + +keep-open-on-outside-click + +#### Inherited from + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).keepOpenOnOutsideClick` + +*** + +### keepOpenOnSelect + +> **keepOpenOnSelect**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L31) + +Whether the component dropdown should be kept open on selection. + +#### Attr + +keep-open-on-select + +#### Inherited from + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).keepOpenOnSelect` + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L49) + +Sets the open state of the component. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).open` + +*** + +### placement + +> **placement**: [`PopoverPlacement`](../type-aliases/PopoverPlacement.md) = `'bottom-start'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:136](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L136) + +The preferred placement of the component around the target element. + +#### Attr + +*** + +### sameWidth + +> **sameWidth**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:165](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L165) + +Whether the dropdown's width should be the same as the target's one. + +#### Attr + +same-width + +*** + +### scrollStrategy + +> **scrollStrategy**: `PopoverScrollStrategy` = `'scroll'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L143) + +Determines the behavior of the component during scrolling of the parent container. + +#### Attr + +scroll-strategy + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-dropdown"` = `'igc-dropdown'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:82](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L82) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +*** + +### groups + +#### Get Signature + +> **get** **groups**(): [`IgcDropdownGroupComponent`](IgcDropdownGroupComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:175](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L175) + +Returns the group items of the dropdown. + +##### Returns + +[`IgcDropdownGroupComponent`](IgcDropdownGroupComponent.md)[] + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:168](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L168) + +Returns the items of the dropdown. + +##### Returns + +[`IgcDropdownItemComponent`](IgcDropdownItemComponent.md)[] + +*** + +### selectedItem + +#### Get Signature + +> **get** **selectedItem**(): [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:185](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L185) + +Returns the selected item from the dropdown or null. + +##### Returns + +[`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +*** + +### clearSelection() + +> **clearSelection**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:405](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L405) + +Clears the current selection of the dropdown. + +#### Returns + +`void` + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L107) + +Hides the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).hide` + +*** + +### navigateTo() + +Navigates to the specified item. If it exists, returns the found item, otherwise - null. + +#### Call Signature + +> **navigateTo**(`value`): [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:375](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L375) + +Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### value + +`string` + +##### Returns + +[`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +#### Call Signature + +> **navigateTo**(`index`): [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:378](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L378) + +Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### index + +`number` + +##### Returns + +[`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +*** + +### select() + +Selects the specified item. If it exists, returns the found item, otherwise - null. + +#### Call Signature + +> **select**(`value`): [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:393](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L393) + +Selects the item with the specified value. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### value + +`string` + +##### Returns + +[`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +#### Call Signature + +> **select**(`index`): [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:396](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L396) + +Selects the item at the specified index. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### index + +`number` + +##### Returns + +[`IgcDropdownItemComponent`](IgcDropdownItemComponent.md) \| `null` + +*** + +### show() + +> **show**(`target?`): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:358](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L358) + +Shows the component. + +#### Parameters + +##### target? + +`string` \| `HTMLElement` + +#### Returns + +`Promise`\<`boolean`\> + +#### Overrides + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).show` + +*** + +### toggle() + +> **toggle**(`target?`): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:367](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L367) + +Toggles the open state of the component. + +#### Parameters + +##### target? + +`string` \| `HTMLElement` + +#### Returns + +`Promise`\<`boolean`\> + +#### Overrides + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).toggle` + +## lifecycle + +### disconnectedCallback() + +> **disconnectedCallback**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:238](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown.ts#L238) + +Invoked when the component is removed from the document's DOM. + +This callback is the main signal to the element that it may no longer be +used. `disconnectedCallback()` should ensure that nothing is holding a +reference to the element (such as event listeners added to nodes external +to the element), so that it is free to be garbage collected. + +```ts +disconnectedCallback() { + super.disconnectedCallback(); + window.removeEventListener('keydown', this._handleKeydown); +} +``` + +An element may be re-connected after being disconnected. + +#### Returns + +`void` + +#### Overrides + +`EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent).disconnectedCallback` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownGroupComponent.md new file mode 100644 index 000000000..a1cb5caab --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownGroupComponent.md @@ -0,0 +1,72 @@ +# Class: IgcDropdownGroupComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-group.ts:22](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-group.ts#L22) + +A container for a group of `igc-dropdown-item` components. + +## Element + +igc-dropdown-group + +## Slot + +label - Contains the group's label. + +## Slot + +- Intended to contain the items belonging to this group. + +## Csspart + +label - The native label element. + +## Extends + +- `LitElement` + +## Other + +### items + +> **items**: [`IgcDropdownItemComponent`](IgcDropdownItemComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-group.ts:37](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-group.ts#L37) + +All child `igc-dropdown-item`s. + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-group.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-group.ts#L24) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownHeaderComponent.md new file mode 100644 index 000000000..3be489c5c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownHeaderComponent.md @@ -0,0 +1,54 @@ +# Class: IgcDropdownHeaderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-header.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-header.ts#L16) + +Represents a header item in a igc-dropdown list. + +## Element + +igc-dropdown-header + +## Slot + +- Renders the header. + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-header.ts:18](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-header.ts#L18) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownItemComponent.md new file mode 100644 index 000000000..9fce9149f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcDropdownItemComponent.md @@ -0,0 +1,187 @@ +# Class: IgcDropdownItemComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-item.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-item.ts#L21) + +Represents an item in a dropdown list. + +## Element + +igc-dropdown-item + +## Slot + +prefix - Renders content before the item's main content. + +## Slot + +- Renders the item's main content. + +## Slot + +suffix - Renders content after the item's main content. + +## Csspart + +prefix - The prefix wrapper of the igc-dropdown-item. + +## Csspart + +content - The main content wrapper of the igc-dropdown-item. + +## Csspart + +suffix - The suffix wrapper of the igc-dropdown-item. + +## Extends + +- `IgcBaseOptionLikeComponent` + +## Other + +### active + +#### Set Signature + +> **set** **active**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:27](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L27) + +Whether the item is active. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.active` + +*** + +### disabled + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:40](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L40) + +Whether the item is disabled. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.disabled` + +*** + +### selected + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L54) + +Whether the item is selected. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.selected` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:71](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L71) + +The current value of the item. +If not specified, the element's text content is used. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.value` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-item.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/dropdown/dropdown-item.ts#L23) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`IgcBaseOptionLikeComponent.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcExpansionPanelComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcExpansionPanelComponent.md new file mode 100644 index 000000000..5b1c8e852 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcExpansionPanelComponent.md @@ -0,0 +1,163 @@ +# Class: IgcExpansionPanelComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L56) + +The Expansion Panel Component provides a way to display information in a toggleable way - +compact summary view containing title and description and expanded detail view containing +additional content to the summary header. + +## Element + +igc-expansion-panel + +## Slot + +- renders the default content of the panel + +## Slot + +title - renders the title of the panel's header + +## Slot + +subtitle - renders the subtitle of the panel's header + +## Slot + +indicator - renders the expand/collapsed indicator + +## Slot + +indicator-expanded - renders the expanded state of the indicator + +## Fires + +igcOpening - Emitted before opening the expansion panel. + +## Fires + +igcOpened - Emitted after the expansion panel is opened. + +## Fires + +igcClosing - Emitted before closing the expansion panel. + +## Fires + +igcClosed - Emitted after the expansion panel is closed. + +## Csspart + +header - The container of the expansion indicator, title and subtitle. + +## Csspart + +title - The title container. + +## Csspart + +subtitle - The subtitle container. + +## Csspart + +indicator - The indicator container. + +## Csspart + +content - The expansion panel's content wrapper. + +## Extends + +- `EventEmitterInterface`\<`IgcExpansionPanelComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:89](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L89) + +Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions. + +#### Attr + +*** + +### indicatorPosition + +> **indicatorPosition**: `ExpansionPanelIndicatorPosition` = `'start'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L96) + +The indicator position of the expansion panel. + +#### Attr + +indicator-position + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:82](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L82) + +Indicates whether the contents of the control should be visible. + +#### Attr + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-expansion-panel"` = `'igc-expansion-panel'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L60) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Methods + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:168](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L168) + +Hides the panel content. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:176](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L176) + +Shows the panel content. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:163](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/expansion-panel/expansion-panel.ts#L163) + +Toggles the panel open/close state. + +#### Returns + +`Promise`\<`boolean`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcFileInputComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcFileInputComponent.md new file mode 100644 index 000000000..e24d2415c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcFileInputComponent.md @@ -0,0 +1,626 @@ +# Class: IgcFileInputComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L74) + +## Element + +igc-file-input + +## Slot + +prefix - Renders content before the input. + +## Slot + +suffix - Renders content after input. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +file-selector-text - Renders content for the browse button when input type is file. + +## Slot + +file-missing-text - Renders content when input type is file and no file is chosen. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Fires + +igcCancel - Emitted when the control's file picker dialog is canceled. + +## Csspart + +container - The main wrapper that holds all main input elements. + +## Csspart + +input - The native input element. + +## Csspart + +label - The native label element. + +## Csspart + +file-names - The file names wrapper when input type is 'file'. + +## Csspart + +file-selector-button - The browse button when input type is 'file'. + +## Csspart + +prefix - The prefix wrapper. + +## Csspart + +suffix - The suffix wrapper. + +## Csspart + +helper-text - The helper text wrapper. + +## Extends + +- `EventEmitterInterface`\<`IgcFileInputComponentEventMap`, `this`\> & `IgcInputBaseComponent`\<`this`\> + +## Properties + +### accept + +> **accept**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:190](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L190) + +The accept attribute of the control. +Defines the file types as a list of comma-separated values that the file input should accept. + +#### Attr + +*** + +### autofocus + +> **autofocus**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:197](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L197) + +The autofocus attribute of the control. + +#### Attr + +#### Overrides + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).autofocus` + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).disabled` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).invalid` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L70) + +The label for the control. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).label` + +*** + +### multiple + +> **multiple**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:182](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L182) + +The multiple attribute of the control. +Used to indicate that a file input allows the user to select more than one file. + +#### Attr + +#### Default + +```ts +false +``` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).name` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L56) + +Whether the control will have outlined appearance. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).outlined` + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L63) + +The placeholder attribute of the control. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).placeholder` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-file-input"` = `'igc-file-input'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L78) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).defaultValue` + +*** + +### files + +#### Get Signature + +> **get** **files**(): `FileList` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:200](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L200) + +Returns the list of selected files. + +##### Returns + +`FileList` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).form` + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:166](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L166) + +Gets/Sets the locale used for getting language, affecting resource strings. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).required` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:153](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L153) + +The resource strings for localization. + +##### Parameters + +###### value + +`IFileInputResourceStrings` + +##### Returns + +`void` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).validity` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:145](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L145) + +The value attribute of the control. +Type varies based on the input type and can be string, Date or null. + +##### Returns + +`string` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:139](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/file-input/file-input.ts#L139) + +The value of the control. +Similar to native file input, this property is read-only and cannot be set programmatically. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).value` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L102) + +Removes focus from the control. + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).checkValidity` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L96) + +Sets focus on the control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).focus` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).reportValidity` + +*** + +### select() + +> **select**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L90) + +Selects all the text inside the input. + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).select` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcFileInputComponentEventMap, AbstractConstructor<IgcInputBaseComponent> >(IgcInputBaseComponent).setCustomValidity` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcIconButtonComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcIconButtonComponent.md new file mode 100644 index 000000000..757a364cf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcIconButtonComponent.md @@ -0,0 +1,258 @@ +# Class: IgcIconButtonComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/icon-button.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/icon-button.ts#L25) + +## Element + +igc-icon-button + +## Csspart + +base - The wrapping element of the icon button. + +## Csspart + +icon - The icon element of the icon button. + +## Extends + +- `IgcButtonBaseComponent` + +## Properties + +### collection? + +> `optional` **collection?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/icon-button.ts:47](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/icon-button.ts#L47) + +The name of the icon collection. + +#### Attr + +*** + +### download? + +> `optional` **download?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L56) + +Prompts to save the linked URL instead of navigating to it. + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.download` + +*** + +### href? + +> `optional` **href?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L49) + +The URL the button points to. + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.href` + +*** + +### mirrored + +> **mirrored**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/icon-button.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/icon-button.ts#L54) + +Whether to flip the icon button. Useful for RTL layouts. + +#### Attr + +*** + +### name? + +> `optional` **name?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/icon-button.ts:40](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/icon-button.ts#L40) + +The name of the icon. + +#### Attr + +*** + +### rel? + +> `optional` **rel?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:71](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L71) + +The relationship of the linked URL. +See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.rel` + +*** + +### target? + +> `optional` **target?**: `"_blank"` \| `"_parent"` \| `"_self"` \| `"_top"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L63) + +Where to display the linked URL, as the name for a browsing context. + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.target` + +*** + +### type + +> **type**: `"reset"` \| `"submit"` \| `"button"` = `'button'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L42) + +The type of the button. Defaults to `button`. + +#### Attr + +#### Inherited from + +`IgcButtonBaseComponent.type` + +*** + +### variant + +> **variant**: `IconButtonVariant` = `'contained'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/icon-button.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/icon-button.ts#L61) + +The visual variant of the icon button. + +#### Attr + +## Accessors + +### disabled + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L78) + +The disabled state of the component + +##### Attr + +[disabled=false] + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.disabled` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L90) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`IgcButtonBaseComponent.form` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L107) + +Removes focus from the button. + +#### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.blur` + +*** + +### click() + +> **click**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:101](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L101) + +Simulates a mouse click on the element + +#### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.click` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button-base.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button/button-base.ts#L96) + +Sets focus in the button. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`IgcButtonBaseComponent.focus` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcIconComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcIconComponent.md new file mode 100644 index 000000000..a0a3a34d8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcIconComponent.md @@ -0,0 +1,157 @@ +# Class: IgcIconComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.ts#L56) + +The icon component allows visualizing collections of pre-registered SVG icons. + +## Element + +igc-icon + +## Remarks + +The icon component renders SVG icons from registered icon collections. Icons can be: +- Loaded from the internal collection (built-in icons) +- Registered dynamically using `registerIcon` or `registerIconFromText` +- Referenced by aliases that resolve differently based on the active theme + +Icons automatically adapt to the current theme when used within an `igc-theme-provider`. +The component subscribes to the icon registry and updates automatically when icons +are registered or references are updated. + +## Examples + +```html +<!-- Use a built-in icon --> +<igc-icon name="star"></igc-icon> + +<!-- Use an icon from a specific collection --> +<igc-icon name="search" collection="material"></igc-icon> + +<!-- Mirror the icon for RTL layouts --> +<igc-icon name="arrow-forward" mirrored></igc-icon> +``` + +```typescript +// Register a custom icon +import { registerIconFromText } from 'igniteui-webcomponents'; + +const customIconSvg = '<svg viewBox="0 0 24 24">...</svg>'; +registerIconFromText('custom-icon', customIconSvg, 'my-collection'); +``` + +## Extends + +- `LitElement` + +## Other + +### collection + +> **collection**: `string` = `'default'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.ts#L107) + +The name of the registered collection for look up of icons. + +#### Attr + +collection + +#### Default + +```ts +"default" +``` + +#### Remarks + +Collections allow organizing icons into logical groups. The "default" +collection is used for most icons. +Custom collections can be created by registering icons with a specific collection name. + +*** + +### mirrored + +> **mirrored**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.ts:121](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.ts#L121) + +Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts. + +#### Attr + +mirrored + +#### Default + +```ts +false +``` + +#### Remarks + +When true, the icon is flipped horizontally using CSS transform. +This is particularly useful for directional icons (arrows, chevrons) +in right-to-left language contexts. + +*** + +### name + +> **name**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.ts:93](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.ts#L93) + +The name of the icon glyph to draw. + +#### Attr + +name + +#### Remarks + +The icon name can be: +- A direct reference to a registered icon in the specified collection +- An alias that resolves to different icons based on the current theme + +When the icon name or collection changes, the component automatically +fetches and renders the new icon. + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.ts:58](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.ts#L58) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcInputComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcInputComponent.md new file mode 100644 index 000000000..dc077ba25 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcInputComponent.md @@ -0,0 +1,861 @@ +# Class: IgcInputComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:66](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L66) + +## Element + +igc-input + +## Slot + +prefix - Renders content before the input. + +## Slot + +suffix - Renders content after input. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +type-mismatch - Renders content when the a type url/email input pattern validation fails. + +## Slot + +pattern-mismatch - Renders content when the pattern validation fails. + +## Slot + +too-long - Renders content when the maxlength validation fails. + +## Slot + +too-short - Renders content when the minlength validation fails. + +## Slot + +range-overflow - Renders content when the max validation fails. + +## Slot + +range-underflow - Renders content when the min validation fails. + +## Slot + +step-mismatch - Renders content when the step validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcInput - Emitted when the control input receives user input. + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Csspart + +container - The main wrapper that holds all main input elements. + +## Csspart + +input - The native input element. + +## Csspart + +label - The native label element. + +## Csspart + +prefix - The prefix wrapper. + +## Csspart + +suffix - The suffix wrapper. + +## Csspart + +helper-text - The helper text wrapper. + +## Extends + +- `IgcInputBaseComponent` + +## Properties + +### autocomplete + +> **autocomplete**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:231](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L231) + +The autocomplete attribute of the control. + +#### Attr + +*** + +### autofocus + +> **autofocus**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:224](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L224) + +The autofocus attribute of the control. + +#### Attr + +#### Overrides + +`IgcInputBaseComponent.autofocus` + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcInputBaseComponent.disabled` + +*** + +### inputMode + +> **inputMode**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:133](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L133) + +The input mode attribute of the control. +See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + +#### Attr + +inputmode + +#### Overrides + +`IgcInputBaseComponent.inputMode` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcInputBaseComponent.invalid` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L70) + +The label for the control. + +#### Attr + +#### Inherited from + +`IgcInputBaseComponent.label` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`IgcInputBaseComponent.name` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L56) + +Whether the control will have outlined appearance. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcInputBaseComponent.outlined` + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L63) + +The placeholder attribute of the control. + +#### Attr + +#### Inherited from + +`IgcInputBaseComponent.placeholder` + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:125](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L125) + +Makes the control a readonly field. + +#### Attr + +readonly + +#### Default + +```ts +false +``` + +*** + +### type + +> **type**: `InputType` = `'text'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:116](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L116) + +The type attribute of the control. + +#### Attr + +*** + +### validateOnly + +> **validateOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:241](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L241) + +Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for +string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs. + +#### Attr + +validate-only + +#### Default + +```ts +false +``` + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`IgcInputBaseComponent.defaultValue` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`IgcInputBaseComponent.form` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:196](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L196) + +The max attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`number` \| `undefined` + +##### Returns + +`void` + +*** + +### maxLength + +#### Set Signature + +> **set** **maxLength**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:168](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L168) + +The maximum string length of the control. + +##### Attr + +maxlength + +##### Parameters + +###### value + +`number` \| `undefined` + +##### Returns + +`void` + +*** + +### min + +#### Set Signature + +> **set** **min**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:182](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L182) + +The min attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`number` \| `undefined` + +##### Returns + +`void` + +*** + +### minLength + +#### Set Signature + +> **set** **minLength**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:154](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L154) + +The minimum string length required by the control. + +##### Attr + +minlength + +##### Parameters + +###### value + +`number` \| `undefined` + +##### Returns + +`void` + +*** + +### pattern + +#### Set Signature + +> **set** **pattern**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L140) + +The pattern attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcInputBaseComponent.required` + +*** + +### step + +#### Set Signature + +> **set** **step**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:210](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L210) + +The step attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`number` \| `undefined` + +##### Returns + +`void` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`IgcInputBaseComponent.validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`IgcInputBaseComponent.validity` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:106](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L106) + +The value attribute of the control. +Type varies based on the input type and can be string, Date or null. + +##### Returns + +`string` + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L102) + +The value of the control. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +`IgcInputBaseComponent.value` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`IgcInputBaseComponent.willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L102) + +Removes focus from the control. + +#### Returns + +`void` + +#### Inherited from + +`IgcInputBaseComponent.blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcInputBaseComponent.checkValidity` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L96) + +Sets focus on the control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`IgcInputBaseComponent.focus` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcInputBaseComponent.reportValidity` + +*** + +### select() + +> **select**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L90) + +Selects all the text inside the input. + +#### Returns + +`void` + +#### Inherited from + +`IgcInputBaseComponent.select` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`IgcInputBaseComponent.setCustomValidity` + +*** + +### setRangeText() + +> **setRangeText**(`replacement`, `start?`, `end?`, `selectMode?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:245](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L245) + +Replaces the selected text in the input. + +#### Parameters + +##### replacement + +`string` + +##### start? + +`number` + +##### end? + +`number` + +##### selectMode? + +`RangeTextSelectMode` = `'preserve'` + +#### Returns + +`void` + +*** + +### setSelectionRange() + +> **setSelectionRange**(`start?`, `end?`, `direction?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:257](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L257) + +Sets the text selection range of the control + +#### Parameters + +##### start? + +`number` + +##### end? + +`number` + +##### direction? + +`SelectionRangeDirection` = `'none'` + +#### Returns + +`void` + +*** + +### stepDown() + +> **stepDown**(`n?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:272](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L272) + +Decrements the numeric value of the input by one or more steps. + +#### Parameters + +##### n? + +`number` + +#### Returns + +`void` + +*** + +### stepUp() + +> **stepUp**(`n?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:266](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input.ts#L266) + +Increments the numeric value of the input by one or more steps. + +#### Parameters + +##### n? + +`number` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcLinearProgressComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcLinearProgressComponent.md new file mode 100644 index 000000000..92a5564a5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcLinearProgressComponent.md @@ -0,0 +1,246 @@ +# Class: IgcLinearProgressComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/linear-progress.ts:34](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/linear-progress.ts#L34) + +A linear progress indicator used to express unspecified wait time or display +the length of a process. + +## Element + +igc-linear-progress + +## Slot + +- The text area container. + +## Csspart + +track - The igc-linear-progress track area. + +## Csspart + +fill - The igc-linear-progress indicator area. + +## Csspart + +striped - The igc-linear-progress striped indicator. + +## Csspart + +label - The igc-linear-progress label. + +## Csspart + +value - The igc-linear-progress label value. + +## Csspart + +indeterminate - The igc-linear-progress indeterminate state. + +## Csspart + +primary - The igc-linear-progress indicator primary state. + +## Csspart + +danger - The igc-linear-progress indicator error state. + +## Csspart + +warning - The igc-linear-progress indicator warning state. + +## Csspart + +info - The igc-linear-progress indicator info state. + +## Csspart + +success - The igc-linear-progress indicator success state. + +## Extends + +- `IgcProgressBaseComponent` + +## Other + +### animationDuration + +> **animationDuration**: `number` = `500` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:68](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L68) + +Animation duration in milliseconds. + +#### Attr + +animation-duration + +#### Inherited from + +`IgcProgressBaseComponent.animationDuration` + +*** + +### hideLabel + +> **hideLabel**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:82](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L82) + +Shows/hides the label of the control. + +#### Attr + +hide-label + +#### Inherited from + +`IgcProgressBaseComponent.hideLabel` + +*** + +### indeterminate + +> **indeterminate**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:75](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L75) + +The indeterminate state of the control. + +#### Attr + +#### Inherited from + +`IgcProgressBaseComponent.indeterminate` + +*** + +### labelAlign + +> **labelAlign**: `LinearProgressLabelAlign` = `'top-start'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/linear-progress.ts:59](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/linear-progress.ts#L59) + +The position for the default label of the control. + +#### Attr + +label-align + +*** + +### labelFormat + +> **labelFormat**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:92](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L92) + +Format string for the default label of the control. +Placeholders: + {0} - current value of the control. + {1} - max value of the control. + +#### Attr + +label-format + +#### Inherited from + +`IgcProgressBaseComponent.labelFormat` + +*** + +### max + +> **max**: `number` = `100` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:47](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L47) + +Maximum value of the control. + +#### Attr + +#### Inherited from + +`IgcProgressBaseComponent.max` + +*** + +### striped + +> **striped**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/linear-progress.ts:52](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/linear-progress.ts#L52) + +Sets the striped look of the control. + +#### Attr + +*** + +### value + +> **value**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L54) + +The value of the control. + +#### Attr + +#### Inherited from + +`IgcProgressBaseComponent.value` + +*** + +### variant + +> **variant**: `StyleVariant` = `'primary'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/base.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/base.ts#L61) + +The variant of the control. + +#### Attr + +#### Inherited from + +`IgcProgressBaseComponent.variant` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/linear-progress.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/progress/linear-progress.ts#L36) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`IgcProgressBaseComponent.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListComponent.md new file mode 100644 index 000000000..930c6a615 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListComponent.md @@ -0,0 +1,54 @@ +# Class: IgcListComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list.ts:19](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list.ts#L19) + +Displays a collection of data items in a templatable list format. + +## Element + +igc-list + +## Slot + +- Renders the list items and list headers inside default slot. + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list.ts#L21) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListHeaderComponent.md new file mode 100644 index 000000000..b1b3dd1f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListHeaderComponent.md @@ -0,0 +1,54 @@ +# Class: IgcListHeaderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-header.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list-header.ts#L16) + +Header list item. + +## Element + +igc-list-header + +## Slot + +- Renders header list item's content. + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-header.ts:18](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list-header.ts#L18) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListItemComponent.md new file mode 100644 index 000000000..cc9c1a342 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcListItemComponent.md @@ -0,0 +1,107 @@ +# Class: IgcListItemComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-item.ts:30](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list-item.ts#L30) + +The list-item component is a container +intended for row items in the list component. + +## Element + +igc-list-item + +## Slot + +- Renders custom content. + +## Slot + +start - Renders content before all other content. + +## Slot + +end - Renders content after all other content. + +## Slot + +title - Renders the title. + +## Slot + +subtitle - Renders the subtitle. + +## Csspart + +start - The start container. + +## Csspart + +end - The end container. + +## Csspart + +content - The header and custom content container. + +## Csspart + +header - The title and subtitle container. + +## Csspart + +title - The title container. + +## Csspart + +subtitle - The subtitle container. + +## Extends + +- `LitElement` + +## Other + +### selected + +> **selected**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-item.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list-item.ts#L44) + +Defines if the list item is selected or not. + +#### Attr + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-item.ts:32](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/list-item.ts#L32) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcMaskInputComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcMaskInputComponent.md new file mode 100644 index 000000000..f7e7a825a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcMaskInputComponent.md @@ -0,0 +1,733 @@ +# Class: IgcMaskInputComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L56) + +A masked input is an input field where a developer can control user input and format the visible value, +based on configurable rules + +## Element + +igc-mask-input + +## Slot + +prefix - Renders content before the input + +## Slot + +suffix - Renders content after the input + +## Slot + +helper-text - Renders content below the input + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +bad-input - Renders content when a required mask pattern validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcInput - Emitted when the control receives user input + +## Fires + +igcChange - Emitted when an alteration of the control's value is committed by the user + +## Csspart + +container - The main wrapper that holds all main input elements + +## Csspart + +input - The native input element + +## Csspart + +label - The native label element + +## Csspart + +prefix - The prefix wrapper + +## Csspart + +suffix - The suffix wrapper + +## Csspart + +helper-text - The helper text wrapper + +## Extends + +- `IgcMaskInputBaseComponent` + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcMaskInputBaseComponent.disabled` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcMaskInputBaseComponent.invalid` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L70) + +The label for the control. + +#### Attr + +#### Inherited from + +`IgcMaskInputBaseComponent.label` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`IgcMaskInputBaseComponent.name` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L56) + +Whether the control will have outlined appearance. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcMaskInputBaseComponent.outlined` + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:63](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L63) + +The placeholder attribute of the control. + +#### Attr + +#### Inherited from + +`IgcMaskInputBaseComponent.placeholder` + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:50](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L50) + +Makes the control a readonly field. + +#### Attr + +readonly + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcMaskInputBaseComponent.readOnly` + +*** + +### valueMode + +> **valueMode**: `MaskInputValueMode` = `'raw'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:104](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L104) + +Dictates the behavior when retrieving the value of the control: + +- `raw`: Returns clean input (e.g. "5551234567") +- `withFormatting`: Returns with mask formatting (e.g. "(555) 123-4567") + +Empty values always return an empty string, regardless of the value mode. + +#### Attr + +value-mode + +#### Default + +```ts +'raw' +``` + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.defaultValue` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`IgcMaskInputBaseComponent.form` + +*** + +### mask + +#### Get Signature + +> **get** **mask**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:145](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L145) + +The masked pattern of the component. + +##### Attr + +##### Default + +```ts +'CCCCCCCCCC' +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **mask**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:138](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L138) + +The masked pattern of the component. + +##### Attr + +##### Default + +```ts +'CCCCCCCCCC' +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +`IgcMaskInputBaseComponent.mask` + +*** + +### prompt + +#### Get Signature + +> **get** **prompt**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:163](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L163) + +The prompt symbol to use for unfilled parts of the mask pattern. + +##### Attr + +##### Default + +```ts +'_' +``` + +##### Returns + +`string` + +#### Set Signature + +> **set** **prompt**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L156) + +The prompt symbol to use for unfilled parts of the mask pattern. + +##### Attr + +##### Default + +```ts +'_' +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Overrides + +`IgcMaskInputBaseComponent.prompt` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.required` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`IgcMaskInputBaseComponent.validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`IgcMaskInputBaseComponent.validity` + +*** + +### value + +#### Get Signature + +> **get** **value**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:122](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L122) + +The value attribute of the control. +Type varies based on the input type and can be string, Date or null. + +##### Returns + +`string` + +#### Set Signature + +> **set** **value**(`string`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:115](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L115) + +The value of the input. + +Regardless of the currently set `value-mode`, an empty value will return an empty string. + +##### Attr + +##### Parameters + +###### string + +`string` + +##### Returns + +`void` + +#### Overrides + +`IgcMaskInputBaseComponent.value` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`IgcMaskInputBaseComponent.willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L102) + +Removes focus from the control. + +#### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcMaskInputBaseComponent.checkValidity` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L96) + +Sets focus on the control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.focus` + +*** + +### isValidMaskPattern() + +> **isValidMaskPattern**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:256](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input.ts#L256) + +Returns whether the current masked input is valid according to the mask pattern. + +#### Returns + +`boolean` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcMaskInputBaseComponent.reportValidity` + +*** + +### select() + +> **select**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input-base.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/input/input-base.ts#L90) + +Selects all the text inside the input. + +#### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.select` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.setCustomValidity` + +*** + +### setRangeText() + +> **setRangeText**(`replacement`, `start?`, `end?`, `selectMode?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:198](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L198) + +Replaces the selected text in the control and re-applies the mask + +#### Parameters + +##### replacement + +`string` + +##### start? + +`number` + +##### end? + +`number` + +##### selectMode? + +`RangeTextSelectMode` + +#### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.setRangeText` + +*** + +### setSelectionRange() + +> **setSelectionRange**(`start?`, `end?`, `direction?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input-base.ts:187](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/mask-input/mask-input-base.ts#L187) + +Sets the text selection range of the control + +#### Parameters + +##### start? + +`number` + +##### end? + +`number` + +##### direction? + +`SelectionRangeDirection` = `'none'` + +#### Returns + +`void` + +#### Inherited from + +`IgcMaskInputBaseComponent.setSelectionRange` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerComponent.md new file mode 100644 index 000000000..90743f6b6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerComponent.md @@ -0,0 +1,137 @@ +# Class: IgcNavDrawerComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:27](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L27) + +Represents a side navigation container that provides +quick access between views. + +## Element + +igc-nav-drawer + +## Slot + +- The default slot for the igc-navigation-drawer. + +## Slot + +mini - The slot for the mini variant of the igc-navigation-drawer. + +## Csspart + +base - The base wrapper of the igc-navigation-drawer. + +## Csspart + +main - The main container of the igc-navigation-drawer. + +## Csspart + +mini - The mini container of the igc-navigation-drawer. + +## Extends + +- `LitElement` + +## Other + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L56) + +Determines whether the drawer is opened. + +#### Attr + +*** + +### position + +> **position**: `NavDrawerPosition` = `'start'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L49) + +The position of the drawer. + +#### Attr + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:84](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L84) + +Closes the drawer. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:72](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L72) + +Opens the drawer. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L96) + +Toggles the open state of the drawer. + +#### Returns + +`Promise`\<`boolean`\> + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer.ts#L29) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerHeaderItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerHeaderItemComponent.md new file mode 100644 index 000000000..0a827f4ad --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerHeaderItemComponent.md @@ -0,0 +1,54 @@ +# Class: IgcNavDrawerHeaderItemComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-header-item.ts:15](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer-header-item.ts#L15) + +A wrapper for navigation drawer's header. + +## Element + +igc-nav-drawer-header-item + +## Slot + +- Renders the header content + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-header-item.ts:17](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer-header-item.ts#L17) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerItemComponent.md new file mode 100644 index 000000000..c3e15614b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavDrawerItemComponent.md @@ -0,0 +1,94 @@ +# Class: IgcNavDrawerItemComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-item.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer-item.ts#L23) + +Represents a navigation drawer item. + +## Element + +igc-nav-drawer-item + +## Slot + +content - The content slot for the drawer item. + +## Slot + +icon - The slot for the icon of the drawer item. + +## Csspart + +base - The base wrapper of the drawer item. + +## Csspart + +icon - The icon container. + +## Csspart + +content - The content container. + +## Extends + +- `LitElement` + +## Other + +### active + +> **active**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-item.ts:52](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer-item.ts#L52) + +Determines whether the drawer is active. + +#### Attr + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-item.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer-item.ts#L45) + +Determines whether the drawer is disabled. + +#### Attr + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-item.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/nav-drawer/nav-drawer-item.ts#L25) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavbarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavbarComponent.md new file mode 100644 index 000000000..82a91c7b5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcNavbarComponent.md @@ -0,0 +1,79 @@ +# Class: IgcNavbarComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/navbar/navbar.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/navbar/navbar.ts#L24) + +A navigation bar component is used to facilitate navigation through +a series of hierarchical screens within an app. + +## Element + +igc-navbar + +## Slot + +- Renders a title inside the default slot. + +## Slot + +start - Renders left aligned icons. + +## Slot + +end - Renders right aligned action icons. + +## Csspart + +base - The base wrapper of the navigation bar. + +## Csspart + +start - The left aligned icon container. + +## Csspart + +middle - The navigation bar title container. + +## Csspart + +end - The right aligned action icons container. + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/navbar/navbar.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/navbar/navbar.ts#L26) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRadioComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRadioComponent.md new file mode 100644 index 000000000..595cd39e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRadioComponent.md @@ -0,0 +1,464 @@ +# Class: IgcRadioComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:62](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L62) + +## Element + +igc-radio + +## Slot + +- The radio label. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Csspart + +base - The radio control base wrapper. + +## Csspart + +control - The radio input control. + +## Csspart + +label - The radio control label. + +## Extends + +- `FormRequiredInterface`\<`this`\> & `FormAssociatedCheckboxElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcRadioComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).disabled` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).invalid` + +*** + +### labelPosition + +> **labelPosition**: `ToggleLabelPosition` = `'after'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:177](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L177) + +The label position of the radio control. + +#### Attr + +label-position + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).name` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-radio"` = `'igc-radio'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:67](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L67) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### checked + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:160](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L160) + +The checked state of the control. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### defaultChecked + +#### Set Signature + +> **set** **defaultChecked**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:162](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L162) + +The initial checked state of the component. + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultChecked` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).form` + +*** + +### required + +#### Get Signature + +> **get** **required**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:134](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L134) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:124](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L124) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).required` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L143) + +The value attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:231](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L231) + +Removes focus from the radio control. + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:244](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L244) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).checkValidity` + +*** + +### click() + +> **click**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:219](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L219) + +Simulates a click on the radio control. + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).click` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:225](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L225) + +Sets focus on the radio control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).focus` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:253](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L253) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).reportValidity` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:265](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio/radio.ts#L265) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedCheckboxRequiredMixin( EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>( LitElement ) ).setCustomValidity` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRadioGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRadioGroupComponent.md new file mode 100644 index 000000000..6e6733ac8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRadioGroupComponent.md @@ -0,0 +1,114 @@ +# Class: IgcRadioGroupComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio-group/radio-group.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio-group/radio-group.ts#L21) + +The igc-radio-group component unifies one or more igc-radio buttons. + +## Element + +igc-radio-group + +## Slot + +- Default slot + +## Extends + +- `LitElement` + +## Other + +### alignment + +> **alignment**: `ContentOrientation` = `'vertical'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio-group/radio-group.ts:53](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio-group/radio-group.ts#L53) + +Alignment of the radio controls inside this group. + +#### Attr + +*** + +### name + +#### Set Signature + +> **set** **name**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio-group/radio-group.ts:71](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio-group/radio-group.ts#L71) + +Gets/Sets the name for all child igc-radio components. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio-group/radio-group.ts:86](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio-group/radio-group.ts#L86) + +Gets/Sets the checked igc-radio element that matches `value` + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/radio-group/radio-group.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radio-group/radio-group.ts#L23) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRangeSliderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRangeSliderComponent.md new file mode 100644 index 000000000..14eb019d8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRangeSliderComponent.md @@ -0,0 +1,536 @@ +# Class: IgcRangeSliderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:53](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/range-slider.ts#L53) + +A range slider component used to select two numeric values within a range. + +## Element + +igc-range-slider + +## Fires + +igcInput - Emitted when a value is changed via thumb drag or keyboard interaction. + +## Fires + +igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction. + +## Csspart + +base - The base wrapper of the slider. + +## Csspart + +ticks - The ticks container. + +## Csspart + +tick-group - The tick group container. + +## Csspart + +tick - The tick element. + +## Csspart + +tick-label - The tick label element. + +## Csspart + +tick-label-inner - The inner element of the tick label. + +## Csspart + +thumbs - The thumbs container. + +## Csspart + +thumb - The thumb element. + +## Csspart + +thumb-label - The thumb tooltip label container. + +## Csspart + +thumb-label-inner - The thumb tooltip label inner element. + +## Csspart + +track - The track container. + +## Csspart + +steps - The track steps element. + +## Csspart + +inactive - The inactive element of the track. + +## Csspart + +fill - The filled part of the track. + +## Extends + +- `EventEmitterInterface`\<`IgcRangeSliderComponentEventMap`, `this`\> & `IgcSliderBaseComponent`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:175](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L175) + +Disables the UI interactions of the slider. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).disabled` + +*** + +### discreteTrack + +> **discreteTrack**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:183](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L183) + +Marks the slider track as discrete so it displays the steps. +If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`. + +#### Attr + +discrete-track + +#### Inherited from + +[`IgcSliderComponent`](IgcSliderComponent.md).[`discreteTrack`](IgcSliderComponent.md#discretetrack) + +*** + +### hidePrimaryLabels + +> **hidePrimaryLabels**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:235](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L235) + +Hides the primary tick labels. + +#### Attr + +hide-primary-labels + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).hidePrimaryLabels` + +*** + +### hideSecondaryLabels + +> **hideSecondaryLabels**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:242](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L242) + +Hides the secondary tick labels. + +#### Attr + +hide-secondary-labels + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).hideSecondaryLabels` + +*** + +### hideTooltip + +> **hideTooltip**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:190](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L190) + +Hides the thumb tooltip. + +#### Attr + +hide-tooltip + +#### Inherited from + +[`IgcSliderComponent`](IgcSliderComponent.md).[`hideTooltip`](IgcSliderComponent.md#hidetooltip) + +*** + +### locale + +> **locale**: `string` = `'en'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:249](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L249) + +The locale used to format the thumb and tick label values in the slider. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).locale` + +*** + +### primaryTicks + +> **primaryTicks**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:214](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L214) + +The number of primary ticks. It defaults to 0 which means no primary ticks are displayed. + +#### Attr + +primary-ticks + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).primaryTicks` + +*** + +### secondaryTicks + +> **secondaryTicks**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:221](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L221) + +The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed. + +#### Attr + +secondary-ticks + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).secondaryTicks` + +*** + +### thumbLabelLower + +> **thumbLabelLower**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:104](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/range-slider.ts#L104) + +The aria label for the lower thumb. + +#### Attr + +thumb-label-lower + +*** + +### thumbLabelUpper + +> **thumbLabelUpper**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:111](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/range-slider.ts#L111) + +The aria label for the upper thumb. + +#### Attr + +thumb-label-upper + +*** + +### tickLabelRotation + +> **tickLabelRotation**: `SliderTickLabelRotation` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:270](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L270) + +The degrees for the rotation of the tick labels. Defaults to 0. + +#### Attr + +tick-label-rotation + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).tickLabelRotation` + +*** + +### tickOrientation + +> **tickOrientation**: `SliderTickOrientation` = `'end'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:228](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L228) + +Changes the orientation of the ticks. + +#### Attr + +tick-orientation + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).tickOrientation` + +*** + +### valueFormat? + +> `optional` **valueFormat?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:256](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L256) + +String format used for the thumb and tick label values in the slider. + +#### Attr + +value-format + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).valueFormat` + +*** + +### valueFormatOptions? + +> `optional` **valueFormatOptions?**: `NumberFormatOptions` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:263](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L263) + +Number format options used for the thumb and tick label values in the slider. + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).valueFormatOptions` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-range-slider"` = `'igc-range-slider'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:57](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/range-slider.ts#L57) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### lower + +#### Set Signature + +> **set** **lower**(`val`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/range-slider.ts#L78) + +The current value of the lower thumb. + +##### Attr + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +*** + +### lowerBound + +#### Set Signature + +> **set** **lowerBound**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:141](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L141) + +The lower bound of the slider value. If not set, the `min` value is applied. + +##### Attr + +lower-bound + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).lowerBound` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:120](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L120) + +The maximum value of the slider scale. Defaults to 100. + +If `max` is less than `min` the call is a no-op. + +If `labels` are provided (projected), then `max` is always set to +the number of labels. + +If `upperBound` ends up being greater than than the current `max` value, +it is automatically assigned the new `max` value. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).max` + +*** + +### min + +#### Set Signature + +> **set** **min**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L91) + +The minimum value of the slider scale. Defaults to 0. + +If `min` is greater than `max` the call is a no-op. + +If `labels` are provided (projected), then `min` is always set to 0. + +If `lowerBound` ends up being less than than the current `min` value, +it is automatically assigned the new `min` value. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).min` + +*** + +### step + +#### Set Signature + +> **set** **step**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:201](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L201) + +Specifies the granularity that the value must adhere to. + +If set to 0 no stepping is implied and any value in the range is allowed. +If `labels` are provided (projected) then the step is always assumed to be 1 since it is a discrete slider. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).step` + +*** + +### upper + +#### Set Signature + +> **set** **upper**(`val`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/range-slider.ts#L91) + +The current value of the upper thumb. + +##### Attr + +##### Parameters + +###### val + +`number` + +##### Returns + +`void` + +*** + +### upperBound + +#### Set Signature + +> **set** **upperBound**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:158](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L158) + +The upper bound of the slider value. If not set, the `max` value is applied. + +##### Attr + +upper-bound + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent).upperBound` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRatingComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRatingComponent.md new file mode 100644 index 000000000..3700a73ef --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRatingComponent.md @@ -0,0 +1,559 @@ +# Class: IgcRatingComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:72](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L72) + +Rating provides insight regarding others' opinions and experiences, +and can allow the user to submit a rating of their own + +## Element + +igc-rating + +## Fires + +igcChange - Emitted when the value of the control changes. + +## Fires + +igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating. + +## Csspart + +base - The main wrapper which holds all of the rating elements. + +## Csspart + +label - The label part. + +## Csspart + +value-label - The value label part. + +## Csspart + +symbols - A wrapper for all rating symbols. + +## Csspart + +symbol - The part of the encapsulated default symbol. + +## Csspart + +full - The part of the encapsulated full symbols. + +## Csspart + +empty - The part of the encapsulated empty symbols. + +## Cssproperty + +--symbol-size - The size of the symbols. + +## Cssproperty + +--symbol-full-color - The color of the filled symbol. + +## Cssproperty + +--symbol-empty-color - The color of the empty symbol. + +## Cssproperty + +--symbol-full-filter - The filter(s) used for the filled symbol. + +## Cssproperty + +--symbol-empty-filter - The filter(s) used for the empty symbol. + +## Extends + +- `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcRatingComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### allowReset + +> **allowReset**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:244](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L244) + +Whether to reset the rating when the user selects the same value. + +#### Attr + +allow-reset + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).disabled` + +*** + +### hoverPreview + +> **hoverPreview**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:211](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L211) + +Sets hover preview behavior for the component + +#### Attr + +hover-preview + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).invalid` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:176](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L176) + +The label of the control. + +#### Attr + +label + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).name` + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:218](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L218) + +Makes the control a readonly field. + +#### Attr + +readonly + +*** + +### valueFormat + +> **valueFormat**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:186](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L186) + +A format string which sets aria-valuetext. Instances of '{0}' will be replaced +with the current value of the control and instances of '{1}' with the maximum value for the control. + +Important for screen-readers and useful for localization. + +#### Attr + +value-format + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-rating"` = `'igc-rating'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:77](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L77) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).form` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:141](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L141) + +The maximum value for the rating. + +If there are projected symbols, the maximum value will be resolved +based on the number of symbols. + +##### Attr + +max + +##### Default + +```ts +5 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### single + +#### Set Signature + +> **set** **single**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:226](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L226) + +Toggles single selection visual mode. + +##### Attr + +single + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### step + +#### Set Signature + +> **set** **step**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:163](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L163) + +The minimum value change allowed. + +Valid values are in the interval between 0 and 1 inclusive. + +##### Attr + +step + +##### Default + +```ts +1 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`number`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:195](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L195) + +The current value of the component + +##### Attr + +value + +##### Default + +```ts +0 +``` + +##### Parameters + +###### number + +`number` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).willValidate` + +## Methods + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).checkValidity` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).reportValidity` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).setCustomValidity` + +*** + +### stepDown() + +> **stepDown**(`n?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:367](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L367) + +Decrements the value of the control by `n` steps multiplied by +the step factor. + +#### Parameters + +##### n? + +`number` = `1` + +#### Returns + +`void` + +*** + +### stepUp() + +> **stepUp**(`n?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:359](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating.ts#L359) + +Increments the value of the control by `n` steps multiplied by the +step factor. + +#### Parameters + +##### n? + +`number` = `1` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRatingSymbolComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRatingSymbolComponent.md new file mode 100644 index 000000000..87a53eefb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRatingSymbolComponent.md @@ -0,0 +1,103 @@ +# Class: IgcRatingSymbolComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating-symbol.ts:19](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating-symbol.ts#L19) + +Used when a custom icon/symbol/element needs to be passed to the igc-rating component. + +## Element + +igc-rating-symbol + +## Slot + +- Default slot for projected full symbols/icons. + +## Slot + +empty - Default slot for projected empty symbols/icons. + +## Csspart + +symbol - The symbol wrapping container. + +## Csspart + +full - The full symbol wrapping container. + +## Csspart + +empty - The empty symbol wrapping container. + +## Extends + +- `LitElement` + +## lifecycle + +### connectedCallback() + +> **connectedCallback**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating-symbol.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating-symbol.ts#L28) + +Invoked when the component is added to the document's DOM. + +In `connectedCallback()` you should setup tasks that should only occur when +the element is connected to the document. The most common of these is +adding event listeners to nodes external to the element, like a keydown +event handler added to the window. + +```ts +connectedCallback() { + super.connectedCallback(); + addEventListener('keydown', this._handleKeydown); +} +``` + +Typically, anything done in `connectedCallback()` should be undone when the +element is disconnected, in `disconnectedCallback()`. + +#### Returns + +`void` + +#### Overrides + +`LitElement.connectedCallback` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating-symbol.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/rating/rating-symbol.ts#L21) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRippleComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRippleComponent.md new file mode 100644 index 000000000..9bb89b950 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcRippleComponent.md @@ -0,0 +1,51 @@ +# Class: IgcRippleComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/ripple/ripple.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/ripple/ripple.ts#L36) + +A ripple can be applied to an element to represent +interactive surface. + +## Element + +igc-ripple + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/ripple/ripple.ts:38](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/ripple/ripple.ts#L38) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectComponent.md new file mode 100644 index 000000000..79897580e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectComponent.md @@ -0,0 +1,788 @@ +# Class: IgcSelectComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:119](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L119) + +Represents a control that provides a menu of options. + +## Element + +igc-select + +## Slot + +- Renders the list of select items. + +## Slot + +prefix - Renders content before the input. + +## Slot + +suffix - Renders content after input. + +## Slot + +header - Renders a container before the list of options. + +## Slot + +footer - Renders a container after the list of options. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +toggle-icon - Renders content inside the suffix container. + +## Slot + +toggle-icon-expanded - Renders content for the toggle icon when the component is in open state. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Fires + +igcOpening - Emitted just before the list of options is opened. + +## Fires + +igcOpened - Emitted after the list of options is opened. + +## Fires + +igcClosing - Emitter just before the list of options is closed. + +## Fires + +igcClosed - Emitted after the list of options is closed. + +## Csspart + +list - The list wrapping container for the items of the igc-select. + +## Csspart + +input - The encapsulated igc-input of the igc-select. + +## Csspart + +label - The encapsulated text label of the igc-select. + +## Csspart + +prefix - The prefix wrapper of the input of the igc-select. + +## Csspart + +suffix - The suffix wrapper of the input of the igc-select. + +## Csspart + +toggle-icon - The toggle icon wrapper of the igc-select. + +## Csspart + +helper-text - The helper text wrapper of the igc-select. + +## Extends + +- `FormRequiredInterface`\<`this`\> & `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcSelectComponentEventMap`, `this`\> & `IgcBaseComboBoxLikeComponent`\<`this`\> + +## Properties + +### autofocus + +> **autofocus**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:218](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L218) + +The autofocus attribute of the control. + +#### Attr + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).autofocus` + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).disabled` + +*** + +### distance + +> **distance**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:225](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L225) + +The distance of the select dropdown from its input. + +#### Attr + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).invalid` + +*** + +### keepOpenOnOutsideClick + +> **keepOpenOnOutsideClick**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L42) + +Whether the component dropdown should be kept open on clicking outside of it. + +#### Attr + +keep-open-on-outside-click + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).keepOpenOnOutsideClick` + +*** + +### keepOpenOnSelect + +> **keepOpenOnSelect**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L31) + +Whether the component dropdown should be kept open on selection. + +#### Attr + +keep-open-on-select + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).keepOpenOnSelect` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:232](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L232) + +The label attribute of the control. + +#### Attr + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).name` + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:49](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L49) + +Sets the open state of the component. + +#### Attr + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).open` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:211](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L211) + +The outlined attribute of the control. + +#### Attr + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:239](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L239) + +The placeholder attribute of the control. + +#### Attr + +*** + +### placement + +> **placement**: [`PopoverPlacement`](../type-aliases/PopoverPlacement.md) = `'bottom-start'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:245](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L245) + +The preferred placement of the select dropdown around its input. + +#### Attr + +*** + +### scrollStrategy + +> **scrollStrategy**: `PopoverScrollStrategy` = `'scroll'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:252](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L252) + +Determines the behavior of the component during scrolling of the parent container. + +#### Attr + +scroll-strategy + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-select"` = `'igc-select'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:125](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L125) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).defaultValue` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).form` + +*** + +### groups + +#### Get Signature + +> **get** **groups**(): [`IgcSelectGroupComponent`](IgcSelectGroupComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:262](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L262) + +Returns the groups of the igc-select component. + +##### Returns + +[`IgcSelectGroupComponent`](IgcSelectGroupComponent.md)[] + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgcSelectItemComponent`](IgcSelectItemComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:255](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L255) + +Returns the items of the igc-select component. + +##### Returns + +[`IgcSelectItemComponent`](IgcSelectItemComponent.md)[] + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).required` + +*** + +### selectedItem + +#### Get Signature + +> **get** **selectedItem**(): [`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:269](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L269) + +Returns the selected item from the dropdown or null. + +##### Returns + +[`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:196](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L196) + +The value attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:564](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L564) + +Removes focus from the component. + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).checkValidity` + +*** + +### clearSelection() + +> **clearSelection**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:607](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L607) + +Resets the current value and selection of the component. + +#### Returns + +`void` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:558](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L558) + +Sets focus on the component. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).focus` + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L107) + +Hides the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).hide` + +*** + +### navigateTo() + +Navigates to the specified item. If it exists, returns the found item, otherwise - null. + +#### Call Signature + +> **navigateTo**(`value`): [`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:577](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L577) + +Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### value + +`string` + +##### Returns + +[`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +#### Call Signature + +> **navigateTo**(`index`): [`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:580](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L580) + +Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### index + +`number` + +##### Returns + +[`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:569](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L569) + +Checks the validity of the control and moves the focus to it if it is not valid. + +#### Returns + +`boolean` + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).reportValidity` + +*** + +### select() + +Selects the specified item. If it exists, returns the found item, otherwise - null. + +#### Call Signature + +> **select**(`value`): [`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:595](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L595) + +Selects the item with the specified value. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### value + +`string` + +##### Returns + +[`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +#### Call Signature + +> **select**(`index`): [`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:598](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select.ts#L598) + +Selects the item at the specified index. If it exists, returns the found item, otherwise - null. + +##### Parameters + +###### index + +`number` + +##### Returns + +[`IgcSelectItemComponent`](IgcSelectItemComponent.md) \| `null` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).setCustomValidity` + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:102](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L102) + +Shows the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).show` + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/combo-box.ts:112](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/combo-box.ts#L112) + +Toggles the open state of the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcBaseComboBoxLikeComponent> >(IgcBaseComboBoxLikeComponent) ).toggle` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectGroupComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectGroupComponent.md new file mode 100644 index 000000000..0789169ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectGroupComponent.md @@ -0,0 +1,82 @@ +# Class: IgcSelectGroupComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-group.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-group.ts#L25) + +## Element + +igc-select-group - A container for a group of `igc-select-item` components. + +## Slot + +label - Contains the group's label. + +## Slot + +- Intended to contain the items belonging to this group. + +## Csspart + +label - The native label element. + +## Extends + +- `LitElement` + +## Other + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-group.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-group.ts#L74) + +Whether the group item and all its children are disabled. + +#### Attr + +*** + +### items + +> **items**: [`IgcSelectItemComponent`](IgcSelectItemComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-group.ts:47](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-group.ts#L47) + +All child `igc-select-item`s. + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-group.ts:27](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-group.ts#L27) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectHeaderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectHeaderComponent.md new file mode 100644 index 000000000..5f6a2ed3d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectHeaderComponent.md @@ -0,0 +1,54 @@ +# Class: IgcSelectHeaderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-header.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-header.ts#L16) + +Represents a header item in an igc-select component. + +## Element + +igc-select-header + +## Slot + +- Renders the header. + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-header.ts:18](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-header.ts#L18) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectItemComponent.md new file mode 100644 index 000000000..0af8f014b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSelectItemComponent.md @@ -0,0 +1,201 @@ +# Class: IgcSelectItemComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-item.ts:22](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-item.ts#L22) + +Represents an item in a select list. + +## Element + +igc-select-item + +## Slot + +- Renders the all content bar the prefix and suffix. + +## Slot + +prefix - Renders content before the main content area. + +## Slot + +suffix - Renders content after the main content area. + +## Csspart + +prefix - The prefix wrapper of the igc-select-item. + +## Csspart + +content - The main content wrapper of the igc-select-item. + +## Csspart + +suffix - The suffix wrapper of the igc-select-item. + +## Extends + +- `IgcBaseOptionLikeComponent` + +## Other + +### active + +#### Get Signature + +> **get** **active**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-item.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-item.ts#L41) + +Whether the item is active. + +##### Attr + +##### Returns + +`boolean` + +#### Set Signature + +> **set** **active**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-item.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-item.ts#L36) + +Whether the item is disabled. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Overrides + +`IgcBaseOptionLikeComponent.active` + +*** + +### disabled + +#### Set Signature + +> **set** **disabled**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:40](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L40) + +Whether the item is disabled. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.disabled` + +*** + +### selected + +#### Set Signature + +> **set** **selected**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L54) + +Whether the item is selected. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.selected` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/option.ts:71](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/option.ts#L71) + +The current value of the item. +If not specified, the element's text content is used. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgcBaseOptionLikeComponent.value` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-item.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/select/select-item.ts#L24) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`IgcBaseOptionLikeComponent.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSliderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSliderComponent.md new file mode 100644 index 000000000..b32039244 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSliderComponent.md @@ -0,0 +1,741 @@ +# Class: IgcSliderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider.ts:46](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider.ts#L46) + +A slider component used to select numeric value within a range. + +## Element + +igc-slider + +## Fires + +igcInput - Emitted when a value is changed via thumb drag or keyboard interaction. + +## Fires + +igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction. + +## Csspart + +base - The base wrapper of the slider. + +## Csspart + +ticks - The ticks container. + +## Csspart + +tick-group - The tick group container. + +## Csspart + +tick - The tick element. + +## Csspart + +tick-label - The tick label element. + +## Csspart + +tick-label-inner - The inner element of the tick label. + +## Csspart + +thumbs - The thumbs container. + +## Csspart + +thumb - The thumb element. + +## Csspart + +thumb-label - The thumb tooltip label container. + +## Csspart + +thumb-label-inner - The thumb tooltip label inner element. + +## Csspart + +track - The track container. + +## Csspart + +steps - The track steps element. + +## Csspart + +inactive - The inactive element of the track. + +## Csspart + +fill - The filled part of the track. + +## Extends + +- `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcSliderComponentEventMap`, `this`\> & `IgcSliderBaseComponent`\<`this`\> + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +[`IgcCheckboxComponent`](IgcCheckboxComponent.md).[`disabled`](IgcCheckboxComponent.md#disabled) + +*** + +### discreteTrack + +> **discreteTrack**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:183](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L183) + +Marks the slider track as discrete so it displays the steps. +If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`. + +#### Attr + +discrete-track + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).discreteTrack` + +*** + +### hidePrimaryLabels + +> **hidePrimaryLabels**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:235](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L235) + +Hides the primary tick labels. + +#### Attr + +hide-primary-labels + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).hidePrimaryLabels` + +*** + +### hideSecondaryLabels + +> **hideSecondaryLabels**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:242](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L242) + +Hides the secondary tick labels. + +#### Attr + +hide-secondary-labels + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).hideSecondaryLabels` + +*** + +### hideTooltip + +> **hideTooltip**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:190](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L190) + +Hides the thumb tooltip. + +#### Attr + +hide-tooltip + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).hideTooltip` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).invalid` + +*** + +### locale + +> **locale**: `string` = `'en'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:249](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L249) + +The locale used to format the thumb and tick label values in the slider. + +#### Attr + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).locale` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).name` + +*** + +### primaryTicks + +> **primaryTicks**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:214](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L214) + +The number of primary ticks. It defaults to 0 which means no primary ticks are displayed. + +#### Attr + +primary-ticks + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).primaryTicks` + +*** + +### secondaryTicks + +> **secondaryTicks**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:221](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L221) + +The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed. + +#### Attr + +secondary-ticks + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).secondaryTicks` + +*** + +### tickLabelRotation + +> **tickLabelRotation**: `SliderTickLabelRotation` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:270](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L270) + +The degrees for the rotation of the tick labels. Defaults to 0. + +#### Attr + +tick-label-rotation + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).tickLabelRotation` + +*** + +### tickOrientation + +> **tickOrientation**: `SliderTickOrientation` = `'end'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:228](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L228) + +Changes the orientation of the ticks. + +#### Attr + +tick-orientation + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).tickOrientation` + +*** + +### valueFormat? + +> `optional` **valueFormat?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:256](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L256) + +String format used for the thumb and tick label values in the slider. + +#### Attr + +value-format + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).valueFormat` + +*** + +### valueFormatOptions? + +> `optional` **valueFormatOptions?**: `NumberFormatOptions` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:263](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L263) + +Number format options used for the thumb and tick label values in the slider. + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).valueFormatOptions` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-slider"` = `'igc-slider'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider.ts:52](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider.ts#L52) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).defaultValue` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).form` + +*** + +### lowerBound + +#### Set Signature + +> **set** **lowerBound**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:141](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L141) + +The lower bound of the slider value. If not set, the `min` value is applied. + +##### Attr + +lower-bound + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).lowerBound` + +*** + +### max + +#### Set Signature + +> **set** **max**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:120](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L120) + +The maximum value of the slider scale. Defaults to 100. + +If `max` is less than `min` the call is a no-op. + +If `labels` are provided (projected), then `max` is always set to +the number of labels. + +If `upperBound` ends up being greater than than the current `max` value, +it is automatically assigned the new `max` value. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).max` + +*** + +### min + +#### Set Signature + +> **set** **min**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L91) + +The minimum value of the slider scale. Defaults to 0. + +If `min` is greater than `max` the call is a no-op. + +If `labels` are provided (projected), then `min` is always set to 0. + +If `lowerBound` ends up being less than than the current `min` value, +it is automatically assigned the new `min` value. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).min` + +*** + +### step + +#### Set Signature + +> **set** **step**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:201](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L201) + +Specifies the granularity that the value must adhere to. + +If set to 0 no stepping is implied and any value in the range is allowed. +If `labels` are provided (projected) then the step is always assumed to be 1 since it is a discrete slider. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).step` + +*** + +### upperBound + +#### Set Signature + +> **set** **upperBound**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-base.ts:158](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-base.ts#L158) + +The upper bound of the slider value. If not set, the `max` value is applied. + +##### Attr + +upper-bound + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).upperBound` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider.ts#L70) + +The current value of the component. + +##### Attr + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).willValidate` + +## Methods + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).checkValidity` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).reportValidity` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ).setCustomValidity` + +*** + +### stepDown() + +> **stepDown**(`stepDecrement?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider.ts:132](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider.ts#L132) + +Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1. + +#### Parameters + +##### stepDecrement? + +`number` = `1` + +Optional step decrement. If no parameter is passed, it defaults to 1. + +#### Returns + +`void` + +*** + +### stepUp() + +> **stepUp**(`stepIncrement?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider.ts:124](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider.ts#L124) + +Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1. + +#### Parameters + +##### stepIncrement? + +`number` = `1` + +Optional step increment. If no parameter is passed, it defaults to 1. + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSliderLabelComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSliderLabelComponent.md new file mode 100644 index 000000000..b5b15833d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSliderLabelComponent.md @@ -0,0 +1,56 @@ +# Class: IgcSliderLabelComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-label.ts:15](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-label.ts#L15) + +Allows formatting the values of the slider as string values. +The text content of the slider labels is used for thumb and tick labels. + +## Remarks + +When slider labels are provided, the `min`, `max` and `step` properties are automatically +calculated so that they do not allow values that do not map to the provided labels. + +## Element + +igc-slider-label + +## Extends + +- `LitElement` + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-label.ts:17](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/slider/slider-label.ts#L17) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSnackbarComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSnackbarComponent.md new file mode 100644 index 000000000..db8f9f90c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSnackbarComponent.md @@ -0,0 +1,190 @@ +# Class: IgcSnackbarComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/snackbar/snackbar.ts:35](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/snackbar/snackbar.ts#L35) + +A snackbar component is used to provide feedback about an operation +by showing a brief message at the bottom of the screen. + +## Element + +igc-snackbar + +## Slot + +- Default slot to render the snackbar content. + +## Slot + +action - Renders the action part of the snackbar. Usually an interactive element (button) + +## Fires + +igcAction - Emitted when the snackbar action button is clicked. + +## Csspart + +base - The base wrapper of the snackbar component. + +## Csspart + +message - The snackbar message. + +## Csspart + +action - The default snackbar action button. + +## Csspart + +action-container - The area holding the actions. + +## Extends + +- `EventEmitterInterface`\<`IgcSnackbarComponentEventMap`, `this`\> & `IgcBaseAlertLikeComponent`\<`this`\> + +## Properties + +### actionText + +> **actionText**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/snackbar/snackbar.ts:58](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/snackbar/snackbar.ts#L58) + +The snackbar action button. + +#### Attr + +action-text + +*** + +### displayTime + +> **displayTime**: `number` = `4000` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L28) + +Determines the duration in ms in which the component will be visible. + +#### Attr + +display-time + +#### Inherited from + +[`IgcToastComponent`](IgcToastComponent.md).[`displayTime`](IgcToastComponent.md#displaytime) + +*** + +### keepOpen + +> **keepOpen**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:35](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L35) + +Determines whether the component should close after the `displayTime` is over. + +#### Attr + +keep-open + +#### Inherited from + +[`IgcToastComponent`](IgcToastComponent.md).[`keepOpen`](IgcToastComponent.md#keepopen) + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L21) + +Whether the component is in shown state. + +#### Attr + +#### Inherited from + +[`IgcToastComponent`](IgcToastComponent.md).[`open`](IgcToastComponent.md#open) + +*** + +### position + +> **position**: `AbsolutePosition` = `'bottom'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L42) + +Sets the position of the component in the viewport. + +#### Attr + +#### Inherited from + +`EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent).position` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-snackbar"` = `'igc-snackbar'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/snackbar/snackbar.ts:39](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/snackbar/snackbar.ts#L39) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Methods + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L94) + +Closes the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent).hide` + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:89](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L89) + +Opens the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent).show` + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:99](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L99) + +Toggles the open state of the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`EventEmitterMixin< IgcSnackbarComponentEventMap, AbstractConstructor<IgcBaseAlertLikeComponent> >(IgcBaseAlertLikeComponent).toggle` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSplitterComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSplitterComponent.md new file mode 100644 index 000000000..1bbb82a0f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSplitterComponent.md @@ -0,0 +1,414 @@ +# Class: IgcSplitterComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:132](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L132) + +The `igc-splitter` component provides a resizable split-pane layout that divides the view +into two panels — *start* and *end* — separated by a draggable bar. + +Panels can be resized by dragging the bar, using keyboard shortcuts, or collapsed/expanded +using the built-in collapse buttons or the programmatic `toggle()` API. +Nested splitters are supported for more complex layouts. + +## Examples + +```html +<!-- Basic horizontal splitter --> +<igc-splitter> + <div slot="start">Start panel</div> + <div slot="end">End panel</div> +</igc-splitter> +``` + +```html +<!-- Vertical splitter with size constraints --> +<igc-splitter orientation="vertical" start-min-size="100px" end-min-size="100px"> + <div slot="start">Top panel</div> + <div slot="end">Bottom panel</div> +</igc-splitter> +``` + +```html +<!-- Nested splitters for a multi-pane layout --> +<igc-splitter style="height: 600px;"> + <igc-splitter slot="start" orientation="vertical"> + <div slot="start">Top left</div> + <div slot="end">Bottom left</div> + </igc-splitter> + <div slot="end">Right panel</div> +</igc-splitter> +``` + +```ts +// Programmatically collapse/expand a pane +const splitter = document.querySelector('igc-splitter'); +splitter.toggle('start'); // collapse start pane +splitter.toggle('start'); // expand start pane +``` + +## Keyboard interactions + +When the splitter bar is focused: + +| Key | Action | +|---|---| +| `Arrow Left` / `Arrow Right` | Resize panes (horizontal orientation) | +| `Arrow Up` / `Arrow Down` | Resize panes (vertical orientation) | +| `Home` | Snap start pane to its minimum size | +| `End` | Snap start pane to its maximum size | +| `Ctrl + Arrow Left` / `Ctrl + Arrow Up` | Collapse or expand the start pane | +| `Ctrl + Arrow Right` / `Ctrl + Arrow Down` | Collapse or expand the end pane | + +## Element + +igc-splitter + +## Fires + +igcResizeStart - Emitted once when a resize operation begins (pointer drag or keyboard). + +## Fires + +igcResizing - Emitted continuously while a pane is being resized. + +## Fires + +igcResizeEnd - Emitted once when a resize operation completes. + +## Slot + +start - Content projected into the start (left/top) panel. + +## Slot + +end - Content projected into the end (right/bottom) panel. + +## Csspart + +splitter-bar - The resizable bar element between the two panels. + +## Csspart + +drag-handle - The drag handle icon/element on the splitter bar. + +## Csspart + +start-pane - The container for the start panel content. + +## Csspart + +end-pane - The container for the end panel content. + +## Csspart + +start-collapse-btn - The button to collapse the start panel. + +## Csspart + +end-collapse-btn - The button to collapse the end panel. + +## Csspart + +start-expand-btn - The button to expand the start panel when collapsed. + +## Csspart + +end-expand-btn - The button to expand the end panel when collapsed. + +## Extends + +- `EventEmitterInterface`\<`IgcSplitterComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### disableCollapse + +> **disableCollapse**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:208](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L208) + +When true, prevents the user from collapsing either pane. +This also hides the expand/collapse buttons on the splitter bar. + +#### Attr + +disable-collapse + +#### Default + +```ts +false +``` + +*** + +### disableResize + +> **disableResize**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:218](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L218) + +When true, prevents the user from resizing the panes by dragging the splitter bar or using keyboard shortcuts. +This also hides the drag handle on the splitter bar. + +#### Attr + +disable-resize + +#### Default + +```ts +false +``` + +*** + +### hideCollapseButtons + +> **hideCollapseButtons**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:234](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L234) + +When true, hides the expand/collapse buttons on the splitter bar. + +Note that the buttons will also be hidden if `disable-collapse` is true or +if a pane is currently collapsed. + +#### Attr + +hide-collapse-buttons + +#### Default + +```ts +false +``` + +*** + +### hideDragHandle + +> **hideDragHandle**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:249](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L249) + +When true, hides the drag handle on the splitter bar. + +Note that the drag handle will also be hidden if `disable-resize` is true. + +#### Attr + +hide-drag-handle + +#### Default + +```ts +false +``` + +*** + +### orientation + +> **orientation**: `SplitterOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:198](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L198) + +The orientation of the splitter, which determines the direction of resizing and collapsing. + +#### Attr + +orientation + +#### Default + +```ts +'horizontal' +``` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-splitter"` = `'igc-splitter'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:136](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L136) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### endMaxSize + +#### Set Signature + +> **set** **endMaxSize**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:299](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L299) + +The maximum size of the end pane. + +##### Attr + +end-max-size + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### endMinSize + +#### Set Signature + +> **set** **endMinSize**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:271](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L271) + +The minimum size of the end pane. + +##### Attr + +end-min-size + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### endSize + +#### Set Signature + +> **set** **endSize**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:327](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L327) + +The size of the end pane. + +##### Attr + +end-size + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### startMaxSize + +#### Set Signature + +> **set** **startMaxSize**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:285](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L285) + +The maximum size of the start pane. + +##### Attr + +start-max-size + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### startMinSize + +#### Set Signature + +> **set** **startMinSize**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:257](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L257) + +The minimum size of the start pane. + +##### Attr + +start-min-size + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### startSize + +#### Set Signature + +> **set** **startSize**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:313](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L313) + +The size of the start pane. + +##### Attr + +start-size + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +## Methods + +### toggle() + +> **toggle**(`position`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:460](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/splitter/splitter.ts#L460) + +Toggles the collapsed state of the specified pane. + +#### Parameters + +##### position + +`PanePosition` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcStepComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcStepComponent.md new file mode 100644 index 000000000..8f2a524c2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcStepComponent.md @@ -0,0 +1,285 @@ +# Class: IgcStepComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:92](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L92) + +A step component used within an `igc-stepper` to represent an individual step in a wizard-like workflow. + +## Remarks + +Each step has a header (with an indicator, title, and subtitle) and a content area. +Steps can be marked as `active`, `complete`, `disabled`, `optional`, or `invalid` +to control their appearance and behavior within the stepper. + +Custom indicators can be provided via the `indicator` slot, and the content area +is rendered in the default slot. + +## Element + +igc-step + +## Slot + +- Renders the content of the step. + +## Slot + +indicator - Renders the indicator of the step. By default, it displays the step index + 1. + +## Slot + +title - Renders the title of the step. + +## Slot + +subtitle - Renders the subtitle of the step. + +## Csspart + +header-container - Wrapper of the step's `header` and its separators. + +## Csspart + +disabled - Indicates a disabled state. Applies to `header-container`. + +## Csspart + +complete-start - Indicates a complete state of the current step. Applies to `header-container`. + +## Csspart + +complete-end - Indicates a complete state of the previous step. Applies to `header-container`. + +## Csspart + +optional - Indicates an optional state. Applies to `header-container`. + +## Csspart + +invalid - Indicates an invalid state. Applies to `header-container`. + +## Csspart + +top - Indicates that the title should be above the indicator. Applies to `header-container`. + +## Csspart + +bottom - Indicates that the title should be below the indicator. Applies to `header-container`. + +## Csspart + +start - Indicates that the title should be before the indicator. Applies to `header-container`. + +## Csspart + +end - Indicates that the title should be after the indicator. Applies to `header-container`. + +## Csspart + +header - Wrapper of the step's `indicator` and `text`. + +## Csspart + +indicator - The indicator of the step. + +## Csspart + +text - Wrapper of the step's `title` and `subtitle`. + +## Csspart + +empty - Indicates that no title and subtitle have been provided to the step. Applies to `text`. + +## Csspart + +title - The title of the step. + +## Csspart + +subtitle - The subtitle of the step. + +## Csspart + +body - Wrapper of the step's `content`. + +## Csspart + +content - The step's `content`. + +## Examples + +```html +<igc-step> + <igc-icon slot="indicator" name="home"></igc-icon> + <span slot="title">Home</span> + <span slot="subtitle">Return to the home page</span> + <p>Welcome! This is the first step.</p> +</igc-step> +``` + +```html +<igc-step complete> + <span slot="title">Completed step</span> + <p>This step has been completed.</p> +</igc-step> + +<igc-step active invalid> + <span slot="title">Current step</span> + <p>This step has validation errors.</p> +</igc-step> + +<igc-step disabled> + <span slot="title">Disabled step</span> + <p>This step is not accessible.</p> +</igc-step> +``` + +## Extends + +- `LitElement` + +## Other + +### active + +> **active**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:210](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L210) + +Whether the step is active. + +Active steps are styled with an active state and their content is visible. + +#### Attr + +active + +#### Default + +```ts +false +``` + +*** + +### complete + +> **complete**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:242](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L242) + +Whether the step is completed. + +#### Attr + +complete + +#### Default + +```ts +false +``` + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:233](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L233) + +Whether the step is disabled. + +Disabled steps are styled with a disabled state and are not interactive. + +#### Attr + +disabled + +#### Default + +```ts +false +``` + +*** + +### invalid + +> **invalid**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:199](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L199) + +Whether the step is invalid. + +Invalid steps are styled with an error state and are not +interactive when the stepper is in linear mode. + +#### Attr + +invalid + +#### Default + +```ts +false +``` + +*** + +### optional + +> **optional**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:222](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L222) + +Whether the step is optional. + +Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e. +if optional step is invalid the user could still move to the next step. + +#### Attr + +optional + +#### Default + +```ts +false +``` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/step.ts#L94) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcStepperComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcStepperComponent.md new file mode 100644 index 000000000..ebd0e4ab6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcStepperComponent.md @@ -0,0 +1,329 @@ +# Class: IgcStepperComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:108](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L108) + +A stepper component that provides a wizard-like workflow by dividing content into logical steps. + +## Remarks + +The stepper component allows the user to navigate between multiple `igc-step` elements. +It supports horizontal and vertical orientation, linear and non-linear navigation, +keyboard navigation, and provides API methods to control the active step. + +In linear mode, the user can only advance to the next step if the current step is valid +(not marked as `invalid`). + +## Element + +igc-stepper + +## Slot + +- Renders `igc-step` components inside the default slot. + +## Fires + +igcActiveStepChanging - Emitted when the active step is about to change. Cancelable. + +## Fires + +igcActiveStepChanged - Emitted after the active step has changed. + +## Examples + +```html +<igc-stepper> + <igc-step> + <span slot="title">Step 1</span> + <p>Step 1 content</p> + </igc-step> + <igc-step> + <span slot="title">Step 2</span> + <p>Step 2 content</p> + </igc-step> +</igc-stepper> +``` + +```html +<igc-stepper orientation="vertical" linear> + <igc-step complete> + <span slot="title">Completed step</span> + <p>This step is already complete.</p> + </igc-step> + <igc-step active> + <span slot="title">Current step</span> + <p>Fill in the details to proceed.</p> + </igc-step> + <igc-step> + <span slot="title">Next step</span> + <p>Upcoming content.</p> + </igc-step> +</igc-stepper> +``` + +## Extends + +- `EventEmitterInterface`\<`IgcStepperComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### animationDuration + +> **animationDuration**: `number` = `320` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:220](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L220) + +The animation duration in either vertical or horizontal mode in milliseconds. + +#### Attr + +animation-duration + +#### Default + +```ts +320 +``` + +*** + +### contentTop + +> **contentTop**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:193](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L193) + +Whether the content is displayed above the steps. + +#### Attr + +content-top + +#### Default + +```ts +false +``` + +*** + +### horizontalAnimation + +> **horizontalAnimation**: `HorizontalTransitionAnimation` = `'slide'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:211](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L211) + +The animation type when in horizontal mode. + +#### Attr + +horizontal-animation + +#### Default + +```ts +'slide' +``` + +*** + +### linear + +> **linear**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:184](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L184) + +Whether the stepper is linear. + +#### Remarks + +If the stepper is in linear mode and if the active step is valid only then the user is able to move forward. + +#### Attr + +linear + +#### Default + +```ts +false +``` + +*** + +### orientation + +> **orientation**: `StepperOrientation` = `'horizontal'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:163](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L163) + +The orientation of the stepper. + +#### Attr + +orientation + +#### Default + +```ts +'horizontal' +``` + +*** + +### stepType + +> **stepType**: `StepperStepType` = `'full'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:172](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L172) + +The visual type of the steps. + +#### Attr + +step-type + +#### Default + +```ts +'full' +``` + +*** + +### titlePosition + +> **titlePosition**: `StepperTitlePosition` = `'auto'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:233](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L233) + +The position of the steps title. + +#### Remarks + +When the stepper is horizontally orientated the title is positioned below the indicator. +When the stepper is vertically orientated the title is positioned on the right side of the indicator. + +#### Attr + +title-position + +#### Default + +```ts +'auto' +``` + +*** + +### verticalAnimation + +> **verticalAnimation**: `StepperVerticalAnimation` = `'grow'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:202](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L202) + +The animation type when in vertical mode. + +#### Attr + +vertical-animation + +#### Default + +```ts +'grow' +``` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-stepper"` = `'igc-stepper'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:112](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L112) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### steps + +#### Get Signature + +> **get** **steps**(): readonly [`IgcStepComponent`](IgcStepComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:152](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L152) + +Returns all of the stepper's steps. + +##### Returns + +readonly [`IgcStepComponent`](IgcStepComponent.md)[] + +## Methods + +### navigateTo() + +> **navigateTo**(`index`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:468](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L468) + +Activates the step at a given index. + +#### Parameters + +##### index + +`number` + +#### Returns + +`void` + +*** + +### next() + +> **next**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:477](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L477) + +Activates the next enabled step. + +#### Returns + +`void` + +*** + +### prev() + +> **prev**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:482](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L482) + +Activates the previous enabled step. + +#### Returns + +`void` + +*** + +### reset() + +> **reset**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:492](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/stepper/stepper.ts#L492) + +Resets the stepper to its initial state i.e. activates the first step. + +#### Returns + +`void` + +#### Remarks + +The steps' content will not be automatically reset. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSwitchComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSwitchComponent.md new file mode 100644 index 000000000..251e0abaa --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcSwitchComponent.md @@ -0,0 +1,434 @@ +# Class: IgcSwitchComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/switch.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/switch.ts#L28) + +Similar to a checkbox, a switch controls the state of a single setting on or off. + +## Element + +igc-switch + +## Slot + +- The switch label. + +## Fires + +igcChange - Emitted when the control's checked state changes. + +## Csspart + +base - The base wrapper of the switch. + +## Csspart + +control - The switch input element. + +## Csspart + +thumb - The position indicator of the switch. + +## Csspart + +label - The switch label. + +## Extends + +- `IgcCheckboxBaseComponent` + +## Properties + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcCheckboxBaseComponent.disabled` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`IgcCheckboxBaseComponent.invalid` + +*** + +### labelPosition + +> **labelPosition**: `ToggleLabelPosition` = `'after'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L91) + +The label position of the control. + +#### Attr + +label-position + +#### Inherited from + +`IgcCheckboxBaseComponent.labelPosition` + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`IgcCheckboxBaseComponent.name` + +## Accessors + +### checked + +#### Set Signature + +> **set** **checked**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L78) + +The checked state of the control. + +##### Attr + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.checked` + +*** + +### defaultChecked + +#### Set Signature + +> **set** **defaultChecked**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:162](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L162) + +The initial checked state of the component. + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.defaultChecked` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`IgcCheckboxBaseComponent.form` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.required` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`IgcCheckboxBaseComponent.validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`IgcCheckboxBaseComponent.validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L61) + +The value attribute of the control. + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.value` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`IgcCheckboxBaseComponent.willValidate` + +## Methods + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:106](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L106) + +Removes focus from the control. + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.blur` + +*** + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcCheckboxBaseComponent.checkValidity` + +*** + +### click() + +> **click**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L94) + +Simulates a click on the control. + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.click` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox-base.ts:100](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/checkbox/checkbox-base.ts#L100) + +Sets focus on the control. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.focus` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`IgcCheckboxBaseComponent.reportValidity` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`IgcCheckboxBaseComponent.setCustomValidity` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTabComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTabComponent.md new file mode 100644 index 000000000..6e032c005 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTabComponent.md @@ -0,0 +1,122 @@ +# Class: IgcTabComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tab.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tab.ts#L28) + +A tab element slotted into an `igc-tabs` container. + +## Element + +igc-tab + +## Slot + +- Renders the tab's content. + +## Slot + +label - Renders the tab header's label. + +## Slot + +prefix - Renders the tab header's prefix. + +## Slot + +suffix - Renders the tab header's suffix. + +## Csspart + +tab-header - The header of a single tab. + +## Csspart + +prefix - Tab header's label prefix. + +## Csspart + +content - Tab header's label slot container. + +## Csspart + +suffix - Tab header's label suffix. + +## Csspart + +tab-body - Holds the body content of a single tab, only the body of the selected tab is visible. + +## Extends + +- `LitElement` + +## Other + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tab.ts:58](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tab.ts#L58) + +Determines whether the tab is disabled. + +#### Attr + +*** + +### label + +> **label**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tab.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tab.ts#L44) + +The tab item label. + +#### Attr + +*** + +### selected + +> **selected**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tab.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tab.ts#L51) + +Determines whether the tab is selected. + +#### Attr + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tab.ts:30](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tab.ts#L30) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTabsComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTabsComponent.md new file mode 100644 index 000000000..171e26bbb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTabsComponent.md @@ -0,0 +1,147 @@ +# Class: IgcTabsComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L70) + +Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. + +The `<igc-tabs>` component allows the user to navigate between multiple `<igc-tab>` elements. +It supports keyboard navigation and provides API methods to control the selected tab. + +## Element + +igc-tabs + +## Fires + +igcChange - Emitted when the selected tab changes. + +## Slot + +- Renders the `IgcTabComponents` inside default slot. + +## Csspart + +start-scroll-button - The start scroll button displayed when the tabs overflow. + +## Csspart + +end-scroll-button - The end scroll button displayed when the tabs overflow. + +## Csspart + +selected-indicator - The indicator that shows which tab is selected. + +## Extends + +- `EventEmitterInterface`\<`IgcTabsComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### activation + +> **activation**: `TabsActivation` = `'auto'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:135](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L135) + +Determines the tab activation. When set to auto, +the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys +and the corresponding panel is displayed. +When set to manual, the tab is only focused. The selection happens after pressing Space or Enter. + +#### Attr + +*** + +### alignment + +> **alignment**: `TabsAlignment` = `'start'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:125](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L125) + +Sets the alignment for the tab headers + +#### Attr + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-tabs"` = `'igc-tabs'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L74) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### selected + +#### Get Signature + +> **get** **selected**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:144](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L144) + +Returns the currently selected tab label or IDREF if no label property is set. + +##### Returns + +`string` + +*** + +### tabs + +#### Get Signature + +> **get** **tabs**(): [`IgcTabComponent`](IgcTabComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:139](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L139) + +Returns the direct `igc-tab` elements that are children of this element. + +##### Returns + +[`IgcTabComponent`](IgcTabComponent.md)[] + +## Methods + +### select() + +#### Call Signature + +> **select**(`id`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:392](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L392) + +Selects the specified tab and displays the corresponding panel. + +##### Parameters + +###### id + +`string` + +##### Returns + +`void` + +#### Call Signature + +> **select**(`ref`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:394](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/tabs.ts#L394) + +Selects the specified tab and displays the corresponding panel. + +##### Parameters + +###### ref + +[`IgcTabComponent`](IgcTabComponent.md) + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTextareaComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTextareaComponent.md new file mode 100644 index 000000000..85e5665b1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTextareaComponent.md @@ -0,0 +1,685 @@ +# Class: IgcTextareaComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L90) + +This element represents a multi-line plain-text editing control, +useful when you want to allow users to enter a sizeable amount of free-form text, +for example a comment on a review or feedback form. + +## Element + +igc-textarea + +## Slot + +- Text content from the default slot will be used as the value of the component. + +## Slot + +prefix - Renders content before the input. + +## Slot + +suffix - Renders content after input. + +## Slot + +helper-text - Renders content below the input. + +## Slot + +value-missing - Renders content when the required validation fails. + +## Slot + +too-long - Renders content when the maxlength validation fails. + +## Slot + +too-short - Renders content when the minlength validation fails. + +## Slot + +custom-error - Renders content when setCustomValidity(message) is set. + +## Slot + +invalid - Renders content when the component is in invalid state (validity.valid = false). + +## Fires + +igcInput - Emitted when the control receives user input. + +## Fires + +igcChange - Emitted when the a change to the control value is committed by the user. + +## Csspart + +container - The main wrapper that holds all main input elements of the textarea. + +## Csspart + +input - The native input element of the igc-textarea. + +## Csspart + +label - The native label element of the igc-textarea. + +## Csspart + +prefix - The prefix wrapper of the igc-textarea. + +## Csspart + +suffix - The suffix wrapper of the igc-textarea. + +## Csspart + +helper-text - The helper text wrapper of the igc-textarea. + +## Extends + +- `FormRequiredInterface`\<`this`\> & `FormAssociatedElementInterface`\<`this`\> & `EventEmitterInterface`\<`IgcTextareaComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### autocapitalize + +> **autocapitalize**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:147](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L147) + +Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + +[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize). + +#### Attr + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).autocapitalize` + +*** + +### autocomplete + +> **autocomplete**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:137](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L137) + +Specifies what if any permission the browser has to provide for automated assistance in filling out form field values, +as well as guidance to the browser as to the type of information expected in the field. +Refer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information. + +#### Attr + +*** + +### disabled + +> **disabled**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:29](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L29) + +The disabled state of the component. + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).disabled` + +*** + +### inputMode + +> **inputMode**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:158](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L158) + +Hints at the type of data that might be entered by the user while editing the element or its contents. +This allows a browser to display an appropriate virtual keyboard. + +[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + +#### Attr + +inputmode + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).inputMode` + +*** + +### invalid + +> **invalid**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L36) + +Sets the control into invalid state (visual state only). + +#### Attr + +#### Default + +```ts +false +``` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).invalid` + +*** + +### label + +> **label**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:166](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L166) + +The label for the control. + +#### Attr + +*** + +### maxLength + +> **maxLength**: `number` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:175](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L175) + +The maximum number of characters (UTF-16 code units) that the user can enter. +If this value isn't specified, the user can enter an unlimited number of characters. + +#### Attr + +maxlength + +*** + +### minLength + +> **minLength**: `number` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:183](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L183) + +The minimum number of characters (UTF-16 code units) required that the user should enter. + +#### Attr + +minlength + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L42) + +The name attribute of the control. + +#### Attr + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).name` + +*** + +### outlined + +> **outlined**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:190](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L190) + +Whether the control will have outlined appearance. + +#### Attr + +*** + +### placeholder + +> **placeholder**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:198](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L198) + +The placeholder attribute of the control. + +#### Attr + +*** + +### readOnly + +> **readOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:206](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L206) + +Makes the control a readonly field. + +#### Attr + +readonly + +*** + +### resize + +> **resize**: `TextareaResize` = `'vertical'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:215](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L215) + +Controls whether the control can be resized. +When `auto` is set, the control will try to expand and fit its content. + +#### Attr + +*** + +### rows + +> **rows**: `number` = `3` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:224](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L224) + +The number of visible text lines for the control. If it is specified, it must be a positive integer. +If it is not specified, the default value is 3. + +#### Attr + +*** + +### spellcheck + +> **spellcheck**: `boolean` = `true` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:253](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L253) + +Controls whether the element may be checked for spelling errors. + +#### Attr + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).spellcheck` + +*** + +### validateOnly + +> **validateOnly**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:272](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L272) + +Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property +when it is defined. + +#### Attr + +validate-only + +*** + +### wrap + +> **wrap**: `"off"` \| `"hard"` \| `"soft"` = `'soft'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:263](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L263) + +Indicates how the control should wrap the value for form submission. +Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) +for explanation of the available values. + +#### Attr + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-textarea"` = `'igc-textarea'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:95](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L95) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### defaultValue + +#### Set Signature + +> **set** **defaultValue**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:156](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L156) + +The initial value of the component. + +##### Parameters + +###### value + +`unknown` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue` + +*** + +### form + +#### Get Signature + +> **get** **form**(): `HTMLFormElement` \| `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L45) + +Returns the HTMLFormElement associated with this element. + +##### Returns + +`HTMLFormElement` \| `null` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).form` + +*** + +### required + +#### Set Signature + +> **set** **required**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:174](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L174) + +When set, makes the component a required field for validation. + +##### Attr + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).required` + +*** + +### validationMessage + +#### Get Signature + +> **get** **validationMessage**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:54](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L54) + +A string containing the validation message of this element. + +##### Returns + +`string` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).validationMessage` + +*** + +### validity + +#### Get Signature + +> **get** **validity**(): `ValidityState` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L51) + +Returns a ValidityState object which represents the different validity states +the element can be in, with respect to constraint validation. + +##### Returns + +`ValidityState` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).validity` + +*** + +### value + +#### Set Signature + +> **set** **value**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:233](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L233) + +The value of the component + +##### Attr + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### willValidate + +#### Get Signature + +> **get** **willValidate**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:60](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L60) + +A boolean value which returns true if the element is a submittable element +that is a candidate for constraint validation. + +##### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).willValidate` + +## Methods + +### checkValidity() + +> **checkValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:140](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L140) + +Checks for validity of the control and emits the invalid event if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).checkValidity` + +*** + +### reportValidity() + +> **reportValidity**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L143) + +Checks for validity of the control and shows the browser message if it invalid. + +#### Returns + +`boolean` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).reportValidity` + +*** + +### scrollTo() + +> **scrollTo**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:393](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L393) + +The **`scrollTo()`** method of the Element interface scrolls to a particular set of coordinates inside a given element. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTo) + +#### Parameters + +##### options? + +`ScrollToOptions` + +#### Returns + +`void` + +#### Overrides + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).scrollTo` + +*** + +### select() + +> **select**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:366](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L366) + +Selects all text within the control. + +#### Returns + +`void` + +*** + +### setCustomValidity() + +> **setCustomValidity**(`message`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/forms/types.ts:149](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/forms/types.ts#L149) + +Sets a custom validation message for the control. +As long as `message` is not empty, the control is considered invalid. + +#### Parameters + +##### message + +`string` + +#### Returns + +`void` + +#### Inherited from + +`FormAssociatedRequiredMixin( EventEmitterMixin<IgcTextareaComponentEventMap, Constructor<LitElement>>( LitElement ) ).setCustomValidity` + +*** + +### setRangeText() + +> **setRangeText**(`replacement`, `start`, `end`, `selectMode?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:382](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L382) + +Replaces the selected text in the control. + +#### Parameters + +##### replacement + +`string` + +##### start + +`number` + +##### end + +`number` + +##### selectMode? + +`RangeTextSelectMode` = `'preserve'` + +#### Returns + +`void` + +*** + +### setSelectionRange() + +> **setSelectionRange**(`start`, `end`, `direction?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:372](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/textarea/textarea.ts#L372) + +Sets the text selection range of the control + +#### Parameters + +##### start + +`number` + +##### end + +`number` + +##### direction? + +`SelectionRangeDirection` = `'none'` + +#### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcThemeProviderComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcThemeProviderComponent.md new file mode 100644 index 000000000..a674716e1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcThemeProviderComponent.md @@ -0,0 +1,123 @@ +# Class: IgcThemeProviderComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/theme-provider/theme-provider.ts:52](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/theme-provider/theme-provider.ts#L52) + +A theme provider component that uses Lit context to provide theme information +to descendant components. + +This component allows you to scope a theme to a specific part of the page. +All library components within this provider will use the specified theme +instead of the global theme. + +## Element + +igc-theme-provider + +## Slot + +- Default slot for content that should receive the provided theme. + +## Remarks + +When using the theme provider, it must be registered **before** any descendant components +that will consume the theme context. This ensures the context provider is available +when descendant components attempt to consume it. + +```typescript +import { defineComponents, IgcThemeProviderComponent, IgcButtonComponent } from 'igniteui-webcomponents'; + +// Register theme provider first, then descendant components +defineComponents(IgcThemeProviderComponent, IgcButtonComponent); +``` + +## Example + +```html +<!-- Scope material theme to a section --> +<igc-theme-provider theme="material" variant="dark"> + <igc-button>Material Dark Button</igc-button> + <igc-input label="Material Dark Input"></igc-input> +</igc-theme-provider> + +<!-- Use different theme in another section --> +<igc-theme-provider theme="fluent" variant="light"> + <igc-button>Fluent Light Button</igc-button> +</igc-theme-provider> +``` + +## Extends + +- `LitElement` + +## Other + +### theme + +> **theme**: `Theme` = `'bootstrap'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/theme-provider/theme-provider.ts:77](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/theme-provider/theme-provider.ts#L77) + +The theme to provide to descendant components. + +#### Attr + +#### Default + +```ts +'bootstrap' +``` + +*** + +### variant + +> **variant**: `ThemeVariant` = `'light'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/theme-provider/theme-provider.ts:86](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/theme-provider/theme-provider.ts#L86) + +The theme variant to provide to descendant components. + +#### Attr + +#### Default + +```ts +'light' +``` + +## styles + +### styles + +> `static` **styles**: `CSSResult` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/theme-provider/theme-provider.ts:55](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/theme-provider/theme-provider.ts#L55) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTileComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTileComponent.md new file mode 100644 index 000000000..0ea406a20 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTileComponent.md @@ -0,0 +1,380 @@ +# Class: IgcTileComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:97](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L97) + +The tile component is used within the `igc-tile-manager` as a container +for displaying various types of information. + +## Element + +igc-tile + +## Fires + +igcTileFullscreen - Fired when tile the fullscreen state changes. + +## Fires + +igcTileMaximize - Fired when tile the maximize state changes. + +## Fires + +igcTileDragStart - Fired when a drag operation on a tile is about to begin. Cancelable. + +## Fires + +igcTileDragEnd - Fired when a drag operation with a tile is successfully completed. + +## Fires + +igcTileDragCancel - Fired when a tile drag operation is canceled by the user. + +## Fires + +igcTileResizeStart - Fired when a resize operation on a tile is about to begin. Cancelable. + +## Fires + +igcTileResizeEnd - Fired when a resize operation on a tile is successfully completed. + +## Fires + +igcTileResizeCancel - Fired when a resize operation on a tile is canceled by the user. + +## Slot + +- Default slot for the tile's content. + +## Slot + +title - Renders the title of the tile header. + +## Slot + +maximize-action - Renders the maximize action element of the tile header. + +## Slot + +fullscreen-action - Renders the fullscreen action element of the tile header. + +## Slot + +actions - Renders items after the default actions in the tile header. + +## Slot + +side-adorner - Renders the side resize handle of the tile. + +## Slot + +corner-adorner - Renders the corner resize handle of the tile. + +## Slot + +bottom-adorner - Renders the bottom resize handle of the tile. + +## Csspart + +base - The wrapper for the entire tile content, header and content. + +## Csspart + +header - The container for the tile header, including title and actions. + +## Csspart + +title - The title container of the tile. + +## Csspart + +actions - The actions container of the tile header. + +## Csspart + +content-container - The container wrapping the tile’s main content. + +## Csspart + +trigger-side - The part for the side adorner of the encapsulated resize element in the tile. + +## Csspart + +trigger - The part for the corner adorner of the encapsulated resize element in the tile. + +## Csspart + +trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile. + +## Extends + +- `EventEmitterInterface`\<`IgcTileComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### disableFullscreen + +> **disableFullscreen**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:329](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L329) + +Whether to disable the rendering of the tile `fullscreen-action` slot and its +default fullscreen action button. + +#### Attr + +disable-fullscreen + +#### Default + +```ts +false +``` + +*** + +### disableMaximize + +> **disableMaximize**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:339](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L339) + +Whether to disable the rendering of the tile `maximize-action` slot and its +default maximize action button. + +#### Attr + +disable-maximize + +#### Default + +```ts +false +``` + +*** + +### disableResize + +> **disableResize**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:319](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L319) + +Indicates whether to disable tile resize behavior regardless +ot its tile manager parent settings. + +#### Attr + +disable-resize + +#### Default + +```ts +false +``` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-tile"` = `'igc-tile'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:101](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L101) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### colSpan + +#### Set Signature + +> **set** **colSpan**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:219](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L219) + +The number of columns the tile will span. + +##### Remarks + +When setting a value that is less than 1, it will be +coerced to 1. + +##### Attr + +col-span + +##### Default + +```ts +1 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### colStart + +#### Set Signature + +> **set** **colStart**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:254](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L254) + +The starting column for the tile. + +##### Attr + +col-start + +##### Parameters + +###### value + +`number` \| `null` + +##### Returns + +`void` + +*** + +### fullscreen + +#### Get Signature + +> **get** **fullscreen**(): `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:289](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L289) + +Indicates whether the tile occupies the whole screen. + +##### Returns + +`boolean` + +*** + +### maximized + +#### Set Signature + +> **set** **maximized**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:299](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L299) + +Indicates whether the tile occupies all available space within the layout. + +##### Attr + +maximized + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### position + +#### Set Signature + +> **set** **position**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:348](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L348) + +Gets/sets the tile's visual position in the layout. +Corresponds to the CSS `order` property. + +##### Attr + +position + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### rowSpan + +#### Set Signature + +> **set** **rowSpan**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:239](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L239) + +The number of rows the tile will span. + +##### Remarks + +When setting a value that is less than 1, it will be +coerced to 1. + +##### Attr + +row-span + +##### Default + +```ts +1 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### rowStart + +#### Set Signature + +> **set** **rowStart**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:272](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile.ts#L272) + +The starting row for the tile. + +##### Attr + +row-start + +##### Parameters + +###### value + +`number` \| `null` + +##### Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTileManagerComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTileManagerComponent.md new file mode 100644 index 000000000..7eee707b5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTileManagerComponent.md @@ -0,0 +1,304 @@ +# Class: IgcTileManagerComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L44) + +The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles. + +## Element + +igc-tile-manager + +## Slot + +- Default slot for the tile manager. Only `igc-tile` elements will be projected inside the CSS grid container. + +## Csspart + +base - The tile manager CSS Grid container. + +## Cssproperty + +--column-count - The number of columns for the tile manager. The `column-count` attribute sets this variable. + +## Cssproperty + +--min-col-width - The minimum size of the columns in the tile-manager. The `min-column-width` attribute sets this variable. + +## Cssproperty + +--min-row-height - The minimum size of the rows in the tile-manager. The `min-row-height` attribute sets this variable. + +## Cssproperty + +--grid-gap - The gap size of the underlying CSS grid container. The `gap` attributes sts this variable. + +## Extends + +- `LitElement` + +## Other + +### columnCount + +#### Set Signature + +> **set** **columnCount**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:132](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L132) + +Sets the number of columns for the tile manager. +Setting value <= than zero will trigger a responsive layout. + +##### Attr + +column-count + +##### Default + +```ts +0 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### dragMode + +#### Set Signature + +> **set** **dragMode**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:115](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L115) + +Whether drag and drop operations are enabled. + +##### Attr + +drag-mode + +##### Default + +```ts +none +``` + +##### Parameters + +###### value + +`TileManagerDragMode` + +##### Returns + +`void` + +*** + +### gap + +#### Set Signature + +> **set** **gap**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:181](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L181) + +Sets the gap size between tiles in the tile manager. + +##### Attr + +gap + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### minColumnWidth + +#### Set Signature + +> **set** **minColumnWidth**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:148](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L148) + +Sets the minimum width for a column unit in the tile manager. + +##### Attr + +min-column-width + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### minRowHeight + +#### Set Signature + +> **set** **minRowHeight**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:164](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L164) + +Sets the minimum height for a row unit in the tile manager. + +##### Attr + +min-row-height + +##### Parameters + +###### value + +`string` \| `undefined` + +##### Returns + +`void` + +*** + +### resizeMode + +#### Set Signature + +> **set** **resizeMode**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:99](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L99) + +Whether resize operations are enabled. + +##### Attr + +resize-mode + +##### Default + +```ts +none +``` + +##### Parameters + +###### value + +`TileManagerResizeMode` + +##### Returns + +`void` + +*** + +### tiles + +#### Get Signature + +> **get** **tiles**(): [`IgcTileComponent`](IgcTileComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:196](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L196) + +Gets the tiles sorted by their position in the layout. + +##### Returns + +[`IgcTileComponent`](IgcTileComponent.md)[] + +*** + +### loadLayout() + +> **loadLayout**(`data`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:267](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L267) + +Restores a previously serialized state produced by `saveLayout`. + +#### Parameters + +##### data + +`string` + +#### Returns + +`void` + +*** + +### saveLayout() + +> **saveLayout**(): `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:260](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L260) + +Returns the properties of the current tile collections as a JSON payload. + +#### Returns + +`string` + +#### Remarks + +The content of the tiles is not serialized or saved. Only tile properties +are serialized. + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:46](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tile-manager/tile-manager.ts#L46) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcToastComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcToastComponent.md new file mode 100644 index 000000000..f6fc25a4b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcToastComponent.md @@ -0,0 +1,176 @@ +# Class: IgcToastComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/toast/toast.ts:17](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/toast/toast.ts#L17) + +A toast component is used to show a notification + +## Element + +igc-toast + +## Csspart + +base - The base wrapper of the toast. + +## Extends + +- `IgcBaseAlertLikeComponent` + +## Other + +### displayTime + +> **displayTime**: `number` = `4000` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L28) + +Determines the duration in ms in which the component will be visible. + +#### Attr + +display-time + +#### Inherited from + +`IgcBaseAlertLikeComponent.displayTime` + +*** + +### keepOpen + +> **keepOpen**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:35](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L35) + +Determines whether the component should close after the `displayTime` is over. + +#### Attr + +keep-open + +#### Inherited from + +`IgcBaseAlertLikeComponent.keepOpen` + +*** + +### open + +> **open**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L21) + +Whether the component is in shown state. + +#### Attr + +#### Inherited from + +`IgcBaseAlertLikeComponent.open` + +*** + +### position + +> **position**: `AbsolutePosition` = `'bottom'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L42) + +Sets the position of the component in the viewport. + +#### Attr + +#### Inherited from + +`IgcBaseAlertLikeComponent.position` + +*** + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:94](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L94) + +Closes the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`IgcBaseAlertLikeComponent.hide` + +*** + +### show() + +> **show**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:89](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L89) + +Opens the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`IgcBaseAlertLikeComponent.show` + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/mixins/alert.ts:99](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/mixins/alert.ts#L99) + +Toggles the open state of the component. + +#### Returns + +`Promise`\<`boolean`\> + +#### Inherited from + +`IgcBaseAlertLikeComponent.toggle` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/toast/toast.ts:19](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/toast/toast.ts#L19) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`IgcBaseAlertLikeComponent.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcToggleButtonComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcToggleButtonComponent.md new file mode 100644 index 000000000..566641bb3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcToggleButtonComponent.md @@ -0,0 +1,155 @@ +# Class: IgcToggleButtonComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L24) + +The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties. +It is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors. + +## Element + +igc-toggle-button + +## Slot + +Renders the label/content of the button. + +## Csspart + +toggle - The native button element. + +## Extends + +- `LitElement` + +## Other + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:57](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L57) + +Determines whether the button is disabled. + +#### Attr + +*** + +### selected + +> **selected**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:50](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L50) + +Determines whether the button is selected. + +#### Attr + +*** + +### value + +> **value**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:43](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L43) + +The value attribute of the control. + +#### Attr + +*** + +### blur() + +> **blur**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:72](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L72) + +Removes focus from the button. + +#### Returns + +`void` + +#### Overrides + +`LitElement.blur` + +*** + +### click() + +> **click**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:77](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L77) + +Simulates a mouse click on the element. + +#### Returns + +`void` + +#### Overrides + +`LitElement.click` + +*** + +### focus() + +> **focus**(`options?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:66](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L66) + +Sets focus on the button. + +#### Parameters + +##### options? + +`FocusOptions` + +#### Returns + +`void` + +#### Overrides + +`LitElement.focus` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/button-group/toggle-button.ts#L25) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTooltipComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTooltipComponent.md new file mode 100644 index 000000000..975534ea5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTooltipComponent.md @@ -0,0 +1,382 @@ +# Class: IgcTooltipComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:55](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L55) + +Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus). +It offers features such as placement customization, delays, sticky mode, and animations. + +## Element + +igc-tooltip + +## Slot + +- Default slot of the tooltip component. + +## Slot + +close-button - Slot for custom sticky-mode close action (e.g., an icon/button). + +## Csspart + +base - The wrapping container of the tooltip content. + +## Csspart + +simple-text - The container where the message property of the tooltip is rendered. + +## Fires + +igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening. + +## Fires + +igcOpened - Emitted after the tooltip has successfully opened and is visible. + +## Fires + +igcClosing - Emitted before the tooltip begins to close. Can be canceled to prevent closing. + +## Fires + +igcClosed - Emitted after the tooltip has been fully removed from view. + +## Extends + +- `EventEmitterInterface`\<`IgcTooltipComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Properties + +### anchor? + +> `optional` **anchor?**: `string` \| `Element` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:188](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L188) + +An element instance or an IDREF to use as the anchor for the tooltip. + +#### Remarks + +Trying to bind to an IDREF that does not exist in the current DOM root at will not work. +In such scenarios, it is better to get a DOM reference and pass it to the tooltip instance. + +#### Attr + +anchor + +*** + +### message + +> **message**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:258](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L258) + +Specifies a plain text as tooltip content. + +#### Attr + +message + +*** + +### offset + +> **offset**: `number` = `6` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:167](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L167) + +The offset of the tooltip from the anchor in pixels. + +#### Attr + +offset + +#### Default + +```ts +6 +``` + +*** + +### placement + +> **placement**: [`PopoverPlacement`](../type-aliases/PopoverPlacement.md) = `'bottom'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:176](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L176) + +Where to place the floating element relative to the parent anchor element. + +#### Attr + +placement + +#### Default + +```ts +bottom +``` + +*** + +### sticky + +> **sticky**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:267](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L267) + +Specifies if the tooltip remains visible until the user closes it via the close button or Esc key. + +#### Attr + +sticky + +#### Default + +```ts +false +``` + +*** + +### withArrow + +> **withArrow**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:158](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L158) + +Whether to render an arrow indicator for the tooltip. + +#### Attr + +with-arrow + +#### Default + +```ts +false +``` + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-tooltip"` = `'igc-tooltip'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:59](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L59) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +## Accessors + +### hideDelay + +#### Set Signature + +> **set** **hideDelay**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:244](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L244) + +Specifies the number of milliseconds that should pass before hiding the tooltip. + +##### Attr + +hide-delay + +##### Default + +```ts +300 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### hideTriggers + +#### Set Signature + +> **set** **hideTriggers**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:214](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L214) + +Which event triggers will hide the tooltip. +Expects a comma separate string of different event triggers. + +##### Attr + +hide-triggers + +##### Default + +```ts +pointerleave, click +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### open + +#### Set Signature + +> **set** **open**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L143) + +Whether the tooltip is showing. + +##### Attr + +open + +##### Default + +```ts +false +``` + +##### Parameters + +###### value + +`boolean` + +##### Returns + +`void` + +*** + +### showDelay + +#### Set Signature + +> **set** **showDelay**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:229](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L229) + +Specifies the number of milliseconds that should pass before showing the tooltip. + +##### Attr + +show-delay + +##### Default + +```ts +200 +``` + +##### Parameters + +###### value + +`number` + +##### Returns + +`void` + +*** + +### showTriggers + +#### Set Signature + +> **set** **showTriggers**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:198](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L198) + +Which event triggers will show the tooltip. +Expects a comma separate string of different event triggers. + +##### Attr + +show-triggers + +##### Default + +```ts +pointerenter +``` + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +## Methods + +### hide() + +> **hide**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:364](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L364) + +Hides the tooltip if not already hidden. + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### show() + +> **show**(`target?`): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:354](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L354) + +Shows the tooltip if not already showing. + If a target is provided, sets it as a transient anchor. + +#### Parameters + +##### target? + +`string` \| `Element` + +#### Returns + +`Promise`\<`boolean`\> + +*** + +### toggle() + +> **toggle**(): `Promise`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:369](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tooltip/tooltip.ts#L369) + +Toggles the tooltip between shown/hidden state + +#### Returns + +`Promise`\<`boolean`\> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTreeComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTreeComponent.md new file mode 100644 index 000000000..d4fc25baf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTreeComponent.md @@ -0,0 +1,274 @@ +# Class: IgcTreeComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:39](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L39) + +The tree allows users to represent hierarchical data in a tree-view structure, +maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. + +## Element + +igc-tree + +## Slot + +- Renders the tree items inside default slot. + +## Fires + +igcSelection - Emitted when item selection is changing, before the selection completes. + +## Fires + +igcItemCollapsed - Emitted when tree item is collapsed. + +## Fires + +igcItemCollapsing - Emitted when tree item is about to collapse. + +## Fires + +igcItemExpanded - Emitted when tree item is expanded. + +## Fires + +igcItemExpanding - Emitted when tree item is about to expand. + +## Fires + +igcActiveItem - Emitted when the tree's `active` item changes. + +## Extends + +- `EventEmitterInterface`\<`IgcTreeComponentEventMap`, `this`\> & `LitElement`\<`this`\> + +## Other + +### selection + +> **selection**: `TreeSelection` = `'none'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:83](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L83) + +The selection state of the tree. + +#### Attr + +*** + +### singleBranchExpand + +> **singleBranchExpand**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:69](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L69) + +Whether a single or multiple of a parent's child items can be expanded. + +#### Attr + +single-branch-expand + +*** + +### toggleNodeOnClick + +> **toggleNodeOnClick**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:76](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L76) + +Whether clicking over nodes will change their expanded state or not. + +#### Attr + +toggle-node-on-click + +*** + +### tagName + +> `readonly` `static` **tagName**: `"igc-tree"` = `'igc-tree'` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:43](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L43) + +The **`tagName`** read-only property of the Element interface returns the tag name of the element on which it's called. + +[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName) + +*** + +### items + +#### Get Signature + +> **get** **items**(): [`IgcTreeItemComponent`](IgcTreeItemComponent.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:175](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L175) + +Returns all of the tree's items. + +##### Returns + +[`IgcTreeItemComponent`](IgcTreeItemComponent.md)[] + +*** + +### locale + +#### Set Signature + +> **set** **locale**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L90) + +Gets/Sets the locale used for getting language, affecting resource strings. + +##### Attr + +locale + +##### Parameters + +###### value + +`string` + +##### Returns + +`void` + +*** + +### resourceStrings + +#### Set Signature + +> **set** **resourceStrings**(`value`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:103](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L103) + +The resource strings for localization. +Currently only aria-labels of the default expand/collapse icons are localized for the tree item. + +##### Parameters + +###### value + +`ITreeResourceStrings` + +##### Returns + +`void` + +*** + +### collapse() + +> **collapse**(`items?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:240](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L240) + +Collapses all of the passed items. +If no items are passed, collapses ALL items. + +#### Parameters + +##### items? + +[`IgcTreeItemComponent`](IgcTreeItemComponent.md)[] + +#### Returns + +`void` + +*** + +### deselect() + +> **deselect**(`items?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:213](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L213) + +Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. + +#### Parameters + +##### items? + +[`IgcTreeItemComponent`](IgcTreeItemComponent.md)[] + +#### Returns + +`void` + +*** + +### expand() + +> **expand**(`items?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:225](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L225) + +Expands all of the passed items. +If no items are passed, expands ALL items. + +#### Parameters + +##### items? + +[`IgcTreeItemComponent`](IgcTreeItemComponent.md)[] + +#### Returns + +`void` + +*** + +### select() + +> **select**(`items?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:196](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L196) + +Select all items if the items collection is empty. Otherwise, select the items in the items collection. + +#### Parameters + +##### items? + +[`IgcTreeItemComponent`](IgcTreeItemComponent.md)[] + +#### Returns + +`void` + +## lifecycle + +### connectedCallback() + +> **connectedCallback**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:157](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree.ts#L157) + +Invoked when the component is added to the document's DOM. + +In `connectedCallback()` you should setup tasks that should only occur when +the element is connected to the document. The most common of these is +adding event listeners to nodes external to the element, like a keydown +event handler added to the window. + +```ts +connectedCallback() { + super.connectedCallback(); + addEventListener('keydown', this._handleKeydown); +} +``` + +Typically, anything done in `connectedCallback()` should be undone when the +element is disconnected, in `disconnectedCallback()`. + +#### Returns + +`void` + +#### Overrides + +`EventEmitterMixin< IgcTreeComponentEventMap, Constructor<LitElement> >(LitElement).connectedCallback` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTreeItemComponent.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTreeItemComponent.md new file mode 100644 index 000000000..123821f14 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/classes/IgcTreeItemComponent.md @@ -0,0 +1,363 @@ +# Class: IgcTreeItemComponent + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L51) + +The tree-item component represents a child item of the tree component or another tree item. + +## Element + +igc-tree-item + +## Slot + +- Renders nested tree-item component. + +## Slot + +label - Renders the tree item container. + +## Slot + +indicator - Renders the expand indicator container. + +## Slot + +loading - Renders the tree item loading indicator container. + +## Slot + +indentation - Renders the container (by default the space) before the tree item. + +## Csspart + +wrapper - The wrapper for the tree item. + +## Csspart + +selected - Indicates selected state. Applies to `wrapper`. + +## Csspart + +focused - Indicates focused state. Applies to `wrapper`. + +## Csspart + +active - Indicates an active state. Applies to `wrapper`. + +## Csspart + +indicator - The expand indicator of the tree item. + +## Csspart + +label - The tree item content. + +## Csspart + +text - The tree item displayed text. + +## Csspart + +select - The checkbox of the tree item when selection is enabled. + +## Extends + +- `LitElement` + +## Other + +### active + +> **active**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:122](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L122) + +Marks the item as the tree's active item. + +#### Attr + +*** + +### disabled + +> **disabled**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:129](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L129) + +Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions. + +#### Attr + +*** + +### expanded + +> **expanded**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:115](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L115) + +The tree item expansion state. + +#### Attr + +*** + +### label + +> **label**: `string` = `''` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:108](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L108) + +The tree item label. + +#### Attr + +*** + +### level + +> **level**: `number` = `0` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:97](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L97) + +The depth of the item, relative to the root. + +*** + +### loading + +> **loading**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:143](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L143) + +To be used for load-on-demand scenarios in order to specify whether the item is loading data. + +#### Attr + +*** + +### parent + +> **parent**: `IgcTreeItemComponent` \| `null` = `null` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:76](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L76) + +The parent item of the current tree item (if any) + +*** + +### selected + +> **selected**: `boolean` = `false` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:136](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L136) + +The tree item selection state. + +#### Attr + +*** + +### tree? + +> `optional` **tree?**: [`IgcTreeComponent`](IgcTreeComponent.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L74) + +A reference to the tree the item is a part of. + +*** + +### value + +> **value**: `any` = `undefined` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:151](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L151) + +The value entry that the tree item is visualizing. Required for searching through items. + +#### Attr + +*** + +### path + +#### Get Signature + +> **get** **path**(): `IgcTreeItemComponent`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:286](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L286) + +The full path to the tree item, starting from the top-most ancestor. + +##### Returns + +`IgcTreeItemComponent`[] + +*** + +### collapse() + +> **collapse**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:507](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L507) + +Collapses the tree item. + +#### Returns + +`void` + +*** + +### expand() + +> **expand**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:502](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L502) + +Expands the tree item. + +#### Returns + +`void` + +*** + +### getChildren() + +> **getChildren**(`options?`): `IgcTreeItemComponent`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:428](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L428) + +Returns a collection of child items. +If the parameter value is true returns all tree item's direct children, +otherwise - only the direct children. + +#### Parameters + +##### options? + +###### flatten + +`boolean` + +#### Returns + +`IgcTreeItemComponent`[] + +*** + +### toggle() + +> **toggle**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:497](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L497) + +Toggles tree item expansion state. + +#### Returns + +`void` + +## lifecycle + +### connectedCallback() + +> **connectedCallback**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:232](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L232) + +Invoked when the component is added to the document's DOM. + +In `connectedCallback()` you should setup tasks that should only occur when +the element is connected to the document. The most common of these is +adding event listeners to nodes external to the element, like a keydown +event handler added to the window. + +```ts +connectedCallback() { + super.connectedCallback(); + addEventListener('keydown', this._handleKeydown); +} +``` + +Typically, anything done in `connectedCallback()` should be undone when the +element is disconnected, in `disconnectedCallback()`. + +#### Returns + +`void` + +#### Overrides + +`LitElement.connectedCallback` + +*** + +### disconnectedCallback() + +> **disconnectedCallback**(): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:252](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L252) + +Invoked when the component is removed from the document's DOM. + +This callback is the main signal to the element that it may no longer be +used. `disconnectedCallback()` should ensure that nothing is holding a +reference to the element (such as event listeners added to nodes external +to the element), so that it is free to be garbage collected. + +```ts +disconnectedCallback() { + super.disconnectedCallback(); + window.removeEventListener('keydown', this._handleKeydown); +} +``` + +An element may be re-connected after being disconnected. + +#### Returns + +`void` + +#### Overrides + +`LitElement.disconnectedCallback` + +## styles + +### styles + +> `static` **styles**: `CSSResult`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:53](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/tree-item.ts#L53) + +Array of styles to apply to the element. The styles should be defined +using the css tag function, via constructible stylesheets, or +imported from native CSS module scripts. + +Note on Content Security Policy: + +Element styles are implemented with `<style>` tags when the browser doesn't +support adopted StyleSheets. To use such `<style>` tags with the style-src +CSP directive, the style-src value must either include 'unsafe-inline' or +`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated +nonce. + +To provide a nonce to use on generated `<style>` elements, set +`window.litNonce` to a server-generated nonce in your page's HTML, before +loading application code: + +```html +<script> + // Generated and unique per request: + window.litNonce = 'a1b2c3d4'; +</script> +``` + +#### Nocollapse + +#### Overrides + +`LitElement.styles` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/enumerations/DatePart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/enumerations/DatePart.md new file mode 100644 index 000000000..ceb4592f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/enumerations/DatePart.md @@ -0,0 +1,66 @@ +# Enumeration: DatePart + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:12](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L12) + +Date Part Classes Module + +This module provides structured classes for date/time parts used in date-time input. +Each part type has its own class with specific validation and spin behavior. + +Classes are private to this module - only types and factory function are exported. + +## Enumeration Members + +### AmPm + +> **AmPm**: `"amPm"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:19](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L19) + +*** + +### Date + +> **Date**: `"date"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:15](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L15) + +*** + +### Hours + +> **Hours**: `"hours"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L16) + +*** + +### Minutes + +> **Minutes**: `"minutes"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:17](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L17) + +*** + +### Month + +> **Month**: `"month"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:13](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L13) + +*** + +### Seconds + +> **Seconds**: `"seconds"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:18](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L18) + +*** + +### Year + +> **Year**: `"year"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:14](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/date-time-input/date-part.ts#L14) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/configureTheme.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/configureTheme.md new file mode 100644 index 000000000..a771300e2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/configureTheme.md @@ -0,0 +1,28 @@ +# Function: configureTheme() + +> **configureTheme**(`t`, `v?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/theming/config.ts:57](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/theming/config.ts#L57) + +Allows the global configuration of the active theme. + +Usage: + ```ts + import { configureTheme } from 'igniteui-webcomponents'; + + configureTheme('material', 'light'); + ``` + +## Parameters + +### t + +`Theme` + +### v? + +`ThemeVariant` = `'light'` + +## Returns + +`void` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/registerIcon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/registerIcon.md new file mode 100644 index 000000000..af6914222 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/registerIcon.md @@ -0,0 +1,53 @@ +# Function: registerIcon() + +> **registerIcon**(`name`, `url`, `collection?`): `Promise`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.registry.ts:315](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.registry.ts#L315) + +Registers an icon by fetching it from a URL. + +## Parameters + +### name + +`string` + +The unique name for the icon + +### url + +`string` + +The URL to fetch the SVG icon from + +### collection? + +`string` = `'default'` + +The collection to register the icon in (default: 'default') + +## Returns + +`Promise`\<`void`\> + +A promise that resolves when the icon is registered + +## Throws + +If the HTTP request fails or returns a non-OK status + +## Remarks + +This function fetches SVG content from the provided URL and registers it +in the icon registry. The icon becomes immediately available to all icon +components in the application. + +## Example + +```typescript +// Register an icon from a URL +await registerIcon('custom-icon', '/assets/icons/custom.svg'); + +// Use in HTML +// <igc-icon name="custom-icon"></igc-icon> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/registerIconFromText.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/registerIconFromText.md new file mode 100644 index 000000000..20622fcfd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/registerIconFromText.md @@ -0,0 +1,53 @@ +# Function: registerIconFromText() + +> **registerIconFromText**(`name`, `iconText`, `collection?`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.registry.ts:355](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.registry.ts#L355) + +Registers an icon from SVG text content. + +## Parameters + +### name + +`string` + +The unique name for the icon + +### iconText + +`string` + +The SVG markup as a string + +### collection? + +`string` = `'default'` + +The collection to register the icon in (default: 'default') + +## Returns + +`void` + +## Throws + +If the SVG text is malformed or doesn't contain an SVG element + +## Remarks + +This is the preferred method for registering icons when you have the SVG +content directly (e.g., from a bundled asset or inline string). The icon +becomes immediately available to all icon components. + +The SVG text is parsed to extract viewBox, title, and other metadata. + +## Example + +```typescript +const iconSvg = '<svg viewBox="0 0 24 24"><path d="..."/></svg>'; +registerIconFromText('my-icon', iconSvg, 'custom'); + +// Use in HTML +// <igc-icon name="my-icon" collection="custom"></igc-icon> +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/setIconRef.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/setIconRef.md new file mode 100644 index 000000000..ba5fd8779 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/setIconRef.md @@ -0,0 +1,59 @@ +# Function: setIconRef() + +> **setIconRef**(`name`, `collection`, `icon`): `void` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.registry.ts:396](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/icon.registry.ts#L396) + +Sets an icon reference/alias that points to another icon. + +## Parameters + +### name + +`string` + +The alias name + +### collection + +`string` + +The collection for the alias + +### icon + +`IconMeta` + +The target icon metadata (name and collection) + +## Returns + +`void` + +## Remarks + +Icon references allow you to create aliases that point to other icons. +This is useful for: +- Creating semantic names (e.g., 'close' → 'x') +- Overriding default icon mappings +- Providing fallbacks for missing icons + +User-set references are marked as external and have higher priority than +theme-based aliases. They are also synchronized across browsing contexts. + +## Example + +```typescript +// Register target icon +registerIconFromText('x-mark', '<svg>...</svg>'); + +// Create an alias +setIconRef('close', 'default', { + name: 'x-mark', + collection: 'default' +}); + +// Both work the same way: +// <igc-icon name="close"></igc-icon> +// <igc-icon name="x-mark"></igc-icon> +``` diff --git "a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/\316\270addAdoptedStylesController.md" "b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/\316\270addAdoptedStylesController.md" new file mode 100644 index 000000000..522b0becf --- /dev/null +++ "b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/\316\270addAdoptedStylesController.md" @@ -0,0 +1,34 @@ +# Function: θaddAdoptedStylesController() + +> **θaddAdoptedStylesController**(`host`): `AdoptedStylesController` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/common/controllers/adopt-styles.ts:213](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/common/controllers/adopt-styles.ts#L213) + +Creates and attaches an AdoptedStylesController to a Lit component. + +## Parameters + +### host + +`ReactiveControllerHost` & `LitElement` + +The Lit component that will host the controller + +## Returns + +`AdoptedStylesController` + +The created AdoptedStylesController instance + +## Example + +```typescript +class MyComponent extends LitElement { + private readonly _adoptedStyles = addAdoptedStylesController(this); + + connectedCallback() { + super.connectedCallback(); + this._adoptedStyles.shouldAdoptStyles(true); + } +} +``` diff --git "a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/\316\270addThemingController.md" "b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/\316\270addThemingController.md" new file mode 100644 index 000000000..2d09f27dc --- /dev/null +++ "b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/functions/\316\270addThemingController.md" @@ -0,0 +1,71 @@ +# Function: θaddThemingController() + +> **θaddThemingController**(`host`, `themes`, `config?`): `ThemingController` + +Defined in: [webcomponents/igniteui-webcomponents/src/theming/theming-controller.ts:250](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/theming/theming-controller.ts#L250) + +Creates and attaches a ThemingController to the given host element. + +This is the preferred way to add theming support to a component. The controller +is registered with the host's reactive controller lifecycle and automatically +resolves the active theme from an ancestor `<igc-theme-provider>` context or +falls back to the application-wide theme set via `configureTheme()`. + +## Parameters + +### host + +`ReactiveControllerHost` & `ReactiveElement` + +The Lit element that will host the controller. + +### themes + +`Themes` + +The theme styles map containing `light` and `dark` variant entries, + each keyed by theme name (`bootstrap`, `material`, `fluent`, `indigo`) and + an optional `shared` entry applied regardless of theme. + +### config? + +`ThemingControllerConfig` + +Optional configuration. + +## Returns + +`ThemingController` + +The created ThemingController instance. + +## Examples + +Minimal setup in a component constructor: +```typescript +import { addThemingController } from '../../theming/theming-controller.js'; +import { all } from './themes/themes.js'; + +export default class IgcMyComponent extends LitElement { + constructor() { + super(); + addThemingController(this, all); + } +} +``` + +With a `themeChange` callback and retained controller reference: +```typescript +export default class IgcMyComponent extends LitElement { + private readonly _themingController = addThemingController(this, all, { + themeChange(theme) { + // Called on `this` (the host) whenever the theme switches + console.log(`Theme changed to: ${theme}`); + }, + }); + + protected override render() { + return html`<span>Current variant: ${this._themingController.variant}</span>`; + } +} +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/index.json b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/index.json new file mode 100644 index 000000000..f1c2a1402 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/index.json @@ -0,0 +1,848 @@ +{ + "IgcAccordionComponent": { + "title": "Class: IgcAccordionComponent", + "component": "IgcAccordionComponent", + "file": "classes/IgcAccordionComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/accordion/accordion.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compone" + }, + "IgcAvatarComponent": { + "title": "Class: IgcAvatarComponent", + "component": "IgcAvatarComponent", + "file": "classes/IgcAvatarComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/avatar/avatar.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/av" + }, + "IgcBadgeComponent": { + "title": "Class: IgcBadgeComponent", + "component": "IgcBadgeComponent", + "file": "classes/IgcBadgeComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/badge/badge.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/badg" + }, + "IgcBannerComponent": { + "title": "Class: IgcBannerComponent", + "component": "IgcBannerComponent", + "file": "classes/IgcBannerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/banner/banner.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/ba" + }, + "IgcButtonComponent": { + "title": "Class: IgcButtonComponent", + "component": "IgcButtonComponent", + "file": "classes/IgcButtonComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/button/button.ts:26](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/bu" + }, + "IgcButtonGroupComponent": { + "title": "Class: IgcButtonGroupComponent", + "component": "IgcButtonGroupComponent", + "file": "classes/IgcButtonGroupComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/button-group.ts:38](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/c" + }, + "IgcCalendarComponent": { + "title": "Class: IgcCalendarComponent", + "component": "IgcCalendarComponent", + "file": "classes/IgcCalendarComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/calendar/calendar.ts:107](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/componen" + }, + "IgcCardActionsComponent": { + "title": "Class: IgcCardActionsComponent", + "component": "IgcCardActionsComponent", + "file": "classes/IgcCardActionsComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.actions.ts:30](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcCardComponent": { + "title": "Class: IgcCardComponent", + "component": "IgcCardComponent", + "file": "classes/IgcCardComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.ts:39](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/card/c" + }, + "IgcCardContentComponent": { + "title": "Class: IgcCardContentComponent", + "component": "IgcCardContentComponent", + "file": "classes/IgcCardContentComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.content.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcCardHeaderComponent": { + "title": "Class: IgcCardHeaderComponent", + "component": "IgcCardHeaderComponent", + "file": "classes/IgcCardHeaderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.header.ts:33](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components" + }, + "IgcCardMediaComponent": { + "title": "Class: IgcCardMediaComponent", + "component": "IgcCardMediaComponent", + "file": "classes/IgcCardMediaComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/card/card.media.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/" + }, + "IgcCarouselComponent": { + "title": "Class: IgcCarouselComponent", + "component": "IgcCarouselComponent", + "file": "classes/IgcCarouselComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel.ts:95](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcCarouselIndicatorComponent": { + "title": "Class: IgcCarouselIndicatorComponent", + "component": "IgcCarouselIndicatorComponent", + "file": "classes/IgcCarouselIndicatorComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-indicator.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src" + }, + "IgcCarouselSlideComponent": { + "title": "Class: IgcCarouselSlideComponent", + "component": "IgcCarouselSlideComponent", + "file": "classes/IgcCarouselSlideComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/carousel/carousel-slide.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/com" + }, + "IgcChatComponent": { + "title": "Class: IgcChatComponent", + "component": "IgcChatComponent", + "file": "classes/IgcChatComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:185](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/" + }, + "IgcCheckboxComponent": { + "title": "Class: IgcCheckboxComponent", + "component": "IgcCheckboxComponent", + "file": "classes/IgcCheckboxComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/checkbox.ts:34](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcChipComponent": { + "title": "Class: IgcChipComponent", + "component": "IgcChipComponent", + "file": "classes/IgcChipComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chip/chip.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chip/c" + }, + "IgcCircularGradientComponent": { + "title": "Class: IgcCircularGradientComponent", + "component": "IgcCircularGradientComponent", + "file": "classes/IgcCircularGradientComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-gradient.ts:14](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/" + }, + "IgcCircularProgressComponent": { + "title": "Class: IgcCircularProgressComponent", + "component": "IgcCircularProgressComponent", + "file": "classes/IgcCircularProgressComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/circular-progress.ts:38](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/" + }, + "IgcComboComponent": { + "title": "Class: IgcComboComponent\\<T\\>", + "component": "IgcComboComponent\\<T\\>", + "file": "classes/IgcComboComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/combo/combo.ts:109](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/com" + }, + "IgcDatePickerComponent": { + "title": "Class: IgcDatePickerComponent", + "component": "IgcDatePickerComponent", + "file": "classes/IgcDatePickerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/date-picker/date-picker.ts:173](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/co" + }, + "IgcDateRangePickerComponent": { + "title": "Class: IgcDateRangePickerComponent", + "component": "IgcDateRangePickerComponent", + "file": "classes/IgcDateRangePickerComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/date-range-picker/date-range-picker.ts:193](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a8" + }, + "IgcDateTimeInputComponent": { + "title": "Class: IgcDateTimeInputComponent", + "component": "IgcDateTimeInputComponent", + "file": "classes/IgcDateTimeInputComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-time-input.ts:92](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf" + }, + "IgcDialogComponent": { + "title": "Class: IgcDialogComponent", + "component": "IgcDialogComponent", + "file": "classes/IgcDialogComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/dialog/dialog.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/di" + }, + "IgcDividerComponent": { + "title": "Class: IgcDividerComponent", + "component": "IgcDividerComponent", + "file": "classes/IgcDividerComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/divider/divider.ts:20](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/" + }, + "IgcDropdownComponent": { + "title": "Class: IgcDropdownComponent", + "component": "IgcDropdownComponent", + "file": "classes/IgcDropdownComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcDropdownGroupComponent": { + "title": "Class: IgcDropdownGroupComponent", + "component": "IgcDropdownGroupComponent", + "file": "classes/IgcDropdownGroupComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-group.ts:22](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/com" + }, + "IgcDropdownHeaderComponent": { + "title": "Class: IgcDropdownHeaderComponent", + "component": "IgcDropdownHeaderComponent", + "file": "classes/IgcDropdownHeaderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-header.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/co" + }, + "IgcDropdownItemComponent": { + "title": "Class: IgcDropdownItemComponent", + "component": "IgcDropdownItemComponent", + "file": "classes/IgcDropdownItemComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/dropdown/dropdown-item.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/comp" + }, + "IgcExpansionPanelComponent": { + "title": "Class: IgcExpansionPanelComponent", + "component": "IgcExpansionPanelComponent", + "file": "classes/IgcExpansionPanelComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/expansion-panel/expansion-panel.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf" + }, + "IgcFileInputComponent": { + "title": "Class: IgcFileInputComponent", + "component": "IgcFileInputComponent", + "file": "classes/IgcFileInputComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/file-input/file-input.ts:74](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compo" + }, + "IgcIconButtonComponent": { + "title": "Class: IgcIconButtonComponent", + "component": "IgcIconButtonComponent", + "file": "classes/IgcIconButtonComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/button/icon-button.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/componen" + }, + "IgcIconComponent": { + "title": "Class: IgcIconComponent", + "component": "IgcIconComponent", + "file": "classes/IgcIconComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/icon/icon.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/icon/i" + }, + "IgcInputComponent": { + "title": "Class: IgcInputComponent", + "component": "IgcInputComponent", + "file": "classes/IgcInputComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/input/input.ts:66](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/inpu" + }, + "IgcLinearProgressComponent": { + "title": "Class: IgcLinearProgressComponent", + "component": "IgcLinearProgressComponent", + "file": "classes/IgcLinearProgressComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/progress/linear-progress.ts:34](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/co" + }, + "IgcListComponent": { + "title": "Class: IgcListComponent", + "component": "IgcListComponent", + "file": "classes/IgcListComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list.ts:19](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/list/l" + }, + "IgcListHeaderComponent": { + "title": "Class: IgcListHeaderComponent", + "component": "IgcListHeaderComponent", + "file": "classes/IgcListHeaderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-header.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components" + }, + "IgcListItemComponent": { + "title": "Class: IgcListItemComponent", + "component": "IgcListItemComponent", + "file": "classes/IgcListItemComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/list/list-item.ts:30](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/l" + }, + "IgcMaskInputComponent": { + "title": "Class: IgcMaskInputComponent", + "component": "IgcMaskInputComponent", + "file": "classes/IgcMaskInputComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/mask-input/mask-input.ts:56](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compo" + }, + "IgcNavbarComponent": { + "title": "Class: IgcNavbarComponent", + "component": "IgcNavbarComponent", + "file": "classes/IgcNavbarComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/navbar/navbar.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/na" + }, + "IgcNavDrawerComponent": { + "title": "Class: IgcNavDrawerComponent", + "component": "IgcNavDrawerComponent", + "file": "classes/IgcNavDrawerComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer.ts:27](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compo" + }, + "IgcNavDrawerHeaderItemComponent": { + "title": "Class: IgcNavDrawerHeaderItemComponent", + "component": "IgcNavDrawerHeaderItemComponent", + "file": "classes/IgcNavDrawerHeaderItemComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-header-item.ts:15](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821c" + }, + "IgcNavDrawerItemComponent": { + "title": "Class: IgcNavDrawerItemComponent", + "component": "IgcNavDrawerItemComponent", + "file": "classes/IgcNavDrawerItemComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/nav-drawer/nav-drawer-item.ts:23](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/" + }, + "IgcRadioComponent": { + "title": "Class: IgcRadioComponent", + "component": "IgcRadioComponent", + "file": "classes/IgcRadioComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/radio/radio.ts:62](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/radi" + }, + "IgcRadioGroupComponent": { + "title": "Class: IgcRadioGroupComponent", + "component": "IgcRadioGroupComponent", + "file": "classes/IgcRadioGroupComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/radio-group/radio-group.ts:21](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/com" + }, + "IgcRangeSliderComponent": { + "title": "Class: IgcRangeSliderComponent", + "component": "IgcRangeSliderComponent", + "file": "classes/IgcRangeSliderComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/range-slider.ts:53](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compone" + }, + "IgcRatingComponent": { + "title": "Class: IgcRatingComponent", + "component": "IgcRatingComponent", + "file": "classes/IgcRatingComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating.ts:72](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/ra" + }, + "IgcRatingSymbolComponent": { + "title": "Class: IgcRatingSymbolComponent", + "component": "IgcRatingSymbolComponent", + "file": "classes/IgcRatingSymbolComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/rating/rating-symbol.ts:19](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compon" + }, + "IgcRippleComponent": { + "title": "Class: IgcRippleComponent", + "component": "IgcRippleComponent", + "file": "classes/IgcRippleComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/ripple/ripple.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/ri" + }, + "IgcSelectComponent": { + "title": "Class: IgcSelectComponent", + "component": "IgcSelectComponent", + "file": "classes/IgcSelectComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select.ts:119](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/s" + }, + "IgcSelectGroupComponent": { + "title": "Class: IgcSelectGroupComponent", + "component": "IgcSelectGroupComponent", + "file": "classes/IgcSelectGroupComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-group.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compone" + }, + "IgcSelectHeaderComponent": { + "title": "Class: IgcSelectHeaderComponent", + "component": "IgcSelectHeaderComponent", + "file": "classes/IgcSelectHeaderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-header.ts:16](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compon" + }, + "IgcSelectItemComponent": { + "title": "Class: IgcSelectItemComponent", + "component": "IgcSelectItemComponent", + "file": "classes/IgcSelectItemComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/select/select-item.ts:22](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/componen" + }, + "IgcSliderComponent": { + "title": "Class: IgcSliderComponent", + "component": "IgcSliderComponent", + "file": "classes/IgcSliderComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider.ts:46](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/sl" + }, + "IgcSliderLabelComponent": { + "title": "Class: IgcSliderLabelComponent", + "component": "IgcSliderLabelComponent", + "file": "classes/IgcSliderLabelComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/slider/slider-label.ts:15](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/compone" + }, + "IgcSnackbarComponent": { + "title": "Class: IgcSnackbarComponent", + "component": "IgcSnackbarComponent", + "file": "classes/IgcSnackbarComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/snackbar/snackbar.ts:35](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcSplitterComponent": { + "title": "Class: IgcSplitterComponent", + "component": "IgcSplitterComponent", + "file": "classes/IgcSplitterComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/splitter/splitter.ts:132](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/componen" + }, + "IgcStepComponent": { + "title": "Class: IgcStepComponent", + "component": "IgcStepComponent", + "file": "classes/IgcStepComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/step.ts:92](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/ste" + }, + "IgcStepperComponent": { + "title": "Class: IgcStepperComponent", + "component": "IgcStepperComponent", + "file": "classes/IgcStepperComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/stepper/stepper.ts:108](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components" + }, + "IgcSwitchComponent": { + "title": "Class: IgcSwitchComponent", + "component": "IgcSwitchComponent", + "file": "classes/IgcSwitchComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/checkbox/switch.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/" + }, + "IgcTabComponent": { + "title": "Class: IgcTabComponent", + "component": "IgcTabComponent", + "file": "classes/IgcTabComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tab.ts:28](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/ta" + }, + "IgcTabsComponent": { + "title": "Class: IgcTabsComponent", + "component": "IgcTabsComponent", + "file": "classes/IgcTabsComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tabs/tabs.ts:70](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tabs/t" + }, + "IgcTextareaComponent": { + "title": "Class: IgcTextareaComponent", + "component": "IgcTextareaComponent", + "file": "classes/IgcTextareaComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/textarea/textarea.ts:90](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcThemeProviderComponent": { + "title": "Class: IgcThemeProviderComponent", + "component": "IgcThemeProviderComponent", + "file": "classes/IgcThemeProviderComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/theme-provider/theme-provider.ts:52](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/s" + }, + "IgcTileComponent": { + "title": "Class: IgcTileComponent", + "component": "IgcTileComponent", + "file": "classes/IgcTileComponent.md", + "type": "class", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile.ts:97](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/component" + }, + "IgcTileManagerComponent": { + "title": "Class: IgcTileManagerComponent", + "component": "IgcTileManagerComponent", + "file": "classes/IgcTileManagerComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tile-manager/tile-manager.ts:44](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/c" + }, + "IgcToastComponent": { + "title": "Class: IgcToastComponent", + "component": "IgcToastComponent", + "file": "classes/IgcToastComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/toast/toast.ts:17](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/toas" + }, + "IgcToggleButtonComponent": { + "title": "Class: IgcToggleButtonComponent", + "component": "IgcToggleButtonComponent", + "file": "classes/IgcToggleButtonComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/button-group/toggle-button.ts:24](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/" + }, + "IgcTooltipComponent": { + "title": "Class: IgcTooltipComponent", + "component": "IgcTooltipComponent", + "file": "classes/IgcTooltipComponent.md", + "type": "class", + "keywords": [ + "properties", + "methods" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tooltip/tooltip.ts:55](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/" + }, + "IgcTreeComponent": { + "title": "Class: IgcTreeComponent", + "component": "IgcTreeComponent", + "file": "classes/IgcTreeComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree.ts:39](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/tree/t" + }, + "IgcTreeItemComponent": { + "title": "Class: IgcTreeItemComponent", + "component": "IgcTreeItemComponent", + "file": "classes/IgcTreeItemComponent.md", + "type": "class", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/tree/tree-item.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/t" + }, + "DatePart": { + "title": "Enumeration: DatePart", + "component": "DatePart", + "file": "enumerations/DatePart.md", + "type": "enum", + "keywords": [], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/date-time-input/date-part.ts:12](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/c" + }, + "configureTheme": { + "title": "Function: configureTheme()", + "component": "configureTheme()", + "file": "functions/configureTheme.md", + "type": "function", + "keywords": [], + "summary": "> **configureTheme**(`t`, `v?`): `void`" + }, + "registerIcon": { + "title": "Function: registerIcon()", + "component": "registerIcon()", + "file": "functions/registerIcon.md", + "type": "function", + "keywords": [], + "summary": "> **registerIcon**(`name`, `url`, `collection?`): `Promise`\\<`void`\\>" + }, + "registerIconFromText": { + "title": "Function: registerIconFromText()", + "component": "registerIconFromText()", + "file": "functions/registerIconFromText.md", + "type": "function", + "keywords": [], + "summary": "> **registerIconFromText**(`name`, `iconText`, `collection?`): `void`" + }, + "setIconRef": { + "title": "Function: setIconRef()", + "component": "setIconRef()", + "file": "functions/setIconRef.md", + "type": "function", + "keywords": [], + "summary": "> **setIconRef**(`name`, `collection`, `icon`): `void`" + }, + "θaddAdoptedStylesController": { + "title": "Function: θaddAdoptedStylesController()", + "component": "θaddAdoptedStylesController()", + "file": "functions/θaddAdoptedStylesController.md", + "type": "function", + "keywords": [], + "summary": "> **θaddAdoptedStylesController**(`host`): `AdoptedStylesController`" + }, + "θaddThemingController": { + "title": "Function: θaddThemingController()", + "component": "θaddThemingController()", + "file": "functions/θaddThemingController.md", + "type": "function", + "keywords": [], + "summary": "> **θaddThemingController**(`host`, `themes`, `config?`): `ThemingController`" + }, + "ChatAttachmentRenderContext": { + "title": "Interface: ChatAttachmentRenderContext", + "component": "ChatAttachmentRenderContext", + "file": "interfaces/ChatAttachmentRenderContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:294](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat" + }, + "ChatInputRenderContext": { + "title": "Interface: ChatInputRenderContext", + "component": "ChatInputRenderContext", + "file": "interfaces/ChatInputRenderContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:268](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat" + }, + "ChatMessageRenderContext": { + "title": "Interface: ChatMessageRenderContext", + "component": "ChatMessageRenderContext", + "file": "interfaces/ChatMessageRenderContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:283](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat" + }, + "ChatRenderContext": { + "title": "Interface: ChatRenderContext", + "component": "ChatRenderContext", + "file": "interfaces/ChatRenderContext.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:257](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat" + }, + "ChatRenderers": { + "title": "Interface: ChatRenderers", + "component": "ChatRenderers", + "file": "interfaces/ChatRenderers.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:176](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat" + }, + "IgcChatComponentEventMap": { + "title": "Interface: IgcChatComponentEventMap", + "component": "IgcChatComponentEventMap", + "file": "interfaces/IgcChatComponentEventMap.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/c" + }, + "IgcChatMessage": { + "title": "Interface: IgcChatMessage", + "component": "IgcChatMessage", + "file": "interfaces/IgcChatMessage.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:6](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/t" + }, + "IgcChatMessageAttachment": { + "title": "Interface: IgcChatMessageAttachment", + "component": "IgcChatMessageAttachment", + "file": "interfaces/IgcChatMessageAttachment.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/" + }, + "IgcChatMessageReaction": { + "title": "Interface: IgcChatMessageReaction", + "component": "IgcChatMessageReaction", + "file": "interfaces/IgcChatMessageReaction.md", + "type": "interface", + "keywords": [ + "properties" + ], + "summary": "Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:161](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat" + }, + "ChatSuggestionsPosition": { + "title": "Type Alias: ChatSuggestionsPosition", + "component": "ChatSuggestionsPosition", + "file": "type-aliases/ChatSuggestionsPosition.md", + "type": "type", + "keywords": [], + "summary": "> **ChatSuggestionsPosition** = `\"below-input\"` \\| `\"below-messages\"`" + }, + "ChatTemplateRenderer": { + "title": "Type Alias: ChatTemplateRenderer\\<T\\>", + "component": "ChatTemplateRenderer\\<T\\>", + "file": "type-aliases/ChatTemplateRenderer.md", + "type": "type", + "keywords": [], + "summary": "> **ChatTemplateRenderer**\\<`T`\\> = (`ctx`) => `unknown`" + }, + "IgcChatOptions": { + "title": "Type Alias: IgcChatOptions", + "component": "IgcChatOptions", + "file": "type-aliases/IgcChatOptions.md", + "type": "type", + "keywords": [ + "properties" + ], + "summary": "> **IgcChatOptions** = `object`" + }, + "PopoverPlacement": { + "title": "Type Alias: PopoverPlacement", + "component": "PopoverPlacement", + "file": "type-aliases/PopoverPlacement.md", + "type": "type", + "keywords": [], + "summary": "> **PopoverPlacement** = `\"top\"` \\| `\"top-start\"` \\| `\"top-end\"` \\| `\"bottom\"` \\| `\"bottom-start\"` \\| `\"bottom-end\"` \\| `\"right\"` \\| `\"right-start\"` \\| `\"right-end\"` \\| `\"left\"` \\| `\"left-start\"` \\| `" + } +} \ No newline at end of file diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatAttachmentRenderContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatAttachmentRenderContext.md new file mode 100644 index 000000000..e0e74d7a0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatAttachmentRenderContext.md @@ -0,0 +1,48 @@ +# Interface: ChatAttachmentRenderContext + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:294](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L294) + +The context object for renderers that deal with a specific attachment within a message. +It extends the message context with the attachment data. + +## Extends + +- [`ChatMessageRenderContext`](ChatMessageRenderContext.md) + +## Properties + +### attachment + +> **attachment**: [`IgcChatMessageAttachment`](IgcChatMessageAttachment.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:298](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L298) + +The specific attachment being rendered. + +*** + +### instance + +> **instance**: [`IgcChatComponent`](../classes/IgcChatComponent.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:261](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L261) + +The instance of the IgcChatComponent. + +#### Inherited from + +[`ChatMessageRenderContext`](ChatMessageRenderContext.md).[`instance`](ChatMessageRenderContext.md#instance) + +*** + +### message + +> **message**: [`IgcChatMessage`](IgcChatMessage.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:287](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L287) + +The specific chat message being rendered. + +#### Inherited from + +[`ChatMessageRenderContext`](ChatMessageRenderContext.md).[`message`](ChatMessageRenderContext.md#message) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatInputRenderContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatInputRenderContext.md new file mode 100644 index 000000000..a4941ed09 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatInputRenderContext.md @@ -0,0 +1,44 @@ +# Interface: ChatInputRenderContext + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:268](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L268) + +The context object for renderers that deal with the chat input area. +It extends the base context with input-specific properties. + +## Extends + +- [`ChatRenderContext`](ChatRenderContext.md) + +## Properties + +### attachments + +> **attachments**: [`IgcChatMessageAttachment`](IgcChatMessageAttachment.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:272](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L272) + +The list of attachments currently in the input area. + +*** + +### instance + +> **instance**: [`IgcChatComponent`](../classes/IgcChatComponent.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:261](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L261) + +The instance of the IgcChatComponent. + +#### Inherited from + +[`ChatRenderContext`](ChatRenderContext.md).[`instance`](ChatRenderContext.md#instance) + +*** + +### value + +> **value**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:276](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L276) + +The current value of the input field. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatMessageRenderContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatMessageRenderContext.md new file mode 100644 index 000000000..f9c14bfcd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatMessageRenderContext.md @@ -0,0 +1,38 @@ +# Interface: ChatMessageRenderContext + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:283](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L283) + +The context object for renderers that deal with a specific chat message. +It extends the base context with the message data. + +## Extends + +- [`ChatRenderContext`](ChatRenderContext.md) + +## Extended by + +- [`ChatAttachmentRenderContext`](ChatAttachmentRenderContext.md) + +## Properties + +### instance + +> **instance**: [`IgcChatComponent`](../classes/IgcChatComponent.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:261](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L261) + +The instance of the IgcChatComponent. + +#### Inherited from + +[`ChatRenderContext`](ChatRenderContext.md).[`instance`](ChatRenderContext.md#instance) + +*** + +### message + +> **message**: [`IgcChatMessage`](IgcChatMessage.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:287](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L287) + +The specific chat message being rendered. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatRenderContext.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatRenderContext.md new file mode 100644 index 000000000..1a42fc214 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatRenderContext.md @@ -0,0 +1,20 @@ +# Interface: ChatRenderContext + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:257](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L257) + +The base context object passed to custom renderer functions, containing the chat component instance. + +## Extended by + +- [`ChatInputRenderContext`](ChatInputRenderContext.md) +- [`ChatMessageRenderContext`](ChatMessageRenderContext.md) + +## Properties + +### instance + +> **instance**: [`IgcChatComponent`](../classes/IgcChatComponent.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:261](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L261) + +The instance of the IgcChatComponent. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatRenderers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatRenderers.md new file mode 100644 index 000000000..305de16fe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/ChatRenderers.md @@ -0,0 +1,166 @@ +# Interface: ChatRenderers + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:176](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L176) + +A collection of optional rendering functions that allow for custom UI rendering. +Each property is a function that takes a context object and returns a template result. + +## Properties + +### attachment? + +> `optional` **attachment?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatAttachmentRenderContext`](ChatAttachmentRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:180](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L180) + +Custom renderer for a single chat message attachment. + +*** + +### attachmentContent? + +> `optional` **attachmentContent?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatAttachmentRenderContext`](ChatAttachmentRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:184](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L184) + +Custom renderer for the content of an attachment. + +*** + +### attachmentHeader? + +> `optional` **attachmentHeader?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatAttachmentRenderContext`](ChatAttachmentRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:188](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L188) + +Custom renderer for the header of an attachment. + +*** + +### fileUploadButton? + +> `optional` **fileUploadButton?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatRenderContext`](ChatRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:192](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L192) + +Custom renderer for the file upload button in the input area. + +*** + +### input? + +> `optional` **input?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatInputRenderContext`](ChatInputRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:196](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L196) + +Custom renderer for the main chat input field. + +*** + +### inputActions? + +> `optional` **inputActions?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatRenderContext`](ChatRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:200](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L200) + +Custom renderer for the actions container within the input area. + +*** + +### inputActionsEnd? + +> `optional` **inputActionsEnd?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatRenderContext`](ChatRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:204](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L204) + +Custom renderer for the actions at the end of the input area. + +*** + +### inputActionsStart? + +> `optional` **inputActionsStart?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatRenderContext`](ChatRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:208](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L208) + +Custom renderer for the actions at the start of the input area. + +*** + +### inputAttachments? + +> `optional` **inputAttachments?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatInputRenderContext`](ChatInputRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:212](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L212) + +Custom renderer for the attachment previews within the input field. + +*** + +### message? + +> `optional` **message?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatMessageRenderContext`](ChatMessageRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:216](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L216) + +Custom renderer for an entire chat message bubble. + +*** + +### messageActions? + +> `optional` **messageActions?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatMessageRenderContext`](ChatMessageRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:220](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L220) + +Custom renderer for message-specific actions (e.g., reply or delete buttons). + +*** + +### messageAttachments? + +> `optional` **messageAttachments?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatMessageRenderContext`](ChatMessageRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:224](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L224) + +Custom renderer for the attachments associated with a message. + +*** + +### messageContent? + +> `optional` **messageContent?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatMessageRenderContext`](ChatMessageRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:228](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L228) + +Custom renderer for the main text and content of a message. + +*** + +### messageHeader? + +> `optional` **messageHeader?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatMessageRenderContext`](ChatMessageRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:232](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L232) + +Custom renderer for the header of a message, including sender and timestamp. + +*** + +### sendButton? + +> `optional` **sendButton?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatRenderContext`](ChatRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:236](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L236) + +Custom renderer for the message send button. + +*** + +### suggestionPrefix? + +> `optional` **suggestionPrefix?**: [`ChatTemplateRenderer`](../type-aliases/ChatTemplateRenderer.md)\<[`ChatRenderContext`](ChatRenderContext.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:240](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L240) + +Custom renderer for the prefix text shown before suggestions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatComponentEventMap.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatComponentEventMap.md new file mode 100644 index 000000000..1af936baf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatComponentEventMap.md @@ -0,0 +1,116 @@ +# Interface: IgcChatComponentEventMap + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:41](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L41) + +Defines the custom events dispatched by the `<igc-chat>` component. + +## Properties + +### igcAttachmentAdded + +> **igcAttachmentAdded**: `CustomEvent`\<[`IgcChatMessageAttachment`](IgcChatMessageAttachment.md)[]\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:61](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L61) + +Dispatched when attachment(s) are added either through drag & drop or through +the default file input. + +*** + +### igcAttachmentClick + +> **igcAttachmentClick**: `CustomEvent`\<[`IgcChatMessageAttachment`](IgcChatMessageAttachment.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:55](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L55) + +Dispatched when a chat message attachment is clicked. + +*** + +### igcAttachmentDrag + +> **igcAttachmentDrag**: `CustomEvent`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:71](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L71) + +Dispatched during an attachment drag operation. + +*** + +### igcAttachmentDrop + +> **igcAttachmentDrop**: `CustomEvent`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:76](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L76) + +Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation). + +*** + +### igcAttachmentRemoved + +> **igcAttachmentRemoved**: `CustomEvent`\<[`IgcChatMessageAttachment`](IgcChatMessageAttachment.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:66](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L66) + +Dispatched when an attachment is removed by the user. + +*** + +### igcInputBlur + +> **igcInputBlur**: `CustomEvent`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L91) + +Dispatched when the chat input field loses focus. + +*** + +### igcInputChange + +> **igcInputChange**: `CustomEvent`\<`string`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:96](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L96) + +Dispatched when the content of the chat input changes. + +*** + +### igcInputFocus + +> **igcInputFocus**: `CustomEvent`\<`void`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:86](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L86) + +Dispatched when the chat input field gains focus. + +*** + +### igcMessageCreated + +> **igcMessageCreated**: `CustomEvent`\<[`IgcChatMessage`](IgcChatMessage.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:45](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L45) + +Dispatched when a new chat message is created (sent). + +*** + +### igcMessageReact + +> **igcMessageReact**: `CustomEvent`\<[`IgcChatMessageReaction`](IgcChatMessageReaction.md)\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:50](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L50) + +Dispatched when a message is reacted to. + +*** + +### igcTypingChange + +> **igcTypingChange**: `CustomEvent`\<`boolean`\> + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/chat.ts:81](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/chat.ts#L81) + +Dispatched when the typing status changes (e.g., user starts or stops typing). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessage.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessage.md new file mode 100644 index 000000000..c7fcfff5a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessage.md @@ -0,0 +1,66 @@ +# Interface: IgcChatMessage + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:6](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L6) + +Represents a single chat message in the conversation. + +## Properties + +### attachments? + +> `optional` **attachments?**: [`IgcChatMessageAttachment`](IgcChatMessageAttachment.md)[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:31](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L31) + +Optional list of attachments associated with the message, +such as images, files, or links. + +*** + +### id + +> **id**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:10](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L10) + +A unique identifier for the message. + +*** + +### reactions? + +> `optional` **reactions?**: `string`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:36](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L36) + +Optional list of reactions associated with the message. + +*** + +### sender + +> **sender**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:20](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L20) + +The identifier or name of the sender of the message. + +*** + +### text + +> **text**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:15](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L15) + +The textual content of the message. + +*** + +### timestamp? + +> `optional` **timestamp?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:25](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L25) + +The timestamp indicating when the message was sent. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessageAttachment.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessageAttachment.md new file mode 100644 index 000000000..513c7c7dd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessageAttachment.md @@ -0,0 +1,66 @@ +# Interface: IgcChatMessageAttachment + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:42](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L42) + +Represents an attachment associated with a chat message. + +## Properties + +### file? + +> `optional` **file?**: `File` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:62](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L62) + +The actual File object, if the attachment was provided locally (e.g. via upload). + +*** + +### id + +> **id**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:46](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L46) + +A unique identifier for the attachment. + +*** + +### name + +> **name**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:51](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L51) + +The display name of the attachment (e.g. file name). + +*** + +### thumbnail? + +> `optional` **thumbnail?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:72](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L72) + +Optional URL to a thumbnail preview of the attachment (e.g. for images or videos). + +*** + +### type? + +> `optional` **type?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:67](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L67) + +The MIME type or a custom type identifier for the attachment (e.g. "image/png", "pdf", "audio"). + +*** + +### url? + +> `optional` **url?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:57](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L57) + +The URL from which the attachment can be downloaded or viewed. +Typically used for attachments stored on a server or CDN. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessageReaction.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessageReaction.md new file mode 100644 index 000000000..b43c35755 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/interfaces/IgcChatMessageReaction.md @@ -0,0 +1,25 @@ +# Interface: IgcChatMessageReaction + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:161](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L161) + +Represents a user's reaction to a specific chat message. + +## Properties + +### message + +> **message**: [`IgcChatMessage`](IgcChatMessage.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:165](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L165) + +The chat message that the reaction is associated with. + +*** + +### reaction + +> **reaction**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:169](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L169) + +The string representation of the reaction, such as an emoji or a string; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/ChatSuggestionsPosition.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/ChatSuggestionsPosition.md new file mode 100644 index 000000000..48ac754f4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/ChatSuggestionsPosition.md @@ -0,0 +1,7 @@ +# Type Alias: ChatSuggestionsPosition + +> **ChatSuggestionsPosition** = `"below-input"` \| `"below-messages"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:252](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L252) + +A string literal type defining the two possible positions for chat suggestions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/ChatTemplateRenderer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/ChatTemplateRenderer.md new file mode 100644 index 000000000..50d356401 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/ChatTemplateRenderer.md @@ -0,0 +1,24 @@ +# Type Alias: ChatTemplateRenderer\<T\> + +> **ChatTemplateRenderer**\<`T`\> = (`ctx`) => `unknown` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:247](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L247) + +A generic type for a function that serves as a custom renderer. +It takes a context object of type T and returns a template result. + +## Type Parameters + +### T + +`T` + +## Parameters + +### ctx + +`T` + +## Returns + +`unknown` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/IgcChatOptions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/IgcChatOptions.md new file mode 100644 index 000000000..d3a1b9297 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/IgcChatOptions.md @@ -0,0 +1,153 @@ +# Type Alias: IgcChatOptions + +> **IgcChatOptions** = `object` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:78](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L78) + +Configuration options for customizing the behavior and appearance of the chat component. + +## Properties + +### acceptedFiles? + +> `optional` **acceptedFiles?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:100](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L100) + +The accepted files that could be attached. +Defines the file types as a list of comma-separated values (e.g. "image/*,.pdf") that the file input should accept. + +*** + +### adoptRootStyles? + +> `optional` **adoptRootStyles?**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:150](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L150) + +A boolean flag that, when `true`, enables a **quick and dirty workaround** for styling +components rendered within the Shadow DOM, from custom message renderers, by allowing them +to inherit styles from the document's root. This can be useful for developers who prefer not to handle +Shadow DOM encapsulation, but it is **not the recommended approach**. + +It is highly advised to use standard Web Component styling methods first, in this order: + +1. **CSS Variables and Parts API**: Use the exposed `::part` API with custom CSS variables to style +your content in your custom renderers. + +2. **`link` elements**: For larger style sheets, link them directly within the Shadow DOM to maintain +encapsulation. + +3. **Inline `<style>` tags**: Use these for small, self-contained styles within a template. + +This property should be used as a **last resort** as it can lead to **style leakage**, where +global styles unexpectedly bleed into the component, breaking encapsulation and causing +unpredictable visual issues. + +*** + +### currentUserId? + +> `optional` **currentUserId?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:82](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L82) + +The ID of the current user. Used to differentiate between incoming and outgoing messages. + +*** + +### disableAutoScroll? + +> `optional` **disableAutoScroll?**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:86](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L86) + +If `true`, prevents the chat from automatically scrolling to the latest message. + +*** + +### disableInputAttachments? + +> `optional` **disableInputAttachments?**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:91](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L91) + +If `true`, disables the ability to upload and send attachments. +Defaults to `false`. + +*** + +### headerText? + +> `optional` **headerText?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:104](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L104) + +Optional header text to display at the top of the chat component. + +*** + +### inputPlaceholder? + +> `optional` **inputPlaceholder?**: `string` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:109](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L109) + +Optional placeholder text for the chat input area. +Provides a hint to the user about what they can type (e.g. "Type a message..."). + +*** + +### isTyping? + +> `optional` **isTyping?**: `boolean` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:95](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L95) + +Indicates whether the other user is currently typing a message. + +*** + +### renderers? + +> `optional` **renderers?**: [`ChatRenderers`](../interfaces/ChatRenderers.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:155](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L155) + +An object containing a collection of custom renderers for different parts of the chat UI. + +*** + +### stopTypingDelay? + +> `optional` **stopTypingDelay?**: `number` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:127](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L127) + +Time in milliseconds to wait before dispatching a stop typing event. +Default is `3000`. + +*** + +### suggestions? + +> `optional` **suggestions?**: `string`[] + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:113](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L113) + +Suggested text snippets or quick replies that can be shown as user-selectable options. + +*** + +### suggestionsPosition? + +> `optional` **suggestionsPosition?**: [`ChatSuggestionsPosition`](ChatSuggestionsPosition.md) + +Defined in: [webcomponents/igniteui-webcomponents/src/components/chat/types.ts:122](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/chat/types.ts#L122) + +Controls the position of the chat suggestions within the component layout. + +- `"below-input"`: Renders suggestions below the chat input area. +- `"below-messages"`: Renders suggestions below the chat messages area. + +Default is `"below-messages"`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/PopoverPlacement.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/PopoverPlacement.md new file mode 100644 index 000000000..b2fc96b3a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/webcomponents/api/type-aliases/PopoverPlacement.md @@ -0,0 +1,7 @@ +# Type Alias: PopoverPlacement + +> **PopoverPlacement** = `"top"` \| `"top-start"` \| `"top-end"` \| `"bottom"` \| `"bottom-start"` \| `"bottom-end"` \| `"right"` \| `"right-start"` \| `"right-end"` \| `"left"` \| `"left-start"` \| `"left-end"` + +Defined in: [webcomponents/igniteui-webcomponents/src/components/popover/popover.ts:35](https://github.com/IgniteUI/igniteui-webcomponents/blob/0b463b45419431e183c47e40c64227a73a821caf/src/components/popover/popover.ts#L35) + +Describes the preferred placement of a toggle component. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/xplat-docs-architecture.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs/xplat-docs-architecture.md new file mode 100644 index 000000000..b7d37fa15 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/xplat-docs-architecture.md @@ -0,0 +1,291 @@ +# Cross-Platform Documentation Architecture (`igniteui-xplat-docs`) + +Analysis of how React, Blazor, and WebComponents documentation is built from the shared `igniteui-xplat-docs` repository. This is essential reference for building export/inject pipelines for these platforms. + +## Overview + +Unlike Angular (which has its own separate `igniteui-docfx` repo), React, Blazor, and WebComponents share **one repository** with platform-conditional content. Source files are platform-agnostic and use variable placeholders and conditional HTML comments. + +## Source File Structure + +``` +doc/en/components/ +├── bullet-graph.md # Standalone topic (all platforms) +├── geo-map.md # Standalone topic +├── grids/ +│ ├── _shared/ # Shared grid templates (expanded per grid type) +│ │ ├── editing.md +│ │ ├── filtering.md +│ │ └── sorting.md +│ ├── grid/ # Grid-specific overrides +│ ├── tree-grid/ # Tree Grid-specific overrides +│ ├── hierarchical-grid/ # Hierarchical Grid-specific overrides +│ ├── pivot-grid/ # Pivot Grid-specific overrides +│ └── data-grid/ # Data Grid topics +├── charts/ # Chart component docs (with features/ and types/ subdirs) +├── editors/ +├── inputs/ # Includes combo/ subdirectory +├── layouts/ +├── menus/ +├── notifications/ +├── scheduling/ +├── themes/ +├── changelog/ +├── grid-lite/ +├── interactivity/ +├── maps/ +└── images/ +``` + +## Variable Replacement System + +Source files use `{Variable}` placeholders that are replaced per-platform from `docConfig.json` (62KB config file). + +### Platform Variables (from `docConfig.json`) + +| Variable | Angular | React | WebComponents | Blazor | +|---|---|---|---|---| +| `{Platform}` | Angular | React | Web Components | Blazor | +| `{ProductName}` | Ignite UI for Angular | Ignite UI for React | Ignite UI for Web Components | Ignite UI for Blazor | +| `{IgPrefix}` | Igx | Igr | Igc | Igb | +| `{PackageCore}` | igniteui-angular-core | igniteui-react-core | igniteui-webcomponents-core | IgniteUI.Blazor | +| `{PackageGrids}` | igniteui-angular | igniteui-react-grids | igniteui-webcomponents-grids | IgniteUI.Blazor | +| `{PlatformLower}` | angular | react | web-components | blazor | + +### Grid Component Variables (shared templates) + +Shared grid docs in `_shared/` use `{ComponentTitle}`, `{ComponentName}`, `{ComponentSelector}` etc. which are mapped per grid type: + +| Variable | Grid | Tree Grid | Pivot Grid | Hierarchical Grid | +|---|---|---|---|---| +| `{GridTitle}` | Grid | Tree Grid | Pivot Grid | Hierarchical Grid | +| `{GridName}` (React) | IgrGrid | IgrTreeGrid | IgrPivotGrid | IgrHierarchicalGrid | +| `{GridName}` (Blazor) | IgbGrid | TreeGrid | PivotGrid | HierarchicalGrid | + +> **Note on Blazor naming:** The `{GridName}` replacement values in `docConfig.json` are inconsistent — only `GridName` has the `Igb` prefix. However, in actual Blazor code, component **tags** always use the `Igb` prefix: `<IgbGrid>`, `<IgbTreeGrid>`, `<IgbPivotGrid>`, `<IgbColumn>`, `<IgbPaginator>`, etc. The `{GridName}` variable is used in prose text, not in code blocks. +| `{GridSelector}` (WC) | igc-grid | igc-tree-grid | igc-pivot-grid | igc-hierarchical-grid | + +Grid component mapping is defined in `docComponents.json`. Each entry also includes `name` and `selectors` fields beyond what's shown here: +```json +{ + "Grid": { "name": "Grid", "output": "grid", "selectors": ["IgbGrid", "igx-grid", "igc-grid", "IgrGrid"], "types": ["IgbGrid", "IgxGridComponent", "IgcGridComponent", "IgrGrid"] }, + "TreeGrid": { "name": "TreeGrid", "output": "tree-grid", "selectors": ["IgbTreeGrid", "igx-tree-grid", "igc-tree-grid", "IgrTreeGrid"], "types": [...] }, + "PivotGrid": { "name": "PivotGrid", "output": "pivot-grid", "selectors": ["IgbPivotGrid", "igx-pivot-grid", "igc-pivot-grid", "IgrPivotGrid"], "types": [...] }, + "HierarchicalGrid": { "name": "HierarchicalGrid", "output": "hierarchical-grid", "selectors": ["IgbHierarchicalGrid", "igx-hierarchical-grid", "igc-hierarchical-grid", "IgrHierarchicalGrid"], "types": [...] } +} +``` + +## Platform-Conditional Content + +Sections are shown/hidden per platform using HTML comment markers: + +```md +<!-- Angular, React, WebComponents --> +## Dependencies +npm install --save {PackageCore} +<!-- end: Angular, React, WebComponents --> + +<!-- Blazor --> +## Dependencies +NuGet package: IgniteUI.Blazor +<!-- end: Blazor --> +``` + +The `MarkdownTransformer` strips sections that don't match the target platform. + +## Code Fence Filtering + +Each platform keeps only relevant code fences: + +| Platform | Keeps | Removes | +|---|---|---| +| Angular | `ts`, `html`, `js` | `razor`, `tsx` | +| React | `ts`, `tsx`, `js` | `razor`, `html` | +| WebComponents | `ts`, `html`, `js` | `razor`, `tsx` | +| Blazor | `razor` | `ts`, `tsx`, `html`, `js` | + +All platforms keep: `json`, `cmd`, `css`, `scss` + +## TOC Structure (`toc.json`) + +**Important:** The xplat repo uses `toc.json` (NOT `toc.yml` like Angular). + +Located at: `docfx/en/components/toc.json` + +```json +[ + { + "name": "General", + "header": true + }, + { + "exclude": ["Angular", "React", "WebComponents"], + "name": "Installation", + "items": [ + { "name": "Adding Licensed NuGet Feed", "href": "general-nuget-feed.md" }, + { "name": "Installing Ignite UI for Blazor", "href": "general-installing-blazor.md" } + ] + }, + { + "exclude": ["Blazor", "Angular"], + "name": "Getting Started", + "href": "general-getting-started.md" + } +] +``` + +Key difference from Angular's `toc.yml`: nodes have an **`exclude` array** listing platforms for which that entry should be hidden. The gulp `generateTocFor()` function filters these per platform. + +## API Mapping (`apiMap/` directory) + +The `apiMap/` directory contains per-platform JSON files that map internal/original type names to platform-specific names. These are used by `MarkdownTransformer` to generate correct API documentation hyperlinks. + +``` +apiMap/ +├── Angular/ +├── Blazor/ +├── React/ +│ ├── CheckboxList.JS.r.apiMap.json +│ ├── DataChart.CATEGORYCHART.JS.r.apiMap.json +│ └── ... +└── WebComponents/ +``` + +### Structure of an apiMap file + +```json +{ + "types": [ + { + "originalName": "CheckboxList", + "originalNamespace": "Infragistics.Controls.Inputs.Implementation", + "packageName": "igniteui-data-grids", + "names": [{ "platform": "React", "fileName": "igr-checkbox-list.ts", "mappedName": "IgrCheckboxList" }], + "members": [ + { "names": [{ "platform": "React", "mappedType": "number", "mappedName": "actualRowHeight" }], "originalName": "ActualRowHeight" }, + { "names": [{ "platform": "React", "mappedType": "method", "mappedName": "addKeyValue" }], "originalName": "AddKeyValue" } + ] + } + ] +} +``` + +### What the mappings do + +1. **Type name resolution** — Maps original C# names to platform-specific names (e.g. `XamBulletGraph` → `IgrBulletGraph` for React, `IgbBulletGraph` for Blazor) +2. **Member name resolution** — Maps PascalCase originals to camelCase platform names (e.g. `BackgroundColor` → `backgroundColor`) +3. **API URL generation** — Uses `packageName` + resolved type name + type kind (class/enum/interface) to build correct API doc URLs: + - React: `.../api/docs/typescript/latest/classes/igrbulletgraph.html` + - Blazor: `.../blazor-api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html` +4. **Package ownership** — Each type has a `packageName` (e.g. `igniteui-react-core`) that determines the URL path segment + +### How docs reference API types + +Source markdown uses `mentionedTypes` in frontmatter: +```yaml +mentionedTypes: ["XamBulletGraph"] +``` + +The `MarkdownTransformer` resolves these via apiMap lookups and generates clickable API links in the output. Inline backtick references like `` `TransitionDuration` `` are also resolved to API member links. + +### Implications for our pipeline + +If we use **Option A** (run gulp build first), API links are already resolved in the output. If we use **Option B** (custom export), we'd need to either replicate the apiMap resolution logic or accept unresolved `mentionedTypes` references in the compressed docs. + +## Sample References + +The xplat docs use **backtick syntax** for samples (not `<code-view>` like Angular): + +```md +`sample="/gauges/bullet-graph/animation", height="155", alt="{Platform} Bullet Graph Example"` +``` + +This is different from Angular's `<code-view style="..." iframe-src="...">` tags. The `MarkdownTransformer` converts these to the appropriate iframe/sample embed during build. + +> **Note:** A few xplat files also use `<code-view>` tags (e.g., `grids/hierarchical-grid/overview.md`, `grids/tree.md`, `grids/_shared/cascading-combos.md`), so the backtick syntax is the *primary* pattern but not the only one. + +## Build Pipeline (Gulp) + +``` +npm run buildReact → tsc && gulp buildOutputReact +npm run buildBlazor → tsc && gulp buildOutputBlazor +npm run buildWC → tsc && gulp buildOutputWC +``` + +Each runs: `verifyFiles` → `buildCoreAndTOC` (= `buildTOC` → `buildCore` → `buildStats`) + +### Build Steps + +1. **buildTOC**: Reads `toc.json`, filters by platform `exclude` arrays, generates `toc.yml`, produces `includedTopics` list +2. **buildCore**: Cleans `dist/<Platform>/`, runs `MarkdownTransformer.transformContent()` on each included topic: + - Resolves all `{Variable}` replacements from `docConfig.json` + - Strips non-matching platform conditional sections + - Filters code fences by language + - Expands shared grid templates (`_shared/` → `grid/`, `tree-grid/`, etc.) + - Resolves API links via `apiMap/` JSON files +3. **buildStats**: Generates sample usage stats to `stats/docStats-<Platform>.json` + +### Full DocFX Build (includes site generation) + +``` +npm run build-docfx-react → verifyFiles → buildReact → buildSite → replaceEnvironmentVariables → updateSiteMap → buildStats +``` + +### Output + +Platform-specific `.md` files go to `dist/<Platform>/en/components/` ready for docfx processing. + +## Environment Variables + +`docfx/en/environment.json` provides API URLs per environment: + +```json +{ + "production": { + "dvApiBaseUrl": "https://www.infragistics.com", + "wcApiUrl": "https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest" + } +} +``` + +Note: Unlike Angular's `environment.json` which has `angularApiUrl` and `sassApiUrl`, the xplat one has `dvApiBaseUrl` (shared across platforms) and `wcApiUrl` (WebComponents-specific). + +## Sample Browser URLs (from `docConfig.json`) + +| Platform | Production URL | +|---|---| +| React | `https://www.infragistics.com/react-demos` | +| Blazor | `https://www.infragistics.com/blazor-client` | +| WebComponents | `https://www.infragistics.com/webcomponents-demos` | +| Angular (xplat) | `https://www.infragistics.com/angular-demos-dv` | + +## Key Differences from Angular (`igniteui-docfx`) + +| Aspect | Angular (`igniteui-docfx`) | xplat (`igniteui-xplat-docs`) | +|---|---|---| +| TOC format | `toc.yml` | `toc.json` with `exclude` arrays | +| Variable system | `@@include()` / `@@if` / `@@variable` | `{Platform}`, `{ComponentName}`, etc. from `docConfig.json` | +| Platform filtering | None (Angular-only repo) | HTML comments `<!-- Blazor -->...<!-- end: Blazor -->` | +| Code fence filtering | None | Keeps only matching language per platform | +| Grid templates | `grids_templates/` with `@@if (igxName)` | `grids/_shared/` with `docComponents.json` mapping | +| Sample references | `<code-view>` with `iframe-src` | `` `sample="/path", height="X"` `` backtick syntax | +| Config | `environment.json` only | `docConfig.json` (62KB, all replacements) + `environment.json` | +| Build tool | docfx CLI directly | Gulp + `MarkdownTransformer` + docfx | +| Env var replacement | `{environment:angularApiUrl}` in source | Same pattern, resolved via `replaceEnvironmentVariables()` in gulp | + +## Implications for Our Pipeline + +To process React/Blazor/WebComponents docs, we have two options: + +### Option A: Run the gulp build first (recommended) +Run `npm run buildReact` (or Blazor/WC) to produce platform-resolved `.md` files in `dist/<Platform>/en/components/`, then use those as input to our export step. This leverages the existing `MarkdownTransformer` and avoids reimplementing its complex logic. + +### Option B: Reimplement transformation in our export script +Parse `toc.json`, apply `docConfig.json` replacements, strip platform conditionals, filter code fences. This is significantly more work and risks diverging from the official build. + +### Either way, we need to: +1. Use `toc.json` (not `.yml`) as source of truth, filtering by platform's `exclude` array +2. Handle the `` `sample="..."` `` syntax instead of `<code-view>` for sample injection +3. Use `docConfig.json` replacements specific to each platform +4. Use `environment.json` for API URL resolution (`dvApiBaseUrl`, `wcApiUrl`) +5. Adapt the compress prompt for each platform's prefix (`Igr`/`Igb`/`Igc`) and naming conventions diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md new file mode 100644 index 000000000..e86bb6711 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md @@ -0,0 +1,879 @@ +--- +title: Angular Accordion Component – Fully-featured collapsible panels - Infragistics - MIT license +_description: Angular Accordion is used to build vertical expandable panels in accordion menu. Check how to do it with Ignite UI for Angular accordion component. +_keywords: angular accordion, angular accordion component, angular accordion example, ignite ui for angular, angular UI components, infragistics +_license: MIT +_tocName: Accordion +--- + +# Angular Accordion Component Overview + +## What is Angular Accordion? + +The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. + +Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. + +## Angular Accordion Example + +The following is a basic Angular Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. + +In it, you can see how to define an `igx-accrodion` and its [expansion panels](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html). The sample also demonstrates the two types of expansion behavior. The switch button sets the [singleBranchExpand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#singleBranchExpand) property to toggle between single and multiple branches to be expanded at a time. + +```typescript +import { Component } from '@angular/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-accordion-sample-1', + styleUrls: ['./accordion-sample-1.component.scss'], + templateUrl: './accordion-sample-1.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionSample1Component { + public singleBranchExpand = false; +} +``` +```html +<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch> +<article class="sample-wrapper"> + <igx-accordion #accordion [singleBranchExpand]="singleBranchExpand"> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + What has changed about subscription and pricing model? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. + + We updated our pricing and packages to provide you with flexible options and the best value. This + includes <a href="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for + JavaScript) which includes all of our JavaScript framework + components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and + Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products. + + We also offer multi-year subscriptions options with a built-in discount, so you can see the value up + front. With these updates we are confident that we are providing the best platforms and the best price. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Who will the updated changes impact?</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <div class="body-container"> + The license updates will impact all new and current customers using Ignite UI, Infragistics Professional + and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for + Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. + For more information, please refer to this blog: + + <a + href="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement: + Changes to Ignite UI Product & Packaging</a> + + The pricing has been updated for all products and packages. So, all new or additional licenses will be + sold based on our new pricing and packages. All existing license agreements will be honored and renewed + based upon the current agreement. + </div> + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>What is the difference between your old model and your current subscription + model + for Ignite UI?</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages + will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI + will be available from our cloud hosted ProGet server. + + For more information, please refer to this article: + + <a + href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving + from Trial to Licensed Ignite UI NPM Packages + </a> + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>What happens if I don't renew my subscription?</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include + this watermark. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>If I don't renew my subscription will + I still have access to previous versions of Infragistics products? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Any version of Infragistics software which you have downloaded can continue to be used perpetually. + Access to download any new or previous versions through our customer portal and package feeds will + require maintaining an active subscription by continuing to renew it. + </igx-expansion-panel-body> + </igx-expansion-panel> + </igx-accordion> +</article> +``` +```scss +$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); + +.sample-wrapper { + overflow-y: auto; + max-height: 380px; + margin: 8px; +} + +igx-switch { + padding: 16px; +} + +igx-expansion-panel { + border: $ep-sample-border; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Accordion + +To get started with the Ignite UI for Angular Accordion component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxAccordionModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxAccordionModule } from 'igniteui-angular/accordion'; +// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxAccordionModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxAccordionComponent` as a standalone dependency, or use the [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/accordion/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +... +import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; +// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-accordion> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Content Panel 1 + </igx-expansion-panel-body> + </igx-expansion-panel> + </igx-accordion> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_ACCORDION_DIRECTIVES] + /* or imports: [IgxAccordionComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Accordion module or directives imported, you can start with a basic configuration of the `igx-accordion` and its panels. + +## Using the Angular Accordion Component + +Each section in the [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) is defined using an [expansion panel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html). +Panels provide [disabled](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelheadercomponent.html#disabled), [collapsed](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html#collapsed) and [animationSettings](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html#animationSettings) properties, which give you the ability to configure the states of the panel as per your requirement. + +### Declaring an accordion + +The accordion wraps all [`igx-expansion-panel`s](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) declared inside it. + +```html +<igx-accordion #accordion [singleBranchExpand]="true"> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Content Panel 1 + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Content Panel 2 + </igx-expansion-panel-body> + </igx-expansion-panel> +</igx-accordion> +``` + +Using the [panels](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#panels) accessor you can get a reference to the collection containing all [expansion panels](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) children of the `igx-accordion`. + +```typescript +@ViewChild('accordion', { static: true }) +public accordion!: IgxAccordionComponent; + +this.accordion.panels; +``` + +As demonstrated above, the [singleBranchExpand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#singleBranchExpand) property gives you the ability to set whether single or multiple panels can be expanded at a time. + +### Angular Accordion Animations + +Angular Accordion supports animations for both expanding and collapsing actions of the panels. Animation behavior can be customized. Normally, animations can be set for each expansion panel individually. However, it could also be applied to all panels at once on [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) level. This gives users the ability to disable animations for all sections at once via the animations property of the [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html). + +With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component: + +```typescript +import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations'; +// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; for licensed package + +@Component({ + ... +}) +export class AccordionComponent { + public animationSettingsCustom = { + closeAnimation: useAnimation(slideOutRight, { + params: { + duration: '100ms', + toPosition: 'translateX(25px)' + } + }), + openAnimation: useAnimation(slideInLeft, { + params: { + duration: '500ms', + fromPosition: 'translateX(-15px)', + startOpacity: 0.1 + } + }) + }; +} +``` + +As you can see, we are using [`slideInLeft`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations#mixin-slide-in-left) and [`slideOutRight`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations) to make the component content appear from the left side and disappear to the right when collapsing the content. We further customize the animations by overriding some of the animations' parameters. + +The following snippet demonstrates passing the animation settings to the component: + +```html +<igx-accordion #accordion [animationSettings]="animationSettingsCustom"> + ... +</igx-accordion> +``` + +>[!NOTE] +> If you would like to turn off the animation for the [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) the `animationSettings` could be set to `null`. + +Alternatively, you have the ability to set every single [expansion panel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html)`s [animationSettings](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html#animationSettings) input. + +```html +<igx-accordion #accordion [singleBranchExpand]="true"> + <igx-expansion-panel [animationSettings]="slideLeftRightSettings"> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Content Panel 1 + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel [animationSettings]="slideTopBottomSettings"> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Content Panel 2 + </igx-expansion-panel-body> + </igx-expansion-panel> +</igx-accordion> +``` + +Using the [collapseAll](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#collapseAll) and [expandAll](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#expandAll) methods you can respectively collapse and expand all [IgxExpansionPanels](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) of the [IgxAccordion](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) programmatically. + +>[!NOTE] +> If [singleBranchExpand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#singleBranchExpand) property is set to _true_ calling [expandAll](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html#expandAll) method would expand only the last [panel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html). + +### Angular Accordion Templating Example + +With the Angular [Accordion component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html), you can customize the header and content panel`s appearance. +The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the [IgxExpansionPanel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html). + +```typescript +import { Component } from '@angular/core'; +import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; + +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-accordion-sample-3', + styleUrls: ['./accordion-sample-3.component.scss'], + templateUrl: './accordion-sample-3.component.html', + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, FormsModule, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] +}) +export class AccordionSample3Component { + public sliderType = IgxSliderType; + public priceRange: PriceRange = new PriceRange(200, 800); + public checkedItems = ''; + public arriveTime: Date; + public rating: string; + + public categories = [ + { checked: false, type: 'Bike' }, + { checked: false, type: 'Motorcycle' }, + { checked: false, type: 'Car' }, + { checked: false, type: 'Taxi' }, + { checked: false, type: 'Public Transport' } + ]; + + public checkedChange() { + this.checkedItems = ''; + this.categories.forEach(item => { + if (item.checked) { + this.checkedItems = this.checkedItems ? this.checkedItems + ', ' + item.type : ': ' + item.type; + } + }); + } + + public get time() { + return this.arriveTime ? + ': Arrive before ' + this.arriveTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''; + } +} +class PriceRange { + constructor( + public lower: number, + public upper: number + ) { + } +} +``` +```html +<article class="sample-wrapper"> + <igx-accordion #accordion> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Categories{{ checkedItems }}</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <div class="categories-container"> + @for (item of categories; track item) { + <igx-checkbox [(ngModel)]="item.checked" (change)="checkedChange()"> + {{ item.type }} + </igx-checkbox> + } + </div> + </igx-expansion-panel-body> + </igx-expansion-panel> + + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Cost: {{ '$' + slider.lowerValue + ' to ' + '$' + slider.upperValue }}</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <igx-slider #slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" + [(ngModel)]="priceRange"></igx-slider> + </igx-expansion-panel-body> + </igx-expansion-panel> + + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Rating@if (rating) { + <span>{{': ' + rating }}</span> + }</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + @for (item of [].constructor(4); track item; let i = $index) { + <div style="display:flex; gap: 4px; align-items: center;"> + @if (i===0) { + <igx-radio [(ngModel)]="rating" [value]="i+1 + ' star or more'"> {{ i + 1 }} star or more</igx-radio> + } + @if (i>0) { + <igx-radio [(ngModel)]="rating" [value]="i+1 + ' stars or more'"> {{ i + 1 }} stars or more</igx-radio> + } + <div style="display:inline-flex; padding-top: 4px"> + @for (fillStar of [].constructor(i + 1); track fillStar) { + <div> + <igx-icon>star</igx-icon> + </div> + } + <igx-icon>star_half</igx-icon> + @for (borderStar of [].constructor(3 - i); track borderStar) { + <div> + <igx-icon>star_border</igx-icon> + </div> + } + </div> + </div> + } + </igx-expansion-panel-body> + </igx-expansion-panel> + + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Time{{ time }}</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <igx-time-picker [(ngModel)]="arriveTime" mode="dropdown" [spinLoop]='false'> + <label igxLabel>Arrive before</label> + </igx-time-picker> + </igx-expansion-panel-body> + </igx-expansion-panel> + </igx-accordion> +</article> +``` +```scss +$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); + +.sample-wrapper { + overflow-y: auto; + max-height: 530px; + margin: 8px; +} + +igx-slider { + margin: 24px; +} + +.categories-container { + display: flex; + flex-flow: column nowrap; +} + +igx-checkbox, +igx-radio { + margin: 4px 0; +} + +igx-expansion-panel { + border: $ep-sample-border; +} +``` + +<div class="divider--half"></div> + +### Nested Angular Accordions Scenario + +In the following Angular accordion example, we are going to create a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) is achieved by adding an [accordion](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) inside the body of an [expansion panel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html). + +```html +<igx-accordion #accordion> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <igx-accordion #childAccordion> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title>Title Nested Panel 1</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Content Nested Panel 1 + </igx-expansion-panel-body> + </igx-expansion-panel> + ... + </igx-accordion> + </igx-expansion-panel-body> + </igx-expansion-panel> + ... +</igx-accordion> +``` + +You can see the result below. + +```typescript +import { Component } from '@angular/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-accordion-sample-2', + styleUrls: ['./accordion-sample-2.component.scss'], + templateUrl: './accordion-sample-2.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionSample2Component { + public singleBranchExpand = false; +} +``` +```html +<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch> +<article class="sample-wrapper"> + + <igx-accordion #accordion [singleBranchExpand]="singleBranchExpand"> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + What has changed about subscription and pricing model? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. + + We updated our pricing and packages to provide you with flexible options and the best value. This + includes <a href="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for + JavaScript) which includes all of our JavaScript framework + components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and + Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products. + + We also offer multi-year subscriptions options with a built-in discount, so you can see the value up + front. With these updates we are confident that we are providing the best platforms and the best price. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Who will the updated changes impact? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + The license updates will impact all new and current customers using Ignite UI, Infragistics Professional + and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for + Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. + For more information, please refer to this blog: + + <a + href="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement: + Changes to Ignite UI Product & Packaging</a> + + The pricing has been updated for all products and packages. So, all new or additional licenses will be + sold based on our new pricing and packages. All existing license agreements will be honored and renewed + based upon the current agreement. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + What is the difference between your old model and your current subscription model for Ignite UI? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages + will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI + will be available from our cloud hosted ProGet server. + + For more information, please refer to this article: + + <a + href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving + from Trial to Licensed Ignite UI NPM Packages</a> + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Common questions about renewal. + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body class="nested-accordion"> + <igx-accordion #nestedAccordion> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + What happens if I don't renew my subscription? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now + include + this watermark. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + If I don't renew my subscription will I still have access to previous versions of + Infragistics products? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Any version of Infragistics software which you have downloaded can continue to be used + perpetually. + Access to download any new or previous versions through our customer portal and package + feeds will + require maintaining an active subscription by continuing to renew it. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Will I be automatically charged for my renewal/ Can I be automatically charged for + renewal? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Any new subscriptions purchased online, via our eCommerce system, will renew automatically. + Subscription + renewal can be canceled, at any time, before the next automatic renewal date. Subscriptions + purchased + directly from Infragistics or Infragistics' partners are subject to the renewal terms that + were agreed + upon as part of that purchase. + </igx-expansion-panel-body> + </igx-expansion-panel> + </igx-accordion> + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + I split my work across two computers. Can I install on both using my single-user license? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome + to install and use Ignite UI, Infragistics Professional, and Infragistics Ultimate on any computer you + use. However, if we notice a large number of activations using the same license, we may contact you to + verify this behavior. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a + major + version is released? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the + next major version for another 30 days! You can do this in the following two ways: + + <ul> + <li>If you have days remaining in your 30-day trial period for the current version (e.g., the + Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or + your account. You will be able to start a fresh trial for the next major version (e.g., 20.1 + Volume Release)</li> + <li>If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume + Release), simply download and install Infragistics Ultimate from our <a + href="https://www.infragistics.com/products/ultimate">website</a> (This will also allow you + to start a new trial.)</li> + </ul> + </igx-expansion-panel-body> + </igx-expansion-panel> + </igx-accordion> +</article> +``` +```scss +$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); + +.sample-wrapper { + overflow-y: auto; + max-height: 470px; + margin: 8px; +} + +igx-switch { + padding: 16px; +} + +.nested-accordion { + margin: 10px 16px; +} + +igx-expansion-panel { + border: $ep-sample-border; +} +``` + +<div class="divider--half"></div> + +## Keyboard Navigation + +Keyboard navigation in the Ignite UI for Angular Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. +The [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) navigation is compliant with W3C accessibility standards and convenient to use. + +**Key Combinations** + +- <kbd>Tab</kbd> - moves the focus to the first(if the focus is before accordion)/next panel +- <kbd>Shift + Tab</kbd> - moves the focus to the last(if the focus is after accordion)/previous panel +- <kbd>Arrow Down</kbd> - moves the focus to the panel below +- <kbd>Arrow Up</kbd> - moves the focus to the panel above +- <kbd>Alt + Arrow Down</kbd> - expands the focused panel in the accordion +- <kbd>Alt + Arrow Up</kbd> - collapses the focused panel in the accordion +- <kbd>Shift + Alt + Arrow Down</kbd> - expands all enabled panels(if singleBranchExpand is set to true expands the last enabled panel) +- <kbd>Shift + Alt + Arrow Up</kbd> - collapses all enabled panels +- <kbd>Home</kbd> - navigates to the FIRST enabled panel in the accordion +- <kbd>End</kbd> - navigates to the LAST enabled panel in the accordion + +## Styling + +The [`accordion`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) serves only as a container for the underlying [`panels`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html). Styles can be applied directly through the panel's theme, as described in the [`styling section of the IgxExpansionPanel topic`](expansion-panel.md#styling). + +By design, there is a margin set to the expanded panels, in case that they are positioned within an `igx-accordion`. In order to modify it there is a property exposed inside the igx-expansion-panel theme. +In order to take advantage of the functions exposed by the theming engine, we have to import the `index` file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme) and accepts a `$header-background`, `$body-color` and `$expanded-margin` parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds. + +```scss +$custom-panel-theme: expansion-panel-theme( + $header-background: #011627, + $body-background: #f0ece7, + $expanded-margin: 10px +); +``` + +The last step is to include the component's theme. + +```scss +:host { + @include tokens($custom-panel-theme); +} +``` + +### Demo + +```typescript +import { Component } from '@angular/core'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-accordion-style', + styleUrls: ['./accordion-style.component.scss'], + templateUrl: './accordion-style.component.html', + imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionStyleComponent { + public singleBranchExpand = false; +} +``` +```html +<article class="sample-wrapper"> + <igx-accordion #accordion > + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + What has changed about subscription and pricing model? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. + + We updated our pricing and packages to provide you with flexible options and the best value. This + includes <a href="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for + JavaScript) which includes all of our JavaScript framework + components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and + Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products. + + We also offer multi-year subscriptions options with a built-in discount, so you can see the value up + front. With these updates we are confident that we are providing the best platforms and the best price. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Who will the updated changes impact? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + The license updates will impact all new and current customers using Ignite UI, Infragistics Professional + and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for + Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. + For more information, please refer to this blog: + + <a + href="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement: + Changes to Ignite UI Product & Packaging</a> + + The pricing has been updated for all products and packages. So, all new or additional licenses will be + sold based on our new pricing and packages. All existing license agreements will be honored and renewed + based upon the current agreement. + </igx-expansion-panel-body> + </igx-expansion-panel> + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + What is the difference between your old model and your current subscription model for Ignite UI? + </igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages + will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI + will be available from our cloud hosted ProGet server. + + For more information, please refer to this article: + + <a + href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving + from Trial to Licensed Ignite UI NPM Packages</a> + </igx-expansion-panel-body> + </igx-expansion-panel> + </igx-accordion> +</article> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-panel-theme: expansion-panel-theme( + $header-background: #011627, + $body-background: #f0ece7, + $expanded-margin: 10px +); + +:host { + @include tokens($custom-panel-theme); +} +``` + +## API Reference + +- [IgxAccordion API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxaccordioncomponent.html) +- [IgxExpansionPanel API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) +- [IgxExpansionPanelHeader API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelheadercomponent.html) +- [IgxExpansionPanelBody API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelbodycomponent.html) +- [IgxExpansionPanel Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-igx-expansion-panel) + + +## Additional Resources + +Our community is active and always welcoming new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md new file mode 100644 index 000000000..492d93697 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md @@ -0,0 +1,614 @@ +--- +title: Angular Action Strip Component – Ignite UI for Angular | Infragistics | MIT license +_description: The Action Strip represents a template area for one or more actions. The Action Strip requires to be inside a relative container, as it is going to overlay it. +_keywords: Angular Action Strip component, Angular Action Strip directive, Angular Action Strip control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components +_license: MIT +_tocName: Action Strip +--- + +# Angular Action Strip Directive Overview + +<p class="highlight"> +The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. The container should be positioned relatively as the Action Strip attempts to overlay it and is itself positioned absolutely. Despite overlapped by an Action Strip, the main interactions and user access to the target container remain available. +</p> + +## Angular Action Strip Example + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-action-strip-paragraph', + styleUrls: ['./action-strip-paragraph.component.scss'], + templateUrl: './action-strip-paragraph.component.html', + imports: [IgxActionStripComponent, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] +}) +export class ActionStripParagraphComponent { + @ViewChild('myParagraph') public paragraph; + public result: string; + public isVisible = false; + public isBold = false; + public isItalic = false; + public isUnderlined = false; + + public makeTextBold() { + if (!this.isBold) { + this.paragraph.nativeElement.classList.add('font-bold'); + this.isBold = true; + } else { + this.paragraph.nativeElement.classList.remove('font-bold'); + this.isBold = false; + } + } + + public makeTextItalic() { + if (!this.isItalic) { + this.paragraph.nativeElement.classList.add('font-italic'); + this.isItalic = true; + } else { + this.paragraph.nativeElement.classList.remove('font-italic'); + this.isItalic = false; + } + } + + public makeTextUnderlined() { + if (!this.isUnderlined) { + this.paragraph.nativeElement.classList.add('font-underlined'); + this.isUnderlined = true; + } else { + this.paragraph.nativeElement.classList.remove('font-underlined'); + this.isUnderlined = false; + } + } +} +``` +```html +<div class="parent" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()"> + <p #myParagraph> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. + Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum + molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, + malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae + vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at + mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum + interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo + mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam + vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac. + </p> + <igx-action-strip #actionStrip class="my-action-strip"> + <igx-buttongroup [selectionMode]="'multi'" class="buttons"> + <button igxButton (click)="makeTextBold()"> + <igx-icon>format_bold</igx-icon> + </button> + <button igxButton (click)="makeTextItalic()"> + <igx-icon>format_italic</igx-icon> + </button> + <button igxButton (click)="makeTextUnderlined()"> + <igx-icon>format_underlined</igx-icon> + </button> + </igx-buttongroup> + </igx-action-strip> +</div> +``` +```scss +@use '../../../../variables' as *; + +$custom-strip: action-strip-theme( + $actions-border-radius: 0 +); + +.my-action-strip { + @include action-strip($custom-strip); + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + height: 100%; + padding-top: 1rem; +} + +.parent { + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + padding: 1rem; + margin: auto; + min-width: 700px; + max-width: 1000px; + height: 350px; + position: relative; +} + +.font-italic { + font-style: italic; +} + +.font-bold { + font-weight: bold +} + +.font-underlined { + text-decoration: underline +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Action Strip + +To get started with the Ignite UI for Angular Action Strip component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxActionStripModule } from 'igniteui-angular/action-strip'; +// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxActionStripModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxActionStripComponent` as a standalone dependency, or use the [`IGX_ACTION_STRIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/action-strip/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +... +import { IGX_ACTION_STRIP_DIRECTIVES } from 'igniteui-angular/action-strip'; +import { IgxButtonDirective } from 'igniteui-angular/button'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +// import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <div style="width:100px; height:100px;"> + <igx-action-strip> + <button igxButton (click)="makeTextBold()"> + <igx-icon>format_bold</igx-icon> + </button> + </igx-action-strip> + <div> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent] + /* or imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component. + +## Using the Angular Action Strip Component + +To initialize and position the Action Strip correctly, it needs to be inside a relatively positioned container: + +```html +<div style="position:relative; width:100px; height:100px;"> + <igx-action-strip> + <button igxButton (click)="makeTextBold()"> + <igx-icon>format_bold</igx-icon> + </button> + </igx-action-strip> +</div> +``` + +By default, the Action Strip will not be visible, but this can be configured via the [`hidden`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html#hidden) @Input property. + +### Menu look and feel + +For scenarios where more than three action items will be shown, it is best to use [`IgxActionStripMenuItem`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripmenuitemdirective.html) directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. + +```html +<div style="position:relative; width:100px; height:100px;"> + <igx-action-strip> + <button *igxActionStripMenuItem igxButton (click)="alignTextLeft()"> + <igx-icon>format_align_left</igx-icon> + </button> + <button *igxActionStripMenuItem igxButton (click)="alignTextCenter()"> + <igx-icon>format_align_center</igx-icon> + </button> + <button *igxActionStripMenuItem igxButton (click)="alignTextRight()"> + <igx-icon>format_align_right</igx-icon> + </button> + </igx-action-strip> +</div> +``` + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from 'igniteui-angular/action-strip'; +import { IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-action-strip-paragraph-menu', + styleUrls: ['./action-strip-paragraph-menu.component.scss'], + templateUrl: './action-strip-paragraph-menu.component.html', + imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxRippleDirective, IgxIconComponent] +}) +export class ActionStripParagraphMenuComponent { + @ViewChild('actionStrip') public actionStrip: IgxActionStripComponent; + @ViewChild('myParagraph') public paragraph; + public result: string; + public isVisible = false; + public textLeft = false; + public textCenter = false; + public textRight = false; + + public onMouseLeave(event?) { + if (!event) { + return; + } + if (event.relatedTarget && + event.relatedTarget.nodeName.toLowerCase() !== 'igx-drop-down-item' && + event.relatedTarget.className.indexOf('menu-button') === -1) { + this.actionStrip.hide(); + } + } + + public alignTextLeft() { + this.paragraph.nativeElement.classList.add('text-align-left'); + this.paragraph.nativeElement.classList.remove('text-align-center'); + this.paragraph.nativeElement.classList.remove('text-align-right'); + } + + public alignTextCenter() { + this.paragraph.nativeElement.classList.remove('text-align-left'); + this.paragraph.nativeElement.classList.add('text-align-center'); + this.paragraph.nativeElement.classList.remove('text-align-right'); + } + + public alignTextRight() { + this.paragraph.nativeElement.classList.remove('text-align-left'); + this.paragraph.nativeElement.classList.remove('text-align-center'); + this.paragraph.nativeElement.classList.add('text-align-right'); + } +} +``` +```html +<div class="parent" (mouseenter)="actionStrip.show()" (mouseleave)="onMouseLeave($event)"> + <p #myParagraph> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. + Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum + molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, + malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae + vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at + mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum + interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo + mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam + vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac. + </p> + <igx-action-strip class="my-action-strip" #actionStrip> + <div *igxActionStripMenuItem class="menu-button" (click)="alignTextLeft()" igxRipple> + <igx-icon>format_align_left</igx-icon> + <span>Left</span> + </div> + <div *igxActionStripMenuItem class="menu-button" (click)="alignTextCenter()" igxRipple> + <igx-icon>format_align_center</igx-icon> + <span>Center</span> + </div> + <div *igxActionStripMenuItem class="menu-button" (click)="alignTextRight()" igxRipple> + <igx-icon>format_align_right</igx-icon> + <span>Right</span> + </div> + </igx-action-strip> +</div> +``` +```scss +.parent { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + margin: auto; + min-width: 700px; + max-width: 1000px; + height: 350px; + position: relative; +} + +.my-action-strip { + display: flex; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + height: 100%; + padding-top: 1rem; +} + +.text-align-left { + text-align: left; +} + +.text-align-center { + text-align: center; +} + +.text-align-right { + text-align: right; +} + +.menu-button { + display: flex; + + igx-icon + span { + margin-inline-start: 16px; + } +} +``` + +### Reusing the Action Strip + +The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them. +The Action Strip can change its parent container, which is possible by changing the [`context`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html#context). +The best way to do so is via the [`show`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html#show) API method and passing the `context` as an argument. The `context` should be an instance of a component and should have an accessible `element` property of the `ElementRef` type. + +> [!NOTE] +> The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`. + +## Usage in Grids + +The Action Strip provides additional functionality and UI for the IgxGrid. +This can be utilized via grid action components and we are providing two default ones: + +- [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the `rowEditable` option of the grid and whether deleting rows is allowed. +- [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. + +```html +<igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'"> + <igx-column *ngFor="let c of columns" [field]="c.field"> </igx-column> + + <igx-action-strip #actionStrip> + <igx-grid-pinning-actions></igx-grid-pinning-actions> + <igx-grid-editing-actions></igx-grid-editing-actions> + </igx-action-strip> +</igx-grid> +``` + +> [!NOTE] +> These components inherit [`IgxGridActionsBaseDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. +> [!NOTE] +> When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-row-action-strip', + styleUrls: [`grid-action-strip-sample.scss`], + templateUrl: 'grid-action-strip-sample.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class GridActionStripSampleComponent { + @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; + + public data: any[]; + public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>(); + + constructor() { + this.data = DATA; + } + + public isDirty(rowContext: RowType) { + const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key); + return rowContext && (rowContext.deleted || isRowEdited); + } + + public isDeleted(rowContext: RowType) { + return rowContext && rowContext.deleted; + } + + public inEditMode(rowContext: RowType) { + return rowContext && rowContext.inEditMode; + } + + public startEdit(rowContext: RowType): void { + const firstEditable = rowContext.cells.filter(cell => cell.editable)[0]; + const grid = rowContext.grid; + + if (grid.rowList.filter(r => r === rowContext).length !== 0) { + grid.gridAPI.crudService.enterEditMode(firstEditable); + firstEditable.activate(null); + } + } + + public commit(rowContext: RowType) { + this.grid.transactions.commit(this.grid.data, rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, []); + } + + public redo(rowContext: RowType) { + const rowID = rowContext.key; + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID); + lastDiscarded.forEach((transaction) => { + const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id); + this.grid.transactions.add(transaction, recRef); + }); + this.discardedTransactionsPerRecord.set(rowID, []); + } + + public hasDiscardedTransactions(rowContext: RowType) { + if (!rowContext) { return false; } + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key); + return lastDiscarded && lastDiscarded.length > 0; + } + + public undo(rowContext: RowType) { + const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true) + .filter(x => x.id === rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard); + this.grid.transactions.clear(rowContext.key); + } +} +``` + +> [!NOTE] +> More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html). + +## Styling + +To customize the Action Strip, you first need to import the `index` file, where all styling functions and mixins are located. + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Next, we have to create a new theme that extends the `action-strip-theme` and pass the parameters which we'd like to change: + +```scss +$custom-strip: action-strip-theme( + $background: rgba(109, 121, 147, 0.2), + $actions-background: rgba(#011627, 0.9), + $actions-border-radius: 0 +); +``` + +The last step is to include the newly created component theme in our application. + +```scss +:host { + @include tokens($custom-strip); +} +``` + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-action-strip-paragraph-styling', + styleUrls: ['./action-strip-paragraph-styling.component.scss'], + templateUrl: './action-strip-paragraph-styling.component.html', + imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent] +}) +export class ActionStripStylingComponent { + @ViewChild('actionstrip') public actionStrip: IgxActionStripComponent; + @ViewChild('myParagraph') public paragraph; + public result: string; + public isVisible = false; + public textLeft = false; + public textCenter = false; + public textRight = false; + + public textDelete() { + this.paragraph.nativeElement.classList.add('text-strike-through'); + } + + public textRestore() { + this.paragraph.nativeElement.classList.remove('text-strike-through'); + } + + public showActions() { + this.isVisible = true; + } + + public hideActions() { + this.isVisible = false; + } +} +``` +```html +<div class="parent" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()"> + <p #myParagraph> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. + Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum + molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, + malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae + vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at + mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum + interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo + mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam + vel pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac. + </p> + <igx-action-strip class="my-action-strip" #actionStrip> + <button igxButton (click)="textRestore()"> + <igx-icon>restore</igx-icon> + </button> + <button igxButton (click)="textDelete()"> + <igx-icon>delete</igx-icon> + </button> + </igx-action-strip> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-strip: action-strip-theme( + $background: rgba(109, 121, 147, 0.2), + $actions-background: rgba(#011627, 0.9), + $actions-border-radius: 0, +); + +:host { + @include tokens($custom-strip); +} +``` + +## API and Style References + +For more detailed information regarding the Action Strip API, refer to the following links: + +- [`IgxActionStripComponent API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) + +The following built-in CSS styles helped us achieve this Action Strip layout: + +- [`IgxActionStripComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-action-strip-theme) + +Additional components and/or directives that can be used within the Action Strip: + +- [`IgxGridActionsBaseDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridactionsbasedirective.html) +- [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) +- [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) +- [`IgxDividerDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) + +<div class="divider"></div> + +## Theming Dependencies + +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md new file mode 100644 index 000000000..dc232dab0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md @@ -0,0 +1,274 @@ +--- +title: Ignite UI for Angular Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics +_description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming. +_keywords: ignite ui for angular, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai +_tocName: Ignite UI for Angular Skills +--- + +# Ignite UI for Angular Skills + +Ignite UI for Angular ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. + +## Available Skills + +The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-angular/tree/master/skills) directory of the Ignite UI for Angular repository: + +| Skill | Path | Description | +|:------|:-----|:------------| +| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | + +> **Note:** Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. + +There are two ways to use skills with your AI assistant: [create a persistent IDE agent](#approach-1-create-a-persistent-ide-agent) that always applies them automatically, or [download and load them manually](#approach-2-download-and-load-the-skills) into your preferred IDE on demand. + +## Approach 1: Create a Persistent IDE Agent + +This approach wires the skills permanently into your project so that every AI session automatically follows the Ignite UI for Angular guidelines — no copy-pasting required. + +### GitHub Copilot (VS Code) + +GitHub Copilot reads custom instructions from a `.github/copilot-instructions.md` file at the root of your repository. To create a persistent agent: + +1. Create (or open) `.github/copilot-instructions.md` in your project root. +2. Add a reference or paste the relevant skill content into that file. For example: + + ```markdown + # Copilot Instructions + + This project uses Ignite UI for Angular. Follow the guidelines in the skill files below: + + - Components & Layout: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md + - Data Grids: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md + - Theming & Styling: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md + ``` + +3. Alternatively, paste the full content of the relevant `SKILL.md` files directly into `copilot-instructions.md` for fully offline, self-contained instructions. +4. Copilot will now apply these instructions automatically on every chat and inline suggestion in VS Code. + +### Cursor + +Cursor supports persistent project rules through a `.cursorrules` file or the `.cursor/rules/` directory: + +1. Create `.cursorrules` in your project root (or `.cursor/rules/igniteui.md` for a named rule). +2. Paste the contents of the desired `SKILL.md` files into that file. For example: + + ``` + # Ignite UI for Angular Rules + + <paste contents of skills/igniteui-angular-components/SKILL.md here> + <paste contents of skills/igniteui-angular-grids/SKILL.md here> + ``` + +3. Cursor will include these rules in every AI request automatically. You can also use the `@rules` mention in chat to reference a specific rule on demand. + +### Windsurf + +Windsurf reads persistent rules from a `.windsurfrules` file at the project root: + +1. Create `.windsurfrules` in your project root. +2. Paste the contents of the relevant `SKILL.md` files into it. +3. Every Cascade AI session in Windsurf will now include these as persistent instructions. + +### JetBrains IDEs (WebStorm, IntelliJ) + +JetBrains AI Assistant supports project-level prompts that are applied to every AI interaction: + +1. Open **Settings** (or **Preferences** on macOS) → **Tools** → **AI Assistant** → **Project-level prompt**. +2. Paste the contents of the relevant `SKILL.md` files into the prompt field. +3. Click **Apply**. The AI Assistant will now follow these instructions for all requests inside the project. + +### Claude Code + +Claude Code supports a `CLAUDE.md` file at the project root as persistent agent instructions: + +1. Create `CLAUDE.md` in your project root. +2. Paste the contents of the relevant `SKILL.md` files into it. For example: + + ```markdown + # Project Instructions + + This project uses Ignite UI for Angular. Always follow these guidelines: + + <paste contents of SKILL.md files here> + ``` + +3. Claude Code will automatically read `CLAUDE.md` at the start of every session. + +### General AI Agents + +Alternatively, one can use a general Agent Skills config so your Agent can easily discover and load skills automatically on demand: + +1. Create a `.agents/skills/` directory in your project root. +2. Copy the skill directories from `igniteui-angular/skills/` repository into `.agents/skills/`: + + ``` + .agents/ + skills/ + igniteui-angular-components/ + igniteui-angular-grids/ + igniteui-angular-theming/ + ``` + +3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request. + +> **Tip:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. + +--- + +## Approach 2: Download and Load the Skills + +Use this approach when you want to load a specific skill on demand, without permanently modifying project configuration files. + +### Step 1: Get the Skill Files + +#### **Option A — Download individual files** + +Each skill file can be downloaded directly from GitHub. First, create the `.agents/skills/` directory in your project root, then download the files into it: + +```bash + +# Define the base target directory +BASE_DIR=".agents/skills" + +# Components & Layout +curl --create-dirs -o $BASE_DIR/igniteui-angular-components/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md + +# Data Grids +curl --create-dirs -o $BASE_DIR/igniteui-angular-grids/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md + +# Theming & Styling +curl --create-dirs -o $BASE_DIR/igniteui-angular-theming/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md +``` + +The skill files will now be available in `.agents/skills/` and will be automatically discovered by compatible AI assistants. + + +#### **Option B — Use the `gemini skills` CLI** + +The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: + +- **User scope** (default) — installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. +- **Workspace scope** — installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. + +**Install to user scope (default):** + +```bash +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +``` + +**Install to workspace scope:** + +```bash +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +``` + +Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. + + +#### **Option C — Use the installed npm package** + +If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. for use with General AI Agents under `.agents/skills/`), run: + +```bash +# macOS / Linux +cp -r node_modules/igniteui-angular/skills/. .agents/skills/ +``` + +```powershell +# Windows (PowerShell) +Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills +``` + +Or copy individual skill directories as needed: + +**macOS / Linux** + +```bash +cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ +``` + +**Windows (PowerShell)** + +```powershell +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming +``` + +**Windows (Command Prompt)** + +```cmd +xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components +xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids +xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming +``` + +The skill files are located at: + +``` +node_modules/igniteui-angular/skills/igniteui-angular-components/SKILL.md +node_modules/igniteui-angular/skills/igniteui-angular-grids/SKILL.md +node_modules/igniteui-angular/skills/igniteui-angular-theming/SKILL.md +``` + +#### **Option D — Use the `npx skills` CLI** + +The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: + +```bash +npx skills add IgniteUI/igniteui-angular +``` + +The CLI will guide you through a series of prompts to: + +1. Select which skills to install (components, grids, and theming). +2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). +3. Download and write the selected skill files automatically. + +Once complete, the skills are ready to use — no manual file copying required. + +> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-angular](https://github.com/IgniteUI/igniteui-angular) repository. + +### Step 2: Load the Skill into Your IDE + +Once you have the files, open them and load them into your AI assistant: + +| IDE / Tool | How to load | +|:-----------|:------------| +| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. | +| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. | +| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. | +| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. | +| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. | +| **Other assistants** | Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. | + +--- + +## Theming MCP Server + +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + +For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation. + +## Additional Resources + +<div class="divider--half"></div> + +- [Getting Started with Ignite UI for Angular](../general/getting-started.md) +- [Angular Schematics & Ignite UI CLI](../general/cli-overview.md) +- [How to Use Standalone Components](../general/how-to/how-to-use-standalone-components.md) +- [Code Splitting and Multiple Entry Points](../general/code-splitting-and-multiple-entry-points.md) + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md new file mode 100644 index 000000000..ff2549ee4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md @@ -0,0 +1,351 @@ +--- +title: Ignite UI Theming MCP | Ignite UI for Angular +_description: Ignite UI for Angular ships with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +_tocName: Theming MCP +--- + +# Ignite UI Theming MCP + +<p class="highlight">The Ignite UI Theming MCP is a <a href="https://modelcontextprotocol.io/" target="_blank">Model Context Protocol</a> (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.</p> + +<div class="divider"></div> + +## Overview + +Instead of writing Sass theming code by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. + +The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with **Ignite UI for Web Components**, **React**, and **Blazor**. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. + +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. + +**Example prompts to try once connected:** + +> _"Create a complete Material Design dark theme for my Angular app with primary #2563eb and coral secondary #f97316."_ + +> _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ + +> _"My brand guidelines specify exact hex values for every primary shade — create a custom palette with those explicit values."_ + +> _"Make the calendar component use smaller spacing."_ + +## Prerequisites + +Before configuring the MCP server, make sure you have: + +- **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. +- A project with an **Ignite UI package** listed as a dependency in `package.json`. For Angular, this is `igniteui-angular` (v15.0 or later). The server also supports `igniteui-webcomponents`, `igniteui-react`, and `igniteui-blazor`. +- An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. + +If you do not have `igniteui-angular` installed yet, run: + +```bash +ng add igniteui-angular +``` + +## Setup + +The MCP server is bundled with the `igniteui-theming` package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. + +The canonical launch command is: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +> [!NOTE] +> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### How version resolution works + +Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly — no network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. + +If you run the command outside a project (or before running `npm install`), `npx -y` downloads the **latest** version from npm into a temporary cache instead. The server will still start, but `detect_platform` will return `generic` since there is no `package.json` to inspect. + +Choose your AI client below for the specific configuration steps. + +### VS Code + +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. + +> [!NOTE] +> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. + +### Cursor + +Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +The server will be picked up automatically when you open a new Cursor chat session. + +> [!NOTE] +> You can also configure MCP servers globally via **Settings → MCP** in Cursor. + +### Claude Desktop + +Add the server to your Claude Desktop configuration file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Restart Claude Desktop after saving. You will see an MCP server indicator (slider icon) in the chat input area, confirming that MCP tools are active. + +### Claude Code + +Claude Code supports MCP servers through its CLI and a project-scoped `.mcp.json` file. To share the configuration with your team, create or edit `.mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Alternatively, you can add the server via the command line for your local environment only: + +```bash +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Use the `/mcp` command inside Claude Code to verify the server is connected. + +### JetBrains IDEs + +JetBrains AI Assistant supports MCP servers through the IDE settings: + +1. Open **Settings** (or **Preferences** on macOS). +2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. +3. Click **+ Add** and choose **As JSON** or use the form fields. +4. Enter the following configuration: + + ```json + { + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. Click **OK** and restart the AI Assistant. + +> [!NOTE] +> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. + +### Other MCP Clients + +For any other MCP-compatible client, use the STDIO transport with the following command and arguments: + +- **Command**: `npx` +- **Arguments**: `-y`, `igniteui-theming`, `igniteui-theming-mcp` + +## Customizing AI Behavior with Project Rules + +This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. + +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_ — you do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. + +### VS Code (`.github/copilot-instructions.md`) + +```markdown +## Theming Conventions + +### Sass Code Style +- Use `@use` / `@forward` — never `@import`. +- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). +- Prefer setting primary design tokens over overriding many dependent tokens. + For example, setting `$foreground` on a flat button automatically derives + `$hover-background`, `$focus-background`, and `$active-background`. +- Keep component overrides scoped — use the component's default selector + (e.g., `.igx-button--flat`) unless a narrower scope is needed. +``` + +### Cursor (`.cursor/rules/theming.mdc`) + +```markdown +--- +description: Ignite UI for Angular theming conventions +globs: ["**/*.scss", "**/styles/**"] +--- + +## Project Theming Rules + +### Code conventions +- `@use` / `@forward` only — no `@import`. +- Extract shared colors into variables; do not repeat hex literals. +- Prefer primary tokens — let dependent tokens derive automatically. +- One component override per file. Name the file after the component. +- Comment every override with the design rationale. +- Never hard-code gray shades for text — use palette grays so dark mode works. +- For dark mode, only the palette changes. Component overrides stay the same. +``` + +> [!NOTE] +> Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. + +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly — just describe what you want. + +To see the current full list of tools and their parameters at any time, ask your AI assistant: + +> _"What tools does the Ignite UI Theming MCP provide?"_ + +Here is a brief overview of each tool: + +| Tool | Description | +|------|-------------| +| `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | +| `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | +| `create_typography` | Sets up a font family and type scale for a given design system. | +| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | +| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | +| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | +| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | +| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | +| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | +| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | +| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | +| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | + +> [!NOTE] +> For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. + +> [!NOTE] +> If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. + +## Example Scenarios + +The following scenarios show what you can ask the AI to do once the MCP server is connected. + +### New Project Theme + +> _"I'm starting a new Angular project with Ignite UI. Create a complete Material Design light theme with primary #2563eb, secondary #f97316, and Roboto font."_ + +The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + +```scss +/* styles.scss */ +@use 'igniteui-angular/theming' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, + $gray: #9e9e9e, +); + +$my-typography: typography( + $font-family: 'Roboto, sans-serif', +); + +@include core(); +@include typography($my-typography); +@include theme($my-palette, $schema: $light-material-schema); +``` + +### Dark Mode Variant + +> _"I need a dark mode version of my existing theme. Keep the same primary blue but use a dark surface #121212."_ + +### Brand-Exact Color Shades + +> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ + +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](../themes/palettes.md) for more detail on shade generation. + +### Component-Level Customization + +> _"Style the flat button with a purple background #8b5cf6 and white text, with a lighter purple #a78bfa on hover."_ + +The AI will call `get_component_design_tokens` first to discover valid token names, then call `create_component_theme` with the correct values. + +### Layout Adjustments + +> _"The calendar feels bloated — reduce its spacing, and make all components slightly smaller."_ + +The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. + +## Troubleshooting + +**Platform not detected** + +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`, `igniteui-webcomponents`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_ + +**Luminance warning on colors** + +If the AI warns about color luminance, it means the chosen color is too light or too dark for automatic shade generation to work well. Either pick a mid-range color or ask the AI to use `create_custom_palette` with explicit shade values instead. + +**Surface color mismatch** + +For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning. + +**Generated Sass does not compile** + +Ensure `igniteui-angular` and `igniteui-theming` are installed: + +```bash +ng add igniteui-angular +``` + +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](../themes/sass/index.md) for the correct file setup. + +## Additional Resources + +Related topics: + +- [Theming Overview](../themes/index.md) +- [Palettes](../themes/palettes.md) +- [Typography](../themes/typography.md) +- [Elevations](../themes/elevations.md) +- [Spacing](../themes/spacing.md) +- [Roundness](../themes/roundness.md) +- [Theming with Sass](../themes/sass/index.md) + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md new file mode 100644 index 000000000..320520ffb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md @@ -0,0 +1,436 @@ +--- +title: Angular reactive form validation – Ignite UI for Angular +_description: Angular form validation is a process of verifying if inputs entered by a user into a web-form are correct. Check how to do it with Ignite UI for Angular reactive forms. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Reactive Forms, Angular Forms +_tocName: Angular Reactive Forms +--- + +# Angular reactive form validation + +## What are reactive forms in Angular? + +Reactive forms in Angular provide a direct access to the underlying form object model, offering an immutable and explicit approach to handling form inputs. As the values of those inputs change in time, the state of the form is managed by reactive forms, relying on fixed or inflexible methods. + +Which means that, each time a change is triggered to the data model, the so-called observable operators return a new data model, instead of updating the already existing one again and again. And that keeps the state of a form clean. + +Angular reactive forms are considered extremely scalable, reusable, and robust due to their: + +**Immutability** + +Reactive forms in Angular provide an immutable or fixed data structure. Once the state of the underlying model is altered, you get a new “version” of this particular model which is updated. It has new values but remains aligned with all the (UI) controls in any moment. + +**Better testability** + +Testing is pretty straightforward with reactive forms and requires less setup. When it comes to large applications this is very beneficial. Here, you get a synchronous access to streams of input and the possibility to test the form and data models without having to render UI. + +**Predictability** + +Reactive forms are built around observable streams which track every unique change in the form and allow you to access input values synchronously (thanks to the well-structured data flow). Which, in turn, makes reactive forms highly predictable. + +**Consistent & structured data flow** + +The data flow in Angular reactive forms is well-structured because the form logic is led by the component class. This enables you to add validator functions directly to the FormControl instance in the component class. Whenever a change occurs, Angular calls these functions. + + +## What is angular form validation? + +Angular form validation is an integral technical process that verifies if any input provided by a user into a web-form is correct and complete. You can manage validation in a template-driven approach or with Angular reactive forms. Based on what is entered, the form will either allow users to proceed or will display a specific error message to help the user know where they went wrong with their data input. + +Depending on which validator failed, the on-screen error message gives feedback, indicating what is wrong and what exactly needs to be filled in or re-entered as data. In general, apps use forms to allow users to perform data-entry tasks like signing up, logging in, updating online profiles, submitting sensitive information, and more.   + +Angular runs form validation every time the value of a form input is changed and to confirm if data inputs filled in a web-form by a user are accurate and complete. To do that properly, Angular calls a list of validators which are run on every change that occurs.   + +Validation of user-input from the UI can be done either with template-driven forms or with Angular reactive forms. Both of these forms are built on the following base classes: + +- FormControl +- FormGroup +- FormArray   +- ControlValueAccessor + +## Angular reactive form validation + +Reactive forms deliver a model-driven approach to managing form inputs, the values of which change with respect to time. Because reactive forms are built on a component class, Angular reactive form validation happens by adding validator functions directly to the form control model in the component class.   + +When the value is valid, validators return `null`. If the value is invalid, validators generate a set of errors, and you can display a specific error message on the screen. + +There are built-in validators such as `required`, `minlength`, `maxlength` etc. However, you can also create your own validators. + +A simple custom reactive form validator can look like this: + +```typescript +import { Directive, OnInit } from '@angular/core'; +import { Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms'; + +@Directive({ + selector: '[dateValueValidator]', + providers: [{ provide: NG_VALIDATORS, useExisting: DateValueValidatorDirective, multi: true }] +}) +export class DateValueValidatorDirective implements Validator { + public validate(control: AbstractControl): ValidationErrors | null { + if (!this.isDate(control.value)) { + return { value: true }; + } + + return null; + } + + private isDate(value: unknown): value is Date { + return value instanceof Date + && !isNaN(value.getTime()); + } +} +``` + +Also a validator can be asynchronous: + +```typescript +import { Directive, OnInit } from '@angular/core'; +import { AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms'; +import { Observable, of } from 'rxjs'; + +@Directive({ + selector: '[dateValueAsyncValidator]', + providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: DateValueAsyncValidatorDirective, multi: true }] +}) +export class DateValueAsyncValidatorDirective implements AsyncValidator { + public validate(control: AbstractControl): Observable<ValidationErrors | null> { + if (!this.isDate(control.value)) { + return of({ value: true }); + } + + return of(null); + } + + private isDate(value: unknown): value is Date { + return value instanceof Date + && !isNaN(value.getTime()); + } +} +``` + +## Angular Reactive form validation example + +Let’s see how you can set up reactive form validation in practice with this Angular form validation example. + +It is a quick demo of a pretty standard booking form for a movie. It shows what happens if one or several of the form inputs are incomplete and you can see how the specific error message is visualized. + +For the purposes of our example of Angular reactive form validation, the fields which are required include: movie, full name, email, and genre. Unless you get all of them completed, you won’t be able to proceed with your booking and the `book button` will remain disabled. + +So, if you enter values for movie title, full name, phone, and email, they will be highlighted in green. But if you forget to select `favorite genre`, this field will be highlighted in red, indicating incomplete value inputs. Once the values are all set right, the field will be highlighted in green, indicating correct value inputs. The `book button` will be activated and the form can be successfully submitted afterwards. + +```typescript +import { Component } from '@angular/core'; +import { FormArray, FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { DateRange, IgxPickerToggleComponent } from 'igniteui-angular/core'; +import { IRangeSliderValue, IgxSliderComponent } from 'igniteui-angular/slider'; +import { IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxSelectToggleIconDirective } from 'igniteui-angular/select'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxDatePickerComponent, IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; +import { IgcFormControlDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxCalendarComponent, IgxMonthPickerComponent } from 'igniteui-angular/calendar'; +import { IgxCardComponent } from 'igniteui-angular/card'; + + + +export interface User{ + date: FormControl<string |Date | null>, + time: FormControl<string| Date| null>, + email: FormControl<string | null>, + fullName: FormControl<string | null>, + movie: FormControl<string | null>, + phone: FormControl<number | null>, + rating: FormControl<number | null>, + checkbox: FormControl<boolean | null>, + radio: FormControl, + switch: FormControl<boolean | null>, + range: FormControl<DateRange|null>, + slider: FormControl<IRangeSliderValue|null> + calendar: FormControl<string |Date|null> + month: FormControl<string| Date |null> + genres: FormControl<string[] | null> +} +@Component({ + selector: 'app-reactive-form', + styleUrls: ['./reactive-forms.component.scss'], + templateUrl: './reactive-forms.component.html', + imports: [FormsModule, ReactiveFormsModule, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxHintDirective, IgxPrefixDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgcFormControlDirective, IgxCheckboxComponent, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent, IgxDateRangePickerComponent, IgxSliderComponent, IgxCalendarComponent, IgxCardComponent, IgxMonthPickerComponent, IgxButtonDirective, IgxRippleDirective] +}) +export class ReactiveFormsSampleComponent { + public genres = []; + public minTime = '06:15:30'; + public maxTime = '09:15:30'; + public minValue = '0'; + public maxValue = '100'; + public minDate = new Date(); + public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14)); + public user: FormGroup<User>; + + constructor() { + this.user = new FormGroup<User>({ + date: new FormControl('', Validators.required), + time: new FormControl('', Validators.required), + email: new FormControl('', [Validators.required, Validators.email]), + fullName: new FormControl('', [Validators.required, Validators.pattern(/^[\p{L}\p{M}'\- ]+$/u)]), + movie: new FormControl('', Validators.required), + phone: new FormControl(null,Validators.required), + rating: new FormControl(2, Validators.required), + checkbox: new FormControl(true,Validators.required), + radio: new FormControl(''), + switch: new FormControl(false), + range: new FormControl({ start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5))}), + slider: new FormControl({lower: 5, upper: 30}), + calendar: new FormControl(null), + month: new FormControl(null), + genres: new FormControl(['Action','Adventure','Comedy']) + }); + this.genres = [ + { type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] }, + { type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] }, + {type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri','Untouchable', '3 idiots']}, + { type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] }, + { type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] }, + { type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] }, + { type: 'Mystery', movies: ['The Prestige', 'Memento', 'Cloud Atlas'] }, + { type: 'Musical', movies: ['All That Jazz'] }, + { type: 'Romance', movies: ['Love Actually', 'In The Mood for Love'] }, + { type: 'Sci-Fi', movies: ['The Fifth Element'] }, + { type: 'Thriller', movies: ['The Usual Suspects'] }, + { type: 'Western', movies: ['Django Unchained'] } + ]; + + } + + public get email() { + return this.user.get('email'); + } + public get phone() { + return this.user.get('phone'); + } + public get fullName() { + return this.user.get('fullName'); + } + +public valueChangeHandler() { + var sliderValue = this.user.get('slider'); + this.user.controls.range.setValue({ + start: new Date(new Date().setDate(new Date().getDate() + sliderValue.value.lower)), + end: new Date(new Date().setDate(new Date().getDate() + sliderValue.value.upper)) + }); + + var pickerDate = this.user.controls.range.value.start; + this.user.controls.calendar.setValue(pickerDate); + this.user.controls.month.setValue(pickerDate); +} + public onSubmit() { + console.log(this.user); + } +} +``` +```html +<div class="container"> + <article class="sample-column"> + <form class="input-group-form" [formGroup]="user" (ngSubmit)="onSubmit()"> + <h4>Book your movie ticket</h4> + <div class="container"> + <igx-select #select name="movies" formControlName="movie"> + @for (genre of genres; track genre) { + <igx-select-item-group [label]="genre.type"> + @for (movie of genre.movies; track movie) { + <igx-select-item [value]="movie"> + {{ movie }} + </igx-select-item> + } + </igx-select-item-group> + } + <label igxLabel for="movies">Movie</label> + <ng-template igxSelectToggleIcon> + <igx-icon family="material">local_movies</igx-icon> + </ng-template> + </igx-select> + <igx-input-group> + <input igxInput name="fullName" type="text" formControlName="fullName" aria-describedby="invalid-name" /> + <label igxLabel for="fullName">Full Name</label> + <igx-suffix> + <igx-icon>person</igx-icon> + </igx-suffix> + @if (fullName.touched && fullName.errors?.required) { + <igx-hint>Fullname is required</igx-hint> + } + @if (fullName.touched && fullName.errors?.pattern) { + <igx-hint id="invalid-name">Please enter a valid name.</igx-hint> + } + </igx-input-group> + <igx-input-group> + <igx-prefix>+359</igx-prefix> + <label igxLabel for="phone">Phone</label> + <input igxInput name="phone" type="number" formControlName="phone" /> + <igx-suffix> + <igx-icon>phone</igx-icon> + </igx-suffix> + <igx-hint position="start">Ex.: +359 888 123 456</igx-hint> + @if (phone.touched && phone.invalid) { + <igx-hint>Phone number is required</igx-hint> + } + </igx-input-group> + <igx-input-group> + <label igxLabel for="email">Email address</label> + <input igxInput name="email" type="email" formControlName="email" /> + <igx-suffix> + <igx-icon>email</igx-icon> + </igx-suffix> + @if (email.touched && email.invalid) { + <igx-hint>Email is required</igx-hint> + } + @if (email.errors?.email) { + <igx-hint>Please enter a valid email</igx-hint> + } + </igx-input-group> + <igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres" [valueKey]="'type'" + [displayKey]="'type'" type="line" formControlName="genres" placeholder="Select your favorite genres" + searchPlaceholder="Search..."> + </igx-combo> + <igx-date-picker name="date" formControlName="date" [minValue]="minDate" [maxValue]="maxDate" placeholder="Date"> + <igx-picker-toggle igxSuffix> + <igx-icon>today</igx-icon> + </igx-picker-toggle> + </igx-date-picker> + <igx-time-picker name="time" formControlName="time" [minValue]="minTime" [maxValue]="maxTime" placeholder="Time"> + <igx-picker-toggle igxSuffix> + <igx-icon>access_time</igx-icon> + </igx-picker-toggle> + </igx-time-picker> + <igc-rating size="large" name="rating" class="user-input" formControlName="rating"> + <label igxLabel>Rate the movie</label> + </igc-rating> + <igx-checkbox labelPosition="after" class="user-input" name="checkbox" formControlName="checkbox"> + Agree to the terms of use. + </igx-checkbox> + <igx-radio-group value="1" class="user-input" formControlName="radio"> + <igx-radio value="2d" class="radio"> + 2D Movie + </igx-radio> + <igx-radio value="3d" class="radio"> + 3D Movie + </igx-radio> + </igx-radio-group> + <igx-switch name="switch" formControlName="switch"> + Subtitles for the Deaf or Hard-of-Hearing (SDH) + </igx-switch> + <igx-date-range-picker name="range" formControlName="range"> + <label igxLabel>Pick suitable date range - for avaliable movies</label> + </igx-date-range-picker> + <igx-slider name="slider" formControlName="slider" id="slider" type="range" (valueChange)="valueChangeHandler()"> + </igx-slider> + <article class="calendar-wrapper"> + <igx-calendar selection="single" name="calendar" formControlName="calendar"></igx-calendar> + </article> + <igx-card> + <igx-month-picker #monthPicker name="month" formControlName="month"></igx-month-picker> + </igx-card> + <button igxButton="contained" igxRipple type="submit" [disabled]="!user.valid">Book</button> + </div> + </form> + </article> +</div> +``` +```scss +.container{ + height: 100%; + overflow: auto; +} + +.container > * { + margin-top: 32px; + max-width: 450px; +} + +.input-group-form { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + padding: 24px; + margin-bottom: 48px; +} + +h4 { + margin-top: 0; +} + +igx-card, article { + max-width: 400px; + margin: 20px; +} +``` + +<div class="divider--half"></div> + +## Angular form group validation + +Form groups are basically a group of multiple related `FormControlls` that enable you to access the state of the encapsulated controls. Angular from group validation helps you track the value of group controls or a form as well as to track validation of the state of the form control. `FormGroup` is used with `FormControl`. + +## Why would you need Angular form custom validation? + +With custom validators you can address different functionality and ensure the values in a form meet certain criteria, which sometimes isn’t possible to do when using built-in validators only. If you want to validate a phone number or a specific password pattern, it’s best to create custom validator and rely on Angular form custom validation. + +With reactive forms, generating such is just as easy as writing a new function. And for model-driven forms (such is the reactive form in Angular) we create custom validation functions and send them to the `FormControl` constructor. + +Below you can see how to write and implement a custom form validator in your reactive form. + +```typescript +import { FormGroup, FormControl, Validators, ValidatorFn, ValidationErrors } from '@angular/forms'; +import { Component, OnInit } from '@angular/core'; + +@Component({/* ... */}) +export class MyComponent implements OnInit { + public form: FormGroup; + + public ngOnInit(): void { + this.form = new FormGroup({ + datePicker: new FormControl('', [Validators.required, this.dateValidator(new Date())]) + }); + } + + private dateValidator(val: Date): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + if (this.isDate(control.value) + || this.valGreaterThanDate(control.value, val)) { + return { value: true }; + } + + return null; + } + } + + private valGreaterThanDate(value: Date, date: Date): boolean { + const value1 = new Date(value).setHours(0, 0, 0, 0); + const value2 = new Date(date).setHours(0, 0, 0, 0); + return value.getTime() > date.getTime(); + } + + private isDate(value: unknown): value is Date { + return value instanceof Date + && !isNaN(value.getTime()); + } +} +``` + +## Additional Resources + +<div class="divider--half"></div> + +Related topics: + +- [Combo](combo.md) +- [Select](select.md) +- [Input Group](input-group.md) +- [Date Picker](date-picker.md) +- [Time Picker](time-picker.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md new file mode 100644 index 000000000..ae3822226 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md @@ -0,0 +1,438 @@ +--- +title: Angular Autocomplete Component – Ignite UI for Angular - MIT license +_description: The Angular Autocomplete directive offers a way to enhance a text input by showing a panel of suggested options provided by the developer. Try it now. +_keywords: Angular Autocomplete component, Angular Autocomplete directive, Angular Autocomplete control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library +_license: MIT +_tocName: Autocomplete +--- + +# Angular Autocomplete Directive Overview + +Angular Autocomplete is a search box directive that enables users to easily find, filter and select an item from a list of suggestions while they type. Feature-rich, it supports seamless data binding, filtering, grouping, UI customization options, and other built-in functionalities so developers can create intuitive autocomplete search experience. + +<p class="highlight"> + +The [`igxAutocomplete`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxautocompletedirective.html) directive provides a way to enhance a text input by showing an [`igxDropDown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys. +</p> + +## Angular Autocomplete Example + +The Angular Autocomplete example below generates a dropdown suggestion list as users start typing the name of a town in the input textbox. + +```typescript +import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-autocomplete', + styleUrls: ['./autocomplete.component.scss'], + templateUrl: './autocomplete.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent, forwardRef(() => AutocompletePipeStartsWith)] +}) +export class AutocompleteBasicComponent { + public towns = []; + public townSelected; + + constructor() { + this.towns = [ + 'New York', 'Washington, D.C.', 'London', 'Berlin', 'Sofia', 'Rome', 'Kiev', + 'Copenhagen', 'Paris', 'Barcelona', 'Vienna', 'Athens', 'Dublin', 'Yerevan', + 'Oslo', 'Helsinki', 'Stockholm', 'Prague', 'Istanbul', 'El Paso', 'Florence', 'Moscow', + 'Jambol', 'Talin', 'Zlatna Panega', 'Queenstown', 'Gabrovo', 'Ugurchin', 'Xanthi']; + } +} + +@Pipe({ + name: 'startsWith' +}) +export class AutocompletePipeStartsWith implements PipeTransform { + public transform(collection: any[], term = '') { + return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase())); + } +} +``` +```html +<igx-input-group class="autocomplete"> + <label igxLabel for="town">Town</label> + <input igxInput name="town" type="text" + [igxAutocomplete]="townsPanel" + [(ngModel)]="townSelected"/> + </igx-input-group> + <igx-drop-down #townsPanel maxHeight="300px"> + @for (town of towns | startsWith:townSelected; track town) { + <igx-drop-down-item [value]="town"> + {{town}} + </igx-drop-down-item> + } + </igx-drop-down> +``` +```scss +.autocomplete { + width: 50%; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Autocomplete + +To get started with the Ignite UI for Angular for [Angular Components](https://www.infragistics.com/products/ignite-ui-angular) and Autocomplete directive in particular, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If [`igxAutocomplete`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxautocompletedirective.html) is applied on an [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html), the **igxInputGroupModule** is also required: + +```typescript +// app.module.ts + +... +import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down'; +import { IgxInputGroupModule } from 'igniteui-angular/input-group'; +// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [ + ..., + IgxAutocompleteModule, + IgxDropDownModule, + IgxInputGroupModule, + .... + ], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxAutocompleteDirective` as a standalone directive. + +```typescript +// home.component.ts + +... +import { IgxAutocompleteDirective, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +// import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-input-group> + <input igxInput name="towns" type="text" [igxAutocomplete]="townsPanel" /> + <label igxLabel for="towns">Towns</label> + </igx-input-group> + <igx-drop-down #townsPanel> + <igx-drop-down-item *ngFor="let town of towns"> + {{town}} + </igx-drop-down-item> + </igx-drop-down> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Action Strip module or directive imported, you can start with a basic configuration of the `igxAutocomplete` component. + +## Using the Angular Autocomplete + +In order to apply the autocomplete functionality to an input, add the `igxAutocomplete` directive, referencing the dropdown: + +```html +<igx-input-group> + <input igxInput name="towns" type="text" [igxAutocomplete]="townsPanel" /> + <label igxLabel for="towns">Towns</label> +</igx-input-group> +<igx-drop-down #townsPanel> + <igx-drop-down-item *ngFor="let town of towns"> + {{town}} + </igx-drop-down-item> +</igx-drop-down> +``` + +Add the list that will be shown in the dropdown. If you want the list to be filtered while typing, use the **PipeTransform** interface. + +```typescript +import { Component, Pipe, PipeTransform } from '@angular/core'; + +@Component({ + selector: 'app-autocomplete-sample', + styleUrls: ['autocomplete.sample.css'], + templateUrl: `autocomplete.sample.html` +}) +export class AutocompleteSampleComponent { + constructor() { + this.towns = [ 'New York', 'Washington, D.C.', 'London', 'Berlin', 'Sofia', 'Rome', 'Kiev', + 'Copenhagen', 'Paris', 'Barcelona', 'Vienna', 'Athens', 'Dublin', 'Yerevan', + 'Oslo', 'Helsinki', 'Stockholm', 'Prague', 'Istanbul', 'El Paso', 'Florence', 'Moscow' ]; + } +} + +@Pipe({ name: 'startsWith' }) +export class AutocompletePipeStartsWith implements PipeTransform { + public transform(collection: any[], term = '') { + return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase())); + } +} +``` + +>[!NOTE] +>The [`igxAutocomplete`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxautocompletedirective.html) uses the [`igxDropDown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. + +### Disable Angular Autocomplete + +You can disable the Angular autocomplete by using the [`IgxAutocompleteDisabled`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxautocompletedirective.html#disabled) input: + +```html +<igx-input-group> + <input igxInput name="towns" type="text" + [igxAutocomplete]='townsPanel' + [igxAutocompleteDisabled]="disabled"/> + <label igxLabel for="towns">Towns</label> +</igx-input-group> +``` + +### Autocomplete Settings + +The `igx-autocomplete` dropdown positioning, scrolling strategy, and outlet can be configured using the [`IgxAutocompleteSettings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxautocompletedirective.html#autocompleteSettings). + +In the following Angular Autocomplete example we will position the dropdown above the input and disable the opening and closing animations. We're using the `ConnectedPositioningStrategy` for this: + +```html +<igx-input-group class="autocomplete"> + <label igxLabel for="cinema">Cinema</label> + <input igxInput name="cinema" type="text" + [igxAutocomplete]="townsPanel" + [igxAutocompleteSettings]="settings"/> +</igx-input-group> +<igx-drop-down #townsPanel maxHeight="300px"> + <igx-drop-down-item-group *ngFor="let town of towns" [label]="town.name"> + <igx-drop-down-item *ngFor="let cinema of town.cinemas" [value]="cinema"> + {{cinema}} + </igx-drop-down-item> + </igx-drop-down-item-group> +</igx-drop-down> +``` + +```typescript +export class AutocompleteComponent { + public settings = { + positionStrategy: new ConnectedPositioningStrategy({ + closeAnimation: null, + openAnimation: null, + verticalDirection: VerticalAlignment.Top, + verticalStartPoint: VerticalAlignment.Top + }) + }; + + public towns = [ + { + name: 'New York', + cinemas: [ + 'Regal Cinemas', + 'Village East Cinema', + 'Roxy Cinema', + 'The Paris Theatre' + ]}, + { + name: 'Los Angeles', + cinemas: [ + 'Arc Light', + 'Pacific Cinerama Dome', + 'New Beverly Cinema', + 'Downtown Independent' + ]}, + { + name: 'Seattle', + cinemas: [ + 'Central Cinema', + 'Grand Illusion Cinema', + 'Ark Lodge Cinemas', + 'Skyway Outdoor Cinema' + ]} + ]; +} +``` + +>[!NOTE] +>The default positioning strategy is `AutoPositionStrategy` and the dropdown is opened according to the available space. + +If everything went right, you should see this in your browser: + + +```typescript +import { Component, Pipe, PipeTransform } from '@angular/core'; +import { ConnectedPositioningStrategy, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; +import { FormsModule } from '@angular/forms'; + +import { AutocompletePipeStartsWith } from '../autocomplete/autocomplete.component'; +@Component({ + selector: 'app-movie-availability', + styleUrls: ['./movie.component.scss'], + templateUrl: './movie.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, AutocompletePipeStartsWith] +}) +export class MovieComponent { + public cinemaSelected; + + public settings = { + positionStrategy: new ConnectedPositioningStrategy({ + closeAnimation: null, + openAnimation: null, + verticalDirection: VerticalAlignment.Top, + verticalStartPoint: VerticalAlignment.Top + }) + }; + + public towns = [ + { + name: 'New York', + cinemas: [ + 'Regal Cinemas', + 'Village East Cinema', + 'Roxy Cinema', + 'The Paris Theatre' + ]}, + { + name: 'Los Angeles', + cinemas: [ + 'Arc Light', + 'Pacific Cinerama Dome', + 'New Beverly Cinema', + 'Downtown Independent' + ]}, + { + name: 'Seattle', + cinemas: [ + 'Central Cinema', + 'Grand Illusion Cinema', + 'Ark Lodge Cinemas', + 'Skyway Outdoor Cinema' + ]} + ]; +} + +@Pipe({ + name: 'startsWith' +}) +export class AutocompletePipeStartsWith2 implements PipeTransform { + public transform(collection: any[], term = '') { + return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase())); + } +} +``` +```html +<igx-input-group class="autocomplete"> + <label igxLabel for="cinema">Cinema</label> + <input igxInput name="cinema" type="text" + [igxAutocomplete]="townsPanel" + [igxAutocompleteSettings]="settings" + [(ngModel)]="cinemaSelected" + /> + </igx-input-group> + <igx-drop-down #townsPanel maxHeight="200px"> + @for (town of towns; track town) { + <igx-drop-down-item-group [label]="town.name"> + @for (cinema of town.cinemas | startsWith:cinemaSelected; track cinema) { + <igx-drop-down-item [value]="cinema"> + {{cinema}} + </igx-drop-down-item> + } + </igx-drop-down-item-group> + } + </igx-drop-down> +``` +```scss +.autocomplete { + width: 50%; +} + +:host { + height: 100%; + display: flex; + align-items: center; +} +``` + + +<div class="divider--half"></div> + +## Keyboard Navigation + +<div class="divider--half"></div> + +- <kbd>⬆</kbd> / <kbd>⬇</kbd> or typing in the input will open the dropdown, if it's closed. +- <kbd>⬇</kbd> - will move to the next dropdown item. +- <kbd>⬆</kbd> - will move to the previous dropdown item. +- <kbd>ENTER</kbd> will confirm the already selected item and will close the dropdown. +- <kbd>ESC</kbd> will close the dropdown. + +>[!NOTE] +>When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered. + +You can also see how our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) streamlines the entire design-to-code story by 80% using real Angular components. + +## Compatibility support + +Applying the `igxAutocomplete` directive will decorate the element with the following ARIA attributes: + +- role="combobox" - role of the element, where the directive is applied. +- aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list +- aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values. +- aria-expanded="true"/"false" - value depending on the collapsed state of the dropdown. +- aria-owns="dropDownID" - id of the dropdown used for displaying suggestions. +- aria-activedescendant="listItemId" - value is set to the id of the current active list element. + +The `drop-down` component, used as provider for suggestions, will expose the following ARIA attributes: + +- role="listbox" - applied on the `igx-drop-down` component container +- role="group" - applied on the `igx-drop-down-item-group` component container +- role="option" - applied on the `igx-drop-down-item` component container +- aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled. + + +## Styling + +Every component has its own theme. + +To get the `igxAutocomplete` styled, you have to style its containing components. In our case, these are the [input-group-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) and the [drop-down-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme). + +Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdown`](drop-down.md#styling) styling sections to get a better understanding of how to style those two components. + +## API Reference + +<div class="divider--half"></div> + +- [IgxAutocompleteDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxautocompletedirective.html) +- [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) +- [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) + + +## Theming Dependencies + +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) + +## Additional Resources + +<div class="divider--half"></div> + +- [IgxDropDown](drop-down.md) +- [IgxInputGroup](input-group.md) +- [Template Driven Forms Integration](input-group.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md new file mode 100644 index 000000000..f2d87edac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md @@ -0,0 +1,409 @@ +--- +title: Angular Avatar Component – Ignite UI for Angular | Infragistics | MIT license +_description: Ignite UI for Angular Avatar control enables users to add images, material icons or initials within any application for instances such as a profile button. +_keywords: Angular Avatar component, Angular Avatar control, Ignite UI for Angular, Angular UI components +_license: MIT +_tocName: Avatar +--- + +# Angular Avatar Component Overview + +<p class="highlight">Angular Avatar component helps adding initials, images, or material icons to your application.</p> +<div class="divider"></div> + +## Angular Avatar Example + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; + +@Component({ + selector: 'app-avatar-sample-3', + styleUrls: ['./avatar-sample-3.component.scss'], + templateUrl: './avatar-sample-3.component.html', + imports: [IgxAvatarComponent] +}) +export class AvatarSample3Component { + + constructor() { } + +} +``` +```html +<article class="avatars-wrapper"> + <div class="avatar-sample initials"> + <igx-avatar initials="JS" size="medium"></igx-avatar> + </div> + <div class="avatar-sample"> + <igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="medium"></igx-avatar> + </div> + <div class="avatar-sample icon"> + <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar> + </div> +</article> +``` +```scss +.avatars-wrapper { + display: flex; + flex-flow: row wrap; +} + +.avatar-sample { + display: flex; + flex: 1 0 30%; + width: 88px; + height: 88px; + justify-content: center; + align-items: center; + margin: 15px 0; +} + +.avatar-sample.initials .igx-avatar{ + background: #e41c77; +} + +.avatar-sample.icon .igx-avatar{ + background: #9e9e9e; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Avatar + +To get started with the Ignite UI for Angular Avatar component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxAvatarModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxAvatarModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxAvatarComponent` as a standalone dependency. + +```typescript +// home.component.ts + +... +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<igx-avatar shape="circle"></igx-avatar>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxAvatarComponent] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Avatar module or component imported, you can start with a basic configuration of the `igx-avatar` component. + +## Using the Angular Avatar Component + +The Ignite UI for Angular Avatar component comes in three shapes (square, rounded, and circle) and three size options (small, medium, and large). It can be used for displaying initials, images or icons. + +### Avatar Shape + +We can change the avatar shape through the `shape` attribute setting its value to `square`, `rounded` or `circle`. By default, the shape of the avatar is `square`. + +```html +<igx-avatar shape="circle"></igx-avatar> +``` + +### Avatar displaying initials + +To get a simple avatar with [`initials`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html#initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template: + +```html +<igx-avatar initials="JS" shape="circle"></igx-avatar> +``` + +Let's enhance our avatar by making it circular and bigger in size. + +```html +<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar> +``` + +We can also change the background through the `background` property or set a color on the initials through the `color` property. + +```scss +// avatar.component.scss + +igx-avatar { + background: #e41c77; + color: #000000; +} + +``` + +> [!WARNING] +> The `roundShape` property of the `igx-avatar` component have been deprecated. The `shape` attribute should be used instead. + +If all went well, you should see something like the following in the browser: + +<div class="sample-container loading" style="height:100px"> + <iframe id="avatar-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-1' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +### Avatar displaying image + +To get an avatar that displays an image, all you have to do is set the image source via the `src` property. + +```html +<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg" + shape="rounded" + size="large"> +</igx-avatar> +``` + +If all went well, you should see something like the following in the browser: + +<div class="sample-container loading" style="height:100px"> + <iframe id="avatar-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-2' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +### Avatar displaying icon + +Analogically, the avatar can display an icon via the [`icon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html#icon) property. Currently all icons from the material icon set are supported. + +```html +<igx-avatar icon="person" + shape="rounded" + size="small"> +</igx-avatar> +``` + +You should see something like this: + +<div class="sample-container loading" style="height:100px"> + <iframe id="avatar-sample-4-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-4' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## Styling + +### Avatar Theme Property Map + +Changing the `$background` property automatically updates the following dependent properties: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><strong>$background</strong></td> + <td>$color</td> + <td>The text color used for the avatar.</td> + </tr> + <tr> + <td></td> + <td>$icon-color</td> + <td>The icon color used for the avatar.</td> + </tr> + </tbody> +</table> + +To get started with styling the avatar, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`avatar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme) providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's `shape` is set to `rounded`. + +Given the following markup: + +```html +<div class="avatar-sample initials"> + <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar> +</div> +``` + +We create the following avatar theme: + +```scss +$custom-avatar-theme: avatar-theme( + $background: #72da67, + $border-radius: 16px +); +``` + +The last step is to pass the custom avatar theme: + +```scss +.initials { + @include tokens($custom-avatar-theme); +} +``` + +If all went well, you should see something like the following in the browser: + + +```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; + +@Component({ + selector: 'app-avatar-styling', + styleUrls: ['./avatar-styling.component.scss'], + templateUrl: './avatar-styling.component.html', + imports: [IgxAvatarComponent] +}) + +export class AvatarStylingSampleComponent { + +} +``` +```html +<article class="avatars-wrapper"> + <div class="avatar-sample initials"> + <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar> + </div> + <div class="avatar-sample icon"> + <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar> + </div> +</article> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$initials-avatar-theme: avatar-theme( + $background: #72da67, + $border-radius: 16px +); + +$icon-avatar-theme: avatar-theme( + $background: #217346, +); + +.initials{ + @include tokens($initials-avatar-theme); +} + +.icon{ + @include tokens($icon-avatar-theme); +} +``` + +### Styling with Tailwind + +You can style the `avatar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-avatar`, `dark-avatar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [avatar-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme). The syntax is as follows: + +```html +<igx-avatar +class="!light-avatar ![--background:#FF4E00]" +initials="DY" +shape="rounded"> +</igx-avatar> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your avatar should look like this: + +<div class="sample-container loading" style="height:100px"> + <iframe id="avatar-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-tailwind-styling' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +### Custom sizing + +You can either use the `--size` variable, targeting the `igx-avatar` directly: + +```scss +igx-avatar { + --size: 200px; +} +``` + +Or you can use the universal `--ig-avatar-size` variable to target all instances: + +```html +<div class="my-app"> + <igx-avatar></igx-avatar> +</div> +``` + +```scss +.my-app { + --ig-avatar-size: 200px; +} +``` + +You can also use one of the predefined sizes, assigning it to the `--ig-size` variable, if theres no size attribute applied. The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`: + +```scss +igx-avatar { + --ig-size: var(--ig-size-small); +} +``` + +Learn more about it in the [Size](display-density.md) article. + +<div class="divider--half"></div> + +## API References + +<div class="divider--half"></div> + +- [IgxAvatarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html) + + +## Theming Dependencies + +- [IgxAvatar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md new file mode 100644 index 000000000..e82411bc6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md @@ -0,0 +1,631 @@ +--- +title: Angular Badge Component – Ignite UI for Angular | Infragistics | MIT license +_description: Display an active count or icon in a predefined style to decorate other components anywhere in an application with Ignite UI for Angular Badge control. +_keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular, Angular UI Components +_license: MIT +_tocName: Badge +--- + +# Angular Badge Component Overview + +<p class="highlight">Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.</p> + +## Angular Badge Example + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-sample-2', + styleUrls: ['./badge-sample-2.component.scss'], + templateUrl: './badge-sample-2.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeSample2Component { } +``` +```html +<div class="wrapper"> + <igx-avatar icon="person" shape="circle" size="small"></igx-avatar> + <igx-badge icon="check" type="success" shape="square"></igx-badge> +</div> +``` +```scss +.wrapper { + position: relative; + margin-top: 15px; +} + +igx-badge { + position: absolute; + bottom: 0; + left: 28px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Badge + +To get started with the Ignite UI for Angular Badge component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxBadgeModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxBadgeModule } from 'igniteui-angular/badge'; +// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxBadgeModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` as a standalone dependency. + +```typescript +// home.component.ts + +... +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxBadgeComponent] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component. + +## Using the Angular Badge Component + +Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import the `IgxAvatarModule`, along with the `IgxBadgeModule`: + +```typescript +// app.module.ts +... +import { IgxBadgeModule } from 'igniteui-angular/badge'; +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +// import { IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxBadgeModule, IgxAvatarModule], + ... +}) + +export class AppModule {} +``` + +_Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` and `IgxAvatarComponent` as standalone dependencies._ + +Next, we will add those components to our template: + +```html +<div class="wrapper"> + <igx-avatar icon="person" shape="circle" size="small"></igx-avatar> + <igx-badge icon="check" type="success"></igx-badge> +</div> +``` + +Using the wrapper, we will position the badge absolutely, covering a little bit of the avatar: + +```scss +.wrapper { + position: relative; + margin-top: 15px; +} + +igx-badge { + position: absolute; + bottom: 0; + left: 28px; +} +``` + +### Badge Shape + +We can change the badge shape through the `shape` attribute setting its value to `square`. By default, the shape of the badge is `rounded`. + +```html +<igx-badge icon="check" type="success" shape="square"></igx-badge> +``` + +If everything's done right, you should see the demo sample shown above in your browser. + +### Badge Size + +The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography. + +Example: + +```scss +igx-badge { + --size: 12px; + + font-size: calc(var(--size) / 2); + line-height: normal; +} +``` + +### Badge Icon + +In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: + +```ts +export class BadgeIconComponent implements OnInit { + constructor (protected _iconService: IgxIconService) {} + + public ngOnInit() { + this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); + } +} +``` + +Then, just specify the icon name and family as follows: + +```html +<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge> +``` + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { heartMonitor } from '@igniteui/material-icons-extended'; +import { IgxIconService } from 'igniteui-angular/icon'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-icon', + styleUrls: ['./badge-icon.component.scss'], + templateUrl: './badge-icon.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeIconComponent implements OnInit { + protected _iconService = inject(IgxIconService); + + + public ngOnInit() { + this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); + } +} +``` +```html +<div class="wrapper"> + <igx-avatar icon="face" size="small" shape="rounded"></igx-avatar> + <igx-badge type="error" icon="heart-monitor" iconSet="imx-icons"></igx-badge> +</div> +``` +```scss +.wrapper { + position: relative; + margin-top: 15px; +} + +igx-badge { + position: absolute; + bottom: 0; + left: 28px; +} +``` + +### Dot Badge + +The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-dot-sample', + styleUrls: ['./badge-dot-sample.component.scss'], + templateUrl: './badge-dot-sample.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeDotSampleComponent { } +``` +```html +<div class="wrapper"> + <igx-avatar icon="face" shape="rounded" size="small"></igx-avatar> + <igx-badge dot type="success"></igx-badge> +</div> +``` +```scss +.wrapper { + display: flex; + position: relative; + margin-top: 15px; + + igx-avatar { + anchor-name: --avatar; + } + + igx-badge { + position: absolute; + position-anchor: --avatar; + bottom: anchor(--avatar top); + left: anchor(right); + transform: translate(-75%, 75%); + } +} +``` + +### Badge in List + +Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the [`igx-badge`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html) and [`igx-avatar`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html) components. For a container, [`igx-list`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html) is used. + +To continue, include all needed modules and import them in the **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxListModule } from 'igniteui-angular/list'; +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +import { IgxBadgeModule } from 'igniteui-angular/badge'; +// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule], +}) +export class AppModule {} +``` + +>[!NOTE] +>The [`igx-badge`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html) has [`icon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html#icon) and [`type`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/type.html#default), [`info`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/type.html#info), [`success`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/type.html#success), [`warning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/type.html#warning), or [`error`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/type.html#error). Depending on the type, a specific background color is applied. + +In our sample, [`icon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html#icon) and [`type`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_. + +Next, we're adding the contacts in our template: + +```html +<!-- contacts.component.html --> + +<igx-list> + <igx-list-item isHeader="true"> + Team Members (4) + </igx-list-item> + <igx-list-item *ngFor="let member of members"> + <div class="wrapper"> + <div> + <igx-avatar icon="person" shape="circle" size="small"></igx-avatar> + <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge> + </div> + <div class="contact-container"> + <span class="contact-name">{{ member.name }}</span> + </div> + </div> + </igx-list-item> +</igx-list> +``` + +We're going to create our members in the typescript file like this: + +```typescript +// contacts.component.ts + +... + public members: Member[] = [ + new Member('Terrance Orta', 'online'), + new Member('Donna Price', 'online'), + new Member('Lisa Landers', 'away'), + new Member('Dorothy H. Spencer', 'offline'), + ]; + +``` + +```typescript + +... +class Member { + public name: string; + public status: string; + public type: string; + public icon: string; + + constructor(name: string, status: string) { + this.name = name; + this.status = status; + switch (status) { + case 'online': + this.type = 'success'; + this.icon = 'check'; + break; + case 'away': + this.type = 'warning'; + this.icon = 'schedule'; + break; + case 'offline': + this.type = 'error'; + this.icon = 'remove'; + break; + } + } +} +``` + +Position the badge in its parent container: + +```css +/* contacts.component.css */ + +.wrapper { + display: flex; + flex-direction: row; +} + +.contact-name { + font-weight: 600; +} + +.contact-container { + margin-left: 20px; +} + +.badge-style { + position: absolute; + bottom: 2.5px; + left: 40px; +} + +``` + +If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state. + +```typescript +import { Component } from '@angular/core'; +import { Member } from '../model/member.model'; +import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + + +@Component({ + selector: 'app-badge-sample-3', + styleUrls: ['./badge-sample-3.component.scss'], + templateUrl: './badge-sample-3.component.html', + imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeSample3Component { + public members: Member[] = [ + new Member('Terrance Orta', 'online'), + new Member('Donna Price', 'online'), + new Member('Lisa Landers', 'away'), + new Member('Dorothy H. Spencer', 'offline') + ]; +} +``` +```html +<igx-list> + <igx-list-item [isHeader]="true"> + Team Members (4) + </igx-list-item> + @for (member of members; track member) { + <igx-list-item> + <div class="wrapper"> + <div> + <igx-avatar icon="person" shape="circle" size="small"></igx-avatar> + <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge> + </div> + <div class="contact-container"> + <span class="contact-name">{{ member.name }}</span> + </div> + </div> + </igx-list-item> + } +</igx-list> +``` +```scss +.wrapper { + display: flex; + flex-direction: row; +} + +.contact-name { + font-weight: 600; +} + +.contact-container { + margin-left: 20px; +} + +.badge-style { + position: absolute; + bottom: 2.5px; + left: 40px; +} +``` + +## Styling + +### Badge Theme Property Map + +Changing the `$background-color` property automatically updates the following dependent properties: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><strong>$background-color</strong></td> + <td>$icon-color</td> + <td>The color used for icons in the badge.</td> + </tr> + <tr> + <td></td> + <td>$text-color</td> + <td>The color used for text in the badge.</td> + </tr> + </tbody> +</table> + +To get started with styling the badges, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`badge-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's `shape` is set to `square`. + +```scss +$custom-badge-theme: badge-theme( + $background-color: #57a5cd, + $border-radius: 4px +); +``` + +To include the new theme we use the `tokens` mixin: + +```scss +:host { + @include tokens($custom-badge-theme); +} +``` + +### Demo + +```typescript +import { Component } from '@angular/core'; +import { Member } from '../model/member.model'; +import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + + +@Component({ + selector: 'app-badge-styling-sample', + styleUrls: ['./badge-styling-sample.component.scss'], + templateUrl: './badge-styling-sample.component.html', + imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeStylingSampleComponent { + public members: Member[] = [ + new Member('Terrance Orta', 'online'), + new Member('Donna Price', 'online'), + new Member('Lisa Landers', 'away'), + new Member('Dorothy H. Spencer', 'offline') + ]; +} +``` +```html +<igx-list> + <igx-list-item [isHeader]="true"> + Team Members (4) + </igx-list-item> + @for (member of members; track member) { + <igx-list-item> + <div class="wrapper"> + <div> + <igx-avatar icon="person" shape="circle" size="small"></igx-avatar> + <igx-badge [icon]="member.icon" shape="square" class="badge-style"></igx-badge> + </div> + <div class="contact-container"> + <span class="contact-name">{{ member.name }}</span> + </div> + </div> + </igx-list-item> + } +</igx-list> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-badge-theme: badge-theme( + $background-color: #57a5cd, + $border-radius: 4px +); + +:host { + @include tokens($custom-badge-theme); +} +``` + +### Styling with Tailwind + +You can style the `badge` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-badge`, `dark-badge`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [badge-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme). The syntax is as follows: + +```html +<igx-badge +class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]"> +</igx-badge> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your badges should look like this: + +<div class="sample-container loading" style="height:340px"> + <iframe id="badge-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/data-display/badge-tailwind-styling-sample' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## API References + +<div class="divider--half"></div> + +- [IgxAvatarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html) +- [IgxBadgeComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html) +- [IgxBadgeComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) +- [IgxListComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html) +- [IgxListItemComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistitemcomponent.html) +- [IgxBadgeType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#IgxBadgeType) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md new file mode 100644 index 000000000..c5bf475f1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md @@ -0,0 +1,666 @@ +--- +title: Angular Banner Component – Ignite UI for Angular | Infragistics | MIT license +_description: Easily integrate a short, non-intrusive message (along with optional actions) using Ignite UI for Angular Banner component. +_keywords: Angular Banner component, Angular Banner control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components +_license: MIT +_tocName: Banner +--- + +# Angular Banner Component Overview + +<p class="highlight">Angular Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. The Banner can also be configured to display custom action buttons and an icon.</p> + +## Angular Banner Example + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxBannerComponent } from 'igniteui-angular/banner'; +import { IgxNavbarComponent } from 'igniteui-angular/navbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxCardComponent } from 'igniteui-angular/card'; + +@Component({ + selector: 'app-banner-sample-1', + styleUrls: ['../banner-samples.scss'], + templateUrl: 'banner-sample-1.component.html', + imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxCardComponent] +}) + +export class BannerSample1Component implements OnInit { + @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent; + public contentWidth = '384px'; + public imageUrls = ['assets/images/card/media/the_red_ice_forest.jpg', + 'assets/images/card/media/yosemite.jpg']; + public ngOnInit() { + this.banner.open(); + } +} +``` +```html +<div class="gallery__wrapper"> + <div class="gallery__content"> + <igx-navbar title="Gallery"> + <igx-icon (click)="connectionBanner.open()">refresh</igx-icon> + </igx-navbar> + <igx-banner class="offline-banner" #connectionBanner> + You are currently offline. + </igx-banner> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[0]"> + </div> + </igx-card> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[1]"> + </div> + </igx-card> + </div> +</div> +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Banner + +To get started with the Ignite UI for Angular Banner component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxBannerModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxBannerModule } from 'igniteui-angular/banner'; +// import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxBannerModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxBannerComponent` as a standalone dependency, or use the [`IGX_BANNER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/banner/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +... +import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner'; +// import { IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-banner> + You are currently offline. + </igx-banner> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_BANNER_DIRECTIVES] + /* or imports: [IgxBannerComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Banner module or directives imported, you can start with a basic configuration of the `igx-banner` component. + +## Using the Angular Banner Component + +### Show Banner + +In order to display the banner component, use its [`open()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html#open) method and call it on a button click. The banner appears relative to where the element was inserted in the page template, moving all other content. It typically shows some non-intrusive content that requires minimal user interaction to be dismissed. + +```html +<!--banner.component.html--> + +<igx-icon (click)="connectionBanner.open()">refresh</igx-icon> +... +<igx-banner #connectionBanner> + You are currently offline. +</igx-banner> + +``` + +> [!NOTE] +> The `IgxBannerModule` includes a default banner button `Dismiss`, which closes the banner. + +## Examples + +The [`IgxBannerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html) allows templating of its content while still sticking as closely as possible to the material design banner guidelines. + +### Changing the banner message + +Configuring the message displayed in the banner is easy - just change the content you are passing to the `igx-banner` tag. The text will show up in the specified banner area and the banner will use its default template when displaying it. Below, we will change the content of our sample banner to be a bit more descriptive: + +```html +<!--banner.component.html--> +<igx-banner #connectionBanner> + You have lost connection to the internet. This app is offline. +</igx-banner> +``` + +### Adding an icon + +An [`igx-icon`](icon.md) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message. + +> [!NOTE] +> If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner. + +To pass an `igx-icon` to you banner, simply insert it in the banner's content: + +```html +<!--banner.component.html--> +<igx-banner #connectionBanner> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. +</igx-banner> +``` + +If you want to use an `igx-icon` in your banner message, wrap it in a `span` tag: + +```html +<!--banner.component.html--> +<igx-banner #connectionBanner> + You have lost connection to the internet. This app is offline. + <span> + <igx-icon>signal_wifi_off</igx-icon> + </span> +</igx-banner> +``` + +### Changing the banner button + +The `IgxBannerModule` exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbanneractionsdirective.html). This directive allows you to override the default banner button (`Dismiss`) and add user-defined custom actions. + +```html +<!--banner.component.html--> +<igx-banner #connectionBanner> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. + <igx-banner-actions> + <button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button> + </igx-banner-actions> +</igx-banner> +``` + + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; +import { IgxNavbarComponent } from 'igniteui-angular/navbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxCardComponent } from 'igniteui-angular/card'; + +@Component({ + selector: 'app-banner-sample-2', + styleUrls: ['../banner-samples.scss'], + templateUrl: 'banner-sample-2.component.html', + imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent] +}) + +export class BannerSample2Component implements OnInit { + @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent; + public contentWidth = '384px'; + public imageUrls = ['assets/images/card/media/the_red_ice_forest.jpg', + 'assets/images/card/media/yosemite.jpg']; + + public ngOnInit() { + this.banner.open(); + } +} +``` +```html +<div class="gallery__wrapper"> + <div class="gallery__content"> + <igx-navbar title="Gallery"> + <igx-icon (click)="connectionBanner.open()">refresh</igx-icon> + </igx-navbar> + <igx-banner class="offline-banner" #connectionBanner> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. + <igx-banner-actions> + <button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button> + </igx-banner-actions> + </igx-banner> + + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[0]"> + </div> + </igx-card> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[1]"> + </div> + </igx-card> + </div> +</div> +``` + + +### Applying custom animations + +The banner component comes with the [`animationSettings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html#animationSettings) property that allows applying custom opening and closing animations. Developers can choose between self-defined animations, and those from our [`Animation suite`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations). The default ones, used by the banner, are `growVerIn` for entering and `growVerOut` for exiting. + +Let's change the animations that our banner uses, so that it slides in and out: + +```html +<!--banner.component.html--> +<igx-banner #connectionBanner [animationSettings]="animationSettings"> + ... +</igx-banner> +``` + +```typescript +// banner.component.ts +import { IgxBannerComponent } from 'igniteui-angular/banner'; +import { slideInLeft, slideOutRight } from 'igniteui-angular/animations' +// import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package +... +export class MyBannerComponent { + ... + public animationSettings = { + openAnimation: slideInLeft, + closeAnimation: slideOutRight + } + ... +} +``` + + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; +import { IgxNavbarComponent } from 'igniteui-angular/navbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxCardComponent } from 'igniteui-angular/card'; +import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; + +@Component({ + selector: 'app-banner-sample-3', + styleUrls: ['../banner-samples.scss'], + templateUrl: 'banner-sample-3.component.html', + imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent] +}) + +export class BannerSample3Component implements OnInit { + @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent; + public contentWidth = '384px'; + public imageUrls = ['assets/images/card/media/the_red_ice_forest.jpg', + 'assets/images/card/media/yosemite.jpg']; + public animationSettings = { + closeAnimation: slideOutRight, + openAnimation: slideInLeft + }; + + public ngOnInit() { + this.banner.open(); + } +} +``` +```html +<div class="gallery__wrapper"> + <div class="gallery__content"> + <igx-navbar title="Gallery"> + <igx-icon (click)="connectionBanner.open()">refresh</igx-icon> + </igx-navbar> + <igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings"> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. + <igx-banner-actions> + <button igxButton igxRipple (click)="connectionBanner.close()">Close</button> + </igx-banner-actions> + </igx-banner> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[0]"> + </div> + </igx-card> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[1]"> + </div> + </igx-card> + </div> +</div> +``` + + +### Binding to events + +The banner component emits events when changing its state - [`opening`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html#opening) and [`opened`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html#closing) and [`closed`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown. + +To cancel an event, bind it to the emitted object and set its `cancel` property to `true`. + +```html +<!--banner.component.html--> + <igx-banner #connectionBanner (opening)="handleOpen($event)"> + ... + </igx-banner> +``` + +```typescript +// banner.component.ts +... +export class MyBannerComponent { + ... + public handleOpen(event) { + event.cancel = true; + } +} +``` + +> [!NOTE] +> If the changes above are applied, the banner will never open, as the opening event is always cancelled. + +## Advanced Example + +Let's create a banner with two custom buttons - one for dismissing the notification and one for turning on the connection. We can pass custom action handlers using the `igx-banner-actions` selector: + +```html +<!--banner.component.html--> +<igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings"> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. + <igx-banner-actions> + <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button> + <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button> + </igx-banner-actions> +</igx-banner> +``` + +> [!NOTE] +> According to Google's [`Material Design`](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` does not explicitly limit the number of elements under the `igx-banner-actions` tag, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. + +The dismiss option (`'Continue Offline'`) doesn't need any further logic, so it can just call the `close()` method. The confirm action (`'Turn On Wifi'`), however, requires some additional logic, so we have to define it in the component. Then, we will create `onNetworkStateChange` Observable and subscribe to it. The last step is to call the `refreshBanner()` method on each change, which will toggle the banner depending on the `wifiState`. + +The banner will also have a WiFi icon in the navbar. As the subscription fires on any change of the `wifiState`, the icon will not only toggle the banner, but change according to the state of the connection: + +```html +<!--banner.component.html--> +<igx-navbar title="Gallery"> + <igx-icon (click)="wifiState = !wifiState"> + {{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }} + </igx-icon> +</igx-navbar> +``` + +Finally, we will add a `toast`, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below: + + +```typescript +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { IgxNavbarComponent } from 'igniteui-angular/navbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxCardComponent } from 'igniteui-angular/card'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'app-banner-advanced-sample', + styleUrls: ['../banner-samples.scss'], + templateUrl: 'banner-advanced-sample.component.html', + imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent, IgxToastComponent] +}) + +export class BannerAdvancedSampleComponent implements OnInit, OnDestroy { + + @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent; + @ViewChild(IgxToastComponent, { static: true }) public eventToast: IgxToastComponent; + public contentWidth = '384px'; + public imageUrls = ['assets/images/card/media/the_red_ice_forest.jpg', + 'assets/images/card/media/yosemite.jpg']; + public onNetworkStateChange = new Subject<void>(); + + private _wifiState = false; + public get wifiState(): boolean { + return this._wifiState; + } + public set wifiState(v: boolean) { + this._wifiState = v; + this.onNetworkStateChange.next(); + } + + public showToast() { + this.eventToast.close(); + this.eventToast.positionSettings.verticalDirection = VerticalAlignment.Middle; + this.eventToast.open(`Wifi is now ${this.wifiState ? 'on' : 'off'}`); + } + + public ngOnInit() { + this.banner.open(); + this.onNetworkStateChange.subscribe(() => this.refreshBanner()); + } + + public ngOnDestroy(): void { + this.onNetworkStateChange.complete(); + } + + public refreshBanner() { + if (!this.wifiState) { + this.banner.open(); + } else { + if (!this.banner.collapsed) { + this.banner.close(); + } + } + this.showToast(); + } +} +``` +```html +<div class="gallery__wrapper"> + <div class="gallery__content"> + <igx-navbar title="Gallery"> + <igx-icon (click)="wifiState = !wifiState">{{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}</igx-icon> + </igx-navbar> + <igx-banner class="offline-banner" #connectionBanner> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. + <igx-banner-actions> + <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button> + <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button> + </igx-banner-actions> + </igx-banner> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[0]"> + </div> + </igx-card> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[1]"> + </div> + </igx-card> + <igx-toast #eventToast></igx-toast> + </div> +</div> +``` + + +## Styling + +First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`banner-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) and specifying just the `$banner-background`. Based on this value, the `$banner-message-color` and `$banner-illustration-color` are automatically set to black or white, depending on which provides better contrast with the background. + +```scss +$custom-banner-theme: banner-theme( + $banner-background: #011627, +); +``` + +>[!NOTE] +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. + +The last step is to pass the custom banner theme: + +```scss +:host { + @include tokens($custom-banner-theme); +} +``` + +```typescript +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { IgxNavbarComponent } from 'igniteui-angular/navbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxCardComponent } from 'igniteui-angular/card'; +import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'app-banner-styling', + styleUrls: ['banner-styling.component.scss', '../banner-samples.scss'], + templateUrl: 'banner-styling.component.html', + encapsulation: ViewEncapsulation.None, + imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent, IgxToastComponent] +}) + +export class BannerStylingComponent implements OnInit, OnDestroy { + @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent; + @ViewChild(IgxToastComponent, { static: true }) public eventToast: IgxToastComponent; + public contentWidth = '384px'; + public imageUrls = ['assets/images/card/media/the_red_ice_forest.jpg', + 'assets/images/card/media/yosemite.jpg']; + public animationSettings = { + closeAnimation: slideOutRight, + openAnimation: slideInLeft + }; + public onNetworkStateChange = new Subject<void>(); + private _wifiState = false; + + public get wifiState(): boolean { + return this._wifiState; + } + public set wifiState(v: boolean) { + this._wifiState = v; + this.onNetworkStateChange.next(); + } + + public showToast() { + this.eventToast.close(); + this.eventToast.positionSettings.verticalDirection = VerticalAlignment.Middle; + this.eventToast.open(`Wifi is now ${this.wifiState ? 'on' : 'off'}`); + } + + public ngOnInit() { + this.banner.open(); + this.onNetworkStateChange.subscribe(() => this.refreshBanner()); + } + + public ngOnDestroy(): void { + this.onNetworkStateChange.complete(); + } + + public refreshBanner() { + if (!this.wifiState) { + this.banner.open(); + } else { + this.banner.close(); + } + this.showToast(); + } +} +``` +```html +<div class="gallery__wrapper"> + <div class="gallery__content"> + <igx-navbar title="Gallery"> + <igx-icon (click)="wifiState = !wifiState">{{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off'}} + </igx-icon> + </igx-navbar> + <igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings"> + <igx-icon>signal_wifi_off</igx-icon> + You have lost connection to the internet. This app is offline. + <igx-banner-actions> + <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button> + <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button> + </igx-banner-actions> + </igx-banner> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[0]"> + </div> + </igx-card> + <igx-card class="gallery__item" elevated> + <div> + <img [src]="imageUrls[1]"> + </div> + </igx-card> + <igx-toast #eventToast></igx-toast> + </div> +</div> +``` +```scss +@use "igniteui-angular/theming" as *; + +$custom-banner-theme: banner-theme( + $banner-background: #011627, +); + +igx-banner { + @include tokens($custom-banner-theme); +} +``` + + +<div class="divider--half"></div> + +## API Reference + +<div class="divider--half"></div> + +- [IgxBannerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbannercomponent.html) +- [IgxBannerActionsDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbanneractionsdirective.html) +- [IgxBannerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) + +Additional components and/or directives with relative APIs that were used: + +- [IgxCardComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcardcomponent.html) +- [IgxIconComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) +- [IgxNavbarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnavbarcomponent.html) +- [IgxToastComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtoastcomponent.html) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) +- [IgxExpansionPanel Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme) + + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md new file mode 100644 index 000000000..3333b9aa8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md @@ -0,0 +1,1212 @@ +--- +title: Angular Bullet Graph | Data Visualization Tools | Infragistics +_description: Infragistics' Angular bullet graph control allows you to create dashboards displaying ranges or comparing multiple measurements. View our data visualization tools! +_keywords: Angular Bullet Graph, animation, labels, needle, scales, ranges, tick marks, Infragistics +_license: commercial +mentionedTypes: ["XamBulletGraph"] +namespace: Infragistics.Controls.Gauges +_tocName: Bullet Graph +_premium: true +--- + +# Angular Bullet Graph Overview + +The Angular bullet graph component allows for a linear and concise view of measures compared against a scale. + +The Ignite UI for Angular bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible. + +## Angular Bullet Graph Example + +The following sample demonstrates how setting multiple properties on the same [`IgxBulletGraphComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) can transform it to completely different bullet graph. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + +import { IgxButtonModule } from "igniteui-angular"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule, + IgxButtonModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; +import { IgxLinearGraphRangeComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; + + private shouldAnimate: boolean = false; + + public ngAfterViewInit(): void { + + // enabling animation duration (in milliseconds) + this.AnimateToGauge3(); + } + + public AnimateToGauge3(): void { + + if(this.shouldAnimate){ + this.bulletGraph.transitionDuration = 500; + } + + this.bulletGraph.minimumValue = 0; + this.bulletGraph.maximumValue = 120; + this.bulletGraph.value = 70; + this.bulletGraph.interval = 10; + + // setting appearance of labels + this.bulletGraph.labelInterval = 10; + this.bulletGraph.labelExtent = 0.02; + + // setting custom appearance of performance bar + this.bulletGraph.valueInnerExtent = 0.5; + this.bulletGraph.valueOuterExtent = 0.7; + this.bulletGraph.valueBrush = "#000000"; + + // setting custom appearance of target bar + this.bulletGraph.targetValueBrush = "#000000"; + this.bulletGraph.targetValueBreadth = 10; + this.bulletGraph.targetValue = 90; + + // setting appearance of major/minor ticks + this.bulletGraph.minorTickCount = 5; + this.bulletGraph.minorTickEndExtent = 0.10; + this.bulletGraph.minorTickStartExtent = 0.20; + this.bulletGraph.tickStartExtent = 0.20; + this.bulletGraph.tickEndExtent = 0.05; + this.bulletGraph.tickStrokeThickness = 2; + + // setting custom gauge ranges + const range1 = new IgxLinearGraphRangeComponent(); + range1.startValue = 0; + range1.endValue = 40; + const range2 = new IgxLinearGraphRangeComponent(); + range2.startValue = 40; + range2.endValue = 80; + const range3 = new IgxLinearGraphRangeComponent(); + range3.startValue = 80; + range3.endValue = 120; + + this.bulletGraph.rangeBrushes = [ "#FF9800", "#F96232", "#C62828"]; + this.bulletGraph.rangeOutlines = [ "#FF9800", "#F96232", "#C62828"]; + this.bulletGraph.ranges.clear(); + this.bulletGraph.ranges.add(range1); + this.bulletGraph.ranges.add(range2); + this.bulletGraph.ranges.add(range3); + + // setting extent of all gauge ranges + for (let i = 0; i < this.bulletGraph.ranges.count; i++) { + const range = this.bulletGraph.ranges.item(i); + range.innerStartExtent = 0.2; + range.innerEndExtent = 0.2; + range.outerStartExtent = 0.95; + range.outerEndExtent = 0.95; + } + + // setting extent of gauge scale + this.bulletGraph.scaleBackgroundThickness = 0.5; + this.bulletGraph.scaleBackgroundBrush = "#dbdbdb"; + this.bulletGraph.scaleBackgroundOutline = "gray"; + this.bulletGraph.scaleStartExtent = 0.05; + this.bulletGraph.scaleEndExtent = 0.95; + this.bulletGraph.scaleBackgroundThickness = 0; + + // setting appearance of backing fill and outline + this.bulletGraph.backingBrush = "#f7f7f7"; + this.bulletGraph.backingOutline = "#d1d1d1"; + this.bulletGraph.backingStrokeThickness = 0; + + this.shouldAnimate = true; + } + + public AnimateToGauge2(): void { + + if(this.shouldAnimate){ + this.bulletGraph.transitionDuration = 500; + } + + this.bulletGraph.minimumValue = 100; + this.bulletGraph.maximumValue = 200; + this.bulletGraph.value = 120; + this.bulletGraph.interval = 10; + + // setting appearance of labels + this.bulletGraph.labelInterval = 10; + this.bulletGraph.labelExtent = 0.02; + + // setting custom appearance of performance bar + this.bulletGraph.valueInnerExtent = 0.5; + this.bulletGraph.valueOuterExtent = 0.7; + this.bulletGraph.valueBrush = "#000000"; + + // setting custom appearance of target bar + this.bulletGraph.targetValueBrush = "#000000"; + this.bulletGraph.targetValueBreadth = 10; + this.bulletGraph.targetValue = 180; + + // setting appearance of major/minor ticks + this.bulletGraph.minorTickCount = 5; + this.bulletGraph.minorTickEndExtent = 0.10; + this.bulletGraph.minorTickStartExtent = 0.20; + this.bulletGraph.tickStartExtent = 0.20; + this.bulletGraph.tickEndExtent = 0.05; + this.bulletGraph.tickStrokeThickness = 2; + + // setting custom gauge ranges + const range1 = new IgxLinearGraphRangeComponent(); + range1.startValue = 100; + range1.endValue = 125; + const range2 = new IgxLinearGraphRangeComponent(); + range2.startValue = 125; + range2.endValue = 150; + const range3 = new IgxLinearGraphRangeComponent(); + range3.startValue = 150; + range3.endValue = 175; + const range4 = new IgxLinearGraphRangeComponent(); + range4.startValue = 175; + range4.endValue = 200; + + this.bulletGraph.rangeBrushes = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"]; + this.bulletGraph.rangeOutlines = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"]; + this.bulletGraph.ranges.clear(); + this.bulletGraph.ranges.add(range1); + this.bulletGraph.ranges.add(range2); + this.bulletGraph.ranges.add(range3); + this.bulletGraph.ranges.add(range4); + + // setting extent of all gauge ranges + for (let i = 0; i < this.bulletGraph.ranges.count; i++) { + const range = this.bulletGraph.ranges.item(i); + range.innerStartExtent = 0.2; + range.innerEndExtent = 0.2; + range.outerStartExtent = 0.95; + range.outerEndExtent = 0.95; + } + + // setting extent of gauge scale + this.bulletGraph.scaleBackgroundThickness = 0.5; + this.bulletGraph.scaleBackgroundBrush = "#dbdbdb"; + this.bulletGraph.scaleBackgroundOutline = "gray"; + this.bulletGraph.scaleStartExtent = 0.05; + this.bulletGraph.scaleEndExtent = 0.95; + this.bulletGraph.scaleBackgroundThickness = 0; + + // setting appearance of backing fill and outline + this.bulletGraph.backingBrush = "#f7f7f7"; + this.bulletGraph.backingOutline = "#d1d1d1"; + this.bulletGraph.backingStrokeThickness = 0; + + this.shouldAnimate = true; + } + + public AnimateToGauge1(): void { + + if(this.shouldAnimate){ + this.bulletGraph.transitionDuration = 500; + } + + this.bulletGraph.minimumValue = 0; + this.bulletGraph.maximumValue = 80; + this.bulletGraph.value = 70; + this.bulletGraph.interval = 20; + + // setting appearance of labels + this.bulletGraph.labelInterval = 20; + this.bulletGraph.labelExtent = 0.02; + + // setting custom appearance of performance bar + this.bulletGraph.valueInnerExtent = 0.5; + this.bulletGraph.valueOuterExtent = 0.7; + this.bulletGraph.valueBrush = "#000000"; + + // setting custom appearance of target bar + this.bulletGraph.targetValueBrush = "#000000"; + this.bulletGraph.targetValueBreadth = 10; + this.bulletGraph.targetValue = 60; + + // setting appearance of major/minor ticks + this.bulletGraph.minorTickCount = 5; + this.bulletGraph.minorTickEndExtent = 0.10; + this.bulletGraph.minorTickStartExtent = 0.20; + this.bulletGraph.tickStartExtent = 0.20; + this.bulletGraph.tickEndExtent = 0.05; + this.bulletGraph.tickStrokeThickness = 2; + + // setting custom gauge ranges + const range1 = new IgxLinearGraphRangeComponent(); + range1.startValue = 0; + range1.endValue = 40; + const range2 = new IgxLinearGraphRangeComponent(); + range2.startValue = 40; + range2.endValue = 80; + + this.bulletGraph.rangeBrushes = [ "#a4bd29", "#F86232" ]; + this.bulletGraph.rangeOutlines = [ "#a4bd29", "#F86232" ]; + this.bulletGraph.ranges.clear(); + this.bulletGraph.ranges.add(range1); + this.bulletGraph.ranges.add(range2); + + // setting extent of all gauge ranges + for (let i = 0; i < this.bulletGraph.ranges.count; i++) { + const range = this.bulletGraph.ranges.item(i); + range.innerStartExtent = 0.2; + range.innerEndExtent = 0.2; + range.outerStartExtent = 0.95; + range.outerEndExtent = 0.95; + } + + // setting extent of gauge scale + this.bulletGraph.scaleBackgroundThickness = 0.5; + this.bulletGraph.scaleBackgroundBrush = "#dbdbdb"; + this.bulletGraph.scaleBackgroundOutline = "gray"; + this.bulletGraph.scaleStartExtent = 0.05; + this.bulletGraph.scaleEndExtent = 0.95; + this.bulletGraph.scaleBackgroundThickness = 0; + + // setting appearance of backing fill and outline + this.bulletGraph.backingBrush = "#f7f7f7"; + this.bulletGraph.backingOutline = "#d1d1d1"; + this.bulletGraph.backingStrokeThickness = 0; + + this.shouldAnimate = true; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <button (click)="AnimateToGauge1()" + class="options-button">Animation #1</button> + <button (click)="AnimateToGauge2()" + class="options-button">Animation #2</button> + <button (click)="AnimateToGauge3()" + class="options-button">Animation #3</button> + </div> + + <div class="container"> + + <!-- Note the bullet graph requires settings only for + minimumValue, maximumValue, and value, targetValue properties. + All other properties are optional and listed here + for demonstration purpose only --> + <igx-bullet-graph + #bulletGraph + height="80px" + width="400px" + minimumValue=0 + maximumValue=120 + valueBrush="#4286f4" + value=70 + targetValueBrush="#4286f4" + targetValue=90 + targetValueBreadth=10 + interval=10 + labelInterval=10 + labelExtent=0.02 + rangeBrushes ="#FF9800, #F96232, #C62828" + rangeOutlines="#FF9800, #F96232, #C62828" + scaleBackgroundThickness=0 + scaleBackgroundBrush="#dbdbdb" + scaleBackgroundOutline="gray"> + + </igx-bullet-graph> + + </div> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`transitionDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#transitionDuration) property. +The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. + +<!-- Angular, React, WebComponents --> + +## Dependencies + +When installing the gauge package, the core package must also be installed. + +```cmd +npm install --save igniteui-angular-core +npm install --save igniteui-angular-gauges +``` + +<!-- end: Angular, React, WebComponents --> + +## Component Modules + +The [`IgxBulletGraphComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) requires the following modules: + +```ts +// app.module.ts +import { IgxBulletGraphModule } from 'igniteui-angular-gauges'; + +@NgModule({ + imports: [ + // ... + IgxBulletGraphModule + // ... + ] +}) +export class AppModule {} +``` + +<div class="divider--half"></div> + +## Usage + +The following code walks through creating a bullet graph component, and configuring a performance bar, comparative measure marker, and three comparative ranges on the scale. + +```html + <igx-bullet-graph height="100" + width="300" + minimumValue="5" + maximumValue="55" + value="35" + targetValue="43"> + <igx-linear-graph-range startValue="0" + endValue="15" + brush="#828181"> + </igx-linear-graph-range> + <igx-linear-graph-range startValue="15" + endValue="30" + brush="#AAAAAA"> + </igx-linear-graph-range> + <igx-linear-graph-range startValue="30" + endValue="55" + brush="#D0D0D0"> + </igx-linear-graph-range> + </igx-bullet-graph> +``` + +<div class="divider--half"></div> + +## Comparative Measures + +The bullet graph can show two measures: performance value and target value. + +Performance value is the primary measure displayed by the component and it is visualized as a bar that stretches along the length of the whole graph. The target value is a measure which the performance value compares against. It is displayed as a small block that runs perpendicular to the orientation of the performance bar. + +```html +<igx-bullet-graph + value=50 + valueBrush="DodgerBlue" + valueStrokeThickness=1 + valueInnerExtent=0.5 + valueOuterExtent=0.65 + targetValue=80 + targetValueBreadth=10 + targetValueBrush="LimeGreen" + targetValueOutline="LimeGreen" + targetValueStrokeThickness=1 + targetValueInnerExtent=0.3 + targetValueOuterExtent=0.85 + height="80px" width="400px" + minimumValue=0 value=50 + maximumValue=100> +</igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; + +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" width="400px" + minimumValue=0 + maximumValue=100 + + value=50 + valueBrush="DodgerBlue" + valueStrokeThickness=1 + valueInnerExtent=0.5 + valueOuterExtent=0.65 + + targetValue=80 + targetValueBreadth=10 + targetValueBrush="LimeGreen" + targetValueOutline="LimeGreen" + targetValueStrokeThickness=1 + targetValueInnerExtent=0.3 + targetValueOuterExtent=0.85 + + scaleBackgroundBrush = "#e5e5e5" + scaleBackgroundOutline = "#e5e5e5" + backingBrush = "#f7f7f7" + backingOutline = "#bfbfbf" + tickStrokeThickness = 1.5> + + </igx-bullet-graph> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Highlight Value + +The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the [`value`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#value) appear with a lower opacity. A good example is if [`value`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#value) is 50 and [`highlightValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValue) is set to 25. This would represent a performance of 50% regardless of what the value of [`targetValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#targetValue) is set to. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValue) to something lower than [`value`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#value). + +```html +<igx-bullet-graph + #bulletGraph + height="80px" + width="400px" + value=70 + targetValue=90 + minimumValue=0 + maximumValue=100 + interval=10 + labelInterval=10 + labelExtent=0.025 + labelsPreTerminal=0 + labelsPostInitial=0 + highlightValueDisplayMode="Overlay" + highlightValue=25> + </igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements OnInit { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; + public ngOnInit(): void { + } +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" + width="400px" + value=70 + targetValue=90 + minimumValue=0 + maximumValue=100 + interval=10 + labelInterval=10 + labelExtent=0.025 + labelsPreTerminal=0 + labelsPostInitial=0 + highlightValueDisplayMode="Overlay" + highlightValue=25 + > + + </igx-bullet-graph> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Comparative Ranges + +The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. + +```html +<igx-bullet-graph + height="80px" width="400px" + minimumValue=0 value=80 interval=10 + maximumValue=100 targetValue=90 + rangeBrushes ="#C62828, #F96232, #FF9800" + rangeOutlines="#C62828, #F96232, #FF9800"> + <igx-linear-graph-range + startValue=0 endValue=40 + innerStartExtent=0.075 innerEndExtent=0.075 + outerStartExtent=0.95 outerEndExtent=0.95> + </igx-linear-graph-range> + <igx-linear-graph-range + startValue=40 endValue=70 + innerStartExtent=0.075 innerEndExtent=0.075 + outerStartExtent=0.95 outerEndExtent=0.95> + </igx-linear-graph-range> + <igx-linear-graph-range + startValue=70 endValue=100 + innerStartExtent=0.075 innerEndExtent=0.075 + outerStartExtent=0.95 outerEndExtent=0.95> + </igx-linear-graph-range> +</igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" width="400px" + minimumValue=0 value=80 interval=10 + maximumValue=100 targetValue=90 + + rangeBrushes ="#C62828, #F96232, #FF9800" + rangeOutlines="#C62828, #F96232, #FF9800" > + + <igx-linear-graph-range + startValue=0 endValue=40 + innerStartExtent=0.075 innerEndExtent=0.075 + outerStartExtent=0.95 outerEndExtent=0.95> + </igx-linear-graph-range> + <igx-linear-graph-range + startValue=40 endValue=70 + innerStartExtent=0.075 innerEndExtent=0.075 + outerStartExtent=0.95 outerEndExtent=0.95> + </igx-linear-graph-range> + <igx-linear-graph-range + startValue=70 endValue=100 + innerStartExtent=0.075 innerEndExtent=0.075 + outerStartExtent=0.95 outerEndExtent=0.95> + </igx-linear-graph-range> + + </igx-bullet-graph> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Tick Marks + +The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. + +- Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. +- Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. + +```html +<igx-bullet-graph + height="80px" width="400px" + minimumValue=0 value=70 + maximumValue=100 targetValue=90 + interval=10 + tickBrush="DodgerBlue" + ticksPreTerminal=0 + ticksPostInitial=0 + tickStrokeThickness=2 + tickStartExtent=0.2 + tickEndExtent=0.075 + minorTickCount=4 + minorTickBrush="DarkViolet" + minorTickEndExtent=0.1 + minorTickStartExtent=0.2 + minorTickStrokeThickness=1> +</igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; + +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + + tickBrush="DodgerBlue" + ticksPreTerminal=0 + ticksPostInitial=0 + tickStrokeThickness=2 + tickStartExtent=0.2 + tickEndExtent=0.075 + + minorTickCount=4 + minorTickBrush="DarkViolet" + minorTickEndExtent=0.1 + minorTickStartExtent=0.2 + minorTickStrokeThickness=1> + + </igx-bullet-graph> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Labels + +The labels indicate the measures on the scale. + +```html +<igx-bullet-graph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + labelInterval=10 + labelExtent=0.025 + labelsPreTerminal=0 + labelsPostInitial=0 + fontBrush="DodgerBlue" + font="11px Verdana"> +</igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; + +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + + labelInterval=10 + labelExtent=0.025 + labelsPreTerminal=0 + labelsPostInitial=0 + fontBrush="DodgerBlue" + font="11px Verdana" + > + + </igx-bullet-graph> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Backing + +The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. + +```html +<igx-bullet-graph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + backingBrush="#bddcfc" + backingOutline="DodgerBlue" + backingStrokeThickness=4 + backingInnerExtent=0 + backingOuterExtent=1> +</igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; + +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + + backingBrush="#bddcfc" + backingOutline="DodgerBlue" + backingStrokeThickness=4 + backingInnerExtent=0 + backingOuterExtent=1 + > + + </igx-bullet-graph> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Scale + +The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`isScaleInverted`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. + +```html +<igx-bullet-graph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + isScaleInverted=false + scaleBackgroundBrush="DodgerBlue" + scaleBackgroundOutline="DarkViolet" + scaleBackgroundThickness=2 + scaleStartExtent=0.05 + scaleEndExtent=0.95> +</igx-bullet-graph> +``` + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxBulletGraphModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxBulletGraphModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxBulletGraphComponent } from "igniteui-angular-gauges"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("bulletGraph", { static: true }) + public bulletGraph: IgxBulletGraphComponent; +} +``` +```html +<div class="container vertical"> + + <igx-bullet-graph + #bulletGraph + height="80px" width="400px" + minimumValue=0 value=70 interval=10 + maximumValue=100 targetValue=90 + + isScaleInverted=false + scaleBackgroundBrush="DodgerBlue" + scaleBackgroundOutline="Red" + scaleBackgroundThickness=2 + scaleStartExtent=0.05 + scaleEndExtent=0.95> + + </igx-bullet-graph> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Summary + +For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. + +```html +<igx-bullet-graph + height="80px" width="400px" + minimumValue=0 + maximumValue=100 + isScaleInverted=false + scaleBackgroundBrush="Gray" + scaleBackgroundOutline="Gray" + scaleBackgroundThickness=2 + scaleStartExtent=0.05 + scaleEndExtent=0.95 + + value=50 + valueBrush="Black" + valueStrokeThickness=1 + valueInnerExtent=0.5 + valueOuterExtent=0.65 + targetValue=80 + targetValueBreadth=7.5 + targetValueBrush="Black" + targetValueOutline="Black" + targetValueStrokeThickness=1 + targetValueInnerExtent=0.3 + targetValueOuterExtent=0.85 + + labelInterval=10 + labelExtent=0.025 + labelsPreTerminal=0 + labelsPostInitial=0 + fontBrush="Black" + font="11px Verdana" + + backingBrush="#cecece" + backingOutline="#cecece" + backingStrokeThickness=4 + backingInnerExtent=0 + backingOuterExtent=1 + + interval=10 + tickBrush="Black" + ticksPreTerminal=0 + ticksPostInitial=0 + tickStrokeThickness=2 + tickStartExtent=0.2 + tickEndExtent=0.075 + + minorTickCount=4 + minorTickBrush="Black" + minorTickEndExtent=0.1 + minorTickStartExtent=0.2 + minorTickStrokeThickness=1 + + rangeBrushes ="#C62828, #F96232, #FF9800" + rangeOutlines="#C62828, #F96232, #FF9800"> + <igx-linear-graph-range + startValue=20 endValue=40 + innerStartExtent=0.25 innerEndExtent=0.25 + outerStartExtent=0.9 outerEndExtent=0.9> + </igx-linear-graph-range> + <igx-linear-graph-range + startValue=40 endValue=60 + innerStartExtent=0.25 innerEndExtent=0.25 + outerStartExtent=0.9 outerEndExtent=0.9> + </igx-linear-graph-range> + <igx-linear-graph-range + startValue=60 endValue=90 + innerStartExtent=0.25 innerEndExtent=0.25 + outerStartExtent=0.9 outerEndExtent=0.9> + </igx-linear-graph-range> +</igx-bullet-graph> +``` + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxBulletGraphComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) +- [`IgxLinearGraphRangeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargraphrangecomponent.html) + +## Additional Resources + +You can find more information about other types of gauges in these topics: + +- [Linear Gauge](linear-gauge.md) +- [Radial Gauge](radial-gauge.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md new file mode 100644 index 000000000..6b57dceec --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md @@ -0,0 +1,766 @@ +--- +title: Angular Button Group Component – Ignite UI for Angular | Infragistics | MIT license +_description: Provides button group functionality to developers and also allows horizontal/vertical alignment, single/multiple selection with toggling. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Button Group components, Angular Button Group controls, Angular Buttons components, Angular Buttons controls +_license: MIT +_tocName: Button Group +--- + +# Angular Button Group Component Overview + +<p class="highlight">Angular Button Group component is used to organize buttons into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.</p> + +## Angular Button Group Example + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-button-group-sample-1', + styleUrls: ['./button-group-sample-1.component.scss'], + templateUrl: './button-group-sample-1.component.html', + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] +}) + +export class ButtonGroupSample1Component { + public rippleColor = 'grey'; +} +``` +```html +<article class="sample-column"> + <igx-buttongroup> + <button igxButton [igxRipple]="rippleColor"> + <igx-icon>format_align_left</igx-icon> + </button> + <button igxButton [igxRipple]="rippleColor"> + <igx-icon>format_align_center</igx-icon> + </button> + <button igxButton [igxRipple]="rippleColor"> + <igx-icon>format_align_right</igx-icon> + </button> + <button igxButton [igxRipple]="rippleColor" selected> + <igx-icon>format_align_justify</igx-icon> + </button> + </igx-buttongroup> +</article> +``` +```scss +igx-buttongroup{ + display: inline-block; + max-width: 400px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Button Group + +To get started with the Ignite UI for Angular Button Group component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; +// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxButtonGroupModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxButtonGroupComponent` as a standalone dependency, or use the [`IGX_BUTTON_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +... +import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +// import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-buttongroup> + <button igxButton> + <igx-icon>format_align_left</igx-icon> + </button> + <button igxButton> + <igx-icon>format_align_center</igx-icon> + </button> + <button igxButton> + <igx-icon>format_align_right</igx-icon> + </button> + <button igxButton selected> + <igx-icon>format_align_justify</igx-icon> + </button> + </igx-buttongroup> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent] + /* or imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Button Group module or directives imported, you can start with a basic configuration of the `igx-buttongroup` and its buttons. + +## Using for Angular Button Group Component + +### Add Button Group + +Use the [`igx-buttongroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html) selector to wrap your buttons and display them into a button group. If you want a button to be selected by default, use the `selected` property: + +```html +<!-- sample.component.html --> +<igx-buttongroup> + <button igxButton> + <igx-icon>format_align_left</igx-icon> + </button> + <button igxButton> + <igx-icon>format_align_center</igx-icon> + </button> + <button igxButton> + <igx-icon>format_align_right</igx-icon> + </button> + <button igxButton selected> + <igx-icon>format_align_justify</igx-icon> + </button> +</igx-buttongroup> +``` + +## Examples + +### Alignment + +Use the [`alignment`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html#alignment) input property to set the orientation of the buttons in the button group. + +```typescript +//sample.component.ts +import { ButtonGroupAlignment } from 'igniteui-angular/button-group'; +// import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package + +... +public alignment = ButtonGroupAlignment.vertical; +... +``` + +```html +<!-- sample.component.html --> +<igx-buttongroup [alignment]="alignment"> + <button igxButton>Sofia</button> + <button igxButton>London</button> + <button igxButton selected>New York</button> + <button igxButton>Tokyo</button> +</igx-buttongroup> +``` + +```typescript +import { Component } from '@angular/core'; +import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-button-group-sample-2', + styleUrls: ['./button-group-sample-2.component.scss'], + templateUrl: './button-group-sample-2.component.html', + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective] +}) +export class ButtonGroupSample2Component { + public alignment = ButtonGroupAlignment.vertical; + public rippleColor = 'grey'; +} +``` +```html +<article class="sample-column"> + <igx-buttongroup [alignment]="alignment"> + <button igxButton [igxRipple]="rippleColor">Sofia</button> + <button igxButton [igxRipple]="rippleColor">London</button> + <button igxButton selected [igxRipple]="rippleColor">New York</button> + <button igxButton [igxRipple]="rippleColor">Tokyo</button> + </igx-buttongroup> +</article> +``` +```scss +igx-buttongroup{ + display: inline-block; + width: 200px; +} +``` + +<div class="divider--half"></div> + +### Selection + +In order to configure the `igx-buttongroup` selection, you could use its [selectionMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html#selectionMode) property. This property accepts the following three modes: + +- **single** - default selection mode of the button group. A single button can be selected/deselected by the user. +- **singleRequired** - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction. +- **multi** - multiple buttons in the group can be selected and deselected. + +The sample below demonstrates the exposed `igx-buttongroup` selection modes: + +```typescript +import { Component } from '@angular/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-button-group-sample', + styleUrls: ['./button-group-sample.component.scss'], + templateUrl: './button-group-sample.component.html', + imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class ButtonGroupSampleComponent { + public rippleColor = 'grey'; + public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single'; +} +``` +```html +<article class="sample-column"> + <h6>Selection Mode</h6> + <div class="radio-buttons"> + <igx-radio [(ngModel)]="selectionMode" value="single">Single</igx-radio> + <igx-radio [(ngModel)]="selectionMode" value="singleRequired">Single-Required</igx-radio> + <igx-radio [(ngModel)]="selectionMode" value="multi">Multi</igx-radio> + </div> + <igx-buttongroup [selectionMode]="selectionMode"> + <button igxButton [igxRipple]="rippleColor"> + <igx-icon>format_bold</igx-icon> + </button> + <button igxButton [igxRipple]="rippleColor"> + <igx-icon>format_italic</igx-icon> + </button> + <button igxButton [igxRipple]="rippleColor"> + <igx-icon>format_underlined</igx-icon> + </button> + </igx-buttongroup> +</article> +``` +```scss +.sample-column, +.radio-buttons { + display: flex; + gap: 16px; +} + +.sample-column { + flex-direction: column; + align-items: flex-start; +} +``` + +### Size + +The `--ig-size` CSS custom property can be used to control the size of the button group. + +```scss +/* sample.component.scss */ +igx-buttongroup { + --ig-size: var(--ig-size-small); +} +``` + +```html +<!-- sample.component.html --> +<igx-buttongroup></igx-buttongroup> +``` + +```typescript +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; + +type Button = { + label: string, + selected: boolean, + togglable: boolean +} + +@Component({ + selector: 'app-button-group-sample-5', + styleUrls: ['./button-group-sample-5.component.scss'], + templateUrl: './button-group-sample-5.component.html', + imports: [IgxButtonGroupComponent] +}) +export class ButtonGroupSample5Component implements OnInit { + public rippleColor = 'grey'; + public size = 'large'; + public sizes: Button[]; + + public ngOnInit() { + this.sizes = [ + { label: 'small', selected: this.size === 'small', togglable: true }, + { label: 'medium', selected: this.size === 'medium', togglable: true }, + { label: 'large', selected: this.size === 'large', togglable: true } + ]; + } + + public selectSize(event: any) { + this.size = this.sizes[event.index].label; + } + + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } +} +``` +```html +<article class="sample-column"> + <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup> +</article> +``` +```scss +igx-buttongroup{ + display: inline-block; +} +``` + +### Custom toggle buttons + +Use the [`values`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html#values) input property to set an array of customized buttons in the button group. + +```typescript +// sample.component.ts + +interface IButton { + ripple?: string; + label?: string; + disabled?: boolean; + togglable?: boolean; + selected?: boolean; + color?: string; + icon?: string; +} + +class ToggleButton { + private ripple: string; + private label: string; + private disabled: boolean; + private togglable: boolean; + private selected: boolean; + private color: string; + private icon: string; + + constructor(obj?: IButton) { + this.ripple = obj.ripple || 'gray'; + this.label = obj.label; + this.selected = obj.selected || false; + this.togglable = obj.togglable || true; + this.disabled = obj.disabled || false; + this.color = obj.color; + this.icon = obj.icon; + } +} +... +public bordersButtons: ToggleButton[]; + +public ngOnInit() { + this.bordersButtons = [ + new ToggleButton({ + icon: 'border_top', + selected: true + }), + new ToggleButton({ + icon: 'border_right', + selected: false + }), + new ToggleButton({ + icon: 'border_bottom', + selected: false + }), + new ToggleButton({ + icon: 'border_left', + selected: false + }) + ]; +} +... +``` + +```html +<!-- sample.component.html --> +<igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup> +``` + +```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; + +interface IButton { + ripple?: string; + label?: string; + disabled?: boolean; + togglable?: boolean; + selected?: boolean; + color?: string; + icon?: string; +} + +class ToggleButton { + private ripple: string; + private label: string; + private disabled: boolean; + private togglable: boolean; + private selected: boolean; + private color: string; + private icon: string; + + constructor(obj?: IButton) { + this.ripple = obj.ripple || 'gray'; + this.label = obj.label; + this.selected = obj.selected || false; + this.togglable = obj.togglable || true; + this.disabled = obj.disabled || false; + this.color = obj.color; + this.icon = obj.icon; + } +} + +@Component({ + selector: 'app-button-group-sample-3', + styleUrls: ['./button-group-sample-3.component.scss'], + templateUrl: './button-group-sample-3.component.html', + imports: [IgxButtonGroupComponent] +}) +export class ButtonGroupSample3Component implements OnInit { + public bordersButtons: ToggleButton[]; + + public ngOnInit() { + this.bordersButtons = [ + new ToggleButton({ + icon: 'border_top', + selected: true + }), + new ToggleButton({ + icon: 'border_right', + selected: false + }), + new ToggleButton({ + icon: 'border_bottom', + selected: false + }), + new ToggleButton({ + icon: 'border_left', + selected: false + }) + ]; + } +} +``` +```html +<article class="sample-column"> + <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup> +</article> +``` +```scss +igx-buttongroup { + display: inline-block; + width: 300px; +} +``` + +## Styling + +### Button Group Theme Property Map + +When you set a value for the `$item-background` property, all related dependent properties listed in the table below are automatically updated to maintain visual consistency. The table shows which properties are affected when you customize the primary property. + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + + <!-- group for item-background --> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$item-background</strong></summary></details> + </td> + <td>$item-hover-background</td> + <td>The hover background color for items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-background</td> + <td>The selected item background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-focused-background</td> + <td>The focused item background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-background-color</td> + <td>The disabled item background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-border-color</td> + <td>The border color for items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-text-color</td> + <td>The text color for items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$idle-shadow-color</td> + <td>The idle shadow color for items.</td> + </tr> + </tbody> + + <!-- group for item-hover-background --> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$item-hover-background</strong></summary></details> + </td> + <td>$item-selected-hover-background</td> + <td>The selected item hover background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-focused-hover-background</td> + <td>The focused hover background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-hover-text-color</td> + <td>The text color for hovered items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-hover-icon-color</td> + <td>The icon color for hovered items.</td> + </tr> + </tbody> + + <!-- group for item-selected-background --> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$item-selected-background</strong></summary></details> + </td> + <td>$item-selected-focus-background</td> + <td>The selected item focus background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-selected-background</td> + <td>The disabled selected background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-text-color</td> + <td>The text color for selected items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-icon-color</td> + <td>The icon color for selected items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-hover-text-color</td> + <td>The text color for selected hover items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-hover-icon-color</td> + <td>The icon color for selected hover items.</td> + </tr> + </tbody> + + <!-- group for item-border-color --> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$item-border-color</strong></summary></details> + </td> + <td>$item-hover-border-color</td> + <td>The border color for hovered items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-focused-border-color</td> + <td>The border color for focused items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-border-color</td> + <td>The border color for selected items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-selected-hover-border-color</td> + <td>The border color for selected hover items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$item-disabled-border</td> + <td>The border color for disabled items.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-selected-border-color</td> + <td>The border color for disabled selected items.</td> + </tr> + </tbody> +</table> + +To get started with styling the button group, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`button-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-group-theme) and specifying just the `$item-background`. Based on this value, the theme will automatically compute appropriate state colors, contrast foregrounds, and borders for the button group. Of course, you're still free to override any of the theme parameters with custom values if needed. + +```scss +$custom-button-group: button-group-theme( + $item-background: #57a5cd, +); +``` + +As seen, the `button-group-theme` exposes some useful parameters for basic styling of its items. If you want to drill deeper and change some button specific parameters, you can create a new theme that extends the `button-theme` and scope it under the respective button group class. + +The last step is to include the component's theme. + +```scss +:host { + @include tokens($custom-button-group); +} +``` + +### Demo + +```typescript +import { Component } from '@angular/core'; +import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-button-group-style', + styleUrls: ['./button-group-style.component.scss'], + templateUrl: './button-group-style.component.html', + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective] +}) +export class ButtonGroupStyleComponent { + public alignment = ButtonGroupAlignment.vertical; +} +``` +```html +<article class="sample-column"> + <igx-buttongroup [alignment]="alignment"> + <button igxButton igxRipple="white">Sofia</button> + <button igxButton igxRipple="white">London</button> + <button igxButton igxRipple="white">New York</button> + <button igxButton igxRipple="white" disabled>Tokyo</button> + </igx-buttongroup> +</article> +``` +```scss +@use "layout.scss" as *; +@use "igniteui-angular/theming" as *; + +$custom-button-group: button-group-theme( + $item-background: #57a5cd, +); + +:host { + @include tokens($custom-button-group); +} +``` + +### Styling with Tailwind + +You can style the `button-group` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-button-group`, `dark-button-group`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [button-group-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-group-theme). The syntax is as follows: + +```html +<igx-button-group +class="!light-button-group ![--item-background:#7B9E89]" +> +... +</igx-button-group> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your button group should look like this: + +<div class="sample-container loading" style="height:100px"> + <iframe id="button-group-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/data-entries/button-group-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## API References + +<div class="divider--half"></div> + +- [IgxButtonGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html) +- [IgxButtonGroup Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-group-theme) +- [IgxButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) +- [IgxButton Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md new file mode 100644 index 000000000..93d6665cb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md @@ -0,0 +1,1985 @@ +--- +title: Angular Button Component – Ignite UI for Angular - MIT license +_description: Enhance standard buttons with built-in text, images and more features using Ignite UI for Angular Button component. Try it now. +_keywords: Angular Button component, Angular Button control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Angular UI Components, +_license: MIT +_tocName: Button +--- + +# Angular Button Overview + +Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native `<button>` and `<a>` elements to deliver an accessible experience. + +The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Contained Button, Outlined Button, and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more. + +## Angular Button Example + +We have created the Angular Button example below to show you how different button types can appear and look like when they are styled with a border or when a transparent background is applied. + +<div class="divider--half"></div> + +```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-buttons-sample-1', + styleUrls: ['./buttons-sample-1.component.scss'], + templateUrl: './buttons-sample-1.component.html', + imports: [IgxButtonDirective, IgxRippleDirective] +}) +export class ButtonsSample1Component { } +``` +```html +<div class="wrapper"> + <div class="button-sample"> + <button igxButton="flat" igxRipple>Flat</button> + </div> + <div class="button-sample"> + <button igxButton="contained" igxRipple>Contained</button> + </div> + <div class="button-sample"> + <button igxButton="outlined" igxRipple>Outlined</button> + </div> +</div> +``` +```scss +.wrapper { + display: flex; + flex-flow: row wrap; +} + +.button-sample { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + flex: 1 0 30%; + margin: 16px 0; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Button + +To get started with the Ignite UI for Angular Button directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxButtonModule` in your **app.module.ts** file. + +```typescript +// app.module.ts +import { IgxButtonModule } from 'igniteui-angular/button'; +// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package +@NgModule({ + imports: [ + ... + IgxButtonModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxButtonDirective` as a standalone dependency. + +```typescript +// home.component.ts + +... +import { IgxButtonDirective } from 'igniteui-angular/button'; +// import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<button igxButton="flat">Flat</button>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxButtonDirective] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the `igxButton` directive on elements. + +## Angular Button Types + +### Flat Button + +Use the [`igxButton`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to `flat`. + +```html +<button igxButton="flat">Flat</button> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-2"></iframe> +</div> + +### Contained Button + +All you have to do to create a contained button is to change the value of the `igxButton` property: + +```html +<button igxButton="contained">Contained</button> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-5"> +</iframe></div> + +### Outlined Button + +Analogically, we can switch to outlined type: + +```html +<button igxButton="outlined">Outlined</button> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-8"> +</iframe></div> + +### Icon Button + +As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [_Icon Button here_](icon-button.md). + +```html +<button igxIconButton="flat"> + <igx-icon fontSet="material">favorite</igx-icon> +</button> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-7"> +</iframe></div> + +### Floating Action Button + +We can create a floating action button and use an icon to display: + +```html +<button igxButton="fab"> + <igx-icon fontSet="material">edit</igx-icon> +</button> +``` + +To create an extended FAB, you can add any element prior to the `igx-icon`: + +```html +<button class="btn" igxButton="fab"> + <span>like</span> + <igx-icon fontSet="material">favorite</igx-icon> +</button> +``` + +> [!NOTE] +> To get the extended FAB text styled properly, use `<span>` or `<div>` tags. + +<div class="sample-container loading" style="height: 100px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-6"> +</iframe></div> + +## Examples + +### Angular Disable Button + +The `disabled` property can be used to make a button unclickable: + +```html +<button igxButton="contained" [disabled]="'true'">Disabled</button> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-disabled-sample"> +</iframe></div> + +### Ripple + +The [`igxRipple`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrippledirective.html) directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties: + +```html +<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000"> + Ripple +</button> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-3"> +</iframe></div> + +### Span + +We can also use the `igxButton` directive to turn elements like `span` and `div` into Ignite UI for Angular styled buttons. The default colors can be customized via the `igxButtonColor` and the `igxButtonBackground` properties: + +```html +<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white"> + Span +</span> +``` + +<div class="sample-container loading" style="height: 70px"> + <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-4"> +</iframe></div> + +## Size + +We can allow the user to choose the size of the `igxButton` by using the `--ig-size` custom CSS property. To do this, first we have to import the `IgxButtonGroupModule`, and then use the [`igxButtonGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html) component to display size values. This way whenever one gets selected, we will update the **--ig-size** CSS property. + +```typescript +// app.module.ts +... +import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; +// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package +@NgModule({ + imports: [ + ... + IgxButtonGroupModule + ... + ] +}) +``` + +```html +<!--buttons-density.component.html--> +<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup> +... +<button igxButton="flat">Flat</button> +``` + +```typescript +// buttons-density.component.ts +public size = "large"; +public sizes; +public ngOnInit() { + this.sizes = [ + { label: 'large', selected: this.size === 'large', togglable: true }, + { label: 'medium', selected: this.size === 'medium', togglable: true }, + { label: 'small', selected: this.size === 'small', togglable: true } + ]; +} + +public selectSize(event: any) { + this.size = this.sizes[event.index].label; +} + + +@HostBinding('style.--ig-size') +protected get sizeStyle() { + return `var(--ig-size-${this.size})`; +} +``` + +If all went well, you should see something like the following in the browser: + +```typescript +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-buttons-display-density', + styleUrls: ['./buttons-display-density.component.scss'], + templateUrl: './buttons-display-density.component.html', + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class ButtonsDisplayDensityComponent implements OnInit { + public size = 'large'; + public sizes; + + public ngOnInit(): void { + this.sizes = [ + { label: 'large', selected: this.size === 'large', togglable: true }, + { label: 'medium', selected: this.size === 'medium', togglable: true }, + { label: 'small', selected: this.size === 'small', togglable: true } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event) { + this.size = this.sizes[event.index].label; + } +} +``` +```html +<article class="sample-column"> + <div class="density-chooser"> + <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup> + </div> + <div class="button-sample"> + <div class="button-sample"> + <button igxButton="flat" igxRipple>Flat</button> + </div> + <div class="button-sample"> + <button igxButton="contained" igxRipple>Contained</button> + </div> + <div class="button-sample"> + <button igxButton="outlined" igxRipple>Outlined</button> + </div> + <div class="button-sample"> + <button igxButton="fab" igxRipple> + <igx-icon family="material">edit</igx-icon> + </button> + </div> + <div class="button-sample"> + <button igxButton="fab" igxRipple> + <span>Like</span> + <igx-icon family="material">favorite</igx-icon> + </button> + </div> + </div> +</article> +``` +```scss +.buttons-sample { + display: flex; + flex-flow: row wrap; +} + +.button-sample { + display: flex; + flex: 1 0 20%; + align-items: center; + justify-content: space-evenly; +} + +.density-chooser { + margin-bottom: 24px; +} +``` + +<div class="divider--half"></div> + +## Styling + +### Button Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +<div class="theme-switcher-wrapper"> +<input type="radio" name="theme" id="material" checked> +<label for="material" class="switch-label">Material</label> +<input type="radio" name="theme" id="fluent"> +<label for="fluent" class="switch-label">Fluent</label> +<input type="radio" name="theme" id="bootstrap"> +<label for="bootstrap" class="switch-label">Bootstrap</label> +<input type="radio" name="theme" id="indigo"> +<label for="indigo" class="switch-label">Indigo</label> +<div class="tables"> + <div class="theme-table material"> + <h3>Material Theme</h3> + <h4>Flat Button</h4> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$foreground</strong></summary></details></td> + <td>$hover-background</td> + <td>Background color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Background color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Background color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Background color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Foreground color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + </tbody> + </table> + <h4>Contained Button</h4> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$foreground</td> + <td>Foreground based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color</td> + <td>Icon color based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>Hover background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Focus background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground on focus</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Focus + hover background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Active background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Active foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + </tbody> + </table> + <h4>Outlined Button</h4> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$foreground</strong></summary></details></td> + <td>$hover-background</td> + <td>Background color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Background color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Background color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Background color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Foreground color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$border-color</td> + <td>The border color for outlined buttons.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-border-color</td> + <td>The border color for hovered outlined buttons.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-border-color</td> + <td>The border color for focused outlined buttons.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>The border color for outlined buttons when focus is visible.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-border-color</td> + <td>The border color for active outlined buttons.</td> + </tr> + </tbody> + </table> + <h4>FAB Button</h4> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$foreground</td> + <td>Foreground based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color</td> + <td>Icon color based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>Hover background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Focus background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground on focus</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Active background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Active foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Focus + hover background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + </tbody> + </table> + </div> + +<div class="theme-table fluent"> +<h3>Fluent Theme</h3> +<h4>Flat Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$foreground</strong></summary></details></td> + <td>$hover-background</td> + <td>Background color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Background color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Background color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Background color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Foreground color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>Border color when focus is visible</td> + </tr> + </tbody> +</table> +<h4>Contained Button</h4> +<table class="collapsible-table"> +<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead> +<tbody class="group"> +<tr class="primary"><td><details><summary><strong>$background</strong></summary></details></td><td>$foreground</td><td>Foreground based on background</td></tr> +<tr class="dependent"><td></td><td>$icon-color</td><td>Icon color based on background</td></tr> +<tr class="dependent"><td></td><td>$hover-background</td><td>Hover background color</td></tr> +<tr class="dependent"><td></td><td>$focus-background</td><td>Focus background color</td></tr> +<tr class="dependent"><td></td><td>$active-background</td><td>Active background color</td></tr> +<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground on hover</td></tr> +<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color on hover</td></tr> +<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground on focus</td></tr> +<tr class="dependent"><td></td><td>$active-foreground</td><td>Active foreground color</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Focus + hover background</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground on focus + hover</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-background</td><td>Background when focus is visible</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color when focus is visible</td></tr> +</tbody> +</table> +<h4>Outlined Button</h4> +<table class="collapsible-table"> +<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead> +<tbody class="group"> +<tr class="primary"><td><details><summary><strong>$foreground</strong></summary></details></td><td>$hover-background</td><td>Background color for hovered outlined button.</td></tr> +<tr class="dependent"><td></td><td>$focus-background</td><td>Background color for focused outlined button.</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Background color for outlined button on focus + hover.</td></tr> +<tr class="dependent"><td></td><td>$active-background</td><td>Background color for active outlined button.</td></tr> +<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground color for hovered outlined button.</td></tr> +<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color for hovered outlined button.</td></tr> +<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground color for focused outlined button.</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground color for outlined button on focus + hover.</td></tr> +<tr class="dependent"><td></td><td>$active-foreground</td><td>Foreground color for active outlined button.</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground color for outlined button when focus is visible.</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color for outlined button when focus is visible.</td></tr> +<tr class="dependent"><td></td><td>$border-color</td><td>Border color for outlined button.</td></tr> +<tr class="dependent"><td></td><td>$hover-border-color</td><td>Border color for hovered outlined button.</td></tr> +<tr class="dependent"><td></td><td>$focus-border-color</td><td>Border color for focused outlined button.</td></tr> +<tr class="dependent"><td></td><td>$active-border-color</td><td>Border color for active outlined button.</td></tr> +</tbody> +</table> +<h4>FAB Button</h4> +<table class="collapsible-table"> +<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead> +<tbody class="group"> +<tr class="primary"><td><details><summary><strong>$background</strong></summary></details></td><td>$foreground</td><td>Foreground based on background</td></tr> +<tr class="dependent"><td></td><td>$icon-color</td><td>Icon color based on background</td></tr> +<tr class="dependent"><td></td><td>$hover-background</td><td>Hover background color</td></tr> +<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground on hover</td></tr> +<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color on hover</td></tr> +<tr class="dependent"><td></td><td>$active-background</td><td>Active background color</td></tr> +<tr class="dependent"><td></td><td>$active-foreground</td><td>Active foreground color</td></tr> +<tr class="dependent"><td></td><td>$focus-background</td><td>Focus background color</td></tr> +<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground on focus</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Focus + hover background</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground on focus + hover</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-background</td><td>Background when focus is visible</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color when focus is visible</td></tr> +</tbody> +</table> +</div> + +<div class="theme-table bootstrap"> +<h3>Bootstrap Theme</h3> +<h4>Flat Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$foreground</strong></summary></details></td> + <td>$hover-foreground</td> + <td>Foreground color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Foreground color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>Border color when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-foreground</td> + <td>Foreground color for disabled button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-icon-color</td> + <td>Icon color for disabled button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + </tbody> +</table> +<h4>Contained Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$foreground</td> + <td>Foreground based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color</td> + <td>Icon color based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>Hover background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Focus background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Active background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground on focus</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Focus + hover background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Active foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-background</td> + <td>Disabled background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-foreground</td> + <td>Disabled foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-icon-color</td> + <td>Disabled icon color</td> + </tr> + </tbody> +</table> +<h4>Outlined Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$foreground</strong></summary></details></td> + <td>$hover-background</td> + <td>Background color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Background color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Background color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Background color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Foreground color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>Border color when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-foreground</td> + <td>Foreground color for disabled button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-icon-color</td> + <td>Icon color for disabled button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-border-color</td> + <td>Border color for disabled button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-border-color</td> + <td>Hover border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-border-color</td> + <td>Focus border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>Focus-visible border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-border-color</td> + <td>Active border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + </tbody> +</table> +<h4>FAB Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$foreground</td> + <td>Foreground based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color</td> + <td>Icon color based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>Hover background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Focus background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Active background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-background</td> + <td>Disabled background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground on focus</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Focus + hover background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Active foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-foreground</td> + <td>Disabled foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-icon-color</td> + <td>Disabled icon color</td> + </tr> + </tbody> +</table> +</div> +Another way to style the button is by using **Sass**, along with our type-specific theme functions: [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme), [`outlined-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-outlined-button-theme), [`contained-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-button-theme), and [`fab-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-fab-button-theme). + +Each of them will target only the buttons of that specific type. + +<div class="theme-table indigo"> +<h3>Indigo Theme</h3> +<h4>Flat Button</h4> +<table class="collapsible-table"><thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead><tbody class="group"> +<tr class="primary"><td><details><summary><strong>$foreground</strong></summary></details></td><td>$hover-background</td><td>Background color for hovered button</td></tr> +<tr class="dependent"><td></td><td>$focus-background</td><td>Background color for focused button</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Background color for button on focus + hover</td></tr> +<tr class="dependent"><td></td><td>$active-background</td><td>Background color for active button</td></tr> +<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground color for hovered button</td></tr> +<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color for hovered button</td></tr> +<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground color for focused button</td></tr> +<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground color for button on focus + hover</td></tr> +<tr class="dependent"><td></td><td>$active-foreground</td><td>Foreground color for active button</td></tr> +<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr> +<tr class="dependent"><td></td><td>$disabled-foreground</td><td>Disabled foreground color</td></tr> +<tr class="dependent"><td></td><td>$disabled-icon-color</td><td>Disabled icon color</td></tr> +<tr class="dependent"><td></td><td>$shadow-color</td><td>Shadow color</td></tr> +</tbody> +</table> +<h4>Contained Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$foreground</td> + <td>Foreground based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color</td> + <td>Icon color based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>Hover background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Focus background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Active background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground on focus</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Focus + hover background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Active foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-background</td> + <td>Disabled background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-foreground</td> + <td>Disabled foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-icon-color</td> + <td>Disabled icon color</td> + </tr> + </tbody> +</table> +<h4>Outlined Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$foreground</strong></summary></details></td> + <td>$hover-background</td> + <td>Background color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Background color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Background color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Background color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color for hovered button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground color for focused button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground color for button on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Foreground color for active button</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>Border color when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$border-color</td> + <td>Border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-border-color</td> + <td>Hover border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-border-color</td> + <td>Focus border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-border-color</td> + <td>Focus-visible border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-border-color</td> + <td>Active border color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + </tbody> +</table> +<h4>FAB Button</h4> +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$foreground</td> + <td>Foreground based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color</td> + <td>Icon color based on background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>Hover background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>Focus background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-background</td> + <td>Active background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-background</td> + <td>Disabled background color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-foreground</td> + <td>Foreground on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$icon-color-hover</td> + <td>Icon color on hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-foreground</td> + <td>Foreground on focus</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-background</td> + <td>Focus + hover background</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-hover-foreground</td> + <td>Foreground on focus + hover</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-background</td> + <td>Background when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-visible-foreground</td> + <td>Foreground when focus is visible</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$active-foreground</td> + <td>Active foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$shadow-color</td> + <td>Shadow color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-foreground</td> + <td>Disabled foreground color</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-icon-color</td> + <td>Disabled icon color</td> + </tr> + </tbody> +</table> +</div> +</div> +</div> + +> **Note:** The resulting dependent properties may vary slightly depending on the selected theme (Material, Fluent, Bootstrap, Indigo). + +To style the button you can use our type-specific theme functions: [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme), [`outlined-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-outlined-button-theme), [`contained-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-button-theme), and [`fab-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-fab-button-theme). + +Each of them will target only the buttons of that specific type. + +To get started with styling the button, first import the themes module, which includes all theme functions and component mixins: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Next, create a new theme that extends the type-specific theme function for the type of button you are styling. In this example, we will use the [`contained-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-button-theme) function and pass values to the `$foreground` and the `$background` parameters, along with their respective hover and active parameters. + +Given the following markup: + +```html +<div class="my-contained-btn"> + <button igxButton="contained">Contained button</button> +</div> +``` + +You can create the following theme: + +```scss +$custom-contained-theme: contained-button-theme( + $background: #f9f0ff, + $foreground: #722ed1, + $hover-background: #efdbff, + $hover-foreground: #9254de, + $active-foreground: #531dab, + $active-background: #dfc2fa, +); +``` + +Take a look at the [`contained-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-button-theme) section for a complete list of available parameters for styling the contained-type buttons. + +Finally, **include** the custom theme in your application: + +```scss +.my-contained-btn { + @include tokens($custom-contained-theme); +} +``` + +With the type-specific theme functions, styling buttons is much easier. + +For [`contained-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-button-theme) and [`fab-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-fab-button-theme) functions, you only need to provide a color value to the `$background` parameter. All other button state and text colors (if they are not provided) will then be automatically generated and applied based on that value. + +The text color is determined by the newly added [`adaptive-contrast`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/color#function-adaptive-contrast) function, which calculates whether black or white provides better contrast against the supplied background color. + +For [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme) and [`outlined-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-outlined-button-theme) functions, the button state colors are also automatically generated and applied, but they are derived from the supplied `$foreground` parameter instead of `$background`. + +In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; + +@Component({ + selector: 'app-buttons-style', + styleUrls: ['./buttons-style.component.scss'], + templateUrl: './buttons-style.component.html', + imports: [IgxButtonDirective], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}] +}) +export class ButtonsStyleComponent { + range = Array(6); +} +``` +```html +@for (item of range; let i = $index; track i) { + <div [class]="'buttons-sample-' + (i + 1)"> + <div class="button-sample"> + <button igxButton="contained">Solid</button> + </div> + <div class="button-sample"> + <button igxButton="outlined">Outlined</button> + </div> + <div class="button-sample dashed"> + <button igxButton="outlined">Dashed</button> + </div> + <div class="button-sample filled"> + <button igxButton="flat">Filled</button> + </div> + <div class="button-sample text"> + <button igxButton="flat">Text</button> + </div> + <div class="button-sample link"> + <button igxButton="flat">Link</button> + </div> + </div> +} +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; +@use "sass:map"; + +// CSS variables approach + +$list: ( + "sample-1": ( + "primary": #000, + "secondary": rgba(0, 0, 0, 0.75), + "active": rgba(0, 0, 0, 0.95), + "focus": #fff, + "hover": #4096ff, + "foreground": rgba(0, 0, 0, 0.88), + "border": #d9d9d9, + "active-foreground": #0958d9, + "flat-foreground": #69b1ff, + "flat-background": rgba(0, 0, 0, 0.04), + "flat-active": rgba(0, 0, 0, 0.15), + "flat-hover": rgba(0, 0, 0, 0.06), + ), + "sample-2": ( + "primary": #1677ff, + "secondary": #4096ff, + "active": #0958d9, + "focus": #fff, + "flat-background": #e6f4ff, + "flat-hover": #bae0ff, + "flat-active": #91caff, + ), + "sample-3": ( + "primary": #ff4d4f, + "secondary": #ff7875, + "active": #d9363e, + "focus": #fff, + "flat-background": #fff2f0, + "flat-hover": #ffdfdc, + "flat-active": #ffccc7, + ), + "sample-4": ( + "primary": #eb2f96, + "secondary": #f759ab, + "active": #c41d7f, + "focus": #fff, + "flat-background": #fff0f6, + "flat-hover": #ffd6e7, + "flat-active": #ffadd2, + ), + "sample-5": ( + "primary": #722ed1, + "secondary": #9254de, + "active": #531dab, + "focus": #fff, + "flat-background": #f9f0ff, + "flat-hover": #efdbff, + "flat-active": #d3adf7, + ), + "sample-6": ( + "primary": #13c2c2, + "secondary": #36cfc9, + "active": #08979c, + "focus": #fff, + "flat-background": #e6fffb, + "flat-hover": #b5f5ec, + "flat-active": #b5f5ec, + ), +); + +@each $variant, $style in $list { + .buttons-#{$variant} [igxbutton="contained"] { + --background: #{map-get($style, "primary")}; + --hover-background: #{map-get($style, "secondary")}; + --active-background: #{map-get($style, "active")}; + --focus-visible-background: #{map-get($style, "primary")}; + --focus-visible-foreground: #{map-get($style, "focus")}; + --focus-hover-background: #{map-get($style, "secondary")}; + --focus-hover-foreground: #{map-get($style, "focus")}; + --focus-background: #{map-get($style, "active")}; + } + + @if $variant == "sample-1" { + .buttons-#{$variant} [igxbutton="outlined"] { + --foreground: #{map-get($style, "foreground")}; + --border-color: #{map-get($style, "border")}; + --hover-foreground: #{map-get($style, "hover")}; + --hover-border-color: #{map-get($style, "hover")}; + --active-foreground: #{map-get($style, "active-foreground")}; + --active-border-color: #{map-get($style, "active-foreground")}; + --focus-hover-background: #{map-get($style, "focus")}; + --focus-hover-foreground: #{map-get($style, "hover")}; + --focus-background: #{map-get($style, "focus")}; + --focus-foreground: #{map-get($style, "active-foreground")}; + --focus-visible-border-color: #{map-get($style, "border")}; + } + + .buttons-#{$variant} [igxbutton="flat"] { + --foreground: #{map-get($style, "foreground")}; + --active-foreground: #{map-get($style, "foreground")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"] { + --background: #{map-get($style, "flat-background")}; + --hover-background: #{map-get($style, "flat-hover")}; + --focus-visible-background: #{map-get($style, "flat-background")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"], + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "foreground")}; + --focus-hover-background: #{map-get($style, "flat-hover")}; + --focus-background: #{map-get($style, "flat-active")}; + --focus-foreground: #{map-get($style, "foreground")}; + --focus-hover-foreground: #{map-get($style, "foreground")}; + --active-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-background: #{map-get($style, "flat-background")}; + } + + .buttons-#{$variant} .link [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "flat-foreground")}; + --active-foreground: #{map-get($style, "active-foreground")}; + } + } + + @else { + .buttons-#{$variant} [igxbutton="outlined"] { + --foreground: #{map-get($style, "primary")}; + --border-color: #{map-get($style, "primary")}; + --hover-foreground: #{map-get($style, "secondary")}; + --hover-border-color: #{map-get($style, "secondary")}; + --active-foreground: #{map-get($style, "active")}; + --active-border-color: #{map-get($style, "active")}; + --focus-hover-background: #{map-get($style, "focus")}; + --focus-hover-foreground: #{map-get($style, "secondary")}; + --focus-background: #{map-get($style, "focus")}; + --focus-foreground: #{map-get($style, "active")}; + --focus-visible-border-color: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"] { + --background: #{map-get($style, "flat-background")}; + --hover-background: #{map-get($style, "flat-hover")}; + --hover-foreground: #{map-get($style, "primary")}; + --active-foreground: #{map-get($style, "primary")}; + --focus-visible-background: #{map-get($style, "flat-background")}; + --focus-hover-foreground: #{map-get($style, "primary")}; + --focus-foreground: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} .filled [igxbutton="flat"], + .buttons-#{$variant} .text [igxbutton="flat"] { + --active-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"], + .buttons-#{$variant} .link [igxbutton="flat"] { + --hover-foreground: #{map-get($style, "secondary")}; + --active-foreground: #{map-get($style, "active")}; + --focus-hover-foreground: #{map-get($style, "secondary")}; + --focus-foreground: #{map-get($style, "active")}; + } + + .buttons-#{$variant} [igxbutton="flat"] { + --foreground: #{map-get($style, "primary")}; + --focus-hover-background: #{map-get($style, "flat-hover")}; + --focus-background: #{map-get($style, "flat-active")}; + } + + .buttons-#{$variant} .text [igxbutton="flat"] { + --hover-background: #{map-get($style, "flat-background")}; + } + } + + .buttons-#{$variant} [igxbutton="flat"], + .buttons-#{$variant} [igxbutton="outlined"] { + --focus-visible-foreground: #{map-get($style, "primary")}; + } + + .buttons-#{$variant} [igxbutton="outlined"], + .buttons-#{$variant} .text [igxbutton="flat"], + .buttons-#{$variant} .link [igxbutton="flat"] { + --focus-visible-background: transparent; + } +} + +.button-sample [igxbutton="contained"] { + --foreground: #fff; + --hover-foreground: #fff; + --active-foreground: #fff; +} + +.button-sample [igxbutton="outlined"] { + --background: transparent; + --hover-background: transparent; + --active-background: transparent; +} + +// Sass theme approach + +// $custom-contained-theme: contained-button-theme( +// $background: #f9f0ff, +// $foreground: #722ed1, +// $hover-background: #efdbff, +// $hover-foreground: #9254de, +// $active-foreground: #531dab, +// $active-background: #dfc2fa, +// $focus-visible-background: #d3adf7 +// ); + +// $custom-outlined-theme: outlined-button-theme( +// $background: #fff2f0, +// $foreground: #ff4d4f, +// $border-color: #ff4d4f, +// $hover-background: #ffdfdc, +// $hover-foreground: #ff7875, +// $hover-border-color: #ff7875, +// $focus-visible-background: #ffccc7, +// $focus-visible-foreground: #d9363e, +// $focus-border-color: #d9363e +// ); + +// $custom-flat-theme: flat-button-theme( +// $background: #e6fffb, +// $foreground: #13c2c2, +// $hover-background: #b5f5ec, +// $hover-foreground: #36cfc9, +// $active-foreground: #08979c, +// $focus-visible-background: #b5f5ec, +// $focus-visible-foreground: #08979c +// ); + +// .button-sample { +// @include tokens($custom-contained-theme); +// @include tokens($custom-outlined-theme); +// } + +// .button-sample.filled { +// @include tokens($custom-flat-theme); +// } +``` + +> [!NOTE] +> The sample uses the [Bootstrap Light](themes/sass/schemas.md#predefined-schemas) schema. + +### Styling with Tailwind + +You can style the `button` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix. Because the button has types, the classes are used like so, e.g., `light-contained-button`, `light-flat-button` `dark-outlined-button`, `dark-fab-button`, etc. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [button-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) which reflect differently in the different variants, the primary property for the `flat` and `outlined` buttons is `$foreground` and for the `contained` and `fab` buttons is `$background`. The syntax is as follows: + +```html +<div class="buttons-sample"> + <div class="button-sample"> + <button + igxButton="flat" + class="!light-flat-button ![--foreground:#7B9E89]"> + Flat Button + </button> + </div> + <div class="button-sample"> + <button + igxButton="contained" + class="!light-contained-button ![--background:#7B9E89]"> + Contained Button + </button> + </div> + <div class="button-sample"> + <button + igxButton="outlined" + class="!light-outlined-button ![--foreground:#7B9E89]"> + Outlined Button + </button> + </div> + <div class="button-sample"> + <button + igxButton="fab" + class="!light-fab-button ![--background:#7B9E89]"> + Fab Button + </button> + </div> +</div> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your buttons should look like this: + +<div class="sample-container loading" style="height:100px"> + <iframe id="buttons-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/data-entries/buttons-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +### Custom sizing + +You can change the button height either by using the `--size` variable, targeting the `button` directly: + +```scss +button { + --size: 50px; +} +``` + +Or you can use the universal `--ig-button-size` variable to target all instances: + +```html +<div class="my-app"> + <button igxButton="raised"></button> +</div> +``` + +```scss +.my-app { + --ig-button-size: 50px; +} +``` + +You can also use one of the predefined sizes, assigning it to the `--ig-size` variable. The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`: + +```scss +button { + --ig-size: var(--ig-size-large); +} +``` + +Learn more about it in the [Size](display-density.md) article. + +<div class="divider--half"></div> + +## API References + +<div class="divider--half"></div> + +- [IgxButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) +- [IgxButton Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxRippleDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrippledirective.html) +- [IgxIconButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconbuttondirective.html) +- [IgxButtonGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md new file mode 100644 index 000000000..ccc840209 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md @@ -0,0 +1,1792 @@ +--- +title: Angular Calendar Component – Ignite UI for Angular | MIT license +_description: With Angular Calendar Component, users can create intuitive calendars for applications to display date information using three different selection modes. Try it Now +_keywords: angular calendar, angular calendar component, angular UI components, angular UI library, ignite ui for angular +_license: MIT +_tocName: Calendar +--- + +# Angular Calendar Component Overview + +Angular Calendar is a UI component used for displaying dates and days in an app. Supporting different features, it enables users to easily manage calendar functionalities, drag and create events in a calendar, navigate to a preferred date in it, and show events in an Angular calendar month view, week view, or day view in a single click. + +<p class="highlight"> + +The Ignite UI for Angular Calendar component, developed as a native [Angular component](https://angular.io/guide/architecture#components), provides an easy and intuitive ways to display date information, enable dates or apply Angular calendar disable dates mode. Users can choose from three different selection modes - single selection, multi selection or range selection. +</p> + +## Angular Calendar Example + +We created the following Angular Calendar example using the Ignite UI for Angular Calendar package. It quickly shows how a basic calendar looks and feels like, how users can choose and highlight a single date, and how to move back and forth to a specific date. + +<div class="divider--half"></div> + +```typescript +import { Component } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-5.component.scss'], + templateUrl: './calendar-sample-5.component.html', + imports: [IgxCalendarComponent] +}) +export class CalendarSample5Component { } +``` +```html +<article class="calendar-wrapper"> + <igx-calendar></igx-calendar> +</article> +``` +```scss +@use '../../../../variables' as *; + +$border-color: color($color: gray, $variant: 300); + +.calendar-wrapper { + max-width: 500px; + min-width: 200px; + border: 1px solid $border-color; + border-radius: 6px; + margin: 8px; +} + +.igx-calendar { + --ig-size: 2; + + border-radius: 4px; +} +``` + + +## Getting Started with Ignite UI for Angular Calendar + +To get started with the Ignite UI for Angular Calendar component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxCalendarModule` in your **app.module.ts** file. + +>[!NOTE] +> The [**IgxCalendarComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html) also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well: + +```typescript +// app.module.ts +... +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IgxCalendarModule } from 'igniteui-angular/calendar'; +// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxCalendarComponent` as a standalone dependency, or use the [`IGX_CALENDAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar'; +// import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<igx-calendar></igx-calendar>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] + /* or imports: [BrowserAnimationsModule, HammerModule, IgxCalendarComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Calendar module or directives imported, you can start using the `igx-calendar` component. + +> [!NOTE] +> The [`IgxCalendarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html) uses the [Intl Web API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) for localization and formatting of dates. +Consider using [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them. + +## Using the Angular Calendar + +### Angular Single Selection Calendar + +Instantiating the `IgxCalendarComponent` is as easy as placing its selector element in the template. This will display the current month in the single selection calendar mode. + +```html +<!-- app.component.html --> +<!-- Single selection mode --> +<igx-calendar></igx-calendar> +``` + +### Angular Calendar Multiselect + +We can easily change the default mode using the [`selection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#selection) property: + +```html +<!-- app.component.html --> +<!-- Multi selection mode --> +<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar> +``` + + +```typescript +import { Component } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-1.component.scss'], + templateUrl: './calendar-sample-1.component.html', + imports: [IgxCalendarComponent] +}) +export class CalendarSample1Component { } +``` +```html +<article class="calendar-wrapper"> + <igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar> +</article> +``` +```scss +.calendar-wrapper { + max-width: 400px; + min-width: 200px; + margin: 8px; +} + +.igx-calendar { + --ig-size: 2; + + box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), + 0 1px 1px 0 rgba(0,0,0,.12), + 0 2px 1px -1px rgba(0,0,0,.08); + } +``` + + +### Angular Calendar Range Picker + +Following the same approach, we can switch to range selection mode: + +```html +<!-- app.component.html --> +<!-- Range selection mode --> +<igx-calendar selection="range"></igx-calendar> +``` + + +```typescript +import { Component } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-8.component.scss'], + templateUrl: './calendar-sample-8.component.html', + imports: [IgxCalendarComponent] +}) +export class CalendarSample8Component { } +``` +```html +<article class="calendar-wrapper"> + <igx-calendar selection="range"></igx-calendar> +</article> +``` +```scss +.calendar-wrapper { + --ig-size: 2; + + max-width: 400px; + min-width: 200px; + margin: 8px; +} + +.igx-calendar{ + box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), + 0 1px 1px 0 rgba(0,0,0,.12), + 0 2px 1px -1px rgba(0,0,0,.08); +} +``` + + +> [!NOTE] +> Notice that the calendar header is not rendered when the selection is either `multi` or `range`. + +### Localization and Formatting + +Due to their very nature, localization and formatting are essential to any calendar. In the `IgxCalendarComponent` those are controlled and customized through the following properties - [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#locale), [`formatOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#formatoptions), [`formatViews`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#formatViews), [`weekStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#weekStart). + +Let's go ahead and try those along with other customizations from the `IgxCalendarComponent API`. First thing we need to set is the `weekStart`, which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we will set a value of 1 for Monday. In the markup below we are also binding the `formatOptions` and `formatViews` properties to customize the display formatting. Finally, we are binding the `locale` property to a value, based on the user's location choice: + +```html +<!-- app.component.html --> +<igx-select #select [(ngModel)]="locale"> + <igx-select-item *ngFor="let locale of locales" [value]="locale"> + {{ locale }} + </igx-select-item> +</igx-select> + +<igx-calendar #calendar + [weekStart]="1" + [locale]="locale" + [formatOptions]="formatOptions" + [formatViews]="formatViews"> +</igx-calendar> +``` + +All property values should be set in the AppComponent file: + +```typescript +// app.component.ts +@ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent; + +public formatOptions: any; +public formatViews: any; +public locales = ['EN', 'DE', 'FR', 'AR', 'ZH']; +public locale = 'EN'; + +public ngOnInit() { + this.formatOptions = { day: '2-digit', month: 'long', weekday: 'long', year: 'numeric' }; + this.formatViews = { day: true, month: true, year: true }; +} +``` + +If everything went well, we should now have a calendar with customized dates display, that also changes the locale representation, based on the user location. Let's have a look at it: + + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { registerLocaleData } from '@angular/common'; +import localeDE from '@angular/common/locales/de'; +import localeFR from '@angular/common/locales/fr'; +import localeAR from '@angular/common/locales/ar'; +import localeZH from '@angular/common/locales/zh'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-2.component.scss'], + templateUrl: './calendar-sample-2.component.html', + imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxCalendarComponent] +}) +export class CalendarSample2Component implements OnInit{ + @ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent; + + public formatOptions: any; + public formatViews: any; + public locales = ['EN', 'DE', 'FR', 'AR', 'ZH']; + public locale = 'EN'; + + public ngOnInit() { + this.formatOptions = { day: '2-digit', month: 'long', weekday: 'long', year: 'numeric' }; + this.formatViews = { day: true, month: true, year: true }; + + registerLocaleData(localeDE); + registerLocaleData(localeFR); + registerLocaleData(localeAR); + registerLocaleData(localeZH); + } +} +``` +```html +<article class="sample-column location-wrapper"> + <igx-select #select [(ngModel)]="locale"> + <igx-prefix>Location: </igx-prefix> + @for (locale of locales; track locale) { + <igx-select-item [value]="locale"> + {{ locale }} + </igx-select-item> + } + </igx-select> +</article> +<article class="sample-column calendar-wrapper"> + <igx-calendar + #calendar + [locale]="locale" + [weekStart]="1" + [formatOptions]="formatOptions" + [formatViews]="formatViews" + > + </igx-calendar> +</article> +``` +```scss +@use '../../../../variables' as *; + +.calendar-wrapper { + max-width: 650px; + min-width: 300px; + margin: 8px; + border: 1px solid color($color: 'gray', $variant: 300); + border-radius: 6px; +} + +.igx-calendar { + --ig-size: 2; +} + +.location-wrapper { + min-width: 200px; + max-width: 640px; + margin-bottom: 32px; +} +``` + + +### How to Disable Dates In Angular Calendar + +This section demonstrates the usage of [`disabledDates`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#disabledDates) functionality. For this purpose, different single dates or ranges can be added to an array and then passed to the `disabledDates` descriptor. + +The [`DateRangeType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/daterangetype.html) is used to specify a range that is going to be disabled. + +Let's create a sample that is disabling the dates between the 3rd and the 8th of the current month: + +```typescript +export class CalendarSample6Component { + @ViewChild('calendar') public calendar: IgxCalendarComponent; + public today = new Date(Date.now()); + public range = [ + new Date(this.today.getFullYear(), this.today.getMonth(), 3), + new Date(this.today.getFullYear(), this.today.getMonth(), 8) + ]; + + public ngOnInit() { + this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: this.range }]; + } +} +``` + +These configurations should have the following result: + + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { DateRangeType } from 'igniteui-angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-6.component.scss'], + templateUrl: './calendar-sample-6.component.html', + imports: [IgxCalendarComponent, DatePipe] +}) +export class CalendarSample6Component implements OnInit{ + @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; + public today = new Date(Date.now()); + public range = [ + new Date(this.today.getFullYear(), this.today.getMonth(), 3), + new Date(this.today.getFullYear(), this.today.getMonth(), 8) + ]; + + public ngOnInit() { + this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: this.range }]; + } +} +``` +```html +<article class="sample-column calendar-wrapper"> + <div class="info"> + <span>Disabled dates range from <b>{{ range[0] | date }}</b> to <b>{{ range[1] | date }}</b></span> + </div> + <igx-calendar #calendar weekstart="1" [selection]="'multi'"> + </igx-calendar> +</article> +``` +```scss +.calendar-wrapper { + max-width: 700px; + min-width: 200px; + margin: 8px; + box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), + 0 1px 1px 0 rgba(0,0,0,.12), + 0 2px 1px -1px rgba(0,0,0,.08); +} + +.igx-calendar { + --ig-size: 2; +} + +.info { + display: flex; + justify-content: center; + background: var(--ig-surface-500); +} + +.info > span { + color: var(--ig-secondary-400); + font-weight: 600; + font-size: 0.875rem; + letter-spacing: 0.046875rem; + text-transform: uppercase; + line-height: 1rem; + margin: 16px; +} +``` + + +### Special dates + +The [`specialDates`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#specialDates) feature is using almost the same configuration principles as the `disabledDates`. The ability to select and focus `specialDates` is what differs them from the `disabled` ones. + +Let's add some `specialDates` to our `igxCalendar`. In order to do this, we have to create a [`DateRangeDescriptor`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/daterangedescriptor.html) item of type [`DateRangeType.Specific`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/daterangetype.html#specific) and pass an array of dates as a [`dateRange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/daterangedescriptor.html#dateRange): + +```typescript +export class CalendarSample7Component { + @ViewChild('calendar', { static: true }) + public calendar: IgxCalendarComponent; + @ViewChild('alert', { static: true }) + public dialog: IgxDialogComponent; + public range = []; + + public selectPTOdays(dates: Date[]) { + this.range = dates; + } + + public submitPTOdays(eventArgs) { + this.calendar.specialDates = + [{ type: DateRangeType.Specific, dateRange: this.range }]; + + this.range.forEach((item) => { + this.calendar.selectDate(item); + }); + + ... + } +} +``` + +```html +<igx-calendar #calendar weekStart="1" + selection="multi" + (selected)="selectPTOdays($event)"> +</igx-calendar> +<igx-dialog #alert title="Request Time Off" + leftButtonLabel="OK" + (leftButtonSelect)="alert.close()"> +</igx-dialog> +<button igxButton="contained" (click)="submitPTOdays($event)">Submit Request</button> +``` + +The following demo illustrates a calendar with a vacation request option: + + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { DateRangeType } from 'igniteui-angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-7.component.scss'], + templateUrl: './calendar-sample-7.component.html', + imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] +}) +export class CalendarSample7Component { + @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; + @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent; + public range = []; + + public selectPTOdays(dates: Date | Date[]) { + this.range = dates as Date[]; + } + + public submitPTOdays() { + this.calendar.specialDates = + [{ type: DateRangeType.Specific, dateRange: this.range }]; + + this.range.forEach((item) => { + this.calendar.selectDate(item); + }); + + if (this.range.length === 0) { + this.dialog.message = 'Select dates from the Calendar first.'; + } else { + this.dialog.message = 'PTO days submitted.'; + } + this.dialog.open(); + } +} +``` +```html +<article class="sample-column calendar-wrapper"> + <igx-calendar #calendar [weekStart]="1" selection="multi" (selected)="selectPTOdays($event)"> + </igx-calendar> + <igx-dialog #alert title="Request Time Off" leftButtonLabel="OK" (leftButtonSelect)="alert.close()"> + </igx-dialog> + <button igxButton="contained" (click)="submitPTOdays()">Submit Request</button> +</article> +``` +```scss +.calendar-wrapper { + --ig-size: 2; + + max-width: 700px; + min-width: 200px; + margin: 8px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), + 0 1px 1px 0 rgba(0, 0, 0, 0.12), + 0 2px 1px -1px rgba(0, 0, 0, 0.08); +} + +.igx-calendar { + border-radius: 0; +} + +.igx-button--contained { + border-radius: 0; +} +``` + + +### Week numbers + +You can now use [`showWeekNumbers`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#showWeekNumbers) input to show the week numbers for both Calendar and DatePicker components. + +```html + +<!-- app.component.html --> +<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar> +``` + +The following demo illustrates a calendar with enabled week numbers: + + +```typescript +import { Component } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-1.component.scss'], + templateUrl: './calendar-sample-1.component.html', + imports: [IgxCalendarComponent] +}) +export class CalendarSample1Component { } +``` +```html +<article class="calendar-wrapper"> + <igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar> +</article> +``` +```scss +.calendar-wrapper { + max-width: 400px; + min-width: 200px; + margin: 8px; +} + +.igx-calendar { + --ig-size: 2; + + box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), + 0 1px 1px 0 rgba(0,0,0,.12), + 0 2px 1px -1px rgba(0,0,0,.08); + } +``` + + +## Calendar Events + +Let's explore the events emitted by the calendar: + +- [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#selected) - emitted when selecting date(s) in the calendar. +- [`viewDateChanged`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#viewDateChanged) - emitted every time when the presented month/year is changed - for example after navigating to the `next` or `previous` month. +- [`activeViewChanged`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#activeViewChanged) - emitted after the active view is changed - for example after the user has clicked on the `month` or `year` section in the header. + +```html +<!-- app.component.html --> +<igx-calendar #calendar + (selected)="onSelection($event)" + (viewDateChanged)="viewDateChanged($event)" + (activeViewChanged)="activeViewChanged($event)"> +</igx-calendar> +``` + +The [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#selected) event is suitable to build input validation logic. Use the code from below to alert the user if selection exceeds 5 days, and then reset the selection: + +```typescript +// app.component.ts +... +public onSelection(dates: Date[]) { + if (dates.length > 5) { + this.calendar.selectedDates = []; + // alert the user + } +} +public viewDateChanged(event: IViewDateChangeEventArgs) { + // use event.previousValue to get previous month/year that was presented. + // use event.currentValue to get current month/year that is presented. +} + +public activeViewChanged(event: CalendarView) { + // use CalendarView[event] to get the current active view (DEFAULT, YEAR or DECADE) +} +``` + +Use the demo below to play around (change selection, navigate through months and years) and see the events logged real time: + +```typescript +import { Component, ViewChild, DOCUMENT, inject } from '@angular/core'; +import { IViewDateChangeEventArgs, IgxCalendarComponent, IgxCalendarView } from 'igniteui-angular/calendar'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-3.component.scss'], + templateUrl: './calendar-sample-3.component.html', + imports: [IgxCalendarComponent] +}) +export class CalendarSample3Component { + private document = inject<Document>(DOCUMENT); + + @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; + @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent; + public loggerHeader = `Interact with the calendar to see the events logged here in sequence:`; + + public onSelection(dates: Date | Date[]) { + const logger: HTMLElement = this.document.querySelector('.logger'); + dates = dates as Date[]; + logger.innerHTML = `<span> => 'onSelectionChanged': ${dates.length} dates selected.<br>${logger.innerHTML}`; + } + + public viewDateChanged(event: IViewDateChangeEventArgs) { + const logger: HTMLElement = this.document.querySelector('.logger'); + // eslint-disable-next-line max-len + const eventArgs = `event.previousValue: ${this.parseDate(event.previousValue)} | event.currentValue: ${this.parseDate(event.currentValue)}`; + logger.innerHTML = `<span> => 'viewDateChanged': ${eventArgs}</span><br>${logger.innerHTML}`; + } + + public activeViewChanged(event: IgxCalendarView) { + const logger: HTMLElement = this.document.querySelector('.logger'); + logger.innerHTML = `<span> => 'activeViewChanged':. Active view is: ${IgxCalendarView[event]}</span><br>${logger.innerHTML}`; + } + + private parseDate(date: Date) { + const monthFormatter = new Intl.DateTimeFormat('en', { month: 'long' }); + return `${monthFormatter.format(date)} ${date.getFullYear()}`; + } +} +``` +```html +<div class="calendar-section"> + <article class="calendar-wrapper"> + <igx-calendar #calendar selection="multi" (selected)="onSelection($event)" (viewDateChanged)="viewDateChanged($event)" (activeViewChanged)="activeViewChanged($event)"></igx-calendar> + </article> +</div> +<div class="calendar-section"> + <div class="selected-data-area"> + <div class="logContainer"> + <div class="highlight"> + <span>{{loggerHeader}}</span> + </div> + <div class="logger"></div> + </div> + </div> +</div> +``` +```scss +.igx-calendar { + --ig-size: 2; + + box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), + 0 1px 1px 0 rgba(0,0,0,.12), + 0 2px 1px -1px rgba(0,0,0,.08); + } + + :host { + display: flex; + width: 100%; + gap: 16px; + flex-flow: row wrap; + } + + button { + margin: 8px 0; + } + + .calendar-wrapper { + width: 300px; + margin: 8px; + } + + .calendar-section { + height: 336px; + } + + .selected-data-area { + overflow-y: auto; + max-height: 500px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; + } + + .logContainer { + padding: 0.2rem 0.4rem; + } + + .highlight { + background-color: rgba(0,153,255, 0.1); + margin-bottom: 0.4rem; + } +``` + + +## Angular Calendar Views + +There are separate views provided by the `IgxCalendarModule` that can be used independently: + +- Angular Calendar Days View - [`igx-days-view`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaysviewcomponent.html) + + +```typescript +import { Component } from '@angular/core'; +import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; +import { IgxDaysViewComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar-views', + styleUrls: ['./calendar-days-view.component.scss'], + templateUrl: './calendar-days-view.component.html', + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxDaysViewComponent] +}) +export class CalendarDaysViewComponent { } +``` +```html +<igx-card elevated> + <igx-card-header> + <h5 class="igx-card-header__title">Days View</h5> + </igx-card-header> + <igx-card-content> + <igx-days-view [selection]="'single'"></igx-days-view> + </igx-card-content> +</igx-card> +``` +```scss +.igx-card { + max-width: 500px; + min-width: 200px; + margin: 8px; +} + +.igx-calendar { + --ig-size: 2; +} +``` + + +- Angular Calendar Month View - [`igx-months-view`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxmonthsviewcomponent.html) + + +```typescript +import { Component } from '@angular/core'; +import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; +import { IgxMonthsViewComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar-views', + styleUrls: ['./calendar-months-view.component.scss'], + templateUrl: './calendar-months-view.component.html', + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxMonthsViewComponent] +}) +export class CalendarMonthsViewComponent { } +``` +```html +<igx-card elevated> + <igx-card-header> + <h5 class="igx-card-header__title">Months View</h5> + </igx-card-header> + <igx-card-content> + <igx-months-view></igx-months-view> + </igx-card-content> +</igx-card> +``` +```scss +.igx-card { + max-width: 500px; + min-width: 200px; + margin: 8px; +} + +.igx-calendar { + --ig-size: 2; +} +``` + + +- Angular Calendar Year View - [`igx-years-view`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxyearsviewcomponent.html) + + +```typescript +import { Component } from '@angular/core'; +import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; +import { IgxYearsViewComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar-views', + styleUrls: ['./calendar-years-view.component.scss'], + templateUrl: './calendar-years-view.component.html', + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxYearsViewComponent] +}) +export class CalendarYearsViewComponent { } +``` +```html +<igx-card elevated> + <igx-card-header> + <h5 class="igx-card-header__title">Years View</h5> + </igx-card-header> + <igx-card-content> + <igx-years-view></igx-years-view> + </igx-card-content> +</igx-card> +``` +```scss +.igx-card { + max-width: 500px; + min-width: 200px; + margin: 8px; +} + +:host { + igx-years-view { + --ig-size: 2; + } +} +``` + + +## Keyboard navigation + +If you traverse the page using _Tab key_ you should keep in mind that based on [W3 accessibility recommendations](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) the _igxCalendarComponent_ now introduces the following tab stops: + +- Previous month button +- Month selection button +- Year selection button +- Next month button +- Selected date, Current date, First focusable (not disabled) date in the days view + +In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi-select is enabled and you have selected the dates: _13/10/2020_, _17/10/2020_ and _21/10/2020_ only _13/10/2020_ will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the _page tab sequence_. + +>[!NOTE] +> Behavioral change, from _v10.2.0_ - Tab key navigation in the _days view_ is no longer available. In order to navigate between the dates in the _date view_ you should use the _arrow keys_. + +When the `igxCalendar` component is focused, use: + +- <kbd>PageUp</kbd> key to move to the previous month, +- <kbd>PageDown</kbd> key to move to the next month, +- <kbd>Shift</kbd> + <kbd>PageUp</kbd> keys to move to the previous year, +- <kbd>Shift</kbd> + <kbd>PageDown</kbd> keys to move to the next year, +- <kbd>Home</kbd> key to focus the first day of the current month or first month in view +- <kbd>End</kbd> key to focus the last day of the current month or last month in view + +When the `prev` or the `next` month buttons (in the subheader) are focused, use: + +- <kbd>Space</kbd> or <kbd>Enter</kbd> key to scroll into view the next or previous month. + +When the `months` button (in the subheader) is focused, use: + +- <kbd>Space</kbd> or <kbd>Enter</kbd> key to open the months view. + +When the `year` button (in the subheader) is focused, use: + +- <kbd>Space</kbd> or <kbd>Enter</kbd> key to open the decade view. + +When a `day` inside the current month is focused: + +- Use _Arrow keys_ to navigate through the days. Note: The disabled dates will be skipped. +- Focus will be persisted on the current month that is in the view, while navigation **from**/**to** the **last day**/**first day** of the month. +- THe kb navigation would be continuous, which means that it will go through all months while navigating with the arrows. +- Use <kbd>Enter key</kbd> to select the currently focused day. + +When a `month` inside the months view is focused, use: + +- Arrow keys to navigate through the months. +- <kbd>Home</kbd> key to focus the first month inside the months view. +- <kbd>End</kbd> key to focus the last month inside the months view. +- <kbd>Enter</kbd> key to select the currently focused month and close the view. + +When an `year` inside the decade view is focused, use: + +- <kbd>Arrow up</kbd> and <kbd>Arrow down</kbd> keys to navigate through the years, +- <kbd>Enter</kbd> key to select the currently focused year and close the view. + +>[!NOTE] +>Following version 8.2.0, keyboard navigation will not focus days that are outside of current month, but will rather change the month in view. + +## Multi View Calendar + +Multi-view calendar supports all three types of selection. Use the [`monthsViewNumber`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#monthsViewNumber) input to set the number of displayed months, which will be shown horizontally in a flex container. There is no limit on the max value set. While using a multi view calendar, you may want to hide the days that do not belong to the current month. You are able to do it with the [`hideOutsideDays`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#hideOutsideDays) property. Keyboard navigation moves to next/previous months when those are in view. + + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + + +@Component({ + selector: 'app-calendar', + styleUrls: ['./multiview.component.scss'], + templateUrl: './multiview.component.html', + imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] +}) +export class CalendarMultiViewComponent { + @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; + @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent; + public range = []; + + public selectDates(dates: Date | Date[]) { + this.range = dates as Date[]; + } + + public submitDates() { + if (this.range.length < 2) { + this.dialog.message = 'Select dates from the Calendar first.'; + } else { + this.dialog.message = 'Request for your stay has been submitted !'; + } + this.dialog.open(); + } + + public formatDate(date: Date): string { + return this.getDatePart(date, this.calendar, 'weekday') + ' ' + + this.getDatePart(date, this.calendar, 'day') + ' ' + + this.getDatePart(date, this.calendar, 'month'); + } + + public getDatePart(val: any, component: any, datePart: string) { + const date = val as Date; + const locale = component.locale; + const formatOptions: Intl.DateTimeFormatOptions = {}; + formatOptions[datePart] = component.formatOptions[datePart]; + + return date.toLocaleString(locale, formatOptions); + } + + get action() { + return this.range.length < 1 ? 'CHECK-IN' : 'CHECK-OUT'; + } + + get checkin() { + const checkin = this.range[0]; + return this.formatDate(checkin); + } + + get checkout() { + const checkin = this.range[this.range.length - 1]; + return this.formatDate(checkin); + } +} +``` +```html +<article class="sample-column calendar-wrapper"> + <div class="stay__info"> + @if (range.length <= 1) { + <span>{{ action }}</span> + } + @if (range.length > 1) { + <span>{{ checkin }} - {{ checkout }} ({{ this.range.length - 1 }} nights stay)</span> + } + </div> + <igx-calendar #calendar selection="range" [monthsViewNumber]="2" [hideOutsideDays]="true" + (selected)="selectDates($event)"> + </igx-calendar> + <igx-dialog #alert title="Availability" leftButtonLabel="OK" (leftButtonSelect)="alert.close()"> + </igx-dialog> + <button igxButton="contained" (click)="submitDates()">Check Availability</button> +</article> +``` +```scss +.calendar-wrapper { + max-width: 900px; + min-width: 200px; + margin: 8px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), + 0 1px 1px 0 rgba(0, 0, 0, 0.12), + 0 2px 1px -1px rgba(0, 0, 0, 0.08); +} + +.igx-calendar { + --ig-size: 2; + + border-radius: 0; +} + +.igx-button--contained { + border-radius: 0; +} + +.stay__info { + display: flex; + justify-content: center; + background: var(--ig-surface-500); +} + +.stay__info > span { + color: var(--ig-secondary-400); + font-weight: 600; + font-size: 0.875rem; + letter-spacing: 0.046875rem; + text-transform: uppercase; + line-height: 1rem; + margin: 16px; +} +``` + +## Calendar Orientation + +The orientation settings allows users to choose how the header and the view of the calendar are displayed. + +### Header Orientation Options + +You can change the header orientation to place the header of the calendar to be either horizontal(above the calendar view) or vertical(on the side of the calendar view). +To do that, use the `[headerOrientation]` property, setting it respectively to `horizontal` or `vertical` + +### View Orientation Options + +You can set the view orientation to place the months in the calendar either horizontally(side by side) or vertically(above one another). +To do that, use the `[orientation]` property, setting it respectively to `horizontal` or `vertical`. + +>[!NOTE] +> You need at least two month view calendar to see that property working. + +```html +<igx-calendar [monthsViewNumber]="2" [headerOrientation]="headerOrientation" [orientation]="orientation"></igx-calendar> +``` + +```typescript +const orientations = ["horizontal", "vertical"] as const; +type Orientation = (typeof orientations)[number]; + +export class CalendarSample9Component { + protected orientations = Array.from(orientations, (o) => o); + protected headerOrientation: Orientation = "horizontal"; + protected orientation: Orientation = "horizontal"; + + protected setHeaderOrientation(orientation: Orientation) { + this.headerOrientation = orientation; + } + + protected setOrientation(orientation: Orientation) { + this.orientation = orientation; + } +} +``` + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + + +const orientations = ["horizontal", "vertical"] as const; +type Orientation = (typeof orientations)[number]; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-sample-9.component.scss'], + templateUrl: './calendar-sample-9.component.html', + imports: [IgxCalendarComponent, IgxButtonGroupComponent, IgxButtonDirective] +}) + +export class CalendarSample9Component { + @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent; + protected orientations = Array.from(orientations, (o) => o); + protected headerOrientation: Orientation = "horizontal"; + protected orientation: Orientation = "horizontal"; + + protected setHeaderOrientation(orientation: Orientation) { + this.headerOrientation = orientation; + } + + protected setOrientation(orientation: Orientation) { + this.orientation = orientation; + } +} +``` +```html +<div class="preview__sample"> + <article class="calendar-wrapper"> + <igx-calendar [monthsViewNumber]="2" [headerOrientation]="headerOrientation" [orientation]="orientation"></igx-calendar> + </article> + + <div class="preview__settings"> + <small>Header orientation</small> + <igx-buttongroup selectionMode="singleRequired"> + @for (ho of orientations; track ho) { + <button + igxButton + (click)="setHeaderOrientation(ho)" + [selected]="ho === headerOrientation" + > + {{ ho }} + </button> + } + </igx-buttongroup> + + <small>View orientation</small> + <igx-buttongroup selectionMode="singleRequired"> + @for (vo of orientations; track vo) { + <button + igxButton + (click)="setOrientation(vo)" + [selected]="vo === orientation" + > + {{ vo }} + </button> + } + </igx-buttongroup> + </div> +</div> +``` +```scss +$padding: 2rem; + +:host { + display: flex; + flex-direction: column; + height: calc(100vh - 90px); + overflow: hidden; +} + +small { + &:not(:first-child) { + margin-block-start: 1rem; + } +} + +.calendar-wrapper { + flex-basis: 100px; + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 20px; +} + +.igx-calendar{ + box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), + 0 1px 1px 0 rgba(0,0,0,.12), + 0 2px 1px -1px rgba(0,0,0,.08); +} + +.preview { + display: flex; + overflow: hidden; + height: 100%; + + &__sample { + display: flex; + flex-wrap: wrap; + overflow: auto; + flex: 1; + } + + &__settings { + display: flex; + flex-direction: column; + gap: 8px; + background: hsla(var(--ig-gray-50)); + border-left: 1px solid var(--ig-gray-300); + padding: $padding; + overflow-x: auto; + } +} +``` + +## Styling + +### Calendar Theme Property Map + +When you modify the `$header-background` and `$content-background` properties, all related theme properties are automatically adjusted to ensure your calendar component is styled consistently. See the tables below for a detailed overview of which theme properties are affected. + +<div class="theme-switcher-wrapper"> +<!-- Theme Switcher Radios and Labels --> +<input type="radio" name="theme" id="material" checked> +<label for="material" class="switch-label">Material</label> +<input type="radio" name="theme" id="fluent"> +<label for="fluent" class="switch-label">Fluent</label> +<input type="radio" name="theme" id="bootstrap"> +<label for="bootstrap" class="switch-label">Bootstrap</label> +<input type="radio" name="theme" id="indigo"> +<label for="indigo" class="switch-label">Indigo</label> + +<div class="tables"> + <!-- Material Theme Table --> + <div class="theme-table material"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$header-background</strong></summary></details></td> + <td>$header-foreground</td> + <td>Text color for the calendar header</td> + </tr> + <tr class="dependent"><td></td><td>$picker-hover-foreground</td><td>Picker hover foreground</td></tr> + <tr class="dependent"><td></td><td>$picker-focus-foreground</td><td>Picker focus foreground</td></tr> + <tr class="dependent"><td></td><td>$navigation-hover-color</td><td>Hover color for navigation</td></tr> + <tr class="dependent"><td></td><td>$navigation-focus-color</td><td>Focus color for navigation</td></tr> + <tr class="dependent"><td></td><td>$date-selected-background</td><td>Background for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-background</td><td>Selected current date background</td></tr> + <tr class="dependent"><td></td><td>$date-selected-foreground</td><td>Foreground for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-foreground</td><td>Foreground for selected current date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-border-color</td><td>Border color for selected current date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-border-color</td><td>Border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-background</td><td>Year/month selected background</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-hover-background</td><td>Hover background for year/month selected date</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-current-background</td><td>Current selected year/month background</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-current-hover-background</td><td>Hover background for current selected year/month</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-foreground</td><td>Foreground for selected year/month</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-hover-foreground</td><td>Hover foreground for selected year/month</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-current-foreground</td><td>Foreground for current selected year/month</td></tr> + <tr class="dependent"><td></td><td>$ym-selected-current-hover-foreground</td><td>Hover foreground for current selected year/month</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$content-background</strong></summary></details></td> + <td>$content-foreground</td> + <td>Text and icon color inside calendar content area</td> + </tr> + <tr class="dependent"><td></td><td>$weekend-color</td><td>Color for weekend dates</td></tr> + <tr class="dependent"><td></td><td>$inactive-color</td><td>Color for dates outside active range</td></tr> + <tr class="dependent"><td></td><td>$weekday-color</td><td>Color for weekday labels</td></tr> + <tr class="dependent"><td></td><td>$picker-background</td><td>Picker background</td></tr> + <tr class="dependent"><td></td><td>$date-hover-background</td><td>Background for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-hover-foreground</td><td>Foreground for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-background</td><td>Background for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-foreground</td><td>Foreground for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-current-background</td><td>Background for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-foreground</td><td>Foreground for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-border-color</td><td>Border color for the current date</td></tr> + <tr class="dependent"><td></td><td>$ym-current-background</td><td>Year/month current background</td></tr> + <tr class="dependent"><td></td><td>$ym-current-hover-background</td><td>Hover background for current year/month</td></tr> + <tr class="dependent"><td></td><td>$ym-current-foreground</td><td>Foreground for current year/month</td></tr> + <tr class="dependent"><td></td><td>$ym-current-hover-foreground</td><td>Hover foreground for current year/month</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-background</td><td>Selected range background</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-foreground</td><td>Foreground for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-background</td><td>Background for selected current date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-hover-background</td><td>Hover background for selected current date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-focus-background</td><td>Focus background for selected current date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-foreground</td><td>Foreground for selected current date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-special-foreground</td><td>Foreground for special dates</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-color</td><td>Border color for special dates</td></tr> + <tr class="dependent"><td></td><td>$date-special-hover-border-color</td><td>Hover border color for special dates</td></tr> + <tr class="dependent"><td></td><td>$date-special-focus-foreground</td><td>Focus foreground for special dates</td></tr> + <tr class="dependent"><td></td><td>$date-special-range-foreground</td><td>Foreground for special date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-special-range-border-color</td><td>Border color for special date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-special-range-hover-background</td><td>Hover background for special date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-border-color</td><td>Border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-hover-border-color</td><td>Hover border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-focus-border-color</td><td>Focus border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-foreground</td><td>Foreground for disabled dates</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-range-foreground</td><td>Foreground for disabled ranges</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$date-border-radius</strong></summary></details></td> + <td>$date-range-border-radius</td> + <td>Controls the border radius for date ranges.</td> + </tr> + <tr class="dependent"><td></td><td>$date-current-border-radius</td><td>Controls the border radius for the current date.</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-radius</td><td>Controls the border radius for special dates.</td></tr> + <tr class="dependent"><td></td><td>$date-border-radius</td><td>If not specified and <code>$date-range-border-radius</code> is set, uses the value of <code>$date-range-border-radius</code>.</td></tr> + </tbody> + </div> + <!-- Fluent Theme Table --> + <div class="theme-table fluent"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$header-background</strong></summary></details></td> + <td>$header-foreground</td> + <td>Text color for the calendar header</td> + </tr> + <tr class="dependent"><td></td><td>$picker-hover-foreground</td><td>Picker hover foreground</td></tr> + <tr class="dependent"><td></td><td>$picker-focus-foreground</td><td>Picker focus foreground</td></tr> + <tr class="dependent"><td></td><td>$date-current-background</td><td>Background for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-hover-foreground</td><td>Hover foreground for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-focus-foreground</td><td>Focus foreground for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-foreground</td><td>Foreground for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-hover-foreground</td><td>Hover foreground for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-focus-foreground</td><td>Focus foreground for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-color</td><td>Border color for special dates</td></tr> + <tr class="dependent"><td></td><td>$date-special-hover-foreground</td><td>Hover foreground for special dates</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$content-background</strong></summary></details></td> + <td>$content-foreground</td> + <td>Text and icon color inside calendar content area</td> + </tr> + <tr class="dependent"><td></td><td>$weekend-color</td><td>Color for weekend dates</td></tr> + <tr class="dependent"><td></td><td>$inactive-color</td><td>Color for dates outside active range</td></tr> + <tr class="dependent"><td></td><td>$weekday-color</td><td>Color for weekday labels</td></tr> + <tr class="dependent"><td></td><td>$picker-background</td><td>Picker background</td></tr> + <tr class="dependent"><td></td><td>$date-hover-background</td><td>Background for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-hover-foreground</td><td>Foreground for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-background</td><td>Background for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-foreground</td><td>Foreground for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-background</td><td>Background for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-hover-background</td><td>Hover background for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-focus-background</td><td>Focus background for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-foreground</td><td>Foreground for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-hover-foreground</td><td>Hover foreground for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-focus-foreground</td><td>Focus foreground for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-background</td><td>Background for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-foreground</td><td>Foreground for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-foreground</td><td>Foreground for disabled dates</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-range-foreground</td><td>Foreground for disabled ranges</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$date-border-radius</strong></summary></details></td> + <td>$date-range-border-radius</td> + <td>Controls the border radius for date ranges.</td> + </tr> + <tr class="dependent"><td></td><td>$date-current-border-radius</td><td>Controls the border radius for the current date.</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-radius</td><td>Controls the border radius for special dates.</td></tr> + <tr class="dependent"><td></td><td>$date-border-radius</td><td>If not specified and <code>$date-range-border-radius</code> is set, uses the value of <code>$date-range-border-radius</code>.</td></tr> + </tbody> + </table> + </div> + <!-- Bootstrap Theme Table --> + <div class="theme-table bootstrap"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$header-background</strong></summary></details></td> + <td>$header-foreground</td> + <td>Text color for the calendar header</td> + </tr> + <tr class="dependent"><td></td><td>$picker-background</td><td>Picker background</td></tr> + <tr class="dependent"><td></td><td>$picker-hover-foreground</td><td>Picker hover foreground</td></tr> + <tr class="dependent"><td></td><td>$weekday-color</td><td>Color for weekday labels</td></tr> + <tr class="dependent"><td></td><td>$picker-focus-foreground</td><td>Picker focus foreground</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-color</td><td>Border color for special dates</td></tr> + <tr class="dependent"><td></td><td>$date-special-focus-foreground</td><td>Focus foreground for special dates</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$content-background</strong></summary></details></td> + <td>$content-foreground</td> + <td>Text and icon color inside calendar content area</td> + </tr> + <tr class="dependent"><td></td><td>$weekend-color</td><td>Color for weekend dates</td></tr> + <tr class="dependent"><td></td><td>$inactive-color</td><td>Color for dates outside active range</td></tr> + <tr class="dependent"><td></td><td>$weekday-color</td><td>Color for weekday labels</td></tr> + <tr class="dependent"><td></td><td>$date-hover-background</td><td>Background for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-hover-foreground</td><td>Foreground for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-background</td><td>Background for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-foreground</td><td>Foreground for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-current-background</td><td>Background for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-foreground</td><td>Foreground for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-border-color</td><td>Border color for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-background</td><td>Background for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-background</td><td>Background for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-foreground</td><td>Foreground for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-foreground</td><td>Foreground for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-border-color</td><td>Border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-hover-border-color</td><td>Hover border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-special-focus-border-color</td><td>Focus border color for selected special dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-background</td><td>Background for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-foreground</td><td>Foreground for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-foreground</td><td>Foreground for disabled dates</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-range-foreground</td><td>Foreground for disabled ranges</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$date-border-radius</strong></summary></details></td> + <td>$date-range-border-radius</td> + <td>Controls the border radius for date ranges.</td> + </tr> + <tr class="dependent"><td></td><td>$date-current-border-radius</td><td>Controls the border radius for the current date.</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-radius</td><td>Controls the border radius for special dates.</td></tr> + <tr class="dependent"><td></td><td>$date-border-radius</td><td>If not specified and <code>$date-range-border-radius</code> is set, uses the value of <code>$date-range-border-radius</code>.</td></tr> + </tbody> + </table> + </div> + <!-- Indigo Theme Table --> + <div class="theme-table indigo"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$header-background</strong></summary></details></td> + <td>$header-foreground</td> + <td>Text color for the calendar header</td> + </tr> + <tr class="dependent"><td></td><td>$picker-background</td><td>Picker background</td></tr> + <tr class="dependent"><td></td><td>$picker-hover-foreground</td><td>Picker hover foreground</td></tr> + <tr class="dependent"><td></td><td>$picker-focus-foreground</td><td>Picker focus foreground</td></tr> + <tr class="dependent"><td></td><td>$navigation-hover-color</td><td>Navigation hover color</td></tr> + <tr class="dependent"><td></td><td>$navigation-focus-color</td><td>Navigation focus color</td></tr> + <tr class="dependent"><td></td><td>$date-current-background</td><td>Background for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-border-color</td><td>Border color for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-hover-background</td><td>Background for hovered current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-hover-border-color</td><td>Border color for hovered current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-focus-background</td><td>Background for focused current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-focus-border-color</td><td>Border color for focused current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-foreground</td><td>Foreground for the current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-hover-foreground</td><td>Foreground for hovered current date</td></tr> + <tr class="dependent"><td></td><td>$date-current-focus-foreground</td><td>Foreground for focused current date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-border-color</td><td>Border color for the currently selected date</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$content-background</strong></summary></details></td> + <td>$content-foreground</td> + <td>Text and icon color inside calendar content area</td> + </tr> + <tr class="dependent"><td></td><td>$weekend-color</td><td>Color for weekend dates</td></tr> + <tr class="dependent"><td></td><td>$inactive-color</td><td>Color for dates outside active range</td></tr> + <tr class="dependent"><td></td><td>$weekday-color</td><td>Color for weekday labels</td></tr> + <tr class="dependent"><td></td><td>$date-hover-background</td><td>Background for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-hover-foreground</td><td>Foreground for hovered dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-background</td><td>Background for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-focus-foreground</td><td>Foreground for focused dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-background</td><td>Background for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-background</td><td>Background for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-foreground</td><td>Foreground for selected dates</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-foreground</td><td>Foreground for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-border-color</td><td>Border color for the currently selected date</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-background</td><td>Background for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-range-foreground</td><td>Foreground for selected date ranges</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-background</td><td>Background for the current date in a selected range</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-hover-background</td><td>Hover background for the current date in a selected range</td></tr> + <tr class="dependent"><td></td><td>$date-selected-current-range-foreground</td><td>Foreground for the current date in a selected range</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-foreground</td><td>Foreground for disabled dates</td></tr> + <tr class="dependent"><td></td><td>$date-disabled-range-foreground</td><td>Foreground for disabled ranges</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$date-border-radius</strong></summary></details></td> + <td>$date-range-border-radius</td> + <td>Controls the border radius for date ranges.</td> + </tr> + <tr class="dependent"><td></td><td>$date-current-border-radius</td><td>Controls the border radius for the current date.</td></tr> + <tr class="dependent"><td></td><td>$date-special-border-radius</td><td>Controls the border radius for special dates.</td></tr> + <tr class="dependent"><td></td><td>$date-border-radius</td><td>If not specified and <code>$date-range-border-radius</code> is set, uses the value of <code>$date-range-border-radius</code>.</td></tr> + </tbody> + </table> + </div> + </div> +</div><!-- .theme-switcher-wrapper --> + +To get started with styling the calendar, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`calendar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) and by specifying just the `$header-background` and `$content-background` parameters, the theme will automatically compute appropriate state colors and contrast foregrounds. Of course, you're still free to override any of the theme parameters with custom values if needed. + +```scss +$custom-calendar-theme: calendar-theme( + $header-background: #ecaa53, + $content-background: #011627, +); +``` + +The last step is to pass the custom calendar theme: + +```scss +:host { + @include tokens($custom-calendar-theme); +} +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-styling-sample.component.scss'], + templateUrl: './calendar-styling-sample.component.html', + imports: [IgxCalendarComponent] +}) +export class CalendarStylingSampleComponent { } +``` +```html +<article class="calendar-wrapper"> + <igx-calendar [formatOptions]="{weekday: 'short'}" [hasHeader]="false" + [showWeekNumbers]="true" [weekStart]="1"></igx-calendar> +</article> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS variables approach + +:host { + ::ng-deep { + .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { + --date-hover-background: var(--background-hover); + --date-selected-foreground: var(--primary); + --date-selected-background: #FFF; + --date-selected-border-color: var(--primary); + --date-selected-focus-foreground: var(--primary); + --date-selected-focus-background: var(--background-hover); + --date-selected-focus-border-color: var(--primary); + --date-selected-hover-foreground: var(--primary); + --date-selected-hover-background: var(--background-hover); + --date-selected-hover-border-color: var(--primary); + --date-selected-current-hover-background: var(--background-hover); + --date-selected-current-focus-background: var(--background-hover); + --date-selected-current-background: #FFF; + --date-selected-current-border-color: var(--primary); + --date-selected-current-hover-border-color: var(--primary); + --date-current-hover-background: var(--background-hover); + } + } +} + +igx-calendar { + --date-focus-background: transparent; + --week-number-background: transparent; + --weekend-color: #131E29; + --weekday-color: #556B82; + --week-number-foreground: #556B82; + --inactive-color: #556B82; + --date-current-border-color: var(--current-border); + --date-current-hover-border-color: var(--current-border); + --date-current-focus-border-color: var(--current-border); + --date-current-hover-background: var(--background-weekend); + --date-selected-current-border-color: var(--current-border); + --date-selected-current-background: #FFF; + --date-selected-current-foreground: var(--primary); + --date-selected-current-focus-border-color: var(--current-border); + --date-selected-current-focus-background: var(--background-weekend); + --date-selected-current-focus-foreground: var(--primary); + --date-selected-current-hover-border-color: var(--current-border); + --date-selected-current-hover-background: var(--background-weekend); + --date-selected-current-hover-foreground: var(--primary); + --date-selected-foreground: var(--primary); + --date-selected-background: #FFF; + --date-selected-border-color: var(--primary); + --date-selected-hover-foreground: var(--primary); + --date-selected-hover-background: var(--background-weekend); + --date-selected-hover-border-color: var(--primary); + --date-selected-focus-foreground: var(--primary); + --date-selected-focus-background: var(--background-weekend); + --date-selected-focus-border-color: var(--primary); + --picker-foreground: var(--primary); + --picker-hover-foreground: var(--primary); + --picker-focus-foreground: var(--primary); + --ym-hover-background: var(--background); + --ym-selected-background: #EDF5FF; + --ym-selected-hover-background: #D9EAFF; + --ym-selected-hover-foreground: var(--primary); + --ym-selected-outline-color: var(--primary); + --ym-selected-hover-outline-color: var(--primary); + --ym-selected-focus-outline-color: var(--primary); + --ym-selected-focus-background: #D9EAFF; + --ym-current-foreground: var(--primary); + --ym-current-background: transparent; + --ym-current-outline-color: transparent; + --ym-current-hover-foreground: var(--primary); + --ym-current-hover-background: var(--background); + --ym-current-outline-hover-color: var(--primary); + --ym-selected-current-foreground: var(--primary); + --ym-selected-current-background: #EDF5FF; + --ym-selected-current-outline-color: var(--primary); + --ym-selected-current-hover-foreground: var(--primary); + --ym-selected-current-hover-background: #D9EAFF; + --ym-selected-current-outline-hover-color: var(--primary); + --ym-selected-current-outline-focus-color: var(--primary); +} + +// Sass theme approach + +// $custom-calendar-theme-weekend: calendar-theme( +// $date-hover-background: var(--background-hover), +// $date-selected-foreground: var(--primary), +// $date-selected-background: #FFF, +// $date-selected-border-color: var(--primary), +// $date-selected-focus-foreground: var(--primary), +// $date-selected-focus-background: var(--background-hover), +// $date-selected-focus-border-color: var(--primary), +// $date-selected-hover-foreground: var(--primary), +// $date-selected-hover-background: var(--background-hover), +// $date-selected-hover-border-color: var(--primary), +// $date-selected-current-hover-background: var(--background-hover), +// $date-selected-current-focus-background: var(--background-hover), +// $date-selected-current-background: #FFF, +// $date-selected-current-border-color: var(--primary), +// $date-selected-current-hover-border-color: var(--primary), +// $date-current-hover-background: var(--background-hover) +// ); + +// $custom-calendar-theme: calendar-theme( +// $date-focus-background: transparent, +// $picker-foreground: var(--primary), +// $picker-hover-foreground: var(--primary), +// $picker-focus-foreground: var(--primary), +// $weekday-color: #556B82, +// $weekend-color: #131E29, +// $inactive-color: #556B82, +// $week-number-foreground: #556B82, +// $week-number-background: transparent, +// $ym-selected-current-hover-foreground: var(--primary), +// $ym-selected-current-hover-background: #D9EAFF, +// $ym-hover-background: var(--background), +// $ym-current-foreground: var(--primary), +// $ym-current-background: transparent, +// $ym-current-hover-foreground: var(--primary), +// $ym-current-hover-background: var(--background), +// $ym-selected-current-foreground: var(--primary), +// $ym-selected-current-background: #EDF5FF, +// $ym-selected-background: #EDF5FF, +// $ym-selected-hover-foreground: var(--primary), +// $ym-selected-hover-background: #D9EAFF, +// $ym-current-outline-color: transparent, +// $ym-current-outline-hover-color: var(--primary), +// $ym-selected-outline-color: var(--primary), +// $ym-selected-hover-outline-color: var(--primary), +// $ym-selected-focus-outline-color: var(--primary), +// $ym-selected-current-outline-color: var(--primary), +// $ym-selected-current-outline-hover-color: var(--primary), +// $ym-selected-current-outline-focus-color: var(--primary), +// $date-selected-current-foreground: var(--primary), +// $date-selected-current-background: #FFF, +// $date-selected-current-hover-foreground: var(--primary), +// $date-selected-current-hover-background: var(--background-weekend), +// $date-selected-current-focus-foreground: var(--primary), +// $date-selected-current-focus-background: var(--background-weekend), +// $date-selected-foreground: var(--primary), +// $date-selected-background: #FFF, +// $date-selected-border-color: var(--primary), +// $date-selected-hover-foreground: var(--primary), +// $date-selected-hover-background: var(--background-weekend), +// $date-selected-hover-border-color: var(--primary), +// $date-selected-focus-foreground: var(--primary), +// $date-selected-focus-background: var(--background-weekend), +// $date-selected-focus-border-color: var(--primary), +// $date-current-border-color: var(--current-border), +// $date-current-hover-border-color: var(--current-border), +// $date-current-focus-border-color: var(--current-border), +// $date-selected-current-border-color: var(--current-border), +// $date-selected-current-hover-border-color: var(--current-border), +// $date-selected-current-focus-border-color: var(--current-border), +// $date-current-hover-background: var(--background-weekend), +// $border-radius: rem(8px) +// ); + +// :host { +// ::ng-deep { +// .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) { +// @include tokens($custom-calendar-theme-weekend); +// } +// } +// } + +// igx-calendar { +// @include tokens($custom-calendar-theme); +// } +``` + +### Styling with Tailwind + +You can style the `calendar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-calendar`, `dark-calendar`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [calendar-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme). The syntax is as follows: + +```html +<igx-calendar +class="!light-calendar +![--header-background:#4F6A5A] +![--content-background:#A3C7B2]" +[weekStart]="1"> +</igx-calendar> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your calendar should look like this: + +<div class="sample-container loading" style="height:500px"> + <iframe id="calendar-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/scheduling/calendar-tailwind-styling-sample' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## API References + +<div class="divider--half"></div> + +- [IgxCalendarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [DateRangeType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/daterangetype.html) +- [DateRangeDescriptor](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/daterangedescriptor.html) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md new file mode 100644 index 000000000..6f0496a70 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md @@ -0,0 +1,820 @@ +--- +title: Angular Card Component – Ignite UI for Angular - MIT license +_description: With Angular Card component you can present users with dashboards and engaging text, images, icons or buttons as an entry point for detailed information. Try it now. +_keywords: Angular Card component, Angular Card control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library +_license: MIT +_tocName: Card +--- + +# Angular Card Component Overview + +<p class="highlight"> +Angular Card represents a flexible container that has different elements like title text, descriptions, image styles, call to action buttons, links and others. In order to represent a given scenario/content in the best possible way, it offers various display options, headers, footers, as well as background colors, animations, and more. + +This lightweight Angular Card component is used for creating all sorts of cards, some of them can be – business cards, material flipping cards, stacked cards. +</p> + +## Angular Card Example + +Below you can see a basic sample of a well-crafted Ignite UI for Angular Card with main card sections like image, title, subtitle, primary card content, container for a button. + +```typescript +import { Component } from '@angular/core'; +import { Card } from './card.blueprint'; +import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + + +@Component({ + selector: 'app-card', + styleUrls: ['./card.component.scss'], + templateUrl: './card.component.html', + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent] +}) +export class CardComponent { + public card = new Card({ + buttons: ['read more'], + content: `New York City comprises 5 boroughs sitting where the + Hudson River meets the Atlantic Ocean. At its core is Manhattan, + a densely populated borough that's among the world's major commercial, + financial and cultural centers.`, + icons: ['favorite', 'share'], + imageUrl: 'assets/images/card/media/ny.jpg', + subtitle: 'City in New York', + title: 'New York City' + }); +} +``` +```html +<div class="sample-column card-wrapper"> + <igx-card elevated> + <igx-card-media height="180px"> + <img [src]="card.imageUrl"> + </igx-card-media> + + <igx-card-header> + <h3 igxCardHeaderTitle>{{ card.title }}</h3> + <h5 igxCardHeaderSubtitle>{{ card.subtitle }}</h5> + </igx-card-header> + + <igx-card-content> + <p>{{ card.content }}</p> + </igx-card-content> + + <igx-card-actions> + @for (button of card.buttons; track button) { + <button igxButton igxRipple igxStart>{{ button }}</button> + } + @for (icon of card.icons; track icon) { + <button igxIconButton="flat" + igxRipple + [igxRippleCentered]="true" + igxEnd> + <igx-icon>{{icon}}</igx-icon> + </button> + } + </igx-card-actions> + + </igx-card> +</div> +``` +```scss +.card-wrapper { + max-width: 320px; + min-width: 220px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Card + +To get started with the Ignite UI for Angular Card component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxCardModule` inside your **app.module.ts** file. + +```typescript +// app.module.ts +... +import { IgxCardModule } from 'igniteui-angular/card'; +// import { IgxCardModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxCardModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxCardComponent` as a standalone dependency, or use the [`IGX_CARD_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card'; +// import { IGX_CARD_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-card> + <igx-card-media height="196px"> + <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"> + </igx-card-media> + + <igx-card-header> + <h3 igxCardHeaderTitle>New York</h3> + <h5 igxCardHeaderSubtitle>City in New York</h5> + </igx-card-header> + + <igx-card-content> + <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.</p> + </igx-card-content> + + <igx-card-actions> + <button igxButton igxRipple>Read More</button> + <button igxIconButton="flat" igxRipple igxRippleCentered="true"> + <igx-icon>favorite</igx-icon> + </button> + <button igxIconButton="flat" igxRipple igxRippleCentered="true"> + <igx-icon>share</igx-icon> + </button> + </igx-card-actions> + </igx-card> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_CARD_DIRECTIVES] + /* or imports: [IgxCardComponent, + IgxCardHeaderComponent, + IgxCardMediaDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxCardFooterDirective, + IgxCardHeaderTitleDirective, + IgxCardHeaderSubtitleDirective, + IgxCardThumbnailDirective, + IgxButtonDirective, + IgxRippleDirective] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Card module or directives imported, you can start using the `igx-card` component. + +## Using the Angular Card Component + +Then to represent the demo card template we can add the following code. + +```html +<!--card.component.html>--> + +<igx-card> + <igx-card-media height="196px"> + <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"> + </igx-card-media> + + <igx-card-header> + <h3 igxCardHeaderTitle>New York</h3> + <h5 igxCardHeaderSubtitle>City in New York</h5> + </igx-card-header> + + <igx-card-content> + <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.</p> + </igx-card-content> + + <igx-card-actions> + <button igxButton igxRipple>Read More</button> + <button igxIconButton="flat" igxRipple igxRippleCentered="true"> + <igx-icon>favorite</igx-icon> + </button> + <button igxIconButton="flat" igxRipple igxRippleCentered="true"> + <igx-icon>share</igx-icon> + </button> + </igx-card-actions> +</igx-card> +``` + +You will notice a few things above. First when we want to _tag_ an elements as a header title, like the `h3` heading, we place it between the `igx-card-header` tags and attach the `igxCardHeaderTitle` directive to the element. Conversely, if we wanted to make another heading element a `subtitle` we would attach the `igxCardHeaderSubtitle` to it. + +Any image or video we want to show in the Angular Card, we wrap inside the `igx-card-media` tags. The `igx-card-media` allows us to size the content placed inside via the `width` and `height` attributes. In the example above we provided just `height`, which would leave the width to `auto`, thus allowing the image to stretch across the entire card surface, while maintaining the set height. + +You can place anything inside the `igx-card-content` tags. Usually text goes there. + +Finally, the `igx-card-actions` is where you'd place any actionable items, like buttons. If you use the `igxButton` directive on an element, it will automatically be placed correctly according to the material design spec inside the area. + +### Media, Thumbs, and Avatars + +If you want to show an image or icon in the card header next to the title and subtitle, you can do it by using the `igxCardThumbnail` directive. + +Taking the card above as an example, we can edit the contents of the `igx-card-header` and add a `igxCardThumbnail` container to hold an icon: + +```html +<igx-card-header> + <div igxCardThumbnail> + <igx-icon>place</igx-icon> + </div> + + <h3 igxCardHeaderTitle>Title</h3> + <h5 igxCardHeaderSubtitle>Subtitle</h5> +</igx-card-header> +``` + +The above example will show the icon alongside the title and subtitle in the card header. + +We also automatically detect the presence of `igx-avatar` or `igx-card-media` placed in the card header. They will appear as if they were card thumbnails. So you can do: + +```html +<igx-card-header> + <igx-avatar> + <igx-icon>place</igx-icon> + </igx-avatar> + + <h3 igxCardHeaderTitle>Title</h3> + <h5 igxCardHeaderSubtitle>Subtitle</h5> +</igx-card-header> +``` + +or, even this: + +```html +<igx-card-header> + <igx-card-media width="40px" height="40px"> + <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=50"> + </igx-card-media> + + <h3 igxCardHeaderTitle>Title</h3> + <h5 igxCardHeaderSubtitle>Subtitle</h5> +</igx-card-header> +``` + +### Outlined cards + +The card has a `type` attribute you can set to either `default` (set automatically if omitted), or `outlined`. The `outlined` type removes any shadows from the card, replacing them with a thin border to separate the card from the background. + +### Angular Card Horizontal Layout + +By default all sections of the card (header, content, media, actions) are laid out vertically. This is nice when we have a lot of vertical space. Say we wanted to lay out all the sections in the card horizontally. We can use the `horizontal` attribute of the card to set its layout. + +Here's an example of an outlined horizontal card: + +```html +<igx-card type="outlined" [horizontal]="horizontal"> + <div class="h-sample-column"> + <igx-card-header> + <h5 igxCardHeaderTitle>{{card.title}}</h5> + <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5> + <igx-card-media width="64px" height="64px"> + <img [src]="card.imageUrl"> + </igx-card-media> + </igx-card-header> + + <igx-card-content> + <p>{{card.content}}</p> + </igx-card-content> + </div> + + <igx-divider [vertical]="horizontal"></igx-divider> + + <igx-card-actions layout="justify"> + <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true"> + <igx-icon>{{icon}}</igx-icon> + </button> + </igx-card-actions> +</igx-card> +``` + +We are using the `.h-sample-column` class to bundle the `igx-card-header` and `igx-card-content` together, keeping them aligned vertically, while other sections in the card align horizontally. + +The styles that `.h-sample-column` class applies are: + +```scss +.h-sample-column { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1 1 0%; + + igx-card-header { + padding-bottom: 0; + } +} +``` + +Notice how the buttons in the `igx-card-actions` have now switched to a `vertical` layout. The `igx-card-actions` has an `inverse` layout relationship with its parent. So whenever the card's `horizontal` attribute is set to `true` the actions `vertical` property will be set to `true` and vice versa. + +You can set the `vertical` attribute of he actions area explicitly, thus overriding this default behavior. + +```html +<igx-card-actions layout="justify" [vertical]="false"> + <button *ngFor="let icon of card.icons;" igxIconButton="flat" igxRipple igxRippleCentered="true"> + <igx-icon>{{icon}}</igx-icon> + </button> +</igx-card-actions> +``` + +If everything went well, our card should look like this: + + +```typescript +import { Component } from '@angular/core'; +import { Card } from '../card.blueprint'; +import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; +import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + + +@Component({ + selector: 'app-card-sample-2', + styleUrls: ['./card-sample-2.component.scss'], + templateUrl: './card-sample-2.component.html', + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] +}) +export class CardSample2Component { + public card = new Card({ + content: `As I have always said: I write what's real and what's true, + even if it means throwing myself under the bus.`, + icons: ['skip_previous', 'play_arrow', 'skip_next'], + imageUrl: 'assets/images/card/media/ROZES-Under-the-Grave.jpg', + subtitle: 'Under the Grave (2016)', + title: 'Rozes' + }); + + public horizontal = true; +} +``` +```html +<div class="sample-column card-wrapper"> + <igx-card [horizontal]="horizontal"> + <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1"> + <igx-card-header> + <h5 igxCardHeaderTitle>{{card.title}}</h5> + <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5> + <igx-card-media width="64px" height="64px"> + <img [src]="card.imageUrl"> + </igx-card-media> + </igx-card-header> + + <igx-card-content> + <p>{{card.content}}</p> + </igx-card-content> + </div> + + <igx-divider [vertical]="horizontal"></igx-divider> + + <igx-card-actions layout="justify"> + @for (icon of card.icons; track icon) { + <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd> + <igx-icon>{{icon}}</igx-icon> + </button> + } + </igx-card-actions> + </igx-card> +</div> +``` +```scss +.card-wrapper { + max-width: 400px; + min-width: 250px; +} +``` + + +### Alternative layouts + +You can get even more creative with the layout of the `igx-card`. + +Below is an example showing how you can create a semi-horizontal card, where we have every section of the card laid out vertically, while the `igx-card-media` appears alongside the vertical sections of the card. + +```html +<igx-card [horizontal]="horizontal"> + <div igxLayout igxLayoutDir="column" igxFlex igxFlexGrow="1"> + <igx-card-header> + <igx-avatar [src]="card.avatarUrl"></igx-avatar> + <h5 igxCardHeaderTitle>{{card.title}}</h5> + <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5> + </igx-card-header> + + <igx-card-content> + <p>{{card.content}}</p> + </igx-card-content> + + <igx-card-actions [vertical]="false"> + <button *ngFor="let button of card.buttons;" igxButton="flat" igxRipple> + {{button}} + </button> + </igx-card-actions> + </div> + + <igx-card-media width="96px"> + <img [src]="card.imageUrl"> + </igx-card-media> +</igx-card> +``` + + +```typescript +import { Component } from '@angular/core'; +import { Card } from '../card.blueprint'; +import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; +import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; + + +@Component({ + selector: 'app-card-sample-3', + styleUrls: ['./card-sample-3.component.scss'], + templateUrl: './card-sample-3.component.html', + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective] +}) +export class CardSample3Component { + public horizontal = true; + + public card = new Card({ + avatarUrl: 'assets/images/card/avatars/mellow_d.jpg', + buttons: ['play album'], + content: `Far far away, behind the word mountains, + far from the countries Vokalia and Consonantia, + there live the blind texts.`, + imageUrl: 'assets/images/card/media/here_media.jpg', + subtitle: 'by Mellow D', + title: 'HERE' + }); +} +``` +```html +<div class="sample-column card-wrapper"> + <igx-card [horizontal]="horizontal" elevated> + <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1"> + <igx-card-header> + <igx-avatar [src]="card.avatarUrl"></igx-avatar> + <h5 igxCardHeaderTitle>{{card.title}}</h5> + <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5> + </igx-card-header> + + <igx-card-content> + <p>{{card.content}}</p> + </igx-card-content> + + <igx-card-actions [vertical]="false"> + @for (button of card.buttons; track button) { + <button igxButton="flat" igxRipple igxStart> + {{button}} + </button> + } + </igx-card-actions> + </div> + + <igx-card-media width="96px"> + <img [src]="card.imageUrl"> + </igx-card-media> + </igx-card> +</div> +``` +```scss +.card-wrapper { + max-width: 400px; + min-width: 250px; +} +``` + + +### Angular Card Actions + +The Angular Card actions area allows additional configuration to what we have already mentioned. + +You can position elements in the card actions area either in the start or the end by using the `igxStart` or `igxEnd` directives. + +```html +<igx-card-actions> + <button igxIconButton="flat" igxStart> + <igx-icon>drag_indicator</igx-icon> + </button> + <button igxIconButton="flat" igxEnd> + <igx-icon>favorite</igx-icon> + </button> +</igx-card-actions> +``` + +You can justify the buttons so that they are laid out across the entire axis, not at the opposite ends. To do that, use the `layout` attribute and set its value to `justify`, like below: + +```html +<igx-card-actions layout="justify"> + <button igxButton>Button</button> + + <button igxIconButton="flat"> + <igx-icon>star</igx-icon> + </button> +</igx-card-actions> +``` + +## Styling + +### Card Theme Property Map + +Changing the `$background` property automatically updates the following dependent properties: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><strong>$background</strong></td> + <td>$header-text-color</td> + <td>The text color of the card title.</td> + </tr> + <tr> + <td></td> + <td>$subtitle-text-color</td> + <td>The text color of the card subtitle.</td> + </tr> + <tr> + <td></td> + <td>$content-text-color</td> + <td>The text color of the card content.</td> + </tr> + <tr> + <td></td> + <td>$actions-text-color</td> + <td>The text color of the card buttons.</td> + </tr> + </tr> + </tbody> +</table> + +To get started with styling the card, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`card-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-card-theme) and providing just a few styling parameters. If you only specify the `$background` parameter, the appropriate foreground colors will be automatically chosen, either black or white, based on which offers better contrast with the background. + +```scss +$custom-card-theme: card-theme( + $background: #011627, + $subtitle-text-color: #ecaa53, +); +``` + +As seen, the `card-theme` exposes some useful parameters for basic styling of its items. + +Finally, **include** the custom theme in your application: + +```scss +:host { + @include tokens($custom-card-theme); +} +``` + +In the sample below, you can see how using the card component with customized CSS variables allows you to create a design that visually resembles the card used in the [`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) design system. + + +```typescript +import { Component, inject, OnInit } from '@angular/core'; +import { Card } from '../card.blueprint'; +import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; +import { IgxDividerModule, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxChipComponent } from 'igniteui-angular/chips'; + +@Component({ + selector: 'app-card-styling-sample', + templateUrl: './card-styling-sample.component.html', + styleUrls: ['./card-styling-sample.component.scss'], + imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, + IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, + IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent] +}) +export class CardStylingSampleComponent implements OnInit { + private iconService = inject(IgxIconService) + public ngOnInit() { + this.iconService.addSvgIconFromText('settings-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg>') + this.iconService.addSvgIconFromText('edit-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg>'); + this.iconService.addSvgIconFromText('dots', '<svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg>'); + }; + public card = new Card({ + icons: ['settings-custom', 'edit-custom', 'dots'], + subtitle: 'This is the description', + title: 'Card title' + }); +} +``` +```html +<div class="sample-column card-wrapper"> + <igx-card elevated> + <igx-card-media height="180px"> + <img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"> + </igx-card-media> + <div class="border"> + <igx-card-header> + <igx-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8"></igx-avatar> + <div> + <h6 igxCardHeaderTitle>{{ card.title }}</h6> + <p igxCardHeaderSubtitle>{{ card.subtitle }}</p> + </div> + </igx-card-header> + <igx-card-content> + <igx-chip>#artic</igx-chip> + <igx-chip>#fox</igx-chip> + <igx-chip>#card</igx-chip> + <igx-divider></igx-divider> + </igx-card-content> + <igx-card-actions> + @for (icon of card.icons; track icon; let i = $index) { + <button igxIconButton="flat"> + <igx-icon name={{icon}}></igx-icon> + </button> + @if (i < 2) { <igx-divider [vertical]="true"> + </igx-divider> + } + } + </igx-card-actions> + </div> + </igx-card> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS variables approach + +igx-card { + --border-radius: #{rem(8px)}; + --outline-color: #f0f0f0; + --resting-shadow: none; + --hover-shadow: none; + --header-text-color: rgba(0, 0, 0, 0.88); +} + +igx-avatar { + --background: transparent; + --size: #{rem(30px)}; +} + +igx-chip { + --border-radius: #{rem(4px)}; + --background: #fafafa; + --border-color: #d9d9d9; + --hover-background: #d9d9d9; + --focus-background: #d9d9d9; +} + +.igx-icon-button--flat { + --foreground: #00000073; + --hover-foreground: #1677ff; + --hover-background: none; +} + +igx-divider { + --color: #f0f0f0 +} + +// Sass theme approach + +// $custom-card-theme: card-theme( +// $border-radius: rem(8px), +// $outline-color: #f0f0f0, +// $resting-shadow: none, +// $hover-shadow: none, +// $header-text-color: #000000e0, +// ); + +// $custom-avatar-theme: avatar-theme( +// $background: transparent, +// $size: rem(30px) +// ); + +// $custom-chip-theme: chip-theme( +// $border-radius: rem(4px), +// $background: #fafafa, +// $border-color: #d9d9d9, +// $hover-background: #d9d9d9, +// $focus-background: #d9d9d9, +// ); + +// $custom-icon-button-theme: flat-icon-button-theme( +// $foreground: #00000073, +// $hover-foreground: #1677ff, +// $hover-background: none, +// ); + +// $custom-divider-theme: divider-theme( +// $color: #f0f0f0 +// ); + +// :host { +// @include tokens($custom-card-theme); +// @include tokens($custom-avatar-theme); +// @include tokens($custom-chip-theme); +// @include tokens($custom-divider-theme); +// @include tokens($custom-icon-button-theme); +// } +``` + +### Styling with Tailwind + +You can style the `card` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-card`, `dark-card`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [card-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-card-theme). The syntax is as follows: + +```html +<igx-card +class="!light-card +![--background:#193625] +![--subtitle-text-color:#ECAA53]" +elevated> +... +</igx-card> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your card should look like this: + +<div class="sample-container loading" style="height:500px"> + <iframe id="card-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/layouts/card-tailwind-styling-sample' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +### Summary + +In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. We used some additional Ignite UI for Angular components inside our card, avatar, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's theme by setting some exposed theme colors, creating custom palettes and extending schemas. +The card component is capable of displaying more different layouts worth exploring in the Card Demo in the beginning of this article. + +## API and Style References + +For more detailed information regarding the card's API, refer to the following links: + +- [`IgxCardComponent API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcardcomponent.html) + +The following built-in CSS styles helped us achieve this card layout: + +- [`IgxCardComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-card-theme) + +Additional components and/or directives that were used: + +- [`IgxAvatarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html) +- [`IgxIconComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) +- [`IgxButtonDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) +- [`IgxDividerDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) + +Styles: + +- [`IgxAvatarComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme) +- [`IgxIconComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [`IgxButtonDirective Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) + +<div class="divider"></div> + +## Theming Dependencies + +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxAvatar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme) +- [IgxIconTheme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md new file mode 100644 index 000000000..524e14bed --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md @@ -0,0 +1,1368 @@ +--- +title: Angular Carousel Component – Ignite UI for Angular - MIT license +_description: Use Ignite UI for Angular Carousel component to navigate through a collection of slides, cards or page-based interfaces with endless programmatic features. Try it now +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Carousel component, Angular Carousel control +_license: MIT +_tocName: Carousel +--- + +# Angular Carousel Component Overview + +<p class="highlight">Ignite UI for Angular Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements. + +The Angular Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build Angular custom carousel. +</p> +<div class="divider"></div> + +## Angular Carousel Example + +The Angular Carousel demo you see below shows slides containing only images. We’ve enabled navigation buttons allowing users to easily move from one slide to another – going back and forth. + +```typescript +import { Component } from '@angular/core'; +import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; + + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel.component.scss'], + templateUrl: './carousel.component.html', + imports: [IgxCarouselComponent, IgxSlideComponent] +}) + +export class CarouselComponent { + + public slides = [ + { + src: 'assets/images/carousel/ignite-ui-angular-indigo-design.png' + }, + { + src: 'assets/images/carousel/slider-image-chart.png' + }, + { + src: 'assets/images/carousel/ignite-ui-angular-charts.png' + } + ]; +} +``` +```html +<div class="carousel-container"> + <igx-carousel #carousel> + @for (slide of slides; track slide) { + <igx-slide> + <div class="image-container"> + <img [src]="slide.src"> + </div> + </igx-slide> + } + </igx-carousel> +</div> +``` +```scss +.carousel-container { + width: 70vw; + height: 80vh; + margin: 16px auto; +} + +:host ::ng-deep{ + .image-container { + max-width: 85%; + display: flex; + align-items: center; + justify-content: center; + } + + .igx-carousel { + max-width: 100%; + width: unset; + } + + .igx-slide { + display: flex; + justify-content: center; + align-items: center; + max-width: 100%; + width: unset; + } + + .igx-slide img { + object-fit: fill; + max-width: 90%; + } +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Carousel + +To get started with the Ignite UI for Angular Carousel component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the **IgxCarouselModule** in our **app.module.ts** file: + +>[!NOTE] +>This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected. + +```typescript +// app.module.ts + +import { HammerModule } from '@angular/platform-browser'; +import { IgxCarouselModule } from 'igniteui-angular/carousel'; +// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., HammerModule, IgxCarouselModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxCarouselComponent` as a standalone dependency, or use the [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { HammerModule } from '@angular/platform-browser'; +import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel'; +// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-carousel> + <igx-slide *ngFor="let slide of slides"> + <div class="image-container"> + <img [src]="slide.src" /> + </div> + </igx-slide> + </igx-carousel> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES] + /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Carousel module or directives imported, you can start using the `igx-carousel` component. + +## Using the Angular Carousel Component + +The Ignite UI for Angular Carousel component can be used as a full-screen element or situated inside another component. Also, the slides may feature any valid html content inside, including other Angular components. + +In this section we will go through the setup of the above defined **demo**. + +### Adding slides with *ngFor + +<div class="divider--half"></div> + +If we have slides with the same type of content, the easiest approach is to use _\*ngFor_ to add them in the template. + +Since our slides are going to contain only images, we are going to create an array of objects in the **ts** file and use it to populate the **igx-carousel** with slides: + +```typescript +@Component({...}) +export class HomeComponent { + public slides = [ + { src: '/assets/images/carousel/ignite-ui-angular-indigo-design.png' }, + { src: '/assets/images/carousel/slider-image-chart.png' }, + { src: '/assets/images/carousel/ignite-ui-angular-charts.png' } + ]; +} +``` + +```html +<div class="carousel-container"> + <igx-carousel #carousel> + <igx-slide *ngFor="let slide of slides"> + <div class="image-container"> + <img [src]="slide.src" /> + </div> + </igx-slide> + </igx-carousel> +</div> +``` + +## Angular Carousel Custom Examples + +### Configuring IgxCarousel + +<div class="divider--half"></div> + +By default, the Carousel in Angular has its [`loop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#loop) input property set to `true` (_looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action_). The looping behavior can be disabled by setting the value of the [`loop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#loop) input to `false`. + +```html +<igx-carousel [loop]="false"> + ... +</igx-carousel> +``` + +To keep track of each slide index, the carousel has indicators that are positioned at the `end` of the carousel by default. In order to change this behavior, use the [`indicatorsOrientation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `start`. + +```html +<igx-carousel indicatorsOrientation="start"> + ... +</igx-carousel> +``` + +By default, the [`IgxCarousel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html) displays its navigation buttons and indicators. Use the [`indicators`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#indicators) property to hide the indicators and the [`navigation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#navigation) property to hide the navigation buttons. + +```html +<igx-carousel [navigation]="false" [indicators]="false"> + ... +</igx-carousel> +``` + +The [`IgxCarousel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html) supports vertical mode. Use the [`vertical`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#vertical) property to enable it. + +```html +<igx-carousel [vertical]="true"> + ... +</igx-carousel> +``` + +### Custom indicators + +<div class="divider--half"></div> + +To add Angular custom carousel indicators we will have to use the [IgxCarouselIndicatorDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselindicatordirective.html), like this: + +```html +... + <ng-template igxCarouselIndicator let-slide> + <div [ngClass]="{'selected': slide.current === current}"></div> + </ng-template> +... +``` + +### Custom nav buttons + +To achieve this we will use the [IgxCarouselPrevButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselprevbuttondirective.html) and [IgxCarouselNextButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselnextbuttondirective.html) directives: + +```html +... + <ng-template igxCarouselNextButton let-disabled> + <button igxButton="fab" igxRipple="white" [disabled]="disabled"> + <igx-icon fontSet="material">navigate_next</igx-icon> + </button> + </ng-template> + + <ng-template igxCarouselPrevButton let-disabled> + <button igxButton="fab" igxRipple="white" [disabled]="disabled"> + <igx-icon fontSet="material">navigate_before</igx-icon> + </button> + </ng-template> +... +``` + +### Slide containing other components + +<div class="divider--half"></div> + +This carousel is going to contain slides with forms and images: + +```html +... + <div class="carousel-container"> + <igx-carousel> + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/svg/carousel/SignUp.svg"> + <form #form class="signInForm"> + <igx-input-group> + <igx-prefix> + <igx-icon>person</igx-icon> + </igx-prefix> + <label style="display: flex;" igxLabel for="username">Username</label> + <input igxInput id="username" type="text" /> + </igx-input-group> + <igx-input-group> + <igx-prefix> + <igx-icon>lock</igx-icon> + </igx-prefix> + <label style="display: flex;" igxLabel for="password">Password</label> + <input igxInput id="password" type="password" /> + </igx-input-group> + </form> + <div class="btn"> + <button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button> + </div> + </div> + </igx-slide> + + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/svg/carousel/Route.svg"> + <form #form2 class="searchForm"> + <igx-input-group> + <igx-prefix> + <igx-icon>search</igx-icon> + </igx-prefix> + <label style="display: flex;" igxLabel for="username">Search</label> + <input igxInput id="search" type="text" /> + </igx-input-group> + </form> + <div class="btn"> + <button igxButton="contained" type="submit" (click)="form2.reset()">Search</button> + </div> + </div> + </igx-slide> + </igx-carousel> +</div> +... +``` + +#### Demo + + +```typescript +import { Component } from '@angular/core'; +import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel-with-components-sample.component.scss'], + templateUrl: './carousel-with-components-sample.component.html', + imports: [IgxCarouselComponent, IgxSlideComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective] +}) + +export class CarouselWithComponentsSampleComponent { } +``` +```html +<div class="carousel-container"> + <igx-carousel> + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/svg/carousel/SignUp.svg"> + <form #form class="signInForm"> + <igx-input-group> + <igx-prefix> + <igx-icon>person</igx-icon> + </igx-prefix> + <label style="display: flex;" igxLabel for="username">Username</label> + <input igxInput id="username" type="text" /> + </igx-input-group> + <igx-input-group> + <igx-prefix> + <igx-icon>lock</igx-icon> + </igx-prefix> + <label style="display: flex;" igxLabel for="password">Password</label> + <input igxInput id="password" type="password" /> + </igx-input-group> + </form> + <div class="btn"> + <button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button> + </div> + </div> + </igx-slide> + + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/svg/carousel/Route.svg"> + <form #form2 class="searchForm"> + <igx-input-group> + <igx-prefix> + <igx-icon>search</igx-icon> + </igx-prefix> + <label style="display: flex;" igxLabel for="username">Search</label> + <input igxInput id="search" type="text" /> + </igx-input-group> + </form> + <div class="btn"> + <button igxButton="contained" type="submit" (click)="form2.reset()">Search</button> + </div> + </div> + </igx-slide> + </igx-carousel> +</div> +``` +```scss +.carousel-container { + width: 70vw; + height: 80vh; + margin: 16px auto; +} + +:host ::ng-deep { + .image-container { + max-width: 85%; + display: flex; + align-items: center; + justify-content: center; + margin: auto; + } + + .igx-carousel { + max-width: 100%; + width: unset; + } + + .igx-slide { + display: flex; + justify-content: center; + align-items: center; + max-width: 100%; + width: unset; + } + + .igx-slide .image-container img { + object-fit: fill; + max-width: 90%; + display: block; + margin: auto; + } + + form { + margin: 10% auto; + } + + .btn { + display: flex; + justify-content: center; + } +} +``` + + +## Angular Carousel Animations + +Animated slide transitions provide the end-users a nice experience when interacting with the carousel. + +The carousel is configured to use the `slide` animation by default but it also supports `fade` as an alternative animation. + +The animations are configured through the [animationType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#animationType) input, like this: + +```html +<igx-carousel animationType="fade"> +... +</igx-carousel> + +``` + +Setting `none` to the `animationType` input disables carousel's animations. + + +### Demo + +The demo below demonstrates the different types of animations, which the carousel supports. + + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { FormsModule } from '@angular/forms'; +import { TitleCasePipe } from '@angular/common'; + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel-animations-sample.component.scss'], + templateUrl: './carousel-animations-sample.component.html', + imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe] +}) +export class CarouselAnimationsSampleComponent { + @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; + + public animations = ['slide', 'fade', 'none']; + public slides: any[] = [ + { + description: '30+ Material-based Angular components to code speedy web apps faster.', + heading: 'Ignite UI for Angular', + image: 'assets/images/carousel/slide1-angular.png', + link: 'https://www.infragistics.com/products/ignite-ui-angular' + }, + { + description: 'A complete JavaScript UI library empowering you to build data-rich responsive web apps.', + heading: 'Ignite UI for Javascript', + image: 'assets/images/carousel/slide2-ignite.png', + link: 'https://www.infragistics.com/products/ignite-ui' + }, + { + description: 'Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls', + heading: 'Ultimate UI for ASP.NET', + image: 'assets/images/carousel/slide3-aspnet.png', + link: 'https://www.infragistics.com/products/aspnet' + } + ]; +} +``` +```html +<div class="carousel-wrapper"> + <div class="action-wrapper"> + <div class="action"> + <span>Animation type</span> + <igx-select #select [type]="'border'" [(ngModel)]="carousel.animationType"> + @for (animation of animations; track animation) { + <igx-select-item [value]="animation"> + {{animation | titlecase}} + </igx-select-item> + } + </igx-select> + </div> + <div class="action"> + <igx-switch labelPosition="before" [(ngModel)]="carousel.vertical">Vertical alignment</igx-switch> + </div> + </div> + <igx-carousel #carousel [indicators]="false"> + @for (slide of slides; track slide) { + <igx-slide> + <div class="slide-wrapper"> + <igx-card> + <igx-card-header> + <h3 igxCardHeaderTitle>{{slide.heading}}</h3> + </igx-card-header> + <igx-card-content> + <p>{{slide.description}}</p> + </igx-card-content> + <igx-card-media> + <img [src]="slide.image"> + </igx-card-media> + <igx-card-actions> + <a igxButton href="{{slide.link}}" target="_blank" rel="noopener" igxStart>visit page</a> + </igx-card-actions> + </igx-card> + </div> + </igx-slide> + } + </igx-carousel> +</div> +``` +```scss +.carousel-wrapper { + height: 600px; + width: 90%; + margin: 20px auto; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.action-wrapper { + height: 40px; + width: 500px; + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.action { + display: flex; + align-items: center; +} + +.slide-wrapper { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 10px; + + img { + width: 100%; + } +} + +igx-carousel { + border: 0.5px solid #dde0e4; +} + +igx-select { + width: 150px; + margin-left: 10px; + --ig-size: var(--ig-size-small); +} + +igx-card { + border: none; +} + +igx-card-header { + padding: 8px 16px; +} + +a { + text-decoration: none; +} +``` + + +## Navigation + +<div class="divider--half"></div> + +Transition and navigation are the most important carousel features. + +The navigation in the carousel can be handled by the user through navigation buttons, keyboard navigation and pan interaction on mobile devices. + +### Pan gestures + +<div class="divider--half"></div> + +By default, the carousel can be used on any touch-enabled device. This is optional and can be changed by setting the [gesturesSupport](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#gesturesSupport) property to `false`. + +The carousel [animations](carousel.md#angular-carousel-animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)). + +### Keyboard navigation + +<div class="divider--half"></div> + +- Navigation buttons + - `Space`/`Enter` key - navigates to the next/previous slide. +- Indicators + - `Arrow Left` key - navigates to the previous (next in Right-to-Left mode) slide. + - `Arrow Right` key - navigates to the next (previous in Right-to-Left mode) slide. + - `Home` key - navigates to the first (last in Right-to-Left mode) slide. + - `End` key - navigates to the last (first in Right-to-Left mode) slide. + +### Automatic transitioning + +<div class="divider--half"></div> + +The **IgxCarousel** can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the [interval](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#interval) property, which determines the amount of time in milliseconds between slides transition. + +>[!NOTE] +>The automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting [pause](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#pause) property to `false`. + +## Advanced Example + +<div class="divider--half"></div> + +Let's create a fully automated carousel with looping enabled. Each slide will be synced with a [list item](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistitemcomponent.html) in a list. Clicking on a list item will trigger a slide change. + + +To achieve this goal, we have to do the following configurations to the carousel: + +- disable `gesturesSupport` +- disable the `navigation` buttons +- disable the carousel `indicators` +- disable the `pause` on user interaction with the slide +- add transition `interval` + +Our carousel will look like this in the template: + +```html +... +<div class="carousel-wrapper"> + <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false"> + <igx-slide *ngFor="let item of slides"> + <!-- Slides content goes here --> + </igx-slide> + </igx-carousel> +</div> +... +``` + +We are ready with the carousel configuration. Now we need only to add a [list](list.md) component and sync the both components: + +adding [IgxList](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html): + +```html +... +<div class="list-wrapper"> + <igx-list> + <!-- Adding disabled classes when the list item index does not match the current slide index--> + <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" > + <!-- List item content goes here --> + </igx-list-item> + </igx-list> +</div> +... +``` + +syncing the components by hooking up on carousel's [`slideChanged`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#slideChanged) and list's [itemClicked](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html#itemClicked) events: + +>[!NOTE] +>As of v15.1.0 `onSlideChanged` was renamed to `slideChanged`. Using `ng update` will automatically migrate your code prior to use the new event name. + +```typescript + public ngOnInit() { + this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => { + this.currentIndex = args.item.index; + this.carousel.select(this.carousel.get(this.currentIndex)); + }); + + this.carousel.slideChanged.subscribe((args: ISlideEventArgs) => { + this.currentIndex = args.slide.index; + }); + } +``` + +These configurations will have the following result: + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ISlideEventArgs, IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; +import { IListItemClickEventArgs, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular/list'; +import { NgStyle, NgClass, CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel-no-navigation-sample.component.scss'], + templateUrl: './carousel-no-navigation-sample.component.html', + imports: [IgxCarouselComponent, IgxSlideComponent, NgStyle, NgClass, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, CurrencyPipe] +}) +export class CarouselNoNavigationSampleComponent implements OnInit { + @ViewChild(IgxCarouselComponent, { static: true }) + public carousel: IgxCarouselComponent; + + @ViewChild(IgxListComponent, {static: true}) + public list: IgxListComponent; + + public slides: any[] = []; + public currentIndex = 0; + constructor() { } + + public ngOnInit() { + this.addSlides(); + + this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => { + this.currentIndex = args.item.index; + this.carousel.select(this.carousel.get(this.currentIndex)); + }); + + this.carousel.slideChanged.subscribe((args: ISlideEventArgs) => { + this.currentIndex = args.slide.index; + }); + } + + public slideStyle(image: string) { + return { + background: `url(${image})`, + backgroundSize: 'cover' + }; + } + + public addSlides() { + this.slides.push( + { + title: 'Wonderful Coast', + subTitle: 'May to October', + image: 'assets/images/carousel/WonderfulCoast.png', + thumb: 'assets/images/carousel/WonderfulCoastThumb.png', + price: 1299, + description: 'Delicious seafood and wines along the coasts of beautiful Italy' + }, + { + title: 'Cultural Dip', + subTitle: 'July and August', + image: 'assets/images/carousel/CulturalDip.png', + thumb: 'assets/images/carousel/CulturalDipThumb.png', + price: 1949, + description: 'Immerse yourself in the history and culture of the far East' + }, + { + title: 'Golden Beaches', + subTitle: 'October to March', + image: 'assets/images/carousel/GoldenBeaches.png', + thumb: 'assets/images/carousel/GoldenBeachesThumb.png', + price: 2799, + description: 'Endless beachfronts, crystal blue water and the finest grains of sand' + }, + { title: 'Island Of History', + subTitle: 'May to October', + image: 'assets/images/carousel/IslandOfHistory.png', + thumb: 'assets/images/carousel/IslandOfHistoryThumb.png', + price: 1419, + description: 'Discover this hidden gem of the Mediterranean rich of antiquity' + }, + { + title: 'Amazing Bridge', + subTitle: 'Spring and Autumn', + image: 'assets/images/carousel/AmazingBridge.png', + thumb: 'assets/images/carousel/AmazingBridgeThumb.png', + price: 1049, + description: 'Walk along one of the engineering wonders of the twentieth century' + } + ); + } +} +``` +```html +<div class="carousel-animation-wrapper"> + <div class="carousel-wrapper"> + <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false"> + @for (item of slides; track item) { + <igx-slide #slide> + <div style="height: 100%" [ngStyle]="slideStyle(item.image)"> + <section class="promo-price" [ngClass]="{'animated': slide.active}"> + <div class="description">{{ item.description }}</div> + <div class="price">{{ item.price | currency: 'USD': 'symbol': '3.0' }}</div> + </section> + </div> + </igx-slide> + } + </igx-carousel> + </div> + <div class="list-wrapper"> + <igx-list> + @for (item of slides; track item; let i = $index) { + <igx-list-item [ngClass]="{'disabled': i !== currentIndex }" > + <img igxListThumbnail src="{{item.thumb}}" /> + <div class="titles"> + <h6>{{item.title}}</h6> + <span class="subTitle">{{item.subTitle}}</span> + </div> + </igx-list-item> + } + </igx-list> + </div> +</div> +``` +```scss +@use '../../../../variables' as *; + +.carousel-wrapper { + width: 60%; +} + +.carousel-animation-wrapper { + margin: 20px auto; + display: flex; +} + +:host ::ng-deep { + .promo-price { + position: relative; + display: flex; + background: rgba(color($palette: $palette, $color: 'surface'), .54); + color: contrast-color($color: 'surface'); + padding: 1rem; + border-bottom: transparent 1px solid; + backdrop-filter: blur(10px); + } + + .description { + font-size: 1.2rem; + color: black; + } + + .titles { + display: inline-flex; + flex-flow: column; + margin-left: 1rem; + align-self: center; + + .subTitle{ + font-size: 1rem; + font-weight: 600; + color: color($color: 'gray', $variant: 600); + } + } + + .price { + padding-left: .5rem; + font-size: 1.5rem; + color: color($color: secondary); + } + + igx-list { + --ig-size: var(--ig-size-small); + justify-content: space-between; + } + + igx-list-item { + padding: 0 16px; + cursor: pointer; + transition: all .25s $ease-out-quad; + will-change: filter, opacity; + border-radius: 0 8px 8px 0; + + img { + margin: 8px; + border-radius: 8px; + } + + &.disabled { + filter: blur(2px); + opacity: .5; + + &:hover { + opacity: 1; + filter: none; + } + } + } +} +``` + +## Angular Carousel Styling + +### Carousel Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +<div class="theme-switcher-wrapper"> + <input type="radio" name="theme" id="material" checked> + <label for="material" class="switch-label">Material</label> + <input type="radio" name="theme" id="fluent"> + <label for="fluent" class="switch-label">Fluent</label> + <input type="radio" name="theme" id="bootstrap"> + <label for="bootstrap" class="switch-label">Bootstrap</label> + <input type="radio" name="theme" id="indigo"> + <label for="indigo" class="switch-label">Indigo</label> + + <div class="tables"> + <!-- Material Theme Table --> + <div class="theme-table material"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$button-background</strong></summary></details></td> + <td>$button-hover-background</td> + <td>The background color of the button on hover.</td> + </tr> + <tr class="dependent"><td></td><td>$button-arrow-color</td><td>The color of the button arrow.</td></tr> + <tr class="dependent"><td></td><td>$button-disabled-background</td><td>The background color of the button when disabled.</td></tr> + <tr class="dependent"><td></td><td>$indicator-focus-color <br> (When $indicator-background is not provided)</td><td>The color of the indicator when focused.</td></tr> + <tr class="primary"> + <td><strong>$button-hover-background</strong></td> + <td>$button-hover-arrow-color</td> + <td>The color of the button arrow on hover.</td> + </tr> + <tr class="primary"> + <td><strong>$button-disabled-background</strong></td> + <td>$button-disabled-arrow-color</td> + <td>The color of the button arrow when disabled.</td> + </tr> + <tr class="primary"> + <td><strong>$button-hover-arrow-color</strong></td> + <td>$button-focus-arrow-color</td> + <td>The color of the button arrow when focused.</td> + </tr> + <tr class="primary"> + <td><strong>$button-focus-arrow-color</strong></td> + <td>$button-focus-border-color</td> + <td>The border color of the button when focused.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-background</strong></summary></details></td> + <td>$indicator-border-color</td> + <td>The color of the indicator border.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-dot-color</td><td>The color of the indicator dot when active.</td></tr> + <tr class="dependent"><td></td><td>$indicator-focus-color</td><td>The color of the indicator when focused.</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-active-dot-color</strong></summary></details></td> + <td>$indicator-active-hover-dot-color</td> + <td>The color of the indicator when active and hovered.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-border-color</td><td>The color of the indicator border when active.</td></tr> + <tr class="primary"> + <td><strong>$indicator-dot-color</strong></td> + <td>$indicator-hover-dot-color</td> + <td>The color of the indicator dot on hover.</td> + </tr> + </tbody> + </table> + </div> + <!-- Fluent Theme Table --> + <div class="theme-table fluent"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$button-background</strong></summary></details></td> + <td>$button-hover-background</td> + <td>The background color of the button on hover.</td> + </tr> + <tr class="dependent"><td></td><td>$button-arrow-color</td><td>The color of the button arrow.</td></tr> + <tr class="dependent"><td></td><td>$button-disabled-background</td><td>The background color of the button when disabled.</td></tr> + <tr class="dependent"><td></td><td>$button-focus-border-color</td><td>The border color of the button when focused.</td></tr> + <tr class="dependent"><td></td><td>$indicator-focus-color <br> (When $indicator-background is not provided)</td><td>The color of the indicator when focused.</td></tr> + <tr class="primary"> + <td><strong>$button-hover-background</strong></td> + <td>$button-hover-arrow-color</td> + <td>The color of the button arrow on hover.</td> + </tr> + <tr class="primary"> + <td><strong>$button-disabled-background</strong></td> + <td>$button-disabled-arrow-color</td> + <td>The color of the button arrow when disabled.</td> + </tr> + <tr class="primary"> + <td><strong>$button-hover-arrow-color</strong></td> + <td>$button-focus-arrow-color</td> + <td>The color of the button arrow when focused.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-background</strong></summary></details></td> + <td>$indicator-border-color</td> + <td>The color of the indicator border.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-dot-color</td><td>The color of the indicator dot when active.</td></tr> + <tr class="dependent"><td></td><td>$indicator-focus-color</td><td>The color of the indicator when focused.</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-active-dot-color</strong></summary></details></td> + <td>$indicator-active-hover-dot-color</td> + <td>The color of the indicator when active and hovered.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-border-color</td><td>The color of the indicator border when active.</td></tr> + <tr class="primary"> + <td><strong>$indicator-dot-color</strong></td> + <td>$indicator-hover-dot-color</td> + <td>The color of the indicator dot on hover.</td> + </tr> + </tbody> + </table> + </div> + <!-- Bootstrap Theme Table --> + <div class="theme-table bootstrap"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$button-background</strong></summary></details></td> + <td>$button-hover-background</td> + <td>The background color of the button on hover.</td> + </tr> + <tr class="dependent"><td></td><td>$button-arrow-color</td><td>The color of the button arrow.</td></tr> + <tr class="dependent"><td></td><td>$button-disabled-background</td><td>The background color of the button when disabled.</td></tr> + <tr class="dependent"><td></td><td>$button-focus-border-color</td><td>The border color of the button when focused.</td></tr> + <tr class="dependent"><td></td><td>$indicator-focus-color <br> (When $indicator-background is not provided)</td><td>The color of the indicator when focused.</td></tr> + <tr class="primary"> + <td><strong>$button-hover-background</strong></td> + <td>$button-hover-arrow-color</td> + <td>The color of the button arrow on hover.</td> + </tr> + <tr class="primary"> + <td><strong>$button-disabled-background</strong></td> + <td>$button-disabled-arrow-color</td> + <td>The color of the button arrow when disabled.</td> + </tr> + <tr class="primary"> + <td><strong>$button-hover-arrow-color</strong></td> + <td>$button-focus-arrow-color</td> + <td>The color of the button arrow when focused.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-background</strong></summary></details></td> + <td>$indicator-border-color</td> + <td>The color of the indicator border.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-dot-color</td><td>The color of the indicator dot when active.</td></tr> + <tr class="dependent"><td></td><td>$indicator-focus-color</td><td>The color of the indicator when focused.</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-active-dot-color</strong></summary></details></td> + <td>$indicator-active-hover-dot-color</td> + <td>The color of the indicator when active and hovered.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-border-color</td><td>The color of the indicator border when active.</td></tr> + <tr class="primary"> + <td><strong>$indicator-dot-color</strong></td> + <td>$indicator-hover-dot-color</td> + <td>The color of the indicator dot on hover.</td> + </tr> + </tbody> + </table> + </div> + <!-- Indigo Theme Table --> + <div class="theme-table indigo"> + <table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$button-background</strong></summary></details></td> + <td>$button-hover-background</td> + <td>The background color of the button on hover.</td> + </tr> + <tr class="dependent"><td></td><td>$button-border-color</td><td>The border color of the button.</td></tr> + <tr class="dependent"><td></td><td>$button-arrow-color</td><td>The color of the button arrow.</td></tr> + <tr class="dependent"><td></td><td>$button-disabled-background</td><td>The background color of the button when disabled.</td></tr> + <tr class="dependent"><td></td><td>$indicator-active-dot-color <br> (When $indicator-background is not provided)</td><td>The color of the indicator dot when active.</td></tr> + <tr class="primary"> + <td><strong>$button-hover-background</strong></td> + <td>$button-hover-arrow-color</td> + <td>The color of the button arrow on hover.</td> + </tr> + <tr class="primary"> + <td><strong>$button-disabled-background</strong></td> + <td>$button-disabled-arrow-color</td> + <td>The color of the button arrow when disabled.</td> + </tr> + <tr class="primary"> + <td><strong>$button-border-color</strong></td> + <td>$button-hover-border-color</td> + <td>The border color of the button on hover.</td> + </tr> + <tr class="primary"> + <td><strong>$button-hover-arrow-color</strong></td> + <td>$button-focus-arrow-color</td> + <td>The color of the button arrow when focused.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-background</strong></summary></details></td> + <td>$indicator-dot-color</td> + <td>The color of the indicator dot.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-dot-color</td><td>The color of the indicator dot when active.</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-dot-color</strong></summary></details></td> + <td>$indicator-hover-dot-color</td> + <td>The color of the indicator dot on hover.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-border-color</td><td>The color of the indicator border.</td></tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$indicator-active-dot-color</strong></summary></details></td> + <td>$indicator-active-hover-dot-color</td> + <td>The color of the indicator when active and hovered.</td> + </tr> + <tr class="dependent"><td></td><td>$indicator-active-border-color</td><td>The color of the indicator border when active.</td></tr> + <tr class="dependent"><td></td><td>$button-focus-border-color</td><td>The border color of the button when focused.</td></tr> + <tr class="primary"> + <td><strong>$indicator-active-hover-dot-color</strong></td> + <td>$indicator-focus-color</td> + <td>The color of the indicator when focused.</td> + </tr> + </tbody> + </table> + </div> + </div> +</div> + +Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `carousel` appearance. + +First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [carousel-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-carousel-theme), and by providing just a few base parameters like `$button-background` and `$indicator-background`, the theme will generate the appropriate state-specific colors and contrasting foregrounds. You can also override any of the available parameters if you want more control over the appearance. + +```scss +$carousel-theme: carousel-theme( + $button-background: #7c32dd, + $indicator-background: #7c32dd, +); +``` + +The last step is to include the component's theme. + +```scss +:host { + @include tokens($carousel-theme); +} +``` + +### Demo + +The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). + +```typescript +import { Component } from '@angular/core'; +import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; + +@Component({ + selector: 'app-carousel', + styleUrls: ['./carousel-styling-sample.component.scss'], + templateUrl: './carousel-styling-sample.component.html', + imports: [IgxCarouselComponent, IgxSlideComponent] +}) + +export class CarouselStylingSampleComponent { } +``` +```html +<div class="carousel-container"> + <igx-carousel> + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/carousel/slide1@x2.jpg"> + </div> + </igx-slide> + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/carousel/16-9-CulturalDip.png"> + </div> + </igx-slide> + <igx-slide> + <div class="slide-content-wrapper"> + <img src="assets/images/carousel/slide3@x2.jpg"> + </div> + </igx-slide> + </igx-carousel> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// Create a carousel theme. +$custom-carousel-theme: carousel-theme( + $button-background: rgb(124 50 221 / 60%), + $button-arrow-color: #c5bcd0, + $button-hover-arrow-color: #F3E8FF, + $indicator-background: rgb(124 50 221 / 60%), + $indicator-border-color: #a29aab, + $button-shadow: var(--ig-elevation-5) +); + +// Apply the custom theme. +:host { + @include tokens($custom-carousel-theme); +} +``` + +### Styling with Tailwind + +You can style the `carousel` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-carousel`, `dark-carousel`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [carousel-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-carousel-theme). The syntax is as follows: + +```html +<igx-carousel class="!light-carousel +![--indicator-background:#a7b6de] +![--button-background:#a7b6de] +![--indicator-border-color:#3E4853]"> + ... +</igx-carousel> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your carousel should look like this: + +<div class="sample-container loading" style="height:310px"> + <iframe id="carousel-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/layouts/carousel-tailwind-sample/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## Accessibility + +### WAI-ARIA Roles, States, and Properties + +- The Carousel base element role is [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily. +- Carousel indicators are with role [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user +- The element that serves as the container for the set of tabs (carousel indicators) role is set to [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tab). +- Each slide element is set with role [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel). +- The element that serves as the container for the set of igx-slides is set with [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live)="polite". Both options are + - **off**: if the carousel is automatically rotating. + - **polite**: if the carousel is NOT automatically rotating. + +### ARIA support + +#### **Carousel component** + +##### **Attributes** + +- [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) set to 'carousel'. +- [aria-selected](https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected)- set to _true_ or _false_ based on the active slide. +- [aria-controls](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) - set a slide index whose content is controlled by the current element. +- [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: **off** and **polite**. The default setting is **polite**. When the [interval](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html#interval) option set, the **aria-live** attribute would be set to **off**. +- [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) slide based. +- aria-label (buttons) + - aria-label - for previous slide. + - aria-label - for next slide. + +#### **Slide component** + +##### **Roles** + +- [attr.role="tabpanel"](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) - container for the resources associated with a tab, where each tab is contained in a tablist. + +##### **Attributes** + +- id - follows the pattern "panel-${this.index}" +- [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) follows the pattern "tab-${this.index}-${this.total}" +- [aria-selected](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) set **active** slide. Indicates the current **selected** state of a particular slide element. + +## API References + +<div class="divider--half"></div> + +- [IgxCarouselComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html) +- [IgxCarouselComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-carousel-theme) +- [IgxSlideComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxslidecomponent.html) +- [IgxListComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html) +- [IgxListItemComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistitemcomponent.html) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md new file mode 100644 index 000000000..f511b294d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md @@ -0,0 +1,122 @@ +--- +title: Angular Chart API | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Angular chart provides useful API to configure and styles chart visuals +_keywords: Angular charts, chart API, API, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "CategoryChart", "FinancialChart", "SeriesViewer", "XamDoughnutChart", "XamPieChart", "XamSparkline", "DataPieChart" ] +namespace: Infragistics.Controls.Charts +_tocName: Chart API +_premium: true +--- + +# Angular Charts API + +The Ignite UI for Angular charts provide simple and easy to use APIs to plot your data in [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html), [`IgxDoughnutChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html), [`IgxPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html), and [`IgxSparklineComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html) UI elements. + +## Angular Category Chart API + +The Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) has the following API members: + +| Chart Properties | Axis Properties | Series Properties | +|------------------|-----------------|-------------------| +| - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) <br> - [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) <br> - [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) <br> - [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) <br> - [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) <br> - [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode) <br> - [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) <br> - [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) <br> - [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) <br> - [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) <br> | - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) <br> - [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) <br> - [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) <br> - [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap) <br> - [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle) <br> - [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) <br> - [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) <br> - [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle) <br> - [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) <br> - [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes) <br> - [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines) <br> - [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) <br> - [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) <br> - [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes) <br> - [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) <br> <br> <br> <br> <br> | + +## Angular Financial Chart API + +The Angular [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) has the following API members: + +| Chart Properties | Axis Properties | Series Properties | +|------------------|-----------------|-------------------| +| - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType) <br> - [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) <br> - [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) <br> - [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isHorizontalZoomEnabled) <br> - [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isVerticalZoomEnabled) <br> - [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) <br> - [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode) <br> - [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) <br> - [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) <br> - [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) | - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) <br> - [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) <br> - [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle) <br> - [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval) <br> - [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) <br> - [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle) <br> - [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinimumValue) <br> - [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMaximumValue) <br> - [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) <br> - [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes) <br> - [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines) <br> - [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) <br> - [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) <br> - [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes) <br> - [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) <br> - [`volumeType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) <br> - [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) <br> <br> <br> | + +## Angular Data Chart API + +The Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) has the following API members: + +| Chart Properties | Axis Classes | +|------------------|--------------| +| - [`chartTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#chartTitle) <br> - [`subtitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#subtitle) <br> - [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) <br> - [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) <br> - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes) <br> - [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#outlines) <br> - [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerBrushes) <br> - [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerOutlines) <br> - `XamDataChart.Axes` <br> - [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) <br> | - [`IgxAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) is base class for all axis types <br> - [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) <br> - [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md) <br> - [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) used with [Radial Series](types/radial-chart.md) <br> - [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md) <br> - [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) <br> - [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) used with [Polar Series](types/polar-chart.md) <br> - [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md) <br> - [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md) <br> <br> | + +The Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) can use the following type of series that inherit from [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html): + +| Category Series | Stacked Series | +|------------------|----------------| +| - [`IgxAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html) <br> - [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) <br> - [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) <br> - [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) <br> - [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) <br> - [`IgxSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html) <br> - [`IgxSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html) <br> - [`IgxStepLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html) <br> - [`IgxStepAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html) <br> - [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html) <br> - [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html) <br> - [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) <br> | - [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) <br> - [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) <br> - [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html) <br> - [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) <br> - [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html) <br> - [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) <br> - [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) <br> - [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) <br> - [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) <br> - [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html) <br> <br> <br> | + +| Scatter Series | Financial Series | +|----------------|------------------| +| - [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) <br> - [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) <br> - [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) <br> - [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) <br> - [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html) <br> - [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html) <br> - [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html) <br> - [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) <br> - [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) <br> <br> | - [`IgxFinancialPriceSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html) <br> - [`IgxBollingerBandsOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html) <br> - [`IgxForceIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html) <br> - [`IgxMedianPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html) <br> - [`IgxMassIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html) <br> - [`IgxRelativeStrengthIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html) <br> - [`IgxStandardDeviationIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html) <br> - [`IgxTypicalPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html) <br> - [`IgxWeightedCloseIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxweightedcloseindicatorcomponent.html) <br> - and [many more](types/stock-chart.md) | + +| Radial Series | Polar Series | +|---------------|--------------| +| - [`IgxRadialLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) <br> - [`IgxRadialAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) <br> - [`IgxRadialPieSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) <br> - [`IgxRadialColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html) <br> <br> | - [`IgxPolarScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html) <br> - [`IgxPolarLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) <br> - [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) <br> - [`IgxPolarSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html) <br> - [`IgxPolarSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) <br> | + +## Angular Data Legend API + +The Angular [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) has the following API members: + +- [`includedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) +- [`excludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) +- [`includedSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedSeries) +- [`excludedSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedSeries) +- [`valueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) +- [`valueFormatMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMode) +- [`valueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) +- [`valueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) +- [`valueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions) +- [`valueTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueTextColor) +- [`titleTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#titleTextColor) +- [`labelTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelTextColor) +- [`unitsTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#unitsTextColor) +- [`summaryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryType) +- [`headerTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) +- [`badgeShape`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#badgeShape) + +## Angular Donut Chart API + +The Angular [`IgxDoughnutChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html) has the following API members: + +- [`allowSliceExplosion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceExplosion) +- [`allowSliceSelection`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceSelection) +- [`innerExtent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#innerExtent) + +## Angular Data Pie Chart API + +The Angular [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) has the following API members: + +- [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) +- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) +- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) + +## Angular Pie Chart API + +The Angular [`IgxPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html) has the following API members: + +- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) + +## Angular Sparkline Chart API + +The Angular [`IgxSparklineComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html) has the following API members: + +- [`displayNormalRangeInFront`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayNormalRangeInFront) +- [`displayType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) +- [`lowMarkerBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerBrush) +- [`lowMarkerSize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerSize) +- [`lowMarkerVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerVisibility) +- [`normalRangeFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeFill) +- [`unknownValuePlotting`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#unknownValuePlotting) + +## Additional Resources + +You can find more information about charts in these topics: + +- [Chart Overview](chart-overview.md) +- [Chart Features](chart-features.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md new file mode 100644 index 000000000..bdaddfaea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md @@ -0,0 +1,1556 @@ +--- +title: Angular Chart Features | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Features +_keywords: Angular Charts, Features, Infragistics +_license: commercial +mentionedTypes: ["FinancialChart", "CategoryChart", "XamDataChart"] +_tocName: Chart Features +--- + +# Angular Chart Features + +The Ignite UI for Angular Charts allow you to display many different features to portray the full data story to be told with your chart. Each of these features are fully customizable, and can be styled to suit your design needs - allowing you full control. Interactions such as highlighting and annotations allow you to call out important data details allowing for a deeper data analysis within your chart. + +The Angular Charts offer the following chart features: + +## Axis + +Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the Angular chart's [Axis Gridlines](features/chart-axis-gridlines.md), [Axis Layouts](features/chart-axis-layouts.md), and [Axis Options](features/chart-axis-options.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartScatterModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartScatterModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public SinData: any[]; + public CosData: any[]; + + public YAxisCrossingValue : number = 0; + public XAxisCrossingValue : number = 0; + + constructor() { + + this.SinData= []; + this.CosData= []; + + for (let i = -360; i <= 360; i+=10) + { + const radians = (i * Math.PI) / 180; + const sin = Math.sin(radians); + const cos = Math.cos(radians); + + this.SinData.push( { X : i, Y : sin }); + this.CosData.push( { X : i, Y : cos }); + } + } + + public OnXAxisCrossingValueChanged(e : any) { + this.XAxisCrossingValue = e.target.value; + } + + public OnYAxisCrossingValueChanged(e : any) { + this.YAxisCrossingValue = e.target.value; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + + <label>X Axis Crossing Value: </label> + <label class="options-value" ><span [textContent]="XAxisCrossingValue" ></span></label> + <input type="range" min="-1.25" max="1.25" step="0.25" value="0" (input)="OnXAxisCrossingValueChanged($event)" /> + + <label>Y Axis Crossing Value: </label> + <label class="options-value" ><span [textContent]="YAxisCrossingValue" ></span></label> + <input type="range" min="-360" max="360" step="40" value="0" (input)="OnYAxisCrossingValueChanged($event)" /> + </div> + + <div class="container"> + <igx-data-chart isHorizontalZoomEnabled=true isVerticalZoomEnabled=true + width="100%" height="100%" [dataSource]="SinData" > + <igx-numeric-x-axis #xAxis interval="40" + minimumValue="-360" + maximumValue="360" + labelLocation="InsideBottom" + [crossingAxis]="yAxis" + [crossingValue]="XAxisCrossingValue"> + </igx-numeric-x-axis> + <igx-numeric-y-axis #yAxis + minimumValue="-1.25" + maximumValue="1.25" + interval="0.25" + labelLocation="InsideLeft" + [crossingAxis]="xAxis" + [crossingValue]="YAxisCrossingValue" > + </igx-numeric-y-axis> + + <igx-scatter-spline-series markerType="Circle" + [dataSource]="SinData" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="X" + yMemberPath="Y" > + </igx-scatter-spline-series> + + <igx-scatter-spline-series markerType="Circle" + [dataSource]="CosData" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="X" + yMemberPath="Y"> + </igx-scatter-spline-series> + </igx-data-chart> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Annotations + +These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the [Chart Annotations](features/chart-annotations.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxCalloutLayerComponent } from "igniteui-angular-charts"; +import { IgxSeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + public calloutData: any[]; + + public crosshairsDisplay: string = "Both"; + public crosshairAnnotations: boolean = true; + public finalValuesVisible: boolean = true; + public calloutsVisible: boolean = true; + public markerType: string = "Circle"; + + constructor() { + } + + public ngOnInit() { + + this.data = [ + { Year: "2009", USA: 19 }, + { Year: "2010", USA: 24 }, + { Year: "2011", USA: 28 }, + { Year: "2012", USA: 26 }, + { Year: "2013", USA: 38 }, + { Year: "2014", USA: 31 }, + { Year: "2015", USA: 19 }, + { Year: "2016", USA: 52 }, + { Year: "2017", USA: 50 }, + { Year: "2018", USA: 34 }, + { Year: "2019", USA: 38 }, + ]; + + this.calloutData = []; + + for (let i = 0; i < this.data.length; i++) { + const item = this.data[i]; + this.calloutData.push({ index: i, label: item.USA + " TWh", value: item.USA }); + } + } + + public OnCrosshairVisibilityChanged(e: any) { + const val = e.target.checked; + + if (val) { + this.crosshairsDisplay = "Both"; + } + else { + this.crosshairsDisplay = "None"; + } + } + + public OnMarkersVisibilityChanged(e: any) { + const val = e.target.checked; + + if (val) { + this.markerType = "Circle"; + } + else { + this.markerType = "None"; + } + } + + public OnCalloutsVisibilityChanged(e: any) { + this.calloutsVisible = e.target.checked; + } + + public OnFinalValueVisibilityChanged(e: any) { + this.finalValuesVisible = e.target.checked; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label class="options-label">Annotations: </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnCrosshairVisibilityChanged($event)" /> Crosshair + </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnCalloutsVisibilityChanged($event)" /> Callouts + </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnFinalValueVisibilityChanged($event)" /> Final Values + </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnMarkersVisibilityChanged($event)" /> Markers + </label> + </div> + + <div class="options vertical"> + <label id="legendTitle">Renewable Electricity Generated</label> + </div> + <div class="container"> + <igx-category-chart height="100%" width="100%" + [dataSource]="data" + chartType="line" + yAxisTitle="TWh" + yAxisTitleLeftMargin="5" + yAxisLabelLocation="OutsideRight" + crosshairsSnapToData="false" + [crosshairsDisplayMode]="crosshairsDisplay" + [crosshairsAnnotationEnabled]="crosshairAnnotations" + [finalValueAnnotationsVisible]="finalValuesVisible" + [calloutsVisible]="calloutsVisible" + [calloutsDataSource]="calloutData" + [markerTypes]="markerType" + calloutsXMemberPath="index" + calloutsYMemberPath="value" + calloutsLabelMemberPath="label" + computedPlotAreaMarginMode="series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Animations + +Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the [Chart Animations](features/chart-animations.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public transitionInMode: string = "Auto"; + public transitionInInterval: string = "1000"; + public data: any[]; + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + constructor() { + this.data = this.generateData(); + } + + public onChangeAmountClicked() { + this.data = this.generateData(); + } + + public OnTransitionIntervalChange(e: any) { + this.transitionInInterval = e.target.value; + } + + private generateData(): any[] { + const data: any[] = [ + { Year: "2009", Europe: 31, China: 21, USA: 19 }, + { Year: "2010", Europe: 43, China: 26, USA: 24 }, + { Year: "2011", Europe: 66, China: 29, USA: 28 }, + { Year: "2012", Europe: 69, China: 32, USA: 26 }, + { Year: "2013", Europe: 58, China: 47, USA: 38 }, + { Year: "2014", Europe: 40, China: 46, USA: 31 }, + { Year: "2015", Europe: 78, China: 50, USA: 19 }, + { Year: "2016", Europe: 13, China: 90, USA: 52 }, + { Year: "2017", Europe: 78, China: 132, USA: 50 }, + { Year: "2018", Europe: 40, China: 134, USA: 34 }, + { Year: "2019", Europe: 80, China: 96, USA: 38 } + ]; + + return data; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label class="options-label">Transition Type: </label> + <select [(ngModel)]="transitionInMode"> + <option>AccordionFromBottom</option> + <option>AccordionFromCategoryAxisMaximum</option> + <option>AccordionFromCategoryAxisMinimum</option> + <option>AccordionFromLeft</option> + <option>AccordionFromRight</option> + <option>AccordionFromTop</option> + <option>AccordionFromValueAxisMaximum</option> + <option>AccordionFromValueAxisMinimum</option> + <option>Expand</option> + <option>FromZero</option> + <option>SweepFromBottom</option> + <option>SweepFromCategoryAxisMaximum</option> + <option>SweepFromCategoryAxisMinimum</option> + <option>SweepFromCenter</option> + <option>SweepFromLeft</option> + <option>SweepFromRight</option> + <option>SweepFromTop</option> + <option>SweepFromValueAxisMaximum</option> + <option>SweepFromValueAxisMinimum</option> + <option>Auto</option> + </select> + <button (click)="onChangeAmountClicked()">Reload Chart</button> + <input class="options-slider" type="range" min="50" max="2000" step="50" + [value]="transitionInInterval" (change)="OnTransitionIntervalChange($event)" /> + <label class="options-label">{{transitionInInterval}}ms</label> + </div> + <div class="container"> + <igx-category-chart height="100%" + chartType="line" + [dataSource]="data" + isTransitionInEnabled="true" + [transitionInMode]="transitionInMode" + [transitionInDuration]="transitionInInterval" + yAxisLabelExtent="40" + computedPlotAreaMarginMode="series" + #chart> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Highlighting + +Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This features is enabled on all chart types. You can learn more about this feature in the [Chart Highlighting](features/chart-highlighting.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, AfterViewInit, ViewChild } from "@angular/core"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + public isItemHighlightingEnabled: boolean = false; + public isSeriesHighlightingEnabled: boolean = true; + public isCategoryHighlightingEnabled: boolean = false; + public highlightMode: string = "Auto"; + public highlightBehavior: string = "Auto"; + public legendHighlightMode: string = "Auto"; + public excludedProperties: any; + + public data = [ + { Month: "JAN", NewYork : 10.6, LosAngeles : 28.3 }, + { Month: "FEB", NewYork : 7.8, LosAngeles : 31.1 }, + { Month: "MAR", NewYork : 12.2, LosAngeles : 27.8 }, + { Month: "APR", NewYork : 11.7, LosAngeles : 33.9 }, + { Month: "MAY", NewYork : 19.4, LosAngeles : 35.0 }, + { Month: "JUN", NewYork : 23.3, LosAngeles : 36.7 }, + { Month: "JUL", NewYork : 27.2, LosAngeles : 33.3 }, + { Month: "AUG", NewYork : 25.6, LosAngeles : 36.7 }, + { Month: "SEP", NewYork : 22.8, LosAngeles : 43.9 }, + { Month: "OCT", NewYork : 17.8, LosAngeles : 38.3 }, + { Month: "NOV", NewYork : 17.8, LosAngeles : 32.8 }, + { Month: "DEC", NewYork : 8.3, LosAngeles : 28.9 } + ]; + + public OnEnableHighlightingChange = (e : any) => { + + const value = e.target.value; + + if(value=="Series"){ + this.isItemHighlightingEnabled = false; + this.isSeriesHighlightingEnabled = true; + this.isCategoryHighlightingEnabled = false; + } + else if(value == "Item") { + this.isItemHighlightingEnabled = true; + this.isSeriesHighlightingEnabled = false; + this.isCategoryHighlightingEnabled = false; + } + else if(value == "Category") { + this.isItemHighlightingEnabled = false; + this.isSeriesHighlightingEnabled = false; + this.isCategoryHighlightingEnabled = true; + } + else if(value=="None") { + this.isItemHighlightingEnabled = false; + this.isSeriesHighlightingEnabled = false; + this.isCategoryHighlightingEnabled = false; + } + } + + public ngAfterViewInit(): void { + } + + constructor() { } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <div class="options horizontal"> + <span style="margin-left: 0.25rem;">Highlight Target:</span> + <select (change)=OnEnableHighlightingChange($event) style="width: 7rem; margin-right: 1rem;"> + <option>Series</option> + <option>Item</option> + <option>Category</option> + <option>None</option> + </select> + <span>Mode:</span> + <select [(ngModel)]="highlightMode" style="width: 7rem; margin-right: 1rem;"> + <option>Auto</option> + <option>BrightenSpecific</option> + <option>Brighten</option> + <option>FadeOthersSpecific</option> + <option>FadeOthers</option> + <option>None</option> + </select> + <span>Behavior:</span> + <select [(ngModel)]="highlightBehavior" style="width: 7rem; margin-right: 1rem;"> + <option>Auto</option> + <option>DirectlyOver</option> + <option>NearestItems</option> + <option>NearestItemsRetainMainShapes</option> + <option>NearestItemsAndSeries</option> + </select> + <span>Legend:</span> + <select [(ngModel)]="legendHighlightMode" style="width: 7rem; margin-right: 1rem;"> + <option>Auto</option> + <option>None</option> + <option>MatchSeries</option> + </select> + </div> + <span id="legendTitle">Average Temperatures in the U.S. Cities</span> + <div class="legend" > + <igx-legend #legend orientation="Horizontal"></igx-legend> + </div> + + </div> + + + <div class="container"> + <igx-category-chart #chart height="100%" width="100%" + [legend]="legend" + [dataSource]="data" + chartType="Column" + [isCategoryHighlightingEnabled]="isCategoryHighlightingEnabled" + [isItemHighlightingEnabled]="isItemHighlightingEnabled" + [isSeriesHighlightingEnabled]="isSeriesHighlightingEnabled" + [legendHighlightingMode]="legendHighlightMode" + [highlightingMode]="highlightMode" + [highlightingBehavior]="highlightBehavior" + yAxisTitle="Temperatures in Celsius" + yAxisMinimumValue="0" + xAxisInterval="1"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Markers + +Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the [Chart Markers](features/chart-markers.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts'; +import { EnumUtil } from 'igniteui-angular-core'; +import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("chartTypeEditor", { static: true } ) + private chartTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("markerTypeEditor", { static: true } ) + private markerTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + + public editorChangeUpdateMarkerType({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + var item = sender as IgxPropertyEditorPropertyDescriptionComponent; + var chart = this.chart; + + var markerVal = item.primitiveValue; + chart.markerTypes = markerVal; + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="ChartType" + name="ChartTypeEditor" + #chartTypeEditor + label="Chart Type" + primitiveValue="Line"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="MarkerTypeHandler" + name="MarkerTypeEditor" + #markerTypeEditor + label="Marker Type" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownValues="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" + dropDownNames="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" + primitiveValue="Circle" + (changed)="this.editorChangeUpdateMarkerType($event)"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + isSeriesHighlightingEnabled="true" + chartType="Line" + [dataSource]="countryRenewableElectricity" + computedPlotAreaMarginMode="Series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Navigation + +You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the [Chart Navigation](features/chart-navigation.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartScatterCoreModule, IgxDataChartScatterModule, IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; +import { SampleScatterStats } from "./SampleScatterStats"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartScatterCoreModule, + IgxDataChartScatterModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartInteractivityModule +], + providers: [SampleScatterStats], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxBubbleSeriesComponent } from "igniteui-angular-charts"; +import { IgxSizeScaleComponent } from "igniteui-angular-charts"; +import { SampleScatterStats } from "./SampleScatterStats"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + public isZoomEnabled: boolean = true; + + public defaultInteraction: string = "DragZoom"; + public panModifier: string = "None"; + public zoomModifier: string = "None"; + + @ViewChild("xAxis", { static: true }) + public xAxis: IgxNumericXAxisComponent; + + @ViewChild("yAxis", { static: true }) + public yAxis: IgxNumericYAxisComponent; + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + + constructor() { + this.data = SampleScatterStats.getCountriesWithHighIncome(); + } + + public ngOnInit() { + this.createSeries(); + this.chart.actualWindowScaleHorizontal = 0.6; + this.chart.actualWindowScaleVertical = 0.6; + this.chart.actualWindowPositionVertical = 0.2; + this.chart.actualWindowPositionHorizontal = 0.2; + } + + public onPanUpClick() { + this.chart.actualWindowPositionVertical -= 0.05; + } + + public onPanDownClick() { + this.chart.actualWindowPositionVertical += 0.05; + } + + public onPanRightClick() { + this.chart.actualWindowPositionHorizontal += 0.05; + } + + public onPanLeftClick() { + this.chart.actualWindowPositionHorizontal -= 0.05; + } + + public createSeries() { + const sizeScale = new IgxSizeScaleComponent(); + sizeScale.minimumValue = 10; + sizeScale.maximumValue = 60; + + const series = new IgxBubbleSeriesComponent(); + series.title = "Countries"; + series.dataSource = SampleScatterStats.getCountries(); + series.showDefaultTooltip = true; + series.xMemberPath = "population"; + series.yMemberPath = "gdpTotal"; + series.radiusMemberPath = "gdpPerCapita"; + series.radiusScale = sizeScale; + series.xAxis = this.xAxis; + series.yAxis = this.yAxis; + + this.chart.series.clear(); + this.chart.series.add(series); + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <span class="options-item">Default Drag Option:</span> + <select [(ngModel)]="defaultInteraction"> + <option>DragZoom</option> + <option>DragPan</option> + <option>None</option> + </select> + <span class="options-item">Pan Modifier:</span> + <select [(ngModel)]="panModifier"> + <option>Alt</option> + <option>Control</option> + <option>Shift</option> + <option>Windows</option> + <option>Apple</option> + <option>None</option> + </select> + <span class="options-item">Zoom Modifier:</span> + <select [(ngModel)]="zoomModifier"> + <option>Alt</option> + <option>Control</option> + <option>Shift</option> + <option>Windows</option> + <option>Apple</option> + <option>None</option> + </select> + </div> + <div class="options horizontal"> + <label class="options-item"><input type="checkbox" [(ngModel)]="isZoomEnabled" /> Enable Zooming</label> + <button class="options-item" (click)="onPanUpClick()">Pan Up</button> + <button class="options-item" (click)="onPanDownClick()">Pan Down</button> + <button class="options-item" (click)="onPanLeftClick()">Pan Left</button> + <button class="options-item" (click)="onPanRightClick()">Pan Right</button> + </div> + + <div class="container"> + <igx-data-chart #chart [dataSource]="data" + width="100%" + height="100%" + [defaultInteraction]="defaultInteraction" + [dragModifier]="zoomModifier" + [panModifier]="panModifier" + [isHorizontalZoomEnabled]="isZoomEnabled" + [isVerticalZoomEnabled]="isZoomEnabled"> + + <igx-numeric-x-axis #xAxis + isLogarithmic=true + abbreviateLargeNumbers=true + title="Population"> + </igx-numeric-x-axis> + <igx-numeric-y-axis #yAxis + isLogarithmic=true + abbreviateLargeNumbers=true + title="Total GDP ($)"> + </igx-numeric-y-axis> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Overlays + +Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the [Chart Overlays](features/chart-overlays.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxValueOverlayModule, IgxLegendModule } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxValueOverlayModule, + IgxLegendModule +], + providers: [SharedData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any[]; + + constructor() { + this.initData(); + } + + public initData() { + this.data = [ + { Label: 1, Value: 1.0 }, + { Label: 2, Value: 2.0 }, + { Label: 3, Value: 6.0 }, + { Label: 4, Value: 8.0 }, + { Label: 5, Value: 2.0 }, + { Label: 6, Value: 6.0 }, + { Label: 7, Value: 4.0 }, + { Label: 8, Value: 2.0 }, + { Label: 9, Value: 1.0 } + ]; + } +} +``` +```html +<div class="container vertical"> + <igx-legend #legend orientation="horizontal"></igx-legend> + + <igx-data-chart #chart height="100%" width="100%" [dataSource]="data"> + <igx-category-x-axis #xAxis label="Label"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis minimumValue=0 maximumValue=10></igx-numeric-y-axis> + + <igx-column-series [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Value" showDefaultTooltip=true + markerType="None"></igx-column-series> + + <igx-value-overlay [axis]="yAxis" value=2.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=3.6 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=5.8 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=1.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=8.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=7.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=5.0 thickness=5></igx-value-overlay> + + </igx-data-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Performance + +Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the [Chart Performance](features/chart-performance.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { IgxSliderModule } from "igniteui-angular"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule, + IgxSliderModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core"; +import { IgxAssigningCategoryStyleEventArgs } from "igniteui-angular-charts"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; +import { IgxChartSeriesEventArgs } from "igniteui-angular-charts"; +import { IgxHorizontalAnchoredCategorySeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit, OnDestroy { + @Input() + public scalingRatio: number = 1; + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + private currValue: number = 15; + private currIndex: number = 0; + + private _maxPoints: number = 500000; + + private _refreshMilliseconds: number = 10; + private _interval: number = -1; + private _frames: number = 0; + private _time: Date; + private _assigningData: boolean = false; + private _data: any[]; + + constructor(private _zone: NgZone) { + this._data = this.generateData(); + } + + public onGenerateDataClicked() { + this._data = this.generateData(); + } + + public onAssignDataClicked() { + this._time = new Date(); + this._assigningData = true; + this.chart.dataSource = this._data; + } + + public onMaxPointsChanged(e: any) { + let num: number = parseInt(e.target.value, 10); + if (isNaN(num)) { + num = 5000; + } + if (num < 5000) { + num = 5000; + } + if (num > 2000000) { + num = 2000000; + } + this.maxPoints = num; + } + + public get maxPointsText(): string { + return this.toShortString(this._maxPoints); + } + + public get maxPoints(): number { + return this._maxPoints; + } + @Input() + public set maxPoints(v: number) { + this._maxPoints = v; + } + + public ngOnDestroy(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + } + + public ngAfterViewInit(): void { + this.chart.seriesAdded.subscribe((args: { sender: any, args: IgxChartSeriesEventArgs }) => { + const cat = args.args.series as IgxHorizontalAnchoredCategorySeriesComponent; + cat.isCustomCategoryStyleAllowed = true; + cat.assigningCategoryStyle.subscribe((event: { sender: any, args: IgxAssigningCategoryStyleEventArgs }) => { + if (this._assigningData) { + this._assigningData = false; + + this._zone.runOutsideAngular(() => { + window.setTimeout(() => {}, 0); + }); + } + }); + }); + + this.chart.seriesRemoved.subscribe((event: { sender: any, args: IgxChartSeriesEventArgs }) => { + const cat = event.args.series as IgxHorizontalAnchoredCategorySeriesComponent; + cat.isCustomCategoryStyleAllowed = false; + cat.assigningCategoryStyle.unsubscribe(); + }); + + this.chart.dataSource = this._data; + } + + private generateData(): any[] { + const data: any[] = []; + for (this.currIndex = 0; this.currIndex <= this.maxPoints; this.currIndex++) { + this.currValue += Math.random() * 4.0 - 2.0; + const label = this.toShortString(this.currIndex); + data.push({ Label: label, Value: this.currValue }); + } + return data; + } + + private toShortString(largeValue: number): string { + let roundValue: number; + + if (largeValue >= 1000000) { + roundValue = Math.round(largeValue / 100000) / 10; + return roundValue + "m"; + } + if (largeValue >= 1000) { + roundValue = Math.round(largeValue / 100) / 10; + return roundValue + "k"; + } + + roundValue = Math.round(largeValue); + return roundValue + ""; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <button (click)="onGenerateDataClicked()">Generate Data</button> + <button (click)="onAssignDataClicked()">AssignData</button> + + <label class="options-label">Data amount: {{ maxPointsText }}</label> + <input class="options-slider" type="range" id="slider" min="5000" max="2000000" step="1000" [value]="maxPoints" + (input)="onMaxPointsChanged($event)"/> + </div> + <div class="container"> + <igx-category-chart height="100%" yAxisLabelExtent="40" + markerTypes="None" + toolTipType="Default" + xAxisEnhancedIntervalPreferMoreCategoryLabels="false" + shouldAutoExpandMarginForInitialLabels="false" + crosshairsDisplayMode="None" + #chart> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Tooltips + +Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the [Chart Tooltips](features/chart-tooltips.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("toolTipTypeEditor", { static: true } ) + private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="ToolTipType" + name="ToolTipTypeEditor" + #toolTipTypeEditor + label="ToolTip Type: " + primitiveValue="Data"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [legend]="legend" + [dataSource]="highestGrossingMovies" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsSnapToData="true"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Trendlines + +Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the Angular chart, such as CubicFit and LinearFit. You can learn more about this feature in the [Chart Trendlines](features/chart-trendlines.md) topic. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [FinancialDataService], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any; + public trendlineType = "CubicFit"; + + constructor(private dataService: FinancialDataService) { + this.data = [this.dataService.getMsft()]; + } + + public OnTrendlineTypeChanged(e: any) { + this.trendlineType = e.target.value; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label class="options-label">Annotations: </label> + <label class="options-item"> + <select (change)="OnTrendlineTypeChanged($event)"> + <option>CubicFit</option> + <option>LinearFit</option> + <option>QuinticFit</option> + <option>QuarticFit</option> + <option>ExponentialFit</option> + <option>PowerLawFit</option> + <option>LogarithmicFit</option> + <option>CumulativeAverage</option> + <option>ExponentialAverage</option> + <option>SimpleAverage</option> + <option>ModifiedAverage</option> + <option>WeightedAverage</option> + <option>None</option> + </select> + </label> + </div> + <div class="options vertical" > + <label id="legendTitle">Microsoft Stock Trend </label> + </div> + + <div class="container"> + <igx-financial-chart width="100%" + height="100%" + chartType=Bar + thickness=2 + [dataSource]="data" + [trendLineType]="trendlineType" + trendLineThickness=2 + trendLinePeriod=10 + trendLineBrushes="rgba(0, 101, 209, 1)" + zoomSliderType="None" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## API References + +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md new file mode 100644 index 000000000..53163f26a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md @@ -0,0 +1,2277 @@ +--- +title: Angular Charts & Graphs Library | Ignite UI for Angular +_description: Ignite UI for Angular Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts for your web and mobile apps. Try for FREE. +_keywords: Angular Charts, Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "XamDataChart", "CategoryChartType"] +_tocName: Charts +--- + +# Angular Charts & Graphs Overview + +Ignite UI for Angular Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your web and mobile apps. Built for speed and beauty, designed to work on every modern browser, and with complete touch and interactivity, you can quickly and easily build responsive visuals into your next app on any device. + +The Ignite UI for Angular Charts support over 65 types of series and combinations that let you visualize any type of data, including Category Series, Financial Series, Polar Series, Radial Series, Range Series, Scatter Series, Shape Series, and Geospatial Series. No matter the type of comparison you are doing, or what type of data story you are trying to tell, you can represent your data in any of these ways: + +- Change Over Time +- Comparison +- Correlation +- Distribution +- Geospatial +- Overview + Detail +- Part to Whole +- Ranking + +Power your most demanding visualizations with Infragistics Angular charting! + +## Angular Chart and Graph Types + +The Angular product has over 65 different chart and graph types for any scenario – from a single chart display to an interactive dashboard. You can create Angular charts like Pie, Bar, Area, Line, Point, Stacked, Donut, Scatter, Gauge, Polar, Treemap, Stock, Financial, Geospatial Maps and more for your mobile or web apps. The benefit of our Angular chart vs. others is full support for features like: + +- Responsive Web Design built in +- Interactive Panning and Zooming with Mouse, Keyboard and Touch +- Full Control of Chart Animation +- Chart Drill-Down Events +- Real-Time Streaming Support +- High-Volume (Millions of Data Points) Support +- Trends Lines and other Data Analysis features + Built with a modular design of axis, markers, series, legend, and annotation layers, the Angular chart makes it easy to design a render any type of data story. Build a simple chart with a single data series, or build more complex data stories with multiple series of data, with multiple axis in composite views. + +## Category and Financial Chart vs. Data Chart + +The Angular Category and Financial Chart is what we refer to as our domain specific charts. It's a wrapper around Angular Data Chart that assumes your domain is a category, or financial price series. + +Choosing these specific domain charts allows to simplify the API and draw a lot of interfaces about the data to automatically configure the chart scenario, all without needing to explicitly define attributes such as axes, series, and annotations. In contrast, the data chart is very explicit and every critical part of the chart needs to be defined. + +Domain charts are using a data chart at its core; so the same performance optimizations apply to both. The difference lies in whether they are trying to make things very easy to specify for the developer, or to be as flexible as possible. Angular Data Chart is more verbose, unlocking all of our charting capabilities you need, allowing you to mix and match of any number of series, axes or annotation for example. For the category and financial charts, there might be a situation that cannot be easily done that the data chart is more suited for, such as a series with a scatter series with a numeric x axis. + +It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using Angular Data Chart, such as presenting something other than what is covered by the category chart's [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the Angular Financial Chart covers only column, OHLC bar, candlestick, and line series types. + +We make Angular Category and Financial Chart easier to use, the good news you can always switch to data chart in the future. + +### Angular Bar Chart + +The Angular Bar Chart, or Bar Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Learn more about our [bar chart](types/bar-chart.md) + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartVerticalCategoryModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("categoryHighlightLayer", { static: true } ) + private categoryHighlightLayer: IgxCategoryHighlightLayerComponent + @ViewChild("barSeries1", { static: true } ) + private barSeries1: IgxBarSeriesComponent + @ViewChild("barSeries2", { static: true } ) + private barSeries2: IgxBarSeriesComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="Chart" + #chart + [legend]="legend"> + <igx-category-y-axis + name="yAxis" + #yAxis + label="franchise" + useEnhancedIntervalManagement="true" + enhancedIntervalPreferMoreCategoryLabels="true" + [dataSource]="highestGrossingMovies" + isInverted="true" + gap="0.5" + overlap="-0.1"> + </igx-category-y-axis> + <igx-numeric-x-axis + name="xAxis" + #xAxis + title="Billions of U.S. Dollars"> + </igx-numeric-x-axis> + <igx-category-highlight-layer + name="CategoryHighlightLayer" + #categoryHighlightLayer> + </igx-category-highlight-layer> + <igx-bar-series + name="BarSeries1" + #barSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + title="Total Revenue of Franchise" + valueMemberPath="totalRevenue" + [dataSource]="highestGrossingMovies" + showDefaultTooltip="true" + isTransitionInEnabled="true" + isHighlightingEnabled="true"> + </igx-bar-series> + <igx-bar-series + name="BarSeries2" + #barSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + title="Highest Grossing Movie in Series" + valueMemberPath="highestGrossing" + [dataSource]="highestGrossingMovies" + showDefaultTooltip="true" + isTransitionInEnabled="true" + isHighlightingEnabled="true"> + </igx-bar-series> + <igx-data-tool-tip-layer + name="Tooltips" + #tooltips> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Pie Chart + +The Angular Pie Chart, or Pie Graph, is a very common part-to-whole chart type. Part-to-whole charts show how categories (parts) of a data set add up to a total (whole) value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed. A pie chart renders data values as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. The total values represented by the pie slices represent a whole value, like 100 or 100%. Pie charts are perfect for small data sets and are easy to read at a quick glance. Learn more about our [pie chart](types/pie-chart.md) + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxItemLegendModule, IgxPieChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxItemLegendModule, + IgxPieChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Global Electricity Demand by Energy Use + </div> + <div class="legend"> + <igx-item-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-item-legend> + </div> + <div class="container fill"> + <igx-pie-chart + name="chart" + #chart + legendLabelMemberPath="category" + labelMemberPath="summary" + labelsPosition="BestFit" + valueMemberPath="value" + radiusFactor="0.7" + [dataSource]="energyGlobalDemand" + [legend]="legend"> + </igx-pie-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Line Chart + +The Angular Line Chart, or Line Graph is a type of category line graph shows the continuous data values represented by points connected by straight line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. Learn more about our [line chart](types/line-chart.md) + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Line" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + [legend]="legend" + yAxisTitle="TWh" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + computedPlotAreaMarginMode="Series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Donut Chart + +The Angular Donut Chart or Donut Graph, is a variant of a Pie Chart, proportionally illustrating the occurrences of a variable in a circle to represents parts of a whole. The donut chart has a circular opening at the center of the pie chart, where a title or category explanation can be displayed. Donut charts can support multiple concentric rings, with built-in support for visualizing hierarchical data. Learn more about our [Donut chart](types/donut-chart.md) + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxItemLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxItemLegendModule, + IgxDoughnutChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDoughnutChartComponent + @ViewChild("series", { static: true } ) + private series: IgxRingSeriesComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Global Electricity Demand by Energy Use + </div> + <div class="legend"> + <igx-item-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-item-legend> + </div> + <div class="container fill"> + <igx-doughnut-chart + name="chart" + #chart + allowSliceExplosion="true"> + <igx-ring-series + name="series" + #series + labelMemberPath="summary" + labelsPosition="OutsideEnd" + labelExtent="30" + valueMemberPath="value" + legendLabelMemberPath="category" + outlines="white" + radiusFactor="0.6" + startAngle="30" + [dataSource]="energyGlobalDemand" + [legend]="legend"> + </igx-ring-series> + </igx-doughnut-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Area Chart + +The Angular Area Chart is rendered using a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). Area Charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Learn more about our [area chart](types/area-chart.md) + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Area" + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + [legend]="legend" + yAxisTitle="TWh" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + computedPlotAreaMarginMode="Series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Sparkline Chart + +The Angular Sparkline Chart, or Sparkline Graph is a type of category graph intended for rendering within a small-scale layout such as within a grid cell, or anywhere a word-sized visualization is needed to tell a data story. Like other Angular chart types, the Sparkline Chart has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. Sparkline charts can render as a Line Chart, Area Chart, Column Chart or Win / Loss Chart. The difference between the full-sized chart equivalent to the Spark-chart, is the Y-Axis (left side labels) and X-Axis (bottom labels) are not visible. Learn more about our [sparkline chart](types/sparkline-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxSparklineModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxSparklineComponent } from "igniteui-angular-charts"; +import { SparklineDisplayType } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any[]; + + @ViewChild("sparkline", { static: true }) + public sparkline: IgxSparklineComponent; + + constructor() { + this.data = SharedData.getSharedData(); + } + + public onDisplayTypeChanged(e: any) { + const selection = e.target.value.toString(); + + switch (selection) { + case "Area": { + this.sparkline.displayType = SparklineDisplayType.Area; + break; + } + case "Column": { + this.sparkline.displayType = SparklineDisplayType.Column; + break; + } + case "Line": { + this.sparkline.displayType = SparklineDisplayType.Line; + break; + } + case "WinLoss": { + this.sparkline.displayType = SparklineDisplayType.WinLoss; + break; + } + } + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <span class="options-item">Display Type:</span> + <select (change)="onDisplayTypeChanged($event)"> + <option>Area</option> + <option>Column</option> + <option>Line</option> + <option>WinLoss</option> + </select> + </div> + <div class="container"> + <igx-sparkline #sparkline height="100%" width="100%" + [dataSource]="data" + valueMemberPath="Value" + displayType="Area"></igx-sparkline> + </div> +</div > +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Bubble Chart + +The Angular Bubble Chart, or Bubble Graph, is used to show data comprising of three numeric values. Two of the values are plotted as an intersecting point using a Cartesian (X, Y) coordinate system, and the third value is rendered as the diameter size of the point. This gives the Bubble Chart its name - a visualization of varying sized bubbles along the X and Y coordinates of the plot. The Angular Bubble Chart is used to show relationships of data correlations with the data value differences rendered by size. You can also use a fourth data dimension, typically color, to further differentiate the values in your Bubble chart. Learn more about our [bubble chart](types/bubble-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica'; +import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("bubbleSeries1", { static: true } ) + private bubbleSeries1: IgxBubbleSeriesComponent + private _sizeScale1: IgxSizeScaleComponent | null = null; + public get sizeScale1(): IgxSizeScaleComponent { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgxSizeScaleComponent(); + sizeScale1.isLogarithmic = false; + sizeScale1.minimumValue = 10; + sizeScale1.maximumValue = 80; + + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + @ViewChild("bubbleSeries2", { static: true } ) + private bubbleSeries2: IgxBubbleSeriesComponent + private _sizeScale2: IgxSizeScaleComponent | null = null; + public get sizeScale2(): IgxSizeScaleComponent { + if (this._sizeScale2 == null) + { + var sizeScale2 = new IgxSizeScaleComponent(); + sizeScale2.isLogarithmic = false; + sizeScale2.minimumValue = 10; + sizeScale2.maximumValue = 80; + + this._sizeScale2 = sizeScale2; + } + return this._sizeScale2; + } + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _countryStatsAfrica: CountryStatsAfrica = null; + public get countryStatsAfrica(): CountryStatsAfrica { + if (this._countryStatsAfrica == null) + { + this._countryStatsAfrica = new CountryStatsAfrica(); + } + return this._countryStatsAfrica; + } + + private _countryStatsEurope: CountryStatsEurope = null; + public get countryStatsEurope(): CountryStatsEurope { + if (this._countryStatsEurope == null) + { + this._countryStatsEurope = new CountryStatsEurope(); + } + return this._countryStatsEurope; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Total Population of Selected Countries + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend"> + <igx-numeric-x-axis + name="xAxis" + #xAxis + isLogarithmic="true" + abbreviateLargeNumbers="true" + title="Population"> + </igx-numeric-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + title="GDP per Capita" + maximumValue="1000000" + titleLeftMargin="10" + isLogarithmic="true" + abbreviateLargeNumbers="true"> + </igx-numeric-y-axis> + <igx-bubble-series + name="bubbleSeries1" + #bubbleSeries1 + title="African Countries" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="population" + yMemberPath="gDP" + radiusMemberPath="workedHours" + xMemberAsLegendLabel="Population" + yMemberAsLegendLabel="GDP" + radiusMemberAsLegendLabel="Work Hours" + [dataSource]="countryStatsAfrica" + markerType="Circle" + showDefaultTooltip="true" + [radiusScale]="sizeScale1"> + </igx-bubble-series> + <igx-bubble-series + name="bubbleSeries2" + #bubbleSeries2 + title="European Countries" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="population" + yMemberPath="gDP" + radiusMemberPath="workedHours" + xMemberAsLegendLabel="Population" + yMemberAsLegendLabel="GDP" + radiusMemberAsLegendLabel="Work Hours" + [dataSource]="countryStatsEurope" + markerType="Circle" + showDefaultTooltip="true" + [radiusScale]="sizeScale2"> + </igx-bubble-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer + valueRowMarginTop="1" + labelTextMarginTop="1" + titleTextMarginTop="1" + unitsTextMarginTop="1" + valueRowMarginBottom="1" + labelTextMarginBottom="1" + titleTextMarginBottom="1" + unitsTextMarginBottom="1" + unitsTextMarginRight="5" + valueTextMarginLeft="10" + labelTextMarginLeft="1" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Financial / Stock Chart + +The Angular Financial or Stock Chart, is a composite visualization that renders stock data and financial data in a time-series chart that includes interactive visual elements in a toolbar like day / week / month filters, chart type selection, volume type selection, indicators selection and trends lines selection. Designed for customization, the Angular Stock Chart can be customized in any way to give an easier visualization and interpretation of your data. The financial chart renders the date-time data along the X-Axis (bottom labels) and shows fields like Open, High, Low and Close volumes. The type of chart to render the Time-Series data can be Bar, Candle, Column, or Line. Learn more about our [stock chart](types/stock-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ FinancialDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + public data: any; + constructor(private dataService: FinancialDataService) { + this.data = [ this.dataService.getGoog(), this.dataService.getMsft() ]; + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical" > + <label id="legendTitle">Stock Changes: Microsoft vs Google </label> + </div> + + <igx-financial-chart height="100%" width="100%" + [dataSource]="data" + chartType="line" + thickness=2 + yAxisMode="PercentChange" + yAxisTitle="Percent Changed"> + </igx-financial-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Column Chart + +The Angular Column Chart, or Column Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by vertical bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the top to bottom of the chart towards the values of data points. Learn more about our [column chart](types/column-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="highestGrossingMovies" + [legend]="legend" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + isCategoryHighlightingEnabled="false" + crosshairsDisplayMode="None"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Composite Chart + +The Angular Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis. Learn more about our [composite chart](types/composite-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxCalloutLayerModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxNumberAbbreviatorModule, IgxDataChartCategoryCoreModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxLegendModule, + IgxCalloutLayerModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxNumberAbbreviatorModule, +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public formatNumber(num: number): string { + var ret = num; + if (num >= 1000000) return (num / 1000000.0).toFixed(1) + "M"; + if (num >= 1000) return (num / 1000.0).toFixed(1) + "K"; + + return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + + ngOnInit(): void { + + this.data = [ + { Date: "Jan 1, 2019", Revenue: 16914, Expenses: 10183 }, + { Date: "Mar 1, 2019", Revenue: 15077, Expenses: 12813 }, + { Date: "Jun 1, 2019", Revenue: 16886, Expenses: 14476 }, + { Date: "Sep 1, 2019", Revenue: 17652, Expenses: 11705 }, + { Date: "Jan 1, 2020", Revenue: 21082, Expenses: 14044 }, + { Date: "Mar 1, 2020", Revenue: 17737, Expenses: 12803 }, + { Date: "Jun 1, 2020", Revenue: 18687, Expenses: 13677 }, + { Date: "Sep 1, 2020", Revenue: 21470, Expenses: 13717 }, + { Date: "Jan 1, 2021", Revenue: 28072, Expenses: 17133 } + ]; + + for (let i = 0; i < this.data.length; i++) { + const item = this.data[i]; + + item.Revenue = item.Revenue * 1000; + item.Expenses = item.Expenses * 1000; + + item.Income = item.Revenue - item.Expenses; + item.IncomePerRevenue = (item.Income / item.Revenue) * 100; + + // calculating x-offset for callouts + item.RevenueX = i; + item.ExpensesX = i + 0.5; + + // formatting values for callouts + item.FormattedRevenue = "$" + this.formatNumber(item.Revenue); + item.FormattedIncome = "$" + this.formatNumber(item.Income); + item.FormattedExpenses = "$" + this.formatNumber(item.Expenses); + item.FormattedProfit = item.IncomePerRevenue + "%"; + } + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <span id="legendTitle">Facebook Statement of Income 2019-2020</span> + <div class="legend"> + <igx-legend #legend orientation="horizontal"></igx-legend> + </div> + </div> + <div class="container"> + <igx-data-chart height="100%" width="100%" [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" [dataSource]="data"> + + <igx-category-x-axis #xAxis label="Date" overlap="0" gap="0.1" useClusteringMode="true"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis1 abbreviateLargeNumbers="true" title="In Millions of U.S. Dollars" + titleLeftMargin="5" titleRightMargin="0" + minimumValue="0" maximumValue="30000000"> + </igx-numeric-y-axis> + <igx-numeric-y-axis #yAxis2 abbreviateLargeNumbers="true" title="Percentage" majorStrokeThickness="0" + minimumValue="0" maximumValue="160" labelLocation="OutsideRight" + labelHorizontalAlignment="Left"> + </igx-numeric-y-axis> + + <igx-column-series #revenueSeries [xAxis]="xAxis" [yAxis]="yAxis1" + valueMemberPath="Revenue" + title="Revenue" markerType="Hidden"> + </igx-column-series> + <igx-column-series #expenseSeries [xAxis]="xAxis" [yAxis]="yAxis1" + valueMemberPath="Expenses" + title="Expenses" markerType="Hidden"> + </igx-column-series> + + <igx-spline-area-series #incomeSeries [xAxis]="xAxis" [yAxis]="yAxis2" + valueMemberPath="IncomePerRevenue" + title="Income / Revenue %" markerType="Circle"> + </igx-spline-area-series> + + <igx-callout-layer isAutoCalloutBehaviorEnabled="false" [targetSeries]="revenueSeries" + useValueForAutoCalloutLabels="false" + calloutLeaderBrush="Transparent" calloutTextColor="Black" + calloutBackground = "Transparent" calloutPositionPadding="-5" + xMemberPath="RevenueX" yMemberPath="Revenue" labelMemberPath="FormattedRevenue"> + </igx-callout-layer> + + <igx-callout-layer isAutoCalloutBehaviorEnabled="false" [targetSeries]="expenseSeries" + useValueForAutoCalloutLabels="false" + calloutLeaderBrush="Transparent" calloutTextColor="Black" + calloutBackground="Transparent" xMemberPath="ExpensesX" yMemberPath="Expenses" + labelMemberPath="FormattedExpenses" calloutPositionPadding="-5"> + </igx-callout-layer> + + <igx-callout-layer isAutoCalloutBehaviorEnabled="true" [targetSeries]="incomeSeries" + useValueForAutoCalloutLabels="true" calloutLeaderBrush="Transparent" calloutTextColor="Black" + calloutBackground = "LightGray" autoCalloutLabelPrecision="1"> + </igx-callout-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +<!-- ### Angular Gantt Chart + +The Angular Gantt Chart is a type of bar chart, that visualizes various categories into time series. Gantt charts illustrate the start and finish time in time period blocks. It is often used in project management as one of the most popular and useful ways of showing activities (tasks or events) displayed against time. On the left of the chart is a list of the activities and along the top is a suitable time scale. Each activity is represented by a bar; the position and length of the bar reflects the start date, duration and end date of the activity. Learn more about our [gantt chart](types/gantt-chart.md). --> + +<!-- ### Angular Network Chart + +The Angular Network Chart, also called Network Graph or Polyline Chart, visualizes complex relationships between a large amount of elements. This visualization displays undirected and directed graph structures. It also shows relationships between entities that are displayed as round nodes and lines show the relationships between them. Learn more about our [network chart](types/network-chart.md). --> + +### Angular Polar Chart + +The Angular Polar Area Chart or Polar Graph belongs to a group of polar charts and has a shape of a filled polygon which vertices or corners are located at the polar (angle/radius) coordinates of data points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Chart but wraps data points around a circle rather than stretching them horizontally. Like with other series types, multiple Polar Area Charts can be plotted in the same data chart and they can be overlaid on each other to show differences and similarities between data sets. Learn more about our [polar chart](types/polar-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarLineSeries1", { static: true } ) + private polarLineSeries1: IgxPolarLineSeriesComponent + @ViewChild("polarLineSeries2", { static: true } ) + private polarLineSeries2: IgxPolarLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Wind Speed vs Boat Speed + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + <igx-numeric-angle-axis + name="angleAxis" + #angleAxis + startAngleOffset="-90" + interval="30" + minimumValue="0" + maximumValue="360"> + </igx-numeric-angle-axis> + <igx-numeric-radius-axis + name="radiusAxis" + #radiusAxis + radiusExtentScale="0.9" + innerRadiusExtentScale="0.1" + interval="25" + minimumValue="0" + maximumValue="100"> + </igx-numeric-radius-axis> + <igx-polar-line-series + name="PolarLineSeries1" + #polarLineSeries1 + [dataSource]="boatSailingData" + [angleAxis]="angleAxis" + [radiusAxis]="radiusAxis" + angleMemberPath="direction" + radiusMemberPath="windSpeed" + showDefaultTooltip="false" + thickness="1" + title="Wind Speed" + markerType="Circle"> + </igx-polar-line-series> + <igx-polar-line-series + name="PolarLineSeries2" + #polarLineSeries2 + [dataSource]="boatSailingData" + [angleAxis]="angleAxis" + [radiusAxis]="radiusAxis" + angleMemberPath="direction" + radiusMemberPath="boatSpeed" + showDefaultTooltip="false" + thickness="1" + title="Boat Speed" + markerType="Circle"> + </igx-polar-line-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +<!-- ### Angular Pyramid Chart + +The Angular Pyramid Chart, also called an age pyramid or population pyramid, is a graphical illustration that shows distribution of various age groups in a population, which forms the shape of a pyramid when the population is growing. It is also used in ecology to determine the overall age distribution of a population; an indication of the reproductive capabilities and likelihood of the continuation of a species. Learn more about our [pyramid chart](types/pyramid-chart.md). --> + +### Angular Scatter Chart + +The Angular Scatter Chart, or Scatter Graph, is used to show the relationship between two values using a Cartesian (X, Y) coordinate system to plot data. Each data point is rendered as the intersecting point of the data value on the X and Y Axis. Scatter charts draw attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The Angular Scatter chart organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis. Learn more about our [scatter chart](types/scatter-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope'; +import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("scatterSeries1", { static: true } ) + private scatterSeries1: IgxScatterSeriesComponent + @ViewChild("scatterSeries2", { static: true } ) + private scatterSeries2: IgxScatterSeriesComponent + private _countryDemographicEurope: CountryDemographicEurope = null; + public get countryDemographicEurope(): CountryDemographicEurope { + if (this._countryDemographicEurope == null) + { + this._countryDemographicEurope = new CountryDemographicEurope(); + } + return this._countryDemographicEurope; + } + + private _countryDemographicAfrican: CountryDemographicAfrican = null; + public get countryDemographicAfrican(): CountryDemographicAfrican { + if (this._countryDemographicAfrican == null) + { + this._countryDemographicAfrican = new CountryDemographicAfrican(); + } + return this._countryDemographicAfrican; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Population Statistics for Selected Continents + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend"> + <igx-numeric-x-axis + name="xAxis" + #xAxis + title="Death Rate (per 1,000 people)" + minimumValue="5" + maximumValue="15"> + </igx-numeric-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + title="Birth Rate (per 1,000 people)" + minimumValue="0" + maximumValue="50" + interval="10"> + </igx-numeric-y-axis> + <igx-scatter-series + name="scatterSeries1" + #scatterSeries1 + title="Europe" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="deathRate" + yMemberPath="birthRate" + [dataSource]="countryDemographicEurope" + markerType="Circle" + showDefaultTooltip="true"> + </igx-scatter-series> + <igx-scatter-series + name="scatterSeries2" + #scatterSeries2 + title="Africa" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="deathRate" + yMemberPath="birthRate" + [dataSource]="countryDemographicAfrican" + markerType="Circle" + showDefaultTooltip="true"> + </igx-scatter-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Shape Chart + +The Angular Shape Charts is a group of chart that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings. Learn more about our [shape chart](types/shape-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartShapeModule, IgxDataChartShapeCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartShapeModule, + IgxDataChartShapeCoreModule, + IgxLegendModule, + IgxDataChartInteractivityModule, + IgxDataChartScatterModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxStyleShapeEventArgs } from "igniteui-angular-charts"; +import { IgxScatterPolygonSeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild('airplaneShapeSeries', { static: true }) + public airplaneShapeSeries: IgxScatterPolygonSeriesComponent; + + @ViewChild('airplaneSeatSeries', { static: true }) + public airplaneSeatSeries: IgxScatterPolygonSeriesComponent; + + @ViewChild('seatTooltip', { static: true }) + public seatTooltip: TemplateRef<object>; + + constructor() { + } + + public ngAfterViewInit() { + + fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json') + .then((response) => response.json()) + .then((data) => this.onLoadedJsonShape(data)); + + fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json') + .then((response) => response.json()) + .then((data) => this.onLoadedJsonSeats(data)); + } + + public onLoadedJsonShape(jsonData: any[]) { + // console.log('airplane-shape.json ' + jsonData.length); + this.airplaneShapeSeries.dataSource = jsonData; + } + + public onLoadedJsonSeats(jsonData: any[]) { + // console.log('airplane-seats.json ' + jsonData.length); + this.airplaneSeatSeries.dataSource = jsonData; + this.airplaneSeatSeries.showDefaultTooltip = true; + this.airplaneSeatSeries.tooltipTemplate = this.seatTooltip; + } + + public onStylingShape(ev: { sender: any, args: IgxStyleShapeEventArgs }) { + + ev.args.shapeOpacity = 1.0; + ev.args.shapeStrokeThickness = 0.5; + ev.args.shapeStroke = 'Black'; + + const itemRecord = ev.args.item as any; + if (itemRecord.class === 'First') { + ev.args.shapeFill = 'DodgerBlue'; + } + if (itemRecord.class === 'Business') { + ev.args.shapeFill = 'LimeGreen'; + } + if (itemRecord.class === 'Premium') { + ev.args.shapeFill = 'Orange'; + } + if (itemRecord.class === 'Economy') { + ev.args.shapeFill = 'Red'; + } + + if (itemRecord.status === 'Sold') { + ev.args.shapeFill = 'Gray'; + } + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <label id="legendTitle">Airplane Seating Chart (Polygons)</label> + </div> + + <div class="custom-legend"> + <div><span style="background: DodgerBlue; "></span><label>First Class</label></div> + <div><span style="background: LimeGreen; "></span><label>Business Class</label></div> + <div><span style="background: Orange; "></span><label>Premium Class</label></div> + <div><span style="background: Red; "></span><label>Economy Class</label></div> + <div><span style="background: Gray; "></span><label>Sold Seat</label> </div> + <div><span style="background: LightGray; "></span><label>Airplane</label> </div> + </div> + + <div class="container"> + <igx-data-chart isHorizontalZoomEnabled="true" isVerticalZoomEnabled="true" + width="100%" + height="100%"> + <igx-numeric-x-axis #xAxis name="xAxis" minimumValue="-1000" maximumValue="1000" interval="200"></igx-numeric-x-axis> + <igx-numeric-y-axis #yAxis name="yAxis" minimumValue="-600" maximumValue="600" interval="200"></igx-numeric-y-axis> + + <igx-scatter-polygon-series name="airplaneShapeSeries" #airplaneShapeSeries + [xAxis]="xAxis" + [yAxis]="yAxis" shapeMemberPath="points" thickness="0.5" + title="Airplane Shape" brush="LightGray" outline="Black"> + </igx-scatter-polygon-series> + + <igx-scatter-polygon-series name="airplaneSeatSeries" #airplaneSeatSeries + [xAxis]="xAxis" + [yAxis]="yAxis" shapeMemberPath="points" thickness="0.5" + title="Airplane Seats" + (styleShape)="onStylingShape($event)"> + </igx-scatter-polygon-series> + + </igx-data-chart> + </div> + + <div class="options horizontal"> + <div><span style="background: dodgerblue; "></span><label>First Class</label></div> + <div><span style="background: LimeGreen; "></span><label>Business Class</label></div> + <div><span style="background: Orange; "></span><label>Premium Class</label></div> + <div><span style="background: red; "></span><label>Economy Class</label></div> + <div><span style="background: gray; "></span><label>Sold Seat</label> </div> + </div> +</div> + +<ng-template let-series="series" let-item="item" #seatTooltip> + <div> + <span>{{item.class}} Class</span> + <br /> + <span>Seat: {{item.seat}}</span> + <br /> + <span>Price: ${{item.price}}</span> + <br /> + <span>Status: {{item.status}}</span> + </div> +</ng-template> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Spline Chart + +The Angular Spline Chart, or Spline Graph is a type of category line graph shows the continuous data values represented by points connected by smooth line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. The Angular Spline chart is identical to the Angular Spline chart, the only different being the line chart is points connected by straight lines, and the spline chart points are connected by smooth curves. Learn more about our [spline chart](types/spline-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Spline" + [dataSource]="countryRenewableElectricity" + [legend]="legend" + yAxisTitle="TWh" + isTransitionInEnabled="true" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + computedPlotAreaMarginMode="Series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Angular Step Chart + +The Angular Step Chart, or Step Graph, is a category charts that renders a collection of data points connected by continuous vertical and horizontal lines forming a step-like progression. Values are represented on the Y-Axis (left labels) and categories are displayed on the X-Axis (bottom labels). The Angular Step Line chart emphasizes the amount of change over a period of time or compares multiple items. The Angular Step Line chart is identical to the Angular Step Area Chart in all aspects except that the area below the step lines is not filled in. Learn more about our [step chart](types/step-chart.md) + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [legend]="legend" + chartType="StepLine" + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + isCategoryHighlightingEnabled="false" + isSeriesHighlightingEnabled="true" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisInterval="1" + yAxisTitle="TWh" + crosshairsSnapToData="true"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +<!-- ### Angular Timeline / Time-Series Charts + +A Time-Series Chart, or Timeline Graph, is a visualization that treats the data as a sequence of category data items that are sorted by then rendered by date. Labels on this axis are placed along the X-Axis (bottom Axis), according to the date-time value. The Angular Time-Series is use to show Financial Series, Range Series, and Category Series (Line, Area, Column, Point, Spline, Scatter, Waterfall and the Stacked equivalents of those chart types). The Time-Series also supports the ability to exclude intervals of data with breaks. As a result, labels will not appear at the excluded interval. For example, working/non-working days, holidays, or weekends. --> + +### Angular Treemap + +The Ignite UI for Angular Treemap displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node's rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data. Learn more about our [treemaps](types/treemap-chart.md). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxTreemapModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxTreemapModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData'; +import { IgxTreemapComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("treemap", { static: true } ) + private treemap: IgxTreemapComponent + private _countyHierarchicalData: CountyHierarchicalData = null; + public get countyHierarchicalData(): CountyHierarchicalData { + if (this._countyHierarchicalData == null) + { + this._countyHierarchicalData = new CountyHierarchicalData(); + } + return this._countyHierarchicalData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Comparing Population of Countries + </div> + <div class="container fill"> + <igx-treemap + name="treemap" + #treemap + [dataSource]="countyHierarchicalData" + parentIdMemberPath="parent" + idMemberPath="name" + labelMemberPath="name" + valueMemberPath="population" + fillScaleMode="Value" + fillScaleMinimumValue="0" + fillScaleMaximumValue="1500000000" + fillBrushes="rgba(78, 98, 207, 1) rgba(138, 88, 214, 1)" + isFillScaleLogarithmic="true" + rootTitle="Countries" + headerDisplayMode="Overlay" + parentNodeBottomPadding="0" + parentNodeLeftPadding="0" + parentNodeRightPadding="0" + parentNodeTopPadding="0" + outline="black" + strokeThickness="1"> + </igx-treemap> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Charts Key Features + +Show how your data changes over time with our built-in Time Axis. We’ll dynamically change time scales and label formats, as you interact with your chart. We’ve included a complete Financial Chart with all of the features you’ve come to expect in your financial charts, like Yahoo Finance or Google Finance. + +### Dynamic Charts + +Visualize your data by creating new [Composite Chart](types/composite-chart.md) and overlapping multiple series in single chart. In the Chart, you can display and overlap multiple chart columns to create stacked columns. + +### Custom Tooltips + +Visualize your data by creating new composite views and overlapping multiple series in single chart. In the Chart, you can create [Custom Tooltips](features/chart-tooltips.md#angular-chart-tooltip-template) with images, data binding, and even combine tooltips of multiple series into single tooltip. + +### High-Performance, Real-Time Charting + +Display thousands of data points with milliseconds-level updates in real time with live, streaming data. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. For a demo, refer to the [Chart with High-Frequency](features/chart-performance.md#angular-chart-with-high-frequency) topic. + +### High-Volume Data Handling + +Optimize [Chart Performance](features/chart-performance.md) to render millions of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. For a demo, refer to the [Chart with High-Volume](features/chart-performance.md#angular-chart-with-high-volume) topic. + +### Modular Design + +The Angular chart is designed for modularity. Only features that are needed are part of your deployment, so you get the smallest possible footprint in your rendered pages. + +<img class="responsive-img" src="../../images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg" +alt="Angular Charts Modular Design" /> + +### Smart Data Binding + +Let us choose the chart type. Our smart Data Adapter automatically chooses the best chart type for the data. All you do is set the data source and we do the rest. + +<img class="responsive-img" src="../../images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg" +alt="Angular Charts Smart Data Binding"/> + +### Trendlines + +Angular Charts support all [Trendlines](features/chart-trendlines.md) you’ll ever need, including linear (x), quadratic (x2), cubic (x3), quartic (x4), quintic (x5), logarithmic (log x), exponential (ex), and power law (axk + o(xk)) trend lines. + +<img class="responsive-img" src="../../images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg" +alt="Angular Charts Trendlines"/> + +### Interactive Panning and Zooming + +Use single or multi-touch, keyboard, zoom bar, mouse wheel, drag-select for any rectangular region with the mouse to zoom in for close-up look at data points, scroll data history, or pan data regions. + +<img class="responsive-img" src="../../images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif" +alt="Angular Charts Interactive Panning and Zooming"/> + +### Markers, Tooltips, and Templates + +Use one of 10 [Marker Types](features/chart-markers.md) or create your own [Marker Template](features/chart-markers.md#angular-chart-marker-templates) to highlight data or use simple [Tooltips](features/chart-tooltips.md) or multi-axis and multi-series chart with [Custom Tooltips](features/chart-tooltips.md#angular-chart-tooltip-template) to give more context and meaning to your data. + +<img class="responsive-img" src="../../images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg" +alt="Angular Charts Markers, Tooltips, and Templates"/> + +## But Wait, There’s More! + +If you are considering any other Angular Charts on the market, here are a few things to think about: + +- We include over 65 Angular chart types and combination charts, with the simplest configuration on the market with our smart data adapter. +- Our charts are optimized on all platforms including Angular, Blazor, jQuery / JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI, and Xamarin. They support the same API and same features on every platform. +- Our stock chart and financial charting gives you everything you need for a Yahoo Finance or Google Finance-like experience – all with a single line of code. +- We test against everyone elses performance. Everyone says they are fast and can handle lots of data, but we can prove it. See for yourself how we handle high-volume data and real-time data streaming. +- We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are! +- We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications! + +<!-- Angular --> + +- Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. +- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls. + +<!-- end: Angular --> + +## API References + +All types of chart types mentioned in this topic are implemented in these API components: + +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- [`IgxTreemapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md new file mode 100644 index 000000000..243c33f7d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md @@ -0,0 +1,832 @@ +--- +title: Angular Chat | Ignite UI | Infragistics +_description: With the Ignite UI for Angular Chat component, you can build interactive messaging experiences with support for messages, attachments, suggestions, typing indicators, and custom templates. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Chat components, Angular Chat controls +_license: MIT +mentionedTypes: ["Chat"] +_tocName: Chat +--- + +# Angular Chat Overview + +The Chat component provides a complete solution for building conversational interfaces in your applications. Whether you are creating a customer support tool, a collaborative workspace, or a chatbot assistant, the Chat component gives you the building blocks you need: sending and receiving text messages, uploading file attachments, displaying quick reply suggestions, showing typing indicators when the other participant is writing a response. + +Unlike a static message list, the Chat component is interactive and designed for **real-time communication**. It manages input, rendering, and user interaction while giving you full control over how messages and attachments are displayed. It also exposes an extensive rendering API that lets you override any part of its layout or visuals. + +```typescript +import { Component, signal } from '@angular/core'; +import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; + +@Component({ + selector: 'app-chat-overview-sample', + styleUrls: ['./overview-sample.component.scss'], + templateUrl: './overview-sample.component.html', + imports: [IgxChatComponent] +}) +export class ChatOverviewSampleComponent { + public draftMessage = null; + + public messages = signal([ + { + id: '1', + text: `Hi, I have a question about my recent order, #7890.`, + sender: 'user', + timestamp: (Date.now() - 3500000).toString() + }, + { + id: '2', + text: `Hello! I can help with that. What is your question regarding order #7890?`, + sender: 'support', + timestamp: (Date.now() - 3400000).toString() + }, + { + id: '3', + text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`, + sender: 'user', + timestamp: (Date.now() - 3300000).toString() + }, + { + id: '4', + text: `I've reviewed the delivery details. It seems the package was left in a different spot. Here's a photo from our delivery driver showing where it was placed. Please check your porch and side door.`, + sender: 'support', + timestamp: (Date.now() - 3200000).toString(), + attachments: [ + { + id: 'delivery-location-image', + name: 'Delivery location', + url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=', + type: 'image' + } + ] + } + ]); + + public options = signal<IgxChatOptions>({ + disableAutoScroll: false, + disableInputAttachments: false, + suggestions: [`It's there. Thanks.`, `It's not there.`], + inputPlaceholder: 'Type your message here...', + headerText: 'Customer Support' + }); + + constructor() { + } + + public onMessageCreated(msg: any): void { + const newMessage = msg; + this.messages.update(messages => [...messages, newMessage]); + this.options.update(options => ({ ...options, isTyping: true, suggestions: [] })); + + const messageText = msg.text.toLowerCase(); + const responseText = messageText.includes('not there') + ? `We're sorry to hear that. Checking with the delivery service for more details.` + : messageText.includes('it\'s there') + ? `Glad to hear that! If you have any more questions or need further assistance, feel free to ask. We're here to help!` + : `Our support team is currently unavailable. We'll get back to you as soon as possible.`; + + const responseMessage = { + id: Date.now().toString(), + text: responseText, + sender: 'support', + timestamp: Date.now().toString() + }; + + this.draftMessage = { text: '', attachments: [] }; + this.messages.update(messages => [...messages, responseMessage]); + this.options.update(options => ({ ...options, isTyping: false })); + } +} +``` +```html +<div class="sample-column"> + <igx-chat + [options]="options()" + [messages]="messages()" + [draftMessage]="draftMessage" + (messageCreated)="onMessageCreated($event)"> + </igx-chat> +</div> +``` +```scss +:host { + display: block; + padding: 16px; +} + +igx-chat { + height: 870px; +} +``` + +## Installation + +To get started, install Ignite UI for Angular package as well as the Ignite UI for Web Component one that powers the UI: + +```cmd +npm install igniteui-angular igniteui-webcomponents +``` + +[`IgxChatComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatcomponent.html) provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +Once installed, you can import the component in your project: + +```ts +import { Component } from '@angular/core'; +import { IgxChatComponent } from "igniteui-angular/chat"; + +@Component({ + ... +}) +export class AppComponent { ... } +``` + +## Usage +Define the chat options and bind them in your template: + +```ts +import { IgxChatComponent, IgxChatOptions } from "igniteui-angular/chat"; + +public options: IgxChatOptions = { + currentUserId: 'me', + headerText: 'Support Chat', +}; +``` + +```html +<igx-chat + [options]="options" + [messages]="messages"> +</igx-chat> +``` + +Here, the `currentUserId` property tells the component which messages are “outgoing” (sent by the current user) versus “incoming” (sent by others). The `headerText` provides a title for the chat window. + +Once rendered, you can programmatically add messages by updating the bound messages array: + +```ts +public addMessage() { + const newMessage = { + id: '1', + sender: 'me', + text: 'Hello! How can I help you?', + timestamp: Date.now().toString() + }; + this.messages = [...this.messages, newMessage ]; +} +``` + +This approach makes it easy to plug the Chat into your own data source, such as a server endpoint, a chatbot engine, or a collaborative app backend. + +### Inputs +The Chat component exposes several key properties that let you control its state and configuration: + +| Name | Description | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `messages` | Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. | +| `draftMessage` | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. | +| `options` | Chat configuration ([`IgxChatOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/types/igxchatoptions.html)) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | +| `templates` | Custom Angular templates ([`IgxChatTemplates`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/types/igxchattemplates.html)) for message content, input, attachments, and other parts of the chat UI. | + +These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend. + +### Attachments +Modern conversations are rarely limited to text alone. The Chat component includes built-in support for file attachments, allowing users to share images, documents, and other files. +By default, the input area includes an attachment button. You can control which file types are allowed by setting the `acceptedFiles` property: + +```ts +public options: IgxChatOptions = { + acceptedFiles="image/*,.pdf", +}; +``` + +In this example, users will only be able to upload images and PDF files. +If your use case does not require attachments, you can easily turn them off: + +```ts +public options: IgxChatOptions = { + disableInputAttachments: true, +}; +``` + +### Suggestions +Quick reply suggestions provide users with pre-defined responses they can tap to reply instantly. This feature is particularly useful in chatbots, customer service flows, or when guiding users through a structured process. +You can provide suggestions by binding an array of strings to the suggestions property. The `suggestionsPosition` property lets you control where they are displayed: either below the input area or below the messages list. + +```ts +public options: IgxChatOptions = { + currentUserId: "me", + suggestions: ['Yes', 'No', 'Maybe later'], + suggestionsPosition: "below-input" +}; +``` + +This approach helps streamline user interactions by reducing the need to type repetitive answers and improves the overall experience in guided conversations. + +### Typing Indicator +Conversations feel more natural when participants can see that the other person is typing. The Chat component provides this behavior through the `isTyping` property of the options object. +When set to true, the chat shows a subtle typing indicator below the messages: + +```ts +public options: IgxChatOptions = { + isTyping: true +}; +``` + +This feature is typically toggled programmatically, for example when receiving a typing event from your backend service. + +### Custom Templates +While the Chat component works out of the box with its default UI, many applications need to customize the look and feel. For example, you might want to add read receipts, display avatars, or replace the input area with a voice recording button. +The Chat component addresses this need using Angular templates. Templates are provided via the `templates` input and use strongly typed Angular directives. + +#### Available Templates +The following parts of the Chat can be customized: +- Message-level: message, messageHeader, messageContent, messageAttachments, messageActions +- Attachment-level: attachment, attachmentHeader, attachmentContent +- Input-level: input, inputActions, inputActionsStart, inputActionsEnd, inputAttachments, fileUploadButton, sendButton +- Suggestions: suggestionPrefix +- Miscellaneous: typingIndicator + +This level of granularity means you can tweak just one part (for example, how attachments look) without rewriting the entire chat layout. + +#### Custom Message Content + +```html +<igx-chat + [options]="options" + [messages]="messages" + [templates]="{ messageContent: messageContent }"> +</igx-chat> +<ng-template #messageContent let-message igxChatMessageContext> + <div class="custom-message"> + <strong>{{ message.sender }}:</strong> {{ message.text }} + </div> +</ng-template> +``` + +Here: +- `let-message` exposes the message object. +- The [`igxChatMessageContext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatmessagecontextdirective.html) directive ensures proper typing for message templates. + +#### Custom Input Area +By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button: + +```html +<igx-chat + [options]="options" + [templates]="{ input: customInput }"> +</igx-chat> + +<ng-template #customInput let-input igxChatInputContext> + <div class="custom-input"> + <textarea [(ngModel)]="input.value"></textarea> + <button (click)="speechToText()">🎤</button> + </div> +</ng-template> +``` + +#### Extending Input Actions +The Chat component provides two templates which are useful when you want to keep the default actions (upload and send) but extend them with additional controls: +- `inputActionsStart` – allows you to inject custom content after the built-in upload button. +- `inputActionsEnd` – allows you to inject custom content after the built-in send button. + +For example, you might want to add a voice recording button after the upload button, or a menu of extra options after the send button. +In the following example, the default upload button is preserved, but we add a microphone button next to it. On the other end, we remove the default send button and replace it with a custom Ask button and a “more” menu: + +```html +<igx-chat + [options]="options" + [templates]="{ + inputActionsStart: inputStart, + inputActionsEnd: inputEnd + }"> +</igx-chat> + +<ng-template #inputStart> + <button class="icon-btn">🎤</button> +</ng-template> + +<ng-template #inputEnd> + <button (click)="ask()">Ask</button> + <button class="icon-btn">⋮</button> +</ng-template> +``` + +In this setup: +- The upload button remains in place. +- A microphone button is added after it (inputActionsStart). +- The default send button is removed and replaced with a custom Ask button and a “more” icon (inputActionsEnd). + +This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch. + +### Markdown Support +The Chat component includes built-in support for Markdown content through `fromMarkdown` pipe, which transforms message text into safe HTML. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. + +Markdown rendering is performed asynchronously for performance reasons, so the `fromMarkdown` pipe must be combined with Angular’s `async` pipe. + +Example — rendering markdown inside a template: + +```html +<ng-template #messageContent let-message igxChatMessageContext> + <div [innerHTML]="message.text | fromMarkdown | async"></div> +</ng-template> +``` + +In this example: +- Each message’s text property will be parsed as Markdown using the [marked](https://github.com/markedjs/marked) library. +- The renderer sanitizes the output using [DOMPurify](https://github.com/cure53/DOMPurify) +- Links automatically open in a new tab with safe rel attributes. + +#### Syntax Highlighting +The `fromMarkdown` pipe also supports syntax highlighting for code blocks. When a message contains fenced code (```js...```), it will be rendered using [Shiki](https://shiki.matsu.io/), a high-fidelity code highlighter used by VS Code. By default, it includes highlighting for JavaScript, TypeScript, HTML, and CSS with the github-light theme. + +Example — when a message contains: + +```markdown +Here is a JavaScript example: +\`\`\`ts +function greet(name: string) { + return `Hello, ${name}!`; +} +\`\`\` +``` + +The output inside the chat message will appear with: +- Automatic syntax highlighting +- Theme-aware styling (github-light / github-dark) +- Proper indentation and monospaced font +- No additional configuration is required — the default themes are loaded automatically. + +### Outputs (Events) +To integrate with your application logic, the Chat component emits a set of events: +- messageCreated – when a new message is created. +- messageReact – when a message is reacted to. +- attachmentClick – when an attachment is clicked. +- attachmentAdded – when an attachment is added. +- attachmentRemoved – when an attachment is removed. +- attachmentDrag – while dragging an attachment. +- attachmentDrop – when an attachment is dropped. +- typingChange – when typing status changes. +- inputFocus / inputBlur – input focus events. +- inputChange – when the input value changes. + +You can listen for these events and sync them with your backend: + +```html +<igx-chat + [options]="options" + [messages]="messages" + (messageCreated)="onMessageCreated($event)"> +</igx-chat> +``` + +```typescript +import { AsyncPipe } from '@angular/common'; +import { Component, effect, signal, viewChild } from '@angular/core'; +import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat'; +import { MarkdownPipe } from 'igniteui-angular/chat-extras'; + +@Component({ + selector: 'app-chat-features-sample', + styleUrls: ['./features-sample.component.scss'], + templateUrl: './features-sample.component.html', + imports: [IgxChatComponent, IgxChatMessageContextDirective, AsyncPipe, MarkdownPipe] +}) +export class ChatFeaturesSampleComponent { + private _messageHeader = viewChild.required('messageHeader'); + private _suggestionPrefix = viewChild.required('suggestionPrefix'); + private _messageContent = viewChild.required('messageContent'); + + public draftMessage = null; + public messages = signal([ + { + id: '1', + text: `Hello. How can we assist you today?`, + sender: 'support', + timestamp: (Date.now() - 3500000).toString() + }, + { + id: '2', + text: `Hello. I have problem with styling IgcAvatarComponent. Can you take a look at the attached file and help me?`, + sender: 'user', + timestamp: (Date.now() - 3400000).toString(), + attachments: [ + { + id: 'AvatarStyles.css', + name: 'AvatarStyles.css', + url: './styles/AvatarStyles.css', + type: 'text/css' + } + ] + }, + { + id: '3', + text: `Sure, give me a moment to check the file.`, + sender: 'support', + timestamp: (Date.now() - 3300000).toString() + }, + { + id: '4', + text: + `Thank you for your patience. It seems that the issue is the name of the CSS part. Here is the fixed code: +\`\`\`css +igc-avatar::part(base) { + --size: 60px; + color: var(--ig-success-500-contrast); + background: var(--ig-success-500); + border-radius: 20px; +} +\`\`\` + `, + sender: 'support', + timestamp: (Date.now() - 3200000).toString() + } + ]); + + public options = signal<IgxChatOptions>({ + disableAutoScroll: false, + disableInputAttachments: false, + inputPlaceholder: 'Type your message here...', + headerText: 'Developer Support', + suggestionsPosition: "below-input", + suggestions: [ 'Send me an e-mail when support is available.' ] + }); + + public templates = signal({}); + + constructor() { + effect(() => { + const messageHeader = this._messageHeader(); + const suggestionPrefix = this._suggestionPrefix(); + const messageContent = this._messageContent(); + + if (messageHeader && suggestionPrefix && messageContent) { + this.templates.set({ + messageHeader: messageHeader, + suggestionPrefix: suggestionPrefix, + messageContent: messageContent + }); + } + }); + } + + public onMessageCreated(e: any): void { + const newMessage = e; + this.messages.update(messages => [...messages, newMessage]); + this.options.update(options => ({ ...options, isTyping: true, suggestions: [] })); + + const responseMessage = { + id: Date.now().toString(), + text: 'Our support team is currently unavailable. We\'ll get back to you as soon as possible.', + sender: 'support', + timestamp: Date.now().toString() + }; + + this.draftMessage = { text: '', attachments: [] }; + this.messages.update(messages => [...messages, responseMessage]); + this.options.update(options => ({ ...options, isTyping: false })); + } +} +``` +```html +<div class="sample-column"> + <igx-chat + [options]="options()" + [messages]="messages()" + [draftMessage]="draftMessage" + [templates]="templates()" + (messageCreated)="onMessageCreated($event)"> + </igx-chat> + + <ng-template #messageHeader let-message> + @if (message.sender !== 'user') { + <div> + <span style="font-weight: bold; color: #c00000;" + >Developer Support</span + > + </div> + } + </ng-template> + + <ng-template #suggestionPrefix> + <span style="font-weight: bold">💡</span> + </ng-template> + + <ng-template #messageContent let-message igxChatMessageContext> + <div [innerHTML]="message.text | fromMarkdown | async"></div> + </ng-template> +</div> +``` +```scss +:host { + display: block; + padding: 16px; +} + +igx-chat { + height: 870px; +} +``` + +<div class="divider--half"></div> + +## Styling + +The Chat component exposes both **CSS parts** and **slots** for fine-grained customization of its appearance and structure. + +### CSS Parts + +| Part name | Description | +| ------------------------------- | ------------------------------------------------------------------------------------ | +| `chat-container` | Styles the main chat container. | +| `header` | Styles the chat header container. | +| `prefix` | Styles the element before the chat title (e.g., avatar). | +| `title` | Styles the chat header title. | +| `message-area-container` | Styles the container holding the messages and (optional) suggestions. | +| `message-list` | Styles the message list container. | +| `message-item` | Styles each message wrapper. | +| `typing-indicator` | Styles the typing indicator container. | +| `typing-dot` | Styles individual typing indicator dots. | +| `suggestions-container` | Styles the container holding all suggestions. | +| `suggestions-header` | Styles the suggestions header. | +| `suggestion` | Styles each suggestion item. | +| `suggestion-prefix` | Styles the icon or prefix in a suggestion. | +| `suggestion-title` | Styles the text/title of a suggestion. | +| `empty-state` | Styles the empty state container when there are no messages. | +| `input-area-container` | Styles the wrapper around the chat input area. | +| `input-container` | Styles the main input container. | +| `input-attachments-container` | Styles the container for attachments in the input. | +| `input-attachment-container` | Styles a single attachment in the input area. | +| `input-attachment-name` | Styles the file name of an attachment. | +| `input-attachment-icon` | Styles the icon of an attachment. | +| `text-input` | Styles the text input field for typing messages. | +| `input-actions-container` | Styles the container for input actions. | +| `input-actions-start` | Styles the group of actions at the start of the input after the default file upload. | +| `input-actions-end` | Styles the group of actions at the end of the input. | +| `file-upload-container` | Styles the container for the file upload input. | +| `file-upload` | Styles the file upload input itself. | +| `send-button-container` | Styles the container around the send button. | +| `send-button` | Styles the send button. | +| `message-container` | Styles the container of a single message. | +| `message-list (forwarded)` | Styles the internal list of messages. | +| `message-header` | Styles the header of a message (e.g., sender, timestamp). | +| `message-content` | Styles the text content of a message. | +| `message-attachments-container` | Styles the container for message attachments. | +| `message-attachment` | Styles a single message attachment. | +| `message-actions-container` | Styles the container holding message actions. | +| `message-sent` | Styles messages marked as sent by the current user. | +| `attachment-header` | Styles the header of an attachment block. | +| `attachment-content` | Styles the content of an attachment block. | +| `attachment-icon` | Styles the icon of an attachment. | +| `file-name` | Styles the file name shown in an attachment. | + +#### Example + +```css +igc-chat::part(header) { + background: var(--ig-primary-100); +} + +igc-chat::part(message-container) { + border-radius: 12px; + padding: 0.5rem; +} + +igc-chat::part(empty-state) { + font-style: italic; + color: var(--ig-gray-500); +} +``` + +This allows you to style the `Chat` to match your brand without replacing its functionality. + +### Slots + +| Slot name | Description | +| --------------------- | ------------------------------------------------------------------------ | +| `prefix` | Slot for injecting content (e.g., avatar or icon) before the chat title. | +| `title` | Slot for overriding the chat title content. | +| `actions` | Slot for injecting header actions (e.g., buttons, menus). | +| `suggestions-header` | Slot for rendering a custom header for the suggestions list. | +| `suggestions` | Slot for rendering a custom list of quick reply suggestions. | +| `suggestions-actions` | Slot for rendering additional actions. | +| `suggestion` | Slot for rendering a single suggestion item. | +| `empty-state` | Slot shown when there are no messages. | + +These slots allow injecting custom UI into the header or suggestions area: + +```html +<igx-chat> + <span slot="actions"> + <button class="icon">⚙️</button> + </span> +</igx-chat> +``` + +#### Root Style Adoption (adoptRootStyles) + +The Chat component's options include a special flag for advanced styling scenarios: + +| Option | Type | Default | Description | +| ----------------- | --------- | ------- | ------------------ | +| `adoptRootStyles` | `boolean` | false | When `true`, the component allows content rendered inside its Shadow DOM (e.g., from custom renderers) to inherit styles from the document's root. This provides a quick workaround for styling but is **not recommended** for production use. | + +This property can be useful if you prefer not to deal with Shadow DOM encapsulation when applying global CSS to custom-rendered templates. +However, it comes with trade-offs: +- ✅ Convenience: Lets global styles (from the document) affect custom message renderers. +- ⚠️ Risky: Breaks encapsulation and can lead to style leakage, where global CSS unintentionally alters internal visuals. +- 🔒 One-time setting: This option can only be set at initialization. Changing it at runtime has no effect. + +We highly recommend using the standard Web Component styling approaches before resorting to this property: +- CSS Variables and ::part API – Prefer customizing via exposed parts and variables. +- `<link>` elements – For larger stylesheets, inject them inside the Shadow DOM. +- Inline `<style>` tags – For small, scoped style overrides. + +```typescript +import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; + +@Component({ + selector: 'app-chat-styling-sample', + styleUrls: ['./styling-sample.component.scss'], + templateUrl: './styling-sample.component.html', + imports: [IgxAvatarComponent, IgxChatComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class ChatStylingSampleComponent { + public draftMessage = { text: '', attachments: [] }; + + public messages = signal([ + { + id: '1', + text: `Hi, I have a question about my recent order, #7890.`, + sender: 'user', + timestamp: (Date.now() - 3500000).toString() + }, + { + id: '2', + text: `Hello! I can help with that. What is your question regarding order #7890?`, + sender: 'support', + timestamp: (Date.now() - 3400000).toString() + }, + { + id: '3', + text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`, + sender: 'user', + timestamp: (Date.now() - 3300000).toString() + }, + { + id: '4', + text: `I've reviewed the delivery details. It seems the package was left in a different spot. Here's a photo from our delivery driver showing where it was placed. Please check your porch and side door.`, + sender: 'support', + timestamp: (Date.now() - 3200000).toString(), + attachments: [ + { + id: 'delivery-location-image', + name: 'Delivery location', + url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=', + type: 'image' + } + ] + } + ]); + + public options = signal<IgxChatOptions>({ + disableAutoScroll: false, + disableInputAttachments: false, + suggestions: [`It's there. Thanks.`, `It's not there.`], + inputPlaceholder: 'Type your message here...', + headerText: 'Customer Support', + adoptRootStyles: true + }); + + constructor() {} + + public onMessageCreated(msg: any): void { + const newMessage = msg; + this.messages.update(messages => ([...messages, newMessage])); + this.options.update(options => ({ ...options, isTyping: true, suggestions: [] })); + + + const messageText = msg.text.toLowerCase(); + const responseText = messageText.includes('not there') + ? `We're sorry to hear that. Checking with the delivery service for more details.` + : messageText.includes('it\'s there') + ? `Glad to hear that! If you have any more questions or need further assistance, feel free to ask. We're here to help!` + : `Our support team is currently unavailable. We'll get back to you as soon as possible.`; + + const responseMessage = { + id: Date.now().toString(), + text: responseText, + sender: 'support', + timestamp: Date.now().toString() + }; + + this.draftMessage = { text: '', attachments: [] }; + this.messages.update(messages => [...messages, responseMessage]); + this.options.update(options => ({ ...options, isTyping: false })); + } +} +``` +```html +<div class="sample-column"> + <igx-chat + [options]="options()" + [messages]="messages()" + [draftMessage]="draftMessage" + [templates]="{ messageHeader: messageHeader }" + (messageCreated)="onMessageCreated($event)"> + + <ng-template #messageHeader let-message> + @if (message.sender !== 'user') { + <div style="display: flex; align-items: center; gap: 8px;"> + <igx-avatar + shape="circle" + src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg" + size="small" + > + </igx-avatar> + <span style="font-weight: bold; color: #c00000;" + >Customer Support</span> + </div> + } + </ng-template> + </igx-chat> +</div> +``` +```scss +// @use "igniteui-angular/theming" as *; +igx-chat { + height: 870px; + + ::ng-deep { + igc-chat::part(header) { + display: flex; + align-items: center; + padding: 10px; + border-bottom: 1px solid var(--ig-gray-300); + background-color: var(--ig-gray-200); + font-family: 'Franklin Gothic Medium'; + color: var(--ig-gray-700); + } + + igc-chat::part(message-container) { + background: var(--igc-chat-bubble-bg, #eee); + color: var(--igc-chat-text-color, #222); + padding: 12px; + border-radius: 8px; + transition: background .15s; + } + + igc-chat::part(message-sent) { + background: var(--igc-chat-sent-bubble-bg, #e6f4ff); + color: var(--igc-chat-sent-text-color, #03396b); + } + + igc-chat::part(message-header) { + color: #c00000; + font-weight: bold; + margin: 8px; + } + + igc-chat::part(message-actions-container) { + border-top: 1px solid var(--ig-gray-300); + } + + igc-chat::part(suggestion) { + background-color: var(--ig-primary-100); + color: var(--ig-primary-800); + margin: .125rem; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s, color 0.3s; + } + + igc-chat::part(message-attachment) { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); + background: var(--igc-chat-sent-bubble-bg); + } + + igc-chat::part(input-attachments-container) { + border: 5px solid var(--ig-gray-300); + } + } +} +``` + +## API Reference + +- [`IgxChatComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatcomponent.html) +- [`IgxChatOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/types/igxchatoptions.html) +- [`IgxChatTemplates`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/types/igxchattemplates.html) +- [`IgxChatMessageContextDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatmessagecontextdirective.html) +- [`IgxChatInputContextDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatinputcontextdirective.html) +- [`IgxChatAttachmentContextDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatattachmentcontextdirective.html) +- [`Styling & Themes`](./themes/index.md) + +## Additional Resources +Our community is active and always welcoming to new ideas. +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md new file mode 100644 index 000000000..60941a5c6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md @@ -0,0 +1,603 @@ +--- +title: Angular Checkbox Component – Ignite UI for Angular - MIT license +_description: Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. Try it Now +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Checkbox components, Angular Checkbox controls +_license: MIT +_tocName: Checkbox +--- + +# Angular Checkbox Component Overview + +<p class="highlight">Angular Checkbox is an extension of the standard HTML input type checkbox, providing similar functionality, only enhanced with things like animations and Material Design styling. It enables users to choose one or several predefined options, mostly in forms and surveys. + +The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox. Some of the features it offers are styling options, themes, checked, unchecked, and indeterminate states, and others.</p> + +## Angular Checkbox Example + +See the checkbox in action in the following Angular Checkbox example below. + +```typescript +import { Component } from '@angular/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-sample-1', + styleUrls: ['./checkbox-sample-1.component.scss'], + templateUrl: './checkbox-sample-1.component.html', + imports: [IgxCheckboxComponent] +}) +export class CheckboxSample1Component { } +``` +```html +<igx-checkbox [checked]="true"> + Simple checkbox +</igx-checkbox> +``` +```scss +:host { + display: flex; + padding: 16px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Checkbox + +To get started with the Ignite UI for Angular Checkbox component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxCheckboxModule` in the **app.module.ts** file: + +```typescript +// app.module.ts + +import { IgxCheckboxModule } from 'igniteui-angular/checkbox'; +// import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxCheckboxModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxCheckboxComponent` as a standalone dependency. + +```typescript +// home.component.ts + +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +// import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-checkbox [checked]="true"> + Simple checkbox + </igx-checkbox> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxCheckboxComponent] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Checkbox module or component imported, you can start using the `igx-checkbox` component. + +## Using the Angular Checkbox Component + +To make the checkbox in the demo, add the following code inside the component template: + +```html +<igx-checkbox [checked]="true"> + Simple checkbox +</igx-checkbox> +``` + +### Checkbox properties + +Let's enhance the code above by binding the checkbox properties to some data. Say, we have an array of task objects, each having two properties: description and done. You can bind the checkbox component [`checked`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html#checked) property to the underlying task object done property. Analogically, you can bind the [`value`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html#value) property to description. +Optionally, you can also bind the [`change`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html#change) event and add some custom logic in the provided event handler method. + +```typescript +// tasks.component.ts +@Component({...}) +export class HomeComponent { + public tasks = [ + { done: true, description: 'Research' }, + { done: true, description: 'Implement' }, + { done: false, description: 'Test' } + ]; + + public statusChanged() { + // event handler logic + } +} +``` + +Enhance the component template by adding a checkbox for each task and then setting the corresponding property bindings: + +```html +<!--tasks.component.html--> +<igx-checkbox *ngFor="let task of tasks" [checked]="task.done"> + {{ task.description }} +</igx-checkbox> +``` + +Add some styles: + +```scss +//task.component.scss +:host { + display: flex; + flex-flow: column nowrap; + padding: 16px; +} +igx-checkbox { + margin-top: 16px; +} +``` + +The final result would be something like that: +```typescript +import { Component } from '@angular/core'; + +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-sample-2', + styleUrls: ['./checkbox-sample-2.component.scss'], + templateUrl: './checkbox-sample-2.component.html', + imports: [IgxCheckboxComponent] +}) +export class CheckboxSample2Component { + public tasks = [ + { done: true, description: 'Research' }, + { done: true, description: 'Implement' }, + { done: false, description: 'Test' } + ]; +} +``` +```html +@for (task of tasks; track task) { + <igx-checkbox [checked]="task.done"> + {{ task.description }} + </igx-checkbox> +} +``` +```scss +:host { + display: flex; + flex-flow: column nowrap; + padding: 16px; +} + +igx-checkbox { + margin-top: 16px; +} +``` + +### Label Positioning + +You can position the label using the checkbox's [`labelPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html#labelPosition) property: + +```html +<igx-checkbox labelPosition="before"></igx-checkbox> +``` + +If the `labelPosition` is not set, the label will be positioned after the checkbox. + +### Indeterminate Checkbox in Angular + +In addition to the checked and unchecked states, there is a third state a checkbox can be in: **indeterminate**. In this state the checkbox is neither checked, nor unchecked. This is set using the checkbox's [`indeterminate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html#indeterminate) property: + +```html +<igx-checkbox [indeterminate]="true"></igx-checkbox> +``` + +We can create an app that has a list of tasks that need to be done and one master checkbox in Angular that's going to be checked only if all the tasks are completed. Let's update the previous sample. Starting with the template: + +```html +<!-- app.component.html --> +<igx-checkbox + [readonly]="true" + [(ngModel)]="masterCheckbox.checked" + [(indeterminate)]="masterCheckbox.indeterminate" + (click)="toggleAll()" +> +All done +</igx-checkbox> +<igx-checkbox class="tasks" *ngFor="let task of tasks" [(ngModel)]="task.done"> + {{ task.description }} +</igx-checkbox> +``` + +Next, we're going to indent the subtasks, so it's more visual that they are part of the same group. + +```scss +// app.component.scss +:host { + display: flex; + flex-flow: column nowrap; + padding: 16px; +} +igx-checkbox { + margin-top: 16px; +} +igx-checkbox.tasks { + padding-left: 10px; +} +``` + +And finally, we'll create the logic of our application: + +```ts +// app.component.ts +public tasks = [ + { done: true, description: 'Research' }, + { done: true, description: 'Implement' }, + { done: false, description: 'Test' } +]; +public get masterCheckbox() { + return this.tasks.reduce( + (acc, curr, idx, arr) => { + acc.checked = acc.checked && curr.done; + acc.done = curr.done ? acc.done + 1 : acc.done; + acc.indeterminate = acc.done === arr.length ? false : !!acc.done; + return acc; + }, + { + checked: true, + done: 0, + indeterminate: false + } + ); +} +public toggleAll() { + if (this.masterCheckbox.checked) { + for (const task of this.tasks) { + task.done = false; + } + } else { + for (const task of this.tasks) { + task.done = true; + } + } +} +``` + +After all that is done, our application should look like this: +```typescript +import { Component } from '@angular/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-checkbox-sample-3', + styleUrls: ['./checkbox-sample-3.component.scss'], + templateUrl: './checkbox-sample-3.component.html', + imports: [IgxCheckboxComponent, FormsModule] +}) +export class CheckboxSample3Component { + public tasks = [ + { done: true, description: 'Research' }, + { done: true, description: 'Implement' }, + { done: false, description: 'Test' } + ]; + + public get masterCheckbox() { + return this.tasks.reduce( + (acc, curr, idx, arr) => { + acc.checked = acc.checked && curr.done; + acc.done = curr.done ? acc.done + 1 : acc.done; + acc.indeterminate = acc.done === arr.length ? false : !!acc.done; + + return acc; + }, + { + checked: true, + done: 0, + indeterminate: false + } + ); + } + + public toggleAll() { + if (this.masterCheckbox.checked) { + for (const task of this.tasks) { + task.done = false; + } + } else { + for (const task of this.tasks) { + task.done = true; + } + } + } +} +``` +```html +<igx-checkbox + [readonly]="true" + [(ngModel)]="masterCheckbox.checked" + [indeterminate]="masterCheckbox.indeterminate" + (click)="toggleAll()" + > + All done +</igx-checkbox> +@for (task of tasks; track task) { + <igx-checkbox class="tasks" [(ngModel)]="task.done"> + {{ task.description }} + </igx-checkbox> +} +``` +```scss +:host { + display: flex; + flex-flow: column nowrap; + padding: 16px; +} + +igx-checkbox { + margin-top: 16px; +} + +igx-checkbox.tasks { + padding-left: 10px; +} +``` + + +## Styling + +### Checkbox Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$empty-color</strong></summary> + </details> + </td> + <td>$empty-color-hover</td> + <td>The unchecked border color on hover.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-outline-color (indigo variant only)</td> + <td>The focus outline color for indigo variant.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$fill-color</strong></summary> + </details> + </td> + <td>$fill-color-hover</td> + <td>The checked border and fill colors on hover.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$tick-color</td> + <td>The checked mark color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-border-color</td> + <td>The focus border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-indeterminate-color</td> + <td>The disabled border and fill colors in indeterminate state.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-outline-color (bootstrap variant only)</td> + <td>The focus outline color for bootstrap variant.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-outline-color-focused (indigo variant only)</td> + <td>The focus outline color for focused state in indigo variant.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$error-color</strong></summary> + </details> + </td> + <td>$error-color-hover</td> + <td>The border and fill colors in invalid state on hover.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-outline-color-error</td> + <td>The focus outline color in error state.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td> + <strong>$label-color</strong> + </td> + <td>$label-color-hover</td> + <td>The text color for the label on hover.</td> + </tr> + </tbody> +</table> + +> **Note:** The actual results may vary depending on the theme variant. + +To get started with styling the checkbox, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Then, we create a new theme that extends the [`checkbox-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) and setting parameters to style the checkbox elements. By specifying the `$empty-color` and `$fill-color`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed. + +```scss +// in styles.scss +$custom-checkbox-theme: checkbox-theme( + $empty-color: #ecaa53, + $fill-color: #ecaa53, + $border-radius: 5px +); +``` + +Finally, **include** the custom theme in your application: + +```scss +:host { + @include tokens($custom-checkbox-theme); +} +``` + +In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system. + +```typescript +import { Component } from '@angular/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; + +@Component({ + selector: 'app-checkbox-styling', + styleUrls: ['./checkbox-styling.component.scss'], + templateUrl: './checkbox-styling.component.html', + providers: [{ provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent') }], + imports: [IgxCheckboxComponent] +}) +export class CheckboxStylingComponent { +} +``` +```html +<igx-checkbox id="checkbox-1" [disableRipple]="true" [checked]="true"> + Styled checkbox +</igx-checkbox> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS variables approach + +igx-checkbox { + --tick-color: #0064d9; + --tick-color-hover: #e3f0ff; + --tick-width: 2; + --fill-color: transparent; + --fill-color-hover: #e3f0ff; + --label-color: #131e29; + --focus-outline-color: #0032a5; + --border-radius: #{rem(4px)}; +} + +igx-checkbox:hover { + --empty-fill-color: #e3f0ff; +} + +// Sass theme approach + +// $custom-checkbox-theme: checkbox-theme( +// $tick-color: #0064d9, +// $tick-width: 2, +// $tick-color-hover: #e3f0ff, +// $fill-color: transparent, +// $fill-color-hover: #e3f0ff, +// $label-color: #131e29, +// $focus-outline-color: #0032a5, +// $empty-color: #131e29, +// $border-radius: rem(4px), +// ); + +// :host { +// @include tokens($custom-checkbox-theme); +// } +``` + +### Styling with Tailwind + +You can style the `checkbox` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-checkbox`, `dark-checkbox`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [checkbox-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme). The syntax is as follows: + +```html +<igx-checkbox +class="!light-checkbox +![--empty-color:#7B9E89] +![--fill-color:#7B9E89]" +[checked]="true"> + Styled checkbox +</igx-checkbox> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your checkbox should look like this: + +<div class="sample-container loading" style="height:50px"> + <iframe id="checkbox-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/data-entries/checkbox-tailwind-styling' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +<div class="divider--half"></div> + +## API References + +<div class="divider--half"></div> + +- [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) +- [IgxCheckboxComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) +- [LabelPosition](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/labelposition.html) + +## Theming Dependencies + +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-riple-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md new file mode 100644 index 000000000..b604b7bcc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md @@ -0,0 +1,1133 @@ +--- +title: Angular Chip Component – Ignite UI for Angular | Infragistics | MIT license +_description: The Ignite UI for Angular Chip component provide compact elements that represent an input, attribute, or action. +_keywords: Angular Chip, Angular Chip Component, Angular Chip Area, Angular Chip Area Component, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular UI Components +_license: MIT +_tocName: Chip +--- + +# Angular Chip Component Overview + +[`The Angular Chip component`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container. + +## Angular Chip Example + +```typescript +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; + + +@Component({ + selector: 'app-chip-simple', + styleUrls: ['./chip-simple.component.scss'], + templateUrl: './chip-simple.component.html', + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] +}) + +export class ChipSimpleComponent { + changeDetectionRef = inject(ChangeDetectorRef); + + public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } + ]; + + + public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); + this.changeDetectionRef.detectChanges(); + } +} +``` +```html +<div class="sample-container"> + @for (chip of chipList; track chip) { + <igx-chip + [id]="chip.id" + [selectable]="true" + [removable]="true" + (remove)="chipRemoved($event)" + > + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} + </igx-chip> + } +</div> +``` +```scss +igx-chip { + margin-right: 5px; +} + +.sample-container { + padding-top: 30px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Chip + +To get started with the Ignite UI for Angular Chip component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the **IgxChipsModule** in the **app.module.ts** file: + +```typescript +// app.module.ts + +import { IgxChipsModule } from 'igniteui-angular/chips'; +// import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxChipsModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxChipComponent` as a standalone dependency, or use the [`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular/chips'; +import { NgFor } from '@angular/common'; +// import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-chip *ngFor="let chip of chipList" [id]="chip.id"> + {{ chip.text }} + </igx-chip> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_CHIPS_DIRECTIVES, NgFor], +}) +export class HomeComponent { + public chipList = [ + { text: 'Country', id: '1', icon: 'place' }, + { text: 'City', id: '2', icon: 'location_city' }, + { text: 'Address', id: '3', icon: 'home' }, + { text: 'Street', id: '4', icon: 'streetview' }, + ]; +} +``` + +Now that you have the Ignite UI for Angular Chips module or directives imported, you can start using the `igx-chip` component. + +## Using the Angular Chip Component + +The [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) has an [`id`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#id) input property so that the different chip instances can be easily distinguished. If an [`id`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#id) is not provided, it will be automatically generated. + +```html +<igx-chip *ngFor="let chip of chipList" [id]="chip.id"> + {{chip.text}} +</igx-chip> +``` + +### Selection + +<img class="responsive-img" src="../images/chip/selecting_default.gif" alt="Selecting Default" /> + +Selection can be enabled by setting the [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#selectable) input property to `true`. When selecting a chip, the [`selectedChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#selectedChanging) event is fired. It provides the new [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ichipselecteventargs.html#selected) value so you can get the new state and the original event in [`originalEvent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ichipselecteventargs.html#originalEvent) that triggered the selection change. If this is not done through user interaction but instead is done by setting the [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ichipselecteventargs.html#selected) property programmatically, the [`originalEvent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ichipselecteventargs.html#originalEvent) argument has a value of `null`. + +```html +<igx-chip *ngFor="let chip of chipList" [selectable]="true"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> +``` + +### Removing + +<img class="responsive-img" src="../images/chip/removing_default.gif" alt="Removing Default" /> + +Removing can be enabled by setting the [`removable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#removable) input to `true`. When enabled, a remove button is rendered at the end of the chip. When removing a chip, the [`remove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#remove) event is emitted. + +By default, the chip doesn't get automatically removed from the DOM tree upon clicking on the remove icon. Removal needs to be handled manually. + +```html +<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> +``` + +```typescript +public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => { + return item.id !== event.owner.id; + }); + this.changeDetectionRef.detectChanges(); +} +``` + +### Dragging + +Dragging can be enabled by setting the [`draggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#draggable) input to `true`. When enabled, you can click and drag the chip around. + +```html +<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> +``` + +> [!NOTE] +> To reorder the chips you need to handle the event using the [`IgxChipsAreaComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html). + +<div class="divider"></div> + +**To create the demo sample, we will use the features above:** + +```html +<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [selectable]="true" [removable]="true" (remove)="chipRemoved($event)"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> +``` + +Then, we need to add the `chipList` and the function, that handles the [`remove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#remove) event: + +```ts +import { IBaseChipEventArgs } from 'igniteui-angular/chips'; +// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package +... +public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } +]; + +private changeDetectionRef: any; + +public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => { + return item.id !== event.owner.id; + }); + this.changeDetectionRef.detectChanges(); +} +``` + +If everything went well, you should see this in your browser: + +```typescript +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; + + +@Component({ + selector: 'app-chip-simple', + styleUrls: ['./chip-simple.component.scss'], + templateUrl: './chip-simple.component.html', + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] +}) + +export class ChipSimpleComponent { + changeDetectionRef = inject(ChangeDetectorRef); + + public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } + ]; + + + public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); + this.changeDetectionRef.detectChanges(); + } +} +``` +```html +<div class="sample-container"> + @for (chip of chipList; track chip) { + <igx-chip + [id]="chip.id" + [selectable]="true" + [removable]="true" + (remove)="chipRemoved($event)" + > + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} + </igx-chip> + } +</div> +``` +```scss +igx-chip { + margin-right: 5px; +} + +.sample-container { + padding-top: 30px; +} +``` + +### Chip Templates + +All of the [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html)'s elements are templatable. + +You can template the `prefix` and the `suffix` of the chip, using the `IgxPrefix` and the `IgxSuffix` directives: + +<img class="responsive-img" src="../images/chip/prefix_suffix.jpg" alt="Chip Prefix and Suffix" /> + +```html +<igx-chip> + <igx-icon igxPrefix>insert_emoticon</igx-icon> + <igx-icon igxSuffix style="transform: rotate(180deg)">insert_emoticon</igx-icon> + <span>Why not both?</span> +</igx-chip> +``` + +You can customize the size of the chip, using the [`--ig-size`] CSS variable. By default it is set to `var(--ig-size-large)`. It can also be set to `var(--ig-size-medium)` or `var(--ig-size-small)`, while everything inside the chip retains its relative positioning: + +<img class="responsive-img" src="../images/chip/density.jpg" alt="Chip Density" /> + +```html +<igx-chip>Hi! My name is Chip!</igx-chip> + +<igx-chip style="--ig-size: var(--ig-size-medium)"> + I can be smaller! +</igx-chip> + +<igx-chip style="--ig-size: var(--ig-size-small)"> + <igx-icon igxPrefix>child_care</igx-icon> + Even tiny! +</igx-chip> +``` + +You can customize the `select icon`, using the [`selectIcon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#selecticon) input. It accepts values of type `TemplateRef` and overrides the default icon while retaining the same functionality. + +<img class="responsive-img" src="../images/chip/selecting_custom.gif" alt="Selecting Custom" /> + +```html +<igx-chip *ngFor="let chip of chipList" [selectable]="true" [selectIcon]="mySelectIcon"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> + +<ng-template #mySelectIcon> + <igx-icon>check_circle</igx-icon> +</ng-template> +``` + +You can customize the `remove icon`, using the [`removeIcon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#removeIcon) input. It takes a value of type `TemplateRef` and renders it instead of the default remove icon. + +<img class="responsive-img" src="../images/chip/remove_icons.jpg" alt="Remove Icons" /> + +```html +<igx-chip *ngFor="let chip of chipList" [removable]="true" [removeIcon]="myRemoveIcon"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> + +<ng-template #myRemoveIcon> + <igx-icon>delete</igx-icon> +</ng-template> +``` + +<div class="divider"></div> + +### Demo + +To create the demo sample below, we will use the features above: + +```html +<igx-chip +*ngFor="let chip of chipList" +[id]="chip.id" +[selectable]="true" +[removable]="true" +(remove)="chipRemoved($event)" +> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} +</igx-chip> +``` + +Then, we need to add the `chipList` and the function, that handles the [`remove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#remove) event: + +```ts +import { IBaseChipEventArgs } from 'igniteui-angular/chips'; +// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package +... +public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } +]; + +private changeDetectionRef: any; + +public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => { + return item.id !== event.owner.id; + }); + this.changeDetectionRef.detectChanges(); +} +``` + +If everything went well, you should see this in your browser: + + +```typescript +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { IBaseChipEventArgs, IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; + + +@Component({ + selector: 'app-chip-simple', + styleUrls: ['./chip-simple.component.scss'], + templateUrl: './chip-simple.component.html', + imports: [IgxChipComponent, IgxIconComponent, IgxPrefixDirective] +}) + +export class ChipSimpleComponent { + changeDetectionRef = inject(ChangeDetectorRef); + + public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } + ]; + + + public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); + this.changeDetectionRef.detectChanges(); + } +} +``` +```html +<div class="sample-container"> + @for (chip of chipList; track chip) { + <igx-chip + [id]="chip.id" + [selectable]="true" + [removable]="true" + (remove)="chipRemoved($event)" + > + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} + </igx-chip> + } +</div> +``` +```scss +igx-chip { + margin-right: 5px; +} + +.sample-container { + padding-top: 30px; +} +``` + +## Chip Area + +The [`IgxChipsAreaComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html) is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation, etc.). + +### Reorder Chips + +<img class="responsive-img" src="../images/chip/dragging.gif" alt="Dragging" /> + +The chip can be dragged by the end-user in order to change its position. The dragging is disabled by default but can be enabled using the [`draggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#draggable) input property. You need to handle the actual chip reordering manually. This is where the chip area comes in handy since it provides the [`reorder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html#reorder) event that returns the new order when a chip is dragged over another chip. + +```html +<igx-chips-area (reorder)="chipsOrderChanged($event)"> + <igx-chip *ngFor="let chip of chipList" [draggable]="'true'"> + <igx-icon igxPrefix>{{chip.icon}}</igx-icon> + {{chip.text}} + </igx-chip> +</igx-chips-area> +``` + +```typescript +public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { + const newChipList = []; + for (const chip of event.chipsArray) { + const chipItem = this.chipList.filter((item) => { + return item.id === chip.id; + })[0]; + newChipList.push(chipItem); + } + this.chipList = newChipList; +} +``` + +### Keyboard Navigation + +The chip can be focused using the `Tab` key or by clicking on it. When the chips are in a chip area, they can be reordered using keyboard navigation: + +- Keyboard controls when the chip is focused: + + - <kbd>LEFT</kbd> - Moves the focus to the chip on the left. + + <img class="responsive-img" src="../images/chip/arrow_left_key.gif" alt="Arrow Left Key" /> + + - <kbd>RIGHT</kbd> - Moves the focus to the chip on the right. + + <img class="responsive-img" src="../images/chip/arrow_right_key.gif" alt="Arrow Right Key" /> + + - <kbd>SPACE</kbd> - Toggles chip selection if it is selectable. + + <img class="responsive-img" src="../images/chip/space_key.gif" alt="Space Key" /> + + - <kbd>DELETE</kbd> - Triggers the [`remove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#remove) event for the [`igxChip`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) so the chip deletion can be handled manually. + - <kbd>SHIFT</kbd> + <kbd>LEFT</kbd> - Triggers [`reorder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html#reorder) event for the [`igxChipArea`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html) when the currently focused chip should move position to the left. + - <kbd>SHIFT</kbd> + <kbd>RIGHT</kbd> - Triggers [`reorder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html#reorder) event for the [`igxChipArea`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html) when the currently focused chip should move one position to the right. + +- Keyboard controls when the remove button is focused: + + - <kbd>SPACE</kbd> or <kbd>ENTER</kbd> Fires the [`remove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#remove) output so the chip deletion can be handled manually. + +<div class="divider--half"></div> + +Here's an example of the chip area using IgxAvatar as prefix and custom icons for all chips: + +```html +<igx-chips-area (reorder)="chipsOrderChanged($event)"> + <igx-chip + *ngFor="let chip of chipList" + [id]="chip.id" + [selectable]="true" + [selectIcon]="mySelectIcon" + [removable]="true" + [removeIcon]="myRemoveIcon" + (remove)="chipRemoved($event)" + [draggable]="'true'"> + <igx-avatar + class="chip-avatar-resized" + igxPrefix + [src]="chip.photo" + shape="circle"> + </igx-avatar> + {{chip.name}} + </igx-chip> +</igx-chips-area> + +<ng-template #mySelectIcon> + <igx-icon>check_circle</igx-icon> +</ng-template> + +<ng-template #myRemoveIcon> + <igx-icon>delete</igx-icon> +</ng-template> +``` + +Resize the avatar to fit the chip: + +```scss +.chip-avatar-resized { + width: 2em; + height: 2em; + min-width: 2em; +} +``` + +Add the `chipList` and the functions that handle the events: + +```ts +import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular/chips'; +// import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package + +... +public chipList = [ + { + id: '770-504-2217', + name: 'Terrance Orta', + photo: 'https://www.infragistics.com/angular-demos/assets/images/men/27.jpg' + }, + { + id: '423-676-2869', + name: 'Richard Mahoney', + photo: 'https://www.infragistics.com/angular-demos/assets/images/men/13.jpg' + }, + { + id: '859-496-2817', + name: 'Donna Price', + photo: 'https://www.infragistics.com/angular-demos/assets/images/women/50.jpg' + } +]; + +private changeDetectionRef: any; + +public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => { + return item.id !== event.owner.id; + }); + this.changeDetectionRef.detectChanges(); +} + +public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { + const newChipList = []; + for (const chip of event.chipsArray) { + const chipItem = this.chipList.filter((item) => { + return item.id === chip.id; + })[0]; + newChipList.push(chipItem); + } + this.chipList = newChipList; +} +``` + +If everything's set up correctly, you should see this in your browser: + +### Demo + +```typescript +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + + +@Component({ + selector: 'app-chip-area-sample', + styleUrls: ['./chip-area-sample.component.scss'], + templateUrl: './chip-area-sample.component.html', + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent] +}) + +export class ChipAreaSampleComponent { + changeDetectionRef = inject(ChangeDetectorRef); + + public chipList = [ + { + id: '770-504-2217', + name: 'Terrance Orta', + photo: 'assets/images/men/27.jpg' + }, + { + id: '423-676-2869', + name: 'Richard Mahoney', + photo: 'assets/images/men/13.jpg' + }, + { + id: '859-496-2817', + name: 'Donna Price', + photo: 'assets/images/women/50.jpg' + } + ]; + + public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => item.id !== event.owner.id); + this.changeDetectionRef.detectChanges(); + } + + public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { + const newChipList = []; + for (const chip of event.chipsArray) { + const chipItem = this.chipList.filter((item) => item.id === chip.id)[0]; + newChipList.push(chipItem); + } + this.chipList = newChipList; + } +} +``` +```html +<div class="sample-container"> + <igx-chips-area (reorder)="chipsOrderChanged($event)"> + @for (chip of chipList; track chip) { + <igx-chip + [id]="chip.id" + [selectable]="true" + [selectIcon]="mySelectIcon" + [removable]="true" + [removeIcon]="myRemoveIcon" + (remove)="chipRemoved($event)" + [draggable]="true"> + <igx-avatar + class="chip-avatar-resized" + igxPrefix + [src]="chip.photo" + shape="circle" + ></igx-avatar> + {{chip.name}} + </igx-chip> + } + </igx-chips-area> +</div> + +<ng-template #mySelectIcon> + <igx-icon>check_circle</igx-icon> +</ng-template> + +<ng-template #myRemoveIcon> + <igx-icon>delete</igx-icon> +</ng-template> +``` +```scss +igx-chip { + margin-right: 5px; +} + +.chip-avatar-resized { + width: 2em; + height: 2em; + min-width: 2em; +} + +.sample-container { + padding-top: 30px; +} +``` + +## Styling + +### Chip Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$background</strong></summary></details></td> + <td>$text-color</td> + <td>The chip text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$border-color</td> + <td>The chip border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-background</td> + <td>The chip hover background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-border-color</td> + <td>The chip hover border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-text-color</td> + <td>The chip hover text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-background</td> + <td>The chip focus background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-background</td> + <td>The chip selected background color.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$focus-background</strong></summary></details></td> + <td>$focus-text-color</td> + <td>The chip text focus color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-border-color</td> + <td>The chip focus border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-outline-color (bootstrap & indigo variants only)</td> + <td>The chip focus outline color.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$selected-background</strong></summary></details></td> + <td>$selected-text-color</td> + <td>The selected chip text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-border-color</td> + <td>The selected chip border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-selected-background</td> + <td>The selected chip hover background color.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$hover-selected-background</strong></summary></details></td> + <td>$hover-selected-text-color</td> + <td>The selected chip hover text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-selected-border-color</td> + <td>The selected chip hover border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-selected-background</td> + <td>The selected chip focus background color.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$focus-selected-background</strong></summary></details></td> + <td>$focus-selected-text-color</td> + <td>The selected chip text focus color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-selected-border-color</td> + <td>The selected chip focus border color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focus-selected-outline-color (bootstrap & indigo variants only)</td> + <td>The chip focus outline color in selected state.</td> + </tr> + </tbody> +</table> + +To get started with styling the chip, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`chip-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) and accepts some parameters that style the chip's items. By specifying the `$background` or the `$selected-background`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed. + +```scss +$custom-chip-theme: chip-theme( + $background: #57a5cd, + $selected-background: #ecaa53, + $remove-icon-color: #d81414, + $border-radius: 5px, +); +``` + +Finally, **include** the custom theme in your application: + +```scss +:host { + @include tokens($custom-chip-theme); +} +``` + +In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system. + +```typescript +import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core'; +import { facebook, linkedin } from '@igniteui/material-icons-extended'; +import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { NgClass } from '@angular/common'; + +@Component({ + selector: 'app-chip', + styleUrls: ['./chip-styling.component.scss'], + templateUrl: './chip-styling.component.html', + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgClass] +}) + +export class ChipStylingSampleComponent implements OnInit { + changeDetectionRef = inject(ChangeDetectorRef); + private iconService = inject(IgxIconService) + public ngOnInit() { + this.iconService.addSvgIconFromText('x', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>'); + this.iconService.addSvgIconFromText('youtube', '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 13"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/> </svg>'); + this.iconService.addSvgIconFromText(facebook.name, facebook.value); + this.iconService.addSvgIconFromText(linkedin.name, linkedin.value); + } + + public chipList = [ + { + text: 'X.com', + class: 'xcom', + icon: 'x' + }, + { + text: 'Youtube', + class: 'youtube', + icon: 'youtube' + }, + { + text: 'Facebook', + class: 'facebook', + icon: 'facebook' + }, + { + text: 'LinkedIn', + class: 'linkedin', + icon: 'linkedin' + } + ]; +} +``` +```html +<igx-chips-area> + @for (chip of chipList; track chip) { + <igx-chip [ngClass]="chip.class"> + <igx-icon igxPrefix name={{chip.icon}}></igx-icon> + {{chip.text}} + </igx-chip> + } +</igx-chips-area> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS variables approach + +igx-chip { + --text-color: #fff; + --hover-text-color: #fff; + --focus-text-color: #fff; + --border-radius: #{rem(5px)}; +} + +.xcom { + --background: #000; + --hover-background: #000; + --focus-background: #323232; +} + +.youtube { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; +} + +.facebook { + --background: #3b5999; + --hover-background: #3b5999; + --focus-background: #2c4378; +} + +.linkedin { + --background: #55acee; + --hover-background: #55acee; + --focus-background: #4682af; +} + +// Sass theme approach + +// $custom-chip-theme: chip-theme( +// $background: #cd201f, +// $text-color: #fff, +// $hover-background: #cd201f, +// $focus-background: #9f1717, +// $border-radius: rem(5px) +// ); + +// :host { +// @include tokens($custom-chip-theme); +// } +``` + +### Styling with Tailwind + +You can style the chip using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-chip`, `dark-chip`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [chip-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme). The syntax is as follows: + +```html +<igx-chip + class="!light-chip + ![--background:#99BAA6] + ![--remove-icon-color:#C92828]" + ... +> + {{chip.text}} +</igx-chip> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your chips should look like this: + +<div class="sample-container loading" style="height:80px"> + <iframe id="chip-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/data-display/chip-tailwind-styling' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +### Custom sizing + +You can either use the `--size` variable, targeting the `igx-chip` directly: + +```scss +igx-chip { + --size: 50px; +} +``` + +Or you can use the universal `--ig-chip-size` variable to target all instances: + +```html +<div class="my-app"> + <igx-chip></igx-chip> +</div> +``` + +```scss +.my-app { + --ig-chip-size: 50px; +} +``` + +You can also use one of the predefined sizes, assigning it to the `--ig-size` variable. The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`: + +```scss +igx-chip { + --ig-size: var(--ig-size-small); +} +``` + +Learn more about it in the [Size](display-density.md) article. + +## API + +- [IgxChipComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) +- [IgxChipComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) +- [IgxChipsAreaComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## References + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md new file mode 100644 index 000000000..6bed52d29 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/circular-progress.md @@ -0,0 +1,415 @@ +--- +title: Angular Circular Progress Component – Ignite UI for Angular | Infragistics | MIT license +_description: Ignite UI for Angular Circular Progress Indicator component allows developers to display progress in a circle with endless customization options. +_keywords: Angular Circular Progress component, Angular Circular Progress control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Angular UI Components +_license: MIT +_tocName: Circular Progress +--- + +# Angular Circular Progress Component Overview + +<p class="highlight">The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.<p> + +## Angular Circular Progress Example + +```typescript +import { Component } from '@angular/core'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; + +@Component({ + selector: 'app-circular-progressbar', + styleUrls: ['./circular-progressbar.component.scss'], + templateUrl: './circular-progressbar.component.html', + imports: [IgxCircularProgressBarComponent] +}) +export class CircularProgressbarComponent { } +``` +```html +<igx-circular-bar +[value]="100" +[animate]="true" +class="custom-size" +></igx-circular-bar> +``` +```scss +.custom-size { + margin: 20px; + --diameter: 50px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Circular Progress + +To get started with the Ignite UI for Angular Circular Progress component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxProgressBarModule` in the **app.module.ts** file: + +```typescript +// app.module.ts + +... +import { IgxProgressBarModule } from 'igniteui-angular/progressbar'; +// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxProgressBarModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxCircularProgressBarComponent` as a standalone dependency, or use the [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar'; +// import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-circular-bar + [value]="100" + [animate]="true" + class="custom-size" + ></igx-circular-bar> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES], + /* or imports: [IgxCircularProgressBarComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the `igx-circular-bar` component. + +## Using the Angular Circular Progress + +To have a better understanding how everything works, let's create a simple example, like the one in the demo: + +```html +<igx-circular-bar [value]="100" [animate]="true" class="custom-size"></igx-circular-bar> +``` + +After that, we should have the demo sample in your browser. + +> [!NOTE] +> The **igx-circular-bar** emits [`onProgressChanged`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#onProgressChanged) event that outputs an object like this `{currentValue: 65, previousValue: 64}` on each step. +> [!NOTE] +> The default progress increments by **1% of the [`max`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#max) value** per update cycle, this happens if the [`step`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#step) value is not defined. To change the update rate, the [`step`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#step) value should be defined.``` + +### Indeterminate Progress + +If you want to track a process that is not determined precisely, you can set the [`indeterminate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#indeterminate) input property to `true`. + +```html +<igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar> +``` + +> [!NOTE] +> You can hide the text of the circular progress bar by setting the [`textVisibility`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#textVisibility) property to `false`. + +The final result should be: + +```typescript +import { Component } from '@angular/core'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; + +@Component({ + selector: 'app-circular-indeterminate-progressbar', + styleUrls: ['./circular-indeterminate-progressbar.component.scss'], + templateUrl: './circular-indeterminate-progressbar.component.html', + imports: [IgxCircularProgressBarComponent] +}) +export class CircularIndeterminateProgressbarComponent { } +``` +```html +<igx-circular-bar +[animate]="false" +[indeterminate]="true" +[textVisibility]="false" +></igx-circular-bar> +``` +```scss +igx-circular-bar { + margin: 20px; + --diameter: 50px; +} +``` + +<div class="divider--half"></div> + +### Dynamic Progress + +You can dynamically change the value of the progress by using external controls like buttons. To achieve this, we can bind the value to a class property: + +```html +<div class="sample-content"> + <igx-circular-bar + [value]="currentValue" + [max]="100" + [animate]="true" + class="custom-size"> + </igx-circular-bar> + <div class="button-container"> + <button igxIconButton="flat" (click)="decrementProgress()"> + <igx-icon fontSet="material">remove</igx-icon> + </button> + <button igxIconButton="flat" (click)="incrementProgress()"> + <igx-icon fontSet="material">add</igx-icon> + </button> + </div> +</div> +``` + +Add the methods that increment and decrement the value: + +```typescript +@Component({...}) +export class HomeComponent { + public currentValue: number; + + public ngOnInit() { + this.currentValue = 0; + } + + public incrementProgress() { + this.currentValue += 10; + if (this.currentValue > 100) { + this.currentValue = 100; + } + } + + public decrementProgress() { + this.currentValue -= 10; + if (this.currentValue < 0) { + this.currentValue = 0; + } + } +} +``` + +Add some styles: + +```scss +.custom-size { + --diameter: 100px; +} + +.sample-content { + width: 300px; + display: flex; + align-items: center; + margin: 30px; +} +``` + +### Gradient Progress + +One way to customize the progress bar is by using a color gradient instead of a solid color. +This can be done in one of two ways - by using the [`IgxProgressBarGradientDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html#gradienttemplate) directive or by implementing a custom theme, which supports up to two color stops. + +To create a gradient with just two color stops using a custom theme, you need to create a list of colors and pass it to the `$fill-color-default` theme parameter: + +```scss +$colors: #695cf9, #ef017c; + +$custom-theme: progress-circular-theme( + $fill-color-default: $colors, +); +``` + +You can learn more about styling the circular progress bar in the [`Styling Section`](#styling) + +To provide a gradient that has more than 2 color stops, we have to use the directive on an `ng-template` in our `igx-circular-bar` like that: + +```html +<div class="sample-content"> + <igx-circular-bar + [value]="currentValue" + [max]="100" + [animate]="true" + class="custom-size"> + <ng-template igxProgressBarGradient let-id> + <svg:linearGradient [id]="id" gradientTransform="rotate(90)"> + <stop offset="0%" stop-color="#ff9a40" /> + <stop offset="50%" stop-color="#1eccd4" /> + <stop offset="100%" stop-color="#ff0079" /> + </svg:linearGradient> + </ng-template> + </igx-circular-bar> + + <div class="button-container"> + <button igxIconButton="flat" (click)="removeProgress()"> + <igx-icon fontSet="material">remove</igx-icon> + </button> + <button igxIconButton="flat" (click)="addProgress()"> + <igx-icon fontSet="material">add</igx-icon> + </button> + </div> +</div> +``` + +After reproducing the steps above, you should get this as a result: + +```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxCircularProgressBarComponent, IgxProgressBarGradientDirective } from 'igniteui-angular/progressbar'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-circular-dynamic-sample', + styleUrls: ['./circular-dynamic-sample.component.scss'], + templateUrl: './circular-dynamic-sample.component.html', + imports: [IgxCircularProgressBarComponent, IgxProgressBarGradientDirective, IgxIconButtonDirective, IgxIconComponent] +}) +export class CircularDynamicSampleComponent implements OnInit { + + public currentValue: number; + + public ngOnInit() { + this.currentValue = 0; + } + + public incrementProgress() { + this.currentValue += 10; + if (this.currentValue > 100) { + this.currentValue = 100; + } + } + + public decrementProgress() { + this.currentValue -= 10; + if (this.currentValue < 0) { + this.currentValue = 0; + } + } +} +``` +```html +<div class="wrapper"> + <div class="sample-content"> + <igx-circular-bar + [value]="currentValue" + [max]="100" + [animate]="true" + class="custom-size" + > + <ng-template igxProgressBarGradient let-id> + <svg:linearGradient [id]="id" gradientTransform="rotate(90)"> + <stop offset="0%" stop-color="#ff9a40"/> + <stop offset="50%" stop-color="#1eccd4"/> + <stop offset="100%" stop-color="#ff0079"/> + </svg:linearGradient> + </ng-template> + </igx-circular-bar> + + <div class="button-container"> + <button igxIconButton="flat" (click)="decrementProgress()"> + <igx-icon family="material">remove</igx-icon> + </button> + <button igxIconButton="flat" (click)="incrementProgress()"> + <igx-icon family="material">add</igx-icon> + </button> + </div> + </div> +</div> +``` +```scss +.custom-size { + --diameter: 50px; + --stroke-thickness: 3px; +} + +.sample-content { + width: 300px; + display: flex; + align-items: center; + margin: 30px; +} +``` + +<div class="divider--half"></div> + +## Styling + +To get started with styling the circular progress bar, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`progress-circular-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-progress-circular-theme) and accepts the `$base-circle-color` and the `$fill-color-default` parameters. + +```scss +$custom-theme: progress-circular-theme( + $fill-color-default: rgb(32, 192, 17), + $diameter: 50px +); +``` + +The last step is to **include** the component theme in our application. + +```scss +:host { + @include tokens($custom-theme); +} +``` + +### Demo + +<div class="divider--half"></div> + +```typescript +import { Component } from '@angular/core'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; + +@Component({ + selector: 'app-circular-styling-sample', + styleUrls: ['./circular-styling-sample.component.scss'], + templateUrl: './circular-styling-sample.component.html', + imports: [IgxCircularProgressBarComponent] +}) +export class CircularStylingSampleComponent { } +``` +```html +<igx-circular-bar +[animate]="false" +[indeterminate]="true" +></igx-circular-bar> +``` +```scss +@use "igniteui-angular/theming" as *; + +$custom-theme: progress-circular-theme( + $fill-color-default: rgb(32, 192, 17), + $diameter: 50px, +); + +igx-circular-bar { + @include tokens($custom-theme); + margin: 20px; +} +``` + +## API + +<div class="divider--half"></div> + +- [IgxCircularProgressBarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html) +- [IgxCircularProgressBarComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-progress-circular-theme) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-auth-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-auth-template.md new file mode 100644 index 000000000..ac125f934 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-auth-template.md @@ -0,0 +1,143 @@ +--- +title: Authentication Project Template | Ignite UI for Angular | Infragistics +_description: Check out the Ignite UI for Angular Authentication Project Template guide. +_keywords: igniteui for angular | angular schematics | templates | infragistics +_tocName: Authentication Project Template +--- + +# Authentication Project Template + +There are multiple versions of a project (called project templates) to choose from when using either the [`new` command with Ignite UI CLI](getting-started-with-cli.md#create-a-new-project), [with Ignite UI for Angular Schematics](getting-started-with-angular-schematics.md#create-a-new-project) or the [Step by step mode using Ignite UI CLI](step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). + +When creating Ignite UI for Angular project with Angular Schematics or Ignite UI CLI you can select a template with an basic implementation of a client-side authentication module that require as little additional setup as possible to jump-start apps with user management. + +## Create Authentication Project + +You can select an authentication project either when going through the Step by step experience after selection 'Ignite UI for Angular' project type: + +<img class="responsive-img" src="../../../images/general/cli-igx-side-auth.png" alt="Step by step experience" /> + +Or through the new command: + +```bash +ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth +``` + +If you are using the Schematics collection run: + +```bash +ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth +``` + +## Description + +This template builds upon the Side Navigation default and adds a profile page and a login section to the app's nav bar that will display a login button or an avatar of the logged in user: + +<img class="responsive-img" src="../../../images/general/igx-side-auth-login-bar.png" alt="Login bar" /> + +The login bar also integrates dialogs to sign in or up: + +<img class="responsive-img" src="../../../images/general/igx-side-auth-login-dialogs.png" alt="Login dialogs" /> + +The project also supports various [external authentication providers](#add-a-third-party-social-provider). + +## In code + +Everything related to user management is under the `src/app/authentication` folder. Notable exports include: + +- `AuthenticationModule` in `authentication.module.ts` exports all components and services to the main app module. +- `auth.guard.ts` exports an `AuthGuard` you can apply to routes +- `authentication-routing.module.ts` sets up login-related routes +- `UserService` in `services/user.service.ts` keeps the current user state +- `AuthenticationService` in `services/authentication.service.ts` is used to communicate with the backend API +- `ExternalAuthService` in `services/external-auth.service.ts` handles providers for third-party logins + +## Required configuration + +The project is setup for a single page app with REST API services, so the `AuthenticationService` is used to send requests to the following URLs: + +- `/login` - login with username and password +- `/register` - register with user details +- `/extlogin` - passes along user info from external source + +All endpoints are expected to return an JSON Wen Token(JWT) + or an error state with message. + +> **Note:** For demonstration purposes the project has a `services/fake-backend.service.ts` that intercepts requests . The `BackendProvider` in `authentication.module.ts` should **not** be used in production. Both the provider and the file should be removed when development starts. + +As with any authentication model, using JWT-s requires security considerations. Particularly, the tokens received from the REST API are stored on the client. For seamless app reloads during development, the user data is stored in the browser local storage, which is potentially vulnerable to XSS attacks. + +> **Note:** Disable the local storage before production. Consider keeping tokens in memory only if the app requirements allow or take alternative route to protect them. Using cookies (consider CSRF protection) is an alternative, also splitting the token signature or an additional 'fingerprint' in a hardened cookie. + +As usual, always evaluate security aspects and adjust accordingly, the project structure provided is merely a starting point. + + +## Add a third-party (social) provider + +Your project's main module `src/app/app.module.ts` should be generated with the external authentication service injected and commented out initialization similar to: + +```ts +// in app.module.ts +export class AppModule { + constructor(private externalAuthService: ExternalAuthService) { + // this.externalAuthService.addGoogle('<CLIENT_ID>'); + // this.externalAuthService.addMicrosoft('<CLIENT_ID>'); + // this.externalAuthService.addFacebook('<CLIENT_ID>'); + } +} +``` + +To enable user login with a specific third-party provider all that is required is to un-comment the specific line and replace the `` with your app's client ID. +If you need to obtain one, for example for Google Account sign in, follow the provider-specific guide at: + +- [Obtain credentials](https://developers.google.com/identity/protocols/OpenIDConnect#getcredentials) + +- [More detailed version](https://support.google.com/cloud/answer/6158849?hl=en&ref_topic=6262490) + +Keep in mind, redirect URLs and allowed domain origins should be configured per provider to match the project. When creating the Google OAuth 2.0 client ID for development you can provide `http://localhost:4200/redirect-google` as the redirect URI. See [redirect URLs](#provider-details) for details. + +Once you have your ID (for example `123456789.apps.googleusercontent.com`) you can enable the Google provider for the project like so: + +```ts +// in app.module.ts +export class AppModule { + constructor(private externalAuthService: ExternalAuthService) { + this.externalAuthService.addGoogle('123456789.apps.googleusercontent.com'); + // this.externalAuthService.addMicrosoft('<CLIENT_ID>'); + // this.externalAuthService.addFacebook('<CLIENT_ID>'); + } +} +``` + +This will automatically enable the respective button in the login dialog: + +<img class="responsive-img" src="../../../images/general/igx-side-auth-login-google.png" alt="Google login button" /> + +You can do the same with [Microsoft](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc) following this guide: + +https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-register-an-app + +And for Facebook: + +https://developers.facebook.com/docs/apps/#register + + +As you enable providers, all buttons will become active: + +<img class="responsive-img" src="../../../images/general/igx-side-auth-login-social.png" alt="Social login options" /> + +### Provider details + +Here are the default providers the project template comes with: + +| Provider | Uses | Redirect URL | +|---|---|---| +| Google | OpenID Connect* | `<app root>/redirect-google` | +| Microsoft | OpenID Connect* | `<app root>/redirect-microsoft` | +| Facebook | Facebook Connect** | `<app root>/redirect-facebook` | + +Where the app is hosted will determine the root URL, for example by default on the first app run that will be `http://localhost:4200`. + +\* OpenID Connect functionality implemented using https://github.com/damienbod/angular-auth-oidc-client + +\** Facebook Connect functionality implemented using Facebook JS SDK diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-component-templates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-component-templates.md new file mode 100644 index 000000000..4156440b7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-component-templates.md @@ -0,0 +1,60 @@ +--- +title: Component and Scenario CLI Templates | Ignite UI for Angular | Infragistics +_description: Check out the list of all available CLI templates with Ignite UI for Angular framework +_keywords: igniteui for angular | angular schematics | templates | infragistics +_tocName: Templates +--- + +# Component Templates + +The following table provides a list of the Ignite UI Angular components that can be generated using the Ignite UI Angular Schematics or Ignite UI CLI commands. In addition you can find links to the available demos in our documentation, but note that those are not exactly identical to the ones generated by the CLI. + +| Template | Code and description | Demo | +| ----------------- | -------------------------------------------------------------------------------------------------------------------|------------------- | +|<b>Grids & Lists</b>| | | +|grid |Ignite UI Schematics collection:<br><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid newGrid</code><br>Ignite UI CLI:<br><code>ig add grid newGrid</code><details>Basic template for IgxGrid.</details> |[IgxGrid](../../grid/grid.md) component with auto generated columns | +|grid-batch-editing |Ignite UI Schematics collection:<br><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing</code><br>Ignite UI CLI:<br><code>ig add grid-batch-editing newGridBatchEditing</code><details>Sample IgxGrid with batch editing.</details> |[IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) | +|custom-grid |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c custom-grid newCustomGrid</code><br>Ignite UI CLI:<br><code>ig add custom-grid newCustomGrid</code><details>IgxGrid with optional features like sorting, filtering, editing, etc.</details>| [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) | +|grid-summaries |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries</code><br>Ignite UI CLI:<br><code>ig add grid-summaries newGridSummaries</code><details>IgxGrid with summaries feature.</details>| [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature.| +|grid-multi-column-headers|Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders</code><br>Ignite UI CLI:<br><code>ig add grid-multi-column-headers newGridMultiColumnHeaders</code><details>IgxGrid with multiple header columns.</details> |[IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) | +|tree grid |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid</code><br>Ignite UI CLI:<br><code>ig add custom-tree-grid newCustomTreeGrid</code><details>IgxTreeGrid with optional features like sorting, filtering, row editing, etc.</details> |[IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) | +|list |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c list newList</code><br>Ignite UI CLI:<br><code>ig add list newList</code><details>Basic IgxList.</details> |[IgxList](../../list.md) with search and filtering logic. | +|combo |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br>Ignite UI CLI:<br><code>ig add combo newCombo</code><details>Basic IgxCombo with templating.</details> |[IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). | +|<b>Charts</b> | | | +|category chart |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c category-chart newCategoryChart</code><br>Ignite UI CLI:<br><code>ig add category-chart newCategoryChart</code><details>Basic category chart with chart type selector.</details>|Basic [category chart](../../charts/types/column-chart.md) with chart type selector.| +|financial chart |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c financial-chart newFinancialChart</code><br>Ignite UI CLI:<br><code>ig add financial-chart newFinancialChart</code><details>Basic financial chart with automatic toolbar and type selection.</details>|Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection.| +|<b>Gauges</b>| | | +|bullet graph |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph</code><br>Ignite UI CLI:<br><code>ig add bullet-graph newBulletGraph</code><details>IgxBulletGraph with different animations.</details>|[IgxBulletGraph](../../bullet-graph.md) with different animations.| +|linear gauge |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge</code><br>Ignite UI CLI:<br><code>ig add linear-gauge newLinearGauge</code><details>IgxLinearGauge with different animations.</details>|[IgxLinearGauge](../../linear-gauge.md) with different animations.| +|radial gauge |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge</code><br>Ignite UI CLI:<br><code>ig add radial-gauge newRadialGauge</code><details>IgxRadialGauge with different animations.</details>|[IgxRadialGauge](../../radial-gauge.md) with different animations.| +|<b>Layouts</b> | | | +|dock-manager |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c dock-manager newDockManager</code><br>Ignite UI CLI:<br><code>ig add dock-manager newDockManager</code><details>Basic IgcDockManager.</details> |[IgcDockManager](../../dock-manager.md) with nine content slots. | +|carousel |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c carousel newCarousel</code><br>Ignite UI CLI:<br><code>ig add carousel newCarousel</code><details>Basic IgxCarousel.</details> |[IgxCarousel](../../carousel.md) cycling through a series of images. | +|tabs |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c tabs newTabs</code><br>Ignite UI CLI:<br><code>ig add tabs newTabs</code><details>Basic IgxTabs.</details> |[IgxTabs](../../tabs.md) component that includes three customized tab-groups. | +|bottom-nav |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c bottom-nav newBottomNav</code><br>Ignite UI CLI:<br><code>ig add bottom-nav newBottomNav</code><details>Three item bottom-nav template.</details> |Three item bottom [navbar](../../navbar.md) template. | +|<b>Data Entry & Display</b>| | | +|chip |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c chip newChip</code><br>Ignite UI CLI:<br><code>ig add chip newChip</code><details>Basic IgxChip.</details> | [IgxChip](../../chip.md) components inside igx-chips-area. | +|dropdown |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c dropdown newDropDown</code><br>Ignite UI CLI:<br><code>ig add dropdown newDropDown</code><details>Basic IgxDropDown.</details> |Basic [IgxDropDown](../../drop-down.md) that displays a list of items. | +|select (v4.1.0) |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c select newSelect</code><br>Ignite UI CLI:<br><code>ig add select newSelect</code><details>Basic IgxSelect.</details> |Simple [IgxSelect](../../select.md) that displays a list of items..| +|select (v4.1.0) |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c select-groups newGroupsSelect</code><br>Ignite UI CLI:<br><code>ig add select-groups newGroupsSelect</code><details>Select With Groups.</details> |[IgxSelect](../../select.md) displaying grouped items. | +|select (v4.1.0) |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br>Ignite UI CLI:<br><code>ig add select-in-form newFormSelect</code><details>IgxSelect in a form.</details> |[IgxSelect](../../select.md) component usage in a form. | +|input group |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c input-group newInputGroup</code><br>Ignite UI CLI:<br><code>ig add input-group newInputGroup</code><details>Basic IgxInputGroup form view.</details>|Form view created with [IgxInputGroup](../../input-group.md).| +|<b>Interactions</b>| | | +|dialog |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c dialog newDialog</code><br>Ignite UI CLI:<br><code>ig add dialog newDialog</code><details>Basic IgxDialog.</details> | Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. | +|tooltip |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c tooltip newTooltip</code><br>Ignite UI CLI:<br><code>ig add tooltip newTooltip</code><details>A fully customizable tooltip.</details> |Basic tooltip created with the [IgxTooltip](../../tooltip.md). | +|<b>Scheduling</b> | | | +|date-picker |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c date-picker newDatePicker</code><br>Ignite UI CLI:<br><code>ig add date-picker newDatePicker</code><details>Basic IgxDatePicker.</details> |Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | +|time-picker |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c time-picker newTimePicker</code><br>Ignite UI CLI:<br><code>ig add time-picker newTimePicker</code><details>Basic IgxTimePicker.</details> |Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. | +|calendar |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c calendar newCalendar</code><br>Ignite UI CLI:<br><code>ig add calendar newCalendar</code><details>IgxCalendar with single selection.</details> |Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | + + +## Scenario templates + +| Template | Code and description | Demo | +| ----------------- | -------------------------------------------------------------------------------------------------------------------|------------------- | +|awesome-grid |Ignite UI Schematics collection:<br><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid</code><br>Ignite UI CLI:<br><code>ig add awesome-grid newAwesomeGrid</code><details>IgxGrid with custom cell templating.</details> |[IgxGrid](../../grid/grid.md) with cell templating and controls embedded into the cells. | +|crm-grid |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c crm-grid newCrmGrid</code><br>Ignite UI CLI:<br><code>ig add crm-grid newCrmGrid</code><details>IgxGrid with custom search implementation.</details> |[IgxGrid](../../grid/grid.md) with custom search implementation. | +|fintech-grid |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid</code><br>Ignite UI CLI:<br><code>ig add fintech-grid newFinTechGrid</code><details>IgxGrid handling thousands of live updates per second.</details> |[IgxGrid](../../grid/live-data.md) Live Updating demo handling thousands of updates per second. | +|fintech-tree-grid |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid</code><br>Ignite UI CLI:<br><code>ig add fintech-tree-grid newFinTechTreeGrid</code><details>IgxGrid handling thousands of live updates per second.</details> |[IgxTreeGrid](../../treegrid/live-data.md) Live Updating demo handling thousands of updates per second. | +|login |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c login newLogin</code><br>Ignite UI CLI:<br><code>ig add login newLogin</code><details>Registration and login forms created with IgxInputGroup.</details> | Registration and login forms created with [IgxInputGroup](../../input-group.md).. | +|weather-forecast |Ignite UI Schematics collection:<br><code>ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast</code><br>Ignite UI CLI:<br><code>ig add weather-forecast newWeatherForecast</code><details>Template with igxExpansionPanel.</details> |The template uses the [IgxExpansionPanel](../../expansion-panel.md) to display daily weather forecast details. | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-getting-started-with-angular-schematics.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-getting-started-with-angular-schematics.md new file mode 100644 index 000000000..25dd55ca9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-getting-started-with-angular-schematics.md @@ -0,0 +1,175 @@ +--- +title: Getting Started with Ignite UI for Angular Schematics | Ignite UI for Angular | Infragistics +_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. +_keywords: angular cli, ignite ui for angular, infragistics +_tocName: Getting Started with Ignite UI for Angular Schematics +--- + +## Getting Started with Ignite UI for Angular Schematics + +To get started install [Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) globally: + +```cmd +npm i -g @igniteui/angular-schematics +``` + +The above install will make the schematics available to use a collection parameter for the `ng new` command. + +If you are using `yarn` package manager: + +```cmd +yarn global add @igniteui/angular-schematics +``` + +### Using guided experience + +The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). + +To activate the guide using the Ignite UI for Angular Schematics run: + +```cmd +ng new --collection="@igniteui/angular-schematics" +``` + +## Create a new project + +To create an application that is configured to use the Ignite UI for Angular controls, run the `ng new` command providing `@igniteui/angular-schematics` to the collection option. + +```cmd +ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav +``` + +Additionally, by setting the `type` of the project, like so `--type=igx-ts-legacy`, you can specify that you prefer your project to be generated using module based bootstrapping. Not specifying it will default to a project that uses standalone components. + +If you already have an Angular project, created without providing the `@igniteui/angular-schematics` collection as described above, you can add the Ignite UI for Angular product, using the following command: + +```cmd +ng add igniteui-angular +``` + +The new application is created in a directory with the same name (`newAngularProject`). There are several project templates from which you can choose when creating an Ignite UI for Angular application: + +| template id | template description | +| --- | --- | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with side navigation drawer | +| side-nav-auth | Side navigation project extended with user authentication module. <br> [Angular Authentication Project Template](auth-template.md) topic covers the project template in detail. | + +Additionally, you can specify **arguments** to control the theme or skip packages install: + +<details> + <summary><u>name</u></summary> + <p> + <code>name</code> (alias: <code>-n</code>) + </p> + <p> + The name of the application. The application is created inside a directory with the same name. + </p> +</details> + +<details> + <summary><u>framework</u><span align="right"><strong> (Ignite UI CLI only)</strong></span></summary> + <p> + <code>--framework</code> (alias: <code>-f</code>) <em>default value: "jquery"</em> + </p> + <p> + Framework to setup project for. The supported frameworks are jQuery, Angular and React. + </p> +</details> + +<details> + <summary><u>type</u><span align="right"><strong> (Ignite UI CLI only)</strong></span></summary> + <p> + <code>--type</code> (alias: <code>-t</code>) + </p> + <p> + The available project types depend on the selected framework. + </p> +</details> + +<details> + <summary><u>theme</u></summary> + <p> + <code>--theme</code> (alias: <code>-th</code>) + </p> + <p> + Project theme (depends on project type). + </p> +</details> + +<details> + <summary><u>skip-git</u></summary> + <p> + <code>--skip-git</code> (alias: <code>--sg</code>) + </p> + <p> + When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skip-git configuration property is used. + </p> +</details> + +<details> + <summary><u>skip-install</u></summary> + <p> + <code>--skip-install</code> (alias: <code>--si</code>) + </p> + <p> + The <code>new</code> command will install package dependencies on project creation. Passing this flag will skip the initial installation. + </p> +</details> + +<details> + <summary markdown='span'><u>template</u></summary> + <p> + <code>--template</code> + </p> + <p> + Use this option if there are different project templates for a specific framework type. + Currently this option is available only for Ignite UI for Angular igx-ts project types.</p> +</details> + +## Add template + +To add one of the [available Ignite UI Angular templates](component-templates.md) you need to provide template ID and a name for the new component or use the [Step-by-Step Guide](step-by-step-guide-using-cli.md#add-view). Their usage is supported only inside existing projects created with the Angular Schematics, Ignite UI CLI or where Ignite UI for Angular has been [installed using `ng add`](../getting-started.md#installing-ignite-ui-for-angular). + +With Schematics, use `ng generate` with the Ignite UI for Angular collection and `component [template] [name]`: + +```cmd +ng g @igniteui/angular-schematics:component grid newGrid +``` + +List of all the [available templates](component-templates.md). + +Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route: + +<details> + <summary><u>module</u></summary> + <p> + <code>--module</code> (alias: <code>-m</code>) + </p> + <p> + <i>note: module argument is applicable only in Angular projects.</i> + </p> + <p> + Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered: + </p> + <code>ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts</code> + <br> +</details> + +<details> + <summary><u>skip-route</u></summary> + <p> + <code>--skip-route</code> (alias: <code>-srk</code>) + </p> + <p> + Don't auto-generate an app navigation route for the new component + </p> +</details> + +## Run the application + +The `start` schematic will build the application, start a web server and open it in your default browser. + +```cmd +ng g @igniteui/angular-schematics:start +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-getting-started-with-cli.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-getting-started-with-cli.md new file mode 100644 index 000000000..3d4ef45b0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-getting-started-with-cli.md @@ -0,0 +1,199 @@ +--- +title: Getting Started with Ignite UI CLI | Ignite UI for Angular | Infragistics +_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. +_keywords: angular cli, ignite ui for angular, infragistics +_tocName: Getting Started with Ignite UI CLI +--- + +## Getting Started with Ignite UI CLI + +If you are creating a new Angular application from scratch, we recommend using the approach described bellow as it will provide you with an user-friendly guided experience. The guide will lead you through all the setup options and your project will be scaffolded in a blink of an eye. + +To get started install [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) globally: + +```cmd +npm install -g igniteui-cli +``` + +If you are using `yarn` package manager: + +```cmd +yarn global add igniteui-cli +``` + +### Using guided experience + +The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI CLI](step-by-step-guide-using-cli.md). + +To activate the guide using the Ignite UI CLI run: + +```cmd +ig +``` + +or + +```cmd +ig new +``` + +<div style="display:inline-block;"> + <a style="background: url(../../../images/general/buildCLIapp.gif); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;" + href="https://youtu.be/QK_NsdtdA70" target="_blank"> + <img src="../../../images/general/play.svg" alt="Play video" style="vertical-align: middle;" /> + </a> + <p style="text-align:center;">Building Your First Ignite UI CLI App</p> +</div> + +## Create a new project + +When using [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) you need to provide `angular` as framework and `igx-ts` as your project type argument to the `new` command: + +```cmd +ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav +``` + +>[!NOTE] +> As of `v13.1.0`, the `igx-ts` project type will generate a project that uses standalone components by default. If you prefer to use the module-based bootstrapping instead you can set the `type` to be `igx-ts-legacy`. + +The new application is created in a directory with the same name (`newAngularProject`). There are several project templates from which you can choose when creating an Ignite UI for Angular application: + +| template id | template description | +| --- | --- | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with side navigation drawer | +| side-nav-auth | Side navigation project extended with user authentication module. <br> [Angular Authentication Project Template](auth-template.md) topic covers the project template in detail. | + +Additionally, you can specify **arguments** to control the theme or skip packages install: + +<details> + <summary><u>name</u></summary> + <p> + <code>name</code> (alias: <code>-n</code>) + </p> + <p> + The name of the application. The application is created inside a directory with the same name. + </p> +</details> + +<details> + <summary><u>framework</u><span align="right"><strong> (Ignite UI CLI only)</strong></span></summary> + <p> + <code>--framework</code> (alias: <code>-f</code>) <em>default value: "jquery"</em> + </p> + <p> + Framework to setup project for. The supported frameworks are jQuery, Angular and React. + </p> +</details> + +<details> + <summary><u>type</u><span align="right"><strong> (Ignite UI CLI only)</strong></span></summary> + <p> + <code>--type</code> (alias: <code>-t</code>) + </p> + <p> + The available project types depend on the selected framework. + </p> +</details> + +<details> + <summary><u>theme</u></summary> + <p> + <code>--theme</code> (alias: <code>-th</code>) + </p> + <p> + Project theme (depends on project type). + </p> +</details> + +<details> + <summary><u>skip-git</u></summary> + <p> + <code>--skip-git</code> (alias: <code>--sg</code>) + </p> + <p> + When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skip-git configuration property is used. + </p> +</details> + +<details> + <summary><u>skip-install</u></summary> + <p> + <code>--skip-install</code> (alias: <code>--si</code>) + </p> + <p> + The <code>new</code> command will install package dependencies on project creation. Passing this flag will skip the initial installation. + </p> +</details> + +<details> + <summary markdown='span'><u>template</u></summary> + <p> + <code>--template</code> + </p> + <p> + Use this option if there are different project templates for a specific framework type. + Currently this option is available only for Ignite UI for Angular igx-ts project types.</p> +</details> + +## Add template + +To add one of the [available Ignite UI Angular templates](component-templates.md) you need to provide template ID and a name for the new component or use the [Step-by-Step Guide](step-by-step-guide-using-cli.md#add-view). Their usage is supported only inside existing projects created with the Ignite UI CLI, Angular Schematics or where Ignite UI for Angular has been [installed using `ng add`](../getting-started.md#installing-ignite-ui-for-angular). + +We use the `ig add [template] [name]` command: + +```cmd +ig add grid newGrid +``` + +To get a list of all the [available templates](component-templates.md) you can also execute the [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) command in your project directory. + +Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route: + +<details> + <summary><u>module</u></summary> + <p> + <code>--module</code> (alias: <code>-m</code>) + </p> + <p> + <i>note: module argument is applicable only in Angular projects.</i> + </p> + <p> + Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered: + </p> + <code>ig add combo newCombo --module=myModule/myModule.module.ts</code> +</details> + +<details> + <summary><u>skip-route</u></summary> + <p> + <code>--skip-route</code> (alias: <code>-srk</code>) + </p> + <p> + Don't auto-generate an app navigation route for the new component + </p> +</details> + +## Run the application + +The `start` command will build the application, start a web server and open it in your default browser: + +```cmd +ig start +``` + +## Ignite UI CLI Commands + +A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): + +| Command | Alias | Description | +| --- | --- | --- | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-step-by-step-guide-using-angular-schematics.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-step-by-step-guide-using-angular-schematics.md new file mode 100644 index 000000000..4cf6a6630 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-step-by-step-guide-using-angular-schematics.md @@ -0,0 +1,79 @@ +--- +title: Step-by-Step Guide Using Ignite UI for Angular Schematics | Ignite UI for Angular | Infragistics +_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. +_keywords: angular cli, ignite ui for angular, infragistics +_tocName: Step by Step guide using Ignite UI for Angular Schematics +--- + +# Step-by-Step Guide Using Ignite UI for Angular Schematics + +If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application, as well as update project previously created with the [Ignite UI Angular Schematics](getting-started-with-angular-schematics.md). + +To activate the guide using the Schematics collection run: + +```cmd +ng new --collection="@igniteui/angular-schematics" +``` + +This will activate the step by step mode and you will be asked a series of questions to help you create your new project. + +<div style="display:inline-block;"> + <a style="background: url(../../../images/general/buildCLIapp.gif); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;" + href="https://youtu.be/QK_NsdtdA70" target="_blank"> + <img src="../../../images/general/play.svg" alt="Play video" style="vertical-align: middle;" /> + </a> +</div> + +> [!Note] +> Step by step mode relies on `Inquirer.js`, see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) + + +## Create new project + +First you will be prompted to choose the way your application will be bootstrapped, using modules or standalone components: + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-project-type.png" alt="Step by step project type" /> + +Then you can enter a name for your application: + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-new-project-name.png" alt="Step by step new project name" /> + +Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-new-project-template.png" alt="Step by step new project template" /> + +The next step is to choose a theme for your application. If you select the default option a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme is included in your project's `angular.json`. The custom option generates code for a color palette and theme with our [Theming API](../../themes.md) in the `app/styles.scss`. + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-new-project-theme.png" alt="Step by step new project theme" /> + +After completing the above steps the application structure will be generated, git repository will be initialized and the project will be committed. Then you will be asked if you want to complete the process or to add a new view to your application: + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-new-project-action.png" alt="Step by step new project action" /> + +## Add view + +Ignite UI CLI supports multiple component templates, as well as some more elaborated scenario templates, that can be added to a project. This mode can be activated either after completing project creation or inside an existing project using the commands below. + +To activate the the step by step mode using the Schematics collection run the `component`(alias:`c`) schematic: + +```bash +ng g @igniteui/angular-schematics:component +``` + +In case you choose to add a new control, you will be provided with a [list of the available templates](component-templates.md#component-templates), grouped in categories. + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-template-group.png" alt="Step by step template group" /> + +Use the arrow keys to navigate through the options and ENTER to choose the selected one. + +For some templates, like `Custom Grid`, for example you will be provided with a list of options that you might enable. Options can be toggled with the SPACE key: + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-component-features.png" alt="Step by step component features" /> + +If you choose to add a scenario to your application you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-scenario-templates.png" alt="Scenario templates" /> + +After adding a template to your application, you will be asked weather you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. + +You can always add more Ignite UI for Angular views to your application at latter moment using the `ng g @igniteui/angular-schematics:c [template] [name]` command. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-step-by-step-guide-using-cli.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-step-by-step-guide-using-cli.md new file mode 100644 index 000000000..c95e85135 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/cli-step-by-step-guide-using-cli.md @@ -0,0 +1,85 @@ +--- +title: Step-by-Step Guide Using Ignite UI CLI| Ignite UI for Angular | Infragistics +_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. +_keywords: angular cli, ignite ui for angular, infragistics +_tocName: Step by Step guide using Ignite UI CLI +--- + +# Step-by-Step Guide using Ignite UI CLI + +If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application, as well as update project previously created with the [Ignite UI CLI](getting-started-with-cli.md). + +To start the guide using the Ignite UI CLI, simply run the `ig` command: + +```bash +ig +``` + +or + +```bash +ig new +``` + +This will activate the step by step mode and you will be asked a series of questions to help you create your new project. + +<div style="display:inline-block;"> + <a style="background: url(../../../images/general/buildCLIapp.gif); display:flex; justify-content:center; min-width:540px; min-height:315px;" + href="https://youtu.be/QK_NsdtdA70" target="_blank"> + <img src="../../../images/general/play.svg" alt="Play video" style="vertical-align: middle;" /> + </a> +</div> + +> [!Note] +> Step by step mode relies on `Inquirer.js`, see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) + + +## Create new project + +First you will be prompted to enter a name for your application: + + + +After selecting `Angular` as a framework, you will be prompted to choose the type of the project that is to be generated: +<img class="responsive-img" src="../../../images/general/ig-step-by-step-project-type-cli.png" alt="Step by step project type" /> + +Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: + + + +The next step is to choose a theme for your application. If you select the default option a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme is included in your project's `angular.json`. The custom option generates code for a color palette and theme with our [Theming API](../../themes.md) in the `app/styles.scss`. + + + +After completing the above steps the application structure will be generated, git repository will be initialized and the project will be committed. Then you will be asked if you want to complete the process or to add a new view to your application: + + + +## Add view + +Ignite UI CLI supports multiple component templates, as well as some more elaborated scenario templates, that can be added to a project. This mode can be activated either after completing project creation or inside an existing project using the commands below. + +When using Ignite UI CLI, run the `add` command: + +```bash +ig add +``` + +In case you choose to add a new control, you will be provided with a [list of the available templates](component-templates.md#component-templates), grouped in categories. + + + +Use the arrow keys to navigate through the options and ENTER to choose the selected one. + +For some templates, like `Custom Grid`, for example you will be provided with a list of options that you might enable. Options can be toggled with the SPACE key: + + + +If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): + +<img class="responsive-img" src="../../../images/general/ig-step-by-step-scenario-templates.png" alt="Scenario templates" /> + +After adding a template to your application, you will be asked whether you want to complete the process or proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. + +You can always add more Ignite UI for Angular views to your application at a later moment using the [`add`](getting-started-with-cli.md#add-template) command with the following syntax: +`ig add [template] [name]`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md new file mode 100644 index 000000000..76409a35e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md @@ -0,0 +1,328 @@ +--- +title: ComboBox Features - MIT license +_description: Combo control exposes several of features including data and value binding, custom values, filtering, grouping, etc. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Features, Angular Combo Features, Angular Combo Data Binding, Angular Combo Value Binding, Angular Combo Data Filtering, Angular Combo Grouping, Angular Combo Custom Values +_license: MIT +_tocName: Features +--- + +# ComboBox Features + +<p class="highlight"> +The Ignite UI for Angular ComboBox control exposes several features including data and value binding, custom values, filtering, grouping, etc. +</p> + +## Angular ComboBox Features Example + +The following demo demonstrates some of the combobox features that are enabled/disabled at runtime: + + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { localData } from './local-data'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-combo', + styleUrls: ['./combo-features.component.scss'], + templateUrl: './combo-features.component.html', + imports: [IgxComboComponent, IgxSwitchComponent, FormsModule] +}) +export class ComboFeaturesComponent implements OnInit{ + @ViewChild('combo', { read: IgxComboComponent, static: true }) public combo: IgxComboComponent; + // eslint-disable-next-line @typescript-eslint/naming-convention + public GROUP_KEY = 'region'; + public lData: any[]; + public disableFiltering = false; + public showSearchCaseIcon = false; + public customValues = true; + public disabled = false; + + public ngOnInit() { + this.lData = localData; + } + + public handleAddition(event) { } + + public enableGroups(event) { + this.combo.groupKey = event.checked ? this.GROUP_KEY : ''; + } +} +``` +```html +<igx-combo #combo class="combo" [data]="lData" [displayKey]="'field'" [valueKey]="'field'" + placeholder="Location(s)" searchPlaceholder="Search..." [allowCustomValues]="customValues" + (addition)="handleAddition($event)" [disableFiltering]="disableFiltering" + [showSearchCaseIcon]="showSearchCaseIcon" [itemsMaxHeight]="255" [disabled]="disabled"> +</igx-combo> + +<igx-switch [(ngModel)]="disableFiltering">Disable Filtering</igx-switch><br /> +<igx-switch [disabled]="disableFiltering" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch><br /> +<igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch><br /> +<igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch><br /> +<igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch> +``` +```scss +.combo, igx-switch { + margin: 8px; + width: 430px; +} +``` + +<div class="divider--half"></div> + +## Usage + +### First Steps + +To get started with the combobox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. Our sample also uses the [igx-switch](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxswitchcomponent.html) component to toggle combobox properties' values, so we will need the `IgxSwitchModule` as well: + +```typescript +import { IgxComboModule } from 'igniteui-angular/combo'; +import { IgxSwitchModule } from 'igniteui-angular/switch'; +// import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxComboModule, + IgxSwitchModule, + ... + ] +}) +export class AppModule {} +``` + +### Template Configuration + +```html +<div class="combo-container"> + <igx-combo #combo [data]="lData" displayKey="field" valueKey="field" + [allowCustomValues]="customValues" + [disableFiltering]="disableFiltering" + [showSearchCaseIcon]="showSearchCaseIcon" + [disabled]="disabled"> + </igx-combo> +</div> +<div class="switch-container"> + <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch> + <igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch> + <igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch> + <igx-switch [(ngModel)]="disableFiltering">Disable Filtering</igx-switch> + <igx-switch *ngIf="!disableFiltering" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch> +</div> +``` + +### Component Definition + +Note that grouping is enabled/disabled by setting the [groupKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#groupKey) property to a corresponding data source entity or setting it to an empty string. + +```typescript + @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent; + + public disableFiltering = false; + public showSearchCaseIcon = true; + public customValues = true; + public disabled = false; + + public enableGroups(event) { + this.combo.groupKey = event.checked ? 'region' : ''; + } +``` + +## Features + +### Data Binding + +The following code snippet illustrates a basic usage of the [igx-combo](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) bound to a local data source. The [valueKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#valueKey) specifies which property of the data entries will be stored for the combobox's selection and the [displayKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#displayKey) specifies which property will be used for the combobox text: + +```html +<igx-combo [data]="lData" valueKey="ProductID" displayKey="ProductName"></igx-combo> +``` + +```typescript +import { localData } from './local-data'; + +export class ComboDemo implements OnInit { + public lData: any[]; + + public ngOnInit() { + this.lData = localData; + } +} +``` + +> [!Note] +> If the `displayKey` property is omitted then the `valueKey` entity will be used instead. + +Follow the [ComboBox Remote Binding topic](combo-remote.md) for more details about binding the combobox component with remote data. + +### Custom Overlay Settings + +The combobox component allows users to change the way a list of items is shown. This can be done by defining [Custom OverlaySettings](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) and passing them to the [ComboBox's OverlaySettings](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#overlaySettings) input: + +```typescript +export class CustomOverlayCombo { + ... + public customSettings: OverlaySettings = { + positionStrategy: new GlobalPositionStrategy( + { + openAnimation: scaleInCenter, + closeAnimation: scaleOutCenter + }), + modal: true, + closeOnOutsideClick: true, + }; +} +``` + +```html +<igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo> +``` + +If everything is set up correctly, the combobox's list will display centered, using the [GlobalPositionStrategy](overlay-position.md#global): + + +```typescript +import { Component } from '@angular/core'; +import { GlobalPositionStrategy, OverlaySettings } from 'igniteui-angular/core'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { scaleInCenter, scaleOutCenter } from 'igniteui-angular/animations'; + +@Component({ + selector: 'app-combo-overlay', + templateUrl: 'combo-overlay.component.html', + styleUrls: ['combo-overlay.component.scss'], + imports: [IgxComboComponent] +}) +export class ComboOverlayComponent { + public items = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }, + { name: 'Option 4' }, { name: 'Option 5' }, { name: 'Option 6' }, + { name: 'Option 7' }, { name: 'Option 8' }, { name: 'Option 9' }]; + + public overlaySettings: OverlaySettings = { + positionStrategy: new GlobalPositionStrategy({ openAnimation: scaleInCenter, closeAnimation: scaleOutCenter }), + modal: true, + closeOnOutsideClick: true + }; +} +``` +```html +<igx-combo + placeholder="Choose option(s)" + [data]="items" + valueKey="name" + displayKey="name" + [overlaySettings]="overlaySettings"> +</igx-combo> +``` +```scss +.igx-combo { + width: 430px; + margin: 8px; +} +``` + + +<div class="divider--half"></div> + +> [!Note] +> The combobox component uses the [AutoPositionStrategy](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/autopositionstrategy.html) as a default position strategy. + +### Filtering + +By default, filtering in the combobox is enabled. It can be disabled by setting the [disableFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html#disableFiltering) property to true. + +Filtering options can be further enhanced by enabling the search case sensitivity. To display the case-sensitive icon in the search input, set the [showSearchCaseIcon](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#showSearchCaseIcon) property to true: + +```html +<igx-combo [disableFiltering]="true" [showSearchCaseIcon]="true"></igx-combo> +``` + +<div class="divider--half"></div> + +### Custom Values + +The [allowCustomValues](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#allowCustomValues) property controls whether custom values can be added to the collection. If it is enabled, a missing item could be included using the UI of the combobox. + +```html +<igx-combo [allowCustomValues]="true"></igx-combo> +``` + +<div class="divider--half"></div> + +### Search Input Focus + +The combobox's [autoFocusSearch](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#autoFocusSearch) property controls if the search input should receive focus when a combobox's dropdown list is opened. By default, the property is set to `true`. When set to `false`, the focus goes to the combobox's items container. For mobile devices, this can be used to prevent the software keyboard from popping up when opening the combobox's dropdown list. + +```html +<igx-combo [autoFocusSearch]="false"></igx-combo> +``` + +<div class="divider--half"></div> + +### Disable ComboBox + +You can disable a combobox using the following code: + +```html +<igx-combo [disabled]="true"></igx-combo> +``` + +<div class="divider--half"></div> + +### Grouping + +Defining a combobox's `groupKey` option will group the items, according to the provided key: + +```html +<igx-combo [groupKey]="'primaryKey'"></igx-combo> +``` + +You can set whether groups should be sorted in ascending or descending order. By default the sorting order is ascending. + +```html +<igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo> +``` + +```typescript +... +import { SortingDirection } from 'igniteui-angular/core' +// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package + +export class ComboDemo { + ... + public groupSortingDirection: SortingDirection = SortingDirection.Asc; +} +``` + +<div class="divider--half"></div> + +## API References + +<div class="divider--half"></div> + +- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) + +Additional components and/or directives with relative APIs that were used: + +- [IgxSwitchComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxswitchcomponent.html) + +## Additional Resources + +<div class="divider--half"></div> + +- [ComboBox Component](combo.md) +- [ComboBox Remote Binding](combo-remote.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md new file mode 100644 index 000000000..c8e62388d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-remote.md @@ -0,0 +1,403 @@ +--- +title: ComboBox Remote Binding - MIT license +_description: The igx-combo exposes API that allows to bind a combo to a remote service and retrieve data on demand. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Combo controls, Angular Combo Remote Binding +_license: MIT +_tocName: Remote Binding +--- + +# ComboBox Remote Binding + +<p class="highlight"> +The Ignite UI for Angular ComboBox Component exposes an API that allows binding a combobox to a remote service and retrieving data on demand. +</p> + +## Angular ComboBox Remote Binding Example + +The sample below demonstrates remote binding using the [dataPreLoad](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#dataPreLoad) property to load new chunk of remote data: + + +```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IComboSearchInputEventArgs, IComboSelectionChangingEventArgs, IgxComboComponent } from 'igniteui-angular/combo'; +import { IForOfState } from 'igniteui-angular/directives'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { RemoteNWindService } from '../../../services/remoteNwind.service'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + providers: [RemoteNWindService], + selector: 'app-combo-remote', + styleUrls: ['./combo-remote.component.scss'], + templateUrl: './combo-remote.component.html', + imports: [IgxComboComponent, IgxToastComponent, AsyncPipe] +}) +export class ComboRemoteComponent implements OnInit, AfterViewInit { + private remoteService = inject(RemoteNWindService); + cdr = inject(ChangeDetectorRef); + + @ViewChild('loadingToast') + public loadingToast: IgxToastComponent; + + @ViewChild('remoteCombo') + public remoteCombo: IgxComboComponent; + + public prevRequest: any; + public rData: any; + + private searchText: string = null; + private defaultVirtState: IForOfState = { chunkSize: 6, startIndex: 0 }; + private currentVirtState: IForOfState = { chunkSize: 6, startIndex: 0 }; + private itemID: number = 1; + private itemCount: number = 0; + private hasSelection: boolean; + private additionalScroll: number = 0; + + public ngOnInit() { + this.rData = this.remoteService.remoteData; + } + + public ngAfterViewInit() { + const initSize = { + startIndex: 0, + chunkSize: Math.ceil(250 / this.remoteCombo.itemHeight) + }; + this.remoteService.getData(initSize, null, (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + this.itemCount = this.remoteCombo.totalItemCount; + }); + } + + public dataLoading() { + if (this.prevRequest) { + this.prevRequest.unsubscribe(); + } + this.loadingToast.positionSettings.verticalDirection = VerticalAlignment.Middle; + this.loadingToast.autoHide = false; + this.loadingToast.open('Loading Remote Data...'); + this.cdr.detectChanges(); + + this.prevRequest = this.remoteService.getData( + this.remoteCombo.virtualizationState, + this.searchText, + (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + this.loadingToast.close(); + this.cdr.detectChanges(); + } + ); + } + + public handleSearchInputUpdate(searchData: IComboSearchInputEventArgs) { + this.currentVirtState.startIndex = 0; + this.currentVirtState.chunkSize = Math.ceil(this.remoteCombo.itemsMaxHeight / this.remoteCombo.itemHeight); + this.searchText = searchData?.searchText || ''; + this.remoteService.getData( + this.searchText ? this.currentVirtState : this.defaultVirtState, + this.searchText, + (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + } + ); + } + + public onOpened() { + const scroll: number = this.remoteCombo.virtualScrollContainer.getScrollForIndex(this.itemID - 1); + this.remoteCombo.virtualScrollContainer.scrollPosition = scroll + this.additionalScroll; + this.cdr.detectChanges(); + } + + public onClosing() { + this.searchText = ''; + } + + public onClosed() { + this.currentVirtState.startIndex = (this.itemID || 1) - 1; + this.remoteService.getData( + this.currentVirtState, + this.searchText, + (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + this.cdr.detectChanges(); + } + ); + } + + public handleSelectionChanging(evt: IComboSelectionChangingEventArgs) { + this.hasSelection = !!evt?.newValue.length; + + if (!this.hasSelection) { + this.itemID = 1; + this.currentVirtState = this.defaultVirtState; + return; + } + + const currentSelection = evt.newValue[evt.newValue.length - 1] + this.currentVirtState.chunkSize = Math.ceil(this.remoteCombo.itemsMaxHeight / this.remoteCombo.itemHeight); + + this.itemCount === currentSelection ? + this.additionalScroll = this.remoteCombo.itemHeight : + this.additionalScroll = 0; + + if (this.itemCount - currentSelection >= this.currentVirtState.chunkSize - 1) { + this.itemID = this.currentVirtState.startIndex = currentSelection; + } else { + this.itemID = this.currentVirtState.startIndex = this.itemCount - (this.currentVirtState.chunkSize - 1); + } + } +} +``` +```html +<igx-combo #remoteCombo class="combo" + [itemsMaxHeight]="250" + [itemHeight]="48" + [data]="rData | async" + [valueKey]="'ProductID'" + [displayKey]="'ProductName'" + (dataPreLoad)="dataLoading()" + (searchInputUpdate)="handleSearchInputUpdate($event)" + (selectionChanging)="handleSelectionChanging($event)" + (closing)="onClosing()" (opened)="onOpened()" + (closed)="onClosed()" + placeholder="Location(s)"> +</igx-combo> +<igx-toast #loadingToast></igx-toast> +``` +```scss +.combo { + margin: 8px; + width: 430px; +} +``` + + +## Usage + +To get started with the ComboBox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. In this demo, a remote service is used for server requests, therefore, we also need to include the `HttpClientModule`: + +```typescript +import { IgxComboModule } from 'igniteui-angular/combo'; +// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package + +import { HttpClientModule } from '@angular/common/http'; + +@NgModule({ + imports: [ + ... + IgxComboModule, + HttpClientModule, + ... + ] +}) +export class AppModule {} +``` + +### Define Remote Service + +When binding a combobox to remote data, we need to have an available service that will load data on demand from a server. The combobox component exposes the [virtualizationState](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#virtualizationState) property which gives the current state of a combobox - the first index and the number of items that need to be loaded. In order to show properly the scroll size, the [totalItemCount](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#totalItemCount) property should have value that corresponds to the total items on the server. + +The code below defines a simple service that has a `getData()` method, which receives combobox's current state information and returns data as an observable: + +```typescript +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { IForOfState } from 'igniteui-angular/directives'; +// import { IForOfState } from '@infragistics/igniteui-angular'; for licensed package +import { BehaviorSubject, Observable } from 'rxjs'; + +@Injectable() +export class RemoteService { + public remoteData: Observable<any[]>; + private _remoteData: BehaviorSubject<any[]>; + + constructor(private http: HttpClient) { + this._remoteData = new BehaviorSubject([]); + this.remoteData = this._remoteData.asObservable(); + } + + // Use combobox current virtualization state and search text to build URL and request the new data. + public getData(data?: IForOfState, searchText?: string, cb?: (any) => void): any { } +} +``` + +### Binding ComboBox to Remote Service + +When data is returned from a service as an observable, we can set it to the combobox component using the [async](https://angular.io/api/common/AsyncPipe) pipe: + +```html +<igx-combo [data]="rData | async" + [valueKey]="'ProductID'" + [displayKey]="'ProductName'" + (dataPreLoad)="dataLoading($event)" + (searchInputUpdate)="handleSearchInputUpdate($event)" + (selectionChanging)="handleSelectionChanging($event)" + (closing)="onClosing()" + (opened)="onOpened()" + (closed)="onClosed()" + [disableFiltering]="false"> +</igx-combo> +``` + +Here are some common cases when the combobox component needs to request new data: + - when the combobox is initialized + - when we scroll combobox's list - it will emit `dataPreLoad` along with the new combobox `virtualizationState`, which allows making a new request to the remote service. + - when searching in a combobox - we need to make request to filter remote results. + - when combobox is opened - we need to clear the results from any previous filter operations. + +Below are listed the handlers that listen to the already defined actions and execute requests to the server: + +```typescript +import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +// import { IgxComboComponent } from '@infragistics/igniteui-angular'; for licensed package + +import { RemoteService } from '../../grid/services/remote.service'; + +@Component({ + providers: [RemoteService], + selector: 'app-combo-remote', + styleUrls: ['./combo-remote.component.scss'], + templateUrl: './combo-remote.component.html' +}) +export class ComboRemoteComponent implements OnInit { + @ViewChild('remoteCombo', { read: IgxComboComponent }) public remoteCombo: IgxComboComponent; + + public prevRequest: any; + public rData: any; + + private searchText: string = null; + private defaultVirtState: IForOfState = { chunkSize: 6, startIndex: 0 }; + + private currentVirtState: IForOfState = { chunkSize: 6, startIndex: 0 }; + private itemID: number = 1; + private itemCount: number = 0; + private hasSelection: boolean; + private additionalScroll: number = 0; + + constructor(private remoteService: RemoteService, public cdr: ChangeDetectorRef) { } + + public ngOnInit() { + this.rData = this.remoteService.remoteData; + } + + public ngAfterViewInit() { + const initSize = { + startIndex: 0, + chunkSize: Math.ceil(250 / this.remoteCombo.itemHeight) + }; + this.remoteService.getData(initSize, null, (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + this.itemCount = this.remoteCombo.totalItemCount; + }); + } + + public dataLoading(evt) { + if (this.prevRequest) { + this.prevRequest.unsubscribe(); + } + this.prevRequest = this.remoteService.getData( + this.remoteCombo.virtualizationState, + this.searchText, + (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + this.cdr.detectChanges(); + }); + } + + public handleSearchInputUpdate(searchData: IComboSearchInputEventArgs) { + this.currentVirtState.startIndex = 0; + this.currentVirtState.chunkSize = Math.ceil(this.remoteCombo.itemsMaxHeight / this.remoteCombo.itemHeight); + this.searchText = searchData?.searchText || ''; + this.remoteService.getData( + this.searchText ? this.currentVirtState : this.defaultVirtState, + this.searchText, + (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + } + ); + } + + public onOpened() { + const scroll: number = this.remoteCombo.virtualScrollContainer.getScrollForIndex(this.itemID - 1); + this.remoteCombo.virtualScrollContainer.scrollPosition = scroll + this.additionalScroll; + this.cdr.detectChanges(); + } + + public onClosing() { + this.searchText = ''; + } + + public onClosed() { + this.currentVirtState.startIndex = (this.itemID || 1) - 1; + this.remoteService.getData( + this.currentVirtState, + this.searchText, + (data) => { + this.remoteCombo.totalItemCount = data['@odata.count']; + this.cdr.detectChanges(); + } + ); + } + + public handleSelectionChanging(evt: IComboSelectionChangingEventArgs) { + this.hasSelection = !!evt?.newSelection.length; + + if (!this.hasSelection) { + this.itemID = 1; + this.currentVirtState = this.defaultVirtState; + return; + } + + const currentSelection = evt.newSelection[evt.newSelection.length - 1] + this.currentVirtState.chunkSize = Math.ceil(this.remoteCombo.itemsMaxHeight / this.remoteCombo.itemHeight); + + this.itemCount === currentSelection ? + this.additionalScroll = this.remoteCombo.itemHeight : + this.additionalScroll = 0; + + if (this.itemCount - currentSelection >= this.currentVirtState.chunkSize - 1) { + this.itemID = this.currentVirtState.startIndex = currentSelection; + } else { + this.itemID = this.currentVirtState.startIndex = this.itemCount - (this.currentVirtState.chunkSize - 1); + } + } +} +``` + +> [!Note] +> Anytime new data is loaded, we update the `totalItemCount` property, in order to have proper size of the list's scroll bar. In that case, the service returns total size using the property `@odata.count`. +> [!Note] +> A service needs to be included as a provider. + +### Handling Selection + +When using a combobox bound to remote data loaded in chunks and dealing with a more complex data type (e.g. objects), it is necessary to define a `valueKey`. As stated in the [combobox topic](combo.md#data-value-and-display-properties), when no `valueKey` is specified, the combobox will try to handle selection by `equality (===)`. Since the objects that will be marked as selected will not be the same as the object that are continuously loaded, the selection will fail. + +> [!Note] +> When binding a combobox to remote data, make sure to specify a `valueKey`, representing a property that is unique to each item. + +When the combobox is bound to remote data, setting value/selected items through API will only take into account the items that are loaded in the current chunk. If you want to set an initial value, make sure those specific items are loaded before selecting. + +## API References + +<div class="divider--half"></div> + +- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) + +## Additional Resources + +<div class="divider--half"></div> + +- [ComboBox Component](combo.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md new file mode 100644 index 000000000..fc7627044 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-templates.md @@ -0,0 +1,263 @@ +--- +title: ComboBox Templates - MIT license +_description: Custom templates for different areas of the igx-combo component can be defined, including items, header, footer, empty list and adding button. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Templates, Angular Combo Templates +_license: MIT +_tocName: Templates +--- + +# ComboBox Templates + +<p class="highlight"> +The Ignite UI for Angular ComboBox Component allows defining custom templates for different areas such as header, footer, items, empty list and adding button. +</p> + +## Angular ComboBox Templates Example + + +```typescript +import { ChangeDetectorRef, Component, OnInit, inject } from '@angular/core'; +import { localData } from './local-data'; +import { IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective } from 'igniteui-angular/combo'; +import { IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-combo-template', + styleUrls: ['./combo-template.component.scss'], + templateUrl: './combo-template.component.html', + imports: [IgxComboComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxComboItemDirective, IgxComboHeaderItemDirective, IgxComboHeaderDirective, IgxComboFooterDirective, IgxComboAddItemDirective, IgxButtonDirective, IgxComboToggleIconDirective, IgxComboClearIconDirective, IgxComboEmptyDirective] +}) +export class ComboTemplateComponent implements OnInit { + cdr = inject(ChangeDetectorRef); + + public lData: any[]; + + public ngOnInit() { + this.lData = localData; + } +} +``` +```html +<igx-combo #templateCombo class="combo" [data]="lData" [valueKey]="'field'" [groupKey]="'region'" + [itemsMaxHeight]="250" searchPlaceholder="Search..." [allowCustomValues]="true"> + <label igxLabel>Locations</label> + <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix> + <ng-template igxComboItem let-display let-key="valueKey"> + <div class="item"> + <span class="state">{{ display[key] }} - </span> + <span class="region">{{ display.region }}</span> + </div> + </ng-template> + + <ng-template igxComboHeaderItem let-display let-key="groupKey"> + <div class="header-item">Region: {{ display[key] }}</div> + </ng-template> + + <ng-template igxComboHeader> + <div class="header-class">State - Region</div> + </ng-template> + + <ng-template igxComboFooter> + <div class="footer-class">Infragistics 2018</div> + </ng-template> + + <ng-template igxComboAddItem> + <button igxButton="flat"> + Add Location + </button> + </ng-template> + + <ng-template igxComboToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon> + </ng-template> + + <ng-template igxComboClearIcon> + <igx-icon>cancel</igx-icon> + </ng-template> + + <ng-template igxComboEmpty> + <span class="empty-class">No available states</span> + </ng-template> +</igx-combo> +``` +```scss +.combo { + margin: 8px; + width: 430px; +} + +.header-item { + text-transform: capitalize; +} + +.header-class, .footer-class { + text-align: center; + padding: 4px; + color: var(--ig-secondary-500); +} + +.empty-class { + margin: 8px; +} +``` + + +## Usage + +To get started with the ComboBox component, first you need to import the `IgxComboModule` in your **app.module.ts** file: + +```typescript +import { IgxComboModule } from 'igniteui-angular/combo'; +// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxComboModule, + ... + ] +}) +export class AppModule {} +``` + +## Template Types + +When defining combobox templates, you need to reference them using the following predefined reference names: + +### Item template + +Use selector `[igxComboItem]`: + +```html +<igx-combo #templateCombo [data]="lData" [valueKey]="'field'" > + <ng-template igxComboItem let-display let-key="valueKey"> + <div class="item"> + <span class="state">{{ display[key] }}</span> + <span class="region">{{ display.region }}</span> + </div> + </ng-template> +</igx-combo> +``` + +### Header Item template + +Use selector `[igxComboHeaderItem]`: + +```html +<igx-combo #templateCombo [data]="lData" [groupKey]="'region'"> + <ng-template igxComboHeaderItem let-display let-key="groupKey"> + <div class="header-item">Region: {{ display[key] }}</div> + </ng-template> +</igx-combo> +``` + +### Header template + +Use selector `[igxComboHeader]`: + +```html +<igx-combo> + <ng-template igxComboHeader> + <div class="header-class">State - Region</div> + </ng-template> +</igx-combo> +``` + +### Footer template + +Use selector `[igxComboFooter]`: + +```html +<igx-combo> + <ng-template igxComboFooter> + <div class="footer-class">Infragistics 2018</div> + </ng-template> +</igx-combo> +``` + +### Empty template + +Use selector `[igxComboEmpty]`: + +```html +<igx-combo> + <ng-template igxComboEmpty> + <span class="empty-class">No available states</span> + </ng-template> +</igx-combo> +``` + +### Add template + +Use selector `[igxComboAddItem]`: + +```html +<igx-combo> + <ng-template igxComboAddItem> + <button igxButton="flat"> + Add Location + </button> + </ng-template> +</igx-combo> +``` + +### Toggle Icon Template + +Use selector `[igxComboToggleIcon]`: + +```html +<igx-combo> + <ng-template igxComboToggleIcon let-collapsed> + <igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon> + </ng-template> +</igx-combo> +``` + +### Clear Icon Template + +Use selector `[igxComboClearIcon]`: + +```html +<igx-combo> + <ng-template igxComboClearIcon> + <igx-icon>cancel</igx-icon> + </ng-template> +</igx-combo> +``` + +## Templating ComboBox Input + +When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` selectors, change how the respective buttons appear in the combobox input. Passing content inside of the `igx-combo` also allows templating of the combobox input similar to the way an `igx-input-group` can be templated (using `igx-prefix`, `igx-suffix` and `igxLabel`). The code snippet below illustrates how to add an appropriate label and prefix to the combobox input: + +```html +<igx-combo> + <label igxLabel>Locations</label> + <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix> +</igx-combo> +``` + +## API References + + +<div class="divider--half"></div> + +- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) + +## Additional Resources + +<div class="divider--half"></div> + +- [ComboBox Component](combo.md) +- [ComboBox Features](combo-features.md) +- [ComboBox Remote Binding](combo-remote.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md new file mode 100644 index 000000000..3462e11a3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md @@ -0,0 +1,733 @@ +--- +title: Angular Combobox Component | Data binding combobox | Infragistics | MIT license +_description: The Ignite UI for Angular ComboBox provides a powerful input, combining features of the basic HTML input, select, filtering and custom drop-down lists. Try it for FREE +_keywords: angular combobox, angular combo component, angular combobox component, Angular UI Components, ignite ui for angular, infragistics +_license: MIT +_tocName: Combo +--- + +# Angular ComboBox Component Overview + +The Angular ComboBox component represents a drop-down list that provides editable functionalities, allowing users to choose multiple options from a predefined list. The Ignite UI for Angular ComboBox Component also provides filtering capabilities, grouping and adding custom values to a dropdown list. It can be used as an alternative to the HTML select tag and has several out-of-the-box features such as data binding (local and remote), filtering, grouping, custom templates for items, header, and footer, custom values, and more. + + +## Angular ComboBox Example + +In this Angular ComboBox example, you can see how users can filter items and perform selection with the provided data. In addition, the ComboBox exposes keyboard navigation and custom styling capabilities. + +```typescript +import { Component, OnInit } from '@angular/core'; +import { localData } from './local-data'; +import { IgxComboComponent } from 'igniteui-angular/combo'; + +@Component({ + selector: 'app-combo-main', + styleUrls: ['./combo-main.component.scss'], + templateUrl: './combo-main.component.html', + imports: [IgxComboComponent] +}) + +export class ComboMainComponent implements OnInit { + public lData: any[]; + + public ngOnInit() { + this.lData = localData; + } +} +``` +```html +<igx-combo #combo class="combo" [itemsMaxHeight]="250" + [data]="lData" [displayKey]="'field'" [valueKey]="'field'" + placeholder="Location(s)" searchPlaceholder="Search..."> +</igx-combo> +``` +```scss +.combo { + margin: 8px; + width: 430px; +} +``` + +<div class="divider--half"></div> + +## Angular ComboBox Features + +The combobox control exposes the following features: + +- Data Binding - local data and [remote data](combo-remote.md) +- [Value Binding](combo-features.md#data-binding) +- [Filtering](combo-features.md#filtering) +- [Grouping](combo-features.md#grouping) +- [Custom Values](combo-features.md#custom-values) +- [Templates](combo-templates.md) +- Integration with [Template Driven Forms](input-group.md) and [Reactive Forms](angular-reactive-form-validation.md) + +## Getting Started with Ignite UI for Angular ComboBox + +To get started with the Ignite UI for Angular ComboBox component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxComboModule` in your **app.module.ts** file. + +```typescript +import { IgxComboModule } from 'igniteui-angular/combo'; +// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxComboModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxComboComponent` as a standalone dependency, or use the [`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_COMBO_DIRECTIVES } from 'igniteui-angular/combo'; +// import { IGX_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<igx-combo></igx-combo>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_COMBO_DIRECTIVES] + /* or imports: [IgxComboComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Combo module or directives imported, you can start using the `igx-combo` component. + +## Using the Angular ComboBox Component + +After the initial setup, you can bind the [igx-combo](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) to data. + +```typescript +@Component({ + selector: 'app-combo-demo', + template: '<igx-combo [data]="cities"></igx-combo>', + styleUrls: ['combo-demo.component.scss'], + standalone: true, + imports: [IGX_COMBO_DIRECTIVES] +}) +export class ComboDemo implements OnInit { + public cities: { name: string, id: string }[] = []; + + public ngOnInit() { + this.cities = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01'}, ...]; + } +} +``` + +Our combobox is now bound to the array of cities, but we still haven't told the component which property to use for the items' text and which to use for the value. Let's do that now. + +### Data value and display properties + +Since the combobox is bound to an array of complex data (i.e. objects), we need to specify a property that the control will use to handle the selected items. The control exposes two `@Input` properties - [valueKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#valueKey) and [displayKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#displayKey): + +- `valueKey` - _Optional, recommended for object arrays_ - Specifies which property of the data entries will be stored for the combobox's selection. If `valueKey` is omitted, the combobox value will use references to the data entries (i.e. the selection will be an array of entries from `igxCombo.data`). +- `displayKey` - _Required for object arrays_ - Specifies which property will be used for the items' text. If no value is specified for `displayKey`, the combobox will use the specified `valueKey` (if any). + +In our case, we want the combobox to display the `name` of each city and the combobox value to store the `id` of each city. Therefore, we are providing these properties to the combobox's `displayKey` and `valueKey`, respectively: + +```html +<igx-combo [data]="cities" displayKey="name" valueKey="id"></igx-combo> +``` + +> [!Note] +> When the data source is an array of primitives (e.g. `string[]`, `number[]`), **do not** specify a `valueKey` and `displayKey`. Primitive values will be used for both value and text. + +### Two-Way Binding + +The combobox component fully supports two-way data-binding with `[(ngModel)]` as well as usage in [template driven](https://angular.io/guide/forms) and [reactive](https://angular.io/guide/reactive-forms) forms. The combobox selection can be accessed either through two-way binding or through the [selection API](#selection-api). We can pass an array of items of the same type as the ones in the combobox's selection (based on `valueKey`) and any time one changes, the other is updated accordingly. + +In the following example, the cities Sofia and London will initially be selected. Any further changes in the combobox's selection will reflect on the `selectedCities` array. + +```html +<igx-combo [data]="cities" [(ngModel)]="selectedCities" displayKey="name" valueKey="id"></igx-combo> +``` + +```typescript +export class MyCombo { + public cities: { name: string, id: string }[] = [ + { name: 'Sofia', id: 'BG01' }, { name: 'London', id: 'UK01' }, ...]; + public selectedCities: string[] = ['BG01', 'UK01']; +} +``` + + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { CITIES, ICity } from './cities'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-combo-valuekey', + templateUrl: 'combo-valuekey.component.html', + styleUrls: ['combo-valuekey.component.scss'], + imports: [IgxComboComponent, FormsModule, IgxButtonDirective] +}) +export class ComboValueKeyComponent { + @ViewChild('withValueKey', { read: IgxComboComponent }) + public comboValueKey: IgxComboComponent; + + public cities: ICity[] = CITIES; + public selectedValueKey: string[] = ['UK01', 'BG01']; + + public selectFavorites() { + this.comboValueKey.select(['UK01', 'BG01', 'JP01', 'DE01']); + } +} +``` +```html +<div class="sample-wrapper"> + <div class="combo-section"> + <igx-combo class="combo" #withValueKey [data]="cities" valueKey="id" displayKey="name" groupKey="country" + [(ngModel)]="selectedValueKey"> + </igx-combo> + <button igxButton="contained" (click)="selectFavorites()">Select Favorites</button> + </div> + <h6>Selected Cities:</h6> + <div>{{ selectedValueKey }}</div> +</div> +``` +```scss +button { + margin: 0 8px; +} + +.sample-wrapper { + margin: 16px; +} + +.combo-section { + display: flex; + width: 100%; + flex-flow: row wrap; + margin-bottom: 16px; +} + +.combo { + width: 430px; +} + +@media (max-width: 700px) { + button { + margin: 16px 0; + } +} +``` + + +Two-way binding can also be achieved without a specified `valueKey`. For example, if `valueKey` is omitted, the bound model will look like this: + +```typescript +export class MyCombo { + public cities: { name: string, id: string } [] = [ + { name: 'Sofia', id: 'BG01' }, { name: 'London', id: 'UK01' }, ...]; + public selectedCities: { name: string, id: string } [] = [this.cities[0], this.cities[1]]; +} +``` + + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; +import { CITIES, ICity } from './cities'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-combo-binding', + templateUrl: 'combo-binding.component.html', + styleUrls: ['combo-binding.component.scss'], + imports: [IgxComboComponent, FormsModule, IgxButtonDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective] +}) +export class ComboBindingComponent { + @ViewChild('noValueKey', { read: IgxComboComponent }) + public comboNoValueKey: IgxComboComponent; + + public cities: ICity[] = CITIES; + public selectedNoValueKey: ICity[] = [this.cities[4], this.cities[0]]; + + public selectFavorites() { + const selectedItems: ICity[] = this.cities.filter((e: ICity) => ['UK01', 'BG01', 'JP01', 'DE01'].indexOf(e.id) > -1); + this.comboNoValueKey.select(selectedItems); + } +} +``` +```html +<div class="sample-wrapper"> + <div class="combo-section"> + <igx-combo class="combo" #noValueKey [data]="cities" displayKey="name" + groupKey="country" [(ngModel)]="selectedNoValueKey"> + </igx-combo> + <button igxButton="contained" (click)="selectFavorites()">Select Favorites</button> + </div> + <h6>Selected Cities:</h6> + <div class="cities-container"> + @for (city of selectedNoValueKey; track city) { + <igx-card > + <igx-card-header> + <h5 igxCardHeaderTitle>{{ city.name }}</h5> + <h5 igxCardHeaderSubtitle>{{ city.country }}</h5> + {{ city.id }} + </igx-card-header> + </igx-card> + } + </div> +</div> +``` +```scss +button { + margin: 0 8px; +} + +.sample-wrapper { + margin: 16px; + max-height: 600px; +} + +.combo-section { + display: flex; + justify-content: space-between; + max-width: 630px; + flex-flow: row wrap; + margin-bottom: 16px; +} + +.combo { + width: 430px; +} + +.cities-container { + max-width: 630px; + max-height: 450px; + overflow-y: auto; + + igx-card { + margin: 8px 8px 8px 0; + } +} + +@media (max-width: 700px) { + button { + margin: 16px 0; + } +} +``` + + +### Selection API + +The combobox component exposes API that allows getting and manipulating the current selection state of the control. + +One way to get the combobox's selection is via the [selection](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html#selection) property. It returns an array of values which correspond to the selected items, depending on the specified [valueKey](#data-value-and-display-properties) (if any). + +In our example, `selection` will return an array of the selected cities' `id`s: + +```typescript +export class MyCombo { + ... + public selection: string[] = this.combo.selection; +} +``` + +Using the selection API, you can also change the combobox's selected items without user interaction with the control - via a button click, as a response to an Observable changing, etc. For example, we can implement a button that selects a set of cities, using the [select()](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html#select) method: + +```html +<igx-combo [data]="cities" displayKey="name" valueKey="id"></igx-combo> +<button igxButton (click)="selectFavorites()">Select Favorites</button> +``` + +When clicking the button, the cities London and Sofia will be added to the combobox's selection: + +```typescript +export class MyExampleCombo { + @ViewChild(IgxComboComponent, { read: IgxComboComponent, static: true }) + public combo: IgxComboComponent; + ... + selectFavorites(): void { + this.combo.select(['UK01', 'BG01']); + } +} +``` + +The combobox also fires an event every time its selection changes - [selectionChanging()](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#selectionChanging). The emitted event arguments, [IComboSelectionChangingEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icomboselectionchangingeventargs.html), contain information about the selection prior to the change, the current selection and the items that were added or removed. The event can also be cancelled, preventing the selection update with the new array of items. + +Binding to the event can be done through the proper `@Output` property on the `igx-combo` tag: + +```html +<igx-combo [data]="cities" displayKey="name" valueKey="id" + (selectionChanging)="handleCityChange($event)"> +</igx-combo> +``` + +In the following example, when a city is added or removed from the selection, a handler that updates the statistic visualization is fired: + +```typescript +export class MyExampleCombo { + ... + handleCityChange(event: IComboSelectionChangeEventArgs): void { + for (const item of event.added) { + this.addToVisualization(item); + } + for (const item of event.removed) { + this.removeFromVisualization(item); + } + } +} +``` + +## Single Selection + +By default, the combo control provides multiple selection. The snippet below demonstrates how to achieve single selection in the component by attaching a handler to the `selectionChanging` event: + +```html +<igx-combo [data]="lData" (selectionChanging)="singleSelection($event)"></igx-combo> +``` + +```typescript +public singleSelection(event: IComboSelectionChangeEventArgs) { + if (event.added.length) { + event.newValue = event.added; + } +} +``` + +> Note: It is recommended to use the [igxSimpleCombo](simple-combo.md) instead of modifying the igxCombo like it is shown above. + +<div class="divider--half"></div> + +## Keyboard Navigation + +When combobox is closed and focused: + +- `ArrowDown` or `Alt` + `ArrowDown` will open the combobox's drop down and will move focus to the search input. + +- `Esc` will clear the selected value(s) while keeping focus on the combobox. + +- `Tab` will move the focus to the next focusable element outside the combobox. + +When combobox is opened: + +- `Esc` will close the list and keep the focus on the combobox. + +- `Tab` will close the list and move focus to the next focusable element. + +When combobox is opened and search input is focused: + +- `ArrowUp` or `Alt` + `ArrowUp` will close the combobox's drop down and will move focus to the closed combobox. + +- `ArrowDown` will move focus from the search input to the first list item. If the list is empty and custom values are enabled will move it to the Add new item button. + +> [!NOTE] +> Any other key stroke will be handled by the input. + +When combobox is opened and list item is focused: + +- `ArrowDown` will move to the next list item. If the active item is the last one in the list and custom values are enabled, the focus will be moved to the Add item button. + +- `ArrowUp` will move to the previous list item. If the active item is the first one in the list, the focus will be moved back to the search input. + +- `End` will move to the last list item. + +- `Home` will move to the first list item. + +- `Space` will select/deselect the active list item. + +- `Enter` will confirm the already selected items and will close the list. + +When combobox is opened, allow custom values are enabled and add item button is focused: + +- `Enter` will add a new item with `valueKey` and `displayKey` equal to the text in the search input and will select the new item. + +- `ArrowUp` focus will be moved back to the last list item or if the list is empty, will be moved to the search input. + + +## Styling + +### Combo Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><strong>$empty-list-background</strong></td> + <td>$empty-list-placeholder-color</td> + <td>The combo placeholder text color.</td> + </tr> + <tr class="primary"> + <td><details><summary><strong>$toggle-button-background</strong></summary></details></td> + <td>$toggle-button-foreground</td> + <td>The combo toggle button foreground color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$toggle-button-background-focus</td> + <td>The combo toggle button background color when focused.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$toggle-button-background-focus--border</td> + <td>The combo toggle button background color when focused (border variant).</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$toggle-button-foreground-filled</td> + <td>The combo toggle button foreground color when filled.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$toggle-button-background-disabled</td> + <td>The combo toggle button background color when disabled.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$toggle-button-foreground-disabled</td> + <td>The combo toggle button foreground color when disabled.</td> + </tr> + <tr class="primary"> + <td><strong>$toggle-button-background-focus</strong></td> + <td>$toggle-button-foreground-focus</td> + <td>The combo toggle button foreground color when focused.</td> + </tr> + <tr class="primary"> + <td><strong>$clear-button-background-focus</strong></td> + <td>$clear-button-foreground-focus</td> + <td>The combo clear button foreground color when focused.</td> + </tr> + </tbody> +</table> + + +Using the [`Ignite UI for Angular Theming`](themes/index.md), we can greatly alter the combobox appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`combo-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme). By setting the `$toggle-button-background`, the theme automatically determines suitable state colors and contrast foregrounds for the button. You can also specify additional parameters, such as `$search-separator-border-color`: + +```scss +$custom-combo-theme: combo-theme( + $search-separator-border-color: #1d3743, + $toggle-button-background: #57a5cd, +); +``` + +The [`IgxComboComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) uses the [`IgxDropDownComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) internally as an item container. It also includes the [`IgxInputGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) and the [`IgxCheckbox`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) components. Creating new themes, that extend these components' themes, and scoping them under the respective classes will let you change the combobox styles: + +```scss +$custom-drop-down-theme: drop-down-theme( + $background-color: #57a5cd, +); + +$custom-checkbox-theme: checkbox-theme( + $border-radius: 10px, + $fill-color: #1d3743, + $empty-color: #1d3743, +); +``` + +The last step is to include the component's theme. + +```scss +:host { + @include tokens($custom-combo-theme); + @include tokens($custom-drop-down-theme); + @include tokens($custom-checkbox-theme); +} +``` + +> [!NOTE] +> The [`IgxCombo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) component uses the [`IgxOverlay`](overlay.md) service to hold and display the combobox items list container. To properly scope your styles you might have to use an [`OverlaySetting.outlet`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html#outlet). For more details check the [`IgxOverlay Styling Guide`](overlay-styling.md). Also is necessary to use `::ng-deep` when we are styling the components. +> [!Note] +> The default `type` of the `IgxCombo` is `box` unlike the [`IgxSelect`](select.md) where it is `line`. + +### Demo + +```typescript +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; +import { IComboSelectionChangingEventArgs, IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { getHeroWeaponsData, IHeroWeapon } from '../../../data/heroData'; + +@Component({ + selector: 'app-combo', + styleUrls: ['./combo-styling.component.scss'], + templateUrl: './combo-styling.component.html', + imports: [IgxComboComponent, IgxToastComponent] +}) +export class ComboStylingComponent implements OnInit { + elem = inject(ElementRef); + + @ViewChild('loadToast', { read: IgxToastComponent, static: true }) + public loadToast: IgxToastComponent; + + public weaponsData: IHeroWeapon[] = []; + + public ngOnInit() { + this.weaponsData = getHeroWeaponsData(); + } + + public setWeaponsLimit(event: IComboSelectionChangingEventArgs) { + this.loadToast.positionSettings.verticalDirection = VerticalAlignment.Middle; + // this.loadToast.autoHide = true; + + if (event.newValue.length > 2) { + event.cancel = true; + this.loadToast.open('Choose only two items'); + } + } +} +``` +```html +<div class="control-wrapper"> + <igx-combo [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}" + [groupKey]="'weaponRange'" placeholder="Pick up two weapons" searchPlaceholder="Search..." + [itemsMaxHeight]="255" (selectionChanging)="setWeaponsLimit($event)"> + </igx-combo> + + <igx-toast #loadToast [displayTime]="1200"></igx-toast> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-drop-down-theme: drop-down-theme( + $background-color: #57a5cd, +); + +$custom-combo-theme: combo-theme( + $search-separator-border-color: #1d3743, + $toggle-button-background: #57a5cd, +); + +$custom-checkbox-theme: checkbox-theme( + $border-radius: 10px, + $fill-color: #1d3743, + $empty-color: #1d3743, +); + +:host { + @include tokens($custom-drop-down-theme); + @include tokens($custom-combo-theme); + @include tokens($custom-checkbox-theme); +} +``` + + +<div class="divider--half"></div> + +### Styling with Tailwind + +You can style the `combo` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-combo`, `dark-combo`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [combo-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme). The syntax is as follows: + +```html +<igx-combo +class="!light-combo +![--toggle-button-background:#99BAA6] +![--clear-button-foreground:#99BAA6]" +...></igx-combo> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your combo should look like this: + +<div class="sample-container loading" style="height:410px"> + <iframe id="combo-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/lists/combo-tailwind-styling' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## Known Issues + +- The combobox input that displays the selected items is not editable. However, due to browser specifics in FireFox, the cursor is visible. +- When the combobox is bound to an array of primitive data which contains `undefined` (i.e. `[ undefined, ...]`), `undefined` is not displayed in the dropdown. When it is bound to an array of complex data (i.e. objects) and the value used for `valueKey` is `undefined`, the item will be displayed in the dropdown, but cannot be selected. +- When the combobox is bound to a remote service and there is a predefined selection, its input will remain blank until the requested data is loaded. + +> [!NOTE] +> The combobox uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for the combobox. For more details see [`igxForOf Known Issues`](for-of.md#known-limitations) section. + +## API References + +<div class="divider--half"></div> + +- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) + +Additional [angular components](https://www.infragistics.com/products/ignite-ui-angular) and/or directives with relative APIs that were used: + +- [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) +- [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) +- [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) + +## Theming Dependencies + +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxCheckbox Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) + +## Additional Resources + +<div class="divider--half"></div> + +- [ComboBox Features](combo-features.md) +- [ComboBox Remote Binding](combo-remote.md) +- [ComboBox Templates](combo-templates.md) +- [Template Driven Forms Integration](input-group.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Single Select ComboBox](simple-combo.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dashboard-tile.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dashboard-tile.md new file mode 100644 index 000000000..d72836c8c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dashboard-tile.md @@ -0,0 +1,455 @@ +--- +title: Angular Dashboard Tile Component | Ignite UI for Angular +_description: See how you can easily get started with Angular Dashboard Tile Component. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Dashboard components, Angular Dashboard Tile controls +_license: commercial +mentionedTypes: ["Toolbar", "CategoryChart", "XamDataChart", "XamRadialGauge", "XamLinearGauge", "XamGeographicMap"] +_tocName: Charting in Dashboards +_premium: true +--- + +# Angular Dashboard Tile <label class="badge badge--preview">PREVIEW</label> + +The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) that let you alter the visualization that is presented in a variety of ways. + +A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts. + +Interacting with the chart type menu in the toolbar will allow for selecting a different visualization among the list of likely candidates. + +## Angular Dashboard Tile Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxGeographicMapDashboardTileModule, IgxLinearGaugeDashboardTileModule, IgxPieChartDashboardTileModule, IgxRadialGaugeDashboardTileModule } from 'igniteui-angular-dashboards'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDashboardTileModule, + IgxDataChartDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { RetailSalesPerformanceLocalDataSource } from './RetailSalesPerformanceLocalDataSource'; +import { IgxDashboardTileComponent } from 'igniteui-angular-dashboards'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("dashboard", { static: true } ) + private dashboard: IgxDashboardTileComponent + private _retailSalesPerformanceLocalDataSource: RetailSalesPerformanceLocalDataSource = null; + public get retailSalesPerformanceLocalDataSource(): RetailSalesPerformanceLocalDataSource { + if (this._retailSalesPerformanceLocalDataSource == null) + { + this._retailSalesPerformanceLocalDataSource = new RetailSalesPerformanceLocalDataSource(); + } + return this._retailSalesPerformanceLocalDataSource; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-dashboard-tile + name="dashboard" + #dashboard + [dataSource]="retailSalesPerformanceLocalDataSource"> + </igx-dashboard-tile> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Dependencies + +<!-- Angular, WebComponents, React --> + +Install the following packages in the Ignite UI for Angular toolset: + +```cmd +npm install igniteui-angular-charts +npm install igniteui-angular-core +npm install igniteui-angular-dashboards +npm install igniteui-angular-gauges +npm install igniteui-angular-data-grids +npm install igniteui-angular-inputs +npm install igniteui-angular-layouts +npm install igniteui-angular-maps +``` + +The following modules are suggested when using the Dashboard Tile component: + +```ts +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards"; + +@NgModule({ + imports: [ + IgxDataChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxDashboardTileModule + ] +}) +export class AppModule {} +``` + +<!-- end:Angular, WebComponents, React --> + +## Usage + +Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following: + +- [IgxCategoryChart](charts/chart-overview.md) +- [IgxDataChart](charts/chart-overview.md) +- [IgxDataPieChart](charts/types/data-pie-chart.md) +- [IgxGeographicMap](geo-map.md) +- [IgxLinear Gauge](linear-gauge.md) +- [IgxRadialGauge](radial-gauge.md) + +The data visualization that is chosen by default is mainly dependent on the schema and the count of the `DataSource` that you have bound. For example, if you bind a single numeric value, you will get a [`IgxRadialGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html), but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a `XamDataPieChart`. If you bind an `DataSource` that has more value paths, you will receive a [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a `ShapeDataSource` or data the appears to contain geographic points to receive a [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html). + +You are not locked into a single visualization when you bind the `DataSource`, and you can tell the control that you want to see a particular visualization by setting its `VisualizationType` property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so: + +<!-- TODO SAMPLE --> + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxGeographicMapDashboardTileModule, IgxLinearGaugeDashboardTileModule, IgxPieChartDashboardTileModule, IgxRadialGaugeDashboardTileModule } from 'igniteui-angular-dashboards'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDashboardTileModule, + IgxDataChartDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { DashboardGaugeDataSourceItem, DashboardGaugeDataSource } from './DashboardGaugeDataSource'; +import { IgxDashboardTileComponent } from 'igniteui-angular-dashboards'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("dashboard", { static: true } ) + private dashboard: IgxDashboardTileComponent + private _dashboardGaugeDataSource: DashboardGaugeDataSource = null; + public get dashboardGaugeDataSource(): DashboardGaugeDataSource { + if (this._dashboardGaugeDataSource == null) + { + this._dashboardGaugeDataSource = new DashboardGaugeDataSource(); + } + return this._dashboardGaugeDataSource; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-dashboard-tile + tileTitle="Sample Gauge" + name="dashboard" + #dashboard + [dataSource]="dashboardGaugeDataSource"> + </igx-dashboard-tile> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +The visualization or properties of the visualization are also configurable using the [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) at the top of the control. This [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: + +<img src="../images/dashboard-tile-toolbar.png" alt="Dashboard Tile Toolbar"/> + +From left to right: + +- The first tool will show a data grid with the `DataSource` provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization. +- The second tool allows you to configure the settings of the current data visualization. +- The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the `VisualizationType` property, mentioned above. +- The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) or [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) collection on the control. + +This demo demonstrates dashboard tile integration with the Angular Pie Chart. The toolbar options at the top right provides access to styling and changing the data visualization. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxGeographicMapDashboardTileModule, IgxLinearGaugeDashboardTileModule, IgxPieChartDashboardTileModule, IgxRadialGaugeDashboardTileModule } from 'igniteui-angular-dashboards'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDashboardTileModule, + IgxDataChartDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxDashboardTileComponent } from 'igniteui-angular-dashboards'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("dashboard", { static: true } ) + private dashboard: IgxDashboardTileComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-dashboard-tile + name="dashboard" + #dashboard + [dataSource]="energyGlobalDemand"> + </igx-dashboard-tile> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +This demo demonstrates dashboard tile integration with the Angular Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxGeographicMapDashboardTileModule, IgxLinearGaugeDashboardTileModule, IgxPieChartDashboardTileModule, IgxRadialGaugeDashboardTileModule } from 'igniteui-angular-dashboards'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDashboardTileModule, + IgxDataChartDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { WorldCitiesItem, WorldCities } from './WorldCities'; +import { IgxDashboardTileComponent } from 'igniteui-angular-dashboards'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("dashboard", { static: true } ) + private dashboard: IgxDashboardTileComponent + private _worldCities: WorldCities = null; + public get worldCities(): WorldCities { + if (this._worldCities == null) + { + this._worldCities = new WorldCities(); + } + return this._worldCities; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-dashboard-tile + name="dashboard" + #dashboard + tileTitle="World Cities" + [dataSource]="worldCities"> + </igx-dashboard-tile> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## API References + +- [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxLinearGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) +- [`IgxRadialGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + +## Additional Resources + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md new file mode 100644 index 000000000..7c25169e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-picker.md @@ -0,0 +1,627 @@ +--- +title: Angular Datepicker Component – Ignite UI for Angular - MIT license +_description: Learn how to use a functionality to select a date from a calendar to your web application with Angular Datepicker Component by Ignite UI. Try it now. +_keywords: angular datepicker, angular datepicker component, angular UI components, angular component, ignite ui for angular +_license: MIT +_tocName: Date Picker +--- + +# Angular Date Picker Component Overview + +Angular Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the Date Picker in Angular lets users to navigate to a desired date with several view options – month, year, decade. There are the usual min, max, and required properties to add validation. + +The Ignite UI for Angular Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The Angular Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration. + +## Angular Date Picker Example + +Below you can see a sample that demonstrates how the Angular Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. + +<!-- TODO: date picker sample with several options enabled --> +```typescript +import { Component } from '@angular/core'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-datepicker-sample-1', + styleUrls: ['./datepicker-sample-1.component.scss'], + templateUrl: './datepicker-sample-1.component.html', + imports: [IgxDatePickerComponent, FormsModule, IgxLabelDirective] +}) +export class DatepickerSample1Component { + public date = new Date(); +} +``` +```html +<div class="date-picker-wrapper"> + <igx-date-picker [(ngModel)]="date"> + <label igxLabel>Date</label> + </igx-date-picker> +</div> +``` +```scss +.datе-picker-wrapper { + padding: 1rem; + max-width: 600px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Date Picker + +To get started with the Ignite UI for Angular Date Picker component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDatePickerModule` in your **app.module.ts** file. + +>[!NOTE] +> As the picker uses the [**IgxCalendarComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html), it is also dependent on the **BrowserAnimationsModule** and **optionally** on the **HammerModule** for touch interactions, so they need to be added to the module as well: + +```typescript +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IgxDatePickerModule } from 'igniteui-angular/date-picker'; +// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxDatePickerComponent` as a standalone dependency, or use the [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker'; +// import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-date-picker> + <label igxLabel>Date</label> + </igx-date-picker> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES] + /* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Date Picker module or directives imported, you can start using the `igx-date-picker` component. + +## Using the Angular Date Picker Component + +### Display Date picker + +To instantiate a Date Picker in its default `dropdown` state, use the following code: + +```html +<igx-date-picker> + <label igxLabel>Date</label> +</igx-date-picker> +``` + +### Options + +The `IgxDatePickerComponent` can be bound to a `date` or a `string`. + +```html +<igx-date-picker [value]="date"></igx-date-picker> +``` + +```typescript +public date = new Date(2000, 0, 1); +``` + +If a string is bound to the picker, it needs to be a date-only string in the `ISO 8601` format: + +```html +<igx-date-picker [value]="'2000-01-01'"></igx-date-picker> +``` + +More information about this can be found in [DateTime Editor's ISO section](date-time-editor.md#iso). + +Two-way binding is possible through `ngModel`: + +```html +<igx-date-picker [(ngModel)]="date"></igx-date-picker> +``` + +As well as through the `value` input: + +```html +<igx-date-picker [(value)]="date"></igx-date-picker> +``` + +Additionally, `formControlName` can be set on the picker, to use it in a reactive form: + +```html +<form [formGroup]="form"> + <igx-date-picker formControlName="datePicker"></igx-date-picker> +</form> +``` + +```typescript +export class SampleFormComponent { + // ... + public form: FormGroup; + constructor(private fb: FormBuilder) { + this.form = this.fb.group({ + datePicker: ['', Validators.required] + }); + } +} +``` + +> [!NOTE] +> The picker always returns a `Date` value, this means that If it is model bound or two-way bound to a string variable, after a new date has been chosen, it will be of type `Date`. + +### Projecting components + +The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) allows the projection of child components that the [`IgxInputGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) supports (with the exception of [`IgxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html)) - [`igxLabel`](label-input.md), [`igx-hint / IgxHint`](input-group.md#hints), [`igx-prefix / igxPrefix`](input-group.md#prefix--suffix), [`igx-suffix / igxSuffix`](input-group.md#prefix--suffix). More detailed information about this can be found in the [Label & Input](label-input.md) topic. + +```html +<igx-date-picker #datePicker> + <igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon> +</igx-date-picker> +``` + +The above snippet will add an additional toggle icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other. + +#### Customizing the toggle and clear icons + +The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) can be configured with [`IgxPickerToggleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickerclearcomponent.html). These can be used to change the toggle and clear icons without having to add your own click handlers. + +```html + <igx-date-picker> + <label igxLabel>Select a Date</label> + <igx-picker-toggle igxPrefix> + <igx-icon>calendar_view_day</igx-icon> + </igx-picker-toggle> + <igx-picker-clear igxSuffix> + <igx-icon>delete</igx-icon> + </igx-picker-clear> +</igx-date-picker> +``` + +#### Custom action buttons + +The picker's action buttons can be modified in two ways: + +- the button's text can be changed using the [`todayButtonLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#todayButtonLabel) and the [`cancelButtonLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#cancelButtonLabel) input properties: + +```html +<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker> +``` + +- the whole buttons can be templated using the [`igxPickerActions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickeractionsdirective.html) directive: +With it you gain access to the date picker's [`calendar`](calendar.md) and all of its members: + +```html +<igx-date-picker> + <ng-template igxPickerActions let-calendar> + <button igxButton="flat" (click)="calendar.viewDate = today">Today</button> + </ng-template> +</igx-date-picker> +``` + +### Keyboard Navigation + +Opening and closing the [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html)'s calendar UI with the keyboard is available only for `dropdown` mode and can be triggered via the key combinations below: + +|Keys|Description| +|----|-----------| +| <kbd>Space</kbd> | Displays the calendar pop-up and focuses it | +| <kbd>Alt</kbd> + <kbd>↓</kbd> | Displays the calendar pop-up and focuses it | +| <kbd>Esc</kbd> | Closes the calendar pop-up and focuses the input field | +| <kbd>Enter</kbd> | Closes the calendar pop-up, selecting the focused date and moves the focus to the input field | +| <kbd>Alt</kbd> + <kbd>↑</kbd> | Closes the calendar pop-up and focuses the input field | + +Since the [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) uses the [`IgxDateTimeEditorDirective`](date-time-editor.md) it inherits its keyboard navigation. + +## Examples + +### Dialog Mode + +The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) also supports a `dialog` mode: + +```html +<igx-date-picker [mode]="'dialog'"></igx-date-picker> +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-datepicker-sample-2', + styleUrls: ['./datepicker-sample-2.component.scss'], + templateUrl: './datepicker-sample-2.component.html', + imports: [IgxDatePickerComponent, IgxLabelDirective] +}) +export class DatepickerSample2Component { + public date: Date = new Date(); +} +``` +```html +<div class="date-picker-wrapper"> + <igx-date-picker [(value)]="date" mode="dialog"> + <label igxLabel>Date</label> + </igx-date-picker> +</div> +``` +```scss +.date-picker-wrapper { + padding: 1rem; + max-width: 600px; +} +``` + +<div class="divider--half"></div> + +### Display and input format + +[`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#inputFormat) and [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#displayFormat) are properties which can be set to make the picker's editor follow a specified format. The [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#inputFormat) property is used when the picker is in `dropdown` mode and it governs the input's editable mask, as well as its placeholder (if none is set). Additionally, the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#inputFormat) is locale based, so if none is provided, the picker will default to the one used by the browser. + +A good thing to note is that the the Angular Date Picker Component in Ignite UI will always add a leading zero on the `date` and `month` portions if they were provided in a format that does not have it, e.g. `d/M/yy` becomes `dd/MM/yy`. This applies only during editing. + +[`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#displayFormat) on the other hand uses Angular's [`DatePipe`](https://angular.io/api/common/DatePipe) and is used to format the picker's input when it is not focused. If no [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#displayFormat) is provided, the picker will use the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#inputFormat) as its [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#displayFormat). +Alternatively, if the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. + +More information about these can be found in the [`IgxDateTimeEditor`](date-time-editor.md#examples) examples section. + +```typescript +import { Component } from '@angular/core'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-datepicker-sample-3', + styleUrls: ['./datepicker-sample-3.component.scss'], + templateUrl: './datepicker-sample-3.component.html', + imports: [IgxDatePickerComponent, FormsModule] +}) +export class DatepickerSample3Component { + public date = new Date(); +} +``` +```html +<div class="date-picker-wrapper"> + <igx-date-picker + [(ngModel)]="date" + [inputFormat]="'dd/MM/yy'" + [displayFormat]="'shortDate'"> + </igx-date-picker> +</div> +``` +```scss +.date-picker-wrapper { + padding: 1rem; +} +``` + +<div class="divider--half"></div> + +>[!NOTE] +> The `IgxDatePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. + +### Increment and decrement + +The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) exposes [`increment`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#increment) and [`decrement`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#decrement) methods. Both of which come from the [`IgxDateTimeEditorDirective`](date-time-editor.md#increment-decrement) and can be used for incrementing and decrementing a specific [`DatePart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/datepart.html) of the currently set date. + +```html +<igx-date-picker #datePicker> + <igx-icon igxPrefix (click)="datePicker.increment(DatePart.Month, 3)">keyboard_arrow_up</igx-icon> + <igx-icon igxPrefix (click)="datePicker.decrement(DatePart.Year. 4)">keyboard_arrow_down</igx-icon> +</igx-date-picker> +``` + +It also has as a [`spinDelta`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#spinDelta) input property which can be used to increment or decrement a specific date part of the currently set date. + +```html +<igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker> +``` + +### In Angular Forms + +The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) supports all directives from the core [FormsModule](https://angular.io/api/forms/FormsModule), [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl), [`FormGroup`](https://angular.io/api/forms/FormGroup), etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [`minValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#minValue) and [`maxValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#maxValue) properties act as form validators. + +You can see the [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) in a reactive form by visiting our [Reactive Forms Integration](angular-reactive-form-validation.md) topic. + +#### Using date and time picker together + +In some cases when the IgxDatePicker and the [`IgxTimePicker`](time-picker.md) are used together, we might need them to be bound to one and the same Date object value. + +To achieve that in template driven forms, use the `ngModel` to bind both components to the same Date object. + +```typescript +import { Component } from '@angular/core'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-datetimepicker-template-driven-form', + styleUrls: ['./template-driven-form.component.scss'], + templateUrl: './template-driven-form.component.html', + imports: [IgxDatePickerComponent, FormsModule, IgxLabelDirective, IgxTimePickerComponent] +}) +export class DateTimePickerTDFSampleComponent { + public date = new Date(); +} +``` +```html +<div class="pickers-wrapper"> + <div class="form-group"> + <div class="form-date-picker"> + <igx-date-picker #datePicker name="date-picker" [(ngModel)]="date"> + <label igxLabel>Date</label> + </igx-date-picker> + </div> + <div class="form-time-picker"> + <igx-time-picker name="time-picker" [(ngModel)]="date" [disabled]="datePicker.value ? false : true"> + <label igxLabel>Time</label> + </igx-time-picker> + </div> + </div> + <p class="text"> + Selected date: {{ date? date.toLocaleString() : null }} + </p> +</div> +``` +```scss +.pickers-wrapper { + display: flex; + flex-direction: column; +} + +.form-group { + display: flex; + flex: 1; + width: 450px; +} + +.form-date-picker { + flex: 50%; +} + +.form-time-picker { + flex: 50%; + margin-left: 16px; +} +``` + +<div class="divider--half"></div> + +In reactive forms, we can handle the [`valueChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#valueChange) event of each component and update the value of the other. + +```typescript +import { Component, inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; + +@Component({ + selector: 'app-datetimepicker-reactive-form', + styleUrls: ['./reactive-form.component.scss'], + templateUrl: './reactive-form.component.html', + imports: [FormsModule, ReactiveFormsModule, IgxDatePickerComponent, IgxLabelDirective, IgxTimePickerComponent] +}) +export class DateTimePickerRFSampleComponent { + public dateTimeForm: FormGroup; + public date = new Date(2021, 6, 12, 7, 30, 0); + public minDate = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() - 10); + public maxDate = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() + 15); + public minTime = '06:15:30'; + public maxTime = '15:15:30'; + + constructor() { + const fb = inject(FormBuilder); + + this.dateTimeForm = fb.group({ + date: [this.date, Validators.required], + time: [this.date, Validators.required] + }); + } +} +``` +```html +<div class="pickers-wrapper"> + <form [formGroup]="dateTimeForm"> + <div class="form-group"> + <div class="form-date-picker"> + <igx-date-picker #datePicker formControlName="date" [value]="date" [minValue]="minDate" + [maxValue]="maxDate" (valueChange)="timePicker.value = datePicker.value"> + <label igxLabel>Date</label> + </igx-date-picker> + </div> + <div class="form-time-picker"> + <igx-time-picker #timePicker formControlName="time" [value]="date" [minValue]="minTime" + [maxValue]="maxTime" [disabled]="dateTimeForm.value.date ? false : true" + (valueChange)="datePicker.value = timePicker.value"> + <label igxLabel>Time</label> + </igx-time-picker> + </div> + </div> + </form> + <p> + Date picker: {{ dateTimeForm.value.date? dateTimeForm.value.date.toLocaleString() : null}}<br> + Time picker: {{ dateTimeForm.value.time? dateTimeForm.value.time.toLocaleString() : null}}<br> + Form Status: {{ dateTimeForm.status }} + </p> +</div> +``` +```scss +.pickers-wrapper { + display: flex; + flex-direction: column; +} + +.form-group { + display: flex; + flex: 1; + width: 450px; +} + +.form-date-picker { + flex: 50%; +} + +.form-time-picker { + flex: 50%; + margin-left: 16px; +} +``` + +<div class="divider--half"></div> + +### Calendar Specific settings + +The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) uses the [`IgxCalendarComponent`](calendar.md) and you can modify some of its settings via the properties that the date picker exposes. Some of these include [`displayMonthsCount`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#displayMonthsCount) which allows more than one calendar to be displayed when the picker expands, [`weekStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#weekStart) which determines the starting day of the week, [`showWeekNumbers`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#showWeekNumbers) which shows the number for each week in the year and more. + +## Internationalization + +The localization of the [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) can be controlled through its [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html#locale) input. Additionally, using the `igxCalendarHeader` and the `igxCalendarSubheader` templates, provided by the [`IgxCalendarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html), you can specify the look of your header and subheader. More information on how to use these templates can be found in the [**IgxCalendarComponent**](calendar.md) topic. + +Here is how an Angular Date Picker with Japanese locale definition would look like: + +```html +<igx-date-picker locale="ja-JP" [value]="date"> + <ng-template igxCalendarHeader let-format> + {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }} + </ng-template> + <ng-template igxCalendarSubheader let-format> + <span (click)="format.yearView()">{{ format.year.combined }}</span> + <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span> + </ng-template> +</igx-date-picker> +``` + +## Styling + +To get started with styling the date picker, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +The Angular Date Picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme). By setting the `$header-background`, the theme automatically computes the necessary colors for the other properties to ensure a visually balanced and accessible design. + +```scss +$custom-datepicker-theme: calendar-theme( + $header-background: #57a5cd, +); +``` + +The last step is to pass the custom Date Picker theme: + +```scss +:host { + @include tokens($custom-datepicker-theme); +} +``` + +>[!WARNING] +>If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` + +```scss +:host { + ::ng-deep { + @include tokens($custom-datepicker-theme); + } +} +``` + +```typescript +import { Component, ElementRef, inject } from '@angular/core'; +import { IgxOverlayService } from 'igniteui-angular/core'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-datepicker-sample-1', + styleUrls: ['./datepicker-styling-sample.component.scss'], + templateUrl: './datepicker-styling-sample.component.html', + imports: [IgxDatePickerComponent, IgxLabelDirective] +}) +export class DatepickerStylingSampleComponent { element = inject(ElementRef); + private overlayService = inject(IgxOverlayService); + + } +``` +```html +<div class="date-picker-wrapper"> + <igx-date-picker [overlaySettings]="{ outlet: element }" mode="dialog"> + <label igxLabel>Date</label> + </igx-date-picker> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-datepicker-theme: calendar-theme( + $header-background: #57a5cd, +); + +:host { + @include tokens($custom-datepicker-theme); +} +``` + +## API References + +<div class="divider--half"></div> + +- [IgxDatePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) +- [IgxDateTimeEditorDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) +- [IgxCalendarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) + +## Theming Dependencies + +<div class="divider--half"></div> + +- [IgxCalendar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) + + +## Additional Resources + +- [Time Picker](time-picker.md) +- [Date Time Editor](date-time-editor.md) +- [Date Range Picker](date-range-picker.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md new file mode 100644 index 000000000..6438440a5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-range-picker.md @@ -0,0 +1,796 @@ +--- +title: Angular Date Range Picker Component | Ignite UI for Angular | MIT license +_description: The Angular Date Range Picker component allows you to choose a date range by defining its start and end date. You can select a range from a calendar UI. Try it now. +_keywords: Angular Date Range Picker, Date Range Picker, Date Picker, Angular Date Range Picker Component, Angular UI Components, Angular component +_license: MIT +_tocName: Date Range Picker +--- + +# Angular Date Range Picker Component Overview + +The Angular Date Range Picker is a lightweight component that includes a text input and a calendar pop-up, allowing users to easily select start and end dates. It is highly customizable to fit various application requirements, offering features such as date range restrictions, configurable date formats, and more. + +## Angular Date Range Picker Example + +Below is a sample demonstrating the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) component in action, where a calendar pop-up allows users to select start and end dates. + +```typescript +import { Component } from '@angular/core'; +import { DateRange } from 'igniteui-angular/core'; +import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-basic-rangedatepicker', + styleUrls: ['./daterangepicker-basic.scss'], + templateUrl: './daterangepicker-basic.html', + imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective] +}) +export class BasicDateRangePickerComponent { + public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) }; +} +``` + +<div class="divider--half"></div> + + +## Getting Started with Ignite UI for Angular Date Range Picker + +To get started with the Ignite UI for Angular [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDateRangePickerModule` in your **app.module.ts** file. + +As the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) uses the [**IgxCalendarComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html), it also has a dependency on the **BrowserAnimationsModule** and **optionally** the **HammerModule** for touch interactions, so they need to be added to the `AppModule` as well: + +```typescript +// app.module.ts + +import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker'; +// import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package + +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +@NgModule({ + ... + imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) as a standalone dependency, or use the [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { HammerModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker'; +// import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<igx-date-range-picker [value]="range"></igx-date-range-picker>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_RANGE_PICKER_DIRECTIVES] + /* or imports: [BrowserAnimationsModule, HammerModule, IgxDateRangePickerComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Date Range Picker module or directives imported, you can start using the `igx-date-range-picker` component. + +## Using the Angular Date Range Picker Component + +### Display and Value + +To instantiate a date range picker in its default mode, use the following code: + +```html +<igx-date-range-picker [value]="range"></igx-date-range-picker> +``` + +```typescript +public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) }; +``` + +>[!NOTE] +> The Date Range Picker value is of type [`DateRange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/daterange.html), which contains a start and an end date. + +The picker offers two modes for displaying date values: single input and two inputs. In single input mode, the field is non-editable and the date range cannot be edited by typing. In two inputs mode, however, users can edit the start and end dates by typing in separate input fields. + +When the calendar is visible a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. + +To create a two-way data-binding, use `ngModel`: + +```html +<igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker> +``` + +### Display Separate Editable Inputs + +The Angular Date Range Picker component also allows configuring two separate inputs for start and end date. This can be achieved by using the [`IgxDateRangeStartComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangeendcomponent.html) as children of the date range picker, as shown in the demo below: + +```html +<igx-date-range-picker [(ngModel)]="range"> + <igx-date-range-start> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-start> + <igx-date-range-end> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-end> +</igx-date-range-picker> +``` + +- Both the [`IgxDateRangeStartComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangeendcomponent.html) extend the existing [`IgxInputGroupComponent`](input-group.md). For such a configuration to work, defining an [`IgxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) is required. In addition, all other components and directives available to the [`IgxInputGroupComponent`](input-group.md) can also be used. +- In order to enable date editing for both inputs, you need to decorate them with [`igxDateTimeEditor`](date-time-editor.md) directive. + +```typescript +import { Component } from '@angular/core'; +import { DateRange, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core'; +import { IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent } from 'igniteui-angular/date-picker'; +import { IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-rangedatepicker-start-end', + styleUrls: ['./daterangepicker-start-end.scss'], + templateUrl: './daterangepicker-start-end.html', + imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, + IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, + IgxPickerClearComponent] +}) +export class DateRangePickerStartEndComponent { + public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) }; +} +``` + +### Popup modes + +By default, when clicked, the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the `Mode` property to `dialog`. + +```html +<igx-date-range-picker [mode]="'dialog'"></igx-date-range-picker> +``` + +```typescript +import { Component } from '@angular/core'; +import { DateRange } from 'igniteui-angular/core'; +import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; + +@Component({ + selector: 'app-mode-rangedatepicker', + styleUrls: ['./daterangepicker-mode.scss'], + templateUrl: './daterangepicker-mode.html', + imports: [IgxDateRangePickerComponent] +}) +export class DateRangePickerModeComponent { + public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) }; +} +``` + +<div class="divider--half"></div> + +In a default configuration with a single read-only input, the calendar can be opened by clicking anywhere in the input, including the calendar icon. When there are two separate inputs for start and end date, and in dropdown mode, the calendar can only be opened from the calendar icon, since both inputs are editable by default. For two inputs in `dialog` mode, clicking anywhere in the input opens the calendar + +The range value is set when dates are picked from the calendar. You will notice that in dropdown mode, the `Done` button is not available. In dialog mode, a `Cancel` button allows to revert the selection on close. + +### Keyboard Navigation + +The [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. + +The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. + +**Two Inputs Mode:** + +|Keys|Description| +|----|-----------| +| <kbd>←</kbd> | Moves the caret one character to the left | +| <kbd>→</kbd> | Moves the caret one character to the right | +| <kbd>Ctrl + ArrowLeft</kbd> | Moves the caret to the beginning of the current input mask section or to the start of the previous one if it's already at the beginning | +| <kbd>Ctrl + ArrowRight</kbd> | Moves the caret to the end of the current input mask section or to the end of the next one if it's already at the end | +| <kbd>ArrowUp</kbd> | Increments the currently "focused" part of the input mask by one step | +| <kbd>ArrowDown</kbd> | Decrements the currently "focused" part of the input mask by one step | +| <kbd>Home</kbd> | Moves the caret to the beginning of the input mask | +| <kbd>End</kbd> | Moves the caret to the end of the input mask | +| <kbd>Ctrl + ;</kbd> | Sets the current date as the value of the component | + +**Both Single and Two Inputs Modes:** + +|Keys|Description| +|----|-----------| +| <kbd>Alt + ArrowDown</kbd> | Opens the calendar dropdown | +| <kbd>Alt + ArrowUp</kbd> | Closes the calendar dropdown | + +The [calendar keyboard navigation](calendar.md#keyboard-navigation) section contains all keyboard combinations that can be used in the calendar. + +<div class="divider--half"></div> + +## Layout + +### Projecting components + +To enrich the default Date Range Picker UX, the component allows projecting child components - the same as in the [`IgxInputGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html): [`igxLabel`](label-input.md), [`igx-hint / igxHint`](input-group.md#hints), [`igx-prefix / igxPrefix`](input-group.md#prefix--suffix), [`igx-suffix / igxSuffix`](input-group.md#prefix--suffix), excluding [`IgxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html). More detailed information about this can be found in the [Label & Input](label-input.md) topic. + +```html +<igx-date-range-picker #dateRangePicker [(ngModel)]="range"> + <label igxLabel>Flight dates</label> + <igx-hint *ngIf="dateRangePicker.invalid"> + Please choose start and end date! + </igx-hint> +</igx-date-range-picker> +``` + +Or for two inputs: + +```html +<igx-date-range-picker #dateRangePicker [(ngModel)]="range"> + <igx-date-range-start> + ... + <label igxLabel>Start Date</label> + <igx-hint *ngIf="dateRangePicker.invalid"> + Please choose start and end date! + </igx-hint> + ... + </igx-date-range-start> + <igx-date-range-end> + ... + <label igxLabel>End Date</label> + ... + </igx-date-range-end> +</igx-date-range-picker> +``` + +#### Toggle and clear icons + +In the default configuration, with a single read-only input, a default calendar icon is shown as a prefix and a clear icon - as a suffix. These icons can be changed or redefined using the [`IgxPickerToggleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickerclearcomponent.html). They can be decorated with either [`igxPrefix`](input-group.md#prefix--suffix) or [`igxSuffix`](input-group.md#prefix--suffix), which will define their position - at the start of the input or at the end respectively: + +```html +<igx-date-range-picker> + <igx-picker-toggle igxSuffix> + <igx-icon>calendar_view_day</igx-icon> + </igx-picker-toggle> + <igx-picker-clear igxSuffix> + <igx-icon>clear</igx-icon> + </igx-picker-clear> +</igx-date-range-picker> +``` + +When a Date Range Picker has two separate inputs for start and end dates, it doesn't expose these icons by default. The [`IgxPickerToggleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickerclearcomponent.html) should be manually added as children of the [`IgxDateRangeStartComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangestartcomponent.html) or [`IgxDateRangeEndComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangeendcomponent.html) like so: + +```html +<igx-date-range-picker> + <igx-date-range-start> + ... + <igx-picker-toggle igxPrefix> + <igx-icon>calendar_view_day</igx-icon> + </igx-picker-toggle> + <igx-picker-clear igxSuffix> + <igx-icon>clear</igx-icon> + </igx-picker-clear> + ... + </igx-date-range-start> + <igx-date-range-end> + ... + </igx-date-range-end> +</igx-date-range-picker> +``` + +### Custom And Predefined Date Ranges + +You can also add custom date range chips to the calendar pop-up for faster range selection using the [`customRanges`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#customRanges) property. For example, you can create a custom date range chip to quickly select the range for the upcoming 7 days, ending with the current date. In addition, by setting the [`usePredefinedRanges`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#usePredefinedRanges) property, a set of predefined ranges chips will be displayed along with the custom ones. + +```ts +public today = new Date(); + +public nextSeven = new Date( + this.today.getFullYear(), + this.today.getMonth(), + this.today.getDate() + 7 +); + +public customRanges: CustomDateRange[] = [ + { + label: 'Next 7 days', + dateRange: { + start: this.today, + end: this.nextSeven + } + } +]; +``` + +```html +<igx-date-range-picker [usePredefinedRanges]="true" [customRanges]="customRanges"></igx-date-range-picker> +``` + +In addition, custom content or actions can be templated using the [`igxPickerActions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickeractionsdirective.html) directive. The following demo shows the predefined and custom ranges along with the templated actions: + +```typescript +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; +import { CustomDateRange, DateRange, IgxPickerActionsDirective, OverlaySettings } from 'igniteui-angular/core'; +import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IChangeCheckboxEventArgs } from 'igniteui-angular/checkbox'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-rangdatepicker-range-buttons', + styleUrls: ['./daterangepicker-range-buttons.scss'], + templateUrl: './daterangepicker-range-buttons.html', + imports: [IgxDateRangePickerComponent, FormsModule, IgxPickerActionsDirective, IgxButtonDirective] +}) +export class DateRangePickerRangeButtonsComponent { + private element = inject(ElementRef); + + @ViewChild('rangePicker') + public dateRangePicker: IgxDateRangePickerComponent; + + public range: DateRange = { + start: new Date(), + end: new Date(new Date().setDate(new Date().getDate() + 2)) + }; + + public today = new Date(); + + public nextSeven = new Date( + this.today.getFullYear(), + this.today.getMonth(), + this.today.getDate() + 7 + ); + + public customRanges: CustomDateRange[] = [ + { + label: 'Next 7 days', + dateRange: { + start: this.today, + end: this.nextSeven + } + } + ]; + + public overlaySettings: OverlaySettings = { + outlet: this.element, + modal: true + }; +} +``` + +### Formatting + +The Date Range Picker Component supports different display and input formats. + +The display format of the value can be one of the listed Angular [DatePipe](https://angular.io/api/common/DatePipe) formats. This allows it to support predefined format options, such as `shortDate` and `longDate`. + +The `inputFormat` property accepts a constructed format string using characters supported by the DatePipe, e.g. `MM/dd/yyyy`, but doesn't support predefined format options, such as `shortDate` and `longDate`. If the `inputFormat` property is not defined then the [Angular locale ID](https://angular.io/api/core/LOCALE_ID) token is used when building it. + +```html +<igx-date-range-picker [(ngModel)]="range" required + inputFormat="dd/MM/yyyy" displayFormat="shortDate"> +</igx-date-range-picker> +``` + +If the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. + +>[!NOTE] +> The `IgxDateRangePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. + +### Forms and Validation + +The Date Range Picker Component supports all directives from the core [FormsModule](https://angular.io/api/forms/FormsModule), [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl), [`FormGroup`](https://angular.io/api/forms/FormGroup), etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [min and max values](#min-and-max-values) and [disabledDates](#disabled-and-special-dates) also act as form validators. + +The [NgModel](https://angular.io/api/forms/NgModel) and validators can be set on the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) or on the individual start and end date inputs. + +The following snippets and examples illustrate the use of the `required` validator in a Template-driven form. + +First, we need to set up the model for a single read-only range component, which is done on the component level: + +```html +<igx-date-range-picker [(ngModel)]="range" required> + <label igxLabel>Period</label> +</igx-date-range-picker> +``` + +The same configuration can be used when setting two separate inputs. Note that in this case, validation is also applied to both inputs. + +```html +<igx-date-range-picker [(ngModel)]="range" required> + <igx-date-range-start> + <label igxLabel>Start Date</label> + <input igxInput igxDateTimeEditor type="text"> + <igx-picker-toggle igxPrefix> + <igx-icon>calendar_today</igx-icon> + </igx-picker-toggle> + </igx-date-range-start> + <igx-date-range-end> + <label igxLabel>End Date</label> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-end> +</igx-date-range-picker> +``` + +When using two separate inputs, it is possible to set the model and required properties on each input. Note that validation is specific for each individual input. + +```html +<igx-date-range-picker> + <igx-date-range-start> + <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required> + </igx-date-range-start> + <igx-date-range-end> + <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required> + </igx-date-range-end> +</igx-date-range-picker> +``` + +```typescript +import { Component } from '@angular/core'; +import { DateRange, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core'; +import { IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent } from 'igniteui-angular/date-picker'; +import { IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-daterangepicker-validation', + styleUrls: ['./daterangepicker-validation.scss'], + templateUrl: './daterangepicker-validation.html', + imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, + IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent, + IgxSuffixDirective, IgxPickerClearComponent] +}) +export class DateRangePickerValidationComponent { + public rangeSingle: DateRange; + public rangeSeparate: DateRange; + public startDate: Date; + public endDate: Date; +} +``` + +<div class="divider--half"></div> + +### Min and max values + +You can specify [`minValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#minValue) and [`maxValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#maxValue) properties to restrict the user input by disabling calendar dates that are outside the range defined by those values. + +```typescript +public minDate = new Date(2020, 1, 15); +public maxDate = new Date(2020, 11, 1); +``` + +```html +<igx-date-range-picker [(ngModel)]="range" required + [minValue]="minDate" [maxValue]="maxDate"> +</igx-date-range-picker> +``` + +```html +<igx-date-range-picker [minValue]="minDate" [maxValue]="maxDate"> + <igx-date-range-start> + <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required> + </igx-date-range-start> + <igx-date-range-end> + <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required> + </igx-date-range-end> +</igx-date-range-picker> +``` + +The `IgxDateRangePickerComponent` is also a validator which means it controls its validity internally using `minValue` and `maxValue`. You can also access both of them through `ngModel`: + +```html +<igx-date-range-picker #dateRangePicker="ngModel" [(ngModel)]="range" required + [minValue]="minDate" [maxValue]="maxDate"> + <igx-date-range-start> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-start> + <igx-date-range-end> + <input igxInput igxDateTimeEditor type="text"> + </igx-date-range-end> +</igx-date-range-picker> + +<!-- minValue & maxValue will be true if the current range does not satisfy them --> +<div *ngIf="dateRangePicker.minValue || dateRangePicker.maxValue"> + <p>Value not in range.</p> +</div> +``` + +### Disabled And Special dates + +You also have the ability to set disabled dates in the calendar to narrow the range of dates the user can choose from. To set the disabled dates, you can use the [`disabledDates`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#disabledDates) property. + +```ts +export class DateRangeSampleComponent implements OnInit { + @ViewChild('dateRange') public dateRange: IgxDateRangePicker; + + public minDate = new Date(2025, 4, 1); + public maxDate = new Date(2025, 4, 31); + + public ngOnInit() { + this.dateRange.disabledDates = [ + { + type: DateRangeType.Between, + dateRange: [minDate, maxDate] + } + ] as DateRangeDescriptor[]; + } +} +``` + +You can see more information about all the possibilities that the `DisabledDates` property offers here: [calendar disabled dates](calendar.md#how-to-disable-dates-in-angular-calendar). + +You can also do the same if you want to set one or more special dates in the calendar; the only difference is that you need to use the `SpecialDates` property instead. [Special dates](./calendar.md#special-dates) + +### Templating + +When two editors are used, the default separator can be replaced using the [`igxDateRangeSeparator`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangeseparatordirective.html) directive. Here is how to change the date separator to a hyphen `-`: + +```html +<igx-date-range-picker> + <igx-date-range-start> + <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required> + </igx-date-range-start> + <ng-template igxDateRangeSeparator>-</ng-template> + <igx-date-range-end> + <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required> + </igx-date-range-end> +</igx-date-range-picker> +``` + +### Calendar specific settings + +You can further customize the pop-up calendar using various properties. More information on how these affect the calendar can be found in the [**IgxCalendarComponent**](calendar.md) topic. + +|Name|Type|Description| +|--|--|--| +| `orientation` | 'vertical' or 'horizontal' | Allows you to set whether the calendar should be displayed vertically or horizontally. | +| `displayMonthsCount` | string | Controls how many months are visible at a time, with a value of either 1 or 2. | +| `showWeekNumbers` | string | Enables or disables the week number column in the calendar. | +| `weekStart` | string | Sets the start day of the week. | +| `hideOutsideDays` | boolean | Hides days that fall outside the current month view. | +| `hideHeader` | boolean | Hides the calendar header (applicable only in dialog mode). | +| `headerOrientation` | 'vertical' or 'horizontal' | Aligns the calendar header vertically or horizontally (dialog mode only). | +| `activeDate` | Date | Sets the date that is initially highlighted in the calendar. If not set, the current date becomes the active date. | + +```html + <igx-date-range-picker [hideHeader]="true" + [orientation]="'vertical'" + [headerOrientation]="'horizontal'" + [displayMonthsCount]="1"> +</igx-date-range-picker> +``` + +The header, subheader and title parts of the calendar header can be customized by leveraging the `igxCalendarHeader`, `igxCalendarSubheader` and the `igxCalendarHeaderTitle` template directives, for example: + +```html +<igx-date-range-picker [value]="date"> + <ng-template igxCalendarHeader let-format> + {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }} + </ng-template> + <ng-template igxCalendarSubheader let-format> + <span (click)="format.yearView()">{{ format.year.combined }}</span> + <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span> + </ng-template> + <ng-template igxCalendarHeaderTitle let-format> + <span>My calendar</span> + </ng-template> +</igx-date--range-picker> +``` + +## Styling + +To get started with styling the `igxDateRangePicker`, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +The Date Range Picker Component exposes `date-range-picker-theme` and utilizes several components and directives, including `igxInputGroupComponent`, `igxCalendar` and `igxOverlay`. Any global styling for the aforementioned components and directives will affect the `igxDateRangeComponent`. As the Date Range Picker Component uses the input group and calendar themes, we have to create new themes that extend the [`calendar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) and [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) and use some of their parameters to style the date range picker in conjunction with the date range picker theme. We will use a single custom color palette to define the colors to use across all themes: + +```scss +// COMMON +$purple: #9E379F; +$blue: #61AEDB; +$light-gray: #efefef; + +$custom-palette: palette( + $primary: $blue, + $secondary: $purple, + $surface: $light-gray +); + +$today-text: color($custom-palette, "primary", 500); +$text-color: color($custom-palette, "secondary", 200); +$color-focused: color($custom-palette, "secondary", 500); + +// DATE-RANGE +$custom-date-range-theme: date-range-picker-theme( + $label-color: $color-focused +); + +// INPUT GROUP +$custom-input-group-theme: input-group-theme( + $filled-text-color: $text-color, + $idle-text-color: $text-color, + $focused-text-color: $color-focused, + $idle-bottom-line-color: $purple, + $hover-bottom-line-color: $color-focused, + $interim-bottom-line-color: $color-focused +); + +// CALENDAR +$custom-calendar-theme: calendar-theme( + $date-current-foreground: $today-text, + $border-radius: 0.5, + $date-border-radius: 0.5 +); +``` + +The last step is to pass the custom themes: + +```scss +:host { + @include tokens($custom-date-range-theme); + @include tokens($custom-input-group-theme); + @include tokens($custom-calendar-theme); +} +``` + +>[!WARNING] +>If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` + +```scss +:host { + ::ng-deep { + @include date-range-picker($custom-date-range-theme); + @include input-group($custom-input-group-theme); + @include calendar($custom-calendar-theme); + } +} +``` + +### Scoping Styles + +Regarding style scoping, you should refer to both styling sections [Overlay Scoped Component Styles](overlay-styling.md#Scoped Overlay Styles) and [Input Group Scoping Styles](input-group.md#styling) as they provide more information. + + +```typescript +import { Component, ElementRef, inject } from '@angular/core'; +import { DateRange, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core'; +import { IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent } from 'igniteui-angular/date-picker'; +import { IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-styled-rangedatepicker', + styleUrls: ['./daterangepicker-styling.scss'], + templateUrl: './daterangepicker-styling.html', + imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, + IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent] +}) +export class StyledDateRangePickerComponent { + element = inject(ElementRef); + + public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) }; +} +``` + + +## Application Demo + +The demo below defines a form for flight tickets that uses the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html). If no dates are selected, an [`IgxHint`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) is used to display a validation error. The selection of the dates is restricted by the [`minValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#minValue) and [`maxValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html#maxValue) properties of the [`IgxDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) + + +```typescript +import { Component, Pipe, PipeTransform } from '@angular/core'; +import { DateRange } from 'igniteui-angular/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxHintDirective, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker'; +import { FormsModule } from '@angular/forms'; + +import { PipeWithoutTownFrom as PipeWithoutTownFrom_1 } from '../../datepicker/datepicker-sample-9/datepicker-sample-9.component'; + +@Component({ + selector: 'app-flight-booking', + styleUrls: ['./daterangepicker-flight-booking.scss'], + templateUrl: './daterangepicker-flight-booking.html', + imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDateRangePickerComponent, IgxLabelDirective, IgxHintDirective, PipeWithoutTownFrom_1] +}) +export class FlightBookingComponent { + public towns: string[] = [ + 'New York', + 'Washington, D.C.', + 'London', + 'Berlin', + 'Sofia', + 'Rome', + 'Kiev', + 'Copenhagen', + 'Paris', + 'Barcelona', + 'Vienna', + 'Athens', + 'Dublin', + 'Yerevan', + 'Oslo', + 'Helsinki', + 'Stockholm', + 'Prague', + 'Istanbul' + ]; + public townFrom = 'Barcelona'; + public townTo = 'New York'; + public minDate: Date; + public maxDate: Date; + public range: DateRange; + + constructor() { + this.minDate = new Date(); + + this.maxDate = new Date(); + this.maxDate.setMonth(this.maxDate.getMonth() + 1); + } +} + +@Pipe({ + name: 'withoutTownFrom' +}) +export class PipeWithoutTownFrom implements PipeTransform { + public transform(collection: any[], townFrom: string) { + return collection.filter((item) => item !== townFrom); + } +} +``` + +<div class="divider--half"></div> + +## API References + +<div class="divider--half"></div> + +- [IgxDateRangePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdaterangepickercomponent.html) +- [IgxCalendarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) + +## Theming Dependencies + +- [IgxCalendar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) + +## Additional Resources + +Related topics: + +- [Date Time Editor](date-time-editor.md) +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) +- [Date Picker](date-picker.md) + + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md new file mode 100644 index 000000000..58fa74463 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/date-time-editor.md @@ -0,0 +1,308 @@ +--- +title: Angular Date Time Editor Component | Ignite UI for Angular | MIT license +_description: The Ignite UI for Angular Date Time Editor Directive allows the user to handle date and time using a Date Object. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Date Time Editor Directive, Angular Date Time Directive control, Date Time Editor, Angular Date Time Directive +_license: MIT +_tocName: Date Time Editor +--- + +# Angular Date Time Editor Directive + +<p class="highlight">The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. The user can edit the date or time portion, using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation.</p> + +## Angular Date Time Editor Directive Example + +```typescript +import { Component } from '@angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxDateTimeEditorDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-datetime-basic', + styleUrls: ['./datetime-basic.component.scss'], + templateUrl: './datetime-basic.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective] +}) +export class DateTimeBasicComponent { + public date = new Date(); +} +``` +```html +<igx-input-group> + <label igxLabel>Choose Date</label> + <input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [value]="date" [igxTextSelection]="true"/> +</igx-input-group> +``` +```scss +:host { + display: block; + padding: 1rem; + max-width: 600px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Angular Date Time Editor Directive + +To get started with the Ignite UI for Angular Date Time Editor directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDateTimeEditorModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxDateTimeEditorModule } from 'igniteui-angular/directives'; +// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDateTimeEditorModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxDateTimeEditorDirective` as a standalone dependency. + +```typescript +// home.component.ts + +import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +// import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-input-group> + <input type="text" igxInput igxDateTimeEditor [value]="date" /> + </igx-input-group> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES] +}) +export class HomeComponent { + public date = new Date(); +} +``` + +Now that you have the Ignite UI for Angular Date Time Editor module or directive imported, you can start using the `igxDateTimeEditor` directive. + +## Using the Angular Date Time Editor Directive + +To use an input as a date time editor, set an igxDateTimeEditor directive and a valid date object as value. In order to have complete editor look and feel, wrap the input in an [igx-input-group](input-group.md). This will allow you to not only take advantage of the following directives [`igxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html), [`igxLabel`](label-input.md), [`igx-prefix`](input-group.md#prefix--suffix), [`igx-suffix`](input-group.md#prefix--suffix), [`igx-hint`](input-group.md#hints), but will cover common scenarios when dealing with form inputs as well. + +### Binding + +A basic configuration scenario setting a Date object as a [`value`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#value): + +```typescript +public date = new Date(); +``` + +```html +<igx-input-group> + <input type="text" igxInput igxDateTimeEditor [value]="date" /> +</igx-input-group> +``` + +To create a two-way data-binding, set an `ngModel`: + +```html +<igx-input-group> + <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/> +</igx-input-group> +``` + +<div class="divider--half"></div> + +#### <a name="iso">Binding to ISO strings</a> + +The `IgxDateTimeEditorDirective` accepts an [`ISO 8601`](https://tc39.es/ecma262/#sec-date-time-string-format) strings. + +The string can be a full `ISO` string, in the format `YYYY-MM-DDTHH:mm:ss.sssZ` or it could be separated into date-only and time-only portions. + +##### Date-only + +If a date-only string is bound to the directive, it needs to follow the format - `YYYY-MM-DD`. This applies only when binding a string value to the directive, the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#inputFormat) is still used when typing values in the editor and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be `T00:00:00`. + +##### Time-only + +Time-only strings are normally not defined in the `ECMA` specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - `HH:mm:ss`. The 12 hour format is not supported. Please also note that this applies for _bound values only_. + +##### Full ISO string + +If a full `ISO` string is bound, the directive will parse it only if all elements required by [`Date.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#date_time_string_format) are provided. + +All false values, including `InvalidDate` will be parsed as `null`. Incomplete date-only, time-only, or full `ISO` strings will be parsed as `InvalidDate`. + +### Keyboard Navigation + +Date Time Editor Directive has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse. + +- <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>Arrow Left</kbd> / <kbd>Right</kbd> - navigates between date sections. On <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>Right</kbd> it goes to the end of the section. If already there it goes to the end of next section if any. It works in a similar fashion in the opposite direction. + +- <kbd>Arrow Up</kbd> / <kbd>Down</kbd> - increment/decrement date portions. See related [`spinLoop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#spinLoop) + +- <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>;</kbd> - set the current day and time in the editor. + +## Examples + +### Display and input format + +The [`IgxDateTimeEditor`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) supports different display and input formats. + +It uses Angular's [`DatePipe`](https://angular.io/api/common/DatePipe), which allows it to support predefined format options, such as `shortDate` and `longDate`. It can also accept a constructed format string using characters supported by the `DatePipe`, e.g. `EE/MM/yyyy`. Notice that formats like `shortDate`, `longDate`, etc., can be used as [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#displayFormat) only. Also, if no [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#displayFormat) is provided, the editor will use the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#inputformat) as its [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#displayFormat). +Alternatively, if the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. + +To set a specific input format, pass it as a string to the IgxDateTimeEditor directive. This will set both the expected user input format and the [mask](mask.md) for the editor. Additionally, the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#inputFormat) is locale based, so if none is provided, the editor will default to the one used by the browser. + +```html +<igx-input-group> + <input type="text" igxInput [displayFormat]="'shortDate'" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date"/> +</igx-input-group> +``` + +The table bellow shows formats that are supported by the directive's [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#inputFormat): + +| Format | Description | +| -------- | ----------- | +| `d` | Date, will be coerced with a leading zero while editing. | +| `dd` | Date with an explicitly set leading zero. | +| `M` | Month, will be coerced with a leading zero while editing. | +| `MM` | Month with an explicitly set leading zero. | +| `yy` | Short year format. | +| `yyyy` | Full year format. | +| `h` | Hours in 12-hour format, will be coerced with a leading zero while editing. | +| `hh` | Hours in 12-hour format with an explicitly set leading zero. | +| `H` | Hours in 24-hour format, will be coerced with a leading zero while editing. | +| `HH` | Hours in 24-hour format, with an explicitly set leading zero. | +| `m` | Minutes, will be coerced with a leading zero while editing. | +| `mm` | Minutes with an explicitly set leading zero. | +| `tt` | AM/PM section for 12-hour format. | + +> [!NOTE] +> The `IgxDateTimeEditorDirective` directive supports IME input. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends. + +### Min max value + +You can specify [`minValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#minValue) and [`maxValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#maxValue) properties to restrict input and control the validity of the ngModel. + +```typescript +public minDate = new Date(2020, 1, 15); +public maxDate = new Date(2020, 11, 1); +``` + +```html +<igx-input-group> + <input type="text" igxInput igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" [(ngModel)]="date"/> +</igx-input-group> + +``` + +The [`minValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#minValue) and [`minValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#minValue) inputs can also be of type `string`, see [Binding to ISO strings](#iso). + +### Increment and decrement <a name="increment-decrement"></a> + +[`igxDateTimeEditor`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) directive exposes public [`increment`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#increment) and [`decrement`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#decrement) methods. They increment or decrement a specific [`DatePart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/datepart.html) of the currently set date and time and can be used in a couple of ways. + +In the first scenario, if no specific [`DatePart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/datepart.html) is passed to the method, a default [`DatePart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/datepart.html) will increment or decrement, based on the specified [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#inputFormat) and the internal directive implementation. In the second scenario, you can explicitly specify what [`DatePart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/datepart.html) to manipulate as it may suite different requirements. +Also, both methods accept an optional `delta` parameter of type `number` which can be used to set the increment/decrement step. + +You may compare both in the following sample: +```typescript +import { Component } from '@angular/core'; +import { DatePart } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-datetime-advanced', + styleUrls: ['./datetime-advanced.scss'], + templateUrl: './datetime-advanced.html', + imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxSuffixDirective, IgxIconComponent] +}) + +export class DateTimeAdvancedComponent { + public date = new Date((new Date()).setHours(9, 0, 0, 0)); + public datePart: typeof DatePart = DatePart; +} +``` + +<div class="divider--half"></div> + +Additionally, `spinDelta` is an input property of type [`DatePartDeltas`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) and it can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, as well as when spinning with the [`increment`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#increment) and [`decrement`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#decrement) methods, as long as they don't have the `delta` parameter provided since it will take precedence over `spinDelta`. + +### In Angular Forms + +The Date Time Editor Directive supports all of the form directives from the core FormsModule [`NgModel`](https://angular.io/api/forms/NgModel) and [`ReactiveFormsModule`](https://angular.io/api/forms/ReactiveFormsModule) (FormControl, FormGroup, etc.). This also includes the [Forms `Validators`](https://angular.io/api/forms/Validators) functions. The following example illustrates the use of the `required` validator in a Template-driven Form. + +> [!NOTE] +> If needed, you can revert back to a valid state by handling the `validationFailed` event and changing the `newValue` property of the available arguments. + +Template-driven form example: + +```html +<form> + <igx-input-group> + <input igxInput type="text" [(ngModel)]="date" name="form" required + (valueChanged)="onValueChanged($event)" (validationFailed)="onValidationFailed($event)" + [igxDateTimeEditor]="'dd/MM/yyyy'" [minValue]="minDate" [maxValue]="maxDate" [isSpinLoop]="false" /> + </igx-input-group> +</form> +<div class="divider--half"></div> +``` + +### Text Selection + +You can force the component to select all of the input text on focus using [`igxTextSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtextselectiondirective.html). Find more info on [`igxTextSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtextselectiondirective.html) at [Label & Input](label-input.md#focus--text-selection). + +```html +<igx-input-group> + <input igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [igxTextSelection]="true"/> +</igx-input-group> +``` + +> [!NOTE] +> In order for the component to work properly, it is crucial to set [`igxTextSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtextselectiondirective.html) after the [`igxDateTimeEditor`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) directive. The reason for this is both directives operate on the input `focus` event so text selection should happen after the mask is set. + +## Styling + +For details check out the [`Input Group styling guide`](input-group.md#styling). +<div class="divider--half"></div> + +## API References + +- [IgxDateTimeEditorDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) +- [IgxHintDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) +- [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) +- [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) +- [IgxInputGroupComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) + +<div class="divider--half"></div> + + +## Additional Resources + +Related topics: + +- [Mask](mask.md) +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) + + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md new file mode 100644 index 000000000..56469a9e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md @@ -0,0 +1,601 @@ +--- +title: Angular Dialog Window Component - MIT license +_description: Whether building informative dialogs or data manipulation windows, Ignite UI for Angular Dialog Window component can manage information shown in real-time for fast capability. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Angular Dialog Window component, Angular Dialog Window control, Angular Dialog Component +_license: MIT +_tocName: Dialog Window +--- + +# Angular Dialog Window Component Overview + +<p class="highlight">Use the Ignite UI for Angular Dialog Window component to display messages or present forms for users to fill out. The component opens a dialog window centered on top of app content. You can also provide a standard alert message that users can cancel.</p> + +## Angular Dialog Window Example + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; + +@Component({ + selector: 'app-dialog-sample-1', + styleUrls: ['./dialog-sample-1.component.scss'], + templateUrl: './dialog-sample-1.component.html', + imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent] +}) +export class DialogSample1Component { } +``` +```html +<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button> + +<igx-dialog #alert + title="Notification" + message="Your email has been sent successfully!" + leftButtonLabel="OK" + (leftButtonSelect)="alert.close()"> +</igx-dialog> +``` +```scss +:host { + display: block; + padding: 16px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Dialog Window + +To get started with the Ignite UI for Angular Dialog Window component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDialogModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxDialogModule } from 'igniteui-angular/dialog'; +// import { IgxDialogModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDialogModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxDialogComponent` as a standalone dependency, or use the [`IGX_DIALOG_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/dialog/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_DIALOG_DIRECTIVES } from 'igniteui-angular/dialog'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxRippleDirective } from 'igniteui-angular/directives'; +// import { IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button> + + <igx-dialog #alert + title="Notification" + message="Your email has been sent successfully!" + leftButtonLabel="OK" + (leftButtonSelect)="alert.close()"> + </igx-dialog> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_DIALOG_DIRECTIVES, IgxButtonDirective, IgxRippleDirective] + /* or imports: [IgxDialogComponent, IgxButtonDirective, IgxRippleDirective] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Dialog Window module or directives imported, you can start using the `igx-dialog` component. + +<div class="divider--half"></div> + +## Using the Angular Dialog Window + +### Alert Dialog + +To create an alert dialog, in the template of our email component, we add the following code. We have to set the [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#title), [`message`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#message), +[`leftButtonLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#leftButtonLabel) and handle [`leftButtonSelect`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#leftButtonSelect) event: + +```html +<!--email.component.html--> +<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button> + +<igx-dialog #alert + title="Notification" + message="Your email has been sent successfully!" + leftButtonLabel="OK" + (leftButtonSelect)="alert.close()"> +</igx-dialog> +``` + +If everything's done right, you should see the demo sample shown above in your browser. + +<div class="divider--half"></div> + +### Standard Dialog + +To create a standard dialog, in the template of our file manager component, we add the following code. We have to set the [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#title), [`message`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#message), +[`leftButtonLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#leftButtonLabel), [`rightButtonLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#rightButtonLabel), and handle [`leftButtonSelect`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#leftButtonSelect) and [`rightButtonSelect`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#rightButtonSelect) events: + +```html +<!--file-manager.component.html--> +<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button> + +<igx-dialog #dialog title="Confirmation" + leftButtonLabel="Cancel" + (leftButtonSelect)="dialog.close()" + rightButtonLabel="OK" + (rightButtonSelect)="onDialogOKSelected($event)" + message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?"> +</igx-dialog> +``` + + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; + +@Component({ + selector: 'app-dialog-sample-2', + styleUrls: ['./dialog-sample-2.component.scss'], + templateUrl: './dialog-sample-2.component.html', + imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent] +}) +export class DialogSample2Component { + + constructor() { } + + public onDialogOKSelected(event) { + event.dialog.close(); + } +} +``` +```html +<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button> + +<igx-dialog #dialog title="Confirmation" + leftButtonLabel="Cancel" + (leftButtonSelect)="dialog.close()" + rightButtonLabel="OK" + (rightButtonSelect)="onDialogOKSelected($event)" + message="Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?"> +</igx-dialog> +``` +```scss +:host { + display: block; + padding: 16px; +} +``` + +<div class="divider--half"></div> + +### Custom Dialog + +To create a custom dialog, in the template of our sign-in component, we add the following code. The dialog title area can be customized using the `igxDialogTitle` directive or the `igx-dialog-title` selector. The actions area can be customized using the `igxDialogActions` directive or the `igx-dialog-actions` selector. +We add two input groups consisting of a label and and input decorated with the [**igxLabel**](input-group.md) and [**igxInput**](input-group.md) directives. + +```html +<!--sign-in.component.html--> +<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Custom Dialog</button> + +<igx-dialog #form [closeOnOutsideSelect]="true"> + <igx-dialog-title> + <div class="dialog-container"> + <igx-icon>vpn_key</igx-icon> + <div class="dialog-title">Sign In</div> + </div> + </igx-dialog-title> + + <form class="signInForm"> + <igx-input-group> + <igx-prefix> + <igx-icon>person</igx-icon> + </igx-prefix> + <label igxLabel for="username">Username</label> + <input igxInput id="username" type="text"/> + </igx-input-group> + <igx-input-group> + <igx-prefix> + <igx-icon>lock</igx-icon> + </igx-prefix> + <label igxLabel>Password</label> + <input igxInput id="password" type="password"/> + </igx-input-group> + </form> + + <div igxDialogActions> + <button igxButton (click)="form.close()">CANCEL</button> + <button igxButton (click)="form.close()">SIGN IN</button> + </div> +</igx-dialog> +``` + + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-dialog-sample-3', + styleUrls: ['./dialog-sample-3.component.scss'], + templateUrl: './dialog-sample-3.component.html', + imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxDialogActionsDirective] +}) +export class DialogSample3Component { + + constructor() { } + + public signIn(event) { + event.dialog.close(); + } +} +``` +```html +<button igxButton="contained" igxRipple="white" (click)="form.open()">Show Custom Dialog</button> + +<igx-dialog #form [closeOnOutsideSelect]="true"> + <igx-dialog-title> + <div class="title-container"> + <igx-icon>vpn_key</igx-icon> + <div class="dialog-title">Sign In</div> + </div> + </igx-dialog-title> + + <form class="signInForm"> + <igx-input-group> + <igx-prefix> + <igx-icon>person</igx-icon> + </igx-prefix> + <label igxLabel for="username">Username</label> + <input igxInput id="username" type="text" /> + </igx-input-group> + <igx-input-group> + <igx-prefix> + <igx-icon>lock</igx-icon> + </igx-prefix> + <label igxLabel>Password</label> + <input igxInput id="password" type="password" /> + </igx-input-group> + </form> + + <div igxDialogActions> + <button igxButton (click)="form.close()">CANCEL</button> + <button igxButton (click)="form.close()">SIGN IN</button> + </div> +</igx-dialog> +``` +```scss +:host { + display: block; + padding: 16px; +} + +.signInForm { + igx-input-group + igx-input-group { + margin-top: 24px; + } +} + +.title-container{ + display: flex; + + igx-icon { + margin-right: 8px; + } +} +``` + +<div class="divider--half"></div> + +### Position and Animation Settings + +There are two ways to change the position at which the `igx-dialog` will be shown: + +- Using [`open`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#open) method and pass a valid [`overlaySettings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html). Example: + +```typescript +import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core'; +// import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package + +@Component({...}) +export class HomeComponent { + public positionSettingsOnOpen: PositionSettings = { + horizontalDirection: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Middle, + horizontalStartPoint: HorizontalAlignment.Right, + verticalStartPoint: VerticalAlignment.Middle, + }; + public overlaySettings: OverlaySettings = { + positionStrategy: new GlobalPositionStrategy(this.positionSettingsOnOpen), + scrollStrategy: new NoOpScrollStrategy(), + modal: false, + closeOnOutsideClick: true + }; + + public openDialog() { + this.alert.open(this.overlaySettings); + } +} +``` + +- Using the `positionSettings` `@Input`. Example: + +```html +<igx-dialog #alert title="Notification" [positionSettings]="positionSettings" > +</igx-dialog> +``` + +```typescript +import { useAnimation } from '@angular/animations'; +import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core'; +// import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package + +@Component({...}) +export class HomeComponent { + public positionSettings: PositionSettings = { + openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), + closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), + horizontalDirection: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Middle, + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Middle, + minSize: { height: 100, width: 100 } + }; +} +``` + +> [!Note] +> The same approach should be used for the animation settings, use the `openAnimation` and `closeAnimation` properties to define animation params like duration. +`params` object example: + +```typescript +params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.quad, + endOpacity: 1, + fromPosition: 'translateX(-500px)', + startOpacity: 0, + toPosition: 'translateY(0)' +} +``` + +### Trap focus inside dialog + +By default when the dialog is opened the Tab key focus is trapped within it, i.e. the focus does not leave the element when the user keeps tabbing through the focusable elements. When the focus leaves the last element, it moves to the first one and vice versa, when SHIFT + TAB is pressed, when the focus leaves the first element, the last element should be focused. In case the dialog does not contain any focusable elements, the focus will be trapped on the dialog container itself. This behavior can be changed by setting the [`focusTrap`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html#focusTrap) property. + +## Styling + +### Dialog Theme Property Map + +Changing the `$background` property automatically updates the following dependent properties: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$background</strong></summary></details> + </td> + <td>$title-color</td> + <td>The dialog title text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$message-color</td> + <td>The dialog message text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$border-color</td> + <td>The border color used for dialog component.</td> + </tr> + </tbody> +</table> + +To get started with styling the dialog window, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`dialog-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-dialog-theme) and accepts parameters that style the dialog. By providing the `$background`, the theme automatically selects suitable contrast colors for the foreground properties. However, you can still manually define them if desired. + +```scss +$my-dialog-theme: dialog-theme( + $background: #011627, + $title-color: #ecaa53, + $border-radius: 5px, +); +``` + +> [!NOTE] +> In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](button.md)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). + +```scss +$custom-button: contained-button-theme( + $background: #ecaa53, + $foreground: #011627, +); +``` + +Since the dialog window uses the [`IgxOverlayService`](overlay.md), in order for our custom theme to reach down the dialog window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible. + +```html +<div igxOverlayOutlet> + <igx-dialog #dialog1> + <!-- .... --> + </igx-dialog> +</div> +``` + +> [!NOTE] +> In order to learn more about the various options for providing themes to elements that are shown by using the [`IgxOverlayService`](overlay.md), you can take a look at the [Overlay styling topic](overlay-styling.md). + +### Including Themes + +<div class="divider"></div> + +The last step is to **include** the component theme in our application. + +```scss +:host { + @include tokens($my-dialog-theme); +} +``` + +>[!NOTE] +>If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles. + +```scss +:host { + ::ng-deep { + @include tokens($my-dialog-theme); + } +} +``` + +### Demo + +```typescript +import { useAnimation } from '@angular/animations'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { CloseScrollStrategy, GlobalPositionStrategy, IgxOverlayOutletDirective, PositionSettings } from 'igniteui-angular/core'; +import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { slideInBottom, slideOutTop } from 'igniteui-angular/animations'; + +@Component({ + selector: 'app-dialog-styling-sample', + styleUrls: ['./dialog-styling-sample.component.scss'], + templateUrl: './dialog-styling-sample.component.html', + imports: [IgxOverlayOutletDirective, IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxDialogActionsDirective] +}) +export class DialogStylingSampleComponent implements OnInit { + + @ViewChild(IgxOverlayOutletDirective, { static: true }) + public outlet: IgxOverlayOutletDirective; + + @ViewChild('dialog1', { read: IgxDialogComponent, static: true }) + public dialog: IgxDialogComponent; + + private _animaitonSettings: PositionSettings = { + openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }), + closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } }) + }; + + private _dialogOverlaySettings2; + + public openDialog() { + this._dialogOverlaySettings2.outlet = this.outlet; + this.dialog.open(this._dialogOverlaySettings2); + } + + public ngOnInit() { + this._dialogOverlaySettings2 = { + modal: true, + outlet: this.outlet, + scrollStrategy: new CloseScrollStrategy(), + positionStrategy: new GlobalPositionStrategy(this._animaitonSettings) + }; + } +} +``` +```html +<div igxOverlayOutlet class="dialog-wrapper"> + <button igxButton="contained" igxRipple="white" (click)="openDialog()">Show Styled Dialog</button> + <igx-dialog #dialog1 message="This will create a new social media account."> + <igx-dialog-title> + <div class="dialog-container"> + <igx-icon>account_box</igx-icon> + <div class="dialog-title">Create a new account?</div> + </div> + </igx-dialog-title> + <div igxDialogActions class="dialog-container dialog-actions"> + <button igxButton="contained" igxRipple="white" (click)="dialog.close()">CREATE</button> + <button igxButton="contained" igxRipple="white" (click)="dialog.close()">CANCEL</button> + </div> + </igx-dialog> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$my-dialog-theme: dialog-theme( + $background: #011627, + $title-color: #ecaa53, + $border-radius: 5px, +); + +$custom-button: contained-button-theme( + $background: #ecaa53, + $foreground: #011627, +); + +.dialog-container { + @include tokens($custom-button); +} + +:host { + @include tokens($my-dialog-theme); +} +``` + +<div class="divider--half"></div> + +## API References + +<div class="divider--half"></div> + +- [IgxDialogComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html) +- [IgxDialogComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-dialog-theme) +- [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) +- [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) + +## Theming Dependencies + +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md new file mode 100644 index 000000000..84f5b5406 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/display-density.md @@ -0,0 +1,242 @@ +--- +title: Size | Ignite UI for Angular +_description: The Ignite UI for Angular provides a way of setting size property on application or component level. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Components, Native Angular Controls, Native Angular Components Library, size +_tocName: Size +--- + +# Size + +Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options: + +- **large** +- **medium** +- **small** + +Using the `--ig-size` custom CSS property, you can configure the size on an application or a component level. + +## Angular Size Example + +```typescript +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-display-density', + styleUrls: ['./display-density.component.scss'], + templateUrl: './display-density.component.html', + imports: [IgxButtonGroupComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] +}) + +export class DisplayDensityComponent implements OnInit { + public sizes: any[]; + public size = 'large'; + public user: any; + + public ngOnInit() { + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + + this.user = { + firstName: 'John', + lastName: 'Smith', + phone: 888123456 + }; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(eventArgs: any) { + this.size = this.sizes[eventArgs.index].label; + } +} +``` +```html +<div class="density-chooser"> + <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup> +</div> + +<igx-input-group> + <input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" /> + <label igxLabel for="firstName">First Name</label> +</igx-input-group> + +<igx-input-group> + <input igxInput name="lastName" type="text" [(ngModel)]="user.lastName" required /> + <label igxLabel for="lastName">Last Name</label> +</igx-input-group> + +<igx-input-group> + <igx-prefix>+359</igx-prefix> + <label igxLabel for="phone">Phone</label> + <input type="number" igxInput name="phone" [(ngModel)]="user.phone" /> + <igx-suffix> + <igx-icon>phone</igx-icon> + </igx-suffix> + <igx-hint position="start">Ex.: +359 888 123 456</igx-hint> +</igx-input-group> +``` +```scss +:host { + display: block; + padding: 8px; +} + +.density-chooser { + margin-bottom: 16px; +} + +igx-buttongroup, igx-input-group { + display: block; + width: 500px; +} +``` + +<div class="divider--half"></div> + +> [!NOTE] +> To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. + +## Usage + +**Setting size on an application/component level** + +To set the size, use the `--ig-size` CSS custom property. You can set the size for all components in your app by setting the aforementioned property on the body element. + +The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`. + +```css +body { + --ig-size: var(--ig-size-small); +} +``` + +To set the size on a component level, target the element selector. For instance, to set the size of the input group to `small`, you can do: + +```css +igx-input-group { + --ig-size: var(--ig-size-small); +} +``` + +## Understanding Size with CSS Custom Properties + +The sizing system in Ignite UI works through a set of CSS custom properties that automatically adjust component dimensions and spacing. When you change the `--ig-size` property, components automatically detect this change and apply the appropriate sizing values. + +### Size Detection Variables + +Components use several CSS custom properties to detect and respond to size changes: + +- `--component-size` - Maps the global `--ig-size` to a numeric value (1=small, 2=medium, 3=large) +- `--is-small` - Set to 1 when component is small-sized, 0 otherwise +- `--is-medium` - Set to 1 when component is medium-sized, 0 otherwise. +- `--is-large` - Set to 1 when component is large-sized, 0 otherwise. + +These variables are automatically calculated using mathematical CSS expressions and change whenever `--ig-size` is modified. + +### Size Constants + +The theming system defines three size constants: + +- `--ig-size-small` (value: 1) +- `--ig-size-medium` (value: 2) +- `--ig-size-large` (value: 3). + +## Incorporating Size in Your Own Components + +You can make your custom components responsive to size changes using Ignite UI's Sass utilities. These utilities generate the necessary CSS custom properties and mathematical expressions behind the scenes. + +### Using the Sizable Mixin and Function + +Here's how to create a component that responds to the global size setting: + +```html +<div class="my-responsive-element"></div> +``` + +```scss +@use "igniteui-angular/theming" as *; + +.my-responsive-element { + // The sizable mixin sets up size detection CSS custom properties + @include sizable(); + + // Connect to the global size system + --component-size: var(--ig-size, var(--ig-size-large)); + + // Use the sizable function for responsive sizing + --size: #{sizable(10px, 20px, 30px)}; + width: var(--size); + height: var(--size); +} +``` + +### How the Sizable System Works Behind the Scenes + +When you use `@include sizable()`, it generates CSS custom properties that detect the current component size: + +```css +.my-responsive-element { + --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1); + --is-medium: min( + clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), + clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) + ); + --is-small: clamp(0, var(--ig-size-medium, 2) - var(--component-size, 1), 1); +} +``` + +The `sizable(10px, 20px, 30px)` function generates a CSS expression that automatically selects the appropriate value: + +```css +--size: max( + calc(var(--is-large, 1) * 30px), + calc(var(--is-medium, 1) * 20px), + calc(var(--is-small, 1) * 10px) +); +``` + +This mathematical approach using `clamp()`, `min()`, `max()`, and `calc()` functions allows components to automatically switch between size values based on the current `--ig-size` setting. + +## API References + +<div class="divider"></div> + +- [Themes - Sizable Mixin](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-sizable) +- [Themes - Sizable Function](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-sizable) + +### Sizing and Spacing Functions + +- [Utilities - Pad](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/utilities#function-pad) +- [Utilities - Pad Inline](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/utilities#function-pad-inline) +- [Utilities - Pad Block](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/utilities#function-pad-block) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md new file mode 100644 index 000000000..4e42a4327 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md @@ -0,0 +1,323 @@ +--- +title: Angular Divider Component - MIT license +_description: Ignite UI for Angular Divider component enables users to separate content both horizontally and vertically. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Angular Divider component, Angular Divider directive, Angular Divider control +_license: MIT +_tocName: Divider +--- + +# Angular Divider Component Overview + +<p class="highlight">The divider component enables users to separate content both horizontally and vertically.</p> + +## Angular Divider Example + +By default the divider is a solid horizontal line. + + +```typescript +import { Component } from '@angular/core'; +import { IgxDividerDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-divider-default', + styleUrls: ['./divider-default.component.scss'], + templateUrl: './divider-default.component.html', + imports: [IgxDividerDirective] +}) +export class DividerDefaultComponent { + + constructor() { + } + +} +``` +```html +<div class="divider-sample"> + <div> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p> + <igx-divider></igx-divider> + <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p> + </div> +</div> +``` +```scss +.divider-sample { + display: flex; + padding: 20px; + border: 1px solid #ededed; + p { + margin-top: 0; + } + .mt { + margin-top: 20px; + } +} +``` + +## Getting Started with Ignite UI for Angular Divider + +To get started with the Ignite UI for Angular Divider component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDividerModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxDividerModule } from 'igniteui-angular/directives'; +// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDividerModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxDividerDirective` as a standalone dependency. + +```typescript +// home.component.ts + +import { IgxDividerDirective } from 'igniteui-angular/directives'; +// import { IgxDividerDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '<igx-divider></igx-divider>', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxDividerDirective] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Divider module or directive imported, you can start using the `igx-divider` component. + +## Using the Angular Divider + +### Vertical Divider + +By adding the `vertical` attribute and setting its value to `true`, you can change the direction of the divider from horizontal to vertical. + +```html +<igx-divider [vertical]="true"></igx-divider> +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxDividerDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-divider-vertical', + styleUrls: ['./divider-vertical.component.scss'], + templateUrl: './divider-vertical.component.html', + imports: [IgxDividerDirective] +}) +export class DividerVerticalComponent { + + constructor() { + } + +} +``` +```html +<div class="divider-sample"> + <div> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At facere fugit in libero nisi pariatur quo reiciendis sequi tempore vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p> + </div> + <igx-divider [vertical]="true"></igx-divider> + <div> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At facere fugit in libero nisi pariatur quo reiciendis sequi tempore vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p> + </div> +</div> +``` +```scss +.divider-sample { + display: flex; + padding: 20px; + border: 1px solid #ededed; + > div { + margin-left: 20px; + text-align: left; + &:first-of-type { + text-align: right; + margin-left: 0; + margin-right: 20px; + } + } + p { + margin: 0; + } + .mt { + margin-top: 20px; + } +} +``` + + +### Dashed Divider + +The default style of the divider is a `solid` line but it can also be `dashed`. +To change the default look simply use the `type` attribute of the divider and set its value to `dashed`. + +```html +<igx-divider type="dashed"></igx-divider> +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxDividerDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-divider-dashed', + styleUrls: ['./divider-dashed.component.scss'], + templateUrl: './divider-dashed.component.html', + imports: [IgxDividerDirective] +}) +export class DividerDashedComponent { + + constructor() { + } + +} +``` +```html +<div class="divider-sample"> + <div> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p> + <igx-divider type="dashed"></igx-divider> + <p class="mt mb">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p> + </div> +</div> +``` +```scss +.divider-sample { + display: flex; + padding: 20px; + border: 1px solid #ededed; + p { + margin-top: 0; + } + .mt { + margin-top: 16px; + } + .mb { + margin-bottom: 0; + } +} +``` + + +### Inset Divider + +The divider can be set in on both sides. +To inset the divider, set the `middle` attribute of the divider to `true` and provider the desired `inset` value, the divider will start shrinking from both ends. + +**Keep in mind that you have to add unit(px,rem,%...) at the end of the value otherwise, it will not work.** + +```html +// Both side +<igx-divider [middle]="true" inset="80px"></igx-divider> + +// Left side only +<igx-divider inset="40px"></igx-divider> + +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxDividerDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-divider-inset', + styleUrls: ['./divider-inset.component.scss'], + templateUrl: './divider-inset.component.html', + imports: [IgxDividerDirective] +}) +export class DividerInsetComponent { + + constructor() { + } + +} +``` +```html +<div class="divider-sample"> + <div> + <h4 class="mb">Both sides inset.</h4> + <igx-divider [middle]="true" inset="100px"></igx-divider> + <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p> + </div> + <div> + <h4 class="mb">Left side only(default).</h4> + <igx-divider inset="40px"></igx-divider> + <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p> + </div> +</div> +``` +```scss +.divider-sample { + display: flex; + padding: 20px; + border: 1px solid #ededed; + > div { + margin-left: 40px; + &:first-of-type { + margin-left: 0; + margin-right: 0; + } + } + h4 { + margin-top: 0; + } + p { + margin-top: 0; + } + .mt { + margin-top: 16px; + margin-bottom: 0; + } + .mb { + margin-bottom: 16px; + } +} + +.inset-sample { + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.divider-indent-text { + padding-left: 40px; +} +``` + + +If the value of the `middle` attribute is set to a false value, or if the attribute is omitted altogether, the divider will set in only on the left. + +## API References + +<div class="divider--half"></div> + +- [IgxDividerDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) +- [IgxDividerDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-divider-theme) + +## Additional Resources + +<div class="divider--half"></div> + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md new file mode 100644 index 000000000..82939252f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dock-manager.md @@ -0,0 +1,234 @@ +--- +title: Manage Angular Page Layout | Dock Manager | Ignite UI | Infragistics +_description: Learn how the Dock Manager lets you customize the layout of your Angular application via panes that can be pinned, resized, moved, and hidden. +_keywords: manage angular page layout, Ignite UI for Angular, Infragistics +_license: commercial +_tocName: Dock Manager +_premium: true +--- + +# Dock Manager + +The Ignite UI Dock Manager component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes. + +## Angular Dock Manager Example + + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import { IgcDockManagerLayout, + IgcDockManagerPaneType, + IgcSplitPaneOrientation } from 'igniteui-dockmanager'; + +@Component({ + selector: 'app-dock-manager', + styleUrls: ['./dock-manager.component.scss'], + templateUrl: './dock-manager.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class DockManagerComponent { + public layout: IgcDockManagerLayout = { + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content1', + header: 'Content Pane 1' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content2', + header: 'Unpinned Pane 1', + isPinned: false + } + ] + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + size: 200, + panes: [ + { + type: IgcDockManagerPaneType.documentHost, + size: 200, + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + allowEmpty: true, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + header: 'Document 1', + contentId: 'content3', + documentOnly: true + }, + { + type: IgcDockManagerPaneType.contentPane, + header: 'Document 2', + contentId: 'content4', + documentOnly: true + } + ] + } + ] + } + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content5', + header: 'Unpinned Pane 2', + isPinned: false + } + ] + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + size: 200, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content6', + header: 'Tab 1' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content7', + header: 'Tab 2' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content8', + header: 'Tab 3' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content9', + header: 'Tab 4' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content10', + header: 'Tab 5' + } + ] + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content11', + header: 'Content Pane 2' + } + ] + } + ] + }, + floatingPanes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + floatingHeight: 150, + floatingWidth: 250, + floatingLocation: { x: 300, y: 200 }, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content12', + header: 'Floating Pane' + } + ] + } + ] + }; +} +``` +```html +<igc-dockmanager [layout]=layout style="height: 600px;"> + <div slot="content1" class="dockManagerContent">Content 1</div> + <div slot="content2" class="dockManagerContent">Content 2</div> + <div slot="content3" class="dockManagerContent">Content 3</div> + <div slot="content4" class="dockManagerContent">Content 4</div> + <div slot="content5" class="dockManagerContent">Content 5</div> + <div slot="content6" class="dockManagerContent">Content 6</div> + <div slot="content7" class="dockManagerContent">Content 7</div> + <div slot="content8" class="dockManagerContent">Content 8</div> + <div slot="content9" class="dockManagerContent">Content 9</div> + <div slot="content10" class="dockManagerContent">Content 10</div> + <div slot="content11" class="dockManagerContent">Content 11</div> + <div slot="content12" class="dockManagerContent">Content 12</div> +</igc-dockmanager> +``` +```scss +.dockManagerContent { + padding: 0.5rem; +} +``` + + +<div class="divider--half"></div> + + +## Usage + +The Dock Manager is a standard [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and as such can be used in an Angular application. + +Follow the steps below to add the Dock Manager package to your Angular project and set it up in order to use the component. + +First, install the `igniteui-dockmanager` package + +```cmd +npm install igniteui-dockmanager +``` + +Then, include the `CUSTOM_ELEMENTS_SCHEMA` schema in the `AppModule`: + +```typescript +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; + +@NgModule({ + ... + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class AppModule {} +``` + +Next, one should call the `defineComponents()` function in the `main.ts` file: + +```typescript +import { AppModule } from './app/app.module'; +import { defineComponents } from 'igniteui-dockmanager'; +import { enableProdMode } from '@angular/core'; +import { environment } from '.environments/environment'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); + +defineComponents(IgcDockManagerComponent); +``` + +This is it, you are now ready to use the Dock Manager component in an Angular component template. To do so simply use its tag name: + +```html +<igc-dockmanager> +</igc-dockmanager> +``` + +For further information on the usage of the Dock Manager component, you can check out [this topic]({environment:infragisticsBaseUrl}/products/ignite-ui-web-components/web-components/components/dock-manager.html). + +For a more advanced example of the usage of the Dock Manager component with panes hosting various Ignite UI for Angular components, see this version of the [data analysis sample](./general/data-analysis.md#data-analysis-with-dockmanager). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md new file mode 100644 index 000000000..79bebe09c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drag-drop.md @@ -0,0 +1,1317 @@ +--- +title: Angular Drag and Drop | IgniteUI for Angular | Infragistics | MIT license +_description: Learn how to use Angular drag and drop directives to perform dragging of elements around the page. +_keywords: Angular Drag and Drop, Angular Drag and Drop Directives, Angular UI components, Ignite UI for Angular, Infragistics +_license: MIT +_tocName: Drag and Drop +--- + +# Angular Drag and Drop Directives Overview + +<p class="highlight">The Ignite UI for Angular Drag and Drop directives enable dragging of elements around the page. The supported features include free dragging, using a drag handle, drag ghost, animations and multiple drop strategies.</p> + +## Angular Drag and Drop Example + +Drag and drop icon to reposition it. + + +```typescript +import { Component } from '@angular/core'; + +import { IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-icons-sample', + styleUrls: ['./icons-sample.component.scss'], + templateUrl: './icons-sample.component.html', + imports: [IgxDragDirective, IgxDropDirective] +}) + +export class IconsSampleComponent { + public dragIconId: number; + public dropTileId: number; + public icons = [ + { + id: 0, url: 'assets/images/drag-drop/profile.png' + }, + { + id: 1, url: 'assets/images/drag-drop/calendar.png' + }, + { + id: 2, url: 'assets/images/drag-drop/mail.png' + }, + { + id: 3, url: 'assets/images/drag-drop/photos.png' + }, + { + id: 4, url: 'assets/images/drag-drop/videos.png' + }, + { + id: 5, url: 'assets/images/drag-drop/cloud.png' + }, + { + id: 6, url: 'assets/images/drag-drop/map.png' + }, + { + id: 7, url: 'assets/images/drag-drop/contacts.png' + }, + { + id: 8, url: 'assets/images/drag-drop/chat.png' + } + ]; + + public onIconDropped(ev) { + ev.drag.dropFinished(); + } + + public onEnterHandler(ev): void { + this.dropTileId = parseInt(ev.owner.element.nativeElement.id, 10); + // the event gets raised immediately, but we want to swap only when we drag over another icon + if (this.dragIconId === this.dropTileId) { + return; + } + const dragIndex = this.icons.findIndex((iconObj) => iconObj.id === this.dragIconId); + const dropIndex = this.icons.findIndex((iconObj) => iconObj.id === this.dropTileId); + this.swapIcons(dragIndex, dropIndex); + } + + public dragStartHandler(id: number): void { + this.dragIconId = id; + } + + public dragEndHandler(dragRef: HTMLElement) { + dragRef.style.visibility = 'visible'; + } + + public ghostCreateHandler(dragRef: HTMLElement) { + dragRef.style.visibility = 'hidden'; + } + + private swapIcons(dragIndex: number, dropIndex: number) { + const tempObj = this.icons[dragIndex]; + this.icons.splice(dragIndex, 1); + this.icons.splice(dropIndex, 0, tempObj); + } +} +``` +```html +<div class="icons_wrapper"> + @for (icon of icons; track icon) { + <div class="drag_container" + igxDrag + igxDrop + #dragRef + id="{{icon.id}}" + (dropped)="onIconDropped($event)" + (dragStart)="dragStartHandler(icon.id)" + (ghostCreate)="ghostCreateHandler(dragRef)" + (dragEnd)="dragEndHandler(dragRef)" + (enter)="onEnterHandler($event)" + [ghostClass]="'drag_ghost_class'"> + <span class="icon_container" draggable="false" onmousedown="if (event.preventDefault) event.preventDefault()"> + <img [src]="icon.url"/> + </span> + </div> + } +</div> +``` +```scss +.icons_wrapper { + display: flex; + width: 300px; + flex-direction: row; + flex-wrap: wrap; + margin: 20px; +} +.drag_container { + padding: 0px; + width: 100px; + height: 100px; + display:flex; + justify-content: center; + align-items: center; + position: relative; +} +.icon_container { + -moz-user-select: none; + padding: 1px; + position: relative; + & img { + position: relative; + z-index: 2; + width: 100%; + height: 100%; + } + &:after { + content: ''; + background: transparent; + position: absolute; + top: 50%; + left:50%; + width:0px; + height:0px; + z-index: 1; + box-shadow: 0px 3px 30px 20px #000; + } +} +.drag_ghost_class { + width: 110px; + height: 110px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Drag and Drop + +To get started with the Ignite UI for Angular Drag and Drop directives, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDragDropModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxDragDropModule } from 'igniteui-angular/directives'; +// import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDragDropModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxDragDirective` and `IgxDropDirective` as standalone dependencies, or use the [`IGX_DRAG_DROP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/drag-drop/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular/directives'; +// import { IGX_DRAG_DROP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <div igxDrag>Drag me</div> + <div igxDrop>Drop here</div> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_DRAG_DROP_DIRECTIVES] + /* or imports: [IgxDragDirective, IgxDropDirective] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Drag and Drop module or directives imported, you can start using the `igxDrag` and `igxDrop` directives. + +## Using the Angular Drag Directive + +When an element inside your Angular application needs to be dragged from one place to another on the page, the [`igxDrag`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html) directive is designed to help achieve this behavior. In combination with the [`igxDrop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html) directive, the placing of the dragged element can be done as well, so you can have fully interactive application. + +### Dragging Fundamentals + +A drag operation starts when the end user swipes at least 5px in any direction. This is customizable and can be changed using the [`dragTolerance`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragTolerance) input. Otherwise the interaction is considered as a click and a `dragClick` event is triggered. + +When the dragging starts, the [`dragStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragStart) event is triggered. To prevent any actual movement to occur, the event can be canceled by setting the [`cancel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/idragstarteventargs.html#cancel) property to `true`. + +Before any actual movement is about to be performed, the [`dragMove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragMove) event is also triggered, containing the last and next position of the pointer. It is triggered every time a movement is detected while dragging an element around. + +After the user releases the mouse/touch the drag ghost element is removed from the DOM and the [`dragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragEnd) event will be emitted. + +> [!Note] +> Due to the nature of the [`dragMove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragMove) event, it can be triggered many times in a short period of time, which may cause performance issues for complex operations done when triggered. + +### Dragging With Ghost + +The [`igxDrag`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html) directive can be applied on any DOM element by just adding it to its template. + +```html +<div igxDrag>Drag me</div> +``` + +The default behavior of `igxDrag` directive is to leave the base element unmodified and to create a ghost element when drag operation is performed by the end user. + +Before the ghost is rendered on the page, a [`ghostCreate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#ghostCreate) event is triggered containing information of the ghost element that is about to be added. The event is triggered right after the [`dragStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragStart) event. If the [`dragStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragStart) is canceled, no ghost will be created and the [`ghostCreate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#ghostCreate) event will not trigger accordingly. + +Right before the ghost is about to be removed, the [`ghostDestroy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#ghostDestroy) event will be triggered. + +### Customizing The Ghost + +The ghost element by default is a copy of the base element the `igxDrag` is used on. It can be customized by providing a template reference to the [`ghostTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#ghostTemplate) input directly. + +```html +<div class="email-content flexlist" + igxDrag + [ghostTemplate]="customGhost"> + <div class="sender"> + {{email.sender}} + </div> + <div class="email-title"> + {{email.title}} + </div> +</div> +<ng-template #customGhost> + <div class="dragGhost"> + <igx-icon fontSet="material">email</igx-icon> + Moving {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}} + </div> +</ng-template> + +``` + +### Dragging Without Ghost + +If you would like to move the base element, to which the `igxDrag` directive is applied, you can do that by setting the [`ghost`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#ghost) input to `false`. That way there will be no extra ghost element rendered and if you need to apply custom styling when dragging and element, you can apply it directly to the base element. + +```html +<div igxDrag [ghost]="false">Drag me</div> +``` + +### Dragging Using a Handle + +You can specify an element that is a child of the `igxDrag` by which to drag, since by default the whole element is used to perform that action. It can be done using the `igxDragHandle` directive and can be applied to multiple elements inside the `igxDrag`. + +```html +<div + igxDrag + [ghost]="false" + [dragTolerance]="0" + (dragMove)=onDragMove($event)> + <igx-icon igxDragHandle fontSet="material" class="dialogHandle">drag_indicator</igx-icon> + <div class="igx-dialog__window"> + </div> +</div> +``` + +Drag the dialog using the handle in the following demo. + +```typescript +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { GlobalPositionStrategy, NoOpScrollStrategy, OverlaySettings } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxDragDirective, IgxDragHandleDirective, IgxDragLocation, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-drag-dialog-sample', + templateUrl: './drag-dialog-sample.component.html', + styleUrls: ['./drag-dialog-sample.component.scss'], + imports: [IgxButtonDirective, IgxToggleDirective, IgxDragDirective, IgxIconComponent, IgxDragHandleDirective] +}) +export class DragDialogSampleComponent { + @ViewChild('toggleForm', { static: true }) + public toggleForm: IgxToggleDirective; + + @ViewChild('toggleForm', { read: IgxDragDirective, static: true }) + public toggleFormDrag: IgxDragDirective; + + @ViewChild('dialogButton', { static: true }) + public buttonElement: ElementRef; + public toggleStartPageX; + public toggleStartPageY; + + + private overlaySettings: OverlaySettings = { + positionStrategy: new GlobalPositionStrategy(), + scrollStrategy: new NoOpScrollStrategy(), + modal: true, + closeOnOutsideClick: true + }; + + constructor() { } + + public openDialog() { + this.toggleForm.open(this.overlaySettings); + if (!this.toggleStartPageX && !this.toggleStartPageY) { + this.toggleStartPageX = this.toggleFormDrag.pageX; + this.toggleStartPageY = this.toggleFormDrag.pageY; + } + this.toggleFormDrag.setLocation(new IgxDragLocation(this.toggleStartPageX, this.toggleStartPageY)); + } + + public onDragMove(e) { + const deltaX = e.nextPageX - e.pageX; + const deltaY = e.nextPageY - e.pageY; + e.cancel = true; + this.toggleForm.setOffset(deltaX, deltaY); + } +} +``` +```html +<button #dialogButton igxButton="contained" (click)="openDialog()">Show Dialog</button> + +<div class="dialog" + igxToggle + #toggleForm="toggle" + igxDrag + [ghost]="false" + [dragTolerance]="0" + (dragMove)=onDragMove($event)> + <igx-icon class="dialog__icon" igxDragHandle>drag_indicator</igx-icon> + <span class="dialog__title">Draggable Dialog</span> + <span class="dialog__content">Grab the handle icon to drag.</span> +</div> +``` +```scss +@use '../../../../variables' as *; + +@include dialog( + dialog-theme( + $schema: $schema + ) +); + +@include dialog-typography(); + +:host { + display: block; + margin: 16px; + + @include b(dialog) { + @extend %igx-dialog-window; + + display: flex; + flex-direction: column; + max-width: rem(280px); + + @include e(icon) { + position: absolute; + right: rem(24px); + top: rem(24px); + cursor: move; + } + + @include e(title) { + @extend %igx-dialog-title; + } + + @include e(content) { + @extend %igx-dialog-content; + } + } +} +``` + +<div class="divider--half"></div> + +### Animations + +When an element is being dragged, there are no animations applied by default. + +You can apply transition animation to the `igxDrag` at any time, but it is advised to use it when dragging ends or the element is not currently dragged. This can be achieved by using the [`transitionToOrigin`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#transitionToOrigin) and the [`transitionTo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#transitionTo) methods. + +The `transitionToOrigin` method, as the name suggests, animates the currently dragged element or its ghost to the start position, where the dragging began. The `transitionTo` method animates the element to a specific location relative to the page (i.e. `pageX` and `pageY`) or to the position of a specified element. If the element is not being currently dragged, it will animate anyway or create ghost and animate it to the desired position. + +Both functions have arguments that you can set to customize the transition animation and set duration, timing function or delay. If specific start location is set it will animate the element starting from there. + +When the transition animation ends, if a ghost is created, it will be removed and the `igxDrag` directive will return to its initial state. If no ghost is created, it will keep its position. In both cases, then the [`transitioned`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#transitioned) event will be triggered, depending on how long the animation lasts. If no animation is applied, it will be triggered instantly. + +You can have other types of animations that involve element transformations. That can be done like any other element either using the Angular Animations or straight CSS Animations to either the base `igxDrag` element or its ghost. If you want to apply them to the ghost, you would need to define a custom ghost and apply animations to its element. + +Reorder items in the list using the drag handle. While dragging a list item other list items will re-order with animation. + +```typescript +import { + Component, + ElementRef, + QueryList, + ViewChild, + ViewChildren +} from '@angular/core'; +import { IDragBaseEventArgs, IDragMoveEventArgs, IgxDragDirective, IgxDragHandleDirective, IgxDragLocation, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + + +@Component({ + selector: 'app-list-reorder-sample', + templateUrl: './list-reorder-sample.component.html', + styleUrls: ['./list-reorder-sample.component.scss'], + imports: [IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxDragDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxDragHandleDirective, IgxListActionDirective] +}) +export class ListReorderSampleComponent { + @ViewChildren('dragDirRef', { read: IgxDragDirective }) + public dragDirs: QueryList<IgxDragDirective>; + + @ViewChild('listContainer', { read: ElementRef }) + public listContainer: ElementRef; + + public employees = [ + { id: 0, name: 'Ivan Cornejo', title: 'Senior Product Owner' }, + { id: 1, name: 'Amish Shiravadakar', title: 'Business Tools Director' }, + { id: 2, name: 'Elsi Hansdottir', title: 'Financial Director' }, + { id: 3, name: 'Benito Noboa', title: 'Marketing Specialist' }, + { id: 4, name: 'Beth Murphy', title: 'Platform Lead for Web' } + ]; + + public newIndex = null; + public animationDuration = 0.3; + private listItemHeight = 55; + + public getDragDirectiveRef(id: number): IgxDragDirective { + return this.dragDirs.find((item) => item.data.id === id); + } + + public onDragStart(event: IDragBaseEventArgs, dragIndex: number) { + // Record the current index as basis for moving up/down. + this.newIndex = dragIndex; + // Sets specific class when dragging. + event.owner.data.dragged = true; + } + + public onDragEnd(event: IDragBaseEventArgs, itemIndex: number) { + if (this.newIndex !== null) { + // When we have moved the dragged element up/down, animate it to its new location. + const moveDown = this.newIndex > itemIndex; + // If the new position is below add the height moved down, otherwise subtract it. + const prefix = moveDown ? 1 : -1; + // The height that the new position differs from the current. We know that each item is 55px height. + const movedHeight = prefix * Math.abs(this.newIndex - itemIndex) * this.listItemHeight; + const originLocation = event.owner.originLocation; + event.owner.transitionTo( + new IgxDragLocation(originLocation.pageX, originLocation.pageY + movedHeight), + { duration: this.animationDuration } + ); + } else { + // Otherwise animate it to its original position, since it is unchanged. + event.owner.transitionToOrigin({ duration: this.animationDuration }); + } + } + + public onTransitioned(event: IDragBaseEventArgs, itemIndex: number) { + // We can have other items transitioned when they move to free up space where the dragged element would be. + if (event.owner.data.dragged && this.newIndex != null && this.newIndex !== itemIndex) { + // If the element finished transitioning is the one were dragging, + // We can update all elements their new position in the list. + this.shiftElements(itemIndex, this.newIndex); + event.owner.setLocation(event.owner.originLocation); + this.newIndex = null; + } + // Disables the specific class when dragging. + event.owner.data.dragged = false; + } + + public onDragMove(event: IDragMoveEventArgs, itemIndex: number) { + const containerPosY = this.listContainer.nativeElement.getBoundingClientRect().top; + // Relative position of the dragged element to the list container. + const relativePosY = event.nextPageY - containerPosY; + + let newIndex = Math.floor(relativePosY / this.listItemHeight); + newIndex = newIndex < 0 ? 0 : (newIndex >= this.employees.length ? this.employees.length - 1 : newIndex); + if (newIndex === this.newIndex) { + // If the current new index is unchanged do nothing. + return; + } + + const movingDown = newIndex > itemIndex; + if (movingDown && newIndex > this.newIndex || + (!movingDown && newIndex < this.newIndex && newIndex !== itemIndex)) { + // If we are moving the dragged element down and the new index is bigger than the current + // this means that the element we are stepping into is not shifted up and should be shifted. + // Same if we moving the dragged element up and the new index is smaller than the current. + const elementToMove = this.getDragDirectiveRef(this.employees[newIndex].id); + const currentLocation = elementToMove.location; + const prefix = movingDown ? -1 : 1; + elementToMove.transitionTo( + new IgxDragLocation(currentLocation.pageX, currentLocation.pageY + prefix * this.listItemHeight), + { duration: this.animationDuration } + ); + } else { + // Otherwise if are moving up but the new index is still bigger than the current, this means that + // the item we are stepping into is already shifted and should be returned to its original position. + // Same if we are moving down and the new index is still smaller than the current. + const elementToMove = this.getDragDirectiveRef(this.employees[this.newIndex].id); + elementToMove.transitionToOrigin({ duration: this.animationDuration }); + } + + this.newIndex = newIndex; + } + + private shiftElements(draggedIndex: number, targetIndex: number) { + // Move the dragged element in DOM to the new position. + const movedElem = this.employees.splice(draggedIndex, 1); + this.employees.splice(targetIndex, 0, movedElem[0]); + + this.dragDirs.forEach((dir) => { + if (this.employees[targetIndex].id !== dir.data.id) { + // Reset each element its location since it will be repositioned in the DOM except the element we drag. + dir.setLocation(dir.originLocation); + dir.data.shifted = false; + } + }); + } +} +``` +```html +<igx-list #listContainer> + @for (employee of employees; track employee; let targetIndex = $index) { + <igx-list-item + #dragDirRef="drag" + igxDrop + [igxDrag]="{ id: employee.id, dragged: false }" + (dragStart)="onDragStart($event, targetIndex)" + (dragMove)="onDragMove($event, targetIndex)" + (dragEnd)="onDragEnd($event, targetIndex)" + (transitioned)="onTransitioned($event, targetIndex)" + [ghost]="false" + [class.dragged]="dragDirRef.data && dragDirRef.data.dragged"> + <h4 igxListLineTitle>{{employee.name}}</h4> + <h6 igxListLineSubTitle>{{employee.title}}</h6> + <igx-icon igxDragHandle igxListAction>drag_indicator</igx-icon> + </igx-list-item> + } +</igx-list> +``` +```scss +@use '../../../../variables' as *; + +:host { + display: block; + margin: 16px; + + igx-list { + max-width: 336px; + overflow: visible; + } + + igx-list-item { + z-index: 0; + + &.dragged { + box-shadow: elevation(8); + z-index: 1; + } + } + + igx-icon { + cursor: move; + user-select: none; + } +} +``` + +<div class="divider--half"></div> + +### Ignoring draggable elements + +If the user wants to have interactable children of the main element which have igxDrag instanced, he can set the [`igxDragIgnore`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragignoredirective.html) directive in order to make them be ignored by the igxDrag and not perform any dragging action. This will leave these elements be fully interactable and receive all mouse events. + +```html +<div [igxDrag]="myData"> + <span>Drag me!</span> + <igx-icon igxDragIgnore fontSet="material" (click)="remove()">bin</igx-icon> +</div> +``` + +## Using the Angular Drop Directive + +When an element that is being dragged using the [`igxDrag`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html) directive needs to be placed in an area, the [`igxDrop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html) can be used to achieve this behavior. It provides events that you can use to determine if an element is entering the boundaries of the element it is applied to and if it is being released inside it. + +The [`igxDrop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html) directive can be applied to any DOM element just like the [`igxDrag`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html) directive. + +By default, the [`igxDrop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html) directive doesn't apply any logic for modifying the dragged element position in the DOM. That's why you need to specify a [`dropStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#dropStrategy) or apply custom logic. Drop strategies are discussed in the next section. + +### Drop Strategies + +The `igxDrop` comes with 4 drop strategies which are: `Default`, `Prepend`, `Insert` and `Append`: + +- `Default` - does not perform any action when an element is dropped onto an `igxDrop` element and is implemented as a class named [`IgxDefaultDropStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdefaultdropstrategy.html). + +- `Append` - always inserts the dropped element as a last child and is implemented as a class named [`IgxAppendDropStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxappenddropstrategy.html). + +- `Prepend` - always inserts the dropped element as first child and is implemented as a class named [`IgxPrependDropStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxprependdropstrategy.html). + +- `Insert` - inserts the dragged element at last position. If there is a child under the element when it was dropped though, the `igxDrag` instanced element will be inserted at that child's position and the other children will be shifted. It is implemented as a class named [`IgxInsertDropStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinsertdropstrategy.html). + +The way a strategy can be applied is by setting the `dropStrategy` input to one of the listed classes above. The value provided has to be a type and not an instance, since the `igxDrop` needs to create and manage the instance itself. + +```typescript +public appendStrategy = IgxAppendDropStrategy; +``` + +```html +<div igxDrop [dropStrategy]="appendStrategy"></div> +``` + +#### Canceling a drop strategy + +When using a specific drop strategy, its behavior can be canceled in the [`dropped`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#dropped) events by setting the `cancel` property to true. The `dropped` event is specific to the `igxDrop`. If you does not have drop strategy applied to the `igxDrop` canceling the event would have no side effects. + +_Example:_ + +```html +<div igxDrag></div> +<!-- ... --> +<div igxDrop (dropped)="onDropped($event)"></div> +``` + +```typescript +public onDropped(event) { + event.cancel = true; +} +``` + +If you would like to implement your own drop logic, we advise binding to the `dropped` event and execute your logic there or extend the `IgxDefaultDropStrategy` class. + +### Linking Drag to Drop Element + +Using the [`dragChannel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragChannel) and [`dropChannel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#dropChannel) input on respectively `igxDrag` and `igxDrop` directives, you can link different elements to interact only between each other. For example, if an `igxDrag` element needs to be constrained so it can be dropped on specific `igxDrop` element and not all available, this can easily be achieved by assigning them the same channel. + + +```html +<div igxDrag [dragChannel]="['Mammals', 'Land']"> Human </div> +<div igxDrag [dragChannel]="['Mammals', 'Water']"> Dolphin </div> +<div igxDrag [dragChannel]="['Insects', 'Air']"> Butterfly </div> +<div igxDrag [dragChannel]="['Insects', 'Land']"> Ant </div> + +<div igxDrop [dropChannel]="['Mammals']"> Mammals </div> +<div igxDrop [dropChannel]="['Insects']"> Insects </div> +<div igxDrop [dropChannel]="['Land']"> Land </div> +``` + +Drag e-mails on the right into the folders on the left. + + +```typescript +import { ChangeDetectorRef, Component, Input, Renderer2, inject } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; +import { IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; + +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-email-sample', + templateUrl: './email-sample.component.html', + styleUrls: ['./email-sample.component.scss'], + imports: [IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxDropDirective, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxDragDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, FormsModule] +}) + +export class EmailSampleComponent { + private cdr = inject(ChangeDetectorRef); + private renderer = inject(Renderer2); + + + @Input() + public ghostTemplate: any; + public hasChecked = false; + public draggedElements = 0; + + public folders: any[] = [ + { icon: 'inbox', text: 'Inbox', dropChannel: 'inbox'}, + { icon: 'star_rate', text: 'Starred', dropChannel: 'starred'}, + { icon: 'error', text: 'Important', dropChannel: 'important'}, + { icon: 'send', text: 'Sent', dropChannel: 'sent'}, + { icon: 'label', text: 'Personal', dropChannel: 'personal'}, + { icon: 'label', text: 'Work', dropChannel: 'work'}, + { icon: 'label', text: 'Finances', dropChannel: 'finances'} + ]; + + public emails: any[] = [ + { sender: 'Ivan Cornejo', title: 'We have exciting news', checked: false}, + { sender: 'Amish Shiravadakar', title: 'RE: Document Libraries status', checked: false}, + { sender: 'Elsi Hansdottir', title: 'SEO Keywords', checked: false}, + { sender: 'Benito Noboa', title: 'Last Chance: Win an Amazon Gift Card', checked: false} + ]; + + public toggleCheck(email: any, checkbox: any): void { + this.emails.forEach(x => x.checked = false); + email.checked = true; + checkbox.checked = true; + } + + public toggleCheckbox(email: any): void { + email.checked = !email.checked; + } + + public stopEventPropagation(event: any): void { + event.stopPropagation(); + } + + public dropElement(event: any): void { + this.emails = this.emails.filter(x => x.checked !== true); + event.dragData = {}; + event.cancel = true; + this.leaveDropZone(event); + } + + public enterDropZone(event: any): void { + this.renderer.addClass(event.owner.element.nativeElement, 'drag-enter'); + } + + public leaveDropZone(event: any): void { + this.renderer.removeClass(event.owner.element.nativeElement, 'drag-enter'); + } + + public onDragStart(event: any): void { + this.aggressiveToggle(event); + this.draggedElements = this.emails.filter(x => x.checked === true).length; + } + + public onGhostCreated(): void { + this.cdr.detectChanges(); + } + + private aggressiveToggle(event: any): void { + const checkbox = event.owner.element.nativeElement.parentElement.querySelector('igx-checkbox'); + event.owner.data.checked = true; + if (!this.nativeCheckboxChecked(checkbox)) { + checkbox.click(); + } + } + + private nativeCheckboxChecked(nativeElement: any): boolean { + return nativeElement.classList.contains('igx-checkbox--checked'); + } + +} +``` +```html +<ng-template #customGhost> + <div class="drag-ghost"> + <igx-icon>email</igx-icon> + <span>Move {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}}</span> + </div> +</ng-template> + +<igx-list class="folders"> + @for (folder of folders; track folder) { + <igx-list-item igxDrop + (enter)="enterDropZone($event)" + (leave)="leaveDropZone($event)" + (dropped)="dropElement($event)" + [dropChannel]="folder.dropChannel"> + <igx-icon igxListThumbnail>{{folder.icon}}</igx-icon> + <h4 igxListLineTitle>{{ folder.text }}</h4> + </igx-list-item> + } +</igx-list> + +<igx-list class="emails"> + <igx-list-item [isHeader]="true">Today</igx-list-item> + + @for (email of emails; track email) { + <igx-list-item + [class.email-checked]="email.checked" + [igxDrag]="email" + [dragChannel]="['starred', 'important', 'personal', 'work', 'finances']" + [ghostTemplate]="customGhost" + [ghostOffsetX]="-5" + [ghostOffsetY]="-5" + (dragStart)="onDragStart($event)" + (ghostCreate)="onGhostCreated()" + class="email-content flexlist" + (click)="toggleCheck(email, checkbox)"> + <h4 igxListLineTitle>{{ email.sender }}</h4> + <h6 igxListLineSubTitle>{{ email.title }}</h6> + <igx-checkbox #checkbox + [(ngModel)]="email.checked" + (change)="toggleCheckbox(email)" + (pointerdown)="stopEventPropagation($event)" + (click)="stopEventPropagation($event)"> + </igx-checkbox> + </igx-list-item> + } +</igx-list> +``` +```scss +@use '../../../../variables' as *; + +.drag-ghost { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + width: rem(180px); + color: contrast-color($color: 'secondary', $variant: 200); + background-color: color($color: 'secondary', $variant: 200); + font-size: rem(13px); + padding: rem(8px); + border-radius: rem(4px); + + igx-icon { + margin-right: rem(8px); + } +} + +:host { + display: flex; + user-select: none; + font-weight: 400; + font-style: normal; + height: 100%; + + .folders { + width: rem(200px); + padding: 8px; + background: color($color: 'gray', $variant: 50); + border: none; + + igx-icon { + margin: 0; + } + + igx-list-item { + cursor: pointer; + border-radius: 4px; + background: transparent; + transition: background .15s $ease-out-quad; + + &.drag-enter { + background: color($color: 'secondary', $variant: 100); + } + + &:hover { + background: color($color: 'gray', $variant: 100); + } + + &:nth-child(5) { + igx-icon { + color: #af1159; + } + } + + &:nth-child(6) { + igx-icon { + color: #0071bf; + } + } + + &:nth-child(7) { + igx-icon { + color: #4eb862; + } + } + } + } + + .emails { + flex-grow: 1; + border: none; + border-radius: 0; + } + + .email-checked { + color: contrast-color($color: 'secondary', $variant: 100); + background: color($color: 'secondary', $variant: 100); + transition: background .1s ease-out; + } +} +``` + +<div class="divider--half"></div> + +## Advanced Configuration + +Since both `igxDrag` and `igxDrop` combined can be used in many different and complex application scenarios, the following example demonstrates how they can be used in an Kanban board. + +The user could reorder the cards in each column. It is done by setting each card also a drop area, so we can detect when another card has entered its area and switch them around at runtime, to provide better user experience. + +It won't be Kanban board without also the ability to switch cards between columns. A card can be directly moved from one column to another column at a specific position. It is achieved here with a dummy object, so it would create a visual area where the card will be position if released. The dummy object is removed once the dragging of a card ends or exits another column. + +Drag items around the kanban board. + + +```typescript +/* eslint-disable no-shadow */ +/* eslint-disable @typescript-eslint/naming-convention */ +import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; +import { IDropBaseEventArgs, IDropDroppedEventArgs, IgxDragDirective, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; + + +enum state { + toDo = 'toDo', + inProgress = 'inProgress', + done = 'done' +} +interface IListItem { + id: string; + text: string; + state: state; + hide?: boolean; +} +@Component({ + selector: 'app-kanban-sample', + templateUrl: './kanban-sample.component.html', + styleUrls: ['./kanban-sample.component.scss'], + imports: [IgxDropDirective, IgxChipComponent, IgxCardComponent, IgxDragDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective] +}) +export class KanbanSampleComponent implements OnInit { + private renderer = inject(Renderer2); + private cdr = inject(ChangeDetectorRef); + + @ViewChild('toDo', { read: ElementRef }) public toDo: ElementRef; + @ViewChild('inProgress', { read: ElementRef }) public inProgress: ElementRef; + @ViewChild('done', { read: ElementRef }) public done: ElementRef; + public toDoList: IListItem[]; + public inProgressList: IListItem[]; + public doneList: IListItem[]; + private dragObj; + private dummyObj; + private lastDragEnterList: string; + private currentList: string; + + public ngOnInit(): void { + this.toDoList = [ + { id: 'STR-000132', text: 'Implement chat bubble', state: state.toDo }, + { id: 'STR-000097', text: 'Implement sticky header', state: state.toDo }, + { id: 'STR-000191', text: 'Change trial days to credit', state: state.toDo } + + ]; + this.inProgressList = [ + { id: 'STR-000124', text: 'Implement fback widget', state: state.inProgress }, + { id: 'STR-000121', text: 'Add analytics', state: state.inProgress } + ]; + this.doneList = [ + { id: 'STR-000129', text: 'Add SSL to account pages', state: state.done } + ]; + this.dragObj = null; + this.dummyObj = null; + this.lastDragEnterList = ''; + this.currentList = ''; + } + + public onStateContainerEnter(event: IDropBaseEventArgs) { + // If we have entered another list container, we have to remove the 'dummy' object from the previous one + if (this.currentList !== event.owner.element.nativeElement.id) { + this[this.currentList] = this[this.currentList].filter((item) => item.id !== 'dummy'); + this.cdr.detectChanges(); + this.currentList = event.owner.element.nativeElement.id; + this.dummyObj = null; + } + // Add the blue container hightlight when an item starts being dragged + this.renderer.addClass(event.owner.element.nativeElement, 'active'); + } + + public onStateContainerLeave(event: IDropBaseEventArgs) { + // This event also gets raised when the user drags a task over another task tile. + // That means we have to re-apply the 'active' class in the `onItemEnter` event handler + this.renderer.removeClass(event.owner.element.nativeElement, 'active'); + } + + public dragStartHandler(event) { + // We have to save the dragStartList so we could remove the dragged item from it later, when it gets dropped + this.currentList = event.owner.element.nativeElement.dataset.state + 'List'; + this.lastDragEnterList = this.currentList; + this.dragObj = this[this.currentList].filter((elem) => elem.id === event.owner.element.nativeElement.id)[0]; + } + + public dragEndHandler(event) { + this.toDoList = this.toDoList.filter((x) => x.id !== 'dummy'); + this.inProgressList = this.inProgressList.filter((x) => x.id !== 'dummy'); + this.doneList = this.doneList.filter((x) => x.id !== 'dummy'); + if (this.dragObj) { + this.dragObj.hide = false; + } + } + + public onItemEnter(event: IDropBaseEventArgs) { + // Applying the container highlighting again + const listContainer = event.owner.element.nativeElement.dataset.state; + this.renderer.addClass(this[listContainer].nativeElement, 'active'); + + const currentList = event.owner.element.nativeElement.dataset.state + 'List'; + const currentItemIndex = this[currentList].findIndex((item) => item.id === event.owner.element.nativeElement.id); + // Checking if items in the same list are being reordered + if (this.lastDragEnterList === currentList) { + const draggedItemIndex = this[currentList].findIndex((item) => item.id === this.dragObj.id); + this.swapTiles(draggedItemIndex, currentItemIndex, currentList); + } else { + // We need a hidden dummy object that would make an empty space for the dragged element in the list + if (!this.dummyObj) { + this.dummyObj = {id: 'dummy', text: '', state: event.owner.element.nativeElement.dataset.state}; + const newCurrentList = [ + ...this[currentList].slice(0, currentItemIndex), + this.dummyObj, + ...this[currentList].slice(currentItemIndex) + ]; + this[currentList] = newCurrentList; + this.cdr.detectChanges(); + } else { + const dummyObjIndex = this[currentList].findIndex((item) => item.id === 'dummy'); + if (dummyObjIndex !== -1) { + this.swapTiles(dummyObjIndex, currentItemIndex, currentList); + } + } + } + } + + public onItemLeave(event: IDropBaseEventArgs) { + const listContainer = event.owner.element.nativeElement.dataset.state; + this.renderer.removeClass(this[listContainer].nativeElement, 'active'); + } + + public onItemDropped(event: IDropDroppedEventArgs) { + const dropListState = event.owner.element.nativeElement.id; + const dragListState = event.drag.element.nativeElement.dataset.state + 'List'; + const dummyItemIndex = this[dropListState].findIndex((item) => item.id === 'dummy'); + if (dropListState !== dragListState) { + // The state of the dragged object should be updated before inserting it in the dropped list + this.dragObj.state = dropListState.substring(0, dropListState.length - 4); + this[dragListState] = this[dragListState].filter((item) => item.id !== this.dragObj.id); + // Check if there is a dummy item and replace it with the dragged one + if (dummyItemIndex !== -1) { + this[dropListState].splice(dummyItemIndex, 1, this.dragObj); + } else { + this[dropListState].push(this.dragObj); + } + } + this.dragObj.hide = false; + this.dragObj = null; + // The default browser drag behavior should be cancelled + event.cancel = true; + } + + private swapTiles(currentIndex: number, targetIndex: number, itemList: string): void { + const tempObj = this[itemList][currentIndex]; + this[itemList].splice(currentIndex, 1); + this[itemList].splice(targetIndex, 0, tempObj); + this.cdr.detectChanges(); + } +} +``` +```html +<article + #toDo + igxDrop + id="toDoList" + [attr.data-state]="'ToDo'" + (enter)="onStateContainerEnter($event)" + (leave)="onStateContainerLeave($event)" + (dropped)="onItemDropped($event)"> + + <header> + <h4 class="state-title">To Do</h4> + <igx-chip> + <span class="state-number"> + {{toDoList.length}} + </span> + </igx-chip> + </header> + + <section> + @for (item of toDoList; track item) { + <igx-card + igxDrag + igxDrop + (dragStart)="dragStartHandler($event)" + (dragEnd)="dragEndHandler($event)" + (enter)="onItemEnter($event)" + (leave)="onItemLeave($event)" + [class.invisible]="item.id === 'dummy'" + id="{{item.id}}" + [attr.data-state]="item.state" + (ghostCreate)="item.hide = true" + [style.visibility]='item.hide ? "hidden" : "visible"' + [dragTolerance]="0" + [ghostClass]="'drag-ghost'" elevated> + <igx-card-header> + <p igxCardHeaderTitle>{{ item.text }}</p> + </igx-card-header> + <igx-card-content> + <p>{{ item.id }}</p> + </igx-card-content> + </igx-card> + } + </section> +</article> + +<article + #inProgress + igxDrop + id="inProgressList" + [attr.data-state]="'InProgress'" + (enter)="onStateContainerEnter($event)" + (leave)="onStateContainerLeave($event)" + (dropped)="onItemDropped($event)"> + + <header> + <h4 class="state-title">In Progress</h4> + <igx-chip> + <span class="state-number"> + {{inProgressList.length}} + </span> + </igx-chip> + </header> + + <section> + @for (item of inProgressList; track item) { + <igx-card + igxDrag + igxDrop + (dragStart)="dragStartHandler($event)" + (dragEnd)="dragEndHandler($event)" + (enter)="onItemEnter($event)" + (leave)="onItemLeave($event)" + [class.invisible]="item.id === 'dummy'" + id="{{item.id}}" + [attr.data-state]="item.state" + (ghostCreate)="item.hide = true" + [style.visibility]='item.hide ? "hidden" : "visible"' + [dragTolerance]="0" + [ghostClass]="'drag-ghost'" elevated> + <igx-card-header> + <p igxCardHeaderTitle>{{ item.text }}</p> + </igx-card-header> + <igx-card-content> + <p>{{ item.id }}</p> + </igx-card-content> + </igx-card> + } + </section> +</article> + +<article + #done + igxDrop + id="doneList" + [attr.data-state]="'Done'" + (enter)="onStateContainerEnter($event)" + (leave)="onStateContainerLeave($event)" + (dropped)="onItemDropped($event)"> + + <header> + <h4 class="state-title">Done</h4> + <igx-chip> + <span class="state-number"> + {{doneList.length}} + </span> + </igx-chip> + </header> + + <section> + @for (item of doneList; track item) { + <igx-card + igxDrag + igxDrop + (dragStart)="dragStartHandler($event)" + (dragEnd)="dragEndHandler($event)" + (enter)="onItemEnter($event)" + (leave)="onItemLeave($event)" + [class.invisible]="item.id === 'dummy'" + id="{{item.id}}" + [attr.data-state]="item.state" + (ghostCreate)="item.hide = true" + [style.visibility]='item.hide ? "hidden" : "visible"' + [dragTolerance]="0" + [ghostClass]="'drag-ghost'" elevated> + <igx-card-header> + <p igxCardHeaderTitle>{{ item.text }}</p> + </igx-card-header> + <igx-card-content> + <p>{{ item.id }}</p> + </igx-card-content> + </igx-card> + } + </section> +</article> +``` +```scss +@use '../../../../variables' as *; + +igx-card { + width: rem(288px); + height: rem(128px); + margin-bottom: rem(16px); + cursor: move; + + &.drag-ghost { + transform: scale(1.05); + box-shadow: elevation(24); + color: color($color: 'secondary', $variant: 300); + } + + &.invisible { + visibility: hidden !important; + } + + [igxCardHeaderTitle] { + font-size: rem(16px); + } + + &:last-child { + margin-bottom: unset; + } +} + +:host { + display: flex; + height: 100%; + min-height: rem(656px); + user-select: none; + padding: rem(16px); + overflow: auto; + + article { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + flex: 1 0 33%; + max-width: rem(320px); + min-width: rem(320px); + padding: 0 rem(16px); + background-color: color($color: 'gray', $variant: 100); + border-radius: rem(8px); + border: 1px solid color($color: 'gray', $variant: 200); + margin: 0 rem(12px); + overflow: auto; + + header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: rem(8px) 0; + align-self: flex-start; + + .state-title { + @include type-style('subtitle-1') { + font-weight: 600; + margin: 0; + }; + } + + .state-number { + font-size: rem(12px); + font-weight: bold; + padding: 4px; + } + } + + &.active { + background-color: color($color: 'primary', $variant: 100); + } + } +} +``` + +<div class="divider--half"></div> + +## API + +- [IgxDragDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html) +- [IgxDropDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html) +- [IgxDefaultDropStrategy](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdefaultdropstrategy.html) +- [IgxAppendDropStrategy](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxappenddropstrategy.html) +- [IgxPrependDropStrategy](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxprependdropstrategy.html) +- [IgxInsertDropStrategy](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinsertdropstrategy.html) + +## References + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md new file mode 100644 index 000000000..38b9a8c46 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-hierarchical-selection.md @@ -0,0 +1,278 @@ +--- +title: Multi-select Hierarchical Drop Down- Ignite UI for Angular - MIT license +_description: Learn how to create a multi-select tree-style hierarchical drop-down with Ignite UI. +_keywords: Multi-select drop-down, hierarchical selection, ignite ui for angular, infragistics +_license: MIT +_tocName: Multi-select Hierarchical Drop Down +--- + +# Multi-select Hierarchical Drop Down + +The following samples demonstrate how to create a multi-select hierarchical drop-down that allows the user to select single or multiple options from a tree-style hierarchical drop-down list. + +## Topic Overview + +For the drop-down list we will use the [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) as well as the [IgxToggleActionDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtoggleactiondirective.html) to open/close the drop-down. + +To visualize the hierarchical data in the drop-down, you can use either the [IgxTreeComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreecomponent.html) or the [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html). + +The [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) is used to display the selected items. + +## Selection + +To display selected nodes/rows from the list use the [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) by handling the events that notify of selection changes and populate the `selectedNodes` / `selectedRows` array. This can be done by subscribing to the IgxTreeComponent's [`nodeSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreecomponent.html#nodeSelection) event and to the IgxTreeGridComponent's [`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowSelectionChanging) event. + +To remove the chip from the DOM and deselect the item from the tree/grid, you have to handle the IgxChipComponent's [`remove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html#remove) event. + +Additionally, a way to prevent the drop-down from closing on chip deletion would be to check the event's composite path for an `igx-chip` node and then cancel the event in the `IgxDropDownComponent`'s [`closing`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#closing) event handler. + +### Demo + +```typescript +import { AfterViewInit, Component, DoCheck, OnInit, ViewChild, ElementRef, PLATFORM_ID, inject } from '@angular/core'; +import { IBaseChipEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { IgxDropDownComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { ITreeNodeSelectionEvent, IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree'; +import { ConnectedPositioningStrategy, OverlaySettings } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { COUNTRIES } from './countries'; +import { isPlatformBrowser } from '@angular/common'; + + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-tree-hierarchical-selection', + styleUrls: ['./dropdown-tree-hierarchical-selection.component.scss'], + templateUrl: './dropdown-tree-hierarchical-selection.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxDropDownComponent, IgxTreeComponent, IgxTreeNodeComponent] +}) +export class DropdownTreeHierarchicalSelectionComponent implements OnInit, DoCheck, AfterViewInit { + private platformId = inject(PLATFORM_ID); + + @ViewChild(IgxTreeComponent, { static: true }) public igxTree: IgxTreeComponent; + @ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent; + @ViewChild('button', { static: true }) public igxButton: ElementRef; + + public countries!: any[]; + public selectedNodes!: any[]; + + public ngOnInit(): void { + this.countries = COUNTRIES; + } + + public ngAfterViewInit(): void { + if (isPlatformBrowser(this.platformId)) { + requestAnimationFrame(() => { + this._overlaySettings.target = this.igxButton.nativeElement; + this.igxDropDown.open(this._overlaySettings); + }); + } + } + + public ngDoCheck(){ + this.selectedNodes = this.igxTree.nodes?.filter(node => node.selected == true); + } + + public onNodeSelection(args: ITreeNodeSelectionEvent) { + this.selectedNodes = args.newSelection; + } + + public chipRemoved(event: IBaseChipEventArgs) { + this.selectedNodes = this.selectedNodes.filter((node) => { + if (node.data.ID === event.owner.id){ + this.igxTree.deselectAll([node]); + } + return node.data.ID !== event.owner.id; + }); + } + + public _overlaySettings: OverlaySettings = { + modal: false, + positionStrategy: new ConnectedPositioningStrategy(), + closeOnOutsideClick: false + }; + + +} +``` +```html +<button class="button" #button igxButton="contained" [igxToggleAction]="countriesDropDown" + [igxDropDownItemNavigation]="countriesDropDown"> + Countries<igx-icon fontSet="material">expand_more</igx-icon> +</button> +<div class="chip-container"> + <igx-chips-area> + @for (node of selectedNodes; track node) { + <igx-chip [id]="node.data.ID" [removable]="true" (remove)="chipRemoved($event)">{{node.data.Name}}</igx-chip> + } + </igx-chips-area> +</div> + +<igx-drop-down #countriesDropDown [height]="'400px'" [width]="'250px'"> + <igx-tree #igxTree selection="BiState" (nodeSelection)="onNodeSelection($event)"> + @for (country of countries; track country) { + <igx-tree-node [data]="country" [expanded]="true" [selected]="true"> + {{ country.Name }} + @for (city of country.Cities; track city) { + <igx-tree-node [data]="city"> + {{ city.Name }} + </igx-tree-node> + } + </igx-tree-node> + } + </igx-tree> +</igx-drop-down> +``` +```scss +.chip-container{ + width : 500px; + overflow: auto; + border: 1px solid #ccc; + background-color: #FFFBFA; + display: inline-flex; + margin-left:10px; +} +igx-chip { + margin-right: 5px; + margin-bottom: 5px; +} + +.button { + width: 250px; + border: #ccc; +} +``` + +```typescript +import { AfterViewInit, Component, ElementRef, OnInit, PLATFORM_ID, ViewChild, inject } from '@angular/core'; +import { IBaseChipEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { IgxDropDownComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { ConnectedPositioningStrategy, OverlaySettings } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IRowSelectionEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { EMPLOYEE_DATA } from './nested-employee-data'; +import { isPlatformBrowser } from '@angular/common'; + + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-tree-grid-hierarchical-selection', + styleUrls: ['./dropdown-tree-grid-hierarchical-selection.component.scss'], + templateUrl: './dropdown-tree-grid-hierarchical-selection.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxDropDownComponent, IgxTreeGridComponent, IgxColumnComponent] +}) +export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit, AfterViewInit { + private platformId = inject(PLATFORM_ID); + + @ViewChild('treeGrid', { static: true }) + public igxTreeGrid: IgxTreeGridComponent; + @ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent; + @ViewChild('button', { static: true }) public igxButton: ElementRef; + + public employees!: any[]; + public selectedRows!: any[]; + + public ngOnInit(): void { + this.employees = EMPLOYEE_DATA; + + this.igxTreeGrid.selectRows([1,4], true); + this.selectedRows = []; + this.igxTreeGrid.selectedRows.forEach((row) => this.selectedRows.push(this.employees.find(employee => employee.ID == row))); + } + public ngAfterViewInit(): void { + if (isPlatformBrowser(this.platformId)) { + requestAnimationFrame(() => { + this._overlaySettings.target = this.igxButton.nativeElement; + this.igxDropDown.open(this._overlaySettings); + }); + } + } + public onRowSelectionChanging(args: IRowSelectionEventArgs, grid: IgxTreeGridComponent) { + this.selectedRows = []; + args.newSelection.forEach((val) => this.selectedRows.push(grid.getRowData(val.ID))); + } + + public chipRemoved(event: IBaseChipEventArgs) { + this.selectedRows = this.selectedRows.filter((row) => { + if (row.ID === event.owner.id){ + this.igxTreeGrid.deselectRows([row.ID]); + } + return row.ID !== event.owner.id; + }); + } + + public _overlaySettings: OverlaySettings = { + modal: false, + positionStrategy: new ConnectedPositioningStrategy(), + closeOnOutsideClick: false + }; +} +``` +```html +<button #button igxButton="contained" [igxToggleAction]="employeesDropDown" [igxDropDownItemNavigation]="employeesDropDown"> + Employees<igx-icon fontSet="material">expand_more</igx-icon> +</button> +<div class="chip-container"> + <igx-chips-area> + @for (row of selectedRows; track row) { + <igx-chip [id]="row.ID" [removable]="true" (remove)="chipRemoved($event)">{{row.Name}}</igx-chip> + } + </igx-chips-area> +</div> + +<igx-drop-down #employeesDropDown [width]="'300px'"> + <igx-tree-grid #treeGrid igxPreventDocumentScroll [data]="employees" childDataKey="Employees" primaryKey="ID" + width="100%" height="400px" [autoGenerate]="false" [expansionDepth]="1" [rowSelection]="'multiple'" + (rowSelectionChanging)="onRowSelectionChanging($event, treeGrid)"> + <igx-column field="Name" dataType="string"></igx-column> + </igx-tree-grid> +</igx-drop-down> +``` +```scss +.chip-container{ + width : 500px; + overflow: auto; + border: 1px solid #ccc; + background-color: #FFFBFA; + display: inline-flex; + margin-left:10px; +} +igx-chip { + margin-right: 5px; + margin-bottom: 5px; +} +button { + width: 300px; + border: #ccc; +} +``` + +>[!NOTE] +>To display the Dropdown component opened initially, it is recommended to set the open method as a callback of the requestAnimationFrame method. This will ensure that the DOM tree is repainted and all elements are correctly positioned. + +## API References + +- [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) +- [IgxChipComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) +- [IgxChipsAreaComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipsareacomponent.html) +- [IgxTreeComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreecomponent.html) +- [IgxTreeNodeComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreenodecomponent.html) +- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) + +## Additional Resources + +<div class="divider--half"></div> + +- [Drop Down overview](drop-down.md) +- [Chip overview](chip.md) +- [Tree overview](tree.md) +- [Tree Grid overview](treegrid/tree-grid.md) + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md new file mode 100644 index 000000000..e1bddaf46 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down-virtual.md @@ -0,0 +1,479 @@ +--- +title: Angular Drop Down Component – Ignite UI for Angular | Infragistics | MIT license +_description: Use Ignite UI for Angular Virtualized Drop Down to display a very large list of items which supports a single item selection. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Drop Down components, Angular Drop Down controls, Angular Control Large Item List, Angular Control Singe Selection +_license: MIT +_tocName: Virtual Drop Down +--- + +# Virtual Drop Down + +The Ignite UI for Angular Drop Down component can fully integrate with the [`IgxForOf`](for-of.md) directive in order to display a very large list of items for its selection. + +## Angular Virtual Drop Down Example + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxForOfDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; + +// tslint:disable:object-literal-sort-keys +// tslint:disable-next-line:interface-name +interface DataItem { + id: string; + name: string; + header: boolean; + disabled: boolean; +} + +@Component({ + selector: 'app-drop-down-virtual', + templateUrl: './drop-down-virtual.component.html', + styleUrls: ['./drop-down-virtual.component.scss'], + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxForOfDirective, IgxDropDownItemComponent] +}) +export class DropDownVirtualComponent { + public items: DataItem[]; + public itemHeight = 48; + public itemsMaxHeight = 240; + + constructor() { + const itemsCollection: DataItem[] = []; + for (let i = 0; i < 50; i++) { + const series = (i * 10).toString(); + itemsCollection.push({ + id: series, + name: `${series} Series`, + header: true, + disabled: false + }); + for (let j = 0; j < 10; j++) { + itemsCollection.push({ + id: `${series}_${j}`, + name: `Series ${series}, ${i * 10 + j} Model`, + header: false, + disabled: j % 9 === 0 + }); + } + } + this.items = itemsCollection; + } +} +``` +```html +<button class="button" igxButton="contained" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Item Series</button> +<igx-drop-down #dropdown> + <div class="drop-down-virtual-wrapper"> + <igx-drop-down-item + *igxFor="let item of items; index as index; scrollOrientation: 'vertical'; containerSize: itemsMaxHeight; itemSize: itemHeight;" + [value]="item" [isHeader]="item.header" role="option" [disabled]="item.disabled" + [index]="index"> + {{ item.name }} + </igx-drop-down-item> + </div> +</igx-drop-down> +<div class="selection">Selected Model: <span>{{ dropdown.selectedItem?.value.name }}</span></div> +``` +```scss +.drop-down-virtual-wrapper { + overflow: hidden; + max-height: 240px; + width: 180px; +} + +:host { + display: flex; + flex-flow: row; + margin: 8px; +} + +.button { + width: 180px; +} + +.selection { + line-height: 2.25rem; + padding: 0px 8px; +} + + +.igx-drop-down__item { + padding: 0 0.8rem; +} +``` + +<div class="divider--half"></div> + +## Usage + +### First Steps + +In order to configure the drop-down to display a list of virtual items, you need to fulfill some prerequisites. +First, we need to import the `IgxForOfModule` in the module of the component that will declare our drop-down. + +```typescript +// app.module.ts +import { IgxForOfModule } from 'igniteui-angular/directives'; +// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxForOfModule + ] +}) +export class AppModule {} +``` + +### Template Configuration + +Next, we need to create the drop-down component's template, looping through the data using [`*igxFor`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) instead of `*ngFor`. The `*igxFor` directive needs some additional configuration in order to properly display all of the items: + +```html +<!-- drop-down-virtual.component.html --> +<button igxButton [igxToggleAction]="dropdown" + [igxDropDownItemNavigation]="dropdown"> + Item Series +</button> +<igx-drop-down #dropdown> + <div class="drop-down-virtual-wrapper" style="height: {{ itemsMaxHeight }}px;"> + <igx-drop-down-item + *igxFor="let item of items; index as index; + scrollOrientation: 'vertical'; + containerSize: itemsMaxHeight; + itemSize: itemHeight;" + [value]="item" [isHeader]="item.header" + role="option" [disabled]="item.disabled" + [index]="index"> + {{ item.name }} + </igx-drop-down-item> + </div> +</igx-drop-down> +<div>Selected Model: <span>{{ dropdown.selectedItem?.value.name }}</span></div> +``` + +The additional parameters passed to the `*igxFor` directive are: + +- `index` - captures the index of the current item in the data set +- `scrollOrientation` - should always be `'vertical'` +- `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `<div>` as well +- `itemSize` - the size of the items that will be displayed (in `px`) + +In order to assure uniqueness of the items, pass `item` inside of the [`value`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#value) input and `index` inside of the [`index`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#index) input of the `igx-drop-down-item`. +To preserve selection while scrolling, the drop-down item needs to have a reference to the data items it is bound to. + +> [!NOTE] +> For the drop-down to work with a virtualized list of items, [`value`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#value) and [`index`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#index) inputs **must** be passed to all items. +> [!NOTE] +> It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). +> [!NOTE] +> When the drop-down uses virtualized items, the type of [`dropdown.selectedItem`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#selecteditem) becomes `{ value: any, index: number }`, where `value` is a reference to the data item passed inside of the `[value]` input and `index` is the item's index in the data set + + +### Component Definition + +Inside of the component's constructor, we'll declare a moderately large list of items (containing both headers and disabled items), which will be displayed in the drop-down. We will also need to declare `itemHeight` and `itemsMaxHeight`: + +```typescript +// drop-drop-virtual.component.ts +export class DropDownVirtualComponent { + public items: DataItem[]; + public itemHeight = 48; + public itemsMaxHeight = 320; + + constructor() { + const itemsCollection: DataItem[] = []; + for (let i = 0; i < 50; i++) { + const series = (i * 10).toString(); + itemsCollection.push({ + id: series, + name: `${series} Series`, + header: true, + disabled: false + }); + for (let j = 0; j < 10; j++) { + itemsCollection.push({ + id: `${series}_${j}`, + name: `Series ${series}, ${i * 10 + j} Model`, + header: false, + disabled: j % 9 === 0 + }); + } + } + this.items = itemsCollection; + } +} +``` + +### Styles + +The last part of the configuration is to set `overflow: hidden` to the wrapping div in order to prevent the appearance of two scroll bars (one from the `igxFor` and one from the container itself): + +```scss +// drop-drop-virtual.component.scss +.drop-down-virtual-wrapper { + overflow: hidden; +} +``` + +## Remote Data + +The `igx-drop-down` supports loading chunks of remote data using the `*igxFor` structural directive. The configuration is similar to the one with local items, the main difference being how data chunks are loaded. + +### Template + +The drop-down template does not need to change much compared to the previous example - we still need to specify a wrapping div, style it accordingly and write out the complete configuration for the `*igxFor`. Since we'll be getting our data from a remote source, we need to specify that our data will be an observable and pass it through Angular's `async` pipe: + +```html +<igx-drop-down #remoteDropDown> + <div class="drop-down-virtual-wrapper"> + <igx-drop-down-item + *igxFor="let item of rData | async; index as index; + scrollOrientation: 'vertical'; + containerSize: itemsMaxHeight; + itemSize: itemHeight;" + [value]="item.ProductName" role="option" + [disabled]="item.disabled" [index]="index"> + {{ item.ProductName }} + </igx-drop-down-item> + </div> +</igx-drop-down> +``` + +### Handling chunk load + +As you can see, the template is almost identical to the one in the previous example. In this remote data scenario, the code behind will do most of the heavy lifting. + +First, we need to define a remote service for fetching data: + +```typescript +// remote.service.ts +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { IForOfState } from 'igniteui-angular/directives'; +// import { IForOfState } from '@infragistics/igniteui-angular'; for licensed package +import { BehaviorSubject, Observable } from 'rxjs'; + +@Injectable() +export class RemoteService { + public remoteData: Observable<any[]>; + private _remoteData: BehaviorSubject<any[]>; + + constructor(private http: HttpClient) { + this._remoteData = new BehaviorSubject([]); + this.remoteData = this._remoteData.asObservable(); + } + + public getData(data?: IForOfState, cb?: (any) => void): any { + // Assuming that the API service is RESTful and can take the following: + // skip: start index of the data that we fecth + // count: number of records we fetch + this.http.get(`https://dummy.db/dummyEndpoint?skip=${data.startIndex}&count=${data.chunkSize}`).subscribe((data) => { + // emit the values through the _remoteData subject + this._remoteData.next(data); + }) +} +``` + +The service exposes an `Observable` under `remoteData`. We will inject our service and bind to that property in our remote drop-down component: + +```typescript +// remote-drop-down.component.ts +@Component({ + providers: [RemoteService], + selector: 'app-drop-down-remote', + templateUrl: './drop-down-remote.component.html', + styleUrls: ['./drop-down-remote.component.scss'] +}) +export class DropDownRemoteComponent implements OnInit, OnDestroy { + @ViewChild(IgxForOfDirective, { read: IgxForOfDirective }) + public remoteForDir: IgxForOfDirective<any>; + @ViewChild('remoteDropDown', { read: IgxDropDownComponent }) + public remoteDropDown: IgxDropDownComponent; + public itemHeight = 48; + public itemsMaxHeight = 480; + public prevRequest: Subscription; + public rData: any; + + private destroy$ = new Subject(); + constructor(private remoteService: RemoteService) { } + + public ngAfterViewInit() { + const initialState = { startIndex: 0, chunkSize: Math.ceil(this.itemsMaxHeight / this.itemHeight) } + this.remoteService.getData(initialState, (data) => { + this.remoteForDir.totalItemCount = data['@odata.count']; + }); + // Subscribe to igxForOf.chunkPreload and load new data from service + this.remoteForDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((data) => { + this.dataLoading(data); + }); + } + + public dataLoading(evt) { + if (this.prevRequest) { + this.prevRequest.unsubscribe(); + } + this.prevRequest = this.remoteService.getData( + evt, + (data) => { + this.remoteForDir.totalItemCount = data['@odata.count']; + }); + } + + public ngOnInit() { + this.rData = this.remoteService.remoteData; + } + + public ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} +``` + +Inside of the `ngAfterViewInit` hook, we call to get data for the initial state and subscribe to the `igxForOf` directive's [`chunkPreload`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#chunkPreload) emitter. This subscription will be responsible for fetching data every time the loaded chunk changes. We use `pipe(takeUntil(this.destroy$))` so we can easily unsubscribe from the emitter on component destroy. + +### Remote Virtualization - Demo + +The result of the above configuration is a drop-down that dynamically loads the data it should display, depending on the scrollbar's state: + + +```typescript +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core'; +// tslint:disable-next-line:max-line-length +import { IForOfState, IgxButtonDirective, IgxForOfDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { Subject, Subscription } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { RemoteNWindService } from '../../../services/remoteNwind.service'; +import { AsyncPipe } from '@angular/common'; + +// tslint:disable:object-literal-sort-keys +@Component({ + providers: [RemoteNWindService], + selector: 'app-drop-down-remote', + templateUrl: './drop-down-remote.component.html', + styleUrls: ['./drop-down-remote.component.scss'], + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxForOfDirective, IgxDropDownItemComponent, IgxToastComponent, AsyncPipe] +}) +export class DropDownRemoteComponent implements OnInit, OnDestroy, AfterViewInit { + private remoteService = inject(RemoteNWindService); + cdr = inject(ChangeDetectorRef); + + @ViewChild('loadingToast', { read: IgxToastComponent, static: true }) + public loadingToast: IgxToastComponent; + @ViewChild(IgxForOfDirective, { read: IgxForOfDirective, static: true }) + public remoteForDir: IgxForOfDirective<any>; + @ViewChild('remoteDropDown', { read: IgxDropDownComponent, static: true }) + public remoteDropDown: IgxDropDownComponent; + public itemHeight = 48; + public itemsMaxHeight = 320; + public prevRequest: Subscription; + public rData: any; + private destroy$ = new Subject<void>(); + + public ngAfterViewInit() { + const initialState: IForOfState = { + startIndex: 0, chunkSize: Math.floor(this.itemsMaxHeight / this.itemHeight) + 1 + }; + this.remoteService.getData(initialState, null, (data) => { + this.remoteForDir.totalItemCount = data['@odata.count']; + }); + this.remoteForDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((data) => { + this.dataLoading(data); + }); + } + + public dataLoading(evt) { + if (this.prevRequest) { + this.prevRequest.unsubscribe(); + } + this.loadingToast.positionSettings.verticalDirection = VerticalAlignment.Middle; + this.loadingToast.autoHide = false; + this.loadingToast.open('Loading Remote Data...'); + this.cdr.detectChanges(); + this.prevRequest = this.remoteService.getData( + evt, + null, + (data) => { + this.remoteForDir.totalItemCount = data['@odata.count']; + this.loadingToast.close(); + this.cdr.detectChanges(); + }); + } + + public ngOnInit() { + this.rData = this.remoteService.remoteData; + } + + public ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} +``` +```html +<button class="button" igxButton="contained" [igxToggleAction]="remoteDropDown" [igxDropDownItemNavigation]="remoteDropDown">Products</button> +<igx-drop-down #remoteDropDown> + <div class="drop-down-virtual-wrapper"> + <igx-drop-down-item + *igxFor="let item of rData | async; index as index; scrollOrientation: 'vertical'; containerSize: itemsMaxHeight; itemSize: itemHeight;" + [value]="item.ProductName" role="option" [disabled]="item.disabled" [index]="index" + (onChunkPreload)="dataLoading($event)"> + {{ item.ProductName }} + </igx-drop-down-item> + </div> +</igx-drop-down> +<div class="selection">Selected Product: + <span>{{ remoteDropDown.selectedItem?.value }}</span> +</div> +<igx-toast #loadingToast></igx-toast> +``` +```scss +.drop-down-virtual-wrapper { + overflow-y: hidden; + width: 260px; + height: 320px; +} + +:host { + display: flex; + flex-flow: row; + margin: 8px; +} + +.button { + width: 260px; +} + +.selection { + line-height: 2.25rem; + padding: 0px 8px; +} + +.igx-drop-down__item { + padding: 0 0.8rem; +} +``` + +<div class="divider--half"></div> + +## Notes and Limitations + +Using the drop-down with a virtualized list of items enforces some limitations. Please, be aware of the following when trying to set up a drop-down list using `*igxFor`: + +- The drop-down items that are being looped need to be passed in a wrapping element (e.g. `<div>`) which has the following css: `overflow: hidden` and `height` equal to `containerSize` in `px` +- `<igx-drop-down-item-group>` cannot be used for grouping items when the list is virtualized. Use the `isHeader` property instead +- The `items` accessor will return only the list of non-header drop-down items that are currently in the virtualized view. +- [`dropdown.selectedItem`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#selectedItem) is of type `{ value: any, index: number }` +- The object emitted by [`selection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#selection) changes to `const emittedEvent: { newSelection: { value: any, index: number }, oldSelection: { value: any, index: number }, cancel: boolean, }` +- `dropdown.setSelectedItem` should be called with the **item's index in the data set** +- setting the drop-down item's `[selected]` input will **not** mark the item in the drop-down selection + +## API References + +- [IgxForOfDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) +- [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md new file mode 100644 index 000000000..5f2fea8e9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/drop-down.md @@ -0,0 +1,1338 @@ +--- +title: Angular Drop Down Component – Ignite UI For Angular - MIT license +_description: Add interactivity and see styling options to a scrollable list of items in your app. Get started using the Drop Down Component in Ignite UI for Angular now. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Angular Drop Down component, Angular Drop Down control +_license: MIT +_tocName: Drop Down +--- + +# Angular Drop Down Component Overview + +<p class="highlight">The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization. </p> + +## Angular Drop Down Example + +This Angular drop down example demonstrates the basic functionalities of a drop down list. Click on it to expand the preset options, select an item, and then close the drop down. + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-sample-1', + styleUrls: ['./dropdown-sample-1.component.scss'], + templateUrl: './dropdown-sample-1.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] +}) +export class DropDownSample1Component { + public items: { field: string }[] = [ + { field: 'Option 1' }, + { field: 'Option 2' }, + { field: 'Option 3' } + ]; +} +``` +```html +<button class="button" igxButton="contained" [igxToggleAction]="dropdown" +[igxDropDownItemNavigation]="dropdown">Options</button> +<igx-drop-down #dropdown> + @for (item of items; track item) { + <igx-drop-down-item> + {{ item.field }} + </igx-drop-down-item> + } +</igx-drop-down> +``` +```scss +.button { + margin: 8px; + width: 128px; +} +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Drop Down + +To get started with the Ignite UI for Angular Drop Down component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxDropDownModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +... +import { IgxDropDownModule } from 'igniteui-angular/drop-down'; +// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxDropDownModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxDropDownComponent` as a standalone dependency, or use the [`IGX_DROP_DOWN_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { NgFor } from '@angular/common'; +import { IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down'; +import { IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +// import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <button + igxButton="contained" + [igxToggleAction]="dropdown" + [igxDropDownItemNavigation]="dropdown" + > + Options + </button> + <igx-drop-down #dropdown> + <igx-drop-down-item *ngFor="let item of items"> + {{ item.field }} + </igx-drop-down-item> + </igx-drop-down> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [ IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective, NgFor ], + /* or imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxToggleActionDirective, IgxButtonDirective, NgFor] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Drop Down module or directives imported, you can start using the `igx-drop-down` component. + +## Using the Angular Drop Down + +### Add Drop Down + +Let's create a simple drop-down that provides several option items to choose from. To achieve this, we will use the [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) as well as the [IgxToggleAction](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtoggleactiondirective.html) to open/close the drop-down. + +```html +<!-- dropdown.component.html --> +<button igxButton="contained" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown"> + Options +</button> +<igx-drop-down #dropdown> + <igx-drop-down-item *ngFor="let item of items"> + {{ item.field }} + </igx-drop-down-item> +</igx-drop-down> +``` + +```typescript +// dropdown.component.ts +@Component({...}) +export class MyDropDownComponent { + public items: Array<{ field: string }> = [ + { field: 'Option 1' }, + { field: 'Option 2' }, + { field: 'Option 3' } + ]; +} +``` + +## More Angular Drop Down Examples + +The default demo shows the use of a toggleable Drop Down List in Angular that lets end-users expand all predefined items and opt for one of them. Check out the following example and see the Angular Drop Down list in action. + +### Predefined selected item + +Let's say we want to have a predefined selected item. One way to do this, is by handling the [opening](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#opening) event of the drop-down component. + +```html +<!-- dropdown.component.html --> +<button igxButton="contained" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown"> + Options +</button> +<igx-drop-down #dropdown (opening)="dropdown.setSelectedItem(0)"> + <igx-drop-down-item *ngFor="let item of items"> + {{ item.field }} + </igx-drop-down-item> +</igx-drop-down> +``` + +```typescript +// dropdown.component.ts +export class MyDropDownComponent { + public items: Array<{ field: string }> = [ + { field: 'Option 1' }, + { field: 'Option 2' }, + { field: 'Option 3' }, + ]; +} +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; + + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-sample-2', + styleUrls: ['./dropdown-sample-2.component.scss'], + templateUrl: './dropdown-sample-2.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] +}) +export class DropDownSample2Component { + public items: { field: string }[] = [ + { field: 'Option 1' }, + { field: 'Option 2' }, + { field: 'Option 3' } + ]; +} +``` +```html +<button class="button" igxButton="contained" [igxToggleAction]="dropdown" +[igxDropDownItemNavigation]="dropdown">Options</button> +<igx-drop-down #dropdown (opening)="dropdown.setSelectedItem(0)"> + @for (item of items; track item) { + <igx-drop-down-item> + {{ item.field }} + </igx-drop-down-item> + } +</igx-drop-down> +``` +```scss +.button { + margin: 8px; + width: 128px; +} +``` + +<div class="divider--half"></div> + +### Grouping items + +To provide a more useful visual information, use the [isHeader](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#isheader) property to group items semantically or the [disabled](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#disabled) property to display an item as a non-interactive. You can also set the [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html#selected) property on a particular item to make it the selected item. The `igx-drop-down` items have out-of-the-box support for `igxPrefix`, `igxSuffix`, and `igx-divider` directives that can contain or be set on HTML elements or other web components. + +```html +<!-- dropdown.component.html --> +<button igxButton="contained" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown"> + Countries +</button> +<igx-drop-down #dropdown [width]="'240px'"> + <div class="drop-down__scroll-container"> + <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header" [selected]="item.selected"> + <igx-icon igxPrefix>place</igx-icon> + {{ item.field }} + <span igxSuffix>{{ item.code }}</span> + <igx-divider></igx-divider> + </igx-drop-down-item> + </div> +</igx-drop-down> +``` + +```typescript +// dropdown.component.ts +export class MyDropDownComponent { + public items: any[] = [ + { field: 'European Union', code: 'EU', header: true }, + { field: 'Germany', code: 'DE' }, + { field: 'Bulgaria', code: 'BG', selected: true }, + { field: 'France', code: 'FR', disabled: true }, + { field: 'North America', code: 'NA', header: true }, + { field: 'Canada', code: 'CA' }, + { field: 'United States', code: 'US' }, + { field: 'Mexico', code: 'MX' }, + ]; +} +``` + +If the sample is configured properly, a list of countries should be displayed as a group under European Union header, France as a non-interactive item, and Bulgaria as a selected item: + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxDividerDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-sample-3', + styleUrls: ['./dropdown-sample-3.component.scss'], + templateUrl: './dropdown-sample-3.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective] +}) +export class DropDownSample3Component { + + public items: any[] = [ + { field: 'European Union', code: 'EU', header: true }, + { field: 'Germany', code: 'DE' }, + { field: 'Bulgaria', code: 'BG', selected: true }, + { field: 'France', code: 'FR', disabled: true }, + { field: 'North America', code: 'NA', header: true }, + { field: 'Canada', code: 'CA' }, + { field: 'United States', code: 'US' }, + { field: 'Mexico', code: 'MX' } + ]; +} +``` +```html +<button class="button" igxButton="contained" [igxToggleAction]="dropdown" +[igxDropDownItemNavigation]="dropdown">Countries</button> +<igx-drop-down #dropdown [width]="'240px'"> + <div class="drop-down__scroll-container"> + @for (item of items; track item) { + <igx-drop-down-item [disabled]="item.disabled" [isHeader]="item.header" + [selected]="item.selected" [class.drop-down-header]="item.header"> + <igx-icon igxPrefix>place</igx-icon> + {{ item.field }} + <span igxSuffix>{{ item.code }}</span> + <igx-divider></igx-divider> + </igx-drop-down-item> + } + </div> +</igx-drop-down> +``` +```scss +.button { + margin: 8px; + width: 240px; +} + +.drop-down__scroll-container { + max-height: 240px; +} + +.drop-down-header igx-icon { + display: none; +} +``` + +### Grouping hierarchical data + +The `igx-drop-down` items can also be grouped using the [`igx-drop-down-item-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowngroupcomponent.html) container, making it easier for users to differentiate separate categories. The `igx-drop-down-item-group` accepts `igx-drop-down-item` elements as its content and renders them in a grouped fashion. + +```typescript +// dropdown.component.ts +export class MyCustomDropDownComponent { + ... + public foods: { + name: string, + entries: { name: string, refNo: string }[] + }[] = [ + { + name: 'Vegetables', + entries: [{ + name: 'Cucumber', + refNo: '00000' + }, { + name: 'Lettuce', + refNo: '00001' + }, + ...] + }, { + name: 'Fruits', + entries: [{ + name: 'Banana', + refNo: '10000' + }, { + name: 'Tomato', + refNo: '10001' + }, + ...] + }, { + name: 'Meats', + entries: [{ + name: 'Chicken', + refNo: '20000' + }, { + name: 'Beef', + refNo: '20001' + }, + ...] + }]; +} +``` + +```html +<igx-drop-down> + <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name"> + <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]="food.refNo"> + {{ food.name }} + </igx-drop-down-item> + </igx-drop-down-item-group> +</igx-drop-down> +``` + +The group also has the additional functionality of disabling items inside of its body. For example, lets say we do not want the `Meats` food group to be selectable in our drop-down. Instead of disabling all of the entries in `Meats` separately, we can disable the group, as well as all of the child items inside: + +```html +<igx-drop-down> + <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name" [disabled]="foodGroup.name === 'Meats'"> + <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]="food.refNo"> + {{ food.name }} + </igx-drop-down-item> + </igx-drop-down-item-group> +</igx-drop-down> +``` + +You can see the results in the sample below: + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-sample-5', + styleUrls: ['./dropdown-sample-5.component.scss'], + templateUrl: './dropdown-sample-5.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxSwitchComponent, FormsModule, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent] +}) +export class DropDownSample5Component { + public disableMeats = false; + + // tslint:disable:object-literal-sort-keys + public foods: { + name: string; + entries: { name: string; refNo: string }[]; + }[] = [{ + name: 'Vegetables', + entries: [{ + name: 'Cucumber', + refNo: `00000` + }, { + name: 'Lettuce', + refNo: `00001` + }, { + name: 'Cabbage', + refNo: `00002` + }] + }, { + name: 'Fruits', + entries: [{ + name: 'Banana', + refNo: `10000` + }, { + name: 'Tomato', + refNo: `10001` + }, { + name: 'Kiwi', + refNo: `10002` + }] + }, { + name: 'Meats', + entries: [{ + name: 'Chicken', + refNo: `20000` + }, { + name: 'Beef', + refNo: `20001` + }, { + name: 'Veal', + refNo: `20002` + }] + }]; +} +``` +```html +<div class='controls-wrapper'> + <button class="button" igxButton="contained" [igxToggleAction]="dropDown" + [igxDropDownItemNavigation]="dropDown">Foods</button> + <igx-switch [(ngModel)]="disableMeats"> + Disable 'Meats' + </igx-switch> +</div> +<igx-drop-down #dropDown [width]="'160px'"> + <div class="drop-down__scroll-container"> + @for (foodGroup of foods; track foodGroup) { + <igx-drop-down-item-group [label]="foodGroup.name" + [disabled]="disableMeats && foodGroup.name === 'Meats'"> + @for (food of foodGroup.entries; track food) { + <igx-drop-down-item [value]='food.refNo'> + {{ food.name }} + </igx-drop-down-item> + } + </igx-drop-down-item-group> + } + </div> +</igx-drop-down> +``` +```scss +.button { + width: 160px; +} + +.controls-wrapper { + display: flex; + flex-flow: row; + max-width: 450px; + margin: 8px; +} + +igx-switch { + padding-left: 24px; +} + +.drop-down__scroll-container { + max-height: 240px; +} +``` + +### Drop Down as menu + +You can configure the drop-down to behave as a menu. To do this, set the [ISelectionEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iselectioneventargs.html) interface [cancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iselectioneventargs.html#cancel) member to _true_ in the [selectionChanging](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#selectionChanging) event handler. In this way, the selected item is not preserved when opening the menu and previous selections get invalidated. Still, you can get the clicked item through the [newSelection](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iselectioneventargs.html#newSelection) member value in the event. + +```html +<!-- dropdown.component.html --> +<div> + <igx-navbar title="Contacts"> + <button + [igxToggleAction]="menu" + [igxToggleOutlet]="outlet" + [overlaySettings]="overlaySettings" + [igxDropDownItemNavigation]="menu" + igxIconButton="flat" + > + <igx-icon fontSet="material">more_vert</igx-icon> + </button> + <igx-drop-down #menu (selectionChanging)="selectionHandler($event)"> + <igx-drop-down-item *ngFor="let item of items" [value]="item.text"> + <div>{{ item.text }}</div> + </igx-drop-down-item> + </igx-drop-down> + </igx-navbar> + + <div> + <ng-container *ngIf="text"> + <label igxLabel>{{ text }}</label> + </ng-container> + </div> + + <div igxOverlayOutlet #outlet="overlay-outlet"></div> +</div> +``` + +```typescript +// dropdown.component.ts +export class MyMenuComponent { + public items: Array<{ text: string }> = [ + { text: "Add New Contact" }, + { text: "Edit Contact" }, + { text: "Refresh" }, + { text: "Help" }, + ]; + public text: string; + public overlaySettings = { + positionStrategy: new ConnectedPositioningStrategy({ + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right, + verticalStartPoint: VerticalAlignment.Bottom, + }), + scrollStrategy: new NoOpScrollStrategy(), + }; + + public selectionHandler(eventArgs: ISelectionEventArgs) { + this.text = eventArgs.newSelection.value; + eventArgs.cancel = true; + } +} +``` + +```typescript +import { Component } from '@angular/core'; +import { ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayOutletDirective, NoOpScrollStrategy, VerticalAlignment } from 'igniteui-angular/core'; +import { ISelectionEventArgs, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxNavbarComponent } from 'igniteui-angular/navbar'; +import { IgxIconButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; + + +@Component({ + selector: 'app-dropdown-menu', + styleUrls: ['./dropdown-menu.component.scss'], + templateUrl: './dropdown-menu.component.html', + imports: [IgxNavbarComponent, IgxIconButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxLabelDirective, IgxOverlayOutletDirective] +}) +export class DropdownMenuComponent { + public items: { text: string }[] = + [{ text: 'Add New Contact' }, { text: 'Edit Contact' }, { text: 'Refresh' }, { text: 'Help' }]; + public text: string; + public overlaySettings = { + positionStrategy: new ConnectedPositioningStrategy({ + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right, + verticalStartPoint: VerticalAlignment.Bottom + }), + scrollStrategy: new NoOpScrollStrategy() + }; + + public onSelection(eventArgs: ISelectionEventArgs) { + this.text = eventArgs.newSelection.value; + eventArgs.cancel = true; + } +} +``` +```html +<div class="drop-down-wrapper"> + <igx-navbar title="Contacts"> + <button [igxToggleAction]="menu" [igxToggleOutlet]="outlet" [overlaySettings]="overlaySettings" [igxDropDownItemNavigation]="menu" + igxIconButton="flat"> + <igx-icon family="material">more_vert</igx-icon> + </button> + <igx-drop-down #menu (selectionChanging)="onSelection($event)"> + @for (item of items; track item) { + <igx-drop-down-item [value]="item.text"> + <div> + {{ item.text }} + </div> + </igx-drop-down-item> + } + </igx-drop-down> + </igx-navbar> + + <div class="textContainer"> + @if (text) { + <label igxLabel>{{ text }}</label> + } + </div> + + <div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div> +</div> +``` +```scss +@use '../../../../variables' as *; + +.drop-down-wrapper { + width: 30%; + margin: 8px; + min-width: 280px; + box-shadow: 0 1px 3px 0 elevation(2); + + .textContainer { + height: 100px; + border-radius: 2px; + padding: 16px; + } +} +``` + +### Multi-Level Drop Down menu + +The following sample demonstrates how to implement a multi-level drop down menu that allows the user to quickly and easily navigate through a hierarchy of content by hovering on a series of nested menus. + +For the implementation of the multi-level drop down menu we will use the [`IgxDropDownComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) as well as a custom directive and service described below. + +In order to configure the [`IgxDropDownItem`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html) to open an additional drop down, add the `multiLevel` directive that would handle the [`overlay settings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) of the nested drop down and manages its opened/closed state through its `innerDropdown` property. + +```html +<igx-drop-down #dropdown1> + <igx-drop-down-item [value]="'Web'" multiLevel [innerDropdown]="web"> + Web <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + ... +</igx-drop-down> + +<igx-drop-down #web> + <igx-drop-down-item [value]="'App Builder'"> App Builder </igx-drop-down-item> + ... +</igx-drop-down> +``` + +To configure the multi-level drop down to behave as a menu, you need to handle the [selectionChanging](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#selectionChanging) event of all drop downs in the hierarchy and cancel the default behavior. Then, in order to handle the selection properly you could use the `MultiLevelService`'s `handleSelection` method and in order to prevent closing the drop down when clicking on a menu item, use the `MultiLevelService`'s `handleClosing` methods. + +```ts +@ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent }) +private _dropdowns: QueryList<IgxDropDownComponent>; + +@ViewChild('dropdown1', { read: IgxDropDownComponent }) +private _multiLevelDropdown: IgxDropDownComponent; + +constructor(private _multiLevelService: MultiLevelService) { } + +public ngAfterViewInit(): void { + this._dropdowns.forEach((dropdown) => { + dropdown.selectionChanging.subscribe((args) => { + args.cancel = true; + const value = args.newSelection.value; + const categories = this._multiLevelService.categories; + + if (categories.includes(value)) { + this.selection = ''; + return; + } + + if (this._multiLevelService.isMultiLevel(dropdown)) { + this._multiLevelService.handleSelection(); + } else { + dropdown.close(); + } + + this.selection = value; + }); + }); + + this._multiLevelDropdown.closing.subscribe((args) => { + this._multiLevelService.handleClosing(args); + }); +} +``` + +The result from the above configurations could be seen in the below sample. + +```typescript +import { AfterViewInit, Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core'; +import { IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; +import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxNavbarComponent, IgxNavbarTitleDirective } from 'igniteui-angular/navbar'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { + CROSS_PLATFORM_DATA, + DESIGN_TO_CODE_DATA, + DESKTOP_DATA, + IGNITE_UI_DATA, + SUPPORT_DATA, + TESTING_TOOLS_DATA +} from './data'; +import { MultiLevelService } from './multi-level.service'; +import { MultiLevelDirective } from './multi-level.directive'; + + +@Component({ + selector: 'app-dropdown-multi-level-menu', + templateUrl: './dropdown-multi-level-menu.component.html', + styleUrls: ['./dropdown-multi-level-menu.component.scss'], + providers: [MultiLevelService], + imports: [IgxNavbarComponent, IgxNavbarTitleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, MultiLevelDirective, IgxSuffixDirective] +}) +export class DropdownMultiLevelMenuComponent implements AfterViewInit { + private _multiLevelService = inject(MultiLevelService); + + @ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent }) + private _dropdowns: QueryList<IgxDropDownComponent>; + + @ViewChild('dropdown1', { read: IgxDropDownComponent }) + private _multiLevelDropdown: IgxDropDownComponent; + + public supportData: string[] = SUPPORT_DATA; + public desktopData: string[] = DESKTOP_DATA; + public crossPlatformData: string[] = CROSS_PLATFORM_DATA; + public designToCodeData: string[] = DESIGN_TO_CODE_DATA; + public testingToolsData: string[] = TESTING_TOOLS_DATA; + public igniteUIData: string[] = IGNITE_UI_DATA; + + public overlaySettings: OverlaySettings = { + modal: false, + positionStrategy: new ConnectedPositioningStrategy({ + horizontalStartPoint: HorizontalAlignment.Center, + horizontalDirection: HorizontalAlignment.Center, + verticalStartPoint: VerticalAlignment.Bottom, + closeAnimation: undefined + }) + }; + + public selection: string = ''; + + public ngAfterViewInit(): void { + this._dropdowns.forEach((dropdown) => { + dropdown.selectionChanging.subscribe((args) => { + args.cancel = true; + const value = args.newSelection.value; + const categories = this._multiLevelService.categories; + + if (categories.includes(value)) { + this.selection = ''; + return; + } + + if (this._multiLevelService.isMultiLevel(dropdown)) { + this._multiLevelService.handleSelection(); + } else { + dropdown.close(); + } + + this.selection = value; + }); + }); + + this._multiLevelDropdown.closing.subscribe((args) => { + this._multiLevelService.handleClosing(args); + }); + } +} +``` +```html +<div class="container"> + <igx-navbar> + <div igxNavbarTitle> + <img width="160px" src="https://static.infragistics.com/marketing/Website/General/Infragistics-horizontal.svg" /> + </div> + + <button igxButton [igxToggleAction]="dropdown1" [overlaySettings]="overlaySettings"> + <span>Design & Development</span> <igx-icon>expand_more</igx-icon> + </button> + <button igxButton [igxToggleAction]="dropdown2" [overlaySettings]="overlaySettings"> + <span>UX</span> <igx-icon>expand_more</igx-icon> + </button> + <button igxButton [igxToggleAction]="dropdown3" [overlaySettings]="overlaySettings"> + <span>Support</span> <igx-icon>expand_more</igx-icon> + </button> + <button igxButton [igxToggleAction]="dropdown4" [overlaySettings]="overlaySettings"> + <span>Pricing</span> <igx-icon>expand_more</igx-icon> + </button> + </igx-navbar> + + <div class="container"> + <p>{{ selection }}</p> + </div> + + <!-- Drop Down Level 1 --> + <igx-drop-down #dropdown1 [width]="'170px'"> + <igx-drop-down-item [value]="'Web'" multiLevel [innerDropdown]="web"> + Web <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + + <igx-drop-down-item [value]="'Desktop'" multiLevel [innerDropdown]="desktop"> + Desktop <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + + <igx-drop-down-item [value]="'Cross Platform'" multiLevel [innerDropdown]="crossPlatform"> + Cross Platform <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + + <igx-drop-down-item [value]="'Design to Code'" multiLevel [innerDropdown]="designToCode"> + Design to Code <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + + <igx-drop-down-item [value]="'Testing Tools'" multiLevel [innerDropdown]="testingTools"> + Testing Tools <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + </igx-drop-down> + + <igx-drop-down #dropdown2> + <igx-drop-down-item [value]="'Indigo.Design'">Indigo.Design</igx-drop-down-item> + <igx-drop-down-item [value]="'App Builder'">App Builder</igx-drop-down-item> + </igx-drop-down> + + <igx-drop-down #dropdown3> + @for (item of supportData; track item) { + <igx-drop-down-item [value]="item"> + {{ item }} + </igx-drop-down-item> + } + </igx-drop-down> + + <igx-drop-down #dropdown4> + <igx-drop-down-item [value]="'Product Pricing'">Product Pricing</igx-drop-down-item> + <igx-drop-down-item [value]="'Contact Us'">Contact Us</igx-drop-down-item> + </igx-drop-down> + + <!-- Drop Down Level 2 --> + <igx-drop-down #web> + <igx-drop-down-item [value]="'App Builder'"> + App Builder + </igx-drop-down-item> + <igx-drop-down-item [value]="'Ignite UI'" multiLevel [innerDropdown]="igniteUI"> + Ignite UI <igx-icon igxSuffix>chevron_right</igx-icon> + </igx-drop-down-item> + </igx-drop-down> + + <igx-drop-down #desktop> + @for (item of desktopData; track item) { + <igx-drop-down-item [value]="item"> + {{ item }} + </igx-drop-down-item> + } + </igx-drop-down> + + <igx-drop-down #crossPlatform> + @for (item of crossPlatformData; track item) { + <igx-drop-down-item [value]="item"> + {{ item }} + </igx-drop-down-item> + } + </igx-drop-down> + + <igx-drop-down #designToCode> + @for (item of designToCodeData; track item) { + <igx-drop-down-item [value]="item"> + {{ item }} + </igx-drop-down-item> + } + </igx-drop-down> + + <igx-drop-down #testingTools> + @for (item of testingToolsData; track item) { + <igx-drop-down-item [value]="item"> + {{ item }} + </igx-drop-down-item> + } + </igx-drop-down> + + <!-- Drop Down Level 3 --> + <igx-drop-down #igniteUI> + @for (item of igniteUIData; track item) { + <igx-drop-down-item [value]="item"> + {{ item }} + </igx-drop-down-item> + } + </igx-drop-down> +</div> +``` +```scss +@use "../../../../variables" as *; + +.container { + padding: 16px; +} + +igx-icon { + --size: 18px; +} + +[igxButton] { + margin-inline-start: 0px; +} + +[multiLevel] { + cursor: default; +} + +$custom-navbar-theme: navbar-theme( + $background: #f8f9fa, +); + +$custom-button-theme: flat-button-theme( + $foreground: #666, + $hover-foreground: #0099ff, + $focus-foreground: #0099ff, + $active-foreground: #0099ff, + $background: transparent, + $hover-background: transparent, + $focus-background: transparent, + $active-background: transparent, +); + +:host { + --ig-button-font-size: 0.75rem; + + @include tokens($custom-navbar-theme); + @include tokens($custom-button-theme); +} +``` + +> [!NOTE] +> To display the Dropdown component opened initially, it is recommended to set the open method as a callback of the requestAnimationFrame method. This will ensure that the DOM tree is repainted and all elements are correctly positioned. + +### Navigation directive + +Use the [igxDropDownItemNavigation](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemnavigationdirective.html) directive to enable keyboard navigation for the `igxDropDown` component. In order to allow the directive to handle all triggered events, it should be applied to the active (focused) element or a parent container. By default, a drop-down or its items don't take focus, so the directive can be placed on a `button` or `input` that will control the drop-down. The navigation directive value should target a component that is an instance or a descendant of the [IgxDropDownBaseDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownbasedirective.html) class. + +The following sample demonstrates an input that opens and closes the `igxDropDown` instance on click. Applying the [igxDropDownItemNavigation](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemnavigationdirective.html) directive on the input itself will enable keyboard navigation when using the up and down arrow keys. This relies on the default drop-down behavior with the [allowItemsFocus](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html#allowItemsFocus) property set to `false` to allow the input to maintain focus. + +```html +<!-- input-dropdown.component.html --> +<igx-input-group #inputGroup [igxToggleAction]="dropDown"> + <input + type="text" + igxInput + [igxDropDownItemNavigation]="dropDown" + readonly="true" + placeholder="choose an option" + [value]="dropDown.selectedItem?.value" + (keydown.ArrowDown)="openDropDown()" + /> + + <igx-suffix igxIconButton="flat" igxRipple> + <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon> + </igx-suffix> +</igx-input-group> + +<span>Selected: {{ dropDown.selectedItem?.value }}</span> +<igx-drop-down #dropDown [width]="'160px'"> + <igx-drop-down-item *ngFor="let item of items" [value]="item.field"> + {{ item.field }} + </igx-drop-down-item> +</igx-drop-down> +``` + +```typescript +// input-dropdown.component.ts +export class InputDropDownComponent { + @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent; + @ViewChild('inputGroup', { read: IgxInputGroupComponent }) + public inputGroup: IgxInputGroupComponent; + + public items: Array<{ field: string }> = [ + { field: 'Option 1' }, + { field: 'Option 2' }, + { field: 'Option 3' }, + ]; + + public openDropDown() { + if (this.igxDropDown.collapsed) { + this.igxDropDown.open({ + modal: false, + positionStrategy: new ConnectedPositioningStrategy({ + target: this.inputGroup.element.nativeElement, + }), + }); + } + } +} +``` + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { ConnectedPositioningStrategy } from 'igniteui-angular/core'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxInputDirective, IgxInputGroupComponent, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-dropdown-sample-4', + styleUrls: ['./dropdown-sample-4.component.scss'], + templateUrl: './dropdown-sample-4.component.html', + imports: [IgxInputGroupComponent, IgxToggleActionDirective, IgxInputDirective, IgxDropDownItemNavigationDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent] +}) +export class DropDownSample4Component { + @ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent; + @ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true }) public inputGroup: IgxInputGroupComponent; + + public items: { field: string }[] = [ + { field: 'Option 1' }, + { field: 'Option 2' }, + { field: 'Option 3' } + ]; + + public openDropDown() { + if (this.igxDropDown.collapsed) { + this.igxDropDown.open({ + target: this.inputGroup.element.nativeElement, + modal: false, + positionStrategy: new ConnectedPositioningStrategy() + }); + } + } +} +``` +```html +<igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group"> + <input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="dropDown" readonly="true" + placeholder="Choose an option" [value]="dropDown.selectedItem?.value" (keydown.ArrowDown)="openDropDown()" /> + <igx-suffix igxIconButton="flat" class="dropdownToggleButton" igxRipple> + <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon> + </igx-suffix> + </igx-input-group> + <span>Selected: {{ dropDown.selectedItem?.value }}</span> + <igx-drop-down #dropDown [width]="'180px'"> + @for (item of items; track item) { + <igx-drop-down-item [value]="item.field"> + {{ item.field }} + </igx-drop-down-item> + } + </igx-drop-down> +``` +```scss +:host { + margin: 8px; +} + +.input { + padding-left: 0.2rem; +} + +.input-group { + width: 220px; +} + +.igx-input-group { + display: inline-block; +} + +span { + display: inline; + padding-left: 24px; +} +``` + +<div class="divider--half"></div> + +Applying the directive will ensure the following actions are executed as a result from the keyboard navigation: + +| Name | Description | +| :----------- | :------------------------------------------------------- | +| `Enter` | Select item from the drop down and closes the drop down. | +| `Space` | Select item from the drop down and closes the drop down. | +| `Esc` | Closes the drop down. | +| `Arrow Down` | Navigate to the next item in the target component. | +| `Arrow Up` | Navigate to the previous item in the target component. | +| `End` | Navigate to the last item in the target component. | +| `Home` | Navigate to the first item in the target component. | + +When the `allowItemsFocus` property is enabled, the drop down items gain tab index and are focused when active. The focused drop-down items are the ones that trigger events, during keyboard navigation, which means that the navigation directive should be applied on the individual drop-down items. + +```html +<igx-input-group [igxToggleAction]="dropDown"> + <input igxInput type="text" /> +</igx-input-group> +<igx-drop-down #dropDown [allowItemsFocus]="true"> + <igx-drop-down-item *ngFor="let p of provinceData" [igxDropDownItemNavigation]="dropDown"> + {{ p }} + </igx-drop-down-item> +</igx-drop-down> +``` + +## Styling + +### Dropdown Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$background-color</strong></summary></details> + </td> + <td>$item-text-color</td> + <td>The drop-down item text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-item-background</td> + <td>The drop-down hover item background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focused-item-background</td> + <td>The drop-down focused item background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focused-item-text-color</td> + <td>The drop-down focused item text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-item-background</td> + <td>The drop-down selected item background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-item-text-color</td> + <td>The drop-down disabled item text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$header-text-color</td> + <td>The drop-down header text color.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$item-text-color</strong></summary></details> + </td> + <td>$item-icon-color</td> + <td>The drop-down item icon color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-item-text-color</td> + <td>The drop-down item hover text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$hover-item-icon-color</td> + <td>The drop-down item hover icon color.</td> + </tr> + </tbody> + <tbody class="group"> + <tr class="primary"> + <td> + <details><summary><strong>$selected-item-background</strong></summary></details> + </td> + <td>$selected-item-text-color</td> + <td>The drop-down selected item text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-item-icon-color</td> + <td>The drop-down selected item icon color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-hover-item-background</td> + <td>The drop-down selected item hover background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-hover-item-text-color</td> + <td>The drop-down selected item hover text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-hover-item-icon-color</td> + <td>The drop-down selected item hover icon color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-focus-item-background</td> + <td>The drop-down selected item focus background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$selected-focus-item-text-color</td> + <td>The drop-down selected item focus text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$focused-item-border-color</td> + <td>The drop-down item focused border color.</td> + </tr> + </tbody> +</table> + +Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the drop-down appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`drop-down-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) and accepts some of the default theme's parameters. When you provide a certain background color, the theme automatically calculates the state colors and appropriate contrasting foregrounds. By setting the `$background` property, you'll get a fully styled dropdown. + +```scss +$custom-drop-down-theme: drop-down-theme( + $header-text-color: #345779, + $item-text-color: #2dabe8, + $hover-item-text-color: #345779, + $selected-item-background: #345779, +); +``` + +The last step is to pass the custom drop-down theme: + +```scss +:host { + @include tokens($custom-drop-down-theme); +} +``` + +### Demo + +```typescript +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; +import { ISelectionEventArgs, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { getHeroClassData, IHeroClass } from '../../../data/heroData'; + + +@Component({ + selector: 'app-dropdown-styling', + styleUrls: ['./dropdown-styling.component.scss'], + templateUrl: './dropdown-styling.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent] +}) +export class DropDownStylingComponent implements OnInit { + elem = inject(ElementRef); + + @ViewChild('button', { static: true }) public button: ElementRef; + public heroClasses: IHeroClass[] = []; + public hero = 'Choose your hero'; + + public ngOnInit() { + this.heroClasses = getHeroClassData(); + } + + public handleDropDownSelection(event: ISelectionEventArgs) { + this.hero = event.newSelection.value; + } +} +``` +```html +<button #button class="drop-down" igxButton="contained" [igxToggleAction]="dropDown" [overlaySettings]="{outlet: elem}" +[igxDropDownItemNavigation]="dropDown">{{ hero }}</button> +<igx-drop-down #dropDown class="drop-down" (selectionChanging)="handleDropDownSelection($event)"> + <div class="drop-down__scroll-container"> + @for (classGroup of heroClasses; track classGroup) { + <igx-drop-down-item-group [label]="classGroup['name']"> + @for (class of classGroup['entries']; track class) { + <igx-drop-down-item [value]='class.name'> + {{ class.name }} + </igx-drop-down-item> + } + </igx-drop-down-item-group> + } + </div> +</igx-drop-down> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-drop-down-theme: drop-down-theme( + $header-text-color: #345779, + $item-text-color: #2dabe8, + $hover-item-text-color: #345779, + $selected-item-background: #345779, +); + +:host { + @include tokens($custom-drop-down-theme); +} +``` + +<div class="divider--half"></div> + +## API References + +- [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) +- [IgxDropDownComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxDropDownItemComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdownitemcomponent.html). +- [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) +- [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxDividerDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) +- [IgxDividerDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-divider-theme) + +## Theming Dependencies + +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) + +## Additional Resources + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-cells.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-cells.md new file mode 100644 index 000000000..8dcb4f6ca --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-cells.md @@ -0,0 +1,673 @@ +--- +title: Angular Excel Library| Using Cells | Infragistics +_description: Learn how to perform operations on Infragistics' Angular excel library's cells such as accessing them, adding formulas and comments, merging cells and formatting cells. View Ignite UI for Angular excel demos! +_keywords: Excel library, cell operations, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Workbook", "Worksheet", "WorksheetCell", "WorkbookStyleCollection", "IWorksheetCellFormat", "WorkbookColorInfo", "DisplayOptions"] +_tocName: Using Cells +_premium: true +--- + +# Angular Using Cells + +The [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) objects in an Excel worksheet is the object that holds your actual data values for the worksheet. This topic goes over the many operations that you can perform on these cells, such as accessing them and their regions by name, adding formulas and comments to the cells, and merging and formatting them. + +## Angular Using Cells Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxExcelModule } from "igniteui-angular-excel"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxExcelModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ComponentFactoryResolver, Injector, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; +import { CellReferenceMode } from "igniteui-angular-excel"; +import { WorksheetMergedCellsRegion } from "igniteui-angular-excel"; +import { FormattedString } from "igniteui-angular-excel"; +import { Formula } from "igniteui-angular-excel"; +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { Worksheet } from "igniteui-angular-excel"; +import { WorksheetCellComment } from "igniteui-angular-excel"; +import { ExcelUtility } from "./ExcelUtility"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("gridContainer", { read: ViewContainerRef }) + public gridContainerRef: ViewContainerRef; + public canSave = false; + public wb: Workbook; + public ws: Worksheet; + public worksheetRegion: string[]; + public selectedRegion: string; + public cellFeatures: string[]; + + constructor(private resolver: ComponentFactoryResolver, private injector: Injector) { + } + + public ngOnInit() { + this.workbookCreate(); + } + public workbookSave(): void { + if (this.canSave) { + ExcelUtility.save(this.wb, "ExcelWorkbook").then((f) => { + console.log("Saved:" + f); + }, (e) => { + console.error("ExcelUtility.Save Error:" + e); + }); + } + } + public workbookParse(wb: Workbook): void { + if (wb === undefined) { + this.worksheetRegion = null; + this.selectedRegion = null; + } else { + const names = new Array<string>(); + for (const ws of wb.worksheets()) { + for (const tbl of ws.tables()) { + names.push(ws.name + " - " + tbl.name); + } + } + this.worksheetRegion = names; + this.selectedRegion = names.length > 0 ? names[0] : null; + } + this.wb = wb; + this.canSave = wb != null; + } + public workbookCreate(): void { + const wb = new Workbook(WorkbookFormat.Excel2007); + const employeeSheet = wb.worksheets().add("Employees"); + const employeeHeader = employeeSheet.rows(0); + const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft" ]; + const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David" ]; + const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams" ]; + const countries = ["UK", "France", "USA", "Germany", "Poland", "Brazil" ]; + const titles = ["Sales Rep.", "Engineer", "Administrator", "Manager" ]; + const employeeColumns = ["Name", "Company", "Title", "Age", "Country"]; + for (let col = 0; col < employeeColumns.length; col++) { + employeeSheet.columns(col).width = 5000; + employeeHeader.setCellValue(col, employeeColumns[col]); + } + for (let i = 1; i < 20; i++) { + const company = this.getItem(companies); + const title = this.getItem(titles); + const country = this.getItem(countries); + const name = this.getItem(firstNames) + " " + this.getItem(lastNames); + const salary = this.getRandom(45000, 95000); + const age = this.getRandom(20, 65); + const wr = employeeSheet.rows(i); + wr.setCellValue(0, name); + wr.setCellValue(1, company); + wr.setCellValue(2, title); + wr.setCellValue(3, age); + wr.setCellValue(4, country); + wr.setCellValue(5, salary); + } + const expanseSheet = wb.worksheets().add("Expanses"); + const expanseHeader = expanseSheet.rows(0); + const expanseNames = ["Year", "Computers", "Research", "Travel", "Salary", "Software" ]; + let expanseCol = 0; + for (const key of expanseNames) { + expanseSheet.columns(expanseCol).width = 5000; + expanseHeader.setCellValue(expanseCol, key); + for (let i = 1; i < 20; i++) { + const wr = expanseSheet.rows(i); + if (key === "Year") { + wr.setCellValue(expanseCol, 2010 + i); + } else if (key === "Computers") { + wr.setCellValue(expanseCol, this.getAmount(50000, 65000)); + } else if (key === "Research") { + wr.setCellValue(expanseCol, this.getAmount(150000, 165000)); + } else if (key === "Travel") { + wr.setCellValue(expanseCol, this.getAmount(20000, 25000)); + } else if (key === "Salary") { + wr.setCellValue(expanseCol, this.getAmount(4000000, 450000)); + } else if (key === "Software") { + wr.setCellValue(expanseCol, this.getAmount(100000, 150000)); + } + } + expanseCol++; + } + const incomeSheet = wb.worksheets().add("Income"); + const incomeHeader = incomeSheet.rows(0); + const incomeNames = ["Year", "Phones", "Computers", "Software", "Services", "Royalties" ]; + let incomeCol = 0; + for (const key of incomeNames) { + incomeSheet.columns(incomeCol).width = 5000; + incomeHeader.setCellValue(incomeCol, key); + for (let i = 1; i < 20; i++) { + const wr = incomeSheet.rows(i); + if (key === "Year") { + wr.setCellValue(incomeCol, 2010 + i); + } else if (key === "Software") { + wr.setCellValue(incomeCol, this.getAmount(700000, 850000)); + } else if (key === "Computers") { + wr.setCellValue(incomeCol, this.getAmount(250000, 265000)); + } else if (key === "Royalties") { + wr.setCellValue(incomeCol, this.getAmount(400000, 450000)); + } else if (key === "Phones") { + wr.setCellValue(incomeCol, this.getAmount(6000000, 650000)); + } else if (key === "Services") { + wr.setCellValue(incomeCol, this.getAmount(700000, 750000)); + } + } + incomeCol++; + } + this.workbookParse(wb); + } + public onCommentChanged(input: HTMLInputElement): void { + const ws = this.wb.worksheets(0); + const wr = ws.rows(0); + const d = new WorksheetCellComment(); + const formatted = new FormattedString("This cell has a reference name."); + if (input.checked === true) { + // Cell Comment + d.text = formatted; + wr.cells(0).comment = d; + } else { + wr.cells(0).comment = null; + } + } + public onFormulaChanged(input: HTMLInputElement): void { + // Cell Formula + const ws = this.wb.worksheets(0); + let formula: Formula; + if (input.checked === true) { + // Using a Formula object to apply a formula + formula = Formula.parse("=AVERAGE(F2:F20)", CellReferenceMode.A1); + formula.applyTo(ws.rows(21).cells(5)); + ws.rows(20).cells(5).value = "Average Salary"; + } else { + if (ws.rows(21).cells(5).formula != null) { + formula = ws.rows(21).cells(5).formula; + } + if (formula != null) { + ws.rows(21).cells(5).value = null; + ws.rows(20).cells(5).value = null; + } + } + } + public onMergeChanged(input: HTMLInputElement): void { + let mergedRegion: WorksheetMergedCellsRegion; + if (input.checked === true) { + // Using merge cells + this.wb.worksheets(0).rows(2).cells(2).value = "Engineer"; + this.wb.worksheets(0).rows(3).cells(2).value = "Engineer"; + this.wb.worksheets(0).rows(4).cells(2).value = "Engineer"; + this.wb.worksheets(0).mergedCellsRegions().add(2, 2, 4, 2); + mergedRegion = this.wb.worksheets(0).mergedCellsRegions(0); + } else { + if (this.wb.worksheets(0).mergedCellsRegions().count === 1) { + mergedRegion = this.wb.worksheets(0).mergedCellsRegions(0); + } + if (mergedRegion != null) { + this.wb.worksheets(0).mergedCellsRegions().removeAt(0); + this.wb.worksheets(0).rows(2).cells(2).value = "Engineer"; + this.wb.worksheets(0).rows(3).cells(2).value = "Engineer"; + this.wb.worksheets(0).rows(4).cells(2).value = "Engineer"; + } + } + } + public getRandom(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1) + min); + } + public getItem(array: string[]): string { + const i = this.getRandom(0, array.length - 1); + return array[i]; + } + public getAmount(min: number, max: number) { + const n = this.getRandom(min, max); + const s = n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); + return s; + } +} +``` +```html +<div class="container"> + <div class="cellOptions"> + + <div class="workbookOperations"> + <button class="workbookButton" (click)="workbookSave()" [disabled]="!canSave"> + <label>Save Workbook</label> + </button> + </div> + <div class="cellFeatures"> + <label class="label">Add a Comment to cell A1: </label> + <input type="checkbox" id="addComment" (change)='onCommentChanged($event.target)'> <br/> + <label class="label">Add a Formula for cells F2 to F20: </label> + <input type="checkbox" id="addFormula" (change)='onFormulaChanged($event.target)'> <br/> + <label class="label">Merge Cells: </label> + <input type="checkbox" id="mergeCells" (change)='onMergeChanged($event.target)'> + </div> + </div> + + +</div> +``` +```scss +.cellOptions { + display: "block"; + width: 100%; +} + +.workbookOperations { + width: 160px; + padding-left: 5px; + padding-right: 5px; + float:left; +} + +.workbookDetails { + float:left; + width: 35%; + height: 100px; + padding-left: 5px; + padding-right: 5px; +} + +.cellFeatures { + float:left; + width: 35%; + height: 100px; + padding-left: 5px; + padding-right: 5px; +} + +.workbookDetails > select { + display: inline-block; + width: 100%; + height: 90px; +} + +.label { + margin-top: 8px; + font-weight: bold; +} + +.workbookPreview { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + width: 100%; + height: 200px; +} + +.workbookButton { + display: block; + width: 150px; + margin-top: 5px; +} + +.workbookSelector { + display: inline-block; + width: 150px; + margin-top: 5px; +} +``` + + +<div class="divider--half"></div> + +<!-- Angular, React, WebComponents --> + +## References + +The following code shows the imports needed to use the code-snippets below: + +```ts +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { Worksheet } from "igniteui-angular-excel"; +import { WorksheetTable } from "igniteui-angular-excel"; +import { NamedReference } from "igniteui-angular-excel"; +import { WorksheetCellComment } from "igniteui-angular-excel"; +import { FormattedString } from "igniteui-angular-excel"; +``` + +<!-- end: Angular, React, WebComponents --> + +## Referencing Cells and Regions + +You can access a [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object or a [`WorksheetRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) object by calling the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html#worksheet) object’s [`getCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getCell) or [`getRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getRegion) methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents. + +The following example code demonstrates how to reference cells and regions: + +```ts +var workbook = new Workbook(); +var worksheet = workbook.worksheets().add("Sheet1"); + +//Accessing a single cell +var cell = worksheet.getCell("E2"); +//Accessing a range of cells +var region = worksheet.getRegion("G1:G10"); +``` + +## Accessing Cells and Regions by Name + +In Microsoft Excel, individual cells, as well as cell regions can have names assigned to them. The name of a cell or region can be used to reference that cell or region instead of their address. + +The Infragistics Angular Excel Library supports the referencing of cells and regions by name through the [`getCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getCell) and [`getRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getRegion) methods of the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html#worksheet) object. You refer to the cell or region using the [`NamedReference`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.namedreference.html) instance that refers to that cell or region. + +You can use the following code snippet as an example for naming a cell or region: + +```ts +var workbook = new Workbook(); +var worksheet = workbook.worksheets().add("Sheet1"); + +var cell_reference = workbook.namedReferences().add("myCell", "=Sheet1:A1"); +var region_reference = workbook.namedReferences().add("myRegion", "=Sheet1!A1:B2"); +``` + +The following code can be used to the get the cell and region referenced by the "myCell" and "myRegion" named references above: + +```ts +var cell = worksheet.getCell("myCell"); +var region = worksheet.getRegion("myRegion"); +``` + +## Adding a Comment to a Cell + +A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics Angular Excel Library allows you to add comments to a cell by setting a [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object’s [`comment`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#comment) property. + +The following example code demonstrates how to add a comment to a cell: + +```ts +var workbook = new Workbook(); +var worksheet = workbook.worksheets().add("Sheet1"); + +var cellComment = new WorksheetCellComment(); +var commentText = new FormattedString("This cell has a comment."); +cellComment.text = commentText; + +worksheet.rows(0).cells(0).comment = cellComment; +``` + +## Adding a Formula to a Cell + +The Infragistics Angular Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object’s [`applyFormula`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#applyFormula) method or by instantiating a [`formula`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#formula) object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the [`formula`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#formula) object using the [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object’s [`formula`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#formula) property. If you need the value, use the cell’s [`value`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#value) property. + +The following code shows you how to add a formula to a cell. + +```ts + var workbook = new Workbook(); + var worksheet = workbook.worksheets().add("Sheet1"); + worksheet.rows(5).cells(0).applyFormula("=SUM(A1:A5)"); + + //Using a Formula object to apply a formula + var sumFormula = Formula.parse("=SUM(A1:A5)", CellReferenceMode.A1); + sumFormula.applyTo(worksheet.rows(5).cells(0)); +``` + +## Copying a Cell’s Format + +Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object’s [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property, you can call the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object’s [`setFormatting`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#setFormatting) method and pass it a [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. + +The following code shows you how to copy the format of the 2nd column to the 4th column: + +```ts +var workbook = new Workbook(); +var worksheet = workbook.worksheets().add("Sheet1"); + +//Format 2nd column +worksheet.columns(1).cellFormat.fill = CellFill.createSolidFill("Blue"); +worksheet.columns(1).cellFormat.font.bold = true; + +//Copy format of 2nd column to 4th column +worksheet.columns(3).cellFormat.setFormatting(worksheet.columns(1).cellFormat); +``` + +## Formatting a Cell + +The Infragistics Angular Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property of the [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html), [`WorksheetRow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetrow.html), [`WorksheetColumn`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html), or [`WorksheetMergedCellsRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetmergedcellsregion.html) objects. + +You can customize every aspect of a cell’s appearance. You can set a cell’s font, background, and borders, as well as text alignment and rotation. You can even apply a different format on a character-by-character basis for a cell’s text. + +You can also format cell values by assigning a format string. An acceptable format string follows the traditional format standards and formatting codes. + +The following code shows you how to format a cell to display numbers as currency: + +```ts +var workbook = new Workbook(format); +var workbook = workbook.worksheets().add("Sheet1"); + +worksheet.columns(2).cellFormat.formatString = "\"$\"#,##0.00"; +``` + +## Excel 2007 Color Model + +The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. You can open this color dialog by navigating to Excel Options => Save => Colors. + +You can create all possible fill types using static properties and methods on the [`CellFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfill.html) class. They are as follows: + +- `NoColor` - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through. + +- `CreateSolidFill` - Returns a [`CellFillPattern`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) instance which has a pattern style of `Solid` and a background color set to the [`color`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#color) or [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) specified in the method. + +- `CreatePatternFill` - Returns a [`CellFillPattern`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) instance which has the specified pattern style and the [`color`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#color) or [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) values, specified for the background and pattern colors. + +- `CreateLinearGradientFill` - Returns a [`CellFillLinearGradient`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) instance with the specified angle and gradient stops. + +- `CreateRectangularGradientFill` - Returns a [`CellFillRectangularGradient`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle. + +The derived types, representing the various fills which can be created, are as follows: + +- [`CellFillPattern`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel. + +- [`CellFillLinearGradient`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient. + +- [`CellFillRectangularGradient`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges. + +The following code snippet demonstrates how to create a solid fill in a [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html): + +```ts +var workbook = new Workbook(); +var worksheet = workbook.worksheets().add("Sheet1"); + +var cellFill = CellFill.createSolidFill("Blue"); +worksheet.rows(0).cells(0).cellFormat.fill = cellFill; +``` + +You can specify a color (the color of Excel cells background, border, etc) using linear and rectangular gradients in cells. When workbooks with these gradients are saved in .xls file format and opened in Microsoft Excel 2007/2010, the gradients will be visible, but when these files are opened in Microsoft Excel 2003, the cell will be filled with the solid color from the first gradient stop. + +These are the ways a color can be defined, as follows: + +- The automatic color (which is the WindowText system color) + +- Any user defined RGB color + +- A theme color + +If an RGB or a theme color is used, an optional tint can be applied to lighten or darken the color. This tint cannot be set directly in Microsoft Excel 2007 UI, but various colors in the color palette displayed to the user are actually theme colors with tints applied. + +Each workbook has 12 associated theme colors. They are the following: + +- Light 1 + +- Light 2 + +- Dark 1 + +- Dark 2 + +- Accent1 + +- Accent2 + +- Accent3 + +- Accent4 + +- Accent5 + +- Accent6 + +- Hyperlink + +- Followed Hyperlink + +- There are default values when a workbook is created, which can be customized via Excel. + +Colors are defined by the [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) class, which is a sealed immutable class. The class has a static `Automatic` property, which returns the automatic color, and there are various constructors which allow you to create a [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) instance with a color or a theme value and an optional tint. + +The [`getResolvedColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html#getResolvedColor) method on [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) allows you to determine what color will actually be seen by the user when they open the file in Excel. + +If the [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) represents a theme color, you must pass in a Workbook instance to the method so it can get the theme color’s RGB value from the workbook. + +When saving out in the newer file formats such as .xlsx, the newer color information is saved directly into the file. When saving out in an older file format such as .xls, the index to the closest color in the palette will be saved out. In addition, the older formats have future feature records that can be saved out to indicate the newer color information. + +When the older formats are opened in Microsoft Excel 2003 and earlier versions, these future features records are ignored, but when the older file formats are opened in Excel 2007 and later, their records are read and the color information from them overwrites the indexed color that was previously loaded from the normal format records. + +## Excel Format Support + +You can set a host of different formats on a [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) by using the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object returned by the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property of that cell. This [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked. + +You can also access the built-in styles to Microsoft Excel 2007 using the [`styles`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#styles) collection of the [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007. + +There is a special type of style on the workbook's [`styles`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#styles) collection known as the "normal" style, which can be accessed using that collection's [`normalStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#normalStyle) property, or by indexing into the collection with the name "Normal". + +The [`normalStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#normalStyle) contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing the properties on the [`normalStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#normalStyle) will change all of the default cell format properties on the workbook. This is useful, for example, if you want to change the default font for your workbook. + +You can clear the [`styles`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#styles) collection or reset it to its predefined state by using the [`clear`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#clear) and [`reset`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#reset) methods, respectively. Both of these will remove all user-defined styles, but [`clear`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#clear) will clear the [`styles`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#styles) collection entirely. + +With this feature, a [`style`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#style) property has been added to the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object. This is a reference to a [`WorkbookStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstyle.html) instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the [`style`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#style) property always returns the [`normalStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#normalStyle) by default. + +If the [`style`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#style) property is set to null, it will revert back to the [`normalStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstylecollection.html#normalStyle). If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format. + +When the [`style`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#style) property is set on a cell format, the format options included on the [`style`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#style) are removed from the cell format. All other properties are left intact. For example, if a cell style including border formatting was created and that style was set as the cell's [`style`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#style), the border format option on the cell format would be removed and the cell format only includes fill formatting. + +When a format option flag is removed from a format, all associated properties are reset to their unset values, so the cell format’s border properties are implicitly reset to default/unset values. + +You can determine what would really be seen in cells by using the [`getResolvedCellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#getResolvedCellFormat) method on classes which represent a row, column, cell, and merged cell. + +This method returns a [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) instance which refers back to the associated [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) on which it is based. So subsequent changes to the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property will be reflected in the instance returned from a [`getResolvedCellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#getResolvedCellFormat) call. + +## Merging Cells + +Aside from setting the value or format of cells, you can also merge cells to make two or more cells appear as one. If you merge cells, they must be in a rectangular region. + +When you merge cells, each cell in the region will have the same value and cell format. The merged cells will also be associated with the same [`WorksheetMergedCellsRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetmergedcellsregion.html) object, accessible from their [`associatedMergedCellsRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#associatedMergedCellsRegion) property. The resultant [`WorksheetMergedCellsRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetmergedcellsregion.html) object will also have the same value and cell format as the cells. + +Setting the value (or cell format) of the region or any cell in the region will change the value of all cells and the region. If you un-merge cells, all of the previously merged cells will retain the shared cell format they had before they were unmerged. However, only the top-left cell of the region will retain the shared value. + +In order to create a merged cell region, you must add a range of cells to the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object’s [`mergedCellsRegions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#mergedCellsRegions) collection. This collection exposes an `Add` method that takes four integer parameters. The four parameters determine the index of the starting row and column (top-left most cell) and the index of the ending row and column (bottom-right most cell). + +```ts +var workbook = new Workbook(); +var worksheet = workbook.worksheets().add("Sheet1"); + +// Make some column headers +worksheet.rows(1).cells(1).value = "Morning"; +worksheet.rows(1).cells(2).value = "Afternoon"; +worksheet.rows(1).cells(3).value = "Evening"; + +// Create a merged region from column 1 to column 3 +var mergedRegion1 = ws.mergedCellsRegions().add(0, 1, 0, 3); + +// Set the value of the merged region +mergedRegion1.value = "Day 1"; + +// Set the cell alignment of the middle cell in the merged region. +// Since a cell and its merged region shared a cell format, this will ultimately set the format of the merged region +worksheet.rows(0).cells(2).cellFormat.alignment = HorizontalCellAlignment.Center; +``` + +## Retrieving the Cell Text as Displayed in Excel + +The text displayed in a cell depends on several factors other than the actual cell value, such as the format string and the width of the column that the cell is contained in. + +The format string determines how the value of cell is converted to text and what literal character should be displayed with the formatted value. You can find more detailed information about format codes here. + +The amount of horizontal space available in a cell plays a big part in how the value is displayed to the user. + +Displayed text can be different depending on varying column widths. + +When displaying numbers and using format string containing **"General"** or **"@"**, there are various formats which are tried to find a formatting which fits the cell width. A list of example formats are shown below: + +- **Normal Value** - Number is displayed as it would be if there is unlimited amount of space. + +- **Remove decimal digits** - Decimal digits will be removed one at a time until a format is found which fits. For example, a value of 12345.6789 will be reduced to the following formats until one fits: 12345.679, 12345.68, 12345.7, and 12346. This will stop when the first significant digit is the only one left, so for example value like 0.0001234567890 can only be reduced to 0.0001. + +- **Scientific, 5 decimal digits** - Number is displayed in the form of 0.00000E+00, such as 1.23457E+09, or 1.23457E-04 + +- **Scientific, 4 decimal digits** - Number is displayed in the form of 0.0000E+00, such as 1.2346E+09, or 1.23456E-04 + +- **Scientific, 3 decimal digits** - Number is displayed in the form of 0.000E+00, such as 1.235E+09, or 1.235E-0 + +- **Scientific, 2 decimal digits** - Number is displayed in the form of 0.00E+00, such as 1.23E+09, or 1.23E-04 + +- **Scientific, 1 decimal digits** - Number is displayed in the form of 0.0E+00, such as 1.2E+09, or 1.2E-04 + +- **Scientific, 0 decimal digits** - Number is displayed in the form of 0E+00, such as 1E+09, or 1E-04 + +- **Rounded value** - If the first significant digit is in the decimal potion of the number, the value will be rounded to the nearest integer value. For example, for a value 0.0001234567890, it will be rounded to 0, and the displayed text in cell will be 0. + +- **Hash marks** - If no condensed version of the number can be displayed, hashes (#) will be repeated through the width of the cell. + +- **Empty string** - If no hash marks can fit in the cell, an empty string will be returned as displayed cell text. + +If the format string for numeric value does not contain General or @, there are only the following stages of resizing: Normal value, Hash marks, Empty string + +If a text is used in the cell, the cell displayed text will always be full value, regardless of whether it is cut off or not in the cell. + +The only time when this is not the case is when padding characters are used in format string. Then the value will be displayed as all hash marks when there is not enough room for the text. + +You can set the worksheet's [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions)' [`showFormulasInCells`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showFormulasInCells) property to have formulas be displayed in cells instead of their results, and format strings and cell widths are ignored. Text values display as if their format string were @ , non-integral numeric values display as if their format string were 0.0 and integral numeric values display as if their format string were 0 . + +Additionally, if the value cannot fit, it will not display as all hashes. Display text will still return its full text as the cell text, even though it may not be fully seen. + +The following code snippet demonstrates the usage of the [`getText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#getText) method to get the text as it would be displayed in Excel: + +```ts +var workbook = new Workbook(); +var worksheet = this.workbook.worksheets().add("Sheet1"); + +var cellText = worksheet.rows(0).cells(0).getText(); +``` + +## API References + +- `Add` +- [`CellFillLinearGradient`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfilllineargradient.html) +- [`CellFillPattern`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillpattern.html) +- [`CellFillRectangularGradient`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfillrectangulargradient.html) +- [`CellFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.cellfill.html) +- [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) +- [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions)' +- [`formula`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#formula) +- [`mergedCellsRegions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#mergedCellsRegions) +- [`WorkbookColorInfo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookcolorinfo.html) +- [`WorkbookStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookstyle.html) +- [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) +- [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) +- [`WorksheetColumn`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) +- [`WorksheetRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) +- [`WorksheetRow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetrow.html) +- [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-tables.md new file mode 100644 index 000000000..8bcea8979 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-tables.md @@ -0,0 +1,132 @@ +--- +title: Angular Excel Library| Using Tables | Infragistics +_description: Use Infragistics' Angular excel library's table functionality to format your data in rows and columns. View Ignite UI for Angular excel tutorials for more information! +_keywords: Excel library, tables, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Workbook", "WorksheetTable", "Worksheet", "SortSettings"] +_tocName: Using Tables +_premium: true +--- + +# Angular Using Tables + +The Infragistics Angular Excel Engine's [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#worksheet). + +<!--## Angular Using Tables Example + + +`sample="/excel/excel-library/working-with-tables", height="500", alt="Angular Using Tables Example"` + + +--> + +<div class="divider--half"></div> + +## Adding a Table to a Worksheet + +Worksheet tables in the Infragistics Angular Excel Engine are represented by the [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) object and are added in the worksheet's [`tables`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#tables) collection. In order to add a table, you need to invoke the `Add` method on this collection. In this method, you can specify the region in which you would like to add a table, whether or not the table should contain headers, and optionally, specify the table's style as a [`WorksheetTableStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettablestyle.html) object. + +The following code demonstrates how you can add a table with headers to a [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#worksheet) spanning a region of A1 to G10, where A1 to G1 will be the column headers: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = this.workbook.worksheets().add("Sheet1"); + +worksheet.tables().add("A1:G10", true); +``` + +Once you have added a table, you can modify it by adding or deleting rows and columns by calling the [`insertColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertColumns), [`insertDataRows`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertDataRows), [`deleteColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteColumns), or [`deleteDataRows`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteDataRows) methods on the [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html). You can also set a new table range by using the [`resize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#resize) method of the table. + +The following code snippet shows the usage of these methods: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); +var table = worksheet.tables().add("A1:G10", true); + +//Will add 5 columns at index 1. +table.insertColumns(1, 5); + +//Will add 5 rows at index 0. +table.insertDataRows(0, 5); + +//Will delete 5 columns starting at index 1. +table.deleteColumns(1, 5); + +//Will delete 5 rows starting at index 0. +table.deleteDataRows(0, 5); + +//Will resize the table to be in the region of A1:G15. +table.resize("A1:G15"); +``` + +## Filtering Tables + +Filtering is done by applying a filter on a column in the [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html). When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows meet the criteria of all filters applied. + +If the data in the table is subsequently changed or you change the `Hidden` property of the rows, the filter conditions will not automatically reevaluate. The filter conditions in a table are only reapplied when table column filters are added, removed, modified, or when the [`reapplyFilters`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#reapplyFilters) method is called on the table. + +The following are the filter types available to the columns of your [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html): + +- [`AverageFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.averagefilter.html) - Cells can be filtered based on whether they are above or below the average value of all cells in the column. +- [`CustomFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.customfilter.html) - Cells can be filtered based on one or more custom conditions. +- [`DatePeriodFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.dateperiodfilter.html) - Only cells with dates in a specific month or quarter of any year will be displayed. +- [`FillFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillfilter.html) - Only cells with a specific fill will be displayed. +- [`FixedValuesFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fixedvaluesfilter.html) - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed. +- [`FontColorFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fontcolorfilter.html) - Only cells with a specific font color will be displayed. +- [`RelativeDateRangeFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.relativedaterangefilter.html) - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter. +- [`TopOrBottomFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.toporbottomfilter.html) - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values. +- [`YearToDateFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.yeartodatefilter.html) - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied. + +The following code snippet demonstrates how to apply an "above average" filter to a [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html)'s first column: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); +var table = worksheet.tables().add("A1:G10", true); + +table.columns(0).applyAverageFilter(AverageFilterType.AboveAverage); +``` + +## Sorting Tables + +Sorting is done by setting a sorting condition on a table column. When a sorting condition is set on a column, all sorting conditions in the table will be reevaluated to determine the order of the cells in the table. When cells need to be moved to meet their sort criteria, the entire row of cells in the table is moved as a unit. + +If the data in the table is subsequently changed, the sort conditions do not automatically reevaluate. The sort conditions in a table are only reapplied when sort conditions are added, removed, modified, or when the [`reapplySortConditions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#reapplySortConditions) method is called on the table. When sorting conditions are reevaluated, only the visible cells are sorted. All cells in hidden rows are kept in place. + +In addition to accessing sort conditions from the table columns, they are also exposed off the [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html)'s [`sortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#sortSettings) property's [`sortConditions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sortsettings\`1.html#sortConditions) collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting. + +The following sort condition types are available to set on columns: + +- [`OrderedSortCondition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.orderedsortcondition.html) - Sort cells in an ascending or descending order based on their value. +- [`CustomListSortCondition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.customlistsortcondition.html) - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically. +- [`FillSortCondition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillsortcondition.html) - Sort cells based on whether their fill is a specific pattern or gradient. +- [`FontColorSortCondition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fontcolorsortcondition.html) - Sort cells based on whether their font is a specific color. + +There is also a [`caseSensitive`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sortsettings\`1.html#caseSensitive) property on the [`sortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#sortSettings) of the [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) to determine whether strings should be sorted case sensitively or not. + +The following code snippet demonstrates how to apply an [`OrderedSortCondition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.orderedsortcondition.html) to a [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html): + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = this.workbook.worksheets().add("Sheet1"); +var table = worksheet.tables().add("A1:G10", true); + +table.columns(0).sortCondition = new OrderedSortCondition(SortDirection.Ascending); + +//Alternative: +table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCondition(SortDirection.Ascending)); +``` + +## API References + +- [`deleteColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteColumns) +- [`deleteDataRows`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#deleteDataRows) +- [`FillFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.fillfilter.html) +- [`insertColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertColumns) +- [`insertDataRows`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#insertDataRows) +- [`sortConditions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sortsettings\`1.html#sortConditions) +- [`sortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html#sortSettings) +- [`tables`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#tables) +- [`WorksheetTableStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettablestyle.html) +- [`WorksheetTable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheettable.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-workbooks.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-workbooks.md new file mode 100644 index 000000000..b3871b506 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-workbooks.md @@ -0,0 +1,458 @@ +--- +title: Angular Excel Library| Using Workbooks| Infragistics +_description: Use Infragistics' Angular excel library to create workbooks and worksheets, input data and export the date to Microsoft® Excel. View Ignite UI for Angular excel tutorials for more information! +_keywords: Excel library, workbooks, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Workbook"] +_tocName: Using Workbooks +_premium: true +--- + +# Angular Using Workbooks + +The Infragistics Angular Excel Engine enables you to save data to and load data from Microsoft® Excel®. You can create workbooks and worksheets, input data, and export the data to Excel using the library’s various classes. The Infragistics Angular Excel Engine makes it easy to export the data in your application as an Excel spreadsheet as well as import data from Excel into your application. + +## Angular Using Workbooks Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxButtonModule, IgxGridModule } from "igniteui-angular"; +import { IgxExcelModule } from "igniteui-angular-excel"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxButtonModule, + IgxGridModule, + IgxExcelModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ComponentFactoryResolver, Injector, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; +import { IgxGridComponent } from "igniteui-angular"; +import { TextFormatMode } from "igniteui-angular-excel"; +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { WorksheetTable } from "igniteui-angular-excel"; +import { ExcelUtility } from "./ExcelUtility"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("gridContainer", { read: ViewContainerRef, static: true }) + public gridContainerRef: ViewContainerRef; + public canSave = false; + public wb: Workbook; + public worksheetTables: string[]; + public selectedTable: string; + + constructor(private resolver: ComponentFactoryResolver, private injector: Injector) { + } + + public ngOnInit() { + this.workbookCreate(); + } + + public workbookSave(): void { + if (this.canSave) { + // setting document properties to organize Excel files + this.wb.documentProperties.author = "My Name"; + this.wb.documentProperties.company = "My Company"; + this.wb.documentProperties.title = "Employees and income"; + this.wb.documentProperties.status = "Completed"; + this.wb.documentProperties.category = "Financial"; + this.wb.documentProperties.keywords = "Financial;Company;Employees;income"; + + // setting protection on workbook of Excel file + this.wb.protection.allowEditStructure = true; + this.wb.protection.allowEditWindows = true; + + this.wb.windowOptions.tabBarVisible = true; + + ExcelUtility.save(this.wb, "ExcelWorkbook").then((f) => { + console.log("Saved:" + f); + }, (e) => { + console.error("ExcelUtility.Save Error:" + e); + }); + } + } + + public workbookLoad(input: HTMLInputElement): void { + if (input.files == null || input.files.length === 0) { + return; + } + console.log("Loaded:" + input.files[0].name); + ExcelUtility.load(input.files[0]).then((w) => { this.workbookParse(w); }, + (e) => { + console.error("ExcelUtility.Load Error:" + e); + }); + } + + public workbookParse(wb: Workbook): void { + if (wb === undefined) { + this.worksheetTables = null; + this.selectedTable = null; + } else { + const names = new Array<string>(); + for (const ws of wb.worksheets()) { + for (const tbl of ws.tables()) { + names.push(ws.name + " - " + tbl.name); + } + } + this.worksheetTables = names; + this.selectedTable = names.length > 0 ? names[0] : null; + } + this.wb = wb; + this.canSave = wb != null; + this.onTableChange(this.selectedTable); + } + + public workbookCreate(): void { + const wb = new Workbook(WorkbookFormat.Excel2007); + const employeeSheet = wb.worksheets().add("Employees"); + const employeeHeader = employeeSheet.rows(0); + const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft" ]; + const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David" ]; + const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams" ]; + const countries = ["UK", "France", "USA", "Germany", "Poland", "Brazil" ]; + const titles = ["Sales Rep.", "Engineer", "Administrator", "Manager" ]; + const employeeColumns = ["Name", "Company", "Title", "Age", "Country", "Salary" ]; + for (let col = 0; col < employeeColumns.length; col++) { + employeeSheet.columns(col).width = 5000; + employeeHeader.setCellValue(col, employeeColumns[col]); + } + + for (let i = 1; i < 20; i++) { + const company = this.getItem(companies); + const title = this.getItem(titles); + const country = this.getItem(countries); + const name = this.getItem(firstNames) + " " + this.getItem(lastNames); + const salary = this.getAmount(75000, 95000); + const age = this.getRandom(20, 65); + const wr = employeeSheet.rows(i); + wr.setCellValue(0, name); + wr.setCellValue(1, company); + wr.setCellValue(2, title); + wr.setCellValue(3, age); + wr.setCellValue(4, country); + wr.setCellValue(5, salary); + } + employeeSheet.tables().add("A1:F20", true); + + const expenseSheet = wb.worksheets().add("Expenses"); + const expanseHeader = expenseSheet.rows(0); + const expanseNames = ["Year", "Computers", "Research", "Travel", "Salary", "Software" ]; + let expanseCol = 0; + for (const key of expanseNames) { + expenseSheet.columns(expanseCol).width = 5000; + expanseHeader.setCellValue(expanseCol, key); + for (let i = 1; i < 20; i++) { + const wr = expenseSheet.rows(i); + if (key === "Year") { + wr.setCellValue(expanseCol, 2010 + i); + } else if (key === "Computers") { + wr.setCellValue(expanseCol, this.getAmount(50000, 65000)); + } else if (key === "Research") { + wr.setCellValue(expanseCol, this.getAmount(150000, 165000)); + } else if (key === "Travel") { + wr.setCellValue(expanseCol, this.getAmount(20000, 25000)); + } else if (key === "Salary") { + wr.setCellValue(expanseCol, this.getAmount(4000000, 450000)); + } else if (key === "Software") { + wr.setCellValue(expanseCol, this.getAmount(100000, 150000)); + } + } + expanseCol++; + } + expenseSheet.tables().add("A1:F20", true); + + const incomeSheet = wb.worksheets().add("Income"); + const incomeHeader = incomeSheet.rows(0); + const incomeNames = ["Year", "Phones", "Computers", "Software", "Services", "Royalties" ]; + let incomeCol = 0; + for (const key of incomeNames) { + incomeSheet.columns(incomeCol).width = 5000; + incomeHeader.setCellValue(incomeCol, key); + for (let i = 1; i < 20; i++) { + const wr = incomeSheet.rows(i); + if (key === "Year") { + wr.setCellValue(incomeCol, 2010 + i); + } else if (key === "Software") { + wr.setCellValue(incomeCol, this.getAmount(700000, 850000)); + } else if (key === "Computers") { + wr.setCellValue(incomeCol, this.getAmount(250000, 265000)); + } else if (key === "Royalties") { + wr.setCellValue(incomeCol, this.getAmount(400000, 450000)); + } else if (key === "Phones") { + wr.setCellValue(incomeCol, this.getAmount(6000000, 650000)); + } else if (key === "Services") { + wr.setCellValue(incomeCol, this.getAmount(700000, 750000)); + } + } + incomeCol++; + } + incomeSheet.tables().add("A1:F20", true); + this.workbookParse(wb); + } + + public onTableChange(newValue: string) { + if (!newValue) { + this.onTableSelected(null); + } else { + const parts = newValue.split(" - "); + const worksheetName = parts[0]; + const tableName = parts[1]; + for (const ws of this.wb.worksheets()) { + if (ws.name === worksheetName) { + for (const tbl of ws.tables()) { + if (tbl.name === tableName) { + this.onTableSelected(tbl); + return; + } + } + } + } + } + } + + public onTableSelected(table: WorksheetTable) { + this.gridContainerRef.clear(); + + if (table) { + const headers = new Array<string>(); + // expanseCollect the keys for the data + for (const expanseCol of table.columns()) { + headers.push(expanseCol.name); + } + + const ws = table.worksheet; + const region = table.dataAreaRegion; + const data = new Array<any>(); + + for (let r = region.firstRow; r <= region.lastRow; r++) { + const row = {}; + const excelRow = ws.rows(r); + for (let c = 0; c < headers.length; c++) { + row[headers[c]] = excelRow.getCellText(c + region.firstColumn, TextFormatMode.IgnoreCellWidth); + } + data.push(row); + } + + const gridFactory = this.resolver.resolveComponentFactory(IgxGridComponent); + const gridRef = this.gridContainerRef.createComponent(gridFactory); + gridRef.instance.autoGenerate = true; + gridRef.instance.data = data; + } + } + + public getRandom(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + public getItem(array: string[]): string { + const i = this.getRandom(0, array.length - 1); + return array[i]; + } + + public getAmount(min: number, max: number) { + const n = this.getRandom(min, max); + const s = n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); + return "$" + s.replace(".00", ""); + } +} +``` +```html +<div > + <div class="workbookOptions"> + + <div class="workbookOperations"> + <button class="workbookButton" (click)="workbookCreate()"> + <label>Create Workbook</label> + </button> + <button class="workbookButton" (click)="workbookSave()" [disabled]="!canSave"> + <label>Save Workbook</label> + </button> + <div class="workbookSelector"> + <button class="workbookButton"> + <label for="workbookSelector">Load Workbook</label> + </button> + <input class="workbookButton" id="workbookSelector" type="file" style="visibility:hidden;" + accept=".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx" + (change)='workbookLoad($event.target)' > + </div> + </div> + <div class="workbookDetails"> + <label class="label">Select Table:</label> + <select size="3" [(ngModel)]="selectedTable" (ngModelChange)="onTableChange($event)"> + <option *ngFor="let tblName of worksheetTables"> + {{tblName}} + </option> + </select> + </div> + </div> + + <div class="workbookPreview"> + <label class="label"> Data Preview: </label> + <template #gridContainer></template> + </div> +</div> +``` +```scss +.workbookOptions { + display: "block"; + width: 100%; +} + +.workbookOperations { + width: 160px; + padding-left: 5px; + padding-right: 5px; + float:left; +} + +.workbookDetails { + float:left; + width: 70%; + height: 100px; + padding-left: 5px; + padding-right: 5px; +} + +.workbookDetails > select { + display: inline-block; + width: 100%; + height: 90px; +} + +.label { + margin-top: 8px; + font-weight: bold; +} + +.workbookPreview { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + width: 100%; + height: 200px; +} + +.workbookButton { + display: block; + width: 150px; + margin-top: 5px; +} + +.workbookSelector { + display: inline-block; + width: 150px; + margin-top: 5px; +} +``` + + +<div class="divider--half"></div> + +## Change Default Font + +First create a new instance of [`IWorkbookFont`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworkbookfont.html). Next, add the new font to the [`styles`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#styles) collection of the [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html). This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook. + +```ts +var workbook = new Workbook(); +var font: IWorkbookFont; +font = workbook.styles().normalStyle.styleFormat.font; +font.name = "Times New Roman"; +font.height = 16 * 20; +``` + +## Setting Workbook Properties + +Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics Angular Excel Library to set these properties using the [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) object’s [`documentProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#documentProperties) property. The available properties are: + +- `Author` + +- `Title` + +- `Subject` + +- `Keywords` + +- `Category` + +- `Status` + +- `Comments` + +- `Company` + +- `Manager` + +The following code demonstrates how to create a workbook and set its `title` and `status` document properties. + +```ts +var workbook = new Workbook(); +workbook.documentProperties.title = "Expense Report"; +workbook.documentProperties.status = "Complete"; +``` + +## Workbook Protection + +The workbook protection feature allows you to protect the structure of the workbook. That is, the ability for a user to add, rename, delete, hide, and reorder the worksheets in that workbook. + +The protection is not enforced via the Infragistics Excel Engine's object model. It is a responsibility of the UI visualizing this object model to honor these protection settings and allow or restrict the user from performing the corresponding operations. + +Protection is applied to a workbook by invoking its `protect` method. + +When a [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) is protected without a password, the end user may unprotect the [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) in Excel without having to supply a password. To programmatically unprotect a [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html), one may use the `unprotect` method. + +When a [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) is protected, the values of the properties of the [`WorkbookProtection`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookprotection.html) instance from this [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html)'s `protection` property indicate the disabled operations. + +If [`isProtected`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#isProtected) is already true, the `protect` method will be ignored. + +```ts +var workbook = new Workbook(); +workbook.protect(false, false); +``` + +Check if a workbook has protection. This read-only property returns true if the workbook has any protection set using the overloads of the Protect method. + +```ts +var workbook = new Workbook(); +var protect = workbook.isProtected; +``` + +This read-only property returns an object of type WorkbookProtection which contains properties for obtaining each protection setting individually. + +```ts +var workbook = new Workbook(); +var protection = workbook.protection; +``` + +## API References + +- [`documentProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#documentProperties) +- [`WorkbookProtection`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbookprotection.html) +- [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) +- [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-worksheets.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-worksheets.md new file mode 100644 index 000000000..713967d43 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-using-worksheets.md @@ -0,0 +1,483 @@ +--- +title: Angular Excel Library| Using Worksheets | Infragistics +_description: Use Infragistics' Angular excel library to input data by working with the worksheet's row and cells and setting their corresponding values. Easily transfer data from Ignite UI for Angular excel to your application! +_keywords: Excel library, worksheet, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Workbook", "Worksheet", "WorksheetCell", "DisplayOptions", "WorksheetFilterSettings", "IWorksheetCellFormat"] +_tocName: Using Worksheets +_premium: true +--- + +# Angular Using Worksheets + +The Infragistics Angular Excel Engine's [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) is where your data is kept. You can input data by working with the Worksheet's rows and cells and setting their corresponding values. The [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) allows you to filter, sort, and customize the formats of the cells, as shown below. + +## Angular Using Worksheets Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxExcelModule } from "igniteui-angular-excel"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxExcelModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component } from "@angular/core"; +import { Color } from "igniteui-angular-core"; +import { CustomFilterCondition, ExcelComparisonOperator, FormatConditionTextOperator, OrderedSortCondition, RelativeIndex, SortDirection, WorkbookColorInfo } from "igniteui-angular-excel"; +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { ExcelUtility } from "./ExcelUtility"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + // TODO if needed, uncomment to get access to IG control + // @ViewChild("chart") + // public chart: IgxCategoryChartComponent; + // @ViewChild("chart") + // public chart: IgxDataChartComponent; + // @ViewChild("grid") + // public chart: IgxGridComponent; + + public data: any; + public isSorted: boolean; + public isFiltered: boolean; + public isProtected: boolean; + public showGridlines: boolean; + public showHeaders: boolean; + public applyConditionalFormatting: boolean; + public workbook: Workbook; + + constructor() { + this.showGridlines = true; + this.showHeaders = true; + } + + public ngOnInit() { + } + + public ngAfterViewInit(): void { + // TODO bind excel data to the chart + // this.chart.dataSource = this.data; + } + + public initData(): void { + const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft"]; + const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David"]; + const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams"]; + const cities = ["London", "Paris", "Boston", "Berlin"]; + const countries = ["UK", "France", "USA", "Germany", "Poland", "Brazil"]; + const titles = ["Sales Rep.", "Owner", "Administrator", "Manager"]; + const streets = ["Main St", "Madison St", "Broad Way"]; + const headers = ["Company Name", + "Contact Title", + "Country", + "City", + "Contact Name", + "Address", + "Postal Code", + "Customer ID", + "Salary", + "Age"]; + const dataSource = new Array<any>(); + // generating excel data source + this.workbook = new Workbook(WorkbookFormat.Excel2007); + const sheet = this.workbook.worksheets().add("Sheet1"); + + for (let i = 0; i < headers.length; i++) { + sheet.rows(0).cells(i).value = headers[i]; + } + + for (let i = 1; i < 20; i++) { + const companyName = this.getItem(companies); + const contactTitle = this.getItem(titles); + const country = this.getItem(countries); + const city = this.getItem(cities); + const contactName = this.getItem(firstNames) + " " + this.getItem(lastNames); + const address = this.getRandom(10, 60) + " " + this.getItem(streets); + const postalCode = this.getRandom(100, 400) + " " + this.getRandom(50, 90); + const customerID = "CID-" + this.getRandom(500, 900); + const salary = this.getSalary(85000, 200000); + const age = this.getRandom(20, 65); + const dataItem = [ + companyName, + contactTitle, + country, + city, + contactName, + address, + postalCode, + customerID, + salary, + age + ]; + for (let j = 0; j < dataItem.length; j++) { + sheet.rows(i).cells(j).value = dataItem[j]; + } + } + } + + public exportData() { + this.initData(); + const sheet = this.workbook.worksheets(0); + sheet.defaultColumnWidth = 220 * 20; + + if (this.isSorted) { + sheet.sortSettings.setRegion("A2:A20"); + sheet.sortSettings.sortConditions().addItem( + new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending)); + } + if (this.isFiltered) { + sheet.filterSettings.setRegion("C1:C20"); + sheet.filterSettings.applyCustomFilter(0, new CustomFilterCondition(ExcelComparisonOperator.Equals, "USA")); + } + if (this.isProtected) { + sheet.protect(); + } + if (!this.showHeaders) { + sheet.displayOptions.showRowAndColumnHeaders = false; + } + if (!this.showGridlines) { + sheet.displayOptions.showGridlines = false; + } + if (this.applyConditionalFormatting) { + const green = new Color(); + green.colorString = "Green"; + + const blue = new Color(); + blue.colorString = "Blue"; + + const orange = new Color(); + orange.colorString = "Orange"; + + const format = sheet.conditionalFormats().addTextCondition( + "A1:A20", "Amazon", FormatConditionTextOperator.Contains); + + const format2 = sheet.conditionalFormats().addTextCondition( + "A1:A20", "IBM", FormatConditionTextOperator.Contains); + + const format3 = sheet.conditionalFormats().addTextCondition( + "A1:A20", "Tesla", FormatConditionTextOperator.Contains); + + format.cellFormat.font.colorInfo = new WorkbookColorInfo(green); + format2.cellFormat.font.colorInfo = new WorkbookColorInfo(blue); + format3.cellFormat.font.colorInfo = new WorkbookColorInfo(orange); + } + + ExcelUtility.save(this.workbook, "worksheetsSample"); + } + + public getRandom(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + public getItem(array: string[]): string { + const i = this.getRandom(0, array.length - 1); + return array[i]; + } + + public getSalary(min: number, max: number) { + const n = this.getRandom(min, max); + const s = n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); + return "$" + s.replace(".00", ""); + } +} +``` +```html +<div class="container"> + <div class="options"> + <button class="optionItem" (click)="exportData()">Export Excel File with Settings</button> + <label class="optionItem"><input [(ngModel)]="isSorted" type="checkbox" />Apply Sort</label> + <label class="optionItem"><input [(ngModel)]="isFiltered" type="checkbox" />Apply Filter</label> + <label class="optionItem"><input [(ngModel)]="isProtected" type="checkbox" />Protect Worksheet</label> + <label class="optionItem"><input [(ngModel)]="showGridlines" type="checkbox" />Show Gridlines</label> + <label class="optionItem"><input [(ngModel)]="showHeaders" type="checkbox" />Show Row and Column Headers</label> + <label class="optionItem"><input [(ngModel)]="applyConditionalFormatting" type="checkbox" />Apply Conditional Formatting</label> + </div> +</div> +``` +```scss +.container { + display: flex; + flex-flow: column; + height: 100%; + min-width: 300px; +} + +.options { + margin-top: 5px; + margin-bottom: 5px; + margin-right: 10px; + margin-left: 10px; +} + +.optionItem { + margin-left: 10px; + display: inline-block; + vertical-align: center; +} +``` + + +<div class="divider--half"></div> + +<!-- Angular, React, WebComponents --> + +The following code shows the imports needed to use the code-snippets below: + +```ts +import { Workbook } from "igniteui-angular-excel"; +import { Worksheet } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { Color } from "igniteui-angular-core"; + +import { CustomFilterCondition } from "igniteui-angular-excel"; +import { ExcelComparisonOperator } from "igniteui-angular-excel"; +import { FormatConditionTextOperator } from "igniteui-angular-excel"; +import { OrderedSortCondition } from "igniteui-angular-excel"; +import { RelativeIndex } from "igniteui-angular-excel"; +import { SortDirection } from "igniteui-angular-excel"; +import { WorkbookColorInfo } from "igniteui-angular-excel"; +``` + +<!-- end: Angular, React, WebComponents --> + +## Configuring the Gridlines + +The gridlines are used to visually separate the cells in the worksheet. You may show or hide the gridlines and also change their color. + +You can show or hide the gridlines using the [`showGridlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showGridlines) property of the [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) of the worksheet. The following code demonstrates how you can hide the gridlines in your worksheet: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.displayOptions.showGridlines = false; +``` + +You can configure the gridlines' color using the [`gridlineColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#gridlineColor) property of the [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) of the worksheet. The following code demonstrates how you can change the gridlines in your worksheet to be red: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.displayOptions.gridlineColor = "Red"; +``` + +## Configuring the Headers + +The column and row headers are used to visually identify columns and rows. They are also used to visually highlight the currently selected cell or cell region. + +You can show or hide the column and row headers using the [`showRowAndColumnHeaders`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showRowAndColumnHeaders) property of the [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) of the worksheet. The following code demonstrates how you can hide the row and column headers: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.displayOptions.showRowAndColumnHeaders = false; +``` + +## Configuring Editing of the Worksheet + +By default, the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) objects that you save will be editable. You can disable editing of a worksheet by protecting it using the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object's [`protect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#protect) method. This method has a lot of nullable `bool` arguments that determine which pieces are protected, and one of these options is to allow editing of objects, which if set to **false** will prevent editing of the worksheet. + +The following code demonstrates how to disable editing in your worksheet: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.protect(); +``` + +You can also use the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object's [`protect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#protect) method to protect a worksheet against structural changes. + +When protection is set, you can set the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object's [`locked`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#locked) property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) object's [`locked`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#locked) property to **false** on a specific [`WorksheetColumn`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. + +The following code demonstrates how you can do this: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.protect(); +worksheet.columns(0).cellFormat.locked = false; +``` + +## Filtering Worksheet Regions + +Filtering is done by setting a filter condition on a worksheet's [`WorksheetFilterSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html) which can be retrieved from the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object's [`filterSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#filterSettings) property. Filter conditions are only reapplied when they're added, removed, modified, or when the [`reapplyFilters`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#reapplyFilters) method is called on the worksheet. They are not constantly evaluated as data within the region changes. + +You can specify the region to apply the filter by using the [`setRegion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#setRegion) method on the [`WorksheetFilterSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html) object. + +Below is a list of methods and their descriptions that you can use to add a filter to a worksheet: + +| Method | Description | +| --------------|-------------| +|[`applyAverageFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyAverageFilter)|Represents a filter which can filter data based on whether the data is below or above the average of the entire data range.| +|[`applyDatePeriodFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyDatePeriodFilter)|Represents a filter which can filter dates in a Month, or quarter of any year.| +|[`applyFillFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyFillFilter)|Represents a filter which will filter cells based on their background fills. This filter specifies a single CellFill. Cells of with this fill will be visible in the data range. All other cells will be hidden.| +|`ApplyFixedValuesFilter`|Represents a filter which can filter cells based on specific, fixed values, which are allowed to display.| +|[`applyFontColorFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyFontColorFilter)|Represents a filter which will filter cells based on their font colors. This filter specifies a single color. Cells with this color font will be visible in the data range. All other cells will be hidden.| +|[`applyIconFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyIconFilter)|Represents a filter which can filter cells based on their conditional formatting icon.| +|[`applyRelativeDateRangeFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyRelativeDateRangeFilter)|Represents a filter which can filter date cells based on dates relative to the when the filter was applied.| +|[`applyTopOrBottomFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyTopOrBottomFilter)|Represents a filter which can filter in cells in the upper or lower portion of the sorted values.| +|[`applyYearToDateFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyYearToDateFilter)|Represents a filter which can filter in date cells if the dates occur between the start of the current year and the time when the filter is evaluated.| +|[`applyCustomFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html#applyCustomFilter)|Represents a filter which can filter data based on one or two custom conditions. These two filter conditions can be combined with a logical "and" or a logical "or" operation.| + +You can use the following code snippet as an example to add a filter to a worksheet region: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.filterSettings.setRegion("Sheet1!A1:A10"); +worksheet.filterSettings.applyAverageFilter(0, AverageFilterType.AboveAverage); +``` + +## Freezing and Splitting Panes + +You can freeze rows at the top of your worksheet or columns at the left using the freezing panes features. Frozen rows and columns remain visible at all times while the user is scrolling. The frozen rows and columns are separated from the rest of the worksheet by a single, solid line, which cannot be removed. + +In order to enable pane freezing, you need to set the [`panesAreFrozen`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#panesAreFrozen) property of the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object's [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) to **true**. You can then specify the rows or columns to freeze by using the `FrozenRows` and `FrozenColumns` properties of the display options [`frozenPaneSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#frozenPaneSettings), respectively. + +You can also specify the first row in the bottom pane or first column in the right pane using the `FirstRowInBottomPane` and `FirstColumnInRightPane` properties, respectively. + +The following code snippet demonstrates how to use the freezing panes features in a worksheet: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.displayOptions.panesAreFrozen = true; + +worksheet.displayOptions.frozenPaneSettings.frozenRows = 3; +worksheet.displayOptions.frozenPaneSettings.frozenColumns = 1; + +worksheet.displayOptions.frozenPaneSettings.firstColumnInRightPane = 2; +worksheet.displayOptions.frozenPaneSettings.firstRowInBottomPane = 6; +``` + +## Setting the Worksheet Zoom Level + +You can change the zoom level for each worksheet independently using the `MagnificationInNormalView` property on the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object's [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions). This property takes a value between 10 and 400 and represents the percentage of zoom that you wish to apply. + +The following code demonstrates how you can do this: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.displayOptions.magnificationInNormalView = 300; +``` + +## Worksheet Level Sorting + +Sorting is done by setting a sorting condition on a worksheet level object on either columns or rows. You can sort columns or rows in ascending or descending order. + +This is done by specifying a region and sort type to the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object's [`WorksheetSortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetsortsettings.html) that can be retrieved using the [`sortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#sortSettings) property of the sheet. + +The sort conditions in a sheet are only reapplied when sort conditions are added, removed, modified, or when the [`reapplySortConditions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetsortsettings.html#reapplySortConditions) method is called on the worksheet. Columns or rows will be sorted within the region. "Rows" is the default sort type. + +The following code snippet demonstrates how to apply a sort to a region of cells in a worksheet: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending)); +``` + +## Worksheet Protection + +You can protect a worksheet by calling the [`protect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#protect) method on the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations: + +- Editing of cells. +- Editing of objects such as shapes, comments, charts, or other controls. +- Editing of scenarios. +- Filtering of data. +- Formatting of cells. +- Inserting, deleting, and formatting of columns. +- Inserting, deleting, and formatting of rows. +- Inserting of hyperlinks. +- Sorting of data. +- Usage of pivot tables. + +You can remove worksheet protection by calling the [`unprotect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html#unprotect) method on the [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object. + +The following code snippet shows how to enable protection of all of the above-listed user operations: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +worksheet.protect(); +``` + +## Worksheet Conditional Formatting + +You can configure the conditional formatting of a [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) object by using the many "Add" methods exposed on the [`conditionalFormats`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#conditionalFormats) collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to. + +Many of the conditional formats that you can add to your worksheet have a [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property that determines the way that the [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property such as [`fill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#fill) and [`font`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/interfaces/igniteui_angular_excel.iworksheetcellformat.html#font) to determine the background and font settings of your cells under a particular conditional format, respectively. + +There are a few conditional formats that do not have a [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) property, as their visualization on the worksheet cell behaves differently. These conditional formats are the [`DataBarConditionalFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html), [`ColorScaleConditionalFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html), and [`IconSetConditionalFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.iconsetconditionalformat.html). + +When loading a pre-existing [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) from Excel, the formats will be preserved when that [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) is loaded. The same is true for when you save the [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) out to an Excel file. + +The following code example demonstrates usage of conditional formats on a worksheet: + +```ts +var workbook = new Workbook(WorkbookFormat.Excel2007); +var worksheet = workbook.worksheets().add("Sheet1"); + +var color = new Color(); +color.colorString = "Red"; + +var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage); +format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); +``` + +## API References + +- [`cellFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#cellFormat) +- [`ColorScaleConditionalFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.colorscaleconditionalformat.html) +- [`conditionalFormats`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#conditionalFormats) +- [`DataBarConditionalFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.databarconditionalformat.html) +- [`displayOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#displayOptions) +- [`filterSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#filterSettings) +- [`showGridlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showGridlines) +- [`showRowAndColumnHeaders`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.displayoptions.html#showRowAndColumnHeaders) +- [`sortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#sortSettings) +- [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) +- [`WorksheetCell`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) +- [`WorksheetColumn`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcolumn.html) +- [`WorksheetFilterSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetfiltersettings.html) +- [`WorksheetSortSettings`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetsortsettings.html) +- [`worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html#worksheet) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-working-with-charts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-working-with-charts.md new file mode 100644 index 000000000..97ddbb838 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-working-with-charts.md @@ -0,0 +1,251 @@ +--- +title: Angular Excel Library| Working with Charts | Infragistics +_description: Use the Infragistics' Angular excel library's chart feature to add visual charting representations of data trends across regions of cells in a worksheet. Visualize Ignite UI for Angular excel data in over 70 chart types! +_keywords: Excel library, charts, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Workbook", "Worksheet"] +_tocName: Working with Charts +_premium: true +--- + +# Angular Working with Charts + +The Infragistics Angular Excel Engine's [`WorksheetChart`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetchart.html) functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet. For example, if you want to see your Excel data in a region of cells visualized as a column, line, or over 70 other chart types, this feature can help you to achieve that. + +## Angular Working with Charts Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxGridModule } from "igniteui-angular"; +import { IgxCategoryChartModule } from "igniteui-angular-charts"; +import { IgxExcelModule } from "igniteui-angular-excel"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGridModule, + IgxCategoryChartModule, + IgxExcelModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component } from "@angular/core"; +import { AxisType } from "igniteui-angular-excel"; +import { ChartType } from "igniteui-angular-excel"; +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { WorksheetRegion } from "igniteui-angular-excel"; +import { ExcelUtility } from "./ExcelUtility"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + public excelData: any[]; + public chartData: any[]; + + constructor() { + this.initializeData(); + } + + public initializeData() { + const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; + const groups = ["Heating", "Electricity", "Water", "Taxes"]; + + const expanseKey = "Expense"; + const monthKey = "Month"; + const data = new Array<any>(); + // generating excel data source + for (const group of groups) { + const r = {}; + r[expanseKey] = group; + let index = 0; + for (const month of months) { + const x = index * 15 * Math.PI / 180; + const rand = this.getRandom(50, 100); + const heat = Math.abs(Math.cos(x)) * 300 + rand; + const ac = Math.abs(Math.sin(x)) * 500 + rand; + if (group === "Heating") { + r[month] = Math.round(heat); + } else if (group === "Electricity") { + r[month] = Math.round(ac); + } else if (group === "Water") { + r[month] = this.getRandom(100, 150); + } else if (group === "Taxes") { + r[month] = this.getRandom(700, 800); + } + index = index + 1; + } + data.push(r); + } + this.excelData = data; + // since we will export the data transposed (plotByRows will be true) + // if we want to show the data that way in the ui then we need a transposed + // version of the data for the category chart to bind to + const chartData = new Array<any>(); + for (const month of months) { + const r = {}; + r[monthKey] = month; + for (const item of data) { + r[item[expanseKey]] = item[month]; + } + chartData.push(r); + } + this.chartData = chartData; + } + + public getRandom(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + public exportData() { + const headers = Object.keys(this.excelData[0]); + const wb = new Workbook(WorkbookFormat.Excel2007); + const ws = wb.worksheets().add("Sheet1"); + ws.defaultColumnWidth = 200 * 20; + + // reserving the [0] row where we will place the chart shape + // the [1] will be the headers. so data will start on [2] + const firstDataRow = 2; + const headerRow = ws.rows(firstDataRow - 1); + for (let c = 0; c < headers.length; c++) { + headerRow.setCellValue(c, headers[c]); + } + + for (let r = 0; r < this.excelData.length; r++) { + const xlRow = ws.rows(r + firstDataRow); + const dataRow = this.excelData[r]; + for (let c = 0; c < headers.length; c++) { + xlRow.setCellValue(c, dataRow[headers[c]]); + } + } + const indexRow = firstDataRow - 1; + const indexData = firstDataRow + this.excelData.length - 1; + const indexHeader = headers.length - 1; + + const tableRegion = new WorksheetRegion(ws, indexRow, 0, indexData, indexHeader); + const table = ws.tables().add(tableRegion.toString(), true); + + // set some extra height for the row where the chart will be + ws.rows(0).height = 5000; + const chart = ws.shapes().addChart(ChartType.ColumnClustered, + ws.rows(0).cells(0), { x: 0, y: 0 }, + ws.rows(0).cells(headers.length - 1), { x: 100, y: 100 }); + chart.setSourceData(table.wholeTableRegion.toString(), true); + + chart.axisCollection(AxisType.Category).axisBetweenCategories = true; + + ExcelUtility.save(wb, "chartSample"); + } + + public ngOnInit() { + } + + public ngAfterViewInit(): void { + } + +} +``` +```html +<div class="container"> + <div class="options"> + <button (click)="exportData()">Export To Excel File</button> + </div> + <div class="chart"> + <igx-category-chart #chart + height="60%" width="100%" + yAxisMinimumValue=0 + xAxisInterval=1 + chartType="column" + brushes="#4f81bd, #c0504d, #9bbb59, #8064a2" + outlines="#4f81bd, #c0504d, #9bbb59, #8064a2" + thickness=0 + [dataSource]="chartData"> + </igx-category-chart> + + <igx-grid [data]="excelData" height="40%" width="100%" [autoGenerate]="false"> + <igx-column [field]="'Expense'" [resizable]="true" width="10%"></igx-column> + <igx-column [field]="'Jan'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Feb'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Mar'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Apr'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'May'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Jun'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Jul'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Aug'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Sep'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Oct'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Nov'" [resizable]="true" width="7.5%"></igx-column> + <igx-column [field]="'Dec'" [resizable]="true" width="7.5%"></igx-column> + </igx-grid> + </div> +</div> +``` +```scss +.container { + display: flex; + flex-flow: column; + height: 100%; + min-width: 300px; +} + +.chart { + flex: 1; + overflow: hidden; +} +``` + + +> \[!Note] +> The XLSX format is required. Other formats are not supported at this time. + +<div class="divider--half"></div> + +## Usage + +In order to add a chart to a worksheet, you must use the `AddChart` method of the worksheet's shapes collection. In this method, you can specify the chart type that you wish to use, the top-left cell, the bottom-right cell, and the percentages of those cells that you wish for the chart to take up. + +The `AddChart` method returns the worksheet chart element to be added to the worksheet. Once you have this, you can use the [`setSourceData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetchart.html#setSourceData) method on the chart to set a cell address of the region of worksheet cells that you wish to use as a data source, as well as whether or not you want to switch the mapping of columns and rows to the X and Y axis. + +There are over 70 supported chart types, including `Line`, `Area`, [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_grids_grids.igxcolumncomponent.html), and `Pie`. + +The following code demonstrates how to use the Excel charting feature. The below snippet will add a column chart to between the first cell and the 13th cell in the first row of the worksheet. The source data is then set for the data in the region of A2:M6, switching the mapping of columns and rows for the X and Y axis of the column chart: + +```ts +var chart = ws.shapes().addChart(ChartType.ColumnClustered, + ws.rows(0).cells(0), { x: 0, y: 0 }, + ws.rows(0).cells(12), { x: 100, y: 100 }); + +chart.setSourceData("A2:M6", true); +``` + +## API References + +- `AddChart` +- `Area` +- [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_grids_grids.igxcolumncomponent.html) +- `Line` +- `Pie` +- [`WorksheetChart`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetchart.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-working-with-sparklines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-working-with-sparklines.md new file mode 100644 index 000000000..5294e6a4f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library-working-with-sparklines.md @@ -0,0 +1,258 @@ +--- +title: Angular Excel Library| Working with Sparklines | Infragistics +_description: Use sparkline charts in Infragistics' Angular excel library to visual data trends across a region of cells in your worksheet. View Ignite UI for Angular excel engine tutorials! +_keywords: Excel library, sparkline chart, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Workbook"] +_tocName: Working with Sparklines +_premium: true +--- + +# Angular Working with Sparklines + +The Infragistics Angular Excel Library has support for adding sparklines to an Excel Worksheet. These can be used to show simple visual representations of data trends across a region of cells of data in your worksheet. For example, if you wanted to see your Excel data across a particular cell region visualized as a simple column or line sparkline chart, this feature can help you to achieve that. + +## Angular Working with Sparklines Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxButtonModule, IgxGridModule } from "igniteui-angular"; +import { IgxSparklineModule } from "igniteui-angular-charts"; +import { IgxExcelModule } from "igniteui-angular-excel"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxButtonModule, + IgxGridModule, + IgxSparklineModule, + IgxExcelModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from "@angular/core"; +import { IgxGridComponent } from "igniteui-angular"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { SparklineType } from "igniteui-angular-excel"; +import { Workbook } from "igniteui-angular-excel"; +import { ExcelUtility } from "./ExcelUtility"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("grid", { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data: any[]; + + constructor() { + } + + public exportGrid() { + const headers = ["Orders", "Company Name", "Contact Name", "Contact Title", "Country"]; + const keys = ["Orders", "CompanyName", "ContactName", "ContactTitle", "Country"]; + const orderHeaders = ["Customer ID", "Order ID", "Freight"]; + + const wb = new Workbook(WorkbookFormat.Excel2007); + const exportSheet = wb.worksheets().add("Sheet1"); + const ordersSheet = wb.worksheets().add("Orders"); + + exportSheet.defaultColumnWidth = 300 * 20; + exportSheet.defaultRowHeight = 50 * 20; + + for (let i = 0; i < headers.length; i++) { + exportSheet.rows(0).cells(i).value = headers[i]; + } + + for (let i = 0; i < this.data.length; i++) { + const item = this.data[i]; + const orders = item.Orders; + + for (let j = 0; j < orders.length; j++) { + ordersSheet.rows(i).cells(j).value = orders[j].Freight; + } + } + + for (let i = 0; i < this.data.length; i++) { + + const index = (i + 1).toString(); + const dataItem = this.data[i]; + + for (let j = 0; j < headers.length; j++) { + if (j === 0) { + exportSheet.sparklineGroups().add(SparklineType.Column, + "A" + (i + 2).toString(), "Orders!A" + index + ":F" + index); + } else { + exportSheet.rows(i + 1).cells(j).value = dataItem[keys[j]]; + } + } + } + + ExcelUtility.save(wb, "myWorksheet"); + } + + public ngOnInit(): void { + const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft" ]; + const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David" ]; + const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams", "Novak" ]; + const cities = ["London", "Paris", "Boston", "Berlin" ]; + const countries = ["UK", "France", "USA", "Germany" ]; + const titles = ["Sales Rep.", "Owner", "Administrator", "Manager" ]; + const streets = ["Main St", "Madison St", "Broad Way" ]; + const shippings = ["Federal Ex", "UPS Air", "UPS Ground" ]; + + const data = new Array<any>(); + // generating excel data source + for (let i = 0; i < 10; i++) { + const companyName = this.getItem(companies); + const contactTitle = this.getItem(titles); + const country = this.getItem(countries); + const city = this.getItem(cities); + const shipping = this.getItem(shippings); + const contactName = this.getItem(firstNames) + " " + this.getItem(lastNames); + const employeeName = this.getItem(firstNames) + " " + this.getItem(lastNames); + const address = this.getRandom(10, 60) + " " + this.getItem(streets); + const postalCode = this.getRandom(100, 400) + " " + this.getRandom(50, 90); + const customerID = "CID-" + this.getRandom(500, 900); + const phone = this.getRandom(500, 900) + "-" + this.getRandom(200, 900) + "-" + this.getRandom(2000, 9000); + const fax = this.getRandom(500, 900) + "-" + this.getRandom(200, 900) + "-" + this.getRandom(2000, 9000); + + const companyOrders = new Array<any>(); + for (let o = 0; o < 6; o++) { + const reqDate = "2020-06-" + this.getRandom(1, 25) + "T" + this.getRandom(10, 12) + ":00:00"; + const shipDate = "2020-06-" + this.getRandom(1, 25) + "T" + this.getRandom(10, 12) + ":00:00"; + const orderDate = "2020-05-" + this.getRandom(1, 25) + "T" + this.getRandom(10, 12) + ":00:00"; + const order = { + ContactName: contactName, + CustomerID: customerID, + EmployeeID: this.getRandom(1000, 8000), + EmployeeName: employeeName, + Freight: this.getRandom(1, 10), + OrderDate: orderDate, + OrderID: this.getRandom(3000, 5000), + RequiredDate: reqDate, + ShipAddress: address, + ShipCity: city, + ShipCountry: country, + ShipName: companyName, + ShipPostalCode: postalCode, + ShipRegion: null, + ShipVia: this.getRandom(1, 10), + ShippedDate: shipDate, + ShipperID: this.getRandom(1, 10), + ShipperName: shipping, + TotalItems: this.getRandom(10, 20), + TotalPrice: this.getRandom(400, 600) + }; + companyOrders.push(order); + } + const dataItem = { + Address: address, + City: city, + CompanyName: companyName, + ContactName: contactName, + ContactTitle: contactTitle, + Country: country, + Fax: fax, + ID: customerID, + Orders: companyOrders, + Phone: phone, + PostalCode: postalCode, + Region: null + }; + data.push(dataItem); + } + this.data = data; + + } + public getRandom(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1) + min); + } + public getItem(array: string[]): string { + const i = this.getRandom(0, array.length - 1); + return array[i]; + } +} +``` +```html +<div class="container"> + <div class="options"> + <button (click)="exportGrid()">Export to Excel</button> + </div> + <igx-grid #grid [data]="data" [autoGenerate]="false" height="500px" width="100%"> + <igx-column field="Orders" header="Order History" resizable=true> + <ng-template igxCell let-cell="cell" let-val> + <igx-sparkline height="100%" width="100%" minimum=0 displayType="column" [dataSource]="val" valueMemberPath="Freight"> + </igx-sparkline> + </ng-template> + </igx-column> + <igx-column field="CompanyName" header="Company Name"></igx-column> + <igx-column field="ContactName" header="Contact Name"></igx-column> + <igx-column field="ContactTitle" header="Contact Title"></igx-column> + <igx-column field="Country" header="Country"></igx-column> + </igx-grid> +</div> +``` +```scss +.container { + display: flex; + flex-flow: column; + height: 100%; + min-width: 300px; +} + +.options { + margin-top: 5px; + margin-bottom: 5px; + margin-right: 10px; + margin-left: 10px; +} +``` + + +<div class="divider--half"></div> + +## Supported Sparklines + +The following is a list of the supported predefined sparkline types. + +- Line +- Column +- Stacked (Win/Loss) + +The following code demonstrates how to programmatically add Sparklines to a Worksheet via the sparklineGroups collection: + +```ts +var workbook: Workbook; +var sheet1 = workbook.worksheets().add("Sparklines"); +var sheet2 = workbook.worksheets().add("Data"); +sheet1.sparklineGroups().add(SparklineType.Line, "Sparklines!A1:A1", "Data!A2:A11"); +sheet1.sparklineGroups().add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A11"); +workbook.save(workbook, "Sparklines.xlsx"); +``` + +## API References + +- [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library.md new file mode 100644 index 000000000..df9de794c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-library.md @@ -0,0 +1,422 @@ +--- +title: Angular Excel Library| Data Spreadsheet and Table | Infragistics +_description: Use Infragistics' Angular excel library to work with spreadsheet data using Microsoft Excel features. Learn how easily you can transfer data from excel to your application using Ignite UI for Angular excel library! +_keywords: Excel library, Ignite UI for Angular, Infragistics, workbook +_license: commercial +mentionedTypes: ["Workbook", "Worksheet", "Cell", "Formula"] +_tocName: Excel Library +--- + +# Angular Excel Library Overview + +The Infragistics Angular Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook), [`Worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html), `Cell`, [`Formula`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.formula.html) and many more. The Infragistics Angular Excel Library makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application. + +## Angular Excel Library Example + +```typescript +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxExcelModule } from "igniteui-angular-excel"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + IgxExcelModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ComponentFactoryResolver, Injector, OnInit } from "@angular/core"; +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { ExcelUtility } from "./ExcelUtility"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public canSave = false; + public wb: Workbook; + public worksheetTables: string[]; + public selectedTable: string; + + constructor(private resolver: ComponentFactoryResolver, private injector: Injector) { + } + + public ngOnInit() { + this.workbookCreate(); + } + + public workbookSave(): void { + if (this.canSave) { + // setting document properties to organize Excel files + this.wb.documentProperties.author = "My Name"; + this.wb.documentProperties.company = "My Company"; + this.wb.documentProperties.title = "Employees and income"; + this.wb.documentProperties.status = "Completed"; + this.wb.documentProperties.category = "Financial"; + this.wb.documentProperties.keywords = "Financial;Company;Employees;income"; + + // setting protection on workbook of Excel file + this.wb.protection.allowEditStructure = true; + this.wb.protection.allowEditWindows = true; + + this.wb.windowOptions.tabBarVisible = true; + + ExcelUtility.save(this.wb, "ExcelWorkbook").then((f) => { + console.log("Saved:" + f); + }, (e) => { + console.error("ExcelUtility.Save Error:" + e); + }); + } + } + + public workbookLoad(input: HTMLInputElement): void { + if (input.files == null || input.files.length === 0) { + return; + } + console.log("Loaded:" + input.files[0].name); + ExcelUtility.load(input.files[0]).then((w) => { this.workbookParse(w); }, + (e) => { + console.error("ExcelUtility.Load Error:" + e); + }); + } + + public workbookParse(wb: Workbook): void { + if (wb === undefined) { + this.worksheetTables = null; + this.selectedTable = null; + } else { + const names = new Array<string>(); + for (const ws of wb.worksheets()) { + for (const tbl of ws.tables()) { + names.push(ws.name + " - " + tbl.name); + } + } + this.worksheetTables = names; + this.selectedTable = names.length > 0 ? names[0] : null; + } + this.wb = wb; + this.canSave = wb != null; + } + + public workbookCreate(): void { + const wb = new Workbook(WorkbookFormat.Excel2007); + const employeeSheet = wb.worksheets().add("Employees"); + const employeeHeader = employeeSheet.rows(0); + const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft" ]; + const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David" ]; + const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams" ]; + const countries = ["UK", "France", "USA", "Germany", "Poland", "Brazil" ]; + const titles = ["Sales Rep.", "Engineer", "Administrator", "Manager" ]; + const employeeColumns = ["Name", "Company", "Title", "Age", "Country", "Salary" ]; + for (let col = 0; col < employeeColumns.length; col++) { + employeeSheet.columns(col).width = 5000; + employeeHeader.setCellValue(col, employeeColumns[col]); + } + + for (let i = 1; i < 20; i++) { + const company = this.getItem(companies); + const title = this.getItem(titles); + const country = this.getItem(countries); + const name = this.getItem(firstNames) + " " + this.getItem(lastNames); + const salary = this.getAmount(75000, 95000); + const age = this.getRandom(20, 65); + const wr = employeeSheet.rows(i); + wr.setCellValue(0, name); + wr.setCellValue(1, company); + wr.setCellValue(2, title); + wr.setCellValue(3, age); + wr.setCellValue(4, country); + wr.setCellValue(5, salary); + } + employeeSheet.tables().add("A1:F20", true); + + const expenseSheet = wb.worksheets().add("Expenses"); + const expanseHeader = expenseSheet.rows(0); + const expanseNames = ["Year", "Computers", "Research", "Travel", "Salary", "Software" ]; + let expanseCol = 0; + for (const key of expanseNames) { + expenseSheet.columns(expanseCol).width = 5000; + expanseHeader.setCellValue(expanseCol, key); + for (let i = 1; i < 20; i++) { + const wr = expenseSheet.rows(i); + if (key === "Year") { + wr.setCellValue(expanseCol, 2010 + i); + } else if (key === "Computers") { + wr.setCellValue(expanseCol, this.getAmount(50000, 65000)); + } else if (key === "Research") { + wr.setCellValue(expanseCol, this.getAmount(150000, 165000)); + } else if (key === "Travel") { + wr.setCellValue(expanseCol, this.getAmount(20000, 25000)); + } else if (key === "Salary") { + wr.setCellValue(expanseCol, this.getAmount(4000000, 450000)); + } else if (key === "Software") { + wr.setCellValue(expanseCol, this.getAmount(100000, 150000)); + } + } + expanseCol++; + } + expenseSheet.tables().add("A1:F20", true); + + const incomeSheet = wb.worksheets().add("Income"); + const incomeHeader = incomeSheet.rows(0); + const incomeNames = ["Year", "Phones", "Computers", "Software", "Services", "Royalties" ]; + let incomeCol = 0; + for (const key of incomeNames) { + incomeSheet.columns(incomeCol).width = 5000; + incomeHeader.setCellValue(incomeCol, key); + for (let i = 1; i < 20; i++) { + const wr = incomeSheet.rows(i); + if (key === "Year") { + wr.setCellValue(incomeCol, 2010 + i); + } else if (key === "Software") { + wr.setCellValue(incomeCol, this.getAmount(700000, 850000)); + } else if (key === "Computers") { + wr.setCellValue(incomeCol, this.getAmount(250000, 265000)); + } else if (key === "Royalties") { + wr.setCellValue(incomeCol, this.getAmount(400000, 450000)); + } else if (key === "Phones") { + wr.setCellValue(incomeCol, this.getAmount(6000000, 650000)); + } else if (key === "Services") { + wr.setCellValue(incomeCol, this.getAmount(700000, 750000)); + } + } + incomeCol++; + } + incomeSheet.tables().add("A1:F20", true); + this.workbookParse(wb); + } + + public getRandom(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + public getItem(array: string[]): string { + const i = this.getRandom(0, array.length - 1); + return array[i]; + } + + public getAmount(min: number, max: number) { + const n = this.getRandom(min, max); + const s = n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); + return "$" + s.replace(".00", ""); + } +} +``` +```html +<div > + <div class="workbookOptions"> + + <div class="workbookOperations"> + <div class="workbookSelector"> + <button class="workbookButton"> + <label for="workbookSelector">Load Workbook</label> + </button> + <input class="workbookButton" id="workbookSelector" type="file" style="visibility:hidden;" + accept=".xls, .xlt, .xlsx, .xlsm, .xltm, .xltx" + (change)='workbookLoad($event.target)' > + </div> + <button class="workbookButton" (click)="workbookSave()" [disabled]="!canSave"> + <label>Save Workbook</label> + </button> + </div> + </div> +</div> +``` +```scss +.workbookOptions { + display: "block"; + width: 100%; +} + +.workbookOperations { + width: 160px; + padding-left: 5px; + padding-right: 5px; + float:left; +} + +.workbookDetails { + float:left; + width: 70%; + height: 100px; + padding-left: 5px; + padding-right: 5px; +} + +.workbookDetails > select { + display: inline-block; + width: 100%; + height: 90px; +} + +.label { + margin-top: 8px; + font-weight: bold; +} + +.workbookPreview { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + width: 100%; + height: 200px; +} + +.workbookButton { + display: block; + width: 150px; + margin-top: 5px; +} + +.workbookSelector { + display: inline-block; + width: 150px; + margin-top: 5px; +} +``` + + +<div class="divider--half"></div> + +<!-- Angular, React, WebComponents --> + +## Dependencies + +When installing the excel package, the core package must also be installed. + +```cmd +npm install --save igniteui-angular-core +npm install --save igniteui-angular-excel +``` + +## Component Modules + +The Angular excel library requires the following modules: + +```ts +// app.module.ts +import { IgxExcelModule } from 'igniteui-angular-excel'; + +@NgModule({ + imports: [ + // ... + IgxExcelModule, + // ... + ] +}) +export class AppModule {} +``` + +## Modules Implementation + +The Excel Library contains 5 modules that you can use to limit bundle size of your app: + +- **IgxExcelCoreModule** – This contains the object model and much of the excel infrastructure +- **IgxExcelFunctionsModule** – This contains the majority of the functions for formula evaluations, such as Sum, Average, Min, Max, etc. The absence of this module won’t cause any issues with formula parsing if the formula is to be calculated. For example, if you apply a formula like “=SUM(A1:A5)” and ask for the Value of the cell, then you would get a #NAME! error returned. This is not an exception throw – it’s an object that represents a particular error since formulas can result in errors. +- **IgxExcelXlsModule** – This contains the load and save logic for xls (and related) type files – namely the Excel97to2003 related WorkbookFormats. +- **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. +- **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. + +<!-- end: Angular, React, WebComponents --> + +## Supported Versions of Microsoft Excel + +The following is a list of the supported versions of Excel.\*\* + +- Microsoft Excel 97 + +- Microsoft Excel 2000 + +- Microsoft Excel 2002 + +- Microsoft Excel 2003 + +- Microsoft Excel 2007 + +- Microsoft Excel 2010 + +- Microsoft Excel 2013 + +- Microsoft Excel 2016 + +## Load and Save Workbooks + +Now that the Excel Library module is imported, next step is to load a workbook. + +<!-- Angular, React, WebComponents --> + +In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook). + +<!-- end: Angular, React, WebComponents --> + +In order to load and save [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) objects, you can utilize the save method of the actual [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) object, as well as its static `Load` method. + +```ts +import { Workbook } from "igniteui-angular-excel"; +import { WorkbookSaveOptions } from "igniteui-angular-excel"; +import { WorkbookFormat } from "igniteui-angular-excel"; +import { ExcelUtility } from "ExcelUtility"; + +var workbook = ExcelUtility.load(file); +ExcelUtility.save(workbook, "fileName"); +``` + +<!--Angular --> + +## Managing Heap + +Due to the size of the Excel Library, it's recommended to disable the source map generation. + +Modify `angular.json` by setting the `vendorSourceMap` option under architect => build => options and under serve => options: + +```ts + "architect": { + "build": { + "builder": "...", + "options": { + "vendorSourceMap": false, + "outputPath": "dist", + "index": "src/index.html", + "main": "src/main.ts", + "tsConfig": "src/tsconfig.app.json", + // ... + }, + // ... + }, + "serve": { + "builder": "...", + "options": { + "vendorSourceMap": false, + "browserTarget": "my-app:build" + }, + // ... + }, + // ... + } +``` + +<!--end:Angular--> + +## API References + +- `Load` +- `WorkbookInProcessRuntime` +- [`Worksheet`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html) +- [`workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-utility.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-utility.md new file mode 100644 index 000000000..cabeae2bf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/excel-utility.md @@ -0,0 +1,122 @@ +--- +title: Angular Excel Library | Excel Utility | Infragistics +_description: Use Infragistics' Angular excel library to work with spreadsheet data using Microsoft Excel features. Learn how easily you can transfer data from excel to your application using Ignite UI for Angular excel library! +_keywords: excel library, Ignite UI for Angular, Infragistics, saving files, loading files, WorkbookFormat +_license: commercial +mentionedTypes: ["Workbook", "WorkbookFormat", "WorkbookSaveOptions"] +_tocName: Excel Utility +_premium: true +--- + +# Angular Excel Utility + +This topic provides utility function for loading and saving Microsoft Excel files using [Excel Library](excel-library.md) + +<!-- Angular --> + +```ts +import { saveAs } from "file-saver"; // npm package: "file-saver": "^1.3.8" +import { Workbook } from 'igniteui-angular-excel'; +import { WorkbookFormat } from 'igniteui-angular-excel'; +import { WorkbookSaveOptions } from 'igniteui-angular-excel'; + +export class ExcelUtility { + public static getExtension(format: WorkbookFormat) { + switch (format) { + case WorkbookFormat.StrictOpenXml: + case WorkbookFormat.Excel2007: + return ".xlsx"; + case WorkbookFormat.Excel2007MacroEnabled: + return ".xlsm"; + case WorkbookFormat.Excel2007MacroEnabledTemplate: + return ".xltm"; + case WorkbookFormat.Excel2007Template: + return ".xltx"; + case WorkbookFormat.Excel97To2003: + return ".xls"; + case WorkbookFormat.Excel97To2003Template: + return ".xlt"; + } + } + + public static load(file: File): Promise<Workbook> { + return new Promise<Workbook>((resolve, reject) => { + ExcelUtility.readFileAsUint8Array(file).then((a) => { + Workbook.load(a, null, (w) => { + resolve(w); + }, (e) => { + reject(e); + }); + }, (e) => { + reject(e); + }); + }); + } + + public static loadFromUrl(url: string): Promise<Workbook> { + return new Promise<Workbook>((resolve, reject) => { + const req = new XMLHttpRequest(); + req.open("GET", url, true); + req.responseType = "arraybuffer"; + req.onload = (d) => { + const data = new Uint8Array(req.response); + Workbook.load(data, null, (w) => { + resolve(w); + }, (e) => { + reject(e); + }); + }; + req.send(); + }); + } + + public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> { + return new Promise<string>((resolve, reject) => { + const opt = new WorkbookSaveOptions(); + opt.type = "blob"; + + workbook.save(opt, (d) => { + const fileExt = ExcelUtility.getExtension(workbook.currentFormat); + const fileName = fileNameWithoutExtension + fileExt; + saveAs(d as Blob, fileName); + resolve(fileName); + }, (e) => { + reject(e); + }); + }); + } + + private static readFileAsUint8Array(file: File): Promise<Uint8Array> { + return new Promise<Uint8Array>((resolve, reject) => { + const fr = new FileReader(); + fr.onerror = (e) => { + reject(fr.error); + }; + + if (fr.readAsBinaryString) { + fr.onload = (e) => { + const rs = (fr as any).resultString; + const str: string = rs != null ? rs : fr.result; + const result = new Uint8Array(str.length); + for (let i = 0; i < str.length; i++) { + result[i] = str.charCodeAt(i); + } + resolve(result); + }; + fr.readAsBinaryString(file); + } else { + fr.onload = (e) => { + resolve(new Uint8Array(fr.result as ArrayBuffer)); + }; + fr.readAsArrayBuffer(file); + } + }); + } +} +``` + +## API References + +- [`WorkbookFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_excel.workbookformat.html) +- [`WorkbookSaveOptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbooksaveoptions.html) +- [`Workbook`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.workbook.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md new file mode 100644 index 000000000..a1dd1145e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md @@ -0,0 +1,757 @@ +--- +title: Angular Expansion Panel – Ignite UI for Angular - MIT license +_description: Use our Angular expansion panel which provides an easily configurable expandable component with two states - collapsed and expanded. Try it now. +_keywords: angular expansion panel, angular expansion panel component, angular UI components, igniteui for angular, infragistics +_license: MIT +_tocName: Expansion Panel +--- + +# Angular Expansion Panel Component Overview + +Ignite UI for Angular provides developers with one of the most useful and easy-to-use layout components - Expansion Panel. This feature-rich component is used to create an expandable/collapsible detailed summary view. The content can include Angular Expansion Panel animation, text, icons, header, action bar, and other elements. +<p class="highlight"> + +Ignite UI Expansion Panel [igx-expansion-panel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) is a lightweight Angular accordion component which can be rendered in two states - collapsed or expanded. The Expansion Panel in Angular can be toggled using mouse click, or keyboard interactions. You can also combine multiple Angular Expansion Panels into Angular accordion. +</p> + +## Angular Expansion Panel Example + +We've created this simple Angular Expansion Panel Example using Ignite UI Angular. See how the sample works. + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-expansion-sample-1', + styleUrls: ['./expansion-sample-1.component.scss'], + templateUrl: './expansion-sample-1.component.html', + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] +}) +export class ExpansionPanelSample1Component { + @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true }) + public panel: IgxExpansionPanelComponent; +} +``` +```html +<igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Golden Retriever + </igx-expansion-panel-title> + <igx-expansion-panel-description> + Medium-large gun dog + </igx-expansion-panel-description> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + </igx-expansion-panel-body> +</igx-expansion-panel> +``` + +<div class="divider--half"></div> + +## Getting Started with Ignite UI for Angular Expansion Panel + +To get started with the Ignite UI for Angular Drop Down component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxExpansionPanelModule` in your **app.module.ts** file. + +```typescript +// app.module.ts +... +import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel'; +// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [..., IgxExpansionPanelModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxExpansionPanelComponent` as a standalone dependency, or use the [`IGX_EXPANSION_PANEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel'; +// import { IGX_EXPANSION_PANEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <igx-expansion-panel> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Golden Retriever + </igx-expansion-panel-title> + <igx-expansion-panel-description> + Medium-large gun dog + </igx-expansion-panel-description> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, + such as ducks and upland game birds, during hunting and shooting parties. + The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. + Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + </igx-expansion-panel-body> + </igx-expansion-panel> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_EXPANSION_PANEL_DIRECTIVES] + /* or imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] */ +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Expansion Panel module or directives imported, you can start using the `igx-expansion-panel` component. + +## Using the Angular Expansion Panel + +The table below shows all the available markup parts for the Angular Expansion Panel. + +| Tag Name | Description | +| :-------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | +| `igx-expansion-panel` | The component host - stores header and body. | +| `igx-expansion-panel-header` | Stores the component header. This is always visible. Stores title and description as well as any additional content | +| `igx-expansion-panel-title` | Use it to set expansion panel title. | +| `igx-expansion-panel-description` | It can be used to provide a short summary. The description will always appear after the title (if the title is set). | +| `igx-expansion-panel-icon` | Use it to change the default expand/collapse icon. | +| `igx-expansion-panel-body` | This is the expandable container and it's only visible when the panel is expanded. | + + +## Properties Binding and Events + +We can add some logic to our component to make it show/hide the `igx-expansion-panel-description` depending on the current state of the panel. +We can do this by binding the description to the control [`collapsed`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html#collapsed) property: + +```typescript +// in expansion-panel.component.ts +import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel'; +// import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({...}) +export class ExpansionPanelComponent { + @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent}) + public panel: IgxExpansionPanelComponent; +} +``` + +```html +<!-- in expansion-component.component.html --> +<igx-expansion-panel> + <igx-expansion-panel-header> + Golden Retriever + <igx-expansion-panel-description *ngIf="panel.collapsed"> + Medium-large gun dog + </igx-expansion-panel-description> + </igx-expansion-panel-header> + ... +</igx-expansion-panel> +``` + +The following code sample will show the short description only when the component is in its collapsed state. +If we want to add more complex functionality depending on the component state, we could also bind to an event emitter. + +```typescript +// in expansion-panel.component.ts + +@Component({...}) +export class ExpansionPanelComponent { + ... + public handleExpansion(args: {event: Event}): void { + ... // Some functionality + } +} +``` + +```html +<!-- in expansion-component.component.html --> +<igx-expansion-panel (onExpanded)="handleExpansion($event)" (contentCollapsed)="handleCollapse($event)"></igx-expansion-panel> +``` + +Below we have the results: + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxToastComponent } from 'igniteui-angular/toast'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-expansion-sample-2', + styleUrls: ['./expansion-sample-2.component.scss'], + templateUrl: './expansion-sample-2.component.html', + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxToastComponent] +}) +export class ExpansionPanelSample2Component { + @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true }) + public panel: IgxExpansionPanelComponent; + @ViewChild(IgxToastComponent, { read: IgxToastComponent, static: true }) + public eventToast: IgxToastComponent; + public readMore = 'https://en.wikipedia.org/wiki/Hummingbird'; + public handleExpansion(evt?: {event: Event}) { + this.eventToast.close(); + console.log('Expanded event thrown ', (evt ? 'with event: ' + evt.event : 'with no event')); + this.eventToast.open('Expanded Event Fired!'); + } + + public handleCollapse(evt?: {event: Event}) { + this.eventToast.close(); + console.log('Collapsed event thrown ', (evt ? 'with event: ' + evt.event : 'with no event')); + this.eventToast.open('Collapsed Event Fired!'); + } +} +``` +```html +<igx-expansion-panel (contentExpanded)="handleExpansion($event)" (contentCollapsed)="handleCollapse($event)"> + <igx-expansion-panel-header> + <igx-expansion-panel-title> + Golden Retriever + </igx-expansion-panel-title> + @if (panel.collapsed) { + <igx-expansion-panel-description> + Medium-large gun dog + </igx-expansion-panel-description> + } + </igx-expansion-panel-header> + <igx-expansion-panel-body> + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + </igx-expansion-panel-body> +</igx-expansion-panel> + +<igx-toast [displayTime]="1500" #eventToast></igx-toast> +``` + + +## Component Customization + +The [`IgxExpansionPanelComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) allows for easy customization of [the header](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelheadercomponent.html). +Configuring the position of the header icon can be done through the [`iconPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelheadercomponent.html#iconPosition) input on the `igx-expansion-panel-header`. The possible options for the icon position are **left**, **right** and **none**. The next code sample demonstrates how to configure the component's button to go on the _right_ side. + +```html +<!-- in expansion-component.component.html --> +<igx-expansion-panel> + <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header> + ... +</igx-expansion-panel> +``` + +>[!NOTE] +> The [`iconPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelheadercomponent.html#iconPosition) property works with `RTL` - e.g. an icon set to show up in **right** will show in the leftmost part of the header when RTL is on. + +The default icon for the toggle state of the control can be templated. +We can do that by passing content in an `igx-expansion-panel-icon` tag: + +```html +<!-- in expansion-component.component.html --> +<igx-expansion-panel> + <igx-expansion-panel-header [iconPosition]="'right'"> + ... + <igx-expansion-panel-icon> + <span class="example-icon" *ngIf="panel.collapsed">Show More</span> + <span class="example-icon" *ngIf="!panel.collapsed">Show Less</span> + </igx-expansion-panel-icon> + </igx-expansion-panel-header> + ... +</igx-expansion-panel> +``` + +Our Angular Expansion Panel will now render "Show More" when the panel is collapsed and "Show Less" once it's fully expanded. + +The `IgxExpansionPanel` control allows all sorts of content to be added inside of the `igx-expansion-panel-body`. It can render [`IgxGrid`](grid/grid.md)s, [`IgxCombo`](combo.md), charts and even other expansion panels! + +For the sake of simplicity let's add some basic markup to the body of our expansion panel. + +```html +<!-- in expansion-panel.component.html --> +... +<igx-expansion-panel-body> + <div class="example-content"> + <img [src]="imgSource" alt="dog-image"> + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties. The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + <a igxButton="outlined" target="_blank" [href]="readMore">Read more</a> + </div> +</igx-expansion-panel-body> +... +``` + +Lets see the result from all the above changes: + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-expansion-sample-3', + styleUrls: ['./expansion-sample-3.component.scss'], + templateUrl: './expansion-sample-3.component.html', + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective] +}) + +export class ExpansionPanelSample3Component { + @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true }) + public panel: IgxExpansionPanelComponent; + public imgSource = 'https://i.ibb.co/6ZdY7cn/Untitled-design-3.png'; + public readMore = 'https://en.wikipedia.org/wiki/Golden_Retriever'; +} +``` +```html +<div class="sample-holder"> + <igx-expansion-panel class="my-expansion-panel"> + <igx-expansion-panel-header [iconPosition]="'right'"> + <igx-expansion-panel-title> + Golden Retriever + </igx-expansion-panel-title> + <igx-expansion-panel-description> + Medium-large gun dog + </igx-expansion-panel-description> + <igx-expansion-panel-icon> + @if (panel.collapsed) { + <span class="example-icon">Show more</span> + } + @if (!panel.collapsed) { + <span class="example-icon">Show Less</span> + } + </igx-expansion-panel-icon> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <div class="example-content"> + <img height="100" [src]="imgSource" alt=""> + <span> + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + </span> + <a igxButton="outlined" target="_blank" [href]="readMore">Read more</a> + </div> + </igx-expansion-panel-body> + </igx-expansion-panel> +</div> +``` +```scss +.sample-holder { + display: flex; + align-items: flex-start; + justify-content: flex-start; + height: 100%; +} + +.my-expansion-panel { + max-width: 500px; + min-width: 300px; + width: 100%; + border: 1px solid rgba(171, 171, 171, 0.3) +} + +.example-content { + display: flex; + flex-direction: column; + align-items: flex-start; + border-top: 1px solid rgba(171, 171, 171, 0.3); + span { + display: block; + margin-bottom: 16px; + } +} + +a { + text-decoration: none; +} + +img { + width: 100%; + margin-bottom: 8px; +} +``` + + +## Styling + +### Expansion Panel Theme Property Map + +Changing the `$header-background` and `$body-background` properties automatically updates the following dependent properties: + +<table class="collapsible-table"> + <thead> + <tr> + <th>Primary Property</th> + <th>Dependent Property</th> + <th>Description</th> + </tr> + </thead> + <tbody class="group"> + <tr class="primary"> + <td><details><summary><strong>$header-background</strong></summary></details></td> + <td>$header-title-color</td> + <td>The panel header title text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$header-icon-color</td> + <td>The panel header icon color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$header-description-color</td> + <td>The panel header description text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$header-focus-background</td> + <td>The panel header focus background color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-text-color</td> + <td>The panel disabled text color.</td> + </tr> + <tr class="dependent"> + <td></td> + <td>$disabled-description-color</td> + <td>The panel disabled header description text color.</td> + </tr> + <tr class="primary"> + <td><strong>$body-background</strong></td> + <td>$body-color</td> + <td>The panel body text color.</td> + </tr> + </tbody> +</table> + +### Palettes & Colors + +First we create a custom palette which can later be passed to our component: + +```scss +// In real life, this should be in our main sass file so we can share the palette between all components. +// In our case, it's in the component SCSS file "expansion-styling.component.scss". + +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; + +// Add your brand colors. +$my-primary-color:#353a4b; +$my-secondary-color: #ffd351; +$my-surface-color: #efefef; + +// Create custom palette. +$my-color-palette: palette( + $primary: $my-primary-color, + $secondary: $my-secondary-color, + $surface: $my-surface-color +); +``` + +### Creating the Component Theme + +Now let's create our component theme and pass the `$my-color-palette` palette from the above sniped. + +```scss +// In expansion-styling.component.scss +// Create expansion panel theme. +$custom-panel-theme: expansion-panel-theme( + // Styling parameters. + $header-background: color($my-color-palette, "primary", 700), + $header-focus-background: color($my-color-palette, "primary", 700), + $header-title-color: color($my-color-palette, "secondary"), + $header-icon-color: color($my-color-palette, "secondary"), + $body-background: color($my-color-palette, "primary", 700), + $body-color: color($my-color-palette, "secondary", 100), + $border-radius: .5 +); +``` + +If we prefer instead of creating a palette, we can assign the colors directly to the expansion-panel-theme function as arguments. If the `title-color`, `icon-color`, or other foreground properties are not explicitly provided, they will be automatically assigned to either black or white - whichever offers better contrast with the background. + +```scss +$custom-panel-theme: expansion-panel-theme( + $header-background: #353a4b, + $header-focus-background: #353a4b, + $header-title-color: #ffd351, + $header-icon-color: #ffd351, + ... +); +``` + +>[!NOTE] +> To see all the available parameters for styling trough the [`theming`](themes/sass/component-themes.md) engine check the [`API documentation`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme) + +### Applying the Component Theme + +Now to apply the component theme all that's left is to include `tokens` mixin and pass the `$custom-panel-theme` map. + +```scss +// In expansion-styling.component.scss +:host { + @include tokens($custom-panel-theme); +} +``` + +To find out more on how you can use Ignite UI theming engine [`click here`](themes/sass/component-themes.md) + +### Demo + +```typescript +import {Component} from '@angular/core'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-expansion-styling', + styleUrls: ['./expansion-styling.component.scss'], + templateUrl: './expansion-styling.component.html', + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxButtonDirective] +}) + +export class ExpansionPanelStylingComponent { + public imgSource = 'https://i.ibb.co/6ZdY7cn/Untitled-design-3.png'; + public readMore = 'https://en.wikipedia.org/wiki/Golden_Retriever'; +} +``` +```html +<div class="sample-holder"> + <igx-expansion-panel class="my-expansion-panel"> + <igx-expansion-panel-header [iconPosition]="'right'"> + <igx-expansion-panel-title> + Golden Retriever + </igx-expansion-panel-title> + <igx-expansion-panel-description> + Medium-large gun dog + </igx-expansion-panel-description> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + <div class="example-content"> + <img height="100" [src]="imgSource" alt=""> + <span> + The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. + </span> + <a igxButton="contained" target="_blank" [href]="readMore">Read more</a> + </div> + </igx-expansion-panel-body> + </igx-expansion-panel> +</div> +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// Create expansion panel theme +$custom-panel-theme: expansion-panel-theme( + $header-background: #353a4b, + $body-background: #353a4b, + $header-title-color: #ffd351, + $header-icon-color: #ffd351, +); + +:host { + @include tokens($custom-panel-theme); +} +``` + +### Styling with Tailwind + +You can style the expansion panel using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-expansion-panel`, `dark-expansion-panel`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [expansion-panel-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme). The syntax is as follows: + +```html +<igx-expansion-panel + class="!light-expansion-panel + ![--header-background:#4F6A5A] + ![--body-background:#A3C7B2]" +> + ... +</igx-expansion-panel> +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your expansion panel should look like this: + +<div class="sample-container loading" style="height:440px"> + <iframe id="expansion-panel-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/layouts/expansion-tailwind-styling' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe> +</div> + +## Angular Expansion Panel Animations + +### Using specific animation + +It is possible to use other than default animation when expanding and collapsing the component. +Assuming the igxExpansionPanel is already imported in `app.module.ts` as previously described, you can create a custom animation setting object and set it to be used in the Ignite UI for Angular Expansion Panel. The approach requires the [`useAnimation`](https://angular.io/api/animations/useAnimation) method and the specific animations to be used so we start importing these and defining the animation settings like: + +```typescript +// in expansion-panel.component.ts +import { useAnimation } from '@angular/animations'; +import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel'; +import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; +// import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package + +@Component({...}) +export class ExpansionPanelComponent { + @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent}) + public panel: IgxExpansionPanelComponent; + + public animationSettingsCustom = { + closeAnimation: useAnimation(slideOutRight, { + params: { + duration: '100ms', + toPosition: 'translateX(25px)' + } + }), + openAnimation: useAnimation(slideInLeft, { + params: { + duration: '500ms', + fromPosition: 'translateX(-15px)', + startOpacity: 0.1 + } + }) + }; + + public collapsed() { + return this.panel && this.panel.collapsed; + } +} +``` + +As you can see, we are going to use [`slideInLeft`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations#mixin-slide-in-left) and [`slideOutRight`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. + +The sample shows some user information and the key point here is passing the animation settings to the component like: +`[animationSettings] = "animationSettingsCustom"` + +```html +<!-- in expansion-panel.component.html --> +... +<igx-expansion-panel [animationSettings] = "animationSettingsCustom" class="my-expansion-panel"> + <igx-expansion-panel-header> + <igx-expansion-panel-title class="sample-title">Angular</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. + </igx-expansion-panel-body> +</igx-expansion-panel> +... +``` + +You can see the results below: + +```typescript +import { useAnimation } from '@angular/animations'; +import { Component, ViewChild } from '@angular/core'; + +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'app-expansion-sample-5', + styleUrls: ['./expansion-sample-5.component.scss'], + templateUrl: './expansion-sample-5.component.html', + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] +}) +export class ExpansionPanelSample5Component { + + @ViewChild(IgxExpansionPanelComponent, { static: true }) + public panel: IgxExpansionPanelComponent; + + public animationSettingsCustom = { + closeAnimation: useAnimation(slideOutRight, { + params: { + duration: '100ms', + toPosition: 'translateX(25px)' + } + }), + openAnimation: useAnimation(slideInLeft, { + params: { + duration: '500ms', + fromPosition: 'translateX(-15px)', + startOpacity: 0.1 + } + }) + }; + + public user = { + email: '', + fullName: '', + phone: undefined + }; + + public collapsed() { + return this.panel && this.panel.collapsed; + } +} +``` +```html +<div class="sample-holder"> + <igx-expansion-panel [animationSettings] = "animationSettingsCustom" class="my-expansion-panel"> + <igx-expansion-panel-header> + <igx-expansion-panel-title class="sample-title">Angular</igx-expansion-panel-title> + </igx-expansion-panel-header> + <igx-expansion-panel-body> + Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. + </igx-expansion-panel-body> + </igx-expansion-panel> +</div> +``` +```scss +.sample-holder { + display: flex; + align-items: flex-start; + justify-content: flex-start; + height: 100%; +} + +.my-expansion-panel { + max-width: 500px; + min-width: 300px; + width: 100%; + border: 1px solid rgba(171, 171, 171, 0.3) +} +``` + + +## Multiple panel scenario + +See the [igxAccordion topic](accordion.md) + +## API Reference + +- [IgxExpansionPanel API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelcomponent.html) +- [IgxExpansionPanelHeader API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelheadercomponent.html) +- [IgxExpansionPanelBody API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexpansionpanelbodycomponent.html) +- [IgxExpansionPanel Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-expansion-panel) + +## Theming Dependencies + +- [IgxExpansionPanel Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md new file mode 100644 index 000000000..84e9db5a0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-csv.md @@ -0,0 +1,290 @@ +--- +title: Export to CSV/TSV Component - Native Angular | Ignite UI for Angular +_description: Users can export their data for editing or offline presentation can do so in CSV or TSV format with the Export to CSV/TSV Ignite UI for Angular component. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Data Grid, Angular Grid Control, Angular Grid Component, CSV Export, TSV Export +_license: commercial +_tocName: CSV Exporter +_premium: true +--- + +# CSV Exporter + +<p class="highlight"> + +The IgniteUI CSV Exporter service can export data in a Character Separated Values format from both raw data (array) or from an [**IgxGrid**](grid/grid.md), [**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.md) and [**IgxTreeGrid**](treegrid/tree-grid.md). +The exporting functionality is encapsulated in the [`IgxCsvExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html) class. +</p> +<div class="divider"></div> + +## Angular CSV Exporter Example + + +```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, inject } from '@angular/core'; + +import { CsvFileTypes, IgxCsvExporterOptions, IgxCsvExporterService } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-csv-export', + styleUrls: ['./csv-export.component.scss'], + templateUrl: './csv-export.component.html', + imports: [IgxButtonDirective] +}) +export class CsvExportComponent { + private csvExportService = inject(IgxCsvExporterService); + + + public localData = [ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } + ]; + + public exportCsvButtonHandler() { + const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions('CSVExportFileFromData', CsvFileTypes.CSV); + this.csvExportService.exportData(this.localData, opt); + } + + public exportTsvButtonHandler() { + const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions('CSVExportFileFromData', CsvFileTypes.TSV); + this.csvExportService.exportData(this.localData, opt); + } + +} +``` +```html +<p> + Press the "Export CSV Data" button below to export an array as .csv file.<br /> + <button igxButton="contained" (click)="exportCsvButtonHandler()">Export CSV Data</button> + <br /> + Press the "Export TSV Data" button below to export an array as .tsv file.<br /> + <button igxButton="contained" (click)="exportTsvButtonHandler()">Export TSV Data</button><br /> +</p> +``` + +<div class="divider--half"></div> + +To start using the IgniteUI CSV Exporter first import the [`IgxCsvExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html) in the app.module.ts file and add the service to the `providers` array: + +```typescript +// app.module.ts + +... +import { IgxCsvExporterService } from 'igniteui-angular/grids/core'; +// import { IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + providers: [ IgxCsvExporterService ] +}) + +export class AppModule {} +``` + +> [!Note] +> In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. + +To initiate an export process you may use the handler of a button in your component's template. + +```html +<button (click)="exportButtonHandler()">Export Data to CSV</button> +``` + +You may access the exporter service by defining an argument of type [`IgxCsvExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html) in the component's constructor and the Angular framework will provide an instance of the service. To export some data in CSV format you need to invoke the exporter service's [`exportData`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html#exportdata) method. This method accepts as a first argument the data you want to export and the second argument is of type [`IgxCsvExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html) and allows you to configure the export process. + +Here is the code which will execute the export process in the component's typescript file: + +```typescript +// component.ts + +... +import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core'; +// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from '@infragistics/igniteui-angular'; for licensed package +... + +public localData = [ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } +]; + +constructor(private csvExportService: IgxCsvExporterService) { +} + +public exportButtonHandler() { + this.csvExportService.exportData(this.localData, new IgxCsvExporterOptions('ExportedDataFile'), CsvFileTypes.CSV); +} + +``` + +If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.csv" which contains the data from the `localData` array in CSV format. + + +## Exporting IgxGrid's Data + +The CSV Exporter service can also export data in CSV format from an [**IgxGrid**](grid/grid.md). The only difference is that you need to invoke the +[`IgxCsvExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html)'s [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html#export) method and pass the [**IgxGrid**](grid/grid.md) as first argument. + +Here is an example: + +```html +<igx-grid #igxGrid1 [data]="localData" [autoGenerate]="true"></igx-grid> +<button (click)="exportButtonHandler()">Export IgxGrid</button> +``` + +```typescript +// component.ts + +... +import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponen } from '@infragistics/igniteui-angular'; for licensed package +... + +@ViewChild('igxGrid1') public igxGrid1: IgxGridComponent; + +public localData = [ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } +]; + +constructor(private csvExportService: IgxCsvExporterService) { +} + +public exportButtonHandler() { + this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile', CsvFileTypes.CSV)); +} + +``` + + +```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild, inject } from '@angular/core'; + +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxCsvExporterService } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-csv-export-sample-1', + styleUrls: ['./csv-export-sample-1.component.scss'], + templateUrl: './csv-export-sample-1.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent] +}) +export class CsvExportSample1Component { + private csvExportService = inject(IgxCsvExporterService); + + + @ViewChild('igxGrid1', { static: true }) public igxGrid1: IgxGridComponent; + public localData = [ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } + ]; + + /* + The following code demonstrates how to attach event handlers to exporter specific events + and also how to customize the column export process. + this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } + }); + this.csvExportService.rowExporting.subscribe((args: IRowExportingEventArgs) => { + }); + this.csvExportService.exportEnded.subscribe((args: ICsvExportEndedEventArgs) => { + }); + */ + +} +``` +```html +<p class="grid__wrapper"> + <igx-grid [igxPreventDocumentScroll]="true" #igxGrid1 [data]="localData" [autoGenerate]="true" height="220px"> + <igx-grid-toolbar> + <igx-grid-toolbar-actions> + <igx-grid-toolbar-exporter [exportCSV]="true" [exportExcel]="false"> + </igx-grid-toolbar-exporter> + </igx-grid-toolbar-actions> + </igx-grid-toolbar> + </igx-grid> +</p> +``` +```scss +.grid__wrapper { + max-width: 1000px; + min-width: 300px; + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; +} + +.exportButton { + margin-top: 5px; +} +``` + + +## Customizing the Exported Format + +The CSV Exporter supports several types of exporting formats. The export format may be specified: + +- as a second argument of the [`IgxCsvExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html) objects's constructor +- using the [`IgxCsvExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html) object's [`fileType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html#filetype) property + +Different export formats have different file extensions and value delimiters. The following table maps the export formats and their respective file extensions and delimiters: + +| Format | File Extension | Default Delimiter | +| :--- | :--- | :--- | +| [`CsvFileTypes.CSV`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/csvfiletypes.html#csv) | .csv | Comma | +| [`CsvFileTypes.TAB`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/csvfiletypes.html#tab) | .tab | Tab | +| [`CsvFileTypes.TSV`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/csvfiletypes.html#tsv) | .tsv | Tab | + +<div class="divider--half"></div> + +You can also specify a custom delimiter using the [`IgxCsvExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html) objects's [`valueDelimiter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html#valuedelimiter) property. + +## Customizing the Exported Content + +In the above examples the CSV Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the [`columnExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html#columnexporting) and/or [`rowExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html#rowexporting) events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's [`cancel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/irowexportingeventargs.html#cancel) property to `true`. + +The following example will exclude a column from the export if its name is "Age" and if its index is 1: + +```typescript +// component.ts + +this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } +}); +this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile')); +``` + +When you are exporting data from [**IgxGrid**](grid/grid.md) the export process takes in account features like row filtering and column hiding and exports only the data visible in the grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the [`IgxCsvExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html) object. These properties are described in the table below. + +## API References + +The CSV Exporter service has a few more APIs to explore, which are listed below. + +- [IgxCsvExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html) +- [IgxCsvExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporteroptions.html) + +Additional components that were used: + +- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +<div class="divider"></div> + +## Additional Resources + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md new file mode 100644 index 000000000..a8920680b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-excel.md @@ -0,0 +1,157 @@ +--- +title: Export to Excel Component - Native Angular | Ignite UI for Angular +_description: Users can export their data for editing or offline presentation can do so in Excel format with the Export to Excel Ignite UI for Angular component. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Controls, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Data Grid, Angular Grid Control, Angular Grid Component, Excel Export, Angular Excel Component, Angular Export Excel +_license: commercial +_tocName: Excel Exporter +_premium: true +--- + +# Excel Exporter + +<p class="highlight"> + +The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from raw data (array) or from the [**IgxGrid**](grid/grid.md), [**IgxTreeGrid**](treegrid/tree-grid.md) and [**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.md) components. The exporting functionality is encapsulated in the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. +</p> +<div class="divider"></div> + +## Angular Excel Exporter Example + + +```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, inject } from '@angular/core'; + +import { IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-excel-export', + styleUrls: ['./excel-export.component.scss'], + templateUrl: './excel-export.component.html', + imports: [IgxButtonDirective] +}) +export class ExcelExportComponent { + private excelExportService = inject(IgxExcelExporterService); + + + public localData = [ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } + ]; + + public exportButtonHandler() { + this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportFileFromData')); + } + +} +``` +```html +<p> + Press the "Export Data" button below to export an array as .xlsx file.<br /> + <button igxButton="contained" (click)="exportButtonHandler()">Export Data</button><br /> +</p> +``` + +<div class="divider--half"></div> + +## Usage + +To start using the IgniteUI Excel Exporter first import the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) in the app.module.ts file and add the service to the `providers` array: + +```typescript +// app.module.ts + +... +import { IgxExcelExporterService } from 'igniteui-angular/grids/core'; +// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + providers: [ IgxExcelExporterService ] +}) + +export class AppModule {} +``` + +> [!Note] +> In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. + +To initiate an export process you may use the handler of a button in your component's template. + +```html +<button (click)="exportButtonHandler()">Export Data to Excel</button> +``` + +You may access the exporter service by defining an argument of type [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) in the component's constructor and the Angular framework will provide an instance of the service. To export some data in MS Excel format you need to invoke the exporter service's [`exportData`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#exportdata) method. This method accepts as a first argument the data you want to export and the second argument is of type [`IgxExcelExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) and allows you to configure the export process. + +Here is the code which will execute the export process in the component's typescript file: + +```typescript +// component.ts + +... +import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core'; +// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package +... + +public localData = [ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } +]; + +constructor(private excelExportService: IgxExcelExporterService) { +} + +public exportButtonHandler() { + this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile')); +} + +``` + +If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.xlsx" which contains the data from the `localData` array in MS Excel format. + +## Customizing the Exported Content + +In the above examples the Excel Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the [`columnExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#columnexporting) and/or [`rowExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#rowexporting) events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's [`cancel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/irowexportingeventargs.html#cancel) property to `true`. + +The following example will exclude a column from the export if its header is "Age" and if its index is 1: + +```typescript +// component.ts + +this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } +}); +this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('ExportedDataFile')); +``` + +## API References + +The Excel Exporter service has a few more APIs to explore, which are listed below. + +- [`IgxExcelExporterService API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) +- [`IgxExcelExporterOptions API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) + +Grids Excel Exporters: + +- [`IgxGrid Excel Exporters`](grid/export-excel.md) +- [`IgxTreeGrid Excel Exporters`](treegrid/export-excel.md) + +Additional components that were used: + +- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +<div class="divider"></div> + +## Additional Resources + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md new file mode 100644 index 000000000..5efd8b8f2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/exporter-pdf.md @@ -0,0 +1,595 @@ +--- +title: Export to PDF Component - Native Angular | Ignite UI for Angular +_description: Users can export their data for offline presentation can do so in PDF format with the Export to PDF Ignite UI for Angular component. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Controls, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Data Grid, Angular Grid Control, Angular Grid Component, PDF Export, Angular PDF Component, Angular Export PDF +_license: commercial +_tocName: PDF Exporter +_premium: true +--- + +# PDF Exporter + +<p class="highlight"> + +The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as [**IgxGrid**](grid/grid.md), [**IgxTreeGrid**](treegrid/tree-grid.md), [**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.md), and [**IgxPivotGrid**](pivotGrid/pivot-grid.md). The exporting functionality is encapsulated in the [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options. +</p> +<div class="divider"></div> + +## Angular PDF Exporter Example + + +```typescript +import { Component, inject, signal } from '@angular/core'; +import { IgxPdfExporterOptions, IgxPdfExporterService } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-pdf-export', + styleUrls: ['./pdf-export.component.scss'], + templateUrl: './pdf-export.component.html', + imports: [IgxButtonDirective] +}) +export class PdfExportComponent { + private pdfExportService = inject(IgxPdfExporterService); + + public localData = signal([ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } + ]); + + public exportButtonHandler() { + this.pdfExportService.exportData(this.localData(), new IgxPdfExporterOptions('ExportFileFromData')); + } +} +``` +```html +<p> + Press the "Export Data" button below to export an array as a .pdf file.<br /> +</p> +<button igxButton="contained" (click)="exportButtonHandler()">Export Data</button><br /> +``` + +<div class="divider--half"></div> + +## Usage + +To start using the Ignite UI PDF Exporter, first import the [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) into your component: + +```typescript +import { IgxPdfExporterService } from 'igniteui-angular/grids/core'; + +// import { IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package + +@Component({ + ... +}) +export class AppComponent { ... } +``` + +To initiate an export process, you can use a button click handler in your component's template. + +```html +<button (click)="exportButtonHandler()">Export Data to PDF</button> +``` + +You can access the [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) by using the `inject` function. To export data in PDF format, you need to invoke the exporter service's [`exportData`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#exportdata) method. This method accepts the data you want to export as its first argument, and an [`IgxPdfExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) instance as its second argument, which allows you to configure the export process. + +Here is the code that will execute the export process in the component's TypeScript file: + +```typescript +// component.ts + +... +import { Component, inject, signal } from '@angular/core'; +import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core'; + +// import { IgxPdfExporterService, IgxPdfExporterOptions } from '@infragistics/igniteui-angular/grids/core'; for licensed package +... + +public localData = signal([ + { Name: 'Eric Ridley', Age: '26' }, + { Name: 'Alanis Brook', Age: '22' }, + { Name: 'Jonathan Morris', Age: '23' } +]); + +private pdfExportService = inject(IgxPdfExporterService); + +public exportButtonHandler() { + this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions('ExportedDataFile')); +} + +``` + +If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.pdf" which contains the data from the `localData` array in PDF format. + +## Customizing the Exported Content + +In the above examples, the PDF Exporter service exports all available data. However, there are situations where you may want to skip exporting a row or an entire column. To achieve this, you can subscribe to the [`columnExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#columnexporting) and/or [`rowExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#rowexporting) events, which are fired for each column and/or each row respectively. You can then cancel the export by setting the event argument object's [`cancel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/irowexportingeventargs.html#cancel) property to `true`. + +The following example excludes a column from the export if its header is "Age" and its index is 1: + +```typescript +// component.ts + +this.pdfExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } +}); +this.pdfExportService.export(this.igxGrid1, new IgxPdfExporterOptions('ExportedDataFile')); +``` + +## PDF Export Options + +The [`IgxPdfExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) class provides several properties to customize the PDF export: + +- **pageOrientation**: Specifies the page orientation (`portrait` or `landscape`). Default is `landscape`. +- **pageSize**: Specifies the page size (`a3`, `a4`, `a5`, `letter`, `legal`, etc.). Default is `a4`. +- **showTableBorders**: Determines whether to display table borders. Default is `true`. +- **fontSize**: Sets the font size for the table content. Default is `10`. +- **customFont**: Specifies a custom TrueType font (TTF) for Unicode character support. Required when exporting data containing non-Latin characters. + +The following example demonstrates how to configure these options: + +```typescript +// component.ts + +public exportButtonHandler() { + const options = new IgxPdfExporterOptions('ExportedDataFile'); + options.pageOrientation = 'portrait'; + options.pageSize = 'letter'; + options.showTableBorders = true; + options.fontSize = 12; + + this.pdfExportService.exportData(this.localData, options); +} +``` + +### Custom Font Configuration for Unicode Support + +By default, the PDF exporter uses the built-in Helvetica font, which only supports basic Latin characters. If your data contains non-Latin characters (such as Cyrillic, Chinese, Japanese, Arabic, Hebrew, or special symbols), you must provide a custom TrueType font (TTF) using the `customFont` property. + +The font data must be provided as a Base64-encoded string of the TTF file contents. You can optionally provide a separate bold variant for header styling. + +#### Converting TTF Files to Base64 + +To convert a TTF file to Base64, use Node.js: + +```javascript +const fs = require('fs'); +const fontData = fs.readFileSync('path/to/font.ttf'); +const base64 = fontData.toString('base64'); +fs.writeFileSync('font-base64.ts', `export const MY_FONT = '${base64}';`); +``` + +Alternatively, you can use an online Base64 encoder tool to convert your TTF file. + +#### Example: Basic Custom Font Usage + +```typescript +// fonts/noto-sans.ts +export const NOTO_SANS_REGULAR = 'AAEAAAATAQAABAAwR0...[base64-encoded font data]...'; + +// component.ts +import { NOTO_SANS_REGULAR } from './fonts/noto-sans'; + +public exportButtonHandler() { + const options = new IgxPdfExporterOptions('ExportedDataFile'); + options.customFont = { + name: 'NotoSans', + data: NOTO_SANS_REGULAR + }; + + this.pdfExportService.exportData(this.localData, options); +} +``` + +#### Example: Custom Font with Bold Variant + +```typescript +// fonts/noto-sans.ts +export const NOTO_SANS_REGULAR = 'AAEAAAATAQAABAAwR0...[base64-encoded regular font]...'; +export const NOTO_SANS_BOLD = 'BBFAAAAUBQAACAAxS1...[base64-encoded bold font]...'; + +// component.ts +import { NOTO_SANS_REGULAR, NOTO_SANS_BOLD } from './fonts/noto-sans'; + +public exportButtonHandler() { + const options = new IgxPdfExporterOptions('ExportedDataFile'); + options.customFont = { + name: 'NotoSans', + data: NOTO_SANS_REGULAR, + bold: { + name: 'NotoSans-Bold', + data: NOTO_SANS_BOLD + } + }; + + this.pdfExportService.export(this.igxGrid1, options); +} +``` + +#### Recommended Fonts for Unicode Support + +The following fonts provide excellent Unicode coverage: + +- **Noto Sans**: Covers most Unicode scripts — [Google Fonts](https://fonts.google.com/noto/specimen/Noto+Sans) +- **Arial Unicode MS**: Comprehensive Unicode character support +- **Source Han Sans**: Excellent CJK (Chinese, Japanese, Korean) support + +### Demo + +```typescript +import { ChangeDetectionStrategy, Component, signal, computed, inject, viewChild } from '@angular/core'; +import { IgxColumnComponent, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import notoSansFontData from './fonts/noto-sans.json'; + +/** + * Demonstrates PDF export with a custom Unicode font. + * + * The sample ships with Noto Sans (Latin/Cyrillic/Greek) loaded from + * fonts/noto-sans.json. Users can also upload their own .ttf font — + * for example Noto Sans CJK for Japanese/Chinese/Korean support. + * + * All Noto fonts are licensed under the SIL Open Font License 1.1 + * (see fonts/OFL.txt). + */ +@Component({ + selector: 'app-export-pdf-custom-font', + templateUrl: './export-pdf-custom-font.component.html', + styleUrls: ['./export-pdf-custom-font.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class ExportPdfCustomFontComponent { + private pdfExporter = inject(IgxPdfExporterService); + + protected readonly grid = viewChild.required<IgxGridComponent>('grid'); + + protected readonly isExporting = signal(false); + protected readonly builtInFontLoaded = signal(false); + protected readonly builtInFontLoading = signal(false); + protected readonly uploadedFontName = signal(''); + protected readonly exportStatus = signal(''); + + // Built-in Noto Sans (Latin / Cyrillic / Greek) + private builtInFontData: string | null = null; + private builtInBoldFontData: string | null = null; + + // User-uploaded font (e.g. Noto Sans CJK for Japanese) + private uploadedFontData = signal<string | null>(null); + + protected readonly canExportBuiltIn = computed(() => this.builtInFontLoaded() && !this.isExporting()); + protected readonly canExportUploaded = computed(() => !!this.uploadedFontData() && !this.isExporting()); + + protected readonly data = signal([ + { Name: 'Александър Иванов', City: 'София', Product: '商品A', Amount: 1500 }, + { Name: '田中太郎', City: '東京', Product: '商品B', Amount: 2300 }, + { Name: 'Élise Müller', City: 'München', Product: '商品D', Amount: 3200 }, + { Name: '王小明', City: '北京', Product: '商品E', Amount: 1750 }, + { Name: 'Ирина Петрова', City: 'Санкт-Петербург', Product: '製品 F', Amount: 2890 } + ]); + + constructor() { + const fontJson = notoSansFontData as unknown as { normal: string; bold: string }; + this.builtInFontData = fontJson.normal; + this.builtInBoldFontData = fontJson.bold; + this.builtInFontLoaded.set(true); + this.exportStatus.set('Noto Sans loaded — ready to export. Upload a CJK font for Japanese/Chinese/Korean support.'); + } + + /** Handles the user uploading a custom .ttf font file. */ + protected onFontFileSelected(event: Event): void { + const input = event.target as HTMLInputElement; + if (!input.files?.[0]) { + return; + } + const file = input.files[0]; + this.uploadedFontName.set(file.name); + this.exportStatus.set(`Reading "${file.name}"…`); + + this.readFontFile(file).then(base64 => { + this.uploadedFontData.set(base64); + this.exportStatus.set(`"${file.name}" loaded — you can now export with the uploaded font.`); + }); + } + + /** Export using the built-in Noto Sans font. */ + protected exportWithBuiltInFont(): void { + if (!this.builtInFontData) { + return; + } + + this.isExporting.set(true); + this.exportStatus.set('Exporting PDF with Noto Sans…'); + + const options = new IgxPdfExporterOptions('NotoSansExport'); + options.customFont = { + name: 'NotoSans', + data: this.builtInFontData + }; + + if (this.builtInBoldFontData) { + options.customFont.bold = { + name: 'NotoSans-Bold', + data: this.builtInBoldFontData + }; + } + + this.pdfExporter.exportEnded.subscribe({ + next: () => { + this.isExporting.set(false); + this.exportStatus.set( + 'PDF exported with Noto Sans. Note: CJK characters (Japanese, Chinese, Korean) require a CJK font.' + ); + } + }); + + this.pdfExporter.export(this.grid(), options); + } + + /** Export using the user-uploaded font file. */ + protected exportWithUploadedFont(): void { + const fontData = this.uploadedFontData(); + if (!fontData) { + return; + } + + this.isExporting.set(true); + this.exportStatus.set('Exporting PDF with uploaded font…'); + + const options = new IgxPdfExporterOptions('CustomFontExport'); + options.customFont = { + name: 'CustomFont', + data: fontData + }; + + this.pdfExporter.exportEnded.subscribe({ + next: () => { + this.isExporting.set(false); + this.exportStatus.set('PDF exported successfully with the uploaded font!'); + } + }); + + this.pdfExporter.export(this.grid(), options); + } + + /** Export with the default PDF font (Helvetica). */ + protected exportWithDefaultFont(): void { + this.isExporting.set(true); + this.exportStatus.set('Exporting PDF with default font (Helvetica)…'); + + const options = new IgxPdfExporterOptions('DefaultFontExport'); + + this.pdfExporter.exportEnded.subscribe({ + next: () => { + this.isExporting.set(false); + this.exportStatus.set( + 'PDF exported — non-Latin characters may not render correctly with the default Helvetica font.' + ); + } + }); + + this.pdfExporter.export(this.grid(), options); + } + + private readFontFile(file: File): Promise<string> { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + const result = reader.result as string; + const base64 = result.includes(',') ? result.split(',')[1] : result; + resolve(base64); + }; + reader.onerror = () => reject(reader.error); + reader.readAsDataURL(file); + }); + } +} +``` +```html +<section class="container"> + <p class="description"> + This sample ships with <a href="https://fonts.google.com/noto/specimen/Noto+Sans" target="_blank">Noto Sans</a>, + which covers Latin, Cyrillic, and Greek characters. For <strong>Japanese, Chinese, or Korean</strong> support, + download <a href="https://fonts.google.com/noto/specimen/Noto+Sans+JP" target="_blank">Noto Sans JP</a> + (or another CJK font) and upload the <code>.ttf</code> file below. + </p> + + @if (builtInFontLoading()) { + <p class="status loading">Loading built-in Noto Sans font…</p> + } + + <div class="font-upload"> + <label for="fontFile">Upload a custom font (.ttf):</label> + <input + id="fontFile" + type="file" + accept=".ttf,.otf,.woff" + (change)="onFontFileSelected($event)" + /> + @if (uploadedFontName()) { + <span class="file-name">{{ uploadedFontName() }}</span> + } + </div> + + <div class="export-buttons"> + <button + (click)="exportWithBuiltInFont()" + [disabled]="!canExportBuiltIn()" + > + Export with Noto Sans + </button> + <button + (click)="exportWithUploadedFont()" + [disabled]="!canExportUploaded()" + > + Export with Uploaded Font + </button> + <button + (click)="exportWithDefaultFont()" + [disabled]="isExporting()" + > + Export with Default Font + </button> + </div> + + @if (exportStatus()) { + <p class="status">{{ exportStatus() }}</p> + } + + <igx-grid #grid [data]="data()" [autoGenerate]="false" height="320px"> + <igx-column field="Name" header="Name / Име / 名前"></igx-column> + <igx-column field="City" header="City / Град / 都市"></igx-column> + <igx-column field="Product" header="Product / Продукт / 製品"></igx-column> + <igx-column field="Amount" header="Amount" dataType="number"></igx-column> + </igx-grid> +</section> +``` +```scss +.container { + display: flex; + flex-direction: column; + gap: 12px; + padding: 16px; +} + +.description { + color: #555; + max-width: 800px; + + a { + color: #0078d4; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.font-upload { + display: flex; + align-items: center; + gap: 8px; + + input[type="file"] { + // Hide the default input + position: absolute; + opacity: 0; + width: 0.1px; + height: 0.1px; + } + + label { + font-weight: 500; + padding: 10px 20px; + background-color: #fff; + border: 2px dashed #0078d4; + border-radius: 6px; + cursor: pointer; + color: #0078d4; + transition: all 0.3s ease; + display: inline-block; + + &:hover { + background-color: #0078d4; + color: white; + border-style: solid; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3); + } + + &:active { + transform: translateY(0); + } + } + + .file-name { + color: #28a745; + font-size: 0.9em; + font-weight: 500; + padding: 6px 12px; + background-color: #e8f5e9; + border-radius: 4px; + border: 1px solid #28a745; + } +} + +.export-buttons { + display: flex; + flex-wrap: wrap; + gap: 12px; + + button { + padding: 8px 16px; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + + &:not(:disabled):hover { + background-color: #e8e8e8; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &:first-child { + background-color: #0078d4; + color: white; + border-color: #0078d4; + + &:not(:disabled):hover { + background-color: #106ebe; + } + } + } +} + +.status { + padding: 8px 12px; + background-color: #f0f0f0; + border-radius: 4px; + font-size: 0.9em; + + &.loading { + color: #0078d4; + font-style: italic; + } +} +``` + +<div class="divider--half"></div> + +## Known Limitations + +| Limitation | Description | +|---|---| +| Wide PDF layouts | Very wide grids can force PDF columns to shrink to fit the page. Apply explicit column widths or hide low‑priority fields before exporting to keep the document legible. | + +## API References + +The PDF Exporter service has a few more APIs to explore, which are listed below. + +- [`IgxPdfExporterService API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) +- [`IgxPdfExporterOptions API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) + +Additional components that were used: + +- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +<div class="divider"></div> + +## Additional Resources + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-animations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-animations.md new file mode 100644 index 000000000..1d9168255 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-animations.md @@ -0,0 +1,172 @@ +--- +title: Angular Chart Animations | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Animations +_keywords: Angular Charts, Animations, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Animations +_premium: true +--- + +# Angular Chart Animations + +Animations allows you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis. + +Animations are disabled in the Ignite UI for Angular Charts, but they can be enabled by setting the [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) property to true. From there, you can set the [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) property to determine how long your animation should take to complete and the [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) to determine the type of animation that takes place. + +## Angular Chart Animation Example + +The following example depicts a [Line Chart](../types/line-chart.md) with an animation set to the default [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) - "Auto." The drop-down and slider at the top in this example will allow you to modify the [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) and [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration), respectively, so that you can see what the different supported animations look like at different speeds. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public transitionInMode: string = "Auto"; + public transitionInInterval: string = "1000"; + public data: any[]; + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + constructor() { + this.data = this.generateData(); + } + + public onChangeAmountClicked() { + this.data = this.generateData(); + } + + public OnTransitionIntervalChange(e: any) { + this.transitionInInterval = e.target.value; + } + + private generateData(): any[] { + const data: any[] = [ + { Year: "2009", Europe: 31, China: 21, USA: 19 }, + { Year: "2010", Europe: 43, China: 26, USA: 24 }, + { Year: "2011", Europe: 66, China: 29, USA: 28 }, + { Year: "2012", Europe: 69, China: 32, USA: 26 }, + { Year: "2013", Europe: 58, China: 47, USA: 38 }, + { Year: "2014", Europe: 40, China: 46, USA: 31 }, + { Year: "2015", Europe: 78, China: 50, USA: 19 }, + { Year: "2016", Europe: 13, China: 90, USA: 52 }, + { Year: "2017", Europe: 78, China: 132, USA: 50 }, + { Year: "2018", Europe: 40, China: 134, USA: 34 }, + { Year: "2019", Europe: 80, China: 96, USA: 38 } + ]; + + return data; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label class="options-label">Transition Type: </label> + <select [(ngModel)]="transitionInMode"> + <option>AccordionFromBottom</option> + <option>AccordionFromCategoryAxisMaximum</option> + <option>AccordionFromCategoryAxisMinimum</option> + <option>AccordionFromLeft</option> + <option>AccordionFromRight</option> + <option>AccordionFromTop</option> + <option>AccordionFromValueAxisMaximum</option> + <option>AccordionFromValueAxisMinimum</option> + <option>Expand</option> + <option>FromZero</option> + <option>SweepFromBottom</option> + <option>SweepFromCategoryAxisMaximum</option> + <option>SweepFromCategoryAxisMinimum</option> + <option>SweepFromCenter</option> + <option>SweepFromLeft</option> + <option>SweepFromRight</option> + <option>SweepFromTop</option> + <option>SweepFromValueAxisMaximum</option> + <option>SweepFromValueAxisMinimum</option> + <option>Auto</option> + </select> + <button (click)="onChangeAmountClicked()">Reload Chart</button> + <input class="options-slider" type="range" min="50" max="2000" step="50" + [value]="transitionInInterval" (change)="OnTransitionIntervalChange($event)" /> + <label class="options-label">{{transitionInInterval}}ms</label> + </div> + <div class="container"> + <igx-category-chart height="100%" + chartType="line" + [dataSource]="data" + isTransitionInEnabled="true" + [transitionInMode]="transitionInMode" + [transitionInDuration]="transitionInInterval" + yAxisLabelExtent="40" + computedPlotAreaMarginMode="series" + #chart> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) +- [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) +- [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-annotations.md new file mode 100644 index 000000000..7adca0b7c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-annotations.md @@ -0,0 +1,575 @@ +--- +title: Angular Chart Annotations | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Annotations +_keywords: Angular Charts, Annotations, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Annotations +_premium: true +--- + +# Angular Chart Annotations + +The Angular chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. These layers are dependent on the cursor position. Each of these annotation layers provides a different hover interaction that may be used individually or combined with others to provide powerful hover interactions. + +## Angular Annotations Example + +The following example demonstrates the annotation layers that are available on the Angular chart. Click on the checkboxes to turn each layer on and off. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxCalloutLayerComponent } from "igniteui-angular-charts"; +import { IgxSeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + public calloutData: any[]; + + public crosshairsDisplay: string = "Both"; + public crosshairAnnotations: boolean = true; + public finalValuesVisible: boolean = true; + public calloutsVisible: boolean = true; + public markerType: string = "Circle"; + + constructor() { + } + + public ngOnInit() { + + this.data = [ + { Year: "2009", USA: 19 }, + { Year: "2010", USA: 24 }, + { Year: "2011", USA: 28 }, + { Year: "2012", USA: 26 }, + { Year: "2013", USA: 38 }, + { Year: "2014", USA: 31 }, + { Year: "2015", USA: 19 }, + { Year: "2016", USA: 52 }, + { Year: "2017", USA: 50 }, + { Year: "2018", USA: 34 }, + { Year: "2019", USA: 38 }, + ]; + + this.calloutData = []; + + for (let i = 0; i < this.data.length; i++) { + const item = this.data[i]; + this.calloutData.push({ index: i, label: item.USA + " TWh", value: item.USA }); + } + } + + public OnCrosshairVisibilityChanged(e: any) { + const val = e.target.checked; + + if (val) { + this.crosshairsDisplay = "Both"; + } + else { + this.crosshairsDisplay = "None"; + } + } + + public OnMarkersVisibilityChanged(e: any) { + const val = e.target.checked; + + if (val) { + this.markerType = "Circle"; + } + else { + this.markerType = "None"; + } + } + + public OnCalloutsVisibilityChanged(e: any) { + this.calloutsVisible = e.target.checked; + } + + public OnFinalValueVisibilityChanged(e: any) { + this.finalValuesVisible = e.target.checked; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label class="options-label">Annotations: </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnCrosshairVisibilityChanged($event)" /> Crosshair + </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnCalloutsVisibilityChanged($event)" /> Callouts + </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnFinalValueVisibilityChanged($event)" /> Final Values + </label> + <label class="options-item"> + <input type="checkbox" checked=true (change)="OnMarkersVisibilityChanged($event)" /> Markers + </label> + </div> + + <div class="options vertical"> + <label id="legendTitle">Renewable Electricity Generated</label> + </div> + <div class="container"> + <igx-category-chart height="100%" width="100%" + [dataSource]="data" + chartType="line" + yAxisTitle="TWh" + yAxisTitleLeftMargin="5" + yAxisLabelLocation="OutsideRight" + crosshairsSnapToData="false" + [crosshairsDisplayMode]="crosshairsDisplay" + [crosshairsAnnotationEnabled]="crosshairAnnotations" + [finalValueAnnotationsVisible]="finalValuesVisible" + [calloutsVisible]="calloutsVisible" + [calloutsDataSource]="calloutData" + [markerTypes]="markerType" + calloutsXMemberPath="index" + calloutsYMemberPath="value" + calloutsLabelMemberPath="label" + computedPlotAreaMarginMode="series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a> + +## Angular Crosshair Layer + +The [`IgxCrosshairLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html) renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines. + +Crosshair types include: + +- Horizontal +- Vertical +- Both + +The chart's crosshairs can also be configured to snap to data points by setting the [`crosshairsSnapToData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis. + +You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#targetSeries) property. + +By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the [`brush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#brush) property of the Crosshair Layer. + +The following example shows how to configure the crosshair layer but targeting a single series, setting the type to vertical and styling the brush color. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxCrosshairLayerModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxLegendModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxCrosshairLayerModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + constructor() { } + + ngOnInit(): void { + this.data = [ + { Year: "2009", USA: 19 }, + { Year: "2010", USA: 24 }, + { Year: "2011", USA: 28 }, + { Year: "2012", USA: 26 }, + { Year: "2013", USA: 38 }, + { Year: "2014", USA: 31 }, + { Year: "2015", USA: 19 }, + { Year: "2016", USA: 52 }, + { Year: "2017", USA: 50 }, + { Year: "2018", USA: 34 }, + { Year: "2019", USA: 38 } + ]; + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <label id="legendTitle">Renewable Electricity Generated</label> + </div> + <igx-data-chart height="100%" width="100%" > + <igx-category-x-axis #xAxis [dataSource]="data" label="Year"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis title="TWh" labelLocation="OutsideRight"></igx-numeric-y-axis> + + <igx-line-series [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="data" valueMemberPath="USA"></igx-line-series> + + <igx-crosshair-layer horizontalLineVisibility="Collapsed" brush="DodgerBlue"></igx-crosshair-layer> + </igx-data-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Final Value Layer + +The [`IgxFinalValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html) of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control provides a quick view along the axis of the ending value displayed in a series. + +You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#targetSeries) property. + +You can also customize this annotation by setting the following properties: + +- [`axisAnnotationBackground`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. +- [`axisAnnotationTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationTextColor): This property is used to choose the brush for the annotation's text color. +- [`axisAnnotationOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationOutline): This property is used to choose the brush for the annotation's outline color. + +The following example demonstrates how to style the final value layer annotation by setting the properties listed above. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxFinalValueLayerModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxLegendModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxFinalValueLayerModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + constructor() { } + + ngOnInit(): void { + this.data = [ + { Year: "2009", USA: 19 }, + { Year: "2010", USA: 24 }, + { Year: "2011", USA: 28 }, + { Year: "2012", USA: 26 }, + { Year: "2013", USA: 38 }, + { Year: "2014", USA: 31 }, + { Year: "2015", USA: 19 }, + { Year: "2016", USA: 52 }, + { Year: "2017", USA: 50 }, + { Year: "2018", USA: 34 }, + { Year: "2019", USA: 38 } + ]; + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <label id="legendTitle">Renewable Energy Generated</label> + </div> + <igx-data-chart height="100%" width="100%" > + <igx-category-x-axis #xAxis [dataSource]="data" label="Year"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis title="TWh" labelLocation="OutsideRight"></igx-numeric-y-axis> + + <igx-line-series [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="data" valueMemberPath="USA"></igx-line-series> + + <igx-final-value-layer axisAnnotationBackground="Orange" axisAnnotationTextColor="Black" axisAnnotationOutline="Black"></igx-final-value-layer> + </igx-data-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +```html +<igx-category-chart + [dataSource]="data" + finalValueAnnotationsVisible="true"> +</igx-category-chart> +``` + +## Angular Callout Layer + +The [`IgxCalloutLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html) displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source. + +Use the callout annotations to display additional information, such as notes or specific details about data points, that you would like to point out to your users. + +You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#targetSeries) property. + +You can also customize this annotation by setting the following properties: + +- [`calloutLeaderBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutLeaderBrush): This property is used to choose the brush for the leader lines for the callouts for the layer. +- [`calloutOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutOutline): This property is used to choose the brush for the annotation's outline color. +- [`calloutBackground`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. +- [`calloutTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutTextColor): This property is used to choose the brush for the annotation's text color. +- [`calloutStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutStrokeThickness): This property is used to choose the thickness for the callout backing. +- [`calloutCornerRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutCornerRadius): This property is used to curve the corners of the callouts. +- [`allowedPositions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#allowedPositions): This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom + +The following example demonstrates how to style the callout layer annotations by setting the properties listed above: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartAnnotationModule, + IgxDataChartInteractivityModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent, IgxCalloutLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("lineSeries1", { static: true } ) + private lineSeries1: IgxLineSeriesComponent + @ViewChild("calloutLayer1", { static: true } ) + private calloutLayer1: IgxCalloutLayerComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + name="chart" + #chart> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="countryRenewableElectricity" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + title="TWh" + labelLocation="OutsideRight"> + </igx-numeric-y-axis> + <igx-line-series + name="lineSeries1" + #lineSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" + valueMemberPath="america" + brush="rgba(137, 97, 169, 1)" + markerOutline="rgba(137, 97, 169, 1)" + shouldHideAutoCallouts="false"> + </igx-line-series> + <igx-callout-layer + name="CalloutLayer1" + #calloutLayer1 + isAutoCalloutBehaviorEnabled="true" + calloutLeaderBrush="rgba(137, 97, 169, 1)" + calloutOutline="rgba(137, 97, 169, 1)" + calloutBackground="white" + calloutTextColor="rgba(137, 97, 169, 1)" + calloutStrokeThickness="1" + calloutCollisionMode="Greedy"> + </igx-callout-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +```html +<igx-category-chart + [dataSource]="data" + calloutsVisible="true" + [calloutsDataSource]="calloutData" + calloutsXMemberPath="index" + calloutsYMemberPath="value" + calloutsLabelMemberPath="info"> +</igx-category-chart> +``` + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`crosshairsSnapToData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-gridlines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-gridlines.md new file mode 100644 index 000000000..65e32c8fe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-gridlines.md @@ -0,0 +1,865 @@ +--- +title: Angular Axis Gridlines | Data Visualization | Infragistics +_description: Infragistics' Angular Axis Gridlines +_keywords: Angular Axis, Gridlines, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XYChart", "DomainChart", "XamDataChart", "NumericXAxis", "NumericYAxis", "NumericAxisBase" ] +namespace: Infragistics.Controls.Charts +_tocName: Axis Gridlines +_premium: true +--- + +# Angular Axis Gridlines + +All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. + +> \[!Note] +> the following examples can be applied to [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) as well as [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls. + +Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines. + +Axis tickmarks are displayed along all horizontal and vertical axes at each label at all major line positions of the Angular chart. + +## Angular Axis Gridlines Example + +This example shows how configure the axis gridline to display major and minor gridlines at specified intervals: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("xAxisStroke", { static: true } ) + private xAxisStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("xAxisMajorStroke", { static: true } ) + private xAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisStroke", { static: true } ) + private yAxisStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisMajorStroke", { static: true } ) + private yAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisMinorStroke", { static: true } ) + private yAxisMinorStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="XAxisStroke" + name="XAxisStroke" + #xAxisStroke + label="X Axis Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="gray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="XAxisMajorStroke" + name="XAxisMajorStroke" + #xAxisMajorStroke + label="X Axis Major Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="darkslategray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisStroke" + name="YAxisStroke" + #yAxisStroke + label="Y Axis Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="gray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisMajorStroke" + name="YAxisMajorStroke" + #yAxisMajorStroke + label="Y Axis Major Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="darkslategray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisMinorStroke" + name="YAxisMinorStroke" + #yAxisMinorStroke + label="Y Axis Minor Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="gray"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + computedPlotAreaMarginMode="Series" + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + chartType="Line" + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisStroke="rgba(145, 145, 145, 1)" + xAxisStrokeThickness="2" + xAxisInterval="1" + xAxisMajorStroke="rgba(71, 71, 71, 1)" + xAxisMajorStrokeThickness="0.5" + yAxisStroke="gray" + yAxisStrokeThickness="2" + yAxisInterval="20" + yAxisMajorStroke="darkslategray" + yAxisMajorStrokeThickness="1" + yAxisMinorInterval="5" + yAxisMinorStroke="gray" + yAxisMinorStrokeThickness="0.5" + thickness="2"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Axis Gridlines Properties + +Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis. + +In order to display minor gridlines that correspond to minor interval, you need to set [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStroke) and [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness) properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them. + +You can customize how the gridlines are displayed in your Angular chart by setting the following properties: + +| Axis Visuals | Type | Property Names | Description | +| -----------------------|---------|--------------------------------------------------------------|---------------- | +| Major Stroke Color | string | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke) <br> [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke) | These properties set the color of axis major gridlines. | +| Minor Stroke Color | string | [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStroke) <br> [`yAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStroke) | These properties set the color of axis minor gridlines. | +| Major Stroke Thickness | number | [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness) <br> [`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness) | These properties set the thickness in pixels of the axis major gridlines. | +| Minor Stroke Thickness | number | [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness) <br> [`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness) | These properties set the thickness in pixels of the axis minor gridlines. | +| Major Interval | number | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) <br> [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval) | These properties set interval between axis major gridlines and labels. | +| Minor Interval | number | [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) <br> [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinorInterval) | These properties set interval between axis minor gridlines, if used. | +| Axis Line Stroke Color | string | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke) <br> [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke) | These properties set the color of an axis line. | +| Axis Stroke Thickness | number | [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness) <br> [`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness) | These properties set the thickness in pixels of an axis line. | + +Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties. + +On category axes, the intervals are represented as an index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items for the major Interval so that all axis labels fit on axis so that they are not clipped by other axis labels. For minor intervals, this is represented as a fraction of the major interval properties. This value generally should equal between 0.25 and 0.5. + +On numeric axes, the interval values are represented as a double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value. + +On date time axes, this value is represented as time span between axis minimum value and axis maximum value. + +The following example demonstrates how to customize the gridlines by setting the properties above: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("xAxisStroke", { static: true } ) + private xAxisStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("xAxisMajorStroke", { static: true } ) + private xAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisStroke", { static: true } ) + private yAxisStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisMajorStroke", { static: true } ) + private yAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisMinorStroke", { static: true } ) + private yAxisMinorStroke: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="XAxisStroke" + name="XAxisStroke" + #xAxisStroke + label="X Axis Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="gray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="XAxisMajorStroke" + name="XAxisMajorStroke" + #xAxisMajorStroke + label="X Axis Major Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="darkslategray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisStroke" + name="YAxisStroke" + #yAxisStroke + label="Y Axis Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="gray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisMajorStroke" + name="YAxisMajorStroke" + #yAxisMajorStroke + label="Y Axis Major Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="darkslategray"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisMinorStroke" + name="YAxisMinorStroke" + #yAxisMinorStroke + label="Y Axis Minor Stroke" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="gray, darkslategray, salmon, cornflowerblue, darkgreen" + dropDownValues="gray, darkslategray, salmon, cornflowerblue, darkgreen" + primitiveValue="gray"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + computedPlotAreaMarginMode="Series" + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + chartType="Line" + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisStroke="rgba(145, 145, 145, 1)" + xAxisStrokeThickness="2" + xAxisInterval="1" + xAxisMajorStroke="rgba(71, 71, 71, 1)" + xAxisMajorStrokeThickness="0.5" + yAxisStroke="gray" + yAxisStrokeThickness="2" + yAxisInterval="20" + yAxisMajorStroke="darkslategray" + yAxisMajorStrokeThickness="1" + yAxisMinorInterval="5" + yAxisMinorStroke="gray" + yAxisMinorStrokeThickness="0.5" + thickness="2"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +The axes of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) also have the ability to place a dash array on the major and minor gridlines by utilizing the [`majorStrokeDashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeDashArray) and [`minorStrokeDashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeDashArray) properties, respectively. The actual axis line can be dashed as well by setting the [`strokeDashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeDashArray) property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines. + +The following example demonstrates a [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with the above dash array properties set: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("lineSeries1", { static: true } ) + private lineSeries1: IgxLineSeriesComponent + @ViewChild("lineSeries2", { static: true } ) + private lineSeries2: IgxLineSeriesComponent + @ViewChild("lineSeries3", { static: true } ) + private lineSeries3: IgxLineSeriesComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="Legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend" + computedPlotAreaMarginMode="Series"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="countryRenewableElectricity" + label="year" + interval="1" + majorStroke="rgba(71, 71, 71, 1)" + majorStrokeThickness="0.5" + stroke="rgba(145, 145, 145, 1)" + strokeThickness="2" + strokeDashArray="5, 5" + majorStrokeDashArray="5, 5" + tickLength="0"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + stroke="gray" + strokeThickness="2" + interval="20" + majorStroke="darkslategray" + majorStrokeThickness="1" + minorInterval="5" + minorStroke="gray" + minorStrokeThickness="0.5" + strokeDashArray="5, 5" + majorStrokeDashArray="5, 5" + minorStrokeDashArray="2.5, 2.5" + tickLength="0"> + </igx-numeric-y-axis> + <igx-line-series + name="LineSeries1" + #lineSeries1 + title="Europe" + [xAxis]="xAxis" + [yAxis]="yAxis" + markerType="Circle" + [dataSource]="countryRenewableElectricity" + valueMemberPath="europe" + showDefaultTooltip="true"> + </igx-line-series> + <igx-line-series + name="LineSeries2" + #lineSeries2 + title="China" + [xAxis]="xAxis" + [yAxis]="yAxis" + markerType="Circle" + [dataSource]="countryRenewableElectricity" + valueMemberPath="china" + showDefaultTooltip="true"> + </igx-line-series> + <igx-line-series + name="LineSeries3" + #lineSeries3 + title="America" + [xAxis]="xAxis" + [yAxis]="yAxis" + markerType="Circle" + [dataSource]="countryRenewableElectricity" + valueMemberPath="america" + showDefaultTooltip="true"> + </igx-line-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Axis Tickmarks Example + +Axis tick marks are enabled by setting the [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength) and [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks. + +Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) property is set to 5, axis labels will be shifted left by that amount. + +The following example demonstrates how to customize the tickmarks by setting the properties above: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("xAxisTickLength", { static: true } ) + private xAxisTickLength: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="XAxisTickLength" + name="XAxisTickLength" + #xAxisTickLength + label="X Axis Tick Length" + shouldOverrideDefaultEditor="true" + valueType="Slider" + min="0" + max="20" + primitiveValue="10"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + [legend]="legend" + chartType="Line" + computedPlotAreaMarginMode="Series" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisTickLength="10" + xAxisTickStrokeThickness="1" + xAxisTickStroke="gray" + yAxisTickLength="0" + yAxisTickStrokeThickness="0" + yAxisTickStroke="rgba(0, 0, 0, 0)"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Axis Tickmarks Properties + +You can customize how the axis tickmarks are displayed in our Angular chats by setting the following properties: + +| Axis Visuals | Type | Property Names | Description | +| -----------------------|---------|------------------------------------------------------------|------------------------- | +| Tick Stroke Color | string | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke) <br> [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke) | These properties set the color of the tickmarks. | +| Tick Stroke Thickness | number | [`xAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStrokeThickness) <br> [`yAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStrokeThickness) | These properties set the thickness of the axis tick marks. | +| Tick Stroke Length | number | [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength) <br> [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) | These properties set the length of the axis tick marks. | + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Layout](chart-axis-layouts.md) +- [Axis Options](chart-axis-options.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) | +| -------------------------------------------------- | ----------------------------------- | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#interval) | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) (Major Interval) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#interval) | [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) (Major Interval) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`minorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minorInterval) | [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minorInterval) | [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinorInterval) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`majorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStroke) | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`majorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStroke) | [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`majorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeThickness) | [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`majorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#majorStrokeThickness) | [`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`minorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeThickness) | [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#minorStrokeThickness) | [`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`strokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeThickness) | [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`strokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strokeThickness) | [`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`stroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#stroke) | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke) (Axis Line Color) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`stroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#stroke) | [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke) (Axis Line Color) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`tickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickLength) | [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`tickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickLength) | [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`tickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickStroke) | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`tickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#tickStroke) | [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`strip`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strip) | [`xAxisStrip`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrip) (Space between Major Gridlines) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`strip`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#strip) | [`yAxisStrip`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrip) (Space between Major Gridlines) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-layouts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-layouts.md new file mode 100644 index 000000000..199d899f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-layouts.md @@ -0,0 +1,466 @@ +--- +title: Angular Axis Layouts | Data Visualization | Infragistics +_description: Infragistics' Angular Axis Layouts +_keywords: Angular Axis, Layouts, Location, Position, Share, Multiple, Crossing, Infragistics +_license: commercial +mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "XamDataChart", "Axis", "AxisLabelSettings", "ScatterSplineSeries", "TimeXAxis" ] +_tocName: Axis Layouts +_premium: true +--- + +# Angular Axis Layouts + +All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below. + +> \[!Note] +> the following examples can be applied to [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) as well as [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls. + +## Axis Locations Example + +For all axes, you can specify axis location in relationship to chart plot area. The [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property of the Angular charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) property to position y-axis on left side or right side of plot area. + +The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("yAxisLabelLocation", { static: true } ) + private yAxisLabelLocation: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="false" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="YAxisLabelLocation" + name="YAxisLabelLocation" + #yAxisLabelLocation + label="Y Axis - Label Location" + primitiveValue="OutsideRight"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + computedPlotAreaMarginMode="Series" + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + [legend]="legend" + chartType="Line" + yAxisTitle="Labels Location" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisInterval="1" + yAxisLabelLocation="OutsideRight"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<!-- ## Axis Orientation Example + +TODO add info/example of 4 charts with all possible combinations of XAxisInverted and YAxisInverted +e.g. https://www.infragistics.com/help/wpf/datachart-axis-orientation + --> + +## Axis Advanced Scenarios + +For more advanced axis layout scenarios, you can use Angular Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). + +### Axis Sharing Example + +You can share and add multiple axes in the same plot area of the Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). It a common scenario to use share [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) and add multiple [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes). + +The following example depicts a stock price and trade volume chart with a [Stock Chart](../types/stock-chart.md) and a [Column Chart](../types/column-chart.md) plotted. In this case, the Y-Axis on the left is used by the [Column Chart](../types/column-chart.md) and the Y-Axis on the right is used by the [Stock Chart](../types/stock-chart.md), while the X-Axis is shared between the two. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxNumericXAxisModule, IgxNumericYAxisModule, IgxMoneyFlowIndexIndicatorModule, IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxFinancialPriceSeriesModule } from "igniteui-angular-charts"; +import { SampleFinancialData } from "./SampleFinancialData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxNumericXAxisModule, + IgxNumericYAxisModule, + IgxMoneyFlowIndexIndicatorModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxFinancialPriceSeriesModule +], + providers: [SampleFinancialData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; +import { SampleFinancialData } from "./SampleFinancialData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[] = SampleFinancialData.create(); + constructor() { } + + public ngOnInit() { + } + +} +``` +```html +<div class="container vertical"> + <igx-data-chart + width="100%" + height="100%" + [dataSource]="data"> + + <igx-category-x-axis #xAxisShared label="Date" gap=0.75></igx-category-x-axis> + <igx-numeric-y-axis #yAxisRight + labelLocation="OutsideRight" + title="Stock Price" + minimumValue="400" + maximumValue="700"> + </igx-numeric-y-axis> + <igx-numeric-y-axis #yAxisLeft + labelLocation="OutsideLeft" + title="Trade Volume" + minimumValue="5000" + maximumValue="45000" + abbreviateLargeNumbers=true + majorStrokeThickness="0"> + </igx-numeric-y-axis> + + <igx-column-series [xAxis]="xAxisShared" + [yAxis]="yAxisLeft" + valueMemberPath="Volume" + showDefaultTooltip=true + title="Trade Volume"> + </igx-column-series> + + <igx-financial-price-series + [xAxis]="xAxisShared" + [yAxis]="yAxisRight" + displayType="Candlestick" + highMemberPath="High" + lowMemberPath="Low" + closeMemberPath="Close" + openMemberPath="Open" + volumeMemberPath="Volume"></igx-financial-price-series> + </igx-data-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +### Axis Crossing Example + +In addition to placing axes outside plot area, the Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting [`crossingAxis`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingAxis) and [`crossingValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingValue) properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point. + +The following example shows a Sin and Cos wave represented by a [Scatter Spline Chart](../types/scatter-chart.md) with the X and Y axes crossing each other at the (0, 0) origin point. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartScatterModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartScatterModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public SinData: any[]; + public CosData: any[]; + + public YAxisCrossingValue : number = 0; + public XAxisCrossingValue : number = 0; + + constructor() { + + this.SinData= []; + this.CosData= []; + + for (let i = -360; i <= 360; i+=10) + { + const radians = (i * Math.PI) / 180; + const sin = Math.sin(radians); + const cos = Math.cos(radians); + + this.SinData.push( { X : i, Y : sin }); + this.CosData.push( { X : i, Y : cos }); + } + } + + public OnXAxisCrossingValueChanged(e : any) { + this.XAxisCrossingValue = e.target.value; + } + + public OnYAxisCrossingValueChanged(e : any) { + this.YAxisCrossingValue = e.target.value; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + + <label>X Axis Crossing Value: </label> + <label class="options-value" ><span [textContent]="XAxisCrossingValue" ></span></label> + <input type="range" min="-1.25" max="1.25" step="0.25" value="0" (input)="OnXAxisCrossingValueChanged($event)" /> + + <label>Y Axis Crossing Value: </label> + <label class="options-value" ><span [textContent]="YAxisCrossingValue" ></span></label> + <input type="range" min="-360" max="360" step="40" value="0" (input)="OnYAxisCrossingValueChanged($event)" /> + </div> + + <div class="container"> + <igx-data-chart isHorizontalZoomEnabled=true isVerticalZoomEnabled=true + width="100%" height="100%" [dataSource]="SinData" > + <igx-numeric-x-axis #xAxis interval="40" + minimumValue="-360" + maximumValue="360" + labelLocation="InsideBottom" + [crossingAxis]="yAxis" + [crossingValue]="XAxisCrossingValue"> + </igx-numeric-x-axis> + <igx-numeric-y-axis #yAxis + minimumValue="-1.25" + maximumValue="1.25" + interval="0.25" + labelLocation="InsideLeft" + [crossingAxis]="xAxis" + [crossingValue]="YAxisCrossingValue" > + </igx-numeric-y-axis> + + <igx-scatter-spline-series markerType="Circle" + [dataSource]="SinData" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="X" + yMemberPath="Y" > + </igx-scatter-spline-series> + + <igx-scatter-spline-series markerType="Circle" + [dataSource]="CosData" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="X" + yMemberPath="Y"> + </igx-scatter-spline-series> + </igx-data-chart> + +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Options](chart-axis-options.md) + +## API References + +The following is a list of API members mentioned in the above sections: +d in the above sections: + +| [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | +| ------------------------------------------------------ | ------------------------------- | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`crossingAxis`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingAxis) | None | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`crossingValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#crossingValue) | None | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ [`isInverted`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#isInverted) | [`xAxisInverted`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisInverted) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`isInverted`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#isInverted) | [`yAxisInverted`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisInverted) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelLocation` | [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelLocation` | [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelHorizontalAlignment` | [`yAxisLabelHorizontalAlignment`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelHorizontalAlignment) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelVerticalAlignment` | [`xAxisLabelVerticalAlignment`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVerticalAlignment) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `LabelVisibility` | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `LabelVisibility` | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | + +<!-- TODO correct links in Transformer --> + +<!-- +| `Axes` ➔ `NumericYAxis` ➔ `labelSettings.location` | `YAxisLabelLocation` | +| `Axes` ➔ `NumericXAxis` ➔ `labelSettings.location` | `XAxisLabelLocation` | +| `Axes` ➔ `NumericYAxis` ➔ `labelSettings.horizontalAlignment` | `YAxisLabelHorizontalAlignment` | +| `Axes` ➔ `NumericXAxis` ➔ `labelSettings.verticalAlignment` | `XAxisLabelVerticalAlignment` | +| `Axes` ➔ `NumericYAxis` ➔ `labelSettings.visibility` | `YAxisLabelVisibility` | +| `Axes` ➔ `NumericXAxis` ➔ `labelSettings.visibility` | `XAxisLabelVisibility` | --> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-options.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-options.md new file mode 100644 index 000000000..332d9f74a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-options.md @@ -0,0 +1,1169 @@ +--- +title: Angular Axis Options | Data Visualization | Infragistics +_description: Infragistics' Angular Axis Options +_keywords: Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"] +namespace: Infragistics.Controls.Charts +_tocName: Axis Options +_premium: true +--- + +# Angular Axis Options + +In all Ignite UI for Angular charts, the axes provide properties for visual configurations such as titles, labels, and ranges. These features are demonstrated in the examples provided below. + +## Axis Titles Example + +The axis titles feature of the Angular charts, allows you to add contextual information to the your chart. You can customize the look and feel of the axis titles in many different ways such as applying different font styles, colors, margins, and alignments. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + chartType="Line" + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + computedPlotAreaMarginMode="Series" + xAxisTitle="Year" + xAxisTitleTextColor="gray" + xAxisTitleTextStyle="10pt 'Titillium Web'" + xAxisTitleAngle="0" + yAxisTitle="Trillions of Watt-hours (Twh)" + yAxisTitleTextColor="gray" + yAxisTitleTextStyle="10pt 'Titillium Web'" + yAxisTitleAngle="90" + yAxisTitleLeftMargin="5"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Axis Labels Example + +The Angular Charts allows you full control over configuring, formatting, and styling the font of the labels displayed on an axis in your chart. You can change the rotation angle, margin, horizontal and vertical alignment, color, padding, and visibility of axis labels. The following example shows how to use these features of axes. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("xAxisLabelAngleEditor", { static: true } ) + private xAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisLabelAngleEditor", { static: true } ) + private yAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("xAxisLabelTextColorEditor", { static: true } ) + private xAxisLabelTextColorEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="XAxisLabelAngle" + name="XAxisLabelAngleEditor" + #xAxisLabelAngleEditor + label="X Axis Label Angle" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="0, 45, 90, 135, 180, 225, 270" + dropDownValues="0, 45, 90, 135, 180, 225, 270" + primitiveValue="0"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisLabelAngle" + name="YAxisLabelAngleEditor" + #yAxisLabelAngleEditor + label="Y Axis Label Angle" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="-90, -45, 0, 45, 90" + dropDownValues="-90, -45, 0, 45, 90" + primitiveValue="0"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="XAxisLabelTextColor" + name="XAxisLabelTextColorEditor" + #xAxisLabelTextColorEditor + label="X Axis Label Color" + valueType="EnumValue" + shouldOverrideDefaultEditor="true" + dropDownNames="red, green" + dropDownValues="red, green" + primitiveValue="red"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + chartType="Line" + computedPlotAreaMarginMode="Series" + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + topMargin="20" + xAxisLabelAngle="0" + xAxisLabelTextColor="gray" + xAxisLabelTextStyle="10pt 'Titillium Web'" + xAxisLabelTopMargin="5" + yAxisLabelAngle="0" + yAxisLabelTextColor="gray" + yAxisLabelTextStyle="10pt 'Titillium Web'" + yAxisLabelRightMargin="5" + yAxisLabelLocation="OutsideRight" + titleTopMargin="10"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Axis Labels Management & Formatting + +The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis. + +This enhanced calculation is something that you need to opt-in to, which you can do by setting the [`useEnhancedIntervalManagement`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#useEnhancedIntervalManagement) property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#interval) property of the axis, you can set the [`enhancedIntervalPreferMoreCategoryLabels`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#enhancedIntervalPreferMoreCategoryLabels) property on the axis to true. + +The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the [`autoMarginAndAngleUpdateMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#autoMarginAndAngleUpdateMode) property on the chart to either `SizeChanging` or `SizeChangingAndZoom`. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired. + +After setting the [`autoMarginAndAngleUpdateMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#autoMarginAndAngleUpdateMode), you can set the [`shouldAutoExpandMarginForInitialLabels`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#shouldAutoExpandMarginForInitialLabels) property to true to opt into the automatic margin or set the [`shouldConsiderAutoRotationForInitialLabels`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#shouldConsiderAutoRotationForInitialLabels) property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the [`autoExpandMarginExtraPadding`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#autoExpandMarginExtraPadding) and [`autoExpandMarginMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#autoExpandMarginMaximumValue) to provide extra space or a maximum possible margin, respectively. + +Custom label formats such as [`IgxNumberFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxnumberformatspecifier.html) and [`IgxDateTimeFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxdatetimeformatspecifier.html) can be added to each axis via the `XAxisLabelFormatSpecifier` and `YAxisLabelFormatSpecifier` collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the [`yAxisLabelFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelFormat) or [`xAxisLabelFormat`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelFormat) need to be set to data item's property name on the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), eg. `{Date}`. For the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. + +The following example formats the yAxis with a [`IgxNumberFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxnumberformatspecifier.html) to represent $USD prices for top box office movies in the United States. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; +import { IgxNumberFormatSpecifierModule } from 'igniteui-angular-core'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataLegendModule, + IgxCategoryChartModule, + IgxNumberFormatSpecifierModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule, NumberFormatSpecifierDescriptionModule } from 'igniteui-angular-core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxNumberFormatSpecifier } from 'igniteui-angular-core'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier1 == null) + { + let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier2 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier2.style = "currency"; + numberFormatSpecifier2.currency = "USD"; + numberFormatSpecifier2.currencyDisplay = "symbol"; + numberFormatSpecifier2.maximumFractionDigits = 2; + numberFormatSpecifier2.minimumFractionDigits = 2; + + numberFormatSpecifier1.push(numberFormatSpecifier2) + this._numberFormatSpecifier1 = numberFormatSpecifier1; + } + return this._numberFormatSpecifier1; + } + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _numberFormatSpecifier3: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier3(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier3 == null) + { + let numberFormatSpecifier3: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier4 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier4.style = "currency"; + numberFormatSpecifier4.currency = "USD"; + numberFormatSpecifier4.currencyDisplay = "symbol"; + numberFormatSpecifier4.maximumFractionDigits = 2; + numberFormatSpecifier4.minimumFractionDigits = 2; + + numberFormatSpecifier3.push(numberFormatSpecifier4) + this._numberFormatSpecifier3 = numberFormatSpecifier3; + } + return this._numberFormatSpecifier3; + } + private _numberFormatSpecifier5: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier5(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier5 == null) + { + let numberFormatSpecifier5: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier6 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier6.style = "currency"; + numberFormatSpecifier6.currency = "USD"; + numberFormatSpecifier6.currencyDisplay = "symbol"; + numberFormatSpecifier6.minimumFractionDigits = 0; + + numberFormatSpecifier5.push(numberFormatSpecifier6) + this._numberFormatSpecifier5 = numberFormatSpecifier5; + } + return this._numberFormatSpecifier5; + } + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + NumberFormatSpecifierDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + valueFormatString="{0} Billion" + [valueFormatSpecifiers]="numberFormatSpecifier1"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="highestGrossingMovies" + chartType="Column" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + finalValueAnnotationsPrecision="2" + dataToolTipValueFormatString="{0} Billion" + [dataToolTipValueFormatSpecifiers]="numberFormatSpecifier3" + yAxisLabelFormat="{0}B" + [yAxisLabelFormatSpecifiers]="numberFormatSpecifier5"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Axis Range Example + +In the Angular charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) and [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) options. + +By default, charts will calculate the minimum and maximum values for the numeric and time axis range based on the lowest and highest corresponding value points in your data, but this automatic calculation may not be appropriate for your set of data points in all cases. For example, if your data has a minimum value of 850, you may want to set the [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same idea can be applied to the axis minimum value and the highest value of data points using the [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) property. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts'; +import { EnumUtil } from 'igniteui-angular-core'; +import { IgxLegendComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("yAxisMinimumValue", { static: true } ) + private yAxisMinimumValue: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("yAxisMaximumValue", { static: true } ) + private yAxisMaximumValue: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + + public editorChangeUpdateYAxisMinimumValue({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + + var yAxisMinimumVal = args.newValue; + this.chart.yAxisMinimumValue = parseInt(yAxisMinimumVal); + } + + public editorChangeUpdateYAxisMaximumValue({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + + var yAxisMaximumVal = args.newValue; + this.chart.yAxisMaximumValue = parseInt(yAxisMaximumVal); + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="YAxisMinimumValueHandler" + name="YAxisMinimumValue" + #yAxisMinimumValue + label="Y Axis Minimum Value" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100" + dropDownValues="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100" + primitiveValue="0" + (changed)="this.editorChangeUpdateYAxisMinimumValue($event)"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="YAxisMaximumValueHandler" + name="YAxisMaximumValue" + #yAxisMaximumValue + label="Y Axis Maximum Value" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200" + dropDownValues="100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200" + primitiveValue="150" + (changed)="this.editorChangeUpdateYAxisMaximumValue($event)"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + [legend]="legend" + chartType="Line" + computedPlotAreaMarginMode="Series" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + yAxisMinimumValue="0" + yAxisMaximumValue="150"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Axis Modes & Scale + +In the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) property is set to true or on linear scale when this property is set to false (default value). With the [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) property, you can change base of logarithmic scale from default value of 10 to other integer value. + +The [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and control allows you to choose how your data is represented along the y-axis using [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) property that provides [`Numeric`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartyaxismode.html#Numeric) and [`PercentChange`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartyaxismode.html#PercentChange) modes. The [`Numeric`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartyaxismode.html#Numeric) mode will plot data with the exact values while the [`PercentChange`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartyaxismode.html#PercentChange) mode will display the data as percentage change relative to the first data point provided. The default value is [`Numeric`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartyaxismode.html#Numeric) mode. + +In addition to [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) property, the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control has [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) property that provides [`Time`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartxaxismode.html#Time) and [`Ordinal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartxaxismode.html#Ordinal) modes for the x-axis. The [`Time`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartxaxismode.html#Time) mode will render space along the x-axis for gaps in data (e.g. no stock trading on weekends or holidays). The [`Ordinal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartxaxismode.html#Ordinal) mode will collapse date areas where data does not exist. The default value is [`Ordinal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartxaxismode.html#Ordinal) mode. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ FinancialDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public xAxisMode: string = "Ordinal"; + public yAxisMode: string = "Numeric"; + public data: any; + + constructor(private dataService: FinancialDataService) { + this.data = [ this.dataService.getAmzn(), this.dataService.getGoog() ]; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label >yAxis Mode: </label> + <select [(ngModel)]="yAxisMode"> + <option>Numeric</option> + <option>PercentChange</option> + </select> + <label> xAxis Mode: </label> + <select [(ngModel)]="xAxisMode"> + <option>Ordinal</option> + <option>Time</option> + </select> + </div> + <div class="container"> + <igx-financial-chart height="100%" width="100%" + [dataSource]="data" + [yAxisMode]="yAxisMode" + [xAxisMode]="xAxisMode" + yAxisInterval="200" + yAxisMinorInterval="50" + yAxisMajorStroke="Black" + yAxisMinorStroke="Gray" + yAxisMinorStrokeThickness="0.5" + yAxisMajorStrokeThickness="0.5" + + xAxisTickLength="10" + xAxisTickStrokeThickness="1" + xAxisTickStroke="Gray" + + xAxisLabelTextStyle="8pt Verdana" + xAxisLabelTextColor="Gray" + xAxisLabelTopMargin="5" + xAxisLabelAngle="0" + yAxisLabelTextStyle="8pt Verdana" + yAxisLabelTextColor="Gray" + yAxisLabelLeftMargin="5" + yAxisLabelAngle="0" + + yAxisTitle="Stock Prices ($)" + yAxisTitleTextStyle="15pt Times New Roman|Georgia|Serif" + yAxisTitleRightMargin="10" + yAxisTitleTextColor="Black" + yAxisTitleAngle="90" + zoomSliderType="none" + chartType="line"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Axis Gap Example + +The [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) property of the Angular charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap. + +The [`xAxisMaximumGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMaximumGap) property of the Angular charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) to. + +The [`xAxisMinimumGapSize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinimumGapSize) property of the Angular charts, determines the minimum amount of pixels to use for the gap between the categories, if possible. + +The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.md) with an [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("xAxisGap", { static: true } ) + private xAxisGap: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("xAxisMaximumGap", { static: true } ) + private xAxisMaximumGap: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="XAxisGap" + name="XAxisGap" + #xAxisGap + label="X Axis - Gap" + shouldOverrideDefaultEditor="true" + valueType="Slider" + primitiveValue="0.5" + min="0" + max="1.5" + step="0.1"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="XAxisMaximumGap" + name="XAxisMaximumGap" + #xAxisMaximumGap + label="Maximum Gap" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownNames="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0" + dropDownValues="1.5, 1.3, 1.0, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0" + primitiveValue="0.5"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="countryRenewableElectricity" + includedProperties="year, europe, china, america" + chartType="Column" + crosshairsSnapToData="true" + yAxisTitle="TWh" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisInterval="1" + xAxisGap="0.5" + xAxisMaximumGap="1.5"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Axis Overlap Example + +The [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap) property of the Angular charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other. + +The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.md) with an [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap) initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("xAxisOverlap", { static: true } ) + private xAxisOverlap: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true" + name="propertyEditorPanel1" + #propertyEditorPanel1> + <igx-property-editor-property-description + propertyPath="XAxisOverlap" + name="XAxisOverlap" + #xAxisOverlap + label="X Axis - Overlap" + shouldOverrideDefaultEditor="true" + valueType="Slider" + min="0" + max="1" + step="0.1" + primitiveValue="0"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="highestGrossingMovies" + chartType="Column" + crosshairsSnapToData="true" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + xAxisInterval="1" + xAxisOverlap="1"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Layout](chart-axis-layouts.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | +| ------------------------------------------------------ | ---------------------- | ---------------------- | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`maximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#maximumValue) | [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`minimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#minimumValue) | [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) | [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`isLogarithmic`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#isLogarithmic) | [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) | [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ [`logarithmBase`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#logarithmBase) | [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) | [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLogarithmBase) | +| `Axes` ➔ [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) ➔ [`gap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryaxisbasecomponent.html#gap) | None | [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) | +| `Axes` ➔ [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) ➔ [`overlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryaxisbasecomponent.html#overlap) | None | [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap) | +| `Axes` ➔ [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) | [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | None | +| `Axes` ➔ [`IgxPercentChangeYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpercentchangeyaxiscomponent.html) | [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) | None | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.angle` | [`yAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelAngle) | [`yAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelAngle) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.angle` | [`xAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelAngle) | [`xAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelAngle) | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | +| `Axes` ➔ [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) ➔ `labelSettings.visibility` | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) | +| `Axes` ➔ [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) ➔ `labelSettings.visibility` | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-types.md new file mode 100644 index 000000000..b48f9c069 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-axis-types.md @@ -0,0 +1,1243 @@ +--- +title: Angular Axis Types | Data Visualization | Infragistics +_description: Infragistics' Angular Axis Types +_keywords: Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"] +namespace: Infragistics.Controls.Charts +_tocName: Axis Types +_premium: true +--- + +# Angular Axis Types + +The Ignite UI for Angular Category Chart uses only one [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) and one [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) type. Similarly, Ignite UI for Angular Financial Chart uses only one [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) and one [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) types. However, the Ignite UI for Angular Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes. + +## Cartesian Axes + +The [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with Cartesian Axes, allows you to plot data in horizontal (X-axis) and vertical (X-axis) direction with 3 types of X-Axis +([`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html), [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html), and [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html)) and 2 types of Y-Axis ([`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) and [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html)). + +### Category X-Axis + +The [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source. + +The [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) requires you to provide a `DataSource` and a [`label`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#label) in order to plot data with it. It is generally used with the [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) to plot the following type of series: + +| Category Series | Stacked Series | Financial Series | +|------------------|----------------|--------------------| +| - [`IgxAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html) <br> - [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) <br> - [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) <br> - [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) <br> - [`IgxSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html) <br> - [`IgxSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html) <br> - [`IgxStepLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html) <br> - [`IgxStepAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html) <br> - [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html) <br> - [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html) <br> - [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) | - [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) <br> - [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html) <br> - [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) <br> - [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html) <br> - [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) <br> - [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) <br> - [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) <br> - [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html) <br> <br> <br> <br> | - [`IgxFinancialPriceSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html) <br> - [`IgxBollingerBandsOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html) <br> - [`IgxForceIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html) <br> - [`IgxMedianPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html) <br> - [`IgxMassIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html) <br> - [`IgxRelativeStrengthIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html) <br> - [`IgxStandardDeviationIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html) <br> - [`IgxTypicalPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html) <br> <br> <br> <br> | + +The following example demonstrates usage of the [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) type: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedColumnSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedColumnSeries", { static: true } ) + private stackedColumnSeries: IgxStackedColumnSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Annual Birth Rates by World Region + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="continentsBirthRate" + label="Year" + gap="0.75"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + minimumValue="0" + maximumValue="140" + interval="20" + titleLeftMargin="10" + labelFormat="{0} m"> + </igx-numeric-y-axis> + <igx-stacked-column-series + name="stackedColumnSeries" + #stackedColumnSeries + [dataSource]="continentsBirthRate" + [xAxis]="xAxis" + [yAxis]="yAxis" + showDefaultTooltip="false"> + <igx-stacked-fragment-series + name="s1" + #s1 + valueMemberPath="Asia" + title="Asia"> + </igx-stacked-fragment-series> + <igx-stacked-fragment-series + name="s2" + #s2 + valueMemberPath="Africa" + title="Africa"> + </igx-stacked-fragment-series> + <igx-stacked-fragment-series + name="s3" + #s3 + valueMemberPath="Europe" + title="Europe"> + </igx-stacked-fragment-series> + <igx-stacked-fragment-series + name="s4" + #s4 + valueMemberPath="NorthAmerica" + title="North America"> + </igx-stacked-fragment-series> + <igx-stacked-fragment-series + name="s5" + #s5 + valueMemberPath="SouthAmerica" + title="South America"> + </igx-stacked-fragment-series> + </igx-stacked-column-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Category Y-Axis + +The [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) works very similarly to the [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a [`label`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html#label) in order to plot data with it. The [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) is generally used with the [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) to plot the following type of series: + +- [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) +- [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) +- [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) + +The following example demonstrates usage of the [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) type: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartVerticalCategoryModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("categoryHighlightLayer", { static: true } ) + private categoryHighlightLayer: IgxCategoryHighlightLayerComponent + @ViewChild("barSeries1", { static: true } ) + private barSeries1: IgxBarSeriesComponent + @ViewChild("barSeries2", { static: true } ) + private barSeries2: IgxBarSeriesComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="Chart" + #chart + [legend]="legend"> + <igx-category-y-axis + name="yAxis" + #yAxis + label="franchise" + useEnhancedIntervalManagement="true" + enhancedIntervalPreferMoreCategoryLabels="true" + [dataSource]="highestGrossingMovies" + isInverted="true" + gap="0.5" + overlap="-0.1"> + </igx-category-y-axis> + <igx-numeric-x-axis + name="xAxis" + #xAxis + title="Billions of U.S. Dollars"> + </igx-numeric-x-axis> + <igx-category-highlight-layer + name="CategoryHighlightLayer" + #categoryHighlightLayer> + </igx-category-highlight-layer> + <igx-bar-series + name="BarSeries1" + #barSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + title="Total Revenue of Franchise" + valueMemberPath="totalRevenue" + [dataSource]="highestGrossingMovies" + showDefaultTooltip="true" + isTransitionInEnabled="true" + isHighlightingEnabled="true"> + </igx-bar-series> + <igx-bar-series + name="BarSeries2" + #barSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + title="Highest Grossing Movie in Series" + valueMemberPath="highestGrossing" + [dataSource]="highestGrossingMovies" + showDefaultTooltip="true" + isTransitionInEnabled="true" + isHighlightingEnabled="true"> + </igx-bar-series> + <igx-data-tool-tip-layer + name="Tooltips" + #tooltips> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Numeric X-Axis + +The [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html). Alternatively, if combined with the [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html), these labels will be placed corresponding to the `ValueMemberPath` of the [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html), [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html), and [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html). + +The [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) is compatible with the following type of series: + +- [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) +- [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) +- [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) +- [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) +- [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) +- [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html) +- [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html) +- [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html) +- [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) +- [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) +- [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) +- [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) + +The following example demonstrates usage of the [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; +import { SampleDensityData } from "./SampleDensityData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxLegendModule, + IgxDataChartInteractivityModule +], + providers: [SampleDensityData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxHighDensityScatterSeriesComponent } from "igniteui-angular-charts"; +import { SampleDensityData } from "./SampleDensityData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + + @ViewChild("xAxis", { static: true }) + public xAxis: IgxNumericXAxisComponent; + + @ViewChild("yAxis", { static: true }) + public yAxis: IgxNumericYAxisComponent; + + public data: any[]; + + constructor() { } + + ngOnInit() { + + this.data = SampleDensityData.create(); + + const i = 0; + // const scatterSeries = new IgxHighDensityScatterSeriesComponent(); + // scatterSeries.title = "Distribution"; + // scatterSeries.dataSource = SampleDensityData.create(); + // scatterSeries.showDefaultTooltip = true; + // scatterSeries.xMemberPath = "x"; + // scatterSeries.yMemberPath = "y"; + // scatterSeries.mouseOverEnabled = true; + // scatterSeries.progressiveLoad = true; + // scatterSeries.heatMinimumColor = "Black"; + // scatterSeries.heatMaximumColor = "Yellow"; + // scatterSeries.heatMaximum = 1; + // scatterSeries.heatMinimum = 5; + // scatterSeries.resolution = 3; + // scatterSeries.xAxis = this.xAxis; + // scatterSeries.yAxis = this.yAxis; + + // this.chart.series.clear(); + // this.chart.series.add(scatterSeries); + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <label id="legendTitle">Stars Distribution in Milky Way Galaxy</label> + </div> + <igx-data-chart #chart + isHorizontalZoomEnabled=true + isVerticalZoomEnabled=true + width="100%" + height="100%"> + + <igx-numeric-x-axis #xAxis + abbreviateLargeNumbers=true + titleBottomMargin="10" + title="Plane of Rotation (in Light Years)"> + </igx-numeric-x-axis> + <igx-numeric-y-axis #yAxis + abbreviateLargeNumbers=true + titleLeftMargin="10" + title="Vertical Plane (in Light Years)"> + </igx-numeric-y-axis> + <igx-high-density-scatter-series [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="data" + xMemberPath="X" + yMemberPath="Y" + progressiveLoad=true + heatMinimumColor="Black" + heatMaximumColor="Yellow" + heatMaximum=1 + heatMinimum=5 + resolution=3> + </igx-high-density-scatter-series> + </igx-data-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Numeric Y-Axis + +The [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) labels depends on the `YMemberPath` property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html). Alternatively, if combined with the [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html), these labels will be placed corresponding to the `ValueMemberPath` of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using. + +The [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) is compatible with the following type of series: + +| Category Series | Stacked Series | Financial Series | Scatter Series | +|------------------|----------------|------------------|----------------| +| - [`IgxAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html) <br> - [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) <br> - [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) <br> - [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) <br> - [`IgxSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html) <br> - [`IgxSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html) <br> - [`IgxStepLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html) <br> - [`IgxStepAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html) <br> - [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html) <br> - [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html) <br> - [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) <br> | - [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) <br> - [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html) <br> - [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) <br> - [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html) <br> - [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) <br> - [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) <br> - [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) <br> - [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html) <br> | - [`IgxFinancialPriceSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html) <br> - [`IgxBollingerBandsOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html) <br> - [`IgxForceIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html) <br> - [`IgxMedianPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html) <br> - [`IgxMassIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html) <br> - [`IgxRelativeStrengthIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html) <br> - [`IgxStandardDeviationIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html) <br> - [`IgxTypicalPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html) <br> | - [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) <br> - [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) <br> - [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) <br> - [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) <br> - [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html) <br> - [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html) <br> - [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html) <br> - [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) <br> - [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) <br> | + +The following example demonstrates usage of the [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany'; +import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("scatterLineSeries1", { static: true } ) + private scatterLineSeries1: IgxScatterLineSeriesComponent + @ViewChild("scatterLineSeries2", { static: true } ) + private scatterLineSeries2: IgxScatterLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _healthDataForGermany: HealthDataForGermany = null; + public get healthDataForGermany(): HealthDataForGermany { + if (this._healthDataForGermany == null) + { + this._healthDataForGermany = new HealthDataForGermany(); + } + return this._healthDataForGermany; + } + + private _healthDataForFrance: HealthDataForFrance = null; + public get healthDataForFrance(): HealthDataForFrance { + if (this._healthDataForFrance == null) + { + this._healthDataForFrance = new HealthDataForFrance(); + } + return this._healthDataForFrance; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Life Expectancy vs Health Expenditure + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend"> + <igx-numeric-x-axis + name="xAxis" + #xAxis + title="Life Expectancy (in years)" + minimumValue="72" + maximumValue="84" + interval="2"> + </igx-numeric-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + title="Health Expenditure per Capita" + abbreviateLargeNumbers="true" + minimumValue="1000" + maximumValue="6000" + interval="1000"> + </igx-numeric-y-axis> + <igx-scatter-line-series + name="ScatterLineSeries1" + #scatterLineSeries1 + title="Germany" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="lifeExpectancy" + yMemberPath="healthExpense" + [dataSource]="healthDataForGermany" + markerType="Circle" + showDefaultTooltip="true"> + </igx-scatter-line-series> + <igx-scatter-line-series + name="ScatterLineSeries2" + #scatterLineSeries2 + title="France" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="lifeExpectancy" + yMemberPath="healthExpense" + [dataSource]="healthDataForFrance" + markerType="Circle" + showDefaultTooltip="true"> + </igx-scatter-line-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Time X Axis + +The [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its `DateTimeMemberPath`. This, along with a `DataSource` is required to plot data with this axis type. + +The [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) is the X-Axis type in the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) component. + +#### Breaks in Time X Axis + +The [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) has the option to exclude intervals of data by using [`breaks`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html#breaks). As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of [`IgxTimeAxisBreakComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisbreakcomponent.html) can be added to the `Breaks` collection of the axis and configured by using a unique [`start`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisbreakcomponent.html#start), [`end`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisbreakcomponent.html#end) and [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisbreakcomponent.html#interval). + +#### Formatting in Time X Axis + +The [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) has the [`labelFormats`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html#labelFormats) property, which represents a collection of [`IgxTimeAxisLabelFormatComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html) objects. Each [`IgxTimeAxisLabelFormatComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html) added to the collection is responsible for assigning a unique [`format`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html#format) and [`range`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html#range). This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart. + +The [`format`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html#format) property of the [`IgxTimeAxisLabelFormatComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html) specifies what format to use for a particular visible range. The [`range`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html#range) property of the [`IgxTimeAxisLabelFormatComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html) specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two [`IgxTimeAxisLabelFormatComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxislabelformatcomponent.html) elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format. + +#### Intervals in Time X Axis + +The [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) replaces the conventional [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericaxisbasecomponent.html#interval) property of the category and numeric axes with an [`intervals`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html#intervals) collection of type [`IgxTimeAxisIntervalComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html). Each [`IgxTimeAxisIntervalComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html) added to the collection is responsible for assigning a unique [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#interval), [`range`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#range) and [`intervalType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#intervalType). This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below: + +- [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#interval): This specifies the interval to use. This is tied to the [`intervalType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#intervalType) property. For example, if the [`intervalType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#intervalType) is set to `Days`, then the numeric value specified in [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#interval) will be in days. +- [`range`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#range): This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours. +- [`intervalType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#intervalType): This specifies the unit of time for the [`interval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimeaxisintervalcomponent.html#interval) property. + +## Polar Axes + +The [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart. + +### Category Angle Axis + +The [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. + +The [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) is generally used with the [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) to plot [Radial Series](../types/radial-chart.md). + +The following example demonstrates usage of the [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) type: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialAreaSeries1", { static: true } ) + private radialAreaSeries1: IgxRadialAreaSeriesComponent + @ViewChild("radialAreaSeries2", { static: true } ) + private radialAreaSeries2: IgxRadialAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Ronaldo vs Messi Player Stats + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + <igx-category-angle-axis + name="angleAxis" + #angleAxis + [dataSource]="footballPlayerStats" + label="attribute"> + </igx-category-angle-axis> + <igx-numeric-radius-axis + name="radiusAxis" + #radiusAxis + innerRadiusExtentScale="0.1" + interval="2" + minimumValue="0" + maximumValue="10"> + </igx-numeric-radius-axis> + <igx-radial-area-series + name="RadialAreaSeries1" + #radialAreaSeries1 + [dataSource]="footballPlayerStats" + [angleAxis]="angleAxis" + [valueAxis]="radiusAxis" + valueMemberPath="ronaldo" + showDefaultTooltip="false" + areaFillOpacity="0.5" + thickness="3" + title="Ronaldo" + markerType="Circle"> + </igx-radial-area-series> + <igx-radial-area-series + name="RadialAreaSeries2" + #radialAreaSeries2 + [dataSource]="footballPlayerStats" + [angleAxis]="angleAxis" + [valueAxis]="radiusAxis" + valueMemberPath="messi" + showDefaultTooltip="false" + areaFillOpacity="0.5" + thickness="3" + title="Messi" + markerType="Circle"> + </igx-radial-area-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Proportional Category Angle Axis + +The [`IgxProportionalCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxproportionalcategoryangleaxiscomponent.html) treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. + +The [`IgxProportionalCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxproportionalcategoryangleaxiscomponent.html) is generally used with the [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) to plot a pie chart eg. [Radial Series](../types/radial-chart.md). + +The following example demonstrates usage of the [`IgxProportionalCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxproportionalcategoryangleaxiscomponent.html) type: + +<code-view style="height: 500px" alt="Angular Proportional Category Angle Axis Example" + data-demos-base-url="{environment:dvDemosBaseUrl}" + iframe-src="{environment:dvDemosBaseUrl}/charts/data-chart/radial-proportional-category-angle-axis" + github-src="charts/data-chart/radial-proportional-category-angle-axis"> +</code-view> + + +### Numeric Angle Axis + +The [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) varies according to the value in the data column mapped using the `RadiusMemberPath` property of the [Polar Series](../types/polar-chart.md) object or the `ValueMemberPath` property of the [Radial Series](../types/radial-chart.md) object. + +The The [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) can be used with either the [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) to plot [Radial Series](../types/radial-chart.md) or with the [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) to plot [Polar Series](../types/polar-chart.md) respectively. + +The following example demonstrates usage of the [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) type: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarScatterSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarScatterSeries1", { static: true } ) + private polarScatterSeries1: IgxPolarScatterSeriesComponent + @ViewChild("polarScatterSeries2", { static: true } ) + private polarScatterSeries2: IgxPolarScatterSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Wind Speed vs Boat Speed + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + <igx-numeric-angle-axis + name="angleAxis" + #angleAxis + startAngleOffset="-90" + interval="30" + minimumValue="0" + maximumValue="360"> + </igx-numeric-angle-axis> + <igx-numeric-radius-axis + name="radiusAxis" + #radiusAxis + radiusExtentScale="0.9" + innerRadiusExtentScale="0.1" + interval="25" + minimumValue="0" + maximumValue="100"> + </igx-numeric-radius-axis> + <igx-polar-scatter-series + name="PolarScatterSeries1" + #polarScatterSeries1 + [dataSource]="boatSailingData" + [angleAxis]="angleAxis" + [radiusAxis]="radiusAxis" + angleMemberPath="direction" + radiusMemberPath="windSpeed" + showDefaultTooltip="false" + title="Wind Speed" + markerType="Circle"> + </igx-polar-scatter-series> + <igx-polar-scatter-series + name="PolarScatterSeries2" + #polarScatterSeries2 + [dataSource]="boatSailingData" + [angleAxis]="angleAxis" + [radiusAxis]="radiusAxis" + angleMemberPath="direction" + radiusMemberPath="boatSpeed" + showDefaultTooltip="false" + title="Boat Speed" + markerType="Circle"> + </igx-polar-scatter-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Numeric Radius Axis + +The [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series. + +The [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) can be used with the [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) to plot [Polar Series](../types/polar-chart.md). + +The following example demonstrates usage of the [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) type: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarLineSeries1", { static: true } ) + private polarLineSeries1: IgxPolarLineSeriesComponent + @ViewChild("polarLineSeries2", { static: true } ) + private polarLineSeries2: IgxPolarLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Wind Speed vs Boat Speed + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + <igx-numeric-angle-axis + name="angleAxis" + #angleAxis + startAngleOffset="-90" + interval="30" + minimumValue="0" + maximumValue="360"> + </igx-numeric-angle-axis> + <igx-numeric-radius-axis + name="radiusAxis" + #radiusAxis + radiusExtentScale="0.9" + innerRadiusExtentScale="0.1" + interval="25" + minimumValue="0" + maximumValue="100"> + </igx-numeric-radius-axis> + <igx-polar-line-series + name="PolarLineSeries1" + #polarLineSeries1 + [dataSource]="boatSailingData" + [angleAxis]="angleAxis" + [radiusAxis]="radiusAxis" + angleMemberPath="direction" + radiusMemberPath="windSpeed" + showDefaultTooltip="false" + thickness="1" + title="Wind Speed" + markerType="Circle"> + </igx-polar-line-series> + <igx-polar-line-series + name="PolarLineSeries2" + #polarLineSeries2 + [dataSource]="boatSailingData" + [angleAxis]="angleAxis" + [radiusAxis]="radiusAxis" + angleMemberPath="direction" + radiusMemberPath="boatSpeed" + showDefaultTooltip="false" + thickness="1" + title="Boat Speed" + markerType="Circle"> + </igx-polar-line-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Layouts](chart-axis-layouts.md) +- [Axis Options](chart-axis-options.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-aggregations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-aggregations.md new file mode 100644 index 000000000..bd54f1d1c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-aggregations.md @@ -0,0 +1,232 @@ +--- +title: Angular Data Aggregations | Data Visualization | Infragistics +_description: Infragistics' Angular Data Aggregations +_keywords: Angular Charts, Markers, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Aggregations +_premium: true +--- + +# Angular Data Aggregations + +In the Ignite UI for Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control Data Aggregations feature allows you to group data in the chart by unique values on the `XAxis` and then sort those groups. You may then apply summaries which will be reflected by the range of the `YAxis` and will be displayed in the tooltip when hovering the series. + +## Angular Data Aggregations Example + +The following example depicts a [Column Chart](../types/column-chart.md) that groups by the Country member of the `XAxis` and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property. + +Note, the abbreviated functions found within the dropdowns for [`initialSummaries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialSummaries) and [`groupSorts`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSorts) have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { SalesDataItem, SalesData } from './SalesData'; +import { IgxPropertyEditorPanelComponent, PropertyEditorValueType, IgxPropertyEditorPropertyDescriptionComponent, IgxPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts'; +import { EnumUtil } from 'igniteui-angular-core'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("editor", { static: true } ) + private editor: IgxPropertyEditorPanelComponent + @ViewChild("initialGroups", { static: true } ) + private initialGroups: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _salesData: SalesData = null; + public get salesData(): SalesData { + if (this._salesData == null) + { + this._salesData = new SalesData(); + } + return this._salesData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + this.propertyEditorInitAggregationsOnViewInit(); + } + + public propertyEditorInitAggregationsOnViewInit(): void { + + var editor = this.editor; + var initialSummariesDropdown = new IgxPropertyEditorPropertyDescriptionComponent(); + var sortGroupsDropdown = new IgxPropertyEditorPropertyDescriptionComponent(); + + initialSummariesDropdown.label = "Initial Summaries"; + initialSummariesDropdown.valueType = PropertyEditorValueType.EnumValue; + initialSummariesDropdown.shouldOverrideDefaultEditor = true; + initialSummariesDropdown.dropDownNames = ["Sum(Sales) as Sales", "Avg(Sales) as Sales", "Min(Sales) as Sales", "Max(Sales) as Sales", "Count(Sales) as Sales" ]; + initialSummariesDropdown.dropDownValues = ["Sum(Sales) as Sales", "Avg(Sales) as Sales", "Min(Sales) as Sales", "Max(Sales) as Sales", "Count(Sales) as Sales" ]; + + sortGroupsDropdown.label = "Sort Groups" + sortGroupsDropdown.valueType = PropertyEditorValueType.EnumValue; + sortGroupsDropdown.shouldOverrideDefaultEditor = true; + sortGroupsDropdown.dropDownNames = ["Sales Asc", "Sales Desc"]; + sortGroupsDropdown.dropDownValues = ["Sales Asc","Sales Desc"]; + + editor.properties.add(initialSummariesDropdown); + editor.properties.add(sortGroupsDropdown); + + initialSummariesDropdown.changed.subscribe((event: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }) => { + + var chart = this.chart; + var intialSummaryVal = event.args.newValue.toString(); + chart.initialSummaries = intialSummaryVal; + }); + + sortGroupsDropdown.changed.subscribe((event: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }) => { + + var chart = this.chart; + var groupSortsVal = event.args.newValue.toString(); + chart.groupSorts = groupSortsVal; + }); + } + + public editorChangeUpdateInitialGroups({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + var chart = this.chart; + chart.initialGroups = args.newValue.toString(); + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="editor" + #editor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="InitialGroupsHandler" + name="InitialGroups" + #initialGroups + label="Initial Groups" + valueType="EnumValue" + shouldOverrideDefaultEditor="true" + dropDownNames="Country, Product, Month, Year" + dropDownValues="Country, Product, Month, Year" + primitiveValue="Country" + (changed)="this.editorChangeUpdateInitialGroups($event)"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Sales Aggregated by Country and Product + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="salesData" + chartType="Column" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsDisplayMode="None" + initialGroups="Country" + initialSummaries="Sum(Sales) as Sales" + groupSorts="Sales Desc"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +```html +<igx-category-chart + [dataSource]="salesData" + initialGroups="country" + initialSummaries="Sum(sales) as Sales" + groupSorts="Sales Desc"> +</igx-category-chart> +``` + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`initialSortDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialSortDescriptions) +- [`initialSorts`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialSorts) +- [`sortDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#sortDescriptions) +- [`initialGroups`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) +- [`initialGroupDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroupDescriptions) +- [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupDescriptions) +- [`initialSummaries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialSummaries) +- [`initialSummaryDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialSummaryDescriptions) +- [`summaryDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#summaryDescriptions) +- [`initialGroupSortDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroupSortDescriptions) +- [`groupSorts`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSorts) +- [`groupSortDescriptions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSortDescriptions) + +> \[!Note] +> Chart Aggregation will not work when using [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-annotations.md new file mode 100644 index 000000000..15fcb7d4c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-annotations.md @@ -0,0 +1,1617 @@ +--- +title: Angular Chart Data Annotations | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Data Annotations +_keywords: Angular Charts, Data Annotations, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Annotations +_premium: true +--- + +# Angular Chart Data Annotations <label class="badge badge--preview">PREVIEW</label> + +In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data. + +> \[!Note] +> These features are designed to support cartesian axes and does not currently support radius or angle axes. + +For example, you can annotates stock prices with stock events and patterns. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataAnnotationStripLayerModule, IgxDataAnnotationSliceLayerModule, IgxDataAnnotationLineLayerModule, IgxNumberAbbreviatorModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationStripLayerModule, + IgxDataAnnotationSliceLayerModule, + IgxDataAnnotationLineLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationStripDataItem, AnnotationStripData } from './AnnotationStripData'; +import { AnnotationLineData1Item, AnnotationLineData1 } from './AnnotationLineData1'; +import { AnnotationLineData2Item, AnnotationLineData2 } from './AnnotationLineData2'; +import { AnnotationSliceStockSplitDataItem, AnnotationSliceStockSplitData } from './AnnotationSliceStockSplitData'; +import { AnnotationSliceEarningsMissDataItem, AnnotationSliceEarningsMissData } from './AnnotationSliceEarningsMissData'; +import { AnnotationSliceEarningsBeatDataItem, AnnotationSliceEarningsBeatData } from './AnnotationSliceEarningsBeatData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent, IgxDataToolTipLayerComponent, IgxDataAnnotationStripLayerComponent, IgxDataAnnotationLineLayerComponent, IgxDataAnnotationSliceLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxisBottom", { static: true } ) + private xAxisBottom: IgxCategoryXAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("xAxisTop", { static: true } ) + private xAxisTop: IgxCategoryXAxisComponent + @ViewChild("yAxisLeft", { static: true } ) + private yAxisLeft: IgxNumericYAxisComponent + @ViewChild("yAxisRight", { static: true } ) + private yAxisRight: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + @ViewChild("tooltip", { static: true } ) + private tooltip: IgxDataToolTipLayerComponent + @ViewChild("stripLayer", { static: true } ) + private stripLayer: IgxDataAnnotationStripLayerComponent + @ViewChild("lineLayer52WeekRange", { static: true } ) + private lineLayer52WeekRange: IgxDataAnnotationLineLayerComponent + @ViewChild("lineLayerGrowthAndDecline", { static: true } ) + private lineLayerGrowthAndDecline: IgxDataAnnotationLineLayerComponent + @ViewChild("sliceLayerStockSplit", { static: true } ) + private sliceLayerStockSplit: IgxDataAnnotationSliceLayerComponent + @ViewChild("sliceLayerEarningsMissAnnotations", { static: true } ) + private sliceLayerEarningsMissAnnotations: IgxDataAnnotationSliceLayerComponent + @ViewChild("sliceLayerEarningsBeatAnnotations", { static: true } ) + private sliceLayerEarningsBeatAnnotations: IgxDataAnnotationSliceLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationStripData: AnnotationStripData = null; + public get annotationStripData(): AnnotationStripData { + if (this._annotationStripData == null) + { + this._annotationStripData = new AnnotationStripData(); + } + return this._annotationStripData; + } + + private _annotationLineData1: AnnotationLineData1 = null; + public get annotationLineData1(): AnnotationLineData1 { + if (this._annotationLineData1 == null) + { + this._annotationLineData1 = new AnnotationLineData1(); + } + return this._annotationLineData1; + } + + private _annotationLineData2: AnnotationLineData2 = null; + public get annotationLineData2(): AnnotationLineData2 { + if (this._annotationLineData2 == null) + { + this._annotationLineData2 = new AnnotationLineData2(); + } + return this._annotationLineData2; + } + + private _annotationSliceStockSplitData: AnnotationSliceStockSplitData = null; + public get annotationSliceStockSplitData(): AnnotationSliceStockSplitData { + if (this._annotationSliceStockSplitData == null) + { + this._annotationSliceStockSplitData = new AnnotationSliceStockSplitData(); + } + return this._annotationSliceStockSplitData; + } + + private _annotationSliceEarningsMissData: AnnotationSliceEarningsMissData = null; + public get annotationSliceEarningsMissData(): AnnotationSliceEarningsMissData { + if (this._annotationSliceEarningsMissData == null) + { + this._annotationSliceEarningsMissData = new AnnotationSliceEarningsMissData(); + } + return this._annotationSliceEarningsMissData; + } + + private _annotationSliceEarningsBeatData: AnnotationSliceEarningsBeatData = null; + public get annotationSliceEarningsBeatData(): AnnotationSliceEarningsBeatData { + if (this._annotationSliceEarningsBeatData == null) + { + this._annotationSliceEarningsBeatData = new AnnotationSliceEarningsBeatData(); + } + return this._annotationSliceEarningsBeatData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="false" + isHorizontalZoomEnabled="true" + brushes="green red" + outlines="green red" + plotAreaMarginLeft="10" + plotAreaMarginTop="0" + plotAreaMarginRight="20" + plotAreaMarginBottom="0" + leftMargin="10" + topMargin="0" + rightMargin="20" + bottomMargin="0" + isWindowSyncedToVisibleRange="false" + chartTitle="This Data Chart has multiple Data Annotation Layers bound to data that annotates important events and patterns in stock prices."> + <igx-category-x-axis + name="xAxisBottom" + #xAxisBottom + [dataSource]="stockTesla" + label="index" + tickLength="0" + labelLocation="OutsideBottom" + labelTextColor="rgba(0, 0, 0, 0)" + labelTextStyle="normal normal 12px Verdana" + labelExtent="140" + labelLeftMargin="0" + labelTopMargin="15" + labelRightMargin="0" + labelBottomMargin="15" + labelAngle="90"> + </igx-category-x-axis> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="stockTesla" + label="date" + labelLeftMargin="0" + labelTopMargin="5" + labelRightMargin="0" + labelBottomMargin="5"> + </igx-category-x-axis> + <igx-category-x-axis + name="xAxisTop" + #xAxisTop + [dataSource]="stockTesla" + label="date" + tickLength="0" + labelLocation="OutsideTop" + labelTextStyle="normal normal 12px Verdana" + labelExtent="40" + labelTextColor="rgba(0, 0, 0, 0)" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxisLeft" + #yAxisLeft + labelLocation="OutsideLeft" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Right" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-numeric-y-axis + name="yAxisRight" + #yAxisRight + labelLocation="OutsideRight" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Left" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxis" + [yAxis]="yAxisLeft" + [dataSource]="stockTesla" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + showDefaultTooltip="false"> + </igx-financial-price-series> + <igx-data-tool-tip-layer + name="Tooltip" + #tooltip + includedColumns="high, low, open, close" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + <igx-data-annotation-strip-layer + name="StripLayer" + #stripLayer + [dataSource]="annotationStripData" + [targetAxis]="xAxisTop" + centerLabelMemberPath="label" + startValueMemberPath="start" + endValueMemberPath="end" + endLabelDisplayMode="Hidden" + startLabelDisplayMode="Hidden" + brush="black" + outline="black" + overlayTextColor="purple" + overlayTextLocation="Hidden" + overlayTextMemberPath="label"> + </igx-data-annotation-strip-layer> + <igx-data-annotation-line-layer + name="LineLayer52WeekRange" + #lineLayer52WeekRange + [dataSource]="annotationLineData1" + [targetAxis]="yAxisRight" + centerLabelXDisplayMode="Hidden" + startLabelXDisplayMode="Hidden" + startLabelYDisplayMode="DataValue" + endLabelXDisplayMode="Hidden" + endLabelYDisplayMode="DataValue" + brush="purple" + outline="purple" + overlayTextColor="purple" + overlayTextVerticalMargin="5" + overlayTextHorizontalMargin="5" + overlayTextLocation="OutsideBottomLeft" + overlayTextMemberPath="label" + startLabelXMemberPath="startLabel" + endLabelXMemberPath="endLabel" + startValueXMemberPath="startX" + startValueYMemberPath="startY" + endValueXMemberPath="endX" + endValueYMemberPath="endY"> + </igx-data-annotation-line-layer> + <igx-data-annotation-line-layer + name="LineLayerGrowthAndDecline" + #lineLayerGrowthAndDecline + [dataSource]="annotationLineData2" + [targetAxis]="xAxis" + centerLabelXDisplayMode="Hidden" + startLabelXDisplayMode="Hidden" + endLabelXDisplayMode="Hidden" + annotationBackgroundMode="BrightnessShift" + brush="purple" + outline="purple" + overlayTextColor="purple" + overlayTextVerticalMargin="-10" + overlayTextHorizontalMargin="70" + overlayTextMemberPath="label" + startLabelXMemberPath="startLabel" + endLabelXMemberPath="endLabel" + startValueXMemberPath="startX" + startValueYMemberPath="startY" + endValueXMemberPath="endX" + endValueYMemberPath="endY"> + </igx-data-annotation-line-layer> + <igx-data-annotation-slice-layer + name="SliceLayerStockSplit" + #sliceLayerStockSplit + [dataSource]="annotationSliceStockSplitData" + [targetAxis]="xAxisBottom" + brush="dodgerblue" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextAngle="90" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="Hidden"> + </igx-data-annotation-slice-layer> + <igx-data-annotation-slice-layer + name="SliceLayerEarningsMissAnnotations" + #sliceLayerEarningsMissAnnotations + [dataSource]="annotationSliceEarningsMissData" + [targetAxis]="xAxisBottom" + brush="red" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextAngle="90" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="Hidden"> + </igx-data-annotation-slice-layer> + <igx-data-annotation-slice-layer + name="SliceLayerEarningsBeatAnnotations" + #sliceLayerEarningsBeatAnnotations + [dataSource]="annotationSliceEarningsBeatData" + [targetAxis]="xAxisBottom" + brush="green" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextAngle="90" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="Hidden"> + </igx-data-annotation-slice-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a> + +## Angular Data Annotation Slice Layer Example + +In Angular, the link:{DataChartLink}.DataAnnotationSliceLayer.html\[DataAnnotationSliceLayer] renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the `AnnotationValueMemberPath` property. + +For example, you can use DataAnnotationSliceLayer to annotate stock prices with important events such as stock split and outcome of earning reports. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataAnnotationSliceLayerModule, IgxNumberAbbreviatorModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationSliceLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationSliceStockSplitDataItem, AnnotationSliceStockSplitData } from './AnnotationSliceStockSplitData'; +import { AnnotationSliceEarningsMissDataItem, AnnotationSliceEarningsMissData } from './AnnotationSliceEarningsMissData'; +import { AnnotationSliceEarningsBeatDataItem, AnnotationSliceEarningsBeatData } from './AnnotationSliceEarningsBeatData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent, IgxDataToolTipLayerComponent, IgxDataAnnotationSliceLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxisBottom", { static: true } ) + private xAxisBottom: IgxCategoryXAxisComponent + @ViewChild("xAxisTop", { static: true } ) + private xAxisTop: IgxCategoryXAxisComponent + @ViewChild("yAxisLeft", { static: true } ) + private yAxisLeft: IgxNumericYAxisComponent + @ViewChild("yAxisRight", { static: true } ) + private yAxisRight: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + @ViewChild("tooltip", { static: true } ) + private tooltip: IgxDataToolTipLayerComponent + @ViewChild("sliceLayerStockSplit", { static: true } ) + private sliceLayerStockSplit: IgxDataAnnotationSliceLayerComponent + @ViewChild("sliceLayerEarningsMissAnnotations", { static: true } ) + private sliceLayerEarningsMissAnnotations: IgxDataAnnotationSliceLayerComponent + @ViewChild("sliceLayerEarningsBeatAnnotations", { static: true } ) + private sliceLayerEarningsBeatAnnotations: IgxDataAnnotationSliceLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationSliceStockSplitData: AnnotationSliceStockSplitData = null; + public get annotationSliceStockSplitData(): AnnotationSliceStockSplitData { + if (this._annotationSliceStockSplitData == null) + { + this._annotationSliceStockSplitData = new AnnotationSliceStockSplitData(); + } + return this._annotationSliceStockSplitData; + } + + private _annotationSliceEarningsMissData: AnnotationSliceEarningsMissData = null; + public get annotationSliceEarningsMissData(): AnnotationSliceEarningsMissData { + if (this._annotationSliceEarningsMissData == null) + { + this._annotationSliceEarningsMissData = new AnnotationSliceEarningsMissData(); + } + return this._annotationSliceEarningsMissData; + } + + private _annotationSliceEarningsBeatData: AnnotationSliceEarningsBeatData = null; + public get annotationSliceEarningsBeatData(): AnnotationSliceEarningsBeatData { + if (this._annotationSliceEarningsBeatData == null) + { + this._annotationSliceEarningsBeatData = new AnnotationSliceEarningsBeatData(); + } + return this._annotationSliceEarningsBeatData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="false" + isHorizontalZoomEnabled="true" + brushes="green red" + outlines="green red" + plotAreaMarginLeft="10" + plotAreaMarginTop="0" + plotAreaMarginRight="20" + plotAreaMarginBottom="0" + leftMargin="10" + topMargin="0" + rightMargin="20" + bottomMargin="0" + isWindowSyncedToVisibleRange="false" + chartTitle="This Data Chart demonstrates the DataAnnotationSliceLayer bound to data that annotates stock splits and earnings miss/beat events."> + <igx-category-x-axis + name="xAxisBottom" + #xAxisBottom + [dataSource]="stockTesla" + label="index" + tickLength="0" + labelLocation="OutsideBottom" + labelTextColor="rgba(0, 0, 0, 0)" + labelTextStyle="normal normal 12px Verdana" + labelExtent="140" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + labelAngle="90"> + </igx-category-x-axis> + <igx-category-x-axis + name="xAxisTop" + #xAxisTop + [dataSource]="stockTesla" + label="date" + labelLocation="OutsideBottom"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxisLeft" + #yAxisLeft + labelLocation="OutsideLeft" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Right" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-numeric-y-axis + name="yAxisRight" + #yAxisRight + labelLocation="OutsideRight" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Left" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxisTop" + [yAxis]="yAxisLeft" + [dataSource]="stockTesla" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + showDefaultTooltip="false"> + </igx-financial-price-series> + <igx-data-tool-tip-layer + name="Tooltip" + #tooltip + includedColumns="high, low, open, close" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + <igx-data-annotation-slice-layer + name="SliceLayerStockSplit" + #sliceLayerStockSplit + [dataSource]="annotationSliceStockSplitData" + [targetAxis]="xAxisBottom" + brush="dodgerblue" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextAngle="90" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="Hidden"> + </igx-data-annotation-slice-layer> + <igx-data-annotation-slice-layer + name="SliceLayerEarningsMissAnnotations" + #sliceLayerEarningsMissAnnotations + [dataSource]="annotationSliceEarningsMissData" + [targetAxis]="xAxisBottom" + brush="red" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextAngle="90" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="Hidden"> + </igx-data-annotation-slice-layer> + <igx-data-annotation-slice-layer + name="SliceLayerEarningsBeatAnnotations" + #sliceLayerEarningsBeatAnnotations + [dataSource]="annotationSliceEarningsBeatData" + [targetAxis]="xAxisBottom" + brush="green" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextAngle="90" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="Hidden"> + </igx-data-annotation-slice-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Data Annotation Strip Layer Example + +In Angular, the [`IgxDataAnnotationStripLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationstriplayercomponent.html) renders multiple vertical or horizontal strips between 2 values on an axis in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the [`IgxDataAnnotationStripLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationstriplayercomponent.html) also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property. + +For example, you can use [`IgxDataAnnotationStripLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationstriplayercomponent.html) to annotate chart with stock market crashes and changes in federal interest rates. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataAnnotationStripLayerModule, IgxNumberAbbreviatorModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationStripLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationStripDataItem, AnnotationStripData } from './AnnotationStripData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent, IgxDataToolTipLayerComponent, IgxDataAnnotationStripLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxisBottom", { static: true } ) + private xAxisBottom: IgxCategoryXAxisComponent + @ViewChild("xAxisTop", { static: true } ) + private xAxisTop: IgxCategoryXAxisComponent + @ViewChild("yAxisLeft", { static: true } ) + private yAxisLeft: IgxNumericYAxisComponent + @ViewChild("yAxisRight", { static: true } ) + private yAxisRight: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + @ViewChild("tooltip", { static: true } ) + private tooltip: IgxDataToolTipLayerComponent + @ViewChild("stripLayer", { static: true } ) + private stripLayer: IgxDataAnnotationStripLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationStripData: AnnotationStripData = null; + public get annotationStripData(): AnnotationStripData { + if (this._annotationStripData == null) + { + this._annotationStripData = new AnnotationStripData(); + } + return this._annotationStripData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="false" + isHorizontalZoomEnabled="true" + brushes="green red" + outlines="green red" + plotAreaMarginLeft="10" + plotAreaMarginTop="0" + plotAreaMarginRight="20" + plotAreaMarginBottom="0" + leftMargin="10" + topMargin="0" + rightMargin="20" + bottomMargin="0" + isWindowSyncedToVisibleRange="false" + chartTitle="This Data Chart demonstrates the DataAnnotationStripLayer bound to data that markert events affecting stock prices."> + <igx-category-x-axis + name="xAxisBottom" + #xAxisBottom + [dataSource]="stockTesla" + label="date" + labelLeftMargin="10" + labelTopMargin="5" + labelRightMargin="10" + labelBottomMargin="15"> + </igx-category-x-axis> + <igx-category-x-axis + name="xAxisTop" + #xAxisTop + [dataSource]="stockTesla" + label="date" + tickLength="0" + labelTextColor="rgba(0, 0, 0, 0)" + labelLocation="OutsideTop" + labelTextStyle="normal normal 12px Verdana" + labelExtent="40" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxisLeft" + #yAxisLeft + labelLocation="OutsideLeft" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Right" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-numeric-y-axis + name="yAxisRight" + #yAxisRight + labelLocation="OutsideRight" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Left" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxisBottom" + [yAxis]="yAxisLeft" + [dataSource]="stockTesla" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + showDefaultTooltip="false"> + </igx-financial-price-series> + <igx-data-tool-tip-layer + name="Tooltip" + #tooltip + includedColumns="high, low, open, close" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + <igx-data-annotation-strip-layer + name="StripLayer" + #stripLayer + [dataSource]="annotationStripData" + [targetAxis]="xAxisTop" + centerLabelMemberPath="label" + startValueMemberPath="start" + endValueMemberPath="end" + startLabelDisplayMode="Hidden" + endLabelDisplayMode="Hidden" + brush="black" + outline="black" + overlayTextColor="purple" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="-50" + overlayTextLocation="InsideTopCenter" + overlayTextMemberPath="label"> + </igx-data-annotation-strip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Data Annotation Line Layer Example + +In Angular, [`IgxDataAnnotationLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html) renders multiple lines between 2 points in plot area of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. + +For example, you can use DataAnnotationLineLayer to annotate growth and decline patterns in stock prices and 52-week high and low of stock prices on y-axis. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataAnnotationLineLayerModule, IgxNumberAbbreviatorModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationLineLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationLineData1Item, AnnotationLineData1 } from './AnnotationLineData1'; +import { AnnotationLineData2Item, AnnotationLineData2 } from './AnnotationLineData2'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent, IgxDataToolTipLayerComponent, IgxDataAnnotationLineLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxisLeft", { static: true } ) + private yAxisLeft: IgxNumericYAxisComponent + @ViewChild("yAxisRight", { static: true } ) + private yAxisRight: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + @ViewChild("tooltip", { static: true } ) + private tooltip: IgxDataToolTipLayerComponent + @ViewChild("lineLayer52WeekRange", { static: true } ) + private lineLayer52WeekRange: IgxDataAnnotationLineLayerComponent + @ViewChild("lineLayerGrowthAndDecline", { static: true } ) + private lineLayerGrowthAndDecline: IgxDataAnnotationLineLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationLineData1: AnnotationLineData1 = null; + public get annotationLineData1(): AnnotationLineData1 { + if (this._annotationLineData1 == null) + { + this._annotationLineData1 = new AnnotationLineData1(); + } + return this._annotationLineData1; + } + + private _annotationLineData2: AnnotationLineData2 = null; + public get annotationLineData2(): AnnotationLineData2 { + if (this._annotationLineData2 == null) + { + this._annotationLineData2 = new AnnotationLineData2(); + } + return this._annotationLineData2; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="false" + isHorizontalZoomEnabled="true" + brushes="green red" + outlines="green red" + plotAreaMarginLeft="10" + plotAreaMarginTop="0" + plotAreaMarginRight="20" + plotAreaMarginBottom="0" + leftMargin="10" + topMargin="0" + rightMargin="20" + bottomMargin="0" + isWindowSyncedToVisibleRange="false" + chartTitle="The Data Chart demonstrates the DataAnnotationLineLayer bound to data that annotates stock growth and decline patterns."> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="stockTesla" + label="date" + labelLeftMargin="0" + labelTopMargin="10" + labelRightMargin="0" + labelBottomMargin="15"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxisLeft" + #yAxisLeft + labelLocation="OutsideLeft" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Right" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-numeric-y-axis + name="yAxisRight" + #yAxisRight + labelLocation="OutsideRight" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Left" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxis" + [yAxis]="yAxisLeft" + [dataSource]="stockTesla" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + showDefaultTooltip="false"> + </igx-financial-price-series> + <igx-data-tool-tip-layer + name="Tooltip" + #tooltip + includedColumns="high, low, open, close" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + <igx-data-annotation-line-layer + name="LineLayer52WeekRange" + #lineLayer52WeekRange + [dataSource]="annotationLineData1" + [targetAxis]="yAxisRight" + centerLabelXDisplayMode="Hidden" + startLabelXDisplayMode="Hidden" + startLabelYDisplayMode="DataValue" + endLabelXDisplayMode="Hidden" + endLabelYDisplayMode="DataValue" + brush="purple" + outline="purple" + overlayTextColor="purple" + overlayTextVerticalMargin="5" + overlayTextHorizontalMargin="0" + overlayTextLocation="OutsideBottomLeft" + overlayTextMemberPath="label" + startLabelXMemberPath="startLabel" + endLabelXMemberPath="endLabel" + startValueXMemberPath="startX" + startValueYMemberPath="startY" + endValueXMemberPath="endX" + endValueYMemberPath="endY"> + </igx-data-annotation-line-layer> + <igx-data-annotation-line-layer + name="LineLayerGrowthAndDecline" + #lineLayerGrowthAndDecline + [dataSource]="annotationLineData2" + [targetAxis]="xAxis" + centerLabelXDisplayMode="Hidden" + startLabelXDisplayMode="Hidden" + endLabelXDisplayMode="Hidden" + annotationBackgroundMode="BrightnessShift" + brush="purple" + outline="purple" + overlayTextColor="purple" + overlayTextVerticalMargin="-10" + overlayTextHorizontalMargin="70" + overlayTextMemberPath="label" + startLabelXMemberPath="startLabel" + endLabelXMemberPath="endLabel" + startValueXMemberPath="startX" + startValueYMemberPath="startY" + endValueXMemberPath="endX" + endValueYMemberPath="endY"> + </igx-data-annotation-line-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Data Annotation Rect Layer Example + +In Angular, the [`IgxDataAnnotationRectLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) renders multiple rectangles defined by starting and ending points in plot area of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. + +For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataAnnotationRectLayerModule, IgxNumberAbbreviatorModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationRectLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationRectDataItem, AnnotationRectData } from './AnnotationRectData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent, IgxDataToolTipLayerComponent, IgxDataAnnotationRectLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + @ViewChild("tooltip", { static: true } ) + private tooltip: IgxDataToolTipLayerComponent + @ViewChild("rectLayer", { static: true } ) + private rectLayer: IgxDataAnnotationRectLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationRectData: AnnotationRectData = null; + public get annotationRectData(): AnnotationRectData { + if (this._annotationRectData == null) + { + this._annotationRectData = new AnnotationRectData(); + } + return this._annotationRectData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="false" + isHorizontalZoomEnabled="true" + brushes="green red" + outlines="green red" + plotAreaMarginLeft="10" + plotAreaMarginTop="0" + plotAreaMarginRight="20" + plotAreaMarginBottom="0" + leftMargin="10" + topMargin="0" + rightMargin="20" + bottomMargin="0" + isWindowSyncedToVisibleRange="false" + chartTitle="This Data Chart demonstrates the DataAnnotationRectLayer bound to data that annotates bearish patterns in stock prices."> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="stockTesla" + label="date" + labelLeftMargin="0" + labelTopMargin="10" + labelRightMargin="0" + labelBottomMargin="10"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="stockTesla" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + showDefaultTooltip="false"> + </igx-financial-price-series> + <igx-data-tool-tip-layer + name="Tooltip" + #tooltip + includedColumns="high, low, open, close" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + <igx-data-annotation-rect-layer + name="RectLayer" + #rectLayer + [dataSource]="annotationRectData" + [targetAxis]="xAxis" + centerLabelXDisplayMode="Hidden" + startLabelXDisplayMode="Hidden" + endLabelXDisplayMode="Hidden" + startLabelYDisplayMode="Hidden" + endLabelYDisplayMode="Hidden" + actualAreaFillOpacity="0.1" + brush="purple" + outline="purple" + overlayTextColor="purple" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="-50" + overlayTextLocation="OutsideBottomCenter" + overlayTextMemberPath="label" + startLabelXMemberPath="startLabel" + endLabelXMemberPath="endLabel" + startValueXMemberPath="startX" + startValueYMemberPath="startY" + endValueXMemberPath="endX" + endValueYMemberPath="endY"> + </igx-data-annotation-rect-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Data Annotation Band Layer Example + +In Angular, the [`IgxDataAnnotationBandLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html) renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property. + +For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataAnnotationBandLayerModule, IgxNumberAbbreviatorModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationBandLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationBandDataItem, AnnotationBandData } from './AnnotationBandData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent, IgxDataToolTipLayerComponent, IgxDataAnnotationBandLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxisBottom", { static: true } ) + private xAxisBottom: IgxCategoryXAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxisLeft", { static: true } ) + private yAxisLeft: IgxNumericYAxisComponent + @ViewChild("yAxisRight", { static: true } ) + private yAxisRight: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + @ViewChild("tooltip", { static: true } ) + private tooltip: IgxDataToolTipLayerComponent + @ViewChild("bandLayer", { static: true } ) + private bandLayer: IgxDataAnnotationBandLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationBandData: AnnotationBandData = null; + public get annotationBandData(): AnnotationBandData { + if (this._annotationBandData == null) + { + this._annotationBandData = new AnnotationBandData(); + } + return this._annotationBandData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="false" + isHorizontalZoomEnabled="true" + brushes="green red" + outlines="green red" + plotAreaMarginLeft="10" + plotAreaMarginTop="0" + plotAreaMarginRight="20" + plotAreaMarginBottom="0" + leftMargin="10" + topMargin="0" + rightMargin="20" + bottomMargin="0" + isWindowSyncedToVisibleRange="false" + chartTitle="Data Chart with DataAnnotationBandLayer bound to data that annotates stock rapid growth"> + <igx-category-x-axis + name="xAxisBottom" + #xAxisBottom + [dataSource]="stockTesla" + label="index" + tickLength="0" + labelLocation="OutsideBottom" + labelTextColor="rgba(0, 0, 0, 0)" + labelTextStyle="normal normal 12px Verdana" + labelExtent="120" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + labelAngle="90"> + </igx-category-x-axis> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="stockTesla" + label="date"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxisLeft" + #yAxisLeft + labelLocation="OutsideLeft" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Right" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-numeric-y-axis + name="yAxisRight" + #yAxisRight + labelLocation="OutsideRight" + labelTextStyle="normal normal 12px Verdana" + labelExtent="80" + labelHorizontalAlignment="Left" + labelLeftMargin="8" + labelTopMargin="3" + labelRightMargin="8" + labelBottomMargin="5" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxis" + [yAxis]="yAxisLeft" + [dataSource]="stockTesla" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + showDefaultTooltip="false"> + </igx-financial-price-series> + <igx-data-tool-tip-layer + name="Tooltip" + #tooltip + includedColumns="high, low, open, close" + layoutMode="Vertical"> + </igx-data-tool-tip-layer> + <igx-data-annotation-band-layer + name="BandLayer" + #bandLayer + [dataSource]="annotationBandData" + [targetAxis]="xAxisBottom" + centerLabelXDisplayMode="Hidden" + startLabelXDisplayMode="DataLabel" + endLabelXDisplayMode="DataLabel" + brush="purple" + outline="purple" + overlayTextColor="purple" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="-50" + overlayTextLocation="InsideTopCenter" + overlayTextMemberPath="label" + startLabelXMemberPath="startLabel" + endLabelXMemberPath="endLabel" + startValueXMemberPath="startX" + startValueYMemberPath="startY" + endValueXMemberPath="endX" + endValueYMemberPath="endY" + annotationBreadthMemberPath="value"> + </igx-data-annotation-band-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## API References + +The following is a list of API members mentioned in the above sections: + +- `TargetAxis`: This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `DataSource`: This property binds data to the annotation layer to provide the precise shape. +- `StartValueXMemberPath`: This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `StartValueYMemberPath`: This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `EndValueXMemberPath`: This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `EndValueYMemberPath`: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `StartLabelXMemberPath`: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis. +- `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label. +- `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of [`IgxDataAnnotationBandLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis. +- `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of [`IgxDataAnnotationBandLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationbandlayercomponent.html), [`IgxDataAnnotationLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationlinelayercomponent.html), [`IgxDataAnnotationRectLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationrectlayercomponent.html) on the y-axis. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-filtering.md new file mode 100644 index 000000000..97c488987 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-filtering.md @@ -0,0 +1,210 @@ +--- +title: Angular Chart Data Filtering | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Data Filtering +_keywords: Angular Charts, Filtering, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Filtering +_premium: true +--- + +# Angular Chart Data Filtering + +Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. + +A complete list of valid expressions and keywords to form a query string can be found here: + +[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris) + +> NOTE: Any incorrect filter applied will result with an empty chart. + +## Angular Chart Data Filter Example + +The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the [`initialFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property, to update the chart visual and thus filtering out the other decades out. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts'; +import { EnumUtil } from 'igniteui-angular-core'; +import { IgxLegendComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("editor", { static: true } ) + private editor: IgxPropertyEditorPanelComponent + @ViewChild("initialFilter", { static: true } ) + private initialFilter: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + + public editorChangeDataFilter({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + + var chart = this.chart; + var filter = args.newValue.toString(); + chart.initialFilter = "(contains(Year," + "'" + filter + "'" + "))"; + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="editor" + #editor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="InitialFilterHandler" + name="InitialFilter" + #initialFilter + label="Modify Filter" + valueType="EnumValue" + shouldOverrideDefaultEditor="true" + dropDownNames="1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020" + dropDownValues="1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020" + (changed)="this.editorChangeDataFilter($event)"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Annual Birth Rates by World Region + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="continentsBirthRate" + [legend]="legend" + chartType="Column" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsDisplayMode="None" + yAxisLabelFormat="{0}M"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +The [`initialFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. + +eg. To show all countries that start with the letter B: + +"(startswith(Country, 'B'))" + +eg. Concatenating more than one expression: + +"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isTransitionInEnabled) +- [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInDuration) +- [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-legend.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-legend.md new file mode 100644 index 000000000..3ecf1f9eb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-legend.md @@ -0,0 +1,1015 @@ +--- +title: Angular Chart Data Legend | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Angular chart with the data legend! +_keywords: Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamCategoryChart", "XamDataLegend", "Series", "DataLegendSummaryType", "DataAbbreviationMode" ] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Legend +_premium: true +--- + +# Angular Data Legend + +In Ignite UI for Angular, the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) is highly-customizable version of the [`IgxLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html), that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit). + +## Angular Data Legend Rows + +The rows of the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) include the header row, series row(s), and the summary row. The header row displays the axis label of the point that is hovered, and can be changed using the [`headerText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerText) property. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + unitsText="B" + [target]="chart"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="highestGrossingMovies" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsSnapToData="true"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Header Row + +The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use [`headerFormatDate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerFormatDate) and [`headerFormatTime`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerFormatTime) properties to format date and time in the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) if the x-axis shows dates. For other types of series, the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) does not render the header row. + +### Series Row + +The series row represents each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol or unit of measurement, if specified. You can filter series rows by setting [`includedSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedSeries) or [`excludedSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedSeries) properties to a collection of series' indexes (1, 2, 3) or series' titles (Tesla, Microsoft). + +### Summary Row + +Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the [`summaryTitleText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryTitleText) property of the legend. Also, you can use the [`summaryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryType) property to customize whether you display the [`Total`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.datalegendsummarytype.html#Total), [`Min`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.datalegendsummarytype.html#Min), [`Max`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.datalegendsummarytype.html#Max), or [`Average`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.datalegendsummarytype.html#Average) of series values in the summary row. + +## Angular Data Legend Columns + +The columns of the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) include the series title, label, value of data column, and optional unit associated with the value. Some series in the chart can have multiple columns for label, value, and units. For example, financial price series has **High**, **Low**, **Open**, and **Close** data columns which can be filtered in the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) using the [`includedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) or [`excludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) properties. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { MultipleStocks } from './MultipleStocks'; +import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _multipleStocks: MultipleStocks = null; + private _isFetching: boolean = false; + public get multipleStocks(): MultipleStocks { + if (this._multipleStocks == null && !this._isFetching) + { + this._isFetching = true; + ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck(); })(); + } + return this._multipleStocks; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + includedColumns="open, close, high, low, change"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + chartType="Candle" + isVerticalZoomEnabled="true" + isHorizontalZoomEnabled="true" + [dataSource]="multipleStocks" + dataToolTipHeaderFormatTime="None" + zoomSliderType="None"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +Setting values on the [`includedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) and [`excludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) properties, depends on type of series and how many data columns they support. For example, you can set [`includedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend. + +| Type of Series | Column Names | +| -----------------|-------------- | +| Category Series | Value | +| Radial Series | Value | +| Polar Series | Radius, Angle | +| Bubble Series | X, Y, Radius | +| Scatter Series | X, Y | +| Range Series | High, Low | +| Financial Series | High, Low, Open, Close, Change, TypicalPrice, Volume | + +Where the **TypicalPrice** and percentage **Change** of OHLC prices are automatically calculated by financial series so you do not need to include them in your data sources. + +### Title Column + +The title column displays legend badges and series titles, which come from the [`title`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#title) property of the different [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) plotted in the chart. + +### Label Column + +The label column displays short name on the left side of value column, e.g. "O" for **Open** stock price. You can toggle visibility of this column using the [`labelDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelDisplayMode) property. + +### Value Column + +The value column displays values of series as abbreviated text which can be formatted using the [`valueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) property to apply the same abbreviation for all numbers by setting this property to [`Shared`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.dataabbreviationmode.html#Shared). Alternatively, a user can select other abbreviations such as [`Independent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.dataabbreviationmode.html#Independent), [`Kilo`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.dataabbreviationmode.html#Kilo), [`Million`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.dataabbreviationmode.html#Million), etc. Precision of abbreviated values is controlled using the [`valueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) and [`valueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions) for minimum and maximum digits, respectively. + +### Unit Column + +The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the [`valueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) property, e.g. "M" for the [`Million`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_core.dataabbreviationmode.html#Million) abbreviation. + +### Customizing Columns + +You can customize text displayed in the **Label** and **Unit** columns using properties that end with **MemberAsLegendLabel** and **MemberAsLegendUnit** on each series. The following table shows some possible customizations of the **Label** and **Unit** columns. + +| Type of Series | Series Properties | +| ------|---- | +| Category Series | ValueMemberAsLegendLabel="$" <br> ValueMemberAsLegendUnit="M" | +| Radial Series | ValueMemberAsLegendLabel="Distance:" <br> ValueMemberAsLegendUnit="KM" | +| Polar Series | RadiusMemberAsLegendLabel="Radius:" <br> RadiusMemberAsLegendUnit="KM" <br> AngleMemberAsLegendLabel="Angle:" <br> AngleMemberAsLegendUnit="°" | +| Range Series | HighMemberAsLegendLabel="H:" <br> HighMemberAsLegendUnit="K" <br> LowMemberAsLegendLabel="L:" <br> LowMemberAsLegendUnit="K" | +| Financial Series | OpenMemberAsLegendLabel="O:" <br> OpenMemberAsLegendUnit="K" <br> HighMemberAsLegendLabel="H:" <br> HighMemberAsLegendUnit="K" <br> LowMemberAsLegendLabel="L:" <br> LowMemberAsLegendUnit="K" <br> CloseMemberAsLegendLabel="C:" <br> CloseMemberAsLegendUnit="K" <br> | + +Also, you can use the `UnitText` property on the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) to change text displayed in all Unit columns. + +## Layout Mode + +Legend items can be positioned in a vertical or table structure via the [`layoutMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#layoutMode) property. The default value is `Table`, which retains the same look and feel as seen in previous releases. + +eg. + +<img src="../../../images/general/layout_mode.png" alt="Layout Mode" /> + +## Angular Data Legend Styling + +The [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) provides properties for styling each type of column. Each of these properties begins with **Title**, **Label**, **Value**, or **Units**. You can style the text's color, font, and margin. For example, if you wanted to set the text color of all columns, you would set the [`titleTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#titleTextColor), [`labelTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelTextColor), [`valueTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueTextColor), and [`unitsTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#unitsTextColor) properties. The following example demonstrates a utilization of the styling properties mentioned above: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockGoogle } from './StockGoogle'; +import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _stockGoogle: StockGoogle = null; + public get stockGoogle(): StockGoogle { + if (this._stockGoogle == null) + { + this._stockGoogle = new StockGoogle(); + } + return this._stockGoogle; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + includedColumns="open, close, high, low, change" + labelTextColor="rgba(74, 74, 74, 1)" + unitsText="K" + unitsTextColor="rgba(0, 173, 3, 1)" + unitsTextStyle="normal bold 14px Verdana" + valueFormatMode="Currency" + valueTextColor="rgba(0, 173, 3, 1)" + valueTextStyle="normal bold 14px Verdana"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + isVerticalZoomEnabled="true" + isHorizontalZoomEnabled="true" + [dataSource]="stockGoogle" + toolTipType="None" + yAxisTitle="Thousands of Dollars ($)" + zoomSliderType="None"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Legend Value Formatting + +The [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) provides automatic abbreviation of large numbers using its [`valueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`valueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) and [`valueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. +The following example demonstrates how to use those properties: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + valueFormatMode="Decimal" + valueFormatMinFractions="1" + unitsText="B"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="highestGrossingMovies" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + toolTipType="None" + crosshairsDisplayMode="None" + isCategoryHighlightingEnabled="true"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Legend Value Mode + +You have the ability to change the default decimal display of values within the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) to a currency by changing the [`valueFormatMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMode) property. Also, you can change the culture of the displayed currency symbol by setting the [`valueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) property a culture tag. For example, the following example data legend with the [`valueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) set to "en-GB" to display British Pounds (£) symbol: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { MultipleStocks } from './MultipleStocks'; +import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _multipleStocks: MultipleStocks = null; + private _isFetching: boolean = false; + public get multipleStocks(): MultipleStocks { + if (this._multipleStocks == null && !this._isFetching) + { + this._isFetching = true; + ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck(); })(); + } + return this._multipleStocks; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + includedColumns="close, change, value" + excludedColumns="high, low, open, volume" + labelDisplayMode="Hidden" + valueFormatMode="Currency" + valueFormatCulture="en-GB"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + chartType="Candle" + [dataSource]="multipleStocks" + dataToolTipValueFormatMode="Currency" + dataToolTipValueFormatCulture="en-GB" + dataToolTipLabelDisplayMode="Hidden" + dataToolTipIncludedColumns="Close, Change, Value" + dataToolTipHeaderFormatTime="None" + zoomSliderType="None"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Legend Grouping + +[`dataLegendGroup`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: +By default, DataLegend will hide names of groups, but you can display group names by setting the [`groupRowVisible`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupRowVisible) property to true. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataLegendModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + NumberAbbreviatorDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + groupRowVisible="true"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="olympicMedalsTopCountriesWithTotals" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="America" + valueMemberPath="america" + dataLegendGroup="Medals by Country"> + </igx-column-series> + <igx-column-series + name="ColumnSeries2" + #columnSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="China" + valueMemberPath="china" + dataLegendGroup="Medals by Country"> + </igx-column-series> + <igx-column-series + name="ColumnSeries3" + #columnSeries3 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="Russia" + valueMemberPath="russia" + dataLegendGroup="Medals by Country"> + </igx-column-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Legend Styling & Events + +Several properties are exposed including grouping portions of the legend. + +- `GroupRowMargin` +- `GroupTextMargin` +- [`groupTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupTextColor) +- `GroupTextFontSize` +- `GroupTextFontFamily` +- `GroupTextFontStyle` +- `GroupTextFontStretch` +- `GroupTextFontWeight` +- `HeaderTextMargin` +- [`headerTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) +- `HeaderTextFontSize` +- `HeaderTextFontFamily` +- `HeaderTextFontStyle` +- `HeaderTextFontStretch` +- `HeaderTextFontWeight` + +The [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for: + +- `StyleGroupRow`: This event fires for each group to style text displayed in group rows. +- `StyleHeaderRow`: This event fires when rendering the header row. +- `StyleSeriesRow`: This event fires once for each series row, which allows conditional styling of the values of the series. +- `StyleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart. +- `StyleSummaryRow`: This event fires once when rendering the summary row. +- `StyleSummaryColumn`: This event fires once when rendering the summary column. + +Some of the events exposes a [`IgxDataLegendStylingRowEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingroweventargs.html) parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series. + +`StyleSummaryColumn` and `SeriesStyleColumn` events expose a [`IgxDataLegendStylingColumnEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingcolumneventargs.html) parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properties about the columns. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataLegendModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + NumberAbbreviatorDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + groupRowVisible="true" + groupTextColor="purple" + groupTextStyle="Italic bold 20px Arial"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + name="chart" + #chart + highlightedValuesDisplayMode="Overlay"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="olympicMedalsTopCountriesWithTotals" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="" + valueMemberPath="total" + dataLegendGroup="Total Medals" + highlightedValuesDataLegendGroup="Country" + highlightedValueMemberPath="america" + highlightedTitleSuffix="America"> + </igx-column-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer + groupRowVisible="true" + groupingMode="Grouped"> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## API References + +- [`excludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedColumns) +- [`excludedSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#excludedSeries) +- [`headerFormatDate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerFormatDate) +- [`headerFormatTime`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerFormatTime) +- [`headerText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerText) +- [`includedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedColumns) +- [`includedSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#includedSeries) +- [`labelDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelDisplayMode) +- [`labelTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingcolumneventargs.html#labelTextColor) +- `StyleHeaderRow`: +- `StyleSeriesColumn`: +- `StyleSeriesRow` +- `StyleSeriesRow`: +- `StyleSummaryColumn`: +- `StyleSummaryRow`: +- [`summaryTitleText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryTitleText) +- [`summaryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#summaryType) +- [`titleTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#titleTextColor) +- `UnitText` +- [`unitsTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingcolumneventargs.html#unitsTextColor) +- [`valueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatAbbreviation) +- [`valueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatCulture) +- [`valueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions) +- [`valueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMaxFractions) +- [`valueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMinFractions) +- [`valueFormatMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueFormatMode) +- [`valueTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendstylingcolumneventargs.html#valueTextColor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-selection.md new file mode 100644 index 000000000..bd38773a0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-selection.md @@ -0,0 +1,641 @@ +--- +title: Angular Chart Data Selection | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Angular chart with the data selection! +_keywords: Angular charts, chart data, selection, data selection, Ignite UI for Angular, Infragistics +_license: commercial +_language: en +mentionedTypes: ["XamDataChart", "Legend", "CategoryChart", "FinancialChart", "XamDataLegend", "DataToolTipLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Selection +_premium: true +--- + +# Angular Chart Selection + +The Ignite UI for Angular selection feature in Angular {ComponentTitle} allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart. This provides many different possibilities with how users interact with the data presented in more meaningful ways. + +## Configuring Selection + +The default behavior [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionMode) turned off and requires opting into one of the following options. There are several selection modes available in the `{ComponentName}`: + +- **Auto** +- **None** +- **Brighten** +- **FadeOthers** +- **GrayscaleOthers** +- **FocusColorThickOutline** +- **FocusColorOutline** +- **SelectionColorThickOutline** +- **SelectionColorOutline** +- **FocusColorFill** +- **SelectionColorFill** +- **ThickOutline** + +`Brighten` will fade the selected item while `FadeOthers` will cause the opposite effect occur. +`GrayscaleOthers` will behave similarly to `FadeOthers` but instead show a gray color to the rest of the series. Note this will override any [`selectionBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionBrush) setting. +`SelectionColorOutline` and `SelectionColorThickOutline` will draw a border around the series. + +In conjunction, a [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionBehavior) is available to provide greater control on which items get selected. The default behavior for Auto is `PerSeriesAndDataItemMultiSelect`. + +- **Auto** +- **PerDataItemMultiSelect** +- **PerDataItemSingleSelect** +- **PerSeriesAndDataItemMultiSelect** +- **PerSeriesAndDataItemSingleSelect** +- **PerSeriesAndDataItemGlobalSingleSelect** +- **PerSeriesMultiSelect** +- **PerSeriesSingleSelect** + +## Configuring Selection via Color Fill + +The following example shows the combination of both `SelectionColorFill` and `Auto` selection behavior aka `PerSeriesAndDataItemMultiSelect`. Color Fills provide a useful visual cue as it changes the entire series item's back color. By clicking each item you'll see the item change from green to purple. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _temperatureAverageData: TemperatureAverageData = null; + public get temperatureAverageData(): TemperatureAverageData { + if (this._temperatureAverageData == null) + { + this._temperatureAverageData = new TemperatureAverageData(); + } + return this._temperatureAverageData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Average Temperature Range in New York + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="temperatureAverageData" + yAxisTitle="Temperature in Degrees Celsius" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsDisplayMode="None" + toolTipType="None" + selectionMode="SelectionColorFill" + selectionBehavior="Auto" + selectionBrush="purple" + focusBrush="purple"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Configuring Multiple Selection + +Other selection modes offer various methods of selection. For example using [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionBehavior) with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. +`PerSeriesAndDataItemGlobalSingleSelect` allows single series selection across all categories at a time. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("selectionModeEditor", { static: true } ) + private selectionModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("selectionBehaviorEditor", { static: true } ) + private selectionBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="SelectionMode" + name="SelectionModeEditor" + #selectionModeEditor + label="Selection Mode: " + primitiveValue="SelectionColorFill"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="SelectionBehavior" + name="SelectionBehaviorEditor" + #selectionBehaviorEditor + label="Selection Behavior: " + primitiveValue="PerSeriesAndDataItemGlobalSingleSelect"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="energyRenewableConsumption" + [legend]="legend" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsDisplayMode="None" + selectionMode="SelectionColorFill" + selectionBehavior="PerSeriesAndDataItemGlobalSingleSelect" + selectionBrush="orange" + focusBrush="orange"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Configuring Outline Selection + +When [`focusBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#focusBrush) is applied, selected series will appear with a border when the [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectionMode) property is set to one of the focus options. + +## Radial Series Selection + +This example demonstrates another series type via the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) where each radial series can be selected with different colors. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialColumnSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialColumnSeries1", { static: true } ) + private radialColumnSeries1: IgxRadialColumnSeriesComponent + @ViewChild("radialColumnSeries2", { static: true } ) + private radialColumnSeries2: IgxRadialColumnSeriesComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Ronaldo vs Messi Player Stats + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + selectionMode="SelectionColorFill" + selectionBehavior="PerSeriesMultiSelect"> + <igx-category-angle-axis + name="angleAxis" + #angleAxis + [dataSource]="footballPlayerStats" + label="attribute"> + </igx-category-angle-axis> + <igx-numeric-radius-axis + name="radiusAxis" + #radiusAxis + innerRadiusExtentScale="0.1" + interval="2" + minimumValue="0" + maximumValue="10"> + </igx-numeric-radius-axis> + <igx-radial-column-series + name="RadialColumnSeries1" + #radialColumnSeries1 + [dataSource]="footballPlayerStats" + [angleAxis]="angleAxis" + [valueAxis]="radiusAxis" + valueMemberPath="ronaldo" + showDefaultTooltip="false" + areaFillOpacity="0.8" + thickness="3" + title="Ronaldo" + selectionBrush="yellow"> + </igx-radial-column-series> + <igx-radial-column-series + name="RadialColumnSeries2" + #radialColumnSeries2 + [dataSource]="footballPlayerStats" + [angleAxis]="angleAxis" + [valueAxis]="radiusAxis" + valueMemberPath="messi" + showDefaultTooltip="false" + areaFillOpacity="0.8" + thickness="3" + title="Messi" + selectionBrush="cyan"> + </igx-radial-column-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Programmatic Selection + +Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html). The `Matcher` property of the [`IgxChartSelection`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartselection.html) object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. + +The matcher is ideal for using in charts, such as the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) when you do not have access to the actual series, like the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the [`selectedSeriesItems`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) collection using a matcher with the following properties set + +For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCoreModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartAnnotationModule, + IgxDataChartInteractivityModule, + IgxDataChartCoreModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, CategoryChartDescriptionModule, DataChartAnnotationDescriptionModule, DataChartInteractivityDescriptionModule, DataChartCoreDescriptionModule } from 'igniteui-angular-core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxCategoryChartComponent, IgxChartSelection, IgxSeriesMatcher } from 'igniteui-angular-charts'; +import { IgxLegendComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + this.selectionMatcherOnViewInit(); + } + + private _timer: ReturnType<typeof setInterval>; + + public selectionMatcherOnViewInit(): void { + + var chart = this.chart; + + this._timer = setTimeout(() => { + var data = this.energyRenewableConsumption; + let matcher: IgxSeriesMatcher = new IgxSeriesMatcher(); + + let selection: IgxChartSelection = new IgxChartSelection(); + selection.item = data[1]; + matcher.memberPath = "hydro"; + matcher.memberPathType = "ValueMemberPath"; + selection.matcher = matcher; + chart.selectedSeriesItems.add(selection); + + let matcher2: IgxSeriesMatcher = new IgxSeriesMatcher(); + let selection2: IgxChartSelection = new IgxChartSelection(); + selection2.item = data[2]; + matcher2.memberPath = "wind"; + matcher2.memberPathType = "ValueMemberPath"; + selection2.matcher = matcher2; + + chart.selectedSeriesItems.add(selection2); + + }, 100); + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [legend]="legend" + [dataSource]="energyRenewableConsumption" + chartType="Column" + crosshairsDisplayMode="None" + yAxisTitle="TWh" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + selectionMode="SelectionColorFill" + selectionBehavior="Auto" + selectionBrush="orange"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) Properties | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) Properties | +| ----------------------------------------------|---------------------------| +| | | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-tooltip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-tooltip.md new file mode 100644 index 000000000..77f2d838b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-data-tooltip.md @@ -0,0 +1,947 @@ +--- +title: Angular Chart Data Tooltip | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Angular chart with the data tooltip layer! +_keywords: Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "Legend", "CategoryChart", "FinancialChart", "XamDataLegend", "DataToolTipLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Tooltip +_premium: true +--- + +# Angular Chart Data Tooltip + +In Ignite UI for Angular, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the [`IgxDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) components. + +## Angular Data Tooltip Properties + +All properties of [`IgxDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) are prefixed with **DataToolTip** and exposed on API of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) components. However, you will need to create an instance of [`IgxDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) and add it to series collection of [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component if you want to use it with Radial Charts, Polar Charts, Scatter Charts. + +## Angular Data Tooltip Elements + +The **DataToolTip** displays content using a set of three types of rows and four types of columns. + +### Angular Data Tooltip Rows + +The rows of the **DataToolTip** include the header row, series row(s), and the summary row. + +The header row displays the axis label of the point that is hovered, and can be changed using the [`dataToolTipHeaderText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipHeaderText) property. + +The series row can actually be a set of rows corresponding to each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol and unit, if specified. + +Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the [`dataToolTipSummaryTitleText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryTitleText) property of the legend. Also, you can use the [`dataToolTipSummaryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryType) property to customize whether you display the Total, Min, Max, or Average of series values in the summary row. + +The following example demonstrates the data tooltip with a summary applied: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="highestGrossingMovies" + toolTipType="Data" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsDisplayMode="None" + isCategoryHighlightingEnabled="true" + highlightingMode="FadeOthersSpecific" + highlightingBehavior="NearestItemsAndSeries"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Angular Data Tooltip Columns + +The columns of the [`IgxDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipIncludedColumns) or [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipExcludedColumns) collections of the chart. + +The title column displays legend badges and series titles, which come from the [`chartTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#chartTitle) property of the different [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) plotted in the chart. + +The label column displays the name or abbreviation of the different property paths in the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipIncludedColumns) or [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipExcludedColumns) collections of the tooltip. + +The value column displays series values as abbreviated text which can be formatted using the [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMinFractions) and [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) for minimum and maximum digits, respectively. + +The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the [`dataToolTipUnitsText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsText) for all columns or using the following properties on each series in the chart: + +- Category Series (e.g. ColumnSeries) + - ValueMemberAsLegendUnit="K" +- Financial Price Series: + - OpenMemberAsLegendUnit="K" + - LowMemberAsLegendUnit="K" + - HighMemberAsLegendUnit="K" + - CloseMemberAsLegendUnit="K" +- Range Series: + - LowMemberAsLegendUnit="K" + - HighMemberAsLegendUnit="K" +- Radial Series: + - ValueMemberAsLegendUnit="km" +- Polar Series: + - RadiusMemberAsLegendUnit="km" + - AngleMemberAsLegendUnit="degrees" + +For the above-listed properties, there are corresponding properties ending with **MemberAsLegendLabel** to determine the text in the label columns mentioned previously. + +The columns included in the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipIncludedColumns) and [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipExcludedColumns) collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip. + +The following example demonstrates a data tooltip with the added columns of Open, High, Low, Close, and Change: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { MultipleStocks } from './MultipleStocks'; +import { IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _multipleStocks: MultipleStocks = null; + private _isFetching: boolean = false; + public get multipleStocks(): MultipleStocks { + if (this._multipleStocks == null && !this._isFetching) + { + this._isFetching = true; + ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck(); })(); + } + return this._multipleStocks; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + chartType="Candle" + isVerticalZoomEnabled="true" + isHorizontalZoomEnabled="true" + [dataSource]="multipleStocks" + toolTipType="Data" + dataToolTipIncludedColumns="Open, Close, High, Low, Change" + dataToolTipHeaderFormatTime="None" + zoomSliderType="None"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Tooltip Grouping for Data Chart + +[`dataLegendGroup`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: +By default, DataLegend will hide names of groups, but you can display group names by setting the [`groupRowVisible`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupRowVisible) property to true. [`groupingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html#groupingMode) should be set to "Grouped" and [`labelDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelDisplayMode) should be set to "Visible" on the Data Tooltip Layer. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + name="chart" + #chart> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="olympicMedalsTopCountriesWithTotals" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="America" + valueMemberPath="america" + dataLegendGroup="Medals by Country"> + </igx-column-series> + <igx-column-series + name="ColumnSeries2" + #columnSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="China" + valueMemberPath="china" + dataLegendGroup="Medals by Country"> + </igx-column-series> + <igx-column-series + name="ColumnSeries3" + #columnSeries3 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="Russia" + valueMemberPath="russia" + dataLegendGroup="Medals by Country"> + </igx-column-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer + groupRowVisible="true" + groupingMode="Grouped"> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Tooltip Grouping & Positioning for Category Chart & Financial Chart + +You can set [`dataToolTipGroupingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupingMode) property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the [`dataToolTipGroupedPositionModeX`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeX) and [`dataToolTipGroupedPositionModeY`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeY) properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area. + +The following example demonstrates a data tooltip positioned to the top-right of the chart: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("groupedPositionXEditor", { static: true } ) + private groupedPositionXEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("groupedPositionYEditor", { static: true } ) + private groupedPositionYEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("groupingModeEditor", { static: true } ) + private groupingModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="DataToolTipGroupedPositionModeX" + primitiveValue="PinRight" + name="GroupedPositionXEditor" + #groupedPositionXEditor + label="Grouped X Position: "> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="DataToolTipGroupedPositionModeY" + primitiveValue="PinTop" + name="GroupedPositionYEditor" + #groupedPositionYEditor + label="Grouped Y Position: "> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="DataToolTipGroupingMode" + primitiveValue="Grouped" + name="GroupingModeEditor" + #groupingModeEditor + label="Grouping Mode: "> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="highestGrossingMovies" + toolTipType="Data" + dataToolTipGroupedPositionModeX="PinRight" + dataToolTipGroupedPositionModeY="PinTop" + dataToolTipGroupingMode="Grouped" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + crosshairsDisplayMode="None"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Tooltip Value Formatting + +The **DataToolTip** provides automatic abbreviation of large numbers using its [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMinFractions) and [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. + +The following example demonstrates a **DataToolTip** with the minimum and maximum fractions set: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="highestGrossingMovies" + toolTipType="Data" + dataToolTipUnitsText="B" + dataToolTipValueFormatMode="Decimal" + dataToolTipValueFormatMinFractions="2" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isCategoryHighlightingEnabled="false" + crosshairsDisplayMode="None" + highlightingMode="FadeOthersSpecific" + highlightingBehavior="NearestItemsAndSeries"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Data Tooltip Value Mode + +You can change the default decimal display of values within the **DataToolTip** to be currency by changing the [`dataToolTipValueFormatMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMode) property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatCulture) property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatCulture) set to "en-GB": + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { MultipleStocks } from './MultipleStocks'; +import { IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _multipleStocks: MultipleStocks = null; + private _isFetching: boolean = false; + public get multipleStocks(): MultipleStocks { + if (this._multipleStocks == null && !this._isFetching) + { + this._isFetching = true; + ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck(); })(); + } + return this._multipleStocks; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + chartType="Candle" + toolTipType="Data" + [dataSource]="multipleStocks" + dataToolTipIncludedColumns="Close, Change, Value" + dataToolTipExcludedColumns="High, Low, Open, Volume" + dataToolTipLabelDisplayMode="Hidden" + dataToolTipValueFormatMode="Currency" + dataToolTipValueFormatCulture="en-GB" + dataToolTipHeaderFormatTime="None" + zoomSliderType="None"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Layout Mode + +Legend items can be positioned in a vertical or table structure via the [`layoutMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#layoutMode) property. The default value is `Table`, which retains the same look and feel as seen in previous releases. + +eg. + +<img src="../../../images/general/layout_mode.png" alt="Layout Mode" /> + +## Angular Data Tooltip Styling + +The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the [`dataToolTipTitleTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipTitleTextColor), [`dataToolTipLabelTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipLabelTextColor), [`dataToolTipValueTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueTextColor), and [`dataToolTipUnitsTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsTextColor) properties. + +The following example demonstrates usage of the styling properties mentioned above: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockGoogle } from './StockGoogle'; +import { IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _stockGoogle: StockGoogle = null; + public get stockGoogle(): StockGoogle { + if (this._stockGoogle == null) + { + this._stockGoogle = new StockGoogle(); + } + return this._stockGoogle; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + isVerticalZoomEnabled="true" + isHorizontalZoomEnabled="true" + [dataSource]="stockGoogle" + toolTipType="Data" + dataToolTipIncludedColumns="Open, Close, High, Low, Change" + dataToolTipLabelTextColor="rgba(74, 74, 74, 1)" + dataToolTipUnitsText="K" + dataToolTipUnitsTextColor="rgba(0, 173, 3, 1)" + dataToolTipUnitsTextStyle="normal bold 14px Verdana" + dataToolTipValueFormatMode="Currency" + dataToolTipValueTextColor="rgba(0, 173, 3, 1)" + dataToolTipValueTextStyle="normal bold 14px Verdana" + dataToolTipHeaderFormatTime="None" + yAxisTitle="Thousands of Dollars ($)" + zoomSliderType="None"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +Several properties are exposed including grouping portions of the tooltip. + +- `GroupTextMargin` +- [`groupTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#groupTextColor) +- `GroupTextFontSize` +- `GroupTextFontFamily` +- `GroupTextFontStyle` +- `GroupTextFontStretch` +- `GroupTextFontWeight` +- `HeaderTextMargin` +- [`headerTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#headerTextColor) +- `HeaderTextFontSize` +- `HeaderTextFontFamily` +- `HeaderTextFontStyle` +- `HeaderTextFontStretch` +- `HeaderTextFontWeight` + +## API References + +- [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipExcludedColumns) +- [`dataToolTipGroupedPositionModeX`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeX) +- [`dataToolTipGroupedPositionModeY`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupedPositionModeY) +- [`dataToolTipGroupingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipGroupingMode) +- [`dataToolTipHeaderText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipHeaderText) +- [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipIncludedColumns) +- [`dataToolTipLabelTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipLabelTextColor) +- [`IgxDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) +- [`dataToolTipSummaryTitleText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryTitleText) +- [`dataToolTipSummaryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipSummaryType) +- [`dataToolTipTitleTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipTitleTextColor) +- [`dataToolTipUnitsTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsTextColor) +- [`dataToolTipUnitsText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsText) +- [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) +- [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatCulture) +- [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) +- [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) +- [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMinFractions) +- [`dataToolTipValueFormatMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueFormatMode) +- [`dataToolTipValueTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueTextColor) +- `MemberAsLegendLabel` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-highlight-filter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-highlight-filter.md new file mode 100644 index 000000000..1fef0c2a4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-highlight-filter.md @@ -0,0 +1,892 @@ +--- +title: Angular Chart Highlight Filter | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Highlight Filter +_keywords: Angular Charts, Highlighting, Filtering, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart", "XamDataChart", "Series", "HighlightedValuesDisplayMode"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Highlight Filter +_premium: true +--- + +# Angular Chart Highlight Filter + +The Ignite UI for Angular Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set. This feature is demonstrated in the following example: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { CountryRenewableElectricityFilteredItem, CountryRenewableElectricityFiltered } from './CountryRenewableElectricityFiltered'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightedValuesDisplayModeEditor", { static: true } ) + private highlightedValuesDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _countryRenewableElectricityFiltered: CountryRenewableElectricityFiltered = null; + public get countryRenewableElectricityFiltered(): CountryRenewableElectricityFiltered { + if (this._countryRenewableElectricityFiltered == null) + { + this._countryRenewableElectricityFiltered = new CountryRenewableElectricityFiltered(); + } + return this._countryRenewableElectricityFiltered; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="DataChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="HighlightedValuesDisplayMode" + name="HighlightedValuesDisplayModeEditor" + #highlightedValuesDisplayModeEditor + label="Highlight Display Mode: " + primitiveValue="Hidden"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + name="chart" + #chart + highlightedValuesDisplayMode="Hidden"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="countryRenewableElectricity" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" + valueMemberPath="europe" + [highlightedDataSource]="countryRenewableElectricityFiltered"> + </igx-column-series> + <igx-column-series + name="ColumnSeries2" + #columnSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" + valueMemberPath="china" + [highlightedDataSource]="countryRenewableElectricityFiltered"> + </igx-column-series> + <igx-column-series + name="ColumnSeries3" + #columnSeries3 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" + valueMemberPath="america" + [highlightedDataSource]="countryRenewableElectricityFiltered"> + </igx-column-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +Note that data highlighting feature is supported by the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) and [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature. + +## Using Highlight Filter with DataChart + +In the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), much of the highlight filter API happens on the series themselves, mainly by setting the [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) property to a collection representing a subset of the data you want to highlight. The count of the items in the [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) needs to match the count of the data bound to the `ItemsSource` of the series that you are looking to highlight, and in the case of category series, it will use the `ValueMemberPath` that you have defined as the highlight path by default. The sample at the top of this page uses the [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) to show the overlay. + +In the case that the schema does not match between the [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) and the `ItemsSource` of the series, you can configure this using the `HighlightedValueMemberPath` property on the series. Additionally, if you would like to use the `ItemsSource` of the series itself as the highlight source and have a path on your data item that represents the subset, you can do this. This is done by simply setting the `HighlightedValueMemberPath` property to that path and not providing a [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource). + +The reduced opacity of the column and area series types is configurable by setting the [`highlightedValuesFadeOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) property on the series. You can also set the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) property to `Hidden` if you do not wish to see the overlay at all. + +The part of the series shown by the highlight filter will be represented in the legend and tooltip layers of the chart separately. You can configure the title that this is given in the tooltip and legend by setting the [`highlightedTitleSuffix`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedTitleSuffix). This will append the value that you provide to the end of the [`chartTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#chartTitle) of the series. + +If the `DataLegend` or [`IgxDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) is used then the highlighted series will appear grouped. This can be managed by setting the [`highlightedValuesDataLegendGroup`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDataLegendGroup) property on the series to categorize them appropriately. + +The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control using the [`highlightedValuesDataLegendGroup`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDataLegendGroup): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataLegendModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + NumberAbbreviatorDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend"> + <igx-data-legend + name="legend" + #legend + [target]="chart" + groupRowVisible="true"> + </igx-data-legend> + </div> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + name="chart" + #chart + highlightedValuesDisplayMode="Overlay"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="olympicMedalsTopCountriesWithTotals" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="America" + valueMemberPath="america" + dataLegendGroup="Olympic Medals" + highlightedValuesDataLegendGroup="Gold Medals" + highlightedValueMemberPath="americaGold" + highlightedTitleSuffix=""> + </igx-column-series> + <igx-column-series + name="ColumnSeries2" + #columnSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="China" + valueMemberPath="china" + dataLegendGroup="Olympic Medals" + highlightedValuesDataLegendGroup="Gold Medals" + highlightedValueMemberPath="chinaGold" + highlightedTitleSuffix=""> + </igx-column-series> + <igx-column-series + name="ColumnSeries3" + #columnSeries3 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="Russia" + valueMemberPath="russia" + dataLegendGroup="Olympic Medals" + highlightedValuesDataLegendGroup="Gold Medals" + highlightedValueMemberPath="russiaGold" + highlightedTitleSuffix=""> + </igx-column-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control using the [`highlightedValuesDataLegendGroup`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDataLegendGroup): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + name="chart" + #chart + highlightedValuesDisplayMode="Overlay"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="olympicMedalsTopCountriesWithTotals" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="America" + valueMemberPath="america" + dataLegendGroup="Olympic Medals" + highlightedValuesDataLegendGroup="Gold Medals" + highlightedValueMemberPath="americaGold" + highlightedTitleSuffix=""> + </igx-column-series> + <igx-column-series + name="ColumnSeries2" + #columnSeries2 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="China" + valueMemberPath="china" + dataLegendGroup="Olympic Medals" + highlightedValuesDataLegendGroup="Gold Medals" + highlightedValueMemberPath="chinaGold" + highlightedTitleSuffix=""> + </igx-column-series> + <igx-column-series + name="ColumnSeries3" + #columnSeries3 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + title="Russia" + valueMemberPath="russia" + dataLegendGroup="Olympic Medals" + highlightedValuesDataLegendGroup="Gold Medals" + highlightedValueMemberPath="russiaGold" + highlightedTitleSuffix=""> + </igx-column-series> + <igx-data-tool-tip-layer + name="dataToolTipLayer" + #dataToolTipLayer + groupRowVisible="true" + groupingMode="Grouped"> + </igx-data-tool-tip-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +The following example demonstrates the usage of the data highlighting overlay feature within the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control using the `HighlightedValueMemberPath`: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightedValuesDisplayModeEditor", { static: true } ) + private highlightedValuesDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="DataChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="HighlightedValuesDisplayMode" + name="HighlightedValuesDisplayModeEditor" + #highlightedValuesDisplayModeEditor + label="Highlight Display Mode: " + primitiveValue="Hidden"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="container fill"> + <igx-data-chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + highlightedValuesDisplayMode="Hidden" + name="chart" + #chart> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="olympicMedalsTopCountriesWithTotals" + label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + minimumValue="0" + maximumValue="400"> + </igx-numeric-y-axis> + <igx-column-series + name="ColumnSeries1" + #columnSeries1 + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="olympicMedalsTopCountriesWithTotals" + valueMemberPath="total" + highlightedValueMemberPath="america"> + </igx-column-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Using Highlight Filter in CategoryChart + +The [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) highlight filter happens on the chart by setting the [`initialHighlightFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialHighlightFilter) property. Since the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) takes all of the properties on your underlying data item into account by default, you will need to define the [`initialGroups`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the [`initialGroups`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) to a value path in your underlying data item to group by a path that has duplicate values. + +<!-- Unsure of this part. Need to review --> + +<!-- ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"--> + +Similar to the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) property is also exposed on the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html). In the case that you do not want to see the overlay, you can set this property to `Hidden`. + +The following example demonstrates the usage of the data highlighting overlay feature within the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { SalesDataItem, SalesData } from './SalesData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightedValuesDisplayModeEditor", { static: true } ) + private highlightedValuesDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _salesData: SalesData = null; + public get salesData(): SalesData { + if (this._salesData == null) + { + this._salesData = new SalesData(); + } + return this._salesData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="HighlightedValuesDisplayMode" + name="highlightedValuesDisplayModeEditor" + #highlightedValuesDisplayModeEditor + label="Highlight Display Mode: " + primitiveValue="Hidden"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Sales Filtered by Country + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [dataSource]="salesData" + initialGroups="Month" + initialHighlightFilter="Country ne 'UK'" + highlightedValuesDisplayMode="Hidden"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<!-- TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to: +HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series +HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series--> + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Highlighting](chart-highlighting.md) +- [Chart Data Tooltip](chart-data-tooltip.md) +- [Chart Data Aggregations](chart-data-aggregations.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) Properties | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) Properties | +| ----------------------------------------------|---------------------------| +| [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) | [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource) | +| [`highlightedTitleSuffix`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedTitleSuffix) | [`highlightedTitleSuffix`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedTitleSuffix) | +| `CategoryChart.HighlightedValueMemberPath` | `Series.HighlightedValueMemberPath` | +| [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDisplayMode) | +| [`highlightedValuesFadeOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) | [`highlightedValuesFadeOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesFadeOpacity) | +| [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#highlightedValuesDisplayMode) | +| [`initialHighlightFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialHighlightFilter) | | +| [`initialGroups`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialGroups) | | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-highlighting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-highlighting.md new file mode 100644 index 000000000..474f3ea65 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-highlighting.md @@ -0,0 +1,746 @@ +--- +title: Angular Chart Highlighting | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Highlighting +_keywords: Angular Charts, Highlighting, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Highlighting +_premium: true +--- + +## Angular Chart Highlighting Example + +The following example demonstrates the different highlighting options that are available on the Angular chart. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightingModeEditor", { static: true } ) + private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("highlightingBehaviorEditor", { static: true } ) + private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _temperatureAnnotatedData: TemperatureAnnotatedData = null; + public get temperatureAnnotatedData(): TemperatureAnnotatedData { + if (this._temperatureAnnotatedData == null) + { + this._temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return this._temperatureAnnotatedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="HighlightingMode" + name="HighlightingModeEditor" + #highlightingModeEditor + label="Highlighting Mode: " + primitiveValue="FadeOthersSpecific"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="HighlightingBehavior" + name="HighlightingBehaviorEditor" + #highlightingBehaviorEditor + label="Highlighting Behavior: " + primitiveValue="NearestItemsAndSeries"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Average Temperature in Sydney + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + computedPlotAreaMarginMode="Series" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + [dataSource]="temperatureAnnotatedData" + highlightingMode="FadeOthersSpecific" + highlightingBehavior="NearestItemsAndSeries" + yAxisMaximumValue="35" + yAxisLabelLocation="OutsideRight" + toolTipType="None" + isTransitionInEnabled="false"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +# Angular Chart Highlighting Modes & Behaviors + +All Angular Charts support a variety of highlighting options. [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) controls and they have the same API for using the highlighting feature. + +The following example demonstrates the [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) Angular chart. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightingModeEditor", { static: true } ) + private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _temperatureAnnotatedData: TemperatureAnnotatedData = null; + public get temperatureAnnotatedData(): TemperatureAnnotatedData { + if (this._temperatureAnnotatedData == null) + { + this._temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return this._temperatureAnnotatedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="HighlightingMode" + name="HighlightingModeEditor" + #highlightingModeEditor + label="Highlighting Mode: " + primitiveValue="BrightenSpecific"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + computedPlotAreaMarginMode="Series" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + [dataSource]="temperatureAnnotatedData" + highlightingMode="BrightenSpecific" + toolTipType="None" + crosshairsDisplayMode="None" + isTransitionInEnabled="false"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +The following example demonstrates the [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) Angular chart. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightingBehaviorEditor", { static: true } ) + private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _temperatureAnnotatedData: TemperatureAnnotatedData = null; + public get temperatureAnnotatedData(): TemperatureAnnotatedData { + if (this._temperatureAnnotatedData == null) + { + this._temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return this._temperatureAnnotatedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="HighlightingBehavior" + name="HighlightingBehaviorEditor" + #highlightingBehaviorEditor + label="Highlighting Behavior: " + primitiveValue="DirectlyOver"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + computedPlotAreaMarginMode="Series" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + [dataSource]="temperatureAnnotatedData" + highlightingMode="Brighten" + highlightingBehavior="DirectlyOver" + toolTipType="None" + crosshairsDisplayMode="None" + isTransitionInEnabled="false"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +# Angular Chart Legend Highlighting + +All Angular Charts support legend highlighting. [`legendHighlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#legendHighlightingMode) can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) controls and they have the same API for using the highlighting feature. + +The following example demonstrates the legend series highlighting Angular chart. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [legend]="legend" + chartType="Column" + [dataSource]="highestGrossingMovies" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + highlightingMode="Brighten" + legendHighlightingMode="MatchSeries" + isTransitionInEnabled="false"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Highlight Layers + +The Ignite UI for Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) can enable three types of highlighting when hovering over data items. + +1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the [`isSeriesHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#isSeriesHighlightingEnabled) property to true. + +2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the [`isItemHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isItemHighlightingEnabled) property to true. + +3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the [`isCategoryHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isCategoryHighlightingEnabled) property to true. + +The following example demonstrates the different highlighting layers that are available on the Angular chart. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, AfterViewInit, ViewChild } from "@angular/core"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + public isItemHighlightingEnabled: boolean = false; + public isSeriesHighlightingEnabled: boolean = true; + public isCategoryHighlightingEnabled: boolean = false; + public highlightMode: string = "Auto"; + public highlightBehavior: string = "Auto"; + public legendHighlightMode: string = "Auto"; + public excludedProperties: any; + + public data = [ + { Month: "JAN", NewYork : 10.6, LosAngeles : 28.3 }, + { Month: "FEB", NewYork : 7.8, LosAngeles : 31.1 }, + { Month: "MAR", NewYork : 12.2, LosAngeles : 27.8 }, + { Month: "APR", NewYork : 11.7, LosAngeles : 33.9 }, + { Month: "MAY", NewYork : 19.4, LosAngeles : 35.0 }, + { Month: "JUN", NewYork : 23.3, LosAngeles : 36.7 }, + { Month: "JUL", NewYork : 27.2, LosAngeles : 33.3 }, + { Month: "AUG", NewYork : 25.6, LosAngeles : 36.7 }, + { Month: "SEP", NewYork : 22.8, LosAngeles : 43.9 }, + { Month: "OCT", NewYork : 17.8, LosAngeles : 38.3 }, + { Month: "NOV", NewYork : 17.8, LosAngeles : 32.8 }, + { Month: "DEC", NewYork : 8.3, LosAngeles : 28.9 } + ]; + + public OnEnableHighlightingChange = (e : any) => { + + const value = e.target.value; + + if(value=="Series"){ + this.isItemHighlightingEnabled = false; + this.isSeriesHighlightingEnabled = true; + this.isCategoryHighlightingEnabled = false; + } + else if(value == "Item") { + this.isItemHighlightingEnabled = true; + this.isSeriesHighlightingEnabled = false; + this.isCategoryHighlightingEnabled = false; + } + else if(value == "Category") { + this.isItemHighlightingEnabled = false; + this.isSeriesHighlightingEnabled = false; + this.isCategoryHighlightingEnabled = true; + } + else if(value=="None") { + this.isItemHighlightingEnabled = false; + this.isSeriesHighlightingEnabled = false; + this.isCategoryHighlightingEnabled = false; + } + } + + public ngAfterViewInit(): void { + } + + constructor() { } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <div class="options horizontal"> + <span style="margin-left: 0.25rem;">Highlight Target:</span> + <select (change)=OnEnableHighlightingChange($event) style="width: 7rem; margin-right: 1rem;"> + <option>Series</option> + <option>Item</option> + <option>Category</option> + <option>None</option> + </select> + <span>Mode:</span> + <select [(ngModel)]="highlightMode" style="width: 7rem; margin-right: 1rem;"> + <option>Auto</option> + <option>BrightenSpecific</option> + <option>Brighten</option> + <option>FadeOthersSpecific</option> + <option>FadeOthers</option> + <option>None</option> + </select> + <span>Behavior:</span> + <select [(ngModel)]="highlightBehavior" style="width: 7rem; margin-right: 1rem;"> + <option>Auto</option> + <option>DirectlyOver</option> + <option>NearestItems</option> + <option>NearestItemsRetainMainShapes</option> + <option>NearestItemsAndSeries</option> + </select> + <span>Legend:</span> + <select [(ngModel)]="legendHighlightMode" style="width: 7rem; margin-right: 1rem;"> + <option>Auto</option> + <option>None</option> + <option>MatchSeries</option> + </select> + </div> + <span id="legendTitle">Average Temperatures in the U.S. Cities</span> + <div class="legend" > + <igx-legend #legend orientation="Horizontal"></igx-legend> + </div> + + </div> + + + <div class="container"> + <igx-category-chart #chart height="100%" width="100%" + [legend]="legend" + [dataSource]="data" + chartType="Column" + [isCategoryHighlightingEnabled]="isCategoryHighlightingEnabled" + [isItemHighlightingEnabled]="isItemHighlightingEnabled" + [isSeriesHighlightingEnabled]="isSeriesHighlightingEnabled" + [legendHighlightingMode]="legendHighlightMode" + [highlightingMode]="highlightMode" + [highlightingBehavior]="highlightBehavior" + yAxisTitle="Temperatures in Celsius" + yAxisMinimumValue="0" + xAxisInterval="1"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Animations](chart-animations.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) +- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) +- `LegendHighlightingBehavior` +- [`isCategoryHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isCategoryHighlightingEnabled) +- [`isItemHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isItemHighlightingEnabled) +- [`isSeriesHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#isSeriesHighlightingEnabled) +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-markers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-markers.md new file mode 100644 index 000000000..ec4265ef9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-markers.md @@ -0,0 +1,359 @@ +--- +title: Angular Chart Markers | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Markers +_keywords: Angular Charts, Markers, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Markers +_premium: true +--- + +# Angular Chart Markers + +In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines. + +## Angular Chart Marker Example + +In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the [`MarkerType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html) property to [`Circle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html#Circle) enum value. + +The colors of the markers are also managed by setting the [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) and [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) properties in the sample below. The markers and [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) is configurable in this sample by using the drop-downs as well. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts'; +import { EnumUtil } from 'igniteui-angular-core'; +import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("chartTypeEditor", { static: true } ) + private chartTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("markerTypeEditor", { static: true } ) + private markerTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + + public editorChangeUpdateMarkerType({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + var item = sender as IgxPropertyEditorPropertyDescriptionComponent; + var chart = this.chart; + + var markerVal = item.primitiveValue; + chart.markerTypes = markerVal; + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="ChartType" + name="ChartTypeEditor" + #chartTypeEditor + label="Chart Type" + primitiveValue="Line"> + </igx-property-editor-property-description> + <igx-property-editor-property-description + propertyPath="MarkerTypeHandler" + name="MarkerTypeEditor" + #markerTypeEditor + label="Marker Type" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownValues="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" + dropDownNames="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" + primitiveValue="Circle" + (changed)="this.editorChangeUpdateMarkerType($event)"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + isSeriesHighlightingEnabled="true" + chartType="Line" + [dataSource]="countryRenewableElectricity" + computedPlotAreaMarginMode="Series"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Chart Marker Templates + +In addition to marker properties, you can implement your own marker by setting a function to the `MarkerTemplate` property of a series rendered in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control as it is demonstrated in example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; +import { DataTemplateMeasureInfo, DataTemplateRenderInfo } from "igniteui-angular-core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public onSeriesAdded(e: any) { + e.args.series.markerTemplate = this.getMarker(); + } + + ngOnInit(): void { + this.data = [ + { Location: "World", Solar: 23, Coal: -1, Hydropower: 1, Wind: 12, Nuclear: 3 }, + { Location: "China", Solar: 26, Coal: 2, Hydropower: 5, Wind: 10, Nuclear: 18 }, + { Location: "U.S.", Solar: 15, Coal: -15, Hydropower: -7, Wind: 10, Nuclear: 1 }, + { Location: "EU", Solar: 11, Coal: -12, Hydropower: -2, Wind: 14, Nuclear: -1 } + ]; + } + + public getMarker(): any { + let style = { outline: "#8B5BB1", fill: "white", text: "black" }; + const size = 12; + + return { + measure: function (measureInfo: DataTemplateMeasureInfo) { + const context = measureInfo.context; + const height = context.measureText("M").width; + const width = context.measureText("0.00").width; + measureInfo.width = width; + measureInfo.height = height + 12; + }, + render: function (renderInfo: DataTemplateRenderInfo) { + let ctx = renderInfo.context; + let x = renderInfo.xPosition; + let y = renderInfo.yPosition; + + if (renderInfo.isHitTestRender) { + ctx.fillStyle = renderInfo.data.actualItemBrush.fill; + + let width = renderInfo.availableWidth; + let height = renderInfo.availableHeight; + + ctx.fillRect(x - (width / 2), y - (height), renderInfo.availableWidth, renderInfo.availableHeight); + return; + } + + + const dataItem = renderInfo.data.item; + if (dataItem === null) return; + + const series = renderInfo.data.series; + const dataPath = series.valueColumn.propertyName; + + let dataValue = 0; + switch (dataPath) { + case "Solar": dataValue = dataItem.Solar; break; + case "Coal": dataValue = dataItem.Coal; break; + case "Hydropower": dataValue = dataItem.Hydropower; break; + case "Wind": dataValue = dataItem.Wind; break; + case "Nuclear": dataValue = dataItem.Nuclear; break; + } + ctx.font = '8pt Verdana'; + ctx.textBaseline = 'top'; + ctx.fillStyle = "black"; + + let xOffset = 20; + let yOffset = 10; + if (dataValue < 0) { + ctx.fillText(dataValue + "%", x - (xOffset / 2), y + (yOffset)); + } + else { + ctx.fillText(dataValue + "%", x - (xOffset / 2), y - (yOffset * 2)); + } + + ctx.strokeStyle = "black"; + ctx.fillStyle = "white"; + ctx.beginPath(); + ctx.arc(x, y, 6, 0, 2 * Math.PI); + ctx.stroke(); + ctx.fill(); + } + } + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <span id="legendTitle">Percentage Change in Energy Generation in 2019</span> + <div class="legend"> + <igx-legend #legend orientation="horizontal"></igx-legend> + </div> + </div> + + <div class="container"> + <igx-category-chart height="100%" width="100%" + [legend]="legend" + [dataSource]="data" + chartType="Column" + thickness="2" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + isSeriesHighlightingEnabled="true" + (seriesAdded)="onSeriesAdded($event)" + xAxisMajorStroke="LightGray" + xAxisMajorStrokeThickness="1" + yAxisInterval="10" + yAxisMinimumValue="-20" + yAxisMaximumValue="30"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) +- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) +- [`MarkerType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.markertype.html) +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-navigation.md new file mode 100644 index 000000000..3f810ec18 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-navigation.md @@ -0,0 +1,374 @@ +--- +title: Angular Data Chart | Data Visualization Tools | Navigation | Infragistics +_description: Navigate Infragistics' Angular charts by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Angular graph navigation capabilities! +_keywords: Angular charts, data chart, navigation, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "CategoryChart", "FinancialChart", "ModifierKeys"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Navigation +_premium: true +--- + +# Angular Chart Navigation + +The Ignite UI for Angular charts allows for interactive panning and zooming via the mouse, keyboard and touch. + +## Angular Chart Navigation Example + +The following example shows all of the available panning and zooming options that are available. You can interact with the example by using the buttons, or select your desired options using the dropdowns or checkboxes. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartScatterCoreModule, IgxDataChartScatterModule, IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; +import { SampleScatterStats } from "./SampleScatterStats"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartScatterCoreModule, + IgxDataChartScatterModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartInteractivityModule +], + providers: [SampleScatterStats], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxBubbleSeriesComponent } from "igniteui-angular-charts"; +import { IgxSizeScaleComponent } from "igniteui-angular-charts"; +import { SampleScatterStats } from "./SampleScatterStats"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + public isZoomEnabled: boolean = true; + + public defaultInteraction: string = "DragZoom"; + public panModifier: string = "None"; + public zoomModifier: string = "None"; + + @ViewChild("xAxis", { static: true }) + public xAxis: IgxNumericXAxisComponent; + + @ViewChild("yAxis", { static: true }) + public yAxis: IgxNumericYAxisComponent; + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + + constructor() { + this.data = SampleScatterStats.getCountriesWithHighIncome(); + } + + public ngOnInit() { + this.createSeries(); + this.chart.actualWindowScaleHorizontal = 0.6; + this.chart.actualWindowScaleVertical = 0.6; + this.chart.actualWindowPositionVertical = 0.2; + this.chart.actualWindowPositionHorizontal = 0.2; + } + + public onPanUpClick() { + this.chart.actualWindowPositionVertical -= 0.05; + } + + public onPanDownClick() { + this.chart.actualWindowPositionVertical += 0.05; + } + + public onPanRightClick() { + this.chart.actualWindowPositionHorizontal += 0.05; + } + + public onPanLeftClick() { + this.chart.actualWindowPositionHorizontal -= 0.05; + } + + public createSeries() { + const sizeScale = new IgxSizeScaleComponent(); + sizeScale.minimumValue = 10; + sizeScale.maximumValue = 60; + + const series = new IgxBubbleSeriesComponent(); + series.title = "Countries"; + series.dataSource = SampleScatterStats.getCountries(); + series.showDefaultTooltip = true; + series.xMemberPath = "population"; + series.yMemberPath = "gdpTotal"; + series.radiusMemberPath = "gdpPerCapita"; + series.radiusScale = sizeScale; + series.xAxis = this.xAxis; + series.yAxis = this.yAxis; + + this.chart.series.clear(); + this.chart.series.add(series); + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <span class="options-item">Default Drag Option:</span> + <select [(ngModel)]="defaultInteraction"> + <option>DragZoom</option> + <option>DragPan</option> + <option>None</option> + </select> + <span class="options-item">Pan Modifier:</span> + <select [(ngModel)]="panModifier"> + <option>Alt</option> + <option>Control</option> + <option>Shift</option> + <option>Windows</option> + <option>Apple</option> + <option>None</option> + </select> + <span class="options-item">Zoom Modifier:</span> + <select [(ngModel)]="zoomModifier"> + <option>Alt</option> + <option>Control</option> + <option>Shift</option> + <option>Windows</option> + <option>Apple</option> + <option>None</option> + </select> + </div> + <div class="options horizontal"> + <label class="options-item"><input type="checkbox" [(ngModel)]="isZoomEnabled" /> Enable Zooming</label> + <button class="options-item" (click)="onPanUpClick()">Pan Up</button> + <button class="options-item" (click)="onPanDownClick()">Pan Down</button> + <button class="options-item" (click)="onPanLeftClick()">Pan Left</button> + <button class="options-item" (click)="onPanRightClick()">Pan Right</button> + </div> + + <div class="container"> + <igx-data-chart #chart [dataSource]="data" + width="100%" + height="100%" + [defaultInteraction]="defaultInteraction" + [dragModifier]="zoomModifier" + [panModifier]="panModifier" + [isHorizontalZoomEnabled]="isZoomEnabled" + [isVerticalZoomEnabled]="isZoomEnabled"> + + <igx-numeric-x-axis #xAxis + isLogarithmic=true + abbreviateLargeNumbers=true + title="Population"> + </igx-numeric-x-axis> + <igx-numeric-y-axis #yAxis + isLogarithmic=true + abbreviateLargeNumbers=true + title="Total GDP ($)"> + </igx-numeric-y-axis> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a> + +## Chart Navigation with User Interactions + +Whether or not zooming is on by default depends on the chart you are using. If you are using [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), it is on by default, but it is not in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). In order to enable or disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart, depending on the direction that you wish to enable or disable zooming. + +It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. + +## Chart Navigation with Touch, Mouse and Keyboard + +Navigation in the Angular data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default: + +- **Panning**: Using <kbd>🡐</kbd> <kbd>🡒</kbd> <kbd>🡑</kbd> <kbd>🡓</kbd> arrow keys on the keyboard or holding the <kbd>SHIFT</kbd> key, clicking and dragging with the mouse or pressing and moving your finger via touch. +- **Zoom In**: Using the <kbd>PAGE UP</kbd> key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch. +- **Zoom Out**: Using the <kbd>PAGE DOWN</kbd> key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch. +- **Fit to Chart Plot Area**: Using the <kbd>HOME</kbd> key on the keyboard. There is no mouse or touch operation for this. +- **Area Zoom**: Click and drag the mouse within the plot area with the [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property set to its default - `DragZoom`. + +The zoom and pan operations can also be enabled by using modifier keys by setting the [`dragModifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) and [`panModifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed: + +| Modifier Value | Corresponding Key | +| ---------------|------------------ | +| `Shift` | <kbd>SHIFT</kbd> | +| `Control` | <kbd>CTRL</kbd> | +| `Windows` | <kbd>WIN</kbd> | +| `Apple` | <kbd>APPLE</kbd> | +| `None` | no keys | + +## Chart Navigation with Scrollbars + +The chart can be scrolled by enabling the [`verticalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#verticalViewScrollbarMode) and [`horizontalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#horizontalViewScrollbarMode) properties. + +These can be configured to the following options + +- `Persistent` - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out. +- `Fading` - The scrollbars disappear after use and reappear when the mouse is near their location. +- `FadeToLine` - The scrollbars are reduced to a thinner line when zooming is not in use. +- `None` - Default, no scrollbars are shown. + +The following example demonstrates enabling scrollbars. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxDataChartInteractivityModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { MultipleStocks } from './MultipleStocks'; +import { IgxFinancialChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _multipleStocks: MultipleStocks = null; + private _isFetching: boolean = false; + public get multipleStocks(): MultipleStocks { + if (this._multipleStocks == null && !this._isFetching) + { + this._isFetching = true; + ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck(); })(); + } + return this._multipleStocks; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-financial-chart + name="chart" + #chart + isToolbarVisible="false" + isVerticalZoomEnabled="true" + isHorizontalZoomEnabled="true" + [dataSource]="multipleStocks" + verticalViewScrollbarMode="Fading" + horizontalViewScrollbarMode="Persistent" + zoomSliderType="None" + windowRect="0, 0, 0.5, 1"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Chart Navigation through Code + +> \[!Note] +> Code navigation of the chart can only be used for the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. + +The Angular data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties: + +- [`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionHorizontal): A numeric value describing the X portion of the content view rectangle displayed by the data chart. +- [`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionVertical): A numeric value describing the Y portion of the content view rectangle displayed by the data chart. +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect): A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a [`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) of "0, 0, 1, 1" would be the entirety of the data chart. +- [`windowScaleHorizontal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#windowScaleHorizontal): A numeric value describing the width portion of the content view rectangle displayed by the data chart. +- [`windowScaleVertical`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#windowScaleVertical): A numeric value describing the height portion of the content view rectangle displayed by the data chart. + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Tooltips](chart-tooltips.md) +- [Chart Trendlines](chart-trendlines.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) +- [`dragModifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#dragModifier) +- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) +- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) +- [`panModifier`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#panModifier) +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-overlays.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-overlays.md new file mode 100644 index 000000000..70a86b629 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-overlays.md @@ -0,0 +1,547 @@ +--- +title: Angular Chart Overlays | Data Visualization Tools | Value Overlay | Infragistics +_description: Use Infragistics Ignite UI for Angular chart control's value overlay feature to place horizontal or vertical lines at a single numeric value. Learn about our Ignite UI for Angular graph types! +_keywords: Angular charts, data chart, value overlay, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "ValueOverlay", "CategoryChart", "FinancialChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Overlays +_premium: true +--- + +# Angular Chart Overlays + +The Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the [`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html). This can help you to visualize data such as the mean or median of a particular series. + +## Angular Value Overlay Example + +The following example depicts a [Column Chart](../types/column-chart.md) with a few horizontal value overlays plotted. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxValueOverlayModule, IgxLegendModule } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxValueOverlayModule, + IgxLegendModule +], + providers: [SharedData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any[]; + + constructor() { + this.initData(); + } + + public initData() { + this.data = [ + { Label: 1, Value: 1.0 }, + { Label: 2, Value: 2.0 }, + { Label: 3, Value: 6.0 }, + { Label: 4, Value: 8.0 }, + { Label: 5, Value: 2.0 }, + { Label: 6, Value: 6.0 }, + { Label: 7, Value: 4.0 }, + { Label: 8, Value: 2.0 }, + { Label: 9, Value: 1.0 } + ]; + } +} +``` +```html +<div class="container vertical"> + <igx-legend #legend orientation="horizontal"></igx-legend> + + <igx-data-chart #chart height="100%" width="100%" [dataSource]="data"> + <igx-category-x-axis #xAxis label="Label"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis minimumValue=0 maximumValue=10></igx-numeric-y-axis> + + <igx-column-series [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Value" showDefaultTooltip=true + markerType="None"></igx-column-series> + + <igx-value-overlay [axis]="yAxis" value=2.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=3.6 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=5.8 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=1.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=8.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=7.0 thickness=5></igx-value-overlay> + <igx-value-overlay [axis]="yAxis" value=5.0 thickness=5></igx-value-overlay> + + </igx-data-chart> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Value Overlay Properties + +Unlike other series types that use a `ItemsSource` for data binding, the value overlay uses a `ValueMemberPath` property to bind a single numeric value. In addition, the value overlay requires you to define a single [`axis`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#axis) to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line. + +When using a numeric X or Y axis, the `ValueMemberPath` property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the `ValueMemberPath` should reflect the index of the category at which you want the value overlay to appear. + +When using the value overlay with a numeric angle axis, it will appear as a line from the center of the chart and when using a numeric radius axis, it will appear as a circle. + +[`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html) appearance properties are inherited from [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) and so [`brush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#brush) and [`thickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#thickness) for example are available and work the same way they do with other types of series. + +It is also possible to show an axis annotation on a [`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html) to show the value of the overlay on the owning axis. In order to show this, you can set the [`isAxisAnnotationEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#isAxisAnnotationEnabled) property to true. + +## Angular Value Layer + +The Angular charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values. + +Applying the [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) components is done by setting the [`valueLines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) property on the chart. This property takes a collection of the [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumeration. You can mix and match multiple value layers in the same chart by adding multiple [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumerations to the [`valueLines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) collection of the chart. + +In the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), this is done by adding a [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) to the [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection of the chart and then setting the `ValueMode` property to one of the [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumerations. Each of these enumerations and what they mean is listed below: + +- [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Auto): The default value mode of the [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) enumeration. +- [`Average`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Average): Applies potentially multiple value lines to call out the average value of each series plotted in the chart. +- [`GlobalAverage`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalAverage): Applies a single value line to call out the average of all of the series values in the chart. +- [`GlobalMaximum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalMaximum): Applies a single value line to call out the absolute maximum value of all of the series values in the chart. +- [`GlobalMinimum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#GlobalMinimum): Applies a single value line to call out the absolute minimum value of all of the series values in the chart. +- [`Maximum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Maximum): Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart. +- [`Minimum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html#Minimum): Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart. + +If you want to prevent any particular series from being taken into account when using the [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) element, you can set the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html#targetSeries) property on the layer. This will force the layer to target the series that you define. You can have as many [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) elements within a single [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) as you want. + +The following sample demonstrates usage of the different [`valueLines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts'; +import { EnumUtil } from 'igniteui-angular-core'; +import { IgxLegendComponent } from 'igniteui-angular-charts'; +import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("valueListEditor", { static: true } ) + private valueListEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + + public editorChangeUpdateValueLines({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void { + var item = sender as IgxPropertyEditorPropertyDescriptionComponent; + var chart = this.chart; + + var valueLineType = item.primitiveValue; + chart.valueLines = valueLineType; + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="ValueListHandler" + name="ValueListEditor" + #valueListEditor + label="Value List" + shouldOverrideDefaultEditor="true" + valueType="EnumValue" + dropDownValues="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum" + dropDownNames="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum" + primitiveValue="Auto" + (changed)="this.editorChangeUpdateValueLines($event)"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Renewable Electricity Generated + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend + orientation="Horizontal"> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + [dataSource]="countryRenewableElectricity" + includedProperties="year, america, europe" + chartType="Column" + [legend]="legend" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsDisplayMode="None" + isTransitionInEnabled="false" + yAxisMinimumValue="0" + yAxisMaximumValue="100"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Financial Overlays + +You can also plot built-in financial overlays and indicators in Angular [Stock Chart](../types/stock-chart.md). + +## Chart Overlay Text <label class="badge badge--preview">PREVIEW</label> + +The Angular [`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html), [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html), and all Data Annotation Layers can render custom overlay text inside plot area of the XamDataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers. + +For example, you can use [`IgxDataAnnotationSliceLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationslicelayercomponent.html), [`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html), and [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) to show overlay text. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxAnnotationLayerProxyModule, IgxDataChartAnnotationModule, IgxDataAnnotationSliceLayerModule, IgxNumberAbbreviatorModule, IgxValueOverlayModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxAnnotationLayerProxyModule, + IgxDataChartAnnotationModule, + IgxDataAnnotationSliceLayerModule, + IgxNumberAbbreviatorModule, + IgxAnnotationLayerProxyModule, + IgxValueOverlayModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { StockTeslaItem, StockTesla } from './StockTesla'; +import { AnnotationSliceMultiOverlayDataItem, AnnotationSliceMultiOverlayData } from './AnnotationSliceMultiOverlayData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent, IgxValueOverlayComponent, IgxValueLayerComponent, IgxDataAnnotationSliceLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxLineSeriesComponent + @ViewChild("valueOverlay", { static: true } ) + private valueOverlay: IgxValueOverlayComponent + @ViewChild("valueLayer", { static: true } ) + private valueLayer: IgxValueLayerComponent + @ViewChild("annoLayer", { static: true } ) + private annoLayer: IgxDataAnnotationSliceLayerComponent + private _stockTesla: StockTesla = null; + public get stockTesla(): StockTesla { + if (this._stockTesla == null) + { + this._stockTesla = new StockTesla(); + } + return this._stockTesla; + } + + private _annotationSliceMultiOverlayData: AnnotationSliceMultiOverlayData = null; + public get annotationSliceMultiOverlayData(): AnnotationSliceMultiOverlayData { + if (this._annotationSliceMultiOverlayData == null) + { + this._annotationSliceMultiOverlayData = new AnnotationSliceMultiOverlayData(); + } + return this._annotationSliceMultiOverlayData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + plotAreaMarginBottom="50" + chartTitle="This sample demonstrates the DataAnnotationSliceLayer with overlay text compared against the value layers in the DataChart."> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="stockTesla" + label="date" + labelLeftMargin="0" + labelTopMargin="5" + labelRightMargin="0" + labelBottomMargin="15"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + labelExtent="60" + labelHorizontalAlignment="Center" + labelLeftMargin="0" + labelTopMargin="0" + labelRightMargin="5" + labelBottomMargin="0" + minimumValue="0" + maximumValue="550"> + </igx-numeric-y-axis> + <igx-line-series + name="series1" + #series1 + title="Stock Price" + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="stockTesla" + valueMemberPath="open" + showDefaultTooltip="true" + markerType="None" + brush="black"> + </igx-line-series> + <igx-value-overlay + name="valueOverlay" + #valueOverlay + value="435" + brush="green" + isAxisAnnotationEnabled="true" + thickness="2" + dashArray="2, 4" + [axis]="yAxis" + overlayText="OverlayText on ValueOverlay" + overlayTextLocation="OutsideBottomCenter"> + </igx-value-overlay> + <igx-value-layer + name="valueLayer" + #valueLayer + valueMode="Average" + brush="purple" + thickness="2" + dashArray="2, 4" + [targetAxis]="yAxis" + isAxisAnnotationEnabled="true" + overlayText="OverlayText on ValueLayer (Average)" + overlayTextLocation="OutsideBottomCenter"> + </igx-value-layer> + <igx-data-annotation-slice-layer + name="AnnoLayer" + #annoLayer + [dataSource]="annotationSliceMultiOverlayData" + [targetAxis]="yAxis" + brush="green" + annotationTextColor="white" + annotationLabelMemberPath="label" + annotationValueMemberPath="value" + overlayTextMemberPath="label" + overlayTextVerticalMargin="20" + overlayTextHorizontalMargin="0" + overlayTextLocation="OutsideBottomCenter" + overlayText="OverlayText on DataAnnotationSliceLayer" + thickness="2"> + </igx-data-annotation-slice-layer> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Styling Overlay Text + +This code example shows how to style and customize Overlay Text on +the [`IgxDataAnnotationSliceLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdataannotationslicelayercomponent.html), [`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html), and [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html). + +<div class="divider--half"></div> + +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Column Chart](../types/area-chart.md) +- [Line Chart](../types/line-chart.md) +- [Stock Chart](../types/stock-chart.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- `ItemsSource` +- [`IgxValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html) +- [`axis`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#axis) +- [`brush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#brush) +- `IsAxisAnnotationsEnabled` +- [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) +- [`thickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#thickness) +- [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) +- [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) +- [`valueLines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) +- [`overlayText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayText) +- `TargetAxis` +- `OverlayTextMemberPath` +- [`overlayTextColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextColor) +- [`overlayTextBackground`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextBackground) +- [`overlayTextBorderColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextBorderColor) +- [`overlayTextLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html#overlayTextLocation) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-performance.md new file mode 100644 index 000000000..736e4712c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-performance.md @@ -0,0 +1,839 @@ +--- +title: Angular Chart Performance | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Performance +_keywords: Angular Charts, Performance, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "XamDataChart", "FinancialChartVolumeType", "FinancialChartZoomSliderType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Performance +_premium: true +--- + +# Angular Chart Performance + +Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Angular charts work as fast as possible in your application. + +## Angular Chart Performance Examples + +The following examples demonstrates two high performance scenarios of Angular charts. + +## Angular Chart with High-Frequency + +In High-Frequency scenario, the Angular Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) in High-Frequency scenario. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { IgxSliderModule } from "igniteui-angular"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule, + IgxSliderModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit, OnDestroy { + + public data: any[]; + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + private currValue: number = 15; + private currIndex: number = 0; + + private shouldTick: boolean = true; + private _timerStatusText: string = "Stop"; + + private _maxPoints: number = 5000; + + private _refreshInterval: number = 10; + private _interval: number = -1; + private _frames: number = 0; + private _time: Date; + + constructor(private _zone: NgZone) { + this.data = this.generateData(); + } + + public onChangeAmountClicked() { + this.data = this.generateData(); + } + + public onTimerStartStopClick() { + if (this.shouldTick) { + this.shouldTick = false; + this._timerStatusText = "Start"; + } + else { + this.shouldTick = true; + this._timerStatusText = "Stop"; + } + } + + public onRefreshFrequencyChanged(e: any) { + let num: number = parseInt(e.target.value, 10); + + if (isNaN(num)) { + num = 10; + } + if (num < 10) { + num = 10; + } + if (num > 1000) { + num = 1000; + } + this._refreshInterval = num; + this.setupInterval(); + } + + public onMaxPointsChanged(e: any) { + let num: number = parseInt(e.target.value, 10); + + if (isNaN(num)) { + num = 1000; + } + if (num < 1000) { + num = 1000; + } + if (num > 1000000) { + num = 1000000; + } + this._maxPoints = num; + } + + public get maxPointsText(): string { + return this.toShortString(this._maxPoints); + } + + public get maxPoints(): number { + return this._maxPoints; + } + + @Input() + public set maxPoints(v: number) { + this._maxPoints = v; + } + + public get refreshInterval(): number { + return this._refreshInterval; + } + + @Input() + public set refreshInterval(v: number) { + this._refreshInterval = v; + this.setupInterval(); + } + + public get refreshIntervalText(): string { + return (this._refreshInterval / 1000).toFixed(3) + "s"; + } + + public get timerStatusText() { + return this._timerStatusText; + } + + @Input() + public set timerStatusText(v: string) { + this._timerStatusText = v; + } + + public ngOnDestroy(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + } + + public ngAfterViewInit(): void { + this._time = new Date(); + this.setupInterval(); + } + + private setupInterval(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + + this._zone.runOutsideAngular(() => { + this._interval = window.setInterval(() => this.tick(), + this.refreshInterval); + }); + } + + private generateData(): any[] { + const data: any[] = []; + for (this.currIndex = 0; this.currIndex < this.maxPoints; this.currIndex++) { + this.currValue += Math.random() * 4.0 - 2.0; + data.push({ Label: this.currIndex.toString(), Value: this.currValue }); + } + return data; + } + + + private tick(): void { + + if (this.shouldTick) { + + this.currValue += Math.random() * 4.0 - 2.0; + this.currIndex++; + const newVal = { Label: this.currIndex.toString(), Value: this.currValue }; + + const oldVal = this.data[0]; + this.data.push(newVal); + this.chart.notifyInsertItem(this.data, this.data.length - 1, newVal); + this.data.shift(); + this.chart.notifyRemoveItem(this.data, 0, oldVal); + + this._frames++; + const currTime = new Date(); + const elapsed = (currTime.getTime() - this._time.getTime()); + if (elapsed > 5000) { + const fps = this._frames / (elapsed / 1000.0); + this._time = currTime; + this._frames = 0; + } + } + } + + private toShortString(largeValue: number): string { + let roundValue: string; + + if (largeValue >= 1000000) { + roundValue = (largeValue / 1000000).toFixed(1); + return roundValue + "m"; + } + if (largeValue >= 1000) { + roundValue = (largeValue / 1000).toFixed(0); + return roundValue + "k"; + } + + roundValue = largeValue.toFixed(0); + return roundValue + ""; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <button style="width: 5rem" (click)="onTimerStartStopClick()">{{timerStatusText}}</button> + <label class="options-label">Refresh: </label> + <label class="options-value">{{ refreshIntervalText }}</label> + <input class="options-slider" type="range" min="10" max="1000" step="10" + [value]="refreshInterval" (change)="onRefreshFrequencyChanged($event)"/> + + <button (click)="onChangeAmountClicked()" style="margin-left: 1rem;">Generate</button> + <label class="options-label">Points: </label> + <label class="options-value">{{maxPointsText}}</label> + <input class="options-slider" type="range" min="1000" max="50000" step="100" + [value]="maxPoints" (change)="onMaxPointsChanged($event)" /> + </div> + + <div class="container"> + <igx-category-chart height="100%" + [dataSource]="data" + yAxisLabelExtent="40" + markerTypes="None" + toolTipType="Default" + xAxisEnhancedIntervalPreferMoreCategoryLabels="false" + shouldAutoExpandMarginForInitialLabels="false" + crosshairsDisplayMode="None" + #chart> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Chart with High-Volume + +In High-Volume scenario, the Angular Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) in High-Volume scenario. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { IgxSliderModule } from "igniteui-angular"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule, + IgxSliderModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core"; +import { IgxAssigningCategoryStyleEventArgs } from "igniteui-angular-charts"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; +import { IgxChartSeriesEventArgs } from "igniteui-angular-charts"; +import { IgxHorizontalAnchoredCategorySeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit, OnDestroy { + @Input() + public scalingRatio: number = 1; + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + private currValue: number = 15; + private currIndex: number = 0; + + private _maxPoints: number = 500000; + + private _refreshMilliseconds: number = 10; + private _interval: number = -1; + private _frames: number = 0; + private _time: Date; + private _assigningData: boolean = false; + private _data: any[]; + + constructor(private _zone: NgZone) { + this._data = this.generateData(); + } + + public onGenerateDataClicked() { + this._data = this.generateData(); + } + + public onAssignDataClicked() { + this._time = new Date(); + this._assigningData = true; + this.chart.dataSource = this._data; + } + + public onMaxPointsChanged(e: any) { + let num: number = parseInt(e.target.value, 10); + if (isNaN(num)) { + num = 5000; + } + if (num < 5000) { + num = 5000; + } + if (num > 2000000) { + num = 2000000; + } + this.maxPoints = num; + } + + public get maxPointsText(): string { + return this.toShortString(this._maxPoints); + } + + public get maxPoints(): number { + return this._maxPoints; + } + @Input() + public set maxPoints(v: number) { + this._maxPoints = v; + } + + public ngOnDestroy(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + } + + public ngAfterViewInit(): void { + this.chart.seriesAdded.subscribe((args: { sender: any, args: IgxChartSeriesEventArgs }) => { + const cat = args.args.series as IgxHorizontalAnchoredCategorySeriesComponent; + cat.isCustomCategoryStyleAllowed = true; + cat.assigningCategoryStyle.subscribe((event: { sender: any, args: IgxAssigningCategoryStyleEventArgs }) => { + if (this._assigningData) { + this._assigningData = false; + + this._zone.runOutsideAngular(() => { + window.setTimeout(() => {}, 0); + }); + } + }); + }); + + this.chart.seriesRemoved.subscribe((event: { sender: any, args: IgxChartSeriesEventArgs }) => { + const cat = event.args.series as IgxHorizontalAnchoredCategorySeriesComponent; + cat.isCustomCategoryStyleAllowed = false; + cat.assigningCategoryStyle.unsubscribe(); + }); + + this.chart.dataSource = this._data; + } + + private generateData(): any[] { + const data: any[] = []; + for (this.currIndex = 0; this.currIndex <= this.maxPoints; this.currIndex++) { + this.currValue += Math.random() * 4.0 - 2.0; + const label = this.toShortString(this.currIndex); + data.push({ Label: label, Value: this.currValue }); + } + return data; + } + + private toShortString(largeValue: number): string { + let roundValue: number; + + if (largeValue >= 1000000) { + roundValue = Math.round(largeValue / 100000) / 10; + return roundValue + "m"; + } + if (largeValue >= 1000) { + roundValue = Math.round(largeValue / 100) / 10; + return roundValue + "k"; + } + + roundValue = Math.round(largeValue); + return roundValue + ""; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <button (click)="onGenerateDataClicked()">Generate Data</button> + <button (click)="onAssignDataClicked()">AssignData</button> + + <label class="options-label">Data amount: {{ maxPointsText }}</label> + <input class="options-slider" type="range" id="slider" min="5000" max="2000000" step="1000" [value]="maxPoints" + (input)="onMaxPointsChanged($event)"/> + </div> + <div class="container"> + <igx-category-chart height="100%" yAxisLabelExtent="40" + markerTypes="None" + toolTipType="Default" + xAxisEnhancedIntervalPreferMoreCategoryLabels="false" + shouldAutoExpandMarginForInitialLabels="false" + crosshairsDisplayMode="None" + #chart> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## General Performance Guidelines + +This section lists guidelines and chart features that add to the overhead and processing updates in the Angular charts. + +### Data Size + +If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with one of the following type of series which where designed for specially for that purpose. + +- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) +- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#angular-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) +- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.md#angular-area-chart-example) or [Column Chart](../types/column-chart.md#angular-column-chart-example) + +### Data Structure + +Although Angular charts support rendering of multiple data sources by binding array of arrays of data points to `ItemsSource` property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example: + +```ts +this.CategoryChart.dataSource = FlattenDataSource.create(); +this.FinancialChart.dataSource = FlattenDataSource.create(); + +export class FlattenDataSource { + public static create(): any[] { + const data: any[] = []; + data.push({ "Year": "1996", "USA": 148, "CHN": 110 }); + data.push({ "Year": "2000", "USA": 142, "CHN": 115 }); + return data; + } +} +// instead of this data structure: +export class MultiDataSources { + public static create(): any[] { + const dataSource1: any[] = []; + dataSource1.push({ "Year": "1996", "Value": 148 }); + dataSource1.push({ "Year": "2000", "Value": 142 }); + const dataSource2: any[] = []; + dataSource2.push({ "Year": "1996", "Value": 110 }); + dataSource2.push({ "Year": "2000", "Value": 115 }); + const multipleSources: any[] = [dataSource1, dataSource2]; + return multipleSources; + } +} +``` + +### Data Filtering + +Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) and [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) to filter only those data columns that you actually want to render. For example, + +<!-- Angular, React, WebComponents --> + +```ts +this.Chart.includedProperties = [ "Year", "USA", "RUS" ]; +this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ]; +``` + +## Chart Performance Guidelines + +### Chart Types + +Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property of Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. + +The following table lists chart types in order from the fastest performance to slower performance in each group of charts: + +| Chart Group | Chart Type | +| ----------------|--------------------------------- | +| Pie Charts | - [Pie Chart](../types/pie-chart.md) <br> - [Donut Chart](../types/donut-chart.md) <br> - [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) | +| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example) <br> - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example) <br> - [Step Line Chart](../types/step-chart.md#angular-step-line-chart) <br> - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart) <br> - [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart) <br> - [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) <br> - [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*) <br> - [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart) <br> - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart) <br> - [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart) <br> | +| Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example) <br> - [Step Area Chart](../types/step-chart.md#angular-step-area-chart) <br> - [Range Area Chart](../types/area-chart.md#angular-range-area-chart) <br> - [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart) <br> - [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart) <br> - [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*) <br> - [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart) <br> - [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart) <br> - [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart) <br> | +| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example) <br> - [Bar Chart](../types/bar-chart.md#angular-bar-chart-example) <br> - [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart) <br> - [Range Column Chart](../types/column-chart.md#angular-range-column-chart) <br> - [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart) <br> - [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart) <br> - [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart) <br> - [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart) <br> - [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) | +| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example) <br> - [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart) <br> - [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart) <br> - [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart) <br> - [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart) <br> | +| Point Charts | - [Category Point Chart](../types/point-chart.md) <br> - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) <br> - [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) <br> - [Scatter Bubble Chart](../types/bubble-chart.md) <br> - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart) <br> | +| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md) <br> - [Stock Chart in Column Mode](../types/stock-chart.md) <br> - [Stock Chart in Bar Mode](../types/stock-chart.md) <br> - [Stock Chart in Candle Mode](../types/stock-chart.md) <br> - [Stock Chart with Overlays](../types/stock-chart.md) <br> - [Stock Chart with Zoom Pane](../types/stock-chart.md) <br> - [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane) <br> - [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane) <br> | +| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) <br> - [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) <br> - [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) <br> - [Scatter Bubble Chart](../types/bubble-chart.md) <br> - [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart) <br> - [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart) <br> - [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart) <br> - [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*) <br> - [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*) <br> | +| Radial Charts | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart) <br> - [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart) <br> - [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) <br> - [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart) <br> | +| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart) <br> - [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart) <br> - [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart) <br> - [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart) <br> - [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart) <br> | +| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart) <br> - [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart) <br> - [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart) <br> - [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart) <br> - [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart) <br> - [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart) <br> - [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart) <br> - [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart) <br> - [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) <br> - [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart) <br> | + +\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster. + +### Chart Animations + +Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Angular charts while they play transition-in animations. + +### Chart Annotations + +Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart. + +### Chart Highlighting + +Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Angular chart. + +### Chart Legend + +Adding a legend to the Angular charts might decrease performance if titles of series or data items mapped to legend are changing often at runtime. + +### Chart Markers + +In Angular charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart. + +This code snippet shows how to remove markers from the Angular charts. + +<!-- Angular, React, WebComponents --> + +```ts +// on CategoryChart or FinancialChart +this.Chart.markerTypes.clear(); +this.Chart.markerTypes.add(MarkerType.None); + +// on LineSeries of DataChart +this.LineSeries.markerType = MarkerType.None; +``` + +### Chart Resolution + +Setting the [`resolution`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#resolution) property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable. + +This code snippet shows how to decrease resolution in the Angular charts. + +<!-- Angular, React, WebComponents --> + +```ts +// on CategoryChart or FinancialChart: +this.Chart.Resolution = 10; + +// on LineSeries of DataChart: +this.LineSeries.Resolution = 10; +``` + +### Chart Overlays + +Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart. + +### Chart Trendlines + +Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Angular chart. + +### Axis Types + +Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does. + +> \[!Note] +> The [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) already uses ordinal/category axis so there is no need to change its properties. + +This code snippet shows how to ordinal/category x-axis in the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) controls. + +```html +<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart> + +<igx-data-chart> + <igx-category-x-axis label="Time"></igx-category-x-axis> +</igx-data-chart> +``` + +### Axis Intervals + +By default, Angular charts will automatically calculate [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. + +> \[!Note] +> We do not recommend setting axis minor interval as it will decrease chart performance. + +This code snippet shows how to set axis major interval in the Angular charts. + +```html +<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart> + +<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart> + +<igx-data-chart> + <igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis> + <igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis> +</igx-data-chart> +``` + +### Axis Scale + +Setting the [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale. + +### Axis Labels Visibility + +In the same way as Markers, axis labels are also expensive because they use templates and bindings, and may have their data context changed often. If labels are not used, they should be hidden or their interval should be increased to decrease number of axis labels. + +This code snippet shows how to hide axis labels in the Angular charts. + +```html +<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed"> +</igx-category-chart> + +<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed"> +</igx-financial-chart> + +<igx-data-chart> + <igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis> + <igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis> +</igx-data-chart> +``` + +### Axis Labels Abbreviation + +Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when [`yAxisAbbreviateLargeNumbers`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisAbbreviateLargeNumbers) is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle) to a string that represents factor used used to abbreviate your data values. + +This code snippet shows how to set axis title in the Angular charts. + +```html +<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart> + +<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart> + +<igx-data-chart> + <igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis> +</igx-data-chart> +``` + +### Axis Labels Extent + +At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance. + +The following code snippet shows how to set a fixed extent for labels on y-axis in the Angular charts. + +```html +<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart> + +<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart> + +<igx-data-chart> + <igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis> + <igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis> +</igx-data-chart> +``` + +### Axis Other Visuals + +Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts. + +For example, changing these properties on the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control: + +| Axis Visual | X-Axis Properties | Y-Axis Properties | +| ---------------------|-------------------|------------------- | +| All Axis Visual | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)<br> [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) | [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)<br> [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinorInterval) | +| Axis Tickmarks | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStroke) <br> [`xAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickStrokeThickness)<br> [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTickLength)<br> | [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStroke) <br> [`yAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickStrokeThickness)<br> [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTickLength)<br> | +| Axis Major Gridlines | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStroke)<br> [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMajorStrokeThickness)<br> | [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStroke)<br> [`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMajorStrokeThickness)<br> | +| Axis Minor Gridlines | [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStroke)<br> [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisMinorStrokeThickness)<br> | [`yAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStroke)<br> [`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisMinorStrokeThickness)<br> | +| Axis Main Line | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStroke)<br> [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrokeThickness)<br> | [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStroke)<br> [`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrokeThickness)<br> | +| Axis Titles | [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)<br> [`xAxisTitleAngle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitleAngle)<br> | [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)<br> [`yAxisTitleAngle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitleAngle)<br> | +| Axis Strips | [`xAxisStrip`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisStrip)<br> | [`yAxisStrip`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisStrip)<br> | + +Or changing properties of an [`IgxAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control: + +| Axis Visual | Axis Properties | +| ---------------------|------------------- | +| All Axis Visuals | `Interval`, `MinorInterval` | +| Axis Tickmarks | `TickStroke` , `TickStrokeThickness`, `TickLength` | +| Axis Major Gridlines | `MajorStroke`, `MajorStrokeThickness` | +| Axis Minor Gridlines | `MinorStroke`, `MinorStrokeThickness` | +| Axis Main Line | `Stroke`, `StrokeThickness` | +| Axis Titles | [`chartTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#chartTitle), `TitleAngle` | +| Axis Strips | `Strip` | + +## Performance in Financial Chart + +In addition to above performance guidelines, the Angular [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control has the following unique features that affect performance. + +### Y-Axis Mode + +Setting the [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) option to `Numeric` is recommended for higher performance, as fewer operations are needed than using `PercentChange` mode. + +### Chart Panes + +Setting a lot of panes using [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) and [`overlayTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#overlayTypes) options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay. + +### Zoom Slider + +Setting the [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) option to [`None`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#None) will improve chart performance and enable more vertical space for other indicators and the volume pane. + +### Volume Type + +Setting the [`volumeType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) property can have the following impact on chart performance: + +- [`None`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#None) - is the least expensive since it does not display the volume pane. +- [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources. +- [`Area`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) - is more expensive to render than the [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) volume type. +- [`Column`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Column) - is more expensive to render than the [`Area`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) volume type and it is recommended when rendering volume data of 1-3 stocks. + +## Performance in Data Chart + +In addition to the general performance guidelines, the Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control has the following unique features that affect performance. + +### Axes Collection + +Adding too many axis to the `Axes` collection of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.md#axis-sharing-example) between series. + +### Series Collection + +Also, adding a lot of series to the [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection of the Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see [Data Structure](#data-structure) section) and then using conditional styling feature of the following series: + +| Slower Performance Scenario | Faster Scenario with Conditional Styling | +| ----------------------------|---------------------------------------- | +| 10+ of [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) | Single [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) | +| 20+ of [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) | Single [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) | +| 10+ of [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) | Single [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) | +| 10+ of [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) | Single [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | +| 20+ of [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html) | Single [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | +| 20+ of [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | Single [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | +| 10+ of [`IgxAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html) | Single [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) | +| 10+ of [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) | Single [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) | + +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](../types/area-chart.md) +- [Bar Chart](../types/bar-chart.md) +- [Bubble Chart](../types/bubble-chart.md) +- [Column Chart](../types/column-chart.md) +- [Donut Chart](../types/donut-chart.md) +- [Pie Chart](../types/pie-chart.md) +- [Point Chart](../types/point-chart.md) +- [Polar Chart](../types/polar-chart.md) +- [Radial Chart](../types/radial-chart.md) +- [Shape Chart](../types/shape-chart.md) +- [Spline Chart](../types/spline-chart.md) +- [Scatter Chart](../types/scatter-chart.md) +- [Stacked Chart](../types/stacked-chart.md) +- [Step Chart](../types/shape-chart.md) +- [Stock Chart](../types/stock-chart.md) +- [Chart Animations](chart-animations.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Markers](chart-markers.md) +- [Chart Overlays](chart-overlays.md) +- [Chart Trendlines](chart-trendlines.md) + +## API References + +The following table lists API members mentioned in above sections: + +- [`resolution`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#resolution) +- [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) +- [`overlayTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#overlayTypes) +- [`volumeType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) +- [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) +- [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) +- [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode) +- [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval) +- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) +- [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinorInterval) +- [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinorInterval) +- [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelVisibility) +- [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelVisibility) +- [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisIsLogarithmic) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-synchronization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-synchronization.md new file mode 100644 index 000000000..d6f0c6b80 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-synchronization.md @@ -0,0 +1,166 @@ +--- +title: Angular Data Chart | Data Visualization Tools | Synchronization | Infragistics +_description: Synchronize between multiple Infragistics' Angular charts controls including zooming, panning and crosshair events. Learn about our Ignite UI for Angular graph synchronization capabilities! +_keywords: Angular charts, data chart, synchronization, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Synchronization +_premium: true +--- + +# Angular Chart Synchronization + +The Ignite UI for Angular data chart allows for synchronization with respect to the coordination of zooming, panning, and crosshair events between multiple charts. This can help you to visualize the same areas of multiple charts, assuming your data sources are similar or the same with respect to the axes. + +## Angular Chart Synchronization Example + +This sample shows synchronization of two Angular data charts: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxLegendModule, + IgxDataChartInteractivityModule +], + providers: [SharedData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any[]; + + @ViewChild("chart1", { static: true }) + public chart1: IgxDataChartComponent; + + @ViewChild("chart2", { static: true }) + public chart2: IgxDataChartComponent; + + public syncHorizontally: boolean; + public syncVertically: boolean; + + constructor() { + this.initData(); + this.syncHorizontally = true; + this.syncVertically = true; + } + + public initData() { + this.data = [ + { Country: "Canada", Coal: 400, Oil: 100, Gas: 175, Nuclear: 225, Hydro: 350 }, + { Country: "China", Coal: 925, Oil: 200, Gas: 350, Nuclear: 400, Hydro: 625 }, + { Country: "Russia", Coal: 550, Oil: 200, Gas: 250, Nuclear: 475, Hydro: 425 }, + { Country: "Australia", Coal: 450, Oil: 100, Gas: 150, Nuclear: 175, Hydro: 350 }, + { Country: "United States", Coal: 800, Oil: 250, Gas: 475, Nuclear: 575, Hydro: 750 }, + { Country: "France", Coal: 375, Oil: 150, Gas: 350, Nuclear: 275, Hydro: 325 } + ]; + } + + public syncHorizontalChanged(e: any) { + const checked = e.target.checked; + + this.chart1.synchronizeHorizontally = checked; + this.chart2.synchronizeHorizontally = checked; + } + + public syncVerticalChanged(e: any) { + const checked = e.target.checked; + + this.chart1.synchronizeVertically = checked; + this.chart2.synchronizeVertically = checked; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal" > + <label><input type="checkbox" (change)="syncHorizontalChanged($event)">Sync Horizontally</label> + <label><input type="checkbox" (change)="syncVerticalChanged($event)">Sync Vertically</label> + </div> + + <div class="container"> + <igx-data-chart + width="100%" syncChannel="ChannelA" synchronizeHorizontally=false synchronizeVertically=false + height="50%" #chart1 isHorizontalZoomEnabled=true isVerticalZoomEnabled=true + [dataSource]="data" > + + <igx-category-x-axis #xAxis label="Country"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis minimumValue=0></igx-numeric-y-axis> + + <igx-line-series name="series1" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Coal"></igx-line-series> + </igx-data-chart> + + <igx-data-chart isHorizontalZoomEnabled=true isVerticalZoomEnabled=true + width="100%" syncChannel="ChannelA" synchronizeHorizontally=false synchronizeVertically=false + height="50%" #chart2 + [dataSource]="data" > + + <igx-category-x-axis #xAxis2 label="Country"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis2 minimumValue=0></igx-numeric-y-axis> + + <igx-line-series name="series2" [xAxis]="xAxis2" [yAxis]="yAxis2" valueMemberPath="Coal"></igx-line-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Chart Synchronization Properties + +There are four options of chart synchronization, in that you can synchronize horizontally only, vertically only, both, or you can choose not to synchronize at all, which is the default. + +If you want to synchronize a set of charts, you can assign them the same name to the `SyncChannel` property and then specify whether or not to synchronize the charts horizontally and/or vertically by setting the `SynchronizeHorizontally` and `SynchronizeVertically` properties to the corresponding boolean value. + +Note that in order to synchronize either vertically and/or horizontally, you will need to set the [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) property to **true**, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting. + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) +- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) +- `SyncChannel` +- `SynchronizeHorizontally` +- `SynchronizeVertically` +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-tooltips.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-tooltips.md new file mode 100644 index 000000000..28f26fed7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-tooltips.md @@ -0,0 +1,418 @@ +--- +title: Angular Chart Tooltips | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Tooltips +_keywords: Angular Charts, Tooltips, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "ToolTipType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Tooltips +_premium: true +--- + +# Angular Chart Tooltips + +In Angular charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) controls. + +## Angular Chart Tooltip Types + +Angular Chart provide three types of tooltips that you can with tooltips enabled by setting the [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) property. The following example shows the [Column Chart](../types/column-chart.md) with a combo-box that you can use to change type of tooltips. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("toolTipTypeEditor", { static: true } ) + private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + LegendDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="options vertical"> + <igx-property-editor-panel + name="PropertyEditor" + #propertyEditor + [componentRenderer]="renderer" + [target]="chart" + descriptionType="CategoryChart" + isHorizontal="true" + isWrappingEnabled="true"> + <igx-property-editor-property-description + propertyPath="ToolTipType" + name="ToolTipTypeEditor" + #toolTipTypeEditor + label="ToolTip Type: " + primitiveValue="Data"> + </igx-property-editor-property-description> + </igx-property-editor-panel> + </div> + <div class="legend-title"> + Highest Grossing Movie Franchises + </div> + <div class="legend"> + <igx-legend + name="legend" + #legend> + </igx-legend> + </div> + <div class="container fill"> + <igx-category-chart + name="chart" + #chart + chartType="Column" + [legend]="legend" + [dataSource]="highestGrossingMovies" + xAxisInterval="1" + yAxisTitle="Billions of U.S. Dollars" + yAxisTitleLeftMargin="10" + yAxisTitleRightMargin="5" + yAxisLabelLeftMargin="0" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false" + crosshairsSnapToData="true"> + </igx-category-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +The [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) property is configurable and can be set to one of the following options: + +| Property Value | Description | +| -------------------|----------------| +| [`Default`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Default) Tooltip | Display a tooltip for a single item when the pointer is positioned over it. | +| [`Data`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Data) Tooltip | Display the data tooltips for all series in the chart. | +| [`Item`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Item) Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. | +| [`Category`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.tooltiptype.html#Category) Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over. | + +<div class="divider--half"></div> + +## Angular Chart Tooltip Template + +If none of built-in types of tooltips are matching your requirements, you can create your own tooltips to display and style series title, data values, and axis values. The following sections demonstrate how to do this in different types of Angular charts. + +## Custom Tooltips in Category Chart + +This example shows how to create custom tooltips for all series in Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control. Note that you can also apply the same logic to custom tooltips in Angular [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component, ViewChild, TemplateRef } from "@angular/core"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data = [ + { Franchise: "Marvel Universe All Films", TotalRevenue: 22.55, HighestGrossing: 2.8 }, + { Franchise: "Star Wars", TotalRevenue: 10.32, HighestGrossing: 2.07 }, + { Franchise: "Harry Potter", TotalRevenue: 9.19, HighestGrossing: 1.34 }, + { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 }, + { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 }, + { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 } + ]; + + @ViewChild('valueTooltip', { static: true }) + public valueTooltip: TemplateRef<object>; + + constructor() { + } + + public onSeriesAdded(e: any) { + if (e.args.series) { + e.args.series.tooltipTemplate = this.valueTooltip; + } + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <span id="legendTitle">Highest Grossing Movie Franchises</span> + <div class="legend"> + <igx-legend #legend orientation="horizontal"></igx-legend> + </div> + </div> + <div class="container"> + <igx-category-chart height="100%" width="100%" + [dataSource]="data" + isTransitionInEnabled="true" + xAxisInterval="1" + chartType="Column" + toolTipType="None" + (seriesAdded)="onSeriesAdded($event)" + > + </igx-category-chart> + + + <ng-template let-series="series" let-item="item" #valueTooltip> + <div class="tooltipVertical"> + <span class="tooltipTitle">Franchise: {{item.Franchise}}<br/></span> + <span class="tooltipLbl">Revenue of All Movies: {{item.TotalRevenue}}<br/></span> + <span class="tooltipLbl">Highest Grossing Movie: $ {{item.HighestGrossing}}<br/></span> + </div> + </ng-template> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Custom Tooltips in Data Chart + +This example shows how to create custom tooltips for each series in Angular Data Chart control. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxLegendModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component } from "@angular/core"; +import { UnknownValuePlotting } from "igniteui-angular-core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any; + public unknownValuePlotting: UnknownValuePlotting = UnknownValuePlotting.DontPlot; + + constructor() { + this.data = [ + { Country: "Canada", Coal: 400, Oil: 100, Gas: 175, Nuclear: 225, Hydro: 350 }, + { Country: "China", Coal: 925, Oil: null, Gas: null, Nuclear: 400, Hydro: 625 }, + { Country: "Russia", Coal: 550, Oil: null, Gas: null, Nuclear: 475, Hydro: 425 }, + { Country: "Australia", Coal: 450, Oil: 100, Gas: 150, Nuclear: 175, Hydro: 350 }, + { Country: "United States", Coal: 800, Oil: 250, Gas: 475, Nuclear: 575, Hydro: 750 }, + { Country: "France", Coal: 375, Oil: 150, Gas: 350, Nuclear: 275, Hydro: 325 } + ]; + } +} +``` +```html +<div class="container vertical"> + <div class="options vertical"> + <label id="legendTitle">Energy Production by Source</label> + </div> + <div class="container"> + <igx-data-chart #chart height="100%" width="100%" [dataSource]="data" + isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" + computedPlotAreaMarginMode="Series"> + + <igx-category-x-axis #xAxis name="xAxis" label="Country"></igx-category-x-axis> + <igx-numeric-y-axis #yAxis name="yAxis" minValue=0></igx-numeric-y-axis> + + <!-- <igx-line-series name="series1" title="Coal" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Coal" + showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series> + <igx-line-series name="series2" title="Hydro" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Hydro" + showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series> + <igx-line-series name="series3" title="Nuclear" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Nuclear" + showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series> --> + <igx-line-series name="series4" title="Gas" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Gas" + showDefaultTooltip=false [tooltipTemplate]="valueTooltip" [unknownValuePlotting]="unknownValuePlotting"></igx-line-series> + <igx-line-series name="series5" title="Oil" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Oil" + showDefaultTooltip=false [tooltipTemplate]="valueTooltip" unknownValuePlotting="LinearInterpolate"></igx-line-series> + </igx-data-chart> + </div> + + <ng-template let-series="series" let-item="item" #valueTooltip> + <div> + <label class=“tooltipTitle”>{{item.Country}} Production<br/></label> + <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Coal' ? series.actualBrush : 'black'"> Coal: {{item.Coal | number}}<br/></label> + <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Hydro' ? series.actualBrush : 'black'"> Hydro: {{item.Hydro | number}}<br/></label> + <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Oil' ? series.actualBrush : 'black'"> Oil: {{item.Oil | number}}<br/></label> + <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Gas' ? series.actualBrush : 'black'"> Gas: {{item.Gas | number}}<br/></label> + <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Nuclear' ? series.actualBrush : 'black'"> Nuclear: {{item.Nuclear | number}}<br/></label> + </div> + </ng-template> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Markers](chart-markers.md) + +## API References + +The [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) components share the following API properties: + +- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType) + +In the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component, you can use the following API components and properties: + +- [`IgxDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatatooltiplayercomponent.html) +- [`IgxItemToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemtooltiplayercomponent.html) +- [`IgxCategoryToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorytooltiplayercomponent.html) +- `ShowDefaultToolTip` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-trendlines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-trendlines.md new file mode 100644 index 000000000..0d3f703bd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-trendlines.md @@ -0,0 +1,318 @@ +--- +title: Angular Chart Trendlines | Data Visualization | Infragistics +_description: Infragistics' Angular Chart Trendlines +_keywords: Angular Charts, Trendlines, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "XamDataChart", "TrendLineType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Trendlines +_premium: true +--- + +# Angular Chart Trendlines + +In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html), and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) (except for stacked series, shape series, and range series). + +Trendlines are off by default, but you can enable them by setting the [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) property. Also, you can modify multiple appearance properties of trendlines such as its brush, period, and thickness. + +The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the `TrendLineDashArray` property to an array of numbers. The numeric array describes the length of the dashes of the trendline. + +## Angular Chart Trendlines Example + +The following sample depicts a [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) showing the stock trend of Microsoft between 2013 and 2017 with a **QuinticFit** trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [FinancialDataService], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any; + public trendlineType = "CubicFit"; + + constructor(private dataService: FinancialDataService) { + this.data = [this.dataService.getMsft()]; + } + + public OnTrendlineTypeChanged(e: any) { + this.trendlineType = e.target.value; + } +} +``` +```html +<div class="container vertical"> + <div class="options horizontal"> + <label class="options-label">Annotations: </label> + <label class="options-item"> + <select (change)="OnTrendlineTypeChanged($event)"> + <option>CubicFit</option> + <option>LinearFit</option> + <option>QuinticFit</option> + <option>QuarticFit</option> + <option>ExponentialFit</option> + <option>PowerLawFit</option> + <option>LogarithmicFit</option> + <option>CumulativeAverage</option> + <option>ExponentialAverage</option> + <option>SimpleAverage</option> + <option>ModifiedAverage</option> + <option>WeightedAverage</option> + <option>None</option> + </select> + </label> + </div> + <div class="options vertical" > + <label id="legendTitle">Microsoft Stock Trend </label> + </div> + + <div class="container"> + <igx-financial-chart width="100%" + height="100%" + chartType=Bar + thickness=2 + [dataSource]="data" + [trendLineType]="trendlineType" + trendLineThickness=2 + trendLinePeriod=10 + trendLineBrushes="rgba(0, 101, 209, 1)" + zoomSliderType="None" + isHorizontalZoomEnabled="false" + isVerticalZoomEnabled="false"> + </igx-financial-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Chart Trendlines Dash Array Example + +The following sample depicts a [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) showing a [`IgxFinancialPriceSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html) with a **QuarticFit** dashed trendline applied via the [`trendLineDashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html#trendLineDashArray) property: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryTrendLineModule, IgxDataChartFinancialCoreModule, IgxDataChartFinancialModule, IgxDataChartFinancialOverlaysModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartCategoryTrendLineModule, + IgxDataChartFinancialCoreModule, + IgxDataChartFinancialModule, + IgxDataChartFinancialOverlaysModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { Stock2YearsItem, Stock2Years } from './Stock2Years'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxFinancialPriceSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("series1", { static: true } ) + private series1: IgxFinancialPriceSeriesComponent + private _stock2Years: Stock2Years = null; + public get stock2Years(): Stock2Years { + if (this._stock2Years == null) + { + this._stock2Years = new Stock2Years(); + } + return this._stock2Years; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +<div class="container vertical sample"> + <div class="container fill"> + <igx-data-chart + name="chart" + #chart + shouldAutoExpandMarginForInitialLabels="true" + computedPlotAreaMarginMode="Series" + isVerticalZoomEnabled="true" + isHorizontalZoomEnabled="true"> + <igx-category-x-axis + name="xAxis" + #xAxis + [dataSource]="stock2Years" + labelLocation="OutsideBottom" + label="month" + interval="1" + labelExtent="30"> + </igx-category-x-axis> + <igx-numeric-y-axis + name="yAxis" + #yAxis + labelLocation="OutsideRight"> + </igx-numeric-y-axis> + <igx-financial-price-series + name="Series1" + #series1 + title="Stock Price" + displayType="Candlestick" + [xAxis]="xAxis" + [yAxis]="yAxis" + [dataSource]="stock2Years" + openMemberPath="open" + highMemberPath="high" + lowMemberPath="low" + closeMemberPath="close" + volumeMemberPath="volume" + showDefaultTooltip="true" + trendLineType="QuarticFit" + trendLineBrush="dodgerblue" + trendLineDashArray="5, 5"> + </igx-financial-price-series> + </igx-data-chart> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +<div class="divider--half"></div> + +## Angular Chart Trendline Layer + +The [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) is a series type, you can add more than one of them to the [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously. + +## Trendline Layer Usage + +The [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) must be provided with a [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) and a [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#trendLineType) in order to work properly. The different trendline types that are available are the same as the trendlines that are available on the series. + +If you would like to show the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) in the Legend, you can do so by setting the `UseLegend` property to `true`. + +## Styling the Trendline Layer + +By default, the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) renders with the same color as its [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) in a dashed line. This can be configured by using the various styling properties on the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html). + +To change the color of the trendline that is drawn, you can set its `Brush` property. Alternatively, you can also set the `UseIndex` property to `true`, which will pull from the chart's [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes) palette based on the index in which the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) is placed in the chart's [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection. + +You can also modify the way that the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html) appears by using its `AppearanceMode` and `ShiftAmount` properties. The `ShiftAmount` takes a value between -1.0 and 1.0 to determine how much of a "shift" to apply to the options that end in "Shift". + +The following are the options for the `AppearanceMode` property: + +- `Auto`: This will default to the DashPattern enumeration. +- `BrightnessShift`: The trendline will take the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its brightness based on the provided `ShiftAmount`. +- `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the `DashArray` property on the [`IgxTrendLineLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html). +- `OpacityShift`: The trendline will take the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its opacity based on the provided `ShiftAmount`. +- `SaturationShift`: The trendline will take the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtrendlinelayercomponent.html#targetSeries) brush and modify its saturation based on the provided `ShiftAmount`. + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) + +## API References + +The [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) components share the following API properties: + +- [`trendLineBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineBrushes) +- [`trendLinePeriod`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLinePeriod) +- [`trendLineThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineThickness) +- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) + +In the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) component, most types of series have the following API properties: + +- [`trendLineBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineBrush) +- [`trendLineDashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineDashArray) +- [`trendLinePeriod`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLinePeriod) +- [`trendLineThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineThickness) +- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#trendLineType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-user-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-user-annotations.md new file mode 100644 index 000000000..c5b5ff71c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/features-chart-user-annotations.md @@ -0,0 +1,351 @@ +--- +title: Angular Chart User Annotations | Data Visualization | Infragistics +_description: Infragistics' Angular Chart User Annotations +_keywords: Angular Charts, User Annotations, Infragistics +mentionedTypes: ["DataChart", "UserAnnotationLayer", "UserStripAnnotation", "UserSliceAnnotation", "UserPointAnnotation", "Toolbar", "UserAnnotationInformation", "SeriesViewer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart User Annotations +_premium: true +--- + +# Angular Chart User Annotation Layer <label class="badge badge--preview">PREVIEW</label> + +In Ignite UI for Angular, you can annotate the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. + +This is directly integrated with the available tools of the [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html). The following topic explains, with examples, how you can utilize the [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxToolbarModule } from 'igniteui-angular-layouts'; +import { IgxColorEditorModule } from 'igniteui-angular-inputs'; + +import { + IgxAnnotationLayerProxyModule, + IgxDataChartToolbarModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationDynamicModule, + IgxDataChartCategoryTrendLineModule +} from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxToolbarModule, + IgxDataChartToolbarModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartAnnotationDynamicModule, + IgxDataChartInteractivityModule, + IgxAnnotationLayerProxyModule, + IgxDataChartCategoryTrendLineModule, + IgxColorEditorModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxToolbarComponent } from 'igniteui-angular-layouts'; +import { IgxColorEditorComponent } from 'igniteui-angular-inputs'; + +import { IgxDataChartComponent, IgxUserAnnotationInformation } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + @ViewChild("toolbar", { static: true } ) + private toolbar: IgxToolbarComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + + @ViewChild("annotationBadgeColorEditor", { static: true } ) + private annotationBadgeColorEditor: IgxColorEditorComponent + @ViewChild("annotationMainColorEditor", { static: true } ) + private annotationMainColorEditor: IgxColorEditorComponent + + private annotationInfo: IgxUserAnnotationInformation; + + public annotationLabel: string = "Enter Label"; + public annotationDetails: string = "Enter Details"; + + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + this.onUserAnnotationInformationRequested = this.onUserAnnotationInformationRequested.bind(this); + this.onUserAnnotationTooltipContentUpdating = this.onUserAnnotationTooltipContentUpdating.bind(this); + this.onDoneBtnClick = this.onDoneBtnClick.bind(this); + this.onInitializeToolbar = this.onInitializeToolbar.bind(this); + } + + public ngAfterViewInit(): void + { + window.setTimeout(() => this.onInitializeToolbar(), 1000); + } + + public onInitializeToolbar() { + for (let toolbarMenu of this.toolbar.actualActions) { + if (toolbarMenu.actionId === "AnnotationMenu") { + toolbarMenu.openSubMenu(); + } + } + } + + public onUserAnnotationInformationRequested(e: any) { + this.annotationInfo = e.args.annotationInfo; + + this.toggleDialogState(true); + } + + public onUserAnnotationTooltipContentUpdating(e: any) { + var details = e.args.annotationInfo.annotationData; + + if (e.args.content.children.length == 0) { + var element = document.createElement("div"); + element.textContent = details; + element.style = "color: white"; + e.args.content.appendChild(element); + } + else { + var element: HTMLDivElement = e.args.content.children[0]; + element.textContent = details; + } + } + + public onDoneBtnClick() { + + this.annotationInfo.label = this.annotationLabel; + this.annotationInfo.annotationData = this.annotationDetails; + this.annotationInfo.mainColor = this.annotationMainColorEditor.value; + this.annotationInfo.badgeColor = this.annotationBadgeColorEditor.value; + + this.chart.finishAnnotationFlow(this.annotationInfo); + + this.toggleDialogState(false); + } + + public onCancelBtnClick() { + this.chart.cancelAnnotationFlow(this.annotationInfo.annotationId); + + this.toggleDialogState(false); + } + + public toggleDialogState(open: boolean) { + var popup = document.getElementById('annotationPopup') as HTMLDivElement; + + if (open) { + popup.style.display = "flex"; + } + else { + popup.style.display = "none"; + } + } + +} +``` +```html +<div class="container vertical sample"> + <div style="display: flex; flex-direction: row"> + <div style="margin-left: 1.25rem;"> + <igx-toolbar + name="toolbar" + #toolbar + [target]="chart" + orientation="Horizontal"> + </igx-toolbar> + </div> + </div> + <div class="container fill"> + <igx-data-chart + isHorizontalZoomEnabled="true" + isVerticalZoomEnabled="true" + computedPlotAreaMarginMode="Series" + name="chart" #chart isUserAnnotationsEnabled="true" + (userAnnotationInformationRequested)="onUserAnnotationInformationRequested($event)" + (userAnnotationToolTipContentUpdating)="onUserAnnotationTooltipContentUpdating($event)"> + <igx-category-x-axis name="xAxis" #xAxis [dataSource]="countryRenewableElectricity" label="year"> + </igx-category-x-axis> + <igx-numeric-y-axis name="yAxis" #yAxis title="TWh" > + </igx-numeric-y-axis> + + <igx-line-series name="lineSeries1" #lineSeries1 title="Electricity" [xAxis]="xAxis" [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" valueMemberPath="america"> + </igx-line-series> + <igx-line-series name="LineSeries2" #lineSeries2 title="Electricity" [xAxis]="xAxis" [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" valueMemberPath="europe"> + </igx-line-series> + <igx-line-series name="LineSeries3" #lineSeries3 title="Electricity" [xAxis]="xAxis" [yAxis]="yAxis" + [dataSource]="countryRenewableElectricity" valueMemberPath="china"> + </igx-line-series> + </igx-data-chart> + + <div class="container vertical options" id="annotationPopup" + style="position: fixed; display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 13rem; + height: 21rem; + background-color: white; + border: 1px black solid; + border-radius: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + box-shadow: 0.05rem 0.05rem 0.5rem 0.05rem gray;"> + + <label>Label:</label> + <input #annotationInput name="annotationInput" display-type="text" style="width: calc(100% - 0.4rem);" + [(ngModel)]="annotationLabel"> + + <label>Details:</label> + <textarea #annotationTextArea name="annotationTextArea" style="width: calc(100% - 0.25rem); height: 4rem; resize: none;" + [(ngModel)]="annotationDetails"> + </textarea> + + <label>Badge Color:</label> + <igx-color-editor #annotationBadgeColorEditor name="annotationBadgeColorEditor" value="black"></igx-color-editor> + + <label>Main Color:</label> + <igx-color-editor #annotationMainColorEditor name="annotationMainColorEditor" value="black"></igx-color-editor> + + <div class="container horizontal" style="height: auto; justify-content: center; align-items: center; padding: 1rem; gap: 1rem;"> + <button (click)="onDoneBtnClick()" id="doneButton">Done</button> + <button (click)="onCancelBtnClick()" id="cancelButton">Cancel</button> + </div> + </div> + </div> +</div> +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +.aboveContentSplit { + display: flex; + flex-direction: row; +} +.aboveContentLeftContainer { + margin-left: 1.25rem; + display: flex; + flex-grow: 1; + justify-content: flex-start; + align-items: flex-end; +} +.aboveContentRightContainer { + margin-right: 1.25rem; + display: flex; + flex-grow: 1; + justify-content: flex-end; + align-items: flex-end; +} +``` + + +> \[!Note] +> This feature is designed to support X and Y axes and does not currently support radial or angular axes. + +## Using the User Annotations with the Toolbar + +The [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the [`isUserAnnotationsEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#isUserAnnotationsEnabled) property on the corresponding chart to `true`. + +The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart. + +<img class="responsive-img" src="../../../images/charts/data-chart-user-annotation-create.gif" +alt="Angular user-annotation-create"/> + +You can delete the annotations that you have previously added by selecting the "Delete Note" menu item and then clicking on the axis annotation for the slice or strip user annotations, or by clicking the corresponding data point for the point user annotation. + +<img class="responsive-img" src="../../../images/charts/data-chart-user-annotation-delete.gif" +alt="Angular user-annotation-delete"/> + +When adding one of these user annotations via the `XamToolbar`, the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a [`IgxUserAnnotationInformation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html) object that allows the configuration of multiple different aspects of the annotation to be added. + +The table below details the different configurable properties on [`IgxUserAnnotationInformation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html): + +| Property | Type | Description | +|------------|---------|-------------| +|[`annotationData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationData)|`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.| +|[`annotationId`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationId)|`string`|This read-only property returns the unique string ID of the user annotation.| +|[`badgeColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#badgeColor)|`string`|This property gets or sets the color to use for the badge in the user annotation.| +|[`badgeImageUri`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#badgeImageUri)|`string`|This property gets or sets a path to an image to use for the badge in the user annotation.| +|[`dialogSuggestedXLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#dialogSuggestedXLocation)|`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.| +|[`dialogSuggestedYLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#dialogSuggestedYLocation)|`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.| +|[`label`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#label)|`string`|This property gets or sets the label to be shown in the user annotation.| +|[`mainColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#mainColor)|`string`|This property gets or sets the color to be used to fill the background of the user annotation.| + +After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the [`finishAnnotationFlow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#finishAnnotationFlow) method on the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling [`cancelAnnotationFlow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#cancelAnnotationFlow) and passing the [`annotationId`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationId) of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. + +## Using the User Annotations Programmatically + +When using the [`IgxUserAnnotationLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html) programmatically, you can invoke two different methods on the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) to put the chart into a mode where you can add or remove a user annotation. These methods are named [`startCreatingAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#startCreatingAnnotation) and [`startDeletingAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#startDeletingAnnotation), respectively. + +After invoking [`startCreatingAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#startCreatingAnnotation), you can add a slice annotation by clicking on a label on the X or Y axis, add a strip annotation by clicking and dragging in the plot area and releasing the mouse button, or add a point annotation by clicking on a data point on a series plotted in the chart. + +Adding one of these user annotations will raise an event named `UserAnnotationInformationRequested`, where you can provide more information for the user annotation. This event's arguments have a property named `AnnotationInfo` that will return a [`IgxUserAnnotationInformation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html) object that allows the configuration of multiple different aspects of the annotation to be added. + +After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the [`finishAnnotationFlow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#finishAnnotationFlow) method on the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling [`cancelAnnotationFlow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#cancelAnnotationFlow) and passing the [`annotationId`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html#annotationId) of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. + +Once the user annotation has been added to the chart, it will appear in the [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) collection as a [`IgxUserAnnotationLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html). The [`IgxUserAnnotationLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html) has an [`annotations`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationlayercomponent.html#annotations) collection that can store [`IgxUserSliceAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxusersliceannotation.html), [`IgxUserStripAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserstripannotation.html) and [`IgxUserPointAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserpointannotation.html) elements depending on the type of annotations added to the plot area. + +## User Annotation ToolTip + +Each of the user annotations can show a tooltip on mouse hover to add even more detail to the annotations. + +The chart exposes a `UserAnnotationToolTipContentUpdating` event that you can handle to update the content of the tooltip for the user annotation as the tooltip is shown. The event arguments of this event exposes two properties: `Content` and `AnnotationInfo`. + +The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's [`annotationData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserbaseannotation.html#annotationData) property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip. + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html).[`isUserAnnotationsEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#isUserAnnotationsEnabled) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html).`SeriesViewer.UserAnnotationInformationRequested` +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html).`SeriesViewer.userAnnotationToolTipContentUpdating` +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html).[`cancelAnnotationFlow`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#cancelAnnotationFlow) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html).[`startCreatingAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#startCreatingAnnotation) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html).[`startDeletingAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#startDeletingAnnotation) +- [`IgxUserAnnotationInformation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserannotationinformation.html) +- [`IgxUserSliceAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxusersliceannotation.html) +- [`IgxUserStripAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserstripannotation.html) +- [`IgxUserPointAnnotation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxuserpointannotation.html) +- [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Data Annotations](chart-data-annotations.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md new file mode 100644 index 000000000..a22a5d2ad --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/for-of.md @@ -0,0 +1,584 @@ +--- +title: Angular Virtual For Directive - MIT license +_description: Ignite UI for Angular now exposes a virtual igxFor directive similar to ngFor, which virtualizes DOM object rendering by visualizing only the visible chunks of the data in the DOM. +_keywords: Angular Virtual ForOf Directive, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Virtualization, Performance, Virtual directive, Angular Virtual For +_license: MIT +_tocName: Virtual For Directive +--- + +# Angular Virtual ForOf Directive Overview + +<p class="highlight">The Ignite UI for Angular igxForOf directive is an alternative to ngForOf for templating large amounts of data. It uses virtualization behind the scenes to optimize DOM rendering and memory consumption.</p> + +## Angular Virtual For Directive Example + + +```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxFilterOptions, IgxFilterPipe, IgxForOfDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { femaleFNames, lastName, maleFNames, middleNames } from './names'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-igx-for-list', + styleUrls: ['./igxFor.component.scss'], + templateUrl: './igxFor.component.html', + imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListActionDirective, IgxFilterPipe] +}) +export class IgxForComponent implements OnInit { + public search: string; + public data = []; + get fo() { + const _fo = new IgxFilterOptions(); + _fo.key = 'name'; + _fo.inputValue = this.search; + return _fo; + } + constructor() { } + public ngOnInit() { + const data = []; + for (let i = 0; i < 100000; i++) { + const item = this.generatePerson(i); + data.push(item); + } + this.data = data; + } + private generatePerson(index) { + const item = new Person(); + item.key = index; + const gender = index % 2 === 0 ? 'M' : 'F'; + item.name = this.generateName(gender); + item.avatar = 'assets/images/' + + (gender === 'M' ? 'men' : 'women') + + '/' + Math.floor((Math.random() * 100)) + '.jpg'; + item.favorite = Math.floor((Math.random() * 3)) % 3 === 0; + return item; + } + private generateName(gender): string { + let name = ''; + const fNames = gender === 'M' ? maleFNames : femaleFNames; + name += fNames[Math.floor(Math.random() * fNames.length)] + ' '; + name += middleNames[Math.floor(Math.random() * middleNames.length)] + ' '; + name += lastName[Math.floor(Math.random() * lastName.length)]; + return name; + } + + // eslint-disable-next-line @typescript-eslint/member-ordering + public toggleFavorite(item: any) { + item.favorite = !item.favorite; + } +} + +export class Person { + public key: number; + public name: string; + public favorite: boolean; + public avatar: string; +} +``` +```html +<igx-input-group class="search" type="search"> + <input #searchBar igxInput placeholder="Search Contacts" [(ngModel)]="search" /> + <igx-prefix> + <igx-icon>search</igx-icon> + </igx-prefix> + @if (searchBar.value.length > 0) { + <igx-suffix (click)="search = null"> + <igx-icon>clear</igx-icon> + </igx-suffix> + } +</igx-input-group> + +<div class="list-sample"> + + <igx-list> + <igx-list-item [isHeader]="true">Contacts: {{(data | igxFilter: fo).length}} </igx-list-item> + <div [style.height]="'500px'" [style.overflow]="'hidden'" [style.position]="'relative'"> + <igx-list-item + [style.width]="'calc(100% - 18px)'" + igxRipple="pink" + igxRippleTarget=".igx-list__item" + *igxFor="let item of data | igxFilter: fo; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '50px'"> + <igx-avatar igxListThumbnail [src]="item.avatar" shape="circle"></igx-avatar> + <span igxListLineTitle>{{ item.name }}</span> + <igx-icon igxListAction [style.color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon> + </igx-list-item> + </div> + </igx-list> + +</div> +``` +```scss +:host { + display: block; + padding: 16px; +} + +.search { + margin-bottom: 16px; +} + +.list-sample { + display: block; + position: relative; + height: 550px; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), + 0px 2px 1px -1px rgba(0, 0, 0, 0.12); +} + +igx-icon { + cursor: pointer; +} + +.item-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.contact { + display: flex; + flex: 1 0 240px; + align-items: center; + + &__info { + display: flex; + flex-flow: column nowrap; + margin-left: 24px; + } +} +``` + +<div class="divider"></div> + +## Getting Started with Ignite UI for Angular Virtual ForOf Directive + +To get started with the Ignite UI for Angular [`igxFor`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#igxForOf) directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxForOfModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +import { IgxForOfModule } from 'igniteui-angular/directives'; +// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxForOfModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxForOfDirective` as a standalone dependency. + +```typescript +// home.component.ts + +import { IgxForOfDirective } from 'igniteui-angular/directives'; +// import { IgxForOfDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + <span #container> + <ng-template *igxFor="data"></ng-template> + </span> + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxForOfDirective] +}) +export class HomeComponent { + public data: Employee []; +} +``` + +Now that you have the Ignite UI for Angular Tree Grid module or directives imported, you can start using the `igxFor` directive. + +## Using the Angular Virtual ForOf + +Now that we have the module or directive imported, let’s get started with a basic configuration of the `igxFor` that binds to local data: + +```html +<span #container> + <ng-template *igxFor="data"></ng-template> +</span> +``` + +The **data** property is an array that provides the data objects used to construct the virtualized DOM. + +## Examples + +The `igxFor` directive can be used to virtualize the data in vertical, horizontal or both directions. + +Virtualization works similarly to Paging by slicing the data into smaller chucks which are swapped from a container viewport while the user scrolls the data horizontally/vertically. The difference with the Paging is that virtualization mimics the natural behavior of the scrollbar. The `igxFor` directive is creating scrollable containers and renders small chunks of the data. It is used inside the [`igxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) and it can be used to build a virtual [`igx-list`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html). + +### Vertical virtualization + +```html +<igx-list> + <div [style.height]="'500px'" [style.overflow]="'hidden'" [style.position]="'relative'"> + <igx-list-item [style.width]="'calc(100% - 18px)'" + *igxFor="let item of data | igxFilter: fo; + scrollOrientation : 'vertical'; + containerSize: '500px'; + itemSize: '50px'"> + <div class="contact"> + <span class="name">{{item.name}}</span> + </div> + </igx-list-item> + </div> +</igx-list> +``` + +_**Note:**_ It is strongly advised that the parent container of the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#igxForOf) template has the following CSS rules applied: `height` for vertical and `width` for horizontal, `overflow: hidden` and `position: relative`. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible. + +### Horizontal virtualization + +```html +<igx-list> + <div [style.width]="'880px'" [style.overflow]="'hidden'" [style.position]="'relative'"> + <igx-list-item [style.width]="'220px'" + *igxFor="let item of data | igxFilter: fo; + scrollOrientation : 'horizontal'; + containerSize: '880px'; + itemSize: '220px'"> + <div class="contact"> + <span class="name">{{item.name}}</span> + </div> + </igx-list-item> + </div> +</igx-list> +``` + + +```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxFilterOptions, IgxFilterPipe, IgxForOfDirective } from 'igniteui-angular/directives'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { femaleFNames, lastName, maleFNames } from '../names'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-igx-for-horizontal', + styleUrls: ['./igxFor-horizontal.component.scss'], + templateUrl: './igxFor-horizontal.component.html', + imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxForOfDirective, IgxAvatarComponent, IgxFilterPipe] +}) +export class IgxForHorizontalComponent implements OnInit { + public search: string; + public data = []; + get fo() { + const _fo = new IgxFilterOptions(); + _fo.key = 'name'; + _fo.inputValue = this.search; + return _fo; + } + constructor() { } + public ngOnInit() { + const data = []; + for (let i = 0; i < 100000; i++) { + const item = this.generatePerson(i); + data.push(item); + } + this.data = data; + } + private generatePerson(index) { + const item = new Person(); + item.key = index; + const gender = index % 2 === 0 ? 'M' : 'F'; + item.name = this.generateName(gender); + item.avatar = 'assets/images/' + + (gender === 'M' ? 'men' : 'women') + + '/' + Math.floor((Math.random() * 100)) + '.jpg'; + return item; + } + private generateName(gender): string { + let name = ''; + const fNames = gender === 'M' ? maleFNames : femaleFNames; + name += fNames[Math.floor(Math.random() * fNames.length)] + ' '; + name += lastName[Math.floor(Math.random() * lastName.length)]; + return name; + } +} + +export class Person { + public key: number; + public name: string; + public avatar: string; +} +``` +```html +<div class="sample-content"> + + <igx-input-group class="search" type="search"> + <input #searchBar igxInput placeholder="Search Contacts" [(ngModel)]="search" /> + <igx-prefix> + <igx-icon>search</igx-icon> + </igx-prefix> + @if (searchBar.value.length > 0) { + <igx-suffix (click)="search = null"> + <igx-icon>clear</igx-icon> + </igx-suffix> + } + </igx-input-group> + + <div class="list-sample"> + <igx-list> + <igx-list-item [isHeader]="true">Contacts: {{(data | igxFilter: fo).length}} </igx-list-item> + <div class="list-container" [style.width]="'880px'" [style.overflow]="'hidden'" [style.position]="'relative'"> + <igx-list-item + style="overflow: hidden;" + [style.min-width]="'220px'" + [style.width]="'220px'" + [style.max-width]="'220px'" + *igxFor="let item of data | igxFilter: fo; scrollOrientation : 'horizontal'; containerSize: '880px'; itemSize: '220px'"> + <div class="item-container"> + <div class="contact"> + <igx-avatar [src]="item.avatar" shape="circle"></igx-avatar> + <div class="contact__info"> + <span class="name">{{item.name}}</span> + </div> + </div> + </div> + </igx-list-item> + </div> + </igx-list> + </div> + +</div> +``` +```scss +:host { + display: block; + padding: 16px; + ::ng-deep { + .list-container { + display: flex; + flex-direction: column; + padding: 16px 8px 0; + > igx-display-container { + flex-direction: row; + overflow: visible; + } + } + } +} + +.sample-content{ + max-width: 880px; +} + +.search { + margin-bottom: 16px; + width: 100%; +} + +.list-sample { + display: block; + position: relative; + height: 150px; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), + 0px 2px 1px -1px rgba(0, 0, 0, 0.12); +} + +.item-container { + display: flex; + justify-content: space-between; + align-items: center; + min-width: 220px; + flex: 0 0 220px; +} + +.contact { + display: flex; + flex: 1 0 220px; + align-items: center; + + &__info { + display: flex; + flex-flow: column nowrap; + margin-left: 16px; + } +} + +.name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 80px; +} +``` + +<div class="divider--half"></div> + +### Horizontal and vertical virtualization + +```html +<table #container [style.width]='width' + [style.height]='height' + [style.overflow]='"hidden"' + [style.position]='"relative"'> + <ng-template #scrollContainer igxFor let-rowData + [igxForOf]="data" + [igxForScrollOrientation]="'vertical'" + [igxForContainerSize]='height' + [igxForItemSize]='"50px"'> + <tr [style.display]="'flex'" [style.height]="'50px'"> + <ng-template #childContainer igxFor let-col + [igxForOf]="cols" + [igxForScrollOrientation]="'horizontal'" + [igxForScrollContainer]="parentVirtDir" + [igxForContainerSize]='width'> + <td [style.min-width]='col.width + "px"'> + {{rowData[col.field]}} + </td> + </ng-template> + </tr> + </ng-template> +</table> +``` + +The `igxFor` directive is used to virtualize data in both vertical and horizontal directions inside the `igxGrid`. + +Follow the [Grid Virtualization](grid/virtualization.md) topic for more detailed information and demos. + +### igxFor bound to remote service + +The [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#igxForOf) directive can be bound to a remote service using the `Observable` property - `remoteData` (in the following case). The `chunkLoading` event should also be utilized to trigger the requests for data. + +```html +<div style='height: 500px; overflow: hidden; position: relative;'> + <ng-template igxFor let-item [igxForOf]="remoteData | async" + (chunkPreload)="chunkLoading($event)" + [igxForScrollOrientation]="'vertical'" + [igxForContainerSize]='"500px"' + [igxForItemSize]='"50px"' + [igxForRemote]='true' + let-rowIndex="index" #virtDirRemote> + <div style='height:50px;'>{{item.ProductID}} : {{item.ProductName}}</div> + </ng-template> +</div> +``` + +_**Note:**_ There is a requirement to set the [`totalItemCount`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#totalItemCount) property in the instance of [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#igxForOf). + +```typescript +this.virtDirRemote.totalItemCount = data['@odata.count']; +``` + +In order to access the directive instance from the component, it should be marked as `ViewChild`: + +```typescript +@ViewChild('virtDirRemote', { read: IgxForOfDirective }) +public virtDirRemote: IgxForOfDirective<any>; +``` + +After the request for loading the first chunk, the [`totalItemCount`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#totalItemCount) can be set: + +```typescript +public ngAfterViewInit() { + this.remoteService.getData(this.virtDirRemote.state, (data) => { + this.virtDirRemote.totalItemCount = data['@odata.count']; + }); +} +``` + +When requesting data you can take advantage of the [`IgxForOfState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#state) interface, which provides the [`startIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#state.startindex) and [`chunkSize`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#state.chunkSize) properties. Note that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk (the best value is the initial [`igxForContainerSize`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#igxforcontainersize) divided by the [`igxForItemSize`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#igxForItemSize)). + +```typescript +public getData(data?: IForOfState, cb?: (any) => void): any { + var dataState = data; + return this.http + .get(this.buildUrl(dataState)) + .map((response) => response.json()) + .map((response) => { + return response; + }) + .subscribe((data) => { + this._remoteData.next(data.value); + if (cb) { + cb(data); + } + }); +} + +private buildUrl(dataState: any): string { + let qS: string = '?', requiredChunkSize: number; + if (dataState) { + const skip = dataState.startIndex; + requiredChunkSize = dataState.chunkSize === 0 ? + // Set initial chunk size, the best value is igxForContainerSize + // initially divided by igxForItemSize + 10 : dataState.chunkSize; + const top = requiredChunkSize; + qS += `$skip=${skip}&$top=${top}&$count=true`; + } + return `${this.url}${qS}`; +} +``` + +Every time the [`chunkPreload`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html#chunkPreload) event is thrown, a new chunk of data should be requested: + +```typescript +chunkLoading(evt) { + if(this.prevRequest){ + this.prevRequest.unsubscribe(); + } + this.prevRequest = this.remoteService.getData(evt, ()=> { + this.virtDirRemote.cdr.detectChanges(); + }); +} +``` + +## Local Variables + +The `igxFor` directive includes the following helper properties in its context: `even`, `odd`, `first` and `last`. They are used to identify the current element position in the collection. The following code snippet demonstrates how to use the `even` property in an `ng-template`. Аn `even` class will be assigned to every even div element: + +```html +<ng-template igxFor let-item let-isEven="even" + [igxForOf]="data" + [igxForScrollOrientation]="'vertical'" > + <div [ngClass]="{even: isEven}"></div> +</ng-template> +``` + +## Known Limitations + +|Limitation|Description| +|--- |--- | +| `scrollTo` method does not work correctly when the content size of the rendered templates changes post initialization | When the elements inside the template have a size, that changes runtime after initialization (for example as a result of content projection, remote request resolution etc.), then the `scrollTo` method will not be able to scroll to the correct index. The method will scroll to the position of the index before the runtime size change occurs, hence the location will not be correct after the size is changed later. A possible workaround is to use templates that do not change their size based on their content if the content is loaded later. | + +## API References + +- [IgxForOfDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxListComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlistcomponent.html) + +## Additional Resources + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-angular-grid-overview-guide.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-angular-grid-overview-guide.md new file mode 100644 index 000000000..4cc9a4455 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-angular-grid-overview-guide.md @@ -0,0 +1,291 @@ +--- +title: A Complete Guide to Angular Grid and Angular App Development +_description: Modern data grids & charts can be complex and include a range of functionalities. Learn about Angular Grids & Angular App Development with our complete guide! +_keywords: angular, angular app development, infragistics +_license: commercial +_tocName: Angular: A Complete Guide +--- + +# A Complete Guide to Angular Grid and Angular App Development + +_Get to know the Angular Data Grid and how to use it [by checking out this informative section](../grids-and-lists.md#what-is-an-angular-data-grid) part of our Grid Overview topic._ + +## Ignite UI - Our Framework for Angular App Development + +Ignite UI for Angular is an advanced toolset from Infragistics that includes feature-rich, high-performing UI components such as data grids and other components including charts, data visualization maps, editors, and more. + +The Ignite UI Angular data grid is among the fastest in the industry and is used by many of the leading financial and insurance companies. + +Built on Google’s Angular framework, Ignite UI provides over 50 UI components and Material-based components, and over 50 chart types, including financial charting. + +Among its many benefits, Ignite UI for Angular offers easy integration, rapid development and design, and responsive, cross-browser compatibility. + +## Installing and Creating a Project + +You can install Ignite UI for Angular with either the Angular CLI or with the [Ignite UI CLI](./cli/getting-started-with-cli.md). To start quickly with the Angular CLI, run the following command: + +`ng add igniteui-angular` + +This is the preferred option when you need to add Ignite UI for Angular to an [existing Angular application](getting-started.md#installing-ignite-ui-for-angular). + +If you’re creating a new application from scratch, we recommend the following approach: + +`npm install –g igniteui-cli` + +Once the igniteui cli is installed you can easily bootstrap an application by following cli’s [guided experience using the Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md), which builds a configured app that the end user can run with a single command: + +`ig` + +Use this rich set of cli commands to perform other functions, including generating an Ignite UI project and adding a new component to building and serving the entire application. + +## Importing Dependencies + +When it comes to importing product dependencies, we strongly recommend using our Ignite UI CLI. By simply using `ng add igniteui-angular` you can install the Ignite UI for Angular package, along with all of its dependencies, font imports, styles preferences, and more to your project. + +To start using Ignite UI for Angular components without the Ignite UI CLI, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this manually in the [Getting started](./getting-started.md) topic. + +## Adding Components to a Template + +Once you finish with the development environment setup, you can continue adding and configuring other Ignite UI components. Here’s how to use [our schematics](./cli-overview.md) to add a grid with basic configuration and add templates to some of our columns. + +```html +<igx-grid #grid1 [data]="localData" height="600px" (selected)="cellSelection($event)"> + <igx-column header="Rank" headerClasses="myClass" width="115px" field="Id" sortable="true" [filterable]="false"></igx-column> + <igx-column field="Name" header="Athlete" width="280"></igx-column> + <igx-column field="Speed" header="Speed" [width]="'190px'" [filterable]="false"></igx-column> + <igx-column field="TrackProgress" sortable="true" header="Track Progress" [filterable]="false"> + <ng-template igxCell let-val> + <div class="linear-bar-container"> + <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar> + </div> + </ng-template> + </igx-column> + <igx-paginator [perPage]="10"> + </igx-paginator> +</igx-grid> +``` + +The grid itself consist of different components such as the IgxColumnComponent which is used to define the grid's columns collection and to enable features per column like sorting and paging. + +Each of the columns of the grid can be templated separately. The column expects ng-template tags decorated with one of the grid module directives. + +## Configuring Your Components + +Now that you’ve defined columns to our Grid you can set different cell, header, and footer templates as follows: + +- IgxHeader directive targets the column header providing the column object itself as a context. + + ```html + <igx-column field="Name"> + <ng-template igxHeader let-column> + {{ column.field | uppercase }} + </ng-template> +</igx-column> + ``` + +- igxCell applies the provided template to all cells in the column. The context object provided in the template consists of the cell value provided implicitly and the cell object itself. + +- The column also accepts one last template that will be used when a cell is in edit mode. As with the other column templates, the provided context object is again the cell value and the cell object itself + +```html + <igx-column field="Price" [dataType]="'number'" editable="true"> + <ng-template igxCellEditor let-cell="cell"> + <label for="price"> + Enter the new price tag + </label> + <input name="price" type="number" [(ngModel)]="cell.editValue" /> + </ng-template> +</igx-column> +``` + +## Adding Data to Your Tables and Charts + +While some Angular apps will use static data, most app development today uses data stored in a database. Angular data-binding, which is the process of establishing a connection between the app UI and the data it displays, is easy to implement to allow for dynamic tables. You can set the grid to bind to a remote data service, which is the common scenario in large-scale applications. A good practice is to separate all data-fetching-related logic in a separate data service. Here is a way to create a service which will handle the fetching of data from the server: + +The service itself is pretty simple consisting of one method: fetchData that will return an `Observable<NorthwindRecord[]>`. + +```typescript + +@Injectable() +export class NorthwindService { + private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products'; + + constructor(private http: HttpClient) {} + + public fetchData(): Observable<NorthwindRecord[]> { + return this.http + .get(this.url) + .pipe( + map(response => response['value']), + catchError( + this.errorHandler('Error loading northwind data', []) + ) + ); + } + + private errorHandler<T>(message: string, result: T) { + return (error: any): Observable<any> => { + console.error(`${message}: ${error.message}`); + return of(result as T); + }; + } +} +``` + +After implementing the service, you’ll want to inject it in our component's constructor and use it to retrieve the data. The ngOnInit lifecycle hook is a good place to dispatch the initial request + +```typescript + +@Component({ + ... +}) +export class MyComponent implements OnInit { + + public records: NorthwindRecord[]; + + constructor(private northwindService: NorthwindService) {} + + ngOnInit() { + this.records = []; + this.northwindService.fetchData().subscribe((records) => this.records = records); + } +} +``` + +```html +<igx-grid [data]="records"> + <igx-column field="ProductId"></igx-column> + <!-- rest of the column definitions --> + ... +</igx-grid> +``` + +Check out our [Data-binding topic](../grid/grid.md#angular-grid-data-binding) for more detailed information. + +The same data binding technique is applicable to the other Ignite UI components, such as the igxDataChart. + +```html + <igx-data-chart [dataSource]="data" + width="700px" + height="500px"> + <igx-numeric-x-axis name="xAxis" isLogarithmic="true" ></igx-numeric-x-axis> + <igx-numeric-y-axis name="yAxis" isLogarithmic="true" ></igx-numeric-y-axis> + <igx-bubble-series + name="series1" + [xAxis]="xAxis" + [yAxis]="yAxis" + xMemberPath="population" + yMemberPath="gdpTotal" + radiusMemberPath="gdpPerCapita" + [dataSource]="data" ></igx-bubble-series> + </igx-data-chart> +``` + +Setting a data source on the chart component will apply to all series, but you can also set different data sources on each series added in the data chart. + +## Sorting, Filtering and Pagination + +Angular data grids support easy sorting, filtering, and pagination. With rich APIs and an intuitive feature set-up, using Ignite UI for Angular components has never been easier. + +```html +<igx-grid #grid1 (sortingDone)="removeSorting($event)" + [data]="data" + [allowFiltering]="true"> + <igx-column field="OrderID" header="Order ID"> + </igx-column> + <igx-column field="CategoryName" header="Category Name" [dataType]="'string'" sortable="true"> + </igx-column> + <igx-paginator [perPage]="10"> + </igx-paginator> +``` + +The Grid provides three types of Filtering with custom filtering conditions: + +- [Filter row](../grid/filtering.md) per column with default filtering strategy provided out of the box, as well as all the standard filtering conditions. + +- [Excel style filtering](../grid/excel-style-filtering.md), with a configurable menu of features like sorting, moving, pinning, and hiding features. + +- [Advanced filtering](../grid/advanced-filtering.md) that provides a dialog which allows the creation of groups with filtering conditions across all columns. + +Our [Angular 9 release](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-release "Ignite UI for Angular 9.0.0 Release") includes plenty of new key features – from data analysis to a rich visualization, grid state persistence, and theming widget. + +## Styling Your Components + +Ignite UI has the most expressive styling capabilities of the major Angular frameworks. + +With just a few lines of code, you can easily change the theme of your components. Being developed in SASS, the API is easy and allows for theming granularity on different levels from a single component, multiple components, or the entire suite. + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; + +$primary-color: #2ab759; // Some green shade I like +$secondary-color: #f96a88; // Watermelon pink + +$my-color-palette: palette( + $primary: $primary-color, + $secondary: $secondary-color +); + +// IMPORTANT: Make sure you always includecore first! +@include core(); +// Pass the color palette we generated to thetheme mixin +@include theme($my-color-palette); +``` + +Since Ignite UI for Angular bases its component designs on the [Material Design Principles](https://material.io/guidelines/material-design/introduction.html "Introduction to Material Design"), we try to get as close as possible to colors, sizes, typography, and the overall look and feel of our components to those created by Google. Example: + +<div class="sample-container loading" style="height: 477px"> + <iframe id="list-sample-4-iframe" src='{environment:crmDemoBaseUrl}/' width="100%" height="100%" seamless="" frameborder="0" onload="onSampleIframeContentLoaded(this);"></iframe> +</div> +<p style="margin: 0;padding-top: 0.5rem">Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a class="no-external-icon mchNoDecorate trackCTA" target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/download" data-xd-ga-action="Download" data-xd-ga-label="Ignite UI for Angular">Download it for free.</a></p> + +<div class="divider--half"></div> + +We want to also to mention our samples browser Theming widget. Now, you can change themes at runtime in the [Ignite UI sample browser](../grid/grid.md) with just one click. Theming widget allows you to change the styles, colors, roundness, and elevation. Customization of theming has never been easier. Once you are ready with your theme, just press "DOWNLOAD SASS" and you have your SCSS file at your disposal and you can use it in your app: + +<div class="divider--half"></div> + +<div> +<img class="b-lazy responsive-img" style="-webkit-box-shadow: 8px 9px 9px 5px #ccc; -moz-box-shadow: 8px 9px 9px 5px #ccc; box-shadow: 8px 9px 9px 5px #ccc;" + src="../../images/general/ThemingWidget1.gif" + data-src="../../images/general/ThemingWidget1.gif" + data-srcset="../../images/general/ThemingWidget1.gif 480w, ../../images/general/ThemingWidget1.gif 768w, ../../images/general/ThemingWidget1.gif 1100w" + alt="Theming widget example" + title="The Theming widget is using Ignite UI powerful theming framework."> +</div> + +## Data Analysis with Ignite UI + +The Ignite Angular UI toolset also includes [data analysis capabilities](data-analysis.md). We strive to give you all of the business capabilities you will need to deliver great experiences to your customers. So, we now provide directives that will give you a more Excel-like experience. For example, by selecting a portion of data you are now able to click a button and perform a quick data analysis on that subset of your data. + +<div class="sample-container loading" style="height: 750px;"> + <iframe id="grid-dynamic-chart" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis" class="lazyload no-theming"></iframe> +</div> + +## Tools for Code Generation and Design + +Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Figma with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes. + +## Performance Benchmarks + +Grid components, in general, are intended to visualize large quantities of tabular data. When it comes to performance, our Grid excels at load-time, run-time, and soft performance. + +In order to satisfy the requirements of a web application for load time and run-time performance, it is important to virtualize the Document Object Model (DOM) elements that are rendered, and to either swap or reuse DOM elements when the user performs vertical and horizontal scrolling on the component’s container. The igxGrid has great tun-time scrolling performance without visual tears as well as soft performance (defined by the general usability of your software). Here’s an example of a Gif with scrolling performance: + +<div> +<img class="b-lazy responsive-img" style="-webkit-box-shadow: 8px 9px 9px 5px #ccc; -moz-box-shadow: 8px 9px 9px 5px #ccc; box-shadow: 8px 9px 9px 5px #ccc;" + src="../../images/general/scrolling.gif" + data-src="../../images/general/scrolling.gif" + data-srcset="../../images/general/scrolling.gif 480w, ../../images/general/scrolling.gif 768w, ../../images/general/scrolling.gif 1100w" + alt="Scrolling performance" + title="igxGrid virtual scrolling performance"> +</div> + +<div class="divider--half"></div> + +Check out our Grid and see how easy it is to find and navigate to the feature you want to use, or how appealing the look and feel of it would be in your application. + +Learn more about this in our [Medium Software Performance (Web) article](https://medium.com/ignite-ui/software-performance-web-61158c8583d "Web Software Performance"). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md new file mode 100644 index 000000000..7ae3aac9f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-changelog-dv.md @@ -0,0 +1,578 @@ +--- +title: Angular What's New | Ignite UI for Angular | Infragistics +_description: Learn about new features in the Ignite UI for Angular. +_keywords: Changelog, What's New, Ignite UI for Angular, Infragistics +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "DataPieChart", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart", "Toolbar"] +namespace: Infragistics.Controls.Charts +_tocName: Data Visualization Changelog +--- + +# Ignite UI for Angular Changelog + +All notable changes for each version of Ignite UI for Angular are documented on this page. + +> \[!Note] +> This topic discusses changes only for components that are not included in the igniteui-angular package. +> For changes specific to igniteui-angular components, please see CHANGELOG.MD. + +- [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) + +## **21.0.0 (January 2026)** + +- Angular 21 support. + +## **20.2.1 (December 2025)** + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +|33808|IgxDataChart|The scale set for IntervalType Ticks in TimeAxisInterval is not displayed| +|34255|IgxDataChart|0.00001 scale tick marks are displayed overlapping each other| +|38510|IgxDataChart|AssigningCategoryStyle event support for Stacked Series| + +### Enhancements + +#### Charts + +- Added LabelFormatOverride event to TimeXAxisLabelFormat so you can now override the formatting with an event at all time-formatting levels on the TimeXAxis. + +- Adjusted the schema generation to account for more items to make it more likely to find valid values for properties. + +## **20.2.0 (November 2025)** + +### igniteui-angular-charts (Charts) + +#### <label class="badge badge--preview">PREVIEW</label> User Annotations + +In Ignite UI for Angular, you can now annotate the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. + +This is directly integrated with the available tools of the [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html). + +<img class="responsive-img" src="../images/charts/data-chart-user-annotation-create.gif" +alt="Angular user-annotation-create"/> + +#### <label class="badge badge--preview">PREVIEW</label> Collision Detection for Axis Annotations + +Ability for axis annotations to automatically detect collisions and truncate to fit better. To enable this feature you must set the following properties: + +- `ShouldAvoidAnnotationCollisions` +- `ShouldAutoTruncateAnnotations` + +### igniteui-angular-maps (Geographic Map) + +- Azure Map Imagery is now RTM. + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +|40136|Excel Library|FormulaParseException exception when loading an Excel workbook| +|40262|IgxSpreadsheet|#Circularity! is displayed when there are warnings. Request to match Excel - display a value eg. 0 instead| +|40458|IgxSpreadsheet|When using Arial font, the igx-spreadsheet cuts off text in the cells| +|40490|IgxDatePicker|Inputs by Autofill won't give any effects for a date picker| + +## **20.1.0 (September 2025)** + +### igniteui-angular-maps (Geographic Map) + +#### <label class="badge badge--preview">PREVIEW</label> Azure Map Imagery Support + +The `GeographicMap` now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease. + +Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps. + +Explore some of the publicly available [Azure maps here](https://azure.microsoft.com/en-us/products/azure-maps). + +### igniteui-angular-charts (Charts) + +#### <label class="badge badge--preview">PREVIEW</label> New Axis Label Events + +The following events have been added to the `DataChart` to allow you to detect different operations on the axis labels: + +- `LabelMouseDown` +- `LabelMouseUp` +- `LabelMouseEnter` +- `LabelMouseLeave` +- `LabelMouseMove` +- `LabelMouseClick` + +#### <label class="badge badge--preview">PREVIEW</label> Companion Axis + +Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the `CompanionAxisEnabled` property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties. + +#### <label class="badge badge--preview">PREVIEW</label> RadialPieSeries Inset Outlines + +There is a new property called [`useInsetOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#useInsetOutlines) to control how outlines on the [`IgxRadialPieSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape. + +**Breaking Changes** + +- A fix was made due to an issue where the `PlotAreaPosition` and `ChartPosition` properties on [`IgxChartMouseEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) class were reversed. This will change the values that [`plotAreaPosition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) and [`chartPosition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) return. + +### Enhancements + +#### IgxBulletGraph + +- <label class="badge badge--preview">PREVIEW</label> Added new `LabelsVisible` property + +#### Charts + +- New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness` + +- New properties added to the DataLegend to aid in styling: `ContentBackground`, `ContentBorderBrush`, and `ContentBorderThickness`. The `ContentBorderBrush` and `ContentBorderThickness` default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties. + +- Added a new property to [`IgxChartMouseEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) called [`worldPosition`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#worldPosition) that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space. + +- Added [`highlightingFadeOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingFadeOpacity) to [`IgxSeriesViewerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html) and [`IgxDomainChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html). This allows you to configure the opacity applied to highlighted series. + +- Expose `CalloutLabelUpdating` event for domain charts. + +#### IgxLinearGauge + +- <label class="badge badge--preview">PREVIEW</label> Added new `LabelsVisible` property + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +|31624 | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | Resizing the containing window of the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) causes the chart to fail to render the series| +|27304 | `DataChart` | Zoom rectangle is not positioned the same as the background rectangle| +|37930 | `DataChart` | Data Annotation Overlay Text Color not working| +|30600 | `DoughnutChart` | No textStyle property for either the chart or series (pie chart has this)| +|38231 | `Grid` | Unpinned column does not return to the original position if hidden columns exist| +|33861 | Excel Library | Adding line chart corrupts excel File for German culture| + +## **20.0.1 (August 2025)** + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|------------------| +|36448 | `RadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles)| + +### igniteui-angular-charts (Charts) + +- Added <label class="badge badge--new">NEW</label> `MaximumExtent` and `MaximumExtentPercentage` properties for use with axis labels. + +## **20.0.0 (June 2025)** + +- Angular 20 support. + +## **19.1.0 (April 2025)** + +### igniteui-angular-maps (Geographic Map) + +> \[!Note] +> As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. +> For more details please visit: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + +### igniteui-angular-charts (Charts) + +- Added <label class="badge badge--preview">PREVIEW</label> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers: + - Data Annotation Band Layer + - Data Annotation Line Layer + - Data Annotation Rect Layer + - Data Annotation Slice Layer + - Data Annotation Strip Layer + +- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <label class="badge badge--preview">PREVIEW</label> `LayoutMode` property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure. + +- <label class="badge badge--preview">PREVIEW</label> The [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within. + +- <label class="badge badge--preview">PREVIEW</label> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <label class="badge badge--preview">PREVIEW</label> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an `OverlayText` property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text. + +- <label class="badge badge--new">NEW</label> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart. + +### igniteui-angular-dashboards (Dashboards) + +- The [`IgxDashboardTileComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_dashboards.igxdashboardtilecomponent.html) now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the [`IgxDashboardTileComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_dashboards.igxdashboardtilecomponent.html) to an instance of `LocalDataSource`. + +### igniteui-angular + +**Breaking Changes** + +- The 'igniteui-angular-grids' package has been renamed to 'igniteui-angular-data-grids'. + +### Enhancements + +#### Toolbar + +- Value layers added from the toolbar now appear on the legend. +- The zoom reset tool has been moved to the zoom drop-down. + +#### Data Pie Chart + +- The chart now exposes a `GetOthersContext()` method. This will return the contents of the "others" slice. + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|------------------| +|37023 | `DataChart` | Tooltips are cut-off/offscreen if overflow hidden is set.| +|37685 | [`IgxSpreadsheetComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) | Poor rendering of numbers formatted with Arial font.| +|37244 | Excel Library | Custom Data Validation is not working.| + +## **19.0.1 (February 2025)** + +### Enhancements + +#### Toolbar + +- Added new `GroupHeaderTextStyle` property to [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) and [`IgxToolPanelComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolpanelcomponent.html). If set, it will apply to all [`IgxToolActionGroupHeaderComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactiongroupheadercomponent.html) actions. +- Added new property on [`IgxToolActionComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) called [`titleHorizontalAlignment`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#titleHorizontalAlignment) which controls the horizontal alignment of the title text. +- Added new property on [`IgxToolActionSubPanelComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) called [`itemSpacing`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html#itemSpacing) which controls the spacing between items inside the panel. + +### Bug Fixes + +The following table lists the bug fixes made for the Ignite UI for Angular toolset for this release: + +| Bug Number | Control | Description | +|------------|---------|------------------| +|30286 | `DataChart` | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble| +|32906 | `DataChart` | `DataChart` is showing two xAxis on the top| +|33605 | `DataChart` | ScatterLineSeries is not showing the color of the line correctly in the legend| +|35498 | `DataChart` | Tooltips for the series specified in IncludedSeries are not displayed| +|34776 | `DataChart` | Repeatedly showing and hiding the `DataChart` causes memory leakage in JS Heap| +|34053 | `RadialGauge` | The position of the scale label is shifted| +|35496 | [`IgxSpreadsheetComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) | Error when setting styles in Excel with images| +|36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function| +|36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load| +|26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file| +|35495 | Excel Library | Pictures in cells are lost when a template file is loaded| +|34083 | Excel Library | TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file| + +## **19.0.0 (January 2025)** + +- Angular 19 support. + +## **18.2.0 (December 2024)** + +### igniteui-angular-charts (Charts) + +- <label class="badge badge--preview">PREVIEW</label> [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code. + +### igniteui-angular-charts (Inputs) + +- <label class="badge badge--preview">PREVIEW</label> [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into <label class="badge badge--preview">PREVIEW</label> ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime. + +## **18.1.0 (September 2024)** + +- [Data Pie Chart](charts/types/data-pie-chart.md) - The [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) is a new component that renders a pie chart. This component works similarly to the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component. + +- <label class="badge badge--new">NEW</label> [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. + +- [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) + + - New ToolActionCheckboxList + A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. + Requires IgxCheckboxListModule to be registered. + + - New Filtering Support + + - Axis Field Changes + New default IconMenu in Toolbar when targeting CategoryChart. + Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. + Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set. + +## **18.0.0 (June 2024)** + +- Angular 18 support. + +### igniteui-angular-charts (Charts) + +- [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`dataLegendGroup`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. + +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`selectedSeriesItems`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#selectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. + +- [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the [`highlightingTransitionDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingTransitionDuration) property. + +- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedDataSource). Can be toggled via [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightedValuesDisplayMode) and styled via `FillBrushes`. + +- [`IgxToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. + +### igniteui-angular-gauges (Gauges) + +- [`IgxRadialGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + - New label for the highlight needle. [`highlightLabelText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelText) and [`highlightLabelSnapsToNeedlePivot`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightLabelSnapsToNeedlePivot) and many other styling related properties for the HighlightLabel were added. + +## **17.3.0 (March 2024)** + +### igniteui-angular-charts + +- New Data Filtering via the [`initialFilter`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#initialFilter) property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. + +- `XamRadialChart` + - New Label Mode + The [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) for the now exposes a [`labelMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html#labelMode) property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. + +### igniteui-angular-gauges + +- [`IgxRadialGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + - New title/subtitle properties. [`titleText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleText), [`subtitleText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#subtitleText) will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and [`titleExtent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleExtent). Finally, the new [`titleDisplaysValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#titleDisplaysValue) will allow the value to correspond with the needle's position. + - New [`opticalScalingEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingEnabled) and [`opticalScalingSize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#opticalScalingSize) properties for the [`IgxRadialGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html). This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling) + - New highlight needle was added. [`highlightValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- [`IgxLinearGaugeComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) + - New highlight needle was added. [`highlightValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValue) and [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html#highlightValueDisplayMode) when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. +- [`IgxBulletGraphComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) + - The Performance bar will now reflect a difference between the value and new [`highlightValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValue) when the [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#highlightValueDisplayMode) is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. + +## **17.2.0 (January 2024)** + +### igniteui-angular-charts (Charts) + +- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. + +## **17.0.0 (November 2023)** + +### igniteui-angular - Toolbar - <label class="badge badge--preview">PREVIEW</label> + +- Save tool action has been added to save the chart to an image via the clipboard. +- Vertical orientation has been added via the toolbar's [`orientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. + +## **16.1.0 (June 2023)** + +### New Components + +- <label class="badge badge--preview">PREVIEW</label> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) or [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. + +### igniteui-angular-charts (Charts) + +- [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - A new series type named the [`IgxValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) and [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) by adding to the new [`valueLines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) collection. + +- It is now possible to apply a **dash array** to the different parts of the series of the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart. + +## **16.0.0 (May 2023)** + +- Angular 16 support. + +## **15.0.0 (December 2022)** + +- Angular 15 support. + +## **14.2.0 (November 2022)** + +Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: + +- Responsive layouts for horizontal label rotation based on browser / screen size. +- Enhanced rendering for rounded labels on all platforms. +- Added marker properties to StackedFragmentSeries. +- Added [`shouldPanOnMaximumZoom`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#shouldPanOnMaximumZoom) property. +- New Category Axis Properties: + - ZoomMaximumCategoryRange + - ZoomMaximumItemSpan + - ZoomToCategoryRange + - ZoomToItemSpan +- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data: + - InitialSortDescriptions + - InitialSorts + - SortDescriptions + - InitialGroups + - InitialGroupDescriptions + - GroupDescriptions + - InitialSummaries + - InitialSummaryDescriptions + - SummaryDescriptions + - InitialGroupSortDescriptions + - GroupSorts + - GroupSortDescriptions + +> \[!Note] +> The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. + +## **13.2.0 (June 2022)** + +### igniteui-angular-charts (Charts) + +- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the [`IgxLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html), but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. +- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. +- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#isTransitionInEnabled) property to true. From there, you can set the [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInDuration) property to determine how long your animation should take to complete and the [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInMode) to determine the type of animation that takes place. +- Added `AssigningCategoryStyle` event, is now available to all series in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. +- New [`allowedPositions`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#allowedPositions) enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`. +- New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. + - [`calloutCornerRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html#calloutCornerRadius) for CalloutLayer + - [`axisAnnotationBackgroundCornerRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinalvaluelayercomponent.html#axisAnnotationBackgroundCornerRadius) for FinalValueLayer + - [`xAxisAnnotationBackgroundCornerRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#xAxisAnnotationBackgroundCornerRadius) and [`yAxisAnnotationBackgroundCornerRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcrosshairlayercomponent.html#yAxisAnnotationBackgroundCornerRadius) for CrosshairLayer +- New [`horizontalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#horizontalViewScrollbarMode) and [`verticalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#verticalViewScrollbarMode) enumeration to enable scrollbars in various ways. When paired with [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) or [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled), you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. +- New `FavorLabellingScaleEnd`, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html), [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html), `PercentChangeAxis`). +- New [`isSplineShapePartOfRange`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#isSplineShapePartOfRange) determines whether to include the spline shape in the axis range requested of the axis. +- New [`xAxisMaximumGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMaximumGap), determines the maximum allowed value for the plotted series when using [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap). The gap determines the amount of space between columns or bars of plotted series. +- New [`xAxisMinimumGapSize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisMinimumGapSize), determines the minimum allowed pixel-based value for the plotted series when using [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap) to ensure there is always some spacing between each category. + +<div class="divider--half"></div> + +## **13.1.0 (November 2021)** + +> \[!Note] +> Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. + +### igniteui-angular-charts (Charts) + +This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components. + +- Changed [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation) property's type to **YAxisLabelLocation** from **AxisLabelLocation** in [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Changed [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property's type to **XAxisLabelLocation** from **AxisLabelLocation** in [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- Added [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation) property to [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Added support for representing geographic series of [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) in a legend +- Added crosshair lines by default in [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Added crosshair annotations by default in [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- Added final value annotation by default in [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- Added new properties in Category Chart and Financial Chart: + - [`crosshairsLineThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsLineThickness) and other properties for customizing crosshairs lines + - [`crosshairsAnnotationXAxisBackground`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsAnnotationXAxisBackground) and other properties for customizing crosshairs annotations + - [`finalValueAnnotationsBackground`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#finalValueAnnotationsBackground) and other properties for customizing final value annotations + - [`areaFillOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#areaFillOpacity) that allow changing opacity of series fill (e.g. Area chart) + - [`markerThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerThickness) that allows changing thickness of markers +- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map: + - [`markerAutomaticBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerAutomaticBehavior) that allows which marker type is assigned to multiple series in the same chart + - [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) for setting badge shape of all series represented in a legend + - [`legendItemBadgeMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) for setting badge complexity on all series in a legend +- Added new properties in Series in Data Chart and Geographic Map: + - [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeShape) for setting badge shape on specific series represented in a legend + - [`legendItemBadgeMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) for setting badge complexity on specific series in a legend +- Changed default vertical crosshair line stroke from <span style="color:#000000">#000000</span> to <span style="color:#BBBBBB">#BBBBBB</span> in category chart and series +- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's [`markerAutomaticBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerAutomaticBehavior) property to `SmartIndexed` enum value +- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's [`legendItemBadgeMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendItemBadgeMode) property to `MatchSeries` enum value +- Changed color palette of series and markers displayed in all charts to improve accessibility + +| Old brushes/outlines | New outline/brushes | +| -------------------- | ------------------- | +| <span style="color:#8BDC5C">#8BDC5C</span> <br><span style="color:#8B5BB1">#8B5BB1</span> <br><span style="color:#6DB1FF">#6DB1FF</span> <br><span style="color:#F8A15F">#F8A15F</span> <br><span style="color:#EE5879">#EE5879</span> <br><span style="color:#735656">#735656</span> <br><span style="color:#F7D262">#F7D262</span> <br><span style="color:#8CE7D9">#8CE7D9</span> <br><span style="color:#E051A9">#E051A9</span> <br><span style="color:#A8A8B7">#A8A8B7</span> | <span style="color:#8BDC5C">#8BDC5C</span> <br><span style="color:#8961A9">#8961A9</span> <br><span style="color:#6DB1FF">#6DB1FF</span> <br><span style="color:#82E9D9">#82E9D9</span> <br><span style="color:#EA3C63">#EA3C63</span> <br><span style="color:#735656">#735656</span> <br><span style="color:#F8CE4F">#F8CE4F</span> <br><span style="color:#A8A8B7">#A8A8B7</span> <br><span style="color:#E051A9">#E051A9</span> <br><span style="color:#FF903B">#FF903B</span> <br> | + +<div class="divider--half"></div> + +## **11.2.0 (April 2021)** + +### igniteui-angular-charts (Charts) + +This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html), [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), and [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html). + +- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners +- Changed Scatter High Density series’ colors for heat min property from <span style="color:#8a5bb1">#8a5bb1</span> to <span style="color:#000000">#000000</span> +- Changed Scatter High Density series’ colors for heat max property from <span style="color:#ee5879">#ee5879</span> to <span style="color:#ee5879">#ee5879</span> +- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from <span style="color:#C62828">#C62828</span> to <span style="color:#ee5879">#ee5879</span> +- Changed marker's thickness to 2px from 1px +- Changed marker's fill to match the marker's outline for [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html), [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html), [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html), [`IgxPolarScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html). You can use set [`markerFillMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillMode) property to Normal to undo this change +- Compressed labelling for the [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) and [`IgxOrdinalTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxordinaltimexaxiscomponent.html) +- New Marker Properties: + - series.[`markerFillMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillMode) - Can be set to `MatchMarkerOutline` so the marker depends on the outline + - series.[`markerFillOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerFillOpacity) - Can be set to a value 0 to 1 + - series.[`markerOutlineMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlineMode) - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color +- New Series Property: + - series.[`outlineMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlineMode) - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series +- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`computedPlotAreaMarginMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#computedPlotAreaMarginMode), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: + - chart.[`plotAreaMarginLeft`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginLeft) + - chart.[`plotAreaMarginTop`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginTop) + - chart.[`plotAreaMarginRight`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginRight) + - chart.[`plotAreaMarginBottom`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#plotAreaMarginBottom) + - chart.[`computedPlotAreaMarginMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#computedPlotAreaMarginMode) +- New Highlighting Properties + - chart.[`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingMode) - Sets whether hovered or non-hovered series to fade, brighten + - chart.[`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#highlightingBehavior) - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item + - Note, in previous releases the highlighting was limited to fade on hover. +- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series: +- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series: +- Added support for overriding the data source of individual stack fragments within a stacked series +- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series +- Added support to automatically sync the vertical zoom to the series content +- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed +- Redesigned color palette of series and markers: + +| Old brushes/outlines | New outline/brushes | +| -------------------- | ------------------- | +| <span style="color:#7446B9">#7446B9</span> <br><span style="color:#9FB328">#9FB328</span> <br><span style="color:#F96232">#F96232</span> <br><span style="color:#2E9CA6">#2E9CA6</span> <br><span style="color:#DC3F76">#DC3F76</span> <br><span style="color:#FF9800">#FF9800</span> <br><span style="color:#3F51B5">#3F51B5</span> <br><span style="color:#439C47">#439C47</span> <br><span style="color:#795548">#795548</span> <br><span style="color:#9A9A9A">#9A9A9A</span> | <span style="color:#8bdc5c">#8bdc5c</span> <br><span style="color:#8b5bb1">#8b5bb1</span> <br><span style="color:#6db1ff">#6db1ff</span> <br><span style="color:#f8a15f">#f8a15f</span> <br><span style="color:#ee5879">#ee5879</span> <br><span style="color:#735656">#735656</span> <br><span style="color:#f7d262">#f7d262</span> <br><span style="color:#8ce7d9">#8ce7d9</span> <br><span style="color:#e051a9">#e051a9</span> <br><span style="color:#a8a8b7">#a8a8b7</span> <br> | + +for example: + +| | | +|---|---| +| <img class="responsive-img" src="../images/chartDefaults1.png" alt="chartDefaults1" /> | <img class="responsive-img" src="../images/chartDefaults2.png" alt="chartDefaults2" /> | +| <img class="responsive-img" src="../images/chartDefaults3.png" alt="chartDefaults3" /> | <img class="responsive-img" src="../images/chartDefaults4.png" alt="chartDefaults4" /> | + +#### Chart Legend + +- Added horizontal [`orientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added [`legendHighlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#legendHighlightingMode) property - Enables series highlighting when hovering over legend items + +### igniteui-angular-maps (GeoMap) + +> \[!Note] +> These features are CTP + +- Added support for wrap around display of the map (scroll infinitely horizontally) +- Added support for shifting display of some map series while wrapping around the coordinate origin +- Added support for highlighting of the shape series +- Added support for some annotation layers for the shape series + +<div class="divider--half"></div> + +## **8.2.12** + +- Changed Import Statements + +Import statements have been simplified to use just package names instead of full paths to API classes and enums. + +> \[!Note] +> These breaking changes were introduce in these packages and components only: + +| Affected Packages | Affected Components | +| ------------------|---------------------| +| <a href="https://www.npmjs.com/package/igniteui-angular-excel/v/8.2.12" target="_blank">igniteui-angular-excel</a> | [Excel Library](excel-library.md) | +| <a href="https://www.npmjs.com/package/igniteui-angular-spreadsheet/v/8.2.12" target="_blank">igniteui-angular-spreadsheet</a> | [Spreadsheet](spreadsheet-overview.md) | +| <a href="https://www.npmjs.com/package/igniteui-angular-maps/v/8.2.12" target="_blank">igniteui-angular-maps</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md) | +| <a href="https://www.npmjs.com/package/igniteui-angular-gauges/v/8.2.12" target="_blank">igniteui-angular-gauges</a> | [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md) | +| <a href="https://www.npmjs.com/package/igniteui-angular-charts/v/8.2.12" target="_blank">igniteui-angular-charts</a>| Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md) | +| <a href="https://www.npmjs.com/package/igniteui-angular-core/v/8.2.12" target="_blank">igniteui-angular-core</a> | all classes and enums | + +- Code After Changes + +Now, you need to use just package names instead of full paths to API classes and enums. + +Please also note that the name of the Data Grid component and its corresponding modules have also changed. + +```ts +// gauges: +import { IgxLinearGauge } from "igniteui-angular-gauges"; +import { IgxLinearGaugeModule } from "igniteui-angular-gauges"; +import { IgxLinearGraphRange } from "igniteui-angular-gauges"; +import { IgxRadialGauge } from 'igniteui-angular-gauges}'; +import { IgxRadialGaugeModule } from 'igniteui-angular-gauges'; +import { IgxRadialGaugeRange } from 'igniteui-angular-gauges'; +import { SweepDirection } from 'igniteui-angular-core'; +// charts: +import { IgxFinancialChartComponent } from "igniteui-angular-charts"; +import { IgxFinancialChartModule } from "igniteui-angular-charts"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxDataChartCoreModule } from "igniteui-angular-charts"; +// maps: +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +``` + +- Code Before Changes + +Before, you had to import using full paths to API classes and enums: + +```ts +// gauges: +import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component'; +import { IgxLinearGaugeModule } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-module'; +import { IgxLinearGraphRange } from 'igniteui-angular-gauges/ES5/igx-linear-graph-range'; + +import { IgxRadialGaugeComponent } from "igniteui-angular-gauges/ES5/igx-radial-gauge-component"; +import { IgxRadialGaugeModule } from "igniteui-angular-gauges/ES5/igx-radial-gauge-module"; +import { IgxRadialGaugeRange } from "igniteui-angular-gauges/ES5/igx-radial-gauge-range"; +import { SweepDirection } from "igniteui-angular-core/ES5/SweepDirection"; + +// charts: +import { IgxFinancialChartComponent } from "igniteui-angular-charts/ES5/igx-financial-chart-component"; +import { IgxFinancialChartModule } from "igniteui-angular-charts/ES5/igx-financial-chart-module"; +import { IgxDataChartComponent } from "igniteui-angular-charts/ES5/igx-data-chart-component"; +import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module"; + +// maps: +import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component"; +import { IgxGeographicMapModule } from "igniteui-angular-maps/ES5/igx-geographic-map-module"; +``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-cli-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-cli-overview.md new file mode 100644 index 000000000..9c8333c7d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-cli-overview.md @@ -0,0 +1,16 @@ +--- +title: Angular Schematics | Angular CLI | Ignite UI for Angular | Infragistics +_description: Angular Schematics and Ignite UI CLI help you get a jump start on creating and modifying projects with Ignite UI for Angular components. +_keywords: igniteui for angular, angular schematics, cli, infragistics +_tocName: Angular Schematics & Ignite UI CLI +--- + +# Angular Schematics & Ignite UI CLI + +Our CLI tools provide project templates pre-configured for Ignite UI for Angular that help you get your next app off the ground in record time. A selection of views with Ignite UI for Angular components that can be further added to projects provide a substantial productivity boost for developers. + +[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) is a stand-alone command-line tool for creating and scaffolding applications for a variety of frameworks. You can find more information and examples about its usage in the [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.md) topic. + +[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) are available as a collection that can be used with the [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli). They offer similar core Ignite UI CLI functionality, but one that's integrated with the Schematics workflow and focused specifically on this product. The schematics collection is added to your project when you [install Ignite UI for Angular](getting-started.md#installing-ignite-ui-for-angular). You can find more information and examples about its usage in the [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.md) topic. + +Both versions of the tooling allow for various projects, component and scenario views (templates) and offer [guided step-by-step mode using Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) and [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-code-splitting-and-multiple-entry-points.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-code-splitting-and-multiple-entry-points.md new file mode 100644 index 000000000..6289fd20c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-code-splitting-and-multiple-entry-points.md @@ -0,0 +1,325 @@ +--- +title: Code Splitting and Multiple Entry Points | Ignite UI for Angular | Infragistics +_description: Learn how to optimize your Angular application bundle size using Ignite UI for Angular's multiple entry points for better tree-shaking and code splitting. +_keywords: ignite ui for angular, code splitting, entry points, tree-shaking, lazy loading, bundle optimization +_tocName: Multiple Entry Points +--- + +# Code Splitting and Multiple Entry Points + +Starting with version 21.0.0, Ignite UI for Angular supports multiple entry points, enabling better tree-shaking, code splitting, and lazy loading of components. This architectural improvement allows you to import only the components and utilities you need, significantly reducing your application's bundle size. + +## Overview + +Previously, all Ignite UI for Angular components were exported from a single entry point (`igniteui-angular`). While convenient, this approach bundled all components together, making it difficult for build tools to eliminate unused code effectively. + +With the new multiple entry points architecture, each component or group of related components has its own dedicated entry point. This allows modern bundlers to: + +- **Enable code splitting** - Each component can be lazy-loaded separately on demand +- **Reduce initial bundle size** - Import only what your application actually needs in the initial load +- **Improve build performance** - Smaller dependency graphs lead to faster builds + +## Benefits + +✅ **Code Splitting** - Each component is lazy-loadable +✅ **Smaller Initial Bundles** - Import only what you need +✅ **Better Performance** - Reduced individual bundle sizes mean faster load times +✅ **Clean Architecture** - No circular dependencies +✅ **Full Backwards Compatibility** - Main entry point still works +✅ **Granular Grid Imports** - Load only the specific grid type you need + +## Entry Points Structure + +### Core Entry Points + +- `igniteui-angular/core` - Core utilities, services, and base types (e.g., `IgxOverlayService`) +- `igniteui-angular/directives` - Common directives + +### Component Entry Points + +Each component has its own entry point following the pattern `igniteui-angular/<component-name>`: + +- `igniteui-angular/accordion` +- `igniteui-angular/action-strip` +- `igniteui-angular/avatar` +- `igniteui-angular/badge` +- `igniteui-angular/banner` +- `igniteui-angular/bottom-nav` +- `igniteui-angular/button` +- `igniteui-angular/button-group` +- `igniteui-angular/calendar` +- `igniteui-angular/card` +- `igniteui-angular/carousel` +- `igniteui-angular/chat` +- `igniteui-angular/checkbox` +- `igniteui-angular/chips` +- `igniteui-angular/combo` +- `igniteui-angular/date-picker` +- `igniteui-angular/date-range-picker` +- `igniteui-angular/dialog` +- `igniteui-angular/drop-down` +- `igniteui-angular/expansion-panel` +- `igniteui-angular/icon` +- `igniteui-angular/input-group` +- `igniteui-angular/list` +- `igniteui-angular/navbar` +- `igniteui-angular/navigation-drawer` +- `igniteui-angular/paginator` +- `igniteui-angular/progressbar` +- `igniteui-angular/query-builder` +- `igniteui-angular/radio` +- `igniteui-angular/select` +- `igniteui-angular/simple-combo` +- `igniteui-angular/slider` +- `igniteui-angular/snackbar` +- `igniteui-angular/splitter` +- `igniteui-angular/stepper` +- `igniteui-angular/switch` +- `igniteui-angular/tabs` +- `igniteui-angular/time-picker` +- `igniteui-angular/toast` +- `igniteui-angular/tree` + +### Grid Entry Points + +Grid components are split into granular entry points for optimal code splitting: + +- `igniteui-angular/grids/core` - Shared grid infrastructure (columns, toolbar, filtering, sorting, pipes, and utilities) +- `igniteui-angular/grids/grid` - Data Grid component (`IgxGridComponent`) +- `igniteui-angular/grids/tree-grid` - Tree Grid component (`IgxTreeGridComponent`) +- `igniteui-angular/grids/hierarchical-grid` - Hierarchical Grid component (`IgxHierarchicalGridComponent`, `IgxRowIslandComponent`) +- `igniteui-angular/grids/pivot-grid` - Pivot Grid component (`IgxPivotGridComponent`, `IgxPivotDataSelectorComponent`) + +## Migration + +### Automatic Migration + +The recommended approach is to migrate your imports automatically during the `ng update` process. When updating to version 21.0.0, you'll be prompted to migrate imports: + +```cmd +ng update igniteui-angular +``` + +When prompted, choose **"Yes"** to migrate imports to new entry points for optimal bundle sizes. + +Alternatively, you can run the migration separately: + +```cmd +ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0 +``` + +### Manual Migration + +If you prefer to migrate manually or need to update specific imports, follow this pattern: + +#### Before (v20.x and earlier) + +```typescript +import { + IgxGridComponent, + IgxTreeGridComponent, + IgxInputDirective, + IgxBottomNavComponent, + Direction, + GridBaseAPIService, + IgxOverlayService, + IFilteringExpression +} from 'igniteui-angular'; +``` + +#### After (v21.0.0) + +```typescript +import { IgxOverlayService } from 'igniteui-angular/core'; +import { IFilteringExpression, GridBaseAPIService } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxInputDirective } from 'igniteui-angular/input-group'; +import { IgxBottomNavComponent } from 'igniteui-angular/bottom-nav'; +import { CarouselAnimationDirection } from 'igniteui-angular/carousel'; +``` + +### Type Renames + +To avoid naming conflicts with the new architecture, some types have been renamed: + +- `Direction` → `CarouselAnimationDirection` (in the carousel entry point) + +```typescript +// Before +import { Direction } from 'igniteui-angular'; + +// After +import { CarouselAnimationDirection } from 'igniteui-angular/carousel'; +``` + +## Backwards Compatibility + +The main entry point (`igniteui-angular`) maintains **full backwards compatibility** by re-exporting all granular entry points. You can continue using imports from the main entry point without any changes: + +```typescript +// This still works and will continue to work +import { IgxGridComponent, IgxButtonDirective } from 'igniteui-angular'; +``` + +However, **we strongly recommend migrating to the new entry points** to take advantage of better tree-shaking and smaller bundle sizes. + +## Usage Examples + +### Example 1: Simple Component Usage + +If you only need a button and an input, import just those entry points: + +```typescript +import { Component } from '@angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/button'; +import { + IgxInputGroupComponent, + IgxInputDirective, + IgxLabelDirective +} from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-form', + standalone: true, + imports: [ + IgxButtonDirective, + IgxInputGroupComponent, + IgxInputDirective, + IgxLabelDirective + ], + template: ` + <igx-input-group> + <label igxLabel>Name</label> + <input igxInput type="text" /> + </igx-input-group> + <button igxButton="contained">Submit</button> + ` +}) +export class FormComponent {} +``` + +### Example 2: Grid with Specific Features + +Import only the grid type you need along with core grid utilities: + +```typescript +import { Component } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; + +@Component({ + selector: 'app-data-grid', + standalone: true, + imports: [IgxGridComponent, IgxGridToolbarComponent], + template: ` + <igx-grid [data]="data" [autoGenerate]="true"> + <igx-grid-toolbar></igx-grid-toolbar> + </igx-grid> + ` +}) +export class DataGridComponent { + public data = [ + { id: 1, name: 'John' }, + { id: 2, name: 'Jane' } + ]; +} +``` + +### Example 3: Lazy Loading Components + +With the new entry points, you can easily lazy-load components: + +```typescript +// app.routes.ts +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { + path: 'grid', + loadComponent: () => + import('./features/grid/grid.component') + .then(m => m.GridComponent) + }, + { + path: 'tree-grid', + loadComponent: () => + import('./features/tree-grid/tree-grid.component') + .then(m => m.TreeGridComponent) + } +]; +``` + +```typescript +// features/grid/grid.component.ts +import { Component } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; + +@Component({ + selector: 'app-grid', + standalone: true, + imports: [IgxGridComponent], + template: `<igx-grid [data]="data" [autoGenerate]="true"></igx-grid>` +}) +export class GridComponent { + public data = []; +} +``` + +## Migration Options Summary + +You have three options when updating to v21.0.0: + +### Option 1: Migrate During Update (Recommended) + +```cmd +ng update igniteui-angular +``` + +When prompted, choose **"Yes"** to migrate imports. + +### Option 2: Keep Using Main Entry Point + +```cmd +ng update igniteui-angular +``` + +When prompted, choose **"No"** to continue using the main entry point. The library remains fully backwards compatible, but you won't benefit from optimal bundle sizes. + +### Option 3: Migrate Later + +Update without migrating (choose "No" when prompted): + +```cmd +ng update igniteui-angular +``` + +Migrate manually later: + +```cmd +ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0 +``` + +## Best Practices + +1. **Use specific entry points** - Import from the most specific entry point possible (e.g., `igniteui-angular/grids/grid` instead of `igniteui-angular`) +2. **Leverage lazy loading** - Combine entry points with Angular's lazy loading for even better performance +3. **Import only what you need** - Don't import the entire `core` entry point if you only need one service +4. **Check bundle analyzer** - Use tools like [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) to verify your bundle size improvements +5. **Update regularly** - Keep your Ignite UI for Angular version up to date to benefit from the latest optimizations + +## Additional Resources + +- [Angular Package Format - Entry Points and Code Splitting](https://angular.io/guide/angular-package-format#entrypoints-and-code-splitting) +- [Ignite UI for Angular Update Guide](update-guide.md) +- [Ignite UI for Angular CHANGELOG](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md) +- [Ignite UI for Angular GitHub Repository](https://github.com/IgniteUI/igniteui-angular) + +## API References + +For detailed information about specific components and their APIs, refer to the component documentation: + +- [Grid](../grid/grid.md) +- [Tree Grid](../treegrid/tree-grid.md) +- [Hierarchical Grid](../hierarchicalgrid/hierarchical-grid.md) +- [Pivot Grid](../pivotGrid/pivot-grid.md) \ No newline at end of file diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-data-analysis.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-data-analysis.md new file mode 100644 index 000000000..25194855a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-data-analysis.md @@ -0,0 +1,250 @@ +--- +title: Data analysis capabilities | Angular Universal | Ignite UI for Angular | Infragistics +_description: How to use chart integration functionality with Ignite UI for Angular and provide the data analysis means to achieve better business objectives. +_keywords: data analysis, ignite ui for angular, infragistics +_tocName: Data Analysis +--- + +<style> + .full-screen-btn { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 13px; + font-weight: 400; + color: #fff; + border: 0; + text-transform: uppercase; + padding: 8px 16px; + margin: 24px 0; + outline-style: none; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; + background: #0099ff; + } + .full-screen-btn:hover, .full-screen-btn:focus { + color: white; + -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08); + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08); + } + .full-screen-btn::before { + content: ""; + display: inline-block; + width: 28px; + height: 28px; + margin-right: 8px; + background-image: url("../../images/general/fullscreen-white-18dp.svg"); + background-size: 100%; + background-repeat: no-repeat; + } + .full-screen-btn[disabled] { + color: rgba(0, 0, 0, 0.28); + background: #eee; + -webkit-box-shadow: none; + box-shadow: none; + } + .full-screen-btn[disabled]::before { + background-image: url("../../images/general/fullscreen-white-18dp.svg"); + } + +</style> + +# Data Analysis + +Data analysis is the process of examining, transforming, and arranging data in a specific way to generate useful information based on it. It also allows for reaching certain outcomes and conclusions through analytical and logical reasoning. + +>[!NOTE] +>This functionality will be introduced in **Ignite UI for Angular** as external package in order to ease the configuration and limit the required code at minimum + +## Data Analysis with DockManager + +Go ahead and perform a `cell range selection` or `column selection` in order to enable the `Chart types view` based on the selected data. This view is part of [Dock Manager's](../dock-manager.md) right pane. From there you can: + +- Choose specific chart type and visualize it in separate pane. +- Or use the `Data Analysis` context button to show different text formatting options. + +<div class="sample-container loading" style="height: 580px;"> + <iframe id="data-analysis-dock-manager" frameborder="0" seamless width="100%" height="100%" src="{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis-dock-manager" onload="onSampleIframeContentLoaded(this);" class="no-theming"></iframe> +</div> + +<button class="full-screen-btn" onclick='window.open("{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis-dock-manager")'>View in full screen</button> + +> [!NOTE] +> The [Dock Manager Web component](../dock-manager.md) provides means to manage the layout of the application through panes, and allowing the end-users to customize it further by pinning, resizing, moving and hiding panes. After selecting data, go ahead and create a couple of charts and pin them (by dragging) to the available areas + +Keep in mind (sample related): + +- On new data selection chart data will be updated. +- If multi-cell range selection is applied, only the `Text formatting` functionality will be available. +- If selected data is not compatible for any of the charts - an "Incompatible data" warning message will be shown. + +## Data Analysis Package + +You can start using this functionality by following the steps below. Keep in mind that **igniteui-angular-extras** package is only available through our [private npm feed](https://packages.infragistics.com/npm/js-licensed/). If you have a [valid commercial license](ignite-ui-licensing.md#license-agreements), you will have access to the private feed. + +Let's start with: + +- Installing the package in your application + +```cmd +npm install @infragistics/igniteui-angular-extras +``` + +- Installing the package peer dependencies + +```cmd +npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts +``` + +- After the installation of the packages go ahead and: + - Add the `IgxExtrasModule` to your app.module.ts + - Apply `igxChartIntegration`, `igxConditionalFormatting`, `igxContextMenu` directives to your grid + +```html +<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu + [data]="localData" [autoGenerate]="true"> + <igx-paginator> + </igx-paginator> +</igx-grid> +``` + +And that's it! You can now perform **cell range selection** and follow the data analysis flow. + +## Data Analysis Button + +The data analysis button is the outlet to visualize your selected data in various ways: + +<img class="responsive-img" src="../../images/general/data-analysis-button.png" alt="Data analysis button" /> + +This way every range selection performed in the grid can be easily analyzed in a single click. + +The button is rendered on every range selection at the **bottom-right** of the selection and hides when the selection is inactive. Horizontal and vertical scrolling reposition the button so that it is always rendered at its designated position. + +## Chart Integration + +This section introduces Grid's integration with charting functionality, which allows the end user to visualize a chart based on Grid's selected data and choose different chart types if needed. + +The chart will be shown by selecting a range of cells and by clicking on the show analysis button. + +>[!NOTE] +>The chart creation option is only available when there are numeric values in the selected data. + +<div class="sample-container loading" style="height: 750px;"> + <iframe id="grid-dynamic-chart" frameborder="0" seamless="" width="100%" height="100%" src="{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis" class="lazyload no-theming"></iframe> +</div> + +<button class="full-screen-btn" onclick='window.open("{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis")'>View in full screen</button> + +We currently support the following Chart types: + +- [Column Chart](../charts/types/column-chart.md), +[Area Chart](../charts/types/stacked-chart.md), +[Line Chart](../charts/types/line-chart.md), +[Bar Chart](../charts/types/line-chart.md), +- [Stacked Chart](../charts/types/stacked-chart.md), +[Stacked 100% Chart](../charts/types/stacked-chart.md), +- [Pie Chart](../charts/types/pie-chart.md), +[Scatter Chart](../charts/types/stacked-chart.md), +[Bubble Chart](../charts/types/bubble-chart.md) + In order to show meaningful Bubble Chart we disable the preview when the data is not in valid format. + +## Conditional Cell Formatting + +If you have a Grid with thousands of rows of data it would be very difficult to see patterns and trends just from examining the raw information. Similar to charts and sparklines, `Conditional formatting` provides another way to visualize data and make it easier to understand. + +Understanding conditional formatting - it allows for applying formatting such as colors and data bars to cells based on `their value` in the range selection. The [sample below](#demo) demonstrates how you can configure the Grid to apply `Conditional Formatting`. It depends on the `Conditional formatting selection type` what condition `rules` will be shown. Below you will find the predefined styles (presets) that you can use in order to quickly apply conditional formatting to your data. The formatting of a range gets cleared when performing formatting on different range or through the clear button. The clear button is only active when there is an applied formatting. + +### Number range selection + +- `Data Bars` - Data bars can help you spot larger and smaller numbers, such as top-selling and bottom-selling products. This preset makes it very easy to visualize values in a range of selected cells. A longer bar represents a higher value. A cell that holds value of 0 has no data bar all other cells are filled proportionally. Positive values are with `green` color and negative values will be `red` + +<img class="responsive-img" src="../../images/general/data-bars-formatting.png" alt="Data bars formatting" /> + + +> `Lowest threshold` - Below 33% of the maximum cell value in range selection. +> `Highest threshold` - Above 66% of the maximum cell value in range selection. + +<img class="responsive-img" src="../../images/general/color-scale-formatting.png" alt="Color scale formatting" /> + +- `Top 10%` - Use this preset to highlight the values which are equivalent to top 10% of the selected data. + +<img class="responsive-img" src="../../images/general/top-10-percent.png" alt="Top 10% formatting" /> + +- `Greater than` - This preset marks all values `Greater than the average` +- `Duplicate values` - Marks all duplicate values. +- `Unique values` - All cell values that are unique will be marked (`blue` background color). + +<img class="responsive-img" src="../../images/general/unique-values-formatting.png" alt="Unique values formatting" /> + +- `Empty`- Marks all cells with `undefined` values + +### Text range selection + +- `Text contains` - Marks all cells that contain the cell value from the `top-left most selected cell`. Example: + +<img class="responsive-img" src="../../images/general/contains-formatting.png" alt="Text contains formatting" /> + +- `Duplicate values` - Marks all duplicate values. +- `Unique values` - All cell values that are unique will be marked (`blue` background color). +- `Empty`- Marks all cells with `undefined` values + +### Demo + +<div class="sample-container loading" style="height: 750px;"> + <iframe id="grid-dynamic-chart" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis" class="lazyload no-theming"></iframe> +</div> + +<button class="full-screen-btn" onclick='window.open("{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis")'>View in full screen</button> + +## Data Analysis Package API + +### IgxConditionalFormattingDirective + +<div class="divider--half"></div> + +| API | Description | Arguments | +|---------|:-------------:|-----------:| +| `ConditionalFormattingType` | An **enum**, which represents the conditional formatting types | | +| `IFormatColors` | An **interface**, which represents the formatting colors | | +| `formatter`: **string** | An **input** property, which sets/gets the current formatting type | | +| `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: _IFormatColors_ | +| `onFormattersReady`| An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | | +| `formatCells` | Applies conditional formatting for the selected cells. Usage: <br/> **this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/gridselectionrange.html) [ ], <br /> `reset`: boolean (**true** by default) | +| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage: <br /> **this.conditionalFormatting.clearFormatting()** | | + +### IgxChartIntegrationDirective + +<div class="divider--half"></div> + +| API | Description | Arguments | +|---------|-------------|-----------| +| `CHART_TYPE` | An **enum**, representing the supported chart types | | +| `OPTIONS_TYPE` | An **enum**, representing the supported options type, which can be applied to a chart component| | +| `IOptions` | An **interface** for chart property options | | +| `chartFactory`| Creates a chart component, based on the provided chart type. Usage: <br /> **this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef)** | `type`: **any[ ]**, viewContainerRef: [`ViewContainerRef`](https://angular.io/api/core/ViewContainerRef) | +| `setChartComponentOptions` | Sets property options to a chart component. Usage: <br /> **this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: _CHART_TYPE_, `optionsType`: _OPTIONS_TYPE_, `options`: _IOptions_ | +| `getAvailableCharts` | Returns the enabled chart types | | +| `enableCharts` | Enables the provided chart types. By default all chart types are enabled | `types`: _CHART_TYPE_ [ ] | +| `disableCharts` | Disables the provided chart types | `types`: _CHART_TYPE_ [ ] | +| `onChartTypesDetermined` | An **event**, emitted when the chart types, applicable for the `chartData`, are determined. This event emits an object of type `IDeterminedChartTypesArgs`, which has 2 properties: <br /> `chartsAvailabilty`: _Map<CHART_TYPE, boolean>_ - the enabled/disabled chart types, <br /> `chartsForCreation`: _CHART_TYPE[]_ - the applicable chart types for the `chartData` | | +| `onChartCreationDone` | An event, emitted when a chart is created. This event emits the chart component, which is created | | +| `chartData`: **any[ ]** | An **input** property, which sets/gets the data for the charts | `selectedData`: **any[ ]** | +| `useLegend`: **boolean** | An **input**, which enables/disables the legend usage for all chart types. By default it is set to **true** | | +| `defaultLabelMemberPath`: **string** | An **input** property, which sets/gets the default label member path for the charts. By default the label member path will be determined, based on the provided data. <br />( **if the provided data records have properties with string values, the first string property name of the first data record in the `chartData` will be selected as a label member path for the charts, if not, the label member path will have value _'Index'_.** ) <br/> | | +| `scatterChartYAxisValueMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default Y axis value member path will be the first numeric property name of the first data record in the `chartData`** | `path`: **string** | +| `bubbleChartRadiusMemberPath`: **string** | An **input** property, which sets/gets the default radius member path for the scatter bubble chart. **If not set, the default radius member path will be the second numeric property name of the first data record in the `chartData`** | `path`: **string** | + + +## Useful resources + +<div class="divider--half"></div> + +- [Angular Universal guide](https://angular.io/guide/universal) +- [Ignite UI Starter Kit](https://github.com/IgniteUI/ng-universal-example) +- [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) +- [Getting started with Ignite UI for Angular](getting-started.md) +- [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) +- [Ignite UI for Angular Schematics Guide](cli/step-by-step-guide-using-angular-schematics.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-getting-started.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-getting-started.md new file mode 100644 index 000000000..8116148a2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-getting-started.md @@ -0,0 +1,326 @@ +--- +title: Getting Started | Ignite UI for Angular | Infragistics +_description: Ignite UI for Angular is a complete set of native Angular UI components, which allow you to build fast, feature-rich and Material designed applications! +_keywords: ignite ui for angular, getting started, angular components +_tocName: Getting started +--- + +# Getting started with Ignite UI for Angular + +[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework. + +Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. For more details, refer to the [Ignite UI Licensing](./ignite-ui-licensing.md) and [Open Source vs Premium](./open-source-vs-premium.md) topics. + +## Prerequisites + +1. Install NodeJS. +2. Install Visual Studio Code. + +<div> + <div style="display:inline-block;width:45%;text-align:center;"> + <img src="../../images/general/nodejs.svg" alt="NodeJS" + style="display:flex;max-height:100px;margin:auto auto 20px auto;" /> + <a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon" + style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;"> + DOWNLOAD NODE + </a> + </div> + <div style="display:inline-block;width:45%;text-align:center;"> + <img src="../../images/general/vs-code.svg" alt="Visual Studio Code" + style="display:flex;max-height:100px;margin:auto auto 20px auto;" /> + <a target="_blank" href="https://code.visualstudio.com/download" class="no-external-icon" + style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;"> + DOWNLOAD VS CODE + </a> + </div> +</div> +<div class="divider--half"></div> + +## Installing Ignite UI for Angular + +Ignite UI for Angular can be installed either with the Angular CLI or with the Ignite UI CLI. + +### Quick Start with the Angular CLI + +The Angular CLI provides support for external libraries to your project through the `ng add` command, which installs a library's `npm` packages to your workspace and configures the project in the current working directory to use that library. + +To create an Angular application with the Angular CLI, open your preferred terminal and type in the following command: + +```cmd +ng new <project name> --style=scss +``` + +You can specify the file extension or preprocessor to use for your application's style files with the `--style` option. We recommend using SCSS since our components' styles are based on the [Ignite UI for Angular theming library](../themes.md). Later on, when you install the Ignite UI for Angular package, your application will be configured to use the default styling theme which can be then easily customized either for all or for specific component instances. + +Thereafter you can install the Ignite UI for Angular package, along with all of its dependencies, font imports and styles references to your project, by running the following command: + +```cmd +ng add igniteui-angular +``` + +>[!NOTE] +> You don't need to install the `igniteui-theming` package explicitly, it comes with Ignite UI for Angular. + +>[!NOTE] +> Keep in mind that with the command above you will install the Trial version of any Ignite UI for Angular component under commercial license (such as `igxGrid`). + +#### Additional packages + +In addition, you may want to include a number of Ignite UI components to your project, such as: + +- Grid Lite - Open-Source + +The [Grid Lite component](../grid-lite/overview.md) is designed to provide a minimal set of features under MIT license that should serve a wide range of projects that need essential data-display functionality with minimal overhead, and the performance users expect. It is designed for developers who need fast, lightweight data presentation without the complexity of an enterprise grid. Its API resembles that of the commercial `IgxGrid` ensuring a simple and straightforward upgrade path. + +```cmd +ng add igniteui-grid-lite +``` + +- Dock Manager - Premium + +The Ignite UI Dock Manager component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes. + +```cmd +ng add igniteui-dockmanager +``` + +<!-- TODO: Add specific grid-lite -> igx-grid upgrade info here once available --> + +### Upgrading from Trial to Licensed + +If you want to start using the **Licensed Ignite UI for Angular package** it is strongly recommended to follow the [Upgrading packages guide with Schematics and Ignite UI CLI](ignite-ui-licensing.md#upgrading-packages-using-our-angular-schematics-or-ignite-ui-cli). + +Following is a quick overview of the steps that you need to perform in order to start using the **Licensed version of Ignite UI for Angular**. Depending on your project setup, either run the following schematic in your project: + +```bash +ng g @igniteui/angular-schematics:upgrade-packages +``` + +or if using `igniteui-cli`: + +```bash +ig upgrade-packages +``` + +The schematic will take care of switching the package dependencies of the project and update source references. +[You'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). + +#### Login to our npm registry with a new setup + +The approach described above covers only the scenarios where Ignite UI for Angular Trial package is already installed. If you are performing a new setup of a project or just starting with using Ignite UI for Angular, follow the guidance below. + +It's very important to [perform a correct setup of the private npm feed environment](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide), by: + +- Ensuring a valid setup of the private registry. +- Log in to our private feed using npm by specifying a non-trial user account and password. + +Details on the entire process [could be found here](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). + +### Quick Start with Angular Schematics & Ignite UI CLI + +To create an application from scratch and configure it to use the Ignite UI for Angular components you can use either the Ignite UI for Angular Schematics or the Ignite UI CLI. The first step is to install the respective package globally as follows: + +```cmd +npm i -g @igniteui/angular-schematics +``` + +or: + +```cmd +npm install -g igniteui-cli +``` + +Our [guided experience using the Ignite UI CLI](cli/step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) is the easiest way to bootstrap a configured application. + +To activate the guide using the Ignite UI for Angular Schematics run: + +```cmd +ng new --collection="@igniteui/angular-schematics" +``` + +or run the following command in case you are using the CLI tool: + +```cmd +ig +``` + +>[!NOTE] +> At some point during the steps execution [you'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). This is part of the Trial to License account setup and is applicable if you plan to use any of the components under [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). + +<div style="display:inline-block;"> + <a style="background: url(../../images/general/buildCLIapp.gif); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;" + href="https://youtu.be/QK_NsdtdA70" target="_blank"> + <img src="../../images/general/play.svg" alt="Play Video" style="vertical-align: middle;" /> + </a> + <p style="text-align:center;">Building Your First Ignite UI CLI App</p> +</div> + +Learn more about our [Angular Schematics & Ignite UI CLI](cli-overview.md). + +## Using Ignite UI for Angular + +We are now ready to start using Ignite UI for Angular components! + +### Add components automatically + +#### Import modules and use components + +Now we can add new components to our application using either the `component` schematic or the `add` command: + +```cmd +ng g @igniteui/angular-schematics:component +``` + +```cmd +ig add +``` + +> [!NOTE] +> Please note that the [`ig add`](https://github.com/IgniteUI/igniteui-cli/wiki/add) command can be used if the application was created by using the Ignite UI CLI or +> if it was created by using the Angular CLI with Ignite UI for Angular added to it by using the **ng add igniteui-angular** command. + +After going through the options of the menu and choosing which component we want to add to our application, we will notice that we have a brand new component in our project, which we can use anywhere on our page! + +#### Run application + +Now let’s run our application to see our awesome page! + +```cmd +npm start +``` + +### Add components manually + +As of Angular 19, standalone components are the default way to build Angular apps, removing the need for `NgModules` and simplifying the process of adding components significantly. So let's use this to add an [**igxGrid**](../grid/grid.md) component to our app. + +Before we start though, please note that some components have animations that require a provider as part of the `bootstrapApplication` call. + +```typescript +// main.ts + +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); +``` + +```typescript +// app/app.config.ts + +import { ApplicationConfig, importProvidersFrom } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { provideAnimations } from '@angular/platform-browser/animations'; + +const providers: Provider = [ + importProvidersFrom(BrowserModule), + provideAnimations() +]; + +export const appConfig: ApplicationConfig = { providers }; +``` + +#### Use components + +We are now ready to use the igxGrid in our markup! Let's go ahead and define it in our **app.component.html** file: + +```html +<!-- app.component.html --> + +<div style="text-align:center; margin-bottom: 20px;"> + <h1> + Welcome to {{title}}! + </h1> +</div> + +<div style="text-align: center;"> + <igx-grid [data]="localData" width="600px" height="400px" style="margin: auto" [allowFiltering]="true"> + <igx-column field="Name" dataType="string"></igx-column> + <igx-column field="Age" dataType="number"></igx-column> + </igx-grid> +</div> +``` + +We will also define the data of the grid and the title of our application that are referenced from the **app.component.ts**. As we are using standalone components we simply have to add the `IgxGridComponent` class to our app's imports, alongside any other components used in the template. In our example, as we are defining columns, we also have to add the `IgxColumnComponent` to the import array. + +```typescript +// app.component.ts + +import { Component } from '@angular/core'; +import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class AppComponent { + localData = [ + { Name:'John', Age: 29 }, + { Name:'Alice', Age: 27 }, + { Name:'Jessica', Age: 31 }, + ]; + + title = 'My Ignite UI project'; +} +``` +<!-- TODO: Add this with the introduction of the upgrade process +### Upgrading from Grid Lite to Commercial Grid + +`Grid Lite` is a great way to start with a free, open-source grid. However, as your application grows, you might need advanced features like Excel Export, Advanced Filtering, Master-Detail or the various grid flavors like `Tree Grid` or `Pivot Grid`. This means upgrading to commercial Ignite UI for Angular Grid component. We made this process simple and straightforward: + +- add steps + +Since the API is compatible, your grid configuration in the template usually doesn't need any changes!--> + +#### Run application + +Finally, we can run our new application by using one of the following commands: + +- If the application was created by using the Ignite UI CLI: + +```cmd +ig start +``` + +- If the application was created by using the Angular CLI: + +```cmd +ng serve +``` + +The final result should look something like this: + + +<img class="responsive-img" src="../../images/general/igniteui-project.png" alt="Ignite UI Project" /> + + +## API References + +In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu. + +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +## AI-Assisted Development + +Ignite UI for Angular ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with the library. Skills cover components, data grids, grid data operations, and theming. + +Learn more in the [Ignite UI for Angular Skills](../ai/skills.md) topic. + +## Additional Resources + +<div class="divider--half"></div> + +- [Ignite UI for Angular Skills](../ai/skills.md) +- [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) +- [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) +- [Grid overview](../grid/grid.md) +- [Grid Lite overview](../grid-lite/overview.md) + +<div class="divider--half"></div> +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-ignite-ui-licensing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-ignite-ui-licensing.md new file mode 100644 index 000000000..61ad46fd3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-ignite-ui-licensing.md @@ -0,0 +1,274 @@ +--- +title: Ignite UI Licensing +_description: Information on using the Licensed Ignite UI npm package +_keywords: npm package license, ignite ui license feed, licensing +_tocName: Licensing +--- + +# License FAQ and Installation + +Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. + +It is crucial to understand which license applies to which part of the package. The topic [Open Source vs Premium](./open-source-vs-premium.md) contains details on what type of license is applied to each component and therefore if you need to buy a commercial license based on the components you are using in your projects. + +## License Agreements + +For components under commercial license, it is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) that apply regarding their purchase and use. + +> [!Note] +> We have updated our license terms and subscription model in fourth quarter of 2025. + +If your trial has ended or your subscription [has expired](http://www.infragistics.com/renewal), each developer on your team using components under commercial license from Ignite UI will need to [purchase](https://www.infragistics.com/how-to-buy/product-pricing) a subscription. This will enable you to use our private npm feed hosted on <https://packages.infragistics.com/npm/js-licensed/> for development. There you will find the latest versions of the Ignite UI for Angular packages. If you have a current subscription, you can use this private feed and you will have access to the full version of Ignite UI for Angular. + +<!-- For detailed explanation of the Ignite UI license agreement and terms of use, refer to the [Infragistics Ultimate License Agreement](https://www.infragistics.com/legal/license/igultimate-la). --> + +Infragistics offers free, non-commercial, not-for-resale (NFR) licenses for the following: + +- If you are part of a developer program like the Microsoft MVP, Microsoft Regional Director, Google Developer Expert, etc. +- If you are a primary, secondary or university student, or an academic institution, or a professor. + +If you qualify for a free, non-commercial, NFR license or if you have any license questions, please [contact us](https://www.infragistics.com/about-us/contact-us). + +## Ignite UI for Angular npm packages - Using the Private npm feed + +Npm is the most popular package manager and is also the default one for the runtime environment Node.js. Highly adopted, it is one of the fastest and easiest ways to manage the packages that you depend on in your project. For more information on how npm works, read the official [npm documentation](https://docs.npmjs.com/). + +Infragistics Ignite UI for Angular is available as an npm package and you can add it as a dependency to your project in a [`few easy steps using the Ignite UI CLI`](./cli/step-by-step-guide-using-cli.md) or [using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md). Choosing this approach will not require configuring npm. If you plan to only use components from Ignite UI for Angular under MIT license, there is nothing else you will need to do. However, if you are using components under a commercial license, downloading the package from npm starts your [trial period](https://www.infragistics.com/products/ignite-ui-angular) of the product. + +>[!NOTE] +> What does it mean to start using a trial version? It means that you will be using a version of our product with a **Watermark** part of your web view. It doesn’t mean that you will be using the licensed package for a certain amount of time before it expires. For example, for a month. + +The Infragistics Ignite UI Dock Manager Web Component is available as a separate npm package and by installing it you will start using the [Ignite UI Dock Manager Web Component Trial version](https://www.infragistics.com/products/ignite-ui-angular) of the product. + +> More information on how to start using the Ignite UI for Angular npm package can be found in [this topic](getting-started.md#installing-ignite-ui-for-angular). Additional information on Ignite UI Dock Manager Web Component can be found in the [Dock Manager documentation](../dock-manager.md). + +### Upgrading packages using our Angular Schematics or Ignite UI CLI + +If Ignite UI for Angular has been added to the project using [`ng add`](./getting-started.md) or the project has been created through our [schematics collection](./cli/getting-started-with-angular-schematics.md) or [Ignite UI CLI](./cli/getting-started-with-cli.md), you can use our `upgrade-packages` to automatically upgrade your app to using our licensed packages. Your project package dependencies will include either `@igniteui/angular-schematics` or `igniteui-cli`, with both of them supporting the upgrade command. + +>[!NOTE] +> As the process changes the packages, we recommend that you update your project first before switching. This way you will avoid picking up a higher version of Ignite UI Angular and missing on potential update migrations. Follow our [Update Guide](./update-guide.md). + +Depending on your project setup, either run the following schematic in your project: + +```bash +ng g @igniteui/angular-schematics:upgrade-packages +``` + +or use `igniteui-cli`: + +```bash +ig upgrade-packages +``` + +The schematic or command will take care of switching the package dependencies of the project and update source references. +You'll be asked to login to our npm registry if not already setup. + +>[!NOTE] +> If your project is using [`yarn`](https://yarnpkg.com/), make sure to run `upgrade-packages` with the `--skip-install` flag. Then execute `yarn install` after to properly update your `yarn.lock` as the upgrade command currently uses `npm` for the install. + +### How to setup your environment to use the private npm feed (Step by step guide) + +#### First you need to setup the private registry and to associate this registry with the Infragistics scope + +This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. + +> [!NOTE] +> If your account is not licensed (you are still using a Trial account) the private package feed won't be accessible to you e.g. it will return 404 or 403 error message. **Only licensed accounts can access the packages.infragistics private feed.** + +### Now, to log in to our private feed using npm + +#### npm version 9+ + +Our private feed doesn't currently support `login/adduser` commands with npm v9, so we recommend the following steps instead to add the required auth fields to the config: + +```cmd +npm config set @infragistics:registry https://packages.infragistics.com/npm/js-licensed/ +npm config set //packages.infragistics.com/npm/js-licensed/:username=YOUR_USERNAME +npm config set //packages.infragistics.com/npm/js-licensed/:email=YOUR_IG_EMAIL +npm config set //packages.infragistics.com/npm/js-licensed/:_auth=YOUR_IG_AUTH_TOKEN +``` + +You can generate [Access Token](#access-token-usage) through your Infragistics profile. + +This approach is applicable to all prior versions of `npm`. + +#### npm version up to v8 + +Run the `adduser` command and specify a user account and password: + +```cmd +npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics +``` + +You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. + +>[!NOTE] +> `npm` is disallowing the use of the `"@"` symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol `"@"`. That's why you must escape this limitation by replacing the `"@"` symbol with `"!!"` (two exclamation marks). For example, if your username is `"username@example.com"` when asked about your username you should provide the following input: `"username!!example.com"`. +> [!NOTE] +> **macOS shell behavior**: If you're using macOS and setting the `:_auth` token manually via `npm config set`, make sure to **wrap the token in double quotes** like this: +> +> ```bash +> npm config set //packages.infragistics.com/npm/js-licensed/:_auth="YOUR_IG_AUTH_TOKEN" +> ``` +> +> This is necessary due to shell parsing differences on macOS that may cause authentication issues if special characters in the token are not properly quoted. This issue doesn't typically occur on Windows. + +#### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project + +```cmd +npm uninstall igniteui-angular +npm install @infragistics/igniteui-angular + +npm uninstall igniteui-dockmanager +npm install @infragistics/igniteui-dockmanager +``` + +Keep in mind that we have set the Ignite UI for Angular package to be scoped, meaning that no registry changes are needed if you want to install packages from our private feed and from npmjs.org simultaneously. + +#### Some additional changes might have to be made in your project source + +If you are upgrading from a trial to a licensed package and you are not using the automated CLI migrations: + +- Add a **paths** mapping in the project's **tsconfig.json**. + +```json +{ + /* ... */ + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + /* ... */ + "paths": { + "igniteui-dockmanager": ["./node_modules/@infragistics/igniteui-dockmanager"], + "igniteui-dockmanager/*": ["./node_modules/@infragistics/igniteui-dockmanager/*"], + } + } +} +``` + +- Add a `stylePreprocessorOptions` mapping to your project's `angular.json` + +```json +{ + "projects": { + .. + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + ... + "aot": true, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules/@infragistics" + ] + } + ... +}, +``` + +- Remove the `~` sign from your project's Sass imports for the `igniteui-angular/lib` source: + +```scss +@use "~igniteui-angular/lib/core/styles/themes/index" as *; + +// Should be changed to +@use "igniteui-angular/lib/core/styles/themes/index" as *; +``` + +If you've already adopted npm and have an Ignite UI for Angular license, set up the Infragistics private feed to boost your productivity and use the full potential of Ignite UI for Angular. + + +## Access Token Usage + +You can also authenticate to our private npm feed using an access token, which you can acquire through your [infragistics.com user account](https://account.infragistics.com/package-feeds). The access token authentication is the preferred alternative when you want to integrate a CI process in a publicly accessible repository which uses the Ignite UI for Angular licensed packages. + +The following information is on how to setup authentication to our private npm registry using an access token in local configuration, Azure Pipelines build procedures and Travis CI build process: + +- Generate a token from https://account.infragistics.com/package-feeds + +<img class="responsive-img" style="-webkit-box-shadow: 8px 9px 9px 5px #ccc; -moz-box-shadow: 8px 9px 9px 5px #ccc; box-shadow: 8px 9px 9px 5px #ccc; width: calc(100% - 250px)" + src="../../images/general/generate-token.jpg" + data-src="../../images/general/generate-token.jpg" + alt="New Token Generated" + title="Generate new token" /> + +> [!Note] +> Each token is Base64 encoded. + +- Add the following into your [.npmrc](https://docs.npmjs.com/configuring-npm/npmrc.html) file + +```cmd +@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/ +//packages.infragistics.com/npm/js-licensed/:_auth=YOUR_ACCESS_TOKEN +//packages.infragistics.com/npm/js-licensed/:username=YOUR_USERNAME +``` + +### Azure Pipelines Configuration + +Update `azure-pipelines.yml` with the following steps: + +```cmd +steps: + +- script: npm config set @infragistics:registry $(npmRegistry) + displayName: 'Npm add registry' +- script: npm config set $(igScope):_auth=$(token) + displayName: 'Npm config auth' +``` + +Now, add variables for the _npm registry_, _scope_, and _token_. There are two ways to do so: + +#### Define Variable Group from the Library page under Pipelines + +[This article](https://docs.microsoft.com/en-us/azure/devops/pipelines/library/variable-groups?view=azure-devops&tabs=yaml) explains how to use a variable group to store values that you want to control and make available across multiple pipelines. + +<img class="responsive-img" style="-webkit-box-shadow: 8px 9px 9px 5px #ccc; -moz-box-shadow: 8px 9px 9px 5px #ccc; box-shadow: 8px 9px 9px 5px #ccc; min-width: calc(100% - 350px)" + src="../../images/general/azure-ci-variable-groups.jpg" + data-src="../../images/general/azure-ci-variable-groups.jpg" + alt="Set npm Registry and token variables" + title="Set npm Registry and token variables" /> + +#### Define the variables in the Pipeline Settings UI and reference them in your YAML file + +In the most common case, you [set the variables and use them](https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline) within the YAML file. + +<img class="responsive-img" style="-webkit-box-shadow: 8px 9px 9px 5px #ccc; -moz-box-shadow: 8px 9px 9px 5px #ccc; box-shadow: 8px 9px 9px 5px #ccc; min-width: calc(100% - 650px)" + src="../../images/general/azure-ci-new-variable-2.jpg" + data-src="../../images/general/azure-ci-new-variable-2.jpg" + alt="Set npm Registry and token variables" + title="Set npm Registry and token variables" /> + +<img class="responsive-img" style="-webkit-box-shadow: 8px 9px 9px 5px #ccc; -moz-box-shadow: 8px 9px 9px 5px #ccc; box-shadow: 8px 9px 9px 5px #ccc; min-width: calc(100% - 650px)" + src="../../images/general/azure-ci-add-token-variable-1.jpg" + data-src="../../images/general/azure-ci-add-token-variable-1.jpg" + alt="npm Registry and token variables" + title="npm Registry and token variables" /> + +### Travis CI Configuration + +Follow a similar approach here. The only difference is that the configuration is set in the `before_install` step: + +```cmd +before_install: +- echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc +- echo "//packages.infragistics.com/npm/js-licensed/:_auth=$TOKEN" >> ~/.npmrc +``` + +The best way to define an environment variable depends on what type of information it will contain. So [you have two options](https://docs.travis-ci.com/user/environment-variables/): + +- encrypt it and add it [to your .travis.yml](https://docs.travis-ci.com/user/environment-variables/#defining-encrypted-variables-in-travisyml) +- add it to your [Repository Settings](https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings) + +### GitHub Actions Configuration + +Add the following scripts before the `npm install` (or `npm ci`) step in your [CI workflow configuration](https://help.github.com/en/actions/language-and-framework-guides/using-nodejs-with-github-actions): + +```cmd +- run: echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc +- run: echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc +``` + +Define [_secrets_ (encrypted environment variables)](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) and use them in the GitHub actions workflow for sensitive information like the access token. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md new file mode 100644 index 000000000..6d5d2bfb5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-localization.md @@ -0,0 +1,775 @@ +--- +title: Localization (i18n) - Native Angular | Ignite UI for Angular +_description: The Ignite UI for Angular Localization mechanism provides the ability to change/localize strings in the components. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components +_tocName: Localization (i18n) +--- + +# Localization (i18n) + +## Localization (i18n) + +>Note: As of 21.1.0 this is the recommended way of applying localization to the Ignite UI for Angular components. + +With our new localization we introduce more features with less requirements for both our localization strings and formatting for all available locales. The formatting is now based on the standards introduced by the `Intl` API. + +Currently, Ignite UI for Angular ships with resource strings for the following languages: `Bulgarian`, `Czech`, `Danish`, `Dutch`, `English`, `French`, `German`, `Hungarian`, `Italian`, `Japanese`, `Korean`, `Norwegian`, `Polish`, `Portuguese`, `Romanian`, `Spanish`, `Swedish`, `Turkish`, `Traditional Chinese (zh-Hant)` and `Simplified Chinese (zh-Hans)`. These are available via the `igniteui-angular-i18n` package, except for English which comes as a default localization in `igniteui-angular`. + +### Angular Localization Example + +```typescript +/* eslint-disable @typescript-eslint/ban-types */ +/* eslint-disable @typescript-eslint/member-delimiter-style */ +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { DATA } from '../../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { GridResourceStringsEN, IGridResourceStrings, registerI18n, setCurrentI18n } from 'igniteui-angular/core'; +import { IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { FormsModule } from '@angular/forms'; +import { + IgxResourceStringsBG, IgxResourceStringsCS, IgxResourceStringsDA, IgxResourceStringsDE, + IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsHU, IgxResourceStringsIT, + IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsNB, IgxResourceStringsNL, + IgxResourceStringsPL, IgxResourceStringsPT, IgxResourceStringsRO, IgxResourceStringsSV, + IgxResourceStringsTR, IgxResourceStringsZHHANS, IgxResourceStringsZHHANT + } from 'igniteui-angular-i18n'; + +@Component({ + selector: 'app-localization-all-resources', + styleUrls: ['./localization-all-resources.component.scss'], + templateUrl: 'localization-all-resources.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent] +}) +export class LocalizationAllResourcesComponent implements OnInit { + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data: any[]; + public locale: string = 'EN'; + public locales: { type: string, resource: object }[]; + public selectLocales = [ + 'HI', 'BG', 'CS', 'DA', 'DE', 'EN', 'ES', 'FR', 'HU', 'IT', 'JA', 'KO', 'NB', 'NL', + 'PL', 'PT', 'RO', 'SV', 'TR', 'zh-Hans', 'zh-Hant' + ]; + public partialCustomHindi: IGridResourceStrings; + + constructor() { } + public ngOnInit(): void { + this.data = DATA; + + // Creating a custom locale (HI) for specific grid strings. + // Similarly can localize all needed strings in a separate IgxResourceStringsHI file (feel free to contribute) + this.partialCustomHindi = { + igx_grid_summary_count: 'गणना', + igx_grid_summary_min: 'न्यून', + igx_grid_summary_max: 'अधिक', + igx_grid_summary_sum: 'योग', + igx_grid_summary_average: 'औसत' + }; + + registerI18n(IgxResourceStringsBG, 'bg'); + registerI18n(IgxResourceStringsCS, 'cs'); + registerI18n(IgxResourceStringsDA, 'da'); + registerI18n(IgxResourceStringsDE, 'de'); + registerI18n(IgxResourceStringsES, 'es'); + registerI18n(IgxResourceStringsFR, 'fr'); + registerI18n(IgxResourceStringsHU, 'hu'); + registerI18n(IgxResourceStringsIT, 'it'); + registerI18n(IgxResourceStringsJA, 'ja'); + registerI18n(IgxResourceStringsKO, 'ko'); + registerI18n(IgxResourceStringsNB, 'nb'); + registerI18n(IgxResourceStringsNL, 'nl'); + registerI18n(IgxResourceStringsPL, 'pl'); + registerI18n(IgxResourceStringsPT, 'pt'); + registerI18n(IgxResourceStringsRO, 'ro'); + registerI18n(IgxResourceStringsSV, 'sv'); + registerI18n(IgxResourceStringsTR, 'tr'); + registerI18n(IgxResourceStringsZHHANS, 'zh-Hans'); + registerI18n(IgxResourceStringsZHHANT, 'zh-Hant'); + registerI18n(this.partialCustomHindi, 'hi'); + } + + public updateLocale() { + setCurrentI18n(this.locale); + } +} +``` +```html +<div class="grid__wrapper"> + <igx-grid #grid [data]="data" [autoGenerate]="false" height="520px" width="100%" + [allowFiltering]="true" [locale]="locale" [rowEditable]="true" [primaryKey]="'ProductID'"> + <igx-grid-toolbar> + <igx-grid-toolbar-title>Grid with Localization</igx-grid-toolbar-title> + <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()"> + @for (locale of selectLocales; track locale) { + <igx-select-item [value]="locale"> + {{ locale }} + </igx-select-item> + } + </igx-select> + </igx-grid-toolbar> + <igx-column field="ProductName" header="Product Name" [groupable]="true"> + </igx-column> + <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true"> + </igx-column> + <igx-column field="UnitPrice" header="Unit Price" [sortable]="true" [hasSummary]="true" + [dataType]="'currency'" [groupable]="true"> + </igx-column> + <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [groupable]="true"> + </igx-column> + <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true"> + </igx-column> + </igx-grid> +</div> +``` +```scss +:host { + .grid__wrapper { + margin: 16px 32px; + } + + --ig-size: var(--ig-size-small); +} +``` + +>Note: Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at [Custom localized resource strings](#custom-localized-resource-strings) section below. + +### Locale + +By locale, we will refer to the general strings defining the different languages and regions on Earth. In our case they are based on the [BCP 47](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag) tag definition and most of the basic ones are described in the [IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) and for a list of languages you can also `refer to [ISO 639 language standard](https://www.loc.gov/standards/iso639-2/). + +It affects both the formatting of the dates and numbers and the localized resource strings that our components use. The default locale for the Ignite UI for Angular components is `en-US`. + +There are several ways that you can set locale. Either globally or per component. + +#### Global API + +You can set the locale that will be used globally using the `setCurrentI18n` method, that comes from the `igniteui-angular` package. It will affect both formatting and registered resource strings used in all of our components. For more on resource strings see [Localized resource strings](#localized-resource-strings) + +```ts +setCurrentI18n('de'); +``` + +We support the full range of possible locales supported by `Intl`. If you provide a locale that is not valid or supported, it will use the default `en-US` locale for the time being, until you change it to a valid one. + +In general you should register your resources under the languages, regions and scripts for the tags you plan to use, so that your components are localized as well. For more see [Regions and Scripts](#regions-and-scripts) section. + +#### `lang` attribute + +With this approach we have the ability to set localization through the `lang` global attribute of the `HTML` tag. This attribute is being watched and if it is changed, all rendered components will update their resource strings to the currently set language. All rules regarding the tag used apply as described above. + +> Note: This works only on root level and will not work for inner elements on the page. + +```html +<html lang="ja"> + <head> + <title>My app + + + +``` + +#### Angular API + +You can use also Angular's built in [LOCALE_ID](https://angular.dev/api/core/LOCALE_ID) token to set the locale for the whole application. The tag provided will work the same way for our components compared to how our API handles. + +#### Per component + +Each component will also have its own `locale` property, that you can specify and it will then not be affected by the global locale. + +```html + + + + +``` + +### Formatting + +Locale like mentioned affects the formatting in all Ignite UI for Angular components that render dates, numbers and some strings related to them. Previously you had to import [Angular's global variants](https://angular.dev/guide/i18n/import-global-variants) of the locale data they provide in order to be able to use it in your app. This is no longer the case and this comes built in our localization by default and you won't need to import and register anything for it to work. + +Since we are just introducing this feature, the Angular's way is still available and very much working as before and is still the default way, if you are already using it. + +If you are just starting though, you will only need to add the `provideIgniteIntl()` method to your app config, which will make sure that you use the new formatting, even if you have the Angular's locale data imported: + +```ts +export const appConfig: ApplicationConfig = { + providers: [ + //... + provideIgniteIntl() + ] +}; +``` + +#### Date formats + +Components like the IgxGrid or IgxDatePicker allow for specifying date format (for the grid per column). The lists bellow show the available options that you can set or build your own custom format. + +Available predefined format options: + +| Option | Equivalent to | Examples (given in en-US locale) | +| ------ | --------------| --------------------------------| +| 'short' | 'M/d/yy, h:mm a' | 6/15/15, 9:03 AM | +| 'medium' | 'MMM d, y, h:mm:ss a' | Jun 15, 2015, 9:03:01 AM | +| 'long' | 'MMMM d, y, h:mm:ss a z' | June 15, 2015 at 9:03:01 AM GMT+1 | +| 'full' | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 | +| 'shortDate' | 'M/d/yy' | 6/15/15 | +| 'mediumDate' | 'MMM d, y' | Jun 15, 2015 | +| 'longDate' | 'MMMM d, y' | June 15, 2015 | +| 'fullDate' | 'EEEE, MMMM d, y' | Monday, June 15, 2015 | +| 'shortTime' | 'h:mm a' | 9:03 AM | +| 'mediumTime' | 'h:mm:ss a' | 9:03:01 AM | +| 'longTime' | 'h:mm:ss a z' | 9:03:01 AM GMT+1 | +| 'fullTime' | 'h:mm:ss a zzzz' | 9:03:01 AM GMT+01:00 | + +Custom format options: + +| Date field | Value | Description | Example | +|-|-|-|-| +| Weekday | c, cc, ccc, E, EE, EEE | Short version of the weekday | Tue | +| | cccc, EEEE | Long version of the weekday | Tuesday | +| | ccccc, EEEEE | Narrow version of the weekday | T | +| Day| d | Numeric display (single digit when possible) | 1, 10 | +| | dd | 2-digit always (zero padded) | 01, 10 | +| Month | M, L | Numeric display (single digit when possible) | 8, 12 | +| | MM, LL | 2-digit always (zero padded) | 08, 12 | +| | MMM, LLL | Short month name | Oct | +| | MMMM, LLLL | Long month name | October | +| | MMMMM, LLLLL | Narrow month name | O | +| Year | y, yyy, yyyy | Numeric display | 1, 24, 632, 2025 | +| | yy | 2-digit display (zero padded when possible) | 01, 24, 32, 25 | +| ISO 8601 year | Y, YYY, YYYY | Numeric display | 1, 24, 632, 2025 | +| | YY | 2-digit display (zero padded when possible) | 01, 24, 32, 25 | +| Era | G, GG, GGG | Short display | AD, BC | +| | GGGG | Long display | Anno Domini, Before Christ| +| | GGGGG | Narrow display | A, B | +| Minute | m | Numeric (single digit when possible) | 1, 5, 22 | +| | mm | 2-digit display (zero padded)| 01, 05, 22 | +| Hour 1-12 | h | Numeric (single digit when possible) | 8, 12 | +| | hh | 2-digit (zero padded) | 08, 13 | +| Hour 0-23 | H | Numeric (single digit when possible) | 8, 21 | +| | HH | 2-digit (zero padded)| 08, 21 | +| Hour 0-11 | K | Numeric (single digit when possible) | 0, 11 | +| | KK | 2-digit (zero padded) | 00, 11 | +| Second | s | Numeric (single digit when possible) | 0...59 | +| | ss | 2-digit (zero padded) | 00...59 | +| Fractional seconds | S | Numeric for 1 digit | 0...9 | +| | SS | Numeric for 2 digits | 00...99 | +| | SSS | Numeric for 3 digits | 000...999 | +| Period of time - abbreviated | a, t | Lower case always | am, pm | +| | aa, aaa, tt, ttt | Upper case always | AM, PM | +| | aaaa, tttt | Case based on locale | am, pm, AM, PM | +| | aaaaa, ttttt | Narrow lower case always | a, p | +| Period of time - extended | b, bb, bbb, B, BB, BBB | Short display. Based on `Intl` locale | en-GB: at night | +| | bbbb, BBBB | Long display. Based on `Intl` locale| en-GB: at night | +| | bbbbb, BBBBB | Narrow display. Based on `Intl` locale | en-GB: at night | +| Timezone | z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO | Short display | GMT+4 | +| | zzzz, ZZZZ, OOOO | Long display | GMT+0430 | + +### Localized resource strings + +All components in Ignite UI for Angular render in English by default and they can be rendered in any of the listed languages at the top as well. There are three ways you can achieve that globally and one way per component. For any language that is not currently available, custom translation can be provided for each resource string that is available through our API. + +The translations for the component strings are stored in resource strings and they will need to be registered in our localization system so that the component can use them. + +To achieve that, you first need to install the `igniteui-angular-i18n` package, which contains the localized resource strings for all languages: + +``` +npm install igniteui-angular-i18n --save-dev +``` + +After that you will need to register each language you would like to have available to them. Lets say German and Japanese: + +```ts +import { IgxResourceStringsDE, IgxResourceStringsJA } from 'igniteui-angular-i18n'; + +registerI18n(IgxResourceStringsDE, 'de'); +registerI18n(IgxResourceStringsJA, 'ja'); +``` + +You will also need to provide to which locale they will apply to. If not a valid tag is provided, it will set the resources for the default 'en-US' locale. + +#### Regions and scripts + +We take into account the `language + region` or `language + script` from the locale you used to register your resources, since these are the most commonly used. They are separated by `-` and region/script are usually defined on a second or third position. For example, `en-US` and `en-GB` or `en-Latn`. + +If you do not use region or script, the resources you register will apply to all locales that use the `en` language, for example. That is unless you define resources for the regions and scripts as well. Then only for those you have not defined, will return the resources for `en` in this case. + +The script for us has higher priority than the region when registering resources. We recommend in general to use either region or script, without mixing them and using both at the same time. That way it is easier to manage and know which one you have available and should be used, based on the locale you set. + +Anyway, if you happen to use them both, lets take for example the `en` language with `GB` region and `Latn` script. If you define resources for both region and script like `en-GB` and `en-Latn`, and later on you set your locale, having both region and script to `en-Latn-GB`, we will take the resources from the script one first. If it is not available, then we will return the available region, unless you explicitly set your locale to `en-Latn`, of course. If you have for none of them registered resources, we will take the default for `en` if available. + +### Customize a component + +If you would like to have specific component in your app use either the already registered resources globally but with different localization or completely replace the resource strings for it, you can do that the following way. + +#### Language and formatting + +If you would like to set different from the global localization for a component, you can do that by setting the `locale` property. This will affect the language of the resource strings used as well as the formatting, since they are tied together. + +With this approach you should already have the available resource strings globally registered: + +```ts +import { IgxResourceStringsJA } from 'igniteui-angular-i18n'; + +registerI18n(IgxResourceStringsJA, 'ja'); +``` + +By setting the `locale` property of the component, this will override the global locale currently in use: + +```html + + + + +``` + +##### Language only + +If you would like to change only the language of the component, without changing the locale, you can even set the resource strings of each component using the `resourceStrings` property, which will override the globally used ones: + +```html + + + + +``` + +You will need to make sure you use the correct resource string type for the component you would like to override it with. Each component has its own set of resource strings. In this case for the grid in German: + +```ts +import { GridResourceStringsDE } from 'igniteui-angular-i18n'; + +// Inside App Component: +public resourcesDE = GridResourceStringsDE; +``` + +### Custom localized resource strings + +If you would like to localize your app, but we do not provide resource strings for the language you use and would like to provide your own translation, you can always provide custom resource string. You can do that globally or per component(using the `resourceStrings` property). + +>Note: Feel free to contribute to the [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) package with more languages. The `igniteui-angular-i18n` are based on them. + +You can use the provided `IResourceStrings` type for all components to get typings for the resource stings used: + +```ts +import { IResourceStrings } from 'igniteui-angular'; + +export const customResourcesForAll: IResourceStrings = { + //... +}; +registerI18n(customResourcesForAll, 'custom'); +``` + +Or for a specific component separately, in this case the grids: + +```ts +import { IGridResourceStrings } from 'igniteui-angular'; + +export const customGridResources: IGridResourceStrings = { + grid_summary_count: 'गणना', + grid_summary_min: 'न्यून', + grid_summary_max: 'अधिक', + grid_summary_sum: 'योग', + grid_summary_average: 'औसत' +}; + +``` + +You can even mix however you want the already existing resource strings with the ones you want to customize, even for the default English language: + +```ts +import { IResourceStrings, CalendarResourceStringsEN, DatePickerResourceStringsEN } from 'igniteui-angular'; + +export const customResources: IResourceStrings = Object.assign( + {}, + CalendarResourceStringsEN, + DatePickerResourceStringsEN, + { + grid_summary_count: 'Custom count', + grid_summary_min: 'Minium', + grid_summary_max: 'Maximum', + grid_summary_sum: 'Custom summary' + } +); +registerI18n(customResources, 'en'); + +``` + +>Note: The last examples set only specific resource strings. This means that the rest will default to English, if they are not available for the components in use to get. + +### Available resource strings + +- [IgxResourceStringsBG](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/BG/resources.ts) +- [IgxResourceStringsCS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/CS/resources.ts) +- [IgxResourceStringsDA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DA/resources.ts) +- [IgxResourceStringsDE](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DE/resources.ts) +- [IgxResourceStringsES](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ES/resources.ts) +- [IgxResourceStringsFR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/FR/resources.ts) +- [IgxResourceStringsHU](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/HU/resources.ts) +- [IgxResourceStringsIT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/IT/resources.ts) +- [IgxResourceStringsJA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/JA/resources.ts) +- [IgxResourceStringsKO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/KO/resources.ts) +- [IgxResourceStringsNB](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NB/resources.ts) +- [IgxResourceStringsNL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NL/resources.ts) +- [IgxResourceStringsPL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PL/resources.ts) +- [IgxResourceStringsPT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PT/resources.ts) +- [IgxResourceStringsRO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/RO/resources.ts) +- [IgxResourceStringsSV](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/SV/resources.ts) +- [IgxResourceStringsTR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/TR/resources.ts) +- [IgxResourceStringsZHHANS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/resources.ts) +- [IgxResourceStringsZHHANT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/resources.ts) + + +## Legacy Localization (i18n) + +>Note: This is an old way of handling localization that was recommended until 21.0.x. We suggest using the new available way above if you are using newer versions. This will still work until further notice. + +Currently, Ignite UI for Angular ships with resource strings for the following languages and scripts: Bulgarian, Czech, Danish, Dutch, English, French, German, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Romanian, Spanish, Swedish, Turkish, Traditional Chinese (zh-Hant) and Simplified Chinese (zh-Hans). These are available via the `igniteui-angular-i18n` package, except for English which comes as a default localization in `igniteui-angular`. + +With only a few lines of code, users can easily change the localization strings in Ignite UI for Angular components. + +### Angular Localization Example + +```typescript +/* eslint-disable @typescript-eslint/ban-types */ +/* eslint-disable @typescript-eslint/member-delimiter-style */ +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { registerLocaleData } from '@angular/common'; +import localeBG from '@angular/common/locales/bg'; +import localeCS from '@angular/common/locales/cs'; +import localeDA from '@angular/common/locales/da'; +import localeDE from '@angular/common/locales/de'; +import localeEN from '@angular/common/locales/en'; +import localeES from '@angular/common/locales/es'; +import localeFR from '@angular/common/locales/fr'; +import localeHU from '@angular/common/locales/hu'; +import localeIT from '@angular/common/locales/it'; +import localeJA from '@angular/common/locales/ja'; +import localeKO from '@angular/common/locales/ko'; +import localeNB from '@angular/common/locales/nb'; +import localeNL from '@angular/common/locales/nl'; +import localePL from '@angular/common/locales/pl'; +import localePT from '@angular/common/locales/pt'; +import localeRO from '@angular/common/locales/ro'; +import localeSV from '@angular/common/locales/sv'; +import localeTR from '@angular/common/locales/tr'; +import localeHI from '@angular/common/locales/hi'; +import localeHans from '@angular/common/locales/zh-Hans'; +import localeHant from '@angular/common/locales/zh-Hant'; +import { DATA } from '../../../data/nwindData'; +import { IgxGridComponent, GridResourceStringsEN, IGridResourceStrings, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, IgxSelectItemComponent, IgxColumnComponent } from 'igniteui-angular'; +import { + IgxResourceStringsBG, IgxResourceStringsCS, IgxResourceStringsDA, IgxResourceStringsDE, + IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsHU, IgxResourceStringsIT, + IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsNB, IgxResourceStringsNL, IgxResourceStringsPL, + IgxResourceStringsPT, IgxResourceStringsRO, IgxResourceStringsSV, IgxResourceStringsTR, + IgxResourceStringsZHHANS, IgxResourceStringsZHHANT +} from 'igniteui-angular-i18n'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-localization-all-resources-old', + styleUrls: ['./localization-all-resources.component.scss'], + templateUrl: 'localization-all-resources.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent] +}) +export class LocalizationAllResourcesOldComponent implements OnInit { + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data: any[]; + public locale: string; + public locales: { type: string, resource: object }[]; + public selectLocales = [ + 'HI', 'BG', 'CS', 'DA', 'DE', 'EN', 'ES', 'FR', 'HU', 'IT', 'JA', 'KO', 'NB', 'NL', + 'PL', 'PT', 'RO', 'SV', 'TR', 'zh-Hans', 'zh-Hant' + ]; + public partialCustomHindi: IGridResourceStrings; + + constructor() { } + public ngOnInit(): void { + registerLocaleData(localeBG); + registerLocaleData(localeCS); + registerLocaleData(localeDA); + registerLocaleData(localeDE); + registerLocaleData(localeEN); + registerLocaleData(localeES); + registerLocaleData(localeFR); + registerLocaleData(localeHU); + registerLocaleData(localeIT); + registerLocaleData(localeJA); + registerLocaleData(localeKO); + registerLocaleData(localeNB); + registerLocaleData(localeNL); + registerLocaleData(localePL); + registerLocaleData(localePT); + registerLocaleData(localeRO); + registerLocaleData(localeSV); + registerLocaleData(localeTR); + registerLocaleData(localeHI); + registerLocaleData(localeHans); + registerLocaleData(localeHant); + + this.data = DATA; + + // Creating a custom locale (HI) for specific grid strings. + // Similarly can localize all needed strings in a separate IgxResourceStringsHI file (feel free to contribute) + this.partialCustomHindi = { + igx_grid_summary_count: 'गणना', + igx_grid_summary_min: 'न्यून', + igx_grid_summary_max: 'अधिक', + igx_grid_summary_sum: 'योग', + igx_grid_summary_average: 'औसत' + }; + + this.locales = [ + { type: 'BG', resource: IgxResourceStringsBG }, + { type: 'CS', resource: IgxResourceStringsCS }, + { type: 'DA', resource: IgxResourceStringsDA }, + { type: 'DE', resource: IgxResourceStringsDE }, + { type: 'ES', resource: IgxResourceStringsES }, + { type: 'FR', resource: IgxResourceStringsFR }, + { type: 'HU', resource: IgxResourceStringsHU }, + { type: 'IT', resource: IgxResourceStringsIT }, + { type: 'JA', resource: IgxResourceStringsJA }, + { type: 'KO', resource: IgxResourceStringsKO }, + { type: 'EN', resource: GridResourceStringsEN }, + { type: 'HI', resource: this.partialCustomHindi }, + { type: 'NB', resource: IgxResourceStringsNB }, + { type: 'NL', resource: IgxResourceStringsNL }, + { type: 'PL', resource: IgxResourceStringsPL }, + { type: 'PT', resource: IgxResourceStringsPT }, + { type: 'RO', resource: IgxResourceStringsRO }, + { type: 'SV', resource: IgxResourceStringsSV }, + { type: 'TR', resource: IgxResourceStringsTR }, + { type: 'zh-Hans', resource: IgxResourceStringsZHHANS }, + { type: 'zh-Hant', resource: IgxResourceStringsZHHANT } + ]; + this.locale = 'EN'; + } + + public updateLocale() { + const newLocale = this.locales.find(x => x.type === this.locale).resource; + this.grid.resourceStrings = newLocale; + } +} +``` +```html +
+ + + Grid with Localization + + @for (locale of selectLocales; track locale) { + + {{ locale }} + + } + + + + + + + + + + + + + +
+``` +```scss +:host { + .grid__wrapper { + margin: 16px 32px; + } + + --ig-size: var(--ig-size-small); +} +``` + +>Note: Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at [Utilize own localized resources](#utilize-own-localized-resources) section below. + +### Usage + +### Load localized resources from npm package + +You can localize an application in one of the languages available in the `igniteui-angular-i18n` package like this: + +Install the package by executing `npm install igniteui-angular-i18n --save-dev` + +Import the resource strings for the desired language and either change the strings for a component instance, using the component's `resourceStrings` input. + +```html + + + German Locale + + + + + + + + + + + + +``` + +```typescript +import { Component } from '@angular/core'; +import { registerLocaleData } from '@angular/common'; + +import localeDE from '@angular/common/locales/de'; +import { GridResourceStringsDE } from 'igniteui-angular-i18n'; + +@Component({ + selector: 'app-locale', + styleUrls: ['./locale.component.scss'], + templateUrl: 'locale.component.html' +}) +export class LocaleComponent implements OnInit { + public resourcesDE = GridResourceStringsDE; + public locale = 'DE'; + public data: any[]; + + constructor() { + registerLocaleData(localeDE); + } +} +``` + +Alternatively, you can call the `changei18n()` function passing the corresponding resource object to change the localization for all components. + +```typescript +// app.component.ts +import { Component, OnInit } from '@angular/core'; +import { changei18n } from "igniteui-angular/core"; +import { IgxResourceStringsJA } from 'igniteui-angular-i18n'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent implements OnInit { + public ngOnInit(): void { + changei18n(IgxResourceStringsJA); + } +} +``` + +>Note: Feel free to contribute to the [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) package with more languages! + +#### Utilize own localized resources + +`changei18n` function expects an `IResourceStrings` object. If the language you want to use is not available in the `igniteui-angular-i18n` package, or simply want to change a particular string, you can pass a custom object containing your string resources for the language and components you need. This will change the global i18n for the igniteui-angular components. + +```typescript +// app.component.ts +import { Component, OnInit } from '@angular/core'; +import { changei18n, IGridResourceStrings } from "igniteui-angular/core"; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent implements OnInit { + public partialCustomHindi: IGridResourceStrings; + + public ngOnInit(): void { + this.partialCustomHindi = { + igx_grid_summary_count: 'गणना', + igx_grid_summary_min: 'न्यून', + igx_grid_summary_max: 'अधिक', + igx_grid_summary_sum: 'योग', + igx_grid_summary_average: 'औसत' + }; + // This will change all grid application instances' strings to the newly provided ones + changei18n(this.partialCustomHindi); + } +} +``` + +Alternatively, you may get all currently available component resource strings. There is objects for each component containing localizable strings. The values could be replaced in order to be localized and then the object can be passed to the `changei18n` function, as a parameter. + +```typescript +// app.component.ts +import { Component, OnInit } from '@angular/core'; +import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular/core"; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent implements OnInit { + public ngOnInit(): void { + const currentRS = { + ...GridResourceStringsEN, + ...TimePickerResourceStringsEN + }; + + for (const key of Object.keys(currentRS)) { + currentRS[key] = '[Localized] '+ currentRS[key]; + } + + changei18n(currentRS); + } +} +``` + +#### Localize specific strings for a specific instance of a component + +If only a single `igx-grid` instance should be localized, there is a way. The `resourceStrings` property should be used and it should be set to a new instance of `IGridResourceStrings` type. + +```typescript +const newGridRes: IGridResourceStrings = { + igx_grid_filter: '[Localized]Filter', + igx_grid_filter_row_close: '[Localized]Close' +} + +this.grid.resourceStrings = newGridRes; +``` + +### Available resource strings + +- [IgxResourceStringsBG](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/BG/resources.ts) +- [IgxResourceStringsCS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/CS/resources.ts) +- [IgxResourceStringsDA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DA/resources.ts) +- [IgxResourceStringsDE](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DE/resources.ts) +- [IgxResourceStringsES](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ES/resources.ts) +- [IgxResourceStringsFR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/FR/resources.ts) +- [IgxResourceStringsHU](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/HU/resources.ts) +- [IgxResourceStringsIT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/IT/resources.ts) +- [IgxResourceStringsJA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/JA/resources.ts) +- [IgxResourceStringsKO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/KO/resources.ts) +- [IgxResourceStringsNB](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NB/resources.ts) +- [IgxResourceStringsNL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NL/resources.ts) +- [IgxResourceStringsPL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PL/resources.ts) +- [IgxResourceStringsPT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PT/resources.ts) +- [IgxResourceStringsRO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/RO/resources.ts) +- [IgxResourceStringsSV](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/SV/resources.ts) +- [IgxResourceStringsTR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/TR/resources.ts) +- [IgxResourceStringsZHHANS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/resources.ts) +- [IgxResourceStringsZHHANT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/resources.ts) + +## Additional Resources + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **ResourceStrings**](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-open-source-vs-premium.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-open-source-vs-premium.md new file mode 100644 index 000000000..d0f997442 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-open-source-vs-premium.md @@ -0,0 +1,154 @@ +--- +title: Open Source vs Premium | Ignite UI for Angular | Infragistics +_description: Ignite UI for Angular is a complete set of native Angular UI components, which allow you to build fast, feature-rich and Material designed applications! +_keywords: ignite ui for angular, getting started, angular components +_tocName: Open-Source vs Premium +--- + +# Open-Source vs Premium in Ignite UI for Angular + +Ignite UI for Angular offers two distinct paths for building modern, data-driven applications: Open-Source Components and Premium Components. This dual approach ensures flexibility for developers at every stage of their project. + +## Open-Source Components + +There are over 50+ UI components available under the MIT license, including [Grid Lite](../grid-lite/overview.md), Accordion, Avatar, Badge, Banner, Button, Calendar, Carousel, Checkbox, Chip, Combo, Date Picker, Drop Down, Input, List, Snackbar, and more. You can find the full list in the [Comparison Table for All Components](#comparison-table-for-all-components). + +All Open-Source components are marked in the header of their topics with: + +They are ideal for lightweight applications that need essential functionality without the overhead of enterprise features. You can use them freely in production, customize, fork, and contribute via GitHub. No license is required. + +## Premium Components + +Our Ignite UI Premium components come with advanced enterprise features and are used for complex applications requiring high-performance and richer functionality. Premium components include: + +### Grids and advanced components + +- [Data Grid](../grid/grid.md), [Hierarchical Grid](../hierarchicalgrid/hierarchical-grid.md), [Tree Grid](../treegrid/tree-grid.md), [Pivot Grid](../pivotGrid/pivot-grid.md) +- [Dock Manager](../dock-manager.md) +- [Query Builder](../query-builder.md) +- [Charting library](../charts/chart-overview.md) +- [Maps library](../geo-map.md) +- [Excel Library](../excel-library.md) +- [Spreadsheet](../spreadsheet-overview.md) +- Gauges - [Bullet Graph](../bullet-graph.md), [Linear Gauge](../linear-gauge.md) and [Radial Gauge](../radial-gauge.md) + +All Premium components are marked in the header of their topics with: + +All the Premium components can be evaluated locally and even tested in production with watermarking. However, a commercial license is required for customer-facing deployments and for unlocking the full power of the advanced Grids, Charts, and other Premium controls. + +## Upgrade Path + +Start with Grid Lite for essential needs and seamlessly upgrade to the full-featured Data Grid as your application grows in complexity. This ensures minimal refactoring and a smooth transition to enterprise-grade capabilities. + +## Comparison Table for All Components + +| Component | Open-Source | Premium | +|-----------------------------------|-------------|---------| +| Accordion | ✅ | ✅ | +| Action Strip | ✅ | ✅ | +| Autocomplete | ✅ | ✅ | +| Avatar | ✅ | ✅ | +| Badge | ✅ | ✅ | +| Banner | ✅ | ✅ | +| Bottom Nav | ✅ | ✅ | +| Button | ✅ | ✅ | +| Button Group | ✅ | ✅ | +| Calendar | ✅ | ✅ | +| Card | ✅ | ✅ | +| Carousel | ✅ | ✅ | +| Chart Area | ❌ | ✅ | +| Chart Bar | ❌ | ✅ | +| Chart Bubble | ❌ | ✅ | +| Chart Category | ❌ | ✅ | +| Chart Column | ❌ | ✅ | +| Chart Donut | ❌ | ✅ | +| Chart Financial/Stock | ❌ | ✅ | +| Chart Line | ❌ | ✅ | +| Chart Pie | ❌ | ✅ | +| Chart Pie Data | ❌ | ✅ | +| Chart Point | ❌ | ✅ | +| Chart Polar | ❌ | ✅ | +| Chart Radial | ❌ | ✅ | +| Chart Scatter | ❌ | ✅ | +| Chart Shape | ❌ | ✅ | +| Chart Sparkline | ❌ | ✅ | +| Chart Spline | ❌ | ✅ | +| Chart Spline Area | ❌ | ✅ | +| Chart Stacked | ❌ | ✅ | +| Chart Step Area | ❌ | ✅ | +| Chart Step Line | ❌ | ✅ | +| Chart Treemap | ❌ | ✅ | +| Chart Waterfall | ❌ | ✅ | +| Chat | ✅ | ✅ | +| Checkbox | ✅ | ✅ | +| Chip | ✅ | ✅ | +| Chip Area | ✅ | ✅ | +| Circular Progress | ✅ | ✅ | +| Color Editor | ❌ | ✅ | +| Combo | ✅ | ✅ | +| CVS Exporter | ❌ | ✅ | +| Dashboard Tile | ❌ | ✅ | +| Date Picker | ✅ | ✅ | +| Date Range Picker | ✅ | ✅ | +| Date Time Editor | ✅ | ✅ | +| Dialog | ✅ | ✅ | +| Divider | ✅ | ✅ | +| Drag and Drop | ✅ | ✅ | +| Drop Down | ✅ | ✅ | +| Excel Exporter | ❌ | ✅ | +| Excel Library | ❌ | ✅ | +| Expansion Panel | ✅ | ✅ | +| ForOf | ✅ | ✅ | +| Grid Data | ❌ | ✅ | +| Grid Hierarchical | ❌ | ✅ | +| Grid Pivot | ❌ | ✅ | +| Grid Tree | ❌ | ✅ | +| Grid Lite | ✅ | ✅ | +| Gauges Linear Gauge | ❌ | ✅ | +| Gauges Radial Gauge | ❌ | ✅ | +| Gauges Bullet Graph | ❌ | ✅ | +| Map Geographic Area | ❌ | ✅ | +| Map Geographic Bubble | ❌ | ✅ | +| Map Geographic Contour | ❌ | ✅ | +| Map Geographic High Density | ❌ | ✅ | +| Map Geographic Polygon | ❌ | ✅ | +| Map Geographic Polyline | ❌ | ✅ | +| Map Geographic Symbol | ❌ | ✅ | +| Icon | ✅ | ✅ | +| Icon Button | ✅ | ✅ | +| Icon Service | ✅ | ✅ | +| Input | ✅ | ✅ | +| Input Group | ✅ | ✅ | +| Label | ✅ | ✅ | +| Layout Manager | ✅ | ✅ | +| Linear Progress | ✅ | ✅ | +| List | ✅ | ✅ | +| Mask Input | ✅ | ✅ | +| Month Picker | ✅ | ✅ | +| Nav Drawer | ✅ | ✅ | +| Navbar | ✅ | ✅ | +| Overlay Service | ✅ | ✅ | +| Paginator | ✅ | ✅ | +| Query Builder | ❌ | ✅ | +| Radio | ✅ | ✅ | +| Radio Group | ✅ | ✅ | +| Rating | ✅ | ✅ | +| Ripple | ✅ | ✅ | +| Select | ✅ | ✅ | +| Simple Combo | ✅ | ✅ | +| Slider | ✅ | ✅ | +| Snackbar | ✅ | ✅ | +| Splitter | ✅ | ✅ | +| Spreadsheet | ❌ | ✅ | +| Stepper | ✅ | ✅ | +| Switch | ✅ | ✅ | +| Tabs | ✅ | ✅ | +| Text Highlight | ✅ | ✅ | +| Tile Manager | ✅ | ✅ | +| Time Picker | ✅ | ✅ | +| Toast | ✅ | ✅ | +| Toggle | ✅ | ✅ | +| Toolbar | ❌ | ✅ | +| Tooltip | ✅ | ✅ | +| Tree | ✅ | ✅ | +| Zoom Slider | ❌ | ✅ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-ssr-rendering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-ssr-rendering.md new file mode 100644 index 000000000..f4099e94a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-ssr-rendering.md @@ -0,0 +1,77 @@ +--- +title: Server-side rendering | Angular SSR | Ignite UI for Angular | Infragistics +_description: How to use Angular Server-side rendering with Ignite UI for Angular. +_keywords: Ignite UI for Angular, Angular SSR, Server-side rendering +_tocName: Server-side rendering (SSR) +--- + +# Server-side Rendering with Angular SSR + +This topic aims at describing what Server-side Rendering is and how to configure it within Ignite UI for Angular application. + +## Angular Server-side rendering + +All Angular applications run in the client's browser and often this may result in a negative performance hit on the [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) i.e. when a browser first renders the largest content of a page. This is when [Angular SSR](https://angular.dev/guide/ssr) comes in handy, you can generate the full HTML for a page on the server. It renders a client-side page to HTML on the server that is later bootstrapped on the client. Okay, but how it works? + +> [LCP](https://web.dev/articles/lcp) measures when the largest content of a page is visible to the user, as for [FCP](https://web.dev/first-contentful-paint) metric, it measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. See [Lighthouse performance scoring](https://web.dev/performance-scoring) for more information. + + +## How it works? + +With Angular SSR, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find in the [Rendering on the Web guide](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). + +## Usage + +Server-side rendering is one of the many techniques part of [Rendering on Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) guidelines, that can: + +- Ease web crawlers to index your website higher in searches - will improve your Search Engine Optimization (SEO). +- Show the first page quickly - slow initial page load is disengaging for the users (if it takes more than 3 seconds to load). +- Improve your app performance - it will have a positive impact on both [First Contentful Paint](https://web.dev/first-contentful-paint) and [Largest Contentful Paint](https://web.dev/articles/lcp). + +> It gives you full control over SEO and social-media previews, and it improves the overall perceived performance of your application by allowing users to see an initial painted view. + +## Add SSR to existing Ignite UI application + +### Step 1 - Add @angular/ssr + +By using Angular CLI schematic we can run the following command: + +``` +ng add @angular/ssr +``` + +This schematic will perform several changes to your app client and server configurations, as well as add extra files to the project structure. + +### Step 2 - Start your Angular SSR app + +Run the following command: + +``` +ng serve +``` + +## Build a new application from scratch + +1. Use `ng new` or the [Ignite UI CLI](./cli/getting-started-with-cli.md) `ig new` command. Alternatively, use `ng new --ssr` to create a new Angular SSR project directly, skipping step 3. +2. Execute `ng add igniteui-angular` which installs the library's npm packages to your workspace and configures the project in the current working directory to use that library. +3. Add Angular SSR with `ng add @angular/ssr`. +4. Add Ignite UI for Angular components - e.g. Grid, Calendar + +## Other considerations + +- If your application is using other browser-specific objects, wrap their usage in a conditional statement, so that they’ll only be used by Angular on the browser. You can do this by importing the functions `isPlatformBrowser` and `isPlatformServer` from `@angular/common`, injecting the `PLATFORM_ID` token into your component, and running the imported functions to see whether you’re on the server or the browser. +- If using ElementRef for HTML element handling, don’t use the nativeElement to manipulate attributes on the element. Instead, inject and use the [Renderer2 methods](https://alligator.io/angular/using-renderer2). +- All URLs for server requests should be absolute, keep in mind that data requests from relative URLs will fail when running from the server. +- For handling browser events the Angular team provides the [withEventReplay()](https://angular.dev/guide/hydration#capturing-and-replaying-events) function. This feature allows to capture all events that happen before hydration and replay those events once hydration has completed. +- If using IgxIconService to register icons please make sure that you have configured [provideHttpClient()](https://angular.dev/api/common/http/provideHttpClient) in your providers. +- When using Angular SSR, the server will pre-render pages that will be visible to the users, however, interactions will be limited. Once the client-side app is loaded in the background, it will seamlessly switch from showing the server-rendered pages to the client-side app. + +## Useful resources + +
+ +- [Angular SSR guide](https://angular.dev/guide/ssr) +- [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) +- [Getting started with Ignite UI for Angular](getting-started.md) +- [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) +- [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-update-guide.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-update-guide.md new file mode 100644 index 000000000..c2345e049 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/general-update-guide.md @@ -0,0 +1,1560 @@ +--- +title: Update Guide | Ignite UI for Angular | Infragistics +_description: Check out this article on updating how to update to a newer version of the Ignite UI for Angular library. +_keywords: ignite ui for angular, update, npm package, material components +_tocName: Update guide +--- + + + +# Update Guide + +In the Ignite UI for Angular [versioning](https://github.com/IgniteUI/igniteui-angular/wiki/Ignite-UI-for-Angular-versioning) the first number always matches the major version of Angular the code supports and the second is dedicated for major version releases. Breaking changes may be introduced between major releases. +A comprehensive list of changes for each release of **Ignite UI for Angular** can be found in the product [CHANGELOG](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md) + +The Ignite UI for Angular package also supports automatic version migration through `ng update` schematics. Those will attempt to migrate all possible breaking changes (renamed selectors, classes and @Input/Output properties), however there might be still changes that cannot be migrated. Those are usually related to typescript application logic and will be described [additionally below](#additional-manual-changes). + +First run the [**`ng update`**](https://angular.io/cli/update) command which will analyze your application and available updates for its packages. + +```cmd +ng update +``` + +To update the **Ignite UI for Angular** licensed package run the following command: + +```cmd +ng update @infragistics/igniteui-angular +``` + +To update the **Ignite UI for Angular** free package run the following command: + +```cmd +ng update igniteui-angular +``` + +When you update `@infragistics/igniteui-angular` or `igniteui-angular` - it's recommended to update `@angular/core`, `@angular/cli` and `igniteui-cli` packages to their matching versions. +To update the **Ignite UI CLI** package run the following command: + +```cmd +ng update igniteui-cli +``` + +To update the **Angular Core** package run the following command: + +```cmd +ng update @angular/core +``` + +To update the **Angular CLI** package use the following command: + +```cmd +ng update @angular/cli +``` + +>[!NOTE] +> If the `ng update` command fails because of package dependency mismatches, then revert the update, delete the `node_modules` folder and rerun the update with `--force` flag. + +## Additional manual changes + + +Unfortunately not all changes can be automatically updated. Changes below are split into sections as they occur in the versions, so if any updates are required you should start from your current version and apply further updates from bottom to top. + +For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from the "From 6.x .." section apply those changes and work your way up: + +## From 21.0.x to 21.1.x + +Version 21.1.0 ships with a new `tokens` mixin that can be used in place of the now deprecated `css-vars` mixin of our Sass theming framework. On the surface, this is a cosmetic change, however, the new `tokens` mixin produces universal global component theme tokens that work across all of our Ignite UI frameworks. The `css-vars` mixin is now deprecated and will be removed in a future version, so we recommend switching to the new `tokens` mixin as soon as possible. + +The `tokens` mixin generates CSS variable tokens for components in `global` or `scoped` modes, with a universal `--ig-*` fallback chain and proper rewriting of local token references. + +**Global mode** (default) — emits universal `--ig-{component}-{property}` tokens. Local `var()` references are rewritten to their global equivalents so derived values (e.g., `adaptive-contrast`) resolve correctly at any scope. Sizable expressions are skipped; pass concrete values instead. + +```scss +// Input: +@include tokens(avatar-theme($background: red)); + +// Output: +:root { + --ig-avatar-background: red; + /* ... remaining avatar properties ... */ +} +``` + +**Scoped mode** — emits component-scoped variables (`--{property}`) with a fallback chain: configured prefix (`--igx-*`) -> universal (`--ig-*`) -> schema default. When called from the stylesheet root, the theme's `selector` is used to create the rule. When called inside a selector, both the current selector and the component selector receive the variables. Essentially, this yields the same result as the now deprecated `css-vars` mixin. + +```scss +// Input (from root): +@include tokens(avatar-theme($background: red), $mode: 'scoped'); + +// Output: +igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... remaining avatar properties ... */ +} +``` + +```scss +// Input (from within a selector): +.my-theme { + @include tokens(avatar-theme($background: red), $mode: 'scoped'); +} + +// Output: +.my-theme, +.my-theme igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... */ +} +``` + +> [!NOTE] +> In scoped mode, the `selector` property in the produced theme map is required to determine the component selector for proper variable scoping. If the mixin is called from the stylesheet root, the generated rule will use the theme's internal `selector` value. If called from within a selector, both that selector and the component selector will receive the variables. + +```scss +// Global override: +:root { + @include tokens(avatar-theme($background: orange)); +} +// Result: --ig-avatar-background: orange; + +// Scoped consumption (no explicit override): +@include tokens(avatar-theme($schema: $schema), $mode: 'scoped'); +// Result: --background resolves through var(--igx-avatar-background, var(--ig-avatar-background, #000)) +// and picks up the global orange value from --ig-avatar-background. +``` + +> [!IMPORTANT] +> **Global overrides flow into scoped mode.** Because scoped variables fall back to `--ig-*` tokens, setting a global token at `:root` will propagate to all scoped instances: + +## From 20.x to 21.0.x + +### Multiple Entry Points Support + +Version 21.0.0 introduces **multiple entry points** for better tree-shaking and code splitting. The main entry point (`igniteui-angular`) remains fully backwards compatible, but migrating to granular entry points is recommended for optimal bundle sizes. + +**Key changes:** +- Components organized into dedicated entry points (e.g., `igniteui-angular/grids/grid`, `igniteui-angular/button`) +- Some components relocated (input directives, autocomplete, radio group) +- Type rename: `Direction` → `CarouselAnimationDirection` + +**Migration:** + +When updating, you'll be prompted to migrate imports automatically: + +```cmd +ng update igniteui-angular +``` + +Choose **"Yes"** when prompted, or migrate later with: + +```cmd +ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0 +``` + +For complete details on entry points, migration options, breaking changes, and usage examples, see the [Code Splitting and Multiple Entry Points guide](code-splitting-and-multiple-entry-points.md). + +### Dependency Injection Refactor + +All internal dependency injection now uses the `inject()` API. This generally doesn't affect application code, but if you extend Ignite UI components or services, you may need to update your constructors to use `inject()` instead of constructor parameters. + +## From 17.2.x to 18.0.x + +### Breaking changes + +- In version 18.0.x the deprecated `displayDensity` property is removed in favor of the custom CSS property `--ig-size`. For further reference please see the update guide [from 16.0.x to 16.1.x](#from-160x-to-161x). + +### General + +- `IgxPivotGrid` + +### Breaking changes + +- The property `showPivotConfigurationUI` of pivot grid is changed and extended to `pivotUI`. + +```html +// version 17.2.x + + + +// version 18.0.x + + +``` + +## From 17.0.x to 17.1.x + +### General + +- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` + - **Breaking Changes** + - `rowAdd` and `rowDelete` events now emit event argument of type `IRowDataCancelableEventArgs` instead of `IGridEditEventArgs`. The two interfaces are still compatible, however redundant for these events properties `cellID`, `newValue`, `oldValue`, `isAddRow` are deprecated in `IRowDataCancelableEventArgs` and will be removed in a future version. Switching to the correct new interfaces should reveal any deprecated use that can be safely removed. + - **Deprecations** + - `rowID` property has been deprecated in the following interfaces: `IGridEditDoneEventArgs`, `IPathSegment`, `IRowToggleEventArgs`, `IPinRowEventArgs`, `IgxAddRowParent` and will be removed in a future version. Use `rowKey` instead. + - `primaryKey` property has been deprecated in the following interfaces: `IRowDataEventArgs`, `IGridEditDoneEventArgs`. Use `rowKey` instead. + - `data` property has been deprecated in the following interfaces: `IRowDataEventArgs`. Use `rowData` instead. + +### Breaking changes + +- In version 17.1.x the `icon` type of the `igxButton` directive has been changed to the `igxIconButton` directive of type `flat`. Automatic migrations are available and will be applied on `ng update`. However, some of the `igxButton` input properties that could previously be used with the `icon` type buttons, cannot be applied to the newly created `igxIconButton`. If you have used the `igxButtonColor` or the `igxButtonBackground` properties with a button of type `icon`, you should update it as follows: + +```html +// version 17.0.x + + +// version 17.1.x + +``` + +**NOTE**: Users have to manually add the `IgxIconButtonDirective` into their imports: + +```typescript +import { IgxIconButtonDirective } from 'igniteui-angular'; + +@Component({ + ... + imports: [IgxIconButtonDirective] +}) +``` + +## From 16.1.x to 17.0.x + +### General + +- In 17.0 Angular have removed the `@nguniversal/*` packages. If the project uses these packages a standard `ng update` call will cause an error in the `igniteui-angular` migrations due to improperly modified `package-lock.json` - more details can be found in [issue #13668](https://github.com/IgniteUI/igniteui-angular/issues/13668). To update to `17.0.x` one of the following additional steps needs to be taken: + - Delete the `package-lock.json` file before running `ng update` + - Run `npm dedupe --legacy-peer-deps` before running `ng update igniteui-angular` + +**Breaking change** + +- In `IgxCombo`'s `selectionChanging` event arguments type `IComboSelectionChangingEventArgs` has these changes: + - properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to better reflect their function. Just like Combo's `value`, those will emit either the specified property values or full data items depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`. + - two new properties `newSelection` and `oldSelection` are exposed in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`. + - properties `added` and `removed` now always contain data items, regardless of `valueKey` being set. This aligns them with the updated `newSelection` and `oldSelection` properties. + +If your code in `selectionChanging` event handler was depending on reading `valueKeys` from the event argument, update it as follows: + +```typescript + // version 16.1.x + public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void { + this.addedItems = e.added; + this.removedItems = e.removed; + } + + // version 17.0.x + public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void { + this.addedItems = e.added.map(i => { + return i[e.owner?.valueKey] + }); + this.removedItems = e.removed.map(i => { + return i[e.owner?.valueKey] + }); + } +``` + +- `getCurrentResourceStrings` has been removed. Use the specific component string imports instead. + - E.g. EN strings come from `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';` + - E.g. DE or other language strings come from `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';` + + Usage examples can be found in the updated [Localization (i18n)](localization.md) doc. + +## From 16.0.x to 16.1.x + +### General + +#### **Non-breaking changes** + +- We are moving away from the `DisplayDensityToken` injection token as a way to set the size of the components in favor of a simpler, more robust way - using CSS custom properties. For that reason the `DisplayDensityToken` injection token is now deprecated. This ripples across all components that expose the `displayDensity` input property. The token and input properties will be removed in 17.0.0. We urge you to do the following: + +Remove all declarations where the `DisplayDensityToken` is provided: + +```typescript +// *.component.ts +// remove the provider declaration for `DisplayDensityToken` +providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }], +``` + +Remove all bindings or programmatic assignments to the `displayDensity` input property: + +```html + +... +``` + +Instead, use the custom CSS property `--ig-size` to achieve the same result as with `displayDensity`: + +```css +/* +Add --ig-size to a component or global file. +Available values are: + - compact: --ig-size-small + - cosy: --ig-size-medium + - comfortable: --ig-size-large +*/ +igx-grid { + --ig-size: var(--ig-size-small); +} +``` + +## From 15.1.x to 16.0.x + +- The upgrade to Angular 16 comes with changes in how `NgModules` operate under the hood. Previously, adding a module that internally depends on another would make the declarations of both available in your app. This behavior was not intended and Angular 16 changes it. If your app was depending on this behavior, e.g. you were only importing a module containing many internal dependencies like `IgxGridModule` and using components coming with those, you will need to manually add the modules for each component your app uses separately. + +- **Breaking changes** +- In 16.0.x, all grid properties, related to paging, are removed. Paging behavior is now configured and controlled entirely through the `IgxPaginatorComponent`. +To enable paging in the grid, initialize the `IgxPaginatorComponent` in the grid and set related input properties and attach to event handlers to the paginator itself: + +```html + + + + +``` + +```typescript +@ViewChild('grid', { static: true }) private grid: IgxGridComponent; +@ViewChild('paginator', { static: true }) private paginator: IgxPaginatorComponent; + +// prior version 16.0.x +public onButtonClick(event) { + this.grid.nextPage(); + this.grid.previousPage(); + this.grid.paginate(0); +} + +// from version 16.0.x +public onButtonClick(event) { + this.paginator.nextPage(); + this.paginator.previousPage(); + this.paginator.paginate(0); +} +``` + +- In 16.0.x, grid method `getCellByColumnVisibleIndex(rowIndex: number, index: number)` is removed. Instead, use: `getCellByKey(rowSelector: any, columnField: string)` or `getCellByColumn(rowIndex: number, columnField: string)`. Example: + +```typescript + // prior version 16.0.x + const cell = grid.getCellByColumnVisibleIndex(rowIndex, columnIndex); + + // after version 16.0.x + const rowKey = grid.getRowByIndex(rowIndex).key; + const columnField = grid.getColumnByVisibleIndex(columnIndex).field; + const cell = grid.getCellByKey(rowKey, columnField); + const cell = grid.getCellByColumn(rowIndex, columnField); +``` + + +## From 15.0.x to 15.1.x + +- **Breaking change** +- `rowSelectionChanging` arguments type is changed. Now the `oldSelection`, `newSelection`, `added` and `removed` collections, part of the `IRowSelectionEventArgs` interface, no longer consist of the row keys of the selected elements (when the grid has set a primaryKey), but now in any case the row data is emitted. When the grid is working with remote data and a `primaryKey` is set - for the selected rows that are not currently part of the grid view, a partial row data object will be emitted. + +If your code in `rowSelectionChanging` event handler was depending on reading primaryKeys from the event argument, update it as follows: + +```typescript + // prior version 15.1.x + public handleRowSelection(e: IRowSelectionEventArgs): void { + this.selectedRows = e.newSelection; + } + + // after version 15.1.x + public handleRowSelection(e: IRowSelectionEventArgs): void { + this.selectedRows = e.newSelection.map(rec => { + return rec[e.owner?.primaryKey] + }); + } +``` + +- **Behavioral Change** +When selected row is deleted from the grid component, `rowSelectionChanging` event is not emitted. + +- **Visual Change** +- In 15.1 the sizes of the input components have increased. This is more noticeable when using the Material theme. We do this to match Material spec. If your application is negatively affected by the change, you can use the displayDensity input and set it to a more dense setting, e.g. from comfortable to cozy or from cozy to compact. + + **Example** + +```html + + ... + + + + ... + + + + + + + + ... + +``` + +- In 15.1 select and combo component now have background around the toggle icon. You can change the background and the icon color using scss or css. + + **Example** + + ```scss + $my-select: select-theme( + $toggle-button-background: red, + $toggle-button-foreground: #fff, + ); + + $my-combo: combo-theme( + $toggle-button-background: red, + $toggle-button-foreground: #fff, + ); + + @include css-vars($my-select); + @include css-vars($my-combo); + ``` + + **Example** + + ```css + .igx-select { + --igx-select-toggle-button-background: red; + --igx-select-toggle-button-foreground: #fff; + } + + .igx-combo { + --igx-combo-toggle-button-background: red; + --igx-combo-toggle-button-foreground: #fff; + } + ``` + +## From 14.2.x to 15.0.x + +### General + +- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` + - Parameters in grid templates now have types for their context. This can also cause issues if the app is in strict template mode and uses the wrong type. References to the template that may require conversion: + - `IgxColumnComponent` - [`ColumnType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html) (for example the column parameter in `igxFilterCellTemplate`) + - `IgxGridCell` - [`CellType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/celltype.html) (for example the cell parameter in `igxCell` template) +- Ignite UI for Angular has a dependency on [igniteui-theming](https://github.com/IgniteUI/igniteui-theming). Add the following preprocessor configuration in your `angular.json` file. + + ```json + + "build": { + "options": { + "stylePreprocessorOptions": { + "includePaths": ["node_modules"] + } + } + } + ``` + +- **Breaking Change** - All global CSS variables for theme configuration, colors, elevations, and typography have changed the prefix from `--igx` to `--ig`. This change doesn't affect global component variables; + + **Example**: + + In 14.2.x: + + ```css + :root { + --igx-typography: 'Titillium Web', sans-serif; + } + ``` + + In 15.0.x this becomes: + + ```css + :root { + --ig-typography: 'Titillium Web', sans-serif; + } + ``` + +### Themes + +- **Breaking Change** - The `grays` input argument has been renamed to `gray`.
+Here's how that will affect existing code: + + In 14.2.x: + + ```scss + $my-palette: palette( + $primary: #09f, + $secondary: #e41c77, + $grays: #000 + ); + + .my-class { + background: color($color: 'grays', $variant: 300); + color: contrast-color($color: 'grays', $variant: 300); + border-color: hsl(var(--igx-grays-500)); + } + ``` + + In 15.0.x and going forward: + + ```scss + $my-palette: palette( + $primary: #09f, + $secondary: #e41c77, + $gray: #000 + ); + + .my-class { + background: color($color: 'gray', $variant: 300); + color: contrast-color($color: 'gray', $variant: 300); + border-color: hsl(var(--ig-gray-500)); + } + ``` + + +- **Breaking Change** - **Generating CSS variables** for a palette is now done by the **palette mixin**, instead of the **palette-vars mixin**. + +- **Breaking Change** - The **palette function** now **requires a surface color to be passed**, while passing a value for the `gray` color is optional. If a value for the gray base color is not provided, it will be generated automatically based on the lightness of the surface color - light surface color results in a black(#000) gray base color, whereas a dark surface color generates a white(#fff) base gray color. When you're generating a palette, you have to keep in mind that there are no longer default values for **info, success, error and warn** colors. You have to set them explicitly if you want to use them. You can also grab those colors from an existing palette if you don't want to come up with the values yourself. + + #### Example + + ```scss + $my-palette: palette( + $primary: #09f, + $secondary: #e41c77, + $surface: #fff, + $info: color($light-material-palette, 'info'), + $success: color($light-material-palette, 'success'), + $error: color($light-material-palette, 'error'), + $warn: color($light-material-palette, 'warn'), + ); + + @include palette($my-palette); + ``` + +- **Breaking Change** - **The palette parameter is now removed from all component themes.** You can **use the palette mixin** to scope a custom palette in for a custom component component theme. Since we dropped support for IE11 all component themes refer to the global CSS variables for colors, elevations, typography, etc., therefore passing a custom palette to a component theme is no longer necessary. + + Generating a custom theme with a custom palette: + + ```scss + // app.component.scss + + $my-palette: palette( + $primary: royalblue, + $secondary: orange, + $surface: white + ); + + $avatar: avatar-theme( + $background: color($color: 'primary'), + $color: contrast-color($color: 'primary') + ); + + :host ::ng-deep { + // Include the custom palette in the scope of the app component. + // It will have a higher specificity than the global palette. + @include palette($my-palette): + + .my-avatar { + @include avatar($avatar); + } + } + ``` + +### Typography + +- **Breaking Change** - The **type-style** mixin now doesn't accept type-scale as a parameter, only the category name. + + In 14.2.x and prior: + + ```scss + .my-class { + @include type-style($type-scale: $my-type-scale, $category: h1); + } + ``` + + In 15.0.x and forward: + + ```scss + .my-class { + @include type-style(h1); + } + ``` + +### Elevations + +- **Breaking Change** - The **elevation function** now has only one named argument - **$name (the elevation name)**. +- **Breaking Change** - The **elevations function** has been removed, you can now configure the elevation colors, using the `configure-elevations` mixin. + + In 14.2.x and prior: + + ```scss + .my-class { + box-shadow: elevation($elevations, $elevation: 8); + } + ``` + + In 15.0.x and forward: + + ```scss + .my-class { + box-shadow: elevation(8); + } + ``` + +### Grid Toolbar + +- **Breaking Change** - The `IgxGridToolbarTitleDirective` and `IgxGridToolbarActionsDirective` have been converted to components, keeping only the element selector. For apps using the preferred element markup of `` and `` there should be no functional change. Apps using the `igxGridToolbarTitle` and `igxGridToolbarActions` directives on other elements will need to convert those to the mentioned elements instead: + + _From:_ + + ```html + + Title +
+ ... +
+ + ``` + + _To:_ + + ```html + + Title + + ... + + + ``` + +## From 13.1.x to 13.2.x + +### Themes + +- **Breaking Change** - All RTL specific stylesheets have been removed. Ignite UI themes now support RTL direction by default. Users who have previously used `*-rtl.css` specific themes must switch to the regular theme files. + +## From 13.0.x to 13.1.x + +### General + +- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` + - **Breaking Change** - The columns' `movable` property has been deprecated. Use the exposed grid `moving` property instead: + + ```html + + + ``` + +- `IgxHierarchicalGrid` + - **Breaking Change** - The public API service for igxHierarchicalGrid and igxRowIsland components `hgridAPI` is renamed to `gridAPI`. +- `IgxToast` + - **Breaking Change** - The `igx-toast` deprecated `position` property has been removed. We suggest using `positionSettings` property as follows: + + ```typescript + @ViewChild('toast', { static: true }) public toast: IgxToastComponent; + + public ngOnInit(): void { + this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle; + } + ``` + +## From 12.2.x to 13.0.x + +### General + +- `IE discontinued support` +- `IgxDialog` + - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. +- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` + - **Breaking Change** - The following deprecated inputs have been removed - `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`, `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`. Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. + - **Breaking Change** - Upon adding of `igx-toolbar` component, now you should manually specify which features you want to enable - Column Hiding, Pinning, Excel Exporting. Advanced Filtering may be enabled through the `allowAdvancedFiltering` input property on the grid, but it is recommended to enable it declaratively with markup, as with the other features. + - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function. + - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` to better reflect its function. + - **Breaking Change** - `columnsCollection` is removed. Use `columns` instead. If at certain occasions `columns` return empty array, query the columns using `ViewChildren` and access those in `ngAfterViewInit`: + + ```typescript + @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) + public columns: QueryList; + ``` + + - **Breaking change** - when applying a custom directive on the grid, inject the `IGX_GRID_BASE` token in the constructor in order to get reference to the hosting grid: + + ```html + + ``` + + ```typescript + @Directive({ + selector: '[customDirective]' + }) + export class customDirective { + + constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { } + ``` + +- `RowDirective`, `RowType` + - **Breaking Change** - `rowData` and `rowID` properties are removed from `RowDirective` and from classes implementing the `RowType` interface. Use `data` and `key` instead. Use `ng update` for automatic migration. Automatic migration will not be able to pick up some examples from templates, where the template context object is not typed: + + ```html + + {{ cell.rowID }} + {{ cell.row.rowData.ProductID }} + + ``` + + Update such templates manually to + + ```html + {{ cell.key }} + {{ cell.row.data.ProductID }} + ``` + +- `igxGrid` + - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. +- `IgxCsvExporterService`, `IgxExcelExporterService` + - Exporter services are no longer required to be provided in the application since they are now injected on a root level. +- `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent` + - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar. +- `IgxCombo` + - Added `groupSortingDirection` input, which allows you to set groups sorting order. +- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` + - Added new directives for re-templating header sorting indicators - `IgxSortHeaderIconDirective`, `IgxSortAscendingHeaderIconDirective` and `IgxSortDescendingHeaderIconDirective`. +- `IgxDialog` + - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`. +- `IgxColumnActionsComponent` + - **Breaking Change** - The following input has been removed + - Input `columns`. Use `igxGrid` `columns` input instead. +- `IgxCarousel` + - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`. +- `IgxGridStateDirective` - now supports `disableHiding` column prop and column groups + +### Theming + +- Icon component `color` property has been deprecated. Use `style.color` CSS property to change its default color. Examples: + +```html +home +``` + +```html +functions +``` + +- Sass Modules: +The theming engine has switched to [Sass modules](https://sass-lang.com/documentation/at-rules/use). This change means all theming library functions (component themes, etc.), mixins (component mixins, etc.), and variables are now being `forwarded` from a single file. To correctly use the Sass theming library, your project should utilize Dart Sass version 1.33.0 or later and change all imports of the theming library from: + +```scss +// free version +@import '~igniteui-angular/lib/core/styles/themes/index'; + +// licensed version +@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index'; +``` + +to: + +```scss +// free version +@use 'igniteui-angular/theming' as *; + +// licensed version: +@use '@infragistics/igniteui-angular/theming' as *; +``` + +If you want to import the entire theming library only once and then use it in other Sass files in your app, make sure to do forward it. Imported Sass files are not going to be automatically forwarded. + +Before: + +```scss +// _variables.scss +// free version +@import '~igniteui-angular/lib/core/styles/themes/index'; + +// licensed version +@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index'; + +// _other-file.scss +@import 'variables'; +``` + +After: + +```scss +// _variables.scss +// free versioin +@use 'igniteui-angular/theming' as *; +@forward 'igniteui-angular/theming'; + +// licensed version +@use '@infragistics/igniteui-angular/theming' as *; +@forward '@infragistics/igniteui-angular/theming'; + + +// _other-file.scss +@use 'variables' as *; +``` + +- Palettes and Schemas: + +- CSS palette variables do not refer to HEX values anymore, instead they represent a list of 3 values H, S, and L, which means they should be passed to either the `hsl` or `hsla` CSS functions. + +Before: + +```scss +.some-class { + background: var(--igx-surface-500); // returns HEX color +} +``` + +After: + +```scss +.some-class { + background: hsl(var(--igx-surface-500)); // returns a list of H, S, L +} +``` + +This was done so that palettes can be changed at runtime using CSS variables only. In this way the alpha channel for a given palette color can be modified at runtime without affecting the underlying palette color. + +- Please ensure the correct palette and component schema are passed to your custom-made component and global themes. If you want to create a global dark theme, make sure to select a lighter color shade for your gray color, for instance: + +```scss +$my-dark-palette: palette( + $primary: olive, + $secondary: yellow, + $grays: #fff +); + +@include dark-theme($palette: $my-dark-palette); +``` + +Likewise, light themes require a darker shade of gray and a light color schema. + +If you've not excluded any component themes from the global theme but you still want to create your own custom replacement themes using the `css-vars` mixin, make sure the theme is passed the correct palette and corresponding schema: + +```scss +$my-custom-grid: grid-theme( + $palette: $my-dark-palette, + $schema: $dark-schema +); + +@include css-vars($my-custom-grid); +``` + +- Excluded Component Themes: + +In case you've excluded some component themes from the global theme and you've created custom replacement themes, you should ensure that the component mixin is included and is passed the correct component theme: + +```scss +$my-dark-palette: palette( + ... + $exclude: ('igx-grid') +); + +$my-custom-grid: grid-theme( + $palette: $my-dark-palette, + $schema: $dark-schema +); + +// Ensuregrid is included: +@include grid($my-custom-grid); +``` + +In case your custom component themes are declared in a separate component Sass file, other than the global `styles.scss`, ensure the `core` mixin is also included. + +```scss +// free version +@use 'igniteui-angular/theming' as *; + +// licensed version +@use '@infragistics/igniteui-angular/theming' as *; + +// Include the core module mixin. +@include core(); + +// Create your theme. +$my-custom-grid: grid-theme( + $palette: $my-dark-palette, + $schema: $dark-schema +); + +// Include your custom theme styles. +@include grid($my-custom-grid); +``` + +To get a better grasp on the Sass Module System, you can read [this great article](https://css-tricks.com/introducing-sass-modules/) by [Miriam Suzanne](https://css-tricks.com/author/miriam/); + +## From 12.0.x to 12.1.x + +### Grids + +- Breaking Changes: + - [`IgxPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html) - The way the Paginator is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the `[paging]="true"` property is removed from all grids and all other properties related to the paginator in the grid are deprecated. It is recommended to follow the guidance for enabling `Grid Paging` features as described in the [Paging topic](../grid/paging.md). + - [`IgxPageSizeSelectorComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageSizeSelectorComponent.html) and [`IgxPageNavigationComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageNavigationComponent.html) are introduced to ease the implementation of any custom content: + + ```html + + + + [My custom text] + + + + ``` + + - The API for the paging component was changed during the refactor and many of the old properties are now deprecated. Unfortunately, having + an adequate migration for some of these changes is complicated to say the least, so any errors should be handled at application level. + - The following properties are deprecated from the Grid: + - paging, perPage page, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone + - The following methods, also are deprecated: + - nextPage() + - previousPage() + - The following property has been removed: + - paginationTemplate - in order to define a custom template, use the `igx-paginator-content` + - HierarchicalGrid specifics - The following usage of `*igxPaginator` Directive is necessary when it comes to enabling paging on RowIslands: + + ```html + + + + + + + + + + + + + + + + ``` + + - While the migration will move your template content inside the `igx-paginator-content` content, it might not resolve all template bindings. Make sure to check your template files after the migration. The following bindings should be changed manually as these properties have been removed (`pagerEnabled`, `pagerHidden`, `dropdownEnabled`, `dropdownHidden`): + + _From:_ + + ```html + + + ``` + + _To:_ + + ```html + + + + + + + ``` + + - IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent are no longer exposed in the public API. See sections below for detail guide on upgrading to the new `IgxGridCell`. + + +- Grid Deprecation: + - The DI pattern for providing `IgxGridTransaction` is deprecated. The following will still work, but you are advised to refactor it, as it **will likely be removed** in a future version: + + ```typescript + @Component({ + template: ` + ... + `, + providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }], + ... + }) + export class MyCustomComponent { + ... + } + ``` + + In order to achieve the above behavior, you should use the the newly added [`batchEditing`](../grid/batch-editing.md) input: + + ```typescript + @Component({ + template: ` + ... + ` + ... + }) + export class MyCustomComponent { + ... + } + ``` + + - `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead. + + +### IgxGridCell migration + +- _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_ are no longer exposed in the public API. + +- Public APIs, which used to return an instance of one of the above, now return an instance of [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html): + +```ts +const cell = grid.getCellByColumn(0, 'ProductID'); // returns IgxGridCell +const cell = grid.getCellByKey('ALFKI', 'ProductID'); // returns IgxGridCell +const cell = grid.getCellByColumnVisibleIndex(0, 0); // returns IgxGridCell +const rowCells = grid.getRowByIndex(0).cells; // returns IgxGridCell[] +const selectedCells = grid.selectedCells; // returns IgxGridCell[] +const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[] +``` + +- `cell` property in the `IGridCellEventArgs` event arguments emitted by _cellClick_, _selected_, _contextMenu_ and _doubleClick_ events is now an instance of [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) +- `let-cell` property in cell template is now `IgxGridCell`. +- `getCellByColumnVisibleIndex` is now deprecated and will be removed in next major version. Use `getCellByKey`, `getCellByColumn` instead. + +Please note: + +- _ng update_ will migrate the uses of _IgxGridCellComponent_, _IgxTreeGridCellComponent_, _IgxHierarchicalGridCellComponent_, _IgxGridExpandableCellComponent_, like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html). +- _getCellByIndex_ and other methods will return undefined, if the row at that index is not a data row, but is IgxGroupByRow, IgxSummaryRow, details row, etc. + + +### Themes + +Due to complaints pertaining to compilation warnings (see [#9793](https://github.com/IgniteUI/igniteui-angular/issues/9793)) we now use the [`math.div`](https://sass-lang.com/documentation/modules/math#div) function; This functionality is supported by [Dart Sass](https://sass-lang.com/dart-sass) from version 1.33.0 onward. + +#### Solution + +If for any reason you see Sass compilation errors saying `math.div` is not a known function it means you are using an outdated version of Sass in your project. + +1. Update to the latest version of Angular using `ng update` - Angular 12.1.0+ uses the dart-sass compiler by default. + + ```sh + ng update [options] + ``` + + If for some reason you don't use the Ignite UI/Angular CLI, you'd need to replace `node-sass` with `sass` in your Node project. + + ```sh + npm uninstall node-sass + npm install sass --save-dev + ``` + +2. If for some reason you cannot upgrade to the latest version of Angular using the method above, you can fall back to the old Sass division method by setting a global flag in your Sass file: + + ```scss + $__legacy-libsass: true; + ``` + +## From 11.1.x to 12.0.x + +### Themes + +- Breaking Changes: + - `IgxAvatar` theme has been simplified. The number of theme params (`avatar-theme`) has been reduced significantly and no longer includes prefixed parameters(`icon-*`, `initials-*`, `image-*`) and suffixed parameters(`border-radius-*`). Updates performed with `ng update` will migrate existing avatar themes, but some additional tweaking may be required to account for the absence of prefixed and suffixed params. + + You will need to modify existing type specific avatar themes in the following way: + + For example, this: + + ```scss + $avatar-theme: avatar-theme( + $initials-background: blue, + $initials-color: orange, + $icon-background: blue, + $icon-color: orange, + ); + + @include avatar($avatar-theme); + ``` + + Needs to be transformed into this: + + ```scss + $initials-avatar: avatar-theme( + $background: blue, + $color: orange, + ); + + $icon-avatar: avatar-theme( + $background: blue, + $color: orange, + ); + + .initials-avatar { + @include avatar($initials-avatar); + } + + .icon-avatar { + @include avatar($icon-avatar); + } + ``` + + - `IgxButton` theme has been simplified. The number of theme params (`button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). Updates performed with `ng update` will migrate existing button themes, but some additional tweaking may be required to account for the absence of prefixed params. + + In order to achieve the same result as from the code snippet below. + + ```html + + + ``` + + ```scss + $my-button-theme: button-theme( + $raised-background: red, + $outlined-outline-color: green + ); + + @include css-vars($my-button-theme); + ``` + + You have to create a separate theme for each button type and scope it to a CSS selector. + + ```html +
+ +
+
+ +
+ ``` + + ```scss + $my-raised-button: button-theme( + $background: red + ); + + $my-outlined-button: button-theme( + $border-color: red + ); + + .my-raised-btn { + @include css-vars($my-raised-button); + } + + .my-outlined-btn { + @include css-vars($my-outlined-button); + } + ``` + + As you can see, since the `button-theme` params now have the same names for each button type, we have to scope our button themes to a CSS selector in order to have different colors for different types. + + Here you can see all the [available properties](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) of the `button-theme` + + - The `typography` mixin is no longer implicitly included with `core`. To use our typography styles you have to include the mixin explicitly after `core` and before `theme`: + + ```scss + // in styles.scss + + @include core(); + + @include typography( + $font-family: $material-typeface, + $type-scale: $material-type-scale + ); + + @include theme(); + ``` + + > [!IMPORTANT] + > The `core` mixin should always be included first. + + For each theme included in Ignite UI for Angular we provide specific `font-family` and `type-scale` variables which you can use: + + | **Theme** | **Font Family** | **Type Scale** | + | --------- | ------------------- | --------------------- | + | Material | $material-typeface | $material-type-scale | + | Fluent | $fluent-typeface | $fluent-type-scale | + | Bootstrap | $bootstrap-typeface | $bootstrap-type-scale | + | Indigo | $indigo-typeface | $indigo-type-scale | + +### IgxBottomNav component + +The [**IgxBottomNavComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavcomponent.html) was completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. It is recommended that you update via **ng update** in order to migrate the existing **igx-bottom-nav** definitions to the new ones. + + +- Template + - The new structure defines bottom navigation item components each wrapping a header and a content component. The headers usually contain an icon ([`Material guidelines`](https://material.io/components/bottom-navigation#usage)) but may as well have a label or any other custom content. + - For header styling purposes we introduced two new directives - `igxBottomNavHeaderLabel` and `igxBottomNavHeaderIcon`. + - Since the header component now allows adding any content, the `igxTab` directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary. + - When the component is used in navigation scenario, the `routerLink` directive needs to be attached to the header component. + + ```html + + + + folder + Tab 1 + + + Content 1 + + + ... + + ``` + +- API changes + - The `id`, `itemStyle`, `panels`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavcomponent.html#items) property returns the collection of tabs. + - The following properties were changed: + - The tab item's `isSelected` property was renamed to [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavitemcomponent.html#selected). + - The `selectedTab` property was renamed to [`selectedItem`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavcomponent.html#selectedItem). + - The `onTabSelected` and `onTabDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavcomponent.html#selectedIndexChanging),[`selectedIndexChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavcomponent.html#selectedIndexChange) and [`selectedItemChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbottomnavcomponent.html#selectedItemChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. + +### IgxTabs component + +The [**IgxTabsComponent**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html) was completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. It is recommended that you update via **ng update** in order to migrate the existing **igx-tabs** definitions to the new ones. + + +- Template + - The new structure defines tab item components each wrapping a header and a content component. The headers usually contain an icon and a label but may as well have any other custom content. + - For header styling purposes we introduced two new directives - `igxTabHeaderLabel` and `igxTabHeaderIcon`. + - Since the header component now allows adding any content, the `igxTab` directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary. + - When the component is used in navigation scenario, the `routerLink` directive needs to be attached to the header component. + + ```html + + + + folder + Tab 1 + + +

Tab 1 Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + ... + + ``` + +- API changes + - The `id`, `groups`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html#items) property returns the collection of tabs. + - The following properties were changed: + - The tab item's `isSelected` property was renamed to [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabitemcomponent.html#selected). + - The `selectedTabItem` property was shortened to [`selectedItem`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html#selectedItem). + - The `type` property, with its contentFit and fixed options, is no longer available. The header sizing & positioning mode is currently controlled by the [`tabAlignment`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html#tabAlignment) input property which accepts four different values - start (default), center, end and justify. The old `contentFit` type corresponds to the current `start` alignment value and the old `fixed` type - to the current `justify` value. + - The `tabItemSelected` and `tabItemDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html#selectedIndexChanging), [`selectedIndexChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html#selectedindexchange) and [`selectedItemChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtabscomponent.html#selectedIndexChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. + +### IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent + +- _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ are no longer exposed in the public API. +- Public APIs, which used to return an instance of one of the above, now return objects implementing the public [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html) interface: + +```ts +const row = grid.getRowByIndex(0); +const row = grid.getRowByKey(2); +const row = cell.row; +``` + +While the public API of [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html) is the same as what _IgxRowComponent_ and others used to expose, please note: + +- _toggle_ method, exposed by the _IgxHierarchicalRowComponent_ is not available. Use [`expanded`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html#expanded) property for all row types: + +```ts +grid.getRowByIndex(0).expanded = false; +``` + +*row.rowData_ and _row.rowID_ are deprecated and will be entirely removed with version 13. Please use _row.data_ and _row.key_ instead. + +- _row_ property in the event arguments emitted by _onRowPinning_, and _dragData_ property in the event arguments emitted by _onRowDragStart_, _onRowDragEnd_ is now implementing [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html) +- _ng update_ will migrate most of the uses of _IgxGridRowComponent_, _IgxTreeGridRowComponent_, _IgxHierarchicalRowComponent_, _IgxGridGroupByRowComponent_ , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html). +- _getRowByIndex_ will now return a [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html) object, if the row at that index is a summary row (previously used to returned _undefined_). _row.isSummaryRow_ and _row.isGroupByRow_ return true if the row at the index is a summary row or a group by row. + +### IgxInputGroupComponent + +- The `disabled` property has been removed. The property was misleading, as the state of the input group was always managed by the underlying `igxInput`. + - Running `ng update` will handle all instances in which `[disabled]` was used as an `@Input` in templates. + - If you are referencing the property in a `.ts` file: + + ```typescript + export class CustomComponent { + public inputGroup: IgxInputGroupComponent + ... + this.inputGroup.disabled = false; + } + ``` + + you should please manually update your code to reference the underlying input directive's `disabled` property: + + ```typescript + export class CustomComponent { + public input: IgxInputDirective + ... + this.input.disabled = false; + } + ``` + +### IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent + +- The `value` property for IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now accepts ISO 8601 string format. This means that `value` type could be `Date` or `string`. +- The `inputFormat` property of IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now doesn't accept `y` for the year part. You should update it to `yy`. + +## From 10.2.x to 11.0.x + +- IgxGrid, IgxTreeGrid, IgxHierarchicalGrid + - The way the toolbar is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the `showToolbar` property is removed from + all grids and all other properties related to the toolbar in the grid are deprecated. + It is recommended to follow the recommended way for enabling + toolbar features as described in the [Toolbar topic](../grid/toolbar.md). + - The `igxToolbarCustomContent` directive is removed. While the migration will move + your template content inside the toolbar content, it does not try to resolve template bindings. Make sure to check your template files after the migration. + - The API for the toolbar component was changed during the refactor and many of the old properties are now removed. Unfortunately, having + an adequate migration for these changes is complicated to say the least, so any errors should be handled at project level. + +## From 10.0.x to 10.1.x + +- IgxGrid, IgxTreeGrid, IgxHierarchicalGrid + - Since we have removed the `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective`, and `IgxExcelStyleSelectingTemplateDirective` directives used for templating some parts of the Excel style filter menu, you could use the newly added directives for templating the column and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. We have also exposed all internal components of the Excel style filter menu so that they can be used inside custom templates. You can find more information about the new template directives in the [Excel-Style Filtering Topic](../grid/excel-style-filtering.md#templates). +- IgxGrid + - The `selectedRows()` method has been refactored into an input property named. This breaking change allows users to easily change the grid's selection state at runtime. Pre-selection of rows is also supported. All instances where the `selectedRows()` method is called have to be rewritten without any parentheses. + - Binding to the `selectedRows` input property could look something like this: + + ```typescript + public mySelectedRows = [0, 1, 2]; + ``` + + ```html + + + + ``` + +## From 9.0.x to 10.0.x + +- IgxDropdown + - The display property of the dropdown item has been changed from `flex` to `block`. We have done this in order to have truncated text enabled by default. Due to that change, if there is more than text in the content of the dropdown item, the layout needs to be handled on the application level. + + - The following example demonstrates how to style a dropdown item with an icon and text content so that they are vertically aligned. + + ```html + +
+ alarm + item text +
+ + ``` + + ```scss + .my-styles { + display: flex; + align-items: center; + + span { + margin-left: 8px; + } + } + ``` + +## From 8.x.x to 9.0.x + +Due to a breaking change in Angular 9 Hammer providers are no longer implicitly added +[please, refer to the following document for details:](https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 ) Because of this the following components require `HammerModule` to be imported in the root module of the application in order for **touch** interactions to work as expected: + +- igxGrid +- igxHierarchicalGrid +- igxTreeGrid +- igxList +- igxNavigationDrawer +- igxTimePicker +- igxDatePicker +- igxMonthPicker +- _igxSlider_* +- igxCalendar +- igxCarousel + +> **\* Note** - igxSlider requires the HammerModule for _**all**_ user interactions. + +You can use the following code snippet to update your app's root module file. + +```typescript +import { HammerModule } from "@angular/platform-browser"; + +@NgModule({ + ... + imports: [ + ... + HammerModule + ] +}) +``` + +Due to name changes made in some of the `Enumerations` we export, manual update is needed for their members. Here's a list of all changes made that require manual update: + +- AvatarType.`DEFAULT` -> IgxAvatarType.`CUSTOM` +- Type.`DEFAULT` -> IgxBadgeType.`PRIMARY` +- IgxCardType.`DEFAULT` -> IgxCardType.`ELEVATED` +- IgxCardActionsLayout.`DEFAULT` -> IgxCardActionsLayout.`START` +- IgxDividerType.`DEFAULT` -> IgxDividerType.`SOLID` +- IgxProgressType.`DANGER` -> IgxProgressType.`ERROR` + +The `ng update` process will update all enumeration names, like `AvatarType`, `Type`, et al. to `IgxAvatarType` and `IgxBadgeType`, respectively. All other enumeration member names remain unchanged. + +## From 8.1.x to 8.2.x + +- IgxDrag + - Since `hideBaseOnDrag` and `visible` inputs are being deprecated, in order to achieve the same functionality in your application, you can use any way of hiding the base element that Angular provides. One example is setting the `visibility` style to `hidden`, since it will only make in invisible and keep its space that it takes in the DOM: + + ```html +
+ Drag me! +
+ ``` + + ```typescript + public targetDragged = false; + + public onDragStarted(event) { + this.targetDragged = true; + } + + public onDragEnded(event) { + this.targetDragged = false; + } + ``` + + - Since `animateOnRelease` and `dropFinished()` are also being deprecated, any `dropFinished()` method usage should be replaced with `transitionToOrigin()`. Otherwise you would need to call `transitionToOrigin()` depending on when you would want the dragged element to transition back to its original location. Note that if the dragged element DOM position is changed, then its original location will also change based on that. + +- IgxDrop + - Due to the default drop strategy provided with the `IxgDrop` directive is no longer applied by default, in order to continue having the same behavior, you need to set the new input `dropStrategy` to be the provided `IgxAppendDropStrategy` implementation. + + ```html +
+ ``` + + ```typescript + import { IgxAppendDropStrategy } from 'igniteui-angular'; + // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package + + public appendStrategy = IgxAppendDropStrategy; + ``` + + - Any use of interfaces `IgxDropEnterEventArgs` and `IgxDropLeaveEventArgs` should be replaced with `IDragBaseEventArgs`. + - Also any use of the `IgxDropEventArgs` interface should be replaced with `IDropDroppedEventArgs`. + +- IgxRowDragDirective + - `IRowDragStartEventArgs` and `IRowDragEndEventArgs` have argument's name changed in order to be more clear to what it relates to. `owner` argument is renamed to `dragDirective`. + The `owner` argument now provides a reference to the owner component. If your code was like: + + ```typescript + public dragStart(event) { + const directive = event.owner; + } + ``` + + From version 8.2.x it should be updated to: + + ```typescript + public dragStart(event) { + const directive = event.dragDirective; + const grid = event.owner; + } + ``` + +- IgxCombo + - The way that the [`igx-combo`](../combo.md) handles selection and data binding is changed. + + - If the combo's [`valueKey`] input is defined, the control will look for that specific property in the passed array of data items when performing selection. + **All** selection events are handled with the value of the data items' `valueKey` property. + All combos that have `valueKey` specified should have their selection/two-way binding consist only of the values for the object property specified in the input: + + ```html + + ``` + + ```typescript + export class MyExampleCombo { + public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...]; + ... + selectFavorites() { + // Selection is handled with the data entries' id properties + this.combo.selectItems(['UK01', 'BG01']); + } + } + ``` + + - If the combo **does not** have a `valueKey` defined, **all** selection events are handled with **equality (===)**. + All combos that **do not** have a `valueKey` specified should have their selection/two-way binding handled with **references** to their data items: + + ```html + + ``` + + ```typescript + export class MyExampleCombo { + public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...]; + ... + selectFavorites() { + // Selection is handled with references to the data entries + this.combo.selectItems([this.data[0], this.data[1]]); + } + } + ``` + + You can read more about setting up the combo in the [readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md#value-binding) and in the [official documentation](../combo.md#selection-api). + +## From 8.0.x to 8.1.x + +- The `igx-paginator` component is introduced as a standalone component and is also used in the Grid components. +Keep in mind that if you have set the `paginationTemplate`, you may have to modify your CSS to display the pagination correctly. This is due to the fact that the template is no longer applied under a paging-specific container with CSS rules to center content, so you might need to add them manually. +The style should be something similar to: + +```html + + + +
+ +``` + +```css +.pagination-container { + display: flex; + justify-content: center; + align-items: center; +} +``` + +## From 7.3.x to 8.0.x + +- While updating, if you face the following error `Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5").`, you should update `@angular/core` package first. This is related to this known [Angular CLI issue](https://github.com/angular/angular-cli/issues/13095) +- While updating the `igniteui-angular` package, if you see the following error `Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")`, you should update using `ng update igniteui-angular --force`. This could happen if you update `@angular/core` and `@angular/cli` before updating `igniteui-angular`. + +## From 7.2.x or 7.3.x to 7.3.4 + +- If you use the `filterGlobal` method of `IgxGrid`, `IgxTreeGrid` or `IgxHierarchicalGrid`, you should know that the `condition` parameter is no longer optional. When the `filterGlobal` method is called with an invalid condition, it will not clear the existing filters for all columns. + +## From 7.1.x to 7.2.x + +- If you use an IgxCombo with `combo.value`, you should know that now `combo.value` is only a getter. +- If you use `IgxTextHighlightDirective`, you should know that the `page` input property is deprecated. `rowIndex`, `columnIndex` and `page` properties of the `IActiveHighlightInfo` interface are also deprecated. Instead, `row` and `column` optional properties are added. +- If you use the `button-theme`, you should know that the `$button-roundness` has been replaced for each button type with: `$flat-border-radius`, `$raised-border-radius`, `$outline-border-radius`, `$fab-border-radius`, `$icon-border-radius`. + +## From 7.0.x to 7.1.x + +- If you use an IgxGrid with summaries in your application, you should know that now the `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult with proper length. + + Before version 7.1: + +```typescript +export class CustomSummary extends IgxNumberSummaryOperand { + public operate(data?: any[]): IgxSummaryResult[] { + return [{ + key: 'average', + label: 'average', + summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2) + }]; + } +} +``` + + Since version 7.1: + +```typescript +export class CustomSummary extends IgxNumberSummaryOperand { + public operate(data?: any[]): IgxSummaryResult[] { + return [{ + key: 'average', + label: 'average', + summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null + }]; + } +} +``` + +## From 6.0.x to 6.1.x + +- If you use an IgxCombo control in your application and you have set the `itemsMaxWidth` option, you should change this option to `itemsWidth` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-csv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-csv.md new file mode 100644 index 000000000..29b6b6ab5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-csv.md @@ -0,0 +1,267 @@ +--- +title: Angular Map | Data Visualization Tools | Binding CSV Data | Infragistics +_description: Learn how to use Infragistics' Angular map to display data that contains geographic locations from view models or geographic locations loaded from CSV files. View Ignite UI for Angular map demos! +_keywords: Angular map, plot data, Ignite UI for Angular, Infragistics, data binding +_license: commercial +mentionedTypes: ["XamGeographicMap", "GeographicHighDensityScatterSeries"] +namespace: Infragistics.Controls.Maps +_tocName: Binding CSV File +_premium: true +--- + +# Angular Binding CSV Files with Geographic Locations + +With the Ignite UI for Angular map component, you can plot geographic data loaded from various file types. For example, you can load geographic locations from a comma separated values (CSV) file. + +## Angular Binding CSV Files with Geographic Locations Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + this.componentDidMount(); + } + + public componentDidMount() { + // fetching JSON data with geographic locations from public folder + fetch("https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv") + .then((response) => response.text()) + .then((data) => this.onDataLoaded(data)); + } + + public onDataLoaded(csvData: string) { + const csvLines = csvData.split("\n"); + // console.log("loaded UsaCitiesPopulation.csv " + csvLines.length); + + // parsing CSV data and creating geographic locations + const geoLocations: any[] = []; + for (let i = 1; i < csvLines.length; i++) { + const columns = csvLines[i].split(","); + const location = { + code: columns[4], + county: columns[5], + density: Number(columns[6]), + latitude: Number(columns[1]), + longitude: Number(columns[2]), + name: columns[0], + population: Number(columns[7]), + state: columns[3] + }; + geoLocations.push(location); + } + + // creating HD series with loaded data + const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent(); + geoSeries.dataSource = geoLocations; + geoSeries.latitudeMemberPath = "latitude"; + geoSeries.longitudeMemberPath = "longitude"; + geoSeries.heatMaximumColor = "Red"; + geoSeries.heatMinimumColor = "Black"; + geoSeries.heatMinimum = 0; + geoSeries.heatMaximum = 5; + geoSeries.pointExtent = 1; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.mouseOverEnabled = true; + + // adding symbol series to the geographic amp + this.map.series.add(geoSeries); + + // zooming to bound of lower 48-states + const geoBounds = { + height: Math.abs(50 - 15), + left: -130, + top: 15, + width: Math.abs(-130 + 65) + }; + this.map.zoomToGeographic(geoBounds); + } +} +``` +```html +
+ + + + +
+ County: {{item.county}}
+ Population: {{item.density}} K +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Data Example + +Here is an example of data from CSV file: + +```ts +City,Lat,Lon,State,Code,County,Density,Population +New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227 +Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650 +``` + +## Code Snippet + +The following code loads and binds [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) in the map component to an array of objects created from loaded CSV file with geographic locations. + +```html +
+ + +
+ + +
+ + County: {{item.county}} + +
+ + Population: {{item.density}} K + +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-binding-geographic-csv_files", + styleUrls: ["./map-binding-geographic-csv_files.component.scss"], + templateUrl: "./map-binding-geographic-csv_files.component.html" +}) + +export class MapBindingDataCsvComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltip: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + this.componentDidMount(); + } + + public componentDidMount() { + // fetching JSON data with geographic locations from public folder + fetch("assets/Data/UsaCities.csv") + .then((response) => response.text()) + .then((data) => this.onDataLoaded(data)); + } + + public onDataLoaded(csvData: string) { + const csvLines = csvData.split("\n"); + + // parsing CSV data and creating geographic locations + const geoLocations: any[] = []; + for (let i = 1; i < csvLines.length; i++) { + const columns = csvLines[i].split(","); + const location = { + code: columns[4], + county: columns[5], + density: Number(columns[6]), + latitude: Number(columns[1]), + longitude: Number(columns[2]), + name: columns[0], + population: Number(columns[7]), + state: columns[3] + }; + geoLocations.push(location); + } + + // creating HD series with loaded data + const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent(); + geoSeries.dataSource = geoLocations; + geoSeries.latitudeMemberPath = "latitude"; + geoSeries.longitudeMemberPath = "longitude"; + geoSeries.heatMaximumColor = "Red"; + geoSeries.heatMinimumColor = "Black"; + geoSeries.heatMinimum = 0; + geoSeries.heatMaximum = 5; + geoSeries.pointExtent = 1; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.mouseOverEnabled = true; + + // adding symbol series to the geographic amp + this.map.series.add(geoSeries); + } +} +``` + +## API References + +- [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- `DataSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) +- [`heatMaximumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) +- [`heatMinimumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) +- [`pointExtent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#pointExtent) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-json-points.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-json-points.md new file mode 100644 index 000000000..3c75e27f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-json-points.md @@ -0,0 +1,242 @@ +--- +title: Angular Map | Data Visualization Tools | Binding JSON Files | Infragistics +_description: Learn how to use Infragistics' Angular map to display data that contains geographic locations from view models or geographic locations loaded from JSON files. View Ignite UI for Angular map demos! +_keywords: Angular map, JSON files, Ignite UI for Angular, Infragistics, data binding +_license: commercial +mentionedTypes: ["XamGeographicMap", "Series"] +namespace: Infragistics.Controls.Maps +_tocName: Binding JSON File +_premium: true +--- + +# Angular Binding JSON Files with Geographic Locations + +With the Ignite UI for Angular map, you can plot geographic data loaded from various file types. For example, you can load geographic locations from JavaScript Object Notation (JSON) file. + +## Angular Binding JSON Files with Geographic Locations Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + this.componentDidMount(); + } + + public componentDidMount() { + // fetching JSON data with geographic locations from public folder + fetch("https://static.infragistics.com/xplatform/data/WorldCities.json") + .then((response) => response.json()) + .then((data) => this.onDataLoaded(data)); + } + + public onDataLoaded(jsonData: any[]) { + // console.log("loaded WorldCities.json " + jsonData.length); + + const geoLocations: any[] = []; + // parsing JSON data and using only cities that are capitals + for (const jsonItem of jsonData) { + const location = { + city: jsonItem.name, + country: jsonItem.country, + latitude: jsonItem.lat, + longitude: jsonItem.lon, + population: jsonItem.pop + }; + geoLocations.push(location); + } + + // creating symbol series with loaded data + const geoSeries = new IgxGeographicSymbolSeriesComponent(); + geoSeries.dataSource = geoLocations; + geoSeries.markerType = MarkerType.Circle; + geoSeries.latitudeMemberPath = "latitude"; + geoSeries.longitudeMemberPath = "longitude"; + geoSeries.markerBrush = "LightGray"; + geoSeries.markerOutline = "Black"; + geoSeries.tooltipTemplate = this.tooltip; + + // adding symbol series to the geographic amp + this.map.series.add(geoSeries); + } +} +``` +```html +
+ + + + +
+ {{item.city}} +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Data Example + +Here is an example of data from JSON file: + +```json +[ + { "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 }, + { "name": "Sydney Creek", "lat": -16.3, "lon": 128.95 }, + { "name": "Mount Sydney", "lat": -21.39864, "lon": 121.193 }, + // ... +] +``` + +## Code Snippet + +The following code loads and binds [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) in the map component to an array of objects created from loaded JSON file with geographic locations: + +```html +
+ + +
+ + +
+ {{item.city}} +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from 'igniteui-angular-charts'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-binding-geographic-json-files", + styleUrls: ["./map-binding-geographic-json-files.component.scss"], + templateUrl: "./map-binding-geographic-json-files.component.html" +}) + +export class MapBindingDataJsonPointsComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltip: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + this.componentDidMount(); + } + + public componentDidMount() { + // fetching JSON data with geographic locations from public folder + fetch("assets/Data/WorldCities.json") + .then((response) => response.json()) + .then((data) => this.onDataLoaded(data)); + } + + public onDataLoaded(jsonData: any[]) { + const geoLocations: any[] = []; + // parsing JSON data and using only cities that are capitals + for (const jsonItem of jsonData) { + if (jsonItem.cap) { + const location = { + city: jsonItem.name, + country: jsonItem.country, + latitude: jsonItem.lat, + longitude: jsonItem.lon, + population: jsonItem.pop + }; + geoLocations.push(location); + } + } + + // creating symbol series with loaded data + const geoSeries = new IgxGeographicSymbolSeriesComponent(); + geoSeries.dataSource = geoLocations; + geoSeries.markerType = MarkerType.Circle; + geoSeries.latitudeMemberPath = "latitude"; + geoSeries.longitudeMemberPath = "longitude"; + geoSeries.markerBrush = "LightGray"; + geoSeries.markerOutline = "Black"; + geoSeries.tooltipTemplate = this.tooltip; + + // adding symbol series to the geographic amp + this.map.series.add(geoSeries); + } +} +``` + +## API References + +- [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- `GeographicMap` +- `DataSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-model.md new file mode 100644 index 000000000..2c276b600 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-data-model.md @@ -0,0 +1,334 @@ +--- +title: Angular Map | Data Visualization Tools | Binding Geographic Data Models | Infragistics +_description: Use Infragistics' Angular JavaScript map to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. View Ignite UI for Angular map demos! +_keywords: Angular map, binding data models, Ignite UI for Angular, Infragistics, data binding +_license: commercial +mentionedTypes: ["XamGeographicMap", "GeographicScatterAreaSeries", "GeographicHighDensityScatterSeries", "GeographicProportionalSymbolSeries", "GeographicScatterAreaSeries", "GeographicContourLineSeries", "GeographicShapeSeries", "GeographicPolylineSeries", "Series", "GeographicShapeSeriesBase"] +namespace: Infragistics.Controls.Maps +_tocName: Binding Data Model +_premium: true +--- + +# Angular Binding Geographic Data Models + +The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The `ItemsSource` property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects. + +## Angular Binding Geographic Data Models Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldUtility } from "./WorldUtility"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("pointSeriesTooltipTemplate", { static: true }) + public pointSeriesTooltipTemplate: TemplateRef; + @ViewChild("polylineSeriesTooltipTemplate", { static: true }) + public polylineSeriesTooltipTemplate: TemplateRef; + public flights: any[]; + constructor() { + } + + public ngAfterViewInit(): void { + const cityDAL = { lat: 32.763, lon: -96.663, country: "US", name: "Dallas" }; + const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" }; + const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" }; + const cityQTR = { lat: 25.285, lon: 51.531, country: "Qatar", name: "Doha" }; + const cityPAN = { lat: 8.949, lon: -79.400, country: "Panama", name: "Panama" }; + const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" }; + const cityJAP = { lat: 35.683, lon: 139.809, country: "Japan", name: "Tokyo" }; + const cityALT = { lat: 33.795, lon: -84.349, country: "US", name: "Atlanta" }; + const cityJOH = { lat: -26.178, lon: 28.004, country: "South Africa", name: "Johannesburg" }; + const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" }; + const citySNG = { lat: 1.229, lon: 104.177, country: "Singapore", name: "Singapore" }; + const cityMOS = { lat: 55.750, lon: 37.700, country: "Russia", name: "Moscow" }; + const cityROM = { lat: 41.880, lon: 12.520, country: "Italy", name: "Rome" }; + const cityLAX = { lat: 34.000, lon: -118.25, country: "US", name: "Los Angeles" }; + + this.flights = [ + { origin: cityDAL, dest: citySNG, color: "Green" }, + { origin: cityMOS, dest: cityNZL, color: "Red" }, + { origin: cityCHL, dest: cityJAP, color: "Blue" }, + { origin: cityPAN, dest: cityROM, color: "Orange" }, + { origin: cityALT, dest: cityJOH, color: "Black" }, + { origin: cityNYC, dest: cityQTR, color: "Purple" }, + { origin: cityLAX, dest: citySYD, color: "Gray" } + ]; + + for (const flight of this.flights) { + this.createPolylineSeries(flight); + this.createSymbolSeries(flight); + } + } + + public createSymbolSeries(flight: any) { + const geoLocations = [flight.origin, flight.dest ]; + const symbolSeries = new IgxGeographicSymbolSeriesComponent (); + symbolSeries.dataSource = geoLocations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "White"; + symbolSeries.markerOutline = flight.color; + symbolSeries.thickness = 1; + symbolSeries.tooltipTemplate = this.pointSeriesTooltipTemplate; + + this.map.series.add(symbolSeries); + } + + public createPolylineSeries(flight: any) { + const geoPath = WorldUtility.calcPaths(flight.origin, flight.dest); + const geoDistance = WorldUtility.calcDistance(flight.origin, flight.dest); + const geoRoutes = [ + { + dest: flight.dest, + distance: geoDistance, + origin: flight.origin, + points: geoPath, + time: geoDistance / 850 + }]; + + const lineSeries = new IgxGeographicPolylineSeriesComponent (); + lineSeries.dataSource = geoRoutes; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeStrokeThickness = 9; + lineSeries.shapeOpacity = 0.5; + lineSeries.shapeStroke = flight.color; + lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate; + this.map.series.add(lineSeries); + } +} +``` +```html +
+ + + + +
+ {{item.country}} +
+ + + +
+ Departure: {{item.origin.country}}
+ Arrival: {{item.dest.country}} +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The following table summarized data structures required for each type of geographic series: + +| Geographic Series | Properties | Description | +|--------------|---------------| ---------------| +| [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | +| [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | +| [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | +| [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +|[`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | +|[`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | + +## Code Snippet + +The following code shows how to bind the [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md) + +```html +
+ + +
+ + +
+ + {{item.country}} + +
+ + + +
+ + Departure: {{item.origin.country}} + +
+ + Arrival: {{item.dest.country}} + +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from 'igniteui-angular-charts'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; +import { WorldUtils } from "../../utilities/WorldUtils"; + +@Component({ + selector: "app-map-binding-geographic-data-models", + styleUrls: ["./map-binding-geographic-data-models.component.scss"], + templateUrl: "./map-binding-geographic-data-models.component.html" +}) + +export class MapBindingDataModelComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild("pointSeriesTemplate") + public pointSeriesTemplate: TemplateRef; + @ViewChild("polylineSeriesTooltipTemplate") + public polylineSeriesTooltipTemplate: TemplateRef; + public flights: any[]; + constructor() { + } + + public ngAfterViewInit(): void { + const cityDAL = { lat: 32.763, lon: -96.663, country: "US", name: "Dallas" }; + const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" }; + const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" }; + const cityQTR = { lat: 25.285, lon: 51.531, country: "Qatar", name: "Doha" }; + const cityPAN = { lat: 8.949, lon: -79.400, country: "Panama", name: "Panama" }; + const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" }; + const cityJAP = { lat: 35.683, lon: 139.809, country: "Japan", name: "Tokyo" }; + const cityALT = { lat: 33.795, lon: -84.349, country: "US", name: "Atlanta" }; + const cityJOH = { lat: -26.178, lon: 28.004, country: "South Africa", name: "Johannesburg" }; + const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" }; + const citySNG = { lat: 1.229, lon: 104.177, country: "Singapore", name: "Singapore" }; + const cityMOS = { lat: 55.750, lon: 37.700, country: "Russia", name: "Moscow" }; + const cityROM = { lat: 41.880, lon: 12.520, country: "Italy", name: "Roma" }; + const cityLAX = { lat: 34.000, lon: -118.25, country: "US", name: "Los Angeles" }; + + this.flights = [ + { origin: cityDAL, dest: citySNG, color: "Green" }, + { origin: cityMOS, dest: cityNZL, color: "Red" }, + { origin: cityCHL, dest: cityJAP, color: "Blue" }, + { origin: cityPAN, dest: cityROM, color: "Orange" }, + { origin: cityALT, dest: cityJOH, color: "Black" }, + { origin: cityNYC, dest: cityQTR, color: "Purple" }, + { origin: cityLAX, dest: citySYD, color: "Gray" } + ]; + + for (const flight of this.flights) { + this.createPolylineSeries(flight); + this.createSymbolSeries(flight); + } + } + + public createSymbolSeries(flight: any) { + const geoLocations = [flight.origin, flight.dest ]; + const symbolSeries = new IgxGeographicSymbolSeriesComponent (); + symbolSeries.dataSource = geoLocations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "White"; + symbolSeries.markerOutline = flight.color; + symbolSeries.thickness = 1; + symbolSeries.tooltipTemplate = this.pointSeriesTemplate; + + this.map.series.add(symbolSeries); + } + + public createPolylineSeries(flight: any) { + const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest); + const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest); + const geoRoutes = [ + { + dest: flight.dest, + distance: geoDistance, + origin: flight.origin, + points: geoPath, + time: geoDistance / 850 + }]; + + const lineSeries = new IgxGeographicPolylineSeriesComponent (); + lineSeries.dataSource = geoRoutes; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeStrokeThickness = 9; + lineSeries.shapeOpacity = 0.5; + lineSeries.shapeStroke = flight.color; + lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate; + this.map.series.add(lineSeries); + } +} +``` + +## API References + +- [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) +- [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) +- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-multiple-shapes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-multiple-shapes.md new file mode 100644 index 000000000..ecb393041 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-multiple-shapes.md @@ -0,0 +1,584 @@ +--- +title: Angular Map | Data Visualization Tools | Binding Multiple Data Shapes | Infragistics +_description: Use Infragistics' Angular to add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. View Ignite UI for Angular map tutorials! +_keywords: Angular map, shape files, Ignite UI for Angular, Infragistics, data binding +_license: commercial +mentionedTypes: ["XamGeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +namespace: Infragistics.Controls.Maps +_tocName: Binding Multiple Shapes +_premium: true +--- + +# Angular Binding and Overlaying Multiple Shape Files + +In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) for plotting geographic locations of ports, the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) for plotting routes between ports, and the [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) for plotting shapes of countries. + +## Angular Binding and Overlaying Multiple Shape Files Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicShapeSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("shapeSeries", { static: true }) + public shapeSeries: IgxGeographicShapeSeriesComponent; + + @ViewChild("polylineSeries", { static: true }) + public polylineSeries: IgxGeographicPolylineSeriesComponent; + + @ViewChild("symbolSeries", { static: true }) + public symbolSeries: IgxGeographicSymbolSeriesComponent; + + @ViewChild("polylineTooltip", { static: true }) + public polylineTooltip: TemplateRef; + + @ViewChild("shapeTooltip", { static: true }) + public shapeTooltip: TemplateRef; + + @ViewChild("pointTooltip", { static: true }) + public pointTooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + + this.map.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.7, height: 0.7}); + this.map.backgroundContent = null; + + // loading a shapefile with geographic polygons + const sdsPolygons = new IgxShapeDataSource(); + sdsPolygons.importCompleted.subscribe(() => this.onPolygonsLoaded(sdsPolygons, "")); + sdsPolygons.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.shp"; + sdsPolygons.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.dbf"; + sdsPolygons.dataBind(); + // loading a shapefile with geographic polylines at runtime. + const sdsPolylines = new IgxShapeDataSource(); + sdsPolylines.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.shp"; + sdsPolylines.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.dbf"; + sdsPolylines.dataBind(); + sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, "")); + // loading a shapefile with geographic points + const sdsPoints = new IgxShapeDataSource(); + sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, "")); + sdsPoints.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCities.shp"; + sdsPoints.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCities.dbf"; + sdsPoints.dataBind(); + } + + public onPointsLoaded(sds: IgxShapeDataSource, e: any) { + + const geoLocations: any[] = []; + // parsing shapefile data and creating geo-locations + for (const record of sds.getPointData()) { + const pop = record.fieldValues.POPULATION; + if (pop > 1000000) { + // each shapefile record has just one point + const location = { + city: record.fieldValues.NAME, + latitude: record.points[0][0].y, + longitude: record.points[0][0].x, + population: (pop / 1000000).toFixed(0) + "M" + }; + geoLocations.push(location); + } + } + this.symbolSeries.dataSource = geoLocations; + this.symbolSeries.markerOutline = "Red"; + this.symbolSeries.markerBrush = "White"; + this.symbolSeries.tooltipTemplate = this.pointTooltip; + } + + public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) { + + const geoPolylines: any[] = []; + // parsing shapefile data and creating geo-polygons + for (const record of sds.getPointData()) { + // using field/column names from .DBF file + const route = { + capacity: record.fieldValues.CapacityG, + distance: record.fieldValues.DistanceKM, + name: record.fieldValues.Name, + points: record.points + }; + geoPolylines.push(route); + } + this.polylineSeries.shapeMemberPath = "points"; + this.polylineSeries.shapeFilterResolution = 2.0; + this.polylineSeries.shapeStrokeThickness = 2; + this.polylineSeries.shapeStroke = "rgba(13, 124, 252, 0.9)"; + this.polylineSeries.tooltipTemplate = this.polylineTooltip; + this.polylineSeries.dataSource = geoPolylines; + } + + public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) { + + const geoPolygons: any[] = []; + // parsing shapefile data and creating geo-polygons + sds.getPointData().forEach((record) => { + // using field/column names from .DBF file + const pop = record.fieldValues.POPULATION; + const country = { + gdp: record.fieldValues.GDP, + name: record.fieldValues.NAME, + points: record.points, + population: (pop / 1000000).toFixed(1) + "M" + }; + geoPolygons.push(country); + }); + this.shapeSeries.dataSource = geoPolygons; + this.shapeSeries.shapeStroke = "Black"; + this.shapeSeries.shapeFill = "rgba(184, 183, 183, 0.5)"; + this.shapeSeries.tooltipTemplate = this.shapeTooltip; + } +} +``` +```html +
+ + + + + + + + + + +
+ Cable: {{item.name}}
+ Length: {{item.distance}} +
+ + + +
+ Country: {{item.name}}
+ Population: {{item.population}} +
+ + + +
+ City: {{item.city}}
+ Population: {{item.population}} +
+ +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) object. + +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) – displays locations of major cities +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays routes between major ports +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) – displays shapes of countries of the world + +You can use geographic series in above or other combinations to plot desired data. + +## Importing Components + +First, let's import required components and modules: + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; +import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps'; +import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +``` + +## Creating Series + +Next, we need to create a map with a few Geographic Series that will later load different type of shapefile. + +```html +
+
+ + + + + + + + +
+
+ + +
+ {{item.capacity}}
+ Distance: {{item.distance}} +
+ + + +
+ {{item.name}}
+ Population: {{item.population}} +
+ + + +
+ City: {{item.city}} +
+ +``` + +## Loading Shapefiles + +Next, in constructor of your page, add a [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) for each shapefile that you want to display in the geographic map component. + +```ts +const sdsPolygons = new IgxShapeDataSource(); +sdsPolygons.importCompleted = this.onPolygonsLoaded; +sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp"; +sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf"; +sdsPolygons.dataBind(); +const sdsPolylines = new IgxShapeDataSource(); +sdsPolylines.importCompleted = this.onPolylinesLoaded; +sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp"; +sdsPolylines.databaseSource = url + "/shapes/WorldConnections.dbf"; +sdsPolylines.dataBind(); +const sdsLocations = new IgxShapeDataSource(); +sdsLocations.importCompleted = this.onPointsLoaded; +sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp"; +sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf"; +sdsLocations.dataBind(); +``` + + + +## Processing Polygons + +Process shapes data loaded in [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) with of countries of the world and assign it to [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) object. + +```ts +import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +// ... +public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) { + const geoPolygons: any[] = []; + // parsing shapefile data and creating geo-polygons + let pointData = sds.getPointData(); + for ( let i = 0; i < pointData.length; i++ ) { + let record = pointData[i]; + // using field/column names from .DBF file + const country = { + points: record.points, + name: record.fieldValues.NAME, + gdp: record.fieldValues.GDP, + population: record.fieldValues.POPULATION + }; + geoPolygons.push(country); + }; + + const shapeSeries = this.geoMap.series[0] as IgxGeographicShapeSeries; + shapeSeries.dataSource = geoPolygons; +} +``` + +## Processing Polyline + +Process shapes data loaded in [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) with communication routes between major cities and assign it to [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) object. + +```ts +import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +// ... +public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) { + const geoPolylines: any[] = []; + // parsing shapefile data and creating geo-polygons + let pointData = sds.getPointData(); + for ( let i = 0; i < pointData.length; i++ ) { + let record = pointData[i]; + // using field/column names from .DBF file + const route = { + points: record.points, + name: record.fieldValues.Name, + capacity: record.fieldValues.CapacityG, + distance: record.fieldValues.DistanceKM, + isOverLand: record.fieldValues.OverLand === 0, + isActive: record.fieldValues.NotLive !== 0, + service: record.fieldValues.InService + }; + geoPolylines.push(route); + } + const lineSeries = this.geoMap.series[1] as IgxGeographicPolylineSeries; + lineSeries.dataSource = geoPolylines; +} +``` + +## Processing Points + +Process shapes data loaded in [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) with locations of major cities and assign it to [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) object. + +```ts +import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +// ... +public onPointsLoaded(sds: IgxShapeDataSource, e: any) { + const geoLocations: any[] = []; + // parsing shapefile data and creating geo-locations + let pointData = sds.getPointData(); + for ( let i = 0; i < pointData.length; i++ ) { + let record = pointData[i]; + const pop = record.fieldValues.POPULATION; + if (pop > 0) { + // each shapefile record has just one point + const location = { + latitude: record.points[0][0].y, + longitude: record.points[0][0].x, + city: record.fieldValues.NAME, + population: pop + }; + geoLocations.push(location); + } + } + const symbolSeries = this.geoMap.series[2] as IgxGeographicSymbolSeries; + symbolSeries.dataSource = geoLocations; +} +``` + + + +## Map Background + +Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application. + +```ts +public geoMap: IgxGeographicMapComponent; +// ... + +this.geoMap.backgroundContent = {}; +``` + +## Summary + +For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps'; +import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-binding-multiple-shapes-files", + styleUrls: ["./map-binding-multiple-shapes-files.component.scss"], + templateUrl: "./map-binding-multiple-shapes-files.component.html" +}) + +export class MapBindingMultipleShapesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + + @ViewChild ("shapeSeries") + public shapeSeries: IgxGeographicShapeSeriesComponent; + + @ViewChild ("polylineSeries") + public polylineSeries: IgxGeographicPolylineSeriesComponent; + + @ViewChild ("symbolSeries") + public symbolSeries: IgxGeographicSymbolSeriesComponent; + + @ViewChild("polylineTooltipTemplate") + public polylineTooltipTemplate: TemplateRef; + + @ViewChild("shapeTooltipTemplate") + public shapeTooltipTemplate: TemplateRef; + + @ViewChild("pointTooltipTemplate") + public pointTooltipTemplate: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + + this.map.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 }; + + // loading a shapefile with geographic polygons + const sdsPolygons = new IgxShapeDataSource(); + sdsPolygons.importCompleted.subscribe(() => this.onPolygonsLoaded(sdsPolygons, "")); + sdsPolygons.shapefileSource = "assets/Shapes/WorldCountries.shp"; + sdsPolygons.databaseSource = "assets/Shapes/WorldCountries.dbf"; + sdsPolygons.dataBind(); + // loading a shapefile with geographic polylines at runtime. + const sdsPolylines = new IgxShapeDataSource(); + sdsPolylines.shapefileSource = "assets/Shapes/WorldCableRoutes.shp"; + sdsPolylines.databaseSource = "assets/Shapes/WorldCableRoutes.dbf"; + sdsPolylines.dataBind(); + sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, "")); + + // loading a shapefile with geographic points + const sdsPoints = new IgxShapeDataSource(); + sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, "")); + sdsPoints.shapefileSource = "assets/Shapes/WorldCities.shp"; + sdsPoints.databaseSource = "assets/Shapes/WorldCities.dbf"; + sdsPoints.dataBind(); + } + + public onPointsLoaded(sds: IgxShapeDataSource, e: any) { + const geoLocations: any[] = []; + // parsing shapefile data and creating geo-locations + for (const record of sds.getPointData()) { + const pop = record.fieldValues["POPULATION"]; + if (pop > 0) { + // each shapefile record has just one point + const location = { + city: record.fieldValues["NAME"], + latitude: record.points[0][0].y, + longitude: record.points[0][0].x, + population: pop + }; + geoLocations.push(location); + } + } + this.symbolSeries.dataSource = geoLocations; + this.symbolSeries.tooltipTemplate = this.pointTooltipTemplate; + } + + public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) { + const geoPolylines: any[] = []; + // parsing shapefile data and creating geo-polygons + for (const record of sds.getPointData()) { + // using field/column names from .DBF file + const route = { + capacity: record.fieldValues["CapacityG"], + distance: record.fieldValues["DistanceKM"], + isActive: record.fieldValues["NotLive"] !== 0, + isOverLand: record.fieldValues["OverLand"] === 0, + name: record.fieldValues["Name"], + points: record.points, + service: record.fieldValues["InService"] + }; + geoPolylines.push(route); + } + this.polylineSeries.dataSource = geoPolylines; + this.polylineSeries.shapeMemberPath = "points"; + this.polylineSeries.shapeFilterResolution = 2.0; + this.polylineSeries.shapeStrokeThickness = 2; + this.polylineSeries.shapeStroke = "rgba(252, 32, 32, 0.9)"; + this.polylineSeries.tooltipTemplate = this.polylineTooltipTemplate; + } + + public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) { + const geoPolygons: any[] = []; + // parsing shapefile data and creating geo-polygons + sds.getPointData().forEach((record) => { + // using field/column names from .DBF file + const country = { + gdp: record.fieldValues["GDP"], + name: record.fieldValues["NAME"], + points: record.points, + population: record.fieldValues["POPULATION"] + }; + geoPolygons.push(country); + }); + this.shapeSeries.dataSource = geoPolygons; + this.shapeSeries.tooltipTemplate = this.shapeTooltipTemplate; + } +} +``` + +## API References + +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-multiple-sources.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-multiple-sources.md new file mode 100644 index 000000000..7c58ba4d3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-multiple-sources.md @@ -0,0 +1,344 @@ +--- +title: Angular Map | Data Visualization Tools | Binding Multiple Data Source | Infragistics +_description: Use Infragistics' Angular JavaScript map to add multiple geographic series objects to overlay custom data sources with geo-spacial data. View Ignite UI for Angular map tutorials! +_keywords: Angular map, geographic series, Ignite UI for Angular, Infragistics, data binding +_license: commercial +mentionedTypes: ["XamGeographicMap", "SeriesViewer", "Series", "GeographicShapeSeriesBase"] +_tocName: Binding Multiple Sources +_premium: true +--- + +# Angular Binding Multiple Data Sources + +In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) for plotting geographic locations of airports, the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) for plotting flights between airports, and 2nd [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) for plotting gridlines of major geographic coordinates. + +## Angular Binding Multiple Data Sources Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldConnections } from "./WorldConnections"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("polylineTooltipTemplate", { static: true }) + public polylineTooltipTemplate: TemplateRef; + + @ViewChild("pointTooltipTemplate", { static: true }) + public pointTooltipTemplate: TemplateRef; + + public data: any; + constructor() { + } + + public ngAfterViewInit(): void { + + this.map.updateZoomWindow({ left: 0.195, top: 0.1, width: 0.5, height: 0.5 }); + + const worldFlights = WorldConnections.getFlights(); + const worldAirports = WorldConnections.getAirports(); + const worldGridlines = WorldConnections.getGridlines(); + + this.addPolylineSeriesWith(worldFlights); + this.addGridlineSeriesWith(worldGridlines); + this.addSymbolSeriesWith(worldAirports); + } + + public addGridlineSeriesWith(data: any[]) { + const gridSeries = new IgxGeographicPolylineSeriesComponent(); + gridSeries.dataSource = data; + gridSeries.shapeMemberPath = "points"; + gridSeries.shapeStroke = "Gray"; + gridSeries.shapeStrokeThickness = 1; + this.map.series.add(gridSeries); + } + + public addPolylineSeriesWith(data: any[]) { + const lineSeries = new IgxGeographicPolylineSeriesComponent (); + lineSeries.dataSource = data; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)"; + lineSeries.shapeStrokeThickness = 4; + lineSeries.tooltipTemplate = this.polylineTooltipTemplate; + this.map.series.add(lineSeries); + } + + public addSymbolSeriesWith(data: any[]) { + const symbolSeries = new IgxGeographicSymbolSeriesComponent (); + symbolSeries.dataSource = data; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "#aad3df"; + symbolSeries.markerOutline = "rgb(73, 73, 73)"; + symbolSeries.thickness = 1; + symbolSeries.tooltipTemplate = this.pointTooltipTemplate; + this.map.series.add(symbolSeries); + } +} +``` +```html +
+ + + + +
+ Departure: {{item.origin.country}}
+ Destination: {{item.dest.country}}
+ Distance: {{item.distance}} miles +
+ + + +
+ {{item?.country}}
+ {{item?.name}}
+ Population: {{item.pop}} M
+ Flights: {{item.flights}} +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: + +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) – displays locations of major airports +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays flights between airports +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) – displays gridlines of major coordinates + +You can use geographic series in this or other combinations to plot desired data. + +## Creating Data Sources + +Create data sources for all geographic series that you want to display in the Ignite UI for Angular map. For example, you can the use [WorldConnections](geo-map-resources-world-connections.md) script. + +```html +
+ + +
+ + +
+ + Arrival: {{item.origin.country}} + +
+ + Destination: {{item.dest.country}} + +
+ + Distance: {{item.distance}} miles + +
+ + + +
+ + {{item?.country}} + +
+ + {{item?.name}} + +
+ + Population: {{item.pop}} M + +
+ + Flights: {{item.flights}} + +
+ +``` + +## Overlaying Flights + +Create first [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map. + +```html + + +``` + +## Overlaying Gridlines + +Create second [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map. + +```html + + +``` + +## Overlaying Airports + +Create [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map. + +```html + + +``` + +## Summary + +For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from 'igniteui-angular-charts'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldConnections } from "../../utilities/WorldConnections"; + +@Component({ + selector: "app-map-binding-multiple-data-sources", + styleUrls: ["./map-binding-multiple-data-sources.component.scss"], + templateUrl: "./map-binding-multiple--data-sources.component.html" +}) + +export class MapBindingMultipleSourcesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + + @ViewChild("polylineTooltipTemplate") + public polylineTooltipTemplate: TemplateRef; + + @ViewChild("pointTooltipTemplate") + public pointTooltipTemplate: TemplateRef; + + public data: any; + constructor() { + } + + public ngAfterViewInit(): void { + this.map.windowRect = { left: 0.195, top: 0.1, width: 0.5, height: 0.5 }; + + const worldFlights = WorldConnections.getFlights(); + const worldAirports = WorldConnections.getAirports(); + const worldGridlines = WorldConnections.getGridlines(); + + this.addPolylineSeriesWith(worldFlights); + this.addGridlineSeriesWith(worldGridlines); + this.addSymbolSeriesWith(worldAirports); + } + + public addGridlineSeriesWith(data: any[]) { + const gridSeries = new IgxGeographicPolylineSeriesComponent(); + gridSeries.dataSource = data; + gridSeries.shapeMemberPath = "points"; + gridSeries.shapeStroke = "Gray"; + gridSeries.shapeStrokeThickness = 1; + this.map.series.add(gridSeries); + } + + public addPolylineSeriesWith(data: any[]) { + const lineSeries = new IgxGeographicPolylineSeriesComponent (); + lineSeries.dataSource = data; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)"; + lineSeries.shapeStrokeThickness = 4; + lineSeries.tooltipTemplate = this.polylineTooltipTemplate; + this.map.series.add(lineSeries); + } + + public addSymbolSeriesWith(data: any[]) { + const symbolSeries = new IgxGeographicSymbolSeriesComponent (); + symbolSeries.dataSource = data; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "#aad3df"; + symbolSeries.markerOutline = "rgb(73, 73, 73)"; + symbolSeries.thickness = 1; + symbolSeries.tooltipTemplate = this.pointTooltipTemplate; + this.map.series.add(symbolSeries); + } +} +``` + +## API References + +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-shp-file.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-shp-file.md new file mode 100644 index 000000000..cac5656cf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-binding-shp-file.md @@ -0,0 +1,256 @@ +--- +title: Angular Map | Data Visualization Tools | Binding Geographic Shape Files | Infragistics +_description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos! +_keywords: Angular map, shapefiles, Ignite UI for Angular, Infragistics, data binding +_license: commercial +mentionedTypes: ["XamGeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +_tocName: Binding Shape File +_premium: true +--- + +# Angular Binding Shape Files with Geo-spatial Data + +The Ignite UI for Angular map component, the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) objects. + +## Angular Binding Shape Files with Geo-spatial Data Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("template", { static: true }) + public tooltipTemplate: TemplateRef; + + constructor() { } + + public ngAfterViewInit() { + // loading a shapefile with geographic polygons + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded /Shapes/WorldCableRoutes.shp " + shapeRecords.length); + + const geoPolylines: any[] = []; + // parsing shapefile data and creating geo-polygons + for (const record of shapeRecords) { + // using field/column names from .DBF file + const route = { + capacity: record.fieldValues.CapacityG, + distance: record.fieldValues.DistanceKM, + name: record.fieldValues.Name, + points: record.points + }; + geoPolylines.push(route); + } + + const geoSeries = new IgxGeographicPolylineSeriesComponent(); + geoSeries.dataSource = geoPolylines; + geoSeries.shapeMemberPath = "points"; + geoSeries.shapeFilterResolution = 0.0; + geoSeries.shapeStrokeThickness = 3; + geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)"; + geoSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(geoSeries); + } +} +``` +```html +
+ + + + +
+ Cable: {{item.name}}
+ Length: {{item.distance}} KM +
+ +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The following table explains properties of the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) class for loading shape files. + +| Property | Type | Description | +|----------|------|---------------| +| [`shapefileSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html#shapefileSource) | string |Specifies the Uri to a shape file (.shp) that contains geo-spatial data items.| +|[`databaseSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html#databaseSource) | string |Specifies the Uri to a shape database file (.dbf) that contains a data table for geo-spatial data items.| + + + + + +When both source properties are set to non-null values, then the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) is populated with [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. + +## Loading Shapefiles + +The following code creates an instance of the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. + +## Binding Shapefiles + +In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) is an example such array because it contains a list of [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) objects. + +The [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) class provides properties for storing geo-spatial data, listed in the following table. + +| Property | Description | +|--------------|---------------| +|`Points`|Contains all the points in one geo-spatial shape loaded from a shape file (.shp). For example, the country of Japan in shape file would be represented as a list of a list of points object, where:
  • The first list of points describes shape of Hokkaido island
  • The second list of points describes shape of Honshu island
  • The third list of points describes shape of Kyushu island
  • The fourth list of points describes shape of Shikoku island
| +| `Fields` |Contains a row of data from the shape database file (.dbf) keyed by a column name. For example, a data about county of Japan which includes population, area, name of a capital, etc.| + +This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them. + +## Code Snippet + +This code example assumes that shape files were loaded using the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html). +The following code binds [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) in the map component to the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) and maps the `Points` property of all [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) objects. + +```html +
+ + +
+ + +
+ + Airline: {{item.name}} + +
+ + Length: {{item.distance}} miles + +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-binding-shape-files", + styleUrls: ["./map-binding-shape-files.component.scss"], + templateUrl: "./map-binding-shape-files.component.html" +}) +export class MapBindingShapefilePolylinesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + + @ViewChild("template") + public tooltipTemplate: TemplateRef; + constructor() { } + + public ngAfterViewInit() { + // loading a shapefile with geographic polygons + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp"; + sds.databaseSource = "assets/Shapes/WorldCableRoutes.dbf"; + sds.dataBind(); + } + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + const geoPolylines: any[] = []; + // parsing shapefile data and creating geo-polygons + for (const record of shapeRecords) { + // using field/column names from .DBF file + const route = { + capacity: record.fieldValues["CapacityG"], + distance: record.fieldValues["DistanceKM"], + isActive: record.fieldValues["NotLive"] !== 0, + isOverLand: record.fieldValues["OverLand"] === 0, + name: record.fieldValues["Name"], + points: record.points, + service: record.fieldValues["InService"] + }; + geoPolylines.push(route); + } + + const geoSeries = new IgxGeographicPolylineSeriesComponent(); + geoSeries.dataSource = geoPolylines; + geoSeries.shapeMemberPath = "points"; + geoSeries.shapeFilterResolution = 0.0; + geoSeries.shapeStrokeThickness = 3; + geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)"; + geoSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(geoSeries); + } +} +``` + +## API References + +- `Fields` +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- `ImportCompleted` +- `ItemsSource` +- `Points` +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-azure-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-azure-imagery.md new file mode 100644 index 000000000..8ba8baebb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-azure-imagery.md @@ -0,0 +1,455 @@ +--- +title: Angular Map | Data Visualization Tools | Displaying Azure Imagery | Infragistics +_description: Use Infragistics' Angular to display imagery from Microsoft Azure Maps. View Ignite UI for Angular map tutorials! +_keywords: Angular map, azure maps, Ignite UI for Angular, Infragistics, imagery tile source, map background +_license: commercial +mentionedTypes: ["XamGeographicMap", "AzureMapsImagery", "GeographicTileSeries"] +_tocName: Displaying Azure Imagery +_premium: true +--- + +# Angular Imagery from Azure Maps + +The Angular [`IgxAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the [`IgxAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) class. + +## Angular Displaying Imagery from Azure Maps - Overview + +AzureMapsImagery + +
+ +```typescript +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +// Ignite UI Maps & Charts +import { IgxAzureMapsImageryModule, IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + +// Ignite UI Angular components +import { IgxButtonModule, IgxDialogModule, IgxIconModule, IgxInputGroupModule, IgxSelectModule } from "igniteui-angular"; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxAzureMapsImageryModule, + IgxDataChartInteractivityModule, + IgxDialogModule, + IgxInputGroupModule, + IgxIconModule, + IgxButtonModule, + IgxSelectModule // <-- Add this for the dropdown combo + ], + providers: [], + bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- Needed to allow Web Components like igx-combo +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { NgForm } from '@angular/forms'; +import { + AzureMapsImageryStyle, + IgxAzureMapsImagery, + IgxGeographicMapComponent, + IgxGeographicTileSeriesComponent +} from 'igniteui-angular-maps'; +import { + IgxDialogComponent, + IgxSelectComponent +} from 'igniteui-angular'; +import { MapRegion, MapUtility } from './MapUtility'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + standalone: false +}) +export class AppComponent implements OnInit, AfterViewInit { + + @ViewChild('map', { static: false }) map!: IgxGeographicMapComponent; + @ViewChild('tileSeries', { static: false }) tileSeries!: IgxGeographicTileSeriesComponent; + @ViewChild('dialog', { static: false }) dialog!: IgxDialogComponent; + @ViewChild('styleSelect', { static: false }) styleSelect!: IgxSelectComponent; + + // Bound to the input in the dialog + public apiKeyInputValue: string = ''; + + public azureTile!: IgxAzureMapsImagery; + public azureBackground!: IgxAzureMapsImagery; + public apiKey?: string; + public styleChangeTimeout?: number; + + public styleOptions: string[] = []; + public selectedStyle!: string; + public previewImageSrc: string = ''; + public isMapHidden = true; + + public styleConfig: Record void }> = { + Satellite: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_satellite.png", zoom: () => this.zoomUS() }, + Road: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_road.png", zoom: () => this.zoomUS() }, + DarkGrey: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_darkgrey.png", zoom: () => this.zoomUS() }, + TerraOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_terra_overlay.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + HybridRoadOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/AzureHybridRoad.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + HybridDarkGreyOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_hybriddarkgrey.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + LabelsRoadOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_labelsroad.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + LabelsDarkGreyOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_labelsdarkgrey.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + TrafficDelayOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_trafficdelay.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + TrafficAbsoluteOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_traffic_absolute.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + TrafficReducedOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_traffic_light.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + TrafficRelativeOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_traffic_relative.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + WeatherInfraredOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_weather_Infrared_road.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomUS() }, + WeatherRadarOverlay: { placeholder: "https://dl.infragistics.com/x/img/maps/azure_weather_radar.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomUS() } + }; + + ngOnInit(): void { + // Preload preview images + Object.values(this.styleConfig).forEach(cfg => new Image().src = cfg.placeholder); + + // Populate dropdown options + default style + this.styleOptions = Object.keys(this.styleConfig); + this.selectedStyle = this.styleOptions[0]; + this.previewImageSrc = this.styleConfig[this.selectedStyle].placeholder; + } + + ngAfterViewInit(): void { + // We'll initialize tile imagery after the user sets the API key + // Open dialog automatically after view initializes + setTimeout(() => { + if (this.dialog) { + this.dialog.open(); + } + }); + } + + public openDialog() { + this.dialog.open(); + } + + private zoomUS() { + if (this.map) MapUtility.navigateTo(this.map, MapRegion.UnitedStates); + } + + private zoomNY() { + if (this.map) { + this.map.zoomToGeographic({ + left: -74.2591, + top: 40.9176, + width: -73.7004 - (-74.2591), + height: 40.4774 - 40.9176 + }); + } + } + + private setApiKey(key: string) { + this.apiKey = key; + + // create azureTile & background if not yet + if (!this.azureTile) { + this.azureTile = new IgxAzureMapsImagery(); + this.tileSeries.tileImagery = this.azureTile; + } + if (!this.azureBackground) { + this.azureBackground = new IgxAzureMapsImagery(); + this.azureBackground.imageryStyle = AzureMapsImageryStyle.DarkGrey; + this.map.backgroundContent = this.azureBackground; + } + + this.azureTile.apiKey = key; + this.azureBackground.apiKey = key; + } + + showMap() { + this.isMapHidden = false; + } + + public onSubmit(form: NgForm) { + const key = this.apiKeyInputValue; + if (!key) return; + + this.setApiKey(key); + if (this.selectedStyle) this.updateAzureMap(this.selectedStyle); + this.showMap(); + // Close the dialog first, then reset form after a tick + setTimeout(() => { + this.dialog.close(); + form.resetForm(); + }); + } + + public onReset(form: NgForm) { + this.apiKey = undefined; + this.apiKeyInputValue = ''; + if (this.azureTile) this.azureTile.apiKey = ''; + if (this.azureBackground) this.azureBackground.apiKey = ''; + this.previewImageSrc = this.styleConfig[this.selectedStyle].placeholder; + + setTimeout(() => { + this.dialog.close(); + form.resetForm(); + }); + } + + public onStyleChange(value: string) { + const cfg = this.styleConfig[value]; + if (!cfg) return; + + this.previewImageSrc = cfg.placeholder; + + if (this.apiKey) { + if (this.styleChangeTimeout) clearTimeout(this.styleChangeTimeout); + this.styleChangeTimeout = window.setTimeout(() => this.updateAzureMap(value), 30); + } + } + + private updateAzureMap(styleName: string) { + if (!this.azureTile || !this.azureBackground) return; + + const cfg = this.styleConfig[styleName]; + if (!cfg) return; + + this.azureTile.imageryStyle = + AzureMapsImageryStyle[styleName as keyof typeof AzureMapsImageryStyle]; + + this.azureBackground.imageryStyle = cfg.background ?? AzureMapsImageryStyle.DarkGrey; + cfg.zoom(); + } +} +``` +```html +
+ + +
+ + + + + {{ s }} + + +
+ + + +
+
+

Azure Key

+
+ +
+ + +
+ +
+ + +
+
+ + + +
+ Map Imagery + + + +
+
+``` +```scss +:host { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + padding: 0; +} + +/* === Controls === */ +.controls-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + justify-content: center; + position: relative; + z-index: 10; /* stay above map */ + padding: 8px 0; +} + +/* === Map Container === */ +.map-container { + flex: 1 1 auto; /* expand to fill available space */ + display: flex; + flex-direction: column; + position: relative; + width: 100%; + height: 100%; + overflow: hidden; +} + +/* Map expands full width/height */ +.map-container igx-geographic-map { + flex: 1 1 auto; + width: 100%; + height: 100%; + position: absolute; + inset: 0; + z-index: 0; +} + +/* === Placeholder Image === */ +.map-container img.placeholder { + position: absolute; + top: 50%; + left: 50%; + width: 950px; + max-width: 900px; + height: auto; + transform: translate(-50%, -50%); + object-fit: contain; + z-index: 1; + pointer-events: none; /* clicks go through */ +} + +/* === Utility Classes === */ +.hidden { + display: none !important; +} + +.show { + display: inline !important; +} + +.dialog-container { + display: flex; + align-items: center; + + igx-icon { + margin-right: 8px; + } +} + +::ng-deep igx-dialog.custom-dialog { + width: 400px; + height: auto; +} +``` + + +## Angular Displaying Imagery from Azure Maps - Code Example + +The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) class. + +```html + + +``` + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxAzureMapsImagery } from 'igniteui-angular-maps'; +// ... +const tileSource = new IgxAzureMapsImagery(); +tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY"; +tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or +tileSource.imageryStyle = AzureMapsImageryStyle.TerraOverlay; // or +tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc. + +this.map.backgroundContent = tileSource; +``` + +## Angular Overlaying Imagery from Azure Maps - Overview + +When working with the [`IgxGeographicTileSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html), you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain. + +- **Base Styles**: Satellite, Road, Terra, and DarkGrey provide the core background tiles. +- **Overlay Styles**: Traffic and Weather imagery (e.g., `TrafficRelativeOverlay`, `WeatherRadarOverlay`) are designed to be layered on top of a base style by assigning them to a tile series. +- **Hybrid Styles**: Variants like `HybridRoadOverlay` and `HybridDarkGreyOverlay` already combine a base style with overlays (labels, roads, etc.), so you don’t need to manage multiple layers manually. + +This design allows you to build richer maps, for example: + +- Displaying **Satellite imagery** with a **TrafficOverlay** to highlight congestion on real-world images. +- Using **Terra** with **WeatherRadarOverlay** to visualize terrain with precipitation. +- Applying **DarkGrey** with **LabelsRoadOverlay** for a dashboard-friendly, contrast-heavy view. + +Azure Traffic Tile Series With Background + +
+ +## Angular Overlaying Imagery from Azure Maps - Code Example + +The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) and [`IgxGeographicTileSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) classes. + +```html + + + +``` + +```ts +export class AppComponent implements AfterViewInit { + @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent; + @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent; + + public azureImagery!: IgxAzureMapsImagery; + public azureKey: string = ""; + + ngAfterViewInit(): void { + // Update TileSeries + const overlay = new IgxAzureMapsImagery(); + overlay.apiKey = this.azureKey; + overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay; + this.tileSeries.tileImagery = overlay; + + // Update Map Background + this.azureImagery = new IgxAzureMapsImagery(); + this.azureImagery.apiKey = this.azureKey; + this.azureImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey; + this.map.backgroundContent = this.azureImagery; + } +} +``` + +## Properties + +The following table summarizes properties of the [`IgxAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) class: + +| Property Name | Property Type | Description | +|----------------|-----------------|---------------| +|[`apiKey`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#apiKey)|string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| +|[`imageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following [`AzureMapsImageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| + +## API References + +- [`AzureMapsImageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) +- [`IgxAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-bing-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-bing-imagery.md new file mode 100644 index 000000000..cf10d1b3e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-bing-imagery.md @@ -0,0 +1,83 @@ +--- +title: Angular Map | Data Visualization Tools | Displaying Bing Imagery | Infragistics +_description: Use Infragistics' Angular to display imagery from Microsoft Bing Maps. View Ignite UI for Angular map tutorials! +_keywords: Angular map, bing maps, Ignite UI for Angular, Infragistics, imagery tile source, map background +_license: commercial +mentionedTypes: ["XamGeographicMap", "BingMapsMapImagery"] +_tocName: Displaying Bing Imagery +_premium: true +--- + +# Angular Displaying Imagery from Bing Maps + +NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. + +For more details: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + +The Angular [`IgxBingMapsMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the [`IgxBingMapsMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class. + +## Angular Displaying Imagery from Bing Maps Example + + + +\Angular Bing Maps Imagery + +
+ +## Code Snippet + +The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxBingMapsMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class. + +```html + + +``` + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxBingMapsMapImagery } from 'igniteui-angular-maps'; +// ... +const tileSource = new IgxBingMapsMapImagery(); +tileSource.apiKey = "YOUR_BING_MAPS_API_KEY"; +tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or +tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or +tileSource.imageryStyle = BingMapsImageryStyle.Road; + +// resolving BingMaps uri based on HTTP protocol of hosting website +let tileUri = tileSource.actualBingImageryRestUri; +const isHttpSecured = window.location.toString().startsWith("https:"); +if (isHttpSecured) { + tileUri = tileUri.replace("http:", "https:"); +} else { + tileUri = tileUri.replace("https:", "http:"); +} +tileSource.bingImageryRestUri = tileUri; + +this.map.backgroundContent = tileSource; +``` + +## Properties + +The following table summarized properties of the [`IgxBingMapsMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class: + +| Property Name | Property Type | Description | +|----------------|-----------------|---------------| +|[`apiKey`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#apiKey)|string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| +|[`imageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#imageryStyle)|[`BingMapsImageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html)|Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following [`BingMapsImageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html) enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| +|[`bingImageryRestUri`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#bingImageryRestUri)|string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| +|[`cultureName`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#cultureName)|string|Represents a property for setting the culture name for the tile source.| +|[`isDeferredLoad`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#isDeferredLoad)|boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| +|[`isInitialized`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#isInitialized)|boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| +|[`subDomains`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#subDomains)|`SubDomainsCollection`|Represents an image collection of URI sub domains| +|[`tilePath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html#tilePath)|string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| + +## API References + +- [`BingMapsImageryStyle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.bingmapsimagerystyle.html) +- [`IgxBingMapsMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-esri-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-esri-imagery.md new file mode 100644 index 000000000..d62dd686f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-esri-imagery.md @@ -0,0 +1,140 @@ +--- +title: Angular Map | Data Visualization Tools | Displaying ESRI Imagery | Infragistics +_description: Use Infragistics' Angular to display imagery from ESRI maps. View Ignite UI for Angular map tutorials! +_keywords: Angular map, ESRI, Ignite UI for Angular, Infragistics, imagery tile source, map background +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: Displaying Esri Imagery +_premium: true +--- + +# Angular Displaying Imagery from Esri Maps + +The [`IgxArcGISOnlineMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. + +## Angular Displaying Imagery from Esri Maps Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxArcGISOnlineMapImagery } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { EsriStyle, EsriUtility } from "./EsriUtility"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + constructor() { + } + + public ngAfterViewInit(): void { + const tileSource = new IgxArcGISOnlineMapImagery(); + tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap); + // or + // tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer"; + this.map.backgroundContent = tileSource; + + this.map.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.7, height: 0.7}); + } +} +``` +```html +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Code Snippet + +The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxArcGISOnlineMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) class. + +```html + + +``` + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; +// ... +public geoMap: IgxGeographicMapComponent; + +const tileSource = new IgxArcGISOnlineMapImagery(); +tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"; + +this.geoMap.backgroundContent = tileSource; +``` + +## Esri Utility + +Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers. + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps'; +import { EsriUtility, EsriStyle } from './EsriUtility'; +// ... +public geoMap: IgxGeographicMapComponent; + +const tileSource = new IgxArcGISOnlineMapImagery(); +tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap); + +this.geoMap.backgroundContent = tileSource; +``` + +## API References + +- [`IgxArcGISOnlineMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxarcgisonlinemapimagery.html) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-heat-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-heat-imagery.md new file mode 100644 index 000000000..cd2f02a37 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-heat-imagery.md @@ -0,0 +1,284 @@ +--- +title: Angular Map | Data Visualization Tools | Infragistics +_description: Use Infragistics' Angular JavaScript map to display heat map imagery. Check out Ignite UI for Angular map demos! +_keywords: Angular map, heat map imagery, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "ShapefileConverter", "HeatTileGenerator", "GeographicTileSeries"] +_tocName: Displaying Heat Imagery +_premium: true +--- + +# Angular Displaying Heat Imagery + +The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the `ShapeFileRecord` that are generated by a [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) by loading geo-spatial data by loading shape files to a tile series. + +It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic. + +## Angular Displaying Heat Imagery Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ChangeDetectionStrategy, ViewChild } from "@angular/core"; +import { IgxHeatTileGenerator } from "igniteui-angular-core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicTileSeriesComponent } from "igniteui-angular-maps"; +import { IgxTileGeneratorMapImagery } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + public tileImagery: IgxTileGeneratorMapImagery; + + constructor() { + this.tileImagery = new IgxTileGeneratorMapImagery(); + + const sds: IgxShapeDataSource = new IgxShapeDataSource(); + sds.importCompleted.subscribe((s, e) => { + const data = sds.getPointData(); + const lat: number[] = []; + const lon: number[] = []; + const val: number[] = []; + + for (let i = 0; i < data.length; i++) { + const item = data[i]; + for (let j = 0; j < item.points.length; j++) { + const pointsList = item.points[j]; + for (let k = 0; k < pointsList.length; k++) { + lat.push(pointsList[k].y); + lon.push(pointsList[k].x); + } + } + const value = parseInt(item.fieldValues["POP2010"], 10); + if (value >= 0) { + val.push(value); + } else { + val.push(0); + } + } + + // generating heat map imagery tiles + const gen = new IgxHeatTileGenerator(); + gen.xValues = lon; + gen.yValues = lat; + gen.values = val; + gen.blurRadius = 6; + gen.maxBlurRadius = 20; + gen.useBlurRadiusAdjustedForZoom = true; + gen.minimumColor = "rgba(100, 255, 0, 0.5)"; + gen.maximumColor = "rgba(255, 255, 0, 0.5)"; + gen.useGlobalMinMax = true; + gen.useGlobalMinMaxAdjustedForZoom = true; + gen.useLogarithmicScale = true; + gen.useWebWorkers = true; + // gen.webWorkerInstance = new Worker(); + // gen.webWorkerInstance = new Worker("./HeatmapWorker", { type: "module" }); + gen.webWorkerInstance = new Worker(new URL('./HeatmapWorker', import.meta.url), { type: "module" }); + + gen.scaleColors = [ + "rgba(0, 0, 255, .251)", "rgba(0, 255, 255, .3765)", + "rgba(50,205,50, .2675)", "rgba(255, 255, 0, .7059)", + "rgba(255, 0, 0, .7843)" + ]; + this.tileImagery.tileGenerator = gen; + + // generating heat map series + const series = new IgxGeographicTileSeriesComponent(); + series.name = "heatMapSeries"; + series.tileImagery = this.tileImagery; + + // add heat map series to the map + this.map.series.add(series); + }); + + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/AmericanCities.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/AmericanCities.dbf"; + sds.dataBind(); + } + + public ngAfterViewInit(): void { + this.map.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 }); + } +} +``` +```html +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +When a [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) loads its shape files, it converts that data into [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) objects. These objects can be retrieved from the `GetPointData()` method of the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) and can then be used to create a heat-map through usage of a [`IgxTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html) object with a [`IgxHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) assigned to its `TileGenerator` property. This [`IgxTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html) can then be used in a [`IgxGeographicTileSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) as its [`tileImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html#tileImagery) source. + +The [`IgxHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) object works such that it has three value paths, [`xValues`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#xValues), [`yValues`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#yValues) and [`values`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#values). As an example of how these could be used, in the case of a shape file that has information about population, you could consider the [`xValues`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#xValues) to be longitude, [`yValues`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#yValues) to be latitude, and [`values`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#values) to be the population data. Each of these properties takes a `number[]`. + +The display of the geographic tile series when using the heat-map functionality can be customized by setting the [`minimumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#minimumColor) and [`maximumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#maximumColor) properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the [`values`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#values) property of the `HeatTileGenerator.` You can further customize this by setting the `ScaleColors` property of the generator to contain a collection of strings that describe colors, as this will tell the [`IgxHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) what colors to use for the displayed values in the map. It is also possible to customize how colors in your `ScaleColors` collection blur together by using the [`blurRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#blurRadius), [`maxBlurRadius`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#maxBlurRadius), and [`useBlurRadiusAdjustedForZoom`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useBlurRadiusAdjustedForZoom) properties. + +The [`IgxHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) can also use a logarithmic scale. If you want to use this, you can set the [`useLogarithmicScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useLogarithmicScale) property to **true**. + +## Web Worker + +The [`IgxHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) also has support for web workers to do the heavy lifting of the loading of the tile imagery from your shape file on a separate thread. This can greatly improve the performance of your geographic map when using the heat-map functionality. In order to use a web worker with the generator, you can set the [`useWebWorkers`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useWebWorkers) property to **true** and then set the [`webWorkerInstance`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#webWorkerInstance) property to an instance of your web worker. + + + +```ts +// heatworker.worker.ts +import { HeatTileGeneratorWebWorker } from 'igniteui-angular-core'; + +const worker: Worker = self as any; +worker.onmessage = HeatTileGeneratorWebWorker.onmessage; +HeatTileGeneratorWebWorker.postmessage = heatWorkerPostMessage; +function heatWorkerPostMessage() { + (self as any).postMessage.apply(self, Array.prototype.slice.call(arguments)); +} +HeatTileGeneratorWebWorker.start(); +export default {} as typeof Worker & (new () => Worker); +``` + +## Dependencies + + + +```ts +import { IgxHeatTileGenerator } from 'igniteui-angular-core'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; +``` + +## Creating Heatmap + +The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component: + + + +```html + + + +``` + +```ts +@ViewChild("map", { static: true }) +public map: IgxGeographicMapComponent; +public data: any[]; +public tileImagery: IgxTileGeneratorMapImagery; +// ... +constructor() { + this.data = this.initData(); + + this.tileImagery = new IgxTileGeneratorMapImagery(); + + const con: IgxShapeDataSource = new IgxShapeDataSource(); + con.importCompleted.subscribe((s, e) => { + const data = con.getPointData(); + const lat: number[] = []; + const lon: number[] = []; + const val: number[] = []; + for (let i = 0; i < data.length; i++) { + const item = data[i]; + for (let j = 0; j < item.points.length; j++) { + const pointsList = item.points[j]; + for (let k = 0; k < pointsList.length; k++) { + lat.push(pointsList[k].y); + lon.push(pointsList[k].x); + } + } + const value = item.fieldValues["POP_2010"]; + if (value >= 0) { + val.push(value); + } else { + val.push(0); + } + } + + const gen = new IgxHeatTileGenerator(); + gen.xValues = lon; + gen.yValues = lat; + gen.values = val; + gen.blurRadius = 6; + gen.maxBlurRadius = 20; + gen.useBlurRadiusAdjustedForZoom = true; + gen.minimumColor = "rgba(100,255, 0, 0.3922)"; + gen.maximumColor = "rgba(255, 255, 0, 0.9412)"; + gen.useGlobalMinMax = true; + gen.useGlobalMinMaxAdjustedForZoom = true; + gen.useLogarithmicScale = true; + gen.useWebWorkers = true; + gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" }); + gen.scaleColors = [ + "rgba(0, 0, 255, 64)", + "rgba(0, 255, 255, 96)", + "rgba(0, 255, 0, 160)", + "rgba(255, 255, 0, 180)", + "rgba(255, 0, 0, 200)" + ]; + + this.tileImagery.tileGenerator = gen; + }); + con.shapefileSource = "assets/Shapes/AmericanCities.shp"; + con.databaseSource = "assets/Shapes/AmericanCities.dbf"; + con.dataBind(); +} +``` + +## API References + +- [`IgxGeographicTileSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html) +- [`IgxHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html) +- [`maximumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#maximumColor) +- [`minimumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#minimumColor) +- [`IgxShapefileRecord`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapefilerecord.html) +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html) +- [`tileGenerator`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxtilegeneratormapimagery.html#tileGenerator) +- [`tileImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographictileseriescomponent.html#tileImagery) +- [`useBlurRadiusAdjustedForZoom`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useBlurRadiusAdjustedForZoom) +- [`useLogarithmicScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxheattilegenerator.html#useLogarithmicScale) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-osm-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-osm-imagery.md new file mode 100644 index 000000000..687da0b56 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-display-osm-imagery.md @@ -0,0 +1,117 @@ +--- +title: Angular Map | Data Visualization Tools | Displaying Open Street Maps Imagery | Infragistics +_description: Use Infragistics' Angular to display imagery from OSM maps. View Ignite UI for Angular map tutorials! +_keywords: Angular map, OSM, Ignite UI for Angular, Infragistics, imagery tile source, map background +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: Displaying OSM Imagery +_premium: true +--- + +# Angular Displaying Imagery from Open Street Maps + +The Angular [`IgxOpenStreetMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxopenstreetmapimagery.html) is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. +By the default, the Ignite UI for Angular map component already displays geographic imagery from the Open Street Maps. Therefore, there is no need to configure the control to display geographic imagery from the Open Street Maps. + +## Angular Displaying Imagery from Open Street Maps Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxOpenStreetMapImagery } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + constructor() { + } + + public ngAfterViewInit(): void { + const tileSource = new IgxOpenStreetMapImagery(); + this.map.backgroundContent = tileSource; + this.map.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.7, height: 0.7}); + } +} +``` +```html +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Code Snippet + +This code example explicitly sets `BackgroundContent` of the map component to the [`IgxOpenStreetMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxopenstreetmapimagery.html) object which provides geographic imagery from OpenStreetMap© contributors. + +```html + + +``` + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps'; +// ... +public map: IgxGeographicMapComponent; + +const tileSource = new IgxOpenStreetMapImagery(); +this.map.backgroundContent = tileSource; +``` + +## API References + +- `BackgroundContent` +- [`IgxOpenStreetMapImagery`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxopenstreetmapimagery.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-navigation.md new file mode 100644 index 000000000..289b6f418 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-navigation.md @@ -0,0 +1,334 @@ +--- +title: Angular Map | Data Visualization Tools | Map Navigation | Infragistics +_description: Navigate Infragistics' Angular map by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Angular map's navigation capabilities! +_keywords: Angular map, navigation, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: Navigating Map Content +_premium: true +--- + +# Angular Navigating Map Content + +Navigation in the [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control is enabled by default and it allows zooming and panning of the map content. However, this behavior can be changed using the [`zoomable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomable) property. It is important to know that the map allows only synchronized zooming - scaling the map content with preserved aspect ratio. As result, it is not possible to scale the map content vertically without scaling it also horizontally and vice versa. + +## Angular Navigating Map Content Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild, ChangeDetectorRef } from "@angular/core"; +import { IgxArcGISOnlineMapImagery } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { MapUtility, MapRegion } from "./MapUtility"; +import { IgxRectChangedEventArgs } from "igniteui-angular-core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + public isRunning: boolean; + public regionType: string = "United States"; + @ViewChild("map", { static: true }) + public geoMap: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + + public geoRect: any; + public geoT: string; + public geoL: string; + public geoH: string; + public geoW: string; + + public winT: string; + public winL: string; + public winH: string; + public winW: string; + + public posHorizontal: number; + public posVertical: number; + public scale: number; + public mapHoverLongitude: string = "0.0°W"; + public mapHoverLatitude: string = "0.0°S"; + public mapHoverX: string = "0.0000"; + public mapHoverY: string = "0.0000"; + public mapHoverPixelX = "0 px"; + public mapHoverPixelY = "0 px"; + public navigationOptions: Element[] = []; + public navigationRegions: any = {}; + + constructor(private ref: ChangeDetectorRef) { + + const regions = MapUtility.getRegions(); + for (const key in regions) { + if (regions.hasOwnProperty(key)) { + const region = regions[key]; + const name = region.name; + this.navigationRegions[name] = region; + } + } + } + + public ngAfterViewInit(): void { + this.componentDidMount(); + + if (this.geoMap !== undefined) { + // console.log("ngAfterViewInit map"); + this.geoMap.actualWindowRectChanged.subscribe((e: IgxRectChangedEventArgs) => + this.onMapWindowRectChanged(this.geoMap, e) + ); + + this.geoMap.zoomToGeographic({ left: -134.5, top: 16.5, width: 70.0, height: 37.0 }); + + + } + } + + public onMapWindowRectChanged(geoMap: IgxGeographicMapComponent, e: any) { + + // converting window rect to geographic rect/region: + const geoRect: any = geoMap.getGeographicFromZoom(e.args.newRect); + geoRect.bottom = geoRect.top + geoRect.height; + geoRect.right = geoRect.left + geoRect.width; + // calculating center of geographic region + geoRect.longitude = geoRect.left + (geoRect.width / 2); + geoRect.latitude = geoRect.top + (geoRect.height / 2); + this.geoRect = geoRect; + + const h = geoMap.actualWindowPositionHorizontal + const v = geoMap.actualWindowPositionVertical; + const s = geoMap.actualWindowScale; + + this.geoT = "T: " + MapUtility.toLat(this.geoRect.top); + this.geoL = "L: " + MapUtility.toLng(this.geoRect.left); + this.geoH = "H: " + MapUtility.toLng(this.geoRect.height); + this.geoW = "W: " + MapUtility.toLng(this.geoRect.width); + + this.winT = "T: " + e.args.newRect.top.toFixed(4); + this.winL = "L: " + e.args.newRect.left.toFixed(4); + this.winH = "H: " + e.args.newRect.height.toFixed(4); + this.winW = "W: " + e.args.newRect.width.toFixed(4); + + this.posHorizontal = parseFloat(h.toFixed(4)); + this.posVertical = parseFloat(v.toFixed(4)); + this.scale = parseFloat(s.toFixed(4)); + + this.ref.detectChanges(); + } + + public onMapMouseMove = (e: any) => { + + const bounds = e.target.getBoundingClientRect(); + const relativeCoordinate = { + x: e.clientX - bounds.left, + y: e.clientY - bounds.top + }; + + const windowCoordinate = { + x: (e.clientX - bounds.left) / bounds.width, + y: (e.clientY - bounds.top) / bounds.height + }; + + // converting mouse pixel coordinate to geographic coordinate: + const geoCoordinate: any = this.geoMap.getGeographicPoint(relativeCoordinate); + + this.mapHoverLongitude = MapUtility.toLng(geoCoordinate.x); + this.mapHoverLatitude = MapUtility.toLat(geoCoordinate.y); + this.mapHoverX = windowCoordinate.x.toFixed(4); + this.mapHoverY = windowCoordinate.y.toFixed(4); + this.mapHoverPixelX = MapUtility.toPixel(relativeCoordinate.x); + this.mapHoverPixelY = MapUtility.toPixel(relativeCoordinate.y); + + this.ref.detectChanges(); + } + + public componentDidMount() { + const elem = document.getElementById('map'); + elem.addEventListener('mousemove', this.onMapMouseMove, false); + } + + public onSelectionChanged = (e: any) => { + if (this.geoMap === undefined) return; + + const name = e.target.value.toString(); + const region = this.navigationRegions[name]; + + this.geoMap.zoomToGeographic(region); + } +} +``` +```html +
+ +
+ + +
+ +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + + +
+
+ + +
+
+ + + + + + +
+
+ + + + + + +
+
+ +
+
+ +
Imagery Tiles: in ESRI/ArcGIS
+ +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Geographic Coordinates + +You navigate map content within geographic region bound by these coordinates: + +- horizontally from 180°E (negative) to 180°W (positive) longitudes +- vertically from 85°S (negative) to 85°N (positive) latitudes + +This code snippet shows how navigate the map using geographic coordinates: + +## Window Coordinates + +Also, you can navigate map content within window rectangle bound by these relative coordinates: + +- horizontally from 0.0 to 1.0 values +- vertically from 0.0 to 1.0 values + +This code snippet shows how navigate the map using relative window coordinates: + +## Properties + +The following table summarizes properties that can be used in navigation of the [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control: + +| Property Name | Property Type | Description | +|----------------|-----------------|---------------| +|[`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | +|[`windowScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#windowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) property | +|[`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) property. | +|[`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) property. | +|[`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | +|[`actualWindowScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#actualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect) property | +|[`actualWindowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect) property. | +|[`actualWindowPositionVertical`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect) property. | + +## API References + +- [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#actualWindowRect) +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#windowRect) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`zoomable`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#zoomable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-shape-styling-utility.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-shape-styling-utility.md new file mode 100644 index 000000000..1f1a0eeea --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-shape-styling-utility.md @@ -0,0 +1,259 @@ +--- +title: Angular Map | Shape Map Resources | Infragistics +_description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos! +_keywords: Angular map, shape styling, conditional formatting, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: Shape Styling Utility +_premium: true +--- + +# Angular Shape Styling Utility + +The resource topic provides implementation of an utility that helps with styling UI elements of [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) in Angular [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) component. + +## Required Imports + +```ts +import { IgxGeographicShapeSeries } from 'igniteui-angular-maps'; +import { Style } from 'igniteui-angular-core'; +``` + +## Utility Implementation + +```ts +export abstract class ShapeStyling { + public defaultStroke = 'black'; + public defaultFill = 'gray'; + public defaultThickness = 0.5; + public defaultOpacity = 1.0; + public defaultStyle = new Style(); + + constructor() { + this.defaultStyle = new Style(); + this.defaultStyle.stroke = this.defaultStroke; + this.defaultStyle.fill = this.defaultFill; + this.defaultStyle.opacity = this.defaultOpacity; + this.defaultStyle.strokeThickness = this.defaultThickness; + } + + public abstract generate(record: any): Style; + + public getValue(itemMemberPath: string, item: any): any { + let itemValue = null; + + if (item.fieldValues !== undefined) { // .hasOwnProperty("fieldValues")) { + if (item.fieldsNames.indexOf(itemMemberPath) >= 0) { + itemValue = item.fieldValues[itemMemberPath]; + } else { + console.log('WARNING: ShapefileRecord does not have ' + itemMemberPath + ' in fieldValues property'); + } + } else if (item.hasOwnProperty(itemMemberPath)) { + itemValue = item[itemMemberPath]; + } else { + console.log('WARNING: Shape data item does not have ' + itemMemberPath + ' property'); + } + return itemValue; + } +} + +export class ShapeRandomStyling extends ShapeStyling { + + public shapeThickness = 0.5; + public shapeOpacity = 1.0; + public shapeStrokeColors = ['black']; + public shapeFillColors = ['red', 'orange', 'yellow']; + + public styleMappings = new Map(); + + public generate(record: any): Style { + const id = record.fieldValues.Name || this.getRandomValue(0, 1000); + + if (this.styleMappings.has(id)) { + return this.styleMappings.get(id); + } else { + const randStroke = this.getRandomItem(this.shapeStrokeColors); + const randFill = this.getRandomItem(this.shapeFillColors); + const shapeStyle = new Style(); + shapeStyle.stroke = this.shapeStrokeColors[randStroke]; + shapeStyle.fill = this.shapeFillColors[randFill]; + shapeStyle.opacity = this.shapeOpacity; + shapeStyle.strokeThickness = this.shapeThickness; + this.styleMappings.set(id, shapeStyle); + return shapeStyle; + } + } + + public getRandomValue(min: number, max: number): number { + return Math.round(min + (Math.random() * (max - min))); + } + public getRandomItem(array: any[]): any { + return this.getRandomValue(0, array.length - 1); + } +} + +export class ShapeRangeStyling extends ShapeStyling { + + public itemMemberPath = ''; + public ranges: ShapeRange[] = []; + + constructor() { + super(); + this.ranges.push({ minimum: 0, maximum: 50, fill: 'yellow'} ); + this.ranges.push({ minimum: 0, maximum: 100, fill: 'red'} ); + } + + public generate(record: any): Style { + let itemValue = this.getValue(this.itemMemberPath, record); + if (itemValue === null) { + return this.defaultStyle; + } + + for (const range of this.ranges) { + if (range.minimum <= itemValue && itemValue < range.maximum) { + const shapeStyle = new Style(); + shapeStyle.opacity = range.opacity || this.defaultOpacity; + shapeStyle.fill = range.fill || this.defaultFill; + shapeStyle.stroke = range.stroke || this.defaultStroke; + shapeStyle.strokeThickness = range.strokeThickness || this.defaultThickness; + return shapeStyle; + } + } + return this.defaultStyle; + } +} + +export class ShapeRange { + + public minimum: number; + public maximum: number; + + public opacity?: number; + public fill: string; + public stroke?: string; + public strokeThickness?: number; +} + +export class ShapeScaleStyling extends ShapeStyling { + + public shapeThickness = 0.5; + public shapeOpacity = 1.0; + public shapeStrokeColors = ['black']; + public shapeFillColors = ['red', 'orange', 'yellow']; + + public itemMemberPath = ''; + public itemMinimumValue = 0; + public itemMaximumValue = 1000; + + public isLogarithmic = true; + + public generate(record: any): Style { + + let itemValue = this.getValue(this.itemMemberPath, record); + if (itemValue === null) { + return this.defaultStyle; + } + + let fillColor = this.defaultFill; + let strokeColor = this.defaultStroke; + let scaleValue = this.getScaledValue(itemValue); + + if (!Number.isNaN(scaleValue)) { + let fillIndex = Math.round(scaleValue * (this.shapeFillColors.length - 1)); + let strokeIndex = Math.round(scaleValue * (this.shapeStrokeColors.length - 1)); + fillColor = this.shapeFillColors[fillIndex]; + strokeColor = this.shapeStrokeColors[strokeIndex]; + } + + const shapeStyle = new Style(); + shapeStyle.fill = fillColor; + shapeStyle.stroke = strokeColor; + shapeStyle.strokeThickness = this.shapeThickness; + shapeStyle.opacity = this.shapeOpacity; + return shapeStyle; + } + + public getScaledValue(value: number): number { + + if (!Number.isFinite(value) || Number.isNaN(value)) { return Number.NaN; } + + let min = !Number.isFinite(this.itemMinimumValue) || Number.isNaN(this.itemMinimumValue) ? 0 : this.itemMinimumValue; + let max = !Number.isFinite(this.itemMaximumValue) || Number.isNaN(this.itemMaximumValue) ? 1000 : this.itemMaximumValue; + + if (value < min || value > max) { return Number.NaN; } + + if (this.isLogarithmic) { + return this.getLogarithmicValue(min, max, value); + } else { + return this.getLinearValue(min, max, value); + } + } + + public getLogarithmicValue(min: number, max: number, value: number) { + if (!Number.isFinite(value)) { return Number.NaN; } + + let newMin = Math.log10(min); + let newMax = Math.log10(max); + let newVal = Math.log10(value); + + if (!Number.isFinite(newMin)) { newMin = 0.0; } + if (!Number.isFinite(newMax)) { newMax = 1000; } + + if (newVal < 0) { newVal = 0.0; } + + return this.getLinearValue(newMin, newMax, newVal); + } + + public getLinearValue(min: number, max: number, value: number) { + + if (!Number.isFinite(value)) { return Number.NaN; } + + // if the value is outside the range + if (value < min || value > max) { return Number.NaN; } + + let scaledValue = (value - min) / (max - min); + return scaledValue; + } +} + +export class ShapeComparisonStyling extends ShapeStyling { + + public itemMemberPath = ''; + public itemMappings: ShapeComparison[] = []; + + public generate(record: any): Style { + + let itemValue = this.getValue(this.itemMemberPath, record); + if (itemValue === null || itemValue === "") { + return this.defaultStyle; + } + + for (const mapping of this.itemMappings) { + if (mapping.itemValue === itemValue) { + const shapeStyle = new Style(); + shapeStyle.opacity = mapping.opacity || this.defaultOpacity; + shapeStyle.fill = mapping.fill || this.defaultFill; + shapeStyle.stroke = mapping.stroke || this.defaultStroke; + shapeStyle.strokeThickness = mapping.strokeThickness || this.defaultThickness; + return shapeStyle; + } + } + + return this.defaultStyle; + } +} + +export class ShapeComparison { + public itemValue: string; + + public opacity?: number; + public fill: string; + public stroke?: string; + public strokeThickness?: number; +} +``` + +## API References + +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-connections.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-connections.md new file mode 100644 index 000000000..b828f2bbe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-connections.md @@ -0,0 +1,146 @@ +--- +title: Angular Map | World Connections | Data Source | Infragistics +_description: Use Infragistics' Angular JavaScript map data utility to generate locations of airports, flight paths and geographic gridlines. View Ignite UI for Angular map demos! +_keywords: Angular map, map data, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: World Connections +_premium: true +--- + +# Angular World Connections + +The resource topic provides implementation of data utility for generating locations of airports, flight paths, and geographic gridlines. You can use these data sources as reference point for creating your own geographic data. Note that this utility depends on [WorldUtil](geo-map-resources-world-util.md) and [WorldLocations](geo-map-resources-world-locations.md) scripts. + +## Code Snippet + +```ts +import WorldLocations from "./WorldLocations"; +import WorldUtils from "./WorldUtils" + +export default class WorldConnections { + + private static airports: any[] = []; + private static airportsLookup = new Map(); + + private static flights: any[] = []; + private static flightsLookup: string[] = []; + + public static getFlights(): any[] { + if (this.flights.length == 0) this.init(); + return this.flights; + } + + public static getAirports(): any[] { + if (this.airports.length == 0) this.init(); + return this.airports; + } + + public static comparePopulation(a: any, b: any): number { + if (a.pop < b.pop) { + return 1; + } + if (a.pop > b.pop) { + return -1; + } + return 0; + } + + public static init() { + + const cities: any[] = WorldLocations.getAll(); + cities.sort(this.comparePopulation); + let count = cities.length; + let minDistance = 200; + let maxDistance = 9000; + let flightsLimit = 1500; + let flightsCount = 0; + + for (let i = 0; i < count; i++) { + let origin = cities[i]; + let connectionsCount = 0; + let connectionsMax = Math.min(20, Math.round(origin.pop * 4)); + + for (let ii = 0; ii < count; ii++) + { + let dest = cities[ii]; + if (origin.name != dest.name) + { + let route = [origin.name, dest.name].sort().join('-'); + let routeIsValid = this.flightsLookup.indexOf(route) == -1; + let distance = Math.round(WorldUtils.calcDistance(origin, dest)); + let distanceIsValid = distance > minDistance && distance < maxDistance; + let pass = Math.round((Math.random() * 200)) + 150; + let time = distance / 800; + let trafficIsValid = origin.pop > 3 && dest.pop > 1.0; + + if (routeIsValid && distanceIsValid && trafficIsValid) { + this.flightsLookup.push(route); + + let paths = WorldUtils.calcPaths(origin, dest); + flightsCount++; + connectionsCount++; + let id = origin.name.substring(0,3).toUpperCase() + "-" + flightsCount; + let flight = { id: id, origin: origin, dest: dest, time: time, passengers: pass, distance: distance, points: paths }; + this.flights.push(flight); + } + if (connectionsCount > connectionsMax) { + break; + } + } + } + if (flightsCount > flightsLimit) { + break; + } + } + + for (const flight of this.flights) { + this.addAirport(flight.origin); + this.addAirport(flight.dest); + } + + this.airports = Array.from(this.airportsLookup.values()); + } + + private static addAirport(city: any) { + if (this.airportsLookup.has(city.name)) { + this.airportsLookup.get(city.name).flights += 1; + } else { + let airport = Object.assign({flights: 1}, city ); + this.airportsLookup.set(city.name, airport); + } + } + + public static getGridlines(): any[] { + let gridlines = []; + // longitude lines + for (let lon = -180; lon <= 180; lon += 30) { + + let line: any[] = [{x: lon, y: -90}, {x: lon, y: 90}]; + let points: any[] = [line]; + + let coordinateLine = {points: points, + degree: lon, + direction: lon > 0 ? "E" : "W" + }; + gridlines.push(coordinateLine); + } + // latitude lines + for (let lat = -90; lat <= 90; lat += 30) { + + let line: any[] = [{x: -180, y: lat}, {x: 180, y: lat}]; + let points: any[] = [line]; + let coordinateLine = {points: points, + degree: lat, + direction: lat > 0 ? "N" : "S" + }; + gridlines.push(coordinateLine); + } + return gridlines; + } +} +``` + +## API References + +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-locations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-locations.md new file mode 100644 index 000000000..899ddd27e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-locations.md @@ -0,0 +1,662 @@ +--- +title: Angular Map | World Locations | Data Source | Infragistics +_description: Use Infragistics' Angular JavaScript map data utility to generate geographic locations of cities and capitals of countries. View Ignite UI for Angular map demos! +_keywords: Angular map, map data, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: World Locations +_premium: true +--- + +# Angular World Locations + +The resource topic provides implementation of data utility for generating geographic locations of cities and capitals of countries. + +## Code Snippet + +```ts +export default class WorldLocations { + + private static locations: any[] = []; + private static capitals: any[] = []; + private static cities: any[] = []; + + // get location of cities and capitals + public static getAll(): any[] { + if (this.locations.length == 0) this.init(); + return this.locations; + } + + // get location of cities + public static getCities(): any[] { + if (this.cities.length == 0) this.init(); + return this.cities; + } + + // get location of capitals + public static getCapitals(): any[] { + if (this.capitals.length == 0) this.init(); + return this.capitals; + } + + public static init() { + // console.log("WorldLocations init"); + this.locations = [ + { cap: false, pop: 0.468, lat: 68.9635467529297, lon: 33.0860404968262, country: "Russia", name: "Murmansk" }, + { cap: false, pop: 0.416, lat: 64.5206680297852, lon: 40.6461601257324, country: "Russia", name: "Arkhangelsk" }, + { cap: false, pop: 5.825, lat: 59.9518890380859, lon: 30.4533271789551, country: "Russia", name: "Saint Petersburg" }, + { cap: false, pop: 0.152, lat: 59.5709991455078, lon: 150.780014038086, country: "Russia", name: "Magadan" }, + { cap: false, pop: 1.160, lat: 58.0002365112305, lon: 56.2324638366699, country: "Russia", name: "Perm'" }, + { cap: false, pop: 1.620, lat: 56.8465423583984, lon: 60.6101303100586, country: "Russia", name: "Yekaterinburg" }, + { cap: false, pop: 2.025, lat: 56.2896766662598, lon: 43.9406700134277, country: "Russia", name: "Nizhniy Novgorod" }, + { cap: false, pop: 1.800, lat: 55.8628082275391, lon: -4.26994752883911, country: "UK", name: "Glasgow" }, + { cap: false, pop: 1.140, lat: 55.7330055236816, lon: 49.1454658508301, country: "Russia", name: "Kazan'" }, + { cap: false, pop: 1.325, lat: 55.1450004577637, lon: 61.3926124572754, country: "Russia", name: "Chelyabinsk" }, + { cap: false, pop: 1.175, lat: 55.063304901123, lon: 73.2502899169922, country: "Russia", name: "Omsk" }, + { cap: false, pop: 1.600, lat: 55.0321006774902, lon: 82.9428482055664, country: "Russia", name: "Novosibirsk" }, + { cap: false, pop: 1.100, lat: 54.8217353820801, lon: 56.0961265563965, country: "Russia", name: "Ufa" }, + { cap: true, pop: 0.582, lat: 54.6885681152344, lon: 25.2759666442871, country: "Lithuania", name: "Vilnius" }, + { cap: false, pop: 0.685, lat: 54.5869255065918, lon: -5.90966033935547, country: "UK", name: "Belfast" }, + { cap: false, pop: 0.909, lat: 54.3662033081055, lon: 18.624942779541, country: "Poland", name: "Gdansk" }, + { cap: true, pop: 1.650, lat: 53.8999366760254, lon: 27.5755672454834, country: "Byelarus", name: "Minsk" }, + { cap: false, pop: 1.540, lat: 53.8087120056152, lon: -1.49752748012543, country: "UK", name: "Leeds" }, + { cap: false, pop: 2.225, lat: 53.5711212158203, lon: 10.027606010437, country: "Germany", name: "Hamburg" }, + { cap: false, pop: 2.775, lat: 53.479663848877, lon: -2.26177859306335, country: "UK", name: "Manchester" }, + { cap: false, pop: 0.710, lat: 53.3740425109863, lon: -1.46298921108246, country: "UK", name: "Sheffield" }, + { cap: true, pop: 1.140, lat: 53.3415603637695, lon: -6.25734663009644, country: "Ireland", name: "Dublin" }, + { cap: false, pop: 1.505, lat: 53.1385955810547, lon: 50.0961799621582, country: "Russia", name: "Samara" }, + { cap: false, pop: 0.800, lat: 53.0801048278809, lon: 8.85762596130371, country: "Germany", name: "Bremen" }, + { cap: true, pop: 5.061, lat: 52.5162734985352, lon: 13.3275728225708, country: "Germany", name: "Berlin" }, + { cap: false, pop: 2.675, lat: 52.4927520751953, lon: -1.86334776878357, country: "UK", name: "Birmingham" }, + { cap: true, pop: 1.860, lat: 52.3730430603027, lon: 4.89483308792114, country: "Netherlands", name: "Amsterdam" }, + { cap: false, pop: 0.626, lat: 52.3174324035645, lon: 104.247833251953, country: "Russia", name: "Irkutsk" }, + { cap: true, pop: 2.323, lat: 52.244945526123, lon: 21.0118789672852, country: "Poland", name: "Warsaw" }, + { cap: false, pop: 1.110, lat: 51.925594329834, lon: 4.48515224456787, country: "Netherlands", name: "Rotterdam" }, + { cap: false, pop: 1.061, lat: 51.7779083251953, lon: 19.4764404296875, country: "Poland", name: "Lodz" }, + { cap: false, pop: 0.568, lat: 51.5138130187988, lon: 7.46641826629639, country: "Germany", name: "Dortmund" }, + { cap: false, pop: 0.515, lat: 51.4893379211426, lon: 6.77530431747437, country: "Germany", name: "Duisburg" }, + { cap: true, pop: 11.100, lat: 51.4879112243652, lon: -0.177998125553131, country: "UK", name: "london" }, + { cap: false, pop: 3.867, lat: 51.3540420532227, lon: 7.12243509292603, country: "Germany", name: "Essen" }, + { cap: false, pop: 0.700, lat: 51.3493309020996, lon: 12.3980741500854, country: "Germany", name: "Leipzig" }, + { cap: false, pop: 1.100, lat: 51.207347869873, lon: 4.42605447769165, country: "Belgium", name: "Antwerpen" }, + { cap: false, pop: 0.640, lat: 51.1218185424805, lon: 17.0381278991699, country: "Poland", name: "Wroclaw" }, + { cap: false, pop: 0.465, lat: 51.0475540161133, lon: 3.73629117012024, country: "Belgium", name: "Gent" }, + { cap: false, pop: 0.670, lat: 51.0456809997559, lon: 13.7053575515747, country: "Germany", name: "Dresden" }, + { cap: false, pop: 0.671, lat: 51.0299987792969, lon: -114.050003051758, country: "Canada", name: "Calgary" }, + { cap: false, pop: 1.760, lat: 50.9423446655273, lon: 6.93487167358398, country: "Germany", name: "Koln" }, + { cap: true, pop: 2.385, lat: 50.8370475769043, lon: 4.36761236190796, country: "Belgium", name: "Bruxelles" }, + { cap: false, pop: 0.570, lat: 50.7345581054688, lon: 7.09981870651245, country: "Germany", name: "Bonn" }, + { cap: false, pop: 1.020, lat: 50.6320838928223, lon: 3.06290125846863, country: "France", name: "Lille" }, + { cap: false, pop: 0.750, lat: 50.6225280761719, lon: 5.56943559646606, country: "Belgium", name: "Liege" }, + { cap: true, pop: 2.900, lat: 50.4481582641602, lon: 30.5021114349365, country: "Ukraine", name: "Kiev" }, + { cap: false, pop: 1.855, lat: 50.129997253418, lon: 8.66816711425781, country: "Germany", name: "Frankfurt am Main" }, + { cap: true, pop: 1.325, lat: 50.1058959960938, lon: 14.4565200805664, country: "Czech Repub", name: "Prague" }, + { cap: false, pop: 0.828, lat: 50.0622406005859, lon: 19.9450569152832, country: "Poland", name: "Krakow" }, + { cap: false, pop: 0.625, lat: 49.9211692810059, lon: -97.1244430541992, country: "Canada", name: "Winnipeg" }, + { cap: false, pop: 0.614, lat: 49.879207611084, lon: 73.20263671875, country: "Kazakhstan", name: "Karaganda" }, + { cap: false, pop: 0.790, lat: 49.8373107910156, lon: 24.0345211029053, country: "Ukraine", name: "Lvov" }, + { cap: false, pop: 0.450, lat: 49.2029800415039, lon: 16.6162452697754, country: "Czech Repub", name: "Brno" }, + { cap: true, pop: 9.775, lat: 48.8815536499023, lon: 2.43283271789551, country: "France", name: "Paris" }, + { cap: false, pop: 1.360, lat: 48.7102470397949, lon: 44.4836311340332, country: "Russia", name: "Volgograd" }, + { cap: false, pop: 0.400, lat: 48.5834350585938, lon: 7.76799440383911, country: "France", name: "Strasbourg" }, + { cap: false, pop: 0.335, lat: 48.2975959777832, lon: 14.2939014434814, country: "Austria", name: "Linz" }, + { cap: true, pop: 1.875, lat: 48.2021179199219, lon: 16.3209857940674, country: "Austria", name: "Vienna" }, + { cap: false, pop: 1.955, lat: 48.1409759521484, lon: 11.5429534912109, country: "Germany", name: "Munchen" }, + { cap: false, pop: 2.200, lat: 48.0401458740234, lon: 37.7370529174805, country: "Ukraine", name: "Donets'k" }, + { cap: true, pop: 0.548, lat: 47.928596496582, lon: 106.912353515625, country: "Mongolia", name: "Ulaanbaatar" }, + { cap: true, pop: 2.565, lat: 47.5146255493164, lon: 19.0942497253418, country: "Hungary", name: "Budapest" }, + { cap: false, pop: 1.150, lat: 47.3440055847168, lon: 123.964965820313, country: "China", name: "Qiqihar" }, + { cap: false, pop: 0.185, lat: 47.2654609680176, lon: 11.3499822616577, country: "Austria", name: "Innsbruck" }, + { cap: false, pop: 1.165, lat: 47.2320976257324, lon: 39.6880378723145, country: "Russia", name: "Rostov-na-Donu" }, + { cap: false, pop: 0.465, lat: 47.2194328308105, lon: -1.56156122684479, country: "France", name: "Nantes" }, + { cap: false, pop: 0.325, lat: 47.0649223327637, lon: 15.4311008453369, country: "Austria", name: "Graz" }, + { cap: true, pop: 0.299, lat: 46.9482078552246, lon: 7.44573640823364, country: "Switzerland", name: "Bern" }, + { cap: false, pop: 0.603, lat: 46.802074432373, lon: -71.2449340820313, country: "Canada", name: "Quebec" }, + { cap: false, pop: 1.185, lat: 46.5722007751465, lon: 30.6839370727539, country: "Ukraine", name: "Odessa" }, + { cap: false, pop: 2.670, lat: 45.7552185058594, lon: 126.622634887695, country: "China", name: "Harbin" }, + { cap: false, pop: 1.275, lat: 45.7470817565918, lon: 4.85540056228638, country: "France", name: "Lyon" }, + { cap: false, pop: 2.921, lat: 45.541015625, lon: -73.6535339355469, country: "Canada", name: "Montreal" }, + { cap: false, pop: 3.750, lat: 45.4733810424805, lon: 9.19046401977539, country: "Italy", name: "Milano" }, + { cap: false, pop: 0.420, lat: 45.4247741699219, lon: 12.370719909668, country: "Italy", name: "Venezia" }, + { cap: true, pop: 0.819, lat: 45.3742179870605, lon: -75.650749206543, country: "Canada", name: "Ottawa" }, + { cap: false, pop: 1.550, lat: 45.0748748779297, lon: 7.66642618179321, country: "Italy", name: "Torino" }, + { cap: false, pop: 2.012, lat: 44.924186706543, lon: -93.3077926635742, country: "US", name: "Minneapolis" }, + { cap: false, pop: 0.640, lat: 44.8414726257324, lon: -0.599498748779297, country: "France", name: "Bordeaux" }, + { cap: true, pop: 1.400, lat: 44.7996826171875, lon: 20.4125556945801, country: "Serbia", name: "Beograd" }, + { cap: true, pop: 2.250, lat: 44.4304847717285, lon: 26.1229763031006, country: "Romania", name: "Bucuresti" }, + { cap: false, pop: 1.740, lat: 43.8813171386719, lon: 125.312652587891, country: "China", name: "Changchung" }, + { cap: false, pop: 1.170, lat: 43.8502159118652, lon: 126.56706237793, country: "China", name: "Jilin" }, + { cap: false, pop: 1.040, lat: 43.7826652526855, lon: 87.5865173339844, country: "China", name: "Urumqi" }, + { cap: false, pop: 0.640, lat: 43.7815742492676, lon: 11.207745552063, country: "Italy", name: "Firenze" }, + { cap: false, pop: 3.427, lat: 43.7207679748535, lon: -79.4126358032227, country: "Canada", name: "Toronto" }, + { cap: false, pop: 0.541, lat: 43.5999603271484, lon: 1.43798303604126, country: "France", name: "Toulouse" }, + { cap: false, pop: 0.985, lat: 43.2821578979492, lon: -2.97378325462341, country: "Spain", name: "Bilbao" }, + { cap: true, pop: 1.190, lat: 43.2550621032715, lon: 76.9126281738281, country: "Kazakhstan", name: "Almaty" }, + { cap: false, pop: 0.816, lat: 43.2104644775391, lon: -77.635612487793, country: "US", name: "Rochester" }, + { cap: false, pop: 1.375, lat: 43.0679473876953, lon: -87.9907379150391, country: "US", name: "Milwaukee" }, + { cap: false, pop: 1.900, lat: 43.0552520751953, lon: 141.345474243164, country: "Japan", name: "Sapporo" }, + { cap: false, pop: 1.483, lat: 42.8986625671387, lon: -78.8484344482422, country: "US", name: "Buffalo" }, + { cap: true, pop: 1.205, lat: 42.7072639465332, lon: 23.3318710327148, country: "Bulgaria", name: "Sofia" }, + { cap: false, pop: 4.692, lat: 42.3943138122559, lon: -83.0789260864258, country: "US", name: "Detroit" }, + { cap: false, pop: 3.972, lat: 42.3752975463867, lon: -71.1025848388672, country: "US", name: "Boston" }, + { cap: false, pop: 1.270, lat: 41.8591575622559, lon: 123.905570983887, country: "China", name: "Fushun" }, + { cap: false, pop: 7.717, lat: 41.826545715332, lon: -87.6413040161133, country: "US", name: "Chicago" }, + { cap: false, pop: 3.840, lat: 41.8021621704102, lon: 123.383056640625, country: "China", name: "Shenyang" }, + { cap: true, pop: 1.460, lat: 41.721809387207, lon: 44.7831268310547, country: "Georgia", name: "Tbilisi" }, + { cap: false, pop: 0.575, lat: 41.6512641906738, lon: -0.878205060958862, country: "Spain", name: "Zaragoza" }, + { cap: false, pop: 2.218, lat: 41.3907165527344, lon: -81.7275085449219, country: "US", name: "Cleveland" }, + { cap: true, pop: 0.211, lat: 41.3316535949707, lon: 19.8318042755127, country: "Albania", name: "Tirane" }, + { cap: false, pop: 1.300, lat: 41.1152458190918, lon: 122.977012634277, country: "China", name: "Anshan" }, + { cap: false, pop: 5.750, lat: 41.0659561157227, lon: 29.0060691833496, country: "Turkey", name: "Istanbul" }, + { cap: false, pop: 0.682, lat: 40.693920135498, lon: -111.89217376709, country: "US", name: "Salt Lake City" }, + { cap: false, pop: 2.219, lat: 40.4972038269043, lon: -79.9970855712891, country: "US", name: "Pittsburgh" }, + { cap: true, pop: 4.650, lat: 40.4422187805176, lon: -3.69096946716309, country: "Spain", name: "Madrid" }, + { cap: true, pop: 2.020, lat: 40.3242988586426, lon: 49.8162384033203, country: "Azerbaijan", name: "Baku" }, + { cap: true, pop: 1.315, lat: 40.2080230712891, lon: 44.5326690673828, country: "Armenia", name: "Yerevan" }, + { cap: false, pop: 0.964, lat: 40.0446434020996, lon: -82.9927062988281, country: "US", name: "Columbus" }, + { cap: true, pop: 2.400, lat: 39.929328918457, lon: 32.853271484375, country: "Turkey", name: "Ankara" }, + { cap: false, pop: 5.209, lat: 39.9275512695313, lon: -75.2182235717773, country: "US", name: "Philadelphia" }, + { cap: true, pop: 6.450, lat: 39.906192779541, lon: 116.388038635254, country: "China", name: "Beijing" }, + { cap: false, pop: 0.246, lat: 39.9044532775879, lon: 41.2918243408203, country: "Turkey", name: "Erzurum" }, + { cap: false, pop: 0.366, lat: 39.6575813293457, lon: 66.9476013183594, country: "Uzbekistan", name: "Samarkand" }, + { cap: false, pop: 1.060, lat: 39.6154441833496, lon: 118.180213928223, country: "China", name: "Tangshan" }, + { cap: false, pop: 1.270, lat: 39.4709167480469, lon: -0.367400944232941, country: "Spain", name: "Valencia" }, + { cap: false, pop: 1.960, lat: 39.3218841552734, lon: -76.6183776855469, country: "US", name: "Baltimore" }, + { cap: false, pop: 0.305, lat: 39.2251434326172, lon: 9.10890960693359, country: "Italy", name: "Cagliari" }, + { cap: false, pop: 1.480, lat: 39.1480102539063, lon: -84.4770202636719, country: "US", name: "Cincinnati" }, + { cap: false, pop: 4.880, lat: 39.1284141540527, lon: 117.18522644043, country: "China", name: "Tianjin" }, + { cap: true, pop: 1.600, lat: 39.0285148620605, lon: 125.757514953613, country: "Korea D P Rp", name: "Pyongyang" }, + { cap: false, pop: 1.272, lat: 38.9941177368164, lon: -94.6265640258789, country: "US", name: "Kansas City" }, + { cap: true, pop: 3.221, lat: 38.8909111022949, lon: -76.9538345336914, country: "US", name: "Washington D.C." }, + { cap: false, pop: 2.203, lat: 38.6388854980469, lon: -90.3419799804688, country: "US", name: "St. Louis" }, + { cap: false, pop: 0.866, lat: 38.5670166015625, lon: -121.422706604004, country: "US", name: "Sacramento" }, + { cap: false, pop: 0.971, lat: 38.0809783935547, lon: 46.2901191711426, country: "Iran", name: "Tabriz" }, + { cap: false, pop: 1.190, lat: 38.0770950317383, lon: 114.559707641602, country: "China", name: "Shijiazhuang" }, + { cap: true, pop: 0.398, lat: 37.9504203796387, lon: 58.3901329040527, country: "Turkmenistan", name: "Ashkhabad" }, + { cap: false, pop: 1.660, lat: 37.8930549621582, lon: 112.551704406738, country: "China", name: "Taiyuan" }, + { cap: true, pop: 15.850, lat: 37.542350769043, lon: 126.935249328613, country: "Korea Rep", name: "Seoul" }, + { cap: false, pop: 0.945, lat: 37.3726463317871, lon: -5.97083187103271, country: "Spain", name: "Sevilla" }, + { cap: false, pop: 0.778, lat: 36.9999809265137, lon: 35.3243637084961, country: "Turkey", name: "Adana" }, + { cap: false, pop: 0.796, lat: 36.8792915344238, lon: -76.2685699462891, country: "US", name: "Norfolk" }, + { cap: true, pop: 1.225, lat: 36.8188133239746, lon: 10.1659603118896, country: "Tunisia", name: "Tunis" }, + { cap: false, pop: 0.830, lat: 36.7914962768555, lon: 118.062042236328, country: "China", name: "Zibo" }, + { cap: false, pop: 1.460, lat: 36.6555366516113, lon: 116.967056274414, country: "China", name: "Jinan" }, + { cap: false, pop: 0.571, lat: 36.3355674743652, lon: 43.1371269226074, country: "Iraq", name: "Mosul" }, + { cap: false, pop: 1.464, lat: 36.2900695800781, lon: 59.596851348877, country: "Iran", name: "Mashhad" }, + { cap: false, pop: 1.216, lat: 36.2155456542969, lon: 37.1592826843262, country: "Syria", name: "Aleppo" }, + { cap: false, pop: 1.270, lat: 36.1134300231934, lon: 103.599594116211, country: "China", name: "Lanzhou" }, + { cap: false, pop: 2.206, lat: 35.8635368347168, lon: 128.591384887695, country: "Korea Rep", name: "Taegu" }, + { cap: true, pop: 6.400, lat: 35.7744750976563, lon: 51.4476509094238, country: "Iran", name: "Tehran" }, + { cap: true, pop: 23.620, lat: 35.6830558776855, lon: 139.809188842773, country: "Japan", name: "Tokyo" }, + { cap: false, pop: 1.089, lat: 35.5045700073242, lon: 139.72721862793, country: "Japan", name: "Kawasaki" }, + { cap: false, pop: 0.742, lat: 35.4895896911621, lon: -97.5302963256836, country: "US", name: "Oklahoma City" }, + { cap: false, pop: 2.993, lat: 35.437385559082, lon: 139.619659423828, country: "Japan", name: "Yokohama" }, + { cap: false, pop: 0.479, lat: 35.2058143615723, lon: -80.8356857299805, country: "US", name: "Charlotte" }, + { cap: false, pop: 3.800, lat: 35.1578674316406, lon: 129.0546875, country: "Korea Rep", name: "Pusan" }, + { cap: false, pop: 4.800, lat: 35.1549224853516, lon: 136.920593261719, country: "Japan", name: "Nagoya" }, + { cap: false, pop: 0.853, lat: 35.1147270202637, lon: -90.0003280639648, country: "US", name: "Memphis" }, + { cap: false, pop: 1.479, lat: 35.0091285705566, lon: 135.754821777344, country: "Japan", name: "Kyoto" }, + { cap: false, pop: 1.170, lat: 34.757682800293, lon: 113.641777038574, country: "China", name: "Zhengzhou" }, + { cap: false, pop: 0.431, lat: 34.7338752746582, lon: 36.7181739807129, country: "Syria", name: "Homs" }, + { cap: false, pop: 0.740, lat: 34.6713485717773, lon: 112.361236572266, country: "China", name: "Luoyang" }, + { cap: false, pop: 15.040, lat: 34.6355285644531, lon: 135.519119262695, country: "Japan", name: "Osaka" }, + { cap: true, pop: 1.179, lat: 34.5309066772461, lon: 69.1367568969727, country: "Afghanistan", name: "Kabul" }, + { cap: false, pop: 1.575, lat: 34.377555847168, lon: 132.444778442383, country: "Japan", name: "Hiroshima" }, + { cap: false, pop: 2.050, lat: 34.265697479248, lon: 108.883361816406, country: "China", name: "Xian" }, + { cap: false, pop: 0.535, lat: 34.0435676574707, lon: -4.99554777145386, country: "Morocco", name: "Fes" }, + { cap: false, pop: 1.963, lat: 33.7957000732422, lon: -84.3492279052734, country: "US", name: "Atlanta" }, + { cap: true, pop: 0.204, lat: 33.7181510925293, lon: 73.060546875, country: "Pakistan", name: "Islamabad" }, + { cap: false, pop: 0.836, lat: 33.6058044433594, lon: 73.0437469482422, country: "Pakistan", name: "Rawalpindi" }, + { cap: true, pop: 1.850, lat: 33.5193023681641, lon: 36.3134536743164, country: "Syria", name: "Damascus" }, + { cap: false, pop: 1.482, lat: 33.5090217590332, lon: -112.110260009766, country: "US", name: "Phoenix" }, + { cap: true, pop: 3.841, lat: 33.3340377807617, lon: 44.397834777832, country: "Iraq", name: "Baghdad" }, + { cap: false, pop: 2.727, lat: 32.763729095459, lon: -96.663688659668, country: "US", name: "Dallas" }, + { cap: false, pop: 0.987, lat: 32.6513900756836, lon: 51.6791877746582, country: "Iran", name: "Esfahan" }, + { cap: false, pop: 2.290, lat: 32.0483665466309, lon: 118.768905639648, country: "China", name: "Nanjing" }, + { cap: true, pop: 1.250, lat: 31.9493827819824, lon: 35.9329071044922, country: "Jordan", name: "Amman" }, + { cap: false, pop: 0.595, lat: 31.6308898925781, lon: 74.8715515136719, country: "India", name: "Amritsar" }, + { cap: false, pop: 3.025, lat: 31.5450534820557, lon: 74.3406753540039, country: "Pakistan", name: "Lahore" }, + { cap: false, pop: 1.104, lat: 31.4089508056641, lon: 73.0834579467773, country: "Pakistan", name: "Faisalabad" }, + { cap: false, pop: 9.300, lat: 31.2478694915771, lon: 121.47265625, country: "China", name: "Shanghai" }, + { cap: false, pop: 1.810, lat: 30.6700687408447, lon: 104.071273803711, country: "China", name: "Chengdu" }, + { cap: false, pop: 3.490, lat: 30.5724983215332, lon: 114.279220581055, country: "China", name: "Wuhan" }, + { cap: false, pop: 0.617, lat: 30.503490447998, lon: 47.7608642578125, country: "Iraq", name: "Al Basra" }, + { cap: false, pop: 1.270, lat: 30.2526245117188, lon: 120.165077209473, country: "China", name: "Hangzhou" }, + { cap: true, pop: 9.300, lat: 30.0779113769531, lon: 31.2507972717285, country: "Egypt", name: "Cairo" }, + { cap: false, pop: 1.185, lat: 29.9563789367676, lon: -90.0986862182617, country: "US", name: "New Orleans" }, + { cap: false, pop: 2.755, lat: 29.7718296051025, lon: -95.407112121582, country: "US", name: "Houston" }, + { cap: false, pop: 0.084, lat: 29.6507034301758, lon: 91.1320877075195, country: "China", name: "Lhasa" }, + { cap: false, pop: 2.450, lat: 29.5441036224365, lon: 106.522689819336, country: "China", name: "Chongqing" }, + { cap: false, pop: 0.968, lat: 29.4299221038818, lon: -98.5245742797852, country: "US", name: "San Antonio" }, + { cap: false, pop: 1.030, lat: 28.6712398529053, lon: 115.88941192627, country: "China", name: "Nanchang" }, + { cap: true, pop: 0.273, lat: 28.5687255859375, lon: 77.2167510986328, country: "India", name: "New Delhi" }, + { cap: false, pop: 7.200, lat: 28.5264587402344, lon: 77.2243728637695, country: "India", name: "Delhi" }, + { cap: false, pop: 1.190, lat: 28.1976413726807, lon: 112.968482971191, country: "China", name: "Changsha" }, + { cap: true, pop: 0.320, lat: 27.7120170593262, lon: 85.3129501342773, country: "Nepal", name: "Kathmandu" }, + { cap: true, pop: 0.012, lat: 27.44260597229, lon: 89.6673278808594, country: "Bhutan", name: "Thimbu" }, + { cap: false, pop: 1.025, lat: 26.9051132202148, lon: 75.8012771606445, country: "India", name: "Jaipur" }, + { cap: false, pop: 1.060, lat: 26.8494281768799, lon: 80.9197235107422, country: "India", name: "Lucknow" }, + { cap: false, pop: 1.010, lat: 26.5719413757324, lon: 106.700302124023, country: "China", name: "Guiyang" }, + { cap: false, pop: 1.875, lat: 26.4578304290771, lon: 80.3178634643555, country: "India", name: "Kanpur" }, + { cap: false, pop: 0.890, lat: 26.0710163116455, lon: 119.303520202637, country: "China", name: "Fuzhou" }, + { cap: false, pop: 2.827, lat: 25.8321304321289, lon: -80.2702178955078, country: "US", name: "Miami" }, + { cap: false, pop: 2.015, lat: 25.6773529052734, lon: -100.317085266113, country: "Mexico", name: "Monterrey" }, + { cap: false, pop: 1.025, lat: 25.6138973236084, lon: 85.1353454589844, country: "India", name: "Patna" }, + { cap: false, pop: 0.800, lat: 25.3801860809326, lon: 68.3664703369141, country: "Pakistan", name: "Hyderabad" }, + { cap: false, pop: 0.925, lat: 25.2820110321045, lon: 82.9563369750977, country: "India", name: "Benares" }, + { cap: true, pop: 0.310, lat: 25.2036418914795, lon: 51.4972343444824, country: "Qatar", name: "Doha" }, + { cap: false, pop: 1.280, lat: 25.0510330200195, lon: 102.702125549316, country: "China", name: "Kunming" }, + { cap: true, pop: 6.130, lat: 25.0350914001465, lon: 121.506729125977, country: "Taiwan", name: "Taipei" }, + { cap: false, pop: 0.715, lat: 24.1436424255371, lon: 120.670280456543, country: "Taiwan", name: "T`ai-chung" }, + { cap: true, pop: 3.430, lat: 23.7099189758301, lon: 90.4071426391602, country: "Bangladesh", name: "Dhaka" }, + { cap: false, pop: 3.050, lat: 23.0961952209473, lon: 113.293609619141, country: "China", name: "Guangzhou" }, + { cap: false, pop: 2.400, lat: 23.0397911071777, lon: 72.5668640136719, country: "India", name: "Ahmadabad" }, + { cap: false, pop: 0.648, lat: 22.8426475524902, lon: 89.5582427978516, country: "Bangladesh", name: "Khulna" }, + { cap: false, pop: 11.100, lat: 22.5435371398926, lon: 88.3342208862305, country: "India", name: "Calcutta" }, + { cap: false, pop: 0.435, lat: 22.2432346343994, lon: -97.8426284790039, country: "Mexico", name: "Tampico" }, + { cap: false, pop: 0.533, lat: 21.975944519043, lon: 96.0841522216797, country: "Burma", name: "Mandalay" }, + { cap: false, pop: 0.550, lat: 21.4273815155029, lon: 39.8148384094238, country: "Saudi Arabia", name: "Mecca" }, + { cap: false, pop: 1.302, lat: 21.1557579040527, lon: 79.089111328125, country: "India", name: "Nagpur" }, + { cap: true, pop: 1.500, lat: 21.0319480895996, lon: 105.81990814209, country: "Vietnam", name: "Hanoi" }, + { cap: false, pop: 0.385, lat: 20.8613586425781, lon: 106.679794311523, country: "Vietnam", name: "Haiphong" }, + { cap: false, pop: 0.400, lat: 20.8218688964844, lon: -89.552864074707, country: "Mexico", name: "Merida" }, + { cap: false, pop: 2.325, lat: 20.6735916137695, lon: -103.343795776367, country: "Mexico", name: "Guadalajara" }, + { cap: false, pop: 0.207, lat: 19.6157131195068, lon: 37.2196884155273, country: "Sudan", name: "Bur Sudan" }, + { cap: true, pop: 14.100, lat: 19.4270458221436, lon: -99.127571105957, country: "Mexico", name: "Mexico City" }, + { cap: false, pop: 1.055, lat: 19.0486316680908, lon: -98.1929473876953, country: "Mexico", name: "Puebla de Zaragoza" }, + { cap: false, pop: 1.775, lat: 18.5357475280762, lon: 73.8522720336914, country: "India", name: "Pune" }, + { cap: true, pop: 0.880, lat: 18.5266170501709, lon: -72.3431091308594, country: "Haiti", name: "Port-au-Prince" }, + { cap: true, pop: 1.775, lat: 18.4006156921387, lon: -66.0817565917969, country: "Puerto Rico", name: "San Juan" }, + { cap: true, pop: 0.770, lat: 18.0157127380371, lon: -76.7973022460938, country: "Jamaica", name: "Kingston" }, + { cap: false, pop: 2.750, lat: 17.3945465087891, lon: 78.4850311279297, country: "India", name: "Hyderabad" }, + { cap: true, pop: 2.800, lat: 16.8722229003906, lon: 96.1248931884766, country: "Burma", name: "Rangoon" }, + { cap: true, pop: 0.427, lat: 15.3614444732666, lon: 44.2095031738281, country: "Yemen", name: "Sanaa" }, + { cap: true, pop: 1.400, lat: 14.6180076599121, lon: -90.52490234375, country: "Guatemala", name: "Guatemala" }, + { cap: true, pop: 0.552, lat: 14.0990505218506, lon: -87.2030944824219, country: "Honduras", name: "Tegucigalpa" }, + { cap: true, pop: 6.450, lat: 13.7455711364746, lon: 100.552665710449, country: "Thailand", name: "Bangkok" }, + { cap: true, pop: 0.920, lat: 13.7014122009277, lon: -89.2002334594727, country: "El Salvador", name: "San Salvador" }, + { cap: true, pop: 0.398, lat: 13.6045436859131, lon: 2.08344984054565, country: "Niger", name: "Niamey" }, + { cap: false, pop: 4.475, lat: 13.0615034103394, lon: 80.2478256225586, country: "India", name: "Madras" }, + { cap: false, pop: 2.950, lat: 12.9747505187988, lon: 77.5877304077148, country: "India", name: "Bangalore" }, + { cap: true, pop: 0.646, lat: 12.6529502868652, lon: -7.98648166656494, country: "Mali", name: "Bamako" }, + { cap: true, pop: 0.682, lat: 12.1514730453491, lon: -86.2730331420898, country: "Nicaragua", name: "Managua" }, + { cap: true, pop: 0.700, lat: 11.564736366272, lon: 104.913192749023, country: "Cambodia", name: "Phnom Penh" }, + { cap: false, pop: 3.100, lat: 10.7591819763184, lon: 106.662452697754, country: "Vietnam", name: "Ho Chi Minh City" }, + { cap: false, pop: 0.891, lat: 10.6450433731079, lon: -71.6371459960938, country: "Venezuela", name: "Maracaibo" }, + { cap: true, pop: 3.600, lat: 10.4960489273071, lon: -66.8982849121094, country: "Venezuela", name: "Caracas" }, + { cap: false, pop: 0.498, lat: 10.0656652450562, lon: -69.3391952514648, country: "Venezuela", name: "Barquisimeto" }, + { cap: true, pop: 0.670, lat: 9.93047618865967, lon: -84.07861328125, country: "Costa Rica", name: "San Jose" }, + { cap: false, pop: 0.960, lat: 9.91398620605469, lon: 78.1217269897461, country: "India", name: "Madurai" }, + { cap: false, pop: 1.144, lat: 7.37884044647217, lon: 3.8952784538269, country: "Nigeria", name: "Ibadan" }, + { cap: false, pop: 0.409, lat: 7.08008003234863, lon: 125.613677978516, country: "Philippines", name: "Davao" }, + { cap: false, pop: 0.253, lat: 6.45053863525391, lon: 7.4920802116394, country: "Nigeria", name: "Enugu" }, + { cap: false, pop: 2.095, lat: 6.24114656448364, lon: -75.5920333862305, country: "Colombia", name: "Medellin" }, + { cap: true, pop: 1.250, lat: 5.55856275558472, lon: -0.200923636555672, country: "Ghana", name: "Accra" }, + { cap: true, pop: 1.950, lat: 5.32485723495483, lon: -4.02188682556152, country: "Ivory Coast", name: "Abidjan" }, + { cap: true, pop: 4.260, lat: 4.63021993637085, lon: -74.0805130004883, country: "Colombia", name: "Bogota" }, + { cap: true, pop: 0.474, lat: 4.3658561706543, lon: 18.5623416900635, country: "Cent Af Rep", name: "Bangui" }, + { cap: true, pop: 0.654, lat: 3.86512303352356, lon: 11.5136413574219, country: "Cameroon", name: "Yaounde" }, + { cap: false, pop: 1.374, lat: 3.58524203300476, lon: 98.6755981445313, country: "Indonesia", name: "Medan" }, + { cap: false, pop: 1.400, lat: 3.45685529708862, lon: -76.5224380493164, country: "Colombia", name: "Cali" }, + { cap: true, pop: 1.475, lat: 3.1502103805542, lon: 101.707672119141, country: "Malaysia", name: "Kuala Lumpur" }, + { cap: true, pop: 0.600, lat: 2.04117751121521, lon: 45.3441429138184, country: "Somalia", name: "Muqdisho" }, + { cap: false, pop: 0.283, lat: 0.519284904003143, lon: 25.1961479187012, country: "Zaire", name: "Kisangani" }, + { cap: true, pop: 1.050, lat: -0.229498133063316, lon: -78.524284362793, country: "Ecuador", name: "Quito" }, + { cap: false, pop: 0.179, lat: -3.75289535522461, lon: -73.1914901733398, country: "Peru", name: "Iquitos" }, + { cap: false, pop: 1.825, lat: -3.78332185745239, lon: -38.5889015197754, country: "Brazil", name: "Fortaleza" }, + { cap: true, pop: 0.586, lat: -4.28518676757813, lon: 15.2851486206055, country: "Congo", name: "Brazzaville" }, + { cap: false, pop: 0.291, lat: -5.89221096038818, lon: 22.4027786254883, country: "Zaire", name: "Kananga" }, + { cap: true, pop: 1.300, lat: -6.81735897064209, lon: 39.2533493041992, country: "Tanzania", name: "Dar es Salaam" }, + { cap: false, pop: 1.800, lat: -6.91243028640747, lon: 107.606903076172, country: "Indonesia", name: "Bandung" }, + { cap: false, pop: 2.625, lat: -8.08516788482666, lon: -34.9146385192871, country: "Brazil", name: "Recife" }, + { cap: false, pop: 0.155, lat: -12.7177352905273, lon: 13.464879989624, country: "Angola", name: "Benguela" }, + { cap: true, pop: 1.568, lat: -15.7921094894409, lon: -47.8977470397949, country: "Brazil", name: "Brasilia" }, + { cap: false, pop: 0.447, lat: -16.3975391387939, lon: -71.5227432250977, country: "Peru", name: "Arequipa" }, + { cap: true, pop: 0.993, lat: -16.4990062713623, lon: -68.1462478637695, country: "Bolivia", name: "La Paz" }, + { cap: false, pop: 0.990, lat: -16.7266998291016, lon: -49.254810333252, country: "Brazil", name: "Goiania" }, + { cap: false, pop: 0.442, lat: -17.7887916564941, lon: -63.1974182128906, country: "Bolivia", name: "Santa Cruz de La Sierra" }, + { cap: false, pop: 0.087, lat: -19.0421352386475, lon: -65.2558822631836, country: "Bolivia", name: "Sucre" }, + { cap: false, pop: 2.950, lat: -19.8517208099365, lon: -43.9090690612793, country: "Brazil", name: "Belo Horizonte" }, + { cap: false, pop: 10.150, lat: -22.7215728759766, lon: -43.4551773071289, country: "Brazil", name: "Rio de Janeiro" }, + { cap: false, pop: 15.175, lat: -23.5813045501709, lon: -46.6228981018066, country: "Brazil", name: "Sao Paulo" }, + { cap: false, pop: 1.065, lat: -23.9547004699707, lon: -46.3094940185547, country: "Brazil", name: "Santos" }, + { cap: true, pop: 0.095, lat: -24.6614418029785, lon: 25.7948017120361, country: "Botswana", name: "Gaborone" }, + { cap: false, pop: 1.700, lat: -25.4304790496826, lon: -49.2845077514648, country: "Brazil", name: "Curitiba" }, + { cap: true, pop: 0.960, lat: -25.7313461303711, lon: 28.2183723449707, country: "South Africa", name: "Pretoria" }, + { cap: true, pop: 1.070, lat: -25.9621543884277, lon: 32.5736923217773, country: "Mozambique", name: "Maputo" }, + { cap: false, pop: 3.650, lat: -26.1789569854736, lon: 28.0043087005615, country: "South Africa", name: "Johannesburg" }, + { cap: false, pop: 1.149, lat: -27.4539127349854, lon: 153.026489257813, country: "Australia", name: "Brisbane" }, + { cap: false, pop: 1.550, lat: -29.8363723754883, lon: 30.9421882629395, country: "South Africa", name: "Durban" }, + { cap: false, pop: 2.600, lat: -30.0395336151123, lon: -51.2079887390137, country: "Brazil", name: "Porto Alegre" }, + { cap: false, pop: 1.070, lat: -31.3162784576416, lon: -64.1798553466797, country: "Argentina", name: "Cordoba" }, + { cap: false, pop: 0.292, lat: -31.6168975830078, lon: -60.6978416442871, country: "Argentina", name: "Santa Fe" }, + { cap: false, pop: 0.650, lat: -32.8974380493164, lon: -68.8297348022461, country: "Argentina", name: "Mendoza" }, + { cap: false, pop: 1.045, lat: -32.9377365112305, lon: -60.6639404296875, country: "Argentina", name: "Rosario" }, + { cap: true, pop: 4.100, lat: -33.475025177002, lon: -70.6475143432617, country: "Chile", name: "Santiago" }, + { cap: false, pop: 0.690, lat: -33.8815765380859, lon: 25.4842987060547, country: "South Africa", name: "Port Elizabeth" }, + { cap: false, pop: 3.365, lat: -33.8897743225098, lon: 151.028198242188, country: "Australia", name: "Sydney" }, + { cap: true, pop: 10.750, lat: -34.6654014587402, lon: -58.4095916748047, country: "Argentina", name: "Buenos Aires" }, + { cap: true, pop: 0.271, lat: -35.349925994873, lon: 149.041625976563, country: "Australia", name: "Canberra" }, + { cap: false, pop: 0.850, lat: -36.893253326416, lon: 174.801055908203, country: "New Zealand", name: "Auckland" }, + { cap: false, pop: 2.833, lat: -37.8529586791992, lon: 145.075103759766, country: "Australia", name: "Melbourne" }, + { cap: false, pop: 0.224, lat: -38.7252731323242, lon: -62.2740669250488, country: "Argentina", name: "Bahia Blanca" }, + { cap: false, pop: 0.320, lat: -43.5489158630371, lon: 172.683654785156, country: "New Zealand", name: "Christchurch" }, + { cap: true, pop: 0.900, lat: 60.1964225769043, lon: 24.9766998291016, country: "Finland", name: "Helsinki" }, + { cap: false, pop: 0.310, lat: 34.745231628418, lon: 10.7592582702637, country: "Tunisia", name: "Sfax" }, + { cap: false, pop: 1.411, lat: 34.6638412475586, lon: 135.181838989258, country: "Japan", name: "Kobe" }, + { cap: false, pop: 0.490, lat: 31.7737464904785, lon: 35.2252197265625, country: "Israel", name: "Jerusalem" }, + { cap: false, pop: 0.616, lat: 10.1782207489014, lon: -68.0031127929688, country: "Venezuela", name: "Valencia" }, + { cap: false, pop: 1.255, lat: -2.20381617546082, lon: -79.9093933105469, country: "Ecuador", name: "Guayaquil" }, + { cap: false, pop: 4.054, lat: 37.7275123596191, lon: -122.308815002441, country: "US", name: "San Francisco" }, + { cap: false, pop: 0.630, lat: 55.8752517700195, lon: -3.29878330230713, country: "UK", name: "Edinburgh" }, + { cap: false, pop: 0.239, lat: 45.7002830505371, lon: 13.9328374862671, country: "Italy", name: "Trieste" }, + { cap: false, pop: 1.750, lat: 33.3099060058594, lon: 130.317184448242, country: "Japan", name: "Fukuoka" }, + { cap: false, pop: 1.525, lat: 33.6818656921387, lon: 130.797454833984, country: "Japan", name: "Kita Kyushu" }, + { cap: true, pop: 0.303, lat: 12.1041393280029, lon: 15.2408237457275, country: "Chad", name: "N'Djamena" }, + { cap: true, pop: 0.991, lat: 32.7516174316406, lon: 13.2118225097656, country: "Libya", name: "Tripoli" }, + { cap: false, pop: 1.550, lat: 38.4389190673828, lon: 27.2057685852051, country: "Turkey", name: "Izmir" }, + { cap: true, pop: 3.000, lat: -4.38867473602295, lon: 15.4692935943604, country: "Zaire", name: "Kinshasa" }, + { cap: false, pop: 0.978, lat: -34.9185371398926, lon: 138.870681762695, country: "Australia", name: "Adelaide" }, + { cap: true, pop: 8.600, lat: -6.29390430450439, lon: 106.762466430664, country: "Indonesia", name: "Jakarta" }, + { cap: false, pop: 1.025, lat: -7.02784442901611, lon: 110.444259643555, country: "Indonesia", name: "Semarang" }, + { cap: false, pop: 0.264, lat: -12.0435400009155, lon: -76.8356323242188, country: "Peru", name: "Callao" }, + { cap: false, pop: 1.200, lat: -1.60532903671265, lon: -48.316276550293, country: "Brazil", name: "Belem" }, + { cap: false, pop: 1.270, lat: 36.1483535766602, lon: 120.434127807617, country: "China", name: "Qingdao" }, + { cap: true, pop: 0.377, lat: 18.0017318725586, lon: 102.680236816406, country: "Laos", name: "Vientiane" }, + { cap: false, pop: 0.220, lat: 47.8011703491211, lon: 13.0908985137939, country: "Austria", name: "Salzburg" }, + { cap: true, pop: 0.698, lat: 45.8070755004883, lon: 15.9643859863281, country: "Croatia", name: "Zagreb" }, + { cap: true, pop: 0.273, lat: -3.26908373832703, lon: 29.5335865020752, country: "Burundi", name: "Bujumbura" }, + { cap: true, pop: 0.185, lat: 35.1650695800781, lon: 33.3851623535156, country: "Cyprus", name: "Nicosia" }, + { cap: true, pop: 0.182, lat: -2.11793518066406, lon: 29.9914855957031, country: "Rwanda", name: "Kigali" }, + { cap: true, pop: 0.233, lat: 46.068302154541, lon: 14.639612197876, country: "Slovenia", name: "Ljubljana" }, + { cap: true, pop: 0.109, lat: -29.2567100524902, lon: 27.8903884887695, country: "Lesotho", name: "Maseru" }, + { cap: true, pop: 0.133, lat: 49.740406036377, lon: 6.27325582504272, country: "Luxembourg", name: "Luxembourg" }, + { cap: false, pop: 0.770, lat: 51.903621673584, lon: 4.30062437057495, country: "Netherlands", name: "The Hague" }, + { cap: true, pop: 0.435, lat: 48.2745094299316, lon: 17.2698059082031, country: "Slovakia", name: "Bratislava" }, + { cap: false, pop: 0.201, lat: 52.1100006103516, lon: -106.629997253418, country: "Canada", name: "Saskatoon" }, + { cap: false, pop: 0.187, lat: 50.4099998474121, lon: -104.650001525879, country: "Canada", name: "Regina" }, + { cap: false, pop: 1.038, lat: 31.7800006866455, lon: -106.449996948242, country: "US", name: "El Paso" }, + { cap: false, pop: 0.636, lat: 30.3299999237061, lon: -81.6600036621094, country: "US", name: "Jacksonville" }, + { cap: false, pop: 0.002, lat: 51.3300018310547, lon: -80.7300033569336, country: "Canada", name: "Moosonee" }, + { cap: false, pop: 0.002, lat: 54.8600006103516, lon: -67.0100021362305, country: "Canada", name: "Schefferville" }, + { cap: false, pop: 0.008, lat: 53.310001373291, lon: -60.5499992370605, country: "Canada", name: "Goose Bay" }, + { cap: false, pop: 0.202, lat: -8.75, lon: -63.9000015258789, country: "Brazil", name: "Porto Velho" }, + { cap: false, pop: 0.185, lat: -13.6000003814697, lon: -71.8600006103516, country: "Peru", name: "Cuzco" }, + { cap: false, pop: 0.280, lat: -15.5500001907349, lon: -56.0499992370605, country: "Brazil", name: "Cuiaba" }, + { cap: false, pop: 0.220, lat: -27.3999996185303, lon: -58.9000015258789, country: "Argentina", name: "Resistencia" }, + { cap: false, pop: 0.032, lat: 16.7600002288818, lon: -3.00999999046326, country: "Mali", name: "Tombouctoo" }, + { cap: false, pop: 0.255, lat: 11.8800001144409, lon: 13.2600002288818, country: "Niger", name: "Maiduguri" }, + { cap: false, pop: 0.145, lat: -5.80999994277954, lon: 13.4499998092651, country: "Zaire", name: "Matadi" }, + { cap: false, pop: 0.203, lat: -12.7299995422363, lon: 15.7799997329712, country: "Angola", name: "Huambo" }, + { cap: false, pop: 0.145, lat: -28.6599998474121, lon: 24.8299999237061, country: "South Africa", name: "Kimberley" }, + { cap: false, pop: 0.320, lat: -33.0299987792969, lon: 27.8999996185303, country: "South Africa", name: "East london" }, + { cap: false, pop: 0.247, lat: -7.32999992370605, lon: 19, country: "Zaire", name: "Kahemba" }, + { cap: false, pop: 0.054, lat: -6.17999982833862, lon: 35.75, country: "Tanzania", name: "Dodoma" }, + { cap: false, pop: 0.019, lat: 68.3499984741211, lon: 17.2999992370605, country: "Norway", name: "Narvik" }, + { cap: false, pop: 0.160, lat: 34.4599990844727, lon: 62.2099990844727, country: "Afghanistan", name: "Herat" }, + { cap: false, pop: 0.006, lat: 55.8800010681152, lon: 37.75, country: "Russia", name: "Druzba" }, + { cap: false, pop: 0.146, lat: 39.4799995422363, lon: 76, country: "China", name: "Kashi" }, + { cap: false, pop: 9.415, lat: 24.9799995422363, lon: 121.529998779297, country: "Taiwan", name: "Chingmei" }, + { cap: false, pop: 0.166, lat: 16.4599990844727, lon: 107.699996948242, country: "Vietnam", name: "Hue" }, + { cap: false, pop: 0.073, lat: 1.5, lon: 110.430000305176, country: "Malaysia", name: "Kuching" }, + { cap: false, pop: 0.208, lat: -1.21000003814697, lon: 116.860000610352, country: "Indonesia", name: "Balikpapan" }, + { cap: false, pop: 0.168, lat: 50.3300018310547, lon: 110.75, country: "Russia", name: "Chatanga" }, + { cap: false, pop: 0.006, lat: 52.0499992370605, lon: 113.580001831055, country: "Russia", name: "Chita" }, + { cap: false, pop: 0.001, lat: 67.5800018310547, lon: 133.410003662109, country: "Russia", name: "Verkhoyansk" }, + { cap: false, pop: 0.187, lat: 62.0099983215332, lon: 129.830001831055, country: "Russia", name: "Yakutsk" }, + { cap: false, pop: 0.006, lat: 59.3300018310547, lon: 143.25, country: "Russia", name: "Okhotsk" }, + { cap: false, pop: 0.000, lat: 50.0800018310547, lon: 45.5299987792969, country: "Russia", name: "Nikolayevsk" }, + { cap: false, pop: 0.000, lat: 46.9599990844727, lon: 142.75, country: "Russia", name: "Yuzhno-Sakhalinsk" }, + { cap: false, pop: 0.000, lat: -23.6299991607666, lon: 133.929992675781, country: "Australia", name: "Alice Springs" }, + { cap: false, pop: 0.039, lat: -16.8500003814697, lon: 145.710006713867, country: "Australia", name: "Cairns" }, + { cap: false, pop: 0.106, lat: -19.2999992370605, lon: 146.830001831055, country: "Australia", name: "Townsville" }, + { cap: false, pop: 0.059, lat: -23.4300003051758, lon: 150.479995727539, country: "Australia", name: "Rockhampton" }, + { cap: false, pop: 0.405, lat: -33, lon: 151.910003662109, country: "Australia", name: "Newcastle" }, + { cap: false, pop: 0.175, lat: -43, lon: 147.5, country: "Australia", name: "Hobart" }, + { cap: false, pop: 0.109, lat: -45.8600006103516, lon: 170.5, country: "New Zealand", name: "Dunedin" }, + { cap: false, pop: 0.256, lat: 48.6545677185059, lon: -123.569107055664, country: "Canada", name: "Victoria" }, + { cap: true, pop: 0.164, lat: 6.60109615325928, lon: 2.63250279426575, country: "Benin", name: "Porto Novo" }, + { cap: false, pop: 1.030, lat: 4.13665008544922, lon: 9.706374168396, country: "Cameroon", name: "Douala" }, + { cap: false, pop: 0.708, lat: -5.19043016433716, lon: 119.722793579102, country: "Indonesia", name: "Vjuag Padang" }, + { cap: false, pop: 0.112, lat: -3.3865532875061, lon: 129.312927246094, country: "Indonesia", name: "Ambon" }, + { cap: false, pop: 1.604, lat: 37.5894508361816, lon: 126.767440795898, country: "Korea Rep", name: "Inch`on" }, + { cap: false, pop: 1.680, lat: 39.0317153930664, lon: 121.598197937012, country: "China", name: "Dalian" }, + { cap: false, pop: 1.227, lat: 45.4421310424805, lon: -122.641677856445, country: "US", name: "Portland" }, + { cap: false, pop: 0.810, lat: -3.12230491638184, lon: -60.0146179199219, country: "Brazil", name: "Manaus" }, + { cap: false, pop: 0.227, lat: -2.46000003814697, lon: -54.6100006103516, country: "Brazil", name: "Santarem" }, + { cap: false, pop: 0.053, lat: -46.4099998474121, lon: 168.449996948242, country: "New Zealand", name: "Invercargill" }, + { cap: false, pop: 0.049, lat: -10.2600002288818, lon: 40.1800003051758, country: "Tanzania", name: "Mtwara" }, + { cap: false, pop: 0.100, lat: -18.2299995422363, lon: 49.4099998474121, country: "Madagascar", name: "Toamasina" }, + { cap: false, pop: 0.235, lat: -29.1499996185303, lon: 26.2600002288818, country: "South Africa", name: "Bloemfontein" }, + { cap: false, pop: 0.414, lat: -20.2000007629395, lon: 28.7099990844727, country: "Zimbabwe", name: "Bulawayo" }, + { cap: false, pop: 0.061, lat: -17.8299999237061, lon: 25.8799991607666, country: "Zambia", name: "Livingstone" }, + { cap: false, pop: 0.290, lat: 24.4300003051758, lon: 39.7000007629395, country: "Saudi Arabia", name: "Al Madinah" }, + { cap: false, pop: 0.000, lat: 21.7600002288818, lon: 31.2800006866455, country: "Sudan", name: "Wadi Halfa" }, + { cap: false, pop: 0.191, lat: 24.0799999237061, lon: 32.9500007629395, country: "Egypt", name: "Aswan" }, + { cap: false, pop: 0.000, lat: 25.9099998474121, lon: 13.9099998474121, country: "Libya", name: "Murzuq" }, + { cap: false, pop: 0.000, lat: 27.7000007629395, lon: -8.15999984741211, country: "Algeria", name: "Tindouf" }, + { cap: false, pop: 0.050, lat: 16.9599990844727, lon: 7.98000001907349, country: "Niger", name: "Agadez" }, + { cap: false, pop: 0.140, lat: 13.1800003051758, lon: 30.1599998474121, country: "Sudan", name: "El Obeid" }, + { cap: false, pop: 0.125, lat: 0.0500000007450581, lon: 18.4599990844727, country: "Zaire", name: "Mbandaka" }, + { cap: false, pop: 0.015, lat: 60.6500015258789, lon: -135.009994506836, country: "Canada", name: "Whitehorse" }, + { cap: false, pop: 0.095, lat: -53.1500015258789, lon: -70.8000030517578, country: "Chile", name: "Punte Arenas" }, + { cap: false, pop: 0.084, lat: -41.4799995422363, lon: -73, country: "Chile", name: "Puerto Montt" }, + { cap: false, pop: 0.000, lat: -51.7099990844727, lon: -69.4100036621094, country: "Argentina", name: "Rio Gallegos" }, + { cap: false, pop: 0.097, lat: -45.8300018310547, lon: -67.5, country: "Argentina", name: "Comodoro Rivadavia" }, + { cap: false, pop: 0.327, lat: 29.9599990844727, lon: 32.560001373291, country: "Egypt", name: "Suez" }, + { cap: false, pop: 3.350, lat: 31.0746040344238, lon: 29.9778099060059, country: "Egypt", name: "Alexandria" }, + { cap: false, pop: 0.000, lat: -15.0500001907349, lon: 40.7000007629395, country: "Mozambique", name: "Mocambique" }, + { cap: false, pop: 9.950, lat: 19.0453472137451, lon: 73.1723480224609, country: "India", name: "Bombay" }, + { cap: true, pop: 2.548, lat: 36.596492767334, lon: 2.99369311332703, country: "Algeria", name: "Algiers" }, + { cap: false, pop: 1.940, lat: 49.989673614502, lon: 36.2083129882813, country: "Ukraine", name: "Kharkov" }, + { cap: false, pop: 1.600, lat: 48.4228897094727, lon: 35.1378936767578, country: "Ukraine", name: "Dnepropetrovsk" }, + { cap: true, pop: 0.482, lat: 59.2775726318359, lon: 24.7520561218262, country: "Estonia", name: "Tallinn" }, + { cap: false, pop: 0.000, lat: 47.810001373291, lon: 97, country: "Mongolia", name: "Uliastay" }, + { cap: true, pop: 1.313, lat: 18.4997291564941, lon: -69.9104919433594, country: "Dominican Rp", name: "Santo Domingo" }, + { cap: true, pop: 0.064, lat: 4.93300008773804, lon: 114.967002868652, country: "Brunei", name: "Bandar Seri Begawan" }, + { cap: true, pop: 0.095, lat: 13.4452724456787, lon: -16.4946155548096, country: "Gambia", name: "Banjul" }, + { cap: true, pop: 0.370, lat: 10.6397342681885, lon: -61.490062713623, country: "Trinidad", name: "Port of Spain" }, + { cap: false, pop: 0.302, lat: 16.97438621521, lon: -99.9314956665039, country: "Mexico", name: "Acapulco" }, + { cap: false, pop: 0.000, lat: 64.4001617431641, lon: 177.130187988281, country: "Russia", name: "Anadyr" }, + { cap: false, pop: 0.003, lat: 65.6699981689453, lon: -37.3118667602539, country: "Greenland", name: "Angmagssalik" }, + { cap: false, pop: 0.185, lat: -23.8325366973877, lon: -70.2254486083984, country: "Chile", name: "Antofagasta" }, + { cap: false, pop: 0.294, lat: 40.75, lon: 140.669998168945, country: "Japan", name: "Aomori" }, + { cap: false, pop: 0.436, lat: 32.0430526733398, lon: 20.3086757659912, country: "Libya", name: "Banghazi" }, + { cap: false, pop: 0.000, lat: -15.75, lon: 133.220001220703, country: "Australia", name: "Birdum" }, + { cap: false, pop: 0.000, lat: 2.75, lon: -60.5, country: "Brazil", name: "Boa Vista" }, + { cap: false, pop: 0.280, lat: -6.61999988555908, lon: -79.8300018310547, country: "Peru", name: "Chiclayo" }, + { cap: false, pop: 0.223, lat: -8.930100440979, lon: -78.4531478881836, country: "Peru", name: "Chimbote" }, + { cap: false, pop: 0.001, lat: 58.710765838623, lon: -94.1800003051758, country: "Canada", name: "Churchill" }, + { cap: false, pop: 0.686, lat: 9.98798847198486, lon: 76.5217819213867, country: "India", name: "Cochin" }, + { cap: false, pop: 0.675, lat: -36.8832969665527, lon: -72.8516387939453, country: "Chile", name: "Concepcion" }, + { cap: false, pop: 0.062, lat: -31, lon: -71.0199966430664, country: "Chile", name: "Coquimbo" }, + { cap: false, pop: 0.073, lat: -12.7014999389648, lon: 130.994552612305, country: "Australia", name: "Darwin" }, + { cap: true, pop: 0.120, lat: 11.5, lon: 43.0999984741211, country: "Djibouti", name: "Djibouti" }, + { cap: false, pop: 0.022, lat: -32.0441665649414, lon: 115.9345703125, country: "Australia", name: "Fremantle" }, + { cap: false, pop: 0.495, lat: 5.34999990463257, lon: 100.547142028809, country: "Malaysia", name: "George Town" }, + { cap: false, pop: 0.001, lat: 69.3831405639648, lon: -53.6300010681152, country: "Greenland", name: "Godhavn" }, + { cap: true, pop: 0.012, lat: 64.2711868286133, lon: -51.5800018310547, country: "Greenland", name: "Godthab" }, + { cap: false, pop: 0.296, lat: 44.6300010681152, lon: -63.5800018310547, country: "Canada", name: "Halifax" }, + { cap: false, pop: 0.007, lat: 70.3913269042969, lon: 23.9063415527344, country: "Norway", name: "Hammerfest" }, + { cap: false, pop: 0.000, lat: 67.3499984741211, lon: 86.5500030517578, country: "Russia", name: "Igarka" }, + { cap: false, pop: 0.019, lat: 27.2000007629395, lon: 2.52999997138977, country: "Algeria", name: "In Salah" }, + { cap: false, pop: 0.003, lat: 68.2699966430664, lon: -133.669998168945, country: "Canada", name: "Inuvik" }, + { cap: false, pop: 0.050, lat: -4.94999980926514, lon: 30, country: "Tanzania", name: "Kigoma" }, + { cap: false, pop: 0.069, lat: 61.1500015258789, lon: 47, country: "Russia", name: "Kotlas" }, + { cap: false, pop: 0.094, lat: 27, lon: -13.1800003051758, country: "W Sahara", name: "Laayoune" }, + { cap: false, pop: 0.217, lat: 1.420086145401, lon: 124.884239196777, country: "Indonesia", name: "Manado" }, + { cap: false, pop: 0.306, lat: 12.9499998092651, lon: 75.1608810424805, country: "India", name: "Mangalore" }, + { cap: false, pop: 0.535, lat: 31.1499996185303, lon: -8, country: "Morocco", name: "Marrakech" }, + { cap: true, pop: 0.038, lat: -26.3033809661865, lon: 31.1912975311279, country: "Swaziland", name: "Mbabne" }, + { cap: false, pop: 0.449, lat: 32.8827476501465, lon: 129.857467651367, country: "Japan", name: "Nagasaki" }, + { cap: false, pop: 0.510, lat: -5.78000020980835, lon: -35.25, country: "Brazil", name: "Natal" }, + { cap: false, pop: 0.033, lat: -41.2999992370605, lon: 173.270004272461, country: "New Zealand", name: "Nelson" }, + { cap: false, pop: 0.004, lat: 64.5862808227539, lon: -165.270004272461, country: "US", name: "Nome" }, + { cap: false, pop: 0.174, lat: 69.3300018310547, lon: 88.0999984741211, country: "Russia", name: "Noril`sk" }, + { cap: false, pop: 0.022, lat: 20.8999996185303, lon: -16.825647354126, country: "Mauritania", name: "Nouadnibou" }, + { cap: false, pop: 0.600, lat: 53.7000007629395, lon: 87.1699981689453, country: "Russia", name: "Novokuznetsk" }, + { cap: false, pop: 0.097, lat: 46.9199981689453, lon: -122.879997253418, country: "US", name: "Olympia" }, + { cap: false, pop: 0.297, lat: -0.917578816413879, lon: 100.475059509277, country: "Indonesia", name: "Padang" }, + { cap: false, pop: 0.787, lat: -3, lon: 104.830001831055, country: "Indonesia", name: "Palembang" }, + { cap: false, pop: 0.155, lat: 38.1412391662598, lon: 21.8831691741943, country: "Greece", name: "Patras" }, + { cap: false, pop: 0.269, lat: 53.2000007629395, lon: 158.720001220703, country: "Russia", name: "Petropavloski-Kamchatskiy" }, + { cap: true, pop: 0.083, lat: 42.5, lon: 19.3999996185303, country: "Montenegro", name: "Podgorica" }, + { cap: false, pop: 0.294, lat: -4.63870811462402, lon: 12.0580930709839, country: "Congo", name: "Pointe Noire" }, + { cap: false, pop: 0.124, lat: -0.819999992847443, lon: 9.15334415435791, country: "Gabon", name: "Port Gentil" }, + { cap: false, pop: 0.016, lat: 54.420280456543, lon: -130.048080444336, country: "Canada", name: "Prince Rupert" }, + { cap: false, pop: 0.121, lat: 45.338134765625, lon: -65.6499481201172, country: "Canada", name: "Saint John" }, + { cap: false, pop: 0.091, lat: 15.9512100219727, lon: -16.2978382110596, country: "Senegal", name: "Saint Louis" }, + { cap: false, pop: 0.000, lat: 66.5699996948242, lon: 66.5800018310547, country: "Russia", name: "Salekhard" }, + { cap: false, pop: 0.241, lat: 41.3199996948242, lon: 36.3699989318848, country: "Turkey", name: "Samsun" }, + { cap: false, pop: 0.600, lat: -2.5, lon: -44.4300575256348, country: "Brazil", name: "Sao Luis" }, + { cap: true, pop: 0.341, lat: 43.8699989318848, lon: 18.4300003051758, country: "Bosnia/Herz", name: "Sarajevo" }, + { cap: false, pop: 0.000, lat: 70.5285720825195, lon: -22.9963226318359, country: "Greenland", name: "Scoresbyund" }, + { cap: false, pop: 0.029, lat: 50.2825469970703, lon: -66.4025421142578, country: "Canada", name: "Sept-Iles" }, + { cap: false, pop: 0.003, lat: 60.1199989318848, lon: -149.449996948242, country: "US", name: "Seward" }, + { cap: true, pop: 0.445, lat: 42, lon: 21.5300006866455, country: "Macedonia", name: "Skopje" }, + { cap: false, pop: 0.000, lat: 22.8299999237061, lon: 5.55000019073486, country: "Algeria", name: "Tamanrasset" }, + { cap: false, pop: 0.000, lat: 77.6699981689453, lon: -69, country: "Greenland", name: "Thule" }, + { cap: false, pop: 0.000, lat: 71.6999969482422, lon: 128.75, country: "Russia", name: "Tiksi" }, + { cap: false, pop: 0.055, lat: -23.2901554107666, lon: 44.0190925598145, country: "Madagascar", name: "Toliara" }, + { cap: false, pop: 0.354, lat: -7.92999982833862, lon: -79, country: "Peru", name: "Trujillo" }, + { cap: false, pop: 0.604, lat: 17.75, lon: 83.3300018310547, country: "India", name: "Vishakhapatnam" }, + { cap: false, pop: 0.116, lat: 67.8000030517578, lon: 64.3300018310547, country: "Russia", name: "Vorkuta" }, + { cap: false, pop: 0.230, lat: 31.9699993133545, lon: 54.4500007629395, country: "Iran", name: "Yazd" }, + { cap: false, pop: 0.282, lat: 29.6000003814697, lon: 60.8300018310547, country: "Iran", name: "Zahedan" }, + { cap: false, pop: 0.318, lat: 12.861159324646, lon: 45.1800003051758, country: "Yemen", name: "Aden" }, + { cap: true, pop: 1.500, lat: 9.02999973297119, lon: 38.7000007629395, country: "Ethiopia", name: "Adis Abeba" }, + { cap: true, pop: 1.375, lat: 29.1949901580811, lon: 48.0027770996094, country: "Kuwait", name: "Al Kuwayt" }, + { cap: true, pop: 0.663, lat: -18.8700008392334, lon: 47.5, country: "Madagascar", name: "Antananarivo" }, + { cap: true, pop: 1.250, lat: 24.6499996185303, lon: 46.7700004577637, country: "Saudi Arabia", name: "Ar Riyad" }, + { cap: true, pop: 0.275, lat: 15.3299999237061, lon: 38.9700012207031, country: "Eritrea", name: "Asmara" }, + { cap: true, pop: 0.700, lat: -25.2199993133545, lon: -57.6699981689453, country: "Paraguay", name: "Asuncion" }, + { cap: true, pop: 3.027, lat: 38.1216011047363, lon: 23.6548633575439, country: "Greece", name: "Athens" }, + { cap: false, pop: 1.120, lat: 40.6500015258789, lon: 109.980003356934, country: "China", name: "Baotou" }, + { cap: false, pop: 4.040, lat: 41.5299987792969, lon: 2.17000007629395, country: "Spain", name: "Barcelona" }, + { cap: false, pop: 1.140, lat: 11.0142946243286, lon: -74.6800003051758, country: "Colombia", name: "Barranquilla" }, + { cap: false, pop: 0.292, lat: -19.7692832946777, lon: 35.0231704711914, country: "Mozambique", name: "Beira" }, + { cap: true, pop: 1.675, lat: 33.7799987792969, lon: 35.6579437255859, country: "Lebanon", name: "Beirut" }, + { cap: true, pop: 0.005, lat: 17.1200008392334, lon: -88.8000030517578, country: "Belize", name: "Belmopan" }, + { cap: false, pop: 0.239, lat: 60.3499984741211, lon: 5.49067831039429, country: "Norway", name: "Bergen" }, + { cap: true, pop: 0.109, lat: 11.9109897613525, lon: -15.6499996185303, country: "GuineaBissau", name: "Bissau" }, + { cap: false, pop: 1.790, lat: -33.8040084838867, lon: 18.6904315948486, country: "South Africa", name: "cape Town" }, + { cap: false, pop: 0.625, lat: 51.5, lon: -3.15000009536743, country: "UK", name: "Cardiff" }, + { cap: false, pop: 2.475, lat: 33.5444107055664, lon: -7.53409194946289, country: "Morocco", name: "Casablanca" }, + { cap: true, pop: 0.038, lat: 4.92000007629395, lon: -52.4000015258789, country: "Fr Guiana", name: "Cayenne" }, + { cap: false, pop: 1.392, lat: 22.4799995422363, lon: 91.8327941894531, country: "Bangladesh", name: "Chittagong" }, + { cap: true, pop: 2.050, lat: 7.01999998092651, lon: 80.0883331298828, country: "Sri Lanka", name: "Colombo" }, + { cap: true, pop: 0.800, lat: 9.52000045776367, lon: -12.8000001907349, country: "Guinea", name: "Conakry" }, + { cap: true, pop: 1.428, lat: 14.6300001144409, lon: -16.8480949401855, country: "Senegal", name: "Dakar" }, + { cap: false, pop: 1.405, lat: 39.75, lon: -105.069999694824, country: "US", name: "Denver" }, + { cap: true, pop: 0.595, lat: 38.6300010681152, lon: 68.9000015258789, country: "Tajikistan", name: "Dushanfe" }, + { cap: false, pop: 0.785, lat: 53.5699996948242, lon: -113.269996643066, country: "Canada", name: "Edmonton" }, + { cap: false, pop: 1.871, lat: 30.4699993133545, lon: 30.8500003814697, country: "Egypt", name: "Giza" }, + { cap: true, pop: 0.525, lat: 8.38277053833008, lon: -12.9102764129639, country: "Sierra Leone", name: "Freetown" }, + { cap: true, pop: 0.616, lat: 42.8800010681152, lon: 74.7699966430664, country: "Kyrgyzstan", name: "Frunze" }, + { cap: false, pop: 0.805, lat: 44.4550895690918, lon: 8.92229557037354, country: "Italy", name: "Genova" }, + { cap: true, pop: 0.188, lat: 6.76999998092651, lon: -58.1699981689453, country: "Guyana", name: "Georgetown" }, + { cap: false, pop: 0.711, lat: 57.75, lon: 12, country: "Sweden", name: "Goteborg" }, + { cap: true, pop: 0.890, lat: -17.8299999237061, lon: 31.0200004577637, country: "Zimbabwe", name: "Harare" }, + { cap: true, pop: 2.125, lat: 23.0489521026611, lon: -82.4164505004883, country: "Cuba", name: "Havana" }, + { cap: false, pop: 1.300, lat: 21.6200008392334, lon: 39.3733062744141, country: "Saudi Arabia", name: "Jiddah" }, + { cap: true, pop: 0.460, lat: 0.319999992847443, lon: 32.5800018310547, country: "Uganda", name: "Kampala" }, + { cap: false, pop: 0.538, lat: 11.9200000762939, lon: 8.52000045776367, country: "Nigeria", name: "Kano" }, + { cap: false, pop: 1.845, lat: 22.6734161376953, lon: 120.341484069824, country: "Taiwan", name: "Kao-Hsiung" }, + { cap: false, pop: 5.300, lat: 24.8500003814697, lon: 67.0299987792969, country: "Pakistan", name: "Karachi" }, + { cap: false, pop: 0.601, lat: 48.5299987792969, lon: 135.070007324219, country: "Russia", name: "Khabarovsk" }, + { cap: true, pop: 0.924, lat: 15.5500001907349, lon: 32.5299987792969, country: "Sudan", name: "Khartoum" }, + { cap: true, pop: 0.665, lat: 47, lon: 28.8299999237061, country: "Moldova", name: "Kishinev" }, + { cap: true, pop: 1.685, lat: 55.7200012207031, lon: 12.5500001907349, country: "Denmark", name: "Kobenhavn" }, + { cap: true, pop: 3.800, lat: 6.44999980926514, lon: 3.29999995231628, country: "Nigeria", name: "Lagos" }, + { cap: false, pop: 0.255, lat: 49.3240203857422, lon: 0.219999998807907, country: "France", name: "Le Havre" }, + { cap: true, pop: 0.236, lat: -0.504144549369812, lon: 9.49045658111572, country: "Gabon", name: "Libreville" }, + { cap: true, pop: 0.234, lat: -13.9200000762939, lon: 33.8199996948242, country: "Malawi", name: "Lilongwe" }, + { cap: true, pop: 4.344, lat: -12.0679960250854, lon: -76.8235549926758, country: "Peru", name: "Lima" }, + { cap: true, pop: 2.250, lat: 38.7299995422363, lon: -9.13000011444092, country: "Portugal", name: "Lisboa" }, + { cap: false, pop: 1.525, lat: 53.4226875305176, lon: -2.76683640480042, country: "UK", name: "Liverpool" }, + { cap: true, pop: 0.400, lat: 6.28000020980835, lon: 1.35000002384186, country: "Togo", name: "Lome" }, + { cap: false, pop: 9.764, lat: 34, lon: -118.25, country: "US", name: "Los Angeles" }, + { cap: true, pop: 1.460, lat: -9, lon: 13.4617786407471, country: "Angola", name: "Luanda" }, + { cap: false, pop: 0.543, lat: -11.6800003051758, lon: 27.5499992370605, country: "Zaire", name: "Lumumbashi" }, + { cap: true, pop: 0.536, lat: -15.4300003051758, lon: 28.1700000762939, country: "Zambia", name: "Lusaka" }, + { cap: true, pop: 0.031, lat: 3.64468479156494, lon: 8.81999969482422, country: "Eq Guinea", name: "Malabo" }, + { cap: true, pop: 5.474, lat: 14.5500001907349, lon: 121.173408508301, country: "Philippines", name: "Manila" }, + { cap: false, pop: 1.225, lat: 43.2999992370605, lon: 5.38000011444092, country: "France", name: "Marseille" }, + { cap: true, pop: 0.050, lat: 23.5166397094727, lon: 58.6274795532227, country: "Oman", name: "Masqat" }, + { cap: false, pop: 0.200, lat: 23.3615112304688, lon: -106.269996643066, country: "Mexico", name: "Mazatlan" }, + { cap: false, pop: 0.442, lat: -4.01999998092651, lon: 39.6699981689453, country: "Kenya", name: "Mombasa" }, + { cap: true, pop: 0.465, lat: 6.51743936538696, lon: -10.7700004577637, country: "Liberia", name: "Monrovia" }, + { cap: true, pop: 1.550, lat: -34.9199981689453, lon: -56.1699981689453, country: "Uruguay", name: "Montevideo" }, + { cap: true, pop: 13.100, lat: 55.75, lon: 37.7000007629395, country: "Russia", name: "Moscow" }, + { cap: true, pop: 1.286, lat: -1.16999995708466, lon: 36.8300018310547, country: "Kenya", name: "Nairobi" }, + { cap: false, pop: 2.875, lat: 40.8300018310547, lon: 14.2700004577637, country: "Italy", name: "Napoli" }, + { cap: false, pop: 16.472, lat: 40.75, lon: -74.0999984741211, country: "US", name: "New York" }, + { cap: false, pop: 0.329, lat: 40.7200012207031, lon: -74.1999969482422, country: "US", name: "Newark" }, + { cap: true, pop: 0.285, lat: 18.0300006866455, lon: -15.7828607559204, country: "Mauritania", name: "Nouakchott" }, + { cap: false, pop: 0.138, lat: 55.574535369873, lon: 9.90299892425537, country: "Denmark", name: "Odense" }, + { cap: false, pop: 0.526, lat: 15.6199998855591, lon: 32.4799995422363, country: "Sudan", name: "Omdurman" }, + { cap: false, pop: 0.629, lat: 35.75, lon: -0.519999980926514, country: "Algeria", name: "Oran" }, + { cap: true, pop: 0.720, lat: 59.9300003051758, lon: 10.7200002670288, country: "Norway", name: "Oslo" }, + { cap: true, pop: 0.442, lat: 12.4799995422363, lon: -1.66999995708466, country: "Burkina Faso", name: "Ouagadouou" }, + { cap: false, pop: 0.724, lat: 38.1300010681152, lon: 13.3999996185303, country: "Italy", name: "Palermo" }, + { cap: true, pop: 0.625, lat: 8.94999980926514, lon: -79.4000015258789, country: "Panama", name: "Panama" }, + { cap: true, pop: 0.241, lat: 5.92999982833862, lon: -55.2299995422363, country: "Suriname", name: "Paramaribo" }, + { cap: false, pop: 0.994, lat: -31.9758644104004, lon: 115.923370361328, country: "Australia", name: "Perth" }, + { cap: true, pop: 0.152, lat: -9.55000019073486, lon: 147.414520263672, country: "Papua N Guin", name: "Port Moresby" }, + { cap: false, pop: 1.225, lat: 41.1500015258789, lon: -8.48794841766357, country: "Portugal", name: "Porto" }, + { cap: false, pop: 0.203, lat: 31.6000003814697, lon: 65.5, country: "Afghanistan", name: "Qandahar" }, + { cap: false, pop: 1.326, lat: 14.6499996185303, lon: 121.029998779297, country: "Philippines", name: "Quezon City" }, + { cap: true, pop: 0.980, lat: 33.9201965332031, lon: -6.74804067611694, country: "Morocco", name: "Rabat" }, + { cap: true, pop: 0.138, lat: 64.3132629394531, lon: -21.336820602417, country: "Iceland", name: "Reykjavik" }, + { cap: true, pop: 1.005, lat: 56.8800010681152, lon: 24.0499992370605, country: "latvia", name: "Riga" }, + { cap: true, pop: 3.175, lat: 41.8800010681152, lon: 12.5200004577637, country: "Italy", name: "Roma" }, + { cap: false, pop: 2.050, lat: -12.6002569198608, lon: -38.4799995422363, country: "Brazil", name: "Salvador" }, + { cap: false, pop: 0.848, lat: 29.6299991607666, lon: 52.5699996948242, country: "Iran", name: "Shiraz" }, + { cap: true, pop: 1.450, lat: 59.2446327209473, lon: 18.0842685699463, country: "Sweden", name: "Stockholm" }, + { cap: false, pop: 2.028, lat: -7.40000009536743, lon: 112.684371948242, country: "Indonesia", name: "Surabaja" }, + { cap: false, pop: 0.657, lat: 23.1700000762939, lon: 120.230003356934, country: "Taiwan", name: "T`ai-nan" }, + { cap: false, pop: 0.595, lat: 27.9973583221436, lon: -82.5930252075195, country: "US", name: "Tampa" }, + { cap: true, pop: 1.670, lat: 31.9171981811523, lon: 34.8568344116211, country: "Israel", name: "Tel Aviv-Yafo" }, + { cap: false, pop: 0.706, lat: 40.6300010681152, lon: 22.7999992370605, country: "Greece", name: "Thessaloniki" }, + { cap: true, pop: 2.325, lat: 41.247932434082, lon: 69.3498687744141, country: "Uzbekistan", name: "Toshkent" }, + { cap: false, pop: 0.198, lat: 34.3437576293945, lon: 36.0070686340332, country: "Lebanon", name: "Tripoli" }, + { cap: false, pop: 0.675, lat: -32.9000015258789, lon: -71.2993392944336, country: "Chile", name: "Valparaiso" }, + { cap: false, pop: 1.381, lat: 49.274299621582, lon: -122.963066101074, country: "Canada", name: "Vancouver" }, + { cap: false, pop: 0.648, lat: 43.1300010681152, lon: 131.960433959961, country: "Russia", name: "Vladivostok" }, + { cap: false, pop: 0.017, lat: -23.1018676757813, lon: 14.6171045303345, country: "Namibia", name: "Walvis Bay" }, + { cap: true, pop: 0.115, lat: -22.5699996948242, lon: 17.1000003814697, country: "Namibia", name: "Windhoek" }, + { cap: true, pop: 0.350, lat: -41.2103958129883, lon: 175.144943237305, country: "New Zealand", name: "Wellington" }, + { cap: false, pop: 2.077, lat: 47.5885543823242, lon: -122.316650390625, country: "US", name: "Seattle" }, + { cap: false, pop: 2.099, lat: 32.7614593505859, lon: -117.125495910645, country: "US", name: "San Diego" }, + { cap: false, pop: 0.110, lat: -20.2600002288818, lon: -69.9132614135742, country: "Chile", name: "Iquique" }, + { cap: true, pop: 0.243, lat: 24.2360076904297, lon: 54.619270324707, country: "Untd Arab Em", name: "Abu Zaby" }, + { cap: false, pop: 0.199, lat: 7.57660102844238, lon: -72.0054550170898, country: "Venezuela", name: "San Cristobal" }, + { cap: false, pop: 0.509, lat: 46.25, lon: 48, country: "Russia", name: "Astrakhan" }, + { cap: false, pop: 0.000, lat: 30.1386032104492, lon: 9.81835079193115, country: "Libya", name: "Ghadamis" }, + { cap: false, pop: 0.077, lat: -31.3051528930664, lon: -57.7087745666504, country: "Uruguay", name: "Salto" }, + { cap: false, pop: 0.012, lat: 62.5206146240234, lon: -114.061363220215, country: "Canada", name: "Yellowknife" }, + { cap: false, pop: 0.043, lat: 19.7148151397705, lon: -155.067291259766, country: "US", name: "Hilo" }, + { cap: false, pop: 0.763, lat: 21.3211765289307, lon: -157.806182861328, country: "US", name: "Honolulu" }, + { cap: false, pop: 0.184, lat: 61.188648223877, lon: -149.172973632813, country: "US", name: "Anchorage" }, + { cap: false, pop: 0.040, lat: 64.8387451171875, lon: -147.651184082031, country: "US", name: "Fairbanks" }, + { cap: false, pop: 0.020, lat: 58.3910064697266, lon: -134.132476806641, country: "US", name: "Juneau" }, + { cap: false, pop: 0.629, lat: 37.30810546875, lon: -121.847457885742, country: "US", name: "San Jose" }, + { cap: false, pop: 0.386, lat: 28.5581398010254, lon: -105.966636657715, country: "Mexico", name: "Chihuaha" }, + { cap: false, pop: 0.385, lat: 19.0096759796143, lon: -96.0840606689453, country: "Mexico", name: "Veracruz" }, + { cap: false, pop: 0.154, lat: 16.9209060668945, lon: -96.9420394897461, country: "Mexico", name: "Oaxaca" }, + { cap: false, pop: 0.000, lat: 78.1999969482422, lon: 15.6599998474121, country: "Norway", name: "longyearbyen" }, + { cap: true, pop: 5.396, lat: 22.4284057617188, lon: 114.145706176758, country: "UK", name: "Hong Kong" }, + { cap: false, pop: 0.775, lat: 22.3798961639404, lon: 114.230117797852, country: "UK", name: "Kowloon" }, + { cap: false, pop: 3.025, lat: 1.22979354858398, lon: 104.177116394043, country: "Singapore", name: "Singapore" }, + ]; + + this.capitals = this.locations.filter(city => city.cap); + this.cities = this.locations.filter(city => !city.cap); + return this.locations + } +} +``` + +## API References + +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-util.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-util.md new file mode 100644 index 000000000..7d1ddedf0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-resources-world-util.md @@ -0,0 +1,200 @@ +--- +title: Angular Map | World Utility | Data Source | Infragistics +_description: Use Infragistics' Angular JavaScript map data utility to generate geographic data. View Ignite UI for Angular map demos! +_keywords: Angular map, map data, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap"] +_tocName: World Utility +_premium: true +--- + +# Angular World Utility + +The resource topic provides implementation of utility that helps with generating Angular geographic data. + +## Code Snippet + +```ts +export default class WorldUtils { + + // calculate geo-paths between two locations using great circle formula + public static calcPaths(origin: any, dest: any): any[] { + let interval = 200; + let paths: any[] = [[]]; + let pathID = 0; + let distance = this.calcDistance(origin, dest); + if (distance <= interval) { + paths[pathID].push({ x: origin.lon, y: origin.lat }); + paths[pathID].push({ x: dest.lon, y: dest.lat }); + } else { + let current = origin; + let previous = origin; + + for (let dist = interval; dist <= distance; dist += interval) + { + previous = current + paths[pathID].push({ x: current.lon, y: current.lat }); + + let bearing = this.calcBearing(current, dest); + current = this.calcDestination(current, bearing, interval); + // ensure geo-path wrap around the world through the new date-line + if (previous.lon > 150 && current.lon < -150) { + paths[pathID].push({ x: 180, y: current.lat }); + paths.push([]); + pathID++ + current = { lon: -180, lat: current.lat } + } else if (previous.lon < -150 && current.lon > 150) { + paths[pathID].push({ x: -180, y: current.lat }); + paths.push([]); + pathID++ + current = { lon: 180, lat: current.lat } + } + } + paths[pathID].push({ x: dest.lon, y: dest.lat }); + } + return paths; + } + + // calculate bearing angle between two locations + public static calcBearing(origin: any, dest: any) : number + { + origin = this.toRadianLocation(origin); + dest = this.toRadianLocation(dest); + let range = (dest.lon - origin.lon); + let y = Math.sin(range) * Math.cos(dest.lat); + let x = Math.cos(origin.lat) * Math.sin(dest.lat) - + Math.sin(origin.lat) * Math.cos(dest.lat) * Math.cos(range); + let angle = Math.atan2(y, x); + return this.toDegreesNormalized(angle); + } + + // calculate destination for origin location and travel distance + public static calcDestination(origin: any, bearing: number, distance: number): any { + let radius = 6371.0; + origin = this.toRadianLocation(origin); + bearing = this.toRadians(bearing); + distance = distance / radius; // angular distance in radians + + let lat = Math.asin(Math.sin(origin.lat) * Math.cos(distance) + + Math.cos(origin.lat) * Math.sin(distance) * Math.cos(bearing)); + let x = Math.sin(bearing) * Math.sin(distance) * Math.cos(origin.lat); + let y = Math.cos(distance) - Math.sin(origin.lat) * Math.sin(origin.lat); + let lon = origin.lon + Math.atan2(x, y); + // normalize lon to coordinate between -180º and +180º + lon = (lon + 3 * Math.PI) % (2 * Math.PI) - Math.PI; + + lon = this.toDegrees(lon); + lat = this.toDegrees(lat); + + return { lon: lon, lat: lat }; + } + + // calculate distance between two locations + public static calcDistance(origin: any, dest: any) : number { + origin = this.toRadianLocation(origin); + dest = this.toRadianLocation(dest); + let sinProd = Math.sin(origin.lat) * Math.sin(dest.lat); + let cosProd = Math.cos(origin.lat) * Math.cos(dest.lat); + let lonDelta = (dest.lon - origin.lon); + + let angle = Math.acos(sinProd + cosProd * Math.cos(lonDelta)); + let distance = angle * 6371.0; + return distance; // * 6371.0; // in km + } + + public static toRadianLocation(geoPoint: any) : any { + let x = this.toRadians(geoPoint.lon); + let y = this.toRadians(geoPoint.lat); + return { lon: x, lat: y }; + } + + public static toRadians(degrees: number) : number + { + return degrees * Math.PI / 180; + } + + public static toDegrees(radians: number) : number { + return (radians * 180.0 / Math.PI); + } + + public static toDegreesNormalized(radians: number) : number + { + let degrees = this.toDegrees(radians); + degrees = (degrees + 360) % 360; + return degrees; + } + + // converts latitude coordinate to a string + public static toStringLat(latitude: number) : string { + let str = Math.abs(latitude).toFixed(1) + "°"; + return latitude > 0 ? str + "N" : str + "S"; + } + + // converts longitude coordinate to a string + public static toStringLon(coordinate: number) : string { + let val = Math.abs(coordinate); + let str = val < 100 ? val.toFixed(1) : val.toFixed(0); + return coordinate > 0 ? str + "°E" : str + "°W"; + } + + public static toStringAbbr(value: number) : string { + if (value > 1000000000000) { + return (value / 1000000000000).toFixed(1) + " T" + } else if (value > 1000000000) { + return (value / 1000000000).toFixed(1) + " B" + } else if (value > 1000000) { + return (value / 1000000).toFixed(1) + " M" + } else if (value > 1000) { + return (value / 1000).toFixed(1) + " K" + } + return value.toFixed(0); + } + + public static getLongitude(location: any) : number { + if (location.x) return location.x; + if (location.lon) return location.lon; + if (location.longitude) return location.longitude; + return Number.NaN; + } + + public static getLatitude(location: any) : number { + if (location.y) return location.y; + if (location.lat) return location.lat; + if (location.latitude) return location.latitude; + return Number.NaN; + } + + public static getBounds(locations: any[]) : any { + let minLat = 90; + let maxLat = -90; + let minLon = 180; + let maxLon = -180; + + for (const location of locations) { + const crrLon = this.getLongitude(location); + if (!Number.isNaN(crrLon)) { + minLon = Math.min(minLon, crrLon); + maxLon = Math.max(maxLon, crrLon); + } + + const crrLat = this.getLatitude(location); + if (!Number.isNaN(crrLat)) { + minLat = Math.min(minLat, crrLat); + maxLat = Math.max(maxLat, crrLat); + } + } + + const geoBounds = { + left: minLon, + top: minLat, + width: Math.abs(maxLon - minLon), + height: Math.abs(maxLat - minLat) + }; + return geoBounds; + } +} +``` + +## API References + +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-shape-files-reference.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-shape-files-reference.md new file mode 100644 index 000000000..4bd8b4176 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-shape-files-reference.md @@ -0,0 +1,102 @@ +--- +title: Angular Map | Data Visualization Tools | Shape Files Reference | Shape Files Editing | Infragistics +_description: Learn about shape files format to use with Infragistics' Angular map. Check out Ignite UI for Angular map tutorials! +_keywords: Angular map, shape files, Ignite UI for Angular, Infragistics, shape editing +_license: commercial +mentionedTypes: ["XamGeographicMap", "GeographicShapeSeriesBase", "Series"] +_tocName: Shape Files Reference +_premium: true +--- + +# Angular Shape Files Reference + +## Purpose + +This topic provides resources about maps and geo-spatial related material as well as information about shape files. Use these resources to learn about and obtain shape files as well as tools for their editing before starting to bind geo-spatial data to the Ignite UI for Angular map component™ control. + +## Resources + +## Geo-spatial Overview + +Before plotting geo-spatial data in the control, one should get familiar with the following resources which provide general information about maps and geo-spatial data. + +- [Wikipedia – Cartography](http://en.wikipedia.org/wiki/Cartography) + +- [National Atlas of the United States – Geographic Locations](http://nationalatlas.gov/articles/mapping/a_latlong.html) + +- [National Atlas of the United States – Map Projections](http://nationalatlas.gov/articles/mapping/a_projections.html) + +- [U.S. Geological Survey](http://www.usgs.gov/) + +- [Wikipedia – Map Projections](http://en.wikipedia.org/wiki/Map_projection) + +- [University of Colorado – Map Projections](http://www.colorado.edu/geography/gcraft/notes/mapproj/mapproj_f.html) + +- [CSISS – Map Projections](http://www.csiss.org/map-projections/index.html) + +## Shape Files Format + +The Angular [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with **.shp**, **.shx**, and **.dbf** extensions. + +The following table provides basic information and purpose for each type of shape files. + +| File Extension | Description | +| ---------------|------------ | +| `.shp` | A shape file contains geo-spatial vector data items that describe points, polylines, and polygons. In this file, points may describe cities, polylines may describe roads, and polygons may describe shapes/borders of countries in geographic context. | +| `.shx` | A shape index file contains an index for a quick lookup of a geo-spatial vector data items. | +| `.dbf` | A shape database file contains a table in which a row corresponds to each geo-spatial data item from a shape (.shp) file. In the shape database file, string columns may describe attributes for geo-spatial data item such as strings (names of countries, regions, cities) and numeric columns (population of countries, location of cities). | + +Refer to the following resources for detailed information and specifications on how geo-spatial data is stored in shape files. + +- [ESRI - Shape File Technical Description](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf) + +- [Wikipedia - Shape File Description](http://en.wikipedia.org/wiki/Shapefile#Overview) + +## Shape File Tools + +The following list provides resource tools for editing shape files. + +- [MapWindow – Shape (.shp) and Database (.dbf) File Editor](http://www.mapwindow.org/) + +- [Open Office – Database (.dbf) File Editor](http://openoffice.org/) + +- [DBF Editor - Database (.dbf) File Editor](http://dbfeditor.com/) + +- [DBF View - Database (.dbf) File Editor](http://dbfview.com/view-dbf-file.html) + +- [Satellite Signals – Geo-spatial Calculator](http://www.satsig.net/degrees-minutes-seconds-calculator.htm) + +- [RITA – NORTAD to Shape Files Converter](http://www.bts.gov/publications/north_american_transportation_atlas_data/html/data_converter.html) + +## Shape Files Data Sources + +The following list provides resources for obtaining shape files. Also, samples for the [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) control are good source of shape files. These shape files are included in the installer for the Samples Browser. + +- [ESRI - World Map Data](http://www.esri.com/data/download/basemap/index.html) +- [ESRI - Census 2010 Tiger/Line® - Shape Files](http://www.census.gov/geo/www/tiger/tgrshp2010/tgrshp2010.html) +- [National Atlas of the United States – Shape Files](http://www.nationalatlas.gov/atlasftp.html) +- [U.S. Census Bureau – Cartographic Boundary Files](http://www.census.gov/geo/www/cob/index.html) +- [U.S. Census Bureau - 2007 Tiger/Line® - Shape Files](http://www.census.gov/cgi-bin/geo/shapefiles/national-files) +- [U.S. Federal Executive Branch – Raw Data](https://explore.data.gov/catalog/raw/) +- [NOAA – Shape Files](http://www.nws.noaa.gov/geodata/) +- [CDC - Shape Files](http://wwwn.cdc.gov/epiinfo/script/shapefiles.aspx) +- [Massachusetts Geographic Information System](http://www.mass.gov/mgis/massgis.htm) +- [Geo Commons – Shape Files](http://geocommons.com/searches?query=shapefiles) +- [Geo Community – Shape Files](http://data.geocomm.com/catalog/) +- [RITA – NORTAD Files (Must-be converted to Shape Files)](http://www.bts.gov/publications/north_american_transportation_atlas_data/) +- [MapCruzin – Shape Files](http://www.mapcruzin.com/download-free-arcgis-shapefiles.htm) + +## Additional Resources + +The following topics provide additional information related to this topic. + +- [Binding Shape Files](geo-map-binding-shp-file.md) + +## API References + +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- `ItemsSource` +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-shape-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-shape-styling.md new file mode 100644 index 000000000..81b19186f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-shape-styling.md @@ -0,0 +1,325 @@ +--- +title: Angular Map | Data Visualization Tools | Shape Styling | Conditional Formatting | Infragistics +_description: Learn how to apply custom styling to Infragistics' Angular map's shape series. Check out Ignite UI for Angular map tutorials! +_keywords: Angular map, custom styling, Ignite UI for Angular, Infragistics, conditional formatting, shape styling +_license: commercial +mentionedTypes: ["XamGeographicMap", "GeographicShapeSeries", "Series"] +_tocName: Shape Styling +_premium: true +--- + +# Angular Shape Styling on Geographic Shape Series + +This topic explains how to apply custom styling to the [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) in the Angular [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html). + +## Angular Shape Styling on Geographic Shape Series Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicShapeSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + + public data: any; + + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded WorldCountries.shp " + shapeRecords.length); + + const countriesNATO: any[] = []; + const countriesSCO: any[] = []; + const countriesARAB: any[] = []; + const countriesOther: any[] = []; + + for (const record of shapeRecords) { + // using field/column names from .DBF file + const country = { + name: record.fieldValues.NAME, + org: record.fieldValues.ALLIANCE, + points: record.points, + pop: (record.fieldValues.POPULATION / 1000000).toFixed(1) + }; + + const group = record.fieldValues.ALLIANCE; + if (group === "NATO") { + countriesNATO.push(country); + } else if (group === "SCO") { + countriesSCO.push(country); + } else if (group === "ARAB LEAGUE") { + countriesARAB.push(country); + } else { + countriesOther.push(country); + } + } + + this.addSeriesWith(countriesNATO, "rgb(32, 146, 252)", "NATO"); + this.addSeriesWith(countriesSCO, "rgb(252, 32, 32)", "SCO"); + this.addSeriesWith(countriesARAB, "rgb(14, 194, 14)", "AL"); + this.addSeriesWith(countriesOther, "rgb(146, 146, 146)", "Other"); + } + + public addSeriesWith(shapeData: any[], shapeBrush: string, shapeTitle: string) { + + const geoSeries = new IgxGeographicShapeSeriesComponent(); + geoSeries.dataSource = shapeData; + geoSeries.shapeMemberPath = "points"; + geoSeries.brush = shapeBrush; + geoSeries.outline = "Black"; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.thickness = 1; + geoSeries.title = shapeTitle; + + this.map.series.add(geoSeries); + } +} +``` +```html +
+ + + + + +
+
+ {{item.name}}: + {{item.pop}} M +
+ + {{item.org}}
+ + + + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Required Imports + +Shape styling requires that you import the following classes: + +```ts +import { IgxGeographicShapeSeries } from 'igniteui-angular-maps'; +import { IgxStyleShapeEventArgs } from 'igniteui-angular-charts'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxShapefileRecord } from 'igniteui-angular-core'; +``` + +Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes: + +- [Shape Comparison Styling](#shape-comparison-styling) +- [Shape Random Styling](#shape-random-styling) +- [Shape Range Styling](#shape-range-styling) +- [Shape Scale Styling](#shape-scale-styling) + +## Shape Random Styling + +This code snippet creates instances of **ShapeRandomStyling** that will randomly assign fill colors to the countries of the world. + +```ts +import { ShapeRandomStyling } from './ShapeStylingUtility'; +// ... + +this.shapeRandomStyling = new ShapeRandomStyling(); +this.shapeRandomStyling.shapeStrokeColors = ['Black']; +this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue']; + +this.geoSeries = new IgxGeographicShapeSeries(); +this.geoSeries.styleShape = this.onStylingShape; +// ... +public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) { + const itemRecord = args.item as IgxShapefileRecord; + const shapeStyle = this.ShapeRandomStyling.getStyle(itemRecord); + args.shapeOpacity = shapeStyle.opacity; + args.shapeFill = shapeStyle.fill; + args.shapeStroke = shapeStyle.stroke; + args.shapeStrokeThickness = shapeStyle.strokeThickness; +} +``` + +## Shape Scale Styling + +This code snippet creates instances of **ShapeScaleStyling** that will assign fill colors to shape of countries based on population scaled on logarithmic scale. + +```ts +import { ShapeScaleStyling } from './ShapeStylingUtility'; +// ... +this.shapeScaleStyling = new ShapeScaleStyling(); +this.shapeScaleStyling.itemMinimumValue = 5000; +this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions +this.shapeScaleStyling.itemMemberPath = 'Population'; +this.shapeScaleStyling.isLogarithmic = true; +this.shapeScaleStyling.defaultFill = 'Gray'; +this.shapeScaleStyling.shapeStrokeColors = ['Black']; +this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown']; + +this.geoSeries = new IgxGeographicShapeSeries(); +this.geoSeries.styleShape = this.onStylingShape; +// ... +public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) { + const itemRecord = args.item as IgxShapefileRecord; + const shapeStyle = this.shapeScaleStyling.getStyle(itemRecord); + args.shapeOpacity = shapeStyle.opacity; + args.shapeFill = shapeStyle.fill; + args.shapeStroke = shapeStyle.stroke; + args.shapeStrokeThickness = shapeStyle.strokeThickness; +} +``` + +## Shape Range Styling + +This code snippet creates instances of **ShapeRangeStyling** that will assign colors to shape of countries based on ranges of population. + +```ts +import { ShapeRangeStyling } from './ShapeStylingUtility'; +// ... +this.shapeRangeStyling = new ShapeRangeStyling(); +this.shapeRangeStyling.defaultFill = 'Gray'; +this.shapeRangeStyling.itemMemberPath = 'Population'; +this.shapeRangeStyling.ranges = [ + { fill: 'yellow', minimum: 5000, maximum: 10000000, }, // 5 K - 10 M + { fill: 'orange', minimum: 10000000, maximum: 100000000, }, // 10 M - 100 M + { fill: 'red', minimum: 100000000, maximum: 500000000, }, // 100 M - 500 M + { fill: 'brown', minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B +]; + +this.geoSeries = new IgxGeographicShapeSeries(); +this.geoSeries.styleShape = this.onStylingShape; +// ... +public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) { + const itemRecord = args.item as IgxShapefileRecord; + const shapeStyle = this.shapeRangeStyling.getStyle(itemRecord); + args.shapeOpacity = shapeStyle.opacity; + args.shapeFill = shapeStyle.fill; + args.shapeStroke = shapeStyle.stroke; + args.shapeStrokeThickness = shapeStyle.strokeThickness; +} +``` + +## Shape Comparison Styling + +This code snippet creates instances of **ShapeComparisonStyling** that will assign colors to countries based on their region name in the world. + +```ts +import { ShapeComparisonStyling } from './ShapeStylingUtility'; +this.shapeComparisonStyling = new ShapeComparisonStyling(); +this.shapeComparisonStyling.defaultFill = 'Gray'; +this.shapeComparisonStyling.itemMemberPath = 'Region'; +this.shapeComparisonStyling.itemMappings = [ + { fill: 'Red', itemValue: 'Eastern Europe' }, + { fill: 'Red', itemValue: 'Central Asia' }, + { fill: 'Red', itemValue: 'Eastern Asia' }, + { fill: 'Orange', itemValue: 'Southern Asia' }, + { fill: 'Orange', itemValue: 'Middle East' }, + { fill: 'Orange', itemValue: 'Northern Africa' }, + { fill: 'Yellow', itemValue: 'Eastern Africa' }, + { fill: 'Yellow', itemValue: 'Western Africa' }, + { fill: 'Yellow', itemValue: 'Middle Africa' }, + { fill: 'Yellow', itemValue: 'Southern Africa' }, + { fill: 'DodgerBlue', itemValue: 'Central America' }, + { fill: 'DodgerBlue', itemValue: 'Northern America' }, + { fill: 'DodgerBlue', itemValue: 'Western Europe' }, + { fill: 'DodgerBlue', itemValue: 'Southern Europe' }, + { fill: 'DodgerBlue', itemValue: 'Northern Europe' }, + { fill: '#22c928', itemValue: 'South America' }, + { fill: '#b64fff', itemValue: 'Melanesia' }, + { fill: '#b64fff', itemValue: 'Micronesia' }, + { fill: '#b64fff', itemValue: 'Polynesia' }, + { fill: '#b64fff', itemValue: 'Australia' }, +]; + +this.geoSeries = new IgxGeographicShapeSeries(); +this.geoSeries.styleShape = this.onStylingShape; +// ... +public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) { + const itemRecord = args.item as IgxShapefileRecord; + const shapeStyle = this.shapeComparisonStyling.getStyle(itemRecord); + args.shapeOpacity = shapeStyle.opacity; + args.shapeFill = shapeStyle.fill; + args.shapeStroke = shapeStyle.stroke; + args.shapeStrokeThickness = shapeStyle.strokeThickness; +} +``` + +## API References + +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-area-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-area-series.md new file mode 100644 index 000000000..b004d01fc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-area-series.md @@ -0,0 +1,312 @@ +--- +title: Angular Map | Data Visualization Tools | Scatter Area Series | Data Binding | Infragistics +_description: Use Infragistics Angular map's scatter area series to draw a colored area surface based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, scatter area series, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap","GeographicScatterAreaSeries","CustomPaletteColorScale", "Series"] +_tocName: Geographic Area Map +_premium: true +--- + +# Angular Geographic Area Map + +In Angular map component, you can use the [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) to draw a colored surface, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data, defined by geographic locations such as weather temperature, precipitation, population distribution, air pollution, etc. + +## Angular Geographic Area Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxCustomPaletteColorScaleComponent } from "igniteui-angular-charts"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicScatterAreaSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltipTemplate: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp"); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); + } + } + } + } + } + + // console.log("loaded contour points: " + contourPoints.length); + this.createContourSeries(contourPoints); + } + + public createContourSeries(data: any[]) { + const brushes = [ + "rgba(32, 146, 252, 0.5)", // semi-transparent blue + "rgba(14, 194, 14, 0.5)", // semi-transparent green + "rgba(252, 120, 32, 0.5)", // semi-transparent orange + "rgba(252, 32, 32, 0.5)" // semi-transparent red + ]; + + const colorScale = new IgxCustomPaletteColorScaleComponent(); + colorScale.palette = brushes; + colorScale.minimumValue = 0; + colorScale.maximumValue = 30; + + const areaSeries = new IgxGeographicScatterAreaSeriesComponent(); + areaSeries.dataSource = data; + areaSeries.longitudeMemberPath = "lon"; + areaSeries.latitudeMemberPath = "lat"; + areaSeries.colorMemberPath = "value"; + areaSeries.colorScale = colorScale; + areaSeries.tooltipTemplate = this.tooltipTemplate; + areaSeries.thickness = 4; + + this.map.series.add(areaSeries); + } +} +``` +```html +
+ + + + +
+ Degrees: {{item.value}} "°F"
+ Longitude: {{item.lon}}
+ Latitude: {{item.lat}} +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) works a lot like the [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. + +## Data Requirements + +Similar to other types of geographic series in the map component, the [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), and [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) properties of the geographic series identify these data column. +The [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. + +## Data Binding + +The following table summarizes properties of GeographicScatterAreaSeries used for data binding. + +| Property Name | Property Type | Description | +|--------------|---------------| ---------------| +|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) property provides no triangulation data.| +|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| +|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the `ItemsSource`.| +|[`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`colorScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorScale) property is set.| +|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| +|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath1)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath2)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath3)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| + +## Color Scale + +Use the ColorScale property of the [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes. +The provided [`IgxCustomPaletteColorScaleComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html) class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. + +The following table list properties of the [`IgxCustomPaletteColorScaleComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html) affecting surface coloring of the GeographicScatterAreaSeries. + +| Property Name | Property Type | Description | +|--------------|---------------| ---------------| +|[`palette`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#palette)| ObservableCollection |Gets or sets the collection of colors to select from or to interpolate between.| +|[`interpolationMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#interpolationMode)|[`ColorScaleInterpolationMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.colorscaleinterpolationmode.html)|Gets or sets the method getting a color from the Palette.| +|[`maximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#maximumValue)|double|The highest value to assign a color. Any given value greater than this value will be Transparent.| +|[`minimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#minimumValue)|double|The lowest value to assign a color. Any given value less than this value will be Transparent.| + +## Code Snippet + +The following code shows how to bind the [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) to triangulation data representing surface temperatures in the world. + + + +```html +
+ + +
+ + +
+ + Degrees: {{item.value}} "°F" + +
+ + Longitude: {{item.lon}} + +
+ + Latitude: {{item.lat}} + +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxCustomPaletteColorScaleComponent } from 'igniteui-angular-charts'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicScatterAreaSeriesComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-geographic-scatter-area-series", + styleUrls: ["./map-geographic-scatter-area-series.component.scss"], + templateUrl: "./map-geographic-scatter-area-series.component.html" +}) +export class MapTypeScatterAreaSeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild ("template") + public tooltipTemplate: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; + sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; + sds.dataBind(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); +} + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp}; + contourPoints.push(item); + } + } + } + } + } + this.createContourSeries(contourPoints); +} + + public createContourSeries(data: any[]) { + const brushes = [ + "rgba(32, 146, 252, 0.5)", // semi-transparent blue + "rgba(14, 194, 14, 0.5)", // semi-transparent green + "rgba(252, 120, 32, 0.5)", // semi-transparent orange + "rgba(252, 32, 32, 0.5)" // semi-transparent red + ]; + + const colorScale = new IgxCustomPaletteColorScaleComponent(); + colorScale.palette = brushes; + colorScale.minimumValue = 0; + colorScale.maximumValue = 30; + + const areaSeries = new IgxGeographicScatterAreaSeriesComponent(); + areaSeries.dataSource = data; + areaSeries.longitudeMemberPath = "lon"; + areaSeries.latitudeMemberPath = "lat"; + areaSeries.colorMemberPath = "value"; + areaSeries.colorScale = colorScale; + areaSeries.tooltipTemplate = this.tooltipTemplate; + areaSeries.thickness = 4; + + this.map.series.add(areaSeries); +} +} +``` + +## API References + +- [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorMemberPath) +- [`colorScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html#colorScale) +- [`IgxCustomPaletteColorScaleComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html) +- [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) +- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) +- `TriangulationSource` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-bubble-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-bubble-series.md new file mode 100644 index 000000000..c74002013 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-bubble-series.md @@ -0,0 +1,303 @@ +--- +title: Angular Map | Data Visualization Tools | Scatter Proportional Series | Data Binding | Infragistics +_description: Use Infragistics Angular map's scatter proportional series to plot markers for the geographic points specified by the data in your application. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, scatter proportional series, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "Series"] +_tocName: Geographic Bubble Map +_premium: true +--- + +# Angular Geographic Bubble Map + +In Angular map component, you can use the [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) to plot bubbles or proportional markers at the geographic locations specified by the data in your application. This map series can be useful for highlighting points of interest in your particular business case like department stores, warehouses, or offices. Also you can use this map series in a fleet management system or a GPS system for dynamic vehicle tracking. + +## Angular Geographic Bubble Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxSizeScaleComponent } from "igniteui-angular-charts"; +import { IgxValueBrushScaleComponent } from "igniteui-angular-charts"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxDataContext } from "igniteui-angular-core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicProportionalSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldLocations } from "./WorldLocations"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltipTemplate: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp"); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); + } + } + } + } + } + + // console.log("loaded contour points: " + contourPoints.length); + this.addSeriesWith(WorldLocations.getAll()); + } + + public addSeriesWith(locations: any[]) { + const sizeScale = new IgxSizeScaleComponent(); + sizeScale.minimumValue = 4; + sizeScale.maximumValue = 60; + + const brushes = [ + "rgba(14, 194, 14, 0.4)", // semi-transparent green + "rgba(252, 170, 32, 0.4)", // semi-transparent orange + "rgba(252, 32, 32, 0.4)" // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent(); + symbolSeries.dataSource = locations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.radiusScale = sizeScale; + symbolSeries.fillScale = brushScale; + symbolSeries.fillMemberPath = "pop"; + symbolSeries.radiusMemberPath = "pop"; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerOutline = "rgba(0,0,0,0.3)"; + symbolSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(symbolSeries); + } + +} +``` +```html +
+ + + + +
+ {{item.name}} +
+ +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The demo above shows the [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. + +## Configuration Summary + +Similar to other types of scatter series in the map control, the [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) series has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) and [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) properties to map these data columns. The [`radiusScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale) and [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) will settings configures the radius for the bubbles. + +The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding. + +| Property|Type|Description | +| ---|---|--- | +| `ItemsSource`|any|Gets or sets the items source | +| [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath)|string|Uses the ItemsSource property to determine the location of the longitude values on the assigned items | +| [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath)|string|Uses the ItemsSource property to determine the location of the latitude values on the assigned items | +| [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath)|string|Sets the path to use to get the radius values for the series. | +| [`radiusScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale)|[`IgxSizeScaleComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsizescalecomponent.html)|Gets or sets the radius scale property for the current bubble series. | +| [`minimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsizescalecomponent.html#minimumValue)|any|Configure the minimum value for calculating value sub ranges. | +| [`maximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsizescalecomponent.html#maximumValue)|any|Configure the maximum value for calculating value sub ranges. | + +## Code Snippet + + + +```html +
+ + +
+ + +
+ + {{item.name}} + +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxSizeScaleComponent } from 'igniteui-angular-charts'; +import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts'; +import { IgxDataContext } from 'igniteui-angular-core'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicProportionalSymbolSeriesComponent } from 'igniteui-angular-maps'; +import { MarkerType } from 'igniteui-angular-charts'; +import { WorldLocations } from "../../utilities/WorldLocations"; + +@Component({ + selector: "app-map-geographic-scatter-proportional-series", + styleUrls: ["./map-geographic-scatter-proportional-series.component.scss"], + templateUrl: "./map-geographic-scatter-proportional-series.component.html" +}) +export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild ("template") + public tooltipTemplate: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; + sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; + sds.dataBind(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); +} + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp"); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp}; + contourPoints.push(item); + } + } + } + } + } + + console.log("loaded contour points: " + contourPoints.length); + this.addSeriesWith(WorldLocations.getAll()); +} + + public addSeriesWith(locations: any[]) { + const sizeScale = new IgxSizeScaleComponent(); + sizeScale.minimumValue = 4; + sizeScale.maximumValue = 60; + + const brushes = [ + "rgba(14, 194, 14, 0.4)", // semi-transparent green + "rgba(252, 170, 32, 0.4)", // semi-transparent orange + "rgba(252, 32, 32, 0.4)" // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent(); + symbolSeries.dataSource = locations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.radiusScale = sizeScale; + symbolSeries.fillScale = brushScale; + symbolSeries.fillMemberPath = "pop"; + symbolSeries.radiusMemberPath = "pop"; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerOutline = "rgba(0,0,0,0.3)"; + symbolSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(symbolSeries); + } +} +``` + +## API References + +- [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath) +- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) +- [`radiusScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html#radiusScale) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-contour-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-contour-series.md new file mode 100644 index 000000000..6ea625cd8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-contour-series.md @@ -0,0 +1,304 @@ +--- +title: Angular Map | Data Visualization Tools | Scatter Contour Series | Data Binding | Infragistics +_description: Use Infragistics Angular map's scatter contour series to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, scatter contour series, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap","GeographicContourLineSeries","CustomPaletteColorScale", "Series"] +_tocName: Geographic Contour Map +_premium: true +--- + +# Angular Geographic Contour Map + +In Angular map component, you can use the [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc. + +## Angular Geographic Contour Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxValueBrushScaleComponent } from "igniteui-angular-charts"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicContourLineSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp"); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); + } + } + } + } + } + + // console.log("loaded contour points: " + contourPoints.length); + this.createContourSeries(contourPoints); + } + + public createContourSeries(data: any[]) { + const brushes = [ + "rgba(32, 146, 252, 0.5)", // semi-transparent blue + "rgba(14, 194, 14, 0.5)", // semi-transparent green + "rgba(252, 120, 32, 0.5)", // semi-transparent orange + "rgba(252, 32, 32, 0.5)" // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const contourSeries = new IgxGeographicContourLineSeriesComponent(); + contourSeries.dataSource = data; + contourSeries.longitudeMemberPath = "lon"; + contourSeries.latitudeMemberPath = "lat"; + contourSeries.valueMemberPath = "value"; + contourSeries.fillScale = brushScale; + contourSeries.tooltipTemplate = this.tooltip; + contourSeries.thickness = 4; + + this.map.series.add(contourSeries); + } +} +``` +```html +
+ + + + + + {{item | number: 2}} "°C" + + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) works a lot like the [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. + +## Data Requirements + +Similar to other types of geographic series in the map component, the [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), and [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) properties of the geographic series. +The [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. + +## Data Binding + +The following table summarizes properties of [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) used for data binding. + +| Property Name | Property Type | Description | +|--------------|---------------| ---------------| +|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) property provides no triangulation data.| +|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| +|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the `ItemsSource`.| +|[`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`fillScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) property is set.| +|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| +|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| + +## Contour Fill Scale + +Use the [`fillScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) property of the [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) to resolve fill brushes of the contour lines of the geographic series. +The provided \`ValueBrushScale class should satisfy most of your coloring needs, but the application for custom coloring logic can inherit the ValueBrushScale class. +The following table list properties of the CustomPaletteColorScale affecting the surface coloring of the GeographicContourLineSeries. + +| Property Name | Property Type | Description | +|--------------|---------------| ---------------| +|[`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html)| +|[`maximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#maximumValue)|double|The highest value to assign a brush in a fill scale.| +|[`minimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcustompalettecolorscalecomponent.html#minimumValue)|double|The lowest value to assign a brush in a fill scale.| + +## Code Snippet + +The following code shows how to bind the [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) to triangulation data representing surface temperatures in the world. + + + +```html +
+ + +
+ + + + {{item | number: 2}} "°C" + + +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts'; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicContourLineSeriesComponent } from 'igniteui-angular-maps'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-geographic-scatter-contour-series", + styleUrls: ["./map-geographic-scatter-contour-series.component.scss"], + templateUrl: "./map-geographic-scatter-contour-series.component.html" +}) + +export class MapTypeScatterContourSeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + + @ViewChild ("template") + public tooltip: TemplateRef; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp"; + sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf"; + sds.dataBind(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp}; + contourPoints.push(item); + } + } + } + } + } + + this.createContourSeries(contourPoints); + } + + public createContourSeries(data: any[]) { + const brushes = [ + "rgba(32, 146, 252, 0.5)", // semi-transparent blue + "rgba(14, 194, 14, 0.5)", // semi-transparent green + "rgba(252, 120, 32, 0.5)", // semi-transparent orange + "rgba(252, 32, 32, 0.5)" // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const contourSeries = new IgxGeographicContourLineSeriesComponent(); + contourSeries.dataSource = data; + contourSeries.longitudeMemberPath = "lon"; + contourSeries.latitudeMemberPath = "lat"; + contourSeries.valueMemberPath = "value"; + contourSeries.fillScale = brushScale; + contourSeries.tooltipTemplate = this.tooltip; + contourSeries.thickness = 4; + + this.map.series.add(contourSeries); + } +} +``` + +## API References + +- [`fillScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#fillScale) +- [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) +- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicxytriangulatingseriescomponent.html#trianglesSource) +- `TriangulationSource` +- [`IgxValueBrushScaleComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluebrushscalecomponent.html) +- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html#valueMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-density-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-density-series.md new file mode 100644 index 000000000..8a4affd7a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-density-series.md @@ -0,0 +1,251 @@ +--- +title: Angular Map | Data Visualization Tools | Scatter High Density Series | Data Binding | Infragistics +_description: Use Infragistics Angular map's scatter high density series to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, scatter high density series, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "Series"] +_tocName: Geographic High Density Map +_premium: true +--- + +# Angular Geographic High Density Map + +In Angular map component, you can use the [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. + +## Angular Geographic High Density Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { WorldUtility } from "./WorldUtility"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + + public geoLocations; + constructor() { + } + + public ngAfterViewInit(): void { + // fetching geographic locations from public JSON folder + fetch("https://static.infragistics.com/xplatform/data/AusPlaces.json") + .then((response) => response.json()) + .then((data) => this.onDataLoaded(data, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + this.geoLocations = sds; + // creating HD series with loaded data + const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent(); + geoSeries.dataSource = sds; + geoSeries.longitudeMemberPath = "x"; + geoSeries.latitudeMemberPath = "y"; + geoSeries.heatMaximumColor = "Red"; + geoSeries.heatMinimumColor = "Black"; + geoSeries.heatMinimum = 0; + geoSeries.heatMaximum = 5; + geoSeries.pointExtent = 1; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.mouseOverEnabled = true; + + // adding HD series to the geographic amp + this.map.series.add(geoSeries); + + // zooming to bound of all geographic locations + const geoBounds = WorldUtility.getBounds(this.geoLocations); + geoBounds.top = 0; + geoBounds.height = -50; + this.map.zoomToGeographic(geoBounds); + } + +} +``` +```html +
+ + + + +
+ {{item.n}} +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The demo above shows the [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. + +Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays areas with the most data using a higher color density representing a cluster of data points. + +## Data Requirements + +Similar to other types of scatter series in the map control, the [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) series has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) and [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) properties to map these data columns. + +### Data Binding + +The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding. + +| Property|Type|Description | +| ---|---|--- | +| `ItemsSource`|any|Gets or sets the items source | +| [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath)|string|Uses the ItemsSource property to determine the location of the longitude values on the assigned items | +| [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath)|string|Uses the ItemsSource property to determine the location of the latitude values on the assigned items | + +## Heat Color Scale + +The Heat Color Scale, an optional feature, determines the color pattern within the series. The following table summarizes the properties used for determining the color scale. + +| Property |Type|Description | +| ---|---|--- | +| [`heatMinimum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimum)|Double|Defines the double value representing the minimum end of the color scale | +| [`heatMaximum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximum)|Double|Defines the double value representing the maximum end of the color scale | +| [`heatMinimumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor)|Color|Defines the point density color used at the bottom end of the color scale | +| [`heatMaximumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor)|Color|Defines the point density color used at the top end of the color scale | + +## Code Example + +The following code demonstrates how set the [`heatMinimumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) and [`heatMaximumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) properties of the [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) + + + +```html +
+ + +
+ + +
+ + {{item.n}} + +
+ +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicHighDensityScatterSeriesComponent } from 'igniteui-angular-maps'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { WorldUtils } from "../../utilities/WorldUtils"; + +@Component({ + selector: "app-map-geographic-scatter-density-series", + styleUrls: ["./map-geographic-scatter-density-series.component.scss"], + templateUrl: ".map-geographic-scatter-density-series.component.html" +}) + +export class MapTypeScatterDensitySeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltip: TemplateRef; + + public geoLocations; + constructor() { + } + + public ngAfterViewInit(): void { + // fetching geographic locations from public JSON folder + fetch("assets/Data/AusPlaces.json") + .then((response) => response.json()) + .then((data) => this.onDataLoaded(data, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + this.geoLocations = sds; + // creating HD series with loaded data + const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent(); + geoSeries.dataSource = sds; + geoSeries.longitudeMemberPath = "x"; + geoSeries.latitudeMemberPath = "y"; + geoSeries.heatMaximumColor = "Red"; + geoSeries.heatMinimumColor = "Black"; + geoSeries.heatMinimum = 0; + geoSeries.heatMaximum = 5; + geoSeries.pointExtent = 1; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.mouseOverEnabled = true; + + // adding HD series to the geographic amp + this.map.series.add(geoSeries); + + // zooming to bound of all geographic locations + const geoBounds = WorldUtils.getBounds(this.geoLocations); + geoBounds.top = 0; + geoBounds.height = -50; + this.map.zoomToGeographic(geoBounds); + } +} +``` + +## API References + +- [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`heatMaximumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMaximumColor) +- [`heatMinimumColor`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#heatMinimumColor) +- `ItemsSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html#longitudeMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-symbol-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-symbol-series.md new file mode 100644 index 000000000..96a506103 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-scatter-symbol-series.md @@ -0,0 +1,214 @@ +--- +title: Angular Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics +_description: Use Infragistics Angular map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, scatter symbol series, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "ShapefileConverter", "Series"] +_tocName: Geographic Symbol Map +_premium: true +--- + +# Angular Geographic Symbol Map + +In Angular map component, you can use the [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests. + +## Angular Geographic Symbol Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldLocations } from "./WorldLocations"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + this.addSeriesWith(WorldLocations.getCities(), "Gray"); + this.addSeriesWith(WorldLocations.getCapitals(), "rgb(32, 146, 252)"); + } + + public addSeriesWith(locations: any[], brush: string) { + const symbolSeries = new IgxGeographicSymbolSeriesComponent (); + symbolSeries.dataSource = locations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "White"; + symbolSeries.markerOutline = brush; + symbolSeries.tooltipTemplate = this.tooltip; + this.map.series.add(symbolSeries); + } +} +``` +```html +
+ + + + +
+
+ {{item.name}}
+ Population {{item.pop}} M +
+ + Population {{item.pop}} M
+ + + + + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Data Requirements + +Similarly to other types of geographic series in the map component, the [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) and [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) properties. The [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) uses values of these mapped data columns to plot symbol elements in the geographic map component. + +## Code Snippet + +The following code shows how to bind the [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) to locations of cities loaded from a shape file using the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html). + + + +```html +
+ + +
+ + +
+
+ + {{item.name}} + +
+ + Population {{item.pop}} M + +
+ + + Population {{item.pop}} M + +
+ + + + + + +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { MarkerType } from 'igniteui-angular-charts'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldLocations } from "../../utilities/WorldLocations"; + +@Component({ + selector: "app-map-geographic-scatter-symbol-series", + styleUrls: ["./map-geographic-scatter-symbol-series.component.scss"], + templateUrl: "./map-geographic-scatter-symbol-series.component.html" +}) + +export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + @ViewChild("template") + public tooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + this.addSeriesWith(WorldLocations.getCities(), "Gray"); + this.addSeriesWith(WorldLocations.getCapitals(), "rgb(32, 146, 252)"); + } + + public addSeriesWith(locations: any[], brush: string) { + const symbolSeries = new IgxGeographicSymbolSeriesComponent (); + symbolSeries.dataSource = locations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerBrush = "White"; + symbolSeries.markerOutline = brush; + symbolSeries.tooltipTemplate = this.tooltip; + this.map.series.add(symbolSeries); + } +} +``` + +## API References + +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- `ItemsSource` +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html#longitudeMemberPath) +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-shape-polygon-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-shape-polygon-series.md new file mode 100644 index 000000000..8cbb1b75e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-shape-polygon-series.md @@ -0,0 +1,309 @@ +--- +title: Angular Map | Data Visualization Tools | Shape Polygon Series | Infragistics +_description: Use Infragistics Angular map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, shape polygon series, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +_tocName: Geographic Polygon Map +_premium: true +--- + +# Angular Geographic Polygon Map + +In Angular map component, you can use the [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations. + +## Angular Geographic Polygon Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicShapeSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + + public data: any; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded /Shapes/WorldCountries.shp " + shapeRecords.length); + + const countriesNATO: any[] = []; + const countriesSCO: any[] = []; + const countriesARAB: any[] = []; + const countriesOther: any[] = []; + + for (const record of shapeRecords) { + // using field/column names from .DBF file + const country = { + name: record.fieldValues.NAME, + org: record.fieldValues.ALLIANCE, + points: record.points, + pop: (record.fieldValues.POPULATION / 1000000).toFixed(1) + }; + + const group = record.fieldValues.ALLIANCE; + if (group === "NATO") { + countriesNATO.push(country); + } else if (group === "SCO") { + countriesSCO.push(country); + } else if (group === "ARAB LEAGUE") { + countriesARAB.push(country); + } else { + countriesOther.push(country); + } + } + + this.addSeriesWith(countriesNATO, "rgb(32, 146, 252)", "NATO"); + this.addSeriesWith(countriesSCO, "rgb(252, 32, 32)", "SCO"); + this.addSeriesWith(countriesARAB, "rgb(14, 194, 14)", "AL"); + this.addSeriesWith(countriesOther, "rgb(146, 146, 146)", "Other"); + } + + public addSeriesWith(shapeData: any[], shapeBrush: string, shapeTitle: string) { + const seriesName = shapeTitle + "series"; + const geoSeries = new IgxGeographicShapeSeriesComponent(); + geoSeries.dataSource = shapeData; + geoSeries.shapeMemberPath = "points"; + geoSeries.brush = shapeBrush; + geoSeries.outline = "Black"; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.thickness = 1; + geoSeries.title = shapeTitle; + + this.map.series.add(geoSeries); + } + } +``` +```html +
+ + + + + +
+
+ {{item.name}}: + {{item.pop}} M +
+ + {{item.org}}
+ + + + + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) works a lot like the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) except that geo-spatial data is rendered with polygons instead of polylines. + +## Data Requirements + +Similar to other types of geographic series in the map control, the [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) property. The [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) uses points of this mapped data column to plot polygons in the map control. + +## Code Snippet + +The following code demonstrates how to bind the [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) to shapes of countries in the world loaded from a shape file using the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html). + + + +```html +
+ + +
+ + +
+
+ + {{item.name}} + +
+ + Population {{item.pop}} M + +
+ + + Population {{item.pop}} M + +
+ + + + + + +``` + +```ts +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-geographic-shape-polygon-series", + styleUrls: ["./map-geographic-shape-polygon-series.component.scss"], + templateUrl: "./map-geographic-shape-polygon-series.component.html" +}) +export class MapTypeShapePolygonSeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + + @ViewChild("template") + public tooltip: TemplateRef; + + public data: any; + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.shapefileSource = "assets/Shapes/WorldCountries.shp"; + sds.databaseSource = "assets/Shapes/WorldCountries.dbf"; + sds.dataBind(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + console.log("loaded /Shapes/WorldCountries.shp " + shapeRecords.length); + + const countriesNATO: any[] = []; + const countriesSCO: any[] = []; + const countriesARAB: any[] = []; + const countriesOther: any[] = []; + + for (const record of shapeRecords) { + // using field/column names from .DBF file + const country = { + name: record.fieldValues.NAME, + org: record.fieldValues.ALLIANCE, + points: record.points, + pop: record.fieldValues.POPULATION + }; + + const group = record.fieldValues.ALLIANCE; + if (group === "NATO") { + countriesNATO.push(country); + } else if (group === "SCO") { + countriesSCO.push(country); + } else if (group === "ARAB LEAGUE") { + countriesARAB.push(country); + } else { + countriesOther.push(country); + } + } + + this.addSeriesWith(countriesNATO, "rgb(32, 146, 252)", "NATO"); + this.addSeriesWith(countriesSCO, "rgb(252, 32, 32)", "SCO"); + this.addSeriesWith(countriesARAB, "rgb(14, 194, 14)", "AL"); + this.addSeriesWith(countriesOther, "rgb(146, 146, 146)", "Other"); + } + + public addSeriesWith(shapeData: any[], shapeBrush: string, shapeTitle: string) { + const seriesName = shapeTitle + "series"; + const geoSeries = new IgxGeographicShapeSeriesComponent(); + geoSeries.dataSource = shapeData; + geoSeries.shapeMemberPath = "points"; + geoSeries.brush = shapeBrush; + geoSeries.outline = "Black"; + geoSeries.tooltipTemplate = this.tooltip; + geoSeries.thickness = 1; + geoSeries.title = shapeTitle; + + this.map.series.add(geoSeries); + } +} +``` + +## API References + +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- `ItemsSource` +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-shape-polyline-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-shape-polyline-series.md new file mode 100644 index 000000000..5a2506491 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map-type-shape-polyline-series.md @@ -0,0 +1,288 @@ +--- +title: Angular Map | Data Visualization Tools | Shape Polyline Series | Infragistics +_description: Use Infragistics Angular map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about Ignite UI for Angular map's series! +_keywords: Angular map, Ignite UI for Angular, shape polyline series, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +_tocName: Geographic Polyline Map +_premium: true +--- + +# Angular Geographic Polyline Map + +In Angular map component, you can use the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports. + +## Angular Geographic Polyline Map Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, EmbeddedViewRef, TemplateRef, ViewChild } from "@angular/core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + + @ViewChild("template", { static: true }) + public tooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + + this.map.updateZoomWindow({ left: 0.195, top: 0.325, width: 0.2, height: 0.1}); + + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/AmericanRoads.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/AmericanRoads.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded /Shapes/AmericanRoads.shp " + shapeRecords.length); + + const roadsUSA: any[] = []; + const roadsMEX: any[] = []; + const roadsCAN: any[] = []; + + // filtering records of loaded shapefile + for (const record of shapeRecords) { + // reading field values loaded from DBF file + const type = record.fieldValues.RoadType; + const road = { + country: record.fieldValues.Country, + length: record.fieldValues.RoadLength / 10, + points: record.points, + type: type === 1 ? "Highway" : "Road" + }; + // grouping road items by country names + if (type === 1 || type === 2) { + if (road.country === "USA") { + roadsUSA.push(road); + } else if (road.country === "MEX") { + roadsMEX.push(road); + } else if (road.country === "CAN") { + roadsCAN.push(road); + } + } + } + + // creating polyline series for roads of each country + this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)"); + this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)"); + this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)"); +} + + public addSeriesWith(shapeData: any[], shapeBrush: string) { + const lineSeries = new IgxGeographicPolylineSeriesComponent (); + lineSeries.dataSource = shapeData; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeFilterResolution = 2.0; + lineSeries.shapeStrokeThickness = 2; + lineSeries.shapeStroke = shapeBrush; + lineSeries.tooltipTemplate = this.tooltip; + this.map.series.add(lineSeries); + } +} +``` +```html +
+ + + + +
+ {{item.country}} {{item.type}}
+ Length: {{item.length}} miles +
+ +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) works a lot like the [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) except that geo-spatial data is rendered with polylines instead of polygons. + +## Data Requirements + +Similarly to other types of geographic series in the control, the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriesbasecomponent.html#shapeMemberPath) property. The [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) uses points of this mapped data column to plot polygons in the control. + +## Code Snippet + +The following code shows how to bind the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) to locations of cities loaded from a shape file using the [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html). + + + +```html +
+ + + +
+ +
+ + {{item.country}} {{item.type}} + +
+ + Length: {{item.length}} miles + +
+ +``` + +```ts +import { AfterViewInit, Component, EmbeddedViewRef, TemplateRef, ViewChild} from "@angular/core"; +import { IgxShapeDataSource } from 'igniteui-angular-core'; +import { IgxIgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-geographic-shape-polyline-series", + styleUrls: ["./map-geographic-shape-polyline-series.component.scss"], + templateUrl: "./map-geographic-shape-polyline-series.component.html" +}) + +export class MapTypeShapePolylineSeriesComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + + @ViewChild("template") + public tooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + this.map.windowRect = { left: 0.195, top: 0.325, width: 0.2, height: 0.1 }; + + const sds = new IgxShapeDataSource(); + sds.shapefileSource = "/assets/Shapes/AmericanRoads.shp"; + sds.databaseSource = "/assets/Shapes/AmericanRoads.dbf"; + sds.dataBind(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + console.log("loaded /Shapes/AmericanRoads.shp " + shapeRecords.length); + + const roadsUSA: any[] = []; + const roadsMEX: any[] = []; + const roadsCAN: any[] = []; + + // filtering records of loaded shapefile + for (const record of shapeRecords) { + // reading field values loaded from DBF file + const type = record.fieldValues.RoadType; + const road = { + country: record.fieldValues.Country, + length: record.fieldValues.RoadLength / 10, + points: record.points, + type: type === 1 ? "Highway" : "Road" + }; + // grouping road items by country names + if (type === 1 || type === 2) { + if (road.country === "USA") { + roadsUSA.push(road); + } else if (road.country === "MEX") { + roadsMEX.push(road); + } else if (road.country === "CAN") { + roadsCAN.push(road); + } + } + } + + // creating polyline series for roads of each country + this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)"); + this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)"); + this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)"); +} + + public addSeriesWith(shapeData: any[], shapeBrush: string) { + const lineSeries = new IgxGeographicPolylineSeriesComponent (); + lineSeries.dataSource = shapeData; + lineSeries.shapeMemberPath = "points"; + lineSeries.shapeFilterResolution = 2.0; + lineSeries.shapeStrokeThickness = 2; + lineSeries.shapeStroke = shapeBrush; + lineSeries.tooltipTemplate = this.tooltip; + this.map.series.add(lineSeries); + } +} +``` + +## API References + +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- `ItemsSource` +- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map.md new file mode 100644 index 000000000..a4ca02a5f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/geo-map.md @@ -0,0 +1,280 @@ +--- +title: Angular Map | Data Visualization Tools | Map Overview | Infragistics +_description: Use Infragistics' Angular JavaScript map to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. View the Ignite UI for Angular map demos! +_keywords: Angular map, geographic map, imagery tiles, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["XamGeographicMap", "Series"] +_tocName: Geographic Map Features +--- + +# Angular Map Overview + +The Ignite UI for Angular map component allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. + +## Angular Map Example + +The following sample demonstrates how display data in [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) also known as Bubble Series. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxGeographicMapModule } from "igniteui-angular-maps"; +import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxGeographicMapModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxSizeScaleComponent } from "igniteui-angular-charts"; +import { IgxValueBrushScaleComponent } from "igniteui-angular-charts"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgxDataContext } from "igniteui-angular-core"; +import { IgxShapeDataSource } from "igniteui-angular-core"; +import { IgxGeographicMapComponent } from "igniteui-angular-maps"; +import { IgxGeographicProportionalSymbolSeriesComponent } from "igniteui-angular-maps"; +import { WorldLocations } from "./WorldLocations"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("map", { static: true }) + public map: IgxGeographicMapComponent; + @ViewChild("template", { static: true }) + public tooltipTemplate: TemplateRef; + + constructor() { + } + + public ngAfterViewInit(): void { + const sds = new IgxShapeDataSource(); + sds.importCompleted.subscribe(() => this.onDataLoaded(sds, "")); + sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.shp"; + sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/WorldTemperatures.dbf"; + sds.dataBind(); + } + + public onDataLoaded(sds: IgxShapeDataSource, e: any) { + const shapeRecords = sds.getPointData(); + // console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp"); + + const contourPoints: any[] = []; + for (const record of shapeRecords) { + const temp = record.fieldValues.Contour; + // using only major contours (every 10th degrees Celsius) + if (temp % 10 === 0 && temp >= 0) { + for (const shapes of record.points) { + for (let i = 0; i < shapes.length; i++) { + if (i % 5 === 0) { + const p = shapes[i]; + const item = { lon: p.x, lat: p.y, value: temp }; + contourPoints.push(item); + } + } + } + } + } + + // console.log("loaded contour points: " + contourPoints.length); + this.addSeriesWith(WorldLocations.getAll()); + } + + public addSeriesWith(locations: any[]) { + const sizeScale = new IgxSizeScaleComponent(); + sizeScale.minimumValue = 4; + sizeScale.maximumValue = 60; + + const brushes = [ + "rgba(14, 194, 14, 0.4)", // semi-transparent green + "rgba(252, 170, 32, 0.4)", // semi-transparent orange + "rgba(252, 32, 32, 0.4)" // semi-transparent red + ]; + + const brushScale = new IgxValueBrushScaleComponent(); + brushScale.brushes = brushes; + brushScale.minimumValue = 0; + brushScale.maximumValue = 30; + + const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent(); + symbolSeries.dataSource = locations; + symbolSeries.markerType = MarkerType.Circle; + symbolSeries.radiusScale = sizeScale; + symbolSeries.fillScale = brushScale; + symbolSeries.fillMemberPath = "pop"; + symbolSeries.radiusMemberPath = "pop"; + symbolSeries.latitudeMemberPath = "lat"; + symbolSeries.longitudeMemberPath = "lon"; + symbolSeries.markerOutline = "rgba(0,0,0,0.3)"; + symbolSeries.tooltipTemplate = this.tooltipTemplate; + + this.map.series.add(symbolSeries); + } + +} +``` +```html +
+ + + + +
+ {{item.name}} +
+ +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. + +The map's Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) can be added for plotting geographic locations such as cities and the [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) for plotting connections (e.g. roads) between these geographic locations. + +The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind. + +NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. + +For more details please visit: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + + + +## Dependencies + +The Angular geographic map component, you need to first install these packages: + +```cmd +npm install --save igniteui-angular-core +npm install --save igniteui-angular-charts +npm install --save igniteui-angular-maps +``` + + + +## Component Modules + +The [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content. + +```ts +// app.module.ts +import { IgxGeographicMapModule } from 'igniteui-angular-maps'; +import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + imports: [ + // ... + IgxGeographicMapModule, + IgxDataChartInteractivityModule + // ... + ] +}) +export class AppModule {} +``` + +```ts +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; + +@Component({ + selector: "app-map-overview", + styleUrls: ["./map-overview.component.scss"], + templateUrl: "./map-overview.component.html" +}) + +export class MapOverviewComponent implements AfterViewInit { + + @ViewChild ("map") + public map: IgxGeographicMapComponent; + constructor() { + } + + public ngAfterViewInit(): void { + this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 }; + } +} +``` + +
+ +## Usage + +Now that the map module is imported, next step is to create geographic map. The following code demonstrates how to do this and enable zooming in the map. + +```html +
+ + +
+``` + +
+ +## Additional Resources + +You can find more information about related Angular map features in these topics: + +- [Geographic Map Navigation](geo-map-navigation.md) + + + +- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md) +- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md) +- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md) +- [Using Scatter Density Series](geo-map-type-scatter-density-series.md) +- [Using Scatter Area Series](geo-map-type-scatter-area-series.md) +- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md) +- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +- [`IgxGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographiccontourlineseriescomponent.html) +- [`IgxGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographichighdensityscatterseriescomponent.html) +- [`IgxGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicpolylineseriescomponent.html) +- [`IgxGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) +- [`IgxGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicproportionalsymbolseriescomponent.html) +- [`IgxGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicsymbolseriescomponent.html) +- [`IgxGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicscatterareaseriescomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md new file mode 100644 index 000000000..688443f4e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-advanced-filtering.md @@ -0,0 +1,245 @@ +--- +_tocName: Advanced Filtering +_premium: true +--- +--- title: Advanced Filtering in Angular Data Grid - Ignite UI for Angular _description: Learn how to configure advanced filter of data with the Angular table. The grid advanced filtering is more convenient and engaging than ever. _keywords: advanced filter, igniteui for angular, infragistics _license: commercial --- # Angular Grid Advanced Filtering The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the Grid. ## Angular Grid Advanced Filtering Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-advanced-filtering-sample', + styleUrls: ['./grid-advanced-filtering-sample.component.scss'], + templateUrl: 'grid-advanced-filtering-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class GridAdvancedFilteringSampleComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public formatCurrency(val: string) { + return '$' + parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} +```
## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. The dialog is using the [`IgxQueryBuilder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxquerybuildercomponent.html) component to generate,display and edit the filtering logic. You can have a look at the [`Query Builder topic`](../query-builder.md#getting-started-with-ignite-ui-for-angular-query-builder) for details on the interaction process. In order to filter the data once you are ready with creating the filtering conditions and groups, you should click the **Apply** button. If you have modified the advanced filter, but you don't want to preserve the changes, you should click the **Cancel** button. You could also clear the advanced filter by clicking the **Clear Filter** button. ## Usage To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowAdvancedFiltering) input property should be set to `true`. ```html + ``` The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/filteringexpressionstree.html) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#advancedFilteringExpressionsTree) input property. You could use this property to set an initial state of the advanced filtering. ```typescript ngAfterViewInit(): void { + const tree = new FilteringExpressionsTree(FilteringLogic.And); + tree.filteringOperands.push({ + fieldName: 'ID', + condition: IgxStringFilteringOperand.instance().condition('contains'), + searchVal: 'a', + ignoreCase: true + }); + const subTree = new FilteringExpressionsTree(FilteringLogic.Or); + subTree.filteringOperands.push({ + fieldName: 'ContactTitle', + condition: IgxStringFilteringOperand.instance().condition('doesNotContain'), + searchVal: 'b', + ignoreCase: true + }); + subTree.filteringOperands.push({ + fieldName: 'CompanyName', + condition: IgxStringFilteringOperand.instance().condition('startsWith'), + searchVal: 'c', + ignoreCase: true + }); + tree.filteringOperands.push(subTree); + + this.grid.advancedFilteringExpressionsTree = tree; } ``` In case you don't want to show the Grid toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. >[!NOTE] >You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the Grid. Both filtering user interfaces will work independently of one another. The final filtered result in the Grid is the intersection between the results of the two filters. ## External Advanced filtering As you see the demo above the Advanced filtering dialog is hosted in an overlay on top of the Grid. When the setup in the dialog is ready, the apply or close actions would hide that dialog. There is a way to make that dialog stay always visible - be used as a standalone component. In the demo below, the advanced filtering dialog is declared separately of the Grid. ### Demo ```typescript +import { Component } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxAdvancedFilteringDialogComponent, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; +@Component({ + selector: 'app-grid-external-advanced-filtering', + templateUrl: './grid-external-advanced-filtering.component.html', + styleUrls: ['./grid-external-advanced-filtering.component.scss'], + imports: [IgxAdvancedFilteringDialogComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class GridExternalAdvancedFilteringComponent { + + public data: any; + + constructor() { + this.data = DATA; + } +} +``` +```html +
+ + + + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +.grid__wrapper { + display: flex; + flex-flow: column; + margin: 15px; + align-items: stretch; +} + +.advanced-dialog { + margin-bottom: 2px; + height: 325px; + overflow-y: auto; +} +``` ### Usage It's super easy to configure the advanced filtering to work outside of the Grid. All you need to do is to create the dialog and set its [`grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html#grid) property: ```html ``` You can also see how our [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder) can streamline the entire design-to-Angular-code story.
## Styling To get started with styling the Advanced Filtering dialog, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Since the Advanced Filtering dialog uses the [`IgxQueryBuilder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxquerybuildercomponent.html) component, you can use the [`query-builder-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#query-builder-theme) to style it. To style the header title, you can create a custom theme that extends the [`query-builder-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#query-builder-theme) and set the `$header-foreground` parameter. ```scss $custom-query-builder: query-builder-theme( + $header-foreground: #512da8 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component theme in our application. ```scss $custom-query-builder: query-builder-theme( + $header-foreground: #512da8, + $color-expression-group-and: #eb0000, + $color-expression-group-or: #0000f3, + $subquery-header-background: var(--ig-gray-300), + $subquery-border-color: var(--ig-warn-500), + $subquery-border-radius: rem(4px) ); igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); } ``` >[!NOTE] >We include the created **query-builder-theme** within `igx-advanced-filtering-dialog`, so that this custom theme will affect only the query builder nested in the advanced filtering dialog. Otherwise other query builder components in the application would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss $custom-query-builder: query-builder-theme( + $header-foreground: #512da8, + $color-expression-group-and: #eb0000, + $color-expression-group-or: #0000f3, + $subquery-header-background: var(--ig-gray-300), + $subquery-border-color: var(--ig-warn-500), + $subquery-border-radius: rem(4px) ); :host { + ::ng-deep { + igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); + } + } } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-adf-style-sample', + styleUrls: ['./grid-advanced-filtering-style.component.scss'], + templateUrl: 'grid-advanced-filtering-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class GridAdvancedFilteringStyleComponent implements OnInit { + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + constructor() { + } + + public ngOnInit(): void { + this.data = DATA; + } + + public formatCurrency(val: string) { + return '$' + parseInt(val, 10).toFixed(2); + } +} +``` +```html + + + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +``` +```scss +@use "igniteui-angular/theming" as *; + +$custom-query-builder: query-builder-theme( + $header-foreground: #512da8, + $color-expression-group-and: #eb0000, + $color-expression-group-or: #0000f3, + $subquery-header-background: var(--ig-gray-300), + $subquery-border-color: var(--ig-warn-500), + $subquery-border-radius: rem(4px) +); + +:host { + @include tokens($custom-query-builder); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Filtering](filtering.md) - [Excel Style Filtering](excel-style-filtering.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md new file mode 100644 index 000000000..b6bfd0270 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-batch-editing.md @@ -0,0 +1,502 @@ +--- +_tocName: Batch Editing +_premium: true +--- +--- title: Batch Editing and Transactions in Angular Grid Grid - Infragistics _description: Perform data manipulation without affecting the underlying data with Grid Batch Editing and Angular CRUD, using Angular Data Grid. See demos & examples! _keywords: angular crud, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Batch Editing and Transactions @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { The Batch Editing feature of the IgxGrid is based on the [`TransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtransactionservice.html). Follow the [`Transaction Service class hierarchy`](../transaction-classes.md) topic to see an overview of the `igxTransactionService` and details how it is implemented. } Below is a detailed example of how is Batch Editing enabled for the Grid component. ## Angular Grid Batch Editing and Transactions Example The following sample demonstrates a scenario, where the grid has [`batchEditing`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#batchEditing) enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed. ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { DATA } from '../../data/nwindData'; +import { generateRandomInteger } from '../../data/utils'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-row-edit', + styleUrls: [`grid-batch-editing-sample.component.scss`], + templateUrl: 'grid-batch-editing-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxButtonDirective, IgxDialogComponent] +}) +export class GridBatchEditingSampleComponent implements OnInit { + @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; + @ViewChild(IgxDialogComponent, { static: true }) public dialog: IgxDialogComponent; + + public data: any[]; + public transactionsData: Transaction[] = []; + private addProductId: number; + + public ngOnInit(): void { + this.data = DATA; + this.addProductId = this.data.length + 1; + } + + public addRow() { + this.grid.addRow({ + CategoryID: generateRandomInteger(1, 10), + Discontinued: generateRandomInteger(1, 10) % 2 === 0, + OrderDate: new Date(generateRandomInteger(2000, 2050), + generateRandomInteger(0, 11), generateRandomInteger(1, 25)) + .toISOString().slice(0, 10), + ProductID: this.addProductId++, + ProductName: 'Product with index ' + generateRandomInteger(0, 20), + QuantityPerUnit: (generateRandomInteger(1, 10) * 10).toString() + ' pcs.', + ReorderLevel: generateRandomInteger(10, 20), + SupplierID: generateRandomInteger(1, 20), + UnitPrice: generateRandomInteger(10, 1000), + UnitsInStock: generateRandomInteger(1, 100), + UnitsOnOrder: generateRandomInteger(1, 20) + }); + } + + public deleteRow(id) { + this.grid.deleteRow(id); + } + + public undo() { + /* exit edit mode and commit changes */ + this.grid.endEdit(true); + this.grid.transactions.undo(); + } + + public redo() { + /* exit edit mode and commit changes */ + this.grid.endEdit(true); + this.grid.transactions.redo(); + } + + public openCommitDialog() { + this.transactionsData = this.grid.transactions.getAggregatedChanges(true); + this.dialog.open(); + } + + public commit() { + this.grid.transactions.commit(this.data); + this.dialog.close(); + } + + public discard() { + this.grid.transactions.clear(); + this.dialog.close(); + } + + public stateFormatter(value: any) { + return JSON.stringify(value); + } + + public typeFormatter(value: string) { + return value.toUpperCase(); + } + + public classFromType(type: string): string { + return `transaction--${type.toLowerCase()}`; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + +
+ +
+ + + +
+
+ + + + + + {{ typeFormatter(val) }} + + + + + {{ stateFormatter(val) }} + + + +
+ + + +
+ +
+``` +```scss +.grid__wrapper { + margin: 15px; +} + +h4 { + text-align: center; + padding-top: 2%; + padding-bottom: 2%; +} +.buttons-row { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px; +} +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0; +} + +.transaction--update, .transaction--delete, .transaction--add { + font-weight: 600; +} +.transaction--add { + color: #6b3; +} +.transaction--update { + color: #4a71b9; +} +.transaction--delete { + color: #ee4920; +} +.transaction-log { + word-wrap: none; +} +```
> [!NOTE] > Transaction state consists of all the updated, added and deleted rows, and their last states. ## Usage To get started import the `IgxGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxGridModule], + ... }) export class AppModule {} ``` Then, all you need to do is enable `batchEditing` from your Grid: ```html + ... ``` This will ensure a proper instance of `Transaction` service is provided for the igx-grid. The proper `TransactionService` is provided through a `TransactionFactory`. You can learn more about this internal implementation in the [transactions topic](../transaction-classes.md#transaction-factory). After batch editing is enabled, define a `IgxGrid` with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) set to true and bind: ```html + ... ... ... ``` The following code demonstrates the usage of the [`transactions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtransactionservice.html#) API - undo, redo, commit. ```typescript export class GridBatchEditingSampleComponent { + @ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent; + + public undo() { + /* exit edit mode and commit changes */ + this.grid.endEdit(true); + this.grid.transactions.undo(); + } + + public redo() { + /* exit edit mode and commit changes */ + this.grid.endEdit(true); + this.grid.transactions.redo() + } + + public commit() { + this.grid.transactions.commit(this.data); + this.toggle.close(); + } } ``` > [!NOTE] > The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, `Grid` would stay in edit mode. One way to do that is by calling [`endEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#endEdit) in the respective method. > [!NOTE] > Disabling [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) property will modify `Grid` to create transactions on cell change and will not expose row editing overlay in the UI. ## Remote Paging with Batch Editing Demo [Check out the full demo configuration](remote-data-operations.md#remote-paging-with-batch-editing) ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { Observable } from 'rxjs'; +import { RemotePagingWithBatchEditingService } from '../../services/remotePagingWithBatchEditing.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingWithBatchEditingService], + selector: 'app-remote-paging-batch-editing', + styleUrls: ['./batch-editing-remote-paging.component.scss'], + templateUrl: './batch-editing-remote-paging.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxDialogComponent, AsyncPipe] +}) +export class RemotePagingBatchEditingComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingWithBatchEditingService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + @ViewChild(IgxDialogComponent, { static: true }) public dialog: IgxDialogComponent; + + public page = 0; + public totalCount = 0; + public data: Observable; + public selectOptions = [5, 10, 15, 25, 50]; + public transactionsData: Transaction[] = []; + + private _perPage = 10; + private _dataLengthSubscriber; + private _recordsOnServer = 0; + private _totalPagesOnServer = 0; + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this._totalPagesOnServer = Math.floor(this._recordsOnServer / this.perPage); + this.paginate(0); + } + + public ngOnInit() { + this.data = this.remoteService.data$; + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + this._recordsOnServer = data; + this._totalPagesOnServer = Math.floor(this.totalCount / this.perPage); + }); + this.remoteService.getData(0, this.perPage).subscribe(() => { + this.grid1.isLoading = false; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.grid1.isLoading = true; + } + + public paginate(page: number) { + this.grid1.isLoading = true; + this.grid1.endEdit(true); + if (page > this._totalPagesOnServer) { + if (this.page !== this._totalPagesOnServer) { + const skipEl = this._totalPagesOnServer * this.perPage; + this.remoteService.getData(skipEl, skipEl + this.perPage); + } + this.grid1.isLoading = false; + this.grid1.paginator.page = page - this._totalPagesOnServer; + this.page = page; + return; + } else if (this.grid1.paginator) { + const newPage = page - this._totalPagesOnServer > -1 ? page - this._totalPagesOnServer : 0; + this.grid1.paginator.page = newPage; + } + const skip = page * this.perPage; + this.remoteService.getData(skip, skip + this.perPage); + this.page = page; + } + + public addRow() { + this.totalCount++; + const newID = this.generateRandomInteger(this.totalCount, this.totalCount * 100); + this.grid1.addRow({ + ID: newID, ProductName: 'Product Name', QuantityPerUnit: 'Quantity per Unit', + SupplierName: 'Supplier Name', UnitsInStock: 1, Rating: 1 + }); + } + + public deleteRow(rowID) { + const isTransaction = !this.grid1.data.some(d => d.ID === rowID); + if (isTransaction) { + this.totalCount--; + } + this.grid1.deleteRow(rowID); + if (isTransaction && this.grid1.dataView.length === 1) { + this.paginate(this.page - 1); + } + } + + public generateRandomInteger(start: number, end: number) { + return Math.floor(Math.random() * (end - start + 1)) + start; + } + + public undo() { + this.grid1.transactions.undo(); + this.computeTotalCount(); + this.preventDisplayingEmptyPages(); + } + + public redo() { + this.grid1.transactions.redo(); + this.computeTotalCount(); + this.preventDisplayingEmptyPages(); + } + + public openCommitDialog() { + this.transactionsData = this.grid1.transactions.getAggregatedChanges(true); + this.dialog.open(); + } + + public commit() { + this.grid1.isLoading = true; + this.dialog.close(); + const aggregatedChanges = this.grid1.transactions.getAggregatedChanges(true); + this.remoteService.processBatch(aggregatedChanges).subscribe({ + next: (count: number) => { + this.totalCount = count; + this._recordsOnServer = count; + this.grid1.transactions.commit(this.grid1.data); + this.preventDisplayingEmptyPages(); + }, + error: err => { + console.log(err); + }, + complete: () => { + this.grid1.isLoading = false; + } + }); + } + + public cancel() { + this.dialog.close(); + } + + public discard() { + this.grid1.transactions.clear(); + this.totalCount = this._recordsOnServer; + this.preventDisplayingEmptyPages(); + this.dialog.close(); + } + + public get hasTransactions(): boolean { + return this.grid1.transactions.getAggregatedChanges(false).length > 0; + } + + public stateFormatter(value: string) { + return JSON.stringify(value); + } + + public typeFormatter(value: string) { + return value.toUpperCase(); + } + + public classFromType(type: string): string { + return `transaction--${type.toLowerCase()}`; + } + + private preventDisplayingEmptyPages() { + this._totalPagesOnServer = Math.floor(this._recordsOnServer / this.perPage); + + const totalPages = Math.floor(this.totalCount / this.perPage); + if (this.page > 0 && + (this.page > totalPages || + (this.page === totalPages && + this.totalCount % this.perPage === 0))) { + this.paginate(totalPages - 1); + } + } + + private computeTotalCount() { + this.totalCount = this._recordsOnServer + this.grid1.transactions.getAggregatedChanges(true).filter(rec => rec.type === 'add').length; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ stateFormatter(val) }} + + + +
+ + + +
+ +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +.buttons-row { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px; +} +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0; +} +.transaction--update, .transaction--delete, .transaction--add { + font-weight: 600; +} +.transaction--add { + color: #6b3; +} +.transaction--update { + color: #4a71b9; +} +.transaction--delete { + color: #ee4920; +} +.transaction-log { + word-wrap: none; +} + +igx-paginator { + igx-paginator { + padding: 0 !important; + } +} +``` ## API References - [transactions](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#transactions) - [igxTransactionService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtransactionservice.html) ## Additional Resources - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Grid Overview](grid.md) - [Grid Editing](editing.md) - [Grid Row Editing](row-editing.md) - [Grid Row Adding](row-adding.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md new file mode 100644 index 000000000..e8d22c3e0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cascading-combos.md @@ -0,0 +1,241 @@ +--- +_tocName: Grid with Cascading combos +_premium: true +--- +--- title: Cascading combos in Angular Grid Grid - Infragistics _description: Grid with Cascading Combos. See the sample here. _keywords: angular cascading combos with grid, ignite ui for angular, infragistics _license: commercial --- # Angular Grid with Cascading Combos The Grid's Editing functionality provides with the opportunity to use [Cascading Combos](../simple-combo.md#cascading-scenario). By selecting the value in any preceding [Combos](../combo.md), the users will receive only the data that is relevant to their selection within the next Combo. ## Angular Grid with Cascading Combos Sample Overview The sample below demonstrates how `Grid` works with nested `Cascading Combos`. ```typescript +import { Component, OnInit, QueryList, ViewChildren } from '@angular/core'; +import { ISimpleComboSelectionChangingEventArgs, IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; +import { Country, getCitiesByCountry, getCountries } from '../../data/cities15000-regions-countries'; +import { DATA } from '../../data/data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'grid-cascading-combos', + templateUrl: './grid-cascading-combos.component.html', + styleUrls: ['./grid-cascading-combos.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSimpleComboComponent, FormsModule, IgxLinearProgressBarComponent] +}) +export class GridCascadingCombosComponent implements OnInit { + @ViewChildren(IgxSimpleComboComponent) + public combos: QueryList; + + public selectedCountryName: string; + public selectedRegionName: string; + public selectedCityId: number; + public countriesData: Country[]; + private loadingTime = 0; + public data; + + public ngOnInit() { + this.data = DATA; + this.countriesData = getCountries([ + 'United States', + 'Japan', + 'United Kingdom' + ]); + } + + public countryChanging(e: ISimpleComboSelectionChangingEventArgs, cell) { + const ID = cell.row.data.ID; + cell.row.data.loadingRegion = true; + const nextRegionCombo = this.combos.filter( + (combo) => combo.id === 'region-' + ID + )[0]; + const nextCityCombo = this.combos.filter( + (combo) => combo.id === 'city-' + ID + )[0]; + this.clearOldData(cell, nextRegionCombo, nextCityCombo); + this.selectedCountryName = e.newValue; + cell.update(e.newValue ? e.newValue : ''); + if (e.newValue) { + this.loadingTime = 2000; + } + setTimeout(() => { + nextRegionCombo.data = getCitiesByCountry([this.selectedCountryName]) + .map((c) => ({ name: c.region, country: c.country })) + .filter((v, i, a) => a.findIndex((r) => r.name === v.name) === i); + cell.row.data.loadingRegion = false; + }, this.loadingTime); + this.selectedRegionName = null; + this.selectedCityId = null; + this.loadingTime = 0; + } + + public regionChanging(e: ISimpleComboSelectionChangingEventArgs, cell) { + const nextComboID = 'city-' + cell.row.data.ID; + cell.row.data.loadingCity = true; + const cityCombo = this.combos.filter( + (combo) => combo.id === nextComboID + )[0]; + this.clearOldData(cell, null, cityCombo); + + this.selectedRegionName = e.newValue; + cell.update(e.newValue ? e.newValue : ''); + if (e.newValue) { + this.loadingTime = 2000; + } + setTimeout(() => { + cityCombo.data = getCitiesByCountry([this.selectedCountryName]).filter( + (c) => c.region === this.selectedRegionName + ); + cell.row.data.loadingCity = false; + }, this.loadingTime); + this.selectedCityId = null; + this.loadingTime = 0; + } + public cityChanging(e: ISimpleComboSelectionChangingEventArgs, cell) { + cell.update(e.newValue); + this.selectedCityId = e.newValue; + } + + private clearOldData(cell, RegionCombo, CityCombo) { + const nextCellIndex = cell.column.visibleIndex + 1; + cell.row.cells[nextCellIndex].update(''); + + if (CityCombo !== null) { + CityCombo.data = []; + } + if (RegionCombo !== null) { + RegionCombo.data = []; + cell.row.cells[nextCellIndex + 1].update(''); + } + } +} +``` +```html +
+
+ + + + + + + + + + + +
+ + + @if (cell.row.data.loadingRegion) { + + + } +
+ + + + +
+ + + @if (cell.row.data.loadingCity) { + + + } +
+ + + +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + padding: 16px; + + igx-simple-combo { + --ig-size: var(--ig-size-small); + } +} + +.dialogNewRecord { + > * { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } + + #discontinued { + margin-top: 15px; + } +} + +:host{ + ::ng-deep{ + .igx-grid { + margin-top: 10px; + } + .igx-checkbox { + margin-top: 5px; + margin-bottom: 5px; + padding-top: 8px; + padding-bottom: 5px; + } + .reorderLevelInput { + color: black; + width: 100%; + } + @media screen and (max-width: 934px) { + .igx-grid { + overflow-x: none; + } + } + } +} + +.default-theme { + .addProdBtn.igx-button--contained { + background-color: lightgrey; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.26) + } + } +} +``` ## Setup In order enable column editing, make sure [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) property is set to **true**. Once the column editing is enabled, you can start by adding your [Single Select ComboBox](../simple-combo.md). Please note that here in order to have only one single selection available, you will need to use [igxSimpleCombo](../simple-combo.md) instead of modifying the igxCombo. To get started with the [Simple ComboBox component](../simple-combo.md#angular-simple-combobox-features), first you need to import the `IgxSimpleComboModule` in your **app.module.ts** file: ```typescript import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo'; @NgModule({ + imports: [ + ... + IgxSimpleComboModule, + ... + ] }) export class AppModule {} ``` Then, in the template, you should bind the combos [igx-simple-combo](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsimplecombocomponent.html) to some data. - `displayKey` - _Required for object arrays_ - Specifies which property will be used for the items' text. If no value is specified for [displayKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxSimpleComboComponent.html#displayKey), the simple combobox will use the specified `valueKey` (if any). ```typescript export class MySimpleComboComponent implements OnInit { + public countriesData: Country[]; + public selectedCountry: Country; + public selectedCity: City; + + public ngOnInit() { + this.countriesData = getCountries([ + 'United States', + 'Japan', + 'United Kingdom' + ]); + } } ``` In order to handle the selection change, we need [selectionChanging()](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#selectionChanging). The emitted event arguments, [IComboSelectionChangingEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icomboselectionchangingeventargs.html), contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo. ```html ``` ```typescript public countryChanging(event: IComboSelectionChangeEventArgs) { + if (event.added.length) { + event.newSelection = event.added; + } } ``` And lastly, adding the [Linear Progress](../linear-progress.md), which is required while loading the list of data. The [`id`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlinearprogressbarcomponent.html#id) is necessary to set the value of `id` attribute. ```html + ``` ## API References
- [IgxSimpleComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsimplecombocomponent.html) - [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) - [IgxLinearProgressBarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlinearprogressbarcomponent.html) - [IgxLinearProgressBarComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-progress-linear-theme) ## Additional Resources - [Grid Editing](editing.md) - [Single Select ComboBox](../simple-combo.md) - [Cascading Combos](../simple-combo.md#cascading-scenario) - [Linear Progress](../linear-progress.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md new file mode 100644 index 000000000..ac7ff6d56 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-editing.md @@ -0,0 +1,762 @@ +--- +_tocName: Cell Editing +_premium: true +--- +--- title: Cell Editing in Angular Data Grid - Ignite UI for Angular _description: The Grid is using in-cell editing. It has a default cell editing template, but it also lets you define your own custom templates for update-data action. Try it now! _keywords: data manipulation, ignite ui for angular, infragistics, excel editing _license: commercial --- # Angular Grid Cell Editing Ignite UI for Angular Grid component provides a great data manipulation capabilities and powerful API for Angular CRUD operations. By default the Grid is using **in cell** editing and different editors will be shown based on the column data type, thanks to the **default cell editing template**. In addition, you can define your own custom templates for update-data actions and to override the default behavior for committing and discarding any changes. ## Angular Grid cell editing and edit templates Example ```typescript +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSummaryResult, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxButtonDirective, IgxFocusDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { DATA, LOCATIONS } from './data'; +import { Product } from './product'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; +import { DatePipe } from '@angular/common'; + +class NumberSummary { + public operate(data: any[]): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }); + result.push({ + key: 'sum', + label: 'Sum', + summaryResult: IgxNumberSummaryOperand.sum(data) + }); + result.push({ + key: 'avg', + label: 'Avg', + summaryResult: IgxNumberSummaryOperand.average(data) + }); + return result; + } + } +@Component({ + selector: 'app-grid-editing-sample', + styleUrls: ['./grid-editing-sample.component.scss'], + templateUrl: './grid-editing-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxButtonDirective, IgxIconComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, FormsModule, IgxComboComponent, IgxFocusDirective, IgxIconButtonDirective, IgxToastComponent, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDatePickerComponent, IgxCheckboxComponent, DatePipe] +}) +export class GridEditingSampleComponent implements OnInit, AfterViewInit { + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + @ViewChild('dialogAdd', { read: IgxDialogComponent, static: true }) + public dialog: IgxDialogComponent; + @ViewChild('toast', { read: IgxToastComponent, static: false }) + public toast: IgxToastComponent; + public data; + public locations; + public product; + public customOverlaySettings; + public id; + public numSummary = NumberSummary; + + public ngOnInit() { + this.data = DATA.map((e) => { + const index = Math.floor(Math.random() * LOCATIONS.length); + const count = Math.floor(Math.random() * 3) + 1; + e.Locations = [...LOCATIONS].splice(index, count); + return e; + }); + this.id = this.data.length; + this.product = new Product(this.id); + this.locations = LOCATIONS; + } + + public ngAfterViewInit() { + this.customOverlaySettings = { + outlet: this.grid1.outlet + }; + } + + public removeRow(rowIndex) { + const row = this.grid1.getRowByIndex(rowIndex); + row.delete(); + } + + public addRow() { + const id = this.product.ProductID; + this.grid1.addRow(this.product); + this.grid1.cdr.detectChanges(); + this.cancel(); + this.grid1.paginator.page = this.grid1.paginator.totalPages - 1; + this.grid1.cdr.detectChanges(); + let row; + requestAnimationFrame(() => { + const index = this.grid1.filteredSortedData ? this.grid1.filteredSortedData.map(rec => rec['ProductID']).indexOf(id) : + (row = this.grid1.getRowByKey(id) ? row.index : undefined); + this.grid1.navigateTo(index, -1); + }); + } + + public cancel() { + this.dialog.close(); + this.id++; + this.product = new Product(this.id); + } + + // eslint-disable-next-line @typescript-eslint/member-delimiter-style + public parseArray(arr: { shop: string, lastInventory: string}[]): string { + return (arr || []).map((e) => e.shop).join(', '); + } + + public show(args) { + const message = `The product: {name: ${args.data.ProductName}, ID ${args.data.ProductID} } has been removed!`; + this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle; + this.toast.open(message); + } +} +``` +```html +
+
+ + + + + + + + + + + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + + + + + + + + {{ parseArray(cell.value) }} + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + Discontinued + + + + +
+ +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + padding: 16px; +} + +.dialogNewRecord { + > * { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } + + #discontinued { + margin-top: 15px; + } +} + +:host{ + ::ng-deep{ + .igx-grid { + margin-top: 10px; + } + .igx-checkbox { + margin-top: 5px; + margin-bottom: 5px; + padding-top: 8px; + padding-bottom: 5px; + } + .reorderLevelInput { + color: black; + width: 100%; + } + @media screen and (max-width: 934px) { + .igx-grid { + overflow-x: none; + } + } + } +} + +.default-theme { + .addProdBtn.igx-button--contained { + background-color: lightgrey; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.26) + } + } +} +```
> [!NOTE] >By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](../select.md), [`igxCombo`](../combo.md), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. ## Cell Editing ### Editing through UI You can enter edit mode for specific cell, when an editable cell is focused in one of the following ways: - on double click; - on single click - Single click will enter edit mode only if the previously selected cell was in edit mode and currently selected cell is editable. If the previously selected cell was not in edit mode, single click will select the cell without entering edit mode; - on key press `Enter`; - on key press `F2`; You can exit edit mode **without committing** the changes in one of the following ways: - on key press `Escape`; - when you perform _sorting_, _filtering_, _searching_ and _hiding_ operations; You can exit edit mode and **commit** the changes in one of the following ways: - on key press `Enter`; - on key press `F2`; - on key press `Tab`; - on single click to another cell - when you click on another cell in the Grid, your changes will be submitted. - operations like paging, resize, pin or move will exit edit mode and changes will be submitted. > [!NOTE] > The cell remains in edit mode when you scroll vertically or horizontally or click outside the Grid. This is valid for both cell editing and row editing. ### Editing through API You can also modify the cell value through the IgxGrid API but only if primary key is defined: ```typescript public updateCell() { + this.grid1.updateCell(newValue, rowID, 'ReorderLevel'); } ``` Another way to update cell is directly through [`update`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#update) method of [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html): ```typescript public updateCell() { + const cell = this.grid1.getCellByColumn(rowIndex, 'ReorderLevel'); + // You can also get cell by rowID if primary key is defined + // cell = this.grid1.getCellByKey(rowID, 'ReorderLevel'); + cell.update(70); } ``` ### Cell Editing Templates You can see and learn more for default cell editing templates in the [general editing topic](editing.md#editing-templates). If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the [`igxCellEditor` directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcelltemplatedirective.html). To do this, you need to pass an `ng-template` marked with the `igxCellEditor` directive and properly bind your custom control to the [`cell.editValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#editValue): ```html + + + + {{ class }} + + + ``` This code is used in the sample below which implements an [`IgxSelectComponent`](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns. ```typescript +import { Character } from './characters'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxFocusDirective } from 'igniteui-angular/directives'; +import { DATA, ALIGNMENTS, RACES, CLASSES } from './data'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-grid-select-sample', + styleUrls: ['./grid-select-sample.component.scss'], + templateUrl: './grid-select-sample.component.html', + imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent] +}) +export class GridSelectComponent implements OnInit { + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public alignments; + public races; + public classes; + public character; + + public generateRandomData(data) { + return data.map((e) => { + const indexAlignments = Math.floor(Math.random() * ALIGNMENTS.length); + e.alignment = ALIGNMENTS[indexAlignments]; + const indexRaces = Math.floor(Math.random() * RACES.length); + e.race = RACES[indexRaces]; + const indexClasses = Math.floor(Math.random() * CLASSES.length); + e.class = CLASSES[indexClasses]; + return e; + }); + } + + public ngOnInit() { + this.data = this.generateRandomData(DATA); + this.character = new Character(); + this.alignments = ALIGNMENTS; + this.races = RACES; + this.classes = CLASSES; + } +} +``` +```html + + + + + + + @for (race of races; track race) { + + {{ race }} + + } + + + + + + + @for (class of classes; track class) { + + {{ class }} + + } + + + + + + + + + @for (alignment of alignments; track alignment) { + + {{ alignment }} + + } + + + + +``` +```scss +:host { + display: block; + padding: 16px; +} +```
> [!NOTE] > Any changes made to the cell's [`editValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#editValue) in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the [transaction state](batch-editing.md) (if transactions are enabled). > [!NOTE] > The cell template [`igxCell`](../grid/grid.md#cell-template) controls how a column's cells are shown when outside of edit mode. > The cell editing template directive `igxCellEditor`, handles how a column's cells in edit mode are displayed and controls the edited cell's edit value. > [!NOTE] >By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](../select.md), [`igxCombo`](../combo.md), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. For more information on how to configure columns and their templates, you can see the documentation for [Grid Columns configuration](../grid/grid.md#angular-grid-column-configuration). ### Grid Excel Style Editing Using Excel Style Editing allows the user to navigate trough the cells just as he would using the Excel, and ever so quickly edit them. Implementing this custom functionality can be done by utilizing the events of the grid. First we hook up to the grid's keydown events, and from there we can implement two functionalities: - Constant edit mode ```typescript public keydownHandler(event) { + const key = event.keyCode; + const grid = this.grid; + const activeElem = grid.navigation.activeNode; + + if( + (key >= 48 && key <= 57) || + (key >= 65 && key <= 90) || + (key >= 97 && key <= 122)){ + // Number or Alphabet upper case or Alphabet lower case + const columnName = grid.getColumnByVisibleIndex(activeElem.column).field; + const cell = grid.getCellByColumn(activeElem.row, columnName); + if (cell && !cell.editMode) { + cell.editMode = true; + cell.editValue = event.key; + this.shouldAppendValue = true; + } else if (cell && cell.editMode && this.shouldAppendValue) { + event.preventDefault(); + cell.editValue = cell.editValue + event.key; + this.shouldAppendValue = false; + } + } } ``` - `Enter`/ `Shift+Enter` navigation ```typescript if (key == 13) { + let thisRow = activeElem.row; + const column = activeElem.column; + const rowInfo = grid.dataView; + + // to find the next eiligible cell, we will use a custom method that will check the next suitable index + let nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey); + + // and then we will navigate to it using the grid's built in method navigateTo + this.grid.navigateTo(nextRow, column, (obj) => { + obj.target.activate(); + this.grid.clearCellSelection(); + this.cdr.detectChanges(); + }); } ``` Key parts of finding the next eligible index would be: ```typescript //first we check if the currently selected cell is the first or the last if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) { return currentRowIndex; } // in case using shift + enter combination, we look for the first suitable cell going up the field if(previous){ return dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); } // or for the next one down the field return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); ``` Please check the full sample for further reference: ### Angular Grid Excel Style Editing Sample ```typescript +import { ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from './../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-excel-style-editing-sample', + styleUrls: [`grid-editing-excel-style.component.scss`], + templateUrl: 'grid-editing-excel-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridExcelStyleEditingComponent implements OnInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + + public data: any[]; + public shouldAppendValue = false; + + public ngOnInit(): void { + this.data = DATA; + } + + public keydownHandler(event) { + const key = event.keyCode; + const grid = this.grid; + const activeElem = grid.navigation.activeNode; + + if ( + (key >= 48 && key <= 57) || + (key >= 65 && key <= 90) || + (key >= 97 && key <= 122) + ) { + // Number or Alphabet upper case or Alphabet lower case + + const columnName = grid.getColumnByVisibleIndex(activeElem.column).field; + const cell = grid.getCellByColumn(activeElem.row, columnName); + if (cell && !cell.editMode) { + cell.editMode = true; + cell.editValue = event.key; + this.shouldAppendValue = true; + } else if (cell && cell.editMode && this.shouldAppendValue) { + event.preventDefault(); + cell.editValue = cell.editValue + event.key; + this.shouldAppendValue = false; + } + } + + if (key == 13) { + let thisRow = activeElem.row; + const column = activeElem.column; + const rowInfo = grid.dataView; + + let nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey); + + this.grid.navigateTo(nextRow, column, (obj) => { + obj.target.activate(); + this.grid.clearCellSelection(); + this.cdr.detectChanges(); + }); + } + } + + public activeNodeChange() { + this.grid.clearCellSelection(); + this.grid.endEdit(); + } + + public getNextEditableRowIndex(currentRowIndex, dataView, previous){ + if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) { + return currentRowIndex; + } + if(previous){ + return dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); + } + return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); + } + + private isEditableDataRecordAtIndex(dataViewIndex, dataView) { + const rec = dataView[dataViewIndex]; + return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData + } +} +``` +```html +
+ + + + + + + +
+``` +```scss +.grid__wrapper { + padding: 16px; +} + +h4 { + text-align: center; + padding-top: 2%; + padding-bottom: 2%; +} +.buttons-row { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px; +} +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0; +} + +.transaction--update, .transaction--delete, .transaction--add { + font-weight: 600; +} +.transaction--add { + color: #6b3; +} +.transaction--update { + color: #4a71b9; +} +.transaction--delete { + color: #ee4920; +} +.transaction-log { + word-wrap: none; +} +``` Main benefits of the above approach include: - Constant edit mode: typing while a cell is selected will immediately enter edit mode with the value typed, replacing the existing one - Any non-data rows are skipped when navigating with `Enter`/`Shift+Enter`. This allows users to quickly cycle through their values. ## CRUD operations > [!NOTE] > Please keep in mind that when you perform some **CRUD operation** all of the applied pipes like **filtering**, **sorting** and **grouping** will be re-applied and your view will be automatically updated. The [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) provides a straightforward API for basic CRUD operations. ### Adding a new record The Grid component exposes the [`addRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#addRow) method which will add the provided data to the data source itself. ```typescript // Adding a new record // Assuming we have a `getNewRecord` method returning the new row data. const record = this.getNewRecord(); this.grid.addRow(record); ``` ### Updating data in the Grid Updating data in the Grid is achieved through [`updateRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#updateCell) methods but **only if primary key for the grid is defined**. You can also directly update a cell and/or a row value through their respective `update` methods. ```typescript // Updating the whole row this.grid.updateRow(newData, this.selectedCell.cellID.rowID); // Just a particular cell through the Grid API this.grid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); // Directly using the cell `update` method this.selectedCell.update(newData); // Directly using the row `update` method const row = this.grid.getRowByKey(rowID); row.update(newData); ``` ### Deleting data from the Grid Please keep in mind that [`deleteRow()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deleteRow) method will remove the specified row only if primary key is defined. ```typescript // Delete row through Grid API this.grid.deleteRow(this.selectedCell.cellID.rowID); // Delete row through row object const row = this.grid.getRowByIndex(rowIndex); row.delete(); ``` These can be wired to user interactions, not necessarily related to the **igx-grid**; for example, a button click: ```html ```
### Cell validation on edit event Using the grid's editing events we can alter how the user interacts with the grid. In this example, we'll validate a cell based on the data entered in it by binding to the [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEdit) event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event (`event.cancel = true`). We'll also display a custom error message using [`IgxToast`](../toast.md). The first thing we need to is bind to the grid's event: ```html ... ``` The `cellEdit` emits whenever **any** cell's value is about to be committed. In our `handleCellEdit` definition, we need to make sure that we check for our specific column before taking any action: ```typescript export class MyGridEventsComponent { + public handleCellEdit(event: IGridEditEventArgs): void { + const column = event.column; + if (column.field === 'Ordered') { + const rowData = event.rowData; + if (!rowData) { + return; + } + if (event.newValue > rowData.UnitsInStock) { + event.cancel = true; + this.toast.open(); + } + } + } } ``` If the value entered in a cell under the **Ordered** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and a toast with an error message will be displayed. The result of the above validation being applied to our `igx-grid` can be seen in the below demo: ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { NgModel } from '@angular/forms'; +import { IGridEditEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-editing-event', + templateUrl: 'grid-editing-events.component.html', + styleUrls: ['grid-editing-events.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxToastComponent] +}) +export class GridEditingEventsComponent implements OnInit { + @ViewChild(IgxToastComponent, { read: IgxToastComponent, static: true }) + public toast: IgxToastComponent; + + @ViewChild('myTemplate', { read: NgModel }) + public myTemplate: NgModel; + + public products: any[]; + public balance = 7800; + public orderBalance: number; + + + public ngOnInit() { + this.products = DATA.map(e => { + if (!e.UnitPrice) { + e.UnitPrice = 1; + } + e.Ordered = Math.floor(Math.random() * e.UnitsInStock); + return e; + }); + this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle; + } + + public handleCellEdit(event: IGridEditEventArgs) { + const column = event.column; + if (column.field === 'Ordered') { + const rowData = event.rowData; + if (!rowData) { + return; + } + if (event.newValue > rowData.UnitsInStock) { + event.cancel = true; + this.toast.open(); + } + } + } +} +``` +```html +

Shipping Orders

+ + + + + + +You cannot order more than the units in stock! +``` +```scss +:host { + display: block; + padding: 16px; +} + +h4 { + margin-bottom: 20px; +} +``` ## Styling The IgxGrid allows for its cells to be styled through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide range of properties, which allow users to style many different aspects of the grid. In the below steps, we are going to go over how you can style the grid's cell in edit mode and how you can scope those styles. In order to use the [`Ignite UI Theming Library`](../themes/sass/component-themes.md), we must first import the theme `index` file in our global styles: ### Importing style library ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Now we can make use of all of the functions exposed by the Ignite UI for Angular theme engine. ### Defining a palette After we've properly imported the index file, we create a custom palette that we can use. Let's define three colors that we like and use them to build a palette with [`palette`](../themes/palettes.md): ```scss $white: #fff; $blue: #4567bb; $gray: #efefef; $color-palette: palette( + $primary: $white, + $secondary: $blue, + $surface: $gray ); ``` ### Defining themes We can now define the theme using our palette. The cells are styled by the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme), so we can use that to generate a theme for our IgxGrid: ```scss $custom-grid-theme: grid-theme( + $cell-editing-background: $blue, + $cell-edited-value-color: $white, + $cell-active-border-color: $white, + $edit-mode-color: color($color-palette, "secondary", 200) ); ``` ### Applying the theme The easiest way to apply our theme is with a `sass` `@include` statement in the global styles file: ```scss @include grid($custom-grid-theme); ``` ### Demo In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](../input-group.md#styling), [`datepicker`](../date-picker.md#styling) & [`checkbox`](../checkbox.md#styling) ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-editing-style-sample', + styleUrls: ['./grid-editing-style-sample.component.scss'], + templateUrl: './grid-editing-style-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, FormsModule, DatePipe] +}) +export class GridEditingStyleSampleComponent implements OnInit { + + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + constructor() { } + + public ngOnInit() { + this.data = DATA; + } +} +``` +```html +
+ + + + + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$white: #fff; +$blue: #4567bb; +$gray: #efefef; + +$color-palette: palette( + $primary: $white, + $secondary: $blue, + $surface: $gray +); + +$grid-theme: grid-theme( + $cell-editing-background: $blue, + $cell-active-border-color: $blue, + $cell-edited-value-color: $white, + $edit-mode-color: color($color-palette, "secondary", 200) +); + +$checkbox-theme: checkbox-theme( + $empty-color: color($color-palette, "secondary", 200), + $fill-color: $white, + $tick-color: $blue +); + +$datepicker-theme: calendar-theme( + $date-selected-foreground: $white, + $date-selected-background: $blue +); + +$input-theme: input-group-theme( + $filled-text-color: $white, + $focused-text-color: $white, + $idle-text-color: $white, + $idle-bottom-line-color: $white, + $focused-bottom-line-color: $white, + $hover-bottom-line-color: $white, + $box-background: $blue +); + +:host { + @include tokens($grid-theme); + @include tokens($checkbox-theme); + @include tokens($datepicker-theme); + @include tokens($input-theme); +} + +.igx-grid { + @include palette($color-palette); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) _[IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - [IgxDatePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - [IgxDatePickerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-date-picker-theme) - [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - [IgxCheckboxComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) - [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md new file mode 100644 index 000000000..bd5d21ca0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-merging.md @@ -0,0 +1,262 @@ +--- +_tocName: Cell Merging +_premium: true +--- +--- title: Angular Grid Cell Merging - Ignite UI for Angular _description: Position and size columns in a more powerful way, using the multi-row layout functionality in the Ignite UI for Angular Data Grid. Check out examples and demos! _keywords: angular cell merging, cell merging, ignite ui for angular _license: commercial --- # Angular Cell Merging The Ignite UI for Angular Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. Merging is applied vertically within a column and helps improve readability by reducing duplicate values. The feature can be configured to merge cells either by default matching data values or by applying a custom condition. ## Angular Cell Merging Example ```typescript +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { GridCellMergeMode, GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-groupby-sample', + styleUrls: ['./grid-cell-merge-sample.component.scss'], + templateUrl: './grid-cell-merge-sample.component.html', + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxCellTemplateDirective, + IgxSelectComponent, + IgxSelectItemComponent, + IgxLabelDirective, + IgxGridToolbarComponent, + FormsModule + ] +}) +export class GridCellMergeSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public selectionMode: GridSelectionMode = 'single'; + public cellMergeMode: GridCellMergeMode = 'always'; + public mergeTypes = [{ name: 'Merge always', value: GridCellMergeMode.always }, { name: 'Merge on sort', value: GridCellMergeMode.onSort }]; + constructor() { + this.data = INVOICE_DATA; + } + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + + + + + + + + @for (type of mergeTypes; track type) { + + {{type.name}} + + } + + + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} + +.header-icon { + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + cursor: pointer; +} + +.header { + height: 100%; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} +``` ## Enabling and Using Cell Merging Cell merging in the grid is controlled at two levels: - Grid-level merge mode – determines when merging is applied. - Column-level merge toggle – determines which columns can merge cells. ### Grid Merge Mode The grid exposes a `cellMergeMode` property that accepts values from the `GridCellMergeMode` enum: - `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. - `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. ```html + ... ``` ```ts protected cellMergeMode: GridCellMergeMode = 'always'; ``` ### Column Merge Toggle At the column level, merging can be enabled or disabled with the `merge` property. ```html ``` In the above example: - The **OrderID** column will merge adjacent duplicate values. - The **ShipperName** column will render normally without merging. ### Combined Example ```html + + + ``` ```ts protected cellMergeMode: GridCellMergeMode = 'onSort'; ``` Here, the grid is set to merge only when columns are sorted, and both Category and Product columns are configured for merging. ## Custom Merge Conditions In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the `mergeStrategy` property. This strategy controls both how cells are compared and how merged ranges are calculated. ### Merge Strategy Interface A custom merge strategy must implement the `IGridMergeStrategy` interface: ```ts export interface IGridMergeStrategy { + merge: ( + data: any[], + field: string, + comparer: (prevRecord: any, currentRecord: any, field: string) => boolean, + result: any[], + activeRowIndex?: number, + grid?: GridType + ) => any[]; + + comparer: (prevRecord: any, record: any, field: string) => boolean; } ``` - `merge` - defines how merged cells are produced. - `comparer` - defines the condition to decide if two adjacent records should be merged. @@if(igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid'){ ### Extending the Default Strategy If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in `DefaultMergeStrategy` and override the relevant methods. ```ts export class MyCustomStrategy extends DefaultMergeStrategy { + /* Merge only cells within their respective projects */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['ProjectName']; + const projB = record['ProjectName']; + return a === b && projA === projB; + } } ``` } ### Applying a Custom Strategy Once defined, assign the strategy to the grid through the `mergeStrategy` property: ```html + + ``` ```ts protected customStrategy = new MyCustomStrategy(); ``` ### Demo ```typescript +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { GridCellMergeMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DefaultMergeStrategy } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-cell-merge-custom-sample', + styleUrls: ['./grid-cell-merge-custom-sample.component.scss'], + templateUrl: './grid-cell-merge-custom-sample.component.html', + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent + ] +}) +export class GridCellMergeCustomSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public cellMergeMode: GridCellMergeMode = 'always'; + public perProjectMergeStrategy = new PerProjectMergeStrategy(); + constructor() { + this.data = [ + { ActionID: "1", ProjectName: "IOT Switch Project", ActionName: "Data Import", Type: "Request", Priority: "Low", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "2", ProjectName: "IOT Switch Project", ActionName: "Reports", Type: "Request", Priority: "Low", Status: "New", Created: new Date("2017-03-14"), LastEdit: new Date("2017-03-15") }, + { ActionID: "4", ProjectName: "IOT Switch Project", ActionName: "Multiple Settings", Type: "Request", Priority: "Low", Status: "Rejected", Created: new Date("2017-04-05"), LastEdit: new Date("2017-04-30") }, + { ActionID: "3", ProjectName: "IOT Switch Project", ActionName: "Data Archiving", Type: "Request", Priority: "Medium", Status: "New", Created: new Date("2017-08-21"), LastEdit: new Date("2017-09-08") }, + { ActionID: "5", ProjectName: "IOT Switch Project", ActionName: "Main Menu: Return Button", Type: "Bug", Priority: "Medium", Status: "Fixed", Created: new Date("2017-06-17"), LastEdit: new Date("2017-07-03") }, + { ActionID: "6", ProjectName: "IOT Switch Project", ActionName: "Auto Turn Off", Type: "Bug", Priority: "Medium", Status: "New", Created: new Date("2017-04-12"), LastEdit: new Date("2017-05-27") }, + { ActionID: "7", ProjectName: "VR Device", ActionName: "Higher DRI", Type: "Request", Priority: "Medium", Status: "New", Created: new Date("2016-08-11"), LastEdit: new Date("2016-08-11") }, + { ActionID: "8", ProjectName: "VR Device", ActionName: "Accessible Power Button", Type: "Request", Priority: "Medium", Status: "New", Created: new Date("2016-07-13"), LastEdit: new Date("2016-07-14") }, + { ActionID: "9", ProjectName: "VR Device", ActionName: "Additional options", Type: "Request", Priority: "High", Status: "Rejected", Created: new Date("2016-09-02"), LastEdit: new Date("2016-09-08") }, + { ActionID: "10", ProjectName: "VR Device", ActionName: "Data Log", Type: "Request", Priority: "High", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "12", ProjectName: "VR Device", ActionName: "Motion Blur", Type: "Bug", Priority: "High", Status: "New", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") }, + { ActionID: "11", ProjectName: "VR Device", ActionName: "Left Sensors Delay", Type: "Bug", Priority: "High", Status: "Fixed", Created: new Date("2017-03-25"), LastEdit: new Date("2017-05-08") } + ]; + } +} + +export class PerProjectMergeStrategy extends DefaultMergeStrategy { + /* Merge only cells within their respective projects */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['ProjectName']; + const projB = record['ProjectName']; + return a === b && projA === projB; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} + +.header-icon { + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + cursor: pointer; +} + +.header { + height: 100%; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} +``` ## Feature Integration Due to the specific behavior of merged cells it has to be noted how exactly it ties together with some of the other features of the grid: - **Expand/Collapse**: if a feature (such as master-detail, grouping, etc.) generates a non-data row, then the cell merging is interrupted and the group will be split. - **Excel export**: merged cells remain merged when exported to Excel. - **Column pinning**: cells remain merged when a column is pinned and are displayed in the pinned area. - **Row pinning**: cells merge only withing their containing area, i.e. cells of pinned rows merge only with cells of other pinned rows, while cells of unpinned rows merge only with cells of unpinned rows. - **Navigation/Activation**: when a cell is active, all merged cells in the same row become single cells, i.e. their merge sequence is broken. This also includes activation via keyboard navigation. >[!NOTE] > If a merged cell is clicked, the closest cell from the merge sequence will become active. - **Updating/Editing**: since activation breaks the merge sequence, only a single cell will be in edit mode. - **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection. ## Limitations |Known Limitations| Description| | --- | --- | | Cell merging is not supported in combination with Multi-row Layout. | Both span complex layouts that don't make sense when combined. A warning will be thrown if such invalid configuration is detected. | ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md new file mode 100644 index 000000000..d48e2ef92 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-cell-selection.md @@ -0,0 +1,403 @@ +--- +_tocName: Cell selection +_premium: true +--- +--- title: Angular Grid Cell Selection - Ignite UI for Angular _description: Check how easy it is to use cell data selection using variety of events, rich API or mouse interactions. The Grid supports 3 modes for cell selection. Try it now! _keywords: data select, igniteui for angular, infragistics _license: commercial --- # Angular Cell Selection The selection feature enables rich data select capabilities in the Material UI based Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Grid now supports three modes for cell selection, and you can easily switch between them by changing [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) property. You can disable cell selection, you can _select only one cell within the grid_ or to _select multiple cells in the grid_, which is provided as default option. But let's dive deeper in each of these options. ## Angular Cell Selection Example The sample below demonstrates the three types of Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript +import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-cell-selection', + styleUrls: ['./grid-cellSelection.component.scss'], + templateUrl: 'grid-cellSelection.component.html', + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent] +}) +export class GridCellSelectionComponent implements OnInit { + private renderer = inject(Renderer2); + + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; + @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent; + @ViewChild('logger') public logger: ElementRef; + public data: any[]; + public selection = true; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModes = []; + + public ngOnInit(): void { + this.data = DATA; + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbar.open(); + } + + public onRangeSelected() { + const selectedData = JSON.stringify(this.grid.getSelectedData()); + this.logAnEvent(`=> 'rangeSelected' with value: ` + selectedData); + } + + public onCellSelected(event) { + this.logAnEvent(`=> 'selected' with value: ` + event.cell.value); + } + + public clearLog() { + const elements = this.logger.nativeElement.querySelectorAll('p'); + for (let index = 0; index < elements.length; index++) { + this.renderer.removeChild(this.logger.nativeElement, elements[index]); + } + } + + private logAnEvent(msg: string, canceled?: boolean) { + const createElem = this.renderer.createElement('p'); + + if (canceled) { + msg = msg.concat(': has been canceled '); + } + + const text = this.renderer.createText(msg); + this.renderer.appendChild(createElem, text); + const container = this.logger.nativeElement; + this.renderer.insertBefore(container, createElem, container.children[0]); + } +} +``` +```html + + + +
+
+ + + + + + + + + +
+
+
+
+
+ Events execution sequence + +
+
+
+
+
+
+
+ + +
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+ +``` +```scss +:host { + width: 100%; +} + +.grid__wrapper { + display: flex; + justify-content: space-between; + margin: 16px; + flex-flow: column; + align-items: flex-start; + position: relative; +} + +.button-group-wrapper { + display: flex; + margin: 10px; +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.switches { + margin-top: 12px; + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-around; +} + +.sample-wrapper { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.grid-wrapper { + width: 60%; + margin: 8px; +} +.log-wrapper { + width: 35%; +} + +.clearBtn { + top: 3px; + margin-left: 20px; +} + +.selected-data-area{ + overflow-y: auto; + max-height: 550px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; +} + +.logContainer { + padding: 0.2rem 0.4rem; +} + +.highlight { + text-align: center; + margin-bottom: 0.4rem; +} +```
## Selection types ### Grid Multiple-cell Selection How to select cells: - By `Mouse drag` - Rectangular data selection of cells would be performed. - By `Ctrl key` press + `Mouse drag` - Multiple range selections would be performed. Any other existing cell selection will be persisted. - Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding `Shift key` the cell selection range will be updated based on the first selected cell position (starting point). - Keyboard multi-cell selection by using the `Arrow keys` while holding `Shift key`. Multi-cell selection range will be created based on the focused cell. - Keyboard multi-cell selection by using the `Ctrl + Arrow keys` and `Ctrl + Home/End` while holding `Shift key`. Multi-cell selection range will be created based on the focused cell. - Clicking with the `Left Mouse key` while holding `Ctrl key` will add single cell ranges into the selected cells collection. - Continuous multiple cell selection is available, by clicking with the mouse and dragging. #### Demo ```typescript +import { Component, ViewEncapsulation } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-multi-cell-selection-sample', + styleUrls: ['./grid-multi-cell-selection.component.scss'], + templateUrl: './grid-multi-cell-selection.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxToastComponent] +}) +export class GridMultiCellSelectionComponent { + + public sourceData = DATA; + public targetData = []; + + public transferData(source: IgxGridComponent, target: IgxGridComponent, + notification: IgxToastComponent) { + target.autoGenerate = true; + target.clearCellSelection(); + this.targetData = source.getSelectedData(); + notification.positionSettings.verticalDirection = VerticalAlignment.Middle; + notification.displayTime = 1000; + notification.open(`Transfered ${this.targetData.length} rows`); + } + + public initColumn(column: IgxColumnComponent) { + column.sortable = true; + } + + public transferExpressions(source: IgxGridComponent, target: IgxGridComponent, type: string) { + if (type === 'filter') { + target.filteringExpressionsTree = source.filteringExpressionsTree; + } else { + target.sortingExpressions = source.sortingExpressions; + } + } +} +``` +```html +
+
Perform range selection on the left Grid to transfer data to the right Grid
+
+
+
+ + +
+
+ + +
+
+ +``` +```scss +.wrapper { + margin: 16px; + display: flex; + justify-content: space-evenly; +} + +.centered { + text-align: center; +} + +.left { + width: 50%; +} + +.right { + width: 50%; + padding-left: 10px; +} +```
### Grid Single Selection When you set the `[cellSelection]="'single'"`, this allows you to have only one selected cell in the grid at a time. Also the mode `mouse drag` will not work and instead of selecting a cell, this will make default text selection. >[!NOTE] > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selected) event is emitted, no matter if the `selection mode` is `single` or `multiple`. In multi-cell selection mode when you select a range of cells [`rangeSelected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rangeSelected) event is emitted. ### Grid None selection If you want to disable cell selection you can just set `[cellSelection]="'none'"` property. In this mode when you click over the cell or try to navigate with keyboard, the cell is **not selected**, only the `activation style` is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below. ## Keyboard navigation interactions ### While Shift key is pressed - Shift + Arrow Up to add above cell to the current selection. - Shift + Arrow Down to add below cell to the current selection. - Shift + Arrow Left to add left cell to the current selection. - Shift + Arrow Right to add right cell to the current selection. ### While Ctrl + Shift keys are pressed - Ctrl + Shift + Arrow Up to select all cells above the focused cell in the column. - Ctrl + Shift + Arrow Down to select all cells below the focused cell in the column. - Ctrl + Shift + Arrow Left to select all cells till the start of the row. - Ctrl + Shift + Arrow Right to select all cells till the end of the row. - Ctrl + Shift + Home to select all cells from the focused cell till the first-most cell in the grid - Ctrl + Shift + End to select all cells from the focused cell till the last-most cell in the grid > [!NOTE] > Continuous scroll is possible only within Grid's body. ## Api usage Below are the methods that you can use in order to select ranges, clear selection or get selected cells data. ### Select range @@if (igxName === 'IgxGrid') { [`selectRange(range)`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectRange) - Select a range of cells with the API. `rowStart` and `rowEnd` should use row indexes and `columnStart` and `columnEnd` could use column index or column data field value. } @@if (igxName === 'IgxTreeGrid') { [`selectRange(range)`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#selectRange) - Select a range of cells with the API. `rowStart` and `rowEnd` should use row indexes and `columnStart` and `columnEnd` could use column index or column data field value. } @@if (igxName === 'IgxHierarchicalGrid') { [`selectRange(range)`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#selectRange) - Select a range of cells with the API. `rowStart` and `rowEnd` should use row indexes and `columnStart` and `columnEnd` could use column index or column data field value. } ```typescript const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; this.grid1.selectRange(range); ... const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' }; this.grid1.selectRange(range); ``` > [!NOTE] > Select range is additive operation. It will not clear your previous selection. ### Clear cell selection @@if (igxName === 'IgxGrid') { [`clearCellSelection()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clearCellSelection) will clear the current cell selection. } @@if (igxName === 'IgxTreeGrid') { [`clearCellSelection()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#clearCellSelection) will clear the current cell selection. } @@if (igxName === 'IgxHierarchicalGrid') { [`clearCellSelection()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#clearCellSelection) will clear the current cell selection. } ### Get selected data @@if (igxName === 'IgxGrid') { [`getSelectedData()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: } @@if (igxName === 'IgxTreeGrid') { [`getSelectedData()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: } @@if (igxName === 'IgxHierarchicalGrid') { [`getSelectedData()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: } 1. If three different single cells are selected: + + ``` + expectedData = [ + { CompanyName: 'Infragistics' }, + { Name: 'Michael Langdon' }, + { ParentID: 147 } + ]; + ``` 2. If three cells from one column are selected: + + ``` + expectedData = [ + { Address: 'Obere Str. 57'}, + { Address: 'Avda. de la Constitución 2222'}, + { Address: 'Mataderos 2312'} + ]; + ``` 3. If three cells are selected with mouse drag from one row and three columns: + + ``` + expectedData = [ + { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' } + ]; + ``` 4. If three cells are selected with mouse drag from two rows and three columns: + + ``` + expectedData = [ + { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'}, + { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'} + ]; + ``` 5. If two different ranges are selected: + + ``` + expectedData = [ + { ContactName: 'Martín Sommer', ContactTitle: 'Owner'}, + { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'}, + { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'}, + { Address: 'Fauntleroy Circus', City: 'London'} + ]; + ``` 6. If two overlapping ranges are selected, the format would be: + + ``` + expectedData = [ + { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'}, + { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'}, + { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'}, + { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'} + ]; + ``` @@if (igxName === 'IgxGrid') { > [!NOTE] > [`selectedCells()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectedCells) will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. [`getSelectedData()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getSelectedData) will also return the selected cell data. > [`getSelectedRanges(): GridSelectionRange[]`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getSelectedRanges) will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[]. } @@if (igxName === 'IgxTreeGrid') { > [!NOTE] > [`selectedCells()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#selectedCells) will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. [`getSelectedData()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#getSelectedData) will also return the selected cell data. > [`getSelectedRanges(): GridSelectionRange[]`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getSelectedRanges) will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[]. } @@if (igxName === 'IgxHierarchicalGrid') { > [!NOTE] > [`selectedCells()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#selectedCells) will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. [`getSelectedData()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getSelectedData) will also return the selected cell data. > [`getSelectedRanges(): GridSelectionRange[]`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getSelectedRanges) will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[]. } ## Features integration The multi-cell selection is index based (DOM elements selection). - `Sorting` - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending. - `Paging` - On paging selected cells will be cleared. Selection wont be persisted across pages. - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. - `Pinning` - Selected cell will not be cleared. Same as hiding - `Group by` - On column grouping selected cells will not be cleared. ## Styling The theme engine exposes properties that allow us to style the **range of selected cells**. ### Import theme To get started with styling the selection, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Define colors Once done, we can make use of the [`contrast-color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-contrast-color) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. With them, we define the colors we would like to use for our selection range: ```scss $text-color: contrast-color($color: 'primary', $variant: 900); $background-color: color($color: "primary", $variant: 900); $border-yellow: #f2c43c; ``` >[!NOTE] >If we don't want to use the `contrast-color` and `color` functions, we can always hardcode the color values. ### Create custom theme Next we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) passing our `text-color`, `background-color` and `border-yellow` variables as `$cell-selected-text-color`, `$cell-selected-background` and `$cell-active-border-color`, respectively: ```scss $custom-grid-theme: grid-theme( + $cell-selected-text-color: $text-color, + $cell-active-border-color: $border-yellow, + $cell-selected-background: $background-color ); ``` ### Apply theme Afterwards, all we need to do is include the mixin in our component's style (could also be in the app styles), so that our igx-grid uses the newly created theme instead of the default one: ```scss :host { + @include tokens($custom-grid-theme); } ``` With the custom theme applied, the selected grid cells are highlighted with our selected colors: ### Demo ```typescript +import { Component } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-multi-cell-selection-style-sample', + styleUrls: ['./grid-multi-cell-selection-style.component.scss'], + templateUrl: './grid-multi-cell-selection-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective] +}) +export class GridMultiCellSelectionStyleComponent { + + public sourceData = DATA; + + public initColumn(column: IgxColumnComponent) { + column.sortable = true; + } +} +``` +```html +
+ + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$text-color: contrast-color($color: 'primary', $variant: 900); +$background-color: color($color: "primary", $variant: 900); +$border-yellow: #f2c43c; + +$custom-grid-theme: grid-theme( + $cell-selected-text-color: $text-color, + $cell-active-border-color: $border-yellow, + $cell-selected-background: $background-color, +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Selection](selection.md) - [Row selection](row-selection.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md new file mode 100644 index 000000000..86d643826 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-clipboard-interactions.md @@ -0,0 +1,115 @@ +--- +_tocName: Clipboard Interactions +_premium: true +--- +--- title: Angular Grid Clipboard Interactions - Ignite UI for Angular _description: The Angular Data Grid Clipboard functionality provides fast, easy and customizable way to copy, paste and export data to Excel or other programs. Try it now! _keywords: copy data, igniteui for angular, infragistics _license: commercial --- # Angular Grid Clipboard Interactions Copy to clipboard operations are now available in the Grid. This functionality provides a fast, easy and customizable way to copy data of the Angular Data Grid through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the Grid into Excel or other external programs. ## Angular Grid Clipboard Interactions Example ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-clipboard-operations-sample', + styleUrls: ['grid-clipboard-operations-sample.component.scss'], + templateUrl: './grid-clipboard-operations-sample.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSwitchComponent, IgxButtonDirective] +}) +export class GridClipboardSampleComponent { + public data: any[]; + public options = { + enabled: true, + copyHeaders: true, + copyFormatters: true, + separator: '\t' + }; + + constructor() { + this.data = DATA; + } + + public formatter = (value: any) => `** ${value} **`; + + public initColumn(column) { + column.formatter = this.formatter; + column.header = `🎉${column.field}`; + if (column.index > 6) { + column.hidden = true; + } + } +} +``` +```html +
+
+
+ + + + + clear + + + The default value is a single tabulation which is shown as whitespace above. + Click the clear icon to reset it back to tabulation. + + +
+ + +
+ Grid copy behavior + Copying of header labels + Copying column formatters + +
+ + + +
+ +
+ + + + +
+
+
+
+``` +```scss +@use '../../../variables' as *; + +:host ::ng-deep { + .igx-switch__label { + line-height: 1rem; + } +} + +.tlb { + display: flex; + max-width: 734px; +} + +.grid-wrapper { + width: 50wh; + height: 364px; + margin-top: 7px; +} +```
## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: - Windows/Unix based + - Ctrl + C / Ctrl + Ins as a keyboard shortcut + - Ctrl + V / Shift + Ins as a keyboard shortcut + - Copy action through the browser menu - macOS + - ⌘ Cmd + C as a keyboard shortcut + - ⌘ Cmd + V as a keyboard shortcut + - Copy action through the browser menu ## Limitations - Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the **paste** event (IE 11) which is emitted but does not expose the `clipboardData` property in the event. > [!NOTE] > In order to `copy` cells in IE 11, you can use the keyboard selection. Hold the `shift key` in order to make a multi-cell selection, press `Ctrl + C` in order to copy. - The copy behavior is disabled while the grid is in edit mode. - The current version of this feature covers only the `copy` from grid behavior. Later on we plan to expose `paste` within grid behavior. + You can use a custom paste handler in order to configure `paste` behavior, have a look at our [Paste from Excel topic](paste-excel.md). ## API Usage We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardOptions) @Input property, which handles the following options: - [`enabled`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.enabled) Enables/disables copying of selected cells. - [`copyHeaders`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.copyHeaders) Include the associated headers when copying. - [`copyFormatters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.copyFormatters) Apply any existing column formatters to the copied data. - [`separator`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.separator) The string separator to use the for formatting the data in the clipboard. Default is `/t` > [!NOTE] > Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs. - [`gridCopy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridCopy) Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardОptions) ## Additional Resources
- [Grid overview](grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md) - [Virtualization and Performance](virtualization.md) - [Multi-column headers](multi-column-headers.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md new file mode 100644 index 000000000..0964a627b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-collapsible-column-groups.md @@ -0,0 +1,152 @@ +--- +_tocName: Collapsible Column Groups +_premium: true +--- +--- title: Collapsible Column Groups in Angular Data Grid - Infragistics _description: Take advantage of the capability to show\hide smaller and concise set of data with the use of collapsible column groups in our Angular Data Grid. Try it now! _keywords: collapsible column headers, ignite ui for angular, infragistics _license: commercial --- # Collapsible Column Groups in Angular Data Grid Multi-column headers allow you to have multiple levels of nested columns and column groups. They also provide the ability to mark each column group as **collapsible**. **Collapsible multi-column headers** make it possible to collapse/expand, i.e. to show and hide the nested headers under the current one, which will give you a shortened/summarized information for example. ## Angular Grid Collapsible Column Groups Overview Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-collapsible-column-groups', + styleUrls: ['./grid-collapsible-column-groups.component.scss'], + templateUrl: './grid-collapsible-column-groups.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent, IgxCellTemplateDirective, DatePipe] +}) +export class GridCollapsibleColumnGroupsComponent implements OnInit { + + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data; + + public ngOnInit() { + this.data = INVOICE_DATA; + for (const item of this.data) { + const names = item.CustomerName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + } + } +} +``` +```html +
+
+
+ + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ @if (column.expanded) { + The column is expanded! Click here to collapse + } + The column is collapsed! Click here to expand +
+ + + + + + + + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ @if (column.expanded) { + The column is expanded! Click here to collapse + } + The column is collapsed! Click here to expand +
+ + + + + + + + + + + + + + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ @if (column.expanded) { + The column is expanded! Click here to collapse + } + The column is collapsed! Click here to expand +
+ + + + + + + + + + + + + +
+
+
+``` +```scss +igx-grid { + --ig-size: var(--ig-size-medium); +} +```
## Setup To get started with the IgxGrid and the **Collapsible multi-column headers** , first you need to install Ignite UI for Angular by typing the following command: ```cmd ng add igniteui-angular ``` For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxGridModule` in the app.module.ts file. Also, we strongly suggest that you take a brief look at [_multi-column groups_](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. ## Usage _Collapsible Column Groups_ is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. In order to define a column group as `collapsible`, you need to set the property to `[collapsible]="true"` and also keep in mind that you need to define the property `visibleWhenCollapsed` to at least two child columns: at least one column must be visible when the group is collapsed (`[visibleWhenCollapsed]="true"`) and at least one column must be hidden when the group is expanded (`[visibleWhenCollapsed]="false"`), otherwise the **collapsible functionality will be disabled**. If `visibleWhenCollapsed` is not specified for some of the child columns, then this column will be always visible no matter whether the parent state is expanded or collapsed. So let's see the markup below: ```html + + + + + + + + + + + + + + ``` And now let's sum up: every child column has three states: - Can be always visible, no matter the expanded state of its parent; - Can be visible, when its parent is collapsed; - Can be hidden, when its parent is collapsed; The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavior by setting the property `[expanded]="false"`. ## Expand/Collapse indicator template Default expand indicator for the igxGrid is the following: + + Expand Indicator Default collapse indicator for the igxGrid is the following: Collapsed Indicator Also, if you need to change the default expand/collapse indicator, we provide two easy ways to do so - via an input property or through a directive. ### Using an input property You can define custom expand/collapse template and provide it to each of the collapsible column groups using **collapsibleIndicatorTemplate** input property. Check the markup below: ```html + {{column.expanded ? 'remove' : 'add'}} + + + + + + ``` ### Using igxCollapsibleIndicator directive Another way to achieve this behavior is to use the igxCollapsibleIndicator directive as shown in the example below: ```html + + {{column.expanded ? 'remove' : 'add'}} + + + + + + + ``` > [!Note] > Please keep in mind that initially collapse group option takes precedence over column hidden - If you declared your column to be hidden using the property > hidden and you have a group defined where the same column should be shown, the column will be shown. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md new file mode 100644 index 000000000..02b52ff51 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-hiding.md @@ -0,0 +1,466 @@ +--- +_tocName: Column Hiding +_premium: true +--- +--- title: Column Hiding in Angular Data Grid - Ignite UI for Angular _description: Learn how to use the Column Hiding feature that allows users to change the visible state of the columns directly through the UI of the Ignite Material UI table. _keywords: column hiding, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Column Hiding The Ignite UI for Angular Grid provides an [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html) with an [`IgxColumnHidingDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnhidingdirective.html) which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. ## Angular Grid Column Hiding Example ```typescript +import { AfterViewInit, Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-column-hiding-toolbar-sample', + styleUrls: ['./grid-column-hiding-toolbar-sample.component.scss'], + templateUrl: './grid-column-hiding-toolbar-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] +}) +export class GridColumnHidingToolbarSampleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = DATA; + } +} +``` +```html +
+ + + Employees + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; +} +```
## Grid Setup Let's start by creating our Grid and binding it to our data. We will also enable both filtering and sorting for the columns. ```html + + + + + + + + + + ``` ## Toolbar's Column Hiding UI The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) in the Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the [`IgxGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) and the [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) inside of the Grid. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) and a custom style for our Grid's wrapper. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html
+ + + Employees + + + + + ... +
``` ```css /* columnHiding.component.css */ .grid__wrapper { + margin: 10px; } ``` } The Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the `igx-grid-toolbar-hiding` [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#title) property, we will set the title that is displayed inside the dropdown button in the toolbar. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html
+ + + Employees + + + + +
``` } By using the [`columnsAreaMaxHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#columnsAreaMaxHeight) property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want. ```typescript // columnHiding.component.ts public ngAfterViewInit() { + this.hidingActionRef.columnsAreaMaxHeight = "200px"; } ``` In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) property. This way we can use it according to our application's requirements. You can see the result of the code from above at the beginning of this article in the Angular Column Hiding Example section. ## Custom Column Hiding UI Let's say we want to manually define our [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html), add the [`IgxColumnHidingDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnhidingdirective.html) so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the `IgxColumnActionsModule`. ```typescript // app.module.ts ... import { + ... + IgxColumnActionsModule } from 'igniteui-angular/grids/core'; // import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxColumnActionsModule], }) export class AppModule {} ``` Now let's create our [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html). In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the [`columns`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#columns) property of the component to the columns of our Grid and include some custom styles to make our application look even better! @@if (igxName === 'IgxGrid') { ```html
+ +
+ + ... +
``` } @@if (igxName === 'IgxTreeGrid') { ```html
+ +
+ + ... +
``` } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```css /* columnHiding.component.css */ .grid__wrapper { + margin: 15px; + display: flex; + flex-direction: row; } .columnHidingContainer { + min-width: 250px; + height: 560px; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + border: 1px gray; + border-radius: 10px; + box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); + igx-column-actions { + height: 460px; + } } .columnsOrderOptionsContainer { + margin-top: 20px; + margin-bottom: 20px; } .gridContainer { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + margin-left: 30px; } ``` } ### Add title and filter prompt A couple more things we can do in order to enrich the user experience of our column hiding component is to set the [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#title) and the [`filterColumnsPrompt`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#filtercolumnsprompt) properties. The [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#title) is displayed on the top and the [`filterColumnsPrompt`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#filterColumnsPrompt) is the prompt text that is displayed in the filter input of our column hiding UI. ```html
+ +
``` ### Add column display order options We can also allow the user to choose the display order of the columns in the column hiding UI. For this purpose we will use the [`columnDisplayOrder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#columnDisplayOrder) property, which is an enumeration type property and has the following options: - **Alphabetical** (order the columns alphabetically) - **DisplayOrder** (order the columns according to the way they are displayed in the Grid) Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](../radio-button.md) module. ```typescript // app.module.ts ... import { + ... + IgxRadioModule } from 'igniteui-angular/radio'; // import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxRadioModule], }) export class AppModule {} ``` Now all we have to do is bind the [`checked`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxradiocomponent.html#checked) property of both radio buttons respectively with different conditions and handle their click events. ```html
+ ... +
+ + Alphabetical order + + + Display order + +
``` ### Disable hiding of a column We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their [`disableHiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disableHiding) property to true. @@if (igxName === 'IgxGrid') { ```html
+ + ... + + + ... +
``` } @@if (igxName === 'IgxTreeGrid') { ```html
+ + ... + + + ... +
``` } If all went well, this is how our column hiding UI component should look like: @@if (igxName === 'IgxGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-column-hiding-sample', + styleUrls: ['./grid-column-hiding-sample.component.scss'], + templateUrl: './grid-column-hiding-sample.component.html', + imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridColumnHidingSampleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = DATA; + } +} +``` +```html +
+
+ + +
+ + Alphabetical order + + + Display order + +
+
+
+ + + + + + + + + + + + +
+
+``` +```scss +.grid__wrapper { + margin: 15px; + display: flex; + flex-direction: row; +} + +.columnHidingContainer { + min-width: 250px; + height: 560px; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + border: 1px gray; + border-radius: 10px; + box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); + igx-column-actions { + height: 460px; + } +} + +.columnsOrderOptionsContainer { + margin-top: 20px; + margin-bottom: 20px; +} + +.gridContainer { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + margin-left: 30px; +} +```
} @@if (igxName === 'IgxTreeGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-hiding-sample', + styleUrls: ['./tree-grid-column-hiding-sample.component.scss'], + templateUrl: './tree-grid-column-hiding-sample.component.html', + imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridColumnHidingSampleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + } +} +``` +```html +
+
+ + +
+ + Alphabetical order + + + Display order + +
+
+
+ + + + + + + + + + + + + +
+
+``` +```scss +.grid__wrapper { + margin: 15px; + display: flex; + flex-direction: row; +} + +.columnHidingContainer { + min-width: 250px; + height: 560px; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + border: 1px gray; + border-radius: 10px; + box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); + igx-column-actions { + height: 460px; + } +} + +.columnsOrderOptionsContainer { + margin-top: 20px; + margin-bottom: 20px; +} + +.gridContainer { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + margin-left: 30px; +} +```
} ## Styling To get started with styling the column actions component, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` By using the simplest approach, we create a new theme that extends the [`column-actions-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-column-actions-theme) and accepts the `$title-color` and the `$background-color` parameters. ```scss $custom-column-actions-theme: column-actions-theme( + $background-color: #292826, + $title-color: #ffcd0f ); ``` As seen, the `column-actions-theme` only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme: ```scss $custom-button: flat-button-theme( + $foreground: #292826, + $disabled-foreground: rgba(255, 255, 255, .54) ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed the text-color of the flat buttons and the button disabled color, but the [`button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) provides way more parameters to control the button style. The last step is to **include** the component mixins, each with its respective theme: ```scss :host { + @include tokens($custom-column-actions-theme); + + .igx-column-actions { + @include tokens($custom-button); + } } ``` >[!NOTE] >We include the created **flat-button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` for the components inside the column action component (buttons, checkboxes ...etc): ```scss :host { + @include tokens($custom-column-actions-theme); + + ::ng-deep { + .igx-column-actions { + @include tokens($custom-button); + } + } } ``` ### Demo ```typescript +import { AfterViewInit, Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-column-hiding-toolbar-style', + styleUrls: ['./grid-column-hiding-toolbar-style.component.scss'], + templateUrl: './grid-column-hiding-toolbar-style.component.html', + imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridColumnHidingToolbarStyleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = DATA; + } +} +``` +```html +
+
+ + +
+ + Alphabetical order + + + Display order + +
+
+
+ + + + + + + + + + + + +
+
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$bg: #292826; +$gray: #404040; +$light-gray: rgba(255, 255, 255, .54); + +$dark-column-actions-theme: column-actions-theme( + $background-color: $bg, + $title-color: $yellow +); + +$dark-button-theme: flat-button-theme( + $background: $yellow, + $foreground: $bg, + $hover-background: $gray, + $hover-foreground: $yellow, + $focus-background: $yellow, + $disabled-foreground: $light-gray +); + +$dark-input-group: input-group-theme( + $filled-text-color: $yellow, + $focused-text-color: $yellow, + $idle-text-color: $yellow, + $idle-bottom-line-color: $yellow, + $hover-bottom-line-color: $yellow, + $focused-secondary-color: $gray, + $box-background: $bg +); + +$dark-checkbox-theme: checkbox-theme( + $label-color: $yellow, + $empty-color: $yellow, + $fill-color: $yellow, + $tick-color: $bg +); + +$dark-radio-theme: radio-theme( + $label-color: $yellow, + $empty-color: $yellow, + $fill-color: $yellow +); + +$dark-ripple-theme: ripple-theme( + $color: $gray +); + +:host { + @include tokens($dark-column-actions-theme); + @include tokens($dark-radio-theme); + + igx-column-actions, igx-grid-toolbar { + @include tokens($dark-button-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-input-group); + @include tokens($dark-ripple-theme); + } +} +```
## API References In this article we learned how to use the built-in column hiding UI in the Grid's toolbar and we defined it as a separate component as well. We introduced a UI that allows the user to choose between different column orders and we set our own custom title and filter prompt texts. We also used an additional Ignite UI for Angular component - the [**IgxRadio**](../radio-button.md) button. The column hiding UI has a few more APIs to explore, which are listed below. - [IgxColumnActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html) - [IgxColumnActionsComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-column-actions-theme) Additional components and/or directives with relative APIs that were used: [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) properties: - [hiddenColumnsCount](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#hiddenColumnsCount) [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [disableHiding](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disablehiding) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) properties: - [showProgress](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridToolbarComponent.html#showProgress) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) components: - [IgxGridToolbarTitleComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) - [IgxGridToolbarActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) methods: [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) events: - [columnVisibilityChanged](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnVisibilityChanged) [IgxRadioComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxradiocomponent.html) Styles: - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxRadioComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-radio-theme) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md new file mode 100644 index 000000000..50ae09082 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-moving.md @@ -0,0 +1,271 @@ +--- +_tocName: Column Moving +_premium: true +--- +--- title: Column Reordering & Moving in Angular Data Grid - Infragistics _description: Set custom column order & enable columns reordering via drag/drop mouse or touch gestures, or by using the Angular Column Moving API. Try Ignite UI for Angular! _keywords: column order, igniteui for angular, infragistics _license: commercial --- # Grid Column Reordering & Moving The Grid component in Ignite UI for Angular provides the **Column Moving** feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. Column moving works both with pinned and unpinned columns and with Multi-column Headers. Moving a column into the pinned area pins the column and vice versa, moving a column outside of the pinned area unpins the column. > [!NOTE] > Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns. > [!NOTE] > If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the **draggable** attribute set to **false**! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the `igxDrag` directive. > [!NOTE] > If the pinned area exceeds its maximum allowed width (80% of the total Grid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area. ```html + ``` ## Angular Grid Column Moving Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { DATA } from '../../data/financialData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-moving-sample', + styleUrls: ['./grid-moving-sample.component.scss'], + templateUrl: './grid-moving-sample.component.html', + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent] +}) + +export class GridMovingSampleComponent { + @ViewChild('dataGrid', { static: true }) public grid: IgxGridComponent; + public data: any[]; + + constructor() { + this.data = DATA; + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public toggleColumnPinning(column: ColumnType) { + column.pinned ? column.unpin() : column.pin(); + } +} +``` +```html + +
+ {{column.field}} + +
+ +
+ + + + + + + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + +
+``` +```scss +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css"); +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css"); +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css"); + +.cellAlignSyle { + text-align: right; + float:right; +} +.cellAlignSyle > span { + float:right; +} +.up { + color: green; +} +.down { + color: red; +} +.grid__wrapper { + padding: 16px; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} + +.pin-icon { + margin-left: 8px; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + color: #999; + + &:hover { + color: #444 + } +} + +:host{ + ::ng-deep{ + .igx-grid__th--pinned { + .pin-icon { + color: #444; + + &:hover { + color: #999 + } + } + } + } +} + +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} +```
## Overview **Column moving** feature is enabled on a per-grid level, meaning that the [**igx-grid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#moving) input of the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html). ```html ``` ## API In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: [`moveColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#moveColumn) - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `position` (representing a [`DropPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/dropposition.html) value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column const idColumn = grid.getColumnByName("ID"); const nameColumn = grid.getColumnByName("Name"); grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); ``` [`move`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#move) - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed. ```typescript // Move the ID column at 3rd position. const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` Note that when using the API, only the [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. ## Events There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are [`columnMovingStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnMovingStart), [`columnMoving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnMoving) and [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnMovingEnd). You can subscribe to the [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnMovingEnd) event of the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column. ```html + + ``` ```typescript public onColumnMovingEnd(event) { + if (event.source.field === "Category" && event.target.field === "Change On Year(%)") { + event.cancel = true; + } } ``` ## Styling To get started with styling the Grid column moving headers, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$ghost-header-background`, `$ghost-header-text-color` and the `$ghost-header-icon-color` parameters. ```scss // Define dark theme for the column moving $dark-grid-column-moving-theme: grid-theme( + $ghost-header-text-color: #f4d45c, + $ghost-header-background: #575757, + $ghost-header-icon-color: #f4bb5c ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins with its respective theme: ```scss :host { + @include tokens($dark-grid-column-moving-theme); } ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { DATA } from '../../data/financialData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-moving-styled-sample', + styleUrls: ['./grid-moving-styled-sample.component.scss'], + templateUrl: './grid-moving-styled-sample.component.html', + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxBadgeComponent] +}) + +export class GridMovingStyledSampleComponent { + @ViewChild('dataGrid', { static: true }) public grid: IgxGridComponent; + public data: any[]; + + constructor() { + this.data = DATA; + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public toggleColumnPinning(column: ColumnType) { + column.pinned ? column.unpin() : column.pin(); + } +} +``` +```html + +
+ {{column.field}} + +
+ +
+ + + + + + + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$dark-grid-column-moving-theme: grid-theme( + $ghost-header-text-color: #f4d45c, + $ghost-header-background: #575757, + $ghost-header-icon-color: #f4bb5c +); + +:host { + @include tokens($dark-grid-column-moving-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [ColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md new file mode 100644 index 000000000..7ec219780 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-pinning.md @@ -0,0 +1,607 @@ +--- +_tocName: Column Pinning +_premium: true +--- +--- title: Angular Grid Column Pinning - Ignite UI for Angular _description: Want to use the Pinning feature of the Ignite UI for Angular when you develop your next app? Easily lock column or change column order with rich API. _keywords: lock column, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Column Pinning A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular Grid Column Pinning Example ```typescript +import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DATA } from '../../data/customers'; +import { ActivatedRoute } from '@angular/router'; +import { NgClass } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: 'app-grid-sample', + styleUrls: ['grid-toolbar-pinning.component.scss'], + templateUrl: 'grid-toolbar-pinning.component.html', + imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] +}) + +export class PinningToolbarSampleComponent implements OnInit{ + private activatedRoute = inject(ActivatedRoute); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + + public useDarkTheme: boolean = false; + public data: any[]; + public columns: any[]; + + public ngOnInit(): void { + this.columns = [ + { field: 'CompanyName', header: 'Company Name', width: 300 }, + { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true }, + { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true }, + { field: 'Address', header: 'Address', width: 300 }, + { field: 'City', header: 'City', width: 120 }, + { field: 'Region', header: 'Region', width: 120 }, + { field: 'PostalCode', header: 'Postal Code', width: 150 }, + { field: 'Phone', header: 'Phone', width: 150 }, + { field: 'Fax', header: 'Fax', width: 150 } + ]; + this.data = DATA; + + this.activatedRoute.queryParams.subscribe(params => { + this.useDarkTheme = params.dark === 'true'; + }); + } + + public toggleColumn(col: IgxColumnComponent) { + col.pinned ? col.unpin() : col.pin(); + } +} +``` +```html +
+ + + + + + + + @for (c of columns; track c) { + + + } + +
+``` +```scss +:host ::ng-deep .title { + width: 100%; +} + +.grid__wrapper { + padding: 16px; +} +``` ## Column Pinning API Column pinning is controlled through the `pinned` input of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). Pinned columns are rendered on the left side of the Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Grid body. ```html + + + + + ``` You may also use the Grid's [`pinColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#unpinColumn) methods of the [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) to pin or unpin columns by their field name: ```typescript this.grid.pinColumn('AthleteNumber'); this.grid.unpinColumn('Name'); ``` Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the [`columnPin`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnPin) event and changing the [`insertAtIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipincolumneventargs.html#insertAtIndex) property of the event arguments to the desired position index. ```html ``` ```typescript public columnPinning(event) { + if (event.column.field === 'Name') { + event.insertAtIndex = 0; + } } ``` ## Pinning Position You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```html ``` ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` ### Demo ```typescript +import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IPinningConfig, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { employeesData } from '../../data/employeesData'; +import { athletesData } from '../../data/athletesData'; +import { DatePipe } from '@angular/common'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: 'app-grid-sample', + styleUrls: ['grid-right-pinning.component.scss'], + templateUrl: 'grid-right-pinning.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxAvatarComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] +}) + +export class RightPinningSampleComponent implements OnInit{ + @ViewChild('grid1', { static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + public employeesData: any[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + // eslint-disable-next-line @typescript-eslint/no-inferrable-types + private _columnsPinned: boolean = true; + + public ngOnInit(): void { + this.data = athletesData; + this.employeesData = employeesData; + let i = 0; + this.data.forEach((x) => { + x.FirstPlaces = Math.floor(Math.random() * Math.floor(3)); + x.SecondPlaces = Math.floor(Math.random() * Math.floor(4)); + x.ThirdPlaces = Math.floor(Math.random() * Math.floor(5)); + x.RegistrationDate = this.generateReadableDate(x.Registered); + x.Birthday = this.generateReadableDate(this.employeesData[i].birthday); + x.Sponsor = this.employeesData[i].company; + x.Agent = this.employeesData[i].name; + x.AgentContact = this.employeesData[i].email; + x.AgentPhone = this.employeesData[i].work_phone; + i++; + }); + } + + public toggleColumn(col: IgxColumnComponent): void { + col.pinned ? col.unpin() : col.pin(); + } + + public get columnsPinned(): boolean { + return this._columnsPinned; + } + + public set columnsPinned(pinned) { + this._columnsPinned = !this._columnsPinned; + } + + private generateReadableDate(timestamp: string): Date { + let dateObj = new Date(timestamp); + if (isNaN(dateObj.getTime())) { + dateObj = new Date(timestamp.split(' ')[0]); + } + return dateObj; + } + +} +``` +```html +
+ + + + + + + + + +
+ +
+ {{ cell.row.data.CountryName }} +
+
+ + + + +
+ +
+ + + + + + + + + + {{ cell | date:'longDate' }} + + + + + {{ cell | date:'longDate' }} + + + + + + + + +
+ {{ goldColumn.header }} + emoji_events +
+ + + + +
+ {{ silverColumn.header }} + emoji_events +
+ + + + +
+ {{ bronzeColumn.header }} + emoji_events +
+ + + +
+``` +```scss +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +img.country-flag { + width: 35px; + height: 20px; +} +``` ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. ```typescript +import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core'; +import { NgClass } from '@angular/common'; +import { IPinningConfig, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: 'app-grid-sample', + styleUrls: ['grid-toolbar-pinning-both-sides.component.scss'], + templateUrl: 'grid-toolbar-pinning-both-sides.component.html', + imports: [ + NgClass, + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxGridToolbarComponent, + IgxGridToolbarActionsComponent, + IgxColumnComponent, + IgxButtonDirective + ] +}) + +export class GridBothSideToolbarPinningSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + + public useDarkTheme: boolean = false; + public data: any[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + + public ngOnInit(): void { + this.columns = [ + { field: 'CompanyName', header: 'Company Name', width: 300 }, + { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.Start }, + { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.End }, + { field: 'Address', header: 'Address', width: 300 }, + { field: 'City', header: 'City', width: 120 }, + { field: 'Region', header: 'Region', width: 120 }, + { field: 'PostalCode', header: 'Postal Code', width: 150 }, + { field: 'Phone', header: 'Phone', width: 150 }, + { field: 'Fax', header: 'Fax', width: 150 } + ]; + this.data = DATA; + } + + public pinLeft() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.Start); + }); + } + + public pinRight() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.End); + }); + } + + public unpinColumn() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.unpin(); + }); + } +} +``` +```html +
+ + + + + + + + + + @for (c of columns; track c) { + + + } + +
+``` +```scss +:host ::ng-deep .title { + width: 100%; +} + +.grid__wrapper { + padding: 16px; +} + +.button { + margin: 8px; + width: 128px; +} +``` ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state. This can be done by creating a header template for the column with a custom icon. ```html + + +
+ {{col.header}} + +
+ + ``` On click of the custom icon the pin state of the related column can be changed using the column's API methods. ```typescript public toggleColumn(col: ColumnType) { + col.pinned ? col.unpin() : col.pin(); } ``` ### Demo ```typescript +import { Component, ViewChild, ViewEncapsulation, OnInit, AfterViewInit, inject } from '@angular/core'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { icons } from '../../services/svgIcons'; + +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +const FILTERING_ICONS_FONT_SET = 'filtering-icons'; +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: 'app-grid-sample', + styleUrls: ['grid-pinning.component.scss'], + templateUrl: 'grid-pinning.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent] +}) + +export class PinningSampleComponent implements OnInit, AfterViewInit { + private iconService = inject(IgxIconService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + + public data: any[]; + public columns: any[]; + + public ngOnInit(): void { + this.columns = [ + { field: 'ID', header: 'ID', width: 100, hidden: true }, + { field: 'CompanyName', header: 'Company Name', width: 300 }, + { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true }, + { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true }, + { field: 'Address', header: 'Address', width: 300 }, + { field: 'City', header: 'City', width: 120 }, + { field: 'Region', header: 'Region', width: 120 }, + { field: 'PostalCode', header: 'Postal Code', width: 150 }, + { field: 'Phone', header: 'Phone', width: 150 }, + { field: 'Fax', header: 'Fax', width: 150 } + ]; + this.data = DATA; + } + + public ngAfterViewInit() { + const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin'); + pinnedIcons.forEach(icon => { + if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) { + this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET); + } + }); + } + + public toggleColumn(col: IgxColumnComponent) { + col.pinned ? col.unpin() : col.pin(); + } +} +``` +```html +
+ + @for (c of columns; track c) { + + +
+ {{col.header}} + + +
+ + + } + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.pin-icon { + margin-left: 8px; + cursor: pointer; + display: flex; + align-items: center; +} + +.pinned { + color: #444; + + &:hover { + color: #999; + } +} + +.unpinned { + color: #999; + + &:hover { + color: #444; + } +} +``` ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the Grid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the Grid.
## Styling The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Pinning styling. ### Importing global theme To begin the customization of the Pinning feature, you need to import the `index` file, where all styling functions and mixins are located. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Defining custom theme Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. ```scss $custom-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. ### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +import { Component, ViewChild, OnInit, inject } from "@angular/core"; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { DATA } from "../../data/customers"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + +@Component({ + selector: "app-grid-sample", + styleUrls: ["grid-pinning-styling.component.scss"], + templateUrl: "grid-pinning-styling.component.html", + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxCellHeaderTemplateDirective, + IgxIconComponent + ] +}) +export class PinningStylingComponent implements OnInit { + private iconService = inject(IgxIconService); + @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; + + constructor() { + this.iconService.setFamily("fas", { + className: "fas", + type: "font", + prefix: "fa-" + }); + } + + public data: any[]; + public columns: any[]; + public ngOnInit(): void { + this.columns = [ + { field: "ID", header: "ID", width: 100, hidden: true }, + { field: "CompanyName", header: "Company Name", width: 300 }, + { + field: "ContactName", + header: "Contact Name", + width: 200, + pinned: true + }, + { + field: "ContactTitle", + header: "Contact Title", + width: 200, + pinned: true + }, + { field: "Address", header: "Address", width: 300 }, + { field: "City", header: "City", width: 120 }, + { field: "Region", header: "Region", width: 120 }, + { field: "PostalCode", header: "Postal Code", width: 150 }, + { field: "Phone", header: "Phone", width: 150 }, + { field: "Fax", header: "Fax", width: 150 } + ]; + this.data = DATA; + } + + public toggleColumn(col: IgxColumnComponent) { + col.pinned ? col.unpin() : col.pin(); + } +} +``` +```html +
+ + @for (c of columns; track c) { + + +
+ {{col.header}} + +
+ + + } + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md new file mode 100644 index 000000000..19d5bcf65 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-resizing.md @@ -0,0 +1,133 @@ +--- +_tocName: Column Resizing +_premium: true +--- +--- title: Angular Grid Column Resizing - Ignite UI for Angular _description: Start using Angular Grid Column Resizing in order to change the grid column width in an instant. Angular drag resizing has never been so easy. Try for free! _keywords: grid column resizing, igniteui for angular, infragistics _license: commercial --- # Angular Grid Column Resizing With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended. ## Angular Grid Column Resizing Example ```typescript +import { Component } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-resizing-sample', + styleUrls: ['./grid-resizing-sample.component.scss'], + templateUrl: 'grid-resizing-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) + +export class ResizingSampleComponent { + public data: any[]; + + public col: IgxColumnComponent; + public pWidth: string; + public nWidth: string; + + constructor() { + this.data = DATA; + } + + public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; + } +} +``` +```html +
+ + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + padding: 16px; +} +```
**Column resizing** is also enabled per-column level, meaning that the [**igx-grid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#resizable) input of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). ```html ``` You can subscribe to the [`columnResized`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnResized) event of the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) object, are exposed through the event arguments. ```html + + ``` ```typescript public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; } ``` ## Resizing columns in pixels/percentages Depending on the user scenario, the column width may be defined in pixels, percentages or a mix of both. All these scenarios are supported by the Column Resizing feature. By default if a column does not have width set, it fits the available space with width set in pixels. This means that the following configuration is possible: ```html + + + ``` >[!NOTE] > There is a slight difference in the way resizing works for columns set in pixels and percentages. **Pixels** Resizing columns with width in pixels works by directly adding or subtracting the horizontal amount of the mouse movement from the size of the column. **Percentages** When resizing columns with width in percentages, the horizontal amount of the mouse movement in pixels translates roughly to its percentage amount relative to the grid width. The columns remain responsive and any future grid resizing will still reflect on the columns as well. ## Restrict column resizing You can also configure the minimum and maximum allowable column widths. This is done via the [`minWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) inputs of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by [`minWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth). ```html ``` Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels. This means the following configurations are possible: ```html ``` or ```html ``` ## Auto-size columns on double click Each column can be **auto sized** by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) is set on that column and the new width exceeds that [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) value. In this case the column will be sized according to preset [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) value. You can also auto-size a column dynamically using the exposed [`autosize()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#autosize) method on [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). ```typescript @ViewChild('grid') grid: IgxGridComponent; let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; column.autosize(); ``` ## Auto-size columns on initialization Each column can be set to auto-size on initialization by setting `width` to 'auto': ```html ... ``` When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns. ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'grid-column-autosizing-sample', + styleUrls: ['./grid-column-autosizing.component.scss'], + templateUrl: 'grid-column-autosizing.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) + +export class GridColumnAutosizingComponent { + public data: any[]; + + constructor() { + this.data = DATA; + } +} +``` +```html +
+ + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + padding: 16px; +} +```
## Styling To get started with the styling of the Grid column resize line, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` The simplest approach to achieve this is to create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts many parameters as well as the `$resize-line-color` parameter. ``` scss $custom-grid-theme: grid-theme( + $resize-line-color: #0288d1 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins with its respective theme: ```scss :host { + @include tokens($custom-grid-theme); } ``` ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { athletesData } from '../../data/athletesData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-resize-line-styling-sample', + styleUrls: ['./grid-resize-line-styling-sample.scss'], + templateUrl: './grid-resize-line-styling-sample.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) + +export class GridResizeLineStylingSampleComponent implements OnInit { + public data: any[]; + public ngOnInit() { + this.data = athletesData; + } +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md new file mode 100644 index 000000000..c8d7f817f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-selection.md @@ -0,0 +1,193 @@ +--- +_tocName: Column Selection +_premium: true +--- +--- title: Angular Grid Column Selection - Ignite UI for Angular _description: Learn how to configure column selection with Ignite UI for Angular Data grid. This makes grid interactions much easier and faster than ever. _keywords: column selection, igniteui for angular, infragistics _license: commercial --- # Angular Grid Column Selection The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich [`API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest) that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations. ## Angular Column Selection Example
The sample below demonstrates the three types of Grid's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. *_Contact Title_, _City_ and _Address_ columns are with disabled column selection. ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { DATA } from '../../data/customers'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-column-selection', + templateUrl: './column-selection-sample.component.html', + styleUrls: ['./column-selection-sample.component.scss'], + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent] +}) +export class GridColumnSelectionComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxGridComponent) + public grid: IgxGridComponent; + public data: any[]; + public columnSelectionType: GridSelectionMode = 'single'; + + public ngOnInit() { + this.data = DATA; + } + + public ngAfterViewInit() { + this.grid.getColumnByName('CompanyName').selected = true; + this.cdr.detectChanges(); + } +} +``` +```html +
+ + + + + + None + Single + Mulitple + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper { + padding: 16px; +} + +igx-select { + --ig-size: var(--ig-size-small); +} +```
## Basic usage The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnSelection) input, which takes [GridSelectionMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#gridselectionmode) values. ## Interactions The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable). With that being said, in order to select a column, we just need to click on one, which will mark it as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected). If the column is not selectable, no selection style will be applied on the header, while hovering. > [!NOTE] > [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) input. The [`IgxColumnGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) is [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) if all of its `selectable` descendants are [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected). *Under _Country Information_ Column Group only column _City_ and _Postal code_ are selectable. ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/customers'; + +@Component({ + selector: 'app-gird-column-group-selection', + templateUrl: './column-group-selection-sample.component.html', + styleUrls: ['./column-group-selection-sample.component.scss'], + imports: [IgxGridComponent, IgxColumnGroupComponent, IgxColumnComponent] +}) +export class GridColumnGroupSelectionComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxGridComponent) + public grid: IgxGridComponent; + + public data: any[]; + + public ngOnInit() { + this.data = DATA; + } + + public ngAfterViewInit() { + this.grid.selectColumns(['City', 'PostalCode']); + this.cdr.detectChanges(); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper{ + padding: 16px +} +```
## Keyboard combinations > [!NOTE] > The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnselection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: - Multi-column selection - holding ctrl + click on every **selectable** header cell. - Range column selection - holding shift + click selects all **selectable** columns in between. ## API manipulations The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected) by setting the corresponding **setter**. > [!NOTE] > The above statement also applies to the [`IgxColumnGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html), except that when the [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) property is changed it changes the state of its descendants. More information regarding the API manipulations could be found in the [`API References`](#api-references) section. ## Styling Before diving into the styling options, the core module and all component mixins need to be imported. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` >[!NOTE] >Please note that [`row selection`](row-selection.md) and [`column selection`](column-selection.md) can't be manipulated independently. They depend on the same `variables`. With that being said, let's move on and change the **selection** and **hover** styles.
Following the simplest approach, let's define our custom **theme**. ```scss $custom-grid-theme: grid-theme( + $row-selected-background: #011627, + $row-selected-text-color: #ecaa53, + $row-selected-hover-background: #011627, + $header-selected-text-color: #ecaa53, + $header-selected-background: #011627 ); ``` The [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) accepts several parameters but those are the five responsible for changing the appearance of all selected columns: - **$row-selected-background** - sets the background of the selected fraction. - **$row-selected-text-color** - sets the text color of the selected fraction - **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells. - **$header-selected-text-color** - sets the text color of the selected column header - **$header-selected-background** - sets the background color of the selected column header. ### Using CSS Variables The last step is to include the custom `igx-grid` theme. ```scss :host { + @include tokens($custom-grid-theme) } ``` ### Demo ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/customers'; + +@Component({ + selector: 'app-gird-column-selection-styles', + templateUrl: './column-selection-styles.component.html', + styleUrls: ['./column-selection-styles.component.scss'], + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class GridColumnSelectionStylesComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxGridComponent) + public grid: IgxGridComponent; + public data: any[]; + + public ngOnInit() { + this.data = DATA; + } + + public ngAfterViewInit() { + this.grid.selectColumns(['CompanyName', 'PostalCode']); + this.cdr.detectChanges(); + } +} +``` +```html +
+ + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-grid-theme: grid-theme( + $row-selected-background: #011627, + $row-selected-text-color: #ecaa53, + $row-selected-hover-background: #011627, + $header-selected-text-color: #ecaa53, + $header-selected-background: #011627 +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
The column selection UI has a few more APIs to explore, which are listed below. - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) properties: - [columnSelection](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnSelection) - [selectedColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectedColumns) - [selectColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectColumns) - [deselectColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deselectColumns) - [selectAllColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectAllColumns) - [deselectAllColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deselectAllColumns) [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [selectable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#selectable) - [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#selected) [`IgxColumnGrpupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) properties: - [selectable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selectable) - [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) events: - [onColumnsSelectionChange](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onColumnsSelectionChange) ## Additional Resources - [Grid overview](grid.md) - [Selection](selection.md) - [Cell selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md new file mode 100644 index 000000000..96eca7c58 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-column-types.md @@ -0,0 +1,476 @@ +--- +_tocName: Column Data Types +_premium: true +--- +--- title: Column Data Types in Angular - Ignite UI for Angular _description: Handle cell and editing templates in Angular by choosing from several predefined column data types - number, string, date, boolean, currency and percent column. _keywords: column data type, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Column Types Ignite UI for Angular Grid provides a default handling of _number_, _string_, _date_, _boolean_, _currency_ and _percent_ column data types, based on which the appearance of the default and editing templates will be present. ## Angular Column Types Example ```typescript +/*eslint-disable*/ +import { Component, OnInit } from "@angular/core"; +import { registerLocaleData, NgClass } from "@angular/common"; +import localeBG from '@angular/common/locales/bg'; +import localeDE from '@angular/common/locales/de'; +import localeFR from '@angular/common/locales/fr'; +import localeJA from '@angular/common/locales/ja'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxTimeSummaryOperand } from 'igniteui-angular/grids/core'; +import { FormsModule } from "@angular/forms"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + +@Component({ + selector: "grid-column-data-types-sample", + styleUrls: ["./grid-column-data-types-sample.component.scss"], + templateUrl: "grid-column-data-types-sample.component.html", + imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxHintDirective, IgxSuffixDirective, IgxIconComponent, IgxInputGroupComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxInputDirective, NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridColumnDataTypesSampleComponent implements OnInit { + public IgxTimeSummaryOperand = IgxTimeSummaryOperand; + + public digitsInfoMessage: string = 'Applicable to number, currency and percent type columns'; + + // Number options + public options = { + digitsInfo: '1.4-4', + currencyCode: '' + }; + public formatOptions = this.options; + + // Different locales + public locales = ["BG", "EN", "DE", "FR", "JA"]; + public locale = "EN"; + + // DateTime formats + public dateTimeFormats = [ + { format: "short", eq: "'M/d/yy, h:mm a'" }, + { format: "long", eq: "'MMMM d, y, h:mm:ss a z'"}, + { format: "full", eq: "'EEEE, MMMM d, y, h:mm:ss a zzzz'"}, + ]; + + // Date formats + public dateFormats = [ + { format: "shortDate", eq: "'M/d/yy'" }, + { format: "mediumDate", eq: "'MMMM d, y'"}, + { format: "longDate", eq: "'MMMM d, y'"}, + { format: "fullDate", eq: "'EEEE, MMMM d, y'"} + ]; + + // Time formats + public timeFormats = [ + { format: "shortTime", eq: "'h:mm a'" }, + { format: "mediumTime", eq: "'h:mm:ss a'"}, + { format: "longTime", eq: "'h:mm:ss a z'"}, + { format: "fullTime", eq: "'h:mm:ss a zzzz'"}, + ]; + + // DateTime options + public dateTimeOptions = { + format: 'long' + }; + public formatDateTimeOptions = this.dateTimeOptions; + + // Date options + public dateOptions = { + format: 'mediumDate' + }; + public formatDateOptions = this.dateOptions; + + // Time options + public timeOptions = { + format: 'shortTime' + }; + public formatTimeOptions = this.timeOptions; + + // Currency format options + public currencyCodes = ["USD", "BGN", "EUR", "JPY"]; + + public data: any[] = [{ + ProductID: 1, + ProductName: "Chai", + SupplierID: 1, + CategoryID: 1, + QuantityPerUnit: "10 boxes x 20 bags", + ProductImage: "assets/images/products/chai.jpg", + UnitPrice: 18.0000, + UnitsInStock: 39, + UnitsOnOrder: 0.030, + ReorderLevel: 10, + Discontinued: false, + OrderDate: new Date("2012-02-12"), + OrderDateDelay: new Date(new Date("2012-02-12").setHours(3, 20)), + OrderFullDate: new Date(new Date("2012-02-12").setHours(3, 20)) + }, { + ProductID: 2, + ProductName: "Chang", + ProductImage: "assets/images/products/chang.jpg", + SupplierID: 1, + CategoryID: 1, + QuantityPerUnit: "24 - 12 oz bottles", + UnitPrice: 19.0000, + UnitsInStock: 17, + UnitsOnOrder: 0.040, + ReorderLevel: 25, + Discontinued: true, + OrderDate: new Date("2003-03-17"), + OrderDateDelay: new Date(new Date("2003-03-17").setHours(5, 40)), + OrderFullDate: new Date(new Date("2003-03-17").setHours(5, 40)) + }, { + ProductID: 3, + ProductName: "Aniseed Syrup", + ProductImage: "assets/images/products/aniseed.jpg", + SupplierID: 1, + CategoryID: 2, + QuantityPerUnit: "12 - 550 ml bottles", + UnitPrice: 10.0000, + UnitsInStock: 13, + UnitsOnOrder: 0.070, + ReorderLevel: 25, + Discontinued: false, + OrderDate: new Date("2006-03-17"), + OrderDateDelay: new Date(new Date("2006-03-17").setHours(1, 55)), + OrderFullDate: new Date(new Date("2006-03-17").setHours(1, 55)) + }, { + ProductID: 4, + ProductName: "Chef Antons Cajun Seasoning", + ProductImage: "assets/images/products/cajun-seasoning.jpg", + SupplierID: 2, + CategoryID: 2, + QuantityPerUnit: "48 - 6 oz jars", + UnitPrice: 22.0000, + UnitsInStock: 53, + UnitsOnOrder: 0.030, + ReorderLevel: 0, + Discontinued: false, + OrderDate: new Date("2016-03-17"), + OrderDateDelay: new Date(new Date("2016-03-17").setHours(11, 11)), + OrderFullDate: new Date(new Date("2016-03-17").setHours(11, 11)) + }, { + ProductID: 5, + ProductName: "Chef Antons Gumbo Mix", + ProductImage: "assets/images/products/chef-antons-gumbo-mix.jpg", + SupplierID: 2, + CategoryID: 2, + QuantityPerUnit: "36 boxes", + UnitPrice: 21.3500, + UnitsInStock: 0, + UnitsOnOrder: 0.030, + ReorderLevel: 0, + Discontinued: true, + OrderDate: new Date("2011-11-11"), + OrderDateDelay: null, + OrderFullDate: null + }, { + ProductID: 6, + ProductName: "Grandmas Boysenberry Spread", + ProductImage: "assets/images/products/grandmas-boysenberry-spread.jpg", + SupplierID: 3, + CategoryID: 2, + QuantityPerUnit: "12 - 8 oz jars", + UnitPrice: 25.0000, + UnitsInStock: 0, + UnitsOnOrder: 0.030, + ReorderLevel: 25, + Discontinued: false, + OrderDate: new Date("2017-12-17"), + OrderDateDelay: new Date(new Date("2017-12-17").setHours(2, 15)), + OrderFullDate: new Date(new Date("2017-12-17").setHours(2, 15)) + }, { + ProductID: 7, + ProductName: "Uncle Bobs Organic Dried Pears", + ProductImage: "assets/images/products/uncle-bobs-organic-dried-pears.jpg", + SupplierID: 3, + CategoryID: 7, + QuantityPerUnit: "12 - 1 lb pkgs.", + UnitPrice: 30.0000, + UnitsInStock: 150, + UnitsOnOrder: 0.030, + ReorderLevel: 10, + Discontinued: false, + OrderDate: new Date("2016-07-17"), + OrderDateDelay: undefined, + OrderFullDate: new Date(new Date("2016-07-17").setHours(1, 55)) + }, { + ProductID: 8, + ProductName: "Northwoods Cranberry Sauce", + ProductImage: "assets/images/products/cranberry-sauce.jpg", + SupplierID: 3, + CategoryID: 2, + QuantityPerUnit: "12 - 12 oz jars", + UnitPrice: 40.0000, + UnitsInStock: 6, + UnitsOnOrder: 0.030, + ReorderLevel: 0, + Discontinued: false, + OrderDate: new Date("2018-01-17"), + OrderDateDelay: null, + OrderFullDate: new Date(new Date("2018-01-17").setHours(1, 55)) + }, { + ProductID: 9, + ProductName: "Mishi Kobe Niku", + ProductImage: "assets/images/products/mishi-kobe-niku.jpg", + SupplierID: 4, + CategoryID: 6, + QuantityPerUnit: "18 - 500 g pkgs.", + UnitPrice: 97.0000, + UnitsInStock: 29, + UnitsOnOrder: 0.030, + ReorderLevel: 0, + Discontinued: true, + OrderDate: new Date("2010-02-17"), + OrderDateDelay: new Date(new Date("2010-02-17").setHours(8, 10)), + OrderFullDate: new Date(new Date("2010-02-17").setHours(8, 10)) + } + ]; + + private regEx = new RegExp('^[0-9]+.[0-9]+-[0-9]$') + + constructor() { + } + public ngOnInit(): void { + registerLocaleData(localeBG); + registerLocaleData(localeDE); + registerLocaleData(localeFR); + registerLocaleData(localeJA); + } + + public reset() { + this.options.digitsInfo = '1.4-4'; + this.formatOptions = Object.assign({}, this.formatOptions, this.options); + } + public clearCode(event) { + event.preventDefault(); + this.options.currencyCode = ''; + this.formatOptions = Object.assign({}, this.formatOptions, this.options); + } + public modelChange() { + if (this.options.digitsInfo.match(this.regEx)) { + if (Number(this.options.digitsInfo.substr(2, 1)) > Number(this.options.digitsInfo.substr(4, 1))) { + this.digitsInfoMessage = 'The minimum number of digits after fraction (x) is higher than the maximum (x).'; + } else { + this.digitsInfoMessage = 'Applicable to number, currency and percent type columns'; + this.formatOptions = Object.assign({}, this.formatOptions, this.options); + } + } + } + + public selectionChanging(event) { + this.dateTimeOptions.format = event.newSelection.value; + this.formatDateTimeOptions = Object.assign({}, this.formatDateTimeOptions, this.dateTimeOptions); + } + + public selectionDateChanging(event) { + this.dateOptions.format = event.newSelection.value; + this.formatDateOptions = Object.assign({}, this.formatDateOptions, this.dateOptions); + } + + public selectionTimeChanging(event) { + this.timeOptions.format = event.newSelection.value; + this.formatTimeOptions = Object.assign({}, this.formatTimeOptions, this.timeOptions); + } + + public currencySelectionChanging(event) { + this.options.currencyCode = event.newSelection.value; + this.formatOptions = Object.assign({}, this.formatOptions, this.options); + } + + public warningClass() { + if (!this.digitsInfoMessage.startsWith('Applicable')) return 'warning'; + } +} +``` +```html +
+ + + Locale: + @for (locale of locales; track locale) { + + {{ locale }} + + } + Applicable to date, number, currency and percent type columns + + + + DateTime format: + @for (dateFormat of dateTimeFormats; track dateFormat) { + + {{ dateFormat.format }} + + } + Applied to 'dateTime' type column only + + + + Date format: + @for (dateFormat of dateFormats; track dateFormat) { + + {{ dateFormat.format }} + + } + Applied to 'date' type column only + + + + Time format: + @for (timeFormat of timeFormats; track timeFormat) { + + {{ timeFormat.format }} + + } + Applied to 'time' type column only + + + + + + Currency Code: + @for (currencyCode of currencyCodes; track currencyCode) { + + {{ currencyCode }} + + } + Applicable to currency type columns + + @if (options.currencyCode.length > 0) { + clear + + } + + +
+ + +
Set digits + info +
+
+ Decimal representation options, specified by a string in the following + format: minIntegerDigits.minFractionDigits-maxFractionDigits +
+ + + + @if (options.digitsInfo.length > 0) { + clear + + } + + {{ digitsInfoMessage }} + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use '../../../variables' as *; + +igx-select, +igx-input-group { + --ig-size: var(--ig-size-small); +} + +.grid-wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} + +.location-wrapper { + min-width: 278px; + margin: 18px; +} + +.wrapper { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.ellipsis { + @include ellipsis(); +} + +.warning { + color:red; +} +``` ## Default template If you want to enable a data type-specific template, you should set the column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) input otherwise the column will be treated as a string column since that is the default value for column dataType. Let's see what are the default templates for each type. ### String This column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) is not changing the appearance or format of the cell value. ### Number If the [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) is set to _number_, the cell value will be formatted based on application or grid's [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` ```ts public options = { + digitsInfo: '1.4-4', }; public formatOptions = this.options; ``` ```html ``` ### DateTime, Date and Time The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom [date format](https://angular.io/api/common/DatePipe#pre-defined-format-options) or [timezone](https://angular.io/api/common/DatePipe#parameters): - **format** - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fullTime' and etc. This is a full list of all available [pre-defined Angular format options](https://angular.io/api/common/DatePipe#pre-defined-format-options) (legacy). - **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world: + + > Note: Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization.md#formatting). ```ts public formatDateOptions = { + /** The date/time components that a date column will display, using predefined options or a custom format string. */ + /** e.g 'dd/mm/yyyy' or 'shortDate' **/ + format: 'longDate', + /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */ + timezone: 'GMT' }; public formatOptions = this.options; ``` ```html ``` Available timezones: | Timezone | Value | |---------------------------| ------------------------- | | Alpha Time Zone |‘UTC+1’ | | Australian Central Time |‘UTC+9:30/ +10:30’ | | Arabia Standard Time |‘UTC+3’ | | Central Standard Time |‘UTC-6’ | | China Standard Time |‘UTC+8’ | | Delta Time Zone |‘UTC+4’ | | Greenwich Mean Time |‘UTC+0’ | | Gulf Standard Time |‘UTC+4’ | | Hawaii Standard Time |‘UTC-10’ | | India Standard Time |‘UTC+4’ |
The Grid accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](grid.md#custom-display-format). As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the _time_ portion of the date object: ```ts // Time format with equivalent example public timeFormats = [ + { format: 'shortTime', eq: 'h:mm a' }, + { format: 'mediumTime', eq: 'h:mm:ss a' }, + { format: 'longTime', eq: 'h:mm:ss a z' }, + { format: 'fullTime', eq: 'h:mm:ss a zzzz' }, ]; ``` #### Cell editing When it comes to cell editing based on the column type a different editor will appear: - dateTime - [IgxDateTimeEditor directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) will be used. This editor will give you a mask directions for the input elements part of the DateTime object. - date - [IgxDatePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) will be used. - time - [IgxTimePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtimepickercomponent.html) will be used. #### Filtering The same editors listed above will be used when it comes to Quick Filtering/Excel-style Filtering. These are the following filtering operands that each type exposes: - dateTime and date - Equals, Does Not Equal, Before, After, Today, Yesterday, This Month, Last Month, Next Month, This Year, Last Year, Next Year, Empty, Not Empty, Null, Not Null; - time - At, Not At, Before, After, At or Before, At or After, Empty, Not Empty, Null, Not Null; #### Summaries The available Summary operands will be **Count**, **Earliest** (date/time) and **Latest** (date/time). #### Sorting Time type column sorts based on the time portion of the object, ms will be disregarded. Date type column sorts based on the date portion, disregards the time portion. DateTime column sorts based on the full date ### Boolean The default template is using material icons for visualization of boolean values - 'clear' icon for _false_ values and 'check' icon for _true_ values. As for the editing template, it is using [igx-checkbox](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) component. ```html ``` ### Currency #### Default template The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [`LOCALE_ID`](https://angular.io/api/core/LOCALE_ID) or Grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale). _By using LOCALE_ID_ ```ts import { LOCALE_ID } from '@angular/core'; ... + + @Component({ + selector: 'app-component.sample', + templateUrl: 'grid-component.sample.html', + providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }] }) ``` _By using Grid's locale_ ```html ``` By using the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input the end-user can customize the number format by _decimal point_, _currencyCode_ and _display_. ```ts public options = { + digitsInfo: '3.4-4', + currencyCode: 'USD', + display: 'symbol-narrow' }; public formatOptions = this.options; ``` ```html ``` | Parameter | Description | |---------------------------| ------------------------- | | digitsInfo | Represents Decimal representation of currency value | | currencyCode | ISO 4217 currency code | | display* | Displays the value by narrow or wide symbol | *display - for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$. Upon editing of cell's value the _currency symbol_ will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.md#cell-editing-templates). >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) ### Percent Default template is showing the percent equivalent of the underlying numeric value. The displayed cell value is a multiplied result by display factor of '100' - for example, as the default factor is 100 and the "value" passed to the cell is 0.123, then the displayed cell value will be "12.3%". When it comes to cell editing, the value will be the same as the data source value - the display factor is '1'. Upon editing of the cell a preview of the percent value will be shown as a suffix element.For example, while editing '0.0547' the preview element will show '5.47%'. ```ts public options = { + /** + * Decimal representation options, specified by a string in the following format: + * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. + * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. + * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + */ + digitsInfo: '2.2-3' }; public formatPercentOptions = this.options; ``` ```html ``` >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) ### Image Default template is using the value coming from the data as an image source to a default image template. The default image template will extract the name of the image file and set it as `alt` attribute of the image to meet the accessibility requirement. The displayed cell size is adjusted to the sizes of the images rendered, so keep in mind that large images will still be rendered and the grid rows will become as large as the images in the image column. Filtering, sorting and grouping will be turned off by default for image type columns. If you want to enable them, you need to provide custom strategies which perform the data operations. ```html ``` When [auto-generating](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) columns, the grid analyses the values in the first data record. If a value is of type string and matches the pattern of a url ending in an image extension (gif, jpg, jpeg, tiff, png, webp, bmp) then the column will automatically be marked as `dataType === GridColumnDataType.Image` and a default image template will be rendered. ## Default editing template See the editing templates part of [Grid Editing topic](editing.md#editing-templates) ## Custom editing template and formatter Custom template and column formatter definition will always take precedence over the column data type set: ### Custom template ```html + + + {{ value | currency:'USD':'symbol':'1.0-0'}} + + ``` ### Column formatter ```ts + // Through column formatter property public formatCurrency(value: number) { + return `Dollar sign ${value.toFixed(0)}`; } public init(column: IgxColumnComponent) { + switch (column.field) { + case 'UnitsInStock': + column.formatter = this.formatCurrency; + break; + default: + return; } ``` ## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - Column [pipeArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) - Grid [locale](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) - Column [dataType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) ## Additional Resources
- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) - [Grid overview topic](grid.md) - [Editing topic](editing.md) - [Summaries topic](summaries.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md new file mode 100644 index 000000000..1bd3bd442 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-conditional-cell-styling.md @@ -0,0 +1,584 @@ +--- +_tocName: Conditional Styling +_premium: true +--- +--- title: Conditional Cell Styling in Angular Data Grid - Ignite UI for Angular _description: Let users identify different cells quickly. Define a variety of cell styles. Use the conditional cell styling in Angular Data grid to make cells stand out. _keywords: conditional styling, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Conditional Styling If you need to provide any custom styling in the IgxGrid component, you can do it on either row or cell level. ## Grid Conditional Row Styling The IgxGrid component in Ignite UI for Angular provides two ways to **conditional styling of rows** based on custom rules. - By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowClasses) input on the IgxGrid component; - By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowStyles) input on the IgxGrid component; Further in this topic wi will cover both of them in more details. ### Using rowClasses You can conditionally style the IgxGrid rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowClasses) input and define custom rules. ```html + ... ``` The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. ```typescript // sample.component.ts public rowClasses = { + activeRow: this.activeRowCondition }; public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index; ``` ```scss // sample.component.scss ::ng-deep { + .activeRow { + border: 2px solid #fc81b8; + border-left: 3px solid #e41c77; + } } ``` > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-row-classes-sample', + styleUrls: ['./grid-rowClasses.component.scss'], + templateUrl: 'grid-rowClasses.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridRowClassesComponent implements OnInit { + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; + public data: any[]; + + public constructor() { } + + public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index; + // eslint-disable-next-line @typescript-eslint/member-ordering + public rowClasses = { + activeRow: this.activeRowCondition + }; + + public ngOnInit(): void { + this.data = DATA; + } + + public handleChange() { + requestAnimationFrame(() => { + this.grid.pipeTrigger++; + this.grid.notifyChanges(); + }); + } + public handleLeftClick(args) { + args.event.preventDefault(); + this.grid.navigation.setActiveNode({ row: args.cell.row.index, column: args.cell.column.visibleIndex }); + + } +} +``` +```html +
+ + + + + + + + + +
+``` +```scss +.grid__wrapper { + display: flex; + justify-content: space-between; + margin: 16px; + flex-flow: column; + align-items: flex-start; + position: relative; + } +::ng-deep { + .activeRow { + border: 2px solid #fc81b8; + border-left: 3px solid #e41c77; + } + .toggle-section { + width: 300px; + height: 100px; + background-color: white; + } + +} + + .container { + display: flex; + igx-icon { + margin: 20px; + } + } +```
### Using rowStyles Columns now expose the `rowStyles` property which allows conditional styling of the data rows. Similar to `rowClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). > The callback signature for both `rowStyles` and `rowClasses` is: ```ts (row: RowType) => boolean ``` Let's define our styles: ```typescript // component.ts public rowStyles = { + background: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000', + border: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid', + 'border-color': (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9' }; ``` ```html + ... ``` ### Demo ```typescript +import { Component, ViewChild, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { Observable } from 'rxjs'; +import { FinancialDataService } from '../../services/financial.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + providers: [FinancialDataService], + selector: 'app-grid-row-styles-sample', + styleUrls: ['./grid-rowStyles.component.scss'], + templateUrl: 'grid-rowStyles.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] +}) + +export class GridRowStylesComponent { + private localService = inject(FinancialDataService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + public data: Observable; + + public rowStyles = { + background: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000', + border: (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid', + 'border-color': (row: RowType) => (+row.data['Change'] < 0 && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9' + }; + + constructor() { + this.localService.getData(1000); + this.data = this.localService.records; + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + +} +``` +```html +
+ + + + + + + + + Change + + + +
+ @if (val > 0) { + + } + @if (val < 0) { + + } + {{ formatNumber(val) + }} +
+ + + + + Change(%) + + + + +
+ @if (val > 0) { + + } + @if (val < 0) { + + } + {{ formatNumber(val) + }}% +
+ + + + + + + + + + + + +
+
+``` +```scss +.cellAlignSyle { + text-align: right; + float:right; +} +.cellAlignSyle > span { + float:right; +} +.up { + color: green; +} +.down { + color: red; +} +.headerAlignSyle { + text-align: right !important; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} +```
## Grid Conditional Cell Styling ## Overview The IgxGrid component in Ignite UI for Angular provides two ways to **conditional styling of cells** based on custom rules. - By setting the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) input [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell. ```ts // component.ts file public beatsPerMinuteClasses = { + downFont: this.downFontCondition, + upFont: this.upFontCondition }; ... private downFontCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] <= 95; } ``` ```scss // component.scss file .upFont { + color: red; } .downFont { + color: green; } ``` ### Using cellClasses You can conditionally style the IgxGrid cells by setting the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) input and define custom rules. ```html ``` The [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. ```typescript // sample.component.ts private upFontCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] > 95; } private downFontCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] <= 95; } public beatsPerMinuteClasses = { + downFont: this.downFontCondition, + upFont: this.upFontCondition }; ``` ```scss // sample.component.scss ::ng-deep { + .upFont { + color: green; + } + + .downFont { + color: red; + } } ``` > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { athletesData } from '../../data/athletesData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DecimalPipe, PercentPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-conditional-cell-style', + styleUrls: ['./grid-conditional-cell-style.component.scss'], + templateUrl: './grid-conditional-cell-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, PercentPipe] +}) +export class GridConditionalCellStyleComponent implements OnInit { + public data: any[]; + + public ngOnInit() { + this.data = athletesData; + } + + private upFontCondition = (rowData: any, columnKey: any): boolean => rowData[columnKey] > 95; + + private downFontCondition = (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 95; + + private top100Condition = (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 100; + + private belowTop100Condition = (rowData: any, columnKey: any): boolean => rowData[columnKey] > 100; + + private speedCondition = (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5; + + + // eslint-disable-next-line @typescript-eslint/member-ordering + public beatsPerMinuteClasses = { + downFont: this.downFontCondition, + upFont: this.upFontCondition + + }; + + + // eslint-disable-next-line @typescript-eslint/member-ordering + public rankClasses = { + belowTop100: this.belowTop100Condition, + top100: this.top100Condition + }; + + + // eslint-disable-next-line @typescript-eslint/member-ordering + public speedClasses = { + 'topSpeed topSpeedFont': this.speedCondition + }; +} +``` +```html +
+ + + + + + +
+ {{ val | number: '1.1-5' }} +
+ + + + +
+ + {{ val / 100 | percent }} + +
+ + + + +
+ + + +
+ + + +
+``` +```scss +:host::ng-deep { + $primary-color-green: green; + $primary-color-red: red; + $primary-color-blue: royalblue; + $margin-right-images: 25px; + $images-font-size: 2.5em; + $images-font-weight: bold; + + .grid__wrapper { + margin: 0 auto; + padding: 16px; + } + + .cellContainer { + width: 100%; + float: right; + } + + .cellAlignSyle { + width: 100%; + text-align: right; + float:right; + } + + .upFont { + color: $primary-color-red; + } + + .downFont { + color: $primary-color-green; + } + + .topSpeedFont { + color: $primary-color-blue; + } + + .contentStyle { + font-size: $images-font-size; + font-weight: $images-font-weight; + margin-right: $margin-right-images; + } + + .arrow { + @extend .contentStyle; + content: "^"; + } + + .star { + @extend .contentStyle; + content: "*"; + } + + .top100:before { + @extend .arrow; + color: $primary-color-green; + margin-top: 10px; + } + + .belowTop100:before { + @extend .arrow; + color: $primary-color-red; + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + margin-top: -10px; + } + + .topSpeed:before { + @extend .star; + font-weight: normal; + color: $primary-color-blue; + margin-top: 10px; + } +} +```
- By using the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. ```ts public styles = { + 'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)', + 'text-shadow': '1px 1px 2px rgba(25,25,25,.25)', + 'animation': '0.25s ease-in-out forwards alternate popin' }; ``` > The callback signature for both `cellStyles` and `cellClasses` is now changed to: ```ts (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean ``` ### Using cellStyles Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions). In the [sample above](#demo) we've created: - Two different styles that will be applied based on the column index. - You will also change the `text color` based on even/odd rows. > The callback signature for both `cellStyles` is: ```ts (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean ``` Let's define our styles: ```typescript // component.ts public oddColStyles = { + background: 'linear-gradient(to right, #b993d6, #8ca6db)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray', + animation: '0.75s popin' }; public evenColStyles = { + background: 'linear-gradient(to right, #8ca6db, #b993d6)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', + animation: '0.75s popin' }; ``` On `ngOnInit` we will add the `cellStyles` configuration for each column of the predefined `columns` collection, which is used to create the IgxGrid columns dynamically. ```ts // component.ts public ngOnInit() { + this.data = athletesData; + this.columns = [ + { field: 'Id' }, + { field: 'Position' }, + { field: 'Name' }, + { field: 'AthleteNumber' }, + { field: 'CountryName' } + ]; + + this.applyCSS(); } ``` ```ts public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); } public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); } ``` ```html // component.html + + ``` Define a `popin` animation ```scss // component.scss @keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { athletesData } from '../../data/athletesData'; +import { JsonPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-conditional-cell-style-2', + styleUrls: ['./grid-conditional-cell-style-2.component.scss'], + templateUrl: './grid-conditional-cell-style-2.component.html', + imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxGridComponent, IgxColumnComponent, JsonPipe] +}) +export class GridConditionalCellStyle2Component implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data: any[]; + public columns: any[]; + + public oddColStyles = { + background: 'linear-gradient(to right, #b993d6, #8ca6db)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray', + animation: '0.75s popin' + }; + + public evenColStyles = { + background: 'linear-gradient(to right, #8ca6db, #b993d6)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', + animation: '0.75s popin' + }; + + public ngOnInit() { + this.data = athletesData; + this.columns = [ + { field: 'Id' }, + { field: 'Position' }, + { field: 'Name' }, + { field: 'AthleteNumber' }, + { field: 'CountryName' } + ]; + + this.applyCSS(); + } + public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); + } + + public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); + } +} +``` +```html +
+
+ + + + Note: You cannot use the callback functionality here + + +
+ + @for (c of columns; track c) { + + + } + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; + transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); + + igx-grid { + margin-top: 25px; + } +} + +@keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } +} +```
## Known issues and limitations - If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met. A pipe check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that with a `spread operator(...)` on [`onCellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onCellEdit) event. This will copy the original object with a new instance, and lead pure pipe to be fired. ```ts public backgroundClasses = { + myBackground: (rowData: any, columnKey: string) => { + return rowData.Col2 < 10; + } }; ... editDone(evt) { + this.backgroundClasses = {...this.backgroundClasses}; } ``` ```html + + + ``` ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Editing](editing.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Column Hiding](column-hiding.md) - [Selection](selection.md) - [Searching](search.md) - [Toolbar](toolbar.md) - [Multi-column Headers](multi-column-headers.md) - [Size](display-density.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md new file mode 100644 index 000000000..17637fd11 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-display-density.md @@ -0,0 +1,228 @@ +--- +_tocName: Size +_premium: true +--- +--- title: Angular Grid Size - Ignite UI for Angular _description: Learn how to apply size capabilities to the Data grid component. You can use a set of compact view options in the Ignite UI for Angular. _keywords: material density, size, igniteui for angular, infragistics _license: commercial --- # Angular Grid Size **IgxGrid** design is based on [Material Design Guidelines](https://material.io/design). We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content. ## Angular Grid Size Example ```typescript +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +class CustomNumberSummary { + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxSummaryOperand().operate(data); + result.push({ + key: 'Min', + label: 'Min', + summaryResult: IgxNumberSummaryOperand.min(data) + }); + result.push({ + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }); + return result; + } + } +@Component({ + selector: 'app-grid-displaydensity-sample', + styleUrls: ['./grid-displaydensity-sample.component.scss'], + templateUrl: './grid-displaydensity-sample.component.html', + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxCellTemplateDirective, DatePipe] +}) +export class GridDisplayDensitySampleComponent implements OnInit { + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + + @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent; + public data; + + public size = 'small'; + public sizes; + public numberSummaries = CustomNumberSummary; + + public ngOnInit() { + this.data = INVOICE_DATA; + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event) { + this.size = this.sizes[event.index].label; + this.grid.reflow(); + } + +} +``` +```html +
+ +
+ + + + + + + + + + + + + + + + + + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +:host { + display: block; + padding: 8px; +} + +.density-chooser { + margin-bottom: 16px; +} +igx-buttongroup{ + display: block; + width: 500px; +} +```
## Usage As you can see in the demo above, the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set size: ```html ``` And now let's see in details how each option reflects on the Grid component. When you switch between different sizes the height of each Grid element and the corresponding paddings will be changed. Also if you want to apply custom column [**width**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding. - **--ig-size-large** - this is the default Grid size with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `80px`; - **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `64px`; - **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `56px`; > [!NOTE] > Please keep in mind that currently you **can not** override any of the sizes. Let's now continue with our sample and see in action how each size is applied. Let's first add a button which will help us to switch between each size: ```html
+
``` ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; public size = 'small'; public sizes; public ngOnInit() { + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.sie === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; } ``` Now we can add the markup. ```html
+
+ + + + + + + + + + + + + + + + + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + + + + + + + + + + + + + + + + + + + + + + ``` Finally, let's provide the necessary logic in order to actually apply the size: ```typescript @ViewChild('grid', { read: IgxGridComponent }) public grid: IgxGridComponent; public selectSize(event: any) { + this.size = this.sizes[event.index].label; } @HostBinding('style.--ig-size') protected get sizeStyle() { + return `var(--ig-size-${this.size})`; } ``` Another option that [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) provides for you, in order to be able to change the height of the rows in the Grid, is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowheight). So let's see in action how this property affects the Grid layout along with the `--ig-size` CSS variable. Please keep in mind the following: - `--ig-size` CSS variable will have **NO** impact on row height **if there is [rowHeight](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowheight) specified**; - `--ig-size` will **affect all of the rest elements in the Grid**, as it has been described above; And now we can extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowHeight) property to the Grid: + + ```html + + .............. + + ```
## API References
- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html)
## Additional Resources - [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Editing](editing.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md new file mode 100644 index 000000000..1dc808feb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-editing.md @@ -0,0 +1,193 @@ +--- +_tocName: Editing +--- +--- title: Angular Grid Editing - Ignite UI for Angular _description: Get a powerful public API and an easy way to perform data manipulations like creating, updating, or deleting records. See the Angular data grid editing options! _keywords: data manipulation, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Editing Ignite UI for Angular Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The data manipulation phases are: [Cell Editing](cell-editing.md), [Row Editing](row-editing.md), and [Batch Editing](batch-editing.md). The Grid gives you a powerful public API which allows you to customize the way these operations are performed. Additionally, **Cell editing** exposes several default editors based on the column data type, that could be easily customized via [igxCellEditor directive](cell-editing.md#cell-editing-templates) or [igxRow directives](row-editing.md#customizing-row-editing-overlay). ## Setup In order to specify which edit mode should be enabled, the Grid exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable). Property **editable** enables you to specify the following options: - **false** - the editing for the corresponding column will be disabled; /default value/ - **true** - the editing for the corresponding column will be enabled; >Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the Grid. Property **rowEditable** enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled; /default value/ - **true** - the row editing in the corresponding grid will be enabled; In the Grid if you set rowEditable property to true, and editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the _primary key_. **Batch editing** in the grid can be enabled for both **cell editing** and **row editing** modes. In order to set up batch editing it is necessary to provide to the grid a _TransactionService_. - _Cell and Batch Editing_ - in this scenario every singe modification of each cell is preserved separately and undo/ redo operations are available on cell level; - _Row and Batch Editing_ - in this scenario the modifications are preserved on row level so undo/ redo operations will not be working for each cell that is modified but for the bunch of cell from each row. ### Editing Templates + + If you want to use a data type specific _edit templates_, you should specify the column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) property. So let's now see what are the default templates for each type: - For `string` data type, default template is using [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - For `number` data type, default template is using [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0. - For `date` data type, default template is using [igxDatePicker](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - For `dateTime` data type, default template is using [IgxDateTimeEditor directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html). This editor will give you a mask directions for the input elements part of the DateTime object. - For `date` data type, default template is using [IgxDatePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html). - For `time` - data type, default template is using [IgxTimePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtimepickercomponent.html). - For `boolean` data type, default template is using [igxCheckbox](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - For `currency` data type, default template is using [IgxInputGroup](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) with prefix/suffix configuration based on application or grid locale settings. - For `percent` data type, default template is using [IgxInputGroup](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) with suffix element that shows a preview of the edited value in percents. - For custom templates you can see [Cell Editing topic](cell-editing.md#cell-editing-templates) All available column data types could be found in the official [Column types topic](column-types.md#default-template). #### Default template editors of date-time columns The template editors of `date`, `dateTime` and `time` column data types use a default input format as per the `IgxGrid`'s [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale). In case the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html#pipeArgs) object `format` property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only. If the editors input format should be explicitly set, the [`editorOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html#editorOptions) object of type [`IColumnEditorOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icolumneditoroptions.html) can be leveraged. It accepts a `dateTimeFormat` property that is used as input format for the editors of `date`, `dateTime` and `time` column data types. ```typescript const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', } ``` ```html ``` ### Event arguments and sequence The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.md) and [**Cell Editing**](cell-editing.md) lifecycle - when starting, committing or canceling the editing action. + + | Event | Description | Arguments | Cancellable | |-------|-------------|-----------|-------------| | [`rowEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#celleditdone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igrideditdoneeventargs.html) | `false` | | [`cellEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | | [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEdit) | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`rowEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | | [`rowEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | ### Event cancellation - `RowEditEnter` - Neither Row nor Cell will enter edit mode. - `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed Cell/Row edit, hitting **Done** button or **Enter** won't commit the value or row transaction. Cell editing and Row editing won't be closed until **Cancel** button is clicked. - `RowEdit` - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes. The following sample demonstrates the editing execution sequence in action: ```typescript +import { Component, ElementRef, Renderer2, ViewChild, inject } from '@angular/core'; +import { contains } from '@igniteui/material-icons-extended'; +import { DATA } from '../../data/nwindData'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-editing-lifecycle', + templateUrl: 'grid-editing-lifecycle.component.html', + styleUrls: ['grid-editing-lifecycle.component.scss'], + imports: [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent] +}) +export class GridEditingLifecycleComponent { + private renderer = inject(Renderer2); + + @ViewChild('logger') + public logger: ElementRef; + + public $rowEditEnter = false; + public $cellEditEnter = false; + public $cellEdit = false; + public $rowEdit = false; + public data; + + + public constructor() { + this.data = DATA; + } + + public rowEditEnter(evt) { + evt.cancel = this.$rowEditEnter; + this.logAnEvent(`=> 'rowEditEnter' with 'RowID':` + evt.rowID, evt.cancel); + } + public cellEditEnter(evt) { + evt.cancel = this.$cellEditEnter; + this.logAnEvent(`=> 'cellEditEnter' with 'value':` + evt.oldValue, evt.cancel); + } + public cellEdit(evt) { + evt.cancel = this.$cellEdit; + this.logAnEvent(`=> 'cellEdit' with 'newValue':` + evt.newValue, evt.cancel); + } + public cellEditDone() { + this.logAnEvent(`=> 'cellEditDone'`); + } + public cellEditExit() { + this.logAnEvent(`=> 'cellEditExit'`); + } + public rowEdit(evt) { + evt.cancel = this.$rowEdit; + this.logAnEvent(`=> 'rowEdit'`, evt.cancel); + } + public rowEditDone() { + this.logAnEvent(`=> 'rowEditDone'`); + } + public rowEditExit() { + this.logAnEvent(`=> 'rowEditExit' << End of cycle >>`); + } + + private logAnEvent(msg: string, canceled?: boolean) { + const createElem = this.renderer.createElement('p'); + + if (canceled) { + msg = msg.concat(': has been canceled '); + } + + const text = this.renderer.createText(msg); + this.renderer.appendChild(createElem, text); + const container = this.logger.nativeElement; + this.renderer.insertBefore(container, createElem, container.children[0]); + } + + // eslint-disable-next-line @typescript-eslint/member-ordering + public clearLog() { + const elements = this.logger.nativeElement.querySelectorAll('p'); + for (let index = 0; index < elements.length; index++) { + this.renderer.removeChild(this.logger.nativeElement, elements[index]); + } + } +} +``` +```html +
+ cancel rowEditEnter + cancel cellEditEnter + cancel cellEdit + cancel rowEdit +
+
+
+
+ + + + + + +
+
+
+
+
+
+ Events execution sequence + +
+
+
+
+
+
+
+``` +```scss +:host { + width: 100%; +} + +.switches { + margin-top: 12px; + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-around; +} + +.sample-wrapper { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.grid-wrapper { + width: 60%; + margin: 8px; +} +.log-wrapper { + width: 35%; +} + +.clearBtn { + top: 3px; + margin-left: 20px; +} + +.selected-data-area{ + overflow-y: auto; + max-height: 550px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; +} + +.logContainer { + padding: 0.2rem 0.4rem; +} + +.highlight { + text-align: center; + margin-bottom: 0.4rem; +} +``` ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: | Grid | Filtering | Sorting | Paging | Moving | Pinning | Hiding | GroupBy | Resizing | Escape | Enter | F2 | Tab | Cell Click | Add new row/Delete/Edit | | ----------------- |:---------:|:-------:|:------:|:------:|:-------:|:------:|:-------:|:--------:|:------:|:-----:|:--:|:---:|:----------:|:-----------------------:| | Keep edit mode | | | | | | | | ✔ | | | | | | | | Exit edit mode |✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | | Commit | | | | | | | | | | ✔ | ✔ | ✔ | ✔ | ✔ | | Discard | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |✔ | | ✔ | | | | | | As seen from the table, all interactions, except resizing a column, will end the editing and will discard the new values. Should the new value be committed, this can be done by the developer in the corresponding feature "-ing" event. Example how to commit new values, if user tries to sort the column while a cell/row is in edit mode: ```html ... ``` ```typescript public onSorting(event: ISortingEventArgs) { + this.grid.endEdit(true); + // (event.owner as IgxGridComponent).endEdit(true); } ``` ## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) _[IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - [IgxDatePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - [IgxDatePickerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-date-picker-theme) - [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - [IgxCheckboxComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) - [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
- [Grid overview](grid.md) - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Column Data Types](column-types.md#default-template) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md new file mode 100644 index 000000000..a74dc1117 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-excel-style-filtering.md @@ -0,0 +1,814 @@ +--- +_tocName: Excel Style Filtering +_premium: true +--- +--- title: Excel Style Filtering in Angular Data Grid- Ignite UI for Angular _description: Learn how to configure Excel filtering in Angular Data Grid. You can enable/disable various options and customize the Excel style filter menu the way you want. _keywords: excel like filter, igniteui for angular, infragistics _license: commercial --- # Excel Filtering in Angular Grid The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Grid. ## Angular Grid Excel Style Filtering Example ```typescript +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-excel-style-filtering-sample-1.component.scss'], + templateUrl: 'grid-excel-style-filtering-sample-1.component.html', + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) + +export class ExcelStyleFilteringSample1Component implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + public size = 'large'; + public sizes; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event) { + this.size = this.sizes[event.index].label; + this.grid1.reflow(); + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+
+ +
+ + + + + + + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.density-chooser { + margin-bottom: 16px; +} + +igx-buttongroup{ + display: block; + width: 500px; +} +```
## Usage To turn on the grid excel filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowFiltering) should be set to `true` and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterMode) should be set to `excelStyleFilter`. ```html ``` ## Interactions In order to open the filter menu for a particular column, the Angular filter icon in the header should be clicked. Additionally, you can use the `Ctrl + Shift + L` combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on. If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press `Enter`. The filtering applied through the list items creates filter expressions with `equals` operator and the logic operator between the expressions is [`OR`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#or). If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option `Add current selection to filter`. If you want to clear the filter, you can check the `Select All` option and then click the Apply button. To apply a filter with different expressions, you can click the **Text filter**, which will open a sub menu with all available filter operators for the particular column. Selecting one of them will open the custom filter dialog, where you can add as many expressions as you want with different filter and logic operators. There is also a clear button, which can clear the filter.
## Configure Menu Features Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: [`sortable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortable), [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected), [`disablePinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disablePinning), [`disableHiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disableHiding). ```html + + + + + + + + + + ```
In the sample below **Product Name** and **Discontinued** columns have all four features enabled, **Quantity Per Unit** have all three disabled, **Unit Price** has only sorting and **Order Date** has only pinning and hiding and all are [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable).
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-excel-style-filtering-sample-2.component.scss'], + templateUrl: 'grid-excel-style-filtering-sample-2.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) + +export class ExcelStyleFilteringSample2Component implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} +```
## Templates If you want to further customize the Excel style filter menu without disabling the column features you could use custom templates. The Excel Style filter menu provides two directives for templating: - `IgxExcelStyleColumnOperationsTemplateDirective` - re-templates the area with all column operations like sorting, pinning, etc. - `IgxExcelStyleFilterOperationsTemplateDirective` - re-templates the area with all filter specific operations. You could either re-template only one of those areas or both of them. You could put any custom content inside those directives or you could use any of our built-in Excel style filtering components. The following code demonstrates how to define a custom Excel style filter menu using the [`igx-excel-style-header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleheadercomponent.html), [`igx-excel-style-sorting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesortingcomponent.html) and [`igx-excel-style-search`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesearchcomponent.html) components. ```html + + + + + + + + + + + + + + + ... ``` You could also re-template the Excel style filtering icon in the column header using the `igxExcelStyleHeaderIcon` directive: ```html + + filter_alt + ```
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-excel-style-filtering-sample-3.component.scss'], + templateUrl: 'grid-excel-style-filtering-sample-3.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) + +export class ExcelStyleFilteringSample3Component implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + filter_alt + + + + + + + + + + + + + + + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} +``` Here is the full list of Excel style filtering components that you could use: - [`igx-excel-style-header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleheadercomponent.html) - [`igx-excel-style-sorting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesortingcomponent.html) - [`igx-excel-style-moving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylemovingcomponent.html) - [`igx-excel-style-pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylepinningcomponent.html) - [`igx-excel-style-hiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylehidingcomponent.html) - [`igx-excel-style-selecting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleselectingcomponent.html) - [`igx-excel-style-clear-filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleclearfilterscomponent.html) - [`igx-excel-style-conditional-filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleconditionalfiltercomponent.html) - [`igx-excel-style-search`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesearchcomponent.html)
## Unique Column Values Strategy The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the [`Grid Remote Data Operations`](remote-data-operations.md#unique-column-values-strategy) topic. ## Formatted Values Filtering Strategy By default, the Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { In order to do that you can use the [`FormattedValuesFilteringStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/formattedvaluesfilteringstrategy.html). } The following sample demonstrates how to format the numeric values of a column as strings and filter the Grid based on the string values: ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { FormattedValuesFilteringStrategy } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-formatted-filtering-strategy.component.scss'], + templateUrl: 'grid-formatted-filtering-strategy.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class GridFormattedFilteringStrategyComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + public filterStrategy = new FormattedValuesFilteringStrategy(); + + public ngOnInit(): void { + this.data = DATA; + } + + public formatPrice(value: number) { + return value < 15 ? 'low' : value > 50 ? 'high' : 'medium'; + } +} +``` +```html +
+ + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +``` >[!NOTE] >The formatted values filtering strategy won't work correctly if you have more than one column bound to the same field from your data and one of the columns has a formatter. ## External Excel Style filtering As you see at the demos above the default appearance of the Excel Style filtering dialog is inside the Grid. So this dialog is only visible when configuring the filters. There is a way to make that dialog stay always visible - it can be used outside of the grid as a standalone component. In the demo below, the Excel style filtering is declared separately of the Grid. ### Demo ```typescript +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxCSVTextDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { CurrencyPipe } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-grid-external-excel-style-filtering', + templateUrl: './grid-external-excel-style-filtering.component.html', + styleUrls: ['./grid-external-excel-style-filtering.component.scss'], + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class GridExternalExcelStyleFilteringComponent implements OnInit { + + public data: any[]; + constructor() {} + + public ngOnInit(): void { + this.data = DATA; + } +} +``` +```html +
+
+ + + @for (c of grid1.columns; track c) { + + {{ c.field }} + + } + + + + +
+ + + + + + + + Export to Excel + Export to CSV + + + + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +.grid__wrapper { + display: flex; + flex-flow: row; + margin: 15px; + column-gap: 5px; +} + +.flex-column { + display: flex; + flex-flow: column; + height: 650px; +} + +.igSelect { + margin-left: 1px; +} +```
### Usage In order to configure the Excel style filtering component, you should set its [`column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridexcelstylefilteringcomponent.html#column) property to one of the Grid's columns. In the sample above, we have bound the [`column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridexcelstylefilteringcomponent.html#column) property to the value of an IgxSelectComponent that displays the Grid's columns. ```html + + + {{ c.field }} + ``` ## External Outlet The Grid's [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) creates separate stacking context for each grid in the DOM. This ensures that all descendant elements of the grid will render as intended, without overlapping one another. However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same `z-index` (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the [`outlet`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#outlet) property to an external outlet directive which allows the overlay elements to always appear on top. ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-external-outlet', + styleUrls: ['./grid-external-outlet-sample.component.scss'], + templateUrl: 'grid-external-outlet-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective, CurrencyPipe] +}) + +export class GridExternalOutletComponent implements OnInit { + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } +} +``` +```html +
+ + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+ + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+ +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} +``` ## Styling To get started with styling the Excel Style Filtering dialog, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` The Excel Style Filtering dialog takes its background color from the grid's theme, using the `filtering-row-background` parameter. Additionally, there are specific Excel Style Filtering parameters available for customizing the text color of elements within the dialog. To change the overall style of the dialog, you need to create a custom theme. ```scss $custom-grid: grid-theme( + $filtering-row-background: #ffcd0f, + $excel-filtering-header-foreground: #292826, + $excel-filtering-subheader-foreground: #292826, + $excel-filtering-actions-foreground: #006400, + $excel-filtering-actions-hover-foreground: #ffcd0f, + $excel-filtering-actions-disabled-foreground: #9e9e9e ); ``` We obviously have a lot more components inside the excel like filtering dialog, such as buttons, checkboxes, a list and even a drop-down. In order to style them, we need to create a separate theme for each one: ```scss $custom-button: contained-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); $flat-custom-button: flat-button-theme( + $foreground: #ffcd0f, ); $custom-checkbox: checkbox-theme( + $empty-color: #292826, + $fill-color: #292826, + $tick-color: #ffcd0f, + $label-color: #292826 ); $custom-drop-down: drop-down-theme( + $background-color: #ffcd0f, + $item-text-color: #292826, + $hover-item-background: #292826, + $hover-item-text-color: #ffcd0f ); $custom-input-group: input-group-theme( + $box-background: #ffcd0f, + $idle-text-color: #292826, + $focused-text-color: #292826, + $filled-text-color: #292826 ); $custom-list: list-theme( + $background: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed some of the parameters for the listed components, but the [`button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme), [`checkbox-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme), [`drop-down-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme), [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme), [`list-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-list-theme) themes provide way more parameters to control their respective styling. The last step is to **include** each component’s custom theme. We will also set the color property for the input's placeholder. ```scss :host { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] >We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss :host { + ::ng-deep { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($flat-custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } + } } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-esf-style-sample', + styleUrls: ['./grid-excel-style-filtering-style.component.scss'], + templateUrl: 'grid-excel-style-filtering-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class ExcelStyleFilteringStyleComponent implements OnInit { + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + constructor() { + } + + public ngOnInit(): void { + this.data = DATA; + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + +} +``` +```html +
+ + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$black: #292826; + +$custom-grid: grid-theme( + $filtering-row-background: $yellow, + $excel-filtering-header-foreground: $black, + $excel-filtering-subheader-foreground: $black, + $excel-filtering-actions-foreground: #006400, + $excel-filtering-actions-hover-foreground: $yellow, + $excel-filtering-actions-disabled-foreground: var(--ig-gray-500) +); + +$custom-button: contained-button-theme( + $background: $black, + $foreground: $yellow, + $hover-background: $black, + $hover-foreground: $yellow +); + +$flat-custom-button: flat-button-theme( + $foreground: $black, +); + +$custom-input-group: input-group-theme( + $box-background: $yellow, + $idle-text-color: $black, + $focused-text-color: $black, + $filled-text-color: $black +); + +$custom-list: list-theme( + $background: $yellow +); + +$custom-checkbox: checkbox-theme( + $empty-color: $black, + $fill-color: $black, + $tick-color: $yellow, + $label-color: $black +); + +$custom-drop-down: drop-down-theme( + $background-color: $yellow, + $item-text-color: $black, + $hover-item-background: $black, + $hover-item-text-color: $yellow +); + +:host { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + @include tokens($custom-input-group); + @include tokens($custom-checkbox); + @include tokens($custom-list); + @include tokens($custom-button); + @include tokens($flat-custom-button); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md new file mode 100644 index 000000000..572fef5cb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-export-excel.md @@ -0,0 +1,429 @@ +--- +_tocName: Export services +_premium: true +--- +--- title: Angular Grid Export to Excel and PDF - Ignite UI for Angular _description: With Ignite UI Excel and PDF Exporters you can make client exports more convenient & simpler. These formats allow features like filtering, sorting, etc _keywords: data export, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Export to Excel and PDF Service @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {

Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxGrid in seconds. Inject the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the respective [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export)/[`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#export) method, and the component handles the rest—from honoring filters and sorting to shaping the output format.

} @@if (igxName === 'IgxHierarchicalGrid' || igxName === 'IgxPivotGrid') {

The Ignite UI Excel and PDF Exporter services treat the IgxGrid exactly like your users see it on screen—complete with hierarchical layouts and summaries. Inject the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the appropriate [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export)/[`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#export) method, and let the service generate the final document.

} The sections below walk through setup, usage patterns, and tips for tailoring each export so that your users receive data that is ready to consume, no matter which file type they prefer.
## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript +import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { INVOICE_DATA } from '../data/invoiceData'; + + +@Component({ + selector: 'app-excel-export-sample-1', + styleUrls: ['./excel-export-sample-1.component.scss'], + templateUrl: './excel-export-sample-1.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] +}) +export class ExcelExportSample1Component implements OnInit { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('igxGrid1', { static: true }) public igxGrid1: IgxGridComponent; + + public data = []; + public groupExpressions: ISortingExpression[]; + public columns: { dataType: GridColumnDataType, field: string, width: string, groupable: boolean, hidden?: boolean }[] = [ + { dataType: GridColumnDataType.String, field: 'ShipCountry', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipCity', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipAddress', width: '150', groupable: true}, + { dataType: GridColumnDataType.String, field: 'PostalCode', width: '150', groupable: true }, + { dataType: GridColumnDataType.Date, field: 'OrderDate', width: '150', groupable: true }, + { dataType: GridColumnDataType.Number, field: 'Quantity', width: '150', groupable: true } + ]; + + public ngOnInit(): void { + this.data = INVOICE_DATA; + this.groupExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry' }, + { dir: SortingDirection.Asc, fieldName: 'ShipCity' } + ]; + } + + /* + The following code demonstrates how to attach event handlers to exporter specific events + and also how to customize the column export process. + this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } + }); + this.excelExportService.rowExporting.subscribe((args: IRowExportingEventArgs) => { + }); + this.excelExportService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { + }); + */ +} +``` +```html +

+ + + + + + + + + @for (c of columns; track c) { + + + } + +

+``` +```scss +.grid__wrapper { + padding-top: 16px; + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; +} + +.exportButton { + margin-top: 5px; +} +```
## Exporting Grid's Data Getting the exporters into your project takes only a few lines of code. Follow these steps and you will have reusable services that can create either Excel or PDF outputs on demand: 1. Import the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) and/or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) in your root module. 2. Inject whichever exporter you need and call its `export` method when the user requests a file. ```typescript // component.ts import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core'; // import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package ... private excelExportService = inject(IgxExcelExporterService); private pdfExportService = inject(IgxPdfExporterService); ``` > [!Note] > In v12.2.1 and later, `IgxExcelExporterService` is provided in root and does not need to be registered in the `providers` array. The PDF exporter was introduced in later versions and is available as an injectable service without any additional configuration. To initiate an export process you may use the handler of a button in your component's template. ```html ``` You may access either exporter service by defining it as a constructor dependency and letting Angular provide an instance. Calling the shared [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export) method initiates the download while automatically respecting the component state, selected rows, and formatting rules. Here is the code which will execute both export processes in the component's typescript file: ```typescript // component.ts import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; @ViewChild('grid') public grid: IgxGridComponent; private excelExportService = inject(IgxExcelExporterService); private pdfExportService = inject(IgxPdfExporterService); public exportButtonHandler() { + this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile')); } public exportPdfButtonHandler() { + this.pdfExportService.export(this.grid, new IgxPdfExporterOptions('ExportedDataFile')); } ``` Once wired up, pressing the respective buttons downloads files named `ExportedDataFile.xlsx` or `ExportedDataFile.pdf` populated with the current Grid view. You can swap in customer-friendly file names, append timestamps, or surface a success toast so users know their export has completed. ## Export All Data Large, remote datasets often load page-by-page or on demand, which means the Grid might not have every record available when the user clicks **Export**. To guarantee a complete workbook, hydrate the exporter with the full data collection before starting the process. The `exportData` helper bypasses the component and works directly against plain objects, so you can reuse the same routine for scheduled exports or admin-only downloads. ```ts public exportButtonHandler() { + this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile')); } ``` > [!TIP] > When offering PDF downloads for remote data, consider fetching the complete dataset first and then calling `export` so the document mirrors the user's expectations. @@if (igxName === 'IgxGrid') { ## Export Grouped Data Grouping is a popular way to summarize customer segments, product categories, or financial periods before sharing the results. The exporter preserves the exact grouping hierarchy that is currently applied to the Grid, so your recipients see the same breakdown you do in the browser. Simply group by one or more columns and trigger the export—no extra configuration is required. If you need flat data in the exported file, clear the grouping prior to calling `export` or handle the `rowExporting` event to reshape the output. Example: ```typescript +import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { INVOICE_DATA } from '../data/invoiceData'; + + +@Component({ + selector: 'app-excel-export-sample-1', + styleUrls: ['./excel-export-sample-1.component.scss'], + templateUrl: './excel-export-sample-1.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] +}) +export class ExcelExportSample1Component implements OnInit { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('igxGrid1', { static: true }) public igxGrid1: IgxGridComponent; + + public data = []; + public groupExpressions: ISortingExpression[]; + public columns: { dataType: GridColumnDataType, field: string, width: string, groupable: boolean, hidden?: boolean }[] = [ + { dataType: GridColumnDataType.String, field: 'ShipCountry', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipCity', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipAddress', width: '150', groupable: true}, + { dataType: GridColumnDataType.String, field: 'PostalCode', width: '150', groupable: true }, + { dataType: GridColumnDataType.Date, field: 'OrderDate', width: '150', groupable: true }, + { dataType: GridColumnDataType.Number, field: 'Quantity', width: '150', groupable: true } + ]; + + public ngOnInit(): void { + this.data = INVOICE_DATA; + this.groupExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry' }, + { dir: SortingDirection.Asc, fieldName: 'ShipCity' } + ]; + } + + /* + The following code demonstrates how to attach event handlers to exporter specific events + and also how to customize the column export process. + this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } + }); + this.excelExportService.rowExporting.subscribe((args: IRowExportingEventArgs) => { + }); + this.excelExportService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { + }); + */ +} +``` +```html +

+ + + + + + + + + @for (c of columns; track c) { + + + } + +

+``` +```scss +.grid__wrapper { + padding-top: 16px; + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; +} + +.exportButton { + margin-top: 5px; +} +``` } ## Export Multi Column Headers Grid Dashboards often rely on [multi-column headers](multi-column-headers.md) to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the [exporter option](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html) [ignoreMultiColumnHeaders](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html#ignoremulticolumnheaders) flag to `true` and the output will include only the leaf headers. > [!NOTE] > The exported Grid will not be formatted as a table, since Excel tables do not support multiple row headers. @@if (igxName === 'IgxHierarchicalGrid') { > [!NOTE] > The exported expansion state of the multi-column headers in the row islands will always be in its initial state. } @@if (igxName === 'IgxGrid') { ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-multi-column-headers-export', + styleUrls: ['multi-column-headers-export.component.scss'], + templateUrl: 'multi-column-headers-export.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class GridMultiColumnHeadersExportComponent { + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data = DATA; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` } @@if (igxName === 'IgxTreeGrid') { ```typescript +import { Component } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-tree-grid-multi-column-headers-export-sample', + styleUrls: ['./tree-grid-multi-column-headers-export.component.scss'], + templateUrl: './tree-grid-multi-column-headers-export.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class TreeGridMultiColumnHeadersExportComponent { + public data = generateEmployeeDetailedFlatData(); + public selectionMode: GridSelectionMode = 'none'; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` } @@if (igxName === 'IgxHierarchicalGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { HIERARCHICAL_DATA } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-multi-column-export', + styleUrls: ['./hierarchical-grid-multi-column-export.component.scss'], + templateUrl: 'hierarchical-grid-multi-column-export.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnGroupComponent, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridMultiColumnHeadersExportComponent implements OnInit { + public localdata = []; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } + + public ngOnInit(): void { + this.localdata = HIERARCHICAL_DATA; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 16px; +} +``` } ## Export Grid with Frozen Column Headers Long sheets can become hard to read once the header row scrolls out of view. Enabling frozen headers keeps key context—like "Customer" or "Invoice Total"—visible at the top of the worksheet while your users explore the data further down. Toggle the [exporter option](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html) [freezeHeaders](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html#freezeHeaders) flag to `true` before calling `export` and the service will handle the rest. ```typescript public exportButtonHandler() { + const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile'); + exporterOptions.freezeHeaders = true; + this.excelExportService.export(this.grid, exporterOptions); } ``` PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file. ## Customizing the Exported Content Most teams tailor exports before sharing them: hiding internal-use columns, renaming headers, or skipping rows that only apply to administrators. Both exporter services expose events that let you intercept every row or column and decide how it should appear in the file. Subscribe to [`columnExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#columnexporting) and [`rowExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#rowexporting) to make last-minute adjustments—set `cancel = true` to omit an item or tweak the event arguments to update values on the fly. The following example will exclude a column from the export if its header is "Age" and if its index is 1: ```typescript // component.ts this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } }); this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile')); ``` When you are exporting data from the Grid component, the services automatically respect sorting, filtering, summaries, and hidden columns so the file reflects what the user currently sees. Need the full dataset instead? Toggle the relevant flags on [`IgxExcelExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) or [`IgxPdfExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) to include filtered rows, hidden columns, or custom metadata. ## Known Limitations Before shipping exports to production users, review the following platform constraints so you can set expectations and provide helpful guidance within your app. |Limitation|Description| |--- |--- | |Max worksheet size|The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns. Consider slicing extremely large exports by date range or segment to stay within these limits.| |Cell Styling|The Excel exporter service does not support exporting a custom style applied directly to a cell component. In such scenarios we recommend using the richer [Excel Library](../excel-library.md) for fine-grained formatting.| |Wide PDF layouts|Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.| ## API References The Excel and PDF Exporter services have a few more APIs to explore, which are listed below. - [IgxExcelExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) - [IgxExcelExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) - [IgxPdfExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) - [IgxPdfExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) Additional components that were used: - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
## Additional Resources
Our community is active and always welcoming to new ideas. The links below connect you with samples, community answers, and the engineering team. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md new file mode 100644 index 000000000..054c3f4bd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-filtering.md @@ -0,0 +1,646 @@ +--- +_tocName: Filtering +--- +--- title: Angular Grid Filter - Ignite UI for Angular _description: Start using angular filter to return specific data with Ignite UI for Angular. Check the advanced filtering options, including data-type Excel-style filtering. _keywords: angular filter, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Filtering IgniteUI for [Angular Grid component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) provides three different filtering types - Quick filtering, [Excel style filtering](excel-style-filtering.md) and [Advanced filtering](advanced-filtering.md) which enable you to display only the records that meet specified criteria. The Material UI grid component in Ignite UI provides angular filter capabilities and extensive filtering API through the Data Container to which the Grid is bound. ## Angular Grid Filtering Example The sample below demonstrates Grid's **Quick filtering** user experience. API [filter()](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filter) method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-filtering-sample.component.scss'], + templateUrl: 'grid-filtering-sample.component.html', + imports: [IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) + +export class FilteringSampleComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public filter(target: EventTarget) { + const value = (target as HTMLInputElement).value; + if (value) { + this.grid1.filter('ProductName', value, IgxStringFilteringOperand.instance().condition('contains')); + } else { + this.grid1.clearFilter('ProductName'); + } + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+
+ + +
+
+ + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} +```
## Setup In order to specify if filtering is enabled and which filtering mode should be used, the Grid exposes the following boolean properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable). Property **[allowFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowfiltering)** enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled; /default value/ - **true** - the filtering for the corresponding grid will be enabled; Property **[allowAdvancedFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowAdvancedFiltering)** enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled; /default value/ - **true** - the advanced filtering for the corresponding grid will be enabled; Property **[filterMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterMode)** enables you to specify the following options: - **quickFilter** - a simplistic filtering UI; /default value/ - **excelStyleFilter** - an Excel-like filtering UI; Property **[filterable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable)** enables you to specify the following options: - **true** - the filtering for the corresponding column will be enabled; /default value/ - **false** - the filtering for the corresponding column will be disabled; ```html + + ``` To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowAdvancedFiltering) input properties to `true`. ```html ``` >[!NOTE] >You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the Grid. Both filtering user interfaces will work independently of one another. The final filtered result in the Grid is the intersection between the results of the two filters. ## Interaction In order to open the filter row for a particular column, the 'Filter' chip below its header should be clicked. To add conditions you should choose filter operand using the dropdown on the left of the input and enter value. For `number` and `date` columns 'Equals' is selected by default, for `string` - 'Contains' and for `boolean` - 'All'. Pressing 'Enter' confirms the condition and you are now able to add another one. There is a dropdown, between 'condition' chips, which determines the logical operator between them, 'AND' is selected by default. To remove a condition you can click the 'X' button of the chip, and to edit it you should select the chip and the input will be populated with the chip's data. While filter row is opened you can click on any filterable column's header in order to select it and to be able to add filter conditions for it. While some filtering conditions have been applied to a column, and the filter row is closed, you can either remove the conditions by clicking the chip's close button, or you can open the filter row by selecting any of the chips. When there is not enough space to show all the conditions, a filter icon is shown with a badge that indicates how many more conditions there are. It can also be clicked in order to open the filter row. ## Usage There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The Grid currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) of the column, the correct set of [**filtering operations**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) is loaded inside the filter UI dropdown. Additionally, you can set the [`ignoreCase`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html) and the initial [`condition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html#condition) properties. Filtering feature is enabled for the Grid component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#allowFiltering) input to `true`. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterMode) is `quickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the [`filterable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable) input to `false`. ```html + + + ``` > [!NOTE] > If values of type `string` are used by a column of dataType `Date`, the Grid won't parse them to `Date` objects and using filtering conditions won't be possible. If you want to use `string` objects, additional logic should be implemented on the application level, in order to parse the values to `Date` objects. You can filter any column or a combination of columns through the Grid API. The Grid exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterglobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clearFilter). - [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filter) - filter a single column or a combination of columns. There are five filtering operand classes exposed: - [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html): this is a base filtering operand, which can be inherited when defining custom filtering conditions. - [`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html) defines all default filtering conditions for `boolean` type. - [`IgxNumberFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumberfilteringoperand.html) defines all default filtering conditions for `numeric` type. - [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html) defines all default filtering conditions for `string` type. - [`IgxDateFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatefilteringoperand.html) defines all default filtering conditions for `Date` type. ```typescript // Single column filtering // Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case this.grid.filter('ProductName', 'myproduct', IgxStringFilteringOperand.instance().condition('contains'), true); ``` The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions. > [!NOTE] > The filtering operation **DOES NOT** change the underlying data source of the Grid. ```typescript // Multi column filtering const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName'); const productExpression = { + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'ProductName', + ignoreCase: true, + searchVal: 'ch' }; productFilteringExpressionsTree.filteringOperands.push(productExpression); gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); const priceFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'Price'); const priceExpression = { + condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), + fieldName: 'UnitPrice', + ignoreCase: true, + searchVal: 20 }; priceFilteringExpressionsTree.filteringOperands.push(priceExpression); gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree); this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; ``` - [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Grid's columns. ```typescript // Filter all cells for a value which contains `myproduct` this.grid.filteringLogic = FilteringLogic.Or; this.grid.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false); ``` - [`clearFilter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. ```typescript // Remove the filtering state from the ProductName column this.grid.clearFilter('ProductName'); // Clears the filtering state from all columns this.grid.clearFilter(); ``` ## Initial filtered state To set the initial filtering state of the Grid, set the [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filteringExpressionsTree) property to an array of [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html) for each column to be filtered. ```typescript constructor(private cdr: ChangeDetectorRef) { } public ngAfterViewInit() { + const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName'); + const productExpression = { + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'ProductName', + ignoreCase: true, + searchVal: 'c' + }; + productFilteringExpressionsTree.filteringOperands.push(productExpression); + gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); + + this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; + this.cdr.detectChanges(); } ``` ### Filtering logic The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filteringlogic) property of the Grid controls how filtering multiple columns will resolve in the Grid. You can change it at any time through the Grid API, or through the Grid input property. ```typescript import { FilteringLogic } from 'igniteui-angular/grids/core'; // import { FilteringLogic } from '@infragistics/igniteui-angular'; for licensed package ... this.grid.filteringLogic = FilteringLogic.OR; ``` The default value of [`AND`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#and) returns only the rows that match all the currently applied filtering expressions. Following the example above, a row will be returned when both the `ProductName` cell value contains `myproduct` and the `Price` cell value is greater than 55. When set to [`OR`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#or), a row will be returned when either the `ProductName` cell value contains `myproduct` or the `Price` cell value is greater than 55.
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ## Remote Filtering The Grid supports remote filtering, which is demonstrated in the [`Grid Remote Data Operations`](remote-data-operations.md) topic.
} ## Custom Filtering Operands You can customize the filtering menu by adding, removing or modifying the filtering operands. By default, the filtering menu contains certain operands based on the column’s data type ([`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html), [`IgxDateFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatefilteringoperand.html), [`IgxNumberFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumberfilteringoperand.html) and [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html)). You can extend these classes or their base class [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) to change the filtering menu items’ behavior. In the sample below, inspect the "Product Name" and "Discontinued" columns filters menus. For the "Discontinued" column filter, we have limited the number of operands to All, True and False. For the "Product Name" column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands. To do that, extend the [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html) and [`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html), modify the operations and their logic, and set the column [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters) input to the new operands. ```typescript // grid-custom-filtering.component.ts export class GridCustomFilteringComponent { + public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance(); + public booleanFilteringOperand = BooleanFilteringOperand.instance(); } export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand { + private constructor() { + super(); + const customOperations = [ + { + iconName: 'contains', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) !== -1; + }, + name: 'Contains (case sensitive)' + }, + { + iconName: 'does_not_contain', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) === -1; + }, + name: 'Does Not Contain (case sensitive)' + } + ]; + + const emptyOperators = [ + // 'Empty' + this.operations[6], + // 'Not Empty' + this.operations[7] + ]; + + this.operations = customOperations.concat(emptyOperators); + } } export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + private constructor() { + super(); + this.operations = [ + // 'All' + this.operations[0], + // 'TRUE' + this.operations[1], + // 'FALSE' + this.operations[2] + ]; + } } ``` ```html + + + + Delivered + Undelivered + + ``` ```typescript +import { Component, OnInit } from '@angular/core'; +import { IFilteringOperation, IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-custom-filtering', + styleUrls: ['./grid-custom-filtering.component.scss'], + templateUrl: './grid-custom-filtering.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class GridCustomFilteringComponent implements OnInit { + public data: any[]; + public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance(); + public booleanFilteringOperand = BooleanFilteringOperand.instance(); + + public ngOnInit() { + this.data = DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} + +export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand { + private constructor() { + super(); + const customOperations: IFilteringOperation[] = [ + { + iconName: 'filter_contains', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) !== -1; + }, + name: 'Contains (case sensitive)' + }, + { + iconName: 'filter_does_not_contain', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) === -1; + }, + name: 'Does Not Contain (case sensitive)' + } + ]; + + const emptyOperators = [ + // 'Empty' + this.operations[6], + // 'Not Empty' + this.operations[7] + ]; + + this.operations = customOperations.concat(emptyOperators); + } +} + +export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + private constructor() { + super(); + this.operations = [ + // 'All' + this.operations[0], + // 'TRUE' + this.operations[1], + // 'FALSE' + this.operations[2] + ]; + } +} +``` +```html +
+ + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} +``` ## Re-templating filter cell You can add a template marked with `igxFilterCellTemplate` in order to retemplate the filter cell. In the sample below, an input is added for the string columns and IgxDatePicker for the date column. When the user types or selects a value, a filter with contains operator for string columns and equals operator for date columns, is applied using grid's public API. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnType, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxPickerClearComponent, IgxPickerToggleComponent, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxFilterCellTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-filtering-template-sample.component.scss'], + templateUrl: 'grid-filtering-template-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] +}) + +export class FilteringTemplateSampleComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + public displayDateFormat = 'M/d/y'; + + private _filterValues = new Map(); + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } + + public getFilterValue(column: ColumnType): any { + return this._filterValues.has(column) ? this._filterValues.get(column) : null; + } + + public onKeyDown(event: KeyboardEvent) { + event.stopImmediatePropagation(); + } + + public onInput(input: any, column: ColumnType) { + this._filterValues.set(column, input.value); + + if (input.value === '') { + this.grid1.clearFilter(column.field); + return; + } + + let operand = null; + switch (column.dataType) { + case GridColumnDataType.Number: + operand = IgxNumberFilteringOperand.instance().condition('equals'); + break; + default: + operand = IgxStringFilteringOperand.instance().condition('contains'); + } + this.grid1.filter(column.field, this.transformValue(input.value, column), operand, column.filteringIgnoreCase); + } + + public clearInput(column: ColumnType) { + this._filterValues.delete(column); + this.grid1.clearFilter(column.field); + } + + public onClick(inputGroup) { + if (!inputGroup.isFocused) { + inputGroup.input.focus(); + } + } + + public onDateSelected(event, column: ColumnType) { + if(!event) { + this.clearInput(column); + return; + } + + this._filterValues.set(column, event); + this.grid1.filter(column.field, event, IgxDateFilteringOperand.instance().condition('equals'), + column.filteringIgnoreCase); + } + + private transformValue(value: any, column: ColumnType): any { + if (column.dataType === GridColumnDataType.Number) { + value = parseFloat(value); + } + + return value; + } +} +``` +```html +
+ + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+ + + search + + + @if (input.value || input.value === '0') { + + clear + + } + +
+ + +
+ + + search + + @if (picker.value) { + + clear + + } + +
+ +
+``` +```scss +igx-input-group, +igx-date-picker { + --ig-size: var(--ig-size-small); +} + +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.filter-cell { + flex-grow: 1; +} +``` ## Styling To get started with styling the filtering row, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$filtering-row-text-color`, `$filtering-row-background`, `$filtering-header-text-color` and the `$filtering-header-background` parameters. ```scss $custom-grid: grid-theme( + $filtering-row-text-color: #292826, + $filtering-row-background: #ffcd0f, + $filtering-header-text-color: #292826, + $filtering-header-background: #ffcd0f ); ``` As seen, the `grid-theme` only controls colors for the filtering row and the respective column header that is being filtered. We obviously have a lot more components inside the filtering row, such as an input group, chips, buttons and others. In order to style them, we need to create a separate theme for each one, so let's create a new [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#input-group-theme) and a new [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#flat-button-theme): ```scss $dark-input-group: input-group-theme( + $box-background: #ffcd0f, + $idle-text-color: #292826, + $focused-text-color: #292826, + $filled-text-color: #292826 ); $dark-button: flat-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed some of the parameters for the input group and the button, but the [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) and the [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme) provide way more parameters to control their respective styling. The last step is to **include** the component mixins, each with its respective theme. We will also set the color property for the input's placeholder. ```scss :host { @include tokens($custom-grid); + + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] >We include the created **flat-button-theme** and **input-group-theme** within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss :host { + ::ng-deep { + @include tokens($custom-grid); + + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group) + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } + } } ``` ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-filtering-style', + styleUrls: ['./grid-filtering-style.component.scss'], + templateUrl: './grid-filtering-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class GridFilteringStyleComponent implements OnInit { + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+ + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$bg: #292826; +$gray: #404040; +$light-gray: rgba(255, 255, 255, .54); + +$custom-grid: grid-theme( + $filtering-row-text-color: $bg, + $filtering-row-background: $yellow, + $filtering-header-text-color: $bg, + $filtering-header-background: $yellow +); + +$dark-input-group: input-group-theme( + $box-background: $yellow, + $idle-text-color: $bg, + $focused-text-color: $bg, + $filled-text-color: $bg +); + +$dark-button: flat-button-theme( + $background: $yellow, + $foreground: $bg, + $hover-background: $bg, + $hover-foreground: $yellow +); + +$dark-drop-down-theme: drop-down-theme( + $background-color: $bg, + $item-text-color: $yellow, + $selected-item-background: $yellow, + $selected-item-text-color: $bg, + $focused-item-background: $yellow, + $focused-item-text-color: $bg, + $selected-focus-item-background: $yellow, + $selected-focus-item-text-color: $bg, + $selected-hover-item-background: $yellow, + $selected-hover-item-text-color: $bg +); + +:host { + @include tokens($custom-grid); + @include tokens($dark-drop-down-theme); + @include tokens($dark-input-group); + @include tokens($dark-button); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## Known Limitations > [!NOTE] > Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox [issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665). ### Breaking Changes in 6.1.0 - IgxGrid `filteringExpressions` property is removed. Use [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filteringexpressionstree) instead. - `filter_multiple` method is removed. Use [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filter) method and [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filteringExpressionsTree) property instead. - The [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filter) method has new signature. It now accepts the following parameters: + - `name` - the name of the column to be filtered. + - `value` - the value to be used for filtering. + - `conditionOrExpressionTree` (optional) - this parameter accepts object of type [`IFilteringOperation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) or [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html). If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. + - `ignoreCase` (optional) - whether the filtering is case sensitive or not. - [`filteringDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filteringDone) event now have only one parameter of type [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html) which contains the filtering state of the filtered column. - filtering operands: [`IFilteringExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html) condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an [`IFilteringOperation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html). - [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) now exposes a [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters) property, which takes an [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) class reference. - Custom filters can be provided to the Grid columns by populating the [`operations`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html#operations) property of the [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) with operations of [`IFilteringOperation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) type. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md new file mode 100644 index 000000000..6b976d3a0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-grid.md @@ -0,0 +1,1830 @@ +--- +title: Angular Data Grid | Build Fast Angular Tables | Infragistics +_description: Create super fast, responsive Angular data grids and tables with Ignite UI for Angular. Supports editing, filtering, data binding and many more. Try it now! +_keywords: angular data grid, angular grid component, angular data grid component, angular table component, angular data table component, angular table, angular UI components, ignite ui for angular +_license: commercial +_tocName: Data Grid +--- + + + +# Angular Data Grid Component Overview + +
+
+
+

The Angular Data Grid is a component for displaying data in a tabular format. Modern grids are complex and are usually packed with a large set of features like data selection, excel style filtering, sorting, paging, grouping, templating, column moving, column pinning, exporting to Excel, CSV or PDF formats and more.

+

Ignite UI Angular Data Grid covers all of these basic Grid features, but also advanced features like batch editing, state persistence, keyboard navigations and more. Ensuring seamless integration with various data sources, our component offers the best performance and scalability, making it ideal for apps handling large datasets or those requiring real-time updates fast.

+
+
+
+
+
+ Angular Data Grid +
+
+
+
+ +## Angular Data Grid Example + +Boston Marathon 2021 – In this angular grid example, you can see how users can do both basic and excel-style filtering, live-data sorting, as well as using of grid summaries and cell templating that includes our [Sparkline](../charts/types/sparkline-chart.md) component, +[Circular Progress Indicator](../circular-progress.md) component, and [Icons](../icon.md). The demo also includes custom paging and per page usage part of the [Angular Pagination](paging.md). + + +```typescript +import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { CellType, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { AbsolutePosition, IgxOverlayService, IgxStringFilteringOperand, IgxSummaryResult, OverlayClosingEventArgs, OverlaySettings } from 'igniteui-angular/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; +import { Athlete, АthletesData, SpeedDescriptor } from '../../data/athletesData'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; +import { NgClass, DecimalPipe } from '@angular/common'; +import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; + +@Component({ + selector: 'app-grid', + styleUrls: ['./grid.component.scss'], + templateUrl: './grid.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxBadgeComponent, IgxSparklineCoreModule, IgxCircularProgressBarComponent, NgClass, DecimalPipe] +}) +export class GridComponent implements OnInit, OnDestroy, AfterViewInit { + overlayService = inject(IgxOverlayService); + private document = inject(DOCUMENT); + + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1!: IgxGridComponent; + + @ViewChild('winnerAlert', { static: true }) + public winnerAlert!: ElementRef; + + @ViewChild('finishedAlert', { static: true }) + public finishedAlert!: ElementRef; + + public topSpeedSummary = CustomTopSpeedSummary; + public bnpSummary = CustomBPMSummary; + public speedSummary = CustomSpeedSummary; + public localData: Athlete[] = []; + public isFinished = false; + public hasWinner = false; + public athleteColumnWidth = '30%'; + public showOverlay = false; + public overlaySettings: OverlaySettings; + // eslint-disable-next-line @typescript-eslint/naming-convention + public winner: Athlete = { Avatar: '', Name: '' } as Athlete; + public top3: Athlete[] = []; + private _live = true; + private _timer: any; + private windowWidth: any; + private _overlayId: string; + currentYear: number; + + get live(): boolean { + return this._live; + } + + set live(val: boolean) { + this._live = val; + if (this._live) { + this._timer = setInterval(() => this.ticker(), 1500); + } else { + clearInterval(this._timer); + } + } + + get showWinnerOverlay(): boolean { + return this.showOverlay && this.hasWinner && !this.isFinished; + } + + get showFinishedOverlay(): boolean { + return this.showOverlay && this.isFinished; + } + + get hideAthleteNumber(): boolean { + return this.windowWidth && this.windowWidth < 960; + } + get hideBeatsPerMinute(): boolean { + return (this.windowWidth && this.windowWidth < 860) || !this.live; + } + public ngOnInit(): void { + this.currentYear = new Date().getFullYear(); + this.localData = АthletesData.slice(0, 30).sort((a, b) => b.TrackProgress - a.TrackProgress); + this.localData.forEach(rec => this.getSpeed(rec)); + this.windowWidth = this.document.defaultView.innerWidth; + this._timer = setInterval(() => this.ticker(), 1500); + this.overlayService.closing.subscribe((event: OverlayClosingEventArgs) => { + this.showOverlay = false; + }); + } + + public ngAfterViewInit(): void { + this.overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings( + AbsolutePosition.Center, + this.grid1 + ); + this.overlaySettings.modal = true; + } + + public getValue(cell: CellType): number { + const val = cell.value; + return val; + } + public ngOnDestroy(): void { + clearInterval(this._timer); + } + + public isTop3(cell: CellType): boolean { + const top = this.grid1.paginator.page === 0 && cell.row.index < 4; + return top; + } + + public getTrophyUrl(index: number): string { + if (index === 0) { + return 'assets/images/grid/trophy_gold.svg'; + } + if (index === 1) { + return 'assets/images/grid/trophy_silver.svg'; + } + if (index === 2) { + return 'assets/images/grid/trophy_bronze.svg'; + } + return ''; + } + + public cellSelection(evt) { + const cell = evt.cell; + this.grid1.selectRows([cell.row.key], true); + } + + public getIconType(cell: CellType): string { + switch (cell.row.data.Position) { + case 'up': + return 'arrow_upward'; + case 'current': + return 'arrow_forward'; + case 'down': + return 'arrow_downward'; + } + } + + public getBadgeType(cell: CellType): string { + switch (cell.row.data.Position) { + case 'up': + return 'success'; + case 'current': + return 'warning'; + case 'down': + return 'error'; + } + } + + public getSpeed(athlete: Athlete): void { + athlete.Speed = this.addSpeedData(athlete, 40); + } + + public getSpeedeData(minutes?: number): SpeedDescriptor[] { + if (minutes === undefined) { + minutes = 20; + } + const speed: SpeedDescriptor[] = []; + for (let m = 0; m < minutes; m += 3) { + const value = this.getRandomNumber(17, 20); + // eslint-disable-next-line @typescript-eslint/naming-convention + speed.push({Speed: value, Minute: m}); + } + return speed; + } + + public addSpeedData(athlete: Athlete, minutes?: number): SpeedDescriptor[] { + if (minutes === undefined) { + minutes = 20; + } + const speedCollection = athlete.Speed ? athlete.Speed : []; + for (let m = 3; m <= minutes; m += 3) { + const value = this.getRandomNumber(16, 20); + const speed = speedCollection[speedCollection.length - 1]; + const min = speed && speed.Minute ? speed.Minute + m : m; + // eslint-disable-next-line @typescript-eslint/naming-convention + speedCollection.push({Speed: value, Minute: min}); + if (speedCollection.length === 40) { + speedCollection.shift(); + } + } + return speedCollection; + } + + // eslint-disable-next-line @typescript-eslint/member-ordering + @HostListener('window:resize', ['$event']) + public onResize(event: any): void { + this.windowWidth = event.target.innerWidth; + } + + public filter(target: EventTarget): void { + const value = (target as HTMLInputElement).value; + if (value) { + this.grid1.filter('CountryName', value, IgxStringFilteringOperand.instance().condition('contains')); + } else { + this.grid1.clearFilter('CountryName'); + } + } + + public showAlert(element: ElementRef): void { + this.showOverlay = true; + this._overlayId = this.overlayService.attach(element, this.overlaySettings); + this.overlayService.show(this._overlayId); + } + + public hideAlert(): void { + this.showOverlay = false; + this.overlayService.hide(this._overlayId); + } + + private generateRandomNumber(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + + private ticker(): void { + if (this.showWinnerOverlay) { + this.hideAlert(); + } + if (this.isFinished) { + this.live = false; + this.grid1.paginator.page = 0; + return; + } + this.updateData(); + this.manageRace(); + } + + private getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + private manageRace(): void { + // show winner alert + if (!this.hasWinner && this.localData[0].TrackProgress >= 100) { + this.winner = this.localData[0]; + this.hasWinner = true; + this.showAlert(this.winnerAlert); + } + + // move grid to next page to monitor players who still run + const firstOnPage = this.grid1.getCellByColumn(0, 'TrackProgress'); + if (firstOnPage && firstOnPage.value === 100) { + this.grid1.paginator.page = this.grid1.paginator.page + 1; + } + + // show Top 3 players after race has finished + if (this.localData[this.localData.length - 1].TrackProgress === 100) { + this.top3 = this.localData.slice(0, 3); + this.isFinished = true; + this.showAlert(this.finishedAlert); + } + } + + private updateData(): void { + const newData: Athlete[] = []; + this.localData.forEach((rec, index) => { + rec.LastPosition = index; + if (rec.TrackProgress < 100) { + rec.Speed = this.addSpeedData(rec, 3); + rec.BeatsPerMinute += this.generateRandomNumber(-5, 5); + if (rec.Id < this.grid1.perPage + 1) { + rec.TrackProgress = Math.min(rec.TrackProgress + this.generateRandomNumber(15, 20), 100); + } else { + rec.TrackProgress = Math.min(rec.TrackProgress + this.generateRandomNumber(7, 12), 100); + } + + } + newData.push({...rec}); + }); + + this.localData = newData.sort((a, b) => b.TrackProgress - a.TrackProgress); + this.localData.forEach((elem, ind) => { + const position = elem.LastPosition - ind; + if (position < 0) { + elem.Position = 'down'; + } else if (position === 0) { + elem.Position = 'current'; + } else { + elem.Position = 'up'; + } + }); + } +} + +class CustomTopSpeedSummary { + + + public operate(data?: number[]): IgxSummaryResult[] { + const result: IgxSummaryResult[] = []; + if (!data){ + return result; + } + result.push({ + key: 'max', + label: 'max', + summaryResult: data.length ? IgxNumberSummaryOperand.max(data).toFixed(0) : null + }); + + return result; + } +} + +export class CustomBPMSummary { + + public operate(data?: number[]): IgxSummaryResult[] { + const result: IgxSummaryResult[] = []; + if (!data){ + return result; + } + result.push( + { + key: 'average', + label: 'average', + summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null + }); + + return result; + } +} + +export class CustomSpeedSummary { + + public operate(data?: Athlete[]): IgxSummaryResult[] { + const speedData = data.reduce((acc, val) => acc.concat(val), [] as Athlete[]).map(rec => rec.Speed); + const result = []; + result.push( + { + key: 'average', + label: 'average', + summaryResult: speedData.length ? IgxNumberSummaryOperand.average(speedData).toFixed(2) : null + }); + + return result; + } +} +``` +```html +
+
+
+
Boston Marathon {{ currentYear }}
+ Live + +
+ + + +
+
+ + + + +
+
{{ grid1.page * grid1.perPage + cell.row.index + 1 }}
+ @if (isTop3(cell)) { + @if (cell.row.index === 0) { + + First place Trophy image + + } + @if (cell.row.index === 1) { + + Second place Trophy image + + } + @if (cell.row.index === 2) { + + Third place Trophy image + + } + } +
+ + + + + +
+ {{ cell.value }} + @if (live) { + + } +
+ + + + + + + + + + + + + +
+ +
+ + + + + + + +
+ {{ val | number: '1.1-5' }} +
+ + + + + +
+ + + +
+ + + + + + + +
+
+
+
+ + First place Trophy image + Winner + First place Trophy image + +
+
+
+ +

{{ winner.Name }}

+
+
+
+
+
+ +
+
+
+ Finish +
+
+ @for (player of top3; track player; let i = $index) { +
+
+ {{i + 1}} + First place Trophy image +
+ +

{{ player.Name }}

+
+ } +
+
+
+
+
+``` +```scss +@use '../../../variables' as *; + +$grid-sample-theme: grid-theme( + $row-selected-background: #333, + $row-selected-text-color: #ddd, + $row-hover-background: #f8f8f8, + $row-border-color: #f8f8f8, + $cell-selected-background: color($color: 'gray', $variant: 800), + $cell-selected-text-color: #fff +); + +$progressBar-sample-theme: progress-linear-theme( + $track-color: rgba(181, 181, 181, .5), + $fill-color-default: orange +); + +::ng-deep .default-theme { + .grid__wrapper { + @include tokens($grid-sample-theme); + @include tokens($progressBar-sample-theme); + } +} + +%flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +igx-grid { + --ig-size: var(--ig-size-medium); +} + +igx-avatar { + --ig-size: var(--ig-size-small); +} + +:host { + ::ng-deep { + .igx-paginator > * { + margin: 0 auto; + display: flex; + align-items: center; + } + + .igx-sparkline { + margin-top: 20px; + margin-bottom: -10px; + } + + .s-overlay { + display: flex; + flex-direction: column; + align-items: center; + z-index: 10002; + + &__inner { + @extend %flex-center; + flex-direction: column; + border-radius: rem(16px); + min-width: rem(340px); + overflow: hidden; + background: #fff; + box-shadow: 0 10px 20px rgba(0, 0, 0, .10), 0 6px 6px rgba(0, 0, 0, .16); + } + + &__heading { + @extend %flex-center; + width: 100%; + text-transform: uppercase; + font-weight: bold; + margin-bottom: rem(16px); + margin-top: rem(24); + font-size: rem(28px); + height: rem(70px); + padding: 0 rem(24px); + letter-spacing: 2px; + border-bottom: 1px solid #ddd; + + &--finish { + border-bottom: none; + margin-top: 0; + font-style: italic; + background-color: white; + background-image: linear-gradient(45deg, #222 25%, transparent 25%), + linear-gradient(-45deg, #222 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #222 75%), + linear-gradient(-45deg, transparent 75%, #222 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; + color: #000; + } + + > span { + padding: rem(8px); + background: #fff; + margin: 0 rem(8px); + + > span { + margin: 0 rem(8px); + color: #000; + } + } + } + + &__trophy { + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-bottom: rem(16px); + + img { + width: 40px; + } + + span { + position: absolute; + top: 2px; + color: #fff; + text-shadow: 0 0 8px #444; + font-weight: bold; + } + } + + &__players { + @extend %flex-center; + padding: rem(24px); + } + + &__player { + @extend %flex-center; + flex-direction: column; + margin: 0 rem(32px); + width: 120px; + + igx-avatar { + margin-bottom: rem(16px); + } + &--winner { + order: 2; + igx-avatar { + border: 4px solid #fbb13c; + } + } + &--second { + order: 1; + igx-avatar { + border: 4px solid #bdbdbd; + } + } + &--third { + order: 3; + igx-avatar { + border: 4px solid #b47845; + } + } + } + + &__player-name { + color: color($color: 'primary', $variant: 800); + font-size: 18px; + margin: 0; + white-space: nowrap; + } + } + + .s-overlay__player.s-overlay__player--winner { + margin-bottom: rem(48px); + } + } +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +@media (max-width: 1000px) { + .grid__wrapper { + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; + } +} + +@media (max-width: 720px) { + .grid__wrapper { + width: 720px !important; + margin: 0 3px; + padding-right: 5px; + } +} + +.switch-sample__title { + margin: 0 rem(20px) 0 0; +} + +.sample__header { + display: flex; + align-self: flex-start; + justify-content: space-between; + width: 100%; + margin-bottom: rem(20px); +} + +.switch-sample { + display: flex; + flex-flow: row nowrap; + align-items: center; + width: 100%; + height: rem(50px); +} + +.switch-sample__label { + margin: 0 rem(8) 0 0; +} + +.athlete_name { + width: rem(100px); + margin: 0 rem(30px); +} + +.athlete_name, +.title { + @include ellipsis(); +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.gridSample__filter { + width: rem(200px); +} + +.flag { + width: rem(24px); +} + +.cup { + padding-left: 20px; +} + +@media (max-width: rem(960px)) { + .grid__wrapper { + width: rem(960px); + } +} + +.linear-bar-container { + margin: auto; +} +``` + +
+ +## Getting Started with Ignite UI for Angular Data Grid + +>[!NOTE] +>**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**. + +To get started with the Ignite UI for Angular Data Grid component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. + +The next step is to import the `IgxGridModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +import { IgxGridModule } from 'igniteui-angular/grids/grid'; +// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxGridModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxGridComponent` as a standalone dependency, or use the [`IGX_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/grid/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid'; +// import { IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_GRID_DIRECTIVES] + /* or imports: [IgxGridComponent] */ +}) +export class HomeComponent { + public data: Product []; +} +``` + +Now that you have the Ignite UI for Angular Grid module or directives imported, you can start using the `igx-grid` component. + +## Using the Angular Data Grid + +```html + +``` + +The **data** property binds the grid, in this case to local array of objects. + +The [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) property tells the `igx-grid` to auto generate the grid's [`IgxColumnComponent`s](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Developers can also explicitly [define the columns](#angular-grid-column-configuration) and the mapping to the data source fields. + +## Angular Bootstrap Grid Definition + +

Ignite UI for Angular includes a powerful bootstrap grid like flex-based layout system. Any modern application today is expected to follow a responsive web design approach, meaning it can gracefully adjust layout of HTML elements based on the device size, or from simply resizing the browser. An Angular bootstrap grid layout was the most used approach in the past, but a flex-based layout system like CSS grid has become more popular, as it works in any browser. The Ignite UI for Angular Layout Directive allows vertical and horizontal flow, including content / text wrapping, justification, and alignment. The Ignite UI for Angular grid supports a responsive layout using CSS, giving you the ultimate flexibility in how the grid behaves on resize.

+ +## Angular Grid Styling Configuration +> +> [!NOTE] +> The [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) uses **css grid layout**, which is **not supported in IE without prefixing**, consequently it will not render properly. + +In [**Angular**](https://angular.io/) most of the styles are prefixed implicitly thanks to the [Autoprefixer](https://www.npmjs.com/package/autoprefixer) plugin. + +For prefixing **grid layouts** however, you need to enable the [Autoprefixer](https://www.npmjs.com/package/autoprefixer) **grid property** with the comment `/* autoprefixer grid:on */`. + +To facilitate your work, apply the comment in the `src/styles.scss` file. + + ```scss +// src/styles.scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +@include core(); +/* autoprefixer grid:on */ +@include theme($default-palette); + ``` + +## Editable Grid Angular + +

Each operation for Angular grid editing includes Batch operations, meaning the API gives you the option to group edits into a single server call, or you can perform grid edit / update operations as they occur with grid interactions. Along with a great developer experience as an editable Angular grid with CRUD operations, the Angular grid includes Excel-like keyboard navigation. Common default grid navigation is included, plus the option to override any navigation option to meet the needs of your customers. An editable grid in Angular with a great navigation scheme is critical to any modern line of business application, with the Ignite UI grid we make it easy.

+ +Following this topic you will learn more about [cell template](grid.md#cell-template) and [cell editing template](grid.md#cell-editing-template) and editing. + +## Angular Grid Column Configuration + +[`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) is used to define the grid's [`columns`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columns) collection and to enable features per column like **sorting** and **filtering**. Cell, header, and footer templates are also available. + +### Defining Columns + +Let's turn the [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) property off and define the columns collection in the markup: + +```html + + + + + + + + + + + +``` + +Each of the columns of the grid can be templated separately. The column expects `ng-template` Angular grid module directives. + +It also expose [`additionalTemplateContext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#additionalTemplateContext) input that can be used for custom properties and any type of data context that you want to pass to the column itself: + +```html + + + {{ props.firstProperty }} + + +``` + +```ts +public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1'}; +``` + +### Header Template + +`igxHeader` targets the column header providing as a context the column object itself. + +```html +... + + + {{ column.field | uppercase }} + + +... +``` + +>[!NOTE] +>Whenever a header template is used along with grouping/moving functionality the _column header area_ becomes **draggable** and you cannot access the custom elements part of the header template until you mark them as **not draggable**. Example below. + +```html + + +
{{col.field}}
+ functions + + + +``` + +As you can see, we are adding **draggable** attribute set to _false_. + +### Cell Template + +`igxCell` applies the provided template to all cells in the column. The context object provided in the template consists of the cell value provided implicitly and the cell object itself. It can be used to define a template where the cells can grow according to their content, as in the below example. + +```html +... + + + {{ value | titlecase }} + + +... +``` + +In the snippet above we "take" a reference to the implicitly provided cell value. This is sufficient if you just want to present some data and maybe apply some custom styling or pipe transforms over the value of the cell. However even more useful is to take the [`CellType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/celltype.html) instance itself as shown below: + +```html + + + + + {{ cell.value | titlecase }} + + + + + + + + + +``` + +When changing data through the **cell template** using `ngModel`, you need to call the appropriate API methods to make sure the value is correctly updated in the Angular grid's underlying data collection. In the snippet above, the `ngModelChange` call passes through the grid's [editing API](cell-editing.md#editing-through-api) and goes through the grid's editing pipeline, properly triggering [transactions](batch-editing.md)(if applicable) and handling of [summaries](summaries.md), [selection](selection.md), etc. However, this `ngModelChange` will fire every time the value of the cell changes, not just when the user is done editing, resulting in a lot more API calls. + +> [!NOTE] +> The grid exposes a default handling for number, string, date and boolean column types. For example, the column will display `check` or `close` icon, instead of true/false by default, for boolean column type. + +If the data in a cell is bound with `[(ngModel)]` and the value change is not handled, the new value will **not** be properly updated in the Angular grid's underlying data source. When dealing with cell editing with a custom template, it is strongly advised to use the cell's **cell editing template**. + +When properly implemented, the cell editing template also ensures that the cell's `editValue` will correctly pass through the grid [editing event cycle](editing.md#event-arguments-and-sequence). + +### Cell Editing Template + +The column also accepts one last template that will be used when a cell is in edit mode. As with the other column templates, the provided context object is again the cell value and the cell object itself. Of course in order to make the edit-mode template accessible to end users, you need +to set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) property of the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) to `true`. + +```html + + + + + + +``` + +Make sure to check the API for the [`CellType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/celltype.html) in order to get accustomed with the provided properties you can use in your templates. + +### Column Template API + +Each of the column templates can be changed programmatically at any point through the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) object itself. For example in the code below, we have declared two templates for our user data. In our TypeScript code we'll get references to the templates themselves and then based on some condition we will render the appropriate template for the column in our application. + +```html + + + + + +
{{ val }}
+ + + + +
{{ val }}
+ +``` + +```typescript +@ViewChild("normalView", { read: TemplateRef }) +public normalView: TemplateRef; + +@ViewChild("smallView", { read: TemplateRef }) +public smallView: TemplateRef; + +.... + +const column = this.grid.getColumnByName("User"); +// Return the appropriate template based on some conditiion. +// For example saved user settings, viewport size, etc. +column.bodyTemplate = this.smallView; +``` + +Column properties can also be set in code in the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event which is emitted when the columns are initialized in the grid. + +```typescript +public initColumns(column: IgxGridColumn) { + const column: IgxColumnComponent = column; + if (column.field === 'ProductName') { + column.sortable = true; + column.editable = true; + } +} +``` + +The code above will make the **ProductName** column sortable and editable and will instantiate the corresponding features UI (like inputs for editing, etc.). + +### Custom Display Format + +All values for a date, numeric, currency and percent column are transformed through the Angular [`DatePipe`](https://angular.io/api/common/DatePipe), [`DecimalPipe`](https://angular.io/api/common/DecimalPipe), [`CurrencyPipe`](https://angular.io/api/common/CurrencyPipe) and [`PercentPipe`](https://angular.io/api/common/PercentPipe) accordingly. This does not modify the original value, just the value that is displayed in the column. So please keep in mind that all data operations and manipulations are done based on the values in your data source. By default, values will be displayed according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) (if not specified, it fallbacks to the application locale, which defaults to `'en-US'`). + +See [Setting up the locale of your app](https://angular.io/guide/i18n#setting-up-the-locale-of-your-app) for more details. + +Also, there are optional parameters for formatting: + +- `format` - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to `'MMM d, y'` +- `timezone` - the timezone offset for dates. By default uses the end-user's local system timezone +- `digitsInfo` - decimal representation objects. Default to `'1.0-3'` + +To allow customizing the display format by these parameters, the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input is exposed. A column will respect only the corresponding properties for its data type, if `pipeArgs` is set. Example: + +```typescript +const pipeArgs: IColumnPipeArgs = { + format: 'longDate', + timezone: 'UTC', + digitsInfo: '1.1-2' +} +``` + +```html + + +``` + +The `OrderDate` column will respect only the `format` and `timezone` properties, while the `UnitPrice` will only respect the `digitsInfo`. For further details, please check the official Angular documentation at [Localizing your app](https://angular.io/guide/i18n). + +All available column data types could be found in the official [Column types topic](column-types.md#default-template). + +## Angular Grid Data Structure + +The [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) handles **flat data** and nested **POJOs(Plain old Java objects)**. The data structure specific for rendering is in the form: + +```typescript +const OBJECT_ARRAY = [{ + ObjectKey1: value1, + ObjectKey2: value2, + . + . + . + ObjectKeyN: valueN + }, + . + . + . + }]; + +const POJO = [{ + ObjectKey1: value1, + ObjectKey2: value2, + . + . + . + ObjectKeyN: { + ObjectKeyN1: value1, + ObjectKeyN2: value2, + . + . + . + ObjectKeyNM: valueNM, + } + }, + . + . + . + }]; + +``` + +>[!WARNING] +>**The key values must not contain arrays**. +>If you use [autoGenerate](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) columns **the data keys must be identical.** + +## Angular Grid Data Binding + +Before going any further with the grid we want to change the Angular grid to bind to remote data service, which is the common scenario in large-scale applications. A good practice is to separate all data fetching related logic in a separate data service, so we are going to create a service which will handle the fetching of data from the server. + +Let's implement our service in a separate file + +```typescript +// northwind.service.ts + +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; +import { catchError, map } from 'rxjs/operators'; +``` + +We're importing the `Injectable` decorator which is an [essential ingredient](https://angular.io/guide/dependency-injection) in every Angular service definition. The `HttpClient` will provide us with the functionality to communicate with backend services. It returns an `Observable` of some result to which we will subscribe in our grid component. + +**Note**: Before Angular 5 the `HttpClient` was located in `@angular/http` and was named `Http`. + +Since we will receive a JSON response containing an array of records, we may as well help ourselves by specifying what kind of data we're expecting to be returned in the observable by defining an interface with the correct shape. Type checking is always recommended and can save you some headaches down the road. + +```typescript +// northwind.service.ts + +export interface NorthwindRecord { + ProductID: number; + ProductName: string; + SupplierID: number; + CategoryID: number; + QuantityPerUnit: string; + UnitPrice: number; + UnitsInStock: number; + UnitsOnOrder: number; + ReorderLevel: number; + Discontinued: boolean; + CategoryName: string; +} +``` + +The service itself is pretty simple consisting of one method: `fetchData` that will return an `Observable`. In cases when the request fails for any reason (server unavailable, network error, etc), the `HttpClient` will return an error. We'll leverage the `catchError` operator which intercepts an _Observable_ that failed and passes the error to an error handler. Our error handler will log the error and return a safe value. + +```typescript +// northwind.service.ts + +@Injectable() +export class NorthwindService { + private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products'; + + constructor(private http: HttpClient) {} + + public fetchData(): Observable { + return this.http + .get(this.url) + .pipe( + map(response => response['value']), + catchError( + this.errorHandler('Error loading northwind data', []) + ) + ); + } + + private errorHandler(message: string, result: T) { + return (error: any): Observable => { + console.error(`${message}: ${error.message}`); + return of(result as T); + }; + } +} +``` + +Make sure to import both the `HttpClientModule` and our service in the application module and register the service as a provider. + +```typescript +// app.module.ts + +import { HttpClientModule } from '@angular/common/http'; +... +import { NorthwindService } from './northwind.service'; + +@NgModule({ + imports: [ + ... + HttpClientModule + ... + ], + providers: [ + NorthwindService + ] +}) +export class AppModule {} +``` + +After implementing the service we will inject it in our component's constructor and use it to retrieve the data. The `ngOnInit` lifecycle hook is a good place to dispatch the initial request. + +**Note**: In the code below, you may wonder why are we setting the _records_ property to an empty array before subscribing to the service. The Http request is asynchronous, and until it completes, the _records_ property will be _undefined_ which will result in an error when the grid tries to bind to it. You should either initialize it with a default value or use a `BehaviorSubject`. + +```typescript +// my.component.ts + +@Component({...}) +export class MyComponent implements OnInit { + + public records: NorthwindRecord[]; + + constructor(private northwindService: NorthwindService) {} + + ngOnInit() { + this.records = []; + this.northwindService.fetchData().subscribe((records) => this.records = records); + } +} +``` + +and in the template of the component: + +```html + + + + ... + +``` + +**Note**: The grid [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) property is best to be avoided when binding to remote data for now. It assumes that the data is available in order to inspect it and generate the appropriate columns. This is usually not the case until the remote service responds, and the grid will throw an error. Making [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) available, when binding to remote service, is on our roadmap for future versions. + +## Complex Data Binding + +The [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) supports binding to complex objects (including nesting deeper than one level) through a "path" of properties in the data record. + +Take a look at the following data model: + +```typescript +interface AminoAcid { + name: string; + abbreviation: { + short: string; + long: string; + } + weight: { + molecular: number; + residue: number; + }, + formula: { + molecular: string; + residue: string; + } + ... +} +``` + +For example, in order to display the weights of a given amino acid in the grid the following snippet will suffice + +```html + + +``` + +Refer to the sample below for additional information. This type of binding supports all +the default functionality that you would expect from the grid. +That is all sorting and filtering operations work out of the box without any additional +configuration. Same goes for grouping and editing operations with or without transactions as well as the ability to template the cells of the bound column. + +>[!WARNING] +>The grids **do not** support this kind of binding for `primary key`, `foreign key` and `child key` properties where applicable. + + +```typescript +import { Component, OnInit } from '@angular/core'; +import { GridColumnDataType } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridFooterComponent } from 'igniteui-angular/grids/core'; +import { AMINO_DATA } from '../../data/amino-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-nested-data-bind2', + styleUrls: ['./grid-nested-data-bind2.scss'], + templateUrl: './grid-nested-data-bind2.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridFooterComponent] +}) +export class GridNestedDataBindAminoacidComponent implements OnInit { + + protected static translateMap = new Map([ + ['0', '₀'], ['1', '₁'], ['2', '₂'], + ['3', '₃'], ['4', '₄'], ['5', '₅'], + ['6', '₆'], ['7', '₇'], ['8', '₈'], + ['9', '₉'] + ]); + + data: any[]; + + nestedConfigColumns = [ + { field: 'name', header: 'Name'}, + { field: 'abbreviation.long', header: 'Abbr. (long)'}, + { field: 'abbreviation.short', header: 'Abbr. (short)'}, + { field: 'weight.molecular', header: 'Molecular Weight', type: GridColumnDataType.Number }, + { field: 'formula.molecular', header: 'Molecular Formula', formatter: this.number2subscript }, + { field: 'formula.residue', header: 'Residue Formula', formatter: this.number2subscript }, + { field: 'weight.residue', header: 'Residue Weight (-H2O)', type: GridColumnDataType.Number }, + { field: 'p.Ka', type: GridColumnDataType.Number }, + { field: 'p.Kb', type: GridColumnDataType.Number }, + { field: 'p.Kx', type: GridColumnDataType.Number }, + { field: 'p.l', type: GridColumnDataType.Number } + ]; + + number2subscript(value: string) { + return value.split('').map(each => GridNestedDataBindAminoacidComponent.translateMap.get(each) || each).join(''); + } + + public ngOnInit() { + this.data = [...AMINO_DATA]; + } +} +``` + +
+ +An alternative way to bind complex data, or to visualize composite data (from more than one column) in the **IgxGrid** is to use a custom body template for the column. Generally, one can: + - use the `value` of the cell, that contains the nested data + - use the `cell` object in the template, from which to access the `row.data`, therefore retrieve any value from it, i.e `cell.row.data[field]` and `cell.row.data[field][nestedField]` + +and interpolate it those in the template. + +```html + + +
+
+ {{ cell.value }} + {{ cell.row.data['name'] }} + {{ cell.row.data['weight']['molecular'] }} +
+
+ + +``` + +Below is the data that we are going to use: + +```typescript +export const EMPLOYEE_DATA = [ + { + Age: 55, + Employees: [ + { + Age: 43, + HireDate: new Date(2011, 6, 3), + ID: 3, + Name: "Michael Burke", + Title: "Senior Software Developer" + }, + { + Age: 29, + HireDate: new Date(2009, 6, 19), + ID: 2, + Name: "Thomas Anderson", + Title: "Senior Software Developer" + }, + { + Age: 31, + HireDate: new Date(2014, 8, 18), + ID: 11, + Name: "Monica Reyes", + Title: "Software Development Team Lead" + }, + { + Age: 35, + HireDate: new Date(2015, 9, 17), + ID: 6, + Name: "Roland Mendel", + Title: "Senior Software Developer" + }], + HireDate: new Date(2008, 3, 20), + ID: 1, + Name: "John Winchester", + Title: "Development Manager" + }, +... +``` + +The custom template for the column, that will render the nested data: + +```html +... + + +
+ + + + {{ person.Name }} + + + +
+ + + + + + + + +
+ + +
+ + +... +``` + +And the result from this configuration is: + + +```typescript +import { ChangeDetectorRef, Component, OnInit, inject } from '@angular/core'; +import {EMPLOYEE_DATA} from '../../data/nested-employee-data'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent } from 'igniteui-angular/expansion-panel'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-nested-data-bind', + styleUrls: ['./grid-nested-data-bind.scss'], + templateUrl: './grid-nested-data-bind.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, DatePipe] +}) + +export class GridNestedDataBindComponent implements OnInit{ + private cdr = inject(ChangeDetectorRef); + + public data; + + public ngOnInit() { + this.data = EMPLOYEE_DATA; + this.cdr.detectChanges(); + } +} +``` + +
+ +### Working with Flat data + +The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the [`data`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html#data) property of the [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html). + +Since the Angular grid is a component for **rendering**, **manipulating** and **preserving** data records, having access to **every data record** gives you the opportunity to customize the approach of handling it. The [`data`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html#data) property provides you this opportunity. + +Below is the data that we are going to use: + +```typescript +export const DATA: any[] = [ + { + Address: "Obere Str. 57", + City: "Berlin", + CompanyName: "Alfreds Futterkiste", + ContactName: "Maria Anders", + ContactTitle: "Sales Representative", + Country: "Germany", + Fax: "030-0076545", + ID: "ALFKI", + Phone: "030-0074321", + PostalCode: "12209", + Region: null + }, +... +] +``` + +The custom template: + +```html +... + + +
+ // In the Address column combine the Country, City and PostCode values of the corresponding data record + Country: {{cell.row.data.Country}} +
+ City: {{cell.row.data.City}} +
+ Postal Code: {{cell.row.data.PostalCode}} +
+ + +``` + +Keep in mind that with the above defined template you will not be able to make editing operations, so we need an editor template. + +```html + + +
+ + Country: {{cell.row.data.Country}} + + + + +
+ City: {{cell.row.data.City}} + + + +
+ Postal Code: {{cell.row.data.PostalCode}} + + + +
+ + +... +``` + +And the result is: + + +```typescript +import { Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-composite-data', + styleUrls: ['./grid-composite-data.component.scss'], + templateUrl: './grid-composite-data.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective] +}) +export class GridCompositeDataComponent implements OnInit { + + public data; + constructor() {} + + public ngOnInit() { + this.data = DATA; + } +} +``` +```html +
+
+ + + +
+ ContactName: {{cell.row.data.ContactName}} + Job Title: {{cell.row.data.ContactTitle}} +
+ Company Name: {{cell.row.data.CompanyName}} +
+
+ + +
+
+
+ Contact Name: {{cell.row.data.ContactName}} + + + +
+
+ Job Title: {{cell.row.data.ContactTitle}} + + + +
+
+
+ Company Name: {{cell.row.data.CompanyName}} + + + +
+
+ + + + +
+
+ Country: {{cell.row.data.Country}} +
+ City: {{cell.row.data.City}} +
+
+ Postal Code: {{cell.row.data.PostalCode}} +
+ Phone: {{cell.row.data.Phone}} +
+
+
+ + +
+
+ Country: {{cell.row.data.Country}} + + + +
+ City: {{cell.row.data.City}} + + + +
+
+ Postal Code: {{cell.row.data.PostalCode}} + + + +
+ Selected: {{cell.row.selected}} + + + +
+
+
+ + + +
+
+``` +```scss +.contact-container{ + span { + margin: 5px; + } + &--edit{ + margin-bottom:5px + } +} + +.address-container{ + display: flex; + div + div{ + margin-left: 5px + } + + &--edit{ + display: flex; + div + div{ + margin-left: 10px; + } + margin-bottom:5px; + margin-top:3px; + } + + &--edit div{ + display: flex; + flex-direction: column; + margin-left: 10px; + } +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` + +
+ +## Keyboard Navigation + +Grid's keyboard navigation provides a rich variety of keyboard interactions for the user. It enhances accessibility and allows intuitive navigation through any type of elements inside (cell, row, column header, toolbar, footer, etc.). +Check out these resources for more information: + +- [Grid Keyboard Navigation](../grid/keyboard-navigation.md) +- [TreeGrid Keyboard Navigation](../treegrid/keyboard-navigation.md) +- [Hierarchical Grid Keyboard Navigation](../hierarchicalgrid/keyboard-navigation.md) +- [Blog post](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation + +## State Persistence + +Achieving a state persistence framework is easier than ever by using the new built-in [`IgxGridState`](state-persistence.md) directive. + +## Sizing + +See the [Grid Sizing](sizing.md) topic. + +## Performance (Experimental) + +The `IgxGridComponent`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: + +```typescript +platformBrowserDynamic() + .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }) + .catch(err => console.error(err)); +``` + +>[!NOTE] +> This is still in experimental feature for the `IgxGridComponent`. This means that there might be some unexpected behaviors in the Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. +>[!NOTE] +> Enabling it can affects other parts of an Angular application that the `IgxGridComponent` is not related to. + +## Known Limitations + +|Limitation|Description| +|--- |--- | +|Column widths set in `percentage` and `px`|Currently we do not support mixing of column widths with `%` and `px`.| +|When trying to filter a column of type `number`|If a value different than `number` is entered into the filtering input, `NaN` is returned due to an incorrect cast.| +|Grid [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#width) does not depend on the column widths | The [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) of all columns does not determine the spanning of the grid itself. It is determined by the parent container dimensions or the defined grid's [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#width).| +|Grid nested in parent container | When grid's [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#width) is not set and it is placed in a parent container with defined dimensions, the grid spans to this container.| +|Grid `OnPush` ChangeDetectionStrategy |The grid operates with `ChangeDetectionStrategy.OnPush` so whenever some customization appears make sure that the grid is notified about the changes that happens.| +| Columns have a minimum allowed column width. Depending on the value of [`--ig-size`] CSS variable, they are as follows:
"small": 56px
"medium": 64px
"large ": 80px | If width less than the minimum allowed is set it will not affect the rendered elements. They will render with the minimum allowed width for the corresponding [`--ig-size`]. This may lead to an unexpected behavior with horizontal virtualization and is therefore not supported.| +| Row height is not affected by the height of cells that are not currently rendered in view. | Because of virtualization a column with a custom template (that changes the cell height) that is not in the view will not affect the row height. The row height will be affected only while the related column is scrolled in the view. | + +> [!NOTE] +> `igxGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxGrid`. For more details see [igxForOf Known Issues](../for-of.md#known-limitations) section. + +
+ +## API References + +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) +- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) +- [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) +- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) +- [IgxChip Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxCalendar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxSnackBar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-snackbar-theme) +- [IgxBadge Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) + +## Tutorial video + +Learn more about creating an Angular data grid in our short tutorial video: + +> [!Video https://www.youtube.com/embed/Xv_fQVQ8fmM] + +## Additional Resources + +
+ +- [Grid Sizing](sizing.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) +- [Column Data Types](column-types.md#default-template) +- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md new file mode 100644 index 000000000..c8a91fa52 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-groupby.md @@ -0,0 +1,1163 @@ +--- +title: Angular Grid Group By | Group by multiple fields | Infragistics +_description: Configure angular group by that allows visualizing of data records in Angular table, visualize the grouped data in separate and convenient column group. +_keywords: angular group by, igniteui for angular, infragistics +_license: commercial +_tocName: Group By +_premium: true +--- + +# Angular Grid Group By + +A Group By behavior in an Ignite UI for Angular Table or UI Grid creates grouped data rows based on the column values. The Group By in [`igxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) allows for visualizing the groups in a hierarchical structure. The grouped data rows can be expanded or collapsed and the order of grouping may be changed through the UI or API. When Row Selection is enabled, a Group By row selector is rendered in the left-most area of the group row. In case the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) property is set to single, checkboxes are disabled and only serve as an indication for the group where selection is placed. If the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. + +## Angular Grid Group By Example + +This example presents the grouping capabilities of a large amount of data. Dragging the column headers to the top (grouping area) allows users to see the data for the selected column in a hierarchical structure. They can do group by in multiple fields by dragging more column headers to the top. These grouping options come in handy when you have tables with numerous rows and columns where users want to present the data in a much faster and visually acceptable way. + + +```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxGroupByRowTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-groupby-sample', + styleUrls: ['./grid-groupby-sample.component.scss'], + templateUrl: './grid-groupby-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] +}) +export class GridGroupBySampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public expr: ISortingExpression[]; + public selectionMode: GridSelectionMode = 'multiple'; + + constructor() { + this.data = INVOICE_DATA; + this.expr = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }, + { dir: SortingDirection.Asc, fieldName: 'ShipCity', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() } + ]; + } + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + public isDate(value: any) { + if (value instanceof Date) { + return true; + } else { + return false; + } + } + public calc2017(values: any[]) { + const startDate = new Date('1/1/2017'); + const endDate = new Date('12/31/2017'); + return values.filter((x) => x.OrderDate >= startDate && x.OrderDate <= endDate).length; + } +} +``` +```html +
+ + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + + + +
+ group_work + + {{ groupRow.expression.fieldName }}: + + {{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }} + + Ordered in 2017:{{ calc2017(groupRow.records)}} +
+ + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} + +.header-icon { + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + cursor: pointer; +} + +.header { + height: 100%; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} +``` + + +## Initial Grouping State + +It is possible to define initial grouping of the grid by assigning an array of expressions to the [`groupingExpressions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupingExpressions) property of the grid. + +```typescript +public ngOnInit() { + grid.groupingExpressions = [ + { fieldName: 'ProductName', dir: SortingDirection.Desc }, + { fieldName: 'Released', dir: SortingDirection.Desc } + ]; +} +``` + +Grouping expressions implement the [`ISortingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html) interface. + +## Group By API + +### Grouping API + +Grouping is available through the UI and through a robust API exposed by the grid component. Developers can allow end-users to group the grid data by certain columns, by setting each column's [`groupable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#groupable) property to `true`. + +```html + + + + +``` + +```typescript +public ngOnInit() { + grid.columns.forEach((column) => { + column.groupable = true; + }); +} +``` + +During runtime the expressions are gettable and settable from the [`groupingExpressions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupingExpressions) property. If you need to add or change an existing expression you may also use the [`groupBy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupby) method with either a single or an array of [`ISortingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html). + +```typescript +grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }); +``` + +>[!NOTE] +> Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. + +### Expand/Collapse API + +In addition to grouping expressions you can also control the expansion states for group rows. They are stored in a separate property of the [`igxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) component [`groupingExpansionState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupingExpansionState). A group row is uniquely identified based on the field name it is created for and the value it represents for each level of grouping. This means that the signature of an expansion state interface is the following: + +```typescript +export interface IGroupByKey { + fieldName: string; + value: any; +} + +export interface IGroupByExpandState { + hierarchy: Array; + expanded: boolean; +} +``` + +As with [`groupingExpressions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupingExpressions), setting a list of [`IGroupByExpandState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igroupbyexpandstate.html) directly to the [`groupingExpansionState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupingExpansionState) will change the expansion accordingly. Additionally [`igxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) exposes a method that toggles a group by the group record instance. + +```typescript + const groupRow = this.grid.groupsRecords.find(r => r.value === "France"); + const groupRow = this.grid.getRowByIndex(0).groupRow; + grid.toggleGroup(groupRow); + groupRow.expanded = false; +``` + +Groups can be created expanded (_**default**_) or collapsed and the expansion states would generally only contain the state opposite to the default behavior. You can control whether groups should be created expanded or not through the [`groupsExpanded`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#groupsExpanded) property. + +### Select/Deselect all rows in a group API + +Selecting/Deselecting all rows in a group is available through the [`selectRowsInGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectRowsInGroup) and [`deselectRowsInGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deselectRowsInGroup) API methods. + +The code snippet below can be used to select all rows within a group using the group record instance [`selectRowsInGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectRowsInGroup) method. Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default. + +```typescript + const groupRow = this.grid.groupsRecords.find(r => r.value === "France"); + const groupRow = this.grid.getRowByIndex(0).groupRow; + grid.selectRowsInGroup(groupRow); +``` + +If you need to deselect all rows within a group programmatically, you can use the [`deselectRowsInGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deselectRowsInGroup) method. + +```typescript + const groupRow = this.grid.groupsRecords.find(r => r.value === "France"); + const groupRow = this.grid.getRowByIndex(0).groupRow; + grid.deselectRowsInGroup(groupRow); +``` + +## Templating + +### Group Row Templates + +The group row except for the expand/collapse UI is fully templatable. By default it renders a grouping icon and displays the field name and value it represents. The grouping record template is rendered against has the following signature: + +```typescript +export interface IGroupByRecord { + expression: ISortingExpression; + level: number; + records: GroupedRecords; + value: any; + groupParent: IGroupByRecord; + groups?: IGroupByRecord[]; +} +``` + +As an example, the following template would make the group rows summary more verbose: + +```html + + Total items with value: {{ groupRow.value }} are {{ groupRow.records.length }} + +``` + +### Group Row Selector Templates + +As mentioned above the group row except for the expand/collapse UI is fully templatable. To create a custom Group By row selector template within the Grid, declare an `` with `igxGroupByRowSelector` directive. From the template, you can access the implicitly provided context variable, with properties that give you information about the Group By row's state. + +The `selectedCount` property shows how many of the group records are currently selected while `totalCount` shows how many records belong to the group. + +```html + + {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount }} + +``` + +The `groupRow` property returns a reference to the group row. + +```html + +
Handle groupRow
+ +``` + +The `selectedCount` and `totalCount` properties can be used to determine if the Group By row selector should be checked or indeterminate (partially selected). + +```html + + + + + + + +``` + +## Angular Grid Group By with Paging + +Group rows participate in the paging process along with data rows. They count towards the page size for each page. Collapsed rows are not included in the paging process. Any expand or collapse operation forces Paging to recalculate the page count and adjust the page index if necessary. +Groups that span multiple pages are split between them. The group row is visible only on the page it starts on and is not repeated on subsequent pages. Summary information for group rows is calculated based on the whole group and is unaffected by Paging. + +### Angular group by with paging example + + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxGroupByRowTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-group-by-paging-sample', + templateUrl: './grid-group-by-paging-sample.component.html', + styleUrls: ['./grid-group-by-paging-sample.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent] +}) +export class GridGroupByPagingSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public expr: ISortingExpression[]; + public selectionMode: GridSelectionMode = 'multiple'; + constructor() { + this.data = INVOICE_DATA; + this.expr = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() } + ]; + } + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + public isDate(value: any) { + if (value instanceof Date) { + return true; + } else { + return false; + } + } + public calc2017(values: any[]) { + const startDate = new Date('1/1/2017'); + const endDate = new Date('12/31/2017'); + return values.filter((x) => x.OrderDate >= startDate && x.OrderDate <= endDate).length; + } +} +``` +```html +
+ + + + + + + + + + + + +
+ group_work + + {{ groupRow.expression.fieldName }}: + + {{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }} + + Ordered in 2017:{{ calc2017(groupRow.records)}} +
+ + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} + +.header-icon { + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + cursor: pointer; +} + +.header { + height: 100%; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} +``` + + +## Group By with Summaries + +Integration between Group By and Summaries is described in the [Summaries](summaries.md#summaries-with-group-by) topic. + +## Keyboard Navigation + +The grouping UI supports the following keyboard interactions: + +- For group rows (focus should be on the row or the expand/collapse cell) + - ALT + RIGHT - Expands the group + - ALT + LEFT - Collapses the group + - SPACE - selects all rows in the group, if rowSelection property is set to multiple + +- For group [`igxChip`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) components in the group by area (focus should be on the chip) + - SHIFT + LEFT - moves the focused chip left, changing the grouping order, if possible + - SHIFT + RIGHT - moves the focused chip right, changing the grouping order, if possible + - SPACE - changes the sorting direction + - DELETE - ungroups the field + - The separate elements of the chip are also focusable and can be interacted with using the ENTER key. + +## Angular Grid Custom Group By + +igxGrid allows defining custom grouping per column or per grouping expression, which provides grouping based on a custom condition. This is useful when you need to group by complex objects or for other application specific scenarios. + +> [!NOTE] +> In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base [`DefaultSortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/defaultsortingstrategy.html). After the data is sorted the custom groups can be determined by specifying a [`groupingComparer`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igroupingexpression.html#groupingComparer) for the column or for the specific grouping expression. + +The sample below demonstrates custom grouping by `Date`, where the date values are sorted and grouped by Day, Week, Month or Year based on user-selected grouping mode. + +### Angular custom group by example + + +```typescript +/* eslint-disable max-len */ +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGroupByRowTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { DatePipe, CurrencyPipe } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-groupby-custom-sample', + styleUrls: ['./grid-groupby-custom-sample.component.scss'], + templateUrl: './grid-groupby-custom-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxGroupByRowTemplateDirective, IgxIconComponent, IgxBadgeComponent, CurrencyPipe, DatePipe] +}) +export class GridGroupByCustomSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public sortingStrategy; + public groupByOptions = [ + { name: 'Day', ref: DaySortingStrategy.instance() }, + { name: 'Week', ref: WeekSortingStrategy.instance() }, + { name: 'Month', ref: BaseSortingStrategy.instance() }, + { name: 'Year', ref: BaseSortingStrategy.instance() } + ]; + + public groupByMode = this.groupByOptions[0].name; + public initialExpr; + public dateFormatter = ''; + + constructor() { + this.data = INVOICE_DATA; + this.sortingStrategy = this.groupByOptions[0].ref; + this.dateFormatter = 'MM/dd/yyyy'; + + this.initialExpr = [ + { + dir: SortingDirection.Asc, + fieldName: 'OrderDate', + ignoreCase: true, + strategy: this.sortingStrategy, + groupingComparer: (a, b) => { + const dateA = this.sortingStrategy.getParsedDate(a); + const dateB = this.sortingStrategy.getParsedDate(b); + if (this.groupByMode === 'Month') { + return dateA.month === dateB.month ? 0 : -1; + } else if (this.groupByMode === 'Year') { + return dateA.year === dateB.year ? 0 : -1; + } else if (this.groupByMode === 'Week') { + return this.sortingStrategy.getWeekOfDate(a) === this.sortingStrategy.getWeekOfDate(b) ? 0 : -1; + } + return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1; + } + } + ]; + } + + public selectionChange(event: any) { + this.groupByMode = event.newSelection.value.name; + this.sortingStrategy = event.newSelection.value.ref; + this.dateFormatter = this.changeFormatter(this.groupByMode); + // Changing groupingExpression and calling the setter again + const expr = this.grid1.groupingExpressions.find( + (e) => e.fieldName === 'OrderDate' + ); + if (expr) { + expr.strategy = this.sortingStrategy; + const gexpr = this.grid1.groupingExpressions; + this.grid1.groupingExpressions = []; + this.grid1.groupingExpressions = gexpr; + } + } + + public changeFormatter(mode: string) { + if (this.groupByMode === 'Month') { + return 'MMMM yyyy'; + } else if (this.groupByMode === 'Year') { + return 'yyyy'; + } else if (this.groupByMode === 'Week'){ + return 'yyyy \'week\' w'; + } + return 'MM/dd/yyyy'; + } + + public isDate(value: any) { + if (value instanceof Date) { + return true; + } else { + return false; + } + } +} + +class BaseSortingStrategy extends DefaultSortingStrategy { + + public getParsedDate(date: any) { + return { + day: date.getDay(), + month: date.getMonth() + 1, + year: date.getFullYear() + }; + } + + compareValues(a: any, b: any) { + const dateA = this.getParsedDate(a); + const dateB = this.getParsedDate(b); + return dateA.year < dateB.year ? -1 : dateA.year > dateB.year ? 1 : dateA.month < dateB.month ? -1 : dateA.month > dateB.month ? 1 : 0; + } +} + +class DaySortingStrategy extends BaseSortingStrategy { + compareValues(a: any, b: any) { + const dateA = this.getParsedDate(a); + const dateB = this.getParsedDate(b); + return dateA.year < dateB.year ? -1 : dateA.year > dateB.year ? 1 : dateA.month < dateB.month ? -1 : dateA.month > dateB.month ? 1 : + dateA.day < dateB.day ? -1 : dateA.day > dateB.day ? 1 : 0; + } +} + +class WeekSortingStrategy extends BaseSortingStrategy { + + public getWeekOfDate(a: any) { + return parseInt(new DatePipe('en-US').transform(a, 'w'), 10); + } + + compareValues(a: any, b: any) { + const dateA = this.getParsedDate(a); + const dateB = this.getParsedDate(b); + const weekA = this.getWeekOfDate(a); + const weekB = this.getWeekOfDate(b); + return dateA.year < dateB.year ? -1 : dateA.year > dateB.year ? 1 : weekA < weekB ? -1 : weekA > weekB ? 1 : 0; + } +} +``` +```html +
+ + + + + @for (item of groupByOptions; track item) { + + {{ item.name }} + + } + + + + + + + + + {{ value | date:'shortDate' }} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + {{ value | currency:'USD':'symbol-narrow'}} + + + + + +
+ group_work + + {{ groupRow.expression.fieldName }}: + + {{ isDate(groupRow.value) ? (groupRow.value | date: dateFormatter) : groupRow.value }} + +
+ + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + padding-top: 16px; + margin: 0 16px; +} + + + +.header { + height: 100%; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} +``` + + +The sample defines custom sorting strategies for the different date conditions. +Each custom strategy extends the base [`DefaultSortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/defaultsortingstrategy.html) and defines the [`compareValues`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/defaultsortingstrategy.html#compareValues) method, which is the custom compare function used when sorting the values. Additionally it extracts the values from the date needed for the comparison. + +```typescript +class BaseSortingStrategy extends DefaultSortingStrategy { + + public getParsedDate(date: any) { + return { + day: date.getDay(), + month: date.getMonth() + 1, + year: date.getFullYear() + }; + } + + compareValues(a: any, b: any) { + const dateA = this.getParsedDate(a); + const dateB = this.getParsedDate(b); + return dateA.year < dateB.year ? + -1 : dateA.year > dateB.year ? + 1 : dateA.month < dateB.month ? + -1 : dateA.month > dateB.month ? + 1 : 0; + } +} + +class DaySortingStrategy extends BaseSortingStrategy { + compareValues(a: any, b: any) { + const dateA = this.getParsedDate(a); + const dateB = this.getParsedDate(b); + return dateA.year < dateB.year ? + -1 : dateA.year > dateB.year ? + 1 : dateA.month < dateB.month ? + -1 : dateA.month > dateB.month ? + 1 : dateA.day < dateB.day ? + -1 : dateA.day > dateB.day ? + 1 : 0; + } +} + +class WeekSortingStrategy extends BaseSortingStrategy { + + public getWeekOfDate(a: any) { + return parseInt(new DatePipe("en-US").transform(a, 'w'), 10); + } + + compareValues(a: any, b: any) { + const dateA = this.getParsedDate(a); + const dateB = this.getParsedDate(b); + const weekA = this.getWeekOfDate(a); + const weekB = this.getWeekOfDate(b); + return dateA.year < dateB.year ? + -1 : dateA.year > dateB.year ? + 1 : weekA < weekB ? + -1 : weekA > weekB ? + 1 : 0; + } +} +``` + +A [`groupingComparer`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igroupingexpression.html#groupingComparer) function is defined for the grouping expressions, which determines the items belonging to the same group based on the selected grouping mode. Values in the sorted data for which this function returns 0 are marked as part of the same group. + +```typescript + groupingComparer: (a, b) => { + const dateA = this.sortingStrategy.getParsedDate(a); + const dateB = this.sortingStrategy.getParsedDate(b); + if (this.groupByMode === 'Month') { + return dateA.month === dateB.month ? 0 : -1; + } else if (this.groupByMode === "Year") { + return dateA.year === dateB.year ? 0 : -1; + } else if (this.groupByMode === "Week") { + return this.sortingStrategy.getWeekOfDate(a) === this.sortingStrategy.getWeekOfDate(b) ? 0 : -1; + } + return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1; +} +``` + +From version 15.1.0, you can also use the built-in sorting strategy `GroupMemberCountSortingStrategy` to sort items based on members count. + +```typescript +public sortByGroup() { + const expressions = this.grid1.groupingExpressions; + if (expressions.length) { + const fieldName = expressions[0].fieldName; + const dir = expressions[0].dir === SortingDirection.Asc ? SortingDirection.Desc : SortingDirection.Asc; + this.grid1.groupBy({ fieldName, dir, ignoreCase: false, strategy: GroupMemberCountSortingStrategy.instance() }); + } + } +``` + +## Styling + +The igxGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. + +In the below steps, we are going through the steps of customizing the grid's Group By styling. + +### Importing global theme + +To begin the customization of the Group By feature, you need to import the `index` file, where all styling functions and mixins are located. + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +### Defining custom theme + +Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the Group By as desired. You also need to extend the [`chip-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme), because it's used in the Group By feature. + +```scss + +$custom-theme: grid-theme( + $group-row-background: #494949, + $group-row-selected-background: #383838, + $group-label-column-name-text: #f8f8f8, + $group-label-icon: #ffcd0f, + $group-label-text: #f8f8f8, + $group-count-background: #ffcd0f, + $group-count-text-color: #000, + $expand-icon-color: #ffcd0f, + $expand-icon-hover-color: rgb(223, 181, 13), + $cell-active-border-color: #ffcd0f, + $row-selected-background: #fff6d3, + $row-selected-text-color: #000, + $drop-indicator-color: #ffcd0f +); + +/* Chip theme will style the chips in the Group By area */ +$custom-chips-theme: chip-theme( + $background: #494949, + $text-color: #f8f8f8, + $hover-text-color: #e7e7e7 +); +``` + +### Defining a custom color palette + +In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. +`palette` generates a color palette, based on provided primary, secondary and surface colors. + +```scss +$black-color: #292826; +$yellow-color: #ffcd0f; +$grey-color: #efefef; + +$custom-palette: palette( + $primary: $black-color, + $secondary: $yellow-color, + $surface: $grey-color +); +``` + +After a custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. + +```scss +$custom-theme: grid-theme( + $group-row-background: color($custom-palette, "primary", 300), + $group-row-selected-background: color($custom-palette, "primary", 400), + $group-label-column-name-text:contrast-color($custom-palette, "primary", 500), + $group-label-icon: color($custom-palette, "secondary", 600), + $group-label-text:contrast-color($custom-palette, "primary", 500), + $group-count-background: color($custom-palette, "secondary", 600), + $group-count-text-color: color($custom-palette, "primary", 400), + $expand-icon-color: color($custom-palette, "secondary", 600), + $expand-icon-hover-color: color($custom-palette, "secondary", 300), + $cell-active-border-color: color($custom-palette, "secondary", 600) +); + +$custom-chips-theme: chip-theme( + $background: color($custom-palette, "primary", 300), + $text-color:contrast-color($custom-palette, "primary", 500), + $hover-text-color:contrast-color($custom-palette, "primary", 600) +); +``` + +### Defining custom schemas + +You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme. +Extend one of the two predefined schemas, that are provided for every component. In our case, we would use [`light-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/schemas#variable-light-material-schema). + +```scss +$custom-grid-schema: extend( + map.get('grid', $light-material-schema), + ( + group-row-background: (color:('secondary', 100)), + group-row-selected-background: (color:('primary', 400)), + group-label-column-name-text: (color:('primary', 600)), + group-label-icon: (color:('primary', 600)), + group-label-text: (color:('secondary', 700)), + group-count-background: (color:('primary', 600)), + group-count-text-color: (color:('secondary', 400)), + expand-icon-color: (color:('primary', 600)), + expand-icon-hover-color: (color:('primary', 400)) + ) +); +``` + +In order for the custom schema to be applied, either ([`light`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/schemas#variable-light-material-schema) or [`dark`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/schemas#variable-dark-material-schema)) globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards. + +```scss +$my-custom-schema: extend( + $light-material-schema, + ( + grid: $custom-grid-schema + ) +); + +$custom-theme: grid-theme( + $palette: $custom-palette, + $schema: $my-custom-schema +); +``` + +### Applying the custom theme + +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + +```scss +:host { + @include tokens($custom-theme); + @include tokens($custom-chips-theme); +} +``` + +### Scoped component theme + +In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). + +This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. + + >[!NOTE] + >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the components which are inside the grid. + +In our example, we need to use `::ng-deep` for our chip theme: + +```scss +:host { + @include tokens($custom-theme); + + ::ng-deep { + @include tokens($custom-chips-theme); + } +} +``` + +### Demo + + +```typescript +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + encapsulation: ViewEncapsulation.Emulated, + selector: 'app-grid-groupby-sample', + styleUrls: ['./grid-groupby-styling.component.scss'], + templateUrl: './grid-groupby-styling.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class GridGroupByStylingComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public expr: ISortingExpression[]; + + constructor() { + this.data = INVOICE_DATA; + this.expr = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() }, + { dir: SortingDirection.Asc, fieldName: 'ShipCity', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() } + ]; + } + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$gray: #494949; +$light-gray: #f8f8f8; +$black: #222; + +$custom-theme: grid-theme( + $group-row-background: $gray, + $group-row-selected-background: #383838, + $group-label-column-name-text: $light-gray, + $group-label-icon: $yellow, + $group-label-text: $light-gray, + $group-count-background: $yellow, + $group-count-text-color: $black, + $expand-icon-color: $yellow, + $expand-icon-hover-color: rgb(223, 181, 13), + $cell-active-border-color: $yellow, + $row-selected-background: #fff6d3, + $row-selected-text-color: $black, + $drop-indicator-color: $yellow +); + +$custom-chips-theme: chip-theme( + $background: $gray, + $text-color: $light-gray, + $hover-text-color: #e7e7e7 +); + +:host { + @include tokens($custom-theme); + @include tokens($custom-chips-theme); +} +``` + +>[!NOTE] +>The sample will not be affected by the selected global theme from `Change Theme`. + +## Known Limitations + +|Limitation|Description| +|--- |--- | +|Maximum amount of grouped columns is 10. | If more than 10 columns are grouped an error is thrown. | + +## API References + +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGroupByRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgroupbyrow.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) +- [ISortingExpression](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html) +- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) +- [IGroupByExpandState](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igroupbyexpandstate.html) +- [IgxChipComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) +- [IgxChipComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) + +## Additional Resources + +
+ +- [Grid overview](grid.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Column Moving](column-moving.md) +- [Summaries](summaries.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md new file mode 100644 index 000000000..03a25a153 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-keyboard-navigation.md @@ -0,0 +1,1820 @@ +--- +_tocName: Keyboard navigation +_premium: true +--- +--- title: Angular Grid Keyboard Navigation - Ignite UI for Angular _description: Learn how to use Grid Keyboard Navigation with Ignite UI for Angular. With Keyboard interaction, users can quickly navigate between cells, rows, and columns. _keywords: keyboard navigation, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Keyboard Navigation + + Keyboard navigation in the **IgxGrid** provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the **IgxGrid** and allows to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way. The tabulations of the IgxGrid has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use. Currently, the IgxGrid introduces the following tab stops: - **GroupBy or Toolbar area** (if enabled); - **IgxGrid header**; - **IgxGrid body**; - **Column summaries** (if enabled); - **IgxGrid paginator** (if enabled); >[!NOTE] > Due to this change, navigating between the cells with tab and Shift + Tab is no longer supported in the IgxGrid. > Pressing the Tab key now goes through the tab stops in the following order: **GroupBy** / **Toolbar** -> **Headers** -> **Body** -> **Summaries** -> **Footer / Paginator**. >[!NOTE] > Exposing any **focusable** element into the **IgxGrid** body via template may introduce **side effects** in the keyboard navigation, since the default > browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately. ## Header Navigation A full _keyboard navigation_ support in the **IgxGrid** header is now introduced. Column headers can be easily traversed with the arrow keys. Additionally, there are a number of key combinations that trigger actions on the columns like **filtering**, **sorting**, **grouping** and etc. When the **IgxGrid** header container is focused, the following key combinations are available: ### Key Combinations - Arrow Up navigates one cell up in the headers (no looping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined - Arrow Down navigates one cell down in the headers (no wrapping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined - Arrow Left navigates one cell left (no looping) - Arrow Right navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level - Home navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level - Ctrl + Arrow Right navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level - End navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level - Alt + L opens Advanced Filtering dialog if Advanced Filtering is enabled - Ctrl + Shift + L opens the Excel Style Filter dialog or the default (row) filter if the column is filterable - Ctrl + Arrow Up sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared - Ctrl + Arrow Down sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared - Space selects the column; If the column is already selected, selection is cleared @@if (igxName === "IgxGrid") { - Shift + Alt + Arrow Left groups the column, if the column is marked as groupable - Shift + Alt + Arrow Right ungroups the column, if the column is marked as groupable - Alt + Arrow Left or Alt + Arrow Up collapses the column group header, if the header is not already collapsed - Alt + Arrow Right or `Alt + Arrow Down expands the column group header, if the header is not already expanded} ## Body navigation When the **IgxGrid** body is focused, the following key combinations are available: ### Key Combination - Arrow Up- navigates one cell up (no wrapping) - Arrow Down navigates one cell down (no wrapping) - Arrow Left navigates one cell left (no wrapping between lines) - Arrow Right - navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row - Ctrl + Arrow Right navigates to the rightmost cell in the row - Ctrl + Arrow Up navigates to the first cell in the column - Ctrl + Arrow Down navigates to the last cell in the column - Home navigates to the leftmost cell in the row - End navigates to the rightmost cell in the row - Ctrl + Home navigates to the top leftmost data cell in the grid - Ctrl + End navigates to the bottom rightmost data cell in the grid - Page Up scrolls one page (view port) up - Page Down scrolls one page (view port) down - Enter enters edit mode - F2 enters edit mode - Esc exits edit mode - Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row - Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row - Space - selects the row, if Row Selection is enabled - Alt + Arrow Left or Alt + Arrow Up - @@if (igxName === "IgxGrid") {over Group Row - collapses the group} @@if (igxName === "IgxHierarchicalGrid") {collapses the row island} @@if (igxName === "IgxTreeGrid") {collapses the current node} - Alt + Arrow Right or Alt + Arrow Down - @@if (igxName === "IgxGrid") {over Group Row - expands the group} @@if (igxName === "IgxHierarchicalGrid") {expands the row island } @@if (igxName === "IgxTreeGrid") {expands the current node} + @@if (igxName === "IgxGrid") {- Alt + Arrow Left or Alt + Arrow Up - over Master Detail Row - collapses the details view - Alt + Arrow Right or Alt + Arrow Down - over Master Detail Row - expands the details view} + @@if (igxName === "IgxGrid") {- Space - over Group Row - selects all rows in the group, if rowSelection property is set to multiple} Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. ## Demo @@if (igxName === "IgxGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-shadow */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { CellType, IActiveNodeChangeEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { SortingDirection } from 'igniteui-angular/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { DATA } from '../../data/customers'; +import { NgClass } from '@angular/common'; + +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, itemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = itemAction; + + if (itemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} + +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('shift + alt + arrow left/right', 'group/ungroup the active column', false, ItemAction.Groupable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, ItemAction.Collapsible), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse master details row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand master details row', false, ItemAction.Collapsible), + new Item('alt + arrow right/left', 'expand/collapse the group row', false, ItemAction.Expandable), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell left', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell right', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'grid-keyboardnav', + templateUrl: './grid-keyboardnav-sample.component.html', + styleUrls: ['grid-keyboardnav-sample.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class GridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + + + @ViewChild(IgxGridComponent, { static: true }) + public grid: IgxGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + + public get keyboardCollection() { + return this._keyboardHandler.collection; + } + + public get headerList() { + return this._keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this._keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this._keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + private _destroyer = new Subject(); + private _keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + + public onActiveNodeChange(evt: IActiveNodeChangeEventArgs) { + if (this.grid.crudService.cell) { + return; + } + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === this.grid.dataView.length ? + GridSection.FOOTER : GridSection.TBODY; + this.changeCombinationsCollection(gridSection); + this.toggleHeaderCombinations(evt); + this.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.grid.data = DATA; + for (const item of this.grid.data) { + const names = item.CompanyName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + item.PersonelDetails = `${item.ContactTitle}: ${item.ContactName}`; + item.CompanysAnnualProfit = (100000 + (Math.random() * Math.floor(1000000))).toFixed(0); + } + + this.grid.groupingExpansionStateChange.pipe(takeUntil(this._destroyer)) + .subscribe(() => { + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + this._keyboardHandler.selectItem(3); + } + }); + + this.grid.columnSelectionChanging.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this._keyboardHandler.selectItem(0); + } + }); + + this.grid.rowToggle.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (evt.type !== 'keydown') { + return; + } + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this._keyboardHandler.selectItem(1) : + this._keyboardHandler.selectItem(2); + }); + + this.grid.groupingExpressions = [ + { fieldName: 'ContactTitle', dir: SortingDirection.Asc } + ]; + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (key === 'tab') { return; } + if (this._keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this._keyboardHandler.selectItem(3); + break; + case 'home': + this._keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this._keyboardHandler.selectItem(0); + break; + case 'arrowright': + this._keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + + const activeNode = this.grid.navigation.activeNode; + if (this._keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this._keyboardHandler.selectItem(5); + return; + } + const col = this.grid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this._keyboardHandler.selectItem(4); + } + + if ((key === 'arrowleft' || key === 'arrowright') && evt.altKey && evt.shiftKey && + col && !col.columnGroup && col.groupable) { + this._keyboardHandler.selectItem(2); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey) { + if (col && !col.columnGroup && col.sortable) { + this._keyboardHandler.selectItem(1); + } + } + } + + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.grid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.grid.getCellByColumn(activeNode.row, columnName); + + if (cell && cell.column.editable && cell.editMode) { + this._keyboardHandler.selectItem(0); + } + } + if ((key === 'end' || key === 'home') && evt.ctrlKey) { + this._keyboardHandler.selectItem(4); + this.cdr.detectChanges(); + } + } + } + + public expandChange() { + if (!this._keyboardHandler.collection.length) { + return; + } + + this._keyboardHandler.selectItem(3); + } + + public onCheckChange(evt, idx) { + evt.checked ? this._keyboardHandler.selectItem(idx) : this._keyboardHandler.deselectItem(idx); + } + + public toggleHeaderCombinations(activeNode) { + if (this._keyboardHandler.gridSection !== GridSection.THEAD) { + return; + } + const currColumn = this.grid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this._keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const rowRef = this.grid.getRowByIndex(activeNode.row); + if (this._keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + + if (rowRef.isGroupByRow) { + this._keyboardHandler.enableActionItems([ItemAction.Expandable]); + } else { + const cell = this.grid.getCellByColumn(activeNode.row, + this.grid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + } + + public toggleCellCombinations(cell?: CellType) { + const actions = this.extractCellActions(cell); + this._keyboardHandler.enableActionItems(actions); + } + + public changeCombinationsCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this._keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this._keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this._keyboardHandler.collection = summaryCombinations; + break; + default: + this._keyboardHandler.collection = []; + return; + } + this._keyboardHandler.gridSection = gridSection; + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + + res.push(ItemAction.Collapsible); + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + @if (dataItem.CompanysAnnualProfit) { +
+
Annual Profit:
+ {{dataItem.CompanysAnnualProfit}} +
+ } + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($color: 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample ::ng-deep { + @include checkbox($custom-checkbox-theme); +} + +.sample { + display: flex; + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 450px; + box-shadow: elevation(2); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} @@if (igxName === "IgxHierarchicalGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-shadow */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { fromEvent, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { NgClass } from '@angular/common'; + +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, itemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = itemAction; + + if (itemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} + +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, + ItemAction.Collapsible), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse row island row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand row island row', false, ItemAction.Collapsible), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell right', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell left', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'grid-keyboardnav', + templateUrl: './hgrid-keyboard-guide.component.html', + styleUrls: ['hgrid-keyboard-guide.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class HGridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + + + @ViewChild(IgxHierarchicalGridComponent, { static: true }) + public hGrid: IgxHierarchicalGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + + public get keyboardCollection() { + return this.keyboardHandler.collection; + } + + public get headerList() { + return this.keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this.keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this.keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + public gridTarget: GridUnderManagement; + + private _destroyer = new Subject(); + private keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + public onActiveNodeChange(evt) { + if (this.hGrid.crudService.cell) { + return; + } + const grid = evt.owner || this.hGrid; + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === grid.dataView.length ? GridSection.FOOTER : GridSection.TBODY; + this.changeKeyboardCollection(gridSection); + this.gridTarget.toggleHeaderCombinations(evt); + this.gridTarget.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.hGrid.data = CUSTOMERS; + for (const item of this.hGrid.data) { + const names = item.CompanyName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + item.PersonelDetails = `${item.ContactTitle}: ${item.ContactName}`; + item.CompanysAnnualProfit = (100000 + (Math.random() * Math.floor(1000000))).toFixed(0); + } + + this.gridTarget = new GridUnderManagement(this.hGrid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public expandChange() { + if (!this.keyboardHandler.collection.length) { + return; + } + + this.keyboardHandler.selectItem(2); + } + + public onCheckChange(evt, idx) { + evt.checked ? this.keyboardHandler.selectItem(idx) : this.keyboardHandler.deselectItem(idx); + } + + public changeKeyboardCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this.keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this.keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this.keyboardHandler.collection = summaryCombinations; + break; + default: + this.keyboardHandler.collection = []; + return; + } + this.keyboardHandler.gridSection = gridSection; + } + + public onGridCreated(evt) { + fromEvent(evt.grid.elementRef.nativeElement, 'click').pipe(takeUntil(this._destroyer)) + .subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + + fromEvent(evt.grid.elementRef.nativeElement, 'focus').pipe(takeUntil(this._destroyer)) + .subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + + fromEvent((evt.grid as IgxHierarchicalGridComponent).tbody.nativeElement, 'focus') + .pipe(takeUntil(this._destroyer)).subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (this.keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this.keyboardHandler.selectItem(3); + break; + case 'home': + this.keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this.keyboardHandler.selectItem(0); + break; + case 'arrowright': + this.keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + const activeNode = this.gridTarget.hGrid.navigation.activeNode; + if (this.keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this.keyboardHandler.selectItem(3); + return; + } + const col = this.gridTarget.hGrid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this.keyboardHandler.selectItem(4); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey && col && !col.columnGroup && col.sortable) { + this.keyboardHandler.selectItem(1); + } + } + + if (this.keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.gridTarget.hGrid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.gridTarget.hGrid.getCellByColumn(activeNode.row, columnName); + if (cell && cell.column.editable && cell.editMode) { + this.keyboardHandler.selectItem(0); + } + } + if ((evt.code === 'End' || evt.code === 'Home') && evt.ctrlKey) { + this.keyboardHandler.selectItem(3); + } + } + } +} + +export class GridUnderManagement { + public hGrid: IgxHierarchicalGridComponent; + public destroyer = new Subject(); + public keyboardHandler: KeyboardHandler; + public cdr: ChangeDetectorRef; + + constructor(hGrid: IgxHierarchicalGridComponent, keyboardHandler: KeyboardHandler, + destroyer: Subject, cdr: ChangeDetectorRef) { + this.hGrid = hGrid; + this.keyboardHandler = keyboardHandler; + this.destroyer = destroyer; + this.cdr = cdr; + } + + public subscribe() { + this.hGrid.columnSelectionChanging.pipe(takeUntil(this.destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this.keyboardHandler.selectItem(0); + } + }); + + this.hGrid.rowToggle.pipe(takeUntil(this.destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (!evt || evt.type !== 'keydown') { + return; + } + + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this.keyboardHandler.selectItem(1) : + this.keyboardHandler.selectItem(2); + }); + } + + public toggleHeaderCombinations(activeNode) { + if (this.keyboardHandler.gridSection !== GridSection.THEAD || activeNode.column === undefined || activeNode.level === undefined) { + return; + } + const grid = activeNode.owner || this.hGrid; + const currColumn = grid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this.keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const grid = activeNode.owner || this.hGrid; + const rowRef = grid.getRowByIndex(activeNode.row); + if (this.keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + + if (rowRef.isGroupByRow) { + this.keyboardHandler.enableActionItems([ItemAction.Expandable]); + } else { + const cell = grid.getCellByColumn(activeNode.row, + grid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + } + + public toggleCellCombinations(cell?: CellType) { + if (this.keyboardHandler.gridSection !== GridSection.TBODY || !cell) { + return; + } + + const actions = this.extractCellActions(cell); + this.keyboardHandler.enableActionItems(actions); + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + + res.push(ItemAction.Collapsible); + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{headerList}} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($color: 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample { + @include tokens($custom-checkbox-theme); +} + +.sample { + display: flex; + + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 570px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} @@if (igxName === "IgxTreeGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @typescript-eslint/naming-convention */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { CellType, IActiveNodeChangeEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxOverlayService } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { NgClass } from '@angular/common'; + +// eslint-disable-next-line no-shadow +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +// eslint-disable-next-line no-shadow +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +// eslint-disable-next-line no-shadow +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, ítemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = ítemAction; + + if (ítemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + if (!this._collection.length) { + return; + } + + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + if (!this._collection.length) { + return; + } + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, + ItemAction.Collapsible), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand row', false, ItemAction.Collapsible), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell right', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell left', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'app-grid-keyboardnav', + templateUrl: './tgrid-keyboardnav-guide.component.html', + styleUrls: ['tgrid-keyboardnav-guide.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class TGridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + private _overlay = inject(IgxOverlayService); + + @ViewChild(IgxTreeGridComponent, { static: true }) + public tgrid: IgxTreeGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + public data; + + public get keyboardCollection() { + return this._keyboardHandler.collection; + } + + public get headerList() { + return this._keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this._keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this._keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + private _destroyer = new Subject(); + private _keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + public onActiveNodeChange(evt: IActiveNodeChangeEventArgs) { + if (this.tgrid.crudService.cell) { + return; + } + + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === this.tgrid.dataView.length ? + GridSection.FOOTER : GridSection.TBODY; + this.changeKeyboardCollection(gridSection); + this.toggleHeaderCombinations(evt); + this.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + this.tgrid.columnSelectionChanging.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this._keyboardHandler.selectItem(0); + } + }); + + this.tgrid.rowToggle.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (evt.type !== 'keydown') { + return; + } + + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this._keyboardHandler.selectItem(1) : + this._keyboardHandler.selectItem(2); + }); + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public expandChange() { + if (!this._keyboardHandler.collection.length) { + return; + } + + this._keyboardHandler.selectItem(2); + } + + public onCheckChange(evt, idx) { + evt.checked ? this._keyboardHandler.selectItem(idx) : this._keyboardHandler.deselectItem(idx); + } + + public changeKeyboardCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this._keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this._keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this._keyboardHandler.collection = summaryCombinations; + break; + default: + this._keyboardHandler.collection = []; + return; + } + this._keyboardHandler.gridSection = gridSection; + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (key === 'tab') { return; } + if (this._keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this._keyboardHandler.selectItem(3); + break; + case 'home': + this._keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this._keyboardHandler.selectItem(0); + break; + case 'arrowright': + this._keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + const activeNode = this.tgrid.navigation.activeNode; + if (this._keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this._keyboardHandler.selectItem(4); + return; + } + const col = this.tgrid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this._keyboardHandler.selectItem(3); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey && col && !col.columnGroup && col.sortable) { + this._keyboardHandler.selectItem(1); + } + } + + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.tgrid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.tgrid.getCellByColumn(activeNode.row, columnName); + + if (cell && cell.column.editable && cell.editMode) { + this._keyboardHandler.selectItem(0); + } + } + if ((evt.code === 'End' || evt.code === 'Home') && evt.ctrlKey) { + this._keyboardHandler.selectItem(3); + this.cdr.detectChanges(); + } + } + } + + public toggleHeaderCombinations(activeNode) { + if (this._keyboardHandler.gridSection !== GridSection.THEAD) { + return; + } + const currColumn = this.tgrid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this._keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const rowRef = this.tgrid.getRowByIndex(activeNode.row); + if (this._keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + const cell = this.tgrid.getCellByColumn(activeNode.row, + this.tgrid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + public toggleCellCombinations(cell?: CellType) { + if (this._keyboardHandler.gridSection !== GridSection.TBODY) { + return; + } + + const actions = this.extractCellActions(cell); + this._keyboardHandler.enableActionItems(actions); + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + if (cell.row.children && cell.row.children.length) { + res.push(ItemAction.Collapsible); + } + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + + + + + + + + + + + + +
+ Country: {{cell.row.data.Country}} +
+ City: {{cell.row.data.City}} +
+ Postal Code: {{cell.row.data.Address}} +
+ + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($default-palette, 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample ::ng-deep { + @include checkbox($custom-checkbox-theme); +} + +.sample { + display: flex; + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 450px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} ## Custom keyboard navigation Overriding the default behavior for a certain key or keys combination is one of the benefits that the **Keyboard Navigation** feature provides. For example: press the Enter or Tab key to navigate to the next cell or the cell below. This or any other navigation scenario is easily achieved by the **Keyboard Navigation** API: | API | Description | Arguments | |---------|-------------|-----------| | [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridKeydown) | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | [IGridKeydownEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html) | | [`activeNodeChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#activeNodeChange) | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | [IActiveNodeChangeEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iactivenodechangeeventargs.html) | | [`navigateTo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#navigateTo) | Navigates to a position in the grid, based on provided `rowindex` and `visibleColumnIndex`. It can also execute a custom logic over the target element, through a callback function that accepts param of type `{ targetType: GridKeydownTargetType, target: Object }` . Usage:
_grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} | | [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getNextCell)| returns [`ICellPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icellposition.html) object, which defines the next cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getnextcell) method. The callback function accepts `IgxColumnComponent` as a param and returns a `boolean` value indication if a given criteria is met:
_const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean | | [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getPreviousCell)| returns [`ICellPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icellposition.html) object, which defines the previous cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getPreviousCell) method. The callback function accepts `IgxColumnComponent` as a param and returns a `boolean` value indication if a given criteria is met:
_const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean | Let's try the API to demonstrate how to achieve common scenarios like user input validation and custom navigation. First we need to register an event handler for the [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridKeydown) event: ```html ``` ```typescript public customKeydown(args: IGridKeydownEventArgs) { + const target: IgxGridCell = args.target as IgxGridCell; + const evt: KeyboardEvent = args.event as KeyboardEvent; + const type = args.targetType; + + if (type === 'dataCell' && target.inEditMode && evt.key.toLowerCase() === 'tab') { + // 1. USER INPUT VALIDATION ON TAB + } + if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') { + // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS + } } ``` Based on the [IGridKeydownEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html) values we identified two cases, where to provide our own logic (see above). Now, using the methods from the API, let's perform the desired - if the user is pressing Tab key over a cell in edit mode, we will perform validation on the input. If the user is pressing Enter key over a cell, we will move focus to cell in the next row: ```typescript + // 1. USER INPUT VALIDATION ON TAB + if (target.column.dataType === 'number' && target.editValue < 10) { + // alert the user that the input is invalid + return; + } + // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS + this.grid1.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => { + obj.target.activate(); + }); ``` >[!NOTE] > Please refer to the sample code for full implementation details. Use the demo below to try out the custom scenarios that we just implemented: - Double click or press F2 key on a cell in the **Order** column, change the value to **7** and press Tab key. Prompt message will be shown. - Select a cell and press Enter key a couple of times. Every key press will move the focus to a cell in the next row, under the same column. ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { CellType, GridSelectionMode, IGridKeydownEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-custom-kb-navigation-sample', + styleUrls: ['./grid-custom-kb-navigation-sample.component.scss'], + templateUrl: 'grid-custom-kb-navigation-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) + +export class GridCustomKBNavigationComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public selectionMode: GridSelectionMode = 'multiple'; + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + } + + public customKeydown(args: IGridKeydownEventArgs) { + const target: CellType = args.target as CellType; + const evt: KeyboardEvent = args.event as KeyboardEvent; + const type = args.targetType; + + if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') { + // Value validation for number column. + // This covers both 'tab' and 'shift+tab' key interactions. + args.event.preventDefault(); + args.cancel = true; + if (target.column.dataType === 'number' && target.editValue < 10) { + alert('The value should be bigger than 10'); + return; + } + const cell = evt.shiftKey ? + this.grid1.getPreviousCell(target.row.index, target.column.visibleIndex, (col) => col.editable) : + this.grid1.getNextCell(target.row.index, target.column.visibleIndex, (col) => col.editable); + + this.grid1.navigateTo(cell.rowIndex, cell.visibleColumnIndex, + (obj) => { obj.target.activate(); }); + } else if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') { + // Perform column based kb navigation with 'enter' key press + args.cancel = true; + this.grid1.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => { + obj.target.activate(); + }); + } + } +} +``` +```html +
+ + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 5px 16px; +} +``` ## Known Limitations |Limitation|Description| |--- |--- | | Navigating inside а grid with scrollable parent container. | If the grid is positioned inside a scrollable parent container and the user navigates to a grid cell that is out of view, parent container will not be scrolled.| ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
_[Hierarchical Grid Keyboard Navigation](../hierarchicalgrid/keyboard-navigation.md) _ [Tree Grid Keyboard Navigation](../treegrid/keyboard-navigation.md) - [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md new file mode 100644 index 000000000..dc8e494cc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-binding.md @@ -0,0 +1,140 @@ +--- +title: Angular Grid Lite Data Binding | Ignite UI for Angular | MIT license +_description: Data binding for Angular Grid Lite. Create apps with our open-source Angular Grid Lite. It’s lightweight and packed with essential features. Try now. +_keywords: data binding, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Data Binding +--- + +# Angular Grid Lite Data Binding + +The Grid Lite accepts and array of plain objects as a data source. Each grid row is the rendered representation of a data record in the array with row cells being controlled by the column configuration. + +When applying data transformations, such as sorting and filtering, the grid does not modify the original data reference. That is to say, data transformations will not be reflected in the original source. The grid does not track changes to the objects inside the data array, so direct modification of the data objects will not be reflected. + +## Change the Data Source at Runtime + +The component supports changing its data source at runtime. If the new source has a different "shape" than the previous one make sure to update your column configuration as well. + +```typescript +grid.data = [...{ + /** records follow */ +}]; +``` + +```html + + + + +``` + +If the grid has `autoGenerate` enabled, it will "_infer_" the new column configuration automatically when the data changes. + +```typescript +grid.autoGenerate = true; + +/** After the new binding the grid will infer the column collection from the bound data. */ +grid.data = []; +``` + +Or just set the respective properties in the html instead of using a `@ViewChild` for the grid. + +```html + + +``` + + +>[!NOTE] +>The sort/filter states of the Grid Lite component are kept when changing the data source in this manner. +Usually you will want to reset them by calling either **`clearSort()`** and/or **`clearFilter()`**. + +In the sample below, the grid has column auto-generation enabled. When you click on the switch data button, +the column collection is reset, and a new data source is bound to the grid. + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { GridLiteDataService, ProductInfo, UserSimple } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-grid-lite-data-binding-dynamic', + templateUrl: './grid-lite-data-binding-dynamic.component.html', + styleUrls: ['./grid-lite-data-binding-dynamic.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxButtonDirective + ] +}) +export class GridLiteDataBindingDynamicComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: (ProductInfo | UserSimple)[] = []; + public dataType: 'products' | 'users' = 'products'; + + ngOnInit() { + this.data = this.dataService.generateProducts(50); + } + + switchData() { + this.dataType = this.dataType === 'products' ? 'users' : 'products'; + if (this.dataType === 'products') { + this.data = this.dataService.generateProducts(50); + } else { + this.data = this.dataService.generateSimpleUsers(50); + } + } +} +``` +```html +
+ + + +
+``` +```scss +:host { + contain: content; + --ig-size: 1; +} + +.grid-lite-wrapper { + width: 100%; + height: calc(100% - 50px); +} + +igx-grid-lite { + margin-top: 1rem; + min-height: 65vh; +} +``` + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Sorting](sorting.md) +- [Filtering](filtering.md) +- [Theming & Styling](theming.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md new file mode 100644 index 000000000..e74c0ce93 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-cell-template.md @@ -0,0 +1,240 @@ +--- +title: Angular Grid Lite Cell Template | Ignite UI for Angular | MIT license +_description: Configure and customize custom Grid Lite cell renderers. Create apps with our open-source Angular Grid Lite. Try now. +_keywords: cell template, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Cell Template +--- + +# Column Cell Template + +By default, the grid uses the field of the column to render the value as a string inside the cell. This is fine for basic scenarios, but if you want to customize the rendered output or the final output is a combination of different data fields, you can customize the cell template. + +To achieve that, use **``** inside `...` of a column in which you want to template the content. + +```html + + + + + + +``` + +You also need to import **`IgxGridLiteCellTemplateDirective`** + +```typescript +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; +``` + +And add it to the `imports` array + +```typescript +imports: [ IgxGridLiteCellTemplateDirective ] +``` + +## Use as a Formatter Function + +For the simple scenario where some formatting is required, one can just return the formatted value. Here is an example for displaying a number value to a locale currency format: + +```typescript +public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' +}); + +/** Return the custom currency format for a value `value = 123456.789` */ +protected formatCurrency = (value: number) => { + return this.formatter.format(value); // => "€123,456.79" +}; +``` + +You can combine values different fields from the data source as well. + + +```typescript +public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' +}); + +/** Return the total earned money from a product in custom currency */ +protected formatCurrency = (value: number, unitsSold: number) => { + return this.formatter.format(value * unitsSold); +}; +``` + +```html + + + {{formatCurrency(value, row.data.sold)}} + + +``` + +## Custom DOM Templates + +Aside from using components from **`igniteui-angular`** inside the **``** , you can also create your own DOM template, which will be rendered inside the cell container. + +You can template any standard DOM elements as well as web components from other libraries. For example in the following code snippets we are using the rating component coming from **`igniteui-webcomponents`**. In order to use it properly, we need to go through a few steps described below. + +```typescript +// Import external components for the custom template +import { + defineComponents, + IgcRatingComponent +} from 'igniteui-webcomponents'; + +// Define them so that we can use them in our sample +defineComponents( + IgcRatingComponent +); +``` + +```html + + + + + + + +``` + +>[!NOTE] +>Keep in mind the more complex and involved the template is, the greater the performance cost. Avoid complex DOM structures if performance is important. + +## Cell Context Object + +The custom cell renderer is passed an **`GridLiteCellContext`** object as a parameter with the following props: + + +```typescript +/** + * Context object for the row cell template callback. + */ +export interface IgxGridLiteCellTemplateContext { + /** + * The cell element parent of the template. + */ + parent: GridLiteCell; + /** + * The row element containing the cell. + */ + row: GridLiteRow; + /** + * The current configuration for the column. + */ + column: ColumnConfiguration; + /** + * The value from the data source for this cell. + */ + value: PropertyType; + + $implicit: PropertyType; +} +``` + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-grid-lite-column-config-simple', + templateUrl: './grid-lite-column-config-simple.component.html', + styleUrls: ['./grid-lite-column-config-simple.component.scss'], + imports: [CommonModule, IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteColumnConfigSimpleComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + + public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' + }); + + ngOnInit() { + this.data = this.dataService.generateProducts(50); + } + + protected formatCurrency = (value: number) => { + return this.formatter.format(value); + }; +} +``` +```html +
+ + + + + {{formatCurrency(value)}} + + + + + + {{formatCurrency(value)}} + + + + + + + + + +
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; +} +``` + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Sorting](sorting.md) +- [Filtering](filtering.md) +- [Theming & Styling](theming.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md new file mode 100644 index 000000000..3327c1018 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-column-configuration.md @@ -0,0 +1,293 @@ +--- +title: Angular Grid Lite Cell Template | Ignite UI for Angular | MIT license +_description: Grid Lite column configuration and column properties. Try our open-source Angular Grid Lite - lightweight and packed with essential features. +_keywords: column configuration, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Column Configuration +--- + +# Column Configuration + +Columns are defined declaratively using column child components within the grid. The `field` property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows. + +```html + + + + +``` + +## Configuration Based on the Data Source + +The grid supports inferring the column configuration based on the provided data source when `autoGenerate` is set to true. It tries to infer the appropriate `field` and `dataType` based on records in the data. + +```typescript +const data: Record[] = [ + { entryId: "1234", source: "https://example.com", ts: 1373521917579 }, + ... +]; +``` + +```html + +``` + +The previous snippet will result in the grid automatically creating columns equivalent to: + +```html + + + + + +``` + +Useful for a quick render of some data without any additional customizations. + +>[!NOTE] +>This is a one-time operation which is executed when the grid is initially added to the DOM. Passing an empty data source or having a late bound data source (such as a HTTP request) will usually result in empty column configuration for the grid. This property is ignored if any existing column configuration already exists in the grid. See [the data binding topic](./binding.md) for additional information on auto-generating the column configuration based on the data source. + +## Additional Column Configuration + +The column exposes several more properties for customization: + +### Column Width + +By default, the columns have a width of `minmax(136px, 1fr)` which translates to a minimum width of 136px and maximum of +1 part of the available space in the Grid Lite. This way the columns are fluid and responsive accommodating for changes +in the grid width. + +To change the width of column, use the `width` property of the column. + +```html + +``` + +The property accepts valid CSS length units. + +### Hiding Columns + +Columns can be hidden/shown by setting the `hidden` property of the column. + +```html + +``` + +### Column Resize + +Each column of the Grid Lite component can be configured to be resizable by setting the `resizable` property of the column element. + +```html + +``` + +If a column is set to be resizable, you can drag the right size of the column header to either increase/decrease the column width. Double-clicking on the resize area will trigger auto-sizing of the column where it will try set its width according to the largest content of its cells/header. + +>[!NOTE] +>Columns with "fluid" widths (fr, %, etc.) can behave erratically when resizing in the grid is performed as they try to accommodate for the new dimensions. Depending on the application scenario, it may be better to use "hard" units so users don't experience layout shifts. + +In the sample below you can try out the different column properties and how they reflect in the rendered grid. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteColumnConfiguration } from 'igniteui-angular/grids/lite'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-grid-lite-column-config-dynamic', + templateUrl: './grid-lite-column-config-dynamic.component.html', + styleUrls: ['./grid-lite-column-config-dynamic.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, + IgxButtonDirective, + IgxToggleActionDirective, + IgxDropDownItemNavigationDirective, + IgxDropDownComponent, + IgxDropDownItemComponent, + IgxCheckboxComponent, + IgxSwitchComponent + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + standalone: true +}) +export class GridLiteColumnConfigDynamicComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + public hasFormatters = true; + + public columns: IgxGridLiteColumnConfiguration[] = [ + { field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false, dataType: 'string'}, + { field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'string'}, + { field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }, + { field: 'sold', header: 'Units Sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }, + { field: 'total', header: 'Total Sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }, + { field: 'rating', header: 'Customer Rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' } + ]; + + public formatter = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' }); + + ngOnInit() { + this.data = this.dataService.generateProducts(50); + } + + protected formatCurrency = (value: number) => + this.formatter.format(value); + + toggleColumnProperty(column: any, property: string, value: boolean) { + column[property] = value; + // Trigger Angular change detection + this.columns = [...this.columns]; + } + + toggleFormatters(event: any) { + this.hasFormatters = event.checked; + } +} +``` +```html +
+
+ + + @for (column of columns; track column) { + +
+ {{ column.header }} + + Hidden + + + Resizable + + + Filter + + + Sort + +
+ + } + + + + Value formatters: + +
+ + + @for (col of columns; track col) { + + + @if (col.field === 'rating') { + + + + + + + + + } + + + @else if (col.field === 'price' || col.field === 'total') { + + + + {{ hasFormatters ? formatCurrency(value) : value }} + + + + } + + + @else { + + + } + } + +
+``` +```scss +.panel { + margin: 1rem 0; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} + +.config { + display: grid; + grid-template-columns: 180px repeat(4, max-content); + column-gap: 1rem; + align-items: center; + width: 100%; +} + +.config-key { + font-weight: bold; + white-space: nowrap; +} + +.config igx-checkbox { + white-space: nowrap; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; + --ig-size: 2; +} +``` + + + +## Additional Resources + +- [Data Binding](binding.md) +- [Sorting](sorting.md) +- [Filtering](filtering.md) +- [Theming & Styling](theming.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md new file mode 100644 index 000000000..4d70a7d65 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-filtering.md @@ -0,0 +1,536 @@ +--- +title: Angular Grid Lite Filtering | Ignite UI for Angular | MIT license +_description: Filter operations, filter customization, and remote filtering for Angular Grid Lite. Create apps with our open-source Angular Grid Lite. Try it now. +_keywords: filtering, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Filtering Overview +--- + +# Angular Grid Lite Filter Operations + +The Grid Lite supports filtering operations on its data source. Data filtering is controlled on per-column level, allowing you to have filterable and non-filterable columns. By default, filtering on a column is disabled unless explicitly configured with the `filterable` property of the column configuration object. + +```html + +``` + +You can also control whether the filter operations for string columns should be case sensitive by using the `filteringCaseSensitive` property: + +```html + +``` + +You can also set these properties programmatically: + +```typescript +column.filterable = true; +column.filteringCaseSensitive = true; +``` + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, User } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; + +defineComponents(IgcCheckboxComponent); + +@Component({ + selector: 'app-grid-lite-filtering-simple', + templateUrl: './grid-lite-filtering-simple.component.html', + styleUrls: ['./grid-lite-filtering-simple.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, + IgxCheckboxComponent +] +}) +export class GridLiteFilteringSimpleComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: User[] = []; + + ngOnInit() { + this.data = this.dataService.generateUsers(50); + } +} +``` +```html +
+ + + + + + + + + + +
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; +} +``` + +## Filter Model + +The building blocks for filter operations in the grid is the **`FilterExpression`** which has the following structure: + +```typescript +export interface FilterExpression = Keys> { + /** + * The target column for the filter operation. + */ + key: K; + /** + * The filter function which will be executed against the data records. + */ + condition: FilterOperation | OperandKeys; + + /** + * The filtering value used in the filter condition function. + * + * @remarks + * Optional for unary conditions. + */ + searchTerm?: T[K]; + /** + * Dictates how this expression should resolve in the filter operation in relation to + * other expressions. + */ + criteria?: FilterCriteria; + /** + * Whether the sort operation should be case sensitive. + * + * @remarks + * If not provided, the value is resolved based on the column filter configuration (if any). + */ + caseSensitive?: boolean; +} +``` + +## Filter API + +The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the **`GridLite.filter()`**/**`GridLite.clearFilter()`** methods or through the **`Grid.Lite.filterExpressions`** property. + +The **`filter()`** method accepts either a single expression or an array of filter expression and then filters the grid data +based on those expressions. + +```typescript +// Single +grid.filter({ key: 'firstName', condition: 'contains', searchTerm: 'George' }); + +// Multiple +grid.filter([ + { key: 'firstName', condition: 'startsWith', searchTerm: 'a' }, + { key: 'firstName', condition: 'startsWith' searchTerm: 'g', criteria: 'or' }, +]); +``` + +The **`clearFilter()`** method, as the name implies, clears the filter state of a single column or the whole grid component, depending on the passed arguments. + +```typescript +// Clear the filter state for the `age` column. +grid.clearFilter('age'); + +// Clear the filter state of the grid. +grid.clearFilter(); +``` + +## Initial Filter State + +The **`filterExpressions`** property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered. + +For example here is a Lit-based sample: + +```typescript +{ + filteringExpressions: IgxGridLiteFilteringExpression[] = [ + { key: 'age', condition: 'greaterThan', searchTerm: 21 }, + /** unary condition so `searchTerm` is not required */ + { key: 'active', condition: 'true' }, + ]; +} +``` + +```html + +``` + +It can be used to get the current filter state of the component and do additional processing depending on another state in your application. + +```typescript +const state = grid.filterExpressions; +// Save the current filter state +saveUserFilterState(state); +``` + +## Events + +When a filter operation is performed through the UI, the component emits a custom **`filtering`** event. The **`detail`** property is the sort expression which will be applied by the Grid Lite. The event is cancellable and if cancelled will prevent the current filter operation. + +After the grid applies the new filter state, a **`filtered`** event is emitted. It contains the filter state for the column which was the target of the operation and it is not cancellable. + +```html + +``` + +```typescript +onFiltering(event: IgxFilteringEvent) { ... } +onFiltered(event: IgxFilteredEvent) { ... } +``` + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, User } from '../grid-lite-data.service'; +import { + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective +} from 'igniteui-angular/grids/lite'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; + +defineComponents(IgcCheckboxComponent); + +@Component({ + selector: 'app-grid-lite-filtering-events', + templateUrl: './grid-lite-filtering-events.component.html', + styleUrls: ['./grid-lite-filtering-events.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, + IgxCheckboxComponent + ] +}) +export class GridLiteFilteringEventsComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: User[] = []; + public log: string[] = []; + + ngOnInit(): void { + this.data = this.dataService.generateUsers(50); + } + + private get timeStamp(): string { + return `[${new Date().toLocaleTimeString()}]`; + } + + private updateLog(message: string): void { + if (this.log.length >= 10) { + this.log.shift(); + } + this.log = [...this.log, message]; + } + + handleFiltering(event: any): void { + const { expressions, type } = event.detail; + + this.updateLog( + `${this.timeStamp} :: Event 'filtering' :: Filter operation of type '${type}' for column '${expressions[0].key}'` + ); + } + + handleFiltered(event: any): void { + this.updateLog( + `${this.timeStamp} :: Event 'filtered' for column '${event.detail.key}'` + ); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + +
+ @for (entry of log; track $index) { +

{{ entry }}

+ } +
+
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; +} + +.log { + margin-top: 0.5rem; + border: 1px solid #ccc; + padding: 1rem; + min-height: 2rem; + font-size: 0.75rem; + max-height: 5rem; + overflow-y: auto; +} +``` + +## Remote filter operations + +In cases where filtering must be done remotely or you want to save the current state/data to a server somewhere, +the Grid Lite exposes a hook where you can implement and customize this behavior. + +Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object. + +```typescript +export type DataPipelineParams = { + /** + * The current data state of the grid. + */ + data: T[]; + /** + * The grid component itself. + */ + grid: GridLite; + /** + * The type of data operation being performed. + */ + type: 'sort' | 'filter'; +}; +``` + +```typescript +grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise }; +``` + +The custom callback can be async as the grid will wait for it until it resolves. + +The following example mocks remote filter operation, reflecting the REST endpoint generated based on the filter state of the component. + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcCheckboxComponent, IgcCircularProgressComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, User } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteDataPipelineConfiguration } from 'igniteui-angular/grids/lite'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; + +defineComponents(IgcCheckboxComponent, IgcCircularProgressComponent); + +@Component({ + selector: 'app-grid-lite-filtering-pipeline', + templateUrl: './grid-lite-filtering-pipeline.component.html', + styleUrls: ['./grid-lite-filtering-pipeline.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, + IgxCheckboxComponent, + IgxCircularProgressBarComponent + ] +}) +export class GridLiteFilteringPipelineComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: User[] = []; + public dataPipelineConfiguration: IgxGridLiteDataPipelineConfiguration; + public inOperation = false; + public queryString = ''; + + ngOnInit() { + this.data = this.dataService.generateUsers(500); + + this.dataPipelineConfiguration = { + filter: async ({ data, grid }: any) => { + this.inOperation = true; + this.buildUri(grid.filterExpressions); + await new Promise(resolve => setTimeout(resolve, 250)); + this.inOperation = false; + return data; + } + }; + } + + private buildUri(state: any[]) { + const grouped = this.groupBy(state, 'key'); + const out: string[] = []; + + for (const [key, exprs] of Object.entries(grouped)) { + out.push(`${key}(${this.mapExpressions(exprs as any[])})`); + } + + this.queryString = `GET: /data?filter=${out.join('&')}`; + } + + private groupBy(arr: T[], key: keyof T): Record { + const out: Record = {}; + for (const each of arr) { + const slot = each[key] as string; + if (!out[slot]) { + out[slot] = []; + } + out[slot].push(each); + } + return out; + } + + private mapExpressions(arr: any[]): string { + const arrTemp = arr.map(({ searchTerm, criteria, condition }, idx) => { + const normalizedSearchTerm = !searchTerm ? condition.name : searchTerm; + + return idx < 1 + ? `${condition.name}("${normalizedSearchTerm}")` + : `${criteria?.toUpperCase()} ${condition.name}("${normalizedSearchTerm}")`; + }).join(' '); + return arrTemp; + } +} +``` +```html +
+
+
Generated request
+

{{ queryString }}

+
+
+ @if (inOperation) { + + + } + + + + + + + + + + + +
+
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +.grid-section { + position: relative; +} + +igx-circular-progress { + visibility: hidden; + --diameter: 4rem; + background-color: rgba(255, 255, 255, 0.5); + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +p { + border: 1px solid #ccc; + padding: 1rem; + min-height: 1rem; + font-size: 0.75rem; +} + +igx-grid-lite { + min-height: 65vh; +} +``` + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Sorting](sorting.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md new file mode 100644 index 000000000..44a04f8ec --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-header-template.md @@ -0,0 +1,142 @@ +--- +title: Angular Grid Lite Header Template | Ignite UI for Angular | MIT license +_description: Configure and customize custom Grid Lite column header renderers. See demos and examples! Build applications with open-source Angular Grid Lite. Try it now. +_keywords: header template, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Header Template +--- + +# Customizing the Column Header + +Similar to the cell templates, column headers can also be customized to better fit the desired use case. You can pass a text label through the `header` property, or provide a full-blown custom template. + +## Customization via Header Text + +By default the column uses the `field` property for label text. To customize the label, set the `header` property to a more human readable format. + +```html + +``` + +>[!NOTE] +>When a header template is provided, `header` is ignored. + +## Customization via Header Template + +Similar to the cell template, you can also pass a custom template renderer and create your own DOM inside the column header. + +```typescript +// Import the directive for it -> IgxGridLiteHeaderTemplateDirective +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite'; + +// And add it to your imports array + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, // for templating cells + IgxGridLiteHeaderTemplateDirective // for templating headers +], +``` + +```html + + + +

⭐ Rating ⭐

+ + + + + + + + +``` + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-grid-lite-column-config-headers', + templateUrl: './grid-lite-column-config-headers.component.html', + styleUrls: ['./grid-lite-column-config-headers.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, + IgxGridLiteHeaderTemplateDirective + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteColumnConfigHeadersComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + + ngOnInit() { + this.data = this.dataService.generateProducts(50); + } +} +``` +```html +
+ + + + + + + +

⭐ Rating ⭐

+ + + + + + + + +
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; +} +``` + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Cell Template](cell-template.md) +- [Theming & Styling](theming.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md new file mode 100644 index 000000000..8e7cf28e1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-overview.md @@ -0,0 +1,313 @@ +--- +title: Free Angular Data Grid (Open Source) - Ignite UI Grid Lite | MIT license +_description: Create apps with our open-source Angular Grid Lite. It’s lightweight and packed with essential features - filtering, hiding, sorting, and more. Try now. +_keywords: overview, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Grid Lite +--- + +# Free & Open-Source Angular Data Grid (Grid Lite) + +The Ignite UI for Angular Grid Lite is a lightweight, high-performance Angular data grid that’s free to use, open-source, and built for modern Angular applications. + +This free Angular data grid is open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The Angular Grid Lite is designed for developers who need fast and lightweight data presentation. + +## What You Get with our Free Angular Data Grid + +Our free, open-source Angular Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the [Ignite UI Theming Framework](../themes.md). + +Angular supports custom elements, so you can use Grid Lite with ease. + +## Grid Lite in Action + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { + defineComponents, + IgcRatingComponent +} from 'igniteui-webcomponents'; +import { GridLiteDataService, User } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxSelectComponent } from 'igniteui-angular/select'; +import { IgxBadgeComponent, IgxBadgeModule } from 'igniteui-angular/badge'; +import { IgxChipComponent } from 'igniteui-angular'; + + +defineComponents( + IgcRatingComponent +); + +@Component({ + selector: 'app-grid-lite-overview', + templateUrl: './grid-lite-overview.component.html', + styleUrls: ['./grid-lite-overview.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxAvatarComponent, + IgxGridLiteCellTemplateDirective, + IgxCheckboxComponent, + IgxSelectComponent, + IgxBadgeModule, + IgxBadgeComponent, + IgxChipComponent + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteOverviewComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: User[] = []; + + ngOnInit() { + this.data = this.dataService.generateUsers(1000); + } + + public getDepartmentBadgeVariant = (status: string): string => { + switch (status) { + case "Engineering": + return "primary"; + case "Marketing": + return "warning"; + case "Sales": + return "error"; + case "Finance": + return "success"; + default: + return "primary"; + } + }; + + public getEmploymentTypeOutline = (type: string): string => { + switch (type) { + case 'Full-Time': return 'outline-success'; + case 'Part-Time': return 'outline-warning'; + case 'Contract': return 'outline-primary'; + default: return 'outline-primary'; + } + }; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + {{ value }} + + + + + + + + + + + + {{ value }} + + + + + + + + {{ value | date:'medium' }} + + + + +
+``` +```scss +:host { + contain: strict; + min-height: 400px; + --ig-size: 1; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 75vh; +} + +.avatar-name { + display: flex; + align-items: center; + gap: 8px; +} + +.avatar-name span { + font-weight: 500; + font-size: 0.95rem; +} + +igx-badge { + --size: 28px; + font-size: calc(var(--size) / 2.2); + line-height: normal; + font-weight: 500; + text-transform: capitalize; +} + +.badge-cell { + display: flex; + justify-content: center; + align-items: center; + padding: 2px 6px; +} + +igc-rating { + display: block; + margin: 0 auto; +} + +.success { + --background: #4caf50; + --hover-background: #45a049; + --focus-background: #388e3c; +} + +.warning { + --background: #ffb74d; + --hover-background: #ffa726; + --focus-background: #fb8c00; +} + +.primary { + --background: #64b5f6; + --hover-background: #42a5f5; + --focus-background: #1e88e5; +} + +.error { + --background: #e57373; + --hover-background: #ef5350; + --focus-background: #f44336; +} + +.outline-success { + --background: transparent; + --border-color: #4caf50; +} + +.outline-warning { + --background: transparent; + --border-color: #ffb74d; +} + +.outline-primary { + --background: transparent; + --border-color: #64b5f6; +} +``` + +## Installation and Setup +To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. IgxGridLiteComponent provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI. + +```shell +npm install igniteui-grid-lite +``` + +Before starting the application, make sure to import and pass the custom element schema as shown below. + +```typescript +// app.component.ts + +import { Component } from '@angular/core'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite'; + +@Component({ + ... + imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent], + template: ` +
+ + + + + +
+ ` +}) +export class AppComponent { + products: Products[] = [...]; +} +``` + +## Features + +### Performance Built In + +When you use our Angular data grid for free, you are enabled to implement row-level virtualization. This allows you to render unlimited amounts of data with smooth scrolling. + +### Automatic Column Types + +Column types are automatically generated base on your data source with built-in filtering based on column type. + +### Custom Column Templates + +With our Angular data grid open-source control you can also deliver any type of UX with column templates. Anything you imagine can render in a grid column! + +### Interactive Features + +All the core interactive features your users expect, like column filtering, column hiding, column resizing, columns sorting, and more! + +### Beautiful UX & Branding + +This free Angular data grid (Grid Lite) comes with built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more. + +### Rich Keyboard Navigation + +Full Excel-style keyboard navigation gives user the experience they expect with high-performance keyboard navigation. + +## Is Grid Lite a Free & Open-Source Angular Data Grid? + +Yes. Ignite UI Grid Lite is a free, open-source Angular data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible. + +- MIT-licensed + +- Free for commercial use + +- Community-driven development + +- No feature gating + +However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free Angular data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster. + +Angular supports custom elements, so you can use Grid Lite with ease. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-sorting.md new file mode 100644 index 000000000..d5b301029 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-sorting.md @@ -0,0 +1,609 @@ +--- +title: Angular Grid Lite Sorting | Ignite UI for Angular | MIT license +_description: Try Angular Grid Lite with sort operations, sort customization, and remote sorting for Angular Grid Lite. See demos and examples and build your next app. +_keywords: sorting, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Sorting +--- + +# Sort Operations + +The Grid Lite supports sorting operations on its data source. Data sorting is controlled on per-column level, allowing you to have sortable and non-sortable columns, while the grid itself controls certain sort behaviors. By default, sorting on a column is disabled unless explicitly configured with the `sortable` property of the column. + +```html + +``` + +You can also control whether the sort operations for string columns should be case sensitive by using the `sortingCaseSensitive` property. + +```html + +``` + +For custom comparison logic, set the `sortConfiguration` property with a `comparer` function: + +```typescript +column.sortable = true; +column.sortConfiguration = { + /** + * Custom comparer function which will be used for sort operations for this column. + * In the following sample, we compare the `name` values based on their length. + */ + comparer: (a, b) => a.length - b.length +}; +``` + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-grid-lite-sorting-simple', + templateUrl: './grid-lite-sorting-simple.component.html', + styleUrls: ['./grid-lite-sorting-simple.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective +], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteSortingSimpleComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + + ngOnInit() { + this.data = this.dataService.generateProducts(100); + } + + protected nameComparer = (a: string, b: string) => a.length - b.length; +} +``` +```html +
+ + + + + + + + + + + +
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; +} +``` + +## Single and Multi-Sorting + +The grid supports both single and multi-column sorting. Multi-column is enabled by default and can be configured through the `sortingOptions` property of the grid. The `mode` property accepts `'single'` or `'multiple'` as values. + +```typescript +grid.sortingOptions = { mode: 'single' }; +``` + +>[!NOTE] +>The single/multi-column sorting behavior controls how end-users interact with the Grid lite. Sorting through the API with multiple expression will still work when single sorting is enabled. + +### Tri-State Sorting + +The Grid Lite component tri-state sorting and it is always enabled. End-users will cycle through the following direction states when clicking on sortable column headers: + +```text +ascending -> descending -> none -> ascending +``` + +where `none` is the initial state of the data, that is to say with no sorting applied by the grid. + +### Sorting Indicators + +When multi-column sort is enabled, the column headers will display a sorting indicator, which is a number representing the order in which the sorting operations were applied. + +The following sample shows the grid `sortingOptions` property and how it controls the grid sorting behavior. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ViewChild, ElementRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcRatingComponent, IgcSwitchComponent } from 'igniteui-webcomponents'; +import { IgcGridLite } from 'igniteui-grid-lite'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; + +defineComponents(IgcRatingComponent, IgcSwitchComponent); + +@Component({ + selector: 'app-grid-lite-sorting-grid-config', + templateUrl: './grid-lite-sorting-grid-config.component.html', + styleUrls: ['./grid-lite-sorting-grid-config.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteSortingGridConfigComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + @ViewChild('gridLite', { static: true }) gridLite!: ElementRef; + + public data: ProductInfo[] = []; + public sortingOptions: any = { + mode: 'multiple' + }; + + ngOnInit() { + this.data = this.dataService.generateProducts(100); + } + + protected updateConfig(event: any) { + this.sortingOptions = { ...this.sortingOptions, mode: event.checked ? 'multiple' : 'single' }; + this.gridLite.nativeElement.clearSort(); + } +} +``` +```html +
+
+ + Enable multi-sort + +
+ + + + + + + + + + + + +
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +.config-panel { + margin: 1rem 0; +} + +igx-grid-lite { + height: 510px; +} +``` + +## Sort model + +The building block for sort operations in the Grid Lite component is the `SortingExpression` which has the following properties: + +```typescript +type SortingExpression = { + /** + * The `key` of the target column for the sort operation. + */ + key: keyof T; + /** + * The sort direction for the operation. + */ + direction: 'ascending' | 'descending' | 'none'; + /** + * Should the operation be case sensitive. Applies to the default string type. + * If not explicitly passed, it will use the value from the target column sort configuration if applicable. + */ + caseSensitive?: boolean; + /** + * Specifies a custom comparer function for the operation. + * Will use the value from the target column sort configuration if applicable. + */ + comparer?: SortComparer; +}; +``` + +The grid consumes these expressions for its sort API methods and configuration and produces them for events and its sorting state when +an end-user interacts with the component. See below for additional information. + +## Sort API + +The Grid Lite component exposes two main approaches for applying sort operations from its API. Either through the `sort()`/`clearSort()` methods or through the `sortingExpressions` property. + +The `sort()` method accepts either a single expression or an array of sort expression and then sorts the grid data based on those expressions. + +```typescript +// Single +grid.sort({ key: 'price', direction: 'descending' }); + +// Multiple +grid.sort([ + { key: 'price', direction: 'descending' }, + { key: 'name', direction: 'descending' }, +]); +``` + +The `clearSort()` method, as the name implies, clears the sort state of a single column or the whole grid component, depending +on the passed arguments. + +```typescript +// Clear the sort state for the `price` column. +grid.clearSort('price'); + +// Clear the sort state of the grid. +grid.clearSort(); +``` + +### Initial Sorting State + +The `sortingExpressions` property is very similar in behavior to the `sort()` method call. It exposes a declarative way to control +sort state in the grid, but the most useful property is the ability to set initial sort state when the Grid Lite is first rendered. + +For example: + +```typescript +protected sortState: IgxGridLiteSortingExpression[] = [ + { key: 'price', direction: 'descending' }, + { key: 'name', direction: 'ascending', caseSensitive: true }, +]; +``` + +```html + +``` + +It can be used to get the current sort state of the component and do additional processing depending on another state in your application. + +```typescript +const state = grid.sortingExpressions; +// Save the current sort state +saveUserSortState(state); +``` + +## Events + +When a sorting operation is performed through the UI, the component emits a custom `sorting` event. The `detail` property is the sort expression which will be applied by the Grid Lite. The event is cancellable and if cancelled will stop the current sort operation. + +After the grid applies the new sorting state, a `sorted` event is emitted. It contains the expression which was used in the last sort operation and it is not cancellable. + +```html + +``` + +```typescript +onSorting(event: IgxSortingEvent) { ... } +onSorted(event: IgxSortedEvent) { ... } +``` + +In the following sample, when you try to sort the **Name** and **Rating** columns, the operation will be cancelled. Watch the event log below to see it in action. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective +} from 'igniteui-angular/grids/lite'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-grid-lite-sorting-events', + templateUrl: './grid-lite-sorting-events.component.html', + styleUrls: ['./grid-lite-sorting-events.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteSortingEventsComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + public log: string[] = []; + + ngOnInit() { + this.data = this.dataService.generateProducts(100); + } + + private get timeStamp(): string { + return `[${new Date().toLocaleTimeString()}]`; + } + + private updateLog(message: string) { + if (this.log.length > 10) { + this.log.shift(); + } + this.log = [...this.log, message]; + } + + handleSorting(event: any) { + const { detail, type } = event; + const allowedColumns = ['price', 'total', 'sold']; + + if (!allowedColumns.includes(detail.key)) { + event.preventDefault(); + this.updateLog( + `${this.timeStamp} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'` + ); + } else { + this.updateLog( + `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}` + ); + } + } + + handleSorted(event: any) { + const { detail, type } = event; + this.updateLog( + `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}` + ); + } +} +``` +```html +
+ + + + + + + + + + + + +
+ @for (entry of log; track $index) { +

{{ entry }}

+ } +
+
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igx-grid-lite { + min-height: 65vh; +} + +.log { + margin-top: 0.5rem; + border: 1px solid #ccc; + padding: 1rem; + min-height: 1rem; + font-size: 0.75rem; + max-height: 5rem; + overflow-y: auto; +} +``` + +## Remote Sort Operations + +In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior. + +Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object. + +```typescript +export type DataPipelineParams = { + /** + * The current data state of the grid. + */ + data: T[]; + /** + * The grid component itself. + */ + grid: GridLite; + /** + * The type of data operation being performed. + */ + type: 'sort' | 'filter'; +}; +``` + +```typescript +grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] | Promise }; +``` + +The custom callback can be async as the grid will wait for it until it resolves. + +The following example mocks remote sorting operation, reflecting the REST endpoint generated based on the sort state of the component. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteDataPipelineConfiguration } from 'igniteui-angular/grids/lite'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-grid-lite-sorting-pipeline', + templateUrl: './grid-lite-sorting-pipeline.component.html', + styleUrls: ['./grid-lite-sorting-pipeline.component.scss'], + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, + IgxCircularProgressBarComponent + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridLiteSortingPipelineComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + public dataPipelineConfiguration: IgxGridLiteDataPipelineConfiguration; + public inOperation = false; + public queryString = ''; + + ngOnInit() { + this.data = this.dataService.generateProducts(100); + + // Setup the data pipeline for sorting + this.dataPipelineConfiguration = { + sort: async ({ data, grid }: any) => { + // Show the spinner + this.inOperation = true; + + // Build the query string for demonstration + this.queryString = grid.sortingExpressions.length + ? this.buildUri(grid.sortingExpressions) + : ''; + + // Simulate async operation + await new Promise(resolve => setTimeout(resolve, 250)); + + // Hide the spinner + this.inOperation = false; + + // Return data after a tiny defer so templates like initialize properly + return new Promise(resolve => setTimeout(() => resolve(data), 0)); + } + }; + } + + private buildUri(state: any[]): string { + const uri: string[] = []; + for (const expr of state) { + if (expr.direction === 'none') { + continue; + } + uri.push( + expr.direction === 'ascending' + ? `asc(${expr.key})` + : `desc(${expr.key})` + ); + } + return `GET: /data?sort_by=${uri.join(',')}`; + } +} +``` +```html +
+
+
Generated request
+

{{ queryString }}

+
+
+ @if (inOperation) { + + + } + + + + + + + + + + + + +
+
+``` +```scss +:host { + contain: content; + --ig-size: 2; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +.grid-section { + position: relative; +} + +p { + border: 1px solid #ccc; + padding: 1rem; + min-height: 1rem; + font-size: 0.75rem; +} + +igx-grid-lite { + min-height: 65vh; +} +``` + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Filtering](filtering.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-theming.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-theming.md new file mode 100644 index 000000000..658f55ef8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-lite-theming.md @@ -0,0 +1,208 @@ +--- +title: Angular Grid Lite Theming | Ignite UI for Angular | MIT license +_description: Styling the Grid Lite in Ignite UI for Angular happens easily and quickly. See demos and examples! Try our open-source components and build your next app. +_keywords: styling, theming, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +_license: MIT +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_tocName: Styling & Theming +--- + +# Styles and Themes + +The Grid Lite comes with four distinct themes - Bootstrap, Material, Fluent and Indigo. The grid and its UI components have the themes baked in, but the component requires a global stylesheet for palettes, typography and other global configurations to work. + +## Loading a Base Themes + +Depending on your project type, setup and build configuration the method of how to include one of the files below will vary. If you are using a framework/build tool refer to its documentation on how to add external styles to your output bundle. + +As a rule of thumb, you can always copy the `themes` folder to your assets directory and link the theme from there in your index.html. + +```html + + + +--> + +## Creating Custom Themes + +Aside from the default themes shipped with the `igniteui-grid-lite` package, you can also create and modify your own to match your project identity and branding. + +--- + +Refer to the Ignite UI theming package wiki +for documentation and usage of both the SCSS and CSS interfaces. + +--- + +```scss +@use 'node_modules/igniteui-theming' as *; + +// Our dark theme +$my_dark_palette: palette( + $primary: #dab785, + $secondary: #d5896f, + $surface: #031d44, + $gray: #04395e, +); + +// Our light theme +$my-light-palette: palette( + $primary: #c1292e, + $secondary: #f1d302, + $surface: #fdfffc, + $gray: #235789, +); + +.custom-light { + @include palette($my_light_palette); + @include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale); +} + +.custom-dark { + @include palette($my_dark_palette); + @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale); +} +``` + +Here is an example showcasing the custom theming from above. + +```typescript +import { Component, OnInit, inject, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents'; +import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; + +defineComponents(IgcSwitchComponent); + +@Component({ + selector: 'app-grid-lite-styling-custom', + templateUrl: './grid-lite-styling-custom.component.html', + styleUrls: ['./grid-lite-styling-custom.component.scss'], + encapsulation: ViewEncapsulation.None, + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxSwitchComponent + ] +}) +export class GridLiteStylingCustomComponent implements OnInit { + private dataService = inject(GridLiteDataService); + + public data: ProductInfo[] = []; + public theme: 'dark' | 'light' = 'dark'; + + ngOnInit() { + this.data = this.dataService.generateProducts(50); + } + + switchTheme() { + this.theme = this.theme === 'dark' ? 'light' : 'dark'; + } +} +``` +```html +
+
+ + Switch to {{ theme === 'dark' ? 'light' : 'dark' }} theme + +
+ + + + + + + + +
+``` +```scss +@use "igniteui-angular/theming" as *; + +:host { + --ig-size: 2; + + contain: content; +} + +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +.theme-switcher { + padding: 1rem; +} + +igc-grid-lite { + min-height: rem(400px); +} + +$my-light-palette: palette( + $primary: #c1292e, + $secondary: #f1d302, + $surface: #fdfffc, + $gray: #235789, +); + +$my_dark_palette: palette( + $primary: #ddd020, + $secondary: #d5896f, + $surface: #031d44, + $gray: #04395e, +); + +.custom-light { + @include palette($my_light_palette); + @include typography('"Roboto", sans-serif', $bootstrap-type-scale); +} + +.custom-dark { + @include palette($my_dark_palette); + @include typography( + '"Merriweather Sans", sans-serif', + $bootstrap-type-scale + ); +} +``` + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/igniteui-grid-lite) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-live-data.md new file mode 100644 index 000000000..d9b03c1cf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-live-data.md @@ -0,0 +1,752 @@ +--- +_tocName: Live Data / Real-Time +_premium: true +--- +--- title: Live Data Updates in Angular Data Grid - Ignite UI for Angular _description: Check out how the Ignite UI for Angular Data Grid can handle thousands of updates per second, while staying responsive for user interactions. _keywords: angular data grid, angular grid updates, angular live data _license: commercial --- # Angular Grid Live Data Updates The Grid component is able to handle thousands of updates per second, while staying responsive for user interactions. ## Angular Live-data Update Example The sample below demonstrates the Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the [Line Chart](../charts/types/line-chart.md) to experience the powerful charting capabilities of Ignite UI for Angular. The `Chart` button will show `Category Prices per Region` data for the selected rows and the `Chart` column button will show the same for the current row. ## Data binding and updates A service provides data to the component when the page loads, and when the slider controller is used to fetch a certain number of records. While in a real scenario updated data would be consumed from the service, here data is updated in code. This is done to keep the demo simple and focus on its main goal - demonstrate the grid performance. ```html ``` ```typescript public ngOnInit() { + this.localService.getData(this.volume); + this.volumeSlider.onValueChange.subscribe(x => this.localService.getData(this.volume); + this.localService.records.subscribe(x => { this.data = x; }); } ``` Angular pipes are used internally to update the grid view. A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [`complex data objects`](grid.md#complex-data-binding), because the Angular pure pipe will not detect a change in a nested property. To resolve the situation, provide a new object reference for the data object containing the property. Example: ```html + ``` ```typescript private updateData(data: IRecord[]) { + const newData = [] + for (const rowData of data) { + rowData.price = { usd: getUSD(), eur: getEUR() }; + newData.push({...rowData}); + } + this.grid.data = newData; } ``` ## Templates Updating the view works the same way for columns with a default template and for columns with a custom template. However, it is recommended to keep custom templates relatively simple. As number of elements in the template grows, negative performance impact rises as well. ## Live-data feed with Dock Manager and igxGrid Components The purpose of this demo is to showcase a financial screen board with Real-time data stream using a [SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr) hub back-end. As you can see the igxGrid component handles with ease the high-frequency updates from the server. The code for the ASP.NET Core application using SignalR could be found in this [public GitHub repository](https://github.com/IgniteUI/finjs-web-api). ```typescript +/* eslint-disable max-len */ +import { AfterViewInit, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core'; +import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager'; +import { Subject } from 'rxjs'; +import { first, takeUntil } from 'rxjs/operators'; +import { FloatingPanesService } from '../services/floating-panes.service'; +import { SignalRService } from '../services/signal-r.service'; +import { DockSlotComponent, GridHostDirective } from './dock-slot.component'; +import { FormsModule } from '@angular/forms'; +import { AsyncPipe, CurrencyPipe } from '@angular/common'; +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [SignalRService, FloatingPanesService], + selector: 'app-finjs-dock-manager', + templateUrl: './grid-finjs-dock-manager.component.html', + styleUrls: ['./grid-finjs-dock-manager.component.scss'], + imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck { + dataService = inject(SignalRService); + private paneService = inject(FloatingPanesService); + private cdr = inject(ChangeDetectorRef); + private componentFactoryResolver = inject(ComponentFactoryResolver); + private elementRef = inject(ElementRef); + private renderer = inject(Renderer2); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + @ViewChild('grid2', { static: true }) public grid2: IgxGridComponent; + @ViewChild(GridHostDirective) public host: GridHostDirective; + @ViewChild('dock', { read: ElementRef }) public dockManager: ElementRef; + @ViewChild('priceTemplate', { read: TemplateRef }) + public priceTemplate: TemplateRef; + @ViewChild(IgxSelectComponent) public select: IgxSelectComponent; + @ViewChild('freq', { read: IgxSelectComponent }) public selectFrequency: IgxSelectComponent; + @ViewChild(IgxOverlayOutletDirective) outlet: IgxOverlayOutletDirective; + + public isDarkTheme = true; + + public frequencyItems: number[] = [300, 600, 900]; + public frequency = this.frequencyItems[1]; + public dataVolumeItems: number[] = [100, 500, 1000, 5000, 10000]; + public dataVolume: number = this.dataVolumeItems[1]; + public isLoading = true; + public data: any; + public liveData = true; + public columnFormat = { digitsInfo: '1.3-3'}; + public columnFormatChangeP = { digitsInfo: '2.3-3'}; + public slotCounter = 1; + public customOverlaySettings: OverlaySettings = { + positionStrategy: new ConnectedPositioningStrategy(), + scrollStrategy: new AbsoluteScrollStrategy() + }; + public freqOverlaySettings: OverlaySettings = { + positionStrategy: new ConnectedPositioningStrategy(), + scrollStrategy: new AbsoluteScrollStrategy() + }; + + public docLayout: IgcDockManagerLayout = { + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'actionPane', + header: 'Actions pane', + size: 20, + isPinned: false, + allowClose: false + }, + { + size: 50, + type: IgcDockManagerPaneType.contentPane, + contentId: 'gridStockPrices', + header: 'Stock Market Data', + allowClose: false + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + size: 50, + panes: [ + { + type: IgcDockManagerPaneType.documentHost, + size: 50, + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'forexMarket', + header: 'Market Data 1' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content4', + header: 'Market Data 2' + } + ] + } + ] + }}, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'etfStockPrices', + header: 'Market Data 3', + size: 50, + allowClose: false + } + ] + } + ] + }, + floatingPanes: [] + }; + + public columns: { field: string, + width: string, + sortable: boolean, + filterable: boolean, + type: GridColumnDataType, + groupable?: boolean, + cellClasses?: string, + bodyTemplate?: string } [] = [ + { field: 'buy', width: '110px', sortable: false, filterable: false, type: 'currency' }, + { field: 'sell', width: '110px', sortable: false, filterable: false, type: 'currency' }, + { field: 'openPrice', width: '120px', sortable: true, filterable: true, type: 'currency'}, + { field: 'lastUpdated', width: '120px', sortable: true, filterable: true, type: 'date'}, + { field: 'spread', width: '110px', sortable: false, filterable: false, type: 'number' }, + { field: 'volume', width: '110px', sortable: true, filterable: false, type: 'number' }, + { field: 'settlement', width: '100px', sortable: true, filterable: true, type: 'string', groupable: true }, + { field: 'country', width: '100px', sortable: true, filterable: true, type: 'string'}, + { field: 'highD', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'lowD', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'highY', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'lowY', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'startY', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'indGrou', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'indSect', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'indSubg', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'secType', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'issuerN', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'moodys', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'fitch', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'dbrs', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'collatT', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'curncy', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'security', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'sector', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'cusip', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'ticker', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'cpn', width: '136px', sortable: false, filterable: false, type: 'string'} + ]; + + private destroy$ = new Subject(); + + public ngOnInit() { + this.dataService.startConnection(this.frequency, this.dataVolume, true, false); + this.data = this.dataService.data; + this.data.pipe(takeUntil(this.destroy$)).subscribe((data) => { + if (data.length !== 0) { + this.isLoading = false; + }; + }); + } + + public ngOnDestroy() { + this.dataService.stopLiveData(); + this.destroy$.next(true); + this.destroy$.complete(); + } + + public ngDoCheck() { + if (this.isDarkTheme) { + this.renderer.removeClass(this.elementRef.nativeElement, 'light-theme'); + this.renderer.addClass(this.elementRef.nativeElement, 'dark-theme'); + } + else { + this.renderer.removeClass(this.elementRef.nativeElement, 'dark-theme'); + this.renderer.addClass(this.elementRef.nativeElement, 'light-theme'); + } + } + + public ngAfterViewInit() { + // This 500ms timeout is used as a workaround for StackBlitz ExpressionChangedAfterItHasBeenChecked Error + setTimeout(() => { + const x = (this.dockManager.nativeElement.getBoundingClientRect().width / 3); + const y = (this.dockManager.nativeElement.getBoundingClientRect().height / 3); + + this.paneService.initialPanePosition = { x, y }; + this.grid2.selectColumns(['price', 'change', 'changeP']); + this.customOverlaySettings.target = this.select.inputGroup.element.nativeElement; + this.customOverlaySettings.outlet = this.outlet; + this.freqOverlaySettings.target = this.selectFrequency.inputGroup.element.nativeElement; + this.freqOverlaySettings.outlet = this.outlet; + this.grid1.groupingExpressions = [{ + dir: SortingDirection.Desc, + fieldName: 'category', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }, + { + dir: SortingDirection.Desc, + fieldName: 'type', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }, + { + dir: SortingDirection.Desc, + fieldName: 'settlement', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }]; + }, 500); + } + + public paramsChanged() { + this.dataService.hasRemoteConnection ? this.dataService.broadcastParams(this.frequency, this.dataVolume, true, false) : + this.dataService.startConnection(this.frequency, this.dataVolume, true, false); + this.data = this.dataService.data; + } + + public stopFeed() { + this.dataService.stopLiveData(); + } + + public streamData(event) { + event.checked ? this.paramsChanged() : this.stopFeed(); + this.liveData = event.checked; + } + + /* eslint-disable @typescript-eslint/member-ordering */ + /** Grid CellStyles and CellClasses */ + private negative = (rowData: any): boolean => rowData['changeP'] < 0; + private positive = (rowData: any): boolean => rowData['changeP'] > 0; + private changeNegative = (rowData: any): boolean => rowData['changeP'] < 0 && rowData['changeP'] > -1; + private changePositive = (rowData: any): boolean => rowData['changeP'] > 0 && rowData['changeP'] < 1; + private strongPositive = (rowData: any): boolean => rowData['changeP'] >= 1; + private strongNegative = (rowData: any, key: string): boolean => rowData['changeP'] <= -1; + + public trends = { + changeNeg: this.changeNegative, + changePos: this.changePositive, + negative: this.negative, + positive: this.positive, + strongNegative: this.strongNegative, + strongPositive: this.strongPositive + }; + + public trendsChange = { + changeNeg2: this.changeNegative, + changePos2: this.changePositive, + strongNegative2: this.strongNegative, + strongPositive2: this.strongPositive + }; + + public createGrid() { + const id: string = 'slot-' + this.slotCounter++; + const splitPane: IgcSplitPane = { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + floatingWidth: 550, + floatingHeight: 350, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + header: id, + contentId: id + } + ] + }; + this.paneService.appendPane(splitPane); + this.dockManager.nativeElement.layout.floatingPanes.push(splitPane); + this.docLayout = { ...this.dockManager.nativeElement.layout }; + this.cdr.detectChanges(); + + // Create Dock Slot Component + const dockSlotComponentFactory = this.componentFactoryResolver.resolveComponentFactory(DockSlotComponent); + const dockSlotComponent = this.host.viewContainerRef.createComponent(dockSlotComponentFactory); + dockSlotComponent.instance.id = id; + dockSlotComponent.instance.viewInit.pipe(first()).subscribe(() => { + const gridViewContainerRef = dockSlotComponent.instance.gridHost.viewContainerRef; + this.loadGridComponent(gridViewContainerRef, dockSlotComponent.instance.destroy$); + }); + } + + public loadGridComponent(viewContainerRef: ViewContainerRef, destructor: Subject) { + const componentFactory = this.componentFactoryResolver.resolveComponentFactory(IgxGridComponent); + viewContainerRef.clear(); + + const componentRef = viewContainerRef.createComponent(componentFactory); + const grid = (componentRef.instance as IgxGridComponent); + grid.autoGenerate = true; + this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d); + grid.columnInit.pipe(takeUntil(destructor)).subscribe((col: IgxColumnComponent) => { + if (col.field === 'price') { + col.cellClasses = this.trends; + col.bodyTemplate = this.priceTemplate; + } + if (col.field === 'change' || col.field === 'changeP') { + col.cellClasses = this.trendsChange; + } + }); + grid.columnSelection = 'multiple'; + grid.cellSelection = 'none'; + + // Use detectChanges because of ExpressionChangedAfterItHasBeenChecked Error when creating a dynamic pane + this.cdr.detectChanges(); + } + + /* eslint-enable @typescript-eslint/member-ordering */ +} +``` +```html + +
+
+ Change theme:
Dark Mode +
+
+ Start/Stop live data: {{ liveData === + true ? 'Streaming' : 'Not Streaming' }} +
+
+ + + + + view_list + + @for (item of dataVolumeItems; track item) { + + {{item}} + + } + +
+
+ + + + + cell_wifi + + @for (item of frequencyItems; track item) { + + {{item}} + + } + +
+
Add Floating Pane
+
+
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+ + + +
+``` +```scss +@use 'igniteui-dockmanager/dist/collection/styles/igc.themes'; +@use '../../variables' as *; + +.actionItem { + margin-block-end: rem(20px); +} + +.finjs-icons { + display: flex; + align-items: center; + + igx-icon { + font-size: rem(16px); + width: rem(16px); + height: rem(16px); + margin-inline-start: rem(4px); + } +} + +.changePos, +.changeNeg, +.strongPositive, +.strongNegative { + color: contrast-color(null, 'gray', 500) !important; + + .igx-grid__td-text { + padding: rem(2px) rem(5px); + } +} + +.positive { + color: color(null, 'success', 500) !important; +} + +.positive.strongPositive { + .igx-grid__td-text { + color: color(null, 'success', 500, .8) !important; + } +} + +.negative { + color: color(null, 'error', 500) !important; +} + +.negative.strongNegative { + .igx-grid__td-text { + color: color(null, 'success', 500, .8) !important; + } +} + +// NORMAL +// positive +.changePos { + .igx-grid__td-text { + background: color(null, 'success', 500, .5); + } +} + +.changePos1 { + background: color(null, 'success', 500, .5); + color: contrast-color(null, 'gray', 900); +} + +.changePos2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'success', 500, .5); + padding-inline-end: rem(15px); + } +} + +// negative +.changeNeg { + .igx-grid__td-text { + background: color(null, 'error', 500, .5); + } +} + +.changeNeg1 { + background: color(null, 'error', 500, .5); + color: contrast-color(null, 'gray', 900); +} + +.changeNeg2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'error', 500, .5); + padding-inline-end: rem(9px); + } +} + +// STRONG +// positive +.strongPositive { + .igx-grid__td-text { + background: color(null, 'success', 500); + } +} + +.strongPositive1 { + background: color(null, 'success', 500); + color: contrast-color(null, 'gray', 900); +} + +.strongPositive2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'success', 500); + padding-inline-end: rem(15px); + } +} + +// negative +.strongNegative { + .igx-grid__td-text { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); + } +} + +.strongNegative1 { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); +} + +.strongNegative2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'error', 500); + padding-inline-end: rem(9px); + } +} + +igx-grid { + --ig-size: var(--ig-size-small); + + .grid-area { + margin-block-start: 1rem; + overflow-y: hidden; + overflow-x: hidden; + width: 100%; + } + + // selected + .igx-grid__td--column-selected.changePos1, + .igx-grid__td--column-selected.changePos2, + .igx-grid__td--column-selected.changePos { + background-color: color(null, 'success', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900);; + } + } + + .igx-grid__td--column-selected.changeNeg1, + .igx-grid__td--column-selected.changeNeg2, + .igx-grid__td--column-selected.changeNeg { + background-color: color(null, 'error', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + // selected + .igx-grid__td--column-selected.strongPositive1, + .igx-grid__td--column-selected.strongPositive2, + .igx-grid__td--column-selected.strongPositive { + background-color: color(null, 'success', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .igx-grid__td--column-selected.strongNegative1, + .igx-grid__td--column-selected.strongNegative2, + .igx-grid__td--column-selected.strongNegative { + background-color: color(null, 'error', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } +} + +igx-select { + --ig-size: var(--ig-size-small); +} +``` ### Start the hub connection The signal-r.service handles the connectivity and updates of the exposed manageable parameters _frequency_, _volume_ and _live-update state toggle_ (Start/Stop). ```ts this.hubConnection = new signalR.HubConnectionBuilder() + .configureLogging(signalR.LogLevel.Trace) + .withUrl('https://www.infragistics.com/angular-apis/webapi/streamHub') + .build(); + this.hubConnection + .start() + .then(() => { + this.hasRemoteConnection = true; + this.registerSignalEvents(); + this.broadcastParams(interval, volume, live, updateAll); + }) + .catch(() => {}); ``` Based on the specified frequency a total of 30 new updates will be received by the Grids from the server. A specific cellStyle classes are applied to the three columns that are handling the changes (Price, Change and Change in percent). ### Update frequency and data volume By using the Action panel on the left, you can manage the frequency of the data feed and the volume of the requested data. All grids use the same data source. Feel free to use the other action elements to _stop the data feed_, change the _application theme_ or add _dynamically a DockSlot container_ with a igxGrid. We use the 'updateparameters' method to request a new set of data with certain frequency. This method is part of the SignalR [stream hub implementation](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Models/StreamHub.cs#L18). ```ts this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll) + .then(() => console.log('requestLiveData', volume)) + .catch(err => { + console.error(err); + }); ``` ### Dynamically create DockSlot and Grid components By using the [ComponentFactoryResolver](https://angular.io/api/core/ComponentFactoryResolver) we are able to create DockSlot and Grid components on the fly. ### DockManager component Take leverage of the [Dock Manager](../dock-manager.md) WebComponent and build your own webview by using the docket or floating panels. In order to add a new floating panel, go ahead and open the Action pane on the right and click the 'Add floating pane' button. Drag and drop the new pane at the desired location. ## API References - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxHierarchicalGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridrow.html) - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) ## Additional Resources
- [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md new file mode 100644 index 000000000..436b4322b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-master-detail.md @@ -0,0 +1,338 @@ +--- +title: Angular Master-Detail Grid - Ignite UI for Angular +_description: Define expandable detail view template for data in rows with Ignite UI Angular Grid. Useful for displaying master-detail style data in a hierarchical structure. +_keywords: master detail, igniteui for angular, infragistics +_license: commercial +_tocName: Master-Detail Grid +_premium: true +--- + +# Angular Master-Detail Grid + +The `igxGrid` component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. When specified each record acts as a master, which upon expansion shows a customizable details template with contextual data for the current record. + +This mode is useful when you need to display master-detail style data in a hierarchical structure. + +## Angular Grid Master-Detail Example + + +```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxGridDetailTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; +import { employeesData } from '../../data/employeesData'; +import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-master-detail', + styleUrls: ['./grid-master-detail.component.scss'], + templateUrl: 'grid-master-detail.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] +}) + +export class GridMasterDetailSampleComponent { + @ViewChild('legend', { static: true }) + public legend: IgxLegendComponent; + + public data = []; + public include = ['date', 'estimated', 'actual']; + constructor() { + this.data = employeesData; + } + + public getHeight(selectedIndex) { + switch (selectedIndex) { + case 0: return 250; + case 1: return 320; + case 2: return 400; + default: return 250; + } + } + + public formatPieLabel = (args) => args.item.Value + ' ' + args.item.Label; + + public formatDateLabel(item: any): string { + return item.date.toLocaleDateString(undefined, { month: 'short' }); + } + + public formatValue(val: any): string { + return val.toLocaleString('en-us', { maximumFractionDigits: 2 }); + } + public getPieData(dataItem) { + return [ + { Label: 'Won', Value: dataItem.deals_won }, + { Label: 'Lost', Value: dataItem.deals_lost }, + { Label: 'Pending', Value: dataItem.deals_pending }]; + } + + public getChartData(dataItem) { + const year: number = new Date().getFullYear(); + const sales: any[] = []; + for (let i = 0; i < 12; i++) { + const value = this.getRandomNumber(2000, 10000); + sales.push({ + estimated: value + this.getRandomNumber(-2000, 1000), + actual: value, date: new Date(year, i, 1) + }); + } + dataItem.chartData = sales; + return dataItem.chartData; + } + + public gridData(dataItem) { + const detailsData = []; + let won = dataItem.deals_won; + let lost = dataItem.deals_lost; + let pending = dataItem.deals_pending; + for (let j = 0; j < 3; j++) { + detailsData.push({ + Q: 'Q' + (j + 1), + Won: this.getRandomNumber(0, won), + Lost: this.getRandomNumber(0, lost), + Pending: this.getRandomNumber(0, pending) + }); + won -= detailsData[j].Won; + lost -= detailsData[j].Lost; + pending -= detailsData[j].Pending; + } + detailsData.push({ + Q: 'Q4', + Won: won, + Lost: lost, + Pending: pending + }); + dataItem.gridData = detailsData; + return dataItem.gridData; + } + + public columnInit(event: IgxColumnComponent) { + if (event.field === 'Q') { + event.width = '50px'; + event.header = ' '; + } + } + + public getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } +} +``` +```html +
+ + + + + + + +
+ + + + Details + + +
+
+ +
{{dataItem.name}}
+
+ +
+
+
Country: {{dataItem.country}} +
+
City: {{dataItem.city}} +
+
Street: {{dataItem.street}} +
+
Work + Phone: {{dataItem.work_phone}}
+
Mobile + Phone: {{dataItem.mobile_phone}}
+
+
+
+ + + + + Deals + + +
+ + + + + +
+ + + + + Sales + + +
+ + + +
+ + + +
+ + +
+``` +```scss +@use '../../../variables' as *; + +.categoryStyle{ + font-weight: 600; +} + +.tabContent { + padding: rem(24px) rem(8px); + display: flex; + justify-content: flex-start; + margin: rem(10px); +} + +.avatarContainer { + display: flex; + align-items: center; + flex-direction: column; +} + +igx-divider { + margin: 0 rem(24px) !important; +} + +h6 { + margin-top: 1em; +} + +.details-chart { + width: rem(200px); + background: contrast-color($color: 'gray', $variant: 900); + background: contrast-color($color: 'gray', $variant: 900); + padding: rem(16px); + border-radius: rem(4px); + border: rem(1px) solid contrast-color($color: 'gray', $variant: 900); +} + +.tabContent igx-grid { + box-shadow: none; + border: rem(1px) solid contrast-color($color: 'gray', $variant: 900); +} + +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: rem(4px) rem(16px); +} +``` + + +## Configuration + +To configure the `igxGrid` to display in master-detail mode you need to specify a template inside the grid, marked with the `igxGridDetail` directive: + +```html + + + + + +``` + +Context of the template is the master record data, so that values from the master record can be displayed in the detail template. For example: + +```html + + +
+
{{dataItem.Category.CategoryName}}
+ {{dataItem.Category.Description}} +
+ + +``` + + +## API + +The expansion states can be controlled via the [`expansionStates`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#expansionStates) input of the `igxGrid`. States are stored in key-value pairs [row identifier, expansion state]. The property gets/sets the current expansion states and supports two-way binding: + +```html + + ... + +``` + +Additional API methods for controlling the expansion states are also exposed: + +- [`expandAll`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#expandAll) +- [`collapseAll`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#collapseAll) +- [`toggleRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#toggleRow) +- [`expandRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#expandRow) +- [`collapseRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#collapseRow) + +## Keyboard navigation + +- When focus is on a detail row: + + - `Arrow Up` - navigates one row up, focusing a cell from the previous row. + - `Arrow Down` - navigates one row down, focusing a cell from the next row. + - `Tab` - Allows focus to move to the next focusable element inside the template if there are focusable elements, otherwise moves to the next grid row. + - `Shift + Tab` - moves the focus to the previous row. + +- When focus is on a data row with expander: + - `Alt + Arrow Right/ Down` - expands the row. + - `Alt + Arrow Left/Down` - collapses the row. + +## Known Issues and Limitations + + +|Known Limitations| Description| +| --- | --- | +| Tab navigation inside the custom detail template may not update the master grid scroll position in case the next focused element is outside the visible view port.| Tab navigation inside the custom detail template is left up to the browser. | +| Details template will not be exported to Excel.| As the details template can contain any type of content we cannot export it to excel out of the box.| +| The search feature will not highlight elements from the details template. | | + + +
+ +## API References + +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) +- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) +- [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) +- [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) +- [IgxHierarchicalGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridrow.html) +- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md new file mode 100644 index 000000000..e79d9d1d0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-column-headers.md @@ -0,0 +1,189 @@ +--- +_tocName: Multi-column Headers +_premium: true +--- +--- title: Angular Multi-column Headers - Ignite UI for Angular _description: Start grouping column headers by placing them under a common hierarchical header with the help of Ignite UI for Angular grid and combine them into multi headers. _keywords: column headers, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Multi-column Headers Overview [`IgxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) supports `multi-column headers` which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid. ## Angular Grid Multi-column Headers Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-multi-column-headers', + styleUrls: ['multi-column-headers.scss'], + templateUrl: 'multi-column-headers.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxButtonDirective] +}) +export class GridMultiColumnHeadersComponent { + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data = DATA; + public selectionMode: GridSelectionMode = 'none'; + public pinGroup() { + const firstColumnGroup = this.grid.columnList.filter((c) => c.header === 'General Information')[0]; + firstColumnGroup.pinned = !firstColumnGroup.pinned; + } + + public hideGroup() { + const firstColumnGroup = this.grid.columnList.filter((c) => c.header === 'General Information')[0]; + firstColumnGroup.hidden = !firstColumnGroup.hidden; + } +} +``` The declaration of `Multi-column header` could be achieved by wrapping a set of columns into [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) component with [`header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#header) title passed. ```html + + + + + ``` For achieving `n-th` level of nested headers, the declaration above should be followed. So by nesting [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) leads to the desired result. ```html + + + + + + + ``` Every [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) supports [`moving`](column-moving.md), [`pinning`](column-pinning.md) and [`hiding`](column-hiding.md). > [!NOTE] > When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested `column groups` or `columns` is not allowed.
> Please note that when using Pinning with Multi-Column Headers, the entire Group gets pinned.
> Moving between `columns` and `column groups` is allowed only when they are at the same level in the hierarchy and both are in the same `group`.
> When `columns/column-groups` are not wrapped by current `group` which means they are **top level** `columns`, moving is allowed between whole visible columns. ```html + + + + + + ``` ## Multi-column Header Template Each of the column groups of the grid can be templated separately. The column group expects `ng-template` tag decorated with the `igxHeader` directive. The `ng-template` is provided with the column group object as a context. ```html ... + + {{ columnGroup.header | uppercase }} + + ... ... ``` If you want to re-use a single template for several column groups, you could set the [`headerTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#headertemplate) property of the column group like this: ```html + {{ columnGroup.header | uppercase }} ... + ... + ... ... ``` > [!NOTE] > If a column header is retemplated and the grid moving is enabled, you have to set the **draggable** attribute of corresponding column to **false** on the templated elements, so that you can handle any of the events that are applied! ```html + ``` The following sample demonstrates how to implement collapsible column groups using header templates. ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-multi-column-header-template', + styleUrls: ['multi-column-header-template.scss'], + templateUrl: 'multi-column-header-template.html', + imports: [IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class GridMultiColumnHeaderTemplateComponent { + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data: any[] = DATA; + public columnGroupStates = new Map(); + public selectionMode: GridSelectionMode = 'multiple'; + + constructor() { + for (const item of this.data) { + item.Location = `${item.Address}, ${item.City}, ${item.Country}`; + } + } + + public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) { + const columns = columnGroup.childColumns; + + if (columnGroup.header === 'General Information') { + const col = columns[1]; + col.hidden = !col.hidden; + } else if (columnGroup.header === 'Address Information') { + for (const col of columns) { + col.hidden = !col.hidden; + } + } + + this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup)); + } +} +``` ## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$header-background`, `$header-text-color`, `$header-border-width`, `$header-border-style` and `$header-border-color` parameters. ```scss $custom-theme: grid-theme( + $header-background: #e0f3ff, + $header-text-color: #e41c77, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: rgba(0, 0, 0, 0.08) ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-multi-column-headers-styling', + styleUrls: ['./multi-column-headers-styling.component.scss'], + templateUrl: './multi-column-headers-styling.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class GridMultiColumnHeadersStylingComponent { + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data = DATA; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $header-background: #e0f3ff, + $header-text-color: #e41c77, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: rgba(0, 0, 0, 0.08) +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html)
## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Group by](groupby.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md new file mode 100644 index 000000000..f5396d949 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-multi-row-layout.md @@ -0,0 +1,256 @@ +--- +_tocName: Multi-row Layout +_premium: true +--- +--- title: Angular Grid Multi-row Layout - Ignite UI for Angular _description: Position and size columns in a more powerful way, using the multi-row layout functionality in the Ignite UI for Angular Data Grid. Check out examples and demos! _keywords: angular multi-row layout, material row layout, ignite ui for angular _license: commercial --- # Angular Multi-row Layout Multi-row Layout extends the rendering capabilities of the `igxGridComponent`. The feature allows splitting a single data record into multiple visible rows. ## Angular Multi-row Layout Example ```typescript +import { Component, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxColumnLayoutComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-multi-row-layout-sample', + styleUrls: ['./grid-multi-row-layout.component.scss'], + templateUrl: './grid-multi-row-layout.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnLayoutComponent, IgxColumnComponent] +}) +export class GridMultiRowLayoutComponent { + + public sourceData = DATA; + public group = [ + { + dir: SortingDirection.Asc, + fieldName: 'Country', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + } + ]; + public sort = [ + { + dir: SortingDirection.Desc, + fieldName: 'CompanyName', + ignoreCase: true + } + ]; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + --ig-size: var(--ig-size-medium); + padding: 16px; +} +``` The declaration of Multi-row Layout is achieved through [`igx-column-layout`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnlayoutcomponent.html) component. Each `igx-column-layout` component should be considered as a block, containing one or multiple `igx-column` components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more `igx-column-layout` blocks if the layout allows it. There should be no columns outside of those blocks and no usage of `IgxColumnGroupComponent` when configuring a multi-row layout. Multi-row Layout is implemented on top of the [grid layout](https://www.w3.org/TR/css-grid-1/) specification and should conform to its requirements. `IgxColumnComponent` exposes four `@Input` properties to determine the location and span of each cell: - [`colStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#colStart) - column index from which the field is starting. This property is **mandatory**. - [`rowStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#rowStart) - row index from which the field is starting. This property is **mandatory**. - [`colEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#colEnd) - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is **optional**. If not set defaults to `colStart + 1`. - [`rowEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#rowEnd) - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is **optional**. If not set defaults to `rowStart + 1`. ```html + + + + + + + + + + + ``` The result of the above configuration can be seen on the screenshot below: Multi-row Layout Example > [!Note] > [`rowStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#rowStart) and [`colStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#colStart) properties must be set for each `igx-column` into `igx-column-layout`. The `igxColumnLayout` component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. ## Feature Integration Due to the completely different rendering approach of Multi-row Layout, some of the column features will work only on `igx-column-layout` component. Such features are Column Pinning and Column Hiding. Others like - Sorting and Grouping will work in the same way - on `igx-column` component. - Filtering - only Excel Style Filtering is supported. Setting `filterMode` explicitly to `FilterMode.quickFilter` has no effect. - Paging - works on records, not visual rows. - Group By - `hideGroupedColumns` option has no effect in Multi-row Layout. The grouped columns are always visible. The following features are currently **not** supported: - Column Moving - Multi-column Headers - Export to Excel - Summaries ## Keyboard Navigation IgxGridComponent with Multi-Row Layouts provides build-in keyboard navigation. ### Horizontal navigation - Arrow Left or Arrow Right - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, Arrow Left and Arrow Right should navigate to the first cell on the left and right with the same `rowStart`, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same `rowStart` if possible. - Ctrl + Arrow Left (HOME) or Ctrl + Arrow Right (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell. ### Vertical navigation - Arrow Up or Arrow Down - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell. - Ctrl + Arrow Up or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row. - Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell. > [!Note] > Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows. > [!Note] > Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell. ### Custom Keyboard Navigation The grid allows customizing the default navigation behavior when a certain key is pressed. Actions like `going to the next cell` or `cell below` could be handled easily with the powerful keyboard navigation API: - [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridKeydown) is exposed. The event will emit [`IGridKeydownEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html). This event is available only through the keyboard key combinations mentioned above, for all other key actions you can use `keydown` event `(keydown)="onKeydown($event)"` - [`navigateTo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#navigateTo) - this method allows you to navigate to a position based on provided `rowindex` and `visibleColumnIndex` The demo below adds additional navigation down/up via the Enter and Shift + Enter keys, similar to the behavior observed in Excel. ### Demo ```typescript +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/company-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-mrl-custom-navigation-sample', + styleUrls: ['./grid-mrl-custom-navigation.component.scss'], + templateUrl: './grid-mrl-custom-navigation.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnLayoutComponent, IgxColumnComponent] +}) +export class GridMRLCustomNavigationComponent { + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static : true }) + public grid: IgxGridComponent; + + public sourceData = DATA; + + public customNavigation(args) { + const target = args.target; + if (args.event.key.toLowerCase() === 'enter') { + args.event.preventDefault(); + args.cancel = true; + const rowIndex = target.row.index === undefined ? target.index : target.row.index; + this.grid.navigateTo(args.event.shiftKey ? rowIndex - 1 : rowIndex + 1, target.column.visibleIndex, + (obj) => { + obj.target.activate(); + }); + } + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + --ig-size: var(--ig-size-medium); + padding: 16px; +} +``` ## Layout Configurator Sometimes when configuring a column layout it might be a challenge to calculate and set the proper [`colStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#colStart) and [`colEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#colEnd) or [`rowStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#rowStart) and [`rowEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#rowEnd). Especially when there are a lot of columns in a single layout. That is why we have created a small configurator, so you can easily do that and have a similar preview of how it would look inside the igxGrid when applied. You can do the following interactions with it: - Set number of rows for the whole configuration. All layouts must have the same amount of rows. - Add/Remove column layouts by clicking the `Add Layout` chip or reordering them by dragging a layout chip left/right. - Set specific settings for each layout as number of columns and how wide they will be. The setting refer to the currently selected layout. - Resize column cells in the layout preview so they can span more columns/rows or clear them using the `Delete` button. - Set columns in the preview by dragging a column chip in the place your will want it to be. - Add/Remove new columns by using the `Add Column` chip. - Get template output of the whole configuration ready to by placed inside an igxGrid or the JSON representation that can also be used and parsed in your template using [`NgForOf`](https://angular.io/api/common/NgForOf) for example. By default we have set the same columns as our previous sample, but it can be cleared and configured to match your desired configuration.
+
## Styling The igxGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Multi-row Layout styling. ### Importing global theme To begin the customization of the Multi-row Layout feature, you need to import the `index` file, where all styling functions and mixins are located. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Defining custom theme Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired. ```scss $custom-theme: grid-theme( + $cell-active-border-color: #ffcd0f, + $cell-selected-background: #6f6f6f, + $row-hover-background: #fde069, + $row-selected-background: #8d8d8d, + $header-background: #494949, + $header-text-color: #fff, + $sorted-header-icon-color: #ffcd0f, + $sortable-header-icon-hover-color: #e9bd0d ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. ### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss :host { + @include tokens($custom-theme); } ``` In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. ### Demo ```typescript +import { Component, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-multi-row-layout-styling-sample', + styleUrls: ['./grid-multi-row-layout-styling.component.scss'], + templateUrl: './grid-multi-row-layout-styling.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnLayoutComponent, IgxColumnComponent] +}) +export class GridMultiRowLayoutStylingComponent { + + public sourceData = DATA; + public group = [ + { + dir: SortingDirection.Asc, + fieldName: 'Country', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + } + ]; + public sort = [ + { + dir: SortingDirection.Desc, + fieldName: 'CompanyName', + ignoreCase: true + } + ]; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $cell-active-border-color: #ffcd0f, + $cell-selected-background: #6f6f6f, + $row-hover-background: #fde069, + $row-selected-background: #8d8d8d, + $header-background: #494949, + $header-text-color: #fff, + $sorted-header-icon-color: #ffcd0f, + $sortable-header-icon-hover-color: #e9bd0d +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnLayoutComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnlayoutcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html)
## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md new file mode 100644 index 000000000..ca325883b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paging.md @@ -0,0 +1,396 @@ +--- +_tocName: Paging +_premium: true +--- +--- title: Angular Grid Paging | Angular Pagination Table | Infragistics _description: Configure Angular pagination and create custom pages in the Angular table by Ignite UI, get data for the requested pages with variety of angular events. _keywords: angular pagination, igniteui for angular, infragistics _license: commercial --- # Angular Grid Pagination Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Grid pagination is configurable via a separate component projected in the grid tree by defining a `igx-paginator` tag, similar to adding of a column. As in any Angular Table, the pagination in the Grid supports template for custom pages. ## Angular Pagination Example The following example represents Grid pagination and exposes the options usage of `items per page` and how paging can be enabled. The user can also quickly navigate through the Grid pages via "Go to last page" and "Go to first page" buttons. ```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; +import { athletesData } from '../../data/athletesData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DecimalPipe } from '@angular/common'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-grid-sample', + styleUrls: ['./grid-paging-sample.component.scss'], + templateUrl: 'grid-paging-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxLinearProgressBarComponent, DecimalPipe] +}) + +export class PagingSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + public data: any[]; + + public ngOnInit(): void { + this.data = athletesData; + } +} +``` +```html +
+ + + + + + + +
+ {{ val }} +
+ + + + +
+ {{ val | number: '1.1-5' }} +
+ + + + +
+ +
+ + + + +
+ + + +
+ + + +
+``` +```scss +@use '../../../variables' as *; + +$progressBar-sample-theme: progress-linear-theme( + $track-color: rgba(181,181,181, .5), + $fill-color-default: orange +); + +.grid__wrapper { + @include progress-linear($progressBar-sample-theme); + + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 10px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.linear-bar-container { + width: 100%; +} +``` Adding a [`igx-paginator`](../paginator.md) component will control whether the feature is present, you can enable/disable it by using a simple `*ngIf` with a toggle property. The [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage) input controls the visible records per page. Let’s update our Grid to enable paging: ```html + + ``` Example: ```html + +
+ + + Page {{paginator.page}} of {{paginator.totalPages}} + + +
+ ``` ## Paging with Group By Group rows participate in the paging process along with data rows. They count towards the page size for each page. Collapsed rows are not included in the paging process. Integration between Paging and Group By is described in the [Group By](groupby.md#angular-grid-group-by-with-paging) topic. ## Usage The `igx-paginator` component is used along with the `igx-grid` component in the example below, but you can use it with any other component in case paging functionality is needed. ```html + + ``` ### Paginator Component Demo ```typescript +import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef, PLATFORM_ID, inject } from '@angular/core'; +import { athletesData } from '../../data/athletesData'; +import { IPaginatorResourceStrings } from 'igniteui-angular/core'; +import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DecimalPipe, isPlatformBrowser } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-pager-sample', + styleUrls: ['./grid-pager-sample.component.scss'], + templateUrl: './grid-pager-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule, DecimalPipe] +}) +export class GridPagerSampleComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + private platformId = inject(PLATFORM_ID); + + @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) + paginator: IgxPaginatorComponent; + + public data: any[]; + public isDropdownHidden = false; + public isPagerHidden = false; + public selectOptions = [5, 15, 20, 50]; + + private paginatorResourceStrings: IPaginatorResourceStrings = { + // eslint-disable-next-line @typescript-eslint/naming-convention + igx_paginator_label: 'Records per page' + }; + + public ngOnInit(): void { + this.data = athletesData; + } + + public ngAfterViewInit(): void { + if (isPlatformBrowser(this.platformId)) { + requestAnimationFrame(() => { + this.paginator.resourceStrings = this.paginatorResourceStrings; + }); + this.cdr.detectChanges(); + } + } +} +``` +```html +
+ + + + @if (!isDropdownHidden) { + + } + @if (!isPagerHidden) { + + } + + + + + + +
+ {{ val }} +
+ + + + +
+ {{ val | number: '1.1-5' }} +
+ + + + + + +
+ Hide Dropdown + Hide Pager +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 10px; +} + +igx-switch { + margin: 24px; +} + +.options-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 1rem; +} +.options_container * { margin-right: 15px; } + +.select-input { + max-width: 150px; + padding-top: 5px; + padding-bottom: 5px; + margin-left: 15px; +} +```
## Remote Paging Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription. For more detailed information, check the [`Grid Remote Data Operations`](remote-data-operations.md#remote-paging) topic. ## Remote Paging with Custom Template In some cases you may want to define your own paging behavior and this is when we can take advantage of the `igx-paginator-content` and add our custom logic along with it. [This section](remote-data-operations.md#remote-paging-with-custom-igx-paginator-content) explains how we are going to extend the Remote Paging example in order to demonstrate this. ## Styling To get started with styling the paginator, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`paginator-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-paginator-theme) and accepts the `$text-color`, `$background-color` and the `$border-color` parameters. ```scss $dark-paginator: paginator-theme( + $text-color: #d0ab23;, + $background-color: #231c2c, + $border-color: #d0ab23; ); ``` As seen, the `paginator-theme` only controls colors for the paging container, but does not affect the buttons in the pager UI. To style those buttons, let's create a new icon button theme: ```scss $dark-button: flat-icon-button-theme( + $foreground: #d0ab23, + $hover-foreground: #231c2c, + $hover-background: #d0ab23, + $focus-foreground: #231c2c, + $focus-background: #d0ab23, + $disabled-foreground: #9b7829 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins, each with its respective theme: ```scss :host { + @include tokens($dark-paginator); + + .igx-grid-paginator__pager { + @include tokens($dark-button); + } } ``` >[!NOTE] >We include the created **icon-button-theme** within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` in order to style the components which are inside the paging container, like the button: ```scss :host { + @include tokens($dark-paginator); + + igx-paginator { + ::ng-deep { + @include tokens($dark-button); + } + } } ``` ### Pagination Style Example ```typescript +import { Component, ViewChild, OnInit} from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { athletesData } from '../../data/athletesData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DecimalPipe } from '@angular/common'; + +@Component({ + selector: 'app-custom-grid-paging-style-sample', + styleUrls: ['custom-grid-paging-style.component.scss'], + templateUrl: 'custom-grid-paging-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, DecimalPipe] +}) + +export class CustomGridPagingStyleSampleComponent implements OnInit{ + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + public data: any[]; + + public ngOnInit(): void { + this.data = athletesData; + } + + public removeRow(rowIndex) { + const row = this.grid1.getRowByIndex(rowIndex); + row.delete(); + } +} +``` +```html +
+ + + + + + +
+ {{ val }} +
+ + + + +
+ {{ val | number: '1.1-5' }} +
+ + + + +
+ + + +
+ + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$my-primary: #231c2c; +$my-secondary: #d0ab23; +$dark-gray: #333; +$light-gray: #999; +$inactive-color: #826217; + +$dark-paginator: paginator-theme( + $text-color: $my-secondary, + $background-color: $my-primary, + $border-color: $my-secondary +); + +$dark-button: flat-icon-button-theme( + $foreground: $my-secondary, + $hover-foreground: $dark-gray, + $hover-background: $my-secondary, + $focus-foreground: $dark-gray, + $focus-background: $my-secondary, + $border-color: $my-secondary, + $focus-border-color: $my-secondary, + $disabled-foreground: $inactive-color +); + +$dark-select: select-theme( + $toggle-button-background: $my-primary, + $toggle-button-foreground: $inactive-color, + $toggle-button-foreground-filled: $inactive-color, + $toggle-button-foreground-focus: $inactive-color, + $toggle-button-background-focus--border: $my-primary, +); + +$dark-input-group: input-group-theme( + $filled-text-color: $my-secondary, + $idle-text-color: $my-secondary, + $filled-text-hover-color: $my-secondary, + $focused-text-color: $my-secondary, + $border-color: darken($inactive-color, 10%), + $focused-border-color: $my-secondary, + $input-suffix-color: $my-secondary, +); + +$dark-drop-down-theme: drop-down-theme( + $background-color: $my-primary, + $item-text-color: $my-secondary, + $selected-item-background: $my-secondary, + $selected-item-text-color: $dark-gray, + $focused-item-background: $my-secondary, + $focused-item-text-color: $dark-gray, + $selected-focus-item-background: $my-secondary, + $selected-focus-item-text-color: $dark-gray, + $selected-hover-item-background: $my-secondary, + $selected-hover-item-text-color: $dark-gray +); + +igx-grid { + @include tokens($dark-paginator); + @include tokens($dark-drop-down-theme); +} + +igx-paginator { + @include tokens($dark-button); + @include tokens($dark-input-group); + @include tokens($dark-select); +} +```
## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxGridPaginator Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-paginator-theme) ## Additional Resources
- [Grid overview](grid.md) - [Paginator](../paginator.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md new file mode 100644 index 000000000..b21317a3b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-paste-excel.md @@ -0,0 +1,442 @@ +--- +title: Angular Excel Like Grid - Paste Form Excel - Infragistics  +_description: Configure the Angular Grid to paste data from excel, by using rich and performant API with less code, and use the rich API do export selected grid data easily. +_keywords: export selected, igniteui for angular, infragistics +_license: commercial +_tocName: Paste from Excel +_premium: true +--- + +# Angular Grid Paste from Excel + +The Ignite UI for Angular [`IgxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) can read Excel data that is copied to the clipboard. In this section we will show you how to do this with some custom code. + +## Angular Paste from Excel Example + +This sample demonstrates how to implement pasting from Excel into the [`igxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) Material UI table. +To work with the sample open up any Excel spreadsheet, copy some rows, and paste it into the grid using the keyboard (Ctrl + V, Shift + Insert, Command + V). + +On the top there is a dropdown button with 2 options: +
    +
  1. "Paste data as new rows" – in this mode any data copied from Excel will be appended to the grid as new rows
    2. +
  2. "Paste starting from active cell" – in this mode the data in the grid will be overwritten.
    3. +
+ +The new data after the paste is decorated in Italic. + + +```typescript +import { Component, ViewChild, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; +import { IgxColumnComponent, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; + +import { EXCEL_DATA, LOCAL_DATA } from './data'; + +import { first } from 'rxjs/operators'; + +import { PasteHandler } from './paste-handler.directive'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-paste-sample', + styleUrls: ['./grid-paste-sample.component.scss'], + templateUrl: './grid-paste-sample.component.html', + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridComponent, PasteHandler, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridPasteSampleComponent { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public comboData = [ + 'Paste data as new records', + 'Paste starting from active cell' + ]; + public pasteMode = this.comboData[0]; + + constructor() { + this.data = LOCAL_DATA; + } + + public selectionChange(event: any) { + this.pasteMode = event.newSelection.value; + } + + public dataPasted(processedData) { + if (this.pasteMode === 'Paste data as new records') { + this.addRecords(processedData); + } else { + this.updateRecords(processedData); + } + } + + public addRecords(processedData: any[]) { + const columns = this.grid1.visibleColumns; + const pk = this.grid1.primaryKey; + for (const curentDataRow of processedData) { + const rowData = {}; + for (const col of columns) { + rowData[col.field] = curentDataRow[col.visibleIndex]; + } + // generate PK + rowData[pk] = + this.grid1.data.length + + this.grid1.transactions.getAggregatedChanges(false).length + + 1; + this.grid1.addRow(rowData); + } + // scroll to last added row + this.grid1.verticalScrollContainer.dataChanged + .pipe(first()) + .subscribe(() => { + this.grid1.verticalScrollContainer.scrollTo( + this.grid1.dataView.length - 1 + ); + }); + } + + public updateRecords(processedData: any[]) { + const cell = this.grid1.selectedCells[0]; + const pk = this.grid1.primaryKey; + if (!cell) { + return; + } + const rowIndex = cell.row.index; + // const rowPkValue = cell.row.key; + const cellIndex = cell.column.visibleIndex; + const columns = this.grid1.visibleColumns; + let index = 0; + const updatedRecsPK = []; + for (const curentDataRow of processedData) { + const rowData = {}; + const dataRec = this.grid1.data[rowIndex + index]; + const rowPkValue = dataRec + ? dataRec[pk] + : this.grid1.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = + currentCell || (!!dataRec ? dataRec[colKey] : null); + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + this.grid1.addRow(rowData); + continue; + } + this.grid1.updateRow(rowData, rowPkValue); + this.grid1.cdr.detectChanges(); + updatedRecsPK.push(rowPkValue); + index++; + } + } + + public downloadExcel(eventArgs) { + this.excelExportService.exportData( + EXCEL_DATA, + new IgxExcelExporterOptions('sample-data') + ); + } + + public undo() { + this.grid1.transactions.undo(); + } + + public redo() { + this.grid1.transactions.redo(); + if (this.pasteMode === 'Paste starting from active cell') { + return; + } + this.grid1.verticalScrollContainer.dataChanged + .pipe(first()) + .subscribe(() => { + this.grid1.verticalScrollContainer.scrollTo( + this.grid1.dataView.length - 1 + ); + }); + } + + public commit() { + this.grid1.transactions.commit(this.data); + } + public get undoEnabled(): boolean { + return this.grid1.transactions.canUndo; + } + + public get redoEnabled(): boolean { + return this.grid1.transactions.canRedo; + } + + public get hasTransactions(): boolean { + return this.grid1.transactions.getAggregatedChanges(false).length > 0; + } +} +``` +```html +
+
+ + + @for (item of comboData; track item) { + + {{ item }} + + } + + +
+ + + + + + +
+
+ + + +
+
+
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; + padding-left: 1%; + padding-right: 1%; +} + +.grid__menu { + padding-bottom: 20px; +} + +#download_excel { + float: right; +} + +.igx-grid__th .title { + width: 100%; + cursor: auto; +} + +.igx-grid__td-text { + padding-right: 3px; +} +``` + +
+ +## Usage + +You should add the `paste-handler` directive (you can find its code in the next section) to the [`igxGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) and handle its `onDataProcessed` event. The `onDataProcessed` event has one parameter that gives you access to the Excel data in the form of an array. For reference see the `addRecords` and `updateRecords` methods. + +```html + + + + + + +``` + +```typescript + public dataPasted(processedData) { + if (this.pasteMode === "Paste data as new records") { + this.addRecords(processedData); + } else { + this.updateRecords(processedData); + } + } + + public addRecords(processedData: any[]) { + const columns = this.grid1.visibleColumns; + const pk = this.grid1.primaryKey; + const addedData = []; + for (const curentDataRow of processedData) { + const rowData = {}; + for (const col of columns) { + rowData[col.field] = curentDataRow[col.visibleIndex]; + } + // generate PK + rowData[pk] = this.grid1.data.length + 1; + this.grid1.addRow(rowData); + addedData.push(rowData); + this.grid1.cdr.detectChanges(); + } + // scroll to last added row + this.grid1.verticalScrollContainer.scrollTo(this.grid1.data.length); + + this.grid1.verticalScrollContainer.chunkLoad.pipe(take(1)).subscribe(() => { + this.clearStyles(); + for (const data of addedData) { + const row = this.grid1.getRowByKey(data[pk]); + if (row) { + row.nativeElement.style["font-style"] = "italic"; + row.nativeElement.style.color = "gray"; + } + } + }); + } + public updateRecords(processedData: any[]) { + const cell = this.grid1.selectedCells[0]; + const pk = this.grid1.primaryKey; + if (!cell) { return; } + const rowIndex = cell.row.index; + // const rowPkValue = cell.row.data[pk]; + const cellIndex = cell.column.visibleIndex; + const columns = this.grid1.visibleColumns; + let index = 0; + const updatedRecsPK = []; + for (const curentDataRow of processedData) { + const rowData = {}; + const dataRec = this.grid1.data[rowIndex + index]; + const rowPkValue = dataRec ? dataRec[pk] : this.grid1.data.length + 1; + rowData[pk] = rowPkValue; + for (let j = 0; j < columns.length; j++) { + let currentCell; + if (j >= cellIndex) { + currentCell = curentDataRow.shift(); + } + const colKey = columns[j].field; + rowData[colKey] = currentCell || (!!dataRec ? dataRec[colKey] : null); + } + if (!dataRec) { + // no rec to update, add instead + rowData[pk] = rowPkValue; + this.grid1.addRow(rowData); + continue; + } + this.grid1.updateRow(rowData, rowPkValue); + this.grid1.cdr.detectChanges(); + updatedRecsPK.push(rowPkValue); + index++; + } + + this.clearStyles(); + for (const pkVal of updatedRecsPK) { + const row = this.grid1.getRowByKey(pkVal); + if (row) { + row.nativeElement.style["font-style"] = "italic"; + row.nativeElement.style.color = "gray"; + } + } + } + + protected clearStyles() { + for (const row of this.grid1.rowList.toArray()) { + row.nativeElement.style["font-style"] = ""; + row.nativeElement.style.color = ""; + } + } +``` + +
+ +## Paste Handler Directive + +This is the `paste-handler` implementation. The code creates a DOM `textarea` element which is used to receive the pasted data from the clipboard. When the data is pasted in the `textarea` the directive parses it into an array and then emits a custom event `onDataProcessed` passing the parsed data. + +```typescript +import { Directive, EventEmitter, HostListener, Output} from "@angular/core"; + +@Directive({ selector: "[paste-handler]" }) +export class PasteHandler { + public textArea; + + @Output() + public onDataProcessed = new EventEmitter(); + + public ngOnInit(): void { + const div = document.createElement("div"); + const divStyle = div.style; + divStyle.position = "fixed"; + document.body.appendChild(div); + this.textArea = document.createElement("textarea"); + const style = this.textArea.style; + style.opacity = "0"; + style.height = "0px"; + style.width = "0px"; + style.overflow = "hidden"; + div.appendChild(this.textArea); + + this.textArea.addEventListener("paste", (eventArgs) => { this.onPaste(eventArgs); }); + } + + @HostListener("focusin", ["$event"]) + public focusIn(eventArgs) { + } + + @HostListener("keydown", ["$event"]) + public ControlV(eventArgs) { + const ctrl = eventArgs.ctrlKey; + const key = eventArgs.keyCode; + // Ctrl-V || Shift-Ins || Cmd-V + if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) { + this.textArea.focus(); + } + } + + public onPaste(eventArgs) { + let data; + const clData = "clipboardData"; + + // get clipboard data - from window.cliboardData for IE or from the original event's arguments. + if (window[clData]) { + window.event.returnValue = false; + data = window[clData].getData("text"); + } else { + data = eventArgs[clData].getData("text/plain"); + } + + // process the clipboard data + const processedData = this.processData(data); + + this.onDataProcessed.emit(processedData); + } + + public processData(data) { + const pasteData = data.split("\n"); + for (let i = 0; i < pasteData.length; i++) { + pasteData[i] = pasteData[i].split("\t"); + // Check if last row is a dummy row + if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") { + pasteData.pop(); + } + // remove empty data + if (pasteData.length === 1 && + pasteData[0].length === 1 && + (pasteData[0][0] === "" || pasteData[0][0] === "\r")) { + pasteData.pop(); + } + } + return pasteData; + } +} + +``` + +## API References + +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) + +## Additional Resources + +
+ +- [Excel Exporter](export-excel.md) - Use the Excel Exporter service to export data to Excel from IgxGrid. It also provides the option to only export the selected data from the IgxGrid. The exporting functionality is encapsulated in the IgxExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the IgxExcelExporterService's export method and pass the IgxGrid component as first argument. + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md new file mode 100644 index 000000000..643ca6312 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-remote-data-operations.md @@ -0,0 +1,1695 @@ +--- +_tocName: Remote Data Operations +_premium: true +--- +--- title: Angular Grid Remote Data Operations - Ignite UI for Angular _description: Start using Angular remote data operations like remote filtering, remote sorting, and remote scrolling to load data from a server with Ignite UI for Angular. _keywords: angular remote data operations, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Remote Data Operations The Ignite UI for Angular Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. This allows the developer to perform these tasks on a server, retrieve the data that is produced and display it in the Grid. ## Angular Grid Remote Data Operations Overview Example ```typescript +import { ChangeDetectorRef, Component, OnInit, ViewChild, AfterViewInit, OnDestroy, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { NoopFilteringStrategy, NoopSortingStrategy } from 'igniteui-angular/core'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { Subject } from 'rxjs'; +import { debounceTime, takeUntil } from 'rxjs/operators'; +import { RemoteFilteringService } from '../../services/remoteFiltering.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +const DEBOUNCE_TIME = 300; + +@Component({ + providers: [RemoteFilteringService], + selector: 'app-grid-remote-filtering-sample', + styleUrls: ['./remote-filtering-sample.component.scss'], + templateUrl: './remote-filtering-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] +}) +export class RemoteFilteringSampleComponent implements OnInit, AfterViewInit, OnDestroy { + private _remoteService = inject(RemoteFilteringService); + cdr = inject(ChangeDetectorRef); + + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; + public remoteData: any; + public noopFilterStrategy = NoopFilteringStrategy.instance(); + public noopSortStrategy = NoopSortingStrategy.instance(); + + private _prevRequest: any; + private _chunkSize: number; + private destroy$ = new Subject(); + + public ngOnInit(): void { + this.remoteData = this._remoteService.remoteData; + } + + public ngAfterViewInit() { + const filteringExpr = this.grid.filteringExpressionsTree.filteringOperands; + const sortingExpr = this.grid.sortingExpressions[0]; + this._chunkSize = Math.ceil(parseInt(this.grid.height, 10) / this.grid.rowHeight); + this.grid.isLoading = true; + + this._remoteService.getData( + { + chunkSize: this._chunkSize, + startIndex: this.grid.virtualizationState.startIndex + }, + filteringExpr, + sortingExpr, + (data) => { + this.grid.totalItemCount = data['@odata.count']; + this.grid.isLoading = false; + }); + + this.grid.dataPreLoad.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); + this.grid.filteringExpressionsTreeChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(true); + }); + this.grid.sortingExpressionsChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); + } + + public processData(isFiltering: boolean = false) { + if (this._prevRequest) { + this._prevRequest.unsubscribe(); + } + + if (!this.grid.isLoading) { + this.grid.isLoading = true; + } + + const virtualizationState = this.grid.virtualizationState; + const filteringExpr = this.grid.filteringExpressionsTree.filteringOperands; + const sortingExpr = this.grid.sortingExpressions[0]; + + if (isFiltering) { + virtualizationState.startIndex = 0; + } + + this._prevRequest = this._remoteService.getData( + { + chunkSize: this._chunkSize, + startIndex: virtualizationState.startIndex + }, + filteringExpr, + sortingExpr, + (data) => { + this.grid.totalItemCount = data['@odata.count']; + if (this.grid.isLoading) { + this.grid.isLoading = false; + } + }); + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public ngOnDestroy() { + if (this._prevRequest) { + this._prevRequest.unsubscribe(); + } + this.destroy$.next(); + this.destroy$.complete(); + } +} +``` +```html +
+ + + + + + + UnitsInStock + + +
+ @if (val>50) { + + } + @if (val<=50) { + + } + {{ formatNumber(val) }} +
+ + + + + + ReorderLevel + + +
+ @if (val>20) { + + } + @if (val<=20) { + + } + {{ formatNumber(val) }} +
+ + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.cellAlignSyle { + text-align: right; + float:right; +} + +.cellAlignSyle > span { + float:right; +} + +.up { + color: green; +} + +.down { + color: red; +} + +.headerAlignSyle { + text-align: right !important; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} +``` By default, the Grid uses its own logic for performing data operations. You can perform these tasks remotely and feed the resulting data to the Grid by taking advantage of certain inputs and events, which are exposed by the Grid. ## Remote Virtualization The [IgxGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) supports the scenario in which the data chunks are requested from a remote service, exposing the behavior implemented in the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive it uses internally. To utilize this feature, you need to subscribe to the [`dataPreLoad`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#dataPreLoad) output so that you make the appropriate request based on the arguments received, as well as set the public [IgxGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) property [`totalItemCount`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#totalItemCount) with the respective information coming from the service. ```html + + + ``` ```typescript public ngAfterViewInit() { + this.grid.isLoading = true; + + this._remoteService.getData(this.grid.virtualizationState, this.grid.sortingExpressions[0], true, (data) => { + this.grid.totalItemCount = data['@odata.count']; + this.grid.isLoading = false; + }); } public processData(reset) { + if (this.prevRequest) { + this.prevRequest.unsubscribe(); + } + + this._prevRequest = this._remoteService.getData(this.grid.virtualizationState, + this.grid.sortingExpressions[0], reset, () => { + ... + this.cdr.detectChanges(); + }); } ``` When requesting data, you need to utilize the [`IForOfState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html) interface, which provides the [`startIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html#startIndex) and [`chunkSize`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html#chunkSize) properties. >[!NOTE] >The first [`chunkSize`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html#chunkSize) will always be 0 and should be determined by you based on the specific application scenario. ### Remote Virtualization Demo ```typescript +import { ChangeDetectorRef, Component, TemplateRef, ViewChild, OnInit, AfterViewInit, OnDestroy, inject } from '@angular/core'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { debounceTime } from 'rxjs/operators'; +import { RemoteServiceVirt } from '../../services/remoteVirtualization.service'; +import { AsyncPipe } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + providers: [RemoteServiceVirt], + selector: 'app-grid-remote-virtualization-sample', + styleUrls: ['grid-sample-4.component.scss'], + templateUrl: 'grid-sample-4.component.html', + imports: [IgxCellTemplateDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] +}) + +export class GridRemoteVirtualizationSampleComponent implements OnInit, AfterViewInit, OnDestroy{ + private _remoteService = inject(RemoteServiceVirt); + cdr = inject(ChangeDetectorRef); + + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; + @ViewChild('remoteDataLoadingLarge', { read: TemplateRef, static: true }) + public remoteDataLoadingLargeTemplate: TemplateRef; + @ViewChild('remoteDataLoadingMedium', { read: TemplateRef, static: true }) + public remoteDataLoadingMediumTemplate: TemplateRef; + @ViewChild('remoteDataLoadingSmall', { read: TemplateRef, static: true }) + public remoteDataLoadingSmallTemplate: TemplateRef; + + public remoteData: any; + + private _columnCellCustomTemplates: Map>; + private _prevRequest: any; + + public ngOnInit(): void { + this.remoteData = this._remoteService.data; + this._columnCellCustomTemplates = new Map>(); + } + + public ngAfterViewInit() { + this.grid.isLoading = true; + + this._remoteService.getData(this.grid.virtualizationState, this.grid.sortingExpressions[0], true, + (data) => { + this.grid.totalItemCount = data['@odata.count']; + this.grid.isLoading = false; + }, { + startIndex: this.grid.virtualizationState.startIndex, + chunkSize: 20 + }); + + this.grid.dataPreLoad.pipe().subscribe(() => { + this._remoteService.getDataFromCache(this.grid.virtualizationState, + this.grid.sortingExpressions[0], false, () => { + this.cdr.detectChanges(); + }); + }); + + this.grid.dataPreLoad.pipe(debounceTime(500)).subscribe(() => { + this.processData(false); + }); + } + + public handlePreLoad() { + this.processData(false); + } + + public processData(reset) { + if (this._prevRequest) { + this._prevRequest.unsubscribe(); + } + let state; + if (!reset) { + state = { + startIndex: this.grid.virtualizationState.startIndex, + chunkSize: 20 + }; + } + this._prevRequest = this._remoteService.getData(this.grid.virtualizationState, + this.grid.sortingExpressions[0], reset, () => { + this.cdr.detectChanges(); + }, state); + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public ngOnDestroy() { + if (this._prevRequest) { + this._prevRequest.unsubscribe(); + } + } + + public getDataLoadingTemplate(): TemplateRef { + const val = Math.floor(Math.random() * 3) + 1; + + switch (val) { + case 1: return this.remoteDataLoadingLargeTemplate; + case 2: return this.remoteDataLoadingMediumTemplate; + case 3: return this.remoteDataLoadingSmallTemplate; + } + } +} +``` +```html + + @if (!data.emptyRec) { +
+ {{ val }} +
+ } @else { + + } + +
+ +
+ + +
+ + +
+ + + + + + + + + UnitsInStock + + + @if (!cell.row.data.emptyRec) { +
+
+ @if (val>50) { + + } + @if (val<=50) { + + } + {{ formatNumber(val) }} +
+
+ } @else { + + } + + + + + + ReorderLevel + + + @if (!cell.row.data.emptyRec) { +
+
+ @if (val>20) { + + } + @if (val<=20) { + + } + {{ formatNumber(val) }} +
+
+ } @else { + + } + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.cellAlignSyle { + text-align: right; + float:right; +} + +.cellAlignSyle > span { + float:right; +} + +.up { + color: green; +} + +.down { + color: red; +} + +.headerAlignSyle { + text-align: right !important; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} + +.remote-data-loading-template { + animation: content-placeholder-animation .5s infinite; + background-color: lightgray; + height: 15px; +} + +.remote-data-loading-template-medium { + @extend .remote-data-loading-template; + width: 30px; +} + +.remote-data-loading-template-large { + @extend .remote-data-loading-template; + width: 40px; +} + +.remote-data-loading-template-small { + @extend .remote-data-loading-template; + width: 20px; +} + +@keyframes content-placeholder-animation { + 0% { + opacity: .75; + transform: scaleX(.9); + } + 50% { + opacity: 1; + transform: scaleX(1.1); + } + 100% { + opacity: .75; + transform: scaleX(.9); + } +} +``` ## Infinite Scroll + + A popular design for scenarios requiring fetching data by chunks from an end-point is the so-called infinite scroll. For data grids, it is characterized by continuous increase of the loaded data triggered by the end-user scrolling all the way to the bottom. The next paragraphs explain how you can use the available API to easily achieve infinite scrolling in `IgxGrid`. To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the `startIndex` and `chunkSize` properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point. The first thing to do is use the `ngAfterViewInit` lifecycle hook to fetch the first chunk of the data. Setting the `totalItemCount` property is important, as it allows the grid to size its scrollbar correctly. ```typescript public ngAfterViewInit() { + this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { + if (request.data) { + this.grid.totalItemCount = this.page * this.pageSize; + this.grid.data = this._remoteService.getCachedData({startIndex: 0, chunkSize: 10}); + this.totalItems = request.data['@odata.count']; + this.totalPageCount = Math.ceil(this.totalItems / this.pageSize); + this.grid.isLoading = false; + } + }); } ``` Additionally, you have to subscribe to the `dataPreLoad` output, so that you can provide the data needed by the grid when it tries to display a different chunk, rather than the currently loaded one. In the event handler, you have to determine whether to fetch new data or return data, that's already cached locally. ```typescript public handlePreLoad() { + const isLastChunk = this.grid.totalItemCount === + this.grid.virtualizationState.startIndex + this.grid.virtualizationState.chunkSize; + // when last chunk reached load another page of data + if (isLastChunk) { + if (this.totalPageCount === this.page) { + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + return; + } + this.page++; + this.grid.isLoading = true; + this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { + if (request.data) { + this.grid.totalItemCount = Math.min(this.page * this.pageSize, this.totalItems); + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + this.grid.isLoading = false; + } + }); + } else { + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + } } ``` ### Infinite Scroll Demo ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, OnInit, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { RemoteService } from '../../services/remote.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + providers: [RemoteService], + selector: 'app-grid-remote-virtualization-sample', + styleUrls: ['grid-sample-5.component.scss'], + templateUrl: 'grid-sample-5.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent] +}) + +export class GridRemoteVirtualizationAddRowSampleComponent implements AfterViewInit, OnInit { + private _remoteService = inject(RemoteService); + cdr = inject(ChangeDetectorRef); + + + @ViewChild('grid', { static: true }) + public grid: IgxGridComponent; + + public remoteData: any; + private page = 1; + private pageSize = 10; + private totalPageCount = 0; + private totalItems = 0; + + public ngOnInit(): void { + this.remoteData = this._remoteService.data; + } + + public ngAfterViewInit() { + this.grid.isLoading = true; + // load 1 page of data with the size of a data view and a half + const dataViewSize = parseInt(this.grid.height, 10) / this.grid.rowHeight; + this.pageSize = Math.floor(dataViewSize * 1.5); + this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { + if (request.data) { + this.grid.data = this._remoteService.getCachedData({startIndex: 0, chunkSize: 10}); + this.cdr.detectChanges(); + this.grid.verticalScrollContainer.totalItemCount = this.page * this.pageSize; + this.totalItems = request.data['@odata.count']; + this.totalPageCount = Math.ceil(this.totalItems / this.pageSize); + this.grid.isLoading = false; + } + }); + } + + public handlePreLoad() { + const isLastChunk = this.grid.totalItemCount === + this.grid.virtualizationState.startIndex + this.grid.virtualizationState.chunkSize; + // when last chunk reached load another page of data + if (isLastChunk) { + if (this.totalPageCount === this.page) { + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + return; + } + this.page++; + this.grid.isLoading = true; + this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { + if (request.data) { + this.grid.totalItemCount = Math.min(this.page * this.pageSize, this.totalItems); + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + this.grid.isLoading = false; + } + }); + } else { + this.grid.data = this._remoteService.getCachedData(this.grid.virtualizationState); + } + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } +} +``` +```html +
+ + + + + + + UnitsInStock + + +
+ @if (val>50) { + + } + @if (val<=50) { + + } + {{ formatNumber(val) }} +
+ + + + + + ReorderLevel + + +
+ @if (val>20) { + + } + @if (val<=20) { + + } + {{ formatNumber(val) }} +
+ + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.cellAlignSyle { + text-align: right; + float:right; +} + +.cellAlignSyle > span { + float:right; +} + +.up { + color: green; +} + +.down { + color: red; +} + +.headerAlignSyle { + text-align: right !important; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} + +.remote-data-loading-template { + animation: content-placeholder-animation .5s infinite; + background-color: lightgray; + height: 15px; +} + +.remote-data-loading-template-medium { + @extend .remote-data-loading-template; + width: 30px; +} + +.remote-data-loading-template-large { + @extend .remote-data-loading-template; + width: 40px; +} + +.remote-data-loading-template-small { + @extend .remote-data-loading-template; + width: 20px; +} + +@keyframes content-placeholder-animation { + 0% { + opacity: .75; + transform: scaleX(.9); + } + 50% { + opacity: 1; + transform: scaleX(1.1); + } + 100% { + opacity: .75; + transform: scaleX(.9); + } +} +``` ## Remote Sorting/Filtering To provide remote sorting and filtering, you need to subscribe to the [`dataPreLoad`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#dataPreLoad), [`sortingExpressionsChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#sortingExpressionsChange) and [`filteringExpressionsTreeChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filteringexpressionstreechange) outputs, so that you make the appropriate request based on the arguments received, as well as set the public [IgxGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) property [`totalItemCount`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#totalItemCount) with the respective information coming from the service. We will also take advantage of the **rxjs** `debounceTime` function, which emits a value from the source Observable only after a particular time span has passed without another source emission. This way the remote operation will be triggered only when the specified amount of time has passed without the user interrupting it. ```typescript const DEBOUNCE_TIME = 300; ... public ngAfterViewInit() { + ... + this.grid.dataPreLoad.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); + + this.grid.filteringExpressionsTreeChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(true); + }); + + this.grid.sortingExpressionsChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); } ``` When remote sorting and filtering are provided, usually we do not need the built-in sorting and filtering of the grid. We can disable them by setting the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#sortStrategy) and the [`filterStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#filterStrategy) inputs of the grid to the `NoopSortingStrategy` and the `NoopFilteringStrategy` respective instances. ```html + ... ``` ```typescript public noopFilterStrategy = NoopFilteringStrategy.instance(); public noopSortStrategy = NoopSortingStrategy.instance(); ``` >[!NOTE] >When remote data is requested, the filtering operation is case-sensitive. ### Remote Sorting/Filtering Demo You can see the result of the code from above at the beginning of this article in the [Demo](#angular-grid-remote-data-operations-overview-example) section. ### Unique Column Values Strategy The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. The Grid generates these values based on its data source by default. In case of remote filtering, the grid data does not contain all the data from the server. In order to provide the unique values manually and load them on demand, we can take advantage of the Grid's [`uniqueColumnValuesStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#uniqueColumnValuesStrategy) input. This input is actually a method that provides three arguments: - **column** - The respective column instance. - **filteringExpressionsTree** - The filtering expressions tree, which is reduced based on the respective column. - **done** - Callback that should be called with the newly generated column values when they are retrieved from the server. The developer can manually generate the necessary unique column values based on the information, that is provided by the **column** and the **filteringExpressionsTree** arguments and then invoke the **done** callback. > [!NOTE] > When the [`uniqueColumnValuesStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#uniqueColumnValuesStrategy) input is provided, the default unique values generating process in the excel style filtering will not be used. ```html + ... ``` ```typescript public columnValuesStrategy = (column: ColumnType, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); } ``` ### Unique Column Values Strategy Demo ```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { IFilteringExpressionsTree } from 'igniteui-angular/core'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { RemoteValuesService } from './remoteValues.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-excel-style-filtering-load-on-demand', + styleUrls: ['./grid-excel-style-filtering-load-on-demand.component.scss'], + templateUrl: './grid-excel-style-filtering-load-on-demand.component.html', + providers: [RemoteValuesService], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] +}) +export class GridExcelStyleFilteringLoadOnDemandComponent implements OnInit { + private remoteValuesService = inject(RemoteValuesService); + + + public data: any[]; + + public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); + }; + + public ngOnInit() { + // Get full data. + this.data = this.remoteValuesService.getRecordsData(); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + + margin: 0 auto; + padding: 16px; +} +``` In order to provide a custom loading template for the excel style filtering, we can use the `igxExcelStyleLoading` directive: ```html + ... + + Loading ... + ```
## Remote Paging @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { The paging feature can operate with remote data. In order to demonstrate this let's first declare our service that will be responsible for data fetching. We will need the count of all data items in order to calculate the page count. This logic will be added to our service. ```typescript @Injectable() export class RemotePagingService { + public remoteData: BehaviorSubject; + public dataLenght: BehaviorSubject = new BehaviorSubject(0); + public url = 'https://www.igniteui.com/api/products'; + + constructor(private http: HttpClient) { + this.remoteData = new BehaviorSubject([]) as any; + } + + public getData(index?: number, perPage?: number): any { + let qS = ''; + + if (perPage) { + qS = `?$skip=${index}&$top=${perPage}&$count=true`; + } + + this.http + .get(`${this.url + qS}`).pipe( + map((data: any) => data) + ).subscribe((data) => this.remoteData.next(data)); + } + + public getDataLength(): any { + return this.http.get(this.url).pipe( + map((data: any) => data.length) + ); + } } ``` After declaring the service, we need to create a component, which will be responsible for the Grid construction and data subscription. ```typescript export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy { + public data: Observable; + private _dataLengthSubscriber; + + constructor(private remoteService: RemoteService) {} + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } } ``` } Now we can choose between setting-up our own _custom paging template_ or using the default one that the `igx-paginator` provides. Let's first take a look what is necessary to set-up remote paging by using the _default paging template_. ### Remote paging with default template If you want to use the _default paging template_ you need to set the Paginator's [`totalRecords`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#totalRecords) property, only then the grid will be able to calculate the _total page number_ based on total remote records. When performing a remote pagination the Paginator will pass to the Grid only the data for the current page, so the grid will not try to paginate the provided data source. That's why we should set Grid's [`pagingMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#pagingMode) property to _GridPagingMode.remote_. Also it is necessary to either subscribe to [`pagingDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#pagingDone) or [`perPageChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPageChange) events in order to fetch the data from your remote service, it depends on the use case which event will be used. ```html + + ... + + ``` ```typescript public totalCount = 0; public data: Observable; public mode = GridPagingMode.remote; public isLoading = true; @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; private _dataLengthSubscriber; public set perPage(val: number) { + this._perPage = val; + this.paginate(0); } public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data: any) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); } public ngAfterViewInit() { + const skip = this.page * this.perPage; + this.remoteService.getData(skip, this.perPage); } public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); } ``` ```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { Observable } from 'rxjs'; +import { RemotePagingService } from '../../services/remotePaging.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingService], + selector: 'app-remote-paging-default-template', + styleUrls: ['./remote-paging-default-template.component.scss'], + templateUrl: './remote-paging-default-template.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, AsyncPipe] +}) +export class RemotePagingDefaultTemplateComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + @ViewChild('customPager', { read: TemplateRef, static: true }) public remotePager: TemplateRef; + public totalCount = 0; + public page = 0; + public data: Observable; + public mode = GridPagingMode.Remote; + public isLoading = true; + + private _dataLengthSubscriber; + private _perPage = 10; + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0); + } + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + this.data.subscribe(() => { + this.isLoading = false; + }); + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.grid1.isLoading = true; + this.remoteService.getData(0, this.grid1.perPage); + this.remoteService.getDataLength(); + } + + public pagingDone(page) { + const skip = page.current * this.grid1.perPage; + this.remoteService.getData(skip, this.grid1.perPage); + } + + public paginate(page) { + this.isLoading = true; + const skip = page * this.grid1.perPage; + this.remoteService.getData(skip, this.grid1.perPage); + } +} +``` +```html +
+ + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` ### Remote Paging with custom igx-paginator-content When we define a custom paginator content we need to define the content in a way to get the data only for the requested page and to pass the correct **skip** and **top** parameters to the remote service according to the selected page and items [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage). We are going to use the `` in order to ease our example configuration, along with the [`IgxPageSizeSelectorComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageSizeSelectorComponent.html) and [`IgxPageNavigationComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageNavigationComponent.html) that were introduced - `igx-page-size` will add the per page dropdown and label and `igx-page-nav` will add the navigation action buttons and labels. ```html + + + [This is my custom content] + + ``` ```typescript @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; private _perPage = 15; private _dataLengthSubscriber: { unsubscribe: () => void; } | undefined; constructor(private remoteService: RemotePagingService) { } public ngAfterViewInit() { + this.grid1.isLoading = true; + this.remoteService.getData(0, this.perPage); } public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); } public perPageChange(perPage: number) { + const skip = this.page * perPage; + const top = perPage; + + this.remoteService.getData(skip, top); } ``` >[!NOTE] > In order the Remote Paging to be configured properly a `GridPagingMode.Remote` should be set: ```html ... public mode = GridPagingMode.Remote; ``` The last step will be to declare the paginator content based on your requirements. ```html + + [This is my custom content] + ``` After all the changes above, the following result will be achieved. ```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { Observable } from 'rxjs'; +import { RemotePagingService } from '../../services/remotePaging.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingService], + selector: 'app-remote-paging-grid-sample', + styleUrls: ['./remote-paging-sample.component.scss'], + templateUrl: './remote-paging-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] +}) +export class RemotePagingGridSampleComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + public page = 0; + public totalCount = 0; + public pages = []; + public data: Observable; + public selectOptions = [5, 10, 15, 25, 50]; + public mode = GridPagingMode.Remote; + private _perPage = 15; + private _dataLengthSubscriber; + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data: any) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); + } + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.grid1.isLoading = true; + this.remoteService.getData(0, this.perPage); + } + + public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); + } + + public perPageChange(perPage: number) { + const skip = this.page * perPage; + const top = perPage; + + this.remoteService.getData(skip, top); + } +} +``` +```html +
+ + + + + + + + + + + [This is my custom content] + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` ### Remote Paging with custom paginator In some cases you may want to define your own paging behavior and this is when we can take advantage of the Paging template and add our custom logic along with it. We are going to extend the Remote Paging example in order to demonstrate this: ```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { Observable } from 'rxjs'; +import { RemotePagingService } from '../../services/remotePaging.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; +import { RouterLink } from '@angular/router'; +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingService], + selector: 'app-custom-remote-paging-grid-sample', + styleUrls: ['./custom-remote-paging-sample.component.scss'], + templateUrl: './custom-remote-paging-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxButtonDirective, RouterLink, AsyncPipe] +}) +export class CustomRemotePagingGridSampleComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + + public page = 0; + public lastPage = false; + public firstPage = true; + public totalPages = 1; + public totalCount = 0; + public pages = []; + public data: Observable; + + private visibleElements = 5; + private _perPage = 10; + private _dataLengthSubscriber; + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0, true); + } + + public get shouldShowLastPage() { + return this.pages[this.pages.length - 1] !== this.totalPages - 1; + } + + public get shouldShowFirstPage() { + return this.pages[0] !== 0; + } + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + this.totalPages = Math.ceil(data / this.perPage); + this.buttonDeselection(this.page, this.totalPages); + this.grid1.isLoading = false; + this.setNumberOfPagingItems(this.page, this.totalPages); + }); + + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.grid1.isLoading = true; + this.remoteService.getData(0, this.perPage); + } + + public nextPage() { + this.firstPage = false; + this.page++; + const skip = this.page * this.perPage; + const top = this.perPage; + this.remoteService.getData(skip, top); + if (this.page + 1 >= this.totalPages) { + this.lastPage = true; + } + this.setNumberOfPagingItems(this.page, this.totalPages); + } + + public previousPage() { + this.lastPage = false; + this.page--; + const skip = this.page * this.perPage; + const top = this.perPage; + this.remoteService.getData(skip, top); + if (this.page <= 0) { + this.firstPage = true; + } + this.setNumberOfPagingItems(this.page, this.totalPages); + } + + public paginate(page: number, recalculate = false) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + if (recalculate) { + this.totalPages = Math.ceil(this.totalCount / this.perPage); + } + this.setNumberOfPagingItems(this.page, this.totalPages); + this.remoteService.getData(skip, top); + this.buttonDeselection(this.page, this.totalPages); + } + + public buttonDeselection(page: number, totalPages: number) { + if (totalPages === 1) { + this.lastPage = true; + this.firstPage = true; + } else if (page + 1 >= totalPages) { + this.lastPage = true; + this.firstPage = false; + } else if (page !== 0 && page !== totalPages) { + this.lastPage = false; + this.firstPage = false; + } else { + this.lastPage = false; + this.firstPage = true; + } + } + + public activePage(page) { + return page === this.page ? 'activePage' : ''; + } + + public setNumberOfPagingItems(currentPage, totalPages) { + if (currentPage > this.pages[0] && currentPage < this.pages[this.pages.length]) { + return; + } + if (this.pages.length === 0) { + const lastPage = (currentPage + this.visibleElements) <= totalPages ? + currentPage + this.visibleElements : totalPages; + for (let item = 0; item < lastPage; item++) { + this.pages.push(item); + } + return; + } + if (currentPage <= this.pages[0]) { + this.pages = []; + let firstPage = currentPage - 1 < 0 ? 0 : currentPage - 1; + firstPage = firstPage > totalPages - this.visibleElements ? + totalPages - this.visibleElements : firstPage; + firstPage = firstPage >= 0 ? firstPage : 0; + const lastPage = (firstPage + this.visibleElements) <= totalPages ? + firstPage + this.visibleElements : totalPages; + for (let item = firstPage; item < lastPage; item++) { + this.pages.push(item); + } + + } else if (currentPage >= this.pages[this.pages.length - 1]) { + this.pages = []; + let firstPage = currentPage > totalPages - this.visibleElements ? + totalPages - this.visibleElements : currentPage - 1; + firstPage = firstPage >= 0 ? firstPage : 0; + const lastPage = (firstPage + this.visibleElements) <= totalPages ? + firstPage + this.visibleElements : totalPages; + for (let item = firstPage; item < lastPage; item++) { + this.pages.push(item); + } + } + } +} +``` +```html +
+ + + + + + + + + +
+
+ + @if (shouldShowFirstPage) { + + {{1}} ... + + } + @for (item of pages; track item) { + + {{item + 1}} + + } + @if (shouldShowLastPage) { + + ... {{ totalPages + }} + + } + +
+
+ + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.pageNavLinks { + text-decoration: none; + font-size: 10.5pt; + color: #989898; +} + +.activePage { + font-size: 11.5pt; + font-weight: bold; +} + +.igx-input-group__input { + display: inline; +} + +#numberPager { + display: flex; + align-items: center; + justify-content: center; +} + +#numberPager span { + margin-left: .5rem; +} + +.fullWidth { + width: 100%; +} +``` Below you will find the methods that we've defined in order to implement our own `next` and `previous` page actions. ```typescript @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; public ngAfterViewInit() { + this.grid1.isLoading = true; + this.remoteService.getData(0, this.perPage); } public nextPage() { + this.firstPage = false; + this.page++; + const skip = this.page * this.perPage; + const top = this.perPage; + this.remoteService.getData(skip, top); + if (this.page + 1 >= this.totalPages) { + this.lastPage = true; + } + this.setNumberOfPagingItems(this.page, this.totalPages); } public previousPage() { + this.lastPage = false; + this.page--; + const skip = this.page * this.perPage; + const top = this.perPage; + this.remoteService.getData(skip, top); + if (this.page <= 0) { + this.firstPage = true; + } + this.setNumberOfPagingItems(this.page, this.totalPages); } public paginate(page: number, recalculate = false) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + if (recalculate) { + this.totalPages = Math.ceil(this.totalCount / this.perPage); + } + this.setNumberOfPagingItems(this.page, this.totalPages); + this.remoteService.getData(skip, top); + this.buttonDeselection(this.page, this.totalPages); } ``` ### Remote Paging with Batch editing With the examples so far we clarified how to set up the IgxGrid with remote data. Now, let's focus on enabling batch editing for the grid by following the [Batch Editing topic/guide](batch-editing.md). Before continuing with the sample it is good to clarify the current use case. When pagination is done on the server, the grid contains the data only for the current page and if we add new rows the newly added rows (with Batch Editing) will be concatenated with the current data that the grid contains. Therefore, if the server returns no data for a given page, grid's data source will be consisted only from the newly added rows, which the grid will paginate based on the defined pagination settings (page, perPage). ```typescript public ngOnInit() { + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + this._recordOnServer = data; + this._totalPagesOnServer = Math.floor(this.totalCount / this.perPage); + this.grid1.isLoading = false; + }); } ``` In order to handle this use case properly, we need to implement some custom logic. First, we have to know the total number of records that are on the server. Given that, we calculate the total number of data pages on the server (see `this._totalPagesOnServer`) and based on its value, we will implement the custom pagination logic. ```typescript public paginate(page: number) { + this.grid1.endEdit(true); + if (page > this._totalPagesOnServer) { + if (this.page !== this._totalPagesOnServer) { + const skipEl = this._totalPagesOnServer * this.perPage; + this.remoteService.getData(skipEl, this.perPage); + } + this.page = page - this._totalPagesOnServer; + this.page = page; + return; + } else { + this.page = 0; + } + this.page = page; + const skip = this.page * this.perPage; + this.remoteService.getData(skip, this.perPage); } ``` As you can see in the **paginate** method, custom pagination logic is performed, based on the `_totalPagesOnServer` value. #### Remote Paging with Batch Editing Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { Observable } from 'rxjs'; +import { RemotePagingWithBatchEditingService } from '../../services/remotePagingWithBatchEditing.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingWithBatchEditingService], + selector: 'app-remote-paging-batch-editing', + styleUrls: ['./batch-editing-remote-paging.component.scss'], + templateUrl: './batch-editing-remote-paging.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxDialogComponent, AsyncPipe] +}) +export class RemotePagingBatchEditingComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingWithBatchEditingService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + @ViewChild(IgxDialogComponent, { static: true }) public dialog: IgxDialogComponent; + + public page = 0; + public totalCount = 0; + public data: Observable; + public selectOptions = [5, 10, 15, 25, 50]; + public transactionsData: Transaction[] = []; + + private _perPage = 10; + private _dataLengthSubscriber; + private _recordsOnServer = 0; + private _totalPagesOnServer = 0; + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this._totalPagesOnServer = Math.floor(this._recordsOnServer / this.perPage); + this.paginate(0); + } + + public ngOnInit() { + this.data = this.remoteService.data$; + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + this._recordsOnServer = data; + this._totalPagesOnServer = Math.floor(this.totalCount / this.perPage); + }); + this.remoteService.getData(0, this.perPage).subscribe(() => { + this.grid1.isLoading = false; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.grid1.isLoading = true; + } + + public paginate(page: number) { + this.grid1.isLoading = true; + this.grid1.endEdit(true); + if (page > this._totalPagesOnServer) { + if (this.page !== this._totalPagesOnServer) { + const skipEl = this._totalPagesOnServer * this.perPage; + this.remoteService.getData(skipEl, skipEl + this.perPage); + } + this.grid1.isLoading = false; + this.grid1.paginator.page = page - this._totalPagesOnServer; + this.page = page; + return; + } else if (this.grid1.paginator) { + const newPage = page - this._totalPagesOnServer > -1 ? page - this._totalPagesOnServer : 0; + this.grid1.paginator.page = newPage; + } + const skip = page * this.perPage; + this.remoteService.getData(skip, skip + this.perPage); + this.page = page; + } + + public addRow() { + this.totalCount++; + const newID = this.generateRandomInteger(this.totalCount, this.totalCount * 100); + this.grid1.addRow({ + ID: newID, ProductName: 'Product Name', QuantityPerUnit: 'Quantity per Unit', + SupplierName: 'Supplier Name', UnitsInStock: 1, Rating: 1 + }); + } + + public deleteRow(rowID) { + const isTransaction = !this.grid1.data.some(d => d.ID === rowID); + if (isTransaction) { + this.totalCount--; + } + this.grid1.deleteRow(rowID); + if (isTransaction && this.grid1.dataView.length === 1) { + this.paginate(this.page - 1); + } + } + + public generateRandomInteger(start: number, end: number) { + return Math.floor(Math.random() * (end - start + 1)) + start; + } + + public undo() { + this.grid1.transactions.undo(); + this.computeTotalCount(); + this.preventDisplayingEmptyPages(); + } + + public redo() { + this.grid1.transactions.redo(); + this.computeTotalCount(); + this.preventDisplayingEmptyPages(); + } + + public openCommitDialog() { + this.transactionsData = this.grid1.transactions.getAggregatedChanges(true); + this.dialog.open(); + } + + public commit() { + this.grid1.isLoading = true; + this.dialog.close(); + const aggregatedChanges = this.grid1.transactions.getAggregatedChanges(true); + this.remoteService.processBatch(aggregatedChanges).subscribe({ + next: (count: number) => { + this.totalCount = count; + this._recordsOnServer = count; + this.grid1.transactions.commit(this.grid1.data); + this.preventDisplayingEmptyPages(); + }, + error: err => { + console.log(err); + }, + complete: () => { + this.grid1.isLoading = false; + } + }); + } + + public cancel() { + this.dialog.close(); + } + + public discard() { + this.grid1.transactions.clear(); + this.totalCount = this._recordsOnServer; + this.preventDisplayingEmptyPages(); + this.dialog.close(); + } + + public get hasTransactions(): boolean { + return this.grid1.transactions.getAggregatedChanges(false).length > 0; + } + + public stateFormatter(value: string) { + return JSON.stringify(value); + } + + public typeFormatter(value: string) { + return value.toUpperCase(); + } + + public classFromType(type: string): string { + return `transaction--${type.toLowerCase()}`; + } + + private preventDisplayingEmptyPages() { + this._totalPagesOnServer = Math.floor(this._recordsOnServer / this.perPage); + + const totalPages = Math.floor(this.totalCount / this.perPage); + if (this.page > 0 && + (this.page > totalPages || + (this.page === totalPages && + this.totalCount % this.perPage === 0))) { + this.paginate(totalPages - 1); + } + } + + private computeTotalCount() { + this.totalCount = this._recordsOnServer + this.grid1.transactions.getAggregatedChanges(true).filter(rec => rec.type === 'add').length; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ stateFormatter(val) }} + + + +
+ + + +
+ +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +.buttons-row { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px; +} +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0; +} +.transaction--update, .transaction--delete, .transaction--add { + font-weight: 600; +} +.transaction--add { + color: #6b3; +} +.transaction--update { + color: #4a71b9; +} +.transaction--delete { + color: #ee4920; +} +.transaction-log { + word-wrap: none; +} + +igx-paginator { + igx-paginator { + padding: 0 !important; + } +} +``` ## Known Issues and Limitations - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning - In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IRowSelectionEventArgs.html#oldSelection) event argument will not contain the full row data object for the rows that are currently out of the data view. In this case, `rowSelectionChanging.oldSelection` object will contain only one property, which is the `primaryKey` field. For the rest of the rows, currently in the data view, `rowSelectionChanging.oldSelection` will contain the whole row data. ## API References
- [IgxPaginatorComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html) - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Paging](paging.md) - [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md new file mode 100644 index 000000000..b3a70f29b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-actions.md @@ -0,0 +1,103 @@ +--- +_tocName: Row Actions +_premium: true +--- +--- title: Row actions in Angular Data Grid - Ignite UI for Angular _description: The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular ActionStrip components, Angular ActionStrip directives, Angular ActionStrip controls _license: commercial --- # Row Actions in Angular Data Grid The grid component in Ignite UI for Angular provides the ability to use [ActionStrip](../action-strip.md) and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations. ## Usage The first step is to import the **IgxActionStripModule** in our **app.module.ts** file: ```typescript // app.module.ts ... import { IgxActionStripModule } from 'igniteui-angular/action-strip'; // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxActionStripModule], + ... }) ``` The predefined `actions` UI components are: - [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - includes functionality and UI specifically designed for the grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#rowEditable) option and row deletion of the grid. - [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - includes functionality and UI specifically designed for the grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. They are added inside the `` and this is all needed to have an Action Strip providing default interactions. ```html + + + + + + + ``` >[!NOTE] > When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. ## Custom implementation These components expose templates giving flexibility for customization. For instance, if we would like to use the `ActionStrip` for a Gmail scenario with row actions such as `delete`, `edit` and etc. You can simply create button component with `igx-icon`, add click event to it and insert it into the `igx-action-strip` component. ```html + + + + + ``` ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-row-action-strip', + styleUrls: [`grid-action-strip-sample.scss`], + templateUrl: 'grid-action-strip-sample.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class GridActionStripSampleComponent { + @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; + + public data: any[]; + public discardedTransactionsPerRecord: Map = new Map(); + + constructor() { + this.data = DATA; + } + + public isDirty(rowContext: RowType) { + const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key); + return rowContext && (rowContext.deleted || isRowEdited); + } + + public isDeleted(rowContext: RowType) { + return rowContext && rowContext.deleted; + } + + public inEditMode(rowContext: RowType) { + return rowContext && rowContext.inEditMode; + } + + public startEdit(rowContext: RowType): void { + const firstEditable = rowContext.cells.filter(cell => cell.editable)[0]; + const grid = rowContext.grid; + + if (grid.rowList.filter(r => r === rowContext).length !== 0) { + grid.gridAPI.crudService.enterEditMode(firstEditable); + firstEditable.activate(null); + } + } + + public commit(rowContext: RowType) { + this.grid.transactions.commit(this.grid.data, rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, []); + } + + public redo(rowContext: RowType) { + const rowID = rowContext.key; + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID); + lastDiscarded.forEach((transaction) => { + const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id); + this.grid.transactions.add(transaction, recRef); + }); + this.discardedTransactionsPerRecord.set(rowID, []); + } + + public hasDiscardedTransactions(rowContext: RowType) { + if (!rowContext) { return false; } + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key); + return lastDiscarded && lastDiscarded.length > 0; + } + + public undo(rowContext: RowType) { + const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true) + .filter(x => x.id === rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard); + this.grid.transactions.clear(rowContext.key); + } +} +``` >[!NOTE] > The predefined actions inherit [`IgxGridActionsBaseDirective`]({environment:infragisticsBaseUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. ## API References For more detailed information regarding the Action Strip API, refer to the following links: - [`IgxActionStripComponent API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) Additional components and/or directives that can be used within the Action Strip: - [`IgxGridActionsBaseDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridactionsbasedirective.html) - [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - [`IgxDividerDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md new file mode 100644 index 000000000..c8c7a6675 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-adding.md @@ -0,0 +1,80 @@ +--- +_tocName: Row Adding +_premium: true +--- +--- title: Adding Rows in Angular Data Grid - Ignite UI for Angular _description: Learn how to use and customize the built-in row adding functionality with Ignite UI for Angular. CRUD capabilities and Intuitive grid row adding. See examples! _keywords: row adding, igniteui for angular, infragistics _license: commercial --- # Adding Rows in Angular Grid The Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. Add an [Action Strip](../action-strip.md) component with editing actions enabled in the grid's template, hover a row and use the provided button or press ALT + + to spawn the row adding UI. ## Angular Grid Row Adding Example The following sample demonstrates how to enable native row adding in the Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellEditorTemplateDirective, IgxColumnComponent, IgxGridEditingActionsComponent } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxFocusDirective } from 'igniteui-angular/directives'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-add-row', + styleUrls: [`grid-add-row-sample.component.scss`], + templateUrl: 'grid-add-row-sample.component.html', + imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxFocusDirective, IgxActionStripComponent, IgxGridEditingActionsComponent] +}) +export class GridAddRowSampleComponent { + public data: any[] = DATA; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.sample-wrapper { + margin: 0 auto; + padding: 10px; +} +```
## Row Adding Usage To get started import the `IgxGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxGridModule], + ... }) export class AppModule {} ``` Then define a Grid with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) set to true and an [Action Strip](../action-strip.md) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. ```html + + + + + + + + + + ``` > [!NOTE] > Setting primary key is mandatory for row adding operations. > [!NOTE] > Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) column's input to `false`. > [!NOTE] > The IgxGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/rowtype.html)) to fine tune which records the button shows for. The internal [`IgxBaseTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) is automatically provided for Grid. It holds pending cell changes until the row state is submitted or cancelled. ## Start Row Adding Programmatically Grid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.grid.beginAddRowById('ALFKI'); // spawns the add row UI under the row with PK 'ALFKI' this.grid.beginAddRowById(null); // spawns the add row UI as the first record ``` The `beginAddRowByIndex` method works similarly but requires you to specify the index _at_ which the UI should spawn. Allowed values range between 0 and the size of the data view - 1. ```typescript this.grid.beginAddRowByIndex(10); // spawns the add row UI at index 10 this.grid.beginAddRowByIndex(0); // spawns the add row UI as the first record ``` ## Positioning - The Default position row add UI is below the row that the end user clicked the add row button for. - The Grid scrolls to fully display the add row UI automatically. - The overlay for the add row UI maintains its position during scrolling. ## Behavior The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the [Grid Row Editing](row-editing.md) topic for more information. After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the Grid. In a Grid that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the Grid to its position if it is not in view. ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. ## Feature Integration - Any row adding operation will stop if the data view of the Grid gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, etc. - Summaries are updated after the row add operation finishes. The same is valid for the other data view dependant features such as sorting, filtering, etc. ## Customizing Row Adding Overlay ### Customizing Text Customizing the text of the row adding overlay is possible using the `igxRowAddTextDirective`. ```html + Adding Row + ``` ### Customizing Buttons Customizing the buttons of the row editing overlay is possible using the `igxRowEditActionsDirective`. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `igxRowEditTabStopDirective`. + + ```html + + + + ``` > [!NOTE] > Using `igxRowEditActions` directive will change edit actions for both editing and adding overlay buttons. ## Remote scenarios In most remote data scenarios the Primary Key assignment happens on the create server request. In this case the added records on the client will not have the final primary key value until saved on the server's data base. In that case the recommended way to handle this update in the Grid is as follows: - If the Grid does not use transactions. + + Once the create request is successfully completed and returns the added record data, you can replace that record's id in the local data record instance. - If the Grid uses transactions. + + Once the create request or batch update request is successfully completed and returns the added record instances (with their db generated ids), the related ADD transactions should be cleared from the transaction log using the [clear](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/transactionservice.html#clear) API method. This is necessary because the local transaction will have a generated id field, which may differ than the one created in the data base, so they should be cleared. You can then add the record(s) passed in the response to the local data instance. This will ensure that the remotely generated ids are always reflected in the local data, and subsequent update/delete operations target the correct record ids. ## Styling The row adding UI comprises the buttons in the `IgxActionStrip` editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics: - [Grid Row Editing](row-editing.md#styling) - [IgxSnackbar](../snackbar.md#styling) - [IgxActionStrip](../action-strip.md#styling) ## API References - [rowEditable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) - [onRowEditEnter](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onRowEditEnter) - [onRowEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onRowEdit) - [rowEditDone](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditDone) - [onRowEditCancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onRowEditCancel) - [endEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#endEdit) - [primaryKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#primaryKey) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxActionStripComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) - [IgxGridEditingActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) ## Additional Resources
- [Grid Overview](grid.md) - [Grid Editing](editing.md) - [Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md new file mode 100644 index 000000000..5f8ffb438 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-drag.md @@ -0,0 +1,1021 @@ +--- +_tocName: Row Drag +_premium: true +--- +--- title: Row Dragging in Angular Data Grid - Ignite UI for Angular _description: Row dragging in Angular Data Grid is used to quickly rearrange rows by dragging them with the mouse. See how to configure row dragging in your project. _keywords: angular drag component, material component, ignite ui for angular, infragistics _license: commercial --- # Row Dragging in Angular Grid In Ignite UI for Angular Grid, **RowDrag** is initialized on the root `igx-grid` component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDraggable) input. Enabling row dragging provides users with a row drag-handle with which they can initiate dragging of a row. ## Angular Grid Row Drag Example ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +// eslint-disable-next-line no-shadow +enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'add' +} + +@Component({ + selector: 'app-grid-row-drag-base-sample', + styleUrls: ['./grid-row-drag-base.component.scss'], + templateUrl: 'grid-row-drag-base.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxDropDirective] +}) + +export class GridDragBaseSampleComponent { + @ViewChild('sourceGrid', { read: IgxGridComponent, static: true }) public sourceGrid: IgxGridComponent; + @ViewChild('targetGrid', { read: IgxGridComponent, static: true }) public targetGrid: IgxGridComponent; + public data1: any[]; + public data2: any[]; + + constructor() { + this.data1 = DATA; + this.data2 = []; + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + this.targetGrid.addRow(args.dragData.data); + this.sourceGrid.deleteRow(args.dragData.key); + } + + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + +
Drop a row to add it to the grid
 + +
+``` +```scss +.grid-container { + display: flex; +} + +.grid-container .drop-area { + height: 500px; + width: 50%; + margin: 10px 20px; +} + +igx-grid { + margin: 20px; +} + +.empty-grid { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + height: 100%; +} +``` ## Configuration In order to enable row-dragging for your `igx-grid`, all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDraggable) to **`true`**. Once this is enabled, a row-drag handle will be displayed on each row. This handle can be used to initiate row dragging. ```html + ... ``` Clicking on the drag-handle and _moving the cursor_ while holding down the button will cause the grid's [`rowDragStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDragStart) event to fire. Releasing the click at any time will cause [`rowDragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDragEnd) event to fire. Below, you can find a walkthrough on how to configure an `igx-grid` to support row dragging and how to properly handle the drop event. @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { In this example, we'll handle dragging a row from a grid to a designated area and, when dropping it, removing it from the grid. } In this example, we'll handle dragging a row from one grid to another, removing it from the first data source and adding it to the second. ### Drop Areas Enabling row-dragging was pretty easy, but now we have to configure how we'll handle row-_dropping_. We can define where we want our rows to be dropped using the [`igxDrop` directive](../drag-drop.md). First we need to import the `IgxDragDropModule` in our app module: ```typescript import { ..., IgxDragDropModule } from 'igniteui-angular/directives'; // import { ..., IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package ... @NgModule({ + imports: [..., IgxDragDropModule] }) ``` Then, in our template, we define a drop-area using the directive's selector: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```html
+ delete +
Drag a row here to delete it
``` } In this case, our drop-area will be a whole second grid where we'll drop the rows. ```html + ... ``` Since the grid will initially be empty, we also define a template that will be more meaningful to the user: ```html + Drop a row to add it to the grid ``` You may enable animation when a row is dropped on a non-droppable area using the `animation` parameter of the [`rowDragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDragEnd) event. If set to true, the dragged row will animate back to its' original position when dropped over a non-droppable area. You may enable animation like this: ```typescript export class IgxGridRowDragComponent { + + public onRowDragEnd(args) { + args.animation = true; + } } ``` ### Drop Area Event Handlers Once we've defined our drop-area in the template, we have to declare our handlers for the `igxDrop`'s [`enter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#enter), [`leave`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#leave) and [`dropped`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#dropped) events in our component's `.ts` file. First, let's take a look at our `enter` and `leave` handlers. In those methods, we just want to change the icon of the drag's _ghost_ so we can indicate to the user that they are above an area that allows them to drop the row: ```typescript export class IgxGridRowDragComponent { + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } } ``` The `changeGhostIcon` **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the `igx-grid__drag-indicator` class that is applied to the drag-indicator container), changing the element's inner text to the passed one. The icons themselves are from the [`material` font set](https://material.io/tools/icons/) and are defined in a separate **`enum`**: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```typescript enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'remove' } ``` } ```typescript enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'add' } ``` Next, we have to define what should happen when the user actually _drops_ the row inside of the drop-area. @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```typescript export class IgxGridRowDragComponent { + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } } ``` Once the row is dropped, we just call the row's [`delete()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridRowComponent.html#delete) method } ```typescript export class IgxGridRowDragComponent { + @ViewChild('sourceGrid', { read: IgxGridComponent }) public sourceGrid: IgxGridComponent; + @ViewChild('targetGrid', { read: IgxGridComponent }) public targetGrid: IgxGridComponent; + + public onDropAllowed(args) { + this.targetGrid.addRow(args.dragData.data); + this.sourceGrid.deleteRow(args.dragData.key); + } } ``` We define a reference to each of our grids via the `ViewChild` decorator and the handle the drop as follows: - add a row to the `targetGrid` that contains the data of the row being dropped - remove the dragged row from the `sourceGrid` > [!NOTE] > When using row data from the event arguments (`args.dragData.data`) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. ### Templating the drag ghost The drag ghost can be templated using the `IgxRowDragGhost` directive, applied to a `` inside of the `igx-grid`'s body: ```html ... + +
+ arrow_right_alt +
+ ... ``` The result of the configuration can be seem below in a `igx-grid` with row dragging and multiple selection enabled. The demo shows the count of the currently dragged rows: #### Example Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxRowDragGhostDirective } from 'igniteui-angular/grids/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +@Component({ + selector: 'app-grid-multiple-row-drag', + styleUrls: ['./grid-multiple-row-drag.component.scss'], + templateUrl: './grid-multiple-row-drag.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowDragGhostDirective, IgxIconComponent, IgxDropDirective] +}) +export class GridMultipleRowDragComponent { + @ViewChild('sourceGrid', { read: IgxGridComponent, static: true }) + public sourceGrid: IgxGridComponent; + @ViewChild('targetGrid', { read: IgxGridComponent, static: true }) + public targetGrid: IgxGridComponent; + + public data1: any[]; + public data2: any[]; + public countIcon = 'drag_indicator'; + public dragIcon = 'arrow_right_alt'; + public selectionMode: GridSelectionMode = 'multiple'; + constructor() { + this.data1 = DATA; + this.data2 = []; + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + let selected = false; + const ids = this.sourceGrid.selectedRows; + const selectedRowData = this.sourceGrid.data.filter((record) => ids.includes(record.ID)); + selectedRowData.forEach((rowData) => { + selected = true; + this.targetGrid.addRow(rowData); + this.sourceGrid.deleteRow(rowData.ID); + }); + if (selected === false) { + this.targetGrid.addRow(args.dragData.data); + this.sourceGrid.deleteRow(args.dragData.key); + } + } + + public onEnter(args) { + this.dragIcon = 'add'; + } + public onRowDragStart(args) { + const count = this.sourceGrid.selectedRows.length || 1; + this.countIcon = `filter_${count > 9 ? '9_plus' : `${count}`}`; + } + public onLeave(args) { + this.onRowDragStart(args); + this.dragIcon = 'arrow_right_alt'; + } +} +``` +```html +
+ + + + + + + + + + + + +
+ {{dragIcon}}{{countIcon}} +
+ + + + + + + + + + + + + + + +
Drop a row to add it to the grid
+ + +
+``` +```scss +.grid-container { + display: flex; +} + +.grid-container .drop-area { + height: 500px; + width: 50%; + margin: 10px 20px; +} + +igx-grid { + margin: 20px; +} + +.empty-grid { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + height: 100%; +} + +.allow-drop { + z-index: 1; +} + +igx-icon{ + margin-top: 10px; +} +```
### Templating the drag icon The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (`drag_indicator`) to `drag_handle`. To do so, we can use the `igxDragIndicatorIcon` to pass a template inside of the `igx-grid`'s body: ```html ... + + drag_handle + ... ``` Once we've set the new icon template, we also need to adjust the `DEFAULT` icon in our `DragIcon enum`, so it's properly change by the `changeIcon` method: ```typescript enum DragIcon { + DEFAULT = "drag_handle", + ... } ``` @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ### Styling the drop area Once our drop handlers are properly configured, all that's left is to style our drop area a bit: ```css .drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; } :host { + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + width: 100%; } ``` The result can be seen in the demo below: } Once our drop handlers are properly configured, we're good to go! The result of the configuration can be seem below: #### Example Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxDragIndicatorIconDirective } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +// eslint-disable-next-line no-shadow +enum DragIcon { + DEFAULT = 'drag_handle', + ALLOW = 'add' +} + +@Component({ + selector: 'app-grid-row-drag-to-grid-sample', + styleUrls: ['./grid-row-drag-to-grid.component.scss'], + templateUrl: 'grid-row-drag-to-grid.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxDragIndicatorIconDirective, IgxIconComponent, IgxDropDirective] +}) + +export class GridDragToGridSampleComponent { + @ViewChild('sourceGrid', { read: IgxGridComponent, static: true }) public sourceGrid: IgxGridComponent; + @ViewChild('targetGrid', { read: IgxGridComponent, static: true }) public targetGrid: IgxGridComponent; + public data1: any[]; + public data2: any[]; + + constructor() { + this.data1 = DATA; + this.data2 = []; + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + this.targetGrid.addRow(args.dragData.data); + this.sourceGrid.deleteRow(args.dragData.key); + } + + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} +``` +```html +
+ + + + + + + + + + + + + drag_handle + + + + + + + + + + + + + +
Drop a row to add it to the grid
 + +
+``` +```scss +.grid-container { + display: flex; +} + +.grid-container .drop-area { + height: 500px; + width: 50%; + margin: 10px 20px; +} + +igx-grid { + margin: 20px; +} + +.empty-grid { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + height: 100%; +} +```
## Application Demo ### Using Row Drag Events The following demo demonstrates how to use row drag event information to change both states of a custom component, where the row is dropped, and the source grid itself. Try to drag moons from the grid and drop them to their corresponding planets. Row drag ghost background is dynamically changed, depending on the hovered planet. If you succeed then the row in the grid will be selected and dragging will be disabled for it. Clicking planets will give you useful information. ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChildren } from '@angular/core'; +import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxDropDirective } from 'igniteui-angular/directives'; +import { moonData, planetData } from './data'; +import { PlanetComponent as PlanetComponent } from './planet/planet.component'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +// eslint-disable-next-line no-shadow +enum HoverClassList { + ALLOW = 'allow-drop', + DENY = 'deny-drop' +} + +@Component({ + selector: 'app-grid-row-drag-sample', + styleUrls: ['./grid-row-drag.component.scss'], + templateUrl: 'grid-row-drag.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, PlanetComponent, IgxDropDirective] +}) + +export class GridDragSampleComponent { + @ViewChildren(PlanetComponent) public planets: PlanetComponent[]; + public moonData: any[]; + public planetData: any[]; + + constructor() { + this.moonData = moonData; + this.planetData = planetData; + } + + public onRowDragStart(args) { + if (args.dragData.isSelected) { + args.cancel = true; + } + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onEnter(args, planet: PlanetComponent) { + args.drag.ghostElement.classList.add( + this.isDropAllowed(args.dragData.data.name, planet.name) ? HoverClassList.ALLOW : HoverClassList.DENY); + } + + public onLeave(args) { + const dragGhost: HTMLElement = args.drag.ghostElement; + + if (dragGhost) { + dragGhost.classList.remove(HoverClassList.ALLOW); + dragGhost.classList.remove(HoverClassList.DENY); + } + } + + public onDrop(args, planet: PlanetComponent) { + const row: RowType = args.dragData; + if (this.isDropAllowed(row.data.name, planet.name)) { + row.data.planet = planet.name; + row.grid.selectRows([row.key]); + + planet.moonsCount++; + } + } + + private isDropAllowed(dragMoonName: string, dropPlanetName: string): boolean { + return this.planetData.filter((p) => p.name === dropPlanetName)[0].moons.includes(dragMoonName); + } +} +``` +```html +
+
+ + + + + + + +
+
+
+ @for (data of planetData; track data) { + + } +
+
+
+
+
+
+``` +```scss +.container { + display: flex; + width: 100%; +} + +.moon-info { + width: 60%; + padding: 25px; +} + +.solar-system +{ + width: 40%; + padding: 25px; +} + +.solar-system { + display: flex; + flex-direction: column; + flex-flow: column; +} + +.planets { + display: flex; + flex-direction: column; + flex-flow: column-reverse; +} + +::ng-deep { +.allow-drop { + background-color: #72da67 !important; + opacity: 0.4; +} + +.deny-drop { + background-color: #e41c77 !important; + opacity: 0.4; +} +} + +planet.dragOver { + box-shadow: 5px 10px 18px #777;; + transition: all 300ms ease-in-out; +} + +.sun-wrapper { + display: flex; + justify-content: center; + position: relative; + height: 30px; + width: 100%; + overflow: hidden; +} + +.sun { + position: absolute; + border-radius: 50%; + border: 1px solid #777;; + width: 40%; + height: 100px; + background: #ffad00; +} + +@media only screen and (max-width: 800px) { + .moon-info { + padding: 5px; + } + .solar-system { + padding: 5px; + } +} +``` > [!NOTE] > The classes applied to the row drag ghost, used in the demo above, are using ::ng-deep modifier, because row drag is an internal grid feature and cannot be accessed on application level, due to the CSS encapsulation. ### Row Reordering Demo With the help of the grid's row drag events and the `igxDrop` directive, you can create a grid that allows you to reorder rows by dragging them. Since all of the actions will be happening _inside_ of the grid's body, that's where you have to attach the `igxDrop` directive: ```html + ... ``` > [!NOTE] > Make sure that there is a `primaryKey` specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered Once `rowDraggable` is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: - Was the row dropped inside of the grid? - If so, on which _other_ row was the dragged row dropped? - Once you've found the _target_ row, swap the records' places in the `data` array @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { - Is the row expanded? If so, collapse it. - Was the row dropped inside of the grid? - If so, on which _other_ row was the dragged row dropped? - Once you've found the _target_ row, swap the records' places in the `data` array - Was the row initially selected? If so, mark it as selected. } Below, you can see this implemented in the component's `.ts` file: ```typescript export class GridRowReorderComponent { + public onDropAllowed(args) { + const event = args.originalEvent; + const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(), + { x: event.clientX, y: event.clientY }); + if (currRowIndex === -1) { return; } + this.grid.deleteRow(args.dragData.key); + this.data.splice(currRowIndex, 0, args.dragData.data); + } + + private getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + return this.data.indexOf(this.data.find((r) => r.rowID === row.rowID)); + } + } + + return -1; + } } ``` With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. Holding onto the drag icon will allow you to move a row anywhere in the grid: ```typescript +import { Component, QueryList, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxRowDirective, RowType } from 'igniteui-angular/grids/core'; +import { IgxDropDirective } from 'igniteui-angular/directives'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-row-reorder-sample', + styleUrls: ['grid-row-reorder.scss'], + templateUrl: 'grid-row-reorder.html', + imports: [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridRowReorderComponent { + @ViewChild('grid', { read: IgxGridComponent, static : true }) + public grid: IgxGridComponent; + public data: any[]; + + constructor() { + this.data = DATA; + } + + public onDropAllowed(args) { + const event = args.originalEvent; + const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(), + { x: event.clientX, y: event.clientY }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + this.grid.deleteRow(args.dragData.key); + this.data.splice(currRowIndex, 0, args.dragData.data); + } + + private getCurrentRowIndex(rowList: IgxRowDirective[], cursorPosition) { + for (const row of rowList) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return this.data.indexOf(this.data.find((r) => r.ID === row.key)); + } + } + + return -1; + } +} +```
### Improving UX in row drag scenarios Being able to obtain the row index which is currently below the cursor provides you with the opportunity to build rich custom functionalities and to improve the UX of your application. For example, you can change the drag ghost or display a drop indicator, based on the position of the dragged row over the grid. Another useful behavior that you can achieve that way is to scroll the grid up or down while dragging a row, when reaching the border of the grid. Below you can find example snippets of a couple of custom implementations you can achieve by knowing the row's position. #### Changing the drag ghost based on cursor position In the snippets below you see how you can change the text inside the drag ghost to display the name of the hovered row. First, you specify a template which you'd like to use for the drag ghost. The `dropName` property will dynamically change, getting the name of the row over which the cursor is hovering: ```html +
+
{{ dropName }}
+
``` Then, define a method that returns the instance of the row you're over (similar to the one used in the [row reordering demo](#row-reordering-demo)): ```typescript class MyRowGhostComponent { + private getRowDataAtPoint(rowList: IgxGridRowComponent[], cursorPosition: Point): any { + for (const row of rowList) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + return this.data.find((r) => r.rowID === row.rowID); + } + } + return null; + } } ``` Finally, we create a method that will be used to handle the [`IgxDragDirective.dragMove`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragMove) event (emitted for the dragged row). The method will change the value of the property used in the `igxRowDragGhost` template and force a rerender. We want to subscribe to the `dragMove` event only of the specific row we're dragging and unsubscribe from it (to prevent memory leaks) each time a row is dropped. ```typescript class MyRowGhostComponent { + public ngAfterViewInit(): void { + this.grid.rowDragStart.pipe(takeUntil(this.destroy$)).subscribe(this.onRowDragStart.bind(this)); + } + + private onRowDragStart(e: IRowDragStartEventArgs) { + if (e !== null) { + this._draggedRow = e.dragData.rowData; + } + const directive = e.dragDirective; + directive.dragMove + .pipe(takeUntil(this.grid.rowDragEnd)) + .subscribe(this.onDragMove.bind(this)); + } + + private onDragMove(args: IDragMoveEventArgs) { + const cursorPosition = this.getCursorPosition(args.originalEvent); + const hoveredRowData = this.getRowDataAtPoint( + this.grid.rowList.toArray(), + cursorPosition + ); + if (!hoveredRowData) { + args.cancel = true; + return; + } + const rowID = hoveredRowData.ID; + if (rowID !== null) { + let newName = this.dropName; + if (rowID !== -1) { + const targetRow = this.grid.rowList.find((e) => { + return e.rowData.ID === rowID; + }); + newName = targetRow?.rowData.Name; + } + if (newName !== this.dropName) { + this.dropName = newName; + args.owner.cdr.detectChanges(); + } + } + } } ``` #### Displaying a drop indicator based on cursor position In the demo in the next section you see how you can display an indicator of where the dragged row would be dropped. You can customize this indicator as you like - it may be a placeholder row, placed at the position where the dragged row would be dropped, a border style indicating if the dragged row would be dropped above or below the currently hovered row, etc. In order to track the position of the cursor, we bind to the `dragMove` event of the [`IgxDragDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdragdirective.html#dragMove) when we start dragging a row. > [!NOTE] > Make sure that there is a `primaryKey` specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered ```typescript public ngAfterViewInit() { + this.grid.rowDragStart + .pipe(takeUntil(this.destroy$)) + .subscribe(this.handleRowStart.bind(this)); } private handleRowStart(e: IRowDragStartEventArgs): void { + if (e !== null) { + this._draggedRow = e.dragData.data; + } + const directive = e.dragDirective; + directive.dragMove + .pipe(takeUntil(this.grid.rowDragEnd)) + .subscribe(this.handleDragMove.bind(this)); } private handleDragMove(event: IDragMoveEventArgs): void { + this.handleOver(event); } private handleOver(event: IDragMoveEventArgs) { + const ghostRect = event.owner.ghostElement.getBoundingClientRect(); + const rowIndex = this.getRowIndexAtPoint(this.grid.rowList.toArray(), { + x: ghostRect.x, + y: ghostRect.y + }); + if (rowIndex === -1) { + return; + } + const rowElement = this.grid.rowList.find( + e => e.rowData.ID === this.grid.data[rowIndex].ID + ); + if (rowElement) { + this.changeHighlightedElement(rowElement.element.nativeElement); + } } private clearHighlightElement(): void { + if (this.highlightedRow !== undefined) { + this.renderer.removeClass(this.highlightedRow, 'underlined-class'); + } } private setHightlightElement(newElement: HTMLElement) { + this.renderer.addClass(newElement, 'underlined-class'); + this.highlightedRow = newElement; } private changeHighlightedElement(newElement: HTMLElement) { + if (newElement !== undefined) { + if (newElement !== this.highlightedRow) { + this.clearHighlightElement(); + this.setHightlightElement(newElement); + } else { + return; + } + } } ```
#### Scrolling the grid on row drag A very useful scenario is being able to scroll the grid when the dragged row reaches its' top or bottom border. This allows reordering rows outside of the current viewport when the number of rows in the grid requires a scrollbar. Below you see an example of the two methods we use to check if we have reached the edge of the viewport and to scroll it if needed. The `isGridScrolledToEdge` accepts one parameter - the direction we'd like to scroll the grid (1 for "Down", -1 for "Up") and returns `true` if we've reach the final row in that direction. The `scrollGrid` method will attempt to scroll the grid in a direction (1 or -1), doing nothing if the grid is already at _that_ edge. ```typescript class MyGridScrollComponent { + private isGridScrolledToEdge(dir: 1 | -1): boolean { + if (this.grid.data[0] === this.grid.rowList.first.data && dir === -1) { + return true; + } + if ( + this.grid.data[this.grid.data.length - 1] === this.grid.rowList.last.data && + dir === 1 + ) { + return true; + } + return false; + } + + private scrollGrid(dir: 1 | -1): void { + if (!this.isGridScrolledToEdge(dir)) { + if (dir === 1) { + this.grid.verticalScrollContainer.scrollNext(); + } else { + this.grid.verticalScrollContainer.scrollPrev(); + } + } + } } ``` We'll still be subscribing to the `dragMove` event of the specific row in the way we did in the previous example. Since `dragMove` is fired only when the cursor actually moves, we want to have a nice and simple way to auto-scroll the grid when the row is at one of the edges, but the user **does not** move the mouse. We'll an additional method which will setup an `interval`, auto-scrolling the grid every `500ms`. We create and subscribe to the `interval` when the pointer reaches the grid's edge and we `unsubscribe` from that `interval` every time the mouse moves or the row is dropped (regardless of cursor position). ```typescript class MyGridScrollComponent { + public ngAfterViewInit() { + this.grid.rowDragStart + .pipe(takeUntil(this.destroy$)) + .subscribe(this.onDragStart.bind(this)); + this.grid.rowDragEnd + .pipe(takeUntil(this.destroy$)) + .subscribe(() => this.unsubInterval()); + } + + private onDragMove(event: IDragMoveEventArgs): void { + this.unsubInterval(); + const dir = this.isPointOnGridEdge(event.pageY); + if (!dir) { + return; + } + this.scrollGrid(dir); + if (!this.intervalSub) { + this.interval$ = interval(500); + this.intervalSub = this.interval$.subscribe(() => this.scrollGrid(dir)); + } + } + + private unsubInterval(): void { + if (this.intervalSub) { + this.intervalSub.unsubscribe(); + this.intervalSub = null; + } + } } ``` Following is the example of both scenarios described above - showing a drop indicator and scrolling the viewport when border's edge is reached. ```typescript +import { Component, ViewChild, AfterViewInit, OnDestroy, Renderer2, inject } from '@angular/core'; +import { IDragMoveEventArgs, IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IRowDragStartEventArgs, IgxColumnComponent, IgxRowDirective } from 'igniteui-angular/grids/core'; +import { Point } from 'igniteui-angular/core'; +import { DATA } from '../../data/customers'; +import { Subject, interval, Observable, Subscription } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-drop-indicator', + styleUrls: ['grid-drop-indicator.scss'], + templateUrl: 'grid-drop-indicator.html', + imports: [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy { + private renderer = inject(Renderer2); + + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data: any[]; + private destroy$ = new Subject(); + private intervalSub: Subscription; + private interval$: Observable; + private _draggedRow: any; + private highlightedRow: HTMLElement; + + constructor() { + this.data = DATA; + } + + public onDropAllowed(args: IDropDroppedEventArgs): void { + const event = args.originalEvent; + const currRowIndex = this.getRowIndexAtPoint(this.grid.rowList.toArray(), { + x: event.clientX, + y: event.clientY + }); + if (currRowIndex === -1) { + return; + } + // remove the row that was dragged and place it onto its new location + this.grid.deleteRow(this._draggedRow[this.grid.primaryKey]); + this.data.splice(currRowIndex, 0, this._draggedRow); + this.clearHighlightElement(); + } + + public ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + + public ngAfterViewInit() { + this.grid.rowDragStart + .pipe(takeUntil(this.destroy$)) + .subscribe(this.handleRowStart.bind(this)); + this.grid.rowDragEnd + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.unsubInterval(); + this.clearHighlightElement(); + }); + } + + private getRowIndexAtPoint( + rowList: IgxRowDirective[], + cursorPosition: Point + ): number { + for (const row of rowList) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if ( + cursorPosition.y > rowRect.top + window.scrollY && + cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && + cursorPosition.x < rowRect.right + window.scrollX + ) { + // return the index of the targeted row + return this.data.indexOf(this.data.find(r => r.ID === row.key)); + } + } + + return -1; + } + + /** + * Unsubs from the autoscroll interval + */ + private unsubInterval(): void { + if (this.intervalSub) { + this.intervalSub.unsubscribe(); + this.intervalSub = null; + } + } + + /** + * Handles the grid.onRowDragStart event + */ + private handleRowStart(e: IRowDragStartEventArgs): void { + if (e !== null) { + this._draggedRow = e.dragData.data; + } + const directive = e.dragDirective; + directive.dragMove + .pipe(takeUntil(this.grid.rowDragEnd)) + .subscribe(this.handleDragMove.bind(this)); + } + + /** + * Handles the onDragMove event + */ + private handleDragMove(event: IDragMoveEventArgs): void { + this.handleOver(event); + this.unsubInterval(); + const dir = this.isPointOnGridEdge(event.pageY); + if (!dir) { + return; + } + this.scrollGrid(dir); + if (!this.intervalSub) { + this.interval$ = interval(500); + this.intervalSub = this.interval$.subscribe(() => this.scrollGrid(dir)); + } + } + + /** + * Returns if the point is on the upper (-1) or lower (1) edge of a rectangle + */ + private isPointOnGridEdge(pageY: number): 1 | -1 { + const rect: ClientRect = this.grid.nativeElement + .querySelector('.igx-grid__tbody') + .getBoundingClientRect(); + if (pageY >= rect.bottom) { + return 1; + } else if (pageY <= rect.top) { + return -1; + } + } + + /** + * Checks if the grid is scrolled to its upper (-1) or lower (1) edge + */ + private isGridScrolledToEdge(dir: 1 | -1): boolean { + if (this.grid.data[0] === this.grid.rowList.first.data && dir === -1) { + return true; + } + if ( + this.grid.data[this.grid.data.length - 1] === + this.grid.rowList.last.data && + dir === 1 + ) { + return true; + } + return false; + } + + /** + * Attempts to scroll the grid in target direction + * + * Returns whether the grid was scrolled + */ + private scrollGrid(dir: 1 | -1): void { + if (!this.isGridScrolledToEdge(dir)) { + if (dir === 1) { + this.grid.verticalScrollContainer.scrollNext(); + } else { + this.grid.verticalScrollContainer.scrollPrev(); + } + } + } + + private handleOver(event: IDragMoveEventArgs) { + const ghostRect = event.owner.ghostElement.getBoundingClientRect(); + const rowIndex = this.getRowIndexAtPoint(this.grid.rowList.toArray(), { + x: ghostRect.x, + y: ghostRect.y + }); + if (rowIndex === -1) { + return; + } + const rowElement = this.grid.rowList.find( + e => e.data.ID === this.grid.data[rowIndex].ID + ); + if (rowElement) { + this.changeHighlightedElement(rowElement.element.nativeElement); + } + } + + private clearHighlightElement(): void { + if (this.highlightedRow !== undefined) { + this.renderer.removeClass(this.highlightedRow, 'underlined-class'); + } + } + private setHightlightElement(newElement: HTMLElement) { + this.renderer.addClass(newElement, 'underlined-class'); + this.highlightedRow = newElement; + } + + private changeHighlightedElement(newElement: HTMLElement) { + if (newElement !== undefined) { + if (newElement !== this.highlightedRow) { + this.clearHighlightElement(); + this.setHightlightElement(newElement); + } else { + return; + } + } + } +} +```
## Limitations Currently, there are no known limitations for the `rowDraggable` directive. ## API References - [rowDraggable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDraggable) - [rowDragStart](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDragStart) - [rowDragEnd](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowDragEnd) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) ## Additional Resources
- [Grid Overview](grid.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md new file mode 100644 index 000000000..1e0b2d5a6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-editing.md @@ -0,0 +1,188 @@ +--- +_tocName: Row Editing +_premium: true +--- +--- title: Editing Rows in Angular Data Grid - Ignite UI for Angular _description: Want to enable row editing in Angular Data Grid? Need a powerful API for CRUD operations? Try our Ignite UI for Angular Data Grid rows editing component! _keywords: row editing, igniteui for angular, infragistics _license: commercial --- # Angular Grid Row Editing The Grid provides a convenient way to perform data manipulations through inline editing and a powerful API for Angular CRUD operations. Click on a row and press **Enter key** or simply double click with the mouse on the row that needs to be modified. ## Angular Grid Row Editing Example The following sample demonstrates how to enable row editing in the Grid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxFocusDirective } from 'igniteui-angular/directives'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-row-edit', + styleUrls: [`grid-row-editing-sample.component.scss`], + templateUrl: 'grid-row-editing-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxFocusDirective] +}) +export class GridRowEditSampleComponent { + public data: any[] = DATA; +} +``` +```html +
+ + + + + + + + + + + + + + + +
+``` +```scss +.sample-wrapper { + margin: 0 auto; + padding: 16px; +} +```
> [!NOTE] > When a row is in edit mode, then clicking on a cell on another row will act like the Done button is pressed - submit all the changes of the previous row. If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. ## Row Editing Usage To get started import the `IgxGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxGridModule], + ... }) export class AppModule {} ``` Then define a Grid with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) set to true: ```html + + + + + + + + + + ``` > [!NOTE] > Setting primary key is mandatory for row editing operations. > [!NOTE] > It's not needed to enable editing for individual columns. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) property in the Grid, will mean that all rows, with defined `field` property, excluding primary one, will be editable. If you want to disable editing for specific column, then you set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) column's input to `false`. ```typescript import { Component, ViewChild } from '@angular/core'; import { data } from './data'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; // import { IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package @Component({ + selector: 'app-grid-row-edit', + styleUrls: [`grid-row-editing-sample.component.css`], + templateUrl: 'grid-row-editing-sample.component.html' }) export class GridRowEditSampleComponent { + @ViewChild('gridRowEdit', { read: IgxGridComponent }) public gridRowEdit: IgxGridComponent; + + public data: any[]; + + constructor() { + this.data = data; + } } ``` > [!NOTE] > The Grid uses internally a provider [`IgxBaseTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) that holds pending cell changes, until row state submitted or cancelled. ## Positioning - Default position of the overlay will be below the row that is in edit mode - If there is no space below the row then overlay will appear above the row. - Once shown - top or bottom, overlay will maintain this position during scrolling, until the overlay is closed. ## Behavior - If row is in edit mode, then editing will continue, if a cell from the same row is clicked. - Clicking "Done" button will finish row editing and will submit changes either to the data source, or to a transaction if available. In addition row will exit edit mode. - Clicking "Cancel" button will revert all current changes in the row and row will exit edit mode. - If row is in edit mode, then clicking a cell from another row will finish the current row edit and will submit new row changes (the same behavior clicking "Done" button). If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. - If row is in edit mode and Grid is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When Grid is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the Grid, the cell will also stay in edit mode. - When perform _sorting_, _filtering_, _searching_ and _hiding_ operations, will revert all current changes in the row and row will exit edit mode. - When perform _paging_, _resizing_, _pinning_ and _moving_ operations, will exit edit mode and will submit latest value. - Each modified cell gets edited style until row edit is finished. This is the behavior, when Grid is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed. ## Keyboard Navigation - `Enter` and `F2` enters row edit mode - `Esc` exits row edit mode and doesn't submit any of the cell changes, made while the row was in edit mode. - `Tab` move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. ## Feature Integration - Any data changing operation will terminate row editing operations and will submit current row changes. This will include operations like sorting, changing grouping and filtering criteria, paging, etc. - Summaries will be updated after row edit is finished. Same is valid for the other features like sorting, filtering, etc. - Expanding and collapsing grouped rows will not terminate editing for the current row. ## Customizing Row Editing Overlay ### Customizing Text Customizing the text of the row editing overlay is possible using the `igxRowEditTextDirective`. The `rowChangesCount` property is exposed and it holds the count of the changed cells. ```html + Changes: {{rowChangesCount}} + ``` ### Customizing Buttons Customizing the buttons of the row editing overlay is possible using the `igxRowEditActionsDirective`. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `igxRowEditTabStopDirective`. + + ```html + + + + ``` ## Styling Using the [Ignite UI for Angular Theme Library](../themes/index.md), we can greatly alter the Row Editing overlay. The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: + - [`igx-banner`](../banner.md) in order to render its contents + - [`igx-button`](../button.md)s are rendered in the default template (for the `Done` and `Cancel` buttons). In the below example, we will make use of those two components' styling options, [`button styling`](../button.md#styling) & [`banner-styling`](../banner.md#styling), to customize the experience of our IgxGrid's Row Editing. We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in the [Cell Styling section](cell-editing.md#styling). ### Import theme The easiest way to style the Row Editing banner is to define styles in our `app`'s global style file (typically `styles.scss`). The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Once we've imported the themes file, we can create custom themes. #### Define the theme We can now define a custom [`banner theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) that will affect our Row Editing background and make use of one of the predefined palettes namely `$purple-palette` : ```scss $banner-theme: banner-theme( + $banner-background: #e3e3e3, + $banner-message-color: color($purple-palette, "secondary", 600) ); ``` Here we are using `my-banner-palette` in conjunction with [`igx-color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) (exposed by the theme library) for generating our colors. ### Include the theme All we have to do now is apply the theme with a Sass `@include` statement. We pass our newly defined `$banner-theme` through the [`tokens mixin`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-tokens): ```scss :host { + @include tokens($banner-theme); } ``` ### Component styles Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope the banner theme to the style file of the specific component it's applied to. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid Row Editing Overlay. ```scss // custom.component.scss :host { + ::ng-deep { + @include tokens($banner-theme); + } } ``` With the above syntax, our custom banner theme properly applies to the grid's Row Editing overlay. ### Custom Templates To further customize our Row Editing overlay, we can pass a custom template so we can style the `Done` and `Cancel` buttons separately: ```html + +
+ + +
+ ``` After we've defined our custom buttons, we can make use of the [`flat-icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-icon-button-theme) to style them. You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](../icon-button.md#icon-button-styling). We can create a custom theme for our `Done` and `Cancel`: ```scss // custom.component.scss ... $button-theme: flat-icon-button-theme( + $palette: $purple-palette ); ... .custom-buttons { + @include tokens($button-theme); } ``` We scope our `@include` statement in `.custom-buttons` so that it is only applied to the `Done`and `Cancel` buttons. ### Demo After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below: ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellEditorTemplateDirective, IgxColumnComponent, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxFocusDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-grid-row-edit-style', + styleUrls: [`grid-row-editing-style.component.scss`], + templateUrl: 'grid-row-editing-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxFocusDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] +}) +export class GridRowEditStyleComponent { + public data: any[]; + + constructor() { + this.data = DATA; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + Changes: {{rowChangesCount}} + + + +
+ + +
+ + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$banner-theme: banner-theme( + $banner-background: #e3e3e3, + $banner-message-color: color($purple-palette, "secondary", 600), +); +$banner-theme: banner-theme( + $banner-background: #494949, + $banner-message-color: #ffcd0f, +); + +$icon-button-theme: flat-icon-button-theme( + $foreground: #ffcd0f, + $hover-foreground: #ffffff +); + +:host { + @include tokens($banner-theme); + @include tokens($icon-button-theme); +} + +igx-grid { + @include palette($purple-palette); +} +```
>[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## Known Issues and Limitations - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ## API References - [rowEditable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) - [onRowEditEnter](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onRowEditEnter) - [onRowEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onRowEdit) - [rowEditDone](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditDone) - [onRowEditCancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onRowEditCancel) - [endEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#endEdit) - [field](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#field) - [editable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) - [primaryKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#primaryKey) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Grid Overview](grid.md) - [Grid Editing](editing.md) - [Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md new file mode 100644 index 000000000..0373cde9f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-pinning.md @@ -0,0 +1,444 @@ +--- +_tocName: Row Pinning +_premium: true +--- +--- title: Row Pinning in Angular Data Grid - Ignite UI for Angular _description: Use the Angular Row pinning feature to lock rows with a rich and easy to use API. Let users pin rows in a particular order or duplicate them in a special area. _keywords: lock row, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Row Pinning One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. **Row Pinning** in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an `igxActionStrip` component in the context of Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. ## Angular Grid Row Pinning Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IPinningConfig, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-row-pinning', + templateUrl: 'grid-row-pinning.component.html', + styleUrls: ['./grid-row-pinning.component.scss'], + imports: [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] +}) + +export class GridRowPinningSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) + public grid: IgxGridComponent; + public data: any[]; + + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top }; + + constructor() { + this.data = DATA; + } + + public ngOnInit() { + this.grid.pinRow(this.data[0].ID); + this.grid.pinRow(this.data[3].ID); + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } +} +``` +```html +
+ Bottom Row Pinning toggle +
+
+ + + + + + + + + + + + + + + +
+``` +```scss +.grid-container { + display: flex; + padding: 20px; +} + +.switches { + margin-top: 24px; +} +``` ## Row Pinning UI The built-in row pinning UI is enabled by adding an `igxActionStrip` component with the `GridPinningActions` component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. ```html + + + + + + + ``` ## Row Pinning API Row pinning is controlled through the `pinned` input of the [`row`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html). Pinned rows are rendered at the top of the Grid by default and stay fixed through vertical scrolling of the unpinned rows in the Grid body. ```typescript this.grid.getRowByIndex(0).pinned = true; ``` You may also use the Grid's [`pinRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#pinRow) or [`unpinRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#unpinRow) methods of the [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) to pin or unpin records by their ID: ```typescript this.grid.pinRow('ALFKI'); this.grid.unpinRow('ALFKI'); ``` Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#primaryKey) of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state. A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the [`rowPinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowPinning) event and changing the [`insertAtIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipinroweventargs.html#insertAtIndex) property of the event arguments to the desired position index. ```html ``` ```typescript public rowPinning(event) { + event.insertAtIndex = 0; } ``` ## Pinning Position You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. ```html ``` ```typescript public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; ``` ## Custom Row Pinning UI You can define your custom UI and change the pin state of the rows via the related API. ### Via extra column with icon Let's say that instead of an action strip you would like to show a pin icon in every row allowing the end-user to click and change a particular row's pin state. This can be done by adding an extra column with a cell template containing the custom icon. ```html + + + + {{cell.row.pinned ? 'lock' : 'lock_open'}} + + + + + ``` On click of the custom icon the pin state of the related row can be changed using the row's API methods. ```typescript public togglePinning(row: IgxGridRow, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } } ``` #### Demo ```typescript +import { AfterViewInit, Component, ViewChild, inject } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, RowPinningPosition, RowType } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { DATA } from '../../data/customers'; +import { icons } from '../../services/svgIcons'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +const FILTERING_ICONS_FONT_SET = 'filtering-icons'; + +@Component({ + selector: 'app-grid-row-pinning-extra-column', + templateUrl: 'grid-row-pinning-extra-column.component.html', + styleUrls: ['./grid-row-pinning-extra-column.component.scss'], + imports: [IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] +}) + +export class GridRowPinningExtraColumnSampleComponent implements AfterViewInit { + private iconService = inject(IgxIconService); + + @ViewChild('grid', {read: IgxGridComponent, static: true}) + public grid: IgxGridComponent; + public data: any[]; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + constructor() { + this.data = DATA; + } + + public togglePinning(row: RowType, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } + + public ngAfterViewInit() { + const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin'); + pinnedIcons.forEach(icon => { + if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) { + this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET); + } + }); + } +} +``` +```html +
+ Bottom Row Pinning toggle +
+
+ + + + + + + + + + + + + + + + +
+``` +```scss +.grid-container { + display: flex; + padding: 20px; +} + +.pin-icon { + cursor: pointer; + color: #999; +} + +.pin-icon:hover { + color: #444 +} + +.switches { + margin-top: 24px; +} +``` ### Via row drag Let's say that you want to be able to directly drag and drop a row between the pinned and unpinned rows to change its pin state. This can be achieved by enabling the row drag feature and pinning/unpinning the rows via the API on drop. First, the grid should be marked as a drop area using the `igxDrop` directive and the row drag functionality should be enabled via the `rowDraggable` option. ```html ``` Then the `dropped` event can be used to handle the reorder and pin/unpin logic. ```typescript public onDropAllowed(args) { + const event = args.originalEvent; + let currRowPinnedIndex; + const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(), + { x: event.clientX, y: event.clientY }); + if (currRowIndex === -1) { return; } + + const currRowID = this.getCurrentRowID(this.grid.rowList.toArray(), + { x: event.clientX, y: event.clientY }); + + const currentRow = this.grid.rowList.toArray().find((r) => r.rowID === currRowID); + if (currentRow.pinned) { + currRowPinnedIndex = this.grid.pinnedRows.indexOf(this.grid.pinnedRows.find((r) => r.rowID === currRowID)); + } + // remove the row that was dragged and place it onto its new location + this.grid.deleteRow(args.dragData.key); + this.data.splice(currRowIndex, 0, args.dragData.data); + if (currentRow.pinned && !args.dragData.pinned) { + this.grid.pinRow(args.dragData.key, currRowPinnedIndex); + } else if (!currentRow.pinned && args.dragData.pinned) { + this.grid.unpinRow(args.dragData.key); + } else if (currentRow.pinned && args.dragData.pinned) { + this.grid.unpinRow(args.dragData.key); + this.grid.pinRow(args.dragData.key, currRowPinnedIndex); + } } ``` This would allow reordering the rows and moving them between the pinned and unpinned row collections. #### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IPinningConfig, IRowDragStartEventArgs, IgxColumnComponent, IgxGridPinningActionsComponent, IgxRowDirective, RowPinningPosition, RowType } from 'igniteui-angular/grids/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-row-pinning-drag-sample', + styleUrls: ['./grid-row-pinning-drag.component.scss'], + templateUrl: 'grid-row-pinning-drag.component.html', + imports: [IgxGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] +}) + +export class GridPinningDragSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) + public grid: IgxGridComponent; + public data: any[]; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top }; + + constructor() { + this.data = DATA; + } + + public ngOnInit() { + this.grid.pinRow(this.data[0].ID); + this.grid.pinRow(this.data[3].ID); + this.grid.pinRow(this.data[8].ID); + this.grid.pinRow(this.data[11].ID); + } + + public togglePining(row: RowType, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + const event = args.originalEvent; + let currRowPinnedIndex; + const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(), + { x: event.clientX, y: event.clientY }); + if (currRowIndex === -1) { return; } + + const currRowID = this.getCurrentRowID(this.grid.rowList.toArray(), + { x: event.clientX, y: event.clientY }); + + const currentRow = this.grid.rowList.toArray().find((r) => r.key === currRowID); + if (currentRow.pinned) { + currRowPinnedIndex = this.grid.pinnedRows.indexOf(this.grid.pinnedRows.find((r) => r.key === currRowID)); + } + // remove the row that was dragged and place it onto its new location + this.grid.deleteRow((args.dragData as RowType).key); + this.data.splice(currRowIndex, 0, args.dragData.data); + if (currentRow.pinned && !args.dragData.pinned) { + this.grid.pinRow(args.dragData.key, currRowPinnedIndex); + } else if (!currentRow.pinned && args.dragData.pinned) { + this.grid.unpinRow(args.dragData.key); + } else if (currentRow.pinned && args.dragData.pinned) { + this.grid.unpinRow(args.dragData.key); + this.grid.pinRow(args.dragData.key, currRowPinnedIndex); + } + } + + public onRowDragStart(args: IRowDragStartEventArgs) { + if (args.dragData.disabled) { + args.cancel = true; + } + } + + private getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return this.data.indexOf(this.data.find((r) => r.ID === row.key)); + } + } + + return -1; + } + + private getCurrentRowID(rowList: IgxRowDirective[], cursorPosition) { + for (const row of rowList) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the ID of the targeted row + return row.key; + } + } + } +} +``` +```html +
+ + + + + + + + + + + + + + +
+``` +```scss +.grid-container { + display: flex; + padding: 20px; +} + +.grid-container .drop-area { + height: 500px; + width: 50%; + margin: 10px 20px; +} + +.empty-grid { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + height: 100%; +} +``` ## Row Pinning Limitations - Only records that exist in the data source can be pinned. - The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied. - Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization). - The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed. - As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record. - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning
## Styling The IgxGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The Grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the Grid. Below, we are going through the steps of customizing the Grid's row pinning styling. ### Importing the Styling Library To begin the customization of the row pinning feature, you need to import the `index` file, where all styling functions and mixins are located. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Defining a Theme Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the row pinning feature as desired. ```scss $custom-grid-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f ); ``` ### Using CSS variables The last step is to pass the custom grid theme: ```scss :host { + @include tokens($custom-grid-theme); } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IPinningConfig, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-row-pinning-styling', + templateUrl: 'grid-row-pinning-styling.component.html', + styleUrls: ['./grid-row-pinning-styling.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] +}) + +export class GridRowPinningStylingSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) + public grid: IgxGridComponent; + public data: any[]; + + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top }; + + constructor() { + this.data = DATA; + } + + public ngOnInit() { + this.grid.pinRow(this.data[0].ID); + this.grid.pinRow(this.data[3].ID); + } +} +``` +```html +
+ + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxHierarchicalGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridrow.html) - [RowType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/RowType.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md new file mode 100644 index 000000000..556a44ed3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-row-selection.md @@ -0,0 +1,651 @@ +--- +_tocName: Row selection +_premium: true +--- +--- title: Angular Grid Select Row - Ignite UI for Angular _description: Enable row selection to improve UX and let users manage single or multiple rows. See how easy it is to configure Row data select with Ignite UI. _keywords: data select, igniteui for angular, infragistics _license: commercial --- # Angular Grid Row Selection With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. When a user clicks on the row selector, the row will either become selected or deselected, enabling the user to select multiple rows of data. ## Angular Row Selection Example The sample below demonstrates the three types of Grid's **row selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to _hide_ or _show_ the row selector checkbox. To get newly selected elements you can use **event.newSelection**: ```ts public handleRowSelection(event: IRowSelectionEventArgs) { + this.selectedRowsCount = event.newSelection.length; + this.selectedRowIndex = event.newSelection[0]; + this.snackbarRowCount.open(); + this.snackbar.close(); + this.logAnEvent(`=> 'rowSelectionChanging' with value: ` + JSON.stringify(event.newSelection)); } ``` ```typescript +import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; + +import { GridSelectionMode, IRowSelectionEventArgs, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { Observable } from 'rxjs'; +import { FinancialDataService } from '../../services/financial.service'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + + +@Component({ + providers: [FinancialDataService], + // eslint-disable-next-line @angular-eslint/component-selector + selector: 'grid-sample', + styleUrls: ['./grid-selection.component.scss'], + templateUrl: 'grid-selection.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent, AsyncPipe] +}) + +export class GridSelectionSampleComponent implements OnInit { + private localService = inject(FinancialDataService); + private renderer = inject(Renderer2); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent; + @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; + @ViewChild('logger') public logger: ElementRef; + public data: Observable; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModes = []; + public hideRowSelectors = false; + public selectedRows = [1, 2, 3]; + public selectedRowsCount; + public selectedRowIndex; + + constructor() { + this.localService.getData(500); + this.data = this.localService.records; + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + + } + public ngOnInit(): void { + this.snackbar.autoHide = false; + this.snackbar.open(); + this.snackbarRowCount.autoHide = true; + this.snackbarRowCount.close(); + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public handleRowSelection(event: IRowSelectionEventArgs) { + this.selectedRowsCount = event.newSelection.length; + this.selectedRowIndex = event.newSelection[0]; + this.snackbarRowCount.open(); + this.snackbar.close(); + this.logAnEvent(`=> 'rowSelectionChanging' with value: ` + JSON.stringify(event.newSelection)); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbar.open(); + this.snackbarRowCount.close(); + this.selectedRowsCount = undefined; + this.selectedRowIndex = undefined; + } + + public clearLog() { + const elements = this.logger.nativeElement.querySelectorAll('p'); + for (let index = 0; index < elements.length; index++) { + this.renderer.removeChild(this.logger.nativeElement, elements[index]); + } + } + + private logAnEvent(msg: string, canceled?: boolean) { + const createElem = this.renderer.createElement('p'); + + if (canceled) { + msg = msg.concat(': has been canceled '); + } + + const text = this.renderer.createText(msg); + this.renderer.appendChild(createElem, text); + const container = this.logger.nativeElement; + this.renderer.insertBefore(container, createElem, container.children[0]); + } +} +``` +```html +
+
+ Hide Row Selectors + +
+
+
+ + + + + + + + + Change + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + Change(%) + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + +
+
+
+
+
+ Events execution sequence + +
+
+
+
+
+
+
+
+ + +
+ notification_important + @if (selectionMode === 'multiple') { +

Number of selected rows: {{selectedRowsCount}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex !== undefined) { +

Currently selected row index: {{selectedRowIndex}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex === undefined) { +

There is no currently selected row.

+ } +
+ + + +
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • Now you can select multiple rows within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one row within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a row while interacting with grid UI.
    • +
  • If you need to select a row use grid API methods.
    • +
+ } +
+ +``` +```scss +:host { + width: 100%; +} + +.cellAlignSyle { + text-align: right; + float: right; +} + +.cellAlignSyle > span { + float: right; +} + +.up { + color: green; +} + +.down { + color: red; +} + +.headerAlignSyle { + text-align: right !important; +} + +.sample-container { + margin: 16px; +} + +.grid-controls { + display: flex; + justify-content: space-between; + flex-flow: column; + align-items: flex-start; + position: relative; + > * { + margin-bottom: 16px; + } +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} + +ul { + padding: 0; + list-style-type: none; +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.container p { + margin-top: 20px; +} + +.switches { + margin-top: 12px; + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-around; +} + +.sample-wrapper { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.grid-wrapper { + width: 60%; + margin: 8px; +} +.log-wrapper { + width: 35%; +} + +.clearBtn { + top: 3px; + margin-left: 20px; +} + +.selected-data-area{ + overflow-y: auto; + max-height: 550px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; +} + +.logContainer { + padding: 0.2rem 0.4rem; +} + +.highlight { + text-align: center; + margin-bottom: 0.4rem; +} +```
## Setup In order to setup row selection in the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html), you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following three modes: **none**, **single** and **multiple**. Below we will take a look at each of them in more detail. ### None Selection In the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) by default row selection is disabled, otherwise _([rowSelection]="'none'")_. So you can **not** select or deselect a row through interaction with the Grid UI, the only way to complete these actions is to use the provided API methods. ### Single Selection Single row selection can now be easily set up, the only thing you need to do, is to set `[rowSelection] = '"single"'` property. This gives you the opportunity to **select only one row within a grid**. You can select a row by clicking on a cell or pressing the _space_ key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected **rowSelectionChanging** event is emitted. ```html ``` ```typescript /* selectionExample.component.ts */ public handleRowSelection(args) { + if (args.added.length && args.added[0] === 3) { + args.cancel = true; + } } ``` ### Multiple Selection To enable multiple row selection in the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) just set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) property to `multiple`. This will enable a row selector field on each row and in the Grid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the _space_ key when a cell is focused. If you have selected one row and click on another while holding the _shift_ key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you _click_ while holding the _ctrl_ key, the row will be toggled and the previous selection will be preserved. ```html ``` ```ts + + public handleRowSelection(event: IRowSelectionEventArgs) { + // use event.newSelection to retrieve primary key/row data of latest selected row + this.selectedRowsCount = event.newSelection.length; + this.selectedRowIndex = event.newSelection[0]; + } ``` **Notes** - In order to have proper row selection and cell selection, while Grid has remote virtualization, a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#primarykey) should be provided. - When the Grid has remote virtualization, then clicking the header checkbox will select/deselect all records that are currently in the grid. When new data is loaded in the Grid on demand, newly added rows will not be selected and it is a limitation, so you should handle that behavior by yourself and you can select these rows by using the provided API methods. - Row selection will trigger [`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelectionChanging) event. This event gives you information about the _new selection_, _old selection_, the rows that have been _added_ and _removed_ from the old selection. Also the event is _cancellable_, so this allows you to prevent selection. - When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set `[hideRowSelectors] = true`. - When you switch between row selection modes at runtime, this will clear the previous row selection state. ## API usage ### Select rows programmatically The code snippet below can be used to select one or multiple rows simultaneously (via [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#primaryKey)); Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html ... ... // select rows and clear previous selection state ``` } This will add the rows which correspond to the data entries with IDs 1, 2 and 5 to the Grid selection. ### Deselect rows If you need to deselect rows programmatically, you can use the `deselectRows(rowIds: [])` method. ```html ... ... ``` ### Row selection event When there is some change in the row selection **[`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelectionChanging)** event is emitted. **`rowSelectionChanging`** exposes the following arguments: - `oldSelection` - array of row's data that contains the previous state of the row selection. - `newSelection` - array of row's data that match the new state of the row selection. - `added` - array of row's data that are currently added to the selection. - `removed` - array of row's data that are currently removed according old selection state. - `event` - the original event that triggered row selection change. - `cancel` - allows you the prevent the row selection change. #### Row selection event in remote data scenarios In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IRowSelectionEventArgs.html#oldSelection) event argument will not contain the full row data object for the rows that are currently out of the data view. In this case, `rowSelectionChanging.oldSelection` object will contain only one property, which is the `primaryKey` field. For the rest of the rows, currently in the data view, `rowSelectionChanging.oldSelection` will contain the whole row data. ```html ... ``` ```typescript /* selectionExample.component.ts */ public handleRowSelectionChange(args) { + args.cancel = true; // this will cancel the row selection } ``` ### Select all rows Another useful API method that [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) provides is `selectAll(onlyFilteredData)`. By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. But if you call the method with _false_ parameter, `selectAll(false)` will always select all data in the grid, even if filtering is applied. >[!NOTE] > Keep in mind that `selectAll()` will not select the rows that are deleted. ### Deselect all rows [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) provides `deselectAll(onlyFilteredData)` method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. But if you call the method with _false_ parameter, `deselectAll(false)` will always clear all row selection state even if filtering is applied. ### How to get selected rows If you need to see which rows are currently selected, you can get their row IDs with the `selectedRows` getter. ```typescript public getSelectedRows() { + const currentSelection = this.grid.selectedRows; // return array of row IDs } ``` Additionally, assigning row IDs to `selectedRows` will allow you to change the grid's selection state. ```typescript public mySelectedRows = [1, 2, 3]; // an array of row IDs ``` ```html + + + ``` ### Row selector templates You can template header and row selectors in the Grid and also access their contexts which provide useful functionality for different scenarios. By default, the Grid **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [`rowSelectionChanging` event](#row-selection-event). In case you implement a custom template with a `click` handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row template To create a custom row selector template, within the `igx-grid`, declare an `` with `igxRowSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state. The `selected` property shows whether the current row is selected or not while the `index` property can be used to access the row index. ```html + {{ rowContext.index }} + ``` The `rowID` property can be used to get a reference of an `igx-grid` row. This is useful when you implement a `click` handler on the row selector element. ```html + ``` In the above example we are using an `igx-checkbox` and we bind `rowContext.selected` to its `checked` property. See this in action in our [`Row Numbering Demo`](#row-numbering-demo). ### Header template To create a custom header selector template, within the Grid, declare an `` with `igxHeadSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state. The `selectedCount` property shows you how many rows are currently selected while `totalCount` shows you how many rows there are in the Grid in total. ```html + {{ headContext.selectedCount }} / {{ headContext.totalCount }} ``` The `selectedCount` and `totalCount` properties can be used to determine if the head selector should be checked or indeterminate (partially selected). ```html + + + + + ``` ### Row Numbering Demo This demo shows the usage of custom header and row selectors. The latter uses `rowContext.index` to display row numbers and an `igx-checkbox` bound to `rowContext.selected`. ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-selection-template-numbers', + styleUrls: ['./grid-sample-selection-template-numbers.component.scss'], + templateUrl: 'grid-sample-selection-template-numbers.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxCheckboxComponent] +}) + +export class GridSelectionTemplateNumbersComponent { + public data: any[]; + + constructor() { + this.data = [...DATA]; + } +} +``` +```html +
+ + + + + + + + + +
+ +
+ + + +
+ {{ rowContext.index + 1 }} + + +
+ + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.header-selector { + width: 70px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; +} + +.header-image { + width: 40px; + height: 40px; +} + +.row-selector { + width: 70px; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 100%; +} + +.row-selector-index { + width: 35px; + text-align: center; +} +```
### Excel Style Row Selectors Demo This demo uses custom templates to resemble Excel-like header and row selectors. ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { NgClass } from '@angular/common'; + +@Component({ + selector: 'app-grid-selection-template-excel', + styleUrls: ['./grid-sample-selection-template-excel.component.scss'], + templateUrl: 'grid-sample-selection-template-excel.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxHeadSelectorDirective, NgClass, IgxRowSelectorDirective] +}) + +export class GridSelectionTemplateExcelComponent { + public data: any[]; + + constructor() { + this.data = DATA; + } +} +``` +```html +
+ + + + + + + + + +
+ signal_cellular_4_bar +
+ + + +
+ {{ rowContext.index + 1 }} +
+ + +
+``` +```scss +@use '../../../variables' as *; + +$default-arrow-color: color($color: 'gray', $variant: 400); +$default-arrow-hover-color: color($color: 'gray', $variant: 800); +$default-arrow-all-color: color($color: 'secondary', $variant: 100); + +@mixin selector($justify, $align) { + display: flex; + justify-content: $justify; + align-items: $align; + min-width: 50px; + cursor: pointer; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.header-selector { + @include selector(flex-end, flex-end); + height: 100%; + padding: 8px; +} + +.row-selector { + @include selector(center, center); +} + +::ng-deep { + .igx-grid__cbx-selection { + padding: 0; + } +} + +.excel-style-arrow { + color: $default-arrow-color; + &:hover { + color: $default-arrow-hover-color; + } +} + +.excel-style-arrow-all { + color: $default-arrow-all-color; +} +```
### Conditional Selection Demo This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. ```typescript +import { Component } from '@angular/core'; +import { IRowSelectionEventArgs, IgxColumnComponent, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-conditional-row-selectors', + styleUrls: ['./grid-conditional-row-selectors-sample.component.scss'], + templateUrl: 'grid-conditional-row-selectors-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowSelectorDirective, IgxCheckboxComponent] +}) + +export class GridConditionalRowSelectorsComponent { + public data: any[]; + public disabledCollection: string[] = []; + + constructor() { + this.data = DATA; + this.data.filter(dataItem => dataItem.ID.indexOf('A') === -1).map((item) => { + this.disabledCollection.push(item.ID); + }); + } + + public isSelectionAllowed(newRowID: string) { + return this.disabledCollection.indexOf(newRowID) === -1; + } + + public onRowSelect(event: IRowSelectionEventArgs) { + if (!event.added.length && event.removed.length) { + // ignore deselect + return; + } + const originalAddedLength = event.added.length; + + // update selection to contain only allowed rows + event.newSelection = event.newSelection.filter(x => this.isSelectionAllowed(x.ID)); + + // cleanup selection if all conditionally selectable rows are already selected + if (event.newSelection.length + && !event.newSelection.filter(x => event.oldSelection.indexOf(x) === -1).length + && originalAddedLength > 1) { + // all selected from header, deselect instead + event.newSelection = []; + } + } +} +``` +```html +
+ + + + + + + + + +
+ + +
+ + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.row-selector { + display: flex; + align-items: center; + justify-content: center; + min-width: calc(1.25rem + (1.5rem * 2)); +} +```
## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Selection](selection.md) - [Cell selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md new file mode 100644 index 000000000..22f2b8c97 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-search.md @@ -0,0 +1,227 @@ +--- +_tocName: Searching +_premium: true +--- +--- title: Angular Grid Search Filter - Ignite UI for Angular _description: Perform fast grid search with Ignite UI for Angular Data grid. It allows instant content search in the virtualized data of the Grid, while delivering better UX. _keywords: Content search, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Search Filter Angular Grid search enables the process of finding values in the collection of data. We make it easier to setup this functionality and it can be implemented with search input box, buttons, keyboard navigation and other useful features for an even better user experience. While browsers natively provide content search functionality, most of the time the Grid virtualizes its columns and rows that are out of view. In these cases, the native grid search is unable to search data in the virtualized cells, since they are not part of the DOM. We have extended the Ignite UI for Angular table-based grid with a **search API** that allows you to search through the **virtualized content** of the Grid. ## Angular Search Example The following example represents Grid with search input box that allows searching in all columns and rows, as well as specific filtering options for each column. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { MARKET_DATA } from './data'; + +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-search-sample', + styleUrls: ['./grid-search-sample.component.scss'], + templateUrl: './grid-search-sample.component.html', + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridSearchSampleComponent implements OnInit { + + @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; + public data: any[]; + public searchText = ''; + public caseSensitive = false; + public exactMatch = false; + + public ngOnInit(): void { + this.data = MARKET_DATA; + } + + public clearSearch() { + this.searchText = ''; + this.grid.clearSearch(); + } + + public searchKeyDown(ev) { + if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { + ev.preventDefault(); + this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { + ev.preventDefault(); + this.grid.findPrev(this.searchText, this.caseSensitive, this.exactMatch); + } + } + + public updateSearch() { + this.caseSensitive = !this.caseSensitive; + this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } + + public updateExactSearch() { + this.exactMatch = !this.exactMatch; + this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } +} +``` +```html +
+ + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + + + + + @if (searchText.length > 0) { + + @if (grid.lastSearchInfo) { +
+ @if (grid.lastSearchInfo.matchInfoCache.length > 0) { + + {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} + results + + } + @if (grid.lastSearchInfo.matchInfoCache.length === 0) { + + No results + + } +
+ } +
+ + + Aa + + + Ab + + +
+
+ + +
+ + } + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} + +.offset { + margin-bottom: 15px; +} + +.resultsText { + font-size: 0.875rem; +} + +.chips { + margin-left: 5px; +} + +.searchButtons { + margin-left: 5px; +} +```
## Angular Search Usage ### Grid setup Let's start by creating our grid and binding it to our data. We will also add some custom styles for the components we will be using! ```html + + + + + + ``` @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```css /* searchgrid.component.css */ .grid__wrapper { + margin: 15px; } .offset { + margin-bottom: 15px; } .resultsText { + font-size: 0.875rem; } .chips { + margin-left: 5px; } .searchButtons { + margin-left: 5px; } ``` } Great, and now let's prepare for the search API of our Grid! We can create a few properties, which can be used for storing the currently searched text and whether the search is case sensitive and/or by an exact match. ```typescript // searchgrid.component.ts public searchText: string = ''; public caseSensitive: boolean = false; public exactMatch: boolean = false; ``` ### Angular search box input Now let's create our search input! By binding our **searchText** as ngModel to our newly created input and subscribe to the ngModelChange event, we can detect every single **searchText** modification by the user. This will allow us to use the Grid's [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext) and [`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findPrev) methods to highlight all the occurrences of the **searchText** and scroll to the next/previous one (depending on which method we have invoked). Both the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findPrev) methods have three arguments: - `text`: **string** (the text we are searching for) - (optional) `caseSensitive`: **boolean** (should the search be case sensitive or not, default value is false) - (optional) `exactMatch`: **boolean** (should the search be by an exact match or not, default value is false) When searching by an exact match, the search API will highlight as results only the cell values that match entirely the **searchText** by taking the case sensitivity into account as well. For example the strings '_software_' and '_Software_' are an exact match with a disregard for the case sensitivity. The methods from above return a **number** value (the number of times the Grid contains the given string). ```html ``` ### Display results count Let's also display the position of the current occurrence, along with the total results count! We can do this by using the grid's `lastSearchInfo` property. This property is automatically updated when using the **find** methods. - The `grid.lastSearchInfo.matchInfoCache.length` value will give us the total results count. - The `grid.lastSearchInfo.activeMatchIndex` value will give us the index position of the current occurrence (match). ```html
+ + {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} results + + + No results +
``` ### Add search buttons In order to freely search and navigate among our search results, let's create a couple of buttons by invoking the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findPrev) methods inside the buttons' respective click event handlers. ```html
+ +
``` ### Add keyboard search We can also allow the users to navigate the results by using the keyboard's arrow keys and the Enter key. In order to achieve this, we can handle the **keydown** event of our search input by preventing the default caret movement of the input with the preventDefault() method and invoke the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findPrev) methods depending on which key the user has pressed. ```html ``` ```typescript // searchgrid.component.ts public searchKeyDown(ev) { + if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { + ev.preventDefault(); + this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { + ev.preventDefault(); + this.grid.findPrev(this.searchText, this.caseSensitive, this.exactMatch); + } } ``` ### Case sensitive and Exact match Now let's allow the user to choose whether the search should be case sensitive and/or by an exact match. For this purpose we can use simple checkbox inputs by binding our **caseSensitive** and **exactMatch** properties to the inputs' **checked** properties respectively and handle their **change** events by toggling our properties and invoking the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext) method. ```html Case sensitive Exact match ``` ```typescript // searchgrid.component.ts public updateSearch() { + this.caseSensitive = !this.caseSensitive; + this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch); } public updateExactSearch() { + this.exactMatch = !this.exactMatch; + this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch); } ``` ### Persistence What if we would like to filter and sort our Grid or even to add and remove records? After such operations, the highlights of our current search automatically update and persist over any text that matches the **searchText**! Furthermore, the search will work with paging and will persist the highlights through changes of the Grid's [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage) property. ### Adding icons By using some of our other components, we can create an enriched user interface and improve the overall design of our entire search bar! We can have a nice search or delete icon on the left of the search input, a couple of chips for our search options and some material design icons combined with nice ripple styled buttons for our navigation on the right. We can wrap these components inside an input group for a more refined design. To do this, let's go and grab the [**IgxInputGroup**](../input-group.md), [**IgxIcon**](../icon.md), [**IgxRipple**](../ripple.md), [**IgxButton**](../button.md) and the [**IgxChip**](../chip.md) modules. ```typescript // app.module.ts ... import { + IgxGridModule, + IgxInputGroupModule, + IgxIconModule, + IgxRippleModule, + IgxButtonModule, + IgxChipsModule } from 'igniteui-angular'; // import { // IgxInputGroupModule, // IgxIconModule, // IgxRippleModule, // IgxButtonModule, // IgxChipsModule // } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxInputGroupModule, IgxIconModule, IgxRippleModule, IgxButtonModule, IgxChipsModule], }) export class AppModule {} ``` Finally, let's update our template with the new components! We will wrap all of our components inside an [**IgxInputGroup**](../input-group.md). On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our **searchText** and invoke the Grid's [`clearSearch`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clearSearch) method to clear the highlights. ```html + + search + clear + + + + + + ... + ``` ```typescript // searchgrid.component.ts public clearSearch() { + this.searchText = ''; + this.grid.clearSearch(); } ``` On the right in our input group, let's create three separate containers with the following purposes: - For displaying the search results. ```html +
+ + {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} results + + + No results + +
``` - For displaying a couple of chips that toggle the **caseSensitive** and the **exactMatch** properties. We have replaced the checkboxes with two stylish chips that change color based on these properties. Whenever a chip is clicked, we invoke its respective handler - **updateSearch** or **updateExactSearch** depending on which chip has been clicked. ```html + + ... +
+ + + Case Sensitive + + + Exact Match + + +
+ ... ``` - For the search navigation buttons, we have transformed our inputs into ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findPrev) methods. ```html +
+ + +
``` ## Known Limitations |Limitation|Description| |--- |--- | |Searching in cells with a template|The search functionality highlights work only for the default cell templates. If you have a column with custom cell template, the highlights will not work so you should either use alternative approaches, such as a column formatter, or set the [`searchable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#searchable) property on the column to false.| |Remote Virtualization| The search will not work properly when using remote virtualization| |Cells with cut off text| When the text in the cell is too large to fit and the text we are looking for is cut off by the ellipsis, we will still scroll to the cell and include it in the match count, but nothing will be highlighted | ## API References In this article we implemented our own search bar for the Grid with some additional functionality when it comes to navigating between the search results. We also used some additional Ignite UI for Angular components like icons, chips and inputs. The search API is listed below. [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) methods: - [findNext](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findNext) - [findPrev](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#findPrev) - [clearSearch](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clearSearch) - [refreshSearch](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#refreshSearch) [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) methods: [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [searchable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#searchable) [ISearchInfo](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isearchinfo.html) Additional components and/or directives with relative APIs that were used: - [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) - [IgxIconComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) - [IgxRippleDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrippledirective.html) - [IgxButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) - [IgxChipComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) Styles: - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxInputGroupComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) - [IgxIconComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) - [IgxRippleDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) - [IgxButtonDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) - [IgxChipComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md new file mode 100644 index 000000000..d666c8776 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection-based-aggregates.md @@ -0,0 +1,259 @@ +--- +title: Angular Grid Selection-Based Data Aggregation- Ignite UI for Angular +_description: Learn how to aggregate selected data in a grid with Ignite UI. Get instant content aggregations in the virtualized data and rich API for your next project. +_keywords: Data aggregation, selection, ignite ui for angular, infragistics +_license: commercial +_tocName: Selection-based Aggregates +_premium: true +--- + +# Angular Grid Selection-Based Data Aggregation + +With the sample, illustrated beyond, you may see how multiple selection is being used, alongside with custom summary functions, to display aggregates based on the selected values in the grid footer. + +## Topic Overview + +To achieve the selection-based aggregates functionality, you can use our [`Grid Selection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/components/grid/selection.html) feature, together with the [`Grid Summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/components/grid/summaries.html). +The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. + +## Selection + +To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selected) event and to the [`rangeSelected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rangeSelected) event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells. + +In the events subscription logic, you can extract the selected data using the grid's [`getSelectedData`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getSelectedData) function and pass the selected data to the custom summary operand. + + +## Summary + +Within the custom summary class, you'd have to be differentiating the types of data in the grid. For instance, in the scenario below, there are four different columns, whose type of data is suitable for custom summaries. These are the Unit Price, the Units in Stock, Discontinued status and the Order Date. +The `operate` method of the derived class of the `IgxSummaryOperand`, is where you will process the data, starting by casing it in different categories based on the data types: + +```typescript +const numberData = data.filter(rec => typeof rec === "number"); +const boolData = data.filter(rec => typeof rec === "boolean"); +const dates = data.filter(rec => isDate(rec)); +``` + +> [!NOTE] +> Bear in mind, that `isDate` is a custom function. + +After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`. +After that, you'd have to put the aggregated data in the same array, which would be returned to the template. +For the visualization of the data, you might want to use the ``, which in a combination with the `custom-summaries` class will give the natural look of the Summary. + + +### Demo + +Change the selection to see summaries of the currently selected range. + + +```typescript +import { formatDate } from '@angular/common'; +import { AfterViewInit, Component, ViewChild, OnInit, ChangeDetectorRef, inject } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxGridFooterComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class MySummary { + + public operate(data: any[] = []): IgxSummaryResult[] { + const result = new IgxSummaryOperand().operate(data); + if (data.length < 1) { return result; } + const numberData = data.filter(rec => typeof rec === 'number'); + const boolData = data.filter(rec => typeof rec === 'boolean'); + const dates = data.filter(rec => isDate(rec)); + if (numberData.length) { + result.push({ key: 'min', label: 'Min', summaryResult: IgxNumberSummaryOperand.min(numberData)}); + result.push({ key: 'max', label: 'Max', summaryResult: IgxNumberSummaryOperand.max(numberData)}); + result.push({ key: 'avg', label: 'Avg', summaryResult: IgxNumberSummaryOperand.average(numberData)}); + result.push({ key: 'sum', label: 'Sum', summaryResult: IgxNumberSummaryOperand.sum(numberData)}); + } + if (boolData.length) { + result.push({ + key: 'test', label: 'Discounted', + summaryResult: boolData.filter(rec => rec).length + ' of ' + boolData.length }); + } + if (dates.length) { + result.push({ key: 'earliest', label: 'Earliest', summaryResult: IgxDateSummaryOperand.earliest(dates)}); + result.push({ key: 'latest', label: 'Latest', summaryResult: IgxDateSummaryOperand.latest(dates)}); + } + return result; + } +} +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-custom-summaries-selection.component.scss'], + templateUrl: 'grid-custom-summaries-selection.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxGridFooterComponent] +}) + +export class GridCustomSummariesSelectionComponent implements AfterViewInit, OnInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + public data: any[]; + public selectionSummaries = []; + private customSummary = new MySummary(); + + public ngOnInit(): void { + this.data = DATA; + } + public ngAfterViewInit(): void { + this.grid1.setSelection({ + rowStart: 2, rowEnd: 4, + columnStart: 1, columnEnd: 4 + }); + this.calculateSummary(); + this.cdr.detectChanges(); + } + public format(value: any) { + if (typeof value === 'number') { + return value.toFixed(2); + } else if (isDate(value)) { + return formatDate(value, 'mediumDate', 'en'); + } + return value; + } + public formatCurrency(value: number) { + if (!value) { return; } + return '$' + value.toFixed(2); + } + + public calculateSummary() { + this.selectionSummaries = this.customSummary.operate(this.toArray(this.grid1.getSelectedData())); + } + + public toArray(data) { + let result = []; + data.forEach(rec => result = result.concat(Object.values(rec))); + return result; + } +} + +function isDate(value: any) { + return Object.prototype.toString.call(value) === '[object Date]'; +} +``` +```html +
+ + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+ @for (summary of selectionSummaries; track summary) { +
+ {{ summary.label }} + {{ format(summary.summaryResult) }} +
+ } +
+ + +
+``` +```scss +.cellAlignSyle { + text-align: right; + float:right; +} +.cellAlignSyle > span { + float:right; +} +.up { + color: green; +} +.down { + color: red; +} +.headerAlignSyle { + text-align: right !important; +} + +.sample-container { + width: 20%; + display: flex; + + margin: 0% 0% 20px 10px +} + +.grid-controls { + display: flex; + justify-content: space-between; + margin: 0 16px 24px; + flex-flow: column; + align-items: flex-start; +} + +.grid__wrapper { + margin: 0 16px; + padding-top: 16px;; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} + +div.igx-grid__tfoot { + z-index: 1; +} + +.custom-summaries { + margin-left: auto; + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.summaries-data-wrapper { display: inline-block; padding-right: 24px; } +.summaries-data-wrapper span:first-child { margin-right: 16px } +``` + + +## API References + +- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +## Additional Resources + +
+ +- [Grid overview](grid.md) +- [Selection Service](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridselectionservice.html) +- [Row Selection](row-selection.md) +- [Cell Selection](cell-selection.md) +- [IgxNumberSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) +- [IgxDateSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) +- [Summaries](summaries.md) +- [Paging](paging.md) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md new file mode 100644 index 000000000..4f1c5b2d9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-selection.md @@ -0,0 +1,427 @@ +--- +_tocName: Selection +--- +--- title: Angular Grid Selection - Ignite UI for Angular _description: See how easy it is to select data in Ignite UI for Angular grid using variety of events, rich API or with simple mouse interactions like single select. _keywords: data select, igniteui for angular, infragistics _license: commercial --- # Angular Grid Selection With Ignite UI for Angular Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select. ## Angular Grid Selection Example The sample below demonstrates the three types of Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript +import { Component, ElementRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-cell-selection', + styleUrls: ['./grid-cellSelection.component.scss'], + templateUrl: 'grid-cellSelection.component.html', + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent, IgxSnackbarComponent] +}) +export class GridCellSelectionComponent implements OnInit { + private renderer = inject(Renderer2); + + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; + @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent; + @ViewChild('logger') public logger: ElementRef; + public data: any[]; + public selection = true; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModes = []; + + public ngOnInit(): void { + this.data = DATA; + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbar.open(); + } + + public onRangeSelected() { + const selectedData = JSON.stringify(this.grid.getSelectedData()); + this.logAnEvent(`=> 'rangeSelected' with value: ` + selectedData); + } + + public onCellSelected(event) { + this.logAnEvent(`=> 'selected' with value: ` + event.cell.value); + } + + public clearLog() { + const elements = this.logger.nativeElement.querySelectorAll('p'); + for (let index = 0; index < elements.length; index++) { + this.renderer.removeChild(this.logger.nativeElement, elements[index]); + } + } + + private logAnEvent(msg: string, canceled?: boolean) { + const createElem = this.renderer.createElement('p'); + + if (canceled) { + msg = msg.concat(': has been canceled '); + } + + const text = this.renderer.createText(msg); + this.renderer.appendChild(createElem, text); + const container = this.logger.nativeElement; + this.renderer.insertBefore(container, createElem, container.children[0]); + } +} +``` +```html + + + +
+
+ + + + + + + + + +
+
+
+
+
+ Events execution sequence + +
+
+
+
+
+
+
+ + +
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+ +``` +```scss +:host { + width: 100%; +} + +.grid__wrapper { + display: flex; + justify-content: space-between; + margin: 16px; + flex-flow: column; + align-items: flex-start; + position: relative; +} + +.button-group-wrapper { + display: flex; + margin: 10px; +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.switches { + margin-top: 12px; + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-around; +} + +.sample-wrapper { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.grid-wrapper { + width: 60%; + margin: 8px; +} +.log-wrapper { + width: 35%; +} + +.clearBtn { + top: 3px; + margin-left: 20px; +} + +.selected-data-area{ + overflow-y: auto; + max-height: 550px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; +} + +.logContainer { + padding: 0.2rem 0.4rem; +} + +.highlight { + text-align: center; + margin-bottom: 0.4rem; +} +```
## Angular Grid Selection Options IgniteUI for Angular Grid component provides three different selection modes - [Row selection](row-selection.md), [Cell selection](cell-selection.md) and [Column selection](column-selection.md). By default only **Multi-cell selection** mode is enabled in the Grid. In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) properties. ### Angular Row Selection Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) enables you to specify the following options: - none - Row selection would be disabled for the Grid - single - Selection of only one row within the Grid would be available - multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused > Go to [Row selection topic](row-selection.md) for more information. ### Angular Cell Selection Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) enables you to specify the following options: - none - Cell selection would be disabled for the Grid - single - Selection of only one cell within the Grid would be available. - multiple - Currently, this is the default state of the selection in the Grid. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously. > Go to [Cell selection topic](cell-selection.md) for more information. ### Angular Column Selection The [`selectable` property](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) enables you to specify the following options for each **column**: - false - the corresponding column selection will be disabled for the Grid - true - the corresponding column selection will be enabled for the Grid - This lead to the following three variations: - Single selection - mouse click over the column cell. - Multi column selection - holding ctrl + mouse click over the column cells. - Range column selection - holding shift + mouse click selects everything in between. > Go to [Column selection topic](column-selection.md) for more information. ## Grid Context Menu Using the [`contextMenu`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#contextMenu) event you can add a custom context menu to facilitate your work with **IgxGrid**. With a **right click** on the grid's body, the event emits the cell on which it is triggered. The **context menu** will operate with the emitted cell. If there is a **multi-cell selection**, we will put logic, which will check whether the selected cell is in the area of the multi-cell selection. If it is, we will also emit the values of the selected cells. Basically the main function will look like this: ```typescript public rightClick(eventArgs: any) { + // Prevent the default behavior of the right click + eventArgs.event.preventDefault(); + this.multiCellArgs = {}; + // If we have multi-cell selection, check if selected cell is within the ranges + if (this.multiCellSelection) { + const node = eventArgs.cell.selectionNode; + const isCellWithinRange = this.grid1.getSelectedRanges().some(range => { + if (node.column >= range.columnStart && + node.column <= range.columnEnd && + node.row >= range.rowStart && + node.row <= range.rowEnd) { + return true; + } + return false; + }) + // If the cell is within a multi-cell selection range, bind all the selected cells data + if (isCellWithinRange) { + this.multiCellArgs = { data: this.multiCellSelection.data }; + } + } + // Set the position of the context menu + this.contextmenuX = eventArgs.event.clientX; + this.contextmenuY = eventArgs.event.clientY; + this.clickedCell = eventArgs.cell; + // Enable the context menu + this.contextmenu = true; } ``` The context menu will have the following functions: - Copy the selected cell's _value_ - Copy the selected cell's _dataRow_ - If the selected cell is within a **multi-cell selection range**, copy all the _selected data_ ```typescript //contextmenu.component.ts public copySelectedCellData(event) { + const selectedData = { [this.cell.column.field]: this.cell.value }; + this.copyData(JSON.stringify({ [this.cell.column.field]: this.cell.value })); + this.onCellValueCopy.emit({ data: selectedData }); } public copyRowData(event) { + const selectedData = this.cell.row.data ; + this.copyData(JSON.stringify(this.cell.row.data)); + this.onCellValueCopy.emit({ data: selectedData }); } public copySelectedCells(event) { + const selectedData = this.selectedCells.data; + this.copyData(JSON.stringify(selectedData)); + this.onCellValueCopy.emit({ data: selectedData }); } ``` The IgxGrid will fetch the copied data and will paste it in a container element. The template we are going to use to combine the grid with the context menu: ```html
+
+ + + +
+ + +
+
+
+
+ 
{{copiedData}}
+
+
``` + + Select multiple cells and press the `right mouse` button. The context menu will appear and after selecting `Copy cells data` the selected data will appear in the right empty box. + The result is: ```typescript +import { Component, OnInit, ViewChild} from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +import { ContextmenuComponent } from './contextmenu/contextmenu.component'; + +@Component({ + selector: 'app-grid-contextmenu-sample', + styleUrls: ['./grid-contextmenu-sample.component.scss'], + templateUrl: './grid-contextmenu-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, ContextmenuComponent] +}) + +export class GridContextmenuSampleComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data: any[]; + + public contextmenu = false; + public contextmenuX = 0; + public contextmenuY = 0; + public clickedCell = null; + public copiedData; + public multiCellSelection: { data: any[]} = { data: []}; + public multiCellArgs; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + this.grid1.sortingExpressions = [ + { + dir: SortingDirection.Asc, fieldName: 'ProductName', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + } + ]; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public rightClick(eventArgs: any) { + eventArgs.event.preventDefault(); + this.multiCellArgs = {}; + if (this.multiCellSelection) { + const node = eventArgs.cell.selectionNode; + const isCellWithinRange = this.grid1.getSelectedRanges().some((range) => { + if (node.column >= range.columnStart && + node.column <= range.columnEnd && + node.row >= range.rowStart && + node.row <= range.rowEnd) { + return true; + } + return false; + }); + if (isCellWithinRange) { + this.multiCellArgs = { data: this.multiCellSelection.data }; + } + } + this.contextmenuX = eventArgs.event.clientX; + this.contextmenuY = eventArgs.event.clientY; + this.clickedCell = eventArgs.cell; + this.contextmenu = true; + } + + public disableContextMenu() { + if (this.contextmenu) { + this.multiCellSelection = undefined; + this.multiCellArgs = undefined; + this.contextmenu = false; + } + } + + public getCells(event) { + this.multiCellSelection = { + data: this.grid1.getSelectedData() + }; + } + + public copy(event) { + this.copiedData = JSON.stringify(event.data, null, 2); + if (this.multiCellSelection) { + this.multiCellSelection = undefined; + this.multiCellArgs = undefined; + this.grid1.clearCellSelection(); + } + } + + public cellSelection(event) { + this.contextmenu = false; + } +} +``` +```html +
+
+ + + + + + + + ${{val}} + + + + + + + + @if (contextmenu) { +
+ + +
+ } +
+
+
+ 
{{copiedData}}
+
+
+
+``` +```scss +.grid__wrapper{ + width: 50%; +} +.selected-data-area{ + overflow-y: auto; + max-height: 500px; + width: 50%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-left: 10px; +} + +.wrapper{ + margin: 10px; + display: flex; + justify-content: space-evenly; +} +```
## Known Issues and Limitations - Using the Grid with Selection enabled on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. IE11 is no longer supported as of version 13.0.0. + + ```typescript + import 'core-js/es7/array'; + ``` - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Row Selection](row-selection.md) - [Cell Selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Virtualization and Performance](virtualization.md) * [Selection-based Aggregates](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/grid/selection-based-aggregates.html)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sizing.md new file mode 100644 index 000000000..25af0f7d9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sizing.md @@ -0,0 +1,90 @@ +--- +_tocName: Sizing +_premium: true +--- +--- title: Angular Grid Sizing - Ignite UI for Angular _description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have. _keywords: angular grid sizing, igniteui for angular, infragistics _license: commercial --- # Angular Grid Sizing There are many different ways to size the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) in order to accommodate a lot of scenarios that the users can have. While some are straight forward, others might be more complex and that is why we will take each one and look into them in more depth. We will go through setting `width` and `height` separately since there are some differences e.g. when using percentages for each. When it comes to border and padding size for the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) will size correctly. ## Width If the `width` input does not have value assigned, its default value is `100%` and the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] > Setting manually the `width` style of the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) itself will result in an unexpected behavior. ### Null The grid's `width` can accepts value of `null`, which when set, renders all columns in the DOM. The grid sizes accordingly so there is no grid horizontal scrollbar since column virtualization is not applied. - If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. + + Columns Default Grid Width Null - If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible: + + Width Null No Scroll - If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario: + + Width Null Scroll - If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example. + + Width Null Parent Scroll > [!Note] > Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization. ### Pixels When the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: - When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. + + Width Cols Scrollbar - For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `width` is still `1200px`, it will look similar to the following illustrations: + + Width Cols Scroll Parent No Scroll + Width Cols Scroll Parent Scroll ### Percentages When the `width` of the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) will size relative to the browser window. - For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly. + + Width Percent 100% - If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`. + + Width Percent Parent 100% - If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. + + Width Percent 150% Parent No Scroll + Width Percent 150% Parent Scroll ## Height By default if no height is defined for the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] > Setting manually the `height` style of the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) itself will result in an unexpected behavior. ### Null The [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. + + Height Null 14 Rows - If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows. + + Height Null 24 Rows - If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: + + Height Null 24 Rows Parent No Scroll + Height Null 24 Rows Parent Scroll > [!Note] > Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization. ### Pixels Setting the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels. - If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area. + + Height 500px 4 Rows - If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: + + Height 500px 14 Rows - If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. + + Height 700px 14 Rows Parent No Scroll + Height 700px 14 Rows Parent Scroll ### Percentages When the `height` input is set to percentages the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) will size based on the parent element height. If the parent element has its `height` set in pixels or percentages, the grid will size relative to the size of the parent. When the parent element does not have defined height, the browser does not assign height to it initially and sizes it based on its children and their size. That is why there is no way for the grid to know what base height to use in order to apply percentage sizing based on it. For this reason, it will render a maximum of 10 rows and if they are more rows, a vertical scrollbar will be rendered. Otherwise, the grid will fit to number of rendered rows. We will look in this scenario in more detail in the next examples. Let's have `width` set to `1200px` and the parent element not having any size applied to it: - If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid. + + Height Undefined 7 Rows - If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14. + + Height Undefined 14 Rows - If we set the parent element height to `800px` and the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`. + + Height Percent 100% Parent 800px - If the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. + + Height Percent 130% Parent No Scroll + Height Percent 130% Parent Scroll - If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized. + + Height Percent 100% Parent 100% ## Column Sizing Depending on the grid size itself, the columns inside it can also be sized differently that could result in scenarios where the grid renders horizontal scrollbar or not. Columns can have width set in pixels, percentages or autosized when nothing is set. We will take a deeper look regarding these scenarios in this section. ### Default By default when a column doesn't have a specified width it will try to autosize, so that it fills if any empty space is available in the grid view area. Autosized columns have minimum width of `136px`, so if the area available is less than `136px` for that column, it will default to that size. When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available. - If a column does not have specified `width` and the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`. + + Columns Default Grid with Width Null - When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`. + + Columns Default All Row Selectors - If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`. + + Columns Default All Min 136px - If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest. + + Columns Default First Rest 100px - Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`. + + Columns Default All First 100px > [!Note] > Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns. ### Pixels When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `width` or exceed it. - If the combined `width` of all columns is less than the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html). In the next example the columns have `150px` width. + + Columns 150px Resulting in Empty Area - If the combined `width` of all columns is bigger than the actual [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. + + Columns 150px Resulting in Extra Area ### Auto When columns are set to `auto` their size adjusts to fit the longest word in the column. Empty areas are possible if there are cells with very short values, while other cells have very long ones. In this scenario, all cells in the column would adjust to take the width of the cell with the longest value. Columns Auto Width ### Percentages When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. + + Columns Percent Less than 100% - If the combined width is exactly `100%`, the columns will fill all available space of the grid. + + Columns Percent 100% - If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered. + + Columns Percent Bigger than 100% - If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`: + + Columns Percent Grid with Width Null ## Grid Cell Spacing Control The [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) automatically adapts its internal spacing based on the [size](display-density.md) setting. You can further customize the padding and margins in grid header and body cells using CSS custom properties for spacing control. ### Global Grid Spacing To reduce or increase spacing across all grid cells in your application: ```css /* Reduce all grid spacing by 20% */ igx-grid { + --ig-spacing: 0.8; } /* Increase spacing for better touch accessibility */ igx-grid { + --ig-spacing: 1.2; } ``` ### Grid-Specific Spacing To adjust spacing for a specific grid instance: ```css /* Make a particular grid more compact */ .my-compact-grid { + --ig-spacing: 0.6; } /* Give a specific grid more breathing room */ .my-spacious-grid { + --ig-spacing: 1.4; } ``` ### Directional Spacing Control You can control horizontal and vertical spacing independently: ```css /* Reduce only horizontal spacing (left/right padding) */ .my-grid { + --ig-spacing-inline: 0.5; + --ig-spacing-block: 1.0; /* Keep vertical spacing normal */ } /* Adjust vertical spacing for tighter row spacing */ .my-grid { + --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */ + --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */ } ``` ### Size-Specific Spacing Different spacing multipliers can be applied based on the grid's display density: ```css .my-grid { + /* Compact density gets very tight spacing */ + --ig-spacing-small: 0.5; + + /* Medium density uses normal spacing */ + --ig-spacing-medium: 1.0; + + /* Comfortable density gets extra spacing */ + --ig-spacing-large: 1.3; } ``` ### Header vs Body Cell Spacing While the spacing properties affect both header and body cells, you can target them specifically if needed: ```css /* Reduce padding in header cells specifically */ .my-grid igx-grid-header { + --ig-spacing: 0.7; } /* Adjust spacing in data cells */ .my-grid igx-grid-cell { + --ig-spacing: 0.9; } ``` > [!Note] > These spacing adjustments work in conjunction with the grid's display density. The spacing multipliers are applied to the base spacing values that are already determined by whether the grid is in compact, cozy, or comfortable density mode. ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md new file mode 100644 index 000000000..9454cf0e3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-sorting.md @@ -0,0 +1,333 @@ +--- +_tocName: Sorting +_premium: true +--- +--- title: Angular Grid Sorting - Ignite UI for Angular _description: Get started with the Angular sorting feature of Ignite for Angular UI grid! Configure a mix of sortable columns & change the display order of data records. _keywords: angular sort, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Sorting In Ignite UI for Angular Grid, data sorting is enabled on a per-column level, meaning that the **igx-grid** can have a mix of sortable and non-sortable columns. Performing angular sort actions enables you to change the display order of the records based on specified criteria. >[!NOTE] > Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. ## Angular Grid Sorting Overview Example ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, ISortingOptions, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; +import { IgxComboClearIconDirective, IgxComboItemDirective } from 'igniteui-angular/combo'; +import { DATA } from '../../data/localData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; +import { UpperCasePipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['./grid-sorting-sample.component.scss'], + templateUrl: 'grid-sorting-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxGridToolbarActionsComponent, IgxSimpleComboComponent, FormsModule, IgxComboClearIconDirective, IgxComboItemDirective, IgxColumnComponent, IgxCellTemplateDirective, UpperCasePipe] +}) + +export class SortingSampleComponent implements OnInit, AfterViewInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data: any[]; + public sortingTypes: ISortingOptions[] = [ + { + mode: 'single' + }, { + mode: 'multiple' + } + ]; + public sortingOptions: ISortingOptions = this.sortingTypes[1]; + + constructor() { } + + public ngOnInit(): void { + this.data = DATA; + } + + public ngAfterViewInit(): void { + this.grid1.sortingExpressions = [ + { + dir: SortingDirection.Asc, fieldName: 'CategoryName', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + } + ]; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + handleSearchResults(event: KeyboardEvent) { + event.preventDefault(); + } +} +``` +```html +
+ + + + + + + + + +
{{ item.mode | uppercase }}
+ + + + + + + + + + + + + + + + ${{val}} + + + + + +
+``` +```scss +igx-simple-combo { + --ig-size: var(--ig-size-small); +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.igx-grid-toolbar ::ng-deep { + .igx-grid-toolbar__custom-content { + display: flex; + flex-direction: row; + justify-content: flex-start; + } +} +```
This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortable) input. With the Grid sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortingIgnoreCase) property to perform case sensitive sorting: ```html ``` ## Sorting Indicators Having a certain amount of sorted columns could be really confusing if there is no indication of the sorted order. The **IgxGrid** provides a solution for this problem by indicating the index of each sorted column. @@if(igxName === "IgxGrid"){ ```typescript +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DefaultSortingStrategy } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { FinancialData } from '../../data/financialData'; +import {generateRandomInteger, generateRandomFloat} from '../../data/utils'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-sorting-indicators', + templateUrl: './grid-sorting-indicators.component.html', + styleUrls: ['./grid-sorting-indicators.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { + + @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; + public data; + + public ngOnInit(): void { + const typeArr = ['Gold', 'Silver', 'Coal']; + this.data = FinancialData.generateData(1000).map(dataObj => { + const type = typeArr[generateRandomInteger(0, 2)]; + switch (type) { + case 'Gold': + dataObj['Type'] = 'Gold'; + dataObj['Price'] = generateRandomFloat(1261.78, 1302.76); + dataObj['Buy'] = generateRandomFloat(1261.78, 1280.73); + break; + case 'Silver': + dataObj['Type'] = 'Silver'; + dataObj['Price'] = generateRandomFloat(17.12, 17.73); + dataObj['Buy'] = generateRandomFloat(17.12, 17.43); + break; + case 'Coal': + dataObj['Type'] = 'Coal'; + dataObj['Price'] = generateRandomFloat(0.40, 0.42); + dataObj['Buy'] = generateRandomFloat(0.42, 0.46); + break; + } + return dataObj; + }); + } + + public ngAfterViewInit() { + const expressions = []; + this.grid.columns.forEach(c => { + const sortExpr = + { + dir: generateRandomInteger(1, 2), fieldName: c.field, + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + }; + expressions.push(sortExpr); + }); + this.grid.sortingExpressions = expressions; + this.grid.cdr.detectChanges(); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + +} +``` +```html +
+ + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` } ## Sorting through the API You can sort any column or a combination of columns through the Grid API using the Grid [`sort`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#sort) method: ```typescript import { SortingDirection } from 'igniteui-angular/grids/core'; // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package // Perform a case insensitive ascending sort on the ProductName column. this.grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); // Perform sorting on both the ProductName and Price columns. this.grid.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` > [!NOTE] > Sorting is performed using our [`DefaultSortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/defaultsortingstrategy.html) algorithm. Any [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortStrategy) or [`ISortingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html#strategy) can use a custom implementation of the [`ISortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingstrategy.html) as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clearsort) method: ```typescript // Removes the sorting state from the ProductName column this.grid.clearSort('ProductName'); // Removes the sorting state from every column in the Grid this.grid.clearSort(); ``` > [!NOTE] > The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#sortStrategy) of the **Grid** is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortStrategy) of the **column**, since they work in different scopes and expose different parameters. > [!NOTE] > The sorting operation **DOES NOT** change the underlying data source of the Grid. ## Initial sorting state It is possible to set the initial sorting state of the Grid by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#sortingExpressions) property of the Grid. ```typescript public ngAfterViewInit(): void { + this.grid.sortingExpressions = [ + { + dir: SortingDirection.Asc, fieldName: 'CategoryName', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + } + ]; } ``` > [!NOTE] > If values of type `string` are used by a column of [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) `Date`, the Grid won't parse them to `Date` objects and using Grid `sorting` won't work as expected. If you want to use `string` objects, additional logic should be implemented on an application level, in order to parse the values to `Date` objects.
## Remote Sorting The Grid supports remote sorting, which is demonstrated in the [`Grid Remote Data Operations`](remote-data-operations.md) topic.
## Sorting Indicators Templates The sorting indicator icon in the column header can be customized using a template. The following directives are available for templating the sorting indicator for any sorting state (ascending, descending, none): - `IgxSortHeaderIconDirective` – re-templates the sorting icon when no sorting is applied. ```html + unfold_more ``` - `IgxSortAscendingHeaderIconDirective` – re-templates the sorting icon when the column is sorted in ascending order. ```html + expand_less ``` - `IgxSortDescendningHeaderIconDirective` – re-templates the sorting icon when the column is sorted in descending order. ```html + expand_more ```
## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$sorted-header-icon-color` and `sortable-header-icon-hover-color` parameters. ```scss $custom-theme: grid-theme( + $sorted-header-icon-color: #ffb06a, + $sortable-header-icon-hover-color: black ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { DATA } from '../../data/localData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + + +// eslint-disable-next-line no-shadow +enum TYPE { + SINGLE = 'single', + MULTI = 'multiple' +} +@Component({ + selector: 'app-grid-sorting-styling', + styleUrls: ['./grid-sorting-styling.component.scss'], + templateUrl: 'grid-sorting-styling.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class SortingStylingComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + @ViewChild(IgxSelectComponent) + public igxSelect: IgxSelectComponent; + + public data: any[]; + public sortingTypes = [{ name: 'Multiple Sort', value: TYPE.MULTI }, { name: 'Single Sort', value: TYPE.SINGLE }]; + public currentSortingType: TYPE = TYPE.SINGLE; + + constructor() { + } + public ngOnInit(): void { + this.data = DATA; + this.grid1.sortingExpressions = [ + { + dir: SortingDirection.Asc, fieldName: 'CategoryName', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + } + ]; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public removeSorting($event) { + if (this.currentSortingType === TYPE.SINGLE) { + this.grid1.columns.forEach((col) => { + if (!(col.field === $event.fieldName)) { + this.grid1.clearSort(col.field); + } + }); + } + } + + public sortTypeSelection(event) { + this.grid1.clearSort(); + } +} +``` +```html +
+ + + + + + @for (type of sortingTypes; track type) { + + {{type.name}} + + } + + + + + + + + + + + + + + ${{val}} + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $sorted-header-icon-color: #ffb06a, + $sortable-header-icon-hover-color: black +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [ISortingExpression](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html) ## Additional Resources
- [Grid overview](grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md new file mode 100644 index 000000000..e67863a51 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-state-persistence.md @@ -0,0 +1,655 @@ +--- +_tocName: State Persistence +_premium: true +--- +--- title: Angular Grid State Persistence - Ignite UI for Angular _description: Easily save and restore the grid state, using our comprehensive Ignite UI toolset for Angular. Learn how to restore columns, explore usage, and see demos! _keywords: state persistence, ignite ui for angular, infragistics _license: commercial --- # Angular Grid State Persistence Тhe igxGridState directive allows developers to easily save and restore the grid state. When the [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive is applied on the grid, it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) and [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) methods that developers can use to achieve state persistence in any scenario. ## Supported Features [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive supports saving and restoring the state of the following features: - `Sorting` - `Filtering` - `Advanced Filtering` - `Paging` - `Cell Selection` - `Row Selection` - `Column Selection` - `Row Pinning` - `Expansion` - `GroupBy` - `Columns` + - Multi column headers + @@if (igxName === 'IgxGrid') { + - Multi-row Layout + } + - Columns order + - Column properties defined by the [`IColumnState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icolumnstate.html) interface. + - Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence.md#restoring-columns) section. >[!NOTE] > The [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive does not take care of templates. Go to [Restoring Column](state-persistence.md#restoring-columns) section to see how to restore column templates. >[!NOTE] > The `Row Selection` feature requires the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#primaryKey) property to be set, so it can be stored/restored correctly. ## Usage [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) - This method returns the grid state in a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The method accepts first optional parameter `serialize`, which determines whether [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) will return an [`IGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstate.html) object or a serialized JSON string. The developer may choose to get only the state for a certain feature/features, by passing in the feature name, or an array with feature names as a second argument. ```typescript // get all features` state in a serialized JSON string const gridState = state.getState(); // get an `IGridState` object, containing all features original state objects, as returned by the grid public API const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']); ``` [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) - The [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) method accepts the serialized JSON string or [`IGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstate.html) object as argument and will restore the state of each feature found in the object/JSON string. ```typescript state.setState(gridState); state.setState(sortingFilteringStates) ``` `options` - The [`options`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#options) object implements the [`IGridStateOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstateoptions.html) interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) method will not put the state of these features in the returned value and [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) method will not restore state for it. ```typescript public options = { cellSelection: false; sorting: false; } ``` ```html ``` The simple to use single-point API's allows to achieve a full state persistence functionality in just a few lines of code. **Copy paste the code from below** - it will save the grid state in the browser `sessionStorage` object every time the user leaves the current page. Whenever the user returns to main page, the grid state will be restored. No more need to configure those complex advanced filtering and sorting expressions every time to get the data you want - do it once and have the code from below do the rest for your users: ```typescript // app.component.ts @ViewChild(IgxGridStateDirective, { static: true }) public state!: IgxGridStateDirective; public ngOnInit() { + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); } public ngAfterViewInit() { + this.restoreGridState(); } public saveGridState() { + const state = this.state.getState() as string; + window.sessionStorage.setItem('grid1-state', state); } public restoreGridState() { + const state = window.sessionStorage.getItem('grid1-state'); + this.state.setState(state); } ``` ## Restoring columns When possible the state directive will reuses the columns that already exists on the grid when restoring the state, instead of creating new column instances. The only scenario where a new instance will be created is when the column (or its children in case of a column groups) have no `field` property so there's no way to uniquely identify the matching column and re-use it. For such scenarios, the following [`limitations`](state-persistence.md#limitations) are imposed. In that case restoring complex objects can be achieved with code on application level. Let's show how to do this for templated columns: 1. Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event: @@if (igxName === 'IgxGrid') { ```html + + + + + + ... ``` } @@if (igxName === 'IgxHierarchicalGrid') { ```html + + + + + + ... ``` } @@if (igxName === 'IgxTreeGrid') { ```html + + + + + + ... ``` } 2. Query the template view in the component using @ViewChild or @ViewChildren decorator. In the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event handler, assign the template to the column `bodyTemplate` property: ```typescript @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef; public onColumnInit(column: IgxColumnComponent) { + if (column.field === 'IsActive') { + column.bodyTemplate = this.activeTemplate; + column.summaries = MySummary; + column.filters = IgxNumberFilteringOperand.instance(); + } } ``` ## Demo ```typescript +/* eslint-disable max-len */ +import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject } from '@angular/core'; +import { NavigationStart, Router, RouterLink } from '@angular/router'; +import { FilteringExpressionsTree, FilteringLogic, IgxSummaryResult } from 'igniteui-angular/core'; +import { GridFeatures, IGridState, IGridStateOptions, IgxColumnComponent, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { take } from 'rxjs/operators'; +import { employeesData } from './localData'; + +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxNumberSummaryOperand().operate(data); + result.push({ + key: 'test', + label: 'Test', + summaryResult: data.filter(rec => rec > 10 && rec < 30).length + }); + return result; + } +} + +// tslint:disable:object-literal-sort-keys +@Component({ + selector: 'app-grid', + styleUrls: ['./grid-state.component.scss'], + templateUrl: './grid-state.component.html', + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] +}) + +export class GridSaveStateComponent implements OnInit, AfterViewInit { + private router = inject(Router); + + @ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective; + @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent; + @ViewChildren(IgxCheckboxComponent) public checkboxes: QueryList; + + public localData: any[]; + public columns: any[]; + public gridId = 'grid1'; + public stateKey = this.gridId + '-state'; + public gridState: IGridState; + public serialize = true; + + public features: { key: GridFeatures; shortName: string }[] = [ + { key: 'advancedFiltering', shortName: 'Adv Filt' }, + { key: 'cellSelection', shortName: 'Cell Sel' }, + { key: 'columns', shortName: 'Columns' } , + { key: 'columnSelection', shortName: 'Cols Sel' }, + { key: 'expansion', shortName: 'Expansion' }, + { key: 'filtering', shortName: 'Filt' }, + { key: 'paging', shortName: 'Paging' }, + { key: 'rowPinning', shortName: 'Row Pining' }, + { key: 'rowSelection', shortName: 'Row Sel' }, + { key: 'sorting', shortName: 'Sorting' }, + { key: 'groupBy', shortName: 'GroupBy' } + ]; + + public options: IGridStateOptions = { + cellSelection: true, + rowSelection: true, + filtering: true, + advancedFiltering: true, + paging: true, + sorting: true, + groupBy: true, + columns: true, + expansion: true, + rowPinning: true, + columnSelection: true + }; + + public initialColumns: any[] = [ + // tslint:disable:max-line-length + { field: 'FirstName', header: 'First Name', width: '150px', dataType: 'string', pinned: true, sortable: true, filterable: true}, + { field: 'LastName', header: 'Last Name', width: '150px', dataType: 'string', pinned: true, sortable: true, filterable: true}, + { field: 'Country', header: 'Country', width: '140px', dataType: 'string', groupable: true, sortable: true, filterable: true, resizable: true }, + { field: 'Age', header: 'Age', width: '110px', dataType: 'number', sortable: true, filterable: true, hasSummary: true, resizable: true, summaries: MySummary}, + { field: 'RegistererDate', header: 'Registerer Date', width: '180px', dataType: 'date', sortable: true, filterable: true, resizable: true }, + { field: 'IsActive', header: 'Is Active', width: '140px', dataType: 'boolean', groupable: true, sortable: true, filterable: true } + // tslint:enable:max-line-length + ]; + + public ngOnInit() { + this.localData = employeesData; + this.columns = this.initialColumns; + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); + } + + public ngAfterViewInit() { + this.restoreGridState(); + } + + public saveGridState() { + const state = this.state.getState(this.serialize); + // const state = this.state.getState(this.serialize, ['sorting', 'filtering']); + if (typeof state === 'string') { + window.localStorage.setItem(this.stateKey, state); + } else { + window.localStorage.setItem(this.stateKey, JSON.stringify(state)); + } + } + + public restoreGridState() { + const state = window.localStorage.getItem(this.stateKey); + if (state) { + this.state.setState(state); + } + } + + public restoreFeature(stateDirective: IgxGridStateDirective, feature: string) { + const state = this.getFeatureState(this.stateKey, feature); + if (state) { + const featureState = { } as IGridState; + featureState[feature] = state; + stateDirective.setState(featureState); + } + } + + public getFeatureState(stateKey: string, feature: string) { + let state = window.localStorage.getItem(stateKey); + state = state ? JSON.parse(state)[feature] : null; + return state; + } + + public resetGridState() { + const grid: IgxGridComponent = this.grid; + const pagingState = {index: 0, recordsPerPage: 15, metadata: { countPages: 3, countRecords: this.localData.length}}; + grid.pagingState = pagingState; + grid.filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + grid.advancedFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + grid.sortingExpressions = []; + grid.groupingExpressions = []; + grid.deselectAllColumns(); + grid.deselectAllRows(); + grid.clearCellSelection(); + } + + public onChange(event: any, action: string) { + if (action === 'toggleAll') { + this.checkboxes.forEach(cb => { + cb.checked = event.checked; + }); + for (const key of Object.keys(this.options)) { + this.state.options[key] = event.checked; + } + return; + } + this.state.options[action] = event.checked; + } + + public clearStorage() { + window.localStorage.removeItem(this.stateKey); + } + + public reloadPage() { + window.location.reload(); + } +} +``` +```html +
+
+
+ + + + + + +
+ +
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
+ +
+
+ All +
+ @for (f of features; track f) { +
+ + {{ f.shortName }} + +
+ } +
+
+ + + + + + + + + + + @for (c of columns; track c) { + + + } + +
+``` +```scss +.controls-holder { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + width: 100%; +} + +.switches { + display: flex; + justify-content: space-between; + justify-content: flex-start; + align-items: center; + flex: 1 0 0%; + min-width: 100%; + padding-right: 20px; + font-size: 0.9rem; + margin-top: 0; + > button { + margin-right: 10px; + } +} + +.control-item { + display: block; + padding: 8px 0px; + > span { + cursor: pointer; + } + margin-right: 10px; +} + +.grid__wrapper { + margin: 0 16px; + padding-top: 16px; + width: 100%; + + igx-grid { + --ig-size: var(--ig-size-medium); + } +} +``` ## Restoring Strategies [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) will not persist neither remote operations nor custom dimension strategies (For further information see [Grid Remote Operations](remote-data-operations.md) sample) by default (see [`limitations`](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. The `IgxGridState` exposes an event called [`stateParsed`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#stateParsed) which can be used to additionally modify the grid state before it gets applied. Let's show how to do this: >[!NOTE] > [`stateParsed`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective) is only emitted when we are using [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) with string argument. - Set custom sorting strategy and custom column and row dimension strategies: ```html ``` ```typescript @ViewChild(IgxGridStateDirective, { static: true }) public state!: IgxGridStateDirective; public customStrategy = NoopSortingStrategy.instance(); public options: IGridStateOptions = {...}; ``` - Restoring the state from the `sessionStorage` and applying the custom strategies looks like the following: ```typescript public restoreState() { + const state = window.sessionStorage.getItem('grid-state'); + this.state.stateParsed.pipe(take(1)).subscribe(parsedState => { + parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance()); + }); + this.state.setState(state as string); } ``` ```typescript +import { Component, TemplateRef, ViewChild, inject } from '@angular/core'; + +import { IGridStateOptions, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridStateDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { NoopSortingStrategy } from 'igniteui-angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { Observable } from 'rxjs'; +import { take } from 'rxjs/operators'; +import { FinancialDataService } from '../../services/financial.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + providers: [FinancialDataService], + selector: 'app-grid-state-persistance-sample', + styleUrls: ['./grid-state-persistance-sample.component.scss'], + templateUrl: 'grid-state-persistance-sample.component.html', + imports: [IgxButtonDirective, IgxIconComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridStateDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxBadgeComponent, AsyncPipe] +}) + +export class GridStatePersistenceSampleComponent { + private localService = inject(FinancialDataService); + + @ViewChild('grid', { static: true }) + public grid: IgxGridComponent; + @ViewChild(IgxGridStateDirective, { static: true }) + public state!: IgxGridStateDirective; + + @ViewChild('price', { static: true }) public priceTemplate: TemplateRef; + @ViewChild('change', { static: true }) public changeTemplate: TemplateRef; + @ViewChild('buy', { static: true }) public buyTemplate: TemplateRef; + @ViewChild('sell', { static: true }) public sellTemplate: TemplateRef; + @ViewChild('spread', { static: true }) public spreadTemplate: TemplateRef; + @ViewChild('volume', { static: true }) public volumeTemplate: TemplateRef; + @ViewChild('highD', { static: true }) public highDTemplate: TemplateRef; + @ViewChild('lowD', { static: true }) public lowDTemplate: TemplateRef; + @ViewChild('highY', { static: true }) public highYTemplate: TemplateRef; + @ViewChild('lowY', { static: true }) public lowYTemplate: TemplateRef; + @ViewChild('startY', { static: true }) public startYTemplate: TemplateRef; + @ViewChild('changeOnYear', { static: true }) public changeOnYearTemplate: TemplateRef; + @ViewChild('changePercentage', { static: true }) public changePercentageTemplate: TemplateRef; + + public data: Observable; + public customStrategy = NoopSortingStrategy.instance(); + public options: IGridStateOptions = { + rowSelection: true, + filtering: true, + sorting: true, + columnSelection: true + }; + + constructor() { + this.localService.getData(100000); + this.data = this.localService.records; + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public saveState() { + const state = this.state.getState() as string; + window.sessionStorage.setItem('grid-state', state); + } + + public restoreState() { + const state = window.sessionStorage.getItem('grid-state'); + this.state.stateParsed.pipe(take(1)).subscribe(parsedState => { + parsedState.sorting.forEach(x => x.strategy = this.customStrategy); + }); + this.state.setState(state); + } + + public clearStorage() { + window.sessionStorage.removeItem('grid-state'); + } + + public onColumnInit(column: IgxColumnComponent) { + if (column.field === 'Price') { + column.bodyTemplate = this.priceTemplate; + } + else if (column.field === 'Buy') { + column.bodyTemplate = this.buyTemplate; + } + else if (column.field === 'Sell') { + column.bodyTemplate = this.sellTemplate; + } + else if (column.field === 'Spread') { + column.bodyTemplate = this.spreadTemplate; + } + else if (column.field === 'Volume') { + column.bodyTemplate = this.volumeTemplate; + } + else if (column.field === 'High(D)') { + column.bodyTemplate = this.highDTemplate; + } + else if (column.field === 'Low(D)') { + column.bodyTemplate = this.lowDTemplate; + } + else if (column.field === 'High(Y)') { + column.bodyTemplate = this.highYTemplate; + } + else if (column.field === 'Low(Y)') { + column.bodyTemplate = this.lowYTemplate; + } + else if (column.field === 'Start(Y)') { + column.bodyTemplate = this.startYTemplate; + } + else if (column.field === 'Change On Year(%)') { + column.bodyTemplate = this.changeOnYearTemplate; + } + else if (column.field === 'Change(%)') { + column.bodyTemplate = this.changeTemplate; + } + else if (column.field === 'Change') { + column.bodyTemplate = this.changePercentageTemplate; + } + } + +} +``` +```html +
+ + + + + +
+ +
+ + + + + + + + {{formatCurrency(val)}} + + + + + Change + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + {{formatNumber(val)}} + + + Change(%) + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + + + {{formatNumber(val)}} + + + + + {{formatNumber(val)}} + + + + + {{formatCurrency(val)}} + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + + + {{formatCurrency(val)}} + + + +
+
+``` +```scss +.cellAlignSyle { + text-align: right; + float:right; +} +.cellAlignSyle > span { + float:right; +} +.up { + color: green; +} +.down { + color: red; +} +.headerAlignSyle { + text-align: right !important; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} + +.switches { + display: flex; + justify-content: flex-start; + align-items: center; + flex: 1 0 0%; + min-width: 100%; + padding-right: 20px; + font-size: 0.9rem; + margin: 10px; + + >button { + margin-right: 10px; + } +} +``` ## Limitations - [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getstate) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgxGridState`] directive will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters), [`summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaries), [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortstrategy), [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses), [`cellStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellstyles), [`headerTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#headerTemplate) and [`bodyTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#bodyTemplate) properties.
## API References - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridStateDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) ## Additional Resources
- [Grid overview](grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Selection](selection.md) + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md new file mode 100644 index 000000000..ec24bbbd0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-summaries.md @@ -0,0 +1,1595 @@ +--- +_tocName: Summaries +_premium: true +--- +--- title: Angular Grid Summaries - Ignite UI for Angular _description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular table _keywords: angular grid summaries, igniteui for angular, infragistics _license: commercial --- # Angular Grid Summaries The Angular UI grid in Ignite UI for Angular has a **summaries** feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Grid. ## Angular Grid Summaries Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType, IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxNumberSummaryOperand().operate(data); + result.push({ + key: 'test', + label: 'Test', + summaryResult: data.filter((rec) => rec > 10 && rec < 30).length + }); + + return result; + } +} +@Component({ + selector: 'app-grid-sample-3', + styleUrls: ['./grid-sample-3.component.scss'], + templateUrl: './grid-sample-3.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] +}) +export class GridSample3Component { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public mySummary = MySummary; + public data; + public productId = 0; + + constructor() { + this.data = DATA; + this.productId = DATA.length; + } + + public toggleSummary(column: ColumnType) { + column.hasSummary = !column.hasSummary; + } +} +``` +```html +
+ + + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + ${{val}} + + +
{{col.field}}
+ functions + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
{{col.field}}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
{{col.field}}
+ functions + + + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.header { + height: 100%; +} + +:host ::ng-deep{ + .igx-grid__th .title{ + width: 100%; + cursor: auto; + } + + @media screen and (max-width: 677px){ + + .header-icon { + padding-bottom: 17px; + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + .header-text { + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } + } + + + @media screen and (min-width: 677px){ + + .header-icon { + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + + .header-text { + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } + } + + + @media screen and (min-width: 992px){ + + .header-icon { + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + margin-right: 10px; + cursor: pointer; + } + + .header-text { + float:left; + white-space: nowrap; + width: 50%; + cursor: auto; + } + } +} +```
> [!NOTE] > The summary of the column is a **function of all column values**, unless filtering is applied, then the summary of the column will be **function of the filtered result values** **Grid summaries** can also be enabled on a per-column level in Ignite UI for Angular, which means that you can activate it only for columns that you need. Grid summaries gives you a predefined set of default summaries, depending on the type of data in the column, so that you can save some time: For `string` and `boolean` [`data types`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType), the following function is available: - count For `number`, `currency` and `percent` data types, the following functions are available: - count - min - max - average - sum For `date` data type, the following functions are available: - count - earliest - latest All available column data types could be found in the official [Column types topic](column-types.md#default-template). **Grid summaries** are enabled per-column by setting [`hasSummary`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#hasSummary) property to `true`. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the `igx-grid` the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#datatype) property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs). ```html + + + ``` The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#enableSummaries)/[`disableSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#disableSummaries) of the **igx-grid**. ```html + + + ``` ```typescript public enableSummary() { + this.grid1.enableSummaries([ + {fieldName: 'ReorderLevel', customSummary: this.mySummary}, + {fieldName: 'ProductID'} + ]); } public disableSummary() { + this.grid1.disableSummaries('ProductName'); } ``` ## Custom Grid Summaries If these functions do not fulfill your requirements you can provide a custom summary for the specific columns. In order to achieve this you have to override one of the base classes [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) class provides the default implementation only for the [`count`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#count) method. [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) extends [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) and provides implementation for the [`min`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#max), [`sum`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#sum) and [`average`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#average). [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) extends [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) and additionally gives you [`earliest`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html#earliest) and [`latest`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html#latest). ```typescript import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/core'; // import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from '@infragistics/igniteui-angular'; for licensed package class MySummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + + operate(data?: any[]): IgxSummaryResult[] { + const result = super.operate(data); + result.push({ + key: 'test', + label: 'Test', + summaryResult: data.filter(rec => rec > 10 && rec < 30).length + }); + return result; + } } ``` As seen in the examples, the base classes expose the [`operate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#operate) method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. The method returns a list of [`IgxSummaryResult`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxsummaryresult.html). ```typescript interface IgxSummaryResult { + key: string; + label: string; + summaryResult: any; } ``` and take optional parameters for calculating the summaries. See [Custom summaries, which access all data](#custom-summaries-which-access-all-data) section below. > [!NOTE] > In order to calculate the summary row height properly, the Grid needs the [`operate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#operate) method to always return an array of [`IgxSummaryResult`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxsummaryresult.html) with the proper length even when the data is empty. And now let's add our custom summary to the column `UnitsInStock`. We will achieve that by setting the [`summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaries) property to the class we create below. ```html + + + + + + + + ``` ```typescript ... export class GridComponent implements OnInit { + mySummary = MySummary; + .... } ``` ### Custom summaries, which access all data + + Now you can access all Grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method. As you can see in the code snippet below the operate method has the following three parameters: - columnData - gives you an array that contains the values only for the current column - allGridData - gives you the whole grid data source - fieldName - current column field ```typescript class MySummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] { + const result = super.operate(allData.map(r => r[fieldName])); + result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length }); + return result; + } } ``` ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +class DiscontinuedSummary { + public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'products', + label: 'Products', + summaryResult: data.length + }); + result.push({ + key: 'total', + label: 'Total Items', + summaryResult: IgxNumberSummaryOperand.sum(data) + }); + result.push({ + key: 'discontinued', + label: 'Discontinued Products', + summaryResult: allData.map(r => r['Discontinued']).filter((rec) => rec).length + }); + result.push({ + key: 'totalDiscontinued', + label: 'Total Discontinued Items', + summaryResult: IgxNumberSummaryOperand.sum(allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName])) + }); + return result; + } +} +@Component({ + selector: 'app-grid-all-data-summary', + styleUrls: ['./grid-allData-summary.component.scss'], + templateUrl: './grid-allData-summary.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) +export class GridAllDataSummaryComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public discontinuedSummary = DiscontinuedSummary; + public data; + + constructor() { + this.data = DATA; + } +} +``` +```html +
+ + @if (false) { + + } + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` ### Summary Template `igxSummary` targets the column summary providing as a context the column summary results. ```html + + My custom summary template + {{ summaryResults[0].label }} - {{ summaryResults[0].summaryResult }} + ``` When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the size of the grid. Use the [summaryRowHeight](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryRowHeight) input property to override the default value. As an argument it expects a number value, and setting a false value will trigger the default sizing behavior of the grid footer. > [!NOTE] > Column summary template could be defined through API by setting the column [summaryTemplate](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaryTemplate) property to the required TemplateRef. ```typescript +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DATA } from '../../data/nwindData'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class DiscontinuedSummary { + public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'products', + label: 'Products', + summaryResult: data.length + }); + result.push({ + key: 'total', + label: 'Total Items', + summaryResult: IgxNumberSummaryOperand.sum(data) + }); + result.push({ + key: 'discontinued', + label: 'Discontinued Products', + summaryResult: allData.map(r => r['Discontinued']).filter((rec) => rec).length + }); + result.push({ + key: 'totalDiscontinued', + label: 'Total Discontinued Items', + summaryResult: IgxNumberSummaryOperand.sum(allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName])) + }); + return result; + } +} +@Component({ + selector: 'app-grid-summary-template', + styleUrls: ['./grid-summary-template.component.scss'], + templateUrl: './grid-summary-template.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSummaryTemplateDirective] +}) +export class GridSummaryTemplateComponent implements OnInit { + public discontinuedSummary = DiscontinuedSummary; + public data; + public summaryHeight = 135; + public size = 'medium'; + public sizes; + public hasSummary = true; + + constructor() { + this.data = DATA; + } + + public ngOnInit(): void { + this.sizes = [ + { label: 'small', selected: this.size === 'small', togglable: true }, + { label: 'medium', selected: this.size === 'medium', togglable: true }, + { label: 'large', selected: this.size === 'large', togglable: true } + ]; + } + + public selectSize(event): void { + this.size = this.sizes[event.index].label; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } +} +``` +```html +
+
+ + + + + Toggle Summaries + + +
+ + + + + + + + + + + + + +
+ {{ summaryResults[0].label }}{{ summaryResults[0].summaryResult }} + {{ summaryResults[1].label }}{{ summaryResults[1].summaryResult }} +
+ + + +
+``` +```scss +.sample__wrapper { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + height: 100%; + overflow-y: auto; +} + +igx-buttongroup { + max-width: 450px; + flex: 1; +} + +.summary-temp { + display: flex; + flex-direction: column; + margin: 0 1px; + font-size: 14px; + line-height: 24px; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + span { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + justify-content: space-between; + color: hsla(var(--ig-gray-900)); + + span { + user-select: all; + max-width: 300px; + padding-right: 8px; + } + + strong { + font-size: 12px; + text-transform: uppercase; + min-width: 70px; + justify-self: flex-start; + text-align: left; + color: var(--ig-secondary-600); + user-select: none; + } + } + + > * { + padding: 8px 0; + line-height: 18px; + border-bottom: 1px dashed hsla(var(--ig-gray-400)); + + &:last-child { + border-bottom: none; + } + } + +} + +::-webkit-scrollbar { + width: 5px !important; + height: 5px !important; +} + +.controls-wrapper { + display: flex; + align-items: center; + flex-direction: row; + gap: 16px; +} +``` ## Disable Summaries The [`disabledSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#disabledSummaries) property provides precise per-column control over the Ignite UI for Angular grid summary feature. This property enables users to customize the summaries displayed for each column in the grid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']`, by specifying their summary keys in an array. This property can also be modified **dynamically at runtime** through code, providing flexibility to adapt the grid's summaries to changing application states or user actions. The following examples illustrate how to use the `disabledSummaries` property to manage summaries for different columns and exclude specific default and custom summary types in the Ignite UI for Angular grid: ```html ``` For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. For `UnitsInStock`, custom summaries such as `total` and `totalDiscontinued` are excluded using the `disabledSummaries` property. At runtime, summaries can also be dynamically disabled using the `disabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. ```typescript +import { + Component, + ViewChild, + OnInit, + AfterViewInit, + ElementRef, + QueryList, + ViewChildren +} from "@angular/core"; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { DATA } from "../../data/nwindData"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + + +class UnitsInStockSummary { + public operate( + data: any[] = [], + allData: any[] = [], + fieldName: string = "" + ): IgxSummaryResult[] { + const result = []; + const values = allData + .map((item) => item[fieldName] ?? 0) + .filter((value) => value !== 0); + const discontinuedItems = allData.filter( + (item) => item["Discontinued"] + ); + const discontinuedValues = discontinuedItems + .map((item) => item[fieldName] ?? 0) + .filter((value) => value !== 0); + + result.push({ + key: "count", + label: "Count", + summaryResult: values.length + }); + + result.push({ + key: "min", + label: "Min", + summaryResult: values.length > 0 ? Math.min(...values) : "N/A" + }); + + result.push({ + key: "max", + label: "Max", + summaryResult: values.length > 0 ? Math.max(...values) : "N/A" + }); + + result.push({ + key: "sum", + label: "Sum", + summaryResult: IgxNumberSummaryOperand.sum(values) + }); + + result.push({ + key: "average", + label: "Average", + summaryResult: + values.length > 0 + ? IgxNumberSummaryOperand.sum(values) / values.length + : "N/A" + }); + + result.push({ + key: "median", + label: "Median", + summaryResult: + values.length > 0 + ? (() => { + const sortedValues = values + .slice() + .sort((a, b) => a - b); + return sortedValues.length % 2 === 0 + ? (sortedValues[sortedValues.length / 2 - 1] + + sortedValues[sortedValues.length / 2]) / + 2 + : sortedValues[ + Math.floor(sortedValues.length / 2) + ]; + })() + : "N/A" + }); + + result.push({ + key: "range", + label: "Range", + summaryResult: + values.length > 0 + ? Math.max(...values) - Math.min(...values) + : "N/A" + }); + + result.push({ + key: "discontinued", + label: "Discontinued Products", + summaryResult: discontinuedItems.length + }); + + result.push({ + key: "totalDiscontinued", + label: "Total Discontinued Items", + summaryResult: IgxNumberSummaryOperand.sum(discontinuedValues) + }); + + return result; + } +} + +class DiscontinuedSummary { + public operate( + data: any[] = [], + allData: any[] = [], + fieldName: string = "" + ): IgxSummaryResult[] { + const result = []; + + result.push({ + key: "count", + label: "Count", + summaryResult: allData.length + }); + + result.push({ + key: "true", + label: "True", + summaryResult: allData.filter((item) => item[fieldName] === true) + .length + }); + + result.push({ + key: "false", + label: "False", + summaryResult: allData.filter((item) => item[fieldName] === false) + .length + }); + + return result; + } +} + +@Component({ + selector: "app-grid-summary-sample", + styleUrls: ["./grid-disable-summaries.component.scss"], + templateUrl: "grid-disable-summaries.component.html", + imports: [ + IgxGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective, + IgxCheckboxComponent, + IgxToggleDirective +] +}) +export class GridDisableSummariesComponent implements OnInit, AfterViewInit { + @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; + @ViewChildren(IgxToggleDirective) public toggles: QueryList; + @ViewChildren('toggleButton') public buttons: QueryList; + + public data: any[]; + public togglesArray: any[]; + public buttonsArray: any[]; + + public columns = [ + { + label: 'Product ID', + field: 'ProductID', + summaries: [] + }, + { + label: 'Product Name', + field: 'ProductName', + summaries: [] + }, + { + label: 'Unit Price', + field: 'UnitPrice', + summaries: [] + }, + { + label: 'Units In Stock', + field: 'UnitsInStock', + summaries: [] + }, + { + label: 'Discontinued', + field: 'Discontinued', + summaries: [] + }, + { + label: 'Order Date', + field: 'OrderDate', + summaries: [] + } + ]; + + public unitsInStockSummary = UnitsInStockSummary; + public discontinuedSummary = DiscontinuedSummary; + + private _positionSettings = { + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Bottom, + horizontalDirection: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom + }; + + private _overlaySettings: OverlaySettings = { + closeOnOutsideClick: true, + modal: false, + closeOnEscape: true, + positionStrategy: new ConnectedPositioningStrategy(this._positionSettings) + }; + + constructor() {} + + public ngOnInit(): void { + this.data = DATA; + } + + public ngAfterViewInit(): void { + this.togglesArray = this.toggles.toArray(); + this.buttonsArray = this.buttons.toArray(); + + this.columns.forEach((column, index) => { + column.summaries = this.getSummaries(column.field) + }); + } + + public getCheckedSummariesCount(summaries: any[]): number { + return summaries.filter(summary => summary.checked).length; + } + + public toggle(index: number): void { + this._overlaySettings.target = this.buttonsArray[index].nativeElement; + this.togglesArray[index].toggle(this._overlaySettings); + } + + public toggleCheckbox(event: any, index: number, column: any): void { + column.summaries[index].checked = event.checked; + if (event.checked) { + this.grid1.getColumnByName(column.field).disabledSummaries = [ + ...this.grid1.getColumnByName(column.field).disabledSummaries, + column.summaries[index].summaryKey + ]; + } else { + this.grid1.getColumnByName(column.field).disabledSummaries = this.grid1.getColumnByName(column.field).disabledSummaries.filter( + (key: string) => key !== column.summaries[index].summaryKey + ); + } + } + + public uncheckAllColumns(column: any): void { + column.summaries.forEach(summary => (summary.checked = false)); + this.grid1.getColumnByName(column.field).disabledSummaries = []; + } + + public checkAllColumns(column: any): void { + column.summaries.forEach(summary => (summary.checked = true)); + this.grid1.getColumnByName(column.field).disabledSummaries = column.summaries.map(summary => summary.summaryKey); + } + + private getSummaries(columnName: string): any[] { + return this.grid1 + .getColumnByName(columnName) + .summaries.operate( + this.grid1.data.map((record) => record.ProductID) + ) + .map((summary) => ({ + summaryKey: summary.key, + summaryLabel: summary.label, + checked: false + })); + } +} +``` +```html +
+
+
Disable Summaries for Column:
+ @for (column of columns; track column; let i = $index) { +
+ +
+
+
+

+ Disabled Summaries +

+
+
+ @for (summary of column.summaries; track summary; let i = $index) { + + {{ summary.summaryLabel }} + + } +
+
+ + +
+
+
+
+ } +
+ + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper { + margin: 0 auto; + padding: 16px; + + .summaries { + margin-bottom: 1rem; + display: flex; + align-items: center; + flex-wrap: wrap; + + &-title { + margin: 0 0 1rem 0; + flex-basis: 100%; + } + + .summary-column-button { + margin-right: 1rem; + margin-bottom: 0.5rem; + } + } +} + +.summaries-dropdown { + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 8px; + + &-title { + color: #40B3FF; + margin: 0.5rem 1.1rem; + } + + &-items { + display: flex; + flex-direction: column; + + .summaries-dropdown-item { + display: flex; + align-items: center; + padding: 0 1rem; + } + } + + &-buttons { + display: flex; + justify-content: space-between; + padding: 0.2rem; + } +} +``` ## Formatting summaries By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs). When using custom operands, the `locale` and `pipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the [`summaryFormatter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaryFormatter) property. ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' + && result !== null && result !== undefined) { + const pipe = new DatePipe('en-US'); + return pipe.transform(result,'MMM YYYY'); + } + return result; } ``` ```html ``` ```typescript +import { DatePipe } from '@angular/common'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-summary-formatter', + styleUrls: ['./grid-summary-formatter.component.scss'], + templateUrl: './grid-summary-formatter.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + + export class GridSummaryFormatterComponent implements OnInit { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + + public data: any[]; + + public ngOnInit(): void { + this.data = DATA; + } + + public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if (summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' + && result !== null && result !== undefined) { + const pipe = new DatePipe('en-US'); + return pipe.transform(result, 'MMM YYYY'); + } + return result; + } + } +``` +```html +
+ + + + + + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +``` ## Summaries with Group By When you have grouped by columns, the Grid allows you to change the summary position and calculation mode using the [`summaryCalculationMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryCalculationMode) and [`summaryPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryPosition) properties. Along with these two properties the IgxGrid exposes and [`showSummaryOnCollapse`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#showSummaryOnCollapse) property which allows you to determine whether the summary row stays visible when the group row that refers to is collapsed. The available values of the [`summaryCalculationMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryCalculationMode) property are: - rootLevelOnly - Summaries are calculated only for the root level. - childLevelsOnly - Summaries are calculated only for the child levels. - rootAndChildLevels - Summaries are calculated for both root and child levels. This is the default value. The available values of the [`summaryPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryPosition) property are: - top - The summary row appears before the group by row children. - bottom - The summary row appears after the group by row children. This is the default value. The [`showSummaryOnCollapse`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#showSummaryOnCollapse) property is boolean. Its default value is set to **false**, which means that the summary row would be hidden when the group row is collapsed. If the property is set to **true** the summary row stays visible when group row is collapsed. > [!NOTE] > The [`summaryPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryPosition) property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the Grid. ### Demo ```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSelectionMode, GridSummaryPosition, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class AvgSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + const avg = IgxNumberSummaryOperand.average(data); + result.push({ + key: 'avg', + label: 'Average', + summaryResult: data.length ? '$' + avg.toFixed(2) : '' + }); + return result; + } +} + +class SumSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'sum', + label: 'Sum', + summaryResult: IgxNumberSummaryOperand.sum(data) + }); + return result; + } +} + +@Component({ + selector: 'app-grid-groupby-summary-sample', + styleUrls: ['./grid-groupby-summary-sample.component.scss'], + templateUrl: './grid-groupby-summary-sample.component.html', + imports: [IgxButtonGroupComponent, IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridGroupBySummarySampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public expr: ISortingExpression[]; + public avgSummary = AvgSummary; + public sumSummary = SumSummary; + public summaryPositions; + public summaryPosition: GridSummaryPosition = GridSummaryPosition.bottom; + public summaryCalcModes; + public summaryCalculationMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels; + public selectionMode: GridSelectionMode = 'multiple'; + + constructor() { + this.data = INVOICE_DATA; + this.expr = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() } + ]; + + this.summaryPositions = [ + { + label: GridSummaryPosition.top, + selected: this.summaryPosition === GridSummaryPosition.top, + togglable: true + }, + { + label: GridSummaryPosition.bottom, + selected: this.summaryPosition === GridSummaryPosition.bottom, + togglable: true + } + ]; + + this.summaryCalcModes = [ + { + label: 'Root Level Only', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly, + togglable: true, + value: GridSummaryCalculationMode.rootLevelOnly + }, + { + label: 'Child Levels Only', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly, + togglable: true, + value: GridSummaryCalculationMode.childLevelsOnly + }, + { + label: 'Root And Child Levels', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels, + togglable: true, + value: GridSummaryCalculationMode.rootAndChildLevels + } + ]; + } + + public selectSummaryPosition(event) { + this.summaryPosition = this.summaryPositions[event.index].label; + this.grid1.summaryPosition = this.summaryPosition; + } + + public selectSummaryCalcMode(event) { + this.summaryCalculationMode = this.summaryCalcModes[event.index].value; + this.grid1.summaryCalculationMode = this.summaryCalculationMode; + } + + public toggle(event) { + this.grid1.showSummaryOnCollapse = !this.grid1.showSummaryOnCollapse; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public isDate(value: any) { + if (value instanceof Date) { + return true; + } else { + return false; + } + } +} +``` +```html +
+ +
+ +
+ +
+
+ Show summary row when group row is collapsed: +
+ + + + + + + + + + + +``` +```scss +:host { + display: block; + padding: 16px; +} + +.summary-chooser { + margin-bottom: 16px; +} + +igx-buttongroup{ + display: block; + width: 600px; +} +```
## Exporting Summaries There is an [`exportSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxExcelExporterOptions.html#exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. The [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxExcelExporterService.html) will export the default summaries for all column types as their equivalent excel functions so they will continue working properly when the sheet is modified. Try it for yourself in the example below: ```typescript +import { Component, ViewChild, inject } from '@angular/core'; +import { ColumnType, IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { + IgxCellHeaderTemplateDirective, + IgxCellTemplateDirective, + IgxColumnComponent, + IgxNumberSummaryOperand, + IgxExcelExporterOptions, + IgxExcelExporterService +} from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { DATA } from '../../data/nwindData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxNumberSummaryOperand().operate(data); + result.push({ + key: 'test', + label: 'Test', + summaryResult: data.filter((rec) => rec > 10 && rec < 30).length + }); + + return result; + } +} +@Component({ + selector: 'app-grid-summary-export', + styleUrls: ['./grid-summary-export.component.scss'], + templateUrl: './grid-summary-export.component.html', + imports: [IgxButtonDirective, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] +}) +export class GridSummaryExportComponent { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + + public mySummary = MySummary; + public data; + public productId = 0; + + constructor() { + this.data = DATA; + this.productId = DATA.length; + } + + public toggleSummary(column: ColumnType) { + column.hasSummary = !column.hasSummary; + } + + public exportButtonHandler() { + this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedFile')); + } +} +``` +```html +
+
+ + Press the button to export the Grid as a .xlsx file. +
+ + + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + ${{val}} + + +
{{col.field}}
+ functions + + + + + {{val}} + + +
{{col.field}}
+ functions + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + +
{{col.field}}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
{{col.field}}
+ functions + + + +
+``` +```scss +.grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.header { + height: 100%; +} + +:host ::ng-deep{ + .igx-grid__th .title{ + width: 100%; + cursor: auto; + } + + @media screen and (max-width: 677px){ + + .header-icon { + padding-bottom: 17px; + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + .header-text { + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } + } + + + @media screen and (min-width: 677px){ + + .header-icon { + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + + .header-text { + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } + } + + + @media screen and (min-width: 992px){ + + .header-icon { + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + margin-right: 10px; + cursor: pointer; + } + + .header-text { + float:left; + white-space: nowrap; + width: 50%; + cursor: auto; + } + } +} + +.button-container { + margin: 25px auto; +} +``` The exported file includes a hidden column that holds the level of each `DataRecord` in the sheet. This level is used in the summaries to filter out the cells that need to be included in the summary function. In the table below, you can find the corresponding Excel formula for each of the default summaries. | Data Type | Function | Excel Function | |:--------|:--------:|:---------------| |`string`, `boolean` | count | ="Count: "&COUNTIF(start:end, recordLevel) | |`number`, `currency`, `percent` | count | ="Count: "&COUNTIF(start:end, recordLevel) | || min| ="Min: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)) | || max | ="Max: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)) | || average | ="Avg: "&AVERAGEIF(start:end, recordLevel, rangeStart:rangeEnd) | || sum | ="Sum: "&SUMIF(start:end, recordLevel, rangeStart:rangeEnd) | |`date` | count | ="Count: "&COUNTIF(start:end, recordLevel) | || earliest | ="Earliest: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) | || latest | ="Latest: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) | ### Known Limitations |Limitation|Description| |--- |--- | | Exporting custom summaries | Custom summaries will be exported as strings instead of Excel functions. | | Exporting templated summaries | Templated summaries are not supported and will be exported as the default ones. | ## Keyboard Navigation The summary rows can be navigated with the following keyboard interactions: - UP - navigates one cell up - DOWN - navigates one cell down - LEFT - navigates one cell left - RIGHT - navigates one cell right - CTRL + LEFT or HOME - navigates to the leftmost cell - CTRL + RIGHT or END - navigates to the rightmost cell ## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-summary-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-summary-theme) and accepts the `$background-color`, `$focus-background-color`, `$label-color`, `$result-color`, `$pinned-border-width`, `$pinned-border-style` and `$pinned-border-color` parameters. ```scss $custom-theme: grid-summary-theme( + $background-color: #e0f3ff, + $focus-background-color: rgba(#94d1f7, .3), + $label-color: #e41c77, + $result-color: black, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #e41c77 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component custom theme: ```scss :host { + @include tokens($custom-theme); } ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: + + ```scss :host { + ::ng-deep { + @include tokens($custom-theme); + } } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSelectionMode, GridSummaryPosition, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { INVOICE_DATA } from '../../data/invoiceData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class CustomSummary { + + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'sum', + label: 'Sum', + summaryResult: IgxNumberSummaryOperand.sum(data) + }, { + key: 'count', + label: 'Count', + summaryResult: data.length ? data.length : 0 + }); + return result; + } +} + +@Component({ + selector: 'app-grid-groupby-summary-sample', + styleUrls: ['./grid-groupby-summary-styling-sample.component.scss'], + templateUrl: './grid-groupby-summary-styling-sample.component.html', + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] +}) +export class GridGroupBySummaryStylingSampleComponent { + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public expr: ISortingExpression[]; + public customSummary = CustomSummary; + public summaryPositions; + public summaryPosition: GridSummaryPosition = GridSummaryPosition.bottom; + public summaryCalcModes; + public summaryCalculationMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels; + public selectionMode: GridSelectionMode = 'multiple'; + + constructor() { + this.data = INVOICE_DATA; + this.expr = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry', ignoreCase: false, + strategy: DefaultSortingStrategy.instance() } + ]; + + this.summaryPositions = [ + { + label: GridSummaryPosition.top, + selected: this.summaryPosition === GridSummaryPosition.top, + togglable: true + }, + { + label: GridSummaryPosition.bottom, + selected: this.summaryPosition === GridSummaryPosition.bottom, + togglable: true + } + ]; + + this.summaryCalcModes = [ + { + label: 'Root Level Only', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly, + togglable: true, + value: GridSummaryCalculationMode.rootLevelOnly + }, + { + label: 'Child Levels Only', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly, + togglable: true, + value: GridSummaryCalculationMode.childLevelsOnly + }, + { + label: 'Root And Child Levels', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels, + togglable: true, + value: GridSummaryCalculationMode.rootAndChildLevels + } + ]; + } + + public selectSummaryPosition(event) { + this.summaryPosition = this.summaryPositions[event.index].label; + this.grid1.summaryPosition = this.summaryPosition; + } + + public selectSummaryCalcMode(event) { + this.summaryCalculationMode = this.summaryCalcModes[event.index].value; + this.grid1.summaryCalculationMode = this.summaryCalculationMode; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public isDate(value: any) { + if (value instanceof Date) { + return true; + } else { + return false; + } + } + +} +``` +```html +
+
+ +
+ +
+ +
+ + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$summaries-background: #e0f3ff; + +$custom-theme: grid-summary-theme( + $background-color: $summaries-background, + $label-color: #e41c77, + $result-color: black, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #e41c77, +); + +:host { + ::ng-deep { + igx-grid-summary-row { + --summaries-patch-background: #{$summaries-background}; + } + + @include tokens($custom-theme); + } +} +``` ## API References - [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxGridSummaries Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-summary-theme) - [IgxSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) - [IgxNumberSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) - [IgxDateSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Additional Resources
- [Grid overview](grid.md) - [Column Data Types](column-types.md#default-template) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Selection-based Aggregates](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/grid/selection-based-aggregates.html)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md new file mode 100644 index 000000000..f3a41bdd5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-toolbar.md @@ -0,0 +1,867 @@ +--- +_tocName: Toolbar +_premium: true +--- +--- title: Angular Grid Toolbar - Ignite UI for Angular _description: Use Angular Data Grid Toolbar for essential UI operations. Hosts different UI controls for the Grid’s features - column hiding, pinning, excel exporting, etc. _keywords: angular toolbar, igniteui for angular, infragistics _license: commercial --- # Angular Grid Toolbar The Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) which is essentially a container for **UI** operations. The Angular toolbar is located at the top of the Angular component, i.e the Grid and it matches its horizontal size. The toolbar container can host predefined UI controls for the following Grid's features: - Column Hiding - Column Pinning - Exporting to Excel, CSV and PDF - Advanced Filtering or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. ## Angular Toolbar Grid Example ```typescript +import { Component} from '@angular/core'; +import { athletesData } from '../../data/athletesData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-toolbar-sample-1', + styleUrls: ['./grid-toolbar-sample-1.component.scss'], + templateUrl: './grid-toolbar-sample-1.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class GridToolbarSample1Component { + + public data: any[]; + + constructor() { + this.data = athletesData; + } +} +``` +```html +
+ + + + Grid Toolbar + + + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + +
+ + {{ cell.value }} +
+ + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.athlete_name { + margin-left: 30px; +} + +.country_name { + margin-left: 30px; +} +``` The predefined `actions` and `title` UI components are added inside the `` and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: ```html + + Grid Toolbar + + + + + + + ``` > Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html). This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty: ```html + + ``` For a comprehensive look over each of the default UI components, continue reading the **Features** section below. ## Features The toolbar is great at separating logic/interactions which affects the grid as a whole. As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid. These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them. ```typescript +import { Component } from '@angular/core'; +import { AbsoluteScrollStrategy, AutoPositionStrategy, GlobalPositionStrategy } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { scaleInCenter, scaleOutCenter } from 'igniteui-angular/animations'; +import { athletesData } from '../../data/athletesData'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-toolbar-sample-2', + styleUrls: ['./grid-toolbar-sample-2.component.scss'], + templateUrl: './grid-toolbar-sample-2.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class GridToolbarSample2Component { + + data: any[]; + toolbarTitle = 'Grid toolbar'; + enableHiding = true; + enablePinning = true; + enableExport = true; + enableFiltering = true; + public positionStrategyScaleCenter = new GlobalPositionStrategy({ + openAnimation: scaleInCenter, + closeAnimation: scaleOutCenter + }); + public overlaySettingsScaleCenter = { + positionStrategy: this.positionStrategyScaleCenter, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: true, + closeOnEscape: true + }; + + public positionStrategyAuto = new AutoPositionStrategy(); + public overlaySettingsAuto = { + positionStrategy: this.positionStrategyAuto, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: false, + closeOnEscape: false + }; + + constructor() { + this.data = athletesData; + } +} +``` +```html +
+
+ + + + +
+ Advanced Filtering + Column hiding + Column pinning + Exporting +
+
+ + + {{ toolbarTitle }} + + @if (enableFiltering) { + + } + @if (enableHiding) { + + } + @if (enablePinning) { + + } + @if (enableExport) { + + } + + + + + + +
+ + {{ cell.value }} +
+ + + + + +
+ + {{ cell.value }} +
+ + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + +
+``` +```scss +.grid__wrapper { + margin: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.control-panel { + margin-bottom: 16px; + + &__switches { + margin-top: 16px; + + > * { + margin-left: 32px; + + &:first-of-type { + margin-left: 0; + } + } + } +} + +.athlete-name { + margin-left: 8px; +} + +.country-name { + margin-left: 8px; +} +``` ### Title Setting a title for the toolbar in your grid is achieved by using the [IgxGridToolbarTitleComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html). Users can provide anything from simple text to more involved templates. ```html + Grid toolbar title ``` ### Actions The toolbar exposes a [specific container](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components. ```html + + + + ... + ``` Each action now exposes a way to change the overlay settings of the actions dialog by using the [`overlaySettings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#overlaySettings) input, example: ```html + + ``` ```ts public data: any[]; public positionStrategyScaleCenter = new GlobalPositionStrategy({ + openAnimation: scaleInCenter, + closeAnimation: scaleOutCenter }); public overlaySettingsScaleCenter = { + positionStrategy: this.positionStrategyScaleCenter, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: true, + closeOnEscape: true }; public positionStrategyAuto = new AutoPositionStrategy(); public overlaySettingsAuto = { + positionStrategy: this.positionStrategyAuto, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: false, + closeOnEscape: false }; constructor() { + this.data = athletesData; } ``` The default overlaySettings are using _ConnectedPositionStrategy_ with _Absolute_ scroll strategy, _modal_ set to false, with enabled _close on escape_ and _close on outside click_ interactions. ### Column pinning [Toolbar Pinning component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) provides the default UI for interacting with column pinning in the grid. The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. ```html + + + + ``` ### Column hiding [Toolbar Hiding component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. ```html + + + + ``` ### Advanced filtering [Toolbar Advanced Filtering component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html) provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button. ```html + + Custom text for the toggle button + ``` ### Data exporting As with the rest of the toolbar actions, exporting is provided through a [Toolbar Exporter component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) out of the box. The exporting component is using the respective service for the target data format ([Excel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html), [CSV](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html), [PDF](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html)). That means if the respective service is not provided through the dependency injection chain, the component won't be able to export anything. If you need a refresher on the DI in Angular, check the [official guide](https://angular.io/guide/dependency-injection). Here is a sample snippet showing how to enable all export services for your application. ```typescript // app.module.ts import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core'; // import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package @NgModule({ + ... + providers: [IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService ] }) export class AppModule { ... } ``` > [!Note] > In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the [API documentation](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) for the toolbar exporter component. Here is a snippet showing some of the options which can be customized through the Angular template: ```html + + + [exportCSV]="csvExportEnabled" + + [exportExcel]="excelExportEnabled" + + [exportPDF]="pdfExportEnabled" + + filename="exported_data" + > + Custom text for the exporter button + Custom text for the excel export entry + Custom text for the CSV export entry + Custom text for the PDF export entry + + ``` In addition to changing the exported filename, the user can further configure the exporter options by waiting for the [toolbarExporting](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#toolbarExporting) event and customizing the options entry in the event properties. > [!NOTE] > By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. > You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. > You can also cancel the export process by setting the cancel field of the event args to true. The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options: ```html ``` ```typescript configureExport(args: IGridToolbarExportEventArgs) { + const options: IgxExporterOptionsBase = args.options; + + options.fileName = `Report_${new Date().toDateString()}`; + + if (options instanceof IgxExcelExporterOptions) { + options.columnWidth = 10; + } else { + options.fileType = CsvFileTypes.TSV; + options.valueDelimiter = '\t'; + } + + args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => { + @@if (igxName === 'IgxGrid') { + // Don't export image fields + columnArgs.cancel = columnArgs.header === 'Athlete' || + columnArgs.header === 'Country'; + } + @@if (igxName === 'IgxTreeGrid') { + // Don't export image field + columnArgs.cancel = columnArgs.header === 'Name'; + } + }); } ``` The following sample demonstrates how to customize the exported files: ```typescript +import { Component } from '@angular/core'; +import { + CsvFileTypes, + IColumnExportingEventArgs, + IgxCsvExporterOptions, + IgxExcelExporterOptions, + IgxExporterOptionsBase, + IGridToolbarExportEventArgs, + IgxCellTemplateDirective, + IgxColumnComponent, + IgxGridToolbarActionsComponent, + IgxGridToolbarComponent, + IgxGridToolbarExporterComponent, + IgxGridToolbarTitleComponent +} from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { athletesData } from '../../data/athletesData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-toolbar-sample-3', + styleUrls: ['./grid-toolbar-sample-3.component.scss'], + templateUrl: './grid-toolbar-sample-3.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class GridToolbarSample3Component { + + public data: any[]; + + constructor() { + this.data = athletesData; + } + + public configureExport(args: IGridToolbarExportEventArgs) { + // You can customize the exporting from this event + const options: IgxExporterOptionsBase = args.options; + + options.fileName = `Report_${new Date().toDateString()}`; + + if (options instanceof IgxExcelExporterOptions) { + const excelOptions = options as IgxExcelExporterOptions; + excelOptions.columnWidth = 10; + } else { + const csvOptions = options as IgxCsvExporterOptions; + csvOptions.fileType = CsvFileTypes.TSV; + csvOptions.valueDelimiter = '\t'; + } + + args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => { + // Don't export image fields + columnArgs.cancel = columnArgs.header === 'Athlete' || + columnArgs.header === 'Country'; + }); + } +} +``` +```html +
+ + + Grid toolbar + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + +
+ + {{ cell.value }} +
+ + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.athlete_name { + margin-left: 30px; +} + +.country_name { + margin-left: 30px; +} +```
## Exporting Indicator When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress. Moreover, users can set the toolbar [showProgress](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample below has significant amount of data. While the data is being exported, the progress bar is shown. Additionally, it has another button that simulates a long running operation in the grid: ```typescript +import { Component } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-export-visualization', + templateUrl: './grid-export-visualization.component.html', + styleUrls: ['./grid-export-visualization.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class GridExportVisualizationComponent { + public localData = []; + constructor() { + for (let i = 0; i < 1000; i++) { + for (let c = 0; c < DATA.length; c++) { + this.localData.push(DATA[c]); + } + } + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + longRunning(toolbar: any) { + toolbar.showProgress = true; + setTimeout(() => toolbar.showProgress = false, 5000); + } +} +``` +```html +
+ + + + + + + + + + + + + + + {{+val | currency}} + + + + + + + @if (val) { + Continued + } + @if (!val) { + Discontinued + } + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; +} +```
## Custom Content > [!NOTE] > This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle > the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified > template files after the migration completes. If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. Here is a sample snippet: ```html + + ... + + {{ titleBinding }} + + + + + + ... + + ``` The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: ```typescript +import { Component } from '@angular/core'; +import { athletesData } from '../../data/athletesData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-toolbar-sample-4', + styleUrls: ['./grid-toolbar-sample-4.component.scss'], + templateUrl: './grid-toolbar-sample-4.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class GridToolbarSample4Component { + public data: any[]; + + constructor() { + this.data = athletesData; + } + +} +``` +```html +
+ + + Athletes + + + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + +
+ + {{ cell.value }} +
+ + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.athlete_name { + margin-left: 30px; +} + +.country_name { + margin-left: 30px; +} +```
## Styling To get started with styling the toolbar, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` First, let's create a new palette. ```scss $my-dark-palette: palette( + $primary: #2466ff, + $secondary: #ffcd0f, + $surface: #2a2b2f, + $grays: #fff, ); $my-dark-color: color($my-dark-palette, 'surface'); ``` Now, create a new theme that extends the [`grid-toolbar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-toolbar-theme) and modify the `$background-color` and the `$title-text-color` parameters. ```scss $dark-grid-toolbar-theme: grid-toolbar-theme( + $background-color: $my-dark-color, + $title-text-color: color($my-dark-palette, 'secondary'), + $dropdown-background: $my-dark-color, ); ``` To theme the column actions menus of the toolbar, we have to change the theme of the [`column-actions-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-igx-column-actionsr-theme) component. ```scss $dark-column-actions-theme: column-actions-theme( + $title-color: color($my-dark-palette, 'secondary'), + $background-color: color($my-dark-palette, 'surface') ); ``` Since the column actions are using other components - `igx-button` and `igx-checkbox` we need to change their themes to match our new toolbar theme. ```scss $dark-button-theme: outlined-button-theme( + $background: color($my-dark-palette, 'secondary'), + $hover-background: color($my-dark-palette, 'grays', 100), + $hover-foreground: color($my-dark-palette, 'secondary') ); $dark-checkbox-theme: checkbox-theme( + $tick-color: $my-dark-color, ); ``` The last step is to **include** the newly created themes. ```scss :host { + @include tokens($dark-grid-toolbar-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); } ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the grid toolbar component: ```scss @include tokens($dark-grid-toolbar-theme); :host { + ::ng-deep { + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { athletesData } from '../../data/athletesData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-toolbar-style', + styleUrls: ['./grid-toolbar-style.component.scss'], + templateUrl: './grid-toolbar-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class GridToolbarStyleComponent { + + public data: any[]; + + constructor() { + this.data = athletesData; + } +} +``` +```html +
+ + + + Grid Toolbar + + + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + +
+ + {{ cell.value }} +
+ + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + + + + +
{{ val }}
+ + + + + +
{{ val }}
+ + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$my-dark-palette: palette( + $primary: #2466ff, + $secondary: #ffcd0f, + $surface: #2a2b2f, + $gray: #fff, +); + +$my-dark-color: color($my-dark-palette, 'surface'); + +$dark-button-theme: flat-button-theme( + $hover-foreground: color($my-dark-palette, 'secondary') +); + +$dark-grid-toolbar-theme: grid-toolbar-theme( + $background-color: $my-dark-color, + $title-text-color: color($my-dark-palette, 'secondary'), + $dropdown-background: $my-dark-color, +); + +$dark-column-actions-theme: column-actions-theme( + $title-color: color($my-dark-palette, 'secondary'), + $background-color: color($my-dark-palette, 'surface') +); + +$dark-checkbox-theme: checkbox-theme( + $tick-color: $my-dark-color, +); + +igx-grid { + @include palette($my-dark-palette); + @include tokens($dark-grid-toolbar-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); +} + +:host { + ::ng-deep { + .igx-grid-toolbar__actions { + .igx-button--outlined { + margin-left: 0.5rem; + border: none; + } + } + } +} +```
## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. - [`IgxGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) - [`IgxGridToolbarAdvancedFilteringComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html) - [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) - [`IgxGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) - [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) - [`IgxGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) - [`IgxGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) events: - [`toolbarExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#toolbarExporting) Styles: - [`IgxGridComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md new file mode 100644 index 000000000..8fc0b600f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-validation.md @@ -0,0 +1,705 @@ +--- +_tocName: Validation +_premium: true +--- +--- title: Editing and Validation in Angular Grid - Infragistics _description: Validate the input of the users in grid and notify them if it's valid or not while using Angular Grid. See demos & examples! _keywords: angular validation, ignite ui for angular, infragistics _license: commercial --- # Angular Grid Editing and Validation The Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. It extends the [Angular Form validation](https://angular.io/guide/form-validation) functionality to allow easier integration with a well known functionality. When the state of the editor changes, visual indicators are applied to the edited cell. ## Configuration ### Configure via template-driven configuration We extend some of the Angular Forms validator directives to directly work with the `IgxColumn`. The same validators are available as attributes to be set declaratively in `igx-column`. The following validators are supported out-of-the-box: - required - min - max - email - minlength - maxlength - pattern To validate that a column input would be set and the value is going to be formatted as an email, you can use the related directives: ```html ``` The following sample demonstrates how to use the prebuilt `required`, `email` and `min` validator directives in a Grid. ```typescript +import { Component } from '@angular/core'; +import { employeesData } from '../../data/employeesData'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { FormsModule } from '@angular/forms'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-validator-service', + styleUrls: ['./grid-validator-service.component.scss'], + templateUrl: './grid-validator-service.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, DatePipe] +}) +export class GridValidatorServiceComponent { + public data: any[]; + public employeesData: any[]; + public rowEdit: boolean = true; + + constructor() { + this.data = employeesData; + } +} +``` +```html +
+ Row edit +
+
+ + + +
+ +
+ + + + + + + + + {{ cell | date: 'longDate' }} + + + + + {{ cell | date: 'longDate' }} + + + + + + + + + +
+``` +```scss +.top-row, +.grid-wrapper { + padding: 16px; +} + +.grid-wrapper { + margin: 0 auto; + padding: 16px; +} +```
### Configure via reactive forms We expose the `FormGroup` that will be used for validation when editing starts on a row/cell via a `formGroupCreated` event. You can modify it by adding your own validators for the related fields: ```html ``` @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { ```ts + public formCreateHandler(args: IGridFormGroupCreatedEventArgs) { + const formGroup = args.formGroup; + const orderDateRecord = formGroup.get('OrderDate'); + const requiredDateRecord = formGroup.get('RequiredDate'); + const shippedDateRecord = formGroup.get('ShippedDate'); + + orderDateRecord.addValidators(this.futureDateValidator()); + requiredDateRecord.addValidators(this.pastDateValidator()); + shippedDateRecord.addValidators(this.pastDateValidator()); + } ``` } You can decide to write your own validator function, or use one of the [built-in Angular validator functions](https://angular.io/guide/form-validation#built-in-validator-functions). ## Validation service API The grid exposes a validation service via the [`validation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#validation) property. That service has the following public APIs: - [`valid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#valid) - returns if the grid validation state is valid. - [`getInvalid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#getInvalid) - returns records with invalid states. - [`clear`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#clear) - clears state for record by id or clears all state if no id is provided. - [`markAsTouched`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#markAsTouched) - marks the related record/field as touched. Invalid states will persist until the validation errors in them are fixed according to the validation rule or they are cleared. ## Validation triggers Validation will be triggered in the following scenarios: - While editing via the cell editor based on the grid's [`validationTrigger`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#validationTrigger). Either on `change` while typing in the editor, or on `blur` when the editor loses focus or closes. - When updating cells/rows via the API - [`updateRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#updateRow), [`updateCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#updateCell) etc.. - When using batch editing and the [`undo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTransactionService.html#undo)/[`redo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTransactionService.html#redo) API of the transaction service. > Note: Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the `markAsTouched` API of the validation service. ## Angular Grid Validation Customization Options ### Set a custom validator You can define your own validation directive to use on a `` in the template. ```ts @Directive({ + selector: '[phoneFormat]', + providers: [{ provide: NG_VALIDATORS, useExisting: PhoneFormatDirective, multi: true }] }) export class PhoneFormatDirective extends Validators { + @Input('phoneFormat') + public phoneFormatString = ''; + + public validate(control: AbstractControl): ValidationErrors | null { + return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control) + : null; + } } ``` Once it is defined and added in your app module you can set it declaratively to a given column in the grid: ```html ``` ### Change default error template You can define your own custom error template that will be displayed in the error tooltip when the cell enters invalid state. This is useful in scenarios where you want to add your own custom error message or otherwise change the look or content of the message. ```html + + + +
+ Please enter correct phone format +
+ ``` ### Prevent exiting edit mode on invalid state In some cases you may want to disallow submitting an invalid value in the data. In that scenarios you can use the [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#cellEdit) or [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#rowEdit) events and cancel the event in case the new value is invalid. Both events' arguments have a [`valid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IGridEditEventArgs.html#valid) property and can be canceled accordingly. How it is used can be seen in the [Cross-field Validation example](#cross-field-example) ```html ``` ```ts public cellEdit(evt) { + if (!evt.valid) { + evt.cancel = true; + } } ``` ### Example The below example demonstrates the above-mentioned customization options. ```typescript +import { Component, Directive, Input, ViewChild } from '@angular/core'; +import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IGridFormGroupCreatedEventArgs, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { employeesData } from '../../data/employeesData'; +import { NgTemplateOutlet, DatePipe } from '@angular/common'; + +export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const match = phoneReg.test(control.value); + return match ? null : { phoneFormat: { value: control.value } } ; + } +} + +@Directive({ + selector: '[phoneFormat]', + providers: [{ provide: NG_VALIDATORS, useExisting: PhoneFormatDirective, multi: true }] +}) +export class PhoneFormatDirective extends Validators { + @Input('phoneFormat') + public phoneFormatString = ''; + + public validate(control: AbstractControl): ValidationErrors | null { + return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control) + : null; + } +} + +@Component({ + selector: 'app-grid-validator-service-extended', + styleUrls: ['./grid-validator-service-extended.component.scss'], + templateUrl: './grid-validator-service-extended.component.html', + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, PhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxColumnMinValidatorDirective, IgxButtonDirective, DatePipe] +}) +export class GridValidatorServiceExtendedComponent { + + @ViewChild('grid1', { read: IgxGridComponent }) + public grid: IgxGridComponent; + + public data = employeesData; + + public formCreateHandler(formGroupArgs: IGridFormGroupCreatedEventArgs) { + const createdOnRecord = formGroupArgs.formGroup.get('created_on'); + const lastActiveRecord = formGroupArgs.formGroup.get('last_activity'); + createdOnRecord.addValidators(this.futureDateValidator()); + lastActiveRecord.addValidators([this.pastDateValidator(), this.futureDateValidator()]); + } + + public commit() { + const invalidTransactions = this.grid.validation.getInvalid(); + if (invalidTransactions.length > 0 && !confirm('You\'re committing invalid transactions. Are you sure?')) { + return; + } + + this.grid.transactions.commit(this.data); + this.grid.validation.clear(); + } + + public undo() { + /* exit edit mode and commit changes */ + this.grid.endEdit(true); + this.grid.transactions.undo(); + } + + public redo() { + /* exit edit mode and commit changes */ + this.grid.endEdit(true); + this.grid.transactions.redo(); + } + + public futureDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + if(date > new Date()){ + return { futureDate: { value: control.value } }; + } + return null; + } + } + + public pastDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + let pastDate = new Date('Nov 5 2010'); + if(pastDate){ + return pastDate < date ? null : { pastDate: { value: control.value } } + } else return null; + } + } +} +``` +```html +
+ + + +
+ +
+ + + + + + + + + + @if (cell.validation.errors?.['phoneFormat']) { +
+ Please enter correct phone format +
+ } + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + + + {{ cell | date: 'longDate' }} + + + + + {{ cell | date: 'longDate' }} + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before the 5th of November 2010 +
+ } + + + + + + + + + + + +
+ +
+ + + +
+``` +```scss +.grid-wrapper { + margin: 0 auto; + padding: 16px; +} + +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: left; + padding: 10px 0; +} +```
## Cross-field validation In some scenarios validation of one field may depend on the value of another field in the record. In that case a custom validator can be used to compare the values in the record via their shared `FormGroup`. The below sample demonstrates a cross-field validation between different field of the same record. It checks the dates validity compared to the current date and between the active and created on date of the record as well as the deals won/lost ration for each employee. All errors are collected in a separate pinned column that shows that the record is invalid and displays the related errors. The next lines of code show the cross-field validator function, which contains the comparisons and sets the related errors relative to them. ```ts private rowValidator(): ValidatorFn { + return (formGroup: FormGroup): ValidationErrors | null => { + let returnObject = {}; + const createdOnRecord = formGroup.get('created_on'); + const lastActiveRecord = formGroup.get('last_activity'); + const winControl = formGroup.get('deals_won'); + const loseControl = formGroup.get('deals_lost'); + const actualSalesControl = formGroup.get('actual_sales'); + + // Validate dates + const curDate = new Date(); + if (new Date(createdOnRecord.value) > curDate) { + // The created on date shouldn't be greater than current date. + returnObject['createdInvalid'] = true; + } + if (new Date(lastActiveRecord.value) > curDate) { + // The last active date shouldn't be greater than current date. + returnObject['lastActiveInvalid'] = true; + } + if (new Date(createdOnRecord.value) > new Date(lastActiveRecord.value)) { + // The created on date shouldn't be greater than last active date. + returnObject['createdLastActiveInvalid'] = true; + } + + // Validate deals + const dealsRatio = this.calculateDealsRatio(winControl.value, loseControl.value); + if (actualSalesControl.value === 0 && dealsRatio > 0) { + // If the actual sales value is 0 but there are deals made. + returnObject['salesZero'] = true; + } + if (actualSalesControl.value > 0 && dealsRatio === 0) { + // If the deals ratio based on deals won is 0 but the actual sales is bigger than 0. + returnObject['salesNotZero'] = true; + } + + return returnObject; + }; } public calculateDealsRatio(dealsWon, dealsLost) { + if (dealsLost === 0) return dealsWon + 1; + return Math.round(dealsWon / dealsLost * 100) / 100; } ``` The cross-field validator can be added to the `formGroup` of the row from [`formGroupCreated`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#formGroupCreated) event, which returns the new `formGroup` for each row when entering edit mode: ```html + ``` ```typescript public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) { + evt.formGroup.addValidators(this.rowValidator()); } ``` The different errors are displayed in a templated cell that combines all errors in a single tooltip. Depending on the row valid state different icon is displayed: ```html + +
+ +
+
+ +
+
+
+ {{message}} +
+
+ ``` The error messages are gathered in the `stateMessage` function, which gathers the errors for each cell, because each column could have templated form validations and then checks the errors for the row itself, which come from the custom `rowValidator`. ```typescript public stateMessage(cell: CellType) { + const messages = []; + const row = cell.row; + const cellValidationErrors = row.cells.filter(x => !!x.validation.errors); + cellValidationErrors.forEach(cell => { + if (cell.validation.errors) { + if (cell.validation.errors.required) { + messages.push(`The \`${cell.column.header}\` column is required.`); + } + // Other cell errors ... + } + }); + + if (row.validation.errors?.createdInvalid) { + messages.push(`The \`Date of Registration\` date cannot be in the future.`); + } + // Other cross-field errors... + + return messages; } ``` ### Cross-field example The below sample demonstrates the cross-field validation in action. ```typescript +import { Component, ViewChild } from '@angular/core'; +import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn, FormsModule } from '@angular/forms'; +import { CellType, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { employeesData } from '../../data/employeesData'; +import { NgTemplateOutlet, DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-validator-service-cross-field', + styleUrls: ['./grid-validator-service-cross-field.component.scss'], + templateUrl: './grid-validator-service-cross-field.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxColumnRequiredValidatorDirective, IgxColumnEmailValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxColumnMinValidatorDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective, DatePipe] +}) +export class GridValidatorServiceCrossFieldComponent { + + @ViewChild('grid1', { read: IgxGridComponent }) + public grid: IgxGridComponent; + public transactionData = JSON.parse(JSON.stringify(employeesData)); + public rowEdit: boolean = true; + + public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) { + const createdOnRecord = evt.formGroup.get('created_on'); + const lastActiveRecord = evt.formGroup.get('last_activity'); + createdOnRecord.addValidators(this.futureDateValidator()); + lastActiveRecord.addValidators(this.futureDateValidator()); + evt.formGroup.addValidators(this.rowValidator()); + } + + public editHandler(event: IGridEditEventArgs) { + if (!event.valid) { + event.cancel = true; + } + } + + public commit() { + const invalidTransactions = this.grid.validation.getInvalid(); + if (invalidTransactions.length > 0 && !confirm('You\'re committing invalid transactions. Are you sure?')) { + return; + } + + this.grid.transactions.commit(this.transactionData); + this.grid.validation.clear(); + } + + public calculateDealsRatio(dealsWon, dealsLost) { + if (dealsLost === 0) return dealsWon + 1; + return Math.round(dealsWon / dealsLost * 100) / 100; + } + + public getDealsRatio(cell: CellType) { + const dealsWon = cell.row.cells.find(c => c.column.field === 'deals_won'); + const dealsLost = cell.row.cells.find(c => c.column.field === 'deals_lost'); + const dealsWonValue = dealsWon.editValue != null ? dealsWon.editValue : dealsWon.value; + const dealsLostValue = dealsLost.editValue != null ? dealsLost.editValue : dealsLost.value; + return this.calculateDealsRatio(dealsWonValue, dealsLostValue); + } + + private futureDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + if(date > new Date()){ + return { beyondThreshold: { value: control.value } }; + } + return null; + } + } + + private rowValidator(): ValidatorFn { + return (formGroup: FormGroup): ValidationErrors | null => { + let returnObject = {}; + const createdOnRecord = formGroup.get('created_on'); + const lastActiveRecord = formGroup.get('last_activity'); + const winControl = formGroup.get('deals_won'); + const loseControl = formGroup.get('deals_lost'); + const actualSalesControl = formGroup.get('actual_sales'); + + // Validate dates + const curDate = new Date(); + if (new Date(createdOnRecord.value) > curDate) { + // The created on date shouldn't be greater than current date. + returnObject['createdInvalid'] = true; + } + if (new Date(lastActiveRecord.value) > curDate) { + // The last active date shouldn't be greater than current date. + returnObject['lastActiveInvalid'] = true; + } + if (new Date(createdOnRecord.value) > new Date(lastActiveRecord.value)) { + // The created on date shouldn't be greater than last active date. + returnObject['createdLastActiveInvalid'] = true; + } + + // Validate deals + const dealsRatio = this.calculateDealsRatio(winControl.value, loseControl.value); + if (actualSalesControl.value === 0 && dealsRatio > 0) { + returnObject['salesZero'] = true; + } + if (actualSalesControl.value > 0 && dealsRatio === 0) { + returnObject['salesNotZero'] = true; + } + + return returnObject; + }; + } + + public isRowValid(cell: CellType) { + return !cell.row.validation.errors && !cell.row.cells.some(c => !!c.validation.errors); + } + + public stateMessage(cell: CellType) { + const messages = []; + + const cellValidationErrors = cell.row.cells.filter(x => !!x.validation.errors); + cellValidationErrors.forEach(cell => { + const cellErrors = cell.validation.errors; + if (cellErrors?.required) { + messages.push(`The \`${cell.column.header}\` column is required.`); + } + if (cellErrors?.min) { + messages.push(`A value of at least ${cellErrors.min.min} should be entered for \`${cell.column.header}\` column.`); + } + if (cellErrors?.email) { + messages.push(`Please enter a valid email for \`${cell.column.header}\` column.`); + } + }); + + const rowErrors = cell.row.validation.errors; + if (rowErrors?.createdInvalid) { + messages.push(`The \`Date of Registration\` date cannot be in the future.`); + } + if (rowErrors?.lastActiveInvalid) { + messages.push(`The \`Last Active\` date cannot be in the future.`); + } + if (rowErrors?.createdLastActiveInvalid) { + messages.push(`The \`Date of Registration\` cannot be greater than the \`Last Active\` date.`); + } + if (rowErrors?.salesZero) { + messages.push(`The \`Actual Sales\` cannot be 0 when the deals ratio is greater than 0.`); + } + if (rowErrors?.salesNotZero) { + messages.push(`The \`Actual Sales\` cannot be greater than 0 when the deals ratio is 0.`); + } + + if (messages.length === 0 && this.isRowValid(cell)) { + messages.push('OK'); + } + + return messages; + } +} +``` +```html +
+ Row edit +
+
+ + + +
+ +
+ + + + + + + + + + + + @if (cell.validation.errors?.['beyondThreshold']) { +
+ The date cannot be in the future. +
+ } + + + {{ cell | date: 'longDate' }} + + + + + {{ cell | date: 'longDate' }} + + + + + @if (cell.validation.errors?.['beyondThreshold']) { +
+ The date cannot be in the future. +
+ } + + + + + + + + + {{ getDealsRatio(cell) }} + + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + +
+ +
+
+``` +```scss +.top-row, .grid__wrapper { + padding: 16px; + padding-bottom: 0; +} + +.valid-image, +.invalid-image { + margin-left: -10px; + + img { + max-width: none; + } +} + +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: start; + padding: 10px 0; +} +```
## Styling Using the [Ignite UI for Angular Theme Library](../themes/index.md), we can alter the default validation styles while editing. In the example below, we will make use of the exposed template for validation message, which pops out in a tooltip and overriding the error color to modify the default looks of the validation. We will also style the background of the invalid rows to make them more distinct. ### Import theme The easiest way to style and access css variables is to define styles in our `app`'s global style file (typically `styles.scss`). The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Include the styles In order to change the error color you can use the css variable `--ig-error-500`: ```scss --ig-error-500: 34, 80%, 63%; ``` ### Custom Templates Changing the default error template allows setting custom classes and styles: ```html +
+ + +
``` ### Invalid row and cell styles Rows and cells provide API for the developers to know if a row or cell is invalid and what kind of errors are active. ```ts public rowStyles = { + background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000' }; public cellStyles = { + 'invalid-cell': (rowData, columnKey) => { + const pKey = this.grid.primaryKey; + const cell = this.grid.getCellByKey(rowData[pKey], columnKey); + return cell && cell.validation.status === 'INVALID'; + } } ``` ```html + ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { DATA } from '../../data/nwindData'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, RowType } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { NgTemplateOutlet } from '@angular/common'; + +@Component({ + selector: 'app-grid-validation-style', + styleUrls: [`grid-validation-style.component.scss`], + templateUrl: 'grid-validation-style.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet] +}) +export class GridValidationStyleComponent { + @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent; + public data: any[]; + public rowStyles = { + background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000' + }; + public cellStyles = { + 'invalid-cell': (rowData, columnKey) => { + const pKey = this.grid.primaryKey; + const cell = this.grid.getCellByKey(rowData[pKey], columnKey); + return cell && cell.validation.status === 'INVALID'; + } + } + + constructor() { + this.data = DATA; + } +} +``` +```html +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +igx-grid { + --ig-error-500: 34deg, 80%, 63%; +} +```
## API References - [IgxBaseTransactionService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Known Issues and Limitations |Limitation|Description| | --- | --- | | When `validationTrigger` is blur, `editValue` and validation will trigger only after editor is blurred. | Reason is that this utilizes the formControl's [`updateOn`](https://angular.io/api/forms/AbstractControl#updateOn) property. This determines the event on which the formControl will update and trigger related validators. | ## Additional Resources - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Grid Overview](grid.md) - [Grid Editing](editing.md) - [Grid Row Editing](row-editing.md) - [Grid Row Adding](row-adding.md) - [Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md new file mode 100644 index 000000000..c9e76ac43 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grid-virtualization.md @@ -0,0 +1,133 @@ +--- +_tocName: Virtualization and performance +_premium: true +--- +--- title: Angular Grid Virtualization and Performance - Ignite UI for Angular _description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed & performance of the grid when handling large data sets. Try for free! _keywords: angular data grid, grid performance, data table virtualization, ignite ui for angular _license: commercial --- # Angular Grid Virtualization and Performance In Ignite UI for Angular, the [IgxGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) control now utilizes the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive and virtualizes its content both vertically and horizontally. ## Angular Grid Virtualization and Performance Example ```typescript +import { Component, Injectable, ViewChild, OnInit, inject } from '@angular/core'; + +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { Observable } from 'rxjs'; +import { FinancialDataService } from '../../services/financial.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + providers: [FinancialDataService], + selector: 'app-grid-sample', + styleUrls: ['./grid-sample-2.component.scss'], + templateUrl: 'grid-sample-2.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent, AsyncPipe] +}) + +export class FinancialSampleComponent { + private localService = inject(FinancialDataService); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + public data: Observable; + constructor() { + this.localService.getData(100000); + this.data = this.localService.records; + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } +} +``` +```html +
+ + + + + + + + + Change + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }} +
+ + + + + Change(%) + + + + {{ formatNumber(val) }}% + + + + +
+ @if (val>0) { + + } + @if (val<0) { + + } + {{ formatNumber(val) }}% +
+ + + + + + + + + + + + +
+
+``` +```scss +.cellAlignSyle { + text-align: right; + float:right; +} +.cellAlignSyle > span { + float:right; +} +.up { + color: green; +} +.down { + color: red; +} +.headerAlignSyle { + text-align: right !important; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.currency-badge-container { + width: 80px; + float: right; +} + +.badge-left { + float: left; +} +``` ## Enabling Virtualization By utilizing the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive the IgxGrid now optimizes DOM rendering and memory consumption by rendering only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. [IgxGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#height) defaults to `100%` which will enable virtualization if the content displayed cannot fit inside the available space and scrollbars are required either vertically or horizontally. However, it is also possible to explicitly set the Grid's [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#height) to `null` which means that the related dimension will be determined by the total size of the items inside. No scrollbar will then be shown and all items will be rendered along the respective dimension (columns if [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#height) is `null`). The size of the data chunks is determined by: - The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowheight) option and is 50(px) by default. - The individual column widths in pixels for the horizontal (column) virtualization. They can be determined by either setting explicit width for each column component or setting the Grid's [`columnWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the Grid's container. The grid will try to fit all columns inside the available space as long as the width it attempts to assign is not under 136(px). In such cases, columns with unassigned width will receive the minimum width of 136(px) and a horizontal scrollbar will be shown. The grid will be horizontally virtualized. Explicitly setting column widths in percentages (%) will, in most cases, create a grid that is not virtualized horizontally as it will not have a horizontal scrollbar. ## Remote Virtualization The Grid supports remote virtualization, which is demonstrated in the [`Grid Remote Data Operations`](remote-data-operations.md) topic. ## Virtualization Limitations - On Mac OS horizontal scrollbar is not visible when "Show scrollbars only when scrolling" system option is set to true (which is the default value). This is because the Grid’s row container has an overflow set to hidden. Change the option to "Always" and the scrollbar will appear. ## FAQ ### Why having dimensions in the Grid is necessary for virtualization to work? Without information about the sizes of the container and the items before rendering them setting the width or height of a scrollbar or determining which of the items should be in the view when you scroll to a random location in the Grid is erroneous. Any assumptions on what the actual dimensions might be could lead to unnatural behavior of the scrollbar and ultimately suboptimal experience for the end-user. This is why setting the related dimensions is enforced in order for virtualization to take effect.
## API References - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxForOfDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) - [IForOfState](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html) ## Additional Resources
- [Grid overview](grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grids-and-lists.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grids-and-lists.md new file mode 100644 index 000000000..37500da98 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/grids-and-lists.md @@ -0,0 +1,477 @@ +--- +title: Angular Grids & Tables | Fastest Angular UI Grid | Infragistics +_description: Looking for fast angular grids and tables? Ignite UI for Angular provides a complete library of Angular-native, Material-based UI data grids and tables. Find more. +_keywords: angular data grid, infragistics, infragistics.com +_license: commercial +_tocName: Grids & Lists +--- + + + +
+ Ignite UI Logo for developer web applications +
+ +# The Fastest Angular Data Grid + + +Ignite UI for Angular provides a complete library of Angular-native, Material-based UI components, including the world’s fastest virtualized Angular data grid. + + +## Angular Grid Example + +In this angular grid example, you can see how users can customize their _data view_ by leveraging the various features built into the grid, like data search and filtering, columns sorting, resizing, pinning and hiding, row selection, export to excel and csv, horizontal and vertical scrolling. We have provided examples for cell templating that includes components like linear progress bar indicator and sparkline. +
+ + + + +
+ +## What is an Angular Data Grid? + +An Angular data grid is a component used to display tabular data in a series of rows and columns. Data grids, also known as tables, are well known in the desktop world with popular software such as Microsoft Excel. While grids have been available on desktop platforms for a long time, they have recently become part of web app UIs, such as Angular UI. Modern grids can be complex and may include a range of functionalities, including data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, row and column freezing, row aggregation, and exporting to Excel, CSV, and pdf formats. + + +## Why Use an Angular Data Grid? + +Angular data grids are essential in use cases where lots of data must be stored and sorted through quickly. This can include industries such as financial or insurance that use high-volume, high-velocity data frequently. Often the success of these companies is dependent on the functionality and performance of these data grids. When stock decisions need to be made in microseconds, for example, it’s imperative that the data grid performs with no lag time or flicker. + +## Key Features + +
+ +The Ignite UI for Angular Data Grid is not just for high-volume and real-time data. It is a feature-rich Angular grid that gives you capabilities that you would never be able to accomplish with so little code on your own. +This example demonstrates a few of the data grid’s key features: + +
+
+ +- [**Virtualized Rows and Columns**](grid/virtualization.md) so you can load millions of records + +- [**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options + +- [**Excel-style Filtering**](grid/excel-style-filtering.md) and full [**Excel Keyboard Navigation**](grid/keyboard-navigation.md) capability + +- Interactive [**Outlook-style Grouping**](grid/groupby.md) + +- [**Column Summaries**](grid/summaries.md) based on any data in a grid cell or column + +- [**Export to Excel**](grid/export-excel.md), including [**Data Visualization**](excel-library-working-with-charts.md) + +- [**Size**](grid/display-density.md) to adjust the height and sizing of the rows + +- Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column + +
+ +
+
+ +
+ +
+
+ +### Data Virtualization and Performance + +
+ +Seamlessly scroll through unlimited rows and columns in your Angular grid, with the data grid’s column and row level virtualization. With support for local or remote data sources, you get the best performance no matter where your data lives. Your users will experience Excel-like scrolling, with enterprise speed — no lag, screen flicker, or visual delay — giving you the best user experience (UX) without compromising performance. + +
+
+
+

Quick and Easy to Customize, Build and Implement

+
+

The Ignite UI Angular Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code.

+
+ +
+
+
+
+
+ +### Angular Grid Paging, Sorting, Filtering, & Searching + +Allow users to navigate your data set with our default [pager](grid/paging.md) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](grid/search.md) on the grid, and several [advanced filtering](grid/advanced-filtering.md) options, including data-type based [Microsoft Excel-style Filtering](grid/excel-style-filtering.md). + +### Inline Angular Grid Editing + +We provide you default [cell templates for editable columns](grid/grid.md#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value. +
+ Animation of filtering capabilities within Angular Data Grid +
+ +### Keyboard Navigation & Row/Cell Selection in the Angular Grid + +Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](grid/keyboard-navigation.md) in the Angular data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the Angular grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. Learn about our most recent enhancements to this feature. + +
Animation of keyboard navigation functionality within Angular Data Grid
+ +### Angular Grid Accessibility & ARIA Support + +Each of our Angular components in Ignite UI for Angular has been implemented according to the latest accessibility guidelines and specifications. Our Angular components have been tested using OS or Browser provided accessibility technology – screen readers. Our team ensures not only that the guidelines are implemented, but also that the actual content delivered to visually impaired or blind people is actually consumable and user-friendly for them. The Ignite UI for Angular data grid is fully accessible with a11y Keyboard accessibility, ARIA, and accessible color palette. Learn more. + +
+ Icon representation for ARIA support on the Angular Data Grid Component +
+ + +### Column Grouping, Pinning, Summaries, & Moving in the Angular Grid + +Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](grid/summaries.md) or custom summary templates. Enable users to interactively [hide](grid/column-hiding.md) or [move columns](grid/column-moving.md), with full support for interactive [column pinning](grid/column-pinning.md), during move, drag, and reorder operations. + +
Grid of data with column grouping, pinning and summary features enabled for Angular Data Grid component
+ + +### Multi-Column Headers in the Angular Grid + +Enable [multi-column headers](grid/multi-column-headers.md), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups. + +
Grid of data with Multi-Column Headers feature enabled on the Angular Data Grid component
+ + +### Theming, Styling, & Templating in the Angular Grid + +With Ignite UI for Angular you can customize cell appearance with CSS or re-template any cell with ng-template to give any cell render appearance. With full support for Material Design, you can customize your branded experience with our simple-to-use theming engine. + +
Animation of different grids design showing the theming and templating capabilities of the Angular Data Grid +
+ +### Excel Library for the Angular Grid + +Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI for Angular [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine. + +
Icon representation of Microsoft Excel-like features on the Angular Data Grid +
+ +
+ +## Angular Grid Features + +
+
+ +- [Inline Editing](grid/editing.md) +- [Row and Column Filtering](grid/filtering.md) +- [Grid Sorting](grid/sorting.md) +- [Column Grouping](grid/groupby.md) +- [Column Summaries](grid/summaries.md) +- [Fixed/Pinned Columns](grid/column-pinning.md) +- [Resizable Columns](grid/column-resizing.md) +- [Column Hiding](grid/column-hiding.md) + +- [Column Moving](grid/column-moving.md) +- [Cell Copy and Paste](grid/clipboard-interactions.md) +- [Cell Styling](grid/conditional-cell-styling.md) +- [Real-time/Live Data Theming](grid/live-data.md) +- [Custom Grid Toolbar](grid/toolbar.md) +- [Grid Paging](grid/paging.md) +- [Row Selection](grid/selection.md) +- [Cell Selection](grid/cell-selection.md) + +- [Grid-level Searching](grid/search.md) +- [Export to Excel, CSV, TSV](exporter-excel.md) +- [Multi-Column Headers](grid/multi-column-headers.md) +- [Combo Box/Dropdown](combo.md) +- [Virtualization and Performance](grid/virtualization.md)< +- [Remote Data Load on Demand](grid/virtualization.md#remote-virtualization) +- [Cell Templates](grid/grid.md#cell-template) +- [ARIA/a11y Support](interactivity/accessibility-compliance.md) + +
+ +
+ +
+ + +
+

Download the Fastest Angular Grid Today!

+
+ download now +
+ 30 days free trial. No credit card required. +
+
+ +
+ +
+
+
+
+

Ignite UI for Angular Supported Browsers

+
+
+ The Angular Data Grid is supported on all modern web browsers, including: +
+
    +
  • Chrome
    • +
  • Edge / Edge Chromium
    • +
  • Firefox
    • +
  • Safari
    • +
  • Internet Explorer 11 with polyfills
    • +
+
+
+
+

Ignite UI for Angular Support Options

+
+
+There are multiple options to get access to our award-winning support at Infragistics for the Angular product. +
+ +
+
+ +
+ +## Ignite UI for Angular Trial License and Commercial + +
+

Ignite UI for Angular is a commercially licensed product available via a subscription model. You can try the Ignite UI for Angular product for free when you register for a 30-day trial. When you are done with your Trial Period, you can purchase a license from our web site or by calling sales in your region.

+ +
+ +## Frequently Asked Questions + +
+
+
Why should I choose the Infragistics Ignite UI for Angular Data Grid?
+
+
+ +
+
+
+
What is the Pricing for the Infragistics Ignite UI for Angular Data Grid?
+
+
+ Our Angular components are included as a part of our Ignite UI bundle. A single developer license starts at $1,295 USD for a one-year subscription, including one year of standard support and updates. We also offer discounts for multi-year licenses. Please refer to our Pricing page for more information on pricing. +
+ If you are developing applications on multiple platforms, consider our complete app development package, Infragistics Ultimate, which include desktop platforms like WPF and Windows Forms, plus all modern web toolsets for Angular, Web Components, ASP.NET MVC and ASP.NET Core. +
+
+
+
+
Can I purchase the Infragistics Ignite UI for Angular Data Grid control separately?
+
+
+ No, you cannot purchase the Angular Data Grid separately. It is part of a the Ignite UI for Angular product, which includes dozens of UI controls and components, plus over 60 charts, including Angular Financial Charting. If you are interested in other modern web platforms like Angular, ASP.NET MVC, Web Components or ASP.NET Blazor, check out our Ignite UI product bundle, which gives you every web platform for only $100 more on your subscription. That is hundreds of controls, components, and data visualizations for a very low price. +
+
+
+
+
How do I Install Angular and the Infragistics Ignite UI for Angular Data Grid control?
+
+
+ To get started with the Angular Data Grid, follow the steps in the [getting started guide](general/getting-started.md). We also maintain a library of sample applications, which are designed to not only inspire but are best practices guides for Angular development. +
+
+
+
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md new file mode 100644 index 000000000..fed63af07 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-advanced-filtering.md @@ -0,0 +1,337 @@ +--- +_tocName: Advanced Filtering +_premium: true +--- +--- title: Advanced Filtering in Angular Data Grid - Ignite UI for Angular _description: Learn how to configure advanced filter of data with the Angular table. The grid advanced filtering is more convenient and engaging than ever. _keywords: advanced filter, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/advanced-filtering --- # Angular Hierarchical Grid Advanced Filtering The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any [Angular table](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) like the Hierarchical Grid. ## Angular Hierarchical Grid Advanced Filtering Example ```typescript +import { Component, AfterViewInit, ViewChild, ChangeDetectorRef, inject } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { FilteringExpressionsTree, FilteringLogic, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-advanced-filtering', + styleUrls: ['./hierarchical-grid-advanced-filtering.component.scss'], + templateUrl: 'hierarchical-grid-advanced-filtering.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] +}) + +export class HGridAdvancedFilteringSampleComponent implements AfterViewInit{ + private cdr = inject(ChangeDetectorRef); + + @ViewChild('hGrid', { static: true }) + private hGrid: IgxHierarchicalGridComponent; + + public localData; + + constructor() { + this.localData = SINGERS; + } + + public ngAfterViewInit() { + const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']); + albumsTree.filteringOperands.push({ + fieldName: 'LaunchDate', + condition: IgxDateFilteringOperand.instance().condition('after'), + conditionName: IgxDateFilteringOperand.instance().condition('after').name, + searchVal: new Date(2017, 1, 1) + }); + const tree = new FilteringExpressionsTree(FilteringLogic.And); + tree.filteringOperands.push({ + fieldName: 'Artist', + condition: IgxStringFilteringOperand.instance().condition('inQuery'), + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, + searchTree: albumsTree + }); + this.hGrid.advancedFilteringExpressionsTree = tree; + this.cdr.detectChanges(); + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +```
## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. The dialog is using the [`IgxQueryBuilder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxquerybuildercomponent.html) component to generate,display and edit the filtering logic. You can have a look at the [`Query Builder topic`](../query-builder.md#getting-started-with-ignite-ui-for-angular-query-builder) for details on the interaction process. In order to filter the data once you are ready with creating the filtering conditions and groups, you should click the **Apply** button. If you have modified the advanced filter, but you don't want to preserve the changes, you should click the **Cancel** button. You could also clear the advanced filter by clicking the **Clear Filter** button. ## Usage To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowAdvancedFiltering) input property should be set to `true`. ```html + ``` The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/filteringexpressionstree.html) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#advancedFilteringExpressionsTree) input property. You could use this property to set an initial state of the advanced filtering. ```TypeScript ngAfterViewInit(): void { + const tree = new FilteringExpressionsTree(FilteringLogic.Or); + tree.filteringOperands.push({ + fieldName: 'Artist', + condition: IgxStringFilteringOperand.instance().condition('startsWith'), + conditionName: IgxStringFilteringOperand.instance().condition('startsWith').name, + searchVal: 'A' + }); + const subTree = new FilteringExpressionsTree(FilteringLogic.And); + subTree.filteringOperands.push({ + fieldName: 'GrammyAwards', + condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), + conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name, + searchVal: 1 + }); + subTree.filteringOperands.push({ + fieldName: 'Debut', + condition: IgxNumberFilteringOperand.instance().condition('lessThan'), + conditionName: IgxNumberFilteringOperand.instance().condition('lessThan').name, + searchVal: 2000 + }); + tree.filteringOperands.push(subTree); + this.hierarchicalGrid.advancedFilteringExpressionsTree = tree; } ``` The advanced filtering in the `IgxHierarchicalGrid` can be used to filter root grid data based on child grids data using the _IN / NOT-IN_ operators. This way, subqueries can be created to define more complex filtering logic. More information about this functionality can be found in [`Query Builder's Using Sub-Queries section`](../query-builder-model.md#using-sub-queries). Here's a sample [`FilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/filteringexpressionstree.html) with a subquery: ```TypeScript ngAfterViewInit(): void { + const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']); + albumsTree.filteringOperands.push({ + fieldName: 'LaunchDate', + condition: IgxDateFilteringOperand.instance().condition('after'), + conditionName: IgxDateFilteringOperand.instance().condition('after').name, + searchVal: new Date(2017, 1, 1) + }); + const tree = new FilteringExpressionsTree(FilteringLogic.And); + tree.filteringOperands.push({ + fieldName: 'Artist', + condition: IgxStringFilteringOperand.instance().condition('inQuery'), + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, + searchTree: albumsTree + }); + this.hierarchicalGrid.advancedFilteringExpressionsTree = tree; } ``` If remote data is used, the [`schema`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#schema) property of the `IgxHierarchicalGrid` should be set. Please refer to [`Load on Demand`](../hierarchicalgrid/load-on-demand.md) topic for detailed guidance. In case you don't want to show the Hierarchical Grid toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. >[!NOTE] >You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the Hierarchical Grid. Both filtering user interfaces will work independently of one another. The final filtered result in the Hierarchical Grid is the intersection between the results of the two filters. ## External Advanced filtering As you see the demo above the Advanced filtering dialog is hosted in an overlay on top of the Hierarchical Grid. When the setup in the dialog is ready, the apply or close actions would hide that dialog. There is a way to make that dialog stay always visible - be used as a standalone component. In the demo below, the advanced filtering dialog is declared separately of the Hierarchical Grid. ### Demo ```typescript +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxAdvancedFilteringDialogComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-external-advanced-filtering', + templateUrl: './hierarchical-grid-external-advanced-filtering.component.html', + styleUrls: ['./hierarchical-grid-external-advanced-filtering.component.scss'], + imports: [IgxAdvancedFilteringDialogComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent] +}) +export class HGridExternalAdvancedFilteringComponent { + + public localdata: any; + constructor() { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; + display: flex; + flex-flow: column; + align-items: stretch; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.advanced-dialog { + margin-bottom: 2px; + height: 325px; + overflow-y: auto; +} +``` ### Usage It's super easy to configure the advanced filtering to work outside of the Hierarchical Grid. All you need to do is to create the dialog and set its [`grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html#grid) property: ```html ``` You can also see how our [drag and drop App Builder™](https://www.infragistics.com/products/appbuilder) can streamline the entire design-to-Angular-code story.
## Styling To get started with styling the Advanced Filtering dialog, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Since the Advanced Filtering dialog uses the [`IgxQueryBuilder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxquerybuildercomponent.html) component, you can use the [`query-builder-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#query-builder-theme) to style it. To style the header title, you can create a custom theme that extends the [`query-builder-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#query-builder-theme) and set the `$header-foreground` parameter. ```scss $custom-query-builder: query-builder-theme( + $header-foreground: #512da8 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component theme in our application. ```scss $custom-query-builder: query-builder-theme( + $header-foreground: #512da8, + $color-expression-group-and: #eb0000, + $color-expression-group-or: #0000f3, + $subquery-header-background: var(--ig-gray-300), + $subquery-border-color: var(--ig-warn-500), + $subquery-border-radius: rem(4px) ); igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); } ``` >[!NOTE] >We include the created **query-builder-theme** within `igx-advanced-filtering-dialog`, so that this custom theme will affect only the query builder nested in the advanced filtering dialog. Otherwise other query builder components in the application would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss $custom-query-builder: query-builder-theme( + $header-foreground: #512da8, + $color-expression-group-and: #eb0000, + $color-expression-group-or: #0000f3, + $subquery-header-background: var(--ig-gray-300), + $subquery-border-color: var(--ig-warn-500), + $subquery-border-radius: rem(4px) ); :host { + ::ng-deep { + igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); + } + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-advanced-filtering-style', + styleUrls: ['./hierarchical-grid-advanced-filtering-style.component.scss'], + templateUrl: 'hierarchical-grid-advanced-filtering-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] +}) + +export class HGridAdvancedFilteringStyleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +@use "igniteui-angular/theming" as *; + +$custom-query-builder: query-builder-theme( + $header-foreground: #512da8, + $color-expression-group-and: #eb0000, + $color-expression-group-or: #0000f3, + $subquery-header-background: var(--ig-gray-300), + $subquery-border-color: var(--ig-warn-500), + $subquery-border-radius: rem(4px) +); + +:host { + @include tokens($custom-query-builder); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Filtering](filtering.md) - [Excel Style Filtering](excel-style-filtering.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md new file mode 100644 index 000000000..73b914181 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-batch-editing.md @@ -0,0 +1,339 @@ +--- +_tocName: Batch Editing +_premium: true +--- +--- title: Batch Editing and Transactions in Angular Hierarchical Grid Grid - Infragistics _description: Perform data manipulation without affecting the underlying data with Hierarchical Grid Batch Editing and Angular CRUD, using Angular Data Grid. See demos & examples! _keywords: angular crud, ignite ui for angular, infragistics _license: commercial --- # Angular Hierarchical Grid Batch Editing and Transactions @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { The Batch Editing feature of the IgxHierarchicalGrid is based on the [`TransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtransactionservice.html). Follow the [`Transaction Service class hierarchy`](../transaction-classes.md) topic to see an overview of the `igxTransactionService` and details how it is implemented. } In order to use the [`HierarchicalTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicaltransactionservice.html) with [`IgxHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html), but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as [`IgxHierarchicalTransactionServiceFactory`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#igxhierarchicaltransactionservicefactory). Below is a detailed example of how is Batch Editing enabled for the Hierarchical Grid component. ## Angular Hierarchical Grid Batch Editing and Transactions Example The following sample demonstrates a scenario, where the hierarchicalGrid has [`batchEditing`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#batchEditing) enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed. ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { SINGERS } from '../../data/singersData'; +import { Singer } from '../models'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-batch-editing', + styleUrls: ['./hierarchical-grid-batch-editing.component.scss'], + templateUrl: 'hierarchical-grid-batch-editing.component.html', + imports: [IgxButtonDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxGridComponent] +}) + +export class HGridBatchEditingSampleComponent implements OnInit { + @ViewChild('dialogChanges', { read: IgxDialogComponent, static: true }) + public dialogChanges: IgxDialogComponent; + + @ViewChild('childGrid', { static: true }) + private childGrid: IgxRowIslandComponent; + + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + @ViewChild('dialogAddSinger', { read: IgxDialogComponent, static: true }) + private dialogSinger: IgxDialogComponent; + + public get undoEnabledParent(): boolean { + return this.hierarchicalGrid.transactions.canUndo; + } + + public get redoEnabledParent(): boolean { + return this.hierarchicalGrid.transactions.canRedo; + } + + public get hasTransactions(): boolean { + return this.hierarchicalGrid.transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions; + } + + public get hasChildTransactions(): boolean { + return this.childGrid.gridAPI.getChildGrids() + .find(c => c.transactions.getAggregatedChanges(false).length > 0) !== undefined; + } + + public data: Singer[]; + public singer: Singer; + public transactionsDataAll: Transaction[] = []; + private id = 14; + + constructor() {} + + public ngOnInit(): void { + this.data = SINGERS; + this.singer = { + ID: this.id, + Artist: 'Mock Jagger', + Debut: 2005, + GrammyAwards: 4, + GrammyNominations: 7, + HasGrammyAward: false + }; + } + + public formatter = a => a; + + public undo(grid: any) { + /* exit edit mode and commit changes */ + const hGrid = grid as IgxHierarchicalGridComponent; + hGrid.endEdit(true); + hGrid.transactions.undo(); + } + + public redo(grid: any) { + /* exit edit mode and commit changes */ + const hGrid = grid as IgxHierarchicalGridComponent; + hGrid.endEdit(true); + hGrid.transactions.redo(); + } + + public commit() { + this.hierarchicalGrid.transactions.commit(this.data); + this.childGrid.gridAPI.getChildGrids().forEach((grid) => { + grid.transactions.commit(grid.data); + }); + this.dialogChanges.close(); + } + + public discard() { + this.hierarchicalGrid.transactions.clear(); + this.childGrid.gridAPI.getChildGrids().forEach((grid) => { + grid.transactions.clear(); + }); + this.dialogChanges.close(); + } + + public openCommitDialog() { + this.transactionsDataAll = [...this.hierarchicalGrid.transactions.getAggregatedChanges(true)]; + this.childGrid.gridAPI.getChildGrids().forEach((grid) => { + this.transactionsDataAll = this.transactionsDataAll.concat(grid.transactions.getAggregatedChanges(true)); + }); + this.dialogChanges.open(); + } + + public addSinger() { + this.hierarchicalGrid.addRow(this.singer); + ++this.id; + this.cancel(); + } + + public removeRow(rowIndex) { + const row = this.hierarchicalGrid.getRowByIndex(rowIndex); + row.delete(); + } + + public stateFormatter(value: string) { + return JSON.stringify(value); + } + + public typeFormatter(value: string) { + return value.toUpperCase(); + } + + public classFromType(type: string): string { + return `transaction--${type.toLowerCase()}`; + } + + public cancel() { + this.dialogChanges.close(); + this.dialogSinger.close(); + this.singer = { + ID: this.id, + Artist: 'Mock Jagger', + Debut: 2005, + GrammyAwards: 4, + GrammyNominations: 7, + HasGrammyAward: false + }; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ +
+ + + + + Has Grammy Award + + + + + + + + + + + + +
+ + + + + + + {{ typeFormatter(val) }} + + + + + {{ stateFormatter(val) }} + + + +
+ + + +
+ +
+``` +```scss +h4 { + text-align: center; + padding-top: 2%; + padding-bottom: 2%; +} +.buttons-row { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px; +} +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0; +} + +.addSingerBtn.igx-button--contained{ + margin-bottom: 10px; +} + +.dialogNewSinger { + > * { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } +} + +.igx-checkbox { + margin-top: 5px; + margin-bottom: 5px; + padding-top: 8px; + padding-bottom: 5px; +} + +.transaction--update, .transaction--delete, .transaction--add { + font-weight: 600; +} +.transaction--add { + color: #6b3; +} +.transaction--update { + color: #4a71b9; +} +.transaction--delete { + color: #ee4920; +} +.transaction-log { + word-wrap: none; +} + +.grid-wrapper { + padding: 16px; +} +```
> [!NOTE] > Transaction state consists of all the updated, added and deleted rows, and their last states. ## Usage To get started import the `IgxHierarchicalGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxHierarchicalGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxHierarchicalGridModule], + ... }) export class AppModule {} ``` Then, all you need to do is enable `batchEditing` from your Hierarchical Grid: ```html + ... ``` This will ensure a proper instance of `Transaction` service is provided for the igx-hierarchical-grid. The proper `TransactionService` is provided through a `TransactionFactory`. You can learn more about this internal implementation in the [transactions topic](../transaction-classes.md#transaction-factory). After batch editing is enabled, define a `IgxHierarchicalGrid` with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) set to true and bind: ```html + ... + + + ... + + + + + ...
+
+ + +
... ``` The following code demonstrates the usage of the [`transactions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtransactionservice.html#) API - undo, redo, commit. ```typescript ... export class HierarchicalGridBatchEditingSampleComponent { + public undo(grid: any) { + /* exit edit mode and commit changes */ + grid.endEdit(true); + grid.transactions.undo(); + } + + public redo(grid: any) { + /* exit edit mode and commit changes */ + grid.endEdit(true); + grid.transactions.redo(); + } + + public commit() { + this.hierarchicalGrid.transactions.commit(this.data); + this.childGrid.hgridAPI.getChildGrids().forEach((grid) => { + grid.transactions.commit(grid.data); + }); + this.dialogChanges.close(); + } } ``` > [!NOTE] > The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, `Hierarchical Grid` would stay in edit mode. One way to do that is by calling [`endEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#endEdit) in the respective method. > [!NOTE] > Disabling [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) property will modify `Hierarchical Grid` to create transactions on cell change and will not expose row editing overlay in the UI. ## API References - [igxHierarchicalTransactionServiceFactory](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#igxhierarchicaltransactionservicefactory) ## Additional Resources - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Hierarchical Grid Overview](hierarchical-grid.md) - [Hierarchical Grid Editing](editing.md) - [Hierarchical Grid Row Editing](row-editing.md) - [Hierarchical Grid Row Adding](row-adding.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md new file mode 100644 index 000000000..8b9c380d8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-editing.md @@ -0,0 +1,534 @@ +--- +_tocName: Cell Editing +_premium: true +--- +--- title: Cell Editing in Angular HierarchicalGrid - Ignite UI for Angular _description: The Grid is using in-cell editing. It has a default cell editing template, but it also lets you define your own custom templates for update-data action. Try it now! _keywords: data manipulation, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/cell-editing --- # Angular Hierarchical Grid Cell Editing Ignite UI for Angular Hierarchical Grid component provides a great data manipulation capabilities and powerful API for Angular CRUD operations. By default the Hierarchical Grid is using **in cell** editing and different editors will be shown based on the column data type, thanks to the **default cell editing template**. In addition, you can define your own custom templates for update-data actions and to override the default behavior for committing and discarding any changes. ## Angular Hierarchical Grid cell editing and edit templates Example ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { SINGERS } from '../../data/singersData'; +import { Singer } from '../models'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'min', + label: 'Min', + summaryResult: IgxNumberSummaryOperand.min(data) + }, + { + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }, + { + key: 'avg', + label: 'Avg', + summaryResult: IgxNumberSummaryOperand.average(data) + }); + return result; + } +} +@Component({ + selector: 'app-hierarchical-grid-editing', + styleUrls: ['./hierarchical-grid-editing.component.scss'], + templateUrl: 'hierarchical-grid-editing.component.html', + imports: [IgxButtonDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, IgxRowIslandComponent, IgxDialogComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxCheckboxComponent] +}) + +export class HGridEditingSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + @ViewChild('dialogAdd', { read: IgxDialogComponent, static: true }) + private dialog: IgxDialogComponent; + + public localdata; + public singer: Singer; + public mySummary = MySummary; + private id = 14; + + constructor() { } + + public ngOnInit(): void { + this.localdata = SINGERS; + this.singer = { + ID: this.id, + Artist: 'Mock Jagger', + Debut: 2005, + GrammyAwards: 4, + GrammyNominations: 7, + HasGrammyAward: false + }; + } + + public formatter = (a) => a; + + public addRow() { + this.hierarchicalGrid.addRow(this.singer); + ++this.id; + this.cancel(); + } + + public cancel() { + this.dialog.close(); + this.singer = { + ID: this.id, + Artist: 'Mock Jagger', + Debut: 2005, + GrammyAwards: 4, + GrammyNominations: 7, + HasGrammyAward: false + }; + } + + public removeRow(rowIndex) { + const row = this.hierarchicalGrid.getRowByIndex(rowIndex); + row.delete(); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Has Grammy Award + + + + + + + + + + + + +
+ +
+``` +```scss +.addSingerBtn.igx-button--contained{ + margin-bottom: 10px; + background-color: lightgrey; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.26) + } +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.dialogNewRecord { + > * { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } +} + +.igx-input-group { + margin-bottom: 10px; + padding: 5px; +} +.igx-checkbox { + margin-top: 5px; + margin-bottom: 5px; + padding-top: 8px; + padding-bottom: 5px; +} + +.reorderLevelInput { + color: black; + width: 100%; +} +```
> [!NOTE] >By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](../select.md), [`igxCombo`](../combo.md), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. ## Cell Editing ### Editing through UI You can enter edit mode for specific cell, when an editable cell is focused in one of the following ways: - on double click; - on single click - Single click will enter edit mode only if the previously selected cell was in edit mode and currently selected cell is editable. If the previously selected cell was not in edit mode, single click will select the cell without entering edit mode; - on key press `Enter`; - on key press `F2`; You can exit edit mode **without committing** the changes in one of the following ways: - on key press `Escape`; - when you perform _sorting_, _filtering_, _searching_ and _hiding_ operations; You can exit edit mode and **commit** the changes in one of the following ways: - on key press `Enter`; - on key press `F2`; - on key press `Tab`; - on single click to another cell - when you click on another cell in the Hierarchical Grid, your changes will be submitted. - operations like paging, resize, pin or move will exit edit mode and changes will be submitted. > [!NOTE] > The cell remains in edit mode when you scroll vertically or horizontally or click outside the Hierarchical Grid. This is valid for both cell editing and row editing. ### Editing through API You can also modify the cell value through the IgxHierarchicalGrid API but only if primary key is defined: ```typescript public updateCell() { + this.hierarchicalGrid.updateCell(newValue, rowID, 'Age'); } ``` Another way to update cell is directly through [`update`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#update) method of [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html): ```typescript public updateCell() { + const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel'); + // You can also get cell by rowID if primary key is defined + // cell = this.hierarchicalGrid.getCellByKey(rowID, 'ReorderLevel'); + cell.update(70); } ``` ### Cell Editing Templates You can see and learn more for default cell editing templates in the [general editing topic](editing.md#editing-templates). If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the [`igxCellEditor` directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcelltemplatedirective.html). To do this, you need to pass an `ng-template` marked with the `igxCellEditor` directive and properly bind your custom control to the [`cell.editValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#editValue): ```html + + + + {{ class }} + + + ``` This code is used in the sample below which implements an [`IgxSelectComponent`](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns. ```typescript +import { Character } from './characters'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxCellEditorTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxFocusDirective } from 'igniteui-angular/directives'; +import { DATA, ALIGNMENTS, RACES, CLASSES } from './data'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-grid-select-sample', + styleUrls: ['./grid-select-sample.component.scss'], + templateUrl: './grid-select-sample.component.html', + imports: [IgxGridComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent] +}) +export class GridSelectComponent implements OnInit { + + @ViewChild('grid1', { read: IgxGridComponent, static: true }) + public grid1: IgxGridComponent; + public data; + public alignments; + public races; + public classes; + public character; + + public generateRandomData(data) { + return data.map((e) => { + const indexAlignments = Math.floor(Math.random() * ALIGNMENTS.length); + e.alignment = ALIGNMENTS[indexAlignments]; + const indexRaces = Math.floor(Math.random() * RACES.length); + e.race = RACES[indexRaces]; + const indexClasses = Math.floor(Math.random() * CLASSES.length); + e.class = CLASSES[indexClasses]; + return e; + }); + } + + public ngOnInit() { + this.data = this.generateRandomData(DATA); + this.character = new Character(); + this.alignments = ALIGNMENTS; + this.races = RACES; + this.classes = CLASSES; + } +} +``` +```html + + + + + + + @for (race of races; track race) { + + {{ race }} + + } + + + + + + + @for (class of classes; track class) { + + {{ class }} + + } + + + + + + + + + @for (alignment of alignments; track alignment) { + + {{ alignment }} + + } + + + + +``` +```scss +:host { + display: block; + padding: 16px; +} +```
> [!NOTE] > Any changes made to the cell's [`editValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#editValue) in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the [transaction state](batch-editing.md) (if transactions are enabled). > [!NOTE] > The cell template [`igxCell`](../grid/grid.md#cell-template) controls how a column's cells are shown when outside of edit mode. > The cell editing template directive `igxCellEditor`, handles how a column's cells in edit mode are displayed and controls the edited cell's edit value. > [!NOTE] >By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](../select.md), [`igxCombo`](../combo.md), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. For more information on how to configure columns and their templates, you can see the documentation for [Grid Columns configuration](../grid/grid.md#angular-grid-column-configuration). ## CRUD operations > [!NOTE] > Please keep in mind that when you perform some **CRUD operation** all of the applied pipes like **filtering**, **sorting** and **grouping** will be re-applied and your view will be automatically updated. The [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) provides a straightforward API for basic CRUD operations. ### Adding a new record The Hierarchical Grid component exposes the [`addRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#addRow) method which will add the provided data to the data source itself. ```typescript public addRow() { + // Adding a new record + // Assuming we have a `getNewRecord` method returning the new row data + const record = this.getNewRecord(); + this.hierarchicalGrid.addRow(record, 1); } ``` ### Updating data in the Hierarchical Grid Updating data in the Hierarchical Grid is achieved through [`updateRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#updateCell) methods but **only if primary key for the grid is defined**. You can also directly update a cell and/or a row value through their respective `update` methods. ```typescript // Updating the whole row this.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID); // Just a particular cell through the Grid API this.hierarchicalGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field); // Directly using the cell `update` method this.selectedCell.update(newData); // Directly using the row `update` method const row = this.hierarchicalGrid.getRowByKey(rowID); row.update(newData); ``` ### Deleting data from the Hierarchical Grid Please keep in mind that [`deleteRow()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#deleteRow) method will remove the specified row only if primary key is defined. ```typescript // Delete row through Grid API this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID); // Delete row through row object const row = this.hierarchicalGrid.getRowByIndex(rowIndex); row.delete(); ``` These can be wired to user interactions, not necessarily related to the **igx-hierarchical-grid**; for example, a button click: ```html ```
### Cell validation on edit event Using the grid's editing events we can alter how the user interacts with the grid. In this example, we'll validate a cell based on the data entered in it by binding to the [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#cellEdit) event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event (`event.cancel = true`). We'll also display a custom error message using [`IgxToast`](../toast.md). The first thing we need to is bind to the grid's event: ```html ... ``` The `cellEdit` emits whenever **any** cell's value is about to be committed. In our `handleCellEdit` definition, we need to make sure that we check for our specific column before taking any action: ```typescript export class MyHGridEventsComponent { + public handleCellEdit(event: IGridEditEventArgs) { + const today = new Date(); + const column = event.column; + if (column.field === 'Debut') { + if (event.newValue > today.getFullYear()) { + this.toast.message = 'The debut date must be in the past!'; + this.toast.open(); + event.cancel = true; + } + } else if (column.field === 'LaunchDate') { + if (event.newValue > new Date()) { + this.toast.message = 'The launch date must be in the past!'; + this.toast.open(); + event.cancel = true; + } + } + } } ``` Here, we are validating two columns. If the user tries to change an artist's **Debut** year or an album's **Launch Date**, the grid will not allow any dates that are greater than today. The result of the above validation being applied to our `igx-hierarchical-grid` can be seen in the below demo: ```typescript +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IGridEditEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxToastComponent } from 'igniteui-angular/toast'; +import { VerticalAlignment } from 'igniteui-angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { SINGERS } from '../../data/singersData'; +import { Singer } from '../models'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-editing-events', + styleUrls: ['./hierarchical-grid-editing-events.component.scss'], + templateUrl: 'hierarchical-grid-editing-events.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxToastComponent] +}) + +export class HGridEditingEventsComponent implements OnInit, OnDestroy { + @ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true }) + public grid: IgxHierarchicalGridComponent; + + @ViewChild(IgxToastComponent, { read: IgxToastComponent, static: true }) + public toast: IgxToastComponent; + + public localData: Singer[]; + + private destroy$ = new Subject(); + + constructor() { } + + public ngOnInit(): void { + this.localData = SINGERS; + this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle; + } + + public ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + public formatter = (a) => a; + + public handleCellEdit(event: IGridEditEventArgs) { + const today = new Date(); + const column = event.column; + if (column.field === 'Debut') { + if (event.newValue > today.getFullYear()) { + this.toast.open('The debut date must be in the past!'); + event.cancel = true; + } + } else if (column.field === 'LaunchDate') { + if (event.newValue > new Date()) { + this.toast.open('The launch date must be in the past!'); + event.cancel = true; + } + } + } + + public handleCreate(event: IGridCreatedEventArgs) { + event.grid.cellEdit.pipe(takeUntil(this.destroy$)).subscribe((e) => this.handleCellEdit(e)); + } +} +``` +```html + + + + + + + + + + + + + + + + +``` +```scss +:host { + display: block; + padding: 16px; +} +``` ## Styling The IgxHierarchicalGrid allows for its cells to be styled through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide range of properties, which allow users to style many different aspects of the grid. In the below steps, we are going to go over how you can style the grid's cell in edit mode and how you can scope those styles. In order to use the [`Ignite UI Theming Library`](../themes/sass/component-themes.md), we must first import the theme `index` file in our global styles: ### Importing style library ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Now we can make use of all of the functions exposed by the Ignite UI for Angular theme engine. ### Defining a palette After we've properly imported the index file, we create a custom palette that we can use. Let's define three colors that we like and use them to build a palette with [`palette`](../themes/palettes.md): ```scss $white: #fff; $blue: #4567bb; $gray: #efefef; $color-palette: palette( + $primary: $white, + $secondary: $blue, + $surface: $gray ); ``` ### Defining themes We can now define the theme using our palette. The cells are styled by the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme), so we can use that to generate a theme for our IgxHierarchicalGrid: ```scss $custom-grid-theme: grid-theme( + $cell-editing-background: $blue, + $cell-edited-value-color: $white, + $cell-active-border-color: $white, + $edit-mode-color: color($color-palette, "secondary", 200) ); ``` ### Applying the theme The easiest way to apply our theme is with a `sass` `@include` statement in the global styles file: ```scss @include grid($custom-grid-theme); ``` ### Demo In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](../input-group.md#styling), [`datepicker`](../date-picker.md#styling) & [`checkbox`](../checkbox.md#styling) ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { Singer } from '../models'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-editing-style', + styleUrls: ['./hierarchical-grid-editing-style.component.scss'], + templateUrl: 'hierarchical-grid-editing-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridEditingStyleComponent implements OnInit { + @ViewChild(IgxHierarchicalGridComponent, { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata: Singer[]; + public singer: Singer; + + constructor() { } + + public ngOnInit(): void { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$white: #fff; +$blue: #4567bb; +$gray: #efefef; + +$color-palette: palette( + $primary: $white, + $secondary: $blue, + $surface: $gray +); + +$grid-theme: grid-theme( + $cell-editing-background: $blue, + $cell-edited-value-color: $white, + $cell-active-border-color: $white, + $edit-mode-color: color($color-palette, "secondary", 200) +); + +$input-theme: input-group-theme( + $filled-text-color: $white, + $focused-text-color: $white, + $idle-text-color: $white, + $idle-bottom-line-color: $white, + $focused-bottom-line-color: $white, + $hover-bottom-line-color: $white, + $box-background: $blue +); + +$checkbox-theme: checkbox-theme( + $empty-color: color($color-palette, "secondary", 200), + $fill-color: $white, + $tick-color: $blue +); + +$datepicker-theme: calendar-theme( + $date-selected-foreground: $white, + $date-selected-background: $blue +); + +:host { + @include tokens($grid-theme); + @include tokens($checkbox-theme); + @include tokens($input-theme); + @include tokens($datepicker-theme); +} + +igx-hierarchical-grid { + @include palette($color-palette); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) _[IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - [IgxDatePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - [IgxDatePickerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-date-picker-theme) - [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - [IgxCheckboxComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) - [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md new file mode 100644 index 000000000..ee866a4c0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-merging.md @@ -0,0 +1,204 @@ +--- +_tocName: Cell Merging +_premium: true +--- +--- title: Angular Grid Cell Merging - Ignite UI for Angular _description: Position and size columns in a more powerful way, using the multi-row layout functionality in the Ignite UI for Angular Data Grid. Check out examples and demos! _keywords: angular cell merging, cell merging, ignite ui for angular _license: commercial --- # Angular Cell Merging The Ignite UI for Angular Hierarchical Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. Merging is applied vertically within a column and helps improve readability by reducing duplicate values. The feature can be configured to merge cells either by default matching data values or by applying a custom condition. ## Angular Cell Merging Example ```typescript +import { ChangeDetectorRef, Component, ContentChild, inject, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { GridCellMergeMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { SortingDirection } from 'igniteui-angular/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { HIERARCHICAL_DATA } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-cell-merge', + styleUrls: ['./hierarchical-grid-cell-merge.component.scss'], + templateUrl: 'hierarchical-grid-cell-merge.component.html', + imports: [ + IgxHierarchicalGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxRowIslandComponent, + IgxGridToolbarComponent, + IgxSelectComponent, + IgxSelectItemComponent, + IgxLabelDirective, + FormsModule + ] +}) + +export class HGridCellMergeComponent { + + public localData = HIERARCHICAL_DATA; + public cellMergeMode: GridCellMergeMode = 'always'; + public cellMergeModeRowIsland: GridCellMergeMode= 'always'; + public mergeTypes = [{ name: 'Merge always', value: GridCellMergeMode.always }, { name: 'Merge on sort', value: GridCellMergeMode.onSort }]; + public sortExpr = [ + { + dir: SortingDirection.Asc, fieldName: 'ContactTitle' + } + ]; + + public strategySelection(e, hgrid: IgxHierarchicalGridComponent) { + this.cellMergeModeRowIsland = e.newSelection.value; + hgrid.getChildGrids().forEach(x => x.notifyChanges(true)); + } +} +``` +```html +
+ + + + + @for (type of mergeTypes; track type) { + + {{type.name}} + + } + + + + @for (type of mergeTypes; track type) { + + {{type.name}} + + } + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +``` ## Enabling and Using Cell Merging Cell merging in the grid is controlled at two levels: - Grid-level merge mode – determines when merging is applied. - Column-level merge toggle – determines which columns can merge cells. ### Grid Merge Mode The grid exposes a `cellMergeMode` property that accepts values from the `GridCellMergeMode` enum: - `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. - `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. ```html + ... ``` ```ts protected cellMergeMode: GridCellMergeMode = 'always'; ``` ### Column Merge Toggle At the column level, merging can be enabled or disabled with the `merge` property. ```html ``` In the above example: - The **OrderID** column will merge adjacent duplicate values. - The **ShipperName** column will render normally without merging. ### Combined Example ```html + + + ``` ```ts protected cellMergeMode: GridCellMergeMode = 'onSort'; ``` Here, the grid is set to merge only when columns are sorted, and both Category and Product columns are configured for merging. ## Custom Merge Conditions In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the `mergeStrategy` property. This strategy controls both how cells are compared and how merged ranges are calculated. ### Merge Strategy Interface A custom merge strategy must implement the `IGridMergeStrategy` interface: ```ts export interface IGridMergeStrategy { + merge: ( + data: any[], + field: string, + comparer: (prevRecord: any, currentRecord: any, field: string) => boolean, + result: any[], + activeRowIndex?: number, + grid?: GridType + ) => any[]; + + comparer: (prevRecord: any, record: any, field: string) => boolean; } ``` - `merge` - defines how merged cells are produced. - `comparer` - defines the condition to decide if two adjacent records should be merged. @@if(igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid'){ ### Extending the Default Strategy If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in `DefaultMergeStrategy` and override the relevant methods. ```ts export class MyCustomStrategy extends DefaultMergeStrategy { + /* Merge only cells within their respective projects */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['ProjectName']; + const projB = record['ProjectName']; + return a === b && projA === projB; + } } ``` } ### Applying a Custom Strategy Once defined, assign the strategy to the grid through the `mergeStrategy` property: ```html + + ``` ```ts protected customStrategy = new MyCustomStrategy(); ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { HIERARCHICAL_DATA_EXTENDED } from '../../data/hierarchical-data-extended'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { GridCellMergeMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { DefaultMergeStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-cell-merge-custom', + styleUrls: ['./hierarchical-grid-cell-merge-custom.component.scss'], + templateUrl: 'hierarchical-grid-cell-merge-custom.component.html', + imports: [ + IgxHierarchicalGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxRowIslandComponent, + FormsModule + ] +}) + +export class HGridCellMergeCustomComponent { + + public localData = HIERARCHICAL_DATA_EXTENDED; + public cellMergeMode: GridCellMergeMode = 'always'; + public perCountryMergeStrategy = new PerCountryMergeStrategy(); + public sortExpr = [ + { + dir: SortingDirection.Asc, fieldName: 'ContactTitle' + } + ]; +} + +export class PerCountryMergeStrategy extends DefaultMergeStrategy { + /* Merge only cells within their respective countries */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['Country']; + const projB = record['Country']; + return a === b && projA === projB; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +``` ## Feature Integration Due to the specific behavior of merged cells it has to be noted how exactly it ties together with some of the other features of the grid: - **Excel export**: merged cells remain merged when exported to Excel. - **Column pinning**: cells remain merged when a column is pinned and are displayed in the pinned area. - **Row pinning**: cells merge only withing their containing area, i.e. cells of pinned rows merge only with cells of other pinned rows, while cells of unpinned rows merge only with cells of unpinned rows. - **Navigation/Activation**: when a cell is active, all merged cells in the same row become single cells, i.e. their merge sequence is broken. This also includes activation via keyboard navigation. >[!NOTE] > If a merged cell is clicked, the closest cell from the merge sequence will become active. - **Updating/Editing**: since activation breaks the merge sequence, only a single cell will be in edit mode. - **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection. ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md new file mode 100644 index 000000000..4da4a1883 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-cell-selection.md @@ -0,0 +1,259 @@ +--- +_tocName: Cell selection +_premium: true +--- +--- title: Angular Hierarchical Grid Cell Selection - Ignite UI for Angular _description: Check how easy it is to use cell data selection using variety of events, rich API or mouse interactions. The Grid supports 3 modes for cell selection. Try it now! _keywords: data select, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/cell-selection --- # Angular Cell Selection The selection feature enables rich data select capabilities in the Material UI based Hierarchical Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Hierarchical Grid now supports three modes for cell selection, and you can easily switch between them by changing [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) property. You can disable cell selection, you can _select only one cell within the grid_ or to _select multiple cells in the grid_, which is provided as default option. + In the Hierarchical Grid you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled. But let's dive deeper in each of these options. ## Angular Cell Selection Example The sample below demonstrates the three types of Hierarchical Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-hierarchical-grid-cell-selection', + styleUrls: ['./hierarchical-grid-cellSelection.component.scss'], + templateUrl: 'hierarchical-grid-cellSelection.component.html', + imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] +}) +export class HierarchicalGridCellSelectionComponent implements OnInit { + @ViewChild('hgrid', { static: true }) public hGrid: IgxHierarchicalGridComponent; + @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent; + public data: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModeChild: GridSelectionMode = 'single'; + public selectionModes = []; + public selectionModesChildren = []; + + constructor() { } + + public ngOnInit(): void { + this.data = SINGERS; + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + this.selectionModesChildren = [ + { label: 'none', selected: this.selectionModeChild === 'none', togglable: true }, + { label: 'single', selected: this.selectionModeChild === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionModeChild === 'multiple', togglable: true } + ]; + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbar.open(); + } + + public selectCellSelectionModeChildGrid(args) { + this.selectionModeChild = this.selectionModes[args.index].label; + this.snackbar.open(); + } +} +``` +```html +
+
+
Parent Grid cell selection mode:
+ +
+
+
Child Grid cell selection mode:
+ +
+ + + + + + + + + + + + + + +
+ + +
+ notification_important +
+ Parent grid: + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+
+ Child grid: + @if (selectionModeChild === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionModeChild === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionModeChild === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+
+ +``` +```scss +.grid__wrapper { + display: flex; + justify-content: space-between; + margin: 16px; + flex-flow: column; + align-items: flex-start; + position: relative; +} + +.button-group-wrapper { + margin-bottom: 16px; + > h6 { + margin-bottom: 4px; + } +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.message-container { + display: flex; + flex-flow: column; + > span { + margin-top: 8px; + padding-left: 20px; + } +} +```
## Selection types ### Hierarchical Grid Multiple-cell Selection This is the default cell selection mode in both parent and child grids. Please keep in mind that you can make cell selection one grid at a time, you can not make cross grid range selection or to have a selected cells in multiple grids. Each key combination related to range selection and mouse drag functionality can be used only in the same grid. How to select cells: - By `Mouse drag` - Rectangular data selection of cells would be performed. - By `Ctrl key` press + `Mouse drag` - Multiple range selections would be performed. Any other existing cell selection will be persisted. - Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding `Shift key` the cell selection range will be updated based on the first selected cell position (starting point). - Keyboard multi-cell selection by using the `Arrow keys` while holding `Shift key`. Multi-cell selection range will be created based on the focused cell. - Keyboard multi-cell selection by using the `Ctrl + Arrow keys` and `Ctrl + Home/End` while holding `Shift key`. Multi-cell selection range will be created based on the focused cell. - Clicking with the `Left Mouse key` while holding `Ctrl key` will add single cell ranges into the selected cells collection. - Continuous multiple cell selection is available, by clicking with the mouse and dragging. ### Hierarchical Grid Single Selection When you set the `[cellSelection]="'single'"`, this allows you to have only one selected cell in the grid at a time. Also the mode `mouse drag` will not work and instead of selecting a cell, this will make default text selection. >[!NOTE] > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selected) event is emitted, no matter if the `selection mode` is `single` or `multiple`. In multi-cell selection mode when you select a range of cells [`rangeSelected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rangeSelected) event is emitted. ### Hierarchical Grid None selection If you want to disable cell selection you can just set `[cellSelection]="'none'"` property. In this mode when you click over the cell or try to navigate with keyboard, the cell is **not selected**, only the `activation style` is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below. ## Styling The theme engine exposes properties that allow us to style the **range of selected cells**. ### Import theme To get started with styling the selection, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Define colors Once done, we can make use of the [`contrast-color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-contrast-color) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. With them, we define the colors we would like to use for our selection range: ```scss $text-color: contrast-color($color: 'primary', $variant: 900); $background-color: color($color: "primary", $variant: 900); $border-yellow: #f2c43c; ``` >[!NOTE] >If we don't want to use the `contrast-color` and `color` functions, we can always hardcode the color values. ### Create custom theme Next we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) passing our `text-color`, `background-color` and `border-yellow` variables as `$cell-selected-text-color`, `$cell-selected-background` and `$cell-active-border-color`, respectively: ```scss $custom-grid-theme: grid-theme( + $cell-selected-text-color: $text-color, + $cell-active-border-color: $border-yellow, + $cell-selected-background: $background-color ); ``` ### Apply theme Afterwards, all we need to do is include the mixin in our component's style (could also be in the app styles), so that our igx-hierarchical-grid uses the newly created theme instead of the default one: ```scss :host { + @include tokens($custom-grid-theme); } ``` With the custom theme applied, the selected grid cells are highlighted with our selected colors: ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-multi-cell-style', + styleUrls: ['./hierarchical-grid-multi-cell-style.component.scss'], + templateUrl: 'hierarchical-grid-multi-cell-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridMultiCellStyleComponent implements OnInit { + public localdata; + public ngOnInit(): void { + this.localdata = CUSTOMERS; + } +} +``` +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$text-color: contrast-color($color: 'primary', $variant: 900); +$background-color: color($color: "primary", $variant: 900); +$border-yellow: #f2c43c; + +$custom-grid-theme: grid-theme( + $cell-selected-text-color: $text-color, + $cell-active-border-color: $border-yellow, + $cell-selected-background: $background-color, +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Selection](selection.md) - [Row selection](row-selection.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md new file mode 100644 index 000000000..c8989c650 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-collapsible-column-groups.md @@ -0,0 +1,150 @@ +--- +_tocName: Collapsible Column Groups +_premium: true +--- +--- title: Collapsible Column Groups in Angular Hierarchical Grid - Infragistics _description: Take advantage of the capability to show\hide smaller and concise set of data with the use of collapsible column groups in our Angular Hierarchical Grid. Try it now! _keywords: collapsible column headers, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/collapsible-column-groups --- # Collapsible Column Groups in Angular Data Grid Multi-column headers allow you to have multiple levels of nested columns and column groups. They also provide the ability to mark each column group as **collapsible**. **Collapsible multi-column headers** make it possible to collapse/expand, i.e. to show and hide the nested headers under the current one, which will give you a shortened/summarized information for example. ## Angular Grid Collapsible Column Groups Overview Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-collapsible-column-groups', + styleUrls: ['./hierarchical-grid-collapsible-column-groups.component.scss'], + templateUrl: 'hierarchical-grid-collapsible-column-groups.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridCollapsibleColumnGroupComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + public localdata; + + constructor() { + + } + public ngOnInit(): void { + this.localdata = CUSTOMERS; + for (const item of this.localdata) { + const names = item.ContactName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + } + } + + public getTooltipText(expanded) { + return expanded ? + 'The column is expanded! Click here to collapse.' : 'The column is collapsed! Click here to expand'; + } + +} +``` +```html +
+
+
+ + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ {{getTooltipText(column.expanded)}} +
+ + + + + + + + + + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ {{getTooltipText(column.expanded)}} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+``` +```scss +igx-hierarchical-grid { + --ig-size: var(--ig-size-small); +} +```
## Setup To get started with the IgxHierarchicalGrid and the **Collapsible multi-column headers** , first you need to install Ignite UI for Angular by typing the following command: ```cmd ng add igniteui-angular ``` For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxHierarchicalGridModule` in the app.module.ts file. Also, we strongly suggest that you take a brief look at [_multi-column groups_](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. ## Usage _Collapsible Column Groups_ is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. In order to define a column group as `collapsible`, you need to set the property to `[collapsible]="true"` and also keep in mind that you need to define the property `visibleWhenCollapsed` to at least two child columns: at least one column must be visible when the group is collapsed (`[visibleWhenCollapsed]="true"`) and at least one column must be hidden when the group is expanded (`[visibleWhenCollapsed]="false"`), otherwise the **collapsible functionality will be disabled**. If `visibleWhenCollapsed` is not specified for some of the child columns, then this column will be always visible no matter whether the parent state is expanded or collapsed. So let's see the markup below: ```html + + + + + + + + + + + + + + ``` And now let's sum up: every child column has three states: - Can be always visible, no matter the expanded state of its parent; - Can be visible, when its parent is collapsed; - Can be hidden, when its parent is collapsed; The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavior by setting the property `[expanded]="false"`. ## Expand/Collapse indicator template Default expand indicator for the igxGrid is the following: + + Expand Indicator Default collapse indicator for the igxGrid is the following: Collapsed Indicator Also, if you need to change the default expand/collapse indicator, we provide two easy ways to do so - via an input property or through a directive. ### Using an input property You can define custom expand/collapse template and provide it to each of the collapsible column groups using **collapsibleIndicatorTemplate** input property. Check the markup below: ```html + {{column.expanded ? 'remove' : 'add'}} + + + + + + ``` ### Using igxCollapsibleIndicator directive Another way to achieve this behavior is to use the igxCollapsibleIndicator directive as shown in the example below: ```html + + {{column.expanded ? 'remove' : 'add'}} + + + + + + + ``` > [!Note] > Please keep in mind that initially collapse group option takes precedence over column hidden - If you declared your column to be hidden using the property > hidden and you have a group defined where the same column should be shown, the column will be shown. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md new file mode 100644 index 000000000..aeab8dd2a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-hiding.md @@ -0,0 +1,300 @@ +--- +_tocName: Column Hiding +_premium: true +--- +--- title: Column Hiding in Angular Hierarchical Grid - Ignite UI for Angular _description: Learn how to use the Column Hiding feature that allows users to change the visible state of the columns directly through the UI of the Ignite Material UI table. _keywords: column hiding, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/column-hiding --- # Angular Hierarchical Grid Column Hiding The Ignite UI for Angular Hierarchical Grid provides an [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html) with an [`IgxColumnHidingDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnhidingdirective.html) which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Hierarchical Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. ## Angular Hierarchical Grid Column Hiding Example ```typescript +import { Component, OnInit } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-hiding', + styleUrls: ['./hierarchical-grid-hiding.component.scss'], + templateUrl: 'hierarchical-grid-hiding.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] +}) + +export class HGridColumnHidingSampleComponent implements OnInit { + public localdata; + + constructor() {} + + public ngOnInit(): void { + this.localdata = SINGERS; + } + + public formatter = (a) => a; + +} +``` +```html +
+ + + Singers + + + + + + + + +
+ +
+ + + + + + + + + Albums + + + + + + + + + + + + Songs + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.grid__wrapper{ + padding: 10px; +} +```
## Hierarchical Grid Setup Let's start by creating our Hierarchical Grid and binding it to our data. We will also enable both filtering and sorting for the columns. ```html + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + ``` ## Toolbar's Column Hiding UI The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) in the Hierarchical Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the [`IgxGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) and the [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) inside of the Hierarchical Grid. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) and a custom style for our Hierarchical Grid's wrapper. ```html
+ + + Singers + + + + + ... +
``` ```css /* columnHiding.component.css */ .photo { + vertical-align: middle; + max-height: 62px; } .cell__inner_2 { + margin: 1px } ``` @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html
+ + + Employees + + + + + ... +
``` ```css /* columnHiding.component.css */ .grid__wrapper { + margin: 10px; } ``` } The Hierarchical Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the `igx-grid-toolbar-hiding` [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#title) property, we will set the title that is displayed inside the dropdown button in the toolbar. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html
+ + + Employees + + + + +
``` } ```html
+ + + Singers + + + + +
``` By using the [`columnsAreaMaxHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#columnsAreaMaxHeight) property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want. ```typescript // columnHiding.component.ts public ngAfterViewInit() { + this.hidingActionRef.columnsAreaMaxHeight = "200px"; } ``` In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) property. This way we can use it according to our application's requirements. You can see the result of the code from above at the beginning of this article in the Angular Column Hiding Example section. ## Styling To get started with styling the column actions component, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` By using the simplest approach, we create a new theme that extends the [`column-actions-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-column-actions-theme) and accepts the `$title-color` and the `$background-color` parameters. ```scss $custom-column-actions-theme: column-actions-theme( + $background-color: #292826, + $title-color: #ffcd0f ); ``` As seen, the `column-actions-theme` only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme: ```scss $custom-button: flat-button-theme( + $foreground: #292826, + $disabled-foreground: rgba(255, 255, 255, .54) ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed the text-color of the flat buttons and the button disabled color, but the [`button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) provides way more parameters to control the button style. The last step is to **include** the component mixins, each with its respective theme: ```scss :host { + @include tokens($custom-column-actions-theme); + + .igx-column-actions { + @include tokens($custom-button); + } } ``` >[!NOTE] >We include the created **flat-button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` for the components inside the column action component (buttons, checkboxes ...etc): ```scss :host { + @include tokens($custom-column-actions-theme); + + ::ng-deep { + .igx-column-actions { + @include tokens($custom-button); + } + } } ``` ### Demo ```typescript +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-column-hiding-toolbar-style', + styleUrls: ['./hierarchical-grid-column-hiding-toolbar-style.component.scss'], + templateUrl: './hierarchical-grid-column-hiding-toolbar-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] +}) +export class HierarchicalGridColumnHidingToolbarStyleComponent implements OnInit { + public localdata; + + constructor() {} + + public ngOnInit(): void { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + Singers + + + + + + + + +
+ +
+ + + + + + + + + Albums + + + + + + + + + + + + Songs + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-column-actions-theme: column-actions-theme( + $background-color: #292826, + $title-color: #ffcd0f +); + +$custom-button: flat-button-theme( + $foreground: #ffcd0f, + $disabled-foreground: #292826 +); + +$dark-checkbox-theme: checkbox-theme( + $label-color: #ffcd0f, + $empty-color: #ffcd0f, + $fill-color: #ffcd0f, + $tick-color: #292826 +); + +:host ::ng-deep { + @include tokens($custom-column-actions-theme); + + .igx-column-actions { + @include tokens($custom-button); + @include tokens($dark-checkbox-theme); + } +} +```
## API References In this article we learned how to use the built-in column hiding UI in the Hierarchical Grid's toolbar. The column hiding UI has a few more APIs to explore, which are listed below. - [IgxColumnActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html) - [IgxColumnActionsComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-column-actions-theme) Additional components and/or directives with relative APIs that were used: [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) properties: - [hiddenColumnsCount](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#hiddenColumnsCount) [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [disableHiding](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disablehiding) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) properties: - [showProgress](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridToolbarComponent.html#showProgress) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) components: - [IgxGridToolbarTitleComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) - [IgxGridToolbarActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) methods: [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) events: - [columnVisibilityChanged](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnVisibilityChanged) [IgxRadioComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxradiocomponent.html) Styles: - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxRadioComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-radio-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md new file mode 100644 index 000000000..e72a47781 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-moving.md @@ -0,0 +1,363 @@ +--- +_tocName: Column Moving +_premium: true +--- +--- title: Column Reordering & Moving in Angular Hierarchical Grid - Infragistics _description: Set custom column order & enable columns reordering via drag/drop mouse or touch gestures, or by using the Angular Column Moving API. Try Ignite UI for Angular! _keywords: column order, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/column-moving --- # Hierarchical Grid Column Reordering & Moving The Hierarchical Grid component in Ignite UI for Angular provides the **Column Moving** feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. Column moving works both with pinned and unpinned columns and with Multi-column Headers. Moving a column into the pinned area pins the column and vice versa, moving a column outside of the pinned area unpins the column. > [!NOTE] > Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns. > [!NOTE] > If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the **draggable** attribute set to **false**! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the `igxDrag` directive. > [!NOTE] > If the pinned area exceeds its maximum allowed width (80% of the total Hierarchical Grid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area. ```html + ``` ## Angular Hierarchical Grid Column Moving Overview Example ```typescript +import { Component } from '@angular/core'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-moving', + styleUrls: ['./hierarchical-grid-moving.component.scss'], + templateUrl: 'hierarchical-grid-moving.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent] +}) + +export class HGridColumnMovingSampleComponent { + public localdata; + + constructor() { + this.localdata = CUSTOMERS; + } + + public toggleColumn(col: IgxColumnComponent) { + col.pinned ? col.unpin() : col.pin(); + } +} +``` +```html +
+ + + + +
+ CustomerID + +
+ + + + +
+ CompanyName + +
+ + + + +
+ ContactName + +
+ + + + +
+ ContactTitle + +
+ + + + +
+ Address + +
+ + + + +
+ City + +
+ + + + +
+ PostalCode + +
+ + + + +
+ Country + +
+ + + + +
+ Phone + +
+ + + + +
+ Fax + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css"); +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css"); +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css"); + +.header-icon { + font-size: 1.1em; + width: 1.1em; + height: 1.1em; + float: right; + cursor: pointer; +} + +.header { + height: 100%; +} + +:host ::ng-deep .title { + width: 100%; +} + +.pin-icon { + margin-left: 8px; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + color: #999; + + &:hover { + color: #444 + } +} + +:host{ + ::ng-deep{ + .igx-grid__th--pinned { + .pin-icon { + color: #444; + + &:hover { + color: #999 + } + } + } + } +} + +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +```
## Overview **Column moving** feature is enabled on a per-grid level, meaning that the [**igx-hierarchical-grid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#moving) input of the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html). ```html + ... + ``` ## API In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: [`moveColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#moveColumn) - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `position` (representing a [`DropPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/dropposition.html) value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column const idColumn = grid.getColumnByName("ID"); const nameColumn = grid.getColumnByName("Name"); grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); ``` [`move`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#move) - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed. ```typescript // Move the ID column at 3rd position. const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` Note that when using the API, only the [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. ## Events There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are [`columnMovingStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnMovingStart), [`columnMoving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnMoving) and [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnMovingEnd). You can subscribe to the [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnMovingEnd) event of the [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column. ```html + + ``` ```typescript public onColumnMovingEnd(event) { + if (event.source.field === "Phone" && event.target.field === "Country") { + event.cancel = true; + } } ``` ## Styling To get started with styling the Hierarchical Grid column moving headers, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$ghost-header-background`, `$ghost-header-text-color` and the `$ghost-header-icon-color` parameters. ```scss // Define dark theme for the column moving $dark-grid-column-moving-theme: grid-theme( + $ghost-header-text-color: #f4d45c, + $ghost-header-background: #575757, + $ghost-header-icon-color: #f4bb5c ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins with its respective theme: ```scss :host { + @include tokens($dark-grid-column-moving-theme); } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-moving-styled', + styleUrls: ['./hierarchical-grid-moving-styled.component.scss'], + templateUrl: 'hierarchical-grid-moving-styled.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent] +}) + +export class HGridColumnMovingSampleStyledComponent { + public localdata; + + constructor() { + this.localdata = CUSTOMERS; + } + + public toggleColumn(col: IgxColumnComponent) { + col.pinned ? col.unpin() : col.pin(); + } + +} +``` +```html +
+ + + + +
+ CustomerID + +
+ + + + +
+ CompanyName + +
+ + + + +
+ ContactName + +
+ + + + +
+ ContactTitle + +
+ + + + +
+ Address + +
+ + + + +
+ City + +
+ + + + +
+ PostalCode + +
+ + + + +
+ Country + +
+ + + + +
+ Phone + +
+ + + + +
+ Fax + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$dark-grid-column-moving-theme: grid-theme( + $ghost-header-text-color: #f4d45c, + $ghost-header-background: #575757, + $ghost-header-icon-color: #f4bb5c +); + +:host { + @include tokens($dark-grid-column-moving-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [ColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md new file mode 100644 index 000000000..8bd24b6b7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-pinning.md @@ -0,0 +1,659 @@ +--- +_tocName: Column Pinning +_premium: true +--- +--- title: Angular Hierarchical Grid Column Pinning - Ignite UI for Angular _description: Want to use the Pinning feature of the Ignite UI for Angular when you develop your next app? Easily lock column or change column order with rich API. _keywords: lock column, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/column-pinning --- # Angular Hierarchical Grid Column Pinning A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Hierarchical Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Hierarchical Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular Hierarchical Grid Column Pinning Example ```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { ActivatedRoute } from '@angular/router'; +import { NgClass } from '@angular/common'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-toolbar-pinning', + styleUrls: ['./hierarchical-grid-toolbar-pinning.component.scss'], + templateUrl: 'hierarchical-grid-toolbar-pinning.component.html', + imports: [NgClass, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxRowIslandComponent] +}) +export class HGridToolbarPinningComponent implements OnInit { + private activatedRoute = inject(ActivatedRoute); + + public localdata; + public useDarkTheme: boolean = false; + + constructor() { + this.localdata = CUSTOMERS; + } + + public ngOnInit(): void { + this.activatedRoute.queryParams.subscribe(params => { + this.useDarkTheme = params.dark === 'true'; + }); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +:host ::ng-deep .title { + width: 100%; +} + +:host { + height: 110vh; +} + +.grid__wrapper { + margin: 0 auto 4rem; + padding: 1rem; + height: 100%; +} +``` ## Column Pinning API Column pinning is controlled through the `pinned` input of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). Pinned columns are rendered on the left side of the Hierarchical Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Hierarchical Grid body. ```html + + ``` You may also use the Hierarchical Grid's [`pinColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#unpinColumn) methods of the [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) to pin or unpin columns by their field name: ```typescript this.hierarchicalGrid.pinColumn('Artist'); this.hierarchicalGrid.unpinColumn('Debut'); ``` Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the [`columnPin`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnPin) event and changing the [`insertAtIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipincolumneventargs.html#insertAtIndex) property of the event arguments to the desired position index. ```html ``` ```typescript public columnPinning(event) { + if (event.column.field === 'Artist') { + event.insertAtIndex = 0; + } } ``` ## Pinning Position You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```html ``` ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` ### Demo ```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IPinningConfig, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { employeesData } from '../../data/employeesData'; +import { athletesData } from '../../data/athletesData'; +import { DatePipe } from '@angular/common'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + // eslint-disable-next-line @angular-eslint/component-selector + selector: 'hierarchical-grid-sample', + styleUrls: ['hierarchical-grid-right-pinning.component.scss'], + templateUrl: 'hierarchical-grid-right-pinning.component.html', + imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxAvatarComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent, DatePipe] +}) + +export class HierarchicalGridRightPinningSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) + public grid1: IgxHierarchicalGridComponent; + + public data: any[]; + public employeesData: any[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + private _columnsPinned = true; + + public ngOnInit(): void { + this.data = athletesData; + this.employeesData = employeesData; + let i = 0; + this.data.forEach((x) => { + x.FirstPlaces = Math.floor(Math.random() * Math.floor(3)); + x.SecondPlaces = Math.floor(Math.random() * Math.floor(4)); + x.ThirdPlaces = Math.floor(Math.random() * Math.floor(5)); + x.RegistrationDate = this.generateReadableDate(x.Registered); + x.Birthday = this.generateReadableDate(this.employeesData[i].birthday); + x.Sponsor = this.employeesData[i].company; + x.AgentData = [this.employeesData[i]]; + i++; + }); + } + + public toggleColumn(col: IgxColumnComponent): void { + col.pinned ? col.unpin() : col.pin(); + } + + public get columnsPinned(): boolean { + return this._columnsPinned; + } + + public set columnsPinned(pinned) { + this._columnsPinned = !this._columnsPinned; + } + + private generateReadableDate(timestamp: string): Date { + let dateObj = new Date(timestamp); + if (isNaN(dateObj.getTime())) { + dateObj = new Date(timestamp.split(' ')[0]); + } + return dateObj; + } + +} +``` +```html +
+ + + + + + + + + +
+ +
+ {{ cell.row.data.CountryName }} +
+
+ + + + +
+ +
+ + + + + + + + + + {{ cell | date:'longDate' }} + + + + + {{ cell | date:'longDate' }} + + + + + +
+ {{ goldColumn.header }} + emoji_events +
+ + + + +
+ {{ silverColumn.header }} + emoji_events +
+ + + + +
+ {{ bronzeColumn.header }} + emoji_events +
+ + + + + +
+ +
+ + + + + + + + + + + + + + +
+``` +```scss +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +img.country-flag { + width: 35px; + height: 20px; +} +``` ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. ```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core"; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IPinningConfig, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { employeesData } from "../../data/employeesData"; +import { athletesData } from "../../data/athletesData"; +import { DatePipe } from "@angular/common"; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: "hierarchical-grid-sample-both-side-pinning", + styleUrls: ["hierarchical-grid-both-sides-pinning.component.scss"], + templateUrl: "hierarchical-grid-both-sides-pinning.component.html", + imports: [ + IgxHierarchicalGridComponent, + IgxGridToolbarComponent, + IgxGridToolbarActionsComponent, + IgxColumnComponent, + IgxCellTemplateDirective, + IgxTooltipTargetDirective, + IgxTooltipDirective, + IgxAvatarComponent, + IgxCellHeaderTemplateDirective, + IgxIconComponent, + IgxRowIslandComponent, + DatePipe, + IgxButtonDirective, + IgxGridToolbarTitleComponent + ] +}) +export class HierarchicalGridBothSidePinningSampleComponent implements OnInit { + @ViewChild("grid1", { static: true }) + public grid1: IgxHierarchicalGridComponent; + + public data: any[]; + public employeesData: any[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + public start = ColumnPinningPosition.Start; + public end = ColumnPinningPosition.End; + + public ngOnInit(): void { + this.data = athletesData; + this.employeesData = employeesData; + let i = 0; + this.data.forEach((x) => { + x.FirstPlaces = Math.floor(Math.random() * Math.floor(3)); + x.SecondPlaces = Math.floor(Math.random() * Math.floor(4)); + x.ThirdPlaces = Math.floor(Math.random() * Math.floor(5)); + x.RegistrationDate = this.generateReadableDate(x.Registered); + x.Birthday = this.generateReadableDate( + this.employeesData[i].birthday + ); + x.Sponsor = this.employeesData[i].company; + x.AgentData = [this.employeesData[i]]; + i++; + }); + } + + private generateReadableDate(timestamp: string): Date { + let dateObj = new Date(timestamp); + if (isNaN(dateObj.getTime())) { + dateObj = new Date(timestamp.split(" ")[0]); + } + return dateObj; + } + + public pinLeft() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.Start); + }); + } + + public pinRight() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.End); + }); + } + + public unpinColumn() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.unpin(); + }); + } +} +``` +```html +
+ + + Hierarchical Grid + + + + + + + + + +
+ +
+ {{ cell.row.data.CountryName }} +
+
+ + + + + +
+ +
+ + + + + + + + + + + + + {{ value | date: 'longDate' }} + + + + + + {{ value | date: 'longDate' }} + + + + + + + +
+ {{ goldColumn.header }} + emoji_events +
+ + + + + +
+ {{ silverColumn.header }} + emoji_events +
+ + + + + +
+ {{ bronzeColumn.header }} + emoji_events +
+ + + + + + Agent Data + + + + + + +
+ +
+ + + + + + + + + + + + + + + + +
+``` +```scss +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +img.country-flag { + width: 35px; + height: 20px; +} +``` ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state. This can be done by creating a header template for the column with a custom icon. ```html +
+ {{column.header || column.field}} + +
+ + + + + + + + + + + + + + ``` On click of the custom icon the pin state of the related column can be changed using the column's API methods. ```typescript public toggleColumn(col: ColumnType) { + col.pinned ? col.unpin() : col.pin(); } ``` ### Demo ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, inject } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { icons } from "../../services/svgIcons"; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +const FILTERING_ICONS_FONT_SET = 'filtering-icons'; +@Component({ + selector: 'app-hierarchical-grid-pinning', + styleUrls: ['./hierarchical-grid-pinning.component.scss'], + templateUrl: 'hierarchical-grid-pinning.component.html', + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridPinningSampleComponent implements AfterViewInit { + private cdr = inject(ChangeDetectorRef); + private iconService = inject(IgxIconService); + + public localdata; + + constructor() { + this.localdata = CUSTOMERS; + } + + + public ngAfterViewInit() { + const pinnedIcons = icons.filter(icon => icon.name === "pin" || icon.name === "unpin"); + pinnedIcons.forEach(icon => { + if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) { + this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET); + } + }); + } + + public toggleColumn(column: ColumnType) { + column.pinned ? column.unpin() : column.pin(); + this.cdr.detectChanges(); + } +} +``` +```html +
+ +
+ {{column.header || column.field}} + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.pin-icon { + margin-left: 8px; + cursor: pointer; + display: flex; + align-items: center; +} + +.pinned { + color: #444; + + &:hover { + color: #999; + } +} + +.unpinned { + color: #999; + + &:hover { + color: #444; + } +} +``` ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the Hierarchical Grid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the Hierarchical Grid.
## API References - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md new file mode 100644 index 000000000..2a97d3f0a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-resizing.md @@ -0,0 +1,291 @@ +--- +_tocName: Column Resizing +_premium: true +--- +--- title: Angular Hierarchical Grid Column Resizing - Ignite UI for Angular _description: Start using Angular Hierarchical Grid Column Resizing in order to change the grid column width in an instant. Angular drag resizing has never been so easy. Try for free! _keywords: grid column resizing, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/column-resizing --- # Angular Hierarchical Grid Column Resizing With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended. ## Angular Hierarchical Grid Column Resizing Example ```typescript +import { Component, inject } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { RemoteValuesService } from '../../services/remoteValues.service'; +import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; +import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; + +@Component({ + selector: 'app-hierarchical-grid-resizing', + styleUrls: ['./hierarchical-grid-resizing.component.scss'], + templateUrl: 'hierarchical-grid-resizing.component.html', + providers: [RemoteValuesService], + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule, IgxRowIslandComponent] +}) + +export class HGridColumnResizingSampleComponent { + private remoteValuesService = inject(RemoteValuesService); + + public years = 10; + public localdata: any[]; + public col: IgxColumnComponent; + public pWidth: string; + public nWidth: string; + public singers: any[]; + + constructor() { + this.singers = this.remoteValuesService.getSingersData();; + for (const singer of this.singers) { + this.getSales(singer); + } + this.localdata = this.singers; + } + + public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; + } + + public getSales(singer: any): any { + singer['Sales'] = this.getSalesData(10); + } + + public getSalesData(years?: number): any[] { + if (years === undefined) { + years = 20; + } + const sales: any[] = []; + for (let y = 0; y < years; y++) { + const value = this.getRandomNumber(0, 1000); + // eslint-disable-next-line @typescript-eslint/naming-convention + sales.push({Copies: value, Year: y}); + } + return sales; + } + + public getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use '../../../variables' as *; + +.photo { + vertical-align: middle; + max-height: rem(62px); +} +.cell__inner_2 { + margin: rem(1px) +} + +.grid__wrapper{ + padding: rem(16px); +} +```
**Column resizing** is also enabled per-column level, meaning that the [**igx-hierarchical-grid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#resizable) input of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). ```html ``` You can subscribe to the [`columnResized`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnResized) event of the [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) object, are exposed through the event arguments. ```html + + + ... ``` ```typescript public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; } ``` ## Resizing columns in pixels/percentages Depending on the user scenario, the column width may be defined in pixels, percentages or a mix of both. All these scenarios are supported by the Column Resizing feature. By default if a column does not have width set, it fits the available space with width set in pixels. This means that the following configuration is possible: ```html + + + + + ... ``` >[!NOTE] > There is a slight difference in the way resizing works for columns set in pixels and percentages. **Pixels** Resizing columns with width in pixels works by directly adding or subtracting the horizontal amount of the mouse movement from the size of the column. **Percentages** When resizing columns with width in percentages, the horizontal amount of the mouse movement in pixels translates roughly to its percentage amount relative to the grid width. The columns remain responsive and any future grid resizing will still reflect on the columns as well. ## Restrict column resizing You can also configure the minimum and maximum allowable column widths. This is done via the [`minWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) inputs of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by [`minWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth). ```html ``` Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels. This means the following configurations are possible: ```html ``` or ```html ``` ## Auto-size columns on double click Each column can be **auto sized** by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) is set on that column and the new width exceeds that [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) value. In this case the column will be sized according to preset [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) value. You can also auto-size a column dynamically using the exposed [`autosize()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#autosize) method on [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). ```typescript @ViewChild('hierarchicalGrid') hierarchicalGrid: IgxHierarchicalGridComponent; let column = this.hierarchicalGrid.columnList.filter(c => c.field === 'Artist')[0]; column.autosize(); ``` ## Auto-size columns on initialization Each column can be set to auto-size on initialization by setting `width` to 'auto': ```html ... ``` When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns. ```typescript +import { Component } from '@angular/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +@Component({ + selector: 'hierarchical-grid-column-autosizing', + styleUrls: ['./hgrid-column-autosizing.component.scss'], + templateUrl: './hgrid-column-autosizing.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridColumnAutoSizingSampleComponent { + public localdata; + + constructor() { + this.localdata = CUSTOMERS; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.grid__wrapper{ + padding: 16px; +} +```
## Styling To get started with the styling of the Hierarchical Grid column resize line, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` The simplest approach to achieve this is to create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts many parameters as well as the `$resize-line-color` parameter. ``` scss $custom-grid-theme: grid-theme( + $resize-line-color: #0288d1 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins with its respective theme: ```scss :host { + @include tokens($custom-grid-theme); } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-resize-line-styling', + styleUrls: ['./hierarchical-grid-resize-line-styling.component.scss'], + templateUrl: './hierarchical-grid-resize-line-styling.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HGridResizeLineStylingComponent { + public localData; + constructor() { + this.localData = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-grid-theme: grid-theme( + $resize-line-color: #0288d1 +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md new file mode 100644 index 000000000..c93018aff --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-selection.md @@ -0,0 +1,286 @@ +--- +_tocName: Column Selection +_premium: true +--- +--- title: Angular Hierarchical Grid Column Selection - Ignite UI for Angular _description: Learn how to configure column selection with Ignite UI for Angular Hierarchical grid. This makes grid interactions much easier and faster than ever. _keywords: column selection, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/column-selection --- # Angular Hierarchical Grid Column Selection The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich [`API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest) that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations. ## Angular Column Selection Example
The sample below demonstrates the three types of Hierarchical Grid's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. *_Photo_ and _Debut_ are with disabled column selection. ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-column-selection', + templateUrl: './hierarchical-grid-column-selection.component.html', + styleUrls: ['./hierarchical-grid-column-selection.component.scss'], + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HierarchicalGridColumnSelectionComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxHierarchicalGridComponent) + public hGrid: IgxHierarchicalGridComponent; + public data; + public currentColumnSelection: GridSelectionMode = 'single'; + + public formatter = (a) => a; + + public ngOnInit() { + this.data = SINGERS; + } + + public ngAfterViewInit() { + this.hGrid.selectColumns(['Artist']); + this.cdr.detectChanges(); + } + +} +``` +```html +
+ + + + + + None + Single + Mulitple + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +.grid__wrapper { + padding: 16px; + + igx-select { + --ig-size: var(--ig-size-small); + } +} +```
## Basic usage The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnSelection) input, which takes [GridSelectionMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#gridselectionmode) values. ## Interactions The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable). With that being said, in order to select a column, we just need to click on one, which will mark it as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected). If the column is not selectable, no selection style will be applied on the header, while hovering. > [!NOTE] > [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) input. The [`IgxColumnGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) is [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) if all of its `selectable` descendants are [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected). *Under _Location_ Column Group only column _City_ is selectable. ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-column-group-selection', + templateUrl: './hierarchical-grid-column-group-selection.component.html', + styleUrls: ['./hierarchical-grid-column-group-selection.component.scss'], + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent] +}) +export class HierarchicalGridColumnGroupSelectionComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxHierarchicalGridComponent, { static: true }) + private hGrid: IgxHierarchicalGridComponent; + + public data; + + public ngOnInit(): void { + this.data = CUSTOMERS; + } + + public ngAfterViewInit() { + this.hGrid.selectColumns(['CompanyName', 'ContactName', 'ContactTitle', 'City']); + this.cdr.detectChanges(); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper { + padding: 16px; +} +```
## Keyboard combinations > [!NOTE] > The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnselection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: - Multi-column selection - holding ctrl + click on every **selectable** header cell. - Range column selection - holding shift + click selects all **selectable** columns in between. ## API manipulations The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected) by setting the corresponding **setter**. > [!NOTE] > The above statement also applies to the [`IgxColumnGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html), except that when the [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) property is changed it changes the state of its descendants. More information regarding the API manipulations could be found in the [`API References`](#api-references) section. ## Styling Before diving into the styling options, the core module and all component mixins need to be imported. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` >[!NOTE] >Please note that [`row selection`](row-selection.md) and [`column selection`](column-selection.md) can't be manipulated independently. They depend on the same `variables`. With that being said, let's move on and change the **selection** and **hover** styles.
Following the simplest approach, let's define our custom **theme**. ```scss $custom-grid-theme: grid-theme( + $row-selected-background: #011627, + $row-selected-text-color: #ecaa53, + $row-selected-hover-background: #011627, + $header-selected-text-color: #ecaa53, + $header-selected-background: #011627 ); ``` The [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) accepts several parameters but those are the five responsible for changing the appearance of all selected columns: - **$row-selected-background** - sets the background of the selected fraction. - **$row-selected-text-color** - sets the text color of the selected fraction - **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells. - **$header-selected-text-color** - sets the text color of the selected column header - **$header-selected-background** - sets the background color of the selected column header. ### Using CSS Variables The last step is to include the custom `igx-grid` theme. ```scss :host { + @include tokens($custom-grid-theme) } ``` ### Demo ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-column-selection-styles', + templateUrl: './hierarchical-grid-column-selection-styles.component.html', + styleUrls: ['./hierarchical-grid-column-selection-styles.component.scss'], + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HGridColumnSelectionStylesComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxHierarchicalGridComponent) + public hGrid: IgxHierarchicalGridComponent; + public data; + + public formatter = (a) => a; + + public ngOnInit() { + this.data = SINGERS; + } + + public ngAfterViewInit() { + this.hGrid.selectColumns(['Artist', 'GrammyNominations']); + this.cdr.detectChanges(); + } + +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-grid-theme: grid-theme( + $row-selected-background: #011627, + $row-selected-text-color: #ecaa53, + $row-selected-hover-background: #011627, + $header-selected-text-color: #ecaa53, + $header-selected-background: #011627 +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
The column selection UI has a few more APIs to explore, which are listed below. - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) properties: - [columnSelection](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnSelection) - [selectedColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#selectedColumns) - [selectColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#selectColumns) - [deselectColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#deselectColumns) - [selectAllColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#selectAllColumns) - [deselectAllColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#deselectAllColumns) [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [selectable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#selectable) - [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#selected) [`IgxColumnGrpupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) properties: - [selectable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selectable) - [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) events: - [onColumnsSelectionChange](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onColumnsSelectionChange) ## Additional Resources - [Hierarchical Grid overview](hierarchical-grid.md) - [Selection](selection.md) - [Cell selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-types.md new file mode 100644 index 000000000..12f3e248c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-column-types.md @@ -0,0 +1,50 @@ +--- +_tocName: Column Data types +_premium: true +--- +--- title: Column Data Types in Angular - Ignite UI for Angular _description: SHandle cell and editing templates in Angular by choosing from several predefined column data types - number, string, date, boolean, currency and percent column. _keywords: column data type, ignite ui for angular, infragistics _license: commercial --- # Angular Hierarchical Grid Column Types Ignite UI for Angular Hierarchical Grid provides a default handling of _number_, _string_, _date_, _boolean_, _currency_ and _percent_ column data types, based on which the appearance of the default and editing templates will be present. ## Default template If you want to enable a data type-specific template, you should set the column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) input otherwise the column will be treated as a string column since that is the default value for column dataType. Let's see what are the default templates for each type. ### String This column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) is not changing the appearance or format of the cell value. ### Number If the [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) is set to _number_, the cell value will be formatted based on application or grid's [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` ```ts public options = { + digitsInfo: '1.4-4', }; public formatOptions = this.options; ``` ```html ``` ### DateTime, Date and Time The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom [date format](https://angular.io/api/common/DatePipe#pre-defined-format-options) or [timezone](https://angular.io/api/common/DatePipe#parameters): - **format** - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fullTime' and etc. This is a full list of all available [pre-defined Angular format options](https://angular.io/api/common/DatePipe#pre-defined-format-options) (legacy). - **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world: + + > Note: Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization.md#formatting). ```ts public formatDateOptions = { + /** The date/time components that a date column will display, using predefined options or a custom format string. */ + /** e.g 'dd/mm/yyyy' or 'shortDate' **/ + format: 'longDate', + /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */ + timezone: 'GMT' }; public formatOptions = this.options; ``` ```html ``` Available timezones: | Timezone | Value | |---------------------------| ------------------------- | | Alpha Time Zone |‘UTC+1’ | | Australian Central Time |‘UTC+9:30/ +10:30’ | | Arabia Standard Time |‘UTC+3’ | | Central Standard Time |‘UTC-6’ | | China Standard Time |‘UTC+8’ | | Delta Time Zone |‘UTC+4’ | | Greenwich Mean Time |‘UTC+0’ | | Gulf Standard Time |‘UTC+4’ | | Hawaii Standard Time |‘UTC-10’ | | India Standard Time |‘UTC+4’ |
The Hierarchical Grid accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](../grid/grid.md#custom-display-format). As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the _time_ portion of the date object: ```ts // Time format with equivalent example public timeFormats = [ + { format: 'shortTime', eq: 'h:mm a' }, + { format: 'mediumTime', eq: 'h:mm:ss a' }, + { format: 'longTime', eq: 'h:mm:ss a z' }, + { format: 'fullTime', eq: 'h:mm:ss a zzzz' }, ]; ``` #### Cell editing When it comes to cell editing based on the column type a different editor will appear: - dateTime - [IgxDateTimeEditor directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) will be used. This editor will give you a mask directions for the input elements part of the DateTime object. - date - [IgxDatePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) will be used. - time - [IgxTimePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtimepickercomponent.html) will be used. #### Filtering The same editors listed above will be used when it comes to Quick Filtering/Excel-style Filtering. These are the following filtering operands that each type exposes: - dateTime and date - Equals, Does Not Equal, Before, After, Today, Yesterday, This Month, Last Month, Next Month, This Year, Last Year, Next Year, Empty, Not Empty, Null, Not Null; - time - At, Not At, Before, After, At or Before, At or After, Empty, Not Empty, Null, Not Null; #### Summaries The available Summary operands will be **Count**, **Earliest** (date/time) and **Latest** (date/time). #### Sorting Time type column sorts based on the time portion of the object, ms will be disregarded. Date type column sorts based on the date portion, disregards the time portion. DateTime column sorts based on the full date ### Boolean The default template is using material icons for visualization of boolean values - 'clear' icon for _false_ values and 'check' icon for _true_ values. As for the editing template, it is using [igx-checkbox](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) component. ```html ``` ### Currency #### Default template The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [`LOCALE_ID`](https://angular.io/api/core/LOCALE_ID) or Hierarchical Grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale). _By using LOCALE_ID_ ```ts import { LOCALE_ID } from '@angular/core'; ... + + @Component({ + selector: 'app-component.sample', + templateUrl: 'grid-component.sample.html', + providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }] }) ``` _By using Grid's locale_ ```html ``` By using the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input the end-user can customize the number format by _decimal point_, _currencyCode_ and _display_. ```ts public options = { + digitsInfo: '3.4-4', + currencyCode: 'USD', + display: 'symbol-narrow' }; public formatOptions = this.options; ``` ```html ``` | Parameter | Description | |---------------------------| ------------------------- | | digitsInfo | Represents Decimal representation of currency value | | currencyCode | ISO 4217 currency code | | display* | Displays the value by narrow or wide symbol | *display - for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$. Upon editing of cell's value the _currency symbol_ will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.md#cell-editing-templates). >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) ### Percent Default template is showing the percent equivalent of the underlying numeric value. The displayed cell value is a multiplied result by display factor of '100' - for example, as the default factor is 100 and the "value" passed to the cell is 0.123, then the displayed cell value will be "12.3%". When it comes to cell editing, the value will be the same as the data source value - the display factor is '1'. Upon editing of the cell a preview of the percent value will be shown as a suffix element.For example, while editing '0.0547' the preview element will show '5.47%'. ```ts public options = { + /** + * Decimal representation options, specified by a string in the following format: + * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. + * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. + * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + */ + digitsInfo: '2.2-3' }; public formatPercentOptions = this.options; ``` ```html ``` >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) ### Image Default template is using the value coming from the data as an image source to a default image template. The default image template will extract the name of the image file and set it as `alt` attribute of the image to meet the accessibility requirement. The displayed cell size is adjusted to the sizes of the images rendered, so keep in mind that large images will still be rendered and the grid rows will become as large as the images in the image column. Filtering, sorting and grouping will be turned off by default for image type columns. If you want to enable them, you need to provide custom strategies which perform the data operations. ```html ``` When [auto-generating](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) columns, the grid analyses the values in the first data record. If a value is of type string and matches the pattern of a url ending in an image extension (gif, jpg, jpeg, tiff, png, webp, bmp) then the column will automatically be marked as `dataType === GridColumnDataType.Image` and a default image template will be rendered. ## Default editing template See the editing templates part of [Hierarchical Grid Editing topic](editing.md#editing-templates) ## Custom editing template and formatter Custom template and column formatter definition will always take precedence over the column data type set: ### Custom template ```html + + + {{ value | currency:'USD':'symbol':'1.0-0'}} + + ``` ### Column formatter ```ts + // Through column formatter property public formatCurrency(value: number) { + return `Dollar sign ${value.toFixed(0)}`; } public init(column: IgxColumnComponent) { + switch (column.field) { + case 'UnitsInStock': + column.formatter = this.formatCurrency; + break; + default: + return; } ``` ## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - Column [pipeArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) - Hierarchical Grid [locale](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) - Column [dataType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) ## Additional Resources
- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) - [Hierarchical Grid overview topic](hierarchical-grid.md) - [Editing topic](editing.md) - [Summaries topic](summaries.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md new file mode 100644 index 000000000..86d0b3154 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-conditional-cell-styling.md @@ -0,0 +1,321 @@ +--- +_tocName: Conditional Styling +_premium: true +--- +--- title: Conditional Cell Styling in Angular Hierarchical Grid - Ignite UI for Angular _description: Let users identify different cells quickly. Define a variety of cell styles. Use the conditional cell styling in Angular Data grid to make cells stand out. _keywords: conditional styling, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/conditional-cell-styling --- # Angular Hierarchical Grid Conditional Styling If you need to provide any custom styling in the IgxHierarchicalGrid component, you can do it on either row or cell level. ## Hierarchical Grid Conditional Row Styling The IgxHierarchicalGrid component in Ignite UI for Angular provides two ways to **conditional styling of rows** based on custom rules. - By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowClasses) input on the IgxHierarchicalGrid component; - By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowStyles) input on the IgxHierarchicalGrid component; Further in this topic wi will cover both of them in more details. ### Using rowClasses You can conditionally style the IgxHierarchicalGrid rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowClasses) input and define custom rules. ```html + ... ``` The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. ```typescript // sample.component.ts public rowClasses = { + activeRow: this.activeRowCondition }; public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index; ``` ```scss // sample.component.scss ::ng-deep { + .activeRow { + border: 2px solid #fc81b8; + border-left: 3px solid #e41c77; + } } ``` > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +@Component({ + selector: 'app-hgrid-row-classes', + styleUrls: ['./hgrid-rowClasses.component.scss'], + templateUrl: 'hgrid-rowClasses.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, IgxRowIslandComponent] +}) + +export class HGridRowClassesSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + public localdata; + + constructor() { } + + public ngOnInit(): void { + this.localdata = SINGERS; + } + + public removeRow(rowIndex) { + const row = this.hierarchicalGrid.getRowByIndex(rowIndex); + row.delete(); + } + + public activeRowCondition = (row: RowType) => this.hierarchicalGrid?.navigation.activeNode?.row === row.index; + // eslint-disable-next-line @typescript-eslint/member-ordering + public rowClasses = { + activeRow: this.activeRowCondition + }; + + + public handleChange() { + requestAnimationFrame(() => { + this.hierarchicalGrid.pipeTrigger++; + this.hierarchicalGrid.notifyChanges(); + }); + } + public handleLeftClick(args) { + args.event.preventDefault(); + this.hierarchicalGrid.navigation.setActiveNode({ row: args.cell.row.index, column: args.cell.column.visibleIndex }); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.addSingerBtn.igx-button--contained{ + margin-bottom: 10px; + background-color: lightgrey; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.26) + } +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +::ng-deep { + .activeRow { + border: 2px solid #fc81b8; + border-left: 3px solid #e41c77; + } + .toggle-section { + width: 300px; + height: 100px; + background-color: white; + } + +} +```
### Using rowStyles Columns now expose the `rowStyles` property which allows conditional styling of the data rows. Similar to `rowClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). > The callback signature for both `rowStyles` and `rowClasses` is: ```ts (row: RowType) => boolean ``` Let's define our styles: ```typescript // component.ts public rowStyles = { + background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb', + 'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null }; public childRowStyles = { + 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null }; ``` ```html + + ... + + ... ``` ### Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +@Component({ + selector: 'app-hgrid-row-row-styles', + styleUrls: ['./hgrid-rowStyles.component.scss'], + templateUrl: 'hgrid-rowStyles.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, IgxRowIslandComponent] +}) + +export class HGridRowStylesSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + public rowStyles = { + background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb', + 'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null + }; + + public childRowStyles = { + 'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null + }; + constructor() { } + + public ngOnInit(): void { + this.localdata = SINGERS; + } + + public removeRow(rowIndex) { + const row = this.hierarchicalGrid.getRowByIndex(rowIndex); + row.delete(); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.addSingerBtn.igx-button--contained{ + margin-bottom: 10px; + background-color: lightgrey; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.26) + } +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.dialogNewRecord { + > * { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } +} + +.igx-input-group { + margin-bottom: 10px; + padding: 5px; +} +.igx-checkbox { + margin-top: 5px; + margin-bottom: 5px; + padding-top: 8px; + padding-bottom: 5px; +} + +.reorderLevelInput { + color: black; + width: 100%; +} +```
## Hierarchical Grid Conditional Cell Styling ## Overview The IgxHierarchicalGrid component in Ignite UI for Angular provides two ways to **conditional styling of cells** based on custom rules. - By setting the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) input [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell. ```ts // component.ts file public beatsPerMinuteClasses = { + downFont: this.downFontCondition, + upFont: this.upFontCondition }; ... private downFontCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] <= 95; } ``` ```scss // component.scss file .upFont { + color: red; } .downFont { + color: green; } ``` ### Using cellClasses You can conditionally style the IgxHierarchicalGrid cells by setting the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) input and define custom rules. ```html ``` The [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. ```typescript // sample.component.ts private upGrammyCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] > 5; } private downGrammyCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] <= 5; } public grammyClasses = { + downGrammy: this.downPriceCondition, + upGrammy: this.upPriceCondition }; ``` ```scss // sample.component.scss ::ng-deep { + .upGrammy { + color: red; + } + + .downGrammy { + color: green; + } } ``` > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo
- By using the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. ```ts public styles = { + 'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)', + 'text-shadow': '1px 1px 2px rgba(25,25,25,.25)', + 'animation': '0.25s ease-in-out forwards alternate popin' }; ``` > The callback signature for both `cellStyles` and `cellClasses` is now changed to: ```ts (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean ``` ### Using cellStyles Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions). In the [sample above](#demo) we've created: - Two different styles that will be applied based on the column index. - You will also change the `text color` based on even/odd rows. > The callback signature for both `cellStyles` is: ```ts (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean ``` Let's define our styles: ```typescript // component.ts public oddColStyles = { + background: 'linear-gradient(to right, #b993d6, #8ca6db)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray', + animation: '0.75s popin' }; public evenColStyles = { + background: 'linear-gradient(to right, #8ca6db, #b993d6)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', + animation: '0.75s popin' }; ``` On `ngOnInit` we will add the `cellStyles` configuration for each column of the predefined `columns` collection, which is used to create the IgxHierarchicalGrid columns dynamically. ```ts // component.ts public ngOnInit() { + this.data = SINGERS; + this.columns = [ + { field: 'Artist' }, + { field: 'HasGrammyAward' }, + { field: 'Debut' }, + { field: 'GrammyNominations' }, + { field: 'GrammyAwards' } + ]; + + this.applyCSS(); } ``` ```ts public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); } public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); } ``` ```html + + ``` Define a `popin` animation ```scss // component.scss @keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } } ``` ### Demo
## Known issues and limitations - If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met. A pipe check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that with a `spread operator(...)` on [`onCellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onCellEdit) event. This will copy the original object with a new instance, and lead pure pipe to be fired. ```ts public backgroundClasses = { + myBackground: (rowData: any, columnKey: string) => { + return rowData.Col2 < 10; + } }; ... editDone(evt) { + this.backgroundClasses = {...this.backgroundClasses}; } ``` ```html + + + ``` ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Editing](editing.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Column Hiding](column-hiding.md) - [Selection](selection.md) - [Searching](search.md) - [Toolbar](toolbar.md) - [Multi-column Headers](multi-column-headers.md) - [Size](display-density.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md new file mode 100644 index 000000000..461abff96 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-display-density.md @@ -0,0 +1,173 @@ +--- +_tocName: Size +_premium: true +--- +--- title: Angular Grid Size - Ignite UI for Angular _description: Learn how to apply size capabilities to the Hierarchical grid component. You can use a set of compact view options in the Ignite UI for Angular. _keywords: material density, size, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/display-density --- # Angular Hierarchical Grid Size **IgxHierarchicalGrid** design is based on [Material Design Guidelines](https://material.io/design). We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content. ## Angular Hierarchical Grid Size Example ```typescript +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-density', + styleUrls: ['./hierarchical-grid-density.component.scss'], + templateUrl: 'hierarchical-grid-density.component.html', + imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridDisplayDensitySampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + public size = 'small'; + public sizes; + + constructor() { + + } + public ngOnInit(): void { + this.localdata = CUSTOMERS; + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event: any) { + this.size = this.sizes[event.index].label; + this.hierarchicalGrid.reflow(); + } +} +``` +```html +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +:host { + display: block; + padding: 8px; +} + +.density-chooser { + margin-bottom: 16px; +} +igx-buttongroup{ + display: block; + width: 500px; +} +```
## Usage As you can see in the demo above, the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set size: ```html ``` And now let's see in details how each option reflects on the Hierarchical Grid component. When you switch between different sizes the height of each Hierarchical Grid element and the corresponding paddings will be changed. Also if you want to apply custom column [**width**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding. - **--ig-size-large** - this is the default Hierarchical Grid size with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `80px`; - **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `64px`; - **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `56px`; > [!NOTE] > Please keep in mind that currently you **can not** override any of the sizes. Let's now continue with our sample and see in action how each size is applied. Let's first add a button which will help us to switch between each size: ```html
+
``` ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; public size = 'small'; public sizes; public ngOnInit() { + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.sie === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; } ``` Now we can add the markup. ```html
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` Finally, let's provide the necessary logic in order to actually apply the size: ```typescript @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent }) public hierarchicalGrid: IgxHierarchicalGridComponent; public selectSize(event: any) { + this.size = this.sizes[event.index].label; } @HostBinding('style.--ig-size') protected get sizeStyle() { + return `var(--ig-size-${this.size})`; } ``` Another option that [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) provides for you, in order to be able to change the height of the rows in the Hierarchical Grid, is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowheight). So let's see in action how this property affects the Hierarchical Grid layout along with the `--ig-size` CSS variable. Please keep in mind the following: - `--ig-size` CSS variable will have **NO** impact on row height **if there is [rowHeight](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowheight) specified**; - `--ig-size` will **affect all of the rest elements in the Hierarchical Grid**, as it has been described above; And now we can extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowHeight) property to the Hierarchical Grid: + + ```html + + .............. + + ```
## API References
- [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html)
## Additional Resources - [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Editing](editing.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md new file mode 100644 index 000000000..e130c9cca --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-editing.md @@ -0,0 +1,210 @@ +--- +_tocName: Editing +--- +--- title: Angular Hierarchical Grid Editing - Ignite UI for Angular _description: Get a powerful public API and an easy way to perform data manipulations like creating, updating, or deleting records. See the Angular data grid editing options! _keywords: data manipulation, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/editing --- # Angular Hierarchical Grid Editing Ignite UI for Angular Hierarchical Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The data manipulation phases are: [Cell Editing](cell-editing.md), [Row Editing](row-editing.md), and [Batch Editing](batch-editing.md). The Hierarchical Grid gives you a powerful public API which allows you to customize the way these operations are performed. Additionally, **Cell editing** exposes several default editors based on the column data type, that could be easily customized via [igxCellEditor directive](cell-editing.md#cell-editing-templates) or [igxRow directives](row-editing.md#customizing-row-editing-overlay). ## Setup In order to specify which edit mode should be enabled, the Hierarchical Grid exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable). Property **editable** enables you to specify the following options: - **false** - the editing for the corresponding column will be disabled; /default value/ - **true** - the editing for the corresponding column will be enabled; >Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the Hierarchical Grid. Property **rowEditable** enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled; /default value/ - **true** - the row editing in the corresponding grid will be enabled; In the Hierarchical Grid if you set rowEditable property to true, and editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the _primary key_. **Batch editing** in the grid can be enabled for both **cell editing** and **row editing** modes. In order to set up batch editing it is necessary to provide to the grid a _TransactionService_. - _Cell and Batch Editing_ - in this scenario every singe modification of each cell is preserved separately and undo/ redo operations are available on cell level; - _Row and Batch Editing_ - in this scenario the modifications are preserved on row level so undo/ redo operations will not be working for each cell that is modified but for the bunch of cell from each row. ### Editing Templates + + If you want to use a data type specific _edit templates_, you should specify the column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) property. So let's now see what are the default templates for each type: - For `string` data type, default template is using [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - For `number` data type, default template is using [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0. - For `date` data type, default template is using [igxDatePicker](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - For `dateTime` data type, default template is using [IgxDateTimeEditor directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html). This editor will give you a mask directions for the input elements part of the DateTime object. - For `date` data type, default template is using [IgxDatePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html). - For `time` - data type, default template is using [IgxTimePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtimepickercomponent.html). - For `boolean` data type, default template is using [igxCheckbox](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - For `currency` data type, default template is using [IgxInputGroup](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) with prefix/suffix configuration based on application or grid locale settings. - For `percent` data type, default template is using [IgxInputGroup](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) with suffix element that shows a preview of the edited value in percents. - For custom templates you can see [Cell Editing topic](cell-editing.md#cell-editing-templates) All available column data types could be found in the official [Column types topic](column-types.md#default-template). #### Default template editors of date-time columns The template editors of `date`, `dateTime` and `time` column data types use a default input format as per the `IgxGrid`'s [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale). In case the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html#pipeArgs) object `format` property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only. If the editors input format should be explicitly set, the [`editorOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html#editorOptions) object of type [`IColumnEditorOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icolumneditoroptions.html) can be leveraged. It accepts a `dateTimeFormat` property that is used as input format for the editors of `date`, `dateTime` and `time` column data types. ```typescript const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', } ``` ```html ``` ### Event arguments and sequence The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.md) and [**Cell Editing**](cell-editing.md) lifecycle - when starting, committing or canceling the editing action. + + | Event | Description | Arguments | Cancellable | |-------|-------------|-----------|-------------| | [`rowEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#celleditdone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igrideditdoneeventargs.html) | `false` | | [`cellEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | | [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEdit) | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`rowEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | | [`rowEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | ### Event cancellation - `RowEditEnter` - Neither Row nor Cell will enter edit mode. - `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed Cell/Row edit, hitting **Done** button or **Enter** won't commit the value or row transaction. Cell editing and Row editing won't be closed until **Cancel** button is clicked. - `RowEdit` - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes. The following sample demonstrates the editing execution sequence in action: ```typescript +import { Component, ElementRef, Renderer2, ViewChild, inject } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hgrid-editing-lifecycle', + templateUrl: 'hgrid-editing-lifecycle.component.html', + styleUrls: ['hgrid-editing-lifecycle.component.scss'], + imports: [IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxButtonDirective, IgxIconComponent] +}) +export class HGridEditingLifecycleComponent { + private renderer = inject(Renderer2); + + @ViewChild('logger') + public logger: ElementRef; + public $rowEditEnter = false; + public $cellEditEnter = false; + public $cellEdit = false; + public $rowEdit = false; + public data; + + + + public constructor() { + this.data = SINGERS; + } + + public rowEditEnter(evt) { + evt.cancel = this.$rowEditEnter; + this.logAnEvent(`=> 'rowEditEnter' with 'RowID':` + evt.rowID, evt.cancel); + } + public cellEditEnter(evt) { + evt.cancel = this.$cellEditEnter; + this.logAnEvent(`=> 'cellEditEnter' with 'value':` + evt.oldValue, evt.cancel); + } + public cellEdit(evt) { + evt.cancel = this.$cellEdit; + this.logAnEvent(`=> 'cellEdit' with 'newValue':` + evt.newValue, evt.cancel); + } + public cellEditDone() { + this.logAnEvent(`=> 'cellEditDone'`); + } + public cellEditExit() { + this.logAnEvent(`=> 'cellEditExit'`); + } + public rowEdit(evt) { + evt.cancel = this.$rowEdit; + this.logAnEvent(`=> 'rowEdit'`, evt.cancel); + } + public rowEditDone() { + this.logAnEvent(`=> 'rowEditDone'`); + } + public rowEditExit() { + this.logAnEvent(`=> 'rowEditExit' << End of cycle >>`); + } + public clearLog() { + const elements = this.logger.nativeElement.querySelectorAll('p'); + for (let index = 0; index < elements.length; index++) { + this.renderer.removeChild(this.logger.nativeElement, elements[index]); + } + } + + private logAnEvent(msg: string, canceled?: boolean) { + const createElem = this.renderer.createElement('p'); + + if (canceled) { + msg = msg.concat(': has been canceled '); + } + + const text = this.renderer.createText(msg); + this.renderer.appendChild(createElem, text); + const container = this.logger.nativeElement; + this.renderer.insertBefore(container, createElem, container.children[0]); + } +} +``` +```html +
+ cancel rowEditEnter + cancel cellEditEnter + cancel cellEdit + cancel rowEdit +
+
+
+
+ + + + + + + + + + + + + + + +
+
+
+
+
+
+ Events execution sequence + +
+
+
+
+
+
+
+``` +```scss +:host { + width: 100%; +} + +.switches { + margin-top: 12px; + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-around; +} + +.sample-wrapper { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.grid-wrapper { + width: 60%; + margin: 8px; +} +.log-wrapper { + width: 35%; +} + +.clearBtn { + top: 3px; + margin-left: 20px; +} + +.selected-data-area{ + overflow-y: auto; + max-height: 560px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; +} + +.logContainer { + padding: 0.2rem 0.4rem; +} + +.highlight { + text-align: center; + margin-bottom: 0.4rem; +} +``` ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: | Hierarchical Grid | Filtering | Sorting | Paging | Moving | Pinning | Hiding | GroupBy | Resizing | Escape | Enter | F2 | Tab | Cell Click | Add new row/Delete/Edit | | ----------------- |:---------:|:-------:|:------:|:------:|:-------:|:------:|:-------:|:--------:|:------:|:-----:|:--:|:---:|:----------:|:-----------------------:| | Keep edit mode | | | | | | | | ✔ | | | | | | | | Exit edit mode |✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | | Commit | | | | | | | | | | ✔ | ✔ | ✔ | ✔ | ✔ | | Discard | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |✔ | | ✔ | | | | | | As seen from the table, all interactions, except resizing a column, will end the editing and will discard the new values. Should the new value be committed, this can be done by the developer in the corresponding feature "-ing" event. Example how to commit new values, if user tries to sort the column while a cell/row is in edit mode: ```html ... ``` ```typescript public onSorting(event: ISortingEventArgs) { + this.grid.endEdit(true); + // (event.owner as IgxGridComponent).endEdit(true); } ``` ## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) _[IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - [IgxDatePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - [IgxDatePickerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-date-picker-theme) - [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - [IgxCheckboxComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) - [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Column Data Types](column-types.md#default-template) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md new file mode 100644 index 000000000..f4c18b089 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-excel-style-filtering.md @@ -0,0 +1,905 @@ +--- +_tocName: Excel Style Filtering +_premium: true +--- +--- title: Excel Style Filtering in Angular Hierarchical Grid - Ignite UI for Angular _description: Learn how to configure Excel filtering in Angular Hierarchical Grid. You can enable/disable various options and customize the Excel style filter menu the way you want. _keywords: excel like filter, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/excel-style-filtering --- # Excel Filtering in Angular Hierarchical Grid The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Hierarchical Grid. ## Angular Hierarchical Grid Excel Style Filtering Example ```typescript +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-excel-style-filtering-sample-1', + styleUrls: ['./hierarchical-grid-excel-style-filtering-sample-1.component.scss'], + templateUrl: 'hierarchical-grid-excel-style-filtering-sample-1.component.html', + imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridExcelStyleFilteringSample1Component implements OnInit { + + @ViewChild('hierarchicalGrid', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + + public size = 'large'; + public sizes: any[]; + + constructor() { + this.localdata = SINGERS; + } + public ngOnInit(): void { + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + } + + public formatter = (a) => a; + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event) { + this.size = this.sizes[event.index].label; + this.hierarchicalGrid.reflow(); + } +} +``` +```html +
+
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + margin: 16px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.density-chooser { + margin-bottom: 16px; +} + +igx-buttongroup{ + display: block; + width: 500px; +} +```
## Usage To turn on the grid excel filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowFiltering) should be set to `true` and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filterMode) should be set to `excelStyleFilter`. ```html ``` ## Interactions In order to open the filter menu for a particular column, the Angular filter icon in the header should be clicked. Additionally, you can use the `Ctrl + Shift + L` combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on. If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press `Enter`. The filtering applied through the list items creates filter expressions with `equals` operator and the logic operator between the expressions is [`OR`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#or). If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option `Add current selection to filter`. If you want to clear the filter, you can check the `Select All` option and then click the Apply button. To apply a filter with different expressions, you can click the **Text filter**, which will open a sub menu with all available filter operators for the particular column. Selecting one of them will open the custom filter dialog, where you can add as many expressions as you want with different filter and logic operators. There is also a clear button, which can clear the filter.
## Configure Menu Features Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: [`sortable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortable), [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected), [`disablePinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disablePinning), [`disableHiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disableHiding). ```html + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + ```
In the sample below 'Artist' column have all three features enabled, 'Debut' have all three disabled, 'Grammy Nominations' has only pinning and hiding.
```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-excel-style-filtering-sample-2', + styleUrls: ['./hierarchical-grid-excel-style-filtering-sample-2.component.scss'], + templateUrl: 'hierarchical-grid-excel-style-filtering-sample-2.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridExcelStyleFilteringSample2Component { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + margin: 16px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +```
## Templates If you want to further customize the Excel style filter menu without disabling the column features you could use custom templates. The Excel Style filter menu provides two directives for templating: - `IgxExcelStyleColumnOperationsTemplateDirective` - re-templates the area with all column operations like sorting, pinning, etc. - `IgxExcelStyleFilterOperationsTemplateDirective` - re-templates the area with all filter specific operations. You could either re-template only one of those areas or both of them. You could put any custom content inside those directives or you could use any of our built-in Excel style filtering components. The following code demonstrates how to define a custom Excel style filter menu using the [`igx-excel-style-header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleheadercomponent.html), [`igx-excel-style-sorting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesortingcomponent.html) and [`igx-excel-style-search`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesearchcomponent.html) components. ```html + + + + + + + + + + + + + + + ... + + + + + + + + + + + + + + + .... ``` You could also re-template the Excel style filtering icon in the column header using the `igxExcelStyleHeaderIcon` directive: ```html + + filter_alt + ```
```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-excel-style-filtering-sample-3', + styleUrls: ['./hierarchical-grid-excel-style-filtering-sample-3.component.scss'], + templateUrl: 'hierarchical-grid-excel-style-filtering-sample-3.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridExcelStyleFilteringSample3Component { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + + + + + + + filter_alt + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + margin: 16px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +``` Here is the full list of Excel style filtering components that you could use: - [`igx-excel-style-header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleheadercomponent.html) - [`igx-excel-style-sorting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesortingcomponent.html) - [`igx-excel-style-moving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylemovingcomponent.html) - [`igx-excel-style-pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylepinningcomponent.html) - [`igx-excel-style-hiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylehidingcomponent.html) - [`igx-excel-style-selecting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleselectingcomponent.html) - [`igx-excel-style-clear-filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleclearfilterscomponent.html) - [`igx-excel-style-conditional-filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleconditionalfiltercomponent.html) - [`igx-excel-style-search`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesearchcomponent.html)
## Unique Column Values Strategy The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the [`Hierarchical Grid Remote Data Operations`](remote-data-operations.md#unique-column-values-strategy) topic. ## Formatted Values Filtering Strategy By default, the Hierarchical Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { In order to do that you can use the [`FormattedValuesFilteringStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/formattedvaluesfilteringstrategy.html). } The following sample demonstrates how to format the numeric values of a column as strings and filter the Hierarchical Grid based on the string values: ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { FormattedValuesFilteringStrategy } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-formatted-filtering-strategy', + styleUrls: ['./hierarchical-grid-formatted-filtering-strategy.component.scss'], + templateUrl: 'hierarchical-grid-formatted-filtering-strategy.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridFormattedFilteringStrategyComponent { + + @ViewChild('hierarchicalGrid', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + public filterStrategy = new FormattedValuesFilteringStrategy(); + + constructor() { + this.localdata = SINGERS; + } + + public decadeFormatter = (value: number) => Math.floor(value / 10) * 10 + 's'; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + margin: 16px; +} +``` >[!NOTE] >The formatted values filtering strategy won't work correctly if you have more than one column bound to the same field from your data and one of the columns has a formatter. ## External Excel Style filtering As you see at the demos above the default appearance of the Excel Style filtering dialog is inside the Hierarchical Grid. So this dialog is only visible when configuring the filters. There is a way to make that dialog stay always visible - it can be used outside of the grid as a standalone component. In the demo below, the Excel style filtering is declared separately of the Hierarchical Grid. ### Demo ```typescript +import { ChangeDetectionStrategy, Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; + +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-hierarchical-grid-external-excel-style-filtering', + templateUrl: './hierarchical-grid-external-excel-style-filtering.component.html', + styleUrls: ['./hierarchical-grid-external-excel-style-filtering.component.scss'], + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HGridExternalExcelStyleFilteringComponent implements AfterViewInit{ + + @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) + public hgrid: IgxHierarchicalGridComponent; + + public columns: any[]; + public localdata: any[]; + + constructor() { + this.localdata = SINGERS; + } + + public ngAfterViewInit() { + this.columns = this.hgrid.columnList.filter(c => c.filterable); + } +} +``` +```html +
+
+ + + @for (c of columns; track c) { + + {{c.field}} + + } + + + + +
+ + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; + display: flex; + flex-flow: row; + column-gap: 5px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.flex-column { + display: flex; + flex-flow: column; + height: 645px; + margin-left: 1px; +} + +.igSelect { + margin-left: 1px; +} +```
### Usage In order to configure the Excel style filtering component, you should set its [`column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridexcelstylefilteringcomponent.html#column) property to one of the Hierarchical Grid's columns. In the sample above, we have bound the [`column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridexcelstylefilteringcomponent.html#column) property to the value of an IgxSelectComponent that displays the Hierarchical Grid's columns. ```html + + + {{ c.field }} + ``` ## External Outlet The Hierarchical Grid's [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) creates separate stacking context for each grid in the DOM. This ensures that all descendant elements of the grid will render as intended, without overlapping one another. However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same `z-index` (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the [`outlet`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#outlet) property to an external outlet directive which allows the overlay elements to always appear on top. ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-external-outlet', + styleUrls: ['./hierarchical-grid-external-outlet-sample.component.scss'], + templateUrl: 'hierarchical-grid-external-outlet-sample.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxOverlayOutletDirective] +}) + +export class HierarchicalGridExternalOutletComponent implements OnInit { + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = SINGERS; + + } +} +``` +```html +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} +``` ## Styling To get started with styling the Excel Style Filtering dialog, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` The Excel Style Filtering dialog takes its background color from the grid's theme, using the `filtering-row-background` parameter. Additionally, there are specific Excel Style Filtering parameters available for customizing the text color of elements within the dialog. To change the overall style of the dialog, you need to create a custom theme. ```scss $custom-grid: grid-theme( + $filtering-row-background: #ffcd0f, + $excel-filtering-header-foreground: #292826, + $excel-filtering-subheader-foreground: #292826, + $excel-filtering-actions-foreground: #006400, + $excel-filtering-actions-hover-foreground: #ffcd0f, + $excel-filtering-actions-disabled-foreground: #9e9e9e ); ``` We obviously have a lot more components inside the excel like filtering dialog, such as buttons, checkboxes, a list and even a drop-down. In order to style them, we need to create a separate theme for each one: ```scss $custom-button: contained-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); $flat-custom-button: flat-button-theme( + $foreground: #ffcd0f, ); $custom-checkbox: checkbox-theme( + $empty-color: #292826, + $fill-color: #292826, + $tick-color: #ffcd0f, + $label-color: #292826 ); $custom-drop-down: drop-down-theme( + $background-color: #ffcd0f, + $item-text-color: #292826, + $hover-item-background: #292826, + $hover-item-text-color: #ffcd0f ); $custom-input-group: input-group-theme( + $box-background: #ffcd0f, + $idle-text-color: #292826, + $focused-text-color: #292826, + $filled-text-color: #292826 ); $custom-list: list-theme( + $background: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed some of the parameters for the listed components, but the [`button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme), [`checkbox-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme), [`drop-down-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme), [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme), [`list-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-list-theme) themes provide way more parameters to control their respective styling. The last step is to **include** each component’s custom theme. We will also set the color property for the input's placeholder. ```scss :host { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] >We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss :host { + ::ng-deep { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($flat-custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } + } } ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-excel-style-filtering-style', + styleUrls: ['./hierarchical-grid-excel-style-filtering-style.component.scss'], + templateUrl: 'hierarchical-grid-excel-style-filtering-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HGridExcelStyleFilteringStyleComponent { + + @ViewChild('hierarchicalGrid', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + + constructor() { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$black: #292826; + +$custom-grid: grid-theme( + $filtering-row-background: $yellow +); + +$custom-flat-button: flat-button-theme( + $background: $yellow, + $foreground: $black, + $hover-background: $black, + $hover-foreground: $yellow +); + +$custom-contained-button: contained-button-theme( + $background: $black, + $foreground: $yellow, + $hover-background: $black, + $hover-foreground: $yellow +); + +$custom-button-group: button-group-theme( + $item-background: $yellow, + $item-text-color: $black, + $item-hover-background: $black, + $item-hover-text-color: $yellow +); + +$custom-input-group: input-group-theme( + $box-background: $yellow, + $idle-text-color: $black, + $focused-text-color: $black, + $filled-text-color: $black +); + +$custom-list: list-theme( + $background: $yellow +); + +$custom-checkbox: checkbox-theme( + $empty-color: $black, + $fill-color: $black, + $tick-color: $yellow, + $label-color: $black +); + +$custom-drop-down: drop-down-theme( + $background-color: $yellow, + $selected-item-background: lighten($black, 10%), + $selected-focus-item-background: lighten($black, 15%), + $item-text-color: $black, + $hover-item-background: $black, + $hover-item-text-color: $yellow +); + +:host ::ng-deep { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + @include tokens($custom-input-group); + @include tokens($custom-checkbox); + @include tokens($custom-list); + @include tokens($custom-flat-button); + @include tokens($custom-button-group); + + .igx-excel-filter__apply { + @include tokens($custom-contained-button); + } +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md new file mode 100644 index 000000000..84894ff78 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-export-excel.md @@ -0,0 +1,377 @@ +--- +_tocName: Export services +_premium: true +--- +--- title: Angular Hierarchical Grid Export to Excel and PDF - Ignite UI for Angular _description: With Ignite UI Excel and PDF Exporters you can make client exports more convenient & simpler. These formats allow features like filtering, sorting, etc _keywords: data export, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/export-excel --- # Angular Hierarchical Grid Export to Excel and PDF Service @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {

Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxHierarchicalGrid in seconds. Inject the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the respective [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export)/[`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#export) method, and the component handles the rest—from honoring filters and sorting to shaping the output format.

} @@if (igxName === 'IgxHierarchicalGrid' || igxName === 'IgxPivotGrid') {

The Ignite UI Excel and PDF Exporter services treat the IgxHierarchicalGrid exactly like your users see it on screen—complete with hierarchical layouts and summaries. Inject the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the appropriate [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export)/[`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#export) method, and let the service generate the final document.

} The sections below walk through setup, usage patterns, and tips for tailoring each export so that your users receive data that is ready to consume, no matter which file type they prefer.
## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Hierarchical Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { Singer, SINGERS } from '../../data/artistData'; + +@Component({ + selector: 'app-hierarchical-grid-excel-export-sample', + styleUrls: ['hierarchical-grid-excel-export.sample.scss'], + templateUrl: 'hierarchical-grid-excel-export.sample.html', + imports: [IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxRowIslandComponent] +}) +export class HGridExcelExportSampleComponent { + @ViewChild('hierarchicalGrid', { static: true }) public igxGrid1: IgxHierarchicalGridComponent; + + public data: Singer[]; + public col: IgxColumnComponent; + public pWidth: string; + public nWidth: string; + + constructor() { + this.data = SINGERS; + } + + public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; + } + + public formatter = (a) => a; +} +```
## Exporting Hierarchical Grid's Data Getting the exporters into your project takes only a few lines of code. Follow these steps and you will have reusable services that can create either Excel or PDF outputs on demand: 1. Import the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) and/or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) in your root module. 2. Inject whichever exporter you need and call its `export` method when the user requests a file. ```typescript // component.ts import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core'; // import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package ... private excelExportService = inject(IgxExcelExporterService); private pdfExportService = inject(IgxPdfExporterService); ``` > [!Note] > In v12.2.1 and later, `IgxExcelExporterService` is provided in root and does not need to be registered in the `providers` array. The PDF exporter was introduced in later versions and is available as an injectable service without any additional configuration. To initiate an export process you may use the handler of a button in your component's template. ```html ``` You may access either exporter service by defining it as a constructor dependency and letting Angular provide an instance. Calling the shared [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export) method initiates the download while automatically respecting the component state, selected rows, and formatting rules. Here is the code which will execute both export processes in the component's typescript file: ```typescript // component.ts import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core'; import { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; @ViewChild('hierarchicalGrid') public hierarchicalGrid: IgxHierarchicalGridComponent; private excelExportService = inject(IgxExcelExporterService); private pdfExportService = inject(IgxPdfExporterService); public exportButtonHandler() { + this.excelExportService.export(this.hierarchicalGrid, new IgxExcelExporterOptions('ExportedDataFile')); } public exportPdfButtonHandler() { + this.pdfExportService.export(this.hierarchicalGrid, new IgxPdfExporterOptions('ExportedDataFile')); } ``` Once wired up, pressing the respective buttons downloads files named `ExportedDataFile.xlsx` or `ExportedDataFile.pdf` populated with the current Hierarchical Grid view. You can swap in customer-friendly file names, append timestamps, or surface a success toast so users know their export has completed. ## Export All Data Large, remote datasets often load page-by-page or on demand, which means the Hierarchical Grid might not have every record available when the user clicks **Export**. To guarantee a complete workbook, hydrate the exporter with the full data collection before starting the process. The `exportData` helper bypasses the component and works directly against plain objects, so you can reuse the same routine for scheduled exports or admin-only downloads. ```ts public exportButtonHandler() { + this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile')); } ``` > [!TIP] > When offering PDF downloads for remote data, consider fetching the complete dataset first and then calling `export` so the document mirrors the user's expectations. @@if (igxName === 'IgxGrid') { ## Export Grouped Data Grouping is a popular way to summarize customer segments, product categories, or financial periods before sharing the results. The exporter preserves the exact grouping hierarchy that is currently applied to the Hierarchical Grid, so your recipients see the same breakdown you do in the browser. Simply group by one or more columns and trigger the export—no extra configuration is required. If you need flat data in the exported file, clear the grouping prior to calling `export` or handle the `rowExporting` event to reshape the output. Example: ```typescript +import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { INVOICE_DATA } from '../data/invoiceData'; + + +@Component({ + selector: 'app-excel-export-sample-1', + styleUrls: ['./excel-export-sample-1.component.scss'], + templateUrl: './excel-export-sample-1.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] +}) +export class ExcelExportSample1Component implements OnInit { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('igxGrid1', { static: true }) public igxGrid1: IgxGridComponent; + + public data = []; + public groupExpressions: ISortingExpression[]; + public columns: { dataType: GridColumnDataType, field: string, width: string, groupable: boolean, hidden?: boolean }[] = [ + { dataType: GridColumnDataType.String, field: 'ShipCountry', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipCity', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipAddress', width: '150', groupable: true}, + { dataType: GridColumnDataType.String, field: 'PostalCode', width: '150', groupable: true }, + { dataType: GridColumnDataType.Date, field: 'OrderDate', width: '150', groupable: true }, + { dataType: GridColumnDataType.Number, field: 'Quantity', width: '150', groupable: true } + ]; + + public ngOnInit(): void { + this.data = INVOICE_DATA; + this.groupExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry' }, + { dir: SortingDirection.Asc, fieldName: 'ShipCity' } + ]; + } + + /* + The following code demonstrates how to attach event handlers to exporter specific events + and also how to customize the column export process. + this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } + }); + this.excelExportService.rowExporting.subscribe((args: IRowExportingEventArgs) => { + }); + this.excelExportService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { + }); + */ +} +``` +```html +

+ + + + + + + + + @for (c of columns; track c) { + + + } + +

+``` +```scss +.grid__wrapper { + padding-top: 16px; + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; +} + +.exportButton { + margin-top: 5px; +} +``` } ## Export Multi Column Headers Grid Dashboards often rely on [multi-column headers](multi-column-headers.md) to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the [exporter option](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html) [ignoreMultiColumnHeaders](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html#ignoremulticolumnheaders) flag to `true` and the output will include only the leaf headers. > [!NOTE] > The exported Hierarchical Grid will not be formatted as a table, since Excel tables do not support multiple row headers. @@if (igxName === 'IgxHierarchicalGrid') { > [!NOTE] > The exported expansion state of the multi-column headers in the row islands will always be in its initial state. } @@if (igxName === 'IgxGrid') { ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-multi-column-headers-export', + styleUrls: ['multi-column-headers-export.component.scss'], + templateUrl: 'multi-column-headers-export.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class GridMultiColumnHeadersExportComponent { + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data = DATA; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` } @@if (igxName === 'IgxTreeGrid') { ```typescript +import { Component } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-tree-grid-multi-column-headers-export-sample', + styleUrls: ['./tree-grid-multi-column-headers-export.component.scss'], + templateUrl: './tree-grid-multi-column-headers-export.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class TreeGridMultiColumnHeadersExportComponent { + public data = generateEmployeeDetailedFlatData(); + public selectionMode: GridSelectionMode = 'none'; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` } @@if (igxName === 'IgxHierarchicalGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { HIERARCHICAL_DATA } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-multi-column-export', + styleUrls: ['./hierarchical-grid-multi-column-export.component.scss'], + templateUrl: 'hierarchical-grid-multi-column-export.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnGroupComponent, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridMultiColumnHeadersExportComponent implements OnInit { + public localdata = []; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } + + public ngOnInit(): void { + this.localdata = HIERARCHICAL_DATA; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 16px; +} +``` } ## Export Grid with Frozen Column Headers Long sheets can become hard to read once the header row scrolls out of view. Enabling frozen headers keeps key context—like "Customer" or "Invoice Total"—visible at the top of the worksheet while your users explore the data further down. Toggle the [exporter option](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html) [freezeHeaders](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html#freezeHeaders) flag to `true` before calling `export` and the service will handle the rest. ```typescript public exportButtonHandler() { + const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile'); + exporterOptions.freezeHeaders = true; + this.excelExportService.export(this.grid, exporterOptions); } ``` PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file. ## Customizing the Exported Content Most teams tailor exports before sharing them: hiding internal-use columns, renaming headers, or skipping rows that only apply to administrators. Both exporter services expose events that let you intercept every row or column and decide how it should appear in the file. Subscribe to [`columnExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#columnexporting) and [`rowExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#rowexporting) to make last-minute adjustments—set `cancel = true` to omit an item or tweak the event arguments to update values on the fly. The following example will exclude a column from the export if its header is "Age" and if its index is 1: ```typescript // component.ts this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } }); this.excelExportService.export(this.hierarchicalGrid, new IgxExcelExporterOptions('ExportedDataFile')); ``` When you are exporting data from the Hierarchical Grid component, the services automatically respect sorting, filtering, summaries, and hidden columns so the file reflects what the user currently sees. Need the full dataset instead? Toggle the relevant flags on [`IgxExcelExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) or [`IgxPdfExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) to include filtered rows, hidden columns, or custom metadata. ## Known Limitations Before shipping exports to production users, review the following platform constraints so you can set expectations and provide helpful guidance within your app. |Limitation|Description| |--- |--- | |Hierarchy levels|The exporter supports up to 8 levels of hierarchy. If you need deeper structures, flatten the data or export subsets to keep the file readable.| |Max worksheet size|The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns. Consider slicing extremely large exports by date range or segment to stay within these limits.| |Exporting pinned columns|In the exported Excel file, pinned columns are not frozen but preserve their order. If freezing is critical, adjust the sheet manually after export.| |Cell Styling|The Excel exporter service does not support exporting a custom style applied directly to a cell component. In such scenarios we recommend using the richer [Excel Library](../excel-library.md) for fine-grained formatting.| |Wide PDF layouts|Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.| ## API References The Excel and PDF Exporter services have a few more APIs to explore, which are listed below. - [IgxExcelExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) - [IgxExcelExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) - [IgxPdfExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) - [IgxPdfExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) Additional components that were used: - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
## Additional Resources
Our community is active and always welcoming to new ideas. The links below connect you with samples, community answers, and the engineering team. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md new file mode 100644 index 000000000..98ccec9cf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-filtering.md @@ -0,0 +1,611 @@ +--- +_tocName: Filtering +--- +--- title: Angular Hierarchical Grid Filter - Ignite UI for Angular _description: Start using angular filter to return specific data with Ignite UI for Angular. Check the advanced filtering options, including data-type Excel-style filtering. _keywords: angular filter, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/filtering --- # Angular Hierarchical Grid Filtering IgniteUI for [Angular Hierarchical Grid component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) provides three different filtering types - Quick filtering, [Excel style filtering](excel-style-filtering.md) and [Advanced filtering](advanced-filtering.md) which enable you to display only the records that meet specified criteria. The Material UI grid component in Ignite UI provides angular filter capabilities and extensive filtering API through the Data Container to which the Hierarchical Grid is bound. ## Angular Hierarchical Grid Filtering Example The sample below demonstrates Hierarchical Grid's **Quick filtering** user experience. ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-filtering', + styleUrls: ['./hierarchical-grid-filtering.component.scss'], + templateUrl: 'hierarchical-grid-filtering.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridFilteringSampleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +```
## Setup In order to specify if filtering is enabled and which filtering mode should be used, the Hierarchical Grid exposes the following boolean properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable). Property **[allowFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowfiltering)** enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled; /default value/ - **true** - the filtering for the corresponding grid will be enabled; Property **[allowAdvancedFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowAdvancedFiltering)** enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled; /default value/ - **true** - the advanced filtering for the corresponding grid will be enabled; Property **[filterMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filterMode)** enables you to specify the following options: - **quickFilter** - a simplistic filtering UI; /default value/ - **excelStyleFilter** - an Excel-like filtering UI; Property **[filterable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable)** enables you to specify the following options: - **true** - the filtering for the corresponding column will be enabled; /default value/ - **false** - the filtering for the corresponding column will be disabled; ```html + + ``` To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowAdvancedFiltering) input properties to `true`. ```html ``` >[!NOTE] >You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the Hierarchical Grid. Both filtering user interfaces will work independently of one another. The final filtered result in the Hierarchical Grid is the intersection between the results of the two filters. ## Interaction In order to open the filter row for a particular column, the 'Filter' chip below its header should be clicked. To add conditions you should choose filter operand using the dropdown on the left of the input and enter value. For `number` and `date` columns 'Equals' is selected by default, for `string` - 'Contains' and for `boolean` - 'All'. Pressing 'Enter' confirms the condition and you are now able to add another one. There is a dropdown, between 'condition' chips, which determines the logical operator between them, 'AND' is selected by default. To remove a condition you can click the 'X' button of the chip, and to edit it you should select the chip and the input will be populated with the chip's data. While filter row is opened you can click on any filterable column's header in order to select it and to be able to add filter conditions for it. While some filtering conditions have been applied to a column, and the filter row is closed, you can either remove the conditions by clicking the chip's close button, or you can open the filter row by selecting any of the chips. When there is not enough space to show all the conditions, a filter icon is shown with a badge that indicates how many more conditions there are. It can also be clicked in order to open the filter row. ## Usage There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The Hierarchical Grid currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) of the column, the correct set of [**filtering operations**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) is loaded inside the filter UI dropdown. Additionally, you can set the [`ignoreCase`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html) and the initial [`condition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html#condition) properties. Filtering feature is enabled for the Hierarchical Grid component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#allowFiltering) input to `true`. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filterMode) is `quickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the [`filterable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable) input to `false`. ```html + + ``` > [!NOTE] > If values of type `string` are used by a column of dataType `Date`, the Hierarchical Grid won't parse them to `Date` objects and using filtering conditions won't be possible. If you want to use `string` objects, additional logic should be implemented on the application level, in order to parse the values to `Date` objects. You can filter any column or a combination of columns through the Hierarchical Grid API. The Hierarchical Grid exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filterglobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#clearFilter). - [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filter) - filter a single column or a combination of columns. There are five filtering operand classes exposed: - [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html): this is a base filtering operand, which can be inherited when defining custom filtering conditions. - [`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html) defines all default filtering conditions for `boolean` type. - [`IgxNumberFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumberfilteringoperand.html) defines all default filtering conditions for `numeric` type. - [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html) defines all default filtering conditions for `string` type. - [`IgxDateFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatefilteringoperand.html) defines all default filtering conditions for `Date` type. ```typescript // Single column filtering // Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case this.hierarchicalGrid.filter('ProductName', 'myproduct', IgxStringFilteringOperand.instance().condition('contains'), true); ``` The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions. > [!NOTE] > The filtering operation **DOES NOT** change the underlying data source of the Hierarchical Grid. ```typescript // Multi column filtering const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName'); const productExpression = { + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'ProductName', + ignoreCase: true, + searchVal: 'ch' }; productFilteringExpressionsTree.filteringOperands.push(productExpression); gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); const priceFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'Price'); const priceExpression = { + condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), + fieldName: 'UnitPrice', + ignoreCase: true, + searchVal: 20 }; priceFilteringExpressionsTree.filteringOperands.push(priceExpression); gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree); this.hierarchicalGrid.filteringExpressionsTree = gridFilteringExpressionsTree; ``` - [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Hierarchical Grid's columns. ```typescript // Filter all cells for a value which contains `myproduct` this.hierarchicalGrid.filteringLogic = FilteringLogic.Or; this.hierarchicalGrid.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false); ``` - [`clearFilter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. ```typescript // Remove the filtering state from the ProductName column this.hierarchicalGrid.clearFilter('ProductName'); // Clears the filtering state from all columns this.hierarchicalGrid.clearFilter(); ``` ## Initial filtered state To set the initial filtering state of the Hierarchical Grid, set the [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filteringExpressionsTree) property to an array of [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html) for each column to be filtered. ```typescript constructor(private cdr: ChangeDetectorRef) { } public ngAfterViewInit() { + const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName'); + const productExpression = { + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'ProductName', + ignoreCase: true, + searchVal: 'c' + }; + productFilteringExpressionsTree.filteringOperands.push(productExpression); + gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); + + this.hierarchicalGrid.filteringExpressionsTree = gridFilteringExpressionsTree; + this.cdr.detectChanges(); } ``` ### Filtering logic The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#filteringlogic) property of the Hierarchical Grid controls how filtering multiple columns will resolve in the Hierarchical Grid. You can change it at any time through the Hierarchical Grid API, or through the Hierarchical Grid input property. ```typescript import { FilteringLogic } from 'igniteui-angular/grids/core'; // import { FilteringLogic } from '@infragistics/igniteui-angular'; for licensed package ... this.hierarchicalGrid.filteringLogic = FilteringLogic.OR; ``` The default value of [`AND`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#and) returns only the rows that match all the currently applied filtering expressions. Following the example above, a row will be returned when both the `ProductName` cell value contains `myproduct` and the `Price` cell value is greater than 55. When set to [`OR`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#or), a row will be returned when either the `ProductName` cell value contains `myproduct` or the `Price` cell value is greater than 55.
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ## Remote Filtering The Hierarchical Grid supports remote filtering, which is demonstrated in the [`Hierarchical Grid Remote Data Operations`](remote-data-operations.md) topic.
} ## Custom Filtering Operands You can customize the filtering menu by adding, removing or modifying the filtering operands. By default, the filtering menu contains certain operands based on the column’s data type ([`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html), [`IgxDateFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatefilteringoperand.html), [`IgxNumberFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumberfilteringoperand.html) and [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html)). You can extend these classes or their base class [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) to change the filtering menu items’ behavior. In the sample below, inspect the "Product Name" and "Discontinued" columns filters menus. For the "Discontinued" column filter, we have limited the number of operands to All, True and False. For the "Product Name" column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands. To do that, extend the [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html) and [`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html), modify the operations and their logic, and set the column [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters) input to the new operands. ```typescript // grid-custom-filtering.component.ts export class GridCustomFilteringComponent { + public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance(); + public booleanFilteringOperand = BooleanFilteringOperand.instance(); } export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand { + private constructor() { + super(); + const customOperations = [ + { + iconName: 'contains', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) !== -1; + }, + name: 'Contains (case sensitive)' + }, + { + iconName: 'does_not_contain', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) === -1; + }, + name: 'Does Not Contain (case sensitive)' + } + ]; + + const emptyOperators = [ + // 'Empty' + this.operations[6], + // 'Not Empty' + this.operations[7] + ]; + + this.operations = customOperations.concat(emptyOperators); + } } export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + private constructor() { + super(); + this.operations = [ + // 'All' + this.operations[0], + // 'TRUE' + this.operations[1], + // 'FALSE' + this.operations[2] + ]; + } } ``` ```html + + + + True + False + + ``` ```typescript +import { Component } from '@angular/core'; +import { IFilteringOperation, IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-hierarchical-grid-custom-filtering', + styleUrls: ['./hierarchical-grid-custom-filtering.component.scss'], + templateUrl: 'hierarchical-grid-custom-filtering.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridCustomFilteringSampleComponent { + public localdata; + public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance(); + public booleanFilteringOperand = BooleanFilteringOperand.instance(); + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} + +export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand { + private constructor() { + super(); + const customOperations: IFilteringOperation[] = [ + { + iconName: 'filter_contains', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) !== -1; + }, + name: 'Contains (case sensitive)' + }, + { + iconName: 'filter_does_not_contain', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) === -1; + }, + name: 'Does Not Contain (case sensitive)' + } + ]; + + const emptyOperators = [ + // 'Empty' + this.operations[6], + // 'Not Empty' + this.operations[7] + ]; + + this.operations = customOperations.concat(emptyOperators); + } +} + +export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + private constructor() { + super(); + this.operations = [ + // 'All' + this.operations[0], + // 'TRUE' + this.operations[1], + // 'FALSE' + this.operations[2] + ]; + } +} +``` +```html +
+ + + + + @if (val) { + True + } + @if (!val) { + False + } + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` ## Re-templating filter cell You can add a template marked with `igxFilterCellTemplate` in order to retemplate the filter cell. In the sample below, an input is added for the string columns and IgxDatePicker for the date column. When the user types or selects a value, a filter with contains operator for string columns and equals operator for date columns, is applied using grid's public API. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnType, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxPickerClearComponent, IgxPickerToggleComponent, IgxStringFilteringOperand, OverlaySettings } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxFilterCellTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-hierarchical-grid-filtering-template', + styleUrls: ['./hierarchical-grid-filtering-template.component.scss'], + templateUrl: 'hierarchical-grid-filtering-template.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent] +}) + +export class HGridFilteringTemplateSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + public overlaySettings: OverlaySettings; + public displayDateFormat = 'MMM d, y'; + + private _filterValues = new Map(); + + constructor() { + this.localdata = SINGERS; + } + public ngOnInit(): void { + this.overlaySettings = { + outlet: this.hierarchicalGrid + }; + } + + public formatter = (a) => a; + + public getFilterValue(column: ColumnType): any { + return this._filterValues.has(column) ? this._filterValues.get(column) : null; + } + + public onKeyDown(event: KeyboardEvent) { + event.stopImmediatePropagation(); + } + + public onInput(input: any, column: any) { + this._filterValues.set(column, input.value); + + if (input.value === '') { + column.grid.clearFilter(column.field); + return; + } + + let operand = null; + switch (column.dataType) { + case GridColumnDataType.Number: + operand = IgxNumberFilteringOperand.instance().condition('equals'); + break; + default: + operand = IgxStringFilteringOperand.instance().condition('contains'); + } + column.grid.filter(column.field, + this.transformValue(input.value, column), operand, column.filteringIgnoreCase); + } + + public clearInput(column: any) { + this._filterValues.delete(column); + column.grid.clearFilter(column.field); + } + + public onClick(inputGroup) { + if (!inputGroup.isFocused) { + inputGroup.input.focus(); + } + } + + public onDateSelected(event, column: any) { + if (!event) { + this.clearInput(column); + return; + } + + this._filterValues.set(column, event); + column.grid.filter(column.field, event, IgxDateFilteringOperand.instance().condition('equals'), + column.filteringIgnoreCase); + } + + private transformValue(value: any, column: ColumnType): any { + if (column.dataType === GridColumnDataType.Number) { + value = parseFloat(value); + } + + return value; + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + search + + + @if (input.value || input.value === '0') { + + clear + + } + +
+ + +
+ + + search + + @if (picker.value) { + + clear + + } + +
+ +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.filter-cell { + flex-grow: 1; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +igx-input-group, +igx-date-picker { + --ig-size: var(--ig-size-small); +} +``` ## Styling To get started with styling the filtering row, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$filtering-row-text-color`, `$filtering-row-background`, `$filtering-header-text-color` and the `$filtering-header-background` parameters. ```scss $custom-grid: grid-theme( + $filtering-row-text-color: #292826, + $filtering-row-background: #ffcd0f, + $filtering-header-text-color: #292826, + $filtering-header-background: #ffcd0f ); ``` As seen, the `grid-theme` only controls colors for the filtering row and the respective column header that is being filtered. We obviously have a lot more components inside the filtering row, such as an input group, chips, buttons and others. In order to style them, we need to create a separate theme for each one, so let's create a new [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#input-group-theme) and a new [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#flat-button-theme): ```scss $dark-input-group: input-group-theme( + $box-background: #ffcd0f, + $idle-text-color: #292826, + $focused-text-color: #292826, + $filled-text-color: #292826 ); $dark-button: flat-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed some of the parameters for the input group and the button, but the [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) and the [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme) provide way more parameters to control their respective styling. The last step is to **include** the component mixins, each with its respective theme. We will also set the color property for the input's placeholder. ```scss :host { @include tokens($custom-grid); + + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] >We include the created **flat-button-theme** and **input-group-theme** within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss :host { + ::ng-deep { + @include tokens($custom-grid); + + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group) + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-filtering-style', + styleUrls: ['./hierarchical-grid-filtering-style.component.scss'], + templateUrl: './hierarchical-grid-filtering-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HierarchicalGridFilteringStyleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$bg: #292826; +$gray: #404040; + +$custom-grid: grid-theme( + $filtering-row-text-color: $bg, + $filtering-row-background: $yellow, + $filtering-header-text-color: $bg, + $filtering-header-background: $yellow +); + +$dark-input-group: input-group-theme( + $box-background: $yellow, + $idle-text-color: $bg, + $focused-text-color: $bg, + $filled-text-color: $bg +); + +$dark-button: flat-button-theme( + $foreground: $bg, +); + +:host ::ng-deep { + @include tokens($custom-grid); + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); + } +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## Known Limitations > [!NOTE] > Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox [issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665). ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md new file mode 100644 index 000000000..8c3159abe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-hierarchical-grid.md @@ -0,0 +1,655 @@ +--- +title: Angular Hierarchical Data Grid | Material Table | Ignite UI for Angular | Infragistics +_description: Learn how to use Ignite UI for Angular data grid, based on Angular Table and create a touch-responsive angular component with variety of angular events. +_keywords: angular hierarchical data grid, angular hierarchical table, angular hierarchical data grid component, angular hierarchical table component, angular UI components, igniteui for angular, infragistics +_license: commercial +_tocName: Hierarchical Grid +--- + +# Angular Hierarchical Data Grid Component Overview + +The Ignite UI for Angular Hierarchical Data Grid is used to display and manipulate hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel, CSV and PDF and more. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids, when more detailed information is needed. + +## Angular Hierarchical Data Grid Example + +In this angular grid example you can see how users can visualize hierarchical sets of data and use cell templating to add other visual components like [Sparkline](../charts/types/sparkline-chart.md). + +```typescript +import { Component, inject } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { RemoteValuesService } from '../../services/remoteValues.service'; +import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; +import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; + +@Component({ + selector: 'app-hierarchical-grid-resizing', + styleUrls: ['./hierarchical-grid-resizing.component.scss'], + templateUrl: 'hierarchical-grid-resizing.component.html', + providers: [RemoteValuesService], + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule, IgxRowIslandComponent] +}) + +export class HGridColumnResizingSampleComponent { + private remoteValuesService = inject(RemoteValuesService); + + public years = 10; + public localdata: any[]; + public col: IgxColumnComponent; + public pWidth: string; + public nWidth: string; + public singers: any[]; + + constructor() { + this.singers = this.remoteValuesService.getSingersData();; + for (const singer of this.singers) { + this.getSales(singer); + } + this.localdata = this.singers; + } + + public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; + } + + public getSales(singer: any): any { + singer['Sales'] = this.getSalesData(10); + } + + public getSalesData(years?: number): any[] { + if (years === undefined) { + years = 20; + } + const sales: any[] = []; + for (let y = 0; y < years; y++) { + const value = this.getRandomNumber(0, 1000); + // eslint-disable-next-line @typescript-eslint/naming-convention + sales.push({Copies: value, Year: y}); + } + return sales; + } + + public getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use '../../../variables' as *; + +.photo { + vertical-align: middle; + max-height: rem(62px); +} +.cell__inner_2 { + margin: rem(1px) +} + +.grid__wrapper{ + padding: rem(16px); +} +``` + +
+ +## Getting Started with Ignite UI for Angular Hierarchical Data Grid + +>[!NOTE] +>**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**. + +To get started with the Ignite UI for Angular Hierarchical Data Grid component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. + +The next step is to import the `IgxHierarchicalGridModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +import { IgxHierarchicalGridModule } from 'igniteui-angular/grids/hierarchical-grid'; +// import { IgxHierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxHierarchicalGridModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxHierarchicalGridComponent` as a standalone dependency, or use the [`IGX_HIERARCHICAL_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/hierarchical-grid/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid'; +// import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + + + + + + + + + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES] + /* or imports: [IgxHierarchicalGridComponent, IgxRowIslandComponent] */ +}) +export class HomeComponent { + public singers: Artist []; +} +``` + +Now that you have the Ignite UI for Angular Hierarchical Grid module or directives imported, you can start using the `igx-hierarchical-grid` component. + +## Using the Angular Hierarchical Data Grid + +### Data Binding + +`igx-hierarchical-grid` derives from `igx-grid` and shares most of its functionality. The main difference is that it allows multiple levels of hierarchy to be defined. They are configured through a separate tag within the definition of `igx-hierarchical-grid`, called `igx-row-island`. The `igx-row-island` component defines the configuration for each child grid for the particular level. Multiple row islands per level are also supported. +The Hierarchical Grid supports two ways of binding to data: + +### Using hierarchical data + +If the application loads the whole hierarchical data as an array of objects referencing children arrays of objects, then the Hierarchical Grid can be configured to read it and bind to it automatically. Here is an example of a properly structured hierarchical data source: + +```javascript +export const singers = [{ + "Artist": "Naomí Yepes", + "Photo": "assets/images/hgrid/naomi.png", + "Debut": "2011", + "Grammy Nominations": 6, + "Grammy Awards": 0, + "Tours": [{ + "Tour": "Faithful Tour", + "Started on": "Sep-12", + "Location": "Worldwide", + "Headliner": "NO", + "Toured by": "Naomí Yepes" + }], + "Albums": [{ + "Album": "Dream Driven", + "Launch Date": new Date("August 25, 2014"), + "Billboard Review": "81", + "US Billboard 200": "1", + "Artist": "Naomí Yepes", + "Songs": [{ + "No.": "1", + "Title": "Intro", + "Released": "*", + "Genre": "*", + "Album": "Dream Driven" + }] + }] +}]; +``` + +Each `igx-row-island` should specify the key of the property that holds the children data. + +```html + + + + + + + + +``` + +> [!NOTE] +> Note that instead of `data` the user configures only the `key` that the `igx-hierarchical-grid` needs to read to set the data automatically. + +### Using Load-On-Demand + +Most applications are designed to load as little data as possible initially, which results in faster load times. In such cases `igx-hierarchical-grid` may be configured to allow user-created services to feed it with data on demand. The following configuration uses a special `@Output` and a newly introduced loading-in-progress template to provide a fully-featured load-on-demand. + +```html + + + + + + + + +``` + +```typescript +// hierarchicalGridSample.component.ts + +@Component({...}) +export class HierarchicalGridLoDSampleComponent implements AfterViewInit { + @ViewChild("hGrid") + public hGrid: IgxHierarchicalGridComponent; + + constructor(private remoteService: RemoteLoDService) { } + + public ngAfterViewInit() { + this.hGrid.isLoading = true; + this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => { + this.hGrid.isLoading = false; + this.hGrid.data = data; + this.hGrid.cdr.detectChanges(); + }); + } + + public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) { + const dataState = { + key: event.owner.key, + parentID: event.parentID, + parentKey: _parentKey, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + } + ); + } +} +``` + +```typescript +// remote-load-on-demand.service.ts + +@Injectable() +export class RemoteLoDService { + public url = `https://services.odata.org/V4/Northwind/Northwind.svc/`; + + constructor(private http: HttpClient) { } + + public getData(dataState?: any): Observable { + return this.http.get(this.buildUrl(dataState)).pipe( + map((response) => response["value"]) + ); + } + + public buildUrl(dataState) { + let qS = ""; + if (dataState) { + qS += `${dataState.key}?`; + + if (!dataState.rootLevel) { + if (typeof dataState.parentID === "string") { + qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`; + } else { + qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`; + } + } + } + return `${this.url}${qS}`; + } +} +``` + +## Hide/Show row expand indicators + +If you have a way to provide information whether a row has children prior to its expanding, you could use the [`hasChildrenKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#hasChildrenKey) input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed. + +```html + + ... + +``` + +Note that setting the [`hasChildrenKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#haschildrenkey) property is not required. In case you don't provide it, expansion indicators will be displayed for each row. + +Additionally if you wish to show/hide the header expand/collapse all indicator you can use the [showExpandAll](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#showExpandAll) property. +This UI is disabled by default for performance reasons and it is not recommended to enable it in grids with large data or grids with load on demand. + +## Features + +The grid features could be enabled and configured through the `igx-row-island` markup - they get applied for every grid that is created for it. Changing options at runtime through the row island instance changes them for each of the grids it has spawned. + +```html + + + + + + + + + + + + + + + + + +``` + +The following grid features work on a per grid level, which means that each grid instance manages them independently of the rest of the grids: + +- Sorting +- Filtering +- Paging +- Multi Column Headers +- Hiding +- Pinning +- Moving +- Summaries +- Search + +The Selection and Navigation features work globally for the whole `igx-hierarchical-grid` + +- Selection + Selection does not allow selected cells to be present for two different child grids at once. +- Navigation + When navigating up/down, if next/prev element is a child grid, navigation will continue in the related child grid, marking the related cell as selected and focused. If the child cell is outside the current visible view port it is scrolled into view so that selected cell is always visible. + +## Collapse All Button + +The Hierarchical Grid allows the users to conveniently collapse all its currently expanded rows by pressing the "Collapse All" button at its top left corner. Additionally, every child grid which contains other grids and is a Hierarchical Grid itself, also has such a button - this way the user is able to collapse only a given grid in the hierarchy: + +Collapse All Icon + +## Sizing + +See the [Grid Sizing](sizing.md) topic. + +## CRUD operations + +> [!NOTE] +> An important difference from the flat Data Grid is that each instance for a given row island has the same transaction service instance and accumulates the same transaction log. In order to enable the CRUD functionality users should inject the `IgxHierarchicalTransactionServiceFactory`. + +Calling CRUD API methods should still be done through each separate grid instance. + +Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) topic. + +## Styling + +The igxHierarchicalGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. + +In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling. + +### Importing global theme + +To begin the customization of the hierarchical grid, you need to import the `index` file, where all styling functions and mixins are located. + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +### Defining custom theme + +Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. + + >[!NOTE] + >There is no specific `sass` hierarchical grid function. + +```scss +$custom-theme: grid-theme( + $cell-active-border-color: #ffcd0f, + $cell-selected-background: #6f6f6f, + $row-hover-background: #f8e495, + $row-selected-background: #8d8d8d, + $header-background: #494949, + $header-text-color: #fff, + $expand-icon-color: #ffcd0f, + $expand-icon-hover-color: #e0b710, + $resize-line-color: #ffcd0f, + $row-highlight: #ffcd0f +); +``` + +>[!NOTE] +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. + +### Applying the custom theme + +The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: + +```scss +:host { + @include tokens($custom-theme); +} +``` + +In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). +This way, due to Angular's [`ViewEncapsulation`](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. + +### Demo + +```typescript +import { Component } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-styling', + styleUrls: ['./hierarchical-grid-styling.component.scss'], + templateUrl: 'hierarchical-grid-styling.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridStylingComponent { + public localdata; + public col: IgxColumnComponent; + public pWidth: string; + public nWidth: string; + + constructor() { + this.localdata = SINGERS; + } + + public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $cell-active-border-color: #ffcd0f, + $cell-selected-background: #6f6f6f, + $row-hover-background: #f8e495, + $row-selected-background: #8d8d8d, + $header-background: #494949, + $header-text-color: #fff, + $expand-icon-color: #ffcd0f, + $expand-icon-hover-color: #e0b710, + $resize-line-color: #ffcd0f, + $row-highlight: #ffcd0f +); + + +:host { + @include tokens($custom-theme); +} +``` + +>[!NOTE] +>The sample will not be affected by the selected global theme from `Change Theme`. + +## Performance (Experimental) + +The `igxHierarchicalGrid`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: + +```typescript +platformBrowserDynamic() + .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }) + .catch(err => console.error(err)); +``` + +>[!NOTE] +> This is still in experimental feature for the `igxHierarchicalGrid`. This means that there might be some unexpected behaviors in the Hierarchical Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. +>[!NOTE] +> Enabling it can affects other parts of an Angular application that the `igxHierarchicalGrid` is not related to. + +## Known Limitations + +|Limitation|Description| +|--- |--- | +|Group By|Group By feature is not supported by the hierarchical grid.| + +> [!NOTE] +> `igxHierarchicalGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxHierarchicalGrid`. For more details see [igxForOf Known Issues](../for-of.md#known-limitations) section. + +## API References + +- [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) +- [IgxRowIslandComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrowislandcomponent.html) +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) +- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) +- [IgxHierarchicalGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridrow.html) +- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) +- [IgxChip Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxCalendar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxActionStrip Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-action-strip-theme) +- [IgxSnackBar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-snackbar-theme) +- [IgxBadge Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) + +## Additional Resources + +
+ +- [Grid Sizing](sizing.md) +- [Virtualization and Performance](virtualization.md) +- [Paging](paging.md) +- [Filtering](filtering.md) +- [Sorting](sorting.md) +- [Summaries](summaries.md) +- [Column Moving](column-moving.md) +- [Column Pinning](column-pinning.md) +- [Column Resizing](column-resizing.md) +- [Selection](selection.md) +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md new file mode 100644 index 000000000..b2789fb1f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-keyboard-navigation.md @@ -0,0 +1,1837 @@ +--- +_tocName: Keyboard navigation +_premium: true +--- +--- title: Angular Hierarchical Grid Keyboard Navigation - Ignite UI for Angular _description: Learn how to use Hierarchical Grid Keyboard Navigation with Ignite UI for Angular. With Keyboard interaction, users can quickly navigate between cells, rows, and columns. _keywords: keyboard navigation, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/keyboard-navigation --- # Angular Hierarchical Grid Keyboard Navigation + + Keyboard navigation in the **IgxHierarchicalGrid** provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the **IgxHierarchicalGrid** and allows to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way. The tabulations of the IgxHierarchicalGrid has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use. Currently, the IgxHierarchicalGrid introduces the following tab stops: - **GroupBy or Toolbar area** (if enabled); - **IgxHierarchicalGrid header**; - **IgxHierarchicalGrid body**; - **Column summaries** (if enabled); - **IgxHierarchicalGrid paginator** (if enabled); >[!NOTE] > Due to this change, navigating between the cells with tab and Shift + Tab is no longer supported in the IgxHierarchicalGrid. > Pressing the Tab key now goes through the tab stops in the following order: **GroupBy** / **Toolbar** -> **Headers** -> **Body** -> **Summaries** -> **Footer / Paginator**. >[!NOTE] > Exposing any **focusable** element into the **IgxHierarchicalGrid** body via template may introduce **side effects** in the keyboard navigation, since the default > browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately. ## Header Navigation A full _keyboard navigation_ support in the **IgxHierarchicalGrid** header is now introduced. Column headers can be easily traversed with the arrow keys. Additionally, there are a number of key combinations that trigger actions on the columns like **filtering**, **sorting**, **grouping** and etc. When the **IgxHierarchicalGrid** header container is focused, the following key combinations are available: ### Key Combinations - Arrow Up navigates one cell up in the headers (no looping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined - Arrow Down navigates one cell down in the headers (no wrapping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined - Arrow Left navigates one cell left (no looping) - Arrow Right navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level - Home navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level - Ctrl + Arrow Right navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level - End navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level - Alt + L opens Advanced Filtering dialog if Advanced Filtering is enabled - Ctrl + Shift + L opens the Excel Style Filter dialog or the default (row) filter if the column is filterable - Ctrl + Arrow Up sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared - Ctrl + Arrow Down sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared - Space selects the column; If the column is already selected, selection is cleared @@if (igxName === "IgxGrid") { - Shift + Alt + Arrow Left groups the column, if the column is marked as groupable - Shift + Alt + Arrow Right ungroups the column, if the column is marked as groupable - Alt + Arrow Left or Alt + Arrow Up collapses the column group header, if the header is not already collapsed - Alt + Arrow Right or `Alt + Arrow Down expands the column group header, if the header is not already expanded} ## Body navigation When the **IgxHierarchicalGrid** body is focused, the following key combinations are available: ### Key Combination - Arrow Up- navigates one cell up , or one level up the grid hierarchy if necessary (no wrapping) - Arrow Down navigates one cell down , or one level down the grid hierarchy if necessary(no wrapping) - Arrow Left navigates one cell left (no wrapping between lines) - Arrow Right - navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row - Ctrl + Arrow Right navigates to the rightmost cell in the row - Ctrl + Arrow Up navigates to the first cell in the column - Ctrl + Arrow Down navigates to the last cell in the column - Home navigates to the leftmost cell in the row - End navigates to the rightmost cell in the row - Ctrl + Home navigates to the top leftmost data cell in the grid - Ctrl + End navigates to the bottom rightmost data cell in the grid - Page Up scrolls one page (view port) up - Page Down scrolls one page (view port) down - Enter enters edit mode - F2 enters edit mode - Esc exits edit mode - Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row - Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row - Space - selects the row, if Row Selection is enabled - Alt + Arrow Left or Alt + Arrow Up - @@if (igxName === "IgxGrid") {over Group Row - collapses the group} @@if (igxName === "IgxHierarchicalGrid") {collapses the row island} @@if (igxName === "IgxTreeGrid") {collapses the current node} - Alt + Arrow Right or Alt + Arrow Down - @@if (igxName === "IgxGrid") {over Group Row - expands the group} @@if (igxName === "IgxHierarchicalGrid") {expands the row island } @@if (igxName === "IgxTreeGrid") {expands the current node} + @@if (igxName === "IgxGrid") {- Alt + Arrow Left or Alt + Arrow Up - over Master Detail Row - collapses the details view - Alt + Arrow Right or Alt + Arrow Down - over Master Detail Row - expands the details view} + @@if (igxName === "IgxGrid") {- Space - over Group Row - selects all rows in the group, if rowSelection property is set to multiple} Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. ## Demo @@if (igxName === "IgxGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-shadow */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { CellType, IActiveNodeChangeEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { SortingDirection } from 'igniteui-angular/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { DATA } from '../../data/customers'; +import { NgClass } from '@angular/common'; + +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, itemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = itemAction; + + if (itemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} + +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('shift + alt + arrow left/right', 'group/ungroup the active column', false, ItemAction.Groupable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, ItemAction.Collapsible), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse master details row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand master details row', false, ItemAction.Collapsible), + new Item('alt + arrow right/left', 'expand/collapse the group row', false, ItemAction.Expandable), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell left', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell right', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'grid-keyboardnav', + templateUrl: './grid-keyboardnav-sample.component.html', + styleUrls: ['grid-keyboardnav-sample.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class GridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + + + @ViewChild(IgxGridComponent, { static: true }) + public grid: IgxGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + + public get keyboardCollection() { + return this._keyboardHandler.collection; + } + + public get headerList() { + return this._keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this._keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this._keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + private _destroyer = new Subject(); + private _keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + + public onActiveNodeChange(evt: IActiveNodeChangeEventArgs) { + if (this.grid.crudService.cell) { + return; + } + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === this.grid.dataView.length ? + GridSection.FOOTER : GridSection.TBODY; + this.changeCombinationsCollection(gridSection); + this.toggleHeaderCombinations(evt); + this.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.grid.data = DATA; + for (const item of this.grid.data) { + const names = item.CompanyName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + item.PersonelDetails = `${item.ContactTitle}: ${item.ContactName}`; + item.CompanysAnnualProfit = (100000 + (Math.random() * Math.floor(1000000))).toFixed(0); + } + + this.grid.groupingExpansionStateChange.pipe(takeUntil(this._destroyer)) + .subscribe(() => { + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + this._keyboardHandler.selectItem(3); + } + }); + + this.grid.columnSelectionChanging.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this._keyboardHandler.selectItem(0); + } + }); + + this.grid.rowToggle.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (evt.type !== 'keydown') { + return; + } + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this._keyboardHandler.selectItem(1) : + this._keyboardHandler.selectItem(2); + }); + + this.grid.groupingExpressions = [ + { fieldName: 'ContactTitle', dir: SortingDirection.Asc } + ]; + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (key === 'tab') { return; } + if (this._keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this._keyboardHandler.selectItem(3); + break; + case 'home': + this._keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this._keyboardHandler.selectItem(0); + break; + case 'arrowright': + this._keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + + const activeNode = this.grid.navigation.activeNode; + if (this._keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this._keyboardHandler.selectItem(5); + return; + } + const col = this.grid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this._keyboardHandler.selectItem(4); + } + + if ((key === 'arrowleft' || key === 'arrowright') && evt.altKey && evt.shiftKey && + col && !col.columnGroup && col.groupable) { + this._keyboardHandler.selectItem(2); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey) { + if (col && !col.columnGroup && col.sortable) { + this._keyboardHandler.selectItem(1); + } + } + } + + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.grid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.grid.getCellByColumn(activeNode.row, columnName); + + if (cell && cell.column.editable && cell.editMode) { + this._keyboardHandler.selectItem(0); + } + } + if ((key === 'end' || key === 'home') && evt.ctrlKey) { + this._keyboardHandler.selectItem(4); + this.cdr.detectChanges(); + } + } + } + + public expandChange() { + if (!this._keyboardHandler.collection.length) { + return; + } + + this._keyboardHandler.selectItem(3); + } + + public onCheckChange(evt, idx) { + evt.checked ? this._keyboardHandler.selectItem(idx) : this._keyboardHandler.deselectItem(idx); + } + + public toggleHeaderCombinations(activeNode) { + if (this._keyboardHandler.gridSection !== GridSection.THEAD) { + return; + } + const currColumn = this.grid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this._keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const rowRef = this.grid.getRowByIndex(activeNode.row); + if (this._keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + + if (rowRef.isGroupByRow) { + this._keyboardHandler.enableActionItems([ItemAction.Expandable]); + } else { + const cell = this.grid.getCellByColumn(activeNode.row, + this.grid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + } + + public toggleCellCombinations(cell?: CellType) { + const actions = this.extractCellActions(cell); + this._keyboardHandler.enableActionItems(actions); + } + + public changeCombinationsCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this._keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this._keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this._keyboardHandler.collection = summaryCombinations; + break; + default: + this._keyboardHandler.collection = []; + return; + } + this._keyboardHandler.gridSection = gridSection; + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + + res.push(ItemAction.Collapsible); + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + @if (dataItem.CompanysAnnualProfit) { +
+
Annual Profit:
+ {{dataItem.CompanysAnnualProfit}} +
+ } + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($color: 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample ::ng-deep { + @include checkbox($custom-checkbox-theme); +} + +.sample { + display: flex; + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 450px; + box-shadow: elevation(2); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} @@if (igxName === "IgxHierarchicalGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-shadow */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { fromEvent, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { NgClass } from '@angular/common'; + +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, itemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = itemAction; + + if (itemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} + +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, + ItemAction.Collapsible), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse row island row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand row island row', false, ItemAction.Collapsible), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell right', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell left', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'grid-keyboardnav', + templateUrl: './hgrid-keyboard-guide.component.html', + styleUrls: ['hgrid-keyboard-guide.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class HGridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + + + @ViewChild(IgxHierarchicalGridComponent, { static: true }) + public hGrid: IgxHierarchicalGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + + public get keyboardCollection() { + return this.keyboardHandler.collection; + } + + public get headerList() { + return this.keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this.keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this.keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + public gridTarget: GridUnderManagement; + + private _destroyer = new Subject(); + private keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + public onActiveNodeChange(evt) { + if (this.hGrid.crudService.cell) { + return; + } + const grid = evt.owner || this.hGrid; + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === grid.dataView.length ? GridSection.FOOTER : GridSection.TBODY; + this.changeKeyboardCollection(gridSection); + this.gridTarget.toggleHeaderCombinations(evt); + this.gridTarget.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.hGrid.data = CUSTOMERS; + for (const item of this.hGrid.data) { + const names = item.CompanyName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + item.PersonelDetails = `${item.ContactTitle}: ${item.ContactName}`; + item.CompanysAnnualProfit = (100000 + (Math.random() * Math.floor(1000000))).toFixed(0); + } + + this.gridTarget = new GridUnderManagement(this.hGrid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public expandChange() { + if (!this.keyboardHandler.collection.length) { + return; + } + + this.keyboardHandler.selectItem(2); + } + + public onCheckChange(evt, idx) { + evt.checked ? this.keyboardHandler.selectItem(idx) : this.keyboardHandler.deselectItem(idx); + } + + public changeKeyboardCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this.keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this.keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this.keyboardHandler.collection = summaryCombinations; + break; + default: + this.keyboardHandler.collection = []; + return; + } + this.keyboardHandler.gridSection = gridSection; + } + + public onGridCreated(evt) { + fromEvent(evt.grid.elementRef.nativeElement, 'click').pipe(takeUntil(this._destroyer)) + .subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + + fromEvent(evt.grid.elementRef.nativeElement, 'focus').pipe(takeUntil(this._destroyer)) + .subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + + fromEvent((evt.grid as IgxHierarchicalGridComponent).tbody.nativeElement, 'focus') + .pipe(takeUntil(this._destroyer)).subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (this.keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this.keyboardHandler.selectItem(3); + break; + case 'home': + this.keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this.keyboardHandler.selectItem(0); + break; + case 'arrowright': + this.keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + const activeNode = this.gridTarget.hGrid.navigation.activeNode; + if (this.keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this.keyboardHandler.selectItem(3); + return; + } + const col = this.gridTarget.hGrid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this.keyboardHandler.selectItem(4); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey && col && !col.columnGroup && col.sortable) { + this.keyboardHandler.selectItem(1); + } + } + + if (this.keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.gridTarget.hGrid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.gridTarget.hGrid.getCellByColumn(activeNode.row, columnName); + if (cell && cell.column.editable && cell.editMode) { + this.keyboardHandler.selectItem(0); + } + } + if ((evt.code === 'End' || evt.code === 'Home') && evt.ctrlKey) { + this.keyboardHandler.selectItem(3); + } + } + } +} + +export class GridUnderManagement { + public hGrid: IgxHierarchicalGridComponent; + public destroyer = new Subject(); + public keyboardHandler: KeyboardHandler; + public cdr: ChangeDetectorRef; + + constructor(hGrid: IgxHierarchicalGridComponent, keyboardHandler: KeyboardHandler, + destroyer: Subject, cdr: ChangeDetectorRef) { + this.hGrid = hGrid; + this.keyboardHandler = keyboardHandler; + this.destroyer = destroyer; + this.cdr = cdr; + } + + public subscribe() { + this.hGrid.columnSelectionChanging.pipe(takeUntil(this.destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this.keyboardHandler.selectItem(0); + } + }); + + this.hGrid.rowToggle.pipe(takeUntil(this.destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (!evt || evt.type !== 'keydown') { + return; + } + + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this.keyboardHandler.selectItem(1) : + this.keyboardHandler.selectItem(2); + }); + } + + public toggleHeaderCombinations(activeNode) { + if (this.keyboardHandler.gridSection !== GridSection.THEAD || activeNode.column === undefined || activeNode.level === undefined) { + return; + } + const grid = activeNode.owner || this.hGrid; + const currColumn = grid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this.keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const grid = activeNode.owner || this.hGrid; + const rowRef = grid.getRowByIndex(activeNode.row); + if (this.keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + + if (rowRef.isGroupByRow) { + this.keyboardHandler.enableActionItems([ItemAction.Expandable]); + } else { + const cell = grid.getCellByColumn(activeNode.row, + grid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + } + + public toggleCellCombinations(cell?: CellType) { + if (this.keyboardHandler.gridSection !== GridSection.TBODY || !cell) { + return; + } + + const actions = this.extractCellActions(cell); + this.keyboardHandler.enableActionItems(actions); + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + + res.push(ItemAction.Collapsible); + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{headerList}} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($color: 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample { + @include tokens($custom-checkbox-theme); +} + +.sample { + display: flex; + + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 570px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} @@if (igxName === "IgxTreeGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @typescript-eslint/naming-convention */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { CellType, IActiveNodeChangeEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxOverlayService } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { NgClass } from '@angular/common'; + +// eslint-disable-next-line no-shadow +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +// eslint-disable-next-line no-shadow +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +// eslint-disable-next-line no-shadow +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, ítemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = ítemAction; + + if (ítemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + if (!this._collection.length) { + return; + } + + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + if (!this._collection.length) { + return; + } + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, + ItemAction.Collapsible), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand row', false, ItemAction.Collapsible), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell right', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell left', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'app-grid-keyboardnav', + templateUrl: './tgrid-keyboardnav-guide.component.html', + styleUrls: ['tgrid-keyboardnav-guide.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class TGridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + private _overlay = inject(IgxOverlayService); + + @ViewChild(IgxTreeGridComponent, { static: true }) + public tgrid: IgxTreeGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + public data; + + public get keyboardCollection() { + return this._keyboardHandler.collection; + } + + public get headerList() { + return this._keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this._keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this._keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + private _destroyer = new Subject(); + private _keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + public onActiveNodeChange(evt: IActiveNodeChangeEventArgs) { + if (this.tgrid.crudService.cell) { + return; + } + + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === this.tgrid.dataView.length ? + GridSection.FOOTER : GridSection.TBODY; + this.changeKeyboardCollection(gridSection); + this.toggleHeaderCombinations(evt); + this.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + this.tgrid.columnSelectionChanging.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this._keyboardHandler.selectItem(0); + } + }); + + this.tgrid.rowToggle.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (evt.type !== 'keydown') { + return; + } + + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this._keyboardHandler.selectItem(1) : + this._keyboardHandler.selectItem(2); + }); + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public expandChange() { + if (!this._keyboardHandler.collection.length) { + return; + } + + this._keyboardHandler.selectItem(2); + } + + public onCheckChange(evt, idx) { + evt.checked ? this._keyboardHandler.selectItem(idx) : this._keyboardHandler.deselectItem(idx); + } + + public changeKeyboardCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this._keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this._keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this._keyboardHandler.collection = summaryCombinations; + break; + default: + this._keyboardHandler.collection = []; + return; + } + this._keyboardHandler.gridSection = gridSection; + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (key === 'tab') { return; } + if (this._keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this._keyboardHandler.selectItem(3); + break; + case 'home': + this._keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this._keyboardHandler.selectItem(0); + break; + case 'arrowright': + this._keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + const activeNode = this.tgrid.navigation.activeNode; + if (this._keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this._keyboardHandler.selectItem(4); + return; + } + const col = this.tgrid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this._keyboardHandler.selectItem(3); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey && col && !col.columnGroup && col.sortable) { + this._keyboardHandler.selectItem(1); + } + } + + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.tgrid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.tgrid.getCellByColumn(activeNode.row, columnName); + + if (cell && cell.column.editable && cell.editMode) { + this._keyboardHandler.selectItem(0); + } + } + if ((evt.code === 'End' || evt.code === 'Home') && evt.ctrlKey) { + this._keyboardHandler.selectItem(3); + this.cdr.detectChanges(); + } + } + } + + public toggleHeaderCombinations(activeNode) { + if (this._keyboardHandler.gridSection !== GridSection.THEAD) { + return; + } + const currColumn = this.tgrid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this._keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const rowRef = this.tgrid.getRowByIndex(activeNode.row); + if (this._keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + const cell = this.tgrid.getCellByColumn(activeNode.row, + this.tgrid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + public toggleCellCombinations(cell?: CellType) { + if (this._keyboardHandler.gridSection !== GridSection.TBODY) { + return; + } + + const actions = this.extractCellActions(cell); + this._keyboardHandler.enableActionItems(actions); + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + if (cell.row.children && cell.row.children.length) { + res.push(ItemAction.Collapsible); + } + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + + + + + + + + + + + + +
+ Country: {{cell.row.data.Country}} +
+ City: {{cell.row.data.City}} +
+ Postal Code: {{cell.row.data.Address}} +
+ + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($default-palette, 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample ::ng-deep { + @include checkbox($custom-checkbox-theme); +} + +.sample { + display: flex; + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 450px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} ## Custom keyboard navigation Overriding the default behavior for a certain key or keys combination is one of the benefits that the **Keyboard Navigation** feature provides. For example: press the Enter or Tab key to navigate to the next cell or the cell below. This or any other navigation scenario is easily achieved by the **Keyboard Navigation** API: | API | Description | Arguments | |---------|-------------|-----------| | [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#gridKeydown) | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | [IGridKeydownEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html) | | [`activeNodeChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#activeNodeChange) | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | [IActiveNodeChangeEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iactivenodechangeeventargs.html) | | [`navigateTo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#navigateTo) | Navigates to a position in the grid, based on provided `rowindex` and `visibleColumnIndex`. It can also execute a custom logic over the target element, through a callback function that accepts param of type `{ targetType: GridKeydownTargetType, target: Object }` . Usage:
_grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} | | [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getNextCell)| returns [`ICellPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icellposition.html) object, which defines the next cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getnextcell) method. The callback function accepts `IgxColumnComponent` as a param and returns a `boolean` value indication if a given criteria is met:
_const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean | | [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getPreviousCell)| returns [`ICellPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icellposition.html) object, which defines the previous cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getPreviousCell) method. The callback function accepts `IgxColumnComponent` as a param and returns a `boolean` value indication if a given criteria is met:
_const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean | > [!NOTE] > Both [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getNextCell) and [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#getPreviousCell) are > availabe for the current level and cannot access cells from upper or lower level. Let's try the API to demonstrate how to achieve common scenarios like user input validation and custom navigation. First we need to register an event handler for the [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridKeydown) event: ```html + + ``` In order to add custom keyboard navigation to igxHierarchicalGrid child grids too, each child grid should subscribe to [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#gridKeydown) event. That's why in example above we have registered and event handler for for the [`gridCreated`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrowislandcomponent.html#gridCreated) event: ```typescript public childGridCreated(event: IGridCreatedEventArgs) { + const grid = event.grid; + event.grid.gridKeydown.subscribe((args) => { + this.customKeydown(args, grid); + }); } ``` ```typescript public customKeydown(args: IGridKeydownEventArgs) { + const target: IgxGridCell = args.target as IgxGridCell; + const evt: KeyboardEvent = args.event as KeyboardEvent; + const type = args.targetType; + + if (type === 'dataCell' && target.inEditMode && evt.key.toLowerCase() === 'tab') { + // 1. USER INPUT VALIDATION ON TAB + } + if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') { + // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS + } } ``` Based on the [IGridKeydownEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html) values we identified two cases, where to provide our own logic (see above). Now, using the methods from the API, let's perform the desired - if the user is pressing Tab key over a cell in edit mode, we will perform validation on the input. If the user is pressing Enter key over a cell, we will move focus to cell in the next row: ```typescript + // 1. USER INPUT VALIDATION ON TAB + if (target.column.dataType === 'number' && target.editValue < 0) { + // alert the user that the input is invalid + return; + } + // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS + const nexRowIndex = target.row.expanded ? target.rowIndex + 2 : target.rowIndex + 1; + grid.navigateTo(nexRowIndex, target.visibleColumnIndex, + (obj) => { obj.target.nativeElement.focus(); }); ``` > Note: Please refer to the sample code for full implementation details. Use the demo below to try out the custom scenarios that we just implemented: - Double click or press F2 key on a cell in the `Grammy Nominations` column, change the value to `-2` and press tab key. Prompt message will be shown. - Select a cell and press Enter key a couple of times. Every key press will move the focus to a cell in the next row, under the same column. #### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { CellType, IGridKeydownEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-custom-kb-navigation-sample', + styleUrls: ['./hierarchical-grid-custom-kb-navigation-sample.component.scss'], + templateUrl: 'hierarchical-grid-custom-kb-navigation-sample.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent] +}) + +export class HGridCustomKBNavigationComponent implements OnInit { + @ViewChild('grid1', { read: IgxHierarchicalGridComponent, static: true }) + public grid1: IgxHierarchicalGridComponent; + + public data: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = SINGERS; + } + + public formatter = (a) => a; + + public childGridCreated(event: IGridCreatedEventArgs) { + const grid = event.grid; + event.grid.gridKeydown.subscribe((args) => { + this.customKeydown(args, grid); + }); + } + + public customKeydown(args: IGridKeydownEventArgs, grid) { + const target: CellType = args.target as CellType; + const evt: KeyboardEvent = args.event as KeyboardEvent; + const type = args.targetType; + + if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') { + // Value validation for number column. + // This covers both 'tab' and 'shift+tab' key interactions. + args.event.preventDefault(); + args.cancel = true; + if (target.column.dataType === 'number' && target.editValue < 0) { + alert('The value should be less than 0'); + return; + } + const cell = evt.shiftKey ? + grid.getPreviousCell(target.row.index, target.column.visibleIndex, (col) => col.editable) : + grid.getNextCell(target.row.index, target.column.visibleIndex, (col) => col.editable); + + grid.navigateTo(cell.rowIndex, cell.visibleColumnIndex, + (obj) => { obj.target.activate(); }); + } else if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') { + // Perform column based kb navigation with 'enter' key press + args.cancel = true; + const nexRowIndex = target.row.expanded ? target.row.index + 2 : target.row.index + 1; + grid.navigateTo(nexRowIndex, target.column.visibleIndex, + (obj) => { obj.target.activate(); }); + } + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + Employees + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 5px 16px; +} +``` ## Known Limitations |Limitation|Description| |--- |--- | | Navigating inside а grid with scrollable parent container. | If the grid is positioned inside a scrollable parent container and the user navigates to a grid cell that is out of view, parent container will not be scrolled.| ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
_[Grid Keyboard Navigation](../grid/keyboard-navigation.md) _ [Tree Grid Keyboard Navigation](../treegrid/keyboard-navigation.md) - [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md new file mode 100644 index 000000000..9cc8100f1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-load-on-demand.md @@ -0,0 +1,389 @@ +--- +title: Hierarchical Grid load on demand - Native Angular | Ignite UI for Angular +_description: The Ignite UI for Angular Hierarchical Grid provides the necessary tools to load data on demand for each child grid that is expanded. That way the volume of data would be greatly reduced and can be retrieved only when the user needs it. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Hierarchical Grid component, Angular Hierarchical Data Table component, Angular Hierarchical Grid control, Angular Hierarchical Data Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Data Table, Hierarchical Grid, Hierarchical Data Table +_license: commercial +_tocName: Load on Demand +_premium: true +--- + +# Hierarchical Grid Load On Demand + +The Ignite UI for Angular [`IgxHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) allows fast rendering by requesting the minimum amount of data to be retrieved from the server so that the user can see the result in view and interact with the visible data as quickly as possible. Initially only the root grid’s data is retrieved and rendered, only after the user expands a row containing a child grid, he will receive the data for that particular child grid. This mechanism, also known as Load on Demand, can be easily configured to work with any remote data. + +This topic demonstrates how to configure Load on Demand by requesting data from a [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html). Here's the working demo and later we will go through it step by step and describe the process of creating it. + +## Angular Hierarchical Grid Load On Demand Example + +```typescript +import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IGX_HIERARCHICAL_GRID_DIRECTIVES, IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { EntityType, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { HttpClient } from '@angular/common/http'; + +const API_ENDPOINT = 'https://data-northwind.indigo.design'; + +@Component({ + selector: 'app-hierarchical-grid-lod', + styleUrls: ['./hierarchical-grid-lod.component.scss'], + templateUrl: './hierarchical-grid-lod.component.html', + imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) +export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit { + private http = inject(HttpClient); + + @ViewChild('hGrid', { static: true }) + public hGrid: IgxHierarchicalGridComponent; + + public remoteData = []; + public schema: EntityType[] = [ + { + name: 'Customers', + fields: [ + { field: 'customerId', dataType: 'string' }, + { field: 'companyName', dataType: 'string' }, + { field: 'contactName', dataType: 'string' }, + { field: 'contactTitle', dataType: 'string' } + ], + childEntities: [ + { + name: 'Orders', + fields: [ + { field: 'customerId', dataType: 'string' }, // first field will be treated as foreign key + { field: 'orderId', dataType: 'number' }, + { field: 'employeeId', dataType: 'number' }, + { field: 'shipVia', dataType: 'string' }, + { field: 'freight', dataType: 'number' } + ], + childEntities: [ + { + name: 'Details', + fields: [ + { field: 'orderId', dataType: 'number' }, // first field will be treated as foreign key + { field: 'productId', dataType: 'number' }, + { field: 'unitPrice', dataType: 'number' }, + { field: 'quantity', dataType: 'number' }, + { field: 'discount', dataType: 'number' } + ] + } + ] + } + ] + } + ]; + + public ngOnInit() { + const ordersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['customerId']); + ordersTree.filteringOperands.push({ + fieldName: 'freight', + ignoreCase: false, + condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), + conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name, + searchVal: 500 + }); + + const customersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']); + customersTree.filteringOperands.push({ + fieldName: 'customerId', + condition: IgxStringFilteringOperand.instance().condition('inQuery'), + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, + ignoreCase: false, + searchTree: ordersTree + }); + this.hGrid.advancedFilteringExpressionsTree = customersTree; + } + + public ngAfterViewInit() { + this.refreshRootGridData(); + } + + public refreshRootGridData() { + const tree = this.hGrid.advancedFilteringExpressionsTree; + this.hGrid.isLoading = true; + if (tree) { + this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, tree).subscribe(data =>{ + this.remoteData = Object.values(data)[0]; + this.hGrid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } else { + this.http.get(`${API_ENDPOINT}/Customers`).subscribe(data => { + this.remoteData = Object.values(data); + this.hGrid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } + } + + public gridCreated(event: IGridCreatedEventArgs) { + event.grid.isLoading = true; + const url = this.buildUrl(event); + this.http.get(url).subscribe(data => { + event.grid.data = Object.values(data); + event.grid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } + + private buildUrl(event: IGridCreatedEventArgs) { + const parentKey = (event.grid.parent as any).key ?? this.schema[0].name; + const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${event.owner.key}`; + return url; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper{ + padding: 16px; +} +``` + +
+ +### Hierarchical Grid Setup + +Let's setup our hierarchical grid. First we will define our hierarchical grid template with the levels of hierarchy that we expect to have. We know that our root grid [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#primaryKey) for the customers is their `customerId`, for their orders on the first level - `orderId` and respectively for order details - `productId`. Knowing each database table and their keys allows us to define our initial template: + +```html + + + + + + +``` + +We will easily set the data of the root grid after getting its data from the endpoint in our code later, since we can use the `#hGrid` reference. Setting the data for any child that has been expanded is a bit different. + +When a row is expanded for the first time, a new child `IgxHierarchicalGrid` is rendered for it and we need to get the reference for the newly created grid to set its data. That is why each [`IgxRowIsland`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrowislandcomponent.html) component provides the [`gridCreated`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrowislandcomponent.html#gridCreated) event that is fired when a new child grid is created for that specific row island. We can use that to get the reference we need for the new grid, request its data from the endpoint, and apply it. + +We can use one method for all row islands since the endpoint only needs the key of the row island, the primary key of the parent row, and its unique identifier. All this information can be accessed directly from the event arguments. + +#### Setup of loading indication + +Now let's improve the user experience by informing the user that the data is still loading so he doesn't have to look at an empty grid in the meantime. That's why the [`IgxHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) supports a loading indicator that can be displayed while the grid is empty. + +We display a loading indicator by setting the [`isLoading`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#isloading) property to `true` while there is no data. We need to set it initially for the root grid and also when creating new child grids, until their data is loaded. We could always set it to `true` in our template, but we want to hide it (by setting it to `false`) and display that the grid has no data if the service returns an empty array. + +Finally, let's turn the [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) property off and define the columns collection in the markup. + +The template file `hierarchical-grid-lod.component.html`, after all changes added, would look like this: + +```html + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Advanced filtering + +In order to use Advanced Filtering in the `IgxHierarchicalGrid` with load on demand, you need to set the [`schema`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#schema) property of the grid to an entity with hierarchical structure, specifying child entities and fields with their data types. This ensures that filtering expressions with nested queries can be created even before any child grid data is loaded and that the grid can correctly interpret and apply these filters to the data. + +In our case, this is the correct hierarchical structure: + +```TypeScript +public schema: EntityType[] = [ + { + name: 'Customers', + fields: [ + { field: 'customerId', dataType: 'string' }, + { field: 'companyName', dataType: 'string' }, + { field: 'contactName', dataType: 'string' }, + { field: 'contactTitle', dataType: 'string' } + ], + childEntities: [ + { + name: 'Orders', + fields: [ + { field: 'customerId', dataType: 'string' }, + { field: 'orderId', dataType: 'number' }, + { field: 'employeeId', dataType: 'number' }, + { field: 'shipVia', dataType: 'string' }, + { field: 'freight', dataType: 'number' } + ], + childEntities: [ + { + name: 'Details', + fields: [ + { field: 'orderId', dataType: 'number' }, + { field: 'productId', dataType: 'number' }, + { field: 'unitPrice', dataType: 'number' }, + { field: 'quantity', dataType: 'number' }, + { field: 'discount', dataType: 'number' } + ] + } + ] + } + ] + } +]; +``` + +#### Setting initial filter + +Now let's add initial filtering rules to our grid so that the root grid is filtered when first loaded. We will create a [`FilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/filteringexpressionstree.html) and set it to the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#advancedFilteringExpressionsTree) property of the `IgxHierarchicalGrid` using the `ngOnInit` lifecycle hook. + +Let's say we want to filter customers that have order's freight at least `500`. We will take advantage of the ability to create nested queries in the filtering expressions and this is the result: + +```TypeScript +public ngOnInit() { + const ordersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['customerId']); + ordersTree.filteringOperands.push({ + fieldName: 'freight', + ignoreCase: false, + condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), + conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name, + searchVal: '500' + }); + + const customersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']); + customersTree.filteringOperands.push({ + fieldName: 'customerId', + condition: IgxStringFilteringOperand.instance().condition('inQuery'), + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, + ignoreCase: false, + searchTree: ordersTree + }); + this.hGrid.advancedFilteringExpressionsTree = customersTree; +} +``` + +### Connecting to the endpoint + +We will be communicating with the endpoint over HTTP protocol using the XMLHttpRequest interface the browsers provide. In order to achieve this more easily we will use Angular's [`HttpClient`](https://angular.io/api/common/http/HttpClient) module that offers a simplified client HTTP API. + +#### Getting root grid data + +The [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) provides us with a POST endpoint that accepts an `IFilteringExpressionsTree` as a parameter and we will use it in order to take advantage of the Advanced Filtering functionality in the `IgxHierarchicalGrid` and filter records in the root grid. We will do this in `refreshRootGridData` method: + +```typescript +public refreshRootGridData() { + const tree = this.hGrid.advancedFilteringExpressionsTree; + this.hGrid.isLoading = true; + if (tree) { + this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, tree).subscribe(data =>{ + this.remoteData = Object.values(data)[0]; + this.hGrid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } else { + this.http.get(`${API_ENDPOINT}/Customers`).subscribe(data => { + this.remoteData = Object.values(data); + this.hGrid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } +} +``` + +As you can see `this.http` will be a reference to our `HttpCLient` module. The `subscribe` method is part of Angular's Observable and is used to handle the asynchronous response from the HTTP request. When the data is received, it assigns the fetched data to the relevant grid, updates its loading state to false, and triggers change detection to ensure the UI reflects the changes. + +In order to load the data after the root grid is initially rendered, we will use the `ngAfterViewInit` lifecycle hook and call the `refreshRootGridData` method: + +````TypeScript +public ngAfterViewInit() { + this.refreshRootGridData(); +} +```` + +#### Getting child grids data + +Next we will define how we should build our URL for the GET request in order to get the data for our child grids. This is the visual representation of the relations between the tables: + +Relational Hierarchical Database + +Finally, we need to implement our `gridCreated` method that will request data for any new child grid created. It will be similar to getting the root level grid data, just this time we will use the data provided in the event [`gridCreated`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrowislandcomponent.html#gridCreated) and build our URL with it: + +````TypeScript +public gridCreated(event: IGridCreatedEventArgs) { + event.grid.isLoading = true; + const url = this.buildUrl(event); + this.http.get(url).subscribe(data => { + event.grid.data = Object.values(data); + event.grid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); +} + +private buildUrl(event: IGridCreatedEventArgs) { + const parentKey = (event.grid.parent as any).key ?? this.schema[0].name; + const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${event.owner.key}`; + return url; +} +```` + +## API References + +- [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) +- [IgxRowIslandComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrowislandcomponent.html) + +## Additional Resources + +
+ +- [Hierarchical Grid Component](hierarchical-grid.md) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md new file mode 100644 index 000000000..85b228402 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-multi-column-headers.md @@ -0,0 +1,390 @@ +--- +_tocName: Multi-column Headers +_premium: true +--- +--- title: Angular Multi-column Headers - Ignite UI for Angular _description: Start grouping column headers by placing them under a common hierarchical header with the help of Ignite UI for Angular grid and combine them into multi headers. _keywords: column headers, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/multi-column-headers --- # Angular Hierarchical Grid Multi-column Headers Overview [`IgxHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) supports `multi-column headers` which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid. ## Angular Hierarchical Grid Multi-column Headers Overview Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-multi-column', + styleUrls: ['./hierarchical-grid-multi-column.component.scss'], + templateUrl: 'hierarchical-grid-multi-column.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxButtonDirective] +}) + +export class HGridMultiHeadersSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + + constructor() { + + } + public ngOnInit(): void { + this.localdata = CUSTOMERS; + } + + public pinGroup() { + const firstColumnGroup = this.hierarchicalGrid.columnList.filter((c) => c.header === 'General Information')[0]; + firstColumnGroup.pinned = !firstColumnGroup.pinned; + } + + public hideGroup() { + const firstColumnGroup = this.hierarchicalGrid.columnList.filter((c) => c.header === 'General Information')[0]; + firstColumnGroup.hidden = !firstColumnGroup.hidden; + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 16px; +} + +.igx-button--contained { + margin-right: 5px; +} +``` The declaration of `Multi-column header` could be achieved by wrapping a set of columns into [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) component with [`header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#header) title passed. ```html + + + + + + + + + + + + + ``` For achieving `n-th` level of nested headers, the declaration above should be followed. So by nesting [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) leads to the desired result. ```html + + + + + + + + ``` Every [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) supports [`moving`](column-moving.md), [`pinning`](column-pinning.md) and [`hiding`](column-hiding.md). > [!NOTE] > When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested `column groups` or `columns` is not allowed.
> Please note that when using Pinning with Multi-Column Headers, the entire Group gets pinned.
> Moving between `columns` and `column groups` is allowed only when they are at the same level in the hierarchy and both are in the same `group`.
> When `columns/column-groups` are not wrapped by current `group` which means they are **top level** `columns`, moving is allowed between whole visible columns. ```html + + + + + + + + + ... ``` ## Multi-column Header Template Each of the column groups of the grid can be templated separately. The column group expects `ng-template` tag decorated with the `igxHeader` directive. The `ng-template` is provided with the column group object as a context. ```html ... + + {{ columnGroup.header | uppercase }} + + ... ... ``` If you want to re-use a single template for several column groups, you could set the [`headerTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#headertemplate) property of the column group like this: ```html + {{ columnGroup.header | uppercase }} ... + ... + ... ... ``` > [!NOTE] > If a column header is retemplated and the grid moving is enabled, you have to set the **draggable** attribute of corresponding column to **false** on the templated elements, so that you can handle any of the events that are applied! ```html + ``` The following sample demonstrates how to implement collapsible column groups using header templates. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-multi-column-template', + styleUrls: ['./hierarchical-grid-multi-column-template.component.scss'], + templateUrl: 'hierarchical-grid-multi-column-template.component.html', + imports: [IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent] +}) + +export class HGridMultiHeaderTemplateSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true}) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localData: any[]; + public columnGroupStates = new Map(); + + constructor() { + } + + public ngOnInit(): void { + this.localData = CUSTOMERS; + for (const item of this.localData) { + item.Location = `${item.Address}, ${item.City}, ${item.Country}`; + } + } + + public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) { + const columns = columnGroup.childColumns; + + if (columnGroup.header === 'General Information') { + const col = columns[1]; + col.hidden = !col.hidden; + } else if (columnGroup.header === 'Address Information') { + for (const col of columns) { + col.hidden = !col.hidden; + } + } else { + for (let i = 1; i < columns.length; i++) { + const col = columns[i]; + col.hidden = !col.hidden; + } + } + + this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup)); + } +} +``` +```html +
+ +
+ + {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}} + {{col.header}} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 16px; +} + +.column-group-template__container { + display: flex; + align-items: center; +} + +.column-group-template__icon { + cursor: pointer; +} +``` ## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$header-background`, `$header-text-color`, `$header-border-width`, `$header-border-style` and `$header-border-color` parameters. ```scss $custom-theme: grid-theme( + $header-background: #e0f3ff, + $header-text-color: #e41c77, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: rgba(0, 0, 0, 0.08) ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-multi-column-styling', + styleUrls: ['./hierarchical-grid-multi-column-styling.component.scss'], + templateUrl: 'hierarchical-grid-multi-column-styling.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent] +}) + +export class HGridMultiHeadersStylingComponent implements OnInit { + public localdata; + + constructor() { + + } + public ngOnInit(): void { + this.localdata = CUSTOMERS; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $header-background: #e0f3ff, + $header-text-color: #e41c77, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: rgba(0, 0, 0, 0.08) +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html)
## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md new file mode 100644 index 000000000..a1ca1e90c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-paging.md @@ -0,0 +1,412 @@ +--- +_tocName: Paging +_premium: true +--- +--- title: Angular Grid Paging | Angular Pagination Table | Infragistics _description: Configure Angular pagination and create custom pages in the Angular table by Ignite UI, get data for the requested pages with variety of angular events. _keywords: angular pagination, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/paging --- # Angular Hierarchical Grid Pagination Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Hierarchical Grid pagination is configurable via a separate component projected in the grid tree by defining a `igx-paginator` tag, similar to adding of a column. As in any Angular Table, the pagination in the Hierarchical Grid supports template for custom pages. ## Angular Pagination Example The following example represents Hierarchical Grid pagination and exposes the options usage of `items per page` and how paging can be enabled. The user can also quickly navigate through the Hierarchical Grid pages via "Go to last page" and "Go to first page" buttons. ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-paging', + styleUrls: ['./hierarchical-grid-paging.component.scss'], + templateUrl: 'hierarchical-grid-paging.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxPaginatorComponent] +}) + +export class HGridPagingSampleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} +```
Adding a [`igx-paginator`](../paginator.md) component will control whether the feature is present, you can enable/disable it by using a simple `*ngIf` with a toggle property. The [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage) input controls the visible records per page. Let’s update our Hierarchical Grid to enable paging: ```html + + ``` Example: ```html + +
+ + + Page {{paginator.page}} of {{paginator.totalPages}} + + +
+ ``` ## Usage The `igx-paginator` component is used along with the `igx-hierarchical-grid` component in the example below, but you can use it with any other component in case paging functionality is needed. ```html + + + + + + + + + + + + + ``` ### Paginator Configuration within child grids Due to certain limitations in how the child grids of an IgxHierarchicalGrid are implemented and how DI scope works, when defining a paginator component inside the igx-row-island tags, always make sure to use the IgxPaginator directive on the paginator itself. This will make sure that the child grid have the correct paginator instance as a reference: ```html + ... + + ... + + ... + + + ... ``` ### Paginator Component Demo ```typescript +import { Component, OnInit, ViewChild, AfterViewInit, PLATFORM_ID, inject } from '@angular/core'; +import { IPaginatorResourceStrings } from 'igniteui-angular/core'; +import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective } from 'igniteui-angular/paginator'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +import { FormsModule } from '@angular/forms'; +import { isPlatformBrowser } from '@angular/common'; + +@Component({ + selector: 'app-hierarchical-grid-pager-sample', + styleUrls: ['./hierarchical-grid-pager-sample.component.scss'], + templateUrl: './hierarchical-grid-pager-sample.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective, IgxSwitchComponent, FormsModule] +}) +export class HierarchicalGridPagerSampleComponent implements OnInit, AfterViewInit { + private platformId = inject(PLATFORM_ID); + + @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) + paginator: IgxPaginatorComponent; + + public data: any[]; + public densityOptions: string[]; + public isDropdownHidden = false; + public isPagerHidden = false; + public selectOptions = [5, 15, 20, 50]; + + private paginatorResourceStrings: IPaginatorResourceStrings = { + // eslint-disable-next-line @typescript-eslint/naming-convention + igx_paginator_label: 'Records per page' + }; + + public ngOnInit(): void { + this.data = SINGERS; + this.densityOptions = ['compact', 'cosy', 'comfortable']; + } + + public ngAfterViewInit(): void { + if (isPlatformBrowser(this.platformId)) { + requestAnimationFrame(() => { + this.paginator.resourceStrings = this.paginatorResourceStrings; + }); + } + } +} +``` +```html +
+ + + + @if (!isDropdownHidden) { + + } + @if (!isPagerHidden) { + + } + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Hide Dropdown + Hide Pager +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 10px; +} + +igx-switch { + margin: 24px; +} + +.options-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 1rem; +} +.options_container * { margin-right: 15px; } + +.select-input { + max-width: 150px; + padding-top: 5px; + padding-bottom: 5px; + margin-left: 15px; +} +```
## Remote Paging Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription. For more detailed information, check the [`Hierarchical Grid Remote Data Operations`](remote-data-operations.md#remote-paging) topic. ## Styling To get started with styling the paginator, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`paginator-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-paginator-theme) and accepts the `$text-color`, `$background-color` and the `$border-color` parameters. ```scss $dark-paginator: paginator-theme( + $text-color: #d0ab23;, + $background-color: #231c2c, + $border-color: #d0ab23; ); ``` As seen, the `paginator-theme` only controls colors for the paging container, but does not affect the buttons in the pager UI. To style those buttons, let's create a new icon button theme: ```scss $dark-button: flat-icon-button-theme( + $foreground: #d0ab23, + $hover-foreground: #231c2c, + $hover-background: #d0ab23, + $focus-foreground: #231c2c, + $focus-background: #d0ab23, + $disabled-foreground: #9b7829 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins, each with its respective theme: ```scss :host { + @include tokens($dark-paginator); + + .igx-grid-paginator__pager { + @include tokens($dark-button); + } } ``` >[!NOTE] >We include the created **icon-button-theme** within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` in order to style the components which are inside the paging container, like the button: ```scss :host { + @include tokens($dark-paginator); + + igx-paginator { + ::ng-deep { + @include tokens($dark-button); + } + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-paging', + styleUrls: ['./hierarchical-grid-paging-style.component.scss'], + templateUrl: 'hierarchical-grid-paging-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxPaginatorDirective] +}) + +export class HGridPagingStyleSampleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$my-primary: #231c2c; +$my-secondary: #d0ab23; +$dark-gray: #333; +$light-gray: #999; +$inactive-color: #826217; + +$dark-paginator: paginator-theme( + $text-color: $my-secondary, + $background-color: $my-primary, + $border-color: $my-secondary +); + +$dark-button: flat-icon-button-theme( + $foreground: $my-secondary, + $hover-foreground: $dark-gray, + $hover-background: $my-secondary, + $focus-foreground: $dark-gray, + $focus-background: $my-secondary, + $border-color: $my-secondary, + $focus-border-color: $my-secondary, + $disabled-foreground: $inactive-color +); + +$dark-select: select-theme( + $toggle-button-background: $my-primary, + $toggle-button-foreground: $inactive-color, + $toggle-button-foreground-filled: $inactive-color, + $toggle-button-foreground-focus: $inactive-color, + $toggle-button-background-focus--border: $my-primary, +); + +$dark-input-group: input-group-theme( + $filled-text-color: $my-secondary, + $idle-text-color: $my-secondary, + $filled-text-hover-color: $my-secondary, + $focused-text-color: $my-secondary, + $border-color: darken($inactive-color, 10%), + $focused-border-color: $my-secondary, + $input-suffix-color: $my-secondary, +); + +$dark-drop-down-theme: drop-down-theme( + $background-color: $my-primary, + $item-text-color: $my-secondary, + $selected-item-background: $my-secondary, + $selected-item-text-color: $dark-gray, + $focused-item-background: $my-secondary, + $focused-item-text-color: $dark-gray, + $selected-focus-item-background: $my-secondary, + $selected-focus-item-text-color: $dark-gray, + $selected-hover-item-background: $my-secondary, + $selected-hover-item-text-color: $dark-gray +); + + +:host { + @include tokens($dark-drop-down-theme); + @include tokens($dark-paginator); + + igx-paginator { + @include tokens($dark-button); + @include tokens($dark-input-group); + @include tokens($dark-select); + } +} +``` ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxGridPaginator Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-paginator-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Paginator](../paginator.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md new file mode 100644 index 000000000..d2672d2b7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-remote-data-operations.md @@ -0,0 +1,549 @@ +--- +_tocName: Remote Data Operations +_premium: true +--- +--- title: Angular Hierarchical Grid Remote Data Operations - Ignite UI for Angular _description: Start using Angular remote data operations like remote filtering, remote sorting, and remote scrolling to load data from a server with Ignite UI for Angular. _keywords: angular remote data operations, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/remote-data-operations --- # Angular Hierarchical Grid Remote Data Operations The Ignite UI for Angular Hierarchical Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. This allows the developer to perform these tasks on a server, retrieve the data that is produced and display it in the Hierarchical Grid. + + + + + By default, the Hierarchical Grid uses its own logic for performing data operations. You can perform these tasks remotely and feed the resulting data to the Hierarchical Grid by taking advantage of certain inputs and events, which are exposed by the Hierarchical Grid. + + + + + ## Unique Column Values Strategy The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. The Hierarchical Grid generates these values based on its data source by default. In case of remote filtering, the grid data does not contain all the data from the server. In order to provide the unique values manually and load them on demand, we can take advantage of the Hierarchical Grid's [`uniqueColumnValuesStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#uniqueColumnValuesStrategy) input. This input is actually a method that provides three arguments: - **column** - The respective column instance. - **filteringExpressionsTree** - The filtering expressions tree, which is reduced based on the respective column. - **done** - Callback that should be called with the newly generated column values when they are retrieved from the server. The developer can manually generate the necessary unique column values based on the information, that is provided by the **column** and the **filteringExpressionsTree** arguments and then invoke the **done** callback. > [!NOTE] > When the [`uniqueColumnValuesStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#uniqueColumnValuesStrategy) input is provided, the default unique values generating process in the excel style filtering will not be used. ```html + ... + + ... + ``` ```typescript public singersColumnValuesStrategy = (column: ColumnType, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { // Get specific column data for the singers. this.remoteValuesService.getColumnData( + null, 'Singers', column, columnExprTree, uniqueValues => done(uniqueValues)); } public albumsColumnValuesStrategy = (column: ColumnType, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { // Get specific column data for the albums of a specific singer. const parentRowId = (column.grid as any).foreignKey; this.remoteValuesService.getColumnData( + parentRowId, 'Albums', column, columnExprTree, uniqueValues => done(uniqueValues)); } ``` ### Unique Column Values Strategy Demo ```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { IFilteringExpressionsTree } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { RemoteValuesService } from '../../services/remoteValues.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-excel-style-filtering-load-on-demand', + templateUrl: './hierarchical-grid-excel-style-filtering-load-on-demand.component.html', + styleUrls: ['./hierarchical-grid-excel-style-filtering-load-on-demand.component.scss'], + providers: [RemoteValuesService], + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HierarchicalGridExcelStyleFilteringLoadOnDemandComponent implements OnInit { + private remoteValuesService = inject(RemoteValuesService); + + + public localdata: any[]; + + public singersColumnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data for the singers. + this.remoteValuesService.getColumnData( + null, 'Singers', column, columnExprTree, uniqueValues => done(uniqueValues)); + }; + + public albumsColumnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data for the albums of a specific singer. + const parentRowId = (column.grid as any).foreignKey; + this.remoteValuesService.getColumnData( + parentRowId, 'Albums', column, columnExprTree, uniqueValues => done(uniqueValues)); + }; + + public ngOnInit() { + this.localdata = this.remoteValuesService.getSingersData(); + } +} +``` +```html +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + --ig-size: var(--ig-size-medium); + margin: 16px; +} + +.photo { + vertical-align: middle; + max-height: 40px; +} +.cell__inner { + margin: 1px auto 1px auto; +} +``` In order to provide a custom loading template for the excel style filtering, we can use the `igxExcelStyleLoading` directive: ```html + ... + + Loading ... + ```
## Remote Paging @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { The paging feature can operate with remote data. In order to demonstrate this let's first declare our service that will be responsible for data fetching. We will need the count of all data items in order to calculate the page count. This logic will be added to our service. ```typescript @Injectable() export class RemotePagingService { + public remoteData: BehaviorSubject; + public dataLenght: BehaviorSubject = new BehaviorSubject(0); + public url = 'https://www.igniteui.com/api/products'; + + constructor(private http: HttpClient) { + this.remoteData = new BehaviorSubject([]) as any; + } + + public getData(index?: number, perPage?: number): any { + let qS = ''; + + if (perPage) { + qS = `?$skip=${index}&$top=${perPage}&$count=true`; + } + + this.http + .get(`${this.url + qS}`).pipe( + map((data: any) => data) + ).subscribe((data) => this.remoteData.next(data)); + } + + public getDataLength(): any { + return this.http.get(this.url).pipe( + map((data: any) => data.length) + ); + } } ``` After declaring the service, we need to create a component, which will be responsible for the Hierarchical Grid construction and data subscription. ```typescript export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { + public data: BehaviorSubject = new BehaviorSubject([]); + private _dataLengthSubscriber; + + constructor(private remoteService: RemotePagingService) {} + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } } ``` } Now we can choose between setting-up our own _custom paging template_ or using the default one that the `igx-paginator` provides. Let's first take a look what is necessary to set-up remote paging by using the _default paging template_. ### Remote paging with default template If you want to use the _default paging template_ you need to set the Paginator's [`totalRecords`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#totalRecords) property, only then the grid will be able to calculate the _total page number_ based on total remote records. When performing a remote pagination the Paginator will pass to the Grid only the data for the current page, so the grid will not try to paginate the provided data source. That's why we should set Grid's [`pagingMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#pagingMode) property to _GridPagingMode.remote_. Also it is necessary to either subscribe to [`pagingDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#pagingDone) or [`perPageChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPageChange) events in order to fetch the data from your remote service, it depends on the use case which event will be used. ```html + + ... + + ``` ```typescript public totalCount = 0; public data: Observable; public mode = GridPagingMode.remote; public isLoading = true; @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; private _dataLengthSubscriber; public set perPage(val: number) { + this._perPage = val; + this.paginate(0); } public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data: any) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); } public ngAfterViewInit() { + const skip = this.page * this.perPage; + this.remoteService.getData(skip, this.perPage); } public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); } ``` ```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; +import { RemotePagingService } from './remotePagingService'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + providers: [RemotePagingService], + selector: 'app-hierarchical-grid-remote-paging-default-template', + styleUrls: ['./hierarchical-grid-remote-paging-default-template.component.scss'], + templateUrl: 'hierarchical-grid-remote-paging-default-template.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowIslandComponent, IgxPaginatorDirective] +}) + +export class HGridRemotePagingDefaultTemplateComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + + @ViewChild('hierarchicalGrid', { static: true }) public hierarchicalGrid: IgxHierarchicalGridComponent; + public totalCount = 0; + public mode = GridPagingMode.Remote; + private _dataLengthSubscriber; + + public ngOnInit(): void { + this._dataLengthSubscriber = this.remoteService.getDataLength( + { parentID: null, rootLevel: true, key: 'Customers' }).subscribe((length) => { + this.totalCount = length; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.hierarchicalGrid.isLoading = true; + this.remoteService.getData( + { parentID: null, rootLevel: true, key: 'Customers' }, this.hierarchicalGrid.perPage) + .subscribe((data) => { + this.hierarchicalGrid.isLoading = false; + this.hierarchicalGrid.data = data; + }, + (error) => { + this.hierarchicalGrid.emptyGridMessage = error.message; + this.hierarchicalGrid.isLoading = false; + this.hierarchicalGrid.cdr.detectChanges(); + } + ); + } + + public dateFormatter(val: string) { + return new Intl.DateTimeFormat('en-US').format(new Date(val)); + } + + public gridCreated(event: IGridCreatedEventArgs, _foreignKey: string) { + const dataState = { + foreignKey: _foreignKey, + key: event.owner.key, + parentID: event.parentID, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + }, + (error) => { + event.grid.emptyGridMessage = error.message; + event.grid.isLoading = false; + event.grid.cdr.detectChanges(); + } + ); + } + + public pagingDone(page) { + const skip = page.current * this.hierarchicalGrid.perPage; + + this.remoteService.getData( + { parentID: null, rootLevel: true, key: 'Customers' }, skip, this.hierarchicalGrid.perPage) + .subscribe((data) => { + this.hierarchicalGrid.data = data; + this.hierarchicalGrid.cdr.detectChanges(); + }, + (error) => { + this.hierarchicalGrid.emptyGridMessage = error.message; + this.hierarchicalGrid.data = null; + this.hierarchicalGrid.cdr.detectChanges(); + } + ); + } + + public getFirstPage() { + this.remoteService.getData( + { parentID: null, rootLevel: true, key: 'Customers' }, 0, this.hierarchicalGrid.perPage) + .subscribe((data) => { + this.hierarchicalGrid.data = data; + this.hierarchicalGrid.cdr.detectChanges(); + }); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; + } +```
### Remote Paging with custom igx-paginator-content When we define a custom paginator content we need to define the content in a way to get the data only for the requested page and to pass the correct **skip** and **top** parameters to the remote service according to the selected page and items [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage). We are going to use the `` in order to ease our example configuration, along with the [`IgxPageSizeSelectorComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageSizeSelectorComponent.html) and [`IgxPageNavigationComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageNavigationComponent.html) that were introduced - `igx-page-size` will add the per page dropdown and label and `igx-page-nav` will add the navigation action buttons and labels. ```html + + + [This is my custom content] + + ``` ```typescript @ViewChild('hierarchicalGrid', { static: true }) public hierarchicalGrid: IgxHierarchicalGridComponent; public ngOnInit(): void { + this._dataLengthSubscriber = this.remoteService.getDataLength( + { parentID: null, rootLevel: true, key: 'Customers' }).subscribe((length) => { + this.totalCount = length; + }); } public ngAfterViewInit() { + this.hierarchicalGrid.isLoading = true; + this._dataSubscriber = this.remoteService.getData({parentID: null, rootLevel: true, key: 'Customers' }, 0, this.perPage) + .subscribe((data) => { + this.hierarchicalGrid.isLoading = false; + this.data.next(data); + },(error) => { + this.hierarchicalGrid.emptyGridMessage = error.message; + this.hierarchicalGrid.isLoading = false; + this.hierarchicalGrid.cdr.detectChanges(); + } + ); } ``` >[!NOTE] > In order the Remote Paging to be configured properly a `GridPagingMode.Remote` should be set: ```html ... public mode = GridPagingMode.Remote; ``` The last step will be to declare the paginator content based on your requirements. ```html + + [This is my custom content] + ``` After all the changes above, the following result will be achieved. ```typescript +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild, inject } from '@angular/core'; +import { GridPagingMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective } from 'igniteui-angular/paginator'; +import { RemotePagingService } from './remotePagingService'; +import { BehaviorSubject } from 'rxjs'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +@Component({ + providers: [RemotePagingService], + selector: 'app-hierarchical-grid-remote-paging', + styleUrls: ['./hierarchical-grid-remote-paging.component.scss'], + templateUrl: 'hierarchical-grid-remote-paging.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxPaginatorDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] +}) + +export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + + @ViewChild('hierarchicalGrid', { static: true }) public hierarchicalGrid: IgxHierarchicalGridComponent; + public page = 0; + public lastPage = false; + public firstPage = true; + public totalCount = 0; + public title = 'gridPaging'; + public selectOptions = [5, 10, 25, 50]; + public data: BehaviorSubject = new BehaviorSubject([]); + public mode = GridPagingMode.Remote; + + private _perPage = 10; + private _dataLengthSubscriber; + private _dataSubscriber; + + public ngOnInit(): void { + this._dataLengthSubscriber = this.remoteService.getDataLength( + { parentID: null, rootLevel: true, key: 'Customers' }).subscribe((length) => { + this.totalCount = length; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + + if (this._dataSubscriber) { + this._dataSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.hierarchicalGrid.isLoading = true; + this._dataSubscriber = this.remoteService.getData({parentID: null, rootLevel: true, key: 'Customers' }, 0, this.perPage) + .subscribe((data) => { + this.hierarchicalGrid.isLoading = false; + this.data.next(data); + },(error) => { + this.hierarchicalGrid.emptyGridMessage = error.message; + this.hierarchicalGrid.isLoading = false; + this.hierarchicalGrid.cdr.detectChanges(); + } + ); + } + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0); + } + + public dateFormatter(val: string) { + return new Intl.DateTimeFormat('en-US').format(new Date(val)); + } + + public gridCreated(event: IGridCreatedEventArgs, _foreignKey: string) { + const dataState = { + foreignKey: _foreignKey, + key: event.owner.key, + parentID: event.parentID, + rootLevel: false + }; + event.grid.isLoading = true; + this.remoteService.getData(dataState).subscribe( + (data) => { + event.grid.isLoading = false; + event.grid.data = data; + event.grid.cdr.detectChanges(); + }, + (error) => { + event.grid.emptyGridMessage = error.message; + event.grid.isLoading = false; + event.grid.cdr.detectChanges(); + } + ); + } + + public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + this.remoteService.getData( + { parentID: null, rootLevel: true, key: 'Customers' }, skip, top).subscribe((data) => { + this.data.next(data); + this.hierarchicalGrid.cdr.detectChanges(); + }, + (error) => { + this.hierarchicalGrid.emptyGridMessage = error.message; + this.data.next([]); + this.hierarchicalGrid.cdr.detectChanges(); + } + ); + } + + public perPageChange(perPage: number) { + const skip = this.page * perPage; + const top = perPage; + + this.remoteService.getData(skip, top); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + [This is my custom content] + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; + } +```
## Known Issues and Limitations - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning - In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IRowSelectionEventArgs.html#oldSelection) event argument will not contain the full row data object for the rows that are currently out of the data view. In this case, `rowSelectionChanging.oldSelection` object will contain only one property, which is the `primaryKey` field. For the rest of the rows, currently in the data view, `rowSelectionChanging.oldSelection` will contain the whole row data. ## API References
- [IgxPaginatorComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html) - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Paging](paging.md) - [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md new file mode 100644 index 000000000..b930cd7cc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-actions.md @@ -0,0 +1,116 @@ +--- +_tocName: Row Actions +_premium: true +--- +--- title: Row actions in Angular Data Grid - Ignite UI for Angular _description: The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular ActionStrip components, Angular ActionStrip directives, Angular ActionStrip controls _license: commercial --- # Row Actions in Angular Hierarchical Grid The hierarchical grid component in Ignite UI for Angular provides the ability to use [ActionStrip](../action-strip.md) and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations. ## Usage The first step is to import the **IgxActionStripModule** in our **app.module.ts** file: ```typescript // app.module.ts ... import { IgxActionStripModule } from 'igniteui-angular/action-strip'; // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxActionStripModule], + ... }) ``` The predefined `actions` UI components are: - [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - includes functionality and UI specifically designed for the grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#rowEditable) option and row deletion of the grid. - [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - includes functionality and UI specifically designed for the grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. They are added inside the `` and this is all needed to have an Action Strip providing default interactions. ```html + + + + + + + ``` >[!NOTE] > When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. ## Custom implementation These components expose templates giving flexibility for customization. For instance, if we would like to use the `ActionStrip` for a Gmail scenario with row actions such as `delete`, `edit` and etc. You can simply create button component with `igx-icon`, add click event to it and insert it into the `igx-action-strip` component. ```html + + + + + ``` ```typescript +import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, ViewChildren, QueryList, inject } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-grid-row-action-strip', + styleUrls: [`hierarchical-grid-action-strip-sample.scss`], + templateUrl: 'hierarchical-grid-action-strip-sample.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class HGridActionStripSampleComponent implements AfterViewInit{ + private cdr = inject(ChangeDetectorRef); + + @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) + public grid: IgxHierarchicalGridComponent; + + @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) + public columns: QueryList; + + public data: any[]; + public discardedTransactionsPerRecord: Map = new Map(); + + constructor() { + this.data = SINGERS; + } + + public ngAfterViewInit(): void { + this.columns.forEach((col) => col.width = '19%'); + this.cdr.detectChanges(); + } + + public formatter = (a) => a; + + public isDirty(rowContext: RowType) { + const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key); + return rowContext && (rowContext.deleted || isRowEdited); + } + + public isDeleted(rowContext: RowType) { + return rowContext && rowContext.deleted; + } + + public inEditMode(rowContext: RowType) { + return rowContext && rowContext.inEditMode; + } + + public startEdit(rowContext: RowType): void { + const firstEditable = rowContext.cells.filter(cell => cell.editable)[0]; + const grid = rowContext.grid; + + if (grid.rowList.filter(r => r === rowContext).length !== 0) { + grid.gridAPI.crudService.enterEditMode(firstEditable); + firstEditable.activate(null); + } + } + + public commit(rowContext: RowType) { + this.grid.transactions.commit(this.grid.data, rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, []); + } + + public redo(rowContext: RowType) { + const rowID = rowContext.key; + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID); + lastDiscarded.forEach((transaction) => { + const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id); + this.grid.transactions.add(transaction, recRef); + }); + this.discardedTransactionsPerRecord.set(rowID, []); + } + + public hasDiscardedTransactions(rowContext: RowType) { + if (!rowContext) { return false; } + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key); + return lastDiscarded && lastDiscarded.length > 0; + } + + public undo(rowContext: RowType) { + const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true) + .filter(x => x.id === rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard); + this.grid.transactions.clear(rowContext.key); + } +} +``` >[!NOTE] > The predefined actions inherit [`IgxGridActionsBaseDirective`]({environment:infragisticsBaseUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. ## API References For more detailed information regarding the Action Strip API, refer to the following links: - [`IgxActionStripComponent API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) Additional components and/or directives that can be used within the Action Strip: - [`IgxGridActionsBaseDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridactionsbasedirective.html) - [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - [`IgxDividerDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md new file mode 100644 index 000000000..6d3d4432e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-adding.md @@ -0,0 +1,147 @@ +--- +_tocName: Row Adding +_premium: true +--- +--- title: Adding Rows in Angular Hierarchical Grid - Ignite UI for Angular _description: Learn how to use and customize the built-in row adding functionality with Ignite UI for Angular. CRUD capabilities and Intuitive grid row adding. See examples! _keywords: row adding, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/row-adding --- # Adding Rows in Angular Hierarchical Grid The Hierarchical Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. Add an [Action Strip](../action-strip.md) component with editing actions enabled in the grid's template, hover a row and use the provided button or press ALT + + to spawn the row adding UI. ## Angular Hierarchical Grid Row Adding Example The following sample demonstrates how to enable native row adding in the Hierarchical Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript +import { Component, OnInit } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, IgxGridEditingActionsComponent } from 'igniteui-angular/grids/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-add-row', + styleUrls: ['./hierarchical-grid-add-row.component.scss'], + templateUrl: './hierarchical-grid-add-row.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxRowIslandComponent] +}) + +export class HGridAddRowSampleComponent implements OnInit { + public localdata; + + + public ngOnInit(): void { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.addSingerBtn.igx-button--contained{ + margin-bottom: 10px; + background-color: lightgrey; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.26) + } +} + +.dialogNewRecord { + margin: 10px; + padding: 10px;; +} + +.igx-input-group { + margin-bottom: 10px; + padding: 5px; +} +.igx-checkbox { + margin-top: 5px; + margin-bottom: 5px; + padding-top: 8px; + padding-bottom: 5px; +} + +.reorderLevelInput { + color: black; + width: 100%; +} + +.grid-wrapper { + padding: 16px; +} +```
## Row Adding Usage To get started import the `IgxHierarchicalGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxHierarchicalGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxHierarchicalGridModule], + ... }) export class AppModule {} ``` Then define a Hierarchical Grid with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) set to true and an [Action Strip](../action-strip.md) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. ```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` > [!NOTE] > Setting primary key is mandatory for row adding operations. > [!NOTE] > Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) column's input to `false`. > [!NOTE] > The IgxGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/rowtype.html)) to fine tune which records the button shows for. The internal [`IgxBaseTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) is automatically provided for Hierarchical Grid. It holds pending cell changes until the row state is submitted or cancelled. ## Start Row Adding Programmatically Hierarchical Grid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.grid.beginAddRowById('ALFKI'); // spawns the add row UI under the row with PK 'ALFKI' this.grid.beginAddRowById(null); // spawns the add row UI as the first record ``` The `beginAddRowByIndex` method works similarly but requires you to specify the index _at_ which the UI should spawn. Allowed values range between 0 and the size of the data view - 1. ```typescript this.grid.beginAddRowByIndex(10); // spawns the add row UI at index 10 this.grid.beginAddRowByIndex(0); // spawns the add row UI as the first record ``` ## Positioning - The Default position row add UI is below the row that the end user clicked the add row button for. - The Hierarchical Grid scrolls to fully display the add row UI automatically. - The overlay for the add row UI maintains its position during scrolling. ## Behavior The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the [Hierarchical Grid Row Editing](row-editing.md) topic for more information. After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the Hierarchical Grid. In a Hierarchical Grid that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the Hierarchical Grid to its position if it is not in view. ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. ## Feature Integration - Any row adding operation will stop if the data view of the Hierarchical Grid gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, etc. - Summaries are updated after the row add operation finishes. The same is valid for the other data view dependant features such as sorting, filtering, etc. - When spawning the UI for Hierarchical Grids, any child layout currently expanded for a row that the end user clicks the add row button for is collapsed. ## Customizing Row Adding Overlay ### Customizing Text Customizing the text of the row adding overlay is possible using the `igxRowAddTextDirective`. ```html + Adding Row + ``` ### Customizing Buttons Customizing the buttons of the row editing overlay is possible using the `igxRowEditActionsDirective`. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `igxRowEditTabStopDirective`. + + ```html + + + + ``` > [!NOTE] > Using `igxRowEditActions` directive will change edit actions for both editing and adding overlay buttons. ## Remote scenarios In most remote data scenarios the Primary Key assignment happens on the create server request. In this case the added records on the client will not have the final primary key value until saved on the server's data base. In that case the recommended way to handle this update in the Hierarchical Grid is as follows: - If the Hierarchical Grid does not use transactions. + + Once the create request is successfully completed and returns the added record data, you can replace that record's id in the local data record instance. - If the Hierarchical Grid uses transactions. + + Once the create request or batch update request is successfully completed and returns the added record instances (with their db generated ids), the related ADD transactions should be cleared from the transaction log using the [clear](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/transactionservice.html#clear) API method. This is necessary because the local transaction will have a generated id field, which may differ than the one created in the data base, so they should be cleared. You can then add the record(s) passed in the response to the local data instance. This will ensure that the remotely generated ids are always reflected in the local data, and subsequent update/delete operations target the correct record ids. ## Styling The row adding UI comprises the buttons in the `IgxActionStrip` editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics: - [Hierarchical Grid Row Editing](row-editing.md#styling) - [IgxSnackbar](../snackbar.md#styling) - [IgxActionStrip](../action-strip.md#styling) ## API References - [rowEditable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) - [onRowEditEnter](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onRowEditEnter) - [onRowEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onRowEdit) - [rowEditDone](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditDone) - [onRowEditCancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onRowEditCancel) - [endEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#endEdit) - [primaryKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#primaryKey) - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxActionStripComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) - [IgxGridEditingActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) ## Additional Resources
- [Hierarchical Grid Overview](hierarchical-grid.md) - [Hierarchical Grid Editing](editing.md) - [Hierarchical Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md new file mode 100644 index 000000000..022cb935e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-drag.md @@ -0,0 +1,593 @@ +--- +_tocName: Row Drag +_premium: true +--- +--- title: Row Dragging in Angular Hierarchical Grid - Ignite UI for Angular _description: Row dragging in Angular Hierarchical Grid is used to quickly rearrange rows by dragging them with the mouse. See how to configure row dragging in your project. _keywords: angular drag component, material component, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/row-drag --- # Row Dragging in Angular Hierarchical Grid In Ignite UI for Angular Hierarchical Grid, **RowDrag** is initialized on the root `igx-hierarchical-grid` component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDraggable) input. Enabling row dragging provides users with a row drag-handle with which they can initiate dragging of a row. ## Angular Hierarchical Grid Row Drag Example ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { createData, IDrive } from '../../data/files.data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +// eslint-disable-next-line no-shadow +enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'remove' +} + +@Component({ + selector: 'app-hierarchical-row-drag-base', + styleUrls: ['./hierarchical-row-drag-base.component.scss'], + templateUrl: 'hierarchical-row-drag-base.component.html', + imports: [IgxDropDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridRowDragBaseComponent { + @ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true }) + public hGrid: IgxHierarchicalGridComponent; + public localData: IDrive[] = []; + constructor() { + this.localData = createData(3, 12, 8); + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } + + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} +``` +```html +
+ delete +
Drag a row here to delete it
+
+ + + + + + + + + + + + + + + +``` +```scss +.drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; +} + +:host { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-flow: row; + width: 100%; + padding-top: 10px; +} + +.igx-grid { + margin: 0 1rem; +} +```
## Configuration In order to enable row-dragging for your `igx-hierarchical-grid`, all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDraggable) to **`true`**. Once this is enabled, a row-drag handle will be displayed on each row. This handle can be used to initiate row dragging. ```html + ... ``` Clicking on the drag-handle and _moving the cursor_ while holding down the button will cause the grid's [`rowDragStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDragStart) event to fire. Releasing the click at any time will cause [`rowDragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDragEnd) event to fire. Below, you can find a walkthrough on how to configure an `igx-hierarchical-grid` to support row dragging and how to properly handle the drop event. @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { In this example, we'll handle dragging a row from a grid to a designated area and, when dropping it, removing it from the grid. } ### Drop Areas Enabling row-dragging was pretty easy, but now we have to configure how we'll handle row-_dropping_. We can define where we want our rows to be dropped using the [`igxDrop` directive](../drag-drop.md). First we need to import the `IgxDragDropModule` in our app module: ```typescript import { ..., IgxDragDropModule } from 'igniteui-angular/directives'; // import { ..., IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package ... @NgModule({ + imports: [..., IgxDragDropModule] }) ``` Then, in our template, we define a drop-area using the directive's selector: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```html
+ delete +
Drag a row here to delete it
``` } You may enable animation when a row is dropped on a non-droppable area using the `animation` parameter of the [`rowDragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDragEnd) event. If set to true, the dragged row will animate back to its' original position when dropped over a non-droppable area. You may enable animation like this: ```typescript export class IgxHierarchicalGridRowDragComponent { + + public onRowDragEnd(args) { + args.animation = true; + } } ``` ### Drop Area Event Handlers Once we've defined our drop-area in the template, we have to declare our handlers for the `igxDrop`'s [`enter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#enter), [`leave`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#leave) and [`dropped`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#dropped) events in our component's `.ts` file. First, let's take a look at our `enter` and `leave` handlers. In those methods, we just want to change the icon of the drag's _ghost_ so we can indicate to the user that they are above an area that allows them to drop the row: ```typescript export class IgxHierarchicalGridRowDragComponent { + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } } ``` The `changeGhostIcon` **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the `igx-grid__drag-indicator` class that is applied to the drag-indicator container), changing the element's inner text to the passed one. The icons themselves are from the [`material` font set](https://material.io/tools/icons/) and are defined in a separate **`enum`**: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```typescript enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'remove' } ``` } Next, we have to define what should happen when the user actually _drops_ the row inside of the drop-area. @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```typescript export class IgxHierarchicalGridRowDragComponent { + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } } ``` Once the row is dropped, we just call the row's [`delete()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxHierarchicalGridRowComponent.html#delete) method } > [!NOTE] > When using row data from the event arguments (`args.dragData.data`) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. ### Templating the drag ghost The drag ghost can be templated using the `IgxRowDragGhost` directive, applied to a `` inside of the `igx-hierarchical-grid`'s body: ```html ... + +
+ arrow_right_alt +
+ ... ``` The result of the configuration can be seem below in a `igx-hierarchical-grid` with row dragging and multiple selection enabled. The demo shows the count of the currently dragged rows: #### Example Demo The drag ghost can be templated on every grid level, making it possible to have multiple ghost templates or to only provide a template for a single row island. ```html ... + +
+ arrow_right_alt +
+ + + ... + + + + ... ``` ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxRowDragGhostDirective, RowType } from 'igniteui-angular/grids/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { createData, IDrive } from '../../data/files.data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-multi-row-drag', + styleUrls: ['./hierarchical-grid-multi-row-drag.component.scss'], + templateUrl: 'hierarchical-grid-multi-row-drag.component.html', + imports: [IgxDropDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxRowDragGhostDirective, IgxIconComponent] +}) + +export class HGridMultiRowDragComponent { + @ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true }) + public hGrid: IgxHierarchicalGridComponent; + public localData: IDrive[] = []; + public selectionMode: GridSelectionMode = 'multiple'; + public ids; + public grid; + public selected = false; + public countIcon = 'drag_indicator'; + public dragIcon = 'keyboard_backspace'; + constructor() { + this.localData = createData(3, 12, 8); + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public handleRowSelectionChange(args) { + this.ids = args.newSelection; + this.grid = args.owner; + this.selected = this.ids.length !== 0; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + if (this.selected === false) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } else { + if (this.grid == null) { + this.ids.forEach((rowData) => { + this.hGrid.deleteRow(rowData); + }); + this.selected = false; + } else { + this.ids.forEach((rowData) => { + this.grid.deleteRow(rowData); + }); + this.selected = false; + } + } + } + + public onRowDragStart(args) { + if (this.selected === false) { + this.countIcon = `filter_1`; + } else { + const count = this.ids.length; + this.countIcon = `filter_${count > 9 ? '9_plus' : `${count}`}`; + } + } + + public onLeaveAllowed(args) { + this.onRowDragStart(args); + this.dragIcon = 'keyboard_backspace'; + } + + public onEnterAllowed(args) { + this.dragIcon = 'remove'; + } +} +``` +```html +
+
Drag a row here to delete it
+
+ + + + + + + + + +
+ {{dragIcon}}{{countIcon}} +
+ + + + + + + +
+ {{dragIcon}}{{countIcon}} +
+ + + + +
+ {{dragIcon}}{{countIcon}} +
+ + +``` +```scss +.drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; +} + +:host { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-flow: row; + width: 100%; + padding-top: 10px; +} +.allow-drop { + z-index: 1; +} +.igx-grid { + margin: 0 1rem; +} +```
### Templating the drag icon The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (`drag_indicator`) to `drag_handle`. To do so, we can use the `igxDragIndicatorIcon` to pass a template inside of the `igx-hierarchical-grid`'s body: ```html ... + + drag_handle + ... ``` Once we've set the new icon template, we also need to adjust the `DEFAULT` icon in our `DragIcon enum`, so it's properly change by the `changeIcon` method: ```typescript enum DragIcon { + DEFAULT = "drag_handle", + ... } ``` @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ### Styling the drop area Once our drop handlers are properly configured, all that's left is to style our drop area a bit: ```css .drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; } :host { + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + width: 100%; } ``` The result can be seen in the demo below: } #### Example Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent, IgxDragIndicatorIconDirective, RowType } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { createData, IDrive } from '../../data/files.data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +// eslint-disable-next-line no-shadow +enum DragIcon { + DEFAULT = 'drag_handle', + ALLOW = 'remove' +} + +@Component({ + selector: 'app-hierarchical-grid-row-drag', + styleUrls: ['./hierarchical-grid-row-drag.component.scss'], + templateUrl: 'hierarchical-grid-row-drag.component.html', + imports: [IgxDropDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxDragIndicatorIconDirective] +}) + +export class HGridDragSampleComponent { + @ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true }) + public hGrid: IgxHierarchicalGridComponent; + public localData: IDrive[] = []; + constructor() { + this.localData = createData(3, 12, 8); + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } + + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} +``` +```html +
+ delete +
Drag a row here to delete it
+
+ + + + + + + + + + + + + + + + drag_handle + + +``` +```scss +.drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; +} + +:host { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-flow: row; + width: 100%; + padding-top: 10px; +} + +.igx-grid { + margin: 0 1rem; +} +```
## Application Demo ### Row Reordering Demo With the help of the grid's row drag events and the `igxDrop` directive, you can create a grid that allows you to reorder rows by dragging them. Since all of the actions will be happening _inside_ of the grid's body, that's where you have to attach the `igxDrop` directive: ```html + ... ``` > [!NOTE] > Make sure that there is a `primaryKey` specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered Once `rowDraggable` is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { - Is the row expanded? If so, collapse it. - Was the row dropped inside of the grid? - If so, on which _other_ row was the dragged row dropped? - Once you've found the _target_ row, swap the records' places in the `data` array - Was the row initially selected? If so, mark it as selected. } Below, you can see this implemented in the component's `.ts` file: ```typescript export class HGridRowReorderComponent { + public rowDragStart(args: any): void { + const targetRow = args.dragData; + if (targetRow.expanded) { + targetRow.expanded = false; + } + } + + public rowDrop(args: IDropDroppedEventArgs): void { + const targetRow = args.dragData; + const event = args.originalEvent; + const cursorPosition: Point = { x: event.clientX, y: event.clientY }; + this.moveRow(targetRow, cursorPosition); + } + + private moveRow(draggedRow: RowType, cursorPosition: Point): void { + // const parent: IgxHierarchicalGridComponent = (draggedRow as any).grid; + // const parent = args.drag.ghostContext.grid; + const parent = this.hGrid; + const rowIndex: number = this.getTargetRowIndex(parent.rowList.toArray(), cursorPosition); + if (rowIndex === -1) { return; } + const wasSelected = draggedRow.selected; + draggedRow.delete(); + parent.data.splice(rowIndex, 0, draggedRow.data); + if (wasSelected) { + parent.selectRows([parent.rowList.toArray() + .find((r) => r.rowID === draggedRow.key).rowID], false); + } + } + + private getTargetRowIndex(rowListArr: RowType[], cursorPosition: Point): number { + const targetElem: IgxHierarchicalRowComponent = this.catchCursorPosOnElem(rowListArr, cursorPosition); + return rowListArr.indexOf(rowListArr.find((r) => r.rowData.id === targetElem.rowData.id)); + } + + private catchCursorPosOnElem(rowListArr: any[], cursorPosition: Point) + : IgxHierarchicalRowComponent { + for (const row of rowListArr) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + return row; + } else if (row === rowListArr[rowListArr.length - 1] && cursorPosition.y > rowRect.bottom) { + return row; + } + } + } } ``` With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row. ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { GridSelectionMode, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { Point } from 'igniteui-angular/core'; +import { createData, IDrive } from '../../data/files.data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-row-reorder', + styleUrls: ['./hierarchical-grid-row-reorder.component.scss'], + templateUrl: 'hierarchical-grid-row-reorder.component.html', + imports: [IgxHierarchicalGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) +export class HGridRowReorderComponent { + @ViewChild(IgxHierarchicalGridComponent, { read: IgxHierarchicalGridComponent, static: true }) + public hGrid: IgxHierarchicalGridComponent; + public localData: IDrive[] = []; + public selectionMode: GridSelectionMode = 'multiple'; + constructor() { + this.localData = createData(3, 12, 8); + } + + public rowDragStart(args: any): void { + const targetRow: RowType = args.dragData; + // if the row-to-be-dragged is expanded - collapse it + if (targetRow.expanded) { + targetRow.expanded = false; + } + } + + public rowDrop(args: IDropDroppedEventArgs): void { + const targetRow = args.dragData; + const event = args.originalEvent; + const cursorPosition: Point = { x: event.clientX, y: event.clientY }; + this.moveRow(targetRow, cursorPosition); + } + + private moveRow(draggedRow: RowType, cursorPosition: Point): void { + // const parent: IgxHierarchicalGridComponent = (draggedRow as any).grid; + // const parent = args.drag.ghostContext.grid; + const parent = this.hGrid; + const rowIndex: number = this.getTargetRowIndex(parent.rowList.toArray(), cursorPosition); + if (rowIndex === -1) { return; } + // delete the dragged row and then insert it at its new position + const wasSelected = draggedRow.selected; + draggedRow.delete(); + parent.data.splice(rowIndex, 0, draggedRow.data); + if (wasSelected) { + // find the row that has the same ID as the dragged row and select it + parent.selectRows([parent.rowList.toArray() + .find((r) => r.key === draggedRow.key).key], false); + } + } + + private getTargetRowIndex(rowListArr: any[], cursorPosition: Point): number { + const targetElem = this.catchCursorPosOnElem(rowListArr, cursorPosition); + // get the index of the row that has the same ID as the dragged row + return rowListArr.indexOf(rowListArr.find((r) => r.key === targetElem.key)); + } + + private catchCursorPosOnElem(rowListArr: any[], cursorPosition: Point): any { + // get the row which the dragged row was dropped on + for (const row of rowListArr) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + return row; + } else if (row === rowListArr[rowListArr.length - 1] && cursorPosition.y > rowRect.bottom) { + return row; + } + } + } +} +``` +```html + + + + + + + + + + + + + + + +``` +```scss +:host { + display: flex; + flex-flow: row; + align-items: center; + justify-content: center; + padding: 8px 0px; +} + +.igx-grid { + margin: 0 1rem; +} +```
## Limitations Currently, there are no known limitations for the `rowDraggable` directive. ## API References - [rowDraggable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDraggable) - [rowDragStart](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDragStart) - [rowDragEnd](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowDragEnd) - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) ## Additional Resources
- [Hierarchical Grid Overview](hierarchical-grid.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md new file mode 100644 index 000000000..fb9363e2b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-editing.md @@ -0,0 +1,247 @@ +--- +_tocName: Row Editing +_premium: true +--- +--- title: Editing Rows in Angular Hierarchical Grid - Ignite UI for Angular _description: Want to enable row editing in Angular Hierarchical Grid? Need a powerful API for CRUD operations? Try our Ignite UI for Angular Data Grid rows editing component! _keywords: row editing, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/row-editing --- # Angular Hierarchical Grid Row Editing The Hierarchical Grid provides a convenient way to perform data manipulations through inline editing and a powerful API for Angular CRUD operations. Click on a row and press **Enter key** or simply double click with the mouse on the row that needs to be modified. ## Angular Hierarchical Grid Row Editing Example The following sample demonstrates how to enable row editing in the Hierarchical Grid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-row-editing', + styleUrls: ['./hierarchical-grid-row-editing.component.scss'], + templateUrl: 'hierarchical-grid-row-editing.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HGridRowEditingSampleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +```
> [!NOTE] > When a row is in edit mode, then clicking on a cell on another row will act like the Done button is pressed - submit all the changes of the previous row. If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. ## Row Editing Usage To get started import the `IgxHierarchicalGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxHierarchicalGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxHierarchicalGridModule], + ... }) export class AppModule {} ``` Then define a Hierarchical Grid with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) set to true: ```html + + + + + + + + + + + + + + + + + + + + + + + + ``` > [!NOTE] > Setting primary key is mandatory for row editing operations. > [!NOTE] > It's not needed to enable editing for individual columns. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) property in the Hierarchical Grid, will mean that all rows, with defined `field` property, excluding primary one, will be editable. If you want to disable editing for specific column, then you set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) column's input to `false`. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; // import { IgxRowIslandComponent, IgxHierarchicalGridComponen } from '@infragistics/igniteui-angular'; for licensed package import { SINGERS } from './data'; @Component({ + selector: 'hierarchical-grid-row-editing', + styleUrls: ['./hierarchical-grid-row-editing.component.scss'], + templateUrl: 'hierarchical-grid-row-editing.component.html' }) export class HGridRowEditingSampleComponent implements OnInit { + public localdata; + + @ViewChild('layout1') + layout1: IgxRowIslandComponent; + + @ViewChild('hierarchicalGrid') + hierarchicalGrid: IgxHierarchicalGridComponent; + + constructor() { + this.localdata = SINGERS; + } } ``` > [!NOTE] > The Hierarchical Grid uses internally a provider [`IgxBaseTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) that holds pending cell changes, until row state submitted or cancelled. ## Positioning - Default position of the overlay will be below the row that is in edit mode - If there is no space below the row then overlay will appear above the row. - Once shown - top or bottom, overlay will maintain this position during scrolling, until the overlay is closed. ## Behavior - If row is in edit mode, then editing will continue, if a cell from the same row is clicked. - Clicking "Done" button will finish row editing and will submit changes either to the data source, or to a transaction if available. In addition row will exit edit mode. - Clicking "Cancel" button will revert all current changes in the row and row will exit edit mode. - If row is in edit mode, then clicking a cell from another row will finish the current row edit and will submit new row changes (the same behavior clicking "Done" button). If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. - If row is in edit mode and Hierarchical Grid is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When Hierarchical Grid is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the Hierarchical Grid, the cell will also stay in edit mode. - When perform _sorting_, _filtering_, _searching_ and _hiding_ operations, will revert all current changes in the row and row will exit edit mode. - When perform _paging_, _resizing_, _pinning_ and _moving_ operations, will exit edit mode and will submit latest value. - Each modified cell gets edited style until row edit is finished. This is the behavior, when Hierarchical Grid is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed. ## Keyboard Navigation - `Enter` and `F2` enters row edit mode - `Esc` exits row edit mode and doesn't submit any of the cell changes, made while the row was in edit mode. - `Tab` move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. ## Feature Integration - Any data changing operation will terminate row editing operations and will submit current row changes. This will include operations like sorting, changing grouping and filtering criteria, paging, etc. - Summaries will be updated after row edit is finished. Same is valid for the other features like sorting, filtering, etc. ## Customizing Row Editing Overlay ### Customizing Text Customizing the text of the row editing overlay is possible using the `igxRowEditTextDirective`. The `rowChangesCount` property is exposed and it holds the count of the changed cells. ```html + Changes: {{rowChangesCount}} + ``` ### Customizing Buttons Customizing the buttons of the row editing overlay is possible using the `igxRowEditActionsDirective`. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `igxRowEditTabStopDirective`. + + ```html + + + + ``` ## Styling Using the [Ignite UI for Angular Theme Library](../themes/index.md), we can greatly alter the Row Editing overlay. The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: + - [`igx-banner`](../banner.md) in order to render its contents + - [`igx-button`](../button.md)s are rendered in the default template (for the `Done` and `Cancel` buttons). In the below example, we will make use of those two components' styling options, [`button styling`](../button.md#styling) & [`banner-styling`](../banner.md#styling), to customize the experience of our IgxHierarchicalGrid's Row Editing. We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in the [Cell Styling section](cell-editing.md#styling). ### Import theme The easiest way to style the Row Editing banner is to define styles in our `app`'s global style file (typically `styles.scss`). The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Once we've imported the themes file, we can create custom themes. #### Define the theme We can now define a custom [`banner theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) that will affect our Row Editing background and make use of one of the predefined palettes namely `$purple-palette` : ```scss $banner-theme: banner-theme( + $banner-background: #e3e3e3, + $banner-message-color: color($purple-palette, "secondary", 600) ); ``` Here we are using `my-banner-palette` in conjunction with [`igx-color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) (exposed by the theme library) for generating our colors. ### Include the theme All we have to do now is apply the theme with a Sass `@include` statement. We pass our newly defined `$banner-theme` through the [`tokens mixin`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-tokens): ```scss :host { + @include tokens($banner-theme); } ``` ### Component styles Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope the banner theme to the style file of the specific component it's applied to. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid Row Editing Overlay. ```scss // custom.component.scss :host { + ::ng-deep { + @include tokens($banner-theme); + } } ``` With the above syntax, our custom banner theme properly applies to the grid's Row Editing overlay. ### Custom Templates To further customize our Row Editing overlay, we can pass a custom template so we can style the `Done` and `Cancel` buttons separately: ```html + +
+ + +
+ ``` After we've defined our custom buttons, we can make use of the [`flat-icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-icon-button-theme) to style them. You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](../icon-button.md#icon-button-styling). We can create a custom theme for our `Done` and `Cancel`: ```scss // custom.component.scss ... $button-theme: flat-icon-button-theme( + $palette: $purple-palette ); ... .custom-buttons { + @include tokens($button-theme); } ``` We scope our `@include` statement in `.custom-buttons` so that it is only applied to the `Done`and `Cancel` buttons. ### Demo After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below: ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective } from 'igniteui-angular/grids/core'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-row-edit-style', + styleUrls: ['./hierarchical-grid-row-edit-style.component.scss'], + templateUrl: 'hierarchical-grid-row-edit-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] +}) + +export class HGridRowEditStyleComponent { + public localdata; + + constructor() { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + Changes: {{rowChangesCount}} + + +
+ + +
+ + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$banner-theme: banner-theme( + $banner-background: #e3e3e3, + $banner-message-color: color($purple-palette, "secondary", 600) +); + +:host { + @include tokens($banner-theme); +} + +igx-hierarchical-grid { + @include palette($purple-palette); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## Known Issues and Limitations - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ## API References - [rowEditable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditable) - [onRowEditEnter](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onRowEditEnter) - [onRowEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onRowEdit) - [rowEditDone](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowEditDone) - [onRowEditCancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#onRowEditCancel) - [endEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#endEdit) - [field](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#field) - [editable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) - [primaryKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#primaryKey) - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Hierarchical Grid Overview](hierarchical-grid.md) - [Hierarchical Grid Editing](editing.md) - [Hierarchical Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md new file mode 100644 index 000000000..501f0e916 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-pinning.md @@ -0,0 +1,367 @@ +--- +_tocName: Row Pinning +_premium: true +--- +--- title: Row Pinning in Angular Hierarchical Grid - Ignite UI for Angular _description: Use the Angular Row pinning feature to lock rows with a rich and easy to use API. Let users pin rows in a particular order or duplicate them in a special area. _keywords: lock row, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/row-pinning --- # Angular Hierarchical Grid Row Pinning One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. **Row Pinning** in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Hierarchical Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an `igxActionStrip` component in the context of Hierarchical Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. ## Angular Hierarchical Grid Row Pinning Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-row-pinning', + styleUrls: ['./hierarchical-grid-row-pinning.component.scss'], + templateUrl: 'hierarchical-grid-row-pinning.component.html', + imports: [IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxRowIslandComponent] +}) + +export class HGridRowPinningSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid1', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + public localData; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + constructor() { + this.localData = SINGERS; + } + + public formatter = (a) => a; + + public ngOnInit() { + this.hierarchicalGrid.pinRow(SINGERS[0].Photo); + this.hierarchicalGrid.pinRow(SINGERS[3].Photo); + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } +} +``` +```html +
+ Bottom Row Pinning toggle +
+
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid-container { + display: flex; + padding: 20px; +} + +.switches { + margin-top: 24px; +} +``` ## Row Pinning UI The built-in row pinning UI is enabled by adding an `igxActionStrip` component with the `GridPinningActions` component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. ```html + + + + + + + ``` ## Row Pinning API Row pinning is controlled through the `pinned` input of the [`row`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html). Pinned rows are rendered at the top of the Hierarchical Grid by default and stay fixed through vertical scrolling of the unpinned rows in the Hierarchical Grid body. ```typescript this.hierarchicalGrid.getRowByIndex(0).pinned = true; ``` You may also use the Hierarchical Grid's [`pinRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#pinRow) or [`unpinRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#unpinRow) methods of the [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) to pin or unpin records by their ID: ```typescript this.hierarchicalGrid.pinRow('ALFKI'); this.hierarchicalGrid.unpinRow('ALFKI'); ``` Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#primaryKey) of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state. A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the [`rowPinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowPinning) event and changing the [`insertAtIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipinroweventargs.html#insertAtIndex) property of the event arguments to the desired position index. ```html ``` ```typescript public rowPinning(event) { + event.insertAtIndex = 0; } ``` ## Pinning Position You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. ```html ``` ```typescript public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; ``` ## Custom Row Pinning UI You can define your custom UI and change the pin state of the rows via the related API. ### Via extra column with icon Let's say that instead of an action strip you would like to show a pin icon in every row allowing the end-user to click and change a particular row's pin state. This can be done by adding an extra column with a cell template containing the custom icon. ```html + + + + {{cell.row.pinned ? 'lock' : 'lock_open'}} + + + + + + + ``` On click of the custom icon the pin state of the related row can be changed using the row's API methods. ```typescript public togglePinning(row: IgxGridRow, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } } ``` #### Demo ```typescript +import { Component, AfterViewInit, inject } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, RowPinningPosition, RowType } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { icons } from '../../services/svgIcons'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +const FILTERING_ICONS_FONT_SET = 'filtering-icons'; + +@Component({ + selector: 'app-hierarchical-grid-row-pinning-extra-column', + styleUrls: ['./hierarchical-grid-row-pinning-extra-column.component.scss'], + templateUrl: 'hierarchical-grid-row-pinning-extra-column.component.html', + imports: [IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxRowIslandComponent] +}) + +export class HGridRowPinningExtraColumnSampleComponent implements AfterViewInit{ + private iconService = inject(IgxIconService); + + public localData; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + constructor() { + this.localData = SINGERS; + } + + public ngAfterViewInit() { + const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin'); + pinnedIcons.forEach(icon => { + if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) { + this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET); + } + }); + } + + public togglePinning(row: RowType, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } + + public formatter = (a) => a; +} +``` +```html +
+ Bottom Row Pinning toggle +
+
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid-container { + display: flex; + padding: 16px; +} + +.pin-icon { + cursor: pointer; + color: #999; +} + +.pin-icon:hover { + color: #444 +} + +.switches { + margin-top: 24px; +} +``` ## Row Pinning Limitations - Only records that exist in the data source can be pinned. - The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied. - Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization). - The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed. - As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record. - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning
## Styling The IgxHierarchicalGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The Hierarchical Grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the Hierarchical Grid. Below, we are going through the steps of customizing the Hierarchical Grid's row pinning styling. ### Importing the Styling Library To begin the customization of the row pinning feature, you need to import the `index` file, where all styling functions and mixins are located. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Defining a Theme Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the row pinning feature as desired. ```scss $custom-grid-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f ); ``` ### Using CSS variables The last step is to pass the custom grid theme: ```scss :host { + @include tokens($custom-grid-theme); } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-row-pinning-styling', + styleUrls: ['./hierarchical-grid-row-pinning-styling.component.scss'], + templateUrl: 'hierarchical-grid-row-pinning-styling.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxRowIslandComponent] +}) + +export class HGridRowPinningStylingSampleComponent implements OnInit { + @ViewChild('hierarchicalGrid1', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + public localData; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + constructor() { + this.localData = SINGERS; + } + + public formatter = (a) => a; + + public ngOnInit() { + this.hierarchicalGrid.pinRow(SINGERS[0].Photo); + this.hierarchicalGrid.pinRow(SINGERS[3].Photo); + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxHierarchicalGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridrow.html) - [RowType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/RowType.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md new file mode 100644 index 000000000..2f3332cf6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-row-selection.md @@ -0,0 +1,451 @@ +--- +_tocName: Row selection +_premium: true +--- +--- title: Angular Grid Select Row - Ignite UI for Angular _description: Enable row selection to improve UX and let users manage single or multiple rows. See how easy it is to configure Row data select with Ignite UI. _keywords: data select, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/row-selection --- # Angular Hierarchical Grid Row Selection With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. When a user clicks on the row selector, the row will either become selected or deselected, enabling the user to select multiple rows of data. ## Angular Row Selection Example The sample below demonstrates the three types of Hierarchical Grid's **row selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to _hide_ or _show_ the row selector checkbox. ```typescript +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { GridSelectionMode, IRowSelectionEventArgs, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { SINGERS } from '../../data/singersData'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-hierarchical-grid-selection', + styleUrls: ['./hierarchical-grid-selection.component.scss'], + templateUrl: 'hierarchical-grid-selection.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] +}) + +export class HGridSelectionSampleComponent implements OnInit, OnDestroy { + @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent; + @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; + public localdata; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModes = []; + public hideRowSelectors = false; + public selectedRowsCount; + public selectedRowIndex; + + constructor() { + this.localdata = SINGERS; + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + } + public ngOnInit(): void { + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public ngOnDestroy(): void { + this.snackbar.close(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbarRowCount.close(); + this.snackbar.open(); + this.selectedRowsCount = undefined; + this.selectedRowIndex = undefined; + } + + public handleRowSelection(event: IRowSelectionEventArgs) { + this.selectedRowsCount = event.newSelection.length; + if (event.newSelection.length > 0) { + this.selectedRowIndex = event.newSelection[0].ID; + } + else this.selectedRowIndex = undefined; + this.snackbarRowCount.open(); + this.snackbar.close(); + } + + public formatter = (a) => a; + +} +``` +```html +
+
+ Hide Row Selectors + +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ notification_important + @if (selectionMode === 'multiple') { +

Number of selected rows: {{selectedRowsCount}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex !== undefined) { +

Currently selected row index: {{selectedRowIndex}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex === undefined) { +

There is no currently selected row.

+ } +
+ + + +
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • Now you can select multiple rows within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one row within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a row while interacting with grid UI.
    • +
  • If you need to select a row use grid API methods.
    • +
+ } +
+ +``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} + +.cell__inner_2 { + margin: 1px +} + +.grid-controls { + display: flex; + justify-content: space-between; + flex-flow: column; + align-items: flex-start; + position: relative; + > * { + margin-bottom: 16px; + } +} + +.grid__wrapper{ + padding: 16px; +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.container p { + margin-top: 20px; +} +```
## Setup In order to setup row selection in the [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html), you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following three modes: **none**, **single** and **multiple**. Below we will take a look at each of them in more detail. ### None Selection In the [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) by default row selection is disabled, otherwise _([rowSelection]="'none'")_. So you can **not** select or deselect a row through interaction with the Hierarchical Grid UI, the only way to complete these actions is to use the provided API methods. ### Single Selection Single row selection can now be easily set up, the only thing you need to do, is to set `[rowSelection] = '"single"'` property. This gives you the opportunity to **select only one row within a grid**. You can select a row by clicking on a cell or pressing the _space_ key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected **rowSelectionChanging** event is emitted. ```html ``` ```typescript /* selectionExample.component.ts */ public handleRowSelection(event) { + if (args.added.lenght && args.added[0] === 3) { + args.cancel = true; + } } ``` ### Multiple Selection To enable multiple row selection in the [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) just set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowSelection) property to `multiple`. This will enable a row selector field on each row and in the Hierarchical Grid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the _space_ key when a cell is focused. If you have selected one row and click on another while holding the _shift_ key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you _click_ while holding the _ctrl_ key, the row will be toggled and the previous selection will be preserved. ```html ``` ```ts + + public handleRowSelection(event: IRowSelectionEventArgs) { + // use event.newSelection to retrieve primary key/row data of latest selected row + this.selectedRowsCount = event.newSelection.length; + this.selectedRowIndex = event.newSelection[0]; + } ``` **Notes** - In order to have proper row selection and cell selection, while Hierarchical Grid has remote virtualization, a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#primarykey) should be provided. - When the Hierarchical Grid has remote virtualization, then clicking the header checkbox will select/deselect all records that are currently in the grid. When new data is loaded in the Hierarchical Grid on demand, newly added rows will not be selected and it is a limitation, so you should handle that behavior by yourself and you can select these rows by using the provided API methods. - Row selection will trigger [`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowSelectionChanging) event. This event gives you information about the _new selection_, _old selection_, the rows that have been _added_ and _removed_ from the old selection. Also the event is _cancellable_, so this allows you to prevent selection. - When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set `[hideRowSelectors] = true`. - When you switch between row selection modes at runtime, this will clear the previous row selection state. ## API usage ### Select rows programmatically The code snippet below can be used to select one or multiple rows simultaneously (via [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#primaryKey)); Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html ... ... // select rows and clear previous selection state ``` } ```html ... ... // select rows and preserve previous selection state ``` This will add the rows which correspond to the data entries with IDs 1, 2 and 5 to the Hierarchical Grid selection. ### Deselect rows If you need to deselect rows programmatically, you can use the `deselectRows(rowIds: [])` method. ```html ... ... ``` ### Row selection event When there is some change in the row selection **[`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelectionChanging)** event is emitted. **`rowSelectionChanging`** exposes the following arguments: - `oldSelection` - array of row's data that contains the previous state of the row selection. - `newSelection` - array of row's data that match the new state of the row selection. - `added` - array of row's data that are currently added to the selection. - `removed` - array of row's data that are currently removed according old selection state. - `event` - the original event that triggered row selection change. - `cancel` - allows you the prevent the row selection change. - `owner` - if the event is triggered from a child grid, this will give you a reference to the component, from which the event is emitted. #### Row selection event in remote data scenarios In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IRowSelectionEventArgs.html#oldSelection) event argument will not contain the full row data object for the rows that are currently out of the data view. In this case, `rowSelectionChanging.oldSelection` object will contain only one property, which is the `primaryKey` field. For the rest of the rows, currently in the data view, `rowSelectionChanging.oldSelection` will contain the whole row data. ```html ... ``` ```typescript /* selectionExample.component.ts */ public handleRowSelectionChange(args) { + args.cancel = true; // this will cancel the row selection } ``` ### Select all rows Another useful API method that [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) provides is `selectAll(onlyFilteredData)`. By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. But if you call the method with _false_ parameter, `selectAll(false)` will always select all data in the grid, even if filtering is applied. >[!NOTE] > Keep in mind that `selectAll()` will not select the rows that are deleted. ### Deselect all rows [`igx-hierarchical-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) provides `deselectAll(onlyFilteredData)` method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. But if you call the method with _false_ parameter, `deselectAll(false)` will always clear all row selection state even if filtering is applied. ### How to get selected rows If you need to see which rows are currently selected, you can get their row IDs with the `selectedRows` getter. ```typescript public getSelectedRows() { + const currentSelection = this.hierarchicalGrid.selectedRows; // return array of row IDs } ``` Additionally, assigning row IDs to `selectedRows` will allow you to change the grid's selection state. ```typescript // arrays of row IDs public mySelectedRows = ['Naomi Yepes', 'Ahmad Nazeri']; public childSelectedRows = ['Initiation', 'Emergency']; ``` ```html + + + + + ``` ### Row selector templates You can template header and row selectors in the Hierarchical Grid and also access their contexts which provide useful functionality for different scenarios. By default, the Hierarchical Grid **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [`rowSelectionChanging` event](#row-selection-event). In case you implement a custom template with a `click` handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row template To create a custom row selector template, within the `igx-hierarchical-grid`, declare an `` with `igxRowSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state. The `selected` property shows whether the current row is selected or not while the `index` property can be used to access the row index. ```html + {{ rowContext.index }} + ``` The `rowID` property can be used to get a reference of an `igx-hierarchical-grid` row. This is useful when you implement a `click` handler on the row selector element. ```html + ``` In the above example we are using an `igx-checkbox` and we bind `rowContext.selected` to its `checked` property. See this in action in our [`Row Numbering Demo`](#row-numbering-demo). > [!NOTE] > The `rowContext.select()` and `rowContext.deselect()` methods are exposed in the template context of an `igx-hierarchical-grid`. They make it easier to toggle the current row, especially in a child grid, when you implement a click handler that overrides the base functionality. ### Header template To create a custom header selector template, within the Hierarchical Grid, declare an `` with `igxHeadSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state. The `selectedCount` property shows you how many rows are currently selected while `totalCount` shows you how many rows there are in the Hierarchical Grid in total. ```html + {{ headContext.selectedCount }} / {{ headContext.totalCount }} ``` The `selectedCount` and `totalCount` properties can be used to determine if the head selector should be checked or indeterminate (partially selected). ```html + + + + + + + + + + + + + ``` Each hierarchy level in an `igx-hierarchical-grid` can have its own row and header templating. > [!NOTE] > The `headContext.selectAll()` and `headContext.deselectAll()` methods are exposed in the template context of an `igx-hierarchical-grid`. They make it easier to toggle all rows, especially in a child grid, when you implement a click handler that overrides the base functionality. ### Row Numbering Demo This demo shows the usage of custom header and row selectors. The latter uses `rowContext.index` to display row numbers and an `igx-checkbox` bound to `rowContext.selected`. ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-selection-template-numbers', + styleUrls: ['./hierarchical-grid-selection-template-numbers.component.scss'], + templateUrl: 'hierarchical-grid-selection-template-numbers.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowIslandComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxCheckboxComponent] +}) + +export class HGridSelectionTemplateNumbersSampleComponent { + public localData; + + constructor() { + this.localData = SINGERS; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + +
+ {{ rowContext.index + 1 }} + + +
+ + +
+``` +```scss +.grid__wrapper{ + padding: 16px; +} + +.header-selector { + width: 60px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; +} + +.header-image { + width: 40px; + height: 40px; +} + +.row-selector { + width: 60px; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 100%; +} + +.row-selector-index { + width: 20px; + text-align: center; +} +```
### Conditional Selection Demo This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. ```typescript +import { Component, OnInit } from '@angular/core'; +import { IRowSelectionEventArgs, IgxColumnComponent, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-conditional-row-selectors', + styleUrls: ['./hierarchical-grid-conditional-row-selectors.component.scss'], + templateUrl: 'hierarchical-grid-conditional-row-selectors.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowIslandComponent, IgxRowSelectorDirective, IgxCheckboxComponent] +}) + +export class HGridConditionalRowSelectorsComponent implements OnInit { + public singers; + public disabledCollection: string[] = []; + + public ngOnInit(): void { + this.singers = SINGERS; + this.disabledCollection = + this.singers.filter(singer => singer.HasGrammyAward === false).map(singer => singer.Artist); + } + + public isSelectionAllowed(newRowID: string) { + return this.disabledCollection.indexOf(newRowID) === -1; + } + + public onRowSelect(event: IRowSelectionEventArgs) { + if (!event.added.length && event.removed.length) { + // ignore deselect + return; + } + const originalAddedLength = event.added.length; + + // update selection to contain only allowed rows + event.newSelection = event.newSelection.filter(x => this.isSelectionAllowed(x.Artist)); + + // cleanup selection if all conditionally selectable rows are already selected + if (event.newSelection.length + && !event.newSelection.filter(x => event.oldSelection.indexOf(x) === -1).length + && originalAddedLength > 1) { + // all selected from header, deselect instead + event.newSelection = []; + } + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} + +.row-selector { + display: flex; + align-items: center; + justify-content: center; + min-width: calc(1.25rem + (1.5rem * 2)); +} +```
## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Selection](selection.md) - [Cell selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md new file mode 100644 index 000000000..a7e8cc042 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-selection.md @@ -0,0 +1,187 @@ +--- +_tocName: Selection +--- +--- title: Angular Hierarchical Grid Selection - Ignite UI for Angular _description: See how easy it is to select data in Ignite UI for Angular grid using variety of events, rich API or with simple mouse interactions like single select. _keywords: data select, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/selection --- # Angular Hierarchical Grid Selection With Ignite UI for Angular Hierarchical Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select. ## Angular Grid Selection Example The sample below demonstrates the three types of Hierarchical Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-hierarchical-grid-cell-selection', + styleUrls: ['./hierarchical-grid-cellSelection.component.scss'], + templateUrl: 'hierarchical-grid-cellSelection.component.html', + imports: [IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxSnackbarComponent, IgxIconComponent] +}) +export class HierarchicalGridCellSelectionComponent implements OnInit { + @ViewChild('hgrid', { static: true }) public hGrid: IgxHierarchicalGridComponent; + @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent; + public data: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModeChild: GridSelectionMode = 'single'; + public selectionModes = []; + public selectionModesChildren = []; + + constructor() { } + + public ngOnInit(): void { + this.data = SINGERS; + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + this.selectionModesChildren = [ + { label: 'none', selected: this.selectionModeChild === 'none', togglable: true }, + { label: 'single', selected: this.selectionModeChild === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionModeChild === 'multiple', togglable: true } + ]; + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbar.open(); + } + + public selectCellSelectionModeChildGrid(args) { + this.selectionModeChild = this.selectionModes[args.index].label; + this.snackbar.open(); + } +} +``` +```html +
+
+
Parent Grid cell selection mode:
+ +
+
+
Child Grid cell selection mode:
+ +
+ + + + + + + + + + + + + + +
+ + +
+ notification_important +
+ Parent grid: + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+
+ Child grid: + @if (selectionModeChild === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionModeChild === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionModeChild === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+
+ +``` +```scss +.grid__wrapper { + display: flex; + justify-content: space-between; + margin: 16px; + flex-flow: column; + align-items: flex-start; + position: relative; +} + +.button-group-wrapper { + margin-bottom: 16px; + > h6 { + margin-bottom: 4px; + } +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.message-container { + display: flex; + flex-flow: column; + > span { + margin-top: 8px; + padding-left: 20px; + } +} +```
## Angular Grid Selection Options IgniteUI for Angular Hierarchical Grid component provides three different selection modes - [Row selection](row-selection.md), [Cell selection](cell-selection.md) and [Column selection](column-selection.md). By default only **Multi-cell selection** mode is enabled in the Hierarchical Grid. In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) properties. ### Angular Row Selection Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) enables you to specify the following options: - none - Row selection would be disabled for the Hierarchical Grid - single - Selection of only one row within the Hierarchical Grid would be available - multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused > Go to [Row selection topic](row-selection.md) for more information. ### Angular Cell Selection Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) enables you to specify the following options: - none - Cell selection would be disabled for the Hierarchical Grid - single - Selection of only one cell within the Hierarchical Grid would be available. - multiple - Currently, this is the default state of the selection in the Hierarchical Grid. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously. > Go to [Cell selection topic](cell-selection.md) for more information. ### Angular Column Selection The [`selectable` property](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) enables you to specify the following options for each **column**: - false - the corresponding column selection will be disabled for the Hierarchical Grid - true - the corresponding column selection will be enabled for the Hierarchical Grid - This lead to the following three variations: - Single selection - mouse click over the column cell. - Multi column selection - holding ctrl + mouse click over the column cells. - Range column selection - holding shift + mouse click selects everything in between. > Go to [Column selection topic](column-selection.md) for more information. ## Known Issues and Limitations - Using the Hierarchical Grid with Selection enabled on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. IE11 is no longer supported as of version 13.0.0. + + ```typescript + import 'core-js/es7/array'; + ``` - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Row Selection](row-selection.md) - [Cell Selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sizing.md new file mode 100644 index 000000000..59de09c78 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sizing.md @@ -0,0 +1,90 @@ +--- +_tocName: Sizing +_premium: true +--- +--- title: Angular Hierarchical Grid Sizing - Ignite UI for Angular _description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have. _keywords: angular grid sizing, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/sizing --- # Angular Grid Sizing There are many different ways to size the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) in order to accommodate a lot of scenarios that the users can have. While some are straight forward, others might be more complex and that is why we will take each one and look into them in more depth. We will go through setting `width` and `height` separately since there are some differences e.g. when using percentages for each. When it comes to border and padding size for the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) will size correctly. ## Width If the `width` input does not have value assigned, its default value is `100%` and the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] > Setting manually the `width` style of the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) itself will result in an unexpected behavior. ### Null The grid's `width` can accepts value of `null`, which when set, renders all columns in the DOM. The grid sizes accordingly so there is no grid horizontal scrollbar since column virtualization is not applied. - If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. + + Columns Default Grid Width Null - If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible: + + Width Null No Scroll - If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario: + + Width Null Scroll - If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example. + + Width Null Parent Scroll > [!Note] > Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization. ### Pixels When the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: - When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. + + Width Cols Scrollbar - For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `width` is still `1200px`, it will look similar to the following illustrations: + + Width Cols Scroll Parent No Scroll + Width Cols Scroll Parent Scroll ### Percentages When the `width` of the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) will size relative to the browser window. - For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly. + + Width Percent 100% - If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`. + + Width Percent Parent 100% - If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. + + Width Percent 150% Parent No Scroll + Width Percent 150% Parent Scroll ## Height By default if no height is defined for the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] > Setting manually the `height` style of the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) itself will result in an unexpected behavior. ### Null The [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. + + Height Null 14 Rows - If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows. + + Height Null 24 Rows - If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: + + Height Null 24 Rows Parent No Scroll + Height Null 24 Rows Parent Scroll > [!Note] > Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization. ### Pixels Setting the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels. - If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area. + + Height 500px 4 Rows - If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: + + Height 500px 14 Rows - If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. + + Height 700px 14 Rows Parent No Scroll + Height 700px 14 Rows Parent Scroll ### Percentages When the `height` input is set to percentages the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) will size based on the parent element height. If the parent element has its `height` set in pixels or percentages, the grid will size relative to the size of the parent. When the parent element does not have defined height, the browser does not assign height to it initially and sizes it based on its children and their size. That is why there is no way for the grid to know what base height to use in order to apply percentage sizing based on it. For this reason, it will render a maximum of 10 rows and if they are more rows, a vertical scrollbar will be rendered. Otherwise, the grid will fit to number of rendered rows. We will look in this scenario in more detail in the next examples. Let's have `width` set to `1200px` and the parent element not having any size applied to it: - If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid. + + Height Undefined 7 Rows - If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14. + + Height Undefined 14 Rows - If we set the parent element height to `800px` and the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`. + + Height Percent 100% Parent 800px - If the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. + + Height Percent 130% Parent No Scroll + Height Percent 130% Parent Scroll - If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized. + + Height Percent 100% Parent 100% ## Column Sizing Depending on the grid size itself, the columns inside it can also be sized differently that could result in scenarios where the grid renders horizontal scrollbar or not. Columns can have width set in pixels, percentages or autosized when nothing is set. We will take a deeper look regarding these scenarios in this section. ### Default By default when a column doesn't have a specified width it will try to autosize, so that it fills if any empty space is available in the grid view area. Autosized columns have minimum width of `136px`, so if the area available is less than `136px` for that column, it will default to that size. When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available. - If a column does not have specified `width` and the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`. + + Columns Default Grid with Width Null - When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`. + + Columns Default All Row Selectors - If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`. + + Columns Default All Min 136px - If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest. + + Columns Default First Rest 100px - Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`. + + Columns Default All First 100px > [!Note] > Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns. ### Pixels When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `width` or exceed it. - If the combined `width` of all columns is less than the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html). In the next example the columns have `150px` width. + + Columns 150px Resulting in Empty Area - If the combined `width` of all columns is bigger than the actual [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. + + Columns 150px Resulting in Extra Area ### Auto When columns are set to `auto` their size adjusts to fit the longest word in the column. Empty areas are possible if there are cells with very short values, while other cells have very long ones. In this scenario, all cells in the column would adjust to take the width of the cell with the longest value. Columns Auto Width ### Percentages When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. + + Columns Percent Less than 100% - If the combined width is exactly `100%`, the columns will fill all available space of the grid. + + Columns Percent 100% - If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered. + + Columns Percent Bigger than 100% - If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`: + + Columns Percent Grid with Width Null --- ## Child Grid Sizing Because the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them. ### Width The `width` for the children does not behave much different than the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) itself, since each child grid is instance of [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) as well. The only difference is that the user cannot change the parent element of the child grid. That's why when the `width` is set to percentages, the `100%` width allocated for the child is smaller than the parent grid `width`. This is so that it is easier to distinguish when it is expanded. The following image displays the default child grid sizes, since it defaults to `100%` width. Child Grid Width in Percentages ### Height The `height` of each child in the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) behaves also similarly to the `height` of the root level grid. The difference is that for the child grid, when `height` is set to percentages, it behaves as if the parent element has unset height. This means that in this scenario, the grid will render maximum of 10 rows. When the number of rows in the data is less than 10, the grid will size the view area to fit all the rows. If the data has more rows, a vertical scrollbar will be rendered and the view area will be sized to 10 rows height. Child Grid Height in Percentages --- ## Grid Cell Spacing Control The [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) automatically adapts its internal spacing based on the [size](display-density.md) setting. You can further customize the padding and margins in grid header and body cells using CSS custom properties for spacing control. ### Global Grid Spacing To reduce or increase spacing across all grid cells in your application: ```css /* Reduce all grid spacing by 20% */ igx-grid { + --ig-spacing: 0.8; } /* Increase spacing for better touch accessibility */ igx-grid { + --ig-spacing: 1.2; } ``` ### Grid-Specific Spacing To adjust spacing for a specific grid instance: ```css /* Make a particular grid more compact */ .my-compact-grid { + --ig-spacing: 0.6; } /* Give a specific grid more breathing room */ .my-spacious-grid { + --ig-spacing: 1.4; } ``` ### Directional Spacing Control You can control horizontal and vertical spacing independently: ```css /* Reduce only horizontal spacing (left/right padding) */ .my-grid { + --ig-spacing-inline: 0.5; + --ig-spacing-block: 1.0; /* Keep vertical spacing normal */ } /* Adjust vertical spacing for tighter row spacing */ .my-grid { + --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */ + --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */ } ``` ### Size-Specific Spacing Different spacing multipliers can be applied based on the grid's display density: ```css .my-grid { + /* Compact density gets very tight spacing */ + --ig-spacing-small: 0.5; + + /* Medium density uses normal spacing */ + --ig-spacing-medium: 1.0; + + /* Comfortable density gets extra spacing */ + --ig-spacing-large: 1.3; } ``` ### Header vs Body Cell Spacing While the spacing properties affect both header and body cells, you can target them specifically if needed: ```css /* Reduce padding in header cells specifically */ .my-grid igx-grid-header { + --ig-spacing: 0.7; } /* Adjust spacing in data cells */ .my-grid igx-grid-cell { + --ig-spacing: 0.9; } ``` > [!Note] > These spacing adjustments work in conjunction with the grid's display density. The spacing multipliers are applied to the base spacing values that are already determined by whether the grid is in compact, cozy, or comfortable density mode. ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) _[IgxGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md new file mode 100644 index 000000000..c62952dc0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-sorting.md @@ -0,0 +1,300 @@ +--- +_tocName: Sorting +_premium: true +--- +--- title: Angular Hierarchical Grid Sorting - Ignite UI for Angular _description: Get started with the Angular sorting feature of Ignite for Angular UI grid! Configure a mix of sortable columns & change the display order of data records. _keywords: angular sort, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/sorting --- # Angular Hierarchical Grid Sorting In Ignite UI for Angular Hierarchical Grid, data sorting is enabled on a per-column level, meaning that the **igx-hierarchical-grid** can have a mix of sortable and non-sortable columns. Performing angular sort actions enables you to change the display order of the records based on specified criteria. >[!NOTE] > Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. ## Angular Hierarchical Grid Sorting Overview Example Additionally there is a custom context menu added for sorting using **igx-hierarchical-grid**'s [`contextMenu`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#contextMenu) Output. ```typescript +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +import { HGridContextmenuComponent } from './hgrid-contextmenu/hgrid-contextmenu.component'; + +@Component({ + selector: 'app-hierarchical-grid-sorting', + styleUrls: ['./hierarchical-grid-sorting.component.scss'], + templateUrl: 'hierarchical-grid-sorting.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, HGridContextmenuComponent] +}) + +export class HGridSortingSampleComponent implements OnInit, AfterViewInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + + public contextmenu = false; + public contextmenuX = 0; + public contextmenuY = 0; + public clickedCell = null; + constructor() {} + + public ngOnInit(): void { + this.localdata = SINGERS; + this.hierarchicalGrid.sortingExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'Artist', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + } + public ngAfterViewInit(): void { + this.hierarchicalGrid.cdr.detectChanges(); + } + + public rightClick(eventArgs) { + + eventArgs.event.preventDefault(); + this.contextmenuX = eventArgs.event.clientX; + this.contextmenuY = eventArgs.event.clientY; + this.contextmenu = true; + this.clickedCell = eventArgs.cell; + } + + public disableContextMenu() { + this.contextmenu = false; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + @if (contextmenu) { +
+ +
+ } +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.hgrid-sample{ + padding: 16px; +} +```
This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortable) input. With the Hierarchical Grid sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortingIgnoreCase) property to perform case sensitive sorting: ```html ``` ## Sorting Indicators Having a certain amount of sorted columns could be really confusing if there is no indication of the sorted order. The **IgxHierarchicalGrid** provides a solution for this problem by indicating the index of each sorted column. @@if(igxName === "IgxGrid"){ ```typescript +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DefaultSortingStrategy } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { FinancialData } from '../../data/financialData'; +import {generateRandomInteger, generateRandomFloat} from '../../data/utils'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-sorting-indicators', + templateUrl: './grid-sorting-indicators.component.html', + styleUrls: ['./grid-sorting-indicators.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { + + @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; + public data; + + public ngOnInit(): void { + const typeArr = ['Gold', 'Silver', 'Coal']; + this.data = FinancialData.generateData(1000).map(dataObj => { + const type = typeArr[generateRandomInteger(0, 2)]; + switch (type) { + case 'Gold': + dataObj['Type'] = 'Gold'; + dataObj['Price'] = generateRandomFloat(1261.78, 1302.76); + dataObj['Buy'] = generateRandomFloat(1261.78, 1280.73); + break; + case 'Silver': + dataObj['Type'] = 'Silver'; + dataObj['Price'] = generateRandomFloat(17.12, 17.73); + dataObj['Buy'] = generateRandomFloat(17.12, 17.43); + break; + case 'Coal': + dataObj['Type'] = 'Coal'; + dataObj['Price'] = generateRandomFloat(0.40, 0.42); + dataObj['Buy'] = generateRandomFloat(0.42, 0.46); + break; + } + return dataObj; + }); + } + + public ngAfterViewInit() { + const expressions = []; + this.grid.columns.forEach(c => { + const sortExpr = + { + dir: generateRandomInteger(1, 2), fieldName: c.field, + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + }; + expressions.push(sortExpr); + }); + this.grid.sortingExpressions = expressions; + this.grid.cdr.detectChanges(); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + +} +``` +```html +
+ + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` } ## Sorting through the API You can sort any column or a combination of columns through the Hierarchical Grid API using the Hierarchical Grid [`sort`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#sort) method: ```typescript import { SortingDirection } from 'igniteui-angular/grids/core'; // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package // Perform a case insensitive ascending sort on the ProductName column. this.hierarchicalGrid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }); // Perform sorting on both the ProductName and Price columns. this.hierarchicalGrid.sort([ + { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'Price', dir: SortingDirection.Desc } ]); ``` > [!NOTE] > Sorting is performed using our [`DefaultSortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/defaultsortingstrategy.html) algorithm. Any [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortStrategy) or [`ISortingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html#strategy) can use a custom implementation of the [`ISortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingstrategy.html) as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#clearsort) method: ```typescript // Removes the sorting state from the ProductName column this.hierarchicalGrid.clearSort('ProductName'); // Removes the sorting state from every column in the Hierarchical Grid this.hierarchicalGrid.clearSort(); ``` > [!NOTE] > The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#sortStrategy) of the **Hierarchical Grid** is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortStrategy) of the **column**, since they work in different scopes and expose different parameters. > [!NOTE] > The sorting operation **DOES NOT** change the underlying data source of the Hierarchical Grid. ## Initial sorting state It is possible to set the initial sorting state of the Hierarchical Grid by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#sortingExpressions) property of the Hierarchical Grid. ```typescript public ngOnInit(): void { + this.hierarchicalGrid.sortingExpressions = [ + { + dir: SortingDirection.Asc, fieldName: 'Artist', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + } + ]; } ``` > [!NOTE] > If values of type `string` are used by a column of [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) `Date`, the Hierarchical Grid won't parse them to `Date` objects and using Hierarchical Grid `sorting` won't work as expected. If you want to use `string` objects, additional logic should be implemented on an application level, in order to parse the values to `Date` objects.
## Sorting Indicators Templates The sorting indicator icon in the column header can be customized using a template. The following directives are available for templating the sorting indicator for any sorting state (ascending, descending, none): - `IgxSortHeaderIconDirective` – re-templates the sorting icon when no sorting is applied. ```html + unfold_more ``` - `IgxSortAscendingHeaderIconDirective` – re-templates the sorting icon when the column is sorted in ascending order. ```html + expand_less ``` - `IgxSortDescendningHeaderIconDirective` – re-templates the sorting icon when the column is sorted in descending order. ```html + expand_more ```
## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$sorted-header-icon-color` and `sortable-header-icon-hover-color` parameters. ```scss $custom-theme: grid-theme( + $sorted-header-icon-color: #ffb06a, + $sortable-header-icon-hover-color: black ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-sorting-styling', + styleUrls: ['./hierarchical-grid-sorting-styling.component.scss'], + templateUrl: 'hierarchical-grid-sorting-styling.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridSortingStylingComponent implements OnInit, AfterViewInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + + constructor() {} + + public ngOnInit(): void { + this.localdata = SINGERS; + this.hierarchicalGrid.sortingExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'Artist', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + } + public ngAfterViewInit(): void { + this.hierarchicalGrid.cdr.detectChanges(); + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $sorted-header-icon-color: #ffb06a, + $sortable-header-icon-hover-color: black +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [ISortingExpression](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md new file mode 100644 index 000000000..98343decf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-state-persistence.md @@ -0,0 +1,341 @@ +--- +_tocName: State Persistence +_premium: true +--- +--- title: Angular Hierarchical Grid State Persistence - Ignite UI for Angular _description: Easily save and restore the grid state, using our comprehensive Ignite UI toolset for Angular. Learn how to restore columns, explore usage, and see demos! _keywords: state persistence, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/state-persistence --- # Angular Hierarchical Grid State Persistence Тhe igxGridState directive allows developers to easily save and restore the grid state. When the [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive is applied on the grid, it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) and [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) methods that developers can use to achieve state persistence in any scenario. ## Supported Features [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive supports saving and restoring the state of the following features: - `RowIslands` + - saving/restoring features for all child grids down the hierarchy - `Sorting` - `Filtering` - `Advanced Filtering` - `Paging` - `Cell Selection` - `Row Selection` - `Column Selection` - `Row Pinning` - `Expansion` - `Columns` + - Multi column headers + - Columns order + - Column properties defined by the [`IColumnState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icolumnstate.html) interface. + - Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence.md#restoring-columns) section. >[!NOTE] > The [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive does not take care of templates. Go to [Restoring Column](state-persistence.md#restoring-columns) section to see how to restore column templates. >[!NOTE] > The `Row Selection` feature requires the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#primaryKey) property to be set, so it can be stored/restored correctly. ## Usage [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) - This method returns the grid state in a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The method accepts first optional parameter `serialize`, which determines whether [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) will return an [`IGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstate.html) object or a serialized JSON string. The developer may choose to get only the state for a certain feature/features, by passing in the feature name, or an array with feature names as a second argument. ```typescript // get all features` state in a serialized JSON string const gridState = state.getState(); // get an `IGridState` object, containing all features original state objects, as returned by the grid public API const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']); ``` [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) - The [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) method accepts the serialized JSON string or [`IGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstate.html) object as argument and will restore the state of each feature found in the object/JSON string. ```typescript state.setState(gridState); state.setState(sortingFilteringStates) ``` `options` - The [`options`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#options) object implements the [`IGridStateOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstateoptions.html) interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) method will not put the state of these features in the returned value and [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) method will not restore state for it. ```typescript public options = { cellSelection: false; sorting: false; } ``` ```html ``` The simple to use single-point API's allows to achieve a full state persistence functionality in just a few lines of code. **Copy paste the code from below** - it will save the grid state in the browser `sessionStorage` object every time the user leaves the current page. Whenever the user returns to main page, the grid state will be restored. No more need to configure those complex advanced filtering and sorting expressions every time to get the data you want - do it once and have the code from below do the rest for your users: ```typescript // app.component.ts @ViewChild(IgxGridStateDirective, { static: true }) public state!: IgxGridStateDirective; public ngOnInit() { + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); } public ngAfterViewInit() { + this.restoreGridState(); } public saveGridState() { + const state = this.state.getState() as string; + window.sessionStorage.setItem('grid1-state', state); } public restoreGridState() { + const state = window.sessionStorage.getItem('grid1-state'); + this.state.setState(state); } ``` ## Restoring columns When possible the state directive will reuses the columns that already exists on the grid when restoring the state, instead of creating new column instances. The only scenario where a new instance will be created is when the column (or its children in case of a column groups) have no `field` property so there's no way to uniquely identify the matching column and re-use it. For such scenarios, the following [`limitations`](state-persistence.md#limitations) are imposed. In that case restoring complex objects can be achieved with code on application level. Let's show how to do this for templated columns: 1. Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event: @@if (igxName === 'IgxGrid') { ```html + + + + + + ... ``` } @@if (igxName === 'IgxHierarchicalGrid') { ```html + + + + + + ... ``` } @@if (igxName === 'IgxTreeGrid') { ```html + + + + + + ... ``` } 2. Query the template view in the component using @ViewChild or @ViewChildren decorator. In the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event handler, assign the template to the column `bodyTemplate` property: ```typescript @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef; public onColumnInit(column: IgxColumnComponent) { + if (column.field === 'IsActive') { + column.bodyTemplate = this.activeTemplate; + column.summaries = MySummary; + column.filters = IgxNumberFilteringOperand.instance(); + } } ``` ## Restoring Child Grids Saving / Restoring state for the child grids is controlled by the [`rowIslands`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxgridstateoptions.html#rowIslands) property and is enabled by default. [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) will use the same options for saving/restoring features both for the root grid and all child grids down the hierarchy. For example, if we pass the following options: ``` html ``` Then the `getState` API will return the state for all grids (root grid and child grids) features excluding `selection` and `sorting`. If later on the developer wants to restore only the `filtering` state for all grids, use: ```typescript this.state.setState(state, ['filtering', 'rowIslands']); ``` ## Demo ```typescript +import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject } from '@angular/core'; +import { NavigationStart, Router, RouterLink } from '@angular/router'; +import { GridFeatures, IGridState, IGridStateOptions, IgxCellTemplateDirective, IgxColumnComponent, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { take } from 'rxjs/operators'; +import { SINGERS } from '../../data/singersData'; + +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxNumberSummaryOperand().operate(data); + result.push({ + key: 'test', + label: 'Test', + summaryResult: data.filter(rec => rec > 10 && rec < 30).length + }); + return result; + } + } + +// tslint:disable:object-literal-sort-keys +@Component({ + selector: 'app-hgrid', + styleUrls: ['./hGrid-state.component.scss'], + templateUrl: './hGrid-state.component.html', + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxHierarchicalGridComponent, IgxGridStateDirective, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridSaveStateComponent implements OnInit, AfterViewInit { + private router = inject(Router); + + @ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective; + @ViewChild('hierarchicalGrid', { static: true }) public hGrid: IgxHierarchicalGridComponent; + @ViewChildren(IgxCheckboxComponent) public checkboxes: QueryList; + public localData: any[]; + public columns: any[]; + public gridId = 'hGrid1'; + public stateKey = this.gridId + '-state'; + public gridState: IGridState; + public serialize = true; + + public features: { key: GridFeatures; shortName: string }[] = [ + { key: 'advancedFiltering', shortName: 'Adv Filt' }, + { key: 'cellSelection', shortName: 'Cell Sel' }, + { key: 'columns', shortName: 'Columns' } , + { key: 'columnSelection', shortName: 'Cols Sel' }, + { key: 'expansion', shortName: 'Expansion' }, + { key: 'filtering', shortName: 'Filt' }, + { key: 'paging', shortName: 'Paging' }, + { key: 'rowPinning', shortName: 'Row Pining' }, + { key: 'rowSelection', shortName: 'Row Sel' }, + { key: 'sorting', shortName: 'Sorting' }, + { key: 'rowIslands', shortName: 'Row Islands' } + ]; + + public options: IGridStateOptions = { + cellSelection: true, + rowSelection: true, + filtering: true, + advancedFiltering: true, + paging: true, + sorting: true, + columns: true, + expansion: true, + rowPinning: true, + columnSelection: true + }; + + constructor() { + this.localData = SINGERS; + } + + public ngOnInit() { + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); + } + + public ngAfterViewInit() { + this.restoreGridState(); + } + + public saveGridState() { + const state = this.state.getState(this.serialize); + if (typeof state === 'string') { + window.localStorage.setItem(this.stateKey, state); + } else { + window.localStorage.setItem(this.stateKey, JSON.stringify(state)); + } + } + + public restoreGridState() { + const state = window.localStorage.getItem(this.stateKey); + if (state) { + this.state.setState(state); + } + } + + public restoreFeature(stateDirective: IgxGridStateDirective, feature: string) { + const state = this.getFeatureState(this.stateKey, feature); + if (state) { + const featureState = { } as IGridState; + featureState[feature] = state; + stateDirective.setState(featureState); + } + } + + public getFeatureState(stateKey: string, feature: string) { + let state = window.localStorage.getItem(stateKey); + state = state ? JSON.parse(state)[feature] : null; + return state; + } + + public onChange(event: any, action: string) { + if (action === 'toggleAll') { + this.checkboxes.forEach(cb => { + cb.checked = event.checked; + }); + for (const key of Object.keys(this.options)) { + this.state.options[key] = event.checked; + } + return; + } + this.state.options[action] = event.checked; + } + + public clearStorage() { + window.localStorage.removeItem(this.stateKey); + } + + public reloadPage() { + window.location.reload(); + } + + public formatter = (a) => a; +} +``` +```html +
+
+
+ + + + + +
+ +
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
+ +
+
+ All +
+ @for (f of features; track f) { +
+ + {{ f.shortName }} + +
+ } +
+
+ + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.controls-holder { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + width: 100%; +} + +.switches { + display: flex; + justify-content: space-between; + justify-content: flex-start; + align-items: center; + flex: 1 0 0%; + min-width: 100%; + padding-right: 20px; + font-size: 0.9rem; + margin-top: 0; + > button { + margin-right: 10px; + } +} + +.control-item { + display: block; + padding: 8px 0px; + > span { + cursor: pointer; + } + margin-right: 10px; +} + +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 10px; + width: 100%; +} +``` ## Limitations - When restoring all grid features at once (using `setState` API with no parameters), then column properties for the root grid might be resetted to default. If this happens, restore the columns or column selection feature separately after that: ```typescript state.setState(gridState); state.setState(gridState.columns); state.setState(gridState.columnSelection); ``` - [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getstate) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgxGridState`] directive will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters), [`summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaries), [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortstrategy), [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses), [`cellStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellstyles), [`headerTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#headerTemplate) and [`bodyTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#bodyTemplate) properties.
## API References - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxGridStateDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Selection](selection.md) + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md new file mode 100644 index 000000000..ebd3786f4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-summaries.md @@ -0,0 +1,1341 @@ +--- +_tocName: Summaries +_premium: true +--- +--- title: Angular Grid Summaries - Ignite UI for Angular _description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular table _keywords: angular grid summaries, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/summaries --- # Angular Hierarchical Grid Summaries The Angular UI grid in Ignite UI for Angular has a **summaries** feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Hierarchical Grid. ## Angular Hierarchical Grid Summaries Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'min', + label: 'Min', + summaryResult: IgxNumberSummaryOperand.min(data) + }, + { + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }, + { + key: 'avg', + label: 'Avg', + summaryResult: IgxNumberSummaryOperand.average(data) + }); + return result; + } +} +class MyChildSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'count', + label: 'Count', + summaryResult: IgxNumberSummaryOperand.count(data) + }); + return result; + } +} + +@Component({ + selector: 'app-hierarchical-grid-summary', + styleUrls: ['./hierarchical-grid-summary.component.scss'], + templateUrl: 'hierarchical-grid-summary.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridSummarySampleComponent { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + public mySummary = MySummary; + public myChildSummary = MyChildSummary; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +.hgrid-sample{ + padding: 16px; +} +```
> [!NOTE] > The summary of the column is a **function of all column values**, unless filtering is applied, then the summary of the column will be **function of the filtered result values** **Hierarchical Grid summaries** can also be enabled on a per-column level in Ignite UI for Angular, which means that you can activate it only for columns that you need. Hierarchical Grid summaries gives you a predefined set of default summaries, depending on the type of data in the column, so that you can save some time: For `string` and `boolean` [`data types`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType), the following function is available: - count For `number`, `currency` and `percent` data types, the following functions are available: - count - min - max - average - sum For `date` data type, the following functions are available: - count - earliest - latest All available column data types could be found in the official [Column types topic](column-types.md#default-template). **Hierarchical Grid summaries** are enabled per-column by setting [`hasSummary`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#hasSummary) property to `true`. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the `igx-hierarchical-grid` the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#datatype) property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs). ```html + + + +
+ +
+ + + + + ``` The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#enableSummaries)/[`disableSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#disableSummaries) of the **igx-hierarchical-grid**. ```html + + + +
+ +
+ + + + + ``` ```typescript public enableSummary() { + this.hierarchicalGrid.enableSummaries([ + {fieldName: 'Grammy Nominations', customSummary: this.mySummary}, + {fieldName: 'Artist'} + ]); } public disableSummary() { + this.hierarchicalGrid.disableSummaries('Photo'); } ``` ## Custom Hierarchical Grid Summaries If these functions do not fulfill your requirements you can provide a custom summary for the specific columns. In order to achieve this you have to override one of the base classes [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) class provides the default implementation only for the [`count`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#count) method. [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) extends [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) and provides implementation for the [`min`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#max), [`sum`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#sum) and [`average`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#average). [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) extends [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) and additionally gives you [`earliest`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html#earliest) and [`latest`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html#latest). ```typescript import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core'; // import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '@infragistics/igniteui-angular'; for licensed package class MySummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + + public operate(data?: any[]): IgxSummaryResult[] { + const result = super.operate(data); + result.push({ + key: 'test', + label: 'More than 5', + summaryResult: data.filter((rec) => rec > 5).length + }); + + return result; + } } ``` As seen in the examples, the base classes expose the [`operate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#operate) method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. The method returns a list of [`IgxSummaryResult`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxsummaryresult.html). ```typescript interface IgxSummaryResult { + key: string; + label: string; + summaryResult: any; } ``` and take optional parameters for calculating the summaries. See [Custom summaries, which access all data](#custom-summaries-which-access-all-data) section below. > [!NOTE] > In order to calculate the summary row height properly, the Hierarchical Grid needs the [`operate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#operate) method to always return an array of [`IgxSummaryResult`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxsummaryresult.html) with the proper length even when the data is empty. And now let's add our custom summary to the column `GramyNominations`. We will achieve that by setting the [`summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaries) property to the class we create below. ```html + + + + +
+ +
+ + + + + ``` ```typescript ... export class HGridSummarySampleComponent implements OnInit { + mySummary = MySummary; + .... } ``` ### Custom summaries, which access all data + + Now you can access all Hierarchical Grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method. As you can see in the code snippet below the operate method has the following three parameters: - columnData - gives you an array that contains the values only for the current column - allGridData - gives you the whole grid data source - fieldName - current column field ```typescript class MySummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] { + const result = super.operate(allData.map(r => r[fieldName])); + result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length }); + return result; + } } ``` ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class CustomNumberSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxNumberSummaryOperand().operate(data); + result.pop(); + result.pop(); + return result; + } +} + +class GrammySummary { + + public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'nominatedSingers', + label: 'Nominated Singers', + summaryResult: allData.filter((rec) => rec['GrammyNominations'] > 0).length + }); + result.push({ + key: 'singersWithAwards', + label: 'Singers with Awards', + summaryResult: allData.filter((rec) => rec['GrammyAwards'] > 0).length + }); + result.push({ + key: 'nominations', + label: 'Total Nominations', + summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r['GrammyNominations'])) + }); + result.push({ + key: 'awards', + label: 'Total Awards', + summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r['GrammyAwards'])) + }); + return result; + } +} + +@Component({ + selector: 'app-hierarchical-grid-all-data-summary', + styleUrls: ['./hierarchical-grid-allData-summary.component.scss'], + templateUrl: 'hierarchical-grid-allData-summary.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridAllDataSummaryComponent implements OnInit { + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + public localdata; + public grammySummary = GrammySummary; + public numberSummary = CustomNumberSummary; + + constructor() {} + + public ngOnInit(): void { + this.localdata = SINGERS; + } +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
+``` +```scss +.hgrid-sample{ + padding: 16px; +} +``` ### Summary Template `igxSummary` targets the column summary providing as a context the column summary results. ```html + + My custom summary template + {{ summaryResults[0].label }} - {{ summaryResults[0].summaryResult }} + ``` When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the size of the grid. Use the [summaryRowHeight](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryRowHeight) input property to override the default value. As an argument it expects a number value, and setting a false value will trigger the default sizing behavior of the grid footer. > [!NOTE] > Column summary template could be defined through API by setting the column [summaryTemplate](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaryTemplate) property to the required TemplateRef. ```typescript +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { SINGERS } from '../../data/singersData'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class CustomNumberSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxNumberSummaryOperand().operate(data); + result.pop(); + result.pop(); + return result; + } +} + +class GrammySummary { + + public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'nominatedSingers', + label: 'Nominated Singers', + summaryResult: allData.filter((rec) => rec['GrammyNominations'] > 0).length + }); + result.push({ + key: 'singersWithAwards', + label: 'Singers with Awards', + summaryResult: allData.filter((rec) => rec['GrammyAwards'] > 0).length + }); + result.push({ + key: 'nominations', + label: 'Total Nominations', + summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r['GrammyNominations'])) + }); + result.push({ + key: 'awards', + label: 'Total Awards', + summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r['GrammyAwards'])) + }); + return result; + } +} + +@Component({ + selector: 'app-hierarchical-grid-all-data-summary', + styleUrls: ['./hgrid-summary-template.component.scss'], + templateUrl: 'hgrid-summary-template.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSummaryTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridSummaryTemplateComponent implements OnInit { + public localdata; + public grammySummary = GrammySummary; + public numberSummary = CustomNumberSummary; + public summaryHeight = 120; + public size = 'medium'; + public sizes; + public hasSummary = true; + + constructor() { } + + public ngOnInit(): void { + this.localdata = SINGERS; + this.sizes = [ + { label: 'small', selected: this.size === 'small', togglable: true }, + { label: 'medium', selected: this.size === 'medium', togglable: true }, + { label: 'large', selected: this.size === 'large', togglable: true } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event): void { + this.size = this.sizes[event.index].label; + } +} +``` +```html +
+
+ + + + + Toggle Summaries + + +
+ + + + + +
+ +
+ + + + + +
+ {{ summaryResults[0].label }}{{ summaryResults[0].summaryResult }} + {{ summaryResults[1].label }}{{ summaryResults[1].summaryResult }} + {{ summaryResults[2].label }}{{ summaryResults[2].summaryResult }} +
+ + + + + + + + +
+ {{ summaryResults[0].label }}{{ summaryResults[0].summaryResult }} + {{ summaryResults[1].label }}{{ summaryResults[1].summaryResult }} +
+ + + + + + + + + + + + +
+``` +```scss +.sample__wrapper { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + height: 100%; + overflow-y: auto; +} + +igx-buttongroup { + max-width: 450px; + flex: 1; +} + +.summary-temp { + display: flex; + flex-direction: column; + margin: 0 1px; + font-size: 14px; + line-height: 24px; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + span { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + justify-content: space-between; + color: hsla(var(--ig-gray-900)); + + span { + user-select: all; + max-width: 300px; + padding-right: 8px; + } + + strong { + font-size: 12px; + text-transform: uppercase; + min-width: 70px; + justify-self: flex-start; + text-align: left; + color: var(--ig-secondary-600); + user-select: none; + } + } + + > * { + padding: 8px 0; + line-height: 18px; + border-bottom: 1px dashed hsla(var(--ig-gray-400)); + + &:last-child { + border-bottom: none; + } + } + +} + +::-webkit-scrollbar { + width: 5px !important; + height: 5px !important; +} + +.controls-wrapper { + display: flex; + align-items: center; + flex-direction: row; + gap: 16px; +} +``` ## Disable Summaries The [`disabledSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#disabledSummaries) property provides precise per-column control over the Ignite UI for Angular grid summary feature. This property enables users to customize the summaries displayed for each column in the grid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']`, by specifying their summary keys in an array. This property can also be modified **dynamically at runtime** through code, providing flexibility to adapt the grid's summaries to changing application states or user actions. The following examples illustrate how to use the `disabledSummaries` property to manage summaries for different columns and exclude specific default and custom summary types in the Ignite UI for Angular grid: ```html + +
+ +
+ ``` For `Photo`, custom summaries such as `singersWithAwards` and `awards` are excluded using the `disabledSummaries` property. For `GrammyNominations` default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. At runtime, summaries can also be dynamically disabled using the `disabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. ```typescript +import { + Component, + ViewChild, + OnInit, + AfterViewInit, + ElementRef, + QueryList, + ViewChildren +} from "@angular/core"; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { SINGERS } from "../../data/singersData"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + + +class GrammySummary { + public operate( + data?: any[], + allData: any[] = [], + fieldName: string = "" + ): IgxSummaryResult[] { + const result = []; + + result.push({ + key: "count", + label: "Count", + summaryResult: allData.filter((rec) => rec["Artist"] > 0) + .length + }); + + result.push({ + key: "nominatedSingers", + label: "Nominated Singers", + summaryResult: allData.filter((rec) => rec["GrammyNominations"] > 0) + .length + }); + + result.push({ + key: "singersWithAwards", + label: "Singers with Awards", + summaryResult: allData.filter((rec) => rec["GrammyAwards"] > 0) + .length + }); + + result.push({ + key: "nominations", + label: "Total Nominations", + summaryResult: IgxNumberSummaryOperand.sum( + allData.map((r) => r["GrammyNominations"]) + ) + }); + + result.push({ + key: "awards", + label: "Total Awards", + summaryResult: IgxNumberSummaryOperand.sum( + allData.map((r) => r["GrammyAwards"]) + ) + }); + + return result; + } +} + +@Component({ + selector: "app-hierarchical-grid-summary-sample", + styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"], + templateUrl: "hierarchical-grid-disable-summaries.component.html", + imports: [ + IgxHierarchicalGridComponent, + IgxRowIslandComponent, + IgxCellTemplateDirective, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective, + IgxCheckboxComponent, + IgxToggleDirective +] +}) +export class HierarchicalGridDisableSummariesComponent implements OnInit, AfterViewInit { + @ViewChild("hierarchicalGrid1", { static: true }) public hierarchicalGrid1: IgxHierarchicalGridComponent; + @ViewChildren(IgxToggleDirective) public toggles: QueryList; + @ViewChildren('toggleButton') public buttons: QueryList; + + public data: any[]; + public togglesArray: any[]; + public buttonsArray: any[]; + + public columns = [ + { + label: 'Artist', + field: 'Artist', + summaries: [] + }, + { + label: 'Photo', + field: 'Photo', + summaries: [] + }, + { + label: 'Debut', + field: 'Debut', + summaries: [] + }, + { + label: 'Grammy Nominations', + field: 'GrammyNominations', + summaries: [] + }, + { + label: 'Grammy Awards', + field: 'GrammyAwards', + summaries: [] + } + ]; + + public grammySummary = GrammySummary; + + private _positionSettings = { + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Bottom, + horizontalDirection: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom + }; + + private _overlaySettings: OverlaySettings = { + closeOnOutsideClick: true, + modal: false, + closeOnEscape: true, + positionStrategy: new ConnectedPositioningStrategy(this._positionSettings) + }; + + constructor() {} + + public ngOnInit(): void { + this.data = SINGERS; + } + + public ngAfterViewInit(): void { + this.togglesArray = this.toggles.toArray(); + this.buttonsArray = this.buttons.toArray(); + + this.columns.forEach((column, index) => { + column.summaries = this.getSummaries(column.field) + }); + } + + public getCheckedSummariesCount(summaries: any[]): number { + return summaries.filter(summary => summary.checked).length; + } + + public toggle(index: number): void { + this._overlaySettings.target = this.buttonsArray[index].nativeElement; + this.togglesArray[index].toggle(this._overlaySettings); + } + + public toggleCheckbox(event: any, index: number, column: any): void { + column.summaries[index].checked = event.checked; + if (event.checked) { + this.hierarchicalGrid1.getColumnByName(column.field).disabledSummaries = [ + ...this.hierarchicalGrid1.getColumnByName(column.field).disabledSummaries, + column.summaries[index].summaryKey + ]; + } else { + this.hierarchicalGrid1.getColumnByName(column.field).disabledSummaries = this.hierarchicalGrid1.getColumnByName(column.field).disabledSummaries.filter( + (key: string) => key !== column.summaries[index].summaryKey + ); + } + } + + public uncheckAllColumns(column: any): void { + column.summaries.forEach(summary => (summary.checked = false)); + this.hierarchicalGrid1.getColumnByName(column.field).disabledSummaries = []; + } + + public checkAllColumns(column: any): void { + column.summaries.forEach(summary => (summary.checked = true)); + this.hierarchicalGrid1.getColumnByName(column.field).disabledSummaries = column.summaries.map(summary => summary.summaryKey); + } + + public formatter = (a) => a; + + private getSummaries(columnName: string): any[] { + return this.hierarchicalGrid1 + .getColumnByName(columnName) + .summaries.operate( + this.hierarchicalGrid1.data.map((record) => record.ProductID) + ) + .map((summary) => ({ + summaryKey: summary.key, + summaryLabel: summary.label, + checked: false + })); + } +} +``` +```html +
+
+
Disable Summaries for Column:
+ @for (column of columns; track column; let i = $index) { +
+ +
+
+
+

+ Disabled Summaries +

+
+
+ @for (summary of column.summaries; track summary; let i = $index) { + + {{ summary.summaryLabel }} + + } +
+
+ + +
+
+
+
+ } +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper { + margin: 0 auto; + padding: 16px; + + .summaries { + margin-bottom: 1rem; + display: flex; + align-items: center; + flex-wrap: wrap; + + &-title { + margin: 0 0 1rem 0; + flex-basis: 100%; + } + + .summary-column-button { + margin-right: 1rem; + margin-bottom: 0.5rem; + } + } + + .photo { + vertical-align: middle; + max-height: 62px; + } + + .cell__inner_2 { + margin: 1px + } +} + +.summaries-dropdown { + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 8px; + + &-title { + color: #40B3FF; + margin: 0.5rem 1.1rem; + } + + &-items { + display: flex; + flex-direction: column; + + .summaries-dropdown-item { + display: flex; + align-items: center; + padding: 0 1rem; + } + } + + &-buttons { + display: flex; + justify-content: space-between; + padding: 0.2rem; + } +} +``` ## Formatting summaries By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs). When using custom operands, the `locale` and `pipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the [`summaryFormatter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaryFormatter) property. ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' + && result !== null && result !== undefined) { + const pipe = new DatePipe('en-US'); + return pipe.transform(result,'MMM YYYY'); + } + return result; } ``` ```html ``` ```typescript +import { DatePipe } from '@angular/common'; +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxDateSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-summary-formatter', + styleUrls: ['./hierarchical-grid-summary-formatter.component.scss'], + templateUrl: 'hierarchical-grid-summary-formatter.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridSummaryFormatterComponent { + + @ViewChild('hierarchicalGrid', { static: true }) + public hierarchicalGrid: IgxHierarchicalGridComponent; + + public localdata; + + constructor() { + this.localdata = SINGERS; + } + + public decadeFormatter = (value: number) => Math.floor(value / 10) * 10 + 's'; + + public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if (summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' + && result !== null && result !== undefined) { + const pipe = new DatePipe('en-US'); + return pipe.transform(result, 'MMM YYYY'); + } + return result; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.wrapper { + margin: 16px; +} +```
## Exporting Summaries There is an [`exportSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxExcelExporterOptions.html#exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. The [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxExcelExporterService.html) will export the default summaries for all column types as their equivalent excel functions so they will continue working properly when the sheet is modified. Try it for yourself in the example below: ```typescript +import { Component, ViewChild, inject } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class MySummary { + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'min', + label: 'Min', + summaryResult: IgxNumberSummaryOperand.min(data) + }, + { + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }, + { + key: 'avg', + label: 'Avg', + summaryResult: IgxNumberSummaryOperand.average(data) + }); + return result; + } +} + +class MyChildSummary { + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'count', + label: 'Count', + summaryResult: IgxNumberSummaryOperand.count(data) + }); + return result; + } +} + +@Component({ + selector: 'app-hierarchical-grid-summary-export', + styleUrls: ['./hgrid-summary-export.component.scss'], + templateUrl: 'hgrid-summary-export.component.html', + imports: [IgxButtonDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridSummaryExportComponent { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('hGrid', { static: true }) + private hGrid: IgxHierarchicalGridComponent; + + public data; + public mySummary = MySummary; + public myChildSummary = MyChildSummary; + + constructor() { + this.data = SINGERS; + } + + public exportButtonHandler() { + this.excelExportService.export(this.hGrid, new IgxExcelExporterOptions('ExportedFile')); + } +} +``` +```html +
+
+ + Press the button to export the Grid as a .xlsx file. +
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.sample__wrapper { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + height: 100%; + overflow-y: auto; +} + +igx-buttongroup { + max-width: 450px; + flex: 1; +} + +.summary-temp { + display: flex; + flex-direction: column; + margin: 0 1px; + font-size: 14px; + line-height: 24px; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + span { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + justify-content: space-between; + color: var(--ig-gray-900); + + span { + user-select: all; + max-width: 300px; + padding-right: 8px; + } + + strong { + font-size: 12px; + text-transform: uppercase; + min-width: 70px; + justify-self: flex-start; + text-align: left; + color: var(--ig-secondary-600); + user-select: none; + } + } + + > * { + padding: 8px 0; + line-height: 18px; + border-bottom: 1px dashed var(--ig-gray-400); + + &:last-child { + border-bottom: none; + } + } + +} + +::-webkit-scrollbar { + width: 5px !important; + height: 5px !important; +} + +.controls-wrapper { + display: flex; + align-items: center; + flex-direction: row; + gap: 16px; +} + +.button-container { + margin: 25px auto; +} +``` The exported file includes a hidden column that holds the level of each `DataRecord` in the sheet. This level is used in the summaries to filter out the cells that need to be included in the summary function. In the table below, you can find the corresponding Excel formula for each of the default summaries. | Data Type | Function | Excel Function | |:--------|:--------:|:---------------| |`string`, `boolean` | count | ="Count: "&COUNTIF(start:end, recordLevel) | |`number`, `currency`, `percent` | count | ="Count: "&COUNTIF(start:end, recordLevel) | || min| ="Min: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)) | || max | ="Max: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)) | || average | ="Avg: "&AVERAGEIF(start:end, recordLevel, rangeStart:rangeEnd) | || sum | ="Sum: "&SUMIF(start:end, recordLevel, rangeStart:rangeEnd) | |`date` | count | ="Count: "&COUNTIF(start:end, recordLevel) | || earliest | ="Earliest: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) | || latest | ="Latest: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) | ### Known Limitations |Limitation|Description| |--- |--- | | Exporting custom summaries | Custom summaries will be exported as strings instead of Excel functions. | | Exporting templated summaries | Templated summaries are not supported and will be exported as the default ones. | ## Keyboard Navigation The summary rows can be navigated with the following keyboard interactions: - UP - navigates one cell up - DOWN - navigates one cell down - LEFT - navigates one cell left - RIGHT - navigates one cell right - CTRL + LEFT or HOME - navigates to the leftmost cell - CTRL + RIGHT or END - navigates to the rightmost cell ## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-summary-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-summary-theme) and accepts the `$background-color`, `$focus-background-color`, `$label-color`, `$result-color`, `$pinned-border-width`, `$pinned-border-style` and `$pinned-border-color` parameters. ```scss $custom-theme: grid-summary-theme( + $background-color: #e0f3ff, + $focus-background-color: rgba(#94d1f7, .3), + $label-color: #e41c77, + $result-color: black, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #e41c77 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component custom theme: ```scss :host { + @include tokens($custom-theme); } ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: + + ```scss :host { + ::ng-deep { + @include tokens($custom-theme); + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { SINGERS } from '../../data/singersData'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class MySummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'min', + label: 'Min', + summaryResult: IgxNumberSummaryOperand.min(data) + }, + { + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }, + { + key: 'avg', + label: 'Avg', + summaryResult: IgxNumberSummaryOperand.average(data) + }); + return result; + } +} +class MyChildSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + result.push( + { + key: 'count', + label: 'Count', + summaryResult: IgxNumberSummaryOperand.count(data) + }); + return result; + } +} + +@Component({ + selector: 'app-hierarchical-grid-summary-styling', + styleUrls: ['./hierarchical-grid-summary-styling.component.scss'], + templateUrl: 'hierarchical-grid-summary-styling.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridSummaryStylingComponent { + public localdata; + public mySummary = MySummary; + public myChildSummary = MyChildSummary; + + constructor() { + this.localdata = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$summaries-background: #e0f3ff; + +$custom-theme: grid-summary-theme( + $background-color: $summaries-background, + $label-color: #e41c77, + $result-color: black, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #e41c77, +); + +:host { + --ig-grid-summaries-patch-background: #{$summaries-background}; + @include tokens($custom-theme); +} +``` ## API References - [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxHierarchicalGridSummaries Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-summary-theme) - [IgxSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) - [IgxNumberSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) - [IgxDateSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Column Data Types](column-types.md#default-template) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md new file mode 100644 index 000000000..73c594197 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-toolbar.md @@ -0,0 +1,530 @@ +--- +_tocName: Toolbar +_premium: true +--- +--- title: Angular Grid Toolbar - Ignite UI for Angular _description: Use Angular Hierarchical Grid Toolbar for essential UI operations. Hosts different UI controls for the Grid’s features - column hiding, pinning, excel exporting, etc. _keywords: angular toolbar, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/toolbar --- # Angular Hierarchical Grid Toolbar The Hierarchical Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) which is essentially a container for **UI** operations. The Angular toolbar is located at the top of the Angular component, i.e the Hierarchical Grid and it matches its horizontal size. The toolbar container can host predefined UI controls for the following Hierarchical Grid's features: - Column Hiding - Column Pinning - Exporting to Excel, CSV and PDF - Advanced Filtering or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. ## Angular Toolbar Grid Example ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-toolbar-title', + styleUrls: ['./hierarchical-grid-toolbar-title.component.scss'], + templateUrl: 'hierarchical-grid-toolbar-title.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] +}) + +export class HGridToolbarTitleSampleComponent { + + public data: any[]; + + constructor() { + this.data = SINGERS; + } +} +``` +```html +
+ + + Singers + + + + + +
+ +
+ + + + + + + + + Albums + + + + + + + + + + Songs + + + + + + + + + + + + Tours + + + + + + + + + +
+``` +```scss +.hgrid-wrapper { + padding: 16px; +} +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +``` The predefined `actions` and `title` UI components are added inside the `` and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: ```html + + Hierarchical Grid Toolbar + + + + + + + ``` > Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html). This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty: ```html + + ``` For a comprehensive look over each of the default UI components, continue reading the **Features** section below. ## Toolbar with child grids Due to certain limitations in how the child grids of an IgxHierarchicalGrid are implemented and how DI scope works, when defining a toolbar component inside the `igx-row-island` tags use the `igxGridToolbar` directive with the template shorthand. This allows child grids to create their own separate toolbar instances: ```html + ... + + + Child toolbar + + + ... ``` The toolbar template context implicitly exposes a reference to the respective grid instance, which you can use for any other binding/logic needs. See below for an example. ### With versions prior to 17.1.0 Versions prior to 17.1.0 also required to pass the provided grid instance as an input property to the toolbar itself. This will make sure you always have the correct grid instance in the scope of your template: ```html + ... + + + + Child toolbar {{ gridRef.parentIsland.level }} + + + ... ``` ## Features The toolbar is great at separating logic/interactions which affects the grid as a whole. As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid. These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them. ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-hierarchical-grid-toolbar-options', + styleUrls: ['./hierarchical-grid-toolbar-options.component.scss'], + templateUrl: 'hierarchical-grid-toolbar-options.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) + +export class HGridToolbarOptionsSampleComponent { + public data: any[]; + toolbarTitle = 'Singers'; + enableHiding = true; + enablePinning = true; + enableExport = true; + enableFiltering = true; + + constructor() { + this.data = SINGERS; + } +} +``` +```html +
+
+ + + + +
+ Advanced Filtering + Column hiding + Column pinning + Exporting +
+
+ + + {{ toolbarTitle }} + + @if (enableFiltering) { + + } + @if (enableHiding) { + + } + @if (enablePinning) { + + } + @if (enableExport) { + + } + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.hgrid__wrapper { + margin: 16px; +} + +.control_panel { + width: 700px; + margin-bottom: 10px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +``` ### Title Setting a title for the toolbar in your grid is achieved by using the [IgxGridToolbarTitleComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html). Users can provide anything from simple text to more involved templates. ```html + Grid toolbar title ``` ### Actions The toolbar exposes a [specific container](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components. ```html + + + + ... + ``` Each action now exposes a way to change the overlay settings of the actions dialog by using the [`overlaySettings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#overlaySettings) input, example: ```html + + ``` ```ts public data: any[]; public positionStrategyScaleCenter = new GlobalPositionStrategy({ + openAnimation: scaleInCenter, + closeAnimation: scaleOutCenter }); public overlaySettingsScaleCenter = { + positionStrategy: this.positionStrategyScaleCenter, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: true, + closeOnEscape: true }; public positionStrategyAuto = new AutoPositionStrategy(); public overlaySettingsAuto = { + positionStrategy: this.positionStrategyAuto, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: false, + closeOnEscape: false }; constructor() { + this.data = athletesData; } ``` The default overlaySettings are using _ConnectedPositionStrategy_ with _Absolute_ scroll strategy, _modal_ set to false, with enabled _close on escape_ and _close on outside click_ interactions. ### Column pinning [Toolbar Pinning component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) provides the default UI for interacting with column pinning in the grid. The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. ```html + + + + ``` ### Column hiding [Toolbar Hiding component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. ```html + + + + ``` ### Advanced filtering [Toolbar Advanced Filtering component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html) provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button. ```html + + Custom text for the toggle button + ``` ### Data exporting > [!NOTE] > When exporting the Hierarchical Grid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows > belonging to their respective grid (the child grids will not be included in the exported data). As with the rest of the toolbar actions, exporting is provided through a [Toolbar Exporter component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) out of the box. The exporting component is using the respective service for the target data format ([Excel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html), [CSV](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html), [PDF](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html)). That means if the respective service is not provided through the dependency injection chain, the component won't be able to export anything. If you need a refresher on the DI in Angular, check the [official guide](https://angular.io/guide/dependency-injection). Here is a sample snippet showing how to enable all export services for your application. ```typescript // app.module.ts import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core'; // import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package @NgModule({ + ... + providers: [IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService ] }) export class AppModule { ... } ``` > [!Note] > In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the [API documentation](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) for the toolbar exporter component. Here is a snippet showing some of the options which can be customized through the Angular template: ```html + + + [exportCSV]="csvExportEnabled" + + [exportExcel]="excelExportEnabled" + + [exportPDF]="pdfExportEnabled" + + filename="exported_data" + > + Custom text for the exporter button + Custom text for the excel export entry + Custom text for the CSV export entry + Custom text for the PDF export entry + + ``` The following sample demonstrates how to customize the exported files: ## Exporting Indicator When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress. Moreover, users can set the toolbar [showProgress](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample below has significant amount of data. While the data is being exported, the progress bar is shown. Additionally, it has another button that simulates a long running operation in the grid: ## Custom Content > [!NOTE] > This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle > the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified > template files after the migration completes. If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. Here is a sample snippet: ```html + + ... + + {{ titleBinding }} + + + + + + ... + + ``` The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-toolbar-custom', + styleUrls: ['./hierarchical-grid-toolbar-custom.component.scss'], + templateUrl: 'hierarchical-grid-toolbar-custom.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, IgxGridToolbarDirective] +}) + +export class HGridToolbarCustomSampleComponent { + public data: any[]; + + constructor() { + this.data = SINGERS; + } +} +``` +```html +
+ + + Singers + + + + + + + + + +
+ +
+ + + + + + + + + + + Albums + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.hgrid__wrapper { + margin: 16px; +} +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} +```
## Styling To get started with styling the toolbar, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` First, let's create a new palette. ```scss $my-dark-palette: palette( + $primary: #2466ff, + $secondary: #ffcd0f, + $surface: #2a2b2f, + $grays: #fff, ); $my-dark-color: color($my-dark-palette, 'surface'); ``` Now, create a new theme that extends the [`grid-toolbar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-toolbar-theme) and modify the `$background-color` and the `$title-text-color` parameters. ```scss $dark-grid-toolbar-theme: grid-toolbar-theme( + $background-color: $my-dark-color, + $title-text-color: color($my-dark-palette, 'secondary'), + $dropdown-background: $my-dark-color, ); ``` To theme the column actions menus of the toolbar, we have to change the theme of the [`column-actions-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-igx-column-actionsr-theme) component. ```scss $dark-column-actions-theme: column-actions-theme( + $title-color: color($my-dark-palette, 'secondary'), + $background-color: color($my-dark-palette, 'surface') ); ``` Since the column actions are using other components - `igx-button` and `igx-checkbox` we need to change their themes to match our new toolbar theme. ```scss $dark-button-theme: outlined-button-theme( + $background: color($my-dark-palette, 'secondary'), + $hover-background: color($my-dark-palette, 'grays', 100), + $hover-foreground: color($my-dark-palette, 'secondary') ); $dark-checkbox-theme: checkbox-theme( + $tick-color: $my-dark-color, ); ``` The last step is to **include** the newly created themes. ```scss :host { + @include tokens($dark-grid-toolbar-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); } ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the grid toolbar component: ```scss @include tokens($dark-grid-toolbar-theme); :host { + ::ng-deep { + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { SINGERS } from '../../data/singersData'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-hierarchical-grid-toolbar-style', + styleUrls: ['./hierarchical-grid-toolbar-style.component.scss'], + templateUrl: './hierarchical-grid-toolbar-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent] +}) +export class HierarchicalGridToolbarStyleComponent { + public data: any[]; + + constructor() { + this.data = SINGERS; + } +} +``` +```html +
+ + + Singers + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$dark-button-theme: outlined-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #404040, + $hover-foreground: #ffcd0f +); + +$dark-grid-toolbar-theme: grid-toolbar-theme( + $background-color: #292826, + $title-text-color: #ffcd0f +); + +:host { + @include tokens($dark-grid-toolbar-theme); + + .igx-grid-toolbar__actions { + @include tokens($dark-button-theme); + + .igx-button--outlined { + margin-left: 0.5rem; + border: none; + } + } +} +```
## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. - [`IgxGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) - [`IgxGridToolbarAdvancedFilteringComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html) - [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) - [`IgxGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) - [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) - [`IgxGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) - [`IgxGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) [`IgxHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) events: - [`toolbarExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#toolbarExporting) Styles: - [`IgxHierarchicalGridComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md new file mode 100644 index 000000000..bc42b64b2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-validation.md @@ -0,0 +1,768 @@ +--- +_tocName: Validation +_premium: true +--- +--- title: Editing and Validation in Angular Hierarchical Grid - Infragistics _description: Validate the input of the users in grid and notify them if it's valid or not while using Angular Hierarchical Grid. See demos & examples! _keywords: angular validation, ignite ui for angular, infragistics _license: commercial --- # Angular Hierarchical Grid Editing and Validation The Hierarchical Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. It extends the [Angular Form validation](https://angular.io/guide/form-validation) functionality to allow easier integration with a well known functionality. When the state of the editor changes, visual indicators are applied to the edited cell. ## Configuration ### Configure via template-driven configuration We extend some of the Angular Forms validator directives to directly work with the `IgxColumn`. The same validators are available as attributes to be set declaratively in `igx-column`. The following validators are supported out-of-the-box: - required - min - max - email - minlength - maxlength - pattern To validate that a column input would be set and the value is going to be formatted as an email, you can use the related directives: ```html ``` The following sample demonstrates how to use the prebuilt `required`, `email` and `min` validator directives in a Hierarchical Grid. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-validator-service', + styleUrls: ['./hierarchical-grid-validator-service.component.scss'], + templateUrl: './hierarchical-grid-validator-service.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxRowIslandComponent, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective] +}) +export class HierarchicalGridValidatorServiceComponent implements OnInit { + + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public rowEdit: boolean = false; + + public ngOnInit(): void { + this.hierarchicalGrid.data = CUSTOMERS; + } + +} +``` +```html +
+ Row edit +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.top-row, .grid-wrapper { + padding: 16px; +} +```
### Configure via reactive forms We expose the `FormGroup` that will be used for validation when editing starts on a row/cell via a `formGroupCreated` event. You can modify it by adding your own validators for the related fields: ```html ``` @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { ```ts + public formCreateHandler(args: IGridFormGroupCreatedEventArgs) { + const formGroup = args.formGroup; + const orderDateRecord = formGroup.get('OrderDate'); + const requiredDateRecord = formGroup.get('RequiredDate'); + const shippedDateRecord = formGroup.get('ShippedDate'); + + orderDateRecord.addValidators(this.futureDateValidator()); + requiredDateRecord.addValidators(this.pastDateValidator()); + shippedDateRecord.addValidators(this.pastDateValidator()); + } ``` } You can decide to write your own validator function, or use one of the [built-in Angular validator functions](https://angular.io/guide/form-validation#built-in-validator-functions). ## Validation service API The grid exposes a validation service via the [`validation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#validation) property. That service has the following public APIs: - [`valid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#valid) - returns if the grid validation state is valid. - [`getInvalid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#getInvalid) - returns records with invalid states. - [`clear`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#clear) - clears state for record by id or clears all state if no id is provided. - [`markAsTouched`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#markAsTouched) - marks the related record/field as touched. Invalid states will persist until the validation errors in them are fixed according to the validation rule or they are cleared. ## Validation triggers Validation will be triggered in the following scenarios: - While editing via the cell editor based on the grid's [`validationTrigger`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#validationTrigger). Either on `change` while typing in the editor, or on `blur` when the editor loses focus or closes. - When updating cells/rows via the API - [`updateRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#updateRow), [`updateCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#updateCell) etc.. - When using batch editing and the [`undo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTransactionService.html#undo)/[`redo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTransactionService.html#redo) API of the transaction service. > Note: Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the `markAsTouched` API of the validation service. ## Angular Hierarchical Grid Validation Customization Options ### Set a custom validator You can define your own validation directive to use on a `` in the template. ```ts @Directive({ + selector: '[phoneFormat]', + providers: [{ provide: NG_VALIDATORS, useExisting: PhoneFormatDirective, multi: true }] }) export class PhoneFormatDirective extends Validators { + @Input('phoneFormat') + public phoneFormatString = ''; + + public validate(control: AbstractControl): ValidationErrors | null { + return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control) + : null; + } } ``` Once it is defined and added in your app module you can set it declaratively to a given column in the grid: ```html ``` ### Change default error template You can define your own custom error template that will be displayed in the error tooltip when the cell enters invalid state. This is useful in scenarios where you want to add your own custom error message or otherwise change the look or content of the message. ```html + + + +
+ Please enter correct phone format +
+ ``` ### Prevent exiting edit mode on invalid state In some cases you may want to disallow submitting an invalid value in the data. In that scenarios you can use the [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#cellEdit) or [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#rowEdit) events and cancel the event in case the new value is invalid. Both events' arguments have a [`valid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IGridEditEventArgs.html#valid) property and can be canceled accordingly. How it is used can be seen in the [Cross-field Validation example](#cross-field-example) ```html ``` ```ts public cellEdit(evt) { + if (!evt.valid) { + evt.cancel = true; + } } ``` ### Example The below example demonstrates the above-mentioned customization options. ```typescript +import { Component, Directive, Input, ViewChild } from '@angular/core'; +import { AbstractControl, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IGridFormGroupCreatedEventArgs, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { NgTemplateOutlet } from '@angular/common'; + +export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const match = phoneReg.test(control.value); + return match ? null : { phoneFormat: { value: control.value } } ; + } +} + +@Directive({ + selector: '[phoneFormat]', + providers: [{ provide: NG_VALIDATORS, useExisting: HGridPhoneFormatDirective, multi: true }] +}) +export class HGridPhoneFormatDirective extends Validators { + @Input('phoneFormat') + public phoneFormatString = ''; + + public validate(control: AbstractControl): ValidationErrors | null { + return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control) + : null; + } +} + +export function unique(value, index, self) { + return self.findIndex(v => v.CustomerID === value.CustomerID) === index; +} + +@Component({ + selector: 'app-hierarchical-grid-validator-service-extended', + styleUrls: ['./hierarchical-grid-validator-service-extended.component.scss'], + templateUrl: './hierarchical-grid-validator-service-extended.component.html', + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnRequiredValidatorDirective, HGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] +}) +export class HierarchicalGridValidatorServiceExtendedComponent { + + @ViewChild('hierarchicalGrid', { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + @ViewChild('childGrid', { static: true }) + private childGrid: IgxRowIslandComponent; + + public data = CUSTOMERS.filter(unique); + + public formCreateHandler(formGroupArgs: IGridFormGroupCreatedEventArgs) { + const orderDateRecord = formGroupArgs.formGroup.get('OrderDate'); + const requiredDateRecord = formGroupArgs.formGroup.get('RequiredDate'); + const shippedDateRecord = formGroupArgs.formGroup.get('ShippedDate'); + + orderDateRecord?.addValidators(this.futureDateValidator()); + requiredDateRecord?.addValidators([this.futureDateValidator(), this.pastDateValidator()]); + shippedDateRecord?.addValidators([this.futureDateValidator(), this.pastDateValidator()]); + } + + public get hasTransactions(): boolean { + return this.hierarchicalGrid.transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions; + } + + public get hasChildTransactions(): boolean { + return this.childGrid.gridAPI.getChildGrids() + .find(c => c.transactions.getAggregatedChanges(false).length > 0) !== undefined; + } + + public commit() { + const invalidParentTransactions = this.hierarchicalGrid.validation.getInvalid(); + let invalidChildTransactions = []; + this.childGrid.gridAPI.getChildGrids().forEach((grid) => { + invalidChildTransactions = [... invalidChildTransactions, ...grid.validation.getInvalid()]; + }); + const invalidTransactions = [...invalidParentTransactions, ...invalidChildTransactions]; + if (invalidTransactions.length > 0 && !confirm('You\'re committing invalid transactions. Are you sure?')) { + return; + } + + this.hierarchicalGrid.transactions.commit(this.data); + this.childGrid.gridAPI.getChildGrids().forEach((grid) => { + grid.transactions.commit(grid.data); + grid.validation.clear(); + }); + this.hierarchicalGrid.validation.clear(); + } + + public undo(grid: any) { + /* exit edit mode and commit changes */ + grid.endEdit(true); + grid.transactions.undo(); + } + + public redo(grid: any) { + /* exit edit mode and commit changes */ + grid.endEdit(true); + grid.transactions.redo(); + } + + public futureDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + if(date > new Date()){ + return { futureDate: { value: control.value } }; + } + return null; + } + } + + public pastDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + let pastDate = new Date('Nov 5 2010'); + if(pastDate){ + return pastDate < date ? null : { pastDate: { value: control.value } } + } else return null; + } + } + +} +``` +```html +
+ + + + + + + + + + @if (cell.validation.errors?.['phoneFormat']) { +
+ Please enter correct phone format +
+ } + + + + + + + + + + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before the 5th of November 2010 +
+ } + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future. +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before the 5th of November 2010 +
+ } + + + + + + + +
+ + + +
+
+``` +```scss +.top-row, .grid-wrapper { + padding: 16px; +} + +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: left; + padding: 10px 0; +} +```
## Cross-field validation In some scenarios validation of one field may depend on the value of another field in the record. In that case a custom validator can be used to compare the values in the record via their shared `FormGroup`. + + + + + + Cross-field validators can be added to the formGroup on the [`formGroupCreated`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#formGroupCreated) event. In them multiple fields can be compared for validity. + + ```ts + public formCreateCustomerHandler(event: IGridFormGroupCreatedEventArgs) { + const formGroup = event.formGroup; + formGroup.addValidators(this.addressValidator()); + } + + public formCreateOrderHandler(event: IGridFormGroupCreatedEventArgs) { + const formGroup = event.formGroup; + formGroup.addValidators(this.dateValidator()); + } + + public addressValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const formGroup = control; + let returnObject = {}; + const city = formGroup.get('City'); + const country = formGroup.get('Country'); + const validCities = this.countryData.get(country.value); + if (!validCities || !validCities[city.value]) { + returnObject['invalidAddress'] = true; + } + return returnObject; + } + } + + public dateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const formGroup = control; + let returnObject = {}; + const orderDate = formGroup.get('OrderDate').value; + const shippedDate = formGroup.get('ShippedDate').value; + if (new Date(shippedDate) < new Date(orderDate)) { + returnObject['invalidRange'] = true; + } + return returnObject; + } + } + ``` The multi-field errors can then be displayed in a separate pinned column. ```html + +
+ +
+
+ +
+
+
+ {{message}} +
+
+ + ``` Errors and the detailed messages can be determined based on the row and cell's validity. ```ts + public isRowValid(cell: CellType) { + const hasErrors = !!cell.row.validation.errors || cell.row.cells.some(x => !!x.validation.errors); + return !hasErrors; + } + + public stateMessage(cell: CellType) { + const messages = []; + const row = cell.row; + if (row.validation.errors?.invalidAddress) { + messages.push('The address information is invalid. City does not match the Country.'); + } + if (row.validation.errors?.invalidRange) { + messages.push('The ShippedDate cannot be before the OrderDate.'); + } + const cellValidationErrors = row.cells.filter(x => !!x.validation.errors); + if (cellValidationErrors && cellValidationErrors.length > 0) { + const fields = cellValidationErrors.map(x => x.column.field).join(','); + messages.push('The following fields are required: ' + fields); + } + + if (messages.length === 0) { + // no errors + return ['Valid']; + } + return messages; + } ``` ### Cross-field example The below sample demonstrates cross-field validation in a Hierarchical Grid for both the root and child data. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { AbstractControl, ValidationErrors, ValidatorFn, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CellType, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonDirective, IgxFocusDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'hierarchical-grid-cross-field-validation', + styleUrls: ['./hierarchical-grid-cross-field-validation.component.scss'], + templateUrl: 'hierarchical-grid-cross-field-validation.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnRequiredValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxGridToolbarComponent, IgxButtonDirective] +}) + +export class HierarchicalGridValidatorServiceCrossCellComponent implements OnInit { + public rowEdit: boolean = true; + public localdata; + public countryData: Map; + public countries = []; + public cities = []; + + @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent }) + public grid: IgxHierarchicalGridComponent; + + constructor() { + + } + public ngOnInit(): void { + this.localdata = CUSTOMERS.filter((rec, index, arr) => arr.findIndex(x => x.CustomerID === rec.CustomerID) === index); + this.countryData = new Map(this.localdata.map(i => [i.Country, {}])); + this.localdata.forEach(rec => { + const country = rec.Country; + const city = rec.City; + this.countryData.get(country)[city] = city; + }); + this.countries = [...new Set(this.localdata.map(x => x.Country))]; + this.cities = [...new Set(this.localdata.map(x => x.City))]; + } + + public editHandler(event: IGridEditEventArgs) { + if (!event.valid) { + event.cancel = true; + } + } + + public formCreateCustomerHandler(event: IGridFormGroupCreatedEventArgs) { + const formGroup = event.formGroup; + formGroup.addValidators(this.addressValidator()); + } + + public formCreateOrderHandler(event: IGridFormGroupCreatedEventArgs) { + const formGroup = event.formGroup; + formGroup.addValidators(this.dateValidator()); + } + + public addressValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const formGroup = control; + let returnObject = {}; + const city = formGroup.get('City'); + const country = formGroup.get('Country'); + const validCities = this.countryData.get(country.value); + if (!validCities || !validCities[city.value]) { + returnObject['invalidAddress'] = true; + } + return returnObject; + } + } + + public dateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const formGroup = control; + let returnObject = {}; + const orderDate = formGroup.get('OrderDate').value; + const shippedDate = formGroup.get('ShippedDate').value; + if (new Date(shippedDate) < new Date(orderDate)) { + returnObject['invalidRange'] = true; + } + return returnObject; + } + } + + public isRowValid(cell: CellType) { + const hasErrors = !!cell.row.validation.errors || cell.row.cells.some(x => !!x.validation.errors); + return !hasErrors; + } + + public stateMessage(cell: CellType) { + const messages = []; + const row = cell.row; + if (row.validation.errors?.invalidAddress) { + messages.push('The address information is invalid. City does not match the Country.'); + } + if (row.validation.errors?.invalidRange) { + messages.push('The ShippedDate cannot be before the OrderDate.'); + } + const cellValidationErrors = row.cells.filter(x => !!x.validation.errors); + if (cellValidationErrors && cellValidationErrors.length > 0) { + const fields = cellValidationErrors.map(x => x.column.field).join(','); + messages.push('The following fields are required: ' + fields); + } + + if (messages.length === 0) { + // no errors + return ['Valid']; + } + return messages; + } + + public commit(grid: any) { + const hGrid = grid as IgxHierarchicalGridComponent; + const invalidTransactions = hGrid.validation.getInvalid(); + if (invalidTransactions.length > 0 && !confirm('You\'re commiting invalid transactions. Are you sure?')) { + return; + } + + hGrid.transactions.commit(hGrid.data); + hGrid.validation.clear(); + } +} +``` +```html +
+ Row edit +
+
+ + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + + + + + + + @for (city of cities; track city) { + + {{ city }} + + } + + + + + + + @for (country of countries; track country) { + + {{ country }} + + } + + + + + + + + + + + + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + + + + + + + +
+ +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); +} + +.top-row, +.grid__wrapper { + padding: 16px; + padding-bottom: 0; +} + + +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 10px 0; +} +```
## Styling Using the [Ignite UI for Angular Theme Library](../themes/index.md), we can alter the default validation styles while editing. In the example below, we will make use of the exposed template for validation message, which pops out in a tooltip and overriding the error color to modify the default looks of the validation. We will also style the background of the invalid rows to make them more distinct. ### Import theme The easiest way to style and access css variables is to define styles in our `app`'s global style file (typically `styles.scss`). The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Include the styles In order to change the error color you can use the css variable `--ig-error-500`: ```scss --ig-error-500: 34, 80%, 63%; ``` ### Custom Templates Changing the default error template allows setting custom classes and styles: ```html +
+ + +
``` ### Invalid row and cell styles Rows and cells provide API for the developers to know if a row or cell is invalid and what kind of errors are active. ```ts public rowStyles = { + background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000' }; public cellStyles = { + 'invalid-cell': (rowData, columnKey) => { + let cell = this.hierarchicalGrid.getCellByKey(rowData, columnKey); + // search in child grids + if (!cell) { + for (let grid of this.childGrid.gridAPI.getChildGrids()) { + cell = grid.getCellByKey(rowData, columnKey); + if (cell) break; + } + } + return cell && cell.validation.status === 'INVALID'; + } } ``` ```html + + ... + + ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, RowType } from 'igniteui-angular/grids/core'; +import { SINGERS } from '../../data/singersData'; +import { Singer } from '../models'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { NgTemplateOutlet } from '@angular/common'; + +@Component({ + selector: 'app-hierarchical-grid-validation-style', + styleUrls: ['./hierarchical-grid-validation-style.component.scss'], + templateUrl: 'hierarchical-grid-validation-style.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxRowIslandComponent] +}) +export class HGridValidationStyleComponent { + @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hierarchicalGrid: IgxHierarchicalGridComponent; + @ViewChild('childGrid', { static: true }) private childGrid: IgxRowIslandComponent; + public localData: Singer[]; + public rowStyles = { + background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000' + }; + public cellStyles = { + 'invalid-cell': (rowData, columnKey) => { + let cell = this.hierarchicalGrid.getCellByKey(rowData, columnKey); + // search in child grids + if (!cell) { + for (let grid of this.childGrid.gridAPI.getChildGrids()) { + cell = (grid as IgxGridComponent).getCellByKey(rowData, columnKey); + if (cell) break; + } + } + return cell && cell.validation.status === 'INVALID'; + } + } + + constructor() { + this.localData = SINGERS; + } + + public formatter = (a) => a; +} +``` +```html +
+ + + +
+ + +
+ + + + + + + + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +igx-hierarchical-grid { + --ig-error-500: 34deg, 80%, 63%; +} +```
## API References - [IgxBaseTransactionService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Known Issues and Limitations |Limitation|Description| | --- | --- | | When `validationTrigger` is blur, `editValue` and validation will trigger only after editor is blurred. | Reason is that this utilizes the formControl's [`updateOn`](https://angular.io/api/forms/AbstractControl#updateOn) property. This determines the event on which the formControl will update and trigger related validators. | ## Additional Resources - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Hierarchical Grid Overview](hierarchical-grid.md) - [Hierarchical Grid Editing](editing.md) - [Hierarchical Grid Row Editing](row-editing.md) - [Hierarchical Grid Row Adding](row-adding.md) - [Hierarchical Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md new file mode 100644 index 000000000..3ea0d6afe --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/hierarchicalgrid-virtualization.md @@ -0,0 +1,165 @@ +--- +_tocName: Virtualization and performance +_premium: true +--- +--- title: Angular Grid Virtualization and Performance - Ignite UI for Angular _description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed & performance of the grid when handling large data sets. Try for free! _keywords: angular data grid, grid performance, data table virtualization, ignite ui for angular _license: commercial _canonicalLink: grid/virtualization --- --- title: Angular Grid Virtualization and Performance - Ignite UI for Angular _description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed & performance of the grid when handling large data sets. Try for free! _keywords: angular data grid, grid performance, data table virtualization, ignite ui for angular _canonicalLink: grid/virtualization --- # Angular Hierarchical Grid Virtualization and Performance In Ignite UI for Angular, the [IgxHierarchicalGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) control now utilizes the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive and virtualizes its content both vertically and horizontally. ### Demo ```typescript +import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IGX_HIERARCHICAL_GRID_DIRECTIVES, IGridCreatedEventArgs, IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { EntityType, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { HttpClient } from '@angular/common/http'; + +const API_ENDPOINT = 'https://data-northwind.indigo.design'; + +@Component({ + selector: 'app-hierarchical-grid-lod', + styleUrls: ['./hierarchical-grid-lod.component.scss'], + templateUrl: './hierarchical-grid-lod.component.html', + imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent] +}) +export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit { + private http = inject(HttpClient); + + @ViewChild('hGrid', { static: true }) + public hGrid: IgxHierarchicalGridComponent; + + public remoteData = []; + public schema: EntityType[] = [ + { + name: 'Customers', + fields: [ + { field: 'customerId', dataType: 'string' }, + { field: 'companyName', dataType: 'string' }, + { field: 'contactName', dataType: 'string' }, + { field: 'contactTitle', dataType: 'string' } + ], + childEntities: [ + { + name: 'Orders', + fields: [ + { field: 'customerId', dataType: 'string' }, // first field will be treated as foreign key + { field: 'orderId', dataType: 'number' }, + { field: 'employeeId', dataType: 'number' }, + { field: 'shipVia', dataType: 'string' }, + { field: 'freight', dataType: 'number' } + ], + childEntities: [ + { + name: 'Details', + fields: [ + { field: 'orderId', dataType: 'number' }, // first field will be treated as foreign key + { field: 'productId', dataType: 'number' }, + { field: 'unitPrice', dataType: 'number' }, + { field: 'quantity', dataType: 'number' }, + { field: 'discount', dataType: 'number' } + ] + } + ] + } + ] + } + ]; + + public ngOnInit() { + const ordersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['customerId']); + ordersTree.filteringOperands.push({ + fieldName: 'freight', + ignoreCase: false, + condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), + conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name, + searchVal: 500 + }); + + const customersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']); + customersTree.filteringOperands.push({ + fieldName: 'customerId', + condition: IgxStringFilteringOperand.instance().condition('inQuery'), + conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name, + ignoreCase: false, + searchTree: ordersTree + }); + this.hGrid.advancedFilteringExpressionsTree = customersTree; + } + + public ngAfterViewInit() { + this.refreshRootGridData(); + } + + public refreshRootGridData() { + const tree = this.hGrid.advancedFilteringExpressionsTree; + this.hGrid.isLoading = true; + if (tree) { + this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, tree).subscribe(data =>{ + this.remoteData = Object.values(data)[0]; + this.hGrid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } else { + this.http.get(`${API_ENDPOINT}/Customers`).subscribe(data => { + this.remoteData = Object.values(data); + this.hGrid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } + } + + public gridCreated(event: IGridCreatedEventArgs) { + event.grid.isLoading = true; + const url = this.buildUrl(event); + this.http.get(url).subscribe(data => { + event.grid.data = Object.values(data); + event.grid.isLoading = false; + this.hGrid.cdr.detectChanges(); + }); + } + + private buildUrl(event: IGridCreatedEventArgs) { + const parentKey = (event.grid.parent as any).key ?? this.schema[0].name; + const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${event.owner.key}`; + return url; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper{ + padding: 16px; +} +```
## Enabling Virtualization By utilizing the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive the IgxHierarchicalGrid now optimizes DOM rendering and memory consumption by rendering only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. [IgxHierarchicalGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#height) defaults to `100%` which will enable virtualization if the content displayed cannot fit inside the available space and scrollbars are required either vertically or horizontally. However, it is also possible to explicitly set the Hierarchical Grid's [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#height) to `null` which means that the related dimension will be determined by the total size of the items inside. No scrollbar will then be shown and all items will be rendered along the respective dimension (columns if [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#height) is `null`). The size of the data chunks is determined by: - The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#rowheight) option and is 50(px) by default. - The individual column widths in pixels for the horizontal (column) virtualization. They can be determined by either setting explicit width for each column component or setting the Hierarchical Grid's [`columnWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the Hierarchical Grid's container. The grid will try to fit all columns inside the available space as long as the width it attempts to assign is not under 136(px). In such cases, columns with unassigned width will receive the minimum width of 136(px) and a horizontal scrollbar will be shown. The grid will be horizontally virtualized. Explicitly setting column widths in percentages (%) will, in most cases, create a grid that is not virtualized horizontally as it will not have a horizontal scrollbar. ## Virtualization Limitations - On Mac OS horizontal scrollbar is not visible when "Show scrollbars only when scrolling" system option is set to true (which is the default value). This is because the Hierarchical Grid’s row container has an overflow set to hidden. Change the option to "Always" and the scrollbar will appear. ## FAQ ### Why having dimensions in the Hierarchical Grid is necessary for virtualization to work? Without information about the sizes of the container and the items before rendering them setting the width or height of a scrollbar or determining which of the items should be in the view when you scroll to a random location in the Hierarchical Grid is erroneous. Any assumptions on what the actual dimensions might be could lead to unnatural behavior of the scrollbar and ultimately suboptimal experience for the end-user. This is why setting the related dimensions is enforced in order for virtualization to take effect.
## API References - [IgxHierarchicalGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxForOfDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) - [IForOfState](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-customize-theme.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-customize-theme.md new file mode 100644 index 000000000..bd49113eb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-customize-theme.md @@ -0,0 +1,419 @@ +--- +title: Customizing Ignite UI Theming - Angular | Ignite UI for Angular +_description: The Ignite UI for Angular Theming engine allows for full application theming customization and styles size optimization. +_keywords: Ignite UI for Angular, Customizing Ignite UI Theming, Optimizing Ignite UI Theming, Angular Theming Engine, Angular Theming +_tocName: Customize and Optimize Themes +--- + +# Customizing Ignite UI for Angular Theming + +This article will walk you through the details of customizing Ignite UI for Angular application theming and optimizing the size of the produced stylesheet. The article shows details of how the Ignite UI for Angular theming engine works and presents advanced usage of it. The article is very useful for both making full customization of the component styles, such that your Angular application is tailored to match your desired look and feel, and for making your application optimal for deployment by reducing the style sizes down to only what is used by the app. + +>[!NOTE] +> This document describes the theming system in Ignite UI for Angular from version 15 forward. Examples include both using the Sass APIs provided by the theming engine and exposed CSS variables. + +## Getting Started + +We will be using the [App Builder](https://www.infragistics.com/products/appbuilder) to produce an Angular application and then we will modify the styling of it in the generated repository. We start by creating a new app from "Header + mini nav + content + side pane" template in the App Builder and we add some components to the design surface. + +Getting Started App Builder + +Then we generate our app, using Angular as a target, to a GitHub repository, on top of which we will work both from the App Builder and modifying the generated code itself. After cloning the repository and building the project, we get the running Angular application in its initial state. + +Getting Started Running App + +As you can see, the application has applied default theming, which is [material light variant](../../themes/sass/presets/material.md). The generated `styles.scss` file looks like this: + +```scss +/* You can add global styles to this file, and also import other style files */ + +// Standard CSS normalize, comment out if not required or using a different module +@use "minireset.css/minireset"; +@use "@infragistics/igniteui-angular/theming" as *; + +@include core(); +@include typography(); +@include light-theme($light-material-palette); + +body { + background: hsla(var(--ig-surface-500)); + color: var(--ig-surface-500-contrast); +} + +html, body { + height: 100%; +} + +.ig-typography { + h1, h2, h3, h4, h5, h6, p, .ig-typography__body-1 { + margin: 0; + } +} + +.outer-wrapper > *:not(router-outlet) { + width: 100%; +} +``` + +## Theme Customization + +We want a dark variant of the same theme, add our own [color palette](../../themes/palettes.md) to match our branding, and change the font to `Poppins` instead of the default `Titillium Web`, all of which we can change directly through the App Builder and we can push the change as a pull request from the App Builder into the repository. + +Getting Started App Builder Theming + +The updated `styles.scss` looks like this: + +```scss +@include core(); +@include typography($font-family: "Poppins"); + +$custom-palette: palette( + $primary: #1028c7, + $secondary: #e0d94c, + $surface: #000, + $gray: #fff +); + +@include theme( + $palette: $custom-palette, + $schema: $dark-material-schema +); +``` + +As you can see, the code generation changed from the specific `@include light-theme($light-material-palette);`, which is the [default theme](../../themes/sass/presets/material.md) and [color palette](../../themes/palettes.md), to a generic [`theme()`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-theme) include, which provides as parameters our custom color palette and a [dark material schema](../../themes/sass/schemas.md) for the theming structure. The running Angular app result looks like this now: + +Getting Started Dark App + +We want to dig deeper and customize a specific [component theme](../../themes/sass/component-themes.md) in our application and we will do this by bringing in the CSS variables for an individual component theme, in this case the grid toolbar theme. + +```scss +@include core(); +@include typography($font-family: "Poppins"); + +$primary: #1028c7; + +/* All of the components will use this custom color palette */ +$custom-palette: palette( + $primary: $primary, + $secondary: #e0d94c, + $surface: #000, + $gray: #fff +); + +@include theme( + $palette: $custom-palette, + $schema: $dark-material-schema +); + +/* Grid Toolbar */ +/* All grid toolbars will have custom background and elevations */ +$toolbar-theme: grid-toolbar-theme( + $background-color: $primary +); + +:host { + @include tokens($toolbar-theme); +} +/* END Grid Toolbar */ +``` + +And the result in our app now looks like this: + +Customizing Updated Toolbar + +The same process can be applied to override and customize any of the component themes individually. + +### Switching custom themes at runtime + +Now let's dig even deeper and create two custom versions of the theme, which can be switched between at runtime. We can do this with user control/preference and let them switch it at any time. For the example, however, we will use the OS defined user preference (light or dark) in order to apply a theme, which matches the current OS setting. In order to do this, we will need two color palettes: + +```scss +@use "minireset.css/minireset"; +@use "@infragistics/igniteui-angular/theming" as *; + +@include core(); +@include typography($font-family: "Poppins"); + +$primary-dark: #1028c7; +$primary-light: #3c55f1; +$secondary-dark: #e0d94c; +$secondary-light: #b4a904; + +$custom-palette-dark: palette( + $primary: $primary-dark, + $secondary: $secondary-dark, + $surface: #000, + $gray: #ccc +); + +$custom-palette-light: palette( + $primary: $primary-light, + $secondary: $secondary-light, + $surface: #fff, + $gray: #222 +); +``` + +Then our theme definition will go in the general scope, which we will use for the light variation and we will create a palette override in a `@media` query when dark color schema OS preference is detected: + +```scss +@include theme( + $palette: $custom-palette-light, + $schema: $light-material-schema +); + +@media (prefers-color-scheme: light) { + /* Grid Toolbar override for light color scheme */ + igx-grid-toolbar { + --background-color: #{$primary-light}; + --title-text-color: #{text-contrast($primary-light)}; + } + /* END Grid Toolbar */ +} + +@media (prefers-color-scheme: dark) { + // changes native element schema (scrollbars, select, etc.) + :root { + color-scheme: dark; + } + + @include palette($custom-palette-dark); + + /* Grid Toolbar override for dark color scheme */ + igx-grid-toolbar { + --background-color: #{$primary-dark}; + --title-text-color: #{text-contrast($primary-dark)}; + } + /* END Grid Toolbar */ +} +``` + +>[!NOTE] +> I have switched the `igx-grid-toolbar` theme override to overriding just two of its variables, instead of reincluding all of the theme variables using [`tokens`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-tokens). +> All theme variables can be found in the [corresponding sass api doc](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-toolbar-theme) and are equivalent to the sass variables, but prefixed with `--` instead of `$`. + +And the result now looks like this with light OS theme: + +Customizing Color Schema Light + +And this is how it looks with dark OS theme: + +Customizing Color Schema Dark + +>[!NOTE] +> Full runtime switch, including Ignite UI theme schema preset switch is possible, only if two full themes are built. In the example above, we're switching the color palettes, but the theme schema remains $light-material-schema, so not all of the correct shades from the color palette are used when we switch to the dark color palette. + +### What can be customized + +Ignite UI theming abstracts multiple dimensions of theming and provides for very robust retheming capabilities. Developers and designers can take advantage of the theming engine APIs to make tailored visual design for their applications, which gives them unique look and feel when using Ignite UI for Angular. The theming engine also exposes variables from each of the dimensions, which can be used to apply theming to the rest of the application structure, which is not directly built with Ignite UI for Angular components as UI. The dimensions exposed for modifications are: + +- [Colors](../../themes/sass/palettes.md) (color palette) +- [Shape](../../themes/sass/roundness.md) (borders and radiuses) +- [Elevations](../../themes/sass/elevations.md) (shadows) +- [Typography](../../themes/sass/typography.md) (fonts and font sizes) +- [Size](../../display-density.md) (the size of information that is fitted on the screen) + +>[!NOTE] +> If you really want a fully custom visual design, you will need to modify all of the supported theming dimensions and you will take full advantage of the Sass APIs. +> If you just need to change things like the fonts and а few colors, then you can just take a look at the section for palettes and typography. In most cases, all you will need is to change a few CSS variables and you won't need the full Sass APIs. +> We've made this as granular as possible, so modifications can be applied without unexpected side results on the visual design of your applications. + +## Theme Optimization + +After making some customizations, we're going to build the application we generated and modified to see what our application theme looks like in terms of size. + +Optimizing Initial Build + +As you can see, the application theme is slightly over 400kb, which comes down to ~40kb when compressed and transferred over. This is not large, but can it be more optimal? The answer is yes, unless every single component from the Ignite UI for Angular suite is used. Calling `@include theme()` brings in all of the component themes, but we have a mechanism for telling the function what to exclude. There's an [`$exclude`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-theme) parameter to the theming mixin, which takes component names as an array and excludes those from the theme at build time. Since it's not so easy to find and list all of the components available in the package, it's preferable if you can just list all of the components you use. We expose the full component list as a variable, which you have access to once you + +```scss +@use "@infragistics/igniteui-angular/theming" as *; +``` + +The components array is found at `$components` and you can reduce [this list](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#variable-dark-material-schema) with the components you use and exclude all the rest, like in this example: + +```scss +$include: ( + igx-navbar, + igx-ripple, + igx-icon, + igx-button, + igx-input-group, + igx-combo, + igx-nav-drawer, + igx-grid, + igx-grid-toolbar +); + +@include theme( + $palette: $custom-palette, + $schema: $dark-material-schema, + /* Removing all included components from the full list and excluding the rest */ + $exclude: map.keys(map.remove($components, $include...)) +); +``` + +>[!NOTE] +> Some component themes depend on other component themes. +> Even if you exclude certain themes, they will be retained by the build if you use a component theme, which depends on an excluded theme. + +What does our build look like after we've excluded certain themes? + +Optimizing After Exclude + +As you can see, our styles size is reduced to almost half it's original size. This looks pretty good at the moment, but can we reduce this even further? In fact, we can. Most of the styles size is taken by the largest components in the suite, in this case the `IgxTreeGridComponent` that we have in one of our views. However, we don't use this component in any other view. We can make the view with the `igx-tree-grid` a lazy-loaded route and we can include the theme for the grids only for that route, hence making our top-level css even smaller. How is this done? + +We will start by creating a new module and a new routing module in the folder with the employees component in our app. + +```typescript +// employees.module.ts +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { EmployeesRoutingModule } from './employees-routing.module'; +import { EmployeesComponent } from './employees.component'; +import { IgxButtonModule, IgxComboModule, IgxTreeGridModule } from '@infragistics/igniteui-angular'; + + +@NgModule({ + declarations: [ + EmployeesComponent + ], + imports: [ + CommonModule, + EmployeesRoutingModule, + IgxComboModule, + IgxTreeGridModule, + IgxButtonModule + ] +}) +export class EmployeesModule { } +``` + +```typescript +// employees-routing.module.ts +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { EmployeesComponent } from './employees.component'; + +const routes: Routes = [{ path: '', component: EmployeesComponent }]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class EmployeesRoutingModule { } +``` + +```typescript +// Updated top-level app-routing.module.ts +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { PageNotFoundComponent } from './error-routing/not-found/not-found.component'; +import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component'; +import { ErrorRoutingModule } from './error-routing/error-routing.module'; +import { StatisticsComponent } from './statistics/statistics.component'; + +export const routes: Routes = [ + { path: '', redirectTo: 'statistics', pathMatch: 'full' }, + { path: 'error', component: UncaughtErrorComponent }, + // { path: 'employees', component: EmployeesComponent, data: { text: 'Employees' } }, + // lazy-loading the employees route + { path: 'employees', loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule) }, + { path: 'statistics', component: StatisticsComponent, data: { text: 'Statistics' } }, + { path: '**', component: PageNotFoundComponent } // must always be last +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes), ErrorRoutingModule], + exports: [RouterModule, ErrorRoutingModule] +}) +export class AppRoutingModule { +} +``` + +Now we remove the `IgxTreeGridModule` and `IgxComboModule` imports, as well as the `EmployeesComponent` from our `app.module.ts` because we don't use the imports in any other views and we can have only one component declaration in all modules. + +Then we will proceed by removing the `igx-grid`, `igx-grid-toolbar` and `igx-combo` from our theme includes, and we will include them on the `employees.component.scss` level. + +```scss +/* employees.component.scss */ +@use "@infragistics/igniteui-angular/theming" as *; + +:host ::ng-deep { + height: 100%; + display: flex; + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; + + $primary: #1028c7; + @include core(); + + @include grid(grid-theme()); + + @include combo(combo-theme()); + + @include grid-toolbar( + grid-toolbar-theme( + $background-color: $primary, + ); +} +``` + +```scss +/* Updated styles.scss */ +@use "sass:map"; +@use "minireset.css/minireset"; +@use "@infragistics/igniteui-angular/theming" as *; + +@include core(); +@include typography($font-family: "Poppins"); + +$primary: #1028c7; + +$custom-palette: palette( + $primary: $primary, + $secondary: #e0d94c, + $surface: #000, + $gray: #fff +); + +$include: ( + igx-navbar, + igx-ripple, + igx-icon, + igx-button, + igx-nav-drawer +); + +@include theme( + $palette: $custom-palette, + $schema: $dark-material-schema, + $exclude: map.keys(map.remove($components, $include...),) +); +``` + +>[!NOTE] +> You probably want to put all your variables, like color palette values in a separate `_variables.scss` file, which you can include from multiple components to reuse the variables. + +The result in terms of build is the following: + +Optimizing After Module Lazy Load + +As you can see, our top-level `styles.css` came down to a little over 70kb, which is a little less than 6kb when compressed. We started at ~428kb, ~40kb compressed and managed to bring this down about 7 times in terms of compressed size. The rest is being delivered only when the view containing the `igx-tree-grid` and `igx-combo` components is being loaded. + +## Additional Resources + +Related topics: + +- [Palettes](../../themes/sass/palettes.md) +- [Elevations](../../themes/sass/elevations.md) +- [Typography](../../themes/sass/typography.md) +- [Theming with Sass](../../themes/sass/index.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md new file mode 100644 index 000000000..68ac54e12 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-perform-crud.md @@ -0,0 +1,474 @@ +--- +title: How to enable CRUD operations in Angular. +_description: What is Angular Crud? How to Build a CRUD service in Angular and use it to perform CRUD operations with the Grid data? Learn more here. +_keywords: angular, crud, crud operations, infragistics, crud tutorial +_tocName: Build CRUD operations with IgxGrid +--- + +# What is CRUD + +CRUD is an acronym in computer programming that stands for the CREATE, READ, UPDATE, DELETE operations that can be performed against a data collection. In computer world, talking about CRUD applications, is a main difference compared to applications that provide read-only data to users. + +## Angular CRUD + +While talking about Angular CRUD, or CRUD operations in Angular, it is important to note that the data storage is on a remote server. The Angular application can not directly access the data layer, so it needs to communicate with it through a Web API that provides endpoints for the CRUD operations, i.e.: + +| API | Operation | HTTP methods | +|-----|-----------| ----------- | +| "api/entities" | READ all entities | GET | +| "api/entities/id" | READ the entity with corresponding id | GET | +| "api/entities/update" | UPDATE the entity with corresponding id | PUT / PATCH | +| "api/entities/create" | CREATE a new entity | POST | +| "api/entities/delete" | DELETE the entity with corresponding id | DELETE | + +Notice that the CRUD operations also map conceptually to the HTTP methods that are used to communicate with APIs over HTTP. + +The entire code that will work with the above mentioned API can be abstracted in an Angular service. Such a service is injectable and can be reused by any component that needs to perform CRUD operations against the same database. A good practice is to write such service as generic as possible, thus making it suitable to be reused in many components, and against different servers as well. + +A generic example of such service will look like this: + + +```typescript +@Injectable() +export class CRUDService { + /** See https://angular.io/api/common/http/HttpClient */ + constructor(private http: HttpClient) { } + + /** Gets all entities from server */ + public getData() { + return this.http.get(`${this.serverURL}\api\entities`); + } + + /** Gets entity with corresponding id */ + public getRecord(id) { + return this.http.get(`${this.serverURL}\api\entities\${id}`); + } + + /** Creates entity from body */ + public add(entity) { + return this.http.post(`${this.serverURL}\api\entities\create`, entity); + } + + /* Updates entity with data from body */ + public update(entity) { + return this.http.put(`${this.serverURL}\api\entities\update`, entity); + } + + /** Deletes the corresponding entity */ + public delete(entity) { + return this.http.delete(`${this.serverURL}\api\entities\delete`, entity); + } +} +``` + +What the above service is missing is configuration for filtering/sorting/paging, etc. Depending on the exact API implementation of the endpoints, requests to the server may need optional parameters to handle filtering/sorting/paging for you. See our [Remote Data Operations](../../grid/remote-data-operations.md) for demos accompanied with code examples. + +For more examples and guidance, refer to the [HTTP Services](https://angular.io/tutorial/toh-pt6) tutorial in the official Angular documentation. + + +## CRUD Operations with Grid + +Enabling CRUD in the Grid means providing UI for the users to perform these CRUD operations from within the grid. This is quite easy - the Grid provides [**Cell Editing**](../../grid/cell-editing.md), [**Row Editing**](../../grid/row-editing.md), [**Row Adding**](../../grid/row-adding.md) and **Row Deleting** UI out of the box, and powerful API to do this on your own. Next, we want to take the result of each editing action and communicate it to the corresponding method in our CRUD service, thus preserving all changes to the original database. By completing this, we may say the grid is CRUD enabled. + + +This section is written as HOW-TO tutorial on enabling CRUD operations in Grid, accompanied by code snippets that you can take and copy paste in your code. + + +## How to + +Let's first enable the rowEditing behavior, bring the UI we need for the editing actions, benefiting from the `IgxActionStrip` (see more about the [`IgxActionStrip`](../../action-strip.md)), and attach event handlers: + +```html + + + + + +``` + +In the Angular component, inject the data service using DI. Now we are ready to use the service to do full CRUD operations against our data layer: + +```typescript +constructor(private crudService: CRUDService) { } + +public rowDeleted(event: IRowDataEventArgs) { + this._crudService.delete(event.data).subscribe((rec) => { + // notification or do any additional handling + this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`); + }); +} + +public rowAdded(event: IRowDataEventArgs) { + this._crudService.add(event.data); +} + +public rowEditDone(event: IGridEditDoneEventArgs) { + this._crudService.update(event.newValue); +} +``` + +In the above example, we only call the corresponding methods and pass the data that is read from the event arguments. Most API endpoints will return the updated/added/deleted entity, which indicates that the request was successful. + +A good practice is to add validation, notifying the users that all actions have been completed successfully or that an error has occurred. In such case, you may want to pass handlers for the error and complete notifications too: + +```typescript +this._crudService.delete(event.data).subscribe({ + next: (data: any) => { + console.log('success'); + }, + error: err => { + console.log(err); + }, + complete: () => { + console.log('Complete notification') + } +}); +``` + +> [!NOTE] +> The above examples are based on the default grid UI for editing actions. Another valid approach is if you provide your own external UI. In such case, responding to user interactions with the UI should work with the grid editing API (**make sure the grid has a primaryKey set**). See [**API**](how-to-perform-crud.md#editing-api) section for reference. +> [!NOTE] +> Make sure to follow best practices and prevent any differences in your local data compared to the server database. For example - you may decide to first make a request to the server to delete a record, but if the request fails, do not delete the data on the local grid data: + +```typescript +this._crudService.delete(event.data).subscribe({ + next: (data: any) => { + this.grid.getRowByKey(event.data[this.grid.primaryKey]).delete(); + }, + error: err => { + console.log(err); // notify and don't delete the grid row + } +}); +``` + +## Demo + +See the demo that was built following the guidance. Play around with it and try the examples for customization to fit your scenario in the best possible way. + +```typescript +import { ChangeDetectorRef, Component, OnInit, ViewChild, OnDestroy, inject } from '@angular/core'; +import { GridPagingMode, IGridEditDoneEventArgs, IRowDataEventArgs, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridRow } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { NoopFilteringStrategy, NoopSortingStrategy } from 'igniteui-angular/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { Observable, Subject } from 'rxjs'; +import { Invoice } from '../../data/invoiceData'; +import { CRUDService } from '../../services/crud.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + providers: [CRUDService], + selector: 'app-grid-crud-sample', + styleUrls: ['./crud-sample.component.scss'], + templateUrl: './crud-sample.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxSnackbarComponent] +}) +export class CRUDSampleComponent implements OnInit, OnDestroy { + private _crudService = inject(CRUDService); + cdr = inject(ChangeDetectorRef); + + @ViewChild('grid', { static: true }) public grid: IgxGridComponent; + @ViewChild('snackbar', { static: false }) public snackbar: IgxSnackbarComponent; + + public page = 0; + public totalCount = 0; + public pages = []; + public selectOptions = [5, 10, 15, 25, 50]; + public mode = GridPagingMode.Remote; + + public remoteData$: Observable; + public data: Invoice[] = []; + public noopFilterStrategy = NoopFilteringStrategy.instance(); + public noopSortStrategy = NoopSortingStrategy.instance(); + + private _prevRequest: any; + private destroy$ = new Subject(); + + private _perPage = 10; + + public ngOnInit(): void { + this.remoteData$ = this._crudService.data$; + this._crudService.getData(this.page * this.perPage, this.perPage); + this._crudService.getDataLength().subscribe((length) => { + this.totalCount = length; + }); + this.remoteData$.subscribe((data: any) => { + this.data = data; + this.grid.isLoading = false; + }); + } + + public rowAdded(event: IRowDataEventArgs): void { + this._crudService.add(event.data).subscribe((rec) => { + // this.snackbar.open(`Row with ID of ${rec.ID} was created.`); + }); + } + + public rowDeleted(event: IRowDataEventArgs): void { + this.grid.isLoading = true; + this._crudService.delete(event.data).subscribe({ + next: (data: any) => { + this.snackbar.open(`Row with ID of ${data.ID} was deleted.`); + }, + error: err => { + console.log(err); + }, + complete: () => { + this.grid.isLoading = false; + console.log('Complete notification'); + } + }); + } + + public rowEditDone(event: IGridEditDoneEventArgs): void { + if (!event.isAddRow) { + this.grid.isLoading = true; + this._crudService.update(event.newValue).subscribe((rec) => { + this.grid.isLoading = false; + this.snackbar.open(`Row with ID of ${rec.ID} was edited.`); + }); + } + } + + public removeRow(row: IgxGridRow) { + this.grid.isLoading = true; + this._crudService.delete(row.data).subscribe((rec) => { + this.grid.isLoading = false; + this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`); + }); + } + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0); + } + + public paginate(page: number) { + this.grid.isLoading = true; + const skip = this.page * this.perPage; + const top = this.perPage; + + this._crudService.getData(skip, skip + top); + } + + public perPageChange(perPage: number) { + const skip = this.page * perPage; + const top = perPage; + + this._crudService.getData(skip, skip + top); + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + + public ngOnDestroy() { + if (this._prevRequest) { + this._prevRequest.unsubscribe(); + } + this.destroy$.next(); + this.destroy$.complete(); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + + + +``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` + +## Customizations + +The rich Grid API allows you to customize the editing process in almost any way in order to fit your needs. This includes, but is not limited to: + +- [**Batch Editing**](how-to-perform-crud.md#batch-editing): Enable Batch Editing to batch all updates, and commit everything with single request. +- [**Templating**](how-to-perform-crud.md#templates): Add templates for cell editing, or use your own external UI for row/cell editing, row adding and row deleting. +- [**Events**](how-to-perform-crud.md#events): Monitor the editing flow and react accordingly. Attach event handlers for all events emitted during editing, will allow you to do: + - data validation per cell + - data validation per row + - prompt user for expected type of input + - cancel further processing, based on business rules + - manual committing of the changes +- [**Rich API**](how-to-perform-crud.md#editing-api) + +## Batch Editing + +- Enable **Batch Editing** to keep your updates on the client, and commit all of them with a single request. Batch updating is enabled by setting the `batchEditing` option to true: + + ```html + + ``` + +Go to [Batch Editing](../../grid/batch-editing.md) for more details and demo samples. + +## Templates + +You can see and learn more about default cell editing templates in the [general editing topic](../../grid/editing.md#editing-templates). + +If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the [`igxCellEditor` directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcelltemplatedirective.html). To do this, you need to pass an `ng-template` marked with the `igxCellEditor` directive and properly bind your custom control to the [`cell.editValue`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html#editValue): + +```html + + + + + {{ class }} + + + + +``` + +For more information and demos, see the [Cell Editing](../../grid/cell-editing.md) topic. + +## Events + +The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](../../grid/row-editing.md) and [**Cell Editing**](../../grid/cell-editing.md) lifecycle - when starting, committing or canceling the editing action. + + | Event | Description | Arguments | Cancellable | +|-------|-------------|-----------|-------------| +| [`rowEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | +| [`cellEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | +| [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | +| [`cellEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEditDone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igrideditdoneeventargs.html) | `false` | +| [`cellEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | +| [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEdit) | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | +| [`rowEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | +| [`rowEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | + +Go to [Events](../../grid/editing.md#event-arguments-and-sequence) for more details and demo samples. + +## Editing API + +Updating data in the grid is achieved through methods exposed both by the grid: + +- [`updateRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#updateRow) +- [`updateCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#updateCell) +- [`deleteRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deleteRow) +- [`addRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#addRow) + +and `update` method exposed by the [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) and [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) instances: + +```typescript +// Through the grid methods +this.grid.updateRow(newData, rowKey); +this.grid.updateCell(newData, rowKey, columnField); +this.grid1.deleteRow(0); +this.grid.addRow(data); + +// Through the methods exposed by cell/row +this.grid.getCellByColumn(rowIndex, columnField).update(newData); +this.grid.getCellByKey(rowKey, columnField).value = newData; +this.grid.getRowByKey(rowID).update(newData); +this.grid.getRowByKey(rowID).delete(); +``` + +More details and information about using the grid API can be found in the [Cell Editing CRUD Operations](../../grid/cell-editing.md#crud-operations) section. + +## Takeaway + +Enabling CRUD in a robust way is major milestone for any data-driven application. In order to streamline the entire process, we've built the IgxGrid with the CRUD capabilities in mind, providing out-of-the-box UI and flexible APIs. How will this benefit you? It will save you lots of time when implementing CRUD against any database out there. And when we talk about modern-day data-driven apps, it all comes down to robustness, speed, and flexibility. + +## API References + +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) +- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) +- [`IgxActionStripComponent API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) +- [`IgxGridActionsBaseDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridactionsbasedirective.html) +- [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) +- [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-use-standalone-components.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-use-standalone-components.md new file mode 100644 index 000000000..855c66963 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-how-to-use-standalone-components.md @@ -0,0 +1,111 @@ +--- +title: How to Use Standalone Components - Angular | Ignite UI for Angular +_description: How to use Ignite UI for Angular components as standalone components, and as dependencies in your other standalone components. +_keywords: Ignite UI for Angular, Standalone Components, Angular 16, Angular Modules +_tocName: Use Standalone Components +--- + +# Using Standalone Components with Ignite UI for Angular + +Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. As of Angular 19 all components are standalone by default. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. + +## How to use the new standalone components + +Starting with Angular 16 and Ignite UI for Angular 16.0 you can now simply add the imports that your `standalone` component needs in the `imports` property. In the following example `IGX_GRID_DIRECTIVES` can be used to import all grid related components and directives. + +```typescript +import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['grid.sample.scss'], + templateUrl: 'grid.sample.html', + imports: [IGX_GRID_DIRECTIVES, AsyncPipe] +}) +``` + +But you can also import all components used by your `standalone` component individually. Example with the `IgxGridComponent` and `IgxColumnComponent` when only these two are used by another component is as follows. + +```typescript +import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['grid.sample.scss'], + templateUrl: 'grid.sample.html', + imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe] +}) +``` + +In addition, as all existing modules are preserved but now only import and export the standalone components, you can also use them for your standalone component. + +```typescript +// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives. +import { IgxGridModule } from 'igniteui-angular/grids/grid'; + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['grid.sample.scss'], + templateUrl: 'grid.sample.html', + imports: [IgxGridModule, AsyncPipe] +}) +``` + +## Utility Directives + +The `IGX_GRID_DIRECTIVES` shown in the previous examples is a utility directive that exports all grid related components and directives. The following table lists all new utility directives that are available in Ignite UI for Angular. + +| Directive Collection | Description | +| --- | --- | +| [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/accordion/public_api.ts) | Exports all accordion related components and directives. | +| [`IGX_ACTION_STRIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/action-strip/public_api.ts) | Exports all action strip related components and directives. | +| [`IGX_BANNER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/banner/public_api.ts) | Exports all banner related components and directives. | +| [`IGX_BOTTOM_NAV_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/bottom-nav/public_api.ts) | Exports all bottom navigation related components and directives. | +| [`IGX_BUTTON_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/public_api.ts) | Exports all button group related components and directives. | +| [`IGX_CALENDAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/public_api.ts) | Exports all calendar related components and directives. | +| [`IGX_CARD_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/public_api.ts) | Exports all card related components and directives. | +| [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/public_api.ts) | Exports all carousel related components and directives. | +| [`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/public_api.ts) | Exports all chip related components and directives. | +| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | Exports all circular progress bar related components and directives. | +| [`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/public_api.ts) | Exports all combo related components and directives. | +| [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/public_api.ts) | Exports all date-picker related components and directives. | +| [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) | Exports all date-range picker related components and directives. | +| [`IGX_DIALOG_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/dialog/public_api.ts) | Exports all dialog related components and directives. | +| [`IGX_DRAG_DROP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/drag-drop/public_api.ts) | Exports all drag and drop related components and directives. | +| [`IGX_DROP_DOWN_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/public_api.ts) | Exports all drop-down related components and directives. | +| [`IGX_EXPANSION_PANEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/expansion-panel/public_api.ts) | Exports all expansion panel related components and directives. | +| [`IGX_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/grid/public_api.ts) | Exports all grid related components and directives. | +| [`IGX_HIERARCHICAL_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/hierarchical-grid/public_api.ts) | Exports all hierarchical grid related components and directives. | +| [`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/public_api.ts) | Exports all input group related components and directives. | +| [`IGX_LINEAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | Exports all linear progress bar related components and directives. | +| [`IGX_LIST_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/list/public_api.ts) | Exports all list related components and directives. | +| [`IGX_NAVBAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navbar/public_api.ts) | Exports all navbar related components and directives. | +| [`IGX_NAVIGATION_DRAWER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/public_api.ts) | Exports all navigation drawer related components and directives. | +| [`IGX_PAGINATOR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/paginator/public_api.ts) | Exports all paginator related components and directives. | +| [`IGX_PIVOT_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/pivot-grid/public_api.ts) | Exports all pivot grid related components and directives. | +| [`IGX_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | Exports all linear and circular progress bar related components and directives. | +| [`IGX_QUERY_BUILDER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/query-builder/public_api.ts) | Exports all query builder related components and directives. | +| [`IGX_RADIO_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/radio/public_api.ts) | Exports all radio group related components and directives. | +| [`IGX_SELECT_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/public_api.ts) | Exports all select related components and directives. | +| [`IGX_SIMPLE_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/simple-combo/public_api.ts) | Exports all simple combo related components and directives. | +| [`IGX_SLIDER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/public_api.ts) | Exports all slider related components and directives. | +| [`IGX_SPLITTER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/splitter/public_api.ts) | Exports all splitter related components and directives. | +| [`IGX_STEPPER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/public_api.ts) | Exports all stepper related components and directives. | +| [`IGX_TABS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/tabs/public_api.ts) | Exports all tabs related components and directives. | +| [`IGX_TIME_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/public_api.ts) | Exports all time picker related components and directives. | +| [`IGX_TOOLTIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/public_api.ts) | Exports all tooltip related components and directives. | +| [`IGX_TREE_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/public_api.ts) | Exports all tree-view related components and directives. | +| [`IGX_TREE_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts) | Exports all tree grid related components and directives. | + +## Additional Resources + +Related topics: + +- [Standalone Components](https://angular.io/guide/standalone-components) +- [Getting started with Ignite UI for Angular](../getting-started.md) +- [Server-side Rendering with Angular](../ssr-rendering.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md new file mode 100644 index 000000000..db19fe271 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/how-to-signal-r-service-live-data.md @@ -0,0 +1,1021 @@ +--- +title: How to create ASP.NET Core SignalR service for live-data streaming. +_description: Modern data grid & dock manager are used for application creation along with ASP.NET Core SignalR. +_keywords: angular, signalr, .net core, infragistics +_tocName: Build Real-time SignalR App with .NET Core +--- + +# Real-time Web App with ASP.NET Core SignalR + +In this topic, we’ll see how to create applications for both _streaming_ and _receiving_ data with **ASP.NET Core SignalR**. + +What you'll need: + +- A basic knowledge of ASP.NET Core and Angular. +- .NET Core 3.1 installed and IDE such as Visual Studio. + +What you'll know by the end of this article: + +- How to add and use SignalR. +- How to open Client connection and use the _method invocation_ concept to stream data per Client. +- How to consume the SignalR service with Angular application by using Observables. + +SignalR takes advantage of several transports and it automatically selects the best available transport given the client and server's capabilities - [WebSockets, Server Send Events or Long-polling](https://stackoverflow.com/a/12855533/2940502). + +When we talk in terms of [WebSockets](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-5.0) (Putting SSE and Long-polling out of the equation) when the client is real-time connected to the server, whenever something happens the server will know to send a message over that WebSocket back to the client. With old-school clients and servers, the Long-polling transport would be used. + +This is how SignalR handles modern clients and servers, it uses WebSockets under the hood when available, and gracefully falls back to other techniques and technologies when it isn't: + +Real-time Web App with ASP.NET Core SignalR + +It's like a handshake, the Client and Server agree on what to use and they use it. This is called **process negotiation**. + +Real-time Web App with Web Sockets + +## SignalR Example + +The purpose of this demo is to showcase a financial screen board with a Real-time data stream using [ASP.NET Core SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr). + +```typescript +/* eslint-disable max-len */ +import { AfterViewInit, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core'; +import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager'; +import { Subject } from 'rxjs'; +import { first, takeUntil } from 'rxjs/operators'; +import { FloatingPanesService } from '../services/floating-panes.service'; +import { SignalRService } from '../services/signal-r.service'; +import { DockSlotComponent, GridHostDirective } from './dock-slot.component'; +import { FormsModule } from '@angular/forms'; +import { AsyncPipe, CurrencyPipe } from '@angular/common'; +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [SignalRService, FloatingPanesService], + selector: 'app-finjs-dock-manager', + templateUrl: './grid-finjs-dock-manager.component.html', + styleUrls: ['./grid-finjs-dock-manager.component.scss'], + imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck { + dataService = inject(SignalRService); + private paneService = inject(FloatingPanesService); + private cdr = inject(ChangeDetectorRef); + private componentFactoryResolver = inject(ComponentFactoryResolver); + private elementRef = inject(ElementRef); + private renderer = inject(Renderer2); + + @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; + @ViewChild('grid2', { static: true }) public grid2: IgxGridComponent; + @ViewChild(GridHostDirective) public host: GridHostDirective; + @ViewChild('dock', { read: ElementRef }) public dockManager: ElementRef; + @ViewChild('priceTemplate', { read: TemplateRef }) + public priceTemplate: TemplateRef; + @ViewChild(IgxSelectComponent) public select: IgxSelectComponent; + @ViewChild('freq', { read: IgxSelectComponent }) public selectFrequency: IgxSelectComponent; + @ViewChild(IgxOverlayOutletDirective) outlet: IgxOverlayOutletDirective; + + public isDarkTheme = true; + + public frequencyItems: number[] = [300, 600, 900]; + public frequency = this.frequencyItems[1]; + public dataVolumeItems: number[] = [100, 500, 1000, 5000, 10000]; + public dataVolume: number = this.dataVolumeItems[1]; + public isLoading = true; + public data: any; + public liveData = true; + public columnFormat = { digitsInfo: '1.3-3'}; + public columnFormatChangeP = { digitsInfo: '2.3-3'}; + public slotCounter = 1; + public customOverlaySettings: OverlaySettings = { + positionStrategy: new ConnectedPositioningStrategy(), + scrollStrategy: new AbsoluteScrollStrategy() + }; + public freqOverlaySettings: OverlaySettings = { + positionStrategy: new ConnectedPositioningStrategy(), + scrollStrategy: new AbsoluteScrollStrategy() + }; + + public docLayout: IgcDockManagerLayout = { + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'actionPane', + header: 'Actions pane', + size: 20, + isPinned: false, + allowClose: false + }, + { + size: 50, + type: IgcDockManagerPaneType.contentPane, + contentId: 'gridStockPrices', + header: 'Stock Market Data', + allowClose: false + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + size: 50, + panes: [ + { + type: IgcDockManagerPaneType.documentHost, + size: 50, + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'forexMarket', + header: 'Market Data 1' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'content4', + header: 'Market Data 2' + } + ] + } + ] + }}, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'etfStockPrices', + header: 'Market Data 3', + size: 50, + allowClose: false + } + ] + } + ] + }, + floatingPanes: [] + }; + + public columns: { field: string, + width: string, + sortable: boolean, + filterable: boolean, + type: GridColumnDataType, + groupable?: boolean, + cellClasses?: string, + bodyTemplate?: string } [] = [ + { field: 'buy', width: '110px', sortable: false, filterable: false, type: 'currency' }, + { field: 'sell', width: '110px', sortable: false, filterable: false, type: 'currency' }, + { field: 'openPrice', width: '120px', sortable: true, filterable: true, type: 'currency'}, + { field: 'lastUpdated', width: '120px', sortable: true, filterable: true, type: 'date'}, + { field: 'spread', width: '110px', sortable: false, filterable: false, type: 'number' }, + { field: 'volume', width: '110px', sortable: true, filterable: false, type: 'number' }, + { field: 'settlement', width: '100px', sortable: true, filterable: true, type: 'string', groupable: true }, + { field: 'country', width: '100px', sortable: true, filterable: true, type: 'string'}, + { field: 'highD', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'lowD', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'highY', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'lowY', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'startY', width: '110px', sortable: true, filterable: false, type: 'currency' }, + { field: 'indGrou', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'indSect', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'indSubg', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'secType', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'issuerN', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'moodys', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'fitch', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'dbrs', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'collatT', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'curncy', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'security', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'sector', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'cusip', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'ticker', width: '136px', sortable: false, filterable: false, type: 'string'}, + { field: 'cpn', width: '136px', sortable: false, filterable: false, type: 'string'} + ]; + + private destroy$ = new Subject(); + + public ngOnInit() { + this.dataService.startConnection(this.frequency, this.dataVolume, true, false); + this.data = this.dataService.data; + this.data.pipe(takeUntil(this.destroy$)).subscribe((data) => { + if (data.length !== 0) { + this.isLoading = false; + }; + }); + } + + public ngOnDestroy() { + this.dataService.stopLiveData(); + this.destroy$.next(true); + this.destroy$.complete(); + } + + public ngDoCheck() { + if (this.isDarkTheme) { + this.renderer.removeClass(this.elementRef.nativeElement, 'light-theme'); + this.renderer.addClass(this.elementRef.nativeElement, 'dark-theme'); + } + else { + this.renderer.removeClass(this.elementRef.nativeElement, 'dark-theme'); + this.renderer.addClass(this.elementRef.nativeElement, 'light-theme'); + } + } + + public ngAfterViewInit() { + // This 500ms timeout is used as a workaround for StackBlitz ExpressionChangedAfterItHasBeenChecked Error + setTimeout(() => { + const x = (this.dockManager.nativeElement.getBoundingClientRect().width / 3); + const y = (this.dockManager.nativeElement.getBoundingClientRect().height / 3); + + this.paneService.initialPanePosition = { x, y }; + this.grid2.selectColumns(['price', 'change', 'changeP']); + this.customOverlaySettings.target = this.select.inputGroup.element.nativeElement; + this.customOverlaySettings.outlet = this.outlet; + this.freqOverlaySettings.target = this.selectFrequency.inputGroup.element.nativeElement; + this.freqOverlaySettings.outlet = this.outlet; + this.grid1.groupingExpressions = [{ + dir: SortingDirection.Desc, + fieldName: 'category', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }, + { + dir: SortingDirection.Desc, + fieldName: 'type', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }, + { + dir: SortingDirection.Desc, + fieldName: 'settlement', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + }]; + }, 500); + } + + public paramsChanged() { + this.dataService.hasRemoteConnection ? this.dataService.broadcastParams(this.frequency, this.dataVolume, true, false) : + this.dataService.startConnection(this.frequency, this.dataVolume, true, false); + this.data = this.dataService.data; + } + + public stopFeed() { + this.dataService.stopLiveData(); + } + + public streamData(event) { + event.checked ? this.paramsChanged() : this.stopFeed(); + this.liveData = event.checked; + } + + /* eslint-disable @typescript-eslint/member-ordering */ + /** Grid CellStyles and CellClasses */ + private negative = (rowData: any): boolean => rowData['changeP'] < 0; + private positive = (rowData: any): boolean => rowData['changeP'] > 0; + private changeNegative = (rowData: any): boolean => rowData['changeP'] < 0 && rowData['changeP'] > -1; + private changePositive = (rowData: any): boolean => rowData['changeP'] > 0 && rowData['changeP'] < 1; + private strongPositive = (rowData: any): boolean => rowData['changeP'] >= 1; + private strongNegative = (rowData: any, key: string): boolean => rowData['changeP'] <= -1; + + public trends = { + changeNeg: this.changeNegative, + changePos: this.changePositive, + negative: this.negative, + positive: this.positive, + strongNegative: this.strongNegative, + strongPositive: this.strongPositive + }; + + public trendsChange = { + changeNeg2: this.changeNegative, + changePos2: this.changePositive, + strongNegative2: this.strongNegative, + strongPositive2: this.strongPositive + }; + + public createGrid() { + const id: string = 'slot-' + this.slotCounter++; + const splitPane: IgcSplitPane = { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + floatingWidth: 550, + floatingHeight: 350, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + header: id, + contentId: id + } + ] + }; + this.paneService.appendPane(splitPane); + this.dockManager.nativeElement.layout.floatingPanes.push(splitPane); + this.docLayout = { ...this.dockManager.nativeElement.layout }; + this.cdr.detectChanges(); + + // Create Dock Slot Component + const dockSlotComponentFactory = this.componentFactoryResolver.resolveComponentFactory(DockSlotComponent); + const dockSlotComponent = this.host.viewContainerRef.createComponent(dockSlotComponentFactory); + dockSlotComponent.instance.id = id; + dockSlotComponent.instance.viewInit.pipe(first()).subscribe(() => { + const gridViewContainerRef = dockSlotComponent.instance.gridHost.viewContainerRef; + this.loadGridComponent(gridViewContainerRef, dockSlotComponent.instance.destroy$); + }); + } + + public loadGridComponent(viewContainerRef: ViewContainerRef, destructor: Subject) { + const componentFactory = this.componentFactoryResolver.resolveComponentFactory(IgxGridComponent); + viewContainerRef.clear(); + + const componentRef = viewContainerRef.createComponent(componentFactory); + const grid = (componentRef.instance as IgxGridComponent); + grid.autoGenerate = true; + this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d); + grid.columnInit.pipe(takeUntil(destructor)).subscribe((col: IgxColumnComponent) => { + if (col.field === 'price') { + col.cellClasses = this.trends; + col.bodyTemplate = this.priceTemplate; + } + if (col.field === 'change' || col.field === 'changeP') { + col.cellClasses = this.trendsChange; + } + }); + grid.columnSelection = 'multiple'; + grid.cellSelection = 'none'; + + // Use detectChanges because of ExpressionChangedAfterItHasBeenChecked Error when creating a dynamic pane + this.cdr.detectChanges(); + } + + /* eslint-enable @typescript-eslint/member-ordering */ +} +``` +```html + +
+
+ Change theme:
Dark Mode +
+
+ Start/Stop live data: {{ liveData === + true ? 'Streaming' : 'Not Streaming' }} +
+
+ + + + + view_list + + @for (item of dataVolumeItems; track item) { + + {{item}} + + } + +
+
+ + + + + cell_wifi + + @for (item of frequencyItems; track item) { + + {{item}} + + } + +
+
Add Floating Pane
+
+
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+
+ + + + + + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + @for (c of columns; track c) { + + + } + +
+ + + +
+``` +```scss +@use 'igniteui-dockmanager/dist/collection/styles/igc.themes'; +@use '../../variables' as *; + +.actionItem { + margin-block-end: rem(20px); +} + +.finjs-icons { + display: flex; + align-items: center; + + igx-icon { + font-size: rem(16px); + width: rem(16px); + height: rem(16px); + margin-inline-start: rem(4px); + } +} + +.changePos, +.changeNeg, +.strongPositive, +.strongNegative { + color: contrast-color(null, 'gray', 500) !important; + + .igx-grid__td-text { + padding: rem(2px) rem(5px); + } +} + +.positive { + color: color(null, 'success', 500) !important; +} + +.positive.strongPositive { + .igx-grid__td-text { + color: color(null, 'success', 500, .8) !important; + } +} + +.negative { + color: color(null, 'error', 500) !important; +} + +.negative.strongNegative { + .igx-grid__td-text { + color: color(null, 'success', 500, .8) !important; + } +} + +// NORMAL +// positive +.changePos { + .igx-grid__td-text { + background: color(null, 'success', 500, .5); + } +} + +.changePos1 { + background: color(null, 'success', 500, .5); + color: contrast-color(null, 'gray', 900); +} + +.changePos2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'success', 500, .5); + padding-inline-end: rem(15px); + } +} + +// negative +.changeNeg { + .igx-grid__td-text { + background: color(null, 'error', 500, .5); + } +} + +.changeNeg1 { + background: color(null, 'error', 500, .5); + color: contrast-color(null, 'gray', 900); +} + +.changeNeg2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'error', 500, .5); + padding-inline-end: rem(9px); + } +} + +// STRONG +// positive +.strongPositive { + .igx-grid__td-text { + background: color(null, 'success', 500); + } +} + +.strongPositive1 { + background: color(null, 'success', 500); + color: contrast-color(null, 'gray', 900); +} + +.strongPositive2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'success', 500); + padding-inline-end: rem(15px); + } +} + +// negative +.strongNegative { + .igx-grid__td-text { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); + } +} + +.strongNegative1 { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); +} + +.strongNegative2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'error', 500); + padding-inline-end: rem(9px); + } +} + +igx-grid { + --ig-size: var(--ig-size-small); + + .grid-area { + margin-block-start: 1rem; + overflow-y: hidden; + overflow-x: hidden; + width: 100%; + } + + // selected + .igx-grid__td--column-selected.changePos1, + .igx-grid__td--column-selected.changePos2, + .igx-grid__td--column-selected.changePos { + background-color: color(null, 'success', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900);; + } + } + + .igx-grid__td--column-selected.changeNeg1, + .igx-grid__td--column-selected.changeNeg2, + .igx-grid__td--column-selected.changeNeg { + background-color: color(null, 'error', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + // selected + .igx-grid__td--column-selected.strongPositive1, + .igx-grid__td--column-selected.strongPositive2, + .igx-grid__td--column-selected.strongPositive { + background-color: color(null, 'success', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .igx-grid__td--column-selected.strongNegative1, + .igx-grid__td--column-selected.strongNegative2, + .igx-grid__td--column-selected.strongNegative { + background-color: color(null, 'error', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } +} + +igx-select { + --ig-size: var(--ig-size-small); +} +``` + +## SignalR Server Configuration + +### Create ASP.NET Core App + +Let's see how to set up the ASP.NET Core SignalR application. +In Visual Studio from _File_ >> _New project_ choose ASP.NET Core Web Application and follow the setup. Feel free to follow [the official Microsoft documentation tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio) if you experience any configuration difficulties. + +Create ASP.NET Core App project + + +### SignalR Config Setup + +Add the following code to the [Startup.cs file](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Startup.cs): + +- Endpoint part of the `Configure` method. + +```cs +app.UseEndpoints(endpoints => +{ + endpoints.MapControllers(); + endpoints.MapHub("/streamHub"); +}); +``` + +- Add SignalR usage to the `ConfigureServices` method. + +```cs +services.AddSignalR(options => +{ + options.EnableDetailedErrors = true; +}); +``` + +The changes above are adding SignalR to the ASP.NET Core dependency injection and routing system. + +Now, let's set up additional basic configuration. Open the [properties/launchSettings.json](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Properties/launchSettings.json#L11) file and modify it accordingly: + +```json +"profiles": { + "WebAPI": { + "commandName": "Project", + "launchBrowser": false, + "applicationUrl": "https://localhost:5001;http://localhost:5000", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +``` + +Our server-side project will run on `localhost:5001` and the client side will run on `localhost:4200`, so in order to establish communication between those two, we need to enable CORS. Let’s open the [Startup.cs](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Startup.cs#L31) class and modify it: + +```cs +public void ConfigureServices(IServiceCollection services) +{ + services.AddCors(options => + { + options.AddPolicy("CorsPolicy", builder => builder + .AllowAnyMethod() + .AllowAnyHeader() + .AllowCredentials() + .WithOrigins("http://localhost:4200")); + }); + ... + + public void Configure(IApplicationBuilder app, IWebHostEnvironment env) + { + ... + app.UseCors("CorsPolicy"); + ... +``` + +If you experience a specific problem with enabling Cross-origin resource sharing, check out the [official Microsoft topic](https://docs.microsoft.com/en-us/aspnet/core/signalr/security?view=aspnetcore-5.0#cross-origin-resource-sharing). + +### SignalR Hub Setup + +Let's start by explaining what is a [SignalR hub?](https://docs.microsoft.com/en-us/aspnet/core/signalr/hubs?view=aspnetcore-5.0#what-is-a-signalr-hub) +The SignalR Hub API enables you to call methods on connected clients from the server. In the server code, you define methods that are called by the client. In SignalR there is this concept called _Invocation_ - you can actually be calling the hub from the client with a particular method. In the client code, you define methods that are called from the server. + +The actual hub lives on the server-side. Imagine you have _Clients_ and _the Hub_ is between all of them. You can say something to all the Clients with `Clients.All.doWork()` by invoking a method on the hub. This will goes to all connected clients. Also, you can communicate with only one client, which is the Caller, because he is the caller of that particular method. + +SignalR Hub Setup with callers + +We've created a [StreamHub class](https://github.com/IgniteUI/finjs-web-api/blob/d493f159e0a6f14b5ffea3e893f543f057fdc92a/WebAPI/Models/StreamHub.cs#L9) that inherits the base Hub class, which is responsible for managing connections, groups, and messaging. It's good to keep in mind that the Hub class is stateless and each new invocation of a certain method is in a new instance of this class. It's useless to save state in instance properties, rather we suggest using static properties, in our case we use static key-value pair collection to store data for each connected client. + +Other useful properties of this class are _Clients_, _Context_, and _Groups_. They can help you to manage certain behavior based on the unique _ConnectionID_. Also, this class provides you with the following useful methods: + +- OnConnectedAsync() - Called when a new connection is established with the hub. +- OnDisconnectedAsync(Exception) - Called when a connection with the hub is terminated. + +They allow us to perform any additional logic when a connection is established or closed. In our application, we've also added _UpdateParameters_ method that gets a _Context connection ID_ and use it to send back data at a certain interval. As you can see we communicate over a unique _ConnectionID_ which prevents a streaming intervention from other Clients. + +```cs +public async void UpdateParameters(int interval, int volume, bool live = false, bool updateAll = true) +{ + ... + var connection = Context.ConnectionId; + var clients = Clients; + ... + if (!clientConnections.ContainsKey(connection)) + { + clientConnections.Add(connection, new TimerManager(async() => + { + ... + await Send(newDataArray, client, connection); + }, interval)); + } else + { + clientConnections[connection].Stop(); + clientConnections[connection] = new TimerManager(async () => + { + var client = clients.Client(connection); + .. + await Send(newDataArray, client, connection); + }, interval); + } + ... +} +``` + +When the data is ready we transfer it by emitting a `transferdata` event with the help of `SendAsync` Method. + +```cs +public async Task Send(FinancialData[] array, IClientProxy client, string connection) +{ + await client.SendAsync("transferdata", array); +} +... + +// Called when a connection with the hub is terminated +public override Task OnDisconnectedAsync(Exception exception) +{ + StopTimer(); + clientConnections.Remove(Context.ConnectionId); + return base.OnDisconnectedAsync(exception); +} +``` + +Our client application would be listening to the registered events: + +```ts +private registerSignalEvents() { + this.hubConnection.onclose(() => { + this.hasRemoteConnection = false; + }); + this.hubConnection.on('transferdata', (data) => { + this.data.next(data); + }) +} +``` + +The public GitHub repository of the [ASP.NET Core Application could be found here](https://github.com/IgniteUI/finjs-web-api). + +## Create SignalR Client Library + +We will create an Angular project in order to consume the SignalR service. +The [GitHub repository with the actual application](https://github.com/IgniteUI/igniteui-angular-samples/tree/master/projects/app-lob/src/app/grid-finjs-dock-manager) can be found in the igniteui-angular-samples repository. + +First, start by installing SignalR: + +``` +npm install @microsoft/signalr +``` + +Keep in mind that we are going to send the HTTP request towards our server, so we need HttpClientModule as well. + +Below you will find the [signal-r.service.ts](https://github.com/IgniteUI/igniteui-angular-samples/blob/master/projects/app-lob/src/app/services/signal-r.service.ts#L10) file that handles the hub connection builder. + +```ts +export class SignalRService implements OnDestroy { + public data: BehaviorSubject; + public hasRemoteConnection: boolean; + private hubConnection: signalR.HubConnection; + ... + + constructor(private zone: NgZone, private http: HttpClient) { + this.data = new BehaviorSubject([]); + } + ... + + // Start Hub Connection and Register events + public startConnection = (interval = 500, volume = 1000, live = false, updateAll = true) => { + this.hubConnection = new signalR.HubConnectionBuilder() + .configureLogging(signalR.LogLevel.Trace) + .withUrl('https://www.infragistics.com/angular-apis/webapi/streamHub') + .build(); + this.hubConnection + .start() + .then(() => { + ... + this.registerSignalEvents(); + this.broadcastParams(interval, volume, live, updateAll); + }) + .catch(() => { ... }); + } + + // Change the broadcast parameters like frequency and data volume + public broadcastParams = (frequency, volume, live, updateAll = true) => { + this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll) + .then(() => console.log('requestLiveData', volume)) + .catch(err => { + console.error(err); + }); + } + + // Register events + private registerSignalEvents() { + this.hubConnection.onclose(() => { + this.hasRemoteConnection = false; + }); + this.hubConnection.on('transferdata', (data) => { + this.data.next(data); + }); + } + ... +``` + +In your app.component add use the newly created `startConnection` method + +```ts +constructor(public dataService: SignalRService) {} +public ngOnInit() { + this.dataService.startConnection(this.frequency, this.dataVolume, true, false); +} +... +``` + +### Grid Data Binding + +As we have seen so far in our client code we set up a listener for `transferdata` event, which receives as an argument the updated data array. To pass the newly received data to our grid we use an observable. To set that, we need to bind the grid's data source to the data observable like so: + +```html + ... +``` + +Every time when new data is received from the server to the client we call the `next()` method of the data observable. + +```ts + this.hubConnection.on('transferdata', (data) => { + this.data.next(data); + }) +``` + +## Topic Takeaways + +If you don’t want to refresh your application, rather just see when the data is updated, you should consider ASP.NET Core SignalR. I definitely recommend going for streaming content when you think your data is large, or if you want a smooth user experience without blocking the client by showing endless spinners. + +Using SignalR Hub communication is easy and intuitive and with the help of Angular Observables, you can create a powerful application that uses data streaming with WebSockets. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md new file mode 100644 index 000000000..5a3fe1261 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-button.md @@ -0,0 +1,686 @@ +--- +title: Angular Icon Button Component – Ignite UI for Angular - MIT license +_description: Enhance standard icons with button functionalities. Try it now. +_keywords: Angular Icon Button component, Angular Icon Button control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Angular UI Components, +_license: MIT +_tocName: Icon Button +--- + +# Angular Icon Button Overview + +The Ignite UI for Angular Icon Button directive is intended to turn any icon into a fully functional button. The `igxIconButton` comes in three types - flat, outlined, and contained which is the default one. + +## Angular Icon Button Example + +```typescript +import { Component } from '@angular/core'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-button-overview', + styleUrls: ['./icon-button-overview.component.scss'], + templateUrl: './icon-button-overview.component.html', + imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class IconButtonOverviewComponent { } +``` +```html +
+
+ +
+
+ +
+
+ +
+
+``` +```scss +.wrapper { + display: flex; + flex-flow: row wrap; +} + +.button-sample { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + flex: 1 0 30%; + margin: 16px 0; +} +``` + +
+ +## Getting Started with Ignite UI for Angular Icon Button + +To get started with the Ignite UI for Angular Icon Button directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxIconButtonDirective` as a standalone dependency: + +```typescript +// home.component.ts + +... +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxIconButtonDirective] +}) +export class HomeComponent {} +``` + +Now that you have the Ignite UI for Angular Icon Button directive imported, you can start using the `igxIconButton` directive on elements. + +## Angular Icon Button Types + +### Flat Icon Button + +Use the [`igxIconButton`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconbuttondirective.html) directive to add a simple flat icon button in your component template: + +```html + +``` + +
+ +
+ +### Contained Icon Button + +All you have to do to create a contained icon button is to change the value of the `igxIconButton` property. Note that if you do not choose a type, by default it will also be set to `contained`. + +```html + +``` + +
+
+ +### Outlined Icon Button + +Analogically, we can switch to outlined type: + +```html + +``` + +
+
+ +## Examples + +### Disabled Icon Button + +If you want to disable an icon button, you can use the [`disabled`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconbuttoncomponent.html#disabled) property. In this sample we also demonstrate how to use icons from different families with the `igxIconButton` directive: + +```html + +``` + +
+
+ +### SVG Icons + +In addition to material icons, the `igxIconButton` directive also supports usage of SVG images as icons. To do so, first we should inject the [`IgxIconService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconservice.html) dependency and then use the [`addSvgIcon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconservice.html#addSvgIcon) method to import the SVG file in cache. For further information, you can read the [SVG section](icon.md#svg-icons) in the icon topic. + +```typescript +constructor(private _iconService: IgxIconService) { } + +public ngOnInit() { + // register custom SVG icon + this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons'); +} +``` + +```html + +``` + +
+
+ +### Size + +Users can choose one of the three predefined `igxIconButton` sizes by using the `--ig-size` custom CSS property. By default, the size of the component is set medium. + +```typescript +import { Component } from '@angular/core'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-button-size', + styleUrls: ['./icon-button-size.component.scss'], + templateUrl: './icon-button-size.component.html', + imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class IconButtonSizeComponent { } +``` +```html +
+
+ + person + +
+
+
+ place +
+
+
+ +
+
+``` +```scss +.wrapper { + display: flex; + flex-flow: row wrap; +} + +.button-sample { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + flex: 1 0 30%; + margin: 16px 0; +} + +.large { + --ig-size: var(--ig-size-large); +} + +.medium { + --ig-size: var(--ig-size-medium); +} + +.small { + --ig-size: var(--ig-size-small); +} +``` +
+ + +As you can see from the sample above, we can also use the `igxIconButton` directive to turn elements like `span` and `div` into Ignite UI for Angular styled icon buttons. + +## Icon Button Styling + +### Icon Button Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +
+ + + + + + + + +
+
+

Flat Icon Button

+ + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundHovered icon color
$focus-foregroundFocused icon color
$focus-hover-foregroundFocus + hover icon color
$active-foregroundActive icon color
$hover-backgroundBackground on hover
$focus-backgroundBackground on focus
$focus-hover-backgroundBackground on focus + hover
$active-backgroundBackground on active
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground on hover
$focus-backgroundBackground on focus
$focus-foregroundFocused icon color
$focus-hover-backgroundBackground on focus + hover
$active-backgroundBackground on active
$hover-foregroundHovered icon color
$focus-hover-foregroundFocus + hover icon color
$active-foregroundActive icon color
$shadow-colorShadow on focus
$focus-border-colorFocus border color
$disabled-backgroundDisabled background
$disabled-foregroundDisabled icon color
+

Outlined Icon Button

+ + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundHovered icon color
$focus-foregroundFocused icon color
$focus-hover-foregroundFocus + hover icon color
$active-foregroundActive icon color
$hover-backgroundBackground on hover
$focus-backgroundBackground on focus
$focus-hover-backgroundBackground on focus + hover
$active-backgroundBackground on active
$border-colorDefault border color
$focus-border-colorFocus border color
+
+
+

Flat Icon Button

+ + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-foregroundIcon color when focused
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$hover-foregroundIcon color on hover
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$shadow-colorShadow color on focus
$focus-border-colorBorder color on focus
$disabled-backgroundBackground color when disabled
$disabled-foregroundIcon color when disabled
+

Outlined Icon Button

+ + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$border-colorBorder color
$focus-border-colorBorder color on focus
+
+
+

Flat Icon Button

+ + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color when hovered
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$disabled-foregroundIcon color when disabled
$shadow-colorThe shadow color of the icon button
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-foregroundIcon color when focused
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$hover-foregroundIcon color on hover
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$shadow-colorShadow color
$focus-border-colorBorder color on focus
$disabled-backgroundBackground color when disabled
$disabled-foregroundIcon color when disabled
+

Outlined Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$border-colorBorder color
$focus-border-colorBorder color on focus
$shadow-colorShadow color
$disabled-foregroundIcon color when disabled
$disabled-border-colorThe border of the icon button when disabled
+
+
+

Flat Icon Button

+ + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$disabled-foregroundIcon color when disabled
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$focus-border-colorBorder color on focus
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-foregroundIcon color when focused
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$hover-foregroundIcon color on hover
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$shadow-colorShadow color
$focus-border-colorBorder color on focus
$disabled-backgroundBackground color when disabled
$disabled-foregroundIcon color when disabled
+

Outlined Icon Button

+ + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$border-colorBorder color
$focus-border-colorBorder color on focus
+
+
+
+ +Following the simplest approach, we use CSS variables to customize the appearance of the icon button: + +```scss +[igxIconButton="contained"] { + --background: #011627; + --foreground: #fefefe; + --hover-foreground: #011627dc; + --hover-background: #ecaa53; + --focus-foreground: #011627dc; + --focus-background: #ecaa53; + --focus-border-color: #0116276c; + --active-foreground: #011627dc; + --active-background: #ecaa53; +} +``` + +Take a look at the [`icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-button-theme) section for a complete list of available parameters for styling any type of icon button. + +You can also choose to style only buttons of a specific type - `flat`, `outlined` or `contained`. +To do this, you can use the new type-specific theme functions: [`flat-icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-icon-button-theme), [`outlined-icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-outlined-icon-button-theme) and [`contained-icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-icon-button-theme) + +Here’s an example of using the `contained-icon-button-theme` function to define a custom theme in SCSS: + +```scss +@use "igniteui-angular/theming" as *; + +$custom-contained: contained-icon-button-theme( + $background: #ECAA53, +); +``` + +This will generate a fully themed `contained icon button`, including appropriate foreground and background colors for its various states like hover, focus, and active. + +```typescript +import { Component } from '@angular/core'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-button-styling', + styleUrls: ['./icon-button-styling.component.scss'], + templateUrl: './icon-button-styling.component.html', + imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class IconButtonStylingComponent { } +``` +```html +
+
+ +
+
+ +
+
+ +
+
+``` +```scss +@use "igniteui-angular/theming" as *; + +.wrapper { + display: flex; + flex-flow: row wrap; +} + +.button-sample { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + flex: 1 0 30%; + margin: 16px 0; +} + +// $custom-flat: flat-icon-button-theme( +// $foreground: #011627, +// ); + +// $custom-contained: contained-icon-button-theme( +// $background: #ECAA53, +// ); + +// $custom-outlined: outlined-icon-button-theme( +// $foreground: #011627, +// ); + +// :host { +// @include tokens($custom-flat); +// @include tokens($custom-contained); +// @include tokens($custom-outlined); +// } + +[igxIconButton="flat"] { + --foreground: #011627; + --background: #FEFEFE; + --hover-background: #ECAA53; + --focus-foreground: #011627dc; + --focus-background: #ECAA53; + --active-foreground: #011627dc; + --active-background: #ECAA53; +} + +[igxIconButton="contained"] { + --background: #011627; + --foreground: #FEFEFE; + --hover-foreground: #011627dc; + --hover-background: #ECAA53; + --focus-foreground: #011627dc; + --focus-background: #ECAA53; + --focus-border-color: #0116276c; + --active-foreground: #011627dc; + --active-background: #ECAA53; +} + +[igxIconButton="outlined"] { + --foreground: #011627; + --background: #FEFEFE; + --border-color: #011627; + --hover-foreground: #011627dc; + --hover-background: #ECAA53; + --focus-foreground: #011627dc; + --focus-background: #ECAA53; + --focus-border-color: #0116276c; + --active-foreground: #011627dc; + --active-background: #ECAA53; +} +``` +
+ +### Styling with Tailwind + +You can style the icon button using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-icon-button`, `dark-icon-button`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [icon-button-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-button-theme). The syntax is as follows: + +```html + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your icon buttons should look like this: + +
+ +
+ +## API References + +
+ +- [IgxIconButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconbuttondirective.html) +- [IgxIconButton Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-button-theme) +- [IgxRippleDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrippledirective.html) + +## Additional Resources + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md new file mode 100644 index 000000000..0b640b912 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon-service.md @@ -0,0 +1,555 @@ +--- +title: Angular Icon Service – Ignite UI for Angular | Infragistics | MIT license +_description: Developers can unify and use various icon and font sets interchangeably with custom colors and more with Ignite UI for Angular Icon Service. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Icon components, Angular Icon controls, Angular Icon service +_license: MIT +_tocName: Icon Service +--- + +# Angular Icon Service Overview + +

The Ignite UI for Angular Icon Service allows developers to add new icons from various sources to their UIs.

+ +## Introduction + +The Ignite UI for Angular Icon Service provides several methods that allow users to create and manage icon families. + +The icon service can be imported directly from the Ignite UI for Angular package. + +```ts +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxIconService } from 'igniteui-angular/core'; + + +@Component({ + selector: 'app-root', + standalone: true, + imports: [ IgxIconComponent ] +}) +export class AppComponent implements OnInit { + constructor(public iconService: IgxIconService) {} +} +``` + +```typescript +import { Component, inject } from '@angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxSuffixDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-icon-service-sample', + styleUrls: ['./icon-service-sample.component.scss'], + templateUrl: './icon-service-sample.component.html', + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxAvatarComponent, IgxIconComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxSuffixDirective] +}) +export class IconServiceSampleComponent { + private iconService = inject(IgxIconService); + + private weather = [{ + icon: 'partly_cloudy', + description: '18° Partly Cloudy' + }, + { + icon: 'sunny', + description: '23° Sunny' + }, + { + icon: 'thunderstorms', + description: '15° Thunderstorms' + }]; + + protected get status() { + return this.weather.at(0).description + }; + + constructor() { + // Add the SVG assets to the icon service collection + this.iconService.addSvgIcon('partly_cloudy', 'assets/images/icons/partly_cloudy.svg', 'weather'); + this.iconService.addSvgIcon('sunny', 'assets/images/icons/sunny.svg', 'weather'); + this.iconService.addSvgIcon('thunderstorms', 'assets/images/icons/thunderstorms.svg', 'weather'); + + this.iconService.addIconRef('weather_status', 'default', { + name: 'partly_cloudy', + family: 'weather' + }); + } + + protected updateWeather() { + this.weather.unshift(this.weather.pop()); + + this.iconService.setIconRef('weather_status', 'default', { + name: this.weather.at(0).icon, + family: 'weather' + }); + } +} +``` +```html +
+ + + + + +

{{ status }}

+
Current Weather
+ + + + + + +
+``` +```scss +@use "../../../../variables" as *; + +.wrapper { + display: flex; + flex-flow: row wrap; + margin: rem(16px) 0; +} + +igx-card { + position: relative; + z-index: 0; + min-width: rem(320px); +} + +igx-avatar { + z-index: 1; + --ig-size: var(--ig-size-medium); + --background: hsla(var(--ig-secondary-500), 6%); + border: 1px solid var(--ig-secondary-500); + border-radius: rem(4px); + + igx-icon { + --size: #{rem(48px)}; + color: var(--ig-secondary-500); + } +} + +igx-icon[backdrop] { + --size: #{rem(128px)}; + inset-block: rem(18px); + inset-inline: calc(100% - var(--size)); + z-index: -1; + position: absolute; + color: var(--ig-gray-300); +} +``` + +### Adding Icon Families + +By default the Icon Service sets its default family to `material`. + +Adding new families of icons is done using the `setFamily` method of the icon service. It creates an family entry with some metadata that instructs the `igx-icon` component about the icon(s) it should render. + +Let's use a practical example to explain how the `setFamily` method works: + +```ts +/** +* The icon service associates a given family name (provided by the user) +* with a specific CSS class (as documented in the providing icon font) +* and corresponding icon name (documented in the icon font). +* NOTE: Material is already the default family. +*/ +iconService.setFamily('material', { className: 'material-icons', type: 'liga' }); +iconService.setFamily('fa-solid', { className: 'fas', type: 'font', prefix: 'fa' }); +``` + +The example above creates two icon families: 'material' and 'fa-solid'. Their types are different, the `material` family is registered as `liga`, while the `fa-solid` family is registered as `font`. The difference between the two is how the `igx-icon` component would go about rendering them. Typically, [Font Awesome](https://fontawesome.com/) uses class names to specify code points to a **font** family, hence why we set its type to `font`. Anytime we have to rely on code points to render icons, we should set the type to `font`. The [Material Icons](https://material.io/icons) family is still a font family, however, the standard way to display an icon is to provide a `ligature` name, instead of a class name pointing to a specific code point. For that reason, we need to set the type to `liga`. There's a third family type - `svg`, it is reserved for icon families that will be comprised of SVGs that are registered through the Icon Service. + +Having registered the two font families above, we can now consume their icons in a standardized way via the `igx-icon` component: + +```html + + +``` + +You might have noticed that for the `material` family we use the ligature `name` as name, while in the case of the `fa-solid` family we specify the `className` for name, which is `fa-car` but drop the `fa-` prefix as it has been specified when we registered the icon family in the previous step. + +### Adding SVG Icons + +The Ignite UI for Angular Icon Service allows us to associate SVG images with families and give them names so that they can be included via the `igx-icon` component in the same way as font-based icons. The SVGs should be resolved via either strings or via absolute URI to the SVG asset. + +```ts +// Add a new 'material' icon called 'my-icon' from an SVG file +iconService.addSvgIcon('my-icon', 'my-icon.svg', 'material'); + +// Add a new 'fa-solid' icon called 'my-icon' from string +iconService.addSvgIconFromText('my-icon', '...', 'fa-solid'); +``` + +Later in markup: + +```html + + +``` + +Note that we are adding custom SVG icons to families of type `liga` and `font`. This is possible because the `addSvgIcon` and `addSvgIconFromText` methods register the icons as `svg` type implicitly, allowing the `igx-icon` component to correctly render the SVG. + +## Meta Families + +The Ignite UI for Angular Icon Service allows us to create pseudo family maps that combine icons added via either setting a family of font icons or adding SVGs under a common umbrella so that it's easier to reference them. + +```ts +// The `setIconRef` sets an icon reference in the icon map, +// assuming material and fa-solid have been added as families, +iconService.setIconRef('home', 'my-family', { family: 'material', name: 'home' }); +iconService.setIconRef('home-alt', 'my-family', { family: 'fa-solid', name: 'home' }); +iconService.setIconRef('car', 'my-family', { family: 'fa-solid', name: 'car' }); +``` + +Later in markup: + +```html + + + +``` + +## Icon Retrieval + +It is possible to get an icon for a given `family` and icon `name` in order to read the original icon `type`, `name`, `family`, and `className`. + +```ts +const { family, className, name, type } = iconService.getIcon('my-family', 'car'); + +console.log(family); // -> 'fa-solid' +console.log(className); // -> 'fas' +console.log(name); // -> 'fa-car' +console.log(type); // -> 'font' +``` + +## Internal Usage + +Starting with version 18.1.0 of Ignite UI for Angular, we added a new `setFamily` method that allows us to create new families of icons in the Icon Service and associate them with CSS classes, types, and even prefixes. Additionally, icons used internally are now all declared by reference in a new `default` family with aliased names (see table bellow). + +| Alias | Target Icon | Target Family | +|----------------------------------|-----------------------|---------------| +| **add** | add | material | +| **add_child** | add-child | imx-icons | +| **add_row** | add-row | imx-icons | +| **arrow_back** | arrow_back | material | +| **arrow_drop_down** | arrow_drop_up | material | +| **arrow_forward** | arrow_forward | material | +| **arrow_next** | chevron_right | material | +| **arrow_prev** | chevron_left | material | +| **case_sensitive** | case-sensitive | imx-icons | +| **carousel_next** | arrow_forward | material | +| **carousel_prev** | arrow_back | material | +| **chevron_left** | chevron_left | material | +| **chevron_right** | chevron_right | material | +| **clock** | access_time | material | +| **close** | close | material | +| **collapse** | expand_less | material | +| **confirm** | check | material | +| **date_range** | date_range | material | +| **delete** | delete | material | +| **drag_indicator** | drag_indicator | material | +| **edit** | edit | material | +| **error** | error | material | +| **expand** | expand_more | material | +| **expand_more** | expand_more | material | +| **file_download** | file_download | material | +| **filter_all** | select-all | imx-icons | +| **filter_before** | is-before | imx-icons | +| **filter_contains** | contains | imx-icons | +| **filter_does_not_contain** | does-not-contain | imx-icons | +| **filter_empty** | is-empty | imx-icons | +| **filter_equal** | equals | imx-icons | +| **filter_false** | is-false | imx-icons | +| **filter_greater_than** | greater-than | imx-icons | +| **filter_greater_than_or_equal** | greater-than-or-equal | imx-icons | +| **filter_in** | is-in | imx-icons | +| **filter_last_month** | last-month | imx-icons | +| **filter_last_year** | last-year | imx-icons | +| **filter_less_than** | less-than | imx-icons | +| **filter_less_than_or_equal** | less-than-or-equal | imx-icons | +| **filter_next_month** | next-month | imx-icons | +| **filter_next_year** | next-year | imx-icons | +| **filter_not_empty** | not-empty | imx-icons | +| **filter_not_equal** | not-equal | imx-icons | +| **filter_not_null** | is-not-null | imx-icons | +| **filter_null** | is-null | imx-icons | +| **filter_starts_with** | starts-with | imx-icons | +| **filter_this_month** | this-month | imx-icons | +| **filter_this_year** | this-year | imx-icons | +| **filter_today** | today | imx-icons | +| **filter_true** | is-true | imx-icons | +| **filter_yesterday** | yesterday | imx-icons | +| **first_page** | first_page | material | +| **group_work** | group_work | material | +| **hide** | visibility_off | material | +| **import_export** | import_export | material | +| **input_collapse** | arrow_drop_up | material | +| **input_clear** | clear | material | +| **input_expand** | arrow_drop_down | material | +| **jump_down** | jump-down | imx-icons | +| **jump_up** | jump-up | imx-icons | +| **last_page** | last_page | material | +| **more_vert** | more_vert | material | +| **next** | navigate_next | material | +| **pin** | pin-left | imx-icons | +| **prev** | navigate_before | material | +| **refresh** | refresh | material | +| **remove** | cancel | material | +| **search** | search | material | +| **selected** | done | material | +| **show** | visibility | material | +| **sort_asc** | arrow_upward | material | +| **sort_desc** | arrow_downward | material | +| **functions** | functions | material | +| **table_rows** | table_rows | material | +| **today** | calendar_today | material | +| **tree_collapse** | expand_more | material | +| **tree_expand** | chevron_right | material | +| **unfold_less** | unfold_less | material | +| **unfold_more** | unfold_more | material | +| **unpin** | unpin-left | imx-icons | +| **view_column** | view_column | material | + +To take advantage of changing the internal icons by reference, as opposed by to creating custom templates, you can do the following to replace the expand/collapse icons in the combo and select components: + +```ts +iconService.setIconRef('input_expand', 'default', { + name: 'arrow_downward', + family: 'material', +}); + +iconService.setIconRef('input_collapse', 'default', { + name: 'arrow_upward', + family: 'material', +}); +``` + +This will set the expand and collapse icons to the `arrow_downward` and `arrow_upward` ligatures, respectively, from the `material` font family for all combo and select components. + +Here's a breakdown of all icons as used by each component: + + + +### Action Strip + +| Icon | Description | +| ------------- | ------------------------ | +| **add_child** | Used by the popup menu. | +| **add_row** | Used by the popup menu. | +| **more_vert** | Used by the popup menu. | + +### Calendar + +| Icon | Description | +| -------------- | ------------------------------------------------------- | +| **arrow_prev** | Used by the header for navigating between months/years. | +| **arrow_next** | Used by the header for navigating between months/years. | + +### Carousel + +| Icon | Description | +| ----------------- | ----------------------------------- | +| **carousel_prev** | Used for navigating between slides. | +| **carousel_next** | Used for navigating between slides. | + +### Chip + +| Icon | Description | +| ------------ | ----------------------------------------- | +| **selected** | Used to indicate that a chip is selected. | +| **remove** | Used for the remove button. | + +### Combo (incl. Simple Combo) + +| Icon | Description | +| ------------------ | ------------------------------------------------------------ | +| **case_sensitive** | Used to indicate and toggle case-sensitive filtering. | +| **input_clear** | Used for the clear button. | +| **input_expand** | Used for the toggle button when the combo menu is collapsed. | +| **input_collapse** | Used for the toggle button when the combo menu is expanded. | + +### Date Picker + +| Icon | Description | +| --------------- | ---------------------------------------------------- | +| **today** | Used for the toggle button that triggers the picker. | +| **input_clear** | Used for the clear button. | + +### Date Range Picker + +| Icon | Description | +| -------------- | ---------------------------------------------------- | +| **date_range** | Used for the toggle button that triggers the picker. | + +### Expansion Panel + +| Icon | Description | +|------------- | ------------------------------------------------------------- | +| **expand** | Used for the toggle button that triggers the expanded state. | +| **collapse** | Used for the toggle button that triggers the collapsed state. | + +### Grid + +| Icon | Description | +| -------------------- | ------------------------------------------------------------------------------ | +| **add** | Used in excel-filter menu to add filter entry. | +| **arrow_back** | Used in various UI elements for moving a column backwards. | +| **arrow_drop_down** | Used in various buttons to indicate toggleable menus. | +| **arrow_forward** | Used in various UI elements for moving a column forwards. | +| **cancel** | Used in various UI elements for canceling operations. | +| **chevron_right** | Used to indicate expandable menus, like in the excel style filtering. | +| **close** | Used to close an expanded menu. | +| **confirm** | Used to confirm an operation. | +| **drag_indicator** | Used to show a handle to indicate an item can be dragged. | +| **error** | Used in editable cells to indicate erroneous data input. | +| **expand_more** | Used by the excel filtering menu to indicate the addition of more filters. | +| **file_download** | Used by the excel filter exporter. | +| **filter_*** | Used for various filtering operands. | +| **group_work** | Used by the group-by drop area. | +| **hide** | Used by various UI elements for hiding columns. | +| **import_export** | Used by the pivot data selector for moving. | +| **input_clear** | Used by input fields for clearing input data. | +| **next** | Used by the filtering row menu to navigate between chips. | +| **pin** | Used by various UI elements for column pinning. | +| **prev** | Used by the filtering row menu to navigate between chips. | +| **remove** | Used by various UI elements as a removal indicator. | +| **refresh** | Used by the filtering row menu to reload the filters. | +| **selected** | Used by various UI elements to indicated active selection. | +| **show** | Used by various UI elements for showing columns. | +| **sort_asc** | Used by various UI elements to indicate sorting direction. | +| **sort_desc** | Used by various UI elements to indicate sorting direction. | +| **functions** | Used by the pivot grid and data selectors. | +| **table_rows** | Used by the pivot grid data selector. | +| **tree_collapse** | Used by tree-like structure to show less details. | +| **tree_expand** | Used by tree-like structure to show more details. | +| **unpin** | Used by various UI elements for column pinning. | +| **unfold_less** | Used by the hierarchical grid to collapse all rows. | +| **unfold_more** | Used by the hierarchical grid to expand all rows. | +| **view_column** | Used by the pivot data selector. | + +### Input Group + +| Icon | Description | +| --------------- | ---------------------------------------------------- | +| **input_clear** | Used for the clear button. | + +### Paginator + +| Icon | Description | +| -------------- | ------------------------------------------------------------ | +| **first_page** | Used by the button used for navigating to the first page. | +| **last_page** | Used by the button used for navigating to the last page. | +| **prev** | Used by the button used for navigating to the previous page. | +| **next** | Used by the button used for navigating to the next page. | + +### Query Builder + +| Icon | Description | +| ------------ | ------------------------------------------------------------ | +| **add** | Used by the button for adding new filter entries. | +| **close** | Used by the button that closes the contextual menu. | +| **edit** | Used by the button for editing filter entries. | +| **confirm** | Used by the button to confirm adding new filter entries. | +| **ungroup** | Used by the button to ungroup filter entries. | +| **delete** | Used by the button to delete filter entries. | +| **filter_*** | Used for various filtering operands. | + + +### Select + +| Icon | Description | +| ------------------ | ----------------------------------------------------------- | +| **input_expand** | Used for the toggle button when the select menu is collapsed. | +| **input_collapse** | Used for the toggle button when the select menu is expanded. | + +### Tabs + +| Icon | Description | +| ------------ | ----------------------------------------------------------- | +| **prev** | Used by the button used for navigating to the previous tab. | +| **next** | Used by the button used for navigating to the next tab. | + + +### Time Picker + +| Icon | Description | +| ------------ | ---------------------------------------------------- | +| **clock** | Used for the toggle button that triggers the picker. | + +### Tree + +| Icon | Description | +| ----------------- | ---------------------------------------------------- | +| **tree_expand** | Used for the toggle button that triggers the picker. | +| **tree_collapse** | Used for the toggle button that triggers the picker. | + +## API + +Here's a quick summary of all methods available via the Ignite UI for Angular Icon Service. + +### Add Family + +```ts +setFamily(name: string, meta: IconFamilyMeta): IgxIconService; +``` + +### Icon References + +Set ONLY if NOT already present the icon map: + +```ts +addIconRef(name: string, family: string, icon: IconMeta): void; +``` + +Set an Icon reference in the icon map (overridden if already present): + +```ts +setIconRef(name: string, family: string, icon: IconMeta): void; +``` + +Get and Icon reference + +```ts +getIconRef(family: string, name: string): IconReference; +``` + +### SVG Icons + +From URI: + +```ts +addSvgIcon(name: string, url: string, family: string, stripMeta = false): void; +``` + +From string: + +```ts +addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = false): void; +``` + +## API References + +
+ +- [IgxIconService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconservice.html) + +## Additional Resources + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md new file mode 100644 index 000000000..a8a7b2395 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/icon.md @@ -0,0 +1,576 @@ +--- +title: Angular Icon Component – Ignite UI for Angular | Infragistics | MIT license +_description: Developers can unify and use various icon and font sets interchangeably with custom colors and more with Ignite UI for Angular Icon component. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Icon components, Angular Icon controls +_license: MIT +_tocName: Icon +--- + +# Angular Icon Component Overview + +

The Ignite UI for Angular Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup.

+ +## Angular Icon Example + +```typescript +import { Component } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-sample-1', + styleUrls: ['./icon-sample-1.component.scss'], + templateUrl: './icon-sample-1.component.html', + imports: [IgxIconComponent] +}) +export class IconSample1Component { } +``` +```html +
+
+ sentiment_very_satisfied +
+ +
+ home +
+ +
+ airplanemode_active +
+ +
+ favorite +
+ +
+ search +
+
+``` +```scss +.wrapper { + display: flex; + flex-flow: row wrap; + margin: 16px 0; +} + +.icon-sample { + display: flex; + flex: 1 0 20%; + width: 44px; + height: 44px; + justify-content: center; + align-items: center; +} +``` + +
+ +## Getting Started with Ignite UI for Angular Icon + +To get started with the Ignite UI for Angular Icon component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxIconModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +import { IgxIconModule } from 'igniteui-angular/icon'; +// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxIconModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxIconComponent` as a standalone dependency. + +```typescript +// home.component.ts + +import { IgxIconComponent } from 'igniteui-angular/icon'; +// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: 'home', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxIconComponent], +}) +export class HomeComponent { + public color = '#e41c77'; +} +``` + +Now that you have the Ignite UI for Angular Icon module or component imported, you can start using the `igx-icon` component. + +## Using the Angular Icon + +### Icon Color + +Use `style.color` CSS property to change its default color: + +```html +home +``` + +
+
+ +### Inactive Icon + +If you want to disable an icon, you can use the [`active`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html#active) property: + +```html +volume_off +``` + +
+
+ +### Content Projection + +You can set icons with content projection: + +```html +bluetooth +``` + +
+
+ +### Icon Size + +You can customize the icons using CSS. To change an icon size use the `--size` CSS variable: + +```scss +.custom-size { + --size: 56px; +} +``` + +
+
+ +## SVG Icons + +You can also use an SVG image as an icon. First, inject the [`IgxIconService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconservice.html) dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code. + +Use the [`addSvgIcon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconservice.html#addSvgIcon) method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the `addSvgIconFromText` method to import an SVG file, providing the SVG text content instead of the file URL. + +- Have in mind that if there are two icons with the same name and the same family, the SVG icon will be displayed with priority. +- It is better not to provide image width and height in the SVG file. +- You may need additional polyfill scripts ("polyfills") for Internet Explorer. + +```typescript +constructor(private iconService: IgxIconService) { } + +public ngOnInit() { + // register custom SVG icons + this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons'); +} +``` + +```html + +``` + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-svg-icon-sample', + styleUrls: ['./svg-icon-sample.component.scss'], + templateUrl: './svg-icon-sample.component.html', + imports: [IgxIconComponent] +}) +export class SvgIconSampleComponent implements OnInit { + private iconService = inject(IgxIconService); + + + public ngOnInit() { + // register custom SVG icons + this.iconService.addSvgIcon('contains', 'assets/images/svg/contains.svg', 'filter-icons'); + this.iconService.addSvgIcon('does_not_contain', 'assets/images/svg/does_not_contain.svg', 'filter-icons'); + this.iconService.addSvgIcon('does_not_equal', 'assets/images/svg/does_not_equal.svg', 'filter-icons'); + this.iconService.addSvgIcon('ends_with', 'assets/images/svg/ends_with.svg', 'filter-icons'); + this.iconService.addSvgIcon('equals', 'assets/images/svg/equals.svg', 'filter-icons'); + this.iconService.addSvgIcon('is_empty', 'assets/images/svg/is_empty.svg', 'filter-icons'); + this.iconService.addSvgIcon('starts_with', 'assets/images/svg/starts_with.svg', 'filter-icons'); + } +} +``` +```html +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+``` +```scss +.wrapper { + display: flex; + flex-flow: row wrap; + margin: 16px 0; +} + +.icon-sample { + display: flex; + flex: 1 0 10%; + height: 44px; + justify-content: center; + align-items: center; +} +``` + +## Material Symbols + +Additionally, users can take advantage of the latest Material icons and their design variations included in the newly created [`Material Symbols Library`](https://fonts.google.com/icons). To start using Material Symbols, first you have to add the library to your application: + +```html + +``` + +Then we need to inject the [`IgxIconService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconservice.html) dependency and make use of its `setFamily` method so that Material Symbols can work with `igx-icon`: + +```ts +constructor(private iconService: IgxIconService) { } + +public ngOnInit() { + // registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-family + this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' }); +} +``` + +Now, we are ready to add the desired icon into our markup and customize it using adjustable font styles: + +```html + +``` + +```scss +.custom-icon { + font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40; +} +``` + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-material-symbols', + templateUrl: './material-symbols.component.html', + styleUrls: ['./material-symbols.component.scss'], + imports: [IgxIconComponent] +}) +export class MaterialSymbolsComponent implements OnInit { + private iconService = inject(IgxIconService); + + + public ngOnInit() { + this.iconService.registerFamilyAlias('material-symbols', 'material-symbols-outlined'); + } +} +``` +```html + +
+
+ grade +
+
+ favorite +
+
+ +
+
+ diamond +
+
+ auto_awesome +
+
+``` +```scss +.wrapper { + display: flex; + flex-flow: row wrap; + margin: 16px 0; +} + +.icon-sample { + display: flex; + flex: 1 0 20%; + width: 44px; + height: 44px; + justify-content: center; + align-items: center; +} + +.custom-icon { + font-variation-settings: + 'FILL' 0, + 'wght' 200, + 'GRAD' 0, + 'opsz' 40 +} +``` + +To learn more about Material Symbols styles please visit their [`official documentation`](https://fonts.google.com/icons). + +## Server-side Rendering Note + +> [!NOTE] +> In case you have implemented server side rendering logic in your application using Angular Universal and have used the `IgxIconService` to register icons, this may cause the following exception: +>

> `XMLHttpRequest is not defined. Could not fetch SVG from url.` >

+> In order to avoid this, execute the listed steps: + +
    +
  1. +Install `xmlhttprequest`: + +```cmd +npm i xmlhttprequest +``` + +
    2. +
  2. +On the top of your `server.ts` file, add: + +```typescript +(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; +``` + +
    3. +
+ +## Styling + +To get started with styling the icons, we need to import the `index` file, where all the theme functions and component mixins live: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [`icon-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) and accepts the parameters, required to customize the icon as desired. + +```scss +$custom-icon-theme: icon-theme( + $color: #1481b8, + $disabled-color: #494949, +); +``` + +The last step is to pass the custom icon theme in our application: + +```scss +:host { + @include tokens($custom-icon-theme); +} +``` + +### Demo + +```typescript +import { Component } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-styling-sample', + styleUrls: ['./icon-styling-sample.component.scss'], + templateUrl: './icon-styling-sample.component.html', + imports: [IgxIconComponent] +}) +export class IconStylingSampleComponent { } +``` +```html +
+
+ person +
+
+ wifi +
+
+ laptop_mac +
+
+ pin_drop +
+
+ cloud +
+
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-icon-theme: icon-theme( + $color: #1481b8, + $disabled-color: #494949 +); + +:host { + @include tokens($custom-icon-theme); +} +``` + +### SVG Limitations + +It’s important to note that when using custom SVG icons, the [`icon-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) can apply and overwrite colors only on the `` element itself. If the SVG contains child elements such as ``, ``, ``, ``, etc., with hardcoded color values, those colors cannot be overridden by the theme. + +For example: + +```html + + + +``` + +In this case, the icon will always use the `#050d42` color defined in the ``, regardless of the color provided by the theme. + +```html + + + +``` + +Here, the fill color is applied to the `` element, so it can be overridden with custom color provided via [`icon-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme). + +We recommend not using hardcoded colors on SVG child elements so the icon can be styled entirely using the [`icon-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme). However, if you still want to apply hardcoded colors to child elements, you can also use the Ignite UI color variables. + +```html + + + + + + + +``` + +### Custom sizing + +You can either use the `--size` variable, targeting the `igx-icon` directly: + +```scss +igx-icon { + --size: 50px; +} +``` + +Or you can use the universal `--ig-icon-size` variable to target all instances: + +```html +
+ +
+``` + +```scss +.my-app { + --ig-icon-size: 50px; +} +``` + +You can also use one of the predefined sizes, assigning it to the `--ig-size` variable. The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`: + +```scss +igx-icon { + --ig-size: var(--ig-size-medium); +} +``` + +Learn more about it in the [Size](display-density.md) article. + +### Styling with Tailwind + +You can style the `icon` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-icon`, `dark-icon`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [icon-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme). The syntax is as follows: + +```html +person +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your icon should look like this: + +
+ +
+ +## API References + +
+ +- [IgxIconComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) +- [IgxIconComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md new file mode 100644 index 000000000..4d9785d9e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/input-group.md @@ -0,0 +1,1640 @@ +--- +title: Angular Input Group Component | Ignite UI for Angular | MIT license +_description: The Input Group component in Ignite UI for Angular allows for easy-to-use and aesthetic forms, simplicity with inputting data, and provides mitigation for handling validation and errors. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Native Angular Components, Angular Label component, Angular Label control, Angular Input component, Angular Input control, Input component, Input control, Label component, Label control, Angular Input Group component, Angular Input Group control, Angular Input directive, Angular Label directive, Angular Forms, Angular Reactive Forms, Angular Form Validation +_license: MIT +_tocName: Input Group +--- + +# Angular Input Group Component Overview + +The `IgxInputGroupComponent` allows the user to enhance input elements like input, select, textarea, etc. This can be achieved by adding custom content like text, icons, buttons, custom validation, floating label, etc., on either side of them, as a prefix, suffix, or hint. + +## Angular Input Group Example + +```typescript +import { Component } from '@angular/core'; +import { BaseInputGroupSampleComponent } from '../base-input.component'; +import { FormsModule } from '@angular/forms'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-input-group-sample-1', + styleUrls: ['./input-group-sample-1.component.scss'], + templateUrl: './input-group-sample-1.component.html', + imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] +}) +export class InputGroupSample1Component extends BaseInputGroupSampleComponent { } +``` +```html +
+
+ + + + +
+
+``` +```scss +.sample-column { + max-width: 550px; +} +``` + +
+ +## Getting Started with Ignite UI for Angular Input Group + +To get started with the Ignite UI for Angular Input Group component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxInputGroupModule` in your **app.module.ts** file. + +Note that the `IgxInputGroupComponent` also depends on the Angular **FormsModule** in order to have a working Template Driven Form: + +```typescript +// app.module.ts + +import { FormsModule } from '@angular/forms'; +import { IgxInputGroupModule } from 'igniteui-angular/input-group'; +// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package + + +@NgModule({ + ... + imports: [..., IgxInputGroupModule, FormsModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxInputGroupComponent` as a standalone dependency, or use the [`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { FormsModule } from '@angular/forms'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +// import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + + +359 + + + phone + + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent, FormsModule] + /* or imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective, FormsModule] */ +}) +export class HomeComponent { + public value = '123456789'; +} +``` + +Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igx-input-group` component. + +> [!NOTE] +> To use any of the directives `igxInput`, `igxLabel`, `igx-prefix`, `igx-suffix` or `igx-hint`, you have to wrap them in an `` container. + +## Using the Angular Input Group + +### Label & Input + +You can read about the [`igxLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlabeldirective.html) and [`igxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) directives as well as their validation, data binding and API in the [Label & Input documentation](label-input.md). + +### Prefix & Suffix + +The `igx-prefix` or `igxPrefix` and `igx-suffix` or `igxSuffix` directives can contain or be attached to HTML elements, strings, icons or even other components. In the following sample we will create a new input field with a string **prefix** and an icon **suffix**: + +```html + + +359 + + + phone + +``` + +```typescript +import { Component } from '@angular/core'; +import { BaseInputGroupSampleComponent } from '../base-input.component'; +import { FormsModule } from '@angular/forms'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-input-group-sample-3', + styleUrls: ['./input-group-sample-3.component.scss'], + templateUrl: './input-group-sample-3.component.html', + imports: [FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective] +}) +export class InputGroupSample3Component extends BaseInputGroupSampleComponent { } +``` +```html +
+
+ + +359 + + + phone + +
+
+``` +```scss +.sample-column { + max-width: 550px; +} +``` + +
+ +### Hints + +The [`igx-hint`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) directive provides a helper text placed below the input. It can be at the beginning or at the end of the input depending on the value of the [`position`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html#position) property. Let's add a hint to our phone input: + +```html + + +359 + + + + phone + + Ex.: +359 888 123 456 + +``` + +This is how the phone field with hint looks: +```typescript +import { Component, OnInit } from '@angular/core'; +import { BaseInputGroupSampleComponent } from '../base-input.component'; +import { FormsModule } from '@angular/forms'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-input-group-sample-4', + styleUrls: ['./input-group-sample-4.component.scss'], + templateUrl: './input-group-sample-4.component.html', + imports: [FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective] +}) +export class InputGroupSample4Component extends BaseInputGroupSampleComponent { } +``` +```html +
+
+ + +359 + + + + phone + + Ex.: +359 888 123 456 + +
+
+``` +```scss +.sample-column { + max-width: 550px; +} +``` + +
+ +### Input Types & Input Group Type Token + +The input group styles can be altered by using the [`type`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html#type) property of the [`igxInputGroup`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) component. The input group component supports the following types: `line` (default if type is not specified), `border`, `box`, and `search`. The `line`, `border`, and `box` types are made specifically for the `Material Design` themes. Setting those types with other themes will not have any effect on how the input group looks. +An example of setting a specific type declaratively: + +```html + +``` + +Using the [IGX_input-group_TYPE](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#igx_input-group_type) injection token allows to specify a type on an application level for all input-group instances. It provides an easy way to style all related components at once. +To set the type, use the [IGX_input-group_TYPE](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#igx_input-group_type) injection token to create a DI provider. + +```typescript +providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }] +``` + +>[!NOTE] +>The [`type`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html#type) property has precedence over a [IGX_INPUT_GROUP_TYPE](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#igx_input_group_type), thus a token value can be overridden on a component level if the type property is set explicitly. +>Most of the `igniteui-angular` form controls use input-group component internally, or allow for a custom template. Setting a global token will affect these components as well. + +Ignite UI for Angular also provides styling for the input of `type="file"` and it supports all the input group types and themes, just add this to your template: + +```html + + + +``` + +```typescript +import { Component } from '@angular/core'; +import { BaseInputGroupSampleComponent } from '../base-input.component'; +import { IGX_INPUT_GROUP_TYPE, IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-input-group-sample-5', + styleUrls: ['./input-group-sample-5.component.scss'], + templateUrl: './input-group-sample-5.component.html', + providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }], + imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxPrefixDirective] +}) +export class InputGroupSample5Component extends BaseInputGroupSampleComponent { } +``` +```html +
+
+
Line Type
+ + + + + person + + +
Box Type
+ + + + + person + + +
Border Type
+ + + + + person + + +
File Type
+ + + + Upload a file to begin... + +
Search Type
+ + + + search + + @if (input1.value.length > 0) { + + clear + + } + + mic + + +
Type Box set via a Token
+ + + + + person + + +
+
+``` +```scss +article { + padding: 16px; + height: 100%; + overflow: auto; +} + +h6 { + font-weight: 400; + margin: 24px 0 8px; + font-size: 1.1rem; +} +``` + +### Input Group Theme + +The input group component supports several themes - `material`, `fluent`, `bootstrap`, and `indigo-design`; The [`theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html#theme) is automatically set during component initialization and is inferred from the currently used stylesheet. If you plan to support several themes in your application with runtime switching, you can explicitly set the theme using the `theme` Input property. + +```html +... +``` + +### Typed Forms + +The Ignite UI for Angular Input Group component can be used inside strictly typed reactive forms which are the default ones as of Angular 14. To find out more about the typed forms, you can check [Angular official documentation](https://angular.io/guide/typed-forms). + +```typescript +import { Component } from '@angular/core'; +import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxPickerToggleComponent } from 'igniteui-angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + +export interface registrationFormGroup +{ + fName: FormControl; + lName: FormControl; + email: FormControl; + number?: FormControl; + company?: FormControl; + birthDate?: FormControl; + password: FormControl; +} + +@Component({ + selector: 'app-typed-form', + templateUrl: './typed-form.component.html', + styleUrls: ['./typed-form.component.scss'], + imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxButtonDirective, IgxRippleDirective] +}) +export class TypedFormComponent { + public minDate = new Date(); + public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate())); + + registerForm = new FormGroup({ + fName: new FormControl('', { nonNullable: true }), + lName: new FormControl('', { nonNullable: true }), + email: new FormControl('', { nonNullable: true}), + number: new FormControl(null, { nonNullable: false}), + company: new FormControl('', { nonNullable: false}), + birthDate: new FormControl('', { nonNullable: false}), + password: new FormControl('', { nonNullable: false}) + }); + + constructor() { } + + public onSubmit() { + console.log(this.registerForm.value); + this.registerForm.reset(); + } +} +``` +```html +
+
+

Registration Form

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + today + + + + + + + + + +
+
+
+``` +```scss +@use '../../../../variables' as *; + +.container > * { + margin-top: 32px; +} + +form { + box-shadow: elevation(4); + padding: 24px; + margin-bottom: 48px; +} + +h4 { + margin-top: 0; +} +``` + +## Validation + +The following samples demonstrate how to configure input validation when using [template-driven](https://angular.io/guide/forms) or [reactive forms](https://angular.io/guide/reactive-forms). + +### Template-Driven Forms + +Template-driven form validation is achieved by adding validation attributes, i.e., `required`, `minlength`, etc., to the `input` element. + +```html +
+ + + + + + + + + + + + + + + + +
+``` + +The `required` attribute adds an asterisk next to the label, indicating that this field must be filled in. Furthermore, when the `input` has additional validation applied to it, such as `email` and `minlength`, this could allow the developer to notify the end user for additional requirements via the [`igx-hint`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) directive. + +The following example uses two-way data binding and demonstrates how to inspect the control's state by exporting the `ngModel` to a local variable. + +```html +
+ ... + + + + Please enter a valid email + + + + + + Password should be at least 8 characters + + + +
+``` + +The user should not be able to submit the form if any of the form controls in it are invalid. This could be achieved by enabling/disabling the submit button based on the form's state. + +The following example demonstrates how to inspect the form's state by exporting the `ngForm` to a local variable. + +```html +
+ + + + Please enter a valid email + + ... + + +
+``` + +The result from the above configurations could be seen in the below sample. Start typing into the Email and Password fields and you will notice that the [`igx-hint`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) is shown if the entered values are invalid. The sample also demonstrates how to toggle the password's visibility by using the [`igx-icon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) and the [`igx-suffix`](#prefix--suffix) directive. + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { NgForm, FormsModule } from '@angular/forms'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + + +interface User +{ + username: string; + email: string; + password: string; +} + +@Component({ + selector: 'app-template-driven-form-validation', + templateUrl: './template-driven-form-validation.component.html', + styleUrls: ['./template-driven-form-validation.component.scss'], + imports: [FormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] +}) +export class TemplateDrivenFormValidationComponent { + @ViewChild(NgForm, { static: true }) + public registrationForm: NgForm; + + public showPassword: boolean = false; + + public user: User = { + username: '', + email: '', + password: '' + }; + + public get togglePasswordVisibility() { + return this.showPassword ? 'visibility_off' : 'visibility'; + } + + public onSubmit() { + console.log(this.user); + this.registrationForm.reset(); + } +} +``` +```html +
+
+

Registration Form

+
+ + + + + + + + + @if (email.errors?.email) { + Please enter a valid email + } + + + + + + @if (password.errors?.minlength) { + Password should be at least 8 characters + } + @if (password.value) { + + {{ togglePasswordVisibility }} + + } + + + +
+
+
+``` +```scss +article { + max-width: 550px; + padding: 16px; +} + +.container > * { + margin-top: 32px; +} + +form { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + padding: 24px; + margin-bottom: 48px; +} + +h4 { + margin-top: 0; +} +``` + +### Reactive Forms + +Reactive form validation is achieved by adding validator functions directly to the form control model in the component class. After creating the control in the component class, it should be associated with a form control element in the template. + +```ts +public registrationForm: FormGroup; + +constructor(fb: FormBuilder) { + this.registrationForm = fb.group({ + username: ['', { nonNullable: true, validators: [Validators.required] }], + email: ['', { nonNullable: true, validators: [Validators.required, Validators.email] }], + password: ['', { nonNullable: true, validators: [Validators.required, Validators.minLength(8)] }] + }); +} +``` + +```html +
+ + + + + + + + + + + + + + + + +
+``` + +Similar to the template-driven form sample, when having additional validation like `email` and `minlength`, an [`igx-hint`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) directive could be used to notify the end user if the validation has failed. + +The following example demonstrates how to access the control through a `get` method and inspect its state. It also demonstrates how to enable/disable the submit button by inspecting the state of the `FormGroup`. + +```ts +public get email() { + return this.registrationForm.get('email'); +} + +public get password() { + return this.registrationForm.get('password'); +} +``` + +```html +
+ ... + + + + Please enter a valid email + + + + + + Password should be at least 8 characters + + + +
+``` + +The result from the above configurations could be seen in the below sample. Similar to the template-driven form sample, it also demonstrates how to toggle the password's visibility by using the [`igx-icon`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) and the [`igx-suffix`](#prefix--suffix) directive. + +```typescript +import { Component, inject } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + + +interface User +{ + username: FormControl; + email: FormControl; + password: FormControl; +} + +@Component({ + selector: 'app-reactive-form-validation', + templateUrl: './reactive-form-validation.component.html', + styleUrls: ['./reactive-form-validation.component.scss'], + imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] +}) +export class ReactiveFormValidationComponent { + public registrationForm: FormGroup; + public showPassword: boolean = false; + + constructor() { + const fb = inject(FormBuilder); + + this.registrationForm = fb.group({ + username: ['', { nonNullable: true, validators: [Validators.required] }], + email: ['', { nonNullable: true, validators: [Validators.required, Validators.email] }], + password: ['', { nonNullable: true, validators: [Validators.required, Validators.minLength(8)] }] + }); + } + + public get email() { + return this.registrationForm.get('email'); + } + + public get password() { + return this.registrationForm.get('password'); + } + + public get togglePasswordVisibility() { + return this.showPassword ? 'visibility_off' : 'visibility'; + } + + public onSubmit() { + console.log(this.registrationForm.value); + this.registrationForm.reset(); + } +} +``` +```html +
+
+

Registration Form

+
+ + + + + + + + + @if (email.errors?.email) { + Please enter a valid email + } + + + + + + @if (password.errors?.minlength) { + Password should be at least 8 characters + } + @if (password.value) { + + {{ togglePasswordVisibility }} + + } + + + +
+
+
+``` +```scss +article { + max-width: 550px; + padding: 16px; +} + +.container > * { + margin-top: 32px; +} + +form { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + padding: 24px; + margin-bottom: 48px; +} + +h4 { + margin-top: 0; +} +``` + +### Custom Validators + +Some input fields may require custom validation and this could be achieved via custom validators. When the value is invalid, the validator will generate a set of errors that could be used to display a specific error message. + +Below is an example of a simple custom reactive form validator that validates if the entered email address contains a predefined value and generates different errors based on where the value occurs. + +```ts +public registrationForm: FormGroup; + +constructor(fb: FormBuilder) { + this.registrationForm = fb.group({ + email: ['', { + nonNullable: true, + validators: [ + Validators.required, + Validators.email, + this.emailValidator('infragistics') + ] + }], + ... + }); +} + +private emailValidator(val: string): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value?.toLowerCase(); + const localPartRegex = new RegExp(`(?<=(${val})).*[@]`); + const domainRegex = new RegExp(`(?<=[@])(?=.*(${val}))`); + const returnObj: ValidatorErrors = {}; + + if (value && localPartRegex.test(value)) { + returnObj.localPart = true; + } + if (value && domainRegex.test(value)) { + returnObj.domain = true; + } + + return returnObj; + } +} +``` + +### Cross-Field Validation + +In some scenarios, the validation of one control may depend on the value of another one. To evaluate both controls in a single custom validator the validation should be performed in a common ancestor control, i.e., the `FormGroup`. The validator retrieves the child controls by calling the `FormGroup`'s `get` method, compares the values and if the validation fails, a set of errors is generated for the `FormGroup`. + +This will set only the form's state to invalid. To set the control's state, we could use the [`setErrors`](https://angular.io/api/forms/AbstractControl#seterrors) method and add the generated errors manually. Then, when the validation is successful, the errors could be removed by using the [`setValue`](https://angular.io/api/forms/AbstractControl#setvalue) method that will rerun the control's validation for the provided value. + +The below example demonstrates a cross-field validation where the Password should not contain the Email address and the Repeat password should match the Password. + +```ts +private passwordValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const email = control.get('email'); + const password = control.get('password'); + const repeatPassword = control.get('repeatPassword'); + const returnObj: ValidatorErrors = {}; + + if (email.value + && password.value + && password.value.toLowerCase().includes(email.value)) { + password.setErrors({ ...password.errors, containsEmail: true }); + returnObj.containsEmail = true; + } + + if (password + && repeatPassword + && password.value !== repeatPassword.value) { + repeatPassword.setErrors({ ...repeatPassword.errors, mismatch: true }); + returnObj.mismatch = true; + } + + if (!returnObj.containsEmail && password.errors?.containsEmail) { + password.setValue(password.value); + } + + if (!returnObj.mismatch && repeatPassword.errors?.mismatch) { + repeatPassword.setValue(repeatPassword.value); + } + + return returnObj; + } +} +``` + +To add the custom validator to the `FormGroup` it should be passed as a second argument when creating the form. + +```ts +public registrationForm: FormGroup; + +constructor(fb: FormBuilder) { + this.registrationForm = fb.group({ + email: ['', { + nonNullable: true, + validators: [ + Validators.required, + Validators.email, + this.emailValidator('infragistics') + ] + }], + ... + }, + { + validators: [this.passwordValidator()] + }); +} +``` + +The below sample demonstrates how the built-in validators could be used in combination with the custom `emailValidator` and cross-field `passwordValidator` from the previous examples. + +```typescript +import { Component, inject } from '@angular/core'; +import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; + + +interface User +{ + email: FormControl; + password: FormControl; + repeatPassword: FormControl; +} + +interface ValidatorErrors +{ + localPart?: boolean; + domain?: boolean; + containsEmail?: boolean; + mismatch?: boolean; +} + +@Component({ + selector: 'app-reactive-form-custom-validation', + templateUrl: './reactive-form-custom-validation.component.html', + styleUrls: ['./reactive-form-custom-validation.component.scss'], + imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxRippleDirective] +}) +export class ReactiveFormCustomValidationComponent { + private pattern = `^(?=.*[A-Za-z])(?=.*\\d)(?=.*[~!@?#+$"'%^&:;*\\-_=.,<>])[A-Za-z\\d~!@?#+$"'%^&:;*\\-_=.,<>]+$`; + public registrationForm: FormGroup; + public showPassword: boolean = false; + public showRepeat: boolean = false; + + constructor() { + const fb = inject(FormBuilder); + + this.registrationForm = fb.group({ + email: ['', { + nonNullable: true, + validators: [ + Validators.required, + Validators.email, + this.emailValidator('infragistics') + ] + }], + password: ['', { + nonNullable: true, + validators: [ + Validators.required, + Validators.minLength(8), + Validators.pattern(this.pattern) + ] + }], + repeatPassword: ['', { + nonNullable: true, + validators: [Validators.required] + }] + }, + { + validators: [this.passwordValidator()] + }); + } + + public get email() { + return this.registrationForm.get('email'); + } + + public get password() { + return this.registrationForm.get('password'); + } + + public get repeatPassword() { + return this.registrationForm.get('repeatPassword'); + } + + public get togglePasswordVisibility() { + return this.showPassword ? 'visibility_off' : 'visibility'; + } + + public get toggleRepeatVisibility() { + return this.showRepeat ? 'visibility_off' : 'visibility'; + } + + public onSubmit() { + console.log(this.registrationForm.value); + this.registrationForm.reset(); + } + + private emailValidator(val: string): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value?.toLowerCase(); + const localPartRegex = new RegExp(`(?<=(${val})).*[@]`); + const domainRegex = new RegExp(`(?<=[@])(?=.*(${val}))`); + const returnObj: ValidatorErrors = {}; + + if (value && localPartRegex.test(value)) { + returnObj.localPart = true; + } + + if (value && domainRegex.test(value)) { + returnObj.domain = true; + } + + return returnObj; + } + } + + private passwordValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const email = control.get('email'); + const password = control.get('password'); + const repeatPassword = control.get('repeatPassword'); + const returnObj: ValidatorErrors = {}; + + if (email.value + && password.value + && password.value.toLowerCase().includes(email.value)) { + password.setErrors({ ...password.errors, containsEmail: true }); + returnObj.containsEmail = true; + } + + if (password + && repeatPassword + && password.value !== repeatPassword.value) { + repeatPassword.setErrors({ ...repeatPassword.errors, mismatch: true }); + returnObj.mismatch = true; + } + + if (!returnObj.containsEmail && password.errors?.containsEmail) { + password.setValue(password.value); + } + + if (!returnObj.mismatch && repeatPassword.errors?.mismatch) { + repeatPassword.setValue(repeatPassword.value); + } + + return returnObj; + } + } +} +``` +```html +
+
+ + + + @if (email.errors?.email) { + Please enter a valid email address + } + @if (!email.errors?.email && email.errors?.localPart) { + This email address is not allowed + } + @if (!email.errors?.email && email.errors?.domain) { + This domain is not allowed + } + + + + + + @if (password.errors?.containsEmail) { + Should not contain the email address + } + @if (password.errors?.minlength) { + Should be at least 8 characters + } + @if (password.errors?.pattern) { + Should contain a digit and a special character + } + @if (password.value) { + + {{ togglePasswordVisibility }} + + } + + + + + + @if (repeatPassword.errors?.mismatch + && !repeatPassword.pristine + && repeatPassword.value) { + + Passwords do not match + + } + @if (repeatPassword.value) { + + {{ toggleRepeatVisibility }} + + } + + + +
+
+``` +```scss +article { + max-width: 550px; + padding: 16px; +} + +form { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + padding: 24px; + margin-bottom: 48px; +} + +form > * { + margin-top: 32px; +} +``` + +## Styling + +### Input Group Theme Property Map + +When you modify a primary property, all related dependent properties are updated automatically: + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$box-background
$box-background-hoverHover background for the input box
$box-background-focusFocus background for the input box
$box-disabled-backgroundDisabled state background
$placeholder-colorPlaceholder text color
$hover-placeholder-colorHover color for placeholder text
$idle-text-colorDefault text color
$filled-text-colorText color when input is filled
$filled-text-hover-colorThe input text color in the filled state on hover
$focused-text-colorText color when input is focused
$idle-secondary-colorSecondary text color when idle
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-prefix-color--focusedText color for focused prefix
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$input-suffix-color--focusedText color for focused suffix
$disabled-placeholder-colorPlaceholder color when input is disabled
$disabled-text-colorText color when input is disabled
$idle-bottom-line-color
$hover-bottom-line-colorHover color for the bottom line under the input
$focused-bottom-line-colorFocused color for the bottom line
$focused-secondary-colorThe label color in the focused state
$border-colorThe border color for input groups of type border
$focused-border-colorThe focused input border color for input groups of type border
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-prefix-colorText color for prefix inside the input box
$input-prefix-background--filledThe background color of an input prefix in the filled state
$input-prefix-background--focusedThe background color of an input prefix in the focused state
$input-suffix-background
$input-suffix-colorText color for suffix inside the input box
$input-suffix-background--filledThe background color of an input suffix in the filled state
$input-suffix-background--focusedThe background color of an input suffix in the focused state
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-text-colorText color for the search input
$idle-secondary-colorSecondary text color when idle
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-suffix-backgroundThe background color of an input suffix in the idle state
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-suffix-background
$input-prefix-backgroundThe background color of an input prefix in the idle state
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-secondary-colorSecondary text color when idle
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$border-color
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-suffix-backgroundThe background color of an input suffix in the idle state
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-suffix-background
$input-prefix-backgroundThe background color of an input prefix in the idle state
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-secondary-colorSecondary text color when idle
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$idle-bottom-line-color
$hover-bottom-line-colorHover color for the bottom line under the input
$focused-bottom-line-colorFocused color for the bottom line
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$input-prefix-background
$input-prefix-colorText color for prefix inside the input box
$input-prefix-background--filledThe background color of an input prefix in the filled state
$input-prefix-background--focusedThe background color of an input prefix in the focused state
$input-suffix-background
$input-suffix-colorText color for suffix inside the input box
$input-suffix-background--filledThe background color of an input suffix in the filled state
$input-suffix-background--focusedThe background color of an input suffix in the focused state
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$box-background-hoverHover background for search input
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+
+
+ + +The first thing we need to do, in order to get started with the input group styling, is to include the `index` file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +To customize the appearance of input groups, you can create a new theme by extending the [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme). This approach allows you to override only the parameters you want to change, while the rest are automatically handled by the base theme. + +Even by specifying just a few core parameters—like colors for the border or background—you'll get a fully styled input group with consistent state-based styles (hover, focus, etc.) applied for you. + +Here’s a simple example: + +```scss +$custom-input-group: input-group-theme( + $box-background: #57a5cd, + $border-color: #57a5cd, +); +``` + +The last step is to include the newly created theme: + +```scss +:host { + @include tokens($custom-input-group); +} +``` + +In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system. + +```typescript +import { Component } from '@angular/core'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; + +@Component({ + selector: 'app-input-group-style', + templateUrl: 'input-group-styling.component.html', + styleUrls: ['input-group-styling.component.scss'], + imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective], + providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('indigo')}] +}) +export class InputGroupStyleComponent { } +``` +```html +
+ + + + Helper text + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +// CSS variables approach + +// igx-input-group { +// --border-color: #0f62fe; +// --size: #{rem(40px)}; +// --idle-bottom-line-color: #8d8d8d; +// --hover-bottom-line-color: #8d8d8d; +// --hover-placeholder-color: var(--ig-gray-600); +// --idle-secondary-color: var(--ig-gray-600); +// --focused-secondary-color: var(--ig-gray-700); +// --focused-bottom-line-color: #8d8d8d; +// --box-background-hover: var(--ig-gray-100); +// --helper-text-color: var(--ig-gray-600); +// } + +// Sass theme approach + +$custom-input-group: input-group-theme( + $border-color: #0f62fe, + $idle-bottom-line-color: #8d8d8d, + $hover-bottom-line-color: #8d8d8d, + $hover-placeholder-color: var(--ig-gray-600), + $idle-secondary-color: var(--ig-gray-600), + $focused-secondary-color: var(--ig-gray-700), + $size: rem(40px), + $box-border-radius: 0, + $box-background-hover: var(--ig-gray-100), + $placeholder-color: var(--ig-gray-600), + $helper-text-color: var(--ig-gray-600) +); + +:host { + @include tokens($custom-input-group); +} +``` + +>[!NOTE] +>The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema. +>[!NOTE] +>If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type. +
For example:
+Use `.igx-input-group--box` when styling box-style inputs. +Use `.igx-input-group--search` when targeting search inputs. +This helps prevent style conflicts between different input types. +For instance, setting a dark `$box-background` globally could cause the borders of border or line inputs to become invisible (usually appearing white). + +
+ +### Styling with Tailwind + +You can style the input group using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. + +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-input-group`, `dark-input-group`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [input-group-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme). The syntax is as follows: + +```html +
+ + +359 + + + + phone + + Ex.: +359 888 123 456 + + + + ... + + + + ... + +
+``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your inputs should look like this: + +
+ +
+ +## API References + +
+ +- [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) +- [IgxHintDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhintdirective.html) +- [IgxInputGroup Types](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#IgxInputGroupType) +- [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) +- [IgxInputGroupComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) + +## Theming Dependencies + +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + +## Additional Resources + +
+ +Related topics: + +- [Label & Input](label-input.md) +- [Reactive Forms Integration](angular-reactive-form-validation.md) + +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/inputs-color-editor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/inputs-color-editor.md new file mode 100644 index 000000000..1bed42e3e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/inputs-color-editor.md @@ -0,0 +1,156 @@ +--- +title: Angular Color Editor | Color Editor | Infragistics +_description: Color Editor component provides an easily configurable option to change colors for any desirable component or aspect of your application. +_keywords: Angular Color Editor, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["ColorEditor"] +namespace: Infragistics.Controls +_tocName: Color Editor +_premium: true +--- + +# Angular Color Editor Overview + +The Ignite UI for Angular Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1). + +## Angular Color Editor Example + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxColorEditorModule } from 'igniteui-angular-inputs'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxColorEditorModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { IgxColorEditorComponent } from 'igniteui-angular-inputs'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("colorEditor", { static: true } ) + private colorEditor: IgxColorEditorComponent + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Dependencies + + + +First, you need to install the Ignite UI for Angular by running the following command: + +```cmd +npm install igniteui-angular-core +npm install igniteui-angular-inputs +``` + +Before using the `ColorEditor`, you need to register the following modules as follows: + + + +## Usage + +The simplest way to start using the `ColorEditor` is as follows: + + + +```html + + +
+``` + + + +## Binding to events + +The Color Editor component raises the following events: + +- valueChanged +- valueChanging + + + +```ts +@ViewChild("colorEditor", { static: true } ) +private colorEditor: IgxColorEditorComponent +public ngAfterViewInit(): void +{ + this.colorEditor.valueChanged.subscribe(this.onValueChanged); +} + +public onValueChanged = (e: any) => { + console.log("test"); +} +``` + + + +
+ +## API References + +- `ColorEditor` + +## Additional Resources + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-accessibility-compliance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-accessibility-compliance.md new file mode 100644 index 000000000..d3925ac8a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-accessibility-compliance.md @@ -0,0 +1,193 @@ +--- +title: Ignite UI for Angular Accessibility Compliance | Ignite UI for Angular | Infragistics +_description: Ignite UI for Angular Accessibility Support and Compliance - Section 508 Compliance, WCAG and ARIA . +_keywords: accessibility, Angular, ignite ui for Angular, infragistics +_license: MIT +mentionedTypes: [] +_tocName: Accessibility Compliance +--- + + + +# Accessibility Compliance + +As the leading global provider of UI and UX tools for developers, our Angular team at Infragistics is committed to providing components and tools that make it easier for you to create the best possible user experience. Our goal is to enable you to focus on crafting the best applications and the best user experience for all users. + +Here you can find specific information regarding the accessibility support and compliance for our Angular grids, charts, and UI components and controls within Ignite UI for Angular. + +## Section 508 Compliance + +[Section 508](http://www.section508.gov/) of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages. + +Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for Angular controls and components are compliant with the relevant accessibility rules. + +The matrix below provides a high-level outline of the accessibility support provided by our visual controls (and related components). To learn more about an individual control/component's accessibility compliance, click the name of the control/component. + +### Ignite UI for Angular Compliance with Section 508 + +|**Component/Principle**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|**Grids**||||||||||||||||| +| - Grid||||||||||*||||||| +| - HierarchicalGrid||||||||||*||||||| +| - TreeGrid||||||||||*||||||| +|**Other**||||||||||*||||||| +| - Avatar||||||||||||||||| +| - Badge||||||||||||||||| +| - Bottom navigation||||||||||*||||||| +| - Button||||||||||*||||||| +| - Button group||||||||||*||||||| +| - Calendar||||||||||*||||||| +| - Card||||||||||||||||| +| - Carousel||||||||||*||||||| +| - Checkbox||||||||||||||||| +| - Chip||||||||||*||||||| +| - Circular progress||||||||||*||||||| +| - Combo||||||||||*||||||| +| - Date time input||||||||||*||||||| +| - Date picker||||||||||*||||||| +| - Divider||||||||||||||||| +| - Dialog||||||||||*||||||| +| - Drop down||||||||||*||||||| +| - Expansion panel||||||||||*||||||| +| - Icon||||||||||||||||| +| - Input||||||||||||||||| +| - Input group||||||||||*||||||| +| - Linear progress||||||||||*||||||| +| - List||||||||||||||||| +| - Navbar||||||||||*||||||| +| - Navigation drawer||||||||||*||||||| +| - Radio group||||||||||||||||| +| - Radio||||||||||||||||| +| - Select||||||||||*||||||| +| - Slider||||||||||*||||||| +| - Snackbar||||||||||*||||||| +| - Switch||||||||||*||||||| +| - Tabs||||||||||*||||||| +| - Time picker||||||||||*||||||| +| - Toast||||||||||*||||||| + +**LEGEND** + +|||| +|---|---|---| +||The control/component is completely accessible in this particular area.|| +|\*|The control/component is accessible in this particular area after implementing certain configurations| Example: Use **NoopAnimationsModule**utility module to allow disabling of animations| +||The control/component is not entirely accessible unless you perform some sort of action.|| +|'white space'|this particular rule does not apply to the control|| + +> \[!WARNING] +> The table above is relevant only to the **Default theme**of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. + +### Compliance Information + +- **a** - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). +- **b** - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. +- **c** - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. +- **d** - Documents shall be organized so they are readable without requiring an associated style sheet. +- **e** - Redundant text links shall be provided for each active region of a server-side image map. +- **f** - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. +- **g** - Row and column headers shall be identified for data tables. +- **h** - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. +- **i** - Frames shall be titled with text that facilitates frame identification and navigation. +- **j** - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. +- **k** - A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. +- **l** - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. +- **m** - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through l. +- **n** - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. +- **o** - A method shall be provided that permits users to skip repetitive navigation links. +- **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. + +## WCAG compliance + +[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) is simply a set of formal guidelines on how to develop accessible web content. These standards represent a higher level of accessibility than 508 standards, although they are identical or very similar. WCAG focuses primarily on HTML accessibility. + +|**Component/Guideline**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
| +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|**Grids**|||||||||||||| +| - Grid|||||||*||||*||| +| - HierarchicalGrid|||||||*||||*||| +| - TreeGrid|||||||*||||*||| +|**Other**|||||||*||||||| +| - Avatar|||||||||||*||| +| - Badge|||||||||||*||| +| - Banner||||||*|*||||*||| +| - Bottom navigation|||||||*||||*||| +| - Button|||||||*||||*||| +| - Button group|||||||*||||*||| +| - Calendar||||||*|*||||*||| +| - Card|||||||||||*||| +| - Carousel||||||*|*||||*||| +| - Checkbox|||||||||||*||| +| - Chip|||||||*||||*||| +| - Circular progress||||||*|*||||*||| +| - Combo||||||*|*||||*||| +| - Date time editor||||||*|*||||*||| +| - Date picker||||||*|*||||*||| +| - Divider|||||||||||*||| +| - Dialog||||||*|*||||*||| +| - Drop down||||||*|*||||*||| +| - Expansion panel||||||*|*||||*||| +| - Icon|||||||||||*||| +| - Input|||||||||||*||| +| - Input group|||||||*||||*||| +| - Label|||||||||||*||| +| - Linear progress||||||*|*||||*||| +| - List|||||||||||*||| +| - Month picker||||||*|*||||*||| +| - Navbar|||||||*||||*||| +| - Navigation drawer||||||*|*||||*||| +| - Radio group|||||||||||*||| +| - Radio|||||||||||*||| +| - Select||||||*|*||||*||| +| - Slider|||||||*||||*||| +| - Snackbar||||||*|*||||*||| +| - Switch|||||||*||||*||| +| - Tabs|||||||*||||*||| +| - Time picker||||||*|*||||*||| +| - Toast||||||*|*||||*||| +| - Tooltip||||||*|*||||*||| + +**Legend** + +|||| +|---|---|---| +||The control/component is completely accessible in this particular area.|| +|\*|The control/component is accessible in this particular area after implementing certain configurations|Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use **NoopAnimationsModule**utility module to allow disabling of animations;| +||The control/component is not entirely accessible unless you perform some sort of action.|| +|'white space'|this particular rule does not apply to the control|| + +> \[!WARNING] +> The table above is relevant only to the **Default theme**of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. + +### Compliance Information + +- **Principle 1 - Perceivable** - Information and user interface components must be presentable to users in ways they can perceive + - Guideline 1.1 – **Text Alternatives** - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. + - Guideline 1.2 – **Time-based Media** - Provide alternatives for time-based media. + - Guideline 1.3 – **Adaptable** - Create content that can be presented in different ways (for example simpler layout) without losing information or structure. + - Guideline 1.4 – **Distinguishable** - Make it easier for users to see and hear content including separating foreground from background. +- **Principle 2 – Operable** - User interface components and navigation must be operable. + - Guideline 2.1 – **Keyboard Accessible** - Make all functionality available from a keyboard. + - Guideline 2.2 – **Enough Time** - Provide users enough time to read and use content. + - Guideline 2.3 – **Seizures and Physical Reactions** - Do not design content in a way that is known to cause seizures or physical reactions. + - Guideline 2.4 – **Navigable** - Provide ways to help users navigate, find content, and determine where they are. + - Guideline 2.5 – **Input Modalities** - Make it easier for users to operate functionality through various inputs beyond keyboard. +- **Principle 3 – Understandable** - Information and the operation of the user interface must be understandable. + - Guideline 3.1 – **Readable** - Make text content readable and understandable. + - Guideline 3.2 – **Predictable** - Make Web pages appear and operate in predictable ways. + - Guideline 3.3 – **Input Assistance** - Help users avoid and correct mistakes. +- **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. + - Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies + +## WAI-ARIA Support + +In 2014 the W3C finalized their [WAI-ARIA specification](http://www.w3.org/TR/wai-aria/) which defined how to design Web content and Web applications to be more accessible to users with disabilities. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md new file mode 100644 index 000000000..7750dd834 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/interactivity-right-to-left-support.md @@ -0,0 +1,127 @@ +--- +title: Ignite UI for Angular Frameworks and features | Ignite UI for Angular | Infragistics +_description: Learn how to configure ARIA Accessibility and Directionality of your application with Ignite UI for Angular +_keywords: aria support, a11y, ignite ui for angular, infragistics +_tocName: RTL Support +--- + +# Right to Left (RTL) Support + +## RTL Support + +Most of the components in the framework have full **right-to-left (RTL)** support by default. To switch to RTL direction you have to just set the `dir` attribute of the html or the body tag to `rtl`. + +Example: + +```scss +// $direction defaults to ltr if it's omitted. +@include igx-core($direction: rtl); +``` + +Currently the following components have only partial RTL support: + +- Grid (igx-grid) + +## RTL Example + +This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the `directionality` of the components is. + +```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-calendar', + styleUrls: ['./calendar-rtl-sample.component.scss'], + templateUrl: './calendar-rtl-sample.component.html', + imports: [IgxButtonDirective, IgxCalendarComponent] +}) +export class CalendarRtlSampleComponent { + @ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent; + + public directionality = 'rtl'; + + changeDirectionality(){ + this.directionality === 'rtl' ? this.directionality = 'ltr' : this.directionality = 'rtl'; + } +} +``` +```html +
+
+ +
+
+
+ +
+
+
+``` +```scss +@use '../../../../variables' as *; + +$border-color: color($color: gray, $variant: 300); + +igx-calendar { + --ig-size: 2; + + border: 1px solid $border-color; + border-radius: 6px; +} + +.button-sample { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + flex: 1 0 30%; + margin: 16px 0; +} + +.calendar-wrapper { + max-width: 650px; + min-width: 300px; + margin: 8px; +} + +.location-wrapper { + min-width: 200px; + max-width: 640px; + margin-bottom: 32px; +} +``` + + +## Enabling right-to-left direction (RTL) + +`Ignite UI for Angular` library is susceptible to `directionality` manipulation only when setting `dir` attribute on either `html` or `body` tags. Also, keep in mind that runtime changes are not detected. + +With that being said, let's move to the following example: + +### Step 1 - Setting the 'dir' attribute on both tags + +```html + +... + +``` + +or + +```html + + + ... + + +``` + +> [!NOTE] +> Currently the `Igx-Grid` component only has partial(visual) RTL support. +> [!NOTE] +> +> ### Breaking Changes in version 13.2.0 +> +> All RTL specific stylesheets have been removed, therefore, users who have previously used *-rtl.css specific themes must switch to the regular theme files. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md new file mode 100644 index 000000000..8addf39ed --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/label-input.md @@ -0,0 +1,285 @@ +--- +title: Angular Label and Input Directives - MIT license +_description: With Ignite UI for Angular Label and Input directives, developers can decorate and style single-line or multi-line input elements, add additional CSS styles and integrate with other controls. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library, Angular Label component, Angular Label control, Angular Input component, Angular Input control, Input component, Input control, Label component, Label control, Angular Input directive, Angular Label directive, Angular Forms, Angular Reactive Forms, Angular Form Validation +_license: MIT +_tocName: Label & Input +--- + +# Angular Label & Input Directives Overview + +The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an `igx-input-group` component. + +## Angular Label & Input Example + +```typescript +import { Component } from '@angular/core'; +import { BaseInputGroupSampleComponent } from '../base-input.component'; +import { FormsModule } from '@angular/forms'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; + +@Component({ + selector: 'app-input-group-sample-1', + styleUrls: ['./input-group-sample-1.component.scss'], + templateUrl: './input-group-sample-1.component.html', + imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] +}) +export class InputGroupSample1Component extends BaseInputGroupSampleComponent { } +``` +```html +
+
+ + + + +
+
+``` +```scss +.sample-column { + max-width: 550px; +} +``` + +
+ +## Getting Started with Ignite UI for Angular Label & Input + +To get started with the Ignite UI for Angular Label and Input directives, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. + +The next step is to import the `IgxInputGroupModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +import { FormsModule } from '@angular/forms'; +import { IgxInputGroupModule } from 'igniteui-angular/input-group'; +// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package + + +@NgModule({ + ... + imports: [..., IgxInputGroupModule, FormsModule], + ... +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxLabelDirective`, `IgxInputDirective`, and `IgxInputGroupComponent` as standalone dependencies, or use the [`IGX_INPUT_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { FormsModule } from '@angular/forms'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +// import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + + + + + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule], + /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */ +}) +export class HomeComponent { + public fullName = 'John Doe'; +} +``` + +Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igxLabel` and `igxInput` directives and the `igx-input-group` component. + +## Using the Angular Label & Input + +The default styling of the Label and Input directives follows the text fields specification in the Material Design +[**guidelines**](https://material.io/guidelines/components/text-fields.html). + +To use the [`igxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) and [`igxLabel`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxlabeldirective.html), you have to wrap them in an `` container: + +```html + + + + +``` + +The `igxInput` directive could be applied to `` and ` + +
+
+ + +``` +```scss +:host ::ng-deep { + .igx-switch__label { + line-height: 1rem; + } +} + +.tlb { + display: flex; + max-width: 734px; +} + +.grid-wrapper { + width: 50wh; + height: 364px; + margin-top: 7px; +} +```
## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: - Windows/Unix based + - Ctrl + C / Ctrl + Ins as a keyboard shortcut + - Ctrl + V / Shift + Ins as a keyboard shortcut + - Copy action through the browser menu - macOS + - ⌘ Cmd + C as a keyboard shortcut + - ⌘ Cmd + V as a keyboard shortcut + - Copy action through the browser menu ## Limitations - Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the **paste** event (IE 11) which is emitted but does not expose the `clipboardData` property in the event. > [!NOTE] > In order to `copy` cells in IE 11, you can use the keyboard selection. Hold the `shift key` in order to make a multi-cell selection, press `Ctrl + C` in order to copy. - The copy behavior is disabled while the grid is in edit mode. - The current version of this feature covers only the `copy` from grid behavior. Later on we plan to expose `paste` within grid behavior. ## API Usage We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardOptions) @Input property, which handles the following options: - [`enabled`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.enabled) Enables/disables copying of selected cells. - [`copyHeaders`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.copyHeaders) Include the associated headers when copying. - [`copyFormatters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.copyFormatters) Apply any existing column formatters to the copied data. - [`separator`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardoptions.separator) The string separator to use the for formatting the data in the clipboard. Default is `/t` > [!NOTE] > Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs. - [`gridCopy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridCopy) Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#clipboardОptions) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md) - [Virtualization and Performance](virtualization.md) - [Multi-column headers](multi-column-headers.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md new file mode 100644 index 000000000..851233e32 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-collapsible-column-groups.md @@ -0,0 +1,119 @@ +--- +_tocName: Collapsible Column Groups +_premium: true +--- +--- title: Collapsible Column Groups in Angular Tree Grid - Infragistics _description: Take advantage of the capability to show\hide smaller and concise set of data with the use of collapsible column groups in our Angular Tree Grid. Try it now! _keywords: collapsible column headers, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/collapsible-column-groups --- # Collapsible Column Groups in Angular Data Grid Multi-column headers allow you to have multiple levels of nested columns and column groups. They also provide the ability to mark each column group as **collapsible**. **Collapsible multi-column headers** make it possible to collapse/expand, i.e. to show and hide the nested headers under the current one, which will give you a shortened/summarized information for example. ## Angular Grid Collapsible Column Groups Overview Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-multi-column-headers-sample', + styleUrls: ['./tree-grid-collapsible-column-groups.component.scss'], + templateUrl: './tree-grid-collapsible-column-groups.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnGroupComponent, IgxCollapsibleIndicatorTemplateDirective, IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxColumnComponent] +}) +export class TreeGridMultiCollapsibleColumnGroupsComponent implements OnInit { + + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + public data = generateEmployeeDetailedFlatData(); + public selectionMode: GridSelectionMode = 'none'; + public ngOnInit() { + for (const item of this.data) { + const names = item.Name.split(' '); + (item as any).LastName = names[names.length - 1]; + (item as any).FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + } + } + + public getTooltipText(expanded) { + return expanded ? + 'The column is expanded! Click here to collapse.' : 'The column is collapsed! Click here to expand'; + } +} +``` +```html +
+
+
+ + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ {{getTooltipText(column.expanded)}} +
+ + + + + + + + + + + + {{column.expanded ? 'expand_more' : 'chevron_right'}} +
+ {{getTooltipText(column.expanded)}} +
+ + + + + + + + + + + + + +
+
+
+``` +```scss +igx-tree-grid { + --ig-size: var(--ig-size-small); +} +```
## Setup To get started with the IgxTreeGrid and the **Collapsible multi-column headers** , first you need to install Ignite UI for Angular by typing the following command: ```cmd ng add igniteui-angular ``` For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. The next step is to import the `IgxTreeGridModule` in the app.module.ts file. Also, we strongly suggest that you take a brief look at [_multi-column groups_](./multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid. ## Usage _Collapsible Column Groups_ is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. In order to define a column group as `collapsible`, you need to set the property to `[collapsible]="true"` and also keep in mind that you need to define the property `visibleWhenCollapsed` to at least two child columns: at least one column must be visible when the group is collapsed (`[visibleWhenCollapsed]="true"`) and at least one column must be hidden when the group is expanded (`[visibleWhenCollapsed]="false"`), otherwise the **collapsible functionality will be disabled**. If `visibleWhenCollapsed` is not specified for some of the child columns, then this column will be always visible no matter whether the parent state is expanded or collapsed. So let's see the markup below: ```html + + + + + + + + + + + + + + ``` And now let's sum up: every child column has three states: - Can be always visible, no matter the expanded state of its parent; - Can be visible, when its parent is collapsed; - Can be hidden, when its parent is collapsed; The initial state of the column group which is specified as collapsible is `[expanded]="true"`. But you can easily change this behavior by setting the property `[expanded]="false"`. ## Expand/Collapse indicator template Default expand indicator for the igxGrid is the following: + + Expand Indicator Default collapse indicator for the igxGrid is the following: Collapsed Indicator Also, if you need to change the default expand/collapse indicator, we provide two easy ways to do so - via an input property or through a directive. ### Using an input property You can define custom expand/collapse template and provide it to each of the collapsible column groups using **collapsibleIndicatorTemplate** input property. Check the markup below: ```html + {{column.expanded ? 'remove' : 'add'}} + + + + + + ``` ### Using igxCollapsibleIndicator directive Another way to achieve this behavior is to use the igxCollapsibleIndicator directive as shown in the example below: ```html + + {{column.expanded ? 'remove' : 'add'}} + + + + + + + ``` > [!Note] > Please keep in mind that initially collapse group option takes precedence over column hidden - If you declared your column to be hidden using the property > hidden and you have a group defined where the same column should be shown, the column will be shown. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md new file mode 100644 index 000000000..051325fcf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-hiding.md @@ -0,0 +1,420 @@ +--- +_tocName: Column Hiding +_premium: true +--- +--- title: Column Hiding in Angular Tree Grid - Ignite UI for Angular _description: Learn how to use the Column Hiding feature that allows users to change the visible state of the columns directly through the UI of the Ignite Material UI table. _keywords: column hiding, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/column-hiding --- # Angular Tree Grid Column Hiding The Ignite UI for Angular Tree Grid provides an [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html) with an [`IgxColumnHidingDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnhidingdirective.html) which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Tree Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page. ## Angular Tree Grid Column Hiding Example ```typescript +import { AfterViewInit, Component, OnInit } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-hiding-toolbar-sample', + styleUrls: ['./tree-grid-column-hiding-toolbar-sample.component.scss'], + templateUrl: './tree-grid-column-hiding-toolbar-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] +}) +export class TreeGridColumnHidingToolbarSampleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + } +} +``` +```html +
+ + + Employees + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; +} +```
## Tree Grid Setup Let's start by creating our Tree Grid and binding it to our data. We will also enable both filtering and sorting for the columns. ```html + + + + + + + + + + + ``` ## Toolbar's Column Hiding UI The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) in the Tree Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the [`IgxGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) and the [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) inside of the Tree Grid. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) and a custom style for our Tree Grid's wrapper. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html
+ + + Employees + + + + + ... +
``` ```css /* columnHiding.component.css */ .grid__wrapper { + margin: 10px; } ``` } The Tree Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the `igx-grid-toolbar-hiding` [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#title) property, we will set the title that is displayed inside the dropdown button in the toolbar. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html
+ + + Employees + + + + +
``` } By using the [`columnsAreaMaxHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#columnsAreaMaxHeight) property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want. ```typescript // columnHiding.component.ts public ngAfterViewInit() { + this.hidingActionRef.columnsAreaMaxHeight = "200px"; } ``` In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) property. This way we can use it according to our application's requirements. You can see the result of the code from above at the beginning of this article in the Angular Column Hiding Example section. ## Custom Column Hiding UI Let's say we want to manually define our [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html), add the [`IgxColumnHidingDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnhidingdirective.html) so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the `IgxColumnActionsModule`. ```typescript // app.module.ts ... import { + ... + IgxColumnActionsModule } from 'igniteui-angular/grids/core'; // import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxColumnActionsModule], }) export class AppModule {} ``` Now let's create our [`IgxColumnActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html). In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the [`columns`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#columns) property of the component to the columns of our Tree Grid and include some custom styles to make our application look even better! @@if (igxName === 'IgxGrid') { ```html
+ +
+ + ... +
``` } @@if (igxName === 'IgxTreeGrid') { ```html
+ +
+ + ... +
``` } @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```css /* columnHiding.component.css */ .grid__wrapper { + margin: 15px; + display: flex; + flex-direction: row; } .columnHidingContainer { + min-width: 250px; + height: 560px; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + border: 1px gray; + border-radius: 10px; + box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); + igx-column-actions { + height: 460px; + } } .columnsOrderOptionsContainer { + margin-top: 20px; + margin-bottom: 20px; } .gridContainer { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + margin-left: 30px; } ``` } ### Add title and filter prompt A couple more things we can do in order to enrich the user experience of our column hiding component is to set the [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#title) and the [`filterColumnsPrompt`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#filtercolumnsprompt) properties. The [`title`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#title) is displayed on the top and the [`filterColumnsPrompt`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#filterColumnsPrompt) is the prompt text that is displayed in the filter input of our column hiding UI. ```html
+ +
``` ### Add column display order options We can also allow the user to choose the display order of the columns in the column hiding UI. For this purpose we will use the [`columnDisplayOrder`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html#columnDisplayOrder) property, which is an enumeration type property and has the following options: - **Alphabetical** (order the columns alphabetically) - **DisplayOrder** (order the columns according to the way they are displayed in the Tree Grid) Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](../radio-button.md) module. ```typescript // app.module.ts ... import { + ... + IgxRadioModule } from 'igniteui-angular/radio'; // import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxRadioModule], }) export class AppModule {} ``` Now all we have to do is bind the [`checked`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxradiocomponent.html#checked) property of both radio buttons respectively with different conditions and handle their click events. ```html
+ ... +
+ + Alphabetical order + + + Display order + +
``` ### Disable hiding of a column We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their [`disableHiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disableHiding) property to true. @@if (igxName === 'IgxGrid') { ```html
+ + ... + + + ... +
``` } @@if (igxName === 'IgxTreeGrid') { ```html
+ + ... + + + ... +
``` } If all went well, this is how our column hiding UI component should look like: @@if (igxName === 'IgxGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { DATA } from '../../data/customers'; +import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-column-hiding-sample', + styleUrls: ['./grid-column-hiding-sample.component.scss'], + templateUrl: './grid-column-hiding-sample.component.html', + imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridColumnHidingSampleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = DATA; + } +} +``` +```html +
+
+ + +
+ + Alphabetical order + + + Display order + +
+
+
+ + + + + + + + + + + + +
+
+``` +```scss +.grid__wrapper { + margin: 15px; + display: flex; + flex-direction: row; +} + +.columnHidingContainer { + min-width: 250px; + height: 560px; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + border: 1px gray; + border-radius: 10px; + box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); + igx-column-actions { + height: 460px; + } +} + +.columnsOrderOptionsContainer { + margin-top: 20px; + margin-bottom: 20px; +} + +.gridContainer { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + margin-left: 30px; +} +```
} @@if (igxName === 'IgxTreeGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxColumnActionsComponent, IgxColumnComponent, IgxColumnHidingDirective } from 'igniteui-angular/grids/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-hiding-sample', + styleUrls: ['./tree-grid-column-hiding-sample.component.scss'], + templateUrl: './tree-grid-column-hiding-sample.component.html', + imports: [IgxColumnActionsComponent, IgxColumnHidingDirective, IgxRadioComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridColumnHidingSampleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + } +} +``` +```html +
+
+ + +
+ + Alphabetical order + + + Display order + +
+
+
+ + + + + + + + + + + + + +
+
+``` +```scss +.grid__wrapper { + margin: 15px; + display: flex; + flex-direction: row; +} + +.columnHidingContainer { + min-width: 250px; + height: 560px; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + border: 1px gray; + border-radius: 10px; + box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); + igx-column-actions { + height: 460px; + } +} + +.columnsOrderOptionsContainer { + margin-top: 20px; + margin-bottom: 20px; +} + +.gridContainer { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + margin-left: 30px; +} +```
} ## Styling To get started with styling the column actions component, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` By using the simplest approach, we create a new theme that extends the [`column-actions-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-column-actions-theme) and accepts the `$title-color` and the `$background-color` parameters. ```scss $custom-column-actions-theme: column-actions-theme( + $background-color: #292826, + $title-color: #ffcd0f ); ``` As seen, the `column-actions-theme` only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme: ```scss $custom-button: flat-button-theme( + $foreground: #292826, + $disabled-foreground: rgba(255, 255, 255, .54) ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed the text-color of the flat buttons and the button disabled color, but the [`button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) provides way more parameters to control the button style. The last step is to **include** the component mixins, each with its respective theme: ```scss :host { + @include tokens($custom-column-actions-theme); + + .igx-column-actions { + @include tokens($custom-button); + } } ``` >[!NOTE] >We include the created **flat-button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` for the components inside the column action component (buttons, checkboxes ...etc): ```scss :host { + @include tokens($custom-column-actions-theme); + + ::ng-deep { + .igx-column-actions { + @include tokens($custom-button); + } + } } ``` ### Demo ```typescript +import { AfterViewInit, Component, OnInit } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-hiding-toolbar-style', + styleUrls: ['./tree-grid-column-hiding-toolbar-style.component.scss'], + templateUrl: './tree-grid-column-hiding-toolbar-style.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] +}) +export class TreeGridColumnHidingToolbarStyleComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + } +} +``` +```html +
+ + + Employees + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-column-actions-theme: column-actions-theme( + $background-color: steelblue, + $title-color: gold +); + +$custom-button: flat-button-theme( + $foreground: gold, + $disabled-foreground: black +); + +:host ::ng-deep{ + @include tokens($custom-column-actions-theme); + @include tokens($custom-button); +} +```
## API References In this article we learned how to use the built-in column hiding UI in the Tree Grid's toolbar and we defined it as a separate component as well. We introduced a UI that allows the user to choose between different column orders and we set our own custom title and filter prompt texts. We also used an additional Ignite UI for Angular component - the [**IgxRadio**](../radio-button.md) button. The column hiding UI has a few more APIs to explore, which are listed below. - [IgxColumnActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumnactionscomponent.html) - [IgxColumnActionsComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-column-actions-theme) Additional components and/or directives with relative APIs that were used: [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) properties: - [hiddenColumnsCount](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#hiddenColumnsCount) [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [disableHiding](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disablehiding) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) properties: - [showProgress](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridToolbarComponent.html#showProgress) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) components: - [IgxGridToolbarTitleComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) - [IgxGridToolbarActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) methods: [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) events: - [columnVisibilityChanged](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnVisibilityChanged) [IgxRadioComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxradiocomponent.html) Styles: - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxRadioComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-radio-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md new file mode 100644 index 000000000..2c0c229d3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-moving.md @@ -0,0 +1,176 @@ +--- +_tocName: Column Moving +_premium: true +--- +--- title: Column Reordering & Moving in Angular Tree Grid - Infragistics _description: Set custom column order & enable columns reordering via drag/drop mouse or touch gestures, or by using the Angular Column Moving API. Try Ignite UI for Angular! _keywords: column order, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/column-moving --- # Tree Grid Column Reordering & Moving The Tree Grid component in Ignite UI for Angular provides the **Column Moving** feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. Column moving works both with pinned and unpinned columns and with Multi-column Headers. Moving a column into the pinned area pins the column and vice versa, moving a column outside of the pinned area unpins the column. > [!NOTE] > Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns. > [!NOTE] > If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the **draggable** attribute set to **false**! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the `igxDrag` directive. > [!NOTE] > If the pinned area exceeds its maximum allowed width (80% of the total Tree Grid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area. ```html + ``` ## Angular Tree Grid Column Moving Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-moving-sample', + styleUrls: ['./tree-grid-column-moving-sample.component.scss'], + templateUrl: './tree-grid-column-moving-sample.component.html', + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) +export class TreeGridColumnMovingSampleComponent { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public data: any[]; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + + public toggleColumnPinning(column: ColumnType) { + column.pinned ? column.unpin() : column.pin(); + } +} +``` +```html + +
+ {{column.field}} + +
+ +
+ + + + + + + + + + + + + + +
+``` +```scss +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css"); +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css"); +@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css"); + +.grid__wrapper { + padding: 16px; +} + +.pin-icon { + margin-left: 8px; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; +} + +.pinned { + color: #444; + + &:hover { + color: #999; + } +} + +.unpinned { + color: #999; + + &:hover { + color: #444; + } +} + +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} +```
## Overview **Column moving** feature is enabled on a per-grid level, meaning that the [**igx-tree-grid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#moving) input of the [`igx-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html). ```html ``` ## API In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically: [`moveColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#moveColumn) - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `position` (representing a [`DropPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/dropposition.html) value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column const idColumn = grid.getColumnByName("ID"); const nameColumn = grid.getColumnByName("Name"); grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); ``` [`move`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#move) - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed. ```typescript // Move the ID column at 3rd position. const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` Note that when using the API, only the [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true. ## Events There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are [`columnMovingStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnMovingStart), [`columnMoving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnMoving) and [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnMovingEnd). You can subscribe to the [`columnMovingEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnMovingEnd) event of the [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column. ```html + + ``` ```typescript public onColumnMovingEnd(event) { + if (event.source.field === "Name" && event.target.field === "Title") { + event.cancel = true; + } } ``` ## Styling To get started with styling the Tree Grid column moving headers, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$ghost-header-background`, `$ghost-header-text-color` and the `$ghost-header-icon-color` parameters. ```scss // Define dark theme for the column moving $dark-grid-column-moving-theme: grid-theme( + $ghost-header-text-color: #f4d45c, + $ghost-header-background: #575757, + $ghost-header-icon-color: #f4bb5c ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins with its respective theme: ```scss :host { + @include tokens($dark-grid-column-moving-theme); } ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-moving-styled-sample', + styleUrls: ['./tree-grid-column-moving-styled-sample.component.scss'], + templateUrl: './tree-grid-column-moving-styled-sample.component.html', + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) +export class TreeGridColumnMovingStyledSampleComponent { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public data: any[]; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + + public toggleColumnPinning(column: ColumnType) { + column.pinned ? column.unpin() : column.pin(); + } +} +``` +```html + +
+ {{column.field}} + +
+ +
+ + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$dark-grid-column-moving-theme: grid-theme( + $ghost-header-text-color: #f4d45c, + $ghost-header-background: #575757, + $ghost-header-icon-color: #f4bb5c +); + +:host { + @include tokens($dark-grid-column-moving-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [ColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md new file mode 100644 index 000000000..92b1d489d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-pinning.md @@ -0,0 +1,410 @@ +--- +_tocName: Column Pinning +_premium: true +--- +--- title: Angular Tree Grid Column Pinning - Ignite UI for Angular _description: Want to use the Pinning feature of the Ignite UI for Angular when you develop your next app? Easily lock column or change column order with rich API. _keywords: lock column, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/column-pinning --- # Angular Tree Grid Column Pinning A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. **Column Pinning** in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Tree Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Tree Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API. ## Angular Tree Grid Column Pinning Example ```typescript +import { Component, ViewChild, OnInit, inject } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { ActivatedRoute } from '@angular/router'; +import { NgClass } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + providers: [], + selector: 'app-grid-sample', + styleUrls: ['tree-grid-toolbar-pinning.component.scss'], + templateUrl: 'tree-grid-toolbar-pinning.component.html', + imports: [NgClass, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] +}) + +export class TreeGridPinningToolbarSampleComponent implements OnInit { + private activatedRoute = inject(ActivatedRoute); + + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public data: any[]; + public useDarkTheme: boolean = false; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + + public ngOnInit(): void { + this.activatedRoute.queryParams.subscribe(params => { + this.useDarkTheme = params.dark === 'true'; + }); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + +
+``` +```scss +:host ::ng-deep .title { + width: 100%; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` ## Column Pinning API Column pinning is controlled through the `pinned` input of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). Pinned columns are rendered on the left side of the Tree Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Tree Grid body. ```html + + + ``` You may also use the Tree Grid's [`pinColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#unpinColumn) methods of the [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) to pin or unpin columns by their field name: ```typescript this.treeGrid.pinColumn('Title'); this.treeGrid.unpinColumn('Name'); ``` Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the [`columnPin`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnPin) event and changing the [`insertAtIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipincolumneventargs.html#insertAtIndex) property of the event arguments to the desired position index. ```html ``` ```typescript public columnPinning(event) { + if (event.column.field === 'Name') { + event.insertAtIndex = 0; + } } ``` ## Pinning Position You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```html ``` ```typescript public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; ``` ### Demo ```typescript +import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IPinningConfig, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: 'app-tree-grid-sample', + styleUrls: ['tree-grid-right-pinning.component.scss'], + templateUrl: 'tree-grid-right-pinning.component.html', + imports: [IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent] +}) + +export class TreeGridRightPinningSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) + public grid1: IgxTreeGridComponent; + @ViewChild('pinTemplate', { read: TemplateRef, static: true }) + public pinTemplate: TemplateRef; + + public data: any[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + + private _columnsPinned = true; + + public ngOnInit(): void { + this.data = generateEmployeeDetailedFlatData(); + } + + public toggleColumnPinning(col: IgxColumnComponent): void { + col.pinned ? col.unpin() : col.pin(); + } + + public get columnsPinned(): boolean { + return this._columnsPinned; + } + + public set columnsPinned(pinned) { + this._columnsPinned = !this._columnsPinned; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + +
+``` +```scss +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +img.country-flag { + width: 35px; + height: 20px; +} +``` ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. ```typescript +import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IPinningConfig, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [], + selector: 'app-tree-grid-sample', + styleUrls: ['tree-grid-both-sides-pinning.component.scss'], + templateUrl: 'tree-grid-both-sides-pinning.component.html', + imports: [ + IgxTreeGridComponent, + IgxGridToolbarComponent, + IgxGridToolbarActionsComponent, + IgxColumnComponent, + IgxButtonDirective + ] +}) +export class TreeGridBothSidesPinningSampleComponent implements OnInit { + @ViewChild('grid1', { static: true }) + public grid1: IgxTreeGridComponent; + @ViewChild('pinTemplate', { read: TemplateRef, static: true }) + public pinTemplate: TemplateRef; + + public data: any[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + public start = ColumnPinningPosition.Start; + public end = ColumnPinningPosition.End; + + + public ngOnInit(): void { + this.data = generateEmployeeDetailedFlatData(); + } + + public pinLeft() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.Start); + }); + } + + public pinRight() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + if (col.pinned) { + col.unpin(); + } + col.pin(undefined, ColumnPinningPosition.End); + }); + } + + public unpinColumn() { + this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => { + col.unpin(); + }); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +img.country-flag { + width: 35px; + height: 20px; +} +``` ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state. This can be done by creating a header template for the column with a custom icon. ```html +
+ {{column.header || column.field}} + +
+ + + + + + + + + + + + +
``` On click of the custom icon the pin state of the related column can be changed using the column's API methods. ```typescript public toggleColumn(col: ColumnType) { + col.pinned ? col.unpin() : col.pin(); } ``` ### Demo ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellHeaderTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { icons } from "../../services/svgIcons"; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +const FILTERING_ICONS_FONT_SET = "filtering-icons"; +@Component({ + selector: 'app-tree-grid-column-pinning-sample', + styleUrls: ['./tree-grid-column-pinning-sample.component.scss'], + templateUrl: './tree-grid-column-pinning-sample.component.html', + imports: [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridColumnPinningSampleComponent implements AfterViewInit { + private cdr = inject(ChangeDetectorRef); + private iconService = inject(IgxIconService); + + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public data: any[]; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + + public ngAfterViewInit() { + const pinnedIcons = icons.filter(icon => icon.name === "pin" || icon.name === "unpin"); + pinnedIcons.forEach(icon => { + if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) { + this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET); + } + }); + } + + public toggleColumn(column: ColumnType) { + column.pinned ? column.unpin() : column.pin(); + this.cdr.detectChanges(); + } +} +``` +```html + +
+ {{column.header || column.field}} + + +
+ +
+ + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.title-inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.pin-icon { + margin-left: 8px; + cursor: pointer; + display: flex; + align-items: center; +} + +.pinned { + color: #444; + + &:hover { + color: #999; + } +} + +.unpinned { + color: #999; + + &:hover { + color: #444; + } +} +``` ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the Tree Grid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the Tree Grid.
## API References - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md new file mode 100644 index 000000000..f652a204a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-resizing.md @@ -0,0 +1,174 @@ +--- +_tocName: Column Resizing +_premium: true +--- +--- title: Angular Tree Grid Column Resizing - Ignite UI for Angular _description: Start using Angular Tree Grid Column Resizing in order to change the grid column width in an instant. Angular drag resizing has never been so easy. Try for free! _keywords: grid column resizing, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/column-resizing --- # Angular Tree Grid Column Resizing With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended. ## Angular Tree Grid Column Resizing Example ```typescript +import { Component } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-column-resizing-sample', + styleUrls: ['./tree-grid-column-resizing-sample.component.scss'], + templateUrl: './tree-grid-column-resizing-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridColumnResizingSampleComponent { + public data: any[]; + + public col: IgxColumnComponent; + public pWidth: string; + public nWidth: string; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + + public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; + } +} +``` +```html +
+ + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 20px; +} +```
**Column resizing** is also enabled per-column level, meaning that the [**igx-tree-grid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#resizable) input of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). ```html ``` You can subscribe to the [`columnResized`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnResized) event of the [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) object, are exposed through the event arguments. ```html + + ``` ```typescript public onResize(event) { + this.col = event.column; + this.pWidth = event.prevWidth; + this.nWidth = event.newWidth; } ``` ## Resizing columns in pixels/percentages Depending on the user scenario, the column width may be defined in pixels, percentages or a mix of both. All these scenarios are supported by the Column Resizing feature. By default if a column does not have width set, it fits the available space with width set in pixels. This means that the following configuration is possible: ```html + + + ``` >[!NOTE] > There is a slight difference in the way resizing works for columns set in pixels and percentages. **Pixels** Resizing columns with width in pixels works by directly adding or subtracting the horizontal amount of the mouse movement from the size of the column. **Percentages** When resizing columns with width in percentages, the horizontal amount of the mouse movement in pixels translates roughly to its percentage amount relative to the grid width. The columns remain responsive and any future grid resizing will still reflect on the columns as well. ## Restrict column resizing You can also configure the minimum and maximum allowable column widths. This is done via the [`minWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) inputs of the [`igx-column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by [`minWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#minWidth) and [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth). ```html ``` Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels. This means the following configurations are possible: ```html ``` or ```html ``` ## Auto-size columns on double click Each column can be **auto sized** by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) is set on that column and the new width exceeds that [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) value. In this case the column will be sized according to preset [`maxWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#maxWidth) value. You can also auto-size a column dynamically using the exposed [`autosize()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#autosize) method on [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html). ```typescript @ViewChild('treeGrid') treeGrid: IgxTreeGridComponent; let column = this.treeGrid.columnList.filter(c => c.field === 'ID')[0]; column.autosize(); ``` ## Auto-size columns on initialization Each column can be set to auto-size on initialization by setting `width` to 'auto': ```html ... ``` When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns. ```typescript +import { Component } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'tree-grid-columnAutoSizing-sample', + styleUrls: ['./treegrid-column-autosizing.component.scss'], + templateUrl: './treegrid-column-autosizing.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridColumnAutoSizingSampleComponent { + public data: any[]; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + +} +``` +```html +
+ + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 20px; +} +```
## Styling To get started with the styling of the Tree Grid column resize line, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` The simplest approach to achieve this is to create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts many parameters as well as the `$resize-line-color` parameter. ``` scss $custom-grid-theme: grid-theme( + $resize-line-color: #0288d1 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins with its respective theme: ```scss :host { + @include tokens($custom-grid-theme); } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-resize-line-styling-sample', + styleUrls: ['./tree-grid-resize-line-styling-sample.component.scss'], + templateUrl: './tree-grid-resize-line-styling-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridResizeLineStylingSampleComponent { + public data: any[]; + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-grid-theme: grid-theme( + $resize-line-color: #0288d1 +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md new file mode 100644 index 000000000..ee18ce80e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-selection.md @@ -0,0 +1,249 @@ +--- +_tocName: Column Selection +_premium: true +--- +--- title: Angular Tree Grid Column Selection - Ignite UI for Angular _description: Learn how to configure column selection with Ignite UI for Angular Tree grid. This makes grid interactions much easier and faster than ever. _keywords: column selection, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/column-selection --- # Angular Tree Grid Column Selection The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich [`API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest) that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations. ## Angular Column Selection Example
The sample below demonstrates the three types of Tree Grid's **column selection** behavior. Use the _column selection_ dropdown below to enable each of the available selection modes. *_Units_, _Unit Price_ and _Delivered_ are with disabled column selection. ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + + +@Component({ + selector: 'app-tree-grid-column-selection', + templateUrl: './tree-grid-column-selection.component.html', + styleUrls: ['./tree-grid-column-selection.component.scss'], + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent] +}) +export class TreeGridColumnSelectionComponent implements OnInit, AfterViewInit { + private cdr = inject(ChangeDetectorRef); + + @ViewChild(IgxTreeGridComponent) + public tGrid: IgxTreeGridComponent; + public data; + public currentColumnSelection: GridSelectionMode = 'single'; + public columnConfig = [ + { field: 'ID', header: 'ID', selectable: true }, + { field: 'Name', header: 'Order Product', selectable: true }, + { field: 'Category', header: 'Category', selectable: true }, + { field: 'Units', header: 'Units', selectable: false }, + { field: 'UnitPrice', header: 'Unit Price', selectable: false, formatter: this.formatCurrency }, + { field: 'Price', header: 'Price', selectable: true, formatter: this.formatCurrency }, + { field: 'OrderDate', header: 'Order Date', selectable: true, formatter: this.formatDate }, + { field: 'Delivered', header: 'Delivered', selectable: false } + ]; + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public ngAfterViewInit(): void { + this.tGrid.getColumnByName('ID').selected = true; + this.cdr.detectChanges(); + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(value: number) { + return `$${value.toFixed(2)}`; + } +} +``` +```html +
+ + + + + + None + Single + Mulitple + + + + + @for (c of columnConfig; track c) { + + + } + + +
+``` +```scss +.grid-wrapper{ + padding: 16px; + + igx-select { + --ig-size: var(--ig-size-small); + } +} +```
## Basic usage The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnSelection) input, which takes [GridSelectionMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#gridselectionmode) values. ## Interactions The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable). With that being said, in order to select a column, we just need to click on one, which will mark it as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected). If the column is not selectable, no selection style will be applied on the header, while hovering. > [!NOTE] > [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) input. The [`IgxColumnGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) is [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) if all of its `selectable` descendants are [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected). *Under _Personal Details_ Column Group only column _ID_ and _Title_ are selectable. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-column-group-selection', + templateUrl: './column-group-selection.component.html', + styleUrls: ['./column-group-selection.component.scss'], + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class TreeGridColumnGroupSelectionComponent implements OnInit { + + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + public data; + + public ngOnInit(): void { + this.data = generateEmployeeDetailedFlatData(); + this.treeGrid.selectColumns(['ID', 'Title', 'City']); + + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper { + padding: 16px; +} +```
## Keyboard combinations > [!NOTE] > The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnselection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: - Multi-column selection - holding ctrl + click on every **selectable** header cell. - Range column selection - holding shift + click selects all **selectable** columns in between. ## API manipulations The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected) by setting the corresponding **setter**. > [!NOTE] > The above statement also applies to the [`IgxColumnGroupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html), except that when the [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) property is changed it changes the state of its descendants. More information regarding the API manipulations could be found in the [`API References`](#api-references) section. ## Styling Before diving into the styling options, the core module and all component mixins need to be imported. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` >[!NOTE] >Please note that [`row selection`](row-selection.md) and [`column selection`](column-selection.md) can't be manipulated independently. They depend on the same `variables`. With that being said, let's move on and change the **selection** and **hover** styles.
Following the simplest approach, let's define our custom **theme**. ```scss $custom-grid-theme: grid-theme( + $row-selected-background: #011627, + $row-selected-text-color: #ecaa53, + $row-selected-hover-background: #011627, + $header-selected-text-color: #ecaa53, + $header-selected-background: #011627, + $expand-icon-color: #ecaa53, + $expand-icon-hover-color: #b64b80 ); ``` The [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) accepts several parameters but those are the five responsible for changing the appearance of all selected columns: - **$row-selected-background** - sets the background of the selected fraction. - **$row-selected-text-color** - sets the text color of the selected fraction - **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells. - **$header-selected-text-color** - sets the text color of the selected column header - **$header-selected-background** - sets the background color of the selected column header. ### Using CSS Variables The last step is to include the custom `igx-grid` theme. ```scss :host { + @include tokens($custom-grid-theme) } ``` ### Demo ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-column-selection-style', + templateUrl: './tree-grid-column-selection-style.component.html', + styleUrls: ['./tree-grid-column-selection-style.component.scss'], + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridColumnSelectionStylesComponent implements OnInit, AfterViewInit { + private cd = inject(ChangeDetectorRef); + + @ViewChild(IgxTreeGridComponent) + public tGrid: IgxTreeGridComponent; + public data; + + public columnConfig = [ + { field: 'ID', header: 'ID', selectable: true }, + { field: 'Name', header: 'Order Product', selectable: true }, + { field: 'Category', header: 'Category', selectable: true }, + { field: 'Units', header: 'Units', selectable: true }, + { field: 'UnitPrice', header: 'Unit Price', selectable: true, formatter: this.formatCurrency }, + { field: 'Price', header: 'Price', selectable: true, formatter: this.formatCurrency }, + { field: 'OrderDate', header: 'Order Date', selectable: false, formatter: this.formatDate }, + { field: 'Delivered', header: 'Delivered', selectable: true } + ]; + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public ngAfterViewInit() { + this.tGrid.selectColumns(['ID', 'UnitPrice']); + this.cd.detectChanges(); + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public formatCurrency(value: number) { + return `$${value.toFixed(2)}`; + } +} +``` +```html +
+ + @for (c of columnConfig; track c) { + + + } + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-grid-theme: grid-theme( + $row-selected-background: #011627, + $row-selected-text-color: #ecaa53, + $row-selected-hover-background: #011627, + $header-selected-text-color: #ecaa53, + $header-selected-background: #011627 +); + +:host { + @include tokens($custom-grid-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
The column selection UI has a few more APIs to explore, which are listed below. - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) properties: - [columnSelection](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnSelection) - [selectedColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#selectedColumns) - [selectColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#selectColumns) - [deselectColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#deselectColumns) - [selectAllColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#selectAllColumns) - [deselectAllColumns](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#deselectAllColumns) [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [selectable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#selectable) - [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#selected) [`IgxColumnGrpupComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) properties: - [selectable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selectable) - [selected](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#selected) [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) events: - [onColumnsSelectionChange](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onColumnsSelectionChange) ## Additional Resources - [Tree Grid overview](tree-grid.md) - [Selection](selection.md) - [Cell selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-types.md new file mode 100644 index 000000000..54315d776 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-column-types.md @@ -0,0 +1,50 @@ +--- +_tocName: Column Data types +_premium: true +--- +--- title: Column Data Types in Angular - Ignite UI for Angular _description: Handle cell and editing templates in Angular by choosing from several predefined column data types - number, string, date, boolean, currency and percent column. _keywords: column data type, ignite ui for angular, infragistics _license: commercial --- # Angular Tree Grid Column Types Ignite UI for Angular Tree Grid provides a default handling of _number_, _string_, _date_, _boolean_, _currency_ and _percent_ column data types, based on which the appearance of the default and editing templates will be present. ## Default template If you want to enable a data type-specific template, you should set the column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) input otherwise the column will be treated as a string column since that is the default value for column dataType. Let's see what are the default templates for each type. ### String This column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) is not changing the appearance or format of the cell value. ### Number If the [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) is set to _number_, the cell value will be formatted based on application or grid's [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` ```ts public options = { + digitsInfo: '1.4-4', }; public formatOptions = this.options; ``` ```html ``` ### DateTime, Date and Time The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom [date format](https://angular.io/api/common/DatePipe#pre-defined-format-options) or [timezone](https://angular.io/api/common/DatePipe#parameters): - **format** - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fullTime' and etc. This is a full list of all available [pre-defined Angular format options](https://angular.io/api/common/DatePipe#pre-defined-format-options) (legacy). - **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world: + + > Note: Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization.md#formatting). ```ts public formatDateOptions = { + /** The date/time components that a date column will display, using predefined options or a custom format string. */ + /** e.g 'dd/mm/yyyy' or 'shortDate' **/ + format: 'longDate', + /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */ + timezone: 'GMT' }; public formatOptions = this.options; ``` ```html ``` Available timezones: | Timezone | Value | |---------------------------| ------------------------- | | Alpha Time Zone |‘UTC+1’ | | Australian Central Time |‘UTC+9:30/ +10:30’ | | Arabia Standard Time |‘UTC+3’ | | Central Standard Time |‘UTC-6’ | | China Standard Time |‘UTC+8’ | | Delta Time Zone |‘UTC+4’ | | Greenwich Mean Time |‘UTC+0’ | | Gulf Standard Time |‘UTC+4’ | | Hawaii Standard Time |‘UTC-10’ | | India Standard Time |‘UTC+4’ |
The Tree Grid accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](../grid/grid.md#custom-display-format). As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the _time_ portion of the date object: ```ts // Time format with equivalent example public timeFormats = [ + { format: 'shortTime', eq: 'h:mm a' }, + { format: 'mediumTime', eq: 'h:mm:ss a' }, + { format: 'longTime', eq: 'h:mm:ss a z' }, + { format: 'fullTime', eq: 'h:mm:ss a zzzz' }, ]; ``` #### Cell editing When it comes to cell editing based on the column type a different editor will appear: - dateTime - [IgxDateTimeEditor directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html) will be used. This editor will give you a mask directions for the input elements part of the DateTime object. - date - [IgxDatePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) will be used. - time - [IgxTimePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtimepickercomponent.html) will be used. #### Filtering The same editors listed above will be used when it comes to Quick Filtering/Excel-style Filtering. These are the following filtering operands that each type exposes: - dateTime and date - Equals, Does Not Equal, Before, After, Today, Yesterday, This Month, Last Month, Next Month, This Year, Last Year, Next Year, Empty, Not Empty, Null, Not Null; - time - At, Not At, Before, After, At or Before, At or After, Empty, Not Empty, Null, Not Null; #### Summaries The available Summary operands will be **Count**, **Earliest** (date/time) and **Latest** (date/time). #### Sorting Time type column sorts based on the time portion of the object, ms will be disregarded. Date type column sorts based on the date portion, disregards the time portion. DateTime column sorts based on the full date ### Boolean The default template is using material icons for visualization of boolean values - 'clear' icon for _false_ values and 'check' icon for _true_ values. As for the editing template, it is using [igx-checkbox](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) component. ```html ``` ### Currency #### Default template The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [`LOCALE_ID`](https://angular.io/api/core/LOCALE_ID) or Tree Grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale). _By using LOCALE_ID_ ```ts import { LOCALE_ID } from '@angular/core'; ... + + @Component({ + selector: 'app-component.sample', + templateUrl: 'grid-component.sample.html', + providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }] }) ``` _By using Grid's locale_ ```html ``` By using the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) input the end-user can customize the number format by _decimal point_, _currencyCode_ and _display_. ```ts public options = { + digitsInfo: '3.4-4', + currencyCode: 'USD', + display: 'symbol-narrow' }; public formatOptions = this.options; ``` ```html ``` | Parameter | Description | |---------------------------| ------------------------- | | digitsInfo | Represents Decimal representation of currency value | | currencyCode | ISO 4217 currency code | | display* | Displays the value by narrow or wide symbol | *display - for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$. Upon editing of cell's value the _currency symbol_ will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.md#cell-editing-templates). >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) ### Percent Default template is showing the percent equivalent of the underlying numeric value. The displayed cell value is a multiplied result by display factor of '100' - for example, as the default factor is 100 and the "value" passed to the cell is 0.123, then the displayed cell value will be "12.3%". When it comes to cell editing, the value will be the same as the data source value - the display factor is '1'. Upon editing of the cell a preview of the percent value will be shown as a suffix element.For example, while editing '0.0547' the preview element will show '5.47%'. ```ts public options = { + /** + * Decimal representation options, specified by a string in the following format: + * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`. + * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1. + * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0. + * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3. + */ + digitsInfo: '2.2-3' }; public formatPercentOptions = this.options; ``` ```html ``` >[!NOTE] > When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) ### Image Default template is using the value coming from the data as an image source to a default image template. The default image template will extract the name of the image file and set it as `alt` attribute of the image to meet the accessibility requirement. The displayed cell size is adjusted to the sizes of the images rendered, so keep in mind that large images will still be rendered and the grid rows will become as large as the images in the image column. Filtering, sorting and grouping will be turned off by default for image type columns. If you want to enable them, you need to provide custom strategies which perform the data operations. ```html ``` When [auto-generating](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#autoGenerate) columns, the grid analyses the values in the first data record. If a value is of type string and matches the pattern of a url ending in an image extension (gif, jpg, jpeg, tiff, png, webp, bmp) then the column will automatically be marked as `dataType === GridColumnDataType.Image` and a default image template will be rendered. ## Default editing template See the editing templates part of [Tree Grid Editing topic](editing.md#editing-templates) ## Custom editing template and formatter Custom template and column formatter definition will always take precedence over the column data type set: ### Custom template ```html + + + {{ value | currency:'USD':'symbol':'1.0-0'}} + + ``` ### Column formatter ```ts + // Through column formatter property public formatCurrency(value: number) { + return `Dollar sign ${value.toFixed(0)}`; } public init(column: IgxColumnComponent) { + switch (column.field) { + case 'UnitsInStock': + column.formatter = this.formatCurrency; + break; + default: + return; } ``` ## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - Column [pipeArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs) - Tree Grid [locale](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) - Column [dataType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) ## Additional Resources
- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) - [Tree Grid overview topic](tree-grid.md) - [Editing topic](editing.md) - [Summaries topic](summaries.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md new file mode 100644 index 000000000..8e0c0385c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-conditional-cell-styling.md @@ -0,0 +1,534 @@ +--- +_tocName: Conditional Styling +_premium: true +--- +--- title: Conditional Cell Styling in Angular Tree Grid - Ignite UI for Angular _description: Let users identify different cells quickly. Define a variety of cell styles. Use the conditional cell styling in Angular Data grid to make cells stand out. _keywords: conditional styling, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/conditional-cell-styling --- # Angular Tree Grid Conditional Styling If you need to provide any custom styling in the IgxTreeGrid component, you can do it on either row or cell level. ## Tree Grid Conditional Row Styling The IgxTreeGrid component in Ignite UI for Angular provides two ways to **conditional styling of rows** based on custom rules. - By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowClasses) input on the IgxTreeGrid component; - By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowStyles) input on the IgxTreeGrid component; Further in this topic wi will cover both of them in more details. ### Using rowClasses You can conditionally style the IgxTreeGrid rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowClasses) input and define custom rules. ```html + ... ``` The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. ```typescript // sample.component.ts public rowClasses = { + activeRow: this.activeRowCondition }; public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index; ``` ```scss // sample.component.scss ::ng-deep { + .activeRow { + border: 2px solid #fc81b8; + border-left: 3px solid #e41c77; + } } ``` > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-classes-sample', + styleUrls: ['tree-grid-rowClasses.component.scss'], + templateUrl: 'tree-grid-rowClasses.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridRowClassesComponent implements OnInit { + + @ViewChild('treeGrid', { static: true }) public treeGrid1: IgxTreeGridComponent; + public data: IEmployee[]; + public columns: any[]; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + { field: 'Name', label: 'Full Name', resizable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'Age', label: 'Age', resizable: false, filterable: false, editable: true, dataType: 'number' }, + { field: 'Title', label: 'Title', resizable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', resizable: true, filterable: true, editable: true, dataType: 'date' } + ]; + } + + public activeRowCondition = (row: RowType) => this.treeGrid1?.navigation.activeNode?.row === row.index; + // eslint-disable-next-line @typescript-eslint/member-ordering + public rowClasses = { + activeRow: this.activeRowCondition + }; + + + public handleChange() { + requestAnimationFrame(() => { + this.treeGrid1.pipeTrigger++; + this.treeGrid1.notifyChanges(); + }); + } + public handleLeftClick(args) { + args.event.preventDefault(); + this.treeGrid1.navigation.setActiveNode({ row: args.cell.row.index, column: args.cell.column.visibleIndex }); + } +} +``` +```html +
+ + @for (c of columns; track c) { + + + } + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +::ng-deep { + .activeRow { + border: 1px solid #fc81b8; + border-left: 3px solid #e41c77; + } + .toggle-section { + width: 300px; + height: 100px; + background-color: white; + } + +} +```
### Using rowStyles Columns now expose the `rowStyles` property which allows conditional styling of the data rows. Similar to `rowClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). > The callback signature for both `rowStyles` and `rowClasses` is: ```ts (row: RowType) => boolean ``` Let's define our styles: ```typescript // component.ts public background = (row: RowType) => row.data['Title'] === 'CEO' ? '#6c757d' : + row.data['Title'].includes('President') ? '#adb5bd' : + row.data['Title'].includes('Director') ? '#ced4da' : + row.data['Title'].includes('Manager') ? '#dee2e6' : + row.data['Title'].includes('Lead') ? '#e9ecef' : + row.data['Title'].includes('Senior') ? '#f8f9fa' : null; public rowStyles = { + background: this.background, + 'border-left': (row: RowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? + '2px solid' : null, + 'border-color': (row: RowType) => row.data['Title'] === 'CEO' ? '#495057' : null, + color: (row: RowType) => row.data['Title'] === 'CEO' ? '#fff' : null }; ``` ```html + ... ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-styles-sample', + styleUrls: ['tree-grid-rowStyle.component.scss'], + templateUrl: 'tree-grid-rowStyle.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridRowStylesComponent implements OnInit { + + @ViewChild('treeGrid', { static: true }) public treeGrid1: IgxTreeGridComponent; + public data: IEmployee[]; + public columns: any[]; + + public background = (row: RowType) => row.data['Title'] === 'CEO' ? '#6c757d' : + row.data['Title'].includes('President') ? '#adb5bd' : + row.data['Title'].includes('Director') ? '#ced4da' : + row.data['Title'].includes('Manager') ? '#dee2e6' : + row.data['Title'].includes('Lead') ? '#e9ecef' : + row.data['Title'].includes('Senior') ? '#f8f9fa' : null; + + // eslint-disable-next-line @typescript-eslint/member-ordering + public rowStyles = { + background: this.background, + 'border-left': (row: RowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? + '2px solid' : null, + 'border-color': (row: RowType) => row.data['Title'] === 'CEO' ? '#495057' : null, + color: (row: RowType) => row.data['Title'] === 'CEO' ? '#fff' : null + }; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + { field: 'Name', label: 'Full Name', resizable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'Age', label: 'Age', resizable: false, filterable: false, editable: true, dataType: 'number' }, + { field: 'Title', label: 'Title', resizable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', resizable: true, filterable: true, editable: true, dataType: 'date' } + ]; + } +} +``` +```html +
+ + @for (c of columns; track c) { + + + } + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +```
## Tree Grid Conditional Cell Styling ## Overview The IgxTreeGrid component in Ignite UI for Angular provides two ways to **conditional styling of cells** based on custom rules. - By setting the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) input [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell. ```ts // component.ts file public beatsPerMinuteClasses = { + downFont: this.downFontCondition, + upFont: this.upFontCondition }; ... private downFontCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] <= 95; } ``` ```scss // component.scss file .upFont { + color: red; } .downFont { + color: green; } ``` ### Using cellClasses You can conditionally style the IgxTreeGrid cells by setting the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) input and define custom rules. ```html ``` The [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses) input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. ```typescript // sample.component.ts private upPriceCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] > 5; } private downPriceCondition = (rowData: any, columnKey: any): boolean => { + return rowData[columnKey] <= 5; } public priceClasses = { + downPrice: this.downPriceCondition, + upPrice: this.upPriceCondition }; ``` ```scss // sample.component.scss ::ng-deep { + .upPrice { + color: red; + } + + .downPrice { + color: green; + } } ``` > [!NOTE] > Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-conditional-cell-style-sample', + styleUrls: ['./tree-grid-conditional-cell-style-sample.component.scss'], + templateUrl: './tree-grid-conditional-cell-style-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridConditionalCellStyleComponent implements OnInit { + public data: any[]; + public allergenItems = ['Frozen Shrimps', 'Wild Salmon Fillets', 'Fresh Cheese', 'Skimmed Milk 1L', 'Butter']; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + public ngOnInit() { + this.data = ORDERS_DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + private upPriceCondition = (rowData: any, columnKey: any): boolean => rowData[columnKey] > 5; + + private downPriceCondition = (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 5; + + private allergenCondition = (rowData: any, columnKey: any): boolean => this.allergenItems.indexOf(rowData[columnKey]) >= 0; + + + // eslint-disable-next-line @typescript-eslint/member-ordering + public priceClasses = { + downPrice: this.downPriceCondition, + upPrice: this.upPriceCondition + }; + + + // eslint-disable-next-line @typescript-eslint/member-ordering + public allergenClasses = { + 'allergens allergensFont': this.allergenCondition + }; +} +``` +```html +
+ + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + May contain allergens. +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +:host::ng-deep { + $primary-color-green: green; + $primary-color-red: red; + $primary-color-blue: royalblue; + $margin-right-images: 5px; + $images-font-size: 1.5em; + $images-font-weight: bold; + + .upPrice { + color: $primary-color-red; + } + + .downPrice { + color: $primary-color-green; + } + + .allergensFont { + color: $primary-color-blue; + } + + .contentStyle { + font-size: $images-font-size; + font-weight: $images-font-weight; + margin-right: $margin-right-images; + } + + .star { + @extend .contentStyle; + content: "*"; + } + + .allergens:after { + @extend .star; + font-weight: normal; + color: $primary-color-blue; + vertical-align: top; + margin-left: 2px; + } + + #message:before { + @extend .star; + font-weight: lighter; + color: $primary-color-blue; + vertical-align: top; + margin-right: 2px; + } + + #message { + color: $primary-color-blue; + font-style: italic; + font-size: 0.75rem; + } +} +```
- By using the [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. ```ts public styles = { + 'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)', + 'text-shadow': '1px 1px 2px rgba(25,25,25,.25)', + 'animation': '0.25s ease-in-out forwards alternate popin' }; ``` > The callback signature for both `cellStyles` and `cellClasses` is now changed to: ```ts (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean ``` ### Using cellStyles Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions). In the [sample above](#demo) we've created: - Two different styles that will be applied based on the column index. - You will also change the `text color` based on even/odd rows. > The callback signature for both `cellStyles` is: ```ts (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean ``` Let's define our styles: ```typescript // component.ts public oddColStyles = { + background: 'linear-gradient(to right, #b993d6, #8ca6db)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray', + animation: '0.75s popin' }; public evenColStyles = { + background: 'linear-gradient(to right, #8ca6db, #b993d6)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', + animation: '0.75s popin' }; ``` On `ngOnInit` we will add the `cellStyles` configuration for each column of the predefined `columns` collection, which is used to create the IgxTreeGrid columns dynamically. ```ts // component.ts public ngOnInit() { + this.data = ORDERS_DATA; + this.columns = [ + { field: 'ID' }, + { field: 'Name' }, + { field: 'UnitPrice' }, + { field: 'OrderDate' } + ]; + + this.applyCSS(); } ``` ```ts public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); } public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); } ``` ```html //component.html + + ``` Define a `popin` animation ```scss // component.scss @keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { JsonPipe } from '@angular/common'; + +@Component({ + selector: 'app-grid-conditional-cell-style-2', + styleUrls: ['./tree-grid-conditional-cell-style-2.component.scss'], + templateUrl: './tree-grid-conditional-cell-style-2.component.html', + imports: [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, JsonPipe] +}) +export class TreeGridConditionalCellStyle2Component implements OnInit { + @ViewChild('grid1', { read: IgxTreeGridComponent, static: true }) + public grid1: IgxTreeGridComponent; + public data: any[]; + public columns: any[]; + + public oddColStyles = { + background: 'linear-gradient(to right, #b993d6, #8ca6db)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray', + animation: '0.75s popin' + }; + + public evenColStyles = { + background: 'linear-gradient(to right, #8ca6db, #b993d6)', + color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white', + animation: '0.75s popin' + }; + + public ngOnInit() { + this.data = ORDERS_DATA; + this.columns = [ + { field: 'ID' }, + { field: 'Name', header: 'Order Product' }, + { field: 'UnitPrice', header: 'Unit Price' }, + { field: 'OrderDate', header: 'Order Date' } + ]; + + this.applyCSS(); + } + public applyCSS() { + this.columns.forEach((column, index) => { + column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles); + }); + } + + public updateCSS(css: string) { + this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)}; + this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)}; + this.applyCSS(); + } + + public formatCurrency(value: number) { + return `$${value.toFixed(2)}`; + } + + public formatDate(value) { + return new Intl.DateTimeFormat('en-US').format(value); + } + + public init(column: IgxColumnComponent) { + console.log(column); + switch (column.field) { + case 'UnitPrice': + column.formatter = this.formatCurrency; + break; + case 'OrderDate': + column.formatter = this.formatDate; + break; + default: + return; + } + } +} +``` +```html +
+
+ + + + Note: You cannot use the callback functionality here + + +
+ + @for (c of columns; track c) { + + + } + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; + transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); + + igx-input-group { + width: 100%; + } + + igx-tree-grid { + margin-top: 25px; + } +} + +@keyframes popin { + 0% { + opacity: 0.1; + transform: scale(.75, .75); + filter: blur(3px) invert(1); + } + + 50% { + opacity: .5; + filter: blur(1px); + } + + 100% { + transform: scale(1, 1); + opacity: 1; + filter: none; + } +} +```
## Known issues and limitations - If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met. A pipe check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that with a `spread operator(...)` on [`onCellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onCellEdit) event. This will copy the original object with a new instance, and lead pure pipe to be fired. ```ts public backgroundClasses = { + myBackground: (rowData: any, columnKey: string) => { + return rowData.Col2 < 10; + } }; ... editDone(evt) { + this.backgroundClasses = {...this.backgroundClasses}; } ``` ```html + + + ``` ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Editing](editing.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Column Hiding](column-hiding.md) - [Selection](selection.md) - [Searching](search.md) - [Toolbar](toolbar.md) - [Multi-column Headers](multi-column-headers.md) - [Size](display-density.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md new file mode 100644 index 000000000..db3e4266d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-display-density.md @@ -0,0 +1,205 @@ +--- +_tocName: Size +_premium: true +--- +--- title: Angular Grid Size - Ignite UI for Angular _description: Learn how to apply size capabilities to the Tree grid component. You can use a set of compact view options in the Ignite UI for Angular. _keywords: material density, size igniteui for angular, infragistics _license: commercial _canonicalLink: grid/display-density --- # Angular Tree Grid Size **IgxTreeGrid** design is based on [Material Design Guidelines](https://material.io/design). We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content. ## Angular Tree Grid Size Example ```typescript +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +class CustomNumberSummary { + public operate(data?: any[]): IgxSummaryResult[] { + const result = new IgxSummaryOperand().operate(data); + result.push({ + key: 'Min', + label: 'Min', + summaryResult: IgxNumberSummaryOperand.min(data) + }); + result.push({ + key: 'max', + label: 'Max', + summaryResult: IgxNumberSummaryOperand.max(data) + }); + return result; + } +} + +@Component({ + selector: 'app-tree-grid-displaydensity-sample', + styleUrls: ['./tree-grid-displaydensity-sample.component.scss'], + templateUrl: './tree-grid-displaydensity-sample.component.html', + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, DatePipe] +}) +export class TreeGridDisplaydensitySampleComponent implements OnInit { + @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent; + public data; + public size = 'small'; + public sizes; + public numberSummaries = CustomNumberSummary; + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event) { + this.size = this.sizes[event.index].label; + this.treeGrid.reflow(); + } +} +``` +```html +
+ +
+ + + + + + {{val | date:'dd/MM/yyyy'}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +:host { + display: block; + padding: 8px; +} + +.density-chooser { + margin-bottom: 16px; +} +igx-buttongroup{ + display: block; + width: 500px; +} +```
## Usage As you can see in the demo above, the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set size: ```html ``` And now let's see in details how each option reflects on the Tree Grid component. When you switch between different sizes the height of each Tree Grid element and the corresponding paddings will be changed. Also if you want to apply custom column [**width**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding. - **--ig-size-large** - this is the default Tree Grid size with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `80px`; - **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `64px`; - **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#width) is `56px`; > [!NOTE] > Please keep in mind that currently you **can not** override any of the sizes. Let's now continue with our sample and see in action how each size is applied. Let's first add a button which will help us to switch between each size: ```html
+
``` ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; public size = 'small'; public sizes; public ngOnInit() { + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.sie === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; } ``` Now we can add the markup. ```html
+
+ + + + + {{val | date:'dd/MM/yyyy'}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` Finally, let's provide the necessary logic in order to actually apply the size: ```typescript @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent; public selectSize(event: any) { + this.size = this.sizes[event.index].label; } @HostBinding('style.--ig-size') protected get sizeStyle() { + return `var(--ig-size-${this.size})`; } ``` Another option that [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) provides for you, in order to be able to change the height of the rows in the Tree Grid, is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowheight). So let's see in action how this property affects the Tree Grid layout along with the `--ig-size` CSS variable. Please keep in mind the following: - `--ig-size` CSS variable will have **NO** impact on row height **if there is [rowHeight](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowheight) specified**; - `--ig-size` will **affect all of the rest elements in the Tree Grid**, as it has been described above; And now we can extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowHeight) property to the Tree Grid: + + ```html + + .............. + + ```
## API References
- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html)
## Additional Resources - [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Editing](editing.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md new file mode 100644 index 000000000..ef213b070 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-editing.md @@ -0,0 +1,190 @@ +--- +_tocName: Editing +--- +--- title: Angular Tree Grid Editing - Ignite UI for Angular _description: Get a powerful public API and an easy way to perform data manipulations like creating, updating, or deleting records. See the Angular data grid editing options! _keywords: data manipulation, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/editing --- # Angular Tree Grid Editing Ignite UI for Angular Tree Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The data manipulation phases are: [Cell Editing](cell-editing.md), [Row Editing](row-editing.md), and [Batch Editing](batch-editing.md). The Tree Grid gives you a powerful public API which allows you to customize the way these operations are performed. Additionally, **Cell editing** exposes several default editors based on the column data type, that could be easily customized via [igxCellEditor directive](cell-editing.md#cell-editing-templates) or [igxRow directives](row-editing.md#customizing-row-editing-overlay). ## Setup In order to specify which edit mode should be enabled, the Tree Grid exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable). Property **editable** enables you to specify the following options: - **false** - the editing for the corresponding column will be disabled; /default value/ - **true** - the editing for the corresponding column will be enabled; >Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the Tree Grid. Property **rowEditable** enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled; /default value/ - **true** - the row editing in the corresponding grid will be enabled; In the Tree Grid if you set rowEditable property to true, and editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the _primary key_. **Batch editing** in the grid can be enabled for both **cell editing** and **row editing** modes. In order to set up batch editing it is necessary to provide to the grid a _TransactionService_. - _Cell and Batch Editing_ - in this scenario every singe modification of each cell is preserved separately and undo/ redo operations are available on cell level; - _Row and Batch Editing_ - in this scenario the modifications are preserved on row level so undo/ redo operations will not be working for each cell that is modified but for the bunch of cell from each row. ### Editing Templates + + If you want to use a data type specific _edit templates_, you should specify the column [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) property. So let's now see what are the default templates for each type: - For `string` data type, default template is using [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - For `number` data type, default template is using [igxInput](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0. - For `date` data type, default template is using [igxDatePicker](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - For `dateTime` data type, default template is using [IgxDateTimeEditor directive](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html). This editor will give you a mask directions for the input elements part of the DateTime object. - For `date` data type, default template is using [IgxDatePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html). - For `time` - data type, default template is using [IgxTimePicker component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtimepickercomponent.html). - For `boolean` data type, default template is using [igxCheckbox](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - For `currency` data type, default template is using [IgxInputGroup](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) with prefix/suffix configuration based on application or grid locale settings. - For `percent` data type, default template is using [IgxInputGroup](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) with suffix element that shows a preview of the edited value in percents. - For custom templates you can see [Cell Editing topic](cell-editing.md#cell-editing-templates) All available column data types could be found in the official [Column types topic](column-types.md#default-template). #### Default template editors of date-time columns The template editors of `date`, `dateTime` and `time` column data types use a default input format as per the `IgxGrid`'s [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale). In case the [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html#pipeArgs) object `format` property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only. If the editors input format should be explicitly set, the [`editorOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/columntype.html#editorOptions) object of type [`IColumnEditorOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icolumneditoroptions.html) can be leveraged. It accepts a `dateTimeFormat` property that is used as input format for the editors of `date`, `dateTime` and `time` column data types. ```typescript const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', } ``` ```html ``` ### Event arguments and sequence The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.md) and [**Cell Editing**](cell-editing.md) lifecycle - when starting, committing or canceling the editing action. + + | Event | Description | Arguments | Cancellable | |-------|-------------|-----------|-------------| | [`rowEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEditEnter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`cellEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#celleditdone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igrideditdoneeventargs.html) | `false` | | [`cellEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | | [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEdit) | If `rowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | [IGridEditEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `true` | | [`rowEditDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | | [`rowEditExit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridediteventargs.html) | `false` | ### Event cancellation - `RowEditEnter` - Neither Row nor Cell will enter edit mode. - `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed Cell/Row edit, hitting **Done** button or **Enter** won't commit the value or row transaction. Cell editing and Row editing won't be closed until **Cancel** button is clicked. - `RowEdit` - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes. The following sample demonstrates the editing execution sequence in action: ```typescript +import { Component, ElementRef, Renderer2, ViewChild, inject } from '@angular/core'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tgrid-editing-lifecycle', + templateUrl: 'tgrid-editing-lifecycle.component.html', + styleUrls: ['tgrid-editing-lifecycle.component.scss'], + imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxButtonDirective, IgxIconComponent] +}) +export class TGridEditingLifecycleComponent { + private renderer = inject(Renderer2); + + @ViewChild('logger') + public logger: ElementRef; + + public $rowEditEnter = false; + public $cellEditEnter = false; + public $cellEdit = false; + public $rowEdit = false; + public data; + + public constructor() { + this.data = generateEmployeeFlatData(); + } + + public rowEditEnter(evt) { + evt.cancel = this.$rowEditEnter; + this.logAnEvent(`=> 'rowEditEnter' with 'RowID':` + evt.rowID, evt.cancel); + } + public cellEditEnter(evt) { + evt.cancel = this.$cellEditEnter; + this.logAnEvent(`=> 'cellEditEnter' with 'value':` + evt.oldValue, evt.cancel); + } + public cellEdit(evt) { + evt.cancel = this.$cellEdit; + this.logAnEvent(`=> 'cellEdit' with 'newValue':` + evt.newValue, evt.cancel); + } + public cellEditDone() { + this.logAnEvent(`=> 'cellEditDone'`); + } + public cellEditExit() { + this.logAnEvent(`=> 'cellEditExit'`); + } + public rowEdit(evt) { + evt.cancel = this.$rowEdit; + this.logAnEvent(`=> 'rowEdit'`, evt.cancel); + } + public rowEditDone() { + this.logAnEvent(`=> 'rowEditDone'`); + } + public rowEditExit() { + this.logAnEvent(`=> 'rowEditExit' << End of cycle >>`); + } + + public clearLog() { + const elements = this.logger.nativeElement.querySelectorAll('p'); + for (let index = 0; index < elements.length; index++) { + this.renderer.removeChild(this.logger.nativeElement, elements[index]); + } + } + + private logAnEvent(msg: string, canceled?: boolean) { + const createElem = this.renderer.createElement('p'); + + if (canceled) { + msg = msg.concat(': has been canceled '); + } + + const text = this.renderer.createText(msg); + this.renderer.appendChild(createElem, text); + const container = this.logger.nativeElement; + this.renderer.insertBefore(container, createElem, container.children[0]); + } +} +``` +```html +
+ cancel rowEditEnter + cancel cellEditEnter + cancel cellEdit + cancel rowEdit +
+
+
+
+ + + + + + +
+
+
+
+
+
+ Events execution sequence + +
+
+
+
+
+
+
+``` +```scss +:host { + width: 100%; +} + +.switches { + margin-top: 12px; + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-around; +} + +.sample-wrapper { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.grid-wrapper { + width: 60%; + margin: 8px; +} +.log-wrapper { + width: 35%; +} + +.clearBtn { + top: 3px; + margin-left: 20px; +} +.selected-data-area{ + overflow-y: auto; + max-height: 550px; + width: 100%; + height: 100%; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); + margin-top: 8px; +} + +.logContainer { + padding: 0.2rem 0.4rem; +} + +.highlight { + text-align: center; + margin-bottom: 0.4rem; +} +``` ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: | Tree Grid | Filtering | Sorting | Paging | Moving | Pinning | Hiding | GroupBy | Resizing | Escape | Enter | F2 | Tab | Cell Click | Add new row/Delete/Edit | | ----------------- |:---------:|:-------:|:------:|:------:|:-------:|:------:|:-------:|:--------:|:------:|:-----:|:--:|:---:|:----------:|:-----------------------:| | Keep edit mode | | | | | | | | ✔ | | | | | | | | Exit edit mode |✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | | Commit | | | | | | | | | | ✔ | ✔ | ✔ | ✔ | ✔ | | Discard | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |✔ | | ✔ | | | | | | As seen from the table, all interactions, except resizing a column, will end the editing and will discard the new values. Should the new value be committed, this can be done by the developer in the corresponding feature "-ing" event. Example how to commit new values, if user tries to sort the column while a cell/row is in edit mode: ```html ... ``` ```typescript public onSorting(event: ISortingEventArgs) { + this.grid.endEdit(true); + // (event.owner as IgxGridComponent).endEdit(true); } ``` ## API References - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) _ [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxInputDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) - [IgxDatePickerComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html) - [IgxDatePickerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-date-picker-theme) - [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) - [IgxCheckboxComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme) - [IgxOverlay](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Column Data Types](column-types.md#default-template) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) * [Searching](search.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md new file mode 100644 index 000000000..355419c98 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-excel-style-filtering.md @@ -0,0 +1,1000 @@ +--- +_tocName: Excel Style Filtering +_premium: true +--- +--- title: Excel Style Filtering in Angular Tree Grid - Ignite UI for Angular _description: Learn how to configure Excel filtering in Angular Tree Grid. You can enable/disable various options and customize the Excel style filter menu the way you want. _keywords: excel like filter, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/excel-style-filtering --- # Excel Filtering in Angular Tree Grid The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Tree Grid. ## Angular Tree Grid Excel Style Filtering Example ```typescript +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { TreeGridFilteringStrategy } from 'igniteui-angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-excel-style-filtering-sample-1', + styleUrls: ['./tree-grid-excel-style-filtering-sample-1.component.scss'], + templateUrl: 'tree-grid-excel-style-filtering-sample-1.component.html', + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridExcelStyleFilteringSample1Component implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + public filterStrategy = new TreeGridFilteringStrategy(['ID', 'Name']); + + public size = 'large'; + public sizes: any[]; + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + this.sizes = [ + { + label: 'small', + selected: this.size === 'small', + togglable: true + }, + { + label: 'medium', + selected: this.size === 'medium', + togglable: true + }, + { + label: 'large', + selected: this.size === 'large', + togglable: true + } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event: any) { + this.size = this.sizes[event.index].label; + this.treegrid1.reflow(); + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } +} +``` +```html +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.density-chooser { + margin-bottom: 16px; +} + +igx-buttongroup{ + display: block; + width: 500px; +} +```
## Usage To turn on the grid excel filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowFiltering) should be set to `true` and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterMode) should be set to `excelStyleFilter`. ```html ``` ## Interactions In order to open the filter menu for a particular column, the Angular filter icon in the header should be clicked. Additionally, you can use the `Ctrl + Shift + L` combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on. If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press `Enter`. The filtering applied through the list items creates filter expressions with `equals` operator and the logic operator between the expressions is [`OR`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#or). If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option `Add current selection to filter`. If you want to clear the filter, you can check the `Select All` option and then click the Apply button. To apply a filter with different expressions, you can click the **Text filter**, which will open a sub menu with all available filter operators for the particular column. Selecting one of them will open the custom filter dialog, where you can add as many expressions as you want with different filter and logic operators. There is also a clear button, which can clear the filter.
## Configure Menu Features Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: [`sortable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortable), [`selected`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selected), [`disablePinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disablePinning), [`disableHiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#disableHiding). ```html + + + + + + + + + + Delivered + Undelivered + + ```
In the sample below 'Order Product', 'Category' and 'Units' columns have all three features enabled, 'Price' have all three disabled, 'Order Date' and 'Delivered' have only pinning and hiding.
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-excel-style-filtering-sample-2', + styleUrls: ['./tree-grid-excel-style-filtering-sample-2.component.scss'], + templateUrl: 'tree-grid-excel-style-filtering-sample-2.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridExcelStyleFilteringSample2Component implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} +```
## Templates If you want to further customize the Excel style filter menu without disabling the column features you could use custom templates. The Excel Style filter menu provides two directives for templating: - `IgxExcelStyleColumnOperationsTemplateDirective` - re-templates the area with all column operations like sorting, pinning, etc. - `IgxExcelStyleFilterOperationsTemplateDirective` - re-templates the area with all filter specific operations. You could either re-template only one of those areas or both of them. You could put any custom content inside those directives or you could use any of our built-in Excel style filtering components. The following code demonstrates how to define a custom Excel style filter menu using the [`igx-excel-style-header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleheadercomponent.html), [`igx-excel-style-sorting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesortingcomponent.html) and [`igx-excel-style-search`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesearchcomponent.html) components. ```html + + + + + + + + + + + + + + + ... ``` You could also re-template the Excel style filtering icon in the column header using the `igxExcelStyleHeaderIcon` directive: ```html + + filter_alt + ```
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleSearchComponent, IgxExcelStyleSortingComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-excel-style-filtering-sample-3', + styleUrls: ['./tree-grid-excel-style-filtering-sample-3.component.scss'], + templateUrl: 'tree-grid-excel-style-filtering-sample-3.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxExcelStyleHeaderIconDirective, IgxIconComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridExcelStyleFilteringSample3Component implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } +} +``` +```html +
+ + + + + + + + + + filter_alt + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} +``` Here is the full list of Excel style filtering components that you could use: - [`igx-excel-style-header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleheadercomponent.html) - [`igx-excel-style-sorting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesortingcomponent.html) - [`igx-excel-style-moving`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylemovingcomponent.html) - [`igx-excel-style-pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylepinningcomponent.html) - [`igx-excel-style-hiding`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylehidingcomponent.html) - [`igx-excel-style-selecting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleselectingcomponent.html) - [`igx-excel-style-clear-filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleclearfilterscomponent.html) - [`igx-excel-style-conditional-filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstyleconditionalfiltercomponent.html) - [`igx-excel-style-search`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelstylesearchcomponent.html)
## Unique Column Values Strategy The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the [`Tree Grid Remote Data Operations`](remote-data-operations.md#unique-column-values-strategy) topic. ## Formatted Values Filtering Strategy By default, the Tree Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { In order to do that you can use the [`FormattedValuesFilteringStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/formattedvaluesfilteringstrategy.html). } In order to do that you can use the [`TreeGridFormattedValuesFilteringStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/treegridformattedvaluesfilteringstrategy.html). The following sample demonstrates how to format the numeric values of a column as strings and filter the Tree Grid based on the string values: ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { TreeGridFormattedValuesFilteringStrategy } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-formatted-filtering-strategy', + styleUrls: ['./tree-grid-formatted-filtering-strategy.component.scss'], + templateUrl: 'tree-grid-formatted-filtering-strategy.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridFormattedFilteringStrategyComponent implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + public filterStrategy = new TreeGridFormattedValuesFilteringStrategy(); + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public formatPrice(value: number) { + return value ? value < 3 ? 'low' : value > 5 ? 'high' : 'medium' : ''; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +``` >[!NOTE] >The formatted values filtering strategy won't work correctly if you have more than one column bound to the same field from your data and one of the columns has a formatter. ## Tree Filter View By default, the Excel Style Filtering dialog displays the items in a list view. In order to display them in a tree view you can use the [`TreeGridFilteringStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/treegridfilteringstrategy.html) and specify an array of column field names. Filter items will be displayed in a tree view for the specified columns and in a list view for all other columns. The following sample demonstrates how to show filter items in a tree view for the first column: ```typescript +import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { TreeGridFilteringStrategy } from 'igniteui-angular/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridExcelStyleFilteringComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; + +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-tree-grid-tree-filter-view', + styleUrls: ['./tree-grid-tree-filter-view.component.scss'], + templateUrl: 'tree-grid-tree-filter-view.component.html', + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridTreeFilterViewComponent implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + public filterStrategy = new TreeGridFilteringStrategy(['Name']); + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } +} +``` +```html +
+
+ + + @for (c of tGrid.columns; track c) { + + {{ c.field }} + + } + + + + +
+ + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; + display: flex; + column-gap: 16px; +} +``` ## External Excel Style filtering As you see at the demos above the default appearance of the Excel Style filtering dialog is inside the Tree Grid. So this dialog is only visible when configuring the filters. There is a way to make that dialog stay always visible - it can be used outside of the grid as a standalone component. In the demo below, the Excel style filtering is declared separately of the Tree Grid. ### Demo ```typescript +import { Component, ViewChild, ChangeDetectionStrategy, OnInit } from '@angular/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridExcelStyleFilteringComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; + +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-tree-grid-external-excel-style-filtering', + templateUrl: './tree-grid-external-excel-style-filtering.component.html', + styleUrls: ['./tree-grid-external-excel-style-filtering.component.scss'], + imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class TreeGridExternalExcelStyleFilteringComponent implements OnInit { + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { } + + public ngOnInit() { + this.data = ORDERS_DATA; + } +} +``` +```html +
+
+ + + @for (c of tGrid.columns; track c) { + + {{ c.field }} + + } + + + + +
+ + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + display: flex; + flex-flow: row; + height: 650px; + margin: 15px; + justify-content: center; + column-gap: 5px; +} + +.flex-column { + display: flex; + flex-flow: column; + height: 650px; + margin-left: 1px; +} + +.igSelect { + margin-left: 1px; +} +```
### Usage In order to configure the Excel style filtering component, you should set its [`column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridexcelstylefilteringcomponent.html#column) property to one of the Tree Grid's columns. In the sample above, we have bound the [`column`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridexcelstylefilteringcomponent.html#column) property to the value of an IgxSelectComponent that displays the Tree Grid's columns. ```html + + + {{ c.field }} + ``` ## External Outlet The Tree Grid's [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) creates separate stacking context for each grid in the DOM. This ensures that all descendant elements of the grid will render as intended, without overlapping one another. However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same `z-index` (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the [`outlet`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#outlet) property to an external outlet directive which allows the overlay elements to always appear on top. ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent } from 'igniteui-angular/grids/core'; +import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-external-outlet', + styleUrls: ['./tree-grid-external-outlet-sample.component.scss'], + templateUrl: 'tree-grid-external-outlet-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxOverlayOutletDirective] +}) + +export class TreeGridExternalOutletComponent implements OnInit { + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + +
+ +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} +``` ## Styling To get started with styling the Excel Style Filtering dialog, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` The Excel Style Filtering dialog takes its background color from the grid's theme, using the `filtering-row-background` parameter. Additionally, there are specific Excel Style Filtering parameters available for customizing the text color of elements within the dialog. To change the overall style of the dialog, you need to create a custom theme. ```scss $custom-grid: grid-theme( + $filtering-row-background: #ffcd0f, + $excel-filtering-header-foreground: #292826, + $excel-filtering-subheader-foreground: #292826, + $excel-filtering-actions-foreground: #006400, + $excel-filtering-actions-hover-foreground: #ffcd0f, + $excel-filtering-actions-disabled-foreground: #9e9e9e ); ``` We obviously have a lot more components inside the excel like filtering dialog, such as buttons, checkboxes, a list and even a drop-down. In order to style them, we need to create a separate theme for each one: ```scss $custom-button: contained-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); $flat-custom-button: flat-button-theme( + $foreground: #ffcd0f, ); $custom-checkbox: checkbox-theme( + $empty-color: #292826, + $fill-color: #292826, + $tick-color: #ffcd0f, + $label-color: #292826 ); $custom-drop-down: drop-down-theme( + $background-color: #ffcd0f, + $item-text-color: #292826, + $hover-item-background: #292826, + $hover-item-text-color: #ffcd0f ); $custom-input-group: input-group-theme( + $box-background: #ffcd0f, + $idle-text-color: #292826, + $focused-text-color: #292826, + $filled-text-color: #292826 ); $custom-list: list-theme( + $background: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed some of the parameters for the listed components, but the [`button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme), [`checkbox-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-checkbox-theme), [`drop-down-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme), [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme), [`list-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-list-theme) themes provide way more parameters to control their respective styling. The last step is to **include** each component’s custom theme. We will also set the color property for the input's placeholder. ```scss :host { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] >We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss :host { + ::ng-deep { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($flat-custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } + } } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-excel-style-filtering-style', + styleUrls: ['./tree-grid-excel-style-filtering-style.component.scss'], + templateUrl: 'tree-grid-excel-style-filtering-style.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class TreeGridExcelStyleFilteringStyleComponent implements OnInit { + + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { + } + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public formatDate(val) { + if (val !== 'Select All') { + return new Intl.DateTimeFormat('en-US').format(val); + } else { + return val; + } + } + + public formatCurrency(val: string) { + return parseInt(val, 10).toFixed(2); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$black: #292826; + +$custom-grid: grid-theme( + $filtering-row-background: $yellow +); + +$custom-flat-button: flat-button-theme( + $background: $yellow, + $foreground: $black, + $hover-background: $black, + $hover-foreground: $yellow +); + +$custom-contained-button: contained-button-theme( + $background: $black, + $foreground: $yellow, + $hover-background: $black, + $hover-foreground: $yellow +); + +$custom-button-group: button-group-theme( + $item-background: $yellow, + $item-text-color: $black, + $item-hover-background: $black, + $item-hover-text-color: $yellow +); + +$custom-input-group: input-group-theme( + $box-background: $yellow, + $idle-text-color: $black, + $focused-text-color: $black, + $filled-text-color: $black +); + +$custom-list: list-theme( + $background: $yellow +); + +$custom-checkbox: checkbox-theme( + $empty-color: $black, + $fill-color: $black, + $tick-color: $yellow, + $label-color: $black +); + +$custom-drop-down: drop-down-theme( + $background-color: $yellow, + $selected-item-background: lighten($black, 10%), + $selected-focus-item-background: lighten($black, 15%), + $item-text-color: $black, + $hover-item-background: $black, + $hover-item-text-color: $yellow +); + +:host { + ::ng-deep { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + @include tokens($custom-input-group); + @include tokens($custom-checkbox); + @include tokens($custom-list); + @include tokens($custom-flat-button); + @include tokens($custom-button-group); + + .igx-excel-filter__apply { + @include tokens($custom-contained-button); + } + } +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`.
## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md new file mode 100644 index 000000000..0429ea379 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-export-excel.md @@ -0,0 +1,444 @@ +--- +_tocName: Export services +_premium: true +--- +--- title: Angular Tree Grid Export to Excel and PDF - Ignite UI for Angular _description: With Ignite UI Excel and PDF Exporters you can make client exports more convenient & simpler. These formats allow features like filtering, sorting, etc _keywords: data export, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/export-excel --- # Angular Tree Grid Export to Excel and PDF Service @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {

Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxTreeGrid in seconds. Inject the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the respective [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export)/[`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#export) method, and the component handles the rest—from honoring filters and sorting to shaping the output format.

} @@if (igxName === 'IgxHierarchicalGrid' || igxName === 'IgxPivotGrid') {

The Ignite UI Excel and PDF Exporter services treat the IgxTreeGrid exactly like your users see it on screen—complete with hierarchical layouts and summaries. Inject the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the appropriate [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export)/[`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html#export) method, and let the service generate the final document.

} The sections below walk through setup, usage patterns, and tips for tailoring each export so that your users receive data that is ready to consume, no matter which file type they prefer.
## Angular Excel Exporter Example This live example demonstrates the standard Excel and PDF export workflow for the Tree Grid—bound data, two export buttons (Excel and PDF), and the resulting `.xlsx` and `.pdf` files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../../../tree-grid/data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-excel-export-tree-grid-sample', + styleUrls: ['./excel-export-tree-grid-sample.component.scss'], + templateUrl: './excel-export-tree-grid-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class TreeGridExcelExportSample1Component implements OnInit { + + @ViewChild('igxTreeGrid1', { static: true }) + public igxTreeGrid1: IgxTreeGridComponent; + + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + + constructor() { } + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + /* + The following code demonstrates how to attach event handlers to exporter specific events + and also how to customize the column export process. + this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } + }); + this.excelExportService.rowExporting.subscribe((args: IRowExportingEventArgs) => { + }); + this.excelExportService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { + }); + */ + +} +``` +```html +

+ + + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +

+``` +```scss +.grid__wrapper { + padding-top: 16px; + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; +} + +.exportButton { + margin-top: 5px; +} +```
## Exporting Tree Grid's Data Getting the exporters into your project takes only a few lines of code. Follow these steps and you will have reusable services that can create either Excel or PDF outputs on demand: 1. Import the [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) and/or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) in your root module. 2. Inject whichever exporter you need and call its `export` method when the user requests a file. ```typescript // component.ts import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core'; // import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package ... private excelExportService = inject(IgxExcelExporterService); private pdfExportService = inject(IgxPdfExporterService); ``` > [!Note] > In v12.2.1 and later, `IgxExcelExporterService` is provided in root and does not need to be registered in the `providers` array. The PDF exporter was introduced in later versions and is available as an injectable service without any additional configuration. To initiate an export process you may use the handler of a button in your component's template. ```html ``` You may access either exporter service by defining it as a constructor dependency and letting Angular provide an instance. Calling the shared [`export`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#export) method initiates the download while automatically respecting the component state, selected rows, and formatting rules. Here is the code which will execute both export processes in the component's typescript file: ```typescript // component.ts import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent; private excelExportService = inject(IgxExcelExporterService); private pdfExportService = inject(IgxPdfExporterService); public exportButtonHandler() { + this.excelExportService.export(this.treeGrid, new IgxExcelExporterOptions('ExportedDataFile')); } public exportPdfButtonHandler() { + this.pdfExportService.export(this.treeGrid, new IgxPdfExporterOptions('ExportedDataFile')); } ``` Once wired up, pressing the respective buttons downloads files named `ExportedDataFile.xlsx` or `ExportedDataFile.pdf` populated with the current Tree Grid view. You can swap in customer-friendly file names, append timestamps, or surface a success toast so users know their export has completed. ## Export All Data Large, remote datasets often load page-by-page or on demand, which means the Tree Grid might not have every record available when the user clicks **Export**. To guarantee a complete workbook, hydrate the exporter with the full data collection before starting the process. The `exportData` helper bypasses the component and works directly against plain objects, so you can reuse the same routine for scheduled exports or admin-only downloads. ```ts public exportButtonHandler() { + this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile')); } ``` > [!TIP] > When offering PDF downloads for remote data, consider fetching the complete dataset first and then calling `export` so the document mirrors the user's expectations. @@if (igxName === 'IgxGrid') { ## Export Grouped Data Grouping is a popular way to summarize customer segments, product categories, or financial periods before sharing the results. The exporter preserves the exact grouping hierarchy that is currently applied to the Tree Grid, so your recipients see the same breakdown you do in the browser. Simply group by one or more columns and trigger the export—no extra configuration is required. If you need flat data in the exported file, clear the grouping prior to calling `export` or handle the `rowExporting` event to reshape the output. Example: ```typescript +import { Component, OnInit, ViewChild, inject } from '@angular/core'; +import { GridColumnDataType, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { INVOICE_DATA } from '../data/invoiceData'; + + +@Component({ + selector: 'app-excel-export-sample-1', + styleUrls: ['./excel-export-sample-1.component.scss'], + templateUrl: './excel-export-sample-1.component.html', + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent] +}) +export class ExcelExportSample1Component implements OnInit { + private excelExportService = inject(IgxExcelExporterService); + + @ViewChild('igxGrid1', { static: true }) public igxGrid1: IgxGridComponent; + + public data = []; + public groupExpressions: ISortingExpression[]; + public columns: { dataType: GridColumnDataType, field: string, width: string, groupable: boolean, hidden?: boolean }[] = [ + { dataType: GridColumnDataType.String, field: 'ShipCountry', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipCity', width: '150', groupable: true }, + { dataType: GridColumnDataType.String, field: 'ShipAddress', width: '150', groupable: true}, + { dataType: GridColumnDataType.String, field: 'PostalCode', width: '150', groupable: true }, + { dataType: GridColumnDataType.Date, field: 'OrderDate', width: '150', groupable: true }, + { dataType: GridColumnDataType.Number, field: 'Quantity', width: '150', groupable: true } + ]; + + public ngOnInit(): void { + this.data = INVOICE_DATA; + this.groupExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'ShipCountry' }, + { dir: SortingDirection.Asc, fieldName: 'ShipCity' } + ]; + } + + /* + The following code demonstrates how to attach event handlers to exporter specific events + and also how to customize the column export process. + this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } + }); + this.excelExportService.rowExporting.subscribe((args: IRowExportingEventArgs) => { + }); + this.excelExportService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { + }); + */ +} +``` +```html +

+ + + + + + + + + @for (c of columns; track c) { + + + } + +

+``` +```scss +.grid__wrapper { + padding-top: 16px; + width: 98% !important; + margin: 0 auto; + padding-left: 1%; + padding-right: 1%; +} + +.exportButton { + margin-top: 5px; +} +``` } ## Export Multi Column Headers Grid Dashboards often rely on [multi-column headers](multi-column-headers.md) to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the [exporter option](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html) [ignoreMultiColumnHeaders](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html#ignoremulticolumnheaders) flag to `true` and the output will include only the leaf headers. > [!NOTE] > The exported Tree Grid will not be formatted as a table, since Excel tables do not support multiple row headers. @@if (igxName === 'IgxHierarchicalGrid') { > [!NOTE] > The exported expansion state of the multi-column headers in the row islands will always be in its initial state. } @@if (igxName === 'IgxGrid') { ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { DATA } from '../../data/customers'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-multi-column-headers-export', + styleUrls: ['multi-column-headers-export.component.scss'], + templateUrl: 'multi-column-headers-export.component.html', + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class GridMultiColumnHeadersExportComponent { + + @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + public data = DATA; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` } @@if (igxName === 'IgxTreeGrid') { ```typescript +import { Component } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-tree-grid-multi-column-headers-export-sample', + styleUrls: ['./tree-grid-multi-column-headers-export.component.scss'], + templateUrl: './tree-grid-multi-column-headers-export.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class TreeGridMultiColumnHeadersExportComponent { + public data = generateEmployeeDetailedFlatData(); + public selectionMode: GridSelectionMode = 'none'; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` } @@if (igxName === 'IgxHierarchicalGrid') { ```typescript +import { Component, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { HIERARCHICAL_DATA } from '../../data/hierarchical-data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-hierarchical-grid-multi-column-export', + styleUrls: ['./hierarchical-grid-multi-column-export.component.scss'], + templateUrl: 'hierarchical-grid-multi-column-export.component.html', + imports: [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnGroupComponent, IgxColumnComponent, IgxRowIslandComponent] +}) + +export class HGridMultiColumnHeadersExportComponent implements OnInit { + public localdata = []; + public exportHeaders = true; + + public exportStarted(args: IgxExporterEvent) { + args.options.ignoreMultiColumnHeaders = !this.exportHeaders; + } + + public ngOnInit(): void { + this.localdata = HIERARCHICAL_DATA; + } +} +``` +```html +
+ + + + Export multi-column headers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 16px; +} +``` } ## Export Grid with Frozen Column Headers Long sheets can become hard to read once the header row scrolls out of view. Enabling frozen headers keeps key context—like "Customer" or "Invoice Total"—visible at the top of the worksheet while your users explore the data further down. Toggle the [exporter option](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html) [freezeHeaders](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexporteroptionsbase.html#freezeHeaders) flag to `true` before calling `export` and the service will handle the rest. ```typescript public exportButtonHandler() { + const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile'); + exporterOptions.freezeHeaders = true; + this.excelExportService.export(this.grid, exporterOptions); } ``` PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file. ## Customizing the Exported Content Most teams tailor exports before sharing them: hiding internal-use columns, renaming headers, or skipping rows that only apply to administrators. Both exporter services expose events that let you intercept every row or column and decide how it should appear in the file. Subscribe to [`columnExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#columnexporting) and [`rowExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html#rowexporting) to make last-minute adjustments—set `cancel = true` to omit an item or tweak the event arguments to update values on the fly. The following example will exclude a column from the export if its header is "Age" and if its index is 1: ```typescript // component.ts this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { + if (args.header == 'Age' && args.columnIndex == 1) { + args.cancel = true; + } }); this.excelExportService.export(this.treeGrid, new IgxExcelExporterOptions('ExportedDataFile')); ``` When you are exporting data from the Tree Grid component, the services automatically respect sorting, filtering, summaries, and hidden columns so the file reflects what the user currently sees. Need the full dataset instead? Toggle the relevant flags on [`IgxExcelExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) or [`IgxPdfExporterOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) to include filtered rows, hidden columns, or custom metadata. ## Known Limitations Before shipping exports to production users, review the following platform constraints so you can set expectations and provide helpful guidance within your app. |Limitation|Description| |--- |--- | |Hierarchy levels|The exporter supports up to 8 levels of hierarchy. If you need deeper structures, flatten the data or export subsets to keep the file readable.| |Max worksheet size|The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns. Consider slicing extremely large exports by date range or segment to stay within these limits.| |Cell Styling|The Excel exporter service does not support exporting a custom style applied directly to a cell component. In such scenarios we recommend using the richer [Excel Library](../excel-library.md) for fine-grained formatting.| |Wide PDF layouts|Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.| ## API References The Excel and PDF Exporter services have a few more APIs to explore, which are listed below. - [IgxExcelExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html) - [IgxExcelExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporteroptions.html) - [IgxPdfExporterService API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html) - [IgxPdfExporterOptions API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporteroptions.html) Additional components that were used: - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
## Additional Resources
Our community is active and always welcoming to new ideas. The links below connect you with samples, community answers, and the engineering team. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md new file mode 100644 index 000000000..e16f27e9c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-filtering.md @@ -0,0 +1,660 @@ +--- +_tocName: Filtering +--- +--- title: Angular Tree Grid Filter - Ignite UI for Angular _description: Start using angular filter to return specific data with Ignite UI for Angular. Check the advanced filtering options, including data-type Excel-style filtering. _keywords: angular filter, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/filtering --- # Angular Tree Grid Filtering IgniteUI for [Angular Tree Grid component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) provides three different filtering types - Quick filtering, [Excel style filtering](excel-style-filtering.md) and [Advanced filtering](advanced-filtering.md) which enable you to display only the records that meet specified criteria. The Material UI grid component in Ignite UI provides angular filter capabilities and extensive filtering API through the Data Container to which the Tree Grid is bound. ## Angular Tree Grid Filtering Example The sample below demonstrates Tree Grid's **Quick filtering** user experience. API [filter()](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filter) method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-filtering-sample', + styleUrls: ['./tree-grid-filtering-sample.component.scss'], + templateUrl: 'tree-grid-filtering-sample.component.html', + imports: [IgxInputGroupComponent, IgxInputDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridFilteringSampleComponent implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public filter(element: EventTarget) { + const value = (element as HTMLInputElement).value; + if (value) { + this.treegrid1.filter('Name', value, IgxStringFilteringOperand.instance().condition('contains')); + } else { + this.treegrid1.clearFilter('Name'); + } + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } +} +``` +```html +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} +```
## Setup In order to specify if filtering is enabled and which filtering mode should be used, the Tree Grid exposes the following boolean properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable). Property **[allowFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowfiltering)** enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled; /default value/ - **true** - the filtering for the corresponding grid will be enabled; Property **[allowAdvancedFiltering](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowAdvancedFiltering)** enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled; /default value/ - **true** - the advanced filtering for the corresponding grid will be enabled; Property **[filterMode](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterMode)** enables you to specify the following options: - **quickFilter** - a simplistic filtering UI; /default value/ - **excelStyleFilter** - an Excel-like filtering UI; Property **[filterable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable)** enables you to specify the following options: - **true** - the filtering for the corresponding column will be enabled; /default value/ - **false** - the filtering for the corresponding column will be disabled; ```html + + ``` To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowAdvancedFiltering) input properties to `true`. ```html ``` >[!NOTE] >You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the Tree Grid. Both filtering user interfaces will work independently of one another. The final filtered result in the Tree Grid is the intersection between the results of the two filters. ## Interaction In order to open the filter row for a particular column, the 'Filter' chip below its header should be clicked. To add conditions you should choose filter operand using the dropdown on the left of the input and enter value. For `number` and `date` columns 'Equals' is selected by default, for `string` - 'Contains' and for `boolean` - 'All'. Pressing 'Enter' confirms the condition and you are now able to add another one. There is a dropdown, between 'condition' chips, which determines the logical operator between them, 'AND' is selected by default. To remove a condition you can click the 'X' button of the chip, and to edit it you should select the chip and the input will be populated with the chip's data. While filter row is opened you can click on any filterable column's header in order to select it and to be able to add filter conditions for it. While some filtering conditions have been applied to a column, and the filter row is closed, you can either remove the conditions by clicking the chip's close button, or you can open the filter row by selecting any of the chips. When there is not enough space to show all the conditions, a filter icon is shown with a badge that indicates how many more conditions there are. It can also be clicked in order to open the filter row. ## Usage There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The Tree Grid currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) of the column, the correct set of [**filtering operations**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) is loaded inside the filter UI dropdown. Additionally, you can set the [`ignoreCase`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html) and the initial [`condition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html#condition) properties. Filtering feature is enabled for the Tree Grid component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#allowFiltering) input to `true`. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterMode) is `quickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the [`filterable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filterable) input to `false`. ```html + + + ``` > [!NOTE] > If values of type `string` are used by a column of dataType `Date`, the Tree Grid won't parse them to `Date` objects and using filtering conditions won't be possible. If you want to use `string` objects, additional logic should be implemented on the application level, in order to parse the values to `Date` objects. You can filter any column or a combination of columns through the Tree Grid API. The Tree Grid exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterglobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#clearFilter). - [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filter) - filter a single column or a combination of columns. There are five filtering operand classes exposed: - [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html): this is a base filtering operand, which can be inherited when defining custom filtering conditions. - [`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html) defines all default filtering conditions for `boolean` type. - [`IgxNumberFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumberfilteringoperand.html) defines all default filtering conditions for `numeric` type. - [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html) defines all default filtering conditions for `string` type. - [`IgxDateFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatefilteringoperand.html) defines all default filtering conditions for `Date` type. ```typescript // Single column filtering // Filter the `Order Product` column for values which `contains` the `myproduct` substring, ignoring case this.treeGrid.filter('Order Product', 'myproduct', IgxStringFilteringOperand.instance().condition('contains'), true); ``` The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions. > [!NOTE] > The filtering operation **DOES NOT** change the underlying data source of the Tree Grid. ```typescript // Multi column filtering const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName'); const productExpression = { + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'Order Product', + ignoreCase: true, + searchVal: 'ch' }; productFilteringExpressionsTree.filteringOperands.push(productExpression); gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); const priceFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'Price'); const priceExpression = { + condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), + fieldName: 'UnitPrice', + ignoreCase: true, + searchVal: 20 }; priceFilteringExpressionsTree.filteringOperands.push(priceExpression); gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree); this.treeGrid.filteringExpressionsTree = gridFilteringExpressionsTree; ``` - [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Tree Grid's columns. ```typescript // Filter all cells for a value which contains `myproduct` this.treeGrid.filteringLogic = FilteringLogic.Or; this.treeGrid.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false); ``` - [`clearFilter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. ```typescript // Remove the filtering state from the ProductName column this.treeGrid.clearFilter('Order Product'); // Clears the filtering state from all columns this.treeGrid.clearFilter(); ``` ## Initial filtered state To set the initial filtering state of the Tree Grid, set the [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filteringExpressionsTree) property to an array of [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html) for each column to be filtered. ```typescript constructor(private cdr: ChangeDetectorRef) { } public ngAfterViewInit() { + const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'Order Product'); + const productExpression = { + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'Order Product', + ignoreCase: true, + searchVal: 'c' + }; + productFilteringExpressionsTree.filteringOperands.push(productExpression); + gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree); + + this.treeGrid.filteringExpressionsTree = gridFilteringExpressionsTree; + this.cdr.detectChanges(); } ``` ### Filtering logic The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filteringlogic) property of the Tree Grid controls how filtering multiple columns will resolve in the Tree Grid. You can change it at any time through the Tree Grid API, or through the Tree Grid input property. ```typescript import { FilteringLogic } from 'igniteui-angular/grids/core'; // import { FilteringLogic } from '@infragistics/igniteui-angular'; for licensed package ... this.treeGrid.filteringLogic = FilteringLogic.OR; ``` The default value of [`AND`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#and) returns only the rows that match all the currently applied filtering expressions. Following the example above, a row will be returned when both the `ProductName` cell value contains `myproduct` and the `Price` cell value is greater than 55. When set to [`OR`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/enums/filteringlogic.html#or), a row will be returned when either the `ProductName` cell value contains `myproduct` or the `Price` cell value is greater than 55.
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ## Remote Filtering The Tree Grid supports remote filtering, which is demonstrated in the [`Tree Grid Remote Data Operations`](remote-data-operations.md) topic.
} ## Custom Filtering Operands You can customize the filtering menu by adding, removing or modifying the filtering operands. By default, the filtering menu contains certain operands based on the column’s data type ([`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html), [`IgxDateFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatefilteringoperand.html), [`IgxNumberFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumberfilteringoperand.html) and [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html)). You can extend these classes or their base class [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) to change the filtering menu items’ behavior. In the sample below, inspect the "Order Product" and "Delivered" columns filters menus. For the "Delivered" column filter, we have limited the number of operands to All, True and False. For the "Order Product" column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands. To do that, extend the [`IgxStringFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxstringfilteringoperand.html) and [`IgxBooleanFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbooleanfilteringoperand.html), modify the operations and their logic, and set the column [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters) input to the new operands. ```typescript // grid-custom-filtering.component.ts export class GridCustomFilteringComponent { + public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance(); + public booleanFilteringOperand = BooleanFilteringOperand.instance(); } export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand { + private constructor() { + super(); + const customOperations = [ + { + iconName: 'contains', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) !== -1; + }, + name: 'Contains (case sensitive)' + }, + { + iconName: 'does_not_contain', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) === -1; + }, + name: 'Does Not Contain (case sensitive)' + } + ]; + + const emptyOperators = [ + // 'Empty' + this.operations[6], + // 'Not Empty' + this.operations[7] + ]; + + this.operations = customOperations.concat(emptyOperators); + } } export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + private constructor() { + super(); + this.operations = [ + // 'All' + this.operations[0], + // 'TRUE' + this.operations[1], + // 'FALSE' + this.operations[2] + ]; + } } ``` ```html + + + + Delivered + Undelivered + + ``` ```typescript +import { Component, OnInit } from '@angular/core'; +import { IFilteringOperation, IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-filtering-custom-sample', + styleUrls: ['./tree-grid-filtering-custom-sample.component.scss'], + templateUrl: './tree-grid-filtering-custom-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class TreeGridFilteringCustomSampleComponent implements OnInit { + public data: any[]; + public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance(); + public booleanFilteringOperand = BooleanFilteringOperand.instance(); + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + public ngOnInit() { + this.data = ORDERS_DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } +} + +export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand { + private constructor() { + super(); + const customOperations: IFilteringOperation[] = [ + { + iconName: 'filter_contains', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) !== -1; + }, + name: 'Contains (case sensitive)' + }, + { + iconName: 'filter_does_not_contain', + isUnary: false, + logic: (target: string, searchVal: string, ignoreCase?: boolean) => { + ignoreCase = false; + const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase); + target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase); + return target.indexOf(search) === -1; + }, + name: 'Does Not Contain (case sensitive)' + } + ]; + + const emptyOperators = [ + // 'Empty' + this.operations[6], + // 'Not Empty' + this.operations[7] + ]; + + this.operations = customOperations.concat(emptyOperators); + } +} + +export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + private constructor() { + super(); + this.operations = [ + // 'All' + this.operations[0], + // 'TRUE' + this.operations[1], + // 'FALSE' + this.operations[2] + ]; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 16px; +} +``` ## Re-templating filter cell You can add a template marked with `igxFilterCellTemplate` in order to retemplate the filter cell. In the sample below, an input is added for the string columns and IgxDatePicker for the date column. When the user types or selects a value, a filter with contains operator for string columns and equals operator for date columns, is applied using grid's public API. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnType, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxPickerClearComponent, IgxPickerToggleComponent, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxFilterCellTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-filtering-template-sample', + styleUrls: ['./tree-grid-filtering-template-sample.component.scss'], + templateUrl: 'tree-grid-filtering-template-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxFilterCellTemplateDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, CurrencyPipe] +}) + +export class TreeGridFilteringTemplateSampleComponent implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + public displayDateFormat = 'M/d/y'; + + private _filterValues = new Map(); + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public getFilterValue(column: ColumnType): any { + return this._filterValues.has(column) ? this._filterValues.get(column) : null; + } + + public onInput(input: any, column: ColumnType) { + this._filterValues.set(column, input.value); + + if (input.value === '') { + this.treegrid1.clearFilter(column.field); + return; + } + + let operand = null; + switch (column.dataType) { + case GridColumnDataType.Number: + operand = IgxNumberFilteringOperand.instance().condition('equals'); + break; + default: + operand = IgxStringFilteringOperand.instance().condition('contains'); + } + this.treegrid1.filter(column.field, + this.transformValue(input.value, column), operand, column.filteringIgnoreCase); + } + + public clearInput(column: ColumnType) { + this._filterValues.delete(column); + this.treegrid1.clearFilter(column.field); + } + + public onKeyDown(event: KeyboardEvent) { + event.stopImmediatePropagation(); + } + + public onClick(inputGroup) { + if (!inputGroup.isFocused) { + inputGroup.input.focus(); + } + } + + public onDateSelected(event, column: ColumnType) { + if (!event) { + this.clearInput(column); + return; + } + + this._filterValues.set(column, event); + this.treegrid1.filter(column.field, event, IgxDateFilteringOperand.instance().condition('equals'), + column.filteringIgnoreCase); + } + + private transformValue(value: any, column: ColumnType): any { + if (column.dataType === GridColumnDataType.Number) { + value = parseFloat(value); + } + + return value; + } +} +``` +```html +
+ + + + + + + + + + + + {{+val | currency}} + + + + + {{+val | currency}} + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + +
+ + + search + + + @if (input.value || input.value === '0') { + + clear + + } + +
+ + +
+ + + search + + @if (picker.value) { + + clear + + } + +
+ +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 16px; + + igx-input-group, + igx-date-picker { + --ig-size: var(--ig-size-small); + } +} + +.gridSample__filter { + width: 200px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.filter-cell { + flex-grow: 1; +} +``` ## Matching Records Only Filtering Strategy By default, after a filtering is applied, the Tree Grid component displays the records matching the criterion that have been set and their parents in a grayed-out fashion to provide additional context. However, in some cases, you may want to display only the records matching particular filtering condition without any trace for their parents. This can be achieved by using the `TreeGridMatchingRecordsOnlyFilteringStrategy`: ```html ``` ```typescript import { TreeGridMatchingRecordsOnlyFilteringStrategy } from "igniteui-angular/grids/core"; ... public matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStrategy(); ``` ## Styling To get started with styling the filtering row, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$filtering-row-text-color`, `$filtering-row-background`, `$filtering-header-text-color` and the `$filtering-header-background` parameters. ```scss $custom-grid: grid-theme( + $filtering-row-text-color: #292826, + $filtering-row-background: #ffcd0f, + $filtering-header-text-color: #292826, + $filtering-header-background: #ffcd0f ); ``` As seen, the `grid-theme` only controls colors for the filtering row and the respective column header that is being filtered. We obviously have a lot more components inside the filtering row, such as an input group, chips, buttons and others. In order to style them, we need to create a separate theme for each one, so let's create a new [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#input-group-theme) and a new [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#flat-button-theme): ```scss $dark-input-group: input-group-theme( + $box-background: #ffcd0f, + $idle-text-color: #292826, + $focused-text-color: #292826, + $filled-text-color: #292826 ); $dark-button: flat-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. In this example we only changed some of the parameters for the input group and the button, but the [`input-group-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) and the [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme) provide way more parameters to control their respective styling. The last step is to **include** the component mixins, each with its respective theme. We will also set the color property for the input's placeholder. ```scss :host { @include tokens($custom-grid); + + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] >We include the created **flat-button-theme** and **input-group-theme** within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss :host { + ::ng-deep { + @include tokens($custom-grid); + + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group) + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } + } } ``` ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-filtering-style', + styleUrls: ['./tree-grid-filtering-style.component.scss'], + templateUrl: './tree-grid-filtering-style.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class TreeGridFilteringStyleComponent implements OnInit { + public data: any[]; + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undeliveredd + } + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$yellow: #ffcd0f; +$bg: #292826; +$gray: #404040; + +$custom-grid: grid-theme( + $filtering-row-text-color: $bg, + $filtering-row-background: $yellow, + $filtering-header-text-color: $bg, + $filtering-header-background: $yellow +); + +$dark-input-group: input-group-theme( + $box-background: $yellow, + $idle-text-color: $bg, + $focused-text-color: $bg, + $filled-text-color: $bg +); + +$dark-button: flat-button-theme( + $background: $yellow, + $foreground: $bg, + $hover-background: $bg, + $hover-foreground: $yellow +); + + +:host { + @include tokens($custom-grid); + + ::ng-deep { + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); + } + } +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## Known Limitations > [!NOTE] > Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox [issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665). ### Breaking Changes in 6.1.0 - IgxTreeGrid `filteringExpressions` property is removed. Use [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filteringexpressionstree) instead. - `filter_multiple` method is removed. Use [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filter) method and [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filteringExpressionsTree) property instead. - The [`filter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filter) method has new signature. It now accepts the following parameters: + - `name` - the name of the column to be filtered. + - `value` - the value to be used for filtering. + - `conditionOrExpressionTree` (optional) - this parameter accepts object of type [`IFilteringOperation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) or [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html). If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. + - `ignoreCase` (optional) - whether the filtering is case sensitive or not. - [`filteringDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filteringDone) event now have only one parameter of type [`IFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpressionstree.html) which contains the filtering state of the filtered column. - filtering operands: [`IFilteringExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringexpression.html) condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an [`IFilteringOperation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html). - [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) now exposes a [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters) property, which takes an [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) class reference. - Custom filters can be provided to the Tree Grid columns by populating the [`operations`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html#operations) property of the [`IgxFilteringOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxfilteringoperand.html) with operations of [`IFilteringOperation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ifilteringoperation.html) type. ## API References
- [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md new file mode 100644 index 000000000..6cb290f55 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-groupby.md @@ -0,0 +1,992 @@ +--- +title: Angular Tree Grid Group By | Group by multiple fields | Infragistics +_description: Configure angular group by that allows visualizing of data records in Angular table, visualize the grouped data in separate and convenient column group. +_keywords: angular group by, igniteui for angular, infragistics +_license: commercial +_tocName: Group By +_premium: true +--- + +# Angular Tree Grid Group By + +If you have non-hierarchical data and you want to **group by** one or more columns and populate the parent rows with **aggregated values**, you could use the [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) along with `treeGridGrouping` pipe and the UI component with selector `igx-tree-grid-group-by-area`. + +The `treeGridGrouping` pipe groups the data based on the provided parameters and the resulting hierarchy is displayed in a separate column. The pipe can also calculate aggregated values for the generated parent rows if aggregations are provided. Here is an example of how to use the pipe in the template: + +```html + +``` + +The pipe arguments are the following: + +- groupingExpressions - an array of [`IGroupingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igroupingexpression.html) objects which contains information about the fields used to generate the hierarchy and the sorting details for each group +- groupKey - a string value for the name of the generated hierarchy column +- childDataKey - a string value for the field where the child collection of the generated parent rows is stored +- grid - `IgxTreeGridComponent` that is used for the grouping +- aggregations (optional) - an array of `ITreeGridAggregation` objects which contains information about the aggregation functions + +The UI component with selector `igx-tree-grid-group-by-area` handles the UI interactions related to the columns that are used for the grouping. Here is an example of how to use the component in the template: + +```html + + +``` + +The component's inputs are the following: + +- grid - `IgxTreeGridComponent` that is used for the grouping +- expressions - an array of [`IGroupingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igroupingexpression.html) objects which contains the fields used to generate the hierarchy +- hideGroupedColumns - a boolean value indicating whether to hide the columns by which grouping was performed +- dropAreaTemplate - a template for the drop area that can be used to override the default drop area template +- dropAreaMessage - a string that can be used to override the default message for the default drop area template + +> [!NOTE] +> In order for the sorting to work correctly you should set the `sortStrategy` property of the `IgxTreeGridComponent` to an instance of `IgxGroupedTreeGridSorting`. + +## Angular Tree Grid Group By Example + +```typescript +import { Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject } from '@angular/core'; +import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, HorizontalAlignment, IGroupingExpression, IgxOverlayOutletDirective, OverlaySettings, PositionSettings, TreeGridFilteringStrategy, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { ITreeGridAggregation, IgxGroupedTreeGridSorting, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe } from 'igniteui-angular/grids/tree-grid'; +import { IgxSliderComponent } from 'igniteui-angular/slider'; +import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxFocusDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { Contract, REGIONS } from '../data/financialData'; +import { SignalRService } from '../services/signal-r.service'; +import { FormsModule } from '@angular/forms'; +import { AsyncPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive'; + +@Component({ + providers: [SignalRService], + selector: 'app-tree-grid-finjs-sample', + styleUrls: ['./tree-grid-finjs-sample.component.scss'], + templateUrl: './tree-grid-finjs-sample.component.html', + imports: [IgxSliderComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe, DatePipe, IgxTreeGridGroupingPipe] +}) + +export class TreeGridFinJSComponent implements OnDestroy, OnInit { + private elRef = inject(ElementRef); + dataService = inject(SignalRService); + + @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent; + @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent; + @ViewChild('slider1', { static: true }) public volumeSlider!: IgxSliderComponent; + @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent; + @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet!: IgxOverlayOutletDirective; + + @HostBinding('class.dark-theme') + public theme = false; + + public showToolbar = true; + public selectionMode = 'multiple'; + public volume = 1000; + public frequency = 500; + public data$: any; + public overlaySettings: OverlaySettings = { + modal: false + }; + public controls = [ + { + disabled: false, + icon: 'update', + label: 'LIVE ALL PRICES', + selected: false + }, + { + disabled: true, + icon: 'stop', + label: 'Stop', + selected: false + } + ]; + public groupingExpressions: IGroupingExpression[] = [ + { fieldName: 'category', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'type', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'contract', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + public aggregations: ITreeGridAggregation[] = [ + { + aggregate: (parent: any, data: any[]) => data.map((r) => r.change).reduce((ty, u) => ty + u, 0), + field: 'change' + }, + { + aggregate: (parent: any, data: any[]) => data.map((r) => r.price).reduce((ty, u) => ty + u, 0), + field: 'price' + }, + { + aggregate: (parent: any, data: any[]) => parent.change / (parent.price - parent.change) * 100, + field: 'changeP' + } + ]; + + public childDataKey = 'children'; + public groupColumnKey = 'categories'; + public sorting = IgxGroupedTreeGridSorting.instance(); + public filterStrategy = new TreeGridFilteringStrategy([this.groupColumnKey]); + + public items: any[] = [{ field: 'Export native' }, { field: 'Export JS Excel' }]; + + public _positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right, + verticalStartPoint: VerticalAlignment.Bottom + }; + + public _overlaySettings: OverlaySettings = { + closeOnOutsideClick: true, + modal: false, + positionStrategy: new ConnectedPositioningStrategy(this._positionSettings), + scrollStrategy: new AbsoluteScrollStrategy() + }; + + public contracts = Contract; + public regions = REGIONS; + public isLoading = true; + + private subscription: any; + private selectedButton: number; + private _timer: any; + + constructor() { + this.dataService.startConnection(); + this.overlaySettings.outlet = this.outlet; + this.data$ = this.dataService.data; + this.dataService.getData(0); + + this.data$.subscribe((data) => { + if (data.length !== 0) { + this.isLoading = false; + }; + }); + } + + public ngOnInit(): void { + this.overlaySettings.outlet = this.outlet; + } + + public onButtonAction(event: any): void { + switch (event.index) { + case 0: { + this.disableOtherButtons(event.index, true); + if (this.dataService.hasRemoteConnection) { + this.dataService.broadcastParams(this.frequency, this.volume, true); + } else { + const currData = this.grid1.filteredSortedData ?? this.grid1.data; + this._timer = setInterval(() => this.dataService.updateAllPriceValues(currData), this.frequency); + } + break; + } + case 1: { + if (this.dataService.hasRemoteConnection) { + this.dataService.stopLiveData(); + } else { + this.stopFeed(); + } + this.disableOtherButtons(event.index, false); + break; + } + default: break; + } + } + + updateVolume(): void { + this.dataService.hasRemoteConnection ? this.dataService.broadcastParams(this.frequency, this.volume, false) : + this.dataService.getData(this.volume); + } + + public stopFeed(): void { + if (this._timer) { + clearInterval(this._timer); + } + if (this.subscription) { + this.subscription.unsubscribe(); + } + } + + public formatNumber(value: number) { + return value ? value.toFixed(2) : ''; + } + + public percentage(value: number) { + return value ? value.toFixed(2) + '%' : ''; + } + + public formatCurrency(value: number) { + return value ? '$' + value.toFixed(3) : ''; + } + + /** + * the below code is needed when accessing the sample through the navigation + * it will style all the space below the sample component element, but not the navigation menu + */ + public onThemeChanged(event: any) { + const parentEl = this.parentComponentEl(); + if (event.checked && parentEl.classList.contains('main')) { + parentEl.classList.add('fin-dark-theme'); + } else { + parentEl.classList.remove('fin-dark-theme'); + } + } + public ngOnDestroy() { + this.stopFeed(); + } + + public toggleToolbar() { + this.showToolbar = !this.showToolbar; + } + + private negative = (rowData: any): boolean => rowData['changeP'] < 0; + private positive = (rowData: any): boolean => rowData['changeP'] > 0; + private changeNegative = (rowData: any): boolean => rowData['changeP'] < 0 && rowData['changeP'] > -1; + private changePositive = (rowData: any): boolean => rowData['changeP'] > 0 && rowData['changeP'] < 1; + private strongPositive = (rowData: any): boolean => rowData['changeP'] >= 1; + private strongNegative = (rowData: any, key: string): boolean => rowData['changeP'] <= -1; + + /* eslint-disable @typescript-eslint/member-ordering */ + public trends = { + changeNeg: this.changeNegative, + changePos: this.changePositive, + negative: this.negative, + positive: this.positive, + strongNegative: this.strongNegative, + strongPositive: this.strongPositive + }; + + public trendsChange = { + changeNeg2: this.changeNegative, + changePos2: this.changePositive, + strongNegative2: this.strongNegative, + strongPositive2: this.strongPositive + }; + /* eslint-enable @typescript-eslint/member-ordering */ + + private disableOtherButtons(ind: number, disableButtons: boolean) { + if (this.subscription) { + this.subscription.unsubscribe(); + } + this.volumeSlider.disabled = disableButtons; + this.intervalSlider.disabled = disableButtons; + this.selectedButton = ind; + this.buttonGroup1.buttons.forEach((button, index) => { + if (index === 1) { button.disabled = !disableButtons; } else { + button.disabled = disableButtons; + } + }); + } + + /** + * returns the main div container of the Index Component, + * if path is /samples/sample-url, or the appRoot, if path is /sample-url + */ + private parentComponentEl() { + return this.elRef.nativeElement.parentElement.parentElement; + } + + get buttonSelected(): number { + return this.selectedButton || this.selectedButton === 0 ? this.selectedButton : -1; + } +} +``` +```html +
+
+
+
+
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+ @if (buttonSelected === 0) { + Feeding {{volume}} records every {{frequency / 1000}} sec. + ~{{volume/5}} records updated. + } +
+ + @if (showToolbar) { + + + + + + + + } + + + + + + + + + + + + + + + + + + + + @for (r of regions; track r) { + {{ r.Name }} + } + + + + + + {{ cell.value | date }} + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + + + + + + + + + + + + + + +
+ +
+
+``` +```scss +@use '../../variables' as *; + +:host ::ng-deep { + .fin-dark-theme { + .finjs-slider, + .sample-toolbar, + .group-drop-area { + color: contrast-color(null, 'gray', 900); + } + + .group-drop-area { + background: color(null, 'surface', 500); + } + } + + .finjs-icons { + display: flex; + align-items: center; + + igx-icon { + font-size: rem(16px); + width: rem(16px); + height: rem(16px); + margin-inline-start: rem(4px); + } + } + + .igx-grid__grouparea { + max-height: 100%; + height: auto; + } + + .changePos, + .changeNeg, + .strongPositive, + .strongNegative { + color: contrast-color(null, 'gray', 900) !important; + + .igx-grid__td-text { + padding: rem(2px) rem(5px); + } + } + + .positive { + color: color(null, 'success', 500) !important; + } + + .positive.strongPositive { + .igx-grid__td-text { + color: color(null, 'success', 500, .8) !important; + } + } + + .negative { + color: color(null, 'error', 500) !important; + } + + .negative.strongNegative { + .igx-grid__td-text { + color: color(null, 'error', 500, .8) !important; + } + } + + // NORMAL + // positive + .changePos { + .igx-grid__td-text { + background: color(null, 'success', 500, .5); + } + } + + .changePos1 { + background: color(null, 'success', 500, .5); + color: contrast-color(null, 'gray', 900); + } + + .changePos2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'success', 500, .5); + padding-inline-end: rem(4px); + } + } + + // negative + .changeNeg { + .igx-grid__td-text { + background: color(null, 'error', 500, .5); + } + } + + .changeNeg1 { + background: color(null, 'error', 500, .5); + color: contrast-color(null, 'gray', 900); + } + + .changeNeg2 { + .igx-grid__td-text { + border-right: rem(4px) solid color(null, 'error', 500, .5); + padding-right: rem(4px); + } + } + + // selected + .igx-grid__td--selected.changePos1, + .igx-grid__td--selected.changePos2, + .igx-grid__td--selected.changePos { + background-color: color(null, 'success', 500, .5) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .igx-grid__td--selected.changeNeg1, + .igx-grid__td--selected.changeNeg2, + .igx-grid__td--selected.changeNeg { + background-color: color(null, 'error', 500, .5) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + // STRONG + // positive + .strongPositive { + .igx-grid__td-text { + background: color(null, 'success', 500); + } + } + + .strongPositive1 { + background: color(null, 'success', 500); + color: contrast-color(null, 'gray', 900); + } + + .strongPositive2 { + .igx-grid__td-text { + border-right: rem(4px) solid color(null, 'success', 500); + padding-right: rem(4px); + } + } + + // negative + .strongNegative { + .igx-grid__td-text { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); + } + } + + .strongNegative1 { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); + } + + .strongNegative2 { + .igx-grid__td-text { + border-right: rem(4px) solid color(null, 'error', 500); + padding-right: rem(4px); + } + } + + // selected + .igx-grid__td--selected.strongPositive1, + .igx-grid__td--selected.strongPositive2, + .igx-grid__td--selected.strongPositive { + background-color: color(null, 'success', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .igx-grid__td--selected.strongNegative1, + .igx-grid__td--selected.strongNegative2, + .igx-grid__td--selected.strongNegative { + background-color: color(null, 'error', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .controls-holder { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + width: 100%; + padding-block-end: rem(4px); + } + + .switches { + display: flex; + justify-content: space-between; + align-items: center; + flex: 1 0 0%; + padding-right: rem(20px); + font-size: .9rem; + } + + .control-item { + padding-right: rem(20px); + } + + .igx-slider, + .igx-slider--disabled { + height: rem(24px); + } + + .finjs-slider { + width: 40%; + min-width: rem(145px); + } + + .finjs-play-controls { + width: 45%; + min-width: rem(620px); + margin-block-start: rem(10px); + } + + .sample-toolbar { + height: rem(20px); + font-size: .8rem; + line-height: rem(20px); + margin-block-start: rem(11px); + } + + .igx-grid__outlet span, + .igx-excel-filter span, + .igx-excel-filter header, + .igx-excel-filter input { + font-size: 0.8125rem; + } + + .igx-button--icon { + width: 2rem; + height: 2rem; + } +} + +.grid__wrapper { + position: relative; + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + padding: rem(15px); + display: flex; + flex-direction: column; + + igx-tree-grid { + --ig-size: var(--ig-size-small); + } +} + +igx-grid { + flex: 1 0 0%; +} + +.controls-wrapper { + display: flex; + justify-content: center; + position: relative; +} + +.grid-toolbar-title { + max-width: none; +} +``` + +
+ +### Implementation + +In this sample we are using the `treeGridGrouping` pipe and the UI component with selector `igx-tree-grid-group-by-area` for the grouping. The data is grouped by the **"category"**, **"type"** and **"contract"** fields. The resulting hierarchy is displayed in the newly created **"categories"** column. The pipe also calculates aggregated values for the generated parent rows for the **"price"**, **"change"** and **"changeP"** columns. + +```html + + + + +``` + +Here you can see how the grouping expressions and aggregations are defined: + +```typescript +public groupingExpressions: IGroupingExpression[] = [ + { fieldName: 'category', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'type', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'contract', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } +]; +public aggregations: ITreeGridAggregation[] = [ + { + aggregate: (parent: any, data: any[]) => data.map((r) => r.change).reduce((ty, u) => ty + u, 0), + field: 'change' + }, + { + aggregate: (parent: any, data: any[]) => data.map((r) => r.price).reduce((ty, u) => ty + u, 0), + field: 'price' + }, + { + aggregate: (parent: any, data: any[]) => parent.change / (parent.price - parent.change) * 100, + field: 'changeP' + } +]; +public childDataKey = 'children'; +public groupColumnKey = 'categories'; +public sorting = IgxGroupedTreeGridSorting.instance(); +``` + +## Angular Tree Grid Group By Load On Demand Example + +```typescript +import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, IGroupingExpression } from 'igniteui-angular/core'; +import { IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { TreeGridGroupingLoadOnDemandService, TreeGridGroupingParameters } from './remoteService'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-group-by-load-on-demand-sample', + styleUrls: ['./tree-grid-group-by-load-on-demand-sample.component.scss'], + templateUrl: './tree-grid-group-by-load-on-demand-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxTreeGridGroupByAreaComponent, IgxColumnComponent] +}) + +export class TreeGridGroupByLoadOnDemandComponent implements OnInit { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + @Input() + public groupingExpressions: IGroupingExpression[] = [ + { fieldName: 'ShipCountry', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ShipCity', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Discontinued', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + + public primaryKey = 'id'; + public foreignKey = 'parentId'; + public hasChildrenKey = 'children'; + public groupColumnKey = ''; + public data = []; + + private dataService = new TreeGridGroupingLoadOnDemandService(); + + public ngOnInit() { + this.reloadData(); + } + + public loadChildren = (parentID: any, done: (children: any[]) => void) => { + const groupingParameters = this.assembleGroupingParameters(); + this.dataService.getData(parentID, this.hasChildrenKey, groupingParameters, (children) => done(children)); + }; + + public onExpressionsChange(event: IGroupingExpression[]) { + this.reloadData(); + } + + private reloadData() { + this.treeGrid.isLoading = true; + this.treeGrid.expansionStates.clear(); + const groupingParameters = this.assembleGroupingParameters(); + this.dataService.getData(null, this.hasChildrenKey, groupingParameters, (children) => { + this.data = children; + this.treeGrid.isLoading = false; + this.treeGrid.reflow(); + }); + } + + private assembleGroupingParameters(): TreeGridGroupingParameters { + const groupingParameters: TreeGridGroupingParameters = { + groupingExpressions: this.groupingExpressions, + groupKey: this.groupColumnKey, + primaryKey: this.primaryKey, + foreignKey: this.foreignKey + }; + + return groupingParameters; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +:host ::ng-deep { + .igx-button--icon { + width: 2rem; + height: 2rem; + } +} + +.grid__wrapper { + --ig-size: var(--ig-size-small); + + position: relative; + width: 100%; + height: 100%; + top: 0; + left: 0; + padding: 15px; + display: flex; + flex-direction: column; +} + +igx-grid { + flex: 1 0 0%; +} + +.grid-toolbar-title { + max-width: none; +} +``` + +
+ +### Implementation + +In this sample, data is loaded in portions. Initially, only the top level categories are displayed, then child data is served once a parent row is expanded. For more information on this approach, please refer to the [Tree Grid Load On Demand](load-on-demand.md) topic. The data is grouped by the **"ShipCountry"**, **"ShipCity"** and **"Discontinued"** fields and the resulting hierarchy is displayed in a separate column. The grouping is performed on a remote service - the data is modified and corresponding child and parent keys are assigned that are used to display the final data in a hierarchical view. For more information on how this service works you can take a look at the `TreeGridGroupingLoadOnDemandService` class in the `remoteService.ts` file. + +Here is an example of how to use load on demand: + +```html + + + + +``` + +In order to load the child rows when the user expands a row, the Tree Grid provides the callback input property [`loadChildrenOnDemand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#loadChildrenOnDemand) - the children data is retrieved from the server and it is assigned to the requested parent row based on the grouping parameters. + +```typescript +public groupingExpressions: IGroupingExpression[] = [ + { fieldName: 'ShipCountry', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'ShipCity', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'Discontinued', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } +]; +public primaryKey = 'id'; +public foreignKey = 'parentId'; +public hasChildrenKey = 'children'; +public groupColumnKey = ''; + +private dataService = new TreeGridGroupingLoadOnDemandService(); + +public ngOnInit() { + this.reloadData(); +} + +public loadChildren = (parentID: any, done: (children: any[]) => void) => { + const groupingParameters = this.assembleGroupingParameters(); + this.dataService.getData(parentID, this.hasChildrenKey, groupingParameters, (children) => done(children)); +}; + +private reloadData() { + this.treeGrid.isLoading = true; + this.treeGrid.expansionStates.clear(); + const groupingParameters = this.assembleGroupingParameters(); + this.dataService.getData(null, this.hasChildrenKey, groupingParameters, (children) => { + this.data = children; + this.treeGrid.isLoading = false; + this.treeGrid.reflow(); + }); +} +``` + +## Known Limitations + +|Limitation|Description| +|--- |--- | +|Grouping is not updated with batch editing | When using Tree Grid Group By with batch editing enabled (`batchEditing=true`), the grouping is not automatically updated when editing column values that are used for grouping. The grouping will only be updated after committing the transaction. | + +## API References + +
+ +- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +## Additional Resources + +
+ +- [TreeGrid overview](tree-grid.md) +- [TreeGrid Summaries](summaries.md) +- [Grid Summaries](../grid/summaries.md) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md new file mode 100644 index 000000000..73d8f2b09 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-keyboard-navigation.md @@ -0,0 +1,1805 @@ +--- +_tocName: Keyboard navigation +_premium: true +--- +--- title: Angular Tree Grid Keyboard Navigation - Ignite UI for Angular _description: Learn how to use Tree Grid Keyboard Navigation with Ignite UI for Angular. With Keyboard interaction, users can quickly navigate between cells, rows, and columns. _keywords: keyboard navigation, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/keyboard-navigation --- # Angular Tree Grid Keyboard Navigation + + Keyboard navigation in the **IgxTreeGrid** provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the **IgxTreeGrid** and allows to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way. The tabulations of the IgxTreeGrid has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use. Currently, the IgxTreeGrid introduces the following tab stops: - **GroupBy or Toolbar area** (if enabled); - **IgxTreeGrid header**; - **IgxTreeGrid body**; - **Column summaries** (if enabled); - **IgxTreeGrid paginator** (if enabled); >[!NOTE] > Due to this change, navigating between the cells with tab and Shift + Tab is no longer supported in the IgxTreeGrid. > Pressing the Tab key now goes through the tab stops in the following order: **GroupBy** / **Toolbar** -> **Headers** -> **Body** -> **Summaries** -> **Footer / Paginator**. >[!NOTE] > Exposing any **focusable** element into the **IgxTreeGrid** body via template may introduce **side effects** in the keyboard navigation, since the default > browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately. ## Header Navigation A full _keyboard navigation_ support in the **IgxTreeGrid** header is now introduced. Column headers can be easily traversed with the arrow keys. Additionally, there are a number of key combinations that trigger actions on the columns like **filtering**, **sorting**, **grouping** and etc. When the **IgxTreeGrid** header container is focused, the following key combinations are available: ### Key Combinations - Arrow Up navigates one cell up in the headers (no looping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined - Arrow Down navigates one cell down in the headers (no wrapping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined - Arrow Left navigates one cell left (no looping) - Arrow Right navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level - Home navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level - Ctrl + Arrow Right navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level - End navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level - Alt + L opens Advanced Filtering dialog if Advanced Filtering is enabled - Ctrl + Shift + L opens the Excel Style Filter dialog or the default (row) filter if the column is filterable - Ctrl + Arrow Up sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared - Ctrl + Arrow Down sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared - Space selects the column; If the column is already selected, selection is cleared @@if (igxName === "IgxGrid") { - Shift + Alt + Arrow Left groups the column, if the column is marked as groupable - Shift + Alt + Arrow Right ungroups the column, if the column is marked as groupable - Alt + Arrow Left or Alt + Arrow Up collapses the column group header, if the header is not already collapsed - Alt + Arrow Right or `Alt + Arrow Down expands the column group header, if the header is not already expanded} ## Body navigation When the **IgxTreeGrid** body is focused, the following key combinations are available: ### Key Combination - Arrow Up- navigates one cell up (no wrapping) - Arrow Down navigates one cell down (no wrapping) - Arrow Left navigates one cell left (no wrapping between lines) - Arrow Right - navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row - Ctrl + Arrow Right navigates to the rightmost cell in the row - Ctrl + Arrow Up navigates to the first cell in the column - Ctrl + Arrow Down navigates to the last cell in the column - Home navigates to the leftmost cell in the row - End navigates to the rightmost cell in the row - Ctrl + Home navigates to the top leftmost data cell in the grid - Ctrl + End navigates to the bottom rightmost data cell in the grid - Page Up scrolls one page (view port) up - Page Down scrolls one page (view port) down - Enter enters edit mode - F2 enters edit mode - Esc exits edit mode - Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row - Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row - Space - selects the row, if Row Selection is enabled - Alt + Arrow Left or Alt + Arrow Up - @@if (igxName === "IgxGrid") {over Group Row - collapses the group} @@if (igxName === "IgxHierarchicalGrid") {collapses the row island} @@if (igxName === "IgxTreeGrid") {collapses the current node} - Alt + Arrow Right or Alt + Arrow Down - @@if (igxName === "IgxGrid") {over Group Row - expands the group} @@if (igxName === "IgxHierarchicalGrid") {expands the row island } @@if (igxName === "IgxTreeGrid") {expands the current node} + @@if (igxName === "IgxGrid") {- Alt + Arrow Left or Alt + Arrow Up - over Master Detail Row - collapses the details view - Alt + Arrow Right or Alt + Arrow Down - over Master Detail Row - expands the details view} + @@if (igxName === "IgxGrid") {- Space - over Group Row - selects all rows in the group, if rowSelection property is set to multiple} Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. ## Demo @@if (igxName === "IgxGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-shadow */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { CellType, IActiveNodeChangeEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridDetailTemplateDirective, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { SortingDirection } from 'igniteui-angular/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { DATA } from '../../data/customers'; +import { NgClass } from '@angular/common'; + +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, itemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = itemAction; + + if (itemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} + +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('shift + alt + arrow left/right', 'group/ungroup the active column', false, ItemAction.Groupable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, ItemAction.Collapsible), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse master details row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand master details row', false, ItemAction.Collapsible), + new Item('alt + arrow right/left', 'expand/collapse the group row', false, ItemAction.Expandable), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell left', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell right', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'grid-keyboardnav', + templateUrl: './grid-keyboardnav-sample.component.html', + styleUrls: ['grid-keyboardnav-sample.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridDetailTemplateDirective, IgxColumnGroupComponent, IgxColumnComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class GridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + + + @ViewChild(IgxGridComponent, { static: true }) + public grid: IgxGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + + public get keyboardCollection() { + return this._keyboardHandler.collection; + } + + public get headerList() { + return this._keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this._keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this._keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + private _destroyer = new Subject(); + private _keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + + public onActiveNodeChange(evt: IActiveNodeChangeEventArgs) { + if (this.grid.crudService.cell) { + return; + } + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === this.grid.dataView.length ? + GridSection.FOOTER : GridSection.TBODY; + this.changeCombinationsCollection(gridSection); + this.toggleHeaderCombinations(evt); + this.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.grid.data = DATA; + for (const item of this.grid.data) { + const names = item.CompanyName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + item.PersonelDetails = `${item.ContactTitle}: ${item.ContactName}`; + item.CompanysAnnualProfit = (100000 + (Math.random() * Math.floor(1000000))).toFixed(0); + } + + this.grid.groupingExpansionStateChange.pipe(takeUntil(this._destroyer)) + .subscribe(() => { + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + this._keyboardHandler.selectItem(3); + } + }); + + this.grid.columnSelectionChanging.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this._keyboardHandler.selectItem(0); + } + }); + + this.grid.rowToggle.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (evt.type !== 'keydown') { + return; + } + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this._keyboardHandler.selectItem(1) : + this._keyboardHandler.selectItem(2); + }); + + this.grid.groupingExpressions = [ + { fieldName: 'ContactTitle', dir: SortingDirection.Asc } + ]; + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (key === 'tab') { return; } + if (this._keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this._keyboardHandler.selectItem(3); + break; + case 'home': + this._keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this._keyboardHandler.selectItem(0); + break; + case 'arrowright': + this._keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + + const activeNode = this.grid.navigation.activeNode; + if (this._keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this._keyboardHandler.selectItem(5); + return; + } + const col = this.grid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this._keyboardHandler.selectItem(4); + } + + if ((key === 'arrowleft' || key === 'arrowright') && evt.altKey && evt.shiftKey && + col && !col.columnGroup && col.groupable) { + this._keyboardHandler.selectItem(2); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey) { + if (col && !col.columnGroup && col.sortable) { + this._keyboardHandler.selectItem(1); + } + } + } + + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.grid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.grid.getCellByColumn(activeNode.row, columnName); + + if (cell && cell.column.editable && cell.editMode) { + this._keyboardHandler.selectItem(0); + } + } + if ((key === 'end' || key === 'home') && evt.ctrlKey) { + this._keyboardHandler.selectItem(4); + this.cdr.detectChanges(); + } + } + } + + public expandChange() { + if (!this._keyboardHandler.collection.length) { + return; + } + + this._keyboardHandler.selectItem(3); + } + + public onCheckChange(evt, idx) { + evt.checked ? this._keyboardHandler.selectItem(idx) : this._keyboardHandler.deselectItem(idx); + } + + public toggleHeaderCombinations(activeNode) { + if (this._keyboardHandler.gridSection !== GridSection.THEAD) { + return; + } + const currColumn = this.grid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this._keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const rowRef = this.grid.getRowByIndex(activeNode.row); + if (this._keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + + if (rowRef.isGroupByRow) { + this._keyboardHandler.enableActionItems([ItemAction.Expandable]); + } else { + const cell = this.grid.getCellByColumn(activeNode.row, + this.grid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + } + + public toggleCellCombinations(cell?: CellType) { + const actions = this.extractCellActions(cell); + this._keyboardHandler.enableActionItems(actions); + } + + public changeCombinationsCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this._keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this._keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this._keyboardHandler.collection = summaryCombinations; + break; + default: + this._keyboardHandler.collection = []; + return; + } + this._keyboardHandler.gridSection = gridSection; + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + + res.push(ItemAction.Collapsible); + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + @if (dataItem.CompanysAnnualProfit) { +
+
Annual Profit:
+ {{dataItem.CompanysAnnualProfit}} +
+ } + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($color: 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample ::ng-deep { + @include checkbox($custom-checkbox-theme); +} + +.sample { + display: flex; + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 450px; + box-shadow: elevation(2); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} @@if (igxName === "IgxHierarchicalGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @angular-eslint/component-selector */ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-shadow */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { CellType, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent, IgxGridToolbarDirective } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { fromEvent, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { CUSTOMERS } from '../../data/hierarchical-data'; +import { NgClass } from '@angular/common'; + +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, itemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = itemAction; + + if (itemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} + +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, + ItemAction.Collapsible), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse row island row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand row island row', false, ItemAction.Collapsible), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell right', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell left', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'grid-keyboardnav', + templateUrl: './hgrid-keyboard-guide.component.html', + styleUrls: ['hgrid-keyboard-guide.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent, IgxGridToolbarDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class HGridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + + + @ViewChild(IgxHierarchicalGridComponent, { static: true }) + public hGrid: IgxHierarchicalGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + + public get keyboardCollection() { + return this.keyboardHandler.collection; + } + + public get headerList() { + return this.keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this.keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this.keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + public gridTarget: GridUnderManagement; + + private _destroyer = new Subject(); + private keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + public onActiveNodeChange(evt) { + if (this.hGrid.crudService.cell) { + return; + } + const grid = evt.owner || this.hGrid; + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === grid.dataView.length ? GridSection.FOOTER : GridSection.TBODY; + this.changeKeyboardCollection(gridSection); + this.gridTarget.toggleHeaderCombinations(evt); + this.gridTarget.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.hGrid.data = CUSTOMERS; + for (const item of this.hGrid.data) { + const names = item.CompanyName.split(' '); + item.FirstName = names[0]; + item.LastName = names[names.length - 1]; + item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`; + item.PersonelDetails = `${item.ContactTitle}: ${item.ContactName}`; + item.CompanysAnnualProfit = (100000 + (Math.random() * Math.floor(1000000))).toFixed(0); + } + + this.gridTarget = new GridUnderManagement(this.hGrid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public expandChange() { + if (!this.keyboardHandler.collection.length) { + return; + } + + this.keyboardHandler.selectItem(2); + } + + public onCheckChange(evt, idx) { + evt.checked ? this.keyboardHandler.selectItem(idx) : this.keyboardHandler.deselectItem(idx); + } + + public changeKeyboardCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this.keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this.keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this.keyboardHandler.collection = summaryCombinations; + break; + default: + this.keyboardHandler.collection = []; + return; + } + this.keyboardHandler.gridSection = gridSection; + } + + public onGridCreated(evt) { + fromEvent(evt.grid.elementRef.nativeElement, 'click').pipe(takeUntil(this._destroyer)) + .subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + + fromEvent(evt.grid.elementRef.nativeElement, 'focus').pipe(takeUntil(this._destroyer)) + .subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + + fromEvent((evt.grid as IgxHierarchicalGridComponent).tbody.nativeElement, 'focus') + .pipe(takeUntil(this._destroyer)).subscribe(() => { + this.gridTarget = new GridUnderManagement(evt.grid, this.keyboardHandler, this._destroyer, this.cdr); + this.gridTarget.subscribe(); + }); + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (this.keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this.keyboardHandler.selectItem(3); + break; + case 'home': + this.keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this.keyboardHandler.selectItem(0); + break; + case 'arrowright': + this.keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + const activeNode = this.gridTarget.hGrid.navigation.activeNode; + if (this.keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this.keyboardHandler.selectItem(3); + return; + } + const col = this.gridTarget.hGrid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this.keyboardHandler.selectItem(4); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey && col && !col.columnGroup && col.sortable) { + this.keyboardHandler.selectItem(1); + } + } + + if (this.keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.gridTarget.hGrid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.gridTarget.hGrid.getCellByColumn(activeNode.row, columnName); + if (cell && cell.column.editable && cell.editMode) { + this.keyboardHandler.selectItem(0); + } + } + if ((evt.code === 'End' || evt.code === 'Home') && evt.ctrlKey) { + this.keyboardHandler.selectItem(3); + } + } + } +} + +export class GridUnderManagement { + public hGrid: IgxHierarchicalGridComponent; + public destroyer = new Subject(); + public keyboardHandler: KeyboardHandler; + public cdr: ChangeDetectorRef; + + constructor(hGrid: IgxHierarchicalGridComponent, keyboardHandler: KeyboardHandler, + destroyer: Subject, cdr: ChangeDetectorRef) { + this.hGrid = hGrid; + this.keyboardHandler = keyboardHandler; + this.destroyer = destroyer; + this.cdr = cdr; + } + + public subscribe() { + this.hGrid.columnSelectionChanging.pipe(takeUntil(this.destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this.keyboardHandler.selectItem(0); + } + }); + + this.hGrid.rowToggle.pipe(takeUntil(this.destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (!evt || evt.type !== 'keydown') { + return; + } + + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this.keyboardHandler.selectItem(1) : + this.keyboardHandler.selectItem(2); + }); + } + + public toggleHeaderCombinations(activeNode) { + if (this.keyboardHandler.gridSection !== GridSection.THEAD || activeNode.column === undefined || activeNode.level === undefined) { + return; + } + const grid = activeNode.owner || this.hGrid; + const currColumn = grid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this.keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const grid = activeNode.owner || this.hGrid; + const rowRef = grid.getRowByIndex(activeNode.row); + if (this.keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + + if (rowRef.isGroupByRow) { + this.keyboardHandler.enableActionItems([ItemAction.Expandable]); + } else { + const cell = grid.getCellByColumn(activeNode.row, + grid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + } + + public toggleCellCombinations(cell?: CellType) { + if (this.keyboardHandler.gridSection !== GridSection.TBODY || !cell) { + return; + } + + const actions = this.extractCellActions(cell); + this.keyboardHandler.enableActionItems(actions); + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + + res.push(ItemAction.Collapsible); + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{headerList}} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($color: 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample { + @include tokens($custom-checkbox-theme); +} + +.sample { + display: flex; + + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 570px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} @@if (igxName === "IgxTreeGrid") { ```typescript +/* eslint-disable @angular-eslint/component-class-suffix */ +/* eslint-disable @typescript-eslint/naming-convention */ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { CellType, IActiveNodeChangeEventArgs, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxEmptyListTemplateDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxOverlayService } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { NgClass } from '@angular/common'; + +// eslint-disable-next-line no-shadow +enum GridSection { + THEAD = 'igx-grid__thead-wrapper', + TBODY = 'igx-grid__tbody-content', + FOOTER = 'igx-grid__tfoot' +} + +// eslint-disable-next-line no-shadow +enum ItemAction { + Filterable, + Sortable, + Selectable, + Groupable, + Collapsible, + Expandable, + Editable, + Always +} + +// eslint-disable-next-line no-shadow +enum ElementTags { + GROUPBY_ROW = 'IGX-GRID-GROUPBY-ROW', + COLUMN_GROUP = 'IGX-COLUMN-GROUP' +} + +class Item { + public title: string; + public subTitle: string; + public action: ItemAction; + public active = false; + + private _completed: boolean; + + public constructor(title: string, subTitle: string, completed: boolean, ítemAction?: ItemAction) { + this.title = title; + this.subTitle = subTitle; + this.completed = completed; + this.action = ítemAction; + + if (ítemAction === ItemAction.Always) { + this.active = true; + } + } + + public set completed(value: boolean) { + if (this.active || (!value && !this.completed)) { + this._completed = value; + } + } + + public get completed() { + return this._completed; + } +} +class KeyboardHandler { + private _collection: Item[]; + private _section: GridSection; + + public constructor(colleciton: Item[], section: GridSection) { + this._collection = colleciton; + this._section = section; + } + + public set collection(collection: Item[]) { + this._collection = collection; + } + + public get collection() { + return this._collection; + } + + public set gridSection(section: GridSection) { + this._section = section; + } + + public get gridSection() { + return this._section; + } + + public enableActionItems(action: ItemAction[]) { + this.resetCollection(); + action.forEach(element => { + this._collection + .filter(e => e.action === element) + .map(e => e.active = true); + }); + } + + public resetCollection() { + this._collection.forEach(e => { + if (e.action !== ItemAction.Always) { + e.active = false; + } + }); + } + + public selectItem(idx: number) { + if (!this._collection.length) { + return; + } + + this._collection[idx].completed = true; + } + + public deselectItem(idx: number) { + if (!this._collection.length) { + return; + } + this._collection[idx].completed = false; + } +} + +const theadKeyCombinations = [ + new Item('space key', 'select column', false, ItemAction.Selectable), + new Item('ctrl + arrow up/down', 'sorts the column asc/desc', false, ItemAction.Sortable), + new Item('alt + arrow left/right/up/down', 'expand/collapse active multi column header', + false, + ItemAction.Collapsible), + new Item('ctrl + shift + l', 'opens the excel style filtering', false, ItemAction.Filterable), + new Item('alt + l', 'opens the advanced filtering', false, ItemAction.Filterable) +]; + +const tbodyKeyCombinations: Item[] = [ + new Item('enter', 'enter in edit mode', false, ItemAction.Editable), + new Item('alt + arrow left/up', 'collapse row', false, ItemAction.Collapsible), + new Item('alt + arrow right/down', 'expand row', false, ItemAction.Collapsible), + new Item('ctrl + Home/End', 'navigates to the upper-left/bottom-right cell', false, ItemAction.Always) +]; + +const summaryCombinations: Item[] = [ + new Item('ArrowLeft', 'navigates one summary cell right', false, ItemAction.Always), + new Item('ArrowRight', 'navigates one summary cell left', false, ItemAction.Always), + new Item('Home', 'navigates to the first summary cell', false, ItemAction.Always), + new Item('End', 'navigates to the last summary cell', false, ItemAction.Always) +]; + +@Component({ + selector: 'app-grid-keyboardnav', + templateUrl: './tgrid-keyboardnav-guide.component.html', + styleUrls: ['tgrid-keyboardnav-guide.component.scss'], + animations: [ + trigger('toggle', [ + state('selected', style({ + color: '#4eb862' + })), + state('deselected', style({ + color: 'black' + })), + transition('deselected => selected', [ + animate('.3s') + ]), + transition('selected => deselected', [ + animate('.3s') + ]) + ]), + trigger('load', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('.3s', style({ opacity: .4 })) + ]) + ]) + ], + imports: [IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxCheckboxComponent, IgxEmptyListTemplateDirective] +}) +export class TGridKeyboardnavGuide implements OnInit, OnDestroy { + private cdr = inject(ChangeDetectorRef); + private _overlay = inject(IgxOverlayService); + + @ViewChild(IgxTreeGridComponent, { static: true }) + public tgrid: IgxTreeGridComponent; + + @ViewChild(IgxListComponent, { static: true }) + public listref: IgxListComponent; + public data; + + public get keyboardCollection() { + return this._keyboardHandler.collection; + } + + public get headerList() { + return this._keyboardHandler.gridSection === GridSection.THEAD ? + 'HEADER COMBINATIONS' : this._keyboardHandler.gridSection === GridSection.TBODY ? + 'BODY COMBITNATIONS' : this._keyboardHandler.gridSection === GridSection.FOOTER ? + 'SUMMARY COMBINATIONS' : ''; + } + + private _destroyer = new Subject(); + private _keyboardHandler = new KeyboardHandler([], GridSection.THEAD); + + public onActiveNodeChange(evt: IActiveNodeChangeEventArgs) { + if (this.tgrid.crudService.cell) { + return; + } + + const gridSection = evt.row < 0 ? GridSection.THEAD : evt.row === this.tgrid.dataView.length ? + GridSection.FOOTER : GridSection.TBODY; + this.changeKeyboardCollection(gridSection); + this.toggleHeaderCombinations(evt); + this.toggleBodyCombinations(evt); + } + + public ngOnInit() { + this.data = generateEmployeeDetailedFlatData(); + this.tgrid.columnSelectionChanging.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event; + if (evt.type === 'keydown') { + this._keyboardHandler.selectItem(0); + } + }); + + this.tgrid.rowToggle.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + const evt = args.event as KeyboardEvent; + if (evt.type !== 'keydown') { + return; + } + + return evt.code === 'ArrowLeft' || evt.code === 'ArrowUp' ? this._keyboardHandler.selectItem(1) : + this._keyboardHandler.selectItem(2); + }); + + this.listref.itemClicked.pipe(takeUntil(this._destroyer)) + .subscribe((args) => { + args.event.stopPropagation(); + }); + } + + public ngOnDestroy() { + this._destroyer.next(); + } + + public expandChange() { + if (!this._keyboardHandler.collection.length) { + return; + } + + this._keyboardHandler.selectItem(2); + } + + public onCheckChange(evt, idx) { + evt.checked ? this._keyboardHandler.selectItem(idx) : this._keyboardHandler.deselectItem(idx); + } + + public changeKeyboardCollection(gridSection: GridSection) { + switch (gridSection) { + case GridSection.THEAD: + this._keyboardHandler.collection = theadKeyCombinations; + break; + case GridSection.TBODY: + this._keyboardHandler.collection = tbodyKeyCombinations; + break; + case GridSection.FOOTER: + this._keyboardHandler.collection = summaryCombinations; + break; + default: + this._keyboardHandler.collection = []; + return; + } + this._keyboardHandler.gridSection = gridSection; + } + + public gridKeydown(evt) { + const key = evt.key.toLowerCase(); + if (key === 'tab') { return; } + if (this._keyboardHandler.gridSection === GridSection.FOOTER) { + switch (key) { + case 'end': + this._keyboardHandler.selectItem(3); + break; + case 'home': + this._keyboardHandler.selectItem(2); + break; + case 'arrowleft': + this._keyboardHandler.selectItem(0); + break; + case 'arrowright': + this._keyboardHandler.selectItem(1); + break; + default: + break; + } + return; + } + const activeNode = this.tgrid.navigation.activeNode; + if (this._keyboardHandler.gridSection === GridSection.THEAD) { + if (key === 'l' && evt.altKey) { + this._keyboardHandler.selectItem(4); + return; + } + const col = this.tgrid.visibleColumns.find + (c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + if (key === 'l' && evt.ctrlKey && evt.shiftKey && col && !col.columnGroup && col.filterable) { + this._keyboardHandler.selectItem(3); + } + + if ((key === 'arrowup' || key === 'arrowdown') && evt.ctrlKey && col && !col.columnGroup && col.sortable) { + this._keyboardHandler.selectItem(1); + } + } + + if (this._keyboardHandler.gridSection === GridSection.TBODY) { + if (key === 'enter') { + const columnName = this.tgrid.getColumnByVisibleIndex(activeNode.column).field; + const cell = this.tgrid.getCellByColumn(activeNode.row, columnName); + + if (cell && cell.column.editable && cell.editMode) { + this._keyboardHandler.selectItem(0); + } + } + if ((evt.code === 'End' || evt.code === 'Home') && evt.ctrlKey) { + this._keyboardHandler.selectItem(3); + this.cdr.detectChanges(); + } + } + } + + public toggleHeaderCombinations(activeNode) { + if (this._keyboardHandler.gridSection !== GridSection.THEAD) { + return; + } + const currColumn = this.tgrid.columnList + .find(c => c.visibleIndex === activeNode.column && c.level === activeNode.level); + + const actions = this.extractColumnActions(currColumn); + this._keyboardHandler.enableActionItems(actions); + } + + public toggleBodyCombinations(activeNode) { + const rowRef = this.tgrid.getRowByIndex(activeNode.row); + if (this._keyboardHandler.gridSection !== GridSection.TBODY || !rowRef) { + return; + } + const cell = this.tgrid.getCellByColumn(activeNode.row, + this.tgrid.columnList.find((col) => col.visibleIndex === activeNode.column).field); + this.toggleCellCombinations(cell); + } + + public toggleCellCombinations(cell?: CellType) { + if (this._keyboardHandler.gridSection !== GridSection.TBODY) { + return; + } + + const actions = this.extractCellActions(cell); + this._keyboardHandler.enableActionItems(actions); + } + + public extractColumnActions(col: IgxColumnComponent | IgxColumnGroupComponent) { + const res = []; + if (col.sortable) { + res.push(ItemAction.Sortable); + } + if (col.filterable && !col.columnGroup) { + res.push(ItemAction.Filterable); + } + + if (col.collapsible) { + res.push(ItemAction.Collapsible); + } + + if (col.groupable) { + res.push(ItemAction.Groupable); + } + + if (col.selectable) { + res.push(ItemAction.Selectable); + } + + return res; + } + + public extractCellActions(cell: CellType) { + const res = []; + if (cell.editable) { + res.push(ItemAction.Editable); + } + if (cell.row.children && cell.row.children.length) { + res.push(ItemAction.Collapsible); + } + return res; + } +} +``` +```html +
+
+ + + @if (false) { + + } + + + + + + + + + + + + + + +
+ Country: {{cell.row.data.Country}} +
+ City: {{cell.row.data.City}} +
+ Postal Code: {{cell.row.data.Address}} +
+ + + + + + + + + + + + + +
+
+ + @if (keyboardCollection.length > 0) { + {{ headerList }} + } + @for (c of keyboardCollection; track c; let idx = $index) { + +

{{ c.title }}

+

{{ c.subTitle }}

+ + + } + + +
Use the native navigation of the browser until you reach some of the following grid sections below:
+
    +
  • Header
    • +
  • Body
    • +
  • Summary
    • +
+
When reached, an action list will be shown.
+ + + +
+
+``` +```scss +@use '../../../variables' as *; + +$my-color: color($default-palette, 'success'); + +$custom-checkbox-theme: checkbox-theme( + $fill-color: $my-color, + $border-radius: 10px +); + +.list-sample ::ng-deep { + @include checkbox($custom-checkbox-theme); +} + +.sample { + display: flex; + + .grid_wrapper { + --ig-size: var(--ig-size-small); + padding-left: 15px; + padding-top: 15px; + width: 75%; + } + + + .list-sample { + padding-top: 15px; + width: 20%; + + .disabled { + opacity: .4; + } + + .active { + opacity: 1; + } + + igx-list { + .igx-list__item-line-title, .igx-list__item-line-subtitle { + font-size: 13px; + } + + height: 450px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), + 0 2px 1px -1px rgba(0, 0, 0, 0.12); + } + + .empty-list { + opacity: 1; + h6 { + padding: 15px; + font-size: 15px; + } + + ul { + li { + font-size: 13px; + } + margin-left: 15px; + font-weight: 400; + } + } + } +} +```
} ## Custom keyboard navigation Overriding the default behavior for a certain key or keys combination is one of the benefits that the **Keyboard Navigation** feature provides. For example: press the Enter or Tab key to navigate to the next cell or the cell below. This or any other navigation scenario is easily achieved by the **Keyboard Navigation** API: | API | Description | Arguments | |---------|-------------|-----------| | [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#gridKeydown) | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | [IGridKeydownEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html) | | [`activeNodeChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#activeNodeChange) | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | [IActiveNodeChangeEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iactivenodechangeeventargs.html) | | [`navigateTo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#navigateTo) | Navigates to a position in the grid, based on provided `rowindex` and `visibleColumnIndex`. It can also execute a custom logic over the target element, through a callback function that accepts param of type `{ targetType: GridKeydownTargetType, target: Object }` . Usage:
_grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} | | [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#getNextCell)| returns [`ICellPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icellposition.html) object, which defines the next cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getNextCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#getnextcell) method. The callback function accepts `IgxColumnComponent` as a param and returns a `boolean` value indication if a given criteria is met:
_const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean | | [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#getPreviousCell)| returns [`ICellPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icellposition.html) object, which defines the previous cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getPreviousCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#getPreviousCell) method. The callback function accepts `IgxColumnComponent` as a param and returns a `boolean` value indication if a given criteria is met:
_const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean | Let's try the API to demonstrate how to achieve common scenarios like user input validation and custom navigation. First we need to register an event handler for the [`gridKeydown`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#gridKeydown) event: ```html ``` ```typescript public customKeydown(args: IGridKeydownEventArgs) { + const target: IgxGridCell = args.target as IgxGridCell; + const evt: KeyboardEvent = args.event as KeyboardEvent; + const type = args.targetType; + + if (type === 'dataCell' && target.inEditMode && evt.key.toLowerCase() === 'tab') { + // 1. USER INPUT VALIDATION ON TAB + } + if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') { + // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS + } } ``` Based on the [IGridKeydownEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridkeydowneventargs.html) values we identified two cases, where to provide our own logic (see above). Now, using the methods from the API, let's perform the desired - if the user is pressing Tab key over a cell in edit mode, we will perform validation on the input. If the user is pressing Enter key over a cell, we will move focus to cell in the next row: ```typescript + // 1. USER INPUT VALIDATION ON TAB + if (target.column.dataType === 'number' && target.editValue < 18) { + // alert the user that the input is invalid + return; + } + // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS + const nexRowIndex = target.row.expanded ? target.rowIndex + 2 : target.rowIndex + 1; + grid.navigateTo(nexRowIndex, target.visibleColumnIndex, + (obj) => { obj.target.nativeElement.focus(); }); ``` > Note: Please refer to the sample code for full implementation details. Use the demo below to try out the custom scenarios that we just implemented: - Double click or press F2 key on a cell in the `Age` column, change the value to `16` and press tab key. Prompt message will be shown. - Select a cell and press Enter key a couple of times. Every key press will move the focus to a cell in the next row, under the same column. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { CellType, GridSelectionMode, IGridKeydownEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { EMPLOYEE_DATA } from './data'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-keyboard-navigation-sample', + styleUrls: ['./tree-grid-keyboard-navigation-sample.component.scss'], + templateUrl: './tree-grid-keyboard-navigation-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) +export class TreeGridKBNavigationComponent implements OnInit { + @ViewChild('grid1', { read: IgxTreeGridComponent, static: true }) + public grid1: IgxTreeGridComponent; + public localData: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + constructor() { } + + public ngOnInit() { + this.localData = EMPLOYEE_DATA; + } + + public customKeydown(args: IGridKeydownEventArgs) { + const target: CellType = args.target as CellType; + const evt: KeyboardEvent = args.event as KeyboardEvent; + const type = args.targetType; + + if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') { + // Value validation for number column. + // This covers both 'tab' and 'shift+tab' key interactions. + args.event.preventDefault(); + args.cancel = true; + if (target.column.dataType === 'number' && target.editValue < 18) { + alert('The value should be bigger than 18'); + return; + } + const cell = evt.shiftKey ? + this.grid1.getPreviousCell(target.row.index, target.column.visibleIndex, (col) => col.editable) : + this.grid1.getNextCell(target.row.index, target.column.visibleIndex, (col) => col.editable); + + this.grid1.navigateTo(cell.rowIndex, cell.visibleColumnIndex, + (obj) => { obj.target.activate(); }); + } else if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') { + // Perform column based kb navigation with 'enter' key press + args.cancel = true; + this.grid1.navigateTo(target.row.index + 1, target.column.visibleIndex, + (obj) => { obj.target.activate(); }); + } + } +} +``` +```html +
+ + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 15px; +} +``` ## Known Limitations |Limitation|Description| |--- |--- | | Navigating inside а grid with scrollable parent container. | If the grid is positioned inside a scrollable parent container and the user navigates to a grid cell that is out of view, parent container will not be scrolled.| ## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
_[Hierarchical Grid Keyboard Navigation](../hierarchicalgrid/keyboard-navigation.md) _ [Grid Keyboard Navigation](../grid/keyboard-navigation.md) - [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md new file mode 100644 index 000000000..042b219bd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-live-data.md @@ -0,0 +1,666 @@ +--- +_tocName: Live Data / Real-Time +_premium: true +--- +--- title: Live Data Updates in Angular Tree Grid - Ignite UI for Angular _description: Check out how the Ignite UI for Angular Tree Grid can handle thousands of updates per second, while staying responsive for user interactions. _keywords: angular data grid, angular grid updates, angular live data _license: commercial _canonicalLink: grid/live-data --- # Angular Tree Grid Live Data Updates The Tree Grid component is able to handle thousands of updates per second, while staying responsive for user interactions. ## Angular Live-data Update Example The sample below demonstrates the Tree Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the [Line Chart](../charts/types/line-chart.md) to experience the powerful charting capabilities of Ignite UI for Angular. The `Chart` button will show `Category Prices per Region` data for the selected rows and the `Chart` column button will show the same for the current row. ```typescript +import { Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject } from '@angular/core'; +import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, HorizontalAlignment, IGroupingExpression, IgxOverlayOutletDirective, OverlaySettings, PositionSettings, TreeGridFilteringStrategy, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { ITreeGridAggregation, IgxGroupedTreeGridSorting, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe } from 'igniteui-angular/grids/tree-grid'; +import { IgxSliderComponent } from 'igniteui-angular/slider'; +import { IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxFocusDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { Contract, REGIONS } from '../data/financialData'; +import { SignalRService } from '../services/signal-r.service'; +import { FormsModule } from '@angular/forms'; +import { AsyncPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive'; + +@Component({ + providers: [SignalRService], + selector: 'app-tree-grid-finjs-sample', + styleUrls: ['./tree-grid-finjs-sample.component.scss'], + templateUrl: './tree-grid-finjs-sample.component.html', + imports: [IgxSliderComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe, DatePipe, IgxTreeGridGroupingPipe] +}) + +export class TreeGridFinJSComponent implements OnDestroy, OnInit { + private elRef = inject(ElementRef); + dataService = inject(SignalRService); + + @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent; + @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent; + @ViewChild('slider1', { static: true }) public volumeSlider!: IgxSliderComponent; + @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent; + @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet!: IgxOverlayOutletDirective; + + @HostBinding('class.dark-theme') + public theme = false; + + public showToolbar = true; + public selectionMode = 'multiple'; + public volume = 1000; + public frequency = 500; + public data$: any; + public overlaySettings: OverlaySettings = { + modal: false + }; + public controls = [ + { + disabled: false, + icon: 'update', + label: 'LIVE ALL PRICES', + selected: false + }, + { + disabled: true, + icon: 'stop', + label: 'Stop', + selected: false + } + ]; + public groupingExpressions: IGroupingExpression[] = [ + { fieldName: 'category', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'type', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }, + { fieldName: 'contract', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + public aggregations: ITreeGridAggregation[] = [ + { + aggregate: (parent: any, data: any[]) => data.map((r) => r.change).reduce((ty, u) => ty + u, 0), + field: 'change' + }, + { + aggregate: (parent: any, data: any[]) => data.map((r) => r.price).reduce((ty, u) => ty + u, 0), + field: 'price' + }, + { + aggregate: (parent: any, data: any[]) => parent.change / (parent.price - parent.change) * 100, + field: 'changeP' + } + ]; + + public childDataKey = 'children'; + public groupColumnKey = 'categories'; + public sorting = IgxGroupedTreeGridSorting.instance(); + public filterStrategy = new TreeGridFilteringStrategy([this.groupColumnKey]); + + public items: any[] = [{ field: 'Export native' }, { field: 'Export JS Excel' }]; + + public _positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right, + verticalStartPoint: VerticalAlignment.Bottom + }; + + public _overlaySettings: OverlaySettings = { + closeOnOutsideClick: true, + modal: false, + positionStrategy: new ConnectedPositioningStrategy(this._positionSettings), + scrollStrategy: new AbsoluteScrollStrategy() + }; + + public contracts = Contract; + public regions = REGIONS; + public isLoading = true; + + private subscription: any; + private selectedButton: number; + private _timer: any; + + constructor() { + this.dataService.startConnection(); + this.overlaySettings.outlet = this.outlet; + this.data$ = this.dataService.data; + this.dataService.getData(0); + + this.data$.subscribe((data) => { + if (data.length !== 0) { + this.isLoading = false; + }; + }); + } + + public ngOnInit(): void { + this.overlaySettings.outlet = this.outlet; + } + + public onButtonAction(event: any): void { + switch (event.index) { + case 0: { + this.disableOtherButtons(event.index, true); + if (this.dataService.hasRemoteConnection) { + this.dataService.broadcastParams(this.frequency, this.volume, true); + } else { + const currData = this.grid1.filteredSortedData ?? this.grid1.data; + this._timer = setInterval(() => this.dataService.updateAllPriceValues(currData), this.frequency); + } + break; + } + case 1: { + if (this.dataService.hasRemoteConnection) { + this.dataService.stopLiveData(); + } else { + this.stopFeed(); + } + this.disableOtherButtons(event.index, false); + break; + } + default: break; + } + } + + updateVolume(): void { + this.dataService.hasRemoteConnection ? this.dataService.broadcastParams(this.frequency, this.volume, false) : + this.dataService.getData(this.volume); + } + + public stopFeed(): void { + if (this._timer) { + clearInterval(this._timer); + } + if (this.subscription) { + this.subscription.unsubscribe(); + } + } + + public formatNumber(value: number) { + return value ? value.toFixed(2) : ''; + } + + public percentage(value: number) { + return value ? value.toFixed(2) + '%' : ''; + } + + public formatCurrency(value: number) { + return value ? '$' + value.toFixed(3) : ''; + } + + /** + * the below code is needed when accessing the sample through the navigation + * it will style all the space below the sample component element, but not the navigation menu + */ + public onThemeChanged(event: any) { + const parentEl = this.parentComponentEl(); + if (event.checked && parentEl.classList.contains('main')) { + parentEl.classList.add('fin-dark-theme'); + } else { + parentEl.classList.remove('fin-dark-theme'); + } + } + public ngOnDestroy() { + this.stopFeed(); + } + + public toggleToolbar() { + this.showToolbar = !this.showToolbar; + } + + private negative = (rowData: any): boolean => rowData['changeP'] < 0; + private positive = (rowData: any): boolean => rowData['changeP'] > 0; + private changeNegative = (rowData: any): boolean => rowData['changeP'] < 0 && rowData['changeP'] > -1; + private changePositive = (rowData: any): boolean => rowData['changeP'] > 0 && rowData['changeP'] < 1; + private strongPositive = (rowData: any): boolean => rowData['changeP'] >= 1; + private strongNegative = (rowData: any, key: string): boolean => rowData['changeP'] <= -1; + + /* eslint-disable @typescript-eslint/member-ordering */ + public trends = { + changeNeg: this.changeNegative, + changePos: this.changePositive, + negative: this.negative, + positive: this.positive, + strongNegative: this.strongNegative, + strongPositive: this.strongPositive + }; + + public trendsChange = { + changeNeg2: this.changeNegative, + changePos2: this.changePositive, + strongNegative2: this.strongNegative, + strongPositive2: this.strongPositive + }; + /* eslint-enable @typescript-eslint/member-ordering */ + + private disableOtherButtons(ind: number, disableButtons: boolean) { + if (this.subscription) { + this.subscription.unsubscribe(); + } + this.volumeSlider.disabled = disableButtons; + this.intervalSlider.disabled = disableButtons; + this.selectedButton = ind; + this.buttonGroup1.buttons.forEach((button, index) => { + if (index === 1) { button.disabled = !disableButtons; } else { + button.disabled = disableButtons; + } + }); + } + + /** + * returns the main div container of the Index Component, + * if path is /samples/sample-url, or the appRoot, if path is /sample-url + */ + private parentComponentEl() { + return this.elRef.nativeElement.parentElement.parentElement; + } + + get buttonSelected(): number { + return this.selectedButton || this.selectedButton === 0 ? this.selectedButton : -1; + } +} +``` +```html +
+
+
+
+
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+ @if (buttonSelected === 0) { + Feeding {{volume}} records every {{frequency / 1000}} sec. + ~{{volume/5}} records updated. + } +
+ + @if (showToolbar) { + + + + + + + + } + + + + + + + + + + + + + + + + + + + + @for (r of regions; track r) { + {{ r.Name }} + } + + + + + + {{ cell.value | date }} + + + + + +
+ {{cell.value | currency:'USD':'symbol':'1.4-4'}} + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + } +
+ + + + + + + + + + + + + + + + + + + + +
+ +
+
+``` +```scss +@use '../../variables' as *; + +:host ::ng-deep { + .fin-dark-theme { + .finjs-slider, + .sample-toolbar, + .group-drop-area { + color: contrast-color(null, 'gray', 900); + } + + .group-drop-area { + background: color(null, 'surface', 500); + } + } + + .finjs-icons { + display: flex; + align-items: center; + + igx-icon { + font-size: rem(16px); + width: rem(16px); + height: rem(16px); + margin-inline-start: rem(4px); + } + } + + .igx-grid__grouparea { + max-height: 100%; + height: auto; + } + + .changePos, + .changeNeg, + .strongPositive, + .strongNegative { + color: contrast-color(null, 'gray', 900) !important; + + .igx-grid__td-text { + padding: rem(2px) rem(5px); + } + } + + .positive { + color: color(null, 'success', 500) !important; + } + + .positive.strongPositive { + .igx-grid__td-text { + color: color(null, 'success', 500, .8) !important; + } + } + + .negative { + color: color(null, 'error', 500) !important; + } + + .negative.strongNegative { + .igx-grid__td-text { + color: color(null, 'error', 500, .8) !important; + } + } + + // NORMAL + // positive + .changePos { + .igx-grid__td-text { + background: color(null, 'success', 500, .5); + } + } + + .changePos1 { + background: color(null, 'success', 500, .5); + color: contrast-color(null, 'gray', 900); + } + + .changePos2 { + .igx-grid__td-text { + border-inline-end: rem(4px) solid color(null, 'success', 500, .5); + padding-inline-end: rem(4px); + } + } + + // negative + .changeNeg { + .igx-grid__td-text { + background: color(null, 'error', 500, .5); + } + } + + .changeNeg1 { + background: color(null, 'error', 500, .5); + color: contrast-color(null, 'gray', 900); + } + + .changeNeg2 { + .igx-grid__td-text { + border-right: rem(4px) solid color(null, 'error', 500, .5); + padding-right: rem(4px); + } + } + + // selected + .igx-grid__td--selected.changePos1, + .igx-grid__td--selected.changePos2, + .igx-grid__td--selected.changePos { + background-color: color(null, 'success', 500, .5) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .igx-grid__td--selected.changeNeg1, + .igx-grid__td--selected.changeNeg2, + .igx-grid__td--selected.changeNeg { + background-color: color(null, 'error', 500, .5) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + // STRONG + // positive + .strongPositive { + .igx-grid__td-text { + background: color(null, 'success', 500); + } + } + + .strongPositive1 { + background: color(null, 'success', 500); + color: contrast-color(null, 'gray', 900); + } + + .strongPositive2 { + .igx-grid__td-text { + border-right: rem(4px) solid color(null, 'success', 500); + padding-right: rem(4px); + } + } + + // negative + .strongNegative { + .igx-grid__td-text { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); + } + } + + .strongNegative1 { + background: color(null, 'error', 500); + color: contrast-color(null, 'gray', 900); + } + + .strongNegative2 { + .igx-grid__td-text { + border-right: rem(4px) solid color(null, 'error', 500); + padding-right: rem(4px); + } + } + + // selected + .igx-grid__td--selected.strongPositive1, + .igx-grid__td--selected.strongPositive2, + .igx-grid__td--selected.strongPositive { + background-color: color(null, 'success', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .igx-grid__td--selected.strongNegative1, + .igx-grid__td--selected.strongNegative2, + .igx-grid__td--selected.strongNegative { + background-color: color(null, 'error', 500) !important; + + .finjs-icons, + .igx-grid__td-text { + color: contrast-color(null, 'gray', 900); + } + } + + .controls-holder { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + width: 100%; + padding-block-end: rem(4px); + } + + .switches { + display: flex; + justify-content: space-between; + align-items: center; + flex: 1 0 0%; + padding-right: rem(20px); + font-size: .9rem; + } + + .control-item { + padding-right: rem(20px); + } + + .igx-slider, + .igx-slider--disabled { + height: rem(24px); + } + + .finjs-slider { + width: 40%; + min-width: rem(145px); + } + + .finjs-play-controls { + width: 45%; + min-width: rem(620px); + margin-block-start: rem(10px); + } + + .sample-toolbar { + height: rem(20px); + font-size: .8rem; + line-height: rem(20px); + margin-block-start: rem(11px); + } + + .igx-grid__outlet span, + .igx-excel-filter span, + .igx-excel-filter header, + .igx-excel-filter input { + font-size: 0.8125rem; + } + + .igx-button--icon { + width: 2rem; + height: 2rem; + } +} + +.grid__wrapper { + position: relative; + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + padding: rem(15px); + display: flex; + flex-direction: column; + + igx-tree-grid { + --ig-size: var(--ig-size-small); + } +} + +igx-grid { + flex: 1 0 0%; +} + +.controls-wrapper { + display: flex; + justify-content: center; + position: relative; +} + +.grid-toolbar-title { + max-width: none; +} +``` ## API References
- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxBaseTransactionService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) ## Additional Resources
- [Data Grid](../grid/grid.md) - [Row Editing](row-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md new file mode 100644 index 000000000..244ab1454 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-load-on-demand.md @@ -0,0 +1,135 @@ +--- +title: Tree Grid load on demand - Native Angular | Ignite UI for Angular +_description: The Ignite UI for Angular Tree Grid provides the necessary tools to load child data on demand when a parent row is expanded. That way the volume of data would be greatly reduced and can be retrieved only when the user needs it. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Tree Grid, Tree Table +_license: commercial +_tocName: Load On Demand +_premium: true +--- + +# Tree Grid Load On Demand + +The Ignite UI for Angular [`IgxTreeGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) can be rendered in such way that it requires the minimal amount of data to get from the server so the user could see it as quickly as possible. Then, only after the user expands a row, the children for that particular parent row will be loaded. This mechanism, also known as Load on Demand, can be easily configured to work with any remote data. + +## Angular Tree Grid Load On Demand Example + + +```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { TreeGridLoadOnDemandService } from './remoteService'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-load-on-demand-sample', + styleUrls: ['./tree-grid-load-on-demand-sample.component.scss'], + templateUrl: './tree-grid-load-on-demand-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridLoadOnDemandSampleComponent implements OnInit { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public data = []; + private dataService = new TreeGridLoadOnDemandService(); + + constructor() { } + + public ngOnInit() { + this.treeGrid.isLoading = true; + this.dataService.getData(-1, (children) => { + this.data = children; + this.treeGrid.isLoading = false; + }); + } + + public loadChildren = (parentID: any, done: (children: any[]) => void) => { + this.dataService.getData(parentID, (children) => done(children)); + }; +} +``` +```html +
+ + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} +``` + +
+ +### Usage + +The Load on Demand feature is compatible with both types of Tree Grid data sources - [`primary and foreign keys`](tree-grid.md#primary-and-foreign-keys) or [`child collection`](tree-grid.md#child-collection). You only need to load the root level data in the Tree Grid and specify the necessary keys for one of the data source types. In order to load the child rows when the user expands a row, the Tree Grid provides the callback input property [`loadChildrenOnDemand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#loadChildrenOnDemand). + +```html + + ... + +``` + +The [`loadChildrenOnDemand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#loadChildrenOnDemand) callback provides two parameters: + +- parentID - the ID of the parent row that is being expanded. +- done - callback that should be called with the children when they are retrieved from the server. + +```typescript +public loadChildren = (parentID: any, done: (children: any[]) => void) => { + this.dataService.getData(parentID, (children) => done(children)); +} +``` + +After the user clicks the expand icon, it is replaced by a loading indicator. When the `done` callback is called, the loading indicator disappears and the children are loaded. The Tree Grid adds the children to the underlying data source and populates the necessary keys automatically. + +If you have a way to provide an information whether a row has children prior to its expanding, you could use the [`hasChildrenKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#hasChildrenKey) input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed. + +```html + + ... + +``` + +Note that setting the [`hasChildrenKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#hasChildrenKey) property is not required. In case you don't provide it, expansion indicators will be displayed for each row. After expanding a row that has no children, you still need to call the `done` callback with undefined or empty array. In this case after the loading indicator disappears, the expansion indicator never shows up. + +If you want to provide your own custom loading indicator, you may create an ng-template and mark it with the `igxRowLoadingIndicator` directive. The following code snippet demonstrates how to define such custom template: + +```html + + + ... + + + loop + + +``` + +## API References + +
+ +- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) + +## Additional Resources + +
+ +- [Tree Grid overview](tree-grid.md) +- [Tree Grid Virtualization and Performance](virtualization.md) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md new file mode 100644 index 000000000..6dd2aa9f5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-multi-column-headers.md @@ -0,0 +1,303 @@ +--- +_tocName: Multi-column Headers +_premium: true +--- +--- title: Angular Multi-column Headers - Ignite UI for Angular _description: SStart grouping column headers by placing them under a common hierarchical header with the help of Ignite UI for Angular grid and combine them into multi headers. _keywords: column headers, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/multi-column-headers --- # Angular Tree Grid Multi-column Headers Overview [`IgxTreeGrid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) supports `multi-column headers` which allows you to group columns by placing them under a common multi headers. Each multi-column headers group could be a representation of combinations between other groups or columns within the Material UI grid. ## Angular Tree Grid Multi-column Headers Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-multi-column-headers-sample', + styleUrls: ['./tree-grid-multi-column-headers-sample.component.scss'], + templateUrl: './tree-grid-multi-column-headers-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxButtonDirective] +}) +export class TreeGridMultiColumnHeadersSampleComponent { + + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + public data = generateEmployeeDetailedFlatData(); + public selectionMode: GridSelectionMode = 'none'; + + public pinUnpinGroup() { + const firstColumnGroup = this.treeGrid.columnList.filter((c) => c.header === 'General Information')[0]; + firstColumnGroup.pinned = !firstColumnGroup.pinned; + } + + public showHideGroup() { + const firstColumnGroup = this.treeGrid.columnList.filter((c) => c.header === 'General Information')[0]; + firstColumnGroup.hidden = !firstColumnGroup.hidden; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 10px; +} + +.igx-button--contained { + margin-right: 5px; +} +``` The declaration of `Multi-column header` could be achieved by wrapping a set of columns into [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) component with [`header`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#header) title passed. ```html + + + + + ``` For achieving `n-th` level of nested headers, the declaration above should be followed. So by nesting [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) leads to the desired result. ```html + + + + + + + + ``` Every [`igx-column-group`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) supports [`moving`](column-moving.md), [`pinning`](column-pinning.md) and [`hiding`](column-hiding.md). > [!NOTE] > When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested `column groups` or `columns` is not allowed.
> Please note that when using Pinning with Multi-Column Headers, the entire Group gets pinned.
> Moving between `columns` and `column groups` is allowed only when they are at the same level in the hierarchy and both are in the same `group`.
> When `columns/column-groups` are not wrapped by current `group` which means they are **top level** `columns`, moving is allowed between whole visible columns. ```html + + + + + + ``` ## Multi-column Header Template Each of the column groups of the grid can be templated separately. The column group expects `ng-template` tag decorated with the `igxHeader` directive. The `ng-template` is provided with the column group object as a context. ```html ... + + {{ columnGroup.header | uppercase }} + + ... ... ``` If you want to re-use a single template for several column groups, you could set the [`headerTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html#headertemplate) property of the column group like this: ```html + {{ columnGroup.header | uppercase }} ... + ... + ... ... ``` > [!NOTE] > If a column header is retemplated and the grid moving is enabled, you have to set the **draggable** attribute of corresponding column to **false** on the templated elements, so that you can handle any of the events that are applied! ```html + ``` The following sample demonstrates how to implement collapsible column groups using header templates. ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-multi-column-header-template-sample', + styleUrls: ['./tree-grid-multi-column-header-template-sample.component.scss'], + templateUrl: './tree-grid-multi-column-header-template-sample.component.html', + imports: [IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class TreeGridMultiColumnHeaderTemplateSampleComponent { + + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + public data: any[] = generateEmployeeDetailedFlatData(); + public columnGroupStates = new Map(); + public selectionMode: GridSelectionMode = 'none'; + constructor() { + for (const item of this.data) { + item.Location = `${item.Address}, ${item.City}, ${item.Country}`; + } + } + + public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) { + const columns = columnGroup.childColumns; + + if (columnGroup.header === 'General Information') { + const col = columns[1]; + col.hidden = !col.hidden; + } else if (columnGroup.header === 'Address Information') { + for (const col of columns) { + col.hidden = !col.hidden; + } + } + + this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup)); + } +} +``` +```html +
+ +
+ + {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}} + {{col.header}} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 10px; +} + +.column-group-template__container { + display: flex; + align-items: center; +} + +.column-group-template__icon { + cursor: pointer; +} +``` ## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$header-background`, `$header-text-color`, `$header-border-width`, `$header-border-style` and `$header-border-color` parameters. ```scss $custom-theme: grid-theme( + $header-background: #e0f3ff, + $header-text-color: #e41c77, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: rgba(0, 0, 0, 0.08) ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-multi-column-headers-styling', + styleUrls: ['./tree-grid-multi-column-headers-styling.component.scss'], + templateUrl: './tree-grid-multi-column-headers-styling.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent] +}) +export class TreeGridMultiColumnHeadersStylingComponent { + + public data = generateEmployeeDetailedFlatData(); +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $header-background: #e0f3ff, + $header-text-color: #e41c77, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: rgba(0, 0, 0, 0.08) +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References
- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html)
## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md new file mode 100644 index 000000000..06f00e5e5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-paging.md @@ -0,0 +1,400 @@ +--- +_tocName: Paging +_premium: true +--- +--- title: Angular Grid Paging | Angular Pagination Table | Infragistics _description: Configure Angular pagination and create custom pages in the Angular table by Ignite UI, get data for the requested pages with variety of angular events. _keywords: angular pagination, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/paging --- # Angular Tree Grid Pagination Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Tree Grid pagination is configurable via a separate component projected in the grid tree by defining a `igx-paginator` tag, similar to adding of a column. As in any Angular Table, the pagination in the Tree Grid supports template for custom pages. ## Angular Pagination Example The following example represents Tree Grid pagination and exposes the options usage of `items per page` and how paging can be enabled. The user can also quickly navigate through the Tree Grid pages via "Go to last page" and "Go to first page" buttons. ```typescript +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'app-tree-grid-paging-sample', + styleUrls: ['./tree-grid-paging-sample.component.scss'], + templateUrl: 'tree-grid-paging-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridPagingSampleComponent implements OnInit { + @ViewChild('treegrid1', { static: true }) public grid1: IgxTreeGridComponent; + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +@use '../../../variables' as *; + +$progressBar-sample-theme: progress-linear-theme( + $track-color: rgba(181,181,181, .5), + $fill-color-default: orange +); + +.grid__wrapper { + @include progress-linear($progressBar-sample-theme); + + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 10px; +} + +.cell__inner, +.cell__inner_2 { + display: flex; + align-items: center; + height: 100%; +} + +.cell__inner { + position: relative; + justify-content: space-between; +} + +.linear-bar-container { + width: 100%; +} +``` Adding a [`igx-paginator`](../paginator.md) component will control whether the feature is present, you can enable/disable it by using a simple `*ngIf` with a toggle property. The [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage) input controls the visible records per page. Let’s update our Tree Grid to enable paging: ```html + + ``` Example: ```html + +
+ + + Page {{paginator.page}} of {{paginator.totalPages}} + + +
+ ``` ## Usage The `igx-paginator` component is used along with the `igx-tree-grid` component in the example below, but you can use it with any other component in case paging functionality is needed. ```html + + ``` ### Paginator Component Demo ```typescript +import { Component, OnInit, ViewChild, AfterViewInit, PLATFORM_ID, inject } from '@angular/core'; +import { IPaginatorResourceStrings } from 'igniteui-angular/core'; +import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +import { FormsModule } from '@angular/forms'; +import { isPlatformBrowser } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-pager-sample', + styleUrls: ['./tree-grid-pager-sample.component.scss'], + templateUrl: './tree-grid-pager-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule] +}) +export class TreeGridPagerSampleComponent implements OnInit, AfterViewInit { + private platformId = inject(PLATFORM_ID); + + @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) + paginator: IgxPaginatorComponent; + + public data: any[]; + public densityOptions: string[]; + public isDropdownHidden = false; + public isPagerHidden = false; + public selectOptions = [5, 15, 20, 50]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + private paginatorResourceStrings: IPaginatorResourceStrings = { + // eslint-disable-next-line @typescript-eslint/naming-convention + igx_paginator_label: 'Records per page' + }; + + public ngOnInit(): void { + this.data = ORDERS_DATA; + this.densityOptions = ['compact', 'cosy', 'comfortable']; + } + + public ngAfterViewInit(): void { + if (isPlatformBrowser(this.platformId)) { + requestAnimationFrame(() => { + this.paginator.resourceStrings = this.paginatorResourceStrings; + }); + } + } +} +``` +```html +
+ + + + @if (!isDropdownHidden) { + + } + @if (!isPagerHidden) { + + } + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + + + +
+ Hide Dropdown + Hide Pager +
+
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 10px; +} + +igx-switch { + margin: 24px; +} + +.options-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 1rem; +} +.options_container * { margin-right: 15px; } + +.select-input { + max-width: 150px; + padding-top: 5px; + padding-bottom: 5px; + margin-left: 15px; +} +```
## Remote Paging Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription. For more detailed information, check the [`Tree Grid Remote Data Operations`](remote-data-operations.md#remote-paging) topic. ## Styling To get started with styling the paginator, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`paginator-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-paginator-theme) and accepts the `$text-color`, `$background-color` and the `$border-color` parameters. ```scss $dark-paginator: paginator-theme( + $text-color: #d0ab23;, + $background-color: #231c2c, + $border-color: #d0ab23; ); ``` As seen, the `paginator-theme` only controls colors for the paging container, but does not affect the buttons in the pager UI. To style those buttons, let's create a new icon button theme: ```scss $dark-button: flat-icon-button-theme( + $foreground: #d0ab23, + $hover-foreground: #231c2c, + $hover-background: #d0ab23, + $focus-foreground: #231c2c, + $focus-background: #d0ab23, + $disabled-foreground: #9b7829 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins, each with its respective theme: ```scss :host { + @include tokens($dark-paginator); + + .igx-grid-paginator__pager { + @include tokens($dark-button); + } } ``` >[!NOTE] >We include the created **icon-button-theme** within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` in order to style the components which are inside the paging container, like the button: ```scss :host { + @include tokens($dark-paginator); + + igx-paginator { + ::ng-deep { + @include tokens($dark-button); + } + } } ``` ### Demo ```typescript +import { Component, OnInit } from '@angular/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-paging-sample', + styleUrls: ['./tree-grid-paging-style-sample.component.scss'], + templateUrl: 'tree-grid-paging-style-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridPagingStyleSampleComponent implements OnInit { + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + @if (val) { + CDelivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$my-primary: #231c2c; +$my-secondary: #d0ab23; +$dark-gray: #333; +$light-gray: #999; +$inactive-color: #826217; + +$dark-paginator: paginator-theme( + $text-color: $my-secondary, + $background-color: $my-primary, + $border-color: $my-secondary +); + +$dark-button: flat-icon-button-theme( + $foreground: $my-secondary, + $hover-foreground: $dark-gray, + $hover-background: $my-secondary, + $focus-foreground: $dark-gray, + $focus-background: $my-secondary, + $border-color: $my-secondary, + $focus-border-color: $my-secondary, + $disabled-foreground: $inactive-color +); + +$dark-select: select-theme( + $toggle-button-background: $my-primary, + $toggle-button-foreground: $inactive-color, + $toggle-button-foreground-filled: $inactive-color, + $toggle-button-foreground-focus: $inactive-color, + $toggle-button-background-focus--border: $my-primary, +); + +$dark-input-group: input-group-theme( + $filled-text-color: $my-secondary, + $idle-text-color: $my-secondary, + $filled-text-hover-color: $my-secondary, + $focused-text-color: $my-secondary, + $border-color: darken($inactive-color, 10%), + $focused-border-color: $my-secondary, + $input-suffix-color: $my-secondary, +); + +$dark-drop-down-theme: drop-down-theme( + $background-color: $my-primary, + $item-text-color: $my-secondary, + $selected-item-background: $my-secondary, + $selected-item-text-color: $dark-gray, + $focused-item-background: $my-secondary, + $focused-item-text-color: $dark-gray, + $selected-focus-item-background: $my-secondary, + $selected-focus-item-text-color: $dark-gray, + $selected-hover-item-background: $my-secondary, + $selected-hover-item-text-color: $dark-gray +); + +:host { + @include tokens($dark-paginator); + @include tokens($dark-drop-down-theme); + + igx-paginator { + @include tokens($dark-button); + @include tokens($dark-input-group); + @include tokens($dark-select); + } +} +``` ## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxGridPaginator Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-paginator-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Paginator](../paginator.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md new file mode 100644 index 000000000..54df5a0db --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-remote-data-operations.md @@ -0,0 +1,485 @@ +--- +_tocName: Remote Data Operations +_premium: true +--- +--- title: Angular Tree Remote Data Operations - Ignite UI for Angular _description: Start using Angular remote data operations like remote filtering, remote sorting, and remote scrolling to load data from a server with Ignite UI for Angular. _keywords: angular remote data operations, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/remote-data-operations --- # Angular Tree Grid Remote Data Operations The Ignite UI for Angular Tree Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. This allows the developer to perform these tasks on a server, retrieve the data that is produced and display it in the Tree Grid. ## Angular Tree Grid Remote Data Operations Overview Example ```typescript +import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { NoopFilteringStrategy } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { Observable, Subject } from 'rxjs'; +import { debounceTime, takeUntil } from 'rxjs/operators'; +import { RemoteFilteringService } from '../services/remoteFilteringService'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { AsyncPipe } from '@angular/common'; + +const DEBOUNCE_TIME = 300; + +@Component({ + providers: [RemoteFilteringService], + selector: 'app-tree-grid-remote-filtering-sample', + styleUrls: ['./tree-grid-remote-filtering-sample.component.scss'], + templateUrl: './tree-grid-remote-filtering-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, AsyncPipe] +}) +export class TreeGridRemoteFilteringSampleComponent implements OnInit, AfterViewInit, OnDestroy { + private _remoteService = inject(RemoteFilteringService); + private _cdr = inject(ChangeDetectorRef); + + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public remoteData: Observable; + public noopFilterStrategy = NoopFilteringStrategy.instance(); + + private destroy$ = new Subject(); + + public ngOnInit() { + this.remoteData = this._remoteService.remoteData; + } + + public ngAfterViewInit() { + this.processData(); + this._cdr.detectChanges(); + + this.treeGrid.filteringExpressionsTreeChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); + } + + public processData() { + this.treeGrid.isLoading = true; + + const filteringExpr = this.treeGrid.filteringExpressionsTree; + + this._remoteService.getData(filteringExpr, () => { + this.treeGrid.isLoading = false; + }); + } + + public ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} +``` +```html +
+ + + + + + + + account_circle + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +```
By default, the Tree Grid uses its own logic for performing data operations. You can perform these tasks remotely and feed the resulting data to the Tree Grid by taking advantage of certain inputs and events, which are exposed by the Tree Grid. ### Remote Filtering To provide remote filtering, you need to subscribe to the [`filteringExpressionsTreeChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filteringExpressionsTreeChange) output so that you make the appropriate request based on the arguments received. Let's use a flat collection as a data source for our Tree Grid by providing a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#primaryKey) and a [`foreignKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#foreignKey). We will also take advantage of the **rxjs** `debounceTime` function, which emits a value from the source Observable only after a particular time span has passed without another source emission. This way the remote operation will be triggered only when the specified amount of time has passed without the user interrupting it. ```typescript const DEBOUNCE_TIME = 300; ... public ngAfterViewInit() { + ... + this.treeGrid.filteringExpressionsTreeChange.pipe( + debounceTime(DEBOUNCE_TIME), + takeUntil(this.destroy$) + ).subscribe(() => { + this.processData(); + }); } ``` When remote filtering is provided, usually we do not need the built-in filtering of the Tree Grid. We can disable it by setting the [`filterStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#filterStrategy) input of the Tree Grid to the `NoopFilteringStrategy` instance. ```html + + + ``` ```typescript // tree-grid-remote-filtering-sample.ts public noopFilterStrategy = NoopFilteringStrategy.instance(); public processData() { + this.treeGrid.isLoading = true; + + const filteringExpr = this.treeGrid.filteringExpressionsTree; + + this._remoteService.getData(filteringExpr, () => { + this.treeGrid.isLoading = false; + }); } ``` The remote filtering will have to be performed over the flat collection directly. We will also have to include all the parents for any record that matches the filtering condition regardless of whether or not the parents match the filtering (we do this to keep the hierarchy intact). The result can be seen below: >[!NOTE] >When remote data is requested, the filtering operation is case-sensitive. ### Remote Filtering Demo You can see the result of the code from above at the beginning of this article in the [Demo](#angular-tree-grid-remote-data-operations-overview-example) section. ### Unique Column Values Strategy The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. The Tree Grid generates these values based on its data source by default. In case of remote filtering, the grid data does not contain all the data from the server. In order to provide the unique values manually and load them on demand, we can take advantage of the Tree Grid's [`uniqueColumnValuesStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#uniqueColumnValuesStrategy) input. This input is actually a method that provides three arguments: - **column** - The respective column instance. - **filteringExpressionsTree** - The filtering expressions tree, which is reduced based on the respective column. - **done** - Callback that should be called with the newly generated column values when they are retrieved from the server. The developer can manually generate the necessary unique column values based on the information, that is provided by the **column** and the **filteringExpressionsTree** arguments and then invoke the **done** callback. > [!NOTE] > When the [`uniqueColumnValuesStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#uniqueColumnValuesStrategy) input is provided, the default unique values generating process in the excel style filtering will not be used. ```html + ... ``` ```typescript public columnValuesStrategy = (column: ColumnType, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); } ``` ### Unique Column Values Strategy Demo ```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { IFilteringExpressionsTree } from 'igniteui-angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { RemoteValuesService } from './remoteValues.service'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-excel-style-filtering-load-on-demand', + styleUrls: ['./tree-grid-excel-style-filtering-load-on-demand.component.scss'], + templateUrl: './tree-grid-excel-style-filtering-load-on-demand.component.html', + providers: [RemoteValuesService], + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] +}) +export class TreeGridExcelStyleFilteringLoadOnDemandComponent implements OnInit { + private remoteValuesService = inject(RemoteValuesService); + + + public data: any[]; + + public ngOnInit() { + this.data = this.remoteValuesService.getRecordsData(); + } + + public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); + }; +} +``` +```html +
+ + + + + + + + + + + + + + + account_circle + + + +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 16px; +} +``` In order to provide a custom loading template for the excel style filtering, we can use the `igxExcelStyleLoading` directive: ```html + ... + + Loading ... + ```
## Remote Paging @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { The paging feature can operate with remote data. In order to demonstrate this let's first declare our service that will be responsible for data fetching. We will need the count of all data items in order to calculate the page count. This logic will be added to our service. ```typescript @Injectable() export class RemotePagingService { + public remoteData: BehaviorSubject; + public dataLenght: BehaviorSubject = new BehaviorSubject(0); + public url = 'https://www.igniteui.com/api/products'; + + constructor(private http: HttpClient) { + this.remoteData = new BehaviorSubject([]) as any; + } + + public getData(index?: number, perPage?: number): any { + let qS = ''; + + if (perPage) { + qS = `?$skip=${index}&$top=${perPage}&$count=true`; + } + + this.http + .get(`${this.url + qS}`).pipe( + map((data: any) => data) + ).subscribe((data) => this.remoteData.next(data)); + } + + public getDataLength(): any { + return this.http.get(this.url).pipe( + map((data: any) => data.length) + ); + } } ``` After declaring the service, we need to create a component, which will be responsible for the Tree Grid construction and data subscription. } In this sample we will demonstrate how to display a certain number of root records per page no matter how many child records they have. In order to cancel the built-in Tree Grid paging algorithm, which displays a certain number of records no matter their level (root or child), we have to set the [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage) property to `Number.MAX_SAFE_INTEGER`. ```html + + ... ``` ```typescript public maxPerPage = Number.MAX_SAFE_INTEGER; ``` Now we can choose between setting-up our own _custom paging template_ or using the default one that the `igx-paginator` provides. Let's first take a look what is necessary to set-up remote paging by using the _default paging template_. ### Remote paging with default template If you want to use the _default paging template_ you need to set the Paginator's [`totalRecords`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#totalRecords) property, only then the grid will be able to calculate the _total page number_ based on total remote records. When performing a remote pagination the Paginator will pass to the Grid only the data for the current page, so the grid will not try to paginate the provided data source. That's why we should set Grid's [`pagingMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#pagingMode) property to _GridPagingMode.remote_. Also it is necessary to either subscribe to [`pagingDone`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#pagingDone) or [`perPageChange`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPageChange) events in order to fetch the data from your remote service, it depends on the use case which event will be used. ```html + + ... + + ``` ```typescript public totalCount = 0; public data: Observable; public mode = GridPagingMode.remote; public isLoading = true; @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; private _dataLengthSubscriber; public set perPage(val: number) { + this._perPage = val; + this.paginate(0); } public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data: any) => { + this.totalCount = data; + this.grid1.isLoading = false; + }); } public ngAfterViewInit() { + const skip = this.page * this.perPage; + this.remoteService.getData(skip, this.perPage); } public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); } ``` ```typescript +import { formatNumber, AsyncPipe } from '@angular/common'; +import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { GridPagingMode, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { Observable } from 'rxjs'; +import { RemotePagingService } from './remotePagingService'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingService], + selector: 'app-tree-grid-remote-paging-default-template', + styleUrls: ['./tree-grid-remote-paging-default-template.component.scss'], + templateUrl: './tree-grid-remote-paging-default-template.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, AsyncPipe] +}) +export class TreeGridRemotePagingDefaultTemplateComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + private cd = inject(ChangeDetectorRef); + + + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + + public totalCount = 0; + public page = 0; + public data: Observable; + public mode = GridPagingMode.Remote; + public isLoading = true; + + private _dataLengthSubscriber; + private _perPage = 10; + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0); + } + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + this.data.subscribe(() => { + this.isLoading = false; + this.cd.detectChanges(); + }); + this._dataLengthSubscriber = this.remoteService.dataLength.subscribe((data) => { + this.totalCount = data; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.remoteService.getData(0, this.treeGrid.perPage); + this.remoteService.getDataLength(); + } + + public paginate(page) { + this.isLoading = true; + const skip = page * this.treeGrid.perPage; + this.remoteService.getData(skip, this.treeGrid.perPage); + } + + public formatSize(value: number) { + return formatNumber(value, 'en') + ' KB'; + } +} +``` +```html +
+ + + + + + @if (cell.row.data.Type === 'File folder') { + folder + + } + @if (cell.row.data.Type === 'JPG File') { + photo + } + {{val}} + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} + +.typeIcon { + margin-right: 0.5rem; +} +```
### Remote Paging with custom igx-paginator-content When we define a custom paginator content we need to define the content in a way to get the data only for the requested page and to pass the correct **skip** and **top** parameters to the remote service according to the selected page and items [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage). We are going to use the `` in order to ease our example configuration, along with the [`IgxPageSizeSelectorComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageSizeSelectorComponent.html) and [`IgxPageNavigationComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPageNavigationComponent.html) that were introduced - `igx-page-size` will add the per page dropdown and label and `igx-page-nav` will add the navigation action buttons and labels. ```html + + + [This is my custom content] + + ``` ```typescript public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + + this.remoteService.getData(skip, top); } ``` >[!NOTE] > In order the Remote Paging to be configured properly a `GridPagingMode.Remote` should be set: ```html ... public mode = GridPagingMode.Remote; ``` The last step will be to declare the paginator content based on your requirements. ```html + + [This is my custom content] + ``` After all the changes above, the following result will be achieved. ```typescript +import { formatNumber, AsyncPipe } from '@angular/common'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'; +import { GridPagingMode, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { Observable } from 'rxjs'; +import { RemotePagingService } from './remotePagingService'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + encapsulation: ViewEncapsulation.None, + providers: [RemotePagingService], + selector: 'app-tree-grid-remote-paging-grid-sample', + styleUrls: ['./tree-grid-remote-paging-sample.component.scss'], + templateUrl: './tree-grid-remote-paging-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, AsyncPipe] +}) +export class TreeGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { + private remoteService = inject(RemotePagingService); + + + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + + public page = 0; + public lastPage = false; + public firstPage = true; + public totalPages = 1; + public totalCount = 0; + public data: Observable; + public selectOptions = [5, 10, 25, 50]; + public mode = GridPagingMode.Remote; + private _perPage = 10; + private _dataLengthSubscriber; + + public get perPage(): number { + return this._perPage; + } + + public set perPage(val: number) { + this._perPage = val; + this.paginate(0); + } + + public ngOnInit() { + this.data = this.remoteService.remoteData.asObservable(); + + this._dataLengthSubscriber = this.remoteService.dataLength.subscribe((data) => { + this.totalCount = data; + this.totalPages = Math.ceil(data / this.perPage); + this.treeGrid.isLoading = false; + }); + } + + public ngOnDestroy() { + if (this._dataLengthSubscriber) { + this._dataLengthSubscriber.unsubscribe(); + } + } + + public ngAfterViewInit() { + this.treeGrid.isLoading = true; + + this.remoteService.getData(0, this.perPage); + this.remoteService.getDataLength(); + } + + public paginate(page: number) { + this.page = page; + const skip = this.page * this.perPage; + const top = this.perPage; + this.remoteService.getData(skip, top); + } + + public formatSize(value: number) { + return formatNumber(value, 'en') + ' KB'; + } +} +``` +```html +
+ + + + @if (cell.row.data.Type === 'File folder') { + folder + + } + @if (cell.row.data.Type === 'JPG File') { + photo + } + {{val}} + + + + + + + + [This is my custom content] + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} + +.typeIcon { + margin-right: 0.5rem; +} +```
## Known Issues and Limitations - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning - In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IRowSelectionEventArgs.html#oldSelection) event argument will not contain the full row data object for the rows that are currently out of the data view. In this case, `rowSelectionChanging.oldSelection` object will contain only one property, which is the `primaryKey` field. For the rest of the rows, currently in the data view, `rowSelectionChanging.oldSelection` will contain the whole row data. ## API References
- [IgxPaginatorComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html) - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Paging](paging.md) - [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md new file mode 100644 index 000000000..371bfe5fc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-actions.md @@ -0,0 +1,103 @@ +--- +_tocName: Row Actions +_premium: true +--- +--- title: Row actions in Angular Data Grid - Ignite UI for Angular _description: The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular ActionStrip components, Angular ActionStrip directives, Angular ActionStrip controls _license: commercial --- # Row Actions in Angular Tree Grid The tree grid component in Ignite UI for Angular provides the ability to use [ActionStrip](../action-strip.md) and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations. ## Usage The first step is to import the **IgxActionStripModule** in our **app.module.ts** file: ```typescript // app.module.ts ... import { IgxActionStripModule } from 'igniteui-angular/action-strip'; // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxActionStripModule], + ... }) ``` The predefined `actions` UI components are: - [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - includes functionality and UI specifically designed for the grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#rowEditable) option and row deletion of the grid. - [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - includes functionality and UI specifically designed for the grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. They are added inside the `` and this is all needed to have an Action Strip providing default interactions. ```html + + + + + + + ``` >[!NOTE] > When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. ## Custom implementation These components expose templates giving flexibility for customization. For instance, if we would like to use the `ActionStrip` for a Gmail scenario with row actions such as `delete`, `edit` and etc. You can simply create button component with `igx-icon`, add click event to it and insert it into the `igx-action-strip` component. ```html + + + + + ``` ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; +import { Transaction } from 'igniteui-angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-action-strip', + styleUrls: [`tree-grid-action-strip-sample.scss`], + templateUrl: 'tree-grid-action-strip-sample.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +export class TreeGridActionStripSampleComponent { + @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true }) public grid: IgxTreeGridComponent; + + public data: any[]; + public discardedTransactionsPerRecord: Map = new Map(); + + constructor() { + this.data = generateEmployeeDetailedFlatData(); + } + + public isDirty(rowContext: RowType) { + const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key); + return rowContext && (rowContext.deleted || isRowEdited); + } + + public isDeleted(rowContext: RowType) { + return rowContext && rowContext.deleted; + } + + public inEditMode(rowContext: RowType) { + return rowContext && rowContext.inEditMode; + } + + public startEdit(rowContext: RowType): void { + const firstEditable = rowContext.cells.filter(cell => cell.editable)[0]; + const grid = rowContext.grid; + + if (grid.rowList.filter(r => r === rowContext).length !== 0) { + grid.gridAPI.crudService.enterEditMode(firstEditable); + firstEditable.activate(null); + } + } + + public commit(rowContext: RowType) { + this.grid.transactions.commit(this.grid.data, rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, []); + } + + public redo(rowContext: RowType) { + const rowID = rowContext.key; + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID); + lastDiscarded.forEach((transaction) => { + const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id); + this.grid.transactions.add(transaction, recRef); + }); + this.discardedTransactionsPerRecord.set(rowID, []); + } + + public hasDiscardedTransactions(rowContext: RowType) { + if (!rowContext) { return false; } + const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key); + return lastDiscarded && lastDiscarded.length > 0; + } + + public undo(rowContext: RowType) { + const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true) + .filter(x => x.id === rowContext.key); + this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard); + this.grid.transactions.clear(rowContext.key); + } +} +``` >[!NOTE] > The predefined actions inherit [`IgxGridActionsBaseDirective`]({environment:infragisticsBaseUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. ## API References For more detailed information regarding the Action Strip API, refer to the following links: - [`IgxActionStripComponent API`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) Additional components and/or directives that can be used within the Action Strip: - [`IgxGridActionsBaseDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridactionsbasedirective.html) - [`IgxGridPinningActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridpinningactionscomponent.html) - [`IgxGridEditingActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) - [`IgxDividerDirective`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md new file mode 100644 index 000000000..0302c3f3a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-adding.md @@ -0,0 +1,127 @@ +--- +_tocName: Row Adding +_premium: true +--- +--- title: Adding Rows in Angular Tree Grid - Ignite UI for Angular _description: Learn how to use and customize the built-in row adding functionality with Ignite UI for Angular. CRUD capabilities and Intuitive grid row adding. See examples! _keywords: row adding, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/row-adding --- # Adding Rows in Angular Tree Grid The Tree Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. Add an [Action Strip](../action-strip.md) component with editing actions enabled in the grid's template, hover a row and use the provided button, press ALT + + to spawn the row adding UI or ALT + SHIFT + + to spawn the UI for adding a child for the selected row. ## Angular Tree Grid Row Adding Example The following sample demonstrates how to enable native row adding in the Tree Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridEditingActionsComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-add-row-sample', + styleUrls: ['./tree-grid-add-row-sample.component.scss'], + templateUrl: './tree-grid-add-row-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxActionStripComponent, IgxGridEditingActionsComponent] +}) +export class TreeGridAddRowSampleComponent implements OnInit { + @ViewChild('actionstrip') actionStrip: IgxActionStripComponent; + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + public data: any[]; + + constructor() { + } + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + } +} +``` +```html +
+ + + + + + + account_circle + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; +} + +.addRootBtn { + display: flex; + align-items: center; + margin-bottom: 10px; + color: black; + &:hover { + background-color: rgba(0, 0, 0, 0.1) + } + igx-icon { + margin-right: 5px; + } +} + +.buttonsArea { + margin: auto; +} + +.emplBtn { + margin-right: 5px; +} + +.dialogNewRecord { + margin: 10px; + padding: 10px;; +} + +.igx-input-group { + margin-bottom: 10px; + padding: 5px; +} +.igx-checkbox { + margin-bottom: 10px; + padding: 5px; +} + +.datePicker { + padding: 5px; + margin-bottom: 10px; +} +```
## Row Adding Usage To get started import the `IgxTreeGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxTreeGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxTreeGridModule], + ... }) export class AppModule {} ``` Then define a Tree Grid with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditable) set to true and an [Action Strip](../action-strip.md) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. ```html + + + + + + account_circle + + + + + + + ``` > [!NOTE] > Setting primary key is mandatory for row adding operations. > [!NOTE] > Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) column's input to `false`. > [!NOTE] > The IgxGridEditingActions inputs controlling the visibility of the add row and add child buttons may use the action strip context (which is of type [`RowType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/rowtype.html)) to fine tune which records the buttons show for. The internal [`IgxBaseTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) is automatically provided for Tree Grid. It holds pending cell changes until the row state is submitted or cancelled. ## Start Row Adding Programmatically Tree Grid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.treeGrid.beginAddRowById('ALFKI', true); // spawns the add row UI to add a child for the row with PK 'ALFKI' this.treeGrid.beginAddRowById(null); // spawns the add row UI as the first record ``` The `beginAddRowByIndex` method works similarly but the row to use as context is specified by index. ```typescript this.treeGrid.beginAddRowByIndex(10, true); // spawns the add row UI to add a child for the row at index 10 this.treeGrid.beginAddRowByIndex(null); // spawns the add row UI as the first record ``` ## Positioning - The Default position row add UI is below the row that the end user clicked the add row button for. - The Tree Grid scrolls to fully display the add row UI automatically. - The overlay for the add row UI maintains its position during scrolling. ## Behavior The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the [Tree Grid Row Editing](row-editing.md) topic for more information. After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the Tree Grid. In a Tree Grid that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the Tree Grid to its position if it is not in view. ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - ALT + SHIFT + + - Enters edit mode for adding a child - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. ## Feature Integration - Any row adding operation will stop if the data view of the Tree Grid gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, etc. - Summaries are updated after the row add operation finishes. The same is valid for the other data view dependant features such as sorting, filtering, etc. ## Customizing Row Adding Overlay ### Customizing Text Customizing the text of the row adding overlay is possible using the `igxRowAddTextDirective`. ```html + Adding Row + ``` ### Customizing Buttons Customizing the buttons of the row editing overlay is possible using the `igxRowEditActionsDirective`. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `igxRowEditTabStopDirective`. + + ```html + + + + ``` > [!NOTE] > Using `igxRowEditActions` directive will change edit actions for both editing and adding overlay buttons. ## Remote scenarios In most remote data scenarios the Primary Key assignment happens on the create server request. In this case the added records on the client will not have the final primary key value until saved on the server's data base. In that case the recommended way to handle this update in the Tree Grid is as follows: - If the Tree Grid does not use transactions. + + Once the create request is successfully completed and returns the added record data, you can replace that record's id in the local data record instance. - If the Tree Grid uses transactions. + + Once the create request or batch update request is successfully completed and returns the added record instances (with their db generated ids), the related ADD transactions should be cleared from the transaction log using the [clear](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/transactionservice.html#clear) API method. This is necessary because the local transaction will have a generated id field, which may differ than the one created in the data base, so they should be cleared. You can then add the record(s) passed in the response to the local data instance. This will ensure that the remotely generated ids are always reflected in the local data, and subsequent update/delete operations target the correct record ids. ## Styling The row adding UI comprises the buttons in the `IgxActionStrip` editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics: - [Tree Grid Row Editing](row-editing.md#styling) - [IgxSnackbar](../snackbar.md#styling) - [IgxActionStrip](../action-strip.md#styling) ## API References - [rowEditable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditable) - [onRowEditEnter](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onRowEditEnter) - [onRowEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onRowEdit) - [rowEditDone](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditDone) - [onRowEditCancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onRowEditCancel) - [endEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#endEdit) - [primaryKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#primaryKey) - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxActionStripComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxactionstripcomponent.html) - [IgxGridEditingActionsComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgrideditingactionscomponent.html) ## Additional Resources
- [Tree Grid Overview](tree-grid.md) - [Tree Grid Editing](editing.md) - [Tree Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md new file mode 100644 index 000000000..bdd11978a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-drag.md @@ -0,0 +1,568 @@ +--- +_tocName: Row Drag +_premium: true +--- +--- title: Row Dragging in Angular Tree Grid - Ignite UI for Angular _description: Row dragging in Angular Tree Grid is used to quickly rearrange rows by dragging them with the mouse. See how to configure row dragging in your project. _keywords: angular drag component, material component, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/row-drag --- # Row Dragging in Angular Tree Grid In Ignite UI for Angular Tree Grid, **RowDrag** is initialized on the root `igx-tree-grid` component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDraggable) input. Enabling row dragging provides users with a row drag-handle with which they can initiate dragging of a row. ## Angular Tree Grid Row Drag Example ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { FULL_EMPLOYEE_DATA } from '../data/employees'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +// eslint-disable-next-line no-shadow +enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'remove' +} + +@Component({ + selector: 'app-tree-grid-row-drag-base', + styleUrls: ['tree-grid-row-drag-base.component.scss'], + templateUrl: 'tree-grid-row-drag-base.component.html', + imports: [IgxDropDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) +export class TreeGridRowDragBaseComponent { + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + + public localData = []; + constructor() { + this.localData = FULL_EMPLOYEE_DATA(); + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } + + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} +``` +```html +
+ delete +
Drag a row here to delete it
+
+ + + + + + + + + +``` +```scss +.drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; +} + +:host { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-flow: row; + width: 100%; + padding-top: 10px; +} +```
## Configuration In order to enable row-dragging for your `igx-tree-grid`, all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDraggable) to **`true`**. Once this is enabled, a row-drag handle will be displayed on each row. This handle can be used to initiate row dragging. ```html + ... ``` Clicking on the drag-handle and _moving the cursor_ while holding down the button will cause the grid's [`rowDragStart`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDragStart) event to fire. Releasing the click at any time will cause [`rowDragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDragEnd) event to fire. Below, you can find a walkthrough on how to configure an `igx-tree-grid` to support row dragging and how to properly handle the drop event. @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { In this example, we'll handle dragging a row from a grid to a designated area and, when dropping it, removing it from the grid. } ### Drop Areas Enabling row-dragging was pretty easy, but now we have to configure how we'll handle row-_dropping_. We can define where we want our rows to be dropped using the [`igxDrop` directive](../drag-drop.md). First we need to import the `IgxDragDropModule` in our app module: ```typescript import { ..., IgxDragDropModule } from 'igniteui-angular/directives'; // import { ..., IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package ... @NgModule({ + imports: [..., IgxDragDropModule] }) ``` Then, in our template, we define a drop-area using the directive's selector: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```html
+ delete +
Drag a row here to delete it
``` } You may enable animation when a row is dropped on a non-droppable area using the `animation` parameter of the [`rowDragEnd`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDragEnd) event. If set to true, the dragged row will animate back to its' original position when dropped over a non-droppable area. You may enable animation like this: ```typescript export class IgxTreeGridRowDragComponent { + + public onRowDragEnd(args) { + args.animation = true; + } } ``` ### Drop Area Event Handlers Once we've defined our drop-area in the template, we have to declare our handlers for the `igxDrop`'s [`enter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#enter), [`leave`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#leave) and [`dropped`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdirective.html#dropped) events in our component's `.ts` file. First, let's take a look at our `enter` and `leave` handlers. In those methods, we just want to change the icon of the drag's _ghost_ so we can indicate to the user that they are above an area that allows them to drop the row: ```typescript export class IgxTreeGridRowDragComponent { + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } } ``` The `changeGhostIcon` **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the `igx-grid__drag-indicator` class that is applied to the drag-indicator container), changing the element's inner text to the passed one. The icons themselves are from the [`material` font set](https://material.io/tools/icons/) and are defined in a separate **`enum`**: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```typescript enum DragIcon { + DEFAULT = 'drag_indicator', + ALLOW = 'remove' } ``` } Next, we have to define what should happen when the user actually _drops_ the row inside of the drop-area. @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ```typescript export class IgxTreeGridRowDragComponent { + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } } ``` Once the row is dropped, we just call the row's [`delete()`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTreeGridRowComponent.html#delete) method } > [!NOTE] > When using row data from the event arguments (`args.dragData.data`) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. ### Templating the drag ghost The drag ghost can be templated using the `IgxRowDragGhost` directive, applied to a `` inside of the `igx-tree-grid`'s body: ```html ... + +
+ arrow_right_alt +
+ ... ``` The result of the configuration can be seem below in a `igx-tree-grid` with row dragging and multiple selection enabled. The demo shows the count of the currently dragged rows: #### Example Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxRowDragGhostDirective } from 'igniteui-angular/grids/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { FULL_EMPLOYEE_DATA } from '../data/employees'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-multi-row-drag', + styleUrls: ['tree-grid-multi-row-drag.component.scss'], + templateUrl: 'tree-grid-multi-row-drag.component.html', + imports: [IgxDropDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowDragGhostDirective] +}) +export class TreeGridMultiRowDragComponent { + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + public selectionMode: GridSelectionMode = 'multiple'; + public selected = false; + public ids; + public countIcon = 'drag_indicator'; + public dragIcon = 'keyboard_backspace'; + public localData = []; + constructor() { + this.localData = FULL_EMPLOYEE_DATA(); + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public handleRowSelectionChange(args) { + this.ids = args.newSelection; + this.selected = this.ids.length !== 0; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + if (this.selected === false) { + const draggedRow = args.dragData; + draggedRow.delete(); + } else { + this.ids.forEach((rowData) => { + this.treeGrid.deleteRow(rowData['ID']); + }); + this.selected = false; + } + } + + public onRowDragStart(args) { + if (this.selected === false) { + this.countIcon = `filter_1`; + } else { + const count = this.ids.length; + this.countIcon = `filter_${count > 9 ? '9_plus' : `${count}`}`; + } + } + + public onLeaveAllowed(args) { + this.onRowDragStart(args); + this.dragIcon = 'keyboard_backspace'; + } + + public onEnterAllowed(args) { + this.dragIcon = 'remove'; + } +} +``` +```html +
+ delete +
Drag a row here to delete it
+
+ + + + + + + + + +
+ {{dragIcon}}{{countIcon}} +
+ + +``` +```scss +.drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; +} + +:host { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-flow: row; + width: 100%; + padding-top: 10px; +} + +.allow-drop { + z-index: 1; +} +```
### Templating the drag icon The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (`drag_indicator`) to `drag_handle`. To do so, we can use the `igxDragIndicatorIcon` to pass a template inside of the `igx-tree-grid`'s body: ```html ... + + drag_handle + ... ``` Once we've set the new icon template, we also need to adjust the `DEFAULT` icon in our `DragIcon enum`, so it's properly change by the `changeIcon` method: ```typescript enum DragIcon { + DEFAULT = "drag_handle", + ... } ``` @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { ### Styling the drop area Once our drop handlers are properly configured, all that's left is to style our drop area a bit: ```css .drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; } :host { + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + width: 100%; } ``` The result can be seen in the demo below: } #### Example Demo ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxColumnComponent, IgxDragIndicatorIconDirective, RowType } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { FULL_EMPLOYEE_DATA } from '../data/employees'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +// eslint-disable-next-line no-shadow +enum DragIcon { + DEFAULT = 'drag_handle', + ALLOW = 'remove' +} + +@Component({ + selector: 'app-tree-grid-row-drag', + styleUrls: ['tree-grid-row-drag.component.scss'], + templateUrl: 'tree-grid-row-drag.component.html', + imports: [IgxDropDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxDragIndicatorIconDirective] +}) +export class TreeGridRowDragComponent { + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true }) + public treeGrid: IgxTreeGridComponent; + + public localData = []; + constructor() { + this.localData = FULL_EMPLOYEE_DATA(); + } + + public onRowDragEnd(args) { + args.animation = true; + } + + public onDropAllowed(args: IDropDroppedEventArgs) { + const draggedRow: RowType = args.dragData; + draggedRow.delete(); + } + + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} +``` +```html +
+ delete +
Drag a row here to delete it
+
+ + + + + + + + + + drag_handle + + +``` +```scss +.drop-area { + width: 160px; + height: 160px; + background-color: #d3d3d3; + border: 1px dashed #131313; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + text-align: center; + margin: 8px; +} + +:host { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-flow: row; + width: 100%; + padding-top: 10px; +} +```
## Application Demo ### Row Reordering Demo With the help of the grid's row drag events and the `igxDrop` directive, you can create a grid that allows you to reorder rows by dragging them. Since all of the actions will be happening _inside_ of the grid's body, that's where you have to attach the `igxDrop` directive: ```html + ... ``` > [!NOTE] > Make sure that there is a `primaryKey` specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered Once `rowDraggable` is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { - Is the row expanded? If so, collapse it. - Was the row dropped inside of the grid? - If so, on which _other_ row was the dragged row dropped? - Once you've found the _target_ row, swap the records' places in the `data` array - Was the row initially selected? If so, mark it as selected. } Below, you can see this implemented in the component's `.ts` file: ```typescript export class TreeGridRowReorderComponent { + public rowDragStart(args: any): void { + const targetRow = args.dragData; + if (targetRow.expanded) { + this.treeGrid.collapseRow(targetrow.key); + } + } + + public dropInGrid(args: IDropDroppedEventArgs): void { + const draggedRow = args.dragData; + const event = args.originalEvent; + const cursorPosition: Point = { x: event.clientX, y: event.clientY }; + this.moveRow(draggedRow, cursorPosition); + } + + private moveRow(draggedRow: RowType, cursorPosition: Point): void { + const row = this.catchCursorPosOnElem(this.treeGrid.rowList.toArray(), cursorPosition); + if (!row) { return; } + if (row.data.ParentID === -1) { + this.performDrop(draggedRow, row).ParentID = -1; + } else { + if (row.data.ParentID === draggedrow.data.ParentID) { + this.performDrop(draggedRow, row); + } else { + const rowIndex = this.getRowIndex(draggedrow.data); + this.localData[rowIndex].ParentID = row.data.ParentID; + } + } + if (draggedRow.selected) { + this.treeGrid.selectRows([this.treeGrid.rowList.toArray() + .find((r) => r.rowID === draggedrow.key).rowID], false); + } + + this.localData = [...this.localData]; + } + + private performDrop( + draggedRow: IgxTreeGridRowComponent, targetRow: IgxTreeGridRowComponent) { + const draggedRowIndex = this.getRowIndex(draggedrow.data); + const targetRowIndex: number = this.getRowIndex(targetrow.data); + if (draggedRowIndex === -1 || targetRowIndex === -1) { return; } + this.localData.splice(draggedRowIndex, 1); + this.localData.splice(targetRowIndex, 0, draggedrow.data); + return this.localData[targetRowIndex]; + } + + private getRowIndex(rowData: any): number { + return this.localData.indexOf(rowData); + } + + private catchCursorPosOnElem(rowListArr: IgxTreeGridRowComponent[], cursorPosition: Point) + : IgxTreeGridRowComponent { + for (const row of rowListArr) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + return row; + } + } + + return null; + } } ``` With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row. ```typescript +import { Component, ViewChild } from '@angular/core'; +import { IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { GridSelectionMode, IgxColumnComponent, RowType } from 'igniteui-angular/grids/core'; +import { Point } from 'igniteui-angular/core'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-row-reorder', + styleUrls: ['tree-grid-row-reorder.component.scss'], + templateUrl: 'tree-grid-row-reorder.component.html', + imports: [IgxTreeGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent] +}) +export class TreeGridRowReorderComponent { + @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static : true }) + public treeGrid: IgxTreeGridComponent; + public selectionMode: GridSelectionMode = 'multiple'; + public localData = []; + constructor() { + this.localData = generateEmployeeFlatData(); + } + + public rowDragStart(args: any): void { + const targetRow: RowType = args.dragData; + if (targetRow.expanded) { + this.treeGrid.collapseRow(targetRow.key); + } + } + + public dropInGrid(args: IDropDroppedEventArgs): void { + const draggedRow: RowType = args.dragData; + const event = args.originalEvent; + const cursorPosition: Point = { x: event.clientX, y: event.clientY }; + this.moveRow(draggedRow, cursorPosition); + } + + private moveRow(draggedRow: RowType, cursorPosition: Point): void { + const row = this.catchCursorPosOnElem(this.treeGrid.rowList.toArray(), cursorPosition); + if (!row) { return; } + + if (row.key === draggedRow.key) { + /** dragged row and targeted row are same */ + return; + } + + if (row.data.ParentID === -1) { + this.performDrop(draggedRow, row).ParentID = -1; + } else { + if (row.data.ParentID === draggedRow.data.ParentID) { + this.performDrop(draggedRow, row); + } else { + const rowIndex = this.getRowIndex(draggedRow.data); + this.localData[rowIndex].ParentID = row.data.ParentID; + } + } + if (draggedRow.selected) { + this.treeGrid.selectRows([this.treeGrid.rowList.toArray() + .find((r) => r.key === draggedRow.key).key], false); + } + + this.localData = [...this.localData]; + } + + private performDrop( + draggedRow: RowType, targetRow: RowType) { + const draggedRowIndex = this.getRowIndex(draggedRow.data); + const targetRowIndex: number = this.getRowIndex(targetRow.data); + if (draggedRowIndex === -1 || targetRowIndex === -1) { return; } + this.localData.splice(draggedRowIndex, 1); + this.localData.splice(targetRowIndex, 0, draggedRow.data); + return this.localData[targetRowIndex]; + } + + private getRowIndex(rowData: any): number { + return this.localData.indexOf(rowData); + } + + private catchCursorPosOnElem(rowListArr: any[], cursorPosition: Point): any { + for (const row of rowListArr) { + const rowRect = row.nativeElement.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + return row; + } + } + + return null; + } +} +``` +```html +
+ + + + + + + + + + + +
+``` +```scss +.grid_wrapper{ + max-width: 0 16px; + padding: 10px; +} +```
## Limitations Currently, there are no known limitations for the `rowDraggable` directive. ## API References - [rowDraggable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDraggable) - [rowDragStart](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDragStart) - [rowDragEnd](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowDragEnd) - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) ## Additional Resources
- [Tree Grid Overview](tree-grid.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md new file mode 100644 index 000000000..c88180779 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-editing.md @@ -0,0 +1,205 @@ +--- +_tocName: Row Editing +_premium: true +--- +--- title: Editing Rows in Angular Tree Grid - Ignite UI for Angular _description: Want to enable row editing in Angular Tree Grid? Need a powerful API for CRUD operations? Try our Ignite UI for Angular Data Grid rows editing component! _keywords: row editing, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/row-editing --- # Angular Tree Grid Row Editing The Tree Grid provides a convenient way to perform data manipulations through inline editing and a powerful API for Angular CRUD operations. Click on a row and press **Enter key** or simply double click with the mouse on the row that needs to be modified. ## Angular Tree Grid Row Editing Example The following sample demonstrates how to enable row editing in the Tree Grid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the **Done** button, or discarded by using **Cancel** button. ```typescript +/* eslint-disable max-len */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-editing-sample', + styleUrls: ['tree-grid-row-editing-sample.component.scss'], + templateUrl: 'tree-grid-row-editing-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridRowEditSampleComponent implements OnInit { + + @ViewChild('treeGrid', { static: true }) public treeGrid1: IgxTreeGridComponent; + public data: IEmployee[]; + public columns: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + // tslint:disable:max-line-length + { field: 'Name', label: 'Full Name', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'Age', label: 'Age', resizable: false, sortable: false, filterable: false, editable: true, dataType: 'number' }, + { field: 'Title', label: 'Title', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'date' } + ]; + } +} +``` +```html +
+ + @for (c of columns; track c) { + + + } + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +```
> [!NOTE] > When a row is in edit mode, then clicking on a cell on another row will act like the Done button is pressed - submit all the changes of the previous row. If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. ## Row Editing Usage To get started import the `IgxTreeGridModule` in the **app.module.ts** file: ```typescript // app.module.ts ... import { IgxTreeGridModule } from 'igniteui-angular'; @NgModule({ + ... + imports: [..., IgxTreeGridModule], + ... }) export class AppModule {} ``` Then define a Tree Grid with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditable) set to true: ```html + + ``` > [!NOTE] > Setting primary key is mandatory for row editing operations. > [!NOTE] > It's not needed to enable editing for individual columns. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditable) property in the Tree Grid, will mean that all rows, with defined `field` property, excluding primary one, will be editable. If you want to disable editing for specific column, then you set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) column's input to `false`. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; // import { IgxTreeGridComponent } from '@infragistics/igniteui-angular'; for licensed package import { FLAT_DATA } from './data'; @Component({ + providers: [], + selector: 'app-tree-grid-row-editing-sample', + styleUrls: ['tree-grid-row-editing-sample.component.scss'], + templateUrl: 'tree-grid-row-editing-sample.component.html' }) export class TreeGridRowEditSampleComponent implements OnInit { + + public data: any[]; + public columns: any[]; + + @ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent; + public ngOnInit(): void { + this.data = FLAT_DATA; + + this.columns = [ + { field: 'FirstName', label: 'First Name', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'LastName', label: 'Last Name', resizable: false, sortable: false, filterable: false, editable: true, dataType: 'string' }, + { field: 'Title', label: 'Title', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'date' } + ]; + } } ``` > [!NOTE] > The Tree Grid uses internally a provider [`IgxBaseTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) that holds pending cell changes, until row state submitted or cancelled. ## Positioning - Default position of the overlay will be below the row that is in edit mode - If there is no space below the row then overlay will appear above the row. - Once shown - top or bottom, overlay will maintain this position during scrolling, until the overlay is closed. ## Behavior - If row is in edit mode, then editing will continue, if a cell from the same row is clicked. - Clicking "Done" button will finish row editing and will submit changes either to the data source, or to a transaction if available. In addition row will exit edit mode. - Clicking "Cancel" button will revert all current changes in the row and row will exit edit mode. - If row is in edit mode, then clicking a cell from another row will finish the current row edit and will submit new row changes (the same behavior clicking "Done" button). If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. - If row is in edit mode and Tree Grid is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When Tree Grid is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the Tree Grid, the cell will also stay in edit mode. - When perform _sorting_, _filtering_, _searching_ and _hiding_ operations, will revert all current changes in the row and row will exit edit mode. - When perform _paging_, _resizing_, _pinning_ and _moving_ operations, will exit edit mode and will submit latest value. - Each modified cell gets edited style until row edit is finished. This is the behavior, when Tree Grid is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed. ## Keyboard Navigation - `Enter` and `F2` enters row edit mode - `Esc` exits row edit mode and doesn't submit any of the cell changes, made while the row was in edit mode. - `Tab` move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. ## Feature Integration - Any data changing operation will terminate row editing operations and will submit current row changes. This will include operations like sorting, changing grouping and filtering criteria, paging, etc. - Summaries will be updated after row edit is finished. Same is valid for the other features like sorting, filtering, etc. ## Customizing Row Editing Overlay ### Customizing Text Customizing the text of the row editing overlay is possible using the `igxRowEditTextDirective`. The `rowChangesCount` property is exposed and it holds the count of the changed cells. ```html + Changes: {{rowChangesCount}} + ``` ### Customizing Buttons Customizing the buttons of the row editing overlay is possible using the `igxRowEditActionsDirective`. If you want the buttons to be part of the keyboard navigation, then each on of them should have the `igxRowEditTabStopDirective`. + + ```html + + + + ``` ## Styling Using the [Ignite UI for Angular Theme Library](../themes/index.md), we can greatly alter the Row Editing overlay. The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: + - [`igx-banner`](../banner.md) in order to render its contents + - [`igx-button`](../button.md)s are rendered in the default template (for the `Done` and `Cancel` buttons). In the below example, we will make use of those two components' styling options, [`button styling`](../button.md#styling) & [`banner-styling`](../banner.md#styling), to customize the experience of our IgxTreeGrid's Row Editing. We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in the [Cell Styling section](cell-editing.md#styling). ### Import theme The easiest way to style the Row Editing banner is to define styles in our `app`'s global style file (typically `styles.scss`). The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Once we've imported the themes file, we can create custom themes. #### Define the theme We can now define a custom [`banner theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) that will affect our Row Editing background and make use of one of the predefined palettes namely `$purple-palette` : ```scss $banner-theme: banner-theme( + $banner-background: #e3e3e3, + $banner-message-color: color($purple-palette, "secondary", 600) ); ``` Here we are using `my-banner-palette` in conjunction with [`igx-color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) (exposed by the theme library) for generating our colors. ### Include the theme All we have to do now is apply the theme with a Sass `@include` statement. We pass our newly defined `$banner-theme` through the [`tokens mixin`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-tokens): ```scss :host { + @include tokens($banner-theme); } ``` ### Component styles Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope the banner theme to the style file of the specific component it's applied to. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid Row Editing Overlay. ```scss // custom.component.scss :host { + ::ng-deep { + @include tokens($banner-theme); + } } ``` With the above syntax, our custom banner theme properly applies to the grid's Row Editing overlay. ### Custom Templates To further customize our Row Editing overlay, we can pass a custom template so we can style the `Done` and `Cancel` buttons separately: ```html + +
+ + +
+ ``` After we've defined our custom buttons, we can make use of the [`flat-icon-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-icon-button-theme) to style them. You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](../icon-button.md#icon-button-styling). We can create a custom theme for our `Done` and `Cancel`: ```scss // custom.component.scss ... $button-theme: flat-icon-button-theme( + $palette: $purple-palette ); ... .custom-buttons { + @include tokens($button-theme); } ``` We scope our `@include` statement in `.custom-buttons` so that it is only applied to the `Done`and `Cancel` buttons. ### Demo After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below: ```typescript +import { Component, OnInit } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-edit-style', + styleUrls: ['tree-grid-row-edit-style.component.scss'], + templateUrl: 'tree-grid-row-edit-style.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxIconButtonDirective, IgxRowEditTabStopDirective, IgxIconComponent] +}) +export class TreeGridRowEditStyleComponent implements OnInit { + + public data: IEmployee[]; + public columns: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + // tslint:disable:max-line-length + { field: 'Name', label: 'Full Name', dataType: 'string' }, + { field: 'Age', label: 'Age', dataType: 'number' }, + { field: 'Title', label: 'Title', dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', dataType: 'date' } + ]; + } +} +``` +```html +
+ + @for (c of columns; track c) { + + + } + + Changes: {{rowChangesCount}} + + +
+ + +
+ + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$banner-theme: banner-theme( + $banner-background: #e3e3e3, + $banner-message-color: color($purple-palette, "secondary", 600) +); + +:host { + @include tokens($banner-theme); +} + +igx-tree-grid{ + @include palette($purple-palette); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## Known Issues and Limitations - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ## API References - [rowEditable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditable) - [onRowEditEnter](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onRowEditEnter) - [onRowEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onRowEdit) - [rowEditDone](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowEditDone) - [onRowEditCancel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#onRowEditCancel) - [endEdit](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#endEdit) - [field](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#field) - [editable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#editable) - [primaryKey](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#primaryKey) - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Tree Grid Overview](tree-grid.md) - [Tree Grid Editing](editing.md) - [Tree Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md new file mode 100644 index 000000000..da33a550b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-pinning.md @@ -0,0 +1,293 @@ +--- +_tocName: Row Pinning +_premium: true +--- +--- title: Row Pinning in Angular Tree Grid - Ignite UI for Angular _description: Use the Angular Row pinning feature to lock rows with a rich and easy to use API. Let users pin rows in a particular order or duplicate them in a special area. _keywords: lock row, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/row-pinning --- # Angular Tree Grid Row Pinning One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. **Row Pinning** in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Tree Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an `igxActionStrip` component in the context of Tree Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. ## Angular Tree Grid Row Pinning Example ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IPinningConfig, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-pinning', + styleUrls: ['tree-grid-row-pinning.component.scss'], + templateUrl: 'tree-grid-row-pinning.component.html', + imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] +}) +export class TreeGridRowPinningSampleComponent implements OnInit { + + @ViewChild('treeGrid1', { static: true }) + public treeGrid: IgxTreeGridComponent; + public data: IEmployee[]; + public columns: any[]; + + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + constructor() { } + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + { field: 'Name', label: 'Full Name', dataType: 'string' }, + { field: 'Age', label: 'Age', dataType: 'number' }, + { field: 'Title', label: 'Title', dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', dataType: 'date' } + ]; + + this.treeGrid.pinRow(this.data[0].ID); + this.treeGrid.pinRow(this.data[3].ID); + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } +} +``` +```html +
+ Bottom Row Pinning toggle +
+ +
+ + @for (c of columns; track c) { + + + } + + + + + +
+``` +```scss +.grid-container { + display: flex; + padding: 20px; +} + +.switches { + margin-top: 24px; +} +``` ## Row Pinning UI The built-in row pinning UI is enabled by adding an `igxActionStrip` component with the `GridPinningActions` component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. ```html + + + + + + + ``` ## Row Pinning API Row pinning is controlled through the `pinned` input of the [`row`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/rowtype.html). Pinned rows are rendered at the top of the Tree Grid by default and stay fixed through vertical scrolling of the unpinned rows in the Tree Grid body. ```typescript this.treeGrid.getRowByIndex(0).pinned = true; ``` You may also use the Tree Grid's [`pinRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#pinRow) or [`unpinRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#unpinRow) methods of the [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) to pin or unpin records by their ID: ```typescript this.treeGrid.pinRow('ALFKI'); this.treeGrid.unpinRow('ALFKI'); ``` Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#primaryKey) of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state. A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the [`rowPinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowPinning) event and changing the [`insertAtIndex`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipinroweventargs.html#insertAtIndex) property of the event arguments to the desired position index. ```html ``` ```typescript public rowPinning(event) { + event.insertAtIndex = 0; } ``` ## Pinning Position You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. ```html ``` ```typescript public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom }; ``` ## Custom Row Pinning UI You can define your custom UI and change the pin state of the rows via the related API. ### Via extra column with icon Let's say that instead of an action strip you would like to show a pin icon in every row allowing the end-user to click and change a particular row's pin state. This can be done by adding an extra column with a cell template containing the custom icon. ```html + + + + {{cell.row.pinned ? 'lock' : 'lock_open'}} + + + + + ``` On click of the custom icon the pin state of the related row can be changed using the row's API methods. ```typescript public togglePinning(row: IgxGridRow, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } } ``` #### Demo ```typescript +import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IPinningConfig, IgxCellTemplateDirective, IgxColumnComponent, RowPinningPosition, RowType } from 'igniteui-angular/grids/core'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { icons } from '../../services/svgIcons'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +const FILTERING_ICONS_FONT_SET = 'filtering-icons'; + +@Component({ + selector: 'app-tree-grid-row-pinning-extra-column', + styleUrls: ['tree-grid-row-pinning-extra-column.component.scss'], + templateUrl: 'tree-grid-row-pinning-extra-column.component.html', + imports: [IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent] +}) +export class TreeGridRowPinningExtraColumnSampleComponent implements OnInit, AfterViewInit { + private iconService = inject(IgxIconService); + + + @ViewChild('treeGrid', { static: true }) public treeGrid1: IgxTreeGridComponent; + public data: IEmployee[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + { field: 'Name', label: 'Full Name', dataType: 'string' }, + { field: 'Age', label: 'Age', dataType: 'number' }, + { field: 'Title', label: 'Title', dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', dataType: 'date' } + ]; + } + + public ngAfterViewInit() { + const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin'); + pinnedIcons.forEach(icon => { + if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) { + this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET); + } + }); + } + + public togglePinning(row: RowType, event) { + event.preventDefault(); + if (row.pinned) { + row.unpin(); + } else { + row.pin(); + } + } + + public changePinningPosition() { + if (this.pinningConfig.rows === RowPinningPosition.Bottom) { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top }; + } else { + this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Bottom }; + } + } +} +``` +```html +
+ Bottom Row Pinning toggle +
+ +
+ + + + + + + + @for (c of columns; track c) { + + + } + +
+``` +```scss +.grid-container { + display: flex; + padding: 20px; +} + +.pin-icon { + cursor: pointer; + color: #999; +} + +.pin-icon:hover { + color: #444 +} + +.switches { + margin-top: 24px; +} +``` ## Row Pinning Limitations - Only records that exist in the data source can be pinned. - The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied. - Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization). - The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed. - As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record. - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning
## Styling The IgxTreeGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The Tree Grid's [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the Tree Grid. Below, we are going through the steps of customizing the Tree Grid's row pinning styling. ### Importing the Styling Library To begin the customization of the row pinning feature, you need to import the `index` file, where all styling functions and mixins are located. ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Defining a Theme Next, create a new theme, that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the parameters, required to customize the row pinning feature as desired. ```scss $custom-grid-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f ); ``` ### Using CSS variables The last step is to pass the custom grid theme: ```scss :host { + @include tokens($custom-grid-theme); } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IPinningConfig, IgxColumnComponent, IgxGridPinningActionsComponent, RowPinningPosition } from 'igniteui-angular/grids/core'; +import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-row-pinning-styling', + styleUrls: ['tree-grid-row-pinning-styling.component.scss'], + templateUrl: 'tree-grid-row-pinning-styling.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] +}) +export class TreeGridRowPinningStylingSampleComponent implements OnInit { + + @ViewChild('treeGrid1', { static: true }) + public treeGrid: IgxTreeGridComponent; + + public data: IEmployee[]; + public columns: any[]; + public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top, columns: ColumnPinningPosition.End }; + + constructor() { } + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + { field: 'Name', label: 'Full Name', dataType: 'string' }, + { field: 'Age', label: 'Age', dataType: 'number' }, + { field: 'Title', label: 'Title', dataType: 'string' }, + { field: 'HireDate', label: 'Hire Date', dataType: 'date' } + ]; + + this.treeGrid.pinRow(this.data[0].ID); + this.treeGrid.pinRow(this.data[3].ID); + } +} +``` +```html +
+ + @for (c of columns; track c) { + + + } + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $pinned-border-width: 5px, + $pinned-border-style: double, + $pinned-border-color: #ffcd0f, + $cell-active-border-color: #ffcd0f +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridrow.html) - [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxHierarchicalGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridrow.html) - [RowType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/RowType.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md new file mode 100644 index 000000000..172102e55 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-row-selection.md @@ -0,0 +1,380 @@ +--- +_tocName: Row selection +_premium: true +--- +--- title: Angular Grid Select Row - Ignite UI for Angular _description: Enable row selection to improve UX and let users manage single or multiple rows. See how easy it is to configure Row data select with Ignite UI. _keywords: data select, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/row-selection --- # Angular Tree Grid Row Selection With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. When a user clicks on the row selector, the row will either become selected or deselected, enabling the user to select multiple rows of data. ## Angular Row Selection Example The sample below demonstrates the four types of Tree Grid's **row selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to _hide_ or _show_ the row selector checkbox. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { GridSelectionMode, IRowSelectionEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-selection-sample', + styleUrls: ['./tree-grid-selection-sample.component.scss'], + templateUrl: './tree-grid-selection-sample.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] +}) +export class TreeGridSelectionSampleComponent implements OnInit { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + @ViewChild('snackbarRowCount', { static: true }) public snackbarRowCount: IgxSnackbarComponent; + @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; + public data: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModes = []; + public hideRowSelectors = false; + public selectedRows = [1, 2, 3]; + public selectedRowsCount; + public selectedRowIndex; + + constructor() { + this.data = generateEmployeeFlatData(); + + this.selectionModes = [ + { label: 'none', selectMode: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selectMode: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selectMode: 'multiple', selected: this.selectionMode === 'multiple', togglable: true }, + { label: 'cascade', selectMode: 'multipleCascade', selected: this.selectionMode === 'multipleCascade', togglable: true } + ]; + } + + public ngOnInit(): void { + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public handleRowSelection(event: IRowSelectionEventArgs) { + this.selectedRowsCount = event.newSelection.length; + this.selectedRowIndex = event.newSelection[0]; + this.snackbarRowCount.open(); + this.snackbar.close(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].selectMode; + this.snackbarRowCount.close(); + this.snackbar.open(); + this.selectedRowsCount = undefined; + this.selectedRowIndex = undefined; + } +} +``` +```html +
+
+ Hide Row Selectors + +
+ + + + + + + + +
+ + +
+ notification_important + @if (selectionMode === 'multiple' || selectionMode === 'multipleCascade') { +

Number of selected rows: {{selectedRowsCount}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex !== undefined) { +

Currently selected row index: {{selectedRowIndex}}

+ } + @if (selectionMode === 'single' && this.selectedRowIndex === undefined) { +

There is no currently selected row.

+ } +
+ + + +
+ notification_important + @if (selectionMode === 'multipleCascade') { +
    +
  • Now you can select multiple rows within a grid and their children.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'multiple') { +
    +
  • Now you can select multiple rows within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
  • On cell click holding ctrl key, the row get selected and previous selection state is + preserved. +
    • +
  • Shift + click select a range of rows.
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one row within a grid.
    • +
  • Click on row selector field or press SPACE key when some cell is active to toggle row + selection. +
    • +
  • On cell click the row get selected and previous selection state is cleared.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a row while interacting with grid UI.
    • +
  • If you need to select a row use grid API methods.
    • +
+ } +
+ +``` +```scss +.grid-controls { + display: flex; + justify-content: space-between; + flex-flow: column; + align-items: flex-start; + position: relative; + > * { + margin-bottom: 16px; + } +} + +.sample-container { + margin: 16px; +} + +igx-buttongroup { + width: 500px; +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} + +.container p { + margin-top: 20px; +} +```
## Setup In order to setup row selection in the [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html), you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following four modes: **none**, **single**, **multiple** and **multipleCascade**. Below we will take a look at each of them in more detail. ### None Selection In the [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) by default row selection is disabled, otherwise _([rowSelection]="'none'")_. So you can **not** select or deselect a row through interaction with the Tree Grid UI, the only way to complete these actions is to use the provided API methods. ### Single Selection Single row selection can now be easily set up, the only thing you need to do, is to set `[rowSelection] = '"single"'` property. This gives you the opportunity to **select only one row within a grid**. You can select a row by clicking on a cell or pressing the _space_ key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected **rowSelectionChanging** event is emitted. ```html ``` ```typescript /* selectionExample.component.ts */ public handleRowSelection(event) { + if (args.added.length && args.added[0] === 3) { + args.cancel = true; + } } ``` ### Multiple Selection To enable multiple row selection in the [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) just set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowSelection) property to `multiple`. This will enable a row selector field on each row and in the Tree Grid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the _space_ key when a cell is focused. If you have selected one row and click on another while holding the _shift_ key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you _click_ while holding the _ctrl_ key, the row will be toggled and the previous selection will be preserved. ```html ``` ### Cascade Selection To enable cascade row selection in the [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) just set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowSelection) property to `multipleCascade`. This will enable a row selector field on each row and in the Tree Grid header. The row selector allows users to select multiple rows which would select all children in the tree below. The selection persists through scrolling, paging, and data operations, such as sorting and filtering. The row can also be selected by clicking on a cell or by pressing the _space_ key when a cell is focused. If you have selected one row and _click_ on another while holding the _shift_ key, the selection of a parent record will select all of its children even if they are not in the selected range. In this selection mode, when you _click_ on a single row, the previously selected rows will be deselected. If you _click_ while holding the _ctrl_ key, the row and its children will be toggled and the previous selection will be preserved. ```html ``` In this mode a parent's selection state entirely depends on the selection state of its children. When a parent has some selected and some deselected children, its checkbox is in an indeterminate state. ```ts + + public handleRowSelection(event: IRowSelectionEventArgs) { + // use event.newSelection to retrieve primary key/row data of latest selected row + this.selectedRowsCount = event.newSelection.length; + this.selectedRowIndex = event.newSelection[0]; + } ``` **Notes** - Row selection will trigger [`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowSelectionChanging) event. This event gives you information about the _new selection_, _old selection_, the rows that have been _added_ and _removed_ from the old selection. Also the event is _cancellable_, so this allows you to prevent selection. - When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set `[hideRowSelectors] = true`. - When you switch between row selection modes at runtime, this will clear the previous row selection state. ## API usage ### Select rows programmatically The code snippet below can be used to select one or multiple rows simultaneously (via [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#primaryKey)); Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html ... ... // select rows and clear previous selection state ``` } This will add the rows which correspond to the data entries with IDs 1, 2 and 5 to the Tree Grid selection. ### Deselect rows If you need to deselect rows programmatically, you can use the `deselectRows(rowIds: [])` method. ```html ... ... ``` ### Row selection event When there is some change in the row selection **[`rowSelectionChanging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelectionChanging)** event is emitted. **`rowSelectionChanging`** exposes the following arguments: - `oldSelection` - array of row's data that contains the previous state of the row selection. - `newSelection` - array of row's data that match the new state of the row selection. - `added` - array of row's data that are currently added to the selection. - `removed` - array of row's data that are currently removed according old selection state. - `event` - the original event that triggered row selection change. - `cancel` - allows you the prevent the row selection change. #### Row selection event in remote data scenarios In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IRowSelectionEventArgs.html#oldSelection) event argument will not contain the full row data object for the rows that are currently out of the data view. In this case, `rowSelectionChanging.oldSelection` object will contain only one property, which is the `primaryKey` field. For the rest of the rows, currently in the data view, `rowSelectionChanging.oldSelection` will contain the whole row data. ```html ... ``` ```typescript /* selectionExample.component.ts */ public handleRowSelectionChange(args) { + args.cancel = true; // this will cancel the row selection } ``` ### Select all rows Another useful API method that [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) provides is `selectAll(onlyFilteredData)`. By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. But if you call the method with _false_ parameter, `selectAll(false)` will always select all data in the grid, even if filtering is applied. >[!NOTE] > Keep in mind that `selectAll()` will not select the rows that are deleted. ### Deselect all rows [`igx-tree-grid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) provides `deselectAll(onlyFilteredData)` method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. But if you call the method with _false_ parameter, `deselectAll(false)` will always clear all row selection state even if filtering is applied. ### How to get selected rows If you need to see which rows are currently selected, you can get their row IDs with the `selectedRows` getter. ```typescript public getSelectedRows() { + const currentSelection = this.treeGrid.selectedRows; // return array of row IDs } ``` Additionally, assigning row IDs to `selectedRows` will allow you to change the grid's selection state. ```typescript public mySelectedRows = ['Johnathan Winchester', 'Ana Sanders']; // an array of row IDs ``` ```html + + ``` ### Row selector templates You can template header and row selectors in the Tree Grid and also access their contexts which provide useful functionality for different scenarios. By default, the Tree Grid **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [`rowSelectionChanging` event](#row-selection-event). In case you implement a custom template with a `click` handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row template To create a custom row selector template, within the `igx-tree-grid`, declare an `` with `igxRowSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state. The `selected` property shows whether the current row is selected or not while the `index` property can be used to access the row index. ```html + {{ rowContext.index }} + ``` The `rowID` property can be used to get a reference of an `igx-tree-grid` row. This is useful when you implement a `click` handler on the row selector element. ```html + ``` In the above example we are using an `igx-checkbox` and we bind `rowContext.selected` to its `checked` property. See this in action in our [`Row Numbering Demo`](#row-numbering-demo). ### Header template To create a custom header selector template, within the Tree Grid, declare an `` with `igxHeadSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state. The `selectedCount` property shows you how many rows are currently selected while `totalCount` shows you how many rows there are in the Tree Grid in total. ```html + {{ headContext.selectedCount }} / {{ headContext.totalCount }} ``` The `selectedCount` and `totalCount` properties can be used to determine if the head selector should be checked or indeterminate (partially selected). ```html + + + + + ``` ### Row Numbering Demo This demo shows the usage of custom header and row selectors. The latter uses `rowContext.index` to display row numbers and an `igx-checkbox` bound to `rowContext.selected`. ```typescript +import { Component, OnInit } from '@angular/core'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-selection-template-numbers', + styleUrls: ['./tree-grid-selection-template-numbers.component.scss'], + templateUrl: './tree-grid-selection-template-numbers.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxCheckboxComponent] +}) +export class TreeGridSelectionTemplateNumbersSampleComponent implements OnInit { + public data: any[]; + + constructor() { } + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + } +} +``` +```html +
+ + + + + + + + + +
+ +
+ + + +
+ {{ rowContext.index + 1 }} + + +
+ + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} + +.header-selector { + width: 60px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; +} + +.header-image { + width: 40px; + height: 40px; +} + +.row-selector { + width: 60px; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 100%; +} + +.row-selector-index { + width: 25px; + text-align: center; +} +```
### Conditional Selection Demo This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. ```typescript +import { Component, OnInit } from '@angular/core'; +import { IRowSelectionEventArgs, IgxColumnComponent, IgxRowSelectorDirective } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-conditional-row-selectors', + styleUrls: ['./tree-grid-conditional-row-selectors.component.scss'], + templateUrl: 'tree-grid-conditional-row-selectors.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxRowSelectorDirective, IgxCheckboxComponent] +}) + +export class TreeGridConditionalRowSelectorsSampleComponent implements OnInit { + public employees: any[]; + public disabledCollection: string[] = []; + + public ngOnInit(): void { + this.employees = generateEmployeeFlatData(); + this.disabledCollection = this.employees.filter(empl => empl.OnPTO === true).map(empl => empl.ID); + } + + public isSelectionAllowed(newRowID: string) { + return this.disabledCollection.indexOf(newRowID) === -1; + } + + public onRowSelect(event: IRowSelectionEventArgs) { + if (!event.added.length && event.removed.length) { + // ignore deselect + return; + } + const originalAddedLength = event.added.length; + + // update selection to contain only allowed rows + event.newSelection = event.newSelection.filter(x => this.isSelectionAllowed(x.ID)); + + // cleanup selection if all conditionally selectable rows are already selected + if (event.newSelection.length + && !event.newSelection.filter(x => event.oldSelection.indexOf(x) === -1).length + && originalAddedLength > 1) { + // all selected from header, deselect instead + event.newSelection = []; + } + } +} +``` +```html +
+ + + + + + + + + +
+ + +
+ + +
+``` +```scss +.grid__wrapper { + margin: 0 16px; + padding-top: 10px; +} + +.row-selector { + display: flex; + align-items: center; + justify-content: center; + min-width: calc(1.25rem + (1.5rem * 2)); +} +```
## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) _ [IgxTreeGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Selection](selection.md) - [Cell selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md new file mode 100644 index 000000000..e169214fd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-search.md @@ -0,0 +1,225 @@ +--- +_tocName: Searching +_premium: true +--- +--- title: Angular Tree Grid Search Filter - Ignite UI for Angular _description: Perform fast grid search with Ignite UI for Angular Tree grid. It allows instant content search in the virtualized data of the Grid, while delivering better UX. _keywords: Content search, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/search --- # Angular Tree Grid Search Filter Angular Tree Grid search enables the process of finding values in the collection of data. We make it easier to setup this functionality and it can be implemented with search input box, buttons, keyboard navigation and other useful features for an even better user experience. While browsers natively provide content search functionality, most of the time the Tree Grid virtualizes its columns and rows that are out of view. In these cases, the native grid search is unable to search data in the virtualized cells, since they are not part of the DOM. We have extended the Ignite UI for Angular table-based grid with a **search API** that allows you to search through the **virtualized content** of the Tree Grid. ## Angular Search Example The following example represents Tree Grid with search input box that allows searching in all columns and rows, as well as specific filtering options for each column. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { generateEmployeeFlatData } from '../data/employees-flat'; + +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-search-sample', + styleUrls: ['./tree-grid-search-sample.component.scss'], + templateUrl: './tree-grid-search-sample.component.html', + imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconButtonDirective, IgxRippleDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridSearchSampleComponent implements OnInit { + + @ViewChild('treeGrid1', { static: true }) public treeGrid: IgxTreeGridComponent; + public data: any[]; + public searchText = ''; + public caseSensitive = false; + public exactMatch = false; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + } + + public clearSearch() { + this.searchText = ''; + this.treeGrid.clearSearch(); + } + + public searchKeyDown(ev) { + if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { + ev.preventDefault(); + this.treeGrid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { + ev.preventDefault(); + this.treeGrid.findPrev(this.searchText, this.caseSensitive, this.exactMatch); + } + } + + public updateSearch() { + this.caseSensitive = !this.caseSensitive; + this.treeGrid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } + + public updateExactSearch() { + this.exactMatch = !this.exactMatch; + this.treeGrid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } +} +``` +```html +
+ + + @if (searchText.length === 0) { + search + } + @if (searchText.length > 0) { + clear + } + + + + + @if (searchText.length > 0) { + + @if (treeGrid.lastSearchInfo) { +
+ @if (treeGrid.lastSearchInfo.matchInfoCache.length > 0) { + + {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} + results + + } + @if (treeGrid.lastSearchInfo.matchInfoCache.length === 0) { + + No results + + } +
+ } +
+ + + Aa + + + Ab + + +
+
+ + +
+ + } + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} + +.offset { + margin-bottom: 15px; +} + +.resultsText { + font-size: 0.875rem; +} + +.chips { + margin-left: 5px; +} + +.searchButtons { + margin-left: 5px; +} +```
## Angular Search Usage ### Grid setup Let's start by creating our grid and binding it to our data. We will also add some custom styles for the components we will be using! ```html + + + + + ``` @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```css /* searchgrid.component.css */ .grid__wrapper { + margin: 15px; } .offset { + margin-bottom: 15px; } .resultsText { + font-size: 0.875rem; } .chips { + margin-left: 5px; } .searchButtons { + margin-left: 5px; } ``` } Great, and now let's prepare for the search API of our Tree Grid! We can create a few properties, which can be used for storing the currently searched text and whether the search is case sensitive and/or by an exact match. ```typescript // searchgrid.component.ts public searchText: string = ''; public caseSensitive: boolean = false; public exactMatch: boolean = false; ``` ### Angular search box input Now let's create our search input! By binding our **searchText** as ngModel to our newly created input and subscribe to the ngModelChange event, we can detect every single **searchText** modification by the user. This will allow us to use the Tree Grid's [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext) and [`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findPrev) methods to highlight all the occurrences of the **searchText** and scroll to the next/previous one (depending on which method we have invoked). Both the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findPrev) methods have three arguments: - `text`: **string** (the text we are searching for) - (optional) `caseSensitive`: **boolean** (should the search be case sensitive or not, default value is false) - (optional) `exactMatch`: **boolean** (should the search be by an exact match or not, default value is false) When searching by an exact match, the search API will highlight as results only the cell values that match entirely the **searchText** by taking the case sensitivity into account as well. For example the strings '_software_' and '_Software_' are an exact match with a disregard for the case sensitivity. The methods from above return a **number** value (the number of times the Tree Grid contains the given string). ```html ``` ### Display results count Let's also display the position of the current occurrence, along with the total results count! We can do this by using the grid's `lastSearchInfo` property. This property is automatically updated when using the **find** methods. - The `treeGrid.lastSearchInfo.matchInfoCache.length` value will give us the total results count. - The `treeGrid.lastSearchInfo.activeMatchIndex` value will give us the index position of the current occurrence (match). ```html
+ + {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} results + + + No results +
``` ### Add search buttons In order to freely search and navigate among our search results, let's create a couple of buttons by invoking the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findPrev) methods inside the buttons' respective click event handlers. ```html
+ +
``` ### Add keyboard search We can also allow the users to navigate the results by using the keyboard's arrow keys and the Enter key. In order to achieve this, we can handle the **keydown** event of our search input by preventing the default caret movement of the input with the preventDefault() method and invoke the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findPrev) methods depending on which key the user has pressed. ```html ``` ```typescript // searchgrid.component.ts public searchKeyDown(ev) { + if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { + ev.preventDefault(); + this.treeGrid.findNext(this.searchText, this.caseSensitive, this.exactMatch); + } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { + ev.preventDefault(); + this.treeGrid.findPrev(this.searchText, this.caseSensitive, this.exactMatch); + } } ``` ### Case sensitive and Exact match Now let's allow the user to choose whether the search should be case sensitive and/or by an exact match. For this purpose we can use simple checkbox inputs by binding our **caseSensitive** and **exactMatch** properties to the inputs' **checked** properties respectively and handle their **change** events by toggling our properties and invoking the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext) method. ```html Case sensitive Exact match ``` ```typescript // searchgrid.component.ts public updateSearch() { + this.caseSensitive = !this.caseSensitive; + this.treeGrid.findNext(this.searchText, this.caseSensitive, this.exactMatch); } public updateExactSearch() { + this.exactMatch = !this.exactMatch; + this.treeGrid.findNext(this.searchText, this.caseSensitive, this.exactMatch); } ``` ### Persistence What if we would like to filter and sort our Tree Grid or even to add and remove records? After such operations, the highlights of our current search automatically update and persist over any text that matches the **searchText**! Furthermore, the search will work with paging and will persist the highlights through changes of the Tree Grid's [`perPage`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxPaginatorComponent.html#perPage) property. ### Adding icons By using some of our other components, we can create an enriched user interface and improve the overall design of our entire search bar! We can have a nice search or delete icon on the left of the search input, a couple of chips for our search options and some material design icons combined with nice ripple styled buttons for our navigation on the right. We can wrap these components inside an input group for a more refined design. To do this, let's go and grab the [**IgxInputGroup**](../input-group.md), [**IgxIcon**](../icon.md), [**IgxRipple**](../ripple.md), [**IgxButton**](../button.md) and the [**IgxChip**](../chip.md) modules. ```typescript // app.module.ts ... import { + IgxTreeGridModule, + IgxInputGroupModule, + IgxIconModule, + IgxRippleModule, + IgxButtonModule, + IgxChipsModule } from 'igniteui-angular'; // import { // IgxInputGroupModule, // IgxIconModule, // IgxRippleModule, // IgxButtonModule, // IgxChipsModule // } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ + ... + imports: [..., IgxInputGroupModule, IgxIconModule, IgxRippleModule, IgxButtonModule, IgxChipsModule], }) export class AppModule {} ``` Finally, let's update our template with the new components! We will wrap all of our components inside an [**IgxInputGroup**](../input-group.md). On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our **searchText** and invoke the Tree Grid's [`clearSearch`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#clearSearch) method to clear the highlights. ```html + + search + clear + + + + + + ... + ``` ```typescript // searchgrid.component.ts public clearSearch() { + this.searchText = ''; + this.treeGrid.clearSearch(); } ``` On the right in our input group, let's create three separate containers with the following purposes: - For displaying the search results. ```html +
+ + {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchInfoCache.length }} results + + + No results + +
``` - For displaying a couple of chips that toggle the **caseSensitive** and the **exactMatch** properties. We have replaced the checkboxes with two stylish chips that change color based on these properties. Whenever a chip is clicked, we invoke its respective handler - **updateSearch** or **updateExactSearch** depending on which chip has been clicked. ```html + + ... +
+ + + Case Sensitive + + + Exact Match + + +
+ ... ``` - For the search navigation buttons, we have transformed our inputs into ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the [`findNext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findPrev) methods. ```html +
+ + +
``` ## Known Limitations |Limitation|Description| |--- |--- | |Searching in cells with a template|The search functionality highlights work only for the default cell templates. If you have a column with custom cell template, the highlights will not work so you should either use alternative approaches, such as a column formatter, or set the [`searchable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#searchable) property on the column to false.| |Remote Virtualization| The search will not work properly when using remote virtualization| |Cells with cut off text| When the text in the cell is too large to fit and the text we are looking for is cut off by the ellipsis, we will still scroll to the cell and include it in the match count, but nothing will be highlighted | ## API References In this article we implemented our own search bar for the Tree Grid with some additional functionality when it comes to navigating between the search results. We also used some additional Ignite UI for Angular components like icons, chips and inputs. The search API is listed below. [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) methods: - [findNext](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findNext) - [findPrev](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#findPrev) - [clearSearch](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#clearSearch) - [refreshSearch](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#refreshSearch) [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) methods: [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) properties: - [searchable](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#searchable) [ISearchInfo](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isearchinfo.html) Additional components and/or directives with relative APIs that were used: - [IgxInputGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputgroupcomponent.html) - [IgxIconComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxiconcomponent.html) - [IgxRippleDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxrippledirective.html) - [IgxButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) - [IgxChipComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) Styles: - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxInputGroupComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) - [IgxIconComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) - [IgxRippleDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) - [IgxButtonDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) - [IgxChipComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Filtering](filtering.md) - [Paging](paging.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md new file mode 100644 index 000000000..5721d5436 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-selection.md @@ -0,0 +1,129 @@ +--- +_tocName: Selection +--- +--- title: Angular Tree Grid Selection - Ignite UI for Angular _description: See how easy it is to select data in Ignite UI for Angular grid using variety of events, rich API or with simple mouse interactions like single select. _keywords: data select, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/selection --- # Angular Tree Grid Selection With Ignite UI for Angular Tree Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select. ## Angular Grid Selection Example The sample below demonstrates the three types of Tree Grid's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { GridSelectionMode, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-cell-selection', + styleUrls: ['./tree-grid-cellSelection.component.scss'], + templateUrl: 'tree-grid-cellSelection.component.html', + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent] +}) +export class TreeGridCellSelectionComponent implements OnInit { + + @ViewChild('treegrid', { static: true }) public treeGrid: IgxTreeGridComponent; + @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent; + + public data: any[]; + public selection = true; + public selectionMode: GridSelectionMode = 'multiple'; + public selectionModes = []; + + constructor() { } + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + this.selectionModes = [ + { label: 'none', selected: this.selectionMode === 'none', togglable: true }, + { label: 'single', selected: this.selectionMode === 'single', togglable: true }, + { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true } + ]; + this.snackbar.autoHide = false; + this.snackbar.open(); + } + + public selectCellSelectionMode(args) { + this.selectionMode = this.selectionModes[args.index].label; + this.snackbar.open(); + } +} +``` +```html +
+ + + + + + + + + + + + +
+ + +
+ notification_important + @if (selectionMode === 'multiple') { +
    +
  • This is the default selection behavior.
    • +
  • Click on a cell and while pressing the mouse key perform drag action. +
    • +
  • Select a cell and press Shift + Arrow down key, this will start range selection as well. +
    • +
+ } + @if (selectionMode === 'single') { +
    +
  • Now you can select only one cell within the grid.
    • +
  • On single cell click the previous selection state will be cleared.
    • +
  • The mouse drag will not work and instead of selecting a cell, this will make default text + selection.
    • +
+ } + @if (selectionMode === 'none') { +
    +
  • Now you are unable to select a cell while interacting with grid UI.
    • +
  • If you need to select a cell, you can use the grid API methods.
    • +
+ } +
+ +``` +```scss +.grid__wrapper { + display: flex; + justify-content: space-between; + margin: 0 16px 24px; + flex-flow: column; + align-items: flex-start; + padding-top: 16px; + position: relative; +} + +.button-group-wrapper { + margin-bottom: 16px; +} + +.igx-snackbar { + background: rgba(0, 0, 0, 0.7); +} + +.container { + display: flex; + igx-icon { + margin: 20px; + } +} +```
## Angular Grid Selection Options IgniteUI for Angular Tree Grid component provides three different selection modes - [Row selection](row-selection.md), [Cell selection](cell-selection.md) and [Column selection](column-selection.md). By default only **Multi-cell selection** mode is enabled in the Tree Grid. In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) properties. ### Angular Row Selection Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) enables you to specify the following options: - none - Row selection would be disabled for the Tree Grid - single - Selection of only one row within the Tree Grid would be available - multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused - multipleCascade - This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent's selection state entirely depends on the selection state of its children. > Go to [Row selection topic](row-selection.md) for more information. ### Angular Cell Selection Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#cellSelection) enables you to specify the following options: - none - Cell selection would be disabled for the Tree Grid - single - Selection of only one cell within the Tree Grid would be available. - multiple - Currently, this is the default state of the selection in the Tree Grid. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously. > Go to [Cell selection topic](cell-selection.md) for more information. ### Angular Column Selection The [`selectable` property](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#selectable) enables you to specify the following options for each **column**: - false - the corresponding column selection will be disabled for the Tree Grid - true - the corresponding column selection will be enabled for the Tree Grid - This lead to the following three variations: - Single selection - mouse click over the column cell. - Multi column selection - holding ctrl + mouse click over the column cells. - Range column selection - holding shift + mouse click selects everything in between. > Go to [Column selection topic](column-selection.md) for more information. ## Known Issues and Limitations - Using the Tree Grid with Selection enabled on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. IE11 is no longer supported as of version 13.0.0. + + ```typescript + import 'core-js/es7/array'; + ``` - When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: + - Row Selection + - Row Expand/collapse + - Row Editing + - Row Pinning ## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) _ [IgxTreeGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxGridCell API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Row Selection](row-selection.md) - [Cell Selection](cell-selection.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sizing.md new file mode 100644 index 000000000..620b5631b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sizing.md @@ -0,0 +1,90 @@ +--- +_tocName: Sizing +_premium: true +--- +--- title: Angular Tree Grid Sizing - Ignite UI for Angular _description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have. _keywords: angular grid sizing, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/sizing --- # Angular Grid Sizing There are many different ways to size the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) in order to accommodate a lot of scenarios that the users can have. While some are straight forward, others might be more complex and that is why we will take each one and look into them in more depth. We will go through setting `width` and `height` separately since there are some differences e.g. when using percentages for each. When it comes to border and padding size for the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) will size correctly. ## Width If the `width` input does not have value assigned, its default value is `100%` and the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] > Setting manually the `width` style of the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) itself will result in an unexpected behavior. ### Null The grid's `width` can accepts value of `null`, which when set, renders all columns in the DOM. The grid sizes accordingly so there is no grid horizontal scrollbar since column virtualization is not applied. - If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. + + Columns Default Grid Width Null - If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible: + + Width Null No Scroll - If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario: + + Width Null Scroll - If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example. + + Width Null Parent Scroll > [!Note] > Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization. ### Pixels When the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: - When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. + + Width Cols Scrollbar - For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `width` is still `1200px`, it will look similar to the following illustrations: + + Width Cols Scroll Parent No Scroll + Width Cols Scroll Parent Scroll ### Percentages When the `width` of the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) will size relative to the browser window. - For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly. + + Width Percent 100% - If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`. + + Width Percent Parent 100% - If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. + + Width Percent 150% Parent No Scroll + Width Percent 150% Parent Scroll ## Height By default if no height is defined for the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] > Setting manually the `height` style of the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) itself will result in an unexpected behavior. ### Null The [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. + + Height Null 14 Rows - If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows. + + Height Null 24 Rows - If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: + + Height Null 24 Rows Parent No Scroll + Height Null 24 Rows Parent Scroll > [!Note] > Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization. ### Pixels Setting the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels. - If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area. + + Height 500px 4 Rows - If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: + + Height 500px 14 Rows - If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. + + Height 700px 14 Rows Parent No Scroll + Height 700px 14 Rows Parent Scroll ### Percentages When the `height` input is set to percentages the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) will size based on the parent element height. If the parent element has its `height` set in pixels or percentages, the grid will size relative to the size of the parent. When the parent element does not have defined height, the browser does not assign height to it initially and sizes it based on its children and their size. That is why there is no way for the grid to know what base height to use in order to apply percentage sizing based on it. For this reason, it will render a maximum of 10 rows and if they are more rows, a vertical scrollbar will be rendered. Otherwise, the grid will fit to number of rendered rows. We will look in this scenario in more detail in the next examples. Let's have `width` set to `1200px` and the parent element not having any size applied to it: - If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid. + + Height Undefined 7 Rows - If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14. + + Height Undefined 14 Rows - If we set the parent element height to `800px` and the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`. + + Height Percent 100% Parent 800px - If the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. + + Height Percent 130% Parent No Scroll + Height Percent 130% Parent Scroll - If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized. + + Height Percent 100% Parent 100% ## Column Sizing Depending on the grid size itself, the columns inside it can also be sized differently that could result in scenarios where the grid renders horizontal scrollbar or not. Columns can have width set in pixels, percentages or autosized when nothing is set. We will take a deeper look regarding these scenarios in this section. ### Default By default when a column doesn't have a specified width it will try to autosize, so that it fills if any empty space is available in the grid view area. Autosized columns have minimum width of `136px`, so if the area available is less than `136px` for that column, it will default to that size. When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available. - If a column does not have specified `width` and the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`. + + Columns Default Grid with Width Null - When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`. + + Columns Default All Row Selectors - If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`. + + Columns Default All Min 136px - If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest. + + Columns Default First Rest 100px - Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`. + + Columns Default All First 100px > [!Note] > Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns. ### Pixels When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `width` or exceed it. - If the combined `width` of all columns is less than the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html). In the next example the columns have `150px` width. + + Columns 150px Resulting in Empty Area - If the combined `width` of all columns is bigger than the actual [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. + + Columns 150px Resulting in Extra Area ### Auto When columns are set to `auto` their size adjusts to fit the longest word in the column. Empty areas are possible if there are cells with very short values, while other cells have very long ones. In this scenario, all cells in the column would adjust to take the width of the cell with the longest value. Columns Auto Width ### Percentages When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. + + Columns Percent Less than 100% - If the combined width is exactly `100%`, the columns will fill all available space of the grid. + + Columns Percent 100% - If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered. + + Columns Percent Bigger than 100% - If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`: + + Columns Percent Grid with Width Null ## Grid Cell Spacing Control The [**IgxTreeGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) automatically adapts its internal spacing based on the [size](display-density.md) setting. You can further customize the padding and margins in grid header and body cells using CSS custom properties for spacing control. ### Global Grid Spacing To reduce or increase spacing across all grid cells in your application: ```css /* Reduce all grid spacing by 20% */ igx-grid { + --ig-spacing: 0.8; } /* Increase spacing for better touch accessibility */ igx-grid { + --ig-spacing: 1.2; } ``` ### Grid-Specific Spacing To adjust spacing for a specific grid instance: ```css /* Make a particular grid more compact */ .my-compact-grid { + --ig-spacing: 0.6; } /* Give a specific grid more breathing room */ .my-spacious-grid { + --ig-spacing: 1.4; } ``` ### Directional Spacing Control You can control horizontal and vertical spacing independently: ```css /* Reduce only horizontal spacing (left/right padding) */ .my-grid { + --ig-spacing-inline: 0.5; + --ig-spacing-block: 1.0; /* Keep vertical spacing normal */ } /* Adjust vertical spacing for tighter row spacing */ .my-grid { + --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */ + --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */ } ``` ### Size-Specific Spacing Different spacing multipliers can be applied based on the grid's display density: ```css .my-grid { + /* Compact density gets very tight spacing */ + --ig-spacing-small: 0.5; + + /* Medium density uses normal spacing */ + --ig-spacing-medium: 1.0; + + /* Comfortable density gets extra spacing */ + --ig-spacing-large: 1.3; } ``` ### Header vs Body Cell Spacing While the spacing properties affect both header and body cells, you can target them specifically if needed: ```css /* Reduce padding in header cells specifically */ .my-grid igx-grid-header { + --ig-spacing: 0.7; } /* Adjust spacing in data cells */ .my-grid igx-grid-cell { + --ig-spacing: 0.9; } ``` > [!Note] > These spacing adjustments work in conjunction with the grid's display density. The spacing multipliers are applied to the base spacing values that are already determined by whether the grid is in compact, cozy, or comfortable density mode. ## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) _ [IgxTreeGridRow API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md new file mode 100644 index 000000000..2f03efb11 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-sorting.md @@ -0,0 +1,342 @@ +--- +_tocName: Sorting +_premium: true +--- +--- title: Angular Tree Grid Sorting - Ignite UI for Angular _description: Get started with the Angular sorting feature of Ignite for Angular UI grid! Configure a mix of sortable columns & change the display order of data records. _keywords: angular sort, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/sorting --- # Angular Tree Grid Sorting In Ignite UI for Angular Tree Grid, data sorting is enabled on a per-column level, meaning that the **igx-tree-grid** can have a mix of sortable and non-sortable columns. Performing angular sort actions enables you to change the display order of the records based on specified criteria. >[!NOTE] > Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. ## Angular Tree Grid Sorting Overview Example Additionally there is a custom context menu added for sorting using **igx-tree-grid**'s [`contextMenu`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#contextMenu) Output. ```typescript +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { DefaultSortingStrategy, ISortingOptions, SortingDirection } from 'igniteui-angular/core'; +import { IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; +import { IgxComboClearIconDirective, IgxComboItemDirective } from 'igniteui-angular/combo'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { FormsModule } from '@angular/forms'; +import { UpperCasePipe } from '@angular/common'; +import { TreeGridContextmenuComponent } from './tree-grid-contextmenu/tree-grid-contextmenu.component'; + +@Component({ + selector: 'app-tree-grid-sorting-sample', + styleUrls: ['./tree-grid-sorting-sample.component.scss'], + templateUrl: 'tree-grid-sorting-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxButtonDirective, IgxGridToolbarActionsComponent, IgxSimpleComboComponent, FormsModule, IgxComboClearIconDirective, IgxComboItemDirective, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxCellTemplateDirective, TreeGridContextmenuComponent, UpperCasePipe] +}) + +export class TreeGridSortingSampleComponent implements OnInit, AfterViewInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + public data: any[]; + public contextmenu = false; + public contextmenuX = 0; + public contextmenuY = 0; + public clickedCell = null; + public sortingTypes: ISortingOptions[] = [ + { + mode: 'single' + }, { + mode: 'multiple' + } + ]; + public sortingOptions: ISortingOptions = this.sortingTypes[1]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { } + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public ngAfterViewInit(): void { + this.treegrid1.sortingExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'UnitPrice', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + + public rightClick(eventArgs) { + eventArgs.event.preventDefault(); + this.contextmenuX = eventArgs.event.clientX; + this.contextmenuY = eventArgs.event.clientY; + this.contextmenu = true; + this.clickedCell = eventArgs.cell; + } + + public disableContextMenu() { + this.contextmenu = false; + } + + handleSearchResults(event: KeyboardEvent) { + event.preventDefault(); + } +} +``` +```html +
+ + + + + + + + + +
{{ item.mode | uppercase }}
+ + + + + + + + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + @if (contextmenu) { +
+ +
+ } +
+``` +```scss +.grid__wrapper { + --ig-size: var(--ig-size-small); + margin: 0 16px; + padding-top: 16px; +} + +.igx-grid-toolbar ::ng-deep { + .igx-grid-toolbar__custom-content { + display: flex; + flex-direction: row; + justify-content: flex-start; + } +} +```
This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortable) input. With the Tree Grid sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortingIgnoreCase) property to perform case sensitive sorting: ```html ``` ## Sorting Indicators Having a certain amount of sorted columns could be really confusing if there is no indication of the sorted order. The **IgxTreeGrid** provides a solution for this problem by indicating the index of each sorted column. @@if(igxName === "IgxGrid"){ ```typescript +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +import { DefaultSortingStrategy } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { FinancialData } from '../../data/financialData'; +import {generateRandomInteger, generateRandomFloat} from '../../data/utils'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-grid-sorting-indicators', + templateUrl: './grid-sorting-indicators.component.html', + styleUrls: ['./grid-sorting-indicators.component.scss'], + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { + + @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; + public data; + + public ngOnInit(): void { + const typeArr = ['Gold', 'Silver', 'Coal']; + this.data = FinancialData.generateData(1000).map(dataObj => { + const type = typeArr[generateRandomInteger(0, 2)]; + switch (type) { + case 'Gold': + dataObj['Type'] = 'Gold'; + dataObj['Price'] = generateRandomFloat(1261.78, 1302.76); + dataObj['Buy'] = generateRandomFloat(1261.78, 1280.73); + break; + case 'Silver': + dataObj['Type'] = 'Silver'; + dataObj['Price'] = generateRandomFloat(17.12, 17.73); + dataObj['Buy'] = generateRandomFloat(17.12, 17.43); + break; + case 'Coal': + dataObj['Type'] = 'Coal'; + dataObj['Price'] = generateRandomFloat(0.40, 0.42); + dataObj['Buy'] = generateRandomFloat(0.42, 0.46); + break; + } + return dataObj; + }); + } + + public ngAfterViewInit() { + const expressions = []; + this.grid.columns.forEach(c => { + const sortExpr = + { + dir: generateRandomInteger(1, 2), fieldName: c.field, + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + }; + expressions.push(sortExpr); + }); + this.grid.sortingExpressions = expressions; + this.grid.cdr.detectChanges(); + } + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } + +} +``` +```html +
+ + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} +``` } ## Sorting through the API You can sort any column or a combination of columns through the Tree Grid API using the Tree Grid [`sort`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#sort) method: ```typescript import { SortingDirection } from 'igniteui-angular/grids/core'; // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package // Perform a case insensitive ascending sort on the ProductName column. this.treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true }); // Perform sorting on both the ProductName and Price columns. this.treeGrid.sort([ + { fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true }, + { fieldName: 'UnitPrice', dir: SortingDirection.Desc } ]); ``` > [!NOTE] > Sorting is performed using our [`DefaultSortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/defaultsortingstrategy.html) algorithm. Any [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortStrategy) or [`ISortingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html#strategy) can use a custom implementation of the [`ISortingStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingstrategy.html) as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#clearsort) method: ```typescript // Removes the sorting state from the ProductName column this.treeGrid.clearSort('Name'); // Removes the sorting state from every column in the Tree Grid this.treeGrid.clearSort(); ``` > [!NOTE] > The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#sortStrategy) of the **Tree Grid** is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortStrategy) of the **column**, since they work in different scopes and expose different parameters. > [!NOTE] > The sorting operation **DOES NOT** change the underlying data source of the Tree Grid. ## Initial sorting state It is possible to set the initial sorting state of the Tree Grid by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#sortingExpressions) property of the Tree Grid. ```typescript public ngAfterViewInit(): void { + this.treeGrid.sortingExpressions = [ + { + dir: SortingDirection.Asc, fieldName: 'UnitPrice', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() + } + ]; } ``` > [!NOTE] > If values of type `string` are used by a column of [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType) `Date`, the Tree Grid won't parse them to `Date` objects and using Tree Grid `sorting` won't work as expected. If you want to use `string` objects, additional logic should be implemented on an application level, in order to parse the values to `Date` objects.
## Sorting Indicators Templates The sorting indicator icon in the column header can be customized using a template. The following directives are available for templating the sorting indicator for any sorting state (ascending, descending, none): - `IgxSortHeaderIconDirective` – re-templates the sorting icon when no sorting is applied. ```html + unfold_more ``` - `IgxSortAscendingHeaderIconDirective` – re-templates the sorting icon when the column is sorted in ascending order. ```html + expand_less ``` - `IgxSortDescendningHeaderIconDirective` – re-templates the sorting icon when the column is sorted in descending order. ```html + expand_more ```
## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) and accepts the `$sorted-header-icon-color` and `sortable-header-icon-hover-color` parameters. ```scss $custom-theme: grid-theme( + $sorted-header-icon-color: #ffb06a, + $sortable-header-icon-hover-color: black ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: ```scss :host { + @include tokens($custom-theme); } ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-sorting-styling', + styleUrls: ['./tree-grid-sorting-styling.component.scss'], + templateUrl: 'tree-grid-sorting-styling.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridSortingStylingComponent implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + public data: any[]; + + public options = { + digitsInfo: '1.2-2', + currencyCode: 'USD' + }; + public formatOptions = this.options; + + constructor() { + } + public ngOnInit(): void { + this.data = ORDERS_DATA; + this.treegrid1.sortingExpressions = [ + { dir: SortingDirection.Asc, fieldName: 'UnitPrice', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + } + + public formatDate(val: Date) { + return new Intl.DateTimeFormat('en-US').format(val); + } + +} +``` +```html +
+ + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-theme( + $sorted-header-icon-color: #ffb06a, + $sortable-header-icon-hover-color: black +); + +:host { + @include tokens($custom-theme); +} +``` >[!NOTE] >The sample will not be affected by the selected global theme from `Change Theme`. ## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [ISortingExpression](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md new file mode 100644 index 000000000..643f59fe6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-state-persistence.md @@ -0,0 +1,290 @@ +--- +_tocName: State Persistence +_premium: true +--- +--- title: Angular Tree Grid State Persistence - Ignite UI for Angular _description: Easily save and restore the grid state, using our comprehensive Ignite UI toolset for Angular. Learn how to restore columns, explore usage, and see demos! _keywords: state persistence, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/state-persistence --- # Angular Tree Grid State Persistence Тhe igxGridState directive allows developers to easily save and restore the grid state. When the [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive is applied on the grid, it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) and [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) methods that developers can use to achieve state persistence in any scenario. ## Supported Features [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive supports saving and restoring the state of the following features: - `Sorting` - `Filtering` - `Advanced Filtering` - `Paging` - `Cell Selection` - `Row Selection` - `Column Selection` - `Row Pinning` - `Expansion` - `Columns` + - **NEW**: Multi column headers are now supported out of the box + - Columns order + - Column properties defined by the [`IColumnState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icolumnstate.html) interface. + - Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence.md#restoring-columns) section. >[!NOTE] > The [`IgxGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) directive does not take care of templates. Go to [Restoring Column](state-persistence.md#restoring-columns) section to see how to restore column templates. >[!NOTE] > The `Row Selection` feature requires the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#primaryKey) property to be set, so it can be stored/restored correctly. ## Usage [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) - This method returns the grid state in a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The method accepts first optional parameter `serialize`, which determines whether [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) will return an [`IGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstate.html) object or a serialized JSON string. The developer may choose to get only the state for a certain feature/features, by passing in the feature name, or an array with feature names as a second argument. ```typescript // get all features` state in a serialized JSON string const gridState = state.getState(); // get an `IGridState` object, containing all features original state objects, as returned by the grid public API const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']); ``` [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) - The [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) method accepts the serialized JSON string or [`IGridState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstate.html) object as argument and will restore the state of each feature found in the object/JSON string. ```typescript state.setState(gridState); state.setState(sortingFilteringStates) ``` `options` - The [`options`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#options) object implements the [`IGridStateOptions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igridstateoptions.html) interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getState) method will not put the state of these features in the returned value and [`setState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#setState) method will not restore state for it. ```typescript public options = { cellSelection: false; sorting: false; } ``` ```html ``` The simple to use single-point API's allows to achieve a full state persistence functionality in just a few lines of code. **Copy paste the code from below** - it will save the grid state in the browser `sessionStorage` object every time the user leaves the current page. Whenever the user returns to main page, the grid state will be restored. No more need to configure those complex advanced filtering and sorting expressions every time to get the data you want - do it once and have the code from below do the rest for your users: ```typescript // app.component.ts @ViewChild(IgxGridStateDirective, { static: true }) public state!: IgxGridStateDirective; public ngOnInit() { + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); } public ngAfterViewInit() { + this.restoreGridState(); } public saveGridState() { + const state = this.state.getState() as string; + window.sessionStorage.setItem('grid1-state', state); } public restoreGridState() { + const state = window.sessionStorage.getItem('grid1-state'); + this.state.setState(state); } ``` ## Restoring columns When possible the state directive will reuses the columns that already exists on the grid when restoring the state, instead of creating new column instances. The only scenario where a new instance will be created is when the column (or its children in case of a column groups) have no `field` property so there's no way to uniquely identify the matching column and re-use it. For such scenarios, the following [`limitations`](state-persistence.md#limitations) are imposed. In that case restoring complex objects can be achieved with code on application level. Let's show how to do this for templated columns: 1. Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event: @@if (igxName === 'IgxGrid') { ```html + + + + + + ... ``` } @@if (igxName === 'IgxHierarchicalGrid') { ```html + + + + + + ... ``` } @@if (igxName === 'IgxTreeGrid') { ```html + + + + + + ... ``` } 2. Query the template view in the component using @ViewChild or @ViewChildren decorator. In the [`columnInit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#columnInit) event handler, assign the template to the column `bodyTemplate` property: ```typescript @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef; public onColumnInit(column: IgxColumnComponent) { + if (column.field === 'IsActive') { + column.bodyTemplate = this.activeTemplate; + column.summaries = MySummary; + column.filters = IgxNumberFilteringOperand.instance(); + } } ``` ## Demo ```typescript +import { Component, OnInit, ViewChild, ViewChildren, QueryList, AfterViewInit, inject } from '@angular/core'; +import { NavigationStart, Router, RouterLink } from '@angular/router'; +import { FilteringExpressionsTree, FilteringLogic } from 'igniteui-angular/core'; +import { GridFeatures, IGridState, IGridStateOptions, IgxColumnComponent, IgxGridStateDirective } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { take } from 'rxjs/operators'; +import { EMPLOYEE_DATA } from './data'; + + +// tslint:disable:object-literal-sort-keys +@Component({ + selector: 'app-tgrid', + styleUrls: ['./tGrid-state.component.scss'], + templateUrl: './tGrid-state.component.html', + imports: [IgxButtonDirective, IgxIconComponent, RouterLink, IgxCheckboxComponent, IgxTreeGridComponent, IgxGridStateDirective, IgxPaginatorComponent, IgxColumnComponent] +}) + +export class TGridSaveStateComponent implements OnInit, AfterViewInit { + private router = inject(Router); + + + @ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective; + @ViewChild('treeGrid', { static: true }) public tGrid: IgxTreeGridComponent; + @ViewChildren(IgxCheckboxComponent) public checkboxes: QueryList; + + public localData: any[]; + public columns: any[]; + public treeGridId = 'tGrid1'; + public stateKey = this.treeGridId + '-state'; + public gridState: IGridState; + public serialize = true; + + public features: { key: GridFeatures; shortName: string }[] = [ + { key: 'advancedFiltering', shortName: 'Adv Filt' }, + { key: 'cellSelection', shortName: 'Cell Sel' }, + { key: 'columns', shortName: 'Columns' } , + { key: 'columnSelection', shortName: 'Cols Sel' }, + { key: 'expansion', shortName: 'Expansion' }, + { key: 'filtering', shortName: 'Filt' }, + { key: 'paging', shortName: 'Paging' }, + { key: 'rowPinning', shortName: 'Row Pining' }, + { key: 'rowSelection', shortName: 'Row Sel' }, + { key: 'sorting', shortName: 'Sorting' } + ]; + + public options: IGridStateOptions = { + cellSelection: true, + rowSelection: true, + filtering: true, + advancedFiltering: true, + paging: true, + sorting: true, + columns: true, + expansion: true, + rowPinning: true, + columnSelection: true + }; + + constructor() { + this.localData = EMPLOYEE_DATA; + } + + public ngOnInit() { + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); + } + + public ngAfterViewInit() { + this.restoreGridState(); + } + + public saveGridState() { + const state = this.state.getState(this.serialize); + if (typeof state === 'string') { + window.localStorage.setItem(this.stateKey, state); + } else { + window.localStorage.setItem(this.stateKey, JSON.stringify(state)); + } + } + + public restoreGridState() { + const state = window.localStorage.getItem(this.stateKey); + if (state) { + this.state.setState(state); + } + } + + public restoreFeature(stateDirective: IgxGridStateDirective, feature: string) { + const state = this.getFeatureState(this.stateKey, feature); + if (state) { + const featureState = { } as IGridState; + featureState[feature] = state; + stateDirective.setState(featureState); + } + } + + public getFeatureState(stateKey: string, feature: string) { + let state = window.localStorage.getItem(stateKey); + state = state ? JSON.parse(state)[feature] : null; + return state; + } + + public resetGridState() { + const tGrid: IgxTreeGridComponent = this.tGrid; + tGrid.filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + tGrid.advancedFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); + tGrid.sortingExpressions = []; + tGrid.deselectAllRows(); + tGrid.clearCellSelection(); + } + + public onChange(event: any, action: string) { + if (action === 'toggleAll') { + this.checkboxes.forEach(cb => { + cb.checked = event.checked; + }); + for (const key of Object.keys(this.options)) { + this.state.options[key] = event.checked; + } + return; + } + this.state.options[action] = event.checked; + } + + public clearStorage() { + window.localStorage.removeItem(this.stateKey); + } + + public reloadPage() { + window.location.reload(); + } + + public formatter = (a) => a; +} +``` +```html +
+
+
+ + + + + + +
+ +
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
+ +
+
+ All +
+ @for (f of features; track f) { +
+ + {{ f.shortName }} + +
+ } +
+
+ + + + + + + +
+``` +```scss +.controls-holder { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + width: 100%; +} + +.switches { + display: flex; + justify-content: space-between; + justify-content: flex-start; + align-items: center; + flex: 1 0 0%; + min-width: 100%; + padding-right: 20px; + font-size: 0.9rem; + margin-top: 0; + > button { + margin-right: 10px; + } +} + +.control-item { + display: block; + padding: 8px 0px; + > span { + cursor: pointer; + } + margin-right: 10px; +} + +.grid__wrapper { + --ig-size: var(--ig-size-medium); + margin: 0 16px; + padding-top: 16px; + width: 100%; +} +``` ## Limitations - [`getState`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html#getstate) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgxGridState`] directive will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#filters), [`summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaries), [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#sortstrategy), [`cellClasses`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellClasses), [`cellStyles`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellstyles), [`headerTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#headerTemplate) and [`bodyTemplate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#bodyTemplate) properties.
## API References - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxGridStateDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective.html) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Selection](selection.md) + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md new file mode 100644 index 000000000..c8a4fe06c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-summaries.md @@ -0,0 +1,1560 @@ +--- +_tocName: Summaries +_premium: true +--- +--- title: Angular Grid Summaries - Ignite UI for Angular _description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular table _keywords: angular grid summaries, ignite ui for angular, infragistics _license: commercial _canonicalLink: grid/summaries --- # Angular Tree Grid Summaries The Angular UI grid in Ignite UI for Angular has a **summaries** feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Tree Grid. ## Angular Tree Grid Summaries Overview Example ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-summary-sample', + styleUrls: ['./tree-grid-summary-sample.component.scss'], + templateUrl: './tree-grid-summary-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] +}) +export class TreeGridSummarySampleComponent { + + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public grid1: IgxTreeGridComponent; + public data; + + constructor() { + this.data = ORDERS_DATA; + } + + public toggleSummary(column: ColumnType) { + column.hasSummary = !column.hasSummary; + } +} +``` +```html +
+ + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
Units
+ functions + + + + + ${{ val }} + + +
Unit Price
+ functions + + + + + ${{ val }} + + +
Price
+ functions + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
{{ col.field }}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
Order Date
+ functions + + + +
+``` +```scss +:host{ + ::ng-deep { + .grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + + } + + .header { + height: 100%; + } + + .igx-grid__th .title{ + width: 100%; + cursor: auto; + } + + } +} + +.grid__wrapper { + margin: 0 16px; + padding-top: 16px; +} + +@media screen and (max-width: 677px){ + + [class*=header-icon]{ + padding-bottom: 17px; + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + [class*=text]{ + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } +} + + +@media screen and (min-width: 677px){ + + [class*=header-icon]{ + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + + [class*=text] { + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } +} + + +@media screen and (min-width: 992px){ + + [class*=header-icon] { + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + margin-right: 10px; + cursor: pointer; + } + + [class*=text] { + float:left; + white-space: nowrap; + width: 50%; + cursor: auto; + } +} +```
> [!NOTE] > The summary of the column is a **function of all column values**, unless filtering is applied, then the summary of the column will be **function of the filtered result values** **Tree Grid summaries** can also be enabled on a per-column level in Ignite UI for Angular, which means that you can activate it only for columns that you need. Tree Grid summaries gives you a predefined set of default summaries, depending on the type of data in the column, so that you can save some time: For `string` and `boolean` [`data types`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#dataType), the following function is available: - count For `number`, `currency` and `percent` data types, the following functions are available: - count - min - max - average - sum For `date` data type, the following functions are available: - count - earliest - latest All available column data types could be found in the official [Column types topic](column-types.md#default-template). **Tree Grid summaries** are enabled per-column by setting [`hasSummary`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#hasSummary) property to `true`. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the `igx-tree-grid` the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the [`dataType`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#datatype) property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs). ```html + + + ``` The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#enableSummaries)/[`disableSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#disableSummaries) of the **igx-tree-grid**. ```html + + + ``` ```typescript public enableSummary() { + this.grid1.enableSummaries([ + {fieldName: 'Units', customSummary: this.mySummary}, + {fieldName: 'ID'} + ]); } public disableSummary() { + this.grid1.disableSummaries('Name'); } ``` ## Custom Tree Grid Summaries If these functions do not fulfill your requirements you can provide a custom summary for the specific columns. In order to achieve this you have to override one of the base classes [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) class provides the default implementation only for the [`count`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#count) method. [`IgxNumberSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) extends [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) and provides implementation for the [`min`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#max), [`sum`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#sum) and [`average`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html#average). [`IgxDateSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) extends [`IgxSummaryOperand`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) and additionally gives you [`earliest`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html#earliest) and [`latest`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html#latest). ```typescript import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/core'; // import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from '@infragistics/igniteui-angular'; for licensed package class MySummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + + operate(data?: any[]): IgxSummaryResult[] { + const result = super.operate(data); + result.push({ + key: 'test', + label: 'Test', + summaryResult: data.filter(rec => rec > 10 && rec < 30).length + }); + return result; + } } ``` As seen in the examples, the base classes expose the [`operate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#operate) method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. The method returns a list of [`IgxSummaryResult`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxsummaryresult.html). ```typescript interface IgxSummaryResult { + key: string; + label: string; + summaryResult: any; } ``` and take optional parameters for calculating the summaries. See [Custom summaries, which access all data](#custom-summaries-which-access-all-data) section below. > [!NOTE] > In order to calculate the summary row height properly, the Tree Grid needs the [`operate`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html#operate) method to always return an array of [`IgxSummaryResult`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/igxsummaryresult.html) with the proper length even when the data is empty. And now let's add our custom summary to the column `UnitPrice`. We will achieve that by setting the [`summaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaries) property to the class we create below. ```html + + + + ``` ```typescript ... export class GridComponent implements OnInit { + mySummary = MySummary; + .... } ``` ### Custom summaries, which access all data + + Now you can access all Tree Grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method. As you can see in the code snippet below the operate method has the following three parameters: - columnData - gives you an array that contains the values only for the current column - allGridData - gives you the whole grid data source - fieldName - current column field ```typescript class MySummary extends IgxNumberSummaryOperand { + constructor() { + super(); + } + operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] { + const result = super.operate(allData.map(r => r[fieldName])); + result.push({ key: 'test', label: 'Total Undelivered', summaryResult: allData.filter((rec) => rec.Discontinued).length }); + return result; + } } ``` ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxColumnComponent, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class PTOSummary { + + public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'totalOnPTO', label: 'Employees On PTO', + summaryResult: IgxSummaryOperand.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName])) + }); + result.push({ + key: 'devs', label: 'Developers', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName])) + }); + result.push({ + key: 'tl', label: 'Team Leads', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName])) + }); + result.push({ + key: 'managers', label: 'Managers/Directors', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => + (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']) + .map(r => r[fieldName])) + }); + result.push({ + key: 'ceo', label: 'CEO/President', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => + (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']) + .map(r => r[fieldName])) + }); + return result; + } +} + +@Component({ + selector: 'app-treegrid-all-data-summary-sample', + styleUrls: ['./treegrid-allData-summary.component.scss'], + templateUrl: './treegrid-allData-summary.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent] +}) +export class TreeGridAllDataSummaryComponent implements OnInit { + + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public grid1: IgxTreeGridComponent; + public data; + public d; + public ptoSummary = PTOSummary; + + constructor() { } + + public ngOnInit() { + this.data = generateEmployeeFlatData(); + this.data.forEach(rec => rec.Title = rec.Title.includes('Localiza') ? 'Software Developer' : rec.Title); + } +} +``` +```html +
+
+ + + + + + + +
+
+``` +```scss +.grid__wrapper{ + --ig-size: var(--ig-size-small); + padding: 16px; +} +``` ### Summary Template `igxSummary` targets the column summary providing as a context the column summary results. ```html + + My custom summary template + {{ summaryResults[0].label }} - {{ summaryResults[0].summaryResult }} + ``` When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the size of the grid. Use the [summaryRowHeight](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#summaryRowHeight) input property to override the default value. As an argument it expects a number value, and setting a false value will trigger the default sizing behavior of the grid footer. > [!NOTE] > Column summary template could be defined through API by setting the column [summaryTemplate](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaryTemplate) property to the required TemplateRef. ```typescript +import { Component, HostBinding, OnInit } from '@angular/core'; +import { IgxColumnComponent, IgxSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { generateEmployeeFlatData } from '../data/employees-flat'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +class PTOSummary { + + public operate(data?: any[], allData = [], fieldName = ''): IgxSummaryResult[] { + const result = []; + result.push({ + key: 'totalOnPTO', label: 'Employees On PTO', + summaryResult: IgxSummaryOperand.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName])) + }); + result.push({ + key: 'devs', label: 'Developers', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName])) + }); + result.push({ + key: 'tl', label: 'Team Leads', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName])) + }); + result.push({ + key: 'managers', label: 'Managers/Directors', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => + (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']) + .map(r => r[fieldName])) + }); + result.push({ + key: 'ceo', label: 'CEO/President', + summaryResult: IgxSummaryOperand.count( + allData.filter((rec) => + (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']) + .map(r => r[fieldName])) + }); + return result; + } +} + +@Component({ + selector: 'app-treegrid-summary-template', + styleUrls: ['./treegrid-summary-template.component.scss'], + templateUrl: './treegrid-summary-template.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSummaryTemplateDirective] +}) +export class TreeGridSummaryTemplateComponent implements OnInit { + public data; + public d; + public ptoSummary = PTOSummary; + public summaryHeight = 150; + public size = 'medium'; + public sizes; + public hasSummary = true; + + constructor() { } + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + this.data.forEach(rec => rec.Title = rec.Title.includes('Localiza') ? 'Software Developer' : rec.Title); + this.sizes = [ + { label: 'small', selected: this.size === 'small', togglable: true }, + { label: 'medium', selected: this.size === 'medium', togglable: true }, + { label: 'large', selected: this.size === 'large', togglable: true } + ]; + } + + @HostBinding('style.--ig-size') + protected get sizeStyle() { + return `var(--ig-size-${this.size})`; + } + + public selectSize(event): void { + this.size = this.sizes[event.index].label; + } +} +``` +```html +
+
+ + + + + Toggle Summaries + +
+ + + + + +
+ {{ summaryResults[0].label }}{{ summaryResults[0].summaryResult }} + {{ summaryResults[1].label }}{{ summaryResults[1].summaryResult }} + {{ summaryResults[2].label }}{{ summaryResults[2].summaryResult }} + {{ summaryResults[3].label }}{{ summaryResults[3].summaryResult }} +
+ + + + + + + +
+``` +```scss +.sample__wrapper { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + height: 100%; + overflow-y: auto; +} + +igx-buttongroup { + max-width: 450px; + flex: 1; +} + +.summary-temp { + display: flex; + flex-direction: column; + margin: 0 1px; + font-size: 14px; + line-height: 24px; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + span { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + justify-content: space-between; + color: hsla(var(--ig-gray-900)); + + span { + user-select: all; + max-width: 300px; + padding-right: 8px; + } + + strong { + font-size: 12px; + text-transform: uppercase; + min-width: 70px; + justify-self: flex-start; + text-align: left; + color: var(--ig-secondary-600); + user-select: none; + } + } + + > * { + padding: 8px 0; + line-height: 18px; + border-bottom: 1px dashed hsla(var(--ig-gray-400)); + + &:last-child { + border-bottom: none; + } + } + +} + +::-webkit-scrollbar { + width: 5px !important; + height: 5px !important; +} + +.controls-wrapper { + display: flex; + align-items: center; + flex-direction: row; + gap: 16px; +} +``` ## Disable Summaries The [`disabledSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#disabledSummaries) property provides precise per-column control over the Ignite UI for Angular grid summary feature. This property enables users to customize the summaries displayed for each column in the grid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']`, by specifying their summary keys in an array. This property can also be modified **dynamically at runtime** through code, providing flexibility to adapt the grid's summaries to changing application states or user actions. The following examples illustrate how to use the `disabledSummaries` property to manage summaries for different columns and exclude specific default and custom summary types in the Ignite UI for Angular grid: ```html ``` For `Units`, custom summaries such as `totalDelivered` and `totalNotDelivered` are excluded using the `disabledSummaries` property. For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. At runtime, summaries can also be dynamically disabled using the `disabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. ```typescript +import { + Component, + ViewChild, + OnInit, + AfterViewInit, + ElementRef, + QueryList, + ViewChildren +} from "@angular/core"; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { ORDERS_DATA } from "../data/orders"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + + +class UnitsSummary { + public operate( + data?: any[], + allData: any[] = [], + fieldName: string = "" + ): IgxSummaryResult[] { + const result = []; + + const values = allData.map(rec => rec[fieldName]).filter(value => value !== undefined && value !== null); + const totalSum = values.reduce((sum, value) => sum + value, 0); + const sortedValues = values.slice().sort((a, b) => a - b); + const deliveredValues = allData + .filter(rec => rec["Delivered"]) + .map(rec => rec[fieldName]) + .filter(value => value !== undefined && value !== null); + + result.push({ + key: "count", + label: "Count", + summaryResult: allData.length + }); + + result.push({ + key: "min", + label: "Min", + summaryResult: values.length > 0 ? Math.min(...values) : "N/A" + }); + + result.push({ + key: "max", + label: "Max", + summaryResult: values.length > 0 ? Math.max(...values) : "N/A" + }); + + result.push({ + key: "sum", + label: "Sum", + summaryResult: totalSum + }); + + result.push({ + key: "average", + label: "Average", + summaryResult: values.length > 0 ? totalSum / values.length : "N/A" + }); + + result.push({ + key: "totalDelivered", + label: "Total Units Delivered", + summaryResult: deliveredValues.reduce((sum, value) => sum + value, 0) + }); + + result.push({ + key: "medianUnits", + label: "Median Units", + summaryResult: values.length > 0 + ? (() => { + const mid = Math.floor(sortedValues.length / 2); + return sortedValues.length % 2 !== 0 + ? sortedValues[mid] + : (sortedValues[mid - 1] + sortedValues[mid]) / 2; + })() + : "N/A" + }); + + result.push({ + key: "uniqueCount", + label: "Count of Unique Unit Values", + summaryResult: values.length > 0 ? new Set(values).size : "N/A" + }); + + result.push({ + key: "maxDifference", + label: "Max Difference Between Units", + summaryResult: values.length > 1 + ? values.reduce((maxDiff, value, idx, arr) => { + if (idx === 0) return maxDiff; + const diff = Math.abs(value - arr[idx - 1]); + return Math.max(maxDiff, diff); + }, 0) + : "N/A" + }); + + return result; + } +} + +class DeliveredSummary { + public operate(data: any[] = [], allData: any[] = [], fieldName: string = ""): IgxSummaryResult[] { + const result = []; + + result.push({ + key: "count", + label: "Count", + summaryResult: allData.length + }); + + result.push({ + key: "true", + label: "True", + summaryResult: allData.filter(item => item[fieldName] === true).length + }); + + result.push({ + key: "false", + label: "False", + summaryResult: allData.filter(item => item[fieldName] === false).length + }); + + return result; + } +} + +@Component({ + selector: "app-tree-grid-summary-sample", + styleUrls: ["./tree-grid-disable-summaries.component.scss"], + templateUrl: "./tree-grid-disable-summaries.component.html", + imports: [ + IgxTreeGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective, + IgxCheckboxComponent, + IgxToggleDirective +] +}) +export class TreeGridDisableSummariesComponent implements OnInit, AfterViewInit { + @ViewChild("treeGrid1", { read: IgxTreeGridComponent, static: true }) public treeGrid1: IgxTreeGridComponent; + @ViewChildren(IgxToggleDirective) public toggles: QueryList; + @ViewChildren('toggleButton') public buttons: QueryList; + + public data: any[]; + public togglesArray: any[]; + public buttonsArray: any[]; + + public columns = [ + { + label: 'Order ID', + field: 'ID', + summaries: [] + }, + { + label: 'Order Product', + field: 'Name', + summaries: [] + }, + { + label: 'Units', + field: 'Units', + summaries: [] + }, + { + label: 'Unit Price', + field: 'UnitPrice', + summaries: [] + }, + { + label: 'Price', + field: 'Price', + summaries: [] + }, + { + label: 'Delivered', + field: 'Delivered', + summaries: [] + }, + { + label: 'Order Date', + field: 'OrderDate', + summaries: [] + } + ]; + + public unitsSummary = UnitsSummary; + public deliveredSummary = DeliveredSummary; + + private _positionSettings = { + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Bottom, + horizontalDirection: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom + }; + + private _overlaySettings: OverlaySettings = { + closeOnOutsideClick: true, + modal: false, + closeOnEscape: true, + positionStrategy: new ConnectedPositioningStrategy(this._positionSettings) + }; + + constructor() {} + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public ngAfterViewInit(): void { + this.togglesArray = this.toggles.toArray(); + this.buttonsArray = this.buttons.toArray(); + + this.columns.forEach((column, index) => { + column.summaries = this.getSummaries(column.field) + }); + } + + public getCheckedSummariesCount(summaries: any[]): number { + return summaries.filter(summary => summary.checked).length; + } + + public toggle(index: number): void { + this._overlaySettings.target = this.buttonsArray[index].nativeElement; + this.togglesArray[index].toggle(this._overlaySettings); + } + + public toggleCheckbox(event: any, index: number, column: any): void { + column.summaries[index].checked = event.checked; + if (event.checked) { + this.treeGrid1.getColumnByName(column.field).disabledSummaries = [ + ...this.treeGrid1.getColumnByName(column.field).disabledSummaries, + column.summaries[index].summaryKey + ]; + } else { + this.treeGrid1.getColumnByName(column.field).disabledSummaries = this.treeGrid1.getColumnByName(column.field).disabledSummaries.filter( + (key: string) => key !== column.summaries[index].summaryKey + ); + } + } + + public uncheckAllColumns(column: any): void { + column.summaries.forEach(summary => (summary.checked = false)); + this.treeGrid1.getColumnByName(column.field).disabledSummaries = []; + } + + public checkAllColumns(column: any): void { + column.summaries.forEach(summary => (summary.checked = true)); + this.treeGrid1.getColumnByName(column.field).disabledSummaries = column.summaries.map(summary => summary.summaryKey); + } + + private getSummaries(columnName: string): any[] { + console.log(columnName) + return this.treeGrid1 + .getColumnByName(columnName) + .summaries.operate( + this.treeGrid1.data.map((record) => record.ProductID) + ) + .map((summary) => ({ + summaryKey: summary.key, + summaryLabel: summary.label, + checked: false + })); + } +} +``` +```html +
+
+
Disable Summaries for Column:
+ @for (column of columns; track column; let i = $index) { +
+ +
+
+
+

+ Disabled Summaries +

+
+
+ @for (summary of column.summaries; track summary; let i = $index) { + + {{ summary.summaryLabel }} + + } +
+
+ + +
+
+
+
+ } +
+ + + + + + + + + + + + + + + +
+``` +```scss +.grid-wrapper { + margin: 0 auto; + padding: 16px; + + .summaries { + margin-bottom: 1rem; + display: flex; + align-items: center; + flex-wrap: wrap; + + &-title { + margin: 0 0 1rem 0; + flex-basis: 100%; + } + + .summary-column-button { + margin-right: 1rem; + margin-bottom: 0.5rem; + } + } +} + +.summaries-dropdown { + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 8px; + + &-title { + color: #40B3FF; + margin: 0.5rem 1.1rem; + } + + &-items { + display: flex; + flex-direction: column; + + .summaries-dropdown-item { + display: flex; + align-items: center; + padding: 0 1rem; + } + } + + &-buttons { + display: flex; + justify-content: space-between; + padding: 0.2rem; + } +} +``` ## Formatting summaries By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#pipeArgs). When using custom operands, the `locale` and `pipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the [`summaryFormatter`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#summaryFormatter) property. ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' + && result !== null && result !== undefined) { + const pipe = new DatePipe('en-US'); + return pipe.transform(result,'MMM YYYY'); + } + return result; } ``` ```html ``` ```typescript +import { DatePipe } from '@angular/common'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxSummaryResult } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-summary-formatter', + styleUrls: ['./tree-grid-summary-formatter.component.scss'], + templateUrl: 'tree-grid-summary-formatter.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) + +export class TreeGridSummaryFormatterComponent implements OnInit { + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public treegrid1: IgxTreeGridComponent; + + public data: any[]; + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if (summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' + && result !== null && result !== undefined) { + const pipe = new DatePipe('en-US'); + return pipe.transform(result, 'MMM YYYY'); + } + return result; + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + +
+``` +```scss +.grid__wrapper { + margin: 16px; +} +``` ## Child Summaries The Tree Grid supports separate summaries for the root nodes and for each nested child node level. Which summaries are shown is configurable using the [`summaryCalculationMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#summaryCalculationMode) property. The child level summaries can be shown before or after the child nodes using the [`summaryPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#summaryPosition) property. Along with these two properties the IgxTreeGrid exposes and [`showSummaryOnCollapse`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#showSummaryOnCollapse) property which allows you to determine whether the summary row stays visible when the parent node that refers to is collapsed. The available values of the [`summaryCalculationMode`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#summaryCalculationMode) property are: - rootLevelOnly - Summaries are calculated only for the root level nodes. - childLevelsOnly - Summaries are calculated only for the child levels. - rootAndChildLevels - Summaries are calculated for both root and child levels. This is the default value. The available values of the [`summaryPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#summaryPosition) property are: - top - The summary row appears before the list of child rows. - bottom - The summary row appears after the list of child rows. This is the default value. The [`showSummaryOnCollapse`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#showSummaryOnCollapse) property is boolean. Its default value is set to **false**, which means that the summary row would be hidden when the parent row is collapsed. If the property is set to **true** the summary row stays visible when parent row is collapsed. > [!NOTE] > The [`summaryPosition`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#summaryPosition) property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the Tree Grid. ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { DefaultSortingStrategy, GridSummaryCalculationMode, ISortingExpression, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSummaryPosition, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryOperand } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +class AvgSummary { + + public operate(data?: any[]): IgxSummaryResult[] { + const result = []; + const avg = IgxNumberSummaryOperand.average(data); + result.push({ + key: 'avg', + label: 'Average', + summaryResult: data.length ? '$' + avg.toFixed(2) : '' + }); + return result; + } +} + +@Component({ + selector: 'app-tree-grid-summary2-sample', + styleUrls: ['./tree-grid-summary2-sample.component.scss'], + templateUrl: './tree-grid-summary2-sample.component.html', + imports: [IgxButtonGroupComponent, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective] +}) +export class TreeGridSummary2SampleComponent implements OnInit { + + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public grid1: IgxTreeGridComponent; + public data; + + public expr: ISortingExpression[]; + public avgSummary = AvgSummary; + public summaryPositions; + public summaryPosition: GridSummaryPosition = GridSummaryPosition.bottom; + public summaryCalcModes; + public summaryCalculationMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels; + + constructor() { + this.data = ORDERS_DATA; + this.expr = [ + { + dir: SortingDirection.Asc, + fieldName: 'ShipCountry', + ignoreCase: false, + strategy: DefaultSortingStrategy.instance() + } + ]; + + this.summaryPositions = [ + { + label: GridSummaryPosition.top, + selected: this.summaryPosition === GridSummaryPosition.top, + togglable: true + }, + { + label: GridSummaryPosition.bottom, + selected: this.summaryPosition === GridSummaryPosition.bottom, + togglable: true + } + ]; + + this.summaryCalcModes = [ + { + label: 'Root Level Only', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly, + togglable: true, + value: GridSummaryCalculationMode.rootLevelOnly + }, + { + label: 'Child Levels Only', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly, + togglable: true, + value: GridSummaryCalculationMode.childLevelsOnly + }, + { + label: 'Root And Child Levels', + selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels, + togglable: true, + value: GridSummaryCalculationMode.rootAndChildLevels + } + ]; + } + + public ngOnInit() { + this.grid1.sortingExpressions = [ + { dir: SortingDirection.Desc, fieldName: 'ID', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() } + ]; + } + + public selectSummaryPosition(event) { + this.summaryPosition = this.summaryPositions[event.index].label; + this.grid1.summaryPosition = this.summaryPosition; + } + + public selectSummaryCalcMode(event) { + this.summaryCalculationMode = this.summaryCalcModes[event.index].value; + this.grid1.summaryCalculationMode = this.summaryCalculationMode; + } + + public toggle(event) { + this.grid1.showSummaryOnCollapse = !this.grid1.showSummaryOnCollapse; + } + + public formatCurrency(value: number) { + return '$' + value.toFixed(2); + } +} +``` +```html +
+ +
+ +
+ +
+ +
+ Show summary row when group row is collapsed: +
+ + + + + + + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + + + + +``` +```scss +:host { + display: block; + padding: 8px; +} + +.summary-chooser { + margin-bottom: 16px; +} + +igx-buttongroup{ + display: block; + width: 600px; +} +```
## Exporting Summaries There is an [`exportSummaries`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxExcelExporterOptions.html#exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. The [`IgxExcelExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxExcelExporterService.html) will export the default summaries for all column types as their equivalent excel functions so they will continue working properly when the sheet is modified. Try it for yourself in the example below: ```typescript +import { Component, ViewChild, inject } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-summary-export', + styleUrls: ['./tree-grid-summary-export.component.scss'], + templateUrl: './tree-grid-summary-export.component.html', + imports: [IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] +}) +export class TreeGridSummaryExportComponent { + private excelExportService = inject(IgxExcelExporterService); + + + @ViewChild('tGrid', { read: IgxTreeGridComponent, static: true }) + public tGrid: IgxTreeGridComponent; + public data; + + constructor() { + this.data = ORDERS_DATA; + } + + public toggleSummary(column: ColumnType) { + column.hasSummary = !column.hasSummary; + } + + public exportButtonHandler() { + this.excelExportService.export(this.tGrid, new IgxExcelExporterOptions('ExportedFile')); + } +} +``` +```html +
+
+ + Press the button to export the Grid as a .xlsx file. +
+ + + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + ${{ val }} + + +
Unit Price
+ functions + + + + + ${{ val }} + + +
{{col.field}}
+ functions + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
{{ col.field }}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
Order Date
+ functions + + + +
+``` +```scss +:host{ + ::ng-deep { + .grid-controls { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + margin: 0 16px 24px; + + igx-switch { + margin-top: 24px; + } + + } + + .header { + height: 100%; + } + + .igx-grid__th .title{ + width: 100%; + cursor: auto; + } + + } +} + +.grid__wrapper { + margin: 0 16px; + padding-top: 16px; +} + +@media screen and (max-width: 677px){ + + [class*=header-icon]{ + padding-bottom: 17px; + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + [class*=text]{ + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } +} + + +@media screen and (min-width: 677px){ + + [class*=header-icon]{ + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + } + + [class*=text] { + float:left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 50%; + } +} + + +@media screen and (min-width: 992px){ + + [class*=header-icon] { + padding-top: 17px; + font-size: 1.4em; + width: 1.1em; + height: 1.1em; + float: right; + margin-right: 10px; + cursor: pointer; + } + + [class*=text] { + float:left; + white-space: nowrap; + width: 50%; + cursor: auto; + } +} + +.button-container { + margin: 25px auto; +} +``` The exported file includes a hidden column that holds the level of each `DataRecord` in the sheet. This level is used in the summaries to filter out the cells that need to be included in the summary function. In the table below, you can find the corresponding Excel formula for each of the default summaries. | Data Type | Function | Excel Function | |:--------|:--------:|:---------------| |`string`, `boolean` | count | ="Count: "&COUNTIF(start:end, recordLevel) | |`number`, `currency`, `percent` | count | ="Count: "&COUNTIF(start:end, recordLevel) | || min| ="Min: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)) | || max | ="Max: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)) | || average | ="Avg: "&AVERAGEIF(start:end, recordLevel, rangeStart:rangeEnd) | || sum | ="Sum: "&SUMIF(start:end, recordLevel, rangeStart:rangeEnd) | |`date` | count | ="Count: "&COUNTIF(start:end, recordLevel) | || earliest | ="Earliest: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) | || latest | ="Latest: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) | ### Known Limitations |Limitation|Description| |--- |--- | | Exporting custom summaries | Custom summaries will be exported as strings instead of Excel functions. | | Exporting templated summaries | Templated summaries are not supported and will be exported as the default ones. | ## Keyboard Navigation The summary rows can be navigated with the following keyboard interactions: - UP - navigates one cell up - DOWN - navigates one cell down - LEFT - navigates one cell left - RIGHT - navigates one cell right - CTRL + LEFT or HOME - navigates to the leftmost cell - CTRL + RIGHT or END - navigates to the rightmost cell ## Styling To get started with styling the sorting behavior, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` Following the simplest approach, we create a new theme that extends the [`grid-summary-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-summary-theme) and accepts the `$background-color`, `$focus-background-color`, `$label-color`, `$result-color`, `$pinned-border-width`, `$pinned-border-style` and `$pinned-border-color` parameters. ```scss $custom-theme: grid-summary-theme( + $background-color: #e0f3ff, + $focus-background-color: rgba(#94d1f7, .3), + $label-color: #e41c77, + $result-color: black, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #e41c77 ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component custom theme: ```scss :host { + @include tokens($custom-theme); } ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: + + ```scss :host { + ::ng-deep { + @include tokens($custom-theme); + } } ``` ### Demo ```typescript +import { Component, ViewChild } from '@angular/core'; +import { ColumnType } from 'igniteui-angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { DatePipe } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-summary-styling', + styleUrls: ['./tree-grid-summary-styling.component.scss'], + templateUrl: './tree-grid-summary-styling.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, DatePipe] +}) +export class TreeGridSummaryStylingComponent { + + @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true }) + public grid1: IgxTreeGridComponent; + public data; + + constructor() { + this.data = ORDERS_DATA; + } + + public toggleSummary(column: ColumnType) { + column.hasSummary = !column.hasSummary; + } +} +``` +```html +
+ + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
{{col.field}}
+ functions + + + + + {{ val }} + + +
Units
+ functions + + + + + ${{ val }} + + +
Unit Price
+ functions + + + + + ${{ val }} + + +
Price
+ functions + + + + + @if (val) { + Delivered + } + @if (!val) { + Undelivered + } + + +
{{ col.field }}
+ functions + + + + + {{ val | date: 'MMM d, yyyy' }} + + +
Order Date
+ functions + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$custom-theme: grid-summary-theme( + $background-color: #e0f3ff, + $label-color: #e41c77, + $result-color: black, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #e41c77 +); + +:host { + @include tokens($custom-theme); +} +``` ## API References - [IgxTreeGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxTreeGridSummaries Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-summary-theme) - [IgxSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsummaryoperand.html) - [IgxNumberSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxnumbersummaryoperand.html) - [IgxDateSummaryOperand](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatesummaryoperand.html) - [IgxColumnGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumngroupcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Column Data Types](column-types.md#default-template) - [Virtualization and Performance](virtualization.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md new file mode 100644 index 000000000..0ae8a69cd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-toolbar.md @@ -0,0 +1,649 @@ +--- +_tocName: Toolbar +_premium: true +--- +--- title: Angular Grid Toolbar - Ignite UI for Angular _description: Use Angular Tree Grid Toolbar for essential UI operations. Hosts different UI controls for the Grid’s features - column hiding, pinning, excel exporting, etc. _keywords: angular toolbar, igniteui for angular, infragistics _license: commercial _canonicalLink: grid/toolbar --- # Angular Tree Grid Toolbar The Tree Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) which is essentially a container for **UI** operations. The Angular toolbar is located at the top of the Angular component, i.e the Tree Grid and it matches its horizontal size. The toolbar container can host predefined UI controls for the following Tree Grid's features: - Column Hiding - Column Pinning - Exporting to Excel, CSV and PDF - Advanced Filtering or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers. ## Angular Toolbar Grid Example ```typescript +import { Component } from '@angular/core'; +import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-toolbar-sample-4', + styleUrls: ['./tree-grid-toolbar-sample-4.component.scss'], + templateUrl: './tree-grid-toolbar-sample-4.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class TreeGridToolbarSample4Component { + + public data: any[]; + + constructor() { + this.data = EMPLOYEE_FLAT_AVATARS_DATA(); + } +} +``` +```html +
+ + + Tree Grid Toolbar + + + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; + position: relative; + justify-content: space-between; +} + +.name { + margin-left: 30px; +} +``` The predefined `actions` and `title` UI components are added inside the `` and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: ```html + + Tree Grid Toolbar + + + + + + + ``` > Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html). This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty: ```html + + ``` For a comprehensive look over each of the default UI components, continue reading the **Features** section below. ## Features The toolbar is great at separating logic/interactions which affects the grid as a whole. As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid. These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them. ```typescript +import { Component } from '@angular/core'; +import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; +import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-toolbar-sample-1', + styleUrls: ['./tree-grid-toolbar-sample-1.component.scss'], + templateUrl: './tree-grid-toolbar-sample-1.component.html', + imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class TreeGridToolbarSample1Component { + + data: any[]; + toolbarTitle = 'Tree grid toolbar'; + enableHiding = true; + enablePinning = true; + enableExport = true; + enableFiltering = true; + + constructor() { + this.data = EMPLOYEE_FLAT_AVATARS_DATA(); + } +} +``` +```html +
+
+ + + + +
+ Advanced Filtering + Column hiding + Column pinning + Exporting +
+
+ + + {{ toolbarTitle }} + + @if (enableFiltering) { + + } + @if (enableHiding) { + + } + @if (enablePinning) { + + } + @if (enableExport) { + + } + + + + + +
+ + {{ cell.value }} +
+ + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; +} + +.control_panel { + width: 700px; + margin-bottom: 10px; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; + position: relative; + justify-content: space-between; +} + +.name { + margin-left: 30px; +} +``` ### Title Setting a title for the toolbar in your grid is achieved by using the [IgxGridToolbarTitleComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html). Users can provide anything from simple text to more involved templates. ```html + Grid toolbar title ``` ### Actions The toolbar exposes a [specific container](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components. ```html + + + + ... + ``` Each action now exposes a way to change the overlay settings of the actions dialog by using the [`overlaySettings`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html#overlaySettings) input, example: ```html + + ``` ```ts public data: any[]; public positionStrategyScaleCenter = new GlobalPositionStrategy({ + openAnimation: scaleInCenter, + closeAnimation: scaleOutCenter }); public overlaySettingsScaleCenter = { + positionStrategy: this.positionStrategyScaleCenter, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: true, + closeOnEscape: true }; public positionStrategyAuto = new AutoPositionStrategy(); public overlaySettingsAuto = { + positionStrategy: this.positionStrategyAuto, + scrollStrategy: new AbsoluteScrollStrategy(), + modal: false, + closeOnEscape: false }; constructor() { + this.data = athletesData; } ``` The default overlaySettings are using _ConnectedPositionStrategy_ with _Absolute_ scroll strategy, _modal_ set to false, with enabled _close on escape_ and _close on outside click_ interactions. ### Column pinning [Toolbar Pinning component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) provides the default UI for interacting with column pinning in the grid. The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. ```html + + + + ``` ### Column hiding [Toolbar Hiding component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. ```html + + + + ``` ### Advanced filtering [Toolbar Advanced Filtering component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html) provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button. ```html + + Custom text for the toggle button + ``` ### Data exporting As with the rest of the toolbar actions, exporting is provided through a [Toolbar Exporter component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) out of the box. The exporting component is using the respective service for the target data format ([Excel](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxexcelexporterservice.html), [CSV](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcsvexporterservice.html), [PDF](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html)). That means if the respective service is not provided through the dependency injection chain, the component won't be able to export anything. If you need a refresher on the DI in Angular, check the [official guide](https://angular.io/guide/dependency-injection). Here is a sample snippet showing how to enable all export services for your application. ```typescript // app.module.ts import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core'; // import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package @NgModule({ + ... + providers: [IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService ] }) export class AppModule { ... } ``` > [!Note] > In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the [API documentation](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) for the toolbar exporter component. Here is a snippet showing some of the options which can be customized through the Angular template: ```html + + + [exportCSV]="csvExportEnabled" + + [exportExcel]="excelExportEnabled" + + [exportPDF]="pdfExportEnabled" + + filename="exported_data" + > + Custom text for the exporter button + Custom text for the excel export entry + Custom text for the CSV export entry + Custom text for the PDF export entry + + ``` In addition to changing the exported filename, the user can further configure the exporter options by waiting for the [toolbarExporting](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#toolbarExporting) event and customizing the options entry in the event properties. > [!NOTE] > By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. > You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. > You can also cancel the export process by setting the cancel field of the event args to true. The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options: ```html ``` ```typescript configureExport(args: IGridToolbarExportEventArgs) { + const options: IgxExporterOptionsBase = args.options; + + options.fileName = `Report_${new Date().toDateString()}`; + + if (options instanceof IgxExcelExporterOptions) { + options.columnWidth = 10; + } else { + options.fileType = CsvFileTypes.TSV; + options.valueDelimiter = '\t'; + } + + args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => { + @@if (igxName === 'IgxGrid') { + // Don't export image fields + columnArgs.cancel = columnArgs.header === 'Athlete' || + columnArgs.header === 'Country'; + } + @@if (igxName === 'IgxTreeGrid') { + // Don't export image field + columnArgs.cancel = columnArgs.header === 'Name'; + } + }); } ``` The following sample demonstrates how to customize the exported files: ```typescript +import { Component } from '@angular/core'; +import { + CsvFileTypes, + IColumnExportingEventArgs, + IgxCsvExporterOptions, + IgxExcelExporterOptions, + IgxExporterOptionsBase, + IGridToolbarExportEventArgs, + IgxCellTemplateDirective, + IgxColumnComponent, + IgxGridToolbarActionsComponent, + IgxGridToolbarComponent, + IgxGridToolbarExporterComponent, + IgxGridToolbarTitleComponent +} from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-toolbar-sample-2', + styleUrls: ['./tree-grid-toolbar-sample-2.component.scss'], + templateUrl: './tree-grid-toolbar-sample-2.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class TreeGridToolbarSample2Component { + + public data: any[]; + + constructor() { + this.data = EMPLOYEE_FLAT_AVATARS_DATA(); + } + + public configureExport(args: IGridToolbarExportEventArgs) { + // You can customize the exporting from this event + const options: IgxExporterOptionsBase = args.options; + + options.fileName = `Report_${new Date().toDateString()}`; + + if (options instanceof IgxExcelExporterOptions) { + const excelOptions = options as IgxExcelExporterOptions; + excelOptions.columnWidth = 10; + } else { + const csvOptions = options as IgxCsvExporterOptions; + csvOptions.fileType = CsvFileTypes.TSV; + csvOptions.valueDelimiter = '\t'; + } + + args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => { + // Don't export image field + columnArgs.cancel = columnArgs.header === 'Name'; + }); + } +} +``` +```html +
+ + + Grid toolbar + + + + + + + +
+ + {{ cell.value }} +
+ + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; + position: relative; + justify-content: space-between; +} + +.name { + margin-left: 30px; +} +```
## Exporting Indicator When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress. Moreover, users can set the toolbar [showProgress](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample below has significant amount of data. While the data is being exported, the progress bar is shown. Additionally, it has another button that simulates a long running operation in the grid: ```typescript +import { Component } from '@angular/core'; +import { ORDERS_DATA } from '../data/orders'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-export-visualization', + templateUrl: './tree-grid-export-visualization.component.html', + styleUrls: ['./tree-grid-export-visualization.component.scss'], + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, CurrencyPipe] +}) +export class TreeGridExportVisualizationComponent { + public localData = []; + private data = ORDERS_DATA; + + constructor() { + const offsetStep = Math.max(...this.data.map(item => item.ID)) + 1; + + for (let i = 0; i < 9000; i += 3) { + const offset = (i / 3) * offsetStep; + + for (let c = 0; c < this.data.length; c++) { + const item = this.data[c]; + this.localData.push({ + ...item, + ID: item.ID + offset, + ParentID: item.ParentID === -1 ? -1 : item.ParentID + offset, + OrderDate: new Date(item.OrderDate) + }); + } + } + } + + longRunning(toolbar: any) { + toolbar.showProgress = true; + setTimeout(() => toolbar.showProgress = false, 5000); + } +} +``` +```html +
+ + + + + + + + + + + + + + + + + + + {{+val | currency}} + + + + + {{+val | currency}} + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; +} +```
## Custom Content > [!NOTE] > This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle > the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified > template files after the migration completes. If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. Here is a sample snippet: ```html + + ... + + {{ titleBinding }} + + + + + + ... + + ``` The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers: ```typescript +import { Component } from '@angular/core'; +import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-toolbar-sample-3', + styleUrls: ['./tree-grid-toolbar-sample-3.component.scss'], + templateUrl: './tree-grid-toolbar-sample-3.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class TreeGridToolbarSample3Component { + + public data: any[]; + + constructor() { + this.data = EMPLOYEE_FLAT_AVATARS_DATA(); + } +} +``` +```html +
+ + + Tree Grid Toolbar + + + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.cell__inner { + display: flex; + align-items: center; + height: 100%; + position: relative; + justify-content: space-between; +} + +.name { + margin-left: 30px; +} +```
## Styling To get started with styling the toolbar, we need to import the index file, where all the theme functions and component mixins live: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` First, let's create a new palette. ```scss $my-dark-palette: palette( + $primary: #2466ff, + $secondary: #ffcd0f, + $surface: #2a2b2f, + $grays: #fff, ); $my-dark-color: color($my-dark-palette, 'surface'); ``` Now, create a new theme that extends the [`grid-toolbar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-toolbar-theme) and modify the `$background-color` and the `$title-text-color` parameters. ```scss $dark-grid-toolbar-theme: grid-toolbar-theme( + $background-color: $my-dark-color, + $title-text-color: color($my-dark-palette, 'secondary'), + $dropdown-background: $my-dark-color, ); ``` To theme the column actions menus of the toolbar, we have to change the theme of the [`column-actions-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-igx-column-actionsr-theme) component. ```scss $dark-column-actions-theme: column-actions-theme( + $title-color: color($my-dark-palette, 'secondary'), + $background-color: color($my-dark-palette, 'surface') ); ``` Since the column actions are using other components - `igx-button` and `igx-checkbox` we need to change their themes to match our new toolbar theme. ```scss $dark-button-theme: outlined-button-theme( + $background: color($my-dark-palette, 'secondary'), + $hover-background: color($my-dark-palette, 'grays', 100), + $hover-foreground: color($my-dark-palette, 'secondary') ); $dark-checkbox-theme: checkbox-theme( + $tick-color: $my-dark-color, ); ``` The last step is to **include** the newly created themes. ```scss :host { + @include tokens($dark-grid-toolbar-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); } ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the grid toolbar component: ```scss @include tokens($dark-grid-toolbar-theme); :host { + ::ng-deep { + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); + } } ``` ### Demo ```typescript +import { Component } from '@angular/core'; +import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-toolbar-style', + styleUrls: ['./tree-grid-toolbar-style.component.scss'], + templateUrl: './tree-grid-toolbar-style.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent] +}) +export class TreeGridToolbarStyleComponent { + + public data: any[]; + + constructor() { + this.data = EMPLOYEE_FLAT_AVATARS_DATA(); + } +} +``` +```html +
+ + + Tree Grid Toolbar + + + + + + + + + +
+ + {{ cell.value }} +
+ + + + + + + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$dark-button-theme: outlined-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #404040, + $hover-foreground: #ffcd0f +); + +$dark-grid-toolbar-theme: grid-toolbar-theme( + $background-color: #292826, + $title-text-color: #ffcd0f +); + + +:host { + @include tokens($dark-grid-toolbar-theme); + + .igx-grid-toolbar__actions { + @include tokens($dark-button-theme); + + .igx-button--outlined { + margin-left: 0.5rem; + border: none; + } + } +} +```
## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. - [`IgxGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaractionscomponent.html) - [`IgxGridToolbarAdvancedFilteringComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbaradvancedfilteringcomponent.html) - [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html) - [`IgxGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) - [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) - [`IgxGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) - [`IgxGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbartitlecomponent.html) [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) events: - [`toolbarExporting`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#toolbarExporting) Styles: - [`IgxTreeGridComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md new file mode 100644 index 000000000..b540aa95b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-tree-grid.md @@ -0,0 +1,532 @@ +--- +title: Angular Tree Grid | Fastest Angular Tree Table | Infragistics +_description: The Ignite UI for Angular Tree Grid is used to display and manipulate hierarchical or flat data with ease. Quickly bind your data with very little coding. Try it for FREE +_keywords: angular tree grid, angular tree table, angular tree grid component, angular tree table component, angular ui components, igniteui for angular, infragistics +_license: commercial +_tocName: Tree Grid +--- + +# Angular Tree Grid Component Overview + +The Ignite UI for Angular Tree Grid is used to display and manipulate hierarchical or flat self-referencing data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, grouping, templating, column moving, column pinning, export to Excel, CSV and PDF, and more. + +## Angular Tree Grid Example + +In this example, you can see how users can display hierarchical data. We have included filtering and sorting options, pinning and hiding, row selection, export to excel, csv and pdf, and cell templating that uses our [Sparkline](../charts/types/sparkline-chart.md) component. In addition, you can see an example of custom pagination with [Angular Pagination](paging.md). + +```typescript +import { Component, OnInit, inject } from '@angular/core'; +import { GridSelectionMode, IgxCSVTextDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { EMPLOYEE_DATA } from './data'; +import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; +import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; + +@Component({ + selector: 'app-tree-grid-childdatakey-sample', + styleUrls: ['./tree-grid-childdatakey-sample.component.scss'], + templateUrl: './tree-grid-childdatakey-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule] +}) +export class TreeGridChilddatakeySampleComponent implements OnInit { + private excelExporter = inject(IgxExcelExporterService); + private csvExporter = inject(IgxCsvExporterService); + + public localData: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + constructor() { + const skipColumnExport = (eventArgs: IColumnExportingEventArgs) => { + eventArgs.cancel = eventArgs.header === 'Performance'; + }; + + this.excelExporter.columnExporting.subscribe(skipColumnExport); + this.csvExporter.columnExporting.subscribe(skipColumnExport); + } + + public ngOnInit() { + const employees = EMPLOYEE_DATA; + for (const employee of employees) { + this.getPerformance(employee); + } + this.localData = employees; + } + + public getPerformance(employee: any): any { + employee['Performance'] = this.getPerformanceData(12); + const hasEmployees = employee.Employees === undefined; + if (hasEmployees) { + return employee; + } else { + for (const employer of employee.Employees) { + this.getPerformance(employer); + } + } + } + + public getPerformanceData(weeks?: number): any[] { + if (weeks === undefined) { + weeks = 20; + } + const performance: any[] = []; + for (let w = 0; w < weeks; w++) { + const value = this.getRandomNumber(0, 100); + // eslint-disable-next-line @typescript-eslint/naming-convention + performance.push({Points: value, Week: w}); + } + return performance; + } + + public getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } +} +``` +```html +
+ + + + Employees + + + + + Export to Excel + Export to CSV + + + + + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} +``` + +
+ +## Getting Started with Ignite UI for Angular Tree Grid + +To get started with the Ignite UI for Angular Tree Grid component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: + +```cmd +ng add igniteui-angular +``` + +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic. + +The next step is to import the `IgxTreeGridModule` in your **app.module.ts** file. + +```typescript +// app.module.ts + +import { IgxTreeGridModule } from 'igniteui-angular/grids/tree-grid'; +// import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + imports: [ + ... + IgxTreeGridModule, + ... + ] +}) +export class AppModule {} +``` + +Alternatively, as of `16.0.0` you can import the `IgxTreeGridComponent` as a standalone dependency, or use the [`IGX_TREE_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/public_api.ts) token to import the component and all of its supporting components and directives. + +```typescript +// home.component.ts + +import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid'; +// import { IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package + +@Component({ + selector: 'app-home', + template: '', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_TREE_GRID_DIRECTIVES] + /* or imports: [IgxTreeGridComponent] */ +}) +export class HomeComponent { + public data: Employee []; +} +``` + +Now that you have the Ignite UI for Angular Tree Grid module or directives imported, you can start using the `igx-tree-grid` component. + +## Using the Angular Tree Grid + +>[!NOTE] +>**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**. + +The [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) shares a lot of features with the [`IgxGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html), but it also adds the ability to display its data hierarchically. +In order to achieve this, the [`IgxTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) provides us with a couple of ways to define the relations among our data objects - by using a [child collection](#child-collection) for every data object or by using [primary and foreign keys](#primary-and-foreign-keys) for every data object. + +### Tree Cells + +Regardless of which option is used for building the tree grid's hierarchy (child collection or primary and foreign keys), the tree grid's rows are constructed of two types of cells: + +- [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - Ordinary cell that contains a value. +- [`IgxGridCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) - Tree cell that contains a value, an expand/collapse indicator and an indentation div element, which is based on the level of the cell's row. The level of a row component can be accessed through the [`level`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/itreegridrecord.html#level) property of its inner [`treeRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html#treeRow). + +> [!NOTE] +> Each row can have only one tree cell, but it can have multiple (or none) ordinary cells. + +### Initial Expansion Depth + +Initially the tree grid will expand all node levels and show them. This behavior can be configured using the [`expansionDepth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#expansionDepth) property. By default its value is **Infinity** which means all node levels will be expanded. You may control the initial expansion depth by setting this property to a numeric value. For example **0** will show only root level nodes, **1** will show root level nodes and their child nodes and so on. + +### Child Collection + +When we are using the **child collection** option, every data object contains a child collection, that is populated with items of the same type as the parent data object. This way every record in our tree grid will have a direct reference to any of its children. In this case the [`data`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#data) property of our tree grid that contains the original data source will be a hierarchically defined collection. + +For this sample, let's use the following collection structure: + +```typescript +// Sample Employee Data + +export const EMPLOYEE_DATA = [ + { + Name: "Johnathan Winchester", + ID: 1, + HireDate: new Date(2008, 3, 20), + Age: 55, + Employees: [ + { + Name: "Michael Burke", + ID: 3, + HireDate: new Date(2011, 6, 3), + Age: 43, + Employees: [] + }, + { + Name: "Thomas Anderson" + ID: 2, + HireDate: new Date(2009, 6, 19), + Age: 29, + Employees: [] + }, + ... + ] + }, + ... +] +``` + +Now let's start by importing our data collection and binding it to the [`data`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#data) input of our tree grid. + +```html + + + + +``` + +In order for the IgxTreeGridComponent to build the hierarchy, we will have to set its [`childDataKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#childdatakey) property to the name of the child collection that is used in each of our data objects. In our case that will be the **Employees** collection. +In addition, we will disable the automatic column generation and define them manually by matching them to the actual properties of our data objects. (The **Employees** collection will be automatically used for the hierarchy, so there is no need to include it in the columns' definitions.) + +```html + + + + + + + +``` + +We will now enable the row selection and paging features of the tree grid by using the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) and the [`paging`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#paging) properties. +We will also enable the summaries feature on the first column and the filtering, sorting, editing, moving and resizing features for each of our columns. + +```html + + + + + + + + + +``` + +Finally, we will enable the toolbar of our tree grid, along with the column hiding, column pinning and exporting features by using the [`IgxGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarcomponent.html), [`IgxGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html), [`IgxGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarpinningcomponent.html) and [`IgxGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarexportercomponent.html) respectively. + +```html + + + + + Employees + + + + + + + + + + + + +``` + +You can see the result of the code from above at the beginning of this article in the [Angular Tree Grid Example](#angular-tree-grid-example) section. + +### Primary and Foreign keys + +When we are using the **primary and foreign keys** option, every data object contains a primary key and a foreign key. The primary key is the unique identifier of the current data object and the foreign key is the unique identifier of its parent. In this case the [`data`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#data) property of our tree grid that contains the original data source will be a flat collection. + +The following is an example of a component which contains a flat collection defined with primary and foreign keys relation: + +```typescript +// treeGridSample.component.ts + +@Component({...}) +export class MyComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public ngOnInit() { + // Primary and Foreign keys sample data + this.data = [ + { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 }, + { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 }, + { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 }, + { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 }, + { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 }, + { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 }, + { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 }, + { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 }, + { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 }, + { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 } + ]; + } +} +``` + +In the sample data above, all records have an ID, a ParentID and some additional properties like Name, JobTitle and Age. As mentioned previously, the ID of the records must be unique. The ParentID contains the ID of the parent node. If a row has a ParentID that does not match any row in the tree grid, then that means this row is a root row. + +The parent-child relation is configured using the tree grid's [`primaryKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#primaryKey) and [`foreignKey`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#foreignKey) properties. + +Here is the template of the component which demonstrates how to configure the tree grid to display the data defined in the above flat collection: + +```html + + + + + + + +``` + +In addition we will enable the row selection feature of the tree grid by using the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#rowSelection) property and also the filtering, sorting, editing, moving and resizing features for each of our columns. + +```html + + + + + + + +``` + +And here is the final result: + +```typescript +import { Component, OnInit } from '@angular/core'; +import { GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { Data } from './data'; +import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; +import { IgxSparklineCoreModule } from 'igniteui-angular-charts'; + +@Component({ + selector: 'app-tree-grid-primaryforeignkey-sample', + styleUrls: ['./tree-grid-primaryforeignkey-sample.component.scss'], + templateUrl: './tree-grid-primaryforeignkey-sample.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule] +}) +export class TreeGridPrimaryforeignkeySampleComponent implements OnInit { + public data: any[]; + public selectionMode: GridSelectionMode = 'multiple'; + constructor() { } + + public ngOnInit() { + const employees = Data.employeePrimaryForeignKeyTreeData(); + for (const employee of employees) { + this.getPerformance(employee); + } + this.data = employees; + } + + public getPerformance(employee: any): any { + employee['Performance'] = this.getPerformanceData(12); + const hasEmployees = employee.Employees === undefined; + if (hasEmployees) { + return employee; + } else { + for (const employer of employee.Employees) { + this.getPerformance(employer); + } + } + } + + public getPerformanceData(weeks?: number): any[] { + if (weeks === undefined) { + weeks = 20; + } + const performance: any[] = []; + for (let w = 0; w < weeks; w++) { + const value = this.getRandomNumber(0, 100); + // eslint-disable-next-line @typescript-eslint/naming-convention + performance.push({Points: value, Week: w}); + } + return performance; + } + + public getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } +} +``` +```html +
+ + + + + + + + + + + +
+``` +```scss +.grid__wrapper { + margin: 15px; +} +``` + +>[!NOTE] +>The sample will not be affected by the selected global theme from `Change Theme`. + +
+ +## Performance (Experimental) + +The `igxTreeGrid`'s design allows it to take advantage of the Event Coalescing feature that has Angular introduced. This feature allows for improved performance with roughly around **`20%`** in terms of interactions and responsiveness. This feature can be enabled on application level by simply setting the `ngZoneEventCoalescing` and `ngZoneRunCoalescing` properties to `true` in the `bootstrapModule` method: + +```typescript +platformBrowserDynamic() + .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }) + .catch(err => console.error(err)); +``` + +>[!NOTE] +> This is still in experimental feature for the `igxTreeGrid`. This means that there might be some unexpected behaviors in the Tree Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. +>[!NOTE] +> Enabling it can affects other parts of an Angular application that the `igxTreeGrid` is not related to. + +## Known Limitations + +|Limitation|Description| +|--- |--- | +|Templating Tree Cells|When templating a tree cell, content that spans outside the boundaries of the cell will not be shown unless positioned in an overlay.| +|Group By|Group By feature is not supported, because it is inherent to the tree grid.| + +> [!NOTE] +> The tree grid has a depth limit of 25 levels. Supporting more levels requires adding custom CSS classes in the application. You may see an example of such CSS class below: + +```scss +.igx-grid__tree-cell--padding-level-26 { + padding-left: 39rem; +} +``` + +> [!NOTE] +> `igxTreeGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxTreeGrid`. For more details see [igxForOf Known Issues](../for-of.md#known-limitations) section. + +
+ +## API References + +
+ +- [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) +- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) +- [IgxTreeGridRow](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridrow.html) +- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) +- [IgxBaseTransactionService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) + +## Theming Dependencies + +- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) +- [IgxChip Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) +- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) +- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) +- [IgxOverlay Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) +- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) +- [IgxCalendar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-calendar-theme) +- [IgxSnackBar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-snackbar-theme) +- [IgxBadge Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) + + +## Additional Resources + +
+ +- [Grid Sizing](sizing.md) +- [Data Grid](../grid/grid.md) +- [Row Editing](row-editing.md) +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md new file mode 100644 index 000000000..85c8aa272 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-validation.md @@ -0,0 +1,576 @@ +--- +_tocName: Validation +_premium: true +--- +--- title: Editing and Validation in Angular Tree Grid - Infragistics _description: Validate the input of the users in grid and notify them if it's valid or not while using Angular Tree Grid. See demos & examples! _keywords: angular validation, ignite ui for angular, infragistics _license: commercial --- # Angular Tree Grid Editing and Validation The Tree Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. It extends the [Angular Form validation](https://angular.io/guide/form-validation) functionality to allow easier integration with a well known functionality. When the state of the editor changes, visual indicators are applied to the edited cell. ## Configuration ### Configure via template-driven configuration We extend some of the Angular Forms validator directives to directly work with the `IgxColumn`. The same validators are available as attributes to be set declaratively in `igx-column`. The following validators are supported out-of-the-box: - required - min - max - email - minlength - maxlength - pattern To validate that a column input would be set and the value is going to be formatted as an email, you can use the related directives: ```html ``` The following sample demonstrates how to use the prebuilt `required`, `email` and `min` validator directives in a Tree Grid. ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { FormsModule } from '@angular/forms'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + +@Component({ + selector: 'app-tree-grid-validator-service-component', + styleUrls: ['tree-grid-validator-service.component.scss'], + templateUrl: 'tree-grid-validator-service.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective] +}) +export class TreeGridValidatorServiceComponent implements OnInit { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + + public data: IEmployee[]; + + public rowEdit: boolean = false; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + } +} +``` +```html +
+ Row edit +
+
+ + + + + + + + +
+``` +```scss +.top-row, .grid__wrapper { + margin: 15px; +} +```
### Configure via reactive forms We expose the `FormGroup` that will be used for validation when editing starts on a row/cell via a `formGroupCreated` event. You can modify it by adding your own validators for the related fields: ```html ``` @@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') { ```ts + public formCreateHandler(args: IGridFormGroupCreatedEventArgs) { + const formGroup = args.formGroup; + const orderDateRecord = formGroup.get('OrderDate'); + const requiredDateRecord = formGroup.get('RequiredDate'); + const shippedDateRecord = formGroup.get('ShippedDate'); + + orderDateRecord.addValidators(this.futureDateValidator()); + requiredDateRecord.addValidators(this.pastDateValidator()); + shippedDateRecord.addValidators(this.pastDateValidator()); + } ``` } ```ts + public formCreateHandler(args: IGridFormGroupCreatedEventArgs) { + const formGroup = args.formGroup; + const hireDateRecord = formGroup.get('HireDate'); + hireDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]); + } ``` You can decide to write your own validator function, or use one of the [built-in Angular validator functions](https://angular.io/guide/form-validation#built-in-validator-functions). ## Validation service API The grid exposes a validation service via the [`validation`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#validation) property. That service has the following public APIs: - [`valid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#valid) - returns if the grid validation state is valid. - [`getInvalid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#getInvalid) - returns records with invalid states. - [`clear`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#clear) - clears state for record by id or clears all state if no id is provided. - [`markAsTouched`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridValidationService.html#markAsTouched) - marks the related record/field as touched. Invalid states will persist until the validation errors in them are fixed according to the validation rule or they are cleared. ## Validation triggers Validation will be triggered in the following scenarios: - While editing via the cell editor based on the grid's [`validationTrigger`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#validationTrigger). Either on `change` while typing in the editor, or on `blur` when the editor loses focus or closes. - When updating cells/rows via the API - [`updateRow`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#updateRow), [`updateCell`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#updateCell) etc.. - When using batch editing and the [`undo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTransactionService.html#undo)/[`redo`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxTransactionService.html#redo) API of the transaction service. > Note: Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the `markAsTouched` API of the validation service. ## Angular Tree Grid Validation Customization Options ### Set a custom validator You can define your own validation directive to use on a `` in the template. ```ts @Directive({ + selector: '[phoneFormat]', + providers: [{ provide: NG_VALIDATORS, useExisting: PhoneFormatDirective, multi: true }] }) export class PhoneFormatDirective extends Validators { + @Input('phoneFormat') + public phoneFormatString = ''; + + public validate(control: AbstractControl): ValidationErrors | null { + return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control) + : null; + } } ``` Once it is defined and added in your app module you can set it declaratively to a given column in the grid: ```html ``` ### Change default error template You can define your own custom error template that will be displayed in the error tooltip when the cell enters invalid state. This is useful in scenarios where you want to add your own custom error message or otherwise change the look or content of the message. ```html + + + +
+ Please enter correct phone format +
+ ``` ### Prevent exiting edit mode on invalid state In some cases you may want to disallow submitting an invalid value in the data. In that scenarios you can use the [`cellEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#cellEdit) or [`rowEdit`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#rowEdit) events and cancel the event in case the new value is invalid. Both events' arguments have a [`valid`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/IGridEditEventArgs.html#valid) property and can be canceled accordingly. How it is used can be seen in the [Cross-field Validation example](#cross-field-example) ```html ``` ```ts public cellEdit(evt) { + if (!evt.valid) { + evt.cancel = true; + } } ``` ### Example The below example demonstrates the above-mentioned customization options. ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, Directive, Input, OnInit, ViewChild } from '@angular/core'; +import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IGridFormGroupCreatedEventArgs, IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { NgTemplateOutlet } from '@angular/common'; + +export function phoneFormatValidator(phoneReg: RegExp): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const match = phoneReg.test(control.value); + return match ? null : { phoneFormat: { value: control.value } } ; + } +} + +@Directive({ + selector: '[phoneFormat]', + providers: [{ provide: NG_VALIDATORS, useExisting: TGridPhoneFormatDirective, multi: true }] +}) +export class TGridPhoneFormatDirective extends Validators { + @Input('phoneFormat') + public phoneFormatString = ''; + + public validate(control: AbstractControl): ValidationErrors | null { + return this.phoneFormatString ? phoneFormatValidator(new RegExp(this.phoneFormatString, 'i'))(control) + : null; + } +} + +@Component({ + selector: 'app-tree-grid-validator-service-extended-component', + styleUrls: ['tree-grid-validator-service-extended.component.scss'], + templateUrl: 'tree-grid-validator-service-extended.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective, IgxColumnMaxValidatorDirective, TGridPhoneFormatDirective, IgxCellValidationErrorDirective, NgTemplateOutlet, IgxButtonDirective] +}) +export class TreeGridValidatorServiceExtendedComponent implements OnInit { + @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent; + + public data: IEmployee[]; + + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + } + + public formCreateHandler(formGroupArgs: IGridFormGroupCreatedEventArgs) { + const hireDateRecord = formGroupArgs.formGroup.get('HireDate'); + hireDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]); + } + + public commit() { + const invalidTransactions = this.treeGrid.validation.getInvalid(); + if (invalidTransactions.length > 0 && !confirm('You\'re committing invalid transactions. Are you sure?')) { + return; + } + + this.treeGrid.transactions.commit(this.data); + this.treeGrid.validation.clear(); + } + + public undo() { + /* exit edit mode and commit changes */ + this.treeGrid.endEdit(true); + this.treeGrid.transactions.undo(); + } + + public redo() { + /* exit edit mode and commit changes */ + this.treeGrid.endEdit(true); + this.treeGrid.transactions.redo(); + } + + public futureDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + if(date > new Date()){ + return { futureDate: { value: control.value } }; + } + return null; + } + } + + public pastDateValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const date = control.value; + let pastDate = new Date('Sept 1 2004'); + if(pastDate){ + return pastDate < date ? null : { pastDate: { value: control.value } } + } else return null; + } + } +} +``` +```html +
+ + + + + + + + + + + @if (cell.validation.errors?.['phoneFormat']) { +
+ Please enter correct phone format +
+ } + + + + + + + + @if (cell.validation.errors?.['futureDate']) { +
+ The date cannot be in the future! +
+ } + @if (cell.validation.errors?.['pastDate']) { +
+ The date cannot be before 1st Sept 2004 +
+ } + + + + + +
+ + + +
+
+``` +```scss +.top-row, .grid__wrapper { + margin: 15px; +} + +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: left; + padding: 10px 0; +} +```
## Cross-field validation In some scenarios validation of one field may depend on the value of another field in the record. In that case a custom validator can be used to compare the values in the record via their shared `FormGroup`. The below sample demonstrates a cross-field validation between different field of the same record. It checks that a specified City for a person is in the Country currently set and vice versa. Also check if the age for a person was 18 already when it was hired. The next lines of code show the cross-field validator function, which contains comparisons described above and sets the related errors. ```ts private rowValidator(): ValidatorFn { + return (formGroup: FormGroup): ValidationErrors | null => { + let returnObject = {}; + + const age = formGroup.get('Age'); + const hireDate = formGroup.get('HireDate'); + if((new Date().getFullYear() - new Date(hireDate.value).getFullYear()) + 18 >= age.value) { + returnObject['ageLessHireDate'] = true; + } + + const city = formGroup.get('City'); + const country = formGroup.get('Country'); + const validCities = this.countryData.get(country.value); + if (!validCities || !validCities[city.value]) { + returnObject['invalidAddress'] = true; + } + + return returnObject; + }; } ``` The cross-field validator can be added to the `formGroup` of the row from [`formGroupCreated`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxGridComponent.html#formGroupCreated) event, which returns the new `formGroup` for each row when entering edit mode: ```html + ``` ```typescript public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) { + evt.formGroup.addValidators(this.rowValidator()); } ``` The different errors are displayed in a templated cell that combines all errors in a single tooltip. Depending on the row valid state different icon is displayed: ```html + +
+ +
+
+ +
+
+
+ {{message}} +
+
+ ``` The error messages are gathered in the `stateMessage` function, which gathers the errors for each cell, because each column could have templated form validations and then checks the errors for the row itself, which come from the custom `rowValidator`. ```typescript public stateMessage(cell: CellType) { + const messages = []; + const row = cell.row; + const cellValidationErrors = row.cells.filter(x => !!x.validation.errors); + cellValidationErrors.forEach(cell => { + if (cell.validation.errors) { + if (cell.validation.errors.required) { + messages.push(`The \`${cell.column.header}\` column is required.`); + } + // Other cell errors... + } + }); + + if (row.validation.errors?.ageLessHireDate) { + messages.push(`\`Age\` cannot be less than 18 when the person was hired.`); + } + if (row.validation.errors?.invalidAddress) { + messages.push(`Selected \`City\` does not match the \`Country\`.`); + } + + if (messages.length === 0 && this.isRowValid(cell)) { + messages.push('OK'); + } + + return messages; } ``` ### Cross-field example The below sample demonstrates the cross-field validation in action. ```typescript +/* eslint-disable @typescript-eslint/naming-convention */ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { FormGroup, ValidationErrors, ValidatorFn, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ColumnPinningPosition } from 'igniteui-angular/core'; +import { CellType, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IPinningConfig, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxColumnMaxValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnRequiredValidatorDirective } from 'igniteui-angular/grids/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxButtonDirective, IgxFocusDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; + + +@Component({ + selector: 'app-tree-grid-validator-service-cross-field-component', + styleUrls: ['tree-grid-validator-service-cross-field.component.scss'], + templateUrl: 'tree-grid-validator-service-cross-field.component.html', + imports: [IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxCellEditorTemplateDirective, IgxSelectComponent, ReactiveFormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxTooltipTargetDirective, IgxTooltipDirective, IgxButtonDirective] +}) +export class TreeGridValidatorServiceCrossFieldComponent implements OnInit { + @ViewChild('treeGrid', { static: true }) + public treeGrid: IgxTreeGridComponent; + + public rowEdit: boolean = false; + public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + + public data: any[]; + public countryData: Map; + public countries = []; + public cities = []; + + public ngOnInit(): void { + this.data = generateEmployeeDetailedFlatData(); + this.countryData = new Map(this.data.map(i => [i.Country, {}])); + this.data.forEach(rec => { + const country = rec.Country; + const city = rec.City; + this.countryData.get(country)[city] = city; + }); + this.countries = [...new Set(this.data.map(x => x.Country))]; + this.cities = [...new Set(this.data.map(x => x.City))]; + } + + public editHandler(event: IGridEditEventArgs) { + if (!event.valid) { + event.cancel = true; + } + } + + public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) { + evt.formGroup.addValidators(this.rowValidator()); + } + + private rowValidator(): ValidatorFn { + return (formGroup: FormGroup): ValidationErrors | null => { + let returnObject = {}; + + const age = formGroup.get('Age'); + const hireDate = formGroup.get('HireDate'); + if((new Date().getFullYear() - new Date(hireDate.value).getFullYear()) + 18 >= age.value) { + returnObject['ageLessHireDate'] = true; + } + + const city = formGroup.get('City'); + const country = formGroup.get('Country'); + const validCities = this.countryData.get(country.value); + if (!validCities || !validCities[city.value]) { + returnObject['invalidAddress'] = true; + } + + return returnObject; + }; + } + + public isRowValid(cell: CellType) { + return !cell.row.validation.errors && !cell.row.cells.some(c => !!c.validation.errors); + } + + public stateMessage(cell: CellType) { + const messages = []; + + const cellValidationErrors = cell.row.cells.filter(x => !!x.validation.errors); + cellValidationErrors.forEach(cell => { + const cellErrors = cell.validation.errors; + if (cellErrors?.required) { + messages.push(`The \`${cell.column.header}\` column is required.`); + } + if (cellErrors?.min) { + messages.push(`A value of at least ${cellErrors.min.min} should be entered for \`${cell.column.header}\` column.`); + } + if (cellErrors?.max) { + messages.push(`A value of at maximum ${cellErrors.max.max} should be entered for \`${cell.column.header}\` column.`); + } + }); + + const rowErrors = cell.row.validation.errors; + if (rowErrors?.ageLessHireDate) { + messages.push(`\`Age\` cannot be less than 18 when the person was hired.`); + } + if (rowErrors?.invalidAddress) { + messages.push(`Selected \`City\` does not match the \`Country\`.`); + } + + if (messages.length === 0 && this.isRowValid(cell)) { + messages.push('OK'); + } + + return messages; + } + + + public commit() { + const invalidTransactions = this.treeGrid.validation.getInvalid(); + if (invalidTransactions.length > 0 && !confirm('You\'re committing invalid transactions. Are you sure?')) { + return; + } + + this.treeGrid.transactions.commit(this.data); + this.treeGrid.validation.clear(); + } +} +``` +```html +
+ Row edit +
+
+ + + + + + + + @for (city of cities; track city) { + + {{ city }} + + } + + + + + + + @for (country of countries; track country) { + + {{ country }} + + } + + + + + + + + + @if (isRowValid(cell)) { +
+ +
+ } + @if (!isRowValid(cell)) { +
+ +
+ } +
+ @for (message of stateMessage(cell); track message) { +
+ {{message}} +
+ } +
+ + + +
+ +
+
+``` +```scss +.top-row, .grid__wrapper { + padding: 16px; + padding-bottom: 0; +} + +.buttons-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 10px 0; +} +```
## Styling Using the [Ignite UI for Angular Theme Library](../themes/index.md), we can alter the default validation styles while editing. In the example below, we will make use of the exposed template for validation message, which pops out in a tooltip and overriding the error color to modify the default looks of the validation. We will also style the background of the invalid rows to make them more distinct. ### Import theme The easiest way to style and access css variables is to define styles in our `app`'s global style file (typically `styles.scss`). The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the Ignite UI for Angular Sass framework: ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` ### Include the styles In order to change the error color you can use the css variable `--ig-error-500`: ```scss --ig-error-500: 34, 80%, 63%; ``` ### Custom Templates Changing the default error template allows setting custom classes and styles: ```html +
+ + +
``` ### Invalid row and cell styles Rows and cells provide API for the developers to know if a row or cell is invalid and what kind of errors are active. ```ts public rowStyles = { + background: (row: RowType) => row.cells.find(c => c.validation.errors !== null && c.validation.errors !== undefined) ? '#FF000033' : '#00000000' }; public cellStyles = { + 'invalid-cell': (rowData, columnKey) => { + const pKey = this.treeGrid.primaryKey; + const cell = this.treeGrid.getCellByKey(rowData[pKey], columnKey); + return cell && cell.validation.status === 'INVALID'; + } } ``` ```html + ``` ### Demo ```typescript +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; +import { IgxCellValidationErrorDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, RowType } from 'igniteui-angular/grids/core'; +import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat'; +import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive'; +import { NgTemplateOutlet } from '@angular/common'; + +@Component({ + selector: 'app-tree-grid-validation-style', + styleUrls: ['tree-grid-validation-style.component.scss'], + templateUrl: 'tree-grid-validation-style.component.html', + imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnRequiredValidatorDirective, IgxCellValidationErrorDirective, NgTemplateOutlet] +}) +export class TreeGridValidationStyleComponent implements OnInit { + + @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true }) public treeGrid: IgxTreeGridComponent; + public data: IEmployee[]; + public columns: any[]; + public selectionMode = 'multiple'; + public rowStyles = { + background: (row: RowType) => row.cells.find(c => c.validation.errors !== null && c.validation.errors !== undefined) ? '#FF000033' : '#00000000' + }; + public cellStyles = { + 'invalid-cell': (rowData, columnKey) => { + const pKey = this.treeGrid.primaryKey; + const cell = this.treeGrid.getCellByKey(rowData[pKey], columnKey); + return cell && cell.validation.status === 'INVALID'; + } + } + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + // tslint:disable:max-line-length + { field: 'Name', label: 'Full Name', dataType: 'string', required: true }, + { field: 'Age', label: 'Age', dataType: 'number' }, + { field: 'Title', label: 'Title', dataType: 'string', required: true }, + { field: 'HireDate', label: 'Hire Date', dataType: 'date', required: true } + ]; + } +} +``` +```html +
+ + @for (c of columns; track c) { + + +
+ + +
+ + + } + +
+``` +```scss +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +igx-tree-grid{ + --ig-error-500: 34deg, 80%, 63%; +} +```
## API References - [IgxBaseTransactionService](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbasetransactionservice.html) - [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) ## Known Issues and Limitations |Limitation|Description| | --- | --- | | When `validationTrigger` is blur, `editValue` and validation will trigger only after editor is blurred. | Reason is that this utilizes the formControl's [`updateOn`](https://angular.io/api/forms/AbstractControl#updateOn) property. This determines the event on which the formControl will update and trigger related validators. | ## Additional Resources - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Tree Grid Overview](tree-grid.md) - [Tree Grid Editing](editing.md) - [Tree Grid Row Editing](row-editing.md) - [Tree Grid Row Adding](row-adding.md) - [Tree Grid Transactions](batch-editing.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-virtualization.md new file mode 100644 index 000000000..09858d0ac --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/treegrid-virtualization.md @@ -0,0 +1,5 @@ +--- +_tocName: Virtualization and performance +_premium: true +--- +--- title: Angular Grid Virtualization and Performance - Ignite UI for Angular _description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed & performance of the grid when handling large data sets. Try for free! _keywords: angular data grid, grid performance, data table virtualization, ignite ui for angular _license: commercial _canonicalLink: grid/virtualization --- # Angular Tree Grid Virtualization and Performance In Ignite UI for Angular, the [IgxTreeGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) control now utilizes the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive and virtualizes its content both vertically and horizontally. ## Enabling Virtualization By utilizing the [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) directive the IgxTreeGrid now optimizes DOM rendering and memory consumption by rendering only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. [IgxTreeGrid](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#height) defaults to `100%` which will enable virtualization if the content displayed cannot fit inside the available space and scrollbars are required either vertically or horizontally. However, it is also possible to explicitly set the Tree Grid's [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#height) to `null` which means that the related dimension will be determined by the total size of the items inside. No scrollbar will then be shown and all items will be rendered along the respective dimension (columns if [`width`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#height) is `null`). The size of the data chunks is determined by: - The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#rowheight) option and is 50(px) by default. - The individual column widths in pixels for the horizontal (column) virtualization. They can be determined by either setting explicit width for each column component or setting the Tree Grid's [`columnWidth`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the Tree Grid's container. The grid will try to fit all columns inside the available space as long as the width it attempts to assign is not under 136(px). In such cases, columns with unassigned width will receive the minimum width of 136(px) and a horizontal scrollbar will be shown. The grid will be horizontally virtualized. Explicitly setting column widths in percentages (%) will, in most cases, create a grid that is not virtualized horizontally as it will not have a horizontal scrollbar. ## Virtualization Limitations - On Mac OS horizontal scrollbar is not visible when "Show scrollbars only when scrolling" system option is set to true (which is the default value). This is because the Tree Grid’s row container has an overflow set to hidden. Change the option to "Always" and the scrollbar will appear. ## FAQ ### Why having dimensions in the Tree Grid is necessary for virtualization to work? Without information about the sizes of the container and the items before rendering them setting the width or height of a scrollbar or determining which of the items should be in the view when you scroll to a random location in the Tree Grid is erroneous. Any assumptions on what the actual dimensions might be could lead to unnatural behavior of the scrollbar and ultimately suboptimal experience for the end-user. This is why setting the related dimensions is enforced in order for virtualization to take effect.
## API References - [IgxTreeGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxtreegridcomponent.html) - [IgxTreeGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) - [IgxColumnComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html) - [IgxForOfDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxforofdirective.html) - [IForOfState](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iforofstate.html) ## Additional Resources
- [Tree Grid overview](tree-grid.md) - [Paging](paging.md) - [Filtering](filtering.md) - [Sorting](sorting.md) - [Summaries](summaries.md) - [Column Moving](column-moving.md) - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md)
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-area-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-area-chart.md new file mode 100644 index 000000000..eec40cf1b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-area-chart.md @@ -0,0 +1,2012 @@ +--- +title: Angular Area Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Area Chart +_keywords: Angular Charts, Area Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XamDataChart", "CategoryChartType"] +namespace: Infragistics.Controls.Charts +_tocName: Area Chart +_premium: true +--- + +# Angular Area Chart + +The Ignite UI for Angular Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). This chart emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Therefore, they are often chronological, showing a change of quantity e.g. accumulation of a commodity over time. + +## Angular Area Chart Example + +You can create Angular Category Area Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data to `ItemsSource` property and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to **Area** enum, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Area Chart Recommendations + +### Area Chart Use Cases + +There are several common use cases for choosing an Area Chart: + +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. +- Need to compare the trends of your data over time. +- Want to show the difference between 2 or more data series. +- Want to show cumulative part-to-whole comparisons of distinct categories. +- Need to show data trends for one or more categories for comparative analysis. +- Need to visualize details time-series data. + +### Area Chart Best Practices + +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use transparent colors to ensure that data that is plotted behind another series is not blocked. + +### When Not to Use Area Charts + +- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. +- Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate. + +### Area Chart Data Structure + +- The data source must be an array or a list of data items (for single series). +- The data source must be an array of arrays or a list of lists (for multiple series). +- The data source should contain two or more data items in order to render a line between them. +- All data items must contain at least one data column (string or date time). +- All data items must contain at least one numeric data column. + +## Angular Area Chart with Single Series + +Angular Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Area`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Area) value, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Area Chart with Multiple Series + +Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline Chart](spline-chart.md), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to `ItemsSource` property of the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Area Chart Styling + +Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Advanced Types of Area Charts + +The following sections explain more advanced types of Angular Area Charts that can be created using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. + +## Angular Step Area Chart + +The Angular Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`StepArea`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepArea) value, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The following sections explain more advanced types of Angular Area Charts that can be created using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. + +## Angular Range Area Chart + +The Angular Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxRangeAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("rangeAreaSeries1", { static: true } ) + private rangeAreaSeries1: IgxRangeAreaSeriesComponent + @ViewChild("rangeAreaSeries2", { static: true } ) + private rangeAreaSeries2: IgxRangeAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _temperatureRangeData: TemperatureRangeData = null; + public get temperatureRangeData(): TemperatureRangeData { + if (this._temperatureRangeData == null) + { + this._temperatureRangeData = new TemperatureRangeData(); + } + return this._temperatureRangeData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Monthly Temperature Range in LA and NYC +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Area Chart + +The Angular Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedAreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedAreaSeries", { static: true } ) + private stackedAreaSeries: IgxStackedAreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Area Chart + +The Angular Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100AreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100AreaSeries", { static: true } ) + private stacked100AreaSeries: IgxStacked100AreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Spline Area Chart + +The Angular Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxStackedSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedSplineAreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedSplineAreaSeries", { static: true } ) + private stackedSplineAreaSeries: IgxStackedSplineAreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Spline Area Chart + +The Angular Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxStacked100SplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100SplineAreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100SplineAreaSeries", { static: true } ) + private stacked100SplineAreaSeries: IgxStacked100SplineAreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Area Chart + +The Angular Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxRadialAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialAreaSeries1", { static: true } ) + private radialAreaSeries1: IgxRadialAreaSeriesComponent + @ViewChild("radialAreaSeries2", { static: true } ) + private radialAreaSeries2: IgxRadialAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Area Chart + +The Angular Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarAreaSeries1", { static: true } ) + private polarAreaSeries1: IgxPolarAreaSeriesComponent + @ViewChild("polarAreaSeries2", { static: true } ) + private polarAreaSeries2: IgxPolarAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Spline Area Chart + +The Angular Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxPolarSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarSplineAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarSplineAreaSeries1", { static: true } ) + private polarSplineAreaSeries1: IgxPolarSplineAreaSeriesComponent + @ViewChild("polarSplineAreaSeries2", { static: true } ) + private polarSplineAreaSeries2: IgxPolarSplineAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Bar Chart](bar-chart.md) +- [Column Chart](column-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in above sections: + +| Chart Type | Control Name | API Members | +| -------------------------|-----------------|-----------------------| +| Area | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Area`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Area) | +| Step Area | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`StepArea`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepArea) | +| Range Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html) | +| Radial Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) | +| Polar Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) | +| Polar Spline Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) | +| Stacked Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) | +| Stacked Spline Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | +| Stacked 100% Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | +| Stacked 100% Spline Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-bar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-bar-chart.md new file mode 100644 index 000000000..9b62f9c16 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-bar-chart.md @@ -0,0 +1,1078 @@ +--- +title: Angular Bar Chart and Graph | Ignite UI for Angular +_description: Angular Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories. Try for FREE. +_keywords: Angular Charts, Bar Chart, Bar Graph, Horizontal Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Bar Chart +_premium: true +--- + +# Angular Bar Chart + +The Ignite UI for Angular Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.md) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.md) has vertical orientation (up and down) + +## Angular Bar Chart Example + +You can create Angular Bar Chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data sources to multiple [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartVerticalCategoryModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("categoryHighlightLayer", { static: true } ) + private categoryHighlightLayer: IgxCategoryHighlightLayerComponent + @ViewChild("barSeries1", { static: true } ) + private barSeries1: IgxBarSeriesComponent + @ViewChild("barSeries2", { static: true } ) + private barSeries2: IgxBarSeriesComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Highest Grossing Movie Franchises +
+
+ + +
+
+ + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Bar Chart Recommendations + +### Are Angular Bar Charts right for your project? + +Angular Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include: + +- Grouped Bar Chart +- Stacked Bar Chart +- Polar Bar Chart +- Stacked 100 Bar Chart + +### Bar Chart Use Cases + +There are several common use cases for choosing a Bar Chart: + +- You need to show trends over time or a numeric value change in a category of data. +- You need to compare data values of 1 or more data series. +- You want to show a part-to-whole comparison. +- You want to show top or bottom percentage of categories. +- Analyzing multiple data points grouped in sub-categories (Stacked Bar). + +These use cases are commonly used for the following scenarios: + +- Sales Management. +- Inventory Management. +- Stock Charts. +- Any String Value Comparing a Numeric Value or Time-Series Value. + +### Bar Chart Best Practices + +- Start you numeric Axis at 0. +- Use a single color for the bars. +- Be sure the space separating each bar is 1/2 the width of the bar itself. +- Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order. +- Right-align category values on the Y-Axis (left side labels of chart) for readability. + +### When Not to Use Bar Chart + +- You have too much data so the Y-Axis can't fit in the space or is not legible. +- You need a detailed Time-Series analysis - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data. + +### Bar Chart Data Structure + +- The data source must be an array or a list of data items. +- The data source must contain at least one data item. +- The list must contain at least one data column (string or date time). +- The list must contain at least one numeric data column. + +
+ +## Angular Bar Chart with Single Series + +Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryCoreModule, + IgxDataChartCategoryModule, + IgxDataChartAnnotationModule, + IgxDataChartInteractivityModule, + IgxDataChartVerticalCategoryModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches'; +import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("categoryHighlightLayer", { static: true } ) + private categoryHighlightLayer: IgxCategoryHighlightLayerComponent + @ViewChild("barSeries1", { static: true } ) + private barSeries1: IgxBarSeriesComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + private _onlineShoppingSearches: OnlineShoppingSearches = null; + public get onlineShoppingSearches(): OnlineShoppingSearches { + if (this._onlineShoppingSearches == null) + { + this._onlineShoppingSearches = new OnlineShoppingSearches(); + } + return this._onlineShoppingSearches; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Where Online Shoppers Start Their Search +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Bar Chart with Multiple Series + +The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to multiple [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartVerticalCategoryModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("categoryHighlightLayer", { static: true } ) + private categoryHighlightLayer: IgxCategoryHighlightLayerComponent + @ViewChild("barSeries1", { static: true } ) + private barSeries1: IgxBarSeriesComponent + @ViewChild("barSeries2", { static: true } ) + private barSeries2: IgxBarSeriesComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Highest Grossing Movie Franchises +
+
+ + +
+
+ + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Bar Chart Styling + +The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.md) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) and adding a [`IgxCalloutLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxAnnotationLayerProxyModule, IgxCalloutLayerModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartVerticalCategoryModule, + IgxAnnotationLayerProxyModule, + IgxCalloutLayerModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches'; +import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxCalloutLayerComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("categoryHighlightLayer", { static: true } ) + private categoryHighlightLayer: IgxCategoryHighlightLayerComponent + @ViewChild("barSeries1", { static: true } ) + private barSeries1: IgxBarSeriesComponent + @ViewChild("calloutLayer1", { static: true } ) + private calloutLayer1: IgxCalloutLayerComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + private _onlineShoppingSearches: OnlineShoppingSearches = null; + public get onlineShoppingSearches(): OnlineShoppingSearches { + if (this._onlineShoppingSearches == null) + { + this._onlineShoppingSearches = new OnlineShoppingSearches(); + } + return this._onlineShoppingSearches; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Where Online Shoppers Start Their Search +
+
+ + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Bar Chart + +A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value. + +The Stacked Bar Chart differs from the Bar Chart in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule, IgxCalloutLayerModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule, + IgxCalloutLayerModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStackedBarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("stackedBarSeries", { static: true } ) + private stackedBarSeries: IgxStackedBarSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Energy Consumption +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Bar Chart + +The Angular Stacked 100% Bar Chart is identical to the Angular Stacked Bar Chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100 bar chart presents the data in terms of percent of the sum of all values in a data point. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStacked100BarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("stacked100BarSeries", { static: true } ) + private stacked100BarSeries: IgxStacked100BarSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Energy Consumption +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Line Chart](line-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- `ItemsSource` +- [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html) +- [`IgxCalloutLayerComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcalloutlayercomponent.html) +- [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) +- [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) +- [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-bubble-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-bubble-chart.md new file mode 100644 index 000000000..232547f21 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-bubble-chart.md @@ -0,0 +1,818 @@ +--- +title: Angular Bubble Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Bubble Chart +_keywords: Angular Charts, Bubble Chart, Infragistics +_license: commercial +mentionedTypes: ["Series", "BubbleSeries", "ScatterSeries", "MarkerType"] +namespace: Infragistics.Controls.Charts +_tocName: Bubble Chart +_premium: true +--- + +# Angular Bubble Chart + +The Ignite UI for Angular Bubble Chart is a type of [Scatter Chart](scatter-chart.md) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) but with the option to have various radius scale sizes. + +## Angular Bubble Chart Example + +You can create Ignite UI for Angular Bubble Chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control using the [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) and two numeric axes, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica'; +import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("bubbleSeries1", { static: true } ) + private bubbleSeries1: IgxBubbleSeriesComponent + private _sizeScale1: IgxSizeScaleComponent | null = null; + public get sizeScale1(): IgxSizeScaleComponent { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgxSizeScaleComponent(); + sizeScale1.isLogarithmic = false; + sizeScale1.minimumValue = 10; + sizeScale1.maximumValue = 80; + + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + @ViewChild("bubbleSeries2", { static: true } ) + private bubbleSeries2: IgxBubbleSeriesComponent + private _sizeScale2: IgxSizeScaleComponent | null = null; + public get sizeScale2(): IgxSizeScaleComponent { + if (this._sizeScale2 == null) + { + var sizeScale2 = new IgxSizeScaleComponent(); + sizeScale2.isLogarithmic = false; + sizeScale2.minimumValue = 10; + sizeScale2.maximumValue = 80; + + this._sizeScale2 = sizeScale2; + } + return this._sizeScale2; + } + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _countryStatsAfrica: CountryStatsAfrica = null; + public get countryStatsAfrica(): CountryStatsAfrica { + if (this._countryStatsAfrica == null) + { + this._countryStatsAfrica = new CountryStatsAfrica(); + } + return this._countryStatsAfrica; + } + + private _countryStatsEurope: CountryStatsEurope = null; + public get countryStatsEurope(): CountryStatsEurope { + if (this._countryStatsEurope == null) + { + this._countryStatsEurope = new CountryStatsEurope(); + } + return this._countryStatsEurope; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Total Population of Selected Countries +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Bubble Chart with Single Series + +You can bind your data to `ItemsSource` property of [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) and map data columns using its [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#xMemberPath), [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#yMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusMemberPath) properties, as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { WorldStatsItem, WorldStats } from './WorldStats'; +import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("bubbleSeries1", { static: true } ) + private bubbleSeries1: IgxBubbleSeriesComponent + private _sizeScale1: IgxSizeScaleComponent | null = null; + public get sizeScale1(): IgxSizeScaleComponent { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgxSizeScaleComponent(); + sizeScale1.isLogarithmic = false; + sizeScale1.minimumValue = 10; + sizeScale1.maximumValue = 80; + + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _worldStats: WorldStats = null; + public get worldStats(): WorldStats { + if (this._worldStats == null) + { + this._worldStats = new WorldStats(); + } + return this._worldStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Bubble Chart with Multiple Series + +In Angular Bubble Chart, binding multiple data sources works by setting each new data source to `ItemsSource` property of a additional [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica'; +import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("bubbleSeries1", { static: true } ) + private bubbleSeries1: IgxBubbleSeriesComponent + private _sizeScale1: IgxSizeScaleComponent | null = null; + public get sizeScale1(): IgxSizeScaleComponent { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgxSizeScaleComponent(); + sizeScale1.isLogarithmic = false; + sizeScale1.minimumValue = 10; + sizeScale1.maximumValue = 80; + + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + @ViewChild("bubbleSeries2", { static: true } ) + private bubbleSeries2: IgxBubbleSeriesComponent + private _sizeScale2: IgxSizeScaleComponent | null = null; + public get sizeScale2(): IgxSizeScaleComponent { + if (this._sizeScale2 == null) + { + var sizeScale2 = new IgxSizeScaleComponent(); + sizeScale2.isLogarithmic = false; + sizeScale2.minimumValue = 10; + sizeScale2.maximumValue = 80; + + this._sizeScale2 = sizeScale2; + } + return this._sizeScale2; + } + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _countryStatsAfrica: CountryStatsAfrica = null; + public get countryStatsAfrica(): CountryStatsAfrica { + if (this._countryStatsAfrica == null) + { + this._countryStatsAfrica = new CountryStatsAfrica(); + } + return this._countryStatsAfrica; + } + + private _countryStatsEurope: CountryStatsEurope = null; + public get countryStatsEurope(): CountryStatsEurope { + if (this._countryStatsEurope == null) + { + this._countryStatsEurope = new CountryStatsEurope(); + } + return this._countryStatsEurope; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Total Population of Selected Countries +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Bubble Chart Styling + +In Angular Bubble Chart, you can customize shape of bubble markers using [`markerType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerType) property, their size with [`radiusScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusScale) property, and their appearance using [`markerBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerBrush), [`markerOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerOutline), [`markerThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerThickness) properties. In addition, you can also color bubble markers based on a data column using [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillMemberPath) and [`fillScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillScale) properties. In this example, usage of above properties is demonstrated. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { WorldStatsItem, WorldStats } from './WorldStats'; +import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("bubbleSeries1", { static: true } ) + private bubbleSeries1: IgxBubbleSeriesComponent + private _sizeScale1: IgxSizeScaleComponent | null = null; + public get sizeScale1(): IgxSizeScaleComponent { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgxSizeScaleComponent(); + sizeScale1.isLogarithmic = false; + sizeScale1.minimumValue = 10; + sizeScale1.maximumValue = 80; + + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _worldStats: WorldStats = null; + public get worldStats(): WorldStats { + if (this._worldStats == null) + { + this._worldStats = new WorldStats(); + } + return this._worldStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +- [Scatter Chart](scatter-chart.md) +- [Shape Chart](shape-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html) +- [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) +- `ItemsSource` +- [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillMemberPath) +- [`fillScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#fillScale) +- [`markerType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerType) +- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerBrush) +- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerOutline) +- [`markerThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmarkerseriescomponent.html#markerThickness) +- [`radiusScale`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusScale) +- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html#radiusMemberPath) +- [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#xMemberPath) +- [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterbasecomponent.html#yMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-column-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-column-chart.md new file mode 100644 index 000000000..8f4b0b95e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-column-chart.md @@ -0,0 +1,1330 @@ +--- +title: Angular Column Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Column Chart +_keywords: Angular Charts, Column Chart, Column Graph, Vertical Bar Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XamDataChart", "ColumnSeries", "WaterfallSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "RangeColumnSeries", "RadialColumnSeries", "CategoryChartType", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Column Chart +_premium: true +--- + +# Angular Column Chart + +The Ignite UI for Angular Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. These columns extend from the bottom to top of the chart towards the values of data points. This chart emphasizes the amount of change over a period of time or compares multiple items. Column Chart is very similar to [Bar Chart](bar-chart.md) except that Column Chart renders in vertical orientation (up and down) while [Bar Chart](bar-chart.md) has horizontal orientation (left to right) or 90 degrees clockwise rotation. + +## Angular Column Chart Example + +You can create Angular Column Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) to **Column** enum, as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Highest Grossing Movie Franchises +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Column Charts Recommendations + +### Column Charts Use Cases + +There are several uses cases for Column Charts. When you: + +- Need to compare data values of related categories. +- Need to compare data over a time period. +- Need to display negative values as well as positive values in the same data set. +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. + +### Column Charts Best Practices + +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. + +### When Not to Use Column Charts + +- You have many (more than 10 or 12) series of data. Your goal is to ensure the chart is readable. + +### Column Charts Data Structure + +- The data model must contain at least one numeric property. +- The data model may contain an options string or date-time property for labels. +- The data source should contain at least one data item. + +## Angular Column Chart with Single Series + +Column Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the bottom to top of the chart towards the values of data points. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to **Column** value, as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _temperatureAverageData: TemperatureAverageData = null; + public get temperatureAverageData(): TemperatureAverageData { + if (this._temperatureAverageData == null) + { + this._temperatureAverageData = new TemperatureAverageData(); + } + return this._temperatureAverageData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Average Temperature Range in New York +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Column Chart with Multiple Series + +The Column Chart is able to render multiple columns per category for comparison purposes. You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to **Column** value, as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _highestGrossingMovies: HighestGrossingMovies = null; + public get highestGrossingMovies(): HighestGrossingMovies { + if (this._highestGrossingMovies == null) + { + this._highestGrossingMovies = new HighestGrossingMovies(); + } + return this._highestGrossingMovies; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Highest Grossing Movie Franchises +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Column Chart Styling + +The Angular Column Chart has many options for styling and modification of the visual appearance. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data, as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Percentage Change in Energy Generation +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Advanced Types of Column Charts + +The following sections explain more advanced types of Angular Column Charts that can be created using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. + +## Angular Waterfall Chart + +The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#angular-range-column-chart), but it requires only one numeric data column rather than two columns for each data point. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CompanyIncomeDataItem, CompanyIncomeData } from './CompanyIncomeData'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxWaterfallSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("waterfallSeries1", { static: true } ) + private waterfallSeries1: IgxWaterfallSeriesComponent + @ViewChild("waterfallSeries2", { static: true } ) + private waterfallSeries2: IgxWaterfallSeriesComponent + private _companyIncomeData: CompanyIncomeData = null; + public get companyIncomeData(): CompanyIncomeData { + if (this._companyIncomeData == null) + { + this._companyIncomeData = new CompanyIncomeData(); + } + return this._companyIncomeData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Facebook Consolidated Statements of Income +
+
+ + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Column Chart + +The Stacked Column Chart is similar to the [Category Column Chart](column-chart.md#angular-column-chart-example) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the [Stacked Bar Chart](stacked-chart.md#angular-stacked-bar-chart) but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis). + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedColumnSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedColumnSeries", { static: true } ) + private stackedColumnSeries: IgxStackedColumnSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Column Chart + +The Stacked 100% Column Chart is identical to the [Stacked Column Chart](stacked-chart.md#angular-stacked-column-chart) in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100 Column Chart presents the data in terms of percent of the sum of all values in a data point. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { OnlineTrafficByDeviceItem, OnlineTrafficByDevice } from './OnlineTrafficByDevice'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100ColumnSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100ColumnSeries", { static: true } ) + private stacked100ColumnSeries: IgxStacked100ColumnSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _onlineTrafficByDevice: OnlineTrafficByDevice = null; + public get onlineTrafficByDevice(): OnlineTrafficByDevice { + if (this._onlineTrafficByDevice == null) + { + this._onlineTrafficByDevice = new OnlineTrafficByDevice(); + } + return this._onlineTrafficByDevice; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Distribution of Online Traffic Worldwide, by Device +
+
+ + +
+
+ + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Range Column Chart + +The Angular Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional [Category Column Chart](column-chart.md#angular-column-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis. + +The Range Column Chart is identical to the [Range Area Chart](area-chart.md)(area-chart.md#angular-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxRangeColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("rangeColumnSeries1", { static: true } ) + private rangeColumnSeries1: IgxRangeColumnSeriesComponent + @ViewChild("rangeColumnSeries2", { static: true } ) + private rangeColumnSeries2: IgxRangeColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _temperatureRangeData: TemperatureRangeData = null; + public get temperatureRangeData(): TemperatureRangeData { + if (this._temperatureRangeData == null) + { + this._temperatureRangeData = new TemperatureRangeData(); + } + return this._temperatureRangeData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Monthly Temperature Range in LA and NYC +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Column Chart + +The Radial Column Chart belongs to a group of [Radial Chart](radial-chart.md), and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Category Column Chart](column-chart.md#angular-column-chart-example), but wraps data points around a circle rather than stretching them horizontally. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxRadialColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialColumnSeries1", { static: true } ) + private radialColumnSeries1: IgxRadialColumnSeriesComponent + @ViewChild("radialColumnSeries2", { static: true } ) + private radialColumnSeries2: IgxRadialColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Bar Chart](bar-chart.md) +- [Composite Chart](composite-chart.md) +- [Radial Chart](radial-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +| Chart Type | Control Name | API Members | +| --------------------|--------------------|------------------------| +| Column | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = **Column** | +| Radial Column | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html) | +| Range Column | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html) | +| Stacked Column | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html) | +| Stacked 100% Column | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) | +| Waterfall | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-composite-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-composite-chart.md new file mode 100644 index 000000000..1cf920b03 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-composite-chart.md @@ -0,0 +1,199 @@ +--- +title: Angular Composite Chart | Combo Chart| Data Visualization | Infragistics +_description: Infragistics' Angular Composite Chart +_keywords: Angular Charts, Composite Chart, Combo Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Composite Chart +_premium: true +--- + +# Angular Composite / Combo Chart + +The Ignite UI for Angular Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis. + +## Angular Composite / Combo Example + +The following example demonstrates how to create Composite Chart using [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) and [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxCalloutLayerModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxNumberAbbreviatorModule, IgxDataChartCategoryCoreModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxLegendModule, + IgxCalloutLayerModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxNumberAbbreviatorModule, +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit } from "@angular/core"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + constructor() { } + + public formatNumber(num: number): string { + var ret = num; + if (num >= 1000000) return (num / 1000000.0).toFixed(1) + "M"; + if (num >= 1000) return (num / 1000.0).toFixed(1) + "K"; + + return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + + ngOnInit(): void { + + this.data = [ + { Date: "Jan 1, 2019", Revenue: 16914, Expenses: 10183 }, + { Date: "Mar 1, 2019", Revenue: 15077, Expenses: 12813 }, + { Date: "Jun 1, 2019", Revenue: 16886, Expenses: 14476 }, + { Date: "Sep 1, 2019", Revenue: 17652, Expenses: 11705 }, + { Date: "Jan 1, 2020", Revenue: 21082, Expenses: 14044 }, + { Date: "Mar 1, 2020", Revenue: 17737, Expenses: 12803 }, + { Date: "Jun 1, 2020", Revenue: 18687, Expenses: 13677 }, + { Date: "Sep 1, 2020", Revenue: 21470, Expenses: 13717 }, + { Date: "Jan 1, 2021", Revenue: 28072, Expenses: 17133 } + ]; + + for (let i = 0; i < this.data.length; i++) { + const item = this.data[i]; + + item.Revenue = item.Revenue * 1000; + item.Expenses = item.Expenses * 1000; + + item.Income = item.Revenue - item.Expenses; + item.IncomePerRevenue = (item.Income / item.Revenue) * 100; + + // calculating x-offset for callouts + item.RevenueX = i; + item.ExpensesX = i + 0.5; + + // formatting values for callouts + item.FormattedRevenue = "$" + this.formatNumber(item.Revenue); + item.FormattedIncome = "$" + this.formatNumber(item.Income); + item.FormattedExpenses = "$" + this.formatNumber(item.Expenses); + item.FormattedProfit = item.IncomePerRevenue + "%"; + } + } +} +``` +```html +
+
+ Facebook Statement of Income 2019-2020 +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +- [Bar Chart](bar-chart.md) +- [Column Chart](column-chart.md) + + + +- [Line Chart](line-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +- [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) +- [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html) +- [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) +- [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-data-pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-data-pie-chart.md new file mode 100644 index 000000000..54639483b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-data-pie-chart.md @@ -0,0 +1,1051 @@ +--- +title: Angular Pie Charts and Graphs | Ignite UI for Angular +_description: The Ignite UI for Angular data pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections. Try for FREE. +_keywords: Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, animation, highlighting, legend +_license: commercial +mentionedTypes: ["DataPieChart", "XamDataChart", "OthersCategoryType", "SeriesSelectionMode", "SeriesSelectionBehavior", "SeriesHighlightingBehavior"] +namespace: Infragistics.Controls.Charts +_tocName: Data Pie Chart +_premium: true +--- + +# Angular Data Pie Chart + +The Ignite UI for Angular Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%. + +## Angular Data Pie Chart Example + +You can create the Angular Pie Chart in the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Data Pie Chart Recommendations + +Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization such as Doughnut (Ring) Chart, Funnel Chart, Stacked Area Chart, Stacked Bar Chart, and Treemap. + +The Angular Data Pie Chart includes interactive features that give the viewer tools to analyze data, like: + +- Legends +- Slice Selection +- Slice Highlighting +- Chart Animations + +Best Practices for a Pie Chart: + +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). +- Ensuring data segments add up to 100%. +- Arranging the order of data from largest (highest) to smallest (least). +- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. +- Ensuring the color palette is distinguishable for segments/slices of the parts. +- Considering data labels in segments vs. legends for ease of reading. +- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. +- Avoiding positioning multiple pie charts next to each other for comparative analysis. + +Do Not Use Pie Chart When: + +- Comparing change over time —use a Bar, Line or Area chart. +- Requiring precise data comparison —use a Bar, Line or Area chart. +- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a Bar chart. + +## Angular Data Pie Chart Legend + +Legends are used to show information about each point, to know about its contribution towards the total sum. + +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgxLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html) property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its [`orientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html#orientation) property. + +The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) by default, but this can be modified by utilizing the [`legendSliceLabelContentMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#legendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. + +You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#legendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. + +Below is an example that demonstrates usage of the ItemLegend with the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-angular-core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataPieChartDescriptionModule.register(context); + ItemLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Others Category + +Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice. + +The Others category in the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) has three main, configurable properties - [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType), [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold), and [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: + +The [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) property works in tandem with the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) property of the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html). For the [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType), you can define whether you want the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) will become part of the Others category. + +To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`getOthersContext`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#getOthersContext) method on the chart. This return type of this method is an [`IgxOthersCategoryContextComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxotherscategorycontextcomponent.html) which exposes an [`items`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxotherscategorycontextcomponent.html#items) property. The [`items`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxotherscategorycontextcomponent.html#items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgxOthersCategoryContextComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxotherscategorycontextcomponent.html). + +By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryText) property of the chart. + +If you want to ensure that the Others category does not show up in the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html), you can set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) to 0. + +The following sample demonstrates usage of the Others slice in the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-angular-core'; +import { DataPieDataItem, DataPieData } from './DataPieData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("othersCategoryTypeEditor", { static: true } ) + private othersCategoryTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("othersCategoryThresholdEditor", { static: true } ) + private othersCategoryThresholdEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("othersCategoryTextEditor", { static: true } ) + private othersCategoryTextEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _dataPieData: DataPieData = null; + public get dataPieData(): DataPieData { + if (this._dataPieData == null) + { + this._dataPieData = new DataPieData(); + } + return this._dataPieData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataPieChartDescriptionModule.register(context); + ItemLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + + + +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Data Pie Chart Selection + +The [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) and [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) properties of the chart, described below: + +The main two options of the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) are [`PerDataItemSingleSelect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionbehavior.html#PerDataItemSingleSelect) and [`PerDataItemMultiSelect`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionbehavior.html#PerDataItemMultiSelect), which will enable single and multiple selection, respectively. + +The [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: + +- [`Brighten`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#Brighten): The selected slices will be highlighted. +- [`FadeOthers`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FadeOthers): The selected slices will remain their same color and others will fade. +- [`FocusColorFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorFill): The selected slices will change their background to the FocusBrush of the chart. +- [`FocusColorOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. +- [`FocusColorThickOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FocusColorThickOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. +- [`GrayscaleOthers`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#GrayscaleOthers): The unselected slices will have a gray color filter applied to them. +- [`None`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#None): There is no effect on the selected slices. +- [`SelectionColorFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorFill): The selected slices will change their background to the SelectionBrush of the chart. +- [`SelectionColorOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorOutline): The selected slices will have an outline with the color defined by the SelectionBrush of the chart. +- [`SelectionColorThickOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#SelectionColorThickOutline): The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. +- [`ThickOutline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#ThickOutline): The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart. + +When a slice is selected, its underlying data item will be added to the SelectedSeriesItems collection of the chart. As such, the XamDataPieChart exposes the SelectedSeriesItemsChanged event to detect when a slice has been selected and this collection is changed. + +The following sample demonstrates the selection feature of the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) control: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-angular-core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("selectionBehaviorEditor", { static: true } ) + private selectionBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("selectionModeEditor", { static: true } ) + private selectionModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataPieChartDescriptionModule.register(context); + ItemLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Data Pie Chart Highlighting + +The [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source. + +First, the [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: + +- [`DirectlyOver`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#DirectlyOver): The slices are only highlighted when the mouse is directly over them. +- [`NearestItems`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItems): The nearest slice to the mouse position will be highlighted. +- [`NearestItemsAndSeries`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItemsAndSeries): The nearest slice and series to the mouse position will be highlighted. +- [`NearestItemsRetainMainShapes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.serieshighlightingbehavior.html#NearestItemsRetainMainShapes): The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. + +The [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: + +- [`Brighten`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#Brighten): The series will have its color brightened when the mouse position is over or near it. +- `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. +- [`FadeOthers`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#FadeOthers): The series will retain its color when the mouse position is over or near it, while the others will appear faded. +- `FadeOthersSpecific`: The specific slice will retain its color when the mouse position is over or near it, while the others will appear faded. +- [`None`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.seriesselectionmode.html#None): The series and slices will not be highlighted. + +The following example demonstrates the mouse highlighting behaviors of the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) component: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-angular-core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("highlightingModeEditor", { static: true } ) + private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("highlightingBehaviorEditor", { static: true } ) + private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataPieChartDescriptionModule.register(context); + ItemLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +In addition to the mouse highlighting, the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html). + +When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. + +The following example demonstrates highlight filtering. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataPieChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataPieChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, DataPieChartDescriptionModule } from 'igniteui-angular-core'; +import { OnlineTrafficHighlightTotalsItem, OnlineTrafficHighlightTotals } from './OnlineTrafficHighlightTotals'; +import { OnlineTrafficHighlightDesktopOnlyItem, OnlineTrafficHighlightDesktopOnly } from './OnlineTrafficHighlightDesktopOnly'; +import { IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _onlineTrafficHighlightTotals: OnlineTrafficHighlightTotals = null; + public get onlineTrafficHighlightTotals(): OnlineTrafficHighlightTotals { + if (this._onlineTrafficHighlightTotals == null) + { + this._onlineTrafficHighlightTotals = new OnlineTrafficHighlightTotals(); + } + return this._onlineTrafficHighlightTotals; + } + + private _onlineTrafficHighlightDesktopOnly: OnlineTrafficHighlightDesktopOnly = null; + public get onlineTrafficHighlightDesktopOnly(): OnlineTrafficHighlightDesktopOnly { + if (this._onlineTrafficHighlightDesktopOnly == null) + { + this._onlineTrafficHighlightDesktopOnly = new OnlineTrafficHighlightDesktopOnly(); + } + return this._onlineTrafficHighlightDesktopOnly; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + DataPieChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Data Pie Chart Animation + +The [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) supports animating its slices into view, as well as when a value changes. + +You can set the [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#isTransitionInEnabled) property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInMode) enumerated property to the type of animation you would like to see. Additionally, you can also set the [`transitionInSpeedType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInSpeedType) property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#transitionInDuration) property, which takes a `TimeSpan`. + +If you would like to animate data changes, this can also be done by setting the [`animateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#animateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`transitionDuration`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#transitionDuration) property as well. + +The following sample demonstrates the usage of animation in the [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-angular-core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-angular-layouts'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxDataPieChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("propertyEditorPropertyDescription1", { static: true } ) + private propertyEditorPropertyDescription1: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataPieChartDescriptionModule.register(context); + ItemLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + + public editorButtonReplayTransitionInDomain({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionButtonClickEventArgs }): void { + var chart = this.chart; + chart.replayTransitionIn(); + } + +} +``` +```html +
+
+ + + + +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +- [Donut Chart](donut-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) +- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) + +|Chart Type | Control Name | API Members | +|-----------------|----------------|------------ | +|Data Pie Chart | [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) | [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) | +|Item Legend | [`IgxItemLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemlegendcomponent.html) | [`IgxItemLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxitemlegendcomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-donut-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-donut-chart.md new file mode 100644 index 000000000..78a80d0d0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-donut-chart.md @@ -0,0 +1,462 @@ +--- +title: Angular Donut Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Donut Chart +_keywords: Angular Charts, Donut Chart, Donut Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDoughnutChart", "DoughnutChart"] +namespace: Infragistics.Controls.Charts +_tocName: Donut Chart +_premium: true +--- + +# Angular Donut Chart + +The Ignite UI for Angular Donut Chart is similar to the [Pie Chart](pie-chart.md), proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source. + +## Angular Donut Chart Example + +You can create Donut Chart using the [`IgxDoughnutChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html) control by binding your data as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxItemLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxItemLegendModule, + IgxDoughnutChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDoughnutChartComponent + @ViewChild("series", { static: true } ) + private series: IgxRingSeriesComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+ + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Donut Chart Recommendations + +### Are Angular Donut Charts right for your project? + +Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include: + +- [Pie](pie-chart.md) + + + +- [Stacked Area](area-chart.md) +- [Stacked 100% Area (Stacked Percentage Area)](area-chart.md) +- [Stacked Bar](bar-chart.md) +- [Stacked 100% Bar (Stacked Percentage Bar)](bar-chart.md) +- [Treemap](treemap-chart.md) +- [Waterfall](column-chart.md) + +The Angular Donut Chart includes interactive features that give the viewer tools to analyze data, like: + +- Legends +- Slice Explosion +- Slice Selection +- Chart Animations + +### Best Practices for Donut Charts + +- Using multiple data sets to display your data in a ring display. +- Placing the information such as values or labels, within the hole of the donut for quick explanation of data. +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Ensuring data segments add up to 100%. +- Ensuring the color palette is distinguishable for segments/slices of the parts. + +### When not to use a Donut Chart + +- Comparing change over time —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. +- Requiring precise data comparison —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. +- You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a [Bar](bar-chart.md) chart. +- You have negative data, as this can not be represented in a donut chart. + +## Angular Donut Chart - Slice Selection + +The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The `SliceClick` event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDoughnutChartModule, IgxRingSeriesModule, IgxLegendModule, IgxItemLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDoughnutChartModule, + IgxRingSeriesModule, + IgxLegendModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxDoughnutChartComponent } from "igniteui-angular-charts"; +import { IgxRingSeriesComponent } from "igniteui-angular-charts"; +import { IgxSliceClickEventArgs } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + public data: any; + public selectedSliceLabel : string = "No Selection"; + public selectedSliceValue : string = "0%"; + + @ViewChild("chart", { static: true }) + public chart: IgxDoughnutChartComponent; + + constructor() { + this.data = [ + { Value: 37, Label: "Cooling", Summary: "Cooling 37%" }, + { Value: 25, Label: "Residential", Summary: "Residential 25%" }, + { Value: 12, Label: "Heating", Summary: "Heating 12%" }, + { Value: 11, Label: "Lighting", Summary: "Lighting 11%" }, + { Value: 18, Label: "Other", Summary: "Other 18%" } + ]; + + } + + + public OnSliceClick(e: any) { + + if (e.args.isSelected) + { + this.selectedSliceLabel = this.data[e.args.index].Label; + this.selectedSliceValue = this.data[e.args.index].Value + "%"; + } + else + { + this.selectedSliceLabel = "No Selection"; + this.selectedSliceValue = "0%"; + } + } + + public ngAfterViewInit(): void { + } + + +} +``` +```html +
+
+
+ Global Electricity Demand by Energy Use +
+ +
+
+
+ +
+
+ + + + + +
+ + +
+
+
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Donut Chart - Multiple Rings + +It is possible to have a multiple ring display in the Angular Donut Chart, with each of the rings capable of being bound to a different data item, or they can share a common data source. This can be helpful if you need to display your data as tiers that have an underlying common category, such as the season to month data display below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDoughnutChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CalendarSeasonsItem, CalendarSeasons } from './CalendarSeasons'; +import { CalendarMonthsItem, CalendarMonths } from './CalendarMonths'; +import { IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDoughnutChartComponent + @ViewChild("series1", { static: true } ) + private series1: IgxRingSeriesComponent + @ViewChild("series2", { static: true } ) + private series2: IgxRingSeriesComponent + private _calendarSeasons: CalendarSeasons = null; + public get calendarSeasons(): CalendarSeasons { + if (this._calendarSeasons == null) + { + this._calendarSeasons = new CalendarSeasons(); + } + return this._calendarSeasons; + } + + private _calendarMonths: CalendarMonths = null; + public get calendarMonths(): CalendarMonths { + if (this._calendarMonths == null) + { + this._calendarMonths = new CalendarMonths(); + } + return this._calendarMonths; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Hierarchical Chart +
+
+ + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Pie Chart](pie-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxDoughnutChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html) +- [`allowSliceExplosion`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceExplosion) +- [`allowSliceSelection`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#allowSliceSelection) +- [`innerExtent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdoughnutchartcomponent.html#innerExtent) +- `SliceClick` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-line-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-line-chart.md new file mode 100644 index 000000000..37e90c19b --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-line-chart.md @@ -0,0 +1,1662 @@ +--- +title: Angular Line Chart and Graph | Ignite UI for Angular +_description: The Angular Line chart is capable of handling high volumes of data, ranging into millions of data points, and updating them every few milliseconds. Try for FREE. +_keywords: Angular Charts, Line Chart, Line Graph, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XamDataChart", "Legend", "PolarLineSeries", "RadialLineSeries", "StackedLineSeries", "Stacked100LineSeries", "Series", "CategoryChartType"] +namespace: Infragistics.Controls.Charts +_tocName: Line Chart +_premium: true +--- + +# Angular Line Chart + +The Ignite UI for Angular Line Chart or Line Graph is a type of category charts that show the continuous data values represented by points connected by straight line segments of one or more quantities over a period of time. It’s often used to show trends and perform comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) show a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. + +## Angular Line Chart Example + +You can create the Angular Line Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data to `ItemsSource` property and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line) enum, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Line Chart Recommendations + +### Are Angular Line Charts right for your project? + +- Different than an [area chart](area-chart.md), the line chart does not fill the area between the X-Axis (bottom axis) and the line. +- The Angular line chart is identical to the Angular [spline chart](spline-chart.md) in all aspects except that the line connecting data points does not have spline interpolation and smoothing for improved presentation of data. + +A Line Chart includes several variants based on your data or how you want to tell the correct story with your data. These include: + +- Layered Line Chart +- Stacked Line Chart +- Stepped Line Chart +- Polar Line Chart +- Stacked 100 Line Chart + +### Line Chart Use Cases + +There are several common use cases for choosing a Line Chart: + +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming and Drill-down. +- Need to compare the trends over time. +- Want to show the difference between 2 or more data series. +- Want to show cumulative part-to-whole comparisons of distinct categories. +- Need to show data trends for one or more categories for comparative analysis. +- Need to visualize detailed time-series data. + +### Line Chart Best Practices + +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use visual attributes like solid lines to show a series of data. + +### When Not to Use Line Chart + +- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. +- Time-series data has similar values (data over the same period), it makes overlapped lines impossible to differentiate. + +### Line Chart Data Structure + +- The data source must be an array or a list of data items (for single series). +- The data source must be an array of arrays or a list of lists (for multiple series). +- The data source must contain at least one data item. +- All data items must contain at least one data column (string or date time). +- All data items must contain at least one numeric data column. + +## Angular Line Chart with Single Series + +The Angular Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period, as we have shown in the example below. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Line Chart with Multiple Series + +Since the Angular Line Chart allows you to combine multiple series and compare or see how they change over time, let’s see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the line chart will automatically update to fit the additional data. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Line Chart with Live Data + +The Angular Line chart is capable of handling high volumes of data, ranging into millions of data points, and updating them every few milliseconds as demonstrated in the following demo. + +In this example, we are streaming live data into the Angular Line Chart at an interval of your choosing. You can set the data points from 5,000 to 1 million and update the chart to optimize the scale based on the device you are rendering the chart on. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { IgxSliderModule } from "igniteui-angular"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule, + IgxLegendModule, + IgxSliderModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core"; +import { IgxCategoryChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit, OnDestroy { + + public data: any[]; + + @ViewChild("chart", { static: true }) + public chart: IgxCategoryChartComponent; + + private currValue: number = 15; + private currIndex: number = 0; + + private shouldTick: boolean = true; + private _timerStatusText: string = "Stop"; + + private _maxPoints: number = 5000; + + private _refreshInterval: number = 10; + private _interval: number = -1; + private _frames: number = 0; + private _time: Date; + + constructor(private _zone: NgZone) { + this.data = this.generateData(); + } + + public onChangeAmountClicked() { + this.data = this.generateData(); + } + + public onTimerStartStopClick() { + if (this.shouldTick) { + this.shouldTick = false; + this._timerStatusText = "Start"; + } + else { + this.shouldTick = true; + this._timerStatusText = "Stop"; + } + } + + public onRefreshFrequencyChanged(e: any) { + let num: number = parseInt(e.target.value, 10); + + if (isNaN(num)) { + num = 10; + } + if (num < 10) { + num = 10; + } + if (num > 1000) { + num = 1000; + } + this._refreshInterval = num; + this.setupInterval(); + } + + public onMaxPointsChanged(e: any) { + let num: number = parseInt(e.target.value, 10); + + if (isNaN(num)) { + num = 1000; + } + if (num < 1000) { + num = 1000; + } + if (num > 1000000) { + num = 1000000; + } + this._maxPoints = num; + } + + public get maxPointsText(): string { + return this.toShortString(this._maxPoints); + } + + public get maxPoints(): number { + return this._maxPoints; + } + + @Input() + public set maxPoints(v: number) { + this._maxPoints = v; + } + + public get refreshInterval(): number { + return this._refreshInterval; + } + + @Input() + public set refreshInterval(v: number) { + this._refreshInterval = v; + this.setupInterval(); + } + + public get refreshIntervalText(): string { + return (this._refreshInterval / 1000).toFixed(3) + "s"; + } + + public get timerStatusText() { + return this._timerStatusText; + } + + @Input() + public set timerStatusText(v: string) { + this._timerStatusText = v; + } + + public ngOnDestroy(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + } + + public ngAfterViewInit(): void { + this._time = new Date(); + this.setupInterval(); + } + + private setupInterval(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + + this._zone.runOutsideAngular(() => { + this._interval = window.setInterval(() => this.tick(), + this.refreshInterval); + }); + } + + private generateData(): any[] { + const data: any[] = []; + for (this.currIndex = 0; this.currIndex < this.maxPoints; this.currIndex++) { + this.currValue += Math.random() * 4.0 - 2.0; + data.push({ Label: this.currIndex.toString(), Value: this.currValue }); + } + return data; + } + + + private tick(): void { + + if (this.shouldTick) { + + this.currValue += Math.random() * 4.0 - 2.0; + this.currIndex++; + const newVal = { Label: this.currIndex.toString(), Value: this.currValue }; + + const oldVal = this.data[0]; + this.data.push(newVal); + this.chart.notifyInsertItem(this.data, this.data.length - 1, newVal); + this.data.shift(); + this.chart.notifyRemoveItem(this.data, 0, oldVal); + + this._frames++; + const currTime = new Date(); + const elapsed = (currTime.getTime() - this._time.getTime()); + if (elapsed > 5000) { + const fps = this._frames / (elapsed / 1000.0); + this._time = currTime; + this._frames = 0; + } + } + } + + private toShortString(largeValue: number): string { + let roundValue: string; + + if (largeValue >= 1000000) { + roundValue = (largeValue / 1000000).toFixed(1); + return roundValue + "m"; + } + if (largeValue >= 1000) { + roundValue = (largeValue / 1000).toFixed(0); + return roundValue + "k"; + } + + roundValue = largeValue.toFixed(0); + return roundValue + ""; + } +} +``` +```html +
+
+ + + + + + + + + +
+ +
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Styling Line Chart + +Once our chart is set up, we may want to make some further styling customizations such as change the line colors, change the legend font family, and/or increase the size of the axis labels to make it easier to read. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +You can also create a dashed line within the [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) by using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) and setting the [`dashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dashArray) property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. + +The following example demonstrates usage of the [`dashArray`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dashArray) in a [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html) in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html): + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("lineSeries1", { static: true } ) + private lineSeries1: IgxLineSeriesComponent + @ViewChild("lineSeries2", { static: true } ) + private lineSeries2: IgxLineSeriesComponent + @ViewChild("lineSeries3", { static: true } ) + private lineSeries3: IgxLineSeriesComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Advanced Types of Line Charts + +The following sections explain more advanced types of Angular Line Charts that can be created using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. + +## Angular Stacked Line Chart + +The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedLineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedLineSeries", { static: true } ) + private stackedLineSeries: IgxStackedLineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Line Chart + +The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100LineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100LineSeries", { static: true } ) + private stacked100LineSeries: IgxStacked100LineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Line Chart + +The Radial Line Chart belongs to a group of radial charts and has a shape of an unfilled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Line Chart, but wraps the data points around a circular axis rather than stretching them horizontally. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxRadialLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialLineSeries1", { static: true } ) + private radialLineSeries1: IgxRadialLineSeriesComponent + @ViewChild("radialLineSeries2", { static: true } ) + private radialLineSeries2: IgxRadialLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Line Chart + +The Polar Line Chart belongs to a group of polar charts and is rendered using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. Polar Line Charts use the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarLineSeries1", { static: true } ) + private polarLineSeries1: IgxPolarLineSeriesComponent + @ViewChild("polarLineSeries2", { static: true } ) + private polarLineSeries2: IgxPolarLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +| Chart Type | Control Name | API Members | +| ------------------|--------------------|----------------------- | +| Line | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line) | +| Polar Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) | +| Radial Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) | +| Stacked Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | +| Stacked 100% Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-pie-chart.md new file mode 100644 index 000000000..0de5e68c4 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-pie-chart.md @@ -0,0 +1,1059 @@ +--- +title: Angular Pie Charts and Graphs | Ignite UI for Angular +_description: The Ignite UI for Angular pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections. Try for FREE. +_keywords: Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, slice explosion, animation +_license: commercial +mentionedTypes: ["XamPieChart", "XamDataChart"] +namespace: Infragistics.Controls.Charts +_tocName: Pie Chart +_premium: true +--- + +# Angular Pie Chart + +The Ignite UI for Angular Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%. + +## Angular Pie Chart Example + +You can create the Angular Pie Chart in the [`IgxPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html) by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. In this case, the example shows the overall breakdown of budget spend by department. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxItemLegendModule, IgxPieChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxItemLegendModule, + IgxPieChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Recommendations + +Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization. Others include: + +- Pie +- Doughnut (Ring) +- Funnel +- Stacked Area +- Stacked 100% Area (Stacked Percentage Area) +- Stacked Bar +- Stacked 100% Bar (Stacked Percentage Bar) +- Treemap +- Waterfall + +The Angular Pie Chart includes interactive features that give the viewer tools to analyze data, like: + +- Legends +- Slice Explosion +- Slice Selection +- Chart Animations + +Best Practices for a Pie Chart: + +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). +- Ensuring data segments add up to 100%. +- Arranging the order of data from largest (highest) to smallest (least). +- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. +- Ensuring the color palette is distinguishable for segments/slices of the parts. +- Considering data labels in segments vs. legends for ease of reading. +- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. +- Avoiding positioning multiple pie charts next to each other for comparative analysis. + +Do Not Use Pie Chart When: + +- Comparing change over time —use a Bar, Line or Area chart. +- Requiring precise data comparison —use a Bar, Line or Area chart. +- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a Bar chart. + +## Angular Pie Chart Legend + +Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. + +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgxLegendComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlegendcomponent.html) property. The [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. + +Additionally you can use the [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) and [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxItemLegendModule, IgxPieChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxItemLegendModule, + IgxPieChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Others Category + +Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice + +In the sample below, the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) is set to 2, and [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. + +If you set [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) to Percent, then [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) is most appropriate for your application. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxItemLegendModule, IgxPieChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxItemLegendModule, + IgxPieChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Explosion + +The pie chart supports explosion of individual pie slices as well as a `SliceClick` event that allows you to modify selection states and implement custom logic + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPieChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPieChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxPieChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + public data: any; + + @ViewChild("chart", { static: true }) + public chart: IgxPieChartComponent; + + constructor() { + this.data = [ + { MarketShare: 37, Company: "Cooling", Summary: "Cooling 37%" }, + { MarketShare: 25, Company: "Residential", Summary: "Residential 25%" }, + { MarketShare: 12, Company: "Heating", Summary: "Heating 12%" }, + { MarketShare: 8, Company: "Lighting", Summary: "Lighting 8%" }, + { MarketShare: 18, Company: "Other", Summary: "Other 18%" } + ]; + } + + public pieSliceClickEvent(e: any): void { + e.args.isExploded = !e.args.isExploded; + } + + public ngAfterViewInit(): void { + this.chart.explodedSlices.add(3); + } +} +``` +```html +
+
+ Global Electricity Demand by Energy Use + +
+
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Selection + +The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`selectedItems`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#selectedItems) property. The selected slices are then highlighted. + +There is a property called [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#selectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. + +The pie chart supports three different selection modes. + +- Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected. +- Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected. +- Manual - When the mode is set to Manual, selection is disabled. + +The pie chart has 4 events associated with selection: + +- SelectedItemChanging +- SelectedItemChanged +- SelectedItemsChanging +- SelectedItemsChanged + +The events that end in “Changing” are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it. + +For scenarios where you click on the Others slice, the pie chart will return an object called [`IgxPieSliceOthersContext`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiesliceotherscontext.html). This object contains a list of the data items contained within the Others slice. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPieChartModule, IgxLegendModule, IgxItemLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPieChartModule, + IgxLegendModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild } from "@angular/core"; +import { IgxPieChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + public selectionType: string; + public data: any; + + @ViewChild("chart", { static: true }) + public chart: IgxPieChartComponent; + + constructor() { + this.data = [ + { MarketShare: 37, Company: "Cooling", Summary: "Cooling 37%" }, + { MarketShare: 25, Company: "Residential", Summary: "Residential 25%" }, + { MarketShare: 12, Company: "Heating", Summary: "Heating 12%" }, + { MarketShare: 8, Company: "Lighting", Summary: "Lighting 8%" }, + { MarketShare: 18, Company: "Other", Summary: "Other 18%" } + ]; + + this.selectionType = "Single"; + } + + public ngAfterViewInit(): void { + this.chart.selectedItem = this.data[3]; + } +} +``` +```html +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Animation + +You can animate the pie chart smoothly by setting the `radiusFactor` property, which will scale the chart's radius. Also set the `startAngle` property to angle the chart such that it keep increasing the chart angle while rotating. + +In the code below, the radiusFactor is increasing the chart by 0.25% of the size, and startAngle is rotating the chart by 1 degree. When radiusFactor and startAngle reached to its maximum limit the animation is stopped by reset the animation flag and clear the interval. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPieChartModule, IgxLegendModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPieChartModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ElementRef, NgZone, ViewChild } from "@angular/core"; +import { IgxPieChartComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + public data: any; + + @ViewChild("chart", { static: true }) + public chart: IgxPieChartComponent; + public animateChart: string = "Pause Animation"; + private _refreshInterval: number = 10; + private _interval: number = -1; + private isTimerStarted: boolean = false; + + constructor(private _zone: NgZone) { + this.data = [ + { MarketShare: 37, Company: "Cooling", Summary: "Cooling 37%" }, + { MarketShare: 25, Company: "Residential", Summary: "Residential 25%" }, + { MarketShare: 12, Company: "Heating", Summary: "Heating 12%" }, + { MarketShare: 8, Company: "Lighting", Summary: "Lighting 8%" }, + { MarketShare: 18, Company: "Other", Summary: "Other 18%" } + ]; + } + + public onClicked() { + if (!this.isTimerStarted) { + this.animateChart = "Start Animation"; + this.isTimerStarted = true; + window.setTimeout(() => this.tick(), 16); + } else { + this.isTimerStarted = false; + this.animateChart = "Pause Animation"; + } + } + + public get refreshInterval(): number { + return this._refreshInterval; + } + + public set refreshInterval(v: number) { + this._refreshInterval = v; + this.setupInterval(); + } + + public ngAfterViewInit(): void { + this.setupInterval(); + } + + private setupInterval(): void { + if (this._interval >= 0) { + this._zone.runOutsideAngular(() => { + window.clearInterval(this._interval); + }); + this._interval = -1; + } + + this._zone.runOutsideAngular(() => { + this._interval = window.setInterval(() => this.tick(), + this.refreshInterval); + }); + } + + private tick(): void { + + if (!this.isTimerStarted) { + + this.chart.radiusFactor += 0.0025; + this.chart.startAngle++; + if (this.chart.startAngle >= 360) { + this.chart.startAngle = 0; + } + if (this.chart.radiusFactor > 1.0) { + this.chart.radiusFactor = 0.1; + } + } + } + +} +``` +```html +
+
+ +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Pie Chart Styling + +Once our pie chart is created, we may want to make some further styling customizations such as a change of the colors for the slices of the chart, as demonstrated below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPieChartModule, IgxItemLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPieChartModule, + IgxItemLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxItemLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxPieChartComponent + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Global Electricity Demand by Energy Use +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Pie Chart + +The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a group of radial charts and uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialPieSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialPieSeries1", { static: true } ) + private radialPieSeries1: IgxRadialPieSeriesComponent + @ViewChild("radialPieSeries2", { static: true } ) + private radialPieSeries2: IgxRadialPieSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +- [Donut Chart](donut-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#selectionMode) + +|Chart Type | Control Name | API Members | +|-----------------|----------------|------------ | +|Pie Chart | [`IgxPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html) | `PieChart` | +|Radial Pie Chart | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialPieSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-point-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-point-chart.md new file mode 100644 index 000000000..a6edf8fc1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-point-chart.md @@ -0,0 +1,480 @@ +--- +title: Angular Point Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Point Chart +_keywords: Angular Charts, Point Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "CategoryChartType", "Legend", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Point Chart +_premium: true +--- + +# Angular Point Chart + +The Ignite UI for Angular Point Chart renders a collection of points. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). These charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. + +## Angular Point Chart Example + +You can create the Angular Point Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data to `ItemsSource` property and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to **Point** enum, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Point Chart with Single Series + +In the following example, the Angular Point Chart plots a single data source by automatically selecting numeric data column for y-axis and non-numeric data column for x-axis. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Point Chart with Multiple Series + +Since the Angular Point Chart allows you to combine multiple series and compare or see how they change over time, let’s see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the point chart will automatically update to fit the additional data. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Point Chart Styling + +Once the Angular Point Chart is set up, we may want to make some further styling customizations such as change the markers and its outlines, brushes and thickness. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Advanced Types of Point Charts + +You can create more advanced types of Angular Point Charts using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by following these topics: + +- [Scatter Bubble Chart](bubble-chart.md) +- [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) +- [Scatter HD Chart](scatter-chart.md#angular-scatter-high-density-chart) +- [Polar Marker Chart](polar-chart.md#angular-polar-marker-chart) + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Performance](../features/chart-performance.md) +- [Chart Markers](../features/chart-markers.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) +- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes) +- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) +- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) +- [`markerThickness`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerThickness) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-polar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-polar-chart.md new file mode 100644 index 000000000..564f32c00 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-polar-chart.md @@ -0,0 +1,996 @@ +--- +title: Angular Polar Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Polar Chart +_keywords: Angular Charts, Polar Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "PolarAreaSeries", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Polar Chart +_premium: true +--- + +# Angular Polar Chart + +The Ignite UI for Angular Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of [Scatter Series](scatter-chart.md) and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results. + +## Angular Polar Area Chart + +The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.md#angular-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarAreaSeries1", { static: true } ) + private polarAreaSeries1: IgxPolarAreaSeriesComponent + @ViewChild("polarAreaSeries2", { static: true } ) + private polarAreaSeries2: IgxPolarAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Spline Area Chart + +The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.md#angular-polar-area-chart) does. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarSplineAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarSplineAreaSeries1", { static: true } ) + private polarSplineAreaSeries1: IgxPolarSplineAreaSeriesComponent + @ViewChild("polarSplineAreaSeries2", { static: true } ) + private polarSplineAreaSeries2: IgxPolarSplineAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Marker Chart + +The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarScatterSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarScatterSeries1", { static: true } ) + private polarScatterSeries1: IgxPolarScatterSeriesComponent + @ViewChild("polarScatterSeries2", { static: true } ) + private polarScatterSeries2: IgxPolarScatterSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Line Chart + +The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md#angular-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarLineSeries1", { static: true } ) + private polarLineSeries1: IgxPolarLineSeriesComponent + @ViewChild("polarLineSeries2", { static: true } ) + private polarLineSeries2: IgxPolarLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Spline Chart + +The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.md#angular-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarSplineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarSplineSeries1", { static: true } ) + private polarSplineSeries1: IgxPolarSplineSeriesComponent + @ViewChild("polarSplineSeries2", { static: true } ) + private polarSplineSeries2: IgxPolarSplineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Polar Chart Styling + +Once our polar chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartPolarModule, IgxDataChartPolarCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartPolarModule, + IgxDataChartPolarCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxPolarAreaSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxNumericAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("polarAreaSeries1", { static: true } ) + private polarAreaSeries1: IgxPolarAreaSeriesComponent + @ViewChild("polarAreaSeries2", { static: true } ) + private polarAreaSeries2: IgxPolarAreaSeriesComponent + private _boatSailingData: BoatSailingData = null; + public get boatSailingData(): BoatSailingData { + if (this._boatSailingData == null) + { + this._boatSailingData = new BoatSailingData(); + } + return this._boatSailingData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Wind Speed vs Boat Speed +
+
+ + +
+
+ + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Donut Chart](donut-chart.md) +- [Line Chart](line-chart.md) +- [Pie Chart](pie-chart.md) +- [Radial Chart](radial-chart.md) +- [Scatter Chart](scatter-chart.md) +- [Spline Chart](spline-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html) +- [`IgxPolarLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) +- [`IgxPolarSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html) +- [`IgxPolarSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html) +- [`IgxPolarScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html) +- `ItemsSource` +- [`angleMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarbasecomponent.html#angleMemberPath) +- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarbasecomponent.html#radiusMemberPath) +- [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) +- [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-radial-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-radial-chart.md new file mode 100644 index 000000000..f2bec6130 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-radial-chart.md @@ -0,0 +1,845 @@ +--- +title: Angular Radial Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Radial Chart +_keywords: Angular Charts, Radial Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "RadialLineSeries", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Radial Chart +_premium: true +--- + +# Angular Radial Chart + +The Ignite UI for Angular Radial Chart takes data and render it as collection of data points wrapped around a circle (rather than stretching along a horizontal line). Radial Chart is also mapping a list of categories from the minimum to the maximum of the extent of the chart, and support the category grouping mechanisms. + +## Angular Radial Area Chart + +The Angular Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Area Chart](area-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxRadialAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialAreaSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialAreaSeries1", { static: true } ) + private radialAreaSeries1: IgxRadialAreaSeriesComponent + @ViewChild("radialAreaSeries2", { static: true } ) + private radialAreaSeries2: IgxRadialAreaSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Column Chart + +The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.md), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxRadialColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxLegendModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialColumnSeries1", { static: true } ) + private radialColumnSeries1: IgxRadialColumnSeriesComponent + @ViewChild("radialColumnSeries2", { static: true } ) + private radialColumnSeries2: IgxRadialColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Line Chart + +The Angular Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to [`IgxRadialLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialLineSeries1", { static: true } ) + private radialLineSeries1: IgxRadialLineSeriesComponent + @ViewChild("radialLineSeries2", { static: true } ) + private radialLineSeries2: IgxRadialLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Pie Chart + +The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxRadialPieSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialPieSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialPieSeries1", { static: true } ) + private radialPieSeries1: IgxRadialPieSeriesComponent + @ViewChild("radialPieSeries2", { static: true } ) + private radialPieSeries2: IgxRadialPieSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Chart Styling + +Once our radial chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. This example demonstrates how to customize styling in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartRadialModule, + IgxDataChartRadialCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialAreaSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("angleAxis", { static: true } ) + private angleAxis: IgxCategoryAngleAxisComponent + @ViewChild("radiusAxis", { static: true } ) + private radiusAxis: IgxNumericRadiusAxisComponent + @ViewChild("radialAreaSeries1", { static: true } ) + private radialAreaSeries1: IgxRadialAreaSeriesComponent + @ViewChild("radialAreaSeries2", { static: true } ) + private radialAreaSeries2: IgxRadialAreaSeriesComponent + private _footballPlayerStats: FootballPlayerStats = null; + public get footballPlayerStats(): FootballPlayerStats { + if (this._footballPlayerStats == null) + { + this._footballPlayerStats = new FootballPlayerStats(); + } + return this._footballPlayerStats; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Ronaldo vs Messi Player Stats +
+
+ + +
+
+ + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Radial Chart Settings + +In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the `LabelMode` property for the [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html). + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Donut Chart](donut-chart.md) +- [Line Chart](line-chart.md) +- [Pie Chart](pie-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxRadialAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html) +- [`IgxRadialColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html) +- [`IgxRadialLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) +- [`IgxRadialPieSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) +- `ItemsSource` +- `AngleAxisName` +- `ValueAxisName` +- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxanchoredradialseriescomponent.html#valueMemberPath) +- [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) +- [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-scatter-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-scatter-chart.md new file mode 100644 index 000000000..23c836997 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-scatter-chart.md @@ -0,0 +1,980 @@ +--- +title: Angular Scatter Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Scatter Chart +_keywords: Angular Charts, Scatter Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "ScatterSeries", "ScatterLineSeries", "ScatterSplineSeries", "HighDensityScatterSeries", "ScatterAreaSeries", "ScatterContourSeries", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Scatter Chart +_premium: true +--- + +# Angular Scatter Charts + +The Ignite UI for Angular Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates. These charts draw attention to uneven intervals or clusters of data. They are often used to plot scientific data, and can highlight the deviation of collected data from predicted results. Also, you can use them to organize data chronologically (even if the data is not in chronological order). + +## Angular Scatter Marker Chart + +Angular Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope'; +import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("scatterSeries1", { static: true } ) + private scatterSeries1: IgxScatterSeriesComponent + @ViewChild("scatterSeries2", { static: true } ) + private scatterSeries2: IgxScatterSeriesComponent + private _countryDemographicEurope: CountryDemographicEurope = null; + public get countryDemographicEurope(): CountryDemographicEurope { + if (this._countryDemographicEurope == null) + { + this._countryDemographicEurope = new CountryDemographicEurope(); + } + return this._countryDemographicEurope; + } + + private _countryDemographicAfrican: CountryDemographicAfrican = null; + public get countryDemographicAfrican(): CountryDemographicAfrican { + if (this._countryDemographicAfrican == null) + { + this._countryDemographicAfrican = new CountryDemographicAfrican(); + } + return this._countryDemographicAfrican; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Population Statistics for Selected Continents +
+
+ + +
+
+ + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Scatter Line Chart + +Angular Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany'; +import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("scatterLineSeries1", { static: true } ) + private scatterLineSeries1: IgxScatterLineSeriesComponent + @ViewChild("scatterLineSeries2", { static: true } ) + private scatterLineSeries2: IgxScatterLineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _healthDataForGermany: HealthDataForGermany = null; + public get healthDataForGermany(): HealthDataForGermany { + if (this._healthDataForGermany == null) + { + this._healthDataForGermany = new HealthDataForGermany(); + } + return this._healthDataForGermany; + } + + private _healthDataForFrance: HealthDataForFrance = null; + public get healthDataForFrance(): HealthDataForFrance { + if (this._healthDataForFrance == null) + { + this._healthDataForFrance = new HealthDataForFrance(); + } + return this._healthDataForFrance; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Life Expectancy vs Health Expenditure +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Scatter Spline Chart + +Angular Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany'; +import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance'; +import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSplineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("scatterSplineSeries1", { static: true } ) + private scatterSplineSeries1: IgxScatterSplineSeriesComponent + @ViewChild("scatterSplineSeries2", { static: true } ) + private scatterSplineSeries2: IgxScatterSplineSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _healthDataForGermany: HealthDataForGermany = null; + public get healthDataForGermany(): HealthDataForGermany { + if (this._healthDataForGermany == null) + { + this._healthDataForGermany = new HealthDataForGermany(); + } + return this._healthDataForGermany; + } + + private _healthDataForFrance: HealthDataForFrance = null; + public get healthDataForFrance(): HealthDataForFrance { + if (this._healthDataForFrance == null) + { + this._healthDataForFrance = new HealthDataForFrance(); + } + return this._healthDataForFrance; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Life Expectancy vs Health Expenditure +
+
+ + +
+
+ + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Scatter High Density Chart + +Use the Angular Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; +import { SampleDensityData } from "./SampleDensityData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxLegendModule, + IgxDataChartInteractivityModule +], + providers: [SampleDensityData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxHighDensityScatterSeriesComponent } from "igniteui-angular-charts"; +import { SampleDensityData } from "./SampleDensityData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + + @ViewChild("xAxis", { static: true }) + public xAxis: IgxNumericXAxisComponent; + + @ViewChild("yAxis", { static: true }) + public yAxis: IgxNumericYAxisComponent; + + public data: any[]; + + constructor() { } + + ngOnInit() { + + this.data = SampleDensityData.create(); + + const i = 0; + // const scatterSeries = new IgxHighDensityScatterSeriesComponent(); + // scatterSeries.title = "Distribution"; + // scatterSeries.dataSource = SampleDensityData.create(); + // scatterSeries.showDefaultTooltip = true; + // scatterSeries.xMemberPath = "x"; + // scatterSeries.yMemberPath = "y"; + // scatterSeries.mouseOverEnabled = true; + // scatterSeries.progressiveLoad = true; + // scatterSeries.heatMinimumColor = "Black"; + // scatterSeries.heatMaximumColor = "Yellow"; + // scatterSeries.heatMaximum = 1; + // scatterSeries.heatMinimum = 5; + // scatterSeries.resolution = 3; + // scatterSeries.xAxis = this.xAxis; + // scatterSeries.yAxis = this.yAxis; + + // this.chart.series.clear(); + // this.chart.series.add(scatterSeries); + } +} +``` +```html +
+
+ +
+ + + + + + + + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Scatter Area Chart + +Angular Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxScatterAreaSeriesModule } from "igniteui-angular-charts"; +import { SampleScatterData } from "./SampleScatterData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxLegendModule, + IgxDataChartInteractivityModule, + IgxScatterAreaSeriesModule +], + providers: [SampleScatterData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { ColorScaleInterpolationMode } from "igniteui-angular-charts"; +import { IgxCustomPaletteColorScaleComponent } from "igniteui-angular-charts"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxScatterAreaSeriesComponent } from "igniteui-angular-charts"; +import { SampleScatterData } from "./SampleScatterData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + @ViewChild("series", { static: true }) + public series: IgxScatterAreaSeriesComponent; + + public data: any[]; + public colorScale: IgxCustomPaletteColorScaleComponent; + public seriesScaleMode: string; + public seriesScaleMin: number; + public seriesScaleMax: number; + + constructor() { + this.data = SampleScatterData.create(); + + this.seriesScaleMax = 2; + this.seriesScaleMin = -2; + this.seriesScaleMode = "InterpolateHSV"; + } + + public ngOnInit() { + + this.colorScale = new IgxCustomPaletteColorScaleComponent(); + this.colorScale.interpolationMode = ColorScaleInterpolationMode.InterpolateHSV; + this.colorScale.minimumValue = -2; + this.colorScale.maximumValue = 2; + this.colorScale.palette = [ + "#8670CB", "#513E8C", "#003F5E", + "#0C6B99", "#4AC4FF", "#B5CC2E", + "#FFD034", "#FC8612", "#ED4840" + ]; + + this.series.colorScale = this.colorScale; + } + + public seriesScaleMinChanged(e: any) { + const num: number = e.target.value.toString(); + this.colorScale.minimumValue = num; + this.seriesScaleMin = num; + } + public seriesScaleMaxChanged(e: any) { + const num: number = e.target.value.toString(); + this.colorScale.maximumValue = num; + this.seriesScaleMax = num; + } + public seriesScaleModeChanged(e: any) { + const mode = e.target.value.toString(); + this.colorScale.interpolationMode = mode; + this.seriesScaleMode = mode; + } +} +``` +```html +
+
+ Scale Mode: + + + + + + + + + +
+ +
+ +
+ +
+ + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Scatter Contour Chart + +Angular Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxScatterContourSeriesModule, IgxScatterAreaSeriesModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts"; +import { SampleScatterData } from "./SampleScatterData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxLegendModule, + IgxScatterContourSeriesModule, + IgxScatterAreaSeriesModule, + IgxDataChartInteractivityModule +], + providers: [SampleScatterData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { SampleScatterData } from "./SampleScatterData"; +import { IgxLinearContourValueResolverComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxScatterContourSeriesComponent } from "igniteui-angular-charts"; +import { IgxValueBrushScaleComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + + @ViewChild("xAxis", { static: true }) + public xAxis: IgxNumericXAxisComponent; + + @ViewChild("yAxis", { static: true }) + public yAxis: IgxNumericYAxisComponent; + + public brushScale: IgxValueBrushScaleComponent; + + constructor() { + this.data = SampleScatterData.create(); + + this.brushScale = new IgxValueBrushScaleComponent(); + this.brushScale.minimumValue = -2; + this.brushScale.maximumValue = 2; + this.brushScale.brushes = [ + "#8670CB", "#513E8C", "#003F5E", + "#0C6B99", "#4AC4FF", "#B5CC2E", + "#FFD034", "#FC8612", "#ED4840" + ]; + } + + public ngOnInit() { + + } +} +``` +```html +
+
+ +
+
+ + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Bubble Chart](bubble-chart.md) +- [Line Chart](line-chart.md) +- [Spline Chart](spline-chart.md) +- [Shape Chart](shape-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +|Chart Type | Control Name | API Members | +|----------------------------|----------------|------------------------ | +|Scatter Marker | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html) | +|Scatter Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html) | +|Scatter Spline | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html) | +|High Density Scatter | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html) | +|Scatter Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html) | +|Scatter Contour | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-shape-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-shape-chart.md new file mode 100644 index 000000000..91dc247e1 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-shape-chart.md @@ -0,0 +1,399 @@ +--- +title: Angular Shape Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Shape Chart +_keywords: Angular Charts, Shape Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "ScatterPolygonSeries", "ScatterPolylineSeries", "Series", "GeographicShapeSeriesBase"] +namespace: Infragistics.Controls.Charts +_tocName: Shape Chart +_premium: true +--- + +# Angular Shape Charts + +The Ignite UI for Angular Shape Charts are a group of charts that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings. + +## Angular Scatter Polygon Chart + +The Angular Scatter Polygon Chart renders an array or array of arrays of polygons in the Cartesian (x, y) coordinate system using [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. This chart can be used to filled shapes of plot diagrams, blueprints, or even the floor plan of buildings. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartShapeModule, IgxDataChartShapeCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartShapeModule, + IgxDataChartShapeCoreModule, + IgxLegendModule, + IgxDataChartInteractivityModule, + IgxDataChartScatterModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxStyleShapeEventArgs } from "igniteui-angular-charts"; +import { IgxScatterPolygonSeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild('airplaneShapeSeries', { static: true }) + public airplaneShapeSeries: IgxScatterPolygonSeriesComponent; + + @ViewChild('airplaneSeatSeries', { static: true }) + public airplaneSeatSeries: IgxScatterPolygonSeriesComponent; + + @ViewChild('seatTooltip', { static: true }) + public seatTooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit() { + + fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json') + .then((response) => response.json()) + .then((data) => this.onLoadedJsonShape(data)); + + fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json') + .then((response) => response.json()) + .then((data) => this.onLoadedJsonSeats(data)); + } + + public onLoadedJsonShape(jsonData: any[]) { + // console.log('airplane-shape.json ' + jsonData.length); + this.airplaneShapeSeries.dataSource = jsonData; + } + + public onLoadedJsonSeats(jsonData: any[]) { + // console.log('airplane-seats.json ' + jsonData.length); + this.airplaneSeatSeries.dataSource = jsonData; + this.airplaneSeatSeries.showDefaultTooltip = true; + this.airplaneSeatSeries.tooltipTemplate = this.seatTooltip; + } + + public onStylingShape(ev: { sender: any, args: IgxStyleShapeEventArgs }) { + + ev.args.shapeOpacity = 1.0; + ev.args.shapeStrokeThickness = 0.5; + ev.args.shapeStroke = 'Black'; + + const itemRecord = ev.args.item as any; + if (itemRecord.class === 'First') { + ev.args.shapeFill = 'DodgerBlue'; + } + if (itemRecord.class === 'Business') { + ev.args.shapeFill = 'LimeGreen'; + } + if (itemRecord.class === 'Premium') { + ev.args.shapeFill = 'Orange'; + } + if (itemRecord.class === 'Economy') { + ev.args.shapeFill = 'Red'; + } + + if (itemRecord.status === 'Sold') { + ev.args.shapeFill = 'Gray'; + } + } +} +``` +```html +
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + +
+ +
+
+
+
+
+
+
+
+ + +
+ {{item.class}} Class +
+ Seat: {{item.seat}} +
+ Price: ${{item.price}} +
+ Status: {{item.status}} +
+ +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Scatter Polyline Chart + +The Angular Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartShapeModule, IgxDataChartShapeCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxDataChartScatterModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartShapeModule, + IgxDataChartShapeCoreModule, + IgxLegendModule, + IgxDataChartInteractivityModule, + IgxDataChartScatterModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxStyleShapeEventArgs } from "igniteui-angular-charts"; +import { IgxScatterPolylineSeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild('airplaneShapeSeries', { static: true }) + public airplaneShapeSeries: IgxScatterPolylineSeriesComponent; + + @ViewChild('airplaneSeatSeries', { static: true }) + public airplaneSeatSeries: IgxScatterPolylineSeriesComponent; + + @ViewChild('seatTooltip', { static: true }) + public seatTooltip: TemplateRef; + + constructor() { + } + + public ngAfterViewInit() { + + fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json') + .then((response) => response.json()) + .then((data) => this.onLoadedJsonShape(data)); + + fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json') + .then((response) => response.json()) + .then((data) => this.onLoadedJsonSeats(data)); + } + + public onLoadedJsonShape(jsonData: any[]) { + // console.log('airplane-shape.json ' + jsonData.length); + this.airplaneShapeSeries.dataSource = jsonData; + } + + public onLoadedJsonSeats(jsonData: any[]) { + // console.log('airplane-seats.json ' + jsonData.length); + this.airplaneSeatSeries.dataSource = jsonData; + this.airplaneSeatSeries.showDefaultTooltip = true; + this.airplaneSeatSeries.tooltipTemplate = this.seatTooltip; + } + + public onStylingShape(ev: { sender: any, args: IgxStyleShapeEventArgs }) { + + ev.args.shapeOpacity = 1.0; + ev.args.shapeStrokeThickness = 1.0; + ev.args.shapeStroke = 'Black'; + + const itemRecord = ev.args.item as any; + if (itemRecord.class === 'First') { + ev.args.shapeStroke = 'DodgerBlue'; + } + if (itemRecord.class === 'Business') { + ev.args.shapeStroke = 'LimeGreen'; + } + if (itemRecord.class === 'Premium') { + ev.args.shapeStroke = 'Orange'; + } + if (itemRecord.class === 'Economy') { + ev.args.shapeStroke = 'Red'; + } + + if (itemRecord.status === 'Sold') { + ev.args.shapeFill = 'Gray'; + } + } +} +``` +```html +
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + +
+ +
+
+
+
+
+
+
+
+ + +
+ {{item.class}} Class +
+ Seat: {{item.seat}} +
+ Price: ${{item.price}} +
+ Status: {{item.status}} +
+ +``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Line Chart](line-chart.md) +- [Scatter Chart](scatter-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +- [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html) +- [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html) +- `ItemsSource` +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxshapeseriesbasecomponent.html#shapeMemberPath) +- [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) +- [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) +- `YAxisName` +- `XAxisName` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-sparkline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-sparkline-chart.md new file mode 100644 index 000000000..06a522e21 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-sparkline-chart.md @@ -0,0 +1,1108 @@ +--- +title: Angular Sparkline | Data Visualization Tools | Infragistics +_description: Use Infragistics' Angular sparkline chart control to render in a small scale layout such as a grid cell or stand alone. Learn about the Ignite UI for Angular sparkline chart configurable elements! +_keywords: Sparkline, Ignite UI for Angular, Infragistics, WinLoss, Area, Column +_license: commercial +mentionedTypes: ["XamSparkline", "SparklineDisplayType", "TrendLineType"] +namespace: Infragistics.Controls.Charts +_tocName: Sparkline Chart +_premium: true +--- + +# Angular Sparkline + +The Ignite UI for Angular Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The [`Sparkline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sparkline.html) has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. + +## Angular Sparkline Example + +The following example shows all the different types of [`Sparkline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sparkline.html) available. The type is defined by setting the [`displayType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) property. If the [`displayType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) property is not specified, then by default, the [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Line) type is displayed. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxSparklineModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxSparklineComponent } from "igniteui-angular-charts"; +import { SparklineDisplayType } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any[]; + + @ViewChild("sparkline", { static: true }) + public sparkline: IgxSparklineComponent; + + constructor() { + this.data = SharedData.getSharedData(); + } + + public onDisplayTypeChanged(e: any) { + const selection = e.target.value.toString(); + + switch (selection) { + case "Area": { + this.sparkline.displayType = SparklineDisplayType.Area; + break; + } + case "Column": { + this.sparkline.displayType = SparklineDisplayType.Column; + break; + } + case "Line": { + this.sparkline.displayType = SparklineDisplayType.Line; + break; + } + case "WinLoss": { + this.sparkline.displayType = SparklineDisplayType.WinLoss; + break; + } + } + } +} +``` +```html +
+
+ Display Type: + +
+
+ +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. + +## Sparkline Recommendations + +### Is the Sparkline chart right for your project? + +The primary benefit of the Sparkline control compared to other charting controls is that it can render in a limited space such as a grid cell with all its visual elements shown. + +The Angular Sparkline has the ability to mark the data points with elliptical icons to indicate the highest, lowest, first, last, and negative values. The markers can be customized with a desired shape, color, or image. + +### Sparkline Use Cases + +- You have a compact space to display a chart in. +- You want to show trends in a series of values, such as weekly revenue. + +### Sparkline Best Practices + +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use visual attributes like solid lines to show a series of data. + +### When Not to Use Sparkline + +- You need to analyze the data in detail. +- You need to display every label of the data points. It only allows showing high and low values on the Y-Axis, and first and last values on the X-Axis. + +### Sparkline Data Structure + +- It requires one-dimensional data. +- The data set must contain at least two numeric fields. +- The text in the data source fields can be used to display the first and last label on the X-Axis. + +## Sparkline Types + +The Angular Sparkline supports the following types of sparklines by setting the [`displayType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) property accordingly: + +- [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Line): Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline. +- [`Area`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Area): Displays the Area chart type of Sparkline with numeric data. This is like line type with additional steps of closing the area after each line is drawn. At least two data points must be supplied to visualize the data in Sparkline. +- [`Column`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Column): Displays the Column chart type of Sparkline with numeric data. Some may refer to it as vertical bars. This type can render a single data point, but it would require specifying the minimum value range property (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible. +- [`WinLoss`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#WinLoss): This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the Angular Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxSparklineModule } from "igniteui-angular-charts"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, ViewChild } from "@angular/core"; +import { IgxSparklineComponent } from "igniteui-angular-charts"; +import { SparklineDisplayType } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public data: any[]; + + @ViewChild("sparkline", { static: true }) + public sparkline: IgxSparklineComponent; + + constructor() { + this.data = SharedData.getSharedData(); + } + + public onDisplayTypeChanged(e: any) { + const selection = e.target.value.toString(); + + switch (selection) { + case "Area": { + this.sparkline.displayType = SparklineDisplayType.Area; + break; + } + case "Column": { + this.sparkline.displayType = SparklineDisplayType.Column; + break; + } + case "Line": { + this.sparkline.displayType = SparklineDisplayType.Line; + break; + } + case "WinLoss": { + this.sparkline.displayType = SparklineDisplayType.WinLoss; + break; + } + } + } +} +``` +```html +
+
+ Display Type: + +
+
+ +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Markers + +The Angular Sparkline allows you to show markers as circular-colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types of [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Line), [`Area`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Area), and [`Column`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Column). The [`WinLoss`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#WinLoss) type of sparkline does not currently accept markers. By default, markers are not displayed, but they can be enabled by setting the corresponding marker visibility property. + +Markers in the sparkline can be placed in any combination of the following locations: + +- `All`: Display markers for all data points in the sparkline. +- `Low`: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value. +- `High`: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value. +- `First`: Display a marker on the first data point in the sparkline. +- `Last`: Display a marker on the last data point in the sparkline. +- `Negative`: Display markers on the negative data points plotted in the sparkline. + +All of the markers mentioned above can be customized using the related marker type's property in aspects of color, visibility, and size. For example, the `Low` markers above will have properties [`lowMarkerBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerBrush), [`lowMarkerVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerVisibility), and [`lowMarkerSize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerSize). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxSparklineModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core'; +import { SparklineProfitDataItem, SparklineProfitData } from './SparklineProfitData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxSparklineComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("firstMarkerVisibilityEditor", { static: true } ) + private firstMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("highMarkerVisibilityEditor", { static: true } ) + private highMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("lowMarkerVisibilityEditor", { static: true } ) + private lowMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("negativeMarkerVisibilityEditor", { static: true } ) + private negativeMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("lastMarkerVisibilityEditor", { static: true } ) + private lastMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("markerVisibilityEditor", { static: true } ) + private markerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxSparklineComponent + private _sparklineProfitData: SparklineProfitData = null; + public get sparklineProfitData(): SparklineProfitData { + if (this._sparklineProfitData == null) + { + this._sparklineProfitData = new SparklineProfitData(); + } + return this._sparklineProfitData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + SparklineDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + + + + + + + + + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Normal Range + +The normal range feature of the Angular Sparkline is a horizontal stripe representing some pre-defined meaningful range when the data is being visualized. The normal range can be set as a shaded area outlined with the desired color. + +The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.sparklinedisplaytype.html#Line) display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range: + +- [`normalRangeVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeVisibility): Whether the normal range is visible. +- [`normalRangeMaximum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeMaximum): The bottom border of the range. +- [`normalRangeMinimum`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeMinimum): The top border of the range. + +By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the [`normalRangeFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeFill) property. + +You can also configure whether to show the normal range in front of or behind the plotted series in your Angular Sparkline by setting the [`displayNormalRangeInFront`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayNormalRangeInFront) property. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxSparklineModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core'; +import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxSparklineComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("normalRangeVisibilityEditor", { static: true } ) + private normalRangeVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("normalRangeMinimumEditor", { static: true } ) + private normalRangeMinimumEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("normalRangeMaximumEditor", { static: true } ) + private normalRangeMaximumEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxSparklineComponent + private _sparklineMixedData: SparklineMixedData = null; + public get sparklineMixedData(): SparklineMixedData { + if (this._sparklineMixedData == null) + { + this._sparklineMixedData = new SparklineMixedData(); + } + return this._sparklineMixedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + SparklineDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + + + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Trendlines + +The Angular Sparkline has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#trendLineType) property. + +The trendlines are calculated according to the algorithm specified by the [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#trendLineType) property using the values of the data the the chart is bound to. + +Trendlines can only be displayed one at a time and by default, the trendline is not displayed. + +The sample below shows all the available trendlines via the dropdown: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxSparklineModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core'; +import { SparklineMixedDataItem, SparklineMixedData } from './SparklineMixedData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxSparklineComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("trendLineTypeEditor", { static: true } ) + private trendLineTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxSparklineComponent + private _sparklineMixedData: SparklineMixedData = null; + public get sparklineMixedData(): SparklineMixedData { + if (this._sparklineMixedData == null) + { + this._sparklineMixedData = new SparklineMixedData(); + } + return this._sparklineMixedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + SparklineDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Unknown Value Interpolation + +The Angular Sparkline can detect unknown values and render the space for unknown values through a specified interpolation algorithm. If your data contains null values and you do not use this feature, meaning no interpolation is specified, the unknown value will not be plotted. + +To plot the unknown values, you can set the [`unknownValuePlotting`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#unknownValuePlotting) property of the Angular Sparkline. The sample below shows the differences between the values of the [`unknownValuePlotting`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#unknownValuePlotting) property, allowing you to toggle it on or off using a checkbox: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxSparklineModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxSparklineModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, SparklineDescriptionModule } from 'igniteui-angular-core'; +import { SparklineUnknownDataItem, SparklineUnknownData } from './SparklineUnknownData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxSparklineComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("unknownValuePlottingEditor", { static: true } ) + private unknownValuePlottingEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxSparklineComponent + private _sparklineUnknownData: SparklineUnknownData = null; + public get sparklineUnknownData(): SparklineUnknownData { + if (this._sparklineUnknownData == null) + { + this._sparklineUnknownData = new SparklineUnknownData(); + } + return this._sparklineUnknownData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + SparklineDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Sparkline in Data Grid + +You can embed the Angular Sparkline in a template column of data grid or other UI controls that support templates. The following code example shows how to do this: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxSparklineModule } from "igniteui-angular-charts"; +import { IgxGridModule } from "igniteui-angular"; +import { Products } from "./Products"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxSparklineModule, + IgxGridModule +], + providers: [Products], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, Injectable, ViewChild } from "@angular/core"; +import { IgxGridComponent } from "igniteui-angular"; +import { BehaviorSubject, Observable } from "rxjs"; +import { Products } from "./Products"; + +@Injectable() +export class LocalService { + public records: Observable; + private _records: BehaviorSubject; + + constructor() { + this._records = new BehaviorSubject([]); + this.records = this._records.asObservable(); + } + + public getData() { + const data = Products.getData(); + this._records.next(data); + } +} + +@Component({ + standalone: false, + providers: [LocalService], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent { + + @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; + public data: Observable; + + constructor(private localService: LocalService) { + this.localService.getData(); + this.data = this.localService.records; + } + + public ngOnInit(): void { + } + + public formatNumber(value: number) { + return value.toFixed(2); + } + + public formatCurrency(value: number) { + return "$" + value.toFixed(2); + } +} +``` +```html +
+ + + + + + + + Order History + + + + + + + + + + + + Return Rate + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Line Chart](line-chart.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`displayNormalRangeInFront`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayNormalRangeInFront) +- [`displayType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#displayType) +- [`lowMarkerBrush`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerBrush) +- [`lowMarkerSize`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerSize) +- [`lowMarkerVisibility`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#lowMarkerVisibility) +- [`normalRangeFill`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#normalRangeFill) +- [`unknownValuePlotting`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html#unknownValuePlotting) +- [`IgxSparklineComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsparklinecomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-spline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-spline-chart.md new file mode 100644 index 000000000..87b65862a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-spline-chart.md @@ -0,0 +1,848 @@ +--- +title: Angular Spline Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Spline Chart +_keywords: Angular Charts, Spline Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XamDataChart", "SplineSeries", "StackedSplineSeries", "Stacked100SplineSeries", "Series", "CategoryChartType"] +_tocName: Spline Chart +_premium: true +--- + +# Angular Spline Chart + +The Ignite UI for Angular Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline. Values are represented on the y-axis and categories are displayed on the x-axis. Spline Chart emphasizes the amount of change over a period of time or compares multiple items as well as the relationship of parts to a whole by displaying the total of the plotted values. Spline Chart is identical to [Line Chart](line-chart.md) in all aspects except that line connecting data points has spline interpolation and smoothing for improved presentation of data. + +## Angular Spline Chart Example + +The following example shows how to create Angular Spline Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Spline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Spline) enum. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Spline Chart with Single Series + +The Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period for Europe, as shown in the example below. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Spline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Spline), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxCategoryChartModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Spline Chart with Multiple Series + +Since the Spline Chart allows you to combine multiple series and compare or see how they change over time. All we need to do is bind to a data source containing the data for China and the USA, and the chart will automatically update to fit the additional data. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Spline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Spline), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Spline Chart Styling + +If you need a Spline Chart with more features such as composite other series, you can configure the markers, marker brushes, marker outlines, series brushes and series outlines as demonstrated below. + +You can create this type of chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Spline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Spline), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Advanced Types of Spline Charts + +The following sections explain more advanced types of Angular Spline Charts that can be created using the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control instead of [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control with simplified API. + +## Angular Stacked Spline Chart + +The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions, as we have shown in the example below. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedSplineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedSplineSeries", { static: true } ) + private stackedSplineSeries: IgxStackedSplineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Spline Chart + +The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100SplineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100SplineSeries", { static: true } ) + private stacked100SplineSeries: IgxStacked100SplineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Line Chart](spline-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +| Chart Type | Control Name | API Members | +| --------------------|--------------------|-------------------------- | +| Spline | [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Spline`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Spline) | +| Stacked Spline | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html) | +| Stacked 100% Spline | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-stacked-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-stacked-chart.md new file mode 100644 index 000000000..3d6953435 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-stacked-chart.md @@ -0,0 +1,2547 @@ +--- +title: Angular Stacked Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Stacked Chart +_keywords: Angular Charts, Stacked Chart, Stacked 100% Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "StackedAreaSeries", "Stacked100AreaSeries", "StackedBarSeries", "Stacked100BarSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "StackedLineSeries", "Stacked100LineSeries", "StackedSplineSeries", "Stacked100SplineSeries", "StackedSplineAreaSeries", "Stacked100SplineAreaSeries", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Stacked Chart +_premium: true +--- + +# Angular Stacked Chart + +The Ignite UI for Angular Stacked Chart belongs to a special group of charts that render multiple values of data items as stacked area/polygons, bars, columns, lines, or splines. Standard Stacked Charts render actual values of data items while Stacked 100% Charts render values as percentage of total values. + +## Angular Stacked Chart Types + +The following example, you can use the drop-down to switch between all of the different types stacked charts available in the Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxLegendModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from "igniteui-angular-charts"; +import { SharedData } from "./SharedData"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxLegendModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [SharedData], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxCategoryXAxisComponent } from "igniteui-angular-charts"; +import { IgxCategoryYAxisComponent } from "igniteui-angular-charts"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxStacked100AreaSeriesComponent } from "igniteui-angular-charts"; +import { IgxStacked100BarSeriesComponent } from "igniteui-angular-charts"; +import { IgxStacked100ColumnSeriesComponent } from "igniteui-angular-charts"; +import { IgxStacked100LineSeriesComponent } from "igniteui-angular-charts"; +import { IgxStacked100SplineSeriesComponent } from "igniteui-angular-charts"; +import { IgxStackedAreaSeriesComponent } from "igniteui-angular-charts"; +import { IgxStackedBarSeriesComponent } from "igniteui-angular-charts"; +import { IgxStackedColumnSeriesComponent } from "igniteui-angular-charts"; +import { IgxStackedFragmentSeriesComponent } from "igniteui-angular-charts"; +import { IgxStackedLineSeriesComponent } from "igniteui-angular-charts"; +import { IgxStackedSplineSeriesComponent } from "igniteui-angular-charts"; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + public data: any[]; + + public catXAxis: IgxCategoryXAxisComponent; + public numYAxis: IgxNumericYAxisComponent; + + public catYAxis: IgxCategoryYAxisComponent; + public numXAxis: IgxNumericXAxisComponent; + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + + constructor() { + this.catXAxis = new IgxCategoryXAxisComponent(); + this.catXAxis.label = "Year"; + + this.catYAxis = new IgxCategoryYAxisComponent(); + this.catYAxis.label = "Year"; + + this.numXAxis = new IgxNumericXAxisComponent(); + this.numYAxis = new IgxNumericYAxisComponent(); + + this.initData(); + } + + public ngOnInit() { + this.setSeries("Stacked Column"); + } + + public getFragments(): IgxStackedFragmentSeriesComponent[] { + const fragment1 = new IgxStackedFragmentSeriesComponent(); + fragment1.valueMemberPath = "USA"; + fragment1.title = "USA"; + const fragment2 = new IgxStackedFragmentSeriesComponent(); + fragment2.valueMemberPath = "Europe"; + fragment2.title = "Europe"; + const fragment3 = new IgxStackedFragmentSeriesComponent(); + fragment3.valueMemberPath = "China"; + fragment3.title = "China"; + + const fragments: IgxStackedFragmentSeriesComponent[] = []; + fragments.push(fragment1); + fragments.push(fragment2); + fragments.push(fragment3); + return fragments; + } + + public onSeriesTypeChanged(e: any) { + const selectedSeries = e.target.value.toString(); + this.chart.series.clear(); + this.setSeries(selectedSeries); + } + + public setSeries(seriesType: string) { + + this.chart.axes.clear(); + this.chart.series.clear(); + + const fragments = this.getFragments(); + + if (seriesType === "Stacked Column") { + const stack = new IgxStackedColumnSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked 100 Column") { + const stack = new IgxStacked100ColumnSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked Area") { + const stack = new IgxStackedAreaSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked 100 Area") { + const stack = new IgxStacked100AreaSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked Line") { + const stack = new IgxStackedLineSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked 100 Line") { + const stack = new IgxStacked100LineSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked Spline") { + const stack = new IgxStackedSplineSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked 100 Spline") { + const stack = new IgxStacked100SplineSeriesComponent(); + stack.xAxis = this.catXAxis; + stack.yAxis = this.numYAxis; + this.chart.axes.add(this.catXAxis); + this.chart.axes.add(this.numYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked Bar") { + const stack = new IgxStackedBarSeriesComponent(); + stack.xAxis = this.numXAxis; + stack.yAxis = this.catYAxis; + this.chart.axes.add(this.numXAxis); + this.chart.axes.add(this.catYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + this.chart.series.add(stack); + + } else if (seriesType === "Stacked 100 Bar") { + const stack = new IgxStacked100BarSeriesComponent(); + stack.xAxis = this.numXAxis; + stack.yAxis = this.catYAxis; + this.chart.axes.add(this.numXAxis); + this.chart.axes.add(this.catYAxis); + for (const frag of fragments) { + stack.series.add(frag); + } + + this.chart.series.add(stack); + } + } + + public initData() { + + this.data = [ + { Year: "2011", USA: 14, Europe: 65, China: 30 }, + { Year: "2012", USA: 16, Europe: 75, China: 40 }, + { Year: "2013", USA: 17, Europe: 80, China: 50 }, + { Year: "2014", USA: 30, Europe: 40, China: 45 }, + { Year: "2015", USA: 20, Europe: 80, China: 50 }, + { Year: "2016", USA: 50, Europe: 55, China: 90 }, + { Year: "2017", USA: 50, Europe: 80, China: 130 }, + { Year: "2018", USA: 65, Europe: 50, China: 135 }, + { Year: "2019", USA: 80, Europe: 90, China: 150 }, + { Year: "2020", USA: 115, Europe: 70, China: 175 }, + { Year: "2021", USA: 150, Europe: 90, China: 195 } + ]; + } +} +``` +```html +
+
+ Electricity Production from Renewables +
+ +
+
+
+ + +
+
+
+ +
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts. + +## Angular Stacked Area Chart + +Stacked Area Charts are rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as [Area Chart](area-chart.md), with the only difference being that visually, the shaded areas are stacked on top of each other. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedAreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedAreaSeries", { static: true } ) + private stackedAreaSeries: IgxStackedAreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100 Area Chart + +Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100AreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100AreaSeries", { static: true } ) + private stacked100AreaSeries: IgxStacked100AreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Bar Chart + +A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value. + +The Stacked Bar Chart differs from the [Bar Chart](bar-chart.md) in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis. + +In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule, IgxCalloutLayerModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule, + IgxCalloutLayerModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStackedBarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("stackedBarSeries", { static: true } ) + private stackedBarSeries: IgxStackedBarSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Energy Consumption +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Bar Chart + +The Angular Stacked 100% Bar Chart is identical to the Angular stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point. + +In this example of a Stacked 100% Bar Chart, the Energy Product values are shown as a 100% value of all of the data in the fragments of the horizontal bars. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStacked100BarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + @ViewChild("stacked100BarSeries", { static: true } ) + private stacked100BarSeries: IgxStacked100BarSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Energy Consumption +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Column Chart + +The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis). + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedColumnSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedColumnSeries", { static: true } ) + private stackedColumnSeries: IgxStackedColumnSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Column Chart + +The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point. + +The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { OnlineTrafficByDeviceItem, OnlineTrafficByDevice } from './OnlineTrafficByDevice'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100ColumnSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100ColumnSeries", { static: true } ) + private stacked100ColumnSeries: IgxStacked100ColumnSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _onlineTrafficByDevice: OnlineTrafficByDevice = null; + public get onlineTrafficByDevice(): OnlineTrafficByDevice { + if (this._onlineTrafficByDevice == null) + { + this._onlineTrafficByDevice = new OnlineTrafficByDevice(); + } + return this._onlineTrafficByDevice; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Distribution of Online Traffic Worldwide, by Device +
+
+ + +
+
+ + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Line Chart + +The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedLineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedLineSeries", { static: true } ) + private stackedLineSeries: IgxStackedLineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Line Chart + +The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html), as shown in the example below: + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100LineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100LineSeries", { static: true } ) + private stacked100LineSeries: IgxStacked100LineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Spline Area Chart + +Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](area-chart.md), with the only difference being that the visually shaded areas are stacked on top of each other. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedSplineAreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedSplineAreaSeries", { static: true } ) + private stackedSplineAreaSeries: IgxStackedSplineAreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Spline Area Chart + +The Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100SplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100SplineAreaSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100SplineAreaSeries", { static: true } ) + private stacked100SplineAreaSeries: IgxStacked100SplineAreaSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked Spline Chart + +The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html), as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStackedSplineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stackedSplineSeries", { static: true } ) + private stackedSplineSeries: IgxStackedSplineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stacked 100% Spline Chart + +The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. + +You can create this type of chart in the [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control by binding your data to a [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule, + IgxDataChartStackedModule, + IgxStackedFragmentSeriesModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate'; +import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxStacked100SplineSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("stacked100SplineSeries", { static: true } ) + private stacked100SplineSeries: IgxStacked100SplineSeriesComponent + @ViewChild("s1", { static: true } ) + private s1: IgxStackedFragmentSeriesComponent + @ViewChild("s2", { static: true } ) + private s2: IgxStackedFragmentSeriesComponent + @ViewChild("s3", { static: true } ) + private s3: IgxStackedFragmentSeriesComponent + @ViewChild("s4", { static: true } ) + private s4: IgxStackedFragmentSeriesComponent + @ViewChild("s5", { static: true } ) + private s5: IgxStackedFragmentSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _continentsBirthRate: ContinentsBirthRate = null; + public get continentsBirthRate(): ContinentsBirthRate { + if (this._continentsBirthRate == null) + { + this._continentsBirthRate = new ContinentsBirthRate(); + } + return this._continentsBirthRate; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Annual Birth Rates by World Region +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Bar Chart](bar-chart.md) +- [Column Chart](column-chart.md) +- [Line Chart](line-chart.md) +- [Spline Chart](spline-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +| Chart Type | Control Name | API Members | +| -------------------------|----------------|-------------------------------- | +| Stacked Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html) | +| Stacked Bar | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html) | +| Stacked Column | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html) | +| Stacked Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | +| Stacked Spline | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html) | +| Stacked Spline Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineareaseriescomponent.html) | +| Stacked 100% Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html) | +| Stacked 100% Bar | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html) | +| Stacked 100% Column | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html) | +| Stacked 100% Line | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html) | +| Stacked 100% Spline | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html) | +| Stacked 100% Spline Area | [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStacked100SplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineareaseriescomponent.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-step-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-step-chart.md new file mode 100644 index 000000000..54a309ed3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-step-chart.md @@ -0,0 +1,380 @@ +--- +title: Angular Step Chart | Data Visualization | Infragistics +_description: Infragistics' Angular Step Chart +_keywords: Angular Charts, Step Chart, Step Area Chart, Step Line Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "CategoryChartType", "Series", "CategoryChartType"] +namespace: Infragistics.Controls.Charts +_tocName: Step Chart +_premium: true +--- + +# Angular Step Chart + +The Ignite UI for Angular Step Chart belongs to a group of category charts that render as a collection of points connected by continuous vertical and horizontal lines. Values are represented on the y-axis and categories are displayed on the x-axis. Step Chart emphasizes the amount of change over a period of time or compares multiple items. + +## Angular Step Area Chart + +You can create Angular Step Area Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`StepArea`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepArea) enum, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Step Line Chart + +The Angular Step Line Chart is very similar to Step Area Chart, except that the area below lines are filled in. + +You can create Step Line Chart in the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control by binding your data and setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`StepLine`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepLine) value, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Step Chart Styling + +If you need Step Charts with more features such as composite other series, you can configure the [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes), [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes), [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines), lines' [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes), and lines' [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines) properties on the [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) control as demonstrated below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxCategoryChartModule, + IgxDataChartInteractivityModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Renewable Electricity Generated +
+
+ + +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Line Chart](line-chart.md) +- [Chart Markers](../features/chart-markers.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +- [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) +- [`StepArea`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepArea) +- [`StepLine`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#StepLine) +- [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes) +- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines) +- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes) +- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines) +- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-stock-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-stock-chart.md new file mode 100644 index 000000000..269e1af38 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-stock-chart.md @@ -0,0 +1,718 @@ +--- +title: Angular Stock/Financial Charts | Ignite UI for Angular +_description: The Ignite UI for Angular Stock Chart is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. Try for FREE. +_keywords: Angular Charts, Stock Chart, Financial Chart, Candlestick Chart, OHLC Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series", "FinancialChartType"] +namespace: Infragistics.Controls.Charts +_tocName: Financial / Stock Chart +_premium: true +--- + +# Angular Stock Chart + +The Ignite UI for Angular Stock Chart, sometimes referred to as Angular Financial Chart or Candlestick Chart, is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. Stock Chart shows stock prices for a ticker over time in a Time Series X-Axis. Also, this chart shows information for a company’s ticker data like Open Price, High Price, Low Price and Close Price (OHLC) for configurable period of time. The Stock Chart offers multiple ways in which the data can be visualized and interpreted, including display modes for price and volume and a host of Stock indicators. + +## Angular Stock Chart Example + +You can create Stock Chart using the [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control by binding your data and optionally setting [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialcharttype.html#Line) value, as shown in the example below. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ FinancialDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + public data: any; + constructor(private dataService: FinancialDataService) { + this.data = [ this.dataService.getGoog(), this.dataService.getMsft() ]; + } +} +``` +```html +
+
+ +
+ + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Stock Chart Recommendations + +### Are Angular Stock Charts right for your project? + +The typical stock chart is represented with ticker data in a candlestick chart which is used for the technical analysis of the price ranges. A candlestick chart compares the high and low prices of a day to the open and close of the ticker symbol. + +- The body of the candlestick chart shows the open and close trade values (O/C). +- The wicks of the candlestick chart show the high and low trade prices (H/L). +- The distance between the top and bottom of the ticker value is the day range of the ticker price. +- The candlestick chart ticker value is hollow when the asset closed higher than it opened. +- The candlestick chart ticker value is filled when the asset closed lower than it opened. +- A black or red candle represents a price with a lower closing price than the prior candle's close. +- A white or green candle represents a higher closing price than the prior candle's close. + +The Stock Chart can be set to display one of the following: + +- Candlestick Chart +- Bar Chart +- Column Chart +- Line Chart + +As a Stock Chart is meant to allow the user to perform data analysis functions, it includes interactive elements such as: + +- Time-based Filters +- Prices View +- Volume View +- Indicators View +- Trend Lines +- Navigation / Zoombar View + +### Stock Chart Data Structure + +- The data source must be an array or a list of data items. +- The data source must contain at least one data item. +- All data items must contain at least one date-time (or string) column that represents the date of the ticker data. +- All data items must contain 1 numeric column for Bar, Line, and Column chart. +- All data items must contain 4 numeric columns for Open, High, Low, Close (OHLC) for a Candlestick chart. +- All data items must contain 5 numeric columns for Open, High, Low, Close and Volume for a Candlestick chart. + +## Angular Stock Chart with Multiple Series + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ FinancialDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + public data: any; + constructor(private dataService: FinancialDataService) { + this.data = [ this.dataService.getGoog(), this.dataService.getMsft() ]; + } +} +``` +```html +
+
+ +
+ + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stock Chart + +In this example the Stock Chart is representing the S\&P 500 over the course of a year; useful for investors and conducting technical analysis and forecasting future pricing/reports. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { StockIndexDataService } from "./StockIndexDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [StockIndexDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { StockIndexDataService } from "./StockIndexDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ StockIndexDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + public stocksData: any; + + constructor(private dataService: StockIndexDataService) { + this.stocksData = [ + this.dataService.getData() + ]; + } +} +``` +```html +
+
+ +
+ + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Stock Chart Styling + +If you need a Stock Chart with more features such as composite other series, you can configure the thickness, outlines, brushes, negative outlines, negative brushes as demonstrated below. In this example, the stock chart is comparing revenue between Amazon, Microsoft and Tesla. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { FinancialDataService } from "./FinancialDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [FinancialDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FinancialDataService } from "./FinancialDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ FinancialDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + public data: any; + constructor(private dataService: FinancialDataService) { + this.data = [ this.dataService.getAmzn(), this.dataService.getMsft() ]; + } +} +``` +```html +
+
+ +
+ + + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Chart Annotations + +The Crosshair Annotation Layer provides crossing lines that meet at the actual value of every targeted series. Crosshair types include: Horizontal, Vertical, and Both. The Crosshairs can also be configured to snap to data points by setting the [`crosshairsSnapToData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis. + +The Final Value Layer provides a quick view along the axis of the ending value displayed in a series. + +The Callout Layer displays a callout at X/Y positions. + +Note: When using the ordinal X axis mode, the CalloutsXMemberPath should point to the numeric index of the item, otherwise CalloutsXMemberPath should point to the time value. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { StocksUtility } from "./StocksUtility"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [StocksUtility], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ViewChild, ChangeDetectionStrategy, Component } from "@angular/core"; +import { IgxFinancialChartComponent } from "igniteui-angular-charts"; +import { StocksUtility } from "./StocksUtility"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ StocksUtility ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + @ViewChild("financialChart", { static: true }) + public chart: IgxFinancialChartComponent; + public stocksData: any; + public calloutsData: any[]; + public options: SampleOptions = new SampleOptions(); + public excludedProperties: any; + + constructor(private dataService: StocksUtility) { + + const today = new Date() + const year = today.getFullYear(); + const dateMonth = today.getMonth(); + const dateEnd = new Date(year + 5, dateMonth, 1); + const dateStart = new Date(year - 1, dateMonth, 1); + + this.stocksData = [ + this.dataService = StocksUtility.GetStocksBetween(dateStart, dateEnd) + ]; + + this.calloutsData = this.getCallouts(this.stocksData); + } + + public ngAfterViewInit(): void { + // binding only properties with "stack" prefix + this.chart.excludedProperties = [ "info", "label", "value" ]; + } + + public getCallouts(stocks: any[]): any[] { + const callouts: any[] = []; + for (const stock of stocks) { + const intervalSplit = Math.floor(Math.random() * (300 - 280)) + 280; + const intervalDiv = Math.floor(Math.random() * (400 - 360)) + 360; + const calloutMin = new CalloutDataItem({ label: "MIN"}); + const calloutMax = new CalloutDataItem({ label: "MAX"}); + // initalizing values for min/max callouts + calloutMin.value = Number.MAX_VALUE; + calloutMax.value = Number.MIN_VALUE; + let idx: number = 0; + + for (const item of stock) { + // finding item with min/max price + if (calloutMin.value > item.close) { + calloutMin.value = item.close; + calloutMin.index = idx; + } + if (calloutMax.value < item.close) { + calloutMax.value = item.close; + calloutMax.index = idx; + } + const offset = idx + 10; + const calloutEvent = new CalloutDataItem({ index: idx }); + // creating SPLIT/DIVIDEND events at specific intervals + if (offset % intervalSplit === 5) { + calloutEvent.value = item.close; + calloutEvent.label = "SPLIT"; + callouts.push(calloutEvent); + } else if (offset % intervalDiv === 5) { + calloutEvent.value = item.close; + calloutEvent.label = "DIV"; + callouts.push(calloutEvent); + } + + idx++; + } + callouts.push(calloutMin); + callouts.push(calloutMax); + } + return callouts; + } +} + +class CalloutDataItem { + public label: string; + public index: number; + public value: number; + + public constructor(init?: Partial) { + Object.assign(this, init); + } +} + +class SampleOptions { + public crosshairAnnotations: string = "Both"; + public finalValueAnnotations: boolean = true; + public calloutsVisible: boolean = true; + public itemToolTip: string = "Item"; + public markerTypes: string = "None"; +} +``` +```html +
+
+ + + + + + + + + +
+
+ + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Angular Chart Panes + +The following panes are available: + +- Price Pane - Renders prices using Line, Candlestick, Bar (OHLC), trendlines and financial overlays. +- Indicator Pane - Renders all the financial indicators in a separate chart while the BollingerBands and PriceChannel overlays are rendered in the Price Pane because they share the same values range on Y-Axis. +- Volume Pane - Renders stocks volumes using Column, Line, and Area chart types below all above panes. +- Zoom Pane - Controls the zoom of all the panes and it is always rendered at bottom of the chart. + +### Indicator Pane + +Financial Indicators are often used by traders to measure changes and to show trends in stock prices. These indicators are usually displayed below the price pane because they do not share the same Y-Axis scale. + +By default the indicator panes are not displayed. The toolbar allows the end user to select which indicator to display at run time. +In order to display an indicator pane initially, the [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) property must be set to a least one type of indicator, as demonstrated in the following code: + +### Volume Pane + +The volume pane represents the number of shares traded during a given period. Low volume would indicate little interest, while high volume would indicate high interest with a lot of trades. This can be displayed using column, line or area chart types. The toolbar allows the end user to display the volume pane by selecting a chart type to render the data at runtime. In order the display the pane, a volume type must be set, as demonstrated in the following code: + +### Price Pane + +This pane displays stock prices and shows the stock's high, low, open and close prices over time. In addition it can display trend lines and overlays. Your end user can choose different chart types from the toolbar. By default, the chart type is set to [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialcharttype.html#Auto). You can override the default setting, as demonstrated in the following code: + +Note that is recommended to use line chart type if plotting multiple data sources or if plotting data source with a lot of data points. + +### Zoom Pane + +This pane controls the zoom of all the displayed panes. This pane is displayed by default. It can be turned off by setting the [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) to `none` as demonstrated in the following code: + +Note that you should set the [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) option to the same value as the [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this: + +In this example, the stock chart is plotting revenue for United States. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxFinancialChartModule, IgxLegendModule } from "igniteui-angular-charts"; +import { StockDataService } from "./StockDataService"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxFinancialChartModule, + IgxLegendModule +], + providers: [StockDataService], +schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core"; +import { FinancialChartType } from "igniteui-angular-charts"; +import { FinancialChartVolumeType } from "igniteui-angular-charts"; +import { FinancialChartZoomSliderType } from "igniteui-angular-charts"; +import { FinancialIndicatorType } from "igniteui-angular-charts"; +import { FinancialOverlayType } from "igniteui-angular-charts"; +import { IgxFinancialChartComponent } from "igniteui-angular-charts"; +import { IgxFinancialIndicatorTypeCollection } from "igniteui-angular-charts"; +import { IgxFinancialOverlayTypeCollection } from "igniteui-angular-charts"; +import { StockDataService } from "./StockDataService"; + +@Component({ + standalone: false, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ StockDataService ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) + +export class AppComponent implements AfterViewInit { + + public data: any[]; + @ViewChild("chart", { static: true }) + public chart: IgxFinancialChartComponent; + + constructor(private dataService: StockDataService) { + this.data = this.dataService.GetStockTSLA(); + + } + + public ngAfterViewInit(): void { + + this.chart.chartType = FinancialChartType.Candle; + this.chart.zoomSliderType = FinancialChartZoomSliderType.Candle; + this.chart.volumeType = FinancialChartVolumeType.Area; + this.chart.indicatorTypes.add(FinancialIndicatorType.ForceIndex); + this.chart.overlayTypes.add(FinancialOverlayType.PriceChannel); + } +} +``` +```html +
+ + +
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Animations](../features/chart-animations.md) +- [Chart Annotations](../features/chart-annotations.md) +- [Chart Navigation](../features/chart-navigation.md) +- [Chart Trendlines](../features/chart-trendlines.md) +- [Chart Performance](../features/chart-performance.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) +- [`crosshairsSnapToData`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsSnapToData) +- `ItemsSource` +- [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) +- [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes) +- [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-treemap-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-treemap-chart.md new file mode 100644 index 000000000..1087825ae --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/types-treemap-chart.md @@ -0,0 +1,817 @@ +--- +title: Angular Treemap | Data Visualization Tools | Orientation | Layout | Data Binding | Infragistics +_description: Use Infragistics' Angular Treemap control show relative weighting of data points at more than one level supporting strip, squarified, and slice-and-dice algorithms. Learn about Ignite UI for Angular treemap! +_keywords: Angular Tree Map, Treemap, layout, orientation, Ignite UI for Angular, Infragistics +_license: commercial +mentionedTypes: ["Treemap", "TreemapOrientation", "TreemapLayoutType", "TreemapHighlightingMode", "TreemapHighlightedValueDisplayMode"] +namespace: Infragistics.Controls.Charts +_tocName: Treemap +_premium: true +--- + +# Angular Treemap + +The Ignite UI for Angular Treemap chart displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node’s rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data. + +## Angular Treemap Example + +In the following example, the [`IgxTreemapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html) demonstrates the 30 largest countries in the world by total area. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxTreemapModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxTreemapModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData'; +import { IgxTreemapComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("treemap", { static: true } ) + private treemap: IgxTreemapComponent + private _countyHierarchicalData: CountyHierarchicalData = null; + public get countyHierarchicalData(): CountyHierarchicalData { + if (this._countyHierarchicalData == null) + { + this._countyHierarchicalData = new CountyHierarchicalData(); + } + return this._countyHierarchicalData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Comparing Population of Countries +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Treemap Recommendations + +### Are Angular Treemaps right for your project? + +When the color and size dimensions are correlated in some way with the tree structure, one can often easily see patterns that would be difficult to spot in other ways. A second advantage of treemaps is that, by construction, they make efficient use of space. As a result, they can legibly display thousands of items on the screen simultaneously. + +- Treemaps are more effective than pie charts and other forms of area charts that often do a poor job of classifying data points and communicating the relative differences of their values. +- Treemaps are designed for drill down scenarios. You can continuously drill down into the data set that is represented by smaller rectangles for more efficient data analysis. +- Treemaps are not designed to convey numerical quantities; the intent is to show relative rankings. + +Like any other data visualization, a Treemap chart visualization should be used in specific scenarios. It does not solve the same problem that a visualization like a Bar Chart or a Line Chart would. It is really meant for a more complex, richer data display. + +### Treemap Use Cases + +There are several common use cases for choosing a Treemap. When you: + +- Have drill-down hierarchical data (data organized as a tree, with branches and sub-branches). +- Want to illustrate hierarchies of relative weight and comparative values between categories (branches) and subcategories (sub-branches). +- Want to display large data sets that need a compact, space-efficient visualization. +- Want to deliver at-a-glance, quick data analysis without precise values. The relative size of the rectangles help identify patterns and/or outliers very quickly. +- Want to make efficient use of space. Treemaps can legibly display thousands of items on the screen simultaneously. + +### When not to Use a Treemap + +- You are telling a data story that requires precise values +- You have negative data values +- You have flat, non-hierarchical data +- Your data is similar in size + +### Treemap Data Structure + +- The data source must be an array or a list of data items +- The data source must contain at least one data item otherwise the map will not render any nodes. +- All data items must contain at least one data column (e.g. string) which should be mapped to the [`labelMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#labelMemberPath) property. +- All data items must contain at least one numeric data column which should be mapped using the [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#valueMemberPath) property. +- To categorize data into organized tiles you can optionally use [`parentIdMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#parentIdMemberPath) and [`idMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#idMemberPath). + +## Angular Treemap Configuration + +In the following example, the treemap demonstrates the ability of changing it's algorithmic structure by modifying the [`layoutType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#layoutType) and [`layoutOrientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#layoutOrientation) properties. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxTreemapModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxTreemapModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescriptionModule } from 'igniteui-angular-core'; +import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxTreemapComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditorPanel1", { static: true } ) + private propertyEditorPanel1: IgxPropertyEditorPanelComponent + @ViewChild("layoutTypeEditor", { static: true } ) + private layoutTypeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("layoutOrientationEditor", { static: true } ) + private layoutOrientationEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("headerDisplayModeEditor", { static: true } ) + private headerDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("labelVerticalAlignmentEditor", { static: true } ) + private labelVerticalAlignmentEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("treemap", { static: true } ) + private treemap: IgxTreemapComponent + private _countyHierarchicalData: CountyHierarchicalData = null; + public get countyHierarchicalData(): CountyHierarchicalData { + if (this._countyHierarchicalData == null) + { + this._countyHierarchicalData = new CountyHierarchicalData(); + } + return this._countyHierarchicalData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + TreemapDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + + + + + + + +
+
+ Comparing Population of Countries +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +### Layout Types + +The Treemap chart displays the relative weight of data. It uses a variety of algorithms to help it determine how the layout of its data items should occur: + +- `SliceAndDiced` - layout algorithm aims to preserve the initial order at the expense of the aspect ratio. +- `Squarified` - layout tiling algorithm has a better aspect ratio than the `SliceAndDice` and keeps a better order than Squarified. +- `Stripped` - layout type algorithm obtains the best aspect ratio but the objects are arranged by size. + +The Treemap allows you to choose the algorithm that is best for your requirements, defaulting to use the Squarified method. It also includes the ability to allow you to colorize nodes using two mechanisms: + +- A group-based mechanism that colors items with like values +- A scale-based mechanism similar to a map choropleth, which maps node colors based on their value. + +### Layout Orientation + +[`layoutOrientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#layoutOrientation) property enables the user to set the direction in which the nodes of the hierarchy will be expanded. + +Note that the [`layoutOrientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#layoutOrientation) property works with the layout types SliceAndDice and Strip. + +- `Horizontal` – the child nodes are going to be stacked horizontally(SliceAndDice). +- `Vertical` – the child nodes are going to be stacked vertically (SliceAndDice). + +## Angular Treemap Styling + +In the following example, the treemap demonstrates the ability of changing the look and feel of the nodes achieved by styling through the `NodeStylingScript` event. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxTreemapModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxTreemapModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData'; +import { IgxTreemapComponent, IgxTreemapNodeStyleMappingComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("treemap", { static: true } ) + private treemap: IgxTreemapComponent + @ViewChild("styling1", { static: true } ) + private styling1: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling2", { static: true } ) + private styling2: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling3", { static: true } ) + private styling3: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling4", { static: true } ) + private styling4: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling5", { static: true } ) + private styling5: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling6", { static: true } ) + private styling6: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling7", { static: true } ) + private styling7: IgxTreemapNodeStyleMappingComponent + @ViewChild("styling8", { static: true } ) + private styling8: IgxTreemapNodeStyleMappingComponent + private _countyHierarchicalData: CountyHierarchicalData = null; + public get countyHierarchicalData(): CountyHierarchicalData { + if (this._countyHierarchicalData == null) + { + this._countyHierarchicalData = new CountyHierarchicalData(); + } + return this._countyHierarchicalData; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Comparing Population of Countries +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +### Angular Treemap Highlighting + +In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightingMode)to Brighten or FadeOthers. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxTreemapModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxTreemapModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescriptionModule } from 'igniteui-angular-core'; +import { CountyHierarchicalDataItem, CountyHierarchicalData } from './CountyHierarchicalData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxTreemapComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("highlightedModeEditor", { static: true } ) + private highlightedModeEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("treemap", { static: true } ) + private treemap: IgxTreemapComponent + private _countyHierarchicalData: CountyHierarchicalData = null; + public get countyHierarchicalData(): CountyHierarchicalData { + if (this._countyHierarchicalData == null) + { + this._countyHierarchicalData = new CountyHierarchicalData(); + } + return this._countyHierarchicalData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + TreemapDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ + + + +
+
+ Comparing Population of Countries +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +## Angular Treemap Percent based highlighting + +- [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightedDataSource): Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. +- [`highlightedValueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightedValueMemberPath): Specifies the name of the property in the datasource where the highlighted values are read. +- [`highlightedValueOpacity`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightedValueOpacity): Controls the opacity of the normal value behind the highlighted value. +- [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightedValuesDisplayMode): Enables or disables highlighted values. + - Auto: The treemap decides what mode to use. + - Overlay: The treemap displays highlighted values over top the normal value with a slight opacity applied to the normal value. + - Hidden: The treemap does not show highlighted values. + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxTreemapModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxTreemapModule +], + providers: [], + schemas: [] +}) +export class AppModule {} +``` +```typescript +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, TreemapDescriptionModule } from 'igniteui-angular-core'; +import { CountryTopUrbanPopDataItem, CountryTopUrbanPopData } from './CountryTopUrbanPopData'; +import { IgxTreemapComponent } from 'igniteui-angular-charts'; + +@Component({ + standalone: false, + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("treemap", { static: true } ) + private treemap: IgxTreemapComponent + private _countryTopUrbanPopData: CountryTopUrbanPopData = null; + public get countryTopUrbanPopData(): CountryTopUrbanPopData { + if (this._countryTopUrbanPopData == null) + { + this._countryTopUrbanPopData = new CountryTopUrbanPopData(); + } + return this._countryTopUrbanPopData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + TreemapDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} +``` +```html +
+
+ Comparing Top Urban Population Percentages between North America & Asia +
+
+ + +
+
+``` +```scss +/* styles are loaded the Shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v8.css +*/ +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Shape Chart](shape-chart.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxTreemapComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html) +- [`layoutOrientation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#layoutOrientation) +- [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightedValuesDisplayMode) +- [`highlightedValueMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#highlightedValueMemberPath) +- [`layoutType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtreemapcomponent.html#layoutType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-angular-events.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-angular-events.md new file mode 100644 index 000000000..34493f8fc --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-angular-events.md @@ -0,0 +1,152 @@ +--- +title: Handling Angular Events | Event Binding | WPF to Angular Guide | Infragistics +_description: Learn about Angular event binding and how to create your own Angular custom events. See how Angular uses DOM events to do this and handles user inputs. +_keywords: handling angular events, ignite ui for angular, infragistics +_tocName: Angular Events +--- + +# Handling Angular Events + +> [!Video https://www.youtube.com/embed/V1Futz4W400] + +The Angular events are emitted as a response to user interactions. When an Angular event is emitted, its event handling logic is executed. WPF provides routed events, CLR events, and commands. While in Angular, there are DOM events. + +Here is a simple example how you respond to a click event of a button in WPF: + +```xml + +``` + +```csharp +private void Button_Click(object sender, RoutedEventArgs e) +{ + Console.WriteLine("Hello World"); +} +``` + +The same thing in Angular would look like this: + +```html + +``` + +```typescript +onClicked() { + console.log('Hello World'); +} +``` + +In WPF we are used to getting information about the event, such as the sender and the event arguments. In Angular we can use the `$event` variable. This variable will provide information about the event that was invoked. + +```html + +``` + +```typescript +onClicked(event) { + console.log(event.target); +} +``` + +Sometimes passing the event object might not be very useful. Instead, you may want to pass the value of an `input` on the page. + +```html + + +``` + +```typescript +onClicked(message) { + console.log(message); +} +``` + +Let's say that we want to print the value of an input on pressing Enter. You could do that in Angular like this: + +```html + +``` + +```typescript +onInputKeyup(event, message) { + if (event.keyCode === 13) { + console.log(message); + } +} +``` + +Surprisingly, in Angular, there is an even easier way to do that. You could bind to the `keyup.enter` pseudo-event. Using this approach, the event handler will be called only when the user presses Enter. + +```html + +``` + +```typescript +onInputKeyup(message) { + console.log(message); +} +``` + +## Responding to Events of a Component + +In WPF, when you create your own custom controls, often you need to extend or modify some base events like this: + +```csharp +public class MyControl : Control +{ + protected override void OnMouseDown(MouseButtonEventArgs e) + { + base.OnMouseDown(e); + // Place your custom logic here + } +} +``` + +In Angular, you achieve a similar result using the [HostListener](https://angular.io/api/core/HostListener) decorator. + +```typescript +@Component({ + selector: 'app-my-component', + templateUrl: './my.component.html', + styleUrls: ['./my.component.css'] +}) +export class MyComponent { + @HostListener('mousedown', ['$event']) + onMouseDown(event) { + // place your custom logic here + } +} +``` + +## Create Your Own Events + +Sometimes you need to define your own events. In WPF you could define either CLR or routed events. Let's take a look at a simple example of a CLR event in WPF: + +```csharp +public event EventHandler TaskCompleted; + +... +this.TaskCompleted(this, new TaskEventArgs()); +``` + +In order to define a custom event in Angular, you have to define an [EventEmitter](https://angular.io/api/core/EventEmitter) property marked with the [Output](https://angular.io/api/core/Output) decorator. + +```typescript +@Output() +taskCompleted = new EventEmitter(); + +... +this.taskCompleted.emit(new TaskEventArgs()); +``` + +## Additional Resources + +- [Desktop to Web: Responding to Events with Angular Event Binding](https://www.youtube.com/watch?v=V1Futz4W400&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=6) +- [Angular User Input](https://angular.io/guide/user-input) +- [Component Interaction: Parent listens for child events](https://angular.io/guide/component-interaction#parent-listens-for-child-event) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-angular-pipes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-angular-pipes.md new file mode 100644 index 000000000..9e0d6d3e2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-angular-pipes.md @@ -0,0 +1,101 @@ +--- +title: Transform Data with Angular Pipes | WPF to Angular Guide | Infragistics +_description: Learn how Angular pipes can transform data from one value to another like wpf converters. Angular provides predefined pipes for common data transformations. +_keywords: transform data with angular pipes, ignite ui for angular, infragistics +_tocName: Transforming Data with Angular Pipes +--- + +# Transform Data with Angular Pipes + +> [!Video https://www.youtube.com/embed/Gmz5kio50FE] + +You can use the Angular pipes to transform data from one value to another. This technic is similar to WPF converters. + +In WPF in order to transform data from one value to another, you are going to use an [IValueConverter](https://docs.microsoft.com/en-us/dotnet/api/system.windows.data.ivalueconverter?view=netframework-4.8). To transform data in an Angular application, we are going to use a [Pipe](https://angular.io/api/core/Pipe). The pipe is very similar to the WPF converter. It takes data as an input and then transforms that data into a desired output for display. + +Angular provides a number of predefined pipes for the most common data transformations. For example, if you want a header text to appear in upper case, you could use the [UpperCasePipe](https://angular.io/api/common/UpperCasePipe). Using a pipe is very simple. After your expression, provide a pipe operator `|` followed by the pipe name. + +```html +

{{ header | uppercase }}

+``` + +What is really great about the pipes in Angular compared to a WPF converter is that you can actually use more than one pipe at a time. So, for example you can use a [DatePipe](https://angular.io/api/common/DatePipe) and [UpperCasePipe](https://angular.io/api/common/UpperCasePipe) in order to format the date to a user-friendly format and make it uppercase: + +```html +

{{ birthday | date | uppercase }}

+``` + +Besides that, we also have the option to provide parameters to the pipe. For example, the [DatePipe](https://angular.io/api/common/DatePipe) has parameters like format, time zone and locale. + +```html +

{{ birthday | date:"MM/dd/yy" }}

+``` + +## Create Your Own Pipe + +Besides using the predefined pipes, Angular allows you to define your own pipes. Let's take a look at the implementation of a WPF converter that replaces a string with another one. + +```csharp +public class ReplaceConverter : IValueConverter +{ + public string OldValue { get; set; } + public string NewValue { get; set; } + + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) + { + var strValue = value.ToString(); + return strValue.Replace(this.OldValue, this.NewValue); + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) + { + throw new NotImplementedException(); + } +} +``` + +```xml + + + + + + +``` + +In order to do the same in Angular, we have to define a class that implements the [PipeTransform](https://angular.io/api/core/PipeTransform) interface and has the [@Pipe](https://angular.io/api/core/Pipe) decorator. + +```typescript +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'replace' +}) +export class ReplacePipe implements PipeTransform { + + transform(value: string, oldValue: string, newValue: string): string { + return value.replace(oldValue, newValue); + } +} +``` + +```html +{{ name | replace:" ":"-" }} +``` + +> [!NOTE] +> Note that in order to be able to use the pipe in the component's html template, you have to add it to the module declarations. +> [!NOTE] +> An important difference between the Angular pipe and the WPF converter is that the Angular pipe works only for one-way binding unlike the WPF converter which has [ConvertBack](https://docs.microsoft.com/en-us/dotnet/api/system.windows.data.ivalueconverter.convertback?view=netframework-4.8) method. + +## Additional Resources + +- [Desktop to Web: Transforming Data with Angular Pipes](https://www.youtube.com/watch?v=Gmz5kio50FE&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=9) +- [Angular Pipes](https://angular.io/guide/pipes) +- [List of Predefined Angular Pipes](https://angular.io/api?type=pipe) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-create-first-angular-app.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-create-first-angular-app.md new file mode 100644 index 000000000..5dc16dca5 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-create-first-angular-app.md @@ -0,0 +1,115 @@ +--- +title: Create Your First Angular Application | WPF to Angular Guide | Infragistics +_description: Learn how to create your first Angular 9 application when you migrate from WPF to Angular. Read about the prerequisites, your first project & structure. +_keywords: create angular application, ignite ui for angular, infragistics +_tocName: Create your first Angular app +--- + +# Create an Angular application + +> [!Video https://www.youtube.com/embed/dhjrAPPad54] + +Learn how to start creating an Angular application when you migrate from WPF to Angular. + +## Prerequisites + +In order to start writing Angular applications, you need to install Node.js and the npm package manager. Node.js is a JavaScript runtime environment that executes JavaScript code outside of a browser. In order to get Node.js, go to [nodejs.org](https://nodejs.org). NPM is a package manager similar to the NuGet package manager for .NET. It is installed with Node.js by default. You will also need an IDE. One of the best environments for developing Angular applications is Visual Studio Code. It is free, open source, and runs on every platform. You can get it from [code.visualstudio.com](https://code.visualstudio.com/). + +## Create new project + +If you are a WPF developer, creating new projects inside of Visual Studio is pretty straight forward. You would just click File -> New Project, select the project type, give it a name and press OK. Since you are going into the Angular world, you want to create a new project inside Visual Studio Code. However, there is no new project option here and that's because Visual Studio Code is file based and not project based. In order to create a new Angular application, we are going to use the command prompt. + +First you will need to install the [Angular CLI](https://cli.angular.io/). + +```cmd +npm install -g @angular/cli +``` + +Then navigate in the command prompt to the folder where you want your application to be created and execute the following command: + +```cmd +ng new demo-app +``` + +We are going to be prompted "Would we like to add Angular routing?". For this demo we will choose NO. Next, we are asked which stylesheet format would we like to use. We are going to stick with the basic CSS for now. It takes a few minutes, but eventually the process will complete and your new application will be created on the disk. + +Now we have to change directories to the demo-app folder that was just created and execute a command to open Visual Studio Code. + +```cmd +cd demo-app +code . +``` + +This is going to launch a new instance of Visual Studio Code that contains your Angular application. Now this is the part that is probably the most overwhelming to desktop developers trying to learn Angular - the folder structure. + +## Project structure + +Let's go ahead and take a look at each of these files and see how they relate to a WPF application. The best way to do that is to compare each project side by side. On the left we have our WPF app. On the right we have our Angular app. + +WPF Project Structure +Angular Project Structure + +It is important to keep in mind that an Angular application is a single page application (SPA) which means there is only one page in the entire app, and that is your `index.html`. The `index.html` file could be compared to the `App.xaml` of the WPF application. They are both global and everything you put there will show up on every single page of your application. The `index.html` file contains a section `` which is similar to the `StartupUri` of the `App.xaml` file and specifies the first page we want to show when the app launches. + +What happens technically is when you navigate to the `index.html`, the `main.ts` JavaScript file invokes which loads the `AppModule`. An Angular application is made up of modules and components. By default, you get a root module and a root component and those are going to be located under the `app` folder. when the `main.ts` file invokes, we're going to bootstrap the `AppModule`, which is in the `app.module.ts` file in the `app` folder. + +The app module then bootstraps its own `AppComponent`. The `AppComponent` is defined in the `app.component.ts` file and its selector is set to `app-root`. The `AppComponent` has its html template defined in the `app.component.html` file. Basically the `` section in the `index.html` page will visualize the content of the `app.component.html` file. + +The `main.ts` file is similar to the `App.xaml.cs` file since it is something like a code behind. The `app.component.html`, which is the default component shown when the application runs, is very similar to the `MainWindow.xaml` in WPF. + +In WPF we have a `packages.config` file which defines all our dependencies to nuget packages while Angular has a `package.json` file which contains the dependencies that your application requires to run. The `package.json` file contains also a section for scripts that you can run in the console when you are testing, starting or building your application. + +Let's take a look at the `References` folder. In WPF we have a `References` node in our solution that shows all the references that are added to this project. In an Angular application that is actually going to be the `nodes_module` folder. Coming from WPF, you may be surprised how many dependencies an Angular project has. These are populated by using `npm`. + +Unfortunately, here the similarities end. Let us look at some of the other generated files and folders: + +- `e2e` - stands for end-to-end testing and contains integration tests or tests with real-world scenarios like a login process. +- `src` - most of the application's code is located here. +- `assets` - contains your images or any other assets. +- `environment` - contains information about your build environments. +- `favicon.ico` - the icon that appears in the browser when you are at your site. +- `karma.conf.js` - contains configuration for the unit tests. +- `style.css` - stylesheet with styles that are global for your application, it is similar to a resource dictionary defined in `App.xaml` in WPF. + +## Run the application + +Now we are ready to run the application, but in Visual Studio Code you cannot just press F5. We are going to open the Visual Studio Code Terminal by clicking in the menu on Terminal -> New Terminal or by pressing Ctrl + Shift + `. In order to run the application, you should execute the following command: + +```cmd +ng serve +``` + +After the application is started, you can open it in the browser on the following URL http://localhost:4200/. If you want your app to open automatically in the browser, you should use the following command: + +```cmd +ng serve -o +``` + +In this case `-o` stands for open. Another way to start the application is by using the npm commands: + +```cmd +npm start +``` + +You could find those scripts defined in the `package.json` file and modify the `start` command by adding the `-o` option: + +```json + "scripts": { + "ng": "ng", + "start": "ng serve -o", +``` + +Your first Angular application should look like this: + +First Angular App + +## Additional Resources + +- [Desktop to Web: Create your first Angular App](https://www.youtube.com/watch?v=dhjrAPPad54&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) +- [Angular Application Shell](https://angular.io/tutorial/toh-pt0) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-create-ui-with-components.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-create-ui-with-components.md new file mode 100644 index 000000000..c3b42b5ec --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-create-ui-with-components.md @@ -0,0 +1,96 @@ +--- +title: Create a User Interface with Angular Components | WPF to Angular Guide | Infragistics +_description: Learn how to create a user interface in an Angular application with an Angular component. See how similar WPF components translate in Angular. +_keywords: create user interface with an angular component, ignite ui for angular, infragistics +_tocName: Create your UI with Angular components +--- + +# Create User Interface with an Angular component + +> [!Video https://www.youtube.com/embed/z1SZUezpRXY] + +When it comes to creating user interface in an Angular application you can use an Angular component to facilitate the process. + +Creating a UI in Angular is very similar to how we would create one in WPF. We normally use user controls, represented by the UserControl class. A `UserControl` groups markup and code into a reusable container, allowing the same interface and functionality to be used in several different places. This user control will have a .xaml file for the UI markup and a C# file for the logic, and then it may even have a resource dictionary, which would contain any type of styling information for this user control. While in Angular, we use what's called a `Component`. A component has an html file, which is used for any UI markup. It has a typescript file, which is used for its properties and logic, and then it uses a CSS file for all its styling information. Let's go ahead and see just how similar these two are. + +Component Structure + +On the left side, we have a WPF application, with a user control called `Sample`. It also has a resource dictionary called `SampleResources` that contains styling information. +On the right side, we have an Angular application with an `AppComponent`. Let's go ahead and compare the Angular app component to that of the sample user control in the WPF application. + +Start by opening up the app component typescript file. We can think of this file as the code behind of the component, and the reason we think that way is because if we come over to the WPF and open up the Sample.xaml.cs, the code behind of the `Sample` user control, we can see a lot of similarities. + +Component Code Behind + +First we can see that we have a class that we're exporting called `AppComponent`. Now, this AppComponent also has a property in it called title. So within this class we're going to define all the properties, methods and events required for our component to run. This is extremely similar if not the exact same of a user control. We can see that we have a class, in this case called `Sample`, and within this class, we're going to define all the properties, methods and events required for the user control to function. + +Next, let’s move up a few lines in the typescript file and look at this little weird syntax with the little `@` symbol and then Component. This is actually called a decorator. This decorator is telling Angular how we're going to treat this class that we're exporting. In this case, we're going to treat it as a component and because we're treating it as a component, we have to provide some information in the decorator. Before we get to the information, let's first pay some attention to the very top line of the typescript file - `import { Component } from '@angular/core'`. You can think of this as a using statement. Essentially, we are importing the objects that are required for this component to function. In this case, we are importing the `Component` from the `@angular/core` module, so we can actually use the decorator for this component. That is extremely similar to a using statement inside of the code behind of our user control. We use `using` statements inside of C# to locate and use objects within our class that are required for the user control to function. + +Now, let's hop back inside of the component decorator. + +- The line of code on line 4, is called a selector. The selector helps us determine how we're going to define these elements in html. This selector is called `app-root`, so if we go ahead and open up the index.html, we could see within the body an element called `app-root`. That element is using the selector defined in the component decorator to define an instance of this component. +- Next, on line 5, we have what's called a template URL. This is pointing to a file called `app.component.html` - the html file that represents the visual rendering of this component. This is extremely similar to the `Sample.xaml` file of the user control in WPF, where the xaml is the markup that represents how this control is going to render. +- On line 6, we see the style URLs. The style URL is pointing to a CSS file. This file represents the styling information of the component. So if we open up the `app.component.css` file, we can see that there's no styling information in here, but we can think of the CSS file as a direct mapping to a resource dictionary. The resource dictionary in XAML will contain all the styling information for the user control or elements within the user control, so that it renders according to our design. That is the exact same thing that you would do in CSS. + +## Generate a component + +Now that we've seen just how similar an Angular component is to a WPF user control, let's create a new component and add it to our application. If you're a desktop developer, in WPF when you want to add a new user control, you simply right click in your project and say **Add > User Control**. Well, of course if you try to do the same thing in Visual Studio Code, you do not have that option. You only have new file, new folder. That means we have to hop into our terminal and use the Angular CLI to generate our component. So let's toggle a terminal by typing `Control + Backtick`. In the terminal we just type **NG G** for generate, **C** for component, and then provide a name for our component, e.g. `sample`. + +```cmd +ng g c sample +``` + +When the command completes, you'll notice a number of things have happened. First, we have a new folder with the same name we have given to our component. We also have four new files - an html file, a SPEC file, a typescript file, and a CSS file. We also made an update to the `app.module.ts` file. + +Sample Component + +Look at the `sample` folder which contains our newly created component. We can see that all three files that are required for a component are there plus this extra SPEC file. This is actually a test file which we do not need for this article, so we're not going to bother with it now. We also made a modification to the app.module.ts, in which it added the sample component to the `declarations` section of our NgModule. +> [!NOTE] +> This is important - whenever a new component is created, it must be declared in the declarations section of the NG module. This section essentially says what components belong to this module. + +Let's go back to our `sample.component.ts` file. It looks very similar to the `app.component.ts` file we covered above. In this case we have our import statement where we're importing our component. We have our component decorator where we are defining our selector as `app-sample`. We have our template URL as `sample.component.html` and we have our style URL `sample.component.css`. + +Let's go ahead and open up the html file where we can see a paragraph stating `sample works!`. We want to see this when we start the application so let's go to the app.component.html. We will delete most of the initial markup except for the title, and just add ``. + +```html +
+

+ Welcome to {{ title }}! +

+ +
+``` + +## Run the application + +By typing `npm start` in the terminal, it will compile and build our application and launch it inside the browser. If all went well, our application should be running in the browser. We have `welcome to app` - the markup from the app component and then `sample works!`. This is the markup from our sample component that we just added. +Let's now change our sample component a little by changing the text to 'This sample works very well!'. + +```html +

+ This sample works very well! +

+``` + +Once we save and check the browser, we will see that we are indeed editing the html that is responsible for rendering the sample component. +If we want to style our component, we need to look at our style URL. So let's open up our `sample.component.css` file and make the paragraph tag color red. + +```css +p { + color: red; +} +``` + +Once we save that and open up the browser, we should see that the styling in the CSS file has been applied to our sample component. + +## Additional Resources + +- [Desktop to Web: Create your UI with Angular components](https://www.youtube.com/watch?v=z1SZUezpRXY&t) +- [Angular Introduction to Components](https://angular.io/guide/architecture-components) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-layout.md new file mode 100644 index 000000000..8f737e283 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-layout.md @@ -0,0 +1,247 @@ +--- +title: Angular Page Layout Elements | WPF to Angular Guide | Infragistics +_description: Learn how to customize the page layout of your Angular application with our in-depth tutorial of using CSS features like Flexbox & Grid. +_keywords: angular page layout elements, ignite ui for angular, infragistics +_tocName: Layout Elements +--- + +# Page Layout + +In WPF, in order to layout the elements in your application, you need to put them inside a [`Panel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.panel?view=netframework-4.8). The panel is a container element that controls the arrangement of its child elements. In Angular, in order to customize the page layout and its child elements, you have to use CSS. Let us go through some of the most popular panels in WPF and see how we can achieve similar layout with CSS. + +## StackPanel + +The [`StackPanel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.stackpanel?view=netframework-4.8) arranges its child elements into a single line that can be oriented horizontally or vertically. Let us add several buttons in a StackPanel and see how they look like in WPF: + +```xml + + + + + + + +``` + +WPF StackPanel + +If we want to achieve similar layout in Angular, we may use CSS Flexbox layout. The Flexible Box Layout Module is a powerful mechanism which allows designing a flexible responsive layout structure. In order to use the Flexbox layout, we have to define a container which has its [`display`](https://www.w3schools.com/cssref/pr_class_display.asp) property set to `flex`. Also in order to stack the items vertically, we have to set the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property to `column`. + +```html +
+ + + + + +
+``` + +```css +.flex-container { + display: flex; + flex-flow: column; +} +``` + +Here is the final result in the browser: + +Angular StackPanel + +The default value of the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property is `row`, which is equivalent to a StackPanel with Horizontal orientation in WPF. The flexbox also supports `row-reverse` and `column-reverse` directions which stack the items right to left and bottom to top respectively. + +## WrapPanel + +The [`WrapPanel`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.wrappanel?view=netframework-4.8) positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or right to left, depending on the value of the Orientation property. Let us add several buttons in a WrapPanel and see how they look like in WPF: + +```xml + + + + + + + + + + +``` + +WPF WrapPanel + +In order to achieve similar result in Angular, we will use the Flexbox layout again. As in the case with StackPanel, we have to set the [`display`](https://www.w3schools.com/cssref/pr_class_display.asp) property to `flex`, but we also have to set the [`flex-wrap`](https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp) property to `wrap`. + +```html +
+ + + + + +
+``` + +```css +.flex-container { + display: flex; + flex-wrap: wrap; +} + +button { + width: 150px; +} +``` + +Here is the final result in the browser: + +Angular WrapPanel + +If you want to achieve a result similar to a WrapPanel with Orientation="Vertical", you have to set the [`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) property to `column`. The [`flex-flow`](https://www.w3schools.com/cssref/css3_pr_flex-flow.asp) property is a shorthand property for setting both the `flex-direction` and `flex-wrap` properties. + +```css +.flex-container { + display: flex; + flex-flow: row wrap; +} +``` + +The flexbox supports some more CSS properties for aligning the items. You can learn more about them in this [tutorial](https://www.w3schools.com/css/css3_flexbox.asp). + +## Grid + +The [`Grid`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.grid?view=netframework-4.8) defines a flexible grid area consisting of columns and rows. Let us add several buttons in a Grid and see how they look like in WPF: + +```xml + + + + + + + + + + + + + + + + + + + + +``` + +WPF Grid + +In Angular, we could use the CSS Grid Layout Module, which offers a grid-based layout system, with rows and columns. In order to use the Grid layout, we have to define a container which has its [`display`](https://www.w3schools.com/cssref/pr_class_display.asp) property set to `grid` or `inline-grid`. + +```html +
+ + + + + + + +
+``` + +```css +.grid-container { + display: grid; +} +``` + +> [!NOTE] +> The CSS Grid Layout is [not supported](https://caniuse.com/#feat=css-grid) in older browsers like Internet Explorer 11. + +Now let us define the columns of the grid using the [`grid-template-columns`](https://www.w3schools.com/cssref/pr_grid-template-columns.asp) property. + +```css +.grid-container { + display: grid; + grid-template-columns: auto auto auto; +} +``` + +We have defined three columns with width `auto`, which means they would have the same width. If you want to distribute the available space proportionally similar to the star sizing in WPF, you could use the flex sizing unit `fr` in CSS. The following code snippet defines two columns, the first one would receive one times the available space, while the second one would receive two times the available space: + +```css +.grid-container { + display: grid; + grid-template-columns: 1fr 2fr; +} +``` + +Now we will add the rows with height of 50px each using the [`grid-template-rows`](https://www.w3schools.com/cssref/pr_grid-template-columns.asp) property. + +```css +.grid-container { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: 50px 50px 50px 50px; +} +``` + +If we open the application now it looks like this: + +Angular Grid + +You could see one important difference between the WPF and CSS grids. In WPF the default value of Grid.Row and Grid.Column is 0, while the CSS grid layout automatically assigns the next available row and column to its children. + +Now let us apply the column and row spans to the first and seventh buttons. We will use the [`grid-row`](https://www.w3schools.com/cssref/pr_grid-row.asp) and [`grid-column`](https://www.w3schools.com/cssref/pr_grid-column.asp) properties for that purpose. + +```css +.button1 { + grid-column: 1 / 3; + grid-row: 1 / 3; +} + +.button7 { + grid-column: 1 / span 3; +} +``` + +First we specify the start row/column, then after the `/` symbol, we could specify either the end row/column or how many rows/columns the item should span. Unlike WPF, the CSS grid column numbering is not zero-based and the first row/column is 1. + +Here is the full CSS and the final result in the browser: + +```css +.grid-container { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: 50px 50px 50px 50px; +} + +.button1 { + grid-column: 1 / 3; + grid-row: 1 / 3; +} + +.button7 { + grid-column: 1 / span 3; +} +``` + +Angular Grid Span + +The `grid-row` and `grid-column` properties are shorthand properties for the [`grid-row-start`](https://www.w3schools.com/cssref/pr_grid-row-start.asp), [`grid-row-end`](https://www.w3schools.com/cssref/pr_grid-row-end.asp), [`grid-column-start`](https://www.w3schools.com/cssref/pr_grid-column-start.asp) and [`grid-column-end`](https://www.w3schools.com/cssref/pr_grid-column-end.asp) properties. You could learn more about the CSS Grid container and item properties in the tutorials in the **Additional Resources** section. + +## Additional Resources + +- [CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) +- [CSS Grid Intro](https://www.w3schools.com/css/css_grid.asp) +- [CSS Grid Container](https://www.w3schools.com/css/css_grid_container.asp) +- [CSS Grid Item](https://www.w3schools.com/css/css_grid_item.asp) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-one-way-binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-one-way-binding.md new file mode 100644 index 000000000..5af4051c8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-one-way-binding.md @@ -0,0 +1,152 @@ +--- +title: One-Way Data Binding in Angular | WPF to Angular Guide | Infragistics +_description: Learn about one-way data binding in Angular & how it's used to show information to the end user while staying synchronized with changes to the underlying data. +_keywords: one-way data binding in angular, ignite ui for angular, infragistics +_tocName: One-Way Binding +--- + +# What is one-way data binding in Angular + +One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data. This is similar to the one-way binding in WPF. + +> [!Video https://www.youtube.com/embed/fP7iVhFNTOk] + +## What is Angular data binding? + +Data binding is widely used by programmers as this type of services significantly streamlines the process of updating any UI and also reduces the amount of boilerplate when building an app. Data binding in Angular is super easy, and unlike in WPF we don't have to worry about a data context, a view model, or `INotifyPropertyChanged` (INPC). All we have to worry about is an HTML file and a typescript file. With any data binding, the first thing you need are properties to bind to. So let's add a property called `text` into the component class, and set its value. +In WPF, we need to set the DataContext and bind the property in XAML: + +```csharp +public class IgniteUIClass +{ + public string Text { get; set; } + + public IgniteUIClass() + { + this.Text = "IgniteUI for Angular"; + } +} +... +public MainWindow() +{ + InitializeComponent(); + this.DataContext = new IgniteUIClass(); +} +``` + +```xml + +``` + +In Angular, we are directly binding a DOM property to a component's property: + +```typescript +export class SampleComponent implements OnInit { + + text = 'IgniteUI for Angular'; + + constructor() { } + ngOnInit() {} +} +``` + +```html +

{{ text }}

+``` + +## Angular Data Binding Interpolation + +In the code from above, we simply display some text in the HTML by using a binding to the value of the `text` property. In this case, we are using `interpolation` to create a one-way binding. We do this by typing double curly braces, the name of the property - in our case `text`, and two closing curly braces. Another way to achieve the same result is to create h2 tag and bind the `text` property to its innerHTML property, by using the `interpolation` syntax again: + +```html +

+``` + +There are two important things about `interpolation`. + +- First, everything inside the curly braces is rendered as a `string`. +- Second, everything inside the curly braces is referred to as a `template expression`. This allows us to do more complex things, such as concatenation. + +For example, let's concatenate some text with the value of the `text` property: + +```html +

{{"Welcome to " + text }}

+``` + +The use of template expressions allows us to bind to javascript properties and methods as well. For example, we can bind to the `text` property's length which will result in the number 20: + +```html +

{{ text.length }}

+``` + +We can also bind to methods of that property, for example to `toUpperCase()`: + +```html +

{{ text.toUpperCase() }}

+``` + +This is a lot more powerful than the data binding in WPF and a lot easier to use too. We can even make mathematical calculations inside the template expression. For example, we can simply put **2 + 2** into the expression, and it will display the result, which is equal to 4: + +```html +

{{ 2 + 2 }}

+``` + +One more thing that we can do is to bind to actual methods from the typescript file. Here is a short example on how to achieve this: + +```html +

{{ getTitle() }}

+``` + +This `getTitle()` is a method defined in the typescript file. The result on the page is the returned value of that method: + +```typescript +getTitle() { + return 'Simple Title'; +} +``` + +Although the `interpolation` looks quite powerful, it has its limitations, for example - it only represents a **string**. +So let's create a simple boolean property in the component class: + +```typescript +export class SampleComponent implements OnInit { + + text = 'IgniteUI for Angular'; + isDisabled = false; + constructor() { } +... +``` + +We will now create a simple `input` of type text and bind the `isDisabled` property to the input's `disabled` property: + +```html + +``` + +The expected result is that the `input` should be enabled, but it's disabled. This is because the `interpolation` returns a string, but the input's disabled property is of boolean type and it requires a boolean value. +In order for this to work correctly, Angular provides `property binding`. + +## Angular Property Binding + +Property binding in Angular is used to bind values for target properties of HTML elements or directives. The syntax here is a bit different than that of interpolation. With property binding, the property name is wrapped into square brackets, and its value does not contain curly braces - just the name of the property that it is bound to. + +```html + +``` + +By using property binding, the input's `disabled` property is bound to a boolean result, **not** a string. The `isDisabled` value is false and running the app would display the input as enabled. + +> [!NOTE] +> It is very important to remember that when a binding relies on the data type result, then a `property binding` should be used! If the binding simply relies on a string value, then `interpolation` should be used. + +## Additional Resources + +- [Desktop to Web: One-way data binding with Angular interpolation and property binding](https://www.youtube.com/watch?v=fP7iVhFNTOk&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) +- [Two-way binding in Angular](two-way-binding.md) +- [Angular Displaying Data](https://angular.io/guide/displaying-data#displaying-data) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-structural-directives.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-structural-directives.md new file mode 100644 index 000000000..2dbd5420c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-structural-directives.md @@ -0,0 +1,173 @@ +--- +title: Angular Structural Directives | ngIf, ngswitch | WPF to Angular Guide | Infragistics +_description: Learn how to use structural directives in Angular 9 like ngIf, ngswitch & ngFor to add and remove elements to your view in your Angular application +_keywords: angular structural directives, ignite ui for angular, infragistics +_tocName: Structural Directives in Angular +--- + +# Angular Structural Directives + +> [!Video https://www.youtube.com/embed/vQe7R78Od8k] + +When it comes to control the appearance of the visual tree elements’ appearance in WPF, the most common way is to use binding and visibility converter, which requires some extra logic and static resources. Angular also has a similar technique, which changes the appearance or behavior of a DOM element - the Angular directives. One of the Angular `directives` type is the `structural directives` – they change the DOM layout by adding or removing DOM elements. + +In this topic, we are going to demonstrate the following three structural directives - `ngIf`, `ngSwitch` and `ngFor`. As one can tell from their names, each of these can be compared to a C# structure. The `ngIf` is the same thing as an "if-else" C# code block, the `ngSwitch` is the same thing as the C# switch-case statement and, lastly, the `ngFor` is the exact same thing as a C# "for-loop". + +## `ngIf` Directive + +Let’s explore each of these directives, starting with the `ngIf`. This directive allows us to show or hide elements based on a boolean condition. We will start by creating a "div" element with an "h2" tag containing a name. + +```html +
+

John

+
+``` + +If we save this, our browser will render the name John. However, let’s say we have some type of boolean expression that we want to base the condition of the visibility of this "h2" tag on. For example, we are going to add a property called "isFirstName" and set it to false. In order to tell our div to be rendered when isFirstName equals true, we should use the following syntax `*ngIf = "isFirstName"`. + +```typescript +public isFirstName = false; +``` + +``` html +
+

John

+
+``` + +Once we save the files, and because isFirstName is false, we will see that the name is no longer rendered in the browser. However, if we were to update isFirstName to be true, the "John" first name will be rendered in the browser. If we set isFirstName back to false, we'll notice that the first name is no longer rendered in our browser, instead it's empty. That's the default behavior of the `ngif` statement - if the expression is true we render the provided template otherwise it's empty. + +If we were to achieve the same behavior with WPF, we would need to use a visibility converter. The code would look similar to the following: + +```cs +public bool IsFirstName { get; set; } +public Sample() + { + InitializeComponent(); + this.DataContext = this; + this.IsFirstName = true; + } +``` + +```xml + + + + + + +``` + +In Angular, it is a lot easier and more straightforward. + +Let's create a requirement that states if the `isFirstName` property is false we want to provide a last name instead. To do that we're going to take advantage of the "else" clause of the `ngIf` directive. Let's start by creating an `ng-template` defining an "h2" tag which contains the last name. An `ng-template` is simply a placeholder that allows us to define content that is not part of the DOM, but can be added via code such as using the `ngIf` directive. But, in order to use this in the directive, we need to give it a template reference variable name such as "lastname". Now that we have named our `ng-template`, let's go into our `ngIf` directive, add "**; else lastname**" and save this. Because "isFirstName" is false, we are saying **else use the lastname**, which means are using the template with the last name. + +```html +
+

John

+
+ +

Doe

+ +``` + +Now, another way we can write this is we can say "**isFirstName; then firstname; else lastname**". So in order to do that, we need to create another template called "firstname". + +```html +
+
+ +

John

+ + +

Doe

+ +``` + +If we change "isFirstName" to true, the first name will be rendered in the browser. And one final tip on using the `ngIf` directive is that the expression is not limited to a single property - you can actually use multiple properties and/or functions as long as the expression as a whole returns a boolean result. For example we can even use logical operators such as `" && isValid || getIsValidName()"`. + +## `ngSwitch` Directive + +The next directive we will discuss is the `ngSwitch` directive. This allows us to compare one expression to multiple expressions to decide which templates to add or remove. +Let’s say we have "h2" elements that represent makes of cars – Chevy, Ford and GMC. We would like to display only one of these items based on a value of a "make" property which we have defined in our typescript file with a default value of "Chevy". To achieve this we need to use the `ngSwitch` directive with the following syntax `[ngSwitch] = expression` where expression is our "make" property. Adding this to the "div" element wrapping the "h2" tags is not enough. Like in WPF, we need to add some "case" statements to each "h2" element. The syntax for that is `*ngSwitchCase = expression`. In this case, we are comparing directly against text, so we will add single quotes around the value which means that the final result would be `*ngSwitchCase = "'Chevy'"` /similar for the other two values/. + +```typescript +make = "Chevy"; +``` + +```html +
+

Chevy

+

Ford

+

GMC

+
+``` + +Once we save that, we are only going to see the Chevy option rendered in the browser because the value of our "make" property is set to "Chevy". If we change it, to say "GMC", and save that, only the GMC option will be rendered in the browser. Now, what happens if we add an option that is not available, say the "Lambo". Nothing would be rendered because that did not match any of our conditions. When we normally use a switch statement inside of C#, we have not only the case but also default value. The same is available in Angular – we can add another option with the "Not Found" text and mark it with the `*ngSwitchDefault` which will act as the default value if none of the other values are found. + +```html +

Not Found

+``` + +In this case, if we are looking for Lambo, we don't have the Lambo option, so we switch to the default case which is “Not found”, and “Not found” is rendered in our browser. One thing we need to point out is that these are expressions so we can use even a function as long as it returns a result that matches the expression we are passing in. Pretty simple! + +## `ngFor` Directive + +Next up is the `ngFor` directive. This directive allows us to iterate through a collection of objects and add a template for each item in that collection. Let's start by adding a collection of objects in our typescript file. We are going to call this an array of makes and add Chevy, Ford, GMC and Dodge. Next we will create a "div" and for each "div" we're going to create an "h2" tag that lists out the name of that make. To do that we are going to use the `ngFor` directive - the syntax for that `*ngFor="let make of makes"`. That provides us the ability to use interpolation to use the "make" property that is defined via the "let make" portion of the expression and print that out in the "h2" tag. + +```typescript +makes = ["Chevy", "Ford", "GMC", "Dodge"]; +``` + +```html +
+

{{ make }}

+
+``` + +If all went well, we should see that for each item in that array we are using an h2 tag to represent that in the browser. In addition, the `ngFor` directive provides a few helper items that allow us to get more information about that collection such as: + +- "index as i" - allows us to determine what the index of each item is + +```html +
+

{{ i }} - {{ make }}

+
+``` + +- "first as f" - allows us to get whether the item is the first one in the collection + +```html +
+

{{ f }} - {{ make }}

+
+``` + +- "last as l" - you can also get the last row or the last item in the collection + +```html +
+

{{ l }} - {{ make }}

+
+``` + +- "odd as o" or "even as e" - allow us to determine if the item in the collection is in an odd position or an even position + +```html +
+

{{ o }} - {{ make }}

+
+``` + +That's how easy it is to add and remove elements to your view in your angular application - just use a structural directive and you are done. + +## Additional Resources + +- [Desktop to Web: Structural Directives in Angular](https://www.youtube.com/watch?v=vQe7R78Od8k&t) +- [Angular Structural Directives](https://angular.io/guide/structural-directives) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-two-way-binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-two-way-binding.md new file mode 100644 index 000000000..761c00acb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-two-way-binding.md @@ -0,0 +1,93 @@ +--- +title: Two-Way Data Binding in Angular with ngModel | WPF to Angular Guide | Infragistics +_description: Learn how two-way data binding in Angular is used to display information to the end user and allows them to make changes to the underlying data using the UI. +_keywords: two-way data binding in Angular, ignite ui for angular, infragistics +_tocName: Two-Way Binding +--- + +# What is two-way data binding in Angular + +The two-way data binding in Angular enables data to flow from the component to the view and the other way round. It is used to display information to the end-user and allows them to make changes to the underlying data using the UI. This makes a two-way connection between the view (the template) and the component class that we already mentioned. The process is similar to the two-way binding in WPF. + +> [!Video https://www.youtube.com/embed/MrjTTDEj7cA] + +## How does data binding work in Angular? + +Angular data binding works by synchronizing the data in the [angular components](https://www.infragistics.com/products/ignite-ui-angular) with the UI. This way it can always show the current value of the data. In terms of the two-way binding, the automatic data synchronization happens between the Model and the View, keeping both synced all the time. Because of this, any change made in the Model is immediately reflected in the View as well. And vice versa – changes made in the View are updated in the Model too. +The two-way data binding in Angular is used to display information to the end user and allows the end user to make changes to the underlying data using the UI. This makes a two-way connection between the view (the template) and the component class. This is similar to the two-way binding in WPF. + +A one-way binding is taking the state from our component class and displaying it in our view. Let's look at this code: + +```html + +

{{ text }}

+``` + +```typescript +export class SampleComponent implements OnInit { + +text = 'default value'; + +keyup(value) { + this.text = value; +} +... +``` + +Here we are simply using `interpolation` to bind the text property to the HTML. This will display the value of the text property in the UI. The `input` element handles the user interaction and updates the underlying `text` property through the UI by using the [event binding](angular-events.md). Essentially, the input does the opposite of the one-way binding, it takes the information from the UI and updates the property in the component class. The method which is hooked up to the input's keyup event updates the text property each time the event occurs. Once the text property value is changed by the event method, that change is reflected in the UI by the one-way binding using `interpolation` of the h2 element. So if the user types something into the input element, that will immediately update the h2 text - this behavior is basically a simulation of a two-way binding. The same can also be achieved in WPF by using a one-way binding and a keyup event handler, but the two-way binding is way more convenient to use. + +## How to implement two-way data binding in Angular + +Fortunately, we can implement the logic of the sample from above in a much easier way and this is where the two-way binding steps in! + +The direction of a two-way binding is not just **component class to UI**, but **UI to component class** as well. To achieve this, we are going to use a [directive](https://angular.io/api/core/Directive) called [`ngModel`](https://angular.io/api/forms/NgModel). Let's update the sample from above with the `ngModel` directive. The syntax for that is - an open bracket followed by an open parenthesis, and of course the corresponding closing parenthesis and bracket. This is called a **banana in the box**, so let's see it in action! + +```html + +

{{ text }}

+``` + +And the equivalent bindings in WPF would be: + +```xml + + +``` + +The Angular binding is a matter of syntax, and in WPF it is more like a setup - in particular the value of `Binding.Mode`. + +If we run this code, an error would occur in the console - saying that the `ngModel` is an unknown property of the input element. This is due to the fact, that in order to use the `ngModel` directive, it's necessary to import the [`FormsModule`](https://angular.io/api/forms/FormsModule). It needs to be imported into the `app.module.ts` file: + +```typescript +import { FormsModule } from '@angular/forms'; +... +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ] +... +``` + +If we run the sample, the initial input's value would be equal to **default value**, which is the `text` property's value. Since the input is editable, changing its value will reflect over the h2 element immediately. So typing into the input updates the `text` property, and then the h2 element displays that value via the `interpolation`. + +Another equivalent way to achieve this is: + +```html + +``` + +This is actually similar to the first sample, which used a property binding and an event binding. + + +## Additional Resources + +- [Desktop to Web: Desktop to Web: Angular Two-Way Binding with ngModel](https://www.youtube.com/watch?v=MrjTTDEj7cA&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j) +- [One-way binding in Angular](one-way-binding.md) +- [Angular NgModel](https://angular.io/api/forms/NgModel) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-wpf-to-angular-guide.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-wpf-to-angular-guide.md new file mode 100644 index 000000000..1cb5e59be --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/wpf-to-angular-guide-wpf-to-angular-guide.md @@ -0,0 +1,55 @@ +--- +title: WPF to Angular Tutorial & Guide for Developers | Desktop to Web | Infragistics +_description: Read our WPF to Angular tutorial that guides developers on making a smooth transition from a desktop to web framework. Learn more about Angular today! +_keywords: wpf to angular tutorial, igniteui for angular, infragistics +_tocName: WPF to Angular guide +--- + +# Migrating from Desktop to Web: A WPF to Angular Tutorial + +WPF to Angular tutorial is the first step that you should take in order to make a smooth transition from a `desktop` to `web` framework transition. The tutorial targets WPF developers, who make their first steps to web development and it examines some differences and similarities of both frameworks - applications structure, data binding, events, components, etc. + +

+ WPF to Angular Guide +

+ +The guide is divided into the following topics and has included video tutorials: + +## [Create your first Angular application](create-first-angular-app.md) + +Before you begin on your path of learning Angular, you’ll need to install the prerequisites for modern web app dev with Angular. This section covers using the Node.js package manager, installing the Visual Studio Code IDE, and a few of the basic concepts that are necessary for modern web development. Check out the [video tutorial](https://youtu.be/dhjrAPPad54) for this topic. + +## [Create your UI with Angular components](create-ui-with-components.md) + +Creating a UI in Angular is very similar to how we would create one in WPF. We normally use user controls, represented by the UserControl class. A UserControl groups markup and code into a reusable container, allowing the same interface and functionality to be used in several different places. Understanding components in Angular is key to the rest of this series – so let’s get started by understanding how WPF components translate to components in Angular. Check out the [video tutorial](https://youtu.be/z1SZUezpRXY) for this topic. + +## [One-way data binding in Angular](one-way-binding.md) + +One of the most powerful and widely used features in WPF is data binding. It makes a developers' life much easier, by synchronizing the business logic with the view and vice versa, without having to write a single extra line of code. Without the power of it, WPF would just be a better-looking Windows Forms. Luckily, Angular supports data binding! There are two types of data binding - one-way binding and two-way binding. This section shows you how to accomplish one-way data binding and how it compares to WPF. Check out the [video tutorial](https://youtu.be/fP7iVhFNTOk) for this topic. + +## [Angular Events](angular-events.md) + +Binding to user input events is core to every app. It’s hard to imagine writing a new app that doesn’t respond to some type of user interaction one way or another. The most common way to do that is with some type of event system. WPF provides routed events, CLR events, and commands. While in Angular, there are DOM events. This section you’ll learn about DOM events and how to handle user inputs. Check out the [video tutorial](https://youtu.be/V1Futz4W400) for this topic. + +## [Two-way data binding in Angular](two-way-binding.md) + +In Angular, one-way binding updates the view with data coming from the component class. Like WPF, we can do the opposite operation - update the component class from the view. In that case we need to use a two-way binding. This section compares two-way binding in WPF and shows how easy it is to get started. Check out the [video tutorial](https://youtu.be/MrjTTDEj7cA) for this topic. + +## [Transforming Data with Angular Pipes](angular-pipes.md) + +In WPF we use a IValueConverter to transform data, in an Angular application, we use Angular Pipes. The pipe is very similar to the WPF converter. It takes data as an input and then transforms that data into a desired output for display. This section shows some of the pre-defined Angular Pipes, and how to use them in an app. Check out the [video tutorial](https://youtu.be/Gmz5kio50FE) for this topic. + +## [Structural Directives in Angular](structural-directives.md) + +As WPF developers, anytime we want to add or remove an element from the visual tree we have to jump into some code-behind and write some C# or we can use a combination of binding and a visibility converter, which again requires some custom logic and static resources. That's the way we have always done it in WPF, but Angular makes it so much easier. This section demonstrates how structural directives enable the manipulation of elements in an Angular app. Check out the [video tutorial](https://youtu.be/vQe7R78Od8k) for this topic. + +## [Layout Elements](layout.md) + +In WPF, in order to layout the elements in your application, you need to put them inside a Panel. In Angular, we use CSS. This topic discusses Layout, and how to use CSS features like Flexbox and CSS Grid. + + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/zoomslider-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/zoomslider-overview.md new file mode 100644 index 000000000..ff6cffced --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/zoomslider-overview.md @@ -0,0 +1,526 @@ +--- +title: Angular ZoomSlider | Data Visualization Tools | Navigation | Zooming | DataChart | Data Binding | Infragistics +_description: Use Infragistics' Angular zoom slider control to easily display a subset of data with two handles representing minimum and maximum values. Improve your data visualization with Ignite UI for Angular zoom slider! +_keywords: zoom slider, Ignite UI for Angular, Infragistics, data chart +_license: commercial +mentionedTypes: ["ZoomSlider", "XamDataChart"] +_tocName: Zoom Slider +--- + +# Angular Zoom Slider Overview + +The Angular ZoomSlider control provides zooming functionality to range-enabled controls. The ZoomSlider features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window. The ZoomSlider cannot work as a standalone control and it acts as an enhancement for range-based controls like the DataChart or CategoryChart. + +## Angular Zoom Slider Example + +The following sample demonstrates how to use [`IgxZoomSliderComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) to navigate content in [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). + +```typescript +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxZoomSliderDynamicModule, IgxNumericYAxisModule, IgxNumericXAxisModule, IgxCrosshairLayerModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxBubbleSeriesModule } from "igniteui-angular-charts"; +import { IgxNumberAbbreviatorModule } from "igniteui-angular-charts"; +import { SampleScatterStats } from "./SampleScatterStats"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxZoomSliderDynamicModule, + IgxNumberAbbreviatorModule, + IgxNumericYAxisModule, + IgxNumericXAxisModule, + IgxCrosshairLayerModule, + IgxDataChartScatterModule, + IgxDataChartScatterCoreModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartCategoryCoreModule, + IgxDataChartAnnotationModule, + IgxDataChartInteractivityModule, + IgxBubbleSeriesModule +], + providers: [SampleScatterStats], +schemas: [] +}) +export class AppModule {} +``` +```typescript +// tslint:disable:max-line-length +import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; +import { IgxBubbleSeriesComponent } from "igniteui-angular-charts"; +import { IgxDataChartComponent } from "igniteui-angular-charts"; +import { IgxNumericXAxisComponent } from "igniteui-angular-charts"; +import { IgxNumericYAxisComponent } from "igniteui-angular-charts"; +import { IgxSizeScaleComponent } from "igniteui-angular-charts"; +import { IgxZoomSliderComponent } from "igniteui-angular-charts"; +import { MarkerType } from "igniteui-angular-charts"; +import { IgRect } from "igniteui-angular-core"; +import { IgxRectChangedEventArgs } from "igniteui-angular-core"; +import { SampleScatterStats } from "./SampleScatterStats"; + +@Component({ + standalone: false, + providers: [ SampleScatterStats ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements AfterViewInit { + + public charts: IgxDataChartComponent[] = []; + + @ViewChild("mainChart", { static: true }) + public mainChart: IgxDataChartComponent = null; + + @ViewChild("zoomChart", { static: true }) + public zoomChart: IgxDataChartComponent = null; + + @ViewChild("zoomSlider", { static: true }) + public zoomSlider: IgxZoomSliderComponent = null; + + @ViewChild("seriesTooltip", { static: true }) + public seriesTooltip: TemplateRef; + + @ViewChild("container", { static: true }) + public container: HTMLDivElement; + + public isSynchronizingZoom: boolean = false; + public lastRect: IgRect = { left: -1, top: -1, width: -1, height: -1}; + + public regions: any[]; + public countriesAll: any[]; + public countriesByRegion: any; + + constructor(private dataService: SampleScatterStats) { + + this.regions = []; + this.countriesAll = SampleScatterStats.getCountries(); + this.countriesByRegion = {}; + for (const country of this.countriesAll) { + const name = country.region; + + if (!this.countriesByRegion[name]) { + this.countriesByRegion[name] = []; + this.regions.push(name); + console.log("region " + name); + } + this.countriesByRegion[name].push(country); + } + } + + public ngAfterViewInit(): void { + + if (this.mainChart !== undefined || this.container !== undefined) { + // console.log("ngAfterViewInit mainChart"); + + this.createSeries(this.mainChart); + + this.mainChart.actualWindowRectChanged.subscribe((e: IgxRectChangedEventArgs) => + this.onActualWindowRectChanged(this.mainChart, e) + ); + this.charts.push(this.mainChart); + } + + if (this.zoomChart !== undefined) { + // console.log("ngAfterViewInit zoomChart"); + this.createSeries(this.zoomChart); + } + + if (this.zoomSlider !== undefined) { + // console.log("ngAfterViewInit zoomSlider"); + this.zoomSlider.windowRectChanged.subscribe((e: IgxRectChangedEventArgs) => + this.onZoomSliderWindowChanged(this.zoomSlider, e) + ); + this.zoomSlider.resolvingAxisValue.subscribe((e: IgxRectChangedEventArgs) => + this.onZoomSliderResolveAxisValue(this.zoomSlider, e) + ); + } + + if (this.mainChart !== undefined || + this.container !== undefined || + this.zoomChart !== undefined || + this.zoomSlider !== undefined) { + + this.mainChart.gridAreaRectChanged.subscribe((e: IgxRectChangedEventArgs) => + this.onGridAreaRectChanged(this.mainChart, e) + ); + } + } + + public onActualWindowRectChanged(chart: IgxDataChartComponent, args: IgxRectChangedEventArgs) { + + if (!this.isSynchronizingZoom) { + this.syncZooms(chart); + } + } + + public onZoomSliderWindowChanged(slider: IgxZoomSliderComponent, args: IgxRectChangedEventArgs) { + if (!this.isSynchronizingZoom) { + this.syncZooms(slider); + } + } + + public syncZooms(sender: any) { + window.setTimeout(() => { + try { + this.isSynchronizingZoom = true; + + const zoomWindow = this.zoomSlider.windowRect; + const datanChart = sender as IgxDataChartComponent; + let chartWindow: any; + if (sender === this.zoomSlider) { + chartWindow = this.mainChart.actualWindowRect; + } else { + chartWindow = datanChart.actualWindowRect; + } + // console.log("chart " + this.getRect(this.mainChart.actualWindowRect)); + // console.log("zoom " + this.getRect(zoomWindow)); + + if (sender === this.zoomSlider) { + this.charts.map((chart) => { + this.updateChartZoom(chart, { + top: chartWindow.top, + left: zoomWindow.left, + width: zoomWindow.width, + height: chartWindow.height }); + }); + } else { + this.zoomSlider.windowRect = { + top: zoomWindow.top, + left: chartWindow.left, + width: chartWindow.width, + height: zoomWindow.height }; + + this.charts.map((chart) => { + this.updateChartZoom(chart, { + top: zoomWindow.top, + left: chartWindow.left, + width: chartWindow.width, + height: zoomWindow.height }); + }); + } + } finally { + this.isSynchronizingZoom = false; + } + }, 0); + } + + public onZoomSliderResolveAxisValue(slider: IgxZoomSliderComponent, args: any) { + + // console.log("onZoomSliderResolveAxisValue"); + const index = Math.round(args.position * (this.countriesAll.length - 1)); + const item = this.countriesAll[index]; + if (item) { + args.value = SampleScatterStats.abbreviate(item.population); + } + } + + public onGridAreaRectChanged(chart: IgxDataChartComponent, e: any) { + const newRect = e.args.newRect; + if (!this.container) { + return; + } + + if (newRect.left !== this.lastRect.left || + newRect.top !== this.lastRect.top || + newRect.width !== this.lastRect.width || + newRect.height !== this.lastRect.height) { + + let rightMargin = this.mainChart.rightMargin; + if (isNaN(rightMargin)) { + rightMargin = this.mainChart.autoMarginWidth; + } + const width = newRect.left + newRect.width + rightMargin; + + const right = newRect.left + newRect.width; + const insetLeft = newRect.left; + const insetRight = width - right; + this.lastRect = newRect; + this.zoomSlider.startInset = insetLeft - this.zoomSlider.trackStartInset; + this.zoomSlider.endInset = insetRight - this.zoomSlider.trackEndInset; + + if (this.zoomSlider.endInset < 0) { + const inset = this.zoomSlider.endInset; + this.zoomSlider.endInset = 0; + this.charts.map(c => c.rightMargin += (inset * -1.0)); + } + if (this.zoomSlider.startInset < 0) { + const inset = this.zoomSlider.startInset; + this.zoomSlider.startInset = 0; + this.charts.map(c => c.leftMargin += (inset * -1.0)); + } + + this.zoomChart.leftMargin = insetLeft; + this.zoomChart.rightMargin = insetRight; + this.zoomChart.bottomMargin = this.zoomSlider.barExtent; + } + } + + public updateChartZoom(chart: IgxDataChartComponent, zoom: IgRect) { + + const yAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericYAxisComponent; + + let indexEnd = Math.ceil((this.countriesAll.length - 1) * (zoom.left + zoom.width)); + let indexStart = Math.floor((this.countriesAll.length - 1) * zoom.left); + + let min = Number.MAX_VALUE; + let max = Number.MIN_VALUE; + + if (indexStart < 0) { + indexStart = 0; + } + + indexEnd = Math.min(indexEnd, this.countriesAll.length - 1); + for (let i = indexStart; i <= indexEnd; i++) { + min = Math.min(min, this.countriesAll[i].gdpTotal); + max = Math.max(max, this.countriesAll[i].gdpTotal); + } + + // console.log("data min " + min + " max " + max); + // console.log("axis min " + yAxis.actualMinimumValue + " max " + yAxis.actualMaximumValue); + const yMin = (min - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue); + const yMax = (max - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue); + + const newZoom = { + left: zoom.left, + width: zoom.width, + top: (1.0 - yMax), + height: (yMax - yMin) + }; + // console.log("updateChartZoom " + this.getRect(newZoom)); + chart.windowRect = newZoom; + } + + public createSeries(chart: IgxDataChartComponent) { + const sizeScale1 = new IgxSizeScaleComponent(); + sizeScale1.minimumValue = 15; + sizeScale1.maximumValue = 40; + const sizeScale2 = new IgxSizeScaleComponent(); + sizeScale2.minimumValue = 5; + sizeScale2.maximumValue = 15; + + const xAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericXAxisComponent; + const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent; + + const series1 = new IgxBubbleSeriesComponent(); + series1.title = "High Income Country"; + series1.dataSource = SampleScatterStats.getCountriesWithHighIncome(); + series1.showDefaultTooltip = false; + series1.xMemberPath = "population"; + series1.yMemberPath = "gdpTotal"; + series1.radiusMemberPath = "gdpPerCapita"; + series1.radiusScale = sizeScale1; + series1.markerType = MarkerType.Circle; + series1.xAxis = xAxis; + series1.yAxis = yAxis; + series1.tooltipTemplate = this.seriesTooltip; + + const series2 = new IgxBubbleSeriesComponent(); + series2.title = "Low Income Country"; + series2.dataSource = SampleScatterStats.getCountriesWithLowIncome(); + series2.showDefaultTooltip = false; + series2.xMemberPath = "population"; + series2.yMemberPath = "gdpTotal"; + series2.radiusMemberPath = "gdpPerCapita"; + series2.radiusScale = sizeScale2; + series2.markerType = MarkerType.Circle; + series2.xAxis = xAxis; + series2.yAxis = yAxis; + series2.tooltipTemplate = this.seriesTooltip; + + chart.series.add(series1); + chart.series.add(series2); + + // chart.markerOutlines = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"]; + // chart.brushes = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"]; + + } + + public getRect(rect: any) { + const str = "T " + rect.top.toFixed(1) + " L " + rect.left.toFixed(1) + + " W " + rect.width.toFixed(1) + + " H " + rect.height.toFixed(1); + return str; + } +} +``` +```html +
+ + + + + + + + + +
+
+ + + + + + + + +
+
+ + + +
+
+ + +
+ Region: {{item.region}}
 + Country: {{item.name}}
 + Population: {{item.getPopulation()}}
 + GDP Total: {{item.getGdpTotal()}}
 + GDP Per Capita: {{item.getGdpPerCapita()}}
 + {{series.title}}
 + +
+ +
+``` +```scss +.container { + display: block; + height: 100%; +} + +.zoomPane { + position: relative; + height: 160px; +} + +.zoomChart { + width: 100%; + position: absolute; + top: 0px; + left: 0px; +} + +.zoomSlider { + width: 100%; + position: absolute; + top: 0px; + left: 0px; +} +``` + + +
+ +## Usage + +| Feature Name | Description | +| --------------------|----------------------- | +| Scrollbar navigation | Users can change scale and scroll through ranges of data using the built-in capabilities of the ZoomSlider scrollbar. | +| Panning and zooming | Users can adjust the display scale by dragging the edges of the thumb pad to either make the current display cover a larger range (zoom out) or a smaller range (zoom in). | +| Multiple user interaction options | All mouse user interactions are redundantly supported through touch and most of them – through the keyboard. For details, see User Interactions and Usability. | +| Touch support | On touch-enabled devices, users can enjoy the full ZoomSlider functionality. All mouse interactions are supported in touch environment. | +| Extensibility | The ZoomSlider control supports DataChart control out-of the box. | +| Configurable zoom-range window | The initial zoom-range window width and position, as well as its minimum size, are configurable. | + + + +## Dependencies + +When installing the Angular chart component, the core package must also be installed. + +```cmd +npm install --save igniteui-angular-core +npm install --save igniteui-angular-charts +``` + + + +## Component Modules + +The [`IgxZoomSliderComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) requires the following modules: + +```ts +import { IgxZoomSliderModule } from 'igniteui-angular-charts'; +import { IgxZoomSliderComponent } from 'igniteui-angular-charts'; + +@NgModule({ + imports: [ + // ... + IgxZoomSliderModule, + // ... + ] +}) +export class AppModule {} +``` + +## Code Snippet + +The following code demonstrates how to setup the ZoomSlider. + +```html + + +``` + +
+ +## Additional Resources + +You can find more information about charts in [Chart Features](charts/chart-features.md) topic. + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgxZoomSliderComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) +- [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accessibility-compliance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accessibility-compliance.md new file mode 100644 index 000000000..0bafbba72 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accessibility-compliance.md @@ -0,0 +1,193 @@ +--- +title: Ignite UI for Blazor Accessibility Compliance | Ignite UI for Blazor | Infragistics +_description: Ignite UI for Blazor Accessibility Support and Compliance - Section 508 Compliance, WCAG and ARIA . +_keywords: accessibility, Blazor, ignite ui for Blazor, infragistics +_license: MIT +mentionedTypes: [] +_tocName: Accessibility Compliance +--- + + + +# Accessibility Compliance + +As the leading global provider of UI and UX tools for developers, our Blazor team at Infragistics is committed to providing components and tools that make it easier for you to create the best possible user experience. Our goal is to enable you to focus on crafting the best applications and the best user experience for all users. + +Here you can find specific information regarding the accessibility support and compliance for our Blazor grids, charts, and UI components and controls within Ignite UI for Blazor. + +## Section 508 Compliance + +[Section 508](http://www.section508.gov/) of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages. + +Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for Blazor controls and components are compliant with the relevant accessibility rules. + +The matrix below provides a high-level outline of the accessibility support provided by our visual controls (and related components). To learn more about an individual control/component's accessibility compliance, click the name of the control/component. + +### Ignite UI for Blazor Compliance with Section 508 + +|**Component/Principle**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|**Grids**||||||||||||||||| +| - Grid||||||||||*||||||| +| - HierarchicalGrid||||||||||*||||||| +| - TreeGrid||||||||||*||||||| +|**Other**||||||||||*||||||| +| - Avatar||||||||||||||||| +| - Badge||||||||||||||||| +| - Bottom navigation||||||||||*||||||| +| - Button||||||||||*||||||| +| - Button group||||||||||*||||||| +| - Calendar||||||||||*||||||| +| - Card||||||||||||||||| +| - Carousel||||||||||*||||||| +| - Checkbox||||||||||||||||| +| - Chip||||||||||*||||||| +| - Circular progress||||||||||*||||||| +| - Combo||||||||||*||||||| +| - Date time input||||||||||*||||||| +| - Date picker||||||||||*||||||| +| - Divider||||||||||||||||| +| - Dialog||||||||||*||||||| +| - Drop down||||||||||*||||||| +| - Expansion panel||||||||||*||||||| +| - Icon||||||||||||||||| +| - Input||||||||||||||||| +| - Input group||||||||||*||||||| +| - Linear progress||||||||||*||||||| +| - List||||||||||||||||| +| - Navbar||||||||||*||||||| +| - Navigation drawer||||||||||*||||||| +| - Radio group||||||||||||||||| +| - Radio||||||||||||||||| +| - Select||||||||||*||||||| +| - Slider||||||||||*||||||| +| - Snackbar||||||||||*||||||| +| - Switch||||||||||*||||||| +| - Tabs||||||||||*||||||| +| - Time picker||||||||||*||||||| +| - Toast||||||||||*||||||| + +**LEGEND** + +|||| +|---|---|---| +||The control/component is completely accessible in this particular area.|| +|\*|The control/component is accessible in this particular area after implementing certain configurations| Example: Use **NoopAnimationsModule**utility module to allow disabling of animations| +||The control/component is not entirely accessible unless you perform some sort of action.|| +|'white space'|this particular rule does not apply to the control|| + +> \[!WARNING] +> The table above is relevant only to the **Default theme**of Ignite UI for Blazor theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. + +### Compliance Information + +- **a** - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). +- **b** - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. +- **c** - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. +- **d** - Documents shall be organized so they are readable without requiring an associated style sheet. +- **e** - Redundant text links shall be provided for each active region of a server-side image map. +- **f** - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. +- **g** - Row and column headers shall be identified for data tables. +- **h** - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. +- **i** - Frames shall be titled with text that facilitates frame identification and navigation. +- **j** - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. +- **k** - A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. +- **l** - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. +- **m** - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through l. +- **n** - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. +- **o** - A method shall be provided that permits users to skip repetitive navigation links. +- **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. + +## WCAG compliance + +[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) is simply a set of formal guidelines on how to develop accessible web content. These standards represent a higher level of accessibility than 508 standards, although they are identical or very similar. WCAG focuses primarily on HTML accessibility. + +|**Component/Guideline**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
| +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|**Grids**|||||||||||||| +| - Grid|||||||*||||*||| +| - HierarchicalGrid|||||||*||||*||| +| - TreeGrid|||||||*||||*||| +|**Other**|||||||*||||||| +| - Avatar|||||||||||*||| +| - Badge|||||||||||*||| +| - Banner||||||*|*||||*||| +| - Bottom navigation|||||||*||||*||| +| - Button|||||||*||||*||| +| - Button group|||||||*||||*||| +| - Calendar||||||*|*||||*||| +| - Card|||||||||||*||| +| - Carousel||||||*|*||||*||| +| - Checkbox|||||||||||*||| +| - Chip|||||||*||||*||| +| - Circular progress||||||*|*||||*||| +| - Combo||||||*|*||||*||| +| - Date time editor||||||*|*||||*||| +| - Date picker||||||*|*||||*||| +| - Divider|||||||||||*||| +| - Dialog||||||*|*||||*||| +| - Drop down||||||*|*||||*||| +| - Expansion panel||||||*|*||||*||| +| - Icon|||||||||||*||| +| - Input|||||||||||*||| +| - Input group|||||||*||||*||| +| - Label|||||||||||*||| +| - Linear progress||||||*|*||||*||| +| - List|||||||||||*||| +| - Month picker||||||*|*||||*||| +| - Navbar|||||||*||||*||| +| - Navigation drawer||||||*|*||||*||| +| - Radio group|||||||||||*||| +| - Radio|||||||||||*||| +| - Select||||||*|*||||*||| +| - Slider|||||||*||||*||| +| - Snackbar||||||*|*||||*||| +| - Switch|||||||*||||*||| +| - Tabs|||||||*||||*||| +| - Time picker||||||*|*||||*||| +| - Toast||||||*|*||||*||| +| - Tooltip||||||*|*||||*||| + +**Legend** + +|||| +|---|---|---| +||The control/component is completely accessible in this particular area.|| +|\*|The control/component is accessible in this particular area after implementing certain configurations|Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use **NoopAnimationsModule**utility module to allow disabling of animations;| +||The control/component is not entirely accessible unless you perform some sort of action.|| +|'white space'|this particular rule does not apply to the control|| + +> \[!WARNING] +> The table above is relevant only to the **Default theme**of Ignite UI for Blazor theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. + +### Compliance Information + +- **Principle 1 - Perceivable** - Information and user interface components must be presentable to users in ways they can perceive + - Guideline 1.1 – **Text Alternatives** - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. + - Guideline 1.2 – **Time-based Media** - Provide alternatives for time-based media. + - Guideline 1.3 – **Adaptable** - Create content that can be presented in different ways (for example simpler layout) without losing information or structure. + - Guideline 1.4 – **Distinguishable** - Make it easier for users to see and hear content including separating foreground from background. +- **Principle 2 – Operable** - User interface components and navigation must be operable. + - Guideline 2.1 – **Keyboard Accessible** - Make all functionality available from a keyboard. + - Guideline 2.2 – **Enough Time** - Provide users enough time to read and use content. + - Guideline 2.3 – **Seizures and Physical Reactions** - Do not design content in a way that is known to cause seizures or physical reactions. + - Guideline 2.4 – **Navigable** - Provide ways to help users navigate, find content, and determine where they are. + - Guideline 2.5 – **Input Modalities** - Make it easier for users to operate functionality through various inputs beyond keyboard. +- **Principle 3 – Understandable** - Information and the operation of the user interface must be understandable. + - Guideline 3.1 – **Readable** - Make text content readable and understandable. + - Guideline 3.2 – **Predictable** - Make Web pages appear and operate in predictable ways. + - Guideline 3.3 – **Input Assistance** - Help users avoid and correct mistakes. +- **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. + - Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies + +## WAI-ARIA Support + +In 2014 the W3C finalized their [WAI-ARIA specification](http://www.w3.org/TR/wai-aria/) which defined how to design Web content and Web applications to be more accessible to users with disabilities. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md new file mode 100644 index 000000000..038c02229 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md @@ -0,0 +1,490 @@ +--- +title: Blazor Accordion | Accordion | Infragistics +_description: Accordion is used to build vertical expandable panels in accordion menu. +_keywords: Blazor Accordion, Ignite UI for Blazor, Infragistics +_license: MIT +mentionedTypes: ["Accordion", "Infragistics.Controls.Layouts.Implementation.ExpansionPanel"] +namespace: Infragistics.Controls +_tocName: Accordion +--- + +# Blazor Accordion Overview + +The Ignite UI for Blazor Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. + +Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. + +## Blazor Accordion Example + +The following is a basic Ignite UI for Blazor Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. + +In it, you can see how to define an accordion and its expansion panels. The sample also demonstrates the two types of expansion behavior. The switch button sets the [`SingleExpand`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html#IgniteUI_Blazor_Controls_IgbAccordion_SingleExpand) property to toggle between single and multiple branches to be expanded at a time. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Single Expand + + + What has changed about subscription and pricing model? + + We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. We + updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI + (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, + including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components), as well as Infragistics Professional, + Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, + so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best + price. + + + + Who will the updated changes impact? + + The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and + Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, + Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this + blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. + So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will + be honored and renewed based upon the current agreement. + + + + What is the difference between your old model and your current subscription model for Ignite UI? + + For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with + packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet + server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages + + + + What happens if I don't renew my subscription? + Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. + + + If I don't renew my subscription will I still have access to previous versions of Infragistics products? + + Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or + previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing + to renew it. + + + +
+ +@code { + public bool SingleExpand { get; set; } + + public void OnSwitchChange(IgbCheckboxChangeEventArgs args) + { + SingleExpand = args.Detail.Checked; + } +} +``` + + +
+ +## Getting Started with Blazor Accordion + +Before using the [`IgbAccordion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); +``` + + + +You will also need to link an additional CSS file to apply the styling to the [`IgbAccordion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + + + +Now you can start with a basic configuration of the [`IgbAccordion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html) and its panels. + +## Usage + +Each section in the Blazor Accordion Component is defined using an Blazor Expansion Panel. +Panels provide `Disabled` and `Open` properties, which give you the ability to configure the states of the panel as per your requirement. + +### Declaring an Accordion + +The accordion wraps all expansion panels declared inside it. + +```razor + + +
Title Panel 1
+
+ Content Panel 1 +
+ + +
Title Panel 2
+
+ Content Panel 2 +
+ + +``` + +As demonstrated above, the [`SingleExpand`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html#IgniteUI_Blazor_Controls_IgbAccordion_SingleExpand)property gives you the ability to set whether single or multiple panels can be expanded at a time. + +By using the [`HideAll`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html#IgniteUI_Blazor_Controls_IgbAccordion_HideAll) and [`ShowAll`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html#IgniteUI_Blazor_Controls_IgbAccordion_ShowAll) methods you can respectively collapse and expand all [`IgbExpansionPanel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbExpansionPanel.html)s of the [`IgbAccordion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html) programmatically. + +> \[!Note] +> If [`SingleExpand`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html#IgniteUI_Blazor_Controls_IgbAccordion_SingleExpand) property is set to **true** calling [`ShowAll`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html#IgniteUI_Blazor_Controls_IgbAccordion_ShowAll) method would expand only the focused panel. + +### Blazor Accordion Customization Example + +With the Blazor Accordion, you can customize the header and content panel's appearance. + +The sample below demonstrates how elaborate filtering options can be implemented using the built-in slots of the [`IgbExpansionPanel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbExpansionPanel.html). + +```razor +@using IgniteUI.Blazor.Controls + + + + +
+ + + @CategoryTitle +
+ @foreach (var category in Categories) + { + @category.Label + } +
+ + + Cost: $@SliderLower to $@SliderUpper + + + + @RatingTitle + + @foreach (var rating in Ratings) + { + + + + } + + + + @TimeTitle + + + + + + + + +
+ +@code { + IgbIcon? RegisterIconRef; + + IgbDateTimeInput? DateTimeInputRef; + + double SliderLower = 200; + double SliderUpper = 800; + + string CategoryTitle = "Categories"; + List Categories = new List(); + + string RatingTitle = "Rating"; + List Ratings = new List(); + + string TimeTitle = "Time"; + + protected override async Task OnInitializedAsync() + { + Categories.Add(new Category { Id = "0", Label = "Bike" }); + Categories.Add(new Category { Id = "1", Label = "Motorcycle" }); + Categories.Add(new Category { Id = "2", Label = "Car" }); + Categories.Add(new Category { Id = "3", Label = "Taxi" }); + Categories.Add(new Category { Id = "4", Label = "Public Transport" }); + + Ratings.Add(new Rating { Id = "0", Label = "1 star or more", Value = 1.5 }); + Ratings.Add(new Rating { Id = "1", Label = "2 star or more", Value = 2.5 }); + Ratings.Add(new Rating { Id = "2", Label = "3 star or more", Value = 3.5 }); + Ratings.Add(new Rating { Id = "3", Label = "4 star or more", Value = 4.5 }); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && this.RegisterIconRef != null) + { + await this.RegisterIconRef.EnsureReady(); + string clearIcon = ""; + string clockIcon = ""; + await this.RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "material"); + await this.RegisterIconRef.RegisterIconFromTextAsync("clock", clockIcon, "material"); + } + } + + public void OnCategoryChange(IgbCheckboxChangeEventArgs args) + { + var id = (args.Parent as IgbCheckbox).Value; + var category = Categories.Where(x => x.Id == id).FirstOrDefault(); + if (category != null) + category.Selected = args.Detail.Checked; + + UpdateCheckedCategories(); + } + + private void UpdateCheckedCategories() + { + string checkedItems = ""; + Categories.ForEach(category => + { + if (category.Selected) + { + checkedItems += checkedItems != "" ? ", " + category.Label : "Categories: " + category.Label; + } + }); + CategoryTitle = checkedItems == "" ? "Categories" : checkedItems; + StateHasChanged(); + } + + private void OnSliderChange(IgbRangeSliderValueEventArgs args) + { + if (args.Detail != null) + { + SliderLower = args.Detail.Lower; + SliderUpper = args.Detail.Upper; + StateHasChanged(); + } + } + + private void OnRadioChange(IgbRadioChangeEventArgs args) + { + var id = (args.Parent as IgbRadio).Value; + var rating = Ratings.Where(x => x.Id == id).FirstOrDefault(); + if (rating != null) + { + RatingTitle = "Rating: " + rating.Label; + StateHasChanged(); + } + } + + private async Task OnTimeChange(IgbComponentDateValueChangedEventArgs args) + { + TimeTitle = "Time: " + (args.Parent as IgbDateTimeInput).Label + " " + args.Detail.ToShortTimeString(); + StateHasChanged(); + + + } + + private async Task OnTimeClear() + { + if (DateTimeInputRef != null) + { + await DateTimeInputRef.ClearAsync(); + } + TimeTitle = "Time"; + StateHasChanged(); + } + + public class Category + { + public string Id { get; set; } + public bool Selected { get; set; } + public string Label { get; set; } + } + + public class Rating + { + public string Id { get; set; } + public string Label { get; set; } + public double Value { get; set; } + } +} +``` + + +
+ +### Nested Blazor Accordions Scenario + +In the following Blazor Accordion example is created a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested [`IgbAccordion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html) is achieved by adding an accordion inside an expansion panel. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Single Expand + + + What has changed about subscription and pricing model? + + We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. We + updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI + (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, + including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components), as well as Infragistics Professional, + Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, + so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best + price. + + + + Who will the updated changes impact? + + The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and + Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, + Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this + blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. + So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will + be honored and renewed based upon the current agreement. + + + + What is the difference between your old model and your current subscription model for Ignite UI? + + For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with + packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet + server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages + + + + Common questions about renewal. + + + What happens if I don't renew my subscription? + Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. + + + If I don't renew my subscription will I still have access to previous versions of Infragistics products? + + Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or + previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing + to renew it. + + + + Will I be automatically charged for my renewal/ Can I be automatically charged for renewal? + + Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, + at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are + subject to the renewal terms that were agreed upon as part of that purchase. + + + + + + I split my work across two computers. Can I install on both using my single-user license? + + The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome to install and use Ignite UI, + Infragistics Professional, and Infragistics Ultimate on any computer you use. However, if we notice a large number of activations using the + same license, we may contact you to verify this behavior. + + + + I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a major version is released? + + Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the next major version for another 30 days! + You can do this in the following two ways: +
    +
  • + If you have days remaining in your 30-day trial period for the current version (e.g., the + Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or + your account. You will be able to start a fresh trial for the next major version (e.g., 20.1 + Volume Release) +
    • +
  • + If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume + Release), simply download and install Infragistics Ultimate from our website (This will also allow you + to start a new trial.) +
    • +
+ + + +
+ +@code { + public bool SingleExpand { get; set; } + + public void OnSwitchChange(IgbCheckboxChangeEventArgs args) + { + SingleExpand = args.Detail.Checked; + } +} +``` + + +
+ +## Keyboard Navigation + +Keyboard navigation in the Blazor Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. + +The Accordion navigation is compliant with W3C accessibility standards and convenient to use. + +**Key Combinations** + +- ↓ - moves the focus to the panel below +- ↑ - moves the focus to the panel above +- ALT + ↓ - opens the focused panel in the accordion +- ALT + ↑ - closes the focused panel in the accordion +- SHIFT + ALT + ↓ - opens all enabled panels (if singleExpand is set to true opens the focused panel) +- SHIFT + ALT + ↑ - closes all enabled panels +- HOME - navigates to the FIRST enabled panel in the accordion +- END - navigates to the LAST enabled panel in the accordion + +
+ +## API References + +- [`IgbAccordion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAccordion.html) +- [`IgbExpansionPanel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbExpansionPanel.html) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md new file mode 100644 index 000000000..5dcafcfe6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md @@ -0,0 +1,1870 @@ +--- +title: Blazor Area Chart | Data Visualization | Infragistics +_description: Infragistics' Blazor Area Chart +_keywords: Blazor Charts, Area Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XamDataChart", "CategoryChartType"] +namespace: Infragistics.Controls.Charts +_tocName: Area Chart +_premium: true +--- + +# Blazor Area Chart + +The Ignite UI for Blazor Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). This chart emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Therefore, they are often chronological, showing a change of quantity e.g. accumulation of a commodity over time. + +## Blazor Area Chart Example + +You can create Blazor Category Area Chart in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataSource) property and setting [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) property to **Area** enum, as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Area Chart Recommendations + +### Area Chart Use Cases + +There are several common use cases for choosing an Area Chart: + +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. +- Need to compare the trends of your data over time. +- Want to show the difference between 2 or more data series. +- Want to show cumulative part-to-whole comparisons of distinct categories. +- Need to show data trends for one or more categories for comparative analysis. +- Need to visualize details time-series data. + +### Area Chart Best Practices + +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. +- Use transparent colors to ensure that data that is plotted behind another series is not blocked. + +### When Not to Use Area Charts + +- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable. +- Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate. + +### Area Chart Data Structure + +- The data source must be an array or a list of data items (for single series). +- The data source must be an array of arrays or a list of lists (for multiple series). +- The data source should contain two or more data items in order to render a line between them. +- All data items must contain at least one data column (string or date time). +- All data items must contain at least one numeric data column. + +## Blazor Area Chart with Single Series + +Blazor Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data and setting [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) property to `Area` value, as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Area Chart with Multiple Series + +Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline Chart](spline-chart.md), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataSource) property of the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Area Chart Styling + +Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Advanced Types of Area Charts + +The following sections explain more advanced types of Blazor Area Charts that can be created using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control instead of [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control with simplified API. + +## Blazor Step Area Chart + +The Blazor Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data and setting [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) property to `StepArea` value, as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +The following sections explain more advanced types of Blazor Area Charts that can be created using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control instead of [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control with simplified API. + +## Blazor Range Area Chart + +The Blazor Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbRangeAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Monthly Temperature Range in LA and NYC +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var rangeAreaSeries1 = this.rangeAreaSeries1; + var rangeAreaSeries2 = this.rangeAreaSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbRangeAreaSeries rangeAreaSeries1; + private IgbRangeAreaSeries rangeAreaSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private TemperatureRangeData _temperatureRangeData = null; + public TemperatureRangeData TemperatureRangeData + { + get + { + if (_temperatureRangeData == null) + { + _temperatureRangeData = new TemperatureRangeData(); + } + return _temperatureRangeData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureRangeDataItem +{ + public string Month { get; set; } + public double HighNY { get; set; } + public double LowNY { get; set; } + public double HighLA { get; set; } + public double LowLA { get; set; } +} + +public class TemperatureRangeData + : List +{ + public TemperatureRangeData() + { + this.Add(new TemperatureRangeDataItem() { Month = @"Jan", HighNY = 10.6, LowNY = -6.6, HighLA = 28.3, LowLA = 7.8 }); + this.Add(new TemperatureRangeDataItem() { Month = @"Feb", HighNY = 7.8, LowNY = -9.9, HighLA = 31.1, LowLA = 5.6 }); + this.Add(new TemperatureRangeDataItem() { Month = @"Mar", HighNY = 12.2, LowNY = -3.8, HighLA = 27.8, LowLA = 8.3 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Stacked Area Chart + +The Blazor Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbStackedAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stackedAreaSeries = this.stackedAreaSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var s5 = this.s5; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStackedAreaSeries stackedAreaSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbStackedFragmentSeries s5; + private IgbDataToolTipLayer dataToolTipLayer; + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Stacked 100% Area Chart + +The Blazor Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbStacked100AreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100AreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stacked100AreaSeries = this.stacked100AreaSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var s5 = this.s5; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStacked100AreaSeries stacked100AreaSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbStackedFragmentSeries s5; + private IgbDataToolTipLayer dataToolTipLayer; + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Stacked Spline Area Chart + +The Blazor Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbStackedSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedSplineAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stackedSplineAreaSeries = this.stackedSplineAreaSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var s5 = this.s5; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStackedSplineAreaSeries stackedSplineAreaSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbStackedFragmentSeries s5; + private IgbDataToolTipLayer dataToolTipLayer; + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Stacked 100% Spline Area Chart + +The Blazor Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbStacked100SplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100SplineAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stacked100SplineAreaSeries = this.stacked100SplineAreaSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var s5 = this.s5; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStacked100SplineAreaSeries stacked100SplineAreaSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbStackedFragmentSeries s5; + private IgbDataToolTipLayer dataToolTipLayer; + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Radial Area Chart + +The Blazor Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbRadialAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Ronaldo vs Messi Player Stats +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var radialAreaSeries1 = this.radialAreaSeries1; + var radialAreaSeries2 = this.radialAreaSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbRadialAreaSeries radialAreaSeries1; + private IgbRadialAreaSeries radialAreaSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private FootballPlayerStats _footballPlayerStats = null; + public FootballPlayerStats FootballPlayerStats + { + get + { + if (_footballPlayerStats == null) + { + _footballPlayerStats = new FootballPlayerStats(); + } + return _footballPlayerStats; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class FootballPlayerStatsItem +{ + public string Attribute { get; set; } + public double Ronaldo { get; set; } + public double Messi { get; set; } +} + +public class FootballPlayerStats + : List +{ + public FootballPlayerStats() + { + this.Add(new FootballPlayerStatsItem() { Attribute = @"Dribbling", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Passing", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Finishing", Ronaldo = 10, Messi = 10 }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Polar Area Chart + +The Blazor Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbPolarAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Wind Speed vs Boat Speed +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var polarAreaSeries1 = this.polarAreaSeries1; + var polarAreaSeries2 = this.polarAreaSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbPolarAreaSeries polarAreaSeries1; + private IgbPolarAreaSeries polarAreaSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private BoatSailingData _boatSailingData = null; + public BoatSailingData BoatSailingData + { + get + { + if (_boatSailingData == null) + { + _boatSailingData = new BoatSailingData(); + } + return _boatSailingData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class BoatSailingDataItem +{ + public double Direction { get; set; } + public double BoatSpeed { get; set; } + public double WindSpeed { get; set; } +} + +public class BoatSailingData + : List +{ + public BoatSailingData() + { + this.Add(new BoatSailingDataItem() { Direction = 0, BoatSpeed = 70, WindSpeed = 90 }); + this.Add(new BoatSailingDataItem() { Direction = 45, BoatSpeed = 35, WindSpeed = 65 }); + this.Add(new BoatSailingDataItem() { Direction = 90, BoatSpeed = 25, WindSpeed = 45 }); + // ... 6 more items + } +} +``` + + +
+ +## Blazor Polar Spline Area Chart + +The Blazor Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to [`IgbPolarSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarSplineAreaSeries.html), as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Wind Speed vs Boat Speed +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var polarSplineAreaSeries1 = this.polarSplineAreaSeries1; + var polarSplineAreaSeries2 = this.polarSplineAreaSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + } + + private IgbDataChart chart; + private IgbNumericAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbPolarSplineAreaSeries polarSplineAreaSeries1; + private IgbPolarSplineAreaSeries polarSplineAreaSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private BoatSailingData _boatSailingData = null; + public BoatSailingData BoatSailingData + { + get + { + if (_boatSailingData == null) + { + _boatSailingData = new BoatSailingData(); + } + return _boatSailingData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class BoatSailingDataItem +{ + public double Direction { get; set; } + public double BoatSpeed { get; set; } + public double WindSpeed { get; set; } +} + +public class BoatSailingData + : List +{ + public BoatSailingData() + { + this.Add(new BoatSailingDataItem() { Direction = 0, BoatSpeed = 70, WindSpeed = 90 }); + this.Add(new BoatSailingDataItem() { Direction = 45, BoatSpeed = 35, WindSpeed = 65 }); + this.Add(new BoatSailingDataItem() { Direction = 90, BoatSpeed = 25, WindSpeed = 45 }); + // ... 6 more items + } +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Bar Chart](bar-chart.md) +- [Column Chart](column-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in above sections: + +| Chart Type | Control Name | API Members | +| -------------------------|-----------------|-----------------------| +| Area | [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) | [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) = `Area` | +| Step Area | [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) | [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) = `StepArea` | +| Range Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbRangeAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeAreaSeries.html) | +| Radial Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbRadialAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialAreaSeries.html) | +| Polar Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbPolarAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarAreaSeries.html) | +| Polar Spline Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbPolarSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarSplineAreaSeries.html) | +| Stacked Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbStackedAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedAreaSeries.html) | +| Stacked Spline Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbStackedSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedSplineAreaSeries.html) | +| Stacked 100% Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbStacked100AreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100AreaSeries.html) | +| Stacked 100% Spline Area | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbStacked100SplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100SplineAreaSeries.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md new file mode 100644 index 000000000..66a7ad494 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md @@ -0,0 +1,243 @@ +--- +title: Blazor Avatar | Layout Controls | Infragistics +_description: Use Infragistics' Blazor avatar component to display an image, icon, or initials. +_keywords: avatar, layout, Ignite UI for Blazor, Infragistics +_license: MIT +mentionedTypes: ["Avatar"] +_tocName: Avatar +--- + +# Blazor Avatar + +The Ignite UI for Blazor Avatar helps to display initials, images, or icons in your application. + +## Blazor Icon Avatar Example + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + +
+ +@code { + + public IgbIcon ChildIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (this.ChildIcon != null && firstRender) + { + this.ChildIcon.EnsureReady().ContinueWith(new Action((e) => + { + this.ChildIcon.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material"); + })); + } + } +} +``` + + +
+ +## Usage + +Before using the [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); +``` + + + +You will also need to link an additional CSS file to apply the styling to the [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + +For a complete introduction to the Ignite UI for Blazor, read the [**Getting Started**](../general-getting-started.md) topic. + +The [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) is capable of displaying images, initials, or any other content, including icons. Declaring an [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) is as simple as: + +```razor + +``` + +The avatar has several attributes that allow rendering different content based on the context. The most basic way to display content in the boundaries of the avatar is to provide content between the opening and closing tags. + +```razor + + + +``` + +### Initials + +If the [`Initials`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html#IgniteUI_Blazor_Controls_IgbAvatar_Initials) attribute is set all children elements of the avatar will be ignored and the string passed to this attribute will be displayed. + +```razor + + + + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ +@code { + + +} +``` + + +### Image + +The avatar can also display an image when the [`Src`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html#IgniteUI_Blazor_Controls_IgbAvatar_Src) attribute is assigned a valid URL to a static asset. In that case the [`Initials`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html#IgniteUI_Blazor_Controls_IgbAvatar_Initials) value will be ignored and children elements will not be rendered. + +```razor + + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ +@code { + +} +``` + + +### Shape + +The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the `shape` attribute. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + +
+ +@code { + + public IgbIcon ChildIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (this.ChildIcon != null && firstRender) + { + this.ChildIcon.EnsureReady().ContinueWith(new Action((e) => + { + this.ChildIcon.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material"); + })); + } + } +} +``` + + +### Size + +Apart from the shape, the size of the avatar can also be changed by utilizing the `--ig-size` CSS variable. The supported sizes are `small` (default), `medium`, and `large`. The following code snippet shows how to use a different component size: + +```css +igc-avatar { + --ig-size: var(--ig-size-large); +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + +
+ +@code { + +} +``` + + +### Styling + +The [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) component exposes several CSS parts, giving you full control over its style: + +|Name|Description| +|--|--| +| `base` | The base wrapper of the avatar. | +| `initials` | The initials wrapper of the avatar. | +| `image` | The image wrapper of the avatar. | +| `icon` | The icon wrapper of the avatar. | + +```css +igc-avatar::part(base) { + --size: 60px; + color: var(--ig-success-500-contrast); + background: var(--ig-success-500);; + border-radius: 20px; +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + +
+ + + +
+
+@code { + +} +``` + + +
+ +## API References + +- [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md new file mode 100644 index 000000000..ad0263664 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md @@ -0,0 +1,152 @@ +--- +title: Blazor Badge | Infragistics +_description: Infragistics' Blazor Badge component allows you to display content in a predefined style to decorate other components anywhere in an application. +_keywords: Blazor, UI controls, web widgets, UI widgets, Web Components, Blazor Badge Components, Infragistics +_license: MIT +mentionedTypes: ["Badge"] +_tocName: Badge +--- + +# Blazor Badge Overview + +The Ignite UI for Blazor Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed with predefined styles to communicate information, success, warnings, or errors. + +## Blazor Badge Example + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ +@code { + +} +``` + + +
+ +## Usage + + + +Before using the [`IgbBadge`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbBadge`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + +```razor + +``` + +To display a subtle border around the badge, you can set the [`Outlined`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html#IgniteUI_Blazor_Controls_IgbBadge_Outlined) attribute of the badge. + +```razor + +``` + +## Examples + +### Variants + +The Ignite UI for Blazor badge supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - `primary`(default), `info`, `success`, `warning`, or `danger` to the [`Variant`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html#IgniteUI_Blazor_Controls_IgbBadge_Variant) attribute. + +```razor + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ +@code { + +} +``` + + +### Shape + +The badge component supports `rounded`(default) and `square` shapes. These values can be assigned to the [`Shape`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html#IgniteUI_Blazor_Controls_IgbBadge_Shape) attribute. + +```razor + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ +@code { + +} +``` + + +### Dot + +The Ignite UI for Blazor badge component can also render as a minimal dot indicator for notifications by setting its `dot` attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). + +```razor + +``` + + + + +## Styling + +The [`IgbBadge`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html) component exposes a `base` CSS part that can be used to change all of its style properties. + +```css +igc-badge::part(base) { + --background-color: var(--ig-error-A100); + --border-radius: 2px; +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ +@code { + +} +``` + + +
+ +## API References + +- [`IgbBadge`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md new file mode 100644 index 000000000..c636b661f --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md @@ -0,0 +1,765 @@ +--- +title: Blazor Banner | Infragistics +_description: With Ignite UI for Blazor Banner component, developers can easily integrate a short, non-intrusive message (along with optional actions) within mobile and desktop applications. +_keywords: Ignite UI for Blazor, UI controls, Blazor widgets, web widgets, UI widgets, Blazor, Native Blazor Components Suite, Native Blazor Controls, Native Blazor Components Library, Blazor Banner components +_license: MIT +mentionedTypes: ["Banner"] +_tocName: Banner +--- + +# Blazor Banner Overview + +The Ignite UI for Blazor Banner component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. It can also indicate actions to take based on the context of the message. + +## Ignite UI for Blazor Banner Example + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ +

Gallery

+ + + + + You are currently offline. + + + +
+ +
+ + +
+ +
+ +
+
+ +@code { + private string refreshIcon = ""; + + private IgbIcon iconRef; + private IgbBanner bannerRef; + + protected override void OnAfterRender(bool firstRender) + { + if (this.iconRef != null && firstRender) + { + this.iconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.iconRef.RegisterIconFromText("refresh", refreshIcon, "material"); + })); + } + + if (this.bannerRef != null && firstRender) + { + this.bannerRef.EnsureReady().ContinueWith(new Action((e) => + { + this.bannerRef.ShowAsync(); + })); + } + + } + + private void OnIconClick() + { + this.bannerRef.ShowAsync(); + } +} +``` + + +## Usage + + + +Before using the [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + + + +For a complete introduction to the Ignite UI for Blazor, read the [**Getting Started**](../general-getting-started.md) topic. + +### Show Banner + +In order to display the banner component, use its [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html#IgniteUI_Blazor_Controls_IgbBanner_Show) method and call it on a button click. The banner appears relative to where the element was inserted in the page template, moving all other content. It typically shows some non-intrusive content that requires minimal user interaction to be dismissed. + +```razor +Show Banner + + + You are currently offline. + + +@code { + private IgbBanner bannerRef; + + private void ShowBanner() + { + this.bannerRef.ShowAsync(); + } +} +``` + +> \[!NOTE] +> The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) includes a default action button `OK`, which closes the banner. + +## Examples + +The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) component allows templating of its content while still sticking as closely as possible to the material design banner guidelines. + +### Changing the banner message + +Configuring the message displayed in the banner is easy - just change the content you are passing to the [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) tag. The text will show up in the specified banner area and the banner will use its default template when displaying it. Below, we will change the content of our sample banner to be a bit more descriptive: + +```razor + + You have lost connection to the internet. This app is offline. + +``` + +### Adding an icon + +An [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) can be displayed in the banner by using the banner's `prefix` slot. The icon will always be positioned at the beginning of the banner message. + +> \[!NOTE] +> If several [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) directly to the banner. + +To pass an [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) to your banner, use the `prefix` slot: + +```razor + + + You have lost connection to the internet. This app is offline. + +``` + +If you want to use an [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) in your banner message, simply insert it in the banner's content: + +```razor + + You have lost connection to the internet. This app is offline. + + +``` + +### Changing the banner button + +The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) exposes the `actions` slot for templating the banner buttons. This allows you to override the default banner button (`OK`) and add user-defined custom actions. + +```razor + + + You have lost connection to the internet. This app is offline. +
+ + Toggle Banner + + +
+ + +@code { + private IgbBanner bannerRef; + + private void OnButtonClick() + { + this.bannerRef.ToggleAsync(); + } +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ +

Gallery

+ + + + + + You have lost connection to the internet. This app is offline. +
+ + Toggle Banner + + +
+ + + +
+ +
+ + +
+ +
+ +
+
+ +@code { + private string refreshIcon = ""; + private string wifiOffIcon = ""; + + private IgbIcon iconRef; + private IgbBanner bannerRef; + + protected override void OnAfterRender(bool firstRender) + { + if (this.iconRef != null && firstRender) + { + this.iconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.iconRef.RegisterIconFromText("refresh", refreshIcon, "material"); + this.iconRef.RegisterIconFromText("signal_wifi_off", wifiOffIcon, "material"); + })); + } + + if (this.bannerRef != null && firstRender) + { + this.bannerRef.EnsureReady().ContinueWith(new Action((e) => + { + this.bannerRef.ShowAsync(); + })); + } + + } + + private void OnIconClick() + { + this.bannerRef.ShowAsync(); + } + + private void OnButtonClick() + { + this.bannerRef.ToggleAsync(); + } +} +``` + + +### Binding to events + +The banner component emits the `Closing` and `Closed` events when being closed. The `Closing` event is cancelable - it uses the [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) interface and the emitted object has its `cancelable` property set to **true**. If we cancel the `Closing` event, the corresponding end action and event will not be triggered - the banner will not be closed and the `Closed` event will not be emitted. + +To cancel the closing event, call the [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) method. + +```razor + + +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JS.InvokeVoidAsync("handleClosing"); + } + } +} +``` + +```razor +//In JavaScript: +function handleClosing() { + const banner = document.getElementById('banner'); + + banner.addEventListener('igcClosing', (event) => { + event.preventDefault(); + }); +} +``` + +> \[!NOTE] +> If the changes above are applied, the banner will never close, as the closing event is always cancelled. + +## Advanced Example + +Let's create a banner with two custom buttons - one for dismissing the notification and one for turning on the connection. We can pass custom action handlers using the `actions` slot: + +```razor + + + You have lost connection to the internet. This app is offline. +
+ + Continue Offline + + + + Turn On Wifi + + +
+ + +@code { + private IgbBanner bannerRef; + + private void HideBanner() + { + this.bannerRef.HideAsync(); + } +} +``` + +> According to Google's [Material Design](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) does not explicitly limit the number of elements under the `actions` slot, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. + +The dismiss option (**Continue Offline**) doesn't need any further logic, so it can just call the [`Hide`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html#IgniteUI_Blazor_Controls_IgbBanner_Hide) method. The confirm action (**Turn On Wifi**), however, requires some additional logic, so we have to define it in the component. Then, we will add an event listener for the `click` event. The last step is to call the `refreshBanner()` method on each change, which will toggle the banner depending on the `wifiState`. + +The navbar will have a Wifi icon and we will add an event listener for its `click` event as well. As the `refreshBanner()` method is called on each change, the icon will not only toggle the banner, but change according to the state of the connection: + +```razor + +

Gallery

+ + + + + ... +
+ ... + + Turn On Wifi + + +
+ + +@code { + private IgbBanner bannerRef; + private string iconName = "signal_wifi_off"; + private bool wifiState = false; + + private void RefreshBanner() + { + if (!this.wifiState) + { + this.iconName = "signal_wifi_4_bar"; + this.bannerRef.HideAsync(); + } + else + { + this.iconName = "signal_wifi_off"; + this.bannerRef.ShowAsync(); + } + this.wifiState = !this.wifiState; + } +} +``` + +Finally, we will add a [`IgbToast`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html), displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below: + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ +

Gallery

+ + + + + + You have lost connection to the internet. This app is offline. +
+ + Continue Offline + + + + Turn On Wifi + + +
+ + + +
+ +
+ + +
+ +
+ + + @message +
+
+ +@code { + private string wifiOnIcon = ""; + private string wifiOffIcon = ""; + + private IgbIcon iconRef; + private IgbBanner bannerRef; + private IgbToast toastRef; + private bool wifiState = false; + private string message = ""; + private string iconName = "signal_wifi_off"; + + protected override void OnAfterRender(bool firstRender) + { + if (this.iconRef != null && firstRender) + { + this.iconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.iconRef.RegisterIconFromText("signal_wifi_off", wifiOffIcon, "material"); + this.iconRef.RegisterIconFromText("signal_wifi_4_bar", wifiOnIcon, "material"); + })); + } + + if (this.bannerRef != null && firstRender) + { + this.bannerRef.EnsureReady().ContinueWith(new Action((e) => + { + this.bannerRef.ShowAsync(); + })); + } + + } + + private void HideBanner() + { + this.bannerRef.HideAsync(); + } + + private void RefreshBanner() + { + if (!this.wifiState) + { + this.iconName = "signal_wifi_4_bar"; + this.bannerRef.HideAsync(); + } + else + { + this.iconName = "signal_wifi_off"; + this.bannerRef.ShowAsync(); + } + + this.wifiState = !this.wifiState; + this.ShowToast(); + } + + private void ShowToast() + { + this.toastRef.Open = false; + this.message = $"Wifi is now {(this.wifiState ? "on" : "off")}"; + this.toastRef.ShowAsync(); + } +} +``` + + +## Styling + +The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) component exposes several CSS parts which give you full control over its style: + +|Name|Description| +|--|--| +| `base` | The base wrapper of the banner component. | +| `spacer` | The inner wrapper that sets the space around the banner. | +| `message` | The part that holds the text and the illustration. | +| `illustration` | The part that holds the banner icon/illustration. | +| `content` | The part that holds the banner text content. | +| `actions` | The part that holds the banner action buttons. | + +```css +igc-banner::part(spacer) { + background: var(--ig-surface-600); +} + +igc-banner::part(illustration) { + color: var(--ig-surface-600-contrast); +} + +igc-banner::part(content) { + color: var(--ig-gray-900); +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ +

Gallery

+ + + + + + You have lost connection to the internet. This app is offline. +
+ + Continue Offline + + + + Turn On Wifi + + +
+ + + +
+ +
+ + +
+ +
+ + + @message +
+
+ +@code { + private string wifiOnIcon = ""; + private string wifiOffIcon = ""; + + private IgbIcon iconRef; + private IgbBanner bannerRef; + private IgbToast toastRef; + private bool wifiState = false; + private string message = ""; + private string iconName = "signal_wifi_off"; + + protected override void OnAfterRender(bool firstRender) + { + if (this.iconRef != null && firstRender) + { + this.iconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.iconRef.RegisterIconFromText("signal_wifi_off", wifiOffIcon, "material"); + this.iconRef.RegisterIconFromText("signal_wifi_4_bar", wifiOnIcon, "material"); + })); + } + + if (this.bannerRef != null && firstRender) + { + this.bannerRef.EnsureReady().ContinueWith(new Action((e) => + { + this.bannerRef.ShowAsync(); + })); + } + + } + + private void HideBanner() + { + this.bannerRef.HideAsync(); + } + + private void RefreshBanner() + { + if (!this.wifiState) + { + this.iconName = "signal_wifi_4_bar"; + this.bannerRef.HideAsync(); + } + else + { + this.iconName = "signal_wifi_off"; + this.bannerRef.ShowAsync(); + } + + this.wifiState = !this.wifiState; + this.ShowToast(); + } + + private void ShowToast() + { + this.toastRef.Open = false; + this.message = $"Wifi is now {(this.wifiState ? "on" : "off")}"; + this.toastRef.ShowAsync(); + } +} +``` + + +## API References + +- [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) +- [`IgbCard`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCard.html) +- [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) +- [`IgbNavbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNavbar.html) +- [`IgbToast`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html) +- [`IgbRipple`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRipple.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md new file mode 100644 index 000000000..4a1a7c10c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md @@ -0,0 +1,1002 @@ +--- +title: Blazor Bar Chart and Graph | Ignite UI for Blazor +_description: Blazor Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories. Try for FREE. +_keywords: Blazor Charts, Bar Chart, Bar Graph, Horizontal Chart, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Bar Chart +_premium: true +--- + +# Blazor Bar Chart + +The Ignite UI for Blazor Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.md) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.md) has vertical orientation (up and down) + +## Blazor Bar Chart Example + +You can create Blazor Bar Chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data sources to multiple [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var categoryHighlightLayer = this.categoryHighlightLayer; + var barSeries1 = this.barSeries1; + var barSeries2 = this.barSeries2; + var tooltips = this.tooltips; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbCategoryHighlightLayer categoryHighlightLayer; + private IgbBarSeries barSeries1; + private IgbBarSeries barSeries2; + private IgbDataToolTipLayer tooltips; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Bar Chart Recommendations + +### Are Blazor Bar Charts right for your project? + +Blazor Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include: + +- Grouped Bar Chart +- Stacked Bar Chart +- Polar Bar Chart +- Stacked 100 Bar Chart + +### Bar Chart Use Cases + +There are several common use cases for choosing a Bar Chart: + +- You need to show trends over time or a numeric value change in a category of data. +- You need to compare data values of 1 or more data series. +- You want to show a part-to-whole comparison. +- You want to show top or bottom percentage of categories. +- Analyzing multiple data points grouped in sub-categories (Stacked Bar). + +These use cases are commonly used for the following scenarios: + +- Sales Management. +- Inventory Management. +- Stock Charts. +- Any String Value Comparing a Numeric Value or Time-Series Value. + +### Bar Chart Best Practices + +- Start you numeric Axis at 0. +- Use a single color for the bars. +- Be sure the space separating each bar is 1/2 the width of the bar itself. +- Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order. +- Right-align category values on the Y-Axis (left side labels of chart) for readability. + +### When Not to Use Bar Chart + +- You have too much data so the Y-Axis can't fit in the space or is not legible. +- You need a detailed Time-Series analysis - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data. + +### Bar Chart Data Structure + +- The data source must be an array or a list of data items. +- The data source must contain at least one data item. +- The list must contain at least one data column (string or date time). +- The list must contain at least one numeric data column. + +
+ +## Blazor Bar Chart with Single Series + +Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Where Online Shoppers Start Their Search +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var categoryHighlightLayer = this.categoryHighlightLayer; + var barSeries1 = this.barSeries1; + var tooltips = this.tooltips; + + } + + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbCategoryHighlightLayer categoryHighlightLayer; + private IgbBarSeries barSeries1; + private IgbDataToolTipLayer tooltips; + + private OnlineShoppingSearches _onlineShoppingSearches = null; + public OnlineShoppingSearches OnlineShoppingSearches + { + get + { + if (_onlineShoppingSearches == null) + { + _onlineShoppingSearches = new OnlineShoppingSearches(); + } + return _onlineShoppingSearches; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OnlineShoppingSearchesItem +{ + public double X { get; set; } + public double Y { get; set; } + public string Label { get; set; } + public double Percent { get; set; } + public string Shop { get; set; } +} + +public class OnlineShoppingSearches + : List +{ + public OnlineShoppingSearches() + { + this.Add(new OnlineShoppingSearchesItem() { X = 63, Y = 0, Label = @"63%", Percent = 63, Shop = @"Amazon" }); + this.Add(new OnlineShoppingSearchesItem() { X = 48, Y = 1, Label = @"48%", Percent = 48, Shop = @"Search Engines" }); + this.Add(new OnlineShoppingSearchesItem() { X = 33, Y = 2, Label = @"33%", Percent = 33, Shop = @"Retailer Sites" }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Bar Chart with Multiple Series + +The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to multiple [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var categoryHighlightLayer = this.categoryHighlightLayer; + var barSeries1 = this.barSeries1; + var barSeries2 = this.barSeries2; + var tooltips = this.tooltips; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbCategoryHighlightLayer categoryHighlightLayer; + private IgbBarSeries barSeries1; + private IgbBarSeries barSeries2; + private IgbDataToolTipLayer tooltips; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Blazor Bar Chart Styling + +The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.md) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html) and adding a [`IgbCalloutLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Where Online Shoppers Start Their Search +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var categoryHighlightLayer = this.categoryHighlightLayer; + var barSeries1 = this.barSeries1; + var calloutLayer1 = this.calloutLayer1; + var tooltips = this.tooltips; + + } + + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbCategoryHighlightLayer categoryHighlightLayer; + private IgbBarSeries barSeries1; + private IgbCalloutLayer calloutLayer1; + private IgbDataToolTipLayer tooltips; + + private OnlineShoppingSearches _onlineShoppingSearches = null; + public OnlineShoppingSearches OnlineShoppingSearches + { + get + { + if (_onlineShoppingSearches == null) + { + _onlineShoppingSearches = new OnlineShoppingSearches(); + } + return _onlineShoppingSearches; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OnlineShoppingSearchesItem +{ + public double X { get; set; } + public double Y { get; set; } + public string Label { get; set; } + public double Percent { get; set; } + public string Shop { get; set; } +} + +public class OnlineShoppingSearches + : List +{ + public OnlineShoppingSearches() + { + this.Add(new OnlineShoppingSearchesItem() { X = 63, Y = 0, Label = @"63%", Percent = 63, Shop = @"Amazon" }); + this.Add(new OnlineShoppingSearchesItem() { X = 48, Y = 1, Label = @"48%", Percent = 48, Shop = @"Search Engines" }); + this.Add(new OnlineShoppingSearchesItem() { X = 33, Y = 2, Label = @"33%", Percent = 33, Shop = @"Retailer Sites" }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Stacked Bar Chart + +A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value. + +The Stacked Bar Chart differs from the Bar Chart in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis. + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Energy Consumption +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var stackedBarSeries = this.stackedBarSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbStackedBarSeries stackedBarSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbDataToolTipLayer dataToolTipLayer; + + private EnergyRenewableConsumption _energyRenewableConsumption = null; + public EnergyRenewableConsumption EnergyRenewableConsumption + { + get + { + if (_energyRenewableConsumption == null) + { + _energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return _energyRenewableConsumption; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class EnergyRenewableConsumptionItem +{ + public string Location { get; set; } + public double Year { get; set; } + public double Hydro { get; set; } + public double Solar { get; set; } + public double Wind { get; set; } + public double Other { get; set; } +} + +public class EnergyRenewableConsumption + : List +{ + public EnergyRenewableConsumption() + { + this.Add(new EnergyRenewableConsumptionItem() { Location = @"China", Year = 2019, Hydro = 1269.5, Solar = 223, Wind = 405.2, Other = 102.8 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"Europe", Year = 2019, Hydro = 632.54, Solar = 154, Wind = 461.3, Other = 220.3 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"USA", Year = 2019, Hydro = 271.16, Solar = 108, Wind = 303.4, Other = 78.34 }); + // ... 2 more items + } +} +``` + + +
+ +## Blazor Stacked 100% Bar Chart + +The Blazor Stacked 100% Bar Chart is identical to the Blazor Stacked Bar Chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100 bar chart presents the data in terms of percent of the sum of all values in a data point. + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Energy Consumption +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var stacked100BarSeries = this.stacked100BarSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbStacked100BarSeries stacked100BarSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbDataToolTipLayer dataToolTipLayer; + + private EnergyRenewableConsumption _energyRenewableConsumption = null; + public EnergyRenewableConsumption EnergyRenewableConsumption + { + get + { + if (_energyRenewableConsumption == null) + { + _energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return _energyRenewableConsumption; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class EnergyRenewableConsumptionItem +{ + public string Location { get; set; } + public double Year { get; set; } + public double Hydro { get; set; } + public double Solar { get; set; } + public double Wind { get; set; } + public double Other { get; set; } +} + +public class EnergyRenewableConsumption + : List +{ + public EnergyRenewableConsumption() + { + this.Add(new EnergyRenewableConsumptionItem() { Location = @"China", Year = 2019, Hydro = 1269.5, Solar = 223, Wind = 405.2, Other = 102.8 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"Europe", Year = 2019, Hydro = 632.54, Solar = 154, Wind = 461.3, Other = 220.3 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"USA", Year = 2019, Hydro = 271.16, Solar = 108, Wind = 303.4, Other = 78.34 }); + // ... 2 more items + } +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](area-chart.md) +- [Column Chart](column-chart.md) +- [Line Chart](line-chart.md) +- [Spline Chart](spline-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html) +- [`IgbCalloutLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html) +- [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html) +- [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html) +- [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/binding.md new file mode 100644 index 000000000..0a7cd5a88 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/binding.md @@ -0,0 +1,142 @@ +--- +title: Blazor Grid Lite Data Binding - Ignite UI for Blazor | MIT license +_description: Data binding for Grid Lite. Create apps with our open-source Blazor Grid Lite. It’s lightweight and packed with essential features. Try now. +_keywords: data binding, Blazor, {ComponentKeywords}, Ignite UI for Blazor, Infragistics +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_tocName: Data Binding +--- + +# Blazor Grid Lite Data Binding + + + +The Grid Lite accepts a `List` as its data source, where `T` is representing your model. Each grid row is the rendered representation of a data record in the array with row cells being controlled by the column configuration. + + + +When applying data transformations, such as sorting and filtering, the grid does not modify the original data reference. That is to say, data transformations will not be reflected in the original source. The grid does not track changes to the objects inside the data array, so direct modification of the data objects will not be reflected. + +## Change the Data Source at Runtime + +The component supports changing its data source at runtime. If the new source has a different "shape" than the previous one make sure to update your column configuration as well. + +```razor + + + + + +@code { + this.data = new List + { + }; +} +``` + + + +If the grid has `AutoGenerate` enabled, it will "*infer*" the new column configuration automatically when the data changes. + + + + + +```razor + + +@code { + // After the new binding the grid will infer the column collection from the bound data. + this.data = new List(); +} +``` + + + + + +> \[!NOTE] +> The sort/filter states of the Grid Lite are kept when changing the data source in this manner. +> Usually you will want to reset them by calling either `ClearSort()` and/or `ClearFilter()`. + + + +In the sample below, the grid has column auto-generation enabled. When you click on the switch data button, +the column collection is reset, and a new data source is bound to the grid. + +```razor +@page "/" +@using Microsoft.AspNetCore.Components +@using Microsoft.AspNetCore.Components.Web +@using IgniteUI.Blazor.Controls + +
+ + + + +
+ +@code { + private IgbGridLite productGrid; + private IgbGridLite grid; + private List users; + private List products; + private List data; + private List columns = new List(); + private bool showingProducts = true; + + protected override void OnInitialized() + { + products = MockDataGenerator.CreateProducts(50); + users = MockDataGenerator.CreateUsers(50); + data = products.ToList(); + + } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender) + { + grid.Data = data; + } + + base.OnAfterRender(firstRender); + } + + private async void SwitchData() + { + showingProducts = !showingProducts; + if (showingProducts) + { + this.columns = new List(); + this.data = products.ToList(); + } + else + { + this.columns = new List(); + this.data = users.ToList(); + } + } +} +``` + + + + +## Additional Resources + +- [Column Configuration](column-configuration.md) +- [Sorting](sorting.md) +- [Filtering](filtering.md) +- [Theming & Styling](theming.md) + +Our community is active and always welcoming to new ideas. + +- [Grid Lite **GitHub**](https://github.com/IgniteUI/IgniteUI.Grid.OSS) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md new file mode 100644 index 000000000..37b2e6a55 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md @@ -0,0 +1,865 @@ +--- +title: Blazor Bubble Chart | Data Visualization | Infragistics +_description: Infragistics' Blazor Bubble Chart +_keywords: Blazor Charts, Bubble Chart, Infragistics +_license: commercial +mentionedTypes: ["Series", "BubbleSeries", "ScatterSeries", "MarkerType"] +namespace: Infragistics.Controls.Charts +_tocName: Bubble Chart +_premium: true +--- + +# Blazor Bubble Chart + +The Ignite UI for Blazor Bubble Chart is a type of [Scatter Chart](scatter-chart.md) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.md#blazor-scatter-marker-chart) but with the option to have various radius scale sizes. + +## Blazor Bubble Chart Example + +You can create Ignite UI for Blazor Bubble Chart in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control using the [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html) and two numeric axes, as shown in the example below. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Total Population of Selected Countries +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var bubbleSeries1 = this.bubbleSeries1; + var bubbleSeries2 = this.bubbleSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbBubbleSeries bubbleSeries1; + private IgbSizeScale _sizeScale1 = null; + public IgbSizeScale SizeScale1 + { + get + { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgbSizeScale(); + sizeScale1.IsLogarithmic = false; + sizeScale1.MinimumValue = 10; + sizeScale1.MaximumValue = 80; + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + } + private IgbBubbleSeries bubbleSeries2; + private IgbSizeScale _sizeScale2 = null; + public IgbSizeScale SizeScale2 + { + get + { + if (this._sizeScale2 == null) + { + var sizeScale2 = new IgbSizeScale(); + sizeScale2.IsLogarithmic = false; + sizeScale2.MinimumValue = 10; + sizeScale2.MaximumValue = 80; + this._sizeScale2 = sizeScale2; + } + return this._sizeScale2; + } + } + private IgbDataToolTipLayer dataToolTipLayer; + + private CountryStatsAfrica _countryStatsAfrica = null; + public CountryStatsAfrica CountryStatsAfrica + { + get + { + if (_countryStatsAfrica == null) + { + _countryStatsAfrica = new CountryStatsAfrica(); + } + return _countryStatsAfrica; + } + } + + private CountryStatsEurope _countryStatsEurope = null; + public CountryStatsEurope CountryStatsEurope + { + get + { + if (_countryStatsEurope == null) + { + _countryStatsEurope = new CountryStatsEurope(); + } + return _countryStatsEurope; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryStatsAfricaItem +{ + public string Code { get; set; } + public double Population { get; set; } + public double WorkedHours { get; set; } + public double GDP { get; set; } + public string Name { get; set; } +} + +public class CountryStatsAfrica + : List +{ + public CountryStatsAfrica() + { + this.Add(new CountryStatsAfricaItem() { Code = @"DZA", Population = 39728000, WorkedHours = 47.5, GDP = 13725, Name = @"Algeria" }); + this.Add(new CountryStatsAfricaItem() { Code = @"AGO", Population = 27884000, WorkedHours = 39.8, GDP = 6228, Name = @"Angola" }); + this.Add(new CountryStatsAfricaItem() { Code = @"BEN", Population = 10576000, WorkedHours = 43.7, GDP = 1987, Name = @"Benin" }); + // ... 48 more items + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryStatsEuropeItem +{ + public string Code { get; set; } + public double Population { get; set; } + public double WorkedHours { get; set; } + public double GDP { get; set; } + public string Name { get; set; } +} + +public class CountryStatsEurope + : List +{ + public CountryStatsEurope() + { + this.Add(new CountryStatsEuropeItem() { Code = @"ALB", Population = 2891000, WorkedHours = 41, GDP = 10970, Name = @"Albania" }); + this.Add(new CountryStatsEuropeItem() { Code = @"AUT", Population = 8679000, WorkedHours = 30.75, GDP = 44305, Name = @"Austria" }); + this.Add(new CountryStatsEuropeItem() { Code = @"BLR", Population = 9439000, WorkedHours = 43.5, GDP = 17230, Name = @"Belarus" }); + // ... 38 more items + } +} +``` + + +
+ +## Blazor Bubble Chart with Single Series + +You can bind your data to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property of [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html) and map data columns using its [`XMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_XMemberPath), [`YMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_YMemberPath), [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusMemberPath) properties, as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var bubbleSeries1 = this.bubbleSeries1; + var dataToolTipLayer = this.dataToolTipLayer; + + } + + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbBubbleSeries bubbleSeries1; + private IgbSizeScale _sizeScale1 = null; + public IgbSizeScale SizeScale1 + { + get + { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgbSizeScale(); + sizeScale1.IsLogarithmic = false; + sizeScale1.MinimumValue = 10; + sizeScale1.MaximumValue = 80; + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + } + private IgbDataToolTipLayer dataToolTipLayer; + + private WorldStats _worldStats = null; + public WorldStats WorldStats + { + get + { + if (_worldStats == null) + { + _worldStats = new WorldStats(); + } + return _worldStats; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class WorldStatsItem +{ + public string Code { get; set; } + public string Short { get; set; } + public string Name { get; set; } + public string Continent { get; set; } + public double Population { get; set; } + public double GdpTotal { get; set; } + public string Economy { get; set; } + public string Region { get; set; } + public string Status { get; set; } + public double X { get; set; } + public double Y { get; set; } + public double GdpPerPerson { get; set; } + public double Rank { get; set; } + public double Unemployment { get; set; } + public double OilProduction { get; set; } + public double BirthRate { get; set; } + public double MedianAge { get; set; } + public double Electricity { get; set; } + public double Televisions { get; set; } + public double PublicDebt { get; set; } + public double Internet { get; set; } +} + +public class WorldStats + : List +{ + public WorldStats() + { + this.Add(new WorldStatsItem() { Code = @"CHN", Short = @"CN", Name = @"China", Continent = @"Asia", Population = 1379302771, GdpTotal = 21140000, Economy = @"Emerging", Region = @"Eastern Asia", Status = @"Country", X = 104.18, Y = 35.887, GdpPerPerson = 15327, Rank = 1, Unemployment = 4, OilProduction = 3725000, BirthRate = 14, MedianAge = 34, Electricity = 3256000, Televisions = 400000000, PublicDebt = 18, Internet = 253000000 }); + this.Add(new WorldStatsItem() { Code = @"IND", Short = @"IN", Name = @"India", Continent = @"Asia", Population = 1281935911, GdpTotal = 8721000, Economy = @"Emerging", Region = @"Southern Asia", Status = @"Country", X = 78.022, Y = 22.665, GdpPerPerson = 6803, Rank = 2, Unemployment = 7, OilProduction = 810000, BirthRate = 22, MedianAge = 25, Electricity = 661600, Televisions = 63000000, PublicDebt = 58, Internet = 80000000 }); + this.Add(new WorldStatsItem() { Code = @"USA", Short = @"US", Name = @"United States", Continent = @"North America", Population = 326625791, GdpTotal = 18560000, Economy = @"Developed", Region = @"Northern America", Status = @"Country", X = -101.8, Y = 39.818, GdpPerPerson = 56823, Rank = 3, Unemployment = 5, OilProduction = 7460000, BirthRate = 14, MedianAge = 37, Electricity = 4062000, Televisions = 219000000, PublicDebt = 61, Internet = 223000000 }); + // ... 239 more items + } +} +``` + + +
+ +## Blazor Bubble Chart with Multiple Series + +In Blazor Bubble Chart, binding multiple data sources works by setting each new data source to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property of a additional [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Total Population of Selected Countries +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var bubbleSeries1 = this.bubbleSeries1; + var bubbleSeries2 = this.bubbleSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbBubbleSeries bubbleSeries1; + private IgbSizeScale _sizeScale1 = null; + public IgbSizeScale SizeScale1 + { + get + { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgbSizeScale(); + sizeScale1.IsLogarithmic = false; + sizeScale1.MinimumValue = 10; + sizeScale1.MaximumValue = 80; + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + } + private IgbBubbleSeries bubbleSeries2; + private IgbSizeScale _sizeScale2 = null; + public IgbSizeScale SizeScale2 + { + get + { + if (this._sizeScale2 == null) + { + var sizeScale2 = new IgbSizeScale(); + sizeScale2.IsLogarithmic = false; + sizeScale2.MinimumValue = 10; + sizeScale2.MaximumValue = 80; + this._sizeScale2 = sizeScale2; + } + return this._sizeScale2; + } + } + private IgbDataToolTipLayer dataToolTipLayer; + + private CountryStatsAfrica _countryStatsAfrica = null; + public CountryStatsAfrica CountryStatsAfrica + { + get + { + if (_countryStatsAfrica == null) + { + _countryStatsAfrica = new CountryStatsAfrica(); + } + return _countryStatsAfrica; + } + } + + private CountryStatsEurope _countryStatsEurope = null; + public CountryStatsEurope CountryStatsEurope + { + get + { + if (_countryStatsEurope == null) + { + _countryStatsEurope = new CountryStatsEurope(); + } + return _countryStatsEurope; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryStatsAfricaItem +{ + public string Code { get; set; } + public double Population { get; set; } + public double WorkedHours { get; set; } + public double GDP { get; set; } + public string Name { get; set; } +} + +public class CountryStatsAfrica + : List +{ + public CountryStatsAfrica() + { + this.Add(new CountryStatsAfricaItem() { Code = @"DZA", Population = 39728000, WorkedHours = 47.5, GDP = 13725, Name = @"Algeria" }); + this.Add(new CountryStatsAfricaItem() { Code = @"AGO", Population = 27884000, WorkedHours = 39.8, GDP = 6228, Name = @"Angola" }); + this.Add(new CountryStatsAfricaItem() { Code = @"BEN", Population = 10576000, WorkedHours = 43.7, GDP = 1987, Name = @"Benin" }); + // ... 48 more items + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryStatsEuropeItem +{ + public string Code { get; set; } + public double Population { get; set; } + public double WorkedHours { get; set; } + public double GDP { get; set; } + public string Name { get; set; } +} + +public class CountryStatsEurope + : List +{ + public CountryStatsEurope() + { + this.Add(new CountryStatsEuropeItem() { Code = @"ALB", Population = 2891000, WorkedHours = 41, GDP = 10970, Name = @"Albania" }); + this.Add(new CountryStatsEuropeItem() { Code = @"AUT", Population = 8679000, WorkedHours = 30.75, GDP = 44305, Name = @"Austria" }); + this.Add(new CountryStatsEuropeItem() { Code = @"BLR", Population = 9439000, WorkedHours = 43.5, GDP = 17230, Name = @"Belarus" }); + // ... 38 more items + } +} +``` + + +
+ +## Blazor Bubble Chart Styling + +In Blazor Bubble Chart, you can customize shape of bubble markers using [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerType) property, their size with [`RadiusScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusScale) property, and their appearance using [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerBrush), [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerOutline), [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerThickness) properties. In addition, you can also color bubble markers based on a data column using [`FillMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillMemberPath) and [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillScale) properties. In this example, usage of above properties is demonstrated. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var bubbleSeries1 = this.bubbleSeries1; + var dataToolTipLayer = this.dataToolTipLayer; + + } + + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbBubbleSeries bubbleSeries1; + private IgbSizeScale _sizeScale1 = null; + public IgbSizeScale SizeScale1 + { + get + { + if (this._sizeScale1 == null) + { + var sizeScale1 = new IgbSizeScale(); + sizeScale1.IsLogarithmic = false; + sizeScale1.MinimumValue = 10; + sizeScale1.MaximumValue = 80; + this._sizeScale1 = sizeScale1; + } + return this._sizeScale1; + } + } + private IgbDataToolTipLayer dataToolTipLayer; + + private WorldStats _worldStats = null; + public WorldStats WorldStats + { + get + { + if (_worldStats == null) + { + _worldStats = new WorldStats(); + } + return _worldStats; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class WorldStatsItem +{ + public string Code { get; set; } + public string Short { get; set; } + public string Name { get; set; } + public string Continent { get; set; } + public double Population { get; set; } + public double GdpTotal { get; set; } + public string Economy { get; set; } + public string Region { get; set; } + public string Status { get; set; } + public double X { get; set; } + public double Y { get; set; } + public double GdpPerPerson { get; set; } + public double Rank { get; set; } + public double Unemployment { get; set; } + public double OilProduction { get; set; } + public double BirthRate { get; set; } + public double MedianAge { get; set; } + public double Electricity { get; set; } + public double Televisions { get; set; } + public double PublicDebt { get; set; } + public double Internet { get; set; } +} + +public class WorldStats + : List +{ + public WorldStats() + { + this.Add(new WorldStatsItem() { Code = @"CHN", Short = @"CN", Name = @"China", Continent = @"Asia", Population = 1379302771, GdpTotal = 21140000, Economy = @"Emerging", Region = @"Eastern Asia", Status = @"Country", X = 104.18, Y = 35.887, GdpPerPerson = 15327, Rank = 1, Unemployment = 4, OilProduction = 3725000, BirthRate = 14, MedianAge = 34, Electricity = 3256000, Televisions = 400000000, PublicDebt = 18, Internet = 253000000 }); + this.Add(new WorldStatsItem() { Code = @"IND", Short = @"IN", Name = @"India", Continent = @"Asia", Population = 1281935911, GdpTotal = 8721000, Economy = @"Emerging", Region = @"Southern Asia", Status = @"Country", X = 78.022, Y = 22.665, GdpPerPerson = 6803, Rank = 2, Unemployment = 7, OilProduction = 810000, BirthRate = 22, MedianAge = 25, Electricity = 661600, Televisions = 63000000, PublicDebt = 58, Internet = 80000000 }); + this.Add(new WorldStatsItem() { Code = @"USA", Short = @"US", Name = @"United States", Continent = @"North America", Population = 326625791, GdpTotal = 18560000, Economy = @"Developed", Region = @"Northern America", Status = @"Country", X = -101.8, Y = 39.818, GdpPerPerson = 56823, Rank = 3, Unemployment = 5, OilProduction = 7460000, BirthRate = 14, MedianAge = 37, Electricity = 4062000, Televisions = 219000000, PublicDebt = 61, Internet = 223000000 }); + // ... 239 more items + } +} +``` + + +
+ +## Additional Resources + +- [Scatter Chart](scatter-chart.md) +- [Shape Chart](shape-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) +- [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html) +- [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`FillMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillMemberPath) +- [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillScale) +- [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerType) +- [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerBrush) +- [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerOutline) +- [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerThickness) +- [`RadiusScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusScale) +- [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusMemberPath) +- [`XMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_XMemberPath) +- [`YMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_YMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md new file mode 100644 index 000000000..5c1c24613 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md @@ -0,0 +1,866 @@ +--- +title: Blazor Bullet Graph | Data Visualization Tools | Infragistics +_description: Infragistics' Blazor bullet graph control allows you to create dashboards displaying ranges or comparing multiple measurements. View our data visualization tools! +_keywords: Blazor Bullet Graph, animation, labels, needle, scales, ranges, tick marks, Infragistics +_license: commercial +mentionedTypes: ["XamBulletGraph"] +namespace: Infragistics.Controls.Gauges +_tocName: Bullet Graph +_premium: true +--- + +# Blazor Bullet Graph Overview + +The Blazor bullet graph component allows for a linear and concise view of measures compared against a scale. + +The Ignite UI for Blazor bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible. + +## Blazor Bullet Graph Example + +The following sample demonstrates how setting multiple properties on the same [`IgbBulletGraph`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html) can transform it to completely different bullet graph. + +```razor +@using System.Collections.ObjectModel +@using IgniteUI.Blazor.Controls + + +
+
+ + + +
+
+ + + @if (GaugeRanges.Count > 0) + { + GaugeRangeInfo info0 = GaugeRanges[0]; + + + } + @if (GaugeRanges.Count > 1) + { + GaugeRangeInfo info1 = GaugeRanges[1]; + + + } + @if (GaugeRanges.Count > 2) + { + GaugeRangeInfo info2 = GaugeRanges[2]; + + + } + + +
+
+ +@code { + + private double MinimumValue; + private double MaximumValue; + private double Value; + private double Interval; + private int TransitionDuration; + + private double LabelInterval; + private double LabelExtent; + + private double ValueInnerExtent; + private double ValueOuterExtent; + private string ValueBrush; + + private string TargetValueBrush; + private double TargetValueBreadth; + private double TargetValue; + + private double MinorTickCount; + private double MinorTickEndExtent; + private double MinorTickStartExtent; + private double TickStartExtent; + private double TickEndExtent; + private double TickStrokeThickness; + + private double ScaleBackgroundThickness; + private string ScaleBackgroundBrush; + private string ScaleBackgroundOutline; + private double ScaleStartExtent; + private double ScaleEndExtent; + + private string BackingBrush; + private string BackingOutline; + private double BackingStrokeThickness; + + private bool ShouldAnimate = false; + + private List GaugeRanges; + + protected override void OnInitialized() + { + this.MinimumValue = 0; + this.MaximumValue = 120; + this.ValueBrush = "#4286F4"; + this.Value = 70; + this.TargetValueBrush = "#4286F4"; + this.TargetValue = 90; + this.TargetValueBreadth = 10; + this.Interval = 10; + this.LabelInterval = 10; + this.LabelExtent = 0.02; + this.ScaleBackgroundThickness = 0; + this.ScaleBackgroundBrush = "#DBDBDB"; + this.ScaleBackgroundOutline = "Gray"; + this.TransitionDuration = 0; + + this.GaugeRanges = new List(); + + this.onAnimateToGauge3(); + } + + private void onAnimateToGauge1() + { + if (ShouldAnimate) + { + this.TransitionDuration = 1000; + } + this.MinimumValue = 0; + this.MaximumValue = 80; + this.Value = 70; + this.Interval = 20; + + // setting appearance of labels + this.LabelInterval = 10; + this.LabelExtent = 0.02; + + // setting custom appearance of performance bar + this.ValueInnerExtent = 0.5; + this.ValueOuterExtent = 0.7; + this.ValueBrush = "#000000"; + + // setting custom appearance of target bar + this.TargetValueBrush = "#000000"; + this.TargetValueBreadth = 10; + this.TargetValue = 60; + + // setting appearance of major/minor ticks + this.MinorTickCount = 5; + this.MinorTickEndExtent = 0.10; + this.MinorTickStartExtent = 0.20; + this.TickStartExtent = 0.20; + this.TickEndExtent = 0.05; + this.TickStrokeThickness = 2; + + // setting extent of gauge scale + this.ScaleBackgroundThickness = 0.5; + this.ScaleBackgroundBrush = "#dbdbdb"; + this.ScaleBackgroundOutline = "gray"; + this.ScaleStartExtent = 0.05; + this.ScaleEndExtent = 0.95; + this.ScaleBackgroundThickness = 0; + + // setting appearance of backing fill and outline + this.BackingBrush = "#f7f7f7"; + this.BackingOutline = "#d1d1d1"; + this.BackingStrokeThickness = 0; + + var colors = new List() { "#A4BD29", "#F86232" }; + var ranges = new List(); + for (int i = 0; i < colors.Count; i++) + { + var info = new GaugeRangeInfo() + { + Name = "range " + i.ToString(), + StartValue = i * 40, + EndValue = (i * 40) + 40, + Brush = colors[i], + Outline = colors[i], + InnerStartExtent = 0.2, + InnerEndExtent = 0.2, + OuterStartExtent = 0.95, + OuterEndExtent = 0.95 + }; + ranges.Add(info); + } + this.GaugeRanges = ranges; + this.ShouldAnimate = true; + } + + private void onAnimateToGauge2() + { + if (ShouldAnimate) + { + this.TransitionDuration = 1000; + } + this.MinimumValue = 100; + this.MaximumValue = 200; + this.Value = 120; + this.Interval = 10; + + // setting appearance of labels + this.LabelInterval = 10; + this.LabelExtent = 0.02; + + // setting custom appearance of performance bar + this.ValueInnerExtent = 0.5; + this.ValueOuterExtent = 0.7; + this.ValueBrush = "#000000"; + + // setting custom appearance of target bar + this.TargetValueBrush = "#000000"; + this.TargetValueBreadth = 10; + this.TargetValue = 180; + + // setting appearance of major/minor ticks + this.MinorTickCount = 5; + this.MinorTickEndExtent = 0.10; + this.MinorTickStartExtent = 0.20; + this.TickStartExtent = 0.20; + this.TickEndExtent = 0.05; + this.TickStrokeThickness = 2; + + // setting extent of gauge scale + this.ScaleBackgroundThickness = 0.5; + this.ScaleBackgroundBrush = "#dbdbdb"; + this.ScaleBackgroundOutline = "gray"; + this.ScaleStartExtent = 0.05; + this.ScaleEndExtent = 0.95; + this.ScaleBackgroundThickness = 0; + + // setting appearance of backing fill and outline + this.BackingBrush = "#f7f7f7"; + this.BackingOutline = "#d1d1d1"; + this.BackingStrokeThickness = 0; + + var colors = new List() { "#0078C8", "#21A7FF", "#4FB9FF" }; + double[] startValues = { 100, 150, 175 }; + double[] endValues = { 150, 175, 200 }; + + var ranges = new List(); + for (int i = 0; i < colors.Count; i++) + { + var info = new GaugeRangeInfo() + { + Name = "range " + i.ToString(), + StartValue = startValues[i], + EndValue = endValues[i], + Brush = colors[i], + Outline = colors[i], + InnerStartExtent = 0.2, + InnerEndExtent = 0.2, + OuterStartExtent = 0.95, + OuterEndExtent = 0.95 + }; + ranges.Add(info); + } + this.GaugeRanges = ranges; + this.ShouldAnimate = true; + } + + private void onAnimateToGauge3() + { + if (ShouldAnimate) + { + this.TransitionDuration = 1000; + } + this.MinimumValue = 0; + this.MaximumValue = 120; + this.Value = 70; + this.Interval = 10; + + // setting appearance of labels + this.LabelInterval = 10; + this.LabelExtent = 0.02; + + // setting custom appearance of performance bar + this.ValueInnerExtent = 0.5; + this.ValueOuterExtent = 0.7; + this.ValueBrush = "#000000"; + + // setting custom appearance of target bar + this.TargetValueBrush = "#000000"; + this.TargetValueBreadth = 10; + this.TargetValue = 90; + + // setting appearance of major/minor ticks + this.MinorTickCount = 5; + this.MinorTickEndExtent = 0.10; + this.MinorTickStartExtent = 0.20; + this.TickStartExtent = 0.20; + this.TickEndExtent = 0.05; + this.TickStrokeThickness = 2; + + // setting extent of gauge scale + this.ScaleBackgroundThickness = 0.5; + this.ScaleBackgroundBrush = "#dbdbdb"; + this.ScaleBackgroundOutline = "gray"; + this.ScaleStartExtent = 0.05; + this.ScaleEndExtent = 0.95; + this.ScaleBackgroundThickness = 0; + + // setting appearance of backing fill and outline + this.BackingBrush = "#f7f7f7"; + this.BackingOutline = "#d1d1d1"; + this.BackingStrokeThickness = 0; + + var colors = new List() { "#FF9800", "#F96232", "#C62828" }; + var ranges = new List(); + + for (int i = 0; i < colors.Count; i++) + { + var info = new GaugeRangeInfo() + { + Name = "range " + i.ToString(), + StartValue = i * 40, + EndValue = (i * 40) + 40, + Brush = colors[i], + Outline = colors[i], + InnerStartExtent = 0.2, + InnerEndExtent = 0.2, + OuterStartExtent = 0.95, + OuterEndExtent = 0.95 + }; + ranges.Add(info); + } + this.GaugeRanges = ranges; + this.ShouldAnimate = true; + } +} +``` + + +
+ +The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`TransitionDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_TransitionDuration) property. +The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. + +## Component Modules + +The [`IgbBulletGraph`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html) requires the following modules: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbBulletGraphModule)); +``` + +
+ +## Usage + +The following code walks through creating a bullet graph component, and configuring a performance bar, comparative measure marker, and three comparative ranges on the scale. + +```razor + + + + + +``` + +
+ +## Comparative Measures + +The bullet graph can show two measures: performance value and target value. + +Performance value is the primary measure displayed by the component and it is visualized as a bar that stretches along the length of the whole graph. The target value is a measure which the performance value compares against. It is displayed as a small block that runs perpendicular to the orientation of the performance bar. + +```razor + + +``` + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + +
+
+ +@code { + +} +``` + + +## Highlight Value + +The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_Value) appear with a lower opacity. A good example is if [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_Value) is 50 and [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValue) is set to 25. This would represent a performance of 50% regardless of what the value of [`TargetValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_TargetValue) is set to. To enable this first set [`HighlightValueDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValueDisplayMode) to Overlay and then apply a [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValue) to something lower than [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_Value). + +```razor + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + +
+
+ +@code { + +} +``` + + +## Comparative Ranges + +The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. + +```razor + + + + + + + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + + + + + +
+
+ +@code { + +} +``` + + +## Tick Marks + +The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. + +- Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties. +- Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. + +```razor + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + +
+
+ +@code { + +} +``` + + +## Labels + +The labels indicate the measures on the scale. + +```razor + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + +
+
+ +@code { + +} +``` + + +## Backing + +The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. + +```razor + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + +
+
+ +@code { + +} +``` + + +## Scale + +The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`IsScaleInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_IsScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. + +```razor + + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + +
+
+ +@code { + +} +``` + + +## Summary + +For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. + +```razor + + + + + + + + +``` + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgbBulletGraph`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html) +- [`IgbLinearGraphRange`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearGraphRange.html) + +## Additional Resources + +You can find more information about other types of gauges in these topics: + +- [Linear Gauge](linear-gauge.md) +- [Radial Gauge](radial-gauge.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md new file mode 100644 index 000000000..c66ed3dbf --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md @@ -0,0 +1,405 @@ +--- +title: Blazor Button Group Component | Ignite UI for Blazor +_description: Get started with the Blazor Button Group Component - series of Blazor Toggle Buttons, exposing features such as layout and selection. +_keywords: Blazor, UI controls, web widgets, UI widgets, Blazor Button Group Components, Infragistics +mentionedTypes: ["ToggleButton", "ButtonGroup"] +_license: MIT +_tocName: Button Group +--- + +# Blazor Button Group Overview + +The Blazor Button Group component is used to organize [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html)'s into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling. + +## Blazor Button Example + +```razor +@using IgniteUI.Blazor.Controls + + + +
+ + + + + + + + + + + + + + + + + + +
+ + @code { + private string formatAlignLeft = ""; + private string formatAlignCenter = ""; + private string formatAlignRight = ""; + private string formatAlignJustify = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (this.iconRef != null && firstRender) + { + this.iconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.iconRef.RegisterIconFromText("format_align_left", formatAlignLeft, "material"); ; + this.iconRef.RegisterIconFromText("format_align_center", formatAlignCenter, "material"); ; + this.iconRef.RegisterIconFromText("format_align_right", formatAlignRight, "material"); ; + this.iconRef.RegisterIconFromText("format_align_justify", formatAlignJustify, "material"); ; + })); + } + } +} +``` + + +## Usage + + + +Before using the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + + + +For a complete introduction to the Ignite UI for Blazor, read the [**Getting Started**](../general-getting-started.md) topic. + +Now that you have the Ignite UI for Blazor Button Group imported, you can start with a basic configuration of the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) and its buttons. + +Use the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) selector to wrap your [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html)s and display them into a button group. If you want a button to be selected by default, use the [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html#IgniteUI_Blazor_Controls_IgbToggleButton_Selected) attribute: + +```razor + + + + + + + + + + + + + + + + + + +``` + +## Examples + +### Alignment + +Use the [`Alignment`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html#IgniteUI_Blazor_Controls_IgbButtonGroup_Alignment) property to set the orientation of the buttons in the button group. + +```razor +@using IgniteUI.Blazor.Controls + + + +
+ + + Sofia + + + + London + + + + New York + + + + Tokyo + + + +
+ + @code { + +} +``` + + +### Selection + +In order to configure the Ignite UI for Blazor [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) selection, you could use its [`Selection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html#IgniteUI_Blazor_Controls_IgbButtonGroup_Selection) property. This property accepts the following three modes: + +- **single** - default selection mode of the button group. A single button can be selected/deselected by the user. +- **single-required** - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction. +- **multiple** - multiple buttons in the group can be selected and deselected. + +The sample below demonstrates the exposed [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) selection modes: + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ + + Single + Single-Required + Multiple + +
+ + + + + + + + + + + + + + +
+ + @code { + private string boldIcon = ""; + private string italicIcon = ""; + private string underlinedIcon = ""; + + private IgbIcon iconRef; + private IgbButtonGroup buttonGroupRef; + + protected override void OnAfterRender(bool firstRender) + { + if (this.iconRef != null && firstRender) + { + this.iconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.iconRef.RegisterIconFromText("bold", boldIcon, "material");; + this.iconRef.RegisterIconFromText("italic", italicIcon, "material"); ; + this.iconRef.RegisterIconFromText("underlined", underlinedIcon, "material"); ; + })); + } + } + + private void OnSingleClick() + { + this.buttonGroupRef.Selection = ButtonGroupSelection.Single; + } + + private void OnSingleRequiredClick() + { + this.buttonGroupRef.Selection = ButtonGroupSelection.SingleRequired; + } + + private void OnMultipleClick() + { + this.buttonGroupRef.Selection = ButtonGroupSelection.Multiple; + } +} +``` + + +A [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html) could be marked as selected via its [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html#IgniteUI_Blazor_Controls_IgbToggleButton_Selected) attribute or through the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) [`SelectedItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html#IgniteUI_Blazor_Controls_IgbButtonGroup_SelectedItems) attribute: + +```razor + + + + + + + + + + + + + + +``` + +> \[!Note] +> Setting [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html) [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html#IgniteUI_Blazor_Controls_IgbToggleButton_Value) attribute is mandatory for using the [`SelectedItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html#IgniteUI_Blazor_Controls_IgbButtonGroup_SelectedItems) property of the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html). + +### Size + +The `--ig-size` CSS custom property can be used to control the size of the button group. + +```razor +@using IgniteUI.Blazor.Controls + +
+ + + Small + + + Medium + + + Large + + +
+ +@code { + private string style = "--ig-size: var(--ig-size-large)"; + + private void OnSelect(IgbComponentValueChangedEventArgs args) + { + this.style = $"--ig-size: var(--ig-size-{args.Detail})"; + } +} +``` + + +## Styling + +The [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) component exposes `group` CSS part that allows us to style the button group container. +Also, the [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html)s provide `toggle` CSS part that could be used to style the button element. + +```css +igc-button-group::part(group) { + background-color: var(--ig-primary-500); + padding: 8px; +} + +igc-toggle-button::part(toggle) { + color: var(--ig-secondary-300); +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + + +
+ + + Sofia + + + + London + + + + New York + + + + Tokyo + + + +
+ + @code { + +} +``` + + +## API Reference + +- [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) +- [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html) +- [`IgbRipple`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRipple.html) +- [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md new file mode 100644 index 000000000..3ce3eef1a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md @@ -0,0 +1,343 @@ +--- +title: Blazor Button Component | Ignite UI for Blazor +_description: Get started with the Blazor Button Component. Select button variants, configure sizes, define styling, and gain flexibility through the Blazor Button OnClick event. +_keywords: Blazor, UI controls, web widgets, UI widgets, Blazor Button Components, Infragistics +mentionedTypes: ["Button", "ButtonBase"] +_license: MIT +_tocName: Button +--- + +# Blazor Button Overview + +The Blazor Button Component lets you enable clickable elements that trigger actions in your Blazor app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the Blazor Button OnClick event, toggle the Blazor button, disable the Blazor button, and more. + +## Blazor Button Example + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + +
+ Flat + Contained + Outlined +
+
+ +@code { + +} +``` + + +## Usage + + + +Before using the [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + +```razor + +``` + +## Prefix / Suffix + +With `prefix` and `suffix` slots of the [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) component, we can add different content before and after the main content of the button. + +```razor + + +Click me- + +``` + +## Type + +The button component will change its internal structure from a [` + +
+ @if (Data != null) + { + + + } +
+ + +@code { + + + private int _transitionInterval = 1000; // milliseconds + private int TransitionInInterval + { + get { return _transitionInterval; } + set + { + _transitionInterval = value; + StateHasChanged(); + } + } + private string IntervalLabel + { + get + { + return (_transitionInterval).ToString("0") + "ms"; + } + } + private CategoryTransitionInMode _selectedTransition; + private CategoryTransitionInMode SelectedTransition + { + get { return _selectedTransition; } + set + { + _selectedTransition = value; + StateHasChanged(); + } + } + private IgbCategoryChart _Chart; + private IgbCategoryChart Chart + { + get { return _Chart; } + set { _Chart = value; + StateHasChanged(); + } + } + + private List Data = new EnergyRenewableData(); + + private void OnTransitionIntervalChange(ChangeEventArgs args) + { + this.TransitionInInterval = int.Parse(args.Value.ToString()); + } + + private void OnReloadChart() + { + this.Chart.ReplayTransitionIn(); + } +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) +- [`IsTransitionInEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_IsTransitionInEnabled) +- [`TransitionInDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_TransitionInDuration) +- [`TransitionInMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_TransitionInMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-annotations.md new file mode 100644 index 000000000..60689a5ad --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-annotations.md @@ -0,0 +1,483 @@ +--- +title: Blazor Chart Annotations | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Annotations +_keywords: Blazor Charts, Annotations, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Annotations +_premium: true +--- + +# Blazor Chart Annotations + +The Blazor chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. These layers are dependent on the cursor position. Each of these annotation layers provides a different hover interaction that may be used individually or combined with others to provide powerful hover interactions. + +## Blazor Annotations Example + +The following example demonstrates the annotation layers that are available on the Blazor chart. Click on the checkboxes to turn each layer on and off. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + + +
+ +
+ @if (Data != null) + { + + + } +
+
+ +@code { + + private List Data = new EnergyRenewableData(); + private List CalloutData = new List(); + + private IgbCategoryChart _Chart; + private IgbCategoryChart Chart + { + get { return _Chart; } + set { _Chart = value; + Chart.MarkerTypes.Add(MarkerType.Circle); + StateHasChanged(); } + } + private bool MarkersVisible = true; + private bool FinalValuesVisible = true; + private bool CalloutsVisible = true; + private bool CrosshairsVisible = true; + + private CrosshairsDisplayMode CrosshairMode = CrosshairsDisplayMode.Both; + + private void OnMarkersVisibleCheckBoxChange(ChangeEventArgs args) + { + Chart.MarkerTypes.Clear(); + bool value = args.Value != null ? (bool)args.Value : false; + if (value == true) + { + Chart.MarkerTypes.Add(MarkerType.Automatic); + } + else { + Chart.MarkerTypes.Add(MarkerType.None); + } + this.MarkersVisible = value; + } + private void OnFinalValuesCheckboxChange(ChangeEventArgs args) + { + this.FinalValuesVisible = (bool)args.Value; + } + private void OnCalloutsVisibleCheckboxChange(ChangeEventArgs args) + { + this.CalloutsVisible = (bool)args.Value; + } + private void OnCrosshairsVisibleCheckboxChange(ChangeEventArgs args) + { + bool isVisible = (bool)args.Value; + this.CrosshairMode = isVisible ? CrosshairsDisplayMode.Both : CrosshairsDisplayMode.None; + } + protected override void OnInitialized() + { + for (int i = 0; i < this.Data.Count; i++) + { + CalloutData.Add( + new CalloutInfo { + Index = i, Label = + this.Data[i].USA + " " + "TWh", + Value = this.Data[i].USA }); + } + } + + public class CalloutInfo + { + public int Index { get; set; } + public int Value { get; set; } + public string Label { get; set; } + } +} +``` + + +
+ +Like this sample? Get access to our complete Blazor toolkit and start building your own apps in minutes. Download it for free. + +## Blazor Crosshair Layer + +The [`IgbCrosshairLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCrosshairLayer.html) renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines. + +Crosshair types include: + +- Horizontal +- Vertical +- Both + +The chart's crosshairs can also be configured to snap to data points by setting the [`CrosshairsSnapToData`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_CrosshairsSnapToData) property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis. + +You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCrosshairLayer.html#IgniteUI_Blazor_Controls_IgbCrosshairLayer_TargetSeries) property. + +By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the [`Brush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Brush) property of the Crosshair Layer. + +The following example shows how to configure the crosshair layer but targeting a single series, setting the type to vertical and styling the brush color. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ @if (Data != null) + { + + + + + + + + + } +
+
+ +@code { + + private List Data = new EnergyRenewableData(); + +} +``` + + +
+ +## Blazor Final Value Layer + +The [`IgbFinalValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinalValueLayer.html) of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control provides a quick view along the axis of the ending value displayed in a series. + +You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCrosshairLayer.html#IgniteUI_Blazor_Controls_IgbCrosshairLayer_TargetSeries) property. + +You can also customize this annotation by setting the following properties: + +- [`AxisAnnotationBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinalValueLayer.html#IgniteUI_Blazor_Controls_IgbFinalValueLayer_AxisAnnotationBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. +- [`AxisAnnotationTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinalValueLayer.html#IgniteUI_Blazor_Controls_IgbFinalValueLayer_AxisAnnotationTextColor): This property is used to choose the brush for the annotation's text color. +- [`AxisAnnotationOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinalValueLayer.html#IgniteUI_Blazor_Controls_IgbFinalValueLayer_AxisAnnotationOutline): This property is used to choose the brush for the annotation's outline color. + +The following example demonstrates how to style the final value layer annotation by setting the properties listed above. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ @if (Data != null) + { + + + + + + + + + } +
+
+ +@code { + + private List Data = new EnergyRenewableData(); + +} +``` + + +
+ +## Blazor Callout Layer + +The [`IgbCalloutLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html) displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source. + +Use the callout annotations to display additional information, such as notes or specific details about data points, that you would like to point out to your users. + +You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_TargetSeries) property. + +You can also customize this annotation by setting the following properties: + +- [`CalloutLeaderBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_CalloutLeaderBrush): This property is used to choose the brush for the leader lines for the callouts for the layer. +- [`CalloutOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_CalloutOutline): This property is used to choose the brush for the annotation's outline color. +- [`CalloutBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_CalloutBackground): This property is used to choose the brush for the annotation's background color. The default is to use the series brush. +- [`CalloutTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_CalloutTextColor): This property is used to choose the brush for the annotation's text color. +- [`CalloutStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_CalloutStrokeThickness): This property is used to choose the thickness for the callout backing. +- [`CalloutCornerRadius`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_CalloutCornerRadius): This property is used to curve the corners of the callouts. +- [`AllowedPositions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_AllowedPositions): This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom + +The following example demonstrates how to style the callout layer annotations by setting the properties listed above: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var lineSeries1 = this.lineSeries1; + var calloutLayer1 = this.calloutLayer1; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbLineSeries lineSeries1; + private IgbCalloutLayer calloutLayer1; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ + + +### Timeline Styling + +The following example demonstrates how to style the data chart as a timeline with annotations by setting the [`AllowedPositions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html#IgniteUI_Blazor_Controls_IgbCalloutLayer_AllowedPositions) properties listed above: + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + +
+ +@code { + private List CategoryData; + private IgbNumericYAxis NumericYAxis; + private IgbTimeXAxis TimeXAxis; + private IgbCalloutLayer CalloutLayer; + private IgbLineSeries LineSeries1; + + private IgbDataChart _chart; + private IgbDataChart Chart + { + get { return _chart; } + set + { + _chart = value; + this.OnChart(); + + value.Axes.Add(this.TimeXAxis); + value.Axes.Add(this.NumericYAxis); + value.Series.Add(this.LineSeries1); + value.Series.Add(this.CalloutLayer); + StateHasChanged(); + } + } + + private void OnChart() + { + this.CategoryData = SampleTimelineData.Create(); + this.InitAxes(); + this.InitCategorySeries(); + } + + public void InitCategorySeries() + { + this.LineSeries1 = new IgbLineSeries() + { + Brush = "Navy", + DataSource = this.CategoryData, + XAxisName = "TimeXAxis", + YAxisName = "NumericYAxis", + ValueMemberPath = "Y", + Thickness = 15, + MarkerThickness = 15, + MarkerBrush = "#EC0D00", + MarkerOutline = "#EC0D00", + MarkerFillMode = MarkerFillMode.MatchMarkerOutline, + ShowDefaultTooltip = false, + }; + + this.CalloutLayer = new IgbCalloutLayer() + { + TargetSeries = this.LineSeries1, + DataSource = this.CategoryData, + XMemberPath = "Date", + YMemberPath = "Y", + LabelMemberPath = "Year", + IsAutoCalloutBehaviorEnabled = false, + UseValueForAutoCalloutLabels = false, + CalloutLeaderBrush = "#EC0D00", + CalloutTextColor = "Navy", + CalloutOutline = "#EC0D00", + CalloutBackground = "Transparent", + IsCalloutOffsettingEnabled = false, + TextStyle = "font-size: 25px", + CalloutPositionPadding = 50, + CalloutCollisionMode = CalloutCollisionMode.Greedy, + ShowDefaultTooltip = false, + }; + + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Top); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopLeft); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopRight); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Bottom); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomLeft); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomRight); + } + + public void InitAxes() + { + this.NumericYAxis = new IgbNumericYAxis() { Name = "NumericYAxis", Title = "Numeric Y Axis", MinimumValue=0, MaximumValue=10, LabelVisibility = Visibility.Collapsed, MajorStrokeThickness=0.0 }; + this.TimeXAxis = new IgbTimeXAxis() { Name = "TimeXAxis", Title = "Time X Axis", DataSource = this.CategoryData, DateTimeMemberPath = "Date", LabelVisibility = Visibility.Collapsed }; + } + +} +``` + + + + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`CrosshairsSnapToData`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_CrosshairsSnapToData) +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md new file mode 100644 index 000000000..006b91510 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md @@ -0,0 +1,122 @@ +--- +title: Blazor Chart API | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Blazor chart provides useful API to configure and styles chart visuals +_keywords: Blazor charts, chart API, API, Ignite UI for Blazor, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "CategoryChart", "FinancialChart", "SeriesViewer", "XamDoughnutChart", "XamPieChart", "XamSparkline", "DataPieChart" ] +namespace: Infragistics.Controls.Charts +_tocName: Chart API +_premium: true +--- + +# Blazor Charts API + +The Ignite UI for Blazor charts provide simple and easy to use APIs to plot your data in [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html), [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html), [`IgbDoughnutChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDoughnutChart.html), [`IgbPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html), and [`IgbSparkline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html) UI elements. + +## Blazor Category Chart API + +The Blazor [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) has the following API members: + +| Chart Properties | Axis Properties | Series Properties | +|------------------|-----------------|-------------------| +| - [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType)
- [`ExcludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ExcludedProperties)
- [`IncludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IncludedProperties)
- [`IsHorizontalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsHorizontalZoomEnabled)
- [`IsVerticalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsVerticalZoomEnabled)
- [`CrosshairsDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_CrosshairsDisplayMode)
- [`TransitionInMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_TransitionInMode)
- [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior)
- [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingMode)
- [`TrendLineType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLineType)
| - [`XAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisInterval)
- [`XAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelLocation)
- [`XAxisGap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisGap)
- [`XAxisOverlap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisOverlap)
- [`XAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTitle)
- [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisInterval)
- [`YAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelLocation)
- [`YAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTitle)
- [`YAxisMinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinimumValue)
- [`YAxisMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMaximumValue) | - [`Brushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Brushes)
- [`Outlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Outlines)
- [`MarkerBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerBrushes)
- [`MarkerOutlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerOutlines)
- [`MarkerTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerTypes)
- [`ToolTipType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ToolTipType)




| + +## Blazor Financial Chart API + +The Blazor [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) has the following API members: + +| Chart Properties | Axis Properties | Series Properties | +|------------------|-----------------|-------------------| +| - [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_ChartType)
- [`ExcludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ExcludedProperties)
- [`IncludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IncludedProperties)
- [`IsHorizontalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_IsHorizontalZoomEnabled)
- [`IsVerticalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_IsVerticalZoomEnabled)
- [`ToolTipType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ToolTipType)
- [`CrosshairsDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_CrosshairsDisplayMode)
- [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior)
- [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingMode)
- [`TrendLineType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLineType) | - [`XAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisInterval)
- [`XAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelLocation)
- [`XAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTitle)
- [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisInterval)
- [`YAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelLocation)
- [`YAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTitle)
- [`YAxisMinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMinimumValue)
- [`YAxisMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMaximumValue)
- [`YAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMode)
- [`XAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_XAxisMode) | - [`Brushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Brushes)
- [`Outlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Outlines)
- [`MarkerBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerBrushes)
- [`MarkerOutlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerOutlines)
- [`MarkerTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerTypes)
- [`IndicatorTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_IndicatorTypes)
- [`VolumeType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_VolumeType)
- [`ZoomSliderType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_ZoomSliderType)


| + +## Blazor Data Chart API + +The Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) has the following API members: + +| Chart Properties | Axis Classes | +|------------------|--------------| +| - [`ChartTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ChartTitle)
- [`Subtitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Subtitle)
- [`IsHorizontalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsHorizontalZoomEnabled)
- [`IsVerticalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsVerticalZoomEnabled)
- [`Brushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Brushes)
- [`Outlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Outlines)
- [`MarkerBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_MarkerBrushes)
- [`MarkerOutlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_MarkerOutlines)
- [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes)
- [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series)
| - [`IgbAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html) is base class for all axis types
- [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgbCategoryYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryYAxis.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md)
- [`IgbCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAngleAxis.html) used with [Radial Series](types/radial-chart.md)
- [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)
- [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgbNumericAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAngleAxis.html) used with [Polar Series](types/polar-chart.md)
- [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md)
- [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md)

| + +The Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) can use the following type of series that inherit from [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series): + +| Category Series | Stacked Series | +|------------------|----------------| +| - [`IgbAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAreaSeries.html)
- [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html)
- [`IgbColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnSeries.html)
- [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html)
- [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html)
- [`IgbSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSplineSeries.html)
- [`IgbSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSplineAreaSeries.html)
- [`IgbStepLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStepLineSeries.html)
- [`IgbStepAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStepAreaSeries.html)
- [`IgbRangeAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeAreaSeries.html)
- [`IgbRangeColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeColumnSeries.html)
- [`IgbWaterfallSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbWaterfallSeries.html)
| - [`IgbStackedAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedAreaSeries.html)
- [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html)
- [`IgbStackedColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedColumnSeries.html)
- [`IgbStackedLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedLineSeries.html)
- [`IgbStackedSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedSplineSeries.html)
- [`IgbStacked100AreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100AreaSeries.html)
- [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html)
- [`IgbStacked100ColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100ColumnSeries.html)
- [`IgbStacked100LineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100LineSeries.html)
- [`IgbStacked100SplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100SplineSeries.html)


| + +| Scatter Series | Financial Series | +|----------------|------------------| +| - [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html)
- [`IgbHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHighDensityScatterSeries.html)
- [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html)
- [`IgbScatterLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterLineSeries.html)
- [`IgbScatterSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSplineSeries.html)
- [`IgbScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterAreaSeries.html)
- [`IgbScatterContourSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterContourSeries.html)
- [`IgbScatterPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolylineSeries.html)
- [`IgbScatterPolygonSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html)

| - [`IgbFinancialPriceSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialPriceSeries.html)
- [`IgbBollingerBandsOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBollingerBandsOverlay.html)
- [`IgbForceIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbForceIndexIndicator.html)
- [`IgbMedianPriceIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMedianPriceIndicator.html)
- [`IgbMassIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMassIndexIndicator.html)
- [`IgbRelativeStrengthIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRelativeStrengthIndexIndicator.html)
- [`IgbStandardDeviationIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStandardDeviationIndicator.html)
- [`IgbTypicalPriceIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTypicalPriceIndicator.html)
- [`IgbWeightedCloseIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbWeightedCloseIndicator.html)
- and [many more](types/stock-chart.md) | + +| Radial Series | Polar Series | +|---------------|--------------| +| - [`IgbRadialLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialLineSeries.html)
- [`IgbRadialAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialAreaSeries.html)
- [`IgbRadialPieSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialPieSeries.html)
- [`IgbRadialColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialColumnSeries.html)

| - [`IgbPolarScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarScatterSeries.html)
- [`IgbPolarLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarLineSeries.html)
- [`IgbPolarAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarAreaSeries.html)
- [`IgbPolarSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarSplineSeries.html)
- [`IgbPolarSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarSplineAreaSeries.html)
| + +## Blazor Data Legend API + +The Blazor [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) has the following API members: + +- [`IncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedColumns) +- [`ExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedColumns) +- [`IncludedSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedSeries) +- [`ExcludedSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedSeries) +- [`ValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatAbbreviation) +- [`ValueFormatMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMode) +- [`ValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatCulture) +- [`ValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMinFractions) +- [`ValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMaxFractions) +- [`ValueTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueTextColor) +- [`TitleTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_TitleTextColor) +- [`LabelTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_LabelTextColor) +- [`UnitsTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_UnitsTextColor) +- [`SummaryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_SummaryType) +- [`HeaderTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderTextColor) +- [`BadgeShape`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_BadgeShape) + +## Blazor Donut Chart API + +The Blazor [`IgbDoughnutChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDoughnutChart.html) has the following API members: + +- [`AllowSliceExplosion`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDoughnutChart.html#IgniteUI_Blazor_Controls_IgbDoughnutChart_AllowSliceExplosion) +- [`AllowSliceSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDoughnutChart.html#IgniteUI_Blazor_Controls_IgbDoughnutChart_AllowSliceSelection) +- [`InnerExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDoughnutChart.html#IgniteUI_Blazor_Controls_IgbDoughnutChart_InnerExtent) + +## Blazor Data Pie Chart API + +The Blazor [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) has the following API members: + +- [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_ChartType) +- [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior) +- [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryThreshold) +- [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryType) +- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionMode) +- [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionBehavior) + +## Blazor Pie Chart API + +The Blazor [`IgbPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html) has the following API members: + +- [`LegendItemBadgeTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendItemBadgeTemplate) +- [`LegendItemTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendItemTemplate) +- [`LegendLabelMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendLabelMemberPath) +- [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryThreshold) +- [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryType) +- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionMode) + +## Blazor Sparkline Chart API + +The Blazor [`IgbSparkline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html) has the following API members: + +- [`DisplayNormalRangeInFront`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_DisplayNormalRangeInFront) +- [`DisplayType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_DisplayType) +- [`LowMarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_LowMarkerBrush) +- [`LowMarkerSize`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_LowMarkerSize) +- [`LowMarkerVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_LowMarkerVisibility) +- [`NormalRangeFill`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_NormalRangeFill) +- [`UnknownValuePlotting`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html#IgniteUI_Blazor_Controls_IgbSparkline_UnknownValuePlotting) + +## Additional Resources + +You can find more information about charts in these topics: + +- [Chart Overview](chart-overview.md) +- [Chart Features](chart-features.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-gridlines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-gridlines.md new file mode 100644 index 000000000..2376ab613 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-gridlines.md @@ -0,0 +1,775 @@ +--- +title: Blazor Axis Gridlines | Data Visualization | Infragistics +_description: Infragistics' Blazor Axis Gridlines +_keywords: Blazor Axis, Gridlines, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XYChart", "DomainChart", "XamDataChart", "NumericXAxis", "NumericYAxis", "NumericAxisBase" ] +namespace: Infragistics.Controls.Charts +_tocName: Axis Gridlines +_premium: true +--- + +# Blazor Axis Gridlines + +All Ignite UI for Blazor charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. + +> \[!Note] +> the following examples can be applied to [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) as well as [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) controls. + +Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines. + +Axis tickmarks are displayed along all horizontal and vertical axes at each label at all major line positions of the Blazor chart. + +## Blazor Axis Gridlines Example + +This example shows how configure the axis gridline to display major and minor gridlines at specified intervals: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var xAxisStroke = this.xAxisStroke; + var xAxisMajorStroke = this.xAxisMajorStroke; + var yAxisStroke = this.yAxisStroke; + var yAxisMajorStroke = this.yAxisMajorStroke; + var yAxisMinorStroke = this.yAxisMinorStroke; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription xAxisStroke; + private IgbPropertyEditorPropertyDescription xAxisMajorStroke; + private IgbPropertyEditorPropertyDescription yAxisStroke; + private IgbPropertyEditorPropertyDescription yAxisMajorStroke; + private IgbPropertyEditorPropertyDescription yAxisMinorStroke; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Axis Gridlines Properties + +Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis. + +In order to display minor gridlines that correspond to minor interval, you need to set [`XAxisMinorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStroke) and [`XAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStrokeThickness) properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them. + +You can customize how the gridlines are displayed in your Blazor chart by setting the following properties: + +| Axis Visuals | Type | Property Names | Description | +| -----------------------|---------|--------------------------------------------------------------|---------------- | +| Major Stroke Color | string | [`XAxisMajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMajorStroke)
[`YAxisMajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMajorStroke) | These properties set the color of axis major gridlines. | +| Minor Stroke Color | string | [`XAxisMinorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStroke)
[`YAxisMinorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMinorStroke) | These properties set the color of axis minor gridlines. | +| Major Stroke Thickness | number | [`XAxisMajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMajorStrokeThickness)
[`YAxisMajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMajorStrokeThickness) | These properties set the thickness in pixels of the axis major gridlines. | +| Minor Stroke Thickness | number | [`XAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStrokeThickness)
[`YAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMinorStrokeThickness) | These properties set the thickness in pixels of the axis minor gridlines. | +| Major Interval | number | [`XAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisInterval)
[`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisInterval) | These properties set interval between axis major gridlines and labels. | +| Minor Interval | number | [`XAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisMinorInterval)
[`YAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMinorInterval) | These properties set interval between axis minor gridlines, if used. | +| Axis Line Stroke Color | string | [`XAxisStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStroke)
[`YAxisStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStroke) | These properties set the color of an axis line. | +| Axis Stroke Thickness | number | [`XAxisStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStrokeThickness)
[`YAxisStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStrokeThickness) | These properties set the thickness in pixels of an axis line. | + +Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties. + +On category axes, the intervals are represented as an index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items for the major Interval so that all axis labels fit on axis so that they are not clipped by other axis labels. For minor intervals, this is represented as a fraction of the major interval properties. This value generally should equal between 0.25 and 0.5. + +On numeric axes, the interval values are represented as a double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value. + +On date time axes, this value is represented as time span between axis minimum value and axis maximum value. + +The following example demonstrates how to customize the gridlines by setting the properties above: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var xAxisStroke = this.xAxisStroke; + var xAxisMajorStroke = this.xAxisMajorStroke; + var yAxisStroke = this.yAxisStroke; + var yAxisMajorStroke = this.yAxisMajorStroke; + var yAxisMinorStroke = this.yAxisMinorStroke; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription xAxisStroke; + private IgbPropertyEditorPropertyDescription xAxisMajorStroke; + private IgbPropertyEditorPropertyDescription yAxisStroke; + private IgbPropertyEditorPropertyDescription yAxisMajorStroke; + private IgbPropertyEditorPropertyDescription yAxisMinorStroke; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +The axes of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) also have the ability to place a dash array on the major and minor gridlines by utilizing the [`MajorStrokeDashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MajorStrokeDashArray) and [`MinorStrokeDashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MinorStrokeDashArray) properties, respectively. The actual axis line can be dashed as well by setting the [`StrokeDashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_StrokeDashArray) property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines. + +The following example demonstrates a [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) with the above dash array properties set: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var lineSeries1 = this.lineSeries1; + var lineSeries2 = this.lineSeries2; + var lineSeries3 = this.lineSeries3; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbLineSeries lineSeries1; + private IgbLineSeries lineSeries2; + private IgbLineSeries lineSeries3; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Axis Tickmarks Example + +Axis tick marks are enabled by setting the [`XAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickLength) and [`YAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickLength) properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks. + +Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the [`YAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickLength) property is set to 5, axis labels will be shifted left by that amount. + +The following example demonstrates how to customize the tickmarks by setting the properties above: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var xAxisTickLength = this.xAxisTickLength; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription xAxisTickLength; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Axis Tickmarks Properties + +You can customize how the axis tickmarks are displayed in our Blazor chats by setting the following properties: + +| Axis Visuals | Type | Property Names | Description | +| -----------------------|---------|------------------------------------------------------------|------------------------- | +| Tick Stroke Color | string | [`XAxisTickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickStroke)
[`YAxisTickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickStroke) | These properties set the color of the tickmarks. | +| Tick Stroke Thickness | number | [`XAxisTickStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickStrokeThickness)
[`YAxisTickStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickStrokeThickness) | These properties set the thickness of the axis tick marks. | +| Tick Stroke Length | number | [`XAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickLength)
[`YAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickLength) | These properties set the length of the axis tick marks. | + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Layout](chart-axis-layouts.md) +- [Axis Options](chart-axis-options.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) or [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) | +| -------------------------------------------------- | ----------------------------------- | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_Interval) | [`XAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisInterval) (Major Interval) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_Interval) | [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisInterval) (Major Interval) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`MinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_MinorInterval) | [`XAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisMinorInterval) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`MinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_MinorInterval) | [`YAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinorInterval) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`MajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MajorStroke) | [`XAxisMajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMajorStroke) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`MajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MajorStroke) | [`YAxisMajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMajorStroke) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`MajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MajorStrokeThickness) | [`XAxisMajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMajorStrokeThickness) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`MajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MajorStrokeThickness) | [`YAxisMajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMajorStrokeThickness) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`MinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MinorStrokeThickness) | [`XAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStrokeThickness) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`MinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_MinorStrokeThickness) | [`YAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMinorStrokeThickness) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`StrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_StrokeThickness) | [`XAxisStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStrokeThickness) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`StrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_StrokeThickness) | [`YAxisStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStrokeThickness) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`Stroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_Stroke) | [`XAxisStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStroke) (Axis Line Color) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`Stroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_Stroke) | [`YAxisStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStroke) (Axis Line Color) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`TickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_TickLength) | [`XAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickLength) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`TickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_TickLength) | [`YAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickLength) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`TickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_TickStroke) | [`XAxisTickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickStroke) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`TickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_TickStroke) | [`YAxisTickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickStroke) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`Strip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_Strip) | [`XAxisStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStrip) (Space between Major Gridlines) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`Strip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_Strip) | [`YAxisStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStrip) (Space between Major Gridlines) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-layouts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-layouts.md new file mode 100644 index 000000000..052e8d741 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-layouts.md @@ -0,0 +1,447 @@ +--- +title: Blazor Axis Layouts | Data Visualization | Infragistics +_description: Infragistics' Blazor Axis Layouts +_keywords: Blazor Axis, Layouts, Location, Position, Share, Multiple, Crossing, Infragistics +_license: commercial +mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "XamDataChart", "Axis", "AxisLabelSettings", "ScatterSplineSeries", "TimeXAxis" ] +_tocName: Axis Layouts +_premium: true +--- + +# Blazor Axis Layouts + +All Ignite UI for Blazor charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below. + +> \[!Note] +> the following examples can be applied to [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) as well as [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) controls. + +## Axis Locations Example + +For all axes, you can specify axis location in relationship to chart plot area. The [`XAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelLocation) property of the Blazor charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the [`YAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelLocation) property to position y-axis on left side or right side of plot area. + +The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the [`YAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelLocation) so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var yAxisLabelLocation = this.yAxisLabelLocation; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription yAxisLabelLocation; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + + + +## Axis Advanced Scenarios + +For more advanced axis layout scenarios, you can use Blazor Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). + +### Axis Sharing Example + +You can share and add multiple axes in the same plot area of the Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). It a common scenario to use share [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) and add multiple [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes). + +The following example depicts a stock price and trade volume chart with a [Stock Chart](../types/stock-chart.md) and a [Column Chart](../types/column-chart.md) plotted. In this case, the Y-Axis on the left is used by the [Column Chart](../types/column-chart.md) and the Y-Axis on the right is used by the [Stock Chart](../types/stock-chart.md), while the X-Axis is shared between the two. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ @if (Data != null) + { + + + + + + + + + + } + +
+
+ +@code { + + private List Data; + + protected override void OnInitialized() + { + this.Data = SharedAxisFinancialData.Create(); + } +} +``` + + +
+ +### Axis Crossing Example + +In addition to placing axes outside plot area, the Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting [`CrossingAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_CrossingAxis) and [`CrossingValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_CrossingValue) properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point. + +The following example shows a Sin and Cos wave represented by a [Scatter Spline Chart](../types/scatter-chart.md) with the X and Y axes crossing each other at the (0, 0) origin point. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + + + +
+
+ @if (SinData != null && CosData != null) + { + + + + + + + + } +
+
+ +@code { + + private List SinData; + private List CosData; + + private double YAxisCrossingValue = 0; + private double XAxisCrossingValue = 0; + + protected override void OnInitialized() + { + List _sinData = new List(); + List _cosData = new List(); + + for (int i = - 360; i <= 360; i += 10) + { + double radians = (i * Math.PI) / 180; + double sin = Math.Sin(radians); + double cos = Math.Cos(radians); + + _sinData.Add(new Point() { X = i, Y = sin }); + _cosData.Add(new Point() { X = i, Y = cos }); + } + + this.SinData = _sinData; + this.CosData = _cosData; + } + + private void OnXAxisCrossingValueChanged(ChangeEventArgs args) + { + this.XAxisCrossingValue = double.Parse(args.Value.ToString()); + } + + private void OnYAxisCrossingValueChanged(ChangeEventArgs args) + { + this.YAxisCrossingValue = double.Parse(args.Value.ToString()); + } +} +``` + + +
+ + + +### Axis Timeline Example + +The following example demonstrates how to style the data chart using the [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) as a timeline: + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + +
+ +@code { + private List CategoryData; + private IgbNumericYAxis NumericYAxis; + private IgbTimeXAxis TimeXAxis; + private IgbCalloutLayer CalloutLayer; + private IgbLineSeries LineSeries1; + + private IgbDataChart _chart; + private IgbDataChart Chart + { + get { return _chart; } + set + { + _chart = value; + this.OnChart(); + + value.Axes.Add(this.TimeXAxis); + value.Axes.Add(this.NumericYAxis); + value.Series.Add(this.LineSeries1); + value.Series.Add(this.CalloutLayer); + StateHasChanged(); + } + } + + private void OnChart() + { + this.CategoryData = SampleTimelineData.Create(); + this.InitAxes(); + this.InitCategorySeries(); + } + + public void InitCategorySeries() + { + this.LineSeries1 = new IgbLineSeries() + { + Brush = "Navy", + DataSource = this.CategoryData, + XAxisName = "TimeXAxis", + YAxisName = "NumericYAxis", + ValueMemberPath = "Y", + Thickness = 15, + MarkerThickness = 15, + MarkerBrush = "#EC0D00", + MarkerOutline = "#EC0D00", + MarkerFillMode = MarkerFillMode.MatchMarkerOutline, + ShowDefaultTooltip = false, + }; + + this.CalloutLayer = new IgbCalloutLayer() + { + TargetSeries = this.LineSeries1, + DataSource = this.CategoryData, + XMemberPath = "Date", + YMemberPath = "Y", + LabelMemberPath = "Year", + IsAutoCalloutBehaviorEnabled = false, + UseValueForAutoCalloutLabels = false, + CalloutLeaderBrush = "#EC0D00", + CalloutTextColor = "Navy", + CalloutOutline = "#EC0D00", + CalloutBackground = "Transparent", + IsCalloutOffsettingEnabled = false, + TextStyle = "font-size: 25px", + CalloutPositionPadding = 50, + CalloutCollisionMode = CalloutCollisionMode.Greedy, + ShowDefaultTooltip = false, + }; + + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Top); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopLeft); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopRight); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Bottom); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomLeft); + this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomRight); + } + + public void InitAxes() + { + this.NumericYAxis = new IgbNumericYAxis() { Name = "NumericYAxis", Title = "Numeric Y Axis", MinimumValue=0, MaximumValue=10, LabelVisibility = Visibility.Collapsed, MajorStrokeThickness=0.0 }; + this.TimeXAxis = new IgbTimeXAxis() { Name = "TimeXAxis", Title = "Time X Axis", DataSource = this.CategoryData, DateTimeMemberPath = "Date", LabelVisibility = Visibility.Collapsed }; + } + +} +``` + + +
+ + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Options](chart-axis-options.md) + +## API References + +The following is a list of API members mentioned in the above sections: +d in the above sections: + +| [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) | +| ------------------------------------------------------ | ------------------------------- | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`CrossingAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_CrossingAxis) | None | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`CrossingValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_CrossingValue) | None | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ [`IsInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_IsInverted) | [`XAxisInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisInverted) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`IsInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_IsInverted) | [`YAxisInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisInverted) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ `LabelLocation` | [`YAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelLocation) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ `LabelLocation` | [`XAxisLabelLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelLocation) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ `LabelHorizontalAlignment` | [`YAxisLabelHorizontalAlignment`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelHorizontalAlignment) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ `LabelVerticalAlignment` | [`XAxisLabelVerticalAlignment`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelVerticalAlignment) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ `LabelVisibility` | [`YAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelVisibility) | +| [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ `LabelVisibility` | [`XAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelVisibility) | + + + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-options.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-options.md new file mode 100644 index 000000000..8a40b4371 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-options.md @@ -0,0 +1,973 @@ +--- +title: Blazor Axis Options | Data Visualization | Infragistics +_description: Infragistics' Blazor Axis Options +_keywords: Blazor Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"] +namespace: Infragistics.Controls.Charts +_tocName: Axis Options +_premium: true +--- + +# Blazor Axis Options + +In all Ignite UI for Blazor charts, the axes provide properties for visual configurations such as titles, labels, and ranges. These features are demonstrated in the examples provided below. + +## Axis Titles Example + +The axis titles feature of the Blazor charts, allows you to add contextual information to the your chart. You can customize the look and feel of the axis titles in many different ways such as applying different font styles, colors, margins, and alignments. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Axis Labels Example + +The Blazor Charts allows you full control over configuring, formatting, and styling the font of the labels displayed on an axis in your chart. You can change the rotation angle, margin, horizontal and vertical alignment, color, padding, and visibility of axis labels. The following example shows how to use these features of axes. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var xAxisLabelAngleEditor = this.xAxisLabelAngleEditor; + var yAxisLabelAngleEditor = this.yAxisLabelAngleEditor; + var xAxisLabelTextColorEditor = this.xAxisLabelTextColorEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription xAxisLabelAngleEditor; + private IgbPropertyEditorPropertyDescription yAxisLabelAngleEditor; + private IgbPropertyEditorPropertyDescription xAxisLabelTextColorEditor; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Axis Labels Management & Formatting + +The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis. + +This enhanced calculation is something that you need to opt-in to, which you can do by setting the [`UseEnhancedIntervalManagement`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_UseEnhancedIntervalManagement) property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_Interval) property of the axis, you can set the [`EnhancedIntervalPreferMoreCategoryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html#IgniteUI_Blazor_Controls_IgbAxis_EnhancedIntervalPreferMoreCategoryLabels) property on the axis to true. + +The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the [`AutoMarginAndAngleUpdateMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_AutoMarginAndAngleUpdateMode) property on the chart to either `SizeChanging` or `SizeChangingAndZoom`. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired. + +After setting the [`AutoMarginAndAngleUpdateMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_AutoMarginAndAngleUpdateMode), you can set the [`ShouldAutoExpandMarginForInitialLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ShouldAutoExpandMarginForInitialLabels) property to true to opt into the automatic margin or set the [`ShouldConsiderAutoRotationForInitialLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ShouldConsiderAutoRotationForInitialLabels) property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the [`AutoExpandMarginExtraPadding`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_AutoExpandMarginExtraPadding) and [`AutoExpandMarginMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_AutoExpandMarginMaximumValue) to provide extra space or a maximum possible margin, respectively. + +Custom label formats such as [`IgbNumberFormatSpecifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumberFormatSpecifier.html) and [`IgbDateTimeFormatSpecifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeFormatSpecifier.html) can be added to each axis via the `XAxisLabelFormatSpecifier` and `YAxisLabelFormatSpecifier` collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the [`YAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelFormat) or [`XAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelFormat) need to be set to data item's property name on the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), eg. `{Date}`. For the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. + +The following example formats the yAxis with a [`IgbNumberFormatSpecifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumberFormatSpecifier.html) to represent $USD prices for top box office movies in the United States. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbNumberFormatSpecifier[] _numberFormatSpecifier1 = null; + public IgbNumberFormatSpecifier[] NumberFormatSpecifier1 + { + get + { + if (this._numberFormatSpecifier1 == null) + { + var numberFormatSpecifier1 = new IgbNumberFormatSpecifier[1]; + var numberFormatSpecifier2 = new IgbNumberFormatSpecifier(); + numberFormatSpecifier2.Style = "currency"; + numberFormatSpecifier2.Currency = "USD"; + numberFormatSpecifier2.CurrencyDisplay = "symbol"; + numberFormatSpecifier2.MaximumFractionDigits = 2; + numberFormatSpecifier2.MinimumFractionDigits = 2; + numberFormatSpecifier1[0] = numberFormatSpecifier2; + this._numberFormatSpecifier1 = numberFormatSpecifier1; + } + return this._numberFormatSpecifier1; + } + } + private IgbCategoryChart chart; + private IgbNumberFormatSpecifier[] _numberFormatSpecifier3 = null; + public IgbNumberFormatSpecifier[] NumberFormatSpecifier3 + { + get + { + if (this._numberFormatSpecifier3 == null) + { + var numberFormatSpecifier3 = new IgbNumberFormatSpecifier[1]; + var numberFormatSpecifier4 = new IgbNumberFormatSpecifier(); + numberFormatSpecifier4.Style = "currency"; + numberFormatSpecifier4.Currency = "USD"; + numberFormatSpecifier4.CurrencyDisplay = "symbol"; + numberFormatSpecifier4.MaximumFractionDigits = 2; + numberFormatSpecifier4.MinimumFractionDigits = 2; + numberFormatSpecifier3[0] = numberFormatSpecifier4; + this._numberFormatSpecifier3 = numberFormatSpecifier3; + } + return this._numberFormatSpecifier3; + } + } + private IgbNumberFormatSpecifier[] _numberFormatSpecifier5 = null; + public IgbNumberFormatSpecifier[] NumberFormatSpecifier5 + { + get + { + if (this._numberFormatSpecifier5 == null) + { + var numberFormatSpecifier5 = new IgbNumberFormatSpecifier[1]; + var numberFormatSpecifier6 = new IgbNumberFormatSpecifier(); + numberFormatSpecifier6.Style = "currency"; + numberFormatSpecifier6.Currency = "USD"; + numberFormatSpecifier6.CurrencyDisplay = "symbol"; + numberFormatSpecifier6.MinimumFractionDigits = 0; + numberFormatSpecifier5[0] = numberFormatSpecifier6; + this._numberFormatSpecifier5 = numberFormatSpecifier5; + } + return this._numberFormatSpecifier5; + } + } + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Axis Range Example + +In the Blazor charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the [`YAxisMinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinimumValue) and [`YAxisMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMaximumValue) options. + +By default, charts will calculate the minimum and maximum values for the numeric and time axis range based on the lowest and highest corresponding value points in your data, but this automatic calculation may not be appropriate for your set of data points in all cases. For example, if your data has a minimum value of 850, you may want to set the [`YAxisMinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinimumValue) to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same idea can be applied to the axis minimum value and the highest value of data points using the [`YAxisMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMaximumValue) property. + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Linq + +
+
+ + + + + + + + + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var yAxisMinimumValue = this.yAxisMinimumValue; + var yAxisMaximumValue = this.yAxisMaximumValue; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription yAxisMinimumValue; + private IgbPropertyEditorPropertyDescription yAxisMaximumValue; + private IgbCategoryChart chart; + + public void EditorChangeUpdateYAxisMinimumValue(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var yAxisMinimumVal = args.NewValue; + chart.YAxisMinimumValue = Convert.ToDouble(yAxisMinimumVal); + } + + public void EditorChangeUpdateYAxisMaximumValue(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var yAxisMaximumVal = args.NewValue; + chart.YAxisMaximumValue = Convert.ToDouble(yAxisMaximumVal); + } + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Axis Modes & Scale + +In the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) and [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the [`YAxisIsLogarithmic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisIsLogarithmic) property is set to true or on linear scale when this property is set to false (default value). With the [`YAxisLogarithmBase`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisLogarithmBase) property, you can change base of logarithmic scale from default value of 10 to other integer value. + +The [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) and control allows you to choose how your data is represented along the y-axis using [`YAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMode) property that provides `Numeric` and `PercentChange` modes. The `Numeric` mode will plot data with the exact values while the `PercentChange` mode will display the data as percentage change relative to the first data point provided. The default value is `Numeric` mode. + +In addition to [`YAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMode) property, the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) control has [`XAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_XAxisMode) property that provides `Time` and `Ordinal` modes for the x-axis. The `Time` mode will render space along the x-axis for gaps in data (e.g. no stock trading on weekends or holidays). The `Ordinal` mode will collapse date areas where data does not exist. The default value is `Ordinal` mode. + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ + +
+ +
+ + @if (Data != null) + { + + } +
+
+ +@code { + + public FinancialChartXAxisMode XAxisMode = FinancialChartXAxisMode.Ordinal; + public FinancialChartYAxisMode YAxisMode = FinancialChartYAxisMode.Numeric; + public bool YAxisIsLogarithmic = false; + + List Data; + + protected override void OnInitialized() + { + var today = DateTime.Now; + var year = today.Year; + var month = today.Month; + var dateEnd = new DateTime(year, month, 1); + var dateStart = new DateTime(year - 1, month, 1); + this.Data = StocksUtility.GetStocksBetween(dateStart, dateEnd); + } + + public void OnChanged(ChangeEventArgs args) + { + YAxisIsLogarithmic = (bool)args.Value; + } +} +``` + + +
+ +## Axis Gap Example + +The [`XAxisGap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisGap) property of the Blazor charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap. + +The [`XAxisMaximumGap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisMaximumGap) property of the Blazor charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set [`XAxisGap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisGap) to. + +The [`XAxisMinimumGapSize`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisMinimumGapSize) property of the Blazor charts, determines the minimum amount of pixels to use for the gap between the categories, if possible. + +The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.md) with an [`XAxisGap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisGap) initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditorPanel1 = this.propertyEditorPanel1; + var xAxisGap = this.xAxisGap; + var xAxisMaximumGap = this.xAxisMaximumGap; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription xAxisGap; + private IgbPropertyEditorPropertyDescription xAxisMaximumGap; + private IgbCategoryChart chart; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Axis Overlap Example + +The [`XAxisOverlap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisOverlap) property of the Blazor charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other. + +The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.md) with an [`XAxisOverlap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisOverlap) initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditorPanel1 = this.propertyEditorPanel1; + var xAxisOverlap = this.xAxisOverlap; + var chart = this.chart; + + this.BindElements = () => { + propertyEditorPanel1.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditorPanel1; + private IgbPropertyEditorPropertyDescription xAxisOverlap; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Layout](chart-axis-layouts.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) | [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) | +| ------------------------------------------------------ | ---------------------- | ---------------------- | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`MaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_MaximumValue) | [`YAxisMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMaximumValue) | [`YAxisMaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMaximumValue) | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`MinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_MinimumValue) | [`YAxisMinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinimumValue) | [`YAxisMinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinimumValue) | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`IsLogarithmic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_IsLogarithmic) | [`YAxisIsLogarithmic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisIsLogarithmic) | [`YAxisIsLogarithmic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisIsLogarithmic) | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ [`LogarithmBase`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_LogarithmBase) | [`YAxisLogarithmBase`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisLogarithmBase) | [`YAxisLogarithmBase`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisLogarithmBase) | +| `Axes` ➔ [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) ➔ [`Gap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAxisBase.html#IgniteUI_Blazor_Controls_IgbCategoryAxisBase_Gap) | None | [`XAxisGap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisGap) | +| `Axes` ➔ [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) ➔ [`Overlap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAxisBase.html#IgniteUI_Blazor_Controls_IgbCategoryAxisBase_Overlap) | None | [`XAxisOverlap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisOverlap) | +| `Axes` ➔ [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) | [`XAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_XAxisMode) | None | +| `Axes` ➔ [`IgbPercentChangeYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPercentChangeYAxis.html) | [`YAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMode) | None | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ `labelSettings.angle` | [`YAxisLabelAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelAngle) | [`YAxisLabelAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelAngle) | +| `Axes` ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ `labelSettings.angle` | [`XAxisLabelAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelAngle) | [`XAxisLabelAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelAngle) | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` | +| `Axes` ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | +| `Axes` ➔ [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) ➔ `labelSettings.visibility` | [`YAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelVisibility) | [`YAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelVisibility) | +| `Axes` ➔ [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) ➔ `labelSettings.visibility` | [`XAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelVisibility) | [`XAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelVisibility) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md new file mode 100644 index 000000000..335d0bf2d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md @@ -0,0 +1,1119 @@ +--- +title: Blazor Axis Types | Data Visualization | Infragistics +_description: Infragistics' Blazor Axis Types +_keywords: Blazor Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"] +namespace: Infragistics.Controls.Charts +_tocName: Axis Types +_premium: true +--- + +# Blazor Axis Types + +The Ignite UI for Blazor Category Chart uses only one [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) and one [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) type. Similarly, Ignite UI for Blazor Financial Chart uses only one [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) and one [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) types. However, the Ignite UI for Blazor Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes. + +## Cartesian Axes + +The [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) with Cartesian Axes, allows you to plot data in horizontal (X-axis) and vertical (X-axis) direction with 3 types of X-Axis +([`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html), [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html), and [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html)) and 2 types of Y-Axis ([`IgbCategoryYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryYAxis.html) and [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html)). + +### Category X-Axis + +The [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source. + +The [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) requires you to provide a `DataSource` and a `Label` in order to plot data with it. It is generally used with the [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) to plot the following type of series: + +| Category Series | Stacked Series | Financial Series | +|------------------|----------------|--------------------| +| - [`IgbAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAreaSeries.html)
- [`IgbColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnSeries.html)
- [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html)
- [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html)
- [`IgbSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSplineSeries.html)
- [`IgbSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSplineAreaSeries.html)
- [`IgbStepLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStepLineSeries.html)
- [`IgbStepAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStepAreaSeries.html)
- [`IgbRangeAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeAreaSeries.html)
- [`IgbRangeColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeColumnSeries.html)
- [`IgbWaterfallSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbWaterfallSeries.html) | - [`IgbStackedAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedAreaSeries.html)
- [`IgbStackedColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedColumnSeries.html)
- [`IgbStackedLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedLineSeries.html)
- [`IgbStackedSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedSplineSeries.html)
- [`IgbStacked100AreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100AreaSeries.html)
- [`IgbStacked100ColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100ColumnSeries.html)
- [`IgbStacked100LineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100LineSeries.html)
- [`IgbStacked100SplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100SplineSeries.html)



| - [`IgbFinancialPriceSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialPriceSeries.html)
- [`IgbBollingerBandsOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBollingerBandsOverlay.html)
- [`IgbForceIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbForceIndexIndicator.html)
- [`IgbMedianPriceIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMedianPriceIndicator.html)
- [`IgbMassIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMassIndexIndicator.html)
- [`IgbRelativeStrengthIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRelativeStrengthIndexIndicator.html)
- [`IgbStandardDeviationIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStandardDeviationIndicator.html)
- [`IgbTypicalPriceIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTypicalPriceIndicator.html)



| + +The following example demonstrates usage of the [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) type: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stackedColumnSeries = this.stackedColumnSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var s5 = this.s5; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStackedColumnSeries stackedColumnSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbStackedFragmentSeries s5; + private IgbDataToolTipLayer dataToolTipLayer; + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +### Category Y-Axis + +The [`IgbCategoryYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryYAxis.html) works very similarly to the [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html) described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a `Label` in order to plot data with it. The [`IgbCategoryYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryYAxis.html) is generally used with the [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) to plot the following type of series: + +- [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html) +- [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html) +- [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html) + +The following example demonstrates usage of the [`IgbCategoryYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryYAxis.html) type: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var yAxis = this.yAxis; + var xAxis = this.xAxis; + var categoryHighlightLayer = this.categoryHighlightLayer; + var barSeries1 = this.barSeries1; + var barSeries2 = this.barSeries2; + var tooltips = this.tooltips; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryYAxis yAxis; + private IgbNumericXAxis xAxis; + private IgbCategoryHighlightLayer categoryHighlightLayer; + private IgbBarSeries barSeries1; + private IgbBarSeries barSeries2; + private IgbDataToolTipLayer tooltips; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +### Numeric X-Axis + +The [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html). Alternatively, if combined with the [`IgbCategoryXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryXAxis.html), these labels will be placed corresponding to the `ValueMemberPath` of the [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html), [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html), and [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html). + +The [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) is compatible with the following type of series: + +- [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html) +- [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html) +- [`IgbHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHighDensityScatterSeries.html) +- [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html) +- [`IgbScatterLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterLineSeries.html) +- [`IgbScatterSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSplineSeries.html) +- [`IgbScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterAreaSeries.html) +- [`IgbScatterContourSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterContourSeries.html) +- [`IgbScatterPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolylineSeries.html) +- [`IgbScatterPolygonSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html) +- [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html) +- [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html) + +The following example demonstrates usage of the [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html): + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ +
+ Stars Distribution in Milky Way Galaxy +
+ + @if (Data != null) + { + + + + + + + + + } +
+
+ +@code { + + private List Data; + + protected override void OnInitialized() + { + Data = SampleDensityData.Create(); + } +} +``` + + +### Numeric Y-Axis + +The [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) labels depends on the `YMemberPath` property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html). Alternatively, if combined with the [`IgbCategoryYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryYAxis.html), these labels will be placed corresponding to the `ValueMemberPath` of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using. + +The [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) is compatible with the following type of series: + +| Category Series | Stacked Series | Financial Series | Scatter Series | +|------------------|----------------|------------------|----------------| +| - [`IgbAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAreaSeries.html)
- [`IgbColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnSeries.html)
- [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html)
- [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html)
- [`IgbSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSplineSeries.html)
- [`IgbSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSplineAreaSeries.html)
- [`IgbStepLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStepLineSeries.html)
- [`IgbStepAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStepAreaSeries.html)
- [`IgbRangeAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeAreaSeries.html)
- [`IgbRangeColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeColumnSeries.html)
- [`IgbWaterfallSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbWaterfallSeries.html)
| - [`IgbStackedAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedAreaSeries.html)
- [`IgbStackedColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedColumnSeries.html)
- [`IgbStackedLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedLineSeries.html)
- [`IgbStackedSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedSplineSeries.html)
- [`IgbStacked100AreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100AreaSeries.html)
- [`IgbStacked100ColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100ColumnSeries.html)
- [`IgbStacked100LineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100LineSeries.html)
- [`IgbStacked100SplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100SplineSeries.html)
| - [`IgbFinancialPriceSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialPriceSeries.html)
- [`IgbBollingerBandsOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBollingerBandsOverlay.html)
- [`IgbForceIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbForceIndexIndicator.html)
- [`IgbMedianPriceIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMedianPriceIndicator.html)
- [`IgbMassIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMassIndexIndicator.html)
- [`IgbRelativeStrengthIndexIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRelativeStrengthIndexIndicator.html)
- [`IgbStandardDeviationIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStandardDeviationIndicator.html)
- [`IgbTypicalPriceIndicator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTypicalPriceIndicator.html)
| - [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html)
- [`IgbHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHighDensityScatterSeries.html)
- [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html)
- [`IgbScatterLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterLineSeries.html)
- [`IgbScatterSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSplineSeries.html)
- [`IgbScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterAreaSeries.html)
- [`IgbScatterContourSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterContourSeries.html)
- [`IgbScatterPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolylineSeries.html)
- [`IgbScatterPolygonSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html)
| + +The following example demonstrates usage of the [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html): + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Life Expectancy vs Health Expenditure +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var scatterLineSeries1 = this.scatterLineSeries1; + var scatterLineSeries2 = this.scatterLineSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbScatterLineSeries scatterLineSeries1; + private IgbScatterLineSeries scatterLineSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private HealthDataForGermany _healthDataForGermany = null; + public HealthDataForGermany HealthDataForGermany + { + get + { + if (_healthDataForGermany == null) + { + _healthDataForGermany = new HealthDataForGermany(); + } + return _healthDataForGermany; + } + } + + private HealthDataForFrance _healthDataForFrance = null; + public HealthDataForFrance HealthDataForFrance + { + get + { + if (_healthDataForFrance == null) + { + _healthDataForFrance = new HealthDataForFrance(); + } + return _healthDataForFrance; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HealthDataForFranceItem +{ + public double Year { get; set; } + public double HealthExpense { get; set; } + public double LifeExpectancy { get; set; } + public string Name { get; set; } +} + +public class HealthDataForFrance + : List +{ + public HealthDataForFrance() + { + this.Add(new HealthDataForFranceItem() { Year = 1985, HealthExpense = 2025.98, LifeExpectancy = 75.92, Name = @"Norway" }); + this.Add(new HealthDataForFranceItem() { Year = 1986, HealthExpense = 2075.21, LifeExpectancy = 76.24, Name = @"Norway" }); + this.Add(new HealthDataForFranceItem() { Year = 1987, HealthExpense = 2140.51, LifeExpectancy = 76.08, Name = @"Norway" }); + // ... 28 more items + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HealthDataForGermanyItem +{ + public double Year { get; set; } + public double HealthExpense { get; set; } + public double LifeExpectancy { get; set; } + public string Name { get; set; } +} + +public class HealthDataForGermany + : List +{ + public HealthDataForGermany() + { + this.Add(new HealthDataForGermanyItem() { Year = 1985, HealthExpense = 2579.64, LifeExpectancy = 74.05, Name = @"Germany" }); + this.Add(new HealthDataForGermanyItem() { Year = 1986, HealthExpense = 2603.94, LifeExpectancy = 74.31, Name = @"Germany" }); + this.Add(new HealthDataForGermanyItem() { Year = 1987, HealthExpense = 2668.49, LifeExpectancy = 74.56, Name = @"Germany" }); + // ... 27 more items + } +} +``` + + +### Time X Axis + +The [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its `DateTimeMemberPath`. This, along with a `DataSource` is required to plot data with this axis type. + +The [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) is the X-Axis type in the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) component. + +#### Breaks in Time X Axis + +The [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) has the option to exclude intervals of data by using [`Breaks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html#IgniteUI_Blazor_Controls_IgbTimeXAxis_Breaks). As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of [`IgbTimeAxisBreak`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisBreak.html) can be added to the `Breaks` collection of the axis and configured by using a unique [`Start`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisBreak.html#IgniteUI_Blazor_Controls_IgbTimeAxisBreak_Start), [`End`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisBreak.html#IgniteUI_Blazor_Controls_IgbTimeAxisBreak_End) and [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisBreak.html#IgniteUI_Blazor_Controls_IgbTimeAxisBreak_Interval). + +#### Formatting in Time X Axis + +The [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) has the [`LabelFormats`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html#IgniteUI_Blazor_Controls_IgbTimeXAxis_LabelFormats) property, which represents a collection of [`IgbTimeAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html) objects. Each [`IgbTimeAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html) added to the collection is responsible for assigning a unique [`Format`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html#IgniteUI_Blazor_Controls_IgbTimeAxisLabelFormat_Format) and [`Range`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html#IgniteUI_Blazor_Controls_IgbTimeAxisLabelFormat_Range). This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart. + +The [`Format`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html#IgniteUI_Blazor_Controls_IgbTimeAxisLabelFormat_Format) property of the [`IgbTimeAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html) specifies what format to use for a particular visible range. The [`Range`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html#IgniteUI_Blazor_Controls_IgbTimeAxisLabelFormat_Range) property of the [`IgbTimeAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html) specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two [`IgbTimeAxisLabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisLabelFormat.html) elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format. + +#### Intervals in Time X Axis + +The [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) replaces the conventional [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAxisBase.html#IgniteUI_Blazor_Controls_IgbNumericAxisBase_Interval) property of the category and numeric axes with an [`Intervals`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html#IgniteUI_Blazor_Controls_IgbTimeXAxis_Intervals) collection of type [`IgbTimeAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html). Each [`IgbTimeAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html) added to the collection is responsible for assigning a unique [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_Interval), [`Range`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_Range) and [`IntervalType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_IntervalType). This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below: + +- [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_Interval): This specifies the interval to use. This is tied to the [`IntervalType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_IntervalType) property. For example, if the [`IntervalType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_IntervalType) is set to `Days`, then the numeric value specified in [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_Interval) will be in days. +- [`Range`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_Range): This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours. +- [`IntervalType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_IntervalType): This specifies the unit of time for the [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeAxisInterval.html#IgniteUI_Blazor_Controls_IgbTimeAxisInterval_Interval) property. + +## Polar Axes + +The [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart. + +### Category Angle Axis + +The [`IgbCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAngleAxis.html) treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. + +The [`IgbCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAngleAxis.html) is generally used with the [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) to plot [Radial Series](../types/radial-chart.md). + +The following example demonstrates usage of the [`IgbCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAngleAxis.html) type: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Ronaldo vs Messi Player Stats +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var radialAreaSeries1 = this.radialAreaSeries1; + var radialAreaSeries2 = this.radialAreaSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbRadialAreaSeries radialAreaSeries1; + private IgbRadialAreaSeries radialAreaSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private FootballPlayerStats _footballPlayerStats = null; + public FootballPlayerStats FootballPlayerStats + { + get + { + if (_footballPlayerStats == null) + { + _footballPlayerStats = new FootballPlayerStats(); + } + return _footballPlayerStats; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class FootballPlayerStatsItem +{ + public string Attribute { get; set; } + public double Ronaldo { get; set; } + public double Messi { get; set; } +} + +public class FootballPlayerStats + : List +{ + public FootballPlayerStats() + { + this.Add(new FootballPlayerStatsItem() { Attribute = @"Dribbling", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Passing", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Finishing", Ronaldo = 10, Messi = 10 }); + // ... 5 more items + } +} +``` + + +### Proportional Category Angle Axis + +The [`IgbProportionalCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProportionalCategoryAngleAxis.html) treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. + +The [`IgbProportionalCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProportionalCategoryAngleAxis.html) is generally used with the [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) to plot a pie chart eg. [Radial Series](../types/radial-chart.md). + +The following example demonstrates usage of the [`IgbProportionalCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProportionalCategoryAngleAxis.html) type: + + + + +### Numeric Angle Axis + +The [`IgbNumericAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAngleAxis.html) treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the [`IgbNumericAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAngleAxis.html) varies according to the value in the data column mapped using the `RadiusMemberPath` property of the [Polar Series](../types/polar-chart.md) object or the `ValueMemberPath` property of the [Radial Series](../types/radial-chart.md) object. + +The The [`IgbNumericAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAngleAxis.html) can be used with either the [`IgbCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAngleAxis.html) to plot [Radial Series](../types/radial-chart.md) or with the [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) to plot [Polar Series](../types/polar-chart.md) respectively. + +The following example demonstrates usage of the [`IgbNumericAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAngleAxis.html) type: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Wind Speed vs Boat Speed +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var polarScatterSeries1 = this.polarScatterSeries1; + var polarScatterSeries2 = this.polarScatterSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + } + + private IgbDataChart chart; + private IgbNumericAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbPolarScatterSeries polarScatterSeries1; + private IgbPolarScatterSeries polarScatterSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private BoatSailingData _boatSailingData = null; + public BoatSailingData BoatSailingData + { + get + { + if (_boatSailingData == null) + { + _boatSailingData = new BoatSailingData(); + } + return _boatSailingData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class BoatSailingDataItem +{ + public double Direction { get; set; } + public double BoatSpeed { get; set; } + public double WindSpeed { get; set; } +} + +public class BoatSailingData + : List +{ + public BoatSailingData() + { + this.Add(new BoatSailingDataItem() { Direction = 0, BoatSpeed = 70, WindSpeed = 90 }); + this.Add(new BoatSailingDataItem() { Direction = 45, BoatSpeed = 35, WindSpeed = 65 }); + this.Add(new BoatSailingDataItem() { Direction = 90, BoatSpeed = 25, WindSpeed = 45 }); + // ... 6 more items + } +} +``` + + +### Numeric Radius Axis + +The [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series. + +The [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) can be used with the [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) to plot [Polar Series](../types/polar-chart.md). + +The following example demonstrates usage of the [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) type: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Wind Speed vs Boat Speed +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var polarLineSeries1 = this.polarLineSeries1; + var polarLineSeries2 = this.polarLineSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbPolarLineSeries polarLineSeries1; + private IgbPolarLineSeries polarLineSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private BoatSailingData _boatSailingData = null; + public BoatSailingData BoatSailingData + { + get + { + if (_boatSailingData == null) + { + _boatSailingData = new BoatSailingData(); + } + return _boatSailingData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class BoatSailingDataItem +{ + public double Direction { get; set; } + public double BoatSpeed { get; set; } + public double WindSpeed { get; set; } +} + +public class BoatSailingData + : List +{ + public BoatSailingData() + { + this.Add(new BoatSailingDataItem() { Direction = 0, BoatSpeed = 70, WindSpeed = 90 }); + this.Add(new BoatSailingDataItem() { Direction = 45, BoatSpeed = 35, WindSpeed = 65 }); + this.Add(new BoatSailingDataItem() { Direction = 90, BoatSpeed = 25, WindSpeed = 45 }); + // ... 6 more items + } +} +``` + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Axis Gridlines](chart-axis-gridlines.md) +- [Axis Layouts](chart-axis-layouts.md) +- [Axis Options](chart-axis-options.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-aggregations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-aggregations.md new file mode 100644 index 000000000..ab628924a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-aggregations.md @@ -0,0 +1,212 @@ +--- +title: Blazor Data Aggregations | Data Visualization | Infragistics +_description: Infragistics' Blazor Data Aggregations +_keywords: Blazor Charts, Markers, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Aggregations +_premium: true +--- + +# Blazor Data Aggregations + +In the Ignite UI for Blazor [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control Data Aggregations feature allows you to group data in the chart by unique values on the `XAxis` and then sort those groups. You may then apply summaries which will be reflected by the range of the `YAxis` and will be displayed in the tooltip when hovering the series. + +## Blazor Data Aggregations Example + +The following example depicts a [Column Chart](../types/column-chart.md) that groups by the Country member of the `XAxis` and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property. + +Note, the abbreviated functions found within the dropdowns for [`InitialSummaries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialSummaries) and [`GroupSorts`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_GroupSorts) have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Linq + +
+
+ + + + + + +
+
+ Sales Aggregated by Country and Product +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var editor = this.editor; + var initialGroups = this.initialGroups; + var chart = this.chart; + + this.BindElements = () => { + editor.Target = this.chart; + }; + this.BindElements(); + + if (firstRender) { + this.PropertyEditorInitAggregationsOnViewInit(); + } + } + + private IgbPropertyEditorPanel editor; + private IgbPropertyEditorPropertyDescription initialGroups; + private IgbCategoryChart chart; + + public void PropertyEditorInitAggregationsOnViewInit() + { + var editor = this.editor; + editor.EnsureReady().ContinueWith(new Action((e) => + { + var initialSummariesDropdown = new IgbPropertyEditorPropertyDescription(); + var sortGroupsDropdown = new IgbPropertyEditorPropertyDescription(); + initialSummariesDropdown.Label = "Initial Summaries"; + initialSummariesDropdown.ValueType = PropertyEditorValueType.EnumValue; + initialSummariesDropdown.ShouldOverrideDefaultEditor = true; + initialSummariesDropdown.DropDownNames = new string[] { "Sum(Sales) as Sales", "Avg(Sales) as Sales", "Min(Sales) as Sales", "Max(Sales) as Sales", "Count(Sales) as Sales" }; + initialSummariesDropdown.DropDownValues = new string[] { "Sum(Sales) as Sales", "Avg(Sales) as Sales", "Min(Sales) as Sales", "Max(Sales) as Sales", "Count(Sales) as Sales" }; + sortGroupsDropdown.Label = "Sort Groups"; + sortGroupsDropdown.ValueType = PropertyEditorValueType.EnumValue; + sortGroupsDropdown.ShouldOverrideDefaultEditor = true; + sortGroupsDropdown.DropDownNames = new string[] { "Sales Asc", "Sales Desc" }; + sortGroupsDropdown.DropDownValues = new string[] { "Sales Asc", "Sales Desc" }; + + editor.Properties.Add(initialSummariesDropdown); + editor.Properties.Add(sortGroupsDropdown); + + initialSummariesDropdown.Changed += this.EditorChangeUpdateInitialSummaries; + sortGroupsDropdown.Changed += this.EditorChangeUpdateGroupSorts; + })); + + } + + public void EditorChangeUpdateInitialSummaries(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var intialSummaryVal = args.NewValue.ToString(); + chart.InitialSummaries = intialSummaryVal; + } + + public void EditorChangeUpdateGroupSorts(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var groupSortsVal = args.NewValue.ToString(); + chart.GroupSorts = groupSortsVal; + } + + public void EditorChangeUpdateInitialGroups(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var initialGroupVal = args.NewValue.ToString(); + chart.InitialGroups = null; + chart.InitialGroups = initialGroupVal; + } + + private SalesData _salesData = null; + public SalesData SalesData + { + get + { + if (_salesData == null) + { + _salesData = new SalesData(); + } + return _salesData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class SalesDataItem +{ + public string Country { get; set; } + public string Product { get; set; } + public double UnitsSold { get; set; } + public double ManufacturingPrice { get; set; } + public double SalePrice { get; set; } + public double GrossSales { get; set; } + public double Discounts { get; set; } + public double Sales { get; set; } + public double COGS { get; set; } + public double Profit { get; set; } + public string Date { get; set; } + public string Month { get; set; } + public string Year { get; set; } +} + +public class SalesData + : List +{ + public SalesData() + { + this.Add(new SalesDataItem() { Country = @"UK", Product = @"Vermont", UnitsSold = 501, ManufacturingPrice = 15, SalePrice = 23, GrossSales = 26440, Discounts = 0, Sales = 26440, COGS = 16185, Profit = 11255, Date = @"1/1/20", Month = @"January", Year = @"2020" }); + this.Add(new SalesDataItem() { Country = @"Japan", Product = @"Kensington", UnitsSold = 1372, ManufacturingPrice = 3, SalePrice = 20, GrossSales = 27440, Discounts = 0, Sales = 27440, COGS = 16185, Profit = 11255, Date = @"1/1/20", Month = @"January", Year = @"2020" }); + this.Add(new SalesDataItem() { Country = @"India", Product = @"Kensington", UnitsSold = 2762, ManufacturingPrice = 3, SalePrice = 20, GrossSales = 55240, Discounts = 0, Sales = 55240, COGS = 13210, Profit = 42030, Date = @"1/1/20", Month = @"January", Year = @"2020" }); + // ... 1039 more items + } +} +``` + + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`InitialSortDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialSortDescriptions) +- [`InitialSorts`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialSorts) +- [`SortDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SortDescriptions) +- [`InitialGroups`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialGroups) +- [`InitialGroupDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialGroupDescriptions) +- [`GroupDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_GroupDescriptions) +- [`InitialSummaries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialSummaries) +- [`InitialSummaryDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialSummaryDescriptions) +- [`SummaryDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SummaryDescriptions) +- [`InitialGroupSortDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialGroupSortDescriptions) +- [`GroupSorts`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_GroupSorts) +- [`GroupSortDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_GroupSortDescriptions) + +> \[!Note] +> Chart Aggregation will not work when using [`IncludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IncludedProperties) | [`ExcludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ExcludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-annotations.md new file mode 100644 index 000000000..b433a7fcb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-annotations.md @@ -0,0 +1,1860 @@ +--- +title: Blazor Chart Data Annotations | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Data Annotations +_keywords: Blazor Charts, Data Annotations, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Annotations +_premium: true +--- + +# Blazor Chart Data Annotations + +In the Blazor chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data. + +> \[!Note] +> These features are designed to support cartesian axes and does not currently support radius or angle axes. + +For example, you can annotates stock prices with stock events and patterns. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationLineData1Item +{ + public double StartX { get; set; } + public double StartY { get; set; } + public double EndX { get; set; } + public double EndY { get; set; } + public string Label { get; set; } +} + +public class AnnotationLineData1 + : List +{ + public AnnotationLineData1() + { + this.Add(new AnnotationLineData1Item() { StartX = 190, StartY = 138, EndX = 230, EndY = 138, Label = @"52-Week Low" }); + this.Add(new AnnotationLineData1Item() { StartX = 190, StartY = 481, EndX = 230, EndY = 481, Label = @"52-Week High" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationLineData2Item +{ + public double StartX { get; set; } + public double StartY { get; set; } + public double EndX { get; set; } + public double EndY { get; set; } + public string Label { get; set; } +} + +public class AnnotationLineData2 + : List +{ + public AnnotationLineData2() + { + this.Add(new AnnotationLineData2Item() { StartX = 48, StartY = 25, EndX = 105, EndY = 250, Label = @"Growth & +Support" }); + this.Add(new AnnotationLineData2Item() { StartX = 108, StartY = 440, EndX = 155, EndY = 210, Label = @"Decline & +Resistance" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceEarningsBeatDataItem +{ + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationSliceEarningsBeatData + : List +{ + public AnnotationSliceEarningsBeatData() + { + this.Add(new AnnotationSliceEarningsBeatDataItem() { Value = 155, Label = @"Earnings Beat" }); + this.Add(new AnnotationSliceEarningsBeatDataItem() { Value = 86, Label = @"Earnings Beat" }); + this.Add(new AnnotationSliceEarningsBeatDataItem() { Value = 28, Label = @"Earnings Beat" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceEarningsMissDataItem +{ + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationSliceEarningsMissData + : List +{ + public AnnotationSliceEarningsMissData() + { + this.Add(new AnnotationSliceEarningsMissDataItem() { Value = 9, Label = @"Earnings Miss" }); + this.Add(new AnnotationSliceEarningsMissDataItem() { Value = 179, Label = @"Earnings Miss" }); + this.Add(new AnnotationSliceEarningsMissDataItem() { Value = 215, Label = @"Earnings Miss" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceStockSplitDataItem +{ + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationSliceStockSplitData + : List +{ + public AnnotationSliceStockSplitData() + { + this.Add(new AnnotationSliceStockSplitDataItem() { Value = 126, Label = @"Stock Split 3-1" }); + this.Add(new AnnotationSliceStockSplitDataItem() { Value = 61, Label = @"Stock Split 5-1" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationStripDataItem +{ + public double Start { get; set; } + public double End { get; set; } + public string Label { get; set; } +} + +public class AnnotationStripData + : List +{ + public AnnotationStripData() + { + this.Add(new AnnotationStripDataItem() { Start = 40, End = 45, Label = @"Covid - Market Crash" }); + this.Add(new AnnotationStripDataItem() { Start = 100, End = 144, Label = @"Fed Rate Up 0.25 - 5.25%" }); + this.Add(new AnnotationStripDataItem() { Start = 190, End = 205, Label = @"Fed Rate Down 5.25% to 4.45%" }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxisBottom = this.xAxisBottom; + var xAxis = this.xAxis; + var xAxisTop = this.xAxisTop; + var yAxisLeft = this.yAxisLeft; + var yAxisRight = this.yAxisRight; + var series1 = this.series1; + var tooltip = this.tooltip; + var stripLayer = this.stripLayer; + var lineLayer52WeekRange = this.lineLayer52WeekRange; + var lineLayerGrowthAndDecline = this.lineLayerGrowthAndDecline; + var sliceLayerStockSplit = this.sliceLayerStockSplit; + var sliceLayerEarningsMissAnnotations = this.sliceLayerEarningsMissAnnotations; + var sliceLayerEarningsBeatAnnotations = this.sliceLayerEarningsBeatAnnotations; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxisBottom; + private IgbCategoryXAxis xAxis; + private IgbCategoryXAxis xAxisTop; + private IgbNumericYAxis yAxisLeft; + private IgbNumericYAxis yAxisRight; + private IgbFinancialPriceSeries series1; + private IgbDataToolTipLayer tooltip; + private IgbDataAnnotationStripLayer stripLayer; + private IgbDataAnnotationLineLayer lineLayer52WeekRange; + private IgbDataAnnotationLineLayer lineLayerGrowthAndDecline; + private IgbDataAnnotationSliceLayer sliceLayerStockSplit; + private IgbDataAnnotationSliceLayer sliceLayerEarningsMissAnnotations; + private IgbDataAnnotationSliceLayer sliceLayerEarningsBeatAnnotations; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationStripData _annotationStripData = null; + public AnnotationStripData AnnotationStripData + { + get + { + if (_annotationStripData == null) + { + _annotationStripData = new AnnotationStripData(); + } + return _annotationStripData; + } + } + + private AnnotationLineData1 _annotationLineData1 = null; + public AnnotationLineData1 AnnotationLineData1 + { + get + { + if (_annotationLineData1 == null) + { + _annotationLineData1 = new AnnotationLineData1(); + } + return _annotationLineData1; + } + } + + private AnnotationLineData2 _annotationLineData2 = null; + public AnnotationLineData2 AnnotationLineData2 + { + get + { + if (_annotationLineData2 == null) + { + _annotationLineData2 = new AnnotationLineData2(); + } + return _annotationLineData2; + } + } + + private AnnotationSliceStockSplitData _annotationSliceStockSplitData = null; + public AnnotationSliceStockSplitData AnnotationSliceStockSplitData + { + get + { + if (_annotationSliceStockSplitData == null) + { + _annotationSliceStockSplitData = new AnnotationSliceStockSplitData(); + } + return _annotationSliceStockSplitData; + } + } + + private AnnotationSliceEarningsMissData _annotationSliceEarningsMissData = null; + public AnnotationSliceEarningsMissData AnnotationSliceEarningsMissData + { + get + { + if (_annotationSliceEarningsMissData == null) + { + _annotationSliceEarningsMissData = new AnnotationSliceEarningsMissData(); + } + return _annotationSliceEarningsMissData; + } + } + + private AnnotationSliceEarningsBeatData _annotationSliceEarningsBeatData = null; + public AnnotationSliceEarningsBeatData AnnotationSliceEarningsBeatData + { + get + { + if (_annotationSliceEarningsBeatData == null) + { + _annotationSliceEarningsBeatData = new AnnotationSliceEarningsBeatData(); + } + return _annotationSliceEarningsBeatData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +Like this sample? Get access to our complete Blazor toolkit and start building your own apps in minutes. Download it for free. + +## Blazor Data Annotation Slice Layer Example + +In Blazor, the link:{DataChartLink}.DataAnnotationSliceLayer.html\[DataAnnotationSliceLayer] renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the `AnnotationValueMemberPath` property. + +For example, you can use DataAnnotationSliceLayer to annotate stock prices with important events such as stock split and outcome of earning reports. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceEarningsBeatDataItem +{ + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationSliceEarningsBeatData + : List +{ + public AnnotationSliceEarningsBeatData() + { + this.Add(new AnnotationSliceEarningsBeatDataItem() { Value = 155, Label = @"Earnings Beat" }); + this.Add(new AnnotationSliceEarningsBeatDataItem() { Value = 86, Label = @"Earnings Beat" }); + this.Add(new AnnotationSliceEarningsBeatDataItem() { Value = 28, Label = @"Earnings Beat" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceEarningsMissDataItem +{ + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationSliceEarningsMissData + : List +{ + public AnnotationSliceEarningsMissData() + { + this.Add(new AnnotationSliceEarningsMissDataItem() { Value = 9, Label = @"Earnings Miss" }); + this.Add(new AnnotationSliceEarningsMissDataItem() { Value = 179, Label = @"Earnings Miss" }); + this.Add(new AnnotationSliceEarningsMissDataItem() { Value = 215, Label = @"Earnings Miss" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceStockSplitDataItem +{ + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationSliceStockSplitData + : List +{ + public AnnotationSliceStockSplitData() + { + this.Add(new AnnotationSliceStockSplitDataItem() { Value = 126, Label = @"Stock Split 3-1" }); + this.Add(new AnnotationSliceStockSplitDataItem() { Value = 61, Label = @"Stock Split 5-1" }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxisBottom = this.xAxisBottom; + var xAxisTop = this.xAxisTop; + var yAxisLeft = this.yAxisLeft; + var yAxisRight = this.yAxisRight; + var series1 = this.series1; + var tooltip = this.tooltip; + var sliceLayerStockSplit = this.sliceLayerStockSplit; + var sliceLayerEarningsMissAnnotations = this.sliceLayerEarningsMissAnnotations; + var sliceLayerEarningsBeatAnnotations = this.sliceLayerEarningsBeatAnnotations; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxisBottom; + private IgbCategoryXAxis xAxisTop; + private IgbNumericYAxis yAxisLeft; + private IgbNumericYAxis yAxisRight; + private IgbFinancialPriceSeries series1; + private IgbDataToolTipLayer tooltip; + private IgbDataAnnotationSliceLayer sliceLayerStockSplit; + private IgbDataAnnotationSliceLayer sliceLayerEarningsMissAnnotations; + private IgbDataAnnotationSliceLayer sliceLayerEarningsBeatAnnotations; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationSliceStockSplitData _annotationSliceStockSplitData = null; + public AnnotationSliceStockSplitData AnnotationSliceStockSplitData + { + get + { + if (_annotationSliceStockSplitData == null) + { + _annotationSliceStockSplitData = new AnnotationSliceStockSplitData(); + } + return _annotationSliceStockSplitData; + } + } + + private AnnotationSliceEarningsMissData _annotationSliceEarningsMissData = null; + public AnnotationSliceEarningsMissData AnnotationSliceEarningsMissData + { + get + { + if (_annotationSliceEarningsMissData == null) + { + _annotationSliceEarningsMissData = new AnnotationSliceEarningsMissData(); + } + return _annotationSliceEarningsMissData; + } + } + + private AnnotationSliceEarningsBeatData _annotationSliceEarningsBeatData = null; + public AnnotationSliceEarningsBeatData AnnotationSliceEarningsBeatData + { + get + { + if (_annotationSliceEarningsBeatData == null) + { + _annotationSliceEarningsBeatData = new AnnotationSliceEarningsBeatData(); + } + return _annotationSliceEarningsBeatData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +
+ +## Blazor Data Annotation Strip Layer Example + +In Blazor, the [`IgbDataAnnotationStripLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationStripLayer.html) renders multiple vertical or horizontal strips between 2 values on an axis in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the [`IgbDataAnnotationStripLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationStripLayer.html) also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property. + +For example, you can use [`IgbDataAnnotationStripLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationStripLayer.html) to annotate chart with stock market crashes and changes in federal interest rates. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationStripDataItem +{ + public double Start { get; set; } + public double End { get; set; } + public string Label { get; set; } +} + +public class AnnotationStripData + : List +{ + public AnnotationStripData() + { + this.Add(new AnnotationStripDataItem() { Start = 40, End = 45, Label = @"Covid - Market Crash" }); + this.Add(new AnnotationStripDataItem() { Start = 100, End = 144, Label = @"Fed Rate Up 0.25 - 5.25%" }); + this.Add(new AnnotationStripDataItem() { Start = 190, End = 205, Label = @"Fed Rate Down 5.25% to 4.45%" }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxisBottom = this.xAxisBottom; + var xAxisTop = this.xAxisTop; + var yAxisLeft = this.yAxisLeft; + var yAxisRight = this.yAxisRight; + var series1 = this.series1; + var tooltip = this.tooltip; + var stripLayer = this.stripLayer; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxisBottom; + private IgbCategoryXAxis xAxisTop; + private IgbNumericYAxis yAxisLeft; + private IgbNumericYAxis yAxisRight; + private IgbFinancialPriceSeries series1; + private IgbDataToolTipLayer tooltip; + private IgbDataAnnotationStripLayer stripLayer; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationStripData _annotationStripData = null; + public AnnotationStripData AnnotationStripData + { + get + { + if (_annotationStripData == null) + { + _annotationStripData = new AnnotationStripData(); + } + return _annotationStripData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +
+ +## Blazor Data Annotation Line Layer Example + +In Blazor, [`IgbDataAnnotationLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationLineLayer.html) renders multiple lines between 2 points in plot area of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. + +For example, you can use DataAnnotationLineLayer to annotate growth and decline patterns in stock prices and 52-week high and low of stock prices on y-axis. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationLineData1Item +{ + public double StartX { get; set; } + public double StartY { get; set; } + public double EndX { get; set; } + public double EndY { get; set; } + public string Label { get; set; } +} + +public class AnnotationLineData1 + : List +{ + public AnnotationLineData1() + { + this.Add(new AnnotationLineData1Item() { StartX = 190, StartY = 138, EndX = 230, EndY = 138, Label = @"52-Week Low" }); + this.Add(new AnnotationLineData1Item() { StartX = 190, StartY = 481, EndX = 230, EndY = 481, Label = @"52-Week High" }); + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class AnnotationLineData2Item +{ + public double StartX { get; set; } + public double StartY { get; set; } + public double EndX { get; set; } + public double EndY { get; set; } + public string Label { get; set; } +} + +public class AnnotationLineData2 + : List +{ + public AnnotationLineData2() + { + this.Add(new AnnotationLineData2Item() { StartX = 48, StartY = 25, EndX = 105, EndY = 250, Label = @"Growth & +Support" }); + this.Add(new AnnotationLineData2Item() { StartX = 108, StartY = 440, EndX = 155, EndY = 210, Label = @"Decline & +Resistance" }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxisLeft = this.yAxisLeft; + var yAxisRight = this.yAxisRight; + var series1 = this.series1; + var tooltip = this.tooltip; + var lineLayer52WeekRange = this.lineLayer52WeekRange; + var lineLayerGrowthAndDecline = this.lineLayerGrowthAndDecline; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxisLeft; + private IgbNumericYAxis yAxisRight; + private IgbFinancialPriceSeries series1; + private IgbDataToolTipLayer tooltip; + private IgbDataAnnotationLineLayer lineLayer52WeekRange; + private IgbDataAnnotationLineLayer lineLayerGrowthAndDecline; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationLineData1 _annotationLineData1 = null; + public AnnotationLineData1 AnnotationLineData1 + { + get + { + if (_annotationLineData1 == null) + { + _annotationLineData1 = new AnnotationLineData1(); + } + return _annotationLineData1; + } + } + + private AnnotationLineData2 _annotationLineData2 = null; + public AnnotationLineData2 AnnotationLineData2 + { + get + { + if (_annotationLineData2 == null) + { + _annotationLineData2 = new AnnotationLineData2(); + } + return _annotationLineData2; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +
+ +## Blazor Data Annotation Rect Layer Example + +In Blazor, the [`IgbDataAnnotationRectLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationRectLayer.html) renders multiple rectangles defined by starting and ending points in plot area of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. + +For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationRectDataItem +{ + public double StartX { get; set; } + public double StartY { get; set; } + public double EndX { get; set; } + public double EndY { get; set; } + public string Label { get; set; } +} + +public class AnnotationRectData + : List +{ + public AnnotationRectData() + { + this.Add(new AnnotationRectDataItem() { StartX = 85, StartY = 190, EndX = 140, EndY = 415, Label = @"Head & Shoulders Pattern + (Bearish Downtrend)" }); + this.Add(new AnnotationRectDataItem() { StartX = 53, StartY = 75, EndX = 230, EndY = 80, Label = @"Price Gap (Bearish Target)" }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var series1 = this.series1; + var tooltip = this.tooltip; + var rectLayer = this.rectLayer; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbFinancialPriceSeries series1; + private IgbDataToolTipLayer tooltip; + private IgbDataAnnotationRectLayer rectLayer; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationRectData _annotationRectData = null; + public AnnotationRectData AnnotationRectData + { + get + { + if (_annotationRectData == null) + { + _annotationRectData = new AnnotationRectData(); + } + return _annotationRectData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +
+ +## Blazor Data Annotation Band Layer Example + +In Blazor, the [`IgbDataAnnotationBandLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationBandLayer.html) renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using `StartValueXMemberPath` and `StartValueYMemberPath` properties and the ending points should be mapped using `EndValueXMemberPath` and `EndValueYMemberPath` properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property. + +For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationBandDataItem +{ + public string StartLabel { get; set; } + public string EndLabel { get; set; } + public double StartX { get; set; } + public double StartY { get; set; } + public double EndX { get; set; } + public double EndY { get; set; } + public double Value { get; set; } + public string Label { get; set; } +} + +public class AnnotationBandData + : List +{ + public AnnotationBandData() + { + this.Add(new AnnotationBandDataItem() { StartLabel = @"Growth Start", EndLabel = @"Growth Stop", StartX = 48, StartY = 110, EndX = 105, EndY = 335, Value = 170, Label = @"Rapid Growth" }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxisBottom = this.xAxisBottom; + var xAxis = this.xAxis; + var yAxisLeft = this.yAxisLeft; + var yAxisRight = this.yAxisRight; + var series1 = this.series1; + var tooltip = this.tooltip; + var bandLayer = this.bandLayer; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxisBottom; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxisLeft; + private IgbNumericYAxis yAxisRight; + private IgbFinancialPriceSeries series1; + private IgbDataToolTipLayer tooltip; + private IgbDataAnnotationBandLayer bandLayer; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationBandData _annotationBandData = null; + public AnnotationBandData AnnotationBandData + { + get + { + if (_annotationBandData == null) + { + _annotationBandData = new AnnotationBandData(); + } + return _annotationBandData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +
+ +## API References + +The following is a list of API members mentioned in the above sections: + +- `TargetAxis`: This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `DataSource`: This property binds data to the annotation layer to provide the precise shape. +- `StartValueXMemberPath`: This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `StartValueYMemberPath`: This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `EndValueXMemberPath`: This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `EndValueYMemberPath`: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer. +- `StartLabelXMemberPath`: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis. +- `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label. +- `StartLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the starting position of [`IgbDataAnnotationBandLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationBandLayer.html), [`IgbDataAnnotationLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationLineLayer.html), [`IgbDataAnnotationRectLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationRectLayer.html) on the y-axis. +- `EndLabelYMemberPath`: This property is a mapping to the data column representing the axis label for the ending position of [`IgbDataAnnotationBandLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationBandLayer.html), [`IgbDataAnnotationLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationLineLayer.html), [`IgbDataAnnotationRectLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationRectLayer.html) on the y-axis. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-filtering.md new file mode 100644 index 000000000..04bda8f64 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-filtering.md @@ -0,0 +1,182 @@ +--- +title: Blazor Chart Data Filtering | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Data Filtering +_keywords: Blazor Charts, Filtering, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Filtering +_premium: true +--- + +# Blazor Chart Data Filtering + +Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. + +A complete list of valid expressions and keywords to form a query string can be found here: + +[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris) + +> NOTE: Any incorrect filter applied will result with an empty chart. + +## Blazor Chart Data Filter Example + +The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the [`InitialFilter`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialFilter) property, to update the chart visual and thus filtering out the other decades out. + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Linq + +
+
+ + + + + + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var editor = this.editor; + var initialFilter = this.initialFilter; + var chart = this.chart; + + this.BindElements = () => { + editor.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel editor; + private IgbPropertyEditorPropertyDescription initialFilter; + private IgbCategoryChart chart; + + public void EditorChangeDataFilter(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var filter = args.NewValue.ToString(); + chart.InitialFilter = "(contains(Year," + "'" + filter + "'" + "))"; + } + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +
+ +The [`InitialFilter`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialFilter) property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. + +eg. To show all countries that start with the letter B: + +"(startswith(Country, 'B'))" + +eg. Concatenating more than one expression: + +"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) +- [`IsTransitionInEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_IsTransitionInEnabled) +- [`TransitionInDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_TransitionInDuration) +- [`TransitionInMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_TransitionInMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-legend.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-legend.md new file mode 100644 index 000000000..e8bc247fd --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-legend.md @@ -0,0 +1,1217 @@ +--- +title: Blazor Chart Data Legend | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Blazor chart with the data legend! +_keywords: Blazor charts, chart legend, legend, legend types, Ignite UI for Blazor, Infragistics +_license: commercial +mentionedTypes: ["XamCategoryChart", "XamDataLegend", "Series", "DataLegendSummaryType", "DataAbbreviationMode" ] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Legend +_premium: true +--- + +# Blazor Data Legend + +In Ignite UI for Blazor, the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) is highly-customizable version of the [`Legend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Legend), that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit). + +## Blazor Data Legend Rows + +The rows of the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) include the header row, series row(s), and the summary row. The header row displays the axis label of the point that is hovered, and can be changed using the [`HeaderText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderText) property. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +### Header Row + +The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use [`HeaderFormatDate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderFormatDate) and [`HeaderFormatTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderFormatTime) properties to format date and time in the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) if the x-axis shows dates. For other types of series, the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) does not render the header row. + +### Series Row + +The series row represents each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol or unit of measurement, if specified. You can filter series rows by setting [`IncludedSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedSeries) or [`ExcludedSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedSeries) properties to a collection of series' indexes (1, 2, 3) or series' titles (Tesla, Microsoft). + +### Summary Row + +Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the [`SummaryTitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_SummaryTitleText) property of the legend. Also, you can use the [`SummaryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_SummaryType) property to customize whether you display the `Total`, `Min`, `Max`, or `Average` of series values in the summary row. + +## Blazor Data Legend Columns + +The columns of the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) include the series title, label, value of data column, and optional unit associated with the value. Some series in the chart can have multiple columns for label, value, and units. For example, financial price series has **High**, **Low**, **Open**, and **Close** data columns which can be filtered in the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) using the [`IncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedColumns) or [`ExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedColumns) properties. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbFinancialChart chart; + + private MultipleStocks _multipleStocks = null; + public MultipleStocks MultipleStocks + { + get + { + if (_multipleStocks == null) + { + MultipleStocks.Fetch().ContinueWith((t) => {_multipleStocks = t.Result; StateHasChanged(); }); + } + return _multipleStocks; + } + } + +} +``` +```csharp +//begin async data + using System; + using System.Collections.Generic; + using System.Text.Json; + using System.Threading; + using System.Threading.Tasks; + using System.Net.Http; + using System.Collections.ObjectModel; + using IgniteUI.Blazor.Controls; + + public class MultipleStocks : List + { + public async static Task Fetch() + { + var google = await MultipleStocks.GetGoogleStock(); + var amazon = await MultipleStocks.GetAmazonStock(); + + var val = new MultipleStocks(); + val.Add(google); + val.Add(amazon); + return val; + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public async static Task GetAmazonStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Amazon"; + return stockData; + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public async static Task GetTeslaStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Tesla"; + return stockData; + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public async static Task GetMicrosoftStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Microsoft"; + return stockData; + } + + /** gets Google stock OHLC prices from a .JSON file */ + public async static Task GetGoogleStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Google"; + return stockData; + } + + private async static Task[]> Fetch(string url) + { + HttpClient client = new HttpClient(); + var str = await client.GetStringAsync(url); + var arr = JsonSerializer.Deserialize[]>(str); + return arr; + } + + public static TitledStockData ConvertData(Dictionary[] arr) + { + var ret = new TitledStockData(); + + foreach (var json in arr) + { + var date = ((JsonElement)json["date"]).GetString(); + var parts = date.Split('-'); // "2020-01-01" + var item = new MultipleStocksItem(); + item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]),12,0,0); + item.Open = ((JsonElement)json["open"]).GetDouble(); + item.High = ((JsonElement)json["high"]).GetDouble(); + item.Low = ((JsonElement)json["low"]).GetDouble(); + item.Close = ((JsonElement)json["close"]).GetDouble(); + item.Volume = ((JsonElement)json["volume"]).GetDouble(); + ret.Add(item); + } + + return ret; + } + } + + public class MultipleStocksItem + { + [DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)] + public string Title { get; set; } + public DateTime Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + } + + public class TitledStockData + : ObservableCollection + { + + } + //end async data +``` + + +Setting values on the [`IncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedColumns) and [`ExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedColumns) properties, depends on type of series and how many data columns they support. For example, you can set [`IncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedColumns) property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend. + +| Type of Series | Column Names | +| -----------------|-------------- | +| Category Series | Value | +| Radial Series | Value | +| Polar Series | Radius, Angle | +| Bubble Series | X, Y, Radius | +| Scatter Series | X, Y | +| Range Series | High, Low | +| Financial Series | High, Low, Open, Close, Change, TypicalPrice, Volume | + +Where the **TypicalPrice** and percentage **Change** of OHLC prices are automatically calculated by financial series so you do not need to include them in your data sources. + +### Title Column + +The title column displays legend badges and series titles, which come from the `Title` property of the different [`IgbSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html) plotted in the chart. + +### Label Column + +The label column displays short name on the left side of value column, e.g. "O" for **Open** stock price. You can toggle visibility of this column using the [`LabelDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_LabelDisplayMode) property. + +### Value Column + +The value column displays values of series as abbreviated text which can be formatted using the [`ValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatAbbreviation) property to apply the same abbreviation for all numbers by setting this property to `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the [`ValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMinFractions) and [`ValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMaxFractions) for minimum and maximum digits, respectively. + +### Unit Column + +The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the [`ValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatAbbreviation) property, e.g. "M" for the `Million` abbreviation. + +### Customizing Columns + +You can customize text displayed in the **Label** and **Unit** columns using properties that end with **MemberAsLegendLabel** and **MemberAsLegendUnit** on each series. The following table shows some possible customizations of the **Label** and **Unit** columns. + +| Type of Series | Series Properties | +| ------|---- | +| Category Series | ValueMemberAsLegendLabel="$"
ValueMemberAsLegendUnit="M" | +| Radial Series | ValueMemberAsLegendLabel="Distance:"
ValueMemberAsLegendUnit="KM" | +| Polar Series | RadiusMemberAsLegendLabel="Radius:"
RadiusMemberAsLegendUnit="KM"
AngleMemberAsLegendLabel="Angle:"
AngleMemberAsLegendUnit="°" | +| Range Series | HighMemberAsLegendLabel="H:"
HighMemberAsLegendUnit="K"
LowMemberAsLegendLabel="L:"
LowMemberAsLegendUnit="K" | +| Financial Series | OpenMemberAsLegendLabel="O:"
OpenMemberAsLegendUnit="K"
HighMemberAsLegendLabel="H:"
HighMemberAsLegendUnit="K"
LowMemberAsLegendLabel="L:"
LowMemberAsLegendUnit="K"
CloseMemberAsLegendLabel="C:"
CloseMemberAsLegendUnit="K"
| + +Also, you can use the `UnitText` property on the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) to change text displayed in all Unit columns. + +## Layout Mode + +Legend items can be positioned in a vertical or table structure via the [`LayoutMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_LayoutMode) property. The default value is `Table`, which retains the same look and feel as seen in previous releases. + +eg. + +Layout Mode + +## Blazor Data Legend Styling + +The [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) provides properties for styling each type of column. Each of these properties begins with **Title**, **Label**, **Value**, or **Units**. You can style the text's color, font, and margin. For example, if you wanted to set the text color of all columns, you would set the [`TitleTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_TitleTextColor), [`LabelTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_LabelTextColor), [`ValueTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueTextColor), and [`UnitsTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_UnitsTextColor) properties. The following example demonstrates a utilization of the styling properties mentioned above: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbFinancialChart chart; + + private StockGoogle _stockGoogle = null; + public StockGoogle StockGoogle + { + get + { + if (_stockGoogle == null) + { + _stockGoogle = new StockGoogle(); + } + return _stockGoogle; + } + } + +} +``` +```csharp +//begin data +using System; +using System.Collections.Generic; +public class StockGoogle : List { + + public StockGoogle(){ + + this.Add(new StockItem(){Date=new DateTime(2014,03,01,13,0,0), Open= 559.6, High= 568.2, Low= 558.4, Close= 566.9, Volume= 2182626 }); + this.Add(new StockItem(){Date=new DateTime(2014,03,02,13,0,0), Open= 562.4, High= 571.8, Low= 561.4, Close= 567.0, Volume= 2088804 }); + this.Add(new StockItem(){Date=new DateTime(2014,03,03,13,0,0), Open= 569.9, High= 587.3, Low= 564.1, Close= 569.7, Volume= 5087530 }); + // ... 81 more items + // this.Add(new StockItem(){Date=new DateTime(2014,06,31,13,0,0), Open= 580.6, High= 583.6, Low= 570.0, Close= 571.6, Volume= 2099516 }); + this.Add(new StockItem(){Date=new DateTime(2014,07,01,13,0,0), Open= 570.4, High= 576.0, Low= 562.9, Close= 566.1, Volume= 1950171 }); + this.Add(new StockItem(){Date=new DateTime(2014,07,04,13,0,0), Open= 569.0, High= 575.4, Low= 564.1, Close= 573.1, Volume= 1427169 }); + this.Add(new StockItem(){Date=new DateTime(2014,07,05,13,0,0), Open= 570.0, High= 572.0, Low= 562.6, Close= 565.1, Volume= 1556685 }); + // ... 61 more items + //this.Add(new StockItem(){Date=new DateTime(2014,09,31,13,0,0), Open= 559.4, High= 559.6, Low= 554.8, Close= 559.1, Volume= 2032887 }); + this.Add(new StockItem(){Date=new DateTime(2014,10,03,13,0,0), Open= 555.5, High= 557.9, Low= 553.2, Close= 555.2, Volume= 1378511 }); + this.Add(new StockItem(){Date=new DateTime(2014,10,04,13,0,0), Open= 553.0, High= 555.5, Low= 549.3, Close= 554.1, Volume= 1240761 }); + this.Add(new StockItem(){Date=new DateTime(2014,10,05,13,0,0), Open= 556.8, High= 556.8, Low= 544.0, Close= 545.9, Volume= 2026740 }); + // ... 37 more items + //this.Add(new StockItem(){Date=new DateTime(2014,11,31,13,0,0), Open= 531.3, High= 532.6, Low= 525.8, Close= 526.4, Volume= 1371819 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,02,13,0,0), Open= 529.0, High= 531.3, Low= 524.1, Close= 524.8, Volume= 1446662 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,05,13,0,0), Open= 523.3, High= 524.3, Low= 513.1, Close= 513.9, Volume= 2054238 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,06,13,0,0), Open= 515.0, High= 516.2, Low= 501.1, Close= 502.0, Volume= 2891950 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,07,13,0,0), Open= 507.0, High= 507.2, Low= 499.6, Close= 501.1, Volume= 2059366 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,08,13,0,0), Open= 498.0, High= 503.5, Low= 491.0, Close= 502.7, Volume= 3344395 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,09,13,0,0), Open= 504.8, High= 504.9, Low= 494.8, Close= 496.2, Volume= 2065715 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,12,13,0,0), Open= 494.9, High= 496.0, Low= 487.6, Close= 492.6, Volume= 2320446 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,13,13,0,0), Open= 498.8, High= 503.0, Low= 492.4, Close= 496.2, Volume= 2365687 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,14,13,0,0), Open= 494.6, High= 503.2, Low= 493.0, Close= 500.9, Volume= 2229638 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,15,13,0,0), Open= 505.6, High= 505.7, Low= 497.8, Close= 501.8, Volume= 2711355 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,16,13,0,0), Open= 500.0, High= 508.2, Low= 500.0, Close= 508.1, Volume= 2292043 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,20,13,0,0), Open= 511.0, High= 512.5, Low= 506.0, Close= 506.9, Volume= 2225922 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,21,13,0,0), Open= 507.3, High= 519.3, Low= 506.2, Close= 518.0, Volume= 2262455 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,22,13,0,0), Open= 521.5, High= 536.3, Low= 519.7, Close= 534.4, Volume= 2669558 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,23,13,0,0), Open= 535.6, High= 542.2, Low= 533.0, Close= 540.0, Volume= 2275485 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,26,13,0,0), Open= 538.5, High= 539.0, Low= 529.7, Close= 535.2, Volume= 1539524 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,27,13,0,0), Open= 530.0, High= 530.7, Low= 518.2, Close= 518.6, Volume= 1898844 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,28,13,0,0), Open= 522.8, High= 523.0, Low= 510.0, Close= 510.0, Volume= 1679230 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,29,13,0,0), Open= 511.0, High= 511.1, Low= 501.2, Close= 510.7, Volume= 4174924 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,30,13,0,0), Open= 515.9, High= 539.9, Low= 515.5, Close= 534.5, Volume= 5590977 }); + this.Add(new StockItem(){Date=new DateTime(2015,01,02,13,0,0), Open= 531.7, High= 533.0, Low= 518.5, Close= 528.5, Volume= 2841976 }); + this.Add(new StockItem(){Date=new DateTime(2015,01,03,13,0,0), Open= 528.0, High= 533.4, Low= 523.3, Close= 529.2, Volume= 2033085 }); + this.Add(new StockItem(){Date=new DateTime(2015,01,04,13,0,0), Open= 529.2, High= 532.7, Low= 521.3, Close= 522.8, Volume= 1659125 }); + // ... 36 more items + //this.Add(new StockItem(){Date=new DateTime(2015,02,30,13,0,0), Open= 551.6, High= 553.5, Low= 548.2, Close= 552.0, Volume= 1283958 }); + //this.Add(new StockItem(){Date=new DateTime(2015,02,31,13,0,0), Open= 550.0, High= 554.7, Low= 546.7, Close= 548.0, Volume= 1583677 }); + this.Add(new StockItem(){Date=new DateTime(2015,03,01,13,0,0), Open= 548.6, High= 551.1, Low= 539.5, Close= 542.6, Volume= 1957718 }); + this.Add(new StockItem(){Date=new DateTime(2015,03,02,13,0,0), Open= 540.9, High= 540.9, Low= 533.9, Close= 535.5, Volume= 1711737 }); + this.Add(new StockItem(){Date=new DateTime(2015,03,06,13,0,0), Open= 532.2, High= 538.4, Low= 529.6, Close= 536.8, Volume= 1320767 }); + // ... 81 more items + //this.Add(new StockItem(){Date=new DateTime(2015,06,31,13,0,0), Open= 631.4, High= 632.9, Low= 625.5, Close= 625.6, Volume= 1706149 }); + this.Add(new StockItem(){Date=new DateTime(2015,07,03,13,0,0), Open= 625.3, High= 633.1, Low= 625.3, Close= 631.2, Volume= 1304511 }); + this.Add(new StockItem(){Date=new DateTime(2015,07,04,13,0,0), Open= 628.4, High= 634.8, Low= 627.2, Close= 629.3, Volume= 1490881 }); + this.Add(new StockItem(){Date=new DateTime(2015,07,05,13,0,0), Open= 634.3, High= 647.9, Low= 633.2, Close= 643.8, Volume= 2334266 }); + // ... 102 more items + //this.Add(new StockItem(){Date=new DateTime(2015,11,31,13,0,0), Open= 769.5, High= 769.5, Low= 758.3, Close= 758.9, Volume= 1500923 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,04,13,0,0), Open= 743.0, High= 744.1, Low= 731.3, Close= 741.8, Volume= 3258199 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,05,13,0,0), Open= 746.5, High= 752.0, Low= 738.6, Close= 742.6, Volume= 1950691 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,06,13,0,0), Open= 730.0, High= 747.2, Low= 728.9, Close= 743.6, Volume= 1947034 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,07,13,0,0), Open= 730.3, High= 738.5, Low= 719.1, Close= 726.4, Volume= 2963741 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,08,13,0,0), Open= 731.5, High= 733.2, Low= 713.0, Close= 714.5, Volume= 2450857 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,11,13,0,0), Open= 716.6, High= 718.9, Low= 703.5, Close= 716.0, Volume= 2090621 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,12,13,0,0), Open= 721.7, High= 728.8, Low= 717.3, Close= 726.1, Volume= 2024509 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,13,13,0,0), Open= 730.9, High= 734.7, Low= 698.6, Close= 700.6, Volume= 2468295 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,14,13,0,0), Open= 705.4, High= 721.9, Low= 689.1, Close= 714.7, Volume= 2211853 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,15,13,0,0), Open= 692.3, High= 706.7, Low= 685.4, Close= 694.5, Volume= 3592449 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,19,13,0,0), Open= 703.3, High= 710.0, Low= 693.4, Close= 701.8, Volume= 2258479 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,20,13,0,0), Open= 688.6, High= 706.9, Low= 673.3, Close= 698.5, Volume= 3439386 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,21,13,0,0), Open= 702.2, High= 719.2, Low= 694.5, Close= 706.6, Volume= 2410263 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,22,13,0,0), Open= 723.6, High= 728.1, Low= 720.1, Close= 725.3, Volume= 2006528 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,25,13,0,0), Open= 723.6, High= 729.7, Low= 710.0, Close= 711.7, Volume= 1704641 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,26,13,0,0), Open= 713.9, High= 718.3, Low= 706.5, Close= 713.0, Volume= 1324300 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,27,13,0,0), Open= 713.7, High= 718.2, Low= 694.4, Close= 700.0, Volume= 2139970 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,28,13,0,0), Open= 722.2, High= 733.7, Low= 712.4, Close= 731.0, Volume= 2658016 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,29,13,0,0), Open= 731.5, High= 745.0, Low= 726.8, Close= 743.0, Volume= 3394935 }); + this.Add(new StockItem(){Date=new DateTime(2016,01,01,13,0,0), Open= 750.5, High= 757.9, Low= 743.3, Close= 752.0, Volume= 4801816 }); + this.Add(new StockItem(){Date=new DateTime(2016,01,02,13,0,0), Open= 784.5, High= 789.9, Low= 764.6, Close= 764.6, Volume= 6332431 }); + this.Add(new StockItem(){Date=new DateTime(2016,01,03,13,0,0), Open= 770.2, High= 774.5, Low= 720.5, Close= 727.0, Volume= 6162333 }); + // ... 36 more items + //this.Add(new StockItem(){Date=new DateTime(2016,02,29,13,0,0), Open= 734.6, High= 747.3, Low= 728.8, Close= 744.8, Volume= 1902128 }); + //this.Add(new StockItem(){Date=new DateTime(2016,02,30,13,0,0), Open= 750.1, High= 757.9, Low= 748.7, Close= 750.5, Volume= 1780998 }); + // this.Add(new StockItem(){Date=new DateTime(2016,02,31,13,0,0), Open= 749.3, High= 750.9, Low= 740.9, Close= 745.0, Volume= 1712375 }); + this.Add(new StockItem(){Date=new DateTime(2016,03,01,13,0,0), Open= 738.6, High= 750.3, Low= 737.0, Close= 749.9, Volume= 1574870 }); + this.Add(new StockItem(){Date=new DateTime(2016,03,04,13,0,0), Open= 750.1, High= 752.8, Low= 742.4, Close= 745.3, Volume= 1131843 }); + this.Add(new StockItem(){Date=new DateTime(2016,03,05,13,0,0), Open= 738.0, High= 742.8, Low= 735.4, Close= 737.8, Volume= 1129829 }); + // ... 38 more items + //this.Add(new StockItem(){Date=new DateTime(2016,04,31,13,0,0), Open= 731.7, High= 739.7, Low= 731.3, Close= 735.7, Volume= 2129545 }); + this.Add(new StockItem(){Date=new DateTime(2016,05,01,13,0,0), Open= 734.5, High= 737.2, Low= 730.7, Close= 734.1, Volume= 1253593 }); + this.Add(new StockItem(){Date=new DateTime(2016,05,02,13,0,0), Open= 732.5, High= 733.0, Low= 724.2, Close= 730.4, Volume= 1341807 }); + this.Add(new StockItem(){Date=new DateTime(2016,05,03,13,0,0), Open= 729.3, High= 729.5, Low= 720.6, Close= 722.3, Volume= 1226253 }); + // ... 103 more items + // this.Add(new StockItem(){Date=new DateTime(2016,09,31,13,0,0), Open= 795.5, High= 796.9, Low= 784.0, Close= 784.5, Volume= 2427284 }); + this.Add(new StockItem(){Date=new DateTime(2016,10,01,13,0,0), Open= 782.9, High= 789.5, Low= 775.5, Close= 783.6, Volume= 2406356 }); + this.Add(new StockItem(){Date=new DateTime(2016,10,02,13,0,0), Open= 778.2, High= 781.6, Low= 763.5, Close= 768.7, Volume= 1918414 }); + this.Add(new StockItem(){Date=new DateTime(2016,10,03,13,0,0), Open= 767.3, High= 770.0, Low= 759.0, Close= 762.1, Volume= 1943175 }); + // ... 39 more items + //this.Add(new StockItem(){Date=new DateTime(2017,00,03,13,0,0), Open= 778.8, High= 789.6, Low= 775.8, Close= 786.1, Volume= 1657268 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,04,13,0,0), Open= 788.4, High= 791.3, Low= 783.2, Close= 786.9, Volume= 1072958 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,05,13,0,0), Open= 786.1, High= 794.5, Low= 785.0, Close= 794.0, Volume= 1335167 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,06,13,0,0), Open= 795.3, High= 807.9, Low= 792.2, Close= 806.1, Volume= 1640170 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,09,13,0,0), Open= 806.4, High= 810.0, Low= 802.8, Close= 806.6, Volume= 1274645 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,10,13,0,0), Open= 807.9, High= 809.1, Low= 803.5, Close= 804.8, Volume= 1176780 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,11,13,0,0), Open= 805.0, High= 808.1, Low= 801.4, Close= 807.9, Volume= 1065936 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,12,13,0,0), Open= 807.1, High= 807.4, Low= 799.2, Close= 806.4, Volume= 1353057 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,13,13,0,0), Open= 807.5, High= 811.2, Low= 806.7, Close= 807.9, Volume= 1099215 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,17,13,0,0), Open= 807.1, High= 807.1, Low= 800.4, Close= 804.6, Volume= 1362115 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,18,13,0,0), Open= 805.8, High= 806.2, Low= 801.0, Close= 806.1, Volume= 1294407 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,19,13,0,0), Open= 805.1, High= 809.5, Low= 801.8, Close= 802.2, Volume= 919325 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,20,13,0,0), Open= 806.9, High= 806.9, Low= 801.7, Close= 805.0, Volume= 1670045 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,23,13,0,0), Open= 807.3, High= 820.9, Low= 803.7, Close= 819.3, Volume= 1963628 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,24,13,0,0), Open= 822.3, High= 825.9, Low= 817.8, Close= 823.9, Volume= 1474010 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,25,13,0,0), Open= 829.6, High= 835.8, Low= 825.1, Close= 835.7, Volume= 1627304 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,26,13,0,0), Open= 837.8, High= 838.0, Low= 827.0, Close= 832.1, Volume= 2973891 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,27,13,0,0), Open= 834.7, High= 842.0, Low= 820.4, Close= 823.3, Volume= 2965771 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,30,13,0,0), Open= 814.7, High= 815.8, Low= 799.8, Close= 802.3, Volume= 3246573 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,31,13,0,0), Open= 796.9, High= 801.3, Low= 790.5, Close= 796.8, Volume= 2160556 }); + this.Add(new StockItem(){Date=new DateTime(2017,01,01,13,0,0), Open= 799.7, High= 801.2, Low= 791.2, Close= 795.7, Volume= 2029744 }); + this.Add(new StockItem(){Date=new DateTime(2017,01,02,13,0,0), Open= 793.8, High= 802.7, Low= 792.0, Close= 798.5, Volume= 1532138 }); + this.Add(new StockItem(){Date=new DateTime(2017,01,03,13,0,0), Open= 803.0, High= 806.0, Low= 800.4, Close= 801.5, Volume= 1463448 }); + // ... 36 more items + //this.Add(new StockItem(){Date=new DateTime(2017,02,29,13,0,0), Open= 825.0, High= 832.8, Low= 822.4, Close= 831.4, Volume= 1786321 }); + //this.Add(new StockItem(){Date=new DateTime(2017,02,30,13,0,0), Open= 833.5, High= 833.7, Low= 829.0, Close= 831.5, Volume= 1055339 }); + //this.Add(new StockItem(){Date=new DateTime(2017,02,31,13,0,0), Open= 829.0, High= 831.6, Low= 827.4, Close= 829.6, Volume= 1401893 }); + this.Add(new StockItem(){Date=new DateTime(2017,03,03,13,0,0), Open= 829.2, High= 840.9, Low= 829.2, Close= 838.5, Volume= 1671503 }); + this.Add(new StockItem(){Date=new DateTime(2017,03,04,13,0,0), Open= 831.4, High= 835.2, Low= 829.0, Close= 834.6, Volume= 1045363 }); + this.Add(new StockItem(){Date=new DateTime(2017,03,05,13,0,0), Open= 835.5, High= 842.5, Low= 830.7, Close= 831.4, Volume= 1555328 }); + // ... 37 more items + //this.Add(new StockItem(){Date=new DateTime(2017,04,31,13,0,0), Open= 975.0, High= 979.3, Low= 960.2, Close= 964.9, Volume= 2448067 }); + this.Add(new StockItem(){Date=new DateTime(2017,05,01,13,0,0), Open= 969.0, High= 971.5, Low= 960.0, Close= 967.0, Volume= 1410458 }); + this.Add(new StockItem(){Date=new DateTime(2017,05,02,13,0,0), Open= 969.5, High= 975.9, Low= 966.0, Close= 975.6, Volume= 1750955 }); + this.Add(new StockItem(){Date=new DateTime(2017,05,05,13,0,0), Open= 976.5, High= 986.9, Low= 975.1, Close= 983.7, Volume= 1252106 }); + // ... 38 more items + //this.Add(new StockItem(){Date=new DateTime(2017,06,31,13,0,0), Open= 941.9, High= 943.6, Low= 926.0, Close= 930.5, Volume= 1970095 }); + this.Add(new StockItem(){Date=new DateTime(2017,07,01,13,0,0), Open= 932.4, High= 937.5, Low= 929.3, Close= 930.8, Volume= 1277734 }); + this.Add(new StockItem(){Date=new DateTime(2017,07,02,13,0,0), Open= 928.6, High= 932.6, Low= 916.7, Close= 930.4, Volume= 1824448 }); + this.Add(new StockItem(){Date=new DateTime(2017,07,03,13,0,0), Open= 930.3, High= 932.2, Low= 922.2, Close= 923.6, Volume= 1202512 }); + // ... 61 more items + //this.Add(new StockItem(){Date=new DateTime(2017,09,31,13,0,0), Open= 1015.2, High= 1024.0, Low= 1010.4, Close= 1016.6, Volume= 1331391 }); + this.Add(new StockItem(){Date=new DateTime(2017,10,01,13,0,0), Open= 1017.2, High= 1029.7, Low= 1017.0, Close= 1025.5, Volume= 1373444 }); + this.Add(new StockItem(){Date=new DateTime(2017,10,02,13,0,0), Open= 1021.8, High= 1028.1, Low= 1013.0, Close= 1025.6, Volume= 1048970 }); + this.Add(new StockItem(){Date=new DateTime(2017,10,03,13,0,0), Open= 1022.1, High= 1032.7, Low= 1020.3, Close= 1032.5, Volume= 1076350 }); + // ... 59 more items + + } +} +public class StockItem { + public double? Open {get;set;} + public double? Close {get;set;} + public double? High {get;set;} + public double? Low {get;set;} + public double? Volume {get;set;} + + public DateTime? Date {get;set;} + + } + //end data +``` + + +## Blazor Data Legend Value Formatting + +The [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) provides automatic abbreviation of large numbers using its [`ValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`ValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMinFractions) and [`ValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. +The following example demonstrates how to use those properties: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +## Blazor Data Legend Value Mode + +You have the ability to change the default decimal display of values within the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) to a currency by changing the [`ValueFormatMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMode) property. Also, you can change the culture of the displayed currency symbol by setting the [`ValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatCulture) property a culture tag. For example, the following example data legend with the [`ValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatCulture) set to "en-GB" to display British Pounds (£) symbol: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbFinancialChart chart; + + private MultipleStocks _multipleStocks = null; + public MultipleStocks MultipleStocks + { + get + { + if (_multipleStocks == null) + { + MultipleStocks.Fetch().ContinueWith((t) => {_multipleStocks = t.Result; StateHasChanged(); }); + } + return _multipleStocks; + } + } + +} +``` +```csharp +//begin async data + using System; + using System.Collections.Generic; + using System.Text.Json; + using System.Threading; + using System.Threading.Tasks; + using System.Net.Http; + using System.Collections.ObjectModel; + using IgniteUI.Blazor.Controls; + + public class MultipleStocks : List + { + public async static Task Fetch() + { + var google = await MultipleStocks.GetGoogleStock(); + var amazon = await MultipleStocks.GetAmazonStock(); + + var val = new MultipleStocks(); + val.Add(google); + val.Add(amazon); + return val; + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public async static Task GetAmazonStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Amazon"; + return stockData; + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public async static Task GetTeslaStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Tesla"; + return stockData; + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public async static Task GetMicrosoftStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Microsoft"; + return stockData; + } + + /** gets Google stock OHLC prices from a .JSON file */ + public async static Task GetGoogleStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Google"; + return stockData; + } + + private async static Task[]> Fetch(string url) + { + HttpClient client = new HttpClient(); + var str = await client.GetStringAsync(url); + var arr = JsonSerializer.Deserialize[]>(str); + return arr; + } + + public static TitledStockData ConvertData(Dictionary[] arr) + { + var ret = new TitledStockData(); + + foreach (var json in arr) + { + var date = ((JsonElement)json["date"]).GetString(); + var parts = date.Split('-'); // "2020-01-01" + var item = new MultipleStocksItem(); + item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]),12,0,0); + item.Open = ((JsonElement)json["open"]).GetDouble(); + item.High = ((JsonElement)json["high"]).GetDouble(); + item.Low = ((JsonElement)json["low"]).GetDouble(); + item.Close = ((JsonElement)json["close"]).GetDouble(); + item.Volume = ((JsonElement)json["volume"]).GetDouble(); + ret.Add(item); + } + + return ret; + } + } + + public class MultipleStocksItem + { + [DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)] + public string Title { get; set; } + public DateTime Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + } + + public class TitledStockData + : ObservableCollection + { + + } + //end async data +``` + + +## Blazor Data Legend Grouping + +[`DataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: +By default, DataLegend will hide names of groups, but you can display group names by setting the [`GroupRowVisible`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_GroupRowVisible) property to true. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + var columnSeries2 = this.columnSeries2; + var columnSeries3 = this.columnSeries3; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + private IgbColumnSeries columnSeries2; + private IgbColumnSeries columnSeries3; + + private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null; + public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals + { + get + { + if (_olympicMedalsTopCountriesWithTotals == null) + { + _olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return _olympicMedalsTopCountriesWithTotals; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OlympicMedalsTopCountriesWithTotalsItem +{ + public string Year { get; set; } + public double America { get; set; } + public double AmericaGold { get; set; } + public double China { get; set; } + public double ChinaGold { get; set; } + public double Russia { get; set; } + public double RussiaGold { get; set; } + public double Total { get; set; } +} + +public class OlympicMedalsTopCountriesWithTotals + : List +{ + public OlympicMedalsTopCountriesWithTotals() + { + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"1996", America = 148, AmericaGold = 50, China = 110, ChinaGold = 40, Russia = 95, RussiaGold = 20, Total = 353 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2000", America = 142, AmericaGold = 40, China = 115, ChinaGold = 45, Russia = 91, RussiaGold = 40, Total = 348 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2004", America = 134, AmericaGold = 35, China = 121, ChinaGold = 55, Russia = 86, RussiaGold = 25, Total = 341 }); + // ... 3 more items + } +} +``` + + +## Blazor Data Legend Styling & Events + +Several properties are exposed including grouping portions of the legend. + +- `GroupRowMargin` +- `GroupTextMargin` +- [`GroupTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_GroupTextColor) +- `GroupTextFontSize` +- `GroupTextFontFamily` +- `GroupTextFontStyle` +- `GroupTextFontStretch` +- `GroupTextFontWeight` +- `HeaderTextMargin` +- [`HeaderTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderTextColor) +- `HeaderTextFontSize` +- `HeaderTextFontFamily` +- `HeaderTextFontStyle` +- `HeaderTextFontStretch` +- `HeaderTextFontWeight` + +The [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for: + +- `StyleGroupRow`: This event fires for each group to style text displayed in group rows. +- `StyleHeaderRow`: This event fires when rendering the header row. +- `StyleSeriesRow`: This event fires once for each series row, which allows conditional styling of the values of the series. +- `StyleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart. +- `StyleSummaryRow`: This event fires once when rendering the summary row. +- `StyleSummaryColumn`: This event fires once when rendering the summary column. + +Some of the events exposes a [`IgbDataLegendStylingRowEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegendStylingRowEventArgs.html) parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series. + +`StyleSummaryColumn` and `SeriesStyleColumn` events expose a [`IgbDataLegendStylingColumnEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegendStylingColumnEventArgs.html) parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properties about the columns. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + private IgbDataToolTipLayer dataToolTipLayer; + + private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null; + public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals + { + get + { + if (_olympicMedalsTopCountriesWithTotals == null) + { + _olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return _olympicMedalsTopCountriesWithTotals; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OlympicMedalsTopCountriesWithTotalsItem +{ + public string Year { get; set; } + public double America { get; set; } + public double AmericaGold { get; set; } + public double China { get; set; } + public double ChinaGold { get; set; } + public double Russia { get; set; } + public double RussiaGold { get; set; } + public double Total { get; set; } +} + +public class OlympicMedalsTopCountriesWithTotals + : List +{ + public OlympicMedalsTopCountriesWithTotals() + { + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"1996", America = 148, AmericaGold = 50, China = 110, ChinaGold = 40, Russia = 95, RussiaGold = 20, Total = 353 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2000", America = 142, AmericaGold = 40, China = 115, ChinaGold = 45, Russia = 91, RussiaGold = 40, Total = 348 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2004", America = 134, AmericaGold = 35, China = 121, ChinaGold = 55, Russia = 86, RussiaGold = 25, Total = 341 }); + // ... 3 more items + } +} +``` + + +## API References + +- [`ExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedColumns) +- [`ExcludedSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ExcludedSeries) +- [`HeaderFormatDate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderFormatDate) +- [`HeaderFormatTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderFormatTime) +- [`HeaderText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_HeaderText) +- [`IncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedColumns) +- [`IncludedSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_IncludedSeries) +- [`LabelDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_LabelDisplayMode) +- [`LabelTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegendStylingColumnEventArgs.html#IgniteUI_Blazor_Controls_IgbDataLegendStylingColumnEventArgs_LabelTextColor) +- `StyleHeaderRow`: +- `StyleSeriesColumn`: +- `StyleSeriesRow` +- `StyleSeriesRow`: +- `StyleSummaryColumn`: +- `StyleSummaryRow`: +- [`SummaryTitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_SummaryTitleText) +- [`SummaryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_SummaryType) +- [`TitleTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_TitleTextColor) +- `UnitText` +- [`UnitsTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegendStylingColumnEventArgs.html#IgniteUI_Blazor_Controls_IgbDataLegendStylingColumnEventArgs_UnitsTextColor) +- [`ValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatAbbreviation) +- [`ValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatCulture) +- [`ValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMaxFractions) +- [`ValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMaxFractions) +- [`ValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMinFractions) +- [`ValueFormatMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html#IgniteUI_Blazor_Controls_IgbDataLegend_ValueFormatMode) +- [`ValueTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegendStylingColumnEventArgs.html#IgniteUI_Blazor_Controls_IgbDataLegendStylingColumnEventArgs_ValueTextColor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-selection.md new file mode 100644 index 000000000..3259c0cc3 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-selection.md @@ -0,0 +1,564 @@ +--- +title: Blazor Chart Data Selection | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Blazor chart with the data selection! +_keywords: Blazor charts, chart data, selection, data selection, Ignite UI for Blazor, Infragistics +_license: commercial +_language: en +mentionedTypes: ["XamDataChart", "Legend", "CategoryChart", "FinancialChart", "XamDataLegend", "DataToolTipLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Selection +_premium: true +--- + +# Blazor Chart Selection + +The Ignite UI for Blazor selection feature in Blazor {ComponentTitle} allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart. This provides many different possibilities with how users interact with the data presented in more meaningful ways. + +## Configuring Selection + +The default behavior [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectionMode) turned off and requires opting into one of the following options. There are several selection modes available in the `{ComponentName}`: + +- **Auto** +- **None** +- **Brighten** +- **FadeOthers** +- **GrayscaleOthers** +- **FocusColorThickOutline** +- **FocusColorOutline** +- **SelectionColorThickOutline** +- **SelectionColorOutline** +- **FocusColorFill** +- **SelectionColorFill** +- **ThickOutline** + +`Brighten` will fade the selected item while `FadeOthers` will cause the opposite effect occur. +`GrayscaleOthers` will behave similarly to `FadeOthers` but instead show a gray color to the rest of the series. Note this will override any [`SelectionBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectionBrush) setting. +`SelectionColorOutline` and `SelectionColorThickOutline` will draw a border around the series. + +In conjunction, a [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectionBehavior) is available to provide greater control on which items get selected. The default behavior for Auto is `PerSeriesAndDataItemMultiSelect`. + +- **Auto** +- **PerDataItemMultiSelect** +- **PerDataItemSingleSelect** +- **PerSeriesAndDataItemMultiSelect** +- **PerSeriesAndDataItemSingleSelect** +- **PerSeriesAndDataItemGlobalSingleSelect** +- **PerSeriesMultiSelect** +- **PerSeriesSingleSelect** + +## Configuring Selection via Color Fill + +The following example shows the combination of both `SelectionColorFill` and `Auto` selection behavior aka `PerSeriesAndDataItemMultiSelect`. Color Fills provide a useful visual cue as it changes the entire series item's back color. By clicking each item you'll see the item change from green to purple. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Average Temperature Range in New York +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbCategoryChart chart; + + private TemperatureAverageData _temperatureAverageData = null; + public TemperatureAverageData TemperatureAverageData + { + get + { + if (_temperatureAverageData == null) + { + _temperatureAverageData = new TemperatureAverageData(); + } + return _temperatureAverageData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureAverageDataItem +{ + public string Month { get; set; } + public double Temperature { get; set; } +} + +public class TemperatureAverageData + : List +{ + public TemperatureAverageData() + { + this.Add(new TemperatureAverageDataItem() { Month = @"Jan", Temperature = 3 }); + this.Add(new TemperatureAverageDataItem() { Month = @"Feb", Temperature = 4 }); + this.Add(new TemperatureAverageDataItem() { Month = @"Mar", Temperature = 9 }); + // ... 9 more items + } +} +``` + + +## Configuring Multiple Selection + +Other selection modes offer various methods of selection. For example using [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectionBehavior) with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. +`PerSeriesAndDataItemGlobalSingleSelect` allows single series selection across all categories at a time. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditor = this.propertyEditor; + var selectionModeEditor = this.selectionModeEditor; + var selectionBehaviorEditor = this.selectionBehaviorEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription selectionModeEditor; + private IgbPropertyEditorPropertyDescription selectionBehaviorEditor; + private IgbCategoryChart chart; + + private EnergyRenewableConsumption _energyRenewableConsumption = null; + public EnergyRenewableConsumption EnergyRenewableConsumption + { + get + { + if (_energyRenewableConsumption == null) + { + _energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return _energyRenewableConsumption; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class EnergyRenewableConsumptionItem +{ + public string Location { get; set; } + public double Year { get; set; } + public double Hydro { get; set; } + public double Solar { get; set; } + public double Wind { get; set; } + public double Other { get; set; } +} + +public class EnergyRenewableConsumption + : List +{ + public EnergyRenewableConsumption() + { + this.Add(new EnergyRenewableConsumptionItem() { Location = @"China", Year = 2019, Hydro = 1269.5, Solar = 223, Wind = 405.2, Other = 102.8 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"Europe", Year = 2019, Hydro = 632.54, Solar = 154, Wind = 461.3, Other = 220.3 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"USA", Year = 2019, Hydro = 271.16, Solar = 108, Wind = 303.4, Other = 78.34 }); + // ... 2 more items + } +} +``` + + +## Configuring Outline Selection + +When [`FocusBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_FocusBrush) is applied, selected series will appear with a border when the [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectionMode) property is set to one of the focus options. + +## Radial Series Selection + +This example demonstrates another series type via the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) where each radial series can be selected with different colors. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Ronaldo vs Messi Player Stats +
+
+ + + +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var radialColumnSeries1 = this.radialColumnSeries1; + var radialColumnSeries2 = this.radialColumnSeries2; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbRadialColumnSeries radialColumnSeries1; + private IgbRadialColumnSeries radialColumnSeries2; + + private FootballPlayerStats _footballPlayerStats = null; + public FootballPlayerStats FootballPlayerStats + { + get + { + if (_footballPlayerStats == null) + { + _footballPlayerStats = new FootballPlayerStats(); + } + return _footballPlayerStats; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class FootballPlayerStatsItem +{ + public string Attribute { get; set; } + public double Ronaldo { get; set; } + public double Messi { get; set; } +} + +public class FootballPlayerStats + : List +{ + public FootballPlayerStats() + { + this.Add(new FootballPlayerStatsItem() { Attribute = @"Dribbling", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Passing", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Finishing", Ronaldo = 10, Messi = 10 }); + // ... 5 more items + } +} +``` + + +## Programmatic Selection + +Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html). The `Matcher` property of the [`IgbChartSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChartSelection.html) object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. + +The matcher is ideal for using in charts, such as the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) when you do not have access to the actual series, like the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the [`SelectedSeriesItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectedSeriesItems) collection using a matcher with the following properties set + +For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set. + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Collections.Generic +@using System.Collections + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + if (firstRender) { + this.SelectionMatcherOnViewInit(); + } + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private System.Threading.Timer _timer; + + public void SelectionMatcherOnViewInit() + { + _timer = new System.Threading.Timer((_) => + { + addSelection(); + }, null, 1000, 0); + _timer = null; + } + + private void addSelection() + { + var chart = this.chart; + //var data = (IList)chart.DataSource; + var data = this.EnergyRenewableConsumption; + IgbChartSelection selection = new IgbChartSelection(); + selection.Item = data[1]; + IgbSeriesMatcher matcher = new IgbSeriesMatcher(); + matcher.MemberPath = "Hydro"; + matcher.MemberPathType = "ValueMemberPath"; + selection.Matcher = matcher; + + chart.SelectedSeriesItems.Add(selection); + + IgbChartSelection selection2 = new IgbChartSelection(); + selection2 = new IgbChartSelection(); + selection2.Item = data[2]; + IgbSeriesMatcher matcher2 = new IgbSeriesMatcher(); + matcher2 = new IgbSeriesMatcher(); + matcher2.MemberPath = "Wind"; + matcher2.MemberPathType = "ValueMemberPath"; + selection2.Matcher = matcher2; + + chart.SelectedSeriesItems.Add(selection2); + } + + private EnergyRenewableConsumption _energyRenewableConsumption = null; + public EnergyRenewableConsumption EnergyRenewableConsumption + { + get + { + if (_energyRenewableConsumption == null) + { + _energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return _energyRenewableConsumption; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class EnergyRenewableConsumptionItem +{ + public string Location { get; set; } + public double Year { get; set; } + public double Hydro { get; set; } + public double Solar { get; set; } + public double Wind { get; set; } + public double Other { get; set; } +} + +public class EnergyRenewableConsumption + : List +{ + public EnergyRenewableConsumption() + { + this.Add(new EnergyRenewableConsumptionItem() { Location = @"China", Year = 2019, Hydro = 1269.5, Solar = 223, Wind = 405.2, Other = 102.8 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"Europe", Year = 2019, Hydro = 632.54, Solar = 154, Wind = 461.3, Other = 220.3 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"USA", Year = 2019, Hydro = 271.16, Solar = 108, Wind = 303.4, Other = 78.34 }); + // ... 2 more items + } +} +``` + + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) Properties | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) Properties | +| ----------------------------------------------|---------------------------| +| | | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-tooltip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-tooltip.md new file mode 100644 index 000000000..c8e5358f0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-data-tooltip.md @@ -0,0 +1,1102 @@ +--- +title: Blazor Chart Data Tooltip | Data Visualization Tools | Infragistics +_description: Use Infragistics Ignite UI for Blazor chart with the data tooltip layer! +_keywords: Blazor charts, chart legend, legend, legend types, Ignite UI for Blazor, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "Legend", "CategoryChart", "FinancialChart", "XamDataLegend", "DataToolTipLayer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Data Tooltip +_premium: true +--- + +# Blazor Chart Data Tooltip + +In Ignite UI for Blazor, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the [`IgbDataLegend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataLegend.html) for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) components. + +## Blazor Data Tooltip Properties + +All properties of [`IgbDataToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html) are prefixed with **DataToolTip** and exposed on API of [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) components. However, you will need to create an instance of [`IgbDataToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html) and add it to series collection of [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component if you want to use it with Radial Charts, Polar Charts, Scatter Charts. + +## Blazor Data Tooltip Elements + +The **DataToolTip** displays content using a set of three types of rows and four types of columns. + +### Blazor Data Tooltip Rows + +The rows of the **DataToolTip** include the header row, series row(s), and the summary row. + +The header row displays the axis label of the point that is hovered, and can be changed using the [`DataToolTipHeaderText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipHeaderText) property. + +The series row can actually be a set of rows corresponding to each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol and unit, if specified. + +Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the [`DataToolTipSummaryTitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipSummaryTitleText) property of the legend. Also, you can use the [`DataToolTipSummaryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipSummaryType) property to customize whether you display the Total, Min, Max, or Average of series values in the summary row. + +The following example demonstrates the data tooltip with a summary applied: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +### Blazor Data Tooltip Columns + +The columns of the [`IgbDataToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html) include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the [`DataToolTipIncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipIncludedColumns) or [`DataToolTipExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipExcludedColumns) collections of the chart. + +The title column displays legend badges and series titles, which come from the [`ChartTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ChartTitle) property of the different [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) plotted in the chart. + +The label column displays the name or abbreviation of the different property paths in the [`DataToolTipIncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipIncludedColumns) or [`DataToolTipExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipExcludedColumns) collections of the tooltip. + +The value column displays series values as abbreviated text which can be formatted using the [`DataToolTipValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatAbbreviation) property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the [`DataToolTipValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMinFractions) and [`DataToolTipValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMaxFractions) for minimum and maximum digits, respectively. + +The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the [`DataToolTipUnitsText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipUnitsText) for all columns or using the following properties on each series in the chart: + +- Category Series (e.g. ColumnSeries) + - ValueMemberAsLegendUnit="K" +- Financial Price Series: + - OpenMemberAsLegendUnit="K" + - LowMemberAsLegendUnit="K" + - HighMemberAsLegendUnit="K" + - CloseMemberAsLegendUnit="K" +- Range Series: + - LowMemberAsLegendUnit="K" + - HighMemberAsLegendUnit="K" +- Radial Series: + - ValueMemberAsLegendUnit="km" +- Polar Series: + - RadiusMemberAsLegendUnit="km" + - AngleMemberAsLegendUnit="degrees" + +For the above-listed properties, there are corresponding properties ending with **MemberAsLegendLabel** to determine the text in the label columns mentioned previously. + +The columns included in the [`DataToolTipIncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipIncludedColumns) and [`DataToolTipExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipExcludedColumns) collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip. + +The following example demonstrates a data tooltip with the added columns of Open, High, Low, Close, and Change: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbFinancialChart chart; + + private MultipleStocks _multipleStocks = null; + public MultipleStocks MultipleStocks + { + get + { + if (_multipleStocks == null) + { + MultipleStocks.Fetch().ContinueWith((t) => {_multipleStocks = t.Result; StateHasChanged(); }); + } + return _multipleStocks; + } + } + +} +``` +```csharp +//begin async data + using System; + using System.Collections.Generic; + using System.Text.Json; + using System.Threading; + using System.Threading.Tasks; + using System.Net.Http; + using System.Collections.ObjectModel; + using IgniteUI.Blazor.Controls; + + public class MultipleStocks : List + { + public async static Task Fetch() + { + var google = await MultipleStocks.GetGoogleStock(); + var amazon = await MultipleStocks.GetAmazonStock(); + + var val = new MultipleStocks(); + val.Add(google); + val.Add(amazon); + return val; + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public async static Task GetAmazonStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Amazon"; + return stockData; + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public async static Task GetTeslaStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Tesla"; + return stockData; + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public async static Task GetMicrosoftStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Microsoft"; + return stockData; + } + + /** gets Google stock OHLC prices from a .JSON file */ + public async static Task GetGoogleStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Google"; + return stockData; + } + + private async static Task[]> Fetch(string url) + { + HttpClient client = new HttpClient(); + var str = await client.GetStringAsync(url); + var arr = JsonSerializer.Deserialize[]>(str); + return arr; + } + + public static TitledStockData ConvertData(Dictionary[] arr) + { + var ret = new TitledStockData(); + + foreach (var json in arr) + { + var date = ((JsonElement)json["date"]).GetString(); + var parts = date.Split('-'); // "2020-01-01" + var item = new MultipleStocksItem(); + item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]),12,0,0); + item.Open = ((JsonElement)json["open"]).GetDouble(); + item.High = ((JsonElement)json["high"]).GetDouble(); + item.Low = ((JsonElement)json["low"]).GetDouble(); + item.Close = ((JsonElement)json["close"]).GetDouble(); + item.Volume = ((JsonElement)json["volume"]).GetDouble(); + ret.Add(item); + } + + return ret; + } + } + + public class MultipleStocksItem + { + [DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)] + public string Title { get; set; } + public DateTime Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + } + + public class TitledStockData + : ObservableCollection + { + + } + //end async data +``` + + +## Blazor Data Tooltip Grouping for Data Chart + +[`DataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: +By default, DataLegend will hide names of groups, but you can display group names by setting the [`GroupRowVisible`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html#IgniteUI_Blazor_Controls_IgbDataToolTipLayer_GroupRowVisible) property to true. [`GroupingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html#IgniteUI_Blazor_Controls_IgbDataToolTipLayer_GroupingMode) should be set to "Grouped" and [`LabelDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html#IgniteUI_Blazor_Controls_IgbDataToolTipLayer_LabelDisplayMode) should be set to "Visible" on the Data Tooltip Layer. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + var columnSeries2 = this.columnSeries2; + var columnSeries3 = this.columnSeries3; + var dataToolTipLayer = this.dataToolTipLayer; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + private IgbColumnSeries columnSeries2; + private IgbColumnSeries columnSeries3; + private IgbDataToolTipLayer dataToolTipLayer; + + private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null; + public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals + { + get + { + if (_olympicMedalsTopCountriesWithTotals == null) + { + _olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return _olympicMedalsTopCountriesWithTotals; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OlympicMedalsTopCountriesWithTotalsItem +{ + public string Year { get; set; } + public double America { get; set; } + public double AmericaGold { get; set; } + public double China { get; set; } + public double ChinaGold { get; set; } + public double Russia { get; set; } + public double RussiaGold { get; set; } + public double Total { get; set; } +} + +public class OlympicMedalsTopCountriesWithTotals + : List +{ + public OlympicMedalsTopCountriesWithTotals() + { + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"1996", America = 148, AmericaGold = 50, China = 110, ChinaGold = 40, Russia = 95, RussiaGold = 20, Total = 353 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2000", America = 142, AmericaGold = 40, China = 115, ChinaGold = 45, Russia = 91, RussiaGold = 40, Total = 348 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2004", America = 134, AmericaGold = 35, China = 121, ChinaGold = 55, Russia = 86, RussiaGold = 25, Total = 341 }); + // ... 3 more items + } +} +``` + + +## Blazor Data Tooltip Grouping & Positioning for Category Chart & Financial Chart + +You can set [`DataToolTipGroupingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipGroupingMode) property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the [`DataToolTipGroupedPositionModeX`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipGroupedPositionModeX) and [`DataToolTipGroupedPositionModeY`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipGroupedPositionModeY) properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area. + +The following example demonstrates a data tooltip positioned to the top-right of the chart: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var groupedPositionXEditor = this.groupedPositionXEditor; + var groupedPositionYEditor = this.groupedPositionYEditor; + var groupingModeEditor = this.groupingModeEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription groupedPositionXEditor; + private IgbPropertyEditorPropertyDescription groupedPositionYEditor; + private IgbPropertyEditorPropertyDescription groupingModeEditor; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +## Blazor Data Tooltip Value Formatting + +The **DataToolTip** provides automatic abbreviation of large numbers using its [`DataToolTipValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`DataToolTipValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMinFractions) and [`DataToolTipValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. + +The following example demonstrates a **DataToolTip** with the minimum and maximum fractions set: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +## Blazor Data Tooltip Value Mode + +You can change the default decimal display of values within the **DataToolTip** to be currency by changing the [`DataToolTipValueFormatMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMode) property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its [`DataToolTipValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatCulture) property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the [`DataToolTipValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatCulture) set to "en-GB": + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbFinancialChart chart; + + private MultipleStocks _multipleStocks = null; + public MultipleStocks MultipleStocks + { + get + { + if (_multipleStocks == null) + { + MultipleStocks.Fetch().ContinueWith((t) => {_multipleStocks = t.Result; StateHasChanged(); }); + } + return _multipleStocks; + } + } + +} +``` +```csharp +//begin async data + using System; + using System.Collections.Generic; + using System.Text.Json; + using System.Threading; + using System.Threading.Tasks; + using System.Net.Http; + using System.Collections.ObjectModel; + using IgniteUI.Blazor.Controls; + + public class MultipleStocks : List + { + public async static Task Fetch() + { + var google = await MultipleStocks.GetGoogleStock(); + var amazon = await MultipleStocks.GetAmazonStock(); + + var val = new MultipleStocks(); + val.Add(google); + val.Add(amazon); + return val; + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public async static Task GetAmazonStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Amazon"; + return stockData; + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public async static Task GetTeslaStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Tesla"; + return stockData; + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public async static Task GetMicrosoftStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Microsoft"; + return stockData; + } + + /** gets Google stock OHLC prices from a .JSON file */ + public async static Task GetGoogleStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Google"; + return stockData; + } + + private async static Task[]> Fetch(string url) + { + HttpClient client = new HttpClient(); + var str = await client.GetStringAsync(url); + var arr = JsonSerializer.Deserialize[]>(str); + return arr; + } + + public static TitledStockData ConvertData(Dictionary[] arr) + { + var ret = new TitledStockData(); + + foreach (var json in arr) + { + var date = ((JsonElement)json["date"]).GetString(); + var parts = date.Split('-'); // "2020-01-01" + var item = new MultipleStocksItem(); + item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]),12,0,0); + item.Open = ((JsonElement)json["open"]).GetDouble(); + item.High = ((JsonElement)json["high"]).GetDouble(); + item.Low = ((JsonElement)json["low"]).GetDouble(); + item.Close = ((JsonElement)json["close"]).GetDouble(); + item.Volume = ((JsonElement)json["volume"]).GetDouble(); + ret.Add(item); + } + + return ret; + } + } + + public class MultipleStocksItem + { + [DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)] + public string Title { get; set; } + public DateTime Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + } + + public class TitledStockData + : ObservableCollection + { + + } + //end async data +``` + + +## Layout Mode + +Legend items can be positioned in a vertical or table structure via the [`LayoutMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html#IgniteUI_Blazor_Controls_IgbDataToolTipLayer_LayoutMode) property. The default value is `Table`, which retains the same look and feel as seen in previous releases. + +eg. + +Layout Mode + +## Blazor Data Tooltip Styling + +The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the [`DataToolTipTitleTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipTitleTextColor), [`DataToolTipLabelTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipLabelTextColor), [`DataToolTipValueTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueTextColor), and [`DataToolTipUnitsTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipUnitsTextColor) properties. + +The following example demonstrates usage of the styling properties mentioned above: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbFinancialChart chart; + + private StockGoogle _stockGoogle = null; + public StockGoogle StockGoogle + { + get + { + if (_stockGoogle == null) + { + _stockGoogle = new StockGoogle(); + } + return _stockGoogle; + } + } + +} +``` +```csharp +//begin data +using System; +using System.Collections.Generic; +public class StockGoogle : List { + + public StockGoogle(){ + + this.Add(new StockItem(){Date=new DateTime(2014,03,01,13,0,0), Open= 559.6, High= 568.2, Low= 558.4, Close= 566.9, Volume= 2182626 }); + this.Add(new StockItem(){Date=new DateTime(2014,03,02,13,0,0), Open= 562.4, High= 571.8, Low= 561.4, Close= 567.0, Volume= 2088804 }); + this.Add(new StockItem(){Date=new DateTime(2014,03,03,13,0,0), Open= 569.9, High= 587.3, Low= 564.1, Close= 569.7, Volume= 5087530 }); + // ... 81 more items + // this.Add(new StockItem(){Date=new DateTime(2014,06,31,13,0,0), Open= 580.6, High= 583.6, Low= 570.0, Close= 571.6, Volume= 2099516 }); + this.Add(new StockItem(){Date=new DateTime(2014,07,01,13,0,0), Open= 570.4, High= 576.0, Low= 562.9, Close= 566.1, Volume= 1950171 }); + this.Add(new StockItem(){Date=new DateTime(2014,07,04,13,0,0), Open= 569.0, High= 575.4, Low= 564.1, Close= 573.1, Volume= 1427169 }); + this.Add(new StockItem(){Date=new DateTime(2014,07,05,13,0,0), Open= 570.0, High= 572.0, Low= 562.6, Close= 565.1, Volume= 1556685 }); + // ... 61 more items + //this.Add(new StockItem(){Date=new DateTime(2014,09,31,13,0,0), Open= 559.4, High= 559.6, Low= 554.8, Close= 559.1, Volume= 2032887 }); + this.Add(new StockItem(){Date=new DateTime(2014,10,03,13,0,0), Open= 555.5, High= 557.9, Low= 553.2, Close= 555.2, Volume= 1378511 }); + this.Add(new StockItem(){Date=new DateTime(2014,10,04,13,0,0), Open= 553.0, High= 555.5, Low= 549.3, Close= 554.1, Volume= 1240761 }); + this.Add(new StockItem(){Date=new DateTime(2014,10,05,13,0,0), Open= 556.8, High= 556.8, Low= 544.0, Close= 545.9, Volume= 2026740 }); + // ... 37 more items + //this.Add(new StockItem(){Date=new DateTime(2014,11,31,13,0,0), Open= 531.3, High= 532.6, Low= 525.8, Close= 526.4, Volume= 1371819 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,02,13,0,0), Open= 529.0, High= 531.3, Low= 524.1, Close= 524.8, Volume= 1446662 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,05,13,0,0), Open= 523.3, High= 524.3, Low= 513.1, Close= 513.9, Volume= 2054238 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,06,13,0,0), Open= 515.0, High= 516.2, Low= 501.1, Close= 502.0, Volume= 2891950 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,07,13,0,0), Open= 507.0, High= 507.2, Low= 499.6, Close= 501.1, Volume= 2059366 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,08,13,0,0), Open= 498.0, High= 503.5, Low= 491.0, Close= 502.7, Volume= 3344395 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,09,13,0,0), Open= 504.8, High= 504.9, Low= 494.8, Close= 496.2, Volume= 2065715 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,12,13,0,0), Open= 494.9, High= 496.0, Low= 487.6, Close= 492.6, Volume= 2320446 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,13,13,0,0), Open= 498.8, High= 503.0, Low= 492.4, Close= 496.2, Volume= 2365687 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,14,13,0,0), Open= 494.6, High= 503.2, Low= 493.0, Close= 500.9, Volume= 2229638 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,15,13,0,0), Open= 505.6, High= 505.7, Low= 497.8, Close= 501.8, Volume= 2711355 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,16,13,0,0), Open= 500.0, High= 508.2, Low= 500.0, Close= 508.1, Volume= 2292043 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,20,13,0,0), Open= 511.0, High= 512.5, Low= 506.0, Close= 506.9, Volume= 2225922 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,21,13,0,0), Open= 507.3, High= 519.3, Low= 506.2, Close= 518.0, Volume= 2262455 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,22,13,0,0), Open= 521.5, High= 536.3, Low= 519.7, Close= 534.4, Volume= 2669558 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,23,13,0,0), Open= 535.6, High= 542.2, Low= 533.0, Close= 540.0, Volume= 2275485 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,26,13,0,0), Open= 538.5, High= 539.0, Low= 529.7, Close= 535.2, Volume= 1539524 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,27,13,0,0), Open= 530.0, High= 530.7, Low= 518.2, Close= 518.6, Volume= 1898844 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,28,13,0,0), Open= 522.8, High= 523.0, Low= 510.0, Close= 510.0, Volume= 1679230 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,29,13,0,0), Open= 511.0, High= 511.1, Low= 501.2, Close= 510.7, Volume= 4174924 }); + //this.Add(new StockItem(){Date=new DateTime(2015,00,30,13,0,0), Open= 515.9, High= 539.9, Low= 515.5, Close= 534.5, Volume= 5590977 }); + this.Add(new StockItem(){Date=new DateTime(2015,01,02,13,0,0), Open= 531.7, High= 533.0, Low= 518.5, Close= 528.5, Volume= 2841976 }); + this.Add(new StockItem(){Date=new DateTime(2015,01,03,13,0,0), Open= 528.0, High= 533.4, Low= 523.3, Close= 529.2, Volume= 2033085 }); + this.Add(new StockItem(){Date=new DateTime(2015,01,04,13,0,0), Open= 529.2, High= 532.7, Low= 521.3, Close= 522.8, Volume= 1659125 }); + // ... 36 more items + //this.Add(new StockItem(){Date=new DateTime(2015,02,30,13,0,0), Open= 551.6, High= 553.5, Low= 548.2, Close= 552.0, Volume= 1283958 }); + //this.Add(new StockItem(){Date=new DateTime(2015,02,31,13,0,0), Open= 550.0, High= 554.7, Low= 546.7, Close= 548.0, Volume= 1583677 }); + this.Add(new StockItem(){Date=new DateTime(2015,03,01,13,0,0), Open= 548.6, High= 551.1, Low= 539.5, Close= 542.6, Volume= 1957718 }); + this.Add(new StockItem(){Date=new DateTime(2015,03,02,13,0,0), Open= 540.9, High= 540.9, Low= 533.9, Close= 535.5, Volume= 1711737 }); + this.Add(new StockItem(){Date=new DateTime(2015,03,06,13,0,0), Open= 532.2, High= 538.4, Low= 529.6, Close= 536.8, Volume= 1320767 }); + // ... 81 more items + //this.Add(new StockItem(){Date=new DateTime(2015,06,31,13,0,0), Open= 631.4, High= 632.9, Low= 625.5, Close= 625.6, Volume= 1706149 }); + this.Add(new StockItem(){Date=new DateTime(2015,07,03,13,0,0), Open= 625.3, High= 633.1, Low= 625.3, Close= 631.2, Volume= 1304511 }); + this.Add(new StockItem(){Date=new DateTime(2015,07,04,13,0,0), Open= 628.4, High= 634.8, Low= 627.2, Close= 629.3, Volume= 1490881 }); + this.Add(new StockItem(){Date=new DateTime(2015,07,05,13,0,0), Open= 634.3, High= 647.9, Low= 633.2, Close= 643.8, Volume= 2334266 }); + // ... 102 more items + //this.Add(new StockItem(){Date=new DateTime(2015,11,31,13,0,0), Open= 769.5, High= 769.5, Low= 758.3, Close= 758.9, Volume= 1500923 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,04,13,0,0), Open= 743.0, High= 744.1, Low= 731.3, Close= 741.8, Volume= 3258199 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,05,13,0,0), Open= 746.5, High= 752.0, Low= 738.6, Close= 742.6, Volume= 1950691 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,06,13,0,0), Open= 730.0, High= 747.2, Low= 728.9, Close= 743.6, Volume= 1947034 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,07,13,0,0), Open= 730.3, High= 738.5, Low= 719.1, Close= 726.4, Volume= 2963741 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,08,13,0,0), Open= 731.5, High= 733.2, Low= 713.0, Close= 714.5, Volume= 2450857 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,11,13,0,0), Open= 716.6, High= 718.9, Low= 703.5, Close= 716.0, Volume= 2090621 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,12,13,0,0), Open= 721.7, High= 728.8, Low= 717.3, Close= 726.1, Volume= 2024509 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,13,13,0,0), Open= 730.9, High= 734.7, Low= 698.6, Close= 700.6, Volume= 2468295 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,14,13,0,0), Open= 705.4, High= 721.9, Low= 689.1, Close= 714.7, Volume= 2211853 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,15,13,0,0), Open= 692.3, High= 706.7, Low= 685.4, Close= 694.5, Volume= 3592449 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,19,13,0,0), Open= 703.3, High= 710.0, Low= 693.4, Close= 701.8, Volume= 2258479 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,20,13,0,0), Open= 688.6, High= 706.9, Low= 673.3, Close= 698.5, Volume= 3439386 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,21,13,0,0), Open= 702.2, High= 719.2, Low= 694.5, Close= 706.6, Volume= 2410263 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,22,13,0,0), Open= 723.6, High= 728.1, Low= 720.1, Close= 725.3, Volume= 2006528 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,25,13,0,0), Open= 723.6, High= 729.7, Low= 710.0, Close= 711.7, Volume= 1704641 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,26,13,0,0), Open= 713.9, High= 718.3, Low= 706.5, Close= 713.0, Volume= 1324300 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,27,13,0,0), Open= 713.7, High= 718.2, Low= 694.4, Close= 700.0, Volume= 2139970 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,28,13,0,0), Open= 722.2, High= 733.7, Low= 712.4, Close= 731.0, Volume= 2658016 }); + //this.Add(new StockItem(){Date=new DateTime(2016,00,29,13,0,0), Open= 731.5, High= 745.0, Low= 726.8, Close= 743.0, Volume= 3394935 }); + this.Add(new StockItem(){Date=new DateTime(2016,01,01,13,0,0), Open= 750.5, High= 757.9, Low= 743.3, Close= 752.0, Volume= 4801816 }); + this.Add(new StockItem(){Date=new DateTime(2016,01,02,13,0,0), Open= 784.5, High= 789.9, Low= 764.6, Close= 764.6, Volume= 6332431 }); + this.Add(new StockItem(){Date=new DateTime(2016,01,03,13,0,0), Open= 770.2, High= 774.5, Low= 720.5, Close= 727.0, Volume= 6162333 }); + // ... 36 more items + //this.Add(new StockItem(){Date=new DateTime(2016,02,29,13,0,0), Open= 734.6, High= 747.3, Low= 728.8, Close= 744.8, Volume= 1902128 }); + //this.Add(new StockItem(){Date=new DateTime(2016,02,30,13,0,0), Open= 750.1, High= 757.9, Low= 748.7, Close= 750.5, Volume= 1780998 }); + // this.Add(new StockItem(){Date=new DateTime(2016,02,31,13,0,0), Open= 749.3, High= 750.9, Low= 740.9, Close= 745.0, Volume= 1712375 }); + this.Add(new StockItem(){Date=new DateTime(2016,03,01,13,0,0), Open= 738.6, High= 750.3, Low= 737.0, Close= 749.9, Volume= 1574870 }); + this.Add(new StockItem(){Date=new DateTime(2016,03,04,13,0,0), Open= 750.1, High= 752.8, Low= 742.4, Close= 745.3, Volume= 1131843 }); + this.Add(new StockItem(){Date=new DateTime(2016,03,05,13,0,0), Open= 738.0, High= 742.8, Low= 735.4, Close= 737.8, Volume= 1129829 }); + // ... 38 more items + //this.Add(new StockItem(){Date=new DateTime(2016,04,31,13,0,0), Open= 731.7, High= 739.7, Low= 731.3, Close= 735.7, Volume= 2129545 }); + this.Add(new StockItem(){Date=new DateTime(2016,05,01,13,0,0), Open= 734.5, High= 737.2, Low= 730.7, Close= 734.1, Volume= 1253593 }); + this.Add(new StockItem(){Date=new DateTime(2016,05,02,13,0,0), Open= 732.5, High= 733.0, Low= 724.2, Close= 730.4, Volume= 1341807 }); + this.Add(new StockItem(){Date=new DateTime(2016,05,03,13,0,0), Open= 729.3, High= 729.5, Low= 720.6, Close= 722.3, Volume= 1226253 }); + // ... 103 more items + // this.Add(new StockItem(){Date=new DateTime(2016,09,31,13,0,0), Open= 795.5, High= 796.9, Low= 784.0, Close= 784.5, Volume= 2427284 }); + this.Add(new StockItem(){Date=new DateTime(2016,10,01,13,0,0), Open= 782.9, High= 789.5, Low= 775.5, Close= 783.6, Volume= 2406356 }); + this.Add(new StockItem(){Date=new DateTime(2016,10,02,13,0,0), Open= 778.2, High= 781.6, Low= 763.5, Close= 768.7, Volume= 1918414 }); + this.Add(new StockItem(){Date=new DateTime(2016,10,03,13,0,0), Open= 767.3, High= 770.0, Low= 759.0, Close= 762.1, Volume= 1943175 }); + // ... 39 more items + //this.Add(new StockItem(){Date=new DateTime(2017,00,03,13,0,0), Open= 778.8, High= 789.6, Low= 775.8, Close= 786.1, Volume= 1657268 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,04,13,0,0), Open= 788.4, High= 791.3, Low= 783.2, Close= 786.9, Volume= 1072958 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,05,13,0,0), Open= 786.1, High= 794.5, Low= 785.0, Close= 794.0, Volume= 1335167 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,06,13,0,0), Open= 795.3, High= 807.9, Low= 792.2, Close= 806.1, Volume= 1640170 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,09,13,0,0), Open= 806.4, High= 810.0, Low= 802.8, Close= 806.6, Volume= 1274645 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,10,13,0,0), Open= 807.9, High= 809.1, Low= 803.5, Close= 804.8, Volume= 1176780 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,11,13,0,0), Open= 805.0, High= 808.1, Low= 801.4, Close= 807.9, Volume= 1065936 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,12,13,0,0), Open= 807.1, High= 807.4, Low= 799.2, Close= 806.4, Volume= 1353057 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,13,13,0,0), Open= 807.5, High= 811.2, Low= 806.7, Close= 807.9, Volume= 1099215 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,17,13,0,0), Open= 807.1, High= 807.1, Low= 800.4, Close= 804.6, Volume= 1362115 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,18,13,0,0), Open= 805.8, High= 806.2, Low= 801.0, Close= 806.1, Volume= 1294407 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,19,13,0,0), Open= 805.1, High= 809.5, Low= 801.8, Close= 802.2, Volume= 919325 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,20,13,0,0), Open= 806.9, High= 806.9, Low= 801.7, Close= 805.0, Volume= 1670045 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,23,13,0,0), Open= 807.3, High= 820.9, Low= 803.7, Close= 819.3, Volume= 1963628 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,24,13,0,0), Open= 822.3, High= 825.9, Low= 817.8, Close= 823.9, Volume= 1474010 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,25,13,0,0), Open= 829.6, High= 835.8, Low= 825.1, Close= 835.7, Volume= 1627304 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,26,13,0,0), Open= 837.8, High= 838.0, Low= 827.0, Close= 832.1, Volume= 2973891 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,27,13,0,0), Open= 834.7, High= 842.0, Low= 820.4, Close= 823.3, Volume= 2965771 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,30,13,0,0), Open= 814.7, High= 815.8, Low= 799.8, Close= 802.3, Volume= 3246573 }); + //this.Add(new StockItem(){Date=new DateTime(2017,00,31,13,0,0), Open= 796.9, High= 801.3, Low= 790.5, Close= 796.8, Volume= 2160556 }); + this.Add(new StockItem(){Date=new DateTime(2017,01,01,13,0,0), Open= 799.7, High= 801.2, Low= 791.2, Close= 795.7, Volume= 2029744 }); + this.Add(new StockItem(){Date=new DateTime(2017,01,02,13,0,0), Open= 793.8, High= 802.7, Low= 792.0, Close= 798.5, Volume= 1532138 }); + this.Add(new StockItem(){Date=new DateTime(2017,01,03,13,0,0), Open= 803.0, High= 806.0, Low= 800.4, Close= 801.5, Volume= 1463448 }); + // ... 36 more items + //this.Add(new StockItem(){Date=new DateTime(2017,02,29,13,0,0), Open= 825.0, High= 832.8, Low= 822.4, Close= 831.4, Volume= 1786321 }); + //this.Add(new StockItem(){Date=new DateTime(2017,02,30,13,0,0), Open= 833.5, High= 833.7, Low= 829.0, Close= 831.5, Volume= 1055339 }); + //this.Add(new StockItem(){Date=new DateTime(2017,02,31,13,0,0), Open= 829.0, High= 831.6, Low= 827.4, Close= 829.6, Volume= 1401893 }); + this.Add(new StockItem(){Date=new DateTime(2017,03,03,13,0,0), Open= 829.2, High= 840.9, Low= 829.2, Close= 838.5, Volume= 1671503 }); + this.Add(new StockItem(){Date=new DateTime(2017,03,04,13,0,0), Open= 831.4, High= 835.2, Low= 829.0, Close= 834.6, Volume= 1045363 }); + this.Add(new StockItem(){Date=new DateTime(2017,03,05,13,0,0), Open= 835.5, High= 842.5, Low= 830.7, Close= 831.4, Volume= 1555328 }); + // ... 37 more items + //this.Add(new StockItem(){Date=new DateTime(2017,04,31,13,0,0), Open= 975.0, High= 979.3, Low= 960.2, Close= 964.9, Volume= 2448067 }); + this.Add(new StockItem(){Date=new DateTime(2017,05,01,13,0,0), Open= 969.0, High= 971.5, Low= 960.0, Close= 967.0, Volume= 1410458 }); + this.Add(new StockItem(){Date=new DateTime(2017,05,02,13,0,0), Open= 969.5, High= 975.9, Low= 966.0, Close= 975.6, Volume= 1750955 }); + this.Add(new StockItem(){Date=new DateTime(2017,05,05,13,0,0), Open= 976.5, High= 986.9, Low= 975.1, Close= 983.7, Volume= 1252106 }); + // ... 38 more items + //this.Add(new StockItem(){Date=new DateTime(2017,06,31,13,0,0), Open= 941.9, High= 943.6, Low= 926.0, Close= 930.5, Volume= 1970095 }); + this.Add(new StockItem(){Date=new DateTime(2017,07,01,13,0,0), Open= 932.4, High= 937.5, Low= 929.3, Close= 930.8, Volume= 1277734 }); + this.Add(new StockItem(){Date=new DateTime(2017,07,02,13,0,0), Open= 928.6, High= 932.6, Low= 916.7, Close= 930.4, Volume= 1824448 }); + this.Add(new StockItem(){Date=new DateTime(2017,07,03,13,0,0), Open= 930.3, High= 932.2, Low= 922.2, Close= 923.6, Volume= 1202512 }); + // ... 61 more items + //this.Add(new StockItem(){Date=new DateTime(2017,09,31,13,0,0), Open= 1015.2, High= 1024.0, Low= 1010.4, Close= 1016.6, Volume= 1331391 }); + this.Add(new StockItem(){Date=new DateTime(2017,10,01,13,0,0), Open= 1017.2, High= 1029.7, Low= 1017.0, Close= 1025.5, Volume= 1373444 }); + this.Add(new StockItem(){Date=new DateTime(2017,10,02,13,0,0), Open= 1021.8, High= 1028.1, Low= 1013.0, Close= 1025.6, Volume= 1048970 }); + this.Add(new StockItem(){Date=new DateTime(2017,10,03,13,0,0), Open= 1022.1, High= 1032.7, Low= 1020.3, Close= 1032.5, Volume= 1076350 }); + // ... 59 more items + + } +} +public class StockItem { + public double? Open {get;set;} + public double? Close {get;set;} + public double? High {get;set;} + public double? Low {get;set;} + public double? Volume {get;set;} + + public DateTime? Date {get;set;} + + } + //end data +``` + + +Several properties are exposed including grouping portions of the tooltip. + +- `GroupTextMargin` +- [`GroupTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html#IgniteUI_Blazor_Controls_IgbDataToolTipLayer_GroupTextColor) +- `GroupTextFontSize` +- `GroupTextFontFamily` +- `GroupTextFontStyle` +- `GroupTextFontStretch` +- `GroupTextFontWeight` +- `HeaderTextMargin` +- [`HeaderTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html#IgniteUI_Blazor_Controls_IgbDataToolTipLayer_HeaderTextColor) +- `HeaderTextFontSize` +- `HeaderTextFontFamily` +- `HeaderTextFontStyle` +- `HeaderTextFontStretch` +- `HeaderTextFontWeight` + +## API References + +- [`DataToolTipExcludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipExcludedColumns) +- [`DataToolTipGroupedPositionModeX`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipGroupedPositionModeX) +- [`DataToolTipGroupedPositionModeY`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipGroupedPositionModeY) +- [`DataToolTipGroupingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipGroupingMode) +- [`DataToolTipHeaderText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipHeaderText) +- [`DataToolTipIncludedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipIncludedColumns) +- [`DataToolTipLabelTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipLabelTextColor) +- [`IgbDataToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html) +- [`DataToolTipSummaryTitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipSummaryTitleText) +- [`DataToolTipSummaryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipSummaryType) +- [`DataToolTipTitleTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipTitleTextColor) +- [`DataToolTipUnitsTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipUnitsTextColor) +- [`DataToolTipUnitsText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipUnitsText) +- [`DataToolTipValueFormatAbbreviation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatAbbreviation) +- [`DataToolTipValueFormatCulture`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatCulture) +- [`DataToolTipValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMaxFractions) +- [`DataToolTipValueFormatMaxFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMaxFractions) +- [`DataToolTipValueFormatMinFractions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMinFractions) +- [`DataToolTipValueFormatMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueFormatMode) +- [`DataToolTipValueTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataToolTipValueTextColor) +- `MemberAsLegendLabel` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md new file mode 100644 index 000000000..0156f1f1d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md @@ -0,0 +1,1152 @@ +--- +title: Blazor Chart Features | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Features +_keywords: Blazor Charts, Features, Infragistics +_license: commercial +mentionedTypes: ["FinancialChart", "CategoryChart", "XamDataChart"] +_tocName: Chart Features +--- + +# Blazor Chart Features + +The Ignite UI for Blazor Charts allow you to display many different features to portray the full data story to be told with your chart. Each of these features are fully customizable, and can be styled to suit your design needs - allowing you full control. Interactions such as highlighting and annotations allow you to call out important data details allowing for a deeper data analysis within your chart. + +The Blazor Charts offer the following chart features: + +## Axis + +Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the Blazor chart's [Axis Gridlines](features/chart-axis-gridlines.md), [Axis Layouts](features/chart-axis-layouts.md), and [Axis Options](features/chart-axis-options.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + + + +
+
+ @if (SinData != null && CosData != null) + { + + + + + + + + } +
+
+ +@code { + + private List SinData; + private List CosData; + + private double YAxisCrossingValue = 0; + private double XAxisCrossingValue = 0; + + protected override void OnInitialized() + { + List _sinData = new List(); + List _cosData = new List(); + + for (int i = - 360; i <= 360; i += 10) + { + double radians = (i * Math.PI) / 180; + double sin = Math.Sin(radians); + double cos = Math.Cos(radians); + + _sinData.Add(new Point() { X = i, Y = sin }); + _cosData.Add(new Point() { X = i, Y = cos }); + } + + this.SinData = _sinData; + this.CosData = _cosData; + } + + private void OnXAxisCrossingValueChanged(ChangeEventArgs args) + { + this.XAxisCrossingValue = double.Parse(args.Value.ToString()); + } + + private void OnYAxisCrossingValueChanged(ChangeEventArgs args) + { + this.YAxisCrossingValue = double.Parse(args.Value.ToString()); + } +} +``` + + +
+ +## Annotations + +These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the [Chart Annotations](features/chart-annotations.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + + +
+ +
+ @if (Data != null) + { + + + } +
+
+ +@code { + + private List Data = new EnergyRenewableData(); + private List CalloutData = new List(); + + private IgbCategoryChart _Chart; + private IgbCategoryChart Chart + { + get { return _Chart; } + set { _Chart = value; + Chart.MarkerTypes.Add(MarkerType.Circle); + StateHasChanged(); } + } + private bool MarkersVisible = true; + private bool FinalValuesVisible = true; + private bool CalloutsVisible = true; + private bool CrosshairsVisible = true; + + private CrosshairsDisplayMode CrosshairMode = CrosshairsDisplayMode.Both; + + private void OnMarkersVisibleCheckBoxChange(ChangeEventArgs args) + { + Chart.MarkerTypes.Clear(); + bool value = args.Value != null ? (bool)args.Value : false; + if (value == true) + { + Chart.MarkerTypes.Add(MarkerType.Automatic); + } + else { + Chart.MarkerTypes.Add(MarkerType.None); + } + this.MarkersVisible = value; + } + private void OnFinalValuesCheckboxChange(ChangeEventArgs args) + { + this.FinalValuesVisible = (bool)args.Value; + } + private void OnCalloutsVisibleCheckboxChange(ChangeEventArgs args) + { + this.CalloutsVisible = (bool)args.Value; + } + private void OnCrosshairsVisibleCheckboxChange(ChangeEventArgs args) + { + bool isVisible = (bool)args.Value; + this.CrosshairMode = isVisible ? CrosshairsDisplayMode.Both : CrosshairsDisplayMode.None; + } + protected override void OnInitialized() + { + for (int i = 0; i < this.Data.Count; i++) + { + CalloutData.Add( + new CalloutInfo { + Index = i, Label = + this.Data[i].USA + " " + "TWh", + Value = this.Data[i].USA }); + } + } + + public class CalloutInfo + { + public int Index { get; set; } + public int Value { get; set; } + public string Label { get; set; } + } +} +``` + + +
+ +## Animations + +Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the [Chart Animations](features/chart-animations.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ Transition Type + + + + +
+
+ @if (Data != null) + { + + + } +
+
+ +@code { + + + private int _transitionInterval = 1000; // milliseconds + private int TransitionInInterval + { + get { return _transitionInterval; } + set + { + _transitionInterval = value; + StateHasChanged(); + } + } + private string IntervalLabel + { + get + { + return (_transitionInterval).ToString("0") + "ms"; + } + } + private CategoryTransitionInMode _selectedTransition; + private CategoryTransitionInMode SelectedTransition + { + get { return _selectedTransition; } + set + { + _selectedTransition = value; + StateHasChanged(); + } + } + private IgbCategoryChart _Chart; + private IgbCategoryChart Chart + { + get { return _Chart; } + set { _Chart = value; + StateHasChanged(); + } + } + + private List Data = new EnergyRenewableData(); + + private void OnTransitionIntervalChange(ChangeEventArgs args) + { + this.TransitionInInterval = int.Parse(args.Value.ToString()); + } + + private void OnReloadChart() + { + this.Chart.ReplayTransitionIn(); + } +} +``` + + +
+ +## Highlighting + +Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This features is enabled on all chart types. You can learn more about this feature in the [Chart Highlighting](features/chart-highlighting.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+
+ +
+ + + +
+
+ +@code { + + private IgbLegend _Legend; + private IgbLegend Legend + { + get { return _Legend; } + set { _Legend = value; StateHasChanged(); } + } + + private bool IsSeriesHighlighting = true; + private bool IsItemHighlighting = false; + private bool IsCategoryHighlighting = false; + private LegendHighlightingMode HighlightingLegend = LegendHighlightingMode.Auto; + private SeriesHighlightingMode HighlightingMode = SeriesHighlightingMode.Auto; + private SeriesHighlightingBehavior HighlightingBehavior = SeriesHighlightingBehavior.Auto; + + private List Data = new AverageTemperatureData(); + + private void OnHighlightingTargetChanged(ChangeEventArgs args) + { + var highlighingTarget = (string)args.Value; + if (highlighingTarget == "Series") + { + this.IsItemHighlighting = false; + this.IsSeriesHighlighting = true; + this.IsCategoryHighlighting = false; + } + else if(highlighingTarget == "Item") + { + this.IsItemHighlighting = true; + this.IsSeriesHighlighting = false; + this.IsCategoryHighlighting = false; + } + else if (highlighingTarget == "Category") + { + this.IsItemHighlighting = false; + this.IsSeriesHighlighting = false; + this.IsCategoryHighlighting = true; + } + else + { + this.IsItemHighlighting = false; + this.IsSeriesHighlighting = false; + this.IsCategoryHighlighting = false; + } + } + + public class AverageTemperature + { + public string Month { get; set; } + public double NewYork { get; set; } + public double LosAngeles { get; set; } + } + + public class AverageTemperatureData : List + { + public AverageTemperatureData() + { + this.Add(new AverageTemperature { NewYork = 10.6, LosAngeles = 28.3, Month = "JAN" }); + this.Add(new AverageTemperature { NewYork = 7.8, LosAngeles = 31.1, Month = "FEB" }); + this.Add(new AverageTemperature { NewYork = 12.2, LosAngeles = 27.8, Month = "MAR" }); + // ... 9 more items + } + } +} +``` + + +
+ +## Markers + +Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the [Chart Markers](features/chart-markers.md) topic. + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Linq + +
+
+ + + + + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var chartTypeEditor = this.chartTypeEditor; + var markerTypeEditor = this.markerTypeEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription chartTypeEditor; + private IgbPropertyEditorPropertyDescription markerTypeEditor; + private IgbCategoryChart chart; + + public void EditorChangeUpdateMarkerType(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + //var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First(); + //var value = (string)item.PrimitiveValue; + var chart = this.chart; + + var markerVal = (MarkerType)Enum.Parse(typeof(MarkerType), args.NewValue.ToString()); + chart.MarkerTypes.Clear(); + chart.MarkerTypes.Add(markerVal); + } + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Navigation + +You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the [Chart Navigation](features/chart-navigation.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + + + +
+
+ +@code { + private List Data; + private bool IsZoomingEnabled = true; + private ModifierKeys PanModifier = ModifierKeys.Alt; + private ModifierKeys DragModifier = ModifierKeys.Shift; + private InteractionState DefaultInteraction = InteractionState.DragPan; + + private IgbDataChart _chart; + public IgbDataChart Chart + { + get { return _chart; } + set { + _chart = value; + this.Chart.ActualWindowScaleHorizontal = 0.60; + this.Chart.ActualWindowScaleVertical = 0.60; + this.Chart.ActualWindowPositionVertical = 0.20; + this.Chart.ActualWindowPositionHorizontal = 0.20; + StateHasChanged(); + } + } + + protected override void OnInitialized() + { + Data = SampleFinancialData.Create(); + } + + private void OnPanUp() + { + this.Chart.ActualWindowPositionVertical -= 0.05; + } + + private void OnPanDown() + { + this.Chart.ActualWindowPositionVertical += 0.05; + } + + private void OnPanLeft() + { + this.Chart.ActualWindowPositionHorizontal -= 0.05; + } + + private void OnPanRight() + { + this.Chart.ActualWindowPositionHorizontal += 0.05; + } + + private void OnZoomIn() + { + if (this.Chart.ActualWindowPositionHorizontal < 1.0) + this.Chart.ActualWindowPositionHorizontal += 0.025; + + if (this.Chart.ActualWindowPositionVertical < 1.0) + this.Chart.ActualWindowPositionVertical += 0.025; + + if (this.Chart.ActualWindowScaleHorizontal > 0.05) + this.Chart.ActualWindowScaleHorizontal -= 0.05; + + if (this.Chart.ActualWindowScaleVertical > 0.05) + this.Chart.ActualWindowScaleVertical -= 0.05; + + } + + private void OnZoomOut() + { + if (this.Chart.ActualWindowPositionHorizontal > 0.025) + this.Chart.ActualWindowPositionHorizontal -= 0.025; + + if (this.Chart.ActualWindowPositionVertical > 0.025) + this.Chart.ActualWindowPositionVertical -= 0.025; + + if (this.Chart.ActualWindowScaleHorizontal < 1.0) + this.Chart.ActualWindowScaleHorizontal += 0.05; + + if (this.Chart.ActualWindowScaleVertical < 1.0) + this.Chart.ActualWindowScaleVertical += 0.05; + + } + + private void OnEnableZoomingChange(ChangeEventArgs args) + { + this.IsZoomingEnabled = (bool)args.Value; + } +} +``` + + +
+ +## Overlays + +Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the [Chart Overlays](features/chart-overlays.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ @if (Data != null) + { + + + + + + + + + + + + + + + + + } +
+
+ +@code { + + private List Data; + + protected override void OnInitialized() + { + var data = new List() { + new OverlayDataItem() { Label = "1", Value = 1.0 }, + new OverlayDataItem() { Label = "2", Value = 2.0 }, + new OverlayDataItem() { Label = "3", Value = 6.0 }, + new OverlayDataItem() { Label = "4", Value = 8.0 }, + new OverlayDataItem() { Label = "5", Value = 2.0 }, + new OverlayDataItem() { Label = "6", Value = 6.0 }, + new OverlayDataItem() { Label = "7", Value = 4.0 }, + new OverlayDataItem() { Label = "8", Value = 2.0 }, + new OverlayDataItem() { Label = "9", Value = 1.0 } + }; + + this.Data = data; + } + + public class OverlayDataItem { + public string Label { get; set; } + public double Value { get; set; } + } + +} +``` + + +
+ +## Performance + +Blazor charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the [Chart Performance](features/chart-performance.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + +
+
+ + +
+
+ +@code { + private IgbCategoryChart chart; + private int DataPoints = 1000000; + private string DataInfo; + + protected override void OnInitialized() + { + this.DataInfo = ToShortString(this.DataPoints); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints); + } + } + + private void OnSeriesAdded(IgbChartSeriesEventArgs e) + { + ((IgbCategoryChart)e.Parent).MarkerTypes.Clear(); + ((IgbCategoryChart)e.Parent).MarkerTypes.Add(MarkerType.None); + } + + private void OnDataPointsChanged(ChangeEventArgs args) + { + this.DataPoints = int.Parse(args.Value.ToString()); + this.DataInfo = ToShortString(this.DataPoints); + } + + private void OnDataGenerateClick() + { + Task.Delay(1).ContinueWith((t) => GenerateData()); + } + + private async Task GenerateData() + { + await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints); + } + + public static string ToShortString(double largeValue) + { + double roundValue; + + if (largeValue >= 1000000) + { + roundValue = Math.Round(largeValue / 100000) / 10; + return roundValue + "m"; + } + if (largeValue >= 1000) + { + roundValue = Math.Round(largeValue / 100) / 10; + return roundValue + "k"; + } + + roundValue = Math.Round(largeValue); + return roundValue + ""; + } +} +``` + + +
+ +## Tooltips + +Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the [Chart Tooltips](features/chart-tooltips.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var toolTipTypeEditor = this.toolTipTypeEditor; + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription toolTipTypeEditor; + private IgbLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Trendlines + +Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the Blazor chart, such as CubicFit and LinearFit. You can learn more about this feature in the [Chart Trendlines](features/chart-trendlines.md) topic. + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ + + +
+ +
+ + @if (Data != null) + { + + } +
+
+ +@code { + + protected StockPrice[] Data; + protected TrendLineType TrendLineType = TrendLineType.QuinticFit; + + protected override async Task OnInitializedAsync() + { + this.Data = await StocksHistory.GetMicrosoftStock(); + } +} +``` + + +
+ +## API References + +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) +- [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-highlight-filter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-highlight-filter.md new file mode 100644 index 000000000..db472d0ae --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-highlight-filter.md @@ -0,0 +1,791 @@ +--- +title: Blazor Chart Highlight Filter | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Highlight Filter +_keywords: Blazor Charts, Highlighting, Filtering, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart", "XamDataChart", "Series", "HighlightedValuesDisplayMode"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Highlight Filter +_premium: true +--- + +# Blazor Chart Highlight Filter + +The Ignite UI for Blazor Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set. This feature is demonstrated in the following example: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var highlightedValuesDisplayModeEditor = this.highlightedValuesDisplayModeEditor; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + var columnSeries2 = this.columnSeries2; + var columnSeries3 = this.columnSeries3; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription highlightedValuesDisplayModeEditor; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + private IgbColumnSeries columnSeries2; + private IgbColumnSeries columnSeries3; + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + + private CountryRenewableElectricityFiltered _countryRenewableElectricityFiltered = null; + public CountryRenewableElectricityFiltered CountryRenewableElectricityFiltered + { + get + { + if (_countryRenewableElectricityFiltered == null) + { + _countryRenewableElectricityFiltered = new CountryRenewableElectricityFiltered(); + } + return _countryRenewableElectricityFiltered; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityFilteredItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricityFiltered + : List +{ + public CountryRenewableElectricityFiltered() + { + this.Add(new CountryRenewableElectricityFilteredItem() { Year = @"2009", Europe = 26, China = 14, America = 12 }); + this.Add(new CountryRenewableElectricityFilteredItem() { Year = @"2010", Europe = 29, China = 17, America = 18 }); + this.Add(new CountryRenewableElectricityFilteredItem() { Year = @"2011", Europe = 50, China = 21, America = 22 }); + // ... 9 more items + } +} +``` + + +Note that data highlighting feature is supported by the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) and [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedValuesDisplayMode) property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature. + +## Using Highlight Filter with DataChart + +In the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html), much of the highlight filter API happens on the series themselves, mainly by setting the [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource) property to a collection representing a subset of the data you want to highlight. The count of the items in the [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource) needs to match the count of the data bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataSource) of the series that you are looking to highlight, and in the case of category series, it will use the `ValueMemberPath` that you have defined as the highlight path by default. The sample at the top of this page uses the [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource) in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) to show the overlay. + +In the case that the schema does not match between the [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource) and the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataSource) of the series, you can configure this using the `HighlightedValueMemberPath` property on the series. Additionally, if you would like to use the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataSource) of the series itself as the highlight source and have a path on your data item that represents the subset, you can do this. This is done by simply setting the `HighlightedValueMemberPath` property to that path and not providing a [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource). + +The reduced opacity of the column and area series types is configurable by setting the [`HighlightedValuesFadeOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesFadeOpacity) property on the series. You can also set the [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedValuesDisplayMode) property to `Hidden` if you do not wish to see the overlay at all. + +The part of the series shown by the highlight filter will be represented in the legend and tooltip layers of the chart separately. You can configure the title that this is given in the tooltip and legend by setting the [`HighlightedTitleSuffix`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedTitleSuffix). This will append the value that you provide to the end of the [`ChartTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ChartTitle) of the series. + +If the `DataLegend` or [`IgbDataToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html) is used then the highlighted series will appear grouped. This can be managed by setting the [`HighlightedValuesDataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesDataLegendGroup) property on the series to categorize them appropriately. + +The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control using the [`HighlightedValuesDataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesDataLegendGroup): + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + var columnSeries2 = this.columnSeries2; + var columnSeries3 = this.columnSeries3; + + this.BindElements = () => { + legend.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbDataLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + private IgbColumnSeries columnSeries2; + private IgbColumnSeries columnSeries3; + + private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null; + public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals + { + get + { + if (_olympicMedalsTopCountriesWithTotals == null) + { + _olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return _olympicMedalsTopCountriesWithTotals; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OlympicMedalsTopCountriesWithTotalsItem +{ + public string Year { get; set; } + public double America { get; set; } + public double AmericaGold { get; set; } + public double China { get; set; } + public double ChinaGold { get; set; } + public double Russia { get; set; } + public double RussiaGold { get; set; } + public double Total { get; set; } +} + +public class OlympicMedalsTopCountriesWithTotals + : List +{ + public OlympicMedalsTopCountriesWithTotals() + { + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"1996", America = 148, AmericaGold = 50, China = 110, ChinaGold = 40, Russia = 95, RussiaGold = 20, Total = 353 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2000", America = 142, AmericaGold = 40, China = 115, ChinaGold = 45, Russia = 91, RussiaGold = 40, Total = 348 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2004", America = 134, AmericaGold = 35, China = 121, ChinaGold = 55, Russia = 86, RussiaGold = 25, Total = 341 }); + // ... 3 more items + } +} +``` + + +The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control using the [`HighlightedValuesDataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesDataLegendGroup): + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + var columnSeries2 = this.columnSeries2; + var columnSeries3 = this.columnSeries3; + var dataToolTipLayer = this.dataToolTipLayer; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + private IgbColumnSeries columnSeries2; + private IgbColumnSeries columnSeries3; + private IgbDataToolTipLayer dataToolTipLayer; + + private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null; + public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals + { + get + { + if (_olympicMedalsTopCountriesWithTotals == null) + { + _olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return _olympicMedalsTopCountriesWithTotals; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OlympicMedalsTopCountriesWithTotalsItem +{ + public string Year { get; set; } + public double America { get; set; } + public double AmericaGold { get; set; } + public double China { get; set; } + public double ChinaGold { get; set; } + public double Russia { get; set; } + public double RussiaGold { get; set; } + public double Total { get; set; } +} + +public class OlympicMedalsTopCountriesWithTotals + : List +{ + public OlympicMedalsTopCountriesWithTotals() + { + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"1996", America = 148, AmericaGold = 50, China = 110, ChinaGold = 40, Russia = 95, RussiaGold = 20, Total = 353 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2000", America = 142, AmericaGold = 40, China = 115, ChinaGold = 45, Russia = 91, RussiaGold = 40, Total = 348 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2004", America = 134, AmericaGold = 35, China = 121, ChinaGold = 55, Russia = 86, RussiaGold = 25, Total = 341 }); + // ... 3 more items + } +} +``` + + +The following example demonstrates the usage of the data highlighting overlay feature within the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control using the `HighlightedValueMemberPath`: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var highlightedValuesDisplayModeEditor = this.highlightedValuesDisplayModeEditor; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var columnSeries1 = this.columnSeries1; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription highlightedValuesDisplayModeEditor; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbColumnSeries columnSeries1; + + private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null; + public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals + { + get + { + if (_olympicMedalsTopCountriesWithTotals == null) + { + _olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return _olympicMedalsTopCountriesWithTotals; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OlympicMedalsTopCountriesWithTotalsItem +{ + public string Year { get; set; } + public double America { get; set; } + public double AmericaGold { get; set; } + public double China { get; set; } + public double ChinaGold { get; set; } + public double Russia { get; set; } + public double RussiaGold { get; set; } + public double Total { get; set; } +} + +public class OlympicMedalsTopCountriesWithTotals + : List +{ + public OlympicMedalsTopCountriesWithTotals() + { + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"1996", America = 148, AmericaGold = 50, China = 110, ChinaGold = 40, Russia = 95, RussiaGold = 20, Total = 353 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2000", America = 142, AmericaGold = 40, China = 115, ChinaGold = 45, Russia = 91, RussiaGold = 40, Total = 348 }); + this.Add(new OlympicMedalsTopCountriesWithTotalsItem() { Year = @"2004", America = 134, AmericaGold = 35, China = 121, ChinaGold = 55, Russia = 86, RussiaGold = 25, Total = 341 }); + // ... 3 more items + } +} +``` + + +## Using Highlight Filter in CategoryChart + +The [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) highlight filter happens on the chart by setting the [`InitialHighlightFilter`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialHighlightFilter) property. Since the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) takes all of the properties on your underlying data item into account by default, you will need to define the [`InitialGroups`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialGroups) on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the [`InitialGroups`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialGroups) to a value path in your underlying data item to group by a path that has duplicate values. + + + + + +Similar to the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html), the [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedValuesDisplayMode) property is also exposed on the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html). In the case that you do not want to see the overlay, you can set this property to `Hidden`. + +The following example demonstrates the usage of the data highlighting overlay feature within the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ Sales Filtered by Country +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var highlightedValuesDisplayModeEditor = this.highlightedValuesDisplayModeEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription highlightedValuesDisplayModeEditor; + private IgbCategoryChart chart; + + private SalesData _salesData = null; + public SalesData SalesData + { + get + { + if (_salesData == null) + { + _salesData = new SalesData(); + } + return _salesData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class SalesDataItem +{ + public string Country { get; set; } + public string Product { get; set; } + public double UnitsSold { get; set; } + public double ManufacturingPrice { get; set; } + public double SalePrice { get; set; } + public double GrossSales { get; set; } + public double Discounts { get; set; } + public double Sales { get; set; } + public double COGS { get; set; } + public double Profit { get; set; } + public string Date { get; set; } + public string Month { get; set; } + public string Year { get; set; } +} + +public class SalesData + : List +{ + public SalesData() + { + this.Add(new SalesDataItem() { Country = @"UK", Product = @"Vermont", UnitsSold = 501, ManufacturingPrice = 15, SalePrice = 23, GrossSales = 26440, Discounts = 0, Sales = 26440, COGS = 16185, Profit = 11255, Date = @"1/1/20", Month = @"January", Year = @"2020" }); + this.Add(new SalesDataItem() { Country = @"Japan", Product = @"Kensington", UnitsSold = 1372, ManufacturingPrice = 3, SalePrice = 20, GrossSales = 27440, Discounts = 0, Sales = 27440, COGS = 16185, Profit = 11255, Date = @"1/1/20", Month = @"January", Year = @"2020" }); + this.Add(new SalesDataItem() { Country = @"India", Product = @"Kensington", UnitsSold = 2762, ManufacturingPrice = 3, SalePrice = 20, GrossSales = 55240, Discounts = 0, Sales = 55240, COGS = 13210, Profit = 42030, Date = @"1/1/20", Month = @"January", Year = @"2020" }); + // ... 1039 more items + } +} +``` + + + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Highlighting](chart-highlighting.md) +- [Chart Data Tooltip](chart-data-tooltip.md) +- [Chart Data Aggregations](chart-data-aggregations.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +| [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) Properties | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) Properties | +| ----------------------------------------------|---------------------------| +| [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource) | [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedDataSource) | +| [`HighlightedTitleSuffix`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedTitleSuffix) | [`HighlightedTitleSuffix`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedTitleSuffix) | +| `CategoryChart.HighlightedValueMemberPath` | `Series.HighlightedValueMemberPath` | +| [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedValuesDisplayMode) | [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesDisplayMode) | +| [`HighlightedValuesFadeOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesFadeOpacity) | [`HighlightedValuesFadeOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesFadeOpacity) | +| [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedValuesDisplayMode) | [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_HighlightedValuesDisplayMode) | +| [`InitialHighlightFilter`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialHighlightFilter) | | +| [`InitialGroups`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialGroups) | | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-highlighting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-highlighting.md new file mode 100644 index 000000000..a24894a92 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-highlighting.md @@ -0,0 +1,616 @@ +--- +title: Blazor Chart Highlighting | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Highlighting +_keywords: Blazor Charts, Highlighting, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Highlighting +_premium: true +--- + +## Blazor Chart Highlighting Example + +The following example demonstrates the different highlighting options that are available on the Blazor chart. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + +
+
+ Average Temperature in Sydney +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var highlightingModeEditor = this.highlightingModeEditor; + var highlightingBehaviorEditor = this.highlightingBehaviorEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription highlightingModeEditor; + private IgbPropertyEditorPropertyDescription highlightingBehaviorEditor; + private IgbCategoryChart chart; + + private TemperatureAnnotatedData _temperatureAnnotatedData = null; + public TemperatureAnnotatedData TemperatureAnnotatedData + { + get + { + if (_temperatureAnnotatedData == null) + { + _temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return _temperatureAnnotatedData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureAnnotatedDataItem +{ + public double Index { get; set; } + public string TempInfo { get; set; } + public double Temperature { get; set; } + public string Month { get; set; } +} + +public class TemperatureAnnotatedData + : List +{ + public TemperatureAnnotatedData() + { + this.Add(new TemperatureAnnotatedDataItem() { Index = 0, TempInfo = @"27°C", Temperature = 27, Month = @"Jan" }); + this.Add(new TemperatureAnnotatedDataItem() { Index = 1, TempInfo = @"25°C", Temperature = 25, Month = @"Feb" }); + this.Add(new TemperatureAnnotatedDataItem() { Index = 2, TempInfo = @"21°C", Temperature = 21, Month = @"Mar" }); + // ... 9 more items + } +} +``` + + +
+ +# Blazor Chart Highlighting Modes & Behaviors + +All Blazor Charts support a variety of highlighting options. [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingMode) can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior) can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) controls and they have the same API for using the highlighting feature. + +The following example demonstrates the [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingMode) Blazor chart. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var highlightingModeEditor = this.highlightingModeEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription highlightingModeEditor; + private IgbCategoryChart chart; + + private TemperatureAnnotatedData _temperatureAnnotatedData = null; + public TemperatureAnnotatedData TemperatureAnnotatedData + { + get + { + if (_temperatureAnnotatedData == null) + { + _temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return _temperatureAnnotatedData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureAnnotatedDataItem +{ + public double Index { get; set; } + public string TempInfo { get; set; } + public double Temperature { get; set; } + public string Month { get; set; } +} + +public class TemperatureAnnotatedData + : List +{ + public TemperatureAnnotatedData() + { + this.Add(new TemperatureAnnotatedDataItem() { Index = 0, TempInfo = @"27°C", Temperature = 27, Month = @"Jan" }); + this.Add(new TemperatureAnnotatedDataItem() { Index = 1, TempInfo = @"25°C", Temperature = 25, Month = @"Feb" }); + this.Add(new TemperatureAnnotatedDataItem() { Index = 2, TempInfo = @"21°C", Temperature = 21, Month = @"Mar" }); + // ... 9 more items + } +} +``` + + +The following example demonstrates the [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior) Blazor chart. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var highlightingBehaviorEditor = this.highlightingBehaviorEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription highlightingBehaviorEditor; + private IgbCategoryChart chart; + + private TemperatureAnnotatedData _temperatureAnnotatedData = null; + public TemperatureAnnotatedData TemperatureAnnotatedData + { + get + { + if (_temperatureAnnotatedData == null) + { + _temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return _temperatureAnnotatedData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureAnnotatedDataItem +{ + public double Index { get; set; } + public string TempInfo { get; set; } + public double Temperature { get; set; } + public string Month { get; set; } +} + +public class TemperatureAnnotatedData + : List +{ + public TemperatureAnnotatedData() + { + this.Add(new TemperatureAnnotatedDataItem() { Index = 0, TempInfo = @"27°C", Temperature = 27, Month = @"Jan" }); + this.Add(new TemperatureAnnotatedDataItem() { Index = 1, TempInfo = @"25°C", Temperature = 25, Month = @"Feb" }); + this.Add(new TemperatureAnnotatedDataItem() { Index = 2, TempInfo = @"21°C", Temperature = 21, Month = @"Mar" }); + // ... 9 more items + } +} +``` + + +# Blazor Chart Legend Highlighting + +All Blazor Charts support legend highlighting. [`LegendHighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_LegendHighlightingMode) can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) controls and they have the same API for using the highlighting feature. + +The following example demonstrates the legend series highlighting Blazor chart. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +## Highlight Layers + +The Ignite UI for Blazor [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) can enable three types of highlighting when hovering over data items. + +1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the [`IsSeriesHighlightingEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IsSeriesHighlightingEnabled) property to true. + +2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the [`IsItemHighlightingEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_IsItemHighlightingEnabled) property to true. + +3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the [`IsCategoryHighlightingEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_IsCategoryHighlightingEnabled) property to true. + +The following example demonstrates the different highlighting layers that are available on the Blazor chart. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+
+ +
+ + + +
+
+ +@code { + + private IgbLegend _Legend; + private IgbLegend Legend + { + get { return _Legend; } + set { _Legend = value; StateHasChanged(); } + } + + private bool IsSeriesHighlighting = true; + private bool IsItemHighlighting = false; + private bool IsCategoryHighlighting = false; + private LegendHighlightingMode HighlightingLegend = LegendHighlightingMode.Auto; + private SeriesHighlightingMode HighlightingMode = SeriesHighlightingMode.Auto; + private SeriesHighlightingBehavior HighlightingBehavior = SeriesHighlightingBehavior.Auto; + + private List Data = new AverageTemperatureData(); + + private void OnHighlightingTargetChanged(ChangeEventArgs args) + { + var highlighingTarget = (string)args.Value; + if (highlighingTarget == "Series") + { + this.IsItemHighlighting = false; + this.IsSeriesHighlighting = true; + this.IsCategoryHighlighting = false; + } + else if(highlighingTarget == "Item") + { + this.IsItemHighlighting = true; + this.IsSeriesHighlighting = false; + this.IsCategoryHighlighting = false; + } + else if (highlighingTarget == "Category") + { + this.IsItemHighlighting = false; + this.IsSeriesHighlighting = false; + this.IsCategoryHighlighting = true; + } + else + { + this.IsItemHighlighting = false; + this.IsSeriesHighlighting = false; + this.IsCategoryHighlighting = false; + } + } + + public class AverageTemperature + { + public string Month { get; set; } + public double NewYork { get; set; } + public double LosAngeles { get; set; } + } + + public class AverageTemperatureData : List + { + public AverageTemperatureData() + { + this.Add(new AverageTemperature { NewYork = 10.6, LosAngeles = 28.3, Month = "JAN" }); + this.Add(new AverageTemperature { NewYork = 7.8, LosAngeles = 31.1, Month = "FEB" }); + this.Add(new AverageTemperature { NewYork = 12.2, LosAngeles = 27.8, Month = "MAR" }); + // ... 9 more items + } + } +} +``` + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Animations](chart-animations.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingMode) +- [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior) +- `LegendHighlightingBehavior` +- [`IsCategoryHighlightingEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_IsCategoryHighlightingEnabled) +- [`IsItemHighlightingEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_IsItemHighlightingEnabled) +- [`IsSeriesHighlightingEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IsSeriesHighlightingEnabled) +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) +- [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md new file mode 100644 index 000000000..a80906d58 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md @@ -0,0 +1,216 @@ +--- +title: Blazor Chart Markers | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Markers +_keywords: Blazor Charts, Markers, Infragistics +_license: commercial +mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Markers +_premium: true +--- + +# Blazor Chart Markers + +In Ignite UI for Blazor, markers are visual elements that display the values of data points in the chart's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines. + +## Blazor Chart Marker Example + +In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the `MarkerType` property to `Circle` enum value. + +The colors of the markers are also managed by setting the [`MarkerBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerBrushes) and [`MarkerOutlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerOutlines) properties in the sample below. The markers and [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) is configurable in this sample by using the drop-downs as well. + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Linq + +
+
+ + + + + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var chartTypeEditor = this.chartTypeEditor; + var markerTypeEditor = this.markerTypeEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription chartTypeEditor; + private IgbPropertyEditorPropertyDescription markerTypeEditor; + private IgbCategoryChart chart; + + public void EditorChangeUpdateMarkerType(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + //var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First(); + //var value = (string)item.PrimitiveValue; + var chart = this.chart; + + var markerVal = (MarkerType)Enum.Parse(typeof(MarkerType), args.NewValue.ToString()); + chart.MarkerTypes.Clear(); + chart.MarkerTypes.Add(markerVal); + } + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Chart Marker Templates + +In addition to marker properties, you can implement your own marker by setting a function to the `MarkerTemplate` property of a series rendered in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control as it is demonstrated in example below. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ Percentage Change in Energy Generation in 2019 +
+ +
+
+ +
+ + @*note custom marker template is implemented in CategoryChatMarkerStyling.js*@ + +
+
+ +@code { + + private IgbLegend _Legend; + private IgbLegend Legend + { + get { return _Legend; } + set { _Legend = value; StateHasChanged(); } + } + + private List Data = new EnergyChangeData(); + +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`MarkerBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerBrushes) +- [`MarkerOutlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerOutlines) +- `MarkerType` +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-navigation.md new file mode 100644 index 000000000..448c26ba8 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-navigation.md @@ -0,0 +1,431 @@ +--- +title: Blazor Data Chart | Data Visualization Tools | Navigation | Infragistics +_description: Navigate Infragistics' Blazor charts by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Blazor graph navigation capabilities! +_keywords: Blazor charts, data chart, navigation, Ignite UI for Blazor, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "CategoryChart", "FinancialChart", "ModifierKeys"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Navigation +_premium: true +--- + +# Blazor Chart Navigation + +The Ignite UI for Blazor charts allows for interactive panning and zooming via the mouse, keyboard and touch. + +## Blazor Chart Navigation Example + +The following example shows all of the available panning and zooming options that are available. You can interact with the example by using the buttons, or select your desired options using the dropdowns or checkboxes. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + + + +
+
+ +@code { + private List Data; + private bool IsZoomingEnabled = true; + private ModifierKeys PanModifier = ModifierKeys.Alt; + private ModifierKeys DragModifier = ModifierKeys.Shift; + private InteractionState DefaultInteraction = InteractionState.DragPan; + + private IgbDataChart _chart; + public IgbDataChart Chart + { + get { return _chart; } + set { + _chart = value; + this.Chart.ActualWindowScaleHorizontal = 0.60; + this.Chart.ActualWindowScaleVertical = 0.60; + this.Chart.ActualWindowPositionVertical = 0.20; + this.Chart.ActualWindowPositionHorizontal = 0.20; + StateHasChanged(); + } + } + + protected override void OnInitialized() + { + Data = SampleFinancialData.Create(); + } + + private void OnPanUp() + { + this.Chart.ActualWindowPositionVertical -= 0.05; + } + + private void OnPanDown() + { + this.Chart.ActualWindowPositionVertical += 0.05; + } + + private void OnPanLeft() + { + this.Chart.ActualWindowPositionHorizontal -= 0.05; + } + + private void OnPanRight() + { + this.Chart.ActualWindowPositionHorizontal += 0.05; + } + + private void OnZoomIn() + { + if (this.Chart.ActualWindowPositionHorizontal < 1.0) + this.Chart.ActualWindowPositionHorizontal += 0.025; + + if (this.Chart.ActualWindowPositionVertical < 1.0) + this.Chart.ActualWindowPositionVertical += 0.025; + + if (this.Chart.ActualWindowScaleHorizontal > 0.05) + this.Chart.ActualWindowScaleHorizontal -= 0.05; + + if (this.Chart.ActualWindowScaleVertical > 0.05) + this.Chart.ActualWindowScaleVertical -= 0.05; + + } + + private void OnZoomOut() + { + if (this.Chart.ActualWindowPositionHorizontal > 0.025) + this.Chart.ActualWindowPositionHorizontal -= 0.025; + + if (this.Chart.ActualWindowPositionVertical > 0.025) + this.Chart.ActualWindowPositionVertical -= 0.025; + + if (this.Chart.ActualWindowScaleHorizontal < 1.0) + this.Chart.ActualWindowScaleHorizontal += 0.05; + + if (this.Chart.ActualWindowScaleVertical < 1.0) + this.Chart.ActualWindowScaleVertical += 0.05; + + } + + private void OnEnableZoomingChange(ChangeEventArgs args) + { + this.IsZoomingEnabled = (bool)args.Value; + } +} +``` + + +
+ +Like this sample? Get access to our complete Blazor toolkit and start building your own apps in minutes. Download it for free. + +## Chart Navigation with User Interactions + +Whether or not zooming is on by default depends on the chart you are using. If you are using [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), it is on by default, but it is not in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). In order to enable or disable navigation in the UI, you need to set either the [`IsHorizontalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsHorizontalZoomEnabled) and/or the [`IsVerticalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsVerticalZoomEnabled) properties of the chart, depending on the direction that you wish to enable or disable zooming. + +It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`DefaultInteraction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_DefaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`DefaultInteraction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_DefaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. + +## Chart Navigation with Touch, Mouse and Keyboard + +Navigation in the Blazor data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default: + +- **Panning**: Using 🡐 🡒 🡑 🡓 arrow keys on the keyboard or holding the SHIFT key, clicking and dragging with the mouse or pressing and moving your finger via touch. +- **Zoom In**: Using the PAGE UP key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch. +- **Zoom Out**: Using the PAGE DOWN key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch. +- **Fit to Chart Plot Area**: Using the HOME key on the keyboard. There is no mouse or touch operation for this. +- **Area Zoom**: Click and drag the mouse within the plot area with the [`DefaultInteraction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_DefaultInteraction) property set to its default - `DragZoom`. + +The zoom and pan operations can also be enabled by using modifier keys by setting the [`DragModifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_DragModifier) and [`PanModifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_PanModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed: + +| Modifier Value | Corresponding Key | +| ---------------|------------------ | +| `Shift` | SHIFT | +| `Control` | CTRL | +| `Windows` | WIN | +| `Apple` | APPLE | +| `None` | no keys | + +## Chart Navigation with Scrollbars + +The chart can be scrolled by enabling the [`VerticalViewScrollbarMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_VerticalViewScrollbarMode) and [`HorizontalViewScrollbarMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HorizontalViewScrollbarMode) properties. + +These can be configured to the following options + +- `Persistent` - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out. +- `Fading` - The scrollbars disappear after use and reappear when the mouse is near their location. +- `FadeToLine` - The scrollbars are reduced to a thinner line when zooming is not in use. +- `None` - Default, no scrollbars are shown. + +The following example demonstrates enabling scrollbars. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbFinancialChart chart; + + private MultipleStocks _multipleStocks = null; + public MultipleStocks MultipleStocks + { + get + { + if (_multipleStocks == null) + { + MultipleStocks.Fetch().ContinueWith((t) => {_multipleStocks = t.Result; StateHasChanged(); }); + } + return _multipleStocks; + } + } + +} +``` +```csharp +//begin async data + using System; + using System.Collections.Generic; + using System.Text.Json; + using System.Threading; + using System.Threading.Tasks; + using System.Net.Http; + using System.Collections.ObjectModel; + using IgniteUI.Blazor.Controls; + + public class MultipleStocks : List + { + public async static Task Fetch() + { + var google = await MultipleStocks.GetGoogleStock(); + var amazon = await MultipleStocks.GetAmazonStock(); + + var val = new MultipleStocks(); + val.Add(google); + val.Add(amazon); + return val; + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public async static Task GetAmazonStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Amazon"; + return stockData; + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public async static Task GetTeslaStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Tesla"; + return stockData; + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public async static Task GetMicrosoftStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Microsoft"; + return stockData; + } + + /** gets Google stock OHLC prices from a .JSON file */ + public async static Task GetGoogleStock() + { + var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + var data = await Fetch(url); + var stockData = ConvertData(data); + stockData[0].Title = "Google"; + return stockData; + } + + private async static Task[]> Fetch(string url) + { + HttpClient client = new HttpClient(); + var str = await client.GetStringAsync(url); + var arr = JsonSerializer.Deserialize[]>(str); + return arr; + } + + public static TitledStockData ConvertData(Dictionary[] arr) + { + var ret = new TitledStockData(); + + foreach (var json in arr) + { + var date = ((JsonElement)json["date"]).GetString(); + var parts = date.Split('-'); // "2020-01-01" + var item = new MultipleStocksItem(); + item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]),12,0,0); + item.Open = ((JsonElement)json["open"]).GetDouble(); + item.High = ((JsonElement)json["high"]).GetDouble(); + item.Low = ((JsonElement)json["low"]).GetDouble(); + item.Close = ((JsonElement)json["close"]).GetDouble(); + item.Volume = ((JsonElement)json["volume"]).GetDouble(); + ret.Add(item); + } + + return ret; + } + } + + public class MultipleStocksItem + { + [DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)] + public string Title { get; set; } + public DateTime Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + } + + public class TitledStockData + : ObservableCollection + { + + } + //end async data +``` + + +
+ +## Chart Navigation through Code + +> \[!Note] +> Code navigation of the chart can only be used for the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control. + +The Blazor data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties: + +- [`WindowPositionHorizontal`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowPositionHorizontal): A numeric value describing the X portion of the content view rectangle displayed by the data chart. +- [`WindowPositionVertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowPositionVertical): A numeric value describing the Y portion of the content view rectangle displayed by the data chart. +- [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect): A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect) of "0, 0, 1, 1" would be the entirety of the data chart. +- [`WindowScaleHorizontal`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_WindowScaleHorizontal): A numeric value describing the width portion of the content view rectangle displayed by the data chart. +- [`WindowScaleVertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_WindowScaleVertical): A numeric value describing the height portion of the content view rectangle displayed by the data chart. + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Tooltips](chart-tooltips.md) +- [Chart Trendlines](chart-trendlines.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`DefaultInteraction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_DefaultInteraction) +- [`DragModifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_DragModifier) +- [`IsHorizontalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsHorizontalZoomEnabled) +- [`IsVerticalZoomEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_IsVerticalZoomEnabled) +- [`PanModifier`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_PanModifier) +- [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) +- [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-overlays.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-overlays.md new file mode 100644 index 000000000..7c94997c2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-overlays.md @@ -0,0 +1,506 @@ +--- +title: Blazor Chart Overlays | Data Visualization Tools | Value Overlay | Infragistics +_description: Use Infragistics Ignite UI for Blazor chart control's value overlay feature to place horizontal or vertical lines at a single numeric value. Learn about our Ignite UI for Blazor graph types! +_keywords: Blazor charts, data chart, value overlay, Ignite UI for Blazor, Infragistics +_license: commercial +mentionedTypes: ["XamDataChart", "ValueOverlay", "CategoryChart", "FinancialChart"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Overlays +_premium: true +--- + +# Blazor Chart Overlays + +The Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the [`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html). This can help you to visualize data such as the mean or median of a particular series. + +## Blazor Value Overlay Example + +The following example depicts a [Column Chart](../types/column-chart.md) with a few horizontal value overlays plotted. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ @if (Data != null) + { + + + + + + + + + + + + + + + + + } +
+
+ +@code { + + private List Data; + + protected override void OnInitialized() + { + var data = new List() { + new OverlayDataItem() { Label = "1", Value = 1.0 }, + new OverlayDataItem() { Label = "2", Value = 2.0 }, + new OverlayDataItem() { Label = "3", Value = 6.0 }, + new OverlayDataItem() { Label = "4", Value = 8.0 }, + new OverlayDataItem() { Label = "5", Value = 2.0 }, + new OverlayDataItem() { Label = "6", Value = 6.0 }, + new OverlayDataItem() { Label = "7", Value = 4.0 }, + new OverlayDataItem() { Label = "8", Value = 2.0 }, + new OverlayDataItem() { Label = "9", Value = 1.0 } + }; + + this.Data = data; + } + + public class OverlayDataItem { + public string Label { get; set; } + public double Value { get; set; } + } + +} +``` + + +
+ +## Blazor Value Overlay Properties + +Unlike other series types that use a [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) for data binding, the value overlay uses a `ValueMemberPath` property to bind a single numeric value. In addition, the value overlay requires you to define a single [`Axis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html#IgniteUI_Blazor_Controls_IgbValueOverlay_Axis) to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line. + +When using a numeric X or Y axis, the `ValueMemberPath` property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the `ValueMemberPath` should reflect the index of the category at which you want the value overlay to appear. + +When using the value overlay with a numeric angle axis, it will appear as a line from the center of the chart and when using a numeric radius axis, it will appear as a circle. + +[`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html) appearance properties are inherited from [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) and so [`Brush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Brush) and [`Thickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Thickness) for example are available and work the same way they do with other types of series. + +It is also possible to show an axis annotation on a [`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html) to show the value of the overlay on the owning axis. In order to show this, you can set the [`IsAxisAnnotationEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html#IgniteUI_Blazor_Controls_IgbValueOverlay_IsAxisAnnotationEnabled) property to true. + +## Blazor Value Layer + +The Blazor charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values. + +Applying the [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) components is done by setting the [`ValueLines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ValueLines) property on the chart. This property takes a collection of the `ValueLayerValueMode` enumeration. You can mix and match multiple value layers in the same chart by adding multiple `ValueLayerValueMode` enumerations to the [`ValueLines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ValueLines) collection of the chart. + +In the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html), this is done by adding a [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) to the [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) collection of the chart and then setting the [`ValueMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_ValueMode) property to one of the `ValueLayerValueMode` enumerations. Each of these enumerations and what they mean is listed below: + +- `Auto`: The default value mode of the `ValueLayerValueMode` enumeration. +- `Average`: Applies potentially multiple value lines to call out the average value of each series plotted in the chart. +- `GlobalAverage`: Applies a single value line to call out the average of all of the series values in the chart. +- `GlobalMaximum`: Applies a single value line to call out the absolute maximum value of all of the series values in the chart. +- `GlobalMinimum`: Applies a single value line to call out the absolute minimum value of all of the series values in the chart. +- `Maximum`: Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart. +- `Minimum`: Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart. + +If you want to prevent any particular series from being taken into account when using the [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) element, you can set the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_TargetSeries) property on the layer. This will force the layer to target the series that you define. You can have as many [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) elements within a single [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) as you want. + +The following sample demonstrates usage of the different [`ValueLines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ValueLines) in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html): + +```razor +@using IgniteUI.Blazor.Controls +@using System +@using System.Linq + +
+
+ + + + + + +
+
+ Renewable Electricity Generated +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var propertyEditor = this.propertyEditor; + var valueListEditor = this.valueListEditor; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription valueListEditor; + private IgbCategoryChart chart; + + public void EditorChangeUpdateValueLines(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + //var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First(); + //var value = (string)item.PrimitiveValue; + var chart = this.chart; + + var valueLineType = (ValueLayerValueMode)Enum.Parse(typeof(ValueLayerValueMode), args.NewValue.ToString()); + chart.ValueLines.Clear(); + chart.ValueLines.Add(valueLineType); + } + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Financial Overlays + +You can also plot built-in financial overlays and indicators in Blazor [Stock Chart](../types/stock-chart.md). + +## Chart Overlay Text + +The Blazor [`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html), [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html), and all Data Annotation Layers can render custom overlay text inside plot area of the XamDataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers. + +For example, you can use [`IgbDataAnnotationSliceLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationSliceLayer.html), [`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html), and [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) to show overlay text. + +```csharp +using System; +using System.Collections.Generic; +public class AnnotationSliceMultiOverlayDataItem +{ + public double Value { get; set; } +} + +public class AnnotationSliceMultiOverlayData + : List +{ + public AnnotationSliceMultiOverlayData() + { + this.Add(new AnnotationSliceMultiOverlayDataItem() { Value = 50 }); + } +} +``` +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var series1 = this.series1; + var valueOverlay = this.valueOverlay; + var valueLayer = this.valueLayer; + var annoLayer = this.annoLayer; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbLineSeries series1; + private IgbValueOverlay valueOverlay; + private IgbValueLayer valueLayer; + private IgbDataAnnotationSliceLayer annoLayer; + + private StockTesla _stockTesla = null; + public StockTesla StockTesla + { + get + { + if (_stockTesla == null) + { + _stockTesla = new StockTesla(); + } + return _stockTesla; + } + } + + private AnnotationSliceMultiOverlayData _annotationSliceMultiOverlayData = null; + public AnnotationSliceMultiOverlayData AnnotationSliceMultiOverlayData + { + get + { + if (_annotationSliceMultiOverlayData == null) + { + _annotationSliceMultiOverlayData = new AnnotationSliceMultiOverlayData(); + } + return _annotationSliceMultiOverlayData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class StockTeslaItem +{ + public string Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public double Change { get; set; } + public double Index { get; set; } +} + +public class StockTesla + : List +{ + public StockTesla() + { + this.Add(new StockTeslaItem() { Date = @"2019-01-10", Open = 20.4, High = 23, Low = 19.8, Close = 23, Volume = 779333701, Change = 12.7, Index = 0 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-22", Open = 22.8, High = 23.5, Low = 19.7, Close = 19.9, Volume = 911781100, Change = -12.6, Index = 1 }); + this.Add(new StockTeslaItem() { Date = @"2019-01-31", Open = 19.5, High = 20.8, Low = 18.6, Close = 20.5, Volume = 926375717, Change = 5, Index = 2 }); + // ... 224 more items + } +} +``` + + +### Styling Overlay Text + +This code example shows how to style and customize Overlay Text on +the [`IgbDataAnnotationSliceLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataAnnotationSliceLayer.html), [`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html), and [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html). + +
+ +```razor +public Series StylingOverlayText() +{ + var annoLayer = new IgbDataAnnotationSliceLayer(); + + // styling optional overlay text + annoLayer.OverlayTextColor = Brushes.White; + annoLayer.OverlayTextBackground = Brushes.Green; + annoLayer.OverlayTextBorderColor = Brushes.Black; + annoLayer.OverlayTextBorderThickness = 1; + annoLayer.OverlayTextBorderRadius = 4; + annoLayer.OverlayTextHorizontalMargin = 5; + annoLayer.OverlayTextHorizontalPadding = 2; + annoLayer.OverlayTextVerticalMargin = 5; + annoLayer.OverlayTextVerticalPadding = 2; + + return annoLayer; +} +``` + +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Column Chart](../types/area-chart.md) +- [Line Chart](../types/line-chart.md) +- [Stock Chart](../types/stock-chart.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`IgbValueOverlay`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html) +- [`Axis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueOverlay.html#IgniteUI_Blazor_Controls_IgbValueOverlay_Axis) +- [`Brush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Brush) +- `IsAxisAnnotationsEnabled` +- [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) +- [`Thickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Thickness) +- [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) +- `ValueLayerValueMode` +- [`ValueLines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ValueLines) +- [`OverlayText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_OverlayText) +- [`TargetAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_TargetAxis) +- `OverlayTextMemberPath` +- [`OverlayTextColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_OverlayTextColor) +- [`OverlayTextBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_OverlayTextBackground) +- [`OverlayTextBorderColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_OverlayTextBorderColor) +- [`OverlayTextLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html#IgniteUI_Blazor_Controls_IgbValueLayer_OverlayTextLocation) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md new file mode 100644 index 000000000..9fc57df2e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md @@ -0,0 +1,614 @@ +--- +title: Blazor Chart Performance | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Performance +_keywords: Blazor Charts, Performance, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "XamDataChart", "FinancialChartVolumeType", "FinancialChartZoomSliderType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Performance +_premium: true +--- + +# Blazor Chart Performance + +Blazor charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Blazor charts work as fast as possible in your application. + +## Blazor Chart Performance Examples + +The following examples demonstrates two high performance scenarios of Blazor charts. + +## Blazor Chart with High-Frequency + +In High-Frequency scenario, the Blazor Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) in High-Frequency scenario. + +```razor +@using System.Collections.ObjectModel +@using IgniteUI.Blazor.Controls + + +
+
+ + + + + + + + + +
+ +
+ + +
+
+ +@code { + + //private List Data; + private ObservableCollection Data; + + private IgbCategoryChart _Chart; + private IgbCategoryChart Chart + { + get { return _Chart; } + set { _Chart = value; StateHasChanged(); } + } + + private int DataIndex = 0; + private double DataPoints = 500; + private double DataFeedInterval = 5; + private string DataFeedAction = "Start"; + private bool DataFeedUpdating = false; + private bool RefreshChanged = false; + + private void OnDataUpdate() + { + if (!DataFeedUpdating) return; + if (RefreshChanged) return; + + this.DataIndex++; + + var oldItem = this.Data[0]; + var newItem = CategoryDataSource.GetNewItem(this.Data, this.DataIndex); + + this.Data.RemoveAt(0); + this.Chart.NotifyRemoveItem(this.Data, 0, oldItem); + this.Data.Add(newItem); + this.Chart.NotifyInsertItem(this.Data, this.Data.Count - 1, newItem); + + Task.Delay((int)this.DataFeedInterval).ContinueWith((t) => OnDataUpdate()); + } + + private void OnSeriesAdded(IgbChartSeriesEventArgs e) + { + ((IgbCategoryChart)e.Parent).MarkerTypes.Clear(); + ((IgbCategoryChart)e.Parent).MarkerTypes.Add(MarkerType.None); + } + + protected override void OnInitialized() + { + OnDataGenerateClick(); + } + + private void OnDataGenerateClick() + { + var dataList = CategoryDataSource.Generate(0, (int)this.DataPoints, false); + + this.Data = new ObservableCollection(dataList); + + SetupInterval(); + } + + private void OnDataFeedClick() + { + DataFeedUpdating = !DataFeedUpdating; + DataFeedAction = DataFeedUpdating ? "Stop" : "Start"; + + SetupInterval(); + } + + private void OnDataPointsChanged(ChangeEventArgs args) + { + double num = double.Parse(args.Value.ToString()); + + if (num < 100) num = 100; + if (num > 10000) num = 10000; + + this.DataPoints = num; + } + + private void OnRefreshFrequencyChanged(ChangeEventArgs args) + { + RefreshChanged = true; + double num = double.Parse(args.Value.ToString()); + + if (num < 5) num = 5; + if (num > 1000) num = 1000; + + this.DataFeedInterval = num; + + RefreshChanged = false; + SetupInterval(); + } + + private void SetupInterval() + { + Task.Delay((int)this.DataFeedInterval).ContinueWith((t) => OnDataUpdate()); + } + +} +``` + + +
+ +## Blazor Chart with High-Volume + +In High-Volume scenario, the Blazor Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) in High-Volume scenario. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ + + + +
+
+ + +
+
+ +@code { + private IgbCategoryChart chart; + private int DataPoints = 1000000; + private string DataInfo; + + protected override void OnInitialized() + { + this.DataInfo = ToShortString(this.DataPoints); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints); + } + } + + private void OnSeriesAdded(IgbChartSeriesEventArgs e) + { + ((IgbCategoryChart)e.Parent).MarkerTypes.Clear(); + ((IgbCategoryChart)e.Parent).MarkerTypes.Add(MarkerType.None); + } + + private void OnDataPointsChanged(ChangeEventArgs args) + { + this.DataPoints = int.Parse(args.Value.ToString()); + this.DataInfo = ToShortString(this.DataPoints); + } + + private void OnDataGenerateClick() + { + Task.Delay(1).ContinueWith((t) => GenerateData()); + } + + private async Task GenerateData() + { + await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints); + } + + public static string ToShortString(double largeValue) + { + double roundValue; + + if (largeValue >= 1000000) + { + roundValue = Math.Round(largeValue / 100000) / 10; + return roundValue + "m"; + } + if (largeValue >= 1000) + { + roundValue = Math.Round(largeValue / 100) / 10; + return roundValue + "k"; + } + + roundValue = Math.Round(largeValue); + return roundValue + ""; + } +} +``` + + +
+ +## General Performance Guidelines + +This section lists guidelines and chart features that add to the overhead and processing updates in the Blazor charts. + +### Data Size + +If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) with one of the following type of series which where designed for specially for that purpose. + +- [Scatter HD Chart](../types/scatter-chart.md#blazor-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#blazor-scatter-marker-chart) +- [Scatter Polyline Chart](../types/shape-chart.md#blazor-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#blazor-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#blazor-scatter-line-chart) +- [Scatter Polygon Chart](../types/shape-chart.md#blazor-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.md#blazor-area-chart-example) or [Column Chart](../types/column-chart.md#blazor-column-chart-example) + +### Data Structure + +Although Blazor charts support rendering of multiple data sources by binding array of arrays of data points to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_DataSource) property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example: + +```razor +this.CategoryChart.DataSource = FlattenDataSource.Create(); +this.FinancialChart.DataSource = FlattenDataSource.Create(); + +public static class FlattenDataSource +{ + public static List Create() { + var data = new List() { + new FlattenDataItem { Year = "1996", USA = 148, CHN = 110 }, + new FlattenDataItem { Year = "2000", USA = 142, CHN = 115 }, + }; + return data; + } + public class FlattenDataItem + { + public int USA { get; set; } + public int CHN { get; set; } + public int Year { get; set; } + } +} +// instead of this data structure: +public static class MultiDataSources +{ + public static List Create() { + var dataSource1 = new List() { + new MultiDataItem { Year = "1996", Value = 148 }, + new MultiDataItem { Year = "2000", Value = 142 }, + }; + var dataSource2 = new List() { + new MultiDataItem { Year = "1996", Value = 110 }, + new MultiDataItem { Year = "2000", Value = 115 }, + }; + var multipleSources = new List>(); + multipleSources.Add(dataSource1); + multipleSources.Add(dataSource2); + return multipleSources; + } + public class MultiDataItem + { + public int Value { get; set; } + public int Year { get; set; } + } +} +``` + +### Data Filtering + +Blazor [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use [`IncludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IncludedProperties) and [`ExcludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ExcludedProperties) to filter only those data columns that you actually want to render. For example, + +```razor +this.Chart.IncludedProperties = new string[] { "Year", "USA", "RUS" }; +this.Chart.ExcludedProperties = new string[] { "CHN", "FRN", "GER" }; +``` + +## Chart Performance Guidelines + +### Chart Types + +Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) property of Blazor [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) or the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control. + +The following table lists chart types in order from the fastest performance to slower performance in each group of charts: + +| Chart Group | Chart Type | +| ----------------|--------------------------------- | +| Pie Charts | - [Pie Chart](../types/pie-chart.md)
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#blazor-radial-pie-chart) | +| Line Charts | - [Category Line Chart](../types/line-chart.md#blazor-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#blazor-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#blazor-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#blazor-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#blazor-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#blazor-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#blazor-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#blazor-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#blazor-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#blazor-stacked-100-line-chart)
| +| Area Charts | - [Category Area Chart](../types/area-chart.md#blazor-area-chart-example)
- [Step Area Chart](../types/step-chart.md#blazor-step-area-chart)
- [Range Area Chart](../types/area-chart.md#blazor-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#blazor-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#blazor-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#blazor-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#blazor-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#blazor-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#blazor-stacked-100-area-chart)
| +| Column Charts | - [Column Chart](../types/column-chart.md#blazor-column-chart-example)
- [Bar Chart](../types/bar-chart.md#blazor-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#blazor-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#blazor-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#blazor-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#blazor-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#blazor-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#blazor-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#blazor-stacked-100-bar-chart) | +| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#blazor-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#blazor-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#blazor-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#blazor-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#blazor-stacked-100-spline-chart)
| +| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#blazor-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#blazor-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#blazor-polar-marker-chart)
| +| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
| +| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#blazor-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#blazor-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.md#blazor-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Scatter Spline Chart](../types/scatter-chart.md#blazor-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.md#blazor-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.md#blazor-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#blazor-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.md#blazor-scatter-polygon-chart) (\*)
| +| Radial Charts | - [Radial Line Chart](../types/radial-chart.md#blazor-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.md#blazor-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.md#blazor-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.md#blazor-radial-column-chart)
| +| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#blazor-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#blazor-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#blazor-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#blazor-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#blazor-polar-spline-area-chart)
| +| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#blazor-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.md#blazor-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.md#blazor-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#blazor-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#blazor-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#blazor-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#blazor-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#blazor-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#blazor-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#blazor-stacked-100-spline-chart)
| + +\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster. + +### Chart Animations + +Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Blazor charts while they play transition-in animations. + +### Chart Annotations + +Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Blazor chart. + +### Chart Highlighting + +Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Blazor chart. + +### Chart Legend + +Adding a legend to the Blazor charts might decrease performance if titles of series or data items mapped to legend are changing often at runtime. + +### Chart Markers + +In Blazor charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart. + +This code snippet shows how to remove markers from the Blazor charts. + +```razor +// on CategoryChart or FinancialChart +this.Chart.MarkerTypes.Clear(); +this.Chart.MarkerTypes.Add(MarkerType.None); + +// on LineSeries of DataChart +this.LineSeries.MarkerType = MarkerType.None; +``` + +### Chart Resolution + +Setting the [`Resolution`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Resolution) property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable. + +This code snippet shows how to decrease resolution in the Blazor charts. + +```razor +// on CategoryChart or FinancialChart: +this.Chart.Resolution = 10; +this.Chart.Resolution = 10; + +// on LineSeries of DataChart: +this.LineSeries.Resolution = 10; +``` + +### Chart Overlays + +Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Blazor chart. + +### Chart Trendlines + +Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Blazor chart. + +### Axis Types + +Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does. + +> \[!Note] +> The [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) already uses ordinal/category axis so there is no need to change its properties. + +This code snippet shows how to ordinal/category x-axis in the [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) controls. + +```razor + + + + + +``` + +### Axis Intervals + +By default, Blazor charts will automatically calculate [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisInterval) based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisInterval) property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. + +> \[!Note] +> We do not recommend setting axis minor interval as it will decrease chart performance. + +This code snippet shows how to set axis major interval in the Blazor charts. + +```razor + + + + + + + + +``` + +### Axis Scale + +Setting the [`YAxisIsLogarithmic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisIsLogarithmic) property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale. + +### Axis Labels Visibility + +In the same way as Markers, axis labels are also expensive because they use templates and bindings, and may have their data context changed often. If labels are not used, they should be hidden or their interval should be increased to decrease number of axis labels. + +This code snippet shows how to hide axis labels in the Blazor charts. + +```razor + + + + + + + + + + +``` + +### Axis Labels Abbreviation + +Although, the Blazor charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when [`YAxisAbbreviateLargeNumbers`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisAbbreviateLargeNumbers) is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting [`YAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTitle) to a string that represents factor used used to abbreviate your data values. + +This code snippet shows how to set axis title in the Blazor charts. + +```razor + + + + + + + +``` + +### Axis Labels Extent + +At runtime, the Blazor charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance. + +The following code snippet shows how to set a fixed extent for labels on y-axis in the Blazor charts. + +```razor + + + + + + + + +``` + +### Axis Other Visuals + +Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Blazor charts. + +For example, changing these properties on the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) or [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) control: + +| Axis Visual | X-Axis Properties | Y-Axis Properties | +| ---------------------|-------------------|------------------- | +| All Axis Visual | [`XAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisInterval)
[`XAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisMinorInterval) | [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisInterval)
[`YAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMinorInterval) | +| Axis Tickmarks | [`XAxisTickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickStroke)
[`XAxisTickStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickStrokeThickness)
[`XAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTickLength)
| [`YAxisTickStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickStroke)
[`YAxisTickStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickStrokeThickness)
[`YAxisTickLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTickLength)
| +| Axis Major Gridlines | [`XAxisMajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMajorStroke)
[`XAxisMajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMajorStrokeThickness)
| [`YAxisMajorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMajorStroke)
[`YAxisMajorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMajorStrokeThickness)
| +| Axis Minor Gridlines | [`XAxisMinorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStroke)
[`XAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisMinorStrokeThickness)
| [`YAxisMinorStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMinorStroke)
[`YAxisMinorStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisMinorStrokeThickness)
| +| Axis Main Line | [`XAxisStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStroke)
[`XAxisStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStrokeThickness)
| [`YAxisStroke`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStroke)
[`YAxisStrokeThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStrokeThickness)
| +| Axis Titles | [`XAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTitle)
[`XAxisTitleAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisTitleAngle)
| [`YAxisTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTitle)
[`YAxisTitleAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisTitleAngle)
| +| Axis Strips | [`XAxisStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisStrip)
| [`YAxisStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisStrip)
| + +Or changing properties of an [`IgbAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAxis.html) in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control: + +| Axis Visual | Axis Properties | +| ---------------------|------------------- | +| All Axis Visuals | `Interval`, `MinorInterval` | +| Axis Tickmarks | `TickStroke` , `TickStrokeThickness`, `TickLength` | +| Axis Major Gridlines | `MajorStroke`, `MajorStrokeThickness` | +| Axis Minor Gridlines | `MinorStroke`, `MinorStrokeThickness` | +| Axis Main Line | `Stroke`, `StrokeThickness` | +| Axis Titles | [`ChartTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ChartTitle), `TitleAngle` | +| Axis Strips | `Strip` | + +## Performance in Financial Chart + +In addition to above performance guidelines, the Blazor [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) control has the following unique features that affect performance. + +### Y-Axis Mode + +Setting the [`YAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMode) option to `Numeric` is recommended for higher performance, as fewer operations are needed than using `PercentChange` mode. + +### Chart Panes + +Setting a lot of panes using [`IndicatorTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_IndicatorTypes) and [`OverlayTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_OverlayTypes) options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay. + +### Zoom Slider + +Setting the [`ZoomSliderType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_ZoomSliderType) option to `None` will improve chart performance and enable more vertical space for other indicators and the volume pane. + +### Volume Type + +Setting the [`VolumeType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_VolumeType) property can have the following impact on chart performance: + +- `None` - is the least expensive since it does not display the volume pane. +- `Line` - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources. +- `Area` - is more expensive to render than the `Line` volume type. +- [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) - is more expensive to render than the `Area` volume type and it is recommended when rendering volume data of 1-3 stocks. + +## Performance in Data Chart + +In addition to the general performance guidelines, the Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control has the following unique features that affect performance. + +### Axes Collection + +Adding too many axis to the [`Axes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html#IgniteUI_Blazor_Controls_IgbDataChart_Axes) collection of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.md#axis-sharing-example) between series. + +### Series Collection + +Also, adding a lot of series to the [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) collection of the Blazor [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see [Data Structure](#data-structure) section) and then using conditional styling feature of the following series: + +| Slower Performance Scenario | Faster Scenario with Conditional Styling | +| ----------------------------|---------------------------------------- | +| 10+ of [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html) | Single [`IgbScatterLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterLineSeries.html) | +| 20+ of [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html) | Single [`IgbScatterPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolylineSeries.html) | +| 10+ of [`IgbScatterLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterLineSeries.html) | Single [`IgbScatterPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolylineSeries.html) | +| 10+ of [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html) | Single [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html) | +| 20+ of [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html) | Single [`IgbHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHighDensityScatterSeries.html) | +| 20+ of [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html) | Single [`IgbHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHighDensityScatterSeries.html) | +| 10+ of [`IgbAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAreaSeries.html) | Single [`IgbScatterPolygonSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html) | +| 10+ of [`IgbColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnSeries.html) | Single [`IgbScatterPolygonSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html) | + +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Area Chart](../types/area-chart.md) +- [Bar Chart](../types/bar-chart.md) +- [Bubble Chart](../types/bubble-chart.md) +- [Column Chart](../types/column-chart.md) +- [Donut Chart](../types/donut-chart.md) +- [Pie Chart](../types/pie-chart.md) +- [Point Chart](../types/point-chart.md) +- [Polar Chart](../types/polar-chart.md) +- [Radial Chart](../types/radial-chart.md) +- [Shape Chart](../types/shape-chart.md) +- [Spline Chart](../types/spline-chart.md) +- [Scatter Chart](../types/scatter-chart.md) +- [Stacked Chart](../types/stacked-chart.md) +- [Step Chart](../types/shape-chart.md) +- [Stock Chart](../types/stock-chart.md) +- [Chart Animations](chart-animations.md) +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Markers](chart-markers.md) +- [Chart Overlays](chart-overlays.md) +- [Chart Trendlines](chart-trendlines.md) + +## API References + +The following table lists API members mentioned in above sections: + +- [`Resolution`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Resolution) +- [`IndicatorTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_IndicatorTypes) +- [`OverlayTypes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_OverlayTypes) +- [`VolumeType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_VolumeType) +- [`ZoomSliderType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_ZoomSliderType) +- [`XAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_XAxisMode) +- [`YAxisMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html#IgniteUI_Blazor_Controls_IgbFinancialChart_YAxisMode) +- [`XAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisInterval) +- [`YAxisInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisInterval) +- [`XAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_XAxisMinorInterval) +- [`YAxisMinorInterval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisMinorInterval) +- [`XAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_XAxisLabelVisibility) +- [`YAxisLabelVisibility`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_YAxisLabelVisibility) +- [`YAxisIsLogarithmic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_YAxisIsLogarithmic) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-tooltips.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-tooltips.md new file mode 100644 index 000000000..8c7a0cfc0 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-tooltips.md @@ -0,0 +1,265 @@ +--- +title: Blazor Chart Tooltips | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Tooltips +_keywords: Blazor Charts, Tooltips, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "ToolTipType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Tooltips +_premium: true +--- + +# Blazor Chart Tooltips + +In Blazor charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) controls. + +## Blazor Chart Tooltip Types + +Blazor Chart provide three types of tooltips that you can with tooltips enabled by setting the [`ToolTipType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ToolTipType) property. The following example shows the [Column Chart](../types/column-chart.md) with a combo-box that you can use to change type of tooltips. + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var toolTipTypeEditor = this.toolTipTypeEditor; + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription toolTipTypeEditor; + private IgbLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +The [`ToolTipType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ToolTipType) property is configurable and can be set to one of the following options: + +| Property Value | Description | +| -------------------|----------------| +| `Default` Tooltip | Display a tooltip for a single item when the pointer is positioned over it. | +| `Data` Tooltip | Display the data tooltips for all series in the chart. | +| `Item` Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. | +| `Category` Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over. | + +
+ +## Blazor Chart Tooltip Template + +If none of built-in types of tooltips are matching your requirements, you can create your own tooltips to display and style series title, data values, and axis values. The following sections demonstrate how to do this in different types of Blazor charts. + +## Custom Tooltips in Category Chart + +This example shows how to create custom tooltips for all series in Blazor [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control. Note that you can also apply the same logic to custom tooltips in Blazor [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) control. + +```razor +@using IgniteUI.Blazor.Controls + + +
+
+ Highest Grossing Movie Franchises +
+ +
+
+
+ @if (Data != null) + { + + + } +
+
+ +@code { + + private List Data = new FilmFranchiseData(); + + private IgbLegend _Legend; + private IgbLegend Legend + { + get { return _Legend; } + set { _Legend = value; StateHasChanged(); } + } + +} +``` + + +
+ +## Custom Tooltips in Data Chart + +This example shows how to create custom tooltips for each series in Blazor Data Chart control. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ @if (Data != null) + { + + @*note the onSeriesMouseEnter" function is implemented .JS file in wwwroot folder*@ + + + + + + + + + + + + } +
+ +@code { + + private List Data; + + protected override void OnInitialized() + { + this.Data = EnergyProductionData.Generate(); + } +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Markers](chart-markers.md) + +## API References + +The [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) components share the following API properties: + +- [`ToolTipType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ToolTipType) + +In the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component, you can use the following API components and properties: + +- [`IgbDataToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataToolTipLayer.html) +- [`IgbItemToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbItemToolTipLayer.html) +- [`IgbCategoryToolTipLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryToolTipLayer.html) +- `ShowDefaultToolTip` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-trendlines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-trendlines.md new file mode 100644 index 000000000..d09899e35 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-trendlines.md @@ -0,0 +1,253 @@ +--- +title: Blazor Chart Trendlines | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart Trendlines +_keywords: Blazor Charts, Trendlines, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "XamDataChart", "TrendLineType"] +namespace: Infragistics.Controls.Charts +_tocName: Chart Trendlines +_premium: true +--- + +# Blazor Chart Trendlines + +In Ignite UI for Blazor charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html), [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html), and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) (except for stacked series, shape series, and range series). + +Trendlines are off by default, but you can enable them by setting the [`TrendLineType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLineType) property. Also, you can modify multiple appearance properties of trendlines such as its brush, period, and thickness. + +The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the `TrendLineDashArray` property to an array of numbers. The numeric array describes the length of the dashes of the trendline. + +## Blazor Chart Trendlines Example + +The following sample depicts a [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) showing the stock trend of Microsoft between 2013 and 2017 with a **QuinticFit** trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down. + +```razor +@using IgniteUI.Blazor.Controls + + + +
+
+ + + +
+ +
+ + @if (Data != null) + { + + } +
+
+ +@code { + + protected StockPrice[] Data; + protected TrendLineType TrendLineType = TrendLineType.QuinticFit; + + protected override async Task OnInitializedAsync() + { + this.Data = await StocksHistory.GetMicrosoftStock(); + } +} +``` + + +
+ +## Blazor Chart Trendlines Dash Array Example + +The following sample depicts a [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) showing a [`IgbFinancialPriceSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialPriceSeries.html) with a **QuarticFit** dashed trendline applied via the [`TrendLineDashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialPriceSeries.html#IgniteUI_Blazor_Controls_IgbFinancialPriceSeries_TrendLineDashArray) property: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var series1 = this.series1; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbFinancialPriceSeries series1; + + private Stock2Years _stock2Years = null; + public Stock2Years Stock2Years + { + get + { + if (_stock2Years == null) + { + _stock2Years = new Stock2Years(); + } + return _stock2Years; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class Stock2YearsItem +{ + public string Month { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } +} + +public class Stock2Years + : List +{ + public Stock2Years() + { + this.Add(new Stock2YearsItem() { Month = @"2020", Open = 41.1, High = 41.6, Low = 41.1, Close = 41.4, Volume = 32610 }); + this.Add(new Stock2YearsItem() { Month = @"FEB", Open = 41.4, High = 41.7, Low = 41.2, Close = 41.4, Volume = 28666 }); + this.Add(new Stock2YearsItem() { Month = @"MAR", Open = 41.3, High = 41.3, Low = 40.7, Close = 41, Volume = 30139 }); + // ... 21 more items + } +} +``` + + +
+ +## Blazor Chart Trendline Layer + +The [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) is a series type, you can add more than one of them to the [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously. + +## Trendline Layer Usage + +The [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) must be provided with a [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html#IgniteUI_Blazor_Controls_IgbTrendLineLayer_TargetSeries) and a [`TrendLineType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html#IgniteUI_Blazor_Controls_IgbTrendLineLayer_TrendLineType) in order to work properly. The different trendline types that are available are the same as the trendlines that are available on the series. + +If you would like to show the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) in the Legend, you can do so by setting the `UseLegend` property to `true`. + +## Styling the Trendline Layer + +By default, the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) renders with the same color as its [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html#IgniteUI_Blazor_Controls_IgbTrendLineLayer_TargetSeries) in a dashed line. This can be configured by using the various styling properties on the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html). + +To change the color of the trendline that is drawn, you can set its `Brush` property. Alternatively, you can also set the `UseIndex` property to `true`, which will pull from the chart's [`Brushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Brushes) palette based on the index in which the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) is placed in the chart's [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) collection. + +You can also modify the way that the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html) appears by using its `AppearanceMode` and `ShiftAmount` properties. The `ShiftAmount` takes a value between -1.0 and 1.0 to determine how much of a "shift" to apply to the options that end in "Shift". + +The following are the options for the `AppearanceMode` property: + +- `Auto`: This will default to the DashPattern enumeration. +- `BrightnessShift`: The trendline will take the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html#IgniteUI_Blazor_Controls_IgbTrendLineLayer_TargetSeries) brush and modify its brightness based on the provided `ShiftAmount`. +- `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the `DashArray` property on the [`IgbTrendLineLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html). +- `OpacityShift`: The trendline will take the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html#IgniteUI_Blazor_Controls_IgbTrendLineLayer_TargetSeries) brush and modify its opacity based on the provided `ShiftAmount`. +- `SaturationShift`: The trendline will take the [`TargetSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTrendLineLayer.html#IgniteUI_Blazor_Controls_IgbTrendLineLayer_TargetSeries) brush and modify its saturation based on the provided `ShiftAmount`. + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) + +## API References + +The [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) components share the following API properties: + +- [`TrendLineBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLineBrushes) +- [`TrendLinePeriod`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLinePeriod) +- [`TrendLineThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLineThickness) +- [`TrendLineType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TrendLineType) + +In the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) component, most types of series have the following API properties: + +- [`TrendLineBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_TrendLineBrush) +- [`TrendLineDashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_TrendLineDashArray) +- [`TrendLinePeriod`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_TrendLinePeriod) +- [`TrendLineThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_TrendLineThickness) +- [`TrendLineType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_TrendLineType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-user-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-user-annotations.md new file mode 100644 index 000000000..c9ebbe8af --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-user-annotations.md @@ -0,0 +1,251 @@ +--- +title: Blazor Chart User Annotations | Data Visualization | Infragistics +_description: Infragistics' Blazor Chart User Annotations +_keywords: Blazor Charts, User Annotations, Infragistics +mentionedTypes: ["DataChart", "UserAnnotationLayer", "UserStripAnnotation", "UserSliceAnnotation", "UserPointAnnotation", "Toolbar", "UserAnnotationInformation", "SeriesViewer"] +namespace: Infragistics.Controls.Charts +_tocName: Chart User Annotations +_premium: true +--- + +# Blazor Chart User Annotation Layer + +In Ignite UI for Blazor, you can annotate the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. + +This is directly integrated with the available tools of the [`IgbToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolbar.html). The following topic explains, with examples, how you can utilize the [`IgbToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolbar.html) to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. + +```razor +@using IgniteUI.Blazor.Controls +@inject IJSRuntime JS; + +
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + +
+
+
+
+ +@code { + + private Action BindElements { get; set; } + private IgbInput AnnotationInput{ get; set; } + private IgbTextarea AnnotationTextArea{ get; set; } + private IgbUserAnnotationInformation AnnotationInfo{ get; set; } + private IgbToolbar toolbar; + private IgbDataChart chart; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var toolbar = this.toolbar; + var chart = this.chart; + + this.BindElements = () => { toolbar.Target = this.chart; }; + this.BindElements(); + } + + public void OnUserAnnotationInfoRequested(IgbUserAnnotationInformationEventArgs e){ + this.AnnotationInfo = e.AnnotationInfo; + JS.InvokeVoidAsync("onUserAnnotationToggleDialog", new object[] { true }); + } + + public async void OnDoneButtonClick(MouseEventArgs e){ + + if (this.AnnotationInfo == null) return; + + this.AnnotationInfo.Label = this.AnnotationInput.GetCurrentValue(); + this.AnnotationInfo.AnnotationData = this.AnnotationTextArea.GetCurrentValue(); + + string badgeColor = await JS.InvokeAsync("getBadgeColor"); + string mainColor = await JS.InvokeAsync("getMainColor"); + + this.AnnotationInfo.BadgeColor = badgeColor; + this.AnnotationInfo.MainColor = mainColor; + + await this.chart.FinishAnnotationFlowAsync(this.AnnotationInfo); + + await JS.InvokeVoidAsync("onUserAnnotationToggleDialog", new object[] { false }); + } + + public void OnCancelButtonClick(MouseEventArgs e) + { + if (this.AnnotationInfo != null) + { + this.chart.CancelAnnotationFlow(this.AnnotationInfo.AnnotationId); + } + + JS.InvokeVoidAsync("onUserAnnotationToggleDialog", new object[] { false }); + } + + private CountryRenewableElectricity _countryRenewableElectricity = null; + public CountryRenewableElectricity CountryRenewableElectricity + { + get + { + if (_countryRenewableElectricity == null) + { + _countryRenewableElectricity = new CountryRenewableElectricity(); + } + return _countryRenewableElectricity; + } + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryRenewableElectricityItem +{ + public string Year { get; set; } + public double Europe { get; set; } + public double China { get; set; } + public double America { get; set; } +} + +public class CountryRenewableElectricity + : List +{ + public CountryRenewableElectricity() + { + this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 }); + this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 }); + // ... 9 more items + } +} +``` + + +> \[!Note] +> This feature is designed to support X and Y axes and does not currently support radial or angular axes. + +## Using the User Annotations with the Toolbar + +The [`IgbToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolbar.html) exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the [`IsUserAnnotationsEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_IsUserAnnotationsEnabled) property on the corresponding chart to `true`. + +The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart. + + + +You can delete the annotations that you have previously added by selecting the "Delete Note" menu item and then clicking on the axis annotation for the slice or strip user annotations, or by clicking the corresponding data point for the point user annotation. + + + +When adding one of these user annotations via the `XamToolbar`, the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a [`IgbUserAnnotationInformation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html) object that allows the configuration of multiple different aspects of the annotation to be added. + +The table below details the different configurable properties on [`IgbUserAnnotationInformation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html): + +| Property | Type | Description | +|------------|---------|-------------| +|[`AnnotationData`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_AnnotationData)|`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.| +|[`AnnotationId`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_AnnotationId)|`string`|This read-only property returns the unique string ID of the user annotation.| +|[`BadgeColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_BadgeColor)|`string`|This property gets or sets the color to use for the badge in the user annotation.| +|[`BadgeImageUri`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_BadgeImageUri)|`string`|This property gets or sets a path to an image to use for the badge in the user annotation.| +|[`DialogSuggestedXLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_DialogSuggestedXLocation)|`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.| +|[`DialogSuggestedYLocation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_DialogSuggestedYLocation)|`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.| +|[`Label`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_Label)|`string`|This property gets or sets the label to be shown in the user annotation.| +|[`MainColor`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_MainColor)|`string`|This property gets or sets the color to be used to fill the background of the user annotation.| + +After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the [`FinishAnnotationFlow`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html#IgniteUI_Blazor_Controls_IgbUserAnnotationLayer_FinishAnnotationFlow) method on the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling [`CancelAnnotationFlow`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html#IgniteUI_Blazor_Controls_IgbUserAnnotationLayer_CancelAnnotationFlow) and passing the [`AnnotationId`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_AnnotationId) of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. + +## Using the User Annotations Programmatically + +When using the [`IgbUserAnnotationLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html) programmatically, you can invoke two different methods on the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) to put the chart into a mode where you can add or remove a user annotation. These methods are named [`StartCreatingAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_StartCreatingAnnotation) and [`StartDeletingAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_StartDeletingAnnotation), respectively. + +After invoking [`StartCreatingAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_StartCreatingAnnotation), you can add a slice annotation by clicking on a label on the X or Y axis, add a strip annotation by clicking and dragging in the plot area and releasing the mouse button, or add a point annotation by clicking on a data point on a series plotted in the chart. + +Adding one of these user annotations will raise an event named `UserAnnotationInformationRequested`, where you can provide more information for the user annotation. This event's arguments have a property named `AnnotationInfo` that will return a [`IgbUserAnnotationInformation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html) object that allows the configuration of multiple different aspects of the annotation to be added. + +After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the [`FinishAnnotationFlow`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html#IgniteUI_Blazor_Controls_IgbUserAnnotationLayer_FinishAnnotationFlow) method on the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling [`CancelAnnotationFlow`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html#IgniteUI_Blazor_Controls_IgbUserAnnotationLayer_CancelAnnotationFlow) and passing the [`AnnotationId`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html#IgniteUI_Blazor_Controls_IgbUserAnnotationInformation_AnnotationId) of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. + +Once the user annotation has been added to the chart, it will appear in the [`Series`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Series) collection as a [`IgbUserAnnotationLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html). The [`IgbUserAnnotationLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html) has an [`Annotations`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationLayer.html#IgniteUI_Blazor_Controls_IgbUserAnnotationLayer_Annotations) collection that can store [`IgbUserSliceAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserSliceAnnotation.html), [`IgbUserStripAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserStripAnnotation.html) and [`IgbUserPointAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserPointAnnotation.html) elements depending on the type of annotations added to the plot area. + +## User Annotation ToolTip + +Each of the user annotations can show a tooltip on mouse hover to add even more detail to the annotations. + +The chart exposes a `UserAnnotationToolTipContentUpdating` event that you can handle to update the content of the tooltip for the user annotation as the tooltip is shown. The event arguments of this event exposes two properties: `Content` and `AnnotationInfo`. + +The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's [`AnnotationData`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserBaseAnnotation.html#IgniteUI_Blazor_Controls_IgbUserBaseAnnotation_AnnotationData) property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip. + +## API References + +The following is a list of API members mentioned in the above sections: + +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html).[`IsUserAnnotationsEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_IsUserAnnotationsEnabled) +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html).`SeriesViewer.UserAnnotationInformationRequested` +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html).`SeriesViewer.userAnnotationToolTipContentUpdating` +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html).[`CancelAnnotationFlow`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_CancelAnnotationFlow) +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html).[`StartCreatingAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_StartCreatingAnnotation) +- [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html).[`StartDeletingAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_StartDeletingAnnotation) +- [`IgbUserAnnotationInformation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserAnnotationInformation.html) +- [`IgbUserSliceAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserSliceAnnotation.html) +- [`IgbUserStripAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserStripAnnotation.html) +- [`IgbUserPointAnnotation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbUserPointAnnotation.html) +- [`IgbToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolbar.html) + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Data Annotations](chart-data-annotations.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/checkbox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/checkbox.md new file mode 100644 index 000000000..05c719bdb --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/checkbox.md @@ -0,0 +1,254 @@ +--- +title: Blazor Checkbox Component | Ignite UI for Blazor +_description: Learn how to use the Blazor Checkbox Component to add checkboxes and enable checked, unchecked or indeterminate state for end-users. +_keywords: Ignite UI for Blazor, UI controls, Blazor widgets, web widgets, UI widgets, Blazor, Native Blazor Components Suite, Native Blazor Controls, Native Blazor Components Library, Blazor Checkbox components, Blazor Checkbox controls +_license: MIT +mentionedTypes: ["Checkbox", "Form"] +_tocName: Checkbox +--- + +# Blazor Checkbox Overview + +The Blazor Checkbox is a component that lets you add checkboxes to your Blazor apps. It behaves as a standard HTML checkbox, enabling users to select basic checked and unchecked states or an additional indeterminate state. You also get full control over the styling of the Blazor checkbox component and ability to use it with forms. + +## Checkbox Example + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Checkbox +
+ +@code { + +} +``` + + +
+ +## Usage + +At its core, the [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification in the Material Design guidelines. + + + +Before using the [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + + + +
+ +The simplest way to start using the [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) is as follows: + +```razor + +``` + +> \[!WARNING] +> The [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) component doesn't work with the standard `
` element. Use `Form` instead. + +## Examples + +### Label + +To provide a meaningful label for the checkbox, simply place some text between the opening and closing tags: + +```razor +Label +``` + +You can specify if the label should be positioned before or after the checkbox toggle by setting the `label-position` attribute of the checkbox. Allowed values are `before` and `after` (default): + +```razor +Label +``` + +The checkbox can also be labelled by elements external to the checkbox. In this case, the user is given full control to position and style the label in accordance with their needs. + +```razor +Label + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + Label +
+ Label + +
+ +
+ +@code { + + +} +``` + + +### Checked + +You can use the [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Checked) attribute of the component to determine whether the checkbox should be toggled on or off by default. + +```razor + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Label +
+ +@code { + +} +``` + + +### Indeterminate + +You can use the [`Indeterminate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Indeterminate) property of the component to set the checkbox's value to neither **true** nor **false**. + +```razor + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Label +
+ +@code { + + +} +``` + + +### Required + +You can use the [`Required`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Required) property to mark the checkbox as required. + +```razor + +``` + +### Invalid + +You can use the [`Invalid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Invalid) attribute to mark the checkbox as invalid. + +```razor + +``` + +### Disabled + +You can use the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Disabled) attribute to disable the checkbox. + +```razor + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Label +
+ +@code { + +} +``` + + +### Forms + +You can use the `Name` and [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Value) attributes when using the checkbox with `Form`. + +```razor + +``` + +## Styling + +The [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) component exposes four CSS parts which we can use for styling: + +|Name|Description| +|--|--| +| `base` | The base wrapper of the checkbox. | +| `control` | The checkbox input element. | +| `indicator` | The checkbox indicator icon. | +| `label` | The checkbox label. | + +With this four CSS parts we have full control over the Checkbox styling. + +```css +igc-checkbox::part(indicator) { + --tick-color: var(--ig-secondary-500-contrast); /* check icon color */ +} + +igc-checkbox::part(control checked)::after { + --fill-color: var(--ig-secondary-500); /* checkbox background color */ +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ Label +
+ +@code { + +} +``` + + +## API References + +- [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) +- [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Checked) +- [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Disabled) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md new file mode 100644 index 000000000..572c1e560 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md @@ -0,0 +1,293 @@ +--- +title: Blazor Chip | Infragistics +_description: Infragistics' Blazor Chip component allows you to display content in a predefined style to decorate other components anywhere in an application. +_keywords: Blazor, UI controls, web widgets, UI widgets, Web Components, Blazor Chip Components, Infragistics +_license: MIT +mentionedTypes: ["Chip"] +_tocName: Chip +--- + +# Blazor Chip Overview + +Ignite UI for Blazor Chips help people enter information, make selections, filter content, or trigger actions. + +## Blazor Chip Example + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + Chip + +
+ +@code { + + private IgbIcon RegisterIconRef { get; set; } + +} +``` + + +
+ +## Usage + + + +Before using the [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + +```razor +
+ Chip +
+ +@code { + + private IgbIcon RegisterIconRef { get; set; } + + protected override void OnInitialized() + { + } +} +``` + +To display a selectable chip, you can use the [`Selectable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html#IgniteUI_Blazor_Controls_IgbChip_Selectable) property of the chip. + +```razor + +``` + +To display a removable chip, you can use the [`Removable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html#IgniteUI_Blazor_Controls_IgbChip_Removable) property of the chip. + +```razor + +``` + +## Examples + +### Variants + +The Ignite UI for Blazor chip supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - `Primary`, `Info`, `Success`, `Warning`, or `Danger` to the [`Variant`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html#IgniteUI_Blazor_Controls_IgbChip_Variant) property. + +```razor + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + Primary + + + + Info + + + + Success + + + + Warning + + + + Danger + +
+ +@code { + +} +``` + + +### Disabled + +The Ignite UI for Blazor chip can be disabled by using the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html#IgniteUI_Blazor_Controls_IgbChip_Disabled) property. + +### Prefix / Suffix + +With the `Prefix` and `Suffix` parts of the [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) component and their slots, we can add different content before and after the main content of the chip. We provide default select and remove icons but you can customize them using the [`IgbSelect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSelect.html) and `Remove` slots. You can add additional content before or after the main content, using the `Start` and `End` slots. + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + + + Custom Icons + + + + + + + Start Slot + + + + End Slot + + + + + + + Disabled Slot + + + + +
+ +@code { + + private IgbIcon SelectIconRef { get; set; } + private IgbIcon BrushIconRef { get; set; } + private IgbIcon BrickWallIconRef { get; set; } + private IgbIcon DogIconRef { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if(firstRender && this.SelectIconRef != null) + { + await this.SelectIconRef.EnsureReady(); + //custom-select + string selectIcon = ""; + await this.SelectIconRef.RegisterIconFromTextAsync("custom-select", selectIcon, "material"); + } + + if(firstRender && this.BrushIconRef != null) + { + await this.BrushIconRef.EnsureReady(); + //brush + string brushIcon = "Brush IconA picture showing a painting brush."; + await this.BrushIconRef.RegisterIconFromTextAsync("brush", brushIcon, "material"); + } + + if(firstRender && this.BrickWallIconRef != null) + { + await this.BrickWallIconRef.EnsureReady(); + //brick-wall + string brickIcon = "Brick Wall IconA picture depicting a wall made of bricks."; + await this.BrickWallIconRef.RegisterIconFromTextAsync("brick-wall", brickIcon, "material"); + } + + if(firstRender && this.DogIconRef != null) + { + await this.DogIconRef.EnsureReady(); + //dog-icon + string docIcon = ""; + await this.DogIconRef.RegisterIconFromTextAsync("dog-icon", docIcon, "material"); + } + } +} +``` + + +## Size + +We allow the user to choose the size of the [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) by utilizing the `--ig-size` CSS variable: + +```css +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-large { + --ig-size: var(--ig-size-large); +} +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + small + + + + medium + + + + large + +
+ +@code { + private IgbChip ChipRef {get; set;} + +} +``` + + +## Styling + +The [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) component exposes a `base`, `prefix`, `suffix` CSS parts that can be used to change all of its style properties. + +```css +igc-chip::part(base) { + background: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); +} + +igc-chip::part(suffix) { + color: var(--ig-gray-400); +} +``` + +```razor +@using IgniteUI.Blazor.Controls + +
+ + Chip + +
+ +@code { + + private IgbIcon RegisterIconRef { get; set; } + +} +``` + + +## API References + +- [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md new file mode 100644 index 000000000..d64538bae --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md @@ -0,0 +1,287 @@ +--- +title: Blazor Circular Progress | Circular Progress | Infragistics +_description: Circular Progress Indicator component allows developers to display progress in a circle with endless customization options. +_keywords: Blazor Circular Progress, Ignite UI for Blazor, Infragistics +_license: MIT +mentionedTypes: ["CircularProgress", "CircularGradient"] +namespace: Infragistics.Controls +_tocName: Circular Progress +--- + +# Blazor Circular Progress Overview + +The Ignite UI for Blazor Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes. + +## Blazor Circular Progress Example + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + + +
+ +@code { + +} +``` + + +
+ +## Usage + + + +Before using the [`IgbCircularProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularProgress.html), you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the [`IgbCalendar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalendar.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + +```razor + +``` + +### Progress Types + +You can set the type of your indicator, using the [`Variant`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_Variant) attribute. There are five types of circular progress indicators - **primary** (default), **error**, **success**, **info**, and **warning**. + +```razor + +``` + +### Indeterminate Progress + +If you want to track a process that is not determined precisely, you can set the [`Indeterminate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_Indeterminate) property. Also, you can hide the default label of the Ignite UI for Blazor [`IgbCircularProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularProgress.html) by setting the [`HideLabel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_HideLabel) property and customize the progress indicator default label via the exposed [`LabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_LabelFormat) property. + +```razor + +``` + +The following sample demonstrates the above configuration: + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + + +
+ +@code { + +} +``` + + +
+ +### Animation Duration + +You can use the [`AnimationDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_AnimationDuration) property on the [`IgbCircularProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularProgress.html) component to specify how long the animation cycle should take in milliseconds. + +```razor + +``` + +### Gradient Progress + +Customizing the progress bar in order to use a color gradient instead of a solid color could be done via the exposed `gradient` slot and [`IgbCircularGradient`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularGradient.html) which defines the gradient stops. + +```razor +@using IgniteUI.Blazor.Controls + + + + +
+ + + + + +
+ + +
+
+ +@code { + + private IgbCircularProgress CircularProgressRef { get; set; } + private double ProgressValue { get; set; } + + private IgbIconButton AddIconRef { get; set; } + private IgbIconButton RemoveIconRef { get; set; } + + protected override void OnInitialized() + { + this.ProgressValue = 0; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if(firstRender && this.AddIconRef != null && this.RemoveIconRef != null) + { + await this.AddIconRef.EnsureReady(); + await this.RemoveIconRef.EnsureReady(); + + string addIcon = ""; + string removeIcon = ""; + + await this.AddIconRef.RegisterIconFromTextAsync("add", addIcon, "material"); + await this.RemoveIconRef.RegisterIconFromTextAsync("remove", removeIcon, "material"); + } + } + + private void OnAddIconClick(MouseEventArgs args) + { + this.ProgressValue = this.ProgressValue + 10; + } + + private void OnRemoveIconClick(MouseEventArgs args) + { + if(this.ProgressValue > 0) + { + this.ProgressValue = this.ProgressValue - 10; + } + } +} +``` + + +> \[!Note] +> For each [`IgbCircularGradient`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularGradient.html) defined as gradient slot of Ignite UI for Blazor [`IgbCircularProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularProgress.html) a [SVG stop](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) element would be created. The values passed as `color`, `offset` and `opacity` would be set as stop-color, offset and stop-opacity of the SVG element without further validations. + +```razor + + + + + +``` + +
+ +## Styling + +The [`IgbCircularProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularProgress.html) component exposes CSS parts for almost all of its inner elements: + +|Name|Description| +|--|--| +| `svg` | The progress SVG element. | +| `gradient_start` | The progress linear-gradient start color. | +| `gradient_end` | The progress linear-gradient end color. | +| `track` | The progress ring's track area. | +| `fill` | The progress indicator area. | +| `label` | The progress label. | +| `value` | The progress label value. | +| `indeterminate` | The progress indeterminate state. | +| `primary` | The progress indicator primary state. | +| `danger` | The progress indicator error state. | +| `warning` | The progress indicator warning state. | +| `info` | The progress indicator info state. | +| `success` | The progress indicator success state. | + +Using this CSS parts we have almost full control over the Circular Progress styling. + +```css + +igc-circular-progress { + margin: 20px; + --diameter: 50px; +} + +igc-circular-progress::part(gradient_end), +igc-circular-progress::part(gradient_start) { + stop-color: var(--ig-success-200); +} + +igc-circular-progress::part(track) { + stroke: var(--ig-gray-400); +} + +``` + +```razor +@using IgniteUI.Blazor.Controls + + +
+ + + + +
+ +@code { + +} +``` + + +## API References + +- [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) +- [`IgbCalendar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalendar.html) +- [`IgbCircularGradient`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularGradient.html) +- [`IgbCircularProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCircularProgress.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/color-editor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/color-editor.md new file mode 100644 index 000000000..57f3bc5ce --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/color-editor.md @@ -0,0 +1,112 @@ +--- +title: Blazor Color Editor | Color Editor | Infragistics +_description: Color Editor component provides an easily configurable option to change colors for any desirable component or aspect of your application. +_keywords: Blazor Color Editor, Ignite UI for Blazor, Infragistics +_license: commercial +mentionedTypes: ["ColorEditor"] +namespace: Infragistics.Controls +_tocName: Color Editor +_premium: true +--- + +# Blazor Color Editor Overview + +The Ignite UI for Blazor Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1). + +## Blazor Color Editor Example + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var colorEditor = this.colorEditor; + + } + + private IgbColorEditor colorEditor; + +} +``` + + +
+ +## Dependencies + + + +First, add the **IgniteUI.Blazor.Controls** namespace in the **\_Imports.razor** file: + +```razor +@using IgniteUI.Blazor.Controls +``` + +The following modules are required when using the Dashboard Tile component: + +```razor +// in Program.cs file +builder.Services.AddIgniteUIBlazor( + typeof(IgbColorEditorModule) +); +``` + + + +## Usage + +The simplest way to start using the `ColorEditor` is as follows: + + + +```razor + + +``` + + + +## Binding to events + +The Color Editor component raises the following events: + +- valueChanged +- valueChanging + + + +```razor + + +@code { + public void OnValueChanged(IgbColorEditorPanelSelectedValueChangedEventArgs e) + { + + } +} +``` + + + +
+ +## API References + +- `ColorEditor` + +## Additional Resources + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/column-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/column-chart.md new file mode 100644 index 000000000..d2c8785d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/column-chart.md @@ -0,0 +1,1220 @@ +--- +title: Blazor Column Chart | Data Visualization | Infragistics +_description: Infragistics' Blazor Column Chart +_keywords: Blazor Charts, Column Chart, Column Graph, Vertical Bar Chart, Infragistics +_license: commercial +mentionedTypes: ["DomainChart", "CategoryChart", "XamDataChart", "ColumnSeries", "WaterfallSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "RangeColumnSeries", "RadialColumnSeries", "CategoryChartType", "Series"] +namespace: Infragistics.Controls.Charts +_tocName: Column Chart +_premium: true +--- + +# Blazor Column Chart + +The Ignite UI for Blazor Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. These columns extend from the bottom to top of the chart towards the values of data points. This chart emphasizes the amount of change over a period of time or compares multiple items. Column Chart is very similar to [Bar Chart](bar-chart.md) except that Column Chart renders in vertical orientation (up and down) while [Bar Chart](bar-chart.md) has horizontal orientation (left to right) or 90 degrees clockwise rotation. + +## Blazor Column Chart Example + +You can create Blazor Column Chart in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data and setting [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) to **Column** enum, as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Column Charts Recommendations + +### Column Charts Use Cases + +There are several uses cases for Column Charts. When you: + +- Need to compare data values of related categories. +- Need to compare data over a time period. +- Need to display negative values as well as positive values in the same data set. +- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down. + +### Column Charts Best Practices + +- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. +- Order time-series data from left to right. + +### When Not to Use Column Charts + +- You have many (more than 10 or 12) series of data. Your goal is to ensure the chart is readable. + +### Column Charts Data Structure + +- The data model must contain at least one numeric property. +- The data model may contain an options string or date-time property for labels. +- The data source should contain at least one data item. + +## Blazor Column Chart with Single Series + +Column Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the bottom to top of the chart towards the values of data points. + +You can create this type of chart in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data and setting the [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) property to **Column** value, as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Average Temperature Range in New York +
+
+ + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + + } + + private IgbCategoryChart chart; + + private TemperatureAverageData _temperatureAverageData = null; + public TemperatureAverageData TemperatureAverageData + { + get + { + if (_temperatureAverageData == null) + { + _temperatureAverageData = new TemperatureAverageData(); + } + return _temperatureAverageData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureAverageDataItem +{ + public string Month { get; set; } + public double Temperature { get; set; } +} + +public class TemperatureAverageData + : List +{ + public TemperatureAverageData() + { + this.Add(new TemperatureAverageDataItem() { Month = @"Jan", Temperature = 3 }); + this.Add(new TemperatureAverageDataItem() { Month = @"Feb", Temperature = 4 }); + this.Add(new TemperatureAverageDataItem() { Month = @"Mar", Temperature = 9 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Column Chart with Multiple Series + +The Column Chart is able to render multiple columns per category for comparison purposes. You can create this type of chart in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data and setting the [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) property to **Column** value, as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Highest Grossing Movie Franchises +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private HighestGrossingMovies _highestGrossingMovies = null; + public HighestGrossingMovies HighestGrossingMovies + { + get + { + if (_highestGrossingMovies == null) + { + _highestGrossingMovies = new HighestGrossingMovies(); + } + return _highestGrossingMovies; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class HighestGrossingMoviesItem +{ + public string Franchise { get; set; } + public double TotalRevenue { get; set; } + public double HighestGrossing { get; set; } +} + +public class HighestGrossingMovies + : List +{ + public HighestGrossingMovies() + { + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 }); + this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 }); + // ... 3 more items + } +} +``` + + +
+ +## Blazor Column Chart Styling + +The Blazor Column Chart has many options for styling and modification of the visual appearance. + +You can create this type of chart in the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control by binding your data, as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Percentage Change in Energy Generation +
+
+ + + +
+
+ + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbCategoryChart chart; + + private EnergyRenewableConsumption _energyRenewableConsumption = null; + public EnergyRenewableConsumption EnergyRenewableConsumption + { + get + { + if (_energyRenewableConsumption == null) + { + _energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return _energyRenewableConsumption; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class EnergyRenewableConsumptionItem +{ + public string Location { get; set; } + public double Year { get; set; } + public double Hydro { get; set; } + public double Solar { get; set; } + public double Wind { get; set; } + public double Other { get; set; } +} + +public class EnergyRenewableConsumption + : List +{ + public EnergyRenewableConsumption() + { + this.Add(new EnergyRenewableConsumptionItem() { Location = @"China", Year = 2019, Hydro = 1269.5, Solar = 223, Wind = 405.2, Other = 102.8 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"Europe", Year = 2019, Hydro = 632.54, Solar = 154, Wind = 461.3, Other = 220.3 }); + this.Add(new EnergyRenewableConsumptionItem() { Location = @"USA", Year = 2019, Hydro = 271.16, Solar = 108, Wind = 303.4, Other = 78.34 }); + // ... 2 more items + } +} +``` + + +
+ +## Advanced Types of Column Charts + +The following sections explain more advanced types of Blazor Column Charts that can be created using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control instead of [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control with simplified API. + +## Blazor Waterfall Chart + +The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#blazor-range-column-chart), but it requires only one numeric data column rather than two columns for each data point. + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbWaterfallSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbWaterfallSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Facebook Consolidated Statements of Income +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var waterfallSeries1 = this.waterfallSeries1; + var waterfallSeries2 = this.waterfallSeries2; + + } + + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbWaterfallSeries waterfallSeries1; + private IgbWaterfallSeries waterfallSeries2; + + private CompanyIncomeData _companyIncomeData = null; + public CompanyIncomeData CompanyIncomeData + { + get + { + if (_companyIncomeData == null) + { + _companyIncomeData = new CompanyIncomeData(); + } + return _companyIncomeData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CompanyIncomeDataItem +{ + public double Costs { get; set; } + public double NetIncome { get; set; } + public string Category { get; set; } +} + +public class CompanyIncomeData + : List +{ + public CompanyIncomeData() + { + this.Add(new CompanyIncomeDataItem() { Costs = 55, NetIncome = double.NaN, Category = @"Revenue" }); + this.Add(new CompanyIncomeDataItem() { Costs = 45, NetIncome = double.NaN, Category = @"Expenses" }); + this.Add(new CompanyIncomeDataItem() { Costs = 35, NetIncome = double.NaN, Category = @"Research" }); + // ... 4 more items + } +} +``` + + +
+ +## Blazor Stacked Column Chart + +The Stacked Column Chart is similar to the [Category Column Chart](column-chart.md#blazor-column-chart-example) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the [Stacked Bar Chart](stacked-chart.md#blazor-stacked-bar-chart) but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis). + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Annual Birth Rates by World Region +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stackedColumnSeries = this.stackedColumnSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var s4 = this.s4; + var s5 = this.s5; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStackedColumnSeries stackedColumnSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbStackedFragmentSeries s4; + private IgbStackedFragmentSeries s5; + private IgbDataToolTipLayer dataToolTipLayer; + + private ContinentsBirthRate _continentsBirthRate = null; + public ContinentsBirthRate ContinentsBirthRate + { + get + { + if (_continentsBirthRate == null) + { + _continentsBirthRate = new ContinentsBirthRate(); + } + return _continentsBirthRate; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class ContinentsBirthRateItem +{ + public string Year { get; set; } + public double Asia { get; set; } + public double Africa { get; set; } + public double Europe { get; set; } + public double NorthAmerica { get; set; } + public double SouthAmerica { get; set; } + public double Oceania { get; set; } +} + +public class ContinentsBirthRate + : List +{ + public ContinentsBirthRate() + { + this.Add(new ContinentsBirthRateItem() { Year = @"1950", Asia = 62, Africa = 13, Europe = 10, NorthAmerica = 4, SouthAmerica = 8, Oceania = 1 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1960", Asia = 68, Africa = 12, Europe = 15, NorthAmerica = 4, SouthAmerica = 9, Oceania = 2 }); + this.Add(new ContinentsBirthRateItem() { Year = @"1970", Asia = 80, Africa = 17, Europe = 11, NorthAmerica = 3, SouthAmerica = 9, Oceania = 1 }); + // ... 5 more items + } +} +``` + + +
+ +## Blazor Stacked 100% Column Chart + +The Stacked 100% Column Chart is identical to the [Stacked Column Chart](stacked-chart.md#blazor-stacked-column-chart) in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100 Column Chart presents the data in terms of percent of the sum of all values in a data point. + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbStacked100BarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100BarSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Distribution of Online Traffic Worldwide, by Device +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var stacked100ColumnSeries = this.stacked100ColumnSeries; + var s1 = this.s1; + var s2 = this.s2; + var s3 = this.s3; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbStacked100ColumnSeries stacked100ColumnSeries; + private IgbStackedFragmentSeries s1; + private IgbStackedFragmentSeries s2; + private IgbStackedFragmentSeries s3; + private IgbDataToolTipLayer dataToolTipLayer; + + private OnlineTrafficByDevice _onlineTrafficByDevice = null; + public OnlineTrafficByDevice OnlineTrafficByDevice + { + get + { + if (_onlineTrafficByDevice == null) + { + _onlineTrafficByDevice = new OnlineTrafficByDevice(); + } + return _onlineTrafficByDevice; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class OnlineTrafficByDeviceItem +{ + public string Category { get; set; } + public double Desktop { get; set; } + public double Mobile { get; set; } + public double Tablet { get; set; } +} + +public class OnlineTrafficByDevice + : List +{ + public OnlineTrafficByDevice() + { + this.Add(new OnlineTrafficByDeviceItem() { Category = @"Apparel", Desktop = 27, Mobile = 66, Tablet = 7 }); + this.Add(new OnlineTrafficByDeviceItem() { Category = @"Beauty", Desktop = 29, Mobile = 66, Tablet = 5 }); + this.Add(new OnlineTrafficByDeviceItem() { Category = @"Travel", Desktop = 41, Mobile = 51, Tablet = 8 }); + // ... 4 more items + } +} +``` + + +
+ +## Blazor Range Column Chart + +The Blazor Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional [Category Column Chart](column-chart.md#blazor-column-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis. + +The Range Column Chart is identical to the [Range Area Chart](area-chart.md)(area-chart.md#blazor-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area. + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbRangeColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeColumnSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Monthly Temperature Range in LA and NYC +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var rangeColumnSeries1 = this.rangeColumnSeries1; + var rangeColumnSeries2 = this.rangeColumnSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbRangeColumnSeries rangeColumnSeries1; + private IgbRangeColumnSeries rangeColumnSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private TemperatureRangeData _temperatureRangeData = null; + public TemperatureRangeData TemperatureRangeData + { + get + { + if (_temperatureRangeData == null) + { + _temperatureRangeData = new TemperatureRangeData(); + } + return _temperatureRangeData; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class TemperatureRangeDataItem +{ + public string Month { get; set; } + public double HighNY { get; set; } + public double LowNY { get; set; } + public double HighLA { get; set; } + public double LowLA { get; set; } +} + +public class TemperatureRangeData + : List +{ + public TemperatureRangeData() + { + this.Add(new TemperatureRangeDataItem() { Month = @"Jan", HighNY = 10.6, LowNY = -6.6, HighLA = 28.3, LowLA = 7.8 }); + this.Add(new TemperatureRangeDataItem() { Month = @"Feb", HighNY = 7.8, LowNY = -9.9, HighLA = 31.1, LowLA = 5.6 }); + this.Add(new TemperatureRangeDataItem() { Month = @"Mar", HighNY = 12.2, LowNY = -3.8, HighLA = 27.8, LowLA = 8.3 }); + // ... 9 more items + } +} +``` + + +
+ +## Blazor Radial Column Chart + +The Radial Column Chart belongs to a group of [Radial Chart](radial-chart.md), and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Category Column Chart](column-chart.md#blazor-column-chart-example), but wraps data points around a circle rather than stretching them horizontally. + +You can create this type of chart in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control by binding your data to a [`IgbRadialColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialColumnSeries.html), as shown in the example below: + +```razor +@using IgniteUI.Blazor.Controls + +
+
+ Ronaldo vs Messi Player Stats +
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var legend = this.legend; + var chart = this.chart; + var angleAxis = this.angleAxis; + var radiusAxis = this.radiusAxis; + var radialColumnSeries1 = this.radialColumnSeries1; + var radialColumnSeries2 = this.radialColumnSeries2; + var dataToolTipLayer = this.dataToolTipLayer; + + this.BindElements = () => { + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbLegend legend; + private IgbDataChart chart; + private IgbCategoryAngleAxis angleAxis; + private IgbNumericRadiusAxis radiusAxis; + private IgbRadialColumnSeries radialColumnSeries1; + private IgbRadialColumnSeries radialColumnSeries2; + private IgbDataToolTipLayer dataToolTipLayer; + + private FootballPlayerStats _footballPlayerStats = null; + public FootballPlayerStats FootballPlayerStats + { + get + { + if (_footballPlayerStats == null) + { + _footballPlayerStats = new FootballPlayerStats(); + } + return _footballPlayerStats; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class FootballPlayerStatsItem +{ + public string Attribute { get; set; } + public double Ronaldo { get; set; } + public double Messi { get; set; } +} + +public class FootballPlayerStats + : List +{ + public FootballPlayerStats() + { + this.Add(new FootballPlayerStatsItem() { Attribute = @"Dribbling", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Passing", Ronaldo = 8, Messi = 10 }); + this.Add(new FootballPlayerStatsItem() { Attribute = @"Finishing", Ronaldo = 10, Messi = 10 }); + // ... 5 more items + } +} +``` + + +
+ +## Additional Resources + +You can find more information about related chart types in these topics: + +- [Bar Chart](bar-chart.md) +- [Composite Chart](composite-chart.md) +- [Radial Chart](radial-chart.md) +- [Stacked Chart](stacked-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +| Chart Type | Control Name | API Members | +| --------------------|--------------------|------------------------| +| Column | [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) | [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html#IgniteUI_Blazor_Controls_IgbCategoryChart_ChartType) = **Column** | +| Radial Column | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbRadialColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialColumnSeries.html) | +| Range Column | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbRangeColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeColumnSeries.html) | +| Stacked Column | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbStackedColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedColumnSeries.html) | +| Stacked 100% Column | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbStacked100ColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStacked100ColumnSeries.html) | +| Waterfall | [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) | [`IgbWaterfallSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbWaterfallSeries.html) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/column-configuration.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/column-configuration.md new file mode 100644 index 000000000..225aa894a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/column-configuration.md @@ -0,0 +1,224 @@ +--- +title: Blazor Grid Lite Cell Template | Ignite UI for Blazor | MIT license +_description: Grid Lite column configuration and column properties. Try our open-source Blazor Grid Lite - lightweight and packed with essential features. +_keywords: column configuration, Blazor, {ComponentKeywords}, Ignite UI for Blazor, Infragistics +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_tocName: Column Configuration +--- + +# Column Configuration + + + +Columns are defined declaratively using `` child elements within the grid. The `Field` property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows. + +```razor + + + + +``` + +## Configuration Based on the Data Source + +The grid supports inferring the column configuration based on the provided data source when `AutoGenerate` is set to true. It tries to infer the appropriate `Field` and `DataType` properties based on records in the data. + +```razor + +@code { + private List products; + + protected override void OnInitialized() + { + products = new List + { + new ProductInfo { Id = "1", Name = "example", Price = 10 }, + }; + } + + public class ProductInfo + { + public string Id { get; set; } + public string Name { get; set; } + public double Price { get; set; } + } +} +``` + +The previous snippet will result in the grid automatically creating columns equivalent to: + +```razor + + + + + +``` + +Useful for a quick render of some data without any additional customizations. + +## Additional Column Configuration + +The column exposes several more properties for customization: + +### Column Width + +By default, the columns have a width of **minmax(136px, 1fr)** which translates to a minimum width of 136px and maximum of +1 part of the available space in the Grid Lite. This way the columns are fluid and responsive accommodating for changes +in the grid width. + + + +To change the width of column, use the `Width` parameter of the `GridLiteColumn` component. + +```razor + +``` + + + +The property accepts valid CSS length units. + +### Hiding columns + + + +Columns can be hidden/shown by setting the `Hidden` parameter on the `GridLiteColumn` component. + +```razor +